diff --git a/.babelrc b/.babelrc
index bdb1a6b4db6..26a2fac61f1 100644
--- a/.babelrc
+++ b/.babelrc
@@ -1,16 +1,43 @@
 {
-  "presets": [["es2015", { "loose": true }]],
+  "presets": [
+    [
+      "env",
+      {
+        "loose": true,
+        "modules": false,
+        "targets": {
+          "browsers": ["> 1%", "last 2 versions", "not ie <= 8"]
+        }
+      }
+    ],
+    "stage-2"
+  ],
   "plugins": ["transform-vue-jsx"],
   "env": {
     "utils": {
+      "presets": [
+        [
+          "env",
+          {
+            "loose": true,
+            "modules": "commonjs",
+            "targets": {
+              "browsers": ["> 1%", "last 2 versions", "not ie <= 8"]
+            }
+          }
+        ],
+      ],
       "plugins": [
         ["module-resolver", {
           "root": ["element-ui"],
           "alias": {
-            "element-ui/src": "element-ui/lib"
+            "element-ui/src": "@femessage/element-ui/lib"
           }
         }]
       ]
+    },
+    "test": {
+      "plugins": ["istanbul"]
     }
   }
 }
diff --git a/.eslintrc b/.eslintrc
index 2a84035cf0e..ad4aa56f7fb 100644
--- a/.eslintrc
+++ b/.eslintrc
@@ -1,10 +1,7 @@
 {
-  "env": {
-    "mocha": true
-  },
   "globals": {
-    "expect": true,
-    "sinon": true
+    "ga": true,
+    "chrome": true
   },
   "plugins": ["html", "json"],
   "extends": "elemefe",
@@ -12,8 +9,8 @@
     "no-restricted-globals": ["error", "event", "fdescribe"]
   },
   "parserOptions": {
+    "ecmaVersion": 6,
     "ecmaFeatures": {
-      "experimentalObjectRestSpread": true,
       "jsx": true
     }
   }
diff --git a/.github/CONTRIBUTING.en-US.md b/.github/CONTRIBUTING.en-US.md
index 0a8c357e640..ee651f77d43 100644
--- a/.github/CONTRIBUTING.en-US.md
+++ b/.github/CONTRIBUTING.en-US.md
@@ -43,6 +43,8 @@ npm run dev
 # open http://localhost:8085
 ```
 
+> **Notice**: modify `examples/play/index.vue` file, use the component you contribute, then run `npm run dev:play`, go ahead [http://localhost:8085](http://localhost:8085), get result, more quickly and friendly.
+
 To build:
 
 ```shell
diff --git a/.github/CONTRIBUTING.es.md b/.github/CONTRIBUTING.es.md
index 177e0ca0918..d5c6022a5ff 100644
--- a/.github/CONTRIBUTING.es.md
+++ b/.github/CONTRIBUTING.es.md
@@ -37,7 +37,7 @@ Estamos orgullosos de que usted esta interesado en contribuir al proyecto `Eleme
 - Fusión de un PR requiere dos mantenedores: el primero aprueba los cambios después de revisar, y entonces el segundo mantenedor revisa los cambios y hace la fusión.
 
 
-## Requerimientos Técnicos 
+## Requerimientos Técnicos
 `Node.js 4+`, `yarn` y `npm 3+` son requisitos. Nota: Usamos yarn para bloquear versiones de dependencias, por lo que debería instalar dependencias usando `yarn` en lugar de `npm install`.
 .
 ```shell
@@ -47,6 +47,8 @@ npm run dev
 # abra http://localhost:8085
 ```
 
+> **Notice**: modify `examples/play/index.vue` file, use the component you contribute, then run `npm run dev:play`, go ahead [http://localhost:8085](http://localhost:8085), get result, more quickly and friendly.
+
 Para armar:
 
 ```
diff --git a/.github/CONTRIBUTING.fr-FR.md b/.github/CONTRIBUTING.fr-FR.md
new file mode 100644
index 00000000000..f8112be219d
--- /dev/null
+++ b/.github/CONTRIBUTING.fr-FR.md
@@ -0,0 +1,60 @@
+# Guide à destination des contributeurs d'Element UI
+
+Bonjour! Merci d'avoir choisi Element UI.
+
+Element UI est une bibliothèque de composants basée sur Vue 2.0 pour les développeurs, les designers et les chefs de produits.
+
+Nous sommes ravis que vous souhaitiez contribuer à Element. Avant de soumettre votre contribution, veuillez vous assurer de prendre un moment pour lire les indications suivantes.
+
+## Concernant les issues
+
+- Les issues concernent exclusivement les bugs, les demandes de fonctionnalités et les sujets liés à la conception. Les questions concernant d'autres sujets peuvent être fermées directement. Si vous avez des questions à propos de l'utilisation d'Element, veuillez vous rendre sur [Gitter](https://gitter.im/element-en/Lobby) pour obtenir de l'aide.
+
+- Avant de soumettre une issue, veuillez vérifier si des problèmes similaires n'ont pas déjà été signalés.
+
+- Veuillez spécifier la version de `Element` et `Vue` que vous utilisez, et fournir des informations sur le système d'exploitation et le navigateur. [JSFiddle](https://jsfiddle.net/) est recommandé afin de construire une démo pour que votre problème puisse être reproduit clairement.
+
+## Concernant les pull requests
+
+- Faites un fork de ce dépôt vers votre compte. Ne créez pas de branches ici.
+
+- Les informations de validation doivent être formatées en tant que `[Nom du composant] : Info à propos de ce commit` (par exemple `Button : Fix xxx bug`)
+
+- **NE PAS** inclure de fichiers dans le répertoire `lib`.
+
+- Assurez-vous que l'exécution de `npm run dist` génère les bons fichiers.
+
+- Pour des raisons de compatibilité et de taille de fichier, notre configuration babel n'importait que `preset-2015`, donc les API comme `Array.prototype.find` et `Object.assign` dans `ES2015` ne sont pas recommandées. Vous pouvez importer des polyfills si nécessaire.
+
+- Faites un rebase avant la création d'une PR pour garder l'historique clair.
+
+- Assurez-vous que les PRs sont créés dans la branche `dev` au lieu de la branche `master`.
+
+- Si votre PR corrige un bug, veuillez fournir une description du bug en question.
+
+- La fusion d'un PR nécessite deux responsables: l'un approuve les modifications après révision, puis l'autre les révise et les fusionne.
+
+## Pré-requis
+`Node.js 4+`, `yarn` et `npm 3+` sont requis. Note: nous utilisons yarn pour verrouiller les versions des dépendances, donc vous devriez installer les dépendances en utilisant `yarn` au lieu de `npm install`.
+```shell
+git clone git@github.com:ElemeFE/element.git
+npm run dev
+
+# open http://localhost:8085
+```
+
+> **Remarque** : modifiez le fichier `examples/play/index.vue`, utilisez le composant auquel vous contribuez, puis lancez `npm run dev:play`, allez sur [http://localhost:8085](http://localhost:8085), regardez le résultat rapidement et facilement.
+
+Pour le build:
+
+```shell
+npm run dist
+```
+
+## Concernant le développement de composants
+- Exécutez `make new <nom-du-composant>` pour créer un répertoire pour le nouveau composant. Les tests, le fichier d'entrée et la documentation sont inclus.
+- Reportez-vous au `Button` pour les composants imbriqués.
+- Reportez-vous à `Select` pour connaître les composants qui dépendent d'autres composants.
+
+## Style du code
+Il suffit de se conformer à la configuration [ESLint](https://github.com/ElemeFE/eslint-config-elemefe) de [ElemeFE](https://github.com/elemefe).
diff --git a/.github/CONTRIBUTING.zh-CN.md b/.github/CONTRIBUTING.zh-CN.md
index ce07fd8ea03..eaeffe12d17 100644
--- a/.github/CONTRIBUTING.zh-CN.md
+++ b/.github/CONTRIBUTING.zh-CN.md
@@ -1,4 +1,4 @@
-# Element UI 贡献指南
+# @femessage/element-ui 贡献指南
 
 Hi! 首先感谢你使用 Element UI。
 
@@ -7,7 +7,7 @@ Element UI 是一套为开发者、设计师和产品经理准备的开源组件
 Element UI 的成长离不开大家的支持，如果你愿意为 Element UI 贡献代码或提供建议，请阅读以下内容。
 
 ## Issue 规范
-- issue 仅用于提交 Bug 或 Feature 以及设计相关的内容，其它内容可能会被直接关闭。如果你在使用时产生了疑问，请到 Slack 或 [Gitter](https://gitter.im/ElemeFE/element) 里咨询。
+- issue 仅用于提交 Bug 或 Feature 以及设计相关的内容，其它内容可能会被直接关闭。
 
 - 在提交 issue 之前，请搜索相关内容是否已被提出。
 
@@ -16,7 +16,15 @@ Element UI 的成长离不开大家的支持，如果你愿意为 Element UI 贡
 ## Pull Request 规范
 - 请先 fork 一份到自己的项目下，不要直接在仓库下建分支。
 
-- commit 信息要以`[组件名]: 描述信息` 的形式填写，例如 `Button: fix xxx bug`。
+- commit 信息遵循 [commitlint-config-conventional](https://github.com/conventional-changelog/commitlint/tree/master/%40commitlint/config-conventional#type-enum)
+
+- 修改主题请使用 `theme` 作为 commit type
+
+- 由于本仓库的主题会随着业务不断更新，为了防止不必要的主题样式污染。自定义主题需要根据 `only-component` 分支生成主题
+
+- 于此同时，除了修改主题的 PR，其他改动请务必额外增加一个合并到 `only-component` 的 PR，保持 `only-component` 和 `master` 只有主题上的差异
+
+- [具体规范链接](https://www.yuque.com/docs/share/eeff5604-1163-47c1-b979-65373b1d9467)
 
 - **不要提交** `lib` 里面打包的文件。
 
@@ -41,6 +49,8 @@ npm run dev
 # open http://localhost:8085
 ```
 
+> **提示**：可以运行 `npm run dev:play`，修改 `examples/play/index.vue` 文件，调用你修改后的组件，仍然访问 [http://localhost:8085](http://localhost:8085)，查看修改效果，更快更方便。
+
 打包代码：
 
 ```shell
diff --git a/.github/PULL_REQUEST_TEMPLATE.md b/.github/PULL_REQUEST_TEMPLATE.md
index 239cdb19b0a..4fc57e6d79a 100644
--- a/.github/PULL_REQUEST_TEMPLATE.md
+++ b/.github/PULL_REQUEST_TEMPLATE.md
@@ -1,5 +1,5 @@
 Please make 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.zh-CN.md) | [English](https://github.com/ElemeFE/element/blob/master/.github/CONTRIBUTING.en-US.md) | [Español](https://github.com/ElemeFE/element/blob/master/.github/CONTRIBUTING.es.md)).
+* [ ] Make sure you follow Element's contributing guide ([中文](https://github.com/femessage/element/blob/master/.github/CONTRIBUTING.zh-CN.md) | [English](https://github.com/femessage/element/blob/master/.github/CONTRIBUTING.en-US.md) | [Español](https://github.com/femessage/element/blob/master/.github/CONTRIBUTING.es.md) | [Français](https://github.com/femessage/element/blob/master/.github/CONTRIBUTING.fr-FR.md)).
 * [ ] Make sure you are merging your commits to `dev` branch.
 * [ ] Add some descriptions and refer relative issues for you PR.
diff --git a/.github/stale.yml b/.github/stale.yml
new file mode 100644
index 00000000000..9f728c5752c
--- /dev/null
+++ b/.github/stale.yml
@@ -0,0 +1,17 @@
+# Number of days of inactivity before an issue becomes stale
+daysUntilStale: 365
+# Number of days of inactivity before a stale issue is closed
+daysUntilClose: 7
+# Issues with these labels will never be considered stale
+# exemptLabels:
+  # - pinned
+  # - security
+# Label to use when marking an issue as stale
+staleLabel: stale
+# Comment to post when marking an issue as stale. Set to `false` to disable
+markComment: >
+  This issue has been automatically marked as stale because it has not had
+  recent activity. It will be closed if no further activity occurs. Thank you
+  for your contributions.
+# Comment to post when closing a stale issue. Set to `false` to disable
+closeComment: false
\ No newline at end of file
diff --git a/.gitignore b/.gitignore
index 25e89649030..a9b3749c717 100644
--- a/.gitignore
+++ b/.gitignore
@@ -1,8 +1,12 @@
 node_modules
 .DS_Store
 npm-debug.log
+yarn-debug.log
+yarn-error.log
 lerna-debug.log
 npm-debug.log.*
+yarn-debug.log.*
+yarn-error.log.*
 lerna-debug.log.*
 lib
 .idea
@@ -11,6 +15,7 @@ examples/element-ui
 examples/pages/en-US
 examples/pages/zh-CN
 examples/pages/es
+examples/pages/fr-FR
 fe.element/element-ui
 .npmrc
 coverage
diff --git a/.travis.yml b/.travis.yml
index bac947919c8..abe7e6ce55a 100644
--- a/.travis.yml
+++ b/.travis.yml
@@ -1,13 +1,31 @@
-sudo: false
+branches:
+  only:
+    - master
 language: node_js
-node_js: 8
-before_install:
-- export CHROME_BIN=chromium-browser
-- export DISPLAY=:99.0
-- sh -e /etc/init.d/xvfb start
-- export TRAVIS_COMMIT_MSG="[deploy] $(git log --format='%h - %B' --no-merges -n 1)"
-- export TRAVIS_COMMIT_USER="$(git log --no-merges -n 1 --format=%an)"
-- export TRAVIS_COMMIT_EMAIL="$(git log --no-merges -n 1 --format=%ae)"
-after_success:
-- sh build/deploy-ci.sh
-- cat ./test/unit/coverage/lcov.info | ./node_modules/.bin/coveralls
+node_js:
+  - 10
+git:
+  depth: 30
+install:
+  - yarn --frozen-lockfile
+  - yarn lint --fix
+  - yarn test
+script:
+  - yarn stdver
+  # deploy 和 dist 之前必须生成一些必要文件
+  - yarn build:file
+  - yarn deploy:build
+  - yarn dist
+cache: yarn
+deploy:
+  - provider: pages
+    skip-cleanup: true
+    keep-history: true
+    local-dir: examples/element-ui
+    github-token: $GITHUB_TOKEN
+  - provider: npm
+    email: levy9527@qq.com
+    api_key: $NPM_TOKEN
+    skip-cleanup: true
+after_script:
+  - ./notify.sh
diff --git a/CHANGELOG.en-US.md b/CHANGELOG.en-US.md
index 394ba83e86d..1bc6382d253 100644
--- a/CHANGELOG.en-US.md
+++ b/CHANGELOG.en-US.md
@@ -1,5 +1,903 @@
 ## Changelog
 
+### 2.13.0
+
+*2019-11-26*
+
+#### New features
+
+- Popconfirm
+  - Add popconfirm component (#17548 by @iamkun)
+
+#### Bug fixes
+
+- BackTop
+  - Use cubic bezier scrolling (by @lon)
+- DatePicker
+  - Fix bug of only select min date of date range problem (#17191 by @smk0621)
+- Select
+  - Fix select test cases by (@msidolphin)
+- Tree
+  - Add font-size for the style of tree empty-text (#17094 by @spengjie)
+- Table
+  - Column header can be costumed (#17291 by @ziyoung)
+  - Update table header cell style (#17284 by @ziyoung)
+  - Fix table header height after filter (#17348 by @ziyoung)
+  - Fixed row-style with display not work (#17002 by @a631807682)
+  - Fix header table not display (#17341 by @ziyoung)
+- Calendar
+  - Import el-button and el-button-group (#17376 by @masongzhi)
+- MessageBox
+  - Fix icon position error (#17410 by @nullptru)
+- TimePicker
+  - Set the selection range after scrolling up or down (#16868 by @mattheyan)
+- Message
+  - Fix close instace offsetHeight（#17564） (#17852 by @gzwgq222)
+- Form
+  - Callback of validateField should be optional (#17314 by @CarterLi)
+- Cascader
+  - Fix TypeScript 3.7 compatibility (#17881 by @CarterLi)
+- Menu
+  - Fix router NavigationDuplicated error when using vue-router@^3.1.0 (#17269 by @iamkun)
+- Dropdown
+  - Update type file (#17550 by @iamkun)
+- Progress
+  - Add strokeLinecap prop (#17552 by @iamkun)
+- InfiniteScroll
+  - Skip trigger event on invisible element (#17553 by @iamkun)
+- Image
+  - Perfect picture preview behavior (#16985 by @luckyCao)
+  - Fix shield the page when preview big image (#16796 by @luckyCao)
+- Drawer 
+  - Bugfix drawer-append-to-body-not-working (#16953 by @JeremyWuuuuu)
+- Select
+  - Fix tag show value or empty issue (17199 by @luckyCao)
+- Scrollbar
+  - Fix FireFox scroll bar width (#18091 by @iamkun)
+  
+#### Optimization
+
+- I18n
+  - Update sv-SE.js (#17926 by @FOLLGAD)
+  - Update avatar component fr doc (#17762 by @blombard)
+- Docs
+  - Fix time-select typo (#17250 by @wacky6)
+  - Fix Drawer attribute accepted value typo in es (#17122 by @haoranyu)
+  - Update Spanish changelog 2.12.0 (#17364 by @Gonzalo2310)
+  - Fix Changelog typo (#17874 by @renlixin)
+  - Fix Loading demo (#17862 by @MBearo)
+  - Add input event in input Events Table (#18061 by @zhouxinyong)
+  - Delete Input repeat change event (#18085 by @zhouxinyong)
+
+### 2.12.0
+
+*2019-08-29*
+
+#### New features
+
+- Popover
+  - Add close-delay prop (#16671 by @LachlanStuart)
+- Theme
+  - Add Chrome Extension: Element Theme Extension (#16686 by @iamkun)
+- Icon
+  - Add font-display to @font-face declaration (#16805 by @iamfaizalandyka)
+
+#### Bug fixes
+
+- Carousel
+  - Fix onChange emit value (#16705 by @iamkun)
+- Notification
+  - Fix modifying incoming option object (#16704 by @iamkun)
+- DatePicker
+  - Add className for picker option (#16632 by @iamkun)
+- DateTimePicker
+  - Fix time-spinner not scroll to right position (#16854 by @jesse-li)
+- Table
+  - Prevent click handler after drag (#16850 by @ziyoung)
+  - Fix chrome crash when set thead css display to none (#16956 by @luckyCao)
+  - Fix wrong empty block height (#16861 by @ziyoung)
+  - Not throw error when calling toggleExpansion (#16304 by @yyjjqq94)
+  - Not trigger sort-change event when mounted (#17113 by @a631807682)
+  - Fix setCurrentRow unable to clear highlight row (#16879 by @ziyoung)
+  - Fix expand-row-keys not work when data is loaded asynchronously (#16899 by @ziyoung)
+  - set toggleAllSelection as instance property (#17137 by @ziyoung)
+- Tree
+  - Fix distance between label and checkbox (#16799 by @Hazlank)
+- Tabs
+  - Fix incorrect TabItem's position (#16520 by @victorting)
+  - Fix activated tab is out of visual range bug (#17033 by @nullptru)
+- Calendar
+  - Fix weekdays i18n issue (#16772 by @ubitoffee)
+  - fix locale error (#17208 by @iamkun)
+- Cascader
+  - Fix CascaderPanel display error (#16716 by @zhangHongEn)
+  - Fix disable status and close button issue (#16224 by @yyjjqq94)
+- Input
+  - Fix Korean composition event (#15069 by @MoonHyuk)
+  - Fix click event of clear button not trigger when using v-loading (#16576 by @a631807682)
+- Select
+  - Not toggle dropdown when filtering (#17205 by @luckyCao)
+- Transfer
+  - Fix style error  (#17206 by @iamkun)
+- Dialog
+  - update sass var (#16365 by @haoranyu)
+- RadioGroup
+  - Not produce invalid HTML in table if "is" attribute is specify (#17070 by @nullptru)
+- Divider
+  - Support custom classes (#17078 by @island205)
+
+#### Optimization
+
+- Checkbox
+  - Improve screen reader experience (#16575 by @tylertrotter)
+- Docs
+  - Update changelog (#16773 by @SimonaliaChen)
+  - Update contributing guide (#14800 by @sinchang)
+  - Fix typo in Drawer docs (#16848 by @winkay)
+  - Update custom theme (#16983 by @iamkun)
+  - Add Esperanto translation (#16955 by @maxkoryukov)
+  - Update input-number document about change event (#16316 by @luckyCao)
+  - Update spanish doc 2.11.1 (#16961 by @Gonzalo2310)
+- I18n
+  - Remove translation of 'year' in catalan language as in the other languages (#14722 by @oscaralbareda)
+  - Update spanish changelog 2.10.0 and 2.10.1 (#16548 by @Gonzalo2310)
+  - Update ar.js (#16653 by @l3op)
+- Test
+  - Correct spelling error (#16672 by @boomler)
+  - Refactor unit test to use data-uri (#16847 by @a631807682)
+- Types
+  - Fix httprequest type (#16633 by @luckyCao)
+
+### 2.11.1
+
+*2019-07-26*
+
+#### Bug fixes
+
+- Image
+  - Fix Image component SSR compatibility (#16737 by @luckyCao)
+- Chore
+  - Update dart-sass compatibility (#16744 by @LewisChennnnn)
+
+### 2.11.0
+
+*2019-07-25*
+
+#### New features
+
+- Drawer
+  - Add drawer component (#16577 by @JeremyWuuuuu)
+
+#### Bug fixes
+
+- Checkbox
+  - Enhance css selector (#16006 by @Hazlank)
+- Tree
+  - Make el-tree generic (#15934 by @JeremyWuuuuu)
+  - Set isCurrent prop to False (#15870 by @kkkisme)
+- Dropdown
+  - Fix split-button caret default color (#15931 by @JuniorTour)
+- Cascader
+  - Fix level 1 children is empty update problem (#16399 by @luckyCao)
+  - Add sets default values when lazy is true (#16420 by @luckyCao)
+  - Fix display errors when node value is duplicate (#15935 by @junyiz)
+  - Expose getCheckedNodes and fix options change bug (#16709 by @SimonaliaChen)
+- Calendar
+  - Display correct header when range is specified (#16354 by @ziyoung)
+- Submenu
+  - Fix prop append-to-body (#16289 by @a631807682)
+- Table 
+  - Fix tree table when updating data (#16481 by @island205)
+- Select
+  - Fix memory leak issue (#16463 by @island205)
+- InfiniteScroll
+  - Update naming & doc (#16698 by @iamkun)
+- Avatar
+  - Fix image not center vertically issue (#16489 by @luckyCao)
+- Dialog
+  - Add destroyOnClose attribute (#16455 by @ziyoung)
+- Image
+  - Add big Image preview feature (#16333 by @luckyCao)
+
+#### Optimization
+
+- Docs
+  - Fix dropdown demo (#16193 by @webxmsj)
+  - Fix typo in table documents (#15971 by @howiefh)
+- I18n
+  - Update translation of Thai language (#16689 by @ponkrit)
+- Chore
+  - Update theme base api (#16607 by @iamkun)
+  - Add form theme token (#16699 by @iamkun)
+  - Mark ali inner user's access (#16609 by @iamkun)
+  - Fix doc anchor bug (#16692 by @iamkun)
+
+### 2.10.1
+
+*2019-07-02*
+
+#### Bug fixes
+
+- Table
+  - Fix sort icon (#15439 by @bezany)
+  - Fix layout breaks when append slot exists (#16332 by @ziyoung)
+  - Fix showOverflowTooltip not reactive (#16295 by @a631807682)
+  - Register scrollbar in filter-panel (#16246 by @ziyoung)
+- Chore
+  - Fix 2.9 docs (#16233 by @ziyoung)
+  - Fix index page theme intro english css style issue (#16254 by @iamkun)
+
+#### Optimization
+
+- Tag
+  - Compatible with IE (#16334 by @ziyoung)
+- Chore
+  - Update Dingtalk Group QR image (#16236 by @iamkun)
+- Doc
+  - Update online theme roller doc (#16244 by @iamkun)
+
+### 2.10.0
+
+*2019-06-25*
+
+#### New features
+
+- I18n
+  - Added Uzbek language (#15796 by @ogabek96)
+- Calendar
+  - Add first-day-of-week attribute (#16047 by @ziyoung)
+- Avatar
+  - Add avatar component (#16144 by @luckyCao)
+- Upload:
+  - Add capability to customize thumbnail template (#13192 by @victorzhuk)
+
+#### Bug fixes
+
+- Tree
+  - Not highlight tree node when currentKey is null (#15668 by @yyjjqq94)
+  - Fix issue #15538 caused by two Tree sharing the same data (#15615 by @VanMess)
+- Upload
+  - Update the parameter `fileList` type (#15716 by @underfin)
+- Table
+  - Fix loading icon not display (#15868 by @ziyoung)
+  - Fix background color of complex table when hovering (#15504 by @cnlon)
+  - Fix current-row-key and select event bug (#15983 by @ziyoung)
+  - Height accepts more units (#16013 by @ziyoung)
+  - Fix reserve-selection not work (#16135 by @ziyoung)
+- Docs
+  - Fix Divider attribute type in zh-cn (#15889 by @haoranyu)
+- Menu
+  - Fixed submenu hidden bug after adding popper-append-to-body (#15391 by @PanJiaChen)
+- Select
+  - Fix initialInputHeight (#15989 by @yyjjqq94)
+  - Fix default-first-option behavior when typing Chinese (#15431 by @VanMess)
+  - fix double import problem (#16215 by @lengband)
+- Message
+  - Add type def for offset option (#16027 by @matjaz)
+- Timeline
+  - Fix reverse broken (#16091 by @ziyoung)
+- Slider
+  - Fix #15545 by adding explains about "input" event in Chinese (#15588 by @VanMess)
+- InfiniteScroll
+  - Update package name (#16125 by @iamkun)
+- MessageBox
+  - Fix  distinguishCancelAndClose action not same as docs bug (#15438 by @qingdengyue)
+- PopupManager
+  - Fix z-index cannot be rewritten at first using (#15738 by @luckyCao)
+- Docs
+  - Delete an incorrect closing html tag and empty block code (#16194 by @Alexeykhr)
+- Chore
+  - Update test api host (#15807 by @iamkun)
+
+#### Optimization
+
+- Tree
+  - Modify loop conditions to improve performance (#15699 by @KingJeason)
+- Theme
+  - Refine GA track & Update footer link forward to online theme roller (#16007 by @island205)
+- Badge
+  - Update badge prop check (#16198 by @iamkun)
+- Avatar
+  - Update theme config var (#16202 by @luckyCao)
+- I18n
+  - Update pt-br.js (#15776 by @gigioSouza)
+  - Update Farsi translation (#15881 by @pamenary)
+- Docs
+  - Add missing components in quickstart (#16063 by @pape2016)
+  - Update french translation (#16208 by @blombard)
+  - Add description $slots.default (#15444 by @Alexeykhr)
+  - Update Spanish Doc 2.9.1 (#15840 by @Gonzalo2310)
+  - Fix spelling mistakes in fr (#15837 by @blombard)
+  - Update changelog 2.9.2 Spanish (#16185 by @Gonzalo2310)
+
+#### Breaking changes
+
+- Form
+  - Remove success status (#16159 by @ziyoung)
+
+### 2.9.2
+
+*2019-06-21*
+
+#### Bug fixes
+
+- Chore
+  - Fix TS definitions file (#15805 by @NateScarlet)
+
+### 2.9.1
+
+*2019-05-30*
+
+#### New features
+
+- Table
+  - default-expand-all, expand-row-keys, toggle-row-expansion method and expand-change event are supported in Tree Table (#15709 by @ziyoung)
+
+#### Bug fixes
+
+- Table
+  - Fix some bugs (#15709 by @ziyoung)
+- Theme
+  - Update api host (#15784 by @iamkun)
+
+#### Optimization
+
+- Chore
+  - Update InfiniteScroll type (#15794 by @iamkun)
+
+### 2.9.0
+
+*2019-05-30*
+
+#### New features
+
+- Backtop
+  - Add Backtop component (#15541 by @iamkun)
+- PageHeader
+  - Add PageHeader component (#15714 by @ziyoung)
+- InfiniteScroll
+  - Add InfiniteScroll directive (#15567 by @iamkun)
+- Cascader
+  - Add multiple mode and filter-method (#15611 by @SimonaliaChen)
+- Message
+  - Display in stack mode (#15639 by @island205)
+- Tag
+  - Add prop effect (#15725 by @SimonaliaChen)
+- Tabs
+  - Left align title when type is card (#15695 by @luckyCao)
+- DatePicker
+  - Support literal strings (#15525 by island205)
+- Image
+  - Add support for transmit attrs and listeners (#15578 by @VanMess)
+- Theme
+  - Add popup background (#15412 by @iamkun)
+- Chore
+  - Update new 2.9.0 index page (#15682 by @iamkun)
+
+#### Bug fixes
+
+- Table
+  - Fix sort-change behaviour when sort condition is null (#15012 by @joelxr)
+- Image
+  - Fix ssr and object-fit compatibility (#15346 by @SimonaliaChen)
+- Input
+  - Fix show-word-count style in el-form (#15359 by @lvjiaxuan)
+  - Fix clear icon is not centered (#15354 by @YiiGuxing)
+- Calendar
+  - Fix not correct day of week when the day is Sunday (#15399 by @qingdengyue)
+  - Fix October disappear bug (#15394 by @qingdengyue)
+- Tabs
+  - Fix basic tab nested in card tab padding error (#15461 by @SimonaliaChen)
+- Tag
+  - Fix stop propagation problem (#15150 by @infjer)
+- Form
+  - Fix input-group within form-item height error (#15457 by @SimonaliaChen)
+  - Fix resetFields issue (15181 by @luckyCao)
+- Tooltip
+  - Fix custom tabindex not work (#15619 by @SimonaliaChen )
+- Link
+  - Fix link icon style class (#15752 by @iamkun)
+- Select
+  - Revert set value to null when cleared (#15447 by @iamkun)
+- Loading
+  - Fix dom not change when loading state change quickly (#15123 by @FAKER-A)
+- Switch
+  - Label with el-switch repeating event (#15178 by @FAKER-A)
+- Slider
+  - Fix style problem when clicking slider bar(#15561 by @luckyCao)
+- Radio
+  - Fix issue 14808 (#14809 by @OverTree)
+- Form
+  - Fix resetFields issue (15181 by @luckyCao)
+- Chore
+  - Upgrade dependencies and fix demo bug (#15324 by ziyoung)
+- Type
+  - Fix loading type definition (#15635 by @iamkun)
+  - Fix Icon type (#15634 by @iamkun)
+  - Fix Link type definition (#15402 by @iamkun)
+
+#### Optimization
+
+- Cascader
+  - Refactor (#15611 by @SimonaliaChen)
+- Chore
+  - Update make new component logic (by @iamkun)
+- Docs
+  - Rename variable in docs (#15185 by @liupl)
+  - Fix image attribute type and default value (#15423 by @haoranyu)
+  - Fix form doc bug (#15228 by @SHERlocked93)
+
+### 2.8.2
+
+*2019-04-25*
+
+#### Bug fixes
+
+- Icon
+  - Update icon (#15272 by @iamkun)
+- Docs
+  - Fix Form and Input doc style (#15273 by @ziyoung)
+
+### 2.8.1
+
+*2019-04-25*
+
+#### Bug fixes
+
+- Icon
+  - Update icon of cascader and select (#15264 by @SimonaliaChen)
+  - Update icon (#15258 #15268 by @iamkun)
+
+#### Optimization
+
+- Chore
+  - Update build script (#15267 by @ziyoung)
+- Docs
+  - Fix link underline color (#15265 by @iamkun)
+- Other
+  - Fix migrating config not compatible with camel case props and events (#15260 by @SimonaliaChen)
+
+### 2.8.0
+
+*2019-04-25*
+
+#### New features
+
+- Divider
+  - Add divider component (#15055 by @island205)
+- Rate
+  - Add custom colors and icon-classes by passing a object (#15051 by @SimonaliaChen)
+- Link
+  - Add link component (#15052 by @iamkun)
+- Calendar
+  - Add calendar component (#14908 by @ziyoung)
+- Icon
+  - Add icon (#15214 by @iamkun)
+- Alert
+  - Add dark theme (#15041 by @island205)
+- Image
+  - Add image component (#15117 by @SimonaliaChen)
+- Collapse
+  - CollapseItem can be disabled (#15076 by @ziyoung)
+- Carousel
+  - Add direction attribute and support vertical direction (#15122 by @ziyoung)
+- Pagination
+  - Add hide-on-single-page attribute (#15096 by @ziyoung)
+- Slider
+  - Add marks attribute (#15133 by @luckyCao)
+- Input
+  - Add show-word-count attribute (#15075 by @luckyCao)
+- InputNumber
+  - Add step-strictly attribute (#15050 by @luckyCao)
+- Tooltip, Dropdown, Popover
+  - Support tabindex attribute (#15167 by @ziyoung)
+
+#### Bug fixes
+
+- Notification
+  - Fix title word break (#15008 by @iamkun)
+- Form
+  - Fix switching the rules in el-form not work (#14985 by @luckyCao)
+  - Fix label style (#14969 by @ziyoung)
+  - Required FormItem displays asterisk when label is auto (#15144 by @ziyoung)
+- Pagination
+  - Fix slot not updated (#14711 by @lucyhao)
+- Table
+  - Fix load bug in lazy mode (#15101 by @ziyoung)
+  - Fix cell width when colspan is grater than 1 (#15196 by @ziyoung)
+  - Improve performance (#14868 by @ziyoung)
+  - Don't emit triggers sort-change during initialization (#14625 by @PeanutWatson)
+  - Equal behaviour for height and max-height (#14660 by @arthurdenner)
+- Dialog
+  - Fix dialog body correctly break long words (#15027 by @iamkun)
+- Alert
+  - update type definition (#15186 by @ziyoung)
+- Tabs
+  - Fix issue where Promise rejection was hitting application (#14816 by @ffxsam)
+  - Rerender when slot changes (#15238 by @ziyoung)
+- Message
+  - Fix type definition (#14968 by @agoni1212)
+- Select
+  - Fix error when value is undefined or null (#15022 by @luckyCao)
+- Tree
+  - Delete current node after it removed (#14604 by @sinchang)
+  - Improve performance (#14881 by @ChenZhuoSteve)
+- Dropdown
+  - Fix style (#14907 by @doing123)
+- Slider
+  - Fix broken keyboard a11y bug (#14792 by @erezsob)
+- Menu
+  - ActiveIndex value shall be null if defaultIndex does not exist(#14074 by @hoythan)
+- Directive
+  - RepeatClick: use Date.now() instead of new Date() (#14776 by @pavelmash)
+- Upload
+  - Fix Upload transparent picture display style (#15039 by @iamkun)
+- Theme
+  - Add zero border (#15256 by @iamkun)
+
+#### Optimization
+
+- Chore
+  - Update changelog zh-cn (#14965 by @iamkun)
+  - Hide demo description when it's empty (#15014 by @ziyoung)
+  - Display dev server info by default by @iamkun)
+  - Fix 2.6.0 changelog error (#15026 by @iamkun)
+  - Update build config (#14821 by @abc3660170)
+  - Add hmr (#15221 by @SimonaliaChen)
+  - Use sourcemap in dev environment (#15087 by @ibufu)
+Docs
+  - Rename variable in docs (#14602 #15003 #15094 #15105 by @liupl)
+  - Fix upload doc error (#15023 by @iamkun)
+  - Update Form custom validator doc (#15040 by @iamkun)
+  - Update Tabs docs to display vertical tabs (#15053 by @iamkun)
+  - Use eleme.cn as domain (#15139 by @ziyoung)
+  - Fix Image route name (#15194 by @iamkun)
+  - Remove duplicated fr translation (#15207 by @iamkun)
+
+#### Breaking changes
+
+- Rate
+  - Fix decimal display support in disabled mode (#15089 by @haoranyu)
+- Select
+  - Use placeholder option label to set placeholder in filter mode (#14989 by @ibufu)
+
+### 2.7.2
+
+*2019-04-03*
+
+#### Bug fixes
+
+- Form
+  - Fix auto `label-width` style (#14955 by @ziyoung)
+
+#### Optimization
+- Docs
+  - Fix doc img link error (#14957 by @iamkun)
+- Chore
+  - Fix deploy mkdir error (#14952 by @iamkun)
+
+### 2.7.1
+
+*2019-04-03*
+
+#### Bug fixes
+
+- Select
+  - Set value to null when cleared (#14322 by @aaronfulkerson)
+- Input
+  - Update DOM dependent values on type change (#14889 by @wacky6)
+- Table
+  - Make `defaultExpandAll` works when expanded column exists (#14935 by @ziyoung)
+- Dialog
+  - Background color can be configured (#14939 by @ziyoung)
+- Form
+  - `label-width` supports auto width (#14944 by @ziyoung)
+
+#### Optimization
+- Docs
+  - Update Spanish docs (#14913 by @Gonzalo2310)
+  - Add French doc for new component (#14924 by @ziyoung)
+  - Optimize Tabs docs (#14938 by @ziyoung)
+
+### 2.7.0
+
+*2019-03-28*
+
+#### New features
+
+- Table
+  - Add support tree structure data (#14632 by @ziyoung)
+
+#### Bug fixes
+
+- Tabs
+  - Use primary color as boxShadow color (#14558 by @Richard-Choooou)
+  - Rerender when label changes (#14496 by @akki-jat)
+- Table
+  - Footer follows body cell align (#14730 by @ziyoung)
+- NavMenu
+  - Fix click el-submenu trigger childMenu pop again bug (#14443 by @PanJiaChen)
+- Dropdown
+  - Make compatible with 2.6 new v-slot syntax (#14832 by @ziyoung)
+- ColorPicker
+  - Fix handle error hex color string (#14793 by @iamkun)
+- Tree
+  - Revert pr #13349 (#14847 by @ziyoung)
+- Tooltip
+  - Display when initial value is true (#14826 by @ziyoung)
+- Docs
+  - Update cascader docs (#14442 by @panhezeng)
+- Style
+  - Fix media query in sm-only, md-only, lg-only (#14611 by @sinchang)
+
+#### Optimization
+
+- Chore
+  - Add webpage description (#14802 by @iamkun)
+
+### 2.6.3
+
+*2019-03-21*
+
+#### Bug fixes
+
+- Fix Cascader demo style (#14789 by @ziyoung)
+- Remove unnecessary DOM operation (#14788 by @ziyoung)
+- Fix DatePicker default-value DST (#14562 by @wacky6)
+
+### 2.6.2
+
+*2019-03-21*
+
+#### New features
+
+- DatePicker
+  - Add monthrange for type attribute (#14487 by @zxyRealm)
+- i18n
+  - Add Croatian locale (#14360 by @danijelh)
+
+#### Bug fixes
+
+- Input
+  - Fix regression (#14572 by @wacky6)
+- DatePicker
+  - Fix first-day-of-week computation (#14523 by @sinchang)
+  - Fix week picker's value-format (#13754 by @wacky6)
+- Steps
+  - Fix issue #14502 (#14596 by @sinchang)
+  - Fix style with simple theme (#14610 by @sinchang)
+- Docs
+  - Update french doc for 2.6.1 and fix typos (#14555 by @smalesys)
+  - Rename variable in Table docs (#14587 by @likwotsing)
+  - Add french search index (#14565 by @iamkun)
+  - Fix TimePicker page style (#14579 by @ziyoung)
+  - Rename variable in Upload docs (#14593 by @liupl)
+  - French translation update (#14643 by @smalesys)
+  - Update Form async validator docs (#14694 by @iamkun)
+  - Fix tooltip doc error (#14748 by @iamkun)
+  - Fix typo (#14751 by @2bj)
+  - Fix highlighting control elements for Webkit touch (#14703 by @VladG0r)
+
+#### Optimization
+
+- Chore
+  - Update ci build script (#14600 by @ziyoung)
+  - Update ga tracking (#14560 by @iamkun)
+  - Add more ga event (#14633 by @iamkun)
+  - Update discusion group (#14741 by @iamkun)
+  - Update test deps and conf (#14735 by @wacky6)
+  - Upgrade gulp (#14745 by @ziyoung)
+  - Use codepen to display demo & fix doc error (#14747 by @ziyoung)
+
+### 2.6.1
+
+*2019-03-03*
+
+#### Bug fixes
+
+- **Don't specify node version** (by @iamkun in #14546)
+- Fix doc directory in `deloy-faas.sh` (by @ziyoung in #14553)
+- Fix date style issue in changelog for 2.6.0 (by @island205 in #14547)
+- Fix doc typo (by @wack6 in #14552)
+
+### 2.6.0
+
+*2019-03-01*
+
+#### New features
+- Timeline
+  - Add timeline component (by @jikkai in #14248)
+- DropdownItem
+  - Add icon prop to `el-dropdown-item` (by @gabrielboliveira in #14088)
+- Input
+  - Add show-password props (by @phshy0607 in #13966)
+- Select
+  - Add slot `empty` (by @elfman in #13785)
+- Autocomplete
+  - Add highlight-first-item prop (by @YamenSharaf in #14269)
+- I18n
+  - Created Armenian locale (by @hamletbarsamyan in #14214)
+- Docs
+  - French translation (by @smalesys in #12153, #14418, #14434)
+
+#### Optimization
+- Alert
+  - Update alert description default slot class (by @iamkun in #14488)
+- Input
+  - Update input password (by @iamkun in #14480)
+- InputNumber
+  - Remove unnecessary parseFloat (by @JuniorTour in #14172)
+- Menu
+  - Add support for `el-menu-item` without index (by @georgyfarniev in #13298)
+- Table
+  - Remove some html DOM operations (by @elfman in #13643)
+- Upload
+  - Optimize code (by @elfman in #13973)
+- Popup
+  - Optimize code (by @KAionro in #14413)
+- Docs
+  - Add more detail about how to run play mode for contribution (by @island205 in #14355)
+  - Warn input as a controlled component (by @wacky6 in #14463)
+  - Update Table doc (by @luguokong in #14329)
+  - Update input doc (by @iamkun in #14437)
+  - Update custom-theme docs (by @wangguohao in #14297)
+  - Make the icon style change when hover on it (by @tuxinghuan in #14295)
+- Build
+  - Minimizing css and js for Element doc site (by @iamkun in #14430)
+  - Speeding up webpack (by @hetech in #14484)
+  - Use cli to select release version (by @hetech in #14354)
+- Install stale for issue handling (by @island205 in #14392)
+
+#### Bug fixes
+- Menu
+  - Fix subMenu focus bug when switch browser tab (by @liupl in #13976)
+- MessageBox
+  - Fix type definition (by @NateScarlet in #14278)
+- ScrollBar
+  - Prevent right button click on thumb (by @xifeiwu in #14196)
+- Switch
+  - Trigger form validation if value changes (by @hetech in #14426)
+- Table
+  - Make toggleAllSelection method an instance method (by @letanure in #14075)
+- Tabs & Dropdown
+  - Fix style (by @hetech in #14452)
+- Tree
+  - Empty-text tips are different from tables (by @ColinCll in #14331)
+- Docs
+  - Fix DatetimePicker format doc error (by @iamkun in #14290)
+  - Spelling issue in datepicker documentation (by @helmut in #14481)
+  - Fix pagination doc style (by @liuchuzhang in #14451)
+
+#### Breaking changes
+- Table
+  - Fix params order of row events (by @jikkai in #12086)
+
+### 2.5.4
+
+*2019-02-01*
+
+#### Bug fixes
+
+- Build: Fix babel config issue which lead to collapse transition broken (by @island205 in #14282)
+
+### 2.5.3
+
+*2019-01-31*
+
+#### Optimization
+
+- Optimize code of Message (by @vok123 in #14029)
+- Retire gh-pages (by @ziyoung in #14266)
+- Add IssueHunt link (by @island205 in #14261)
+
+#### Bug fixes
+
+- Fix UMD module error on server side (by @island205 in #14242)
+- Fix active TabBar style (by @iamkun in #14240)
+- Fix Table demo code error (by @xunmeng in #14253)
+
+### 2.5.2
+
+*2019-01-27*
+
+#### Optimization
+- Docs:
+  - Update ChangeLog ES 2.5.1 (by @Gonzalo2310 in #14231)
+
+#### Bug fixes
+- Build:
+  - Delete unremoved comments in umd module `lib/index.js` (by @island205 in #14233)
+  - Fix export error fired in commonjs module used in nuxt.js (by @island205 in #14232)
+  - Fix 2.5.1 build issues (by @iamkun in #14228)
+
+### 2.5.1
+
+*2019-01-26*
+
+#### Optimization
+- DatePicker: highlight current month and year (by @Debiancc in #14211)
+- Update 2.5.0 changelog (by @wacky6 in #14217)
+
+#### Bug fixes
+- Fix export issue generate by webpack upgrading (by @island205 in #14220)
+- Keep 2.4.11 docs && new sub folder for 2.5+ (by @iamkun in #14222)
+
+### 2.5.0
+
+*2019-01-25*
+
+#### New features
+- DatePicker
+  - Add `validate-event` attribute (by @ziyoung in #13531)
+- DateTimePicker
+  - `pickerOptions` support `selectableRange` option (by @eeeeeeeason)
+- Tag
+  - Add `click` event (by @licdream in #14106)
+- I18n
+  - support Kyrgyz language (by @zzjframework in #14174)
+
+#### Optimization
+- Upgrade to webpack@4 (by @jikkai in #14173)
+- Input
+  - Simplify implementation, follow one-way data flow. Fix several related bugs (by @wacky6 in #13471)
+- Update Axure file，add new components (by @ziyoung in #13773)
+
+#### Bug fixes
+- Autocomplete
+  - Fix dropdown's last line beging clipped (by @ziyoung in #13597)
+  - Fix missing popper arrow (by @liuchuzhang in #13762)
+- Carousel
+  - Cleanup timer when component is destroyed (by @elfman in #13820)
+- Cascader
+  - Remove deprecated property of computed props (by @iamkun in #13737)
+  - Fix CascaderOption's type definition in TypeScript (by @NateScarlet in #13613)
+  - Fix icon covering the text (by @ziyoung in #13596)
+- Checkbox
+  - Refine style (by @PanJiaChen)
+- DatePicker
+  - Add missing v-for `key` in TimeSpinner (by @Ende93 in #13547)
+  - Fix week highlight on year boundary (by @suyi91 in #13883)
+- Input
+  - Fix textarea DOM node reference (by @laomu1988 @island205 in #13803)
+- Pagination
+  - Input value won't be less than 1 (by @elfman in #13727)
+- Popover
+  - Fix popover issues with hover trigger (by @goldengecko in #13104)
+  - Fix popper instance memory leak (by @qpxtWhite in #13988)
+- Radio
+  - Refine style (by @ohhoney1)
+- Table
+  - Enhanced table sorting when clicking on the sorting arrow (by @ohhoney1 in #12890)
+  - Fix empty text vertical alignment issue on IE10+ (by @imzjy in #13638)
+  - Fix index type documentation (by @ilovefafa in #13628)
+  - Fix `show-summary` display issue when multilevel header has fixed attr (by @luckyCao in #13914)
+- Tabs
+  - Fix auto scroll bug (by @iamkun in #13696)
+  - Get the correct tab through tab name (by @iamkun in #13705)
+  - Use paneName instead of name to determine pane style (by @iamkun in #13733)
+- Tree
+  - Fix `showCheckbox` prop on `Tree` can not affect their children `tree-node` (by @KidneyFlower)
+  - Update doc and definition file (by @ziyoung in #13540)
+- Upload
+  - Add `url` prop to upload file when `list-type` changed (by @elfman in #13771)
+- Slider
+  - Fix source code indentation (by @wacky6 in #13955)
+- I18n
+  - Add missing Catalan translations (by @jaumesala)
+  - Add missing ru translation (by @justlp in #13658)
+  - Fix Finnish translations (by @jenkrisu in #14137)
+- Doc
+  - Update Spanish doc 2.4.11 (by @Gonzalo2310 in #13522)
+- Others
+  - Remove unnecessary script (by @ziyoung)
+  - Fix error anchor link (by @iamkun in #13753)
+  - Fix inconsistent capitalization in documentation (by @wonderjar)
+  - Add DingDing chat group qr code to readme (by @iamkun in #13957)
+  - Add yarn logs to .gitignore (by @mimimi in #13922)
+  - Remove sponsor duotai (by @island205 in #14156)
+  - Update readme qr code src (by @iamkun in #13960)
+  - Update CDN link, fix typo (by @ziyoung)
+
 ### 2.4.11
 
 *2018-11-21*
@@ -35,7 +933,7 @@
 
 *2018-10-26*
 
-- The parameter of Form's  `clearValidate`  supports string, #12990 (by @codinglobster)
+- The parameter of Form's `clearValidate` supports string, #12990 (by @codinglobster)
 - Added type attribute for Badge, #12991
 - Users can use scoped-slot to customize table column header #13012 (by @ivanseidel)
 - Fixed the input box of Select unable to type text under IE, #13034 (by @GaliMU)
@@ -66,17 +964,17 @@
 
 *2018-09-14*
 
-- Fixed DatePicker not triggering form validation, #12328 #12348 
-- Fixed DatePicker throwing errors in multiple mode, #12347 
+- Fixed DatePicker not triggering form validation, #12328 #12348
+- Fixed DatePicker throwing errors in multiple mode, #12347
 - Fixed incorrect position of DatePicker spinner, #12415 (by @rang-ali)
 - Fixed automatic filling of DatePicker input box, #12521 (by @abdallanayer)
 - Fixed Input not highlighted in Cascader, #12341
-- Fixed wrong order of Tabpane, #12346 
+- Fixed wrong order of Tabpane, #12346
 - Fixed incorrect position of ColorPicker cursor, #12376 (by @cnwhy)
 - Fixed the style of Submenu, #2457
 - Fixed not highlighted after Submenu is selected, #12479
 - Fixed incorrect values selected by Cascader, #12508 (by @huangjinqiang)
-- Fixed incorrect value of Pagination input box, #12525 
+- Fixed incorrect value of Pagination input box, #12525
 - Fixed order that Pagination triggers events, #12530
 - Fixed Table Filter not displayed, #12539
 - Fixed Tree unable to delete nodes, #12684
@@ -111,7 +1009,7 @@
 
 - Fixed Table setting `class-name` does not work for `expand` column, #12006
 - Added `toggleAllSelection` method for Table, #12047
-- Fixed wrong position of suffix slot when Input contains Select, #12108 
+- Fixed wrong position of suffix slot when Input contains Select, #12108
 - Fixed `line-height` of Option unable to set, #12120
 - Fixed TimeSelect with default value of `null` could not be assigned after executing `resetField`, #12010
 - Fixed keydown event which is not arrow key does not work in Tree, #12008
@@ -188,7 +1086,7 @@
   - Added `precision` attribute, #11281
 - Tabs
   - Added `before-leave` attribute, #11259
-  - Added `lazy` attribute, #11167（by @Kingwl）
+  - Added `lazy` attribute, #11167(by @Kingwl)
 - Table
   - Added `sort` method to manually sort the table, #11311
 
@@ -237,7 +1135,7 @@
 - Fixed closing the DatePicker panel without changing the value incorrectly triggering the `change` event, #11017
 - Fixed keyboard navigation not working properly when Select has grouped options, #11058
 - Added `prefix` named slot for Select, #11063
-- Added 'clearValidate` method for FormItem, #11076
+- Added `clearValidate` method for FormItem, #11076
 - Added `checkOnClickNode` attribute for Tree, #11111
 
 ### 2.3.7
@@ -343,7 +1241,7 @@
 - Pagination
   - Fixed `current-change` event wrongly triggering without user interaction, #10247
 - DatePicker
-  - Now the date and time value in the dropdown panel are correctly formatted based on the `format` attribute, #10174（by @remizovvv）
+  - Now the date and time value in the dropdown panel are correctly formatted based on the `format` attribute, #10174(by @remizovvv)
 - Upload
   - Fixed `accept` attribute not working when `drag` is true, #10278
 
@@ -436,7 +1334,7 @@
 - Dropdown
   - Fixed dropdown menu incorrect positioning when the page only has a horizontal scrollbar in some browsers, #9138 (by @banzhuanmei)
 - Table
-  - Fixed an error in calculating number of fixed columns after the column data changes, #9188（by @kolesoffac）
+  - Fixed an error in calculating number of fixed columns after the column data changes, #9188(by @kolesoffac)
   - Fixed the border of the last column of the grouped header not properly displayed, #9326
   - Fixed incorrect positioning of table header in Safari, #9327
   - Fixed expanded row collapsing when the table data changes, #9462
diff --git a/CHANGELOG.es.md b/CHANGELOG.es.md
index 84fd0b60cb4..db7fcd6e691 100644
--- a/CHANGELOG.es.md
+++ b/CHANGELOG.es.md
@@ -1,11 +1,909 @@
 ## Changelog
 
+### 2.13.0
+
+*2019-11-26*
+
+#### New features
+
+- Popconfirm
+  - Add popconfirm component (#17548 by @iamkun)
+
+#### Bug fixes
+
+- BackTop
+  - Use cubic bezier scrolling (by @lon)
+- DatePicker
+  - Fix bug of only select min date of date range problem (#17191 by @smk0621)
+- Select
+  - Fix select test cases by (@msidolphin)
+- Tree
+  - Add font-size for the style of tree empty-text (#17094 by @spengjie)
+- Table
+  - Column header can be costumed (#17291 by @ziyoung)
+  - Update table header cell style (#17284 by @ziyoung)
+  - Fix table header height after filter (#17348 by @ziyoung)
+  - Fixed row-style with display not work (#17002 by @a631807682)
+  - Fix header table not display (#17341 by @ziyoung)
+- Calendar
+  - Import el-button and el-button-group (#17376 by @masongzhi)
+- MessageBox
+  - Fix icon position error (#17410 by @nullptru)
+- TimePicker
+  - Set the selection range after scrolling up or down (#16868 by @mattheyan)
+- Message
+  - Fix close instace offsetHeight（#17564） (#17852 by @gzwgq222)
+- Form
+  - Callback of validateField should be optional (#17314 by @CarterLi)
+- Cascader
+  - Fix TypeScript 3.7 compatibility (#17881 by @CarterLi)
+- Menu
+  - Fix router NavigationDuplicated error when using vue-router@^3.1.0 (#17269 by @iamkun)
+- Dropdown
+  - Update type file (#17550 by @iamkun)
+- Progress
+  - Add strokeLinecap prop (#17552 by @iamkun)
+- InfiniteScroll
+  - Skip trigger event on invisible element (#17553 by @iamkun)
+- Image
+  - Perfect picture preview behavior (#16985 by @luckyCao)
+  - Fix shield the page when preview big image (#16796 by @luckyCao)
+- Drawer 
+  - Bugfix drawer-append-to-body-not-working (#16953 by @JeremyWuuuuu)
+- Select
+  - Fix tag show value or empty issue (17199 by @luckyCao)
+- Scrollbar
+  - Fix FireFox scroll bar width (#18091 by @iamkun)
+  
+#### Optimization
+
+- I18n
+  - Update sv-SE.js (#17926 by @FOLLGAD)
+  - Update avatar component fr doc (#17762 by @blombard)
+- Docs
+  - Fix time-select typo (#17250 by @wacky6)
+  - Fix Drawer attribute accepted value typo in es (#17122 by @haoranyu)
+  - Update Spanish changelog 2.12.0 (#17364 by @Gonzalo2310)
+  - Fix Changelog typo (#17874 by @renlixin)
+  - Fix Loading demo (#17862 by @MBearo)
+  - Add input event in input Events Table (#18061 by @zhouxinyong)
+  - Delete Input repeat change event (#18085 by @zhouxinyong)
+
+### 2.12.0
+
+*2019-08-29*
+
+#### Nuevas características
+
+- Popover
+  - Agregada la prop close-delay  (#16671 by @LachlanStuart)
+- Theme
+  - Añadida la extensión Chrome: Element Theme Extensión (#16686 by @iamkun)
+- Icon
+  - Añadido font-display a la declaración @font-face (#16805 by @iamfaizalandyka)
+
+#### Corrección de errores
+
+- Carousel
+  - Corregido el valor emitido por onChange (#16705 by @iamkun)
+- Notification
+  - Corrección de la modificación del objeto de opción entrante (#16704 by @iamkun)
+- DatePicker
+  - Agregado el className para la opción picker (#16632 by @iamkun)
+- DateTimePicker
+  - Corrección del  time-spinner que no se desplazaba a la posición correcta (#16854 by @jesse-li)
+- Table
+  - Evitar la propagación del click después del arrastre (#16850 by @ziyoung)
+  - Corregido una error en chrome que se producía cuando el css de thead tenia display: none  (#16956 by @luckyCao)
+  - Corregida la altura incorrecta de los bloques vacíos  (#16861 by @ziyoung)
+  - No hay lanzamiento de error cuando se llama a toggleExpansion (#16304 by @yyjjqq94)
+  - No se lanza el evento sort-change cuando esta montado (#17113 by @a631807682)
+  - Corregido que el setCurrentRow no borraba la linea resaltada (#16879 by @ziyoung)
+  - Corregido que expand-row-keys no funcionaba cuando los datos eran cargados asincrónicamente (#16899 by @ziyoung)
+  - Establecido toggleAllSelection como propiedad instanciada (#17137 by @ziyoung)
+- Tree
+  - Corregida la distancia entre label y checkbox (#16799 by @Hazlank)
+- Tabs
+  - Corregida la posición incorrecta de los item's del Tab (#16520 by @victorting)
+  - Corregido el error de que la pestaña activada estaba fuera del rango visual (#17033 by @nullptru)
+- Calendar
+  - Arreglado el problema de los días de la semana con i18n (#16772 by @ubitoffee)
+  - Corregido el error de localización (#17208 by @iamkun)
+- Cascader
+  - Corregido un error de visualización del CascaderPanel  (#16716 by @zhangHongEn)
+  - Corregido el problema de disable status y close button (#16224 by @yyjjqq94)
+- Input
+  - Arreglado el evento de composición coreana (#15069 by @MoonHyuk)
+  - Arreglado el evento click del botón clear que no se lanzaba cuando se usaba v-loading (#16576 by @a631807682)
+- Select
+  - No cambiaba el dropdown cuando se filtraba (#17205 by @luckyCao)
+- Transfer
+  - Arreglado un error de estilo (#17206 by @iamkun)
+- Dialog
+  - Actualizada las variables Sass  (#16365 by @haoranyu)
+- RadioGroup
+  - No produce HTML invalido en la tabla si el atributo 'is' es especificado (#17070 by @nullptru)
+- Divider
+  - Soporta clases personalizadas (#17078 by @island205)
+
+#### Optimización
+
+- Checkbox
+  - Mejorada la experiencia del lector de pantalla (#16575 by @tylertrotter)
+- Docs
+  - Actualizado changelog (#16773 by @SimonaliaChen)
+  - Actualizada la guía de contribución (#14800 by @sinchang)
+  - Arreglado typo en la documentación de Drawer (#16848 by @winkay)
+  - Actualizado el tema personalizado (#16983 by @iamkun)
+  - Agregada traducción en Esperanto (#16955 by @maxkoryukov)
+  - Actualizada la documentación de input-number sobre el evento change (#16316 by @luckyCao)
+  - Actualizada la documentación en Español 2.11.1 (#16961 by @Gonzalo2310)
+- I18n
+  - Eliminada la traducción de 'year' en idioma Catalán como en otros idiomas (#14722 by @oscaralbareda)
+  - Actualizado el changelog de las versiones 2.10.0 y 2.10.1 en Español (#16548 by @Gonzalo2310)
+  - Actualizado ar.js (#16653 by @l3op)
+- Test
+  - Corregir error ortográfico (#16672 by @boomler)
+  - Refractorizacion del unit test para usar data-uri (#16847 by @a631807682)
+- Types
+  - Corrección del tipo httprequest (#16633 by @luckyCao)
+
+### 2.11.1
+
+*2019-07-26*
+
+#### Corrección de errores
+
+- Image
+  - Corregido el componente Image para compatibilidad SSR (#16737 by @luckyCao)
+- Tarea
+  - Actualizado para compatibilidad con dart-sass by @LewisChennnnn)
+
+### 2.11.0
+
+*2019-07-25*
+
+#### Nuevas características
+
+- Drawer
+  - Agregado componente drawer (#16577 by @JeremyWuuuuu)
+
+#### Corrección de errores
+
+- Checkbox
+  - Mejora del selector css (#16006 by @Hazlank)
+- Tree
+  - Establecido el el-tree como genérico (#15934 by @JeremyWuuuuu)
+  - Establecido la prop  isCurrent como False (#15870 by @kkkisme)
+- Dropdown
+  - Corregido el color predeterminado de los split-button (#15931 by @JuniorTour)
+- Cascader
+  - Corregido un problema de actualización cuando el nivel 1 de children estaba vació (#16399 by @luckyCao)
+  - Ahora se muestra correctamente header cuando range esta especificado (#16354 by @ziyoung)
+  - Agregados valores por defecto cuando lazy es true (#16420 by @luckyCao)
+  - Solucionado problemas de visualización (#15935 by @junyiz)
+  - Expuestos los getCheckedNodes y corrección de errores en el cambio de opciones (#16709 by @SimonaliaChen)
+- Submenu
+  - Corregida la prop append-to-body (#16289 by @a631807682)
+- Table 
+  - Arreglado un fallo en la actualizacion de los datos de tree table (#16481 by @island205)
+- Select
+  - Arreglado un problema de fuga de memoria (#16463 by @island205)
+- InfiniteScroll
+  - Actualizada la nomenclatura y la documentacion (#16698 by @iamkun)
+- Avatar
+  - Arreglado que la imagen no se centraba verticalmente (#16489 by @luckyCao)
+- Dialog
+  - Agregado el atributo destroyOnClosee (#16455 by @ziyoung)
+- Image
+  - Agregada la función de vista previa grande de imágenes (#16333 by @luckyCao)
+
+#### Optimización
+
+- Documentación
+  - Arreglada la demo de dropdown (#16193 by @webxmsj)
+  - Corrección de errores tipográficos en las tablas de documentos (#15971 by @howiefh)
+- I18n
+  - Actualizada la traduccion del lenguage Thai (#16689 by @ponkrit)
+- Tareas
+  - Actualizada la api base del tema (#16607 by @iamkun)
+  - Añadido token del formulario del tema (#16699 by @iamkun)
+  - Marcar todos los accesos internos del usuario (#16609 by @iamkun)
+  - Corrección del error de anclaje del documento (#16692 by @iamkun)
+
+### 2.10.1
+
+*2019-07-02*
+
+#### Corrección de errores
+
+
+- Table
+  - Corregido el icono de ordenación  (#15439 by @bezany)
+  - Corregidas las rupturas del layout cuando existía un slot (#16332 by @ziyoung)
+  - Corregido showOverflowTooltip no era reactivo (#16295 by @a631807682)
+  - Registrada la scrollbar en el panel de filtro (#16246 by @ziyoung)
+- Tareas
+  - Arreglada la documentación 2.9 (#16233 by @ziyoung)
+  - Corregido el índice de la página de introducción del tema en inglés que tenia un error en los estilos css  (#16254 by @iamkun)
+
+#### Optimización
+
+- Tag
+  - Compatible con IE (#16334 by @ziyoung)
+- Tarea
+  - Actualizada la imagen QR de Dingtalk Group (#16236 by @iamkun)
+- Doc
+  - Actualizada la documentación online del theme roller (#16244 by @iamkun)
+
+### 2.10.0
+
+*2019-06-25*
+
+#### Nuevas características
+
+- I18n
+  - Añadido idioma Uzbeko (#15796 by @ogabek96)
+- Calendar
+  - Añadido el atributo del primer día de la semana (#16047 by @ziyoung)
+- Avatar
+  - Agregado componente Avatar (#16144 by @luckyCao)
+- Upload:
+  - Añade capacidad para personalizar la plantilla de miniaturas (#13192 by @victorzhuk)
+
+#### Corrección de errores
+
+- Tree
+  - No resaltar el nodo de árbol cuando currentKey es nulo (#15668 by @yyjjqq94)
+  - Solucionado el problema #15538 causado por dos Tree que compartian los mismos datos.(#15615 by @VanMess)
+- Upload
+  - Actualizado el tipo del parámetro `fileList`  (#15716 by @underfin)
+- Table
+  - Solucionado que el icono de loading no se mostraba (#15868 by @ziyoung)
+  - Corregido el color de fondo de una tabla compleja cuando se desplaza el cursor (#15504 by @cnlon)
+  - Corregido current-row-key y el bug del evento select (#15983 by @ziyoung)
+  - Height acepta más unidades (#16013 by @ziyoung)
+  - Solucionado reserve-selection no funcionaba (#16135 by @ziyoung)
+- Docs
+  - Corregido el tipo de atributo Divider en zh-cn  (#15889 by @haoranyu)
+  - Se elimina una etiqueta html de cierre incorrecta y el código de bloque vacío (#16194 por @Alexeykhr)
+- Menu
+  - Corregido un error oculto en el submenú después de añadir popper-append-to-body (#15391 by @PanJiaChen)
+- Select
+  - Arreglado initialInputHeight (#15989 by @yyjjqq94)
+  - Corregido el comportamiento de default-first-option cuando se escribe chino (#15431 by @VanMess)
+  - Corregido el problema de importación doble (#16215 by @lengband)
+- Message
+  - Añadida la opción type def para offset (#16027 by @matjaz)
+- Timeline
+  - Arreglado reverso roto (#16091 by @ziyoung)
+- Slider
+  - Corregido #15545 agregando explicaciones sobre el evento "input" en chino (#15588 by @VanMess)
+- InfiniteScroll
+  - Actualización del nombre del paquete (#16125 by @iamkun)
+- MessageBox
+  - Arreglado el bug de distinguishCancelAndClose, la acción no era la misma que la documentada (#15438 by @qingdengyue)
+- PopupManager
+  - Arreglado que el z-index no podía ser reescrito la primera vez que se usaba (#15738 by @luckyCao)
+- Tarea
+  - Actualizado el test del api host  (#15807 by @iamkun)
+
+#### Optimizacion
+
+- Tree
+  - Modificar las condiciones del bucle para mejorar el rendimiento (#15699 by @KingJeason)
+- Theme
+  - Refinado  GA track & actualizado el link del pie que lleva al theme roller online (#16007 by @island205)
+- Badge
+  - Actualizado el check del prop badge (#16198 by @iamkun)
+- Avatar
+  - Actualizado el var del config del theme (#16202 by @luckyCao)
+- I18n
+  - Actualizada la traducción del portugués (#15776 by @gigioSouza)
+  - Actualizada la traducción del idioma Farsi (#15881 by @pamenary)
+- Docs
+  - Agregado componentes faltantes en el quick start (#16063 by @pape2016)
+  - Actualizada la traducción al francés (#16208 by @blombard)
+  - Agregada descripción $slots.default (#15444 by @Alexeykhr)
+  - Actualizada la Doc en Español 2.9.1 (#15840 by @Gonzalo2310)
+  - Corrección de errores ortográficos en fr (#15837 by @blombard)
+  - Actualizado el changelog 2.9.2 en español (#16185 by @Gonzalo2310)
+
+#### Breaking changes
+
+- Form
+  - Eliminado el estado success (#16159 by @ziyoung)
+
+### 2.9.2
+
+*2019-06-21*
+
+#### Corrección de errores
+
+- Tareas
+  - Solucionadas las definiciones de archivos TS (#15805 by @NateScarlet)
+
+### 2.9.1
+
+*2019-05-30*
+
+#### Nuevas características
+
+- Table
+  - Los metodos tree-props，default-expand-all, expand-row-keys, toggle-row-expansion y el evento expand-change son compatibles con Tree Table (#15709 by @ziyoung)
+
+#### Corrección de errores
+
+- Table
+  - Corrección de algunos errores (#15709 by @ziyoung)
+- Theme
+  - Actualización del host de la api (#15784 by @iamkun)
+
+#### Optimización
+
+- Tarea
+  - Una actualización del tipo InfiniteScroll (#15794 by @iamkun)
+
+### 2.9.0
+
+*2019-05-30*
+
+#### Nuevas características
+
+- Backtop
+  - Añadido componente Backtop (#15541 by @iamkun)
+- PageHeader
+  - Añadido el componente PageHeader (#15714 by @ziyoung)
+- InfiniteScroll
+  - Añadida la directiva InfiniteScroll (#15567 by @iamkun)
+- Cascader
+  - Agregado modo múltiple y método de filtro (#15611 by @SimonaliaChen)
+- Message
+  - Visualización en modo stack (#15639 by @island205)
+- Tag
+  - Añadido prop effect (#15725 by @SimonaliaChen)
+- Tabs
+  - Alinea el título a la izquierda cuando el tipo es card (#15695 by @luckyCao)
+- DatePicker
+  - Soporta cadenas literales (#15525 by island205)
+- Image
+  - Añadido soporte para transmitir attrs y listeners (#15578 by @VanMess)
+- Theme
+  - Añadido fondo al popup (#15412 by @iamkun)
+- Tarea
+  - Actualizada la nueva página de índice 2.9.0 (#15682 by @iamkun)
+
+#### Corrección de errores
+
+- Table
+  - Corregido el comportamiento de cambio de orden cuando la condición de orden es nula (#15012 by @joelxr)
+- Image
+  - Corregido ssr y compatibilidad de ajuste de objetos (#15346 by @SimonaliaChen)
+- Input
+  - Corregido estilo show-word-count en el-form (#15359 by @lvjiaxuan)
+  - Corregido el icono de borrar que no estaba centrado (#15354 by @YiiGuxing)
+- Calendar
+  - Corregido día de la semana no correcto cuando el día es domingo (#15399 by @qingdengyue)
+  - Corregido error de desaparición de octubre (#15394 by @qingdengyue)
+- Tabs
+  - Corrección de la pestaña básica anidada en el error de relleno de la pestaña de la tarjeta (#15461 by @SimonaliaChen)
+- Tag
+  - Corregido problema de propagación de stop (#15150 by @infjer)
+- Form
+  - Corregido el error de grupo de entrada dentro de la altura del elemento de formulario (#15457 by @SimonaliaChen)
+  - Solucionado el problema de resetFields (15181 by @luckyCao)
+- Tooltip
+  - Corregido tabindex personalizado no funcionaba (#15619 by @SimonaliaChen )
+- Link
+  - Arreglada la clase de estilo del icono de enlace (#15752 by @iamkun)
+- Select
+  - Revertir el valor establecido a nulo cuando se borra (#15447 by @iamkun)
+- Loading
+  - Corregido dom no cambia cuando el estado de carga cambia rápidamente (#15123 by @FAKER-A)
+- Switch
+  - Etiqueta con el evento de repetición del interruptor (#15178 by @FAKER-A)
+- Slider
+  - Arreglado el problema de estilo al hacer clic en la barra deslizante (#15561 by @luckyCao)
+- Radio
+  - Solucionado el problema 14808 (#14809 by @OverTree)
+- Form
+  - Solucionado el problema de resetFields (15181 by @luckyCao)
+- Tarea
+  - Se actualizaron las dependencias y se corrigió el error de demostración (#15324 by ziyoung)
+ - Type
+  - Corregida la definición del tipo de carga (#15635 by @iamkun)
+  - Corregido tipo Icono (#15634 by @iamkun)
+  - Corregida la definición del tipo de enlace (#15402 by @iamkun)
+
+#### Optimización
+
+- Cascader
+  - Refractorización (#15611 by @SimonaliaChen)
+- Tarea
+  - Actualización hacer nueva lógica de componentes (by @iamkun)
+- Documentación
+  - Renombrar variable en docs (#15185 by @liupl)
+  - Corregido el atributo type de imagen y el valor por defecto (#15423 by @haoranyu)
+  - Corregido error en la doc de form (#15228 by @SHERlocked93)
+
+### 2.8.2
+
+*2019-04-25*
+
+#### Corrección de errores
+
+- Icon
+  - Actualizado icon (#15272 by @iamkun)
+- Docs
+  - Arreglada la documentacion de Form e Input (#15273 by @ziyoung)
+
+### 2.8.1
+
+*2019-04-25*
+
+#### Corrección de errores
+
+- Icon
+  - Actualizado el icono de cascader y select (#15264 by @SimonaliaChen)
+  - Actualizado icon (#15258 #15268 by @iamkun)
+
+#### Optimización
+
+- Chore
+  - Actualizado build script (#15267 by @ziyoung)
+- Docs
+  - Arreglado el color underline de link (#15265 by @iamkun)
+- Other
+  - Arreglada la migracion de la configuracion no compatible con camel case props y eventos (#15260 by @SimonaliaChen)
+
+### 2.8.0
+
+*2019-04-25*
+
+#### Nuevas características
+
+- Divider
+  - Agregado el componente Divider (#15055 by @island205)
+- Rate
+  - Agregados colores personalizados y clases de iconos pasando un objeto (#15051 by @SimonaliaChen)
+- Link
+  - Agregado componente Link (#15052 by @iamkun)
+- Calendar
+  - Agregado el componente Calendar (#14908 by @ziyoung)
+- Icon
+  - Agregado Icon (#15214 by @iamkun)
+- Alert
+  - Agregado tema dark (#15041 by @island205)
+- Image
+  - Agregado componente image (#15117 by @SimonaliaChen)
+- Collapse
+  - CollapseItem puede ser disabled (#15076 by @ziyoung)
+- Carousel
+  - Agregado atributo direction y soporte para la direccion vertical (#15122 by @ziyoung)
+- Pagination
+  - Agregado atributo hide-on-single-page (#15096 by @ziyoung)
+- Slider
+  - Agregado atributo marks (#15133 by @luckyCao)
+- Input
+  - Agregado attributo show-word-count (#15075 by @luckyCao)
+- InputNumber
+  - Agregado atributo step-strictly (#15050 by @luckyCao)
+- Tooltip, Dropdown, Popover
+  - Soporte para el atributo tabindex (#15167 by @ziyoung)
+
+#### Corrección de errores
+
+- Notification
+  - Arreglado el word break del titulo (#15008 by @iamkun)
+- Form
+  - Arreglado que cuando se cambiaban las reglas en el-form no funcionaba (#14985 by @luckyCao)
+  - Arreglado el estilo del label (#14969 by @ziyoung)
+  - Los FormItem requeridos muestran astericos cuando el label es auto (#15144 by @ziyoung)
+- Pagination
+  - Arreglado que el slot no se actualizaba (#14711 by @lucyhao)
+- Table
+  - Arreglado un bug del load en el modo lazy (#15101 by @ziyoung)
+  - Arreglado el ancho de la celda cuando colspan es mayor que 1 (#15196 by @ziyoung)
+  - Mejora en el rendimiento (#14868 by @ziyoung)
+  - No se emiten disparadores del evento sort-change durante la inicializacion (#14625 by @PeanutWatson)
+  - Igual comportamiento para height y max-height (#14660 by @arthurdenner)
+- Dialog
+  - Arreglado que el cuerpo del dialog quiebre las palabras correctamente en las palabras largas (#15027 by @iamkun)
+- Alert
+  - Actualizada la definicion de type (#15186 by @ziyoung)
+- Tabs
+  - Solucionado el problema por el que el rechazo de la promesa estaba afectando a la aplicación (#14816 by @ffxsam)
+  - Rerender cuando hay cambios en el slot (#15238 by @ziyoung)
+- Message
+  - Actualizada la definicion de type (#14968 by @agoni1212)
+- Select
+  - Solucionado el error cuando value es undefined o null (#15022 by @luckyCao)
+- Tree
+  - Eliminar el nodo actual despues de removido (#14604 by @sinchang)
+  - Mejora en el rendimiento (#14881 by @ChenZhuoSteve)
+- Dropdown
+  - Estilo arreglado (#14907 by @doing123)
+- Slider
+  - Corrección de un fallo en el teclado a11y (#14792 by @erezsob)
+- Menu
+  - El valor de ActiveIndex será nulo si el defaultIndex no existe (#14074 by @hoythan)
+- Directive
+  - RepeatClick: usa Date.now() en lugar de new Date() (#14776 by @pavelmash)
+- Upload
+  - Arreglado el estilo para mostrar imagenes transparentes (#15039 by @iamkun)
+- Theme
+  - Agregado zero border (#15256 by @iamkun)
+
+#### Optimización
+
+- Tareas
+  - Actualizado changelog zh-cn (#14965 by @iamkun)
+
+  - Ocultar la descripcion de la demo cuando esta vacia (#15014 by @ziyoung)
+
+  - Muestra la info dev del server por defecto @iamkun)
+
+  - Arreglado un error del changelog v2.6.0 (#15026 by @iamkun)
+
+  - Actualizado build config (#14821 by @abc3660170)
+
+  - Agregado hmr (#15221 by @SimonaliaChen)
+
+  - Uso de sourcemap en entorno dev (#15087 by @ibufu) Docs
+
+  - Cambio de nombre de variable en docs (#14602 #15003 #15094 #15105 by @liupl)
+
+  - Arreglado un error en la documentacion de upload (#15023 by @iamkun)
+
+  - Actualizada la documentacion del custom validator del Form (#15040 by @iamkun)
+
+  - Actualizada la documentacion de Tabs de como mostrar tabs verticales (#15053 by @iamkun)
+
+  - Uso del dominio eleme.cn (#15139 by @ziyoung)
+
+  - Arreglado el nombre de la ruta de imágenes (#15194 by @iamkun)
+
+  - Eliminada la traducción duplicada en francés (#15207 by @iamkun)
+
+
+
+#### Breaking changes
+
+- Rate
+  - Arreglado Fix decimal display support in disabled mode (#15089 by @haoranyu)
+- Select
+  - Se usa la opcion placeholder del label para poner el placeholder en el modo filter (#14989 by @ibufu)
+
+### 2.7.2
+
+*2019-04-03*
+
+#### Corrección de errores
+
+- Form
+  - Arreglado el estilo auto `label-width` (#14955 by @ziyoung)
+
+#### Optimización
+- Docs
+  - Arreglado un error de link de una imagen (#14957 by @iamkun)
+- Chore
+  - Arreglado un error de mkdir en el deploy (#14952 by @iamkun)
+
+### 2.7.1
+
+*2019-04-03*
+
+#### Corrección de errores
+
+- Select
+  - Se asigna null a value cuando se limpia (#14322 by @aaronfulkerson)
+- Input
+  - Actualiza los valores dependientes en el DOM cuando el tipo cambia (#14889 by @wacky6)
+- Table
+  - Hacer que defaultExpandAll funcione cuando exista una columna expandida (#14935 by @ziyoung)
+- Dialog
+  - El color de fondo puede ser configurado (#14939 by @ziyoung)
+- Form
+  - `label-width` soporta auto width (#14944 by @ziyoung)
+
+#### Optimización
+- Docs
+  - Actualización de la documentación en español (#14913 by @Gonzalo2310)
+  - Agregada documentación en francés para el nuevo componente (#14924 by @ziyoung)
+  - Documentación de los Tabs optimizada (#14938 by @ziyoung)
+
+### 2.7.0
+
+*2019-03-28*
+
+#### Nuevas características
+
+- Table
+  - Agregado soporte de datos con estructura tree (#14632 by @ziyoung)
+
+#### Corrección de errores
+
+- Tabs
+  - Uso de color primario como boxShadow color (#14558 by @Richard-Choooou)
+  - Renderización cuando cambia la etiqueta (#14496 by @akki-jat)
+- Table
+  - El pie de página sigue la alineación de las celdas del body (#14730 by @ziyoung)
+- NavMenu
+  - Se ha corregido que al hacer click en el el-submenu se disparaba childMenu nuevamente (#14443 by @PanJiaChen)
+- Dropdown
+  - Compatible con la nueva sintaxis de v-slot en V 2.6 (#14832 by @ziyoung)
+- ColorPicker
+  - Corregido el manejo de error de string en hex color (#14793 by @iamkun)
+- Tree
+  - Revertido pr #13349 (#14847 by @ziyoung)
+- Tooltip
+  - Muestra cuando el valor inicial es verdadero (#14826 by @ziyoung)
+- Docs
+  - Actualización de documentos de cascader (#14442 by @panhezeng)
+- Style
+  - Corrección de la media query en sm-only, md-only, lg-only (#14611 by @sinchang)
+
+#### Optimización
+
+- Chore
+  - Añadido descripción de la página web (#14802 by @iamkun)
+
+### 2.6.3
+
+*2019-03-21*
+
+#### Corrección de errores
+
+- Corrección del estilo de demostración de Cascader (#14789 by @ziyoung)
+- Eliminación de la operación DOM innecesaria (#14788 by @ziyoung)
+- Corrección del valor predeterminado del DST de DatePicker (#14562 by @wacky6)
+
+### 2.6.2
+
+*2019-03-21*
+
+#### Nuevas características
+
+- DatePicker
+  - Añadido monthrange para el atributo type (#14487 by @zxyRealm)
+- i18n
+  - Añadido Locale Croata (#14360 by @danijelh)
+- Docs
+  - Actualización del documento en francés para 2.6.1 y corrección de errores tipográficos (#14555 by @smalesys)
+  - Actualización de la traducción al francés (#14643 by @smalesys)
+
+#### Corrección de errores
+
+- Input
+  - Corregida regresión (#14572 by @wacky6)
+- DatePicker
+  - Corrección del cálculo del primer día de la semana (#14523 by @sinchang)
+  - Corregido el formato de valor del selector de semana (#13754 by @wacky6)
+- Steps
+  - Corregida issue #14502 (#14596 by @sinchang)
+  - Arreglado estilo con tema simple (#14610 by @sinchang)
+- Docs
+  - Renombrada variable en documentos de Table (#14587 by @likwotsing)
+  - Añadido índice de búsqueda en francés (#14565 by @iamkun)
+  - Corrección del estilo de página TimePicker (#14579 by @ziyoung)
+  - Renombrada variable en Upload docs (#14593 by @liupl)
+  - Actualización de los documentos del Form async validator (#14694 by @iamkun)
+  - Solucionado el error de tooltip doc (#14748 by @iamkun)
+  - Corregido error tipográfico (#14751 by @2bj)
+  - Corregido los elementos de control de resaltado para Webkit touch (#14703 by @VladG0r)
+
+
+#### Optimización
+
+- Chore
+  - Actualización del script de construcción de ci (#14600 by @ziyoung)
+  - Actualización ga tracking (#14560 por @iamkun)
+  - Añadido más evento ga (#14633 by @iamkun)
+  - Actualización del grupo de discusión (#14741 por @iamkun)
+  - Actualización de los deps y conf de las pruebas (#14735 by @wacky6)
+  - Actualización gulp (#14745 by @ziyoung)
+  - Uso de codepen para mostrar la demo y corregir el error doc (#14747 por @ziyoung)
+
+### 2.6.1
+
+*2019-03-03*
+
+#### Corrección de errores
+
+- **Don't specify node version** (by @iamkun in #14546)
+- Corrección del directorio doc en `deloy-faas.sh` (by @ziyoung in #14553)
+- Arreglado el estilo de date en changelog para 2.6.0 (by @island205 in #14547)
+- Corregido error tipográfico en doc (by @wack6 in #14552)
+
+### 2.6.0
+
+*2019-03-01*
+
+#### Nuevas características
+- Timeline
+  - Agregado componente timeline (by @jikkai in #14248)
+- DropdownItem
+  - Añadida la prop icon a `el-dropdown-item` (by @gabrielboliveira in #14088)
+- Input
+  - Añadida la prop show-password (by @phshy0607 in #13966)
+- Select
+  - Añadido el slot `empty` (by @elfman in #13785)
+- Autocomplete
+  - Añadida la prop highlight-first-item (by @YamenSharaf in #14269)
+- I18n
+  - Locale Armenio creado (by @hamletbarsamyan in #14214)
+- Docs
+  - Traducción al francés (by @smalesys in #12153, #14418, #14434)
+
+#### Optimización
+- Alert
+  - Actualizada la descripción de Alert (by @iamkun in #14488)
+- Input
+  - Actualizado input password (by @iamkun in #14480)
+- InputNumber
+  - Removido parseFloat innecesario (by @JuniorTour in #14172)
+- Menu
+  - Añadido soporte para `el-menu-item` sin índice (by @georgyfarniev in #13298)
+- Table
+  - Eliminadas algunas operaciones DOM html (by @elfman in #13643)
+- Upload
+  - Optimizado el código (by @elfman in #13973)
+- Popup
+  - Optimizado el código (by @KAionro in #14413)
+- Docs
+  - Se han agregado más detalles sobre cómo ejecutar el modo de play para contribuir (by @island205 in #14355)
+  - Warn input como componente de control. (by @wacky6 in #14463)
+  - Actualizacion de la documentacion de Table (by @luguokong in #14329)
+  - Actualizacion de la documentacion de input (by @iamkun in #14437)
+  - Actualizacion de la documentacion de custom-theme (by @wangguohao in #14297)
+  - Se ha hecho que el icono cambie de estilo en hover (by @tuxinghuan in #14295)
+- Build
+  - Minimización de css y js para la doc del sitio de Element (by @iamkun in #14430)
+  - Aceleración de webpack (by @hetech in #14484)
+  - Uso de cli para seleccionar la versión de lanzamiento (by @hetech in #14354)
+- Instalación de stale para el manejo de issues (by @island205 in #14392)
+
+#### Corrección de errores
+- Menu
+  - Corregido el error de focus del submenú cuando se cambiaba la pestaña del navegador (by @liupl in #13976)
+- MessageBox
+  - Corregida la definicion de type (by @NateScarlet in #14278)
+- ScrollBar
+  - Prevenido el clic del botón derecho en la miniatura (by @xifeiwu in #14196)
+- Switch
+  - Activación de la validación de formularios si el valor cambia (by @hetech in #14426)
+- Table
+  - Se ha convertido el método toggleAllSelection en un método de instancia (by @letanure in #14075)
+- Tabs & Dropdown
+  - Estilo arreglado (by @hetech in #14452)
+- Tree
+  - Los tips de texto vacío son diferentes de las tablas (by @ColinCll in #14331)
+- Docs
+  - Corregido el error de formato de la documentacion de DatetimePicker (by @iamkun in #14290)
+  - Problema de ortografía en la documentación de datepicker (by @helmut in #14481)
+  - Arreglado estilo doc de paginación (by @liuchuzhang in #14451)
+
+#### Breaking changes
+- Table
+  - Cambiar el orden de los parámetros enviados en los eventos de las filas (by @jikkai in #12086)
+
+### 2.5.4
+
+*2019-02-01*
+
+#### Corrección de errores
+
+- Build: Se ha solucionado el problema de configuración de babel que provocaba que el efecto de transicion de collpase se rompiera (por @island205 en #14282)
+
+### 2.5.3
+
+*2019-01-31*
+
+#### Optimización
+
+- Optimización del código de Message (por @vok123 en #14029)
+- Retirada de gh-pages (por @ziyoung en #14266)
+- Añadido enlace IssueHunt (por @island205 en #14261)
+
+#### Corrección de errores
+
+- Corregido el error del módulo UMD en el lado del servidor (por @island205 en #14242)
+- Corregido el estilo activo de TabBar (por @iamkun en #14240)
+- Corregido el error de código de demo de la tabla (por @xunmeng en #14253)
+
+
+### 2.5.2
+
+*2019-01-27*
+
+#### Optimización
+- Docs:
+  - Actualizacion ChangeLog ES 2.5.1 (by @Gonzalo2310 in #14231)
+
+#### Corrección de errores
+- Build:
+  - Eliminar comentarios no borrados en el módulo umd `lib/index.js` (por @island205 en #14233)
+  - Corregido el error de exportación disparado en el módulo commonjs usado en nuxt.js (por @island205 en #14232)
+  - Corrección de problemas de compilación de 2.5.1 (por @iamkun en #14228)
+
+### 2.5.1
+
+*2019-01-26*
+
+#### Optimización
+- DatePicker: resalta el mes y año actual (por @Debiancc en #14211)
+- Actualizacion del changelog 2.5.0 (por @wacky6 en #14217)
+
+#### Corrección de errores
+- Arreglado el problema de exportación generado por la actualización de webpack (por @island205 en #14220)
+- Guardados los documentos 2.4.11 y la nueva subcarpeta para 2.5+ (por @iamkun en #14222)
+
+### 2.5.0
+
+*2019-01-25*
+
+#### Corrección de errores
+- Autocompletar
+  - Corregida la última línea del menú desplegable que comenzaba recortada (#13597) (por @ziyoung)
+  - Arreglada la popper arrow que faltaba (#13762) (por @liuchuzhang)
+- Carrusel
+  - Contador de limpieza cuando el componente es destruido (#13820) (por @elfman)
+- Cascader
+  - Retirada de los props computados obsoletos (#13737) (por @iamkun)
+  - Se corrigió la definición de tipo de las opciónes de Cascader en TypeScript (#13613) (por @NateScarlet)
+  - Corregido icono que cubre el texto (#13596) (por @ziyoung)
+- Checkbox
+  - Refinado el estilo (por @PanJiaChen)
+- DatePicker
+  - Añade el `key` en v-for de TimeSpinner (#13547) (por @Ende93)
+  - Corregido el resaltado de la semana en el límite del año (#13883) (por @suyi91)
+- Input
+  - Corregida la referencia del nodo DOM del textarea (#13803) (por @laomu1988 @island205)
+- Pagination
+  - El valor de entrada no será menor que 1 (#13727) (por @elfman)
+- Popover
+  - Corrección de problemas de popover con el disparador de hover (#13104) (por @goldengecko)
+  - Corregido el fallo de memoria de instancia de popper (#13988) (por @qpxtWhite)
+- Radio
+  - Refinado el estilo (por @ohhoney1)
+- Table
+  - Mejorada la ordenación de tablas al hacer clic en la flecha de ordenación (#12890) (por @ohhoney1)
+  - Solucionado el problema de alineación vertical de texto vacío en IE10+ (#13638) (por @imzjjy)
+  - Corregida la documentación del tipo de índice (#13628) (por @ilovefafa)
+  - Corrección del problema de visualización de `show-summary` cuando el encabezado multinivel tiene el attr fixed (#13914) (por @luckyCao)
+- Tabs
+  - Corregido error de autodesplazamiento (#13696) (por @iamkun)
+  - Obtener la tab correcta a través del nombre de tab (#13705) (por @iamkun)
+  - Uso de paneName en lugar de name para determinar el estilo del panel (#13733) (por @iamkun)
+- Tree
+  - Corregido que `showCheckbox` prop en `Tree` no puede afectar a los hijos `tree-node` (por @KidneyFlower)
+  - Actualizado documento y archivo de definición (#13540) (por @ziyoung)
+- Upload
+  - Agregada la prop `url` para subir el archivo cuando `list-type` cambia (#13771) (por @elfman)
+- Slider
+  - Corrección de la sangría del código fuente (#13955) (por @wacky6)
+- I18n
+  - Añadidas las traducciones de catalán que faltaban (por @jaumesala)
+  - Añadidas las traducciónes de ruso que faltaban (#13658) (por @justlp)
+  - Corrección de las traducciones al finés (#14137) (por @jenkrisu)
+- Doc
+  - Actualización del documento 2.4.11 (#13522) (por @Gonzalo2310)
+- Otros
+  - Eliminar scripts innecesarios (por @ziyoung)
+  - Corregido el error de anchor link (#13753) (por @iamkun)
+  - Corrección de la capitalización inconsistente en la documentación (por @wonderjar)
+  - Añadido código qr del grupo de chat DingDing al readme (by @iamkun in #13957)
+  - Añadido logs de hilo a .gitignore (#13922) (por @mimimi)
+  - Eliminada la cuota de patrocinadores (#14156) (por @island205)
+  - Actualizado readme qr code src (#13960) (por @iamkun)
+  - Actualizado enlace CDN, corregido error tipográfico (por @ziyoung)
+
 ### 2.4.11
 
 *2018-11-21*
 
-- Revert pr #13296. Fixed clicking on Menu external causing Submenu collapsed, #13478
-- Adjust small screen (xs) media query breakpoints, #13468 (by @alekoshen712)
+- Revertido pr #13296. Arreglado que al hacer clic fuera del Menú causaba que el Submenú colapsara, #13478
+- Ajustados los media query breakpoints de las pantallas pequeñas (xs), #13468 (por @alekoshen712)
 
 ### 2.4.10
 
@@ -67,17 +965,17 @@
 
 *2018-09-14*
 
-- Corregido que DatePicker no activaba la validación del Form, #12328 #12348 
-- Corregidos el lanzamiento de errores del DatePicker en modo múltiple, #12347 
+- Corregido que DatePicker no activaba la validación del Form, #12328 #12348
+- Corregidos el lanzamiento de errores del DatePicker en modo múltiple, #12347
 - Corregida la posición incorrecta del spinner del DatePicker, #12415 (por @rang-ali)
 - Se ha corregido el llenado automático del input del DatePicker, #12521 (por @abdallanayer)
 - Corregida el input no resaltada en Cascader, #12341
-- Corregido el orden incorrecto de Tabpane, #12346 
+- Corregido el orden incorrecto de Tabpane, #12346
 - Corregida la posición incorrecta del cursor de ColorPicker, #12376 (por @cnwhy)
 - Corregido el estilo del Submenú, #2457
 - Corregido el resaltado después de seleccionar el Submenú, #12479
 - Corregidos los valores incorrectos seleccionados por Cascader, #12508 (por @huangjinqiang)
-- Corregido el valor incorrecto del input de Paginación, #12525 
+- Corregido el valor incorrecto del input de Paginación, #12525
 - Se ha corregido el orden en que la paginación desencadena los eventos, #12530
 - Corregido que no se mostraba el Table Filter, #12539
 - Corregido Tree que era incapaz de borrar nodos, #12684
@@ -90,7 +988,7 @@
 
 *2018-08-09*
 
-- Arreglada la tabla que no mostraba el ícono del filtro cuando a  `filter` se les asignaba un array vacío, #12165
+- Arreglada la tabla que no mostraba el ícono del filtro cuando a `filter` se les asignaba un array vacío, #12165
 - Arreglado Menu que no guardaba el estado activo cuando cambiaba `collapse` #12178 (por @elfman)
 - Se ha corregido que Cascader no escapaba a los caracteres especiales para Regexp, #12248
 - Se ha corregido que el RadioBotón deshabilitado mostraba la sombra de la caja cuando se hacía clic, #12262
@@ -112,7 +1010,7 @@
 
 - Se ha corregido en Table que `class-name` no funcionaba para las columnas `expand`, #12006
 - Se ha añadido el método `toggleAllSelection` para Table, #12047
-- Corregida la posición incorrecta del `suffix slot` cuando Input contiene Select, #12108 
+- Corregida la posición incorrecta del `suffix slot` cuando Input contiene Select, #12108
 - Corregido que el `line-height` de Option no se establecia, #12120
 - Corregido que TimeSelect con valor por defecto `null` no podia ser asignado después de ejecutar `resetField`, #12010
 - Arreglado el evento `keydown` que cuando no era una tecla de flecha no funciona en Tree, #12008
@@ -124,10 +1022,10 @@
 *2018-07-13*
 
 - Corregido que se disparaba la validacion del Select después de reajustar el formulario, #11837
-- Corregida la posición incorrecta del slot Input `suffix`  cuando se usaba el slot `suffix` con el slot  `append`  , #11951
+- Corregida la posición incorrecta del slot Input `suffix` cuando se usaba el slot `suffix` con el slot `append` , #11951
 - Corregido el clearable Input que muestraba el icono de borrado cuando era readonly, #11967
 - Arreglado el nodo Tree checked cuando estaba disabled, #11847
-- Corregido que  `default-checked-keys`  no funcionaba en Tree, #11971
+- Corregido que `default-checked-keys` no funcionaba en Tree, #11971
 - Corregido que el `empty-text` no era visible cuando el nodo Tree se filtraba, #11971
 - Arreglada la posición de texto vacío sobredimensionado en Table, #11965
 - Corregido que la fila de la tabla no se modificado el resaltado cuando `current-row-key` era asignada a null, #11866
@@ -147,10 +1045,10 @@
 *2018-06-26*
 
 - Ahora el `class-name` y el `label-class-name` de la tabla son reactivos, #11626
-- Arreglado que Table seguia resaltando la fila en la que se había hecho clic cuando  `highlight-current-row` era `false`, #11646
+- Arreglado que Table seguia resaltando la fila en la que se había hecho clic cuando `highlight-current-row` era `false`, #11646
 - Corregido un error de estilo de ButtonGroup cuando sólo habia un botón `round` o `circle`, #11605
 - Arreglado estilo del tamaño de página del Select de Pagination, #11622
-- Corregido un error del método `open`  de los Menús cuando se cambiaba dinámicamente `collapse`, #11646
+- Corregido un error del método `open` de los Menús cuando se cambiaba dinámicamente `collapse`, #11646
 - Añadidos los parámetros `activeName` y `oldActiveName` al gancho before-leave de Tabs, #11713
 - Arreglado el focus en Cascader después de hacer clic fuera, #11588
 - Arreglado que Cascader no se cerraba cuando se hacia clic en la opción estando `change-on-select` como `true`, #11623
@@ -168,7 +1066,7 @@
 - Añadido el atributo `stretch` para Tabs, #11476
 - Arreglado el problema de orden de renderizado de TabPane cuando Tabs es `lazy`, #11461
 - Arreglado que Table no retenia la fila actual de resaltados cuando se expandia, #11464
-- Arreglado que  focusing state cuando `before-leave` devolvia una promesa resuelta, #11386
+- Arreglado que focusing state cuando `before-leave` devolvia una promesa resuelta, #11386
 - Arreglado que Popover deshabilitado seguia creando poppers, #11426
 - Arreglado el bucle sin fin de Tree cuando se añadia un nuevo nodo en modo `lazy`, #11430 (por @wangjingf)
 - Añadido el evento `closed` para Dialog, #11490
@@ -203,9 +1101,9 @@
 - Upload
   - Corregido el error de la consola cuando se resolvia el Archivo en la Promesa devuelta del método `beforeUpload`, #11297 (por @qusiba)
 - Tooltip
-  - Solucionado que la flecha no se  posicionaba correctamente cuando el contenido estaba vacío, #11335
+  - Solucionado que la flecha no se posicionaba correctamente cuando el contenido estaba vacío, #11335
 - Autocompletar
-  - Corregido que  las sugerencias de entrada eran  incorrectas después de eliminar la palabra clave rápidamente, #11323
+  - Corregido que las sugerencias de entrada eran incorrectas después de eliminar la palabra clave rápidamente, #11323
 - ColorPicker
   - Corregido el evento `active-change` que se disparaba incorrectamente cuando el menú desplegable del picker estaba cerrado, #11304
 - Table
@@ -238,7 +1136,7 @@
 - Arreglado que al cerrar el panel DatePicker sin modificar el valor se desencadenaba incorrectamente el evento `change`, #11017
 - Arreglado que la navegación por el teclado no funcionaba correctamente cuando Select tenia opciones agrupadas, #11058
 - Agregado el `slot named` `prefix` para Select, #11063
-- Agregado  el metodo `clearValidate` para FormItem, #11076
+- Agregado el metodo `clearValidate` para FormItem, #11076
 - Agregado el atributo `checkOnClickNode` para Tree, #11111
 
 ### 2.3.7
@@ -254,7 +1152,7 @@
 
 *2018-04-21*
 
-- Corregido el comportamiento incorrecto del callback  `allow-drop` de Tree cuando se usaba el parámetro `type`, #10821
+- Corregido el comportamiento incorrecto del callback `allow-drop` de Tree cuando se usaba el parámetro `type`, #10821
 - Ahora puede introducir correctamente las palabras clave en filterable Single Select en IE11, #10822
 - Corregido Single Select activaba incorrectamente el evento `blur` después de hacer clic en una opción, #10822
 
@@ -264,24 +1162,24 @@
 
 - Arreglado los incorrectos realces en el panel de DatePicker cuando `type` es week, #10712
 - Arreglado que InputNumber comenzaba vacio cuando el valor inicial era 0, #10714
-- Agregado el atributo  `automatic-dropdown` para Select, #10042 (by @Seebiscuit)
+- Agregado el atributo `automatic-dropdown` para Select, #10042 (by @Seebiscuit)
 - Arreglado que el valor del Rate pasaba a `disabled` cuando se comenzaba a actualizar con las teclas de navegacion, #10726 (by @Richard-Choooou)
-- Ahora el atributo `type` de DatePicker's puede ser  `'dates'`, donde puede elegir varias fechas en un solo picker, #10650 (by @Mini256)
-- Agregados los eventos  `prev-click` y `next-click` para Pagination, #10755
+- Ahora el atributo `type` de DatePicker's puede ser `'dates'`, donde puede elegir varias fechas en un solo picker, #10650 (by @Mini256)
+- Agregados los eventos `prev-click` y `next-click` para Pagination, #10755
 - Agregado el atributo `pager-count` para Pagination, #10493 (by @chongjohn716)
-- Agregado `type` como 3rd parametro del atributo  `allow-drop`  de Tree, #10792
+- Agregado `type` como 3rd parametro del atributo `allow-drop` de Tree, #10792
 - Ahora usamos ResizeObserver para detectar el redimensionamiento de elementos DOM, #10779
 
 ### 2.3.4
 
 *2018-04-12*
 
-- Eliminado el atributo duplicado  `showTimeout` en SubMenu's en la declaracion TypeScript, #10566 (by @kimond)
+- Eliminado el atributo duplicado `showTimeout` en SubMenu's en la declaracion TypeScript, #10566 (by @kimond)
 - Ahora se puede personalizar los datos de los items de Transfer usando scoped slot, #10577
-- Arreglado que los click de los botones `next` y `prev`  en Pagination se deshabilitaban cuando se disparaba el evento  `current-change`, #10628
+- Arreglado que los click de los botones `next` y `prev` en Pagination se deshabilitaban cuando se disparaba el evento `current-change`, #10628
 - Arreglado que Textarea mostraba `undefined` en SSR cuando el valor no era asignado, #10630
-- Arreglado que se deshabilitaba el estilo del TabItem cuando  `type` era border-card, #10640
-- Agregado `$index` como cuarto parametro en el atributo de las columnas de Table  `formatter` , #10645
+- Arreglado que se deshabilitaba el estilo del TabItem cuando `type` era border-card, #10640
+- Agregado `$index` como cuarto parametro en el atributo de las columnas de Table `formatter` , #10645
 - Arreglado que CheckboxButton no se exportaba en la declaracion de TypeScript, #10666
 
 ### 2.3.3
@@ -318,7 +1216,7 @@
 #### Nuevas características
 - Table
   - Ahora `formatter` de TableColumn puede ser actualizado dinámicamente, #10184 (by @elfman)
-  - Agregado el atributo  `select-on-indeterminate`, #9924 (by @syn-zeta)
+  - Agregado el atributo `select-on-indeterminate`, #9924 (by @syn-zeta)
 - Menu
   - Agregado el atributo `collapse-transition`, #8809 (by @limichange)
 - Input
@@ -329,8 +1227,8 @@
 - Tree
   - Agregados los atributos `draggable`, `allow-drop` y `allow-drag`, y los eventos `node-drag-start`, `node-drag-enter`, `node-drag-leave`, `node-drag-over`, `node-drag-end` y `node-drop`, #9251 #10372 (by @elfman)
 - Form
-  - El metodo `validate` ahora acepta un segundo parametro, que contiene información de los ítems  del formulario que no superaron la validación, #10279
-  - Agregado el evento  `validate`, #10351
+  - El metodo `validate` ahora acepta un segundo parametro, que contiene información de los ítems del formulario que no superaron la validación, #10279
+  - Agregado el evento `validate`, #10351
 - Progress
   - Agregado el atributo `color`, #10352 (by @YunYouJun)
 - Button
@@ -342,7 +1240,7 @@
 - Menu
   - Ahora collapsed Menu sólo mostrará el Tooltip cuando el slot `title` de MenuItem esté configurado, #10193 (by @PanJiaChen)
 - Pagination
-  - Corregido el evento  `current-change`  que se disparaba erróneamente sin interacción del usuario, #10247
+  - Corregido el evento `current-change` que se disparaba erróneamente sin interacción del usuario, #10247
 - DatePicker
   - Ahora la fecha y la hora en el panel desplegable están correctamente formateadas según el atributo `format`, #10174（by @remizovvv）
 - Upload
@@ -364,18 +1262,18 @@
 - Arreglado anchos incorrectos de columnas fijas de Table en algunos casos, #10130
 - Corregido MessageBox heredaba el atributo `title` de su instancia anterior cuando se llamaba sin `title`, #10126 (by @Pochodaydayup)
 - Agregado el atributo `input-size` para Slider, #10154
-- Agregados los eventos  `left-check-change` y `right-check-change` para Transfer, #10156
+- Agregados los eventos `left-check-change` y `right-check-change` para Transfer, #10156
 
 ### 2.2.1
 
 *2018-03-02*
 
 - Corregido Aside, Header y Footer que se contraia en algunos layout, #9812
-- Corregido Table con un atributo `height`  no renderizaba en SSR, #9876
+- Corregido Table con un atributo `height` no renderizaba en SSR, #9876
 - Corregido Table con fila expandible no calculaba la altura cuando la fila era expandida, #9484
-- Corregido que cuando se escribia la fecha de forma manual en DateTimePicker no se disparaba el evento  `change`, #9913
+- Corregido que cuando se escribia la fecha de forma manual en DateTimePicker no se disparaba el evento `change`, #9913
 - Corregido que Select mostraba sus opciones cuando se hacia click con el botón derecho del mouse en el Input, #9894 (by @openks)
-- Agregado el atributo `tooltip-class` para Slider, #9957 
+- Agregado el atributo `tooltip-class` para Slider, #9957
 - Ahora Select permanecera enfocado despues de la selección, #9857 (by @Seebiscuit)
 - Agregado el atributo `target-order` para Transfer, #9960
 
@@ -385,12 +1283,12 @@
 
 #### New features
 - Menu
-  - Agregados los atributos  `popper-class` y `disabled` para SubMenu, #9604 #9771
+  - Agregados los atributos `popper-class` y `disabled` para SubMenu, #9604 #9771
   - Menu Horizontal ahora soporta SubMenu multi-capas, #9741
 - Tree
   - Agregado el evento `node-contextmenu`, #9678
   - Ahora se puede personalizar el template del nodo usando scoped slot, #9686
-  - Agregados los metodos  `getNode`, `remove`, `append`, `insertBefore`, `insertAfter`, `getCheckedKeys`, `getHalfCheckedNodes`, `getHalfCheckedKeys` y el evento `check`, #9718 #9730
+  - Agregados los metodos `getNode`, `remove`, `append`, `insertBefore`, `insertAfter`, `getCheckedKeys`, `getHalfCheckedNodes`, `getHalfCheckedKeys` y el evento `check`, #9718 #9730
 - Transfer
   - Agregado el metodo `clearQuery`, #9753
 - Select
@@ -406,11 +1304,11 @@
   - Corregido componentes del Container que no se estiraban en IE11, #9655
 - Loading
 
-  - Corregido Loading no se mostraba cuando el valor de `v-loading` era cambiado a true en el `hook`  `mounted`, #9722
+  - Corregido Loading no se mostraba cuando el valor de `v-loading` era cambiado a true en el `hook` `mounted`, #9722
 - Switch
   - Corregido se disparaban los dos eventos nativos de click cuando se hacia click en el Switch, #9760
 
-    ​
+
 
 ### 2.1.0 Charcoal
 
@@ -470,11 +1368,11 @@
 
 *2018-01-08*
 
-- Corregido el problema de color del borde del Select cuando está el slot `prepend` o `append`  del Input, #9089
-- Corregido el parámetro  `remove-tag` de Select, #9090
+- Corregido el problema de color del borde del Select cuando está el slot `prepend` o `append` del Input, #9089
+- Corregido el parámetro `remove-tag` de Select, #9090
 - Añadido los atributos `show-timeout` y `hide-timeout` para SubMenu, #8934 (por @HugoLew)
-- Corregido el estilo de Tooltip de  `show-overflow-tooltip`  que faltaba cuando Table era importada bajo demanda, #9130
-- Se ha corregido el mal funcionamiento de ordenación de la columna de Table despues que  `clearSort`  era ejecutado en esa columna, #9100 (por @zEmily)
+- Corregido el estilo de Tooltip de `show-overflow-tooltip` que faltaba cuando Table era importada bajo demanda, #9130
+- Se ha corregido el mal funcionamiento de ordenación de la columna de Table despues que `clearSort` era ejecutado en esa columna, #9100 (por @zEmily)
 - El fichero de configuración i18n para el checo se renombra de `cz` a `cs-CZ`, #9164
 
 ### 2.0.10
@@ -490,7 +1388,7 @@
 
 *2017-12-24*
 
-- Añadida la función de enganche (hook) `before-remove`  para Upload, #8788 (by @firesh)
+- Añadida la función de enganche (hook) `before-remove` para Upload, #8788 (by @firesh)
 - Arreglado el valor inicial de error que no funcionaba para FormItem, #8840
 - Ahora la directiva Loading soporta nombre de clase personalizado asignando el atributo `element-loading-custom-class`, #8826 (por @earlymeme)
 - Arreglado CarouselItem que se ponía invisible cuando los datos eran actualizados asincrónicamente, #8921
@@ -518,7 +1416,7 @@
 
 - Corregido error de estilo de los iconos de ordenación de Table, #8405
 - Corregido activacion para Popover cuando `trigger` es manual, #8467
-- Añadidos los atributos `prefix-icon` y `suffix-icon`  para Autocomplete, #8446 (por @liyanlong)
+- Añadidos los atributos `prefix-icon` y `suffix-icon` para Autocomplete, #8446 (por @liyanlong)
 - Añadido el atributo `separator` para Cascader, #8501
 - Añadido atributo `clearable` para Input, #8509 (por @lbogdan)
 - Añadido atributo `background` para Pagination, #8553
@@ -530,7 +1428,7 @@
 - Solucionado regresion en 2.0.4 de Popover, Tree, Breadcrumb and Cascader, #8188 #8217 #8283
 - Solucionado Fuga de memoria de la directiva clickoutside, #8168 #8225 (por @badpunman @STLighter)
 - Solucionada la altura en multiple Select cuando se borra su valor, #8317 (por @luciy)
-- Añadido el atributo `collapse-tags` para multiple Select  para reemplazar las tags con una línea de texto, #8190
+- Añadido el atributo `collapse-tags` para multiple Select para reemplazar las tags con una línea de texto, #8190
 - Solucionado el alto consumo de CPU causado por Table cuando esta oculta, #8351
 - Ahora puede usar el método `doLayout` de Table para actualizar su diseño, #8351
 
@@ -551,7 +1449,7 @@
 - Solucionado atributos `editable` and `readonly` de DatePicker de los rangos, #7922
 - Corregido error de estilo de los Tabs anidados, #7941
 - Corregido error de estilo del último Step de Steps verticales, #7980
-- Corregido el tiempo de activación del evento `current-change`  para Pagination, #7995
+- Corregido el tiempo de activación del evento `current-change` para Pagination, #7995
 - Corregido Tooltip no registrado en el Menu, #7995
 
 ### 2.0.2
@@ -582,7 +1480,7 @@
 #### New features
 
 - General
-  - Un nuevo tema:  `theme-chalk`
+  - Un nuevo tema: `theme-chalk`
   - Se ha mejorado la accesibilidad de los siguientes componentes: Alert, AutoComplete, Breadcrumb, Button, Checkbox, Collapse, Input, InputNumber, Menu, Progress, Radio, Rate, Slider, Switch, Upload
   - Añadido tipografías TypeScript
   - Todos los iconos existentes son rediseñados. Se han añadido algunos iconos nuevos
@@ -592,9 +1490,9 @@
 - Button
   - Atributo `round` añadido. Se usa para botones de esquinas redondas #6643
 - TimeSelect
-  - Ahora puede ser navegado por  `Up` y `Down`, y presionando `Enter` selecciona la hora #6023
+  - Ahora puede ser navegado por `Up` y `Down`, y presionando `Enter` selecciona la hora #6023
 - TimePicker
-  - Ahora puede ser navegado por  `Up` y `Down`, y presionando `Enter` selecciona la hora #6050
+  - Ahora puede ser navegado por `Up` y `Down`, y presionando `Enter` selecciona la hora #6050
   - Añadido `start-placeholder` y `end-placeholder`. Son placeholder's para las dos casillas de input en modo range #7169
   - Añadido el atributo `arrow-control` para hacer girar el tiempo con las flechas #7438
 - Tree
@@ -611,19 +1509,19 @@
   - Añadido el atributo `closeOnHashChange` #6043
   - Atributo `center` agregado para que el contenido pueda ser centrado #7029
   - Añadido atributo `roundButton` para mostrar Botones redondeados #7029
-  - Añadido atributo  `dangerouslyUseHTMLString`. Cuando está configurado en true, el mensaje será analizado como cadena HTML<sup>*</sup> #6043
+  - Añadido atributo `dangerouslyUseHTMLString`. Cuando está configurado en true, el mensaje será analizado como cadena HTML<sup>*</sup> #6043
   - Añadido atributo `inputType` para asignar el tipo para el input interno, #7651
 - Dialog
   - Añadidos los atributos `width`, `fullscreen`, `append-to-body`. Ahora Dialog puede ser anidado
   - Atributo `center` agregado para que el contenido pueda ser centrado #7042
-  - Añadidos  `focus-after-closed`, `focus-after-open`  para mejorar la accesibilidad #6511
+  - Añadidos `focus-after-closed`, `focus-after-open` para mejorar la accesibilidad #6511
 - ColorPicker
   - Ahora puede escribir colores en el input #6167
   - Añadidos atributos `size` y `disabled` #7026
   - Añadido atributo `popper-class` #7351
 - Message
   - Ahora el color de los iconos puede ser sustituido por CSS #6207
-  - Añadido atributo  `dangerouslyUseHTMLString`. Cuando está configurado en true, el mensaje será analizado como cadena HTML<sup>*</sup> #6207
+  - Añadido atributo `dangerouslyUseHTMLString`. Cuando está configurado en true, el mensaje será analizado como cadena HTML<sup>*</sup> #6207
   - Atributo `center` agregado para que el contenido pueda ser centrado #6875
 - Notification
   - Añadido atributo `position` para configurar donde aparece Notification #6231
@@ -632,24 +1530,24 @@
 - Rate
   - Añadido el atributo `show-score` para determinar si la puntuación actual se muestra #6295
 - Tabs
-  - Añadido el atributo `tab-position`  #6096
+  - Añadido el atributo `tab-position` #6096
 - Radio
-  - Añadidos los atributos `border` y `size`  #6690
+  - Añadidos los atributos `border` y `size` #6690
 - Checkbox
-  - Añadidos los atributos `border` y `size`  #6690
+  - Añadidos los atributos `border` y `size` #6690
 - Alert
   - Atributo `center` agregado para que el contenido pueda ser centrado #6876
 - Menu
-  - Añadidos los atributos  `background-color`, `text-color` y `active-text-color` #7064
-  - Añadidos los methods  `open` and `close` para abrir y cerrar los SubMenu con programación, #7412
+  - Añadidos los atributos `background-color`, `text-color` y `active-text-color` #7064
+  - Añadidos los methods `open` and `close` para abrir y cerrar los SubMenu con programación, #7412
 - Form
-  - Añadido el atributo  `inline-message`  para determinar si el mensaje de validación se muestra inline #7032
+  - Añadido el atributo `inline-message` para determinar si el mensaje de validación se muestra inline #7032
   - Añadido el atributo `status-icon` para mostrar un icono de retroalimentación cuando se valida #7032
   - Form y FormItem ahora tienen un atributo `size`. Los componentes internos heredarán este tamaño si no se especifica en ellos mismos, #7428
   - Método `validate` devolverá ahora una promesa si se omite la llamada de retorno, #7405
   - Añadido método `clearValidate` para limpiar los resultados de las validaciones de todos los form items, #7623
 - Input
-  - Añadido slots con nombres `suffix` y `prefix` y atributos `suffixIcon` y `prefixIcon`  para añadir contenido dentro del input #7032
+  - Añadido slots con nombres `suffix` y `prefix` y atributos `suffixIcon` y `prefixIcon` para añadir contenido dentro del input #7032
 - Breadcrumb
   - Añadido el atributo `separator-class` para dar soporte a los iconos como separadores de items #7203
 - Steps
@@ -657,7 +1555,7 @@
 - Pagination
   - Añadidos los atributos `prev-text` y `next-text` para personalizar los textos de la página anterior y de la página siguiente #7005
 - Loading
-  - Ahora usted puede personalizar el ícono del spinner y el color de fondo con los props  `spinner` y `background` , #7390
+  - Ahora usted puede personalizar el ícono del spinner y el color de fondo con los props `spinner` y `background` , #7390
 - Autocomplete
   - Añadido atributo `debounce`, #7413
 - Upload
@@ -679,7 +1577,7 @@
   - Añadido un atributo `header-row-style` para el estilo de encabezado
   - Añadido el atributo `header-cell-class-name` para asignar el nombre de la clase para las celdas de encabezado.
   - Añadido el atributo `header-cell-style` a las celdas de encabezado de estilo
-  - El atributo prop de TableColumn ahora acepta las notaciones  `object[key]`
+  - El atributo prop de TableColumn ahora acepta las notaciones `object[key]`
   - Atributo de `index` añadido para TableColumn para personalizar índices de filas
 - Select
   - Añadido el atributo `reserve-keyword` para reservar la palabra clave de búsqueda actual después de seleccionar una opción.
@@ -687,8 +1585,8 @@
 #### Bug fixes
 
 - DatePicker
-  -  Arreglado  `v-model`  que devolvia el segundo día de la semana seleccionada en modo week #6038
-  -  Arreglado el primer input comenzaba borrado con el type `daterange`  #6021
+  - Arreglado `v-model` que devolvia el segundo día de la semana seleccionada en modo week #6038
+  - Arreglado el primer input comenzaba borrado con el type `daterange` #6021
 - DateTimePicker
   - Arreglado DateTimePicker y TimePicker que se afectaban entre sí cuando se seleccionaban #6090
   - Arreglado la hora y el segundo podian estar más allá del límite al seleccionar el tiempo #6076
@@ -699,9 +1597,9 @@
 - Select
   - Rendimiento mejorado. Ahora Vue dev-tool no se bloqueará cuando un gran número de Selects sean destruidos #6151
 - Table
-  - Corregido un bug de Table permanecía oculto cuando su elemento padre tenia el atributo   `display: none`
+  - Corregido un bug de Table permanecía oculto cuando su elemento padre tenia el atributo `display: none`
   - Arreglado Table ahora amplia su ancho cuando el elemento padre tiene `display: flex`
-  - Arreglado un bug que corregía las columnas de una tabla con slot con nombre  `append`   que  desaparecia cuando los datos eran recuperados dinámicamente.
+  - Arreglado un bug que corregía las columnas de una tabla con slot con nombre `append` que desaparecia cuando los datos eran recuperados dinámicamente.
   - Arreglado el atributo `expand-row-keys` que no funcionan con el valor inicial
   - Fallo del filtro corregido al actualizar los datos
   - Se ha corregido un error de cálculo de la disposición de columnas fijas con cabeceras agrupadas.
@@ -713,11 +1611,11 @@
 - General
   - Eliminado `theme-default`
   - Compatible con Vue 2.5.2+ e IE 10+
-  - Evento `change`  de componentes del formulario y evento `current-change` de Pagination ahora sólo se activa en la interacción del usuario.
+  - Evento `change` de componentes del formulario y evento `current-change` de Pagination ahora sólo se activa en la interacción del usuario.
   - El atributo `size` del botón y los componentes del formulario aceptan ahora los tamaños `medium`, `small` y `mini`.
-  - Para facilitar el uso de iconos de terceros, los atributos `icon` de Button y Steps y los atributos  `prefix-icon` y `suffix-icon`  del input ahora requieren un nombre de clase completo.
+  - Para facilitar el uso de iconos de terceros, los atributos `icon` de Button y Steps y los atributos `prefix-icon` y `suffix-icon` del input ahora requieren un nombre de clase completo.
 - Dialog
-  - Atributo `size` eliminado. Ahora el tamaño de Dialog se puede configurar con  `width` y `fullscreen`
+  - Atributo `size` eliminado. Ahora el tamaño de Dialog se puede configurar con `width` y `fullscreen`
   - Ahora la visibilidad del Diálogo no puede ser controlada por `v-model`
 - Rate
   - `text-template` a sido renombrado a `score-template`
@@ -726,19 +1624,19 @@
 - Transfer
   - `footer-format` a sido renombrado a `format`
 - Switch
-  - Los atributos que comienzan con `on*` serán analizados en eventos en JSX, haciendo que todos los atributos `on*` de Switch no puedan trabajar en JSX. Por lo tanto, los atributos `on*` se renombran a `active-*`, y por consiguiente los atributos `off-*` se renombran a `inactivado-*`. Este cambio afecta a los siguientes atributos:  `on-icon-class`, `off-icon-class`, `on-text`, `off-text`, `on-color`, `off-color`, `on-value`, `off-value`.
-  - Los atributos `active-text` y `inactive-text`  ahora no tienen valores por defecto.
+  - Los atributos que comienzan con `on*` serán analizados en eventos en JSX, haciendo que todos los atributos `on*` de Switch no puedan trabajar en JSX. Por lo tanto, los atributos `on*` se renombran a `active-*`, y por consiguiente los atributos `off-*` se renombran a `inactivado-*`. Este cambio afecta a los siguientes atributos: `on-icon-class`, `off-icon-class`, `on-text`, `off-text`, `on-color`, `off-color`, `on-value`, `off-value`.
+  - Los atributos `active-text` y `inactive-text` ahora no tienen valores por defecto.
 - Tag
-  - El atributo type acepta ahora  `success`, `info`, `warning` y `danger`
+  - El atributo type acepta ahora `success`, `info`, `warning` y `danger`
 - Menu
-  - Atributo `theme` eliminado. El color de Menu se puede configurar utilizando  `background-color`, `text-color` y `active-text-color`
+  - Atributo `theme` eliminado. El color de Menu se puede configurar utilizando `background-color`, `text-color` y `active-text-color`
 - Input
-  - Atributo `icon` eliminado. Ahora el icono del sufijo puede configurarse usando el atributo  `suffix-icon`  o el slot con nombre `suffix`.
-  - Eliminado el atributo `on-icon-click` y el evento `click`. Ahora para añadir el manejador de clics en los iconos, por favor use los slots con nombre. 
+  - Atributo `icon` eliminado. Ahora el icono del sufijo puede configurarse usando el atributo `suffix-icon` o el slot con nombre `suffix`.
+  - Eliminado el atributo `on-icon-click` y el evento `click`. Ahora para añadir el manejador de clics en los iconos, por favor use los slots con nombre.
   - El evento `change` se comporta ahora como el nativo, que se activa sólo en la perdida del foco o presionando enter. Si necesita responder a las entradas de usuario en tiempo real, puede utilizar el evento `input`.
 - Autocomplete
   - Atributo `custom-item` eliminado. Ahora la plantilla de sugerencias del input se puede personalizar utilizando `scoped slot`
-  - Atributo  `props`  eliminado. Ahora puede utilizar el atributo `value-key` para designar el nombre de la clave del objeto de sugerencia del input para su visualización.
+  - Atributo `props` eliminado. Ahora puede utilizar el atributo `value-key` para designar el nombre de la clave del objeto de sugerencia del input para su visualización.
 - Steps
   - Atributo `center` eliminado
   - Ahora Steps llenara su contenedor padre por defecto
@@ -747,10 +1645,10 @@
 - Table
   - Soporte eliminado para personalizar la plantilla de columnas mediante `inline-template`
   - `sort-method` ahora se alinea con `Array.sort`. Debería devolver un número en lugar de un booleano
-  - El slot `append`  se desplazo fuera del elemento `tbody` para evitar múltiples renderizados.
+  - El slot `append` se desplazo fuera del elemento `tbody` para evitar múltiples renderizados.
   - Evento `expand` se renombro a `expand-change`
-  - Los parametros de los métodos  `row-class-name` y `row-style` son ahora un objeto
+  - Los parametros de los métodos `row-class-name` y `row-style` son ahora un objeto
 
 # #
 
-<i><sup>*</sup> El procesamiento dinámico de HTML arbitrario en su sitio web puede ser muy peligroso porque puede conducir fácilmente a [ataques XSS](https://en.wikipedia.org/wiki/Cross-site_scripting). Por lo tanto, cuando `dangerouslyUseHTMLString` está encendido, por favor asegúrese de que el contenido de `message` es confiable, y **nunca** asigne el `message` al contenido proporcionado por el usuario.</i>
+<i><sup>*</sup> El procesamiento dinámico de HTML arbitrario en su sitio web puede ser muy peligroso porque puede conducir fácilmente a [ataques XSS](https://en.wikipedia.org/wiki/Cross-site_scripting). Por lo tanto, cuando `dangerouslyUseHTMLString` está encendido, por favor asegúrese de que el contenido de `message` es confiable, y **nunca** asigne el `message` al contenido proporcionado por el usuario.</i>``
diff --git a/CHANGELOG.fr-FR.md b/CHANGELOG.fr-FR.md
new file mode 100644
index 00000000000..d1e570f9b7e
--- /dev/null
+++ b/CHANGELOG.fr-FR.md
@@ -0,0 +1,1645 @@
+## Changelog
+
+### 2.13.0
+
+*2019-11-26*
+
+#### New features
+
+- Popconfirm
+  - Add popconfirm component (#17548 by @iamkun)
+
+#### Bug fixes
+
+- BackTop
+  - Use cubic bezier scrolling (by @lon)
+- DatePicker
+  - Fix bug of only select min date of date range problem (#17191 by @smk0621)
+- Select
+  - Fix select test cases (by @msidolphin)
+- Tree
+  - Add font-size for the style of tree empty-text (#17094 by @spengjie)
+- Table
+  - Column header can be costumed (#17291 by @ziyoung)
+  - Update table header cell style (#17284 by @ziyoung)
+  - Fix table header height after filter (#17348 by @ziyoung)
+  - Fixed row-style with display not work (#17002 by @a631807682)
+  - Fix header table not display (#17341 by @ziyoung)
+- Calendar
+  - Import el-button and el-button-group (#17376 by @masongzhi)
+- MessageBox
+  - Fix icon position error (#17410 by @nullptru)
+- TimePicker
+  - Set the selection range after scrolling up or down (#16868 by @mattheyan)
+- Message
+  - Fix close instace offsetHeight（#17564） (#17852 by @gzwgq222)
+- Form
+  - Callback of validateField should be optional (#17314 by @CarterLi)
+- Cascader
+  - Fix TypeScript 3.7 compatibility (#17881 by @CarterLi)
+- Menu
+  - Fix router NavigationDuplicated error when using vue-router@^3.1.0 (#17269 by @iamkun)
+- Dropdown
+  - Update type file (#17550 by @iamkun)
+- Progress
+  - Add strokeLinecap prop (#17552 by @iamkun)
+- InfiniteScroll
+  - Skip trigger event on invisible element (#17553 by @iamkun)
+- Image
+  - Perfect picture preview behavior (#16985 by @luckyCao)
+  - Fix shield the page when preview big image (#16796 by @luckyCao)
+- Drawer 
+  - Bugfix drawer-append-to-body-not-working (#16953 by @JeremyWuuuuu)
+- Select
+  - Fix tag show value or empty issue (17199 by @luckyCao)
+- Scrollbar
+  - Fix FireFox scroll bar width (#18091 by @iamkun)
+  
+#### Optimization
+
+- I18n
+  - Update sv-SE.js (#17926 by @FOLLGAD)
+  - Update avatar component fr doc (#17762 by @blombard)
+- Docs
+  - Fix time-select typo (#17250 by @wacky6)
+  - Fix Drawer attribute accepted value typo in es (#17122 by @haoranyu)
+  - Update Spanish changelog 2.12.0 (#17364 by @Gonzalo2310)
+  - Fix Changelog typo (#17874 by @renlixin)
+  - Fix Loading demo (#17862 by @MBearo)
+  - Add input event in input Events Table (#18061 by @zhouxinyong)
+  - Delete Input repeat change event (#18085 by @zhouxinyong)
+
+### 2.12.0
+
+*2019-08-29*
+
+#### New features
+
+- Popover
+  - Add close-delay prop (#16671 by @LachlanStuart)
+- Theme
+  - Add Chrome Extension: Element Theme Extension (#16686 by @iamkun)
+- Icon
+  - Add font-display to @font-face declaration (#16805 by @iamfaizalandyka)
+
+#### Bug fixes
+
+- Carousel
+  - Fix onChange emit value (#16705 by @iamkun)
+- Notification
+  - Fix modifying incoming option object (#16704 by @iamkun)
+- DatePicker
+  - Add className for picker option (#16632 by @iamkun)
+- DateTimePicker
+  - Fix time-spinner not scroll to right position (#16854 by @jesse-li)
+- Table
+  - Prevent click handler after drag (#16850 by @ziyoung)
+  - Fix chrome crash when set thead css display to none (#16956 by @luckyCao)
+  - Fix wrong empty block height (#16861 by @ziyoung)
+  - Not throw error when calling toggleExpansion (#16304 by @yyjjqq94)
+  - Not trigger sort-change event when mounted (#17113 by @a631807682)
+  - Fix setCurrentRow unable to clear highlight row (#16879 by @ziyoung)
+  - Fix expand-row-keys not work when data is loaded asynchronously (#16899 by @ziyoung)
+  - set toggleAllSelection as instance property (#17137 by @ziyoung)
+- Tree
+  - Fix distance between label and checkbox (#16799 by @Hazlank)
+- Tabs
+  - Fix incorrect TabItem's position (#16520 by @victorting)
+  - Fix activated tab is out of visual range bug (#17033 by @nullptru)
+- Calendar
+  - Fix weekdays i18n issue (#16772 by @ubitoffee)
+  - fix locale error by (#17208 by @iamkun)
+- Cascader
+  - Fix CascaderPanel display error (#16716 by @zhangHongEn)
+  - Fix disable status and close button issue (#16224 by @yyjjqq94)
+- Input
+  - Fix Korean composition event (#15069 by @MoonHyuk)
+  - Fix click event of clear button not trigger when using v-loading (#16576 by @a631807682)
+- Select
+  - Not toggle dropdown when filtering (#17205 by @luckyCao)
+- Transfer
+  - Fix style error  (#17206 by @iamkun)
+- Dialog
+  - update sass var (#16365 by @haoranyu)
+- RadioGroup
+  - Not produce invalid HTML in table if "is" attribute is specify (#17070 by @nullptru)
+- Divider
+  - Support custom classes (#17078 by @island205)
+
+#### Optimization
+
+- Checkbox
+  - Improve screen reader experience (#16575 by @tylertrotter)
+- Docs
+  - Update changelog (#16773 by @SimonaliaChen)
+  - Update contributing guide (#14800 by @sinchang)
+  - Fix typo in Drawer docs (#16848 by @winkay)
+  - Update custom theme (#16983 by @iamkun)
+  - Add Esperanto translation (#16955 by @maxkoryukov)
+  - Update input-number document about change event (#16316 by @luckyCao)
+  - Update spanish doc 2.11.1 (#16961 by @Gonzalo2310)
+- I18n
+  - Remove translation of 'year' in catalan language as in the other languages (#14722 by @oscaralbareda)
+  - Update spanish changelog 2.10.0 and 2.10.1 (#16548 by @Gonzalo2310)
+  - Update ar.js (#16653 by @l3op)
+- Test
+  - Correct spelling error (#16672 by @boomler)
+  - Refactor unit test to use data-uri (#16847 by @a631807682)
+- Types
+  - Fix httprequest type (#16633 by @luckyCao)
+
+### 2.11.1
+
+*2019-07-26*
+
+#### Bug fixes
+
+- Image
+  - Fix Image component SSR compatibility (#16737 by @luckyCao)
+- Chore
+  - Update dart-sass compatibility (#16744 by @LewisChennnnn)
+
+### 2.11.0
+
+*2019-07-25*
+
+#### New features
+
+- Drawer
+  - Add drawer component (#16577 by @JeremyWuuuuu)
+
+#### Bug fixes
+
+- Checkbox
+  - Enhance css selector (#16006 by @Hazlank)
+- Tree
+  - Make el-tree generic (#15934 by @JeremyWuuuuu)
+  - Set isCurrent prop to False (#15870 by @kkkisme)
+- Dropdown
+  - Fix split-button caret default color (#15931 by @JuniorTour)
+- Cascader
+  - Fix level 1 children is empty update problem (#16399 by @luckyCao)
+  - Add sets default values when lazy is true (#16420 by @luckyCao)
+  - Fix display errors when node value is duplicate (#15935 by @junyiz)
+  - Expose getCheckedNodes and fix options change bug (#16709 by @SimonaliaChen)
+- Calendar
+  - Display correct header when range is specified (#16354 by @ziyoung)
+- Submenu
+  - Fix prop append-to-body (#16289 by @a631807682)
+- Table 
+  - Fix tree table when updating data (#16481 by @island205)
+- Select
+  - Fix memory leak issue (#16463 by @island205)
+- InfiniteScroll
+  - Update naming & doc (#16698 by @iamkun)
+- Avatar
+  - Fix image not center vertically issue (#16489 by @luckyCao)
+- Dialog
+  - Add destroyOnClose attribute (#16455 by @ziyoung)
+- Image
+  - Add big Image preview feature (#16333 by @luckyCao)
+
+#### Optimization
+
+- Docs
+  - Fix dropdown demo (#16193 by @webxmsj)
+  - Fix typo in table documents (#15971 by @howiefh)
+- I18n
+  - Update translation of Thai language (#16689 by @ponkrit)
+- Chore
+  - Update theme base api (#16607 by @iamkun)
+  - Add form theme token (#16699 by @iamkun)
+  - Mark ali inner user's access (#16609 by @iamkun)
+  - Fix doc anchor bug (#16692 by @iamkun)
+
+### 2.10.1
+
+*2019-07-02*
+
+#### Bug fixes
+
+- Table
+  - Fix sort icon (#15439 by @bezany)
+  - Fix layout breaks when append slot exists (#16332 by @ziyoung)
+  - Fix showOverflowTooltip not reactive (#16295 by @a631807682)
+  - Register scrollbar in filter-panel (#16246 by @ziyoung)
+- Chore
+  - Fix 2.9 docs (#16233 by @ziyoung)
+  - Fix index page theme intro english css style issue (#16254 by @iamkun)
+
+#### Optimization
+
+- Tag
+  - Compatible with IE (#16334 by @ziyoung)
+- Chore
+  - Update Dingtalk Group QR image (#16236 by @iamkun)
+- Doc
+  - Update online theme roller doc (#16244 by @iamkun)
+
+### 2.10.0
+
+*2019-06-25*
+
+#### New features
+
+- I18n
+  - Added Uzbek language (#15796 by @ogabek96)
+- Calendar
+  - Add first-day-of-week attribute (#16047 by @ziyoung)
+- Avatar
+  - Add avatar component (#16144 by @luckyCao)
+- Upload:
+  - Add capability to customize thumbnail template (#13192 by @victorzhuk)
+
+#### Bug fixes
+
+- Tree
+  - Not highlight tree node when currentKey is null (#15668 by @yyjjqq94)
+  - Fix issue #15538 caused by two Tree sharing the same data. (#15615 by @VanMess)
+- Upload
+  - Update the parameter `fileList` type (#15716 by @underfin)
+- Table
+  - Fix loading icon not display (#15868 by @ziyoung)
+  - Fix background color of complex table when hovering (#15504 by @cnlon)
+  - Fix current-row-key and select event bug (#15983 by @ziyoung)
+  - Height accepts more units (#16013 by @ziyoung)
+  - Fix reserve-selection not work (#16135 by @ziyoung)
+- Docs
+  - Fix Divider attribute type in zh-cn (#15889 by @haoranyu)
+- Menu
+  - Fixed submenu hidden bug after adding popper-append-to-body (#15391 by @PanJiaChen)
+- Select
+  - Fix initialInputHeight (#15989 by @yyjjqq94)
+  - Fix default-first-option behavior when typing Chinese (#15431 by @VanMess)
+  - fix double import problem (#16215 by @lengband)
+- Message
+  - Add type def for offset option (#16027 by @matjaz)
+- Timeline
+  - Fix reverse broken (#16091 by @ziyoung)
+- Slider
+  - Fix #15545 by adding explains about "input" event in Chinese (#15588 by @VanMess)
+- InfiniteScroll
+  - Update package name (#16125 by @iamkun)
+- MessageBox
+  - Fix  distinguishCancelAndClose action not same as docs bug (#15438 by @qingdengyue)
+- PopupManager
+  - Fix z-index cannot be rewritten at first using (#15738 by @luckyCao)
+- Docs
+  - Delete an incorrect closing html tag and empty block code (#16194 by @Alexeykhr)
+- Chore
+  - Update test api host (#15807 by @iamkun)
+
+#### Optimization
+
+- Tree
+  - Modify loop conditions to improve performance (#15699 by @KingJeason)
+- Theme
+  - Refine GA track & Update footer link forward to online theme roller (#16007 by @island205)
+- Badge
+  - Update badge prop check (#16198 by @iamkun)
+- Avatar
+  - Update theme config var (#16202 by @luckyCao)
+- I18n
+  - Update pt-br.js (#15776 by @gigioSouza)
+  - Update Farsi translation (#15881 by @pamenary)
+- Docs
+  - Add missing components in quickstart (#16063 by @pape2016)
+  - Update french translation (#16208 by @blombard)
+  - Add description $slots.default (#15444 by @Alexeykhr)
+  - Update Spanish Doc 2.9.1 (#15840 by @Gonzalo2310)
+  - Fix spelling mistakes in fr (#15837 by @blombard)
+  - Update changelog 2.9.2 Spanish (#16185 by @Gonzalo2310)
+
+#### Breaking changes
+
+- Form
+  - Remove success status (#16159 by @ziyoung)
+
+### 2.9.2
+
+*2019-06-21*
+
+#### Correction de bugs
+
+- Chore
+  - Correction du fichier de définitions TS (#15805 by @NateScarlet)
+
+### 2.9.1
+
+*2019-05-30*
+
+#### Nouvelles fonctionnalités
+
+- Table
+  - les événements tree-props，default-expand-all, expand-row-keys, toggle-row-expansion method and expand-change sont pris en charge dans Tree Table (#15709 by @ziyoung)
+
+#### Correction de bugs
+
+- Table
+  - Correction de quelques bugs (#15709 by @ziyoung)
+- Theme
+  - Mise à jour de l'hôte api (#15784 by @iamkun)
+
+#### Optimisation
+
+- Chore
+  - Mise à jour de InfiniteScroll type (#15794 by @iamkun)
+
+### 2.9.0
+
+*2019-05-30*
+
+#### Nouvelles fonctionnalités
+
+- Backtop
+  - Ajout du composant Backtop (#15541 by @iamkun)
+- PageHeader
+  - Ajout du composant PageHeader (#15714 by @ziyoung)
+- InfiniteScroll
+  - Ajout de la directive InfiniteScroll (#15567 by @iamkun)
+- Cascader
+  - Ajouter plusieurs mode et filter-method (#15611 by @SimonaliaChen)
+- Message
+  - Affichage en mode pile (#15639 by @island205)
+- Tag
+  - Ajout d'un effet de prop (#15725 by @SimonaliaChen)
+- Tabs
+  - Aligner le titre à gauche lorsque le type est carte (#15695 by @luckyCao)
+- DatePicker
+  - Supporte les chaînes de caractères littérales (#15525 by island205)
+- Image
+  - Ajout du support pour les attributs de transmission et listeners (#15578 by @VanMess)
+- Theme
+  - Ajout d'un popup en arrière plan (#15412 by @iamkun)
+- Chore
+  - Mise à jour de la nouvelle page d'index 2.9.0 (#15682 by @iamkun)
+
+#### Correction de bugs
+
+- Table
+  - Correction du comportement de sort-change lorsque la condition de tri est nulle (#15012 by @joelxr)
+- Image
+  - Correction de la compatibilité ssr et object-fit (#15346 by @SimonaliaChen)
+- Input
+  - Correction du style de show-word-count dans el-form (#15359 by @lvjiaxuan)
+  - Correction de l'icône d'erreur pas centrée (#15354 by @YiiGuxing)
+- Calendar
+  - Correction du mauvais jour de la semaine quand le jour est dimanche (#15399 by @qingdengyue)
+  - Correction du bug de disparition d'octobre (#15394 by @qingdengyue)
+- Tabs
+  - Correction de l'onglet de base imbriqué dans l'erreur de remplissage de card (#15461 by @SimonaliaChen)
+- Tag
+  - Correction du problème de propagation d'arrêt (#15150 by @infjer)
+- Form
+  - Correction de input-group dans l'erreur de hauteur de form-item (#15457 by @SimonaliaChen)
+  - Résolution de l'issue de resetFields (15181 by @luckyCao)
+- Tooltip
+  - Correction de tabindex personnalisé ne fonctionnant pas (#15619 by @SimonaliaChen )
+- Link
+  - Correction de la classe de style d'icône (#15752 by @iamkun)
+- Select
+  - Revert définit la valeur à null une fois effacée (#15447 by @iamkun)
+- Loading
+  - Résolution du problème de mise à jour de dom lorsque l'état de chargement change rapidement (#15123 by @FAKER-A)
+- Switch
+  - Label avec les événements récurrents el-switch (#15178 by @FAKER-A)
+- Slider
+  - Correction d'un problème de style lorsque la barre de défilement est cliquée (#15561 by @luckyCao)
+- Radio
+  - Résolution de l'issue 14808 (#14809 by @OverTree)
+- Form
+  - Résolution du problème de resetFields (15181 by @luckyCao)
+- Chore
+  - Mise à jour des dépendances et corrige le bug de démonstration (#15324 by ziyoung)
+- Type
+  - Correction du type de chargement (#15635 by @iamkun)
+  - Correction du type d'icône (#15634 by @iamkun)
+  - Fixe la définition du type de lien (#15402 by @iamkun)
+
+#### Optimisation
+
+- Cascader
+  - Refactor (#15611 by @SimonaliaChen)
+- Chore
+  - Mise à jour de la logique du nouveau composant (by @iamkun)
+- Docs
+  - Renommage de variables dans la documentation (#15185 by @liupl)
+  - Correction du type d'attribut d'image et de la valeur par défaut (#15423 by @haoranyu)
+  - Correction d'un bug de formulaire (#15228 by @SHERlocked93)
+
+### 2.8.2
+
+*2019-04-25*
+
+#### Corrections de bugs
+
+- Icon
+  - Mise à jour (#15272 par @iamkun)
+- Docs
+  - Correction du style de Form et Input (#15273 par @ziyoung)
+
+### 2.8.1
+
+*2019-04-25*
+
+#### Corrections de bugs
+
+- Icon
+  - Mise à jour de l'icône du cascadeur et du select (#15264 par @SimonaliaChen)
+  - Mise à jour (#15258 #15268 par @iamkun)
+
+#### Optimisation
+
+- Chore
+  - Mise à jour du script de build (#15267 par @ziyoung)
+- Docs
+  - Correction de la couleur de souslignage d'un lien (#15265 par @iamkun)
+- Autre
+  - Correction d'une configuration de migration non compatible avec les propriétés et évènements en camelCase (#15260 par @SimonaliaChen)
+
+### 2.8.0
+
+*2019-04-25*
+
+#### Nouvelles fonctionnalités
+
+- Divider
+  - Ajout du composant divider (#15055 par @island205)
+- Rate
+  - Ajout des couleurs et des classes d'icônes personnalisées en passant un objet (#15051 par @SimonaliaChen)
+- Link
+  - Ajout du composant Link (#15052 par @iamkun)
+- Calendar
+  - Ajout du composant calendar (#14908 by @ziyoung)
+- Icon
+  - Ajout d'une icône (#15214 par @iamkun)
+- Alert
+  - Ajout d'un thème sombre (#15041 par @island205)
+- Image
+  - Ajout du composant image (#15117 par @SimonaliaChen)
+- Collapse
+  - CollapseItem peut être désactivé (#15076 par @ziyoung)
+- Carousel
+  - Ajout d'un attribut de direction et support de la direction verticale (#15122 by @ziyoung)
+- Pagination
+  - Ajout d'un attribut caché sur une seule page (#15096 par @ziyoung)
+- Slider
+  - Ajout des marqueurs (#15133 par @luckyCao)
+- Input
+  - Ajout de l'attribut show-word-count (#15075 par @luckyCao)
+- InputNumber
+  - Ajout de l'attribut step-strictly (#15050 par @luckyCao)
+- Tooltip, Dropdown, Popover
+  - Support de l'attribut tabindex (#15167 by @ziyoung)
+
+#### Corrections de bugs
+
+- Notification
+  - Correction du word-break du titre (#15008 par @iamkun)
+- Form
+  - Correction d'une erreur dans les règles de validation (#14985 par @luckyCao)
+  - Correction du style du label (#14969 par @ziyoung)
+  - Les FormItem requis affiche un astérisque lorsque le label est auto (#15144 by @ziyoung)
+- Pagination
+  - Fix du slot non mis à jour (#14711 par @lucyhao)
+- Table
+  - Correction d'un bug de chargement en mode lazy (#15101 by @ziyoung)
+  - Correction de la largeur des cellules lorsque colspan est supérieur à 1 (#15196 by @ziyoung)
+  - Amélioration des performances (#14868 by @ziyoung)
+  - Ne pas émettre de déclencheurs de changement de tri pendant l'initialisation (#14625 by @PeanutWatson)
+  - Comportement égal pour height et max-height (#14660 by @arthurdenner)
+- Dialog
+  - Correction de la casse des longs mots (#15027 par @iamkun)
+- Alert
+  - Mise à jour (#15186 par @ziyoung)
+- Tabs
+  - Correction d'un problème où le rejet d'une promesse touchait l'application (#14816 par @ffxsam)
+  - Rerendu lors d'un changement de slots (#1523238 by @ziyoung)
+- Message
+  - Mise à jour (#14968 par @agoni121212)
+- Select
+  - Correction d'une erreur lorsque la valeur est indéfinie ou nulle (#15022 par @luckyCao)
+- Tree
+  - Détruire le noeud courant après sa suppression (#14604 par @sinchang)
+  - Amélioration des performances (#14881 par @ChenZhuoSteve)
+- Dropdown
+  - Correction de style (#14907 par @doing123)
+- Slider
+  - Correction d'un bug clavier a11y cassé (#14792 by @erezsob)
+- Menu
+  - La valeur ActiveIndex sera nulle si defaultIndex n'existe pas (#14074 par @hoythan)
+- Directive
+  - RepeatClick : utilisation de Date.now() au lieu de Date() (#14776 par @pavelmash)
+- Upload
+  - Correction du style d'affichage des images transparentes (#15039 par @iamkun)
+- Thème
+  - Ajout d'une bordure (#1525256 par @iamkun)
+
+#### Optimisation
+
+- Chore
+  - Mise à jour du changelog zh-cn (#14965 par @iamkun)
+  - Masquer la description de la démo quand elle est vide (#15014 par @ziyoung)
+  - Afficher les informations du serveur de développement par défaut par @iamkun)
+  - Correction d'une erreur de changelog 2.6.0 (#15026 par @iamkun)
+  - Mise à jour de la configuration de compilation (#14821 par @abc3660170)
+  - Ajout d'hmr (#15221 par @SimonaliaChen)
+  - Utilisation de sourcemap dans l'environnement dev (#15087 par @ibufu)
+Docs
+  - Renommage de la variable dans docs (#14602 #15003 #15094 #15105 par @liupl)
+  - Correction d'une erreur de téléchargement de doc (#15023 par @iamkun)
+  - Mise à jour du validateur de formulaire personnalisé doc (#15040 par @iamkun)
+  - Mise à jour des onglets docs pour afficher les onglets verticaux (#15053 par @iamkun)
+  - Utiliser eleme.cn comme domaine (#15139 par @ziyoung)
+  - Correction du nom de route Image (#15194 par @iamkun)
+  - Suppression de la traduction en double (#15207 par @iamkun)
+
+#### Breaking changes
+
+- Rate
+  - Correction du support de l'affichage décimal en mode désactivé (#15089 par @haoranyu)
+- Select
+  - Utiliser le label de l'option pour régler le placeholder en mode filtre (#14989 par @ibufu)
+
+### 2.7.2
+
+*2019-04-03*
+
+#### Corrections de bugs
+
+- Form
+  - Correction du style de `label-width` auto (#14955 par @ziyoung)
+
+#### Optimisation
+- Docs
+  - Correction d'une erreur de lien img (#14957 par @iamkun)
+- Chore
+  - Correction d'une erreur de déploiement mkdir (#14952 par @iamkun)
+
+### 2.7.1
+
+*2019-04-03*
+
+#### Corrections de bugs
+
+- Select
+  - Définir la valeur à null lorsqu'elle est effacée (#14322 par @aaronfulkerson)
+- Input
+  - Mise à jour des valeurs dépendantes du DOM lors d'un changement de type (#14889 par @wacky6)
+- Table
+  - Faire fonctionner `defaultExpandAll' lorsqu'une colonne étendue existe (#14935 par @ziyoung)
+- Dialog
+  - Couleur d'arrière-plan configurable (#14939 par @ziyoung)
+- Form
+  - `label-width` supporte la largeur automatique (#14944 by @ziyoung)
+
+#### Optimisation
+- Docs
+  - Mise à jour de la documentation en espagnol (#14913 par @Gonzalo2310)
+  - Ajout d'un document en français pour le nouveau composant (#14924 by @ziyoung)
+  - Optimiser la documentation des onglets (#14938 by @ziyoung)
+
+### 2.7.0
+
+*2019-03-28*
+
+#### Nouvelles fonctionnalités
+
+- Table
+  - Ajout du support de l'arborescence des données (#14632 by @ziyoung)
+
+#### Corrections de bugs
+
+- Tabs
+  - Utilise la couleur primaire comme couleur de l'ombre (#14558 par @Richard-Choooou)
+  - Rerendu lorsque label change (#14496 par @akki-jat)
+- Table
+  - Le pied de page suit l'alignement des cellules du corps (#14730 by @ziyoung)
+- NavMenu
+  - Correction d'un bug de clic sur el-submenu (#14443 par @PanJiaChen)
+- Dropdown
+  - Compatible avec la nouvelle syntaxe v-slot 2.6 (#14832 by @ziyoung)
+- ColorPicker
+  - Correction d'une erreur de couleur hexadécimale (#14793 par @iamkun)
+- Tree
+  - Revert pr #13349 (#14847 par @ziyoung)
+- Tooltip
+  - Affichage lorsque la valeur initiale est vraie (#14826 by @ziyoung)
+- Docs
+  - Mise à jour de la documentation du cascader (#14442 par @panhezeng)
+- Style
+  - Correction des media queries dans sm-only, md-only, lg-only (#14611 by @sinchang)
+
+#### Optimisation
+
+- Chore
+  - Ajouter la description de la page web (#14802 par @iamkun)
+
+### 2.6.3
+
+*2019-03-21*
+
+#### Corrections de bugs
+
+- Correction du style de la démo de Cascader (#14789 par @ziyoung)
+- Suppression des opérations DOM inutiles (#14788 by @ziyoung)
+- Correction DatePicker valeur par défaut DST (#14562 par @wacky6)
+
+### 2.6.2
+
+*2019-03-21*
+
+##### Nouvelles fonctionnalités
+
+- DatePicker
+  - Ajout d'une plage de mois pour l'attribut type (#14487 par @zxyRealm)
+- i18n
+  - Ajout de la locale croate (#14360 par @danijelh)
+
+##### Corrections de bugs
+
+- Input
+  - Correction d'un régression (#14572 par @wacky6)
+- DatePicker
+  - Correction du calcul du premier jour de la semaine (#14523 par @sinchang)
+  - Correction du format de valeur du sélecteur de semaine (#13754 par @wacky6)
+- Steps
+  - Correction du problème #14502 (#14596 par @sinchang)
+  - Correction du style avec le thème simple (#14610 par @sinchang)
+- Docs
+  - Mise à jour de la doc française pour la 2.6.1 et correction de fautes de frappe (#1455555 par @smalesys)
+  - Renommage d'une variable dans la documentation de la table (#14587 par @likwotsing)
+  - Ajout de l'index de recherche en français (#14565 par @iamkun)
+  - Correction du style de la page TimePicker (#14579 par @ziyoung)
+  - Renommage d'une variable dans la page Upload (#14593 par @liupl)
+  - Mise à jour de la traduction française (#14643 par @smalesys)
+  - Mise à jour de la documentation du validateur de formulaire asynchrone (#14694 par @iamkun)
+  - Correction d'une erreur de doc tooltip (#14748 par @iamkun)
+  - Correction d'une coquille (#14751 par @2bj)
+  - Correction de la surbrillance pour Webkit touch (#14703 by @VladG0r)
+
+##### Optimisation
+
+- Tâche
+  - Mise à jour du script de build dans le ci (#14600 par @ziyoung)
+  - Mise à jour du tracking ga (#14560 par @iamkun)
+  - Ajout d'un événement ga supplémentaire (#14633 par @iamkun)
+  - Mise à jour du groupe de discussion (#14741 par @iamkun)
+  - Mise à jour des deps de test et conf (#14735 par @wacky6)
+  - Mise à jour de Gulp (#14745 by @ziyoung)
+  - Utilisez le codepen pour afficher les démos et correction d'une erreur de doc (#14747 by @ziyoung)
+
+### 2.6.1
+
+*2019-03-03*
+
+#### Corrections de bugs
+
+- **Ne pas spécifier la version de node** (par @iamkun dans #14546)
+- Correction du répertoire doc dans `deloy-faas.sh` (par @ziyoung dans #14553)
+- Correction d'un problème de style de date dans le changelog de la 2.6.0 (par @island205 dans #14547)
+- Correction d'une typo dans la doc (par @wack6 dans #14552)
+
+### 2.6.0
+
+*2019-03-01*
+
+#### Nouvelles fonctionnalités
+- Timeline
+  - Ajout d'un composant timeline (par @jikkai dans #14248)
+- DropdownItem
+  - Ajout de la propriété `icon` à `el-dropdown-item` (par @gabrielboliveira dans #14088)
+- Input
+  - Ajout de propriétés pour afficher les mots de passe (par @phshy0607 dans #13966)
+- Select
+  - Ajout du slot `empty` (par @elfman au #13785)
+- Autocomplete
+  - Ajout de la propriété `highlight-first-item` (par @YamenSharaf dans #14269)
+- I18n
+  - Création de la locale Arménienne (par @hamletbarsamyan dans #14214)
+- Docs
+  - Traduction française (par @smalesys dans #12153, #14418, #14434)
+
+#### Optimisation
+- Alert
+  - Mise à jour de la classe du slot par défaut de la description de Alert (par @iamkun dans #14488)
+- Input
+  - Mise à jour de l'input de type password (par @iamkun dans #14480)
+- InputNumber
+  - Retrait d'un parseFloat inutile (par @JuniorTour au #14172)
+- Menu
+  - Ajout du support de `el-menu-item` sans index (par @georgyfarniev dans #13298)
+- Table
+  - Suppression de certaines opérations du DOM (par @elfman dans #13643)
+- Upload
+  - Optimisation du code (par @elfman dans #13973)
+- Popup
+  - Optimisation du code (par @KAionro dans #14413)
+- Docs
+  - Ajout de détails sur la façon d'exécuter le mode play pour les contributeurs (par @island205 dans #14355)
+  - Ajout d'un avertissement concernant Input (par @wacky6 dans #14463)
+  - Mise à jour de la doc de Table (par @luguokong dans #14329)
+  - Mise à jour de la doc d'Input (par @iamkun dans #14437)
+  - Mise à jour de la doc sur le thème (par @wangguohaohao dans #14297)
+  - Le style de l'icône change lorsque vous passez dessus (par @tuxinghuan dans #14295)
+- Build
+  - Minification du CSS et du JS pour le site d'Element (par @iamkun dans #14430)
+  - Accélération de webpack (par @hetech dans #14484)
+  - Utilisation du cli pour sélectionner la version de publication (par @hetech dans #14354)
+- Installation de stale pour la gestion des issues (par @island205 dans #14392)
+
+#### Corrections de bugs
+- Menu
+  - Correction d'un bug de focus des sous-menus lors du changement d'onglet du navigateur (par @liupl dans #13976)
+- MessageBox
+  - Correction de la définition du type (par @NateScarlet dans #14278)
+- ScrollBar
+  - Empêche le clic droit sur le bouton du pouce (par @xifeiwu dans #14196)
+- Switch
+  - Déclenchement de la validation du formulaire si la valeur change (par @hetech dans #14426)
+- Table
+  - La méthode toggleAllSelection est maintenant une méthode d'instance (par @letanure dans #14075)
+- Tabs & Dropdown
+  - Correction du style (par @hetech dans #14452)
+- Tree
+  - Les tips sont différents des tableaux (par @ColinCll dans #14331)
+- Docs
+  - Correction d'une erreur de doc du DatetimePicker (par @iamkun dans #14290)
+  - Problème d'orthographe dans la documentation du DatePicker (par @helmut dans #14481)
+  - Correction du style de la doc de Pagination(par @liuchuzhang dans #14451)
+
+#### Breaking changes
+- Table
+  - Fix params order of row events (by @jikkai in #12086)
+
+### 2.5.4
+
+*2019-02-01*
+
+#### Corrections de bugs
+
+- Build: Correction d'un problème de configuration de babel qui cassait la transition collapse (par @island205 dans #14282)
+
+### 2.5.3
+
+*2019-01-31*
+
+#### Optimisation
+
+- Optimisation du code de Message (par @vok123 dans #14029)
+- Suppression des gh-pages (par @ziyoung dans #14266)
+- Ajout du lien IssueHunt (par @island205 dans #14261)
+
+#### Corrections de bugs
+
+- Correction d'une erreur du module UMD côté serveur (par @island205 dans #14242)
+- Correction du style du TabBar actif (par @iamkun dans #14240)
+- Correction d'une erreur de code dans la démo de Table (par @xunmeng dans #14253)
+
+### 2.5.2
+
+*2019-01-27*
+
+#### Optimisation
+- Docs:
+  - Mise à jour du ChangeLog ES 2.5.1 (par @Gonzalo2310 dans #14231)
+
+#### Corrections de bugs
+- Build:
+  - Suppression des commentaires non supprimés dans le module umd `lib/index.js` (par @island205 dans #14233)
+  - Correction d'une erreur d'exportation dans le module commonjs utilisé dans nuxt.js (par @island205 dans #14232)
+  - Correction des problèmes de build 2.5.1 (par @iamkun dans #14228)
+
+### 2.5.1
+
+*2019-01-26*
+
+#### Optimisation
+- DatePicker: surbrillance du mois et de l'année courants (par @Debiancc dans #14211)
+- Mise à jour du changelog 2.5.0 (par @wacky6 dans #14217)
+
+#### Corrections de bugs
+- Correction d'un problème d'exportation due par la mise à jour du webpack (par @island205 dans #14220)
+- Conservation de la docs 2.4.11 && nouveau sous-dossier pour 2.5+ (par @iamkun dans #14222)
+
+### 2.5.0
+
+*2019-01-25*
+
+#### Nouvelles fonctionnalités
+- DatePicker
+  - Ajout de l'attribut `validate-event` (par @ziyoung dans #13531)
+- DateTimePicker
+  - `pickerOptions` supporte l'option `selectableRange` (par @eeeeeeeeeeeason)
+- Tag
+  - Ajout de l'événement `click` (par @licdream dans #14106)
+- I18n
+  - Support de la langue kirghize (par @zzjframework dans #14174)
+
+#### Optimisation
+- Mise à niveau vers webpack@4 (par @jikkai dans #14173)
+- Input
+  - Simplification de l'implémentation, suivant un flux de données à sens unique. Correction de plusieurs bugs liés. (par @wacky6 dans #13471)
+- Mise à jour du fichier Axure avec de nouveaux composants (par @ziyoung dans #13773)
+
+#### Corrections de bugs
+- Autocomplete
+  - Correction de la dernière ligne du menu déroulant qui était coupée (#13597) (par @ziyoung)
+  - Correction d'une flèche de popper manquante (#13762) (par @liuchuzhang)
+- Carrousel
+  - Nettoyage du timer lorsque le composant est détruit (#13820) (par @elfman)
+- Cascader
+  - Suppression de la propriété obsolète des props calculées (#13737) (par @iamkun)
+  - Correction de la définition du type CascaderOption dans TypeScript (#13613) (par @NateScarlet)
+  - Correction de l'icône couvrant le texte (#13596) (par @ziyoung)
+- Checkbox
+  - Refonte du style (par @PanJiaChen)
+- DatePicker
+  - Ajout d'un `key` de v-for manquant dans TimeSpinner (#13547) (par @Ende93)
+  - Correction du surlignage de la semaine dans la bordure de l'année (#13883) (par @suyi91)
+- Input
+  - Correction de la référence de textarea dans le DOM (#13803) (par @laomu1988 @island205)
+- Pagination
+  - La valeur d'entrée ne sera pas inférieure à 1 (#13727) (par @elfman)
+- Popover
+  - Correction d'un problème de popover avec le déclencheur de hover (#13104) (par @goldengecko)
+  - Correction d'une fuite de mémoire de l'instance popper (#13988) (par @qpxtWhite)
+- Radio
+  - Refonte du style (par @ohhhoney1)
+- Table
+  - Amélioration du tri des tables en cliquant sur la flèche de tri (#12890) (par @ohhoney1)
+  - Correction d'un problème d'alignement vertical du texte vide sur IE10+ (#13638) (par @imzjy)
+  - Correction de la documentation sur le type d'index (#13628) (par @ilovefafafa)
+  - Correction du problème d'affichage `show-summary` lorsque le header multi-niveaux est fixe (#13914) (par @luckyCao)
+- Tabs
+  - Correction d'un bug de défilement automatique (#13696) (par @iamkun)
+  - Obtenir l'onglet correct par le nom de l'onglet (#13705) (par @iamkun)
+  - Utilisez paneName au lieu de name pour déterminer le style du panneau (#13733) (par @iamkun)
+- Tree
+  - Correction de la propriété `showCheckbox` sur `Tree` qui ne pouvait pas affecter leurs `tree-node` enfants(par @KidneyFlower)
+  - Mise à jour des fichiers de doc et de définition (#13540) (par @ziyoung)
+- Upload
+  - Ajout de le propriété `url` au fichier uploadé lorsque `list-type` est modifié (#13771) (par @elfman)
+- Slider
+  - Correction de l'indentation du code source (#13955) (par @wacky6)
+- I18n
+  - Ajout des traductions manquantes en catalan (par @jaumesala)
+  - Ajout de la traduction russe manquante (#13658) (par @justlp)
+  - Correction des traductions en finnois (#14137) (par @jenkrisu)
+- Doc
+  - Mise à jour de la documentation espagnol depuis la 2.4.11 (#13522) (par @Gonzalo2310)
+- Autres
+  - Suppression d'un script inutile (par @ziyoung)
+  - Correction des ancres (#13753) (par @iamkun)
+  - Correction de l'incohérence des majuscules dans la documentation (par @wonderjar)
+  - Ajout du QR code du chat DingDing au readme (#13957) (par @iamkun)
+  - Ajout des logs yarn au .gitignore (#13922) (par @mimimi)
+  - Suppression du sponsor duotai (#14156) (par @island205)
+  - Mise à jour du QR code dans le readme (#13960) (par @iamkun)
+  - Mise à jour du lien CDN, correction d'une typo (par @ziyoung)
+
+### 2.4.11
+
+*2018-11-21*
+
+- Revert pr #13296. Correction d'un clic sur Menu externe causant l'effondrement du SubMenu, #13478
+- Ajustement des points de rupture media query sur petit écran (xs), #13468 (par @alekoshen712)
+
+### 2.4.10
+
+*2018-11-16*
+
+- Correction des clics multiples sur Select pour afficher la liste déroulante, #13268
+- L'icône d'effacement des champs n'est pas affichée lorsque Form est désactivé, #13208
+- Ajustement des styles de Select, Progress, Autocomplete, Tooltip, Collaspe, TimePicker, #13188 (par @porcelainHeart) #13210 #13266 #13266 #13257 #13290 #13347 (par @PanJiaChen)
+- Ajout de l'attribut `loop` dans le composant Carrousel, #13217
+- Lorsque les données de Table changent, la ligne en surbrillance reste, #13200
+- Le slot du header de Table peut recevoir des paramètres, #13263
+- La méthode `clearFilter` de Table peut recevoir des arguments, #13176
+- La bulle d'aide n'est plus créée lorsqu'il n'y a pas de contenu dans la cellule de Table, #13152 (par @rongxingsun)
+- Le contenu de la zone de saisie du panneau ColorPicker peut être affiché correctement, #13278
+- ColorPicker ne déclenche plus la validation des formulaires lors du glisser-déposer, #13299
+- InputNumber: ajout de la méthode `select`, #13286 (par @st-sloth)
+- AutoComplete: ajout de l'événement `clear`, #12171(par arthurdenner) #13326
+- Vous pouvez fermer Menu en cliquant à l'extérieur, #13296
+- La méthode `validateField` du formulaire peut recevoir des arguments, #13319
+- Cascader: ajout de l'événement `visible-change`, #13415
+- DatePicker: a ajout d'un slot pour les séparateurs d'intervalle, #13272 (par @milworm)
+- Tree: ajout des propriétés `iconClass` et `currentNodeKey`, #13337 #13197 (par @isnifer)
+- Progress: ajout du texte de statut #13198 (par @ali-master)
+- Correction de `defaultCheckedKeys` de Tree, #13349 (par @dive2Pro)
+
+### 2.4.9
+
+*2018-10-26*
+
+- Le paramètre `clearValidate` de Form supporte les strings #12990 (par @codinglobster)
+- Ajout de l'attribut `type` pour Badge, #12991
+- Les utilisateurs peuvent utiliser scoped-slot pour personnaliser l'en-tête de colonne de Table #13012 (par @ivanseidel)
+- Correction du champ de Select incapable d'entrer du texte sous IE, #13034 (par @GaliMU)
+- Les options Select ne s'enroule pas lorsque l'espace est suffisant, #12329 (par @akki-jat)
+- Lorsque la liste déroulante de Select est ouverte, l'icône de la flèche s'affichera également correctement, #12353 (par @firesh)
+- Correction de l'attribut de taille de Select qui ne fonctionnait pas, #13070
+- La sélection de plusieurs valeurs peut aussi être effacée, #13049 (par @ZSkycat)
+- Correction du dernier TabNav qui ne pouvait pas être supprimé, #13039
+- Correction d'un problème d'affichage du label TabNav, #13178
+- Ajout d'un slot de titre pour Alert, #13082 (par @Kingwl)
+- Correction d'un problème où le contenu de l'infobulle de Table était incorrect, #13159 (par @elfman)
+- Optimisation de l'animation de Upload lorsque le fichier est supprimé, #12987
+- Style ajusté pour InputNumber lorsque le bouton de commande n'est pas affiché, #13052
+
+### 2.4.8
+
+- Ne pas afficher le contour lorsque le Switch est focus, #12771
+- Correction du style de Dropdown dans ButtonGroup, #12819 (par @bluejfox)
+- Ajout d'un événement d'ouverture pour Dialog, #12828
+- Correction de l'ordre d'affichage incorrect de TabNav, #12846
+- Correction d'un problème qui empêchait les Tabs de défiler jusqu'à l'onglet sélectionné, #12948
+- Correction d'un problème de l'identificateur qui ne s'affiche pas lorsque le noeud de Tree est glissé, #12854
+- Le paramètre de l'événement validation du formulaire contient le message de validation #12860 (par @YamenSharaf).
+- Correction de DatePicker pour ne pas vérifier la validité du temps d'entrée de l'utilisateur, #12898
+- Correction d'un problème avec l'attribut `render-header` de l'en-tête de table qui ne fonctionnait pas, #12914
+
+### 2.4.7
+
+*2018-09-14*
+
+- Correction de DatePicker ne déclenchant pas la validation du formulaire, #12328 #12348
+- Correction des erreurs lancées par DatePicker en mode multiple, #12347
+- Correction d'une position incorrecte du spinner de DatePicker, #12415 (par @rang-ali)
+- Correction du remplissage automatique de la zone de saisie de DatePicker, #12521 (par @abdallanayer)
+- Correction du champ non-subrillant dans Cascader, #12341
+- Correction d'un mauvais ordre de Tabpane, #12346
+- Correction d'une position incorrecte du curseur ColorPicker, #12376 (par @cnwhy)
+- Correction du style de SubMenu, #2457
+- Correction de la surbrillance après la sélection de SubMenu, #12479
+- Correction des valeurs incorrectes sélectionnées par Cascader, #12508 (par @huangjinqiang)
+- Correction d'une valeur incorrecte dans le champ d'entrée Pagination, #12525
+- Correction de l'ordre dans lequel la Pagination déclenche les événements, #12530
+- Correction des filtres de table non-affichés, #12539
+- Correction de l'arbre incapable de supprimer des nœuds, #12684
+- Correction de la hauteur de Select Input changeant en mode simple, #12719
+- Correction d'un style du label de FormItem sous forme imbriquée, #12748
+- Ajout de l'attribut `autocomplete` pour Input, `auto-complete` devenant obsolète, #12514 (par @axetroy)
+- Ajout des slots-scope pour Form pour afficher les informations de validation, #12715 (par @YamenSharaf)
+
+### 2.4.6
+
+*2018-08-09*
+
+- Correction de Table n'affichant pas l'icône de filtre lorsque `filters` est un tableau vide, #12165
+- Correction de Menu ne sauvegardant pas l'état actif lorsque `collapse` change, #12178 (par @elfman)
+- Correction du Cascader n'échappant pas les caractères spéciaux poue les Regexp, #12248
+- Correction d'un bouton Radio désactivé affichant l'ombre d'une case lorsqu'on clique dessus, #12262
+- Correction de arrow key qui n'a pas d'effet lorsque la valeur par défaut est `undefined`, #12322
+- Correction de la fonction de requête de Select non-stabilisée en mode multi, #12181
+- Correction du mot-clé de la requête Select disparaissant en mode multi, #12304
+- Correction d'une largeur incorrecte de Dialog lorsqu'il est affiché en plein écran, #12203
+- Correction de l'affichage incorrect de Main sur IE, #12237
+- Correction de Input déclenchant deux validations de formulaire, #12260
+- Correction de l'ajout d'un nouveau nœud d'arborescence provoquant la disparition des nœuds, #12256
+- Correction d'un nœud d'arborescence non supprimé après avoir glissé, #12279
+- Correction du Popover non-visible quand InputNumber a le focus, #12284
+- Ajout de l'attribut `popper-append-to-body` pour Autocomplete, #12241
+- Ajout du support du modificateur `sync` pour l'attribut `page-size` de Pagination, #12281
+
+### 2.4.5
+
+*2018-07-26*
+
+- Correction du réglage de Table `class-name` qui ne fonctionne pas pour les colonnes `expand`, #12006
+- Ajout de la méthode `toggleAllSelection` pour Table, #12047
+- Correction d'une mauvaise position du slot de suffixe lorsque Input contient Select, #12108
+- Correction de `line-height` de l'option impossible à régler, #12120
+- Correction de TimeSelect avec la valeur par défaut `null` ne pouvant être assigné après avoir exécuté `resetField`, #12010
+- Correction d'un événement keydown qui n'étant pas arrow key ne fonctionne pas dans Tree, #12008
+- Correction d'un nœud parent vérifié en mode lazy, #12106
+- Ajout du paramètre `includeHalfChecked` pour getCheckedNodes de Tree, #12014
+
+### 2.4.4
+
+*2018-07-13*
+
+- Correction du déclenchement de la validation de Select après la réinitialisation du formulaire, #11837
+- Correction d'une mauvaise position du slot `suffix` de Input lorsque le slot `suffixe` est avec le slot `append`, #11951
+- Correction de Input affichant toujours l'icône clear même en lecture seule, #11967
+- Correction d'un nœud d'arborescence coché lorsqu'il est désactivé, #11847
+- Correction des `default-checked-keys` qui ne fonctionnait pas, #11971
+- Correction de `empty-text` non visible lorsque le noeud de Tree est filtré, #11971
+- Correction de la position du `empty-text` surdimensionné dans Table, #11965
+- Correction de la surbrillance de la ligne de Table lorsque `current-row-key` est assignée à `null`, #11866
+- Correction de l'affichage de la liste déroulante des filtres lorsque `filters` est un tableau vide, #11864
+- Correction du label de Radio qui n'arrête pas la propagation des événements, #11912
+
+### 2.4.3
+
+*2018-07-03*
+
+- Correction de `allow-drop` qui ne fonctionnait pas correctement lorsque les nœuds de Tree avaient une hauteur personnalisée, #11797
+- Maintenant vous pouvez passer un paramètre à la méthode `clearValidate` du formulaire, en spécifiant quels résultats de validation FormItems doivent être effacés, #11821
+- Ajout de l'attribut `distinguishCancelAndClose` pour MessageBox, #11831
+
+### 2.4.2
+
+*2018-06-26*
+
+- Maintenant `class-name` et `label-class-name` de Table sont réactifs, #11626
+- Correction de Table qui mettait toujours en surbrillance la ligne cliquée lorsque `highlight-current-row` était `false`, #11646
+- Correction d'un bug de style de ButtonGroup lorsqu'il n'a qu'un seul bouton `round` ou `circle`, #11605
+- Correction du style du Select de Pagination, #11622
+- Correction de la méthode `open` du menu quand `collapse` est dynamiquement changé, #11646
+- Ajout des paramètres `activeName` et `oldActiveName` au hook before-leave de Tabs, #11713
+- Correction de Cascader ayant le focus après avoir cliqué à l'extérieur, #11588
+- Correction de Cascader ne se fermant pas quand l'option est cliquée quand `change-on-select` est `true`, #11623
+- La mise à jour programmatique de la valeur de Select déclenchera la validation du formulaire, #11672
+
+### 2.4.1
+
+*2018-06-08*
+
+- Suppression du duplicata de la déclaration de type pour Autocomplete, #11388
+- Correction du style de flèche déroulante de Select dans FireFox lorsqu'il est imbriqué dans Form, #11427
+- Correction de l'icône de l'option de Select qui s'affiche toujours lorsque la valeur initiale est `null`, #11460
+- Correction d'un Radio désactivé affichant l'ombre de la boîte quand on clique dessus, #11462
+- Ajout de l'attribut `iconClass` pour MessageBox, #11499
+- Ajout de l'attribut `stretch` pour Tabs, #11476
+- Correction d'un problème d'ordre de rendu de TabPane lorsque Tabs est `lazy`, #11461
+- Correction de Table ne conservant pas la surbrillance de la ligne actuelle lors de son ouverture, #11464
+- Correction de l'état de la mise au point lorsque `before-leave` renvoie une promesse résolue, #11386
+- Correction de la désactivation du Popover qui créait encore des poppers, #11426
+- Correction de la boucle sans fin de Tree lorsqu'un nouveau noeud est ajouté en mode lazy, #11430 (par @wangjingf)
+- Ajout de l'événement `closed` pour Dialog, #11490
+
+### 2.4.0 Fullerene
+
+*2018-05-28*
+
+#### Nouvelles fonctionnalités
+- Général
+  - L'outil de développement et le bundler sont basculés vers le webpack natif, #11216
+  - Vous pouvez maintenant définir globalement l'index z initial des popups, #11257
+- Autocomplete
+  - Ajout de l'attribut `hide-loading`, #11260
+- Button
+  - Vous pouvez maintenant utiliser l'attribut `size` sur les boutons circulaires pour contrôler leur taille, #11275
+- InputNumber
+  - Ajout de l'attribut `precision`, #11281
+- Tabs
+  - Ajout de l'attribut `before-leave`, #11259
+  - Ajout de l'attribut `lazy`, #11167（by @Kingwl）
+- Table
+  - Ajout de la méthode `sort` pour trier manuellement la table, #11311
+
+#### Corrections de bugs
+- Input
+  - Correction d'un problème qui provoquait un re-rendu lors de l'utilisation de l'IME chinois pour saisir rapidement du texte, #11235 (par @STLighter)
+- Popover
+  - Correction de l'erreur de console lorsque l'élément déclencheur est Radio ou Checkbox, #11265
+- Breadcrumb
+  - Correction de l'attribut `to` ne supportant pas la mise à jour dynamique, #11286
+- Upload
+  - Correction de l'erreur de console lorsqu'un fichier est résolu dans la promesse retournée de la méthode `beforeUpload`, #11297 (par @qusiba)
+- Infobulle
+  - Correction d'une flèche mal positionnée lorsque le contenu est vide, #11335
+- Autocomplete
+  - Correction de suggestions d'entrée incorrectes après la suppression rapide d'un mot-clé, #11323
+- ColorPicker
+  - Correction d'un événement `active-change` se déclenchant incorrectement lorsque le menu déroulant du picker est fermé, #11304
+- Table
+  - Correction d'une erreur de style du panneau de filtre surdimensionné, #11314
+  - Correction de la ligne actuellement sélectionnée qui n'était pas conservée lors du tri de la table, #11348
+- Checkbox
+  - Correction d'une checkbox unique ne supportant pas la validation, #11271
+- Radio
+  - Correction du Radio désactivé quand même sélectionné en appuyant sur la touche espace, #11303
+- MessageBox
+  - Correction de la classe `el-popup-parent-hidden` qui n'était pas supprimée à l'ouverture successive de MessageBox, #11371
+
+### 2.3.9
+
+*2018-05-18*
+
+- Correction d'une erreur lorsque les données source n'ont pas le champ spécifié par l'attribut `prop` d'une TableColumn, lorsque la souris se déplace dans les cellules de cette colonne, #11137
+- L'attribut `lockScroll` des composants popup n'ajoute plus un style en ligne à l'élément parent, mais ajoute un nom de classe, #1111114
+- Correction de l'icône de Progression qui ne s'affichait pas quand son `status` était une exception, #11172
+- Correction de l'attribut `désactivé` qui ne fonctionnait pas dans la liste des résultats de filtrage du Cascader filtrable, #11185
+- Correction d'un problème où la ligne étendue de la table ne peut pas être réduite si la source de données est mise à jour après son extension, #11186
+- `setCurrentKey` de Tree accepte maintenant `null` comme paramètre pour annuler le noeud actuellement mis en surbrillance, #11205
+
+### 2.3.8
+
+*2018-05-11*
+
+- Correction du saut du panneau DatePicker au mois courant après avoir choisi une date dans un mois non courant quand `type` est dates, #10973
+- Correction de l'Input effaçable affichant toujours l'icône d'effacement en lecture seule, #10912
+- Correction de la fermeture du panneau DatePicker sans changer la valeur déclenchant incorrectement l'événement `change`, #11017
+- Correction d'un problème de navigation du clavier lorsque Select a regroupé les options, #11058
+- Ajout du slot nommé `préfixe` pour Select, #11063
+- Ajout de la méthode `clearValidate` pour FormItem, #11076
+- Ajout de l'attribut `checkOnClickNode` pour Tree, #1111111
+
+### 2.3.7
+
+*2018-04-29*
+
+- Correction d'une table qui ne mettait pas à jour ses largeurs de headers lorsque la barre de défilement disparaissait à cause du filtrage, #10834
+- Correction de l'Input effaçable affichant toujours l'icône d'effacement lorsque sa valeur initiale est `null`, #10912
+- Correction d'un déclencheur incorrect de l'événement `active-change` après avoir changé la valeur liée de ColorPicker par programmation, #10903 (par @zhangbobell)
+- Correction du Select filtrable qui provoquait une boucle infinie lors de la navigation dans les options à l'aide du clavier si toutes les options sont désactivées, #10945
+
+### 2.3.6
+
+*2018-04-21*
+
+- Correction d'un comportement incorrect du callback `allow-drop` de Tree lorsque le paramètre `type` est utilisé, #10821
+- Maintenant vous pouvez entrer correctement les mots-clés dans le Select simple filtrable dans IE11, #10822
+- Correction d'un Select simple déclenchant incorrectement un événement `blur` après avoir cliqué sur une option, #10822
+
+### 2.3.5
+
+*2018-04-20*
+
+- Correction d'une surbrillance incorrecte dans le panneau DatePicker lorsque `type` est la semaine, #10712
+- Correction d'un InputNumber vide lorsque sa valeur initiale est 0, #10714
+- Ajout de l'attribut `automatic-dropdown` pour Select, #10042 (par @Seebiscuit)
+- Correction de Rate désactivé quand même mis à jour par les touches de navigation, #10726 (par @Richard-Choooou)
+- L'attribut `type` de DatePicker peut être `dates`, où vous pouvez choisir plusieurs dates dans un sélecteur, #10650 (par @Mini256)
+- Ajout des événements `prev-click` et `next-click` pour Pagination, #10755
+- Ajout de l'attribut `pager-count` pour Pagination, #10493 (par @chongjohn716)
+- Ajout de `type` comme 3ème paramètre de l'attribut `allow-drop` de Tree, #10792
+- Nous utilisons maintenant ResizeObserver pour détecter le redimensionnement des éléments DOM, #10779
+
+### 2.3.4
+
+*2018-04-12*
+
+- Suppression du double de l'attribut `showTimeout` dans la déclaration TypeScript de SubMenu, #10566 (par @kimond)
+- Vous pouvez maintenant personnaliser les éléments de Transfert en utilisant le scoped slot, #10577
+- Correction d'un clic sur le bouton précédent désactivé et le bouton suivant de la pagination déclenchant toujours l'événement `current-current-change`, #10628
+- Correction de Textarea affichant `undefined` dans le SSR lorsque sa valeur n'est pas définie, #10630
+- Correction de la désactivation du style TabItem lorsque `type` est border-card, #10640
+- Ajout de `$index` comme quatrième paramètre du `formatter` de la Table, #10645
+- Correction de CheckboxButton non exporté dans la déclaration TypeScript, #10666
+
+### 2.3.3
+
+*2018-04-04*
+
+- Ajout de l'attribut `shadow` pour Card, #10418 (par @YunYouJun)
+- Correction de Badge masqué lorsque `value` est `0`, #10470
+- Correction de quelques bugs de Tree, #10474 #10494
+- Ajout de `placement` pour Autocomplete, #10475
+- L'attribut `default-time` fonctionne également dans DateTimePicker, #10321 (par @RickMacTurk)
+- Suppression du contour bleu de TabItem après que le navigateur n'ait plus le focus ou soit minimisé, #10503
+- Ajout de l'attribut `popper-append-to-body` pour SubMenu, #10515
+- Suppression du feedback visuel lors du survol d'un élément BreadcrumbItem non lié, #10551
+- Correction de l'événement `change` d'InputNumber pour s'assurer que la valeur liée du composant est mise à jour dans le gestionnaire d'événements, #10553
+
+### 2.3.2
+
+*2018-03-29*
+
+- Correction d'une régression d'Autocomplete, #10442
+
+### 2.3.1
+
+*2018-03-29*
+
+- Correction d'une régression de `type` d'Inputqui n'était pas transmis à l'élément natif, #10415
+- Ajout de la méthode `blur` pour Select, #10416
+
+#### 2.3.0 Diamant
+
+*2018-03-28*
+
+#### Nouvelles fonctionnalités
+- Table
+  - Maintenant le `formatter` de TableColumn peut être mis à jour dynamiquement, #10184 (par @elfman)
+  - Ajout de l'attribut `select-on-indeterminate`, #9924 (par @syn-zeta)
+- Menu
+  - Ajout de l'attribut `collapse-transition`, #8809 (par @limichange)
+- Input
+  - Ajout de la méthode `select`, #10229
+  - Ajout de la méthode `blur`, #10356
+- ColorPicker
+  - Ajout de l'attribut `predefine`, #10170 (par @elfman)
+- Tree
+  - Ajout des attributs `draggable`, `allow-drop` et `allow-drag`, et `node-drag-start`, `node-drag-enter`, `node-drag-leave`, `node-drag-leave`, `node-drag-over`, `node-drag-end` et `node-drop`, #9251 #10372 (par @elfman)
+- Form
+  - La méthode `validate` a maintenant un deuxième paramètre, contenant l'information des éléments de formulaire qui ont échoué à la validation, #10279
+  - Ajout de l'événement `validate`, #10351
+- Progress
+  - Ajout de l'attribut `color`, #10352 (par @YunYouJun)
+- Button
+  - Ajout de l'attribut `circle`, #10359 (par @YunYouJun)
+
+#### Corrections de bugs
+- Form
+  - Correction du label de FormItem non aligné avec l'Input mixte, #10189
+- Menu
+  - Désormais, le menu réduit n'affichera la bulle d'aide que lorsque le slot `title` de l'élément MenuItem est défini, #10193 (par @PanJiaChen).
+- Pagination
+  - Correction d'un événement `current-current-change` qui se déclenchait incorrectement sans interaction de l'utilisateur, #10247
+- DatePicker
+  - Maintenant, la date et l'heure dans le panneau déroulant sont correctement formatées en fonction de l'attribut `format`, #10174（by @remizovvv）
+- Upload
+  - Correction de l'attribut `accept` qui ne fonctionnait pas quand `drag` est vrai, #10278
+
+### 2.2.2
+
+*2018-03-14*
+
+- Ajout de l'événement `clear` pour Input, #9988 (par @blackmiaool)
+- Maintenant la saisie manuelle de ColorPicker supporte les modes `hsl`, `hsv` et `rgb`, #9991
+- Correction de DatePicker ne déclenchant pas l'événement `change` lorsque sa valeur initiale est effacée, #9986
+- Maintenant les attributs liés à la classe d'icônes de Rate supportent les mises à jour dynamiques, #10003
+- Correction de Table avec des colonnes fixes dont la hauteur n'est pas mise à jour correctement si `max-height` est réglé, #10034
+- Maintenant le mode plage de DatePicker supporte la sélection inverse (en cliquant sur la date de fin, puis sur la date de début), #8156 (par @earlymeme)
+- Ajout de l'attribut `désactivé` pour Pagination, #10006
+- Ajout des événements `after-enter` et `after-leave` pour Popover, #10047
+- Correction de Select ne déclenchant pas la validation lorsque l'utilisateur sélectionne une option après avoir exécuté `resetFields` du formulaire, #10105
+- Correction des largeurs incorrectes des colonnes fixes de Table dans certains cas, #10130
+- Correction de MessageBox héritant de l'attribut `title` de son instance précédente lorsqu'il était appelé sans `title`, #10126 (par @Pochodaydaydayup)
+- Ajout de l'attribut `input-size` pour Slider, #10154
+- Ajout des événements `left-check-change` et `right-check-change` pour Transfer, #10156
+
+### 2.2.1
+
+*2018-03-02*
+
+- Correction d'un rétrécissement de Aside, Header et Footer dans certaines mises en page, #9812
+- Correction de Table avec un attribut `height` qui ne rendait pas dans SSR, #9876
+- Correction d'une Table extensible ne calculant pas sa hauteur lorsqu'une rangée est agrandie, #9848
+- Correction d'un événement `change` qui ne se déclenchait pas lors de la saisie manuelle de la date dans DateTimePicker, #9913
+- Correction de Select affichant ses options lorsque la boîte de saisie est cliquée avec le bouton droit de la souris, #9894 (par @openks)
+- Ajout de l'attribut `tooltip-class` pour Slider, #9957
+- Maintenant Select garde le focus après la sélection, #9857 (par @Seebiscuit)
+- Ajout de l'attribut `target-order` pour Transfer, #9960
+
+### 2.2.0 Graphite
+
+*2018-02-12*
+
+#### Nouvelles fonctionnalités
+- Menu
+  - Ajout des attributs `popper-class` et `disabled` pour le sous-menu, #9604 #9771
+  - Le menu horizontal prend maintenant en charge le sous-menu multicouche, #9741
+- Tree
+  - Ajout de l'évènement `node-contextmenu`, #9678
+  - Vous pouvez maintenant personnaliser le modèle de nœud en utilisant un slot avec portée, #9686
+  - Ajout des méthodes `getNode`, `remove`, `remove`, `append`, `insertBefore`, `insertAfter`, `getCheckedKeys`, `getHalfCheckedNodes`, `getHalfCheckedNodes`, `getHalfCheckedKeys` et de l'événement `check`, #9718 #9730
+- Transfer
+  - Ajout de la méthode `clearQuery`, #9753
+- Select
+  - Ajout de l'attribut `popper-append-to-body`, #9782
+
+#### Corrections de bugs
+- Table
+  - Correction d'un clic sur l'icône d'expansion d'une ligne extensible qui déclenche l'événement `row-click`, #9654
+  - Correction de la mise en page non mise à jour lorsque la largeur des colonnes est modifiée par glisser-déposer de l'utilisateur, #9668
+  - Correction d'un problème de style lorsque la ligne de résumé coexiste avec des colonnes fixes, #9667
+- Container
+  - Les composants fixes de Container ne s'étirent pas dans IE11, #9655
+- Loading
+  - Correction du chargement n'apparaissant pas lorsque la valeur de `v-loading` est changée en true dans le hook `mounted`, #9722
+- Switch
+  - Correction de deux événements de clics natifs déclenchés lorsque Switch est cliqué, #9760
+
+### 2.1.0 Charcoal
+
+*2018-01-31*
+
+#### Nouvelles fonctionnalités
+- Cascader
+  - Ajout des événements `focus` et `blur`, #9184 (par @viewweiwu)
+- Table
+  - La méthode `filter-method` a maintenant un troisième paramètre `column`, #9196 (par @liyanlong)
+- DatePicker
+  - Ajout des attributs `prefix-icon` et `clear-icon`, #9237 (par @AdamSGit)
+  - Ajout de l'attribut `default-time`, #9094 (par @nighca)
+  - Le format `value-format` supporte maintenant `timestamp`, #9319 (par @wacky6)
+- InputNumber
+  - Maintenant la valeur liée peut être `undefined`, #9361
+- Select
+  - Ajouté l'attribut `auto-complete`, #9388
+- Form
+ - Ajout de l'attribut `désactivé`, #9529
+ - Ajout de l'attribut `validateOnRuleChange`, #8141
+- Notification
+  - Ajout de la méthode `closeAll`, #9514
+
+#### Corrections de bugs
+- InputNumber
+  - Correstion du reset lors de la saisie du point des nombres décimaux, #9116
+- Dropdown
+  - Correction du mauvais positionnement du menu déroulant lorsque la page n'a qu'une barre de défilement horizontale dans certains navigateurs, #9138 (par @banzhuanmei)
+- Table
+  - Correction d'une erreur dans le calcul du nombre de colonnes fixes après les changements de données des colonnes, #9188（by @kolesoffac）
+  - Correction de la bordure de la dernière colonne de l'en-tête groupé qui n'était pas correctement affichée, #9326
+  - Correction d'un positionnement incorrect de l'en-tête du tableau dans Safari, #9327
+  - Correction de la réduction des lignes extensibles lorsque les données de la table changent, #9462
+  - Correction de rendus multiples inutiles dans certaines conditions, #9426
+  - Correction d'une erreur de calcul de la largeur de colonne lors de la modification de `width` de TableColumn, #9426
+- Loading
+  - Correction de Loading ne se cachant pas correctement dans certaines conditions, #9313
+- DatePicker
+  - Correction de la méthode `focus` qui ne fonctionnait pas en mode "range", #9437
+  - Correction du clic sur le bouton "now" qui sélectionnait toujours la date actuelle même si elle était désactivée, #9470 (par @wacky6)
+  - Correction d'une date trop serrée lors de la navigation, #9577 (par @wacky6)
+- Steps
+  - Correction d'une erreur de style dans IE 11, #9454
+
+#### Changements
+- Menu
+  - Le menu contextuel en mode `collapse` s'ajoute maintenant directement à `body`, de sorte qu'il est visible lorsqu'il est imbriqué dans Aside, #9263
+- Table
+  - Maintenant, cocher les cases dans la Table multi-sélection ne déclenche pas l'événement `row-click`, #9467
+- Loading
+  - Le `z-index` du masque de chargement non plein écran est changé à 2000. Le `z-index` du masque de chargement plein écran se mettra à jour dynamiquement avec les composants popup, #9522
+- Dropdown
+  - Les attributs `show-timeout` et `hide-timeout` ne fonctionnent maintenant que lorsque le déclencheur est `hover`, #9573
+
+### 2.0.11
+
+*2018-01-08*
+
+- Correction d'un problème de couleur de bordure de Select dans les slots `prepend` ou `append` de Input, #9089
+- Correction du paramètre `remove-tag` de l'événement Select, #909090
+- Ajout des attributs `show-timeout` et `hide-timeout` pour le sous-menu, #8934 (par @HugoLew)
+- Correction d'un style Tooltip manquant de `show-overflow-tooltip` lors de l'importation de Table sur demande, #9130
+- Correction d'un dysfonctionnement du tri des colonnes de la table après l'exécution de `clearSort` sur cette colonne, #9100 (par @zEmily)
+- Le fichier de configuration i18n pour le tchèque est renommé de `cz` en `cs-CZ`, #9164
+
+### 2.0.10
+
+*2017-12-29*
+
+- Calcul erroné de la hauteur du tableau lorsque la colonne fixe et la ligne de somme coexistent, #9026
+- Correction d'un style de couleur non compilé du texte vide dans le tableau, #9028
+- Maintenant, DatePicker n'émet que l'événement `change` quand la valeur est vraiment changée, #9029 (par @remizovvvv)
+- Ajout de l'attribut `tabindex` pour Input, #9041 (par @dicklwm)
+
+### 2.0.9🎄
+
+*2017-12-24*
+
+- Ajouté la fonction de hook "avant suppression" pour Upload, #8788 (par @firesh)
+- Correction de la valeur initiale de `error` qui ne fonctionnait pas pour FormItem, #8840
+- La directive Loading prend maintenant en charge le nom de classe personnalisé grâce à l'attribut `element-loading-custom-class`, #8826 (par @earlymeme)
+- Correction CarouselItem devenant invisible lorsque les données sont mises à jour de manière asynchrone, #8921
+- Ajout de l'attribut `renderAfterExpand` pour Tree, #8972
+
+### 2.0.8
+
+*2017-12-12*
+
+- Ajout de la documentation en espagnol
+- Correction du `show-timeout` de Dropdown qui ne fonctionnait pas quand le déclencheur est click, #8734 (par @presidenten)
+- Correction du temps de validation des formulaires pour les règles dont le déclencheur est blur, #8776
+- Correction d'un événement de blur de DatePicker avec intervalle, #8784
+- L'attribut `format` de TimePicker supporte maintenant AM/PM, #8620 (par @firesh)
+
+### 2.0.7
+
+*2017-11-29*
+
+- Correction du style du bouton de type texte désactivé, #8570
+
+### 2.0.6
+
+*2017-11-29*
+
+- Correction d'un bug de style des icônes de tri de la table, #8405
+- Correction du mécanisme de déclenchement de Popover lorsque son `trigger` est manuel, #8467
+- Ajout des attributs `prefix-icon` et `suffix-icon` pour Autocomplete, #8446 (par @liyanlong)
+- Ajout de l'attribut `separator` pour Cascader, #8501
+- Ajout de l'attribut `clearable` pour Input, #8509 (par @lbogdan)
+- Ajout de l'attribut `background` pour Pagination, #8553
+
+### 2.0.5
+
+*2017-11-17*
+
+- Correction de la régression Popover, Tree, Breadcrumb et Cascader dans 2.0.4, #8188 #8217 #8283
+- Correction d'une fuite de mémoire de la directive `clickoutside`, #8168 #8225 (par @badpunman @STLighter)
+- Correction de la hauteur du Select multiple lorsque sa valeur est effacée, #8317 (par @luciy)
+- Ajout de l'attribut `collapse-tags` pour plusieurs Sélectionner pour remplacer les balises par une ligne de texte, #8190
+- Correction d'une consommation CPU élevée causée par la table cachée, #8351
+- Maintenant vous pouvez utiliser la méthode `doLayout` de la Table pour mettre à jour sa disposition, #8351
+
+### 2.0.4
+
+*2017-11-10*
+
+- Accessibilité améliorée pour Cascader, Dropdown, Message, Notification, Popover, Tooltip et Tree.
+- Correction du redimensionnement de Container lorsque la largeur de la fenêtre d'affichage diminue, #8042
+- Correction de la suppression incorrecte de `updateKeyChildren` dans Tree, #8100
+- Correction de la hauteur de la CheckboxButton avec bordure lorsque le bouton est imbriqué dans un formulaire, #8100
+- Correction d'une erreur d'analyse du menu pour les couleurs personnalisées, #8153 (par @zhouyixiang)
+
+### 2.0.3
+
+*2017-11-03*
+
+- Correction des attributs `éditable` et `readonly` pour DatePicker avec intervalle, #7922
+- Correction d'une erreur de style des Tabs imbriqués, #7941
+- Correction d'une erreur de style de la dernière étape des Steps verticales, #7980
+- Correction de la synchronisation du déclenchement de l'événement `current-current-change` pour Pagination, #7995
+- Correction d'une infobulle non enregistrée dans Menu, #7995
+
+### 2.0.2
+
+*2017-10-31*
+
+- Un clic droit sur les boutons de InputNumber ne changera pas sa valeur, #7817
+- La méthode `validate` de Form peut maintenant attendre des validations asynchrones avant d'exécuter son callback, #7774 (par @Allenice)
+- Correction de la plage de sélection de DatePicker ne fonctionnant pas dans les navigateurs Chromium 53-57, #7838
+- Correction des icônes manquantes de prévisualisation et de suppression de Upload lorsque son `list-type` est picture-card, #7857
+- Ajout de l'attribut `sort-by` pour TableColumn, #7828 (par @wangfengming)
+- Correction de DatePicker affichant parfois un mauvais numéro d'année lors de la sélection de la première semaine en mode semaine, #7860 (par @hhh23485)
+- Correction d'une erreur de style d'icône des Steps verticales, #7891
+- La 'hot area' pour les flèches de nœud dans Tree est étendue, #7891
+
+### 2.0.1
+
+*2017-10-28*
+
+- Correction d'une erreur de style de RadioButton et CheckboxButton, #7793
+- Correction de TimePicker qui ne répondait pas au défilement de la souris dans certaines conditions, #7811
+- Correction des styles incomplets de certains composants lors de l'importation à la demande, #7811
+
+### 2.0.0 Carbon
+
+*2017-10-27*
+
+#### Nouvelles fonctionnalités
+- Général
+  - Un nouveau thème : `theme-chalk`.
+  - L'accessibilité des éléments suivants est améliorée : Alert, AutoComplete, Breadcrumb, Button, Checkbox, Collapse, Input, InputNumber, Menu, Progress, Radio, Rate, Slider, Switch, Upload
+  - Ajout du typage TypeScript
+  - Toutes les icônes existantes sont redessinées. De nouvelles icônes sont ajoutées
+  - Ajout d'une série de classes basées sur les breakpoints qui masquent les éléments lorsque la taille de la fenêtre remplit certaines conditions
+  - Ajout des composants de mise en page : Container, Header, Aside, Main, Footer
+  - Vous pouvez maintenant configurer la taille des composants de manière globale. Lors de l'importation d'un élément, vous pouvez ajouter un objet de configuration global avec une propriété `size` pour configurer les tailles par défaut pour tous les composants.
+- Button
+  - Ajout de l'attribut `round`. Il est utilisé pour les boutons à coins ronds #6643
+- TimeSelect
+  - Vous pouvez maintenant naviguer en appuyant sur les touches `Up` et `Down`, et en appuyant sur `Enter` vous sélectionnez l'heure #6023.
+- TimePicker
+  - Vous pouvez maintenant naviguer à l'aide des touches fléchées, et en appuyant sur `Entrée` vous sélectionnez l'heure #6050.
+  - Ajout de `start-placeholder` et de `end-placeholder`. Ce sont des placeholders pour les deux champs en mode intervalle #7169
+  - Ajout de l'attribut `farrow-control` pour faire tourner le temps avec les flèches #7438
+- Tree
+  - Maintenant les noeuds enfants ne font pas de rendu avant la première ouverture #6257
+  - Ajout de l'attribut `check-descendants`. Il détermine si les nœuds enfants sont vérifiés lors du contrôle de leur nœud parent en mode `lazy` #6235
+- Tag
+  - Ajouté l'attribut `size` #7203
+- Datepicker
+  - Maintenant `timeFormat` peut formater le TimePicker quand le type est réglé sur `datetimerange` #6052
+  - Ajout de `start-placeholder` et de `end-placeholder`. Ce sont des placeholders pour les deux champs en mode intervalle #7169
+  - Ajout de l'attribut `value-format` pour personnaliser le format de la valeur liée, #7367
+  - Ajout de l'attribut `unlink-panels` pour dissocier les deux panneaux de date lors de la sélection d'une plage de dates
+- MessageBox
+  - Ajout de l'attribut `closeOnHashChange` #6043
+  - Ajout de l'attribut `center` pour que le contenu puisse être centré #7029
+  - Ajout de l'attribut `roundButton` pour afficher les boutons ronds #7029
+  - Ajout de l'attribut `dangerouslyUseHTMLString`. Lorsqu'il est réglé sur `true`, `message` sera interprété comme une chaîne HTML<sup>\*</sup> #6043
+  - Ajout de l'attribut `inputType` pour assigner le type de l'input intérieur, #7651
+- Dialog
+  - Ajout des attributs `width`、`fullscreen`、`append-to-body`. La boîte de dialogue peut maintenant être imbriquée
+  - Ajout de l'attribut `center` pour que le contenu puisse être centré #7042
+  - Ajout de `focus-after-closed`、`focus-after-open` pour améliorer l'accessibilité #6511
+- ColorPicker
+  - Maintenant vous pouvez taper les couleurs dans le champ de saisie #6167
+  - Ajout des attributs `size` et `disabled` #7026
+  - Ajout de l'attribut `popper-class` #7351
+- Message
+  - Maintenant la couleur des icônes peut être modifiée par CSS #6207
+  - Ajout de l'attribut `dangerouslyUseHTMLString`. Lorsqu'il est réglé sur `true`, `message` sera interprété comme une chaîne HTML<sup>\*</sup> #6207
+  - Ajout de l'attribut `center` pour que le contenu puisse être centré #6875
+- Notification
+  - Ajout de l'attribut `position` pour configurer où Notification apparaît #6231
+  - Ajout de l'attribut `dangerouslyUseHTMLString`. Lorsqu'il est réglé sur `true`, `message` sera interprété comme une chaîne HTML<sup>\*</sup> #6231
+  - Ajout de l'attribut `showClose` pour cacher le bouton de fermeture #6402
+- Rate
+  - Ajout de l'attribut `show-score` pour déterminer si le score actuel est affiché #6295
+- Tabs
+  - Ajout de l'attribut `tab-position` #6096
+- Radio
+  - Ajout des attributs `border` et `size` #6690
+- Checkbox
+  - Ajout des attributs `border` et `size` #6690
+- Alert
+  - Ajout de l'attribut `center` pour que le contenu puisse être centré #6876
+- Menu
+  - Ajout des attributs `background-color`, `text-color` et `active-text-color` #7064
+  - Ajout des méthodes `open` et `close` pour ouvrir et fermer les sous-menus par programmation, #7412
+- Form
+  - Ajout de l'attribut `inline-message` pour déterminer si le message de validation est affiché en ligne #7032
+  - Ajout de l'attribut `status-icon` pour afficher une icône de feedback après validation #7032
+  - Form et FormItem ont maintenant un attribut `size`. Les composants internes hériteront de cette taille s'ils ne sont pas spécifiés sur eux-mêmes, #7428
+  - La méthode `validate` retournera maintenant une promesse si le rappel est omis, #7405
+  - Ajout de la méthode `clearValidate` pour la validation des résultats pour tous les éléments de formulaire, #7623
+- Input
+  - Ajout des attributs `suffixe` et `préfixe` des slots nommés, `suffixIcon` et `prefixIcon` pour ajouter du contenu dans la zone de saisie #7032
+- Breadcrumb
+  - Ajout de l'attribut `separator-class` pour supporter les icônes comme séparateurs d'éléments #7203
+- Steps
+  - Ajout de l'attribut `simple` pour activer les étapes de style simple #7274
+- Pagination
+  - Ajout des attributs `prev-text` et `next-text` pour personnaliser les textes des pages précédente et suivante #7005
+- Loading
+  - Maintenant vous pouvez personnaliser l'icône et la couleur de fond avec les propriétés `spinner` et `background` #7390
+- Autocomplete
+  - Ajout de l'attribut `debounce`, #7413
+- Upload
+  - Ajout des attributs `limit` et `on-exceed` pour limiter le nombre de fichiers, #7405
+- DateTimePicker
+  - Ajout de l'attribut `time-arrow-control` pour activer `arrow-control` du TimePicker imbriqué, #743838
+- Layout
+  - Ajout d'un nouveau point d'arrêt `xl` pour les fenêtres plus larges que 1920px
+- Table
+  - Ajout de l'attribut `span-method` pour la fusion de cellules
+  - Ajout de la méthode `clearSort` pour effacer le tri par programmation
+  - Ajout de la méthode `clearFilter` pour effacer le filtre par programmation
+  - Pour les lignes extensibles, lorsqu'une ligne est étendue, une classe `.expanded` sera ajoutée à sa liste de classes, afin que vous puissiez personnaliser son style
+  - Ajout de l'attribut `size`
+  - Ajout de la méthode `toggleRowExpansionRowExpansion` pour ouvrir ou réduire les lignes extensibles par programmation
+  - Ajout de l'attribut `cell-class-name` pour assigner un nom de classe aux cellules
+  - Ajout de l'attribut `cell-style` pour le style des cellules
+  - Ajout de l'attribut `header-row-class-name` pour assigner un nom de classe aux lignes d'en-tête
+  - Ajout de l'attribut `header-row-style` pour le style d'en-tête
+  - Ajout de l'attribut `header-cell-class-name` pour assigner un nom de classe aux cellules d'en-tête
+  - Ajout de l'attribut `header-cell-style` pour le style des cellules d'en-tête
+  - L'attribut `prop` de la tableColumn accepte maintenant les notations `object[key]`
+  - Ajout de l'attribut `index` pour TableColumn pour personnaliser les index de lignes
+- Select
+  - Ajout de l'attribut `reserve-keyword` pour réserver le mot-clé de la recherche courante après avoir sélectionné une option.
+
+#### Corrections de bugs
+- DatePicker
+  - Correction de `v-model` retournant le deuxième jour de la semaine sélectionnée en mode semaine #6038
+  - Correction de la première entrée effacée dans le type `daterange` #6021
+- DateTimePicker
+  - Correction de DateTimePicker et TimePicker s'affectant l'un l'autre lors de la sélection #6090
+  - Correction de l'heure et de la seconde qui peuvent être au-delà de la limite en sélectionnant l'heure #6076
+- TimePicker
+  - Correction de `v-model` qui ne se mettait pas à jour correctement lors du blur #6023
+- Dialog
+  - Correction des textes ayant des bords flous lors de l'ouverture et de la fermeture des listes déroulantes imbriquées #6088
+- Select
+  - Performances améliorées. Maintenant Vue dev-tool ne crashera pas quand un grand nombre de Select sont détruits #6151
+- Table
+  - Correction d'un bug ou la table reste masquée lorsque son élément parent apparaît depuis `display : none`
+  - Correction de l'extension de la largeur de la table lorsque l'élément parent a `display : flex`
+  - Correction d'un bug qui corrigeait le fait que les colonnes d'une table avec l'emplacement `append` disparaissaient lorsque les données étaient récupérées dynamiquement
+  - Correction de l'attribut `expand-row-keys` qui ne fonctionnait pas avec la valeur initiale
+  - Correction d'une défaillance du filtre lors de la mise à jour de `data`
+  - Correction d'une erreur de calcul dans la mise en page des colonnes fixes avec en-têtes groupés
+  - Correction d'un bug dynamique de `max-height`
+  - Correction de quelques erreurs de calcul de style
+
+#### Breaking changes
+- Général
+  - Suppression de `theme-default`.
+  - Compatible avec Vue 2.5.2+ et IE 10+
+  - L'événement `change` des composants de formulaire et l'événement `current-current-change` de la pagination ne se déclenchent plus que lors de l'interaction de l'utilisateur
+  - L'attribut `size` de Button et les composants de formulaire acceptent maintenant `medium`, `small` et `mini`
+  - Pour faciliter l'utilisation d'icônes tierces, les attributs `icon` du bouton et des étapes, `prefix-icon` et `suffix-icon` d'Input nécessitent maintenant un nom de classe complet
+- Dialog
+  - Suppression de l'attribut `taille`. Maintenant la taille de Dialog peut être configurée par `width` et `fullscreen`
+  - Maintenant la visibilité de Dialog ne peut plus être contrôlée par `v-model`
+- Rate
+  - Le `text-template` est renommé `score-template`
+- Dropdown
+  - `menu-align` est renommé en `placement`. Maintenant il supporte plus de positions
+- Transfert
+  - le `footer-format` est renommé en `format`
+- Switch
+  - Les attributs commençant par `on-**` seront analysés pour les événements dans JSX, ce qui rend tous les attributs `on-*` de Switch incapable de fonctionner en JSX. Ainsi, les attributs `on-**` sont renommés en `active-*`, et par conséquent les attributs `off-*` sont renommés en `inactive-*`. Cette modification affecte les attributs suivants: `on-icon-class`, `off-icon-class`, `on-text`, `off-text`, `off-text`, `on-color`, `off-color`, `on-value`, `off-value`
+  - Les attributs `active-text` et `inactive-text` n'ont plus de valeurs par défaut
+- Tag
+  - L'attribut `type` accepte maintenant `success`, `info`, ` warning` et `danger`
+- Menu
+  - Suppression de l'attribut `theme`. La couleur du menu peut être configurée en utilisant `background-color`, `text-color` et `active-text-color`
+- Input
+  - Suppression de l'attribut `icon`. L'icône du suffixe peut maintenant être configurée à l'aide de l'attribut `suffix-icon` ou du slot `suffix-icon`
+  - Suppression de l'attribut `on-icon-click` et de l'événement `click`. Maintenant pour ajouter le gestionnaire de clic sur les icônes, veuillez utiliser les slots nommés
+  - L'événement `change` se comporte maintenant comme dans l'input natif, qui ne se déclenche qu'en cas de blur ou en appuyant sur Entrée. Si vous avez besoin de répondre à l'entrée de l'utilisateur en temps réel, vous pouvez utiliser l'événement `input`
+- Autocomplete
+  - Suppression de l'attribut `custom-item`. Le template de suggestions d'entrée peut maintenant être personnalisé en utilisant `scoped slot`.
+  - Suppression de l'attribut `props`. Vous pouvez maintenant utiliser l'attribut `value-key` pour désigner le nom de clé de l'objet de suggestion d'entrée pour l'affichage.
+- Steps
+  - Suppression de l'attribut `center`
+  - Maintenant le Steps va remplir son conteneur parent par défaut
+- DatePicker
+  - Le paramètre de l'événement `change` de DatePicker est maintenant la valeur liée elle-même. Son format est contrôlé par `value-format`
+- Table
+  - Suppression de la prise en charge de la personnalisation du modèle de colonne à l'aide de `inline-template`
+  - `sort-method` s'aligne maintenant avec `Array.sort`. Il devrait retourner un nombre au lieu d'un booléen
+  - L'emplacement `append` est déplacé à l'extérieur de l'élément `tbody` pour éviter les rendus multiples
+  - L'événement `expand` est renommé en `expand-change`
+  - Les paramètres de la méthode `row-class-name` et `row-style` sont maintenant un objet
+
+##
+<i><sup>*</sup> Rendre du HTML arbitraire de façon dynamique sur votre site Web peut être très dangereux car cela peut facilement mener à[des attaques XSS](https://en.wikipedia.org/wiki/Cross-site_scripting). Donc quand `dangerouslyUseHTMLString' est activé, assurez-vous que le contenu du `message' est fiable, et **ne jamais** assigner `message` au contenu fourni par l'utilisateur.</i>.
diff --git a/CHANGELOG.zh-CN.md b/CHANGELOG.zh-CN.md
index a75557ab2e1..5b801c2b10c 100644
--- a/CHANGELOG.zh-CN.md
+++ b/CHANGELOG.zh-CN.md
@@ -1,5 +1,903 @@
 ## 更新日志
 
+### 2.13.0
+
+*2019-11-26*
+
+#### 新特性
+
+- Popconfirm
+  - 新增 Popconfirm 组件 (#17548 by @iamkun)
+
+#### Bug fixes
+
+- BackTop
+  - 平滑过渡动画 (by @lon)
+- DatePicker
+  - 修复选择最小日期的 bug (#17191 by @smk0621)
+- Select
+  - 修复测试用例  (by @msidolphin)
+- Tree
+  - 增加 font-size 样式 (#17094 by @spengjie)
+- Table
+  - 头部可自定义 (#17291 by @ziyoung)
+  - 更新头部样式 (#17284 by @ziyoung)
+  - 修复时候 filter 之后高度问题 (#17348 by @ziyoung)
+  - 修复 row-style 失效的 bug (#17002 by @a631807682)
+  - 修复头部消失的 bug (#17341 by @ziyoung)
+- Calendar
+  - 导入 el-button 和 el-button-group (#17376 by @masongzhi)
+- MessageBox
+  - 修复图表位置 (#17410 by @nullptru)
+- TimePicker
+  - 滚动后设置正确的位置 (#16868 by @mattheyan)
+- Message
+  - 修复关闭的 offsetHeight（#17564） (#17852 by @gzwgq222)
+- Form
+  - ValidateField 的回调应为可选项 (#17314 by @CarterLi)
+- Cascader
+  - 修复 TypeScript 3.7 的兼容问题 (#17881 by @CarterLi)
+- Menu
+  - 修复 NavigationDuplicated 在 vue-router@^3.1.0 的报错 (#17269 by @iamkun)
+- Dropdown
+  - 更新类型文件 (#17550 by @iamkun)
+- Progress
+  - 增加 strokeLinecap 属性 (#17552 by @iamkun)
+- InfiniteScroll
+  - 跳过不可见元素触发 (#17553 by @iamkun)
+- Image
+  - 优化用户体验 (#16985 by @luckyCao)
+  - 优化大图片展示问题 (#16796 by @luckyCao)
+- Drawer 
+  - 修复 drawer-append-to-body 失效的 bug (#16953 by @JeremyWuuuuu)
+- Select
+  - 修复空 tag 的 bug (17199 by @luckyCao)
+- Scrollbar
+  - 修复 FireFox 双滚动条的 bug (#18091 by @iamkun)
+  
+#### Optimization
+
+- I18n
+  - 更新 sv-SE.js (#17926 by @FOLLGAD)
+  - 更新 avatar 组件法语文档 (#17762 by @blombard)
+- Docs
+  - 修复 time-select 文档错误 (#17250 by @wacky6)
+  - 修复 Drawer 文档错误 (#17122 by @haoranyu)
+  - 更新 Spanish changelog 2.12.0 (#17364 by @Gonzalo2310)
+  - 修复 Changelog 文档错误 (#17874 by @renlixin)
+  - 修复 Loading 示例 (#17862 by @MBearo)
+  - 增加 input event 相关文档 (#18061 by @zhouxinyong)
+  - 移除 Input repeat change event 相关文档 (#18085 by @zhouxinyong)
+
+### 2.12.0
+
+*2019-08-29*
+
+#### 新特性
+
+- Popover
+  - 添加 close-delay 属性 (#16671 by @LachlanStuart)
+- Theme
+  - 增加 Chrome 插件: Element Theme Extension (#16686 by @iamkun)
+- Icon
+  - 支持 font-display 属性的配置 (#16805 by @iamfaizalandyka)
+
+#### Bug fixes
+
+- Table
+  - 在表头拖拽后阻止 click 事件的触发 (#16850 by @ziyoung)
+  - 修复表头 display 为 none 造成浏览器崩溃的问题 (#16956 by @luckyCao)
+  - 修复没有数据的时表格高度问题 (#16861 by @ziyoung)
+  - 调用 toggleExpansion 不再抛出异常 (#16304 by @yyjjqq94)
+  - 挂载时不再触发 sort-change 事件 (#17113 by @a631807682)
+  - 修复 setCurrentRow 方法不生效的问题 (#16879 by @ziyoung)
+  - 修复当数据异步加载时，expand-row-keys 不生效的问题 (#16899 by @ziyoung)
+  - 把 toggleAllSelection 设置为 Table 示例的属性 (#17137 by @ziyoung)
+- Tree
+  - 修复文字与复选框之间的距离 (#16799 by @Hazlank)
+- Tabs
+  - 修复 TabItem 位置不正确的问题 (#16520 by @victorting)
+  - 修复高亮的 Tab 不在可视区的问题 (#17033 by @nullptru)
+- Calendar
+  - 修复日期的显示问题 (#16772 by @ubitoffee)
+  - 修复在夏令时的显示问题 (#17208 by @iamkun)
+- Cascader
+  - 修复 CascaderPanel 的显示问题 (#16716 by @zhangHongEn)
+  - 禁用状态下，关闭按钮不显示 (#16224 by @yyjjqq94)
+- Input
+  - 修复韩语输入问题 (#15069 by @MoonHyuk)
+  - 触发清除按钮的点击事件 (#16576 by @a631807682)
+- Select
+  - 过滤时，不收起下拉框 (#17205 by @luckyCao)
+- Transfer
+  - 修复样式问题 (#17206 by @iamkun)
+- Dialog
+  - 添加 SCSS 变量 (#16365 by @haoranyu)
+- RadioGroup
+  - is 指定时，不产生非法的 HTML 片段 (#17070 by @nullptru)
+- Divider
+  - 支持自定义类 (#17078 by @island205)
+- Carousel
+  - 修复 change 的触发时机 (#16705 by @iamkun)
+- Notification
+  - 不修改传入的 option (#16704 by @iamkun)
+- DatePicker
+  - 给 picker-option 添加 className 属性 (#16632 by @iamkun)
+- DateTimePicker
+  - 修复时间选择滚动条的问题 (#16854 by @jesse-li)
+
+#### Optimization
+
+- Checkbox
+  - 提高可访问性 (#16575 by @tylertrotter)
+- Docs
+  - 更新 changelog (#16773 by @SimonaliaChen)
+  - 更新贡献指南 (#14800 by @sinchang)
+  - 修复 Drawer 文档中的拼写错误 (#16848 by @winkay)
+  - 更新自定义主题 (#16983 by @iamkun)
+  - 新增 Esperanto 翻译 (#16955 by @maxkoryukov)
+  - 更新 input-number 文档 (#16316 by @luckyCao)
+  - 更新 Spanish 文档 (#16961 #16548 by @Gonzalo2310)
+- I18n
+  - 更新加泰罗尼亚语翻译 (#14722 by @oscaralbareda)
+  - 更新阿拉伯语翻译 (#16653 by @l3op)
+- Test
+  - 修复拼写错误 (#16672 by @boomler)
+  - 优化 image 的单元测试 (#16847 by @a631807682)
+- Types
+  - 修复 httprequest 的类型 (#16633 by @luckyCao)
+
+### 2.11.1
+
+*2019-07-26*
+
+#### Bug 修复
+
+- Image
+  - 修复 Image 组件 SSR 兼容性 (#16737 by @luckyCao)
+- Chore
+  - 更新 dart-sass 的兼容性 (#16744 by @LewisChennnnn)
+
+### 2.11.0
+
+*2019-07-25*
+
+#### 新特性
+
+- Drawer
+  - 新增抽屉组件 (#16577 by @JeremyWuuuuu)
+
+#### Bug 修复
+
+- Checkbox
+  - 修复 CSS 样式问题 (#16006 by @Hazlank)
+- Tree
+  - 更新类型定义为泛类型 (#15934 by @JeremyWuuuuu)
+  - 修复设置节点 isCurrent 的为 false 的问题 (#15870 by @kkkisme)
+- Dropdown
+  - 更新 split-button 默认颜色 (#15931 by @JuniorTour)
+- Cascader
+  - 修复一级菜单更新问题 (#16399 by @luckyCao)
+  - 懒加载时设默认值 (#16420 by @luckyCao)
+  - 修复当节点值重复时的显示问题 (#15935 by @junyiz)
+  - 对外暴露 getCheckedNodes 和修复 options 改变会影响选中的问题 (#16709 by @SimonaliaChen)
+- Calendar
+  - 更新显示正确的 header 的逻辑 (#16354 by @ziyoung)
+- Submenu
+  - 修复 append-to-body 问题 (#16289 by @a631807682)
+- Table 
+  - 修复 tree table 数据更新问题 (#16481 by @island205)
+- Select
+  - 修复内存泄漏问题 (#16463 by @island205)
+- InfiniteScroll
+  - 更新命名和说明 (#16698 by @iamkun)
+- Avatar
+  - 修复图片不居中的问题 (#16489 by @luckyCao)
+- Dialog
+  - 增加 destroyOnClose 属性 (#16455 by @ziyoung)
+- Image
+  - 增加大图预览 (#16333 by @luckyCao)
+
+#### 优化
+
+- Docs
+  - 修复 dropdown 示例 (#16193 by @webxmsj)
+  - 修正笔误 (#15971 by @howiefh)
+- I18n
+  - 更新泰文翻译 (#16689 by @ponkrit)
+- Chore
+  - 更新基础 API 地址 (#16607 by @iamkun)
+  - 增加 Form 的主题 token (#16699 by @iamkun)
+  - 更新统计 (#16609 by @iamkun)
+  - 修复文档锚点问题 (#16692 by @iamkun)
+
+### 2.10.1
+
+*2019-07-02*
+
+#### Bug 修复
+
+- Table
+  - 排序 icon 问题修复 (#15439 by @bezany)
+  - 修复 `append` slot 存在时布局错位问题 (#16332 by @ziyoung)
+  - 修复 `showOverflowTooltip` 更新无效的问题 (#16295 by @a631807682)
+  - 修复 `FilterPanel` 中 `Scrollbar` 未注册问题  (#16246 by @ziyoung)
+- Chore
+  - 更新版本号，修复文档问题 (#16233 by @ziyoung)
+  - 修复英文首页样式问题 (#16254 by @iamkun)
+
+#### 优化
+
+- Tag
+  - 兼容 IE (#16334 by @ziyoung)
+- Chore
+  - 更新钉钉3群二维码 (#16236 by @iamkun)
+- Doc
+  - 更新主题编辑器文档 (#16244 by @iamkun)
+
+### 2.10.0
+
+*2019-06-25*
+
+#### 新特性
+
+- I18n
+  - 支持乌兹别克语 (#15796 by @ogabek96)
+- Calendar
+  - 支持 `first-day-of-week` 配置 (#16047 by @ziyoung)
+- Avatar
+  - 新增 `Avatar` 组件 (#16144 by @luckyCao)
+- Upload:
+  - 支持自定义缩略图模版 (#13192 by @victorzhuk)
+
+
+#### Bug 修复
+
+- Tree
+  - 当 `currentKey` 为 `null` 时取消对树节点的高亮 (#15668 by @yyjjqq94)
+  - 修复多实例共享数据的问题 #15538 (#15615 by @VanMess)
+- Upload
+  - 更新 `fileList` 的类型定义 (#15716 by @underfin)
+- Table
+  - 修复加载 icon 不显示的问题 (#15868 by @ziyoung)
+  - 修复复杂表格中 hover 行背景色问题 (#15504 by @cnlon)
+  - 修复 `current-row-key` 和选择事件的问题 (#15983 by @ziyoung)
+  - `height` 属性接受更多单位 (#16013 by @ziyoung)
+  - 修复 `reserve-selection` 无效的问题 (#16135 by @ziyoung)
+- Menu
+  - 修复 `popper-append-to-body` 设置后，子菜单无法收起的问题 (#15391 by @PanJiaChen)
+- Select
+  - 修复 `initialInputHeight` 问题 (#15989 by @yyjjqq94)
+  - 修复输入中文时 `default-first-option` 的行为问题 (#15431 by @VanMess)
+  - `import` 重复 (#16215 by @lengband)
+- Message
+  - 类型定义中添加 `offset` 属性 (#16027 by @matjaz)
+- Timeline
+  - 修复逆序问题 (#16091 by @ziyoung)
+- Slider
+  - 补充 `input` 事件文档 (#15588 by @VanMess)
+- InfiniteScroll
+  - 更新包名 (#16125 by @iamkun)
+- MessageBox
+  - 修复 `distinguishCancelAndClose` 行为与文档不符的问题 (#15438 by @qingdengyue)
+- PopupManager
+  - 修复无法复写 `z-index` 的问题 (#15738 by @luckyCao)
+- Docs
+  - 删除不必要的内容 (#16194 by @Alexeykhr)
+  - 更正 `Divider` 属性类型 (#15889 by @haoranyu)
+- Chore
+  - 更新测试 API 地址 (#15807 by @iamkun)
+
+#### 优化
+
+- Tree
+  -优化循环性能 (#15699 by @KingJeason)
+- Theme
+  - 更新 GA 打点，修改页底地址链接到主题编辑器 (#16007 by @island205)
+- Badge
+  - 更新类型定义 (#16198 by @iamkun)
+- Avatar
+  - 更新主题变量配置 (#16202 by @luckyCao)
+- I18n
+  - 更新葡萄牙语 (#15776 by @gigioSouza)
+  - 更新波斯语 (#15881 by @pamenary)
+- Docs
+  - 补充入门文档中的组件列表 (#16063 by @pape2016)
+  - 更新法语文档 (#16208 by @blombard)
+  - 为 `Alert` 添加 默认插槽文档 (#15444 by @Alexeykhr)
+  - 更新西班牙语文档 (#15840 by @Gonzalo2310)
+  - 更新法语文档中的拼写错误 (#15837 by @blombard)
+  - 更新 2.9.2 西班牙文档 (#16185 by @Gonzalo2310)
+
+#### 非兼容性更新
+
+- Form
+  - 移除输入框的成功状态 (#16159 by @ziyoung)
+
+### 2.9.2
+
+*2019-06-21*
+
+#### Bug 修复
+
+- Chore
+  - 修复 TS 定义文件 (#15805 by @NateScarlet)
+
+### 2.9.1
+
+*2019-05-30*
+
+#### 新特性
+
+- Table
+  - Tree Table 支持 tree-props，default-expand-all，expand-row-keys 属性, toggle-row-expansion 方法，expand-change 事件 (#15709 by @ziyoung)
+
+#### Bug 修复
+
+- Table
+  - 修复了一些问题 (#15709 by @ziyoung)
+- Theme
+  - 更新接口域名 (#15784 by @iamkun)
+
+#### 优化
+
+- Chore
+  - 更新 InfiniteScroll 组件定义文件 (#15794 by @iamkun)
+
+### 2.9.0
+
+*2019-05-30*
+
+#### 新特性
+
+- Backtop
+  - 新增 Backtop 组件 (#15541 by @iamkun)
+- PageHeader
+  - 新增 PageHeader 组件 (#15714 by @ziyoung)
+- InfiniteScroll
+  - 新增 InfiniteScroll 指令 (#15567 by @iamkun)
+- Cascader
+  - 新增多选模式和 filter-method 方法 (#15611 by @SimonaliaChen)
+- Message
+  - 信息依次展示 (#15639 by @island205)
+- Tag
+  - 新增 effect 属性 (#15725 by @SimonaliaChen)
+- Tabs
+  - 卡片模式下标题左对齐 (#15695 by @luckyCao)
+- DatePicker
+  - 支持字符串常量 (#15525 by island205)
+- Image
+  - 支持 attrs 和 listeners (#15578 by @VanMess)
+- Theme
+  - 新增 popup 背景配置 (#15412 by @iamkun)
+- Chore
+  - 更新文档首页 (#15682 by @iamkun)
+
+#### Bug 修复
+
+- Table
+  - 修复排序条件为空时的排序问题 (#15012 by @joelxr)
+- Image
+  - 修复 ssr 问题和 object-fit 的兼容性 (#15346 by @SimonaliaChen)
+- Input
+  - 修复 show-word-count 样式问题 (#15359 by @lvjiaxuan)
+  - 修复删除图标样式 (#15354 by @YiiGuxing)
+- Calendar
+  - 修复星期展示错误 (#15399 by @qingdengyue)
+  - 修复十月展示问题 (#15394 by @qingdengyue)
+- Tabs
+  - 修复 padding 问题 (#15461 by @SimonaliaChen)
+- Tag
+  - 修复阻止冒泡问题 (#15150 by @infjer)
+- Form
+  - 修复 form-item 的高度错误 (#15457 by @SimonaliaChen)
+  - 修复 resetFields 问题 (15181 by @luckyCao)
+- Tooltip
+  - 修复自定义 tabindex 不生效问题 (#15619 by @SimonaliaChen)
+- Link
+  - 修复图标 class 问题 (#15752 by @iamkun)
+- Select
+  - 回滚清除时，设置 value 为 null 的修改 (#15447 by @iamkun)
+- Loading
+  - 修复 Dom 不更新的问题 (#15123 by @FAKER-A)
+- Switch
+  - 修复事件重复触发问题 (#15178 by @FAKER-A)
+- Slider
+  - 修复点击时样式问题 (#15561 by @luckyCao)
+- Radio
+  - 修复 value 不更新的问题 (#14809 by @OverTree)
+- Form
+  - 修复 resetFields 问题 (15181 by @luckyCao)
+- Chore
+  - 更新依赖 (#15324 by ziyoung)
+- Type
+  - 修复 Loading 定义文件 (#15635 by @iamkun)
+  - 修复 Icon 定义文件 (#15634 by @iamkun)
+  - 修复 Link 定义文件 (#15402 by @iamkun)
+
+#### 优化
+
+- Cascader
+  - 重构 (#15611 by @SimonaliaChen)
+- Chore
+  - 更新新建组件的脚本 (by @iamkun)
+- Docs
+  - 重新命名文档变量 (#15185 by @liupl)
+  - 更新 Image 组件文档 (#15423 by @haoranyu)
+  - 修复 Form 组件文档错误 (#15228 by @SHERlocked93)
+
+### 2.8.2
+
+*2019-04-25*
+
+#### Bug 修复
+
+- Icon
+  - 更新 icon (#15272 by @iamkun)
+- 文档
+  - 修复 Form 与 Input 文档样式 (#15273 by @ziyoung)
+
+### 2.8.1
+
+*2019-04-25*
+
+#### Bug 修复
+
+- Icon
+  - 更新 Select 与 Cascader 的 icon (#15264 by @SimonaliaChen)
+  - 更新 icon (#15258 by @iamkun)
+
+#### 优化
+
+- Chore
+  - 更新构建脚本 (#15267 by @ziyoung)
+- Docs
+  - 修复 link 的样式 (#15265 by @iamkun)
+- 其他
+  - migrating 配置兼容驼峰名称 (#15260 by @SimonaliaChen)
+
+### 2.8.0
+
+*2019-04-25*
+
+#### 新特性
+
+- Divider
+  - 新增 Divider 组件 (#15055 by @island205)
+- Rate
+  - 支持通过对象自定义 colors 与 icon-classes 属性 (#15051 by @SimonaliaChen)
+- Link
+  - 新增 Link 组件 (#15052 by @iamkun)
+- Calendar
+  - 新增 Calendar 组件 (#14908 by @ziyoung)
+- Icon
+  - 新增图标 (#15214 by @iamkun)
+- Alert
+  - 新增高饱和度主题 (#15041 by @island205)
+- Image
+  - 新增 Image 组件 (#15117 by @SimonaliaChen)
+- Collapse
+  - CollapseItem 支持禁用 (#15076 by @ziyoung)
+- Carousel
+  - 新增 direction 属性，支持垂直方向切换 (#15122 by @ziyoung)
+- Pagination
+  - 新增 hide-on-single-page 属性 (#15096 by @ziyoung)
+- Slider
+  - 新增 marks 属性 (#15133 by @luckyCao)
+- Input
+  - 新增 show-word-count 属性 (#15075 by @luckyCao)
+- InputNumber
+  - 新增 step-strictly 属性 (#15050 by @luckyCao)
+- Tooltip, Dropdown, Popover
+  - 新增 tabindex 属性 (#15167 by @ziyoung)
+
+#### Bug 修复
+
+- Notification
+  - 修复标题不换行的问题 (#15008 by @iamkun)
+- Form
+  - 修复动态表单校验规则不生效的问题 (#14985 by @luckyCao)
+  - 修复 label 的样式 (#14969 by @ziyoung)
+  - 当 required 为 true 时，显示星号 (#15144 by @ziyoung)
+- Pagination
+  - 修复 slot 未更新的问题 (#14711 by @lucyhao)
+- Table
+  - 修复懒加载时加载数据的 bug (#15101 by @ziyoung)
+  - 在合并单元格时，修复单元格的宽度计算不正确的问题 (#15196 by @ziyoung)
+  - 提升表格的性能 (#14868 by @ziyoung)
+  - 初始化时不再触发 sort-change 事件 (#14625 by @PeanutWatson)
+  - 让 height 与 max-height 属性的行为保持一致 (#14660 by @arthurdenner)
+- Dialog
+  - 修复内容不换行的问题 (#15027 by @iamkun)
+- Alert
+  - 更新 typescript 定义文件 (#15186 by @ziyoung)
+- Tabs
+  - Fix issue where Promise rejection was hitting application (#14816 by @ffxsam)
+  - slot 改变时，重新渲染 (#15238 by @ziyoung)
+- Message
+  - 修复 typescript 定义文件 (#14968 by @agoni1212)
+- Select
+  - 修复当 value 为 undefined 或者 null 的报错 (#15022 by @luckyCao)
+- Tree
+  - 当前节点被删除后，选中的节点也应该删除 (#14604 by @sinchang)
+  - 提升性能 (#14881 by @ChenZhuoSteve)
+- Dropdown
+  - 修复样式 (#14907 by @doing123)
+- Slider
+  - 修复可访问性问题 (#14792 by @erezsob)
+- Menu
+  - 如果 defaultIndex 不存在，activeIndex 应该为空 (#14074 by @hoythan)
+- Directive
+  - RepeatClick: 使用 Date.now 提升性能 (#14776 by @pavelmash)
+- Upload
+  - 修复 Upload 的背景颜色 (#15039 by @iamkun)
+- Theme
+  - 添加无圆角变量 (#15256 by @iamkun)
+
+#### 优化
+
+- Chore
+  - 更新中文 changelog (#14965 by @iamkun)
+  - 当 demo 描述为空时，不再显示 (#15014 by @ziyoung)
+  - 显示 DevServer 的信息 (#15028 by @iamkun)
+  - 修复 2.6 changelog 的 bug (#15026 by @iamkun)
+  - 更新构建脚本 (#14821 by @abc3660170)
+  - 本次开发时支持热更新 (#15221 by @SimonaliaChen)
+  - 本地开发时，加载 sourcemap (#15087 by @ibufu)
+Docs
+  - 重命名 demo 中的变量 (#14602 #15003 #15094 #15105 by @liupl)
+  - 修复 upload 文档中的错误 (#15023 by @iamkun)
+  - 更新 Form 文档 (#15040 by @iamkun)
+  - 更新 Tabs 文档 (#15053 by @iamkun)
+  - 使用 eleme.cn 作为新域名 (#15139 by @ziyoung)
+  - 修复 Image 组件的路由名 (#15194 by @iamkun)
+  - 删除多余的法语翻译 (#15207 by @iamkun)
+
+#### 非兼容性更新
+
+- Rate
+  - 禁用情况下，显示小位数 (#15089 by @haoranyu)
+- Select
+  - 过滤情况下，placeholder 为选中选项的 label (#14989 by @ibufu)
+
+### 2.7.2
+
+*2019-04-03*
+
+#### 修复
+
+- Form
+  - 修复 `label-width` 为 `auto` 的样式 (#14955 by @ziyoung)
+
+#### 优化
+- Docs
+  - 修复文档内图片链接错误 (#14957 by @iamkun)
+- Chore
+  - 修复发布时 mkdir 异常 (#14952 by @iamkun)
+
+### 2.7.1
+
+*2019-04-03*
+
+#### 修复
+
+- Select
+  - 清空时设置 value 为 null (#14322 by @aaronfulkerson)
+- Input
+  - 当类型改变时更新 DOM (#14889 by @wacky6)
+- Table
+  - 修复当有展开列时 `defaultExpandAll` 的行为 (#14935 by @ziyoung)
+- Dialog
+  - 可以设置背景色 (#14939 by @ziyoung)
+- Form
+  - `label-width` 支持自动宽度 (#14944 by @ziyoung)
+
+#### 优化
+- Docs
+  - 更新西班牙语文档 (#14913 by @Gonzalo2310)
+  - 新增组件自动生成法语文档 (#14924 by @ziyoung)
+  - 更新 Tabs 文档 (#14938 by @ziyoung)
+
+### 2.7.0
+
+*2019-03-28*
+
+#### 新特性
+
+- Table
+  - 增加对树形结构数据的支持 (#14632 by @ziyoung)
+
+#### 修复
+
+- Tabs
+  - 阴影样式使用全局主颜色 (#14558 by @Richard-Choooou)
+  - 当 label 改变时触发更新 (#14496 by @akki-jat)
+- Table
+  - Table footer 与 body 的对齐一致 (#14730 by @ziyoung)
+- NavMenu
+  - 修复点击 el-submenu 多次触发 childMenu 问题 (#14443 by @PanJiaChen)
+- Dropdown
+  - 兼容 Vue 2.6 新 v-slot 语法 (#14832 by @ziyoung)
+- ColorPicker
+  - 修复十六进制颜色字符串解析问题 (#14793 by @iamkun)
+- Tree
+  - 恢复 pr #13349 (#14847 by @ziyoung)
+- Tooltip
+  - 当初始值为 true 时默认显示 (#14826 by @ziyoung)
+- Docs
+  - 更新 Cascader 文档 (#14442 by @panhezeng)
+- Style
+  - 修复媒体查询 sm-only, md-only, lg-only 问题 (#14611 by @sinchang)
+
+#### 优化
+
+- Chore
+  - 增加网页描述信息 (#14802 by @iamkun)
+
+### 2.6.3
+
+*2019-03-21*
+
+#### 修复
+
+- 修复 Cascader 文档页的样式 (#14789 by @ziyoung)
+- 移除 Cascader 中多余的 DOM 操作 (#14788 by @ziyoung)
+- DateRange 支持夏令时 (#14562 by @wacky6)
+
+### 2.6.2
+
+*2019-03-21*
+
+#### 新特性
+
+- DatePicker
+  - 支持 monthrange 类型 (#14487 by @zxyRealm)
+- i18n
+  - 添加 Croatian 语言包 (#14360 by @danijelh)
+- Docs
+  - 更新 2.6.1 法语文档，修复笔误 (#14555 by @smalesys)
+  - 更新法语翻译 (#14643 by @smalesys)
+
+#### 修复
+
+- Input
+  - Fix regression (#14572 by @wacky6)
+- DatePicker
+  - 修复 first-day-of-week 的计算 (#14523 by @sinchang)
+  - 修复 WeekPicker value-format 的问题 (#13754 by @wacky6)
+- Steps
+  - 修复 #14502 (#14596 by @sinchang)
+  - 修复简单模式下的样式 (#14610 by @sinchang)
+- Docs
+  - 重命名 Table 文档中的变量 (#14587 by @likwotsing)
+  - 添加法语文档索引 (#14565 by @iamkun)
+  - 修复 TimePicker 文档页的样式 (#14579 by @ziyoung)
+  - 重命名 Upload 文档中的变量 (#14593 by @liupl)
+  - 在 Form 文档中 添加的 async-validator 文档 (#14694 by @iamkun)
+  - 修复 Tooltip 文档的 bug (#14748 by @iamkun)
+  - 修复笔误 (#14751 by @2bj)
+  - 修复 Switch 在移动端 Webkit 浏览器的高亮问题 (#14703 by @VladG0r)
+
+#### 优化
+
+- Chore:
+  - 更新 ci 构建脚本 (#14600 by @ziyoung)
+  - 更新谷歌统计 (#14560 by @iamkun)
+  - 添加更多谷歌统计事件 (#14633 by @iamkun)
+  - 更新聊天组信息 (#14741 by @iamkun)
+  - 升级测试依赖 (#14735 by @wacky6)
+  - 升级 gulp (#14745 by @ziyoung)
+  - 使用 codepen 显示 demo，修复文档中的错误 (#14747 by @ziyoung)
+
+### 2.6.1
+
+*2019-03-03*
+
+#### 修复
+
+- **不再指定 node 版本** (by @iamkun in #14546)
+- 调整 `deloy-faas.sh` 中的文档目录 (by @ziyoung in #14553)
+- 调整 2.6.0 中 changelog 日期样式 (by @island205 in #14547)
+- 修复拼写错误 (by @wack6 in #14552)
+
+### 2.6.0
+
+*2019-03-01*
+
+#### 新特性
+- Timeline
+  - 添加 Timeline 组件 (by @jikkai in #14248)
+- DropdownItem
+  - `el-dropdown-item` 支持添加 icon (by @gabrielboliveira in #14088)
+- Input
+  - 添加 `show-password` 属性，支持配置显示密码按钮 (by @phshy0607 in #13966)
+- Select
+  - 添加 slot `empty` (by @elfman in #13785)
+- Autocomplete
+  - 添加 `highlight-first-item` 属性，控制是否默认突出显示远程搜索建议中的第一项 (by @YamenSharaf in #14269)
+- I18n
+  - 添加亚美尼亚语支持 (by @hamletbarsamyan in #14214)
+- Docs
+  - 新增法语文档 (by @smalesys in #12153, #14418, #14434)
+
+#### 优化
+- Alert
+  - 组件对通过 slot 传入的 description 也应用默认样式类 (by @iamkun in #14488)
+- InputNumber
+  -移除多余的 `parseFloat` (by @JuniorTour in #14172)
+- Menu
+  - 支持 `el-menu-item` 不添加 index (by @georgyfarniev in #13298)
+- Table
+  - 移除无用的 DOM 操作 (by @elfman in #13643)
+- Upload
+  - 代码优化 (by @elfman in #13973)
+- Popup
+  - 移除无用代码 (by @KAionro in #14413)
+- Docs
+  - 添加更多文档说明如何贡献代码 (by @island205 in #14355)
+  - 添加 `el-input` 是受控组件的警示 (by @wacky6 in #14463)
+  - 优化 Table 的文档 (by @luguokong in #14329)
+  - 更新 Input 文档 (by @iamkun in #14437)
+  - 优化自定义主题文档 (by @wangguohao in #14297)
+  - 为 Icon 文档添加 hover 效果 (by @tuxinghuan in #14295)
+- Build
+  - 压缩 Element 文档站的 JS 和 CSS 文件 (by @iamkun in #14430)
+  - 优化 Webpack 打包速度，从6分钟优化到1分多 (by @hetech in #14484)
+  - 添加 CLI 工具，选择版本号 (by @hetech in #14354)
+- 使用 Stale 来管理过时（暂定1年）的 Issue 和 PR (by @island205 in #14392)
+
+#### 问题修复
+- Menu
+  - 修复浏览器标签切换引起的 focus 问题 (by @liupl in #13976)
+- MessageBox
+  - 修复 TS 定义 (by @NateScarlet in #14278)
+- ScrollBar
+  - 修复点击鼠标右键导致拖动的问题 (by @xifeiwu in #14196)
+- Switch
+  - 添加 `validate-event` 属性，设置改变 Switch 状态时是否触发表单的校验 (by @hetech in #14426)
+- Table
+  - 修复多 Table 实例共享 `toggleAllSelection` 方法，造成无法切换问题 (by @letanure in #14075)
+- Tabs & Dropdown
+  - 修复样式问题 (by @hetech in #14452)
+- Tree
+  - 与 Table 统一占位文样式 (by @ColinCll in #14331)
+- Docs
+  - 修复 DatetimePicker 文档问题 (by @iamkun in #14290)
+  - 修复 DatePicker 文档拼写问题 (by @helmut in #14481)
+  - 修复分页组件文档样式问题 (by @liuchuzhang in #14451)
+
+#### 非兼容性更新
+- Table
+  - 修复 row 事件的参数顺序 (by @jikkai in #12086)
+
+### 2.5.4
+
+*2019-02-01*
+
+#### 修复
+
+- 构建: 修复 `.babelrc` 配置问题——导致 Tree 等组件没有动画 (by @island205 in #14282)
+
+### 2.5.3
+
+*2019-01-31*
+
+#### 优化
+
+- 优化 Message 的代码 (by @vok123 in #14029)
+- 移除 gh-pages (by @ziyoung in #14266)
+- 添加 IssueHunt 的链接 (by @island205 in #14261)
+
+#### 修复
+
+- 修复 UMD 包在服务器端运行出错的问题 (by @island205 in #14242)
+- 修复 Tabbar 高亮时的样式 (by @iamkun in #14240)
+- 修复 Table 示例代码的错误 (by @xunmeng in #14253)
+
+### 2.5.2
+
+*2019-01-27*
+
+#### 优化
+- 文档:
+  - 2.5.1 版本西班牙语文档更新 (by @Gonzalo2310 in #14231)
+
+#### 修复
+- 构建:
+  - 删除 umd 模块 `lib/index.js` 中本没有的注释 (by @island205 in #14233)
+  - 修复 nuxt.js 中关于 `export` 关键字的报错 (by @island205 in #14232)
+  - 修复发布 2.5.1 过程中的错误 (by @iamkun in #14228)
+
+### 2.5.1
+
+*2019-01-26*
+
+#### 优化
+- DatePicker：添加月、年高亮的样式（by @Debiancc in #14211）
+- 更新 2.5.0 changelog （by @wacky6 in #14217）
+
+
+#### 修复
+- 修复升级 Webpack 4 产生的问题，无法具名 `import` 组件，`ELEMENT.locale()` 调用报错。（by @island205 in #14220）
+- 恢复 2.4.11 文档 (by @iamkun in #14222)
+
+
+### 2.5.0
+
+*2019-01-25*
+
+#### 新特性
+- DatePicker
+  - 新增 `validate-event` 属性 (by @ziyoung in #13531)
+- DateTimePicker
+  - `pickerOptions` 支持 `selectableRange` 选项 (by @eeeeeeeason)
+- Tag
+  - 新增 `click` 事件 (by @licdream in #14106)
+- I18n
+  - 新增 柯尔克孜语 (Kyrgyz) (by @zzjframework in #14174)
+
+#### 优化
+- 升级到 webpack@4 (by @jikkai in #14173)
+- Input
+  - 简化内部实现，遵循单向数据流；修复若干相关 Bug (by @wacky6 in #13471)
+- 更新 Axure 文件，增加新组件 (by @ziyoung in #13773)
+
+#### 修复
+- Autocomplete
+  - 修正下拉框最后一行显示不完整的问题 (by @ziyoung in #13597)
+  - 修正下拉框箭头 (by @liuchuzhang in #13762)
+- Carousel
+  - 组件销毁时释放内部 Timer (by @elfman in #13820)
+- Cascader
+  - 移除已废弃的计算属性的 cache 属性 (by @iamkun in #13737)
+  - 修正 TypeScript 中 CascaderOption 类型定义 (by @NateScarlet in #13613)
+  - 修正图标覆盖文字的问题 (by @ziyoung in #13596)
+- Checkbox
+  - 改进显示样式 (by @PanJiaChen)
+- DatePicker
+  - 修正 TimeSpinner 中缺失的 v-for `key` 属性 (by @Ende93 in #13547)
+  - 修正周选择器在跨年时的高亮行为 (by @suyi91 in #13883)
+- Input
+  - 修复 textarea 时的 DOM 节点引用 (by @laomu1988 @island205 in #13803)
+- Pagination
+  - 输入框的值不会小于 1 (by @elfman in #13727)
+- Popover
+  - 修正 hover 的触发行为 (by @goldengecko in #13104)
+  - 修正弹出框的内存泄漏 (by @qpxtWhite in #13988)
+- Radio
+  - 改进显示样式 (by @ohhoney1)
+- Table
+  - 改进点击排序箭头时的行为 (by @ohhoney1 in #12890)
+  - 修正 IE10+ 中 “暂无数据” 提示的垂直布局 (by @imzjy in #13638)
+  - 修正文档中 `index` 的类型说明 (by @ilovefafa in #13628)
+  - 修正多级表头使用 `fixed` 属性时，表尾合计行的显示样式 (by @luckyCao in #13914)
+- Tabs
+  - 修正自动滚动 (by @iamkun in #13696)
+  - 通过面板名称查找面板 (by @iamkun in #13705)
+  - 使用 `paneName` 计算面板样式 (by @iamkun in #13733)
+- Tree
+  - 修正 `showCheckbox` 不能影响子节点的问题 (by @KidneyFlower)
+  - 更新文档和 TypeScript 定义 (by @ziyoung in #13540)
+- Upload
+  - `list-type` 改变时，保留 `url` 属性 (by @elfman in #13771)
+- Slider
+  - 修正源代码缩进 (by @wacky6 in #13955)
+- I18n
+  - 补充加泰罗尼亚语 (Catalan) 翻译 (by @jaumesala)
+  - 补充俄语 (Russian) 翻译 (by @justlp in #13658)
+  - 补充芬兰语 (Finnish) 翻译 (by @jenkrisu in #14137)
+- Doc
+  - 更新西班牙语文档至 2.4.11 (by @Gonzalo2310 in #13522)
+- 其它
+  - 移除多余的构建脚本 (by @ziyoung)
+  - 修正文档超链接 (by @iamkun in #13753)
+  - 修正文档中不一致的大小写 (by @wonderjar)
+  - 增加钉钉群的二维码 (by @iamkun in #13957)
+  - .gitignore 增加 yarn 日志文件 (by @mimimi in #13922)
+  - 移除赞助商 多态 (by @island205 in #14156)
+  - Update readme qr code src (by @iamkun in #13960)
+  - 更新 CDN 链接，修正错别字 (by @ziyoung)
+
 ### 2.4.11
 
 *2018-11-21*
@@ -40,7 +938,7 @@
 - 用户可以使用 scoped-slot 来自定义表头，#13012（by @ivanseidel）
 - 修复 IE 下 Select 输入框不能输入的问题，#13034（by @GaliMU）
 - Select 多选时，选项不换行，#12329 （by @akki-jat）
-- Select 下拉列表展开后，箭头图标也可以正确显示，#12353（by @firesh） 
+- Select 下拉列表展开后，箭头图标也可以正确显示，#12353（by @firesh）
 - 修复 Select 的 size 属性不生效的问题，#13070
 - 多选时可以清除 Select 已选中的值，#13049（by @ZSkycat）
 - 修复最后一个 TabNav 不能删除的问题，#13039
diff --git a/FAQ.md b/FAQ.md
index 841d7f01321..00a264e0495 100644
--- a/FAQ.md
+++ b/FAQ.md
@@ -45,7 +45,7 @@
 <details>
   <summary>你们的文档怎么偷偷更新了？</summary>
   
-  我们只会在 Element 发布新版本时同步更新文档，以体现最新的变化。详细的更新内容可以查看 [changelog](https://github.com/ElemeFE/element/blob/master/CHANGELOG.zh-CN.md)。
+  我们只会在 Element 发布新版本时同步更新文档，以体现最新的变化。详细的更新内容可以查看 [changelog](https://github.com/femessage/element/blob/master/CHANGELOG.zh-CN.md)。
 </details>
 
 <details>
@@ -117,7 +117,7 @@
 <details>
   <summary>When do you update documentations of Element?</summary>
   
-  We update documentations only when a new version of Element is published so that it reflects all the changes introduced in that version. Updated changed can be found in the [changelog](https://github.com/ElemeFE/element/blob/master/CHANGELOG.en-US.md)。
+  We update documentations only when a new version of Element is published so that it reflects all the changes introduced in that version. Updated changed can be found in the [changelog](https://github.com/femessage/element/blob/master/CHANGELOG.en-US.md)。
 </details>
 
 <details>
@@ -191,7 +191,7 @@
 <details>
   <summary>¿Cuando añaden a la documentación de `Element`?</summary>
   
-  Añadamos la documentación con cada versión nueva de `Element` y los cambios reflejan los cambios del software de esa versión. Los cambios actuales y históricos se encuentran [aquí](https://github.com/ElemeFE/element/blob/master/CHANGELOG.en-US.md).
+  Añadamos la documentación con cada versión nueva de `Element` y los cambios reflejan los cambios del software de esa versión. Los cambios actuales y históricos se encuentran [aquí](https://github.com/femessage/element/blob/master/CHANGELOG.en-US.md).
 </details>
 
 <details>
diff --git a/README.md b/README.md
index d0d228033b0..f2c67e512f0 100644
--- a/README.md
+++ b/README.md
@@ -2,102 +2,27 @@
   <img src="https://cdn.rawgit.com/ElemeFE/element/dev/element_logo.svg">
 </p>
 
-<p align="center">
-  <a href="https://travis-ci.org/ElemeFE/element">
-    <img src="https://travis-ci.org/ElemeFE/element.svg?branch=master">
-  </a>
-  <a href="https://coveralls.io/github/ElemeFE/element?branch=master">
-    <img src="https://coveralls.io/repos/github/ElemeFE/element/badge.svg?branch=master">
-  </a>
-  <a href="https://cdnjs.com/libraries/element-ui">
-    <img src="https://img.shields.io/cdnjs/v/element-ui.svg">
-  </a>
-  <a href="https://www.npmjs.org/package/element-ui">
-    <img src="https://img.shields.io/npm/v/element-ui.svg">
-  </a>
-  <a href="https://npmcharts.com/compare/element-ui?minimal=true">
-    <img src="http://img.shields.io/npm/dm/element-ui.svg">
-  </a>
-  <br>
-  <a href="http://img.badgesize.io/https://unpkg.com/element-ui/lib/index.js?compression=gzip&label=gzip%20size:%20JS">
-    <img src="http://img.badgesize.io/https://unpkg.com/element-ui/lib/index.js?compression=gzip&label=gzip%20size:%20JS">
-  </a>
-  <a href="http://img.badgesize.io/https://unpkg.com/element-ui/lib/theme-chalk/index.css?compression=gzip&label=gzip%20size:%20CSS">
-    <img src="http://img.badgesize.io/https://unpkg.com/element-ui/lib/theme-chalk/index.css?compression=gzip&label=gzip%20size:%20CSS">
-  </a>
-  <a href="#backers">
-    <img src="https://opencollective.com/element/backers/badge.svg">
-  </a>
-  <a href="#sponsors">
-    <img src="https://opencollective.com/element/sponsors/badge.svg">
-  </a>
-  <a href="LICENSE">
-    <img src="https://img.shields.io/badge/License-MIT-yellow.svg">
-  </a>
-</p>
-
-<p align="center">
-  <b>Special thanks to the generous sponsorship by:</b>
-</p>
-<table>
-  <tbody>
-    <tr>
-      <td align="center" valign="middle">
-        <a href="https://tipe.io/?ref=element" target="_blank">
-          <img width="150px" src="https://user-images.githubusercontent.com/1016365/34124854-48fafa06-e3e9-11e7-8c04-251055feebee.png">
-        </a>
-      </td>
-      <td align="center" valign="middle">
-        <a href="https://www.duotai.cn/?utm_source=element" target="_blank">
-          <img width="140px" src="https://user-images.githubusercontent.com/10095631/39403151-c42dbcee-4ba5-11e8-9c09-8e5283da4144.png">
-        </a>
-      </td>
-      <td align="center" valign="middle">
-        <a href="https://www.duohui.cn/?utm_source=element&utm_medium=web&utm_campaign=element-index" target="_blank">
-          <img width="150px" src="https://user-images.githubusercontent.com/10095631/35603534-bb24470c-0678-11e8-8bcc-17ceaef8cbef.png">
-        </a>
-      </td>
-      <td align="center" valign="middle">
-        <a href="https://bitsrc.io/" target="_blank">
-          <img width="150px" src="https://user-images.githubusercontent.com/10095631/41342907-e44e7196-6f2f-11e8-92f2-47702dc8f059.png">
-        </a>
-      </td>
-    </tr>
-  </tbody>
-</table>
-
-> A Vue.js 2.0 UI Toolkit for Web.
+[![Build Status](https://badgen.net/travis/FEMessage/element/master)](https://travis-ci.com/FEMessage/element)
+[![NPM Download](https://badgen.net/npm/dm/@femessage/element-ui)](https://www.npmjs.com/package/@femessage/element-ui)
+[![NPM Version](https://badgen.net/npm/v/@femessage/element-ui)](https://www.npmjs.com/package/@femessage/element-ui)
+[![NPM License](https://badgen.net/npm/license/@femessage/element-ui)](https://github.com/FEMessage/element/blob/master/LICENSE)
+[![PRs Welcome](https://img.shields.io/badge/PRs-welcome-brightgreen.svg)](https://github.com/FEMessage/element/pulls)
+[![Automated Release Notes by gren](https://img.shields.io/badge/%F0%9F%A4%96-release%20notes-00B2EE.svg)](https://github-tools.github.io/github-release-notes/)
 
-## Links
-- Homepage and documentation
-  - [International users](http://element.eleme.io/#/en-US)
-  - [Chinese users](http://element-cn.eleme.io/#/zh-CN)
-  - [Spanish users](http://element.eleme.io/#/es)
-- [awesome-element](https://github.com/ElementUI/awesome-element)
-- [FAQ](./FAQ.md)
-- [Customize theme](http://element.eleme.io/#/en-US/component/custom-theme)
-- [Preview and generate theme online](https://elementui.github.io/theme-chalk-preview)
-- [Element for React](https://github.com/elemefe/element-react)
-- [Element for Angular](https://github.com/ElemeFE/element-angular)
-- [Atom helper](https://github.com/ElemeFE/element-helper)
-- [Visual Studio Code helper](https://github.com/ElemeFE/vscode-element-helper)
-- Starter kit
-  - [element-starter](https://github.com/ElementUI/element-starter)
-  - [element-in-laravel-starter](https://github.com/ElementUI/element-in-laravel-starter)
-- [Design resources](https://github.com/ElementUI/Resources)
-- Gitter
-  - [International users](https://gitter.im/element-en/Lobby)
-  - [Chinese users](https://gitter.im/ElemeFE/element)
+---
 
 ## Install
 ```shell
-npm install element-ui -S
+npm install @femessage/element-ui -S
+
+#or
+yarn add @femessage/element-ui
 ```
 
 ## Quick Start
 ``` javascript
 import Vue from 'vue'
-import Element from 'element-ui'
+import Element from '@femessage/element-ui'
 
 Vue.use(Element)
 
@@ -106,132 +31,90 @@ import {
   Select,
   Button
   // ...
-} from 'element-ui'
+} from '@femessage/element-ui'
 
 Vue.component(Select.name, Select)
 Vue.component(Button.name, Button)
 ```
-For more information, please refer to [Quick Start](http://element.eleme.io/#/en-US/component/quickstart) in our documentation.
+For more information, please refer to [Quick Start](http://femessgae.github.io/#/zh-CN/component/quickstart) in our documentation.
 
-## Browser Support
-Modern browsers and Internet Explorer 10+.
+## Generate Theme
+```sh
+# fork this repository
+
+git clone https://github/{ user || owner }/element.git
+
+# remember: if want to update your component and its css, must merge latest only-component branch into your repository
+git checkout -b only-component new-theme
+
+# modify packages/theme-chalk/src/common/var.scss
+
+# modify package name in packages/theme-chalk/package.json
+
+sh ./publish-theme.sh
+
+# now a new theme publish to npm for your own
+```
+
+The reason to checkout from branch `only-component`, can be found in [Contributing Guide](https://github.com/femessage/element/blob/master/.github/CONTRIBUTING.zh-CN.md)
 
 ## Development
-Skip this part if you just want to use Element.
+```sh
+# install dependence
+yarn bootstrap
+
+# generate files for examples site
+yarn build:file
+
+# generate theme files
+yarn build:theme
+
+# generate utils files
+yarn build:utils
+
+# generate files about locale
+yarn build:umd
+
+# clean files from yarn dist
+yarn clean
+
+# bundle examples site
+yarn deploy:build
+
+# bundle extension files
+yarn deploy:extension
 
-For those who are interested in contributing to Element, please refer to our contributing guide ([中文](https://github.com/ElemeFE/element/blob/master/.github/CONTRIBUTING.zh-CN.md) | [English](https://github.com/ElemeFE/element/blob/master/.github/CONTRIBUTING.en-US.md) | [Español](https://github.com/ElemeFE/element/blob/master/.github/CONTRIBUTING.es.md)) to see how to run this project.
+# extension local dev
+yarn dev:extension
 
-## Changelog
-Detailed changes for each release are documented in the [release notes](https://github.com/ElemeFE/element/releases).
+# local dev and preview examples site
+yarn dev
 
-## FAQ
-We have collected some [frequently asked questions](https://github.com/ElemeFE/element/blob/master/FAQ.md). Before reporting an issue, please search if the FAQ has the answer to your problem.
+# local dev single component
+yarn dev:play
+
+# bundle all lib
+yarn dist
+
+# generate i18n files
+yarn i18n
+
+# using eslint to check code style
+yarn lint
+
+# run unit test
+yarn test
+```
 
 ## Contribution
-Please make sure to read the contributing guide ([中文](https://github.com/ElemeFE/element/blob/master/.github/CONTRIBUTING.zh-CN.md) | [English](https://github.com/ElemeFE/element/blob/master/.github/CONTRIBUTING.en-US.md) | [Español](https://github.com/ElemeFE/element/blob/master/.github/CONTRIBUTING.es.md)) before making a pull request.
-
-## Special Thanks
-English documentation is brought to you by SwiftGG Translation Team:
-- [raychenfj](https://github.com/raychenfj)
-- [kevin](http://thekevin.cn/)
-- [曾小涛](https://github.com/zengxiaotao)
-- [湾仔王二](https://github.com/wanzaiwanger)
-- [BlooDLine](http://www.ibloodline.com/)
-- [陈铭嘉](https://chenmingjia.github.io/)
-- [千叶知风](http://mpc6.com/)
-- [梁杰](http://numbbbbb.com)
-- [Changing](https://github.com/sunzhuo11)
-- [mmoaay](https://github.com/mmoaay)
-
-Spanish documentation is made possible by these community developers:
-- [adavie1](https://github.com/adavie1)
-- [carmencitaqiu](https://github.com/carmencitaqiu)
-- [coderdiaz](https://github.com/coderdiaz)
-- [fedegar33](https://github.com/fedegar33)
-- [Gonzalo2310](https://github.com/Gonzalo2310)
-- [lesterbx](https://github.com/lesterbx)
-- [ProgramerGuy](https://github.com/ProgramerGuy)
-- [SantiagoGdaR](https://github.com/SantiagoGdaR)
-- [sigfriedCub1990](https://github.com/sigfriedCub1990)
-- [thechosenjuan](https://github.com/thechosenjuan)
-
-## Donation
-If you find Element useful, you can buy us a cup of coffee
-
-<img width="650" src="https://user-images.githubusercontent.com/14025786/44833997-5d7c4d80-ac62-11e8-8445-1dffec0eb13c.png" alt="donation">
-
-## Backers
-
-Support us with a monthly donation and help us continue our activities. [[Become a backer](https://opencollective.com/element#backer)]
-
-<a href="https://opencollective.com/element/backer/0/website" target="_blank"><img src="https://opencollective.com/element/backer/0/avatar.svg"></a>
-<a href="https://opencollective.com/element/backer/1/website" target="_blank"><img src="https://opencollective.com/element/backer/1/avatar.svg"></a>
-<a href="https://opencollective.com/element/backer/2/website" target="_blank"><img src="https://opencollective.com/element/backer/2/avatar.svg"></a>
-<a href="https://opencollective.com/element/backer/3/website" target="_blank"><img src="https://opencollective.com/element/backer/3/avatar.svg"></a>
-<a href="https://opencollective.com/element/backer/4/website" target="_blank"><img src="https://opencollective.com/element/backer/4/avatar.svg"></a>
-<a href="https://opencollective.com/element/backer/5/website" target="_blank"><img src="https://opencollective.com/element/backer/5/avatar.svg"></a>
-<a href="https://opencollective.com/element/backer/6/website" target="_blank"><img src="https://opencollective.com/element/backer/6/avatar.svg"></a>
-<a href="https://opencollective.com/element/backer/7/website" target="_blank"><img src="https://opencollective.com/element/backer/7/avatar.svg"></a>
-<a href="https://opencollective.com/element/backer/8/website" target="_blank"><img src="https://opencollective.com/element/backer/8/avatar.svg"></a>
-<a href="https://opencollective.com/element/backer/9/website" target="_blank"><img src="https://opencollective.com/element/backer/9/avatar.svg"></a>
-<a href="https://opencollective.com/element/backer/10/website" target="_blank"><img src="https://opencollective.com/element/backer/10/avatar.svg"></a>
-<a href="https://opencollective.com/element/backer/11/website" target="_blank"><img src="https://opencollective.com/element/backer/11/avatar.svg"></a>
-<a href="https://opencollective.com/element/backer/12/website" target="_blank"><img src="https://opencollective.com/element/backer/12/avatar.svg"></a>
-<a href="https://opencollective.com/element/backer/13/website" target="_blank"><img src="https://opencollective.com/element/backer/13/avatar.svg"></a>
-<a href="https://opencollective.com/element/backer/14/website" target="_blank"><img src="https://opencollective.com/element/backer/14/avatar.svg"></a>
-<a href="https://opencollective.com/element/backer/15/website" target="_blank"><img src="https://opencollective.com/element/backer/15/avatar.svg"></a>
-<a href="https://opencollective.com/element/backer/16/website" target="_blank"><img src="https://opencollective.com/element/backer/16/avatar.svg"></a>
-<a href="https://opencollective.com/element/backer/17/website" target="_blank"><img src="https://opencollective.com/element/backer/17/avatar.svg"></a>
-<a href="https://opencollective.com/element/backer/18/website" target="_blank"><img src="https://opencollective.com/element/backer/18/avatar.svg"></a>
-<a href="https://opencollective.com/element/backer/19/website" target="_blank"><img src="https://opencollective.com/element/backer/19/avatar.svg"></a>
-<a href="https://opencollective.com/element/backer/20/website" target="_blank"><img src="https://opencollective.com/element/backer/20/avatar.svg"></a>
-<a href="https://opencollective.com/element/backer/21/website" target="_blank"><img src="https://opencollective.com/element/backer/21/avatar.svg"></a>
-<a href="https://opencollective.com/element/backer/22/website" target="_blank"><img src="https://opencollective.com/element/backer/22/avatar.svg"></a>
-<a href="https://opencollective.com/element/backer/23/website" target="_blank"><img src="https://opencollective.com/element/backer/23/avatar.svg"></a>
-<a href="https://opencollective.com/element/backer/24/website" target="_blank"><img src="https://opencollective.com/element/backer/24/avatar.svg"></a>
-<a href="https://opencollective.com/element/backer/25/website" target="_blank"><img src="https://opencollective.com/element/backer/25/avatar.svg"></a>
-<a href="https://opencollective.com/element/backer/26/website" target="_blank"><img src="https://opencollective.com/element/backer/26/avatar.svg"></a>
-<a href="https://opencollective.com/element/backer/27/website" target="_blank"><img src="https://opencollective.com/element/backer/27/avatar.svg"></a>
-<a href="https://opencollective.com/element/backer/28/website" target="_blank"><img src="https://opencollective.com/element/backer/28/avatar.svg"></a>
-<a href="https://opencollective.com/element/backer/29/website" target="_blank"><img src="https://opencollective.com/element/backer/29/avatar.svg"></a>
-
-
-## Sponsors
-
-Become a sponsor and get your logo on our README on Github with a link to your site. [[Become a sponsor](https://opencollective.com/element#sponsor)]
-
-<a href="https://opencollective.com/element/sponsor/0/website" target="_blank"><img src="https://opencollective.com/element/sponsor/0/avatar.svg"></a>
-<a href="https://opencollective.com/element/sponsor/1/website" target="_blank"><img src="https://opencollective.com/element/sponsor/1/avatar.svg"></a>
-<a href="https://opencollective.com/element/sponsor/2/website" target="_blank"><img src="https://opencollective.com/element/sponsor/2/avatar.svg"></a>
-<a href="https://opencollective.com/element/sponsor/3/website" target="_blank"><img src="https://opencollective.com/element/sponsor/3/avatar.svg"></a>
-<a href="https://opencollective.com/element/sponsor/4/website" target="_blank"><img src="https://opencollective.com/element/sponsor/4/avatar.svg"></a>
-<a href="https://opencollective.com/element/sponsor/5/website" target="_blank"><img src="https://opencollective.com/element/sponsor/5/avatar.svg"></a>
-<a href="https://opencollective.com/element/sponsor/6/website" target="_blank"><img src="https://opencollective.com/element/sponsor/6/avatar.svg"></a>
-<a href="https://opencollective.com/element/sponsor/7/website" target="_blank"><img src="https://opencollective.com/element/sponsor/7/avatar.svg"></a>
-<a href="https://opencollective.com/element/sponsor/8/website" target="_blank"><img src="https://opencollective.com/element/sponsor/8/avatar.svg"></a>
-<a href="https://opencollective.com/element/sponsor/9/website" target="_blank"><img src="https://opencollective.com/element/sponsor/9/avatar.svg"></a>
-<a href="https://opencollective.com/element/sponsor/10/website" target="_blank"><img src="https://opencollective.com/element/sponsor/10/avatar.svg"></a>
-<a href="https://opencollective.com/element/sponsor/11/website" target="_blank"><img src="https://opencollective.com/element/sponsor/11/avatar.svg"></a>
-<a href="https://opencollective.com/element/sponsor/12/website" target="_blank"><img src="https://opencollective.com/element/sponsor/12/avatar.svg"></a>
-<a href="https://opencollective.com/element/sponsor/13/website" target="_blank"><img src="https://opencollective.com/element/sponsor/13/avatar.svg"></a>
-<a href="https://opencollective.com/element/sponsor/14/website" target="_blank"><img src="https://opencollective.com/element/sponsor/14/avatar.svg"></a>
-<a href="https://opencollective.com/element/sponsor/15/website" target="_blank"><img src="https://opencollective.com/element/sponsor/15/avatar.svg"></a>
-<a href="https://opencollective.com/element/sponsor/16/website" target="_blank"><img src="https://opencollective.com/element/sponsor/16/avatar.svg"></a>
-<a href="https://opencollective.com/element/sponsor/17/website" target="_blank"><img src="https://opencollective.com/element/sponsor/17/avatar.svg"></a>
-<a href="https://opencollective.com/element/sponsor/18/website" target="_blank"><img src="https://opencollective.com/element/sponsor/18/avatar.svg"></a>
-<a href="https://opencollective.com/element/sponsor/19/website" target="_blank"><img src="https://opencollective.com/element/sponsor/19/avatar.svg"></a>
-<a href="https://opencollective.com/element/sponsor/20/website" target="_blank"><img src="https://opencollective.com/element/sponsor/20/avatar.svg"></a>
-<a href="https://opencollective.com/element/sponsor/21/website" target="_blank"><img src="https://opencollective.com/element/sponsor/21/avatar.svg"></a>
-<a href="https://opencollective.com/element/sponsor/22/website" target="_blank"><img src="https://opencollective.com/element/sponsor/22/avatar.svg"></a>
-<a href="https://opencollective.com/element/sponsor/23/website" target="_blank"><img src="https://opencollective.com/element/sponsor/23/avatar.svg"></a>
-<a href="https://opencollective.com/element/sponsor/24/website" target="_blank"><img src="https://opencollective.com/element/sponsor/24/avatar.svg"></a>
-<a href="https://opencollective.com/element/sponsor/25/website" target="_blank"><img src="https://opencollective.com/element/sponsor/25/avatar.svg"></a>
-<a href="https://opencollective.com/element/sponsor/26/website" target="_blank"><img src="https://opencollective.com/element/sponsor/26/avatar.svg"></a>
-<a href="https://opencollective.com/element/sponsor/27/website" target="_blank"><img src="https://opencollective.com/element/sponsor/27/avatar.svg"></a>
-<a href="https://opencollective.com/element/sponsor/28/website" target="_blank"><img src="https://opencollective.com/element/sponsor/28/avatar.svg"></a>
-<a href="https://opencollective.com/element/sponsor/29/website" target="_blank"><img src="https://opencollective.com/element/sponsor/29/avatar.svg"></a>
+Please make sure to read the [Contributing Guide](https://github.com/femessage/element/blob/master/.github/CONTRIBUTING.zh-CN.md) before making a pull request.
 
+## Browser Support
+Modern browsers and Internet Explorer 10+.
 
+## Links
+- [Documentation](https://femessage.github.io/element)
+- [ChangeLog](https://github.com/FEMessage/element/releases)
 
 ## LICENSE
 [MIT](LICENSE)
diff --git a/build/bin/build-entry.js b/build/bin/build-entry.js
index 4958573e7f3..0da9efa2e32 100644
--- a/build/bin/build-entry.js
+++ b/build/bin/build-entry.js
@@ -27,6 +27,7 @@ const install = function(Vue, opts = {}) {
     Vue.component(component.name, component);
   });
 
+  Vue.use(InfiniteScroll);
   Vue.use(Loading.directive);
 
   Vue.prototype.$ELEMENT = {
@@ -41,6 +42,8 @@ const install = function(Vue, opts = {}) {
   Vue.prototype.$prompt = MessageBox.prompt;
   Vue.prototype.$notify = Notification;
   Vue.prototype.$message = Message;
+  Vue.prototype.$alertCenter = MessageBoxCenter.alert;
+  Vue.prototype.$confirmCenter = MessageBoxCenter.confirm;
 
 };
 
@@ -49,7 +52,7 @@ if (typeof window !== 'undefined' && window.Vue) {
   install(window.Vue);
 }
 
-module.exports = {
+export default {
   version: '{{version}}',
   locale: locale.use,
   i18n: locale.i18n,
@@ -58,8 +61,6 @@ module.exports = {
   Loading,
 {{list}}
 };
-
-module.exports.default = module.exports;
 `;
 
 delete Components.font;
@@ -78,7 +79,7 @@ ComponentNames.forEach(name => {
     package: name
   }));
 
-  if (['Loading', 'MessageBox', 'Notification', 'Message'].indexOf(componentName) === -1) {
+  if (['Loading', 'MessageBox', 'Notification', 'Message', 'InfiniteScroll', 'MessageBoxCenter'].indexOf(componentName) === -1) {
     installTemplate.push(render(INSTALL_COMPONENT_TEMPLATE, {
       name: componentName,
       component: name
diff --git a/build/bin/gen-indices.js b/build/bin/gen-indices.js
index 3bffdc7b8c7..ee15913b096 100644
--- a/build/bin/gen-indices.js
+++ b/build/bin/gen-indices.js
@@ -10,10 +10,11 @@ const client = algoliasearch('4C63BTGP6S', key);
 const langs = {
   'zh-CN': 'element-zh',
   'en-US': 'element-en',
-  'es': 'element-es'
+  'es': 'element-es',
+  'fr-FR': 'element-fr'
 };
 
-['zh-CN', 'en-US', 'es'].forEach(lang => {
+['zh-CN', 'en-US', 'es', 'fr-FR'].forEach(lang => {
   const indexName = langs[lang];
   const index = client.initIndex(indexName);
   index.clearIndex(err => {
diff --git a/build/bin/iconInit.js b/build/bin/iconInit.js
index ea55eff5a1b..40691ccee7e 100644
--- a/build/bin/iconInit.js
+++ b/build/bin/iconInit.js
@@ -17,4 +17,6 @@ nodes.forEach((node) => {
   }
 });
 
+classList.reverse(); // 希望按 css 文件顺序倒序排列
+
 fs.writeFile(path.resolve(__dirname, '../../examples/icon.json'), JSON.stringify(classList), () => {});
diff --git a/build/bin/new.js b/build/bin/new.js
index 00d2ffaf842..8f1694a7464 100644
--- a/build/bin/new.js
+++ b/build/bin/new.js
@@ -11,6 +11,7 @@ if (!process.argv[2]) {
 }
 
 const path = require('path');
+const fs = require('fs');
 const fileSave = require('file-save');
 const uppercamelcase = require('uppercamelcase');
 const componentname = process.argv[2];
@@ -53,6 +54,10 @@ export default {
     filename: path.join('../../examples/docs/es', `${componentname}.md`),
     content: `## ${ComponentName}`
   },
+  {
+    filename: path.join('../../examples/docs/fr-FR', `${componentname}.md`),
+    content: `## ${ComponentName}`
+  },
   {
     filename: path.join('../../test/unit/specs', `${componentname}.spec.js`),
     content: `import { createTest, destroyVM } from '../util';
@@ -100,6 +105,29 @@ fileSave(path.join(__dirname, '../../components.json'))
   .write(JSON.stringify(componentsFile, null, '  '), 'utf8')
   .end('\n');
 
+// 添加到 index.scss
+const sassPath = path.join(__dirname, '../../packages/theme-chalk/src/index.scss');
+const sassImportText = `${fs.readFileSync(sassPath)}@import "./${componentname}.scss";`;
+fileSave(sassPath)
+  .write(sassImportText, 'utf8')
+  .end('\n');
+
+// 添加到 element-ui.d.ts
+const elementTsPath = path.join(__dirname, '../../types/element-ui.d.ts');
+
+let elementTsText = `${fs.readFileSync(elementTsPath)}
+/** ${ComponentName} Component */
+export class ${ComponentName} extends El${ComponentName} {}`;
+
+const index = elementTsText.indexOf('export') - 1;
+const importString = `import { El${ComponentName} } from './${componentname}'`;
+
+elementTsText = elementTsText.slice(0, index) + importString + '\n' + elementTsText.slice(index);
+
+fileSave(elementTsPath)
+  .write(elementTsText, 'utf8')
+  .end('\n');
+
 // 创建 package
 Files.forEach(file => {
   fileSave(path.join(PackagePath, file.filename))
diff --git a/build/bin/version.js b/build/bin/version.js
index 4a75cde247c..2220a2691d2 100644
--- a/build/bin/version.js
+++ b/build/bin/version.js
@@ -1,6 +1,6 @@
 var fs = require('fs');
 var path = require('path');
-var version = process.env.VERSION || require('../../package.json').version;
-var content = { '1.4.13': '1.4', '2.0.11': '2.0', '2.1.0': '2.1', '2.2.2': '2.2', '2.3.9': '2.3' };
-if (!content[version]) content[version] = '2.4';
+var version = process.env.VERSION || require('../../packages/theme-chalk/package.json').version;
+var content = {};
+if (!content[version]) content[version] = '2.13';
 fs.writeFileSync(path.resolve(__dirname, '../../examples/versions.json'), JSON.stringify(content));
diff --git a/build/config.js b/build/config.js
index 27b84cea421..d04e25fbfce 100644
--- a/build/config.js
+++ b/build/config.js
@@ -2,29 +2,29 @@ var path = require('path');
 var fs = require('fs');
 var nodeExternals = require('webpack-node-externals');
 var Components = require('../components.json');
-var saladConfig = require('./salad.config.json');
 
 var utilsList = fs.readdirSync(path.resolve(__dirname, '../src/utils'));
 var mixinsList = fs.readdirSync(path.resolve(__dirname, '../src/mixins'));
 var transitionList = fs.readdirSync(path.resolve(__dirname, '../src/transitions'));
 var externals = {};
+var packageName = require('../package.json').name;
 
 Object.keys(Components).forEach(function(key) {
-  externals[`element-ui/packages/${key}`] = `element-ui/lib/${key}`;
+  externals[`element-ui/packages/${key}`] = `${packageName}/lib/${key}`;
 });
 
-externals['element-ui/src/locale'] = 'element-ui/lib/locale';
+externals['element-ui/src/locale'] = `${packageName}/lib/locale`;
 utilsList.forEach(function(file) {
   file = path.basename(file, '.js');
-  externals[`element-ui/src/utils/${file}`] = `element-ui/lib/utils/${file}`;
+  externals[`element-ui/src/utils/${file}`] = `${packageName}/lib/utils/${file}`;
 });
 mixinsList.forEach(function(file) {
   file = path.basename(file, '.js');
-  externals[`element-ui/src/mixins/${file}`] = `element-ui/lib/mixins/${file}`;
+  externals[`element-ui/src/mixins/${file}`] = `${packageName}/lib/mixins/${file}`;
 });
 transitionList.forEach(function(file) {
   file = path.basename(file, '.js');
-  externals[`element-ui/src/transitions/${file}`] = `element-ui/lib/transitions/${file}`;
+  externals[`element-ui/src/transitions/${file}`] = `${packageName}/lib/transitions/${file}`;
 });
 
 externals = [Object.assign({
@@ -47,13 +47,4 @@ exports.vue = {
   amd: 'vue'
 };
 
-exports.jsexclude = /node_modules|utils\/popper\.js|utils\/date.\js/;
-
-exports.postcss = function(webapck) {
-  saladConfig.features.partialImport = {
-    addDependencyTo: webapck
-  };
-  return [
-    require('postcss-salad')(saladConfig)
-  ];
-};
+exports.jsexclude = /node_modules|utils\/popper\.js|utils\/date\.js/;
diff --git a/build/deploy-ci.sh b/build/deploy-ci.sh
index bfccde8706e..76117e3668e 100644
--- a/build/deploy-ci.sh
+++ b/build/deploy-ci.sh
@@ -40,7 +40,7 @@ if [ "$TRAVIS_TAG" ]; then
   # build sub folder
   echo $TRAVIS_TAG
 
-  SUB_FOLDER='2.4'
+  SUB_FOLDER='2.13'
   mkdir $SUB_FOLDER
   rm -rf *.js *.css *.map static
   rm -rf $SUB_FOLDER/**
diff --git a/build/deploy-faas.sh b/build/deploy-faas.sh
index ed6e892c497..708fd18d9b2 100644
--- a/build/deploy-faas.sh
+++ b/build/deploy-faas.sh
@@ -1,12 +1,13 @@
 #! /bin/sh
+set -ex
 mkdir temp_web
 npm run deploy:build
 cd temp_web
 git clone --depth 1 -b gh-pages --single-branch https://github.com/ElemeFE/element.git && cd element
 
 # build sub folder
-SUB_FOLDER='2.4'
-mkdir $SUB_FOLDER
+SUB_FOLDER='2.13'
+mkdir -p $SUB_FOLDER
 rm -rf *.js *.css *.map static
 rm -rf $SUB_FOLDER/**
 cp -rf ../../examples/element-ui/** .
@@ -14,5 +15,5 @@ cp -rf ../../examples/element-ui/** $SUB_FOLDER/
 cd ../..
 
 # deploy domestic site
-faas deploy alpha
-rm -rf temp_web
\ No newline at end of file
+faas deploy alpha -P element
+rm -rf temp_web
diff --git a/build/md-loader/config.js b/build/md-loader/config.js
new file mode 100644
index 00000000000..b491c538b2d
--- /dev/null
+++ b/build/md-loader/config.js
@@ -0,0 +1,26 @@
+const Config = require('markdown-it-chain');
+const anchorPlugin = require('markdown-it-anchor');
+const slugify = require('transliteration').slugify;
+const containers = require('./containers');
+const overWriteFenceRule = require('./fence');
+
+const config = new Config();
+
+config
+  .options.html(true).end()
+
+  .plugin('anchor').use(anchorPlugin, [
+    {
+      level: 2,
+      slugify: slugify,
+      permalink: true,
+      permalinkBefore: true
+    }
+  ]).end()
+
+  .plugin('containers').use(containers).end();
+
+const md = config.toMd();
+overWriteFenceRule(md);
+
+module.exports = md;
diff --git a/build/md-loader/containers.js b/build/md-loader/containers.js
new file mode 100644
index 00000000000..4be9010e7ac
--- /dev/null
+++ b/build/md-loader/containers.js
@@ -0,0 +1,24 @@
+const mdContainer = require('markdown-it-container');
+
+module.exports = md => {
+  md.use(mdContainer, 'demo', {
+    validate(params) {
+      return params.trim().match(/^demo\s*(.*)$/);
+    },
+    render(tokens, idx) {
+      const m = tokens[idx].info.trim().match(/^demo\s*(.*)$/);
+      if (tokens[idx].nesting === 1) {
+        const description = m && m.length > 1 ? m[1] : '';
+        const content = tokens[idx + 1].type === 'fence' ? tokens[idx + 1].content : '';
+        return `<demo-block>
+        ${description ? `<div>${md.render(description)}</div>` : ''}
+        <!--element-demo: ${content}:element-demo-->
+        `;
+      }
+      return '</demo-block>';
+    }
+  });
+
+  md.use(mdContainer, 'tip');
+  md.use(mdContainer, 'warning');
+};
diff --git a/build/md-loader/fence.js b/build/md-loader/fence.js
new file mode 100644
index 00000000000..d32862391ea
--- /dev/null
+++ b/build/md-loader/fence.js
@@ -0,0 +1,14 @@
+// 覆盖默认的 fence 渲染策略
+module.exports = md => {
+  const defaultRender = md.renderer.rules.fence;
+  md.renderer.rules.fence = (tokens, idx, options, env, self) => {
+    const token = tokens[idx];
+    // 判断该 fence 是否在 :::demo 内
+    const prevToken = tokens[idx - 1];
+    const isInDemoContainer = prevToken && prevToken.nesting === 1 && prevToken.info.trim().match(/^demo\s*(.*)$/);
+    if (token.info === 'html' && isInDemoContainer) {
+      return `<template slot="highlight"><pre v-pre><code class="html">${md.utils.escapeHtml(token.content)}</code></pre></template>`;
+    }
+    return defaultRender(tokens, idx, options, env, self);
+  };
+};
diff --git a/build/md-loader/index.js b/build/md-loader/index.js
new file mode 100644
index 00000000000..2ef0e55ceed
--- /dev/null
+++ b/build/md-loader/index.js
@@ -0,0 +1,67 @@
+const {
+  stripScript,
+  stripTemplate,
+  genInlineComponentText
+} = require('./util');
+const md = require('./config');
+
+module.exports = function(source) {
+  const content = md.render(source);
+
+  const startTag = '<!--element-demo:';
+  const startTagLen = startTag.length;
+  const endTag = ':element-demo-->';
+  const endTagLen = endTag.length;
+
+  let componenetsString = '';
+  let id = 0; // demo 的 id
+  let output = []; // 输出的内容
+  let start = 0; // 字符串开始位置
+
+  let commentStart = content.indexOf(startTag);
+  let commentEnd = content.indexOf(endTag, commentStart + startTagLen);
+  while (commentStart !== -1 && commentEnd !== -1) {
+    output.push(content.slice(start, commentStart));
+
+    const commentContent = content.slice(commentStart + startTagLen, commentEnd);
+    const html = stripTemplate(commentContent);
+    const script = stripScript(commentContent);
+    let demoComponentContent = genInlineComponentText(html, script);
+    const demoComponentName = `element-demo${id}`;
+    output.push(`<template slot="source"><${demoComponentName} /></template>`);
+    componenetsString += `${JSON.stringify(demoComponentName)}: ${demoComponentContent},`;
+
+    // 重新计算下一次的位置
+    id++;
+    start = commentEnd + endTagLen;
+    commentStart = content.indexOf(startTag, start);
+    commentEnd = content.indexOf(endTag, commentStart + startTagLen);
+  }
+
+  // 仅允许在 demo 不存在时，才可以在 Markdown 中写 script 标签
+  // todo: 优化这段逻辑
+  let pageScript = '';
+  if (componenetsString) {
+    pageScript = `<script>
+      export default {
+        name: 'component-doc',
+        components: {
+          ${componenetsString}
+        }
+      }
+    </script>`;
+  } else if (content.indexOf('<script>') === 0) { // 硬编码，有待改善
+    start = content.indexOf('</script>') + '</script>'.length;
+    pageScript = content.slice(0, start);
+  }
+
+  output.push(content.slice(start));
+  return `
+    <template>
+      <section class="content element-doc">
+        ${output.join('')}
+      </section>
+    </template>
+    ${pageScript}
+  `;
+};
diff --git a/build/md-loader/util.js b/build/md-loader/util.js
new file mode 100644
index 00000000000..a9572aa40fe
--- /dev/null
+++ b/build/md-loader/util.js
@@ -0,0 +1,79 @@
+const { compileTemplate } = require('@vue/component-compiler-utils');
+const compiler = require('vue-template-compiler');
+
+function stripScript(content) {
+  const result = content.match(/<(script)>([\s\S]+)<\/\1>/);
+  return result && result[2] ? result[2].trim() : '';
+}
+
+function stripStyle(content) {
+  const result = content.match(/<(style)\s*>([\s\S]+)<\/\1>/);
+  return result && result[2] ? result[2].trim() : '';
+}
+
+// 编写例子时不一定有 template。所以采取的方案是剔除其他的内容
+function stripTemplate(content) {
+  content = content.trim();
+  if (!content) {
+    return content;
+  }
+  return content.replace(/<(script|style)[\s\S]+<\/\1>/g, '').trim();
+}
+
+function pad(source) {
+  return source
+    .split(/\r?\n/)
+    .map(line => `  ${line}`)
+    .join('\n');
+}
+
+function genInlineComponentText(template, script) {
+  // https://github.com/vuejs/vue-loader/blob/423b8341ab368c2117931e909e2da9af74503635/lib/loaders/templateLoader.js#L46
+  const finalOptions = {
+    source: `<div>${template}</div>`,
+    filename: 'inline-component', // TODO：这里有待调整
+    compiler
+  };
+  const compiled = compileTemplate(finalOptions);
+  // tips
+  if (compiled.tips && compiled.tips.length) {
+    compiled.tips.forEach(tip => {
+      console.warn(tip);
+    });
+  }
+  // errors
+  if (compiled.errors && compiled.errors.length) {
+    console.error(
+      `\n  Error compiling template:\n${pad(compiled.source)}\n` +
+        compiled.errors.map(e => `  - ${e}`).join('\n') +
+        '\n'
+    );
+  }
+  let demoComponentContent = `
+    ${compiled.code}
+  `;
+  // todo: 这里采用了硬编码有待改进
+  script = script.trim();
+  if (script) {
+    script = script.replace(/export\s+default/, 'const democomponentExport =');
+  } else {
+    script = 'const democomponentExport = {}';
+  }
+  demoComponentContent = `(function() {
+    ${demoComponentContent}
+    ${script}
+    return {
+      render,
+      staticRenderFns,
+      ...democomponentExport
+    }
+  })()`;
+  return demoComponentContent;
+}
+
+module.exports = {
+  stripScript,
+  stripStyle,
+  stripTemplate,
+  genInlineComponentText
+};
diff --git a/build/release.sh b/build/release.sh
index 1f6dccc2efc..29711a2e990 100644
--- a/build/release.sh
+++ b/build/release.sh
@@ -1,10 +1,10 @@
+#!/usr/bin/env sh
+set -e
+
 git checkout master
 git merge dev
 
-#!/usr/bin/env sh
-set -e
-echo "Enter release version: "
-read VERSION
+VERSION=`npx select-version-cli`
 
 read -p "Releasing $VERSION - are you sure? (y/n)" -n 1 -r
 echo    # (optional) move to a new line
@@ -15,6 +15,9 @@ then
   # build
   VERSION=$VERSION npm run dist
 
+  # ssr test
+  node test/ssr/require.test.js            
+
   # publish theme
   echo "Releasing theme-chalk $VERSION ..."
   cd packages/theme-chalk
diff --git a/build/salad.config.json b/build/salad.config.json
deleted file mode 100644
index 1d82ab8c332..00000000000
--- a/build/salad.config.json
+++ /dev/null
@@ -1,16 +0,0 @@
-{
-  "browsers": ["ie > 8", "last 2 versions"],
-  "features": {
-    "bem": {
-      "shortcuts": {
-        "component": "b",
-        "modifier": "m",
-        "descendent": "e"
-      },
-      "separators": {
-        "descendent": "__",
-        "modifier": "--"
-      }
-    }
-  }
-}
diff --git a/build/strip-tags.js b/build/strip-tags.js
deleted file mode 100644
index bbb719c19a7..00000000000
--- a/build/strip-tags.js
+++ /dev/null
@@ -1,34 +0,0 @@
-/*!
- * strip-tags <https://github.com/jonschlinkert/strip-tags>
- *
- * Copyright (c) 2015 Jon Schlinkert, contributors.
- * Licensed under the MIT license.
- */
-
-'use strict';
-
-var cheerio = require('cheerio');
-
-exports.strip = function(str, tags) {
-  var $ = cheerio.load(str, {decodeEntities: false});
-
-  if (!tags || tags.length === 0) {
-    return str;
-  }
-
-  tags = !Array.isArray(tags) ? [tags] : tags;
-  var len = tags.length;
-
-  while (len--) {
-    $(tags[len]).remove();
-  }
-
-  return $.html();
-};
-
-exports.fetch = function(str, tag) {
-  var $ = cheerio.load(str, {decodeEntities: false});
-  if (!tag) return str;
-
-  return $(tag).html();
-};
diff --git a/build/webpack.common.js b/build/webpack.common.js
index e9a6085c82a..9cc65567094 100644
--- a/build/webpack.common.js
+++ b/build/webpack.common.js
@@ -1,10 +1,11 @@
 const path = require('path');
-const webpack = require('webpack');
 const ProgressBarPlugin = require('progress-bar-webpack-plugin');
+const VueLoaderPlugin = require('vue-loader/lib/plugin');
 
 const config = require('./config');
 
 module.exports = {
+  mode: 'production',
   entry: {
     app: ['./src/index.js']
   },
@@ -13,6 +14,8 @@ module.exports = {
     publicPath: '/dist/',
     filename: 'element-ui.common.js',
     chunkFilename: '[id].js',
+    libraryExport: 'default',
+    library: 'ELEMENT',
     libraryTarget: 'commonjs2'
   },
   resolve: {
@@ -21,6 +24,15 @@ module.exports = {
     modules: ['node_modules']
   },
   externals: config.externals,
+  performance: {
+    hints: false
+  },
+  stats: {
+    children: false
+  },
+  optimization: {
+    minimize: false
+  },
   module: {
     rules: [
       {
@@ -33,43 +45,17 @@ module.exports = {
         test: /\.vue$/,
         loader: 'vue-loader',
         options: {
-          preserveWhitespace: false
+          compilerOptions: {
+            preserveWhitespace: false
+          }
         }
       },
-      {
-        test: /\.json$/,
-        loader: 'json-loader'
-      },
       {
         test: /\.css$/,
-        loaders: ['style-loader', 'css-loader', 'postcss-loader']
-      },
-      {
-        test: /\.scss$/,
-        loaders: ['style-loader', 'css-loader', 'sass-loader']
-      },
-      {
-        test: /\.html$/,
-        loader: 'html-loader?minimize=false'
-      },
-      {
-        test: /\.otf|ttf|woff2?|eot(\?\S*)?$/,
-        loader: 'url-loader',
-        query: {
-          limit: 10000,
-          name: path.posix.join('static', '[name].[hash:7].[ext]')
-        }
-      },
-      {
-        test: /\.svg(\?\S*)?$/,
-        loader: 'url-loader',
-        query: {
-          limit: 10000,
-          name: path.posix.join('static', '[name].[hash:7].[ext]')
-        }
+        loaders: ['style-loader', 'css-loader']
       },
       {
-        test: /\.(gif|png|jpe?g)(\?\S*)?$/,
+        test: /\.(svg|otf|ttf|woff2?|eot|gif|png|jpe?g)(\?\S*)?$/,
         loader: 'url-loader',
         query: {
           limit: 10000,
@@ -80,11 +66,6 @@ module.exports = {
   },
   plugins: [
     new ProgressBarPlugin(),
-    new webpack.DefinePlugin({
-      'process.env.NODE_ENV': JSON.stringify('production')
-    }),
-    new webpack.LoaderOptionsPlugin({
-      minimize: true
-    })
+    new VueLoaderPlugin()
   ]
 };
diff --git a/build/webpack.component.js b/build/webpack.component.js
index e4d4fa6b7ca..2ea8c5ae80b 100644
--- a/build/webpack.component.js
+++ b/build/webpack.component.js
@@ -1,11 +1,12 @@
 const path = require('path');
-const webpack = require('webpack');
 const ProgressBarPlugin = require('progress-bar-webpack-plugin');
+const VueLoaderPlugin = require('vue-loader/lib/plugin');
 
 const Components = require('../components.json');
 const config = require('./config');
 
 const webpackConfig = {
+  mode: 'production',
   entry: Components,
   output: {
     path: path.resolve(process.cwd(), './lib'),
@@ -20,6 +21,13 @@ const webpackConfig = {
     modules: ['node_modules']
   },
   externals: config.externals,
+  performance: {
+    hints: false
+  },
+  stats: 'none',
+  optimization: {
+    minimize: false
+  },
   module: {
     rules: [
       {
@@ -32,43 +40,17 @@ const webpackConfig = {
         test: /\.vue$/,
         loader: 'vue-loader',
         options: {
-          preserveWhitespace: false
+          compilerOptions: {
+            preserveWhitespace: false
+          }
         }
       },
-      {
-        test: /\.json$/,
-        loader: 'json-loader'
-      },
       {
         test: /\.css$/,
-        loaders: ['style-loader', 'css-loader', 'postcss-loader']
-      },
-      {
-        test: /\.scss$/,
-        loaders: ['style-loader', 'css-loader', 'sass-loader']
-      },
-      {
-        test: /\.html$/,
-        loader: 'html-loader?minimize=false'
-      },
-      {
-        test: /\.otf|ttf|woff2?|eot(\?\S*)?$/,
-        loader: 'url-loader',
-        query: {
-          limit: 10000,
-          name: path.posix.join('static', '[name].[hash:7].[ext]')
-        }
-      },
-      {
-        test: /\.svg(\?\S*)?$/,
-        loader: 'url-loader',
-        query: {
-          limit: 10000,
-          name: path.posix.join('static', '[name].[hash:7].[ext]')
-        }
+        loaders: ['style-loader', 'css-loader']
       },
       {
-        test: /\.(gif|png|jpe?g)(\?\S*)?$/,
+        test: /\.(svg|otf|ttf|woff2?|eot|gif|png|jpe?g)(\?\S*)?$/,
         loader: 'url-loader',
         query: {
           limit: 10000,
@@ -79,12 +61,7 @@ const webpackConfig = {
   },
   plugins: [
     new ProgressBarPlugin(),
-    new webpack.DefinePlugin({
-      'process.env.NODE_ENV': JSON.stringify('production')
-    }),
-    new webpack.LoaderOptionsPlugin({
-      minimize: true
-    })
+    new VueLoaderPlugin()
   ]
 };
 
diff --git a/build/webpack.conf.js b/build/webpack.conf.js
index 1f730012657..2c792af0597 100644
--- a/build/webpack.conf.js
+++ b/build/webpack.conf.js
@@ -1,10 +1,12 @@
 const path = require('path');
-const webpack = require('webpack');
 const ProgressBarPlugin = require('progress-bar-webpack-plugin');
+const VueLoaderPlugin = require('vue-loader/lib/plugin');
+const TerserPlugin = require('terser-webpack-plugin');
 
 const config = require('./config');
 
 module.exports = {
+  mode: 'production',
   entry: {
     app: ['./src/index.js']
   },
@@ -14,8 +16,10 @@ module.exports = {
     filename: 'index.js',
     chunkFilename: '[id].js',
     libraryTarget: 'umd',
+    libraryExport: 'default',
     library: 'ELEMENT',
-    umdNamedDefine: true
+    umdNamedDefine: true,
+    globalObject: 'typeof self !== \'undefined\' ? self : this'
   },
   resolve: {
     extensions: ['.js', '.vue', '.json'],
@@ -24,6 +28,23 @@ module.exports = {
   externals: {
     vue: config.vue
   },
+  optimization: {
+    minimizer: [
+      new TerserPlugin({
+        terserOptions: {
+          output: {
+            comments: false
+          }
+        }
+      })
+    ]
+  },
+  performance: {
+    hints: false
+  },
+  stats: {
+    children: false
+  },
   module: {
     rules: [
       {
@@ -36,67 +57,19 @@ module.exports = {
         test: /\.vue$/,
         loader: 'vue-loader',
         options: {
-          preserveWhitespace: false
-        }
-      },
-      {
-        test: /\.json$/,
-        loader: 'json-loader'
-      },
-      {
-        test: /\.css$/,
-        loaders: ['style-loader', 'css-loader', 'postcss-loader']
-      },
-      {
-        test: /\.scss$/,
-        loaders: ['style-loader', 'css-loader', 'sass-loader']
-      },
-      {
-        test: /\.html$/,
-        loader: 'html-loader?minimize=false'
-      },
-      {
-        test: /\.otf|ttf|woff2?|eot(\?\S*)?$/,
-        loader: 'url-loader',
-        query: {
-          limit: 10000,
-          name: path.posix.join('static', '[name].[hash:7].[ext]')
+          compilerOptions: {
+            preserveWhitespace: false
+          }
         }
       },
       {
-        test: /\.svg(\?\S*)?$/,
-        loader: 'url-loader',
-        query: {
-          limit: 10000,
-          name: path.posix.join('static', '[name].[hash:7].[ext]')
-        }
-      },
-      {
-        test: /\.(gif|png|jpe?g)(\?\S*)?$/,
-        loader: 'url-loader',
-        query: {
-          limit: 10000,
-          name: path.posix.join('static', '[name].[hash:7].[ext]')
-        }
+        test: /\.svg$/,
+        loader: 'svg-inline-loader'
       }
     ]
   },
   plugins: [
     new ProgressBarPlugin(),
-    new webpack.DefinePlugin({
-      'process.env.NODE_ENV': JSON.stringify('production')
-    }),
-    new webpack.optimize.UglifyJsPlugin({
-      compress: {
-        warnings: false
-      },
-      output: {
-        comments: false
-      },
-      sourceMap: false
-    }),
-    new webpack.LoaderOptionsPlugin({
-      minimize: true
-    })
+    new VueLoaderPlugin()
   ]
 };
diff --git a/build/webpack.demo.js b/build/webpack.demo.js
index e341926c2f4..4ad30ae1f85 100644
--- a/build/webpack.demo.js
+++ b/build/webpack.demo.js
@@ -1,38 +1,22 @@
 const path = require('path');
 const webpack = require('webpack');
+const MiniCssExtractPlugin = require('mini-css-extract-plugin');
 const CopyWebpackPlugin = require('copy-webpack-plugin');
 const HtmlWebpackPlugin = require('html-webpack-plugin');
-const ExtractTextPlugin = require('extract-text-webpack-plugin');
 const ProgressBarPlugin = require('progress-bar-webpack-plugin');
-const md = require('markdown-it')();
-const slugify = require('transliteration').slugify;
+const VueLoaderPlugin = require('vue-loader/lib/plugin');
+const OptimizeCSSAssetsPlugin = require('optimize-css-assets-webpack-plugin');
+const UglifyJsPlugin = require('uglifyjs-webpack-plugin');
 
-const striptags = require('./strip-tags');
 const config = require('./config');
 
 const isProd = process.env.NODE_ENV === 'production';
-const isDev = process.env.NODE_ENV === 'development';
 const isPlay = !!process.env.PLAY_ENV;
 
-function convert(str) {
-  str = str.replace(/(&#x)(\w{4});/gi, function($0) {
-    return String.fromCharCode(parseInt(encodeURIComponent($0).replace(/(%26%23x)(\w{4})(%3B)/g, '$2'), 16));
-  });
-  return str;
-}
-
-function wrap(render) {
-  return function() {
-    return render.apply(this, arguments)
-      .replace('<code v-pre class="', '<code class="hljs ')
-      .replace('<code>', '<code class="hljs">');
-  };
-}
-
 const webpackConfig = {
+  mode: process.env.NODE_ENV,
   entry: isProd ? {
-    docs: './examples/entry.js',
-    'element-ui': './src/index.js'
+    docs: './examples/entry.js'
   } : (isPlay ? './examples/play.js' : './examples/entry.js'),
   output: {
     path: path.resolve(process.cwd(), './examples/element-ui/'),
@@ -49,20 +33,20 @@ const webpackConfig = {
     host: '0.0.0.0',
     port: 8085,
     publicPath: '/',
-    noInfo: true
+    hot: true
+  },
+  performance: {
+    hints: false
+  },
+  stats: {
+    children: false
   },
   module: {
     rules: [
       {
         enforce: 'pre',
-        test: /\.jsx?$/,
-        exclude: /node_modules|bower_components/,
-        loader: 'eslint-loader'
-      },
-      {
-        enforce: 'pre',
-        test: /\.vue$/,
-        exclude: /node_modules|bower_components/,
+        test: /\.(vue|jsx?)$/,
+        exclude: /node_modules/,
         loader: 'eslint-loader'
       },
       {
@@ -72,87 +56,42 @@ const webpackConfig = {
         loader: 'babel-loader'
       },
       {
-        test: /\.md$/,
-        loader: 'vue-markdown-loader',
+        test: /\.vue$/,
+        loader: 'vue-loader',
         options: {
-          use: [
-            [require('markdown-it-anchor'), {
-              level: 2,
-              slugify: slugify,
-              permalink: true,
-              permalinkBefore: true
-            }],
-            [require('markdown-it-container'), 'demo', {
-              validate: function(params) {
-                return params.trim().match(/^demo\s*(.*)$/);
-              },
-
-              render: function(tokens, idx) {
-                var m = tokens[idx].info.trim().match(/^demo\s*(.*)$/);
-                if (tokens[idx].nesting === 1) {
-                  var description = (m && m.length > 1) ? m[1] : '';
-                  var content = tokens[idx + 1].content;
-                  var html = convert(striptags.strip(content, ['script', 'style'])).replace(/(<[^>]*)=""(?=.*>)/g, '$1');
-                  var script = striptags.fetch(content, 'script');
-                  var style = striptags.fetch(content, 'style');
-                  var jsfiddle = { html: html, script: script, style: style };
-                  var descriptionHTML = description
-                    ? md.render(description)
-                    : '';
-
-                  jsfiddle = md.utils.escapeHtml(JSON.stringify(jsfiddle));
-
-                  return `<demo-block class="demo-box" :jsfiddle="${jsfiddle}">
-                            <div class="source" slot="source">${html}</div>
-                            ${descriptionHTML}
-                            <div class="highlight" slot="highlight">`;
-                }
-                return '</div></demo-block>\n';
-              }
-            }],
-            [require('markdown-it-container'), 'tip'],
-            [require('markdown-it-container'), 'warning']
-          ],
-          preprocess: function(MarkdownIt, source) {
-            MarkdownIt.renderer.rules.table_open = function() {
-              return '<table class="table">';
-            };
-            MarkdownIt.renderer.rules.fence = wrap(MarkdownIt.renderer.rules.fence);
-            return source;
+          compilerOptions: {
+            preserveWhitespace: false
           }
         }
       },
       {
-        test: /\.json$/,
-        loader: 'json-loader'
-      },
-      {
-        test: /\.scss$/,
-        loaders: ['style-loader', 'css-loader', 'sass-loader']
-      },
-      {
-        test: /\.html$/,
-        loader: 'html-loader?minimize=false'
-      },
-      {
-        test: /\.otf|ttf|woff2?|eot(\?\S*)?$/,
-        loader: 'url-loader',
-        query: {
-          limit: 10000,
-          name: path.posix.join('static', '[name].[hash:7].[ext]')
-        }
+        test: /\.(scss|css)$/,
+        use: [
+          isProd ? MiniCssExtractPlugin.loader : 'style-loader',
+          'css-loader',
+          'sass-loader'
+        ]
       },
       {
-        test: /\.svg(\?\S*)?$/,
-        loader: 'url-loader',
-        query: {
-          limit: 10000,
-          name: path.posix.join('static', '[name].[hash:7].[ext]')
-        }
+        test: /\.md$/,
+        use: [
+          {
+            loader: 'vue-loader',
+            options: {
+              compilerOptions: {
+                preserveWhitespace: false
+              }
+            }
+          },
+          {
+            loader: path.resolve(__dirname, './md-loader/index.js')
+          }
+        ]
       },
       {
-        test: /\.(gif|png|jpe?g)(\?\S*)?$/,
+        test: /\.(svg|otf|ttf|woff2?|eot|gif|png|jpe?g)(\?\S*)?$/,
         loader: 'url-loader',
+        // todo: 这种写法有待调整
         query: {
           limit: 10000,
           name: path.posix.join('static', '[name].[hash:7].[ext]')
@@ -161,6 +100,7 @@ const webpackConfig = {
     ]
   },
   plugins: [
+    new webpack.HotModuleReplacementPlugin(),
     new HtmlWebpackPlugin({
       template: './examples/index.tpl',
       filename: './index.html',
@@ -170,82 +110,54 @@ const webpackConfig = {
       { from: 'examples/versions.json' }
     ]),
     new ProgressBarPlugin(),
+    new VueLoaderPlugin(),
+    new webpack.DefinePlugin({
+      'process.env.FAAS_ENV': JSON.stringify(process.env.FAAS_ENV)
+    }),
     new webpack.LoaderOptionsPlugin({
-      minimize: true,
       vue: {
-        preserveWhitespace: false
+        compilerOptions: {
+          preserveWhitespace: false
+        }
       }
     })
-  ]
+  ],
+  optimization: {
+    minimizer: []
+  },
+  devtool: '#eval-source-map'
 };
 
 if (isProd) {
   webpackConfig.externals = {
     vue: 'Vue',
-    'vue-router': 'VueRouter'
+    'vue-router': 'VueRouter',
+    'highlight.js': 'hljs'
   };
-  webpackConfig.module.rules.push(
-    {
-      test: /\.vue$/,
-      loader: 'vue-loader',
-      options: {
-        extractCSS: true,
-        preserveWhitespace: false
-      }
-    },
-    {
-      test: /\.css$/,
-      loader: ExtractTextPlugin.extract({
-        fallback: 'style-loader',
-        use: [
-          { loader: 'css-loader', options: { importLoaders: 1 } },
-          'postcss-loader'
-        ]
-      })
-    }
-  );
   webpackConfig.plugins.push(
-    new webpack.optimize.UglifyJsPlugin({
-      compress: {
-        warnings: false
-      },
-      output: {
-        comments: false
-      },
-      sourceMap: false
-    }),
-    new ExtractTextPlugin({
+    new MiniCssExtractPlugin({
       filename: '[name].[contenthash:7].css'
-    }),
-    new webpack.DefinePlugin({
-      'process.env.NODE_ENV': JSON.stringify('production')
-    }),
-    new webpack.optimize.CommonsChunkPlugin({
-      name: ['element-ui', 'manifest']
     })
   );
-}
-if (isDev) {
-  webpackConfig.module.rules.push(
-    {
-      test: /\.vue$/,
-      loader: 'vue-loader',
-      options: {
-        preserveWhitespace: false
+  webpackConfig.optimization.minimizer.push(
+    new UglifyJsPlugin({
+      cache: true,
+      parallel: true,
+      sourceMap: false
+    }),
+    new OptimizeCSSAssetsPlugin({})
+  );
+  // https://webpack.js.org/configuration/optimization/#optimizationsplitchunks
+  webpackConfig.optimization.splitChunks = {
+    cacheGroups: {
+      vendor: {
+        test: /\/src\//,
+        name: 'element-ui',
+        chunks: 'all'
       }
-    },
-    {
-      test: /\.css$/,
-      loaders: ['style-loader', 'css-loader', 'postcss-loader']
     }
-  );
-  webpackConfig.plugins.push(
-    new webpack.HotModuleReplacementPlugin(),
-    new webpack.NamedModulesPlugin(),
-    new webpack.DefinePlugin({
-      'process.env.NODE_ENV': JSON.stringify('development')
-    })
-  );
+  };
+  webpackConfig.devtool = false;
 }
 
 module.exports = webpackConfig;
diff --git a/build/webpack.extension.js b/build/webpack.extension.js
new file mode 100644
index 00000000000..2f8752c5956
--- /dev/null
+++ b/build/webpack.extension.js
@@ -0,0 +1,33 @@
+const path = require('path');
+const CopyWebpackPlugin = require('copy-webpack-plugin');
+const demoConfig = require('./webpack.demo');
+const webpack = require('webpack');
+const ProgressBarPlugin = require('progress-bar-webpack-plugin');
+const VueLoaderPlugin = require('vue-loader/lib/plugin');
+
+demoConfig.entry = {
+  background: path.join(process.cwd(), './examples/extension/src/background'),
+  entry: path.join(process.cwd(), './examples/extension/src/entry')
+};
+demoConfig.output = {
+  path: path.join(process.cwd(), './examples/extension/dist'),
+  filename: '[name].js'
+};
+demoConfig.plugins = [
+  new CopyWebpackPlugin([
+    { from: 'examples/extension/src/manifest.json' },
+    { from: 'examples/extension/src/icon.png' }
+  ]),
+  new VueLoaderPlugin(),
+  new ProgressBarPlugin(),
+  new webpack.LoaderOptionsPlugin({
+    vue: {
+      compilerOptions: {
+        preserveWhitespace: false
+      }
+    }
+  }),
+  new webpack.HotModuleReplacementPlugin()
+];
+demoConfig.module.rules.find(a => a.loader === 'url-loader').query = {};
+module.exports = demoConfig;
diff --git a/build/webpack.test.js b/build/webpack.test.js
index 54f4f515c57..e8f78cb7c65 100644
--- a/build/webpack.test.js
+++ b/build/webpack.test.js
@@ -1,9 +1,11 @@
 const path = require('path');
 const ProgressBarPlugin = require('progress-bar-webpack-plugin');
+const VueLoaderPlugin = require('vue-loader/lib/plugin');
 
 const config = require('./config');
 
 const webpackConfig = {
+  mode: 'development',
   entry: {
     app: ['./src/index.js']
   },
@@ -20,17 +22,8 @@ const webpackConfig = {
     }),
     modules: ['node_modules']
   },
-  devtool: '#inline-source-map',
   module: {
     rules: [
-      {
-        enforce: 'post',
-        test: /\.jsx?$/,
-        loader: 'isparta-loader',
-        options: { esModules: true },
-        exclude: config.jsexclude,
-        include: /src|packages/
-      },
       {
         test: /\.(jsx?|babel|es6)$/,
         include: process.cwd(),
@@ -41,42 +34,17 @@ const webpackConfig = {
         test: /\.vue$/,
         loader: 'vue-loader',
         options: {
-          loaders: {
-            js: process.env.CI_ENV ? 'isparta-loader' : 'isparta-loader!eslint-loader'
-          },
-          preserveWhitespace: false
+          compilerOptions: {
+            preserveWhitespace: false
+          }
         }
       },
-      {
-        test: /\.json$/,
-        loader: 'json-loader'
-      },
       {
         test: /\.css$/,
-        loaders: ['style-loader', 'css-loader', 'postcss-loader']
-      },
-      {
-        test: /\.html$/,
-        loader: 'html-loader?minimize=false'
-      },
-      {
-        test: /\.otf|ttf|woff2?|eot(\?\S*)?$/,
-        loader: 'url-loader',
-        query: {
-          limit: 10000,
-          name: path.posix.join('static', '[name].[hash:7].[ext]')
-        }
-      },
-      {
-        test: /\.svg(\?\S*)?$/,
-        loader: 'url-loader',
-        query: {
-          limit: 10000,
-          name: path.posix.join('static', '[name].[hash:7].[ext]')
-        }
+        loaders: ['style-loader', 'css-loader']
       },
       {
-        test: /\.(gif|png|jpe?g)(\?\S*)?$/,
+        test: /\.(svg|otf|ttf|woff2?|eot|gif|png|jpe?g)(\?\S*)?$/,
         loader: 'url-loader',
         query: {
           limit: 10000,
@@ -86,6 +54,7 @@ const webpackConfig = {
     ]
   },
   plugins: [
+    new VueLoaderPlugin()
   ]
 };
 
diff --git a/commitlint.config.js b/commitlint.config.js
new file mode 100644
index 00000000000..a072cbbc879
--- /dev/null
+++ b/commitlint.config.js
@@ -0,0 +1,6 @@
+module.exports = {
+  extends: ['@commitlint/config-conventional'],
+  rules: {
+    'type-enum': [0, 'always', ['merge', 'theme']]
+  }
+};
diff --git a/components.json b/components.json
index 7e8b58a93aa..ab1f9ab411f 100644
--- a/components.json
+++ b/components.json
@@ -67,5 +67,38 @@
   "header": "./packages/header/index.js",
   "aside": "./packages/aside/index.js",
   "main": "./packages/main/index.js",
-  "footer": "./packages/footer/index.js"
+  "footer": "./packages/footer/index.js",
+  "timeline": "./packages/timeline/index.js",
+  "timeline-item": "./packages/timeline-item/index.js",
+  "link": "./packages/link/index.js",
+  "divider": "./packages/divider/index.js",
+  "image": "./packages/image/index.js",
+  "calendar": "./packages/calendar/index.js",
+  "backtop": "./packages/backtop/index.js",
+  "infinite-scroll": "./packages/infinite-scroll/index.js",
+  "page-header": "./packages/page-header/index.js",
+  "cascader-panel": "./packages/cascader-panel/index.js",
+  "avatar": "./packages/avatar/index.js",
+  "drawer": "./packages/drawer/index.js",
+  "popconfirm": "./packages/popconfirm/index.js",
+  "lr-container": "./packages/lr-container/index.js",
+  "loading-button": "./packages/loading-button/index.js",
+  "message-box-center": "./packages/message-box-center/index.js",
+  "tabs-dotted": "./packages/tabs-dotted/index.js",
+  "data-mapper": "./packages/data-mapper/index.js",
+  "checkbox-img-button": "./packages/checkbox-img-button/index.js",
+  "radio-img-button": "./packages/radio-img-button/index.js",
+  "icon-checkbox": "./packages/icon-checkbox/index.js",
+  "status-steps": "./packages/status-steps/index.js",
+  "panel": "./packages/panel/index.js",
+  "skeleton": "./packages/skeleton/index.js",
+  "empty": "./packages/empty/index.js",
+  "affix": "./packages/affix/index.js",
+  "input-id-card": "./packages/input-id-card/index.js",
+  "input-phone": "./packages/input-phone/index.js",
+  "input-email": "./packages/input-email/index.js",
+  "switch-enhance": "./packages/switch-enhance/index.js",
+  "input-url": "./packages/input-url/index.js",
+  "edit-table": "./packages/edit-table/index.js",
+  "button-group-enhance": "./packages/button-group-enhance/index.js"
 }
diff --git a/deploy.sh b/deploy.sh
new file mode 100755
index 00000000000..91f62735679
--- /dev/null
+++ b/deploy.sh
@@ -0,0 +1,8 @@
+#! /bin/sh
+#yarn deploy:build
+cd examples/element-ui
+git init
+git add .
+git commit -m 'pages'
+git remote add origin https://github.com/FEMessage/element.git
+git push origin master:gp-pages
diff --git a/examples/app.vue b/examples/app.vue
index b74619c2a56..7321d6cbd43 100644
--- a/examples/app.vue
+++ b/examples/app.vue
@@ -1,178 +1,3 @@
-<style lang="css">
-  @import 'highlight.js/styles/color-brewer.css';
-  @import 'assets/styles/common.css';
-  @import 'assets/styles/fonts/style.css';
-
-  html, body {
-    margin: 0;
-    padding: 0;
-    height: 100%;
-    font-family: 'Helvetica Neue',Helvetica,'PingFang SC','Hiragino Sans GB','Microsoft YaHei',SimSun,sans-serif;
-    font-weight: 400;
-    -webkit-font-smoothing: antialiased;
-
-    &.is-component {
-      overflow: hidden;
-    }
-  }
-
-  #app {
-    height: 100%;
-    
-    @when component {
-      overflow-y: hidden;
-
-      .main-cnt {
-        padding: 0;
-        margin-top: 0;
-        height: 100%;
-        min-height: auto;
-      }
-
-      .headerWrapper {
-        position: fixed;
-        width: 100%;
-        left: 0;
-        top: 0;
-        z-index: 1500;
-        
-        .container {
-          padding: 0;
-        }
-      }
-    }
-  }
-
-  a {
-    color: #409EFF;
-    text-decoration: none;
-  }
-
-  code {
-    background-color: #f9fafc;
-    padding: 0 4px;
-    border: 1px solid #eaeefb;
-    border-radius: 4px;
-  }
-
-  button, input, select, textarea {
-    font-family: inherit;
-    font-size: inherit;
-    line-height: inherit;
-    color: inherit;
-  }
-
-  .hljs {
-    line-height: 1.8;
-    font-family: Menlo, Monaco, Consolas, Courier, monospace;
-    font-size: 12px;
-    padding: 18px 24px;
-    background-color: #fafafa;
-    border: solid 1px #eaeefb;
-    margin-bottom: 25px;
-    border-radius: 4px;
-    -webkit-font-smoothing: auto;
-  }
-
-  .main-cnt {
-    margin-top: -80px;
-    padding: 80px 0 340px;
-    box-sizing: border-box;
-    min-height: 100%;
-  }
-
-  .container,
-  .page-container {
-    width: 1140px;
-    padding: 0;
-    margin: 0 auto;
-  }
-
-  .page-container {
-    padding-top: 55px;
-
-    h2 {
-      font-size: 28px;
-      color: #1f2d3d;
-      margin: 0;
-    }
-    h3 {
-      font-size: 22px;
-    }
-    h2, h3, h4, h5 {
-      font-weight: normal;
-      color: #1f2f3d;
-
-      &:hover a {
-        opacity: .4;
-      }
-
-      a {
-        float: left;
-        margin-left: -20px;
-        opacity: 0;
-        cursor: pointer;
-
-        &:hover {
-          opacity: .4;
-        }
-      }
-    }
-
-    p {
-      font-size: 14px;
-      color: #5e6d82;
-      line-height: 1.5em;
-    }
-
-    .tip {
-      padding: 8px 16px;
-      background-color: #ECF8FF;
-      border-radius: 4px;
-      border-left: #50bfff 5px solid;
-      margin: 20px 0;
-
-      code {
-        background-color: rgba(255, 255, 255, .7);
-        color: #445368;
-      }
-    }
-
-    .warning {
-      padding: 8px 16px;
-      background-color: #fff6f7;
-      border-radius: 4px;
-      border-left: #FE6C6F 5px solid;
-      margin: 20px 0;
-
-      code {
-        background-color: rgba(255, 255, 255, .7);
-        color: #445368;
-      }
-    }
-  }
-  .demo {
-    margin: 20px 0;
-  }
-  @media (max-width: 1140px) {
-    .container,
-    .page-container {
-      width: 100%;
-    }
-  }
-
-  @media (max-width: 768px) {
-    .container,
-    .page-container {
-      padding: 0 20px;
-    }
-  
-    #app.is-component .headerWrapper .container {
-      padding: 0 12px;
-    }
-  }
-</style>
-
 <template>
   <div id="app" :class="{ 'is-component': isComponent }">
     <main-header v-if="lang !== 'play'"></main-header>
@@ -188,18 +13,22 @@
   import zhLocale from 'main/locale/lang/zh-CN';
   import enLocale from 'main/locale/lang/en';
   import esLocale from 'main/locale/lang/es';
+  import frLocale from 'main/locale/lang/fr';
 
   const lang = location.hash.replace('#', '').split('/')[1] || 'zh-CN';
   const localize = lang => {
     switch (lang) {
-      case 'zh-CN':
-        use(zhLocale);
+      case 'en-US':
+        use(enLocale);
         break;
       case 'es':
         use(esLocale);
         break;
+      case 'fr-FR':
+        use(frLocale);
+        break;
       default:
-        use(enLocale);
+        use(zhLocale);
     }
   };
   localize(lang);
@@ -218,9 +47,9 @@
 
     watch: {
       lang(val) {
-        if (val === 'zh-CN') {
-          this.suggestJump();
-        }
+        // if (val === 'zh-CN') {
+        //   this.suggestJump();
+        // }
         localize(val);
       }
     },
@@ -231,51 +60,19 @@
 
         const href = location.href;
         const preferGithub = localStorage.getItem('PREFER_GITHUB');
-        if (href.indexOf('element-cn') > -1 || href.indexOf('element.faas') > -1 || preferGithub) return;
+        const cnHref = href.indexOf('eleme.cn') > -1 || href.indexOf('element-cn') > -1 || href.indexOf('element.faas') > -1;
+        if (cnHref || preferGithub) return;
         setTimeout(() => {
           if (this.lang !== 'zh-CN') return;
           this.$confirm('建议大陆用户访问部署在国内的站点，是否跳转？', '提示')
             .then(() => {
-              location.href = location.href
-                .replace('https:', 'http:')
-                .replace('element.', 'element-cn.');
+              location.replace('https://element.eleme.cn');
             })
             .catch(() => {
               localStorage.setItem('PREFER_GITHUB', 'true');
             });
         }, 1000);
       }
-    },
-
-    mounted() {
-      localize(this.lang);
-      if (this.lang === 'zh-CN') {
-        this.suggestJump();
-      }
-      // setTimeout(() => {
-      //   const notified = localStorage.getItem('ES_NOTIFIED_2');
-      //   if (!notified && this.lang !== 'es') {
-      //     const title = this.lang === 'zh-CN'
-      //       ? '西班牙语文档正式上线'
-      //       : 'Spanish docs now available';
-      //     const message = this.lang === 'zh-CN'
-      //       ? '点击这里进行切换'
-      //       : 'Click here to switch';
-      //     const self = this;
-      //     this.$notify({
-      //       title,
-      //       duration: 0,
-      //       message,
-      //       onClick() {
-      //         self.$router.push('/es');
-      //         localStorage.setItem('ES_NOTIFIED_2', 1);
-      //       },
-      //       onClose() {
-      //         localStorage.setItem('ES_NOTIFIED_2', 1);
-      //       }
-      //     });
-      //   }
-      // }, 3500);
     }
   };
 </script>
diff --git a/examples/assets/images/duotai.svg b/examples/assets/images/duotai.svg
deleted file mode 100644
index e8735a0f917..00000000000
--- a/examples/assets/images/duotai.svg
+++ /dev/null
@@ -1,16 +0,0 @@
-<svg width="63" height="59" viewBox="0 0 63 59" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
-<g id="Canvas" fill="none">
-<g id="duotai-icon">
-<g id="Rectangle">
-<rect width="41.1402" height="42.1429" transform="translate(21.5987 16.8571)" fill="#FF7262"/>
-</g>
-<g id="Vector 2">
-<path d="M 0 25.2857L 21.5986 0L 43.1972 25.2857L 0 25.2857Z" transform="translate(0 33.7142)" fill="#0ACF83"/>
-</g>
-<g id="Ellipse">
-<ellipse cx="16.4561" cy="16.8572" rx="16.4561" ry="16.8572" transform="translate(5.14249 0)" fill="#1ABCFE"/>
-</g>
-</g>
-</g>
-</svg>
-
diff --git a/examples/assets/images/element-logo-small.svg b/examples/assets/images/element-logo-small.svg
index 9e185f5747e..856a3989a9c 100644
--- a/examples/assets/images/element-logo-small.svg
+++ b/examples/assets/images/element-logo-small.svg
@@ -5,7 +5,7 @@
     <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="#409EFF">
+        <g id="首页-默认效果-copy-2" transform="translate(-70.000000, -19.000000)" fill="#2460e0">
             <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>
diff --git a/examples/assets/images/element-logo.svg b/examples/assets/images/element-logo.svg
index 8cd2c6d38b3..153d709ce41 100644
--- a/examples/assets/images/element-logo.svg
+++ b/examples/assets/images/element-logo.svg
@@ -5,7 +5,7 @@
     <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="#409EFF">
+        <g id="首页-默认效果-copy-2" transform="translate(-70.000000, -19.000000)" fill="#2460e0">
             <path d="M212.135441,45.1578077 C212.135441,45.1578077 212.420237,45.1505105 212.960937,45.1578077 C213.501637,45.1651049 213.648851,45.5708556 213.648851,45.5708556 C213.648851,45.5708556 214.733828,47.5665657 215.024677,48.0491434 C215.283608,48.4787133 214.973221,48.4708654 214.901816,48.4638436 C214.902504,48.4628798 214.887095,48.4621914 214.887095,48.4621914 C214.887095,48.4621914 214.893011,48.4630175 214.901816,48.4638436 C214.898652,48.4682495 214.594731,48.4783003 211.447528,48.4621914 C207.058641,47.8665762 206.9073,43.9186638 206.9073,43.9186638 L206.9073,36.8968483 L204.430812,36.8968483 L204.430812,34.2808779 C204.430812,33.9242798 204.84356,33.8678299 204.84356,33.8678299 L206.9073,33.8678299 L206.9073,31.2518594 C206.9073,30.8251809 207.320048,30.7011288 207.320048,30.7011288 C207.320048,30.7011288 208.772646,30.2858779 209.617816,30.0441072 C209.964662,29.9449756 210.071701,30.1503982 210.071701,30.1503982 C210.071701,30.1503982 210.209284,30.0774264 210.209284,30.3927196 L210.209284,34.0055125 L213.786433,34.0055125 C214.134655,34.0055125 214.199181,34.4185605 214.199181,34.4185605 L214.199181,37.034531 L210.209284,37.034531 L210.209284,43.0925678 C210.209284,44.8533913 212.135441,45.1578077 212.135441,45.1578077 L212.135441,45.1578077 Z M201.541576,48.1868261 L199.340253,48.1868261 C198.908381,48.1868261 198.927505,47.6360955 198.927505,47.6360955 L198.927505,37.4475789 C198.927505,36.8286954 198.102009,36.621483 198.102009,36.621483 L193.561781,36.621483 C192.884462,36.621483 192.873868,37.4475789 192.873868,37.4475789 L192.873868,47.7737781 C192.873868,48.1787028 192.46112,48.1868261 192.46112,48.1868261 L190.259797,48.1868261 C189.775782,48.1868261 189.847049,47.6360955 189.847049,47.6360955 L189.847049,34.8316085 C189.847049,33.803119 191.085293,33.5924646 191.085293,33.5924646 L200.71608,33.5924646 C201.677783,33.5924646 201.954324,34.8316085 201.954324,34.8316085 L201.954324,47.4984128 C201.954324,48.2186308 201.541576,48.1868261 201.541576,48.1868261 L201.541576,48.1868261 Z M185.857152,42.4041546 L177.327027,42.4041546 L177.327027,44.4693944 C177.327027,45.2135691 178.290106,45.433173 178.290106,45.433173 L185.169239,45.433173 C185.658758,45.433173 185.994735,45.846221 185.994735,45.846221 C185.994735,45.846221 186.595008,47.0951403 186.820231,47.6360955 C187.045454,48.1770506 186.407483,48.1868261 186.407483,48.1868261 L176.088783,48.1868261 C174.846136,48.1868261 174.575374,46.6723169 174.575374,46.6723169 L174.575374,34.9692911 C174.575374,34.2962983 175.538452,34.0055125 175.538452,34.0055125 L185.857152,34.0055125 C186.894113,34.0055125 187.095396,35.2446564 187.095396,35.2446564 L187.095396,41.1650107 C187.095396,42.1638983 185.857152,42.4041546 185.857152,42.4041546 L185.857152,42.4041546 Z M184.343743,37.4475789 C184.343743,37.4475789 184.257066,36.7591657 183.65583,36.7591657 L178.01494,36.7591657 C178.01494,36.7591657 177.327027,36.9437981 177.327027,37.4475789 L177.327027,38.9620882 C177.327027,38.9620882 177.346839,39.6505014 178.01494,39.6505014 L183.65583,39.6505014 C183.65583,39.6505014 184.343743,39.4804634 184.343743,38.8244055 L184.343743,37.4475789 L184.343743,37.4475789 Z M171.410972,48.1868261 L169.20965,48.1868261 C168.919213,48.1868261 168.796902,47.7737781 168.796902,47.7737781 L168.796902,37.4475789 C168.796902,36.8072169 167.971406,36.621483 167.971406,36.621483 L165.907666,36.621483 C165.331882,36.621483 165.219752,37.4475789 165.219752,37.4475789 L165.219752,47.7737781 C165.219752,48.1163326 164.807004,48.1868261 164.807004,48.1868261 L162.605682,48.1868261 C162.29956,48.1868261 162.192934,47.7737781 162.192934,47.7737781 L162.192934,37.4475789 C162.192934,36.7928979 161.367438,36.621483 161.367438,36.621483 L159.303698,36.621483 C158.673982,36.621483 158.615784,37.4475789 158.615784,37.4475789 L158.615784,47.7737781 C158.615784,48.2157395 158.203036,48.1868261 158.203036,48.1868261 L156.001714,48.1868261 C155.589378,48.1868261 155.588966,47.7737781 155.588966,47.7737781 L155.588966,34.6939258 C155.588966,33.9362582 156.689627,33.5924646 156.689627,33.5924646 L170.447894,33.5924646 C171.55227,33.5924646 171.82372,34.9692911 171.82372,34.9692911 L171.82372,47.7737781 C171.82372,48.249334 171.410972,48.1868261 171.410972,48.1868261 L171.410972,48.1868261 Z M151.461486,42.4041546 L142.93136,42.4041546 L142.93136,44.4693944 C142.93136,45.2135691 143.894439,45.433173 143.894439,45.433173 L150.773572,45.433173 C151.263092,45.433173 151.599068,45.846221 151.599068,45.846221 C151.599068,45.846221 152.199204,47.0951403 152.424564,47.6360955 C152.649787,48.1770506 152.011816,48.1868261 152.011816,48.1868261 L141.693117,48.1868261 C140.45047,48.1868261 140.179707,46.6723169 140.179707,46.6723169 L140.179707,34.9692911 C140.179707,34.2962983 141.142786,34.0055125 141.142786,34.0055125 L151.461486,34.0055125 C152.498446,34.0055125 152.69973,35.2446564 152.69973,35.2446564 L152.69973,41.1650107 C152.69973,42.1638983 151.461486,42.4041546 151.461486,42.4041546 L151.461486,42.4041546 Z M149.948076,37.4475789 C149.948076,37.4475789 149.861399,36.7591657 149.260163,36.7591657 L143.619274,36.7591657 C143.619274,36.7591657 142.93136,36.9437981 142.93136,37.4475789 L142.93136,38.9620882 C142.93136,38.9620882 142.951172,39.6505014 143.619274,39.6505014 L149.260163,39.6505014 C149.260163,39.6505014 149.948076,39.4804634 149.948076,38.8244055 L149.948076,37.4475789 L149.948076,37.4475789 Z M138.115967,48.1868261 L132.887826,48.1868261 C132.887826,48.1868261 129.061927,48.0061865 128.760346,44.1940291 C128.748239,40.2790228 128.760346,28.0851583 128.760346,28.0851583 L131.236834,28.0851583 C131.236834,28.0851583 132.06233,28.0701509 132.06233,28.9112543 L132.06233,43.3679331 C132.06233,43.3679331 132.350015,44.5638447 133.988487,45.020125 C135.8398,45.0107626 136.18981,45.020125 136.18981,45.020125 C136.18981,45.020125 136.907303,44.790195 137.428054,45.7085383 C137.948804,46.6268816 138.528715,47.6360955 138.528715,47.6360955 C138.528715,47.6360955 138.61154,48.1868261 138.115967,48.1868261 L138.115967,48.1868261 Z M111.562513,47.3607302 L111.562513,29.1866196 C111.562513,28.380763 112.250426,28.222841 112.250426,28.222841 L125.183197,28.222841 C125.906469,28.222841 125.595945,29.0489369 125.595945,29.0489369 C125.595945,29.0489369 125.192827,30.166094 124.908031,30.7011288 C124.623235,31.2361636 124.082535,31.2518594 124.082535,31.2518594 L115.689993,31.2518594 C114.908523,31.2518594 114.864497,31.9402727 114.864497,31.9402727 L114.864497,36.4838003 L124.357701,36.4838003 C124.914635,36.4838003 124.632866,37.1722136 124.632866,37.1722136 C124.632866,37.1722136 123.921839,38.6889258 123.669787,39.0997708 C123.417736,39.5106159 122.844291,39.5128188 122.844291,39.5128188 L114.864497,39.5128188 L114.864497,44.3317117 C114.864497,44.988458 115.55241,45.1578077 115.55241,45.1578077 L124.357701,45.1578077 C124.996222,45.1578077 125.183197,45.5708556 125.183197,45.5708556 C125.183197,45.5708556 126.055196,46.9323994 126.421441,47.4984128 C126.787823,48.0644262 126.283858,48.1868261 126.283858,48.1868261 L112.388009,48.1868261 C111.814151,48.1868261 111.562513,47.3607302 111.562513,47.3607302 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>
diff --git a/examples/assets/images/icon-check.png b/examples/assets/images/icon-check.png
new file mode 100644
index 00000000000..37663f82733
Binary files /dev/null and b/examples/assets/images/icon-check.png differ
diff --git a/examples/assets/images/icon-copy.png b/examples/assets/images/icon-copy.png
new file mode 100644
index 00000000000..3837bf3f802
Binary files /dev/null and b/examples/assets/images/icon-copy.png differ
diff --git a/examples/assets/images/icon-download.png b/examples/assets/images/icon-download.png
new file mode 100644
index 00000000000..4a81a05efd3
Binary files /dev/null and b/examples/assets/images/icon-download.png differ
diff --git a/examples/assets/images/icon-edit.png b/examples/assets/images/icon-edit.png
new file mode 100644
index 00000000000..050f7028c12
Binary files /dev/null and b/examples/assets/images/icon-edit.png differ
diff --git a/examples/assets/images/icon-redo.svg b/examples/assets/images/icon-redo.svg
new file mode 100644
index 00000000000..2333225412e
--- /dev/null
+++ b/examples/assets/images/icon-redo.svg
@@ -0,0 +1,19 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<svg width="13px" height="12px" viewBox="0 0 13 12" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
+    <!-- Generator: Sketch 54.1 (76490) - https://sketchapp.com -->
+    <title>icon-redo</title>
+    <desc>Created with Sketch.</desc>
+    <g id="theme" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
+        <g id="element-theme-editor" transform="translate(-1118.000000, -167.000000)" fill="#606266" fill-rule="nonzero">
+            <g id="custom" transform="translate(1060.000000, 146.000000)">
+                <g id="Group-2" transform="translate(30.000000, 15.000000)">
+                    <g id="Group" transform="translate(0.000000, 4.000000)">
+                        <g id="icon-clockwise" transform="translate(26.000000, 0.000000)">
+                            <path d="M12.2585,3.59833136 L12.2585,2.3085 L13.2585,2.3085 L13.2585,5.6365 L9.9295,5.6365 L9.9295,4.6365 L11.8833737,4.6365 C10.9510824,3.62012881 9.6272717,3.0179 8.2,3.0179 C5.43814237,3.0179 3.2,5.25604237 3.2,8.0179 C3.2,10.7797576 5.43814237,13.0179 8.2,13.0179 C10.9618576,13.0179 13.2,10.7797576 13.2,8.0179 L14.2,8.0179 C14.2,11.3320424 11.5141424,14.0179 8.2,14.0179 C4.88585763,14.0179 2.2,11.3320424 2.2,8.0179 C2.2,4.70375763 4.88585763,2.0179 8.2,2.0179 C9.73531163,2.0179 11.1716793,2.59926473 12.2585,3.59833136 Z" id="icon-redo"></path>
+                        </g>
+                    </g>
+                </g>
+            </g>
+        </g>
+    </g>
+</svg>
\ No newline at end of file
diff --git a/examples/assets/images/icon-undo.svg b/examples/assets/images/icon-undo.svg
new file mode 100644
index 00000000000..a7301f50c99
--- /dev/null
+++ b/examples/assets/images/icon-undo.svg
@@ -0,0 +1,19 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<svg width="13px" height="12px" viewBox="0 0 13 12" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
+    <!-- Generator: Sketch 54.1 (76490) - https://sketchapp.com -->
+    <title>icon-undo</title>
+    <desc>Created with Sketch.</desc>
+    <g id="theme" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
+        <g id="element-theme-editor" transform="translate(-1092.000000, -167.000000)" fill="#606266" fill-rule="nonzero">
+            <g id="custom" transform="translate(1060.000000, 146.000000)">
+                <g id="Group-2" transform="translate(30.000000, 15.000000)">
+                    <g id="Group" transform="translate(0.000000, 4.000000)">
+                        <g id="icon-clockwise">
+                            <path d="M12.2585,3.59833136 L12.2585,2.3085 L13.2585,2.3085 L13.2585,5.6365 L9.9295,5.6365 L9.9295,4.6365 L11.8833737,4.6365 C10.9510824,3.62012881 9.6272717,3.0179 8.2,3.0179 C5.43814237,3.0179 3.2,5.25604237 3.2,8.0179 C3.2,10.7797576 5.43814237,13.0179 8.2,13.0179 C10.9618576,13.0179 13.2,10.7797576 13.2,8.0179 L14.2,8.0179 C14.2,11.3320424 11.5141424,14.0179 8.2,14.0179 C4.88585763,14.0179 2.2,11.3320424 2.2,8.0179 C2.2,4.70375763 4.88585763,2.0179 8.2,2.0179 C9.73531163,2.0179 11.1716793,2.59926473 12.2585,3.59833136 Z" id="icon-undo" transform="translate(8.200000, 8.017900) scale(-1, 1) translate(-8.200000, -8.017900) "></path>
+                        </g>
+                    </g>
+                </g>
+            </g>
+        </g>
+    </g>
+</svg>
\ No newline at end of file
diff --git a/examples/assets/images/icon-upload.svg b/examples/assets/images/icon-upload.svg
new file mode 100644
index 00000000000..157551000a5
--- /dev/null
+++ b/examples/assets/images/icon-upload.svg
@@ -0,0 +1,19 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<svg width="26px" height="26px" viewBox="0 0 26 26" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
+    <!-- Generator: Sketch 54.1 (76490) - https://sketchapp.com -->
+    <title>icon_upload</title>
+    <desc>Created with Sketch.</desc>
+    <g id="theme" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
+        <g id="element-theme" transform="translate(-207.000000, -662.000000)" fill="#A7A8AD">
+            <g id="section" transform="translate(70.000000, 511.000000)">
+                <g id="card" transform="translate(0.000000, 60.000000)">
+                    <g id="btn" transform="translate(108.000000, 91.000000)">
+                        <g id="icon-upload" transform="translate(29.000000, 0.000000)">
+                            <path d="M13,-0.000600000001 L3.015,9.9854 L4.429,11.3984 L12,3.8284 L12,20.4854 L14.001,20.4854 L14.001,3.8284 L21.572,11.3984 L22.986,9.9854 L14.415,1.4144 L13,-0.000600000001 Z M13,2.8284 L13.158,2.9844 L12.843,2.9844 L13,2.8284 Z M24.001,19.9854 L24.001,23.9854 L2,23.9854 L2,19.9854 L0,19.9854 L0,25.9854 L26.001,25.9854 L26.001,19.9854 L24.001,19.9854 Z" id="icon_upload"></path>
+                        </g>
+                    </g>
+                </g>
+            </g>
+        </g>
+    </g>
+</svg>
\ No newline at end of file
diff --git a/examples/assets/images/intro-theme-b.png b/examples/assets/images/intro-theme-b.png
new file mode 100644
index 00000000000..46a5e22bc83
Binary files /dev/null and b/examples/assets/images/intro-theme-b.png differ
diff --git a/examples/assets/images/term-arial.png b/examples/assets/images/term-arial.png
new file mode 100644
index 00000000000..c5d2210067e
Binary files /dev/null and b/examples/assets/images/term-arial.png differ
diff --git a/examples/assets/images/term-helvetica.png b/examples/assets/images/term-helvetica.png
new file mode 100644
index 00000000000..f0e8af988f1
Binary files /dev/null and b/examples/assets/images/term-helvetica.png differ
diff --git a/examples/assets/images/term-hiragino.png b/examples/assets/images/term-hiragino.png
new file mode 100644
index 00000000000..e04fa23077d
Binary files /dev/null and b/examples/assets/images/term-hiragino.png differ
diff --git a/examples/assets/images/term-microsoft.png b/examples/assets/images/term-microsoft.png
new file mode 100644
index 00000000000..b1c03c04bd9
Binary files /dev/null and b/examples/assets/images/term-microsoft.png differ
diff --git a/examples/assets/images/term-pingfang.png b/examples/assets/images/term-pingfang.png
new file mode 100644
index 00000000000..f56b7c17177
Binary files /dev/null and b/examples/assets/images/term-pingfang.png differ
diff --git a/examples/assets/images/term-sf.png b/examples/assets/images/term-sf.png
new file mode 100644
index 00000000000..65a53a76584
Binary files /dev/null and b/examples/assets/images/term-sf.png differ
diff --git a/examples/assets/images/theme-index-blue.png b/examples/assets/images/theme-index-blue.png
new file mode 100644
index 00000000000..94d126232de
Binary files /dev/null and b/examples/assets/images/theme-index-blue.png differ
diff --git a/examples/assets/images/theme-index-icon.svg b/examples/assets/images/theme-index-icon.svg
new file mode 100644
index 00000000000..e8d95dc3594
--- /dev/null
+++ b/examples/assets/images/theme-index-icon.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 320 240"><defs><style>.cls-1{fill:none;}.cls-2{fill:#eff5fd;}.cls-3{fill:#fff;}.cls-4{fill:#26a1ff;}.cls-5{fill:snow;}.cls-6{fill:#fdaca9;}.cls-7{fill:#fd9da0;}.cls-8{fill:#fed5d0;}.cls-9{fill:#ffe8e6;}</style></defs><title>资源 104</title><g id="图层_2" data-name="图层 2"><g id="图层_1-2" data-name="图层 1"><rect class="cls-1" width="320" height="240"/><circle class="cls-2" cx="160" cy="120" r="120"/><path class="cls-3" d="M160,55H105.64A20.64,20.64,0,0,0,85,75.64V200a5,5,0,0,0,5,5h70Z"/><rect class="cls-4" x="95" y="145" width="130" height="40" rx="5"/><path class="cls-5" d="M230,55H160V205h70a5,5,0,0,0,5-5V60A5,5,0,0,0,230,55Z"/><path class="cls-6" d="M220,145H160v40h60a5,5,0,0,0,5-5V150A5,5,0,0,0,220,145Z"/><path class="cls-6" d="M160,99.78a2.5,2.5,0,0,1,0-5c48.71,0,62.17-28.57,62.72-29.79a2.5,2.5,0,1,1,4.56,2C226.69,68.36,212.13,99.78,160,99.78Z"/><path class="cls-2" d="M124.26,171.58V154.4h6.44a7.91,7.91,0,0,1,3.16.52,4,4,0,0,1,1.86,1.6,4.26,4.26,0,0,1,.68,2.27,3.89,3.89,0,0,1-.6,2.08,4.36,4.36,0,0,1-1.8,1.57,4.45,4.45,0,0,1,2.39,1.56,4.15,4.15,0,0,1,.84,2.6,5,5,0,0,1-.51,2.24,4.32,4.32,0,0,1-1.26,1.6,5.18,5.18,0,0,1-1.88.85,11.48,11.48,0,0,1-2.77.29Zm2.27-10h3.72a8.34,8.34,0,0,0,2.16-.2,2.39,2.39,0,0,0,1.31-.86,2.49,2.49,0,0,0,.44-1.5,2.76,2.76,0,0,0-.41-1.5,2,2,0,0,0-1.17-.89,9.84,9.84,0,0,0-2.62-.24h-3.43Zm0,7.93h4.28a10.68,10.68,0,0,0,1.55-.08,3.81,3.81,0,0,0,1.31-.47,2.44,2.44,0,0,0,.86-1,2.92,2.92,0,0,0,.34-1.44,2.84,2.84,0,0,0-.49-1.67,2.56,2.56,0,0,0-1.36-1,8.51,8.51,0,0,0-2.52-.29h-4Z"/><path class="cls-2" d="M148.25,171.58v-1.83a4.55,4.55,0,0,1-3.95,2.11,5.06,5.06,0,0,1-2.06-.42,3.42,3.42,0,0,1-1.42-1.06,4.06,4.06,0,0,1-.65-1.57,11.22,11.22,0,0,1-.13-2v-7.71h2.11V166a11.86,11.86,0,0,0,.13,2.23,2.18,2.18,0,0,0,.84,1.31,2.68,2.68,0,0,0,1.6.47,3.52,3.52,0,0,0,1.78-.48,2.76,2.76,0,0,0,1.18-1.33,6.68,6.68,0,0,0,.34-2.43v-6.67h2.11v12.45Z"/><path class="cls-2" d="M158,169.69l.31,1.86a7.59,7.59,0,0,1-1.6.19,3.64,3.64,0,0,1-1.78-.36,2,2,0,0,1-.89-1,7.55,7.55,0,0,1-.26-2.49v-7.16h-1.54v-1.64h1.54v-3.08l2.1-1.27v4.35H158v1.64h-2.12v7.28a3.83,3.83,0,0,0,.11,1.16.92.92,0,0,0,.37.41,1.38,1.38,0,0,0,.72.15A6,6,0,0,0,158,169.69Z"/><path class="cls-5" d="M167.69,169.69l.3,1.86a7.43,7.43,0,0,1-1.59.19,3.61,3.61,0,0,1-1.78-.36,2,2,0,0,1-.89-1,7.28,7.28,0,0,1-.26-2.49v-7.16h-1.55v-1.64h1.55v-3.08l2.1-1.27v4.35h2.12v1.64h-2.12v7.28a3.51,3.51,0,0,0,.11,1.16.84.84,0,0,0,.36.41,1.43,1.43,0,0,0,.72.15A6.1,6.1,0,0,0,167.69,169.69Z"/><path class="cls-5" d="M169,165.35a6.43,6.43,0,0,1,1.93-5.12,5.79,5.79,0,0,1,3.91-1.38,5.6,5.6,0,0,1,4.2,1.68,6.42,6.42,0,0,1,1.62,4.65,8.25,8.25,0,0,1-.72,3.78,5.13,5.13,0,0,1-2.09,2.14,6.2,6.2,0,0,1-3,.76,5.57,5.57,0,0,1-4.22-1.68A6.65,6.65,0,0,1,169,165.35Zm2.17,0a5.26,5.26,0,0,0,1.05,3.58,3.47,3.47,0,0,0,5.23,0,5.41,5.41,0,0,0,1.05-3.65,5.13,5.13,0,0,0-1.05-3.49,3.48,3.48,0,0,0-5.23,0A5.25,5.25,0,0,0,171.13,165.35Z"/><path class="cls-5" d="M183.1,171.58V159.13H185v1.77a4.46,4.46,0,0,1,4-2.05,5.2,5.2,0,0,1,2.07.41,3.25,3.25,0,0,1,1.41,1.06,4,4,0,0,1,.65,1.55,11.89,11.89,0,0,1,.12,2.06v7.65H191.1V164a5.85,5.85,0,0,0-.24-1.93,2,2,0,0,0-.88-1,2.82,2.82,0,0,0-1.47-.38,3.39,3.39,0,0,0-2.32.85c-.66.57-1,1.66-1,3.25v6.8Z"/><circle class="cls-4" cx="71.9" cy="76.81" r="30"/><path class="cls-3" d="M62.69,68.35h4.89v2.5H59.25V62.53h2.5v3.23a15,15,0,0,1,25.15,11H84.4A12.5,12.5,0,0,0,63.06,68C62.93,68.09,62.81,68.22,62.69,68.35Zm19.36,19.5a15,15,0,0,1-25.15-11h2.5a12.51,12.51,0,0,0,21.34,8.85l.37-.39H76.22v-2.5h8.33v8.32h-2.5Z"/><path class="cls-7" d="M46.94,47.79a2.92,2.92,0,0,1-2.25-1l-7-8.38a2.93,2.93,0,1,1,4.48-3.77L49.17,43a2.92,2.92,0,0,1-.35,4.12A2.88,2.88,0,0,1,46.94,47.79Z"/><path class="cls-8" d="M37.06,59.93h-.25L25.89,59a2.93,2.93,0,0,1,.51-5.83l10.91,1a2.93,2.93,0,0,1-.25,5.84Z"/><path class="cls-8" d="M60.58,40.14l-.25,0A2.93,2.93,0,0,1,57.66,37l.94-10.91a2.93,2.93,0,1,1,5.83.5l-.94,10.91A2.93,2.93,0,0,1,60.58,40.14Z"/><rect class="cls-2" x="99" y="128.31" width="15" height="6.27"/><rect class="cls-2" x="123.56" y="112.59" width="15" height="22"/><rect class="cls-9" x="160" y="106.81" width="7.5" height="27.78"/><rect class="cls-2" x="152.5" y="106.81" width="7.5" height="27.78"/><rect class="cls-9" x="206" y="91.81" width="15" height="42.78"/><rect class="cls-9" x="179.25" y="103.64" width="15" height="30.94"/><path class="cls-4" d="M95,130.81a2.62,2.62,0,0,1-1-.21,2.5,2.5,0,0,1-1.26-3.31C93.31,126,107.88,94.78,160,94.78a2.5,2.5,0,0,1,0,5c-48.91,0-62.59,29.26-62.72,29.56A2.5,2.5,0,0,1,95,130.81Z"/><path class="cls-6" d="M226,63.73a2.5,2.5,0,0,0-3.3,1.26c-.55,1.22-14,29.79-62.72,29.79h0v5h0c52.13,0,66.69-31.42,67.28-32.75A2.5,2.5,0,0,0,226,63.73Z"/></g></g></svg>
\ No newline at end of file
diff --git a/examples/assets/images/theme-index-red.png b/examples/assets/images/theme-index-red.png
new file mode 100644
index 00000000000..1a7f0d768f9
Binary files /dev/null and b/examples/assets/images/theme-index-red.png differ
diff --git a/examples/assets/images/theme-intro.png b/examples/assets/images/theme-intro.png
new file mode 100644
index 00000000000..bb5da7a2df3
Binary files /dev/null and b/examples/assets/images/theme-intro.png differ
diff --git a/examples/assets/images/typography.png b/examples/assets/images/typography.png
new file mode 100644
index 00000000000..2063d91d646
Binary files /dev/null and b/examples/assets/images/typography.png differ
diff --git a/examples/assets/restaurants.json b/examples/assets/restaurants.json
deleted file mode 100644
index d49a1e094ed..00000000000
--- a/examples/assets/restaurants.json
+++ /dev/null
@@ -1,3108 +0,0 @@
-[{
-  "activities": [{
-    "description": "在线支付满25减10，满45减20",
-    "icon_color": "f07373",
-    "icon_name": "减",
-    "id": 11465478,
-    "name": "满减优惠",
-    "tips": "在线支付满25减10，满45减20"
-  }],
-  "address": "长宁区新渔路144号",
-  "bidding": "{\"target\":{\"restaurantId\":799311,\"weight\":80,\"probability\":16.65989112854004},\"next\":{\"restaurantId\":1235633,\"weight\":180,\"probability\":6.841090202331543}}",
-  "delivery_mode": {
-    "color": "57A9FF",
-    "id": 1,
-    "is_solid": true,
-    "text": "蜂鸟专送"
-  },
-  "description": "三全鲜食，专注于新鲜的体验 , 打造便捷生活，缔造美味健康！",
-  "distance": 1318,
-  "float_delivery_fee": 5,
-  "float_minimum_order_amount": 20,
-  "id": 799311,
-  "image_path": "1f63d3e5f220e77bb0bd9781c97d47b0png",
-  "is_new": false,
-  "is_premium": false,
-  "latitude": 31.215656,
-  "longitude": 121.367698,
-  "name": "三全鲜食（北新泾店）",
-  "next_business_time": "",
-  "only_use_poi": false,
-  "opening_hours": ["10:00/20:00"],
-  "order_lead_time": 38,
-  "phone": "15000044134 17721416326",
-  "piecewise_agent_fee": {
-    "description": "配送费¥5",
-    "extra_fee": 0,
-    "is_extra": false,
-    "rules": [{
-      "fee": 5,
-      "price": 20
-    }]
-  },
-  "promotion_info": "你好，我叫三全鲜食，是个胖子，在认真做饭。卖的米饭加了燕麦，办公室坐久了，吃这个对肠胃好；坚持低油低盐烹调，应酬太重，身体该轻点负担。我一直想：约你去健康大道上散个步...",
-  "rating": 4.4,
-  "rating_count": 44,
-  "recent_order_num": 211,
-  "recommend": {
-    "reason": "商家推广",
-    "track": "{\"rankType\":\"8\"}"
-  },
-  "status": 1,
-  "supports": [{
-    "description": "已加入“外卖保”计划，食品安全有保障",
-    "icon_color": "4B9A18",
-    "icon_name": "保",
-    "id": 7,
-    "name": "外卖保"
-  }, {
-    "description": "准时必达，超时秒赔",
-    "icon_color": "57A9FF",
-    "icon_name": "准",
-    "id": 9,
-    "name": "准时达"
-  }]
-}, {
-  "activities": [{
-    "description": "在线支付满30减12，满60减24",
-    "icon_color": "f07373",
-    "icon_name": "减",
-    "id": 11582619,
-    "name": "满减优惠",
-    "tips": "在线支付满30减12，满60减24"
-  }, {
-    "description": "满39.0元赠送韩国进口饮料1份",
-    "icon_color": "3cc791",
-    "icon_name": "赠",
-    "id": 11780530,
-    "name": "满赠优惠",
-    "tips": "满39.0元赠送韩国进口饮料1份"
-  }],
-  "address": "上海市长宁区淞虹路661号",
-  "delivery_mode": {
-    "color": "57A9FF",
-    "id": 1,
-    "is_solid": true,
-    "text": "蜂鸟专送"
-  },
-  "description": "",
-  "distance": 1322,
-  "float_delivery_fee": 5,
-  "float_minimum_order_amount": 20,
-  "id": 1267706,
-  "image_path": "8d74d3ce7eee88d92d7005b64d32640epng",
-  "is_new": true,
-  "is_premium": false,
-  "latitude": 31.21328,
-  "longitude": 121.36104,
-  "name": "Hot honey 首尔炸鸡（仙霞路）",
-  "next_business_time": "",
-  "only_use_poi": false,
-  "opening_hours": ["10:50/01:30"],
-  "order_lead_time": 35,
-  "phone": "14752582500",
-  "piecewise_agent_fee": {
-    "description": "配送费¥5",
-    "extra_fee": 0,
-    "is_extra": false,
-    "rules": [{
-      "fee": 5,
-      "price": 20
-    }]
-  },
-  "promotion_info": "",
-  "rating": 4.9,
-  "rating_count": 28,
-  "recent_order_num": 97,
-  "status": 1,
-  "supports": [{
-    "description": "已加入“外卖保”计划，食品安全有保障",
-    "icon_color": "4B9A18",
-    "icon_name": "保",
-    "id": 7,
-    "name": "外卖保"
-  }, {
-    "description": "准时必达，超时秒赔",
-    "icon_color": "57A9FF",
-    "icon_name": "准",
-    "id": 9,
-    "name": "准时达"
-  }]
-}, {
-  "activities": [{
-    "description": "在线支付满30减8，满50减12，满75减15",
-    "icon_color": "f07373",
-    "icon_name": "减",
-    "id": 11323542,
-    "name": "满减优惠",
-    "tips": "在线支付满30减8，满50减12，满75减15"
-  }, {
-    "description": "满108.0元赠送Rio鸡尾酒(青柠味)1份",
-    "icon_color": "3cc791",
-    "icon_name": "赠",
-    "id": 11592505,
-    "name": "满赠优惠",
-    "tips": "满108.0元赠送Rio鸡尾酒(青柠味)1份"
-  }],
-  "address": "上海市普陀区真北路988号创邑金沙谷6号楼113",
-  "delivery_mode": {
-    "color": "57A9FF",
-    "id": 1,
-    "is_solid": true,
-    "text": "蜂鸟专送"
-  },
-  "description": "~香港厨师 精致港味~",
-  "distance": 2590,
-  "float_delivery_fee": 5,
-  "float_minimum_order_amount": 20,
-  "id": 369999,
-  "image_path": "3cc16c5507df1927a2dfd774be5e5550png",
-  "is_new": false,
-  "is_premium": false,
-  "latitude": 31.23579,
-  "longitude": 121.38346,
-  "name": "新旺角茶餐厅",
-  "next_business_time": "",
-  "only_use_poi": false,
-  "opening_hours": ["10:00/20:00"],
-  "order_lead_time": 37,
-  "phone": "13801662502",
-  "piecewise_agent_fee": {
-    "description": "满70配送费¥2，满20付¥7，不满20付¥9 (费用包含超距加收¥2)",
-    "extra_fee": 2,
-    "is_extra": true,
-    "rules": [{
-      "fee": 9,
-      "price": 0
-    }, {
-      "fee": 7,
-      "price": 20
-    }, {
-      "fee": 2,
-      "price": 70
-    }]
-  },
-  "promotion_info": "优质商家，饿饿推荐！本店优先配送饿了么订单，不能网上订餐然后上门自取。客服电话：021-10105757。",
-  "rating": 3.7,
-  "rating_count": 122,
-  "recent_order_num": 635,
-  "status": 1,
-  "supports": [{
-    "description": "已加入“外卖保”计划，食品安全有保障",
-    "icon_color": "4B9A18",
-    "icon_name": "保",
-    "id": 7,
-    "name": "外卖保"
-  }, {
-    "description": "准时必达，超时秒赔",
-    "icon_color": "57A9FF",
-    "icon_name": "准",
-    "id": 9,
-    "name": "准时达"
-  }]
-}, {
-  "activities": [{
-    "description": "在线支付满27减6，满35减9，满50减13，满100减22",
-    "icon_color": "f07373",
-    "icon_name": "减",
-    "id": 11394560,
-    "name": "满减优惠",
-    "tips": "在线支付满27减6，满35减9，满50减13，满100减22"
-  }, {
-    "description": "(不与其他活动同享)新用户下单立减20.0元",
-    "icon_color": "70bc46",
-    "icon_name": "新",
-    "id": 11325228,
-    "name": "新用户立减(不与其他活动共享)",
-    "tips": "(不与其他活动同享)新用户下单立减20.0元"
-  }],
-  "address": "天山西路438号",
-  "bidding": "{\"target\":{\"restaurantId\":454414,\"weight\":50,\"probability\":7.78886079788208},\"next\":null}",
-  "description": "本店支持饿了么网上订餐",
-  "distance": 888,
-  "float_delivery_fee": 0,
-  "float_minimum_order_amount": 15,
-  "id": 454414,
-  "image_path": "89c40be0dd657e4a32789d77efe0cec2jpeg",
-  "is_new": false,
-  "is_premium": false,
-  "latitude": 31.217949,
-  "longitude": 121.363526,
-  "name": "泷千家(天山西路店)",
-  "next_business_time": "",
-  "only_use_poi": false,
-  "opening_hours": ["10:00/21:30"],
-  "order_lead_time": 30,
-  "phone": "18621557849",
-  "piecewise_agent_fee": {
-    "description": "免配送费",
-    "extra_fee": 0,
-    "is_extra": false,
-    "rules": [{
-      "fee": 0,
-      "price": 15
-    }]
-  },
-  "promotion_info": "注：1、本店推荐陛下您在“饿了么”订餐—饭点较忙，电话常占线，本店优先配送饿了么订单。2、雨天路滑，外卖小哥会及时送达，避免催促发生事故。3、外卖制作+配送都需要消耗时间，为了能及时用餐，希望大家提前半小时以上预定，避开高峰拥堵。4、下单后，请务必备注个人口味与需求，避免出错",
-  "rating": 4.8,
-  "rating_count": 210,
-  "recent_order_num": 393,
-  "status": 1,
-  "supports": []
-}, {
-  "activities": [{
-    "description": "在线支付满25减3，满35减4，满50减8",
-    "icon_color": "f07373",
-    "icon_name": "减",
-    "id": 11521410,
-    "name": "满减优惠",
-    "tips": "在线支付满25减3，满35减4，满50减8"
-  }],
-  "address": "上海市长宁区金钟路968号1幢18号楼一层商铺18-101",
-  "delivery_mode": {
-    "color": "57A9FF",
-    "id": 1,
-    "is_solid": true,
-    "text": "蜂鸟专送"
-  },
-  "description": "胖仙女(凌空SOHO店)",
-  "distance": 1343,
-  "float_delivery_fee": 5,
-  "float_minimum_order_amount": 20,
-  "id": 974872,
-  "image_path": "606ca4f0dfcf2b475c4140dd8361b93cpng",
-  "is_new": false,
-  "is_premium": false,
-  "latitude": 31.2135896880521,
-  "longitude": 121.354956185256,
-  "name": "胖仙女纸杯蛋糕（上海凌空店）",
-  "next_business_time": "",
-  "only_use_poi": false,
-  "opening_hours": ["09:40/21:00"],
-  "order_lead_time": 36,
-  "phone": "13818003177",
-  "piecewise_agent_fee": {
-    "description": "配送费¥5",
-    "extra_fee": 0,
-    "is_extra": false,
-    "rules": [{
-      "fee": 5,
-      "price": 20
-    }]
-  },
-  "promotion_info": "",
-  "rating": 4.6,
-  "rating_count": 23,
-  "recent_order_num": 52,
-  "status": 1,
-  "supports": [{
-    "description": "已加入“外卖保”计划，食品安全有保障",
-    "icon_color": "4B9A18",
-    "icon_name": "保",
-    "id": 7,
-    "name": "外卖保"
-  }, {
-    "description": "该商家支持开发票，开票订单金额300.0元起，请在下单时填写好发票抬头",
-    "icon_color": "9071CB",
-    "icon_name": "票",
-    "id": 4,
-    "name": "开发票"
-  }, {
-    "description": "准时必达，超时秒赔",
-    "icon_color": "57A9FF",
-    "icon_name": "准",
-    "id": 9,
-    "name": "准时达"
-  }]
-}, {
-  "activities": [{
-    "description": "在线支付满27减3，满50减4，满75减5，满100减6",
-    "icon_color": "f07373",
-    "icon_name": "减",
-    "id": 11380887,
-    "name": "满减优惠",
-    "tips": "在线支付满27减3，满50减4，满75减5，满100减6"
-  }, {
-    "description": "(不与其他活动同享)新用户下单立减20.0元",
-    "icon_color": "70bc46",
-    "icon_name": "新",
-    "id": 11325228,
-    "name": "新用户立减(不与其他活动共享)",
-    "tips": "(不与其他活动同享)新用户下单立减20.0元"
-  }],
-  "address": "上海市长宁区金钟路633号",
-  "delivery_mode": {
-    "color": "57A9FF",
-    "id": 1,
-    "is_solid": true,
-    "text": "蜂鸟专送"
-  },
-  "description": "",
-  "distance": 534,
-  "float_delivery_fee": 5,
-  "float_minimum_order_amount": 20,
-  "id": 812017,
-  "image_path": "4ea8e374887cfc93a8a9c9b3675042b7jpeg",
-  "is_new": false,
-  "is_premium": false,
-  "latitude": 31.2203030319986,
-  "longitude": 121.359984758636,
-  "name": "贡茶",
-  "next_business_time": "",
-  "only_use_poi": false,
-  "opening_hours": ["10:00/20:00"],
-  "order_lead_time": 24,
-  "phone": "15901638090",
-  "piecewise_agent_fee": {
-    "description": "配送费¥5",
-    "extra_fee": 0,
-    "is_extra": false,
-    "rules": [{
-      "fee": 5,
-      "price": 20
-    }]
-  },
-  "promotion_info": "我们的愿景是成为魔都最有创意的美食小店，为此我们一直在努力，希望同为有理想的你们能多多支持我们。如果你也曾经吃到过令你“没朋友”的美食想与大家分享，欢迎来我们店交流。",
-  "rating": 4.5,
-  "rating_count": 18,
-  "recent_order_num": 122,
-  "status": 1,
-  "supports": [{
-    "description": "已加入“外卖保”计划，食品安全有保障",
-    "icon_color": "4B9A18",
-    "icon_name": "保",
-    "id": 7,
-    "name": "外卖保"
-  }, {
-    "description": "准时必达，超时秒赔",
-    "icon_color": "57A9FF",
-    "icon_name": "准",
-    "id": 9,
-    "name": "准时达"
-  }]
-}, {
-  "activities": [{
-    "description": "在线支付满30减6，满50减10，满80减16，满100减20",
-    "icon_color": "f07373",
-    "icon_name": "减",
-    "id": 11321703,
-    "name": "满减优惠",
-    "tips": "在线支付满30减6，满50减10，满80减16，满100减20"
-  }, {
-    "description": "(不与其他活动同享)新用户下单立减10.0元",
-    "icon_color": "70bc46",
-    "icon_name": "新",
-    "id": 11407498,
-    "name": "新用户立减(不与其他活动共享)",
-    "tips": "(不与其他活动同享)新用户下单立减10.0元"
-  }],
-  "address": "上海市嘉定区曹安公路曹安路1685号",
-  "delivery_mode": {
-    "color": "57A9FF",
-    "id": 1,
-    "is_solid": true,
-    "text": "蜂鸟专送"
-  },
-  "description": "叫外卖，上饿了么。",
-  "distance": 2732,
-  "float_delivery_fee": 5,
-  "float_minimum_order_amount": 20,
-  "id": 573057,
-  "image_path": "2f9070f8cd62a2b712d200e8ef9faa95jpeg",
-  "is_new": false,
-  "is_premium": false,
-  "latitude": 31.249038,
-  "longitude": 121.365501,
-  "name": "豪大大香鸡排超级奶爸",
-  "next_business_time": "",
-  "only_use_poi": false,
-  "opening_hours": ["00:00/24:00"],
-  "order_lead_time": 30,
-  "phone": "18201986108",
-  "piecewise_agent_fee": {
-    "description": "满70配送费¥2，满20付¥7，不满20付¥9 (费用包含超距加收¥2)",
-    "extra_fee": 2,
-    "is_extra": true,
-    "rules": [{
-      "fee": 9,
-      "price": 0
-    }, {
-      "fee": 7,
-      "price": 20
-    }, {
-      "fee": 2,
-      "price": 70
-    }]
-  },
-  "promotion_info": "各位小主，本店优先配送饿了么，下雪天路滑送餐较慢，请多多担待哈！如果您的美食凉了，或者口味不好，一定要第一时间和本店联系，做的不好的的地方我们一定加油改进，在这个寒冷的冬天，我们一定努力温暖您的胃，如您对送餐服务口味满意的请给5星好评哦！！饿了么网络点餐，汇集周边所有美食，汉堡，炸鸡，水果，生鲜，烧烤，超市，美食快餐应有尽有，美好生活，触手可得！！！",
-  "rating": 3.9,
-  "rating_count": 190,
-  "recent_order_num": 812,
-  "status": 1,
-  "supports": [{
-    "description": "已加入“外卖保”计划，食品安全有保障",
-    "icon_color": "4B9A18",
-    "icon_name": "保",
-    "id": 7,
-    "name": "外卖保"
-  }, {
-    "description": "准时必达，超时秒赔",
-    "icon_color": "57A9FF",
-    "icon_name": "准",
-    "id": 9,
-    "name": "准时达"
-  }]
-}, {
-  "activities": [{
-    "description": "(不与其他活动同享)新用户下单立减8.0元",
-    "icon_color": "70bc46",
-    "icon_name": "新",
-    "id": 11331255,
-    "name": "新用户立减(不与其他活动共享)",
-    "tips": "(不与其他活动同享)新用户下单立减8.0元"
-  }],
-  "address": "上海市普陀区同普路1435号",
-  "delivery_mode": {
-    "color": "57A9FF",
-    "id": 1,
-    "is_solid": true,
-    "text": "蜂鸟专送"
-  },
-  "description": "本店支持饿了么网上订餐",
-  "distance": 1110,
-  "float_delivery_fee": 4,
-  "float_minimum_order_amount": 20,
-  "id": 692202,
-  "image_path": "58a9bf7ad043c3268e5ca93c775ee310jpeg",
-  "is_new": false,
-  "is_premium": false,
-  "latitude": 31.233949,
-  "longitude": 121.364608,
-  "name": "茶芝兰（奶茶，手抓饼）",
-  "next_business_time": "",
-  "only_use_poi": false,
-  "opening_hours": ["09:00/22:30"],
-  "order_lead_time": 24,
-  "phone": "13661697379",
-  "piecewise_agent_fee": {
-    "description": "配送费¥4",
-    "extra_fee": 0,
-    "is_extra": false,
-    "rules": [{
-      "fee": 4,
-      "price": 20
-    }]
-  },
-  "promotion_info": "各位小主，本店优先配送饿了么，下雪天路滑送餐较慢，请多多担待哈！如果您的美食凉了，或者口味不好，一定要第一时间和本店联系，做的不好的地方我们一定加油改进，在这个寒冷的冬季，我们一定努力温暖您的胃，如您对送餐服务口味满意请给5分好评呦！！！饿了么网络订餐，汇集周边所有美食，汉堡、炸鸡、水果、生鲜、烧烤、超市、美食快餐应有尽有！美好生活，触手可得！！！",
-  "rating": 4.5,
-  "rating_count": 13,
-  "recent_order_num": 86,
-  "status": 1,
-  "supports": [{
-    "description": "已加入“外卖保”计划，食品安全有保障",
-    "icon_color": "4B9A18",
-    "icon_name": "保",
-    "id": 7,
-    "name": "外卖保"
-  }, {
-    "description": "准时必达，超时秒赔",
-    "icon_color": "57A9FF",
-    "icon_name": "准",
-    "id": 9,
-    "name": "准时达"
-  }]
-}, {
-  "activities": [{
-    "description": "在线支付满30减15，满55减18，满99减25",
-    "icon_color": "f07373",
-    "icon_name": "减",
-    "id": 11745520,
-    "name": "满减优惠",
-    "tips": "在线支付满30减15，满55减18，满99减25"
-  }, {
-    "description": "(不与其他活动同享)新用户下单立减8.0元",
-    "icon_color": "70bc46",
-    "icon_name": "新",
-    "id": 11763371,
-    "name": "新用户立减(不与其他活动共享)",
-    "tips": "(不与其他活动同享)新用户下单立减8.0元"
-  }],
-  "address": "上海市北翟路1444弄81号B幢-107",
-  "description": "北翟路店",
-  "distance": 1712,
-  "float_delivery_fee": 0,
-  "float_minimum_order_amount": 20,
-  "id": 1249130,
-  "image_path": "d04120664ef124d4b7b9025a33077eb6png",
-  "is_new": true,
-  "is_premium": false,
-  "latitude": 31.2273530703567,
-  "longitude": 121.341508485247,
-  "name": "十二泷町",
-  "next_business_time": "",
-  "only_use_poi": false,
-  "opening_hours": ["09:30/21:40"],
-  "order_lead_time": 40,
-  "phone": "18321927529",
-  "piecewise_agent_fee": {
-    "description": "免配送费",
-    "extra_fee": 0,
-    "is_extra": false,
-    "rules": [{
-      "fee": 0,
-      "price": 20
-    }]
-  },
-  "promotion_info": "新店开业给力促销 十二泷町只做精品 欢迎光临",
-  "rating": 4.2,
-  "rating_count": 214,
-  "recent_order_num": 793,
-  "status": 1,
-  "supports": []
-}, {
-  "activities": [{
-    "description": "在线支付满30减10，满50减16，满80减20，满100减25",
-    "icon_color": "f07373",
-    "icon_name": "减",
-    "id": 11713861,
-    "name": "满减优惠",
-    "tips": "在线支付满30减10，满50减16，满80减20，满100减25"
-  }, {
-    "description": "(不与其他活动同享)新用户下单立减10.0元",
-    "icon_color": "70bc46",
-    "icon_name": "新",
-    "id": 11407498,
-    "name": "新用户立减(不与其他活动共享)",
-    "tips": "(不与其他活动同享)新用户下单立减10.0元"
-  }],
-  "address": "上海市嘉定区新郁路817号",
-  "description": "100%现磨咖啡配火烤美食",
-  "distance": 3078,
-  "float_delivery_fee": 4,
-  "float_minimum_order_amount": 45,
-  "id": 315324,
-  "image_path": "bc55266432a43c3d49576acfe8baa855jpeg",
-  "is_new": false,
-  "is_premium": false,
-  "latitude": 31.252609,
-  "longitude": 121.362281,
-  "name": "星移浓缩咖啡",
-  "next_business_time": "",
-  "only_use_poi": false,
-  "opening_hours": ["07:50/22:30"],
-  "order_lead_time": 39,
-  "phone": "15801946520 18701977399",
-  "piecewise_agent_fee": {
-    "description": "配送费¥4",
-    "extra_fee": 0,
-    "is_extra": false,
-    "rules": [{
-      "fee": 4,
-      "price": 45
-    }]
-  },
-  "promotion_info": "各位小主，本店优先配送饿了么，下雪天路滑送餐较慢，请多多担待哈！如果您的美食凉了，或者口味不好，一定要第一时间和本店联系，做的不好的的地方我们一定加油改进，在这个寒冷的冬天，我们一定努力温暖您的胃，如您对送餐服务口味满意的请给5星好评哦！！饿了么网络点餐，汇集周边所有美食，汉堡，炸鸡，水果，生鲜，烧烤，超市，美食快餐应有尽有，美好生活，触手可得！！！",
-  "rating": 4.6,
-  "rating_count": 674,
-  "recent_order_num": 1945,
-  "status": 1,
-  "supports": []
-}, {
-  "activities": [{
-    "description": "在线支付满30减6，满50减10，满80减16，满100减20",
-    "icon_color": "f07373",
-    "icon_name": "减",
-    "id": 11321703,
-    "name": "满减优惠",
-    "tips": "在线支付满30减6，满50减10，满80减16，满100减20"
-  }, {
-    "description": "满60.0元赠送酸梅汤1份",
-    "icon_color": "3cc791",
-    "icon_name": "赠",
-    "id": 11667023,
-    "name": "满赠优惠",
-    "tips": "满60.0元赠送酸梅汤1份"
-  }, {
-    "description": "(不与其他活动同享)新用户下单立减10.0元",
-    "icon_color": "70bc46",
-    "icon_name": "新",
-    "id": 11407498,
-    "name": "新用户立减(不与其他活动共享)",
-    "tips": "(不与其他活动同享)新用户下单立减10.0元"
-  }],
-  "address": "嘉定区曹安路1611号",
-  "bidding": "{\"target\":{\"restaurantId\":350268,\"weight\":90,\"probability\":5.929296016693115},\"next\":null}",
-  "description": "主营阿姨奶茶和豪大大鸡排",
-  "distance": 3110,
-  "float_delivery_fee": 5,
-  "float_minimum_order_amount": 40,
-  "id": 350268,
-  "image_path": "d7863ee62fe7757c23fdf295c7ab5dc4jpeg",
-  "is_new": false,
-  "is_premium": false,
-  "latitude": 31.252109,
-  "longitude": 121.367546,
-  "name": "阿姨奶茶/豪大大",
-  "next_business_time": "",
-  "only_use_poi": false,
-  "opening_hours": ["00:00/24:00"],
-  "order_lead_time": 34,
-  "phone": "18721119782",
-  "piecewise_agent_fee": {
-    "description": "配送费¥5",
-    "extra_fee": 0,
-    "is_extra": false,
-    "rules": [{
-      "fee": 5,
-      "price": 40
-    }]
-  },
-  "promotion_info": "各位小主，如果您的美食凉了，或者口味不好，一定要第一时间和本店联系，做的不好的的地方我们一定加油改进，本店奶茶有2种口味可选，下单请备注，夏季新品全新上市。敬请品尝",
-  "rating": 4.4,
-  "rating_count": 901,
-  "recent_order_num": 2834,
-  "status": 1,
-  "supports": []
-}, {
-  "activities": [{
-    "description": "在线支付满30减3，满50减8，满80减12",
-    "icon_color": "f07373",
-    "icon_name": "减",
-    "id": 11305606,
-    "name": "满减优惠",
-    "tips": "在线支付满30减3，满50减8，满80减12"
-  }, {
-    "description": "(不与其他活动同享)新用户下单立减15.0元",
-    "icon_color": "70bc46",
-    "icon_name": "新",
-    "id": 11483363,
-    "name": "新用户立减(不与其他活动共享)",
-    "tips": "(不与其他活动同享)新用户下单立减15.0元"
-  }, {
-    "description": "满72.0元赠送白雪黑糯米1份",
-    "icon_color": "3cc791",
-    "icon_name": "赠",
-    "id": 11337736,
-    "name": "满赠优惠",
-    "tips": "满72.0元赠送白雪黑糯米1份"
-  }],
-  "address": "嘉定区曹安公路2383弄55号",
-  "bidding": "{\"target\":{\"restaurantId\":1025885,\"weight\":10,\"probability\":8.761201858520508},\"next\":null}",
-  "description": "新店入住江桥，还望大家多多关照。总店在顾村，以打造优质外卖，希望能服务好江桥周边群众。有任何问题，欢迎电话或者微信我lastone2222，谢谢。",
-  "distance": 4303,
-  "float_delivery_fee": 8,
-  "float_minimum_order_amount": 48,
-  "id": 1025885,
-  "image_path": "114ba96cb2770ed092551a132508c583jpeg",
-  "is_new": false,
-  "is_premium": false,
-  "latitude": 31.26018,
-  "longitude": 121.340367,
-  "name": "新麦甜四季甜品炸鸡",
-  "next_business_time": "",
-  "only_use_poi": false,
-  "opening_hours": ["10:20/23:05"],
-  "order_lead_time": 40,
-  "phone": "13004156997",
-  "piecewise_agent_fee": {
-    "description": "配送费¥8",
-    "extra_fee": 0,
-    "is_extra": false,
-    "rules": [{
-      "fee": 8,
-      "price": 48
-    }]
-  },
-  "promotion_info": "新店开张，希望结识更多朋友，如没有饿了么红包，可添加我微信lastone2222。更有优惠在微信中分享大家，谢谢。",
-  "rating": 4.5,
-  "rating_count": 526,
-  "recent_order_num": 1468,
-  "status": 1,
-  "supports": [{
-    "description": "该商家支持开发票，开票订单金额1000.0元起，请在下单时填写好发票抬头",
-    "icon_color": "9071CB",
-    "icon_name": "票",
-    "id": 4,
-    "name": "开发票"
-  }]
-}, {
-  "activities": [{
-    "description": "在线支付满78减6，满108减10",
-    "icon_color": "f07373",
-    "icon_name": "减",
-    "id": 11729861,
-    "name": "满减优惠",
-    "tips": "在线支付满78减6，满108减10"
-  }, {
-    "description": "(不与其他活动同享)新用户下单立减15.0元",
-    "icon_color": "70bc46",
-    "icon_name": "新",
-    "id": 11483363,
-    "name": "新用户立减(不与其他活动共享)",
-    "tips": "(不与其他活动同享)新用户下单立减15.0元"
-  }],
-  "address": "嘉定区江桥镇曹安公路2409号1F，2383弄62号1F",
-  "bidding": "{\"target\":{\"restaurantId\":528740,\"weight\":100,\"probability\":7.419137001037598},\"next\":null}",
-  "description": "叫外卖，上饿了么，优惠一大波，快乐做吃货。",
-  "distance": 4388,
-  "float_delivery_fee": 4,
-  "float_minimum_order_amount": 35,
-  "id": 528740,
-  "image_path": "16473df4a84509c6be80538e811f8d95jpeg",
-  "is_new": false,
-  "is_premium": false,
-  "latitude": 31.2608095910523,
-  "longitude": 121.339828832568,
-  "name": "Monica摩托主题咖啡店",
-  "next_business_time": "",
-  "only_use_poi": false,
-  "opening_hours": ["10:00/22:00"],
-  "order_lead_time": 41,
-  "phone": "18019077520",
-  "piecewise_agent_fee": {
-    "description": "配送费¥4",
-    "extra_fee": 0,
-    "is_extra": false,
-    "rules": [{
-      "fee": 4,
-      "price": 35
-    }]
-  },
-  "promotion_info": "Monica摩托主题咖啡店，饿了么专线18019077520，有任何问题请联系我们！",
-  "rating": 4.6,
-  "rating_count": 191,
-  "recent_order_num": 708,
-  "status": 1,
-  "supports": [{
-    "description": "已加入“外卖保”计划，食品安全有保障",
-    "icon_color": "4B9A18",
-    "icon_name": "保",
-    "id": 7,
-    "name": "外卖保"
-  }]
-}, {
-  "activities": [{
-    "description": "在线支付满25减10",
-    "icon_color": "f07373",
-    "icon_name": "减",
-    "id": 11497425,
-    "name": "满减优惠",
-    "tips": "在线支付满25减10"
-  }, {
-    "description": "(不与其他活动同享)新用户下单立减20.0元",
-    "icon_color": "70bc46",
-    "icon_name": "新",
-    "id": 11325228,
-    "name": "新用户立减(不与其他活动共享)",
-    "tips": "(不与其他活动同享)新用户下单立减20.0元"
-  }],
-  "address": "上海长宁区金钟路968号9号楼地下一层",
-  "description": "本店支持饿了么网上订餐",
-  "distance": 767,
-  "float_delivery_fee": 2,
-  "float_minimum_order_amount": 30,
-  "id": 517091,
-  "image_path": "c1b0f058b2817296b133e4a6d977dc7fjpeg",
-  "is_new": false,
-  "is_premium": false,
-  "latitude": 31.222092,
-  "longitude": 121.352028,
-  "name": "浮生若茶（凌空soho店）",
-  "next_business_time": "",
-  "only_use_poi": false,
-  "opening_hours": ["09:00/20:00"],
-  "order_lead_time": 35,
-  "phone": "60317291",
-  "piecewise_agent_fee": {
-    "description": "配送费¥2",
-    "extra_fee": 0,
-    "is_extra": false,
-    "rules": [{
-      "fee": 2,
-      "price": 30
-    }]
-  },
-  "promotion_info": "1、本店推荐陛下您在“饿了么”订餐—饭点较忙，电话常占线，本店优先配送饿了么订单。2、雨天路滑，外卖小哥会及时送达，避免催促发生事故。3、外卖制作+配送都需要消耗时间，为了能及时用餐，希望大家提前半小时以上预定，避开高峰拥堵。",
-  "rating": 4.7,
-  "rating_count": 185,
-  "recent_order_num": 525,
-  "status": 1,
-  "supports": []
-}, {
-  "activities": [{
-    "description": "在线支付满30减5，满60减12，满90减17，满120减22",
-    "icon_color": "f07373",
-    "icon_name": "减",
-    "id": 11381105,
-    "name": "满减优惠",
-    "tips": "在线支付满30减5，满60减12，满90减17，满120减22"
-  }, {
-    "description": "(不与其他活动同享)新用户下单立减20.0元",
-    "icon_color": "70bc46",
-    "icon_name": "新",
-    "id": 11325228,
-    "name": "新用户立减(不与其他活动共享)",
-    "tips": "(不与其他活动同享)新用户下单立减20.0元"
-  }],
-  "address": "上海市长宁区天山西路119号",
-  "bidding": "{\"target\":{\"restaurantId\":956142,\"weight\":30,\"probability\":5.793898105621338},\"next\":null}",
-  "description": "放慢节奏，停下来看一看风景，让灵魂跟上脚步！\nNONO JUIC是一家80后创业的小店。\n“快乐•慢活”的是我们的生活追求；\n不加水不加糖的100%纯鲜榨果蔬汁，是我们的载体；\n超值的价格、高品质的服务，是我们的态度；\n让白领拥有自然、健康、快乐 的新商务生活 ，是我们的目标！",
-  "distance": 1825,
-  "float_delivery_fee": 4,
-  "float_minimum_order_amount": 0,
-  "id": 956142,
-  "image_path": "c75e04425d7afd93c48393d361df13c7jpeg",
-  "is_new": false,
-  "is_premium": false,
-  "latitude": 31.216055,
-  "longitude": 121.375325,
-  "name": "NONO JUICE  鲜榨果汁",
-  "next_business_time": "",
-  "only_use_poi": false,
-  "opening_hours": ["09:30/20:55"],
-  "order_lead_time": 38,
-  "phone": "18017696773 62036773",
-  "piecewise_agent_fee": {
-    "description": "配送费¥4",
-    "extra_fee": 0,
-    "is_extra": false,
-    "rules": [{
-      "fee": 4,
-      "price": 0
-    }]
-  },
-  "promotion_info": "新鲜 健康！\n本店全开放式操作、不加水的100%纯鲜榨果蔬汁，采用韩国进口原汁机榨汁，无金属刀片接触，氧化慢、出汁率高、富含果肉，原汁原味，口感更好。",
-  "rating": 4.8,
-  "rating_count": 29,
-  "recent_order_num": 101,
-  "status": 1,
-  "supports": [{
-    "description": "该商家支持开发票，开票订单金额80.0元起，请在下单时填写好发票抬头",
-    "icon_color": "9071CB",
-    "icon_name": "票",
-    "id": 4,
-    "name": "开发票"
-  }]
-}, {
-  "activities": [],
-  "address": "上海市长宁区仙霞西路",
-  "delivery_mode": {
-    "color": "57A9FF",
-    "id": 1,
-    "is_solid": true,
-    "text": "蜂鸟专送"
-  },
-  "description": "CoCo都可(北新泾店）",
-  "distance": 1851,
-  "float_delivery_fee": 5,
-  "float_minimum_order_amount": 20,
-  "id": 623791,
-  "image_path": "d38997b5a8e5076a2888f11baa44a473jpeg",
-  "is_new": false,
-  "is_premium": false,
-  "latitude": 31.208887,
-  "longitude": 121.3638,
-  "name": "CoCo都可(北新泾店）",
-  "next_business_time": "",
-  "only_use_poi": false,
-  "opening_hours": ["10:00/21:00"],
-  "order_lead_time": 20,
-  "phone": "13681954727",
-  "piecewise_agent_fee": {
-    "description": "配送费¥5",
-    "extra_fee": 0,
-    "is_extra": false,
-    "rules": [{
-      "fee": 5,
-      "price": 20
-    }]
-  },
-  "promotion_info": "",
-  "rating": 4.8,
-  "rating_count": 179,
-  "recent_order_num": 979,
-  "status": 1,
-  "supports": [{
-    "description": "已加入“外卖保”计划，食品安全有保障",
-    "icon_color": "4B9A18",
-    "icon_name": "保",
-    "id": 7,
-    "name": "外卖保"
-  }, {
-    "description": "准时必达，超时秒赔",
-    "icon_color": "57A9FF",
-    "icon_name": "准",
-    "id": 9,
-    "name": "准时达"
-  }]
-}, {
-  "activities": [{
-    "description": "在线支付满25减3",
-    "icon_color": "f07373",
-    "icon_name": "减",
-    "id": 11404771,
-    "name": "满减优惠",
-    "tips": "在线支付满25减3"
-  }, {
-    "description": "原价10元，现价5元。就是那么优惠",
-    "icon_color": "f1884f",
-    "icon_name": "5",
-    "id": 1449976,
-    "name": "(不与其它活动同享)中杯半价",
-    "tips": "(不与其它活动同享)中杯半价"
-  }, {
-    "description": "手榨香柠茉香绿茶（大杯）原价13，现价8元",
-    "icon_color": "f1884f",
-    "icon_name": "特",
-    "id": 1449975,
-    "name": "(不与其它活动同享)大杯特惠",
-    "tips": "(不与其它活动同享)大杯特惠"
-  }],
-  "address": "上海市长宁区天山西路567号1层R117号店铺",
-  "delivery_mode": {
-    "color": "57A9FF",
-    "id": 1,
-    "is_solid": true,
-    "text": "蜂鸟专送"
-  },
-  "description": " 快乐柠檬（神州智慧店）",
-  "distance": 848,
-  "float_delivery_fee": 5,
-  "float_minimum_order_amount": 20,
-  "id": 284945,
-  "image_path": "55bf67cc9c994d2b8ddbd4b580e013aepng",
-  "is_new": false,
-  "is_premium": false,
-  "latitude": 31.21776,
-  "longitude": 121.35677,
-  "name": "快乐柠檬（神州智慧店）",
-  "next_business_time": "",
-  "only_use_poi": false,
-  "opening_hours": ["10:00/20:00"],
-  "order_lead_time": 22,
-  "phone": "021-62156296",
-  "piecewise_agent_fee": {
-    "description": "配送费¥5",
-    "extra_fee": 0,
-    "is_extra": false,
-    "rules": [{
-      "fee": 5,
-      "price": 20
-    }]
-  },
-  "promotion_info": "",
-  "rating": 4.9,
-  "rating_count": 7,
-  "recent_order_num": 124,
-  "status": 1,
-  "supports": [{
-    "description": "已加入“外卖保”计划，食品安全有保障",
-    "icon_color": "4B9A18",
-    "icon_name": "保",
-    "id": 7,
-    "name": "外卖保"
-  }, {
-    "description": "准时必达，超时秒赔",
-    "icon_color": "57A9FF",
-    "icon_name": "准",
-    "id": 9,
-    "name": "准时达"
-  }]
-}, {
-  "activities": [{
-    "description": "在线支付满30减8，满60减12，满80减15",
-    "icon_color": "f07373",
-    "icon_name": "减",
-    "id": 11321804,
-    "name": "满减优惠",
-    "tips": "在线支付满30减8，满60减12，满80减15"
-  }, {
-    "description": "(不与其他活动同享)新用户下单立减8.0元",
-    "icon_color": "70bc46",
-    "icon_name": "新",
-    "id": 11426321,
-    "name": "新用户立减(不与其他活动共享)",
-    "tips": "(不与其他活动同享)新用户下单立减8.0元"
-  }],
-  "address": "上海市普陀区光复西路丹巴路28弄6号楼819",
-  "delivery_mode": {
-    "color": "57A9FF",
-    "id": 1,
-    "is_solid": true,
-    "text": "蜂鸟专送"
-  },
-  "description": "",
-  "distance": 2168,
-  "float_delivery_fee": 5,
-  "float_minimum_order_amount": 20,
-  "id": 1033368,
-  "image_path": "46953c0f5cdceb1da9bf45f3da063c2bjpeg",
-  "is_new": false,
-  "is_premium": false,
-  "latitude": 31.2224006116865,
-  "longitude": 121.38186007503,
-  "name": "Merci Paul cafe",
-  "next_business_time": "",
-  "only_use_poi": false,
-  "opening_hours": ["10:00/18:00"],
-  "order_lead_time": 38,
-  "phone": "13917882254",
-  "piecewise_agent_fee": {
-    "description": "满70配送费¥1，满20付¥6，不满20付¥8 (费用包含超距加收¥1)",
-    "extra_fee": 1,
-    "is_extra": true,
-    "rules": [{
-      "fee": 8,
-      "price": 0
-    }, {
-      "fee": 6,
-      "price": 20
-    }, {
-      "fee": 1,
-      "price": 70
-    }]
-  },
-  "promotion_info": "由于小店是聘请第三方进行外送，在小店制作的饮品在出品时能够保证质量，但无法对第三方外送人员进行质控。希望各位客官能够在收到您的饮品时当场验收一下。谢谢啦！希望各位客官能够时常光顾小店！",
-  "rating": 4.5,
-  "rating_count": 9,
-  "recent_order_num": 57,
-  "status": 1,
-  "supports": [{
-    "description": "已加入“外卖保”计划，食品安全有保障",
-    "icon_color": "4B9A18",
-    "icon_name": "保",
-    "id": 7,
-    "name": "外卖保"
-  }, {
-    "description": "准时必达，超时秒赔",
-    "icon_color": "57A9FF",
-    "icon_name": "准",
-    "id": 9,
-    "name": "准时达"
-  }]
-}, {
-  "activities": [{
-    "description": "在线支付满50减4",
-    "icon_color": "f07373",
-    "icon_name": "减",
-    "id": 11333884,
-    "name": "满减优惠",
-    "tips": "在线支付满50减4"
-  }, {
-    "description": "(不与其他活动同享)新用户下单立减10.0元",
-    "icon_color": "70bc46",
-    "icon_name": "新",
-    "id": 11763283,
-    "name": "新用户立减(不与其他活动共享)",
-    "tips": "(不与其他活动同享)新用户下单立减10.0元"
-  }],
-  "address": "上海市长宁区仙霞西路88号第一层G05-F01-1-306",
-  "delivery_mode": {
-    "color": "57A9FF",
-    "id": 1,
-    "is_solid": true,
-    "text": "蜂鸟专送"
-  },
-  "description": "猫山王（西郊百联店）",
-  "distance": 2083,
-  "float_delivery_fee": 5,
-  "float_minimum_order_amount": 20,
-  "id": 455634,
-  "image_path": "a3fb209c0497a26a16f2737cca32aa2bpng",
-  "is_new": false,
-  "is_premium": false,
-  "latitude": 31.208433,
-  "longitude": 121.369323,
-  "name": "猫山王（西郊百联店）",
-  "next_business_time": "",
-  "only_use_poi": false,
-  "opening_hours": ["10:00/21:00"],
-  "order_lead_time": 30,
-  "phone": "18516639405",
-  "piecewise_agent_fee": {
-    "description": "配送费¥5",
-    "extra_fee": 0,
-    "is_extra": false,
-    "rules": [{
-      "fee": 5,
-      "price": 20
-    }]
-  },
-  "promotion_info": "",
-  "rating": 4.9,
-  "rating_count": 13,
-  "recent_order_num": 72,
-  "status": 1,
-  "supports": [{
-    "description": "已加入“外卖保”计划，食品安全有保障",
-    "icon_color": "4B9A18",
-    "icon_name": "保",
-    "id": 7,
-    "name": "外卖保"
-  }, {
-    "description": "准时必达，超时秒赔",
-    "icon_color": "57A9FF",
-    "icon_name": "准",
-    "id": 9,
-    "name": "准时达"
-  }]
-}, {
-  "activities": [{
-    "description": "在线支付满35减5",
-    "icon_color": "f07373",
-    "icon_name": "减",
-    "id": 11359154,
-    "name": "满减优惠",
-    "tips": "在线支付满35减5"
-  }, {
-    "description": "(不与其他活动同享)新用户下单立减8.0元",
-    "icon_color": "70bc46",
-    "icon_name": "新",
-    "id": 11331255,
-    "name": "新用户立减(不与其他活动共享)",
-    "tips": "(不与其他活动同享)新用户下单立减8.0元"
-  }],
-  "address": "上海市普陀区棕榈路",
-  "delivery_mode": {
-    "color": "57A9FF",
-    "id": 1,
-    "is_solid": true,
-    "text": "蜂鸟专送"
-  },
-  "description": "港式饮料，甜品，蛋糕，咖啡",
-  "distance": 1231,
-  "float_delivery_fee": 5,
-  "float_minimum_order_amount": 20,
-  "id": 350348,
-  "image_path": "5f1234a6a8d6b0f3fcf1e087dd7e5eedjpeg",
-  "is_new": false,
-  "is_premium": false,
-  "latitude": 31.2359271347658,
-  "longitude": 121.361772541938,
-  "name": "枪会山",
-  "next_business_time": "",
-  "only_use_poi": false,
-  "opening_hours": ["11:00/22:00"],
-  "order_lead_time": 27,
-  "phone": "13916530820",
-  "piecewise_agent_fee": {
-    "description": "满70免配送费，满20付¥5，不满20付¥7",
-    "extra_fee": 0,
-    "is_extra": false,
-    "rules": [{
-      "fee": 7,
-      "price": 0
-    }, {
-      "fee": 5,
-      "price": 20
-    }, {
-      "fee": 0,
-      "price": 70
-    }]
-  },
-  "promotion_info": "公司訂購外賣大單?️優惠！饮料温度请备注！起送费点不到的朋友可致电13916530820直接订餐，或者加微信13916530820订餐谢谢！",
-  "rating": 4.3,
-  "rating_count": 25,
-  "recent_order_num": 121,
-  "status": 1,
-  "supports": [{
-    "description": "已加入“外卖保”计划，食品安全有保障",
-    "icon_color": "4B9A18",
-    "icon_name": "保",
-    "id": 7,
-    "name": "外卖保"
-  }, {
-    "description": "准时必达，超时秒赔",
-    "icon_color": "57A9FF",
-    "icon_name": "准",
-    "id": 9,
-    "name": "准时达"
-  }]
-}, {
-  "activities": [{
-    "description": "(不与其他活动同享)新用户下单立减10.0元",
-    "icon_color": "70bc46",
-    "icon_name": "新",
-    "id": 11763283,
-    "name": "新用户立减(不与其他活动共享)",
-    "tips": "(不与其他活动同享)新用户下单立减10.0元"
-  }],
-  "address": "元丰天山花园(东门) 双流路267号",
-  "delivery_mode": {
-    "color": "57A9FF",
-    "id": 1,
-    "is_solid": true,
-    "text": "蜂鸟专送"
-  },
-  "description": "",
-  "distance": 2225,
-  "float_delivery_fee": 5,
-  "float_minimum_order_amount": 20,
-  "id": 1270944,
-  "image_path": "d8f60dc555a702aa1a0656349a8cfdf9png",
-  "is_new": true,
-  "is_premium": false,
-  "latitude": 31.217355,
-  "longitude": 121.380867,
-  "name": "纵食",
-  "next_business_time": "",
-  "only_use_poi": false,
-  "opening_hours": ["10:00/17:00"],
-  "order_lead_time": 0,
-  "phone": "15502140533",
-  "piecewise_agent_fee": {
-    "description": "配送费¥5",
-    "extra_fee": 0,
-    "is_extra": false,
-    "rules": [{
-      "fee": 5,
-      "price": 20
-    }]
-  },
-  "promotion_info": "纯果汁现榨，无添加，假一赔十！\n快餐食品由中央厨房加工制作，品类较少，注重安全卫生。如有不足或建议，请随时拨打电话  15502140533！",
-  "rating": 0,
-  "rating_count": 0,
-  "recent_order_num": 1,
-  "status": 1,
-  "supports": [{
-    "description": "已加入“外卖保”计划，食品安全有保障",
-    "icon_color": "4B9A18",
-    "icon_name": "保",
-    "id": 7,
-    "name": "外卖保"
-  }, {
-    "description": "准时必达，超时秒赔",
-    "icon_color": "57A9FF",
-    "icon_name": "准",
-    "id": 9,
-    "name": "准时达"
-  }]
-}, {
-  "activities": [{
-    "description": "在线支付满27减7，满50减13，满75减19，满100减25",
-    "icon_color": "f07373",
-    "icon_name": "减",
-    "id": 11462511,
-    "name": "满减优惠",
-    "tips": "在线支付满27减7，满50减13，满75减19，满100减25"
-  }, {
-    "description": "(不与其他活动同享)新用户下单立减20.0元",
-    "icon_color": "70bc46",
-    "icon_name": "新",
-    "id": 11325228,
-    "name": "新用户立减(不与其他活动共享)",
-    "tips": "(不与其他活动同享)新用户下单立减20.0元"
-  }],
-  "address": "上海市长宁区天山西路",
-  "delivery_mode": {
-    "color": "57A9FF",
-    "id": 1,
-    "is_solid": true,
-    "text": "蜂鸟专送"
-  },
-  "description": "",
-  "distance": 719,
-  "float_delivery_fee": 5,
-  "float_minimum_order_amount": 20,
-  "id": 933664,
-  "image_path": "99fad460547712178f9b6747a8175a14jpeg",
-  "is_new": false,
-  "is_premium": false,
-  "latitude": 31.218679,
-  "longitude": 121.360435,
-  "name": "钱记",
-  "next_business_time": "",
-  "only_use_poi": false,
-  "opening_hours": ["09:30/21:00"],
-  "order_lead_time": 32,
-  "phone": "17721135951",
-  "piecewise_agent_fee": {
-    "description": "配送费¥5",
-    "extra_fee": 0,
-    "is_extra": false,
-    "rules": [{
-      "fee": 5,
-      "price": 20
-    }]
-  },
-  "promotion_info": "",
-  "rating": 0,
-  "rating_count": 0,
-  "recent_order_num": 18,
-  "status": 1,
-  "supports": [{
-    "description": "已加入“外卖保”计划，食品安全有保障",
-    "icon_color": "4B9A18",
-    "icon_name": "保",
-    "id": 7,
-    "name": "外卖保"
-  }, {
-    "description": "准时必达，超时秒赔",
-    "icon_color": "57A9FF",
-    "icon_name": "准",
-    "id": 9,
-    "name": "准时达"
-  }]
-}, {
-  "activities": [{
-    "description": "在线支付满20减11",
-    "icon_color": "f07373",
-    "icon_name": "减",
-    "id": 11721066,
-    "name": "满减优惠",
-    "tips": "在线支付满20减11"
-  }, {
-    "description": "(不与其它活动同享)限时抢购",
-    "icon_color": "f07373",
-    "icon_name": "折",
-    "id": 1445461,
-    "name": "(不与其它活动同享)限时抢购",
-    "tips": "(不与其它活动同享)限时抢购"
-  }, {
-    "description": "(不与其他活动同享)新用户下单立减20.0元",
-    "icon_color": "70bc46",
-    "icon_name": "新",
-    "id": 11325228,
-    "name": "新用户立减(不与其他活动共享)",
-    "tips": "(不与其他活动同享)新用户下单立减20.0元"
-  }],
-  "address": "上海市长宁区通协路",
-  "delivery_mode": {
-    "color": "57A9FF",
-    "id": 1,
-    "is_solid": true,
-    "text": "蜂鸟专送"
-  },
-  "description": "",
-  "distance": 418,
-  "float_delivery_fee": 5,
-  "float_minimum_order_amount": 20,
-  "id": 1052336,
-  "image_path": "6337786c6f58ad517edb63755511ca38jpeg",
-  "is_new": false,
-  "is_premium": false,
-  "latitude": 31.22641,
-  "longitude": 121.35519,
-  "name": "壹杯加",
-  "next_business_time": "",
-  "only_use_poi": false,
-  "opening_hours": ["10:00/20:30"],
-  "order_lead_time": 29,
-  "phone": "021-61550517",
-  "piecewise_agent_fee": {
-    "description": "配送费¥5",
-    "extra_fee": 0,
-    "is_extra": false,
-    "rules": [{
-      "fee": 5,
-      "price": 20
-    }]
-  },
-  "promotion_info": "本公司可结合您的需求，为您提供企业餐饮服务方案\n1、可定制员工协议就餐、员工福利、茶歇、自助餐、团餐、订餐、商务宴请；\n2、提供场地和投影、打印、WIFI设备，可供活动、办公、会议等需求；\n3、关注壹杯加咖啡微信公众号，可得10元电子抵用券，限量发放；\n4、下午茶活动线上、线下同",
-  "rating": 0,
-  "rating_count": 0,
-  "recent_order_num": 6,
-  "status": 1,
-  "supports": [{
-    "description": "已加入“外卖保”计划，食品安全有保障",
-    "icon_color": "4B9A18",
-    "icon_name": "保",
-    "id": 7,
-    "name": "外卖保"
-  }, {
-    "description": "准时必达，超时秒赔",
-    "icon_color": "57A9FF",
-    "icon_name": "准",
-    "id": 9,
-    "name": "准时达"
-  }]
-}, {
-  "activities": [{
-    "description": "在线支付满30减5，满50减8",
-    "icon_color": "f07373",
-    "icon_name": "减",
-    "id": 11401063,
-    "name": "满减优惠",
-    "tips": "在线支付满30减5，满50减8"
-  }, {
-    "description": "(不与其他活动同享)新用户下单立减20.0元",
-    "icon_color": "70bc46",
-    "icon_name": "新",
-    "id": 11325228,
-    "name": "新用户立减(不与其他活动共享)",
-    "tips": "(不与其他活动同享)新用户下单立减20.0元"
-  }],
-  "address": "上海市长宁区新泾镇金钟路999号2幢（B幢）第01层第1-02A单元",
-  "delivery_mode": {
-    "color": "57A9FF",
-    "id": 1,
-    "is_solid": true,
-    "text": "蜂鸟专送"
-  },
-  "description": "上海首家纯正东南亚饮品店。手作源萃，茶与鲜果的完美融合！",
-  "distance": 935,
-  "float_delivery_fee": 5,
-  "float_minimum_order_amount": 20,
-  "id": 1218762,
-  "image_path": "9e912491d0455cd3c5cd0d6e65ae723dpng",
-  "is_new": false,
-  "is_premium": false,
-  "latitude": 31.220421,
-  "longitude": 121.35111,
-  "name": "唦哇嘀咖",
-  "next_business_time": "",
-  "only_use_poi": false,
-  "opening_hours": ["09:30/18:30"],
-  "order_lead_time": 23,
-  "phone": "15001827782",
-  "piecewise_agent_fee": {
-    "description": "配送费¥5",
-    "extra_fee": 0,
-    "is_extra": false,
-    "rules": [{
-      "fee": 5,
-      "price": 20
-    }]
-  },
-  "promotion_info": "SAWADEEKA金钟路999号携程店。上海首家纯正东南亚饮品店，唦哇嘀咖鲜萃健康饮食！",
-  "rating": 0,
-  "rating_count": 5,
-  "recent_order_num": 35,
-  "status": 1,
-  "supports": [{
-    "description": "已加入“外卖保”计划，食品安全有保障",
-    "icon_color": "4B9A18",
-    "icon_name": "保",
-    "id": 7,
-    "name": "外卖保"
-  }, {
-    "description": "准时必达，超时秒赔",
-    "icon_color": "57A9FF",
-    "icon_name": "准",
-    "id": 9,
-    "name": "准时达"
-  }]
-}, {
-  "activities": [{
-    "description": "在线支付满50减20",
-    "icon_color": "f07373",
-    "icon_name": "减",
-    "id": 11711818,
-    "name": "满减优惠",
-    "tips": "在线支付满50减20"
-  }, {
-    "description": "8.8元限量秒杀，每单仅限一份。",
-    "icon_color": "f1884f",
-    "icon_name": "秒",
-    "id": 1467532,
-    "name": "(不与其它活动同享)8.8元限量秒杀",
-    "tips": "(不与其它活动同享)8.8元限量秒杀"
-  }],
-  "address": "长宁区仙霞西路88号1305室",
-  "delivery_mode": {
-    "color": "57A9FF",
-    "id": 1,
-    "is_solid": true,
-    "text": "蜂鸟专送"
-  },
-  "description": "爱茜茜里（西郊百联店）",
-  "distance": 2168,
-  "float_delivery_fee": 5,
-  "float_minimum_order_amount": 30,
-  "id": 568785,
-  "image_path": "55d1ee8f3acdf71798cfd3e20beabc09png",
-  "is_new": false,
-  "is_premium": false,
-  "latitude": 31.2083825904864,
-  "longitude": 121.371048337401,
-  "name": "爱茜茜里(西郊百联)",
-  "next_business_time": "",
-  "only_use_poi": false,
-  "opening_hours": ["10:00/20:55"],
-  "order_lead_time": 29,
-  "phone": "021-32510279",
-  "piecewise_agent_fee": {
-    "description": "配送费¥5",
-    "extra_fee": 0,
-    "is_extra": false,
-    "rules": [{
-      "fee": 5,
-      "price": 30
-    }]
-  },
-  "promotion_info": "",
-  "rating": 0,
-  "rating_count": 0,
-  "recent_order_num": 24,
-  "status": 1,
-  "supports": [{
-    "description": "已加入“外卖保”计划，食品安全有保障",
-    "icon_color": "4B9A18",
-    "icon_name": "保",
-    "id": 7,
-    "name": "外卖保"
-  }, {
-    "description": "准时必达，超时秒赔",
-    "icon_color": "57A9FF",
-    "icon_name": "准",
-    "id": 9,
-    "name": "准时达"
-  }]
-}, {
-  "activities": [{
-    "description": "在线支付满50减20",
-    "icon_color": "f07373",
-    "icon_name": "减",
-    "id": 11711818,
-    "name": "满减优惠",
-    "tips": "在线支付满50减20"
-  }, {
-    "description": "8.8元限量秒杀，每单仅限一份。",
-    "icon_color": "f1884f",
-    "icon_name": "秒",
-    "id": 1467532,
-    "name": "(不与其它活动同享)8.8元限量秒杀",
-    "tips": "(不与其它活动同享)8.8元限量秒杀"
-  }],
-  "address": "上海市普陀区真北路818号近铁城市广场北区地下二楼N-B2-O2-C商铺",
-  "delivery_mode": {
-    "color": "57A9FF",
-    "id": 1,
-    "is_solid": true,
-    "text": "蜂鸟专送"
-  },
-  "description": "爱茜茜里（近铁广场店）",
-  "distance": 2298,
-  "float_delivery_fee": 5,
-  "float_minimum_order_amount": 30,
-  "id": 568768,
-  "image_path": "f5ec0d9cc6c220a571842b1904dc5196png",
-  "is_new": false,
-  "is_premium": false,
-  "latitude": 31.2331899175256,
-  "longitude": 121.381500478429,
-  "name": "爱茜茜里(近铁广场)",
-  "next_business_time": "",
-  "only_use_poi": false,
-  "opening_hours": ["10:00/20:55"],
-  "order_lead_time": 36,
-  "phone": "021-62270191",
-  "piecewise_agent_fee": {
-    "description": "配送费¥5",
-    "extra_fee": 0,
-    "is_extra": false,
-    "rules": [{
-      "fee": 5,
-      "price": 30
-    }]
-  },
-  "promotion_info": "",
-  "rating": 0,
-  "rating_count": 0,
-  "recent_order_num": 22,
-  "status": 1,
-  "supports": [{
-    "description": "已加入“外卖保”计划，食品安全有保障",
-    "icon_color": "4B9A18",
-    "icon_name": "保",
-    "id": 7,
-    "name": "外卖保"
-  }, {
-    "description": "准时必达，超时秒赔",
-    "icon_color": "57A9FF",
-    "icon_name": "准",
-    "id": 9,
-    "name": "准时达"
-  }]
-}, {
-  "activities": [{
-    "description": "在线支付满30减6，满50减10，满75减14",
-    "icon_color": "f07373",
-    "icon_name": "减",
-    "id": 11315952,
-    "name": "满减优惠",
-    "tips": "在线支付满30减6，满50减10，满75减14"
-  }, {
-    "description": "(不与其他活动同享)新用户下单立减8.0元",
-    "icon_color": "70bc46",
-    "icon_name": "新",
-    "id": 11331255,
-    "name": "新用户立减(不与其他活动共享)",
-    "tips": "(不与其他活动同享)新用户下单立减8.0元"
-  }],
-  "address": "普陀区金沙江路2239号金沙和美广场B1-10-6",
-  "delivery_mode": {
-    "color": "57A9FF",
-    "id": 1,
-    "is_solid": true,
-    "text": "蜂鸟专送"
-  },
-  "description": "鲜果榨汁（金沙江路和美广店）",
-  "distance": 1492,
-  "float_delivery_fee": 5,
-  "float_minimum_order_amount": 20,
-  "id": 316109,
-  "image_path": "7cbfa6cf02a26972036024bcabc1a676png",
-  "is_new": false,
-  "is_premium": false,
-  "latitude": 31.237022,
-  "longitude": 121.366401,
-  "name": "鲜果榨汁（金沙江路和美广店）",
-  "next_business_time": "",
-  "only_use_poi": false,
-  "opening_hours": ["11:00/21:00"],
-  "order_lead_time": 29,
-  "phone": "62222677",
-  "piecewise_agent_fee": {
-    "description": "满70免配送费，满20付¥5，不满20付¥7",
-    "extra_fee": 0,
-    "is_extra": false,
-    "rules": [{
-      "fee": 7,
-      "price": 0
-    }, {
-      "fee": 5,
-      "price": 20
-    }, {
-      "fee": 0,
-      "price": 70
-    }]
-  },
-  "promotion_info": " ",
-  "rating": 0,
-  "rating_count": 3,
-  "recent_order_num": 27,
-  "status": 1,
-  "supports": [{
-    "description": "已加入“外卖保”计划，食品安全有保障",
-    "icon_color": "4B9A18",
-    "icon_name": "保",
-    "id": 7,
-    "name": "外卖保"
-  }, {
-    "description": "准时必达，超时秒赔",
-    "icon_color": "57A9FF",
-    "icon_name": "准",
-    "id": 9,
-    "name": "准时达"
-  }]
-}, {
-  "activities": [{
-    "description": "在线支付满30减6，满60减18，满90减30",
-    "icon_color": "f07373",
-    "icon_name": "减",
-    "id": 11763350,
-    "name": "满减优惠",
-    "tips": "在线支付满30减6，满60减18，满90减30"
-  }, {
-    "description": "(不与其他活动同享)新用户下单立减10.0元",
-    "icon_color": "70bc46",
-    "icon_name": "新",
-    "id": 11763890,
-    "name": "新用户立减(不与其他活动共享)",
-    "tips": "(不与其他活动同享)新用户下单立减10.0元"
-  }],
-  "address": "上海市长宁区威宁路天山路341号",
-  "delivery_mode": {
-    "color": "57A9FF",
-    "id": 1,
-    "is_solid": true,
-    "text": "蜂鸟专送"
-  },
-  "description": "",
-  "distance": 2830,
-  "float_delivery_fee": 5,
-  "float_minimum_order_amount": 20,
-  "id": 1121231,
-  "image_path": "16be69a0f2a639e925490612c1e9fdffpng",
-  "is_new": false,
-  "is_premium": false,
-  "latitude": 31.2145697747183,
-  "longitude": 121.386378354986,
-  "name": "开心丽果（缤谷店）",
-  "next_business_time": "",
-  "only_use_poi": false,
-  "opening_hours": ["10:00/22:00"],
-  "order_lead_time": 27,
-  "phone": "18516346196",
-  "piecewise_agent_fee": {
-    "description": "配送费¥5",
-    "extra_fee": 0,
-    "is_extra": false,
-    "rules": [{
-      "fee": 5,
-      "price": 20
-    }]
-  },
-  "promotion_info": "",
-  "rating": 0,
-  "rating_count": 3,
-  "recent_order_num": 26,
-  "status": 1,
-  "supports": [{
-    "description": "已加入“外卖保”计划，食品安全有保障",
-    "icon_color": "4B9A18",
-    "icon_name": "保",
-    "id": 7,
-    "name": "外卖保"
-  }, {
-    "description": "准时必达，超时秒赔",
-    "icon_color": "57A9FF",
-    "icon_name": "准",
-    "id": 9,
-    "name": "准时达"
-  }]
-}, {
-  "activities": [{
-    "description": "在线支付满30减8，满50减11",
-    "icon_color": "f07373",
-    "icon_name": "减",
-    "id": 11521751,
-    "name": "满减优惠",
-    "tips": "在线支付满30减8，满50减11"
-  }, {
-    "description": "(不与其他活动同享)新用户下单立减8.0元",
-    "icon_color": "70bc46",
-    "icon_name": "新",
-    "id": 11547883,
-    "name": "新用户立减(不与其他活动共享)",
-    "tips": "(不与其他活动同享)新用户下单立减8.0元"
-  }],
-  "address": "上海市嘉定区丰庄路240号",
-  "delivery_mode": {
-    "color": "57A9FF",
-    "id": 1,
-    "is_solid": true,
-    "text": "蜂鸟专送"
-  },
-  "description": "叫外卖，上饿了么~",
-  "distance": 2158,
-  "float_delivery_fee": 5,
-  "float_minimum_order_amount": 20,
-  "id": 329570,
-  "image_path": "ad870fe71e80c85402c03f35c00f4690jpeg",
-  "is_new": false,
-  "is_premium": false,
-  "latitude": 31.244315,
-  "longitude": 121.362098,
-  "name": "超级鸡车（丰庄路店）",
-  "next_business_time": "",
-  "only_use_poi": false,
-  "opening_hours": ["10:00/21:55"],
-  "order_lead_time": 28,
-  "phone": "59182012",
-  "piecewise_agent_fee": {
-    "description": "满70配送费¥1，满20付¥6，不满20付¥8 (费用包含超距加收¥1)",
-    "extra_fee": 1,
-    "is_extra": true,
-    "rules": [{
-      "fee": 8,
-      "price": 0
-    }, {
-      "fee": 6,
-      "price": 20
-    }, {
-      "fee": 1,
-      "price": 70
-    }]
-  },
-  "promotion_info": "各位小主，本店优先配送饿了么，下雪天路滑送餐较慢，请多多担待哈！如果您的美食凉了，或者口味不好，一定要第一时间和本店联系，做的不好的地方我们一定加油改进，在这个寒冷的冬季，我们一定努力温暖您的胃，如您对送餐服务口味满意请给5分好评呦！！！饿了么网络订餐，汇集周边所有美食，汉堡、炸鸡、水果、生鲜、烧烤、超市、美食快餐应有尽有！美好生活，触手可得！！！",
-  "rating": 4.6,
-  "rating_count": 725,
-  "recent_order_num": 3275,
-  "status": 1,
-  "supports": [{
-    "description": "已加入“外卖保”计划，食品安全有保障",
-    "icon_color": "4B9A18",
-    "icon_name": "保",
-    "id": 7,
-    "name": "外卖保"
-  }, {
-    "description": "准时必达，超时秒赔",
-    "icon_color": "57A9FF",
-    "icon_name": "准",
-    "id": 9,
-    "name": "准时达"
-  }]
-}, {
-  "activities": [{
-    "description": "在线支付满25减2，满45减6",
-    "icon_color": "f07373",
-    "icon_name": "减",
-    "id": 11764418,
-    "name": "满减优惠",
-    "tips": "在线支付满25减2，满45减6"
-  }, {
-    "description": "(不与其他活动同享)新用户下单立减5.0元",
-    "icon_color": "70bc46",
-    "icon_name": "新",
-    "id": 11776370,
-    "name": "新用户立减(不与其他活动共享)",
-    "tips": "(不与其他活动同享)新用户下单立减5.0元"
-  }, {
-    "description": "单人精彩餐超值特价",
-    "icon_color": "f07373",
-    "icon_name": "折",
-    "id": 1449992,
-    "name": "单人精彩餐超值特价",
-    "tips": "单人精彩餐超值特价"
-  }],
-  "address": "长宁区新渔路144号",
-  "description": "下载妙生活APP，手机下单优惠3-10%，1h内送达！ianhu不满意无条件退换货。总部工作时间：10：00-20：00    总部联系电话：021-62867789转分机6615  17721416326  18939910501",
-  "distance": 1366,
-  "float_delivery_fee": 0,
-  "float_minimum_order_amount": 25,
-  "id": 477768,
-  "image_path": "99161bc5e0737669280b31c605e2ec34jpeg",
-  "is_new": false,
-  "is_premium": false,
-  "latitude": 31.212997,
-  "longitude": 121.361887,
-  "name": "妙生活果园（北新泾店）",
-  "next_business_time": "",
-  "only_use_poi": false,
-  "opening_hours": ["08:30/20:30"],
-  "order_lead_time": 38,
-  "phone": "17721416326 18939910501 62867789-6615",
-  "piecewise_agent_fee": {
-    "description": "免配送费",
-    "extra_fee": 0,
-    "is_extra": false,
-    "rules": [{
-      "fee": 0,
-      "price": 25
-    }]
-  },
-  "promotion_info": "本店配送时间从9：35开始，尽请谅解！门店服务电话：021-62867789转6615  /   客服工作时间10:30-20:30\n\n尽量将地址的具体街道、门牌号写在最前面哦，避免造成订单延误~",
-  "rating": 4.3,
-  "rating_count": 498,
-  "recent_order_num": 1402,
-  "status": 1,
-  "supports": [{
-    "description": "该商家支持开发票，开票订单金额100.0元起，请在下单时填写好发票抬头",
-    "icon_color": "9071CB",
-    "icon_name": "票",
-    "id": 4,
-    "name": "开发票"
-  }]
-}, {
-  "activities": [{
-    "description": "在线支付满30减11，满60减20，满88减26",
-    "icon_color": "f07373",
-    "icon_name": "减",
-    "id": 11719544,
-    "name": "满减优惠",
-    "tips": "在线支付满30减11，满60减20，满88减26"
-  }, {
-    "description": "(不与其他活动同享)新用户下单立减20.0元",
-    "icon_color": "70bc46",
-    "icon_name": "新",
-    "id": 11325228,
-    "name": "新用户立减(不与其他活动共享)",
-    "tips": "(不与其他活动同享)新用户下单立减20.0元"
-  }],
-  "address": "长宁区淞虹路148号",
-  "delivery_mode": {
-    "color": "57A9FF",
-    "id": 1,
-    "is_solid": true,
-    "text": "蜂鸟专送"
-  },
-  "description": "曾经的香，曾经的辣，曾经冥冥不忘的味道。香锅里辣，让舌尖更美好",
-  "distance": 507,
-  "float_delivery_fee": 5,
-  "float_minimum_order_amount": 20,
-  "id": 691694,
-  "image_path": "7708fb67ac5ec00820cf919dbf24ea29jpeg",
-  "is_new": false,
-  "is_premium": false,
-  "latitude": 31.221124,
-  "longitude": 121.361976,
-  "name": "香宜度麻辣香锅",
-  "next_business_time": "",
-  "only_use_poi": false,
-  "opening_hours": ["09:00/21:30"],
-  "order_lead_time": 34,
-  "phone": "18221159780",
-  "piecewise_agent_fee": {
-    "description": "配送费¥5",
-    "extra_fee": 0,
-    "is_extra": false,
-    "rules": [{
-      "fee": 5,
-      "price": 20
-    }]
-  },
-  "promotion_info": "根据顾客的意见，菜品能多选，本店把原先的菜品重量100克改为50克，价格减半。感谢大家出谋划策谢谢\n通知通知，从5月27号起，套餐不赠送饮料了。\n通知没有点口味的顾客一律默认微辣\n通知，双人套餐里面的牛蛙换牛肉，菠菜改成青菜。",
-  "rating": 4.1,
-  "rating_count": 897,
-  "recent_order_num": 3019,
-  "status": 1,
-  "supports": [{
-    "description": "已加入“外卖保”计划，食品安全有保障",
-    "icon_color": "4B9A18",
-    "icon_name": "保",
-    "id": 7,
-    "name": "外卖保"
-  }, {
-    "description": "准时必达，超时秒赔",
-    "icon_color": "57A9FF",
-    "icon_name": "准",
-    "id": 9,
-    "name": "准时达"
-  }]
-}, {
-  "activities": [{
-    "description": "在线支付满25减9，满50减15，满75减21，满100减27",
-    "icon_color": "f07373",
-    "icon_name": "减",
-    "id": 11362888,
-    "name": "满减优惠",
-    "tips": "在线支付满25减9，满50减15，满75减21，满100减27"
-  }, {
-    "description": "(不与其他活动同享)新用户下单立减8.0元",
-    "icon_color": "70bc46",
-    "icon_name": "新",
-    "id": 11331255,
-    "name": "新用户立减(不与其他活动共享)",
-    "tips": "(不与其他活动同享)新用户下单立减8.0元"
-  }],
-  "address": "上海市普陀区老真北路160号",
-  "delivery_mode": {
-    "color": "57A9FF",
-    "id": 1,
-    "is_solid": true,
-    "text": "蜂鸟专送"
-  },
-  "description": "",
-  "distance": 1552,
-  "float_delivery_fee": 5,
-  "float_minimum_order_amount": 20,
-  "id": 966779,
-  "image_path": "97f0393f518ef77f52e2fdd83a5e3014jpeg",
-  "is_new": false,
-  "is_premium": false,
-  "latitude": 31.224023,
-  "longitude": 121.375564,
-  "name": "凡仔汉堡（老真北路店）",
-  "next_business_time": "",
-  "only_use_poi": false,
-  "opening_hours": ["10:00/24:00"],
-  "order_lead_time": 37,
-  "phone": "13120508963",
-  "piecewise_agent_fee": {
-    "description": "满70免配送费，满20付¥5，不满20付¥7",
-    "extra_fee": 0,
-    "is_extra": false,
-    "rules": [{
-      "fee": 7,
-      "price": 0
-    }, {
-      "fee": 5,
-      "price": 20
-    }, {
-      "fee": 0,
-      "price": 70
-    }]
-  },
-  "promotion_info": "",
-  "rating": 4.5,
-  "rating_count": 581,
-  "recent_order_num": 2820,
-  "status": 1,
-  "supports": [{
-    "description": "已加入“外卖保”计划，食品安全有保障",
-    "icon_color": "4B9A18",
-    "icon_name": "保",
-    "id": 7,
-    "name": "外卖保"
-  }, {
-    "description": "准时必达，超时秒赔",
-    "icon_color": "57A9FF",
-    "icon_name": "准",
-    "id": 9,
-    "name": "准时达"
-  }]
-}, {
-  "activities": [{
-    "description": "在线支付满30减10，满50减23，满75减34，满100减46",
-    "icon_color": "f07373",
-    "icon_name": "减",
-    "id": 11700424,
-    "name": "满减优惠",
-    "tips": "在线支付满30减10，满50减23，满75减34，满100减46"
-  }, {
-    "description": "(不与其他活动同享)新用户下单立减20.0元",
-    "icon_color": "70bc46",
-    "icon_name": "新",
-    "id": 11325228,
-    "name": "新用户立减(不与其他活动共享)",
-    "tips": "(不与其他活动同享)新用户下单立减20.0元"
-  }],
-  "address": "上海市长宁区金钟路968号15楼15-105室",
-  "bidding": "{\"target\":{\"restaurantId\":1181959,\"weight\":70,\"probability\":15.666130065917969},\"next\":null}",
-  "delivery_mode": {
-    "color": "57A9FF",
-    "id": 1,
-    "is_solid": true,
-    "text": "蜂鸟专送"
-  },
-  "description": "",
-  "distance": 835,
-  "float_delivery_fee": 5,
-  "float_minimum_order_amount": 20,
-  "id": 1181959,
-  "image_path": "9e52b44a186200a85ebda8613d9b7fe4jpeg",
-  "is_new": false,
-  "is_premium": false,
-  "latitude": 31.221967,
-  "longitude": 121.351307,
-  "name": "港式小铺",
-  "next_business_time": "",
-  "only_use_poi": false,
-  "opening_hours": ["08:30/20:00"],
-  "order_lead_time": 33,
-  "phone": "15721215080",
-  "piecewise_agent_fee": {
-    "description": "配送费¥5",
-    "extra_fee": 0,
-    "is_extra": false,
-    "rules": [{
-      "fee": 5,
-      "price": 20
-    }]
-  },
-  "promotion_info": "本店配菜不定期更新，如有不喜欢吃的可以提前备注哦。",
-  "rating": 4.3,
-  "rating_count": 101,
-  "recent_order_num": 926,
-  "status": 1,
-  "supports": [{
-    "description": "已加入“外卖保”计划，食品安全有保障",
-    "icon_color": "4B9A18",
-    "icon_name": "保",
-    "id": 7,
-    "name": "外卖保"
-  }, {
-    "description": "准时必达，超时秒赔",
-    "icon_color": "57A9FF",
-    "icon_name": "准",
-    "id": 9,
-    "name": "准时达"
-  }]
-}, {
-  "activities": [{
-    "description": "在线支付满30减6，满50减12，满80减17",
-    "icon_color": "f07373",
-    "icon_name": "减",
-    "id": 11464736,
-    "name": "满减优惠",
-    "tips": "在线支付满30减6，满50减12，满80减17"
-  }, {
-    "description": "(不与其他活动同享)新用户下单立减10.0元",
-    "icon_color": "70bc46",
-    "icon_name": "新",
-    "id": 11775071,
-    "name": "新用户立减(不与其他活动共享)",
-    "tips": "(不与其他活动同享)新用户下单立减10.0元"
-  }, {
-    "description": "7折美食抢先购",
-    "icon_color": "f07373",
-    "icon_name": "美",
-    "id": 1436117,
-    "name": "7折美食抢先购",
-    "tips": "7折美食抢先购"
-  }, {
-    "description": "(不与其它活动同享)品质折扣餐！【8折】",
-    "icon_color": "f07373",
-    "icon_name": "8",
-    "id": 1309191,
-    "name": "(不与其它活动同享)品质折扣餐！【8折】",
-    "tips": "(不与其它活动同享)品质折扣餐！【8折】"
-  }],
-  "address": "剑河路443-1",
-  "description": "麻辣香锅",
-  "distance": 1683,
-  "float_delivery_fee": 5,
-  "float_minimum_order_amount": 30,
-  "id": 354417,
-  "image_path": "0d3202781f001fb47d22e6b3a11cf838jpeg",
-  "is_new": false,
-  "is_premium": true,
-  "latitude": 31.211965,
-  "longitude": 121.368125,
-  "name": "蜀香源麻辣香锅（剑河路店）",
-  "next_business_time": "",
-  "only_use_poi": false,
-  "opening_hours": ["09:30/22:30"],
-  "order_lead_time": 34,
-  "phone": "18621549909 15152604655",
-  "piecewise_agent_fee": {
-    "description": "配送费¥5",
-    "extra_fee": 0,
-    "is_extra": false,
-    "rules": [{
-      "fee": 5,
-      "price": 30
-    }]
-  },
-  "promotion_info": "亲们感谢你们一直以来对本餐厅的支持，您的满意是我们不懈努力的动力。本店只专注一道菜，只希望顾客吃的开心。1.如果您还算喜欢本小店请动动手指收藏我们吧，这样您就不用在找我们啦。2.下雨天可以提前预定！方便您准时用餐。3.请确保您的电话畅通，以便送餐员能及时联系您及时送达。",
-  "rating": 4.4,
-  "rating_count": 1922,
-  "recent_order_num": 3152,
-  "status": 1,
-  "supports": []
-}, {
-  "activities": [{
-    "description": "在线支付满27减2，满40减3，满60减4，满80减5",
-    "icon_color": "f07373",
-    "icon_name": "减",
-    "id": 11381316,
-    "name": "满减优惠",
-    "tips": "在线支付满27减2，满40减3，满60减4，满80减5"
-  }, {
-    "description": "(不与其它活动同享)7折美食送海之言",
-    "icon_color": "f07373",
-    "icon_name": "言",
-    "id": 1443986,
-    "name": "(不与其它活动同享)7折美食送海之言",
-    "tips": "(不与其它活动同享)7折美食送海之言"
-  }, {
-    "description": "(不与其他活动同享)新用户下单立减20.0元",
-    "icon_color": "70bc46",
-    "icon_name": "新",
-    "id": 11325228,
-    "name": "新用户立减(不与其他活动共享)",
-    "tips": "(不与其他活动同享)新用户下单立减20.0元"
-  }],
-  "address": "长宁区北新泾街道天山西路490-1号",
-  "delivery_mode": {
-    "color": "57A9FF",
-    "id": 1,
-    "is_solid": true,
-    "text": "蜂鸟专送"
-  },
-  "description": "手擀皮儿，美味馅儿，朴实的做法，妈妈的味道。",
-  "distance": 797,
-  "float_delivery_fee": 5,
-  "float_minimum_order_amount": 20,
-  "id": 294234,
-  "image_path": "4b66b7426cfd9ed48692be4093140bddjpeg",
-  "is_new": false,
-  "is_premium": false,
-  "latitude": 31.2182270558569,
-  "longitude": 121.36176873398,
-  "name": "北京饺子馆",
-  "next_business_time": "",
-  "only_use_poi": false,
-  "opening_hours": ["09:00/21:00"],
-  "order_lead_time": 37,
-  "phone": "18221609817      15168913169",
-  "piecewise_agent_fee": {
-    "description": "配送费¥5",
-    "extra_fee": 0,
-    "is_extra": false,
-    "rules": [{
-      "fee": 5,
-      "price": 20
-    }]
-  },
-  "promotion_info": "北京饺子馆天山西路店，保质保量，尽快送达，请提前下单谢谢…。",
-  "rating": 4.5,
-  "rating_count": 287,
-  "recent_order_num": 2302,
-  "status": 1,
-  "supports": [{
-    "description": "已加入“外卖保”计划，食品安全有保障",
-    "icon_color": "4B9A18",
-    "icon_name": "保",
-    "id": 7,
-    "name": "外卖保"
-  }, {
-    "description": "准时必达，超时秒赔",
-    "icon_color": "57A9FF",
-    "icon_name": "准",
-    "id": 9,
-    "name": "准时达"
-  }]
-}, {
-  "activities": [{
-    "description": "在线支付满30减2，满60减3，满90减4，满120减5",
-    "icon_color": "f07373",
-    "icon_name": "减",
-    "id": 11380420,
-    "name": "满减优惠",
-    "tips": "在线支付满30减2，满60减3，满90减4，满120减5"
-  }, {
-    "description": "(不与其它活动同享)7折美食送海之言",
-    "icon_color": "f07373",
-    "icon_name": "言",
-    "id": 1444623,
-    "name": "(不与其它活动同享)7折美食送海之言",
-    "tips": "(不与其它活动同享)7折美食送海之言"
-  }, {
-    "description": "(不与其他活动同享)新用户下单立减20.0元",
-    "icon_color": "70bc46",
-    "icon_name": "新",
-    "id": 11325228,
-    "name": "新用户立减(不与其他活动共享)",
-    "tips": "(不与其他活动同享)新用户下单立减20.0元"
-  }],
-  "address": "上海市长宁区金钟路968号9号楼地下一层9-83室",
-  "delivery_mode": {
-    "color": "57A9FF",
-    "id": 1,
-    "is_solid": true,
-    "text": "蜂鸟专送"
-  },
-  "description": "饭典*新简餐",
-  "distance": 549,
-  "float_delivery_fee": 6,
-  "float_minimum_order_amount": 20,
-  "id": 658603,
-  "image_path": "9207bfaf770e4cb8c09c7c1170c28ec3jpeg",
-  "is_new": false,
-  "is_premium": false,
-  "latitude": 31.220184,
-  "longitude": 121.358512,
-  "name": "饭典*新简餐（凌空SOHO店）",
-  "next_business_time": "",
-  "only_use_poi": false,
-  "opening_hours": ["10:30/20:15"],
-  "order_lead_time": 34,
-  "phone": "62378719",
-  "piecewise_agent_fee": {
-    "description": "配送费¥6",
-    "extra_fee": 0,
-    "is_extra": false,
-    "rules": [{
-      "fee": 6,
-      "price": 20
-    }]
-  },
-  "promotion_info": " ",
-  "rating": 4.4,
-  "rating_count": 247,
-  "recent_order_num": 2112,
-  "status": 1,
-  "supports": [{
-    "description": "已加入“外卖保”计划，食品安全有保障",
-    "icon_color": "4B9A18",
-    "icon_name": "保",
-    "id": 7,
-    "name": "外卖保"
-  }, {
-    "description": "该商家支持开发票，开票订单金额30.0元起，请在下单时填写好发票抬头",
-    "icon_color": "9071CB",
-    "icon_name": "票",
-    "id": 4,
-    "name": "开发票"
-  }, {
-    "description": "准时必达，超时秒赔",
-    "icon_color": "57A9FF",
-    "icon_name": "准",
-    "id": 9,
-    "name": "准时达"
-  }]
-}, {
-  "activities": [{
-    "description": "在线支付满20减12，满40减16",
-    "icon_color": "f07373",
-    "icon_name": "减",
-    "id": 11711897,
-    "name": "满减优惠",
-    "tips": "在线支付满20减12，满40减16"
-  }, {
-    "description": "(不与其他活动同享)新用户下单立减5.0元",
-    "icon_color": "70bc46",
-    "icon_name": "新",
-    "id": 11736769,
-    "name": "新用户立减(不与其他活动共享)",
-    "tips": "(不与其他活动同享)新用户下单立减5.0元"
-  }, {
-    "description": "(不与其它活动同享)特价双人餐",
-    "icon_color": "f07373",
-    "icon_name": "惠",
-    "id": 1462573,
-    "name": "(不与其它活动同享)特价双人餐",
-    "tips": "(不与其它活动同享)特价双人餐"
-  }, {
-    "description": "(不与其它活动同享)品质折扣餐！【5.5折】",
-    "icon_color": "f07373",
-    "icon_name": "5.5",
-    "id": 1308903,
-    "name": "(不与其它活动同享)品质折扣餐！【5.5折】",
-    "tips": "(不与其它活动同享)品质折扣餐！【5.5折】"
-  }, {
-    "description": "13.9元特价菜",
-    "icon_color": "f1884f",
-    "icon_name": "值",
-    "id": 1353675,
-    "name": "(不与其它活动同享)13.9元特价菜",
-    "tips": "(不与其它活动同享)13.9元特价菜"
-  }, {
-    "description": "12.9元特价菜",
-    "icon_color": "f1884f",
-    "icon_name": "惠",
-    "id": 1353664,
-    "name": "(不与其它活动同享)12.9元特价菜",
-    "tips": "(不与其它活动同享)12.9元特价菜"
-  }, {
-    "description": "9.9元特价菜",
-    "icon_color": "f1884f",
-    "icon_name": "特",
-    "id": 1353658,
-    "name": "(不与其它活动同享)9.9元特价菜",
-    "tips": "(不与其它活动同享)9.9元特价菜"
-  }],
-  "address": "上海市金钟路633号地下一层甲部",
-  "description": "焦耳外卖，线上外卖销量领先品牌。",
-  "distance": 563,
-  "float_delivery_fee": 2,
-  "float_minimum_order_amount": 15,
-  "id": 640451,
-  "image_path": "1e93ff8421a343c20b8b33e02a18ba44png",
-  "is_new": false,
-  "is_premium": true,
-  "latitude": 31.220032,
-  "longitude": 121.359921,
-  "name": "焦耳·川式快餐（金钟路店）",
-  "next_business_time": "",
-  "only_use_poi": false,
-  "opening_hours": ["09:00/20:00"],
-  "order_lead_time": 36,
-  "phone": "13024126609",
-  "piecewise_agent_fee": {
-    "description": "配送费¥2",
-    "extra_fee": 0,
-    "is_extra": false,
-    "rules": [{
-      "fee": 2,
-      "price": 15
-    }]
-  },
-  "promotion_info": "想吃辣，订焦耳。焦耳，地道川式快餐。直营门店超过100家，服务顾客人次超过500万。既辣又好吃，当然更受欢迎。焦耳，地道川式快餐。",
-  "rating": 4.1,
-  "rating_count": 345,
-  "recent_order_num": 2972,
-  "status": 1,
-  "supports": [{
-    "description": "该商家支持开发票，开票订单金额300.0元起，请在下单时填写好发票抬头",
-    "icon_color": "9071CB",
-    "icon_name": "票",
-    "id": 4,
-    "name": "开发票"
-  }]
-}, {
-  "activities": [{
-    "description": "在线支付满27减12，满50减17，满75减22，满100减28",
-    "icon_color": "f07373",
-    "icon_name": "减",
-    "id": 11754783,
-    "name": "满减优惠",
-    "tips": "在线支付满27减12，满50减17，满75减22，满100减28"
-  }, {
-    "description": "(不与其他活动同享)新用户下单立减20.0元",
-    "icon_color": "70bc46",
-    "icon_name": "新",
-    "id": 11325228,
-    "name": "新用户立减(不与其他活动共享)",
-    "tips": "(不与其他活动同享)新用户下单立减20.0元"
-  }],
-  "address": "长宁区仙霞西路299弄3号101B",
-  "delivery_mode": {
-    "color": "57A9FF",
-    "id": 1,
-    "is_solid": true,
-    "text": "蜂鸟专送"
-  },
-  "description": "",
-  "distance": 1978,
-  "float_delivery_fee": 5,
-  "float_minimum_order_amount": 20,
-  "id": 899176,
-  "image_path": "36b6e42e1044d230d883999118861616jpeg",
-  "is_new": false,
-  "is_premium": false,
-  "latitude": 31.208322,
-  "longitude": 121.366242,
-  "name": "动力鸡车",
-  "next_business_time": "",
-  "only_use_poi": false,
-  "opening_hours": ["09:40/23:30"],
-  "order_lead_time": 30,
-  "phone": "15821983760",
-  "piecewise_agent_fee": {
-    "description": "配送费¥5",
-    "extra_fee": 0,
-    "is_extra": false,
-    "rules": [{
-      "fee": 5,
-      "price": 20
-    }]
-  },
-  "promotion_info": "",
-  "rating": 4.6,
-  "rating_count": 331,
-  "recent_order_num": 1647,
-  "status": 1,
-  "supports": [{
-    "description": "已加入“外卖保”计划，食品安全有保障",
-    "icon_color": "4B9A18",
-    "icon_name": "保",
-    "id": 7,
-    "name": "外卖保"
-  }, {
-    "description": "准时必达，超时秒赔",
-    "icon_color": "57A9FF",
-    "icon_name": "准",
-    "id": 9,
-    "name": "准时达"
-  }]
-}, {
-  "activities": [{
-    "description": "在线支付满30减6，满60减15，满80减20",
-    "icon_color": "f07373",
-    "icon_name": "减",
-    "id": 11429176,
-    "name": "满减优惠",
-    "tips": "在线支付满30减6，满60减15，满80减20"
-  }, {
-    "description": "(不与其他活动同享)新用户下单立减20.0元",
-    "icon_color": "70bc46",
-    "icon_name": "新",
-    "id": 11325228,
-    "name": "新用户立减(不与其他活动共享)",
-    "tips": "(不与其他活动同享)新用户下单立减20.0元"
-  }],
-  "address": "天山西路430号",
-  "description": "本店支持饿了么网上订餐",
-  "distance": 1022,
-  "float_delivery_fee": 0,
-  "float_minimum_order_amount": 25,
-  "id": 354356,
-  "image_path": "ba38f2024dcb2253909c00a0e6d874eajpeg",
-  "is_new": false,
-  "is_premium": false,
-  "latitude": 31.216497,
-  "longitude": 121.363159,
-  "name": "浏阳蒸菜",
-  "next_business_time": "",
-  "only_use_poi": false,
-  "opening_hours": ["09:00/21:00"],
-  "order_lead_time": 33,
-  "phone": "18117452480",
-  "piecewise_agent_fee": {
-    "description": "免配送费",
-    "extra_fee": 0,
-    "is_extra": false,
-    "rules": [{
-      "fee": 0,
-      "price": 25
-    }]
-  },
-  "promotion_info": "注意:亲爱的各位顾客朋友们，以后下单麻烦亲都注意点米饭，没点的可要饿肚子喔。不需要米饭的请备注谢谢！",
-  "rating": 4.4,
-  "rating_count": 512,
-  "recent_order_num": 1597,
-  "status": 1,
-  "supports": []
-}, {
-  "activities": [{
-    "description": "在线支付满45减3，满70减4",
-    "icon_color": "f07373",
-    "icon_name": "减",
-    "id": 11586935,
-    "name": "满减优惠",
-    "tips": "在线支付满45减3，满70减4"
-  }, {
-    "description": "(不与其他活动同享)新用户下单立减10.0元",
-    "icon_color": "70bc46",
-    "icon_name": "新",
-    "id": 11333258,
-    "name": "新用户立减(不与其他活动共享)",
-    "tips": "(不与其他活动同享)新用户下单立减10.0元"
-  }],
-  "address": "上海市长宁区天山西路",
-  "delivery_mode": {
-    "color": "57A9FF",
-    "id": 1,
-    "is_solid": true,
-    "text": "蜂鸟专送"
-  },
-  "description": "欢迎光临\n",
-  "distance": 711,
-  "float_delivery_fee": 5,
-  "float_minimum_order_amount": 20,
-  "id": 215322,
-  "image_path": "37cf7580029b258da45784eb96a973e3jpeg",
-  "is_new": false,
-  "is_premium": true,
-  "latitude": 31.218766,
-  "longitude": 121.360561,
-  "name": "四海游龙（天山西路店）",
-  "next_business_time": "",
-  "only_use_poi": false,
-  "opening_hours": ["10:00/20:55"],
-  "order_lead_time": 29,
-  "phone": "52190867  13671916256",
-  "piecewise_agent_fee": {
-    "description": "配送费¥5",
-    "extra_fee": 0,
-    "is_extra": false,
-    "rules": [{
-      "fee": 5,
-      "price": 20
-    }]
-  },
-  "promotion_info": "本店锅贴酱的标准配置是1份锅贴1包酱请新老顾客谅解。",
-  "rating": 4.5,
-  "rating_count": 346,
-  "recent_order_num": 2284,
-  "status": 1,
-  "supports": [{
-    "description": "已加入“外卖保”计划，食品安全有保障",
-    "icon_color": "4B9A18",
-    "icon_name": "保",
-    "id": 7,
-    "name": "外卖保"
-  }, {
-    "description": "准时必达，超时秒赔",
-    "icon_color": "57A9FF",
-    "icon_name": "准",
-    "id": 9,
-    "name": "准时达"
-  }]
-}, {
-  "activities": [{
-    "description": "在线支付满30减15，满60减21",
-    "icon_color": "f07373",
-    "icon_name": "减",
-    "id": 11700412,
-    "name": "满减优惠",
-    "tips": "在线支付满30减15，满60减21"
-  }, {
-    "description": "(不与其他活动同享)新用户下单立减20.0元",
-    "icon_color": "70bc46",
-    "icon_name": "新",
-    "id": 11325228,
-    "name": "新用户立减(不与其他活动共享)",
-    "tips": "(不与其他活动同享)新用户下单立减20.0元"
-  }],
-  "address": "上海市长宁区金钟路968号15楼15-105室",
-  "delivery_mode": {
-    "color": "57A9FF",
-    "id": 1,
-    "is_solid": true,
-    "text": "蜂鸟专送"
-  },
-  "description": "樱花食堂：主营日式简餐系列   特色的蛋包饭  咖喱系列   好吃的照烧鸡排 健康的色拉系列！ 原为每一位顾客 提供 可口 美味 幸福的一餐",
-  "distance": 796,
-  "float_delivery_fee": 5,
-  "float_minimum_order_amount": 20,
-  "id": 1175700,
-  "image_path": "2f2bffdb4357942985de46f8e2163747png",
-  "is_new": false,
-  "is_premium": false,
-  "latitude": 31.221427,
-  "longitude": 121.352104,
-  "name": "樱花食堂（凌空店）",
-  "next_business_time": "",
-  "only_use_poi": false,
-  "opening_hours": ["09:00/20:00"],
-  "order_lead_time": 37,
-  "phone": "18018662689",
-  "piecewise_agent_fee": {
-    "description": "配送费¥5",
-    "extra_fee": 0,
-    "is_extra": false,
-    "rules": [{
-      "fee": 5,
-      "price": 20
-    }]
-  },
-  "promotion_info": "各位小主，本店优先配送饿了么，遇到恶劣天气送餐较慢，请多多担待哈！如果您的美食凉了，或者口味不好，一定要第一时间和本店联系，做得不好的地方我们一定加油改进，在这个寒冷的冬季，我们一定努力温暖您的胃，如您对送餐服务口味满意请给我5分好评呦！！！饿了么网络订餐，汇集周边所有美食、水果",
-  "rating": 3.8,
-  "rating_count": 262,
-  "recent_order_num": 2021,
-  "status": 1,
-  "supports": [{
-    "description": "已加入“外卖保”计划，食品安全有保障",
-    "icon_color": "4B9A18",
-    "icon_name": "保",
-    "id": 7,
-    "name": "外卖保"
-  }, {
-    "description": "准时必达，超时秒赔",
-    "icon_color": "57A9FF",
-    "icon_name": "准",
-    "id": 9,
-    "name": "准时达"
-  }]
-}, {
-  "activities": [{
-    "description": "在线支付满27减3，满50减6，满75减8，满100减12",
-    "icon_color": "f07373",
-    "icon_name": "减",
-    "id": 11381176,
-    "name": "满减优惠",
-    "tips": "在线支付满27减3，满50减6，满75减8，满100减12"
-  }, {
-    "description": "(不与其他活动同享)新用户下单立减20.0元",
-    "icon_color": "70bc46",
-    "icon_name": "新",
-    "id": 11325228,
-    "name": "新用户立减(不与其他活动共享)",
-    "tips": "(不与其他活动同享)新用户下单立减20.0元"
-  }],
-  "address": "天山西路428号",
-  "delivery_mode": {
-    "color": "57A9FF",
-    "id": 1,
-    "is_solid": true,
-    "text": "蜂鸟专送"
-  },
-  "description": "壹分米客家传统调制米粉(天山店)\n",
-  "distance": 855,
-  "float_delivery_fee": 5,
-  "float_minimum_order_amount": 20,
-  "id": 166349,
-  "image_path": "e6614cc644c41a64a1ef282d0e27aac3png",
-  "is_new": false,
-  "is_premium": false,
-  "latitude": 31.2182979790424,
-  "longitude": 121.363552917705,
-  "name": "壹分米客家传统调制米粉(天山店)",
-  "next_business_time": "",
-  "only_use_poi": false,
-  "opening_hours": ["10:30/21:00"],
-  "order_lead_time": 32,
-  "phone": "18117104418",
-  "piecewise_agent_fee": {
-    "description": "配送费¥5",
-    "extra_fee": 0,
-    "is_extra": false,
-    "rules": [{
-      "fee": 5,
-      "price": 20
-    }]
-  },
-  "promotion_info": "1、本店推荐陛下您在“饿了么”订餐—饭点较忙，电话常占线，本店优先配送饿了么订单。2、雨天路滑，外卖小哥会及时送达，避免催促发生事故。3、外卖制作+配送都需要消耗时间，为了能及时用餐，希望大家提前半小时以上预定，避开高峰拥堵。",
-  "rating": 4.7,
-  "rating_count": 147,
-  "recent_order_num": 1093,
-  "status": 1,
-  "supports": [{
-    "description": "已加入“外卖保”计划，食品安全有保障",
-    "icon_color": "4B9A18",
-    "icon_name": "保",
-    "id": 7,
-    "name": "外卖保"
-  }, {
-    "description": "准时必达，超时秒赔",
-    "icon_color": "57A9FF",
-    "icon_name": "准",
-    "id": 9,
-    "name": "准时达"
-  }]
-}, {
-  "activities": [{
-    "description": "在线支付满25减8，满60减15，满80减20",
-    "icon_color": "f07373",
-    "icon_name": "减",
-    "id": 11465592,
-    "name": "满减优惠",
-    "tips": "在线支付满25减8，满60减15，满80减20"
-  }, {
-    "description": "1元饮料秒杀",
-    "icon_color": "f1884f",
-    "icon_name": "秒",
-    "id": 1442522,
-    "name": "1元饮料秒杀",
-    "tips": "1元饮料秒杀"
-  }, {
-    "description": "(不与其它活动同享)5折限量优惠",
-    "icon_color": "f07373",
-    "icon_name": "折",
-    "id": 1439197,
-    "name": "(不与其它活动同享)5折限量优惠",
-    "tips": "(不与其它活动同享)5折限量优惠"
-  }, {
-    "description": "(不与其它活动同享)品质折扣餐！【8折】",
-    "icon_color": "f07373",
-    "icon_name": "8",
-    "id": 1309191,
-    "name": "(不与其它活动同享)品质折扣餐！【8折】",
-    "tips": "(不与其它活动同享)品质折扣餐！【8折】"
-  }, {
-    "description": "(不与其他活动同享)新用户下单立减15.0元",
-    "icon_color": "70bc46",
-    "icon_name": "新",
-    "id": 11272302,
-    "name": "新用户立减(不与其他活动共享)",
-    "tips": "(不与其他活动同享)新用户下单立减15.0元"
-  }],
-  "address": "上海市长宁区协和路福泉路255弄57-73号",
-  "description": "本店支持饿了么网上订餐",
-  "distance": 1326,
-  "float_delivery_fee": 0,
-  "float_minimum_order_amount": 20,
-  "id": 449057,
-  "image_path": "0ee404f65d865de198fd01922951a9dejpeg",
-  "is_new": false,
-  "is_premium": true,
-  "latitude": 31.21319,
-  "longitude": 121.35826,
-  "name": "福荣祥烧腊（平溪路店）",
-  "next_business_time": "",
-  "only_use_poi": false,
-  "opening_hours": ["09:30/19:30"],
-  "order_lead_time": 33,
-  "phone": "62402187",
-  "piecewise_agent_fee": {
-    "description": "免配送费",
-    "extra_fee": 0,
-    "is_extra": false,
-    "rules": [{
-      "fee": 0,
-      "price": 20
-    }]
-  },
-  "promotion_info": "1、本店推荐陛下您在“饿了么”订餐—饭点较忙，电话常占线，本店优先配送饿了么订单。2、雨天路滑，外卖小哥会及时送达，避免催促发生事故。3、外卖制作+配送都需要消耗时间，为了能及时用餐，希望大家提前半小时以上预定，避开高峰拥堵。",
-  "rating": 4.6,
-  "rating_count": 381,
-  "recent_order_num": 2388,
-  "status": 1,
-  "supports": []
-}, {
-  "activities": [{
-    "description": "在线支付满27减8，满50减16，满75减21，满100减26",
-    "icon_color": "f07373",
-    "icon_name": "减",
-    "id": 11719234,
-    "name": "满减优惠",
-    "tips": "在线支付满27减8，满50减16，满75减21，满100减26"
-  }, {
-    "description": "(不与其他活动同享)新用户下单立减20.0元",
-    "icon_color": "70bc46",
-    "icon_name": "新",
-    "id": 11325228,
-    "name": "新用户立减(不与其他活动共享)",
-    "tips": "(不与其他活动同享)新用户下单立减20.0元"
-  }],
-  "address": "上海市长宁区北新泾街道金钟路180号1层01号摊位",
-  "delivery_mode": {
-    "color": "57A9FF",
-    "id": 1,
-    "is_solid": true,
-    "text": "蜂鸟专送"
-  },
-  "description": "正宗黄焖鸡",
-  "distance": 1079,
-  "float_delivery_fee": 5,
-  "float_minimum_order_amount": 20,
-  "id": 454578,
-  "image_path": "f641a4fb59fa2d06a6e1b0f7b33877e5jpeg",
-  "is_new": false,
-  "is_premium": false,
-  "latitude": 31.21973,
-  "longitude": 121.368766,
-  "name": "速记黄焖鸡米饭",
-  "next_business_time": "",
-  "only_use_poi": false,
-  "opening_hours": ["09:30/23:00"],
-  "order_lead_time": 33,
-  "phone": "15821659008",
-  "piecewise_agent_fee": {
-    "description": "满70免配送费，满20付¥5，不满20付¥7",
-    "extra_fee": 0,
-    "is_extra": false,
-    "rules": [{
-      "fee": 7,
-      "price": 0
-    }, {
-      "fee": 5,
-      "price": 20
-    }, {
-      "fee": 0,
-      "price": 70
-    }]
-  },
-  "promotion_info": "1、本店推荐陛下您在“饿了么”订餐—饭点较忙，电话常占线，本店优先配送饿了么订单。2、雨天路滑，外卖小哥会及时送达，避免催促发生事故。3、外卖制作+配送都需要消耗时间，为了能及时用餐，希望大家提前半小时以上预定，避开高峰拥堵。",
-  "rating": 4.5,
-  "rating_count": 435,
-  "recent_order_num": 3286,
-  "status": 1,
-  "supports": [{
-    "description": "已加入“外卖保”计划，食品安全有保障",
-    "icon_color": "4B9A18",
-    "icon_name": "保",
-    "id": 7,
-    "name": "外卖保"
-  }, {
-    "description": "该商家支持开发票，开票订单金额100.0元起，请在下单时填写好发票抬头",
-    "icon_color": "9071CB",
-    "icon_name": "票",
-    "id": 4,
-    "name": "开发票"
-  }]
-}, {
-  "activities": [{
-    "description": "在线支付满25减12，满50减14，满75减19，满100减24",
-    "icon_color": "f07373",
-    "icon_name": "减",
-    "id": 11719285,
-    "name": "满减优惠",
-    "tips": "在线支付满25减12，满50减14，满75减19，满100减24"
-  }, {
-    "description": "(不与其他活动同享)新用户下单立减20.0元",
-    "icon_color": "70bc46",
-    "icon_name": "新",
-    "id": 11325228,
-    "name": "新用户立减(不与其他活动共享)",
-    "tips": "(不与其他活动同享)新用户下单立减20.0元"
-  }],
-  "address": "上海市长宁区天山西路492号",
-  "delivery_mode": {
-    "color": "57A9FF",
-    "id": 1,
-    "is_solid": true,
-    "text": "蜂鸟专送"
-  },
-  "description": "红辣椒麻辣烫",
-  "distance": 843,
-  "float_delivery_fee": 4,
-  "float_minimum_order_amount": 20,
-  "id": 722642,
-  "image_path": "100cfe42382b89575c9e85a5911974c2jpeg",
-  "is_new": false,
-  "is_premium": false,
-  "latitude": 31.217744,
-  "longitude": 121.361572,
-  "name": "红辣椒麻辣烫",
-  "next_business_time": "",
-  "only_use_poi": false,
-  "opening_hours": ["09:00/23:30"],
-  "order_lead_time": 28,
-  "phone": "13918958523",
-  "piecewise_agent_fee": {
-    "description": "配送费¥4",
-    "extra_fee": 0,
-    "is_extra": false,
-    "rules": [{
-      "fee": 4,
-      "price": 20
-    }]
-  },
-  "promotion_info": "新店开张，优惠多多，欢迎广大新老客户订餐。",
-  "rating": 4.2,
-  "rating_count": 609,
-  "recent_order_num": 1610,
-  "status": 1,
-  "supports": [{
-    "description": "已加入“外卖保”计划，食品安全有保障",
-    "icon_color": "4B9A18",
-    "icon_name": "保",
-    "id": 7,
-    "name": "外卖保"
-  }, {
-    "description": "准时必达，超时秒赔",
-    "icon_color": "57A9FF",
-    "icon_name": "准",
-    "id": 9,
-    "name": "准时达"
-  }]
-}, {
-  "activities": [{
-    "description": "在线支付满30减4，满60减10",
-    "icon_color": "f07373",
-    "icon_name": "减",
-    "id": 11325842,
-    "name": "满减优惠",
-    "tips": "在线支付满30减4，满60减10"
-  }, {
-    "description": "(不与其他活动同享)新用户下单立减10.0元",
-    "icon_color": "70bc46",
-    "icon_name": "新",
-    "id": 11718149,
-    "name": "新用户立减(不与其他活动共享)",
-    "tips": "(不与其他活动同享)新用户下单立减10.0元"
-  }],
-  "address": "长宁区仙霞西路88号百联2楼",
-  "delivery_mode": {
-    "color": "57A9FF",
-    "id": 1,
-    "is_solid": true,
-    "text": "蜂鸟专送"
-  },
-  "description": "(小杨生煎)西郊百联餐厅",
-  "distance": 2100,
-  "float_delivery_fee": 5,
-  "float_minimum_order_amount": 20,
-  "id": 105288,
-  "image_path": "c324dfa7c810d83d83709a5938edea5fpng",
-  "is_new": false,
-  "is_premium": true,
-  "latitude": 31.20877,
-  "longitude": 121.37041,
-  "name": "(小杨生煎)西郊百联餐厅",
-  "next_business_time": "",
-  "only_use_poi": false,
-  "opening_hours": ["10:00/21:00"],
-  "order_lead_time": 28,
-  "phone": "52171203",
-  "piecewise_agent_fee": {
-    "description": "配送费¥5",
-    "extra_fee": 0,
-    "is_extra": false,
-    "rules": [{
-      "fee": 5,
-      "price": 20
-    }]
-  },
-  "promotion_info": "",
-  "rating": 4.6,
-  "rating_count": 531,
-  "recent_order_num": 3456,
-  "status": 1,
-  "supports": [{
-    "description": "已加入“外卖保”计划，食品安全有保障",
-    "icon_color": "4B9A18",
-    "icon_name": "保",
-    "id": 7,
-    "name": "外卖保"
-  }, {
-    "description": "该商家支持开发票，请在下单时填写好发票抬头",
-    "icon_color": "9071CB",
-    "icon_name": "票",
-    "id": 4,
-    "name": "开发票"
-  }, {
-    "description": "准时必达，超时秒赔",
-    "icon_color": "57A9FF",
-    "icon_name": "准",
-    "id": 9,
-    "name": "准时达"
-  }]
-}, {
-  "activities": [{
-    "description": "在线支付满27减10，满50减12，满75减15，满100减20",
-    "icon_color": "f07373",
-    "icon_name": "减",
-    "id": 11381968,
-    "name": "满减优惠",
-    "tips": "在线支付满27减10，满50减12，满75减15，满100减20"
-  }, {
-    "description": "(不与其他活动同享)新用户下单立减20.0元",
-    "icon_color": "70bc46",
-    "icon_name": "新",
-    "id": 11325228,
-    "name": "新用户立减(不与其他活动共享)",
-    "tips": "(不与其他活动同享)新用户下单立减20.0元"
-  }],
-  "address": "天山西路389号",
-  "bidding": "{\"target\":{\"restaurantId\":13952,\"weight\":200,\"probability\":4.096244812011719},\"next\":null}",
-  "description": "阳阳麻辣烫",
-  "distance": 989,
-  "float_delivery_fee": 4,
-  "float_minimum_order_amount": 20,
-  "id": 13952,
-  "image_path": "80f5148923b649f392770c85b07355b8jpeg",
-  "is_new": false,
-  "is_premium": false,
-  "latitude": 31.217559,
-  "longitude": 121.364851,
-  "name": "阳阳麻辣烫",
-  "next_business_time": "",
-  "only_use_poi": false,
-  "opening_hours": ["09:30/01:00"],
-  "order_lead_time": 34,
-  "phone": "13482580513 62918941",
-  "piecewise_agent_fee": {
-    "description": "配送费¥4",
-    "extra_fee": 0,
-    "is_extra": false,
-    "rules": [{
-      "fee": 4,
-      "price": 20
-    }]
-  },
-  "promotion_info": "1、本店推荐陛下您在“饿了么”订餐—饭点较忙，电话常占线，本店优先配送饿了么订单。2、雨天路滑，外卖小哥会及时送达，避免催促发生事故。3、外卖制作+配送都需要消耗时间，为了能及时用餐，希望大家提前半小时以上预定，避开高峰拥堵。",
-  "rating": 4.5,
-  "rating_count": 1464,
-  "recent_order_num": 1883,
-  "status": 1,
-  "supports": []
-}, {
-  "activities": [{
-    "description": "在线支付满30减13，满60减18",
-    "icon_color": "f07373",
-    "icon_name": "减",
-    "id": 11683980,
-    "name": "满减优惠",
-    "tips": "在线支付满30减13，满60减18"
-  }, {
-    "description": "(不与其他活动同享)新用户下单立减8.0元",
-    "icon_color": "70bc46",
-    "icon_name": "新",
-    "id": 11331255,
-    "name": "新用户立减(不与其他活动共享)",
-    "tips": "(不与其他活动同享)新用户下单立减8.0元"
-  }],
-  "address": "普陀区金沙江路1699号鑫乐惠美食广场A13",
-  "delivery_mode": {
-    "color": "57A9FF",
-    "id": 1,
-    "is_solid": true,
-    "text": "蜂鸟专送"
-  },
-  "description": "本店特色专注于龙虾盖浇饭，因为专一，所以专业。口味上汇聚了“麻、辣、鲜、香、甜”几种口味，满足了年轻食客对味道的挑剔。",
-  "distance": 1875,
-  "float_delivery_fee": 5,
-  "float_minimum_order_amount": 20,
-  "id": 921427,
-  "image_path": "8fc7d60c9a1b00d958bf8a2a15045eeejpeg",
-  "is_new": false,
-  "is_premium": false,
-  "latitude": 31.2313678104899,
-  "longitude": 121.377572734967,
-  "name": "南拳妈妈龙虾盖浇饭",
-  "next_business_time": "",
-  "only_use_poi": false,
-  "opening_hours": ["09:30/20:30"],
-  "order_lead_time": 37,
-  "phone": "18217798760",
-  "piecewise_agent_fee": {
-    "description": "满70免配送费，满20付¥5，不满20付¥7",
-    "extra_fee": 0,
-    "is_extra": false,
-    "rules": [{
-      "fee": 7,
-      "price": 0
-    }, {
-      "fee": 5,
-      "price": 20
-    }, {
-      "fee": 0,
-      "price": 70
-    }]
-  },
-  "promotion_info": "1`中午11：00至13:00为用餐高峰期，配送繁忙为保证您及时用餐，请提前一小时订餐.如因饿了么配送运力不足，送达时间可能会延长，敬请谅解！\n2`龙虾季节来临，公司对龙虾食材进行专业把关，每一道工序严格把控，保证食品的卫生与安全，请顾客放心使用！\n\n南拳妈妈祝您用餐愉快！",
-  "rating": 4.5,
-  "rating_count": 216,
-  "recent_order_num": 2988,
-  "status": 1,
-  "supports": [{
-    "description": "该商家支持开发票，开票订单金额50.0元起，请在下单时填写好发票抬头",
-    "icon_color": "9071CB",
-    "icon_name": "票",
-    "id": 4,
-    "name": "开发票"
-  }, {
-    "description": "准时必达，超时秒赔",
-    "icon_color": "57A9FF",
-    "icon_name": "准",
-    "id": 9,
-    "name": "准时达"
-  }]
-}]
diff --git a/examples/assets/styles/common.css b/examples/assets/styles/common.css
index 8b137891791..6c778377d97 100644
--- a/examples/assets/styles/common.css
+++ b/examples/assets/styles/common.css
@@ -1 +1,169 @@
+html, body {
+  margin: 0;
+  padding: 0;
+  height: 100%;
+  font-family: 'Helvetica Neue',Helvetica,'PingFang SC','Hiragino Sans GB','Microsoft YaHei',SimSun,sans-serif;
+  font-weight: 400;
+  -webkit-font-smoothing: antialiased;
+  -webkit-tap-highlight-color: transparent;
 
+  &.is-component {
+    overflow: hidden;
+  }
+}
+
+#app {
+  height: 100%;
+  
+  &.is-component {
+    overflow-y: hidden;
+
+    .main-cnt {
+      padding: 0;
+      margin-top: 0;
+      height: 100%;
+      min-height: auto;
+    }
+
+    .headerWrapper {
+      position: fixed;
+      width: 100%;
+      left: 0;
+      top: 0;
+      z-index: 1500;
+      
+      .container {
+        padding: 0;
+      }
+    }
+  }
+}
+
+a {
+  color: #2460e0;
+  text-decoration: none;
+}
+
+code {
+  background-color: #f9fafc;
+  padding: 0 4px;
+  border: 1px solid #eaeefb;
+  border-radius: 4px;
+}
+
+button, input, select, textarea {
+  font-family: inherit;
+  font-size: inherit;
+  line-height: inherit;
+  color: inherit;
+}
+
+.hljs {
+  line-height: 1.8;
+  font-family: Menlo, Monaco, Consolas, Courier, monospace;
+  font-size: 12px;
+  padding: 18px 24px;
+  background-color: #fafafa;
+  border: solid 1px #eaeefb;
+  margin-bottom: 25px;
+  border-radius: 4px;
+  -webkit-font-smoothing: auto;
+}
+
+.main-cnt {
+  margin-top: -80px;
+  padding: 80px 0 340px;
+  box-sizing: border-box;
+  min-height: 100%;
+}
+
+.container,
+.page-container {
+  width: 1140px;
+  padding: 0;
+  margin: 0 auto;
+}
+
+.page-container {
+  padding-top: 55px;
+
+  h2 {
+    font-size: 28px;
+    color: #1f2d3d;
+    margin: 0;
+  }
+  h3 {
+    font-size: 22px;
+  }
+  h2, h3, h4, h5 {
+    font-weight: normal;
+    color: #1f2f3d;
+
+    &:hover a {
+      opacity: .4;
+    }
+
+    a {
+      float: left;
+      margin-left: -20px;
+      opacity: 0;
+      cursor: pointer;
+
+      &:hover {
+        opacity: .4;
+      }
+    }
+  }
+
+  p {
+    font-size: 14px;
+    color: #5e6d82;
+    line-height: 1.5em;
+  }
+
+  .tip {
+    padding: 8px 16px;
+    background-color: #ECF8FF;
+    border-radius: 4px;
+    border-left: #50bfff 5px solid;
+    margin: 20px 0;
+
+    code {
+      background-color: rgba(255, 255, 255, .7);
+      color: #445368;
+    }
+  }
+
+  .warning {
+    padding: 8px 16px;
+    background-color: #fff6f7;
+    border-radius: 4px;
+    border-left: #FE6C6F 5px solid;
+    margin: 20px 0;
+
+    code {
+      background-color: rgba(255, 255, 255, .7);
+      color: #445368;
+    }
+  }
+}
+.demo {
+  margin: 20px 0;
+}
+@media (max-width: 1140px) {
+  .container,
+  .page-container {
+    width: 100%;
+  }
+}
+
+@media (max-width: 768px) {
+  .container,
+  .page-container {
+    padding: 0 20px;
+  }
+
+  #app.is-component .headerWrapper .container {
+    padding: 0 12px;
+  }
+}
diff --git a/examples/color.js b/examples/color.js
new file mode 100644
index 00000000000..662b233eeb4
--- /dev/null
+++ b/examples/color.js
@@ -0,0 +1,18 @@
+export const tintColor = (c, tint) => {
+  const color = c.replace('#', '');
+  let red = parseInt(color.slice(0, 2), 16);
+  let green = parseInt(color.slice(2, 4), 16);
+  let blue = parseInt(color.slice(4, 6), 16);
+
+  if (tint === 0) { // when primary color is in its rgb space
+    return [red, green, blue].join(',');
+  } else {
+    red += Math.round(tint * (255 - red));
+    green += Math.round(tint * (255 - green));
+    blue += Math.round(tint * (255 - blue));
+    red = red.toString(16);
+    green = green.toString(16);
+    blue = blue.toString(16);
+    return `#${ red }${ green }${ blue }`;
+  }
+};
diff --git a/examples/components/demo-block.vue b/examples/components/demo-block.vue
index ae29f29c5b6..7de62124c6b 100644
--- a/examples/components/demo-block.vue
+++ b/examples/components/demo-block.vue
@@ -4,12 +4,16 @@
     :class="[blockClass, { 'hover': hovering }]"
     @mouseenter="hovering = true"
     @mouseleave="hovering = false">
-    <slot name="source"></slot>
+    <div class="source">
+      <slot name="source"></slot>
+    </div>
     <div class="meta" ref="meta">
       <div class="description" v-if="$slots.default">
         <slot></slot>
       </div>
-      <slot name="highlight"></slot>
+      <div class="highlight">
+        <slot name="highlight"></slot>
+      </div>
     </div>
     <div
       class="demo-block-control"
@@ -29,7 +33,7 @@
             size="small"
             type="text"
             class="control-button"
-            @click.stop="goJsfiddle">
+            @click.stop="goCodepen">
             {{ langConfig['button-text'] }}
           </el-button>
         </transition>
@@ -38,7 +42,7 @@
   </div>
 </template>
 
-<style>
+<style lang="scss">
   .demo-block {
     border: solid 1px #ebebeb;
     border-radius: 3px;
@@ -153,7 +157,7 @@
       }
 
       &:hover {
-        color: #409EFF;
+        color: #2460e0;
         background-color: #f9fafc;
       }
 
@@ -178,11 +182,18 @@
 
 <script type="text/babel">
   import compoLang from '../i18n/component.json';
-  import { version } from 'main/index.js';
+  import Element from 'main/index.js';
+  import { stripScript, stripStyle, stripTemplate } from '../util';
+  const { version } = Element;
 
   export default {
     data() {
       return {
+        codepen: {
+          script: '',
+          html: '',
+          style: ''
+        },
         hovering: false,
         isExpanded: false,
         fixedControl: false,
@@ -190,16 +201,10 @@
       };
     },
 
-    props: {
-      jsfiddle: Object,
-      default() {
-        return {};
-      }
-    },
-
     methods: {
-      goJsfiddle() {
-        const { script, html, style } = this.jsfiddle;
+      goCodepen() {
+        // since 2.6.2 use code rather than jsfiddle https://blog.codepen.io/documentation/api/prefill/
+        const { script, html, style } = this.codepen;
         const resourcesTpl = '<scr' + 'ipt src="//unpkg.com/vue/dist/vue.js"></scr' + 'ipt>' +
         '\n<scr' + `ipt src="//unpkg.com/element-ui@${ version }/lib/index.js"></scr` + 'ipt>';
         let jsTpl = (script || '').replace(/export default/, 'var Main =').trim();
@@ -211,25 +216,23 @@
         const data = {
           js: jsTpl,
           css: cssTpl,
-          html: htmlTpl,
-          panel_js: 3,
-          panel_css: 1
+          html: htmlTpl
         };
         const form = document.getElementById('fiddle-form') || document.createElement('form');
-        form.innerHTML = '';
-        const node = document.createElement('textarea');
-
-        form.method = 'post';
-        form.action = 'https://jsfiddle.net/api/post/library/pure/';
-        form.target = '_blank';
-
-        for (let name in data) {
-          node.name = name;
-          node.value = data[name].toString();
-          form.appendChild(node.cloneNode());
+        while (form.firstChild) {
+          form.removeChild(form.firstChild);
         }
-        form.setAttribute('id', 'fiddle-form');
+        form.method = 'POST';
+        form.action = 'https://codepen.io/pen/define/';
+        form.target = '_blank';
         form.style.display = 'none';
+
+        const input = document.createElement('input');
+        input.setAttribute('name', 'data');
+        input.setAttribute('type', 'hidden');
+        input.setAttribute('value', JSON.stringify(data));
+
+        form.appendChild(input);
         document.body.appendChild(form);
 
         form.submit();
@@ -298,6 +301,25 @@
       }
     },
 
+    created() {
+      const highlight = this.$slots.highlight;
+      if (highlight && highlight[0]) {
+        let code = '';
+        let cur = highlight[0];
+        if (cur.tag === 'pre' && (cur.children && cur.children[0])) {
+          cur = cur.children[0];
+          if (cur.tag === 'code') {
+            code = cur.children[0].text;
+          }
+        }
+        if (code) {
+          this.codepen.html = stripTemplate(code);
+          this.codepen.script = stripScript(code);
+          this.codepen.style = stripStyle(code);
+        }
+      }
+    },
+
     mounted() {
       this.$nextTick(() => {
         let highlight = this.$el.getElementsByClassName('highlight')[0];
diff --git a/examples/components/footer-nav.vue b/examples/components/footer-nav.vue
index 45e58123ea0..882e731183a 100644
--- a/examples/components/footer-nav.vue
+++ b/examples/components/footer-nav.vue
@@ -17,43 +17,43 @@
   </div>
 </template>
 
-<style>
+<style lang="scss">
   .footer-nav {
     padding: 40px 0;
     color: #333;
     font-size: 14px;
-    
+
     &::after {
       content: '';
       display: block;
       clear: both;
     }
-     
+
     & i {
       transition: .3s;
       color: #999;
       vertical-align: baseline;
     }
   }
-  
+
   .footer-nav-link {
     cursor: pointer;
     transition: .3s;
-    
+
     &:hover {
-      color: #409EFF;
-     
+      color: #2460e0;
+
       & i {
-        color: #409EFF;
+        color: #2460e0;
       }
     }
   }
-  
+
   .footer-nav-left {
     float: left;
     margin-left: -4px;
   }
-  
+
   .footer-nav-right {
     float: right;
     margin-right: -4px;
@@ -118,4 +118,4 @@
       this.updateNav();
     }
   };
-</script>
\ No newline at end of file
+</script>
diff --git a/examples/components/footer.vue b/examples/components/footer.vue
index aa9db812140..50cd7ae8132 100644
--- a/examples/components/footer.vue
+++ b/examples/components/footer.vue
@@ -3,20 +3,19 @@
     <div class="container">
       <div class="footer-main">
         <h4>{{ langConfig.links }}</h4>
-        <a href="https://github.com/ElemeFE/element" class="footer-main-link" target="_blank">{{ langConfig.repo }}</a>
-        <a href="https://github.com/ElemeFE/element/releases" class="footer-main-link" target="_blank">{{ langConfig.changelog }}</a>
-        <a href="https://github.com/ElemeFE/element/blob/dev/FAQ.md" class="footer-main-link" target="_blank">{{ langConfig.faq }}</a>
+        <a href="https://github.com/femessage/element" class="footer-main-link" target="_blank">{{ langConfig.repo }}</a>
+        <a href="https://github.com/femessage/element/releases" class="footer-main-link" target="_blank">{{ langConfig.changelog }}</a>
+        <a href="https://github.com/femessage/element/blob/dev/FAQ.md" class="footer-main-link" target="_blank">{{ langConfig.faq }}</a>
         <a href="https://github.com/ElementUI/element-starter" class="footer-main-link" target="_blank">{{ langConfig.starter }}</a>
-        <a href="https://github.com/ElementUI/element-theme" class="footer-main-link" target="_blank">{{ langConfig.theme }}</a>
-        <a href="https://github.com/ElementUI/theme-chalk-preview" class="footer-main-link" target="_blank">{{ langConfig.preview }}</a>
+        <a :href="'/#/' + lang + '/component/custom-theme'" class="footer-main-link" target="_blank">{{ langConfig.theme }}</a>
         <a href="https://github.com/elemefe/element-react" class="footer-main-link" target="_blank">Element-React</a>
         <a href="https://github.com/ElemeFE/element-angular" class="footer-main-link" target="_blank">Element-Angular</a>
       </div>
       <div class="footer-main">
         <h4>{{ langConfig.community }}</h4>
         <a :href="gitterLink" class="footer-main-link" target="_blank">{{ langConfig.gitter }}</a>
-        <a href="https://github.com/ElemeFE/element/issues" class="footer-main-link" target="_blank">{{ langConfig.feedback }}</a>
-        <a :href="`https://github.com/ElemeFE/element/blob/master/.github/CONTRIBUTING.${ lang }.md`" class="footer-main-link" target="_blank">{{ langConfig.contribution }}</a>
+        <a href="https://github.com/femessage/element/issues" class="footer-main-link" target="_blank">{{ langConfig.feedback }}</a>
+        <a :href="`https://github.com/femessage/element/blob/master/.github/CONTRIBUTING.${ lang }.md`" class="footer-main-link" target="_blank">{{ langConfig.contribution }}</a>
         <a href="https://segmentfault.com/t/element-ui" class="footer-main-link" target="_blank">SegmentFault</a>
         <a href="https://github.com/ElementUI/awesome-element" class="footer-main-link" target="_blank">Awesome Element</a>
       </div>
@@ -32,7 +31,7 @@
           <img src="../assets/images/qrcode.png" alt="">
         </el-popover>
         <i class="doc-icon-weixin elementdoc" v-popover:weixin></i>
-        <a href="https://github.com/elemefe" target="_blank">
+        <a href="https://github.com/femessage" target="_blank">
           <i class="doc-icon-github elementdoc"></i>
         </a>
         <a :href="gitterLink" target="_blank">
@@ -43,7 +42,7 @@
   </footer>
 </template>
 
-<style>
+<style lang="scss">
   .footer {
     background-color: #F7FBFD;
     width: 100%;
@@ -62,7 +61,7 @@
       display: inline-block;
       vertical-align: top;
       margin-right: 110px;
-    
+
       h4 {
         font-size: 18px;
         color: #333;
@@ -86,7 +85,7 @@
     .footer-social {
       float: right;
       text-align: right;
-    
+
       .footer-social-title {
         color: #666;
         font-size: 18px;
@@ -144,13 +143,13 @@
       height: auto;
     }
   }
-  
+
   @media (max-width: 1000px) {
     .footer-social {
       display: none;
     }
   }
-  
+
   @media (max-width: 768px) {
     .footer {
       .footer-main {
@@ -162,7 +161,8 @@
 
 <script type="text/babel">
   import compoLang from '../i18n/component.json';
-  import { version } from 'main/index.js';
+  import Element from 'main/index.js';
+  const { version } = Element;
 
   export default {
     data() {
diff --git a/examples/components/header.vue b/examples/components/header.vue
index b841620b39d..b8e68a58239 100644
--- a/examples/components/header.vue
+++ b/examples/components/header.vue
@@ -1,4 +1,4 @@
-<style scoped>
+<style lang="scss" scoped>
   .headerWrapper {
     height: 80px;
   }
@@ -10,13 +10,14 @@
     top: 0;
     left: 0;
     width: 100%;
-    line-height: @height;
+    line-height: 80px;
     z-index: 100;
     position: relative;
 
     .container {
       height: 100%;
       box-sizing: border-box;
+      border-bottom: 1px solid #DCDFE6;
     }
 
     .nav-lang-spe {
@@ -54,9 +55,15 @@
       height: 100%;
       line-height: 80px;
       background: transparent;
-      @utils-clearfix;
       padding: 0;
       margin: 0;
+      &::before, &::after {
+        display: table;
+        content: "";
+      }
+      &::after {
+        clear: both;
+      }
     }
 
     .nav-gap {
@@ -90,11 +97,11 @@
       list-style: none;
       position: relative;
       cursor: pointer;
-    
+
       &.nav-algolia-search {
         cursor: default;
       }
-    
+
       &.lang-item,
       &:last-child {
         cursor: default;
@@ -111,35 +118,36 @@
           color: #888;
 
           &:hover {
-            color: #409EFF;
+            color: #2460e0;
           }
           &.active {
              font-weight: bold;
-             color: #409EFF;
+             color: #2460e0;
            }
         }
       }
 
       a {
         text-decoration: none;
-        color: #888;
+        color: #1989FA;
+        opacity: 0.5;
         display: block;
         padding: 0 22px;
 
         &.active,
         &:hover {
-          color: #333;
+          opacity: 1;
         }
 
         &.active::after {
           content: '';
           display: inline-block;
           position: absolute;
-          bottom: 15px;
-          left: calc(50% - 7px);
-          width: 14px;
-          height: 4px;
-          background: #409EFF;
+          bottom: 0;
+          left: calc(50% - 15px);
+          width: 30px;
+          height: 2px;
+          background: #2460e0;
         }
       }
     }
@@ -172,9 +180,9 @@
       transform: translateY(-2px);
     }
 
-    @when active {
+    .is-active {
       span, i {
-        color: #409EFF;
+        color: #2460e0;
       }
       i {
         transform: rotateZ(180deg) translateY(3px);
@@ -183,11 +191,11 @@
 
     &:hover {
       span, i {
-        color: #409EFF;
+        color: #2460e0;
       }
     }
   }
-  
+
   .nav-dropdown-list {
     width: auto;
   }
@@ -207,7 +215,7 @@
         &:last-child {
           margin-left: 10px;
         }
-         
+
         a {
           padding: 0 5px;
         }
@@ -231,11 +239,11 @@
 
         &.lang-item {
           height: 100%;
-         
+
           .nav-lang {
             display: flex;
             align-items: center;
-            
+
             span {
               padding-bottom: 0;
             }
@@ -293,6 +301,14 @@
               :to="`/${ lang }/component`">{{ langConfig.components }}
             </router-link>
           </li>
+          <li
+            class="nav-item nav-item-theme"
+          >
+            <router-link
+              active-class="active"
+              :to="`/${ lang }/theme`">{{ langConfig.theme }}
+            </router-link>
+          </li>
           <li class="nav-item">
             <router-link
               active-class="active"
@@ -313,8 +329,8 @@
               class="nav-dropdown"
               :class="{ 'is-active': verDropdownVisible }">
               <span>
-                {{ version }}
-                <i class="el-icon-arrow-down el-icon--right"></i>
+                element: {{ elementVersion }}
+                <!-- <i class="el-icon-arrow-down el-icon--right"></i> -->
               </span>
               <el-dropdown-menu
                 slot="dropdown"
@@ -330,8 +346,34 @@
             </el-dropdown>
           </li>
 
+          <li class="nav-item nav-versions" v-show="isComponentPage">
+            <div class="nav-dropdown el-dropdown">
+              <span class="el-dropdown-selfdefine">deepexi: {{ deepexiVersion }}</span>
+            </div>
+            <!-- <el-dropdown
+              trigger="click"
+              class="nav-dropdown"
+              :class="{ 'is-active': verDropdownVisible }">
+              <span>
+                deepexi: {{ deepexiVersion }}
+                <i class="el-icon-arrow-down el-icon--right"></i>
+              </span>
+              <el-dropdown-menu
+                slot="dropdown"
+                class="nav-dropdown-list"
+                @input="handleVerDropdownToggle">
+                <el-dropdown-item
+                  v-for="item in Object.keys(versions)"
+                  :key="item"
+                  @click.native="switchVersion(item)">
+                  {{ item }}
+                </el-dropdown-item>
+              </el-dropdown-menu>
+            </el-dropdown> -->
+          </li>
+
           <!-- 语言选择器 -->
-          <li class="nav-item lang-item">
+          <!-- <li class="nav-item lang-item">
             <el-dropdown
               trigger="click"
               class="nav-dropdown nav-lang"
@@ -352,12 +394,7 @@
                 </el-dropdown-item>
               </el-dropdown-menu>
             </el-dropdown>
-          </li>
-          
-          <!--theme picker-->
-          <li class="nav-item nav-theme-switch" v-show="isComponentPage">
-            <theme-picker></theme-picker>
-          </li>
+          </li> -->
         </ul>
       </div>
     </header>
@@ -367,30 +404,43 @@
   import ThemePicker from './theme-picker.vue';
   import AlgoliaSearch from './search.vue';
   import compoLang from '../i18n/component.json';
-  import { version } from 'main/index.js';
+  import Element from 'main/index.js';
+  import themeLoader from './theme/loader';
+  import { getTestEle } from './theme/loader/api.js';
+  import bus from '../bus';
+  import { ACTION_USER_CONFIG_UPDATE } from './theme/constant.js';
+
+  const { version } = Element;
 
   export default {
     data() {
       return {
         active: '',
-        versions: [],
-        version,
+        versions: {},
+        deepexiVersion: version,
         verDropdownVisible: true,
         langDropdownVisible: true,
         langs: {
           'zh-CN': '中文',
           'en-US': 'English',
-          'es': 'Español'
+          'es': 'Español',
+          'fr-FR': 'Français'
         }
       };
     },
 
+    mixins: [themeLoader],
+
     components: {
       ThemePicker,
       AlgoliaSearch
     },
 
     computed: {
+      elementVersion() {
+        console.log(this.versions);
+        return Object.keys(this.versions)[0];
+      },
       lang() {
         return this.$route.path.split('/')[1] || 'zh-CN';
       },
@@ -404,7 +454,27 @@
         return /^component/.test(this.$route.name);
       }
     },
-
+    mounted() {
+      getTestEle()
+        .then(() => {
+          this.$isEle = true;
+          ga('send', 'event', 'DocView', 'Ele', 'Inner');
+        })
+        .catch((err) => {
+          ga('send', 'event', 'DocView', 'Ele', 'Outer');
+          console.error(err);
+        });
+      const testInnerImg = new Image();
+      testInnerImg.onload = () => {
+        this.$isEle = true;
+        ga('send', 'event', 'DocView', 'Ali', 'Inner');
+      };
+      testInnerImg.onerror = (err) => {
+        ga('send', 'event', 'DocView', 'Ali', 'Outer');
+        console.error(err);
+      };
+      testInnerImg.src = `https://private-alipayobjects.alipay.com/alipay-rmsdeploy-image/rmsportal/VmvVUItLdPNqKlNGuRHi.png?t=${Date.now()}`;
+    },
     methods: {
       switchVersion(version) {
         if (version === this.version) return;
@@ -437,8 +507,19 @@
           }, {});
         }
       };
-      xhr.open('GET', '/versions.json');
+      xhr.open('GET', '/element/versions.json');
       xhr.send();
+      let primaryLast = '#2460e0';
+      bus.$on(ACTION_USER_CONFIG_UPDATE, (val) => {
+        let primaryColor = val.global['$--color-primary'];
+        if (!primaryColor) primaryColor = '#2460e0';
+        const base64svg = 'data:image/svg+xml;base64,';
+        const imgSet = document.querySelectorAll('h1 img');
+        imgSet.forEach((img) => {
+          img.src = `${base64svg}${window.btoa(window.atob(img.src.replace(base64svg, '')).replace(primaryLast, primaryColor))}`;
+        });
+        primaryLast = primaryColor;
+      });
     }
   };
 </script>
diff --git a/examples/components/search.vue b/examples/components/search.vue
index 0060b0cc983..6ebc77959fc 100644
--- a/examples/components/search.vue
+++ b/examples/components/search.vue
@@ -6,11 +6,12 @@
     :fetch-suggestions="querySearch"
     :placeholder="placeholder"
     :trigger-on-focus="false"
-    @select="handleSelect">
+    @select="handleSelect"
+    highlight-first-item>
     <template slot-scope="props">
       <p class="algolia-search-title" v-if="props.item.title">
         <span v-html="props.item.highlightedCompo"></span>
-        <span class="algolia-search-separator">></span>
+        <span class="algolia-search-separator"></span>
         <span v-html="props.item.title"></span>
       </p>
       <p
@@ -34,10 +35,10 @@
   </el-autocomplete>
 </template>
 
-<style>
+<style lang="scss">
   .algolia-search {
     width: 450px !important;
-  
+
     &.is-empty {
       .el-autocomplete-suggestion__list {
         padding-bottom: 0;
@@ -51,27 +52,27 @@
 
     li {
       border-bottom: solid 1px #ebebeb;
-      
+
       &:last-child {
          border-bottom: none;
        }
     }
-    
+
     .algolia-highlight {
-      color: #409EFF;
+      color: #2460e0;
       font-weight: bold;
     }
-    
+
     .algolia-search-title {
       font-size: 14px;
       margin: 6px 0;
       line-height: 1.8;
     }
-    
+
     .algolia-search-separator {
       padding: 0 6px;
     }
-    
+
     .algolia-search-content {
       font-size: 12px;
       margin: 6px 0;
@@ -80,7 +81,7 @@
       text-overflow: ellipsis;
       white-space: nowrap;
     }
-    
+
     .algolia-search-link {
       position: absolute;
       bottom: 0;
@@ -96,14 +97,14 @@
       &:hover {
          background-color: #e4e7ed;
        }
-    
+
       img {
         display: inline-block;
         height: 17px;
         margin-top: 10px;
       }
     }
-  
+
     .algolia-search-empty {
       margin: 5px 0;
       text-align: center;
@@ -136,6 +137,11 @@
             search: 'Buscar',
             empty: 'No hay datos que coincidan',
             index: 'es'
+          },
+          'fr-FR': {
+            search: 'Rechercher',
+            empty: 'Aucun résultat',
+            index: 'fr'
           }
         }
       };
@@ -213,4 +219,4 @@
       this.initIndex();
     }
   };
-</script>
\ No newline at end of file
+</script>
diff --git a/examples/components/side-nav.vue b/examples/components/side-nav.vue
index f2d30a09b0c..42e6b0bf561 100644
--- a/examples/components/side-nav.vue
+++ b/examples/components/side-nav.vue
@@ -1,4 +1,4 @@
-<style>
+<style lang="scss">
   .side-nav {
     width: 100%;
     box-sizing: border-box;
@@ -41,7 +41,7 @@
         font-weight: bold;
 
         &.active {
-          color: #409EFF;
+          color: #2460e0;
         }
       }
 
@@ -59,7 +59,7 @@
 
           &:hover,
           &.active {
-            color: #409EFF;
+            color: #2460e0;
           }
         }
       }
@@ -122,7 +122,7 @@
     :class="{ 'is-fade': isFade }"
     :style="navStyle">
     <ul>
-      <li class="nav-item sponsors">
+      <!-- <li class="nav-item sponsors">
         <a>{{ lang === 'zh-CN' ? '赞助商' : 'Sponsors' }}</a>
         <ul class="pure-menu-list sub-nav">
           <li class="nav-item" v-show="lang !== 'zh-CN'">
@@ -130,18 +130,13 @@
               <img src="~examples/assets/images/tipe.svg" alt="tipe.io">
             </a>
           </li>
-          <li class="nav-item">
-            <a class="sponsor" href="https://www.duotai.net/?utm_source=element" target="_blank">
-              <img src="~examples/assets/images/duotai.svg" alt="duotai">
-            </a>
-          </li>
           <li class="nav-item">
             <a class="sponsor" href="https://www.duohui.cn/?utm_source=element&utm_medium=web&utm_campaign=element-index" target="_blank">
               <img src="~examples/assets/images/duohui.svg" alt="duohui">
             </a>
           </li>
         </ul>
-      </li>
+      </li> -->
       <li
         class="nav-item"
         v-for="(item, key) in data"
@@ -180,7 +175,7 @@
               <li
                 class="nav-item"
                 v-for="(navItem, key) in group.list"
-                v-if="!navItem.disabled"
+                v-show="!navItem.disabled"
                 :key="key">
                 <router-link
                   active-class="active"
@@ -190,6 +185,14 @@
               </li>
             </ul>
           </div>
+          <ul class="pure-menu-list">
+            <li
+              class="nav-item"
+              v-for="(navItem, key) in femessageNavs"
+              :key="key">
+              <a :href="navItem.url" target="_blank">{{navItem.repoName | upperFirst}} {{navItem.title}}</a>
+            </li>
+          </ul>
         </template>
       </li>
     </ul>
@@ -199,6 +202,7 @@
 <script>
   import bus from '../bus';
   import compoLang from '../i18n/component.json';
+  import {getFemessageNavs} from 'element-ui/src/utils/get-femessage-navs';
 
   export default {
     props: {
@@ -213,7 +217,8 @@
         highlights: [],
         navState: [],
         isSmallScreen: false,
-        isFade: false
+        isFade: false,
+        femessageNavs: []
       };
     },
     watch: {
@@ -278,6 +283,14 @@
         event.currentTarget.nextElementSibling.style.height = 'auto';
       }
     },
+
+    filters: {
+      upperFirst(value = '') {
+        const words = value.split('-');
+        return words.map(word => word.replace(word[0], word[0].toUpperCase())).join('');
+      }
+    },
+
     created() {
       bus.$on('fadeNav', () => {
         this.isFade = true;
@@ -285,6 +298,9 @@
     },
     mounted() {
       this.handleResize();
+      getFemessageNavs().then(navs=>{
+        this.femessageNavs = navs;
+      });
       window.addEventListener('resize', this.handleResize);
     },
     beforeDestroy() {
diff --git a/examples/components/theme-configurator/action.vue b/examples/components/theme-configurator/action.vue
new file mode 100644
index 00000000000..3dba0fe2291
--- /dev/null
+++ b/examples/components/theme-configurator/action.vue
@@ -0,0 +1,153 @@
+<template>
+  <div class="configurator-action">
+      <div class="action-group">
+        <el-tooltip :content="getActionDisplayName('undo')">
+          <img 
+            src="../../assets/images/icon-undo.svg"
+            @click="onUndo"
+            :class="{ 'active': userConfigHistory.length > 0 }"
+          />
+        </el-tooltip>
+        <el-tooltip :content="getActionDisplayName('redo')">
+          <img 
+            src="../../assets/images/icon-redo.svg"
+            @click="onRedo"
+            :class="{ 'active': userConfigRedoHistory.length > 0 }"
+          />
+        </el-tooltip>
+        <div class="button-group">
+          <el-button 
+            class="reset"
+            type="primary" 
+            round 
+            size="mini"
+            :disabled="isOfficial"
+            @click="onReset"
+          >
+            {{getActionDisplayName('reset-theme')}}
+          </el-button>
+          <el-button 
+            class="download"
+            type="primary" 
+            round 
+            size="mini"
+            :disabled="downloadDisabled"
+            @click="onDownload"
+          >
+            {{getActionDisplayName('download-theme')}}
+          </el-button>
+        </div>
+      </div>
+      <el-select v-model="selectedComponent" class="selector">
+        <el-option
+          v-for="item in selectOptions"
+          :key="item.value"
+          :label="item.label"
+          :value="item.value">
+        </el-option>
+      </el-select>
+      <div class="line"></div>
+    </div>
+</template>
+
+<style lang="scss">
+.configurator-action {
+  padding: 15px 18px 0;
+  .action-group {
+    padding: 5px 0;
+    img {
+      cursor: not-allowed;
+      width: 16px;
+      height: 16px;
+      padding: 7px 0;
+      margin-left: 5px;
+      opacity: .5;
+      &.active {
+        opacity: 1;
+        cursor: pointer;
+      }
+      &:last-of-type {
+        margin-left: 10px;
+      }
+    }
+    .button-group {
+      float: right;
+      .el-button {
+        padding: 6px 15px;
+        &.is-disabled {
+          color: #C0C4CC;
+          background-color: #fff;
+          border-color: #EBEEF5;
+        }
+      }
+      .reset {
+        background: #E6F1FC;
+        color: #1989FA;
+        border-color: #A2CFFC;
+      }
+      .download {
+        background: #1989FA;
+        color: #FFF;
+        border-color: #1989FA
+      }
+    }
+  }
+  .selector {
+    width: 100%;
+    input {
+      background: #f5f7fa;
+      border: none;
+      font-size: 18px;
+      padding-left: 0;
+      color: #606266;
+    }
+  }
+  .line {
+    width: 100%;
+    height: 0;
+    border-bottom: 1px solid #DCDFE6;
+  }
+}
+</style>
+
+<script>
+import { getActionDisplayName } from './utils/utils';
+export default {
+  props: {
+    selectOptions: Array,
+    userConfigHistory: Array,
+    userConfigRedoHistory: Array,
+    isOfficial: Boolean,
+    onUndo: Function,
+    onRedo: Function
+  },
+  data() {
+    return {
+      selectedComponent: 'color',
+      downloadDisabled: false
+    };
+  },
+  watch: {
+    selectedComponent: {
+      handler(val) {
+        this.$emit('select', val);
+      }
+    }
+  },
+  methods: {
+    getActionDisplayName(key) {
+      return getActionDisplayName(key);
+    },
+    onReset() {
+      this.$parent.onReset();
+    },
+    onDownload() {
+      this.downloadDisabled = true;
+      this.$parent.onDownload();
+      setTimeout(() => {
+        this.downloadDisabled = false;
+      }, 2500);
+    }
+  }
+};
+</script>
\ No newline at end of file
diff --git a/examples/components/theme-configurator/editor/borderRadius.vue b/examples/components/theme-configurator/editor/borderRadius.vue
new file mode 100644
index 00000000000..8ee85f267ac
--- /dev/null
+++ b/examples/components/theme-configurator/editor/borderRadius.vue
@@ -0,0 +1,89 @@
+<template>
+  <section class="config" :key="displayName">
+    <div class="config-label">
+      <el-tooltip :content="displayName" placement="top">
+        <span>{{displayKeyName}}</span>
+      </el-tooltip>
+    </div>
+    <div class="config-content">
+      <theme-input 
+        v-if="isGlobal"
+        :val="value"
+        @change="onChange"
+      ></theme-input>
+      <el-select 
+        size="medium"
+        v-if="!isGlobal"
+        v-model="value" 
+        class="select"
+        @change="onSelectChange"
+      >
+        <el-option
+          v-for="item in options"
+          :key="item.value"
+          :label="item.label"
+          :value="item.value">
+        </el-option>
+      </el-select>
+    </div>
+  </section>
+</template>
+
+<style>
+.select {
+  width: 100%;
+}
+</style>
+
+<script>
+import Mixin from './mixin';
+import Input from './input';
+import { getStyleDisplayName } from '../utils/utils.js';
+
+export default {
+  data() {
+    return {
+      options: [],
+      value: ''
+    };
+  },
+  components: {
+    themeInput: Input
+  },
+  mixins: [Mixin],
+  computed: {
+    isGlobalInputValue() {
+      return this.config.value.startsWith('$');
+    }
+  },
+  methods: {
+    onSelectChange(e) {
+      this.onChange(e);
+    },
+    initSelectOption() {
+      this.options = [];
+      const golbalV = this.golbalValue.border;
+      if (golbalV) {
+        Object.keys(golbalV).forEach((font) => {
+          if (font.includes('border-radius')) {
+            const size = golbalV[font];
+            this.options.push({
+              value: size.key,
+              label: getStyleDisplayName(size)
+            });
+          }
+        });
+      }
+    }
+  },
+  watch: {
+    'mergedValue': {
+      immediate: true,
+      handler(value) {
+        this.initSelectOption();
+        this.value = this.mergedValue;
+      }
+    }
+  }
+};
+</script>
\ No newline at end of file
diff --git a/examples/components/theme-configurator/editor/boxShadow.vue b/examples/components/theme-configurator/editor/boxShadow.vue
new file mode 100644
index 00000000000..dd6a4a8a440
--- /dev/null
+++ b/examples/components/theme-configurator/editor/boxShadow.vue
@@ -0,0 +1,158 @@
+<template>
+  <section class="config" :key="displayName">
+    <div class="config-label">
+      <el-tooltip :content="displayName" placement="top">
+        <span>{{displayKeyName}}</span>
+      </el-tooltip>
+      <el-button 
+        class="plus-button" 
+        size="mini" 
+        round 
+        icon="el-icon-plus"
+        @click.stop="onAddShadow"
+      >
+      </el-button>
+    </div>
+    <div class="config-content" v-for="(each, key) in valueArr" :key="key">
+      <div class="content-10">
+        <color-picker 
+          size="mini"
+          class="colorPicker"
+          v-model="each.color" 
+          @change="val => onInputChange(val, key, 'color')"
+          show-alpha
+        ></color-picker>
+        <span class="content-tip">Color</span>
+      </div>
+      <div class="content-20">
+        <theme-input  
+          size="mini"
+          :val="each.offsetX" 
+          @change="val => onInputChange(Number(val), key, 'offsetX')"
+        >
+        </theme-input>
+        <span class="content-tip">X-px</span>
+      </div>
+      <div class="content-20">
+        <theme-input 
+          size="mini"
+          :val="each.offsetY" 
+          @change="val => onInputChange(Number(val), key, 'offsetY')"
+        >
+        </theme-input>
+        <span class="content-tip">Y-px</span>
+      </div>
+      <div class="content-20">
+        <theme-input 
+          size="mini"
+          :val="each.spreadRadius" 
+          @change="val => onInputChange(Number(val), key, 'spreadRadius')"
+        >
+        </theme-input>
+        <span class="content-tip">Spread</span>
+      </div>
+      <div class="content-20">
+        <theme-input 
+          size="mini"
+          :val="each.blurRadius" 
+          @change="val => onInputChange(Number(val), key, 'blurRadius')"
+        >
+        </theme-input>
+        <span class="content-tip">Blur</span>
+      </div>
+      <div class="content-10">
+        <el-button 
+          size="mini" 
+          round 
+          icon="el-icon-minus"
+          @click.stop="val => onMinusShadow(key)"
+        ></el-button>
+      </div>
+    </div>
+  </section>
+</template>
+
+<style scoped>
+.plus-button {
+  position: absolute;
+  left: 90%;
+  margin-top: 4px;
+}
+.colorPicker {
+  margin-left: 0;
+}
+.content-20 .el-input__suffix-inner span{
+  line-height: 28px;
+}
+.content-20 {
+  padding: 0 3px;
+}
+.content-10 { 
+  vertical-align: top;
+}
+.content-tip {
+  color: #A7A8AD;
+  font-size: 12px;
+}
+.config-content {
+  padding: 5px 0;
+}
+/* Element buton style override */
+.el-button--mini.is-round {
+  padding: 3px 3px;  
+}
+</style>
+<script>
+import Mixin from './mixin';
+import Input from './input';
+import { parse as parseShaodw, stringify as stringifyShaodw } from '../utils/boxShadow.js';
+import ColorPicker from './color-picker';
+
+export default {
+  components: {
+    ColorPicker,
+    themeInput: Input
+  },
+  data() {
+    return {
+      valueArr: []
+    };
+  },
+  mixins: [Mixin],
+  methods: {
+    onAddShadow() {
+      this.valueArr.push({
+        offsetX: 0,
+        offsetY: 0,
+        spreadRadius: 0,
+        blurRadius: 0,
+        color: 'rgba(0,0,0,0)',
+        inset: false
+      });
+    },
+    onMinusShadow(index) {
+      this.valueArr.splice(index, 1);
+      this.onShadowChange();
+    },
+    onInputChange(e, index, key) {
+      const arr = this.valueArr[index];
+      arr[key] = e;
+      this.valueArr.splice(index, 1, arr);
+      this.onShadowChange();
+    },
+    onShadowChange() {
+      this.onChange(
+        stringifyShaodw(this.valueArr)
+      );
+    }
+  },
+  watch: {
+    'mergedValue': {
+      immediate: true,
+      handler(value) {
+        this.valueArr = parseShaodw(value);
+      }
+    }
+  }
+};
+</script>
\ No newline at end of file
diff --git a/examples/components/theme-configurator/editor/color-picker/index.js b/examples/components/theme-configurator/editor/color-picker/index.js
new file mode 100644
index 00000000000..d79e21e0892
--- /dev/null
+++ b/examples/components/theme-configurator/editor/color-picker/index.js
@@ -0,0 +1,8 @@
+import ColorPicker from './src/main';
+
+/* istanbul ignore next */
+ColorPicker.install = function(Vue) {
+  Vue.component(ColorPicker.name, ColorPicker);
+};
+
+export default ColorPicker;
diff --git a/examples/components/theme-configurator/editor/color-picker/src/color.js b/examples/components/theme-configurator/editor/color-picker/src/color.js
new file mode 100644
index 00000000000..8dee3c84df8
--- /dev/null
+++ b/examples/components/theme-configurator/editor/color-picker/src/color.js
@@ -0,0 +1,316 @@
+const hsv2hsl = function(hue, sat, val) {
+  return [
+    hue,
+    (sat * val / ((hue = (2 - sat) * val) < 1 ? hue : 2 - hue)) || 0,
+    hue / 2
+  ];
+};
+
+// Need to handle 1.0 as 100%, since once it is a number, there is no difference between it and 1
+// <http://stackoverflow.com/questions/7422072/javascript-how-to-detect-number-as-a-decimal-including-1-0>
+const isOnePointZero = function(n) {
+  return typeof n === 'string' && n.indexOf('.') !== -1 && parseFloat(n) === 1;
+};
+
+const isPercentage = function(n) {
+  return typeof n === 'string' && n.indexOf('%') !== -1;
+};
+
+// Take input from [0, n] and return it as [0, 1]
+const bound01 = function(value, max) {
+  if (isOnePointZero(value)) value = '100%';
+
+  const processPercent = isPercentage(value);
+  value = Math.min(max, Math.max(0, parseFloat(value)));
+
+  // Automatically convert percentage into number
+  if (processPercent) {
+    value = parseInt(value * max, 10) / 100;
+  }
+
+  // Handle floating point rounding errors
+  if ((Math.abs(value - max) < 0.000001)) {
+    return 1;
+  }
+
+  // Convert into [0, 1] range if it isn't already
+  return (value % max) / parseFloat(max);
+};
+
+const INT_HEX_MAP = { 10: 'A', 11: 'B', 12: 'C', 13: 'D', 14: 'E', 15: 'F' };
+
+const toHex = function({ r, g, b }) {
+  const hexOne = function(value) {
+    value = Math.min(Math.round(value), 255);
+    const high = Math.floor(value / 16);
+    const low = value % 16;
+    return '' + (INT_HEX_MAP[high] || high) + (INT_HEX_MAP[low] || low);
+  };
+
+  if (isNaN(r) || isNaN(g) || isNaN(b)) return '';
+
+  return '#' + hexOne(r) + hexOne(g) + hexOne(b);
+};
+
+const HEX_INT_MAP = { A: 10, B: 11, C: 12, D: 13, E: 14, F: 15 };
+
+const parseHexChannel = function(hex) {
+  if (hex.length === 2) {
+    return (HEX_INT_MAP[hex[0].toUpperCase()] || +hex[0]) * 16 + (HEX_INT_MAP[hex[1].toUpperCase()] || +hex[1]);
+  }
+
+  return HEX_INT_MAP[hex[1].toUpperCase()] || +hex[1];
+};
+
+const hsl2hsv = function(hue, sat, light) {
+  sat = sat / 100;
+  light = light / 100;
+  let smin = sat;
+  const lmin = Math.max(light, 0.01);
+  let sv;
+  let v;
+
+  light *= 2;
+  sat *= (light <= 1) ? light : 2 - light;
+  smin *= lmin <= 1 ? lmin : 2 - lmin;
+  v = (light + sat) / 2;
+  sv = light === 0 ? (2 * smin) / (lmin + smin) : (2 * sat) / (light + sat);
+
+  return {
+    h: hue,
+    s: sv * 100,
+    v: v * 100
+  };
+};
+
+// `rgbToHsv`
+// Converts an RGB color value to HSV
+// *Assumes:* r, g, and b are contained in the set [0, 255] or [0, 1]
+// *Returns:* { h, s, v } in [0,1]
+const rgb2hsv = function(r, g, b) {
+  r = bound01(r, 255);
+  g = bound01(g, 255);
+  b = bound01(b, 255);
+
+  const max = Math.max(r, g, b);
+  const min = Math.min(r, g, b);
+  let h, s;
+  let v = max;
+
+  const d = max - min;
+  s = max === 0 ? 0 : d / max;
+
+  if (max === min) {
+    h = 0; // achromatic
+  } else {
+    switch (max) {
+      case r:
+        h = (g - b) / d + (g < b ? 6 : 0);
+        break;
+      case g:
+        h = (b - r) / d + 2;
+        break;
+      case b:
+        h = (r - g) / d + 4;
+        break;
+    }
+    h /= 6;
+  }
+
+  return { h: h * 360, s: s * 100, v: v * 100 };
+};
+
+// `hsvToRgb`
+// Converts an HSV color value to RGB.
+// *Assumes:* h is contained in [0, 1] or [0, 360] and s and v are contained in [0, 1] or [0, 100]
+// *Returns:* { r, g, b } in the set [0, 255]
+const hsv2rgb = function(h, s, v) {
+  h = bound01(h, 360) * 6;
+  s = bound01(s, 100);
+  v = bound01(v, 100);
+
+  const i = Math.floor(h);
+  const f = h - i;
+  const p = v * (1 - s);
+  const q = v * (1 - f * s);
+  const t = v * (1 - (1 - f) * s);
+  const mod = i % 6;
+  const r = [v, q, p, p, t, v][mod];
+  const g = [t, v, v, q, p, p][mod];
+  const b = [p, p, t, v, v, q][mod];
+
+  return {
+    r: Math.round(r * 255),
+    g: Math.round(g * 255),
+    b: Math.round(b * 255)
+  };
+};
+
+export default class Color {
+  constructor(options) {
+    this._hue = 0;
+    this._saturation = 100;
+    this._value = 100;
+    this._alpha = 100;
+
+    this.enableAlpha = false;
+    this.format = 'hex';
+    this.value = '';
+
+    options = options || {};
+
+    for (let option in options) {
+      if (options.hasOwnProperty(option)) {
+        this[option] = options[option];
+      }
+    }
+
+    this.doOnChange();
+  }
+
+  set(prop, value) {
+    if (arguments.length === 1 && typeof prop === 'object') {
+      for (let p in prop) {
+        if (prop.hasOwnProperty(p)) {
+          this.set(p, prop[p]);
+        }
+      }
+
+      return;
+    }
+
+    this['_' + prop] = value;
+    this.doOnChange();
+  }
+
+  get(prop) {
+    return this['_' + prop];
+  }
+
+  toRgb() {
+    return hsv2rgb(this._hue, this._saturation, this._value);
+  }
+
+  fromString(value) {
+    if (!value) {
+      this._hue = 0;
+      this._saturation = 100;
+      this._value = 100;
+
+      this.doOnChange();
+      return;
+    }
+
+    const fromHSV = (h, s, v) => {
+      this._hue = Math.max(0, Math.min(360, h));
+      this._saturation = Math.max(0, Math.min(100, s));
+      this._value = Math.max(0, Math.min(100, v));
+
+      this.doOnChange();
+    };
+
+    if (value.indexOf('hsl') !== -1) {
+      const parts = value.replace(/hsla|hsl|\(|\)/gm, '')
+        .split(/\s|,/g).filter((val) => val !== '').map((val, index) => index > 2 ? parseFloat(val) : parseInt(val, 10));
+
+      if (parts.length === 4) {
+        this._alpha = Math.floor(parseFloat(parts[3]) * 100);
+      } else if (parts.length === 3) {
+        this._alpha = 100;
+      }
+      if (parts.length >= 3) {
+        const { h, s, v } = hsl2hsv(parts[0], parts[1], parts[2]);
+        fromHSV(h, s, v);
+      }
+    } else if (value.indexOf('hsv') !== -1) {
+      const parts = value.replace(/hsva|hsv|\(|\)/gm, '')
+        .split(/\s|,/g).filter((val) => val !== '').map((val, index) => index > 2 ? parseFloat(val) : parseInt(val, 10));
+
+      if (parts.length === 4) {
+        this._alpha = Math.floor(parseFloat(parts[3]) * 100);
+      } else if (parts.length === 3) {
+        this._alpha = 100;
+      }
+      if (parts.length >= 3) {
+        fromHSV(parts[0], parts[1], parts[2]);
+      }
+    } else if (value.indexOf('rgb') !== -1) {
+      const parts = value.replace(/rgba|rgb|\(|\)/gm, '')
+        .split(/\s|,/g).filter((val) => val !== '').map((val, index) => index > 2 ? parseFloat(val) : parseInt(val, 10));
+
+      if (parts.length === 4) {
+        this._alpha = Math.floor(parseFloat(parts[3]) * 100);
+      } else if (parts.length === 3) {
+        this._alpha = 100;
+      }
+      if (parts.length >= 3) {
+        const { h, s, v } = rgb2hsv(parts[0], parts[1], parts[2]);
+        fromHSV(h, s, v);
+      }
+    } else if (value.indexOf('#') !== -1) {
+      const hex = value.replace('#', '').trim();
+      let r, g, b;
+
+      if (hex.length === 3) {
+        r = parseHexChannel(hex[0] + hex[0]);
+        g = parseHexChannel(hex[1] + hex[1]);
+        b = parseHexChannel(hex[2] + hex[2]);
+      } else if (hex.length === 6 || hex.length === 8) {
+        r = parseHexChannel(hex.substring(0, 2));
+        g = parseHexChannel(hex.substring(2, 4));
+        b = parseHexChannel(hex.substring(4, 6));
+      }
+
+      if (hex.length === 8) {
+        this._alpha = Math.floor(parseHexChannel(hex.substring(6)) / 255 * 100);
+      } else if (hex.length === 3 || hex.length === 6) {
+        this._alpha = 100;
+      }
+
+      const { h, s, v } = rgb2hsv(r, g, b);
+      fromHSV(h, s, v);
+    }
+  }
+
+  compare(color) {
+    return Math.abs(color._hue - this._hue) < 2 &&
+      Math.abs(color._saturation - this._saturation) < 1 &&
+      Math.abs(color._value - this._value) < 1 &&
+      Math.abs(color._alpha - this._alpha) < 1;
+  }
+
+  doOnChange() {
+    const { _hue, _saturation, _value, _alpha, format } = this;
+
+    if (this.enableAlpha) {
+      switch (format) {
+        case 'hsl':
+          const hsl = hsv2hsl(_hue, _saturation / 100, _value / 100);
+          this.value = `hsla(${ _hue }, ${ Math.round(hsl[1] * 100) }%, ${ Math.round(hsl[2] * 100) }%, ${ _alpha / 100})`;
+          break;
+        case 'hsv':
+          this.value = `hsva(${ _hue }, ${ Math.round(_saturation) }%, ${ Math.round(_value) }%, ${ _alpha / 100})`;
+          break;
+        default:
+          const { r, g, b } = hsv2rgb(_hue, _saturation, _value);
+          this.value = `rgba(${r}, ${g}, ${b}, ${ _alpha / 100 })`;
+      }
+    } else {
+      switch (format) {
+        case 'hsl':
+          const hsl = hsv2hsl(_hue, _saturation / 100, _value / 100);
+          this.value = `hsl(${ _hue }, ${ Math.round(hsl[1] * 100) }%, ${ Math.round(hsl[2] * 100) }%)`;
+          break;
+        case 'hsv':
+          this.value = `hsv(${ _hue }, ${ Math.round(_saturation) }%, ${ Math.round(_value) }%)`;
+          break;
+        case 'rgb':
+          const { r, g, b } = hsv2rgb(_hue, _saturation, _value);
+          this.value = `rgb(${r}, ${g}, ${b})`;
+          break;
+        default:
+          this.value = toHex(hsv2rgb(_hue, _saturation, _value));
+      }
+    }
+  }
+};
diff --git a/examples/components/theme-configurator/editor/color-picker/src/components/alpha-slider.vue b/examples/components/theme-configurator/editor/color-picker/src/components/alpha-slider.vue
new file mode 100644
index 00000000000..efeb87fe72a
--- /dev/null
+++ b/examples/components/theme-configurator/editor/color-picker/src/components/alpha-slider.vue
@@ -0,0 +1,132 @@
+<template>
+  <div class="el-color-alpha-slider" :class="{ 'is-vertical': vertical }">
+    <div class="el-color-alpha-slider__bar"
+         @click="handleClick"
+         ref="bar"
+         :style="{
+           background: background
+         }">
+    </div>
+    <div class="el-color-alpha-slider__thumb"
+         ref="thumb"
+         :style="{
+           left: thumbLeft + 'px',
+           top: thumbTop + 'px'
+         }">
+    </div>
+  </div>
+</template>
+
+<script>
+  import draggable from '../draggable';
+
+  export default {
+    name: 'el-color-alpha-slider',
+
+    props: {
+      color: {
+        required: true
+      },
+      vertical: Boolean
+    },
+
+    watch: {
+      'color._alpha'() {
+        this.update();
+      },
+
+      'color.value'() {
+        this.update();
+      }
+    },
+
+    methods: {
+      handleClick(event) {
+        const thumb = this.$refs.thumb;
+        const target = event.target;
+
+        if (target !== thumb) {
+          this.handleDrag(event);
+        }
+      },
+
+      handleDrag(event) {
+        const rect = this.$el.getBoundingClientRect();
+        const { thumb } = this.$refs;
+
+        if (!this.vertical) {
+          let left = event.clientX - rect.left;
+          left = Math.max(thumb.offsetWidth / 2, left);
+          left = Math.min(left, rect.width - thumb.offsetWidth / 2);
+
+          this.color.set('alpha', Math.round((left - thumb.offsetWidth / 2) / (rect.width - thumb.offsetWidth) * 100));
+        } else {
+          let top = event.clientY - rect.top;
+          top = Math.max(thumb.offsetHeight / 2, top);
+          top = Math.min(top, rect.height - thumb.offsetHeight / 2);
+
+          this.color.set('alpha', Math.round((top - thumb.offsetHeight / 2) / (rect.height - thumb.offsetHeight) * 100));
+        }
+      },
+
+      getThumbLeft() {
+        if (this.vertical) return 0;
+        const el = this.$el;
+        const alpha = this.color._alpha;
+
+        if (!el) return 0;
+        const thumb = this.$refs.thumb;
+        return Math.round(alpha * (el.offsetWidth - thumb.offsetWidth / 2) / 100);
+      },
+
+      getThumbTop() {
+        if (!this.vertical) return 0;
+        const el = this.$el;
+        const alpha = this.color._alpha;
+
+        if (!el) return 0;
+        const thumb = this.$refs.thumb;
+        return Math.round(alpha * (el.offsetHeight - thumb.offsetHeight / 2) / 100);
+      },
+
+      getBackground() {
+        if (this.color && this.color.value) {
+          const { r, g, b } = this.color.toRgb();
+          return `linear-gradient(to right, rgba(${r}, ${g}, ${b}, 0) 0%, rgba(${r}, ${g}, ${b}, 1) 100%)`;
+        }
+        return null;
+      },
+
+      update() {
+        this.thumbLeft = this.getThumbLeft();
+        this.thumbTop = this.getThumbTop();
+        this.background = this.getBackground();
+      }
+    },
+
+    data() {
+      return {
+        thumbLeft: 0,
+        thumbTop: 0,
+        background: null
+      };
+    },
+
+    mounted() {
+      const { bar, thumb } = this.$refs;
+
+      const dragConfig = {
+        drag: (event) => {
+          this.handleDrag(event);
+        },
+        end: (event) => {
+          this.handleDrag(event);
+        }
+      };
+
+      draggable(bar, dragConfig);
+      draggable(thumb, dragConfig);
+      this.update();
+    }
+  };
+</script>
diff --git a/examples/components/theme-configurator/editor/color-picker/src/components/color-list.vue b/examples/components/theme-configurator/editor/color-picker/src/components/color-list.vue
new file mode 100644
index 00000000000..0230eed8985
--- /dev/null
+++ b/examples/components/theme-configurator/editor/color-picker/src/components/color-list.vue
@@ -0,0 +1,111 @@
+<template>
+  <div class="el-color-predefine color-list-container">
+    <div class="el-color-predefine__colors color-list">
+      <div class="color-list-item"
+           :class="{selected: item.selected, 'is-alpha': item._alpha < 100}"
+           v-for="(item, index) in rgbaColors"
+           :key="colors[index].variable"
+           @click="handleSelect(index)">
+        <span class="color-list-item-ball" :style="{'background-color': item.value}">
+        </span>
+        <div class="color-list-item-label">
+          {{item.info.label}} 
+          <div class="color-list-item-value">
+            {{item.info.value}} 
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+<style>
+  .color-list-container {
+    border-top: 1px solid #EBEEF5;
+    margin-top: 15px;
+    padding-top: 10px;
+    width: 100%;
+  }
+  .color-list {
+    max-height: 138px;
+    overflow: auto;
+  }
+  .color-list-item {
+    height: 24px;
+    width: 100%;
+    cursor: pointer;
+    margin: 2px 0;
+    position: relative;
+  }
+  .color-list-item:hover {
+    background: #efefef;
+  }
+  .color-list-item-ball {
+    height: 20px;
+    width: 20px;
+    margin-top: 2px;
+    margin-left: 5px;
+    border-radius: 100%;
+    display: block;
+    position: absolute;
+  }
+  .color-list-item-label {
+    margin-left: 35px;
+    font-size: 13px;
+    line-height: 24px;
+    display: inline-block;
+    width: 85%;
+    overflow: hidden;
+  }
+  .color-list-item-value { 
+    float: right;
+  }
+</style>
+
+<script>
+  import Color from '../color';
+
+  export default {
+    props: {
+      colors: { type: Array, required: true },
+      color: { required: true }
+    },
+    data() {
+      return {
+        rgbaColors: this.parseColors(this.colors, this.color)
+      };
+    },
+    methods: {
+      handleSelect(index) {
+        this.color.fromString(this.colors[index].value);
+        this.$emit('select', this.colors[index]);
+      },
+      parseColors(colors, color) {
+        return colors.map(value => {
+          const c = new Color();
+          c.enableAlpha = true;
+          c.format = 'rgba';
+          c.fromString(value.value);
+          c.info = value;
+          c.selected = c.value === color.value;
+          return c;
+        });
+      }
+    },
+    watch: {
+      '$parent.currentColor'(val) {
+        const color = new Color();
+        color.fromString(val);
+
+        this.rgbaColors.forEach(item => {
+          item.selected = color.compare(item);
+        });
+      },
+      colors(newVal) {
+        this.rgbaColors = this.parseColors(newVal, this.color);
+      },
+      color(newVal) {
+        this.rgbaColors = this.parseColors(this.colors, newVal);
+      }
+    }
+  };
+</script>
\ No newline at end of file
diff --git a/examples/components/theme-configurator/editor/color-picker/src/components/hue-slider.vue b/examples/components/theme-configurator/editor/color-picker/src/components/hue-slider.vue
new file mode 100644
index 00000000000..c93e42c0649
--- /dev/null
+++ b/examples/components/theme-configurator/editor/color-picker/src/components/hue-slider.vue
@@ -0,0 +1,123 @@
+<template>
+  <div class="el-color-hue-slider" :class="{ 'is-vertical': vertical }">
+    <div class="el-color-hue-slider__bar" @click="handleClick" ref="bar"></div>
+    <div class="el-color-hue-slider__thumb"
+         :style="{
+           left: thumbLeft + 'px',
+           top: thumbTop + 'px'
+         }"
+         ref="thumb">
+    </div>
+  </div>
+</template>
+
+<script>
+  import draggable from '../draggable';
+
+  export default {
+    name: 'el-color-hue-slider',
+
+    props: {
+      color: {
+        required: true
+      },
+
+      vertical: Boolean
+    },
+
+    data() {
+      return {
+        thumbLeft: 0,
+        thumbTop: 0
+      };
+    },
+
+    computed: {
+      hueValue() {
+        const hue = this.color.get('hue');
+        return hue;
+      }
+    },
+
+    watch: {
+      hueValue() {
+        this.update();
+      }
+    },
+
+    methods: {
+      handleClick(event) {
+        const thumb = this.$refs.thumb;
+        const target = event.target;
+
+        if (target !== thumb) {
+          this.handleDrag(event);
+        }
+      },
+
+      handleDrag(event) {
+        const rect = this.$el.getBoundingClientRect();
+        const { thumb } = this.$refs;
+        let hue;
+
+        if (!this.vertical) {
+          let left = event.clientX - rect.left;
+          left = Math.min(left, rect.width - thumb.offsetWidth / 2);
+          left = Math.max(thumb.offsetWidth / 2, left);
+
+          hue = Math.round((left - thumb.offsetWidth / 2) / (rect.width - thumb.offsetWidth) * 360);
+        } else {
+          let top = event.clientY - rect.top;
+          top = Math.min(top, rect.height - thumb.offsetHeight / 2);
+          top = Math.max(thumb.offsetHeight / 2, top);
+
+          hue = Math.round((top - thumb.offsetHeight / 2) / (rect.height - thumb.offsetHeight) * 360);
+        }
+
+        this.color.set('hue', hue);
+      },
+
+      getThumbLeft() {
+        if (this.vertical) return 0;
+        const el = this.$el;
+        const hue = this.color.get('hue');
+
+        if (!el) return 0;
+        const thumb = this.$refs.thumb;
+        return Math.round(hue * (el.offsetWidth - thumb.offsetWidth / 2) / 360);
+      },
+
+      getThumbTop() {
+        if (!this.vertical) return 0;
+        const el = this.$el;
+        const hue = this.color.get('hue');
+
+        if (!el) return 0;
+        const thumb = this.$refs.thumb;
+        return Math.round(hue * (el.offsetHeight - thumb.offsetHeight / 2) / 360);
+      },
+
+      update() {
+        this.thumbLeft = this.getThumbLeft();
+        this.thumbTop = this.getThumbTop();
+      }
+    },
+
+    mounted() {
+      const { bar, thumb } = this.$refs;
+
+      const dragConfig = {
+        drag: (event) => {
+          this.handleDrag(event);
+        },
+        end: (event) => {
+          this.handleDrag(event);
+        }
+      };
+
+      draggable(bar, dragConfig);
+      draggable(thumb, dragConfig);
+      this.update();
+    }
+  };
+</script>
diff --git a/examples/components/theme-configurator/editor/color-picker/src/components/picker-dropdown.vue b/examples/components/theme-configurator/editor/color-picker/src/components/picker-dropdown.vue
new file mode 100644
index 00000000000..1c16839da14
--- /dev/null
+++ b/examples/components/theme-configurator/editor/color-picker/src/components/picker-dropdown.vue
@@ -0,0 +1,135 @@
+<template>
+  <transition name="el-zoom-in-top" @after-leave="doDestroy">
+    <div
+      class="el-color-dropdown"
+      v-show="showPopper">
+      <div class="el-color-dropdown__main-wrapper">
+        <hue-slider ref="hue" :color="color" vertical style="float: right;"></hue-slider>
+        <sv-panel ref="sl" :color="color"></sv-panel>
+      </div>
+      <alpha-slider v-if="showAlpha" ref="alpha" :color="color"></alpha-slider>
+      <predefine v-if="predefine" :color="color" :colors="predefine"></predefine>
+      <div class="el-color-dropdown__btns">
+        <span class="el-color-dropdown__value">
+          <el-input
+            v-model="customInput"
+            @keyup.native.enter="handleConfirm"
+            @blur="handleConfirm"
+            :validate-event="false"
+            size="mini">
+          </el-input>
+        </span>
+        <!-- <el-button
+          size="mini"
+          type="text"
+          class="el-color-dropdown__link-btn"
+          @click="$emit('clear')">
+          {{ t('el.colorpicker.clear') }}
+        </el-button> -->
+        <el-button
+          plain
+          size="mini"
+          type="primary"
+          class="el-color-dropdown__btn"
+          @click="confirmValue">
+          {{ t('el.colorpicker.confirm') }}
+        </el-button>
+      </div>
+      <color-list 
+        v-if="colorList && colorList.length > 0" 
+        :color="color" 
+        :colors="colorList"
+        @select=onColorListSelect
+      ></color-list>
+    </div>
+  </transition>
+</template>
+
+<script>
+  import SvPanel from './sv-panel';
+  import HueSlider from './hue-slider';
+  import AlphaSlider from './alpha-slider';
+  import Predefine from './predefine';
+  import ColorList from './color-list';
+  import Popper from 'element-ui/src/utils/vue-popper';
+  import Locale from 'element-ui/src/mixins/locale';
+  import ElInput from 'element-ui/packages/input';
+  import ElButton from 'element-ui/packages/button';
+
+  export default {
+    name: 'el-color-picker-dropdown',
+
+    mixins: [Popper, Locale],
+
+    components: {
+      SvPanel,
+      HueSlider,
+      AlphaSlider,
+      ElInput,
+      ElButton,
+      Predefine,
+      ColorList
+    },
+
+    props: {
+      color: {
+        required: true
+      },
+      showAlpha: Boolean,
+      predefine: Array,
+      colorList: Array
+    },
+
+    data() {
+      return {
+        customInput: ''
+      };
+    },
+
+    computed: {
+      currentColor() {
+        const parent = this.$parent;
+        return !parent.value && !parent.showPanelColor ? '' : parent.color.value;
+      }
+    },
+
+    methods: {
+      confirmValue() {
+        this.$emit('pick');
+      },
+
+      onColorListSelect(e) {
+        this.$emit('pick', e);
+      },
+
+      handleConfirm() {
+        this.color.fromString(this.customInput);
+      }
+    },
+
+    mounted() {
+      this.$parent.popperElm = this.popperElm = this.$el;
+      this.referenceElm = this.$parent.$el;
+    },
+
+    watch: {
+      showPopper(val) {
+        if (val === true) {
+          this.$nextTick(() => {
+            const { sl, hue, alpha } = this.$refs;
+            sl && sl.update();
+            hue && hue.update();
+            alpha && alpha.update();
+          });
+        }
+      },
+
+      currentColor: {
+        immediate: true,
+        handler(val) {
+          this.customInput = val;
+        }
+      }
+    }
+  };
+</script>
diff --git a/examples/components/theme-configurator/editor/color-picker/src/components/predefine.vue b/examples/components/theme-configurator/editor/color-picker/src/components/predefine.vue
new file mode 100644
index 00000000000..1387c48a257
--- /dev/null
+++ b/examples/components/theme-configurator/editor/color-picker/src/components/predefine.vue
@@ -0,0 +1,61 @@
+<template>
+  <div class="el-color-predefine">
+    <div class="el-color-predefine__colors">
+      <div class="el-color-predefine__color-selector"
+           :class="{selected: item.selected, 'is-alpha': item._alpha < 100}"
+           v-for="(item, index) in rgbaColors"
+           :key="colors[index]"
+           @click="handleSelect(index)">
+        <div :style="{'background-color': item.value}">
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script>
+  import Color from '../color';
+
+  export default {
+    props: {
+      colors: { type: Array, required: true },
+      color: { required: true }
+    },
+    data() {
+      return {
+        rgbaColors: this.parseColors(this.colors, this.color)
+      };
+    },
+    methods: {
+      handleSelect(index) {
+        this.color.fromString(this.colors[index]);
+      },
+      parseColors(colors, color) {
+        return colors.map(value => {
+          const c = new Color();
+          c.enableAlpha = true;
+          c.format = 'rgba';
+          c.fromString(value);
+          c.selected = c.value === color.value;
+          return c;
+        });
+      }
+    },
+    watch: {
+      '$parent.currentColor'(val) {
+        const color = new Color();
+        color.fromString(val);
+
+        this.rgbaColors.forEach(item => {
+          item.selected = color.compare(item);
+        });
+      },
+      colors(newVal) {
+        this.rgbaColors = this.parseColors(newVal, this.color);
+      },
+      color(newVal) {
+        this.rgbaColors = this.parseColors(this.colors, newVal);
+      }
+    }
+  };
+</script>
\ No newline at end of file
diff --git a/examples/components/theme-configurator/editor/color-picker/src/components/sv-panel.vue b/examples/components/theme-configurator/editor/color-picker/src/components/sv-panel.vue
new file mode 100644
index 00000000000..66676a608c8
--- /dev/null
+++ b/examples/components/theme-configurator/editor/color-picker/src/components/sv-panel.vue
@@ -0,0 +1,100 @@
+<template>
+  <div class="el-color-svpanel"
+      :style="{
+        backgroundColor: background
+      }">
+    <div class="el-color-svpanel__white"></div>
+    <div class="el-color-svpanel__black"></div>
+    <div class="el-color-svpanel__cursor"
+      :style="{
+        top: cursorTop + 'px',
+        left: cursorLeft + 'px'
+      }">
+      <div></div>
+    </div>
+  </div>
+</template>
+
+<script>
+  import draggable from '../draggable';
+
+  export default {
+    name: 'el-sl-panel',
+
+    props: {
+      color: {
+        required: true
+      }
+    },
+
+    computed: {
+      colorValue() {
+        const hue = this.color.get('hue');
+        const value = this.color.get('value');
+        return { hue, value };
+      }
+    },
+
+    watch: {
+      colorValue() {
+        this.update();
+      }
+    },
+
+    methods: {
+      update() {
+        const saturation = this.color.get('saturation');
+        const value = this.color.get('value');
+
+        const el = this.$el;
+        let { clientWidth: width, clientHeight: height } = el;
+
+        this.cursorLeft = saturation * width / 100;
+        this.cursorTop = (100 - value) * height / 100;
+
+        this.background = 'hsl(' + this.color.get('hue') + ', 100%, 50%)';
+      },
+
+      handleDrag(event) {
+        const el = this.$el;
+        const rect = el.getBoundingClientRect();
+
+        let left = event.clientX - rect.left;
+        let top = event.clientY - rect.top;
+        left = Math.max(0, left);
+        left = Math.min(left, rect.width);
+
+        top = Math.max(0, top);
+        top = Math.min(top, rect.height);
+
+        this.cursorLeft = left;
+        this.cursorTop = top;
+        this.color.set({
+          saturation: left / rect.width * 100,
+          value: 100 - top / rect.height * 100
+        });
+      }
+    },
+
+    mounted() {
+      draggable(this.$el, {
+        drag: (event) => {
+          this.handleDrag(event);
+        },
+        end: (event) => {
+          this.handleDrag(event);
+        }
+      });
+
+      this.update();
+    },
+
+    data() {
+      return {
+        cursorTop: 0,
+        cursorLeft: 0,
+        background: 'hsl(0, 100%, 50%)'
+      };
+    }
+  };
+</script>
diff --git a/examples/components/theme-configurator/editor/color-picker/src/draggable.js b/examples/components/theme-configurator/editor/color-picker/src/draggable.js
new file mode 100644
index 00000000000..339a4852c6a
--- /dev/null
+++ b/examples/components/theme-configurator/editor/color-picker/src/draggable.js
@@ -0,0 +1,36 @@
+import Vue from 'vue';
+let isDragging = false;
+
+export default function(element, options) {
+  if (Vue.prototype.$isServer) return;
+  const moveFn = function(event) {
+    if (options.drag) {
+      options.drag(event);
+    }
+  };
+  const upFn = function(event) {
+    document.removeEventListener('mousemove', moveFn);
+    document.removeEventListener('mouseup', upFn);
+    document.onselectstart = null;
+    document.ondragstart = null;
+
+    isDragging = false;
+
+    if (options.end) {
+      options.end(event);
+    }
+  };
+  element.addEventListener('mousedown', function(event) {
+    if (isDragging) return;
+    document.onselectstart = function() { return false; };
+    document.ondragstart = function() { return false; };
+
+    document.addEventListener('mousemove', moveFn);
+    document.addEventListener('mouseup', upFn);
+    isDragging = true;
+
+    if (options.start) {
+      options.start(event);
+    }
+  });
+}
diff --git a/examples/components/theme-configurator/editor/color-picker/src/main.vue b/examples/components/theme-configurator/editor/color-picker/src/main.vue
new file mode 100644
index 00000000000..21f9caeb0cb
--- /dev/null
+++ b/examples/components/theme-configurator/editor/color-picker/src/main.vue
@@ -0,0 +1,190 @@
+<template>
+  <div
+    :class="[
+      'el-color-picker',
+      colorDisabled ? 'is-disabled' : '',
+      colorSize ? `el-color-picker--${ colorSize }` : ''
+    ]"
+    v-clickoutside="hide">
+    <div class="el-color-picker__mask" v-if="colorDisabled"></div>
+    <div class="el-color-picker__trigger" @click="handleTrigger">
+      <span class="el-color-picker__color" :class="{ 'is-alpha': showAlpha }">
+        <span class="el-color-picker__color-inner"
+          :style="{
+            backgroundColor: displayedColor
+          }"></span>
+        <span class="el-color-picker__empty el-icon-close" v-if="!value && !showPanelColor"></span>
+      </span>
+      <span class="el-color-picker__icon el-icon-arrow-down" v-show="value || showPanelColor"></span>
+    </div>
+    <picker-dropdown
+       ref="dropdown"
+       :class="['el-color-picker__panel', popperClass || '']"
+       v-model="showPicker"
+       @pick="confirmValue"
+       @clear="clearValue"
+       :color="color"
+       :show-alpha="showAlpha"
+       :predefine="predefine"
+       :colorList="colorList">
+    </picker-dropdown>
+  </div>
+</template>
+
+<script>
+  import Color from './color';
+  import PickerDropdown from './components/picker-dropdown.vue';
+  import Clickoutside from 'element-ui/src/utils/clickoutside';
+  import Emitter from 'element-ui/src/mixins/emitter';
+
+  export default {
+    name: 'ElColorPicker',
+
+    mixins: [Emitter],
+
+    props: {
+      value: String,
+      showAlpha: Boolean,
+      colorFormat: String,
+      disabled: Boolean,
+      size: String,
+      popperClass: String,
+      predefine: Array,
+      colorList: Array
+    },
+
+    inject: {
+      elForm: {
+        default: ''
+      },
+      elFormItem: {
+        default: ''
+      }
+    },
+
+    directives: { Clickoutside },
+
+    computed: {
+      displayedColor() {
+        if (!this.value && !this.showPanelColor) {
+          return 'transparent';
+        }
+
+        return this.displayedRgb(this.color, this.showAlpha);
+      },
+
+      _elFormItemSize() {
+        return (this.elFormItem || {}).elFormItemSize;
+      },
+
+      colorSize() {
+        return this.size || this._elFormItemSize || (this.$ELEMENT || {}).size;
+      },
+
+      colorDisabled() {
+        return this.disabled || (this.elForm || {}).disabled;
+      }
+    },
+
+    watch: {
+      value(val) {
+        if (!val) {
+          this.showPanelColor = false;
+        } else if (val && val !== this.color.value) {
+          this.color.fromString(val);
+        }
+      },
+      color: {
+        deep: true,
+        handler() {
+          this.showPanelColor = true;
+        }
+      },
+      displayedColor(val) {
+        if (!this.showPicker) return;
+        const currentValueColor = new Color({
+          enableAlpha: this.showAlpha,
+          format: this.colorFormat
+        });
+        currentValueColor.fromString(this.value);
+
+        const currentValueColorRgb = this.displayedRgb(currentValueColor, this.showAlpha);
+        if (val !== currentValueColorRgb) {
+          this.$emit('active-change', val);
+        }
+      }
+    },
+
+    methods: {
+      handleTrigger() {
+        if (this.colorDisabled) return;
+        this.showPicker = !this.showPicker;
+      },
+      confirmValue(selection) {
+        const value = selection || this.color.value;
+        this.$emit('input', value);
+        this.$emit('change', value);
+        this.dispatch('ElFormItem', 'el.form.change', value);
+        this.showPicker = false;
+      },
+      clearValue() {
+        this.$emit('input', null);
+        this.$emit('change', null);
+        if (this.value !== null) {
+          this.dispatch('ElFormItem', 'el.form.change', null);
+        }
+        this.showPanelColor = false;
+        this.showPicker = false;
+        this.resetColor();
+      },
+      hide() {
+        this.showPicker = false;
+        this.resetColor();
+      },
+      resetColor() {
+        this.$nextTick(_ => {
+          if (this.value) {
+            this.color.fromString(this.value);
+          } else {
+            this.showPanelColor = false;
+          }
+        });
+      },
+      displayedRgb(color, showAlpha) {
+        if (!(color instanceof Color)) {
+          throw Error('color should be instance of Color Class');
+        }
+
+        const { r, g, b } = color.toRgb();
+        return showAlpha
+          ? `rgba(${ r }, ${ g }, ${ b }, ${ color.get('alpha') / 100 })`
+          : `rgb(${ r }, ${ g }, ${ b })`;
+      }
+    },
+
+    mounted() {
+      const value = this.value;
+      if (value) {
+        this.color.fromString(value);
+      }
+      this.popperElm = this.$refs.dropdown.$el;
+    },
+
+    data() {
+      const color = new Color({
+        enableAlpha: this.showAlpha,
+        format: this.colorFormat
+      });
+
+      return {
+        color,
+        showPicker: false,
+        showPanelColor: false
+      };
+    },
+
+    components: {
+      PickerDropdown
+    }
+  };
+</script>
diff --git a/examples/components/theme-configurator/editor/color.vue b/examples/components/theme-configurator/editor/color.vue
new file mode 100644
index 00000000000..90705d6f2d4
--- /dev/null
+++ b/examples/components/theme-configurator/editor/color.vue
@@ -0,0 +1,93 @@
+<template>
+  <section class="config" :key="displayName">
+    <div class="config-label">
+      <el-tooltip :content="displayName" placement="top">
+        <span>{{displayKeyName}}</span>
+      </el-tooltip>
+    </div>
+    <div class="config-content">
+      <div class="content-80">
+        <el-input
+          size="medium"
+          :value=displayValue
+          readonly
+          slot="reference"
+          @click.native="onInputClick"
+        ></el-input>
+      </div>
+      <div class="content-20">
+        <color-picker 
+          size="medium"
+          ref="colorPicker"
+          class="colorPicker"
+          v-model="pickerColor" 
+          @change=onPickerChange
+          :colorList="golbalColorList"
+        ></color-picker>
+      </div>
+    </div>
+  </section>
+</template>
+
+<style>
+input {
+  cursor: pointer;
+}
+.colorPicker {
+  margin-left: 10px;
+  vertical-align: bottom;
+}
+</style>
+
+<script>
+import Mixin from './mixin';
+import { getStyleDisplayValue, getStyleDisplayName } from '../utils/utils.js';
+import ColorPicker from './color-picker';
+
+export default {
+  components: {
+    ColorPicker
+  },
+  data() {
+    return {
+      pickerColor: ''
+    };
+  },
+  mixins: [Mixin],
+  watch: {
+    displayValue: {
+      immediate: true,
+      handler(value) {
+        if (value.startsWith('#')) {
+          this.pickerColor = value;
+        }
+      }
+    }
+  },
+  computed: {
+    golbalColor() {
+      return this.golbalValue.color;
+    },
+    displayValue() {
+      return getStyleDisplayValue(this.mergedValue, this.golbalColor);
+    },
+    golbalColorList() {
+      return this.isGlobal ? [] : Object.keys(this.golbalColor).map((c) => (
+        {
+          label: getStyleDisplayName(this.golbalColor[c]),
+          value: this.golbalColor[c].value,
+          variable: c
+        }
+      ));
+    }
+  },
+  methods: {
+    onInputClick() {
+      this.$refs.colorPicker && this.$refs.colorPicker.handleTrigger();
+    },
+    onPickerChange(e) {
+      this.onChange(e.variable || e);
+    }
+  }
+};
+</script>
\ No newline at end of file
diff --git a/examples/components/theme-configurator/editor/fontLineHeight.vue b/examples/components/theme-configurator/editor/fontLineHeight.vue
new file mode 100644
index 00000000000..ef7455f5ea7
--- /dev/null
+++ b/examples/components/theme-configurator/editor/fontLineHeight.vue
@@ -0,0 +1,104 @@
+<template>
+  <section class="config" :key="displayName">
+    <div class="config-label">
+      <el-tooltip :content="displayName" placement="top">
+        <span>{{displayKeyName}}</span>
+      </el-tooltip>
+    </div>
+    <div class="config-content">
+      <el-select 
+        v-model="value" 
+        class="select"
+        size="medium"
+        @change="onSelectChange"
+      >
+        <el-option
+          v-for="item in options"
+          :key="item.value"
+          :label="item.label"
+          :value="item.value">
+        </el-option>
+      </el-select>
+    </div>
+  </section>
+</template>
+
+<style>
+.select {
+  width: 100%;
+}
+</style>
+
+<script>
+const defaultFontLineHeight = [
+  '1',
+  '1.3',
+  '1.5',
+  '1.7',
+  '12px',
+  '16px',
+  '20px',
+  '24px',
+  '28px'
+];
+import Mixin from './mixin';
+import { getStyleDisplayName } from '../utils/utils.js';
+
+export default {
+  props: {
+    componentName: {
+      type: String
+    },
+    golbalValue: {
+      type: Object
+    }
+  },
+  data() {
+    return {
+      options: [],
+      value: ''
+    };
+  },
+  mixins: [Mixin],
+  computed: {
+    isGlobalInputValue() {
+      return this.config.value.startsWith('$');
+    }
+  },
+  methods: {
+    onSelectChange(e) {
+      this.onChange(e);
+    },
+    initSelectOption() {
+      this.options = [];
+      defaultFontLineHeight.forEach((size) => {
+        this.options.push({
+          value: size,
+          label: size
+        });
+      });
+      const golbalTypography = this.golbalValue.typography;
+      if (this.isGlobalInputValue && golbalTypography) {
+        Object.keys(golbalTypography).forEach((font) => {
+          if (font.includes('font-line-height')) {
+            const size = golbalTypography[font];
+            this.options.push({
+              value: size.key,
+              label: getStyleDisplayName(size)
+            });
+          }
+        });
+      }
+    }
+  },
+  watch: {
+    'mergedValue': {
+      immediate: true,
+      handler(value) {
+        this.initSelectOption();
+        this.value = this.mergedValue;
+      }
+    }
+  }
+};
+</script>
\ No newline at end of file
diff --git a/examples/components/theme-configurator/editor/fontSize.vue b/examples/components/theme-configurator/editor/fontSize.vue
new file mode 100644
index 00000000000..f78fd06cbee
--- /dev/null
+++ b/examples/components/theme-configurator/editor/fontSize.vue
@@ -0,0 +1,105 @@
+<template>
+  <section class="config" :key="displayName">
+    <div class="config-label">
+      <el-tooltip :content="displayName" placement="top">
+        <span>{{displayKeyName}}</span>
+      </el-tooltip>
+    </div>
+    <div class="config-content">
+      <el-select 
+        v-model="value" 
+        class="select"
+        size="medium"
+        @change="onSelectChange"
+      >
+        <el-option
+          v-for="item in options"
+          :key="item.value"
+          :label="item.label"
+          :value="item.value">
+        </el-option>
+      </el-select>
+    </div>
+  </section>
+</template>
+
+<style>
+.select {
+  width: 100%;
+}
+</style>
+
+<script>
+const defaultFontSize = [
+  '12px',
+  '13px',
+  '14px',
+  '16px',
+  '18px',
+  '20px',
+  '22px',
+  '28px',
+  '36px',
+  '48px'
+];
+import Mixin from './mixin';
+import { getStyleDisplayName } from '../utils/utils.js';
+
+export default {
+  props: {
+    componentName: {
+      type: String
+    },
+    golbalValue: {
+      type: Object
+    }
+  },
+  data() {
+    return {
+      options: [],
+      value: ''
+    };
+  },
+  mixins: [Mixin],
+  computed: {
+    isGlobalInputValue() {
+      return this.config.value.startsWith('$');
+    }
+  },
+  methods: {
+    onSelectChange(e) {
+      this.onChange(e);
+    },
+    initSelectOption() {
+      this.options = [];
+      defaultFontSize.forEach((size) => {
+        this.options.push({
+          value: size,
+          label: size
+        });
+      });
+      const golbalTypography = this.golbalValue.typography;
+      if (this.isGlobalInputValue && golbalTypography) {
+        Object.keys(golbalTypography).forEach((font) => {
+          if (font.includes('font-size')) {
+            const size = golbalTypography[font];
+            this.options.push({
+              value: size.key,
+              label: getStyleDisplayName(size)
+            });
+          }
+        });
+      }
+    }
+  },
+  watch: {
+    'mergedValue': {
+      immediate: true,
+      handler(value) {
+        this.initSelectOption();
+        this.value = this.mergedValue;
+      }
+    }
+  }
+};
+</script>
\ No newline at end of file
diff --git a/examples/components/theme-configurator/editor/fontWeight.vue b/examples/components/theme-configurator/editor/fontWeight.vue
new file mode 100644
index 00000000000..9a30581fabc
--- /dev/null
+++ b/examples/components/theme-configurator/editor/fontWeight.vue
@@ -0,0 +1,109 @@
+<template>
+  <section class="config" :key="displayName">
+    <div class="config-label">
+      <el-tooltip :content="displayName" placement="top">
+        <span>{{displayKeyName}}</span>
+      </el-tooltip>
+    </div>
+    <div class="config-content">
+      <el-select 
+        v-model="value" 
+        class="select"
+        size="medium"
+        @change="onSelectChange"
+      >
+        <el-option
+          v-for="item in options"
+          :key="item.value"
+          :label="item.label"
+          :value="item.value">
+        </el-option>
+      </el-select>
+    </div>
+  </section>
+</template>
+
+<style>
+.select {
+  width: 100%;
+}
+</style>
+
+<script>
+const defaultFontWeight = [
+  'normal',
+  'bold',
+  'bolder',
+  'lighter',
+  '100',
+  '200',
+  '300',
+  '400',
+  '500',
+  '600',
+  '700',
+  '800',
+  '900',
+  'inherit'
+];
+import Mixin from './mixin';
+import { getStyleDisplayName } from '../utils/utils.js';
+
+export default {
+  props: {
+    componentName: {
+      type: String
+    },
+    golbalValue: {
+      type: Object
+    }
+  },
+  data() {
+    return {
+      options: [],
+      value: ''
+    };
+  },
+  mixins: [Mixin],
+  computed: {
+    isGlobalInputValue() {
+      return this.config.value.startsWith('$');
+    }
+  },
+  methods: {
+    onSelectChange(e) {
+      this.onChange(e);
+    },
+    initSelectOption() {
+      this.options = [];
+      defaultFontWeight.forEach((weight) => {
+        this.options.push({
+          value: weight,
+          label: weight
+        });
+      });
+      const golbalTypography = this.golbalValue.typography;
+      if (this.isGlobalInputValue && golbalTypography) {
+        Object.keys(golbalTypography).forEach((font) => {
+          if (font.includes('font-weight')) {
+            const weight = golbalTypography[font];
+            this.options.push({
+              value: weight.key,
+              label: getStyleDisplayName(weight)
+            });
+          }
+        });
+      }
+    }
+  },
+  watch: {
+    'mergedValue': {
+      immediate: true,
+      handler(value) {
+        this.initSelectOption();
+        this.value = this.mergedValue;
+      }
+    }
+  }
+};
+</script>
\ No newline at end of file
diff --git a/examples/components/theme-configurator/editor/input.vue b/examples/components/theme-configurator/editor/input.vue
new file mode 100644
index 00000000000..548a1ee27e3
--- /dev/null
+++ b/examples/components/theme-configurator/editor/input.vue
@@ -0,0 +1,45 @@
+<template>
+  <el-input 
+    @keyup.enter.native="onUpdate"
+    v-model="value"
+    @blur="onUpdate"
+    v-bind="$attrs"
+  >
+    <template slot="suffix">
+      <slot name="suffix"></slot>
+    </template>
+  </el-input>
+</template>
+
+<script>
+
+export default {
+  props: ['val', 'onChange'],
+  data() {
+    return {
+      value: '',
+      oldValue: ''
+    };
+  },
+  methods: {
+    onUpdate(e) {
+      const { value } = e.target;
+      if (value !== this.oldValue) {
+        this.oldValue = value;
+        this.$emit('change', value);
+      }
+    }
+  },
+  watch: {
+    val: {
+      immediate: true,
+      handler(value) {
+        this.value = value;
+        if (!this.oldValue) {
+          this.oldValue = value;
+        }
+      }
+    }
+  }
+};
+</script>
\ No newline at end of file
diff --git a/examples/components/theme-configurator/editor/mixin.vue b/examples/components/theme-configurator/editor/mixin.vue
new file mode 100644
index 00000000000..f898eef5532
--- /dev/null
+++ b/examples/components/theme-configurator/editor/mixin.vue
@@ -0,0 +1,81 @@
+<style>
+    .config {
+      padding: 5px 0;
+    }
+    .config-label {
+      color: #606266;;
+      font-size: 14px;
+      padding-bottom: 8px;
+      position: relative;
+    }
+    .config-content {
+
+    }
+    .content-80 {
+      box-sizing: border-box;
+      display: inline-block;
+      width: 80%;
+    }
+    .content-20 {
+      box-sizing: border-box;
+      display: inline-block;
+      width: 20%;
+      vertical-align: bottom;
+    }
+    .content-10 {
+      box-sizing: border-box;
+      display: inline-block;
+      width: 10%;
+      vertical-align: bottom;
+    }
+    .content-15 {
+      box-sizing: border-box;
+      display: inline-block;
+      width: 15%;
+      vertical-align: bottom;
+    }
+</style>
+<script>
+import { getStyleDisplayName } from '../utils/utils.js';
+export default {
+  props: {
+    config: {
+      type: Object
+    },
+    userConfig: {
+      type: Object
+    },
+    golbalValue: {
+      type: Object
+    },
+    componentName: {
+      type: String
+    }
+  },
+  computed: {
+    mergedValue() {
+      return this.userConfig[this.config.key] || this.config.value;
+    },
+    displayName() {
+      return getStyleDisplayName(this.config, this.componentName);
+    },
+    displayKeyName() {
+      if (this.config.name) {
+        return this.config.key.replace('$--', '');
+      }
+      return this.config.key.replace(`$--${this.componentName}-`, '');
+    },
+    isGlobal() {
+      return !this.config.value.startsWith('$');
+    }
+  },
+  methods: {
+    onChange(value) {
+      this.$emit('onChange', {
+        key: this.config.key,
+        value
+      });
+    }
+  }
+};
+</script>
\ No newline at end of file
diff --git a/examples/components/theme-configurator/editor/simpleText.vue b/examples/components/theme-configurator/editor/simpleText.vue
new file mode 100644
index 00000000000..f0628c480e3
--- /dev/null
+++ b/examples/components/theme-configurator/editor/simpleText.vue
@@ -0,0 +1,41 @@
+<template>
+  <section class="config" :key="displayName">
+    <div class="config-label">
+      <el-tooltip :content="displayName" placement="top">
+        <span>{{displayKeyName}}</span>
+      </el-tooltip>
+    </div>
+    <div class="config-content">
+      <theme-input 
+        :val="value"
+        size="medium"
+        @change="onChange"
+      ></theme-input>
+    </div>
+  </section>
+</template>
+
+<script>
+import Input from './input';
+import Mixin from './mixin';
+
+export default {
+  components: {
+    themeInput: Input
+  },
+  data() {
+    return {
+      value: ''
+    };
+  },
+  mixins: [Mixin],
+  watch: {
+    'mergedValue': {
+      immediate: true,
+      handler(value) {
+        this.value = this.mergedValue;
+      }
+    }
+  }
+};
+</script>
\ No newline at end of file
diff --git a/examples/components/theme-configurator/index.vue b/examples/components/theme-configurator/index.vue
new file mode 100644
index 00000000000..6e7483bdeef
--- /dev/null
+++ b/examples/components/theme-configurator/index.vue
@@ -0,0 +1,195 @@
+<template>
+  <div class="main-configurator" ref='configurator'>
+    <action-panel
+      :selectOptions="selectOptions"
+      :userConfigHistory="userConfigHistory"
+      :userConfigRedoHistory="userConfigRedoHistory"
+      :onUndo="undo"
+      :onRedo="redo"
+      :isOfficial="isOfficial"
+      @select="onSelectChange"
+    ></action-panel>
+    <main-panel
+      v-if="defaultConfig"
+      :currentConfig="currentConfig"
+      :defaultConfig="defaultConfig"
+      :userConfig="userConfig"
+      :globalValue="globalValue"
+      @onChange="userConfigChange"
+    ></main-panel>
+  </div>
+</template>
+
+<style lang="scss">
+.main-configurator {
+  height: 100%;
+  display: flex;
+  flex-direction: column;
+}
+</style>
+
+<script>
+import bus from '../../bus.js';
+import { getVars } from '../theme/loader/api.js';
+import mainPanel from './main';
+import actionPanel from './action';
+import {
+  filterConfigType,
+  filterGlobalValue,
+  getActionDisplayName
+} from './utils/utils.js';
+import Shortcut from './shortcut';
+import {
+  ACTION_APPLY_THEME,
+  ACTION_DOWNLOAD_THEME,
+  ACTION_COMPONECT_SELECT
+} from '../theme/constant.js';
+
+export default {
+  props: {
+    themeConfig: Object,
+    previewConfig: Object,
+    isOfficial: Boolean,
+    onUserConfigUpdate: Function
+  },
+  components: {
+    mainPanel,
+    actionPanel
+  },
+  data() {
+    return {
+      init: false,
+      defaultConfig: null,
+      currentConfig: null,
+      userConfig: {
+        global: {},
+        local: {}
+      },
+      userConfigHistory: [],
+      userConfigRedoHistory: [],
+      hasLocalConfig: false,
+      selectOptions: [],
+      selectedComponent: 'color'
+    };
+  },
+  mixins: [Shortcut],
+  computed: {
+    globalValue() {
+      return filterGlobalValue(this.defaultConfig, this.userConfig);
+    }
+  },
+  mounted() {
+    ga('send', 'event', 'ThemeConfigurator', 'Init');
+    this.showConfigurator();
+    this.enableShortcut();
+  },
+  beforeDestroy() {
+    this.disableShortcut();
+  },
+  methods: {
+    getActionDisplayName(key) {
+      return getActionDisplayName(key);
+    },
+    showConfigurator() {
+      if (this.init) return;
+      this.$nextTick(() => {
+        const loading = this.$loading({
+          target: this.$refs.configurator
+        });
+        let defaultConfig;
+        getVars()
+          .then(res => {
+            defaultConfig = res;
+          })
+          .catch(err => {
+            this.onError && this.onError(err);
+          })
+          .then(() => {
+            setTimeout(() => {
+              if (defaultConfig) {
+                this.defaultConfig = defaultConfig;
+                this.setSelectOption();
+                this.filterCurrentConfig();
+                this.init = true;
+              }
+              loading.close();
+            }, 300); // action after transition
+          });
+      });
+    },
+    setSelectOption() {
+      this.selectOptions = this.defaultConfig.map((config) => ({
+        label: config.name.charAt(0).toUpperCase() + config.name.slice(1),
+        value: config.name
+      })).sort((a, b) => {
+        const A = a.label;
+        const B = b.label;
+        if (A < B) return -1;
+        if (A > B) return 1;
+        return 0;
+      });
+    },
+    filterCurrentConfig() {
+      this.currentConfig = this.defaultConfig.find(config => {
+        return (
+          config.name === this.selectedComponent
+        );
+      });
+    },
+    userConfigChange(e) {
+      this.userConfigHistory.push(JSON.stringify(this.userConfig));
+      this.userConfigRedoHistory = [];
+      this.$set(
+        this.userConfig[filterConfigType(this.currentConfig.name)],
+        e.key,
+        e.value
+      );
+      this.onAction();
+    },
+    onReset() {
+      this.userConfigRedoHistory = [];
+      this.userConfigHistory = [];
+      this.userConfig = {
+        global: {},
+        local: {}
+      };
+      this.onAction();
+    },
+    onDownload() {
+      bus.$emit(ACTION_DOWNLOAD_THEME, this.userConfig, this.previewConfig.name);
+    },
+    onAction() {
+      this.onUserConfigUpdate(this.userConfig);
+      bus.$emit(ACTION_APPLY_THEME, this.userConfig);
+    },
+    undo() {
+      if (this.userConfigHistory.length > 0) {
+        this.userConfigRedoHistory.push(JSON.stringify(this.userConfig));
+        this.userConfig = JSON.parse(this.userConfigHistory.pop());
+        this.onAction();
+      }
+    },
+    redo() {
+      if (this.userConfigRedoHistory.length > 0) {
+        this.userConfigHistory.push(JSON.stringify(this.userConfig));
+        this.userConfig = JSON.parse(this.userConfigRedoHistory.shift());
+        this.onAction();
+      }
+    },
+    onSelectChange(val) {
+      bus.$emit(ACTION_COMPONECT_SELECT, val);
+      this.selectedComponent = val;
+      this.filterCurrentConfig();
+    }
+  },
+  watch: {
+    themeConfig: {
+      handler(val, oldVal) {
+        if (!oldVal.globnal) {
+          this.userConfig = val;
+        }
+      }
+    }
+  }
+};
+</script>
\ No newline at end of file
diff --git a/examples/components/theme-configurator/main.vue b/examples/components/theme-configurator/main.vue
new file mode 100644
index 00000000000..5acbc9c99d2
--- /dev/null
+++ b/examples/components/theme-configurator/main.vue
@@ -0,0 +1,130 @@
+<template>
+  <div class="editor-main" ref="mainPanel">
+    <!-- <span>{{configName}}</span> -->
+    <div v-for="(config, key) in configByOrder" :key="key">
+      <span 
+        v-if="showCategory(config.category, key + 1)"
+        class="category-name"
+      >
+        {{config.category}}
+      </span>
+      <component 
+        :is="editorComponent(config.type)"
+        :componentName=configName
+        :config=config
+        :userConfig=userConfigByType
+        :golbalValue=globalValue
+        @onChange=onChange
+      >
+      </component>
+    </div>
+  </div>
+</template>
+
+<style>
+.editor-main {
+  padding: 0 18px 15px;
+  overflow-y: auto;
+}
+.category-name {
+  color: #C0C4CC;
+  font-size: 18px;
+  display: block;
+  margin: 13px 0 3px 0;
+}
+</style>
+
+<script>
+import ColorEditor from './editor/color';
+import fontWeightEditor from './editor/fontWeight';
+import fontSizeEditor from './editor/fontSize';
+import fontLineHeightEditor from './editor/fontLineHeight';
+import borderRadiusEditor from './editor/borderRadius';
+import boxShadowEditor from './editor/boxShadow';
+import simpleTextEditor from './editor/simpleText';
+import { filterConfigType } from './utils/utils.js';
+
+export default {
+  components: {
+    ColorEditor,
+    fontSizeEditor,
+    fontLineHeightEditor,
+    simpleTextEditor,
+    borderRadiusEditor,
+    boxShadowEditor,
+    fontWeightEditor
+  },
+  props: {
+    defaultConfig: {
+      type: Array
+    },
+    currentConfig: {
+      type: Object
+    },
+    userConfig: {
+      type: Object
+    },
+    globalValue: {
+      type: Object
+    }
+  },
+  computed: {
+    configName() {
+      return this.currentConfig.name;
+    },
+    userConfigByType() {
+      return this.userConfig[filterConfigType(this.configName)];
+    },
+    configByOrder() {
+      return this.currentConfig.config.sort((a, b) => (a.order - b.order));
+    }
+  },
+  methods: {
+    editorComponent(type) {
+      switch (type) {
+        case 'color':
+          return ColorEditor;
+        case 'fontWeight':
+          return fontWeightEditor;
+        case 'fontSize':
+          return fontSizeEditor;
+        case 'fontLineHeight':
+          return fontLineHeightEditor;
+        case 'borderRadius':
+          return borderRadiusEditor;
+        case 'boxShadow':
+          return boxShadowEditor;
+        default:
+          return simpleTextEditor;
+      }
+    },
+    onChange(e) {
+      this.$emit('onChange', e);
+    },
+    showCategory(name, key) {
+      if (!name) {
+        return false;
+      }
+      if (!this.categoryDisplay[name] || this.categoryDisplay[name] === key) {
+        this.categoryDisplay[name] = key;
+        return true;
+      }
+      return false;
+    }
+  },
+  data() {
+    return {
+      categoryDisplay: {}
+    };
+  },
+  watch: {
+    currentConfig: {
+      handler() {
+        this.$nextTick(() => {
+          this.$refs.mainPanel.scrollTo(0, 0);
+        });
+      }
+    }
+  }
+};
+</script>
\ No newline at end of file
diff --git a/examples/components/theme-configurator/shortcut.vue b/examples/components/theme-configurator/shortcut.vue
new file mode 100644
index 00000000000..7a77098d8af
--- /dev/null
+++ b/examples/components/theme-configurator/shortcut.vue
@@ -0,0 +1,27 @@
+
+<script>
+export default {
+  data() {
+    return {
+      downloading: false
+    };
+  },
+  methods: {
+    shortcut(e) {
+      if (e.keyCode === 90 && (e.ctrlKey || e.metaKey)) {
+        if (e.shiftKey) {
+          this.redo();
+        } else {
+          this.undo();
+        }
+      }
+    },
+    enableShortcut() {
+      document.addEventListener('keydown', this.shortcut);
+    },
+    disableShortcut() {
+      document.removeEventListener('keydown', this.shortcut);
+    }
+  }
+};
+</script>
\ No newline at end of file
diff --git a/examples/components/theme-configurator/utils/boxShadow.js b/examples/components/theme-configurator/utils/boxShadow.js
new file mode 100644
index 00000000000..382aa4b60d2
--- /dev/null
+++ b/examples/components/theme-configurator/utils/boxShadow.js
@@ -0,0 +1,59 @@
+const VALUES_REG = /,(?![^\(]*\))/;
+const PARTS_REG = /\s(?![^(]*\))/;
+const LENGTH_REG = /^[0-9]+[a-zA-Z%]+?$/;
+
+const parseValue = str => {
+  const parts = str.split(PARTS_REG);
+  const inset = parts.includes('inset');
+  const last = parts.slice(-1)[0];
+  const color = !isLength(last) ? last : undefined;
+
+  const nums = parts
+    .filter(n => n !== 'inset')
+    .filter(n => n !== color)
+    .map(toNum);
+  const [ offsetX, offsetY, blurRadius, spreadRadius ] = nums;
+
+  return {
+    inset,
+    offsetX,
+    offsetY,
+    blurRadius,
+    spreadRadius,
+    color
+  };
+};
+
+const stringifyValue = obj => {
+  const {
+    inset,
+    offsetX = 0,
+    offsetY = 0,
+    blurRadius = 0,
+    spreadRadius,
+    color
+  } = obj || {};
+
+  return [
+    (inset ? 'inset' : null),
+    offsetX,
+    offsetY,
+    blurRadius,
+    spreadRadius,
+    color
+  ].filter(v => v !== null && v !== undefined)
+    .map(toPx)
+    .map(s => ('' + s).trim())
+    .join(' ');
+};
+
+const isLength = v => v === '0' || LENGTH_REG.test(v);
+const toNum = v => {
+  if (!/px$/.test(v) && v !== '0') return v;
+  const n = parseFloat(v);
+  return !isNaN(n) ? n : v;
+};
+const toPx = n => typeof n === 'number' && n !== 0 ? (n + 'px') : n;
+
+export const parse = str => str.split(VALUES_REG).map(s => s.trim()).map(parseValue);
+export const stringify = arr => arr.map(stringifyValue).join(', ');
diff --git a/examples/components/theme-configurator/utils/utils.js b/examples/components/theme-configurator/utils/utils.js
new file mode 100644
index 00000000000..1068a8d5293
--- /dev/null
+++ b/examples/components/theme-configurator/utils/utils.js
@@ -0,0 +1,68 @@
+import deepmerge from 'deepmerge';
+import constant from '../../../i18n/theme-editor.json';
+
+export const filterConfigType = (name) => {
+  switch (name) {
+    case 'color':
+    case 'typography':
+    case 'border':
+      return 'global';
+    default:
+      return 'local';
+  }
+};
+
+export const filterGlobalValue = (defaultConfig, userConfig) => {
+  const valueObject = {};
+  const globalArr = ['color', 'typography', 'border'];
+  globalArr.forEach((global) => {
+    const configObj = {};
+    defaultConfig
+      .find(config => (config.name === global))
+      .config.forEach(c => (configObj[c.key] = deepmerge({}, c)));
+    valueObject[global] = configObj;
+    Object.keys(configObj).forEach((c) => {
+      if (userConfig.global[c]) {
+        configObj[c].value = userConfig.global[c];
+      }
+    });
+  });
+  return valueObject;
+};
+
+export const getStyleDisplayValue = (displayValue, global) => {
+  if (displayValue.startsWith('$')) {
+    return global[displayValue].value;
+  }
+  return displayValue;
+};
+
+const getLang = () => {
+  return location.hash.replace('#', '').split('/')[1] || 'zh-CN';
+};
+
+const getNameFromI18N = (name) => {
+  const lang = getLang();
+  return constant.filter(config => config.lang === lang)[0][name];
+};
+
+export const getVariableDisplayName = (key) => {
+  return getNameFromI18N('variable-name')[key] || key;
+};
+
+export const getStyleDisplayName = (config, componentName) => {
+  const displayNameMap = getNameFromI18N('display-name');
+  if (config.name) {
+    return getVariableDisplayName(config.key.replace('$--', ''));
+  }
+  let displayName = config.key.replace(`$--${componentName}-`, '');
+  Object.keys(displayNameMap).forEach((name) => {
+    displayName = displayName.replace(name, displayNameMap[name]);
+  });
+  displayName = displayName.replace(/-/g, ' ');
+  return displayName.trim();
+};
+
+export const getActionDisplayName = (key) => {
+  return getNameFromI18N('action')[key] || key;
+};
diff --git a/examples/components/theme-picker.vue b/examples/components/theme-picker.vue
index c6c4b500586..3fd147c2583 100644
--- a/examples/components/theme-picker.vue
+++ b/examples/components/theme-picker.vue
@@ -5,11 +5,11 @@
     v-model="theme"></el-color-picker>
 </template>
 
-<style>
+<style lang="scss">
   .theme-picker {
     height: 80px;
     display: inline-block;
-    @utils-vertical-center;
+    // @utils-vertical-center;
   }
 
   .theme-picker .el-color-picker__trigger {
@@ -22,9 +22,10 @@
 </style>
 
 <script>
-  import { version } from 'main/index.js';
+  import Element from 'main/index.js';
+  const { version } = Element;
 
-  const ORIGINAL_THEME = '#409EFF';
+  const ORIGINAL_THEME = '#2460e0';
   export default {
     data() {
       return {
diff --git a/examples/components/theme/basic-tokens-preview.vue b/examples/components/theme/basic-tokens-preview.vue
new file mode 100644
index 00000000000..5a0462428c0
--- /dev/null
+++ b/examples/components/theme/basic-tokens-preview.vue
@@ -0,0 +1,280 @@
+<style lang="scss">
+.component-preview {
+  .heading>div{
+    margin-bottom: 15px;
+  }
+  .title {
+    font-size: 18px;
+    font-weight:400;
+    padding: 0 20px
+  }
+  .paragraph {
+    padding: 0 20px
+  }
+  .demo-color-box {
+    margin: 0;
+  }
+  .color {
+    margin-right: -12%;
+  }
+}
+</style>
+<template>
+  <div class="component-preview">
+    <h4>Color</h4>
+    <div class="color">
+      <el-row :gutter="12">
+        <el-col :span="4" v-for="(color, key) in colorLine" :key="key">
+          <div class="demo-color-box" :style="{ background: dataProxy(color) }">
+            {{color}}
+            <div class="value">{{dataProxy(color)}}</div>
+            <div class="bg-color-sub">
+              <div
+                class="bg-success-sub-item"
+                v-for="(item, key) in Array(2)"
+                :key="key"
+                :style="{ background: tintColor(dataProxy(color), (key + 8) / 10) }"
+              ></div>
+            </div>
+          </div>
+        </el-col>
+      </el-row>
+      <el-row :gutter="12">
+        <el-col :span="4">
+          <div class="demo-color-box demo-color-box-other" :style="{ background: color_text_primary }">
+            Primary Text
+            <div class="value">{{color_text_primary}}</div>
+          </div>
+        </el-col>
+        <el-col :span="4">
+          <div class="demo-color-box demo-color-box-other" :style="{ background: color_text_regular }">
+            Regular Text
+            <div class="value">{{color_text_regular}}</div>
+          </div>
+        </el-col>
+        <el-col :span="4">
+          <div class="demo-color-box demo-color-box-other" :style="{ background: color_text_secondary }">
+            Secondary Text
+            <div class="value">{{color_text_secondary}}</div>
+          </div>
+        </el-col>
+        <el-col :span="4">
+          <div class="demo-color-box demo-color-box-other" :style="{ background: color_text_placeholder }">
+            Placeholder
+            <div class="value">{{color_text_placeholder}}</div>
+          </div>
+        </el-col>
+      </el-row>
+
+      <el-row :gutter="12">
+        <el-col :span="4">
+          <div
+            class="demo-color-box demo-color-box-other demo-color-box-lite"
+            :style="{ background: border_color_base }"
+          >
+            Border Base
+            <div class="value">{{border_color_base}}</div>
+          </div>
+        </el-col>
+        <el-col :span="4">
+          <div
+            class="demo-color-box demo-color-box-other demo-color-box-lite"
+            :style="{ background: border_color_light }"
+          >
+            Border Light
+            <div class="value">{{border_color_light}}</div>
+          </div>
+        </el-col>
+        <el-col :span="4">
+          <div
+            class="demo-color-box demo-color-box-other demo-color-box-lite"
+            :style="{ background: border_color_lighter }"
+          >
+            Border Lighter
+            <div class="value">{{border_color_lighter}}</div>
+          </div>
+        </el-col>
+        <el-col :span="4">
+          <div
+            class="demo-color-box demo-color-box-other demo-color-box-lite"
+            :style="{ background: border_color_extra_light }"
+          >
+            Border Extralight
+            <div class="value">{{border_color_extra_light}}</div>
+          </div>
+        </el-col>
+      </el-row>
+
+      <el-row :gutter="12">
+        <el-col :span="4">
+          <div class="demo-color-box demo-color-box-other" :style="{ background: color_black }">
+            Background B
+            <div class="value">{{color_black}}</div>
+          </div>
+        </el-col>
+        <el-col :span="4">
+          <div
+            class="demo-color-box demo-color-box-other"
+            :style="{ background: color_white, color: '#303133', border: '1px solid #eee' }"
+          >
+            Background W
+            <div class="value">{{color_white}}</div>
+          </div>
+        </el-col>
+        <el-col :span="4">
+          <div class="demo-color-box demo-color-box-other bg-transparent">
+            Background
+            <div class="value">Transparent</div>
+          </div>
+        </el-col>
+      </el-row>
+    </div>
+    <h4>Typography</h4>
+    <el-row :gutter="12">
+      <el-col :span="6" class="heading">
+        <div :style="{ fontSize: font_size_extra_large }">Heading1</div>
+        <div :style="{ fontSize: font_size_large }">Heading2</div>
+        <div :style="{ fontSize: font_size_medium }">Heading3</div>
+        <div :style="{ fontSize: font_size_base }">Heading4</div>
+        <div :style="{ fontSize: font_size_small }">Heading5</div>
+        <div :style="{ fontSize: font_size_extra_small }">Heading6</div>
+      </el-col>
+      <el-col :span="9">
+        <div class="title">Example body text</div>
+        <p 
+          class="paragraph"
+          :style="{ 
+            fontSize: font_size_base,
+            fontWeight: font_weight_primary, 
+            lineHeight: font_line_height_primary
+          }" >
+          With MySpace becoming more popular every day, there is the constant need to be different. There are millions of users. If MySpace layouts are chosen well, then you can enhance your profile a great deal.</p>
+      </el-col>
+      <el-col :span="9">
+        <div class="title">Example small text</div>
+        <p 
+          class="paragraph"
+          :style="{ 
+            fontSize: font_size_small,
+            fontWeight: font_weight_secondary, 
+            lineHeight: font_line_height_secondary
+          }" >
+          Computers have become ubiquitous in almost every facet of our lives. At work, desk jockeys spend hours in front of their desktops, while delivery people scan bar codes with handhelds and workers in the field stay in touch with the central office via their notebooks. Computer hardware weaves itself through the fabric of our lives.</p>
+      </el-col>
+    </el-row>
+  </div>
+</template>
+
+<script>
+import bus from '../../bus';
+import { tintColor } from '../../color.js';
+import {
+  ACTION_COMPONECT_SELECT,
+  ACTION_USER_CONFIG_UPDATE
+} from './constant.js';
+
+const original = {
+  'color_primary': '#2460e0',
+  'color_success': '#2FD163',
+  'color_warning': '#F5A623',
+  'color_danger': '#FF4D4F',
+  'color_info': '#A7A8AD',
+  'color_white': '#FFFFFF',
+  'color_black': '#000000',
+  'color_text_primary': '#303133',
+  'color_text_regular': '#606266',
+  'color_text_secondary': '#A7A8AD',
+  'color_text_placeholder': '#C0C4CC',
+  'border_color_base': '#DCDFE6',
+  'border_color_light': '#E4E7ED',
+  'border_color_lighter': '#EBEEF5',
+  'border_color_extra_light': '#F2F6FC',
+  'font_size_extra_large': '20px',
+  'font_size_large': '18px',
+  'font_size_medium': '16px',
+  'font_size_base': '14px',
+  'font_size_small': '13px',
+  'font_size_extra_small': '12px',
+  'font_weight_primary': 500,
+  'font_weight_secondary': 100,
+  'font_line_height_primary': '24px',
+  'font_line_height_secondary': '16px'
+};
+
+export default {
+  created() {
+    bus.$on(ACTION_USER_CONFIG_UPDATE, this.setGlobal);
+    bus.$on(ACTION_COMPONECT_SELECT, (val) => {
+      this.$nextTick(() => {
+        const getSelectElement = Array.from(document.querySelectorAll('h4')).filter((el) => (el.innerText.toLowerCase() === val));
+        if (getSelectElement[0]) {
+          const elementTop = getSelectElement[0].getBoundingClientRect().top;
+          window.scrollTo(0, window.pageYOffset + elementTop - 20); // 20 for padding
+        }
+      });
+    });
+  },
+  mounted() {
+    this.setGlobal();
+  },
+  methods: {
+    tintColor(a, b) {
+      return tintColor(a, b);
+    },
+    dataProxy(value) {
+      return this[`color_${value.toLowerCase()}`];
+    },
+    setGlobal() {
+      if (window.userThemeConfig) {
+        this.global = window.userThemeConfig.global;
+      }
+    }
+  },
+  watch: {
+    global: {
+      immediate: true,
+      handler(value) {
+        Object.keys(original).forEach((v) => {
+          const key = `$--${v.replace(/_/g, '-')}`;
+          if (value[key]) {
+            this[v] = value[key];
+          } else {
+            this[v] = original[v];
+          }
+        });
+      }
+    }
+  },
+  data() {
+    return {
+      global: {},
+      colorLine: ['Primary', 'Success', 'Warning', 'Danger', 'Info'],
+      'color_primary': '',
+      'color_success': '',
+      'color_warning': '',
+      'color_danger': '',
+      'color_info': '',
+      'color_white': '',
+      'color_black': '',
+      'color_text_primary': '',
+      'color_text_regular': '',
+      'color_text_secondary': '',
+      'color_text_placeholder': '',
+      'border_color_base': '',
+      'border_color_light': '',
+      'border_color_lighter': '',
+      'border_color_extra_light': '',
+      'font_size_extra_large': '',
+      'font_size_large': '',
+      'font_size_medium': '',
+      'font_size_base': '',
+      'font_size_small': '',
+      'font_size_extra_small': '',
+      'font_weight_primary': 0,
+      'font_weight_secondary': 0,
+      'font_line_height_primary': '',
+      'font_line_height_secondary': ''
+    };
+  }
+};
+</script>
diff --git a/examples/components/theme/components-preview.vue b/examples/components/theme/components-preview.vue
new file mode 100644
index 00000000000..58aa5b420f6
--- /dev/null
+++ b/examples/components/theme/components-preview.vue
@@ -0,0 +1,539 @@
+<style lang="scss">
+.component-preview {
+  padding-right: 10px;
+  &:last-of-type {
+    padding-bottom: 20px;
+  }
+  h4 {
+    font-size: 20px;
+    margin: 40px 0 20px;
+    color: #A7A8AD
+  }
+  .demo-item {
+    margin-top: 10px;
+    margin-right: 40px;
+  }
+
+  .demo-line {
+    margin: 15px 0;
+  }
+
+  .el-carousel__item:nth-child(2n) {
+    background-color: #99a9bf;
+  }
+
+  .el-carousel__item:nth-child(2n + 1) {
+    background-color: #d3dce6;
+  }
+
+  .el-avatar:not(:last-child) {
+    margin-right: 20px;
+  }
+
+  .avatar-demo {
+    display: flex;
+    align-items: center;
+  }
+}
+</style>
+<template>
+  <div class="component-preview">
+    <h4>Button</h4>
+    <el-row class="demo-line">
+      <el-button>Default</el-button>
+      <el-button type="primary">Primary</el-button>
+      <el-button type="success">Success</el-button>
+      <el-button type="info">Info</el-button>
+      <el-button type="warning">Warning</el-button>
+      <el-button type="danger">Danger</el-button>
+    </el-row>
+    <el-row class="demo-line">
+      <el-button plain>Plain</el-button>
+      <el-button type="primary" plain>Primary</el-button>
+      <el-button type="success" plain>Success</el-button>
+      <el-button type="info" plain>Info</el-button>
+      <el-button type="warning" plain>Warning</el-button>
+      <el-button type="danger" plain>Danger</el-button>
+    </el-row>
+    <el-row class="demo-line">
+      <el-button round>Round</el-button>
+      <el-button type="primary" round>Primary</el-button>
+      <el-button type="success" round>Success</el-button>
+      <el-button type="info" round>Info</el-button>
+      <el-button type="warning" round>Warning</el-button>
+      <el-button type="danger" round>Danger</el-button>
+    </el-row>
+    <el-row class="demo-line">
+      <el-button icon="el-icon-search" circle></el-button>
+      <el-button type="primary" icon="el-icon-edit" circle></el-button>
+      <el-button type="success" icon="el-icon-check" circle></el-button>
+      <el-button type="info" icon="el-icon-message" circle></el-button>
+      <el-button type="warning" icon="el-icon-star-off" circle></el-button>
+      <el-button type="danger" icon="el-icon-delete" circle></el-button>
+    </el-row>
+    <el-row class="demo-line">
+      <el-button>Default</el-button>
+      <el-button size="medium">Medium</el-button>
+      <el-button size="small">Small</el-button>
+      <el-button size="mini">Mini</el-button>
+    </el-row>
+    <h4>Radio</h4>
+    <el-row class="demo-line">
+      <el-radio v-model="radio" label="1">Option A</el-radio>
+      <el-radio v-model="radio" label="2">Option B</el-radio>
+    </el-row>
+    <el-row class="demo-line">
+      <el-radio-group v-model="radio1">
+        <el-radio-button label="New York"></el-radio-button>
+        <el-radio-button label="Washington"></el-radio-button>
+        <el-radio-button label="Los Angeles"></el-radio-button>
+        <el-radio-button label="Chicago"></el-radio-button>
+      </el-radio-group>
+    </el-row>
+    <el-row class="demo-line">
+      <el-radio v-model="radio2" label="1" border>Option A</el-radio>
+      <el-radio v-model="radio2" label="2" border>Option B</el-radio>
+    </el-row>
+    <h4>Checkbox</h4>
+    <el-row class="demo-line">
+      <el-checkbox v-model="checked">Option</el-checkbox>
+    </el-row>
+    <el-row class="demo-line">
+      <el-checkbox-group v-model="checked1">
+        <el-checkbox-button v-for="city in ['Shanghai', 'Beijing', 'Guangzhou', 'Shenzhen']" :label="city" :key="city">{{city}}</el-checkbox-button>
+      </el-checkbox-group>
+    </el-row>
+    <el-row class="demo-line">
+      <el-checkbox v-model="checked2" label="Option1" border></el-checkbox>
+    </el-row>
+    <h4>Input</h4>
+    <el-row style="width: 180px">
+      <el-input placeholder="Please input" v-model="input"></el-input>
+    </el-row>
+    <h4>InputNumber</h4>
+    <el-row>
+      <el-input-number v-model="inputNumber" :min="1" :max="10"></el-input-number>
+    </el-row>
+    <h4>Select</h4>
+    <el-row>
+      <el-select v-model="selectValue" placeholder="Select">
+        <el-option
+          v-for="item in selectOptions"
+          :key="item.value"
+          :label="item.label"
+          :value="item.value"
+        ></el-option>
+      </el-select>
+    </el-row>
+    <h4>Cascader</h4>
+    <el-row>
+      <el-cascader :options="cascadeOptions" v-model="cascaderValue"></el-cascader>
+    </el-row>
+    <h4>Switch</h4>
+    <el-row>
+      <el-switch v-model="switchValue"></el-switch>
+      <el-switch
+        style="margin-left: 40px"
+        v-model="switchValue"
+        active-text="Pay by month"
+        inactive-text="Pay by year">
+      </el-switch>
+    </el-row>
+    <h4>Slider</h4>
+    <el-row style="width: 380px">
+      <el-slider v-model="slider"></el-slider>
+    </el-row>
+    <h4>DatePicker</h4>
+    <el-row>
+      <el-date-picker v-model="datePicker" type="date"></el-date-picker>
+    </el-row>
+    <h4>Rate</h4>
+    <el-row>
+      <el-rate class="demo-line" v-model="rate"></el-rate>
+      <el-rate
+        class="demo-line"
+        v-model="rate"
+        show-score
+        text-color="#ff9900"
+        score-template="{value} points">
+      </el-rate>
+    </el-row>
+    <h4>Transfer</h4>
+    <el-row>
+      <el-transfer v-model="transfer" filterable :data="transferData">
+        <el-button class="transfer-footer" slot="left-footer" size="small">Operation</el-button>
+        <el-button class="transfer-footer" slot="right-footer" size="small">Operation</el-button>
+      </el-transfer>
+    </el-row>
+    <h4>Table</h4>
+    <el-row>
+      <el-table :data="tableData" style="width: 70%">
+        <el-table-column prop="date" label="Date" width="180"></el-table-column>
+        <el-table-column prop="name" label="Name" width="180"></el-table-column>
+        <el-table-column prop="address" label="Address"></el-table-column>
+      </el-table>
+    </el-row>
+    <h4>Tag</h4>
+    <el-row>
+      <el-tag class="demo-item" closable>Tag One</el-tag>
+      <el-tag class="demo-item" closable type="success">Tag Two</el-tag>
+      <el-tag class="demo-item" closable type="info">Tag Three</el-tag>
+      <el-tag class="demo-item" closable type="warning">Tag Four</el-tag>
+      <el-tag class="demo-item" closable type="danger">Tag Five</el-tag>
+    </el-row>
+    <h4>Progress</h4>
+    <el-row style="width: 380px">
+      <el-progress :percentage="20"></el-progress>
+      <el-progress :percentage="60" status="exception"></el-progress>
+      <el-progress :percentage="100" status="success"></el-progress>
+    </el-row>
+    <h4>Tree</h4>
+    <el-row style="width: 380px">
+      <el-tree :data="treeData" :props="defaultTreeProps" ></el-tree>
+    </el-row>
+    <h4>Pagination</h4>
+    <el-row>
+      <el-pagination layout="prev, pager, next" :total="1000"></el-pagination>
+    </el-row>
+    <h4>Badge</h4>
+    <el-row>
+      <el-badge :value="12" class="demo-item">
+        <el-button size="small">comments</el-button>
+      </el-badge>
+      <el-badge :value="3" class="demo-item">
+        <el-button size="small">replies</el-button>
+      </el-badge>
+      <el-badge :value="1" class="demo-item" type="primary">
+        <el-button size="small">comments</el-button>
+      </el-badge>
+      <el-badge :value="2" class="demo-item" type="warning">
+        <el-button size="small">replies</el-button>
+      </el-badge>
+    </el-row>
+    <h4>Alert</h4>
+    <el-row style="width: 380px;">
+      <el-alert class="demo-item" title="success alert" type="success" show-icon></el-alert>
+      <el-alert class="demo-item" title="info alert" type="info" close-text="Gotcha" show-icon></el-alert>
+      <el-alert class="demo-item" title="warning alert" type="warning" show-icon></el-alert>
+      <el-alert
+        class="demo-item"
+        title="error alert"
+        type="error"
+        description="more text description"
+        show-icon>
+      </el-alert>
+    </el-row>
+    <h4>Loading</h4>
+    <el-row>
+      <el-table :data="tableData" style="width: 90%" v-loading="true">
+        <el-table-column prop="date" label="Date" width="180"></el-table-column>
+        <el-table-column prop="name" label="Name" width="180"></el-table-column>
+        <el-table-column prop="address" label="Address"></el-table-column>
+      </el-table>
+    </el-row>
+    <h4>Message</h4>
+    <el-row>
+      <div role="alert" class="demo-item el-message el-message--success el-message-fade-leave-active el-message-fade-leave-to" style="top: 0;left: 0;width: 100px; opacity: 1; position: relative;transform: none;"><i class="el-message__icon el-icon-success"></i><p class="el-message__content">Congrats, this is a success message.</p><!----></div>
+      <div role="alert" class="demo-item el-message el-message--warning el-message-fade-leave-active el-message-fade-leave-to" style="top: 0;left: 0;width: 100px; opacity: 1; position: relative;transform: none;"><i class="el-message__icon el-icon-warning"></i><p class="el-message__content">Warning, this is a warning message.</p><!----></div>
+      <div role="alert" class="demo-item el-message el-message--info el-message-fade-leave-active el-message-fade-leave-to" style="top: 0;left: 0;width: 100px; opacity: 1; position: relative;transform: none;"><i class="el-message__icon el-icon-info"></i><p class="el-message__content">This is a message.</p><!----></div>
+      <div role="alert" class="demo-item el-message el-message--error is-closable el-message-fade-leave-active el-message-fade-leave-to" style="top: 0;left: 0;width: 100px; opacity: 1; position: relative;transform: none;"><i class="el-message__icon el-icon-error"></i><p class="el-message__content">Oops, this is a error message.</p><i class="el-message__closeBtn el-icon-close"></i></div>
+    </el-row>
+    <h4>MessageBox</h4>
+    <el-row>
+      <div class="el-message-box"><div class="el-message-box__header"><div class="el-message-box__title"><!----><span>Warning</span></div><button type="button" aria-label="Close" class="el-message-box__headerbtn"><i class="el-message-box__close el-icon-close"></i></button></div><div class="el-message-box__content"><div class="el-message-box__status el-icon-warning"></div><div class="el-message-box__message"><p>This will permanently delete the file. Continue?</p></div><div class="el-message-box__input" style="display: none;"><div class="el-input"><!----><input type="text" autocomplete="off" placeholder="" class="el-input__inner"><!----><!----><!----></div><div class="el-message-box__errormsg" style="visibility: hidden;"></div></div></div><div class="el-message-box__btns"><button type="button" class="el-button el-button--default el-button--small"><!----><!----><span>
+          Cancel
+        </span></button><button type="button" class="el-button el-button--default el-button--small el-button--primary "><!----><!----><span>
+          OK
+        </span></button></div></div>
+    </el-row>
+    <h4>Notification</h4>
+    <el-row>
+      <div role="alert" class="el-notification right" style="position: relative; left: 0;"><!----><div class="el-notification__group"><span class="el-notification__title">Notification</span><div class="el-notification__content"><div>This is a message </div></div><div class="el-notification__closeBtn el-icon-close"></div></div></div>
+    </el-row>
+    <h4>Menu</h4>
+    <el-row>
+      <el-menu :default-active="menu" class="el-menu-demo" mode="horizontal">
+        <el-menu-item index="1">Processing Center</el-menu-item>
+        <el-submenu index="2">
+          <template slot="title">Workspace</template>
+          <el-menu-item index="2-1">item one</el-menu-item>
+          <el-menu-item index="2-2">item two</el-menu-item>
+          <el-menu-item index="2-3">item three</el-menu-item>
+          <el-submenu index="2-4">
+            <template slot="title">item four</template>
+            <el-menu-item index="2-4-1">item one</el-menu-item>
+            <el-menu-item index="2-4-2">item two</el-menu-item>
+            <el-menu-item index="2-4-3">item three</el-menu-item>
+          </el-submenu>
+        </el-submenu>
+        <el-menu-item index="3" disabled>Info</el-menu-item>
+        <el-menu-item index="4">
+          <a href="https://www.ele.me" target="_blank">Orders</a>
+        </el-menu-item>
+      </el-menu>
+      <el-menu
+        default-active="2"
+        class="demo-line"
+      >
+        <el-submenu index="1">
+          <template slot="title">
+            <i class="el-icon-location"></i>
+            <span>Navigator One</span>
+          </template>
+          <el-menu-item-group title="Group One">
+            <el-menu-item index="1-1">item one</el-menu-item>
+            <el-menu-item index="1-2">item one</el-menu-item>
+          </el-menu-item-group>
+          <el-menu-item-group title="Group Two">
+            <el-menu-item index="1-3">item three</el-menu-item>
+          </el-menu-item-group>
+          <el-submenu index="1-4">
+            <template slot="title">item four</template>
+            <el-menu-item index="1-4-1">item one</el-menu-item>
+          </el-submenu>
+        </el-submenu>
+        <el-menu-item index="2">
+          <i class="el-icon-menu"></i>
+          <span>Navigator Two</span>
+        </el-menu-item>
+        <el-menu-item index="3" disabled>
+          <i class="el-icon-document"></i>
+          <span>Navigator Three</span>
+        </el-menu-item>
+        <el-menu-item index="4">
+          <i class="el-icon-setting"></i>
+          <span>Navigator Four</span>
+        </el-menu-item>
+      </el-menu>
+    </el-row>
+    <h4>Tabs</h4>
+    <el-row>
+      <el-tabs v-model="tab" class="demo-item">
+        <el-tab-pane label="User" name="first">User</el-tab-pane>
+        <el-tab-pane label="Config" name="second">Config</el-tab-pane>
+        <el-tab-pane label="Role" name="third">Role</el-tab-pane>
+        <el-tab-pane label="Task" name="fourth">Task</el-tab-pane>
+      </el-tabs>
+      <el-tabs type="card" class="demo-item">
+        <el-tab-pane label="User">User</el-tab-pane>
+        <el-tab-pane label="Config">Config</el-tab-pane>
+        <el-tab-pane label="Role">Role</el-tab-pane>
+        <el-tab-pane label="Task">Task</el-tab-pane>
+      </el-tabs>
+    </el-row>
+    <h4>Dialog</h4>
+    <el-row>
+      <div role="dialog" aria-modal="true" aria-label="Tips" class="el-dialog" style="margin: 0"><div class="el-dialog__header"><span class="el-dialog__title">Tips</span><button type="button" aria-label="Close" class="el-dialog__headerbtn"><i class="el-dialog__close el-icon el-icon-close"></i></button></div><div class="el-dialog__body"><span>This is a message</span> </div><div class="el-dialog__footer"><span class="dialog-footer"><button type="button" class="el-button el-button--default"><!----><!----><span>Cancel</span></button> <button type="button" class="el-button el-button--primary"><!----><!----><span>Confirm</span></button></span></div></div>
+    </el-row>
+    <h4>Tooltip</h4>
+    <el-row>
+      <div role="tooltip" x-placement="top" class="el-tooltip__popper is-dark" style="position: relative; width: 40px;text-align: center;">Dark<div x-arrow="" class="popper__arrow"></div>
+      </div>
+      <div role="tooltip" x-placement="top" class="el-tooltip__popper is-light" style="margin-top: 10px;position: relative; width: 40px;text-align: center;">Light<div x-arrow="" class="popper__arrow"></div>
+      </div>
+    </el-row>
+    <h4>Popover</h4>
+    <el-row>
+      <div role="tooltip" x-placement="top" id="el-popover-2936" aria-hidden="true" class="el-popover el-popper el-popover--plain" tabindex="0" style="width: 200px; position: relative; "><div class="el-popover__title">Title</div>this is content, this is content, this is content<div x-arrow="" class="popper__arrow"></div></div>
+    </el-row>
+    <h4>Card</h4>
+    <el-row>
+      <el-card class="box-card">
+        <div slot="header" class="clearfix">
+          <span>Card name</span>
+        </div>
+      </el-card>
+    </el-row>
+    <h4>Carousel</h4>
+    <el-row>
+      <el-carousel height="150px">
+        <el-carousel-item v-for="item in 4" :key="item">
+          <h3>{{ item }}</h3>
+        </el-carousel-item>
+      </el-carousel>
+    </el-row>
+    <h4>Collapse</h4>
+    <el-row>
+      <el-collapse v-model="collapse">
+        <el-collapse-item title="Consistent" name="1">
+          <div>Consistent with real life: in line with the process and logic of real life, and comply with languages and habits that the users are used to;</div>
+        </el-collapse-item>
+        <el-collapse-item title="Feedback" name="2">
+          <div>Operation feedback: enable the users to clearly perceive their operations by style updates and interactive effects;</div>
+        </el-collapse-item>
+      </el-collapse>
+    </el-row>
+    <h4>Avatar</h4>
+    <el-row class="demo-line avatar-demo">
+      <el-avatar icon="el-icon-user-solid"/>
+      <el-avatar> avatar </el-avatar>
+      <el-avatar shape="square" fit="contain" :src="avatarData.url"></el-avatar>
+      <el-avatar size="large"> large </el-avatar>
+      <el-avatar size="medium"> medium </el-avatar>
+      <el-avatar size="small"> small </el-avatar>
+    </el-row>
+  </div>
+</template>
+<script>
+export default {
+  data() {
+    return {
+      radio: '1',
+      radio1: 'Washington',
+      radio2: '1',
+      checked: true,
+      checked1: ['Shanghai'],
+      checked2: true,
+      input: 'Element',
+      inputNumber: 1,
+      selectOptions: [
+        {
+          value: 'Option1',
+          label: 'Option1'
+        },
+        {
+          value: 'Option2',
+          label: 'Option2'
+        },
+        {
+          value: 'Option3',
+          label: 'Option3'
+        },
+        {
+          value: 'Option4',
+          label: 'Option4'
+        },
+        {
+          value: 'Option5',
+          label: 'Option5'
+        }
+      ],
+      selectValue: '',
+      cascadeOptions: [
+        {
+          value: 'guide',
+          label: 'Guide',
+          children: [
+            {
+              value: 'disciplines',
+              label: 'Disciplines',
+              children: [
+                {
+                  value: 'consistency',
+                  label: 'Consistency'
+                },
+                {
+                  value: 'feedback',
+                  label: 'Feedback'
+                }
+              ]
+            }
+          ]
+        },
+        {
+          value: 'resource',
+          label: 'Resource',
+          children: [
+            {
+              value: 'axure',
+              label: 'Axure Components'
+            },
+            {
+              value: 'sketch',
+              label: 'Sketch Templates'
+            },
+            {
+              value: 'docs',
+              label: 'Design Documentation'
+            }
+          ]
+        }
+      ],
+      cascaderValue: [],
+      switchValue: true,
+      slider: 28,
+      datePicker: '',
+      rate: null,
+      transferData: (() => {
+        const data = [];
+        for (let i = 1; i <= 15; i++) {
+          data.push({
+            key: i,
+            label: `Option ${i}`,
+            disabled: i % 4 === 0
+          });
+        }
+        return data;
+      })(),
+      transfer: [1, 4],
+      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'
+        }
+      ],
+      menu: '1',
+      tab: 'first',
+      collapse: ['1'],
+      treeData: [{
+        label: 'Level one 1',
+        children: [{
+          label: 'Level two 1-1',
+          children: [{
+            label: 'Level three 1-1-1'
+          }]
+        }]
+      }, {
+        label: 'Level one 2',
+        children: [{
+          label: 'Level two 2-1',
+          children: [{
+            label: 'Level three 2-1-1'
+          }]
+        }, {
+          label: 'Level two 2-2',
+          children: [{
+            label: 'Level three 2-2-1'
+          }]
+        }]
+      }, {
+        label: 'Level one 3',
+        children: [{
+          label: 'Level two 3-1',
+          children: [{
+            label: 'Level three 3-1-1'
+          }]
+        }, {
+          label: 'Level two 3-2',
+          children: [{
+            label: 'Level three 3-2-1'
+          }]
+        }]
+      }],
+      defaultTreeProps: {
+        children: 'children',
+        label: 'label'
+      },
+      avatarData: {
+        url: 'https://fuss10.elemecdn.com/e/5d/4a731a90594a4af544c0c25941171jpeg.jpeg'
+      }
+    };
+  }
+};
+</script>
diff --git a/examples/components/theme/constant.js b/examples/components/theme/constant.js
new file mode 100644
index 00000000000..6730aa97642
--- /dev/null
+++ b/examples/components/theme/constant.js
@@ -0,0 +1,16 @@
+export const DEFAULT_THEME_CONFIG = {
+  global: {},
+  local: {}
+};
+
+export const ELEMENT_THEME_USER_CONFIG = 'ELEMENT_THEME_USER_CONFIG';
+
+export const ELEMENT_THEME_PREVIEW_CONFIG = 'ELEMENT_THEME_PREVIEW_CONFIG';
+
+export const ACTION_DOWNLOAD_THEME = 'ELEMENT_THEME_ACTION_DOWNLOAD';
+
+export const ACTION_APPLY_THEME = 'ELEMENT_THEME_ACTION_ALLPY_CSS';
+
+export const ACTION_COMPONECT_SELECT = 'ELEMENT_THEME_ACTION_COMPONECT_SELECT';
+
+export const ACTION_USER_CONFIG_UPDATE = 'ELEMENT_THEME_USER_CONFIG_UPDATE';
diff --git a/examples/components/theme/loader/ajax.js b/examples/components/theme/loader/ajax.js
new file mode 100644
index 00000000000..ce248e558d9
--- /dev/null
+++ b/examples/components/theme/loader/ajax.js
@@ -0,0 +1,65 @@
+const defaultError = 'Server Error 500';
+const defaultTimeout = 'Request Timeout';
+const xhr = (method, url, data = null, cb) => {
+  return new window.Promise((resolve, reject) => {
+    const xhr = new XMLHttpRequest();
+    const doReject = (xhr) => {
+      reject(xhr.response || xhr.statusText || defaultError);
+    };
+    xhr.open(method, url);
+    xhr.setRequestHeader('Content-Type', 'application/json');
+    xhr.timeout = 10000;
+    if (cb) cb(xhr);
+    xhr.onload = () => {
+      if (xhr.readyState === 4) {
+        if ((xhr.status >= 200 && xhr.status < 300) || xhr.status === 304) {
+          let response = xhr.response;
+          const type = xhr.getResponseHeader('Content-Type');
+          if (type.indexOf('zip') > -1) {
+            let filename = 'style.zip';
+            const disposition = xhr.getResponseHeader('content-disposition');
+            if (disposition && disposition.indexOf('attachment') !== -1) {
+              var filenameRegex = /filename[^;=\n]*=((['"]).*?\2|[^;\n]*)/;
+              var matches = filenameRegex.exec(disposition);
+              if (matches != null && matches[1]) {
+                filename = matches[1].replace(/['"]/g, '');
+              }
+            }
+            var blob = new Blob([response], { type });
+            var zipUrl = URL.createObjectURL(blob);
+            var link = document.createElement('a');
+            link.href = zipUrl;
+            link.download = filename;
+            link.click();
+            resolve(response);
+            return;
+          }
+          try {
+            response = JSON.parse(xhr.response);
+          } catch (e) {}
+          resolve(response);
+        } else {
+          doReject(xhr);
+        }
+      } else {
+        doReject(xhr);
+      }
+    };
+    xhr.onerror = () => {
+      doReject(xhr);
+    };
+    xhr.ontimeout = () => {
+      xhr.abort();
+      reject(defaultTimeout);
+    };
+    xhr.send(JSON.stringify(data));
+  });
+};
+
+export const post = (url, data, cb) => {
+  return xhr('POST', url, data, cb);
+};
+
+export const get = (url) => {
+  return xhr('GET', url);
+};
diff --git a/examples/components/theme/loader/api.js b/examples/components/theme/loader/api.js
new file mode 100644
index 00000000000..450786d3c4b
--- /dev/null
+++ b/examples/components/theme/loader/api.js
@@ -0,0 +1,24 @@
+import Element from 'main/index.js';
+import { post, get } from './ajax';
+
+const { version } = Element;
+
+const hostList = {
+  local: 'http://localhost:3008/',
+  alpha: 'https://element-api.ar.elenet.me/element/theme/',
+  production: 'https://element-api.ele.me/element/theme/'
+};
+
+const host = hostList[process.env.FAAS_ENV] || hostList.production;
+
+export const getVars = () => {
+  return get(`${host}getVariable?version=${version}`);
+};
+
+export const getTestEle = () => {
+  return get(`${hostList.alpha}getVariable`);
+};
+
+export const updateVars = (data, cb) => {
+  return post(`${host}updateVariable?version=${version}`, data, cb);
+};
diff --git a/examples/components/theme/loader/docStyle.vue b/examples/components/theme/loader/docStyle.vue
new file mode 100644
index 00000000000..07aa433153c
--- /dev/null
+++ b/examples/components/theme/loader/docStyle.vue
@@ -0,0 +1,62 @@
+<script>
+const ORIGINAL_THEME = '#2460e0';
+import { get as ajaxGet } from './ajax.js';
+import { updateDomHeadStyle } from '../utils.js';
+
+export default {
+  data() {
+    return {
+      docs: '', // content of docs css
+      theme: ORIGINAL_THEME,
+      asyncCb: true
+    };
+  },
+  methods: {
+    updateDocStyle(e, cb) {
+      const val = e.global['$--color-primary'] || ORIGINAL_THEME;
+      const oldVal = this.theme;
+      const getHandler = (variable, id) => {
+        return () => {
+          let newStyle = this.updateStyle(this[variable], ORIGINAL_THEME, val);
+          updateDomHeadStyle(id, newStyle);
+          this.asyncCb && cb();
+        };
+      };
+      const docsHandler = getHandler('docs', 'docs-style');
+      if (!this.docs) {
+        const links = [].filter.call(document.querySelectorAll('link'), link => {
+          return /docs\..+\.css/.test(link.href || '');
+        });
+        if (links[0]) {
+          this.getCSSString(links[0].href, docsHandler, 'docs');
+        } else {
+          this.asyncCb = false;
+        }
+      } else {
+        docsHandler();
+      }
+      const styles = [].slice.call(document.querySelectorAll('style'))
+        .filter(style => {
+          const text = style.innerText;
+          return new RegExp(oldVal, 'i').test(text) && !/Chalk Variables/.test(text);
+        });
+      styles.forEach(style => {
+        const { innerText } = style;
+        if (typeof innerText !== 'string') return;
+        style.innerText = this.updateStyle(innerText, oldVal, val);
+      });
+      this.theme = val;
+      !this.asyncCb && cb();
+    },
+    updateStyle(style, oldColor, newColor) {
+      return style.replace(new RegExp(oldColor, 'ig'), newColor);
+    },
+    getCSSString(url, callback, variable) {
+      ajaxGet(url).then((res) => {
+        this[variable] = res;
+        callback();
+      });
+    }
+  }
+};
+</script>
diff --git a/examples/components/theme/loader/index.vue b/examples/components/theme/loader/index.vue
new file mode 100644
index 00000000000..e078d11589d
--- /dev/null
+++ b/examples/components/theme/loader/index.vue
@@ -0,0 +1,106 @@
+<script>
+import bus from '../../../bus.js';
+import Loading from './loading';
+import DocStyle from './docStyle';
+import { updateVars } from './api.js';
+import { updateDomHeadStyle } from '../utils.js';
+import {
+  ACTION_APPLY_THEME,
+  ACTION_DOWNLOAD_THEME,
+  ACTION_USER_CONFIG_UPDATE
+} from '../constant.js';
+import {
+  loadUserThemeFromLocal,
+  loadPreviewFromLocal
+} from '../localstorage.js';
+import { getActionDisplayName } from '../../theme-configurator/utils/utils';
+
+export default {
+  mixins: [Loading, DocStyle],
+  mounted() {
+    this.checkLocalThemeConfig();
+    bus.$on(ACTION_APPLY_THEME, val => {
+      this.userConfig = val;
+      this.onAction();
+    });
+    bus.$on(ACTION_DOWNLOAD_THEME, (themeConfig, themeName) => {
+      this.onDownload(themeConfig, themeName);
+    });
+  },
+  data() {
+    return {
+      userConfig: {},
+      lastApply: 0
+    };
+  },
+  methods: {
+    applyStyle(res, time) {
+      if (time < this.lastApply) return;
+      this.updateDocs(() => {
+        updateDomHeadStyle('chalk-style', res);
+      });
+      this.lastApply = time;
+    },
+    onDownload(themeConfig, themeName) {
+      this.triggertProgressBar(true);
+      updateVars(
+        Object.assign({}, themeConfig, { download: true }),
+        xhr => {
+          xhr.responseType = 'blob';
+        }
+      ).then()
+        .catch((err) => {
+          this.onError(err);
+        })
+        .then(() => {
+          this.triggertProgressBar(false);
+        });
+      ga('send', 'event', 'ThemeConfigurator', 'Download', themeName);
+    },
+    onAction() {
+      this.triggertProgressBar(true);
+      const time = +new Date();
+      updateVars(this.userConfig)
+        .then(res => {
+          this.applyStyle(res, time);
+        })
+        .catch(err => {
+          this.onError(err);
+        })
+        .then(() => {
+          this.triggertProgressBar(false);
+        });
+    },
+    onError(err) {
+      let message;
+      try {
+        message = JSON.parse(err).message;
+      } catch (e) {
+        message = err;
+      }
+      this.$message.error(message);
+    },
+    triggertProgressBar(isLoading) {
+      bus.$emit('user-theme-config-loading', isLoading);
+    },
+    updateDocs(cb) {
+      window.userThemeConfig = JSON.parse(JSON.stringify(this.userConfig));
+      bus.$emit(ACTION_USER_CONFIG_UPDATE, this.userConfig);
+      this.updateDocStyle(this.userConfig, cb);
+    },
+    checkLocalThemeConfig() {
+      // load user local theme
+      const previewConfig = loadPreviewFromLocal();
+      if (previewConfig.type === 'user') {
+        const userConfig = loadUserThemeFromLocal();
+        this.$message(getActionDisplayName('load-local-theme-config'));
+        const config = userConfig.filter(theme => (theme.name === previewConfig.name));
+        if (config && config[0]) {
+          this.userConfig = JSON.parse(config[0].theme);
+          this.onAction();
+        }
+      }
+    }
+  }
+};
+</script>
\ No newline at end of file
diff --git a/examples/components/theme/loader/loading/index.vue b/examples/components/theme/loader/loading/index.vue
new file mode 100644
index 00000000000..1f597e1acc7
--- /dev/null
+++ b/examples/components/theme/loader/loading/index.vue
@@ -0,0 +1,35 @@
+<style>
+  .loadingClass {
+    z-index: 0!important;
+    .el-loading-spinner {
+      top: 0%;
+      margin-top: 30%;
+    }
+  }
+</style>
+<script>
+
+import bus from '../../../../bus.js';
+import './progress.js';
+
+export default {
+  data() {
+    return {
+      count: 0
+    };
+  },
+  created() {
+    bus.$on('user-theme-config-loading', val => {
+      if (val) {
+        this.count++;
+        if (this.count > 1) return;
+        this.$bar.start();
+      } else {
+        this.count--;
+        if (this.count) return;
+        this.$bar.finish();
+      }
+    });
+  }
+};
+</script>
diff --git a/examples/components/theme/loader/loading/progress.js b/examples/components/theme/loader/loading/progress.js
new file mode 100644
index 00000000000..54ba20d6517
--- /dev/null
+++ b/examples/components/theme/loader/loading/progress.js
@@ -0,0 +1,6 @@
+import Vue from 'vue';
+import ProgressBar from './progress.vue';
+
+Vue.prototype.$bar = new Vue(ProgressBar).$mount();
+
+document.body.appendChild(Vue.prototype.$bar.$el);
diff --git a/examples/components/theme/loader/loading/progress.vue b/examples/components/theme/loader/loading/progress.vue
new file mode 100644
index 00000000000..6deabaf7d4d
--- /dev/null
+++ b/examples/components/theme/loader/loading/progress.vue
@@ -0,0 +1,108 @@
+<template>
+  <div class="progress" :style="{
+    'width': percent+'%',
+    'height': height,
+    'background-color': canSuccess? successColor() : failedColor(),
+    'opacity': show ? 1 : 0
+  }"></div>
+</template>
+
+<script>
+/* eslint-disable */
+export default {
+  data () {
+    return {
+      percent: 0,
+      show: false,
+      canSuccess: true,
+      duration: 3000,
+      height: '2px'
+    }
+  },
+  methods: {
+    successColor() {
+      return this.userSelectColor()['$--color-primary'] || '#2460e0';
+    },
+    failedColor() {
+      return this.userSelectColor()['$--color-danger'] || '#FF4D4F';
+    },
+    userSelectColor() {
+      return window.userThemeConfig && window.userThemeConfig.global || {}
+    },
+    start () {
+      this.show = true
+      this.canSuccess = true
+      if (this._timer) {
+        clearInterval(this._timer)
+        this.percent = 0
+      }
+      // Code from Nuxt.js!
+      this._cut = 10000 / Math.floor(this.duration)
+      this._timer = setInterval(() => {
+        this.increase(this._cut * Math.random())
+        if (this.percent >= 90) {
+          this.percent = 90;
+        }
+      }, 100)
+      return this
+    },
+    set (num) {
+      this.show = true
+      this.canSuccess = true
+      this.percent = Math.floor(num)
+      return this
+    },
+    get () {
+      return Math.floor(this.percent)
+    },
+    increase (num) {
+      this.percent = this.percent + Math.floor(num)
+      return this
+    },
+    decrease (num) {
+      this.percent = this.percent - Math.floor(num)
+      return this
+    },
+    finish () {
+      this.percent = 100
+      this.hide()
+      return this
+    },
+    pause () {
+      clearInterval(this._timer)
+      return this
+    },
+    hide () {
+      clearInterval(this._timer)
+      this._timer = null
+      setTimeout(() => {
+        this.show = false
+        this.$nextTick(() => {
+          setTimeout(() => {
+            this.percent = 0
+          }, 200)
+        })
+      }, 500)
+      return this
+    },
+    fail () {
+      this.canSuccess = false
+      return this
+    }
+  }
+}
+</script>
+
+<style scoped>
+.progress {
+  position: fixed;
+  top: 0px;
+  left: 0px;
+  right: 0px;
+  height: 2px;
+  width: 0%;
+  transition: width 0.2s, opacity 0.4s;
+  opacity: 1;
+  z-index: 999999;
+}
+</style>
\ No newline at end of file
diff --git a/examples/components/theme/localstorage.js b/examples/components/theme/localstorage.js
new file mode 100644
index 00000000000..7d330e6ba34
--- /dev/null
+++ b/examples/components/theme/localstorage.js
@@ -0,0 +1,38 @@
+import {
+  ELEMENT_THEME_PREVIEW_CONFIG,
+  ELEMENT_THEME_USER_CONFIG
+} from './constant';
+
+export const saveToLocal = (key, value) => {
+  localStorage.setItem(key, JSON.stringify(value));
+};
+
+export const loadFromLocal = (key) => {
+  try {
+    return JSON.parse(localStorage.getItem(key));
+  } catch (e) {
+    console.error(e);
+    return null;
+  }
+};
+
+export const savePreviewToLocal = (value) => {
+  saveToLocal(ELEMENT_THEME_PREVIEW_CONFIG, value);
+};
+
+export const loadPreviewFromLocal = () => {
+  return loadFromLocal(ELEMENT_THEME_PREVIEW_CONFIG) || {};
+};
+
+export const removePreviewFromLocal = () => {
+  return localStorage.removeItem(ELEMENT_THEME_PREVIEW_CONFIG);
+};
+
+export const saveUserThemeToLocal = (value) => {
+  saveToLocal(ELEMENT_THEME_USER_CONFIG, value);
+};
+
+export const loadUserThemeFromLocal = () => {
+  return loadFromLocal(ELEMENT_THEME_USER_CONFIG);
+};
+
diff --git a/examples/components/theme/theme-card.vue b/examples/components/theme/theme-card.vue
new file mode 100644
index 00000000000..f2ca31d7698
--- /dev/null
+++ b/examples/components/theme/theme-card.vue
@@ -0,0 +1,406 @@
+<style lang="scss">
+.theme-card-item {
+  user-select: none;
+  border-radius: 4px;
+  overflow: hidden;
+  background: #fff;
+  height: 90%;
+  margin: 25px 0;
+  box-shadow: 0 0 1px 0 #666;
+  &.is-hidden {
+    opacity: 0;
+    height: 0;
+  }
+  .upload {
+    cursor: pointer;
+    background: #f5f7fa;
+    height: 100%;
+    width: 100%;
+    display: flex;
+    justify-content: center;
+    align-items:center;
+    .upload-action {
+      width: 40%;
+      margin: 0 auto;
+      text-align: center;
+      color: #606266;
+      img {
+        display: block;
+        margin: 0 auto;
+      }
+      span {
+        display: block;
+        font-size: 14px;
+        margin-top: 8px;
+      }
+    }
+  }
+  .preview {
+    position: relative;
+    height: 70%;
+    width: 100%;
+    .line {
+      height: 50%;
+    }
+    .line-2 {
+      width: 50%;
+      height: 100%;
+      display: inline-block;
+    }
+    .line-4 {
+      width: 25%;
+      height: 100%;
+      display: inline-block;
+    }
+    .action {
+      transition: all .3s;
+      position: absolute;
+      opacity: 0;
+      top: 0;
+      left: 0;
+      right: 0;
+      bottom: 0;
+      .action-mask {
+        position: absolute;
+        top: 0;
+        left: 0;
+        right: 0;
+        bottom: 0;
+        background: #000;
+        opacity: 0.4;
+      }
+      .action-block {
+        position: absolute;
+        width: 50%;
+        height: 50%;
+        left: 25%;
+        top: 25%;
+      }
+      .action-item {
+        cursor: pointer;
+        display: inline-block;
+        height: 100%;
+        width: 30%;
+        color: #eee;
+        &:hover {
+          color: #fff;
+          .circle {
+            border-color: #fff;
+          }
+        }
+        .icon {
+          height: 50%;
+          font-size: 22px;
+          text-align: center;
+          display: flex;
+          justify-content:center;
+          align-items:center;
+          img {
+            width: 130%;
+          }
+        }
+        .name {
+          font-size: 12px;
+          height: 50%;
+          text-align: center;
+          display: flex;
+          justify-content:center;
+          align-items:center;
+          margin-top: 4px;
+        }
+      }
+      .action-item-right {
+        margin-left: 40%;
+      }
+    }
+  }
+  .info {
+    height: 30%;
+    line-height: 16px;
+    display: flex;
+    align-items: center;
+    .info-center {
+      width: 100%;
+    }
+    .title {
+      font-weight: bold;
+      font-size: 16px;
+      color: #303133;
+      padding: 0 12px;
+      justify-content: space-between;
+    }
+    .right {
+      float: right;
+      font-weight: normal;
+      font-size: 14px;
+      color: #A7A8AD;
+    }
+    .more {
+      font-size: 16px;
+      cursor: pointer;
+    }
+    .description {
+      padding: 0 12px;
+      font-size: 14px;
+      color: #606266;
+      margin-top: 10px;
+    }
+  }
+  &.is-upload {
+    box-shadow: none;
+    border: 1px dashed #DCDFE6;
+  }
+  &.is-upload:hover {
+    box-shadow: none;
+  }
+
+  &:hover {
+    box-shadow: 0 0 10px 0 #999;
+    .action {
+      opacity: 1;
+    }
+  }
+}
+</style>
+
+<template>
+  <section class="theme-card-item" :class="{'is-hidden': !config || !config.name, 'is-upload': isUpload}">
+    <template v-if="isUpload">
+      <div class="upload" @click="uploadClick">
+        <div class="upload-action">
+          <img src="../../assets/images/icon-upload.svg"/>
+          <span>{{getActionDisplayName('upload-theme')}}</span>
+        </div>
+      </div>
+      <input
+        class="el-upload__input"
+        type="file"
+        ref="input"
+        @change="uploadAction"
+        accept="application/json"
+      />
+    </template>
+    <template v-else>
+      <div class="preview">
+        <div class="line">
+          <span class="line-2" :style="{background: mainColor}"></span>
+          <span class="line-2" :style="{background: textPrimaryColor}"></span>
+        </div>
+        <div class="line">
+          <span class="line-4" :style="{background: mainColor50}"></span>
+          <span class="line-4" :style="{background: mainColor80}"></span>
+          <span class="line-4" :style="{background: borderBaseColor}"></span>
+          <span class="line-4" :style="{background: textSecondaryColor}"></span>
+        </div>
+        <div class="action">
+          <div class="action-mask"></div>
+          <div class="action-block">
+            <div
+              class="action-item"
+              :class="index && 'action-item-right'"
+              v-for="(item, index) in actionArray"
+              :key="index"
+              @click="iconClick(item.action)"
+            >
+              <div class="icon">
+                <img :src="item.icon"/>
+                <span class="circle"></span>
+              </div>
+              <div class="name">
+                <span>{{item.name}}</span>
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
+      <div class="info">
+        <div class="info-center">
+          <div class="title">
+            <span>{{config.name}}</span>
+            <span class="right" v-if="isOfficial">by {{config.author}}</span>
+            <span class="right more" v-else>
+              <el-dropdown @command="actionClick">
+                <i class="el-icon-more"></i>
+                <el-dropdown-menu slot="dropdown">
+                  <el-dropdown-item command="rename">{{getActionDisplayName('rename-theme')}}</el-dropdown-item>
+                  <el-dropdown-item command="copy">{{getActionDisplayName('copy-theme')}}</el-dropdown-item>
+                  <el-dropdown-item
+                      command="delete"
+                      style="color: #FF4D4F;"
+                    >
+                      {{getActionDisplayName('delete-theme')}}
+                    </el-dropdown-item>
+                </el-dropdown-menu>
+              </el-dropdown>
+            </span>
+          </div>
+          <div class="description" v-if="isOfficial">{{getActionDisplayName(getDescriptionKey(config.name))}} </div>
+          <div class="description" v-else>{{getActionDisplayName('last-modified')}} {{formatDate(config.update)}}</div>
+        </div>
+      </div>
+    </template>
+  </section>
+</template>
+
+<script>
+import bus from '../../bus';
+import {
+  DEFAULT_THEME_CONFIG,
+  ACTION_DOWNLOAD_THEME
+} from './constant.js';
+import { savePreviewToLocal } from './localstorage';
+import { tintColor } from '../../color.js';
+import dateUtil from 'element-ui/src/utils/date';
+import { getActionDisplayName } from '../theme-configurator/utils/utils';
+
+export default {
+  props: {
+    config: Object,
+    type: String,
+    base: {
+      type: String,
+      default: ''
+    },
+    from: String
+  },
+  data() {
+    return {
+      deleteVisible: false
+    };
+  },
+  methods: {
+    getActionDisplayName(key) {
+      return getActionDisplayName(key);
+    },
+    getDescriptionKey(name) {
+      return name ? `description-${name.toLowerCase()}` : '';
+    },
+    formatDate(timestamp) {
+      if (!timestamp) return '';
+      return dateUtil.format(new Date(timestamp), 'yyyy-MM-dd HH:mm');
+    },
+    uploadClick() {
+      this.$refs.input.value = null;
+      this.$refs.input.click();
+    },
+    uploadAction(ev) {
+      const files = ev.target.files;
+      if (!files) return;
+      var reader = new FileReader();
+      reader.onload = (e) => {
+        try {
+          const jsonString = e.target.result;
+          const jsonObject = JSON.parse(jsonString);
+          if (!jsonObject.global || !jsonObject.local) {
+            return this.$message.error('JSON format error');
+          }
+          this.$emit('action', 'upload', jsonString);
+        } catch (e) {
+          this.$message.error('Upload error');
+          console.error(e);
+        }
+      };
+      reader.readAsText(files[0]);
+    },
+    actionClick(e) {
+      this.$emit('action', e, this.config);
+    },
+    iconClick(e) {
+      switch (e) {
+        case 'preview':
+        case 'edit':
+          if (this.from) {
+            this.$emit('action', e, this.config);
+            return;
+          }
+          const { name, theme } = this.config;
+          savePreviewToLocal({
+            type: this.type,
+            name,
+            theme
+          });
+          this.$router.push({
+            name: `theme-preview-${this.$route.meta.lang}`,
+            params: {
+              refer: 'theme'
+            }
+          });
+          this.$nextTick(() => {
+            window.scrollTo(0, 0);
+          });
+          break;
+        case 'download':
+          bus.$emit(ACTION_DOWNLOAD_THEME, this.theme, this.config.name);
+          break;
+        default:
+          this.$emit('action', e, this.config);
+          return;
+      }
+    },
+    deleteUserTheme() {
+      this.deleteVisible = false;
+      this.$emit('action', 'delete', this.config);
+    }
+  },
+  computed: {
+    isUpload() {
+      return this.type === 'upload';
+    },
+    theme() {
+      if (this.config.theme) {
+        return JSON.parse(this.config.theme);
+      }
+      return DEFAULT_THEME_CONFIG;
+    },
+    mainColor() {
+      return this.theme.global['$--color-primary'] || '#1989FA';
+    },
+    mainColor50() {
+      return tintColor(this.mainColor, 0.5);
+    },
+    mainColor80() {
+      return tintColor(this.mainColor, 0.8);
+    },
+    textPrimaryColor() {
+      return this.theme.global['$--color-text-primary'] || '#303133';
+    },
+    borderBaseColor() {
+      return this.theme.global['$--border-color-base'] || '#DCDFE6';
+    },
+    textSecondaryColor() {
+      return this.theme.global['$--color-text-secondary'] || '#A7A8AD';
+    },
+    isOfficial() {
+      return this.type === 'official';
+    },
+    actionArray() {
+      if (this.isOfficial) {
+        return [
+          {
+            icon: require('../../assets/images/icon-check.png'),
+            name: getActionDisplayName('theme-check'),
+            action: 'preview'
+          },
+          {
+            icon: require('../../assets/images/icon-copy.png'),
+            name: getActionDisplayName('theme-copy'),
+            action: 'copy'
+          }
+        ];
+      }
+      return [
+        {
+          icon: require('../../assets/images/icon-edit.png'),
+          name: getActionDisplayName('theme-edit'),
+          action: 'edit'
+        },
+        {
+          icon: require('../../assets/images/icon-download.png'),
+          name: getActionDisplayName('download-theme'),
+          action: 'download'
+        }
+      ];
+    }
+  }
+};
+</script>
\ No newline at end of file
diff --git a/examples/components/theme/theme-list.js b/examples/components/theme/theme-list.js
new file mode 100644
index 00000000000..00e219dcc3c
--- /dev/null
+++ b/examples/components/theme/theme-list.js
@@ -0,0 +1,15 @@
+export const themeList = [
+  {
+    name: 'Element',
+    author: 'Element',
+    theme: '{"global":{"$--color-primary":"#2460e0"},"local":{}}'
+  }
+];
+
+export const eleThemeList = [
+  {
+    name: 'Kiwi',
+    author: 'Element',
+    theme: '{"global":{"$--color-primary":"#1989FA","$--color-success":"#5CB87A","$--color-warning":"#F5A623","$--color-danger":"#FF4D4F","$--color-info":"#8896B3","$--font-size-small":"13px","$--font-size-base":"14px","$--font-size-medium":"16px","$--font-size-large":"22px","$--font-size-extra-large":"28px","$--font-line-height-secondary":"20px"},"local":{"$--button-primary-background-color":"$--color-primary","$--switch-font-size":"14px","$--datepicker-active-color":"$--color-primary","$--tooltip-border-color":"$--border-color-base","$--tooltip-color":"#FFFFFF","$--tooltip-padding":"10px","$--collapse-header-font-size":"14px","$--collapse-content-font-size":"14px","$--collapse-content-font-color":"$--color-text-regular","$--radio-input-background-color":"#FFFFFF","$--radio-icon-color":"$--color-warning","$--radio-button-checked-background-color":"$--color-primary","$--input-border-radius":"$--border-radius-base","$--select-input-focus-border-color":"$--color-primary","$--select-font-size":"14px","$--select-option-selected-font-color":"$--color-primary","$--select-input-font-size":"14px","$--select-option-height":"34px","$--slider-main-background-color":"$--color-primary","$--tag-font-color":"$--color-primary","$--tag-default-hover-background-color":"$--color-primary","$--message-warning-font-color":"$--color-warning","$--alert-title-font-size":"14px","$--alert-icon-size":"14px","$--alert-icon-large-size":"22px","$--alert-close-customed-font-size":"12px","$--notification-title-font-size":"16px","$--notification-content-font-size":"14px","$--menu-item-font-color":"$--color-primary"}}'
+  }
+];
diff --git a/examples/components/theme/utils.js b/examples/components/theme/utils.js
new file mode 100644
index 00000000000..7a6de22d8d9
--- /dev/null
+++ b/examples/components/theme/utils.js
@@ -0,0 +1,24 @@
+export const isEmptyObject = (obj) => (JSON.stringify(obj) === '{}');
+
+export const getThemeConfigObject = (config) => {
+  try {
+    const conf = JSON.parse(config);
+    const { global, local } = conf;
+    if (!isEmptyObject(global) || !isEmptyObject(local)) {
+      return conf;
+    }
+    return false;
+  } catch (e) {
+    return false;
+  }
+};
+
+export const updateDomHeadStyle = (id, styleContent) => {
+  let styleTag = document.getElementById(id);
+  if (!styleTag) {
+    styleTag = document.createElement('style');
+    styleTag.setAttribute('id', id);
+    document.head.appendChild(styleTag);
+  }
+  styleTag.innerText = styleContent.replace(/@font-face{[^}]+}/, '');
+};
diff --git a/examples/demo-styles/alert.scss b/examples/demo-styles/alert.scss
new file mode 100644
index 00000000000..dae5f062a57
--- /dev/null
+++ b/examples/demo-styles/alert.scss
@@ -0,0 +1,7 @@
+.demo-block.demo-alert .el-alert {
+  margin: 20px 0 0;
+}
+
+.demo-block.demo-alert .el-alert:first-child {
+  margin: 0;
+}
diff --git a/examples/demo-styles/avatar.scss b/examples/demo-styles/avatar.scss
new file mode 100644
index 00000000000..d655db787af
--- /dev/null
+++ b/examples/demo-styles/avatar.scss
@@ -0,0 +1,62 @@
+.demo-avatar {
+
+  &.demo-basic {
+    text-align: center;
+
+    .demo-basic--circle, .demo-basic--square {
+      display: flex;
+      justify-content: space-between;
+      align-items: center;
+      .block {
+        flex: 1;
+      }
+
+      .block:not(:last-child) {
+        border-right: 1px solid rgba(224, 230, 237, 0.5);
+      }
+    }
+
+  }
+
+  .sub-title {
+    margin-bottom: 10px;
+    font-size: 14px;
+    color: #8492a6;
+  }
+
+  .el-col:not(:last-child) {
+    border-right: 1px solid rgba(224,230,237,.5);
+  }
+
+  .demo-type {
+    display: flex;
+
+    >div {
+      flex: 1;
+      text-align: center;
+    }
+
+    >div:not(:last-child) {
+      border-right: 1px solid rgba(224,230,237,.5);
+    }
+  }
+
+  .demo-fit {
+    display: flex;
+    text-align: center;
+    justify-content: space-between;
+
+    .block {
+      flex: 1;
+      display: flex;
+      flex-direction: column;
+      flex-grow: 0;
+    }
+
+    .title {
+      margin-bottom: 10px;
+      font-size: 14px;
+      color: #8492a6;
+    }
+  }
+}
diff --git a/examples/demo-styles/badge.scss b/examples/demo-styles/badge.scss
new file mode 100644
index 00000000000..494dacdedc5
--- /dev/null
+++ b/examples/demo-styles/badge.scss
@@ -0,0 +1,19 @@
+.demo-badge.demo-block .el-dropdown {
+  vertical-align: middle;
+}
+.demo-badge.demo-block {
+  .share-button {
+    width: 36px;
+    padding: 10px;
+  }
+
+  .mark {
+    margin-top: 8px;
+    line-height: 1;
+    float: right;
+  }
+
+  .item {
+    margin-right: 40px;
+  }
+}
diff --git a/examples/demo-styles/border.scss b/examples/demo-styles/border.scss
new file mode 100644
index 00000000000..57df6833217
--- /dev/null
+++ b/examples/demo-styles/border.scss
@@ -0,0 +1,44 @@
+.demo-border .text {
+  width: 15%;
+}
+.demo-border .line {
+  width: 70%;
+}
+.demo-border .line div {
+  width: 100%;
+  height: 0;
+  border-top: 1px solid #eee;
+}
+.demo-border .line .dashed {
+  border-top: 2px dashed #eee;
+}
+.demo-shadow {
+  height: 100px;
+  width: 50%;
+  border: 1px solid #eee;
+}
+.demo-shadow-text {
+  line-height: 50px;
+  color: #666;
+  font-size: 14px;
+}
+.demo-radius .title {
+  color: #666;
+  font-size: 18px;
+  margin: 10px 0;
+}
+.demo-radius .value {
+  color: #333;
+  font-size: 16px;
+  margin: 10px 0;
+}
+.demo-radius .radius {
+  height: 60px;
+  width: 70%;
+  border: 1px solid #d7dae2;
+  border-radius: 0;
+  margin-top: 20px;
+}
+.demo-radius .radius-30 {
+  border-radius: 30px;
+}
diff --git a/examples/demo-styles/button-group-enhance.scss b/examples/demo-styles/button-group-enhance.scss
new file mode 100644
index 00000000000..ee72bc03c4d
--- /dev/null
+++ b/examples/demo-styles/button-group-enhance.scss
@@ -0,0 +1,19 @@
+.el-card .el-card__body {
+  padding: 0;
+
+  .content {
+    padding: 20px;
+  }
+  .el-button-group-enhance {
+    .el-button {
+      border-bottom: none;
+      border-radius: 0;
+      &:first-child {
+        border-left: none;
+      }
+      &.el-dropdown__caret-button {
+        border-right: none;
+      }
+    }
+  }
+}
diff --git a/examples/demo-styles/button.scss b/examples/demo-styles/button.scss
new file mode 100644
index 00000000000..bc8b7881a28
--- /dev/null
+++ b/examples/demo-styles/button.scss
@@ -0,0 +1,21 @@
+.demo-block.demo-button {
+  .el-row {
+    margin-bottom: 20px;
+
+    &:last-child {
+      margin-bottom: 0;
+    }
+  }
+  .el-button + .el-button {
+    margin-left: 10px;
+  }
+  .el-button-group {
+    .el-button + .el-button {
+      margin-left: 0;
+    }
+
+    & + .el-button-group {
+      margin-left: 10px;
+    }
+  }
+}
diff --git a/examples/demo-styles/calendar.scss b/examples/demo-styles/calendar.scss
new file mode 100644
index 00000000000..62198bd1c82
--- /dev/null
+++ b/examples/demo-styles/calendar.scss
@@ -0,0 +1,5 @@
+.demo-calendar.demo-block {
+  .is-selected {
+    color: #1989FA;
+  } 
+}
diff --git a/examples/demo-styles/card.scss b/examples/demo-styles/card.scss
new file mode 100644
index 00000000000..a558b149621
--- /dev/null
+++ b/examples/demo-styles/card.scss
@@ -0,0 +1,33 @@
+.demo-block.demo-card {
+  .text {
+    font-size: 14px;
+  }
+
+  .time {
+    font-size: 13px;
+    color: #999;
+  }
+
+  .bottom {
+    margin-top: 13px;
+    line-height: 12px;
+  }
+
+  .item {
+    margin-bottom: 18px;
+  }
+
+  .button {
+    padding: 0;
+    float: right;
+  }
+
+  .image {
+    width: 100%;
+    display: block;
+  }
+
+  .box-card {
+    width: 480px;
+  }
+}
diff --git a/examples/demo-styles/carousel.scss b/examples/demo-styles/carousel.scss
new file mode 100644
index 00000000000..dc5295a2989
--- /dev/null
+++ b/examples/demo-styles/carousel.scss
@@ -0,0 +1,46 @@
+.demo-carousel .block {
+  padding: 30px;
+  text-align: center;
+  border-right: solid 1px #eff2f6;
+  display: inline-block;
+  width: 49%;
+  box-sizing: border-box;
+  &:last-child {
+    border-right: none;
+  }
+}
+
+.demo-carousel .demonstration {
+  display: block;
+  color: #8492a6;
+  font-size: 14px;
+  margin-bottom: 20px;
+}
+
+.demo-carousel .el-carousel__container {
+  text-align: center;
+}
+
+.demo-carousel .el-carousel__item {
+  h3 {
+    color: #fff;
+    font-size: 18px;
+    line-height: 300px;
+    margin: 0;
+    &.small {
+      font-size: 14px;
+      line-height: 150px;
+    }
+    &.medium {
+      font-size: 14px;
+      line-height: 200px;
+    }
+  }
+  &:nth-child(2n) {
+    background-color: #99a9bf;
+  }
+  &:nth-child(2n + 1) {
+    background-color: #d3dce6;
+  }
+}
+
diff --git a/examples/demo-styles/cascader.scss b/examples/demo-styles/cascader.scss
new file mode 100644
index 00000000000..765676c909b
--- /dev/null
+++ b/examples/demo-styles/cascader.scss
@@ -0,0 +1,30 @@
+.demo-cascader {
+  .el-cascader {
+    width: 222px;
+  }
+}
+.demo-cascader-size {
+  .el-cascader {
+    vertical-align: top;
+    margin-right: 15px;
+  }
+}
+.demo-cascader .source > div {
+  display: flex;
+}
+.demo-cascader .block {
+  padding: 30px 0;
+  text-align: center;
+  border-right: solid 1px #eff2f6;
+  width: 50%;
+  box-sizing: border-box;
+  &:last-child {
+    border-right: none;
+  }
+}
+.demo-cascader .demonstration {
+  display: block;
+  color: #8492a6;
+  font-size: 14px;
+  margin-bottom: 20px;
+}
diff --git a/examples/demo-styles/collapse.scss b/examples/demo-styles/collapse.scss
new file mode 100644
index 00000000000..11c0d36f69c
--- /dev/null
+++ b/examples/demo-styles/collapse.scss
@@ -0,0 +1,7 @@
+.demo-collapse {
+  .el-collapse-item__header {
+    .header-icon {
+      margin-left: 5px;
+    }
+  }
+}
diff --git a/examples/demo-styles/color-picker.scss b/examples/demo-styles/color-picker.scss
new file mode 100644
index 00000000000..621cc8accf3
--- /dev/null
+++ b/examples/demo-styles/color-picker.scss
@@ -0,0 +1,20 @@
+.demo-color-picker .block {
+  padding: 30px 0;
+  text-align: center;
+  border-right: solid 1px #eff2f6;
+  display: inline-block;
+  width: 50%;
+  box-sizing: border-box;
+  &:last-child {
+    border-right: none;
+  }
+}
+.demo-color-picker .demonstration {
+  display: block;
+  color: #8492a6;
+  font-size: 14px;
+  margin-bottom: 20px;
+}
+.demo-color-picker .el-color-picker + .el-color-picker {
+  margin-left: 20px;
+}
diff --git a/examples/demo-styles/color.scss b/examples/demo-styles/color.scss
new file mode 100644
index 00000000000..c8a145700d3
--- /dev/null
+++ b/examples/demo-styles/color.scss
@@ -0,0 +1,72 @@
+.demo-color-box {
+  position: relative;
+  border-radius: 4px;
+  padding: 20px;
+  margin: 5px 0;
+  height: 114px;
+  box-sizing: border-box;
+  color: #fff;
+  font-size: 14px;
+
+  & .value {
+    font-size: 12px;
+    opacity: 0.69;
+    line-height: 24px;
+  }
+}
+.demo-color-box-other {
+  height: 74px;
+  margin: 10px 0 !important;
+  border-radius: 4px 4px 4px 4px !important;
+  padding: 15px 20px;
+}
+.demo-color-box-group {
+  .demo-color-box {
+    border-radius: 0;
+    margin: 0;
+  }
+  .demo-color-box:first-child {
+    border-radius: 4px 4px 0 0;
+  }
+  .demo-color-box:last-child {
+    border-radius: 0 0 4px 4px;
+  }
+}
+.bg-color-sub {
+  width: 100%;
+  height: 40px;
+  left: 0;
+  bottom: 0;
+  position: absolute;
+  border-radius: 0 0 4px 4px;
+}
+.bg-blue-sub-item {
+  width: 11.1111111%;
+  height: 100%;
+  display: inline-block;
+}
+.bg-blue-sub-item:first-child {
+  border-radius: 0 0 0 4px;
+}
+.bg-success-sub-item {
+  width: 50%;
+  height: 100%;
+  display: inline-block;
+}
+.bg-success-sub-item:first-child {
+  border-radius: 0 0 0 4px;
+}
+.bg-success-sub-item:last-child {
+  border-radius: 0 0 4px 0;
+}
+.bg-transparent {
+  border: 1px solid #fcc3c3;
+  color: #303133;
+  background: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' version='1.1' preserveAspectRatio='none' viewBox='0 0 100 100'><path d='M0 98 L100 0 L100 1 L1 98' fill='%23FCC3C3' /></svg>");
+  background-repeat: no-repeat;
+  background-position: center center;
+  background-size: 100% 100%, auto;
+}
+.demo-color-box-lite {
+  color: #303133;
+}
diff --git a/examples/demo-styles/container.scss b/examples/demo-styles/container.scss
new file mode 100644
index 00000000000..f97fc74e947
--- /dev/null
+++ b/examples/demo-styles/container.scss
@@ -0,0 +1,43 @@
+.el-header,
+.el-footer {
+  background-color: #b3c0d1;
+  color: #333;
+  line-height: 60px;
+}
+
+.el-aside {
+  color: #333;
+}
+
+#chang-jian-ye-mian-bu-ju + .demo-container {
+  .el-header,
+  .el-footer {
+    text-align: center;
+  }
+
+  .el-aside {
+    background-color: #d3dce6;
+    text-align: center;
+    line-height: 200px;
+  }
+
+  .el-main {
+    background-color: #e9eef3;
+    color: #333;
+    text-align: center;
+    line-height: 160px;
+  }
+
+  & > .source > .el-container {
+    margin-bottom: 40px;
+
+    &:nth-child(5) .el-aside,
+    &:nth-child(6) .el-aside {
+      line-height: 260px;
+    }
+
+    &:nth-child(7) .el-aside {
+      line-height: 320px;
+    }
+  }
+}
diff --git a/examples/demo-styles/date-picker.scss b/examples/demo-styles/date-picker.scss
new file mode 100644
index 00000000000..96bee1a421b
--- /dev/null
+++ b/examples/demo-styles/date-picker.scss
@@ -0,0 +1,36 @@
+.demo-block.demo-date-picker .source > div {
+  padding: 0;
+  display: flex;
+  flex-wrap: wrap;
+}
+
+.demo-date-picker .block {
+  padding: 30px 0;
+  text-align: center;
+  border-right: solid 1px #eff2f6;
+  flex: 1;
+  &:last-child {
+    border-right: none;
+  }
+}
+
+.demo-date-picker .container {
+  flex: 1;
+  border-right: solid 1px #eff2f6;
+  .block {
+    border-right: none;
+    &:last-child {
+      border-top: solid 1px #eff2f6;
+    }
+  }
+  &:last-child {
+    border-right: none;
+  }
+}
+
+.demo-date-picker .demonstration {
+  display: block;
+  color: #8492a6;
+  font-size: 14px;
+  margin-bottom: 20px;
+}
diff --git a/examples/demo-styles/datetime-picker.scss b/examples/demo-styles/datetime-picker.scss
new file mode 100644
index 00000000000..bec439b74e2
--- /dev/null
+++ b/examples/demo-styles/datetime-picker.scss
@@ -0,0 +1,21 @@
+.demo-block.demo-datetime-picker .source > div {
+  padding: 0;
+  display: flex;
+}
+
+.demo-datetime-picker .block {
+  padding: 30px 0;
+  text-align: center;
+  border-right: solid 1px #eff2f6;
+  flex: 1;
+  &:last-child {
+    border-right: none;
+  }
+}
+
+.demo-datetime-picker .demonstration {
+  display: block;
+  color: #8492a6;
+  font-size: 14px;
+  margin-bottom: 20px;
+}
diff --git a/examples/demo-styles/dialog.scss b/examples/demo-styles/dialog.scss
new file mode 100644
index 00000000000..ddf104332cc
--- /dev/null
+++ b/examples/demo-styles/dialog.scss
@@ -0,0 +1,20 @@
+.demo-block.demo-dialog {
+  .dialog-footer button:first-child {
+    margin-right: 10px;
+  }
+  .full-image {
+    width: 100%;
+  }
+  .el-dialog__wrapper {
+    margin: 0;
+  }
+  .el-select {
+    width: 300px;
+  }
+  .el-input {
+    width: 300px;
+  }
+  .el-button--text {
+    margin-right: 15px;
+  }
+}
diff --git a/examples/demo-styles/divider.scss b/examples/demo-styles/divider.scss
new file mode 100644
index 00000000000..a4cd0c07cb4
--- /dev/null
+++ b/examples/demo-styles/divider.scss
@@ -0,0 +1,9 @@
+.demo-divider-container-1 {
+  display: inline-block;
+  width: 33%;
+}
+
+.demo-divider-container-2 {
+  display: inline-block;
+  width: 50%;
+}
\ No newline at end of file
diff --git a/examples/demo-styles/drawer.scss b/examples/demo-styles/drawer.scss
new file mode 100644
index 00000000000..117136171f8
--- /dev/null
+++ b/examples/demo-styles/drawer.scss
@@ -0,0 +1,21 @@
+.demo-drawer {
+  &__content {
+    display: flex;
+    flex-direction: column;
+    height: 100%;
+    form {
+      flex: 1;
+    }
+  }
+
+  &__footer {
+    display: flex;
+    button {
+      flex: 1;
+    }
+  }
+}
+
+.el-drawer__body {
+  padding: 20px;
+}
diff --git a/examples/demo-styles/dropdown.scss b/examples/demo-styles/dropdown.scss
new file mode 100644
index 00000000000..0b648618aab
--- /dev/null
+++ b/examples/demo-styles/dropdown.scss
@@ -0,0 +1,37 @@
+.demo-block {
+  .el-dropdown {
+    vertical-align: top;
+
+    & + .el-dropdown {
+      margin-left: 15px;
+    }
+  }
+  .el-dropdown-link {
+    cursor: pointer;
+    color: #2460e0;
+  }
+  .el-icon-arrow-down {
+    font-size: 12px;
+  }
+}
+
+.block-col-2 {
+  margin: -24px;
+
+  .el-col {
+    padding: 30px 0;
+    text-align: center;
+    border-right: 1px solid #eff2f6;
+
+    &:last-child {
+      border-right: 0;
+    }
+  }
+}
+
+.demo-dropdown .demonstration {
+  display: block;
+  color: #8492a6;
+  font-size: 14px;
+  margin-bottom: 20px;
+}
diff --git a/examples/demo-styles/form.scss b/examples/demo-styles/form.scss
new file mode 100644
index 00000000000..6d04bc83e0e
--- /dev/null
+++ b/examples/demo-styles/form.scss
@@ -0,0 +1,73 @@
+.demo-form {
+  .el-select .el-input {
+    width: 380px;
+  }
+  .el-form {
+    width: 460px;
+  }
+
+  .line {
+    text-align: center;
+  }
+
+  .el-checkbox-group {
+    width: 320px;
+    margin: 0;
+    padding: 0;
+    list-style: none;
+
+    &:after,
+    &:before {
+      content: " ";
+      display: table;
+    }
+    &:after {
+      clear: both;
+      visibility: hidden;
+      font-size: 0;
+      height: 0;
+    }
+
+    .el-checkbox {
+      float: left;
+      width: 160px;
+      padding-right: 20px;
+      margin: 0;
+      padding: 0;
+
+      + .el-checkbox {
+        margin-left: 0;
+      }
+    }
+  }
+  .demo-form-normal {
+    width: 460px;
+  }
+  .demo-form-inline {
+    width: auto;
+
+    .el-input {
+      width: 150px;
+    }
+    > * {
+      margin-right: 10px;
+    }
+  }
+  .demo-ruleForm {
+    width: 460px;
+
+    .el-select .el-input {
+      width: 360px;
+    }
+  }
+  .demo-dynamic {
+    .el-input {
+      margin-right: 10px;
+      width: 270px;
+      vertical-align: top;
+    }
+  }
+  .fr {
+    float: right;
+  }
+}
diff --git a/examples/demo-styles/i18n.scss b/examples/demo-styles/i18n.scss
new file mode 100644
index 00000000000..eabe9ce05b3
--- /dev/null
+++ b/examples/demo-styles/i18n.scss
@@ -0,0 +1,8 @@
+ul.language-list {
+  color: #5e6d82;
+  font-size: 14px;
+  padding-left: 20px;
+  li {
+    line-height: 1.8;
+  }
+}
diff --git a/examples/demo-styles/icon.scss b/examples/demo-styles/icon.scss
new file mode 100644
index 00000000000..3f670b440ef
--- /dev/null
+++ b/examples/demo-styles/icon.scss
@@ -0,0 +1,69 @@
+.demo-icon .source > div > i {
+  color: #606266;
+  margin: 0 20px;
+  font-size: 1.5em;
+  vertical-align: middle;
+}
+
+.demo-icon .source button {
+  margin: 0 20px;
+}
+
+.page-component .content > ul.icon-list {
+  overflow: hidden;
+  list-style: none;
+  padding: 0!important;
+  border: solid 1px #eaeefb;
+  border-radius: 4px;
+}
+.icon-list li {
+  float: left;
+  width: 16.66%;
+  text-align: center;
+  height: 120px;
+  line-height: 120px;
+  color: #666;
+  font-size: 13px;
+  border-right: 1px solid #eee;
+  border-bottom: 1px solid #eee;
+  margin-right: -1px;
+  margin-bottom: -1px;
+
+  &::after {
+    display: inline-block;
+    content: "";
+    height: 100%;
+    vertical-align: middle;
+  }
+
+  span {
+    display: inline-block;
+    line-height: normal;
+    vertical-align: middle;
+    font-family: "Helvetica Neue", Helvetica, "PingFang SC", "Hiragino Sans GB",
+      "Microsoft YaHei", SimSun, sans-serif;
+    color: #99a9bf;
+    transition: color 0.15s linear;
+  }
+
+  i {
+    display: block;
+    font-size: 32px;
+    margin-bottom: 15px;
+    color: #606266;
+    transition: color 0.15s linear;
+  }
+
+  .icon-name {
+    display: inline-block;
+    padding: 0 3px;
+    height: 1em;
+  }
+
+  &:hover {
+    span,
+    i {
+      color: rgb(92, 182, 255);
+    }
+  }
+}
diff --git a/examples/demo-styles/image.scss b/examples/demo-styles/image.scss
new file mode 100644
index 00000000000..40659922358
--- /dev/null
+++ b/examples/demo-styles/image.scss
@@ -0,0 +1,78 @@
+@keyframes dot {
+  0% { width: 0; margin-right: 1em; }
+  100% { width: 1em; margin-right: 0; }
+}
+
+.demo-image {
+  .block {
+    padding: 30px 0;
+    text-align: center;
+    border-right: solid 1px #eff2f6;
+    display: inline-block;
+    width: 20%;
+    box-sizing: border-box;
+    vertical-align: top;
+    &:last-child {
+      border-right: none;
+    }
+  }
+
+  .demonstration {
+    display: block;
+    color: #8492a6;
+    font-size: 14px;
+    margin-bottom: 20px;
+  }
+}
+
+.demo-image__placeholder, .demo-image__error {
+  @extend .demo-image;
+
+  .block {
+    width: 49%;
+  }
+
+  .el-image {
+    width: 300px;
+    height: 200px;
+  }
+
+  .image-slot {
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    width: 100%;
+    height: 100%;
+    background: #f5f7fa;
+    color: #A7A8AD;
+    font-size: 14px;
+  }
+}
+
+.demo-image__placeholder {
+  .dot {
+    animation: dot 2s infinite steps(3, start);
+    overflow: hidden;
+  }
+}
+
+.demo-image__error {
+  .image-slot {
+    font-size: 30px;
+  }
+}
+
+.demo-image__lazy {
+  height: 400px;
+  overflow-y: auto;
+
+  .el-image {
+    display: block;
+    min-height: 200px;
+    margin-bottom: 10px;
+
+    &:last-child {
+      margin-bottom: 0;
+    }
+  }
+}
diff --git a/examples/demo-styles/index.scss b/examples/demo-styles/index.scss
new file mode 100644
index 00000000000..7d88b1adf6f
--- /dev/null
+++ b/examples/demo-styles/index.scss
@@ -0,0 +1,47 @@
+@import "./alert.scss";
+@import "./badge.scss";
+@import "./border.scss";
+@import "./button.scss";
+@import "./calendar.scss";
+@import "./card.scss";
+@import "./carousel.scss";
+@import "./cascader.scss";
+@import "./collapse.scss";
+@import "./color-picker.scss";
+@import "./color.scss";
+@import "./container.scss";
+@import "./date-picker.scss";
+@import "./datetime-picker.scss";
+@import "./dialog.scss";
+@import "./dropdown.scss";
+@import "./form.scss";
+@import "./i18n.scss";
+@import "./icon.scss";
+@import "./input-number.scss";
+@import "./input.scss";
+@import "./layout.scss";
+@import "./loading.scss";
+@import "./menu.scss";
+@import "./pagination.scss";
+@import "./popover.scss";
+@import "./progress.scss";
+@import "./rate.scss";
+@import "./select.scss";
+@import "./slider.scss";
+@import "./switch.scss";
+@import "./table.scss";
+@import "./tag.scss";
+@import "./time-picker.scss";
+@import "./timeline.scss";
+@import "./tooltip.scss";
+@import "./transition.scss";
+@import "./transfer.scss";
+@import "./tree.scss";
+@import "./typography.scss";
+@import "./upload.scss";
+@import "./divider.scss";
+@import "./image.scss";
+@import "./infinite-scroll.scss";
+@import "./avatar.scss";
+@import "./drawer.scss";
+@import "./button-group-enhance.scss";
diff --git a/examples/demo-styles/infinite-scroll.scss b/examples/demo-styles/infinite-scroll.scss
new file mode 100644
index 00000000000..a63f9eb5cd0
--- /dev/null
+++ b/examples/demo-styles/infinite-scroll.scss
@@ -0,0 +1,46 @@
+.infinite-list {
+  height: 300px;
+  padding: 0;
+  margin: 0;
+  list-style: none;
+
+  .infinite-list-item {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    height: 50px;
+    background: #e8f3fe;
+    margin: 10px;
+    color: lighten(#1989fa, 20%);
+    & + .list-item {
+      margin-top: 10px
+    }
+  } 
+}
+
+.infinite-list-wrapper {
+  height: 300px;
+  text-align: center;
+
+  .list{
+    padding: 0;
+    margin: 0;
+    list-style: none;
+  }
+    
+
+  .list-item{
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    height: 50px;
+    background: #fff6f6;
+    color: #ff8484;
+    & + .list-item {
+      margin-top: 10px
+    }
+  }
+}
+   
+
+ 
diff --git a/examples/demo-styles/input-number.scss b/examples/demo-styles/input-number.scss
new file mode 100644
index 00000000000..b85cff7081f
--- /dev/null
+++ b/examples/demo-styles/input-number.scss
@@ -0,0 +1,5 @@
+.demo-block.demo-input-number {
+  .el-input-number + .el-input-number {
+    margin-left: 10px;
+  }
+}
diff --git a/examples/demo-styles/input.scss b/examples/demo-styles/input.scss
new file mode 100644
index 00000000000..88b51b942f5
--- /dev/null
+++ b/examples/demo-styles/input.scss
@@ -0,0 +1,65 @@
+.demo-input {
+  .el-select .el-input {
+    width: 130px;
+  }
+  .el-input {
+    width: 180px;
+  }
+  .el-textarea {
+    width: 414px;
+  }
+  .el-input-group {
+    width: 100%;
+  }
+  .demo-input-size {
+    .el-input {
+      vertical-align: top;
+      margin: 0 10px 10px 0;
+    }
+  }
+  .input-with-select .el-input-group__prepend {
+    background-color: #fff;
+  }
+  .demo-autocomplete {
+    text-align: center;
+
+    .sub-title {
+      margin-bottom: 10px;
+      font-size: 14px;
+      color: #8492a6;
+    }
+
+    .el-col:not(:last-child) {
+      border-right: 1px solid rgba(224, 230, 237, 0.5);
+    }
+
+    .el-autocomplete {
+      text-align: left;
+    }
+  }
+}
+.el-autocomplete-suggestion.my-autocomplete {
+  li {
+    line-height: normal;
+    padding-top: 7px;
+    padding-bottom: 7px;
+
+    .name {
+      text-overflow: ellipsis;
+      overflow: hidden;
+    }
+    .addr {
+      font-size: 12px;
+      color: #b4b4b4;
+    }
+    .highlighted .addr {
+      color: #ddd;
+    }
+  }
+}
+.demo-input-suffix {
+  margin-bottom: 15px;
+  .el-input {
+    margin-right: 15px;
+  }
+}
diff --git a/examples/demo-styles/layout.scss b/examples/demo-styles/layout.scss
new file mode 100644
index 00000000000..df639344fc7
--- /dev/null
+++ b/examples/demo-styles/layout.scss
@@ -0,0 +1,28 @@
+.demo-layout {
+  .el-row {
+    margin-bottom: 20px;
+    &:last-child {
+      margin-bottom: 0;
+    }
+  }
+  .el-col {
+    border-radius: 4px;
+  }
+  .bg-purple-dark {
+    background: #99a9bf;
+  }
+  .bg-purple {
+    background: #d3dce6;
+  }
+  .bg-purple-light {
+    background: #e5e9f2;
+  }
+  .grid-content {
+    border-radius: 4px;
+    min-height: 36px;
+  }
+  .row-bg {
+    padding: 10px 0;
+    background-color: #f9fafc;
+  }
+}
diff --git a/examples/demo-styles/loading.scss b/examples/demo-styles/loading.scss
new file mode 100644
index 00000000000..0fd6e26dc3a
--- /dev/null
+++ b/examples/demo-styles/loading.scss
@@ -0,0 +1,3 @@
+.demo-loading .el-table {
+  border: none;
+}
diff --git a/examples/demo-styles/menu.scss b/examples/demo-styles/menu.scss
new file mode 100644
index 00000000000..3b350216f86
--- /dev/null
+++ b/examples/demo-styles/menu.scss
@@ -0,0 +1,27 @@
+.demo-block.demo-menu {
+  .el-menu-demo {
+    padding-left: 55px;
+  }
+  .el-menu-vertical-demo:not(.el-menu--collapse) {
+    width: 240px;
+    min-height: 400px;
+  }
+  .line {
+    height: 1px;
+    background-color: #e0e6ed;
+    margin: 35px -24px;
+  }
+  h5 {
+    font-size: 14px;
+    color: #8492a6;
+    margin-top: 10px;
+  }
+  .tac {
+    text-align: center;
+
+    .el-menu-vertical-demo {
+      display: inline-block;
+      text-align: left;
+    }
+  }
+}
diff --git a/examples/demo-styles/pagination.scss b/examples/demo-styles/pagination.scss
new file mode 100644
index 00000000000..09f751d66fc
--- /dev/null
+++ b/examples/demo-styles/pagination.scss
@@ -0,0 +1,46 @@
+.demo-pagination .source.first {
+  padding: 0;
+}
+
+.demo-pagination .first .block {
+  padding: 30px 0;
+  text-align: center;
+  border-right: solid 1px #eff2f6;
+  display: inline-block;
+  width: 50%;
+  box-sizing: border-box;
+
+  &:last-child {
+    border-right: none;
+  }
+}
+
+.demo-pagination .first .demonstration {
+  display: block;
+  color: #8492a6;
+  font-size: 14px;
+  margin-bottom: 20px;
+}
+
+.demo-pagination .source.last {
+  padding: 0;
+}
+
+.demo-pagination .last .block {
+  padding: 30px 24px;
+  border-bottom: solid 1px #eff2f6;
+  &:last-child {
+    border-bottom: none;
+  }
+}
+
+.demo-pagination .last .demonstration {
+  font-size: 14px;
+  color: #8492a6;
+  line-height: 44px;
+}
+
+.demo-pagination .last .demonstration + .el-pagination {
+  width: 70%;
+  margin: 5px 20px 0 0;
+}
diff --git a/examples/demo-styles/popover.scss b/examples/demo-styles/popover.scss
new file mode 100644
index 00000000000..ee18df753ef
--- /dev/null
+++ b/examples/demo-styles/popover.scss
@@ -0,0 +1,11 @@
+.demo-block.demo-popover {
+  .el-popover + .el-popover {
+    margin-left: 10px;
+  }
+  .el-input {
+    width: 360px;
+  }
+  .el-button {
+    margin-left: 10px;
+  }
+}
diff --git a/examples/demo-styles/progress.scss b/examples/demo-styles/progress.scss
new file mode 100644
index 00000000000..216c8d8aef1
--- /dev/null
+++ b/examples/demo-styles/progress.scss
@@ -0,0 +1,9 @@
+.demo-block.demo-progress {
+  .el-progress--line {
+    margin-bottom: 15px;
+    width: 350px;
+  }
+  .el-progress--circle {
+    margin-right: 15px;
+  }
+}
diff --git a/examples/demo-styles/rate.scss b/examples/demo-styles/rate.scss
new file mode 100644
index 00000000000..b82b355200e
--- /dev/null
+++ b/examples/demo-styles/rate.scss
@@ -0,0 +1,18 @@
+.demo-rate .block {
+  padding: 30px 0;
+  text-align: center;
+  border-right: solid 1px #eff2f6;
+  display: inline-block;
+  width: 49%;
+  box-sizing: border-box;
+  &:last-child {
+    border-right: none;
+  }
+}
+
+.demo-rate .demonstration {
+  display: block;
+  color: #8492a6;
+  font-size: 14px;
+  margin-bottom: 20px;
+}
diff --git a/examples/demo-styles/select.scss b/examples/demo-styles/select.scss
new file mode 100644
index 00000000000..3d3c8e97fb8
--- /dev/null
+++ b/examples/demo-styles/select.scss
@@ -0,0 +1,3 @@
+.demo-select .el-select {
+  width: 240px;
+}
diff --git a/examples/demo-styles/slider.scss b/examples/demo-styles/slider.scss
new file mode 100644
index 00000000000..1b600a2c79d
--- /dev/null
+++ b/examples/demo-styles/slider.scss
@@ -0,0 +1,24 @@
+.demo-block.demo-slider .source {
+  padding: 0;
+}
+
+.demo-block.demo-slider .block {
+  padding: 30px 24px;
+  overflow: hidden;
+  border-bottom: solid 1px #eff2f6;
+  &:last-child {
+    border-bottom: none;
+  }
+}
+
+.demo-block.demo-slider .demonstration {
+  font-size: 14px;
+  color: #8492a6;
+  line-height: 44px;
+}
+
+.demo-block.demo-slider .demonstration + .el-slider {
+  float: right;
+  width: 70%;
+  margin-right: 20px;
+}
diff --git a/examples/demo-styles/switch.scss b/examples/demo-styles/switch.scss
new file mode 100644
index 00000000000..d62bb64587b
--- /dev/null
+++ b/examples/demo-styles/switch.scss
@@ -0,0 +1,5 @@
+.demo-block.demo-switch {
+  .el-switch {
+    margin: 20px 20px 20px 0;
+  }
+}
diff --git a/examples/demo-styles/table.scss b/examples/demo-styles/table.scss
new file mode 100644
index 00000000000..ccd16e6e6fe
--- /dev/null
+++ b/examples/demo-styles/table.scss
@@ -0,0 +1,23 @@
+.el-table .warning-row {
+  background: oldlace;
+}
+
+.el-table .success-row {
+  background: #f0f9eb;
+}
+
+.demo-table .name-wrapper {
+  display: inline-block;
+}
+
+.demo-table .demo-table-expand {
+  label {
+    width: 90px;
+    color: #99a9bf;
+  }
+  .el-form-item {
+    margin-right: 0;
+    margin-bottom: 0;
+    width: 50%;
+  }
+}
diff --git a/examples/demo-styles/tag.scss b/examples/demo-styles/tag.scss
new file mode 100644
index 00000000000..967d05bddff
--- /dev/null
+++ b/examples/demo-styles/tag.scss
@@ -0,0 +1,34 @@
+.demo-block.demo-tag {
+  .el-tag + .el-tag {
+    margin-left: 10px;
+  }
+
+  .button-new-tag {
+    margin-left: 10px;
+    height: 32px;
+    line-height: 30px;
+    padding-top: 0;
+    padding-bottom: 0;
+  }
+
+  .input-new-tag {
+    width: 90px;
+    margin-left: 10px;
+    vertical-align: bottom;
+  }
+
+  .tag-group {
+    display: flex;
+    align-items: center;
+
+    &__title {
+      width: 45px;
+      font-size: 14px;
+      color: #606266;
+    }
+
+    &+.tag-group  {
+      margin-top: 10px;
+    }
+  }
+}
diff --git a/examples/demo-styles/time-picker.scss b/examples/demo-styles/time-picker.scss
new file mode 100644
index 00000000000..f3c19a6acc7
--- /dev/null
+++ b/examples/demo-styles/time-picker.scss
@@ -0,0 +1,5 @@
+.demo-block {
+  .el-date-editor + .el-date-editor {
+    margin-left: 10px;
+  }
+}
diff --git a/examples/demo-styles/timeline.scss b/examples/demo-styles/timeline.scss
new file mode 100644
index 00000000000..0a50028f023
--- /dev/null
+++ b/examples/demo-styles/timeline.scss
@@ -0,0 +1,6 @@
+.demo-timeline .source .radio {
+  margin-bottom: 20px;
+}
+.demo-timeline .source .radio .el-radio-group {
+  margin-left: 20px;
+}
diff --git a/examples/demo-styles/tooltip.scss b/examples/demo-styles/tooltip.scss
new file mode 100644
index 00000000000..74e3e238b79
--- /dev/null
+++ b/examples/demo-styles/tooltip.scss
@@ -0,0 +1,39 @@
+.demo-tooltip {
+  .el-tooltip + .el-tooltip {
+    margin-left: 15px;
+  }
+  .box {
+    width: 400px;
+
+    .top {
+      text-align: center;
+    }
+
+    .left {
+      float: left;
+      width: 60px;
+    }
+
+    .right {
+      float: right;
+      width: 60px;
+    }
+
+    .bottom {
+      clear: both;
+      text-align: center;
+    }
+
+    .item {
+      margin: 4px;
+    }
+
+    .left .el-tooltip__popper,
+    .right .el-tooltip__popper {
+      padding: 8px 10px;
+    }
+    .el-tooltip {
+      margin-left: 0;
+    }
+  }
+}
diff --git a/examples/demo-styles/transfer.scss b/examples/demo-styles/transfer.scss
new file mode 100644
index 00000000000..a5b49433ff0
--- /dev/null
+++ b/examples/demo-styles/transfer.scss
@@ -0,0 +1,6 @@
+.demo-transfer {
+  .transfer-footer {
+    margin-left: 15px;
+    padding: 6px 5px;
+  }
+}
diff --git a/examples/demo-styles/transition.scss b/examples/demo-styles/transition.scss
new file mode 100644
index 00000000000..c889e2ab6c0
--- /dev/null
+++ b/examples/demo-styles/transition.scss
@@ -0,0 +1,14 @@
+.demo-transition {
+  .transition-box {
+    margin-bottom: 10px;
+    width: 200px;
+    height: 100px;
+    border-radius: 4px;
+    background-color: #2460e0;
+    text-align: center;
+    color: #fff;
+    padding: 40px 20px;
+    margin-right: 20px;
+    box-sizing: border-box;
+  }
+}
diff --git a/examples/demo-styles/tree.scss b/examples/demo-styles/tree.scss
new file mode 100644
index 00000000000..286b0f3bdd3
--- /dev/null
+++ b/examples/demo-styles/tree.scss
@@ -0,0 +1,48 @@
+.demo-tree {
+  .leaf {
+    width: 20px;
+    background: #ddd;
+  }
+
+  .folder {
+    width: 20px;
+    background: #888;
+  }
+
+  .buttons {
+    margin-top: 20px;
+  }
+
+  .filter-tree {
+    margin-top: 20px;
+  }
+
+  .custom-tree-container {
+    display: flex;
+    margin: -24px;
+  }
+
+  .block {
+    flex: 1;
+    padding: 8px 24px 24px;
+
+    &:first-child {
+      border-right: solid 1px #eff2f6;
+    }
+
+    > p {
+      text-align: center;
+      margin: 0;
+      line-height: 4;
+    }
+  }
+
+  .custom-tree-node {
+    flex: 1;
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    font-size: 14px;
+    padding-right: 8px;
+  }
+}
diff --git a/examples/demo-styles/typography.scss b/examples/demo-styles/typography.scss
new file mode 100644
index 00000000000..ff9c0a26149
--- /dev/null
+++ b/examples/demo-styles/typography.scss
@@ -0,0 +1,30 @@
+.demo-typo-size {
+  .color-dark-light {
+    color: #99a9bf;
+  }
+}
+.demo-term-box img {
+  width: 24%;
+  margin: 0 4% 20px 0;
+}
+
+.lineH-left {
+  display: inline-block;
+  height: 80px;
+}
+.lineH-right {
+  display: inline-block;
+  list-style: none;
+  padding: 0 0 0 90px;
+  margin: 0;
+  vertical-align: top;
+}
+.lineH-right li {
+  font-size: 13px;
+  color: #666;
+  height: 20px;
+  line-height: 20px;
+}
+.lineH-right li span {
+  padding-left: 40px;
+}
diff --git a/examples/demo-styles/upload.scss b/examples/demo-styles/upload.scss
new file mode 100644
index 00000000000..7eb6297c7ea
--- /dev/null
+++ b/examples/demo-styles/upload.scss
@@ -0,0 +1,39 @@
+.upload-tip {
+  color: #8492a6;
+  font-size: 12px;
+  margin-top: 7px;
+}
+.demo-block {
+  margin-bottom: 24px;
+
+  .upload-demo {
+    width: 360px;
+  }
+  .avatar-uploader {
+    .el-upload {
+      border: 1px dashed #d9d9d9;
+      border-radius: 6px;
+      cursor: pointer;
+      position: relative;
+      overflow: hidden;
+
+      &:hover,
+      &:focus {
+        border-color: #2460e0;
+      }
+    }
+    .avatar-uploader-icon {
+      font-size: 28px;
+      color: #8c939d;
+      width: 178px;
+      height: 178px;
+      line-height: 178px;
+      text-align: center;
+    }
+    .avatar {
+      width: 178px;
+      height: 178px;
+      display: block;
+    }
+  }
+}
diff --git a/examples/docs/en-US/affix.md b/examples/docs/en-US/affix.md
new file mode 100644
index 00000000000..b0b148f0525
--- /dev/null
+++ b/examples/docs/en-US/affix.md
@@ -0,0 +1 @@
+## Affix
diff --git a/examples/docs/en-US/alert.md b/examples/docs/en-US/alert.md
index 5eb3bdbd9eb..3db4f3284c2 100644
--- a/examples/docs/en-US/alert.md
+++ b/examples/docs/en-US/alert.md
@@ -1,22 +1,3 @@
-<script>
-  export default {
-    methods: {
-      hello() {
-        alert('Hello World!');
-      }
-    }
-  }
-</script>
-<style>
-  .demo-box.demo-alert .el-alert {
-    margin: 20px 0 0;
-  }
-
-  .demo-box.demo-alert .el-alert:first-child {
-    margin: 0;
-  }
-</style>
-
 ## Alert
 
 Displays important alert messages.
@@ -49,6 +30,37 @@ Alert components are non-overlay elements in the page that does not disappear au
 ```
 :::
 
+### Theme
+
+Alert provide two different themes, `light` and `dark`.
+
+:::demo Set `effect` to change theme, default is `light`.
+```html
+<template>
+  <el-alert
+    title="success alert"
+    type="success"
+    effect="dark">
+  </el-alert>
+  <el-alert
+    title="info alert"
+    type="info"
+    effect="dark">
+  </el-alert>
+  <el-alert
+    title="warning alert"
+    type="warning"
+    effect="dark">
+  </el-alert>
+  <el-alert
+    title="error alert"
+    type="error"
+    effect="dark">
+  </el-alert>
+</template>
+```
+:::
+
 ### Customizable close button
 
 Customize the close button as texts or other symbols.
@@ -209,17 +221,19 @@ Description includes a message with more detailed information.
 | Attribute      | Description          | Type      | Accepted Values       | Default  |
 |---------- |-------------- |---------- |--------------------------------  |-------- |
 | title     | title         | string | — | — |
-| type | component type | string | success/warning/info/error | info |
-| description | descriptive text. Can also be passed with the default slot | string | — | — |
-| closable | if closable or not | boolean | — | true |
-| center | whether to center the text | boolean | — | false |
-| close-text | customized close button text | string | — | — |
-| show-icon | if a type icon is displayed | boolean | — | false |
+| type | Component type | string | success/warning/info/error | info |
+| description | Descriptive text. Can also be passed with the default slot | string | — | — |
+| closable | If closable or not | boolean | — | true |
+| center | Whether to center the text | boolean | — | false |
+| close-text | Customized close button text | string | — | — |
+| show-icon | If a type icon is displayed | boolean | — | false |
+| effect | Choose theme  | string | light/dark | light |
 
 ### Slot
 
 | Name | Description |
 |------|--------|
+| — | description |
 | title | content of the Alert title |
 
 ### Events
diff --git a/examples/docs/en-US/avatar.md b/examples/docs/en-US/avatar.md
new file mode 100644
index 00000000000..2923280bb17
--- /dev/null
+++ b/examples/docs/en-US/avatar.md
@@ -0,0 +1,253 @@
+## Avatar avatar
+
+Avatars can be used to represent people or objects. It supports images, Icons, or characters.
+
+### Basic
+
+use `shape` and `size` prop to set avatar's shape and size
+
+:::demo
+
+```html
+<template>
+  <el-row class="demo-avatar demo-basic">
+    <el-col :span="12">
+      <div class="sub-title">circle</div>
+      <div class="demo-basic--circle">
+        <div class="block">
+          <el-avatar :size="50" :src="circleUrl"></el-avatar>
+        </div>
+        <div class="block" v-for="size in sizeList" :key="size">
+          <el-avatar :size="size" :src="circleUrl"></el-avatar>
+        </div>
+      </div>
+    </el-col>
+    <el-col :span="12">
+      <div class="sub-title">square</div>
+      <div class="demo-basic--circle">
+        <div class="block">
+          <el-avatar shape="square" :size="50" :src="squareUrl"></el-avatar>
+        </div>
+        <div class="block" v-for="size in sizeList" :key="size">
+          <el-avatar shape="square" :size="size" :src="squareUrl"></el-avatar>
+        </div>
+      </div>
+    </el-col>
+  </el-row>
+</template>
+<script>
+  export default {
+    data() {
+      return {
+        circleUrl:
+          'https://cube.elemecdn.com/3/7c/3ea6beec64369c2642b92c6726f1epng.png',
+        squareUrl:
+          'https://cube.elemecdn.com/9/c2/f0ee8a3c7c9638a54940382568c9dpng.png',
+        sizeList: ['large', 'medium', 'small'],
+      }
+    },
+  }
+</script>
+```
+
+:::
+
+### Types
+
+It supports images, Icons, or characters
+
+:::demo
+
+```html
+<template>
+  <div class="demo-type">
+    <div>
+      <el-avatar icon="el-icon-user-solid"></el-avatar>
+    </div>
+    <div>
+      <el-avatar
+        src="https://cube.elemecdn.com/0/88/03b0d39583f48206768a7534e55bcpng.png"
+      ></el-avatar>
+    </div>
+    <div>
+      <el-avatar> user </el-avatar>
+    </div>
+  </div>
+</template>
+```
+
+:::
+
+### Tooltip
+
+If `text` or `tooltip` exist, The tooltips can be displayed when the mouse hovers
+
+:::demo
+
+```html
+<template>
+  <div class="demo-type">
+    <div>
+      <el-avatar
+        tooltip="This is a custom tooltip content"
+        icon="el-icon-user-solid"
+      ></el-avatar>
+    </div>
+    <div>
+      <el-avatar
+        text="element"
+        src="https://cube.elemecdn.com/0/88/03b0d39583f48206768a7534e55bcpng.png"
+      ></el-avatar>
+    </div>
+    <div>
+      <el-avatar text="James Gosling" bgColor="#409eff"></el-avatar>
+    </div>
+  </div>
+</template>
+<script>
+  export default {
+    methods: {
+      errorHandler() {
+        return true
+      },
+    },
+  }
+</script>
+```
+
+:::
+
+### Fallback when image load error
+
+fallback when image load error or src is empty
+
+customize the display via the default slot, or by using `text` as a placeholder.
+
+:::demo
+
+```html
+<template>
+  <div class="demo-type">
+    <div>
+      <el-avatar src="https://empty" @error="errorHandler">
+        <img
+          src="https://cube.elemecdn.com/e/fd/0fc7d20532fdaf769a25683617711png.png"
+        />
+      </el-avatar>
+    </div>
+    <div>
+      <el-avatar
+        src="https://empty"
+        @error="errorHandler"
+        text="James Gosling"
+        bgColor="#409eff"
+      ></el-avatar>
+    </div>
+  </div>
+</template>
+<script>
+  export default {
+    methods: {
+      errorHandler() {
+        return true
+      },
+    },
+  }
+</script>
+```
+
+:::
+
+### Custom Text Formatter
+
+When using text as a placeholder, the last two characters are displayed by default, and hover displayed the full text.
+
+You can also customize how to abbreviate it via the `textFormatter` method.
+
+:::demo
+
+```html
+<template>
+  <div class="demo-type">
+    <div>
+      <el-avatar text="James Gosling" bgColor="#409eff"></el-avatar>
+    </div>
+    <div>
+      <el-avatar
+        text="Unassigned"
+        bgColor="#409eff"
+        :text-formatter="(s) => s.slice(0, 1)"
+        :font-size="15"
+      ></el-avatar>
+    </div>
+    <div>
+      <el-avatar
+        text="Linus Torvalds"
+        bgColor="#409eff"
+        :text-formatter="(s) => s.split(' ').map(s=>s[0]).join('')"
+      ></el-avatar>
+    </div>
+  </div>
+</template>
+```
+
+:::
+
+### How the image fit its container
+
+Set how the image fit its container for an image avatar, same as [object-fit](https://developer.mozilla.org/en-US/docs/Web/CSS/object-fit).
+
+:::demo
+
+```html
+<template>
+  <div class="demo-fit">
+    <div class="block" v-for="fit in fits" :key="fit">
+      <span class="title">{{ fit }}</span>
+      <el-avatar shape="square" :size="100" :fit="fit" :src="url"></el-avatar>
+    </div>
+  </div>
+</template>
+<script>
+  export default {
+    data() {
+      return {
+        fits: ['fill', 'contain', 'cover', 'none', 'scale-down'],
+        url:
+          'https://fuss10.elemecdn.com/e/5d/4a731a90594a4af544c0c25941171jpeg.jpeg',
+      }
+    },
+  }
+</script>
+```
+
+:::
+
+### Attributes
+
+| Attribute     | Description                                                                                                                                                                                        | Type          | Accepted Values                            | Default                |
+| ------------- | -------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ------------- | ------------------------------------------ | ---------------------- |
+| icon          | set representation type to Icon, more info on Icon Component                                                                                                                                       | string        |                                            |                        |
+| size          | set avatar size                                                                                                                                                                                    | number/string | number / large / medium / small            | large                  |
+| shape         | set avatar shape                                                                                                                                                                                   | string        | circle / square                            | circle                 |
+| src           | the address of the image for an image avatar                                                                                                                                                       | string        |                                            |                        |
+| srcSet        | A list of one or more strings separated by commas indicating a set of possible image sources for the user agent to use                                                                             | string        |                                            |                        |
+| alt           | This attribute defines an alternative text description of the image                                                                                                                                | string        |                                            |                        |
+| fit           | set how the image fit its container for an image avatar                                                                                                                                            | string        | fill / contain / cover / none / scale-down | cover                  |
+| text          | When images cannot be loaded and no default slot is not used, will take the result of the textFormatter and use it as a text placeholder. will also be used for the default content of the tooltip | string        |                                            |                        |
+| fontSize      | set text placeholders size                                                                                                                                                                         | number        |                                            | 12                     |
+| bgColor       | set background color                                                                                                                                                                               | string        |                                            | #c0c4cc                |
+| textFormatter | format `text` to show the abbreviation in the avatar placeholder, last two characters by default                                                                                                   | function      |                                            | (str) => str.slice(-2) |
+| tooltip       | set tooltip content, if empty, take `text` as the tooltip content.                                                                                                                                 | string        |                                            |                        |
+
+### Events
+
+| Event Name | Description                                                                    | Parameters |
+| ---------- | ------------------------------------------------------------------------------ | ---------- |
+| error      | handler when img load error, return false to prevent default fallback behavior | (e: Event) |
+
+### Slot
+
+| Slot Name | Description              |
+| --------- | ------------------------ |
+| default   | customize avatar content |
diff --git a/examples/docs/en-US/backtop.md b/examples/docs/en-US/backtop.md
new file mode 100644
index 00000000000..faadfe35259
--- /dev/null
+++ b/examples/docs/en-US/backtop.md
@@ -0,0 +1,60 @@
+## Backtop
+
+A button to back to top
+
+### Basic usage
+
+Scroll down to see the bottom-right button.
+:::demo
+
+```html
+<template>
+  Scroll down to see the bottom-right button.
+  <el-backtop target=".page-component__scroll .el-scrollbar__wrap"></el-backtop>
+</template>
+```
+
+:::
+
+### Customizations
+
+Display area is 40px \* 40px.
+:::demo
+
+```html
+<template>
+  Scroll down to see the bottom-right button.
+  <el-backtop target=".page-component__scroll .el-scrollbar__wrap" :bottom="100">
+    <div
+      style="{
+        height: 100%;
+        width: 100%;
+        background-color: #f2f5f6;
+        box-shadow: 0 0 6px rgba(0,0,0, .12);
+        text-align: center;
+        line-height: 40px;
+        color: #1989fa;
+      }"
+    >
+      UP
+    </div>
+  </el-backtop>
+</template>
+```
+
+:::
+
+### Attributes
+
+| Attribute         | Description                                                         | Type            | Accepted Values | Default |
+| ----------------- | ------------------------------------------------------------------- | --------------- | --------------- | ------- |
+| target            | the target to trigger scroll                                        | string          |                 |         |
+| visibility-height | the button will not show until the scroll height reaches this value | number |                 | 200     |
+| right             | right distance                                                      | number |                 | 40      |
+| bottom            | bottom distance                                                     | number |                 | 40      |
+
+### Events
+
+| Event Name | Description         | Parameters  |
+| ---------- | ------------------- | ----------- |
+| click      | triggers when click | click event |
diff --git a/examples/docs/en-US/badge.md b/examples/docs/en-US/badge.md
index 0636dd0efbd..9f9a687d701 100644
--- a/examples/docs/en-US/badge.md
+++ b/examples/docs/en-US/badge.md
@@ -114,27 +114,6 @@ Use a red dot to mark content that needs to be noticed.
 ```
 :::
 
-<style scoped>
-  .share-button {
-    width: 36px;
-    padding: 10px;
-  }
-
-  .mark {
-    margin-top: 8px;
-    line-height: 1;
-    float: right;
-  }
-
-  .clearfix {
-    @utils-clearfix;
-  }
-
-  .item {
-    margin-right: 40px;
-  }
-</style>
-
 ### Attributes
 | Attribute     | Description     | Type            | Accepted Values       | Default |
 |-------------  |---------------- |---------------- |---------------------- |-------- |
diff --git a/examples/docs/en-US/border.md b/examples/docs/en-US/border.md
new file mode 100644
index 00000000000..540a522b26b
--- /dev/null
+++ b/examples/docs/en-US/border.md
@@ -0,0 +1,135 @@
+<script>
+  import bus from '../../bus';
+  import { ACTION_USER_CONFIG_UPDATE } from '../../components/theme/constant.js';
+  const varMap = {
+    '$--box-shadow-light': 'boxShadowLight',
+    '$--box-shadow-base': 'boxShadowBase',
+    '$--border-radius-base': 'borderRadiusBase',
+    '$--border-radius-small': 'borderRadiusSmall'
+  };
+  const original = {
+    boxShadowLight: '0 2px 12px 0 rgba(0, 0, 0, 0.1)',
+    boxShadowBase: '0 2px 4px rgba(0, 0, 0, .12), 0 0 6px rgba(0, 0, 0, .04)',
+    borderRadiusBase: '4px',
+    borderRadiusSmall: '2px'
+  }
+  export default {
+    created() {
+      bus.$on(ACTION_USER_CONFIG_UPDATE, this.setGlobal);
+    },
+    mounted() {
+      this.setGlobal();
+    },
+    methods: {
+      setGlobal() {
+        if (window.userThemeConfig) {
+          this.global = window.userThemeConfig.global;
+        }
+      }
+    },
+    data() {
+      return {
+        global: {},
+        boxShadowLight: '',
+        boxShadowBase: '',
+        borderRadiusBase: '',
+        borderRadiusSmall: ''
+      }
+    },
+    watch: {
+      global: {
+        immediate: true,
+        handler(value) {
+          Object.keys(varMap).forEach((c) => {
+            if (value[c]) {
+              this[varMap[c]] = value[c]
+            } else {
+              this[varMap[c]] = original[varMap[c]]
+            }
+          });
+        }
+      }
+    }
+  }
+</script>
+
+## Border
+
+We standardize the borders that can be used in buttons, cards, pop-ups and other components.
+
+### Border
+
+There are few border styles to choose.
+
+<table class="demo-border">
+  <tbody>
+    <tr>
+      <td class="text">Name</td>
+      <td class="text">Thickness</td>
+      <td class="line">Demo</td>
+    </tr>
+    <tr>
+      <td class="text">Solid</td>
+      <td class="text">1px</td>
+      <td class="line">
+        <div></div>
+      </td>
+    </tr>
+    <tr>
+      <td class="text">Dashed</td>
+      <td class="text">2px</td>
+      <td class="line">
+        <div class="dashed"></div>
+      </td>
+    </tr>
+  </tbody>
+</table>
+
+### Radius
+
+There are few radius styles to choose.
+
+<el-row :gutter="12" class="demo-radius">
+  <el-col :span="6" :xs="{span: 12}">
+    <div class="title">No Radius</div>
+    <div class="value">border-radius: 0px</div>
+    <div class="radius"></div>
+  </el-col>
+  <el-col :span="6" :xs="{span: 12}">
+    <div class="title">Small Radius</div>
+    <div class="value">border-radius: {{borderRadiusSmall}}</div>
+    <div 
+      class="radius" 
+      :style="{ borderRadius: borderRadiusSmall }"
+    ></div>
+  </el-col>
+  <el-col :span="6" :xs="{span: 12}">
+    <div class="title">Large Radius</div>
+    <div class="value">border-radius: {{borderRadiusBase}}</div>
+    <div 
+      class="radius"
+      :style="{ borderRadius: borderRadiusBase }"
+    ></div>
+  </el-col>
+  <el-col :span="6" :xs="{span: 12}">
+    <div class="title">Round Radius</div>
+    <div class="value">border-radius: 30px</div>
+    <div class="radius radius-30"></div>
+  </el-col>
+</el-row>
+
+### Shadow
+
+There are few shadow styles to choose.
+
+<div 
+class="demo-shadow"
+:style="{ boxShadow: boxShadowBase }"
+></div>
+<span class="demo-shadow-text">Basic Shadow box-shadow: {{boxShadowBase}}</span>
+
+<div 
+class="demo-shadow"
+:style="{ boxShadow: boxShadowLight }"
+></div>
+<span class="demo-shadow-text">Light Shadow box-shadow: {{boxShadowLight}}</span>
diff --git a/examples/docs/en-US/button-group-enhance.md b/examples/docs/en-US/button-group-enhance.md
new file mode 100644
index 00000000000..188c81b7813
--- /dev/null
+++ b/examples/docs/en-US/button-group-enhance.md
@@ -0,0 +1 @@
+## ButtonGroupEnhance
diff --git a/examples/docs/en-US/button.md b/examples/docs/en-US/button.md
index 6bad26ba809..9c00fff0eb7 100644
--- a/examples/docs/en-US/button.md
+++ b/examples/docs/en-US/button.md
@@ -1,27 +1,3 @@
-<style>
-  .demo-box.demo-button {
-    .el-row {
-      margin-bottom: 20px;
-
-      &:last-child {
-        margin-bottom: 0;
-      }
-    }
-    .el-button + .el-button {
-      margin-left: 10px;
-    }
-    .el-button-group {
-      .el-button + .el-button {
-        margin-left: 0;
-      }
-
-      & + .el-button-group {
-        margin-left: 10px;
-      }
-    }
-  }
-</style>
-
 ## Button
 
 Commonly used button.
diff --git a/examples/docs/en-US/calendar.md b/examples/docs/en-US/calendar.md
new file mode 100644
index 00000000000..4516c59ee7a
--- /dev/null
+++ b/examples/docs/en-US/calendar.md
@@ -0,0 +1,66 @@
+## Calendar
+
+Display date.
+
+### Basic
+
+:::demo Set `value` to specify the currently displayed month. If `value` is not specified, current month is displayed. `value` supports two-way binding.
+```html
+<el-calendar v-model="value">
+</el-calendar>
+
+<script>
+  export default {
+    data() {
+      return {
+        value: new Date()
+      }
+    }
+  }
+</script>
+```
+:::
+
+### Custom Content
+
+:::demo Customize what is displayed in the calendar cell by setting `scoped-slot` named `dateCell`. In `scoped-slot` you can get the date (the date of the current cell), data (including the type, isSelected, day attribute). For details, please refer to the API documentation below.
+```html
+<el-calendar>
+  <!-- Use 2.5 slot syntax. If you use Vue 2.6, please use new slot syntax-->
+  <template
+    slot="dateCell"
+    slot-scope="{date, data}">
+    <p :class="data.isSelected ? 'is-selected' : ''">
+      {{ data.day.split('-').slice(1).join('-') }} {{ data.isSelected ? '✔️' : ''}}
+    </p>
+  </template>
+</el-calendar>
+<style>
+  .is-selected {
+    color: #1989FA;
+  }
+</style>
+```
+:::
+
+### Range
+
+:::demo Set the `range` attribute to specify the display range of the calendar. Start time must be Monday, end time must be Sunday, and the time span cannot exceed two months.
+```html
+<el-calendar :range="['2019-03-04', '2019-03-24']">
+</el-calendar>
+```
+:::
+
+### Attributes
+| Attribute       | Description        | Type      | Accepted Values       | Default  |
+|-----------------|------------------- |---------- |---------------------- |--------- |
+| value / v-model | binding value      | Date/string/number | —            | —        |
+| range           | time range, including start time and end time. Start time must be start day of week, end time must be end day of week, the time span cannot exceed two months. | Array  | —  | —  |
+| first-day-of-week | fisrt day of week| Number    | 1 to 7                |  1       |
+
+### dateCell scoped slot 参数
+| Attribute       | Description   | Type      | Accepted Values       | Default  |
+|-----------------|-------------- |---------- |---------------------- |--------- |
+| date            | date the cell represents  | Date      | —                     | —        |
+| data            | { type, isSelected, day}. `type` indicates which month the date belongs, optional values are prev-month, current-month, next-month; `isSelected` indicates whether the date is selected; `day` is the formatted date in the format yyyy-MM-dd    | Object      | —           | —      |
diff --git a/examples/docs/en-US/card.md b/examples/docs/en-US/card.md
index d657fc85e7c..0abfb460066 100644
--- a/examples/docs/en-US/card.md
+++ b/examples/docs/en-US/card.md
@@ -1,51 +1,3 @@
-<script>
-  import dateUtil from 'main/utils/date'
-  export default {
-    data() {
-      return {
-        currentDate: dateUtil.format(new Date(), 'yyyy-MM-dd HH:mm')
-      };
-    }
-  }
-</script>
-
-<style scoped>
-  .text {
-    font-size: 14px;
-  }
-
-  .time {
-    font-size: 13px;
-    color: #999;
-  }
-
-  .bottom {
-    margin-top: 13px;
-    line-height: 12px;
-  }
-
-  .item {
-    margin-bottom: 18px;
-  }
-
-  .button {
-    padding: 0;
-    float: right;
-  }
-
-  .image {
-    width: 100%;
-    display: block;
-  }
-
-  .clearfix {
-    @utils-clearfix;
-  }
-
-  .box-card {
-    width: 480px;
-  }
-</style>
 ## Card
 Integrate information in a card container.
 
@@ -127,12 +79,12 @@ Display richer content by adding some configs.
 <el-row>
   <el-col :span="8" v-for="(o, index) in 2" :key="o" :offset="index > 0 ? 2 : 0">
     <el-card :body-style="{ padding: '0px' }">
-      <img src="~examples/assets/images/hamburger.png" class="image">
+      <img src="https://shadow.elemecdn.com/app/element/hamburger.9cf7b091-55e9-11e9-a976-7f4d0b07eef6.png" class="image">
       <div style="padding: 14px;">
         <span>Yummy hamburger</span>
         <div class="bottom clearfix">
           <time class="time">{{ currentDate }}</time>
-          <el-button type="text" class="button">Operating button</el-button>
+          <el-button type="text" class="button">Operating</el-button>
         </div>
       </div>
     </el-card>
diff --git a/examples/docs/en-US/carousel.md b/examples/docs/en-US/carousel.md
index 8d391945163..36ed9f98054 100644
--- a/examples/docs/en-US/carousel.md
+++ b/examples/docs/en-US/carousel.md
@@ -1,64 +1,3 @@
-<script>
-  export default {
-    mounted() {
-      this.$nextTick(() => {
-        const demos = document.querySelectorAll('.source');
-        demos[0].style.padding = '0';
-        demos[0].className += ' small';
-        demos[3].className += ' medium';
-      });
-    }
-  }
-</script>
-<style>
-  .demo-carousel .block {
-    padding: 30px;
-    text-align: center;
-    border-right: solid 1px #EFF2F6;
-    display: inline-block;
-    width: 50%;
-    box-sizing: border-box;
-    &:last-child {
-      border-right: none;
-    }
-  }
-
-  .demo-carousel .demonstration {
-    display: block;
-    color: #8492a6;
-    font-size: 14px;
-    margin-bottom: 20px;
-  }
-
-  .demo-carousel .el-carousel__container {
-    text-align: center;
-  }
-
-  .demo-carousel .el-carousel__item {
-    h3 {
-      color: #fff;
-      font-size: 18px;
-      line-height: 300px;
-      margin: 0;
-    }
-    &:nth-child(2n) {
-      background-color: #99a9bf;
-    }
-    &:nth-child(2n+1) {
-      background-color: #d3dce6;
-    }
-  }
-
-  .demo-carousel .small h3 {
-    font-size: 14px;
-    line-height: 150px;
-  }
-
-  .demo-carousel .medium h3 {
-    font-size: 14px;
-    line-height: 200px;
-  }
-</style>
 ## Carousel
 
 Loop a series of images or texts in a limited space
@@ -72,7 +11,7 @@ Loop a series of images or texts in a limited space
     <span class="demonstration">Switch when indicator is hovered (default)</span>
     <el-carousel height="150px">
       <el-carousel-item v-for="item in 4" :key="item">
-        <h3>{{ item }}</h3>
+        <h3 class="small">{{ item }}</h3>
       </el-carousel-item>
     </el-carousel>
   </div>
@@ -80,7 +19,7 @@ Loop a series of images or texts in a limited space
     <span class="demonstration">Switch when indicator is clicked</span>
     <el-carousel trigger="click" height="150px">
       <el-carousel-item v-for="item in 4" :key="item">
-        <h3>{{ item }}</h3>
+        <h3 class="small">{{ item }}</h3>
       </el-carousel-item>
     </el-carousel>
   </div>
@@ -183,7 +122,7 @@ When a page is wide enough but has limited height, you can activate card mode fo
 <template>
   <el-carousel :interval="4000" type="card" height="200px">
     <el-carousel-item v-for="item in 6" :key="item">
-      <h3>{{ item }}</h3>
+      <h3 class="medium">{{ item }}</h3>
     </el-carousel-item>
   </el-carousel>
 </template>
@@ -208,6 +147,38 @@ When a page is wide enough but has limited height, you can activate card mode fo
 ```
 :::
 
+By default, `direction` is `horizontal`. Let carousel be displayed in the vertical direction by setting `direction` to `vertical`.
+
+:::demo
+```html
+<template>
+  <el-carousel height="200px" direction="vertical" :autoplay="false">
+    <el-carousel-item v-for="item in 4" :key="item">
+      <h3 class="medium">{{ item }}</h3>
+    </el-carousel-item>
+  </el-carousel>
+</template>
+
+<style>
+  .el-carousel__item h3 {
+    color: #475669;
+    font-size: 14px;
+    opacity: 0.75;
+    line-height: 200px;
+    margin: 0;
+  }
+  
+  .el-carousel__item:nth-child(2n) {
+    background-color: #99a9bf;
+  }
+  
+  .el-carousel__item:nth-child(2n+1) {
+    background-color: #d3dce6;
+  }
+</style>
+```
+:::
+
 ### Carousel Attributes
 | Attribute      | Description          | Type      | Accepted Values       | Default  |
 |---------- |-------------- |---------- |--------------------------------  |-------- |
@@ -220,6 +191,7 @@ When a page is wide enough but has limited height, you can activate card mode fo
 | arrow | when arrows are shown | string | always/hover/never | hover |
 | type | type of the Carousel | string | card | — |
 | loop | display the items in loop | boolean | - | true |
+| direction | display direction | string | horizontal/vertical | horizontal |
 
 ### Carousel Events
 | Event Name | Description | Parameters |
diff --git a/examples/docs/en-US/cascader.md b/examples/docs/en-US/cascader.md
index b063a1d7dd1..4761aaa8061 100644
--- a/examples/docs/en-US/cascader.md
+++ b/examples/docs/en-US/cascader.md
@@ -1,18 +1,34 @@
+## Cascader
+
+If the options have a clear hierarchical structure, Cascader can be used to view and select them.
+
+### Basic usage
+
+There are two ways to expand child option items.
+
+:::demo Assigning the `options` attribute to an array of options renders a Cascader. The `props.expandTrigger` attribute defines how child options are expanded.
+```html
+<div class="block">
+  <span class="demonstration">Child options expand when clicked (default)</span>
+  <el-cascader
+    v-model="value"
+    :options="options"
+    @change="handleChange"></el-cascader>
+</div>
+<div class="block">
+  <span class="demonstration">Child options expand when hovered</span>
+  <el-cascader
+    v-model="value"
+    :options="options"
+    :props="{ expandTrigger: 'hover' }"
+    @change="handleChange"></el-cascader>
+</div>
+
 <script>
   export default {
     data() {
       return {
-        options2: [{
-          label: 'California',
-          cities: []
-        }, {
-          label: 'Florida',
-          cities: []
-        }],
-        props: {
-          value: 'label',
-          children: 'cities'
-        },
+        value: [],
         options: [{
           value: 'guide',
           label: 'Guide',
@@ -207,104 +223,26 @@
             value: 'docs',
             label: 'Design Documentation'
           }]
-        }],
-        optionsWithDisabled: [],
-        selectedOptions: [],
-        selectedOptions2: [],
-        selectedOptions3: ['component', 'data', 'tag']
+        }]
       };
     },
-    created() {
-      this.optionsWithDisabled = JSON.parse(JSON.stringify(this.options));
-      this.optionsWithDisabled[0].disabled = true;
-    },
-    mounted() {
-      this.$nextTick(() => {
-        const demos = document.querySelectorAll('.source');
-        demos[0].style.padding = '0';
-        demos[demos.length - 1].style.padding = '0';
-      });
-    },
     methods: {
-      handleItemChange(val) {
-        console.log('active item:', val);
-        setTimeout(_ => {
-          if (val.indexOf('California') > -1 && !this.options2[0].cities.length) {
-            this.options2[0].cities = [{
-              label: 'Los Angeles'
-            }];
-          } else if (val.indexOf('Florida') > -1 && !this.options2[1].cities.length) {
-            this.options2[1].cities = [{
-              label: 'Orlando'
-            }];
-          }
-        }, 300);
-      },
       handleChange(value) {
         console.log(value);
       }
     }
   };
 </script>
+```
+:::
 
-<style>
-  .demo-cascader {
-    .el-cascader {
-      width: 222px;
-    }
-  }
-  .demo-cascader-size {
-    .el-cascader {
-      vertical-align: top;
-      margin-right: 15px;
-    }
-  }
-  .demo-cascader .block {
-    padding: 30px 0;
-    text-align: center;
-    border-right: solid 1px #EFF2F6;
-    display: inline-block;
-    width: 50%;
-    box-sizing: border-box;
-    &:last-child {
-      border-right: none;
-    }
-  }
-  .demo-cascader .demonstration {
-    display: block;
-    color: #8492a6;
-    font-size: 14px;
-    margin-bottom: 20px;
-  }
-</style>
-
-## Cascader
-
-If the options have a clear hierarchical structure, Cascader can be used to view and select them.
-
-### Basic usage
+### Disabled option
 
-There are two ways to expand child option items.
+Disable an option by setting a `disabled` field in the option object.
 
-:::demo Assigning the `options` attribute to an array of options renders a Cascader. The `expand-trigger` attribute defines how child options are expanded. This example also demonstrates the `change` event, whose parameter is the value of Cascader, an array made up of the values of each selected level.
+:::demo In this example, the first item in `options` array has a `disabled: true` field, so it is disabled. By default, Cascader checks the `disabled` field in each option object; if you are using another field name to indicate whether an option is disabled, you can assign it in the `props.disabled` attribute (see the API table below for details). And of course, field name `value`, `label` and `children` can also be customized in the same way.
 ```html
-<div class="block">
-  <span class="demonstration">Child options expand when clicked (default)</span>
-  <el-cascader
-    :options="options"
-    v-model="selectedOptions"
-    @change="handleChange">
-  </el-cascader>
-</div>
-<div class="block">
-  <span class="demonstration">Child options expand when hovered</span>
-  <el-cascader
-    expand-trigger="hover"
-    :options="options"
-    v-model="selectedOptions2"
-    @change="handleChange">
-  </el-cascader>
-</div>
+<el-cascader :options="options"></el-cascader>
 
 <script>
   export default {
@@ -313,6 +251,7 @@ There are two ways to expand child option items.
         options: [{
           value: 'guide',
           label: 'Guide',
+          disabled: true,
           children: [{
             value: 'disciplines',
             label: 'Disciplines',
@@ -504,38 +443,29 @@ There are two ways to expand child option items.
             value: 'docs',
             label: 'Design Documentation'
           }]
-        }],
-        selectedOptions: [],
-        selectedOptions2: []
+        }]
       };
-    },
-    methods: {
-      handleChange(value) {
-        console.log(value);
-      }
     }
   };
 </script>
 ```
 :::
 
-### Disabled option
+### Clearable
 
-Disable an option by setting a `disabled` field in the option object.
+Set `clearable` attribute for `el-cascader` and a clear icon will appear when selected and hovered
 
-:::demo In this example, the first item in `options` array has a `disabled: true` field, so it is disabled. By default, Cascader checks the `disabled` field in each option object; if you are using another field name to indicate whether an option is disabled, you can assign it in the `props` attribute (see the API table below for details). And of course, field name `value`, `label` and `children` can also be customized in the same way.
+:::demo
 ```html
-<el-cascader
-  :options="optionsWithDisabled"
-></el-cascader>
+<el-cascader :options="options" clearable></el-cascader>
+
 <script>
   export default {
     data() {
       return {
-        optionsWithDisabled: [{
+        options: [{
           value: 'guide',
           label: 'Guide',
-          disabled: true,
           children: [{
             value: 'disciplines',
             label: 'Disciplines',
@@ -728,9 +658,9 @@ Disable an option by setting a `disabled` field in the option object.
             label: 'Design Documentation'
           }]
         }]
-      };
+      }
     }
-  };
+  }
 </script>
 ```
 :::
@@ -741,10 +671,7 @@ The input can display only the last level instead of all levels.
 
 :::demo The `show-all-levels` attribute defines if all levels are displayed. If it is `false`, only the last level is displayed.
 ```html
-<el-cascader
-    :options="options"
-    :show-all-levels="false"
-></el-cascader>
+<el-cascader :options="options" :show-all-levels="false"></el-cascader>
 <script>
   export default {
     data() {
@@ -951,14 +878,131 @@ The input can display only the last level instead of all levels.
 ```
 :::
 
-### With default value
+### Multiple Selection
 
-:::demo The default value can be defined with an array.
+Set `props.multiple = true` to use multiple selection.
+
+:::demo When using multiple selection, all selected tags will display by default, You can set `collapse-tags = true` to fold selected tags.
 ```html
-<el-cascader
-  :options="options"
-  v-model="selectedOptions3"
-></el-cascader>
+<div class="block">
+  <span class="demonstration">Display all tags (default)</span>
+  <el-cascader
+    :options="options"
+    :props="props"
+    clearable></el-cascader>
+</div>
+<div class="block">
+  <span class="demonstration">Collapse tags</span>
+  <el-cascader
+    :options="options"
+    :props="props"
+    collapse-tags
+    clearable></el-cascader>
+</div>
+
+<script>
+  export default {
+    data() {
+      return {
+        props: { multiple: true },
+        options: [{
+          value: 1,
+          label: 'Asia',
+          children: [{
+            value: 2,
+            label: 'China',
+            children: [
+              { value: 3, label: 'Beijing' },
+              { value: 4, label: 'Shanghai' },
+              { value: 5, label: 'Hangzhou' }
+            ]
+          }, {
+            value: 6,
+            label: 'Japan',
+            children: [
+              { value: 7, label: 'Tokyo' },
+              { value: 8, label: 'Osaka' },
+              { value: 9, label: 'Kyoto' }
+            ]
+          }, {
+            value: 10,
+            label: 'Korea',
+            children: [
+              { value: 11, label: 'Seoul' },
+              { value: 12, label: 'Busan' },
+              { value: 13, label: 'Taegu' }
+            ]
+          }]
+        }, {
+          value: 14,
+          label: 'Europe',
+          children: [{
+            value: 15,
+            label: 'France',
+            children: [
+              { value: 16, label: 'Paris' },
+              { value: 17, label: 'Marseille' },
+              { value: 18, label: 'Lyon' }
+            ]
+          }, {
+            value: 19,
+            label: 'UK',
+            children: [
+              { value: 20, label: 'London' },
+              { value: 21, label: 'Birmingham' },
+              { value: 22, label: 'Manchester' }
+            ]
+          }]
+        }, {
+          value: 23,
+          label: 'North America',
+          children: [{
+            value: 24,
+            label: 'US',
+            children: [
+              { value: 25, label: 'New York' },
+              { value: 26, label: 'Los Angeles' },
+              { value: 27, label: 'Washington' }
+            ]
+          }, {
+            value: 28,
+            label: 'Canada',
+            children: [
+              { value: 29, label: 'Toronto' },
+              { value: 30, label: 'Montreal' },
+              { value: 31, label: 'Ottawa' }
+            ]
+          }]
+        }]
+      };
+    }
+  };
+</script>
+```
+:::
+
+
+### Select any level of options
+
+In single selection, only the leaf nodes can be checked, and in multiple selection, check parent nodes will lead to leaf nodes be checked eventually. When enable this feature, it can make parent and child nodes unlinked and you can select any level of options.
+
+:::demo Set `props.checkStrictly = true` to make checked state of a node not affects its parent nodes and child nodes, and then you can select any level of options.
+```html
+<div class="block">
+  <span class="demonstration">Select any level of options (Single selection)</span>
+  <el-cascader
+    :options="options"
+    :props="{ checkStrictly: true }"
+    clearable></el-cascader>
+</div>
+<div class="block">
+  <span class="demonstration">Select any level of options (Multiple selection)</span>
+  <el-cascader
+    :options="options"
+    :props="{ multiple: true, checkStrictly: true }"
+    clearable></el-cascader>
+</div>
+
 <script>
   export default {
     data() {
@@ -1157,8 +1201,7 @@ The input can display only the last level instead of all levels.
             value: 'docs',
             label: 'Design Documentation'
           }]
-        }],
-        selectedOptions3: ['component', 'data', 'tag']
+        }]
       };
     }
   };
@@ -1166,16 +1209,65 @@ The input can display only the last level instead of all levels.
 ```
 :::
 
-### Change on select
+### Dynamic loading
 
-Parent options can also be selected.
+Dynamic load its child nodes when checked a node.
 
-:::demo By default only the options in the last level can be selected. By assigning `change-on-select` to `true`, options in parent levels can also be selected.
+:::demo Set `lazy = true` to use dynamic loading, and you have to specify how to load the data source by `lazyload`. There are two parameters of `lazyload`,the first parameter `node` is the node currently clicked, and the `resolve` is a callback that indicate loading is finished which must invoke. To display the status of node more accurately, you can add a `leaf` field (can be modified by `props.leaf`) to indicate whether it is a leaf node. Otherwise, it will be inferred by if has any child nodes.
 ```html
-<el-cascader
-  :options="options"
-  change-on-select
-></el-cascader>
+<el-cascader :props="props"></el-cascader>
+
+<script>
+  let id = 0;
+
+  export default {
+    data() {
+      return {
+        props: {
+          lazy: true,
+          lazyLoad (node, resolve) {
+            const { level } = node;
+            setTimeout(() => {
+              const nodes = Array.from({ length: level + 1 })
+                .map(item => ({
+                  value: ++id,
+                  label: `Option - ${id}`,
+                  leaf: level >= 2
+                }));
+              // Invoke `resolve` callback to return the child nodes data and indicate the loading is finished.
+              resolve(nodes);
+            }, 1000);
+          }
+        }
+      };
+    }
+  };
+</script>
+```
+:::
+
+### Filterable
+
+Search and select options with a keyword.
+
+:::demo Adding `filterable` to `el-cascader` enables filtering. Cascader will match nodes whose label or parent's label (according to `show-all-levels`) includes input keyword. Of course, you can customize search logic by `filter-method` which accepts a function, the first parameter is `node`, the second is `keyword`, and need return a boolean value indicating whether it hits.
+```html
+<div class="block">
+  <span class="demonstration">Filterable (Single selection)</span>
+  <el-cascader
+    placeholder="Try searchingL Guide"
+    :options="options"
+    filterable></el-cascader>
+</div>
+<div class="block">
+  <span class="demonstration">Filterable (Multiple selection)</span>
+  <el-cascader
+    placeholder="Try searchingL Guide"
+    :options="options"
+    :props="{ multiple: true }"
+    filterable></el-cascader>
+</div>
+
 <script>
   export default {
     data() {
@@ -1382,80 +1474,232 @@ Parent options can also be selected.
 ```
 :::
 
-### Dynamically load child options
+### Custom option content
 
-Load child options when their parent option is clicked or hovered over.
+You can customize the content of cascader node.
 
-:::demo In this example, the options array does not have data of cities when initialized. With the `active-item-change` event, you can load the cities of a specific state dynamically. Besides, this example also demonstrates how `props` is used.
+:::demo You can customize the content of cascader node by `scoped slot`. You'll have access to `node` and `data` in the scope,  standing for the Node object and node data of the current node respectively。
 ```html
-<el-cascader
-  :options="options2"
-  @active-item-change="handleItemChange"
-  :props="props"
-></el-cascader>
+<el-cascader :options="options">
+  <template slot-scope="{ node, data }">
+    <span>{{ data.label }}</span>
+    <span v-if="!node.isLeaf"> ({{ data.children.length }}) </span>
+  </template>
+</el-cascader>
 
 <script>
   export default {
     data() {
       return {
-        options2: [{
-          label: 'California',
-          cities: []
+        options: [{
+          value: 'guide',
+          label: 'Guide',
+          children: [{
+            value: 'disciplines',
+            label: 'Disciplines',
+            children: [{
+              value: 'consistency',
+              label: 'Consistency'
+            }, {
+              value: 'feedback',
+              label: 'Feedback'
+            }, {
+              value: 'efficiency',
+              label: 'Efficiency'
+            }, {
+              value: 'controllability',
+              label: 'Controllability'
+            }]
+          }, {
+            value: 'navigation',
+            label: 'Navigation',
+            children: [{
+              value: 'side nav',
+              label: 'Side Navigation'
+            }, {
+              value: 'top nav',
+              label: 'Top Navigation'
+            }]
+          }]
         }, {
-          label: 'Florida',
-          cities: []
-        }],
-        props: {
-          value: 'label',
-          children: 'cities'
-        }
-      };
-    },
-
-    methods: {
-      handleItemChange(val) {
-        console.log('active item:', val);
-        setTimeout(_ => {
-          if (val.indexOf('California') > -1 && !this.options2[0].cities.length) {
-            this.options2[0].cities = [{
-              label: 'Los Angeles'
-            }];
-          } else if (val.indexOf('Florida') > -1 && !this.options2[1].cities.length) {
-            this.options2[1].cities = [{
-              label: 'Orlando'
-            }];
-          }
-        }, 300);
+          value: 'component',
+          label: 'Component',
+          children: [{
+            value: 'basic',
+            label: 'Basic',
+            children: [{
+              value: 'layout',
+              label: 'Layout'
+            }, {
+              value: 'color',
+              label: 'Color'
+            }, {
+              value: 'typography',
+              label: 'Typography'
+            }, {
+              value: 'icon',
+              label: 'Icon'
+            }, {
+              value: 'button',
+              label: 'Button'
+            }]
+          }, {
+            value: 'form',
+            label: 'Form',
+            children: [{
+              value: 'radio',
+              label: 'Radio'
+            }, {
+              value: 'checkbox',
+              label: 'Checkbox'
+            }, {
+              value: 'input',
+              label: 'Input'
+            }, {
+              value: 'input-number',
+              label: 'InputNumber'
+            }, {
+              value: 'select',
+              label: 'Select'
+            }, {
+              value: 'cascader',
+              label: 'Cascader'
+            }, {
+              value: 'switch',
+              label: 'Switch'
+            }, {
+              value: 'slider',
+              label: 'Slider'
+            }, {
+              value: 'time-picker',
+              label: 'TimePicker'
+            }, {
+              value: 'date-picker',
+              label: 'DatePicker'
+            }, {
+              value: 'datetime-picker',
+              label: 'DateTimePicker'
+            }, {
+              value: 'upload',
+              label: 'Upload'
+            }, {
+              value: 'rate',
+              label: 'Rate'
+            }, {
+              value: 'form',
+              label: 'Form'
+            }]
+          }, {
+            value: 'data',
+            label: 'Data',
+            children: [{
+              value: 'table',
+              label: 'Table'
+            }, {
+              value: 'tag',
+              label: 'Tag'
+            }, {
+              value: 'progress',
+              label: 'Progress'
+            }, {
+              value: 'tree',
+              label: 'Tree'
+            }, {
+              value: 'pagination',
+              label: 'Pagination'
+            }, {
+              value: 'badge',
+              label: 'Badge'
+            }]
+          }, {
+            value: 'notice',
+            label: 'Notice',
+            children: [{
+              value: 'alert',
+              label: 'Alert'
+            }, {
+              value: 'loading',
+              label: 'Loading'
+            }, {
+              value: 'message',
+              label: 'Message'
+            }, {
+              value: 'message-box',
+              label: 'MessageBox'
+            }, {
+              value: 'notification',
+              label: 'Notification'
+            }]
+          }, {
+            value: 'navigation',
+            label: 'Navigation',
+            children: [{
+              value: 'menu',
+              label: 'NavMenu'
+            }, {
+              value: 'tabs',
+              label: 'Tabs'
+            }, {
+              value: 'breadcrumb',
+              label: 'Breadcrumb'
+            }, {
+              value: 'dropdown',
+              label: 'Dropdown'
+            }, {
+              value: 'steps',
+              label: 'Steps'
+            }]
+          }, {
+            value: 'others',
+            label: 'Others',
+            children: [{
+              value: 'dialog',
+              label: 'Dialog'
+            }, {
+              value: 'tooltip',
+              label: 'Tooltip'
+            }, {
+              value: 'popover',
+              label: 'Popover'
+            }, {
+              value: 'card',
+              label: 'Card'
+            }, {
+              value: 'carousel',
+              label: 'Carousel'
+            }, {
+              value: 'collapse',
+              label: 'Collapse'
+            }]
+          }]
+        }, {
+          value: 'resource',
+          label: 'Resource',
+          children: [{
+            value: 'axure',
+            label: 'Axure Components'
+          }, {
+            value: 'sketch',
+            label: 'Sketch Templates'
+          }, {
+            value: 'docs',
+            label: 'Design Documentation'
+          }]
+        }]
       }
     }
-  };
+  }
 </script>
 ```
 :::
 
-### Filterable
+### Cascader panel
 
-Search and select options with a keyword.
+`CascaderPanel` is the core component of `Cascader` which has various of features such as single selection, multiple selection, dynamic loading and so on.
 
-:::demo Adding `filterable` to `el-cascader` enables filtering
+:::demo Just like `el-cascader`, you can set alternative options by `options`, and enable other features by `props`, see the API form below for details.
 ```html
-<div class="block">
-  <span class="demonstration">Only options of the last level can be selected</span>
-  <el-cascader
-    placeholder="Try searching: Guide"
-    :options="options"
-    filterable
-  ></el-cascader>
-</div>
-<div class="block">
-  <span class="demonstration">Options of all levels can be selected</span>
-  <el-cascader
-    placeholder="Try searching: Guide"
-    :options="options"
-    filterable
-    change-on-select
-  ></el-cascader>
-</div>
+<el-cascader-panel :options="options"></el-cascader-panel>
 
 <script>
   export default {
@@ -1663,38 +1907,81 @@ Search and select options with a keyword.
 ```
 :::
 
-### Attributes
-| Attribute | Description         | Type    | Options       | Default|
-|---------- |-------------------- |---------|-------------  |-------- |
-| options   | data of the options | array | — | — |
-| props | configuration options, see the following table | object | — | — |
-| value | selected value | array | — | — |
-| separator | option separator | string | — | / |
-| popper-class | custom class name for Cascader's dropdown | string | — | — |
-| placeholder | input placeholder | string | — | Select |
-| disabled  | whether Cascader is disabled | boolean |  — | false |
-| clearable  | whether selected value can be cleared | boolean | — | false |
-| expand-trigger  | trigger mode of expanding current item | string | click / hover | click |
+### Cascader Attributes
+| Attribute | Description | Type  | Accepted Values | Default |
+|---------- |-------- |---------- |-------------  |-------- |
+| value / v-model | binding value | - | — | — |
+| options | data of the options，the key of `value` and `label` can be customize by `Props`.| array | — | — |
+| props | configuration options, see the following table. | object | — | — |
+| size | size of input | string | medium / small / mini | — |
+| placeholder | placeholder of input | string | — | Select |
+| disabled | whether Cascader is disabled | boolean | — | false |
+| clearable | whether selected value can be cleared | boolean | — | true |
 | show-all-levels | whether to display all levels of the selected value in the input | boolean | — | true |
-| filterable  | whether the options can be searched | boolean | — | — |
+| collapse-tags | whether to collapse tags in multiple selection mode | boolean | - | false |
+| separator | option label separator | string | — | ' / ' |
+| filterable | whether the options can be searched | boolean | — | true |
+| filter-method | customize search logic, the first parameter is `node`, the second is `keyword`, and need return a boolean value indicating whether it hits. | function(node, keyword) | - | - |
 | debounce | debounce delay when typing filter keyword, in milliseconds | number | — | 300 |
-| change-on-select | whether selecting an option of any level is permitted | boolean | — | false |
-| size  | size of Input | string | medium / small / mini | — |
 | before-filter | hook function before filtering with the value to be filtered as its parameter. If `false` is returned or a `Promise` is returned and then is rejected, filtering will be aborted | function(value) | — | — |
+| popper-class | custom class name for Cascader's dropdown   | string | —  | — |
 
-### props
-| Attribute | Description | Type | Accepted Values | Default |
-| --------- | ----------------- | ------ | ------ | ------ |
-| label     | specify which key of option object is used as the option's label | string | — | — |
-| value     | specify which key of option object is used as the option's value | string | — | — |
-| children  | specify which key of option object is used as the option's child options | string | — | — |
-| disabled  | specify which key of option object indicates if the option is disabled | string | — | — |
-
-### Events
+### Cascader Events
 | Event Name | Description | Parameters |
 |---------- |-------- |---------- |
-| change  | triggers when the binding value changes | value |
-| active-item-change | triggers when active option of its parent changes, only works when `change-on-select` is `false` | an array of active options |
+| change | triggers when the binding value changes | value |
+| expand-change | triggers when expand option changes | an array of the expanding node's parent nodes |
 | blur | triggers when Cascader blurs | (event: Event) |
 | focus | triggers when Cascader focuses | (event: Event) |
 | visible-change | triggers when the dropdown appears/disappears | true when it appears, and false otherwise |
+| remove-tag | triggers when remove tag in multiple selection mode | the value of the tag which is removed |
+
+### Cascader Methods
+| Method Name | Description | Parameters |
+| ---- | ---- | ---- |
+| getCheckedNodes | get an array of currently selected node | (leafOnly) whether only return the leaf checked nodes, default is `false` |
+
+### Cascader Slots
+| Slot Name | Description |
+|---------|-------------|
+| - | the custom content of cascader node, the parameter is { node, data }, which are current Node object and node data respectively. |
+| empty  | content when there is no matched options. |
+
+### CascaderPanel Attributes
+| Attribute | Description | Type  | Accepted Values | Default |
+|---------- |-------- |---------- |-------------  |-------- |
+| value / v-model | binding value | - | — | — |
+| options | data of the options，the key of `value` and `label` can be customize by `Props`.| array | — | — |
+| props | configuration options, see the following table. | object | — | — |
+
+### CascaderPanel Events
+| Event Name | Description | Parameters |
+|---------- |-------- |---------- |
+| change | triggers when the binding value changes | value |
+| expand-change | triggers when expand option changes | an array of the expanding node's parent nodes |
+
+### CascaderPanel Methods
+| Method Name | Description | Parameters |
+| ---- | ---- | ---- |
+| getCheckedNodes | get an array of currently selected node | (leafOnly) whether only return the leaf checked nodes, default is `false` |
+| clearCheckedNodes | clear checked nodes | - |
+
+### CascaderPanel Slots
+| Slot Name | Description |
+|---------|-------------|
+| - | the custom content of cascader node, the parameter is { node, data }, which are current Node object and node data respectively. |
+
+### Props
+| Attribute | Description | Type  | Accepted Values | Default |
+| -------- | ----------------- | ------ | ------ | ------ |
+| expandTrigger | trigger mode of expanding options | string | click / hover | 'click' |
+| multiple | whether multiple selection is enabled | boolean | - | false |
+| checkStrictly | whether checked state of a node not affects its parent and child nodes | boolean | - | false |
+| emitPath | when checked nodes change, whether to emit an array of node's path, if false, only emit the value of node. | boolean | - | true |
+| lazy | whether to dynamic load child nodes, use with `lazyload` attribute | boolean | - | false |
+| lazyLoad | method for loading child nodes data, only works when `lazy` is true | function(node, resolve) | - | - |
+| value    | specify which key of node object is used as the node's value | string | — | 'value' |
+| label    | specify which key of node object is used as the node's label | string | — | 'label' |
+| children | specify which key of node object is used as the node's children | string | — | 'children' |
+| disabled | specify which key of node object is used as the node's disabled | string | — | 'disabled' |
+| leaf     | specify which key of node object is used as the node's leaf field | string | — | 'leaf' |
diff --git a/examples/docs/en-US/checkbox-img-button.md b/examples/docs/en-US/checkbox-img-button.md
new file mode 100644
index 00000000000..17a74d94499
--- /dev/null
+++ b/examples/docs/en-US/checkbox-img-button.md
@@ -0,0 +1 @@
+## CheckboxImgButton
diff --git a/examples/docs/en-US/checkbox.md b/examples/docs/en-US/checkbox.md
index 7b8676def4f..65ac634c0ae 100644
--- a/examples/docs/en-US/checkbox.md
+++ b/examples/docs/en-US/checkbox.md
@@ -1,48 +1,3 @@
-<script>
-  const cityOptions = ['Shanghai', 'Beijing', 'Guangzhou', 'Shenzhen'];
-  module.exports = {
-    data() {
-      return {
-        checkList: ['selected and disabled','Option A'],
-        // checkList2: ['Option A'],
-        checked: true,
-        checked1: false,
-        checked2: true,
-        checked3: true,
-        checked4: false,
-        checked5: false,
-        checked6: true,
-        isValid: 'valid',
-        checkAll: false,
-        cities: cityOptions,
-        checkedCities: ['Shanghai', 'Beijing'],
-        checkedCities1: ['Shanghai', 'Beijing'],
-        isIndeterminate: true,
-        checkboxGroup1: ['Shanghai'],
-        checkboxGroup2: ['Shanghai'],
-        checkboxGroup3: ['Shanghai'],
-        checkboxGroup4: ['Shanghai'],
-        checkboxGroup5: [],
-        checkboxGroup6: []
-      };
-    },
-    methods: {
-      handleChange(ev) {
-        console.log(ev);
-      },
-      handleCheckAllChange(val) {
-        this.checkedCities = val ? cityOptions : [];
-        this.isIndeterminate = false;
-      },
-      handleCheckedCitiesChange(value) {
-        let checkedCount = value.length;
-        this.checkAll = checkedCount === this.cities.length;
-        this.isIndeterminate = checkedCount > 0 && checkedCount < this.cities.length;
-      }
-    }
-  };
-</script>
-
 ## Checkbox
 
 A group of options for multiple choices.
@@ -173,7 +128,7 @@ The `min` and `max` properties can help you to limit the number of checked items
 ```html
 <template>
   <el-checkbox-group 
-    v-model="checkedCities1"
+    v-model="checkedCities"
     :min="1"
     :max="2">
     <el-checkbox v-for="city in cities" :label="city" :key="city">{{city}}</el-checkbox>
@@ -184,7 +139,7 @@ The `min` and `max` properties can help you to limit the number of checked items
   export default {
     data() {
       return {
-        checkedCities1: ['Shanghai', 'Beijing'],
+        checkedCities: ['Shanghai', 'Beijing'],
         cities: cityOptions
       };
     }
@@ -245,21 +200,21 @@ Checkbox with button styles.
 ```html
 <template>
   <div>
-    <el-checkbox v-model="checked3" label="Option1" border></el-checkbox>
-    <el-checkbox v-model="checked4" label="Option2" border></el-checkbox>
+    <el-checkbox v-model="checked1" label="Option1" border></el-checkbox>
+    <el-checkbox v-model="checked2" label="Option2" border></el-checkbox>
   </div>
   <div style="margin-top: 20px">
-    <el-checkbox v-model="checked5" label="Option1" border size="medium"></el-checkbox>
-    <el-checkbox v-model="checked6" label="Option2" border size="medium"></el-checkbox>
+    <el-checkbox v-model="checked3" label="Option1" border size="medium"></el-checkbox>
+    <el-checkbox v-model="checked4" label="Option2" border size="medium"></el-checkbox>
   </div>
   <div style="margin-top: 20px">
-    <el-checkbox-group v-model="checkboxGroup5" size="small">
+    <el-checkbox-group v-model="checkboxGroup1" size="small">
       <el-checkbox label="Option1" border></el-checkbox>
       <el-checkbox label="Option2" border disabled></el-checkbox>
     </el-checkbox-group>
   </div>
   <div style="margin-top: 20px">
-    <el-checkbox-group v-model="checkboxGroup6" size="mini" disabled>
+    <el-checkbox-group v-model="checkboxGroup2" size="mini" disabled>
       <el-checkbox label="Option1" border></el-checkbox>
       <el-checkbox label="Option2" border></el-checkbox>
     </el-checkbox-group>
@@ -270,12 +225,12 @@ Checkbox with button styles.
   export default {
     data () {
       return {
-        checked3: true,
-        checked4: false,
-        checked5: false,
-        checked6: true,
-        checkboxGroup5: [],
-        checkboxGroup6: []
+        checked1: true,
+        checked2: false,
+        checked3: false,
+        checked4: true,
+        checkboxGroup1: [],
+        checkboxGroup2: []
       };
     }
   }
@@ -286,6 +241,7 @@ Checkbox with button styles.
 ### Checkbox Attributes
 | Attribute      | Description         | Type    | Options                         | Default|
 |---------- |-------- |---------- |-------------  |-------- |
+| value / v-model | binding value | string / number / boolean | — | — |
 | label     | value of the Checkbox when used inside a `checkbox-group`   | string / number / boolean   |       —        |     —    |
 | true-label | value of the Checkbox if it's checked   | string / number    |       —        |     —    |
 | false-label | value of the Checkbox if it's not checked   | string / number    |      —         |     —    |
@@ -304,12 +260,13 @@ Checkbox with button styles.
 ### Checkbox-group Attributes
 | Attribute      | Description         | Type    | Options                         | Default|
 |---------- |-------- |---------- |-------------  |-------- |
+| value / v-model | binding value | array | — | — |
 |size | size of checkbox buttons or bordered checkboxes | string | medium / small / mini | — |
 | disabled  | whether the nesting checkboxes are disabled | boolean   | — | false   |
 | min     | minimum number of checkbox checked   | number    |       —        |     —    |
 | max     | maximum number of checkbox checked   | number    |       —        |     —    |
 |text-color | font color when button is active | string   | — | #ffffff   |
-|fill  | border and background color when button is active | string   | — | #409EFF   |
+|fill  | border and background color when button is active | string   | — | #2460e0   |
 
 ### Checkbox-group Events
 | Event Name | Description | Parameters |
diff --git a/examples/docs/en-US/collapse.md b/examples/docs/en-US/collapse.md
index 42c53c0c23a..b8133fdc479 100644
--- a/examples/docs/en-US/collapse.md
+++ b/examples/docs/en-US/collapse.md
@@ -1,29 +1,3 @@
-<script>
-  export default {
-    data() {
-      return {
-        activeNames: ['1'],
-        activeName: '1'
-      };
-    },
-    methods: {
-      handleChange(val) {
-        console.log(val);
-      }
-    }
-  }
-</script>
-
-<style>
-  .demo-collapse {
-    .el-collapse-item__header {
-      .header-icon {
-        margin-left: 5px;
-      }
-    }
-  }
-</style>
-
 ## Collapse
 
 Use Collapse to store contents.
@@ -141,16 +115,17 @@ Besides using the `title` attribute, you can customize panel title with named sl
 ### Collapse Attributes
 | Attribute      | Description          | Type      | Accepted Values       | Default  |
 |---------- |-------------- |---------- |--------------------------------  |-------- |
+| value / v-model | currently active panel | string (accordion mode) / array (non-accordion mode) | — | — |
 | accordion | whether to activate accordion mode | boolean | — | false |
-| value | currently active panel | string (accordion mode)/array (non-accordion mode) | — | — |
 
 ### Collapse Events
 | Event Name | Description | Parameters |
 |---------|---------|---------|
-| change | triggers when active panels change | activeNames: array (non-accordion mode)/string (accordion mode) |
+| change | triggers when active panels change | (activeNames: array (non-accordion mode) / string (accordion mode)) |
 
 ### Collapse Item Attributes
 | Attribute      | Description          | Type      | Accepted Values       | Default  |
 |---------- |-------------- |---------- |--------------------------------  |-------- |
-| name | unique identification of the panel | string/number | — | — |
-| title | title of the panel | string | — | — |
\ No newline at end of file
+| name      | unique identification of the panel | string/number | — | — |
+| title     | title of the panel                 | string        | — | — |
+| disabled  | disable the collapse item          | boolean       | — | — |
\ No newline at end of file
diff --git a/examples/docs/en-US/color-picker.md b/examples/docs/en-US/color-picker.md
index 3040d8a0c95..a09318f11ba 100644
--- a/examples/docs/en-US/color-picker.md
+++ b/examples/docs/en-US/color-picker.md
@@ -1,62 +1,3 @@
-<script>
-  export default {
-    data() {
-      return {
-        color1: '#409EFF',
-        color2: null,
-        color3: 'rgba(19, 206, 102, 0.8)',
-        color4: '#409EFF',
-        color5: 'rgba(255, 69, 0, 0.68)',
-        predefineColors: [
-          '#ff4500',
-          '#ff8c00',
-          '#ffd700',
-          '#90ee90',
-          '#00ced1',
-          '#1e90ff',
-          '#c71585',
-          'rgba(255, 69, 0, 0.68)',
-          'rgb(255, 120, 0)',
-          'hsv(51, 100, 98)',
-          'hsva(120, 40, 94, 0.5)',
-          'hsl(181, 100%, 37%)',
-          'hsla(209, 100%, 56%, 0.73)',
-          '#c7158577'
-        ]
-      };
-    },
-    mounted() {
-      this.$nextTick(() => {
-        const demos = document.querySelectorAll('.source');
-        demos[0].style.padding = '0';
-      });
-    },
-  }
-</script>
-
-<style>
-  .demo-color-picker .block {
-    padding: 30px 0;
-    text-align: center;
-    border-right: solid 1px #EFF2F6;
-    display: inline-block;
-    width: 50%;
-    box-sizing: border-box;
-    &:last-child {
-      border-right: none;
-    }
-  }
-  .demo-color-picker .demonstration {
-    display: block;
-    color: #8492a6;
-    font-size: 14px;
-    margin-bottom: 20px;
-  }
-  .demo-color-picker .el-color-picker + .el-color-picker {
-    margin-left: 20px;
-  }
-</style>
-
 ## ColorPicker
 
 ColorPicker is a color selector supporting multiple color formats.
@@ -78,7 +19,7 @@ ColorPicker is a color selector supporting multiple color formats.
   export default {
     data() {
       return {
-        color1: '#409EFF',
+        color1: '#2460e0',
         color2: null
       }
     }
@@ -91,13 +32,13 @@ ColorPicker is a color selector supporting multiple color formats.
 
 :::demo ColorPicker supports alpha channel selecting. To activate alpha selecting, just add the `show-alpha` attribute.
 ```html
-<el-color-picker v-model="color3" show-alpha></el-color-picker>
+<el-color-picker v-model="color" show-alpha></el-color-picker>
 
 <script>
   export default {
     data() {
       return {
-        color3: 'rgba(19, 206, 102, 0.8)'
+        color: 'rgba(19, 206, 102, 0.8)'
       }
     }
   };
@@ -110,7 +51,7 @@ ColorPicker is a color selector supporting multiple color formats.
 :::demo ColorPicker supports predefined color options
 ```html
 <el-color-picker
-  v-model="color5"
+  v-model="color"
   show-alpha
   :predefine="predefineColors">
 </el-color-picker>
@@ -119,7 +60,7 @@ ColorPicker is a color selector supporting multiple color formats.
   export default {
     data() {
       return {
-        color5: 'rgba(255, 69, 0, 0.68)',
+        color: 'rgba(255, 69, 0, 0.68)',
         predefineColors: [
           '#ff4500',
           '#ff8c00',
@@ -148,16 +89,16 @@ ColorPicker is a color selector supporting multiple color formats.
 
 :::demo
 ```html
-<el-color-picker v-model="color4"></el-color-picker>
-<el-color-picker v-model="color4" size="medium"></el-color-picker>
-<el-color-picker v-model="color4" size="small"></el-color-picker>
-<el-color-picker v-model="color4" size="mini"></el-color-picker>
+<el-color-picker v-model="color"></el-color-picker>
+<el-color-picker v-model="color" size="medium"></el-color-picker>
+<el-color-picker v-model="color" size="small"></el-color-picker>
+<el-color-picker v-model="color" size="mini"></el-color-picker>
 
 <script>
   export default {
     data() {
       return {
-        color4: '#409EFF'
+        color: '#2460e0'
       }
     }
   };
@@ -168,6 +109,7 @@ ColorPicker is a color selector supporting multiple color formats.
 ### Attributes
 | Attribute | Description | Type | Accepted Values | Default |
 |---------- |-------- |---------- |-------------  |-------- |
+| value / v-model | binding value | string | — | — |
 | disabled | whether to disable the ColorPicker | boolean | — | false |
 | size | size of ColorPicker | string | — | medium / small / mini |
 | show-alpha | whether to display the alpha slider | boolean | — | false |
diff --git a/examples/docs/en-US/color.md b/examples/docs/en-US/color.md
index 27f0acfb0f0..708c2099183 100644
--- a/examples/docs/en-US/color.md
+++ b/examples/docs/en-US/color.md
@@ -1,80 +1,97 @@
-<style>
-  .demo-color-box {
-    border-radius: 4px;
-    padding: 20px;
-    margin: 5px 0;
-    height: 74px;
-    box-sizing: border-box;
-    color: #fff;
-    font-size: 14px;
-
-    & .value {
-      font-size: 12px;
-      opacity: 0.69;
-      line-height: 24px;
-    }
-  }
-  .demo-color-box-group {
-    .demo-color-box {
-      border-radius: 0;
-      margin: 0;
-    }
-    .demo-color-box:first-child {
-      border-radius: 4px 4px 0 0;
-    }
-    .demo-color-box:last-child {
-      border-radius: 0 0 4px 4px;
-    }
-  }
-  .bg-blue {
-    background-color: #409EFF;
-  }
-
-  .bg-success {
-    background-color: #13CE66;
-  }
-  .bg-warning {
-    background-color: #f7ba2a;
-  }
-  .bg-danger {
-    background-color: #ff4949;
-  }
-  .bg-info {
-    background-color: #909399;
-  }
-
-  .bg-text-primary {
-    background-color: #303133;
-  }
-  .bg-text-regular {
-    background-color: #606266;
-  }
-  .bg-text-secondary {
-    background-color: #909399;
-  }
-  .bg-text-placeholder {
-    background-color: #c0c4cc;
-  }
-
-  .bg-border-base {
-    background-color: #dcdfe6;
-  }
-  .bg-border-light {
-    background-color: #e4e7ed;
-  }
-  .bg-border-lighter {
-    background-color: #ebeef5;
-  }
-  .bg-border-extra-light {
-    background-color: #f2f6fc;
-  }
-
-  [class*=" bg-border-"] {
-    color: #303133;
-  }
-</style>
+<script>
+  import bus from '../../bus';
+  import { tintColor } from '../../color.js';
+  import { ACTION_USER_CONFIG_UPDATE } from '../../components/theme/constant.js';
+  const varMap = {
+    'primary': '$--color-primary',
+    'success': '$--color-success',
+    'warning': '$--color-warning',
+    'danger': '$--color-danger',
+    'info': '$--color-info',
+    'white': '$--color-white',
+    'black': '$--color-black',
+    'textPrimary': '$--color-text-primary',
+    'textRegular': '$--color-text-regular',
+    'textSecondary': '$--color-text-secondary',
+    'textPlaceholder': '$--color-text-placeholder',
+    'borderBase': '$--border-color-base',
+    'borderLight': '$--border-color-light',
+    'borderLighter': '$--border-color-lighter',
+    'borderExtraLight': '$--border-color-extra-light'
+  };
+  const original = {
+    primary: '#2460e0',
+    success: '#2FD163',
+    warning: '#F5A623',
+    danger: '#FF4D4F',
+    info: '#A7A8AD',
+    white: '#FFFFFF',
+    black: '#000000',
+    textPrimary: '#303133',
+    textRegular: '#606266',
+    textSecondary: '#A7A8AD',
+    textPlaceholder: '#C0C4CC',
+    borderBase: '#DCDFE6',
+    borderLight: '#E4E7ED',
+    borderLighter: '#EBEEF5',
+    borderExtraLight: '#F2F6FC'
+  }
+  export default {
+    created() {
+      bus.$on(ACTION_USER_CONFIG_UPDATE, this.setGlobal);
+    },
+    mounted() {
+      this.setGlobal();
+    },
+    methods: {
+      tintColor(color, tint) {
+        return tintColor(color, tint);
+      },
+      setGlobal() {
+        if (window.userThemeConfig) {
+          this.global = window.userThemeConfig.global;
+        }
+      }
+    },
+    data() {
+      return {
+        global: {},
+        primary: '',
+        success: '',
+        warning: '',
+        danger: '',
+        info: '',
+        white: '',
+        black: '',
+        textPrimary: '',
+        textRegular: '',
+        textSecondary: '',
+        textPlaceholder: '',
+        borderBase: '',
+        borderLight: '',
+        borderLighter: '',
+        borderExtraLight: ''
+      }
+    },
+    watch: {
+      global: {
+        immediate: true,
+        handler(value) {
+          Object.keys(original).forEach((o) => {
+            if (value[varMap[o]]) {
+              this[o] = value[varMap[o]]
+            } else {
+              this[o] = original[o]
+            }
+          });
+        }
+      }
+    },
+  }
+</script>
 
 ## Color
+
 Element uses a specific set of palettes to specify colors to provide a consistent look and feel for the products you build.
 
 ### Main Color
@@ -82,8 +99,25 @@ Element uses a specific set of palettes to specify colors to provide a consisten
 The main color of Element is bright and friendly blue.
 
 <el-row :gutter="12">
-  <el-col :span="6" :xs="{span: 12}">
-    <div class="demo-color-box bg-blue">Blue<div class="value">#409EFF</div></div>
+  <el-col :span="10" :xs="{span: 12}">
+    <div 
+      class="demo-color-box"
+      :style="{ background: primary }"
+    >
+      Brand Color<div class="value">#2460e0</div>
+    <div 
+      class="bg-color-sub"
+      :style="{ background: tintColor(primary, 0.9) }"
+    >
+    <div 
+      class="bg-blue-sub-item" 
+      v-for="(item, key) in Array(8)"
+      :key="key"
+      :style="{ background: tintColor(primary, (key + 1) / 10) }"
+        >
+    </div>
+    </div>
+    </div>
   </el-col>
 </el-row>
 
@@ -93,16 +127,72 @@ Besides the main color, you need to use different scene colors in different scen
 
 <el-row :gutter="12">
   <el-col :span="6" :xs="{span: 12}">
-    <div class="demo-color-box bg-success">Success<div class="value">#67C23A</div></div>
+    <div class="demo-color-box"
+    :style="{ background: success }"
+    >Success<div class="value">#2FD163</div>
+      <div 
+        class="bg-color-sub"
+      >
+        <div 
+          class="bg-success-sub-item" 
+          v-for="(item, key) in Array(2)"
+          :key="key"
+          :style="{ background: tintColor(success, (key + 8) / 10) }"
+            >
+        </div>
+      </div>
+    </div>
   </el-col>
   <el-col :span="6" :xs="{span: 12}">
-    <div class="demo-color-box bg-warning">Warning<div class="value">#E6A23C</div></div>
+    <div class="demo-color-box"
+    :style="{ background: warning }"
+    >Warning<div class="value">#F5A623</div>
+      <div 
+          class="bg-color-sub"
+        >
+        <div 
+          class="bg-success-sub-item" 
+          v-for="(item, key) in Array(2)"
+          :key="key"
+          :style="{ background: tintColor(warning, (key + 8) / 10) }"
+            >
+        </div>
+      </div>
+    </div>
   </el-col>
   <el-col :span="6" :xs="{span: 12}">
-    <div class="demo-color-box bg-danger">Danger<div class="value">#F56C6C</div></div>
+    <div class="demo-color-box"
+    :style="{ background: danger }"
+    >Danger<div class="value">#FF4D4F</div>
+      <div 
+          class="bg-color-sub"
+        >
+        <div 
+          class="bg-success-sub-item" 
+          v-for="(item, key) in Array(2)"
+          :key="key"
+          :style="{ background: tintColor(danger, (key + 8) / 10) }"
+            >
+        </div>
+      </div>
+    </div>
   </el-col>
   <el-col :span="6" :xs="{span: 12}">
-    <div class="demo-color-box bg-info">Info<div class="value">#909399</div></div>
+    <div class="demo-color-box"
+    :style="{ background: info }"
+    >Info<div class="value">#A7A8AD</div>
+      <div 
+          class="bg-color-sub"
+        >
+        <div 
+          class="bg-success-sub-item" 
+          v-for="(item, key) in Array(2)"
+          :key="key"
+          :style="{ background: tintColor(info, (key + 8) / 10) }"
+            >
+        </div>
+      </div>
+    </div>
   </el-col>
 </el-row>
 
@@ -113,18 +203,49 @@ Neutral colors are for text, background and border colors. You can use different
 <el-row :gutter="12">
   <el-col :span="6" :xs="{span: 12}">
     <div class="demo-color-box-group">
-      <div class="demo-color-box bg-text-primary">Primary Text<div class="value">#303133</div></div>
-      <div class="demo-color-box bg-text-regular">Regular Text<div class="value">#606266</div></div>
-      <div class="demo-color-box bg-text-secondary">Secondary Text<div class="value">#909399</div></div>
-      <div class="demo-color-box bg-text-placeholder">Placeholder Text<div class="value">#C0C4CC</div></div>
+      <div class="demo-color-box demo-color-box-other"
+      :style="{ background: textPrimary }"
+      >Primary Text<div class="value">{{textPrimary}}</div></div>
+      <div class="demo-color-box demo-color-box-other"
+      :style="{ background: textRegular }"
+      >
+      Regular Text<div class="value">{{textRegular}}</div></div>
+      <div class="demo-color-box demo-color-box-other"
+      :style="{ background: textSecondary }"
+      >Secondary Text<div class="value">{{textSecondary}}</div></div>
+      <div class="demo-color-box demo-color-box-other"
+      :style="{ background: textPlaceholder }"
+      >Placeholder Text<div class="value">{{textPlaceholder}}</div></div>
+    </div>
+  </el-col>
+  <el-col :span="6" :xs="{span: 12}">
+    <div class="demo-color-box-group">
+      <div class="demo-color-box demo-color-box-other demo-color-box-lite"
+      :style="{ background: borderBase }"
+      >Base Border<div class="value">{{borderBase}}</div></div>
+      <div class="demo-color-box demo-color-box-other demo-color-box-lite"
+      :style="{ background: borderLight }"
+      >Light Border<div class="value">{{borderLight}}</div></div>
+      <div class="demo-color-box demo-color-box-other demo-color-box-lite"
+      :style="{ background: borderLighter }"
+      >Lighter Border<div class="value">{{borderLighter}}</div></div>
+      <div class="demo-color-box demo-color-box-other demo-color-box-lite"
+      :style="{ background: borderExtraLight }"
+      >Extra Light Border<div class="value">{{borderExtraLight}}</div></div>
     </div>
   </el-col>
   <el-col :span="6" :xs="{span: 12}">
     <div class="demo-color-box-group">
-      <div class="demo-color-box bg-border-base">Base Border<div class="value">#DCDFE6</div></div>
-      <div class="demo-color-box bg-border-light">Light Border<div class="value">#E4E7ED</div></div>
-      <div class="demo-color-box bg-border-lighter">Lighter Border<div class="value">#EBEEF5</div></div>
-      <div class="demo-color-box bg-border-extra-light">Extra Light Border<div class="value">#F2F6FC</div></div>
+      <div 
+      class="demo-color-box demo-color-box-other"
+      :style="{ background: black }"
+      >Basic Black<div class="value">{{black}}</div></div>
+      <div
+      class="demo-color-box demo-color-box-other"
+      :style="{ background: white, color: '#303133', border: '1px solid #eee' }"
+      >Basic White<div class="value">{{white}}</div></div>
+      <div class="demo-color-box demo-color-box-other bg-transparent">Transparent<div class="value">Transparent</div>
+      </div>
     </div>
   </el-col>
 </el-row>
diff --git a/examples/docs/en-US/container.md b/examples/docs/en-US/container.md
index e1a5e4e07fb..1fd23b489d5 100644
--- a/examples/docs/en-US/container.md
+++ b/examples/docs/en-US/container.md
@@ -1,62 +1,3 @@
-<style>
-  .el-header, .el-footer {
-    background-color: #B3C0D1;
-    color: #333;
-    line-height: 60px;
-  }
-  
-  .el-aside {
-    color: #333;
-  }
-  
-  #common-layouts + .demo-container {
-    .el-header, .el-footer {
-      text-align: center;
-    }
-    
-    .el-aside {
-      background-color: #D3DCE6;
-      text-align: center;
-      line-height: 200px;
-    }
-    
-    .el-main {
-      background-color: #E9EEF3;
-      color: #333;
-      text-align: center;
-      line-height: 160px;
-    }
-    
-    & > .source > .el-container {
-      margin-bottom: 40px;
-    
-      &:nth-child(5) .el-aside,
-      &:nth-child(6) .el-aside {
-        line-height: 260px;
-      }
-    
-     &:nth-child(7) .el-aside {
-       line-height: 320px;
-      }
-    }
-  }
-</style>
-
-<script>
-  export default {
-    data() {
-      const item = {
-        date: '2016-05-02',
-        name: 'Tom',
-        address: 'No. 189, Grove St, Los Angeles'
-      };
-      return {
-        tableData: Array(20).fill(item)
-      }
-    }
-  };
-</script>
-
 ## Container
 Container components for scaffolding basic structure of the page:
 
diff --git a/examples/docs/en-US/custom-theme.md b/examples/docs/en-US/custom-theme.md
index fd277bec2a8..dbbdd360b42 100644
--- a/examples/docs/en-US/custom-theme.md
+++ b/examples/docs/en-US/custom-theme.md
@@ -1,5 +1,12 @@
 ## Custom theme
-Element uses BEM-styled CSS so that you can override styles easily. But if you need to replace styles at a large scale, e.g. change the theme color from blue to orange or green, maybe overriding them one by one is not a good idea. We provide three ways to change the style variables.
+Element uses BEM-styled CSS so that you can override styles easily. But if you need to replace styles at a large scale, e.g. change the theme color from blue to orange or green, maybe overriding them one by one is not a good idea. We provide four ways to change the style variables.
+
+### Theme Roller
+Use [Online Theme Roller](./#/en-US/theme) to customize all Design Tokens of global variables and components，and preview the new theme in real-time.and it can generate a complete style package based on the new theme for you to download directly (to import new style files in your project, please refer to the 'Import custom theme' part of this section).
+
+Also, use [Theme Roller Chrome Extension](https://chrome.google.com/webstore/detail/element-theme-roller/lifkjlojflekabbmlddfccdkphlelmim)，to customize theme and preview in real-time on any website developed by Element.
+
+<img src="https://shadow.elemecdn.com/app/sns-client/element-theme-editor2.e16c6a01-806d-11e9-bc23-21435c54c509.png" style="width: 100%;margin: 30px auto 0;display: block;">
 
 ### Changing theme color
 If you just want to change the theme color of Element, the [theme preview website](https://elementui.github.io/theme-chalk-preview/#/en-US) is recommended. The theme color of Element is bright and friendly blue. By changing it, you can make Element more visually connected to specific projects.
@@ -14,15 +21,15 @@ The above website enables you to preview theme of a new theme color in real-time
 $--color-primary: teal;
 
 /* icon font path, required */
-$--font-path: '~element-ui/lib/theme-chalk/fonts';
+$--font-path: '~@femessage/element-ui/lib/theme-chalk/fonts';
 
-@import "~element-ui/packages/theme-chalk/src/index";
+@import "~@femessage/element-ui/packages/theme-chalk/src/index";
 ```
 
 Then in the entry file of your project, import this style file instead of Element's built CSS:
 ```JS
 import Vue from 'vue'
-import Element from 'element-ui'
+import Element from '@femessage/element-ui'
 import './element-variables.scss'
 
 Vue.use(Element)
@@ -61,7 +68,7 @@ et -i [custom output file]
 
 In `element-variables.scss` you can find all the variables we used to style Element and they are defined in SCSS format. Here's a snippet:
 ```css
-$--color-primary: #409EFF !default;
+$--color-primary: #2460e0 !default;
 $--color-primary-light-1: mix($--color-white, $--color-primary, 10%) !default; /* 53a8ff */
 $--color-primary-light-2: mix($--color-white, $--color-primary, 20%) !default; /* 66b1ff */
 $--color-primary-light-3: mix($--color-white, $--color-primary, 30%) !default; /* 79bbff */
@@ -72,10 +79,10 @@ $--color-primary-light-7: mix($--color-white, $--color-primary, 70%) !default; /
 $--color-primary-light-8: mix($--color-white, $--color-primary, 80%) !default; /* d9ecff */
 $--color-primary-light-9: mix($--color-white, $--color-primary, 90%) !default; /* ecf5ff */
 
-$--color-success: #67c23a !default;
-$--color-warning: #e6a23c !default;
-$--color-danger: #f56c6c !default;
-$--color-info: #909399 !default;
+$--color-success: #02C5E2 !default;
+$--color-warning: #F5A623 !default;
+$--color-danger: #E24156 !default;
+$--color-info: #6A6E7B !default;
 
 ...
 ```
@@ -87,20 +94,20 @@ $--color-primary: red;
 ```
 
 #### <strong>Build theme</strong>
-After saving the variable file, use `et` to build your theme. You can activate `watch` mode by adding a parameter `-w`. And if you customized the variable file's output, you need to add a parameter `-c` and variable file's name:
+After saving the variable file, use `et` to build your theme. You can activate `watch` mode by adding a parameter `-w`. And if you customized the variable file's output, you need to add a parameter `-c` and variable file's name. By default the build theme file is placed inside `./theme`. You can specify its output directory with parameter `-o`. 
 ```shell
 et
 
 > ✔ build theme font
 > ✔ build element theme
 ```
-
+### Use custom theme
 #### <strong>Import custom theme</strong>
-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:
+Importing your own theme is just like importing the default theme, only this time you import the file built from "Online Theme Roller" or "CLI tool":
 
 ```javascript
 import '../theme/index.css'
-import ElementUI from 'element-ui'
+import ElementUI from '@femessage/element-ui'
 import Vue from 'vue'
 
 Vue.use(ElementUI)
@@ -110,12 +117,15 @@ Vue.use(ElementUI)
 If you are using `babel-plugin-component` for on-demand import, just modify `.babelrc` and specify `styleLibraryName` to the path where your custom theme is located relative to `.babelrc`. Note that `~` is required:
 ```json
 {
-  "plugins": [["component", [
-    {
-      "libraryName": "element-ui",
-      "styleLibraryName": "~theme"
-    }
-  ]]]
+  "plugins": [
+    [
+      "component",
+      {
+        "libraryName": "element-ui",
+        "styleLibraryName": "~theme"
+      }
+    ]
+  ]
 }
 ```
 
diff --git a/examples/docs/en-US/data-mapper.md b/examples/docs/en-US/data-mapper.md
new file mode 100644
index 00000000000..c8deb33827a
--- /dev/null
+++ b/examples/docs/en-US/data-mapper.md
@@ -0,0 +1 @@
+## DataMapper
diff --git a/examples/docs/en-US/date-picker.md b/examples/docs/en-US/date-picker.md
index 7abe702f94f..0b43664feb1 100644
--- a/examples/docs/en-US/date-picker.md
+++ b/examples/docs/en-US/date-picker.md
@@ -1,115 +1,3 @@
-<script>
-  module.exports = {
-    data() {
-      return {
-        pickerOptions1: {
-          disabledDate(time) {
-            return time.getTime() > Date.now();
-          },
-          shortcuts: [{
-            text: 'Today',
-            onClick(picker) {
-              picker.$emit('pick', new Date());
-            }
-          }, {
-            text: 'Yesterday',
-            onClick(picker) {
-              const date = new Date();
-              date.setTime(date.getTime() - 3600 * 1000 * 24);
-              picker.$emit('pick', date);
-            }
-          }, {
-            text: 'A week ago',
-            onClick(picker) {
-              const date = new Date();
-              date.setTime(date.getTime() - 3600 * 1000 * 24 * 7);
-              picker.$emit('pick', date);
-            }
-          }]
-        },
-        pickerOptions2: {
-          shortcuts: [{
-            text: 'Last week',
-            onClick(picker) {
-              const end = new Date();
-              const start = new Date();
-              start.setTime(start.getTime() - 3600 * 1000 * 24 * 7);
-              picker.$emit('pick', [start, end]);
-            }
-          }, {
-            text: 'Last month',
-            onClick(picker) {
-              const end = new Date();
-              const start = new Date();
-              start.setTime(start.getTime() - 3600 * 1000 * 24 * 30);
-              picker.$emit('pick', [start, end]);
-            }
-          }, {
-            text: 'Last 3 months',
-            onClick(picker) {
-              const end = new Date();
-              const start = new Date();
-              start.setTime(start.getTime() - 3600 * 1000 * 24 * 90);
-              picker.$emit('pick', [start, end]);
-            }
-          }]
-        },
-        value1: '',
-        value2: '',
-        value3: '',
-        value4: '',
-        value5: '',
-        value6: '',
-        value7: '',
-        value8: '',
-        value9: '',
-        value10: '',
-        value11: '',
-        value12: '',
-        value13: '',
-        value14: ''
-      };
-    }
-  };
-</script>
-
-<style>
-  .demo-block.demo-date-picker .source {
-    padding: 0;
-    display: flex;
-  }
-
-  .demo-date-picker .block {
-    padding: 30px 0;
-    text-align: center;
-    border-right: solid 1px #EFF2F6;
-    flex: 1;
-    &:last-child {
-      border-right: none;
-    }
-  }
-
-  .demo-date-picker .container {
-    flex: 1;
-    border-right: solid 1px #EFF2F6;
-    .block {
-      border-right: none;
-      &:last-child {
-        border-top: solid 1px #EFF2F6;
-      }
-    }
-    &:last-child {
-      border-right: none;
-    }
-  }
-
-  .demo-date-picker .demonstration {
-    display: block;
-    color: #8492a6;
-    font-size: 14px;
-    margin-bottom: 20px;
-  }
-</style>
 
 ## DatePicker
 
@@ -137,7 +25,7 @@ Basic date picker measured by 'day'.
       v-model="value2"
       type="date"
       placeholder="Pick a day"
-      :picker-options="pickerOptions1">
+      :picker-options="pickerOptions">
     </el-date-picker>
   </div>
 </template>
@@ -146,7 +34,7 @@ Basic date picker measured by 'day'.
   export default {
     data() {
       return {
-        pickerOptions1: {
+        pickerOptions: {
           disabledDate(time) {
             return time.getTime() > Date.now();
           },
@@ -191,7 +79,7 @@ You can choose week, month, year or multiple dates by extending the standard dat
   <div class="block">
     <span class="demonstration">Week</span>
     <el-date-picker
-      v-model="value3"
+      v-model="value1"
       type="week"
       format="Week WW"
       placeholder="Pick a week">
@@ -200,7 +88,7 @@ You can choose week, month, year or multiple dates by extending the standard dat
   <div class="block">
     <span class="demonstration">Month</span>
     <el-date-picker
-      v-model="value4"
+      v-model="value2"
       type="month"
       placeholder="Pick a month">
     </el-date-picker>
@@ -210,7 +98,7 @@ You can choose week, month, year or multiple dates by extending the standard dat
   <div class="block">
     <span class="demonstration">Year</span>
     <el-date-picker
-      v-model="value5"
+      v-model="value3"
       type="year"
       placeholder="Pick a year">
     </el-date-picker>
@@ -219,7 +107,7 @@ You can choose week, month, year or multiple dates by extending the standard dat
     <span class="demonstration">Dates</span>
     <el-date-picker
       type="dates"
-      v-model="value14"
+      v-model="value4"
       placeholder="Pick one or more dates">
     </el-date-picker>
   </div>
@@ -229,10 +117,10 @@ You can choose week, month, year or multiple dates by extending the standard dat
   export default {
     data() {
       return {
+        value1: '',
+        value2: '',
         value3: '',
-        value4: '',
-        value5: '',
-        value14: ''
+        value4: ''
       };
     }
   };
@@ -252,7 +140,7 @@ Picking a date range is supported.
   <div class="block">
     <span class="demonstration">Default</span>
     <el-date-picker
-      v-model="value6"
+      v-model="value1"
       type="daterange"
       range-separator="To"
       start-placeholder="Start date"
@@ -262,14 +150,14 @@ Picking a date range is supported.
   <div class="block">
     <span class="demonstration">With quick options</span>
     <el-date-picker
-      v-model="value7"
+      v-model="value2"
       type="daterange"
       align="right"
       unlink-panels
       range-separator="To"
       start-placeholder="Start date"
       end-placeholder="End date"
-      :picker-options="pickerOptions2">
+      :picker-options="pickerOptions">
     </el-date-picker>
   </div>
 </template>
@@ -278,7 +166,7 @@ Picking a date range is supported.
   export default {
     data() {
       return {
-        pickerOptions2: {
+        pickerOptions: {
           shortcuts: [{
             text: 'Last week',
             onClick(picker) {
@@ -305,8 +193,8 @@ Picking a date range is supported.
             }
           }]
         },
-        value6: '',
-        value7: ''
+        value1: '',
+        value2: ''
       };
     }
   };
@@ -315,6 +203,74 @@ Picking a date range is supported.
 
 :::
 
+### Month Range
+
+Picking a month range is supported.
+
+:::demo When in range mode, the left and right panels are linked by default. If you want the two panels to switch current years independently, you can use the `unlink-panels` attribute.
+```html
+<template>
+  <div class="block">
+    <span class="demonstration">Default</span>
+    <el-date-picker
+      v-model="value1"
+      type="monthrange"
+      range-separator="To"
+      start-placeholder="Start month"
+      end-placeholder="End month">
+    </el-date-picker>
+  </div>
+  <div class="block">
+    <span class="demonstration">With quick options</span>
+    <el-date-picker
+      v-model="value2"
+      type="monthrange"
+      align="right"
+      unlink-panels
+      range-separator="To"
+      start-placeholder="Start month"
+      end-placeholder="End month"
+      :picker-options="pickerOptions">
+    </el-date-picker>
+  </div>
+</template>
+
+<script>
+  export default {
+    data() {
+      return {
+        pickerOptions: {
+          shortcuts: [{
+            text: 'This month',
+            onClick(picker) {
+              picker.$emit('pick', [new Date(), new Date()]);
+            }
+          }, {
+            text: 'This year',
+            onClick(picker) {
+              const end = new Date();
+              const start = new Date(new Date().getFullYear(), 0);
+              picker.$emit('pick', [start, end]);
+            }
+          }, {
+            text: 'Last 6 months',
+            onClick(picker) {
+              const end = new Date();
+              const start = new Date();
+              start.setMonth(start.getMonth() - 6);
+              picker.$emit('pick', [start, end]);
+            }
+          }]
+        },
+        value1: '',
+        value2: ''
+      };
+    }
+  };
+</script>
+```
+:::
+
 ###  Default Value
 
 If user hasn't picked a date, shows today's calendar by default. You can use `default-value` to set another date. Its value should be parsable by `new Date()`.
@@ -327,7 +283,7 @@ If type is `daterange`, `default-value` sets the left side calendar.
   <div class="block">
     <span class="demonstration">date</span>
     <el-date-picker
-      v-model="value8"
+      v-model="value1"
       type="date"
       placeholder="Pick a date"
       default-value="2010-10-01">
@@ -336,7 +292,7 @@ If type is `daterange`, `default-value` sets the left side calendar.
   <div class="block">
     <span class="demonstration">daterange</span>
     <el-date-picker
-      v-model="value9"
+      v-model="value2"
       type="daterange"
       align="right"
       start-placeholder="Start Date"
@@ -350,8 +306,8 @@ If type is `daterange`, `default-value` sets the left side calendar.
   export default {
     data() {
       return {
-        value8: '',
-        value9: ''
+        value1: '',
+        value2: ''
       };
     }
   };
@@ -373,6 +329,8 @@ Pay attention to capitalization
 | `yyyy` | year | | 2017 |
 | `M`  | month | no leading 0 | 1 |
 | `MM` | month | | 01 |
+| `MMM` | month | | Jan |
+| `MMMM` | month | | January |
 | `W`  | week | only for week picker's `format`; no leading 0 | 1 |
 | `WW` | week | only for week picker's `format`| 01 |
 | `d`  | day | no leading 0 | 2 |
@@ -388,15 +346,16 @@ Pay attention to capitalization
 | `A`  | AM/PM | only for `format`, uppercased | AM |
 | `a`  | am/pm | only for `format`, lowercased | am |
 | `timestamp` | JS timestamp | only for `value-format`; binding value will be a `number` | 1483326245000 |
+| `[MM]` | No escape characters | To escape characters, wrap them in square brackets (e.g. [A] [MM]) | MM |
 
 :::demo
 ```html
 <template>
   <div class="block">
     <span class="demonstration">Emits Date object</span>
-    <div class="demonstration">Value: {{ value10 }}</div>
+    <div class="demonstration">Value: {{ value1 }}</div>
     <el-date-picker
-      v-model="value10"
+      v-model="value1"
       type="date"
       placeholder="Pick a Date"
       format="yyyy/MM/dd">
@@ -404,9 +363,9 @@ Pay attention to capitalization
   </div>
   <div class="block">
     <span class="demonstration">Use value-format</span>
-    <div class="demonstration">Value: {{ value11 }}</div>
+    <div class="demonstration">Value: {{ value2 }}</div>
     <el-date-picker
-      v-model="value11"
+      v-model="value2"
       type="date"
       placeholder="Pick a Date"
       format="yyyy/MM/dd"
@@ -415,9 +374,9 @@ Pay attention to capitalization
   </div>
   <div class="block">
     <span class="demonstration">Timestamp</span>
-    <div class="demonstration">Value：{{ value12 }}</div>
+    <div class="demonstration">Value：{{ value3 }}</div>
     <el-date-picker
-      v-model="value12"
+      v-model="value3"
       type="date"
       placeholder="Pick a Date"
       format="yyyy/MM/dd"
@@ -430,9 +389,9 @@ Pay attention to capitalization
   export default {
     data() {
       return {
-        value10: '',
-        value11: '',
-        value12: ''
+        value1: '',
+        value2: '',
+        value3: ''
       };
     }
   };
@@ -448,9 +407,9 @@ When picking a date range, you can assign the time part for start date and end d
 ```html
 <template>
   <div class="block">
-    <p>Component value：{{ value13 }}</p>
+    <p>Component value：{{ value }}</p>
     <el-date-picker
-      v-model="value13"
+      v-model="value"
       type="daterange"
       start-placeholder="Start date"
       end-placeholder="End date"
@@ -463,7 +422,7 @@ When picking a date range, you can assign the time part for start date and end d
   export default {
     data() {
       return {
-        value13: ''
+        value: ''
       };
     }
   };
@@ -474,15 +433,16 @@ When picking a date range, you can assign the time part for start date and end d
 ### Attributes
 | Attribute      | Description          | Type      | Accepted Values       | Default  |
 |---------- |-------------- |---------- |--------------------------------  |-------- |
+| value / v-model | binding value | date(DatePicker) / array(DateRangePicker) | — | — |
 | readonly | whether DatePicker is read only | boolean | — | false |
 | disabled | whether DatePicker is disabled | boolean | — | false |
 | size | size of Input | string | large/small/mini | — |
 | editable | whether the input is editable | boolean | — | true |
-| clearable | Whether to show clear button | boolean | — | true |
+| clearable | whether to show clear button | boolean | — | true |
 | placeholder | placeholder in non-range mode | string | — | — |
 | start-placeholder | placeholder for the start date in range mode | string | — | — |
 | end-placeholder | placeholder for the end date in range mode | string | — | — |
-| type | type of the picker | string | year/month/date/dates/datetime/ week/datetimerange/daterange | date |
+| type | type of the picker | string | year/month/date/dates/datetime/ week/datetimerange/daterange/ monthrange | date |
 | format | format of the displayed value in the input box | string | see [date formats](#/en-US/component/date-picker#date-formats) | yyyy-MM-dd |
 | align | alignment | left/center/right | left |
 | popper-class | custom class name for DatePicker's dropdown | string | — | — |
@@ -495,12 +455,14 @@ When picking a date range, you can assign the time part for start date and end d
 | unlink-panels | unlink two date-panels in range-picker | boolean | — | false |
 | prefix-icon | Custom prefix icon class | string | — | el-icon-date |
 | clear-icon | Custom clear icon class | string | — | el-icon-circle-close |
+| validate-event | whether to trigger form validation | boolean | - | true |
 
 ### Picker Options
 | Attribute      | Description          | Type      | Accepted Values       | Default  |
 |---------- |-------------- |---------- |--------------------------------  |-------- |
 | shortcuts | a { text, onClick } object array to set shortcut options, check the table below | object[] | — | — |
 | disabledDate | a function determining if a date is disabled with that date as its parameter. Should return a Boolean | function | — | — |
+| cellClassName | set custom className | Function(Date) | — | — |
 | firstDayOfWeek | first day of week | Number | 1 to 7 | 7 |
 | onPick | a callback that triggers when the selected date is changed. Only for `daterange` and `datetimerange`. | Function({ maxDate, minDate }) | - | - |
 
@@ -526,4 +488,4 @@ When picking a date range, you can assign the time part for start date and end d
 ### Slots
 | Name    | Description |
 |---------|-------------|
-| range-separator  | costume range separator content |
+| range-separator  | custom range separator content |
diff --git a/examples/docs/en-US/datetime-picker.md b/examples/docs/en-US/datetime-picker.md
index a0be9c834e0..ef14e13eee1 100644
--- a/examples/docs/en-US/datetime-picker.md
+++ b/examples/docs/en-US/datetime-picker.md
@@ -1,92 +1,3 @@
-<script>
-  module.exports = {
-    data() {
-      return {
-        pickerOptions1: {
-          shortcuts: [{
-            text: 'Today',
-            onClick(picker) {
-              picker.$emit('pick', new Date());
-            }
-          }, {
-            text: 'Yesterday',
-            onClick(picker) {
-              const date = new Date();
-              date.setTime(date.getTime() - 3600 * 1000 * 24);
-              picker.$emit('pick', date);
-            }
-          }, {
-            text: 'A week ago',
-            onClick(picker) {
-              const date = new Date();
-              date.setTime(date.getTime() - 3600 * 1000 * 24 * 7);
-              picker.$emit('pick', date);
-            }
-          }]
-        },
-        pickerOptions2: {
-          shortcuts: [{
-            text: 'Last week',
-            onClick(picker) {
-              const end = new Date();
-              const start = new Date();
-              start.setTime(start.getTime() - 3600 * 1000 * 24 * 7);
-              picker.$emit('pick', [start, end]);
-            }
-          }, {
-            text: 'Last month',
-            onClick(picker) {
-              const end = new Date();
-              const start = new Date();
-              start.setTime(start.getTime() - 3600 * 1000 * 24 * 30);
-              picker.$emit('pick', [start, end]);
-            }
-          }, {
-            text: 'Last 3 months',
-            onClick(picker) {
-              const end = new Date();
-              const start = new Date();
-              start.setTime(start.getTime() - 3600 * 1000 * 24 * 90);
-              picker.$emit('pick', [start, end]);
-            }
-          }]
-        },
-        value1: '',
-        value2: '',
-        value3: '',
-        value4: [new Date(2000, 10, 10, 10, 10), new Date(2000, 10, 11, 10, 10)],
-        value5: '',
-        value6: '',
-        value7: ''
-      };
-    }
-  };
-</script>
-
-<style>
-.demo-block.demo-datetime-picker .source {
-    padding: 0;
-    display: flex;
-  }
-
-  .demo-datetime-picker .block {
-    padding: 30px 0;
-    text-align: center;
-    border-right: solid 1px #EFF2F6;
-    flex: 1;
-    &:last-child {
-      border-right: none;
-    }
-  }
-
-  .demo-datetime-picker .demonstration {
-    display: block;
-    color: #8492a6;
-    font-size: 14px;
-    margin-bottom: 20px;
-  }
-</style>
-
 ## DateTimePicker
 
 Select date and time in one picker.
@@ -115,7 +26,7 @@ DateTimePicker is derived from DatePicker and TimePicker. For a more detailed ex
       v-model="value2"
       type="datetime"
       placeholder="Select date and time"
-      :picker-options="pickerOptions1">
+      :picker-options="pickerOptions">
     </el-date-picker>
   </div>
   <div class="block">
@@ -133,7 +44,7 @@ DateTimePicker is derived from DatePicker and TimePicker. For a more detailed ex
   export default {
     data() {
       return {
-        pickerOptions1: {
+        pickerOptions: {
           shortcuts: [{
             text: 'Today',
             onClick(picker) {
@@ -174,7 +85,7 @@ DateTimePicker is derived from DatePicker and TimePicker. For a more detailed ex
   <div class="block">
     <span class="demonstration">Default</span>
     <el-date-picker
-      v-model="value4"
+      v-model="value1"
       type="datetimerange"
       range-separator="To"
       start-placeholder="Start date"
@@ -184,9 +95,9 @@ DateTimePicker is derived from DatePicker and TimePicker. For a more detailed ex
   <div class="block">
     <span class="demonstration">With shortcuts</span>
     <el-date-picker
-      v-model="value5"
+      v-model="value2"
       type="datetimerange"
-      :picker-options="pickerOptions2"
+      :picker-options="pickerOptions"
       range-separator="To"
       start-placeholder="Start date"
       end-placeholder="End date"
@@ -199,7 +110,7 @@ DateTimePicker is derived from DatePicker and TimePicker. For a more detailed ex
   export default {
     data() {
       return {
-        pickerOptions2: {
+        pickerOptions: {
           shortcuts: [{
             text: 'Last week',
             onClick(picker) {
@@ -226,8 +137,8 @@ DateTimePicker is derived from DatePicker and TimePicker. For a more detailed ex
             }
           }]
         },
-        value4: [new Date(2000, 10, 10, 10, 10), new Date(2000, 10, 11, 10, 10)],
-        value5: ''
+        value1: [new Date(2000, 10, 10, 10, 10), new Date(2000, 10, 11, 10, 10)],
+        value2: ''
       };
     }
   };
@@ -243,7 +154,7 @@ DateTimePicker is derived from DatePicker and TimePicker. For a more detailed ex
   <div class="block">
     <span class="demonstration">Start date time 12:00:00</span>
     <el-date-picker
-      v-model="value6"
+      v-model="value1"
       type="datetimerange"
       start-placeholder="Start Date"
       end-placeholder="End Date"
@@ -253,7 +164,7 @@ DateTimePicker is derived from DatePicker and TimePicker. For a more detailed ex
   <div class="block">
     <span class="demonstration">Start date time 12:00:00, end date time 08:00:00</span>
     <el-date-picker
-      v-model="value7"
+      v-model="value2"
       type="datetimerange"
       align="right"
       start-placeholder="Start Date"
@@ -267,8 +178,8 @@ DateTimePicker is derived from DatePicker and TimePicker. For a more detailed ex
   export default {
     data() {
       return {
-        value6: '',
-        value7: ''
+        value1: '',
+        value2: ''
       };
     }
   };
@@ -279,10 +190,11 @@ DateTimePicker is derived from DatePicker and TimePicker. For a more detailed ex
 ### Attributes
 | Attribute      | Description          | Type      | Accepted Values       | Default  |
 |---------- |-------------- |---------- |--------------------------------  |-------- |
+| value / v-model | binding value | date(DateTimePicker) / array(DateTimeRangePicker) | — | — |
 | readonly | whether DatePicker is read only | boolean | — | false |
 | disabled | whether DatePicker is disabled | boolean | — | false |
 | editable | whether the input is editable | boolean | — | true |
-| clearable | Whether to show clear button | boolean | — | true |
+| clearable | whether to show clear button | boolean | — | true |
 |size | size of Input | string | large/small/mini | — |
 | placeholder | placeholder in non-range mode | string | — | — |
 | start-placeholder | placeholder for the start date in range mode | string | — | — |
@@ -307,6 +219,7 @@ DateTimePicker is derived from DatePicker and TimePicker. For a more detailed ex
 |---------- |-------------- |---------- |--------------------------------  |-------- |
 | shortcuts | a { text, onClick } object array to set shortcut options, check the table below | object[] | — | — |
 | disabledDate | a function determining if a date is disabled with that date as its parameter. Should return a Boolean | function | — | — |
+| cellClassName | set custom className | Function(Date) | — | — |
 | firstDayOfWeek | first day of week | Number | 1 to 7 | 7 |
 
 ### shortcuts
diff --git a/examples/docs/en-US/dialog.md b/examples/docs/en-US/dialog.md
index 3f60fd8e3d8..bddc134fc08 100644
--- a/examples/docs/en-US/dialog.md
+++ b/examples/docs/en-US/dialog.md
@@ -1,78 +1,3 @@
-<script>
-  module.exports = {
-    data() {
-      return {
-        gridData: [{
-          date: '2016-05-02',
-          name: 'John Smith',
-          address: 'No.1518,  Jinshajiang Road, Putuo District'
-        }, {
-          date: '2016-05-04',
-          name: 'John Smith',
-          address: 'No.1518,  Jinshajiang Road, Putuo District'
-        }, {
-          date: '2016-05-01',
-          name: 'John Smith',
-          address: 'No.1518,  Jinshajiang Road, Putuo District'
-        }, {
-          date: '2016-05-03',
-          name: 'John Smith',
-          address: 'No.1518,  Jinshajiang Road, Putuo District'
-        }],
-        dialogVisible: false,
-        dialogTableVisible: false,
-        dialogFormVisible: false,
-        outerVisible: false,
-        innerVisible: false,
-        centerDialogVisible: false,
-        form: {
-          name: '',
-          region: '',
-          date1: '',
-          date2: '',
-          delivery: false,
-          type: [],
-          resource: '',
-          desc: ''
-        },
-        formLabelWidth: '120px'
-      };
-    },
-    methods: {
-      handleClose(done) {
-        this.$confirm('Are you sure to close this dialog?')
-          .then(_ => {
-            done();
-          })
-          .catch(_ => {});
-      }
-    }
-  };
-</script>
-
-<style>
-  .demo-box.demo-dialog {
-    .dialog-footer button:first-child {
-      margin-right: 10px;
-    }
-    .full-image {
-      width: 100%;
-    }
-    .el-dialog__wrapper {
-      margin: 0;
-    }
-    .el-select {
-      width: 300px;
-    }
-    .el-input {
-      width: 300px;
-    }
-    .el-button--text {
-      margin-right: 15px;
-    }
-  }
-</style>
-
 ## Dialog
 
 Informs users while preserving the current page state.
@@ -296,6 +221,7 @@ If the variable bound to `visible` is managed in Vuex store, the `.sync` can not
 | show-close | whether to show a close button | boolean    | — | true |
 | before-close | callback before Dialog closes, and it will prevent Dialog from closing | function(done)，done is used to close the Dialog | — | — |
 | center | whether to align the header and footer in center | boolean | — | false |
+| destroy-on-close | Destroy elements in Dialog when closed   | boolean | — | false |
 
 ### Slot
 
diff --git a/examples/docs/en-US/divider.md b/examples/docs/en-US/divider.md
new file mode 100644
index 00000000000..d419c9bd95d
--- /dev/null
+++ b/examples/docs/en-US/divider.md
@@ -0,0 +1,61 @@
+## Divider
+
+The dividing line that separates the content.
+
+### Basic usage
+
+Divide the text of different paragraphs.
+
+:::demo
+```html
+<template>
+  <div>
+    <span>I sit at my window this morning where the world like a passer-by stops for a moment, nods to me and goes.</span>
+    <el-divider></el-divider>
+    <span>There little thoughts are the rustle of leaves; they have their whisper of joy in my mind.</span>
+  </div>
+</template>
+```
+:::
+
+### Custom content
+
+You can customize the content on the divider line.
+
+
+:::demo
+```html
+<template>
+  <div>
+    <span>What you are you do not see, what you see is your shadow. </span>
+    <el-divider content-position="left">Rabindranath Tagore</el-divider>
+    <span>I cannot choose the best. The best chooses me.</span>
+    <el-divider><i class="el-icon-star-on"></i></el-divider>
+    <span>My wishes are fools, they shout across thy song, my Master. Let me but listen.</span>
+    <el-divider content-position="right">Rabindranath Tagore</el-divider>
+  </div>
+</template>
+```
+:::
+
+### Vertical divider
+
+:::demo
+```html
+<template>
+  <div>
+    <span>Rain</span>
+    <el-divider direction="vertical"></el-divider>
+    <span>Home</span>
+    <el-divider direction="vertical"></el-divider>
+    <span>Grass</span>
+  </div>
+</template>
+```
+:::
+
+### Divider Attributes
+| Attribute      | Description          | Type      | Accepted Values       | Default  |
+|-------------  |---------------- |---------------- |---------------------- |-------- |
+| direction      | Set divider's direction  | string  |          horizontal / vertical           |    horizontal     |
+| content-position      | customize the content on the divider line | String  |  left / right / center  |  center |
\ No newline at end of file
diff --git a/examples/docs/en-US/drawer.md b/examples/docs/en-US/drawer.md
new file mode 100644
index 00000000000..7e99cdd7807
--- /dev/null
+++ b/examples/docs/en-US/drawer.md
@@ -0,0 +1,305 @@
+## Drawer
+
+Sometimes, `Dialog` does not always satisfy our requirements, let's say you have a massive form, or you need space to display something like `terms & conditions`, `Drawer` has almost identical API with `Dialog`, but it introduces different user experience.
+
+### Basic Usage
+
+Callout a temporary drawer, from multiple direction
+
+:::demo You must set `visible` for `Drawer` like `Dialog` does to control the visibility of `Drawer` itself, it's `boolean` type. `Drawer` has to parts: `title` & `body`, the `title` is a named slot, you can also set the title through attribute named `title`, default to an empty string, the `body` part is the main area of `Drawer`, which contains user defined content. When opening, `Drawer` expand itself from the **right corner to left** which size is **30%** of the browser window by default. You can change that default behavior by setting `direction` and `size` attribute. This show case also demonstrated how to use the `before-close` API, check the Attribute section for more detail
+
+```html
+<el-radio-group v-model="direction">
+  <el-radio label="ltr">left to right</el-radio>
+  <el-radio label="rtl">right to left</el-radio>
+  <el-radio label="ttb">top to bottom</el-radio>
+  <el-radio label="btt">bottom to top</el-radio>
+</el-radio-group>
+
+<el-button @click="drawer = true" type="primary" style="margin-left: 16px;">
+  open
+</el-button>
+
+<el-drawer
+  title="I am the title"
+  :visible.sync="drawer"
+  :direction="direction"
+  :before-close="handleClose">
+  <span>Hi, there!</span>
+</el-drawer>
+
+<script>
+  export default {
+    data() {
+      return {
+        drawer: false,
+        direction: 'rtl',
+      };
+    },
+    methods: {
+      handleClose(done) {
+        this.$confirm('Are you sure you want to close this?')
+          .then(_ => {
+            done();
+          })
+          .catch(_ => {});
+      }
+    }
+  };
+</script>
+```
+:::
+
+### No Title
+
+When you no longer need a title, you can remove title from drawer.
+
+:::demo Set the `withHeader` attribute to **false**, you can remove the title from drawer, thus your drawer can have more space on screen. If you want to be accessible, make sure to set the `title` attribute.
+
+```html
+<el-button @click="drawer = true" type="primary" style="margin-left: 16px;">
+  open
+</el-button>
+
+<el-drawer
+  title="I am the title"
+  :visible.sync="drawer"
+  :with-header="false">
+  <span>Hi there!</span>
+</el-drawer>
+
+<script>
+  export default {
+    data() {
+      return {
+        drawer: false,
+      };
+    }
+  };
+</script>
+```
+:::
+
+### Customization Content
+
+Like `Dialog`, `Drawer` can do many diverse interaction as you wanted.
+
+:::demo
+
+```html
+<el-button type="text" @click="table = true">Open Drawer with nested table</el-button>
+<el-button type="text" @click="dialog = true">Open Drawer with nested form</el-button>
+<el-drawer
+  title="I have a nested table inside!"
+  :visible.sync="table"
+  direction="rtl"
+  size="50%">
+   <el-table :data="gridData">
+      <el-table-column property="date" label="Date" width="150"></el-table-column>
+      <el-table-column property="name" label="Name" width="200"></el-table-column>
+      <el-table-column property="address" label="Address"></el-table-column>
+    </el-table>
+</el-drawer>
+
+<el-drawer
+  title="I have a nested form inside!"
+  :before-close="handleClose"
+  :visible.sync="dialog"
+  direction="ltr"
+  custom-class="demo-drawer"
+  ref="drawer"
+  >
+  <div class="demo-drawer__content">
+    <el-form :model="form">
+      <el-form-item label="Name" :label-width="formLabelWidth">
+        <el-input v-model="form.name" autocomplete="off"></el-input>
+      </el-form-item>
+      <el-form-item label="Area" :label-width="formLabelWidth">
+        <el-select v-model="form.region" placeholder="Please select activity area">
+          <el-option label="Area1" value="shanghai"></el-option>
+          <el-option label="Area2" value="beijing"></el-option>
+        </el-select>
+      </el-form-item>
+    </el-form>
+    <div class="demo-drawer__footer">
+      <el-button @click="cancelForm">Cancel</el-button>
+      <el-button type="primary" @click="$refs.drawer.closeDrawer()" :loading="loading">{{ loading ? 'Submitting ...' : 'Submit' }}</el-button>
+    </div>
+  </div>
+</el-drawer>
+
+<script>
+export default {
+  data() {
+    return {
+      table: false,
+      dialog: false,
+      loading: false,
+      gridData: [{
+        date: '2016-05-02',
+        name: 'Peter Parker',
+        address: 'Queens, New York City'
+      }, {
+        date: '2016-05-04',
+        name: 'Peter Parker',
+        address: 'Queens, New York City'
+      }, {
+        date: '2016-05-01',
+        name: 'Peter Parker',
+        address: 'Queens, New York City'
+      }, {
+        date: '2016-05-03',
+        name: 'Peter Parker',
+        address: 'Queens, New York City'
+      }],
+      form: {
+        name: '',
+        region: '',
+        date1: '',
+        date2: '',
+        delivery: false,
+        type: [],
+        resource: '',
+        desc: ''
+      },
+      formLabelWidth: '80px',
+      timer: null,
+    };
+  },
+  methods: {
+    handleClose(done) {
+      if (this.loading) {
+        return;
+      }
+      this.$confirm('Do you want to submit?')
+        .then(_ => {
+          this.loading = true;
+          this.timer = setTimeout(() => {
+            done();
+            // animation takes time
+            setTimeout(() => {
+              this.loading = false;
+            }, 400);
+          }, 2000);
+        })
+        .catch(_ => {});
+    },
+    cancelForm() {
+      this.loading = false;
+      this.dialog = false;
+      clearTimeout(this.timer);
+    }
+  }
+}
+</script>
+```
+:::
+
+### Nested Drawer
+
+You can also have multiple layer of `Drawer` just like `Dialog`.
+:::demo If you need multiple Drawer in different layer, you must set the `append-to-body` attribute to **true**
+
+```html
+
+<el-button @click="drawer = true" type="primary" style="margin-left: 16px;">
+  open
+</el-button>
+
+<el-drawer
+  title="I'm outer Drawer"
+  :visible.sync="drawer"
+  size="50%">
+  <div>
+   <el-button @click="innerDrawer = true">Click me!</el-button>
+   <el-drawer
+     title="I'm inner Drawer"
+     :append-to-body="true"
+     :before-close="handleClose"
+     :visible.sync="innerDrawer">
+     <p>_(:зゝ∠)_</p>
+   </el-drawer>
+  </div>
+</el-drawer>
+
+<script>
+  export default {
+    data() {
+      return {
+        drawer: false,
+        innerDrawer: false,
+      };
+    },
+    methods: {
+      handleClose(done) {
+        this.$confirm('You still have unsaved data, proceed?')
+          .then(_ => {
+            done();
+          })
+          .catch(_ => {});
+      }
+    }
+  };
+</script>
+
+```
+:::
+
+:::tip
+
+The content inside Drawer should be lazy rendered, which means that the content inside Drawer will not impact the initial render performance, therefore any DOM operation should be performed through `ref` or after `open` event emitted.
+
+:::
+
+:::tip
+
+Drawer provides an API called `destroyOnClose`, which is a flag variable that indicates should destroy the children content inside Drawer after Drawer was closed. You can use this API when you need your `mounted` life cycle to be called every time the Drawer opens.
+
+:::
+
+:::tip
+
+If the variable bound to `visible` is managed in Vuex store, the `.sync` can not work properly. In this case, please remove the `.sync` modifier, listen to `open` and `close` events of Dialog, and commit Vuex mutations to update the value of that variable in the event handlers.
+
+:::
+
+### Drawer Attributes
+
+| Parameter| Description | Type      | Acceptable Values                           | Defaults  |
+|---------- |-------------- |---------- |--------------------------------  |-------- |
+| append-to-body | Controls should Drawer be inserted to DocumentBody Element, nested Drawer must assign this param to **true**| boolean   | — | false |
+| before-close | If set, closing procedure will be halted | function(done), done is function type that accepts a boolean as parameter, calling done with true or without parameter will abort the close procedure | — | — |
+| close-on-press-escape | Indicates whether Drawer can be closed by pressing ESC | boolean | — | true |
+| custom-class | Extra class names for Drawer | string | — | — |
+| destroy-on-close | Indicates whether children should be destroyed after Drawer closed | boolean | - | false |
+| modal | Should show shadowing layer | boolean | — | true |
+| modal-append-to-body | Indicates should shadowing layer be insert into DocumentBody element | boolean   | — | true |
+| direction | Drawer's opening direction | Direction | rtl / ltr / ttb / btt | rtl |
+| show-close | Should show close button at the top right of Drawer | boolean | — | true |
+| size | Drawer's size, if Drawer is horizontal mode, it effects the width property, otherwise it effects the height property, when size is `number` type, it describes the size by unit of pixels; when size is `string` type, it should be used with `x%` notation, other wise it will be interpreted to pixel unit | number / string | - | '30%' |
+| title | Drawer's title, can also be set by named slot, detailed descriptions can be found in the slot form | string | — | — |
+| visible | Should Drawer be displayed, also support the `.sync` notation | boolean | — | false |
+| wrapperClosable | Indicates whether user can close Drawer by clicking the shadowing layer. | boolean | - | true |
+| withHeader | Flag that controls the header section's existance, default to true, when withHeader set to false, both `title attribute` and `title slot` won't work | boolean | - | true |
+
+### Drawer Slot
+
+| Name | Description |
+|------|--------|
+| — | Drawer's Content |
+| title | Drawer Title Section |
+
+### Drawer Methods
+
+| Name | Description |
+| ---- | ---  |
+| closeDrawer | In order to close Drawer, this method will call `before-close`. |
+
+### Drawer Events
+
+| Event Name | Description | Parameter |
+|---------- |-------- |---------- |
+| open  | Triggered before Drawer opening animation begins  | — |
+| opened  | Triggered after Drawer opening animation ended | — |
+| close  | Triggered before Drawer closing animation begins | — |
+| closed | Triggered after Drawer closing animation ended | — |
diff --git a/examples/docs/en-US/dropdown.md b/examples/docs/en-US/dropdown.md
index 9b66fa02583..abae2634b1d 100644
--- a/examples/docs/en-US/dropdown.md
+++ b/examples/docs/en-US/dropdown.md
@@ -1,55 +1,3 @@
-<style>
-  .demo-box {
-    .el-dropdown {
-      vertical-align: top;
-
-      & + .el-dropdown {
-        margin-left: 15px;
-      }
-    }
-    .el-dropdown-link {
-      cursor: pointer;
-      color: #409EFF;
-    }
-    .el-icon-arrow-down {
-      font-size: 12px;
-    }
-  }
-
-  .block-col-2 {
-    margin: -24px;
-
-    .el-col {
-      padding: 30px 0;
-      text-align: center;
-      border-right: 1px solid #eff2f6;
-
-      &:last-child {
-        border-right: 0;
-      }
-    }
-  }
-
- .demo-dropdown .demonstration {
-   display: block;
-   color: #8492a6;
-   font-size: 14px;
-   margin-bottom: 20px;
- }
-</style>
-
-<script>
-  export default {
-    methods: {
-      handleClick() {
-        alert('button click');
-      },
-      handleCommand(command) {
-        this.$message('click on item ' + command);
-      }
-    }
-  }
-</script>
 ## Dropdown
 Toggleable menu for displaying lists of links and actions.
 
@@ -75,7 +23,7 @@ Hover on the dropdown menu to unfold it for more actions.
 <style>
   .el-dropdown-link {
     cursor: pointer;
-    color: #409EFF;
+    color: #2460e0;
   }
   .el-icon-arrow-down {
     font-size: 12px;
@@ -154,11 +102,11 @@ Click the triggering element or hover on it.
         Dropdown List<i class="el-icon-arrow-down el-icon--right"></i>
       </span>
       <el-dropdown-menu slot="dropdown">
-        <el-dropdown-item>Action 1</el-dropdown-item>
-        <el-dropdown-item>Action 2</el-dropdown-item>
-        <el-dropdown-item>Action 3</el-dropdown-item>
-        <el-dropdown-item>Action 4</el-dropdown-item>
-        <el-dropdown-item>Action 5</el-dropdown-item>
+        <el-dropdown-item icon="el-icon-plus">Action 1</el-dropdown-item>
+        <el-dropdown-item icon="el-icon-circle-plus">Action 2</el-dropdown-item>
+        <el-dropdown-item icon="el-icon-circle-plus-outline">Action 3</el-dropdown-item>
+        <el-dropdown-item icon="el-icon-check">Action 4</el-dropdown-item>
+        <el-dropdown-item icon="el-icon-circle-check">Action 5</el-dropdown-item>
       </el-dropdown-menu>
     </el-dropdown>
   </el-col>
@@ -169,11 +117,11 @@ Click the triggering element or hover on it.
         Dropdown List<i class="el-icon-arrow-down el-icon--right"></i>
       </span>
       <el-dropdown-menu slot="dropdown">
-        <el-dropdown-item>Action 1</el-dropdown-item>
-        <el-dropdown-item>Action 2</el-dropdown-item>
-        <el-dropdown-item>Action 3</el-dropdown-item>
-        <el-dropdown-item>Action 4</el-dropdown-item>
-        <el-dropdown-item>Action 5</el-dropdown-item>
+        <el-dropdown-item icon="el-icon-plus">Action 1</el-dropdown-item>
+        <el-dropdown-item icon="el-icon-circle-plus">Action 2</el-dropdown-item>
+        <el-dropdown-item icon="el-icon-circle-plus-outline">Action 3</el-dropdown-item>
+        <el-dropdown-item icon="el-icon-check">Action 4</el-dropdown-item>
+        <el-dropdown-item icon="el-icon-circle-check">Action 5</el-dropdown-item>
       </el-dropdown-menu>
     </el-dropdown>
   </el-col>
@@ -182,7 +130,7 @@ Click the triggering element or hover on it.
 <style>
   .el-dropdown-link {
     cursor: pointer;
-    color: #409EFF;
+    color: #2460e0;
   }
   .el-icon-arrow-down {
     font-size: 12px;
@@ -219,7 +167,7 @@ Use `hide-on-click` to define if menu closes on clicking.
 <style>
   .el-dropdown-link {
     cursor: pointer;
-    color: #409EFF;
+    color: #2460e0;
   }
   .el-icon-arrow-down {
     font-size: 12px;
@@ -250,7 +198,7 @@ Clicking each dropdown item fires an event whose parameter is assigned by each i
 <style>
   .el-dropdown-link {
     cursor: pointer;
-    color: #409EFF;
+    color: #2460e0;
   }
   .el-icon-arrow-down {
     font-size: 12px;
@@ -330,6 +278,7 @@ Besides default size, Dropdown component provides three additional sizes for you
 | hide-on-click | whether to hide menu after clicking menu-item     | boolean          | — | true |
 | show-timeout | Delay time before show a dropdown (only works when trigger is `hover`) | number | — | 250 |
 | hide-timeout | Delay time before hide a dropdown (only works when trigger is `hover`) | number | — | 150 |
+| tabindex     | [tabindex](https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/tabindex) of Dropdown | number | — | 0 |
 
 ### Dropdown Slots
 
@@ -346,8 +295,9 @@ Besides default size, Dropdown component provides three additional sizes for you
 | visible-change | triggers when the dropdown appears/disappears | true when it appears, and false otherwise |
 
 ### Dropdown Menu Item Attributes
-| Attribute      | Description          | Type      | Accepted Values       | Default  |
+| Attribute     | Description          | Type      | Accepted Values       | Default  |
 |-------------  |---------------- |---------------- |---------------------- |-------- |
 | command       | a command to be dispatched to Dropdown's `command` callback | string/number/object  |          —             |    —     |
 | disabled      | whether the item is disabled  | boolean  |          —             |    false     |
 | divided       | whether a divider is displayed  | boolean  |          —             |    false     |
+| icon          | icon class name | string   |  —  |  —  |
diff --git a/examples/docs/en-US/edit-table.md b/examples/docs/en-US/edit-table.md
new file mode 100644
index 00000000000..0b99bde7fc7
--- /dev/null
+++ b/examples/docs/en-US/edit-table.md
@@ -0,0 +1 @@
+## EditTable
diff --git a/examples/docs/en-US/empty.md b/examples/docs/en-US/empty.md
new file mode 100644
index 00000000000..86e90e45463
--- /dev/null
+++ b/examples/docs/en-US/empty.md
@@ -0,0 +1 @@
+## Empty
diff --git a/examples/docs/en-US/form.md b/examples/docs/en-US/form.md
index 5c653211a3f..08f3fe02b9b 100644
--- a/examples/docs/en-US/form.md
+++ b/examples/docs/en-US/form.md
@@ -1,250 +1,3 @@
-<script>
-  export default {
-    data() {
-      var checkAge = (rule, value, callback) => {
-        if (!value) {
-          return callback(new Error('Please input the age'));
-        }
-        setTimeout(() => {
-          if (!Number.isInteger(value)) {
-            callback(new Error('Please input digits'));
-          } else {
-            if (value < 18) {
-              callback(new Error('Age must be greater than 18'));
-            } else {
-              callback();
-            }
-          }
-        }, 1000);
-      };
-      var validatePass = (rule, value, callback) => {
-        if (value === '') {
-          callback(new Error('Please input the password'));
-        } else {
-          if (this.ruleForm2.checkPass !== '') {
-            this.$refs.ruleForm2.validateField('checkPass');
-          }
-          callback();
-        }
-      };
-      var validatePass2 = (rule, value, callback) => {
-        if (value === '') {
-          callback(new Error('Please input the password again'));
-        } else if (value !== this.ruleForm2.pass) {
-          callback(new Error('Two inputs don\'t match!'));
-        } else {
-          callback();
-        }
-      };
-      return {
-        form: {
-          name: '',
-          region: '',
-          date1: '',
-          date2: '',
-          delivery: false,
-          type: [],
-          resource: '',
-          desc: ''
-        },
-        sizeForm: {
-          name: '',
-          region: '',
-          date1: '',
-          date2: '',
-          delivery: false,
-          type: [],
-          resource: '',
-          desc: ''
-        },
-        formInline: {
-          user: '',
-          region: ''
-        },
-        labelPosition: 'right',
-        formLabelAlign: {
-          name: '',
-          region: '',
-          type: ''
-        },
-        ruleForm: {
-          name: '',
-          region: '',
-          date1: '',
-          date2: '',
-          delivery: false,
-          type: [],
-          resource: '',
-          desc: ''
-        },
-        ruleForm2: {
-          pass: '',
-          checkPass: '',
-          age: ''
-        },
-        formLabelWidth: '80px',
-        options: [
-        ],
-        rules: {
-          name: [
-            { required: true, message: 'Please input Activity name', trigger: 'blur' },
-            { min: 3, max: 5, message: 'Length should be 3 to 5', trigger: 'blur' }
-          ],
-          region: [
-            { required: true, message: 'Please select Activity zone', trigger: 'change' }
-          ],
-          date1: [
-            { type: 'date', required: true, message: 'Please pick a date', trigger: 'change' }
-          ],
-          date2: [
-            { type: 'date', required: true, message: 'Please pick a time', trigger: 'change' }
-          ],
-          type: [
-            { type: 'array', required: true, message: 'Please select at least one activity type', trigger: 'change' }
-          ],
-          resource: [
-            { required: true, message: 'Please select activity resource', trigger: 'change' }
-          ],
-          desc: [
-            { required: true, message: 'Please input activity form', trigger: 'blur' }
-          ]
-        },
-        rules2: {
-          pass: [
-            { validator: validatePass, trigger: 'blur' }
-          ],
-          checkPass: [
-            { validator: validatePass2, trigger: 'blur' }
-          ],
-          age: [
-            { validator: checkAge, trigger: 'blur' }
-          ]
-        },
-        dynamicValidateForm: {
-          domains: [{
-            key: Date.now(),
-            value: ''
-          }],
-          email: ''
-        },
-        numberValidateForm: {
-          age: ''
-        }
-      };
-    },
-    methods: {
-      onSubmit() {
-        console.log('submit!');
-      },
-      onRuleFormSubmit() {
-        console.log('onRuleFormSubmit');
-      },
-      submitForm(formName) {
-        this.$refs[formName].validate((valid) => {
-          if (valid) {
-            alert('submit!');
-          } else {
-            console.log('error submit!!');
-            return false;
-          }
-        });
-      },
-      resetForm(formName) {
-        this.$refs[formName].resetFields();
-      },
-      removeDomain(item) {
-        var index = this.dynamicValidateForm.domains.indexOf(item)
-        if (index !== -1) {
-          this.dynamicValidateForm.domains.splice(index, 1)
-        }
-      },
-      addDomain() {
-        this.dynamicValidateForm.domains.push({
-          key: Date.now(),
-          value: ''
-        });
-      }
-    }
-  }
-</script>
-
-<style>
-  .demo-form.demo-en-US {
-    .el-select .el-input {
-      width: 360px;
-    }
-    .el-form {
-      width: 480px;
-    }
-
-    .line {
-      text-align: center;
-    }
-
-    .el-checkbox-group {
-      width: 320px;
-      margin: 0;
-      padding: 0;
-      list-style: none;
-
-      &:after, &:before {
-        content: ' ';
-        display: table;
-      }
-      &:after {
-        clear: both;
-        visibility: hidden;
-        font-size: 0;
-        height: 0;
-      }
-
-      .el-checkbox {
-        float: left;
-        width: 160px;
-        padding-right: 20px;
-        margin: 0;
-        padding: 0;
-
-        + .el-checkbox {
-          margin-left: 0;
-        }
-      }
-    }
-    .demo-form-normal {
-      width: 480px;
-    }
-    .demo-form-inline {
-      width: auto;
-
-      .el-input {
-        width: 150px;
-      }
-      > * {
-        margin-right: 10px;
-      }
-    }
-    .demo-ruleForm {
-      width: 480px;
-
-      .el-select .el-input {
-        width: 360px;
-      }
-    }
-    .demo-dynamic {
-      width: 500px;
-
-      .el-input {
-        margin-right: 10px;
-        width: 270px;
-        vertical-align: top;
-      }
-    }
-    .fr {
-      float: right;
-    }
-  }
-</style>
-
 ## Form
 
 Form consists of `input`, `radio`, `select`, `checkbox` and so on. With form, you can collect, verify and submit data.
@@ -272,7 +25,7 @@ It includes all kinds of input items, such as `input`, `select`, `radio` and `ch
     </el-col>
     <el-col class="line" :span="2">-</el-col>
     <el-col :span="11">
-      <el-time-picker type="fixed-time" placeholder="Pick a time" v-model="form.date2" style="width: 100%;"></el-time-picker>
+      <el-time-picker placeholder="Pick a time" v-model="form.date2" style="width: 100%;"></el-time-picker>
     </el-col>
   </el-form-item>
   <el-form-item label="Instant delivery">
@@ -441,7 +194,7 @@ Form component allows you to verify your data, helping you find and correct erro
     <el-col class="line" :span="2">-</el-col>
     <el-col :span="11">
       <el-form-item prop="date2">
-        <el-time-picker type="fixed-time" placeholder="Pick a time" v-model="ruleForm.date2" style="width: 100%;"></el-time-picker>
+        <el-time-picker placeholder="Pick a time" v-model="ruleForm.date2" style="width: 100%;"></el-time-picker>
       </el-form-item>
     </el-col>
   </el-form-item>
@@ -536,19 +289,19 @@ This example shows how to customize your own validation rules to finish a two-fa
 
 :::demo Here we use `status-icon` to reflect validation result as an icon.
 ```html
-<el-form :model="ruleForm2" status-icon :rules="rules2" ref="ruleForm2" label-width="120px" class="demo-ruleForm">
+<el-form :model="ruleForm" status-icon :rules="rules" ref="ruleForm" label-width="120px" class="demo-ruleForm">
   <el-form-item label="Password" prop="pass">
-    <el-input type="password" v-model="ruleForm2.pass" autocomplete="off"></el-input>
+    <el-input type="password" v-model="ruleForm.pass" autocomplete="off"></el-input>
   </el-form-item>
   <el-form-item label="Confirm" prop="checkPass">
-    <el-input type="password" v-model="ruleForm2.checkPass" autocomplete="off"></el-input>
+    <el-input type="password" v-model="ruleForm.checkPass" autocomplete="off"></el-input>
   </el-form-item>
   <el-form-item label="Age" prop="age">
-    <el-input v-model.number="ruleForm2.age"></el-input>
+    <el-input v-model.number="ruleForm.age"></el-input>
   </el-form-item>
   <el-form-item>
-    <el-button type="primary" @click="submitForm('ruleForm2')">Submit</el-button>
-    <el-button @click="resetForm('ruleForm2')">Reset</el-button>
+    <el-button type="primary" @click="submitForm('ruleForm')">Submit</el-button>
+    <el-button @click="resetForm('ruleForm')">Reset</el-button>
   </el-form-item>
 </el-form>
 <script>
@@ -574,8 +327,8 @@ This example shows how to customize your own validation rules to finish a two-fa
         if (value === '') {
           callback(new Error('Please input the password'));
         } else {
-          if (this.ruleForm2.checkPass !== '') {
-            this.$refs.ruleForm2.validateField('checkPass');
+          if (this.ruleForm.checkPass !== '') {
+            this.$refs.ruleForm.validateField('checkPass');
           }
           callback();
         }
@@ -583,19 +336,19 @@ This example shows how to customize your own validation rules to finish a two-fa
       var validatePass2 = (rule, value, callback) => {
         if (value === '') {
           callback(new Error('Please input the password again'));
-        } else if (value !== this.ruleForm2.pass) {
+        } else if (value !== this.ruleForm.pass) {
           callback(new Error('Two inputs don\'t match!'));
         } else {
           callback();
         }
       };
       return {
-        ruleForm2: {
+        ruleForm: {
           pass: '',
           checkPass: '',
           age: ''
         },
-        rules2: {
+        rules: {
           pass: [
             { validator: validatePass, trigger: 'blur' }
           ],
@@ -628,6 +381,10 @@ This example shows how to customize your own validation rules to finish a two-fa
 ```
 :::
 
+:::tip
+Custom validate callback function must be called. See more advanced usage at [async-validator](https://github.com/yiminghe/async-validator).
+:::
+
 ### Delete or add form items dynamically
 
 :::demo In addition to passing all validation rules at once on the form component, you can also pass the validation rules or delete rules on a single form field dynamically.
@@ -781,7 +538,7 @@ All components in a Form inherit their `size` attribute from that Form. Similarl
     </el-col>
     <el-col class="line" :span="2">-</el-col>
     <el-col :span="11">
-      <el-time-picker type="fixed-time" placeholder="Pick a time" v-model="sizeForm.date2" style="width: 100%;"></el-time-picker>
+      <el-time-picker placeholder="Pick a time" v-model="sizeForm.date2" style="width: 100%;"></el-time-picker>
     </el-col>
   </el-form-item>
   <el-form-item label="Activity type">
@@ -836,7 +593,7 @@ All components in a Form inherit their `size` attribute from that Form. Similarl
 | rules | validation rules of form | object | — | — |
 | inline | whether the form is inline | boolean | — | false |
 | label-position | position of label. If set to 'left' or 'right', `label-width` prop is also required | string | left / right / top | right |
-| label-width | width of label, and all its direct child form items will inherit this value | string | — | — |
+| label-width    | width of label, e.g. '50px'. All its direct child form items will inherit this value. Width `auto` is supported.        | string | — | — |
 | label-suffix | suffix of the label | string | — | — |
 | hide-required-asterisk | whether required fields should have a red asterisk (star) beside their labels | boolean | — | false |
 | show-message  | whether to show the error message | boolean | — | true |
@@ -851,9 +608,9 @@ All components in a Form inherit their `size` attribute from that Form. Similarl
 | Method | Description | Parameters |
 | ---- | ---- | ---- |
 | validate | validate the whole form. Takes a callback as a param. After validation, the callback will be executed with two params: a boolean indicating if the validation has passed, and an object containing all fields that fail the validation. Returns a promise if callback is omitted | Function(callback: Function(boolean, object)) |
-| validateField | validate one or serveral form items | Function(props: string | array, callback: Function(errorMessage: string)) |
+| validateField | validate one or several form items | Function(props: string \| array, callback: Function(errorMessage: string)) |
 | resetFields | reset all the fields and remove validation result | — |
-| clearValidate | clear validation message for certain fields. The parameter is prop name or an array of prop names of the form items whose validation messages will be removed. When omitted, all fields' validation messages will be cleared | Function(props: string | array) |
+| clearValidate | clear validation message for certain fields. The parameter is prop name or an array of prop names of the form items whose validation messages will be removed. When omitted, all fields' validation messages will be cleared | Function(props: string \| array) |
 
 ### Form Events
 | Event Name | Description | Parameters |
@@ -866,7 +623,7 @@ All components in a Form inherit their `size` attribute from that Form. Similarl
 | ---- | ----| ---- | ---- | ---- |
 | prop | a key of `model`. In the use of validate and resetFields method, the attribute is required | string | keys of model that passed to `form` |
 | label | label | string | — | — |
-| label-width | width of label, e.g. '50px' | string | — | — |
+| label-width | width of label, e.g. '50px'. Width `auto` is supported. | string | — | — |
 | required | whether the field is required or not, will be determined by validation rules if omitted | boolean |  — | false |
 | rules | validation rules of form | object | — | — |
 | error | field error message, set its value and the field will validate error and show this message immediately | string | — | — |
diff --git a/examples/docs/en-US/i18n.md b/examples/docs/en-US/i18n.md
index 65aa126366d..8bbb2305a65 100644
--- a/examples/docs/en-US/i18n.md
+++ b/examples/docs/en-US/i18n.md
@@ -4,8 +4,8 @@ The default language of Element is Chinese. If you wish to use another language,
 
 ```javascript
 import Vue from 'vue'
-import ElementUI from 'element-ui'
-import locale from 'element-ui/lib/locale/lang/en'
+import ElementUI from '@femessage/element-ui'
+import locale from '@femessage/element-ui/lib/locale/lang/en'
 
 Vue.use(ElementUI, { locale })
 ```
@@ -14,9 +14,9 @@ Or if you are importing Element on demand:
 
 ```javascript
 import Vue from 'vue'
-import { Button, Select } from 'element-ui'
-import lang from 'element-ui/lib/locale/lang/en'
-import locale from 'element-ui/lib/locale'
+import { Button, Select } from '@femessage/element-ui'
+import lang from '@femessage/element-ui/lib/locale/lang/en'
+import locale from '@femessage/element-ui/lib/locale'
 
 // configure language
 locale.use(lang)
@@ -32,7 +32,7 @@ webpack.config.js
 ```javascript
 {
   plugins: [
-    new webpack.NormalModuleReplacementPlugin(/element-ui[\/\\]lib[\/\\]locale[\/\\]lang[\/\\]zh-CN/, 'element-ui/lib/locale/lang/en')
+    new webpack.NormalModuleReplacementPlugin(/@femessage[\/\\]element-ui[\/\\]lib[\/\\]locale[\/\\]lang[\/\\]zh-CN/, '@femessage/element-ui/lib/locale/lang/en')
   ]
 }
 ```
@@ -44,9 +44,9 @@ Element is compatible with [vue-i18n@5.x](https://github.com/kazupon/vue-i18n),
 ```javascript
 import Vue from 'vue'
 import VueI18n from 'vue-i18n'
-import Element from 'element-ui'
-import enLocale from 'element-ui/lib/locale/lang/en'
-import zhLocale from 'element-ui/lib/locale/lang/zh-CN'
+import Element from '@femessage/element-ui'
+import enLocale from '@femessage/element-ui/lib/locale/lang/en'
+import zhLocale from '@femessage/element-ui/lib/locale/lang/zh-CN'
 
 Vue.use(VueI18n)
 Vue.use(Element)
@@ -61,9 +61,9 @@ Element may not be compatible with i18n plugins other than vue-i18n, but you can
 
 ```javascript
 import Vue from 'vue'
-import Element from 'element-ui'
-import enLocale from 'element-ui/lib/locale/lang/en'
-import zhLocale from 'element-ui/lib/locale/lang/zh-CN'
+import Element from '@femessage/element-ui'
+import enLocale from '@femessage/element-ui/lib/locale/lang/en'
+import zhLocale from '@femessage/element-ui/lib/locale/lang/zh-CN'
 
 Vue.use(Element, {
   i18n: function (path, options) {
@@ -78,10 +78,10 @@ You need to manually handle it for compatibility with `6.x`.
 
 ```javascript
 import Vue from 'vue'
-import Element from 'element-ui'
+import Element from '@femessage/element-ui'
 import VueI18n from 'vue-i18n'
-import enLocale from 'element-ui/lib/locale/lang/en'
-import zhLocale from 'element-ui/lib/locale/lang/zh-CN'
+import enLocale from '@femessage/element-ui/lib/locale/lang/en'
+import zhLocale from '@femessage/element-ui/lib/locale/lang/zh-CN'
 
 Vue.use(VueI18n)
 
@@ -115,9 +115,9 @@ import Vue from 'vue'
 import DatePicker from 'element/lib/date-picker'
 import VueI18n from 'vue-i18n'
 
-import enLocale from 'element-ui/lib/locale/lang/en'
-import zhLocale from 'element-ui/lib/locale/lang/zh-CN'
-import ElementLocale from 'element-ui/lib/locale'
+import enLocale from '@femessage/element-ui/lib/locale/lang/en'
+import zhLocale from '@femessage/element-ui/lib/locale/lang/zh-CN'
+import ElementLocale from '@femessage/element-ui/lib/locale'
 
 Vue.use(VueI18n)
 Vue.use(DatePicker)
@@ -145,8 +145,8 @@ ElementLocale.i18n((key, value) => i18n.t(key, value))
 
 ```html
 <script src="//unpkg.com/vue"></script>
-<script src="//unpkg.com/element-ui"></script>
-<script src="//unpkg.com/element-ui/lib/umd/locale/en.js"></script>
+<script src="//unpkg.com/@femessage/element-ui"></script>
+<script src="//unpkg.com/@femessage/element-ui/lib/umd/locale/en.js"></script>
 
 <script>
   ELEMENT.locale(ELEMENT.lang.en)
@@ -158,9 +158,9 @@ Compatible with `vue-i18n`
 ```html
 <script src="//unpkg.com/vue"></script>
 <script src="//unpkg.com/vue-i18n/dist/vue-i18n.js"></script>
-<script src="//unpkg.com/element-ui"></script>
-<script src="//unpkg.com/element-ui/lib/umd/locale/zh-CN.js"></script>
-<script src="//unpkg.com/element-ui/lib/umd/locale/en.js"></script>
+<script src="//unpkg.com/@femessage/element-ui"></script>
+<script src="//unpkg.com/@femessage/element-ui/lib/umd/locale/zh-CN.js"></script>
+<script src="//unpkg.com/@femessage/element-ui/lib/umd/locale/en.js"></script>
 
 <script>
   Vue.locale('en', ELEMENT.lang.en)
@@ -217,6 +217,10 @@ Currently Element ships with the following languages:
   <li>Khmer (km)</li>
   <li>Serbian (sr)</li>
   <li>Basque (eu)</li>
+  <li>Kyrgyz (kg)</li>
+  <li>Armenian (hy)</li>
+  <li>Croatian (hr)</li>
+  <li>Esperanto (eo)</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/dev/src/locale/lang) and create a pull request.
+If your target language is not included, you are more than welcome to contribute: just add another language config [here](https://github.com/femessage/element/tree/dev/src/locale/lang) and create a pull request.
diff --git a/examples/docs/en-US/icon-checkbox.md b/examples/docs/en-US/icon-checkbox.md
new file mode 100644
index 00000000000..232335c8ee7
--- /dev/null
+++ b/examples/docs/en-US/icon-checkbox.md
@@ -0,0 +1 @@
+## IconCheckbox
diff --git a/examples/docs/en-US/icon.md b/examples/docs/en-US/icon.md
index b5b295c5220..b7cc5dc7726 100644
--- a/examples/docs/en-US/icon.md
+++ b/examples/docs/en-US/icon.md
@@ -1,76 +1,3 @@
-<script>
-  var iconList = require('examples/icon.json');
-
-  export default {
-    data() {
-      return {
-        icons: iconList
-      };
-    }
-  }
-</script>
-
-<style>
-  .demo-icon .source > i {
-    color: #606266;
-    margin: 0 20px;
-    font-size: 1.5em;
-    vertical-align: middle;
-  }
-
-  .demo-icon .source > button {
-    margin: 0 20px;
-  }
-
-  .page-component .content > ul.icon-list {
-    overflow: hidden;
-    list-style: none;
-    padding: 0;
-    border: solid 1px #eaeefb;
-    border-radius: 4px;
-  }
-  .icon-list li {
-    float: left;
-    width: 16.66%;
-    text-align: center;
-    height: 120px;
-    line-height: 120px;
-    color: #666;
-    font-size: 13px;
-    transition: color .15s linear;
-
-    border-right: 1px solid #eee;
-    border-bottom: 1px solid #eee;
-    margin-right: -1px;
-    margin-bottom: -1px;
-
-    @utils-vertical-center;
-
-    span {
-      display: inline-block;
-      line-height: normal;
-      vertical-align: middle;
-      font-family: 'Helvetica Neue',Helvetica,'PingFang SC','Hiragino Sans GB','Microsoft YaHei',SimSun,sans-serif;
-      color: #99a9bf;
-    }
-    i {
-      display: block;
-      font-size: 32px;
-      margin-bottom: 15px;
-      color: #606266;
-    }
-    .icon-name {
-      display: inline-block;
-      padding: 0 3px;
-      height: 1em;
-      color: #606266;
-    }
-    &:hover {
-      color: rgb(92, 182, 255);
-    }
-  }
-</style>
-
 ## Icon
 
 Element provides a set of common icons.
@@ -93,7 +20,7 @@ Just assign the class name to `el-icon-iconName`.
 ### Icons
 
 <ul class="icon-list">
-  <li v-for="name in icons" :key="name">
+  <li v-for="name in $icon" :key="name">
     <span>
       <i :class="'el-icon-' + name"></i>
       <span class="icon-name">{{'el-icon-' + name}}</span>
diff --git a/examples/docs/en-US/image.md b/examples/docs/en-US/image.md
new file mode 100644
index 00000000000..92dc90a8208
--- /dev/null
+++ b/examples/docs/en-US/image.md
@@ -0,0 +1,163 @@
+## Image
+Besides the native features of img, support lazy load, custom placeholder and load failure, etc.
+
+### Basic Usage
+
+:::demo Indicate how the image should be resized to fit its container by `fit`, same as native [object-fit](https://developer.mozilla.org/en-US/docs/Web/CSS/object-fit)。
+```html
+<div class="demo-image">
+  <div class="block" v-for="fit in fits" :key="fit">
+    <span class="demonstration">{{ fit }}</span>
+    <el-image
+      style="width: 100px; height: 100px"
+      :src="url"
+      :fit="fit"></el-image>
+  </div>
+</div>
+
+<script>
+  export default {
+    data() {
+      return {
+        fits: ['fill', 'contain', 'cover', 'none', 'scale-down'],
+        url: 'https://fuss10.elemecdn.com/e/5d/4a731a90594a4af544c0c25941171jpeg.jpeg'
+      }
+    }
+  }
+</script>
+```
+:::
+
+### Placeholder
+
+:::demo Custom placeholder content when image hasn't loaded yet by `slot = placeholder`
+```html
+<div class="demo-image__placeholder">
+  <div class="block">
+    <span class="demonstration">Default</span>
+    <el-image :src="src"></el-image>
+  </div>
+  <div class="block">
+    <span class="demonstration">Custom</span>
+    <el-image :src="src">
+      <div slot="placeholder" class="image-slot">
+        Loading<span class="dot">...</span>
+      </div>
+    </el-image>
+  </div>
+</div>
+
+<script>
+  export default {
+    data() {
+      return {
+        src: 'https://cube.elemecdn.com/6/94/4d3ea53c084bad6931a56d5158a48jpeg.jpeg'
+      }
+    }
+  }
+</script>
+```
+:::
+
+### Load Failed
+
+:::demo Custom failed content when error occurs to image load by `slot = error`
+```html
+<div class="demo-image__error">
+  <div class="block">
+    <span class="demonstration">Default</span>
+    <el-image></el-image>
+  </div>
+  <div class="block">
+    <span class="demonstration">Custom</span>
+    <el-image>
+      <div slot="error" class="image-slot">
+        <i class="el-icon-picture-outline"></i>
+      </div>
+    </el-image>
+  </div>
+</div>
+```
+:::
+
+### Lazy Load
+
+:::demo Use lazy load by `lazy = true`. Image will load until scroll into view when set. You can indicate scroll container that adds scroll listener to by `scroll-container`. If undefined, will be the nearest parent container whose overflow property is auto or scroll.
+```html
+<div class="demo-image__lazy">
+  <el-image v-for="url in urls" :key="url" :src="url" lazy></el-image>
+</div>
+
+<script>
+  export default {
+    data() {
+      return {
+        urls: [
+          'https://fuss10.elemecdn.com/a/3f/3302e58f9a181d2509f3dc0fa68b0jpeg.jpeg',
+          'https://fuss10.elemecdn.com/1/34/19aa98b1fcb2781c4fba33d850549jpeg.jpeg',
+          'https://fuss10.elemecdn.com/0/6f/e35ff375812e6b0020b6b4e8f9583jpeg.jpeg',
+          'https://fuss10.elemecdn.com/9/bb/e27858e973f5d7d3904835f46abbdjpeg.jpeg',
+          'https://fuss10.elemecdn.com/d/e6/c4d93a3805b3ce3f323f7974e6f78jpeg.jpeg',
+          'https://fuss10.elemecdn.com/3/28/bbf893f792f03a54408b3b7a7ebf0jpeg.jpeg',
+          'https://fuss10.elemecdn.com/2/11/6535bcfb26e4c79b48ddde44f4b6fjpeg.jpeg'
+        ]
+      }
+    }
+  }
+</script>
+```
+:::
+
+### Image Preview
+
+:::demo allow big image preview by setting `previewSrcList` prop.
+```html
+<div class="demo-image__preview">
+  <el-image 
+    style="width: 100px; height: 100px"
+    :src="url" 
+    :preview-src-list="srcList">
+  </el-image>
+</div>
+
+<script>
+  export default {
+    data() {
+      return {
+        url: 'https://fuss10.elemecdn.com/e/5d/4a731a90594a4af544c0c25941171jpeg.jpeg',
+        srcList: [
+          'https://fuss10.elemecdn.com/8/27/f01c15bb73e1ef3793e64e6b7bbccjpeg.jpeg',
+          'https://fuss10.elemecdn.com/1/8e/aeffeb4de74e2fde4bd74fc7b4486jpeg.jpeg'
+        ]
+      }
+    }
+  }
+</script>
+```
+:::
+
+### Attributes
+| Attribute | Description | Type  | Accepted values | Default   |
+|---------- |-------- |---------- |-------------  |-------- |
+| src | Image source, same as native | string | — | - |
+| fit | Indicate how the image should be resized to fit its container, same as [object-fit](https://developer.mozilla.org/en-US/docs/Web/CSS/object-fit) | string | fill / contain / cover / none / scale-down | - |
+| alt | Native alt | string | - | - |
+| referrer-policy | Native referrerPolicy | string | - | - |
+| lazy | Whether to use lazy load | boolean | — | false |
+| scroll-container | The container to add scroll listener when using lazy load | string / HTMLElement | — | The nearest parent container whose overflow property is auto or scroll |
+| preview-src-list | allow big image preview | Array | — | - |
+| z-index | set image preview z-index | Number | — | 2000 |
+
+### Events
+| Event Name | Description | Parameters |
+|---------- |-------- |---------- |
+| load | Same as native load | (e: Event) |
+| error | Same as native error | (e: Error) |
+
+### Slots
+| Slot Name | Description |
+|---------|-------------|
+| placeholder | Triggers when image load |
+| error | Triggers when image load failed |
+
+
diff --git a/examples/docs/en-US/infiniteScroll.md b/examples/docs/en-US/infiniteScroll.md
new file mode 100644
index 00000000000..1e8657c0ba7
--- /dev/null
+++ b/examples/docs/en-US/infiniteScroll.md
@@ -0,0 +1,87 @@
+## InfiniteScroll
+
+Load more data while reach bottom of the page
+
+### Basic usage
+Add `v-infinite-scroll` to the list to automatically execute loading method when scrolling to the bottom.
+:::demo
+```html
+<template>
+  <ul class="infinite-list" v-infinite-scroll="load" style="overflow:auto">
+    <li v-for="i in count" class="infinite-list-item">{{ i }}</li>
+  </ul>
+</template>
+
+<script>
+  export default {
+    data () {
+      return {
+        count: 0
+      }
+    },
+    methods: {
+      load () {
+        this.count += 2
+      }
+    }
+  }
+</script>
+```
+:::
+
+### Disable Loading
+
+:::demo
+```html
+<template>
+  <div class="infinite-list-wrapper" style="overflow:auto">
+    <ul
+      class="list"
+      v-infinite-scroll="load"
+      infinite-scroll-disabled="disabled">
+      <li v-for="i in count" class="list-item">{{ i }}</li>
+    </ul>
+    <p v-if="loading">Loading...</p>
+    <p v-if="noMore">No more</p>
+  </div>
+</template>
+
+<script>
+  export default {
+    data () {
+      return {
+        count: 10,
+        loading: false
+      }
+    },
+    computed: {
+      noMore () {
+        return this.count >= 20
+      },
+      disabled () {
+        return this.loading || this.noMore
+      }
+    },
+    methods: {
+      load () {
+        this.loading = true
+        setTimeout(() => {
+          this.count += 2
+          this.loading = false
+        }, 2000)
+      }
+    }
+  }
+</script>
+```
+:::
+
+
+### Attributes
+
+| Attribute | Description | Type  | Accepted values | Default   |
+| -------------- | ------------------------------ | --------- | ------------------------------------ | ------- |
+| infinite-scroll-disabled | is disabled           | boolean      | - |false |
+| infinite-scroll-delay   | throttle delay (ms)   | number       |   - |200   |
+| infinite-scroll-distance| trigger distance (px) | number   |- |0 |
+| infinite-scroll-immediate |Whether to execute the loading method immediately, in case the content cannot be filled up in the initial state. | boolean | - |true |
diff --git a/examples/docs/en-US/input-email.md b/examples/docs/en-US/input-email.md
new file mode 100644
index 00000000000..b7d6d9f8798
--- /dev/null
+++ b/examples/docs/en-US/input-email.md
@@ -0,0 +1 @@
+## InputEmail
diff --git a/examples/docs/en-US/input-id-card.md b/examples/docs/en-US/input-id-card.md
new file mode 100644
index 00000000000..ab7abe5624d
--- /dev/null
+++ b/examples/docs/en-US/input-id-card.md
@@ -0,0 +1 @@
+## InputIdCard
diff --git a/examples/docs/en-US/input-number.md b/examples/docs/en-US/input-number.md
index bc6d5b0b3d8..369829d1242 100644
--- a/examples/docs/en-US/input-number.md
+++ b/examples/docs/en-US/input-number.md
@@ -1,34 +1,3 @@
-<script>
-  export default {
-    data() {
-      return {
-        num1: 1,
-        num2: 1,
-        num3: 5,
-        num4: 1,
-        num5: 1,
-        num6: 1,
-        num7: 1,
-        num8: 1,
-        num9: 1
-      }
-    },
-    methods: {
-      handleChange(value) {
-        console.log(value);
-      }
-    }
-  };
-</script>
-
-<style>
-  .demo-box.demo-input-number {
-    .el-input-number + .el-input-number {
-      margin-left: 10px;
-    }
-  }
-</style>
-
 ## InputNumber
 
 Input numerical values with a customizable range.
@@ -39,13 +8,13 @@ Input numerical values with a customizable range.
 
 ```html
 <template>
-  <el-input-number v-model="num1" @change="handleChange" :min="1" :max="10"></el-input-number>
+  <el-input-number v-model="num" @change="handleChange" :min="1" :max="10"></el-input-number>
 </template>
 <script>
   export default {
     data() {
       return {
-        num1: 1
+        num: 1
       };
     },
     methods: {
@@ -64,13 +33,13 @@ Input numerical values with a customizable range.
 
 ```html
 <template>
-  <el-input-number v-model="num2" :disabled="true"></el-input-number>
+  <el-input-number v-model="num" :disabled="true"></el-input-number>
 </template>
 <script>
   export default {
     data() {
       return {
-        num2: 1
+        num: 1
       }
     }
   };
@@ -86,13 +55,33 @@ Allows you to define incremental steps.
 
 ```html
 <template>
-  <el-input-number v-model="num3" :step="2"></el-input-number>
+  <el-input-number v-model="num" :step="2"></el-input-number>
 </template>
 <script>
   export default {
     data() {
       return {
-        num3: 5
+        num: 5
+      }
+    }
+  };
+</script>
+```
+:::
+
+### Step strictly
+
+:::demo The `step-strictly` attribute accepts a `boolean`. if this attribute is `true`, input value can only be multiple of step.
+
+```html
+<template>
+  <el-input-number v-model="num" :step="2" step-strictly></el-input-number>
+</template>
+<script>
+  export default {
+    data() {
+      return {
+        num: 2
       }
     }
   };
@@ -106,13 +95,13 @@ Allows you to define incremental steps.
 
 ```html
 <template>
-  <el-input-number v-model="num9" :precision="2" :step="0.1" :max="10"></el-input-number>
+  <el-input-number v-model="num" :precision="2" :step="0.1" :max="10"></el-input-number>
 </template>
 <script>
   export default {
     data() {
       return {
-        num9: 1
+        num: 1
       }
     }
   };
@@ -133,19 +122,19 @@ Use attribute `size` to set additional sizes with `medium`, `small` or `mini`.
 
 ```html
 <template>
-  <el-input-number v-model="num4"></el-input-number>
-    <el-input-number size="medium" v-model="num5"></el-input-number>
-    <el-input-number size="small" v-model="num6"></el-input-number>
-    <el-input-number size="mini" v-model="num7"></el-input-number>
+  <el-input-number v-model="num1"></el-input-number>
+    <el-input-number size="medium" v-model="num2"></el-input-number>
+    <el-input-number size="small" v-model="num3"></el-input-number>
+    <el-input-number size="mini" v-model="num4"></el-input-number>
 </template>
 <script>
   export default {
     data() {
       return {
-        num4: 1,
-        num5: 1,
-        num6: 1,
-        num7: 1
+        num1: 1,
+        num2: 1,
+        num3: 1,
+        num4: 1
       }
     }
   };
@@ -158,13 +147,13 @@ Use attribute `size` to set additional sizes with `medium`, `small` or `mini`.
 :::demo Set `controls-position` to decide the position of control buttons.
 ```html
 <template>
-  <el-input-number v-model="num8" controls-position="right" @change="handleChange" :min="1" :max="10"></el-input-number>
+  <el-input-number v-model="num" controls-position="right" @change="handleChange" :min="1" :max="10"></el-input-number>
 </template>
 <script>
   export default {
     data() {
       return {
-        num8: 1
+        num: 1
       };
     },
     methods: {
@@ -181,10 +170,11 @@ Use attribute `size` to set additional sizes with `medium`, `small` or `mini`.
 
 | Attribute      | Description          | Type      | Accepted Values       | Default  |
 |----| ----| ---| ----| -----|
-|value | binding value| number | — | — |
+|value / v-model | binding value| number | — | 0 |
 |min | the minimum allowed value | number | — | `-Infinity` |
 |max | the maximum allowed value | number | — | `Infinity` |
 |step | incremental step | number | — | 1 |
+|step-strictly | whether input value can only be multiple of step | number   | — | false |
 |precision | precision of input value | number | — | — |
 |size | size of the component | string | large/small| — |
 |disabled| whether the component is disabled | boolean | — | false |
@@ -198,7 +188,7 @@ Use attribute `size` to set additional sizes with `medium`, `small` or `mini`.
 
 | Event Name | Description | Parameters |
 |----| ---- | -----|
-|change | triggers when the value changes | value after change |
+|change | triggers when the value changes | currentValue, oldValue |
 | blur | triggers when Input blurs | (event: Event) |
 | focus | triggers when Input focuses | (event: Event) |
 
diff --git a/examples/docs/en-US/input-phone.md b/examples/docs/en-US/input-phone.md
new file mode 100644
index 00000000000..defde569d5b
--- /dev/null
+++ b/examples/docs/en-US/input-phone.md
@@ -0,0 +1 @@
+## InputPhone
diff --git a/examples/docs/en-US/input-url.md b/examples/docs/en-US/input-url.md
new file mode 100644
index 00000000000..2f61fb034ac
--- /dev/null
+++ b/examples/docs/en-US/input-url.md
@@ -0,0 +1 @@
+## InputUrl
diff --git a/examples/docs/en-US/input.md b/examples/docs/en-US/input.md
index 19ee9532e68..eaceb745a11 100644
--- a/examples/docs/en-US/input.md
+++ b/examples/docs/en-US/input.md
@@ -1,151 +1,15 @@
-<script>
-  export default {
-    data() {
-      return {
-        links: [],
-        input: '',
-        input1: '',
-        input2: '',
-        input21: '',
-        input22: '',
-        input23: '',
-        input3: '',
-        input4: '',
-        input5: '',
-        input6: '',
-        input7: '',
-        input8: '',
-        input9: '',
-        input10: '',
-        textarea: '',
-        textarea2: '',
-        textarea3: '',
-        select: '',
-        state1: '',
-        state2: '',
-        state3: '',
-        state4: ''
-      };
-    },
-    methods: {
-      loadAll() {
-        return [
-          { "value": "vue", "link": "https://github.com/vuejs/vue" },
-          { "value": "element", "link": "https://github.com/ElemeFE/element" },
-          { "value": "cooking", "link": "https://github.com/ElemeFE/cooking" },
-          { "value": "mint-ui", "link": "https://github.com/ElemeFE/mint-ui" },
-          { "value": "vuex", "link": "https://github.com/vuejs/vuex" },
-          { "value": "vue-router", "link": "https://github.com/vuejs/vue-router" },
-          { "value": "babel", "link": "https://github.com/babel/babel" }
-        ];
-      },
-      querySearch(queryString, cb) {
-        var links = this.links;
-        var results = queryString ? links.filter(this.createStateFilter(queryString)) : links;
-
-        cb(results);
-      },
-      querySearchAsync(queryString, cb) {
-        var links = this.links;
-        var results = queryString ? links.filter(this.createStateFilter(queryString)) : links;
-
-        clearTimeout(this.timeout);
-        this.timeout = setTimeout(() => {
-          cb(results);
-        }, 3000 * Math.random());
-      },
-      createStateFilter(queryString) {
-        return (state) => {
-          return (state.value.toLowerCase().indexOf(queryString.toLowerCase()) === 0);
-        };
-      },
-      handleSelect(item) {
-        console.log(item);
-      },
-      handleIconClick(ev) {
-        console.log(ev);
-      }
-    },
-    mounted() {
-      this.links = this.loadAll();
-    }
-  };
-</script>
-
-<style>
-  .demo-input.demo-en-US {
-    .el-select .el-input {
-      width: 130px;
-    }
-    .el-input {
-      width: 180px;
-    }
-    .el-textarea {
-      width: 414px;
-    }
-    .el-input-group {
-      width: 100%;
-    }
-    .demo-input-size {
-      .el-input {
-        vertical-align: top;
-        margin: 0 10px 10px 0;
-      }
-    }
-    .demo-input-suffix {
-      padding: 10px;
-    }
-    .demo-input-suffix .el-input {
-      margin-right: 15px;
-    }
-    .demo-input-label {
-      display: inline-block;
-      width: 130px;
-    }
-    .input-with-select .el-input-group__prepend {
-      background-color: #fff;
-    }
-    .demo-autocomplete {
-      text-align: center;
+## Input
 
-      .sub-title {
-        margin-bottom: 10px;
-        font-size: 14px;
-        color: #8492a6;
-      }
+Input data using mouse or keyboard.
 
-      .el-col:not(:last-child) {
-        border-right: 1px solid rgba(224,230,237,0.50);
-      }
+:::warning
+Input is a controlled component, it **always shows Vue binding value**.
 
-      .el-autocomplete {
-        text-align: left;
-      }
-    }
-  }
-  .el-autocomplete-suggestion.my-autocomplete {
-    li {
-      line-height: normal;
-      padding: 7px *;
+Under normal circumstances, `input` event should be handled. Its handler should update component's binding value (or use `v-model`). Otherwise, input box's value will not change.
 
-      .name {
-        text-overflow: ellipsis;
-        overflow: hidden;
-      }
-      .addr {
-        font-size: 12px;
-        color: #b4b4b4;
-      }
-      .highlighted .addr {
-        color: #ddd;
-      }
-    }
-  }
-</style>
-
-## Input
+Do not support `v-model` modifiers.
+:::
 
-Input data using mouse or keyboard.
 
 ### Basic usage
 
@@ -173,7 +37,7 @@ export default {
 ```html
 <el-input
   placeholder="Please input"
-  v-model="input1"
+  v-model="input"
   :disabled="true">
 </el-input>
 
@@ -181,7 +45,7 @@ export default {
 export default {
   data() {
     return {
-      input1: ''
+      input: ''
     }
   }
 }
@@ -196,7 +60,7 @@ export default {
 ```html
 <el-input
   placeholder="Please input"
-  v-model="input10"
+  v-model="input"
   clearable>
 </el-input>
 
@@ -204,7 +68,7 @@ export default {
 export default {
   data() {
     return {
-      input10: ''
+      input: ''
     }
   }
 }
@@ -212,6 +76,25 @@ export default {
 ```
 :::
 
+### Password box
+
+:::demo Make a toggleable password Input with the `show-password` attribute.
+
+```html
+<el-input placeholder="Please input password" v-model="input" show-password></el-input>
+
+<script>
+  export default {
+    data() {
+      return {
+        input: ''
+      }
+    }
+  }
+</script>
+```
+:::
+
 ### Input with icon
 
 Add an icon to indicate input type.
@@ -223,24 +106,24 @@ Add an icon to indicate input type.
   <el-input
     placeholder="Pick a date"
     suffix-icon="el-icon-date"
-    v-model="input2">
+    v-model="input1">
   </el-input>
   <el-input
     placeholder="Type something"
     prefix-icon="el-icon-search"
-    v-model="input21">
+    v-model="input2">
   </el-input>
 </div>
 <div class="demo-input-suffix">
   <span class="demo-input-label">Using slots</span>
   <el-input
     placeholder="Pick a date"
-    v-model="input22">
+    v-model="input3">
     <i slot="suffix" class="el-input__icon el-icon-date"></i>
   </el-input>
   <el-input
     placeholder="Type something"
-    v-model="input23">
+    v-model="input4">
     <i slot="prefix" class="el-input__icon el-icon-search"></i>
   </el-input>
 </div>
@@ -256,10 +139,10 @@ Add an icon to indicate input type.
 export default {
   data() {
     return {
+      input1: '',
       input2: '',
-      input21: '',
-      input22: '',
-      input23: ''
+      input3: '',
+      input4: ''
     }
   }
 }
@@ -304,22 +187,22 @@ Setting the `autosize` prop for a textarea type of Input makes the height to aut
   type="textarea"
   autosize
   placeholder="Please input"
-  v-model="textarea2">
+  v-model="textarea1">
 </el-input>
 <div style="margin: 20px 0;"></div>
 <el-input
   type="textarea"
   :autosize="{ minRows: 2, maxRows: 4}"
   placeholder="Please input"
-  v-model="textarea3">
+  v-model="textarea2">
 </el-input>
 
 <script>
 export default {
   data() {
     return {
-      textarea2: '',
-      textarea3: ''
+      textarea1: '',
+      textarea2: ''
     }
   }
 }
@@ -335,17 +218,17 @@ Prepend or append an element, generally a label or a button.
 
 ```html
 <div>
-  <el-input placeholder="Please input" v-model="input3">
+  <el-input placeholder="Please input" v-model="input1">
     <template slot="prepend">Http://</template>
   </el-input>
 </div>
 <div style="margin-top: 15px;">
-  <el-input placeholder="Please input" v-model="input4">
+  <el-input placeholder="Please input" v-model="input2">
     <template slot="append">.com</template>
   </el-input>
 </div>
 <div style="margin-top: 15px;">
-  <el-input placeholder="Please input" v-model="input5" class="input-with-select">
+  <el-input placeholder="Please input" v-model="input3" class="input-with-select">
     <el-select v-model="select" slot="prepend" placeholder="Select">
       <el-option label="Restaurant" value="1"></el-option>
       <el-option label="Order No." value="2"></el-option>
@@ -367,9 +250,9 @@ Prepend or append an element, generally a label or a button.
 export default {
   data() {
     return {
+      input1: '',
+      input2: '',
       input3: '',
-      input4: '',
-      input5: '',
       select: ''
     }
   }
@@ -385,22 +268,22 @@ export default {
 <div class="demo-input-size">
   <el-input
     placeholder="Please Input"
-    v-model="input6">
+    v-model="input1">
   </el-input>
   <el-input
     size="medium"
     placeholder="Please Input"
-    v-model="input7">
+    v-model="input2">
   </el-input>
   <el-input
     size="small"
     placeholder="Please Input"
-    v-model="input8">
+    v-model="input3">
   </el-input>
   <el-input
     size="mini"
     placeholder="Please Input"
-    v-model="input9">
+    v-model="input4">
   </el-input>
 </div>
 
@@ -408,10 +291,10 @@ export default {
 export default {
   data() {
     return {
-      input6: '',
-      input7: '',
-      input8: '',
-      input9: ''
+      input1: '',
+      input2: '',
+      input3: '',
+      input4: ''
     }
   }
 }
@@ -472,7 +355,7 @@ You can get some recommended tips based on the current input.
       loadAll() {
         return [
           { "value": "vue", "link": "https://github.com/vuejs/vue" },
-          { "value": "element", "link": "https://github.com/ElemeFE/element" },
+          { "value": "element", "link": "https://github.com/femessage/element" },
           { "value": "cooking", "link": "https://github.com/ElemeFE/cooking" },
           { "value": "mint-ui", "link": "https://github.com/ElemeFE/mint-ui" },
           { "value": "vuex", "link": "https://github.com/vuejs/vuex" },
@@ -500,7 +383,7 @@ Customize how suggestions are displayed.
 ```html
 <el-autocomplete
   popper-class="my-autocomplete"
-  v-model="state3"
+  v-model="state"
   :fetch-suggestions="querySearch"
   placeholder="Please input"
   @select="handleSelect">
@@ -538,7 +421,7 @@ Customize how suggestions are displayed.
     data() {
       return {
         links: [],
-        state3: ''
+        state: ''
       };
     },
     methods: {
@@ -556,7 +439,7 @@ Customize how suggestions are displayed.
       loadAll() {
         return [
           { "value": "vue", "link": "https://github.com/vuejs/vue" },
-          { "value": "element", "link": "https://github.com/ElemeFE/element" },
+          { "value": "element", "link": "https://github.com/femessage/element" },
           { "value": "cooking", "link": "https://github.com/ElemeFE/cooking" },
           { "value": "mint-ui", "link": "https://github.com/ElemeFE/mint-ui" },
           { "value": "vuex", "link": "https://github.com/vuejs/vuex" },
@@ -586,7 +469,7 @@ Search data from server-side.
 :::demo
 ```html
 <el-autocomplete
-  v-model="state4"
+  v-model="state"
   :fetch-suggestions="querySearchAsync"
   placeholder="Please input"
   @select="handleSelect"
@@ -596,7 +479,7 @@ Search data from server-side.
     data() {
       return {
         links: [],
-        state4: '',
+        state: '',
         timeout:  null
       };
     },
@@ -604,7 +487,7 @@ Search data from server-side.
       loadAll() {
         return [
           { "value": "vue", "link": "https://github.com/vuejs/vue" },
-          { "value": "element", "link": "https://github.com/ElemeFE/element" },
+          { "value": "element", "link": "https://github.com/femessage/element" },
           { "value": "cooking", "link": "https://github.com/ElemeFE/cooking" },
           { "value": "mint-ui", "link": "https://github.com/ElemeFE/mint-ui" },
           { "value": "vuex", "link": "https://github.com/vuejs/vuex" },
@@ -638,16 +521,54 @@ Search data from server-side.
 ```
 :::
 
+### Limit length
+
+:::demo `maxlength` and `minlength` are attributes of native input, they declare a limit on the number of characters a user can input. The "number of characters" is measured using JavaScript string length.Setting the `maxlength` prop for a text or textarea type of Input can limit the length of input value, allows you to show word count by setting `show-word-limit` to `true` at the same time.
+
+```html
+<el-input
+  type="text"
+  placeholder="Please input"
+  v-model="text"
+  maxlength="10"
+  show-word-limit
+>
+</el-input>
+<div style="margin: 20px 0;"></div>
+<el-input
+  type="textarea"
+  placeholder="Please input"
+  v-model="textarea"
+  maxlength="30"
+  show-word-limit
+>
+</el-input>
+
+<script>
+export default {
+  data() {
+    return {
+      text: '',
+      textarea: ''
+    }
+  }
+}
+</script>
+```
+:::
+
 ### Input Attributes
 
 | Attribute      | Description          | Type      | Accepted Values       | Default  |
 | ----| ----| ----| ---- | ----- |
 |type| type of input | string | text, textarea and other [native input types](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input#Form_%3Cinput%3E_types) | text |
-|value| binding value | string / number| — | — |
+|value / v-model| binding value | string / number| — | — |
 |maxlength| same as `maxlength` in native input | number| — | — |
 |minlength| same as `minlength` in native input | number | — | — |
+|show-word-limit | whether show word count，only works when `type` is 'text' or 'textarea' | boolean    |  —  | false |
 |placeholder| placeholder of Input| string | — | — |
 | clearable | whether to show clear button | boolean | — | false |
+| show-password | whether to show toggleable password input| boolean         | — | false |
 |disabled | whether Input is disabled | boolean | — | false |
 |size | size of Input, works when `type` is not 'textarea' | string | medium / small / mini | — |
 | prefix-icon   | prefix icon class  | string          | — | — |
@@ -666,7 +587,7 @@ Search data from server-side.
 |form | same as `form` in native input | string | — | — |
 | label | label text | string | — | — |
 | tabindex | input tabindex | string | - | - |
-| validate-event | whether to trigger form validation | boolean | - | - |
+| validate-event | whether to trigger form validation | boolean | - | true |
 
 ### Input slots
 
@@ -683,7 +604,8 @@ Search data from server-side.
 |----| ----| ----|
 | blur | triggers when Input blurs | (event: Event) |
 | focus | triggers when Input focuses | (event: Event) |
-| change | triggers when the icon inside Input value change | (value: string \| number) |
+| change | triggers only when the input box loses focus or the user presses Enter | (value: string \| number) |
+| input | triggers when the Input value change | (value: string \| number) |
 | clear | triggers when the Input is cleared by clicking the clear button | — |
 
 ### Input Methods
@@ -716,6 +638,7 @@ Attribute | Description | Type | Options | Default
 | suffix-icon | suffix icon class | string | — | — |
 | hide-loading | whether to hide the loading icon in remote search | boolean | — | false |
 | popper-append-to-body | whether to append the dropdown to body. If the positioning of the dropdown is wrong, you can try to set this prop to false | boolean | - | true |
+| highlight-first-item | whether to highlight first item in remote search suggestions by default | boolean | — | false |
 
 ### Autocomplete Slots
 
diff --git a/examples/docs/en-US/installation.md b/examples/docs/en-US/installation.md
index 6bcad9919eb..93d51a34d96 100644
--- a/examples/docs/en-US/installation.md
+++ b/examples/docs/en-US/installation.md
@@ -10,13 +10,13 @@ npm i element-ui -S
 
 ### CDN
 
-Get the latest version from [unpkg.com/element-ui](https://unpkg.com/element-ui/) , and import JavaScript and CSS file in your page.
+Get the latest version from [unpkg.com/element-ui](https://unpkg.com/@femessage/element-ui/) , and import JavaScript and CSS file in your page.
 
 ```html
 <!-- import CSS -->
-<link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">
+<link rel="stylesheet" href="https://unpkg.com/@femessage/element-ui/lib/theme-chalk/index.css">
 <!-- import JavaScript -->
-<script src="https://unpkg.com/element-ui/lib/index.js"></script>
+<script src="https://unpkg.com/@femessage/element-ui/lib/index.js"></script>
 ```
 
 :::tip
@@ -25,8 +25,11 @@ We recommend our users to lock Element's version when using CDN. Please refer to
 
 ### Hello world
 
-If you are using CDN, a hello-world page is easy with Element. [Online Demo](https://jsfiddle.net/hzfpyvg6/14/)
+If you are using CDN, a hello-world page is easy with Element. [Online Demo](https://codepen.io/ziyoung/pen/rRKYpd)
 
-<iframe width="100%" height="600" src="//jsfiddle.net/hzfpyvg6/1213/embedded/html,result/" allowpaymentrequest allowfullscreen="allowfullscreen" frameborder="0"></iframe>
+<iframe height="265" style="width: 100%;" scrolling="no" title="Element demo" src="//codepen.io/ziyoung/embed/rRKYpd/?height=265&theme-id=light&default-tab=html" frameborder="no" allowtransparency="true" allowfullscreen="true">
+  See the Pen <a href='https://codepen.io/ziyoung/pen/rRKYpd/'>Element demo</a> by hetech
+  (<a href='https://codepen.io/ziyoung'>@ziyoung</a>) on <a href='https://codepen.io'>CodePen</a>.
+</iframe>
 
 If you are using npm and wish to apply webpack, please continue to the next page: [Quick Start](/#/en-US/component/quickstart).
diff --git a/examples/docs/en-US/layout.md b/examples/docs/en-US/layout.md
index fa6bf95e84f..daa540ee08b 100644
--- a/examples/docs/en-US/layout.md
+++ b/examples/docs/en-US/layout.md
@@ -1,34 +1,3 @@
-<style>
-  .demo-layout {
-    .el-row {
-      margin-bottom: 20px;
-      &:last-child {
-        margin-bottom: 0;
-      }
-    }
-    .el-col {
-      border-radius: 4px;
-    }
-    .bg-purple-dark {
-      background: #99a9bf;
-    }
-    .bg-purple {
-      background: #d3dce6;
-    }
-    .bg-purple-light {
-      background: #e5e9f2;
-    }
-    .grid-content {
-      border-radius: 4px;
-      min-height: 36px;
-    }
-    .row-bg {
-      padding: 10px 0;
-      background-color: #f9fafc;
-    }
-  }
-</style>
-
 ## Layout
 
 Quickly and easily create layouts with the basic 24-column.
@@ -346,7 +315,7 @@ Taking example by Bootstrap's responsive design, five breakpoints are preset: xs
 Additionally, Element provides a series of classes for hiding elements under certain conditions. These classes can be added to any DOM elements or custom components. You need to import the following CSS file to use these classes:
 
 ```js
-import 'element-ui/lib/theme-chalk/display.css';
+import '@femessage/element-ui/lib/theme-chalk/display.css';
 ```
 
 The classes are:
diff --git a/examples/docs/en-US/link.md b/examples/docs/en-US/link.md
new file mode 100644
index 00000000000..66859fa8967
--- /dev/null
+++ b/examples/docs/en-US/link.md
@@ -0,0 +1,77 @@
+## Link
+
+Text hyperlink
+
+### Basic
+
+Basic text link
+:::demo
+
+```html
+<div>
+  <el-link href="https://element.eleme.io" target="_blank">default</el-link>
+  <el-link type="primary">primary</el-link>
+  <el-link type="success">success</el-link>
+  <el-link type="warning">warning</el-link>
+  <el-link type="danger">danger</el-link>
+  <el-link type="info">info</el-link>
+</div>
+```
+
+:::
+
+### Disabled
+
+Disabled state of link
+:::demo
+
+```html
+<div>
+  <el-link disabled>default</el-link>
+  <el-link type="primary" disabled>primary</el-link>
+  <el-link type="success" disabled>success</el-link>
+  <el-link type="warning" disabled>warning</el-link>
+  <el-link type="danger" disabled>danger</el-link>
+  <el-link type="info" disabled>info</el-link>
+</div>
+```
+
+:::
+
+### Underline
+
+Underline of link
+:::demo
+
+```html
+<div>
+  <el-link :underline="false">Without Underline</el-link>
+  <el-link>With Underline</el-link>
+</div>
+```
+
+:::
+
+### Icon
+
+Link with icon
+:::demo
+
+```html
+<div>
+  <el-link icon="el-icon-edit">Edit</el-link>
+  <el-link>Check<i class="el-icon-view el-icon--right"></i> </el-link>
+</div>
+```
+
+:::
+
+### Attributes
+
+| Attribute | Description                         | Type    | Options                                     | Default |
+| --------- | ----------------------------------- | ------- | ------------------------------------------- | ------- |
+| type      | type                                | string  | primary / success / warning / danger / info | default |
+| underline | whether the component has underline | boolean | —                                           | true    |
+| disabled  | whether the component is disabled   | boolean | —                                           | false   |
+| href      | same as native hyperlink's `href`   | string  | —                                           | -       |
+| icon      | class name of icon                  | string  | —                                           | -       |
diff --git a/examples/docs/en-US/loading-button.md b/examples/docs/en-US/loading-button.md
new file mode 100644
index 00000000000..53b7e055691
--- /dev/null
+++ b/examples/docs/en-US/loading-button.md
@@ -0,0 +1 @@
+## LoadingButton
diff --git a/examples/docs/en-US/loading.md b/examples/docs/en-US/loading.md
index c355a7bb32e..af8016b3b7d 100644
--- a/examples/docs/en-US/loading.md
+++ b/examples/docs/en-US/loading.md
@@ -1,54 +1,3 @@
-<style>
-  .demo-loading .el-table {
-    border: none;
-  }
-</style>
-
-<script>
-  export default {
-    data() {
-      return {
-        tableData: [{
-          date: '2016-05-02',
-          name: 'John Smith',
-          address: 'No.1518,  Jinshajiang Road, Putuo District'
-        }, {
-          date: '2016-05-04',
-          name: 'John Smith',
-          address: 'No.1518,  Jinshajiang Road, Putuo District'
-        }, {
-          date: '2016-05-01',
-          name: 'John Smith',
-          address: 'No.1518,  Jinshajiang Road, Putuo District'
-        }],
-        loading: true,
-        loading2: true,
-        fullscreenLoading: false
-      }
-    },
-
-    methods: {
-      openFullScreen() {
-        this.fullscreenLoading = true;
-        setTimeout(() => {
-          this.fullscreenLoading = false;
-        }, 2000);
-      },
-      openFullScreen2() {
-        const loading = this.$loading({
-          lock: true,
-          text: 'Loading',
-          spinner: 'el-icon-loading',
-          background: 'rgba(0, 0, 0, 0.7)'
-        });
-        setTimeout(() => {
-          loading.close();
-        }, 2000);
-      }
-    }
-  }
-</script>
-
 ## Loading
 
 Show animation while loading data.
@@ -121,7 +70,7 @@ You can customize loading text, loading spinner and background color.
 ```html
 <template>
   <el-table
-    v-loading="loading2"
+    v-loading="loading"
     element-loading-text="Loading..."
     element-loading-spinner="el-icon-loading"
     element-loading-background="rgba(0, 0, 0, 0.8)"
@@ -161,7 +110,7 @@ You can customize loading text, loading spinner and background color.
           name: 'John Smith',
           address: 'No.1518,  Jinshajiang Road, Putuo District'
         }],
-        loading2: true
+        loading: true
       };
     }
   };
@@ -179,7 +128,7 @@ Show a full screen animation while loading data.
 <template>
   <el-button
     type="primary"
-    @click="openFullScreen"
+    @click="openFullScreen1"
     v-loading.fullscreen.lock="fullscreenLoading">
     As a directive
   </el-button>
@@ -198,7 +147,7 @@ Show a full screen animation while loading data.
       }
     },
     methods: {
-      openFullScreen() {
+      openFullScreen1() {
         this.fullscreenLoading = true;
         setTimeout(() => {
           this.fullscreenLoading = false;
@@ -224,7 +173,7 @@ Show a full screen animation while loading data.
 ### Service
 You can also invoke Loading with a service. Import Loading service:
 ```javascript
-import { Loading } from 'element-ui';
+import { Loading } from '@femessage/element-ui';
 ```
 Invoke it:
 ```javascript
diff --git a/examples/docs/en-US/lr-container.md b/examples/docs/en-US/lr-container.md
new file mode 100644
index 00000000000..980502df7ac
--- /dev/null
+++ b/examples/docs/en-US/lr-container.md
@@ -0,0 +1 @@
+## LrContainer
diff --git a/examples/docs/en-US/menu.md b/examples/docs/en-US/menu.md
index adf17d64329..a3bd6ecd111 100644
--- a/examples/docs/en-US/menu.md
+++ b/examples/docs/en-US/menu.md
@@ -1,56 +1,3 @@
-<style>
-  .demo-box.demo-menu {
-    .el-menu-demo {
-      padding-left: 55px;
-    }
-    .el-menu-vertical-demo:not(.el-menu--collapse) {
-      width: 240px;
-      min-height: 400px;
-    }
-    .line {
-      height: 1px;
-      background-color: #e0e6ed;
-      margin: 35px -24px;
-    }
-    h5 {
-      font-size: 14px;
-      color: #8492a6;
-      margin-top: 10px;
-    }
-    .tac {
-      text-align: center;
-
-      .el-menu-vertical-demo {
-        display: inline-block;
-        text-align: left;
-      }
-    }
-  }
-</style>
-
-<script>
-  export default {
-    data() {
-      return {
-        activeIndex: '1',
-        activeIndex2: '1',
-        isCollapse: true
-      };
-    },
-    methods: {
-      handleOpen(key, keyPath) {
-        console.log(key, keyPath);
-      },
-      handleClose(key, keyPath) {
-        console.log(key, keyPath);
-      },
-      handleSelect(key, keyPath) {
-        console.log(key, keyPath);
-      }
-    }
-  }
-</script>
-
 ## NavMenu
 
 Menu that provides navigation for your website.
@@ -302,7 +249,7 @@ Vertical NavMenu could be collapsed.
 | collapse  | whether the menu is collapsed (available only in vertical mode) | boolean  |   —   | false |
 | background-color  | background color of Menu (hex format) | string |   —   | #ffffff |
 | text-color  | text color of Menu (hex format) | string |   —   | #303133 |
-| active-text-color  | text color of currently active menu item (hex format) | string |   —   | #409EFF |
+| active-text-color  | text color of currently active menu item (hex format) | string |   —   | #2460e0 |
 | default-active | index of currently active menu | string    | — | — |
 | default-openeds | array that contains indexes of currently active sub-menus  | Array    | — | — |
 | unique-opened  |  whether only one sub-menu can be active  | boolean   | — | false   |
@@ -341,7 +288,7 @@ Vertical NavMenu could be collapsed.
 ### Menu-Item Attribute
 | Attribute      | Description          | Type      | Accepted Values       | Default  |
 |---------- |-------- |---------- |-------------  |-------- |
-| index     | unique identification   | string  | — | — |
+| index     | unique identification   | string/null  | — | null |
 | route     | Vue Router object   | object | — | — |
 | disabled | whether disabled | boolean | — | false |
 
diff --git a/examples/docs/en-US/message-box-center.md b/examples/docs/en-US/message-box-center.md
new file mode 100644
index 00000000000..c331ef7e5a2
--- /dev/null
+++ b/examples/docs/en-US/message-box-center.md
@@ -0,0 +1 @@
+## MessageBoxCenter
diff --git a/examples/docs/en-US/message-box.md b/examples/docs/en-US/message-box.md
index c0d183df9b3..27858e2a41b 100644
--- a/examples/docs/en-US/message-box.md
+++ b/examples/docs/en-US/message-box.md
@@ -1,148 +1,3 @@
-<script>
-  export default {
-    methods: {
-      open() {
-        this.$alert('This is a message', 'Title', {
-          confirmButtonText: 'OK',
-          callback: action => {
-            this.$message({
-              type: 'info',
-              message: `action: ${ action }`
-            });
-          }
-        });
-      },
-
-      open2() {
-        this.$confirm('This will permanently delete the file. Continue?', 'Warning', {
-          confirmButtonText: 'OK',
-          cancelButtonText: 'Cancel',
-          type: 'warning'
-        }).then(() => {
-          setTimeout(() => {
-            this.$message({
-              message: 'Delete completed',
-              type: 'success'
-            });
-          }, 200);
-        }).catch(() => {
-          setTimeout(() => {
-            this.$message({
-              message: 'Delete canceled',
-              type: 'info'
-            });  
-          }, 200);
-        });
-      },
-
-      open3() {
-        this.$prompt('Please input your email', 'Tips', {
-          confirmButtonText: 'OK',
-          cancelButtonText: 'Cancel',
-          inputPattern: /[\w!#$%&'*+/=?^_`{|}~-]+(?:\.[\w!#$%&'*+/=?^_`{|}~-]+)*@(?:[\w](?:[\w-]*[\w])?\.)+[\w](?:[\w-]*[\w])?/,
-          inputErrorMessage: 'Invalid Email'
-        }).then(({ value }) => {
-          setTimeout(() => {
-            this.$message({
-              type: 'success',
-              message: 'Your email is:' + value
-            });
-          }, 200);
-        }).catch(() => {
-          setTimeout(() => {
-            this.$message({
-              type: 'info',
-              message: 'Input canceled'
-            });
-          }, 200);
-        });
-      },
-
-      open4() {
-        const h = this.$createElement;
-        this.$msgbox({
-          title: 'Message',
-          message: h('p', null, [
-            h('span', null, 'Message can be '),
-            h('i', { style: 'color: teal' }, 'VNode')
-          ]),
-          showCancelButton: true,
-          confirmButtonText: 'OK',
-          cancelButtonText: 'Cancel',
-          beforeClose: (action, instance, done) => {
-            if (action === 'confirm') {
-              instance.confirmButtonLoading = true;
-              instance.confirmButtonText = 'Loading...';
-              setTimeout(() => {
-                done();
-                setTimeout(() => {
-                  instance.confirmButtonLoading = false;
-                }, 300);
-              }, 3000);
-            } else {
-              done();
-            }
-          }
-        }).then(action => {
-          setTimeout(() => {
-            this.$message({
-              type: 'info',
-              message: 'action: ' + action
-            });
-          }, 200);
-        });
-      },
-
-      open5() {
-        this.$alert('<strong>This is <i>HTML</i> string</strong>', 'HTML String', {
-          dangerouslyUseHTMLString: true
-        });
-      },
-
-      open6() {
-        this.$confirm('You have unsaved changes, save and proceed?', 'Confirm', {
-          distinguishCancelAndClose: true,
-          confirmButtonText: 'Save',
-          cancelButtonText: 'Discard Changes'
-        })
-          .then(() => {
-            this.$message({
-              type: 'info',
-              message: 'Changes saved. Proceeding to a new route.'
-            });
-          })
-          .catch(action => {
-            this.$message({
-              type: 'info',
-              message: action === 'cancel'
-                ? 'Changes discarded. Proceeding to a new route.'
-                : 'Stay in the current route'
-            })
-          });
-      },
-
-      open7() {
-        this.$confirm('This will permanently delete the file. Continue?', 'Warning', {
-          confirmButtonText: 'OK',
-          cancelButtonText: 'Cancel',
-          type: 'warning',
-          center: true
-        }).then(() => {
-          this.$message({
-            type: 'success',
-            message: 'Delete completed'
-          });
-        }).catch(() => {
-          this.$message({
-            type: 'info',
-            message: 'Delete canceled'
-          });
-        });
-      }
-    }
-  };
-</script>
-
 ## MessageBox
 
 A set of modal boxes simulating system message box, mainly for alerting information, confirm operations and prompting messages.
@@ -189,13 +44,13 @@ Confirm is used to ask users' confirmation.
 
 ```html
 <template>
-  <el-button type="text" @click="open2">Click to open the Message Box</el-button>
+  <el-button type="text" @click="open">Click to open the Message Box</el-button>
 </template>
 
 <script>
   export default {
     methods: {
-      open2() {
+      open() {
         this.$confirm('This will permanently delete the file. Continue?', 'Warning', {
           confirmButtonText: 'OK',
           cancelButtonText: 'Cancel',
@@ -227,13 +82,13 @@ Prompt is used when user input is required.
 
 ```html
 <template>
-  <el-button type="text" @click="open3">Click to open Message Box</el-button>
+  <el-button type="text" @click="open">Click to open Message Box</el-button>
 </template>
 
 <script>
   export default {
     methods: {
-      open3() {
+      open() {
         this.$prompt('Please input your e-mail', 'Tip', {
           confirmButtonText: 'OK',
           cancelButtonText: 'Cancel',
@@ -265,13 +120,13 @@ Can be customized to show various content.
 
 ```html
 <template>
-  <el-button type="text" @click="open4">Click to open Message Box</el-button>
+  <el-button type="text" @click="open">Click to open Message Box</el-button>
 </template>
 
 <script>
   export default {
     methods: {
-      open4() {
+      open() {
         const h = this.$createElement;
         this.$msgbox({
           title: 'Message',
@@ -310,7 +165,7 @@ Can be customized to show various content.
 :::
 
 :::tip
-The content of MessageBox can be `VNode`, allowing us to pass custom components. When opening the MessageBox, Vue compares new `VNode` with old `VNode`, then figures out how to efficiently update the UI, so the components may not be completely re-rendered ([#8931](https://github.com/ElemeFE/element/issues/8931)). In this case, you can add a unique key to `VNode` each time MessageBox opens: [example](https://jsfiddle.net/zhiyang/ezmhq2ef).
+The content of MessageBox can be `VNode`, allowing us to pass custom components. When opening the MessageBox, Vue compares new `VNode` with old `VNode`, then figures out how to efficiently update the UI, so the components may not be completely re-rendered ([#8931](https://github.com/femessage/element/issues/8931)). In this case, you can add a unique key to `VNode` each time MessageBox opens: [example](https://jsfiddle.net/zhiyang/ezmhq2ef).
 :::
 
 ### Use HTML String
@@ -321,13 +176,13 @@ The content of MessageBox can be `VNode`, allowing us to pass custom components.
 
 ```html
 <template>
-  <el-button type="text" @click="open5">Click to open Message Box</el-button>
+  <el-button type="text" @click="open">Click to open Message Box</el-button>
 </template>
 
 <script>
   export default {
     methods: {
-      open5() {
+      open() {
         this.$alert('<strong>This is <i>HTML</i> string</strong>', 'HTML String', {
           dangerouslyUseHTMLString: true
         });
@@ -350,13 +205,13 @@ In some cases, clicking the cancel button and close button may have different me
 
 ```html
 <template>
-  <el-button type="text" @click="open6">Click to open Message Box</el-button>
+  <el-button type="text" @click="open">Click to open Message Box</el-button>
 </template>
 
 <script>
   export default {
     methods: {
-      open6() {
+      open() {
         this.$confirm('You have unsaved changes, save and proceed?', 'Confirm', {
           distinguishCancelAndClose: true,
           confirmButtonText: 'Save',
@@ -390,13 +245,13 @@ Content of MessageBox can be centered.
 
 ```html
 <template>
-  <el-button type="text" @click="open7">Click to open Message Box</el-button>
+  <el-button type="text" @click="open">Click to open Message Box</el-button>
 </template>
 
 <script>
   export default {
     methods: {
-      open7() {
+      open() {
         this.$confirm('This will permanently delete the file. Continue?', 'Warning', {
           confirmButtonText: 'OK',
           cancelButtonText: 'Cancel',
@@ -433,7 +288,7 @@ If Element is fully imported, it will add the following global methods for Vue.p
 If you prefer importing `MessageBox` on demand:
 
 ```javascript
-import { MessageBox } from 'element-ui';
+import { MessageBox } from '@femessage/element-ui';
 ```
 
 The corresponding methods are: `MessageBox`, `MessageBox.alert`, `MessageBox.confirm` and `MessageBox.prompt`. The parameters are the same as above.
diff --git a/examples/docs/en-US/message.md b/examples/docs/en-US/message.md
index aee106f957d..0c11665a86e 100644
--- a/examples/docs/en-US/message.md
+++ b/examples/docs/en-US/message.md
@@ -1,86 +1,3 @@
-<script>
-  module.exports = {
-    methods: {
-      open() {
-        this.$message('This is a message.');
-      },
-
-      openVn() {
-        const h = this.$createElement;
-        this.$message({
-          message: h('p', null, [
-            h('span', null, 'Message can be '),
-            h('i', { style: 'color: teal' }, 'VNode')
-          ])
-        });
-      },
-
-      open2() {
-        this.$message({
-          message: 'Congrats, this is a success message.',
-          type: 'success'
-        });
-      },
-
-      open3() {
-        this.$message({
-          message: 'Warning, this is a warning message.',
-          type: 'warning'
-        });
-      },
-
-      open4() {
-        this.$message.error('Oops, this is a error message.');
-      },
-
-      open5() {
-        this.$message({
-          showClose: true,
-          message: 'This is a message.'
-        });
-      },
-
-      open6() {
-        this.$message({
-          showClose: true,
-          message: 'Congrats, this is a success message.',
-          type: 'success'
-        });
-      },
-
-      open7() {
-        this.$message({
-          showClose: true,
-          message: 'Warning, this is a warning message.',
-          type: 'warning'
-        });
-      },
-
-      open8() {
-        this.$message({
-          showClose: true,
-          message: 'Oops, this is a error message.',
-          type: 'error'
-        });
-      },
-
-      openCenter() {
-        this.$message({
-          message: 'Centered text',
-          center: true
-        });
-      },
-
-      openHTML() {
-        this.$message({
-          dangerouslyUseHTMLString: true,
-          message: '<strong>This is <i>HTML</i> string</strong>'
-        });
-      }
-    }
-  };
-</script>
-
 ## Message
 
 Used to show feedback after an activity. The difference with Notification is that the latter is often used to show a system level passive notification.
@@ -103,7 +20,7 @@ Displays at the top, and disappears after 3 seconds.
       open() {
         this.$message('This is a message.');
       },
-      
+
       openVn() {
         const h = this.$createElement;
         this.$message({
@@ -128,14 +45,14 @@ Used to show the feedback of Success, Warning, Message and Error activities.
 <template>
   <el-button :plain="true" @click="open2">success</el-button>
   <el-button :plain="true" @click="open3">warning</el-button>
-  <el-button :plain="true" @click="open">message</el-button>
+  <el-button :plain="true" @click="open1">message</el-button>
   <el-button :plain="true" @click="open4">error</el-button>
 </template>
 
 <script>
   export default {
     methods: {
-      open() {
+      open1() {
         this.$message('This is a message.');
       },
       open2() {
@@ -168,23 +85,23 @@ A close button can be added.
 :::demo A default Message cannot be closed manually. If you need a closable message, you can set `showClose` field. Besides, same as notification, message has a controllable `duration`. Default duration is 3000 ms, and it won't disappear when set to `0`.
 ```html
 <template>
-  <el-button :plain="true" @click="open5">message</el-button>
-  <el-button :plain="true" @click="open6">success</el-button>
-  <el-button :plain="true" @click="open7">warning</el-button>
-  <el-button :plain="true" @click="open8">error</el-button>
+  <el-button :plain="true" @click="open1">message</el-button>
+  <el-button :plain="true" @click="open2">success</el-button>
+  <el-button :plain="true" @click="open3">warning</el-button>
+  <el-button :plain="true" @click="open4">error</el-button>
 </template>
 
 <script>
   export default {
     methods: {
-      open5() {
+      open1() {
         this.$message({
           showClose: true,
           message: 'This is a message.'
         });
       },
 
-      open6() {
+      open2() {
         this.$message({
           showClose: true,
           message: 'Congrats, this is a success message.',
@@ -192,7 +109,7 @@ A close button can be added.
         });
       },
 
-      open7() {
+      open3() {
         this.$message({
           showClose: true,
           message: 'Warning, this is a warning message.',
@@ -200,7 +117,7 @@ A close button can be added.
         });
       },
 
-      open8() {
+      open4() {
         this.$message({
           showClose: true,
           message: 'Oops, this is a error message.',
@@ -276,7 +193,7 @@ Element has added a global method `$message` for Vue.prototype. So in a vue inst
 Import `Message`:
 
 ```javascript
-import { Message } from 'element-ui';
+import { Message } from '@femessage/element-ui';
 ```
 
 In this case you should call `Message(options)`. We have also registered methods for different types, e.g. `Message.success(options)`. You can call `Message.closeAll()` to manually close all the instances.
@@ -293,6 +210,7 @@ In this case you should call `Message(options)`. We have also registered methods
 | showClose | whether to show a close button | boolean | — | false |
 | center | whether to center the text | boolean | — | false |
 | onClose | callback function when closed with the message instance as the parameter | function | — | — |
+| offset | set the distance to the top of viewport | number | — | 20 |
 
 ### Methods
 `Message` and `this.$message` returns the current Message instance. To manually close the instance, you can call `close` on it.
diff --git a/examples/docs/en-US/notification.md b/examples/docs/en-US/notification.md
index dc811619782..c9d50a3fcf0 100644
--- a/examples/docs/en-US/notification.md
+++ b/examples/docs/en-US/notification.md
@@ -1,115 +1,3 @@
-<script>
-  module.exports = {
-    methods: {
-      open() {
-        const h = this.$createElement;
-
-        this.$notify({
-          title: 'Title',
-          message: h('i', { style: 'color: teal' }, 'This is a reminder')
-        });
-      },
-
-      open2() {
-        this.$notify({
-          title: 'Prompt',
-          message: 'This is a message that does not automatically close',
-          duration: 0
-        });
-      },
-
-      open3() {
-        this.$notify({
-          title: 'Success',
-          message: 'This is a success message',
-          type: 'success'
-        });
-      },
-
-      open4() {
-        this.$notify({
-          title: 'Warning',
-          message: 'This is a warning message',
-          type: 'warning'
-        });
-      },
-
-      open5() {
-        this.$notify.info({
-          title: 'Info',
-          message: 'This is an info message'
-        });
-      },
-
-      open6() {
-        this.$notify.error({
-          title: 'Error',
-          message: 'This is an error message'
-        });
-      },
-
-      open7() {
-        this.$notify({
-          title: 'Custom Position',
-          message: 'I\'m at the top right corner'
-        });
-      },
-
-      open8() {
-        this.$notify({
-          title: 'Custom Position',
-          message: 'I\'m at the bottom right corner',
-          position: 'bottom-right'
-        });
-      },
-
-      open9() {
-        this.$notify({
-          title: 'Custom Position',
-          message: 'I\'m at the bottom left corner',
-          position: 'bottom-left'
-        });
-      },
-
-      open10() {
-        this.$notify({
-          title: 'Custom Position',
-          message: 'I\'m at the top left corner',
-          position: 'top-left'
-        });
-      },
-
-      open11() {
-        this.$notify.success({
-          title: 'Success',
-          message: 'This is a success message',
-          offset: 100
-        });
-      },
-
-      open12() {
-        this.$notify({
-          title: 'HTML String',
-          dangerouslyUseHTMLString: true,
-          message: '<strong>This is <i>HTML</i> string</strong>'
-        });
-      },
-      
-      open13() {
-        this.$notify.success({
-          title: 'Info',
-          message: 'This is a message without close button',
-          showClose: false
-        });
-      },
-
-      onClose() {
-        console.log('Notification is closed');
-      }
-    }
-  };
-</script>
-
 ## Notification
 
 Displays a global notification message at a corner of the page.
@@ -122,7 +10,7 @@ Displays a global notification message at a corner of the page.
 <template>
   <el-button
     plain
-    @click="open">
+    @click="open1">
     Closes automatically
   </el-button>
   <el-button
@@ -135,7 +23,7 @@ Displays a global notification message at a corner of the page.
 <script>
   export default {
     methods: {
-      open() {
+      open1() {
         const h = this.$createElement;
 
         this.$notify({
@@ -161,27 +49,27 @@ Displays a global notification message at a corner of the page.
 
 We provide four types: success, warning, info and error.
 
-:::demo Element provides four notification types: `success`, `warning`, `info` and `error`. They are set by the `type` field, and other values will be ignored. We also registered methods for these types that can be invoked directly like `open5` and `open6` without passing a `type` field.
+:::demo Element provides four notification types: `success`, `warning`, `info` and `error`. They are set by the `type` field, and other values will be ignored. We also registered methods for these types that can be invoked directly like `open3` and `open4` without passing a `type` field.
 ```html
 <template>
   <el-button
     plain
-    @click="open3">
+    @click="open1">
     Success
   </el-button>
   <el-button
     plain
-    @click="open4">
+    @click="open2">
     Warning
   </el-button>
   <el-button
     plain
-    @click="open5">
+    @click="open3">
     Info
   </el-button>
   <el-button
     plain
-    @click="open6">
+    @click="open4">
     Error
   </el-button>
 </template>
@@ -189,7 +77,7 @@ We provide four types: success, warning, info and error.
 <script>
   export default {
     methods: {
-      open3() {
+      open1() {
         this.$notify({
           title: 'Success',
           message: 'This is a success message',
@@ -197,7 +85,7 @@ We provide four types: success, warning, info and error.
         });
       },
 
-      open4() {
+      open2() {
         this.$notify({
           title: 'Warning',
           message: 'This is a warning message',
@@ -205,14 +93,14 @@ We provide four types: success, warning, info and error.
         });
       },
 
-      open5() {
+      open3() {
         this.$notify.info({
           title: 'Info',
           message: 'This is an info message'
         });
       },
 
-      open6() {
+      open4() {
         this.$notify.error({
           title: 'Error',
           message: 'This is an error message'
@@ -233,22 +121,22 @@ Notification can emerge from any corner you like.
 <template>
   <el-button
     plain
-    @click="open7">
+    @click="open1">
     Top Right
   </el-button>
   <el-button
     plain
-    @click="open8">
+    @click="open2">
     Bottom Right
   </el-button>
   <el-button
     plain
-    @click="open9">
+    @click="open3">
     Bottom Left
   </el-button>
   <el-button
     plain
-    @click="open10">
+    @click="open4">
     Top Left
   </el-button>
 </template>
@@ -256,14 +144,14 @@ Notification can emerge from any corner you like.
 <script>
   export default {
     methods: {
-      open7() {
+      open1() {
         this.$notify({
           title: 'Custom Position',
           message: 'I\'m at the top right corner'
         });
       },
 
-      open8() {
+      open2() {
         this.$notify({
           title: 'Custom Position',
           message: 'I\'m at the bottom right corner',
@@ -271,7 +159,7 @@ Notification can emerge from any corner you like.
         });
       },
 
-      open9() {
+      open3() {
         this.$notify({
           title: 'Custom Position',
           message: 'I\'m at the bottom left corner',
@@ -279,7 +167,7 @@ Notification can emerge from any corner you like.
         });
       },
 
-      open10() {
+      open4() {
         this.$notify({
           title: 'Custom Position',
           message: 'I\'m at the top left corner',
@@ -301,7 +189,7 @@ Customize Notification's offset from the edge of the screen.
 <template>
   <el-button
     plain
-    @click="open11">
+    @click="open">
     Notification with offset
   </el-button>
 </template>
@@ -309,7 +197,7 @@ Customize Notification's offset from the edge of the screen.
 <script>
   export default {
     methods: {
-      open11() {
+      open() {
         this.$notify.success({
           title: 'Success',
           message: 'This is a success message',
@@ -330,7 +218,7 @@ Customize Notification's offset from the edge of the screen.
 <template>
   <el-button
     plain
-    @click="open12">
+    @click="open">
     Use HTML String
   </el-button>
 </template>
@@ -338,7 +226,7 @@ Customize Notification's offset from the edge of the screen.
 <script>
   export default {
     methods: {
-      open12() {
+      open() {
         this.$notify({
           title: 'HTML String',
           dangerouslyUseHTMLString: true,
@@ -364,7 +252,7 @@ It is possible to hide the close button
 <template>
   <el-button
     plain
-    @click="open13">
+    @click="open">
     Hide close button
     </el-button>
 </template>
@@ -372,7 +260,7 @@ It is possible to hide the close button
 <script>
   export default {
     methods: {
-      open13() {
+      open() {
         this.$notify.success({
           title: 'Info',
           message: 'This is a message without close button',
@@ -394,7 +282,7 @@ Element has added a global method `$notify` for Vue.prototype. So in a vue insta
 Import `Notification`:
 
 ```javascript
-import { Notification } from 'element-ui';
+import { Notification } from '@femessage/element-ui';
 ```
 
 In this case you should call `Notification(options)`. We have also registered methods for different types, e.g. `Notification.success(options)`. You can call `Notification.closeAll()` to manually close all the instances.
diff --git a/examples/docs/en-US/page-header.md b/examples/docs/en-US/page-header.md
new file mode 100644
index 00000000000..30ec3cc12aa
--- /dev/null
+++ b/examples/docs/en-US/page-header.md
@@ -0,0 +1,39 @@
+## PageHeader
+
+If path of the page is simple, it is recommended to use PageHeader instead of the Breadcrumb.
+
+### Basic
+
+:::demo
+```html
+<el-page-header @back="goBack" content="detail">
+</el-page-header>
+
+<script>
+  export default {
+    methods: {
+      goBack() {
+        console.log('go back');
+      }
+    }
+  }
+</script>
+```
+:::
+
+### Attributes
+| Attribute | Description   | Type      | Accepted Values               | Default |
+|---------- |-------------- |---------- |------------------------------ | ------ |
+| title     | main title    | string    |  —                            | Back   |
+| content   | content       | string    |  —                            | —      |
+
+### Events
+| Event Name | Description   | Parameters |
+|----------- |-------------- |----------- |
+| back       | triggers when right side is clicked | — |
+
+### Slots
+| slot      | Description            |
+|---------- | ---------------------- |
+| title     | title content          |
+| content   | content                |
diff --git a/examples/docs/en-US/pagination.md b/examples/docs/en-US/pagination.md
index f43127f7fe7..b62f7980baf 100644
--- a/examples/docs/en-US/pagination.md
+++ b/examples/docs/en-US/pagination.md
@@ -1,53 +1,3 @@
-<style>
-  .demo-pagination .source.first {
-    padding: 0;
-  }
-
-  .demo-pagination .first .block {
-    padding: 30px 0;
-    text-align: center;
-    border-right: solid 1px #EFF2F6;
-    display: inline-block;
-    width: 50%;
-    box-sizing: border-box;
-
-    &:last-child {
-      border-right: none;
-    }
-  }
-
-  .demo-pagination .first .demonstration {
-    display: block;
-    color: #8492a6;
-    font-size: 14px;
-    margin-bottom: 20px;
-  }
-
-  .demo-pagination .source.last {
-    padding: 0;
-  }
-
-  .demo-pagination .last .block {
-    padding: 30px 24px;
-    border-bottom: solid 1px #EFF2F6;
-    &:last-child {
-      border-bottom: none;
-    }
-  }
-
-  .demo-pagination .last .demonstration {
-    font-size: 14px;
-    color: #8492a6;
-    line-height: 44px;
-  }
-
-  .demo-pagination .last .demonstration + .el-pagination {
-    float: right;
-    width: 70%;
-    margin: 5px 20px 0 0;
-  }
-</style>
-
 ## Pagination
 
 If you have too much data to display in one page, use pagination.
@@ -189,36 +139,34 @@ Add more modules based on your scenario.
 </script>
 ```
 :::
+
+### Hide pagination when there is only one page
+
+When there is only one page, hide the pagination by setting the `hide-on-single-page` attribute.
+
+:::demo
+```html
+<div>
+ <el-switch v-model="value">
+ </el-switch>
+ <el-pagination
+  :hide-on-single-page="value"
+  :total="5"
+  layout="prev, pager, next">
+</el-pagination>
+</div>
+
 <script>
-  import { addClass } from 'element-ui/src/utils/dom';
   export default {
     data() {
       return {
-        currentPage1: 5,
-        currentPage2: 5,
-        currentPage3: 5,
-        currentPage4: 4
-      };
-    },
-    methods: {
-      handleSizeChange(val) {
-        console.log(`${val} items per page`);
-      },
-      handleCurrentChange(val) {
-        console.log(`current page: ${val}`);
+        value: false
       }
-    },
-    mounted() {
-      this.$nextTick(() => {
-        let demos = document.querySelectorAll('.source');
-        let firstDemo = demos[0];
-        let lastDemo = demos[demos.length - 1];
-        addClass(firstDemo, 'first');
-        addClass(lastDemo, 'last');
-      });
     }
   }
 </script>
+```
+:::
 
 ### Attributes
 | Attribute      | Description          | Type      | Accepted Values       | Default  |
@@ -236,6 +184,7 @@ Add more modules based on your scenario.
 | prev-text | text for the prev button | string | — | — |
 | next-text | text for the next button | string | — | — |
 | disabled | whether Pagination is disabled | boolean | — | false |
+| hide-on-single-page | whether to hide when there's only one page | boolean | — | - |
 
 ### Events
 | Event Name | Description | Parameters |
diff --git a/examples/docs/en-US/panel.md b/examples/docs/en-US/panel.md
new file mode 100644
index 00000000000..48382924949
--- /dev/null
+++ b/examples/docs/en-US/panel.md
@@ -0,0 +1 @@
+## Panel
diff --git a/examples/docs/en-US/popconfirm.md b/examples/docs/en-US/popconfirm.md
new file mode 100644
index 00000000000..72033bfc06f
--- /dev/null
+++ b/examples/docs/en-US/popconfirm.md
@@ -0,0 +1,54 @@
+## Popconfirm 
+
+A simple confirmation dialog of an element click action.
+
+### Basic usage
+
+Popconfirm is similar to Popover. So for some duplicated attributes, please refer to the documentation of Popover.
+
+:::demo Only `title` attribute is avaliable in Popconfirm, `content` will be ignored.
+```html
+<template>
+<el-popconfirm
+  title="Are you sure to delete this?"
+>
+  <el-button slot="reference">Delete</el-button>
+</el-popconfirm>
+</template>
+````
+:::
+
+### Customise
+You can customise Popconfirm like:
+:::demo
+```html
+<template>
+<el-popconfirm
+  confirmButtonText='OK'
+  cancelButtonText='No, Thanks'
+  icon="el-icon-info"
+  iconColor="red"
+  title="Are you sure to delete this?"
+>
+  <el-button slot="reference">Delete</el-button>
+</el-popconfirm>
+</template>
+```
+:::
+
+### Attributes
+| Attribute      | Description          | Type      | Accepted Values       | Default  |
+|--------------------|----------------------------------------------------------|-------------------|-------------|--------|
+|  title              | Title | String | — | — |
+|  confirmButtonText              | Confirm button text | String | — | — |
+|  cancelButtonText              | Cancel button text | String | — | — |
+|  confirmButtonType              | Confirm button type | String | — | Primary |
+|  cancelButtonType              | Cancel button type | String | — | Text |
+|  icon              | Icon | String | — | el-icon-question |
+|  iconColor              | Icon color | String | — | #f90 |
+|  hideIcon              | is hide Icon | Boolean | — | false |
+
+### Slot
+| Name | Description |
+|--- | ---|
+| reference | HTML element that triggers Popconfirm |
diff --git a/examples/docs/en-US/popover.md b/examples/docs/en-US/popover.md
index ddad5fce0db..5dfc35c005d 100644
--- a/examples/docs/en-US/popover.md
+++ b/examples/docs/en-US/popover.md
@@ -1,100 +1,3 @@
-<script>
-  export default {
-    data() {
-      return {
-        visible: false,
-        visible2: false,
-        gridData: [{
-          date: '2016-05-02',
-          name: 'Jack',
-          address: 'New York City'
-        }, {
-          date: '2016-05-04',
-          name: 'Jack',
-          address: 'New York City'
-        }, {
-          date: '2016-05-01',
-          name: 'Jack',
-          address: 'New York City'
-        }, {
-          date: '2016-05-03',
-          name: 'Jack',
-          address: 'New York City'
-        }],
-        gridData2: [{
-          date: '2016-05-02',
-          name: 'Jack',
-          address: 'New York City',
-        }, {
-          date: '2016-05-04',
-          name: 'Jack',
-          address: 'New York City',
-          $info: true
-        }, {
-          date: '2016-05-01',
-          name: 'Jack',
-          address: 'New York City',
-        }, {
-          date: '2016-05-03',
-          name: 'Jack',
-          address: 'New York City',
-          $positive: true
-        }],
-        gridData3: [{
-          tag: 'Home',
-          date: '2016-05-03',
-          name: 'Jack',
-          address: 'New York City'
-        }, {
-          tag: 'Company',
-          date: '2016-05-02',
-          name: 'Jack',
-          address: 'New York City'
-        }, {
-          tag: 'Company',
-          date: '2016-05-04',
-          name: 'Jack',
-          address: 'New York City'
-        }, {
-          tag: 'Home',
-          date: '2016-05-01',
-          name: 'Jack',
-          address: 'New York City'
-        }, {
-          tag: 'Company',
-          date: '2016-05-08',
-          name: 'Jack',
-          address: 'New York City'
-        }, {
-          tag: 'Home',
-          date: '2016-05-06',
-          name: 'Jack',
-          address: 'New York City'
-        }, {
-          tag: 'Company',
-          date: '2016-05-07',
-          name: 'Jack',
-          address: 'New York City'
-        }]
-      };
-    }
-  };
-</script>
-
-<style>
-  .demo-box.demo-popover {
-    .el-popover + .el-popover {
-      margin-left: 10px;
-    }
-    .el-input {
-      width: 360px;
-    }
-    .el-button {
-      margin-left: 10px;
-    }
-  }
-</style>
-
 ## Popover
 
 ### Basic usage
@@ -212,11 +115,11 @@ Of course, you can nest other operations. It's more light-weight than using a di
 <el-popover
   placement="top"
   width="160"
-  v-model="visible2">
+  v-model="visible">
   <p>Are you sure to delete this?</p>
   <div style="text-align: right; margin: 0">
-    <el-button size="mini" type="text" @click="visible2 = false">cancel</el-button>
-    <el-button type="primary" size="mini" @click="visible2 = false">confirm</el-button>
+    <el-button size="mini" type="text" @click="visible = false">cancel</el-button>
+    <el-button type="primary" size="mini" @click="visible = false">confirm</el-button>
   </div>
   <el-button slot="reference">Delete</el-button>
 </el-popover>
@@ -225,7 +128,7 @@ Of course, you can nest other operations. It's more light-weight than using a di
   export default {
     data() {
       return {
-        visible2: false,
+        visible: false,
       };
     }
   }
@@ -242,13 +145,15 @@ Of course, you can nest other operations. It's more light-weight than using a di
 |  width        |  popover width  | string, number            | — | Min width 150px |
 |  placement        |  popover placement  | string | top/top-start/top-end/bottom/bottom-start/bottom-end/left/left-start/left-end/right/right-start/right-end |  bottom |
 |  disabled       |  whether Popover is disabled  | boolean    | — |  false |
-|  value(v-model)        |  whether popover is visible  | Boolean           | — |  false |
+|  value / v-model        |  whether popover is visible  | Boolean           | — |  false |
 |  offset        |  popover offset  | number           | — |  0 |
 |  transition     |  popover transition animation      | string             | — | el-fade-in-linear |
 |  visible-arrow   |  whether a tooltip arrow is displayed or not. For more info, please refer to [Vue-popper](https://github.com/element-component/vue-popper) | boolean | — | true |
 |  popper-options        | parameters for [popper.js](https://popper.js.org/documentation.html) | object            | please refer to [popper.js](https://popper.js.org/documentation.html) | `{ boundariesElement: 'body', gpuAcceleration: false }` |
 |  popper-class        |  custom class name for popover | string | — | — |
-|  open-delay        | delay of appearance when `trigger` is hover, in milliseconds | number | — | — |
+|  open-delay        | delay before appearing when `trigger` is hover, in milliseconds | number | — | — |
+|  close-delay        | delay before disappearing when `trigger` is hover, in milliseconds | number | — | 200 |
+|  tabindex          | [tabindex](https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/tabindex) of Popover | number | — | 0 |
 
 ### Slot
 | Name | Description |
@@ -257,7 +162,7 @@ Of course, you can nest other operations. It's more light-weight than using a di
 | reference | HTML element that triggers popover |
 
 ### Events
-| Event Name | Description | 回调参数 |
+| Event Name | Description | Parameters |
 |---------|--------|---------|
 | show | triggers when popover shows | — |
 | after-enter | triggers when the entering transition ends | — |
diff --git a/examples/docs/en-US/progress.md b/examples/docs/en-US/progress.md
index c8c24a0f81d..a61003a8212 100644
--- a/examples/docs/en-US/progress.md
+++ b/examples/docs/en-US/progress.md
@@ -1,41 +1,101 @@
-<style>
-  .demo-box.demo-progress {
-    .el-progress--line {
-      margin-bottom: 15px;
-      width: 350px;
-    }
-    .el-progress--circle {
-      margin-right: 15px;
-    }
-  }
-</style>
 ## Progress
 
 Progress is used to show the progress of current operation, and inform the user the current status.
 
-### Linear progress bar (external percentage)
+### Linear progress bar
 
-:::demo Use `percentage` attribute to set the percentage. It's **required** and must be between `0-100`.
+:::demo Use `percentage` attribute to set the percentage. It's **required** and must be between `0-100`. You can custom text format by setting `format`.
 ```html
-<el-progress :percentage="0"></el-progress>
-<el-progress :percentage="70"></el-progress>
-<el-progress :percentage="80" color="#8e71c7"></el-progress>
+<el-progress :percentage="50"></el-progress>
+<el-progress :percentage="100" :format="format"></el-progress>
 <el-progress :percentage="100" status="success"></el-progress>
+<el-progress :percentage="100" status="warning"></el-progress>
 <el-progress :percentage="50" status="exception"></el-progress>
+
+<script>
+  export default {
+    methods: {
+      format(percentage) {
+        return percentage === 100 ? 'Full' : `${percentage}%`;
+      }
+    }
+  };
+</script>
 ```
 :::
 
-### Linear progress bar (internal percentage)
+### Internal percentage
 
 In this case the percentage takes no additional space.
 
 :::demo `stroke-width` attribute decides the `width` of progress bar, and use `text-inside` attribute to put description inside the progress bar.
 ```html
-<el-progress :text-inside="true" :stroke-width="18" :percentage="0"></el-progress>
-<el-progress :text-inside="true" :stroke-width="18" :percentage="70"></el-progress>
-<el-progress :text-inside="true" :stroke-width="18" :percentage="80" color="rgba(142, 113, 199, 0.7)"></el-progress>
-<el-progress :text-inside="true" :stroke-width="18" :percentage="100" status="success"></el-progress>
-<el-progress :text-inside="true" :stroke-width="18" :percentage="50" status="exception"></el-progress>
+<el-progress :text-inside="true" :stroke-width="26" :percentage="70"></el-progress>
+<el-progress :text-inside="true" :stroke-width="24" :percentage="100" status="success"></el-progress>
+<el-progress :text-inside="true" :stroke-width="22" :percentage="80" status="warning"></el-progress>
+<el-progress :text-inside="true" :stroke-width="20" :percentage="50" status="exception"></el-progress>
+```
+:::
+
+### Custom color
+
+You can use `color` attr to set the progress bar color. it accepts color string, function, or array.
+
+:::demo
+
+```html
+<el-progress :percentage="percentage" :color="customColor"></el-progress>
+
+<el-progress :percentage="percentage" :color="customColorMethod"></el-progress>
+
+<el-progress :percentage="percentage" :color="customColors"></el-progress>
+<div>
+  <el-button-group>
+    <el-button icon="el-icon-minus" @click="decrease"></el-button>
+    <el-button icon="el-icon-plus" @click="increase"></el-button>
+  </el-button-group>
+</div>
+
+<script>
+  export default {
+    data() {
+      return {
+        percentage: 20,
+        customColor: '#2460e0',
+        customColors: [
+          {color: '#FF4D4F', percentage: 20},
+          {color: '#F5A623', percentage: 40},
+          {color: '#5cb87a', percentage: 60},
+          {color: '#1989fa', percentage: 80},
+          {color: '#6f7ad3', percentage: 100}
+        ]
+      };
+    },
+    methods: {
+      customColorMethod(percentage) {
+        if (percentage < 30) {
+          return '#A7A8AD';
+        } else if (percentage < 70) {
+          return '#F5A623';
+        } else {
+          return '#2FD163';
+        }
+      },
+      increase() {
+        this.percentage += 10;
+        if (this.percentage > 100) {
+          this.percentage = 100;
+        }
+      },
+      decrease() {
+        this.percentage -= 10;
+        if (this.percentage < 0) {
+          this.percentage = 0;
+        }
+      }
+    }
+  }
+</script>
 ```
 :::
 
@@ -45,10 +105,57 @@ In this case the percentage takes no additional space.
 ```html
 <el-progress type="circle" :percentage="0"></el-progress>
 <el-progress type="circle" :percentage="25"></el-progress>
-<el-progress type="circle" :percentage="80" color="#8e71c7"></el-progress>
 <el-progress type="circle" :percentage="100" status="success"></el-progress>
+<el-progress type="circle" :percentage="70" status="warning"></el-progress>
 <el-progress type="circle" :percentage="50" status="exception"></el-progress>
-<el-progress type="circle" :percentage="100" status="text">Done</el-progress>
+```
+:::
+
+### Dashboard progress bar
+
+You also can specify `type` attribute to `dashboard` to use dashboard progress bar.
+
+:::demo
+
+```html
+<el-progress type="dashboard" :percentage="percentage" :color="colors"></el-progress>
+<div>
+  <el-button-group>
+    <el-button icon="el-icon-minus" @click="decrease"></el-button>
+    <el-button icon="el-icon-plus" @click="increase"></el-button>
+  </el-button-group>
+</div>
+
+<script>
+  export default {
+    data() {
+      return {
+        percentage: 10,
+        colors: [
+          {color: '#FF4D4F', percentage: 20},
+          {color: '#F5A623', percentage: 40},
+          {color: '#5cb87a', percentage: 60},
+          {color: '#1989fa', percentage: 80},
+          {color: '#6f7ad3', percentage: 100}
+        ]
+      };
+    },
+    methods: {
+      increase() {
+        this.percentage += 10;
+        if (this.percentage > 100) {
+          this.percentage = 100;
+        }
+      },
+      decrease() {
+        this.percentage -= 10;
+        if (this.percentage < 0) {
+          this.percentage = 0;
+        }
+      }
+    }
+  }
+</script>
 ```
 :::
 
@@ -56,10 +163,11 @@ In this case the percentage takes no additional space.
 | Attribute      | Description          | Type      | Accepted Values       | Default  |
 | --- | ---- | ---- | ---- | ---- |
 | **percentage** | percentage, **required** | number | 0-100 | 0 |
-| type | the type of progress bar | string | line/circle | line |
+| type | the type of progress bar | string | line/circle/dashboard | line |
 | stroke-width | the width of progress bar | number | — | 6 |
 | text-inside | whether to place the percentage inside progress bar, only works when `type` is 'line' | boolean | — | false |
-| status | the current status of progress bar | string | success/exception/text | — |
-| color  | background color of progress bar. Overrides `status` prop | string | — | — |
+| status | the current status of progress bar | string | success/exception/warning | — |
+| color  | background color of progress bar. Overrides `status` prop | string/function/array | — | '' |
 | width | the canvas width of circle progress bar | number | — | 126 |
 | show-text | whether to show percentage | boolean | — | true |
+| stroke-linecap  | circle/dashboard type shape at the end path | string | butt/round/square | round |
\ No newline at end of file
diff --git a/examples/docs/en-US/quickstart.md b/examples/docs/en-US/quickstart.md
index 9869108fbbe..e5294e9b469 100644
--- a/examples/docs/en-US/quickstart.md
+++ b/examples/docs/en-US/quickstart.md
@@ -22,8 +22,8 @@ In main.js:
 
 ```javascript
 import Vue from 'vue';
-import ElementUI from 'element-ui';
-import 'element-ui/lib/theme-chalk/index.css';
+import ElementUI from '@femessage/element-ui';
+import '@femessage/element-ui/lib/theme-chalk/index.css';
 import App from './App.vue';
 
 Vue.use(ElementUI);
@@ -67,7 +67,7 @@ Next, if you need Button and Select, edit main.js:
 
 ```javascript
 import Vue from 'vue';
-import { Button, Select } from 'element-ui';
+import { Button, Select } from '@femessage/element-ui';
 import App from './App.vue';
 
 Vue.component(Button.name, Button);
@@ -83,7 +83,7 @@ new Vue({
 });
 ```
 
-Full example (Component list reference [components.json](https://github.com/ElemeFE/element/blob/master/components.json))
+Full example (Component list reference [components.json](https://github.com/femessage/element/blob/master/components.json))
 
 ```javascript
 import Vue from 'vue';
@@ -134,6 +134,7 @@ import {
   Col,
   Upload,
   Progress,
+  Spinner,
   Badge,
   Card,
   Rate,
@@ -151,11 +152,20 @@ import {
   Aside,
   Main,
   Footer,
+  Timeline,
+  TimelineItem,
+  Link,
+  Divider,
+  Image,
+  Calendar,
+  Backtop,
+  PageHeader,
+  CascaderPanel,
   Loading,
   MessageBox,
   Message,
   Notification
-} from 'element-ui';
+} from '@femessage/element-ui';
 
 Vue.use(Pagination);
 Vue.use(Dialog);
@@ -203,6 +213,7 @@ Vue.use(Row);
 Vue.use(Col);
 Vue.use(Upload);
 Vue.use(Progress);
+Vue.use(Spinner);
 Vue.use(Badge);
 Vue.use(Card);
 Vue.use(Rate);
@@ -220,6 +231,15 @@ Vue.use(Header);
 Vue.use(Aside);
 Vue.use(Main);
 Vue.use(Footer);
+Vue.use(Timeline);
+Vue.use(TimelineItem);
+Vue.use(Link);
+Vue.use(Divider);
+Vue.use(Image);
+Vue.use(Calendar);
+Vue.use(Backtop);
+Vue.use(PageHeader);
+Vue.use(CascaderPanel);
 
 Vue.use(Loading.directive);
 
@@ -240,7 +260,7 @@ Fully import Element：
 
 ```js
 import Vue from 'vue';
-import Element from 'element-ui';
+import Element from '@femessage/element-ui';
 Vue.use(Element, { size: 'small', zIndex: 3000 });
 ```
 
@@ -248,7 +268,7 @@ Partial import Element：
 
 ```js
 import Vue from 'vue';
-import { Button } from 'element-ui';
+import { Button } from '@femessage/element-ui';
 
 Vue.prototype.$ELEMENT = { size: 'small', zIndex: 3000 };
 Vue.use(Button);
diff --git a/examples/docs/en-US/radio-img-button.md b/examples/docs/en-US/radio-img-button.md
new file mode 100644
index 00000000000..7851a46ce52
--- /dev/null
+++ b/examples/docs/en-US/radio-img-button.md
@@ -0,0 +1 @@
+## RadioImgButton
diff --git a/examples/docs/en-US/radio.md b/examples/docs/en-US/radio.md
index 5807b6cecec..ffc7109931b 100644
--- a/examples/docs/en-US/radio.md
+++ b/examples/docs/en-US/radio.md
@@ -1,23 +1,3 @@
-<script>
-  module.exports = {
-    data() {
-      return {
-        radio: '1',
-        radio1: 'selected and disabled',
-        radio2: 3,
-        radio3: 'New York',
-        radio4: 'New York',
-        radio5: 'New York',
-        radio6: 'New York',
-        radio7: '1',
-        radio8: '1',
-        radio9: '1',
-        radio10: '1'
-      };
-    }
-  };
-</script>
-
 ## Radio
 
 Single selection among multiple options.
@@ -52,15 +32,15 @@ Radio should not have too many options. Otherwise, use the Select component inst
 :::demo You just need to add the `disabled` attribute.
 ```html
 <template>
-  <el-radio disabled v-model="radio1" label="disabled">Option A</el-radio>
-  <el-radio disabled v-model="radio1" label="selected and disabled">Option B</el-radio>
+  <el-radio disabled v-model="radio" label="disabled">Option A</el-radio>
+  <el-radio disabled v-model="radio" label="selected and disabled">Option B</el-radio>
 </template>
 
 <script>
   export default {
     data () {
       return {
-        radio1: 'selected and disabled'
+        radio: 'selected and disabled'
       };
     }
   }
@@ -75,7 +55,7 @@ Suitable for choosing from some mutually exclusive options.
 :::demo Combine `el-radio-group` with `el-radio` to display a radio group. Bind a variable with `v-model` of `el-radio-group` element and set label value in `el-radio`. It also provides `change` event with the current value as its parameter.
 
 ```html
-<el-radio-group v-model="radio2">
+<el-radio-group v-model="radio">
   <el-radio :label="3">Option A</el-radio>
   <el-radio :label="6">Option B</el-radio>
   <el-radio :label="9">Option C</el-radio>
@@ -85,7 +65,7 @@ Suitable for choosing from some mutually exclusive options.
   export default {
     data () {
       return {
-        radio2: 3
+        radio: 3
       };
     }
   }
@@ -101,7 +81,7 @@ Radio with button styles.
 ```html
 <template>
   <div>
-    <el-radio-group v-model="radio3">
+    <el-radio-group v-model="radio1">
       <el-radio-button label="New York"></el-radio-button>
       <el-radio-button label="Washington"></el-radio-button>
       <el-radio-button label="Los Angeles"></el-radio-button>
@@ -109,7 +89,7 @@ Radio with button styles.
     </el-radio-group>
   </div>
   <div style="margin-top: 20px">
-    <el-radio-group v-model="radio4" size="medium">
+    <el-radio-group v-model="radio2" size="medium">
       <el-radio-button label="New York" ></el-radio-button>
       <el-radio-button label="Washington"></el-radio-button>
       <el-radio-button label="Los Angeles"></el-radio-button>
@@ -117,7 +97,7 @@ Radio with button styles.
     </el-radio-group>
   </div>
   <div style="margin-top: 20px">
-    <el-radio-group v-model="radio5" size="small">
+    <el-radio-group v-model="radio3" size="small">
       <el-radio-button label="New York"></el-radio-button>
       <el-radio-button label="Washington" disabled ></el-radio-button>
       <el-radio-button label="Los Angeles"></el-radio-button>
@@ -125,7 +105,7 @@ Radio with button styles.
     </el-radio-group>
   </div>
   <div style="margin-top: 20px">
-    <el-radio-group v-model="radio6" disabled size="mini">
+    <el-radio-group v-model="radio4" disabled size="mini">
       <el-radio-button label="New York"></el-radio-button>
       <el-radio-button label="Washington"></el-radio-button>
       <el-radio-button label="Los Angeles"></el-radio-button>
@@ -138,10 +118,10 @@ Radio with button styles.
   export default {
     data () {
       return {
+        radio1: 'New York',
+        radio2: 'New York',
         radio3: 'New York',
-        radio4: 'New York',
-        radio5: 'New York',
-        radio6: 'New York'
+        radio4: 'New York'
       };
     }
   }
@@ -155,21 +135,21 @@ Radio with button styles.
 ```html
 <template>
   <div>
-    <el-radio v-model="radio7" label="1" border>Option A</el-radio>
-    <el-radio v-model="radio7" label="2" border>Option B</el-radio>
+    <el-radio v-model="radio1" label="1" border>Option A</el-radio>
+    <el-radio v-model="radio1" label="2" border>Option B</el-radio>
   </div>
   <div style="margin-top: 20px">
-    <el-radio v-model="radio8" label="1" border size="medium">Option A</el-radio>
-    <el-radio v-model="radio8" label="2" border size="medium">Option B</el-radio>
+    <el-radio v-model="radio2" label="1" border size="medium">Option A</el-radio>
+    <el-radio v-model="radio2" label="2" border size="medium">Option B</el-radio>
   </div>
   <div style="margin-top: 20px">
-    <el-radio-group v-model="radio9" size="small">
+    <el-radio-group v-model="radio3" size="small">
       <el-radio label="1" border>Option A</el-radio>
       <el-radio label="2" border disabled>Option B</el-radio>
     </el-radio-group>
   </div>
   <div style="margin-top: 20px">
-    <el-radio-group v-model="radio10" size="mini" disabled>
+    <el-radio-group v-model="radio4" size="mini" disabled>
       <el-radio label="1" border>Option A</el-radio>
       <el-radio label="2" border>Option B</el-radio>
     </el-radio-group>
@@ -180,10 +160,10 @@ Radio with button styles.
   export default {
     data () {
       return {
-        radio7: '1',
-        radio8: '1',
-        radio9: '1',
-        radio10: '1'
+        radio1: '1',
+        radio2: '1',
+        radio3: '1',
+        radio4: '1'
       };
     }
   }
@@ -195,6 +175,7 @@ Radio with button styles.
 
  Attribute      | Description          | Type      | Accepted Values       | Default
 ---- | ---- | ---- | ---- | ----
+value / v-model | binding value | string / number / boolean | — | —
 label | the value of Radio | string / number / boolean | — | —
 disabled | whether Radio is disabled | boolean | — | false
 border  | whether to add a border around Radio  | boolean   | — | false
@@ -211,10 +192,11 @@ name | native 'name' attribute | string    |      —         |     —
 
  Attribute      | Description          | Type      | Accepted Values       | Default
 ---- | ---- | ---- | ---- | ----
+value / v-model | binding value | string / number / boolean | — | —
 size | the size of radio buttons or bordered radios | string | medium / small / mini | —
 disabled  | whether the nesting radios are disabled | boolean   | — | false
 text-color | font color when button is active | string   | — | #ffffff   |
-fill  | border and background color when button is active | string   | — | #409EFF   |
+fill  | border and background color when button is active | string   | — | #2460e0   |
 
 ### Radio-group Events
 
diff --git a/examples/docs/en-US/rate.md b/examples/docs/en-US/rate.md
index f1f579561cb..1eda81b97af 100644
--- a/examples/docs/en-US/rate.md
+++ b/examples/docs/en-US/rate.md
@@ -1,53 +1,12 @@
-<style>
-  .demo-rate .block {
-    padding: 30px 0;
-    text-align: center;
-    border-right: solid 1px #EFF2F6;
-    display: inline-block;
-    width: 50%;
-    box-sizing: border-box;
-    &:last-child {
-      border-right: none;
-    }
-  }
-
-  .demo-rate .demonstration {
-    display: block;
-    color: #8492a6;
-    font-size: 14px;
-    margin-bottom: 20px;
-  }
-</style>
-
-<script>
-  export default {
-    data() {
-      return {
-        value1: null,
-        value2: null,
-        value3: null,
-        value4: null,
-        value5: 3.7
-      };
-    },
-    mounted() {
-      this.$nextTick(() => {
-        let firstDemo = document.querySelector('.source');
-        firstDemo.style.padding = '0';
-      });
-    }
-  }
-</script>
-
 ## Rate
 
 Used for rating
 
 ### Basic usage
 
-:::demo Rate divides rating scores into three levels and these levels can be distinguished by using different background colors. By default background colors are the same, but you can assign them to reflect three levels using the `colors` attribute, and their two thresholds can be defined by `low-threshold` and `high-threshold`.
+:::demo Rate divides rating scores into several levels and these levels can be distinguished by using different background colors. By default background colors are the same, but you can assign them an array with three element to reflect three levels using the `colors` attribute, and their two thresholds can be defined by `low-threshold` and `high-threshold`, or you can assign them with a object which key is the threshold between two levels and value is the corresponding color.
 
-``` html
+```html
 <div class="block">
   <span class="demonstration">Default</span>
   <el-rate v-model="value1"></el-rate>
@@ -56,7 +15,7 @@ Used for rating
   <span class="demonstration">Color for different levels</span>
   <el-rate
     v-model="value2"
-    :colors="['#99A9BF', '#F7BA2A', '#FF9900']">
+    :colors="colors">
   </el-rate>
 </div>
 
@@ -65,7 +24,8 @@ Used for rating
     data() {
       return {
         value1: null,
-        value2: null
+        value2: null,
+        colors: ['#99A9BF', '#F7BA2A', '#FF9900'] // same as { 2: '#99A9BF', 4: { value: '#F7BA2A', excluded: true }, 5: '#FF9900' }
       }
     }
   }
@@ -79,9 +39,9 @@ Using text to indicate rating score
 
 :::demo Add attribute `show-text` to display text at the right of Rate. You can assign texts for different scores using `texts`. `texts` is an array whose length should be equal to the max score `max`.
 
-``` html
+```html
 <el-rate
-  v-model="value3"
+  v-model="value"
   :texts="['oops', 'disappointed', 'normal', 'good', 'great']"
   show-text>
 </el-rate>
@@ -90,7 +50,7 @@ Using text to indicate rating score
   export default {
     data() {
       return {
-        value3: null
+        value: null
       }
     }
   }
@@ -102,12 +62,12 @@ Using text to indicate rating score
 
 You can use different icons to distinguish different rate components.
 
-:::demo You can customize icons for three different levels using `icon-classes`. In this example, we also use `void-icon-class` to set the icon if it is unselected.
+:::demo You can customize icons by passing `icon-classes` an array with three elements or a object which key is the threshold between two levels and value is the corresponding icon class. In this example, we also use `void-icon-class` to set the icon if it is unselected.
 
-``` html
+```html
 <el-rate
-  v-model="value4"
-  :icon-classes="['icon-rate-face-1', 'icon-rate-face-2', 'icon-rate-face-3']"
+  v-model="value"
+  :icon-classes="iconClasses"
   void-icon-class="icon-rate-face-off"
   :colors="['#99A9BF', '#F7BA2A', '#FF9900']">
 </el-rate>
@@ -116,7 +76,8 @@ You can use different icons to distinguish different rate components.
   export default {
     data() {
       return {
-        value4: null
+        value: null,
+        iconClasses: ['icon-rate-face-1', 'icon-rate-face-2', 'icon-rate-face-3'] // same as { 2: 'icon-rate-face-1', 4: { value: 'icon-rate-face-2', excluded: true }, 5: 'icon-rate-face-3' }
       }
     }
   }
@@ -130,9 +91,9 @@ Read-only Rate is for displaying rating score. Half star is supported.
 
 :::demo Use attribute `disabled` to make the component read-only. Add `show-score` to display the rating score at the right side. Additionally, you can use attribute `score-template` to provide a score template. It must contain `{value}`, and `{value}` will be replaced with the rating score.
 
-``` html
+```html
 <el-rate
-  v-model="value5"
+  v-model="value"
   disabled
   show-score
   text-color="#ff9900"
@@ -143,7 +104,7 @@ Read-only Rate is for displaying rating score. Half star is supported.
   export default {
     data() {
       return {
-        value5: 3.7
+        value: 3.7
       }
     }
   }
@@ -154,15 +115,16 @@ Read-only Rate is for displaying rating score. Half star is supported.
 ### Attributes
 | Attribute      | Description          | Type      | Accepted Values       | Default  |
 |---------- |-------- |---------- |-------------  |-------- |
+| value / v-model | binding value | number | — | 0 |
 | max | max rating score | number | — | 5 |
 | disabled | whether Rate is read-only | boolean | — | false |
 | allow-half | whether picking half start is allowed | boolean | — | false |
 | low-threshold | threshold value between low and medium level. The value itself will be included in low level | number | — | 2 |
 | high-threshold | threshold value between medium and high level. The value itself will be included in high level | number | — | 4 |
-| colors | color array for icons. It should have 3 elements, each of which corresponds with a score level  | array | — | ['#F7BA2A', '#F7BA2A', '#F7BA2A'] |
+| colors | colors for icons. If array, it should have 3 elements, each of which corresponds with a score level, else if object, the key should be threshold value between two levels, and the value should be corresponding color | array/object | — | ['#F7BA2A', '#F7BA2A', '#F7BA2A'] |
 | void-color | color of unselected icons | string | — | #C6D1DE |
 | disabled-void-color | color of unselected read-only icons | string | — | #EFF2F7 |
-| icon-classes |  array of class names of icons. It should have 3 elements, each of which corresponds with a score level | array | — | ['el-icon-star-on', 'el-icon-star-on','el-icon-star-on'] |
+| icon-classes | class names of icons. If array, ot should have 3 elements, each of which corresponds with a score level, else if object, the key should be threshold value between two levels, and the value should be corresponding icon class | array/object | — | ['el-icon-star-on', 'el-icon-star-on','el-icon-star-on'] |
 | void-icon-class | class name of unselected icons | string | — | el-icon-star-off |
 | disabled-void-icon-class | class name of unselected read-only icons | string | — | el-icon-star-on |
 | show-text | whether to display texts | boolean | — | false |
diff --git a/examples/docs/en-US/select.md b/examples/docs/en-US/select.md
index 85453e70c1d..c2391ff0741 100644
--- a/examples/docs/en-US/select.md
+++ b/examples/docs/en-US/select.md
@@ -1,138 +1,3 @@
-<script>
-  export default {
-    data() {
-      return {
-        list: null,
-        options: [{
-          value: 'Option1',
-          label: 'Option1'
-        }, {
-          value: 'Option2',
-          label: 'Option2'
-        }, {
-          value: 'Option3',
-          label: 'Option3'
-        }, {
-          value: 'Option4',
-          label: 'Option4'
-        }, {
-          value: 'Option5',
-          label: 'Option5'
-        }],
-        options2: [{
-          value: 'Option1',
-          label: 'Option1'
-        }, {
-          value: 'Option2',
-          label: 'Option2',
-          disabled: true
-        }, {
-          value: 'Option3',
-          label: 'Option3'
-        }, {
-          value: 'Option4',
-          label: 'Option4'
-        }, {
-          value: 'Option5',
-          label: 'Option5'
-        }],
-        options3: [{
-          label: 'Popular cities',
-          options: [{
-            value: 'Shanghai',
-            label: 'Shanghai'
-          }, {
-            value: 'Beijing',
-            label: 'Beijing'
-          }]
-        }, {
-          label: 'City Name',
-          options: [{
-            value: 'Chengdu',
-            label: 'Chengdu'
-          }, {
-            value: 'Shenzhen',
-            label: 'Shenzhen'
-          }, {
-            value: 'Guangzhou',
-            label: 'Guangzhou'
-          }, {
-            value: 'Dalian',
-            label: 'Dalian'
-          }]
-        }],
-        options4: [],
-        options5: [{
-          value: 'HTML',
-          label: 'HTML'
-        }, {
-          value: 'CSS',
-          label: 'CSS'
-        }, {
-          value: 'JavaScript',
-          label: 'JavaScript'
-        }],
-        cities: [{
-          value: 'Beijing',
-          label: 'Beijing'
-        }, {
-          value: 'Shanghai',
-          label: 'Shanghai'
-        }, {
-          value: 'Nanjing',
-          label: 'Nanjing'
-        }, {
-          value: 'Chengdu',
-          label: 'Chengdu'
-        }, {
-          value: 'Shenzhen',
-          label: 'Shenzhen'
-        }, {
-          value: 'Guangzhou',
-          label: 'Guangzhou'
-        }],
-        value: '',
-        value2: '',
-        value3: '',
-        value4: '',
-        value5: [],
-        value6: '',
-        value7: '',
-        value8: '',
-        value9: [],
-        value10: [],
-        value11: [],
-        loading: false,
-        states: ["Alabama", "Alaska", "Arizona", "Arkansas", "California", "Colorado", "Connecticut", "Delaware", "Florida", "Georgia", "Hawaii", "Idaho", "Illinois", "Indiana", "Iowa", "Kansas", "Kentucky", "Louisiana", "Maine", "Maryland", "Massachusetts", "Michigan", "Minnesota", "Mississippi", "Missouri", "Montana", "Nebraska", "Nevada", "New Hampshire", "New Jersey", "New Mexico", "New York", "North Carolina", "North Dakota", "Ohio", "Oklahoma", "Oregon", "Pennsylvania", "Rhode Island", "South Carolina", "South Dakota", "Tennessee", "Texas", "Utah", "Vermont", "Virginia", "Washington", "West Virginia", "Wisconsin", "Wyoming"]
-      };
-    },
-
-    mounted() {
-      this.list = this.states.map(item => { return { value: item, label: item }; });
-    },
-
-    methods: {
-      remoteMethod(query) {
-        if (query !== '') {
-          this.loading = true;
-          setTimeout(() => {
-            this.loading = false;
-            this.options4 = this.list.filter(item => item.label.toLowerCase().indexOf(query.toLowerCase()) > -1);
-          }, 200);
-        } else {
-          this.options4 = [];
-        }
-      }
-    }
-  };
-</script>
-
-<style>
-  .demo-select .el-select {
-    width: 240px;
-  }
-</style>
-
 ## Select
 
 When there are plenty of options, use a drop-down menu to display and select desired ones.
@@ -187,9 +52,9 @@ When there are plenty of options, use a drop-down menu to display and select des
 
 ```html
 <template>
-  <el-select v-model="value2" placeholder="Select">
+  <el-select v-model="value" placeholder="Select">
     <el-option
-      v-for="item in options2"
+      v-for="item in options"
       :key="item.value"
       :label="item.label"
       :value="item.value"
@@ -202,7 +67,7 @@ When there are plenty of options, use a drop-down menu to display and select des
   export default {
     data() {
       return {
-        options2: [{
+        options: [{
           value: 'Option1',
           label: 'Option1'
         }, {
@@ -219,7 +84,7 @@ When there are plenty of options, use a drop-down menu to display and select des
           value: 'Option5',
           label: 'Option5'
         }],
-        value2: ''
+        value: ''
       }
     }
   }
@@ -234,7 +99,7 @@ Disable the whole component.
 :::demo Set `disabled` of `el-select` to make it disabled.
 ```html
 <template>
-  <el-select v-model="value3" disabled placeholder="Select">
+  <el-select v-model="value" disabled placeholder="Select">
     <el-option
       v-for="item in options"
       :key="item.value"
@@ -264,7 +129,7 @@ Disable the whole component.
           value: 'Option5',
           label: 'Option5'
         }],
-        value3: ''
+        value: ''
       }
     }
   }
@@ -279,7 +144,7 @@ You can clear Select using a clear icon.
 :::demo Set `clearable` attribute for `el-select` and a clear icon will appear. Note that `clearable` is only for single select.
 ```html
 <template>
-  <el-select v-model="value4" clearable placeholder="Select">
+  <el-select v-model="value" clearable placeholder="Select">
     <el-option
       v-for="item in options"
       :key="item.value"
@@ -309,7 +174,7 @@ You can clear Select using a clear icon.
           value: 'Option5',
           label: 'Option5'
         }],
-        value4: ''
+        value: ''
       }
     }
   }
@@ -324,7 +189,7 @@ Multiple select uses tags to display selected options.
 :::demo Set `multiple` attribute for `el-select` to enable multiple mode. In this case, the value of `v-model` will be an array of selected options. By default the selected options will be displayed as Tags. You can collapse them to a text by using `collapse-tags` attribute.
 ```html
 <template>
-  <el-select v-model="value5" multiple placeholder="Select">
+  <el-select v-model="value1" multiple placeholder="Select">
     <el-option
       v-for="item in options"
       :key="item.value"
@@ -334,7 +199,7 @@ Multiple select uses tags to display selected options.
   </el-select>
   
   <el-select
-    v-model="value11"
+    v-model="value2"
     multiple
     collapse-tags
     style="margin-left: 20px;"
@@ -368,8 +233,8 @@ Multiple select uses tags to display selected options.
           value: 'Option5',
           label: 'Option5'
         }],
-        value5: [],
-        value11: []
+        value1: [],
+        value2: []
       }
     }
   }
@@ -385,7 +250,7 @@ You can customize HTML templates for options.
 
 ```html
 <template>
-  <el-select v-model="value6" placeholder="Select">
+  <el-select v-model="value" placeholder="Select">
     <el-option
       v-for="item in cities"
       :key="item.value"
@@ -420,7 +285,7 @@ You can customize HTML templates for options.
           value: 'Guangzhou',
           label: 'Guangzhou'
         }],
-        value6: ''
+        value: ''
       }
     }
   }
@@ -436,9 +301,9 @@ Display options in groups.
 
 ```html
 <template>
-  <el-select v-model="value7" placeholder="Select">
+  <el-select v-model="value" placeholder="Select">
     <el-option-group
-      v-for="group in options3"
+      v-for="group in options"
       :key="group.label"
       :label="group.label">
       <el-option
@@ -455,7 +320,7 @@ Display options in groups.
   export default {
     data() {
       return {
-        options3: [{
+        options: [{
           label: 'Popular cities',
           options: [{
             value: 'Shanghai',
@@ -480,7 +345,7 @@ Display options in groups.
             label: 'Dalian'
           }]
         }],
-        value7: ''
+        value: ''
       }
     }
   }
@@ -495,7 +360,7 @@ You can filter options for your desired ones.
 :::demo Adding `filterable` to `el-select` enables filtering. By default, Select will find all the options whose `label` attribute contains the input value. If you prefer other filtering strategies, you can pass the `filter-method`. `filter-method` is a `Function` that gets called when the input value changes, and its parameter is the current input value.
 ```html
 <template>
-  <el-select v-model="value8" filterable placeholder="Select">
+  <el-select v-model="value" filterable placeholder="Select">
     <el-option
       v-for="item in options"
       :key="item.value"
@@ -525,7 +390,7 @@ You can filter options for your desired ones.
           value: 'Option5',
           label: 'Option5'
         }],
-        value8: ''
+        value: ''
       }
     }
   }
@@ -542,7 +407,7 @@ Enter keywords and search data from server.
 ```html
 <template>
   <el-select
-    v-model="value9"
+    v-model="value"
     multiple
     filterable
     remote
@@ -551,7 +416,7 @@ Enter keywords and search data from server.
     :remote-method="remoteMethod"
     :loading="loading">
     <el-option
-      v-for="item in options4"
+      v-for="item in options"
       :key="item.value"
       :label="item.label"
       :value="item.value">
@@ -563,8 +428,8 @@ Enter keywords and search data from server.
   export default {
     data() {
       return {
-        options4: [],
-        value9: [],
+        options: [],
+        value: [],
         list: [],
         loading: false,
         states: ["Alabama", "Alaska", "Arizona",
@@ -588,7 +453,7 @@ Enter keywords and search data from server.
     },
     mounted() {
       this.list = this.states.map(item => {
-        return { value: item, label: item };
+        return { value: `value:${item}`, label: `label:${item}` };
       });
     },
     methods: {
@@ -597,13 +462,13 @@ Enter keywords and search data from server.
           this.loading = true;
           setTimeout(() => {
             this.loading = false;
-            this.options4 = this.list.filter(item => {
+            this.options = this.list.filter(item => {
               return item.label.toLowerCase()
                 .indexOf(query.toLowerCase()) > -1;
             });
           }, 200);
         } else {
-          this.options4 = [];
+          this.options = [];
         }
       }
     }
@@ -618,14 +483,14 @@ Create and select new items that are not included in select options
 ```html
 <template>
   <el-select
-    v-model="value10"
+    v-model="value"
     multiple
     filterable
     allow-create
     default-first-option
     placeholder="Choose tags for your article">
     <el-option
-      v-for="item in options5"
+      v-for="item in options"
       :key="item.value"
       :label="item.label"
       :value="item.value">
@@ -637,7 +502,7 @@ Create and select new items that are not included in select options
   export default {
     data() {
       return {
-        options5: [{
+        options: [{
           value: 'HTML',
           label: 'HTML'
         }, {
@@ -647,7 +512,7 @@ Create and select new items that are not included in select options
           value: 'JavaScript',
           label: 'JavaScript'
         }],
-        value10: []
+        value: []
       }
     }
   }
@@ -662,26 +527,27 @@ If the binding value of Select is an object, make sure to assign `value-key` as
 ### Select Attributes
 | Attribute      | Description          | Type      | Accepted Values       | Default  |
 |---------- |-------------- |---------- |--------------------------------  |-------- |
+| value / v-model | binding value | boolean / string / number | — | — |
 | multiple | whether multiple-select is activated | boolean | — | false |
 | disabled | whether Select is disabled | boolean | — | false |
 | value-key | unique identity key name for value, required when value is an object | string | — | value |
 | size | size of Input | string | large/small/mini | — |
-| clearable | whether select can be cleared | boolean | — | false |
+| clearable | whether select can be cleared | boolean | — | true |
 | collapse-tags | whether to collapse tags to a text when multiple selecting | boolean | — | false |
 | multiple-limit | maximum number of options user can select when `multiple` is `true`. No limit when set to 0 | number | — | 0 |
 | name | the name attribute of select input | string | — | — |
 | autocomplete | the autocomplete attribute of select input | string | — | off |
 | auto-complete | @DEPRECATED in next major version | string | — | off |
 | placeholder | placeholder | string | — | Select |
-| filterable | whether Select is filterable | boolean | — | false |
+| filterable | whether Select is filterable | boolean | — | true |
 | allow-create | whether creating new items is allowed. To use this, `filterable` must be true | boolean | — | false |
 | filter-method | custom filter method | function | — | — |
 | remote | whether options are loaded from server | boolean | — | false |
 | remote-method | custom remote search method | function | — | — |
 | loading | whether Select is loading data from server | boolean | — | false |
 | loading-text | displayed text while loading data from server | string | — | Loading |
-| no-match-text | displayed text when no data matches the filtering query | string | — | No matching data |
-| no-data-text | displayed text when there is no options | string | — | No data |
+| no-match-text | displayed text when no data matches the filtering query, you can also use slot `empty` | string | — | No matching data |
+| no-data-text | displayed text when there is no options, you can also use slot `empty` | string | — | No data |
 | popper-class | custom class name for Select's dropdown | string | — | — |
 | reserve-keyword | when `multiple` and `filter` is true, whether to reserve current keyword after selecting an option | boolean | — | false |
 | default-first-option | select first matching option on enter key. Use with `filterable` or `remote` | boolean | - | false |
@@ -703,6 +569,7 @@ If the binding value of Select is an object, make sure to assign `value-key` as
 |---------|-------------|
 |    —    | Option component list |
 | prefix  | content as Select prefix |
+| empty  | content when there is no options |
 
 ### Option Group Attributes
 | Attribute      | Description          | Type      | Accepted Values       | Default  |
diff --git a/examples/docs/en-US/skeleton.md b/examples/docs/en-US/skeleton.md
new file mode 100644
index 00000000000..ff876ea8b9b
--- /dev/null
+++ b/examples/docs/en-US/skeleton.md
@@ -0,0 +1 @@
+## Skeleton
diff --git a/examples/docs/en-US/slider.md b/examples/docs/en-US/slider.md
index 3d769a05d45..3b959713c8e 100644
--- a/examples/docs/en-US/slider.md
+++ b/examples/docs/en-US/slider.md
@@ -1,54 +1,3 @@
-<script>
-  export default {
-    data() {
-      return {
-        value1: 0,
-        value2: 50,
-        value3: 36,
-        value4: 48,
-        value5: 42,
-        value6: 0,
-        value7: 0,
-        value8: 0,
-        value9: [4, 8],
-        value10: 0
-      };
-    },
-    methods: {
-      formatTooltip(val) {
-        return val / 100;
-      }
-    }
-  }
-</script>
-
-<style>
-  .demo-box.demo-slider .source {
-    padding: 0;
-  }
-  
-  .demo-box.demo-slider .block {
-    padding: 30px 24px;
-    overflow: hidden;
-    border-bottom: solid 1px #EFF2F6;
-    &:last-child {
-      border-bottom: none;
-    }
-  }
-  
-  .demo-box.demo-slider .demonstration {
-    font-size: 14px;
-    color: #8492a6;
-    line-height: 44px;
-  }
-  
-  .demo-box.demo-slider .demonstration + .el-slider {
-    float: right;
-    width: 70%;
-    margin-right: 20px;
-  }
-</style>
-
 ## Slider
 
 Drag the slider within a fixed range.
@@ -115,14 +64,14 @@ The options can be discrete.
   <div class="block">
     <span class="demonstration">Breakpoints not displayed</span>
     <el-slider
-      v-model="value6"
+      v-model="value1"
       :step="10">
     </el-slider>
   </div>
   <div class="block">
     <span class="demonstration">Breakpoints displayed</span>
     <el-slider
-      v-model="value7"
+      v-model="value2"
       :step="10"
       show-stops>
     </el-slider>
@@ -133,8 +82,8 @@ The options can be discrete.
   export default {
     data() {
       return {
-        value6: 0,
-        value7: 0
+        value1: 0,
+        value2: 0
       }
     }
   }
@@ -152,7 +101,7 @@ Set value via a input box.
 <template>
   <div class="block">
     <el-slider
-      v-model="value8"
+      v-model="value"
       show-input>
     </el-slider>
   </div>
@@ -162,7 +111,7 @@ Set value via a input box.
   export default {
     data() {
       return {
-        value8: 0
+        value: 0
       }
     }
   }
@@ -179,7 +128,7 @@ Selecting a range of values is supported.
 <template>
   <div class="block">
     <el-slider
-      v-model="value9"
+      v-model="value"
       range
       show-stops
       :max="10">
@@ -191,7 +140,7 @@ Selecting a range of values is supported.
   export default {
     data() {
       return {
-        value9: [4, 8]
+        value: [4, 8]
       }
     }
   }
@@ -206,7 +155,7 @@ Selecting a range of values is supported.
 <template>
   <div class="block">
     <el-slider
-      v-model="value10"
+      v-model="value"
       vertical
       height="200px">
     </el-slider>
@@ -217,7 +166,44 @@ Selecting a range of values is supported.
   export default {
     data() {
       return {
-        value10: 0
+        value: 0
+      }
+    }
+  }
+</script>
+```
+:::
+
+### Show marks
+
+:::demo Setting this `marks` attribute can show mark on slider.
+```html
+<template>
+  <div class="block">
+    <el-slider
+      v-model="value"
+      range
+      :marks="marks">
+    </el-slider>
+  </div>
+</template>
+
+<script>
+  export default {
+    data() {
+      return {
+        value: [30, 60],
+        marks: {
+          0: '0°C',
+          8: '8°C',
+          37: '37°C',
+          50: {
+            style: {
+              color: '#1989FA'
+            },
+            label: this.$createElement('strong', '50%')
+          }
+        }
       }
     }
   }
@@ -228,6 +214,7 @@ Selecting a range of values is supported.
 ## Attributes
 | Attribute      | Description          | Type      | Accepted Values       | Default  |
 |---------- |-------------- |---------- |--------------------------------  |-------- |
+| value / v-model | binding value | number | — | 0 |
 | min | minimum value | number | — | 0 |
 | max | maximum value | number | — | 100 |
 | disabled | whether Slider is disabled | boolean | — | false |
@@ -244,9 +231,11 @@ Selecting a range of values is supported.
 | label | label for screen reader | string | — | — |
 | debounce | debounce delay when typing, in milliseconds, works when `show-input` is true | number | — | 300 |
 | tooltip-class | custom class name for the tooltip | string | — | — |
+| marks | marks， type of key must be `number` and must in closed interval `[min, max]`, each mark can custom style| object | — | — |
 
 ## Events
 | Event Name | Description | Parameters |
 |---------- |-------- |---------- |
 | change | triggers when the value changes (if the mouse is being dragged, this event only fires when the mouse is released) | value after changing |
+| input | triggers when the data changes (It'll be emitted in real time during sliding) | value after changing |
 
diff --git a/examples/docs/en-US/status-steps.md b/examples/docs/en-US/status-steps.md
new file mode 100644
index 00000000000..a8891d83038
--- /dev/null
+++ b/examples/docs/en-US/status-steps.md
@@ -0,0 +1 @@
+## StatusSteps
diff --git a/examples/docs/en-US/steps.md b/examples/docs/en-US/steps.md
index a40404e52f2..34a03f18a25 100644
--- a/examples/docs/en-US/steps.md
+++ b/examples/docs/en-US/steps.md
@@ -1,19 +1,3 @@
-<script>
-  export default {
-    data() {
-      return {
-        active: 0
-      };
-    },
-
-    methods: {
-      next() {
-        if (this.active++ > 2) this.active = 0;
-      }
-    }
-  }
-</script>
-
 ## Steps
 
 Guide the user to complete tasks in accordance with the process. Its steps can be set according to the actual application scenario and the number of the steps can't be less than 2.
diff --git a/examples/docs/en-US/switch.md b/examples/docs/en-US/switch.md
index d0793964072..6ba7b4f9783 100644
--- a/examples/docs/en-US/switch.md
+++ b/examples/docs/en-US/switch.md
@@ -1,27 +1,3 @@
-<style>
-  .demo-box.demo-switch {
-    .el-switch {
-      margin: 20px 20px 20px 0;
-    }
-  }
-</style>
-
-<script>
-  export default {
-    data() {
-      return {
-        value1: true,
-        value2: true,
-        value3: true,
-        value4: true,
-        value5: '100',
-        value6: true,
-        value7: false
-      }
-    }
-  };
-</script>
-
 ## Switch
 
 Switch is used for switching between two opposing states.
@@ -56,13 +32,13 @@ Switch is used for switching between two opposing states.
 
 ```html
 <el-switch
-  v-model="value3"
+  v-model="value1"
   active-text="Pay by month"
   inactive-text="Pay by year">
 </el-switch>
 <el-switch
   style="display: block"
-  v-model="value4"
+  v-model="value2"
   active-color="#13ce66"
   inactive-color="#ff4949"
   active-text="Pay by month"
@@ -73,8 +49,8 @@ Switch is used for switching between two opposing states.
   export default {
     data() {
       return {
-        value3: true,
-        value4: true
+        value1: true,
+        value2: true
       }
     }
   };
@@ -87,9 +63,9 @@ Switch is used for switching between two opposing states.
 :::demo You can set `active-value` and `inactive-value` attributes. They both receive a `Boolean`, `String` or `Number` typed value.
 
 ```html
-<el-tooltip :content="'Switch value: ' + value5" placement="top">
+<el-tooltip :content="'Switch value: ' + value" placement="top">
   <el-switch
-    v-model="value5"
+    v-model="value"
     active-color="#13ce66"
     inactive-color="#ff4949"
     active-value="100"
@@ -101,7 +77,7 @@ Switch is used for switching between two opposing states.
   export default {
     data() {
       return {
-        value5: '100'
+        value: '100'
       }
     }
   };
@@ -116,11 +92,11 @@ Switch is used for switching between two opposing states.
 
 ```html
 <el-switch
-  v-model="value6"
+  v-model="value1"
   disabled>
 </el-switch>
 <el-switch
-  v-model="value7"
+  v-model="value2"
   disabled>
 </el-switch>
 
@@ -128,8 +104,8 @@ Switch is used for switching between two opposing states.
   export default {
     data() {
       return {
-        value6: true,
-        value7: false
+        value1: true,
+        value2: false
       }
     }
   };
@@ -139,27 +115,29 @@ Switch is used for switching between two opposing states.
 
 ### Attributes
 
- Attribute      | Description          | Type      | Accepted Values       | Default
-----| ----| ----| ----|----
-disabled | whether Switch is disabled | boolean | — | false
-width | width of Switch | number | — | 40
-active-icon-class | class name of the icon displayed when in `on` state, overrides `active-text` | string | — | —
-inactive-icon-class |class name of the icon displayed when in `off` state, overrides `inactive-text`| string | — | —
-active-text | text displayed when in `on` state | string | — | —
-inactive-text | text displayed when in `off` state | string | — | —
-active-value  | switch value when in `on` state | boolean / string / number | — | true
-inactive-value  | switch value when in `off` state | boolean / string / number | — | false
-active-color | background color when in `on` state | string | — | #409EFF
-inactive-color | background color when in `off` state | string | — | #C0CCDA
-name| input name of Switch | string | — | —
+| Attribute      | Description          | Type      | Accepted Values       | Default |
+|-----| ----| ----| ----|---- |
+| value / v-model | binding value | boolean / string / number | — | — |
+| disabled | whether Switch is disabled | boolean | — | false |
+| width | width of Switch | number | — | 40 |
+| active-icon-class | class name of the icon displayed when in `on` state, overrides `active-text` | string | — | — |
+| inactive-icon-class |class name of the icon displayed when in `off` state, overrides `inactive-text`| string | — | — |
+| active-text | text displayed when in `on` state | string | — | — |
+| inactive-text | text displayed when in `off` state | string | — | — |
+| active-value  | switch value when in `on` state | boolean / string / number | — | true |
+| inactive-value  | switch value when in `off` state | boolean / string / number | — | false |
+| active-color | background color when in `on` state | string | — | #2460e0 |
+| inactive-color | background color when in `off` state | string | — | #C0CCDA |
+| name           | input name of Switch | string | — | — |
+| validate-event | whether to trigger form validation | boolean | - | true |
 
 ### Events
 
- Event Name | Description | Parameters
----- | ----| ----
-change | triggers when value changes | value after changing
+| Event Name | Description | Parameters |
+| ---- | ----| ---- |
+| change | triggers when value changes | value after changing |
 
 ### Methods
-Method | Description | Parameters
-------|--------|-------
-focus | focus the Switch component | —
+| Method | Description | Parameters |
+| ------|--------|------- |
+| focus | focus the Switch component | — |
diff --git a/examples/docs/en-US/table.md b/examples/docs/en-US/table.md
index 926ce74f04c..1733096333c 100644
--- a/examples/docs/en-US/table.md
+++ b/examples/docs/en-US/table.md
@@ -1,372 +1,3 @@
-<script>
-  export default {
-    data() {
-      return {
-        tableData: [{
-          date: '2016-05-03',
-          name: 'Tom',
-          state: 'California',
-          city: 'Los Angeles',
-          address: 'No. 189, Grove St, Los Angeles',
-          zip: 'CA 90036',
-          tag: 'Home'
-        }, {
-          date: '2016-05-02',
-          name: 'Tom',
-          state: 'California',
-          city: 'Los Angeles',
-          address: 'No. 189, Grove St, Los Angeles',
-          zip: 'CA 90036',
-          tag: 'Office'
-        }, {
-          date: '2016-05-04',
-          name: 'Tom',
-          state: 'California',
-          city: 'Los Angeles',
-          address: 'No. 189, Grove St, Los Angeles',
-          zip: 'CA 90036',
-          tag: 'Home'
-        }, {
-          date: '2016-05-01',
-          name: 'Tom',
-          state: 'California',
-          city: 'Los Angeles',
-          address: 'No. 189, Grove St, Los Angeles',
-          zip: 'CA 90036',
-          tag: 'Office'
-        }],
-        tableData2: [{
-          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',
-          $info: true
-        }, {
-          date: '2016-05-01',
-          name: 'Tom',
-          address: 'No. 189, Grove St, Los Angeles',
-        }, {
-          date: '2016-05-03',
-          name: 'Tom',
-          address: 'No. 189, Grove St, Los Angeles',
-          $positive: true
-        }],
-        tableData3: [{
-          date: '2016-05-03',
-          name: 'Tom',
-          state: 'California',
-          city: 'Los Angeles',
-          address: 'No. 189, Grove St, Los Angeles',
-          zip: 'CA 90036'
-        }, {
-          date: '2016-05-02',
-          name: 'Tom',
-          state: 'California',
-          city: 'Los Angeles',
-          address: 'No. 189, Grove St, Los Angeles',
-          zip: 'CA 90036'
-        }, {
-          date: '2016-05-04',
-          name: 'Tom',
-          state: 'California',
-          city: 'Los Angeles',
-          address: 'No. 189, Grove St, Los Angeles',
-          zip: 'CA 90036'
-        }, {
-          date: '2016-05-01',
-          name: 'Tom',
-          state: 'California',
-          city: 'Los Angeles',
-          address: 'No. 189, Grove St, Los Angeles',
-          zip: 'CA 90036'
-        }, {
-          date: '2016-05-08',
-          name: 'Tom',
-          state: 'California',
-          city: 'Los Angeles',
-          address: 'No. 189, Grove St, Los Angeles',
-          zip: 'CA 90036'
-        }, {
-          date: '2016-05-06',
-          name: 'Tom',
-          state: 'California',
-          city: 'Los Angeles',
-          address: 'No. 189, Grove St, Los Angeles',
-          zip: 'CA 90036'
-        }, {
-          date: '2016-05-07',
-          name: 'Tom',
-          state: 'California',
-          city: 'Los Angeles',
-          address: 'No. 189, Grove St, Los Angeles',
-          zip: 'CA 90036'
-        }],
-        tableData4: [{
-          date: '2016-05-03',
-          name: 'Tom',
-          state: 'California',
-          city: 'Los Angeles',
-          address: 'No. 189, Grove St, Los Angeles',
-          zip: 'CA 90036'
-        }, {
-          date: '2016-05-02',
-          name: 'Tom',
-          state: 'California',
-          city: 'Los Angeles',
-          address: 'No. 189, Grove St, Los Angeles',
-          zip: 'CA 90036'
-        }, {
-          date: '2016-05-04',
-          name: 'Tom',
-          state: 'California',
-          city: 'Los Angeles',
-          address: 'No. 189, Grove St, Los Angeles',
-          zip: 'CA 90036'
-        }, {
-          date: '2016-05-01',
-          name: 'Tom',
-          state: 'California',
-          city: 'Los Angeles',
-          address: 'No. 189, Grove St, Los Angeles',
-          zip: 'CA 90036'
-        }, {
-          date: '2016-05-08',
-          name: 'Tom',
-          state: 'California',
-          city: 'Los Angeles',
-          address: 'No. 189, Grove St, Los Angeles',
-          zip: 'CA 90036'
-        }, {
-          date: '2016-05-06',
-          name: 'Tom',
-          state: 'California',
-          city: 'Los Angeles',
-          address: 'No. 189, Grove St, Los Angeles',
-          zip: 'CA 90036'
-        }, {
-          date: '2016-05-07',
-          name: 'Tom',
-          state: 'California',
-          city: 'Los Angeles',
-          address: 'No. 189, Grove St, Los Angeles',
-          zip: 'CA 90036'
-        }],
-        tableData6: [{
-          id: '12987122',
-          name: 'Tom',
-          amount1: '234',
-          amount2: '3.2',
-          amount3: 10
-        }, {
-          id: '12987123',
-          name: 'Tom',
-          amount1: '165',
-          amount2: '4.43',
-          amount3: 12
-        }, {
-          id: '12987124',
-          name: 'Tom',
-          amount1: '324',
-          amount2: '1.9',
-          amount3: 9
-        }, {
-          id: '12987125',
-          name: 'Tom',
-          amount1: '621',
-          amount2: '2.2',
-          amount3: 17
-        }, {
-          id: '12987126',
-          name: 'Tom',
-          amount1: '539',
-          amount2: '4.1',
-          amount3: 15
-        }],
-        tableData7: [{
-          date: '2016-05-02',
-          name: 'Tom',
-          address: 'No. 189, Grove St, Los Angeles',
-        }, {
-          date: '2016-05-04',
-          name: 'John',
-          address: 'No. 189, Grove St, Los Angeles',
-        }, {
-          date: '2016-05-01',
-          name: 'Morgan',
-          address: 'No. 189, Grove St, Los Angeles',
-        }, {
-          date: '2016-05-03',
-          name: 'Jessy',
-          address: 'No. 189, Grove St, Los Angeles',
-        }],
-        currentRow: null,
-        multipleSelection: [],
-        search: '',
-      };
-    },
-
-    methods: {
-      getSummaries(param) {
-        const { columns, data } = param;
-        const sums = [];
-        columns.forEach((column, index) => {
-          if (index === 0) {
-            sums[index] = 'Total Cost';
-            return;
-          }
-          const values = data.map(item => Number(item[column.property]));
-          if (!values.every(value => isNaN(value))) {
-            sums[index] = '$ ' + values.reduce((prev, curr) => {
-              const value = Number(curr);
-              if (!isNaN(value)) {
-                return prev + curr;
-              } else {
-                return prev;
-              }
-            }, 0);
-          } else {
-            sums[index] = 'N/A';
-          }
-        });
-
-        return sums;
-      },
-
-      resetDateFilter() {
-        this.$refs.filterTable.clearFilter('date');
-      },
-      clearFilter() {
-        this.$refs.filterTable.clearFilter();
-      },
-
-      setCurrent(row) {
-        this.$refs.singleTable.setCurrentRow(row);
-      },
-
-      toggleSelection(rows) {
-        if (rows) {
-          rows.forEach(row => {
-            this.$refs.multipleTable.toggleRowSelection(row);
-          });
-        } else {
-          this.$refs.multipleTable.clearSelection();
-        }
-      },
-
-      handleClick() {
-        console.log('click');
-      },
-
-      handleEdit(index, row) {
-        console.log(index, row);
-      },
-
-      handleDelete(index, row) {
-        console.log(index, row);
-      },
-
-      handleSelectionChange(val) {
-        this.multipleSelection = val;
-      },
-
-      handleCurrentChange(val) {
-        this.currentRow = val;
-      },
-
-      formatter(row, column) {
-        return row.address;
-      },
-
-      filterTag(value, row) {
-        return row.tag === value;
-      },
-
-      filterHandler(value, row, column) {
-        const property = column['property'];
-        return row[property] === value;
-      },
-
-      tableRowClassName({row, rowIndex}) {
-        if (rowIndex === 1) {
-          return 'warning-row';
-        } else if (rowIndex === 3) {
-          return 'success-row';
-        }
-        return '';
-      },
-
-      deleteRow(index, rows) {
-        rows.splice(index, 1);
-      },
-
-      arraySpanMethod({ row, column, rowIndex, columnIndex }) {
-        if (rowIndex % 2 === 0) {
-          if (columnIndex === 0) {
-            return [1, 2];
-          } else if (columnIndex === 1) {
-            return [0, 0];
-          }
-        }
-      },
-
-      objectSpanMethod({ row, column, rowIndex, columnIndex }) {
-        if (columnIndex === 0) {
-          if (rowIndex % 2 === 0) {
-            return {
-              rowspan: 2,
-              colspan: 1
-            };
-          } else {
-            return {
-              rowspan: 0,
-              colspan: 0
-            };
-          }
-        }
-      },
-
-      indexMethod(index) {
-        return index * 2;
-      }
-    },
-
-    watch: {
-      multipleSelection(val) {
-        console.log('selection: ', val);
-      }
-    }
-  };
-</script>
-
-<style>
-  .el-table .warning-row {
-    background: oldlace;
-  }
-
-  .el-table .success-row {
-    background: #f0f9eb;
-  }
-
-  .demo-table .name-wrapper {
-    display: inline-block;
-  }
-
-  .demo-table .demo-table-expand {
-    label {
-      width: 90px;
-      color: #99a9bf;
-    }
-    .el-form-item {
-      margin-right: 0;
-      margin-bottom: 0;
-      width: 50%;
-    }
-  }
-</style>
-
 ## Table
 
 Display multiple data with similar format. You can sort, filter, compare your data in a table.
@@ -546,7 +177,7 @@ You can highlight your table content to distinguish between "success, informatio
 ```html
 <template>
   <el-table
-    :data="tableData2"
+    :data="tableData"
     style="width: 100%"
     :row-class-name="tableRowClassName">
     <el-table-column
@@ -590,7 +221,7 @@ You can highlight your table content to distinguish between "success, informatio
     },
     data() {
       return {
-        tableData2:  [{
+        tableData:  [{
           date: '2016-05-03',
           name: 'Tom',
           address: 'No. 189, Grove St, Los Angeles'
@@ -622,7 +253,7 @@ When there are too many rows, you can use a fixed header.
 ```html
 <template>
   <el-table
-    :data="tableData3"
+    :data="tableData"
     height="250"
     style="width: 100%">
     <el-table-column
@@ -646,7 +277,7 @@ When there are too many rows, you can use a fixed header.
   export default {
     data() {
       return {
-        tableData3: [{
+        tableData: [{
           date: '2016-05-03',
           name: 'Tom',
           address: 'No. 189, Grove St, Los Angeles'
@@ -792,7 +423,7 @@ When you have huge chunks of data to put in a table, you can fix the header and
 ```html
 <template>
   <el-table
-    :data="tableData3"
+    :data="tableData"
     style="width: 100%"
     height="250">
     <el-table-column
@@ -833,7 +464,7 @@ When you have huge chunks of data to put in a table, you can fix the header and
   export default {
     data() {
       return {
-        tableData3: [{
+        tableData: [{
           date: '2016-05-03',
           name: 'Tom',
           state: 'California',
@@ -898,7 +529,7 @@ When the the data is dynamically changed, you might want the table to have a max
 ```html
 <template>
   <el-table
-    :data="tableData4"
+    :data="tableData"
     style="width: 100%"
     max-height="250">
     <el-table-column
@@ -938,7 +569,7 @@ When the the data is dynamically changed, you might want the table to have a max
       width="120">
       <template slot-scope="scope">
         <el-button
-          @click.native.prevent="deleteRow(scope.$index, tableData4)"
+          @click.native.prevent="deleteRow(scope.$index, tableData)"
           type="text"
           size="small">
           Remove
@@ -957,7 +588,7 @@ When the the data is dynamically changed, you might want the table to have a max
     },
     data() {
       return {
-        tableData4: [{
+        tableData: [{
           date: '2016-05-03',
           name: 'Tom',
           state: 'California',
@@ -1022,7 +653,7 @@ When the data structure is complex, you can use group header to show the data hi
 ```html
 <template>
   <el-table
-    :data="tableData3"
+    :data="tableData"
     style="width: 100%">
     <el-table-column
       prop="date"
@@ -1065,7 +696,7 @@ When the data structure is complex, you can use group header to show the data hi
   export default {
     data() {
       return {
-        tableData3: [{
+        tableData: [{
           date: '2016-05-03',
           name: 'Tom',
           state: 'California',
@@ -1207,7 +838,7 @@ You can also select multiple rows.
 <template>
   <el-table
     ref="multipleTable"
-    :data="tableData3"
+    :data="tableData"
     style="width: 100%"
     @selection-change="handleSelectionChange">
     <el-table-column
@@ -1231,7 +862,7 @@ You can also select multiple rows.
     </el-table-column>
   </el-table>
   <div style="margin-top: 20px">
-    <el-button @click="toggleSelection([tableData3[1], tableData3[2]])">Toggle selection status of second and third rows</el-button>
+    <el-button @click="toggleSelection([tableData[1], tableData[2]])">Toggle selection status of second and third rows</el-button>
     <el-button @click="toggleSelection()">Clear selection</el-button>
   </div>
 </template>
@@ -1240,7 +871,7 @@ You can also select multiple rows.
   export default {
     data() {
       return {
-        tableData3: [{
+        tableData: [{
           date: '2016-05-03',
           name: 'Tom',
           address: 'No. 189, Grove St, Los Angeles'
@@ -1542,7 +1173,7 @@ Customize table header so it can be even more customized.
 ```html
 <template>
   <el-table
-    :data="tableData7.filter(data => !search || data.name.toLowerCase().includes(search.toLowerCase()))"
+    :data="tableData.filter(data => !search || data.name.toLowerCase().includes(search.toLowerCase()))"
     style="width: 100%">
     <el-table-column
       label="Date"
@@ -1617,7 +1248,7 @@ When the row content is too long and you do not want to display the horizontal s
 ```html
 <template>
   <el-table
-    :data="tableData3"
+    :data="tableData"
     style="width: 100%">
     <el-table-column type="expand">
       <template slot-scope="props">
@@ -1642,7 +1273,7 @@ When the row content is too long and you do not want to display the horizontal s
   export default {
     data() {
       return {
-        tableData3: [{
+        tableData: [{
           date: '2016-05-03',
           name: 'Tom',
           state: 'California',
@@ -1699,6 +1330,126 @@ When the row content is too long and you do not want to display the horizontal s
 ```
 :::
 
+### Tree data and lazy mode
+
+:::demo You can display tree structure data. When row contains the `children` field, it is treated as nested data. For rendering nested data, the prop `row-key` is required。Also, child row data can be loaded asynchronously. Set `lazy` property of Table to true and the function `load`. Specify `hasChildren` attribute in row to determine which row contains children. Both `children` and `hasChildren` can be configured via `tree-props`.
+
+```html
+<template>
+<div>
+  <el-table
+    :data="tableData"
+    style="width: 100%;margin-bottom: 20px;"
+    row-key="id"
+    border
+    default-expand-all>
+    <el-table-column
+      prop="date"
+      label="date"
+      sortable
+      width="180">
+    </el-table-column>
+    <el-table-column
+      prop="name"
+      label="Name"
+      sortable
+      width="180">
+    </el-table-column>
+  </el-table>
+
+  <el-table
+    :data="tableData1"
+    style="width: 100%"
+    row-key="id"
+    border
+    lazy
+    :load="load"
+    :tree-props="{children: 'children', hasChildren: 'hasChildren'}">
+    <el-table-column
+      prop="date"
+      label="Date"
+      width="180">
+    </el-table-column>
+    <el-table-column
+      prop="name"
+      label="Name"
+      width="180">
+    </el-table-column>
+  </el-table>
+</div>
+</template>
+<script>
+  export default {
+    data() {
+      return {
+        tableData: [{
+          id: 1,
+          date: '2016-05-02',
+          name: 'wangxiaohu'
+        }, {
+          id: 2,
+          date: '2016-05-04',
+          name: 'wangxiaohu'
+        }, {
+          id: 3,
+          date: '2016-05-01',
+          name: 'wangxiaohu',
+          children: [{
+              id: 31,
+              date: '2016-05-01',
+              name: 'wangxiaohu'
+            }, {
+              id: 32,
+              date: '2016-05-01',
+              name: 'wangxiaohu'
+          }]
+        }, {
+          id: 4,
+          date: '2016-05-03',
+          name: 'wangxiaohu'
+        }],
+        tableData1: [{
+          id: 1,
+          date: '2016-05-02',
+          name: 'wangxiaohu'
+        }, {
+          id: 2,
+          date: '2016-05-04',
+          name: 'wangxiaohu'
+        }, {
+          id: 3,
+          date: '2016-05-01',
+          name: 'wangxiaohu',
+          hasChildren: true
+        }, {
+          id: 4,
+          date: '2016-05-03',
+          name: 'wangxiaohu'
+        }]
+      }
+    },
+    methods: {
+      load(tree, treeNode, resolve) {
+        setTimeout(() => {
+          resolve([
+            {
+              id: 31,
+              date: '2016-05-01',
+              name: 'wangxiaohu'
+            }, {
+              id: 32,
+              date: '2016-05-01',
+              name: 'wangxiaohu'
+            }
+          ])
+        }, 1000)
+      }
+    },
+  }
+</script>
+```
+:::
+
 ### Summary row
 
 For table of numbers, you can add an extra row at the table footer displaying each column's sum.
@@ -1706,7 +1457,7 @@ For table of numbers, you can add an extra row at the table footer displaying ea
 ```html
 <template>
   <el-table
-    :data="tableData6"
+    :data="tableData"
     border
     show-summary
     style="width: 100%">
@@ -1737,7 +1488,7 @@ For table of numbers, you can add an extra row at the table footer displaying ea
   </el-table>
 
   <el-table
-    :data="tableData6"
+    :data="tableData"
     border
     height="200"
     :summary-method="getSummaries"
@@ -1771,7 +1522,7 @@ For table of numbers, you can add an extra row at the table footer displaying ea
   export default {
     data() {
       return {
-        tableData6: [{
+        tableData: [{
           id: '12987122',
           name: 'Tom',
           amount1: '234',
@@ -1845,7 +1596,7 @@ Configuring rowspan and colspan allows you to merge cells
 <template>
   <div>
     <el-table
-      :data="tableData6"
+      :data="tableData"
       :span-method="arraySpanMethod"
       border
       style="width: 100%">
@@ -1876,7 +1627,7 @@ Configuring rowspan and colspan allows you to merge cells
     </el-table>
 
     <el-table
-      :data="tableData6"
+      :data="tableData"
       :span-method="objectSpanMethod"
       border
       style="width: 100%; margin-top: 20px">
@@ -1909,7 +1660,7 @@ Configuring rowspan and colspan allows you to merge cells
   export default {
     data() {
       return {
-        tableData6: [{
+        tableData: [{
           id: '12987122',
           name: 'Tom',
           amount1: '234',
@@ -1977,7 +1728,7 @@ Configuring rowspan and colspan allows you to merge cells
 ### Custom index
 
 You can customize row index in `type=index` columns.
-:::demo To customize row indices, use `index` attribute on <el-table-column> with `type=index`. If it is assigned to a number, all indices will have an offset of that number. It also accepts a method with each index (starting from `0`) as parameter, and the returned value will be displayed as index.
+:::demo To customize row indices, use `index` attribute on `el-table-column` with `type=index`. If it is assigned to a number, all indices will have an offset of that number. It also accepts a method with each index (starting from `0`) as parameter, and the returned value will be displayed as index.
 
 ```html
 <template>
@@ -2059,7 +1810,7 @@ You can customize row index in `type=index` columns.
 |----------------|----------------------|-----------|-----------------------|----------|
 | data | Table data | array | — | — |
 | height | Table's height. By default it has an `auto` height. If its value is a number, the height is measured in pixels; if its value is a string, the value will be assigned to element's style.height, the height is affected by external styles | string/number | — | — |
-| max-height | Table's max-height. The height of the table starts from `auto` until it reaches the maxHeight limit. The `maxHeight` is measured in pixels, same as `height` | string/number | — | — |
+| max-height | Table's max-height. The legal value is a number or the height in px. | string/number | — | — |
 | stripe | whether Table is striped | boolean | — | false |
 | border | whether Table has vertical border | boolean | — | false |
 | size | size of Table | string | medium / small / mini | — |
@@ -2075,9 +1826,9 @@ You can customize row index in `type=index` columns.
 | header-row-style | function that returns custom style for a row in table header, or an object assigning custom style for every row in table header | Function({row, rowIndex})/Object | — | — |
 | header-cell-class-name | function that returns custom class names for a cell in table header, or a string assigning class names for every cell in table header | Function({row, column, rowIndex, columnIndex})/String | — | — |
 | header-cell-style | function that returns custom style for a cell in table header, or an object assigning custom style for every cell in table header | Function({row, column, rowIndex, columnIndex})/Object | — | — |
-| row-key | key of row data, used for optimizing rendering. Required if `reserve-selection` is on. When its type is String, multi-level access is supported, e.g. `user.info.id`, but `user.info[0].id` is not supported, in which case `Function` should be used. | Function(row)/String | — | — |
+| row-key | key of row data, used for optimizing rendering. Required if `reserve-selection` is on or display tree data. When its type is String, multi-level access is supported, e.g. `user.info.id`, but `user.info[0].id` is not supported, in which case `Function` should be used. | Function(row)/String | — | — |
 | empty-text | Displayed text when data is empty. You can customize this area with `slot="empty"` | String | — | No Data |
-| default-expand-all | whether expand all rows by default, only works when the table has a column type="expand" | Boolean | — | false |
+| default-expand-all | whether expand all rows by default, works when the table has a column type="expand" or contains tree structure data | Boolean | — | false |
 | expand-row-keys | set expanded rows by this prop, prop's value is the keys of expand rows, you should set row-key before using this prop | Array | — | |
 | default-sort | set the default sort column and order. property `prop` is used to set default sort column, property `order` is used to set default sort order | Object | `order`: ascending, descending | if `prop` is set, and `order` is not set, then `order` is default to ascending |
 | tooltip-effect | tooltip `effect` property | String | dark/light | | dark |
@@ -2086,6 +1837,10 @@ You can customize row index in `type=index` columns.
 | summary-method | custom summary method | Function({ columns, data }) | — | — |
 | span-method | method that returns rowspan and colspan | Function({ row, column, rowIndex, columnIndex }) | — | — |
 | select-on-indeterminate | controls the behavior of master checkbox in multi-select tables when only some rows are selected (but not all). If true, all rows will be selected, else deselected. | Boolean | — | true |
+| indent      | horizontal indentation of tree data | Number | — | 16 |
+| lazy        | whether to lazy loading data           | Boolean| — | —  |
+| load        | method for loading child row data, only works when `lazy` is true | Function(row, treeNode, resolve) | — | — |
+| tree-props  | configuration for rendering nested data| Object | — | { hasChildren: 'hasChildren', children: 'children' } |
 
 ### Table Events
 | Event Name | Description | Parameters |
@@ -2097,16 +1852,16 @@ You can customize row index in `type=index` columns.
 | 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 |
 | cell-dblclick | triggers when double clicking a cell | row, column, cell, event |
-| row-click | triggers when clicking a row | row, event, column |
-| row-contextmenu | triggers when user right clicks on a row | row, event |
-| row-dblclick | triggers when double clicking a row | row, event |
+| row-click | triggers when clicking a row | row, column, event |
+| row-contextmenu | triggers when user right clicks on a row | row, column, event |
+| row-dblclick | triggers when double clicking a row | row, column, event |
 | header-click | triggers when clicking a column header | column, event |
 | header-contextmenu | triggers when user right clicks on a column header | column, event |
 | sort-change | triggers when Table's sorting changes | { column, prop, order } |
 | filter-change | column's key. If you need to use the filter-change event, this attribute is mandatory to identify which column is being filtered | filters |
 | current-change | triggers when current row changes | currentRow, oldCurrentRow |
 | header-dragend | triggers after changing a column's width by dragging the column header's border | newWidth, oldWidth, column, event |
-| expand-change | triggers when user expands or collapses a row | row, expandedRows |
+| expand-change | triggers when user expands or collapses a row (for expandable table, second param is expandedRows; for tree Table, second param is expanded) | row, (expandedRows \| expanded) |
 
 ### Table Methods
 | Method | Description | Parameters |
@@ -2114,7 +1869,7 @@ You can customize row index in `type=index` columns.
 | clearSelection | used in multiple selection Table, clear user selection | — |
 | toggleRowSelection | used in multiple selection Table, toggle if a certain row is selected. With the second parameter, you can directly set if this row is selected | row, selected |
 | toggleAllSelection | used in multiple selection Table, toggle the selected state of all rows | - |
-| toggleRowExpansion | used in expandable Table, toggle if a certain row is expanded. With the second parameter, you can directly set if this row is expanded or collapsed | row, expanded |
+| toggleRowExpansion | used in expandable Table or tree Table, toggle if a certain row is expanded. With the second parameter, you can directly set if this row is expanded or collapsed | row, expanded |
 | setCurrentRow | used in single selection Table, set a certain row selected. If called without any parameter, it will clear selection. | row |
 | clearSort | clear sorting, restore data to the original order | — |
 | clearFilter | clear filters of the columns whose `columnKey` are passed in. If no params, clear all filters | columnKeys |
@@ -2130,7 +1885,7 @@ You can customize row index in `type=index` columns.
 | Attribute      | Description          | Type      | Accepted Values       | Default  |
 |---------- |-------------- |---------- |--------------------------------  |-------- |
 | type | type of the column. If set to `selection`, the column will display checkbox. If set to `index`, the column will display index of the row (staring from 1). If set to `expand`, the column will display expand icon.  | string | selection/index/expand | — |
-| index | customize indices for each row, works on columns with `type=index` | string, Function(index) | - | - |
+| index | customize indices for each row, works on columns with `type=index` | number, Function(index) | - | - |
 | label | column label | string | — | — |
 | column-key | column's key. If you need to use the filter-change event, you need this attribute to identify which column is being filtered | string | string | — | — |
 | prop |  field name. You can also use its alias: `property` | string | — | — |
diff --git a/examples/docs/en-US/tabs-dotted.md b/examples/docs/en-US/tabs-dotted.md
new file mode 100644
index 00000000000..b8837a53bc9
--- /dev/null
+++ b/examples/docs/en-US/tabs-dotted.md
@@ -0,0 +1 @@
+## TabsDotted
diff --git a/examples/docs/en-US/tabs.md b/examples/docs/en-US/tabs.md
index 586cd017008..6a3b07f6735 100644
--- a/examples/docs/en-US/tabs.md
+++ b/examples/docs/en-US/tabs.md
@@ -1,95 +1,3 @@
-<script>
-  export default {
-    data() {
-      return {
-        activeName: 'second',
-        activeName2: 'first',
-        editableTabsValue: '2',
-        editableTabsValue2: '2',
-        editableTabs: [{
-          title: 'Tab 1',
-          name: '1',
-          content: 'Tab 1 content'
-        }, {
-          title: 'Tab 2',
-          name: '2',
-          content: 'Tab 2 content'
-        }],
-        editableTabs2: [{
-          title: 'Tab 1',
-          name: '1',
-          content: 'Tab 1 content'
-        }, {
-          title: 'Tab 2',
-          name: '2',
-          content: 'Tab 2 content'
-        }],
-        tabIndex: 2,
-        tabPosition: 'top'
-      }
-    },
-    methods: {
-      handleClick(tab, event) {
-        console.log(tab, event);
-      },
-      handleTabsEdit(targetName, action) {
-        if (action === 'add') {
-          let newTabName = ++this.tabIndex + '';
-          this.editableTabs.push({
-            title: 'New Tab',
-            name: newTabName,
-            content: 'New Tab content'
-          });
-          this.editableTabsValue = newTabName;
-        }
-        if (action === 'remove') {
-          let tabs = this.editableTabs;
-          let activeName = this.editableTabsValue;
-          if (activeName === targetName) {
-            tabs.forEach((tab, index) => {
-              if (tab.name === targetName) {
-                let nextTab = tabs[index + 1] || tabs[index - 1];
-                if (nextTab) {
-                  activeName = nextTab.name;
-                }
-              }
-            });
-          }
-          
-          this.editableTabsValue = activeName;
-          this.editableTabs = tabs.filter(tab => tab.name !== targetName);
-        }
-      },
-      addTab(targetName) {
-        let newTabName = ++this.tabIndex + '';
-        this.editableTabs2.push({
-          title: 'New Tab',
-          name: newTabName,
-          content: 'New Tab content'
-        });
-        this.editableTabsValue2 = newTabName;
-      },
-      removeTab(targetName) {
-        let tabs = this.editableTabs2;
-        let activeName = this.editableTabsValue2;
-        if (activeName === targetName) {
-          tabs.forEach((tab, index) => {
-            if (tab.name === targetName) {
-              let nextTab = tabs[index + 1] || tabs[index - 1];
-              if (nextTab) {
-                activeName = nextTab.name;
-              }
-            }
-          });
-        }
-        
-        this.editableTabsValue2 = activeName;
-        this.editableTabs2 = tabs.filter(tab => tab.name !== targetName);
-      }
-    }
-  }
-</script>
-
 ## Tabs
 
 Divide data collections which are related yet belong to different types.
@@ -201,7 +109,7 @@ You can use `tab-position` attribute to set the tab's position.
   export default {
     data() {
       return {
-        tabPosition: 'top'
+        tabPosition: 'left'
       };
     }
   };
@@ -302,14 +210,14 @@ Only card type Tabs support addable & closeable.
 <div style="margin-bottom: 20px;">
   <el-button
     size="small"
-    @click="addTab(editableTabsValue2)"
+    @click="addTab(editableTabsValue)"
   >
     add tab
   </el-button>
 </div>
-<el-tabs v-model="editableTabsValue2" type="card" closable @tab-remove="removeTab">
+<el-tabs v-model="editableTabsValue" type="card" closable @tab-remove="removeTab">
   <el-tab-pane
-    v-for="(item, index) in editableTabs2"
+    v-for="(item, index) in editableTabs"
     :key="item.name"
     :label="item.title"
     :name="item.name"
@@ -321,8 +229,8 @@ Only card type Tabs support addable & closeable.
   export default {
     data() {
       return {
-        editableTabsValue2: '2',
-        editableTabs2: [{
+        editableTabsValue: '2',
+        editableTabs: [{
           title: 'Tab 1',
           name: '1',
           content: 'Tab 1 content'
@@ -337,16 +245,16 @@ Only card type Tabs support addable & closeable.
     methods: {
       addTab(targetName) {
         let newTabName = ++this.tabIndex + '';
-        this.editableTabs2.push({
+        this.editableTabs.push({
           title: 'New Tab',
           name: newTabName,
           content: 'New Tab content'
         });
-        this.editableTabsValue2 = newTabName;
+        this.editableTabsValue = newTabName;
       },
       removeTab(targetName) {
-        let tabs = this.editableTabs2;
-        let activeName = this.editableTabsValue2;
+        let tabs = this.editableTabs;
+        let activeName = this.editableTabsValue;
         if (activeName === targetName) {
           tabs.forEach((tab, index) => {
             if (tab.name === targetName) {
@@ -358,8 +266,8 @@ Only card type Tabs support addable & closeable.
           });
         }
         
-        this.editableTabsValue2 = activeName;
-        this.editableTabs2 = tabs.filter(tab => tab.name !== targetName);
+        this.editableTabsValue = activeName;
+        this.editableTabs = tabs.filter(tab => tab.name !== targetName);
       }
     }
   }
@@ -370,11 +278,11 @@ Only card type Tabs support addable & closeable.
 ### Tabs Attributes
 | Attribute      | Description          | Type      | Accepted Values       | Default  |
 |---------- |-------- |---------- |-------------  |-------- |
+| value / v-model  | binding value, name of the selected tab  | string   |  —  |  name of first tab |
 | type     | type of Tab | string   | card/border-card  |     —    |
 | closable  | whether Tab is closable | boolean   | — |  false  |
 | addable  | whether Tab is addable   | boolean   | — |  false  |
 | editable  | whether Tab is addable and closable | boolean   | — |  false  |
-| value  | name of the selected tab  | string   |  —  |  name of first tab |
 | tab-position  | position of tabs | string   |  top/right/bottom/left  |  top |
 | stretch  | whether width of tab automatically fits its container | boolean   |  -  |  false |
 | before-leave | hook function before switching tab. If `false` is returned or a `Promise` is returned and then is rejected, switching will be prevented | Function(activeName, oldActiveName) | — | — |
@@ -392,6 +300,6 @@ Only card type Tabs support addable & closeable.
 |---------- |-------- |---------- |-------------  |-------- |
 | label     | title of the tab   | string   | — |    —     |
 | disabled | whether Tab is disabled | boolean | — | false |
-| name      | identifier corresponding to the activeName of Tabs, representing the alias of the tab-pane | string | — | ordinal number of the tab-pane in the sequence, e.g. the first tab-pane is '1' |
+| name      | identifier corresponding to the name of Tabs, representing the alias of the tab-pane | string | — | ordinal number of the tab-pane in the sequence, e.g. the first tab-pane is '1' |
 | closable  | whether Tab is closable | boolean   | — |  false  |
 | lazy  | whether Tab is lazily rendered   | boolean   | — |  false  |
\ No newline at end of file
diff --git a/examples/docs/en-US/tag.md b/examples/docs/en-US/tag.md
index 13c618c7a39..e477029650d 100644
--- a/examples/docs/en-US/tag.md
+++ b/examples/docs/en-US/tag.md
@@ -1,62 +1,3 @@
-<script>
-  export default {
-    data() {
-      return {
-        tags: [
-          { name: 'Tag 1', type: '' },
-          { name: 'Tag 2', type: 'success' },
-          { name: 'Tag 3', type: 'info' },
-          { name: 'Tag 4', type: 'warning' },
-          { name: 'Tag 5', type: 'danger' }
-        ],
-        dynamicTags: ['Tag 1', 'Tag 2', 'Tag 3'],
-        inputVisible: false,
-        inputValue: ''
-      };
-    },
-    methods: {
-      handleClose(tag) {
-        this.dynamicTags.splice(this.dynamicTags.indexOf(tag), 1);
-      },
-
-      showInput() {
-        this.inputVisible = true;
-        this.$nextTick(_ => {
-          this.$refs.saveTagInput.$refs.input.focus();
-        });
-      },
-
-      handleInputConfirm() {
-        let inputValue = this.inputValue;
-        if (inputValue) {
-          this.dynamicTags.push(inputValue);
-        }
-        this.inputVisible = false;
-        this.inputValue = '';
-      }
-    }
-  }
-</script>
-
-<style>
-  .demo-box.demo-tag {
-    .el-tag + .el-tag {
-      margin-left: 10px;
-    }
-    .button-new-tag {
-      margin-left: 10px;
-      height: 32px;
-      line-height: 30px;
-      padding: 0 *;
-    }
-    .input-new-tag {
-      width: 90px;
-      margin-left: 10px;
-      vertical-align: bottom;
-    }
-  }
-</style>
-
 ## Tag
 
 Used for marking and selection.
@@ -66,11 +7,11 @@ Used for marking and selection.
 :::demo Use the `type` attribute to define Tag's type. In addition, the `color` attribute can be used to set the background color of the Tag.
 
 ```html
-<el-tag>Tag One</el-tag>
-<el-tag type="success">Tag Two</el-tag>
-<el-tag type="info">Tag Three</el-tag>
-<el-tag type="warning">Tag Four</el-tag>
-<el-tag type="danger">Tag Five</el-tag>
+<el-tag>Tag 1</el-tag>
+<el-tag type="success">Tag 2</el-tag>
+<el-tag type="info">Tag 3</el-tag>
+<el-tag type="warning">Tag 4</el-tag>
+<el-tag type="danger">Tag 5</el-tag>
 ```
 :::
 
@@ -198,18 +139,66 @@ Besides default size, Tag component provides three additional sizes for you to c
 ```
 :::
 
+
+### Theme
+
+Tag provide three different themes: `dark`、`light` and `plain`
+
+:::demo Using `effect` to change, default is `light`
+```html
+<div class="tag-group">
+  <span class="tag-group__title">Dark</span>
+  <el-tag
+    v-for="item in items"
+    :key="item.label"
+    :type="item.type"
+    effect="dark">
+    {{ item.label }}
+  </el-tag>
+</div>
+<div class="tag-group">
+  <span class="tag-group__title">Plain</span>
+  <el-tag
+    v-for="item in items"
+    :key="item.label"
+    :type="item.type"
+    effect="plain">
+    {{ item.label }}
+  </el-tag>
+</div>
+
+<script>
+  export default {
+    data() {
+      return {
+        items: [
+          { type: '', label: 'Tag 1' },
+          { type: 'success', label: 'Tag 2' },
+          { type: 'info', label: 'Tag 3' },
+          { type: 'danger', label: 'Tag 4' },
+          { type: 'warning', label: 'Tag 5' }
+        ]
+      }
+    }
+  }
+</script>
+```
+:::
+
 ### Attributes
 | Attribute      | Description          | Type      | Accepted Values       | Default  |
 |---------- |-------------- |---------- |--------------------------------  |-------- |
-| type | theme | string | success/info/warning/danger | — |
+| type | component type | string | success/info/warning/danger | — |
 | closable | whether Tag can be removed | boolean | — | false |
 | disable-transitions | whether to disable animations | boolean | — | false |
 | hit | whether Tag has a highlighted border | boolean | — | false |
 | color | background color of the Tag | string | — | — |
 | size | tag size | string | medium / small / mini | — |
+| effect | component theme | string | dark / light / plain | light |
 
 
 ### Events
 | Event Name | Description | Parameters |
 |---------- |-------- |---------- |
-| close | triggers when Tag is removed | — |
\ No newline at end of file
+| click | triggers when Tag is clicked | — |
+| close | triggers when Tag is removed | — |
diff --git a/examples/docs/en-US/time-picker.md b/examples/docs/en-US/time-picker.md
index ff907f2277f..a61629e6fba 100644
--- a/examples/docs/en-US/time-picker.md
+++ b/examples/docs/en-US/time-picker.md
@@ -1,11 +1,3 @@
-<style>
-  .demo-box {
-    .el-date-editor + .el-date-editor {
-      margin-left: 10px;
-    }
-  }
-</style>
-
 ## TimePicker
 
 Use Time Picker for time input.
@@ -17,7 +9,7 @@ Provide a list of fixed time for users to choose.
 :::demo Use `el-time-select` label, then assign start time, end time and time step with `start`, `end` and `step`.
 ```html
 <el-time-select
-  v-model="value1"
+  v-model="value"
   :picker-options="{
     start: '08:30',
     step: '00:15',
@@ -30,7 +22,7 @@ Provide a list of fixed time for users to choose.
   export default {
     data() {
       return {
-        value1: ''
+        value: ''
       };
     }
   }
@@ -47,7 +39,7 @@ Can pick an arbitrary time.
 ```html
 <template>
   <el-time-picker
-    v-model="value2"
+    v-model="value1"
     :picker-options="{
       selectableRange: '18:30:00 - 20:30:00'
     }"
@@ -55,7 +47,7 @@ Can pick an arbitrary time.
   </el-time-picker>
   <el-time-picker
     arrow-control
-    v-model="value3"
+    v-model="value2"
     :picker-options="{
       selectableRange: '18:30:00 - 20:30:00'
     }"
@@ -67,8 +59,8 @@ Can pick an arbitrary time.
   export default {
     data() {
       return {
-        value2: new Date(2016, 9, 10, 18, 40),
-        value3: new Date(2016, 9, 10, 18, 40)
+        value1: new Date(2016, 9, 10, 18, 40),
+        value2: new Date(2016, 9, 10, 18, 40)
       };
     }
   }
@@ -126,7 +118,7 @@ Can pick an arbitrary time range.
 <template>
   <el-time-picker
     is-range
-    v-model="value4"
+    v-model="value1"
     range-separator="To"
     start-placeholder="Start time"
     end-placeholder="End time">
@@ -134,7 +126,7 @@ Can pick an arbitrary time range.
   <el-time-picker
     is-range
     arrow-control
-    v-model="value5"
+    v-model="value2"
     range-separator="To"
     start-placeholder="Start time"
     end-placeholder="End time">
@@ -145,8 +137,8 @@ Can pick an arbitrary time range.
   export default {
     data() {
       return {
-        value4: [new Date(2016, 9, 10, 8, 40), new Date(2016, 9, 10, 9, 40)],
-        value5: [new Date(2016, 9, 10, 8, 40), new Date(2016, 9, 10, 9, 40)]
+        value1: [new Date(2016, 9, 10, 8, 40), new Date(2016, 9, 10, 9, 40)],
+        value2: [new Date(2016, 9, 10, 8, 40), new Date(2016, 9, 10, 9, 40)]
       };
     }
   }
@@ -154,27 +146,12 @@ Can pick an arbitrary time range.
 ```
 :::
 
-<script>
-  export default {
-    data() {
-      return {
-        value1: '',
-        value2: new Date(2016, 9, 10, 18, 40),
-        value3: new Date(2016, 9, 10, 18, 40),
-        value4: [new Date(2016, 9, 10, 8, 40), new Date(2016, 9, 10, 9, 40)],
-        value5: [new Date(2016, 9, 10, 8, 40), new Date(2016, 9, 10, 9, 40)],
-        startTime: '',
-        endTime: ''
-      };
-    }
-  }
-</script>
-
 ### Attributes
 | Attribute      | Description          | Type      | Accepted Values       | Default  |
 |---------- |-------------- |---------- |--------------------------------  |-------- |
-| readonly | whether DatePicker is read only | boolean | — | false |
-| disabled | whether DatePicker is disabled | boolean | — | false |
+| value / v-model | binding value | date(TimePicker) / string(TimeSelect) | - | - |
+| readonly | whether TimePicker is read only | boolean | — | false |
+| disabled | whether TimePicker is disabled | boolean | — | false |
 | editable | whether the input is editable | boolean | — | true |
 | clearable | whether to show clear button | boolean | — | true |
 | size | size of Input | string | medium / small / mini | — |
@@ -183,7 +160,6 @@ Can pick an arbitrary time range.
 | end-placeholder | placeholder for the end time in range mode | string | — | — |
 | is-range | whether to pick a time range, only works with `<el-time-picker>` | boolean | — | false |
 | arrow-control | whether to pick time using arrow buttons, only works with `<el-time-picker>` | boolean | — | false |
-| value | value of the picker | Date for Time Picker, and string for Time Select | - | - |
 | align | alignment | left / center / right | left |
 | popper-class | custom class name for TimePicker's dropdown | string | — | — |
 | picker-options | additional options, check the table below | object | — | {} |
diff --git a/examples/docs/en-US/timeline.md b/examples/docs/en-US/timeline.md
new file mode 100644
index 00000000000..4b1bc240218
--- /dev/null
+++ b/examples/docs/en-US/timeline.md
@@ -0,0 +1,153 @@
+## Timeline
+
+Visually display timeline.
+
+### Basic usage
+
+Timeline can be split into multiple activities in ascending or descending. Timestamps are important features that distinguish them from other components. Note the difference with Steps.
+
+:::demo
+```html
+<div class="block">
+  <div class="radio">
+    Order: 
+    <el-radio-group v-model="reverse">
+      <el-radio :label="true">descending</el-radio>
+      <el-radio :label="false">ascending</el-radio>
+    </el-radio-group>
+  </div>
+
+  <el-timeline :reverse="reverse">
+    <el-timeline-item
+      v-for="(activity, index) in activities"
+      :key="index"
+      :timestamp="activity.timestamp">
+      {{activity.content}}
+    </el-timeline-item>
+  </el-timeline>
+</div>
+
+<script>
+  export default {
+    data() {
+      return {
+        reverse: true,
+        activities: [{
+          content: 'Event start',
+          timestamp: '2018-04-15'
+        }, {
+          content: 'Approved',
+          timestamp: '2018-04-13'
+        }, {
+          content: 'Success',
+          timestamp: '2018-04-11'
+        }]
+      };
+    }
+  };
+</script>
+```
+:::
+
+### Custom node
+
+Size, color, and icons can be customized in node.
+
+:::demo
+```html
+<div class="block">
+  <el-timeline>
+    <el-timeline-item
+      v-for="(activity, index) in activities"
+      :key="index"
+      :icon="activity.icon"
+      :type="activity.type"
+      :color="activity.color"
+      :size="activity.size"
+      :timestamp="activity.timestamp">
+      {{activity.content}}
+    </el-timeline-item>
+  </el-timeline>
+</div>
+
+<script>
+  export default {
+    data() {
+      return {
+        activities: [{
+          content: 'Custom icon',
+          timestamp: '2018-04-12 20:46',
+          size: 'large',
+          type: 'primary',
+          icon: 'el-icon-more'
+        }, {
+          content: 'Custom color',
+          timestamp: '2018-04-03 20:46',
+          color: '#0bbd87'
+        }, {
+          content: 'Custom size',
+          timestamp: '2018-04-03 20:46',
+          size: 'large'
+        }, {
+          content: 'Default node',
+          timestamp: '2018-04-03 20:46'
+        }]
+      };
+    }
+  };
+</script>
+```
+:::
+
+### Custom timestamp
+
+Timestamp can be placed on top of content when content is too high.
+
+:::demo
+```html
+<div class="block">
+  <el-timeline>
+    <el-timeline-item timestamp="2018/4/12" placement="top">
+      <el-card>
+        <h4>Update Github template</h4>
+        <p>Tom committed 2018/4/12 20:46</p>
+      </el-card>
+    </el-timeline-item>
+    <el-timeline-item timestamp="2018/4/3" placement="top">
+      <el-card>
+        <h4>Update Github template</h4>
+        <p>Tom committed 2018/4/3 20:46</p>
+      </el-card>
+    </el-timeline-item>
+    <el-timeline-item timestamp="2018/4/2" placement="top">
+      <el-card>
+        <h4>Update Github template</h4>
+        <p>Tom committed 2018/4/2 20:46</p>
+      </el-card>
+    </el-timeline-item>
+  </el-timeline>
+</div>
+```
+:::
+
+### Timeline Attributes
+| Attribute      | Description    | Type      | Accepted Values | Default   |
+|---------- |-------- |---------- |-------------  |-------- |
+| reverse | whether the node is ascending or descending, default is ascending | boolean | — | false |
+
+### Timeline-item Attributes
+| Attribute      | Description    | Type      | Accepted Values | Default   |
+|---------- |-------- |---------- |-------------  |-------- |
+| timestamp     | timestamp content | string  | - | — |
+| hide-timestamp  | whether to show timestamp | boolean | — | false |
+| placement | position of timestamp | string | top / bottom | bottom |
+| type | node type | string | primary / success / warning / danger / info | - |
+| color | background color of node | string | hsl / hsv / hex / rgb | - |
+| size | node size | string | normal / large | normal |
+| icon | icon class name | string | — | - |
+
+### Timeline-Item Slot
+| name | Description |
+|------|--------|
+| — | Custom content for timeline item |
+| dot | Custom defined node |
diff --git a/examples/docs/en-US/tooltip.md b/examples/docs/en-US/tooltip.md
index 272e57c0ed8..9820c03f936 100644
--- a/examples/docs/en-US/tooltip.md
+++ b/examples/docs/en-US/tooltip.md
@@ -1,60 +1,3 @@
-<script>
-  export default {
-    data() {
-      return {
-        disabled: false
-      };
-    }
-  };
-</script>
-
-<style>
-  .demo-tooltip.demo-en-US {
-    &:first-of-type .source {
-      .el-button {
-        width: 110px;
-      }
-    }
-    .el-tooltip + .el-tooltip {
-      margin-left: 15px;
-    }
-    .box {
-      width: 400px;
-    
-      .top {
-        text-align: center;
-      }
-      
-      .left {
-        float: left;
-        width: 110px;
-      }
-      
-      .right {
-        float: right;
-        width: 110px;
-      }
-      
-      .bottom {
-        clear: both;
-        text-align: center;
-      }
-      
-      .item {
-        margin: 4px;
-      }
-      
-      .left .el-tooltip__popper,
-      .right .el-tooltip__popper {
-        padding: 8px 10px;
-      }
-      .el-tooltip {
-        margin-left: 0;
-      }
-    }
-  }
-</style>
-
 ## Tooltip
 
 Display prompt information for mouse hover.
@@ -200,6 +143,16 @@ In fact, Tooltip is an extension based on [Vue-popper](https://github.com/elemen
   </el-tooltip>
 </template>
 
+<script>
+  export default {
+    data() {
+      return {
+        disabled: false
+      };
+    }
+  };
+</script>
+
 <style>
   .slide-fade-enter-active {
     transition: all .3s ease;
@@ -229,7 +182,7 @@ Disabled form elements are not supported for Tooltip, more information can be fo
 |  effect   |  Tooltip theme  | string   | dark/light  | dark  |
 |  content  | display content, can be overridden by `slot#content` | String   | — | — |
 |  placement | position of Tooltip   | string    |  top/top-start/top-end/bottom/bottom-start/bottom-end/left/left-start/left-end/right/right-start/right-end |  bottom |
-|  value(v-model) | visibility of Tooltip | boolean           | — |  false |
+|  value / v-model | visibility of Tooltip | boolean           | — |  false |
 |  disabled       |  whether Tooltip is disabled  | boolean    | — |  false |
 |  offset        |  offset of the Tooltip   | number    | — |  0 |
 |  transition     |  animation name | string             | — | el-fade-in-linear |
@@ -240,3 +193,4 @@ Disabled form elements are not supported for Tooltip, more information can be fo
 |  popper-class  |  custom class name for Tooltip's popper | string | — | — |
 | enterable | whether the mouse can enter the tooltip | Boolean | — | true |
 | hide-after | timeout in milliseconds to hide tooltip | number | — | 0 |
+| tabindex   | [tabindex](https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/tabindex) of Tooltip | number | — | 0 |
diff --git a/examples/docs/en-US/transfer.md b/examples/docs/en-US/transfer.md
index f69119490cd..aab721c6991 100644
--- a/examples/docs/en-US/transfer.md
+++ b/examples/docs/en-US/transfer.md
@@ -1,76 +1,3 @@
-<style>
-  .demo-transfer {
-    .transfer-footer {
-      margin-left: 15px;
-      padding: 6px 5px;
-    }
-  }
-</style>
-
-<script>
-  export default {
-    data() {
-      const generateData = _ => {
-        const data = [];
-        for (let i = 1; i <= 15; i++) {
-          data.push({
-            key: i,
-            label: `Option ${ i }`,
-            disabled: i % 4 === 0
-          });
-        }
-        return data;
-      };
-      const generateData2 = _ => {
-        const data = [];
-        const states = ['California', 'Illinois', 'Maryland', 'Texas', 'Florida', 'Colorado', 'Connecticut '];
-        const initials = ['CA', 'IL', 'MD', 'TX', 'FL', 'CO', 'CT'];
-        states.forEach((city, index) => {
-          data.push({
-            label: city,
-            key: index,
-            initial: initials[index]
-          });
-        });
-        return data;
-      };
-      const generateData3 = _ => {
-        const data = [];
-        for (let i = 1; i <= 15; i++) {
-          data.push({
-            value: i,
-            desc: `Option ${ i }`,
-            disabled: i % 4 === 0
-          });
-        }
-        return data;
-      };
-      return {
-        data: generateData(),
-        data2: generateData2(),
-        data3: generateData3(),
-        value1: [1, 4],
-        value2: [],
-        value3: [1],
-        value4: [1],
-        value5: [],
-        filterMethod(query, item) {
-          return item.initial.toLowerCase().indexOf(query.toLowerCase()) > -1;
-        },
-        renderFunc(h, option) {
-          return <span>{ option.key } - { option.label }</span>;
-        }
-      };
-    },
-
-    methods: {
-      handleChange(value, direction, movedKeys) {
-        console.log(value, direction, movedKeys);
-      }
-    }
-  };
-</script>
-
 ## Transfer
 
 ### Basic usage
@@ -78,7 +5,7 @@
 ```html
 <template>
   <el-transfer
-    v-model="value1"
+    v-model="value"
     :data="data">
   </el-transfer>
 </template>
@@ -99,7 +26,7 @@
       };
       return {
         data: generateData(),
-        value1: [1, 4]
+        value: [1, 4]
       };
     }
   };
@@ -118,15 +45,15 @@ You can search and filter data items.
     filterable
     :filter-method="filterMethod"
     filter-placeholder="State Abbreviations"
-    v-model="value2"
-    :data="data2">
+    v-model="value"
+    :data="data">
   </el-transfer>
 </template>
 
 <script>
   export default {
     data() {
-      const generateData2 = _ => {
+      const generateData = _ => {
         const data = [];
         const states = ['California', 'Illinois', 'Maryland', 'Texas', 'Florida', 'Colorado', 'Connecticut '];
         const initials = ['CA', 'IL', 'MD', 'TX', 'FL', 'CO', 'CT'];
@@ -140,8 +67,8 @@ You can search and filter data items.
         return data;
       };
       return {
-        data2: generateData2(),
-        value2: [],
+        data: generateData(),
+        value: [],
         filterMethod(query, item) {
           return item.initial.toLowerCase().indexOf(query.toLowerCase()) > -1;
         }
@@ -163,7 +90,7 @@ You can customize list titles, button texts, render function for data items, che
   <div style="text-align: center">
     <el-transfer
       style="text-align: left; display: inline-block"
-      v-model="value3"
+      v-model="value"
       filterable
       :left-default-checked="[2, 3]"
       :right-default-checked="[1]"
@@ -226,7 +153,7 @@ You can customize list titles, button texts, render function for data items, che
       };
       return {
         data: generateData(),
-        value3: [1],
+        value: [1],
         value4: [1],
         renderFunc(h, option) {
           return <span>{ option.key } - { option.label }</span>;
@@ -251,19 +178,19 @@ By default, Transfer looks for `key`, `label` and `disabled` in a data item. If
 ```html
 <template>
   <el-transfer
-    v-model="value5"
+    v-model="value"
     :props="{
       key: 'value',
       label: 'desc'
     }"
-    :data="data3">
+    :data="data">
   </el-transfer>
 </template>
 
 <script>
   export default {
     data() {
-      const generateData3 = _ => {
+      const generateData = _ => {
         const data = [];
         for (let i = 1; i <= 15; i++) {
           data.push({
@@ -275,8 +202,8 @@ By default, Transfer looks for `key`, `label` and `disabled` in a data item. If
         return data;
       };
       return {
-        data3: generateData3(),
-        value5: []
+        data: generateData(),
+        value: []
       };
     }
   };
@@ -287,6 +214,7 @@ By default, Transfer looks for `key`, `label` and `disabled` in a data item. If
 ### Attributes
 | Attribute | Description | Type  | Accepted Values | Default |
 |---------- |-------- |---------- |-------------  |-------- |
+| value / v-model | binding value | array | — | — |
 | data | data source | array[{ key, label, disabled }] | — | [ ] |
 | filterable | whether Transfer is filterable | boolean | — | false |
 | filter-placeholder | placeholder for the filter input | string | — | Enter keyword |
diff --git a/examples/docs/en-US/transition.md b/examples/docs/en-US/transition.md
index 2658239d0dd..18bd8fd07b9 100644
--- a/examples/docs/en-US/transition.md
+++ b/examples/docs/en-US/transition.md
@@ -35,7 +35,7 @@ You can use Element's built-in transitions directly. Before that, please read th
     width: 200px;
     height: 100px;
     border-radius: 4px;
-    background-color: #409EFF;
+    background-color: #2460e0;
     text-align: center;
     color: #fff;
     padding: 40px 20px;
@@ -84,7 +84,7 @@ You can use Element's built-in transitions directly. Before that, please read th
     width: 200px;
     height: 100px;
     border-radius: 4px;
-    background-color: #409EFF;
+    background-color: #2460e0;
     text-align: center;
     color: #fff;
     padding: 40px 20px;
@@ -131,7 +131,7 @@ For collapse effect, use the `el-collapse-transition` component.
     width: 200px;
     height: 100px;
     border-radius: 4px;
-    background-color: #409EFF;
+    background-color: #2460e0;
     text-align: center;
     color: #fff;
     padding: 40px 20px;
@@ -146,35 +146,10 @@ For collapse effect, use the `el-collapse-transition` component.
 
 ```js
 // fade/zoom
-import 'element-ui/lib/theme-chalk/base.css';
+import '@femessage/element-ui/lib/theme-chalk/base.css';
 // collapse
-import CollapseTransition from 'element-ui/lib/transitions/collapse-transition';
+import CollapseTransition from '@femessage/element-ui/lib/transitions/collapse-transition';
 import Vue from 'vue'
 
 Vue.component(CollapseTransition.name, CollapseTransition)
 ```
-
-<style>
-  .transition-box {
-    margin-bottom: 10px;
-    width: 200px;
-    height: 100px;
-    border-radius: 4px;
-    background-color: #409EFF;
-    text-align: center;
-    color: #fff;
-    padding: 40px 20px;
-    margin-right: 20px;
-    box-sizing: border-box;
-  }
-</style>
-
-<script>
-  module.exports = {
-    data: () => ({
-      show: true,
-      show2: true,
-      show3: true
-    })
-  }
-</script>
diff --git a/examples/docs/en-US/tree.md b/examples/docs/en-US/tree.md
index ca56ec471dd..abf25577174 100644
--- a/examples/docs/en-US/tree.md
+++ b/examples/docs/en-US/tree.md
@@ -1,382 +1,3 @@
-<style>
-  .demo-tree {
-    .leaf {
-      width: 20px;
-      background: #ddd;
-    }
-
-    .folder {
-      width: 20px;
-      background: #888;
-    }
-
-    .buttons {
-      margin-top: 20px;
-    }
-
-    .filter-tree {
-      margin-top: 20px;
-    }
-
-    .custom-tree-container {
-      display: flex;
-      margin: -24px;
-    }
-
-    .block {
-      flex: 1;
-      padding: 8px 24px 24px;
-
-      &:first-child {
-        border-right: solid 1px #eff2f6;
-      }
-
-      > p {
-        text-align: center;
-        margin: 0;
-        line-height: 4;
-      }
-    }
-
-    .custom-tree-node {
-      flex: 1;
-      display: flex;
-      align-items: center;
-      justify-content: space-between;
-      font-size: 14px;
-      padding-right: 8px;
-    }
-  }
-</style>
-
-<script>
-  const data = [{
-    label: 'Level one 1',
-    children: [{
-      label: 'Level two 1-1',
-      children: [{
-        label: 'Level three 1-1-1'
-      }]
-    }]
-  }, {
-    label: 'Level one 2',
-    children: [{
-      label: 'Level two 2-1',
-      children: [{
-        label: 'Level three 2-1-1'
-      }]
-    }, {
-      label: 'Level two 2-2',
-      children: [{
-        label: 'Level three 2-2-1'
-      }]
-    }]
-  }, {
-    label: 'Level one 3',
-    children: [{
-      label: 'Level two 3-1',
-      children: [{
-        label: 'Level three 3-1-1'
-      }]
-    }, {
-      label: 'Level two 3-2',
-      children: [{
-        label: 'Level three 3-2-1'
-      }]
-    }]
-  }];
-
-  const data2 = [{
-    id: 1,
-    label: 'Level one 1',
-    children: [{
-      id: 4,
-      label: 'Level two 1-1',
-      children: [{
-        id: 9,
-        label: 'Level three 1-1-1'
-      }, {
-        id: 10,
-        label: 'Level three 1-1-2'
-      }]
-    }]
-  }, {
-    id: 2,
-    label: 'Level one 2',
-    children: [{
-      id: 5,
-      label: 'Level two 2-1'
-    }, {
-      id: 6,
-      label: 'Level two 2-2'
-    }]
-  }, {
-    id: 3,
-    label: 'Level one 3',
-    children: [{
-      id: 7,
-      label: 'Level two 3-1'
-    }, {
-      id: 8,
-      label: 'Level two 3-2'
-    }]
-  }];
-
-  const data3 = [{
-    id: 1,
-    label: 'Level one 1',
-    children: [{
-      id: 3,
-      label: 'Level two 2-1',
-      children: [{
-        id: 4,
-        label: 'Level three 3-1-1'
-      }, {
-        id: 5,
-        label: 'Level three 3-1-2',
-        disabled: true
-      }]
-    }, {
-      id: 2,
-      label: 'Level two 2-2',
-      disabled: true,
-      children: [{
-        id: 6,
-        label: 'Level three 3-2-1'
-      }, {
-        id: 7,
-        label: 'Level three 3-2-2',
-        disabled: true
-      }]
-    }]
-  }];
-
-  const data6 = [{
-    label: 'Level one 1',
-    children: [{
-      label: 'Level two 1-1',
-      children: [{
-        label: 'Level three 1-1-1'
-      }]
-    }]
-  }, {
-    label: 'Level one 2',
-    children: [{
-      label: 'Level two 2-1',
-      children: [{
-        label: 'Level three 2-1-1'
-      }]
-    }, {
-      label: 'Level two 2-2',
-      children: [{
-        label: 'Level three 2-2-1'
-      }]
-    }]
-  }, {
-    label: 'Level one 3',
-    children: [{
-      label: 'Level two 3-1',
-      children: [{
-        label: 'Level three 3-1-1'
-      }]
-    }, {
-      label: 'Level two 3-2',
-      children: [{
-        label: 'Level three 3-2-1'
-      }]
-    }]
-  }];
-
-  let id = 1000;
-
-  const regions = [{
-    'name': 'region1'
-  }, {
-    'name': 'region2'
-  }];
-
-  let count = 1;
-
-  const props = {
-    label: 'name',
-    children: 'zones'
-  };
-
-  const props1 = {
-    label: 'name',
-    children: 'zones',
-    isLeaf: 'leaf'
-  };
-
-  const defaultProps = {
-    children: 'children',
-    label: 'label'
-  };
-
-  export default {
-    watch: {
-      filterText(val) {
-        this.$refs.tree2.filter(val);
-      }
-    },
-
-    methods: {
-      handleCheckChange(data, checked, indeterminate) {
-        console.log(data, checked, indeterminate);
-      },
-      handleNodeClick(data) {
-        console.log(data);
-      },
-      handleDragStart(node, ev) {
-        console.log('drag start', node);
-      },
-      handleDragEnter(draggingNode, dropNode, ev) {
-        console.log('tree drag enter: ', dropNode.label);
-      },
-      handleDragLeave(draggingNode, dropNode, ev) {
-        console.log('tree drag leave: ', dropNode.label);
-      },
-      handleDragOver(draggingNode, dropNode, ev) {
-        console.log('tree drag over: ', dropNode.label);
-      },
-      handleDragEnd(draggingNode, dropNode, dropType, ev) {
-        console.log('tree drag end: ', dropNode && dropNode.label, dropType);
-      },
-      handleDrop(draggingNode, dropNode, dropType, ev) {
-        console.log('tree drop: ', dropNode.label, dropType);
-      },
-      allowDrop(draggingNode, dropNode, type) {
-        if (dropNode.data.label === 'Level two 3-1') {
-          return type !== 'inner';
-        } else {
-          return true;
-        }
-      },
-      allowDrag(draggingNode) {
-        return draggingNode.data.label.indexOf('Level three 3-1-1') === -1;
-      },
-      loadNode(node, resolve) {
-        if (node.level === 0) {
-          return resolve([{ name: 'Root1' }, { name: 'Root2' }]);
-        }
-        if (node.level > 3) return resolve([]);
-        var hasChild;
-        if (node.data.name === 'region1') {
-          hasChild = true;
-        } else if (node.data.name === 'region2') {
-          hasChild = false;
-        } else {
-          hasChild = Math.random() > 0.5;
-        }
-
-        setTimeout(function() {
-          let data;
-          if (hasChild) {
-            data = [{
-              name: 'zone' + count++
-            }, {
-              name: 'zone' + count++
-            }];
-          } else {
-            data = [];
-          }
-
-          resolve(data);
-        }, 500);
-      },
-      loadNode1(node, resolve) {
-        if (node.level === 0) {
-          return resolve([{ name: 'region' }]);
-        }
-        if (node.level > 1) return resolve([]);
-
-        setTimeout(() => {
-          const data = [{
-            name: 'leaf',
-            leaf: true
-          }, {
-            name: 'zone'
-          }];
-
-          resolve(data);
-        }, 500);
-      },
-      getCheckedNodes() {
-        console.log(this.$refs.tree.getCheckedNodes());
-      },
-      getCheckedKeys() {
-        console.log(this.$refs.tree.getCheckedKeys());
-      },
-      setCheckedNodes() {
-        this.$refs.tree.setCheckedNodes([
-          {
-            id: 5,
-            label: 'Level two 2-1'
-          },
-          {
-            id: 9,
-            label: 'Level three 1-1-1'
-          }
-        ]);
-      },
-      setCheckedKeys() {
-        this.$refs.tree.setCheckedKeys([3]);
-      },
-      resetChecked() {
-        this.$refs.tree.setCheckedKeys([]);
-      },
-      append(data) {
-        const newChild = { id: id++, label: 'testtest', children: [] };
-        if (!data.children) {
-          this.$set(data, 'children', []);
-        }
-        data.children.push(newChild);
-      },
-
-      remove(node, data) {
-        const parent = node.parent;
-        const children = parent.data.children || parent.data;
-        const index = children.findIndex(d => d.id === data.id);
-        children.splice(index, 1);
-      },
-
-      renderContent(h, { node, data, store }) {
-        return (
-          <span class="custom-tree-node">
-            <span>{node.label}</span>
-            <span>
-              <el-button size="mini" type="text" on-click={ () => this.append(data) }>Append</el-button>
-              <el-button size="mini" type="text" on-click={ () => this.remove(node, data) }>Delete</el-button>
-            </span>
-          </span>);
-      },
-
-      filterNode(value, data) {
-        if (!value) return true;
-        return data.label.indexOf(value) !== -1;
-      }
-    },
-
-    data() {
-      return {
-        data,
-        data2,
-        data3,
-        data4: JSON.parse(JSON.stringify(data2)),
-        data5: JSON.parse(JSON.stringify(data2)),
-        data6,
-        regions,
-        defaultProps,
-        props,
-        props1,
-        defaultCheckedKeys: [5],
-        defaultExpandedKeys: [2, 3],
-        filterText: ''
-      };
-    }
-  };
-</script>
-
 ## Tree
 
 Display a set of data with hierarchies.
@@ -517,8 +138,8 @@ Used for node selection.
 :::demo A node's data is not fetched until it is clicked, so the Tree cannot predict whether a node is a leaf node. That's why a drop-down button is added to each node, and if it is a leaf node, the drop-down button will disappear when clicked. That being said, you can also tell the Tree in advance whether the node is a leaf node, avoiding the render of the drop-down button before a leaf node.
 ```html
 <el-tree
-  :props="props1"
-  :load="loadNode1"
+  :props="props"
+  :load="loadNode"
   lazy
   show-checkbox>
 </el-tree>
@@ -527,7 +148,7 @@ Used for node selection.
   export default {
     data() {
       return {
-        props1: {
+        props: {
           label: 'name',
           children: 'zones',
           isLeaf: 'leaf'
@@ -535,7 +156,7 @@ Used for node selection.
       };
     },
     methods: {
-      loadNode1(node, resolve) {
+      loadNode(node, resolve) {
         if (node.level === 0) {
           return resolve([{ name: 'region' }]);
         }
@@ -565,7 +186,7 @@ The checkbox of a node can be set as disabled.
 :::demo In the example, 'disabled' property is declared in defaultProps, and some nodes are set as 'disabled:true'. The corresponding checkboxes are disabled and can't be clicked.
 ```html
 <el-tree
-  :data="data3"
+  :data="data"
   :props="defaultProps"
   show-checkbox
   @check-change="handleCheckChange">
@@ -575,7 +196,7 @@ The checkbox of a node can be set as disabled.
   export default {
     data() {
       return {
-        data3: [{
+        data: [{
           id: 1,
           label: 'Level one 1',
           children: [{
@@ -621,7 +242,7 @@ Tree nodes can be initially expanded or checked
 :::demo Use `default-expanded-keys` and `default-checked-keys` to set initially expanded and initially checked nodes respectively. Note that for them to work, `node-key` is required. Its value is the name of a key in the data object, and the value of that key should be unique across the whole tree.
 ```html
 <el-tree
-  :data="data2"
+  :data="data"
   show-checkbox
   node-key="id"
   :default-expanded-keys="[2, 3]"
@@ -633,7 +254,7 @@ Tree nodes can be initially expanded or checked
   export default {
     data() {
       return {
-        data2: [{
+        data: [{
           id: 1,
           label: 'Level one 1',
           children: [{
@@ -684,7 +305,7 @@ Tree nodes can be initially expanded or checked
 :::demo This example shows how to get and set checked nodes. They both can be done in two approaches: node and key. If you are taking the key approach, `node-key` is required.
 ```html
 <el-tree
-  :data="data2"
+  :data="data"
   show-checkbox
   default-expand-all
   node-key="id"
@@ -729,7 +350,7 @@ Tree nodes can be initially expanded or checked
 
     data() {
       return {
-        data2: [{
+        data: [{
           id: 1,
           label: 'Level one 1',
           children: [{
@@ -784,7 +405,7 @@ The content of tree nodes can be customized, so you can add icons or buttons as
   <div class="block">
     <p>Using render-content</p>
     <el-tree
-      :data="data4"
+      :data="data"
       show-checkbox
       node-key="id"
       default-expand-all
@@ -795,7 +416,7 @@ The content of tree nodes can be customized, so you can add icons or buttons as
   <div class="block">
     <p>Using scoped slot</p>
     <el-tree
-      :data="data5"
+      :data="data"
       show-checkbox
       node-key="id"
       default-expand-all
@@ -862,8 +483,8 @@ The content of tree nodes can be customized, so you can add icons or buttons as
         }]
       }];
       return {
-        data4: JSON.parse(JSON.stringify(data)),
-        data5: JSON.parse(JSON.stringify(data))
+        data: JSON.parse(JSON.stringify(data)),
+        data: JSON.parse(JSON.stringify(data))
       }
     },
 
@@ -922,18 +543,18 @@ Tree nodes can be filtered
 
 <el-tree
   class="filter-tree"
-  :data="data2"
+  :data="data"
   :props="defaultProps"
   default-expand-all
   :filter-node-method="filterNode"
-  ref="tree2">
+  ref="tree">
 </el-tree>
 
 <script>
   export default {
     watch: {
       filterText(val) {
-        this.$refs.tree2.filter(val);
+        this.$refs.tree.filter(val);
       }
     },
 
@@ -947,7 +568,7 @@ Tree nodes can be filtered
     data() {
       return {
         filterText: '',
-        data2: [{
+        data: [{
           id: 1,
           label: 'Level one 1',
           children: [{
@@ -1068,7 +689,7 @@ You can drag and drop Tree nodes by adding a `draggable` attribute.
 :::demo
 ```html
 <el-tree
-  :data="data6"
+  :data="data"
   node-key="id"
   default-expand-all
   @node-drag-start="handleDragStart"
@@ -1086,7 +707,7 @@ You can drag and drop Tree nodes by adding a `draggable` attribute.
   export default {
     data() {
       return {
-        data6: [{
+        data: [{
           label: 'Level one 1',
           children: [{
             label: 'Level two 1-1',
@@ -1162,6 +783,48 @@ You can drag and drop Tree nodes by adding a `draggable` attribute.
 ```
 :::
 
+### Virtual scroll
+
+Use virtual list through `height` prop.
+
+**WARNING：The draggable and lazy mode will be invalid when use virtual list**
+:::demo
+```html
+<el-tree :data="data" nodeKey="key" :props="defaultProps" default-expand-all :height="300" show-checkbox />
+
+<script>
+  export default {
+    data() {
+      function dig(path = '0', level = 3) {
+        const list = [];
+        for (let i = 0; i < 10; i += 1) {
+          const key = `${path}-${i}`;
+          const treeNode = {
+            title: key,
+            key,
+          };
+
+          if (level > 0) {
+            treeNode.children = dig(key, level - 1);
+          }
+
+          list.push(treeNode);
+        }
+        return list;
+      }
+      return {
+        data: dig(),
+        defaultProps: {
+          children: 'children',
+          label: 'title'
+        }
+      };
+    }
+  };
+</script>
+```
+:::
+
 ### Attributes
 | Attribute             | Description                              | Type                        | Accepted Values | Default |
 | --------------------- | ---------------------------------------- | --------------------------- | --------------- | ------- |
@@ -1190,6 +853,8 @@ You can drag and drop Tree nodes by adding a `draggable` attribute.
 | draggable             | whether enable tree nodes drag and drop | boolean            | —    | false |
 | allow-drag            | this function will be executed before dragging a node. If `false` is returned, the node can not be dragged | Function(node)  | —  | —  |
 | allow-drop            | this function will be executed before the dragging node is dropped. If `false` is returned, the dragging node can not be dropped at the target node. `type` has three possible values: 'prev' (inserting the dragging node before the target node), 'inner' (inserting the dragging node to the target node) and 'next' (inserting the dragging node after the target node) | Function(draggingNode, dropNode, type)  | —    | —     |
+| height                  | Config virtual scroll height           | number                     | —    | 0 |
+| extra-line                  | Set item count under(without) the virtual container           | number                     | —    | 8 |
 
 ### props
 | Attribute | Description                              | Type   | Accepted Values | Default |
@@ -1213,7 +878,7 @@ You can drag and drop Tree nodes by adding a `draggable` attribute.
 | getHalfCheckedNodes | If the node can be selected (`show-checkbox` is `true`), it returns the currently half selected array of nodes | - |
 | getHalfCheckedKeys | If the node can be selected (`show-checkbox` is `true`), it returns the currently half selected array of node's keys | - |
 | getCurrentKey   | return the highlight node's key (null if no node is highlighted) | — |
-| getCurrentNode  | return the highlight node (null if no node is highlighted) | — |
+| getCurrentNode  | return the highlight node's data (null if no node is highlighted) | — |
 | setCurrentKey   | set highlighted node by key, only works when `node-key` is assigned | (key) the node's key to be highlighted. If `null`, cancel the currently highlighted node |
 | setCurrentNode  | set highlighted node, only works when `node-key` is assigned | (node) the node to be highlighted |
 | getNode         | get node by data or key | (data) the node's data or key |
diff --git a/examples/docs/en-US/typography.md b/examples/docs/en-US/typography.md
index 22f8289be93..3e7a0732524 100644
--- a/examples/docs/en-US/typography.md
+++ b/examples/docs/en-US/typography.md
@@ -1,151 +1,151 @@
-<style>
-  .demo-typo-box {
-    height: 200px;
-    width: 200px;
-    position: relative;
-    border: 1px solid #eaeefb;
-    font-size: 40px;
-    color: #1f2d3d;
-    text-align: center;
-    line-height: 162px;
-    padding-bottom: 36px;
-    box-sizing: border-box;
-    display: inline-block;
-    margin-right: 17px;
-    border-radius: 4px;
-
-    .name {
-      position: absolute;
-      bottom: 0;
-      width: 100%;
-      height: 35px;
-      border-top: 1px solid #eaeefb;
-      font-size: 14px;
-      color: #8492a6;
-      line-height: 35px;
-      text-align: left;
-      text-indent: 10px;
-      font-family: 'Helvetica Neue';
-    }
-  }
-  .demo-typo-size {
-    .h1 {
-      font-size: 20px;
-    }
-    .h2 {
-      font-size: 18px;
-    }
-    .h3 {
-      font-size: 16px;
-    }
-    .text-regular {
-      font-size: 14px;
-    }
-    .text-small {
-      font-size: 13px;
-    }
-    .text-smaller {
-      font-size: 12px;
-    }
-    .color-dark-light {
-      color: #99a9bf;
-    }
-  }
-  .typo-PingFang {
-    font-family: 'PingFang SC';
-  }
-  .typo-Hiragino {
-    font-family: 'Hiragino Sans GB';
+<script>
+  import bus from '../../bus';
+  import { ACTION_USER_CONFIG_UPDATE } from '../../components/theme/constant.js';
+  const varMap = [
+    '$--font-size-extra-large',
+    '$--font-size-large',
+    '$--font-size-medium',
+    '$--font-size-base',
+    '$--font-size-small',
+    '$--font-size-extra-small'
+  ];
+  const original = {
+    'font_size_extra_large': '20px',
+    'font_size_large': '18px',
+    'font_size_medium': '16px',
+    'font_size_base': '14px',
+    'font_size_small': '13px',
+    'font_size_extra_small': '12px'
   }
-  .typo-Microsoft {
-    font-family: 'Microsoft YaHei';
+  export default {
+    created() {
+      bus.$on(ACTION_USER_CONFIG_UPDATE, this.setGlobal);
+    },
+    mounted() {
+      this.setGlobal();
+    },
+    methods: {
+      tintColor(color, tint) {
+        return tintColor(color, tint);
+      },
+      setGlobal() {
+        if (window.userThemeConfig) {
+          this.global = window.userThemeConfig.global;
+        }
+      }
+    },
+    data() {
+      return {
+        global: {},
+        'font_size_extra_large': '',
+        'font_size_large': '',
+        'font_size_medium': '',
+        'font_size_base': '',
+        'font_size_small': '',
+        'font_size_extra_small': ''
+      }
+    },
+    watch: {
+      global: {
+        immediate: true,
+        handler(value) {
+          varMap.forEach((v) => {
+            const key = v.replace('$--', '').replace(/-/g, '_')
+            if (value[v]) {
+              this[key] = value[v]
+            } else {
+              this[key] = original[key]
+            }
+          });
+        }
+      }
+    },
   }
-  /* 英文 */
-  .typo-Helvetica-Neue {
-    font-family: 'Helvetica Neue';
-  }
-  .typo-Helvetica {
-    font-family: 'Helvetica';
-  }
-  .typo-Arial {
-    font-family: 'Arial';
-  }
-</style>
+</script>
 
 ## Typography
 
 We create a font convention to ensure the best presentation across different platforms.
 
-### Chinese Font
-
-<div class="demo-typo-box typo-PingFang">
-  和畅惠风
-  <div class="name">PingFang SC</div>
-</div>
-<div class="demo-typo-box typo-Hiragino">
-  和畅惠风
-  <div class="name">Hiragino Sans GB</div>
-</div>
-<div class="demo-typo-box typo-Microsoft">
-  和畅惠风
-  <div class="name">Microsoft YaHei</div>
-</div>
-
-### English / Numberic Font
-
-<div class="demo-typo-box typo-Helvetica-neue">
-  RGag
-  <div class="name">Helvetica Neue</div>
-</div>
-<div class="demo-typo-box typo-Helvetica">
-  RGag
-  <div class="name">Helvetica</div>
-</div>
-<div class="demo-typo-box typo-Arial">
-  RGag
-  <div class="name">Arial</div>
+### Font
+<div class="demo-term-box">
+<img src="../../assets/images/term-pingfang.png" alt="">
+<img src="../../assets/images/term-hiragino.png" alt="">
+<img src="../../assets/images/term-microsoft.png" alt="">
+<img src="../../assets/images/term-sf.png" alt="">
+<img src="../../assets/images/term-helvetica.png" alt="">
+<img src="../../assets/images/term-arial.png" alt="">
 </div>
 
-### Font-family
-
-```css
-font-family: "Helvetica Neue",Helvetica,"PingFang SC","Hiragino Sans GB","Microsoft YaHei","微软雅黑",Arial,sans-serif;
-```
-
 ### Font Convention
 
 <table class="demo-typo-size">
   <tbody>
-    <tr>
-      <td class="h1">Main Title</td>
-      <td class="h1">Build with Element</td>
-      <td class="color-dark-light">20px  Extra large</td>
+  <tr
+    >
+      <td>Level</td>
+      <td>Font Size</td>
+      <td class="color-dark-light">Demo</td>
     </tr>
-    <tr>
-      <td class="h2">Title</td>
-      <td class="h2">Build with Element</td>
-      <td class="color-dark-light">18px large</td>
+    <tr
+    :style="{ fontSize: font_size_extra_small }"
+    >
+      <td>Supplementary text</td>
+      <td class="color-dark-light">{{font_size_extra_small}} Extra Small</td>
+      <td>Build with Element</td>
     </tr>
-    <tr>
-      <td class="h3">Small Title</td>
-      <td class="h3">Build with Element</td>
-      <td class="color-dark-light">16px Medium</td>
+    <tr
+    :style="{ fontSize: font_size_small }"
+    >
+      <td>Body (small)</td>
+      <td class="color-dark-light">{{font_size_small}} Small</td>
+      <td>Build with Element</td>
     </tr>
-    <tr>
-      <td class="text-regular">Body</td>
-      <td class="text-regular">Build with Element</td>
-      <td class="color-dark-light">14px Small</td>
+    <tr
+    :style="{ fontSize: font_size_base }"
+    >
+      <td>Body</td>
+      <td class="color-dark-light">{{font_size_base}} Base</td>
+      <td>Build with Element</td>
     </tr>
-    <tr>
-      <td class="text-small">Body (small)</td>
-      <td class="text-small">Build with Element</td>
-      <td class="color-dark-light">13px Extra Small</td>
+    <tr
+    :style="{ fontSize: font_size_medium }"
+    >
+      <td >Small Title</td>
+      <td class="color-dark-light">{{font_size_medium}} Medium</td>
+      <td>Build with Element</td>
     </tr>
-    <tr>
-      <td class="text-smaller">Supplementary text</td>
-      <td class="text-smaller">Build with Element</td>
-      <td class="color-dark-light">12px Extra Extra Small</td>
+    <tr
+    :style="{ fontSize: font_size_large }"
+    >
+      <td>Title</td>
+      <td class="color-dark-light">{{font_size_large}} large</td>
+      <td>Build with Element</td>
+    </tr>
+    <tr
+    :style="{ fontSize: font_size_extra_large }"
+    >
+      <td>Main Title</td>
+      <td class="color-dark-light">{{font_size_extra_large}} Extra large</td>
+      <td>Build with Element</td>
     </tr>
   </tbody>
 </table>
 
+### Font Line Height
+
+<div>
+<img class="lineH-left" src="~examples/assets/images/typography.png" />
+<ul class="lineH-right">
+<li>line-height:1 <span>No line height</span></li>
+<li>line-height:1.3 <span>Compact</span></li>
+<li>line-height:1.5 <span>Regular</span></li>
+<li>line-height:1.7 <span>Loose</span></li>
+</ul>
+</div>
+
+### Font-family
+
+```css
+font-family: "Helvetica Neue",Helvetica,"PingFang SC","Hiragino Sans GB","Microsoft YaHei","微软雅黑",Arial,sans-serif;
+```
diff --git a/examples/docs/en-US/upload.md b/examples/docs/en-US/upload.md
index af862b25405..2675d2282fc 100644
--- a/examples/docs/en-US/upload.md
+++ b/examples/docs/en-US/upload.md
@@ -1,122 +1,3 @@
-<style>
-  .upload-tip {
-    color: #8492a6;
-    font-size: 12px;
-    margin-top: 7px;
-  }
-  .demo-box {
-    margin-bottom: 24px;
-
-    .upload-demo {
-      width: 360px;
-    }
-    .avatar-uploader {
-      .el-upload {
-        border: 1px dashed #d9d9d9;
-        border-radius: 6px;
-        cursor: pointer;
-        position: relative;
-        overflow: hidden;
-
-        &:hover, &:focus {
-          border-color: #409EFF;
-        }
-      }
-      .avatar-uploader-icon {
-        font-size: 28px;
-        color: #8c939d;
-        width: 178px;
-        height: @width;
-        line-height: @height;
-        text-align: center;
-      }
-      .avatar {
-        width: 178px;
-        height: @width;
-        display: block;
-      }
-    }
-  }
-</style>
-
-<script>
-  export default {
-    data() {
-      return {
-        fileList: [{
-          name: 'food.jpeg',
-          url: 'https://fuss10.elemecdn.com/3/63/4e7f3a15429bfda99bce42a18cdd1jpeg.jpeg?imageMogr2/thumbnail/360x360/format/webp/quality/100'
-        }, {
-          name: 'food2.jpeg',
-          url: 'https://fuss10.elemecdn.com/3/63/4e7f3a15429bfda99bce42a18cdd1jpeg.jpeg?imageMogr2/thumbnail/360x360/format/webp/quality/100'
-        }],
-        fileList2: [{
-          name: 'food.jpeg',
-          url: 'https://fuss10.elemecdn.com/3/63/4e7f3a15429bfda99bce42a18cdd1jpeg.jpeg?imageMogr2/thumbnail/360x360/format/webp/quality/100'
-        }, {
-          name: 'food2.jpeg',
-          url: 'https://fuss10.elemecdn.com/3/63/4e7f3a15429bfda99bce42a18cdd1jpeg.jpeg?imageMogr2/thumbnail/360x360/format/webp/quality/100'
-        }],
-        fileList3: [{
-          name: 'food.jpeg',
-          url: 'https://fuss10.elemecdn.com/3/63/4e7f3a15429bfda99bce42a18cdd1jpeg.jpeg?imageMogr2/thumbnail/360x360/format/webp/quality/100'
-        }, {
-          name: 'food2.jpeg',
-          url: 'https://fuss10.elemecdn.com/3/63/4e7f3a15429bfda99bce42a18cdd1jpeg.jpeg?imageMogr2/thumbnail/360x360/format/webp/quality/100'
-        }],
-        imageUrl: '',
-        dialogImageUrl: '',
-        dialogVisible: false
-      };
-    },
-    methods: {
-      handleRemove(file, fileList) {
-        console.log(file, fileList);
-      },
-      beforeUpload(file) {
-        if (file.size > 40000000) {
-          console.warn(file.name + ' is too large!');
-          return false;
-        }
-        return true;
-      },
-      handlePreview(file) {
-        console.log(file);
-      },
-      handlePictureCardPreview(file) {
-        this.dialogImageUrl = file.url;
-        this.dialogVisible = true;
-      },
-      submitUpload() {
-        this.$refs.upload.submit();
-      },
-      handleAvatarSuccess(res, file) {
-        this.imageUrl = URL.createObjectURL(file.raw);
-      },
-      beforeAvatarUpload(file) {
-        const isJPG = file.type === 'image/jpeg';
-        const isLt2M = file.size / 1024 / 1024 < 2;
-
-        if (!isJPG) {
-          this.$message.error('Avatar picture must be JPG format!');
-        }
-        if (!isLt2M) {
-          this.$message.error('Avatar picture size can not exceed 2MB!');
-        }
-        return isJPG && isLt2M;
-      },
-      handleChange(file, fileList) {
-        this.fileList3 = fileList.slice(-3);
-      },
-      handleExceed(files, fileList) {
-        this.$message.warning(`You can upload up to 3 files. You selected ${files.length} files this time, and ${files.length + fileList.length} files totally`);
-      },
-      beforeRemove(file, fileList) {
-        return this.$confirm(`确定移除 ${ file.name }？`);
-      }
-    }
-  }
-</script>
 ## Upload
 
 Upload files by clicking or drag-and-drop
@@ -156,7 +37,7 @@ Upload files by clicking or drag-and-drop
         this.$message.warning(`The limit is 3, you selected ${files.length} files this time, add up to ${files.length + fileList.length} totally`);
       },
       beforeRemove(file, fileList) {
-        return this.$confirm(`确定移除 ${ file.name }？`);
+        return this.$confirm(`Cancel the transfert of ${ file.name } ?`);
       }
     }
   }
@@ -189,7 +70,7 @@ Use `before-upload` hook to limit the upload file format and size.
     overflow: hidden;
   }
   .avatar-uploader .el-upload:hover {
-    border-color: #409EFF;
+    border-color: #2460e0;
   }
   .avatar-uploader-icon {
     font-size: 28px;
@@ -273,6 +154,75 @@ Use `list-type` to change the fileList style.
 ```
 :::
 
+### Custom file thumbnail
+
+Use `scoped-slot` to change default thumbnail template.
+
+:::demo
+```html
+<el-upload
+  action="#"
+  list-type="picture-card"
+  :auto-upload="false">
+    <i slot="default" class="el-icon-plus"></i>
+    <div slot="file" slot-scope="{file}">
+      <img
+        class="el-upload-list__item-thumbnail"
+        :src="file.url" alt=""
+      >
+      <span class="el-upload-list__item-actions">
+        <span
+          class="el-upload-list__item-preview"
+          @click="handlePictureCardPreview(file)"
+        >
+          <i class="el-icon-zoom-in"></i>
+        </span>
+        <span
+          v-if="!disabled"
+          class="el-upload-list__item-delete"
+          @click="handleDownload(file)"
+        >
+          <i class="el-icon-download"></i>
+        </span>
+        <span
+          v-if="!disabled"
+          class="el-upload-list__item-delete"
+          @click="handleRemove(file)"
+        >
+          <i class="el-icon-delete"></i>
+        </span>
+      </span>
+    </div>
+</el-upload>
+<el-dialog :visible.sync="dialogVisible">
+  <img width="100%" :src="dialogImageUrl" alt="">
+</el-dialog>
+<script>
+  export default {
+    data() {
+      return {
+        dialogImageUrl: '',
+        dialogVisible: false,
+        disabled: false
+      };
+    },
+    methods: {
+      handleRemove(file) {
+        console.log(file);
+      },
+      handlePictureCardPreview(file) {
+        this.dialogImageUrl = file.url;
+        this.dialogVisible = true;
+      },
+      handleDownload(file) {
+        console.log(file);
+      }
+    }
+  }
+</script>
+```
+:::
+
 ### FileList with thumbnail
 
 :::demo
@@ -282,7 +232,7 @@ Use `list-type` to change the fileList style.
   action="https://jsonplaceholder.typicode.com/posts/"
   :on-preview="handlePreview"
   :on-remove="handleRemove"
-  :file-list="fileList2"
+  :file-list="fileList"
   list-type="picture">
   <el-button size="small" type="primary">Click to upload</el-button>
   <div slot="tip" class="el-upload__tip">jpg/png files with a size less than 500kb</div>
@@ -291,7 +241,7 @@ Use `list-type` to change the fileList style.
   export default {
     data() {
       return {
-        fileList2: [{name: 'food.jpeg', url: 'https://fuss10.elemecdn.com/3/63/4e7f3a15429bfda99bce42a18cdd1jpeg.jpeg?imageMogr2/thumbnail/360x360/format/webp/quality/100'}, {name: 'food2.jpeg', url: 'https://fuss10.elemecdn.com/3/63/4e7f3a15429bfda99bce42a18cdd1jpeg.jpeg?imageMogr2/thumbnail/360x360/format/webp/quality/100'}]
+        fileList: [{name: 'food.jpeg', url: 'https://fuss10.elemecdn.com/3/63/4e7f3a15429bfda99bce42a18cdd1jpeg.jpeg?imageMogr2/thumbnail/360x360/format/webp/quality/100'}, {name: 'food2.jpeg', url: 'https://fuss10.elemecdn.com/3/63/4e7f3a15429bfda99bce42a18cdd1jpeg.jpeg?imageMogr2/thumbnail/360x360/format/webp/quality/100'}]
       };
     },
     methods: {
@@ -317,7 +267,7 @@ Use `on-change` hook function to control upload file list
   class="upload-demo"
   action="https://jsonplaceholder.typicode.com/posts/"
   :on-change="handleChange"
-  :file-list="fileList3">
+  :file-list="fileList">
   <el-button size="small" type="primary">Click to upload</el-button>
   <div slot="tip" class="el-upload__tip">jpg/png files with a size less than 500kb</div>
 </el-upload>
@@ -325,7 +275,7 @@ Use `on-change` hook function to control upload file list
   export default {
     data() {
       return {
-        fileList3: [{
+        fileList: [{
           name: 'food.jpeg',
           url: 'https://fuss10.elemecdn.com/3/63/4e7f3a15429bfda99bce42a18cdd1jpeg.jpeg?imageMogr2/thumbnail/360x360/format/webp/quality/100'
         }, {
@@ -336,7 +286,7 @@ Use `on-change` hook function to control upload file list
     },
     methods: {
       handleChange(file, fileList) {
-        this.fileList3 = fileList.slice(-3);
+        this.fileList = fileList.slice(-3);
       }
     }
   }
diff --git a/examples/docs/es/affix.md b/examples/docs/es/affix.md
new file mode 100644
index 00000000000..b0b148f0525
--- /dev/null
+++ b/examples/docs/es/affix.md
@@ -0,0 +1 @@
+## Affix
diff --git a/examples/docs/es/alert.md b/examples/docs/es/alert.md
index 07840a24ab5..6ab0fa51d28 100644
--- a/examples/docs/es/alert.md
+++ b/examples/docs/es/alert.md
@@ -1,22 +1,3 @@
-<script>
-  export default {
-    methods: {
-      hello() {
-        alert('Hello World!');
-      }
-    }
-  }
-</script>
-<style>
-  .demo-box.demo-alert .el-alert {
-    margin: 20px 0 0;
-  }
-
-  .demo-box.demo-alert .el-alert:first-child {
-    margin: 0;
-  }
-</style>
-
 ## Alert
 
 Mostrar mensajes de alertas importantes.
@@ -49,7 +30,38 @@ Los componentes de alertas no son elementos overlay de la página y no desaparec
 ```
 :::
 
-### Personalización del botón de cerrar 
+### Theme
+
+Alert provee dos diferentes temas  `light` y `dark`.
+
+:::demo Use `effect` para cambiar el tema, por defecto es `light`.
+```html
+<template>
+  <el-alert
+    title="success alert"
+    type="success"
+    effect="dark">
+  </el-alert>
+  <el-alert
+    title="info alert"
+    type="info"
+    effect="dark">
+  </el-alert>
+  <el-alert
+    title="warning alert"
+    type="warning"
+    effect="dark">
+  </el-alert>
+  <el-alert
+    title="error alert"
+    type="error"
+    effect="dark">
+  </el-alert>
+</template>
+```
+:::
+
+### Personalización del botón de cerrar
 
 Personalizar el botón de cerrar como texto u otros símbolos.
 
@@ -217,11 +229,13 @@ Descripción incluye un mensaje con información más detallada.
 | center      | si el texto debe estar centrado          | boolean | —                          | false       |
 | close-text  | texto de cerrado personalizado           | string  | —                          | —           |
 | show-icon   | si un icono del tipo de alerta se debe mostrar | boolean | —                          | false       |
+| effect | Choose theme  | string | light/dark | light |
 
 ### Slot
 
 | Name | Description |
 |------|--------|
+| — | descripción |
 | title | El contenido del título de alerta. |
 
 ### Eventos
diff --git a/examples/docs/es/avatar.md b/examples/docs/es/avatar.md
new file mode 100644
index 00000000000..2ff4dab968e
--- /dev/null
+++ b/examples/docs/es/avatar.md
@@ -0,0 +1,146 @@
+## Avatar
+
+Los avatares pueden utilizarse para representar personas u objetos. Soporta imágenes, iconos o caracteres.
+
+### Básico
+
+Use los props `shape` y `size` para establecer la forma y el tamaño del avatar
+
+:::demo
+```html
+<template>
+  <el-row class="demo-avatar demo-basic">
+    <el-col :span="12">
+      <div class="sub-title">circle</div>
+      <div class="demo-basic--circle">
+        <div class="block"><el-avatar :size="50" :src="circleUrl"></el-avatar></div>
+        <div class="block" v-for="size in sizeList" :key="size">
+          <el-avatar :size="size" :src="circleUrl"></el-avatar>
+        </div>
+      </div>
+    </el-col>  
+    <el-col :span="12">
+      <div class="sub-title">square</div>
+      <div class="demo-basic--circle">
+        <div class="block"><el-avatar shape="square" :size="50" :src="squareUrl"></el-avatar></div>
+        <div class="block" v-for="size in sizeList" :key="size">
+          <el-avatar shape="square" :size="size" :src="squareUrl"></el-avatar>
+        </div>
+      </div>
+    </el-col> 
+  </el-row>
+</template>
+<script>
+  export default {
+    data () {
+      return {
+        circleUrl: "https://cube.elemecdn.com/3/7c/3ea6beec64369c2642b92c6726f1epng.png",
+        squareUrl: "https://cube.elemecdn.com/9/c2/f0ee8a3c7c9638a54940382568c9dpng.png",
+        sizeList: ["large", "medium", "small"]
+      }
+    }
+  }
+</script>
+
+```
+:::
+
+### Tipos
+
+Soporta imágenes, iconos o caracteres.
+
+:::demo
+```html
+<template>
+  <div class="demo-type">
+    <div>
+      <el-avatar icon="el-icon-user-solid"></el-avatar>
+    </div>
+    <div>
+      <el-avatar src="https://cube.elemecdn.com/0/88/03b0d39583f48206768a7534e55bcpng.png"></el-avatar>
+    </div>
+    <div>
+      <el-avatar> user </el-avatar>
+    </div>
+  </div>
+</template>
+```
+:::
+
+### Fallback cuando se produce un error de carga de imagen
+
+Fallback cuando se produce un error de carga de imagen
+
+:::demo
+```html
+<template>
+  <div class="demo-type">
+    <el-avatar :size="60" src="https://empty" @error="errorHandler">
+      <img src="https://cube.elemecdn.com/e/fd/0fc7d20532fdaf769a25683617711png.png"/>
+      </el-avatar>
+  </div>
+</template>
+<script>
+  export default {
+    methods: {
+      errorHandler() {
+        return true
+      }
+    }
+  }
+</script>
+
+```
+:::
+
+### Cómo encaja la imagen en su contenedor
+
+Establezca cómo la imagen se ajusta a su contenedor para un avatar de imagen, igual que [object-fit](https://developer.mozilla.org/es/docs/Web/CSS/object-fit).
+
+:::demo
+```html
+<template>
+  <div class="demo-fit">
+    <div class="block" v-for="fit in fits" :key="fit">
+        <span class="title">{{ fit }}</span>
+        <el-avatar shape="square" :size="100" :fit="fit" :src="url"></el-avatar>
+    </div>
+  </div>
+</template>
+<script>
+  export default {
+    data() {
+      return {
+        fits: ['fill', 'contain', 'cover', 'none', 'scale-down'],
+        url: 'https://fuss10.elemecdn.com/e/5d/4a731a90594a4af544c0c25941171jpeg.jpeg'
+      }
+    }
+  }
+</script>
+
+```
+:::
+
+### Atributos
+
+| Atributo     | Descripción | Tipo   | Valores aceptados | Por defecto |
+| ----------------- | -------------------------------- | --------------- | ------ | ------ |
+| icon              | establece el tipo de representación a Icono, más información en  Componente Icon | string          |        |        |
+| size              | Establece el tamaño del avatar | number/string | number / large / medium / small | large  |
+| shape             | establece la forma del avatar | string |    circle / square     |   circle  |
+| src               | la dirección de la imagen para un avatar de imagen | string |        |      |
+| srcSet            | Una lista de una o más cadenas separadas por comas que indica un conjunto de posibles fuentes de imágenes para que el agente de usuario las utilice. | string |        |      |
+| alt               | Este atributo define una descripción de texto alternativo de la imagen | string |        |      |
+| fit               | establece cómo encaja la imagen en su contenedor para un avatar de imagen | string |    fill / contain / cover / none / scale-down    |   cover   |
+
+### Eventos
+
+| Nombre | Descripción | Parámetros |
+| ------ | ------------------ | -------- |
+| error  | cuando se produce un error de carga de img, devuelve false para evitar el comportamiento de repliegue predeterminado |(e: Event)  |
+
+### Slot
+
+| Nombre | Descripción | 
+| default  | personalice el contenido del avatar |
+
diff --git a/examples/docs/es/backtop.md b/examples/docs/es/backtop.md
new file mode 100644
index 00000000000..2c3ba8bd191
--- /dev/null
+++ b/examples/docs/es/backtop.md
@@ -0,0 +1,60 @@
+## Backtop
+
+Un botón para volver a la parte superior
+
+### Uso básico
+
+Desplácese hacia abajo para ver el botón en el lado inferior derecho.
+:::demo
+
+```html
+<template>
+  Scroll down to see the bottom-right button.
+  <el-backtop target=".page-component__scroll .el-scrollbar__wrap"></el-backtop>
+</template>
+```
+
+:::
+
+### Personalización
+
+Área de visualización de 40px \* 40px.
+:::demo
+
+```html
+<template>
+  Scroll down to see the bottom-right button.
+  <el-backtop target=".page-component__scroll .el-scrollbar__wrap" :bottom="100">
+    <div
+      style="{
+        height: 100%;
+        width: 100%;
+        background-color: #f2f5f6;
+        box-shadow: 0 0 6px rgba(0,0,0, .12);
+        text-align: center;
+        line-height: 40px;
+        color: #1989fa;
+      }"
+    >
+      UP
+    </div>
+  </el-backtop>
+</template>
+```
+
+:::
+
+### Atributos
+
+| Atributos | Descripción                                    | Tipo         | Valores aceptados | Por defecto |
+| ----------------- | ------------------------------------------------------------------- | --------------- | --------------- | ------- |
+| target            | el objetivo para activar el scroll      | string          |                 |         |
+| visibility-height | el botón no se mostrará hasta que la altura de desplazamiento alcance este valor | number |                 | 200     |
+| right             | separación desde la derecha              | number |                 | 40      |
+| bottom            | separación desde abajo                                       | number |                 | 40      |
+
+### Eventos
+
+| Nombre del evento | Descripción             | Parámetros  |
+| ----------------- | ----------------------- | ----------- |
+| click             | se activa al hacer clic | click event |
diff --git a/examples/docs/es/badge.md b/examples/docs/es/badge.md
index 7f91c7cbed7..8001fa0eec5 100644
--- a/examples/docs/es/badge.md
+++ b/examples/docs/es/badge.md
@@ -114,32 +114,12 @@ Puede utilizar un punto rojo para marcar contenido que debe ser notado.
 ```
 :::
 
-<style scoped>
-  .share-button {
-    width: 36px;
-    padding: 10px;
-  }
-
-  .mark {
-    margin-top: 8px;
-    line-height: 1;
-    float: right;
-  }
-
-  .clearfix {
-    @utils-clearfix;
-  }
-
-  .item {
-    margin-right: 40px;
-  }
-</style>
-
 ### Atributos
 | Atributo | Descripción                              | Tipo           | Valores aceptados | Por defecto |
 | -------- | ---------------------------------------- | -------------- | ----------------- | ----------- |
 | value    | valor a mostrar                          | string, number | —                 | —           |
 | max      | valor máximo, Muestra '{max}+' cuando se excede. Solo funciona si `value` es un `Number` | number         | —                 | —           |
 | is-dot   | si se debe mostrar un pequeño punto      | boolean        | —                 | false       |
-| hidden   | hidden badge                             | boolean        | —                 | false       |
+| hidden   | oculta el badge                    | boolean        | —                 | false       |
 | type     | tipo de botón                            | string         | primary / success / warning / danger / info | — |
+
diff --git a/examples/docs/es/border.md b/examples/docs/es/border.md
new file mode 100644
index 00000000000..13ac471f5d6
--- /dev/null
+++ b/examples/docs/es/border.md
@@ -0,0 +1,135 @@
+<script>
+  import bus from '../../bus';
+  import { ACTION_USER_CONFIG_UPDATE } from '../../components/theme/constant.js';
+  const varMap = {
+    '$--box-shadow-light': 'boxShadowLight',
+    '$--box-shadow-base': 'boxShadowBase',
+    '$--border-radius-base': 'borderRadiusBase',
+    '$--border-radius-small': 'borderRadiusSmall'
+  };
+  const original = {
+    boxShadowLight: '0 2px 12px 0 rgba(0, 0, 0, 0.1)',
+    boxShadowBase: '0 2px 4px rgba(0, 0, 0, .12), 0 0 6px rgba(0, 0, 0, .04)',
+    borderRadiusBase: '4px',
+    borderRadiusSmall: '2px'
+  }
+  export default {
+    created() {
+      bus.$on(ACTION_USER_CONFIG_UPDATE, this.setGlobal);
+    },
+    mounted() {
+      this.setGlobal();
+    },
+    methods: {
+      setGlobal() {
+        if (window.userThemeConfig) {
+          this.global = window.userThemeConfig.global;
+        }
+      }
+    },
+    data() {
+      return {
+        global: {},
+        boxShadowLight: '',
+        boxShadowBase: '',
+        borderRadiusBase: '',
+        borderRadiusSmall: ''
+      }
+    },
+    watch: {
+      global: {
+        immediate: true,
+        handler(value) {
+          Object.keys(varMap).forEach((c) => {
+            if (value[c]) {
+              this[varMap[c]] = value[c]
+            } else {
+              this[varMap[c]] = original[varMap[c]]
+            }
+          });
+        }
+      }
+    }
+  }
+</script>
+
+## Border
+
+Estandarizamos los bordes que se pueden utilizar en botones, tarjetas, pop-ups y otros componentes.
+
+### Border
+
+Hay pocos estilos de borde para elegir.
+
+<table class="demo-border">
+  <tbody>
+    <tr>
+      <td class="text">Name</td>
+      <td class="text">Thickness</td>
+      <td class="line">Demo</td>
+    </tr>
+    <tr>
+      <td class="text">Solid</td>
+      <td class="text">1px</td>
+      <td class="line">
+        <div></div>
+      </td>
+    </tr>
+    <tr>
+      <td class="text">Dashed</td>
+      <td class="text">2px</td>
+      <td class="line">
+        <div class="dashed"></div>
+      </td>
+    </tr>
+  </tbody>
+</table>
+
+### Radius
+
+Hay pocos estilos de radio para elegir.
+
+<el-row :gutter="12" class="demo-radius">
+  <el-col :span="6" :xs="{span: 12}">
+    <div class="title">No Radius</div>
+    <div class="value">border-radius: 0px</div>
+    <div class="radius"></div>
+  </el-col>
+  <el-col :span="6" :xs="{span: 12}">
+    <div class="title">Small Radius</div>
+    <div class="value">border-radius: {{borderRadiusSmall}}</div>
+    <div 
+      class="radius" 
+      :style="{ borderRadius: borderRadiusSmall }"
+    ></div>
+  </el-col>
+  <el-col :span="6" :xs="{span: 12}">
+    <div class="title">Large Radius</div>
+    <div class="value">border-radius: {{borderRadiusBase}}</div>
+    <div 
+      class="radius"
+      :style="{ borderRadius: borderRadiusBase }"
+    ></div>
+  </el-col>
+  <el-col :span="6" :xs="{span: 12}">
+    <div class="title">Round Radius</div>
+    <div class="value">border-radius: 30px</div>
+    <div class="radius radius-30"></div>
+  </el-col>
+</el-row>
+
+### Shadow
+
+Hay pocos estilos de sombra para elegir.
+
+<div 
+class="demo-shadow"
+:style="{ boxShadow: boxShadowBase }"
+></div>
+<span class="demo-shadow-text">Basic Shadow box-shadow: {{boxShadowBase}}</span>
+
+<div 
+class="demo-shadow"
+:style="{ boxShadow: boxShadowLight }"
+></div>
+<span class="demo-shadow-text">Light Shadow box-shadow: {{boxShadowLight}}</span>
diff --git a/examples/docs/es/breadcrumb.md b/examples/docs/es/breadcrumb.md
index 727e821762c..adf45a48f44 100644
--- a/examples/docs/es/breadcrumb.md
+++ b/examples/docs/es/breadcrumb.md
@@ -5,7 +5,7 @@ Muestra la localización de la página actual, haciendo más fácil el poder ir
 ### Uso básico
 
 
-:::demo En `el-breadcrumb`, cada `el-breadcrumb-item` es un tag que representa cada nivel empezando desde la homepage. Este componente tiene un atributo `String` llamado `separator`, el mismo determina el caracter separador. El valor por defecto es '/'.
+:::demo En `el-breadcrumb`, cada `el-breadcrumb-item` es un tag que representa cada nivel empezando desde la homepage. Este componente tiene un atributo `String` llamado `separator`, el mismo determina el carácter separador. El valor por defecto es '/'.
 
 ```html
 <el-breadcrumb separator="/">
@@ -34,7 +34,7 @@ Muestra la localización de la página actual, haciendo más fácil el poder ir
 ### Breadcrumb atributos
 | Atributo        | Descripción                            | Tipo   | Valores aceptados | Por defecto |
 | --------------- | -------------------------------------- | ------ | ----------------- | ----------- |
-| separator       | caracter separador                     | string | —                 | /           |
+| separator       | carácter separador                     | string | —                 | /           |
 | separator-class | nombre de la clase del icono separador | string | —                 | -           |
 
 ### Breadcrumb Item atributos
diff --git a/examples/docs/es/button-group-enhance.md b/examples/docs/es/button-group-enhance.md
new file mode 100644
index 00000000000..188c81b7813
--- /dev/null
+++ b/examples/docs/es/button-group-enhance.md
@@ -0,0 +1 @@
+## ButtonGroupEnhance
diff --git a/examples/docs/es/button.md b/examples/docs/es/button.md
index a2767262213..3cc87a857f2 100644
--- a/examples/docs/es/button.md
+++ b/examples/docs/es/button.md
@@ -1,27 +1,3 @@
-<style>
-  .demo-box.demo-button {
-    .el-row {
-      margin-bottom: 20px;
-
-      &:last-child {
-        margin-bottom: 0;
-      }
-    }
-    .el-button + .el-button {
-      margin-left: 10px;
-    }
-    .el-button-group {
-      .el-button + .el-button {
-        margin-left: 0;
-      }
-    
-      & + .el-button-group {
-        margin-left: 10px;
-      }
-    }
-  }
-</style>
-
 ## Button
 
 Botones comúnmente usados.
@@ -111,7 +87,7 @@ Botones sin borde ni fondo.
 
 Use iconos para darle mayor significado a Button. Se puede usar simplemente un icono o un icono con texto.
 
-:::demo Use el atributo `icon` para agregar un icono. Puede encontrar el listado de iconos en el componente de iconos. Agregar iconos a la derecha del texto se puede conseguir con un tag `<i>`. También se pueden usar iconos custom.
+:::demo Use el atributo `icon` para agregar un icono. Puede encontrar el listado de iconos en el componente de iconos. Agregar iconos a la derecha del texto se puede conseguir con un tag `<i>`. También se pueden usar iconos personalizados.
 
 ```html
 <el-button type="primary" icon="el-icon-edit"></el-button>
@@ -156,7 +132,7 @@ Cuando se hace clic en un botón para descargar datos, el botón muestra un esta
 
 Además del tamaño por defecto, el componente Button provee tres tamaños adicionales para utilizar en diferentes escenarios.
 
-:::demo Use el atributo `size` para setear tamaños adicionales con `medium`, `small` or `mini`.
+:::demo Use el atributo `size` para setear tamaños adicionales con `medium`, `small` o `mini`.
 
 ```html
 <el-row>
@@ -181,9 +157,10 @@ Además del tamaño por defecto, el componente Button provee tres tamaños adici
 | type        | tipo de botón                                 | string  | primary / success / warning / danger / info / text | —           |
 | plain       | determinar si es o no un botón plano          | boolean | —                                                  | false       |
 | round       | determinar si es o no un botón redondo        | boolean | —                                                  | false       |
-| circle      | determina si es un boton circular             | boolean | —                                                  | false       |
+| circle      | determina si es un botón circular             | boolean | —                                                  | false       |
 | loading     | determinar si es o no un botón de descarga    | boolean | —                                                  | false       |
 | disabled    | deshabilitar el botón                         | boolean | —                                                  | false       |
 | icon        | nombre de la clase del icono                  | string  | —                                                  | —           |
 | autofocus   | misma funcionalidad que la nativa `autofocus` | boolean | —                                                  | false       |
-| native-type | misma funcionalidad que la nativa `type`      | string  | button / submit / reset                            | button      |
\ No newline at end of file
+| native-type | misma funcionalidad que la nativa `type`      | string  | button / submit / reset                            | button      |
+
diff --git a/examples/docs/es/calendar.md b/examples/docs/es/calendar.md
new file mode 100644
index 00000000000..717861461bc
--- /dev/null
+++ b/examples/docs/es/calendar.md
@@ -0,0 +1,68 @@
+## Calendar
+
+Muestra fechas.
+
+### Básico
+
+:::demo Configure el valor para especificar el mes que se muestra actualmente. Si no se especifica el valor, se muestra el mes actual. el valor soporta la vinculación bidireccional.
+```html
+<el-calendar v-model="value">
+</el-calendar>
+
+<script>
+  export default {
+    data() {
+      return {
+        value: new Date()
+      }
+    }
+  }
+</script>
+```
+:::
+
+### Contenido personalizado
+
+:::demo Personalice lo que se muestra en la celda del calendario configurando el `scoped-slot` llamada `dateCell`. En la ranura de alcance se puede obtener la fecha (la fecha de la celda actual), los datos (incluyendo el tipo, isSelected, el atributo day). Para obtener más información, consulte la documentación de la API a continuación.
+
+```html
+<el-calendar>
+  <!-- Use 2.5 slot syntax. If you use Vue 2.6, please use new slot syntax-->
+  <template
+    slot="dateCell"
+    slot-scope="{date, data}">
+    <p :class="data.isSelected ? 'is-selected' : ''">
+      {{ data.day.split('-').slice(1).join('-') }} {{ data.isSelected ? '✔️' : ''}}
+    </p>
+  </template>
+</el-calendar>
+<style>
+  .is-selected {
+    color: #1989FA;
+  }
+</style>
+```
+:::
+
+### Rango
+
+:::demo Defina el atributo `range` para especificar el rango de visualización del calendario. El tiempo de inicio debe ser el lunes, el tiempo de finalización debe ser el domingo y el período no puede exceder los dos meses.
+```html
+<el-calendar :range="['2019-03-04', '2019-03-24']">
+</el-calendar>
+```
+:::
+
+### Atributos
+| Atributo        | Descripción        | Tipo      | Valores aceptados     | Por defecto |
+|-----------------|------------------- |---------- |---------------------- |------------ |
+| value / v-model | valor vinculante   | Date/string/number | —            | —           |
+| range           | rango de tiempo, incluyendo el tiempo de inicio y el tiempo final. Start time must be start day of week, end time must be end day of week, the time span cannot exceed two months | Array     | —           | —      |
+| first-day-of-week | fisrt day of week| Number    | 1 to 7                |  1          |
+
+### dateCell scoped slot
+| Atributo      | Descripción | Tipo   | Valores aceptados | Por defecto |
+|-----------------|-------------- |---------- |---------------------- |--------- |
+| date            | fecha que la celda representa | Date      | —                     | —        |
+| data            | { type, isSelected, day}. `type` indica el mes al que pertenece la fecha, los valores opcionales son mes anterior, mes actual, mes siguiente; `isSelected` indica si la fecha está seleccionada; `day` es la fecha formateada en el formato yyyy-MM-dd | Object      | —           | —      |
+
diff --git a/examples/docs/es/card.md b/examples/docs/es/card.md
index a5bd12f5467..05d8104fe59 100644
--- a/examples/docs/es/card.md
+++ b/examples/docs/es/card.md
@@ -1,55 +1,7 @@
-<script>
-  import dateUtil from 'main/utils/date'
-  export default {
-    data() {
-      return {
-        currentDate: dateUtil.format(new Date(), 'yyyy-MM-dd HH:mm')
-      };
-    }
-  }
-</script>
-
-<style scoped>
-  .text {
-    font-size: 14px;
-  }
-
-  .time {
-    font-size: 13px;
-    color: #999;
-  }
-
-  .bottom {
-    margin-top: 13px;
-    line-height: 12px;
-  }
-
-  .item {
-    margin-bottom: 18px;
-  }
-
-  .button {
-    padding: 0;
-    float: right;
-  }
-
-  .image {
-    width: 100%;
-    display: block;
-  }
-
-  .clearfix {
-    @utils-clearfix;
-  }
-
-  .box-card {
-    width: 480px;
-  }
-</style>
 ## Card
 Muestra información dentro de un contenedor `card`
 
-### Uso Basico
+### Uso Básico
 
 `Card` incluye titulo, contenido y operaciones.
 
@@ -129,12 +81,12 @@ Muestre un contenido más rico añadiendo algunas configuraciones.
 <el-row>
   <el-col :span="8" v-for="(o, index) in 2" :key="o" :offset="index > 0 ? 2 : 0">
     <el-card :body-style="{ padding: '0px' }">
-      <img src="~examples/assets/images/hamburger.png" class="image">
+      <img src="https://shadow.elemecdn.com/app/element/hamburger.9cf7b091-55e9-11e9-a976-7f4d0b07eef6.png" class="image">
       <div style="padding: 14px;">
         <span>Yummy hamburger</span>
         <div class="bottom clearfix">
           <time class="time">{{ currentDate }}</time>
-          <el-button type="text" class="button">Operating button</el-button>
+          <el-button type="text" class="button">Operating</el-button>
         </div>
       </div>
     </el-card>
diff --git a/examples/docs/es/carousel.md b/examples/docs/es/carousel.md
index 42ea9f5e16d..163ec447d9f 100644
--- a/examples/docs/es/carousel.md
+++ b/examples/docs/es/carousel.md
@@ -1,64 +1,3 @@
-<script>
-  export default {
-    mounted() {
-      this.$nextTick(() => {
-        const demos = document.querySelectorAll('.source');
-        demos[0].style.padding = '0';
-        demos[0].className += ' small';
-        demos[3].className += ' medium';
-      });
-    }
-  }
-</script>
-<style>
-  .demo-carousel .block {
-    padding: 30px;
-    text-align: center;
-    border-right: solid 1px #EFF2F6;
-    display: inline-block;
-    width: 50%;
-    box-sizing: border-box;
-    &:last-child {
-      border-right: none;
-    }
-  }
-
-  .demo-carousel .demonstration {
-    display: block;
-    color: #8492a6;
-    font-size: 14px;
-    margin-bottom: 20px;
-  }
-
-  .demo-carousel .el-carousel__container {
-    text-align: center;
-  }
-
-  .demo-carousel .el-carousel__item {
-    h3 {
-      color: #fff;
-      font-size: 18px;
-      line-height: 300px;
-      margin: 0;
-    }
-    &:nth-child(2n) {
-      background-color: #99a9bf;
-    }
-    &:nth-child(2n+1) {
-      background-color: #d3dce6;
-    }
-  }
-
-  .demo-carousel .small h3 {
-    font-size: 14px;
-    line-height: 150px;
-  }
-
-  .demo-carousel .medium h3 {
-    font-size: 14px;
-    line-height: 200px;
-  }
-</style>
 ## Carousel
 
 Presenta una serie de imágenes o textos en un espacio limitado
@@ -73,7 +12,7 @@ Presenta una serie de imágenes o textos en un espacio limitado
     <span class="demonstration">Switch when indicator is hovered (default)</span>
     <el-carousel height="150px">
       <el-carousel-item v-for="item in 4" :key="item">
-        <h3>{{ item }}</h3>
+        <h3 class="small">{{ item }}</h3>
       </el-carousel-item>
     </el-carousel>
   </div>
@@ -81,7 +20,7 @@ Presenta una serie de imágenes o textos en un espacio limitado
     <span class="demonstration">Switch when indicator is clicked</span>
     <el-carousel trigger="click" height="150px">
       <el-carousel-item v-for="item in 4" :key="item">
-        <h3>{{ item }}</h3>
+        <h3 class="small">{{ item }}</h3>
       </el-carousel-item>
     </el-carousel>
   </div>
@@ -109,7 +48,7 @@ Presenta una serie de imágenes o textos en un espacio limitado
 
 ### Indicadores
 
-Los indicadores de paginacion pueden mostrarse fuera del carrusel
+Los indicadores de paginación pueden mostrarse fuera del carrusel
 
 :::demo El atributo  `indicator-position`  determina dónde se encuentran los indicadores de paginación. Por defecto están dentro del carrusel, y el ajuste de `indicator-position`  a `outside`  los mueve hacia fuera; en cambio `indicator-position`  a `none`  los oculta.
 
@@ -187,7 +126,7 @@ Cuando una página es suficientemente ancha pero tiene una altura limitada, pued
 <template>
   <el-carousel :interval="4000" type="card" height="200px">
     <el-carousel-item v-for="item in 6" :key="item">
-      <h3>{{ item }}</h3>
+      <h3 class="medium">{{ item }}</h3>
     </el-carousel-item>
   </el-carousel>
 </template>
@@ -212,30 +151,63 @@ Cuando una página es suficientemente ancha pero tiene una altura limitada, pued
 ```
 :::
 
+Por defecto, `direction` es `horizontal`. El carousel puede ser mostrado de forma vertical cambiando `direction` a `vertical`.
+
+:::demo
+```html
+<template>
+  <el-carousel height="200px" direction="vertical" :autoplay="false">
+    <el-carousel-item v-for="item in 4" :key="item">
+      <h3 class="medium">{{ item }}</h3>
+    </el-carousel-item>
+  </el-carousel>
+</template>
+
+<style>
+  .el-carousel__item h3 {
+    color: #475669;
+    font-size: 14px;
+    opacity: 0.75;
+    line-height: 200px;
+    margin: 0;
+  }
+  
+  .el-carousel__item:nth-child(2n) {
+    background-color: #99a9bf;
+  }
+  
+  .el-carousel__item:nth-child(2n+1) {
+    background-color: #d3dce6;
+  }
+</style>
+```
+:::
+
 ### Atributos de Carousel
-| Atributo           | Descripcion                              | Tipo    | Valores aceptados  | Por defecto |
-| ------------------ | ---------------------------------------- | ------- | ------------------ | ----------- |
-| height             | Alto del carrusel                        | string  | —                  | —           |
-| initial-index      | Indice del slider inicial activo (empieza desde 0) | number  | —                  | 0           |
-| trigger            | Evento que muestra los indicadores       | string  | hover/click        | hover       |
-| autoplay           | Si se enlazan automáticamente las diapositivas | boolean | —                  | true        |
-| interval           | Intervalo del auto loop, en milisegundos | number  | —                  | 3000        |
-| indicator-position | Posición del indicador de paginación     | string  | outside/none       | —           |
-| arrow              | Cuando se muestran las flechas           | string  | always/hover/never | hover       |
-| type               | Tipo de carrusel                         | string  | card               | —           |
-| loop               | Si se muestra cíclicamente                  | boolean | —                  | true        |
+| Atributo           | Descripción                                        | Tipo    | Valores aceptados   | Por defecto |
+| ------------------ | -------------------------------------------------- | ------- | ------------------- | ----------- |
+| height             | Alto del carrusel                                  | string  | —                   | —           |
+| initial-index      | Indice del slider inicial activo (empieza desde 0) | number  | —                   | 0           |
+| trigger            | Evento que muestra los indicadores                 | string  | hover/click         | hover       |
+| autoplay           | Si se enlazan automáticamente las diapositivas     | boolean | —                   | true        |
+| interval           | Intervalo del auto loop, en milisegundos           | number  | —                   | 3000        |
+| indicator-position | Posición del indicador de paginación               | string  | outside/none        | —           |
+| arrow              | Cuando se muestran las flechas                     | string  | always/hover/never  | hover       |
+| type               | Tipo de carrusel                                   | string  | card                | —           |
+| loop               | Si se muestra cíclicamente                         | boolean | —                   | true        |
+| direction          | direccion en la que se muestra el contenido        | string  | horizontal/vertical | horizontal  |
 
 ### Eventos de Carousel
-| Nombre evento | Descripción                              | Parametros                               |
-| ------------- | ---------------------------------------- | ---------------------------------------- |
+| Nombre evento | Descripción                               | Parámetros                                                   |
+| ------------- | ----------------------------------------- | ------------------------------------------------------------ |
 | change        | Se dispara cuando el slider activo cambia | Indice del nuevo slider activo, indice del anterior slider activo. |
 
 ### Metodos de Carousel
-| Metodos       | Descripción                | Parametros                               |
-| ------------- | -------------------------- | ---------------------------------------- |
+| Metodos       | Descripción                | Parámetros                                                   |
+| ------------- | -------------------------- | ------------------------------------------------------------ |
 | setActiveItem | Cambio manual de slider    | indice del slider al que se va a cambiar, empezando por 0; o el `name` del `el-carousel-item` correspondiente |
-| prev          | Cambia al slider anterior  | —                                        |
-| next          | Cambia al slider siguiente | —                                        |
+| prev          | Cambia al slider anterior  | —                                                            |
+| next          | Cambia al slider siguiente | —                                                            |
 
 ### Atributos de Carousel-Item
 | Atributo | Descripción                              | Tipo   | Valores aceptados | Por defecto |
diff --git a/examples/docs/es/cascader.md b/examples/docs/es/cascader.md
index 8cec8024e46..4c2ab6aae6e 100644
--- a/examples/docs/es/cascader.md
+++ b/examples/docs/es/cascader.md
@@ -1,18 +1,34 @@
+## Cascader
+
+Si las opciones tienen una estructura jerárquica clara, se puede utilizar Cascader para verlas y seleccionarlas.
+
+### Uso básico
+
+Hay dos maneras de ampliar los elementos de opción hijos.
+
+:::demo Asignar el atributo `options` a un array de opciones genera un Cascader. El atributo `props.expandTrigger` define cómo se expanden las opciones hijo.
+```html
+<div class="block">
+  <span class="demonstration">Child options expand when clicked (default)</span>
+  <el-cascader
+    v-model="value"
+    :options="options"
+    @change="handleChange"></el-cascader>
+</div>
+<div class="block">
+  <span class="demonstration">Child options expand when hovered</span>
+  <el-cascader
+    v-model="value"
+    :options="options"
+    :props="{ expandTrigger: 'hover' }"
+    @change="handleChange"></el-cascader>
+</div>
+
 <script>
   export default {
     data() {
       return {
-        options2: [{
-          label: 'California',
-          cities: []
-        }, {
-          label: 'Florida',
-          cities: []
-        }],
-        props: {
-          value: 'label',
-          children: 'cities'
-        },
+        value: [],
         options: [{
           value: 'guide',
           label: 'Guide',
@@ -207,105 +223,27 @@
             value: 'docs',
             label: 'Design Documentation'
           }]
-        }],
-        optionsWithDisabled: [],
-        selectedOptions: [],
-        selectedOptions2: [],
-        selectedOptions3: ['component', 'data', 'tag']
+        }]
       };
     },
-    created() {
-      this.optionsWithDisabled = JSON.parse(JSON.stringify(this.options));
-      this.optionsWithDisabled[0].disabled = true;
-    },
-    mounted() {
-      this.$nextTick(() => {
-        const demos = document.querySelectorAll('.source');
-        demos[0].style.padding = '0';
-        demos[demos.length - 1].style.padding = '0';
-      });
-    },
     methods: {
-      handleItemChange(val) {
-        console.log('active item:', val);
-        setTimeout(_ => {
-          if (val.indexOf('California') > -1 && !this.options2[0].cities.length) {
-            this.options2[0].cities = [{
-              label: 'Los Angeles'
-            }];
-          } else if (val.indexOf('Florida') > -1 && !this.options2[1].cities.length) {
-            this.options2[1].cities = [{
-              label: 'Orlando'
-            }];
-          }
-        }, 300);
-      },
       handleChange(value) {
         console.log(value);
       }
     }
   };
 </script>
+```
+:::
 
-<style>
-  .demo-cascader {
-    .el-cascader {
-      width: 222px;
-    }
-  }
-  .demo-cascader-size {
-    .el-cascader {
-      vertical-align: top;
-      margin-right: 15px;
-    }
-  }
-  .demo-cascader .block {
-    padding: 30px 0;
-    text-align: center;
-    border-right: solid 1px #EFF2F6;
-    display: inline-block;
-    width: 50%;
-    box-sizing: border-box;
-    &:last-child {
-      border-right: none;
-    }
-  }
-  .demo-cascader .demonstration {
-    display: block;
-    color: #8492a6;
-    font-size: 14px;
-    margin-bottom: 20px;
-  }
-</style>
-
-## Cascader
-
-Si las opciones tienen una estructura jerárquica clara, Cascader puede utilizarse para visualizarlas y seleccionarlas.
-
-### Uso básico
+### Opción Disabled
 
-Existen dos maneras de expandir los elementos hijo de la opción.
+Deshabilite una opción estableciendo el campo  `disabled` en las opciones del objeto.
 
-:::demo Al asignar al atributo `options` un array de opciones, se genera un Cascader. El atributo `expand-trigger` define cómo se expanden las opciones hijo. Este ejemplo también muestra el evento `change` , cuyo parámetro es el valor de Cascader, un array formado por los valores de cada nivel seleccionado.
+:::demo En este ejemplo, el primer ítem en el array `options` tiene un campo `disabled: true`, por lo que está deshabilitado. De forma predeterminada, Cascader comprueba el campo `disabled` en cada objeto de las opciones; si está utilizando otro nombre de campo para indicar si una opción está deshabilitada, puede asignarla en el atributo `props.disabled` (consulte la tabla de la API a continuación para obtener más detalles). Y por supuesto, el nombre de campo `value`, `label` y `children` también se pueden personalizar de la misma manera.
 
 ```html
-<div class="block">
-  <span class="demonstration">Child options expand when clicked (default)</span>
-  <el-cascader
-    :options="options"
-    v-model="selectedOptions"
-    @change="handleChange">
-  </el-cascader>
-</div>
-<div class="block">
-  <span class="demonstration">Child options expand when hovered</span>
-  <el-cascader
-    expand-trigger="hover"
-    :options="options"
-    v-model="selectedOptions2"
-    @change="handleChange">
-  </el-cascader>
-</div>
+<el-cascader :options="options"></el-cascader>
 
 <script>
   export default {
@@ -314,6 +252,7 @@ Existen dos maneras de expandir los elementos hijo de la opción.
         options: [{
           value: 'guide',
           label: 'Guide',
+          disabled: true,
           children: [{
             value: 'disciplines',
             label: 'Disciplines',
@@ -505,39 +444,29 @@ Existen dos maneras de expandir los elementos hijo de la opción.
             value: 'docs',
             label: 'Design Documentation'
           }]
-        }],
-        selectedOptions: [],
-        selectedOptions2: []
+        }]
       };
-    },
-    methods: {
-      handleChange(value) {
-        console.log(value);
-      }
     }
   };
 </script>
 ```
 :::
 
-### Opcion Disabled
+### Limpiable
 
-Para desactivar una opción configure un campo `disabled` en el objeto de opción.
-
-:::demo En este ejemplo, el primer elemento del array `options` tiene un campo  `disabled: true` , por lo que está desactivado. Por defecto, Cascader verifica el campo `disabled` en cada objeto de opción; si está utilizando otro nombre de campo para indicar si una opción está deshabilitada, puede asignarla en el atributo `props` (consulte la tabla API a continuación para obtener más detalles). Y por supuesto, el valor de `value`, `label` y `children` también se pueden personalizar de la misma manera.
+Establezca el atributo `clearable` para `el-cascader` y aparecerá un icono de borrado cuando se seleccione y se pase el ratón por encima.
 
+:::demo
 ```html
-<el-cascader
-  :options="optionsWithDisabled"
-></el-cascader>
+<el-cascader :options="options" clearable></el-cascader>
+
 <script>
   export default {
     data() {
       return {
-        optionsWithDisabled: [{
+        options: [{
           value: 'guide',
           label: 'Guide',
-          disabled: true,
           children: [{
             value: 'disciplines',
             label: 'Disciplines',
@@ -730,24 +659,20 @@ Para desactivar una opción configure un campo `disabled` en el objeto de opció
             label: 'Design Documentation'
           }]
         }]
-      };
+      }
     }
-  };
+  }
 </script>
 ```
 :::
 
-### Mostrar sólo el último nivel
-
-Puede mostrar sólo el último nivel en lugar de todos los niveles.
+### Visualizar sólo el último nivel
 
-:::demo El atributo `show-all-levels` define si se visualizan todos los niveles. Si es `false`, sólo se muestra el último nivel.
+La entrada puede mostrar sólo el último nivel en lugar de todos los niveles.
 
+:::demo El atributo `show-all-levels` define si se muestran todos los niveles. Si es `false`, sólo se muestra el último nivel.
 ```html
-<el-cascader
-    :options="options"
-    :show-all-levels="false"
-></el-cascader>
+<el-cascader :options="options" :show-all-levels="false"></el-cascader>
 <script>
   export default {
     data() {
@@ -954,14 +879,131 @@ Puede mostrar sólo el último nivel en lugar de todos los niveles.
 ```
 :::
 
-### Con valor por defecto
+### Selección múltiple
+
+Establezca `props.multiple = true` para usar la selección múltiple.
 
-:::demo El valor por defecto se puede definir con un array.
+:::demo Cuando se utiliza la selección múltiple, todas las etiquetas seleccionadas se mostrarán de forma predeterminada, usted puede establecer `collapse-tags = true` para plegar las etiquetas seleccionadas.
 ```html
-<el-cascader
-  :options="options"
-  v-model="selectedOptions3"
-></el-cascader>
+<div class="block">
+  <span class="demonstration">Display all tags (default)</span>
+  <el-cascader
+    :options="options"
+    :props="props"
+    clearable></el-cascader>
+</div>
+<div class="block">
+  <span class="demonstration">Collapse tags</span>
+  <el-cascader
+    :options="options"
+    :props="props"
+    collapse-tags
+    clearable></el-cascader>
+</div>
+
+<script>
+  export default {
+    data() {
+      return {
+        props: { multiple: true },
+        options: [{
+          value: 1,
+          label: 'Asia',
+          children: [{
+            value: 2,
+            label: 'China',
+            children: [
+              { value: 3, label: 'Beijing' },
+              { value: 4, label: 'Shanghai' },
+              { value: 5, label: 'Hangzhou' }
+            ]
+          }, {
+            value: 6,
+            label: 'Japan',
+            children: [
+              { value: 7, label: 'Tokyo' },
+              { value: 8, label: 'Osaka' },
+              { value: 9, label: 'Kyoto' }
+            ]
+          }, {
+            value: 10,
+            label: 'Korea',
+            children: [
+              { value: 11, label: 'Seoul' },
+              { value: 12, label: 'Busan' },
+              { value: 13, label: 'Taegu' }
+            ]
+          }]
+        }, {
+          value: 14,
+          label: 'Europe',
+          children: [{
+            value: 15,
+            label: 'France',
+            children: [
+              { value: 16, label: 'Paris' },
+              { value: 17, label: 'Marseille' },
+              { value: 18, label: 'Lyon' }
+            ]
+          }, {
+            value: 19,
+            label: 'UK',
+            children: [
+              { value: 20, label: 'London' },
+              { value: 21, label: 'Birmingham' },
+              { value: 22, label: 'Manchester' }
+            ]
+          }]
+        }, {
+          value: 23,
+          label: 'North America',
+          children: [{
+            value: 24,
+            label: 'US',
+            children: [
+              { value: 25, label: 'New York' },
+              { value: 26, label: 'Los Angeles' },
+              { value: 27, label: 'Washington' }
+            ]
+          }, {
+            value: 28,
+            label: 'Canada',
+            children: [
+              { value: 29, label: 'Toronto' },
+              { value: 30, label: 'Montreal' },
+              { value: 31, label: 'Ottawa' }
+            ]
+          }]
+        }]
+      };
+    }
+  };
+</script>
+```
+:::
+
+
+### Seleccione cualquier nivel de opciones
+
+En la selección única, sólo se pueden comprobar los nodos de la hoja, y en la selección múltiple, los nodos padres de la comprobación conducirán a que los nodos de la hoja se comprueben con el tiempo. Cuando se activa esta función, puede hacer que los nodos padre e hijo se desacoplen y usted puede seleccionar cualquier nivel de opciones.
+
+:::demo Establezca `props.checkStrictly = true` para que el estado comprobado de un nodo no afecte a sus nodos padre y nodos hijos, y entonces podrá seleccionar cualquier nivel de opciones.
+```html
+<div class="block">
+  <span class="demonstration">Select any level of options (Single selection)</span>
+  <el-cascader
+    :options="options"
+    :props="{ checkStrictly: true }"
+    clearable></el-cascader>
+</div>
+<div class="block">
+  <span class="demonstration">Select any level of options (Multiple selection)</span>
+  <el-cascader
+    :options="options"
+    :props="{ multiple: true, checkStrictly: true }"
+    clearable></el-cascader>
+</div>
+
 <script>
   export default {
     data() {
@@ -1160,8 +1202,7 @@ Puede mostrar sólo el último nivel en lugar de todos los niveles.
             value: 'docs',
             label: 'Design Documentation'
           }]
-        }],
-        selectedOptions3: ['component', 'data', 'tag']
+        }]
       };
     }
   };
@@ -1169,17 +1210,67 @@ Puede mostrar sólo el último nivel en lugar de todos los niveles.
 ```
 :::
 
-### Change on select
+### Carga dinámica
 
-También se pueden seleccionar las opciones del elemento padre.
+Carga dinámica de sus nodos hijos cuando se selecciona un nodo.
 
-:::demo Por defecto sólo se pueden seleccionar las opciones del último nivel. Al asignar `change-on-select` a `true`, también se pueden seleccionar opciones en los niveles superiores.
+:::demo Establezca `lazy = true` para utilizar la carga dinámica, y deberá especificar cómo cargar la fuente de datos mediante `lazyload`. Hay dos parámetros de `lazyload`, el primer parámetro `node` es el nodo en el que se hace clic actualmente, y el `resolve` es una llamada de retorno que indica que la carga ha terminado y que debe invocarse. Para mostrar el estado del nodo con mayor precisión, puede añadir un campo `leaf` (puede ser modificado por `props.leaf`) para indicar si se trata de un nodo de hoja. De lo contrario, se deducirá verificando si tiene algún nodo hijo.
 
 ```html
-<el-cascader
-  :options="options"
-  change-on-select
-></el-cascader>
+<el-cascader :props="props"></el-cascader>
+
+<script>
+  let id = 0;
+
+  export default {
+    data() {
+      return {
+        props: {
+          lazy: true,
+          lazyLoad (node, resolve) {
+            const { level } = node;
+            setTimeout(() => {
+              const nodes = Array.from({ length: level + 1 })
+                .map(item => ({
+                  value: ++id,
+                  label: `Option - ${id}`,
+                  leaf: level >= 2
+                }));
+              // Invoke `resolve` callback to return the child nodes data and indicate the loading is finished.
+              resolve(nodes);
+            }, 1000);
+          }
+        }
+      };
+    }
+  };
+</script>
+```
+:::
+
+### Filtrable
+
+Buscar y seleccionar opciones con una palabra clave.
+
+:::demo Añadir `filtrable` a `el-cascader` permite el filtrado. Cascader hará coincidir los nodos cuya etiqueta o etiqueta de padre (de acuerdo con `show-all-levels`) incluya una palabra clave de entrada. Por supuesto, puedes personalizar la lógica de búsqueda mediante el `filter-method` que acepta una función, el primer parámetro es `nodo`, el segundo es `keyword`, y necesitas devolver un valor booleano que indique si da en el blanco.
+
+```html
+<div class="block">
+  <span class="demonstration">Filterable (Single selection)</span>
+  <el-cascader
+    placeholder="Try searchingL Guide"
+    :options="options"
+    filterable></el-cascader>
+</div>
+<div class="block">
+  <span class="demonstration">Filterable (Multiple selection)</span>
+  <el-cascader
+    placeholder="Try searchingL Guide"
+    :options="options"
+    :props="{ multiple: true }"
+    filterable></el-cascader>
+</div>
+
 <script>
   export default {
     data() {
@@ -1386,82 +1477,232 @@ También se pueden seleccionar las opciones del elemento padre.
 ```
 :::
 
-### Carga dinamica de elementos hijos
-
-Se puede hacer una carga dinamica de elementos hijos cuando se hace clic en el elemento padre o se pasa el ratón sobre el.
+### Contenido de opciones personalizadas
 
-:::demo En este ejemplo, el array de opciones no tiene datos de ciudades cuando se inicializa. Con el evento `active-item-change`, puede cargar dinámicamente las ciudades de un estado específico. Además, este ejemplo también demuestra cómo se utilizan los`props`.
+Puede personalizar el contenido del nodo de cascada.
 
+:::demo Puede personalizar el contenido del nodo del cascader mediante `scoped slot`. Tendrá acceso a `node` y `data` en el ámbito de aplicación, representando el objeto Node y los datos del nodo actual respectivamente.
 ```html
-<el-cascader
-  :options="options2"
-  @active-item-change="handleItemChange"
-  :props="props"
-></el-cascader>
+<el-cascader :options="options">
+  <template slot-scope="{ node, data }">
+    <span>{{ data.label }}</span>
+    <span v-if="!node.isLeaf"> ({{ data.children.length }}) </span>
+  </template>
+</el-cascader>
 
 <script>
   export default {
     data() {
       return {
-        options2: [{
-          label: 'California',
-          cities: []
+        options: [{
+          value: 'guide',
+          label: 'Guide',
+          children: [{
+            value: 'disciplines',
+            label: 'Disciplines',
+            children: [{
+              value: 'consistency',
+              label: 'Consistency'
+            }, {
+              value: 'feedback',
+              label: 'Feedback'
+            }, {
+              value: 'efficiency',
+              label: 'Efficiency'
+            }, {
+              value: 'controllability',
+              label: 'Controllability'
+            }]
+          }, {
+            value: 'navigation',
+            label: 'Navigation',
+            children: [{
+              value: 'side nav',
+              label: 'Side Navigation'
+            }, {
+              value: 'top nav',
+              label: 'Top Navigation'
+            }]
+          }]
         }, {
-          label: 'Florida',
-          cities: []
-        }],
-        props: {
-          value: 'label',
-          children: 'cities'
-        }
-      };
-    },
-
-    methods: {
-      handleItemChange(val) {
-        console.log('active item:', val);
-        setTimeout(_ => {
-          if (val.indexOf('California') > -1 && !this.options2[0].cities.length) {
-            this.options2[0].cities = [{
-              label: 'Los Angeles'
-            }];
-          } else if (val.indexOf('Florida') > -1 && !this.options2[1].cities.length) {
-            this.options2[1].cities = [{
-              label: 'Orlando'
-            }];
-          }
-        }, 300);
+          value: 'component',
+          label: 'Component',
+          children: [{
+            value: 'basic',
+            label: 'Basic',
+            children: [{
+              value: 'layout',
+              label: 'Layout'
+            }, {
+              value: 'color',
+              label: 'Color'
+            }, {
+              value: 'typography',
+              label: 'Typography'
+            }, {
+              value: 'icon',
+              label: 'Icon'
+            }, {
+              value: 'button',
+              label: 'Button'
+            }]
+          }, {
+            value: 'form',
+            label: 'Form',
+            children: [{
+              value: 'radio',
+              label: 'Radio'
+            }, {
+              value: 'checkbox',
+              label: 'Checkbox'
+            }, {
+              value: 'input',
+              label: 'Input'
+            }, {
+              value: 'input-number',
+              label: 'InputNumber'
+            }, {
+              value: 'select',
+              label: 'Select'
+            }, {
+              value: 'cascader',
+              label: 'Cascader'
+            }, {
+              value: 'switch',
+              label: 'Switch'
+            }, {
+              value: 'slider',
+              label: 'Slider'
+            }, {
+              value: 'time-picker',
+              label: 'TimePicker'
+            }, {
+              value: 'date-picker',
+              label: 'DatePicker'
+            }, {
+              value: 'datetime-picker',
+              label: 'DateTimePicker'
+            }, {
+              value: 'upload',
+              label: 'Upload'
+            }, {
+              value: 'rate',
+              label: 'Rate'
+            }, {
+              value: 'form',
+              label: 'Form'
+            }]
+          }, {
+            value: 'data',
+            label: 'Data',
+            children: [{
+              value: 'table',
+              label: 'Table'
+            }, {
+              value: 'tag',
+              label: 'Tag'
+            }, {
+              value: 'progress',
+              label: 'Progress'
+            }, {
+              value: 'tree',
+              label: 'Tree'
+            }, {
+              value: 'pagination',
+              label: 'Pagination'
+            }, {
+              value: 'badge',
+              label: 'Badge'
+            }]
+          }, {
+            value: 'notice',
+            label: 'Notice',
+            children: [{
+              value: 'alert',
+              label: 'Alert'
+            }, {
+              value: 'loading',
+              label: 'Loading'
+            }, {
+              value: 'message',
+              label: 'Message'
+            }, {
+              value: 'message-box',
+              label: 'MessageBox'
+            }, {
+              value: 'notification',
+              label: 'Notification'
+            }]
+          }, {
+            value: 'navigation',
+            label: 'Navigation',
+            children: [{
+              value: 'menu',
+              label: 'NavMenu'
+            }, {
+              value: 'tabs',
+              label: 'Tabs'
+            }, {
+              value: 'breadcrumb',
+              label: 'Breadcrumb'
+            }, {
+              value: 'dropdown',
+              label: 'Dropdown'
+            }, {
+              value: 'steps',
+              label: 'Steps'
+            }]
+          }, {
+            value: 'others',
+            label: 'Others',
+            children: [{
+              value: 'dialog',
+              label: 'Dialog'
+            }, {
+              value: 'tooltip',
+              label: 'Tooltip'
+            }, {
+              value: 'popover',
+              label: 'Popover'
+            }, {
+              value: 'card',
+              label: 'Card'
+            }, {
+              value: 'carousel',
+              label: 'Carousel'
+            }, {
+              value: 'collapse',
+              label: 'Collapse'
+            }]
+          }]
+        }, {
+          value: 'resource',
+          label: 'Resource',
+          children: [{
+            value: 'axure',
+            label: 'Axure Components'
+          }, {
+            value: 'sketch',
+            label: 'Sketch Templates'
+          }, {
+            value: 'docs',
+            label: 'Design Documentation'
+          }]
+        }]
       }
     }
-  };
+  }
 </script>
 ```
 :::
 
-### Filtrable
-
-Buscar y seleccionar opciones con una palabra clave.
+### Panel cascader
 
-:::demo Añadir `filterable` a `el-cascader` permite filtrar
+`CascaderPanel` es el componente central de `Cascader` que tiene varias características como selección única, selección múltiple, carga dinámica, etc.
 
+:::demo Al igual que `el-cascader`, puede establecer opciones alternativas mediante `options`, y habilitar otras características mediante `props`, consulte el formulario de la API a continuación para obtener más detalles.
 ```html
-<div class="block">
-  <span class="demonstration">Only options of the last level can be selected</span>
-  <el-cascader
-    placeholder="Try searching: Guide"
-    :options="options"
-    filterable
-  ></el-cascader>
-</div>
-<div class="block">
-  <span class="demonstration">Options of all levels can be selected</span>
-  <el-cascader
-    placeholder="Try searching: Guide"
-    :options="options"
-    filterable
-    change-on-select
-  ></el-cascader>
-</div>
+<el-cascader-panel :options="options"></el-cascader-panel>
 
 <script>
   export default {
@@ -1669,38 +1910,81 @@ Buscar y seleccionar opciones con una palabra clave.
 ```
 :::
 
-### Atributos
-| Atributo         | Descripción                              | Tipo            | Opciones              | Por defecto |
-| ---------------- | ---------------------------------------- | --------------- | --------------------- | ----------- |
-| options          | datos de las opciones                    | array           | —                     | —           |
-| props            | opciones de configuracion,  mire la tabla siguiente | object          | —                     | —           |
-| value            | valor seleccionado                       | array           | —                     | —           |
-| popper-class     | nombre de clase para el Cascader's dropdown | string          | —                     | —           |
-| placeholder      | input placeholder                        | string          | —                     | Select      |
-| disabled         | si Cascader esta disabled                | boolean         | —                     | false       |
-| clearable        | si se puede borrar el valor seleccionado | boolean         | —                     | false       |
-| expand-trigger   | evento del elemento actual para expandirse. | string          | click / hover         | click       |
-| show-all-levels  | si mostrar todos los niveles del valor seleccionado en la entrada | boolean         | —                     | true        |
-| filterable       | si se pueden buscar las opciones         | boolean         | —                     | —           |
-| debounce         | retardo al escribir la palabra clave del filtro, en milisegundos | number          | —                     | 300         |
-| change-on-select | si se permite seleccionar una opción de cualquier nivel | boolean         | —                     | false       |
-| size             | tamaño del input                         | string          | medium / small / mini | —           |
-| before-filter    | funcion antes de filtrar con el valor a filtrar como parámetro. Si se devuelve `false` o se devuelve una `Promise` y luego es rechazada, el filtrado será abortado. | function(value) | —                     | —           |
+### Atributos de Cascader
+| Atributo | Descripción | Tipo | Valores aceptados | Por defecto |
+|---------- |-------- |---------- |-------------  |-------- |
+| value / v-model | valor ligado | - | — | — |
+| options | datos de las opciones，las claves `value` y `label` pueden ser personalizadas por `Props`. | array | — | — |
+| props | opciones de configuración, consulte la siguiente tabla. | object | — | — |
+| size | tamaño del input | string | medium / small / mini | — |
+| placeholder | placeholder del input | string | — | Select |
+| disabled | si Cascader esta deshabilitada | boolean | — | false |
+| clearable | si el valor seleccionado puede ser borrado | boolean | — | true |
+| show-all-levels | si muestra todos los niveles del valor seleccionado en el input | boolean | — | true |
+| collapse-tags | si se colapsan los tags en la selección múltiple | boolean | - | false |
+| separator | separador de las etiquetas de las opciones | string | — | ' / ' |
+| filterable | si las opciones pueden ser usadas para la busqueda | boolean | — | true |
+| filter-method | lógica de búsqueda personalizable. El primer parámetro es `node`, el segundo es `keyword`, y es necesario devolver un valor boolean que indique si se ha tenido éxito. | function(node, keyword) | - | - |
+| debounce | retraso en milisegundos para el tipeo de los datos de filtro | number | — | 300 |
+| before-filter | hook antes de filtrar con el valor a filtrar como parámetro. Si se devuelve `false` o se devuelve una `Promise` y luego se rechaza, se abortará el filtrado. | function(value) | — | — |
+| popper-class | nombre de clase personalizado para el menú desplegable de Cascader | string | —  | — |
+
+### Eventos de Cascader
+| Nombre del evento | Descripción | Parámetros |
+|---------- |-------- |---------- |
+| change | se desencadena cuando cambia el valor ligado. | valor |
+| expand-change | se desencadena cuando las opciones expandidas cambian | un array de los nodos padres del nodo en expansión |
+| blur | se desencadena cuando Cascader se desenfoca | (event: Event) |
+| focus | se activa cuando Cascader se enfoca | (event: Event) |
+| visible-change | se activa cuando aparece/desaparece el menú desplegable | verdadero cuando aparece, y falso de otra manera |
+| remove-tag | se activa cuando se quita la etiqueta en modo de selección múltiple | el valor de la etiqueta que se quita |
+
+### Cascader Methods
+| Method Name | Description | Parameters |
+| ---- | ---- | ---- |
+| getCheckedNodes | get an array of currently selected node | (leafOnly) whether only return the leaf checked nodes, default is `false` |
+
+### Slots de Cascader
+| Nombre del slot | Descripción |
+|---------|-------------|
+| - | el contenido personalizado del nodo cascader, el parámetro es { node, data }, que son el actual objeto Node y los datos del nodo respectivamente. |
+| empty  | cuando no hay opciones coincidentes. |
+
+### Atributos del CascaderPanel
+| Atributos | Descripción | Tipo | Valores aceptados | Por defecto |
+|---------- |-------- |---------- |-------------  |-------- |
+| value / v-model | valor ligado | - | — | — |
+| options | datos de las opciones，las claves `value` y `label` pueden ser personalizadas por `Props`. | array | — | — |
+| props | opciones de configuración, consulte la siguiente tabla. | object | — | — |
+
+### Eventos de CascaderPanel
+| Nombre de los evetos | Descripción | Parámetros |
+|---------- |-------- |---------- |
+| change | se desencadena cuando cambia el valor ligado.         | valor |
+| expand-change | se desencadena cuando las opciones expandidas cambian | un array de los nodos padres del nodo en expansión |
 
-### props
-| Atributo | Descripción                              | Tipo   | Valores aceptados | Por defecto |
-| -------- | ---------------------------------------- | ------ | ----------------- | ----------- |
-| label    | especifica qué clave del elemento de la opción se utiliza como etiqueta | string | —                 | —           |
-| value    | especifica qué clave del elemento de la opción se utiliza como valor | string | —                 | —           |
-| children | especifica qué clave del elemento de la opción se utiliza como hijo | string | —                 | —           |
-| disabled | especifica qué clave del elemento de la opción indica si está deshabilitada | string | —                 | —           |
+### CascaderPanel Methods
+| Method Name | Description | Parameters |
+| ---- | ---- | ---- |
+| getCheckedNodes | get an array of currently selected node | (leafOnly) whether only return the leaf checked nodes, default is `false` |
+| clearCheckedNodes | clear checked nodes | - |
 
-### Eventos
-| Nombre             | Descripción                                                  | Parametros                |
-| ------------------ | ------------------------------------------------------------ | ------------------------- |
-| change             | se dispara cuando el valor cambia                            | valor                     |
-| active-item-change | se dispara cuando la opcion activa del parent cambia, sólo funciona cuando `change-on-select` es `false`. | array de opciones activas |
-| blur               | se dispara cuando Cascader pierde el foco                    | (event: Event)            |
-| focus              | se dispara cuando Cascader obtiene el foco                   | (event: Event)            |
-| visible-change     | se dispara cuando el menu desplegable aparece o desaparece   | true cuando aparece, y false en otro caso |
+### Slots de CascaderPanel
+| Nombre del slot | Descripción |
+|---------|-------------|
+| - | el contenido personalizado del nodo cascader, el parámetro es { node, data }, que son el actual objeto Node y los datos del nodo respectivamente. |
 
+### Props
+| Atributos | Descripción | Tipo | Valores aceptados | Por defecto |
+| -------- | ----------------- | ------ | ------ | ------ |
+| expandTrigger | modo de disparo de las opciones de ampliación | string | click / hover | 'click' |
+| multiple | si la selección múltiple esta activada | boolean | - | false |
+| checkStrictly | si el estado verificado de un nodo no afecta a sus nodos padre e hijo | boolean | - | false |
+| emitPath | cuando los nodos marcados cambian, si emitir o no un array de la ruta de un nodo, si es falso, sólo emite el valor del nodo. | boolean | - | true |
+| lazy | si se deben cargar dinámicamente nodos hijo, usarlo con el atributo `lazyload`. | boolean | - | false |
+| lazyLoad | para cargar datos de nodos hijo, sólo funciona cuando `lazy` es verdadero | function(node, resolve) | - | - |
+| value    | especificar qué clave de objeto de nodo se utiliza como valor del nodo | string | — | 'value' |
+| label    | especificar qué clave de objeto de nodo se utiliza como etiqueta del nodo | string | — | 'label' |
+| children | especificar qué clave de objeto de nodo se utiliza como hijo del nodo | string | — | 'children' |
+| disabled | especificar qué clave de objeto de nodo se utiliza como nodo desactivado | string | — | 'disabled' |
+| leaf     | especificar qué clave de objeto de nodo se utiliza como campo de hoja del nodo | string | — | 'leaf' |
diff --git a/examples/docs/es/checkbox-img-button.md b/examples/docs/es/checkbox-img-button.md
new file mode 100644
index 00000000000..17a74d94499
--- /dev/null
+++ b/examples/docs/es/checkbox-img-button.md
@@ -0,0 +1 @@
+## CheckboxImgButton
diff --git a/examples/docs/es/checkbox.md b/examples/docs/es/checkbox.md
index 0b5c4e5dfcc..aab0443d3f8 100644
--- a/examples/docs/es/checkbox.md
+++ b/examples/docs/es/checkbox.md
@@ -1,48 +1,3 @@
-<script>
-  const cityOptions = ['Shanghai', 'Beijing', 'Guangzhou', 'Shenzhen'];
-  module.exports = {
-    data() {
-      return {
-        checkList: ['seleccionado y deshabilitado','Opción A'],
-        // checkList2: ['Opción A'],
-        checked: true,
-        checked1: false,
-        checked2: true,
-        checked3: true,
-        checked4: false,
-        checked5: false,
-        checked6: true,
-        isValid: 'valid',
-        checkAll: false,
-        cities: cityOptions,
-        checkedCities: ['Shanghai', 'Beijing'],
-        checkedCities1: ['Shanghai', 'Beijing'],
-        isIndeterminate: true,
-        checkboxGroup1: ['Shanghai'],
-        checkboxGroup2: ['Shanghai'],
-        checkboxGroup3: ['Shanghai'],
-        checkboxGroup4: ['Shanghai'],
-        checkboxGroup5: [],
-        checkboxGroup6: []
-      };
-    },
-    methods: {
-      handleChange(ev) {
-        console.log(ev);
-      },
-      handleCheckAllChange(val) {
-        this.checkedCities = val ? cityOptions : [];
-        this.isIndeterminate = false;
-      },
-      handleCheckedCitiesChange(value) {
-        let checkedCount = value.length;
-        this.checkAll = checkedCount === this.cities.length;
-        this.isIndeterminate = checkedCount > 0 && checkedCount < this.cities.length;
-      }
-    }
-  };
-</script>
-
 ## Checkbox
 
 Un grupo de opciones para manejar múltiples elecciones.
@@ -96,9 +51,9 @@ Estado deshabilitado para el checkbox.
 
 ### Grupo de Checkboxes
 
-Es usado por multiples checkboxes los cuales están enlazados a un grupo, indica si una opción está seleccionada verificando si esta está marcada.
+Es usado por múltiples checkboxes los cuales están enlazados a un grupo, indica si una opción está seleccionada verificando si esta está marcada.
 
-:::demo El elemento `checkbox-group` puede manejar multiples checkboxes en un grupo usando `v-model` el cuál está enlazado a un `Array`. Dentro del elemento `el-checkbox`, `label` es el valor del checkbox. Si en ese tag no hay contenido anidado, `label` va a ser mostrado como la descripción al lado del botón del checkbox. `label` también se corresponde con los valores del array. Es seleccionado si el valor especificado existe en el array y viceversa.
+:::demo El elemento `checkbox-group` puede manejar múltiples checkboxes en un grupo usando `v-model` el cuál está enlazado a un `Array`. Dentro del elemento `el-checkbox`, `label` es el valor del checkbox. Si en ese tag no hay contenido anidado, `label` va a ser mostrado como la descripción al lado del botón del checkbox. `label` también se corresponde con los valores del array. Es seleccionado si el valor especificado existe en el array y viceversa.
 
 ```html
 <template>
@@ -173,7 +128,7 @@ Las propiedades `min` y `max` pueden limitar la cantidad de elementos selecciona
 ```html
 <template>
   <el-checkbox-group 
-    v-model="checkedCities1"
+    v-model="checkedCities"
     :min="1"
     :max="2">
     <el-checkbox v-for="city in cities" :label="city" :key="city">{{city}}</el-checkbox>
@@ -184,7 +139,7 @@ Las propiedades `min` y `max` pueden limitar la cantidad de elementos selecciona
   export default {
     data() {
       return {
-        checkedCities1: ['Shanghai', 'Beijing'],
+        checkedCities: ['Shanghai', 'Beijing'],
         cities: cityOptions
       };
     }
@@ -245,21 +200,21 @@ Checkbox con estilo tipo Botón.
 ```html
 <template>
   <div>
-    <el-checkbox v-model="checked3" label="Opción1" border></el-checkbox>
-    <el-checkbox v-model="checked4" label="Opción2" border></el-checkbox>
+    <el-checkbox v-model="checked1" label="Opción1" border></el-checkbox>
+    <el-checkbox v-model="checked2" label="Opción2" border></el-checkbox>
   </div>
   <div style="margin-top: 20px">
-    <el-checkbox v-model="checked5" label="Opción1" border size="medium"></el-checkbox>
-    <el-checkbox v-model="checked6" label="Opción2" border size="medium"></el-checkbox>
+    <el-checkbox v-model="checked3" label="Opción1" border size="medium"></el-checkbox>
+    <el-checkbox v-model="checked4" label="Opción2" border size="medium"></el-checkbox>
   </div>
   <div style="margin-top: 20px">
-    <el-checkbox-group v-model="checkboxGroup5" size="small">
+    <el-checkbox-group v-model="checkboxGroup1" size="small">
       <el-checkbox label="Opción1" border></el-checkbox>
       <el-checkbox label="Opción2" border disabled></el-checkbox>
     </el-checkbox-group>
   </div>
   <div style="margin-top: 20px">
-    <el-checkbox-group v-model="checkboxGroup6" size="mini" disabled>
+    <el-checkbox-group v-model="checkboxGroup2" size="mini" disabled>
       <el-checkbox label="Opción1" border></el-checkbox>
       <el-checkbox label="Opción2" border></el-checkbox>
     </el-checkbox-group>
@@ -270,12 +225,12 @@ Checkbox con estilo tipo Botón.
   export default {
     data () {
       return {
-        checked3: true,
-        checked4: false,
-        checked5: false,
-        checked6: true,
-        checkboxGroup5: [],
-        checkboxGroup6: []
+        checked1: true,
+        checked2: false,
+        checked3: false,
+        checked4: true,
+        checkboxGroup1: [],
+        checkboxGroup2: []
       };
     }
   }
@@ -286,13 +241,14 @@ Checkbox con estilo tipo Botón.
 ### Atributos de Checkbox
 | Atributo      | Descripción                              | Tipo                      | Valores aceptados     | Por defecto |
 | ------------- | ---------------------------------------- | ------------------------- | --------------------- | ----------- |
+| value / v-model | valor enlazado | string / number / boolean | — | — |
 | label         | valor del Checkbox si es usado dentro de un tag `checkbox-group` | string / number / boolean | —                     | —           |
 | true-label    | valor del Checkbox si está marcado       | string / number           | —                     | —           |
 | false-label   | valor del Checkbox si no está marcado    | string / number           | —                     | —           |
 | disabled      | especifica si el Checkbox está deshabilitado | boolean                   | —                     | false       |
 | border        | especifica si agrega un borde alrededor del Checkbox | boolean                   | —                     | false       |
 | size          | tamaño del Checkbox, sólo funciona si `border` es true | string                    | medium / small / mini | —           |
-| name          | atributo 'name' nativo                   | string                    | —                     | —           |
+| name          | atributo `name` nativo                 | string                    | —                     | —           |
 | checked       | especifica si el Checkbox está marcado   | boolean                   | —                     | false       |
 | indeterminate | similar a `indeterminate` en el checkbox nativo | boolean                   | —                     | false       |
 
@@ -304,12 +260,13 @@ Checkbox con estilo tipo Botón.
 ### Atributos de Checkbox-group
 | Atributo   | Descripción                              | Tipo    | Valores aceptados     | Por Defecto |
 | ---------- | ---------------------------------------- | ------- | --------------------- | ----------- |
+| value / v-model | valor enlazado | array | — | — |
 | size       | tamaño de los checkboxes de tipo botón o los checkboxes con border | string  | medium / small / mini | —           |
 | disabled   | especifica si los checkboxes anidados están deshabilitados | boolean | —                     | false       |
 | min        | cantidad mínima de checkboxes que deben ser marcados | number  | —                     | —           |
 | max        | cantidad máxima de checkboxes que pueden ser marcados | number  | —                     | —           |
 | text-color | color de fuente cuando el botón está activo | string  | —                     | #ffffff     |
-| fill       | color de border y de fondo cuando el botón está activo | string  | —                     | #409EFF     |
+| fill       | color de border y de fondo cuando el botón está activo | string  | —                     | #2460e0     |
 
 ### Eventos de Checkbox-group
 | Nombre de Evento | Descripción                              | Parametros           |
diff --git a/examples/docs/es/collapse.md b/examples/docs/es/collapse.md
index 70cb714d21b..ea9d50d1ef6 100644
--- a/examples/docs/es/collapse.md
+++ b/examples/docs/es/collapse.md
@@ -1,29 +1,3 @@
-<script>
-  export default {
-    data() {
-      return {
-        activeNames: ['1'],
-        activeName: '1'
-      };
-    },
-    methods: {
-      handleChange(val) {
-        console.log(val);
-      }
-    }
-  }
-</script>
-
-<style>
-  .demo-collapse {
-    .el-collapse-item__header {
-      .header-icon {
-        margin-left: 5px;
-      }
-    }
-  }
-</style>
-
 ## Collapse
 
 Use Collapse para almacenar contenidos.
@@ -141,17 +115,19 @@ Además de usar el atributo `title`, se puede personalizar el título del panel
 ### Atributos de Collapse
 | Atributo  | Descripción                           | Tipo                                     | Valores aceptados | Por defecto |
 | --------- | ------------------------------------- | ---------------------------------------- | ----------------- | ----------- |
+| value / v-model     | panel activo                          | string (modo acordeón) / array (No modo acordeón) | —                 | —           |
 | accordion | especifica si activa el modo acordeón | boolean                                  | —                 | false       |
-| value     | panel activo                          | string (modo acordeón)/array (No modo acordeón) | —                 | —           |
 
 ### Eventos de Collapse
 | Nombre de Evento | Descripción                              | Parametros                               |
 | ---------------- | ---------------------------------------- | ---------------------------------------- |
-| change           | se dispara cuando los paneles activos cambian | activeNames: array (No modo acordeón)/string (modo acordeón) |
+| change           | se dispara cuando los paneles activos cambian | (activeNames: array (No modo acordeón) / string (modo acordeón)) |
 
 
 ### Atributos de Collapse Item
 | Atributo | Descripción                   | Tipo          | Valores aceptados | Por defecto |
 | -------- | ----------------------------- | ------------- | ----------------- | ----------- |
 | name     | identificador único del panel | string/number | —                 | —           |
-| title    | título del panel              | string        | —                 | —           |
\ No newline at end of file
+| title    | título del panel              | string        | —                 | —           |
+| disabled | deshabilita el collapse ítem  | boolean       | —                 | —           |
+
diff --git a/examples/docs/es/color-picker.md b/examples/docs/es/color-picker.md
index d2ac809d4cd..a06e1125171 100644
--- a/examples/docs/es/color-picker.md
+++ b/examples/docs/es/color-picker.md
@@ -1,62 +1,3 @@
-<script>
-  export default {
-    data() {
-      return {
-        color1: '#409EFF',
-        color2: null,
-        color3: 'rgba(19, 206, 102, 0.8)',
-        color4: '#409EFF',
-        color5: 'rgba(255, 69, 0, 0.68)',
-        predefineColors: [
-          '#ff4500',
-          '#ff8c00',
-          '#ffd700',
-          '#90ee90',
-          '#00ced1',
-          '#1e90ff',
-          '#c71585',
-          'rgba(255, 69, 0, 0.68)',
-          'rgb(255, 120, 0)',
-          'hsv(51, 100, 98)',
-          'hsva(120, 40, 94, 0.5)',
-          'hsl(181, 100%, 37%)',
-          'hsla(209, 100%, 56%, 0.73)',
-          '#c7158577'
-        ]
-      };
-    },
-    mounted() {
-      this.$nextTick(() => {
-        const demos = document.querySelectorAll('.source');
-        demos[0].style.padding = '0';
-      });
-    },
-  }
-</script>
-
-<style>
-  .demo-color-picker .block {
-    padding: 30px 0;
-    text-align: center;
-    border-right: solid 1px #EFF2F6;
-    display: inline-block;
-    width: 50%;
-    box-sizing: border-box;
-    &:last-child {
-      border-right: none;
-    }
-  }
-  .demo-color-picker .demonstration {
-    display: block;
-    color: #8492a6;
-    font-size: 14px;
-    margin-bottom: 20px;
-  }
-  .demo-color-picker .el-color-picker + .el-color-picker {
-    margin-left: 20px;
-  }
-</style>
-
 ## ColorPicker
 
 ColorPicker es un selector de color que soporta varios formatos de color.
@@ -78,7 +19,7 @@ ColorPicker es un selector de color que soporta varios formatos de color.
   export default {
     data() {
       return {
-        color1: '#409EFF',
+        color1: '#2460e0',
         color2: null
       }
     }
@@ -89,15 +30,15 @@ ColorPicker es un selector de color que soporta varios formatos de color.
 
 ### Alpha
 
-:::demo ColorPicker soporta selección de canales alpha. Para activarlo sólo agrege el atributo `show-alpha`.
+:::demo ColorPicker soporta selección de canales alpha. Para activarlo sólo agregue el atributo `show-alpha`.
 ```html
-<el-color-picker v-model="color3" show-alpha></el-color-picker>
+<el-color-picker v-model="color" show-alpha></el-color-picker>
 
 <script>
   export default {
     data() {
       return {
-        color3: 'rgba(19, 206, 102, 0.8)'
+        color: 'rgba(19, 206, 102, 0.8)'
       }
     }
   };
@@ -105,12 +46,12 @@ ColorPicker es un selector de color que soporta varios formatos de color.
 ```
 :::
 
-### Predefined colors
+### Colores predefinidos
 
-:::demo ColorPicker supports predefined color options
+:::demo ColorPicker soporta opciones de color predefinidas
 ```html
 <el-color-picker
-  v-model="color5"
+  v-model="color"
   show-alpha
   :predefine="predefineColors">
 </el-color-picker>
@@ -119,7 +60,7 @@ ColorPicker es un selector de color que soporta varios formatos de color.
   export default {
     data() {
       return {
-        color5: 'rgba(255, 69, 0, 0.68)',
+        color: 'rgba(255, 69, 0, 0.68)',
         predefineColors: [
           '#ff4500',
           '#ff8c00',
@@ -147,16 +88,16 @@ ColorPicker es un selector de color que soporta varios formatos de color.
 
 :::demo
 ```html
-<el-color-picker v-model="color4"></el-color-picker>
-<el-color-picker v-model="color4" size="medium"></el-color-picker>
-<el-color-picker v-model="color4" size="small"></el-color-picker>
-<el-color-picker v-model="color4" size="mini"></el-color-picker>
+<el-color-picker v-model="color"></el-color-picker>
+<el-color-picker v-model="color" size="medium"></el-color-picker>
+<el-color-picker v-model="color" size="small"></el-color-picker>
+<el-color-picker v-model="color" size="mini"></el-color-picker>
 
 <script>
   export default {
     data() {
       return {
-        color4: '#409EFF'
+        color: '#2460e0'
       }
     }
   };
@@ -165,14 +106,15 @@ ColorPicker es un selector de color que soporta varios formatos de color.
 :::
 
 ### Atributos
-| Atributo     | Descripción                              | Tipo    | Valores aceptados     | Por defecto                              |
-| ------------ | ---------------------------------------- | ------- | --------------------- | ---------------------------------------- |
-| disabled     | especifica si se deshabilita el ColorPicker | boolean | —                     | false                                    |
-| size         | tamaño del ColorPicker                   | string  | —                     | medium / small / mini                    |
-| show-alpha   | especifica si se muestra el control deslizante para el valor alpha | boolean | —                     | false                                    |
-| color-format | formato de color del `v-model`           | string  | hsl / hsv / hex / rgb | hex (si show-alpha es false)/ rgb (si show-alpha es true) |
-| popper-class | nombre de clase para el dropdown del ColorPicker | string  | —                     | —                                        |
-| predefine    | opciones de colores predefinidas | array | — | — |
+| Atributo       | Descripción                              | Tipo    | Valores aceptados     | Por defecto                              |
+| -------------- | ---------------------------------------- | ------- | --------------------- | ---------------------------------------- |
+| value / v-model | valor enlazado                           | string  | —                     | —                                        |
+| disabled       | especifica si se deshabilita el ColorPicker | boolean | —                     | false                                    |
+| size           | tamaño del ColorPicker                   | string  | —                     | medium / small / mini                    |
+| show-alpha     | especifica si se muestra el control deslizante para el valor alpha | boolean | —                     | false                                    |
+| color-format   | formato de color del `v-model`           | string  | hsl / hsv / hex / rgb | hex (si show-alpha es false)/ rgb (si show-alpha es true) |
+| popper-class   | nombre de clase para el dropdown del ColorPicker | string  | —                     | —                                        |
+| predefine      | opciones de colores predefinidas | array | — | — |
 
 ### Eventos
 | Nombre de Evento | Descripción                              | Parametros             |
diff --git a/examples/docs/es/color.md b/examples/docs/es/color.md
index 365d63549f2..d43bf6ebd9a 100644
--- a/examples/docs/es/color.md
+++ b/examples/docs/es/color.md
@@ -1,78 +1,94 @@
-<style>
-  .demo-color-box {
-    border-radius: 4px;
-    padding: 20px;
-    margin: 5px 0;
-    height: 74px;
-    box-sizing: border-box;
-    color: #fff;
-    font-size: 14px;
-    
-    & .value {
-      font-size: 12px;
-      opacity: 0.69;
-      line-height: 24px;
-    }
-  }
-  .demo-color-box-group {
-    .demo-color-box {
-      border-radius: 0;
-      margin: 0;
-    }
-    .demo-color-box:first-child {
-      border-radius: 4px 4px 0 0;
-    }
-    .demo-color-box:last-child {
-      border-radius: 0 0 4px 4px;
-    }
-  }
-  .bg-blue {
-    background-color: #409EFF;
-  }
-
-  .bg-success {
-    background-color: #13CE66;
-  }
-  .bg-warning {
-    background-color: #f7ba2a;
-  }
-  .bg-danger {
-    background-color: #ff4949;
-  }
-  .bg-info {
-    background-color: #909399;
-  }
-
-  .bg-text-primary {
-    background-color: #303133;
-  }
-  .bg-text-regular {
-    background-color: #606266;
-  }
-  .bg-text-secondary {
-    background-color: #909399;
-  }
-  .bg-text-placeholder {
-    background-color: #c0c4cc;
-  }
-
-  .bg-border-base {
-    background-color: #dcdfe6;
-  }
-  .bg-border-light {
-    background-color: #e4e7ed;
-  }
-  .bg-border-lighter {
-    background-color: #ebeef5;
-  }
-  .bg-border-extra-light {
-    background-color: #f2f6fc;
-  }
-
-  [class*=" bg-border-"] {
-    color: #303133;
-  }
-</style>
+<script>
+  import bus from '../../bus';
+  import { tintColor } from '../../color.js';
+  import { ACTION_USER_CONFIG_UPDATE } from '../../components/theme/constant.js';
+  const varMap = {
+    'primary': '$--color-primary',
+    'success': '$--color-success',
+    'warning': '$--color-warning',
+    'danger': '$--color-danger',
+    'info': '$--color-info',
+    'white': '$--color-white',
+    'black': '$--color-black',
+    'textPrimary': '$--color-text-primary',
+    'textRegular': '$--color-text-regular',
+    'textSecondary': '$--color-text-secondary',
+    'textPlaceholder': '$--color-text-placeholder',
+    'borderBase': '$--border-color-base',
+    'borderLight': '$--border-color-light',
+    'borderLighter': '$--border-color-lighter',
+    'borderExtraLight': '$--border-color-extra-light'
+  };
+  const original = {
+    primary: '#2460e0',
+    success: '#2FD163',
+    warning: '#F5A623',
+    danger: '#FF4D4F',
+    info: '#A7A8AD',
+    white: '#FFFFFF',
+    black: '#000000',
+    textPrimary: '#303133',
+    textRegular: '#606266',
+    textSecondary: '#A7A8AD',
+    textPlaceholder: '#C0C4CC',
+    borderBase: '#DCDFE6',
+    borderLight: '#E4E7ED',
+    borderLighter: '#EBEEF5',
+    borderExtraLight: '#F2F6FC'
+  }
+  export default {
+    created() {
+      bus.$on(ACTION_USER_CONFIG_UPDATE, this.setGlobal);
+    },
+    mounted() {
+      this.setGlobal();
+    },
+    methods: {
+      tintColor(color, tint) {
+        return tintColor(color, tint);
+      },
+      setGlobal() {
+        if (window.userThemeConfig) {
+          this.global = window.userThemeConfig.global;
+        }
+      }
+    },
+    data() {
+      return {
+        global: {},
+        primary: '',
+        success: '',
+        warning: '',
+        danger: '',
+        info: '',
+        white: '',
+        black: '',
+        textPrimary: '',
+        textRegular: '',
+        textSecondary: '',
+        textPlaceholder: '',
+        borderBase: '',
+        borderLight: '',
+        borderLighter: '',
+        borderExtraLight: ''
+      }
+    },
+    watch: {
+      global: {
+        immediate: true,
+        handler(value) {
+          Object.keys(original).forEach((o) => {
+            if (value[varMap[o]]) {
+              this[o] = value[varMap[o]]
+            } else {
+              this[o] = original[o]
+            }
+          });
+        }
+      }
+    },
+  }
+</script>
 
 ## Color
 Element utiliza un conjunto de paletas para especificar colores, y así, proporcionar una apariencia y sensación coherente para los productos que construye.
@@ -82,8 +98,25 @@ Element utiliza un conjunto de paletas para especificar colores, y así, proporc
 El color principal de Element es el azul brillante y amigable.
 
 <el-row :gutter="12">
-  <el-col :span="6" :xs="{span: 12}">
-    <div class="demo-color-box bg-blue">Azul<div class="value">#409EFF</div></div>
+  <el-col :span="10" :xs="{span: 12}">
+    <div 
+      class="demo-color-box"
+      :style="{ background: primary }"
+    >
+      Brand Color<div class="value">#2460e0</div>
+    <div 
+      class="bg-color-sub"
+      :style="{ background: tintColor(primary, 0.9) }"
+    >
+    <div 
+      class="bg-blue-sub-item" 
+      v-for="(item, key) in Array(8)"
+      :key="key"
+      :style="{ background: tintColor(primary, (key + 1) / 10) }"
+        >
+    </div>
+    </div>
+    </div>
   </el-col>
 </el-row>
 
@@ -93,38 +126,125 @@ Además del color principal, se necesitan utilizar distintos colores para difere
 
 <el-row :gutter="12">
   <el-col :span="6" :xs="{span: 12}">
-    <div class="demo-color-box bg-success">Éxito<div class="value">#67C23A</div></div>
+    <div class="demo-color-box"
+    :style="{ background: success }"
+    >Success<div class="value">#2FD163</div>
+      <div 
+        class="bg-color-sub"
+      >
+        <div 
+          class="bg-success-sub-item" 
+          v-for="(item, key) in Array(2)"
+          :key="key"
+          :style="{ background: tintColor(success, (key + 8) / 10) }"
+            >
+        </div>
+      </div>
+    </div>
   </el-col>
   <el-col :span="6" :xs="{span: 12}">
-    <div class="demo-color-box bg-warning">Precaución<div class="value">#E6A23C</div></div>
+    <div class="demo-color-box"
+    :style="{ background: warning }"
+    >Warning<div class="value">#F5A623</div>
+      <div 
+          class="bg-color-sub"
+        >
+        <div 
+          class="bg-success-sub-item" 
+          v-for="(item, key) in Array(2)"
+          :key="key"
+          :style="{ background: tintColor(warning, (key + 8) / 10) }"
+            >
+        </div>
+      </div>
+    </div>
   </el-col>
   <el-col :span="6" :xs="{span: 12}">
-    <div class="demo-color-box bg-danger">Peligro<div class="value">#F56C6C</div></div>
+    <div class="demo-color-box"
+    :style="{ background: danger }"
+    >Danger<div class="value">#FF4D4F</div>
+      <div 
+          class="bg-color-sub"
+        >
+        <div 
+          class="bg-success-sub-item" 
+          v-for="(item, key) in Array(2)"
+          :key="key"
+          :style="{ background: tintColor(danger, (key + 8) / 10) }"
+            >
+        </div>
+      </div>
+    </div>
   </el-col>
   <el-col :span="6" :xs="{span: 12}">
-    <div class="demo-color-box bg-info">Info<div class="value">#909399</div></div>
+    <div class="demo-color-box"
+    :style="{ background: info }"
+    >Info<div class="value">#A7A8AD</div>
+      <div 
+          class="bg-color-sub"
+        >
+        <div 
+          class="bg-success-sub-item" 
+          v-for="(item, key) in Array(2)"
+          :key="key"
+          :style="{ background: tintColor(info, (key + 8) / 10) }"
+            >
+        </div>
+      </div>
+    </div>
   </el-col>
 </el-row>
 
 ### Color neutro
 
-Los colores neutrales son para texto, fondos y bordes. Puede usar diferentes colores neutrales para representar una estructura jeráquica.
+Los colores neutrales son para texto, fondos y bordes. Puede usar diferentes colores neutrales para representar una estructura jerárquica.
 
 <el-row :gutter="12">
   <el-col :span="6" :xs="{span: 12}">
     <div class="demo-color-box-group">
-      <div class="demo-color-box bg-text-primary">Texto primario<div class="value">#303133</div></div>
-      <div class="demo-color-box bg-text-regular">Texto regular<div class="value">#606266</div></div>
-      <div class="demo-color-box bg-text-secondary">Texto secundario<div class="value">#909399</div></div>
-      <div class="demo-color-box bg-text-placeholder">Texto de placeholder<div class="value">#C0C4CC</div></div>
+      <div class="demo-color-box demo-color-box-other"
+      :style="{ background: textPrimary }"
+      >Texto primario<div class="value">{{textPrimary}}</div></div>
+      <div class="demo-color-box demo-color-box-other"
+      :style="{ background: textRegular }"
+      >
+      Texto regular<div class="value">{{textRegular}}</div></div>
+      <div class="demo-color-box demo-color-box-other"
+      :style="{ background: textSecondary }"
+      >Texto secundario<div class="value">{{textSecondary}}</div></div>
+      <div class="demo-color-box demo-color-box-other"
+      :style="{ background: textPlaceholder }"
+      >Texto de placeholder<div class="value">{{textPlaceholder}}</div></div>
+    </div>
+  </el-col>
+  <el-col :span="6" :xs="{span: 12}">
+    <div class="demo-color-box-group">
+      <div class="demo-color-box demo-color-box-other demo-color-box-lite"
+      :style="{ background: borderBase }"
+      >Borde base<div class="value">{{borderBase}}</div></div>
+      <div class="demo-color-box demo-color-box-other demo-color-box-lite"
+      :style="{ background: borderLight }"
+      >Borde ligero<div class="value">{{borderLight}}</div></div>
+      <div class="demo-color-box demo-color-box-other demo-color-box-lite"
+      :style="{ background: borderLighter }"
+      >Borde claro<div class="value">{{borderLighter}}</div></div>
+      <div class="demo-color-box demo-color-box-other demo-color-box-lite"
+      :style="{ background: borderExtraLight }"
+      >Borde extra claro<div class="value">{{borderExtraLight}}</div></div>
     </div>
   </el-col>
   <el-col :span="6" :xs="{span: 12}">
     <div class="demo-color-box-group">
-      <div class="demo-color-box bg-border-base">Borde base<div class="value">#DCDFE6</div></div>
-      <div class="demo-color-box bg-border-light">Borde ligero<div class="value">#E4E7ED</div></div>
-      <div class="demo-color-box bg-border-lighter">Borde claro<div class="value">#EBEEF5</div></div>
-      <div class="demo-color-box bg-border-extra-light">Borde extra claro<div class="value">#F2F6FC</div></div>
+      <div 
+      class="demo-color-box demo-color-box-other"
+      :style="{ background: black }"
+      >Basic Black<div class="value">{{black}}</div></div>
+      <div
+      class="demo-color-box demo-color-box-other"
+      :style="{ background: white, color: '#303133', border: '1px solid #eee' }"
+      >Basic White<div class="value">{{white}}</div></div>
+      <div class="demo-color-box demo-color-box-other bg-transparent">Transparent<div class="value">Transparent</div>
+      </div>
     </div>
   </el-col>
 </el-row>
diff --git a/examples/docs/es/container.md b/examples/docs/es/container.md
index 2639063a9b4..1d7c1832b5b 100644
--- a/examples/docs/es/container.md
+++ b/examples/docs/es/container.md
@@ -1,62 +1,3 @@
-<style>
-  .el-header, .el-footer {
-    background-color: #B3C0D1;
-    color: #333;
-    line-height: 60px;
-  }
-
-  .el-aside {
-    color: #333;
-  }
-
-  #disenos-comunes + .demo-container {
-    .el-header, .el-footer {
-      text-align: center;
-    }
-    
-    .el-aside {
-      background-color: #D3DCE6;
-      text-align: center;
-      line-height: 200px;
-    }
-    
-    .el-main {
-      background-color: #E9EEF3;
-      color: #333;
-      text-align: center;
-      line-height: 160px;
-    }
-    
-    & > .source > .el-container {
-      margin-bottom: 40px;
-    
-      &:nth-child(5) .el-aside,
-      &:nth-child(6) .el-aside {
-        line-height: 260px;
-      }
-    
-     &:nth-child(7) .el-aside {
-       line-height: 320px;
-      }
-    }
-  }
-</style>
-
-<script>
-  export default {
-    data() {
-      const item = {
-        date: '2016-05-02',
-        name: 'Tom',
-        address: 'No. 189, Grove St, Los Angeles'
-      };
-      return {
-        tableData: Array(20).fill(item)
-      }
-    }
-  };
-</script>
-
 ## Contenedor
 Componentes contenedores para iniciar una estructura básica de un sitio:
 
@@ -72,7 +13,7 @@ De lo contrario, de forma horizontal.
 `<el-footer>`: Contenedor para pie de página.
 
 :::tip
-Estos componentes utilizan flex para el diseño, así que asegurese que el navegador lo soporta. Además, los elementos directos de `<el-container>` tienen que ser uno o más de los últimos cuatro componentes. Y el elemento padre de los últimos cuatro componentes debe ser un `<el-container>`.
+Estos componentes utilizan flex para el diseño, así que asegúrese que el navegador lo soporta. Además, los elementos directos de `<el-container>` tienen que ser uno o más de los últimos cuatro componentes. Y el elemento padre de los últimos cuatro componentes debe ser un `<el-container>`.
 :::
 
 ### Diseños comunes
diff --git a/examples/docs/es/custom-theme.md b/examples/docs/es/custom-theme.md
index 121f27b85f5..9bc36010641 100644
--- a/examples/docs/es/custom-theme.md
+++ b/examples/docs/es/custom-theme.md
@@ -1,5 +1,12 @@
 ## Tema personalizado
-Element utiliza la metodología BEM en CSS con la finalidad de que puedas sobrescribir los estilos fácilmente. Pero, si necesita remplazar estilos a gran escala, por ejemplo, cambiar el color del tema de azul a naranja o verde, quizás reemplazarlos uno a uno no sea lo más adecuado, para ello hay 3 maneras de modificar los estilos.
+Element utiliza la metodología BEM en CSS con la finalidad de que puedas sobrescribir los estilos fácilmente. Pero, si necesita remplazar estilos a gran escala, por ejemplo, cambiar el color del tema de azul a naranja o verde, quizás reemplazarlos uno a uno no sea lo más adecuado, para ello hay 4 maneras de modificar los estilos.
+
+### Theme Roller
+Use [Online Theme Roller](./#/es/theme) to customize all Design Tokens of global variables and components，and preview the new theme in real-time.and it can generate a complete style package based on the new theme for you to download directly (to import new style files in your project, please refer to the 'Import custom theme' or part of this section).
+
+Also, use [Theme Roller Chrome Extension](https://chrome.google.com/webstore/detail/element-theme-roller/lifkjlojflekabbmlddfccdkphlelmim)，to customize theme and preview in real-time on any website developed by Element.
+
+<img src="https://shadow.elemecdn.com/app/sns-client/element-theme-editor2.e16c6a01-806d-11e9-bc23-21435c54c509.png" style="width: 100%;margin: 30px auto 0;display: block;">
 
 ### Cambiando el color del tema
 Si lo que se busca es cambiar el color del tema de Element, se recomienda utilizar el [sitio de visualización de temas](https://elementui.github.io/theme-chalk-preview/#/en-US). Element utiliza un color azul brillante y amigable como tema principal. Al cambiarlo, puede hacer que Element este más conectado visualmente a proyectos específicos.
@@ -14,22 +21,22 @@ Este sitio, le permitirá obtener una vista previa del tema con un nuevo color e
 $--color-primary: teal;
 
 /* Ubicación de la fuente, obligatoria */
-$--font-path: '~element-ui/lib/theme-chalk/fonts';
+$--font-path: '~@femessage/element-ui/lib/theme-chalk/fonts';
 
-@import "~element-ui/packages/theme-chalk/src/index";
+@import "~@femessage/element-ui/packages/theme-chalk/src/index";
 ```
 
 Entonces, en el archivo principal del proyecto, importe este archivo de estilos en lugar de los estilos de Element:
 ```JS
 import Vue from 'vue'
-import Element from 'element-ui'
+import Element from '@femessage/element-ui'
 import './element-variables.scss'
 
 Vue.use(Element)
 ```
 
 :::tip
-Nota es necesario sobreescribir la ruta de la fuente por una ruta relativa de las fuentes de Element.
+Nota es necesario sobrescribir la ruta de la fuente por una ruta relativa de las fuentes de Element.
 :::
 
 ### CLI para generar temas
@@ -51,7 +58,7 @@ npm i https://github.com/ElementUI/theme-chalk -D
 ```
 
 #### <strong>Inicializar archivo de variables</strong>
-Después de haber instalado correctamente los paquetes, el comando `et` estará disponible en su CLI (si instalo el paquete de manera local, utilize `node_modules/.bin/et` en su lugar). Ejecute `-i` para inicializar un archivo de variables, puede especificar un nombre distinto, pero por defecto, el archivo se llama `element-variables.scss`. También puede especificar un directorio distinto.
+Después de haber instalado correctamente los paquetes, el comando `et` estará disponible en su CLI (si instalo el paquete de manera local, utilice `node_modules/.bin/et` en su lugar). Ejecute `-i` para inicializar un archivo de variables, puede especificar un nombre distinto, pero por defecto, el archivo se llama `element-variables.scss`. También puede especificar un directorio distinto.
 
 ```shell
 et -i [custom output file]
@@ -61,7 +68,7 @@ et -i [custom output file]
 
 En el archivo `element-variables.scss` podrá encontrar todas las variables que utiliza Element para definir los estilos y estos están definidos en SCSS. Aquí un ejemplo:
 ```css
-$--color-primary: #409EFF !default;
+$--color-primary: #2460e0 !default;
 $--color-primary-light-1: mix($--color-white, $--color-primary, 10%) !default; /* 53a8ff */
 $--color-primary-light-2: mix($--color-white, $--color-primary, 20%) !default; /* 66b1ff */
 $--color-primary-light-3: mix($--color-white, $--color-primary, 30%) !default; /* 79bbff */
@@ -72,10 +79,10 @@ $--color-primary-light-7: mix($--color-white, $--color-primary, 70%) !default; /
 $--color-primary-light-8: mix($--color-white, $--color-primary, 80%) !default; /* d9ecff */
 $--color-primary-light-9: mix($--color-white, $--color-primary, 90%) !default; /* ecf5ff */
 
-$--color-success: #67c23a !default;
-$--color-warning: #e6a23c !default;
-$--color-danger: #f56c6c !default;
-$--color-info: #909399 !default;
+$--color-success: #02C5E2 !default;
+$--color-warning: #F5A623 !default;
+$--color-danger: #E24156 !default;
+$--color-info: #6A6E7B !default;
 
 ...
 ```
@@ -87,7 +94,7 @@ $--color-primary: red;
 ```
 
 #### <strong>Construyendo el tema</strong>
-Después de haber modificado el archivo de variables, utilizaremos el comando `et` para construir nuestro tema. Puedes activar el modo `watch` agregando el parámetro `-w`. Y, si desea personalizar el nombre del archivo, debes agregar el parámetro `-c` seguido del nombre.
+Después de haber modificado el archivo de variables, utilizaremos el comando `et` para construir nuestro tema. Puedes activar el modo `watch` agregando el parámetro `-w`. Y, si desea personalizar el nombre del archivo, debes agregar el parámetro `-c` seguido del nombre. Por defecto, el archivo de tema construido es colocado dentro de `./theme`. Puede especificar un directorio distinto utilizando el parámetro `-o`. 
 ```shell
 et
 
@@ -95,12 +102,13 @@ et
 > ✔ build element theme
 ```
 
+### Use custom theme
 #### <strong>Importar un tema personalizado</strong>
-Por defecto, el archivo de tema construido es colocado dentro de `./theme`. Puede especificar un directorio distinto utilizando el parámetro `-o`. Importar su propio tema es igual a como si importará el tema por defecto, únicamente tiene que importar el archivo que se construyó:
+Importing your own theme is just like importing the default theme, only this time you import the file built from "Online Theme Roller" or "CLI tool":
 
 ```javascript
 import '../theme/index.css'
-import ElementUI from 'element-ui'
+import ElementUI from '@femessage/element-ui'
 import Vue from 'vue'
 
 Vue.use(ElementUI)
@@ -110,12 +118,15 @@ Vue.use(ElementUI)
 Si esta utilizando `babel-plugin-component` para importar bajo demanda, solo debe modificar el archivo `.babelrc` y especificar en la propiedad `styleLibraryName` la ruta en donde se encuentra localizado su tema personalizado relativo a `.babelrc`. **Nota** el carácter `~` es obligatorio:
 ```json
 {
-  "plugins": [["component", [
-    {
-      "libraryName": "element-ui",
-      "styleLibraryName": "~theme"
-    }
-  ]]]
+  "plugins": [
+    [
+      "component",
+      {
+        "libraryName": "element-ui",
+        "styleLibraryName": "~theme"
+      }
+    ]
+  ]
 }
 ```
 
diff --git a/examples/docs/es/data-mapper.md b/examples/docs/es/data-mapper.md
new file mode 100644
index 00000000000..c8deb33827a
--- /dev/null
+++ b/examples/docs/es/data-mapper.md
@@ -0,0 +1 @@
+## DataMapper
diff --git a/examples/docs/es/date-picker.md b/examples/docs/es/date-picker.md
index e44a9b81ebf..dd9b86beaff 100644
--- a/examples/docs/es/date-picker.md
+++ b/examples/docs/es/date-picker.md
@@ -1,115 +1,3 @@
-<script>
-  module.exports = {
-    data() {
-      return {
-        pickerOptions1: {
-          disabledDate(time) {
-            return time.getTime() > Date.now();
-          },
-          shortcuts: [{
-            text: 'Today',
-            onClick(picker) {
-              picker.$emit('pick', new Date());
-            }
-          }, {
-            text: 'Yesterday',
-            onClick(picker) {
-              const date = new Date();
-              date.setTime(date.getTime() - 3600 * 1000 * 24);
-              picker.$emit('pick', date);
-            }
-          }, {
-            text: 'A week ago',
-            onClick(picker) {
-              const date = new Date();
-              date.setTime(date.getTime() - 3600 * 1000 * 24 * 7);
-              picker.$emit('pick', date);
-            }
-          }]
-        },
-        pickerOptions2: {
-          shortcuts: [{
-            text: 'Last week',
-            onClick(picker) {
-              const end = new Date();
-              const start = new Date();
-              start.setTime(start.getTime() - 3600 * 1000 * 24 * 7);
-              picker.$emit('pick', [start, end]);
-            }
-          }, {
-            text: 'Last month',
-            onClick(picker) {
-              const end = new Date();
-              const start = new Date();
-              start.setTime(start.getTime() - 3600 * 1000 * 24 * 30);
-              picker.$emit('pick', [start, end]);
-            }
-          }, {
-            text: 'Last 3 months',
-            onClick(picker) {
-              const end = new Date();
-              const start = new Date();
-              start.setTime(start.getTime() - 3600 * 1000 * 24 * 90);
-              picker.$emit('pick', [start, end]);
-            }
-          }]
-        },
-        value1: '',
-        value2: '',
-        value3: '',
-        value4: '',
-        value5: '',
-        value6: '',
-        value7: '',
-        value8: '',
-        value9: '',
-        value10: '',
-        value11: '',
-        value12: '',
-        value13: '',
-        value14: ''
-      };
-    }
-  };
-</script>
-
-<style>
-  .demo-block.demo-date-picker .source {
-    padding: 0;
-    display: flex;
-  }
-
-  .demo-date-picker .block {
-    padding: 30px 0;
-    text-align: center;
-    border-right: solid 1px #EFF2F6;
-    flex: 1;
-    &:last-child {
-      border-right: none;
-    }
-  }
-
-  .demo-date-picker .container {
-    flex: 1;
-    border-right: solid 1px #EFF2F6;
-    .block {
-      border-right: none;
-      &:last-child {
-        border-top: solid 1px #EFF2F6;
-      }
-    }
-    &:last-child {
-      border-right: none;
-    }
-  }
-
-  .demo-date-picker .demonstration {
-    display: block;
-    color: #8492a6;
-    font-size: 14px;
-    margin-bottom: 20px;
-  }
-</style>
 
 ## DatePicker
 
@@ -138,7 +26,7 @@ Date Picker básico por "día".
       v-model="value2"
       type="date"
       placeholder="Pick a day"
-      :picker-options="pickerOptions1">
+      :picker-options="pickerOptions">
     </el-date-picker>
   </div>
 </template>
@@ -147,7 +35,7 @@ Date Picker básico por "día".
   export default {
     data() {
       return {
-        pickerOptions1: {
+        pickerOptions: {
           disabledDate(time) {
             return time.getTime() > Date.now();
           },
@@ -184,7 +72,7 @@ Date Picker básico por "día".
 
 ### Otras mediciones
 
-You can choose week, month, year or multiple dates by extending the standard date picker component.
+Puede elegir la semana, el mes, el año o varias fechas ampliando el componente estándar del selector de fechas.
 
 :::demo
 
@@ -193,7 +81,7 @@ You can choose week, month, year or multiple dates by extending the standard dat
   <div class="block">
     <span class="demonstration">Week</span>
     <el-date-picker
-      v-model="value3"
+      v-model="value1"
       type="week"
       format="Week WW"
       placeholder="Pick a week">
@@ -202,7 +90,7 @@ You can choose week, month, year or multiple dates by extending the standard dat
   <div class="block">
     <span class="demonstration">Month</span>
     <el-date-picker
-      v-model="value4"
+      v-model="value2"
       type="month"
       placeholder="Pick a month">
     </el-date-picker>
@@ -212,7 +100,7 @@ You can choose week, month, year or multiple dates by extending the standard dat
   <div class="block">
     <span class="demonstration">Year</span>
     <el-date-picker
-      v-model="value5"
+      v-model="value3"
       type="year"
       placeholder="Pick a year">
     </el-date-picker>
@@ -221,7 +109,7 @@ You can choose week, month, year or multiple dates by extending the standard dat
     <span class="demonstration">Dates</span>
     <el-date-picker
       type="dates"
-      v-model="value14"
+      v-model="value4"
       placeholder="Pick one or more dates">
     </el-date-picker>
   </div>
@@ -231,10 +119,10 @@ You can choose week, month, year or multiple dates by extending the standard dat
   export default {
     data() {
       return {
+        value1: '',
+        value2: '',
         value3: '',
-        value4: '',
-        value5: '',
-        value14: ''
+        value4: ''
       };
     }
   };
@@ -254,7 +142,7 @@ Se soporta la selección de un rango de fechas.
   <div class="block">
     <span class="demonstration">Default</span>
     <el-date-picker
-      v-model="value6"
+      v-model="value1"
       type="daterange"
       range-separator="To"
       start-placeholder="Start date"
@@ -264,14 +152,14 @@ Se soporta la selección de un rango de fechas.
   <div class="block">
     <span class="demonstration">With quick options</span>
     <el-date-picker
-      v-model="value7"
+      v-model="value2"
       type="daterange"
       align="right"
       unlink-panels
       range-separator="To"
       start-placeholder="Start date"
       end-placeholder="End date"
-      :picker-options="pickerOptions2">
+      :picker-options="pickerOptions">
     </el-date-picker>
   </div>
 </template>
@@ -280,7 +168,7 @@ Se soporta la selección de un rango de fechas.
   export default {
     data() {
       return {
-        pickerOptions2: {
+        pickerOptions: {
           shortcuts: [{
             text: 'Last week',
             onClick(picker) {
@@ -307,8 +195,8 @@ Se soporta la selección de un rango de fechas.
             }
           }]
         },
-        value6: '',
-        value7: ''
+        value1: '',
+        value2: ''
       };
     }
   };
@@ -317,6 +205,74 @@ Se soporta la selección de un rango de fechas.
 
 :::
 
+### Rango de mes
+
+Se admite la selección de un intervalo de un mes.
+
+:::demo Cuando se encuentra en el modo de rango, los paneles izquierdo y derecho están enlazados de forma predeterminada. Si desea que los dos paneles cambien de año en curso de forma independiente, puede utilizar el atributo unlink-panels.
+```html
+<template>
+  <div class="block">
+    <span class="demonstration">Default</span>
+    <el-date-picker
+      v-model="value1"
+      type="monthrange"
+      range-separator="To"
+      start-placeholder="Start month"
+      end-placeholder="End month">
+    </el-date-picker>
+  </div>
+  <div class="block">
+    <span class="demonstration">With quick options</span>
+    <el-date-picker
+      v-model="value2"
+      type="monthrange"
+      align="right"
+      unlink-panels
+      range-separator="To"
+      start-placeholder="Start month"
+      end-placeholder="End month"
+      :picker-options="pickerOptions">
+    </el-date-picker>
+  </div>
+</template>
+
+<script>
+  export default {
+    data() {
+      return {
+        pickerOptions: {
+          shortcuts: [{
+            text: 'This month',
+            onClick(picker) {
+              picker.$emit('pick', [new Date(), new Date()]);
+            }
+          }, {
+            text: 'This year',
+            onClick(picker) {
+              const end = new Date();
+              const start = new Date(new Date().getFullYear(), 0);
+              picker.$emit('pick', [start, end]);
+            }
+          }, {
+            text: 'Last 6 months',
+            onClick(picker) {
+              const end = new Date();
+              const start = new Date();
+              start.setMonth(start.getMonth() - 6);
+              picker.$emit('pick', [start, end]);
+            }
+          }]
+        },
+        value1: '',
+        value2: ''
+      };
+    }
+  };
+</script>
+```
+:::
+
 ###  Valor por defecto
 
 Si el usuario no ha escogido una fecha, muestra el calendario de hoy por defecto. Puede utilizar `default-value` para fijar otra fecha. Su valor debe ser definido por `new Date()`.
@@ -329,7 +285,7 @@ Si el tipo es `daterange`, `default-value` establece el calendario del lado izqu
   <div class="block">
     <span class="demonstration">date</span>
     <el-date-picker
-      v-model="value8"
+      v-model="value1"
       type="date"
       placeholder="Pick a date"
       default-value="2010-10-01">
@@ -338,7 +294,7 @@ Si el tipo es `daterange`, `default-value` establece el calendario del lado izqu
   <div class="block">
     <span class="demonstration">daterange</span>
     <el-date-picker
-      v-model="value9"
+      v-model="value2"
       type="daterange"
       align="right"
       start-placeholder="Start Date"
@@ -352,8 +308,8 @@ Si el tipo es `daterange`, `default-value` establece el calendario del lado izqu
   export default {
     data() {
       return {
-        value8: '',
-        value9: ''
+        value1: '',
+        value2: ''
       };
     }
   };
@@ -390,15 +346,16 @@ Preste atención a la capitalización
 | `A`         | AM/PM        | solamente para `format`, mayusculas      | AM            |
 | `a`         | am/pm        | solamente para `format`, minúsculas      | am            |
 | `timestamp` | JS timestamp | solamente para `value-format`; valor vinculado debe ser un `number` | 1483326245000 |
+| `[MM]` | No hay caracteres de escape | Para escapar de los caracteres, colóquelos entre corchetes (ejemplo: [A] [MM]). | MM |
 
 :::demo
 ```html
 <template>
   <div class="block">
     <span class="demonstration">Emits Date object</span>
-    <div class="demonstration">Value: {{ value10 }}</div>
+    <div class="demonstration">Value: {{ value1 }}</div>
     <el-date-picker
-      v-model="value10"
+      v-model="value1"
       type="date"
       placeholder="Pick a Date"
       format="yyyy/MM/dd">
@@ -406,9 +363,9 @@ Preste atención a la capitalización
   </div>
   <div class="block">
     <span class="demonstration">Use value-format</span>
-    <div class="demonstration">Value: {{ value11 }}</div>
+    <div class="demonstration">Value: {{ value2 }}</div>
     <el-date-picker
-      v-model="value11"
+      v-model="value2"
       type="date"
       placeholder="Pick a Date"
       format="yyyy/MM/dd"
@@ -417,9 +374,9 @@ Preste atención a la capitalización
   </div>
   <div class="block">
     <span class="demonstration">Timestamp</span>
-    <div class="demonstration">Value：{{ value12 }}</div>
+    <div class="demonstration">Value：{{ value3 }}</div>
     <el-date-picker
-      v-model="value12"
+      v-model="value3"
       type="date"
       placeholder="Pick a Date"
       format="yyyy/MM/dd"
@@ -432,9 +389,9 @@ Preste atención a la capitalización
   export default {
     data() {
       return {
-        value10: '',
-        value11: '',
-        value12: ''
+        value1: '',
+        value2: '',
+        value3: ''
       };
     }
   };
@@ -451,9 +408,9 @@ Al seleccionar un intervalo de fechas, puede asignar la hora para la fecha de in
 ```html
 <template>
   <div class="block">
-    <p>Component value：{{ value12 }}</p>
+    <p>Component value：{{ value }}</p>
     <el-date-picker
-      v-model="value12"
+      v-model="value"
       type="daterange"
       start-placeholder="Start date"
       end-placeholder="End date"
@@ -466,7 +423,7 @@ Al seleccionar un intervalo de fechas, puede asignar la hora para la fecha de in
   export default {
     data() {
       return {
-        value12: ''
+        value: ''
       };
     }
   };
@@ -477,15 +434,16 @@ Al seleccionar un intervalo de fechas, puede asignar la hora para la fecha de in
 ### Atributos
 | Atributo          | Descripción                              | Tipo              | Valores aceptados                        | Por defecto          |
 | ----------------- | ---------------------------------------- | ----------------- | ---------------------------------------- | -------------------- |
+| value / v-model    | valor enlazado | date(DatePicker) / array(DateRangePicker) | — | — |
 | readonly          | si DatePicker es solo de lectura         | boolean           | —                                        | false                |
 | disabled          | si DatePicker esta deshabilitado         | boolean           | —                                        | false                |
 | size              | tamaño del input                         | string            | large/small/mini                         | —                    |
 | editable          | si el input es editable                  | boolean           | —                                        | true                 |
-| clearable         | si se muestra el boton de borrado        | boolean           | —                                        | true                 |
+| clearable         | si se muestra el botón de borrado   | boolean           | —                                        | true                 |
 | placeholder       | placeholder cuando el modo NO es rango   | string            | —                                        | —                    |
 | start-placeholder | placeholder para la fecha de inicio en modo rango | string            | —                                        | —                    |
 | end-placeholder   | placeholder para la fecha final en modo rango | string            | —                                        | —                    |
-| type              | tipo de picker                           | string            | year/month/date/dates/datetime/ week/datetimerange/daterange | date                 |
+| type              | tipo de picker                           | string            | year/month/date/dates/datetime/ week/datetimerange/daterange/ monthrange | date                 |
 | format            | formato en que se muestra el valor en el input | string            | ver [date formats](#/es/component/date-picker#date-formats) | yyyy-MM-dd           |
 | align             | alineación                               | left/center/right | left                                     |                      |
 | popper-class      | nombre de clase personalizada para el dropdown de DatePicker | string            | —                                        | —                    |
@@ -500,11 +458,12 @@ Al seleccionar un intervalo de fechas, puede asignar la hora para la fecha de in
 | clear-icon        | Clase personalizada para el icono `clear` | string            | —                                        | el-icon-circle-close |
 
 ### Opciones del Picker
-| Atributo       | Descripción                              | Tipo                           | Valores aceptados | Por defecto |
-| -------------- | ---------------------------------------- | ------------------------------ | ----------------- | ----------- |
+| Atributo       | Descripción                                                  | Tipo                           | Valores aceptados | Por defecto |
+| -------------- | ------------------------------------------------------------ | ------------------------------ | ----------------- | ----------- |
 | shortcuts      | { text, onClick } un array de objetos para establecer opciones de acceso directo, verifique la tabla siguiente | object[]                       | —                 | —           |
 | disabledDate   | una función que determina si una fecha está desactivada con esa fecha como parámetro. Debería devolver un valor booleano | function                       | —                 | —           |
-| firstDayOfWeek | primer dia de la semana                  | Number                         | 1 to 7            | 7           |
+| cellClassName | establecer nombre de clase personalizado | Function(Date) | — | — |
+| firstDayOfWeek | primer día de la semana                                      | Number                         | 1 to 7            | 7           |
 | onPick         | una función que se dispara cuando se cambia la fecha seleccionada. Solamente para `daterange` y `datetimerange`. | Function({ maxDate, minDate }) | -                 | -           |
 
 ### Accesso directo
@@ -527,6 +486,6 @@ Al seleccionar un intervalo de fechas, puede asignar la hora para la fecha de in
 | focus  | coloca el foco en el input | —           |
 
 ### Slots
-| Name             | Description                     |
-|------------------|-------------------------------- |
-| range-separator  | costume range separator content |
+| Name            | Description                           |
+| --------------- | ------------------------------------- |
+| range-separator | Separador de los rangos personalizado |
diff --git a/examples/docs/es/datetime-picker.md b/examples/docs/es/datetime-picker.md
index ba6715b07fb..0209838899c 100644
--- a/examples/docs/es/datetime-picker.md
+++ b/examples/docs/es/datetime-picker.md
@@ -1,92 +1,3 @@
-<script>
-  module.exports = {
-    data() {
-      return {
-        pickerOptions1: {
-          shortcuts: [{
-            text: 'Today',
-            onClick(picker) {
-              picker.$emit('pick', new Date());
-            }
-          }, {
-            text: 'Yesterday',
-            onClick(picker) {
-              const date = new Date();
-              date.setTime(date.getTime() - 3600 * 1000 * 24);
-              picker.$emit('pick', date);
-            }
-          }, {
-            text: 'A week ago',
-            onClick(picker) {
-              const date = new Date();
-              date.setTime(date.getTime() - 3600 * 1000 * 24 * 7);
-              picker.$emit('pick', date);
-            }
-          }]
-        },
-        pickerOptions2: {
-          shortcuts: [{
-            text: 'Last week',
-            onClick(picker) {
-              const end = new Date();
-              const start = new Date();
-              start.setTime(start.getTime() - 3600 * 1000 * 24 * 7);
-              picker.$emit('pick', [start, end]);
-            }
-          }, {
-            text: 'Last month',
-            onClick(picker) {
-              const end = new Date();
-              const start = new Date();
-              start.setTime(start.getTime() - 3600 * 1000 * 24 * 30);
-              picker.$emit('pick', [start, end]);
-            }
-          }, {
-            text: 'Last 3 months',
-            onClick(picker) {
-              const end = new Date();
-              const start = new Date();
-              start.setTime(start.getTime() - 3600 * 1000 * 24 * 90);
-              picker.$emit('pick', [start, end]);
-            }
-          }]
-        },
-        value1: '',
-        value2: '',
-        value3: '',
-        value4: [new Date(2000, 10, 10, 10, 10), new Date(2000, 10, 11, 10, 10)],
-        value5: '',
-        value6: '',
-        value7: ''
-      };
-    }
-  };
-</script>
-
-<style>
-.demo-block.demo-datetime-picker .source {
-    padding: 0;
-    display: flex;
-  }
-
-  .demo-datetime-picker .block {
-    padding: 30px 0;
-    text-align: center;
-    border-right: solid 1px #EFF2F6;
-    flex: 1;
-    &:last-child {
-      border-right: none;
-    }
-  }
-
-  .demo-datetime-picker .demonstration {
-    display: block;
-    color: #8492a6;
-    font-size: 14px;
-    margin-bottom: 20px;
-  }
-</style>
-
 ## DateTimePicker
 
 Seleccionar fecha y tiempo juntos en un picker.
@@ -116,7 +27,7 @@ DateTimePicker se deriva de DatePicker y TimePicker. Por una explicación más d
       v-model="value2"
       type="datetime"
       placeholder="Select date and time"
-      :picker-options="pickerOptions1">
+      :picker-options="pickerOptions">
     </el-date-picker>
   </div>
   <div class="block">
@@ -134,7 +45,7 @@ DateTimePicker se deriva de DatePicker y TimePicker. Por una explicación más d
   export default {
     data() {
       return {
-        pickerOptions1: {
+        pickerOptions: {
           shortcuts: [{
             text: 'Today',
             onClick(picker) {
@@ -175,7 +86,7 @@ DateTimePicker se deriva de DatePicker y TimePicker. Por una explicación más d
   <div class="block">
     <span class="demonstration">Default</span>
     <el-date-picker
-      v-model="value4"
+      v-model="value1"
       type="datetimerange"
       range-separator="To"
       start-placeholder="Start date"
@@ -185,9 +96,9 @@ DateTimePicker se deriva de DatePicker y TimePicker. Por una explicación más d
   <div class="block">
     <span class="demonstration">With shortcuts</span>
     <el-date-picker
-      v-model="value5"
+      v-model="value2"
       type="datetimerange"
-      :picker-options="pickerOptions2"
+      :picker-options="pickerOptions"
       range-separator="To"
       start-placeholder="Start date"
       end-placeholder="End date"
@@ -200,7 +111,7 @@ DateTimePicker se deriva de DatePicker y TimePicker. Por una explicación más d
   export default {
     data() {
       return {
-        pickerOptions2: {
+        pickerOptions: {
           shortcuts: [{
             text: 'Last week',
             onClick(picker) {
@@ -227,8 +138,8 @@ DateTimePicker se deriva de DatePicker y TimePicker. Por una explicación más d
             }
           }]
         },
-        value4: [new Date(2000, 10, 10, 10, 10), new Date(2000, 10, 11, 10, 10)],
-        value5: ''
+        value1: [new Date(2000, 10, 10, 10, 10), new Date(2000, 10, 11, 10, 10)],
+        value2: ''
       };
     }
   };
@@ -236,15 +147,15 @@ DateTimePicker se deriva de DatePicker y TimePicker. Por una explicación más d
 ```
 :::
 
-###  Default time value for start date and end date
+###  Valor de la hora por defecto para la fecha de inicio y la fecha final
 
-:::demo When picking date range on the date panel with type `datetimerange`, `00:00:00` will be used as the default time value for start and end date. We can control it with the `default-time` attribute. `default-time` accepts an array of up to two strings. The first item controls time value of the start date and the second item controls time value of the end date.
+:::demo Cuando se selecciona el rango de fechas en el panel con el tipo datetimerange, 00:00:00:00 se usará como el valor de tiempo predeterminado para la fecha de inicio y fin. Podemos controlarlo con el atributo default-time. default-time acepta una matriz de hasta dos cadenas. La primera posición controla el valor de tiempo de la fecha de inicio y la segunda el valor de tiempo de la fecha de fin.
 ```html
 <template>
   <div class="block">
     <span class="demonstration">Start date time 12:00:00</span>
     <el-date-picker
-      v-model="value6"
+      v-model="value1"
       type="datetimerange"
       start-placeholder="Start Date"
       end-placeholder="End Date"
@@ -254,7 +165,7 @@ DateTimePicker se deriva de DatePicker y TimePicker. Por una explicación más d
   <div class="block">
     <span class="demonstration">Start date time 12:00:00, end date time 08:00:00</span>
     <el-date-picker
-      v-model="value7"
+      v-model="value2"
       type="datetimerange"
       align="right"
       start-placeholder="Start Date"
@@ -268,8 +179,8 @@ DateTimePicker se deriva de DatePicker y TimePicker. Por una explicación más d
   export default {
     data() {
       return {
-        value6: '',
-        value7: ''
+        value1: '',
+        value2: ''
       };
     }
   };
@@ -280,6 +191,7 @@ DateTimePicker se deriva de DatePicker y TimePicker. Por una explicación más d
 ### Atributos
 | Atributos          | Descripción                              | Tipo              | Valores aceptados                        | Por defecto          |
 | ------------------ | ---------------------------------------- | ----------------- | ---------------------------------------- | -------------------- |
+| value / v-model     | valor enlazado                           | date(DateTimePicker) / array(DateTimeRangePicker) | — | — |
 | readonly           | si DatePicker es solo de lectura         | boolean           | —                                        | false                |
 | disabled           | si DatePicker esta deshabilitada         | boolean           | —                                        | false                |
 | editable           | Si la entrada es editable                | boolean           | —                                        | true                 |
@@ -290,7 +202,7 @@ DateTimePicker se deriva de DatePicker y TimePicker. Por una explicación más d
 | end-placeholder    | placeholder para el fin de fecha en el modo Range | string            | —                                        | —                    |
 | time-arrow-control | si se puede modificar el `time`  utilizando botones con flechas | boolean           | —                                        | false                |
 | type               | tipo del picker                          | string            | year/month/date/datetime/ week/datetimerange/daterange | date                 |
-| format             | formato de valor mostrado en el input    | string            | ver [date formats](#/es/component/date-picker#date-formats) | yyyy-MM-dd           |
+| format             | formato de valor mostrado en el input    | string            | ver [date formats](#/es/component/date-picker#date-formats) | yyyy-MM-dd HH:mm:ss           |
 | align              | alineación                               | left/center/right | left                                     |                      |
 | popper-class       | nombre de clase personalizado para el Dropdown de DatePicker | string            | —                                        | —                    |
 | picker-options     | opciones adicionales, Comprueba la tabla de mas abajo | object            | —                                        | {}                   |
@@ -301,20 +213,22 @@ DateTimePicker se deriva de DatePicker y TimePicker. Por una explicación más d
 | name               | igual que `name` en la entrada nativa    | string            | —                                        | —                    |
 | unlink-panels      | desconectar dos date-panels en range-picker | boolean           | —                                        | false                |
 | prefix-icon        | Clase personalizada para el icono prefijado | string            | —                                        | el-icon-date         |
-| clear-icon         | Clase personalizada para el icono `clear` | string            | —                                        | el-icon-circle-close |
+| clear-icon         | Clase personalizada para el icono `clear` | string              | —                                        | el-icon-circle-close |
+| validate-event     | si se debe disparar la validacion | boolean             | -                                        | true                 |
 
 ### Picker Options
 | Atributo       | Descripción                              | Tipo     | Valores aceptados | Por defecto |
 | -------------- | ---------------------------------------- | -------- | ----------------- | ----------- |
 | shortcuts      | un array de objetos { text, onClick } para establecer las opciones de acceso directo, verifique la tabla debajo | objeto[] | —                 | —           |
 | disabledDate   | una función que determina si una fecha está desactivada con esa fecha como parámetro. Debería devolver un booleano | función  | —                 | —           |
+| cellClassName | establecer nombre de clase personalizado | Function(Date) | — | — |
 | firstDayOfWeek | primera día de semana                    | Número   | 1 to 7            | 7           |
 
 ### Accesos directos
-| Atributo | Descripción                              | Tipo     | Valores aceptados | Por defecto |
-| -------- | ---------------------------------------- | -------- | ----------------- | ----------- |
-| text     | título del acceso directo                | string   | —                 | —           |
-| onClick  | la funcion se dispara cuando se hace clic en el acceso directo, con el `vm` como parámetro. Puede modificar el valor del picker emitiendo el evento`pick`. Ejemplo: `vm.$emit('pick', new Date())` | function | —                 | —           |
+| Atributo | Descripción                                                  | Tipo     | Valores aceptados | Por defecto |
+| -------- | ------------------------------------------------------------ | -------- | ----------------- | ----------- |
+| text     | título del acceso directo                                    | string   | —                 | —           |
+| onClick  | la función se dispara cuando se hace clic en el acceso directo, con el `vm` como parámetro. Puede modificar el valor del picker emitiendo el evento`pick`. Ejemplo: `vm.$emit('pick', new Date())` | function | —                 | —           |
 
 ### Eventos
 | Nombre de evento | Descripción                              | Parámetros                    |
diff --git a/examples/docs/es/dialog.md b/examples/docs/es/dialog.md
index 6539462c338..280607e7fe9 100644
--- a/examples/docs/es/dialog.md
+++ b/examples/docs/es/dialog.md
@@ -1,78 +1,3 @@
-<script>
-  module.exports = {
-    data() {
-      return {
-        gridData: [{
-          date: '2016-05-02',
-          name: 'John Smith',
-          address: 'No.1518,  Jinshajiang Road, Putuo District'
-        }, {
-          date: '2016-05-04',
-          name: 'John Smith',
-          address: 'No.1518,  Jinshajiang Road, Putuo District'
-        }, {
-          date: '2016-05-01',
-          name: 'John Smith',
-          address: 'No.1518,  Jinshajiang Road, Putuo District'
-        }, {
-          date: '2016-05-03',
-          name: 'John Smith',
-          address: 'No.1518,  Jinshajiang Road, Putuo District'
-        }],
-        dialogVisible: false,
-        dialogTableVisible: false,
-        dialogFormVisible: false,
-        outerVisible: false,
-        innerVisible: false,
-        centerDialogVisible: false,
-        form: {
-          name: '',
-          region: '',
-          date1: '',
-          date2: '',
-          delivery: false,
-          type: [],
-          resource: '',
-          desc: ''
-        },
-        formLabelWidth: '120px'
-      };
-    },
-    methods: {
-      handleClose(done) {
-        this.$confirm('Are you sure to close this dialog?')
-          .then(_ => {
-            done();
-          })
-          .catch(_ => {});
-      }
-    }
-  };
-</script>
-
-<style>
-  .demo-box.demo-dialog {
-    .dialog-footer button:first-child {
-      margin-right: 10px;
-    }
-    .full-image {
-      width: 100%;
-    }
-    .el-dialog__wrapper {
-      margin: 0;
-    }
-    .el-select {
-      width: 300px;
-    }
-    .el-input {
-      width: 300px;
-    }
-    .el-button--text {
-      margin-right: 15px;
-    }
-  }
-</style>
-
 ## Dialog
 
 Informar a usuarios preservando el estado de la página actual.
@@ -276,7 +201,7 @@ El contenido de Diálogo se puede centrar.
 :::
 
 :::tip
-The content of Dialog is lazily rendered, which means the default slot is not rendered onto the DOM until it is firstly opened. Therefore, if you need to perform a DOM manipulation or access a component using `ref`, do it in the `open` event callback.
+El contenido de Dialog se renderiza en modo lazy, lo que significa que la ranura por defecto no se renderiza en el DOM hasta que se abre por primera vez. Por lo tanto, si necesita realizar una manipulación DOM o acceder a un componente mediante ref, hágalo en el callback del evento `open`.
 :::
 
 :::tip
@@ -304,6 +229,7 @@ Si la variable ligada a `visible` se gestiona en el Vuex store, el `.sync` no pu
 | show-close            | si mostrar un botón de cerrar            | boolean                                  | —                 | true        |
 | before-close          | una devolución de llamada antes de que se cierre el cuadro de diálogo, y evitar cerrar el cuadro de diálogo | función(done) `done`se usa para cerrar el diálog | —                 | —           |
 | center                | si alinear el encabezado y el pie de página en el centro | boolean                                  | —                 | false       |
+| destroy-on-close      | Destruir elementos en Dialog cuando se cierra | boolean                                  | —                 | false         |
 
 ### Slots
 
@@ -317,7 +243,7 @@ Si la variable ligada a `visible` se gestiona en el Vuex store, el `.sync` no pu
 | Nombre de Evento | Descripcíon                              | Parámetros |
 | ---------------- | ---------------------------------------- | ---------- |
 | open             | se activa cuando se abre el cuadro de Diálogo | —          |
-| opened           | se activa cuando la animacion de apertura del Dialog termina. | — |
+| opened           | se activa cuando la animación de apertura del Dialog termina. | — |
 | close            | se dispara cuando el Diálogo se cierra   | —          |
 | closed           | se activa cuando finaliza la animación de cierre del Diálog | — |
 
diff --git a/examples/docs/es/divider.md b/examples/docs/es/divider.md
new file mode 100644
index 00000000000..847b1efce8a
--- /dev/null
+++ b/examples/docs/es/divider.md
@@ -0,0 +1,61 @@
+## Divider
+
+La línea divisoria que separa el contenido.
+
+### Uso básico
+
+Divide el texto de los diferentes párrafos.
+
+:::demo
+```html
+<template>
+  <div>
+    <span>I sit at my window this morning where the world like a passer-by stops for a moment, nods to me and goes.</span>
+    <el-divider></el-divider>
+    <span>There little thoughts are the rustle of leaves; they have their whisper of joy in my mind.</span>
+  </div>
+</template>
+```
+:::
+
+### Contenido personalizado
+
+Puede personalizar el contenido en la línea divisoria.
+
+
+:::demo
+```html
+<template>
+  <div>
+    <span>What you are you do not see, what you see is your shadow. </span>
+    <el-divider content-position="left">Rabindranath Tagore</el-divider>
+    <span>I cannot choose the best. The best chooses me.</span>
+    <el-divider><i class="el-icon-star-on"></i></el-divider>
+    <span>My wishes are fools, they shout across thy song, my Master. Let me but listen.</span>
+    <el-divider content-position="right">Rabindranath Tagore</el-divider>
+  </div>
+</template>
+```
+:::
+
+### División vertical
+
+:::demo
+```html
+<template>
+  <div>
+    <span>Rain</span>
+    <el-divider direction="vertical"></el-divider>
+    <span>Home</span>
+    <el-divider direction="vertical"></el-divider>
+    <span>Grass</span>
+  </div>
+</template>
+```
+:::
+
+### Divider Atributos
+| Atributo     | Descripción        | Tipo   | Valores aceptados | Por defecto |
+|-------------  |---------------- |---------------- |---------------------- |-------- |
+| direction      | indica la dirección del separador | string  |          horizontal / vertical           |    horizontal     |
+| content-position      | personaliza el contenido en la línea divisoria | String  |  left / right / center  |  center |
\ No newline at end of file
diff --git a/examples/docs/es/drawer.md b/examples/docs/es/drawer.md
new file mode 100644
index 00000000000..cd4b0ff5698
--- /dev/null
+++ b/examples/docs/es/drawer.md
@@ -0,0 +1,305 @@
+## Drawer
+
+A veces, `Dialog` no siempre satisface nuestros requisitos, digamos que tiene un formulario masivo, o necesita espacio para mostrar algo como `terminos & condiciones`, `Drawer` tiene una API casi idéntica a `Dialog`, pero introduce una experiencia de usuario diferente.
+
+### Uso básico
+
+Llamada de un drawer temporal, desde varias direcciones
+
+:::demo Debe establecer `visible` para `Drawer` como lo hace `Dialog` para controlar la visibilidad. `visible` es del tipo `boolean`. `Drawer` tiene partes: `title` & `body`, el `title` es un slot con nombre, también puede establecer el título a través de un atributo llamado `title`, por defecto a una cadena vacía, la parte `body` es el área principal de `Drawer`, que contiene contenido definido por el usuario. Al abrir, `Drawer` se expande desde la **esquina derecha a la izquierda** cuyo tamaño es **30%** de la ventana del navegador por defecto. Puede cambiar ese comportamiento predeterminado estableciendo los atributos `direction` y `size`. Este caso de demostración también muestra cómo utilizar la API `before-close`, consulte la sección Atributos para obtener más detalles.
+
+```html
+<el-radio-group v-model="direction">
+  <el-radio label="ltr">left to right</el-radio>
+  <el-radio label="rtl">right to left</el-radio>
+  <el-radio label="ttb">top to bottom</el-radio>
+  <el-radio label="btt">bottom to top</el-radio>
+</el-radio-group>
+
+<el-button @click="drawer = true" type="primary" style="margin-left: 16px;">
+  open
+</el-button>
+
+<el-drawer
+  title="I am the title"
+  :visible.sync="drawer"
+  :direction="direction"
+  :before-close="handleClose">
+  <span>Hi, there!</span>
+</el-drawer>
+
+<script>
+  export default {
+    data() {
+      return {
+        drawer: false,
+        direction: 'rtl',
+      };
+    },
+    methods: {
+      handleClose(done) {
+        this.$confirm('Are you sure you want to close this?')
+          .then(_ => {
+            done();
+          })
+          .catch(_ => {});
+      }
+    }
+  };
+</script>
+```
+:::
+
+### No Title
+
+When you no longer need a title, you can remove title from drawer.
+
+:::demo Set the `withHeader` attribute to **false**, you can remove the title from drawer, thus your drawer can have more space on screen. If you want to be accessible, make sure to set the `title` attribute.
+
+```html
+<el-button @click="drawer = true" type="primary" style="margin-left: 16px;">
+  open
+</el-button>
+
+<el-drawer
+  title="I am the title"
+  :visible.sync="drawer"
+  :with-header="false">
+  <span>Hi there!</span>
+</el-drawer>
+
+<script>
+  export default {
+    data() {
+      return {
+        drawer: false,
+      };
+    }
+  };
+</script>
+```
+:::
+
+### Personalizar el contenido
+
+Al igual que `Dialog`, `Drawer` puede hacer muchas interacciones diversas.
+
+:::demo
+
+```html
+<el-button type="text" @click="table = true">Open Drawer with nested table</el-button>
+<el-button type="text" @click="dialog = true">Open Drawer with nested form</el-button>
+<el-drawer
+  title="I have a nested table inside!"
+  :visible.sync="table"
+  direction="rtl"
+  size="50%">
+   <el-table :data="gridData">
+      <el-table-column property="date" label="Date" width="150"></el-table-column>
+      <el-table-column property="name" label="Name" width="200"></el-table-column>
+      <el-table-column property="address" label="Address"></el-table-column>
+    </el-table>
+</el-drawer>
+
+<el-drawer
+  title="I have a nested form inside!"
+  :before-close="handleClose"
+  :visible.sync="dialog"
+  direction="ltr"
+  custom-class="demo-drawer"
+  ref="drawer"
+  >
+  <div class="demo-drawer__content">
+    <el-form :model="form">
+      <el-form-item label="Name" :label-width="formLabelWidth">
+        <el-input v-model="form.name" autocomplete="off"></el-input>
+      </el-form-item>
+      <el-form-item label="Area" :label-width="formLabelWidth">
+        <el-select v-model="form.region" placeholder="Please select activity area">
+          <el-option label="Area1" value="shanghai"></el-option>
+          <el-option label="Area2" value="beijing"></el-option>
+        </el-select>
+      </el-form-item>
+    </el-form>
+    <div class="demo-drawer__footer">
+      <el-button @click="cancelForm">Cancel</el-button>
+      <el-button type="primary" @click="$refs.drawer.closeDrawer()" :loading="loading">{{ loading ? 'Submitting ...' : 'Submit' }}</el-button>
+    </div>
+  </div>
+</el-drawer>
+
+<script>
+export default {
+  data() {
+    return {
+      table: false,
+      dialog: false,
+      loading: false,
+      gridData: [{
+        date: '2016-05-02',
+        name: 'Peter Parker',
+        address: 'Queens, New York City'
+      }, {
+        date: '2016-05-04',
+        name: 'Peter Parker',
+        address: 'Queens, New York City'
+      }, {
+        date: '2016-05-01',
+        name: 'Peter Parker',
+        address: 'Queens, New York City'
+      }, {
+        date: '2016-05-03',
+        name: 'Peter Parker',
+        address: 'Queens, New York City'
+      }],
+      form: {
+        name: '',
+        region: '',
+        date1: '',
+        date2: '',
+        delivery: false,
+        type: [],
+        resource: '',
+        desc: ''
+      },
+      formLabelWidth: '80px',
+      timer: null,
+    };
+  },
+  methods: {
+    handleClose(done) {
+      if (this.loading) {
+        return;
+      }
+      this.$confirm('Do you want to submit?')
+        .then(_ => {
+          this.loading = true;
+          this.timer = setTimeout(() => {
+            done();
+            // animation takes time
+            setTimeout(() => {
+              this.loading = false;
+            }, 400);
+          }, 2000);
+        })
+        .catch(_ => {});
+    },
+    cancelForm() {
+      this.loading = false;
+      this.dialog = false;
+      clearTimeout(this.timer);
+    }
+  }
+}
+</script>
+```
+:::
+
+### Drawer anidados
+
+También puede tener varias capas de `Drawer` al igual que con `Dialog`.
+:::demo Si necesita varios drawer en diferentes capas, debe establecer el atributo `append-to-body` en **true**
+
+```html
+
+<el-button @click="drawer = true" type="primary" style="margin-left: 16px;">
+  open
+</el-button>
+
+<el-drawer
+  title="I'm outer Drawer"
+  :visible.sync="drawer"
+  size="50%">
+  <div>
+   <el-button @click="innerDrawer = true">Click me!</el-button>
+   <el-drawer
+     title="I'm inner Drawer"
+     :append-to-body="true"
+     :before-close="handleClose"
+     :visible.sync="innerDrawer">
+     <p>_(:зゝ∠)_</p>
+   </el-drawer>
+  </div>
+</el-drawer>
+
+<script>
+  export default {
+    data() {
+      return {
+        drawer: false,
+        innerDrawer: false,
+      };
+    },
+    methods: {
+      handleClose(done) {
+        this.$confirm('You still have unsaved data, proceed?')
+          .then(_ => {
+            done();
+          })
+          .catch(_ => {});
+      }
+    }
+  };
+</script>
+
+```
+:::
+
+:::tip
+
+El contenido dentro del Drawer debe ser renderizado de forma perezosa, lo que significa que el contenido dentro del Drawer no afectará al rendimiento inicial del renderizado, por lo que cualquier operación DOM debe realizarse a través de `ref' o después de que se emita el evento `open'.
+
+:::
+
+:::tip
+
+El Drawer proporciona una API llamada "destroyOnClose", que es una variable de bandera que indica que debe destruir el contenido hijo dentro del Drawer después de que se haya cerrado. Puede utilizar esta API cuando necesite que su ciclo de vida "mounted" sea llamado cada vez que se abra el Cajón.
+
+:::
+
+:::tip
+
+Si la variable `visible` se gestiona en el almacén de Vuex, el `.sync` no puede funcionar correctamente. En este caso, elimine el modificador `.sync`, escuche los eventos `open` y `close` de Drawer, y envíe mutaciones Vuex para actualizar el valor de esa variable en los manejadores de eventos.
+
+:::
+
+### Atributos de Drawer
+
+| Parámetros | Descripción | Tipo   | Valores aceptados           | Por defecto |
+|---------- |-------------- |---------- |--------------------------------  |-------- |
+| append-to-body | Los controles deberían insertar Drawer en el elemento DocumentBody, los Drawer anidados deben asignar este parámetro a **true** | boolean   | — | false |
+| before-close | Si está configurado, el procedimiento de cierre se detendrá. | function(done), done es un tipo de función que acepta un booleano como parámetro, una llamada hecha con true o sin parámetro abortará el procedimiento de cierre. | — | — |
+| close-on-press-escape | Indica si el Drawer puede cerrarse pulsando ESC | boolean | — | true |
+| custom-class | Nombre extra de clase para  Drawer | string | — | — |
+| destroy-on-close | Indica si los children deben ser destruidos después de cerrar el Drawer. | boolean | - | false |
+| modal | Mostrará una capa de sombra | boolean | — | true |
+| modal-append-to-body | Indica si se debe insertar una capa de sombreado en el elemento DocumentBody | boolean   | — | true |
+| direction | Dirección de apertura del Drawer | Direction | rtl / ltr / ttb / btt | rtl |
+| show-close | Se mostrará el botón de cerrar en la parte superior derecha del Drawer | boolean | — | true |
+| size | Tamaño del Drawer. Si el Drawer está en modo horizontal, afecta a la propiedad width, de lo contrario afecta a la propiedad height, cuando el tamaño es tipo `number`, describe el tamaño por unidad de píxeles; cuando el tamaño es tipo `string`, se debe usar con notación `x%`, de lo contrario se interpretará como unidad de píxeles. | number / string | - | '30%' |
+| title | El título del Drawer, también se puede establecer por slot con nombre, las descripciones detalladas se pueden encontrar en el formulario de slot. | string | — | — |
+| visible | Si se muestra el Drawer, también soporta la notación `.sync` | boolean | — | false |
+| wrapperClosable | Indica si el usuario puede cerrar el Drawer haciendo clic en la capa de sombreado. | boolean | - | true |
+| withHeader | Flag that controls the header section's existance, default to true, when withHeader set to false, both `title attribute` and `title slot` won't work | boolean | - | true |
+
+### Drawer Slot's
+
+| Nombre | Descripción |
+|------|--------|
+| — | El contenido del Drawer |
+| title | El titulo de la sección del Drawer |
+
+### Métodos Drawer
+
+| Nombre | Descripción |
+| ---- | ---  |
+| closeDrawer | Para cerrar el Drawer, este método llamará `before-close`. |
+
+### Eventos Drawer
+
+| Nombre | Descripción | Parámetros |
+|---------- |-------- |---------- |
+| open  | Se activa antes de que comience la animación de apertura del Drawer. | — |
+| opened  | Se activa cuando finaliza la animación de apertura del Drawer. | — |
+| close  | Se activa antes de que comience la animación de cierre del Drawer. | — |
+| closed | Se activa después de que finaliza la animación de cierre del Drawer. | — |
diff --git a/examples/docs/es/dropdown.md b/examples/docs/es/dropdown.md
index f1d87f17656..f8efc5fa926 100644
--- a/examples/docs/es/dropdown.md
+++ b/examples/docs/es/dropdown.md
@@ -1,55 +1,3 @@
-<style>
-  .demo-box {
-    .el-dropdown {
-      vertical-align: top;
-    
-      & + .el-dropdown {
-        margin-left: 15px;
-      }
-    }
-    .el-dropdown-link {
-      cursor: pointer;
-      color: #409EFF;
-    }
-    .el-icon-arrow-down {
-      font-size: 12px;
-    }
-  }
-
-  .block-col-2 {
-    margin: -24px;
-
-    .el-col {
-      padding: 30px 0;
-      text-align: center;
-      border-right: 1px solid #eff2f6;
-    
-      &:last-child {
-        border-right: 0;
-      }
-    }
-  }
-
- .demo-dropdown .demonstration {
-   display: block;
-   color: #8492a6;
-   font-size: 14px;
-   margin-bottom: 20px;
- }
-</style>
-
-<script>
-  export default {
-    methods: {
-      handleClick() {
-        alert('button click');
-      },
-      handleCommand(command) {
-        this.$message('click on item ' + command);
-      }
-    }
-  }
-</script>
 ## Dropdown
 Menú conmutable para visualizar listas de enlaces y acciones.
 
@@ -75,7 +23,7 @@ Pase el ratón por el menú desplegable para desplegarlo y obtener más acciones
 <style>
   .el-dropdown-link {
     cursor: pointer;
-    color: #409EFF;
+    color: #2460e0;
   }
   .el-icon-arrow-down {
     font-size: 12px;
@@ -155,11 +103,11 @@ Haga clic en el elemento detonante o sobre él.
         Dropdown List<i class="el-icon-arrow-down el-icon--right"></i>
       </span>
       <el-dropdown-menu slot="dropdown">
-        <el-dropdown-item>Action 1</el-dropdown-item>
-        <el-dropdown-item>Action 2</el-dropdown-item>
-        <el-dropdown-item>Action 3</el-dropdown-item>
-        <el-dropdown-item>Action 4</el-dropdown-item>
-        <el-dropdown-item>Action 5</el-dropdown-item>
+        <el-dropdown-item icon="el-icon-plus">Action 1</el-dropdown-item>
+        <el-dropdown-item icon="el-icon-circle-plus">Action 2</el-dropdown-item>
+        <el-dropdown-item icon="el-icon-circle-plus-outline">Action 3</el-dropdown-item>
+        <el-dropdown-item icon="el-icon-check">Action 4</el-dropdown-item>
+        <el-dropdown-item icon="el-icon-circle-check">Action 5</el-dropdown-item>
       </el-dropdown-menu>
     </el-dropdown>
   </el-col>
@@ -170,11 +118,11 @@ Haga clic en el elemento detonante o sobre él.
         Dropdown List<i class="el-icon-arrow-down el-icon--right"></i>
       </span>
       <el-dropdown-menu slot="dropdown">
-        <el-dropdown-item>Action 1</el-dropdown-item>
-        <el-dropdown-item>Action 2</el-dropdown-item>
-        <el-dropdown-item>Action 3</el-dropdown-item>
-        <el-dropdown-item>Action 4</el-dropdown-item>
-        <el-dropdown-item>Action 5</el-dropdown-item>
+        <el-dropdown-item icon="el-icon-plus">Action 1</el-dropdown-item>
+        <el-dropdown-item icon="el-icon-circle-plus">Action 2</el-dropdown-item>
+        <el-dropdown-item icon="el-icon-circle-plus-outline">Action 3</el-dropdown-item>
+        <el-dropdown-item icon="el-icon-check">Action 4</el-dropdown-item>
+        <el-dropdown-item icon="el-icon-circle-check">Action 5</el-dropdown-item>
       </el-dropdown-menu>
     </el-dropdown>
   </el-col>
@@ -183,7 +131,7 @@ Haga clic en el elemento detonante o sobre él.
 <style>
   .el-dropdown-link {
     cursor: pointer;
-    color: #409EFF;
+    color: #2460e0;
   }
   .el-icon-arrow-down {
     font-size: 12px;
@@ -221,7 +169,7 @@ Use `hide-on-click` para definir si el menú se cierra al hacer clic.
 <style>
   .el-dropdown-link {
     cursor: pointer;
-    color: #409EFF;
+    color: #2460e0;
   }
   .el-icon-arrow-down {
     font-size: 12px;
@@ -252,7 +200,7 @@ Al hacer clic en cada elemento desplegable se detona un evento cuyo parámetro e
 <style>
   .el-dropdown-link {
     cursor: pointer;
-    color: #409EFF;
+    color: #2460e0;
   }
   .el-icon-arrow-down {
     font-size: 12px;
@@ -332,13 +280,14 @@ Además del tamaño predeterminado, el componente Dropdown proporciona tres tama
 | hide-on-click | si se oculta el menú después de hacer clic en el elemento | boolean | —                                        | true        |
 | show-timeout  | Tiempo de retardo antes de mostrar un dropdown (solamente trabaja cuando se dispara `hover`) | number  | —                                        | 250         |
 | hide-timeout  | Tiempo de retardo antes de ocultar un dropdown (solamente trabaja cuando se dispara `hover`) | number  | —                                        | 150         |
+| tabindex      | [tabindex](https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/tabindex) de Dropdown | number              |          —         | 0           |
 
 ### Dropdown Slots
 
 | Nombre | Descripción |
 |------|--------|
-| — | content of Dropdown. Notice: Must be a valid html dom element (ex. `<span>, <button> etc.`) or `el-component`, to attach the trigger listener  |
-| dropdown | content of the Dropdown Menu, usually a `<el-dropdown-menu>` element |
+| — | contenido del Dropdown. Aviso: Debe ser un elemento html dom válido (ej. `<span>, <button>` etc.) o `el-component`, para adjuntar el listener trigger |
+| dropdown | contenido del menu Dropdown, normalmente es un elemento `<el-dropdown-menu>` |
 
 ### Dropdown Eventos
 | Nombre         | Descripción                              | Parametros                               |
@@ -353,3 +302,4 @@ Además del tamaño predeterminado, el componente Dropdown proporciona tres tama
 | command  | un comando que se enviará al `command` callback del Dropdown | string/number/object | —                 | —           |
 | disabled | si el elemento está desactivado          | boolean              | —                 | false       |
 | divided  | si se visualiza un divisor               | boolean              | —                 | false       |
+| icon     | nombre de la clase del icono             | string               | —                 | —           |
diff --git a/examples/docs/es/edit-table.md b/examples/docs/es/edit-table.md
new file mode 100644
index 00000000000..0b99bde7fc7
--- /dev/null
+++ b/examples/docs/es/edit-table.md
@@ -0,0 +1 @@
+## EditTable
diff --git a/examples/docs/es/empty.md b/examples/docs/es/empty.md
new file mode 100644
index 00000000000..86e90e45463
--- /dev/null
+++ b/examples/docs/es/empty.md
@@ -0,0 +1 @@
+## Empty
diff --git a/examples/docs/es/form.md b/examples/docs/es/form.md
index d3a863389f3..d98729a22b1 100644
--- a/examples/docs/es/form.md
+++ b/examples/docs/es/form.md
@@ -1,250 +1,3 @@
-<script>
-  export default {
-    data() {
-      var checkAge = (rule, value, callback) => {
-        if (!value) {
-          return callback(new Error('Please input the age'));
-        }
-        setTimeout(() => {
-          if (!Number.isInteger(value)) {
-            callback(new Error('Please input digits'));
-          } else {
-            if (value < 18) {
-              callback(new Error('Age must be greater than 18'));
-            } else {
-              callback();
-            }
-          }
-        }, 1000);
-      };
-      var validatePass = (rule, value, callback) => {
-        if (value === '') {
-          callback(new Error('Please input the password'));
-        } else {
-          if (this.ruleForm2.checkPass !== '') {
-            this.$refs.ruleForm2.validateField('checkPass');
-          }
-          callback();
-        }
-      };
-      var validatePass2 = (rule, value, callback) => {
-        if (value === '') {
-          callback(new Error('Please input the password again'));
-        } else if (value !== this.ruleForm2.pass) {
-          callback(new Error('Two inputs don\'t match!'));
-        } else {
-          callback();
-        }
-      };
-      return {
-        form: {
-          name: '',
-          region: '',
-          date1: '',
-          date2: '',
-          delivery: false,
-          type: [],
-          resource: '',
-          desc: ''
-        },
-        sizeForm: {
-          name: '',
-          region: '',
-          date1: '',
-          date2: '',
-          delivery: false,
-          type: [],
-          resource: '',
-          desc: ''
-        },
-        formInline: {
-          user: '',
-          region: ''
-        },
-        labelPosition: 'right',
-        formLabelAlign: {
-          name: '',
-          region: '',
-          type: ''
-        },
-        ruleForm: {
-          name: '',
-          region: '',
-          date1: '',
-          date2: '',
-          delivery: false,
-          type: [],
-          resource: '',
-          desc: ''
-        },
-        ruleForm2: {
-          pass: '',
-          checkPass: '',
-          age: ''
-        },
-        formLabelWidth: '80px',
-        options: [
-        ],
-        rules: {
-          name: [
-            { required: true, message: 'Please input Activity name', trigger: 'blur' },
-            { min: 3, max: 5, message: 'Length should be 3 to 5', trigger: 'blur' }
-          ],
-          region: [
-            { required: true, message: 'Please select Activity zone', trigger: 'change' }
-          ],
-          date1: [
-            { type: 'date', required: true, message: 'Please pick a date', trigger: 'change' }
-          ],
-          date2: [
-            { type: 'date', required: true, message: 'Please pick a time', trigger: 'change' }
-          ],
-          type: [
-            { type: 'array', required: true, message: 'Please select at least one activity type', trigger: 'change' }
-          ],
-          resource: [
-            { required: true, message: 'Please select activity resource', trigger: 'change' }
-          ],
-          desc: [
-            { required: true, message: 'Please input activity form', trigger: 'blur' }
-          ]
-        },
-        rules2: {
-          pass: [
-            { validator: validatePass, trigger: 'blur' }
-          ],
-          checkPass: [
-            { validator: validatePass2, trigger: 'blur' }
-          ],
-          age: [
-            { validator: checkAge, trigger: 'blur' }
-          ]
-        },
-        dynamicValidateForm: {
-          domains: [{
-            key: Date.now(),
-            value: ''
-          }],
-          email: ''
-        },
-        numberValidateForm: {
-          age: ''
-        }
-      };
-    },
-    methods: {
-      onSubmit() {
-        console.log('submit!');
-      },
-      onRuleFormSubmit() {
-        console.log('onRuleFormSubmit');
-      },
-      submitForm(formName) {
-        this.$refs[formName].validate((valid) => {
-          if (valid) {
-            alert('submit!');
-          } else {
-            console.log('error submit!!');
-            return false;
-          }
-        });
-      },
-      resetForm(formName) {
-        this.$refs[formName].resetFields();
-      },
-      removeDomain(item) {
-        var index = this.dynamicValidateForm.domains.indexOf(item)
-        if (index !== -1) {
-          this.dynamicValidateForm.domains.splice(index, 1)
-        }
-      },
-      addDomain() {
-        this.dynamicValidateForm.domains.push({
-          key: Date.now(),
-          value: ''
-        });
-      }
-    }
-  }
-</script>
-
-<style>
-  .demo-form.demo-es {
-    .el-select .el-input {
-      width: 360px;
-    }
-    .el-form {
-      width: 480px;
-    }
-
-    .line {
-      text-align: center;
-    }
-    
-    .el-checkbox-group {
-      width: 320px;
-      margin: 0;
-      padding: 0;
-      list-style: none;
-    
-      &:after, &:before {
-        content: ' ';
-        display: table;
-      }
-      &:after {
-        clear: both;
-        visibility: hidden;
-        font-size: 0;
-        height: 0;
-      }
-    
-      .el-checkbox {
-        float: left;
-        width: 160px;
-        padding-right: 20px;
-        margin: 0;
-        padding: 0;
-    
-        + .el-checkbox {
-          margin-left: 0;
-        }
-      }
-    }
-    .demo-form-normal {
-      width: 480px;
-    }
-    .demo-form-inline {
-      width: auto;
-    
-      .el-input {
-        width: 150px;
-      }
-      > * {
-        margin-right: 10px;
-      }
-    }
-    .demo-ruleForm {
-      width: 480px;
-    
-      .el-select .el-input {
-        width: 360px;
-      }
-    }
-    .demo-dynamic {
-      width: 500px;
-    
-      .el-input {
-        margin-right: 10px;
-        width: 270px;
-        vertical-align: top;
-      }
-    }
-    .fr {
-      float: right;
-    }
-  }
-</style>
-
 ## Form
 
 Form consiste en `input`, `radio`, `select`, `checkbox`, etcétera. Con el formulario, usted puede recopilar, verificar y enviar datos.
@@ -253,7 +6,7 @@ Form consiste en `input`, `radio`, `select`, `checkbox`, etcétera. Con el formu
 
 Incluye todo tipo de entradas, tales como `input`, `select`, `radio` y `checkbox`.
 
-:::demo En cada componente `form`, necesita un campo `form-item` para que sea el contenedor del item.
+:::demo En cada componente `form`, necesita un campo `form-item` para que sea el contenedor del ítem.
 
 ```html
 <el-form ref="form" :model="form" label-width="120px">
@@ -272,7 +25,7 @@ Incluye todo tipo de entradas, tales como `input`, `select`, `radio` y `checkbox
     </el-col>
     <el-col class="line" :span="2">-</el-col>
     <el-col :span="11">
-      <el-time-picker type="fixed-time" placeholder="Pick a time" v-model="form.date2" style="width: 100%;"></el-time-picker>
+      <el-time-picker placeholder="Pick a time" v-model="form.date2" style="width: 100%;"></el-time-picker>
     </el-col>
   </el-form-item>
   <el-form-item label="Instant delivery">
@@ -445,7 +198,7 @@ El componente `form` le permite verificar sus datos, ayudándole a encontrar y c
     <el-col class="line" :span="2">-</el-col>
     <el-col :span="11">
       <el-form-item prop="date2">
-        <el-time-picker type="fixed-time" placeholder="Pick a time" v-model="ruleForm.date2" style="width: 100%;"></el-time-picker>
+        <el-time-picker placeholder="Pick a time" v-model="ruleForm.date2" style="width: 100%;"></el-time-picker>
       </el-form-item>
     </el-col>
   </el-form-item>
@@ -542,19 +295,19 @@ Este ejemplo muestra cómo personalizar sus propias reglas de validación para f
 :::demo Aquí utilizamos el `status-icon` para reflejar el resultado de la validación como un icono.
 
 ```html
-<el-form :model="ruleForm2" status-icon :rules="rules2" ref="ruleForm2" label-width="120px" class="demo-ruleForm">
+<el-form :model="ruleForm" status-icon :rules="rules" ref="ruleForm" label-width="120px" class="demo-ruleForm">
   <el-form-item label="Password" prop="pass">
-    <el-input type="password" v-model="ruleForm2.pass" autocomplete="off"></el-input>
+    <el-input type="password" v-model="ruleForm.pass" autocomplete="off"></el-input>
   </el-form-item>
   <el-form-item label="Confirm" prop="checkPass">
-    <el-input type="password" v-model="ruleForm2.checkPass" autocomplete="off"></el-input>
+    <el-input type="password" v-model="ruleForm.checkPass" autocomplete="off"></el-input>
   </el-form-item>
   <el-form-item label="Age" prop="age">
-    <el-input v-model.number="ruleForm2.age"></el-input>
+    <el-input v-model.number="ruleForm.age"></el-input>
   </el-form-item>
   <el-form-item>
-    <el-button type="primary" @click="submitForm('ruleForm2')">Submit</el-button>
-    <el-button @click="resetForm('ruleForm2')">Reset</el-button>
+    <el-button type="primary" @click="submitForm('ruleForm')">Submit</el-button>
+    <el-button @click="resetForm('ruleForm')">Reset</el-button>
   </el-form-item>
 </el-form>
 <script>
@@ -580,8 +333,8 @@ Este ejemplo muestra cómo personalizar sus propias reglas de validación para f
         if (value === '') {
           callback(new Error('Please input the password'));
         } else {
-          if (this.ruleForm2.checkPass !== '') {
-            this.$refs.ruleForm2.validateField('checkPass');
+          if (this.ruleForm.checkPass !== '') {
+            this.$refs.ruleForm.validateField('checkPass');
           }
           callback();
         }
@@ -589,19 +342,19 @@ Este ejemplo muestra cómo personalizar sus propias reglas de validación para f
       var validatePass2 = (rule, value, callback) => {
         if (value === '') {
           callback(new Error('Please input the password again'));
-        } else if (value !== this.ruleForm2.pass) {
+        } else if (value !== this.ruleForm.pass) {
           callback(new Error('Two inputs don\'t match!'));
         } else {
           callback();
         }
       };
       return {
-        ruleForm2: {
+        ruleForm: {
           pass: '',
           checkPass: '',
           age: ''
         },
-        rules2: {
+        rules: {
           pass: [
             { validator: validatePass, trigger: 'blur' }
           ],
@@ -635,6 +388,10 @@ Este ejemplo muestra cómo personalizar sus propias reglas de validación para f
 
 :::
 
+:::tip
+Se debe llamar a la función de validación de llamada de retorno personalizada. Ver uso más avanzado en [async-validator](https://github.com/yiminghe/async-validator).
+:::
+
 ### Eliminar o agregar validaciones dinamicamente
 
 :::demo Además de pasar todas las reglas de validación al mismo tiempo en el componente `form`, también puede pasar las reglas de validación o borrar reglas en un único campo de formulario de forma dinámica.
@@ -716,7 +473,7 @@ Este ejemplo muestra cómo personalizar sus propias reglas de validación para f
 
 ### Validación numerica
 
-:::demo La validacion numerica necesita un modificador `.number` añadido en el enlace `v-model` de entrada, sirve para transformar el valor de la cadena al número proporcionado por Vuejs.
+:::demo La validación numérica necesita un modificador `.number` añadido en el enlace `v-model` de entrada, sirve para transformar el valor de la cadena al número proporcionado por Vuejs.
 
 ```html
 <el-form :model="numberValidateForm" ref="numberValidateForm" label-width="100px" class="demo-ruleForm">
@@ -794,7 +551,7 @@ Todos los componentes de un formulario heredan su atributo `size`. De manera sim
     </el-col>
     <el-col class="line" :span="2">-</el-col>
     <el-col :span="11">
-      <el-time-picker type="fixed-time" placeholder="Pick a time" v-model="sizeForm.date2" style="width: 100%;"></el-time-picker>
+      <el-time-picker placeholder="Pick a time" v-model="sizeForm.date2" style="width: 100%;"></el-time-picker>
     </el-col>
   </el-form-item>
   <el-form-item label="Activity type">
@@ -849,41 +606,42 @@ Todos los componentes de un formulario heredan su atributo `size`. De manera sim
 | model                   | Datos del componente                     | object  | —                     | —           |
 | rules                   | Reglas de validación                     | object  | —                     | —           |
 | inline                  | Si el form es inline                     | boolean | —                     | false       |
-| label-position          | Posicion de la etiqueta                  | string  | left / right / top    | right       |
-| label-width             | ancho de la etiqueta, y todos los form items directos descendientes heredarán este valor | string  | —                     | —           |
+| label-position          | Posición de la etiqueta          | string  | left / right / top    | right       |
+| label-width             | anchura de la etiqueta, por ejemplo, "50px". Todos sus elementos de formulario hijo directo heredarán este valor. El valor `auto` está soportado. | string | — | — |
 | label-suffix            | sufijo de la etiqueta                    | string  | —                     | —           |
 | hide-required-asterisk       | si los campos obligatorios deben tener un asterisco rojo (estrella) al lado de sus etiquetas | boolean | — | false |
 | show-message            | si mostrar o no el mensaje de error      | boolean | —                     | true        |
 | inline-message          | si desea visualizar el mensaje de error inline con la posición del form item | boolean | —                     | false       |
 | status-icon             | si desea visualizar un icono que indique el resultado de la validación | boolean | —                     | false       |
-| validate-on-rule-change | si se dispara la validacion cuando el prop `rules` cambia | boolean | —                     | true        |
+| validate-on-rule-change | si se dispara la validación cuando el prop `rules` cambia | boolean | —                     | true        |
 | size                    | el tamaño de los componentes en este form | string  | medium / small / mini | —           |
 | disabled                | si se desactivan todos los componentes del formulario. Si esta en `true` no puede ser cambiado por el prop `disabled` individual de los componentes. | boolean | —                     | false       |
 
 ### Form Metodos
 
-| Metodo        | Descripción                                                                                                                                                                                                                                                                                          | Parametros                                                       |
-| ------------- | ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ---------------------------------------------------------------- |
-| validate      | el método para validar todo el formulario. Recibe una llamada como parametro. Después de la validación, la llamada de retorno se ejecutará con dos parámetros: un booleano que indica si la validación ha pasado, y un objeto que contiene todos los campos que fallaron en la validación. Devuelve una promesa si se omite el return | Function(callback: Function(boolean, object))                    |
-| clearValidate | borra el mensaje de validación para determinados campos. El parámetro es un prop name o un array de props names de los items del formulario cuyos mensajes de validación se eliminarán. Si se omiten, se borrarán todos los mensajes de validación de los campos.                                                                                  | Function(prop: string, callback: Function(errorMessage: string)) |
-| resetFields   | restablece todos los campos y elimina el resultado de validación                                                                                                                                                                                                                                     | —                                                                |
+| Metodo        | Descripción                                                  | Parametros                                                   |
+| ------------- | ------------------------------------------------------------ | ------------------------------------------------------------ |
+| validate      | el método para validar todo el formulario. Recibe una llamada como parámetro. Después de la validación, la llamada de retorno se ejecutará con dos parámetros: un booleano que indica si la validación ha pasado, y un objeto que contiene todos los campos que fallaron en la validación. Devuelve una promesa si se omite el return | Function(callback: Function(boolean, object))                |
+| validateField | validar uno o varios elementos de formulario                 | Function(props: string \| array, callback: Function(errorMessage: string)) |
+| resetFields   | restablece todos los campos y elimina el resultado de validación | —                                                            |
+| clearValidate | borra el mensaje de validación para determinados campos. El parámetro es un prop name o un array de props names de los items del formulario cuyos mensajes de validación se eliminarán. Si se omiten, se borrarán todos los mensajes de validación de los campos. | Function(props: string \| array)                             |
 
 
 ### Form Events
 
 | Nombre   | Descripción                                          | Parametros                                                   |
 | -------- | ---------------------------------------------------- | ------------------------------------------------------------ |
-| validate | se dispara después de validar un item del formulario | la propiedad (`prop name`) nombre del item del form que se esta validando, si la validacion paso o no, y el mensaje de error si existe. |
+| validate | se dispara después de validar un ítem del formulario | la propiedad (`prop name`) nombre del ítem del form que se esta validando, si la validación paso o no, y el mensaje de error si existe. |
 
 ### Form-Item Atributos
 
 | Atributo       | Descripción                                                  | Tipo    | Valores aceptados                           | Por defecto |
 | -------------- | ------------------------------------------------------------ | ------- | ------------------------------------------- | ----------- |
-| prop           | un clave del modelo. En el uso del método validate and resetFields, el atributo es obligatorio. | string  | Clave del modelo que se ha pasado a  `form` |             |
+| prop           | un clave del modelo. En el uso del método `validate` y `resetFields`, el atributo es obligatorio. | string  | Clave del modelo que se ha pasado a  `form` |             |
 | label          | etiqueta                                                     | string  | —                                           | —           |
-| label-width    | ancho de la etiqueta, e.g. '50px'                            | string  | —                                           | —           |
+| label-width    | ancho de la etiqueta, Ejemplo: '50px'. El valor `auto` esta soportado | string  | —                                           | —           |
 | required       | si el campo es obligatorio o no, estará determinado por las reglas de validación si se omite. | boolean | —                                           | false       |
-| rules          | reglas de validacion del form                                | object  | —                                           | —           |
+| rules          | reglas de validación del form                                | object  | —                                           | —           |
 | error          | mensaje de error de campo, establezca su valor y el campo validará el error y mostrará este mensaje inmediatamente. | string  | —                                           | —           |
 | show-message   | si mostrar o no el mensaje de error                          | boolean | —                                           | true        |
 | inline-message | mensaje de validación estilo inline                          | boolean | —                                           | false       |
@@ -898,13 +656,13 @@ Todos los componentes de un formulario heredan su atributo `size`. De manera sim
 
 ### Form-Item Scoped Slot
 
-| Name  | Description                                                                                        |
-| ----- | -------------------------------------------------------------------------------------------------- |
-| error | Contenido personalizado para mostrar el mensaje de validacion. El parametro del scope es { error } |
+| Name  | Description                                                  |
+| ----- | ------------------------------------------------------------ |
+| error | Contenido personalizado para mostrar el mensaje de validación. El parámetro del scope es { error } |
 
 ### Form-Item Metodo
 
 | Metodo        | Descripción                                                 | Parametros |
 | ------------- | ----------------------------------------------------------- | ---------- |
 | resetField    | restablecer campo actual y eliminar resultado de validación | —          |
-| clearValidate | elimina el estado de la validacion de un campo              | -          |
+| clearValidate | elimina el estado de la validación de un campo              | -          |
diff --git a/examples/docs/es/i18n.md b/examples/docs/es/i18n.md
index effa50d7164..4314c4f3a23 100644
--- a/examples/docs/es/i18n.md
+++ b/examples/docs/es/i18n.md
@@ -4,8 +4,8 @@ El idioma predeterminado de Element es el chino. Si se desea utilizar otro idiom
 
 ```javascript
 import Vue from 'vue'
-import ElementUI from 'element-ui'
-import locale from 'element-ui/lib/locale/lang/en'
+import ElementUI from '@femessage/element-ui'
+import locale from '@femessage/element-ui/lib/locale/lang/en'
 
 Vue.use(ElementUI, { locale })
 ```
@@ -14,9 +14,9 @@ O si está importando Element a petición:
 
 ```javascript
 import Vue from 'vue'
-import { Button, Select } from 'element-ui'
-import lang from 'element-ui/lib/locale/lang/en'
-import locale from 'element-ui/lib/locale'
+import { Button, Select } from '@femessage/element-ui'
+import lang from '@femessage/element-ui/lib/locale/lang/en'
+import locale from '@femessage/element-ui/lib/locale'
 
 // configure language
 locale.use(lang)
@@ -32,21 +32,21 @@ webpack.config.js
 ```javascript
 {
   plugins: [
-    new webpack.NormalModuleReplacementPlugin(/element-ui[\/\\]lib[\/\\]locale[\/\\]lang[\/\\]zh-CN/, 'element-ui/lib/locale/lang/en')
+    new webpack.NormalModuleReplacementPlugin(/@femessage[\/\\]element-ui[\/\\]lib[\/\\]locale[\/\\]lang[\/\\]zh-CN/, '@femessage/element-ui/lib/locale/lang/en')
   ]
 }
 ```
 
 ## Compatible con `vue-i18n@5.x`
 
-Element es compatible con [vue-i18n@5.x](https://github.com/kazupon/vue-i18n), lo que facilita aún más la conmutación multilingüe.
+Element es compatible con [vue-i18n@5.x](https://github.com/kazupon/vue-i18n), lo que facilita aún más la conmutación multilenguaje.
 
 ```javascript
 import Vue from 'vue'
 import VueI18n from 'vue-i18n'
-import Element from 'element-ui'
-import enLocale from 'element-ui/lib/locale/lang/en'
-import zhLocale from 'element-ui/lib/locale/lang/zh-CN'
+import Element from '@femessage/element-ui'
+import enLocale from '@femessage/element-ui/lib/locale/lang/en'
+import zhLocale from '@femessage/element-ui/lib/locale/lang/zh-CN'
 
 Vue.use(VueI18n)
 Vue.use(Element)
@@ -61,9 +61,9 @@ Es posible que Element no sea compatible con otros plugins i18n que no sean vue-
 
 ```javascript
 import Vue from 'vue'
-import Element from 'element-ui'
-import enLocale from 'element-ui/lib/locale/lang/en'
-import zhLocale from 'element-ui/lib/locale/lang/zh-CN'
+import Element from '@femessage/element-ui'
+import enLocale from '@femessage/element-ui/lib/locale/lang/en'
+import zhLocale from '@femessage/element-ui/lib/locale/lang/zh-CN'
 
 Vue.use(Element, {
   i18n: function (path, options) {
@@ -78,10 +78,10 @@ Necesita manejarlo manualmente para ser compatible con `6.x`.
 
 ```javascript
 import Vue from 'vue'
-import Element from 'element-ui'
+import Element from '@femessage/element-ui'
 import VueI18n from 'vue-i18n'
-import enLocale from 'element-ui/lib/locale/lang/en'
-import zhLocale from 'element-ui/lib/locale/lang/zh-CN'
+import enLocale from '@femessage/element-ui/lib/locale/lang/en'
+import zhLocale from '@femessage/element-ui/lib/locale/lang/zh-CN'
 
 Vue.use(VueI18n)
 
@@ -115,9 +115,9 @@ import Vue from 'vue'
 import DatePicker from 'element/lib/date-picker'
 import VueI18n from 'vue-i18n'
 
-import enLocale from 'element-ui/lib/locale/lang/en'
-import zhLocale from 'element-ui/lib/locale/lang/zh-CN'
-import ElementLocale from 'element-ui/lib/locale'
+import enLocale from '@femessage/element-ui/lib/locale/lang/en'
+import zhLocale from '@femessage/element-ui/lib/locale/lang/zh-CN'
+import ElementLocale from '@femessage/element-ui/lib/locale'
 
 Vue.use(VueI18n)
 Vue.use(DatePicker)
@@ -145,8 +145,8 @@ ElementLocale.i18n((key, value) => i18n.t(key, value))
 
 ```html
 <script src="//unpkg.com/vue"></script>
-<script src="//unpkg.com/element-ui"></script>
-<script src="//unpkg.com/element-ui/lib/umd/locale/en.js"></script>
+<script src="//unpkg.com/@femessage/element-ui"></script>
+<script src="//unpkg.com/@femessage/element-ui/lib/umd/locale/en.js"></script>
 
 <script>
   ELEMENT.locale(ELEMENT.lang.en)
@@ -158,9 +158,9 @@ Compatible con `vue-i18n`
 ```html
 <script src="//unpkg.com/vue"></script>
 <script src="//unpkg.com/vue-i18n/dist/vue-i18n.js"></script>
-<script src="//unpkg.com/element-ui"></script>
-<script src="//unpkg.com/element-ui/lib/umd/locale/zh-CN.js"></script>
-<script src="//unpkg.com/element-ui/lib/umd/locale/en.js"></script>
+<script src="//unpkg.com/@femessage/element-ui"></script>
+<script src="//unpkg.com/@femessage/element-ui/lib/umd/locale/zh-CN.js"></script>
+<script src="//unpkg.com/@femessage/element-ui/lib/umd/locale/en.js"></script>
 
 <script>
   Vue.locale('en', ELEMENT.lang.en)
@@ -217,6 +217,10 @@ Actualmente Element está disponible en los siguientes idiomas:
   <li>Khmer (km)</li>
   <li>Serbian (sr)</li>
   <li>Vasco (eu)</li>
+  <li>Kirguizstán (kg)</li>
+  <li>Armenio (hy)</li>
+  <li>Croatian (hr)</li>
+  <li>Esperanto (eo)</li>
 </ul>
 
-Si su idioma de destino no está incluido, puede contribuir: simplemente añada  [aqui](https://github.com/ElemeFE/element/tree/dev/src/locale/lang) otra configuración de idioma y cree un pull request.
\ No newline at end of file
+Si su idioma de destino no está incluido, puede contribuir: simplemente añada  [aqui](https://github.com/femessage/element/tree/dev/src/locale/lang) otra configuración de idioma y cree un pull request.
diff --git a/examples/docs/es/icon-checkbox.md b/examples/docs/es/icon-checkbox.md
new file mode 100644
index 00000000000..232335c8ee7
--- /dev/null
+++ b/examples/docs/es/icon-checkbox.md
@@ -0,0 +1 @@
+## IconCheckbox
diff --git a/examples/docs/es/icon.md b/examples/docs/es/icon.md
index 497adcc50c6..e2e251462c2 100644
--- a/examples/docs/es/icon.md
+++ b/examples/docs/es/icon.md
@@ -1,76 +1,3 @@
-<script>
-  var iconList = require('examples/icon.json');
-
-  export default {
-    data() {
-      return {
-        icons: iconList
-      };
-    }
-  }
-</script>
-
-<style>
-  .demo-icon .source > i {
-    color: #606266;
-    margin: 0 20px;
-    font-size: 1.5em;
-    vertical-align: middle;
-  }
-
-  .demo-icon .source > button {
-    margin: 0 20px;
-  }
-
-  .page-component .content > ul.icon-list {
-    overflow: hidden;
-    list-style: none;
-    padding: 0;
-    border: solid 1px #eaeefb;
-    border-radius: 4px;
-  }
-  .icon-list li {
-    float: left;
-    width: 16.66%;
-    text-align: center;
-    height: 120px;
-    line-height: 120px;
-    color: #666;
-    font-size: 13px;
-    transition: color .15s linear;
-    
-    border-right: 1px solid #eee;
-    border-bottom: 1px solid #eee;
-    margin-right: -1px;
-    margin-bottom: -1px;
-    
-    @utils-vertical-center;
-    
-    span {
-      display: inline-block;
-      line-height: normal;
-      vertical-align: middle;
-      font-family: 'Helvetica Neue',Helvetica,'PingFang SC','Hiragino Sans GB','Microsoft YaHei',SimSun,sans-serif;
-      color: #99a9bf;
-    }
-    i {
-      display: block;
-      font-size: 32px;
-      margin-bottom: 15px;
-      color: #606266;
-    }
-    .icon-name {
-      display: inline-block;
-      padding: 0 3px;
-      height: 1em;
-      color: #606266;
-    }
-    &:hover {
-      color: rgb(92, 182, 255);
-    }
-  }
-</style>
-
 ## Icon
 
 Element proporciona un conjunto de iconos propios.
@@ -93,7 +20,7 @@ Simplemente asigna el nombre de la clase a `el-icon-iconName`.
 ### Iconos
 
 <ul class="icon-list">
-  <li v-for="name in icons" :key="name">
+  <li v-for="name in $icon" :key="name">
     <span>
       <i :class="'el-icon-' + name"></i>
       <span class="icon-name">{{'el-icon-' + name}}</span>
diff --git a/examples/docs/es/image.md b/examples/docs/es/image.md
new file mode 100644
index 00000000000..7d8d78d7627
--- /dev/null
+++ b/examples/docs/es/image.md
@@ -0,0 +1,165 @@
+## Image
+Además de las características nativas de img, soporte de carga perezosa, marcador de posición personalizado y fallo de carga, etc.
+
+### Uso básico
+
+:::demo Indica cómo se debe cambiar el tamaño de la imagen para que se ajuste a su contenedor por ajuste, igual que el ajuste de objeto nativo. [object-fit](https://developer.mozilla.org/es/docs/Web/CSS/object-fit)。
+
+```html
+<div class="demo-image">
+  <div class="block" v-for="fit in fits" :key="fit">
+    <span class="demonstration">{{ fit }}</span>
+    <el-image
+      style="width: 100px; height: 100px"
+      :src="url"
+      :fit="fit"></el-image>
+  </div>
+</div>
+
+<script>
+  export default {
+    data() {
+      return {
+        fits: ['fill', 'contain', 'cover', 'none', 'scale-down'],
+        url: 'https://fuss10.elemecdn.com/e/5d/4a731a90594a4af544c0c25941171jpeg.jpeg'
+      }
+    }
+  }
+</script>
+```
+:::
+
+### Placeholder
+
+:::demo Personalice el placeholder del contenido mientras la imagen aun no ha sido cargada vía `slot = placeholder`
+```html
+<div class="demo-image__placeholder">
+  <div class="block">
+    <span class="demonstration">Default</span>
+    <el-image :src="src"></el-image>
+  </div>
+  <div class="block">
+    <span class="demonstration">Custom</span>
+    <el-image :src="src">
+      <div slot="placeholder" class="image-slot">
+        Loading<span class="dot">...</span>
+      </div>
+    </el-image>
+  </div>
+</div>
+
+<script>
+  export default {
+    data() {
+      return {
+        src: 'https://cube.elemecdn.com/6/94/4d3ea53c084bad6931a56d5158a48jpeg.jpeg'
+      }
+    }
+  }
+</script>
+```
+:::
+
+### Fallo de carga
+
+:::demo Personalice el contenido cuando ocurra algún error al cargar la imagen vía `slot = error`
+```html
+<div class="demo-image__error">
+  <div class="block">
+    <span class="demonstration">Default</span>
+    <el-image></el-image>
+  </div>
+  <div class="block">
+    <span class="demonstration">Custom</span>
+    <el-image>
+      <div slot="error" class="image-slot">
+        <i class="el-icon-picture-outline"></i>
+      </div>
+    </el-image>
+  </div>
+</div>
+```
+:::
+
+### Lazy Load
+
+:::demo Use lazy load vía `lazy = true`. La imagen se cargará hasta que se desplace a la vista cuando esté configurada. Puede indicar el contenedor de scroll que añade el oyente de scroll vía `scroll-container`. Si no está definido, será el contenedor padre más cercano cuya propiedad overflow es auto o scroll.
+
+```html
+<div class="demo-image__lazy">
+  <el-image v-for="url in urls" :key="url" :src="url" lazy></el-image>
+</div>
+
+<script>
+  export default {
+    data() {
+      return {
+        urls: [
+          'https://fuss10.elemecdn.com/a/3f/3302e58f9a181d2509f3dc0fa68b0jpeg.jpeg',
+          'https://fuss10.elemecdn.com/1/34/19aa98b1fcb2781c4fba33d850549jpeg.jpeg',
+          'https://fuss10.elemecdn.com/0/6f/e35ff375812e6b0020b6b4e8f9583jpeg.jpeg',
+          'https://fuss10.elemecdn.com/9/bb/e27858e973f5d7d3904835f46abbdjpeg.jpeg',
+          'https://fuss10.elemecdn.com/d/e6/c4d93a3805b3ce3f323f7974e6f78jpeg.jpeg',
+          'https://fuss10.elemecdn.com/3/28/bbf893f792f03a54408b3b7a7ebf0jpeg.jpeg',
+          'https://fuss10.elemecdn.com/2/11/6535bcfb26e4c79b48ddde44f4b6fjpeg.jpeg'
+        ]
+      }
+    }
+  }
+</script>
+```
+:::
+
+### Vista previa de la imagen
+
+:::demo permitir una vista previa grande de la imagen configurando la prop `previewSrcList`.
+```html
+<div class="demo-image__preview">
+  <el-image 
+    style="width: 100px; height: 100px"
+    :src="url" 
+    :preview-src-list="srcList">
+  </el-image>
+</div>
+
+<script>
+  export default {
+    data() {
+      return {
+        url: 'https://fuss10.elemecdn.com/e/5d/4a731a90594a4af544c0c25941171jpeg.jpeg',
+        srcList: [
+          'https://fuss10.elemecdn.com/8/27/f01c15bb73e1ef3793e64e6b7bbccjpeg.jpeg',
+          'https://fuss10.elemecdn.com/1/8e/aeffeb4de74e2fde4bd74fc7b4486jpeg.jpeg'
+        ]
+      }
+    }
+  }
+</script>
+```
+:::
+
+### Atributos
+| Atributo | Descripción | Tipo | Valores aceptados | Por defecto |
+|---------- |-------- |---------- |-------------  |-------- |
+| src | origen de la imagen, igual que en nativo | string | — | - |
+| fit | Indica como la imagen debe adaptarse al contenedor, lo mismo que [object-fit](https://developer.mozilla.org/es/docs/Web/CSS/object-fit) | string | fill / contain / cover / none / scale-down | - |
+| alt | alt nativo | string | - | - |
+| referrer-policy | referrerPolicy nativo | string | - | - |
+| lazy | si se usara lazy load | boolean | — | false |
+| scroll-container | El contenedor para añadir el scroll listener cuando se utiliza lazy load | string / HTMLElement | — | El contenedor padre más cercano cuya propiedad de desbordamiento es auto o scroll |
+| preview-src-list | permitir una vista previa grande de la imagen | Array | — | - |
+| z-index | establecer el z-index de la vista previa de la imagen | Number | — | 2000 |
+
+### Eventos
+| Nombre del evento | Descripción | Parámetros |
+|---------- |-------- |---------- |
+| load | Igual que el load nativo | (e: Event) |
+| error | Igual que el error nativo | (e: Error) |
+
+### Slots
+| Nombre del slot | Descripción |
+|---------|-------------|
+| placeholder | Se activa cuando la imagen se carga |
+| error | Se activa cuando la carga de la imagen falla |
+
+
diff --git a/examples/docs/es/infiniteScroll.md b/examples/docs/es/infiniteScroll.md
new file mode 100644
index 00000000000..8b121c8fc47
--- /dev/null
+++ b/examples/docs/es/infiniteScroll.md
@@ -0,0 +1,88 @@
+## InfiniteScroll
+
+Cargar más datos mientras se llega al final de la página
+
+### Uso básico
+Añada `v-infinite-scroll` a la lista para ejecutar automáticamente el método de carga cuando se desplace hacia abajo.
+:::demo
+
+```html
+<template>
+  <ul class="infinite-list" v-infinite-scroll="load" style="overflow:auto">
+    <li v-for="i in count" class="infinite-list-item">{{ i }}</li>
+  </ul>
+</template>
+
+<script>
+  export default {
+    data () {
+      return {
+        count: 0
+      }
+    },
+    methods: {
+      load () {
+        this.count += 2
+      }
+    }
+  }
+</script>
+```
+:::
+
+### Deshabilite Loading
+
+:::demo
+```html
+<template>
+  <div class="infinite-list-wrapper" style="overflow:auto">
+    <ul
+      class="list"
+      v-infinite-scroll="load"
+      infinite-scroll-disabled="disabled">
+      <li v-for="i in count" class="list-item">{{ i }}</li>
+    </ul>
+    <p v-if="loading">Loading...</p>
+    <p v-if="noMore">No more</p>
+  </div>
+</template>
+
+<script>
+  export default {
+    data () {
+      return {
+        count: 10,
+        loading: false
+      }
+    },
+    computed: {
+      noMore () {
+        return this.count >= 20
+      },
+      disabled () {
+        return this.loading || this.noMore
+      }
+    },
+    methods: {
+      load () {
+        this.loading = true
+        setTimeout(() => {
+          this.count += 2
+          this.loading = false
+        }, 2000)
+      }
+    }
+  }
+</script>
+```
+:::
+
+
+### Atributos
+
+| Atributos | Descripción | Tipo | Valores aceptados | Por defecto |
+| -------------- | ------------------------------ | --------- | ------------------------------------ | ------- |
+| infinite-scroll-disabled | si esta disabled | boolean      | - |false |
+| infinite-scroll-delay   | retraso en milisegundos | number       |   - |200   |
+| infinite-scroll-distance| distancia de activación (px) | number   |- |0 |
+| infinite-scroll-immediate |Si se debe ejecutar el método de carga inmediatamente, en caso de que el contenido no se pueda rellenar en el estado inicial. | boolean | - |true |
diff --git a/examples/docs/es/input-email.md b/examples/docs/es/input-email.md
new file mode 100644
index 00000000000..b7d6d9f8798
--- /dev/null
+++ b/examples/docs/es/input-email.md
@@ -0,0 +1 @@
+## InputEmail
diff --git a/examples/docs/es/input-id-card.md b/examples/docs/es/input-id-card.md
new file mode 100644
index 00000000000..ab7abe5624d
--- /dev/null
+++ b/examples/docs/es/input-id-card.md
@@ -0,0 +1 @@
+## InputIdCard
diff --git a/examples/docs/es/input-number.md b/examples/docs/es/input-number.md
index e42028d0c32..6bdca96e192 100644
--- a/examples/docs/es/input-number.md
+++ b/examples/docs/es/input-number.md
@@ -1,51 +1,20 @@
-<script>
-  export default {
-    data() {
-      return {
-        num1: 1,
-        num2: 1,
-        num3: 5,
-        num4: 1,
-        num5: 1,
-        num6: 1,
-        num7: 1,
-        num8: 1,
-        num9: 1
-      }
-    },
-    methods: {
-      handleChange(value) {
-        console.log(value);
-      }
-    }
-  };
-</script>
-
-<style>
-  .demo-box.demo-input-number {
-    .el-input-number + .el-input-number {
-      margin-left: 10px;
-    }
-  }
-</style>
-
 ## InputNumber
 
 Input de  valores numéricos con un rango personalizable.
 
 ### Uso básico
 
-:::demo Vincule una variable con `v-model` en el elemento <el-input-number> y estará listo.
+:::demo Vincule una variable con `v-model` en el elemento `<el-input-number>` y estará listo.
 
 ```html
 <template>
-  <el-input-number v-model="num1" @change="handleChange" :min="1" :max="10"></el-input-number>
+  <el-input-number v-model="num" @change="handleChange" :min="1" :max="10"></el-input-number>
 </template>
 <script>
   export default {
     data() {
       return {
-        num1: 1
+        num: 1
       };
     },
     methods: {
@@ -64,13 +33,13 @@ Input de  valores numéricos con un rango personalizable.
 
 ```html
 <template>
-  <el-input-number v-model="num2" :disabled="true"></el-input-number>
+  <el-input-number v-model="num" :disabled="true"></el-input-number>
 </template>
 <script>
   export default {
     data() {
       return {
-        num2: 1
+        num: 1
       }
     }
   };
@@ -86,13 +55,13 @@ Le permite definir el nivel de incremento de los saltos.
 
 ```html
 <template>
-  <el-input-number v-model="num3" :step="2"></el-input-number>
+  <el-input-number v-model="num" :step="2"></el-input-number>
 </template>
 <script>
   export default {
     data() {
       return {
-        num3: 5
+        num: 5
       }
     }
   };
@@ -100,19 +69,39 @@ Le permite definir el nivel de incremento de los saltos.
 ```
 :::
 
-### Precision
+### Step estrictamente
 
-:::demo Add `precision` attribute to set the precision of input value.
+:::demo El atributo `step-strictly` acepta `boolean`. Si este atributo es `true`, el valor de entrada sólo puede ser múltiplo de step.
 
 ```html
 <template>
-  <el-input-number v-model="num9" :precision="2" :step="0.1" :max="10"></el-input-number>
+  <el-input-number v-model="num" :step="2" step-strictly></el-input-number>
 </template>
 <script>
   export default {
     data() {
       return {
-        num9: 1
+        num: 2
+      }
+    }
+  };
+</script>
+```
+:::
+
+### Precisión
+
+:::demo El atributo `precision` aplica presicion al valor del value.
+
+```html
+<template>
+  <el-input-number v-model="num" :precision="2" :step="0.1" :max="10"></el-input-number>
+</template>
+<script>
+  export default {
+    data() {
+      return {
+        num: 1
       }
     }
   };
@@ -122,7 +111,8 @@ Le permite definir el nivel de incremento de los saltos.
 :::
 
 :::tip
-The value of `precision` must be a non negative integer and should not be less than the decimal places of `step`.
+El valor de `precision` debe ser un numero entero positivo que no debe ser inferior a los decimales del `step`.
+
 :::
 
 ### Tamaño
@@ -133,19 +123,19 @@ Utilice el atributo `size` para establecer tamaños adicionales con `medium`, `s
 
 ```html
 <template>
-  <el-input-number v-model="num4"></el-input-number>
-    <el-input-number size="medium" v-model="num5"></el-input-number>
-    <el-input-number size="small" v-model="num6"></el-input-number>
-    <el-input-number size="mini" v-model="num7"></el-input-number>
+  <el-input-number v-model="num1"></el-input-number>
+    <el-input-number size="medium" v-model="num2"></el-input-number>
+    <el-input-number size="small" v-model="num3"></el-input-number>
+    <el-input-number size="mini" v-model="num4"></el-input-number>
 </template>
 <script>
   export default {
     data() {
       return {
-        num4: 1,
-        num5: 1,
-        num6: 1,
-        num7: 1
+        num1: 1,
+        num2: 1,
+        num3: 1,
+        num4: 1
       }
     }
   };
@@ -159,13 +149,13 @@ Utilice el atributo `size` para establecer tamaños adicionales con `medium`, `s
 
 ```html
 <template>
-  <el-input-number v-model="num8" controls-position="right" @change="handleChange" :min="1" :max="10"></el-input-number>
+  <el-input-number v-model="num" controls-position="right" @change="handleChange" :min="1" :max="10"></el-input-number>
 </template>
 <script>
   export default {
     data() {
       return {
-        num8: 1
+        num: 1
       };
     },
     methods: {
@@ -182,10 +172,11 @@ Utilice el atributo `size` para establecer tamaños adicionales con `medium`, `s
 
 | Atributo          | Descripción                              | Tipo    | Valores aceptados | Por defecto |
 | ----------------- | ---------------------------------------- | ------- | ----------------- | ----------- |
-| value             | valor vinculado                          | number  | —                 | —           |
+| value / v-model    | valor vinculado                          | number  | —                 | 0           |
 | min               | el valor mínimo permitido                | number  | —                 | `-Infinity`  |
 | max               | el valor maximo permitido                | number  | —                 | `Infinity`  |
 | step              | incremento (salto)                       | number  | —                 | 1           |
+| step-strictly  | si el valor del input puede ser solo un multiplo de step | number  | —                 | false       |
 | precision         | precisión del valor del input | number  | —                 | —           |
 | size              | tamaño del componente                    | string  | large/small       | —           |
 | disabled          | si el componente esta deshabilitado      | boolean | —                 | false       |
@@ -199,7 +190,7 @@ Utilice el atributo `size` para establecer tamaños adicionales con `medium`, `s
 
 | Nombre | Descripción                              | Parámetros         |
 | ------ | ---------------------------------------- | ------------------ |
-| change | se produce cuando el valor cambia        | value after change |
+| change | se produce cuando el valor cambia        | currentValue, oldValue |
 | blur   | se produce cuando el componente pierde el foco | (event: Event)     |
 | focus  | se produce cuando el componente obtiene el foco | (event: Event)     |
 
diff --git a/examples/docs/es/input-phone.md b/examples/docs/es/input-phone.md
new file mode 100644
index 00000000000..defde569d5b
--- /dev/null
+++ b/examples/docs/es/input-phone.md
@@ -0,0 +1 @@
+## InputPhone
diff --git a/examples/docs/es/input-url.md b/examples/docs/es/input-url.md
new file mode 100644
index 00000000000..2f61fb034ac
--- /dev/null
+++ b/examples/docs/es/input-url.md
@@ -0,0 +1 @@
+## InputUrl
diff --git a/examples/docs/es/input.md b/examples/docs/es/input.md
index 5d632f0c063..b215783bb63 100644
--- a/examples/docs/es/input.md
+++ b/examples/docs/es/input.md
@@ -1,150 +1,14 @@
-<script>
-  export default {
-    data() {
-      return {
-        links: [],
-        input: '',
-        input1: '',
-        input2: '',
-        input21: '',
-        input22: '',
-        input23: '',
-        input3: '',
-        input4: '',
-        input5: '',
-        input6: '',
-        input7: '',
-        input8: '',
-        input9: '',
-        textarea: '',
-        textarea2: '',
-        textarea3: '',
-        select: '',
-        state1: '',
-        state2: '',
-        state3: '',
-        state4: ''
-      };
-    },
-    methods: {
-      loadAll() {
-        return [
-          { "value": "vue", "link": "https://github.com/vuejs/vue" },
-          { "value": "element", "link": "https://github.com/ElemeFE/element" },
-          { "value": "cooking", "link": "https://github.com/ElemeFE/cooking" },
-          { "value": "mint-ui", "link": "https://github.com/ElemeFE/mint-ui" },
-          { "value": "vuex", "link": "https://github.com/vuejs/vuex" },
-          { "value": "vue-router", "link": "https://github.com/vuejs/vue-router" },
-          { "value": "babel", "link": "https://github.com/babel/babel" }
-        ];
-      },
-      querySearch(queryString, cb) {
-        var links = this.links;
-        var results = queryString ? links.filter(this.createStateFilter(queryString)) : links;
-
-        cb(results);
-      },
-      querySearchAsync(queryString, cb) {
-        var links = this.links;
-        var results = queryString ? links.filter(this.createStateFilter(queryString)) : links;
-    
-        clearTimeout(this.timeout);
-        this.timeout = setTimeout(() => {
-          cb(results);
-        }, 3000 * Math.random());
-      },
-      createStateFilter(queryString) {
-        return (state) => {
-          return (state.value.toLowerCase().indexOf(queryString.toLowerCase()) === 0);
-        };
-      },
-      handleSelect(item) {
-        console.log(item);
-      },
-      handleIconClick(ev) {
-        console.log(ev);
-      }
-    },
-    mounted() {
-      this.links = this.loadAll();
-    }
-  };
-</script>
-
-<style>
-  .demo-input.demo-es {
-    .el-select .el-input {
-      width: 130px;
-    }
-    .el-input {
-      width: 180px;
-    }
-    .el-textarea {
-      width: 414px;
-    }
-    .el-input-group {
-      width: 100%;
-    }
-    .demo-input-size {
-      .el-input {
-        vertical-align: top;
-        margin: 0 10px 10px 0;
-      }
-    }
-    .demo-input-suffix {
-      padding: 10px;
-    }
-    .demo-input-suffix .el-input {
-      margin-right: 15px;
-    }
-    .demo-input-label {
-      display: inline-block;
-      width: 130px;
-    }
-    .input-with-select .el-input-group__prepend {
-      background-color: #fff;
-    }
-    .demo-autocomplete {
-      text-align: center;
+## Input
 
-      .sub-title {
-        margin-bottom: 10px;
-        font-size: 14px;
-        color: #8492a6;
-      }
-    
-      .el-col:not(:last-child) {
-        border-right: 1px solid rgba(224,230,237,0.50);
-      }
-    
-      .el-autocomplete {
-        text-align: left;
-      }
-    }
-  }
-  .el-autocomplete-suggestion.my-autocomplete {
-    li {
-      line-height: normal;
-      padding: 7px *;
+Ingresa datos usando el ratón o teclado.
 
-      .name {
-        text-overflow: ellipsis;
-        overflow: hidden;
-      }
-      .addr {
-        font-size: 12px;
-        color: #b4b4b4;
-      }
-      .highlighted .addr {
-        color: #ddd;
-      }
-    }
-  }
-</style>
+:::warning
+Input es un componente controlado, **siempre muestra el valor de enlace Vue**.
 
-## Input
+Bajo circunstancias normales, el evento "input" debe ser manejado. Su handler debe actualizar el valor de enlace del componente (o usar `v-model`). De lo contrario, el valor del cuadro de entrada no cambiará.
 
-Ingresa datos usando el ratón o teclado.
+No admite modificadores `v-model`.
+:::
 
 ### Uso básico
 
@@ -173,7 +37,7 @@ export default {
 ```html
 <el-input
   placeholder="Please input"
-  v-model="input1"
+  v-model="input"
   :disabled="true">
 </el-input>
 
@@ -181,7 +45,7 @@ export default {
 export default {
   data() {
     return {
-      input1: ''
+      input: ''
     }
   }
 }
@@ -190,6 +54,48 @@ export default {
 
 :::
 
+### Limpiable
+
+:::demo Marque que el input puede ser limpiable con el atributo `clearable`.
+
+```html
+<el-input
+  placeholder="Please input"
+  v-model="input"
+  clearable>
+</el-input>
+
+<script>
+export default {
+  data() {
+    return {
+      input: ''
+    }
+  }
+}
+</script>
+```
+:::
+
+### Password box
+
+:::demo Haga un input de contraseña conmutable con el atributo `show-password`.
+
+```html
+<el-input placeholder="Please input password" v-model="input" show-password></el-input>
+
+<script>
+  export default {
+    data() {
+      return {
+        input: ''
+      }
+    }
+  }
+</script>
+```
+:::
+
 ### Input con icono
 
 Añada un icono para indicar el tipo de Input.
@@ -202,24 +108,24 @@ Añada un icono para indicar el tipo de Input.
   <el-input
     placeholder="Pick a date"
     suffix-icon="el-icon-date"
-    v-model="input2">
+    v-model="input1">
   </el-input>
   <el-input
     placeholder="Type something"
     prefix-icon="el-icon-search"
-    v-model="input21">
+    v-model="input2">
   </el-input>
 </div>
 <div class="demo-input-suffix">
   <span class="demo-input-label">Using slots</span>
   <el-input
     placeholder="Pick a date"
-    v-model="input22">
+    v-model="input3">
     <i slot="suffix" class="el-input__icon el-icon-date"></i>
   </el-input>
   <el-input
     placeholder="Type something"
-    v-model="input23">
+    v-model="input4">
     <i slot="prefix" class="el-input__icon el-icon-search"></i>
   </el-input>
 </div>
@@ -235,10 +141,10 @@ Añada un icono para indicar el tipo de Input.
 export default {
   data() {
     return {
+      input1: '',
       input2: '',
-      input21: '',
-      input22: '',
-      input23: ''
+      input3: '',
+      input4: ''
     }
   }
 }
@@ -249,7 +155,7 @@ export default {
 
 ### Textarea
 
-Redimensiona para introducir varias líneas de información de texto. Agrege el atributo `type="textarea"` para cambiar el `input` al tipo nativo `textarea`.
+Redimensiona para introducir varias líneas de información de texto. Agregue el atributo `type="textarea"` para cambiar el `input` al tipo nativo `textarea`.
 
 :::demo Controle la altura ajustando el prop `rows`.
 
@@ -274,9 +180,9 @@ export default {
 
 :::
 
-### Textarea tamaño automatico
+### Textarea tamaño automático
 
-El ajuste del prop `autosize` en el tipo de Input textarea hace que la altura se ajuste automáticamente en función del contenido. Se puede proporcionar opciones en un objeto para autodimensionar y especificar el número mínimo y máximo de líneas que el textarea puede ajustar automáticamente.
+El ajuste del prop `autosize` en el tipo de Input textarea hace que la altura se ajuste automáticamente en función del contenido. Se puede proporcionar opciones en un objeto para auto dimensionar y especificar el número mínimo y máximo de líneas que el textarea puede ajustar automáticamente.
 
 :::demo
 
@@ -285,22 +191,22 @@ El ajuste del prop `autosize` en el tipo de Input textarea hace que la altura se
   type="textarea"
   autosize
   placeholder="Please input"
-  v-model="textarea2">
+  v-model="textarea1">
 </el-input>
 <div style="margin: 20px 0;"></div>
 <el-input
   type="textarea"
   :autosize="{ minRows: 2, maxRows: 4}"
   placeholder="Please input"
-  v-model="textarea3">
+  v-model="textarea2">
 </el-input>
 
 <script>
 export default {
   data() {
     return {
-      textarea2: '',
-      textarea3: ''
+      textarea1: '',
+      textarea2: ''
     }
   }
 }
@@ -317,17 +223,17 @@ Añade un elemento antes o después del input, generalmente una etiqueta o un bo
 
 ```html
 <div>
-  <el-input placeholder="Please input" v-model="input3">
+  <el-input placeholder="Please input" v-model="input1">
     <template slot="prepend">Http://</template>
   </el-input>
 </div>
 <div style="margin-top: 15px;">
-  <el-input placeholder="Please input" v-model="input4">
+  <el-input placeholder="Please input" v-model="input2">
     <template slot="append">.com</template>
   </el-input>
 </div>
 <div style="margin-top: 15px;">
-  <el-input placeholder="Please input" v-model="input5" class="input-with-select">
+  <el-input placeholder="Please input" v-model="input3" class="input-with-select">
     <el-select v-model="select" slot="prepend" placeholder="Select">
       <el-option label="Restaurant" value="1"></el-option>
       <el-option label="Order No." value="2"></el-option>
@@ -349,9 +255,9 @@ Añade un elemento antes o después del input, generalmente una etiqueta o un bo
 export default {
   data() {
     return {
+      input1: '',
+      input2: '',
       input3: '',
-      input4: '',
-      input5: '',
       select: ''
     }
   }
@@ -369,22 +275,22 @@ export default {
 <div class="demo-input-size">
   <el-input
     placeholder="Please Input"
-    v-model="input6">
+    v-model="input1">
   </el-input>
   <el-input
     size="medium"
     placeholder="Please Input"
-    v-model="input7">
+    v-model="input2">
   </el-input>
   <el-input
     size="small"
     placeholder="Please Input"
-    v-model="input8">
+    v-model="input3">
   </el-input>
   <el-input
     size="mini"
     placeholder="Please Input"
-    v-model="input9">
+    v-model="input4">
   </el-input>
 </div>
 
@@ -392,10 +298,10 @@ export default {
 export default {
   data() {
     return {
-      input6: '',
-      input7: '',
-      input8: '',
-      input9: ''
+      input1: '',
+      input2: '',
+      input3: '',
+      input4: ''
     }
   }
 }
@@ -458,7 +364,7 @@ Puede obtener algunas sugerencias basadas en la entrada actual.
       loadAll() {
         return [
           { "value": "vue", "link": "https://github.com/vuejs/vue" },
-          { "value": "element", "link": "https://github.com/ElemeFE/element" },
+          { "value": "element", "link": "https://github.com/femessage/element" },
           { "value": "cooking", "link": "https://github.com/ElemeFE/cooking" },
           { "value": "mint-ui", "link": "https://github.com/ElemeFE/mint-ui" },
           { "value": "vuex", "link": "https://github.com/vuejs/vuex" },
@@ -488,7 +394,7 @@ Personalice cómo se muestran las sugerencias.
 ```html
 <el-autocomplete
   popper-class="my-autocomplete"
-  v-model="state3"
+  v-model="state"
   :fetch-suggestions="querySearch"
   placeholder="Please input"
   @select="handleSelect">
@@ -526,7 +432,7 @@ Personalice cómo se muestran las sugerencias.
     data() {
       return {
         links: [],
-        state3: ''
+        state: ''
       };
     },
     methods: {
@@ -544,7 +450,7 @@ Personalice cómo se muestran las sugerencias.
       loadAll() {
         return [
           { "value": "vue", "link": "https://github.com/vuejs/vue" },
-          { "value": "element", "link": "https://github.com/ElemeFE/element" },
+          { "value": "element", "link": "https://github.com/femessage/element" },
           { "value": "cooking", "link": "https://github.com/ElemeFE/cooking" },
           { "value": "mint-ui", "link": "https://github.com/ElemeFE/mint-ui" },
           { "value": "vuex", "link": "https://github.com/vuejs/vuex" },
@@ -576,7 +482,7 @@ Búsqueda de datos desde el servidor.
 
 ```html
 <el-autocomplete
-  v-model="state4"
+  v-model="state"
   :fetch-suggestions="querySearchAsync"
   placeholder="Please input"
   @select="handleSelect"
@@ -586,7 +492,7 @@ Búsqueda de datos desde el servidor.
     data() {
       return {
         links: [],
-        state4: '',
+        state: '',
         timeout:  null
       };
     },
@@ -594,7 +500,7 @@ Búsqueda de datos desde el servidor.
       loadAll() {
         return [
           { "value": "vue", "link": "https://github.com/vuejs/vue" },
-          { "value": "element", "link": "https://github.com/ElemeFE/element" },
+          { "value": "element", "link": "https://github.com/femessage/element" },
           { "value": "cooking", "link": "https://github.com/ElemeFE/cooking" },
           { "value": "mint-ui", "link": "https://github.com/ElemeFE/mint-ui" },
           { "value": "vuex", "link": "https://github.com/vuejs/vuex" },
@@ -629,23 +535,62 @@ Búsqueda de datos desde el servidor.
 
 :::
 
+### Limitar el tamaño
+
+:::demo `maxlength` y `minlength` son atributos de la entrada nativa, declaran un límite en el número de caracteres que un usuario puede introducir. La configuración de la pro `maxlength` para un tipo de entrada de texto o de área de texto puede limitar la longitud del valor de entrada y le permite mostrar el recuento de palabras al establecer `show-word-limit` a `true` al mismo tiempo.
+
+```html
+<el-input
+  type="text"
+  placeholder="Please input"
+  v-model="text"
+  maxlength="10"
+  show-word-limit
+>
+</el-input>
+<div style="margin: 20px 0;"></div>
+<el-input
+  type="textarea"
+  placeholder="Please input"
+  v-model="textarea"
+  maxlength="30"
+  show-word-limit
+>
+</el-input>
+
+<script>
+export default {
+  data() {
+    return {
+      text: '',
+      textarea: ''
+    }
+  }
+}
+</script>
+```
+:::
+
 ### Input atributos
 
 | Atributo      | Descripción                                                                                                                                      | Tipo             | Valores aceptados                                                                                                                       | Por defecto |
 | ------------- | ------------------------------------------------------------------------------------------------------------------------------------------------ | ---------------- | --------------------------------------------------------------------------------------------------------------------------------------- | ----------- |
 | type          | tipo de input                                                                                                                                    | string           | text, textarea y otros [tipos de entrada nativos](https://developer.mozilla.org/es/docs/Web/HTML/Elemento/input#Form_%3Cinput%3E_types) | text        |
-| value         | valor enlazado                                                                                                                                   | string / number  | —                                                                                                                                       | —           |
+| value / v-model | valor enlazado                          | boolean / string / number | —                       | —           |
 | maxlength     | igual que `maxlength` en el input nativo                                                                                                         | number           | —                                                                                                                                       | —           |
 | minlength     | igual que `minlength` en el input nativo                                                                                                         | number           | —                                                                                                                                       | —           |
+| show-word-limit | Si se muestra el contador de palabras, solamente funciona con los tipos `text` o `textarea` | boolean    |  —  | false |
 | placeholder   | placeholder del Input                                                                                                                            | string           | —                                                                                                                                       | —           |
+| clearable | si debe mostrar el botón de limpieza | boolean | — | false |
+| show-password | si debe mostrar la posibilidad de conmutación de password input | boolean         | — | false |
 | disabled      | si esta deshabilitado                                                                                                                            | boolean          | —                                                                                                                                       | false       |
 | size          | tamaño del input, esto no funciona cuando `type` no es textarea                                                                                  | string           | medium / small / mini                                                                                                                   | —           |
 | prefix-icon   | clase del icono de prefijo                                                                                                                       | string           | —                                                                                                                                       | —           |
 | suffix-icon   | clase del icono de sufijo                                                                                                                        | string           | —                                                                                                                                       | —           |
-| rows          | número de filas, sólo funciona cuando `type` es 'textarea'.                                                                                      | number           | —                                                                                                                                       | 2           |
-| autosize      | si textarea tiene una altura adaptativa, sólo funciona cuando el`type` es 'textarea'. Puede aceptar un objeto, p. ej. { minRows: 2, maxRows: 6 } | boolean / object | —                                                                                                                                       | false       |
+| rows          | número de filas, sólo funciona cuando `type` es `textarea`.                                                                                    | number           | —                                                                                                                                       | 2           |
+| autosize      | si textarea tiene una altura adaptativa, sólo funciona cuando el`type` es `textarea`. Puede aceptar un objeto, p. ej. { minRows: 2, maxRows: 6 } | boolean / object | —                                                                                                                                       | false       |
 | autocomplete  | igual que `autocomplete` en el input nativo                                                                                                      | string           | on/off                                                                                                                                  | off         |
-| auto-complete | @DEPRECATED en el proximo cambio mayor de version                                                                                                | string           | on/off                                                                                                                                  | off         |
+| auto-complete | @DEPRECATED en el próximo cambio mayor de versión                                                                                  | string           | on/off                                                                                                                                  | off         |
 | name          | igual que `name` en el input nativo                                                                                                              | string           | —                                                                                                                                       | —           |
 | readonly      | igual que `readonly` en el input nativo                                                                                                          | boolean          | —                                                                                                                                       | false       |
 | max           | igual que `max` en el input nativo                                                                                                               | —                | —                                                                                                                                       | —           |
@@ -655,7 +600,7 @@ Búsqueda de datos desde el servidor.
 | autofocus     | igual que `autofocus` en el input nativo                                                                                                         | boolean          | —                                                                                                                                       | false       |
 | form          | igual que `form` en el input nativo                                                                                                              | string           | —                                                                                                                                       | —           |
 | label         | texto de la etiqueta                                                                                                                             | string           | —                                                                                                                                       | —           |
-| tabindex      | orden de tabulacion para el Input                                                                                                                | string           | -                                                                                                                                       | -           |
+| tabindex      | orden de tabulación para el Input                                                                                                               | string           | -                                                                                                                                       | -           |
 
 ### Input slots
 
@@ -668,12 +613,12 @@ Búsqueda de datos desde el servidor.
 
 ### Input eventos
 
-| Nombre | Descripción                                                                                | Parametros                |
-| ------ | ------------------------------------------------------------------------------------------ | ------------------------- |
-| blur   | Se dispara cuando se pierde el foco                                                        | (event: Event)            |
-| focus  | Se dispara cuando se obtiene el foco                                                       | (event: Event)            |
-| change | se activa cuando cambia el valor de entrada                                                | (value: string \| number) |
-| clear  | se dispara cuando la entrada es borrada por el botón generado por el atributo "clearable". | —                         |
+| Nombre | Descripción                                                  | Parametros                |
+| ------ | ------------------------------------------------------------ | ------------------------- |
+| blur   | Se dispara cuando se pierde el foco                          | (event: Event)            |
+| focus  | Se dispara cuando se obtiene el foco                         | (event: Event)            |
+| change | se activa cuando cambia el valor de entrada                  | (value: string \| number) |
+| clear  | se dispara cuando la entrada es borrada por el botón generado por el atributo `clearable`. | —                         |
 
 ### Input Metodo
 
@@ -704,7 +649,8 @@ Búsqueda de datos desde el servidor.
 | suffix-icon           | suffix icon class                                                                                                                                  | string                          | —                                                              | —            |
 | hide-loading          | si se debe ocultar el icono de loading en la búsqueda remota                                                                                       | boolean                         | —                                                              | false        |
 | popper-append-to-body | si añadir el desplegable al cuerpo. Si la posición del menú desplegable es incorrecta, puede intentar establecer este prop a false                 | boolean                         | -                                                              | true         |
-| validate-event        | si se debe lanzar la validación de formulario                                                                                                                 | boolean                         | -                                                              | -            |
+| validate-event        | si se debe lanzar la validación de formulario                                                                                                                 | boolean                         | -                                                   | true         |
+| highlight-first-item | si se debe resaltar el primer elemento en las sugerencias de búsqueda remota de forma predeterminada                 | boolean                         | -                                                              | false         |
 
 ### Autocomplete Slots
 
@@ -717,15 +663,15 @@ Búsqueda de datos desde el servidor.
 
 ### Autocomplete Scoped Slot
 
-| Name | Description                                                                              |
-| ---- | ---------------------------------------------------------------------------------------- |
-| —    | Contenido personalizado para el input de sugerencias. El parametro del scope es { item } |
+| Name | Description                                                  |
+| ---- | ------------------------------------------------------------ |
+| —    | Contenido personalizado para el input de sugerencias. El parámetro del scope es { ítem } |
 
 ### Autocomplete Eventos
 
-| Nombre | Descripción                                      | Parametros                                  |
-| ------ | ------------------------------------------------ | ------------------------------------------- |
-| select | se dispara cuando se hace click a una sugerencia | sugerencia en la que se está haciendo click |
+| Nombre | Descripción                                     | Parametros                                 |
+| ------ | ----------------------------------------------- | ------------------------------------------ |
+| select | se dispara cuando se hace clic a una sugerencia | sugerencia en la que se está haciendo clic |
 
 ### Autocomplete Metodo
 
diff --git a/examples/docs/es/installation.md b/examples/docs/es/installation.md
index 412657029ae..24c7272ae2c 100644
--- a/examples/docs/es/installation.md
+++ b/examples/docs/es/installation.md
@@ -2,7 +2,7 @@
 
 ### npm
 
-Instalar mediante npm es la forma recomendada ya que se integra facilmente con [webpack](https://webpack.js.org/).
+Instalar mediante npm es la forma recomendada ya que se integra fácilmente con [webpack](https://webpack.js.org/).
 
 ```shell
 npm i element-ui -S
@@ -10,13 +10,13 @@ npm i element-ui -S
 
 ### CDN
 
-Obtenga la última versión desde [unpkg.com/element-ui](https://unpkg.com/element-ui/) , e importe el JavaScript y los archivos CSS en su página.
+Obtenga la última versión desde [unpkg.com/element-ui](https://unpkg.com/@femessage/element-ui/) , e importe el JavaScript y los archivos CSS en su página.
 
 ```html
 <!-- import CSS -->
-<link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">
+<link rel="stylesheet" href="https://unpkg.com/@femessage/element-ui/lib/theme-chalk/index.css">
 <!-- import JavaScript -->
-<script src="https://unpkg.com/element-ui/lib/index.js"></script>
+<script src="https://unpkg.com/@femessage/element-ui/lib/index.js"></script>
 ```
 
 ##Tip
@@ -24,8 +24,11 @@ Recomendamos a nuestros usuarios congelar la versión de Elemet cuando usas un C
 
 ### Hello world
 
-Si esta usando un CDN, una página con Hello-World es fácil con Element. [Online Demo](https://jsfiddle.net/hzfpyvg6/14/)
+Si esta usando un CDN, una página con Hello-World es fácil con Element. [Online Demo](https://codepen.io/ziyoung/pen/rRKYpd)
 
-<iframe width="100%" height="600" src="//jsfiddle.net/hzfpyvg6/1213/embedded/html,result/" allowpaymentrequest allowfullscreen="allowfullscreen" frameborder="0"></iframe>
+<iframe height="265" style="width: 100%;" scrolling="no" title="Element demo" src="//codepen.io/ziyoung/embed/rRKYpd/?height=265&theme-id=light&default-tab=html,result" frameborder="no" allowtransparency="true" allowfullscreen="true">
+  See the Pen <a href='https://codepen.io/ziyoung/pen/rRKYpd/'>Element demo</a> by hetech
+  (<a href='https://codepen.io/ziyoung'>@ziyoung</a>) on <a href='https://codepen.io'>CodePen</a>.
+</iframe>
 
-Si esta usando npm y desea combinarlo con webpack, por favor continue a la siguiente página: [Quick Start](/#/es/component/quickstart)
+Si esta usando npm y desea combinarlo con webpack, por favor continué a la siguiente página: [Quick Start](/#/es/component/quickstart)
diff --git a/examples/docs/es/layout.md b/examples/docs/es/layout.md
index 55a8ee6be6e..90943b8e0f2 100644
--- a/examples/docs/es/layout.md
+++ b/examples/docs/es/layout.md
@@ -1,34 +1,3 @@
-<style>
-  .demo-layout {
-    .el-row {
-      margin-bottom: 20px;
-      &:last-child {
-        margin-bottom: 0;
-      }
-    }
-    .el-col {
-      border-radius: 4px;
-    }
-    .bg-purple-dark {
-      background: #99a9bf;
-    }
-    .bg-purple {
-      background: #d3dce6;
-    }
-    .bg-purple-light {
-      background: #e5e9f2;
-    }
-    .grid-content {
-      border-radius: 4px;
-      min-height: 36px;
-    }
-    .row-bg {
-      padding: 10px 0;
-      background-color: #f9fafc;
-    }
-  }
-</style>
-
 ## Layout
 
 Rápido y facilmente crea un layout básico con 24 columnas.
@@ -346,7 +315,7 @@ Tomando el ejemplo de Bootstrap responsive design, existen 5 breakpoints: xs, sm
 Adicionalmente, Element provee una serie de clases para ocultar elementos dadas ciertas condiciones. Estas clases pueden se agregadas a cualquier elemento del DOM o un elemento propio. Necesita importar el siguiente archivo CSS para usar estas clases:
 
 ```js
-import 'element-ui/lib/theme-chalk/display.css';
+import '@femessage/element-ui/lib/theme-chalk/display.css';
 ```
 
 Las clases son:
diff --git a/examples/docs/es/link.md b/examples/docs/es/link.md
new file mode 100644
index 00000000000..7eca3f9a72f
--- /dev/null
+++ b/examples/docs/es/link.md
@@ -0,0 +1,77 @@
+## Link
+
+Texto con hipervinculo
+
+### Básico
+
+Texto con hipervinculo básico
+:::demo
+
+```html
+<div>
+  <el-link href="https://element.eleme.io" target="_blank">default</el-link>
+  <el-link type="primary">primary</el-link>
+  <el-link type="success">success</el-link>
+  <el-link type="warning">warning</el-link>
+  <el-link type="danger">danger</el-link>
+  <el-link type="info">info</el-link>
+</div>
+```
+
+:::
+
+### Deshabilitar
+
+Deshabilita el hipervinculo
+:::demo
+
+```html
+<div>
+  <el-link disabled>default</el-link>
+  <el-link type="primary" disabled>primary</el-link>
+  <el-link type="success" disabled>success</el-link>
+  <el-link type="warning" disabled>warning</el-link>
+  <el-link type="danger" disabled>danger</el-link>
+  <el-link type="info" disabled>info</el-link>
+</div>
+```
+
+:::
+
+### Subrayado
+
+Subrayado del hipervinculo
+:::demo
+
+```html
+<div>
+  <el-link :underline="false">Without Underline</el-link>
+  <el-link>With Underline</el-link>
+</div>
+```
+
+:::
+
+### Icono
+
+Hipervinculo con icono
+:::demo
+
+```html
+<div>
+  <el-link icon="el-icon-edit">Edit</el-link>
+  <el-link>Check<i class="el-icon-view el-icon--right"></i> </el-link>
+</div>
+```
+
+:::
+
+### Atributos
+
+| Atributo  | Descripción                                          | Tipo    | Opciones                                    | Por defecto |
+| --------- | ---------------------------------------------------- | ------- | ------------------------------------------- | ----------- |
+| type      | tipo                                                 | string  | primary / success / warning / danger / info | default     |
+| underline | si el hipervinculo estara subrayado                  | boolean | —                                           | true        |
+| disabled  | si el componente esta deshabilitado                  | boolean | —                                           | false       |
+| href      | lo mismo que el valor nativo del hipervinculo `href` | string  | —                                           | -           |
+| icon      | nombre de clase del icono                            | string  | —                                           | -           |
diff --git a/examples/docs/es/loading-button.md b/examples/docs/es/loading-button.md
new file mode 100644
index 00000000000..53b7e055691
--- /dev/null
+++ b/examples/docs/es/loading-button.md
@@ -0,0 +1 @@
+## LoadingButton
diff --git a/examples/docs/es/loading.md b/examples/docs/es/loading.md
index 542c9034be5..1ee387c2851 100644
--- a/examples/docs/es/loading.md
+++ b/examples/docs/es/loading.md
@@ -1,54 +1,3 @@
-<style>
-  .demo-loading .el-table {
-    border: none;
-  }
-</style>
-
-<script>
-  export default {
-    data() {
-      return {
-        tableData: [{
-          date: '2016-05-02',
-          name: 'John Smith',
-          address: 'No.1518,  Jinshajiang Road, Putuo District'
-        }, {
-          date: '2016-05-04',
-          name: 'John Smith',
-          address: 'No.1518,  Jinshajiang Road, Putuo District'
-        }, {
-          date: '2016-05-01',
-          name: 'John Smith',
-          address: 'No.1518,  Jinshajiang Road, Putuo District'
-        }],
-        loading: true,
-        loading2: true,
-        fullscreenLoading: false
-      }
-    },
-    
-    methods: {
-      openFullScreen() {
-        this.fullscreenLoading = true;
-        setTimeout(() => {
-          this.fullscreenLoading = false;
-        }, 2000);
-      },
-      openFullScreen2() {
-        const loading = this.$loading({
-          lock: true,
-          text: 'Loading',
-          spinner: 'el-icon-loading',
-          background: 'rgba(0, 0, 0, 0.7)'
-        });
-        setTimeout(() => {
-          loading.close();
-        }, 2000);
-      }
-    }
-  }
-</script>
-
 ## Cargando
 
 Se muestra la animación mientras se cargan los datos.
@@ -117,11 +66,11 @@ Muestra una animación en un contenedor (como en una tabla) mientras se cargan l
 
 Puede personalizar el texto de carga, spinner de carga y color de fondo.
 
-:::demo Agrege el atributo `element-loading-text` al elemento en el que `v-loading` está vinculado, y su valor se mostrará debajo del spinner. Del mismo modo, `element-loading-spinner` y `element-loading-background` son para personalizar el nombre de la clase del spinner y el color de fondo.
+:::demo Agregue el atributo `element-loading-text` al elemento en el que `v-loading` está vinculado, y su valor se mostrará debajo del spinner. Del mismo modo, `element-loading-spinner` y `element-loading-background` son para personalizar el nombre de la clase del spinner y el color de fondo.
 ```html
 <template>
   <el-table
-    v-loading="loading2"
+    v-loading="loading"
     element-loading-text="Loading..."
     element-loading-spinner="el-icon-loading"
     element-loading-background="rgba(0, 0, 0, 0.8)"
@@ -161,7 +110,7 @@ Puede personalizar el texto de carga, spinner de carga y color de fondo.
           name: 'John Smith',
           address: 'No.1518,  Jinshajiang Road, Putuo District'
         }],
-        loading2: true
+        loading: true
       };
     }
   };
@@ -179,7 +128,7 @@ Muestra una animación de pantalla completa mientras se cargan los datos
 <template>
   <el-button
     type="primary"
-    @click="openFullScreen"
+    @click="openFullScreen1"
     v-loading.fullscreen.lock="fullscreenLoading">
     Como directiva
   </el-button>
@@ -198,7 +147,7 @@ Muestra una animación de pantalla completa mientras se cargan los datos
       }
     },
     methods: {
-      openFullScreen() {
+      openFullScreen1() {
         this.fullscreenLoading = true;
         setTimeout(() => {
           this.fullscreenLoading = false;
@@ -226,7 +175,7 @@ Muestra una animación de pantalla completa mientras se cargan los datos
 Puede invocar el componente con un servicio. Importe el servicio:
 
 ```javascript
-import { Loading } from 'element-ui';
+import { Loading } from '@femessage/element-ui';
 ```
 Invocar:
 ```javascript
diff --git a/examples/docs/es/lr-container.md b/examples/docs/es/lr-container.md
new file mode 100644
index 00000000000..980502df7ac
--- /dev/null
+++ b/examples/docs/es/lr-container.md
@@ -0,0 +1 @@
+## LrContainer
diff --git a/examples/docs/es/menu.md b/examples/docs/es/menu.md
index 2338a410c70..4606416d25d 100644
--- a/examples/docs/es/menu.md
+++ b/examples/docs/es/menu.md
@@ -1,56 +1,3 @@
-<style>
-  .demo-box.demo-menu {
-    .el-menu-demo {
-      padding-left: 55px;
-    }
-    .el-menu-vertical-demo:not(.el-menu--collapse) {
-      width: 240px;
-      min-height: 400px;
-    }
-    .line {
-      height: 1px;
-      background-color: #e0e6ed;
-      margin: 35px -24px;
-    }
-    h5 {
-      font-size: 14px;
-      color: #8492a6;
-      margin-top: 10px;
-    }
-    .tac {
-      text-align: center;
-    
-      .el-menu-vertical-demo {
-        display: inline-block;
-        text-align: left;
-      }
-    }
-  }
-</style>
-
-<script>
-  export default {
-    data() {
-      return {
-        activeIndex: '1',
-        activeIndex2: '1',
-        isCollapse: true
-      };
-    },
-    methods: {
-      handleOpen(key, keyPath) {
-        console.log(key, keyPath);
-      },
-      handleClose(key, keyPath) {
-        console.log(key, keyPath);
-      },
-      handleSelect(key, keyPath) {
-        console.log(key, keyPath);
-      }
-    }
-  }
-</script>
-
 ## NavMenu
 
 Menú que provee la navegación para tu sitio.
@@ -304,12 +251,12 @@ NavMenu vertical puede ser colapsado.
 | collapse          | si el menú está colapsado (solo en modo vertical) | boolean | —                     | false       |
 | background-color  | color de fondo del menú (formato hexadecimal) | string  | —                     | #ffffff     |
 | text-color        | color de texto del menú (formato hexadecimal) | string  | —                     | #303133     |
-| active-text-color | color de text del menu-item activo (formato hexadecimal) | string  | —                     | #409EFF     |
+| active-text-color | color de text del menu-item activo (formato hexadecimal) | string  | —                     | #2460e0     |
 | default-active    | índice del menu-item activo              | string  | —                     | —           |
 | default-openeds   | arreglo que contiene las llaves del sub-menus activo | Array   | —                     | —           |
 | unique-opened     | si solo un submenu puede ser activo      | boolean | —                     | false       |
 | menu-trigger      | como dispara eventos sub-menus, solo funciona cuando `mode` es 'horizontal' | string  | hover / click      | hover   |
-| router            | si el modo `vue-router` está activado. Si es verdader, índice será usado como 'path' para activar la ruta | boolean | —                     | false       |
+| router            | si el modo `vue-router` está activado. Si es verdadero, el índice será usado como 'path' para activar la ruta | boolean | —                     | false       |
 | collapse-transition  | si se debe permitir collapse transition | boolean   | — | true   |
 
 ### Métodos Menu 
@@ -333,8 +280,8 @@ NavMenu vertical puede ser colapsado.
 ### Atributos SubMenu 
 | Atributo     | Descripción                              | Tipo   | Valores aceptados | Por defecto |
 | ------------ | ---------------------------------------- | ------ | ----------------- | ----------- |
-| index        | identificador único                      | string | —                 | —           |
-| popper-class | nombre personalizado de la clase del menu popup | string | —                 | —           |
+| index        | identificador único                      | string/null | —            | null        |
+| popper-class | nombre personalizado de la clase del menú popup | string | —                 | —           |
 | show-timeout | tiempo de espera antes de mostrar un submenú | number | —                 | 300         |
 | hide-timeout | tiempo de espera antes de ocultar un submenú | number | —                 | 300         |
 | disabled | si esta `disabled` el sub-menu | boolean | — | false |
diff --git a/examples/docs/es/message-box-center.md b/examples/docs/es/message-box-center.md
new file mode 100644
index 00000000000..c331ef7e5a2
--- /dev/null
+++ b/examples/docs/es/message-box-center.md
@@ -0,0 +1 @@
+## MessageBoxCenter
diff --git a/examples/docs/es/message-box.md b/examples/docs/es/message-box.md
index 05015d2206a..fbeb38a2990 100644
--- a/examples/docs/es/message-box.md
+++ b/examples/docs/es/message-box.md
@@ -1,160 +1,15 @@
-<script>
-  export default {
-    methods: {
-      open() {
-        this.$alert('This is a message', 'Title', {
-          confirmButtonText: 'OK',
-          callback: action => {
-            this.$message({
-              type: 'info',
-              message: `action: ${ action }`
-            });
-          }
-        });
-      },
-    
-      open2() {
-        this.$confirm('This will permanently delete the file. Continue?', 'Warning', {
-          confirmButtonText: 'OK',
-          cancelButtonText: 'Cancel',
-          type: 'warning'
-        }).then(() => {
-          setTimeout(() => {
-            this.$message({
-              message: 'Delete completed',
-              type: 'success'
-            });
-          }, 200);
-        }).catch(() => {
-          setTimeout(() => {
-            this.$message({
-              message: 'Delete canceled',
-              type: 'info'
-            });  
-          }, 200);
-        });
-      },
-    
-      open3() {
-        this.$prompt('Please input your email', 'Tips', {
-          confirmButtonText: 'OK',
-          cancelButtonText: 'Cancel',
-          inputPattern: /[\w!#$%&'*+/=?^_`{|}~-]+(?:\.[\w!#$%&'*+/=?^_`{|}~-]+)*@(?:[\w](?:[\w-]*[\w])?\.)+[\w](?:[\w-]*[\w])?/,
-          inputErrorMessage: 'Invalid Email'
-        }).then(({ value }) => {
-          setTimeout(() => {
-            this.$message({
-              type: 'success',
-              message: 'Your email is:' + value
-            });
-          }, 200);
-        }).catch(() => {
-          setTimeout(() => {
-            this.$message({
-              type: 'info',
-              message: 'Input canceled'
-            });
-          }, 200);
-        });
-      },
-    
-      open4() {
-        const h = this.$createElement;
-        this.$msgbox({
-          title: 'Message',
-          message: h('p', null, [
-            h('span', null, 'Message can be '),
-            h('i', { style: 'color: teal' }, 'VNode')
-          ]),
-          showCancelButton: true,
-          confirmButtonText: 'OK',
-          cancelButtonText: 'Cancel',
-          beforeClose: (action, instance, done) => {
-            if (action === 'confirm') {
-              instance.confirmButtonLoading = true;
-              instance.confirmButtonText = 'Loading...';
-              setTimeout(() => {
-                done();
-                setTimeout(() => {
-                  instance.confirmButtonLoading = false;
-                }, 300);
-              }, 3000);
-            } else {
-              done();
-            }
-          }
-        }).then(action => {
-          setTimeout(() => {
-            this.$message({
-              type: 'info',
-              message: 'action: ' + action
-            });
-          }, 200);
-        });
-      },
-    
-      open5() {
-        this.$alert('<strong>This is <i>HTML</i> string</strong>', 'HTML String', {
-          dangerouslyUseHTMLString: true
-        });
-      },
-    
-      open6() {
-        this.$confirm('You have unsaved changes, save and proceed?', 'Confirm', {
-          distinguishCancelAndClose: true,
-          confirmButtonText: 'Save',
-          cancelButtonText: 'Discard Changes'
-        })
-          .then(() => {
-            this.$message({
-              type: 'info',
-              message: 'Changes saved. Proceeding to a new route.'
-            });
-          })
-          .catch(action => {
-            this.$message({
-              type: 'info',
-              message: action === 'cancel'
-                ? 'Changes discarded. Proceeding to a new route.'
-                : 'Stay in the current route'
-            })
-          });
-      },
-    
-      open7() {
-        this.$confirm('This will permanently delete the file. Continue?', 'Warning', {
-          confirmButtonText: 'OK',
-          cancelButtonText: 'Cancel',
-          type: 'warning',
-          center: true
-        }).then(() => {
-          this.$message({
-            type: 'success',
-            message: 'Delete completed'
-          });
-        }).catch(() => {
-          this.$message({
-            type: 'info',
-            message: 'Delete canceled'
-          });
-        });
-      }
-    }
-  };
-</script>
-
 ## MessageBox
 
-Un conjunto de cajas modales simulando un sistema de message box, principalmente para alertar informacion, confirmar operaciones y  mostrar mensajes de aviso.
+Un conjunto de cajas modales simulando un sistema de message box, principalmente para alertar información, confirmar operaciones y  mostrar mensajes de aviso.
 :::tip
-Por diseño los message box nos proveen de simulaciones de sistemas como los componentes `alert`, `confirm` y `prompt`，entonces su contenido debería ser simple. para contenido mas complejo, por favor utilize el componente Dialog.
+Por diseño los message box nos proveen de simulaciones de sistemas como los componentes `alert`, `confirm` y `prompt`，entonces su contenido debería ser simple. para contenido mas complejo, por favor utilice el componente Dialog.
 :::
 
 ### Alert
 
 Alert interrumpe las operaciones realizadas hasta que el usuario confirme la alerta.
 
-:::demo Desplegar una alerta utilizando el metodo `$alert`. Simula el sistema `alert`, y no puede ser cerrado al presionar la tecla ESC o al dar click fuera de la caja. En este ejemplo, dos parametros son recibidos `message` y `title`. Vale la pena mencionar que cuando la caja es cerrada, regresa un objeto `Promise` para su procesamiento posteriormente. Si no estas seguro si el navegador soporta `Promise`, deberias importar una libreria de terceros de polyfill o utilizar callbacks.
+:::demo Desplegar una alerta utilizando el método `$alert`. Simula el sistema `alert`, y no puede ser cerrado al presionar la tecla ESC o al dar clic fuera de la caja. En este ejemplo, dos parámetros son recibidos `message` y `title`. Vale la pena mencionar que cuando la caja es cerrada, regresa un objeto `Promise` para su procesamiento posteriormente. Si no estas seguro si el navegador soporta `Promise`, deberías importar una librería de terceros de polyfill o utilizar callbacks.
 
 ```html
 <template>
@@ -183,20 +38,20 @@ Alert interrumpe las operaciones realizadas hasta que el usuario confirme la ale
 
 ### Confirm
 
-Confirm es utilizado para preguntar al usuario y recibir una confirmacion.
+Confirm es utilizado para preguntar al usuario y recibir una confirmación.
 
 
-:::demo Llamando al metodo `$confirm` para abrir el componente confirm, y simula el sistema `confirm`. Tambien podemos personalizar a gran medida el componente Message Box al mandar un tercer atributo llamado `options` que es literalmente un objeto. El atributo `type` indica el tipo de mensaje, y su valor puede ser `success`, `error`, `info` y `warning`. Se debe tener en cuenta que el segundo atributo `title` debe ser de tipo `string`, y si es de tipo `object`, sera manejado como el atributo `options`. Aqui utilizamos `Promise` para manejar posteriormente el proceso. 
+:::demo Llamando al método `$confirm` para abrir el componente confirm, y simula el sistema `confirm`. También podemos personalizar a gran medida el componente Message Box al mandar un tercer atributo llamado `options` que es literalmente un objeto. El atributo `type` indica el tipo de mensaje, y su valor puede ser `success`, `error`, `info` y `warning`. Se debe tener en cuenta que el segundo atributo `title` debe ser de tipo `string`, y si es de tipo `object`, sera manejado como el atributo `options`. Aquí utilizamos `Promise` para manejar posteriormente el proceso. 
 
 ```html
 <template>
-  <el-button type="text" @click="open2">Click to open the Message Box</el-button>
+  <el-button type="text" @click="open">Click to open the Message Box</el-button>
 </template>
 
 <script>
   export default {
     methods: {
-      open2() {
+      open() {
         this.$confirm('This will permanently delete the file. Continue?', 'Warning', {
           confirmButtonText: 'OK',
           cancelButtonText: 'Cancel',
@@ -222,19 +77,19 @@ Confirm es utilizado para preguntar al usuario y recibir una confirmacion.
 
 ### Prompt
 
-Prompt es utilizado cuando se requiere entrada de informacion del usuario.
+Prompt es utilizado cuando se requiere entrada de información del usuario.
 
-:::demo Llamando al metodo `$prompt` desplegamos el componente prompt, y simula el sistema `prompt`.Puedes utilizar el parametro `inputPattern` para especificar tu propio patron RegExp. Utiliza el parametro `inputValidator` para especificar el metodo de validacion, y debería regresar un valor de tipo `Boolean` o `String`. Al regresar `false` o `String` significa que la validacion a fallado, y la cadena regresada se usara como `inputErrorMessage`. Ademas, puedes perzonalizar el atributo placeholder del input box con el parametro `inputPlaceholder`.
+:::demo Llamando al método `$prompt` desplegamos el componente prompt, y simula el sistema `prompt`.Puedes utilizar el parámetro `inputPattern` para especificar tu propio patrón RegExp. Utiliza el parámetro `inputValidator` para especificar el método de validación, y debería regresar un valor de tipo `Boolean` o `String`. Al regresar `false` o `String` significa que la validación a fallado, y la cadena regresada se usara como `inputErrorMessage`. Ademas, puedes personalizar el atributo placeholder del input box con el parámetro `inputPlaceholder`.
 
 ```html
 <template>
-  <el-button type="text" @click="open3">Click to open Message Box</el-button>
+  <el-button type="text" @click="open">Click to open Message Box</el-button>
 </template>
 
 <script>
   export default {
     methods: {
-      open3() {
+      open() {
         this.$prompt('Please input your e-mail', 'Tip', {
           confirmButtonText: 'OK',
           cancelButtonText: 'Cancel',
@@ -262,17 +117,17 @@ Prompt es utilizado cuando se requiere entrada de informacion del usuario.
 
 Puede ser personalizado para mostrar diversos contenidos.
 
-:::demo Los tres metodos mencionados anteriormente son un rempaquetado del metodo `$msgbox`. En este ejemplo se realiza una llamada al metodo `$msgbox` directamente utilizando el atributo `showCancelButton`, el cual es utilizado para indicar si el boton cancelar es mostrado en pantalla. Ademas podemos utilizar el atributo `cancelButtonClass` para agregar un estilo personalizado y el atributo `cancelButtonText` para personalizar el texto del boton (el boton de confirmacion tambien cuenta con estos campos, y podra encontrar una lista completa de estos atributos al final de esta documentacion). Este ejemplo tambien utiliza el atributo `beforeClose`. Es un metodo que es disparado cuando una instancia del componente MessageBox es cerrada, y su ejecucion detendra el cierre de la instancia. Tiene tres parametros: `action`, `instance` y `done`. Al utilizarla te permite manipular la instancia antes de que sea cerrada, e.g. activando `loading` para el boton de confirmacion; puede invocar el metodo `done` para cerrar la instancia del componente MessageBox  (si el metodo `done` no es llamado dentro del atributo `beforeClose`, la instancia no podra cerrarse).
+:::demo Los tres métodos mencionados anteriormente son un rempaquetado del método `$msgbox`. En este ejemplo se realiza una llamada al método `$msgbox` directamente utilizando el atributo `showCancelButton`, el cual es utilizado para indicar si el botón cancelar es mostrado en pantalla. Además podemos utilizar el atributo `cancelButtonClass` para agregar un estilo personalizado y el atributo `cancelButtonText` para personalizar el texto del botón (el botón de confirmación también cuenta con estos campos, y podrá encontrar una lista completa de estos atributos al final de esta documentación). Este ejemplo también utiliza el atributo `beforeClose`. Es un método que es disparado cuando una instancia del componente MessageBox es cerrada, y su ejecución detendrá el cierre de la instancia. Tiene tres parámetros: `action`, `instance` y `done`. Al utilizarla te permite manipular la instancia antes de que sea cerrada, e.g. activando `loading` para el botón de confirmación; puede invocar el método `done` para cerrar la instancia del componente MessageBox  (si el método `done` no es llamado dentro del atributo `beforeClose`, la instancia no podrá cerrarse).
 
 ```html
 <template>
-  <el-button type="text" @click="open4">Click to open Message Box</el-button>
+  <el-button type="text" @click="open">Click to open Message Box</el-button>
 </template>
 
 <script>
   export default {
     methods: {
-      open4() {
+      open() {
         const h = this.$createElement;
         this.$msgbox({
           title: 'Message',
@@ -312,7 +167,7 @@ Puede ser personalizado para mostrar diversos contenidos.
 
 :::tip
 
-El contenido de MessageBox puede ser `VNode`, permitiéndonos pasar componentes personalizados. Al abrir el MessageBox, Vue compara el nuevo `VNode` con el viejo `VNode`, y luego averigua cómo actualizar eficientemente la interfaz de usuario, de modo que es posible que los componentes no se vuelvan a procesar completamente ([#8931](https://github.com/ElemeFE/element/issues/8931)). En este caso, se puede añadir una clave única a `VNode` cada vez que se abre MessageBox: [ejemplo](https://jsfiddle.net/zhiyang/ezmhq2ef).
+El contenido de MessageBox puede ser `VNode`, permitiéndonos pasar componentes personalizados. Al abrir el MessageBox, Vue compara el nuevo `VNode` con el viejo `VNode`, y luego averigua cómo actualizar eficientemente la interfaz de usuario, de modo que es posible que los componentes no se vuelvan a procesar completamente ([#8931](https://github.com/femessage/element/issues/8931)). En este caso, se puede añadir una clave única a `VNode` cada vez que se abre MessageBox: [ejemplo](https://jsfiddle.net/zhiyang/ezmhq2ef).
 
 :::
 
@@ -324,13 +179,13 @@ El contenido de MessageBox puede ser `VNode`, permitiéndonos pasar componentes
 
 ```html
 <template>
-  <el-button type="text" @click="open5">Click to open Message Box</el-button>
+  <el-button type="text" @click="open">Click to open Message Box</el-button>
 </template>
 
 <script>
   export default {
     methods: {
-      open5() {
+      open() {
         this.$alert('<strong>This is <i>HTML</i> string</strong>', 'HTML String', {
           dangerouslyUseHTMLString: true
         });
@@ -342,7 +197,7 @@ El contenido de MessageBox puede ser `VNode`, permitiéndonos pasar componentes
 :::
 
 :::warning
-Aunque la propiedad `message` soporta cadenas HTML, realizar arbitrariamente render dinamico de HTML en nuestro sitio web puede ser muy peligroso ya que puede conducir facilmente a [XSS attacks](https://en.wikipedia.org/wiki/Cross-site_scripting). Entonces cuando `dangerouslyUseHTMLString` esta activada, asegurece que el contendio de `message` sea de confianza, y **nunca** asignar `message` a contenido generado por el usuario.
+Aunque la propiedad `message` soporta cadenas HTML, realizar arbitrariamente render dinámico de HTML en nuestro sitio web puede ser muy peligroso ya que puede conducir fácilmente a [XSS attacks](https://en.wikipedia.org/wiki/Cross-site_scripting). Entonces cuando `dangerouslyUseHTMLString` esta activada, asegúrese que el contenido de `message` sea de confianza, y **nunca** asignar `message` a contenido generado por el usuario.
 :::
 
 ### Distinguir entre cancelar y cerrar
@@ -354,13 +209,13 @@ En algunos casos, hacer clic en el botón Cancelar y en el botón Cerrar puede t
 
 ```html
 <template>
-  <el-button type="text" @click="open6">Click to open Message Box</el-button>
+  <el-button type="text" @click="open">Click to open Message Box</el-button>
 </template>
 
 <script>
   export default {
     methods: {
-      open6() {
+      open() {
         this.$confirm('You have unsaved changes, save and proceed?', 'Confirm', {
           distinguishCancelAndClose: true,
           confirmButtonText: 'Save',
@@ -387,20 +242,20 @@ En algunos casos, hacer clic en el botón Cancelar y en el botón Cerrar puede t
 ```
 :::
 
-### Centered content
+### Contenido centrado
 El contenido del componente MessageBox puede ser centrado.
 
 :::demo Establecer `center` a `true` centrara el contenido
 
 ```html
 <template>
-  <el-button type="text" @click="open7">Click to open Message Box</el-button>
+  <el-button type="text" @click="open">Click to open Message Box</el-button>
 </template>
 
 <script>
   export default {
     methods: {
-      open7() {
+      open() {
         this.$confirm('This will permanently delete the file. Continue?', 'Warning', {
           confirmButtonText: 'OK',
           cancelButtonText: 'Cancel',
@@ -424,9 +279,9 @@ El contenido del componente MessageBox puede ser centrado.
 ```
 :::
 
-### Metodos Globales
+### Métodos Globales
 
-Si Element fue importado completamente, agregara los siguientes metodos globales para Vue.prototype: `$msgbox`, `$alert`, `$confirm` y `$prompt`. Asi que en una instancia de Vue puedes llamar el metodo `MessageBox` como lo que hicimos en esta pagina. Los parametros son:
+Si Element fue importado completamente, agregara los siguientes métodos globales para Vue.prototype: `$msgbox`, `$alert`, `$confirm` y `$prompt`. Así que en una instancia de Vue puedes llamar el método `MessageBox` como lo que hicimos en esta pagina. Los parámetros son:
 - `$msgbox(options)`
 - `$alert(message, title, options)` or `$alert(message, options)`
 - `$confirm(message, title, options)` or `$confirm(message, options)`
@@ -437,10 +292,10 @@ Si Element fue importado completamente, agregara los siguientes metodos globales
 Si prefieres importar `MessageBox` cuando lo necesites (on demand):
 
 ```javascript
-import { MessageBox } from 'element-ui';
+import { MessageBox } from '@femessage/element-ui';
 ```
 
-Los metodos correspondientes: `MessageBox`, `MessageBox.alert`, `MessageBox.confirm` y `MessageBox.prompt`. Los parametros son los mismos que los anteriores.
+Los métodos correspondientes: `MessageBox`, `MessageBox.alert`, `MessageBox.confirm` y `MessageBox.prompt`. Los parámetros son los mismos que los anteriores.
 
 ### Opciones
 
@@ -451,26 +306,26 @@ Los metodos correspondientes: `MessageBox`, `MessageBox.alert`, `MessageBox.conf
 | dangerouslyUseHTMLString | utilizado para que `message` sea tratado como una cadena HTML | boolean                                  | —                                | false                                    |
 | type                     | tipo de mensaje , utilizado para mostrar el  icono | string                                   | success / info / warning / error | —                                        |
 | iconClass                | clase personalizada para el icono, sobreescribe `type` | string         | —                          | —           |
-| customClass              | nombre de la clase personzalida para el componente MessageBox | string                                   | —                                | —                                        |
+| customClass              | nombre de la clase personalizada para el componente MessageBox | string                                   | —                                | —                                        |
 | callback                 | MessageBox callback al cerrar si no desea utilizar Promise | function(action), donde la accion puede ser 'confirm', 'cancel' o 'close', e `instance`  es la instancia del componente MessageBox. Puedes acceder a los metodos y atributos de esa instancia | —                                | —                                        |
 | beforeClose              | callback llamado antes de cerrar el componente MessageBox, y previene que el componente MessageBox se cierre | function(action, instance, done), donde `action` pueden ser 'confirm', 'cancel' o 'close'; `instance` es la instancia del componente MessageBox, Puedes acceder a los metodos y atributos de esa instancia; `done` es para cerrar la instancia | —                                | —                                        |
 | distinguishCancelAndClose | si se debe distinguir entre cancelar y cerrar | boolean | — | false |
 | lockScroll               | utilizado para bloquear el desplazamiento del contenido del MessageBox prompts | boolean                                  | —                                | true                                     |
-| showCancelButton         | utlizado para mostrar un boton cancelar  | boolean                                  | —                                | false (true cuando es llamado con confirm y prompt) |
-| showConfirmButton        | utlizado para mostrar un boton confirmar | boolean                                  | —                                | true                                     |
-| cancelButtonText         | contenido de texto del boton cancelar    | string                                   | —                                | Cancel                                   |
-| confirmButtonText        | contenido de texto del boton confirmar   | string                                   | —                                | OK                                       |
-| cancelButtonClass        | nombre de la clase personalizada del boton cancelar | string                                   | —                                | —                                        |
-| confirmButtonClass       | nombre de la clase personalizada del boton confirmar | string                                   | —                                | —                                        |
-| closeOnClickModal        | utilizado para que que el componenteMessageBox pueda ser cerrado al dar click en la mascara | boolean                                  | —                                | true (false cuando es llamado con alert) |
-| closeOnPressEscape       | utilizado para que que el componenteMessageBox pueda ser cerrado al presionar la tecla ESC | boolean                                  | —                                | true (false cuando es llamado con alert) |
+| showCancelButton         | utilizado para mostrar un botón cancelar | boolean                                  | —                                | false (true cuando es llamado con confirm y prompt) |
+| showConfirmButton        | utilizado para mostrar un botón confirmar | boolean                                  | —                                | true                                     |
+| cancelButtonText         | contenido de texto del botón cancelar | string                                   | —                                | Cancel                                   |
+| confirmButtonText        | contenido de texto del botón confirmar | string                                   | —                                | OK                                       |
+| cancelButtonClass        | nombre de la clase personalizada del botón cancelar | string                                   | —                                | —                                        |
+| confirmButtonClass       | nombre de la clase personalizada del botón confirmar | string                                   | —                                | —                                        |
+| closeOnClickModal        | utilizado para que que el componente MessageBox pueda ser cerrado al dar clic en la mascara | boolean                                  | —                                | true (false cuando es llamado con alert) |
+| closeOnPressEscape       | utilizado para que que el componente MessageBox pueda ser cerrado al presionar la tecla ESC | boolean                                  | —                                | true (false cuando es llamado con alert) |
 | closeOnHashChange        | utilizado para cerra el componente MessageBox cuando hash cambie | boolean                                  | —                                | true                                     |
 | showInput                | utilizado para mostrar el componente input | boolean                                  | —                                | false (true cuando es llamado con prompt) |
 | inputPlaceholder         | placeholder para el componente input     | string                                   | —                                | —                                        |
 | inputType                | tipo del componente input                | string                                   | —                                | text                                     |
 | inputValue               | valor inicial del componente input       | string                                   | —                                | —                                        |
 | inputPattern             | regexp del componente input              | regexp                                   | —                                | —                                        |
-| inputValidator           | funcion de validacion del componente input. Debe regresar un valor de tipo boolean o string. Si regresa un valor tipo string, sera asignado a inputErrorMessage | function                                 | —                                | —                                        |
-| inputErrorMessage        | mensaje de error cuando la validacion falla | string                                   | —                                | Illegal input                            |
+| inputValidator           | función de validación del componente input. Debe regresar un valor de tipo boolean o string. Si regresa un valor tipo string, sera asignado a inputErrorMessage | function                                 | —                                | —                                        |
+| inputErrorMessage        | mensaje de error cuando la validación falla | string                                   | —                                | Illegal input                            |
 | center                   | utilizado para alinear el contenido al centro | boolean                                  | —                                | false                                    |
-| roundButton              | utilizado para redondear el boton        | boolean                                  | —                                | false                                    |
+| roundButton              | utilizado para redondear el botón   | boolean                                  | —                                | false                                    |
diff --git a/examples/docs/es/message.md b/examples/docs/es/message.md
index 20fbd9d9ecd..ae0c76d150e 100644
--- a/examples/docs/es/message.md
+++ b/examples/docs/es/message.md
@@ -1,95 +1,12 @@
-<script>
-  module.exports = {
-    methods: {
-      open() {
-        this.$message('This is a message.');
-      },
-    
-      openVn() {
-        const h = this.$createElement;
-        this.$message({
-          message: h('p', null, [
-            h('span', null, 'Message can be '),
-            h('i', { style: 'color: teal' }, 'VNode')
-          ])
-        });
-      },
-    
-      open2() {
-        this.$message({
-          message: 'Congrats, this is a success message.',
-          type: 'success'
-        });
-      },
-    
-      open3() {
-        this.$message({
-          message: 'Warning, this is a warning message.',
-          type: 'warning'
-        });
-      },
-    
-      open4() {
-        this.$message.error('Oops, this is a error message.');
-      },
-    
-      open5() {
-        this.$message({
-          showClose: true,
-          message: 'This is a message.'
-        });
-      },
-    
-      open6() {
-        this.$message({
-          showClose: true,
-          message: 'Congrats, this is a success message.',
-          type: 'success'
-        });
-      },
-    
-      open7() {
-        this.$message({
-          showClose: true,
-          message: 'Warning, this is a warning message.',
-          type: 'warning'
-        });
-      },
-    
-      open8() {
-        this.$message({
-          showClose: true,
-          message: 'Oops, this is a error message.',
-          type: 'error'
-        });
-      },
-    
-      openCenter() {
-        this.$message({
-          message: 'Centered text',
-          center: true
-        });
-      },
-    
-      openHTML() {
-        this.$message({
-          dangerouslyUseHTMLString: true,
-          message: '<strong>This is <i>HTML</i> string</strong>'
-        });
-      }
-    }
-  };
-</script>
-
 ## Message
 
-Utilizado para mostrar retroalimentacion despues de una actividad. La diferencia con el componente Notification es que este ultimo es utilizado para mostrar una notificacion pasiva a nivel de sistema.
+Utilizado para mostrar retroalimentación después de una actividad. La diferencia con el componente Notification es que este ultimo es utilizado para mostrar una notificación pasiva a nivel de sistema.
 
-### Uso basico
+### Uso básico
 
-Se muestra en la parte superior de la pagina y desaparece despues de 3 segundos.
+Se muestra en la parte superior de la pagina y desaparece después de 3 segundos.
 
-:::demo La configuracion del componente Message es muy similar al del componente notification, asi que parte de las opciones no seran explicadas en detalle aqui. Puedes consultar la tabla de opciones en la parte inferior conbinada con la documentacion del componente notification para comprenderla. Element a registrado un metodo `$message` para poder invocarlo. Message puede tomar una cadena o un Vnode como parametro, y lo mostrara como el cuerpo principal.
+:::demo La configuración del componente Message es muy similar al del componente notification, así que parte de las opciones no serán explicadas en detalle aquí. Puedes consultar la tabla de opciones en la parte inferior combinada con la documentación del componente notification para comprenderla. Element a registrado un método `$message` para poder invocarlo. Message puede tomar una cadena o un Vnode como parámetro, y lo mostrara como el cuerpo principal.
 
 ```html
 <template>
@@ -121,21 +38,21 @@ Se muestra en la parte superior de la pagina y desaparece despues de 3 segundos.
 
 ### Tipos
 
-Utilizados para mostrar retroalimentacion de Success, Warning, Message y Error activities.
+Utilizados para mostrar retroalimentación de Success, Warning, Message y Error activities.
 
-:::demo Cuando necesite mas personalizacion, el componente Message tambien puede tomar un objeto como parametro. Por ejemplo, estableciendo el valor de `type` puede definir diferentes tipos, el predeterminado es `info`. En tales casos el cuerpo principal se pasa como el valor de `message`. Tambien, hay registrados metodos para los diferentes tipos, asi que, puedes llamarlos sin necesidad de pasar un tipo como `open4`.
+:::demo Cuando necesite mas personalización, el componente Message también puede tomar un objeto como parámetro. Por ejemplo, estableciendo el valor de `type` puede definir diferentes tipos, el predeterminado es `info`. En tales casos el cuerpo principal se pasa como el valor de `message`. También, hay registrados métodos para los diferentes tipos, así que, puedes llamarlos sin necesidad de pasar un tipo como `open4`.
 ```html
 <template>
   <el-button :plain="true" @click="open2">success</el-button>
   <el-button :plain="true" @click="open3">warning</el-button>
-  <el-button :plain="true" @click="open">message</el-button>
+  <el-button :plain="true" @click="open1">message</el-button>
   <el-button :plain="true" @click="open4">error</el-button>
 </template>
 
 <script>
   export default {
     methods: {
-      open() {
+      open1() {
         this.$message('This is a message.');
       },
       open2() {
@@ -163,28 +80,28 @@ Utilizados para mostrar retroalimentacion de Success, Warning, Message y Error a
 
 ### Closable
 
-Un boton para cerrar que puede ser agregado.
+Un botón para cerrar que puede ser agregado.
 
-:::demo Un componente Message predeterminado no se puede cerrar manualmente. Si necesitas un componente message que pueda cerrarse, puedes establecer el campo `showClose`. Ademas, al igual que las notificaciones, message tiene un atriubuto `duration` que puede ser controlado. Por defecto la duracion es de 3000 ms, y no desaparecera al llegar a `0`.
+:::demo Un componente Message predeterminado no se puede cerrar manualmente. Si necesitas un componente message que pueda cerrarse, puedes establecer el campo `showClose`. Ademas, al igual que las notificaciones, message tiene un atributo `duration` que puede ser controlado. Por defecto la duración es de 3000 ms, y no desaparecerá al llegar a `0`.
 ```html
 <template>
-  <el-button :plain="true" @click="open5">message</el-button>
-  <el-button :plain="true" @click="open6">success</el-button>
-  <el-button :plain="true" @click="open7">warning</el-button>
-  <el-button :plain="true" @click="open8">error</el-button>
+  <el-button :plain="true" @click="open1">message</el-button>
+  <el-button :plain="true" @click="open2">success</el-button>
+  <el-button :plain="true" @click="open3">warning</el-button>
+  <el-button :plain="true" @click="open4">error</el-button>
 </template>
 
 <script>
   export default {
     methods: {
-      open5() {
+      open1() {
         this.$message({
           showClose: true,
           message: 'This is a message.'
         });
       },
 
-      open6() {
+      open2() {
         this.$message({
           showClose: true,
           message: 'Congrats, this is a success message.',
@@ -192,7 +109,7 @@ Un boton para cerrar que puede ser agregado.
         });
       },
 
-      open7() {
+      open3() {
         this.$message({
           showClose: true,
           message: 'Warning, this is a warning message.',
@@ -200,7 +117,7 @@ Un boton para cerrar que puede ser agregado.
         });
       },
 
-      open8() {
+      open4() {
         this.$message({
           showClose: true,
           message: 'Oops, this is a error message.',
@@ -213,7 +130,7 @@ Un boton para cerrar que puede ser agregado.
 ```
 :::
 
-### Centered text
+### Texto centrado
 Utiliza el atributo `center` para centrar el texto.
 
 :::demo
@@ -264,10 +181,10 @@ Utiliza el atributo `center` para centrar el texto.
 :::
 
 :::warning
-Aunque la propiedad `message` soporta cadenas HTML, realizar arbitrariamente render dinamico de HTML en nuestro sitio web puede ser muy peligroso ya que puede conducir facilmente a [XSS attacks](https://en.wikipedia.org/wiki/Cross-site_scripting). Entonces cuando `dangerouslyUseHTMLString` esta activada, asegurece que el contendio de `message` sea de confianza, y **nunca** asignar `message` a contenido generado por el usuario.
+Aunque la propiedad `message` soporta cadenas HTML, realizar arbitrariamente render dinámico de HTML en nuestro sitio web puede ser muy peligroso ya que puede conducir fácilmente a [XSS attacks](https://en.wikipedia.org/wiki/Cross-site_scripting). Entonces cuando `dangerouslyUseHTMLString` esta activada, asegurese que el contenido de `message` sea de confianza, y **nunca** asignar `message` a contenido generado por el usuario.
 :::
 
-### Metodos Globales
+### Métodos Globales
 
 Element ha agregado un método global llamado `$message` para Vue.prototype. Entonces en una instancia de vue puede llamar a `Message` como lo hicimos en esta pagina.
 
@@ -276,10 +193,10 @@ Element ha agregado un método global llamado `$message` para Vue.prototype. Ent
 Import `Message`:
 
 ```javascript
-import { Message } from 'element-ui';
+import { Message } from '@femessage/element-ui';
 ```
 
-En este caso deberia llamar al metodo `Message(options)`. Tambien se han registrado metodos para los diferentes tipos, e.g. `Message.success(options)`. Puede llamar al metodo `Message.closeAll()` para cerrar manualmente todas las instancias.
+En este caso debería llamar al método `Message(options)`. También se han registrado métodos para los diferentes tipos, e.g. `Message.success(options)`. Puede llamar al método `Message.closeAll()` para cerrar manualmente todas las instancias.
 
 ### Options
 | Atributo                 | Descripcion                              | Tipo           | Valores permitidos         | Por defecto |
@@ -289,13 +206,15 @@ En este caso deberia llamar al metodo `Message(options)`. Tambien se han registr
 | iconClass                | clase personalizada para el icono, sobreescribe `type` | string         | —                          | —           |
 | dangerouslyUseHTMLString | utilizado para que `message` sea tratado como cadena HTML | boolean        | —                          | false       |
 | customClass              | nombre de clase personalizado para el componente Message | string         | —                          | —           |
-| duration                 | muestra la duracion,en milisegundos. si se establece en 0, este no se apagara automaticamente | number         | —                          | 3000        |
-| showClose                | utilizado para mostrar un boton para cerrar | boolean        | —                          | false       |
+| duration                 | muestra la duración,en milisegundos. si se establece en 0, este no se apagara automáticamente | number         | —                          | 3000        |
+| showClose                | utilizado para mostrar un botón para cerrar | boolean        | —                          | false       |
 | center                   | utilizado para centrar el texto          | boolean        | —                          | false       |
-| onClose                  | funcion callback ejecutada cuando se cierra con una instancia de mensaje como parametro | function       | —                          | —           |
+| onClose                  | función callback ejecutada cuando se cierra con una instancia de mensaje como parámetro | function       | —                          | —           |
+| offset | La distancia desde la parte superior del  viewport | number | — | 20 |
+
+### Métodos
+`Message` y `this.$message` regresan una instancia del componente Message. Para cerrar manualmente la instancia, puede llamar al método `close`.
 
-### Metodos
-`Message` y `this.$message` regresan una instancia del componente Message. Para cerrar manualmente la instancia, puede llamar al metodo `close`.
-| Metodo | Descripcion                  |
+| Método | Descripción                  |
 | ------ | ---------------------------- |
 | close  | cierra el componente Message |
diff --git a/examples/docs/es/notification.md b/examples/docs/es/notification.md
index 66fae1f25d4..dedabb42a1c 100644
--- a/examples/docs/es/notification.md
+++ b/examples/docs/es/notification.md
@@ -1,115 +1,3 @@
-<script>
-  module.exports = {
-    methods: {
-      open() {
-        const h = this.$createElement;
-    
-        this.$notify({
-          title: 'Title',
-          message: h('i', { style: 'color: teal' }, 'This is a reminder')
-        });
-      },
-    
-      open2() {
-        this.$notify({
-          title: 'Prompt',
-          message: 'This is a message that does not automatically close',
-          duration: 0
-        });
-      },
-    
-      open3() {
-        this.$notify({
-          title: 'Success',
-          message: 'This is a success message',
-          type: 'success'
-        });
-      },
-    
-      open4() {
-        this.$notify({
-          title: 'Warning',
-          message: 'This is a warning message',
-          type: 'warning'
-        });
-      },
-    
-      open5() {
-        this.$notify.info({
-          title: 'Info',
-          message: 'This is an info message'
-        });
-      },
-    
-      open6() {
-        this.$notify.error({
-          title: 'Error',
-          message: 'This is an error message'
-        });
-      },
-    
-      open7() {
-        this.$notify({
-          title: 'Custom Position',
-          message: 'I\'m at the top right corner'
-        });
-      },
-    
-      open8() {
-        this.$notify({
-          title: 'Custom Position',
-          message: 'I\'m at the bottom right corner',
-          position: 'bottom-right'
-        });
-      },
-    
-      open9() {
-        this.$notify({
-          title: 'Custom Position',
-          message: 'I\'m at the bottom left corner',
-          position: 'bottom-left'
-        });
-      },
-    
-      open10() {
-        this.$notify({
-          title: 'Custom Position',
-          message: 'I\'m at the top left corner',
-          position: 'top-left'
-        });
-      },
-    
-      open11() {
-        this.$notify.success({
-          title: 'Success',
-          message: 'This is a success message',
-          offset: 100
-        });
-      },
-    
-      open12() {
-        this.$notify({
-          title: 'HTML String',
-          dangerouslyUseHTMLString: true,
-          message: '<strong>This is <i>HTML</i> string</strong>'
-        });
-      },
-      
-      open13() {
-        this.$notify.success({
-          title: 'Info',
-          message: 'This is a message without close button',
-          showClose: false
-        });
-      },
-    
-      onClose() {
-        console.log('Notification is closed');
-      }
-    }
-  };
-</script>
-
 ## Notification
 
 Muestra un mensaje de notificación global en una esquina de la página.
@@ -122,7 +10,7 @@ Muestra un mensaje de notificación global en una esquina de la página.
 <template>
   <el-button
     plain
-    @click="open">
+    @click="open1">
     Closes automatically
   </el-button>
   <el-button
@@ -135,7 +23,7 @@ Muestra un mensaje de notificación global en una esquina de la página.
 <script>
   export default {
     methods: {
-      open() {
+      open1() {
         const h = this.$createElement;
 
         this.$notify({
@@ -161,28 +49,28 @@ Muestra un mensaje de notificación global en una esquina de la página.
 
 Proporcionamos cuatro tipos: success, warning, info y error.
 
-:::demo Element proporciona cuatro tipos de notificación: `success`, `warning`, `info` y `error`. Se definen por el campo `type`  y se ignorarán otros valores. También se han registrado métodos para estos tipos que se pueden invocar directamente como en el ejemplo `open5` y `open6` sin pasar un campo `type`.
+:::demo Element proporciona cuatro tipos de notificación: `success`, `warning`, `info` y `error`. Se definen por el campo `type`  y se ignorarán otros valores. También se han registrado métodos para estos tipos que se pueden invocar directamente como en el ejemplo `open3` y `open4` sin pasar un campo `type`.
 
 ```html
 <template>
   <el-button
     plain
-    @click="open3">
+    @click="open1">
     Success
   </el-button>
   <el-button
     plain
-    @click="open4">
+    @click="open2">
     Warning
   </el-button>
   <el-button
     plain
-    @click="open5">
+    @click="open3">
     Info
   </el-button>
   <el-button
     plain
-    @click="open6">
+    @click="open4">
     Error
   </el-button>
 </template>
@@ -190,7 +78,7 @@ Proporcionamos cuatro tipos: success, warning, info y error.
 <script>
   export default {
     methods: {
-      open3() {
+      open1() {
         this.$notify({
           title: 'Success',
           message: 'This is a success message',
@@ -198,7 +86,7 @@ Proporcionamos cuatro tipos: success, warning, info y error.
         });
       },
 
-      open4() {
+      open2() {
         this.$notify({
           title: 'Warning',
           message: 'This is a warning message',
@@ -206,14 +94,14 @@ Proporcionamos cuatro tipos: success, warning, info y error.
         });
       },
 
-      open5() {
+      open3() {
         this.$notify.info({
           title: 'Info',
           message: 'This is an info message'
         });
       },
 
-      open6() {
+      open4() {
         this.$notify.error({
           title: 'Error',
           message: 'This is an error message'
@@ -225,7 +113,7 @@ Proporcionamos cuatro tipos: success, warning, info y error.
 ```
 :::
 
-### Posicion personalizada
+### Posición personalizada
 
 La notificación puede surgir de cualquier rincón que uno desee.
 
@@ -235,22 +123,22 @@ La notificación puede surgir de cualquier rincón que uno desee.
 <template>
   <el-button
     plain
-    @click="open7">
+    @click="open1">
     Top Right
   </el-button>
   <el-button
     plain
-    @click="open8">
+    @click="open2">
     Bottom Right
   </el-button>
   <el-button
     plain
-    @click="open9">
+    @click="open3">
     Bottom Left
   </el-button>
   <el-button
     plain
-    @click="open10">
+    @click="open4">
     Top Left
   </el-button>
 </template>
@@ -258,14 +146,14 @@ La notificación puede surgir de cualquier rincón que uno desee.
 <script>
   export default {
     methods: {
-      open7() {
+      open1() {
         this.$notify({
           title: 'Custom Position',
           message: 'I\'m at the top right corner'
         });
       },
 
-      open8() {
+      open2() {
         this.$notify({
           title: 'Custom Position',
           message: 'I\'m at the bottom right corner',
@@ -273,7 +161,7 @@ La notificación puede surgir de cualquier rincón que uno desee.
         });
       },
 
-      open9() {
+      open3() {
         this.$notify({
           title: 'Custom Position',
           message: 'I\'m at the bottom left corner',
@@ -281,7 +169,7 @@ La notificación puede surgir de cualquier rincón que uno desee.
         });
       },
 
-      open10() {
+      open4() {
         this.$notify({
           title: 'Custom Position',
           message: 'I\'m at the top left corner',
@@ -304,7 +192,7 @@ Personalizar el desplazamiento de notificación desde el borde de la pantalla.
 <template>
   <el-button
     plain
-    @click="open11">
+    @click="open">
     Notification with offset
   </el-button>
 </template>
@@ -312,7 +200,7 @@ Personalizar el desplazamiento de notificación desde el borde de la pantalla.
 <script>
   export default {
     methods: {
-      open11() {
+      open() {
         this.$notify.success({
           title: 'Success',
           message: 'This is a success message',
@@ -334,7 +222,7 @@ Personalizar el desplazamiento de notificación desde el borde de la pantalla.
 <template>
   <el-button
     plain
-    @click="open12">
+    @click="open">
     Use HTML String
   </el-button>
 </template>
@@ -342,7 +230,7 @@ Personalizar el desplazamiento de notificación desde el borde de la pantalla.
 <script>
   export default {
     methods: {
-      open12() {
+      open() {
         this.$notify({
           title: 'HTML String',
           dangerouslyUseHTMLString: true,
@@ -371,7 +259,7 @@ Es posible ocultar el botón de cerrar
 <template>
   <el-button
     plain
-    @click="open13">
+    @click="open">
     Hide close button
     </el-button>
 </template>
@@ -379,7 +267,7 @@ Es posible ocultar el botón de cerrar
 <script>
   export default {
     methods: {
-      open13() {
+      open() {
         this.$notify.success({
           title: 'Info',
           message: 'This is a message without close button',
@@ -392,7 +280,7 @@ Es posible ocultar el botón de cerrar
 ```
 :::
 
-### Metodo global
+### Método global
 
 Element ha añadido un método global `$notify` para Vue.prototype. Así que en una instancia de vue se puede llamar `Notification` como lo hacemos en esta página.
 
@@ -401,29 +289,29 @@ Element ha añadido un método global `$notify` para Vue.prototype. Así que en
 Importar `Notification`:
 
 ```javascript
-import { Notification } from 'element-ui';
+import { Notification } from '@femessage/element-ui';
 ```
 
-En este caso, debe llamar a `Notification(options)`. También se han registrado métodos para diferentes tipos, e.j. `Notification.success(options)`. Puede llamar al metodo `Notification.closeAll()` para cerrar manualmente todas las instancias.
+En este caso, debe llamar a `Notification(options)`. También se han registrado métodos para diferentes tipos, e.j. `Notification.success(options)`. Puede llamar al método `Notification.closeAll()` para cerrar manualmente todas las instancias.
 
 ### Opciones
-| Atributo                 | Descripción                              | Tipo             | Valores aceptados                        | Por defecto |
-| ------------------------ | ---------------------------------------- | ---------------- | ---------------------------------------- | ----------- |
-| title                    | titulo                                   | string           | —                                        | —           |
-| message                  | mensaje                                  | string/Vue.VNode | —                                        | —           |
-| dangerouslyUseHTMLString | si  `message` es tratado como una cadena HTML | boolean          | —                                        | false       |
-| type                     | tipo de notificacion                     | string           | success/warning/info/error               | —           |
-| iconClass                | clase personalizada de icono. Será anulado por `type` | string           | —                                        | —           |
-| customClass              | nombre de clase personalizado para la notificacion | string           | —                                        | —           |
-| duration                 | duracion antes de cerrar. Si no se quiere que se cierre automaticamente este valor debe estar a 0 | number           | —                                        | 4500        |
-| position                 | posicion personalizada                   | string           | top-right/top-left/bottom-right/bottom-left | top-right   |
-| showClose                | si se muestra el boton de cerrar         | boolean          | —                                        | true        |
-| onClose                  | funcion que se ejecuta cuando la notificación se cierra | function         | —                                        | —           |
-| onClick                  | funcion que se ejecuta cuando se hace click en la notificación | function         | —                                        | —           |
-| offset                   | desplazamiento desde el borde superior de la pantalla. Cada instancia de notificación del mismo momento debe tener siempre el mismo desplazamiento. | number           | —                                        | 0           |
-
-### Metodos
-`Notification` y `this.$notify` devuelven la instancia de la notificacion actual. Para cerrar manualmente la instancia, se puede llamar `close` para ello.
+| Atributo                 | Descripción                                                  | Tipo             | Valores aceptados                           | Por defecto |
+| ------------------------ | ------------------------------------------------------------ | ---------------- | ------------------------------------------- | ----------- |
+| title                    | titulo                                                       | string           | —                                           | —           |
+| message                  | mensaje                                                      | string/Vue.VNode | —                                           | —           |
+| dangerouslyUseHTMLString | si  `message` es tratado como una cadena HTML                | boolean          | —                                           | false       |
+| type                     | tipo de notificación                                         | string           | success/warning/info/error                  | —           |
+| iconClass                | clase personalizada de icono. Será anulado por `type`        | string           | —                                           | —           |
+| customClass              | nombre de clase personalizado para la notificación           | string           | —                                           | —           |
+| duration                 | duración antes de cerrar. Si no se quiere que se cierre automáticamente este valor debe estar a 0 | number           | —                                           | 4500        |
+| position                 | posición personalizada                                       | string           | top-right/top-left/bottom-right/bottom-left | top-right   |
+| showClose                | si se muestra el botón de cerrar                             | boolean          | —                                           | true        |
+| onClose                  | función que se ejecuta cuando la notificación se cierra      | function         | —                                           | —           |
+| onClick                  | función que se ejecuta cuando se hace clic en la notificación | function         | —                                           | —           |
+| offset                   | desplazamiento desde el borde superior de la pantalla. Cada instancia de notificación del mismo momento debe tener siempre el mismo desplazamiento. | number           | —                                           | 0           |
+
+### Métodos
+`Notification` y `this.$notify` devuelven la instancia de la notificación actual. Para cerrar manualmente la instancia, se puede llamar `close` para ello.
 
 | Metodo | Descripción            |
 | ------ | ---------------------- |
diff --git a/examples/docs/es/page-header.md b/examples/docs/es/page-header.md
new file mode 100644
index 00000000000..19550dddd95
--- /dev/null
+++ b/examples/docs/es/page-header.md
@@ -0,0 +1,39 @@
+## PageHeader
+
+Si la ruta de la página es simple, se recomienda utilizar  PageHeader en lugar de Breadcrumb.
+
+### Básico
+
+:::demo
+```html
+<el-page-header @back="goBack" content="detail">
+</el-page-header>
+
+<script>
+  export default {
+    methods: {
+      goBack() {
+        console.log('go back');
+      }
+    }
+  }
+</script>
+```
+:::
+
+### Atributos
+| Atributos | Descripción | Tipo   | Valores aceptados | Por defecto |
+|---------- |-------------- |---------- |------------------------------ | ------ |
+| title     | titulo principal | string    |  —                            | Back   |
+| content   | contenido   | string    |  —                            | —      |
+
+### Eventos
+| Nombre evento | Descripción | Parámetros |
+|----------- |-------------- |----------- |
+| back       | se activa cuando se hace clic en el lado derecho | — |
+
+### Slots
+| Nombre del slot | Descripción |
+| --------------- | ----------- |
+| title           | titulo      |
+| content         | contenido   |
diff --git a/examples/docs/es/pagination.md b/examples/docs/es/pagination.md
index 3c1e928a810..0c83302ca4c 100644
--- a/examples/docs/es/pagination.md
+++ b/examples/docs/es/pagination.md
@@ -1,53 +1,3 @@
-<style>
-  .demo-pagination .source.first {
-    padding: 0;
-  }
-
-  .demo-pagination .first .block {
-    padding: 30px 0;
-    text-align: center;
-    border-right: solid 1px #EFF2F6;
-    display: inline-block;
-    width: 50%;
-    box-sizing: border-box;
-    
-    &:last-child {
-      border-right: none;
-    }
-  }
-
-  .demo-pagination .first .demonstration {
-    display: block;
-    color: #8492a6;
-    font-size: 14px;
-    margin-bottom: 20px;
-  }
-
-  .demo-pagination .source.last {
-    padding: 0;
-  }
-
-  .demo-pagination .last .block {
-    padding: 30px 24px;
-    border-bottom: solid 1px #EFF2F6;
-    &:last-child {
-      border-bottom: none;
-    }
-  }
-
-  .demo-pagination .last .demonstration {
-    font-size: 14px;
-    color: #8492a6;
-    line-height: 44px;
-  }
-
-  .demo-pagination .last .demonstration + .el-pagination {
-    float: right;
-    width: 70%;
-    margin: 5px 20px 0 0;
-  }
-</style>
-
 ## Paginación
 Si tiene que mostrar muchos datos en una página, utilice la paginación.
 
@@ -72,9 +22,9 @@ Si tiene que mostrar muchos datos en una página, utilice la paginación.
 ```
 :::
 
-### Number of pagers
+### Números de paginas
 
-:::demo By default, Pagination collapses extra pager buttons when it has more than 7 pages. This can be configured with the `pager-count` attribute.
+:::demo De forma predeterminada, Pagination colapsa los botones del paginador adicionales cuando tiene más de 7 páginas. Esto se puede configurar con el atributo `pager-count`.
 ```html
 <el-pagination
   :page-size="20"
@@ -101,7 +51,7 @@ Usa una paginación pequeña en caso de espacio limitado.
 
 ### Más elementos
 
-Agrega más modulos basados en su escenario.
+Agrega más módulos basados en su escenario.
 
 :::demo Este ejemplo es un completo caso de uso. Utiliza los eventos `size-change` y `current-change` para manejar el tamaño de página y el cambio de página. El atributo `page-sizes` acepta un arreglo de enteros, cada uno representa un diferente valor del atributo `sizes` que es un `select`, ejemplo `[100, 200, 300, 400]` indicará que el `select` tendrá las opciones: 100, 200, 300 o 400 elementos por página.
 
@@ -175,37 +125,35 @@ Agrega más modulos basados en su escenario.
   }
 </script>
 ```
+
 :::
+### Oculte la paginación cuando el resultado es solo una pagina simple
+
+Cuando sólo hay una página, oculte la paginación configurando el atributo `hide-on-single-page`.
+
+:::demo
+```html
+<div>
+ <el-switch v-model="value">
+ </el-switch>
+ <el-pagination
+  :hide-on-single-page="value"
+  :total="5"
+  layout="prev, pager, next">
+</el-pagination>
+</div>
+
 <script>
-  import { addClass } from 'element-ui/src/utils/dom';
   export default {
     data() {
       return {
-        currentPage1: 5,
-        currentPage2: 5,
-        currentPage3: 5,
-        currentPage4: 4
-      };
-    },
-    methods: {
-      handleSizeChange(val) {
-        console.log(`${val} items per page`);
-      },
-      handleCurrentChange(val) {
-        console.log(`current page: ${val}`);
+        value: false
       }
-    },
-    mounted() {
-      this.$nextTick(() => {
-        let demos = document.querySelectorAll('.source');
-        let firstDemo = demos[0];
-        let lastDemo = demos[demos.length - 1];
-        addClass(firstDemo, 'first');
-        addClass(lastDemo, 'last');
-      });
     }
   }
 </script>
+```
+:::
 
 ### Atributos
 | Atributo     | Descripción                              | Tipo     | Valores aceptados                        | Por defecto                            |
@@ -221,15 +169,16 @@ Agrega más modulos basados en su escenario.
 | popper-class | clase propia para el `dropdown` del `select` del número de páginas | string   | —                                        | —                                      |
 | prev-text    | texto para el botón `prev`               | string   | —                                        | —                                      |
 | next-text    | texto para el botón `next`               | string   | —                                        | —                                      |
-| disabled | si Pagination esta disabled | boolean | — | false |
+| disabled     | si Pagination esta disabled              | boolean  | —                                        | false                                  |
+| hide-on-single-page | si ocultar cuando sólo hay una página | boolean |—                                 | -                                      |
 
 ### Eventos
 | Nombre del evento | Descripción                             | Parámetros                    |
 | ----------------- | --------------------------------------- | ----------------------------- |
 | size-change       | se dispara cuando `page-size` cambia    | nuevo valor de `page-size`    |
 | current-change    | se dispara cuando `current-page` cambia | nuevo valor de `current-page` |
-| prev-click | Se dispara cuando el boton `prev` recibe el click y la pagina actual cambia | la nueva pagina actual |
-| next-click | Se dispara cuando el boton `next` recibe el click y la pagina actual cambia | la nueva pagina actual |
+| prev-click | Se dispara cuando el botón `prev` recibe el clic y la pagina actual cambia | la nueva pagina actual |
+| next-click | Se dispara cuando el botón `next` recibe el clic y la pagina actual cambia | la nueva pagina actual |
 
 ### Slot
 | Nombre | Descripción                              |
diff --git a/examples/docs/es/panel.md b/examples/docs/es/panel.md
new file mode 100644
index 00000000000..48382924949
--- /dev/null
+++ b/examples/docs/es/panel.md
@@ -0,0 +1 @@
+## Panel
diff --git a/examples/docs/es/popconfirm.md b/examples/docs/es/popconfirm.md
new file mode 100644
index 00000000000..72033bfc06f
--- /dev/null
+++ b/examples/docs/es/popconfirm.md
@@ -0,0 +1,54 @@
+## Popconfirm 
+
+A simple confirmation dialog of an element click action.
+
+### Basic usage
+
+Popconfirm is similar to Popover. So for some duplicated attributes, please refer to the documentation of Popover.
+
+:::demo Only `title` attribute is avaliable in Popconfirm, `content` will be ignored.
+```html
+<template>
+<el-popconfirm
+  title="Are you sure to delete this?"
+>
+  <el-button slot="reference">Delete</el-button>
+</el-popconfirm>
+</template>
+````
+:::
+
+### Customise
+You can customise Popconfirm like:
+:::demo
+```html
+<template>
+<el-popconfirm
+  confirmButtonText='OK'
+  cancelButtonText='No, Thanks'
+  icon="el-icon-info"
+  iconColor="red"
+  title="Are you sure to delete this?"
+>
+  <el-button slot="reference">Delete</el-button>
+</el-popconfirm>
+</template>
+```
+:::
+
+### Attributes
+| Attribute      | Description          | Type      | Accepted Values       | Default  |
+|--------------------|----------------------------------------------------------|-------------------|-------------|--------|
+|  title              | Title | String | — | — |
+|  confirmButtonText              | Confirm button text | String | — | — |
+|  cancelButtonText              | Cancel button text | String | — | — |
+|  confirmButtonType              | Confirm button type | String | — | Primary |
+|  cancelButtonType              | Cancel button type | String | — | Text |
+|  icon              | Icon | String | — | el-icon-question |
+|  iconColor              | Icon color | String | — | #f90 |
+|  hideIcon              | is hide Icon | Boolean | — | false |
+
+### Slot
+| Name | Description |
+|--- | ---|
+| reference | HTML element that triggers Popconfirm |
diff --git a/examples/docs/es/popover.md b/examples/docs/es/popover.md
index bdc1c71357a..f51bb81b103 100644
--- a/examples/docs/es/popover.md
+++ b/examples/docs/es/popover.md
@@ -1,107 +1,10 @@
-<script>
-  export default {
-    data() {
-      return {
-        visible: false,
-        visible2: false,
-        gridData: [{
-          date: '2016-05-02',
-          name: 'Jack',
-          address: 'New York City'
-        }, {
-          date: '2016-05-04',
-          name: 'Jack',
-          address: 'New York City'
-        }, {
-          date: '2016-05-01',
-          name: 'Jack',
-          address: 'New York City'
-        }, {
-          date: '2016-05-03',
-          name: 'Jack',
-          address: 'New York City'
-        }],
-        gridData2: [{
-          date: '2016-05-02',
-          name: 'Jack',
-          address: 'New York City',
-        }, {
-          date: '2016-05-04',
-          name: 'Jack',
-          address: 'New York City',
-          $info: true
-        }, {
-          date: '2016-05-01',
-          name: 'Jack',
-          address: 'New York City',
-        }, {
-          date: '2016-05-03',
-          name: 'Jack',
-          address: 'New York City',
-          $positive: true
-        }],
-        gridData3: [{
-          tag: 'Home',
-          date: '2016-05-03',
-          name: 'Jack',
-          address: 'New York City'
-        }, {
-          tag: 'Company',
-          date: '2016-05-02',
-          name: 'Jack',
-          address: 'New York City'
-        }, {
-          tag: 'Company',
-          date: '2016-05-04',
-          name: 'Jack',
-          address: 'New York City'
-        }, {
-          tag: 'Home',
-          date: '2016-05-01',
-          name: 'Jack',
-          address: 'New York City'
-        }, {
-          tag: 'Company',
-          date: '2016-05-08',
-          name: 'Jack',
-          address: 'New York City'
-        }, {
-          tag: 'Home',
-          date: '2016-05-06',
-          name: 'Jack',
-          address: 'New York City'
-        }, {
-          tag: 'Company',
-          date: '2016-05-07',
-          name: 'Jack',
-          address: 'New York City'
-        }]
-      };
-    }
-  };
-</script>
-
-<style>
-  .demo-box.demo-popover {
-    .el-popover + .el-popover {
-      margin-left: 10px;
-    }
-    .el-input {
-      width: 360px;
-    }
-    .el-button {
-      margin-left: 10px;
-    }
-  }
-</style>
-
 ## Popover
 
 ### Uso básico
 
 Similar a un Tooltip, Popover está construido con `Vue-popper`. Así que para atributos duplicados, por favor refiérase a la documentación de Tooltip.
 
-:::demo El atributo `trigger` es usado para definir como el popover se dispara: `hover`, `click`, `focus` o `manual`. As for the triggering element, you can write it in two different ways: use the `slot="reference"` [named slot](https://vuejs.org/v2/guide/components.html#Named-Slots), or use the `v-popover` directive and set it to Popover's `ref`.
+:::demo El atributo `trigger` es usado para definir como el popover se dispara: `hover`, `click`, `focus` o `manual`. En cuanto al elemento desencadenante, puedes escribirlo de dos maneras diferentes: usando el `slot="reference"`[named slot](https://vuejs.org/v2/guide/components.html#Named-Slots), o usando la directiva `v-popover` y poniendo  el `ref` de Popover.
 
 ```html
 <template>
@@ -211,11 +114,11 @@ Por supuesto, puedes anidar otras operaciones. Es más ligero que utilizar un `d
 <el-popover
   placement="top"
   width="160"
-  v-model="visible2">
+  v-model="visible">
   <p>Are you sure to delete this?</p>
   <div style="text-align: right; margin: 0">
-    <el-button size="mini" type="text" @click="visible2 = false">cancel</el-button>
-    <el-button type="primary" size="mini" @click="visible2 = false">confirm</el-button>
+    <el-button size="mini" type="text" @click="visible = false">cancel</el-button>
+    <el-button type="primary" size="mini" @click="visible = false">confirm</el-button>
   </div>
   <el-button slot="reference">Delete</el-button>
 </el-popover>
@@ -224,7 +127,7 @@ Por supuesto, puedes anidar otras operaciones. Es más ligero que utilizar un `d
   export default {
     data() {
       return {
-        visible2: false,
+        visible: false,
       };
     }
   }
@@ -241,13 +144,15 @@ Por supuesto, puedes anidar otras operaciones. Es más ligero que utilizar un `d
 | width          | ancho del popover                        | string, number | —                                        | Min width 150px                          |
 | placement      | posición del popover en la pantalla      | string         | top/top-start/top-end/bottom/bottom-start/bottom-end/left/left-start/left-end/right/right-start/right-end | bottom                                   |
 | disabled       | si el popover está deshabilitado         | boolean        | —                                        | false                                    |
-| value(v-model) | si el popover está visible               | Boolean        | —                                        | false                                    |
+| value / v-model | si el popover está visible               | Boolean        | —                                        | false                                    |
 | offset         | popover offset                           | number         | —                                        | 0                                        |
-| transition     | popover transition animation             | string         | —                                        | el-fade-in-linear                        |
+| transition     | animación de transición del popover | string         | —                                        | el-fade-in-linear                        |
 | visible-arrow  | si una flecha del tooltip es mostrada o no. Para más información, por favor refiérase a [Vue-popper](https://github.com/element-component/vue-popper) | boolean        | —                                        | true                                     |
 | popper-options | parámetros para [popper.js](https://popper.js.org/documentation.html) | object         | por favor, refiérase a [popper.js](https://popper.js.org/documentation.html) | `{ boundariesElement: 'body', gpuAcceleration: false }` |
 | popper-class   | clase propia para popover                | string         | —                                        | —                                        |
 | open-delay     | retraso de la aparición cuando `trigger` es hover, en milisegundos | number         | —                                        | —                                        |
+| close-delay    | Retraso antes de desaparecer cuando el `trigger` es hover, en milisegundos. | number | — | 200 |
+| tabindex       | [tabindex](https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/tabindex) de Popover |   number           |      —      |  0    |
 
 ### Slot
 | Nombre    | Descripción                          |
@@ -259,6 +164,6 @@ Por supuesto, puedes anidar otras operaciones. Es más ligero que utilizar un `d
 | Nombre del evento | Descripción                             | Parámetros |
 | ----------------- | --------------------------------------- | ---------- |
 | show              | se dispara cuando se muestra el popover | —          |
-| after-enter       | se dispara cuando la transicion de entrada termina | —       |
+| after-enter       | se dispara cuando la transición de entrada termina | —       |
 | hide              | se dispara cuando se oculta el popover  | —          |
-| after-leave       | se dispara cuando la transicion de salida termina | —        |
+| after-leave       | se dispara cuando la transición de salida termina | —        |
diff --git a/examples/docs/es/progress.md b/examples/docs/es/progress.md
index 7883822997c..553dc55aef1 100644
--- a/examples/docs/es/progress.md
+++ b/examples/docs/es/progress.md
@@ -1,39 +1,100 @@
-<style>
-  .demo-box.demo-progress {
-    .el-progress--line {
-      margin-bottom: 15px;
-      width: 350px;
-    }
-    .el-progress--circle {
-      margin-right: 15px;
-    }
-  }
-</style>
 ## Progreso
 Progreso es usado para mostrar el estado de la operación actual e informar al usuario acerca de ésta.
 
-### Barra de progreso lineal (porcentage externo)
+### Barra de progreso lineal
+
+:::demo Usa el atributo `percentage` para asignar el porcentaje. Este es **requerido** y tiene que ser un valor entre `0-100`. Puede personalizar el formato de texto estableciendo `format`.
 
-:::demo Usa el atributo `percentage` para asignar el porcentage. Este es **requerido** y tiene que ser un valor entre `0-100`.
 ```html
-<el-progress :percentage="0"></el-progress>
-<el-progress :percentage="70"></el-progress>
-<el-progress :percentage="80" color="#8e71c7"></el-progress>
+<el-progress :percentage="50"></el-progress>
+<el-progress :percentage="100" :format="format"></el-progress>
 <el-progress :percentage="100" status="success"></el-progress>
+<el-progress :percentage="100" status="warning"></el-progress>
 <el-progress :percentage="50" status="exception"></el-progress>
+
+<script>
+  export default {
+    methods: {
+      format(percentage) {
+        return percentage === 100 ? 'Full' : `${percentage}%`;
+      }
+    }
+  };
+</script>
 ```
 :::
 
-### Barra de progreso lineal (porcentage interno)
-En este caso el porcentage no toma espacio adicional.
+### Porcentaje interno
+En este caso el porcentaje no toma espacio adicional.
 
 :::demo El atributo `stroke-width` decide el ancho de la barra de progreso, y usa el atributo `text-inside` para poner la descripción dentro de la misma.
 ```html
-<el-progress :text-inside="true" :stroke-width="18" :percentage="0"></el-progress>
-<el-progress :text-inside="true" :stroke-width="18" :percentage="70"></el-progress>
-<el-progress :text-inside="true" :stroke-width="18" :percentage="80" color="rgba(142, 113, 199, 0.7)"></el-progress>
-<el-progress :text-inside="true" :stroke-width="18" :percentage="100" status="success"></el-progress>
-<el-progress :text-inside="true" :stroke-width="18" :percentage="50" status="exception"></el-progress>
+<el-progress :text-inside="true" :stroke-width="26" :percentage="70"></el-progress>
+<el-progress :text-inside="true" :stroke-width="24" :percentage="100" status="success"></el-progress>
+<el-progress :text-inside="true" :stroke-width="22" :percentage="80" status="warning"></el-progress>
+<el-progress :text-inside="true" :stroke-width="20" :percentage="50" status="exception"></el-progress>
+```
+:::
+
+### Color personalizado
+
+Puede utilizar el atributo `color` para establecer el color de la barra de progreso.
+
+:::demo
+
+```html
+<el-progress :percentage="percentage" :color="customColor"></el-progress>
+
+<el-progress :percentage="percentage" :color="customColorMethod"></el-progress>
+
+<el-progress :percentage="percentage" :color="customColors"></el-progress>
+<div>
+  <el-button-group>
+    <el-button icon="el-icon-minus" @click="decrease"></el-button>
+    <el-button icon="el-icon-plus" @click="increase"></el-button>
+  </el-button-group>
+</div>
+
+<script>
+  export default {
+    data() {
+      return {
+        percentage: 20,
+        customColor: '#2460e0',
+        customColors: [
+          {color: '#FF4D4F', percentage: 20},
+          {color: '#F5A623', percentage: 40},
+          {color: '#5cb87a', percentage: 60},
+          {color: '#1989fa', percentage: 80},
+          {color: '#6f7ad3', percentage: 100}
+        ]
+      };
+    },
+    methods: {
+      customColorMethod(percentage) {
+        if (percentage < 30) {
+          return '#A7A8AD';
+        } else if (percentage < 70) {
+          return '#F5A623';
+        } else {
+          return '#2FD163';
+        }
+      },
+      increase() {
+        this.percentage += 10;
+        if (this.percentage > 100) {
+          this.percentage = 100;
+        }
+      },
+      decrease() {
+        this.percentage -= 10;
+        if (this.percentage < 0) {
+          this.percentage = 0;
+        }
+      }
+    }
+  }
+</script>
 ```
 :::
 
@@ -43,10 +104,56 @@ En este caso el porcentage no toma espacio adicional.
 ```html
 <el-progress type="circle" :percentage="0"></el-progress>
 <el-progress type="circle" :percentage="25"></el-progress>
-<el-progress type="circle" :percentage="80" color="#8e71c7"></el-progress>
 <el-progress type="circle" :percentage="100" status="success"></el-progress>
+<el-progress type="circle" :percentage="70" status="warning"></el-progress>
 <el-progress type="circle" :percentage="50" status="exception"></el-progress>
-<el-progress type="circle" :percentage="100" status="text">Done</el-progress>
+```
+:::
+
+### Barra de progreso del panel de control
+
+:::demo También puede especificar el atributo `type` a `dashboard` para usar la barra de progreso del panel de control.
+
+```html
+<el-progress type="dashboard" :percentage="percentage" :color="colors"></el-progress>
+
+<div>
+  <el-button-group>
+    <el-button icon="el-icon-minus" @click="decrease"></el-button>
+    <el-button icon="el-icon-plus" @click="increase"></el-button>
+  </el-button-group>
+</div>
+
+<script>
+  export default {
+    data() {
+      return {
+        percentage: 10,
+        colors: [
+          {color: '#FF4D4F', percentage: 20},
+          {color: '#F5A623', percentage: 40},
+          {color: '#5cb87a', percentage: 60},
+          {color: '#1989fa', percentage: 80},
+          {color: '#6f7ad3', percentage: 100}
+        ]
+      };
+    },
+    methods: {
+      increase() {
+        this.percentage += 10;
+        if (this.percentage > 100) {
+          this.percentage = 100;
+        }
+      },
+      decrease() {
+        this.percentage -= 10;
+        if (this.percentage < 0) {
+          this.percentage = 0;
+        }
+      }
+    }
+  }
+</script>
 ```
 :::
 
@@ -54,10 +161,11 @@ En este caso el porcentage no toma espacio adicional.
 | Atributo     | Descripción                              | Tipo    | Valores aceptado  | Por defecto |
 | ------------ | ---------------------------------------- | ------- | ----------------- | ----------- |
 | percentage   | porcentaje, requerido                    | number  | 0-100             | 0           |
-| type         | tipo de barra de progreso                | string  | line/circle       | line        |
+| type         | tipo de barra de progreso                | string  | line/circle/dashboard  | line   |
 | stroke-width | ancho de la barra de progreso            | number  | —                 | 6           |
 | text-inside  | mostrar el porcentaje dentro de la barra de progreso, solo funciona cuando `type` es 'line' | boolean | —                 | false       |
-| status       | estado actual de la barra de progreso    | string  | success/exception/text | —           |
-| color        | color de fondo de la barra de progreso. Sobreescribe la propiedad `status` | string     | — |       — |
+| status       | estado actual de la barra de progreso    | string  | success/exception/warning | —   |
+| color        | color de fondo de la barra de progreso. Sobreescribe la propiedad `status` | string/function/array | — | '' |
 | width        | ancho del canvas que contiene la barra de progreso circula | number  | —                 | 126         |
 | show-text    | mostrar porcentaje                       | boolean | —                 | true        |
+| stroke-linecap  | circle/dashboard type shape at the end path | string | butt/round/square | round |
\ No newline at end of file
diff --git a/examples/docs/es/quickstart.md b/examples/docs/es/quickstart.md
index 3c3a1c596c4..e7da0cc3ec1 100644
--- a/examples/docs/es/quickstart.md
+++ b/examples/docs/es/quickstart.md
@@ -4,7 +4,7 @@ Esta sección te guía en el proceso de usar Element con webpack en un proyecto.
 
 ### Use vue-cli@3
 
-We provide an [Element plugin](https://github.com/ElementUI/vue-cli-plugin-element) for vue-cli@3, which you can use to quickly build an Element-based project.
+Proporcionamos un [plugin de Element](https://github.com/ElementUI/vue-cli-plugin-element) para vue-cli@3, que puede utilizar para construir rápidamente un proyecto basado en Element.
 
 ### Usa la plantilla de Kit de inicio
 
@@ -18,12 +18,12 @@ Puede importar Element completamente o solamente importar lo que necesite. Comen
 
 #### Importando todo
 
-In main.js:
+En main.js:
 
 ```javascript
 import Vue from 'vue';
-import ElementUI from 'element-ui';
-import 'element-ui/lib/theme-chalk/index.css';
+import ElementUI from '@femessage/element-ui';
+import '@femessage/element-ui/lib/theme-chalk/index.css';
 import App from './App.vue';
 
 Vue.use(ElementUI);
@@ -67,7 +67,7 @@ Luego, si necesita Button y Select, edite main.js:
 
 ```javascript
 import Vue from 'vue';
-import { Button, Select } from 'element-ui';
+import { Button, Select } from '@femessage/element-ui';
 import App from './App.vue';
 
 Vue.component(Button.name, Button);
@@ -83,7 +83,7 @@ new Vue({
 });
 ```
 
-Ejemplo completo (Referencia completa de componentes [components.json](https://github.com/ElemeFE/element/blob/master/components.json))
+Ejemplo completo (Referencia completa de componentes [components.json](https://github.com/femessage/element/blob/master/components.json))
 
 ```javascript
 import Vue from 'vue';
@@ -134,6 +134,7 @@ import {
   Col,
   Upload,
   Progress,
+  Spinner,
   Badge,
   Card,
   Rate,
@@ -151,11 +152,20 @@ import {
   Aside,
   Main,
   Footer,
+  Timeline,
+  TimelineItem,
+  Link,
+  Divider,
+  Image,
+  Calendar,
+  Backtop,
+  PageHeader,
+  CascaderPanel,
   Loading,
   MessageBox,
   Message,
   Notification
-} from 'element-ui';
+} from '@femessage/element-ui';
 
 Vue.use(Pagination);
 Vue.use(Dialog);
@@ -173,6 +183,7 @@ Vue.use(Radio);
 Vue.use(RadioGroup);
 Vue.use(RadioButton);
 Vue.use(Checkbox);
+Vue.use(CheckboxButton);
 Vue.use(CheckboxGroup);
 Vue.use(Switch);
 Vue.use(Select);
@@ -202,6 +213,7 @@ Vue.use(Row);
 Vue.use(Col);
 Vue.use(Upload);
 Vue.use(Progress);
+Vue.use(Spinner);
 Vue.use(Badge);
 Vue.use(Card);
 Vue.use(Rate);
@@ -219,6 +231,15 @@ Vue.use(Header);
 Vue.use(Aside);
 Vue.use(Main);
 Vue.use(Footer);
+Vue.use(Timeline);
+Vue.use(TimelineItem);
+Vue.use(Link);
+Vue.use(Divider);
+Vue.use(Image);
+Vue.use(Calendar);
+Vue.use(Backtop);
+Vue.use(PageHeader);
+Vue.use(CascaderPanel);
 
 Vue.use(Loading.directive);
 
@@ -233,13 +254,15 @@ Vue.prototype.$message = Message;
 
 ### Configuración global
 
-Cuando importa Element, puede definir un objeto global de configuración. Por ahora este elemento solo contiene dos propiedades: `size`, `zIndex`. `size` define el tamaño por defecto de todos los componentes. The property `zIndex` sets the initial z-index (default: 2000) for modal boxes:
+Cuando importa Element, puede definir un objeto global de configuración. Por ahora este elemento solo contiene dos propiedades: `size`, `zIndex`. `size` define el tamaño por defecto de todos los componentes.
+
+La propiedad `zIndex` indica el z-index inicial (por defecto: 2000) para los modal:
 
 Importando Element completamente：
 
 ```js
 import Vue from 'vue';
-import Element from 'element-ui';
+import Element from '@femessage/element-ui';
 Vue.use(Element, { size: 'small', zIndex: 3000 });
 ```
 
@@ -247,13 +270,13 @@ Importando Element parcialmente：
 
 ```js
 import Vue from 'vue';
-import { Button } from 'element-ui';
+import { Button } from '@femessage/element-ui';
 
 Vue.prototype.$ELEMENT = { size: 'small', zIndex: 3000 };
 Vue.use(Button);
 ```
 
-Con la anterior configuración, el tamaño por defecto de todos los componentes que tienen el atributo `size` será `small`. The initial z-index of modal boxes is 3000.
+Con la anterior configuración, el tamaño por defecto de todos los componentes que tienen el atributo `size` será `small`. El valor inicial de z-index para los modals se ha establecido a 3000.
 
 ### Empiece ya!
 
diff --git a/examples/docs/es/radio-img-button.md b/examples/docs/es/radio-img-button.md
new file mode 100644
index 00000000000..7851a46ce52
--- /dev/null
+++ b/examples/docs/es/radio-img-button.md
@@ -0,0 +1 @@
+## RadioImgButton
diff --git a/examples/docs/es/radio.md b/examples/docs/es/radio.md
index 0f0e0dedfbe..af5e09a8bf1 100644
--- a/examples/docs/es/radio.md
+++ b/examples/docs/es/radio.md
@@ -1,23 +1,3 @@
-<script>
-  module.exports = {
-    data() {
-      return {
-        radio: '1',
-        radio1: 'selected and disabled',
-        radio2: 3,
-        radio3: 'New York',
-        radio4: 'New York',
-        radio5: 'New York',
-        radio6: 'New York',
-        radio7: '1',
-        radio8: '1',
-        radio9: '1',
-        radio10: '1'
-      };
-    }
-  };
-</script>
-
 ## Radio
 Selección única entre múltiples opciones.
 
@@ -50,15 +30,15 @@ El atributo `disabled` es utilizado para deshabilitar un Radio.
 :::demo Solo necesita agregar el atributo `disabled`.
 ```html
 <template>
-  <el-radio disabled v-model="radio1" label="disabled">Option A</el-radio>
-  <el-radio disabled v-model="radio1" label="selected and disabled">Option B</el-radio>
+  <el-radio disabled v-model="radio" label="disabled">Option A</el-radio>
+  <el-radio disabled v-model="radio" label="selected and disabled">Option B</el-radio>
 </template>
 
 <script>
   export default {
     data () {
       return {
-        radio1: 'selected and disabled'
+        radio: 'selected and disabled'
       };
     }
   }
@@ -73,7 +53,7 @@ Recomendado para seleccionar opciones que se excluyen mutuamente.
 :::demo Combine `el-radio-group` con `el-radio` para mostrar un grupo de Radios. Enlace la variable con `v-model` del elemento `el-radio-group` y asigne el valor del `label` en `el-radio`. Se provee el evento `change` con el valor actual como parámetro.
 
 ```html
-<el-radio-group v-model="radio2">
+<el-radio-group v-model="radio">
   <el-radio :label="3">Option A</el-radio>
   <el-radio :label="6">Option B</el-radio>
   <el-radio :label="9">Option C</el-radio>
@@ -83,7 +63,7 @@ Recomendado para seleccionar opciones que se excluyen mutuamente.
   export default {
     data () {
       return {
-        radio2: 3
+        radio: 3
       };
     }
   }
@@ -99,7 +79,7 @@ Radio con estilo de botón.
 ```html
 <template>
   <div>
-    <el-radio-group v-model="radio3">
+    <el-radio-group v-model="radio1">
       <el-radio-button label="New York"></el-radio-button>
       <el-radio-button label="Washington"></el-radio-button>
       <el-radio-button label="Los Angeles"></el-radio-button>
@@ -107,7 +87,7 @@ Radio con estilo de botón.
     </el-radio-group>
   </div>
   <div style="margin-top: 20px">
-    <el-radio-group v-model="radio4" size="medium">
+    <el-radio-group v-model="radio2" size="medium">
       <el-radio-button label="New York" ></el-radio-button>
       <el-radio-button label="Washington"></el-radio-button>
       <el-radio-button label="Los Angeles"></el-radio-button>
@@ -115,7 +95,7 @@ Radio con estilo de botón.
     </el-radio-group>
   </div>
   <div style="margin-top: 20px">
-    <el-radio-group v-model="radio5" size="small">
+    <el-radio-group v-model="radio3" size="small">
       <el-radio-button label="New York"></el-radio-button>
       <el-radio-button label="Washington" disabled ></el-radio-button>
       <el-radio-button label="Los Angeles"></el-radio-button>
@@ -123,7 +103,7 @@ Radio con estilo de botón.
     </el-radio-group>
   </div>
   <div style="margin-top: 20px">
-    <el-radio-group v-model="radio6" disabled size="mini">
+    <el-radio-group v-model="radio4" disabled size="mini">
       <el-radio-button label="New York"></el-radio-button>
       <el-radio-button label="Washington"></el-radio-button>
       <el-radio-button label="Los Angeles"></el-radio-button>
@@ -136,10 +116,10 @@ Radio con estilo de botón.
   export default {
     data () {
       return {
+        radio1: 'New York',
+        radio2: 'New York',
         radio3: 'New York',
-        radio4: 'New York',
-        radio5: 'New York',
-        radio6: 'New York'
+        radio4: 'New York'
       };
     }
   }
@@ -153,21 +133,21 @@ Radio con estilo de botón.
 ```html
 <template>
   <div>
-    <el-radio v-model="radio7" label="1" border>Option A</el-radio>
-    <el-radio v-model="radio7" label="2" border>Option B</el-radio>
+    <el-radio v-model="radio1" label="1" border>Option A</el-radio>
+    <el-radio v-model="radio1" label="2" border>Option B</el-radio>
   </div>
   <div style="margin-top: 20px">
-    <el-radio v-model="radio8" label="1" border size="medium">Option A</el-radio>
-    <el-radio v-model="radio8" label="2" border size="medium">Option B</el-radio>
+    <el-radio v-model="radio2" label="1" border size="medium">Option A</el-radio>
+    <el-radio v-model="radio2" label="2" border size="medium">Option B</el-radio>
   </div>
   <div style="margin-top: 20px">
-    <el-radio-group v-model="radio9" size="small">
+    <el-radio-group v-model="radio3" size="small">
       <el-radio label="1" border>Option A</el-radio>
       <el-radio label="2" border disabled>Option B</el-radio>
     </el-radio-group>
   </div>
   <div style="margin-top: 20px">
-    <el-radio-group v-model="radio10" size="mini" disabled>
+    <el-radio-group v-model="radio4" size="mini" disabled>
       <el-radio label="1" border>Option A</el-radio>
       <el-radio label="2" border>Option B</el-radio>
     </el-radio-group>
@@ -178,10 +158,10 @@ Radio con estilo de botón.
   export default {
     data () {
       return {
-        radio7: '1',
-        radio8: '1',
-        radio9: '1',
-        radio10: '1'
+        radio1: '1',
+        radio2: '1',
+        radio3: '1',
+        radio4: '1'
       };
     }
   }
@@ -193,11 +173,12 @@ Radio con estilo de botón.
 
 | Atributo | Descripción                              | Tipo                      | Valores Aceptado      | Por defecto |
 | -------- | ---------------------------------------- | ------------------------- | --------------------- | ----------- |
+| value / v-model | valor enlazado | string / number / boolean | — | — |
 | label    | el valor del Radio                       | string / number / boolean | —                     | —           |
 | disabled | si el Radio está deshabilitado           | boolean                   | —                     | false       |
 | border   | agregar borde alrededor del elemento Radio | boolean                   | —                     | false       |
 | size     | tamaño del elemento Radio, solo funciona si `border` es verdadero | string                    | medium / small / mini | —           |
-| name     | atributo nativo 'name'                   | string                    | —                     | —           |
+| name     | atributo nativo `name`                 | string                    | —                     | —           |
 
 ### Atributos de Radio-button
 
@@ -205,16 +186,17 @@ Radio con estilo de botón.
 | -------- | ------------------------------ | --------------- | ---------------- | ----------- |
 | label    | el valor del Radio             | string / number | —                | —           |
 | disabled | si el Radio está deshabilitado | boolean         | —                | false       |
-| name     | atributo nativo 'name'         | string          | —                | —           |
+| name     | atributo nativo `name`         | string          | —                | —           |
 
 ### Atributos de Radio-group
 
 | Atributo   | Descripción                              | Tipo    | Valores Aceptado      | Valores por defecto |
 | ---------- | ---------------------------------------- | ------- | --------------------- | ------------------- |
+| value / v-model | valor enlazado | string / number / boolean | — | — |
 | size       | tamaño de los `radio buttons` o `bordered radios` | string  | medium / small / mini | —                   |
-| disabled   | si la anidación de radios está desahabilitada | boolean | —                     | false               |
+| disabled   | si la anidación de radios está deshabilitada | boolean | —                     | false               |
 | text-color | color de las letras cuando el botón está activo | string  | —                     | #ffffff             |
-| fill       | color del borde y fondo cuando el botón está activo | string  | —                     | #409EFF             |
+| fill       | color del borde y fondo cuando el botón está activo | string  | —                     | #2460e0             |
 
 ### Eventos de Radio 
 
diff --git a/examples/docs/es/rate.md b/examples/docs/es/rate.md
index c1d7392e8ec..096f39848d9 100644
--- a/examples/docs/es/rate.md
+++ b/examples/docs/es/rate.md
@@ -1,54 +1,13 @@
-<style>
-  .demo-rate .block {
-    padding: 30px 0;
-    text-align: center;
-    border-right: solid 1px #EFF2F6;
-    display: inline-block;
-    width: 50%;
-    box-sizing: border-box;
-    &:last-child {
-      border-right: none;
-    }
-  }
-
-  .demo-rate .demonstration {
-    display: block;
-    color: #8492a6;
-    font-size: 14px;
-    margin-bottom: 20px;
-  }
-</style>
-
-<script>
-  export default {
-    data() {
-      return {
-        value1: null,
-        value2: null,
-        value3: null,
-        value4: null,
-        value5: 3.7
-      };
-    },
-    mounted() {
-      this.$nextTick(() => {
-        let firstDemo = document.querySelector('.source');
-        firstDemo.style.padding = '0';
-      });
-    }
-  }
-</script>
-
 ## Calificación
 
 Usado para la calificación
 
 ### Uso básico
 
-:::demo Clasificación divide las puntuaciones en tres niveles y estos niveles pueden distinguirse usando diferentes colores de fondo. Por defecto los colores de fondo son iguales, pero puedes asignarlos para reflejar los tres niveles usando el atributo `colors` y sus dos umbrales pueden ser definidos con `low-treshold` y `high-treshold`.
+:::demo Clasificación divide las puntuaciones en tres niveles y estos niveles pueden distinguirse usando diferentes colores de fondo. Por defecto los colores de fondo son iguales, pero puedes asignarlos para reflejar los tres niveles usando el atributo `colors` y sus dos umbrales pueden ser definidos con `low-treshold` y `high-treshold`. O puede asignarlos con un objeto cuya clave es el umbral entre dos niveles y cuyo valor es el color correspondiente.
 
 
-``` html
+```html
 <div class="block">
   <span class="demonstration">Default</span>
   <el-rate v-model="value1"></el-rate>
@@ -57,7 +16,7 @@ Usado para la calificación
   <span class="demonstration">Color for different levels</span>
   <el-rate
     v-model="value2"
-    :colors="['#99A9BF', '#F7BA2A', '#FF9900']">
+    :colors="colors">
   </el-rate>
 </div>
 
@@ -66,7 +25,8 @@ Usado para la calificación
     data() {
       return {
         value1: null,
-        value2: null
+        value2: null,
+        colors: ['#99A9BF', '#F7BA2A', '#FF9900'] // same as { 2: '#99A9BF', 4: { value: '#F7BA2A', excluded: true }, 5: '#FF9900' }
       }
     }
   }
@@ -80,9 +40,9 @@ Usa texto para indicar la puntuación
 
 :::demo Agregar el atributo `show-text` para mostrar texto a la derecha del componente. Puede asignar textos para las distintas puntuaciones usando `texts`. `texts` es un arreglo cuya longitud debe ser igual a la máxima puntuación `max`.
 
-``` html
+```html
 <el-rate
-  v-model="value3"
+  v-model="value"
   :texts="['oops', 'disappointed', 'normal', 'good', 'great']"
   show-text>
 </el-rate>
@@ -91,7 +51,7 @@ Usa texto para indicar la puntuación
   export default {
     data() {
       return {
-        value3: null
+        value: null
       }
     }
   }
@@ -103,12 +63,12 @@ Usa texto para indicar la puntuación
 
 Puede utilizar iconos para diferenciar cada componente.
 
-:::demo Puede customizar iconos para tres niveles diferentes usando `icon-classes`. En este ejemplo también usamos `void-icon-class` para asignar un icono si no está seleccionado.
+:::demo Puede personalizar los iconos pasando `icon-classes` un array con tres elementos o un objeto cuya clave es el umbral entre dos niveles y cuyo valor es la clase de icono correspondiente.  En este ejemplo también usamos `void-icon-class` para asignar un icono si no está seleccionado.
 
-``` html
+```html
 <el-rate
-  v-model="value4"
-  :icon-classes="['icon-rate-face-1', 'icon-rate-face-2', 'icon-rate-face-3']"
+  v-model="value"
+  :icon-classes="iconClasses"
   void-icon-class="icon-rate-face-off"
   :colors="['#99A9BF', '#F7BA2A', '#FF9900']">
 </el-rate>
@@ -117,7 +77,8 @@ Puede utilizar iconos para diferenciar cada componente.
   export default {
     data() {
       return {
-        value4: null
+        value: null,
+        iconClasses: ['icon-rate-face-1', 'icon-rate-face-2', 'icon-rate-face-3'] // same as { 2: 'icon-rate-face-1', 4: { value: 'icon-rate-face-2', excluded: true }, 5: 'icon-rate-face-3' }
       }
     }
   }
@@ -131,9 +92,9 @@ La calificación de solo lectura es para mostrar la puntuación. Soporta media e
 
 :::demo Use el atributo `disabled` para hacer el componente de solo lectura. Agregar `show-score` para mostrar la puntuación en el lado derecho. Además, puede usar el atributo `score-template` para proveer una plantilla. Tiene que contener `{value}`, y `{value}` será sustituido por la puntuación.
 
-``` html
+```html
 <el-rate
-  v-model="value5"
+  v-model="value"
   disabled
   show-score
   text-color="#ff9900"
@@ -144,7 +105,7 @@ La calificación de solo lectura es para mostrar la puntuación. Soporta media e
   export default {
     data() {
       return {
-        value5: 3.7
+        value: 3.7
       }
     }
   }
@@ -155,15 +116,16 @@ La calificación de solo lectura es para mostrar la puntuación. Soporta media e
 ### Atributos
 | Atributo                 | Descripción                              | Tipo    | Valores aceptado | Por defecto                              |
 | ------------------------ | ---------------------------------------- | ------- | ---------------- | ---------------------------------------- |
+| value / v-model           | valor enlazado                           | number  | —                | 0                                        |
 | max                      | puntuación máxima                        | number  | —                | 5                                        |
 | disabled                 | si la calificación es de solo lectura    | boolean | —                | false                                    |
 | allow-half               | si escoger media estrella está permitido | boolean | —                | false                                    |
 | low-threshold            | valor del umbral entre nivel bajo y medio. El valor será incluido en el nivel bajo | number  | —                | 2                                        |
 | high-threshold           | valor del umbral entre nivel bajo y medio. El valor será incluido en el nivel alto | number  | —                | 4                                        |
-| colors                   | arreglo de colores para iconos. Debe tener 3 elementos, cada uno corresponde a un nivel de puntuación | array   | —                | ['#F7BA2A', '#F7BA2A', '#F7BA2A']        |
+| colors                   | colores para los iconos. Si se trata de una matriz, debe tener 3 elementos, cada uno de los cuales corresponde a un nivel de puntuación, si se trata de un objeto, la clave debe ser el valor umbral entre dos niveles, y el valor debe ser el color correspondiente. | array/object   | —         | ['#F7BA2A', '#F7BA2A', '#F7BA2A']        |
 | void-color               | color para iconos no seleccionados       | string  | —                | #C6D1DE                                  |
 | disabled-void-color      | color para las iconos no seleccionados de solo lectura | string  | —                | #EFF2F7                                  |
-| icon-classes             | arreglo de nombres para clases de iconos. Debe tener 3 elementos, cada uno corresponde a un nivel de puntuación | array   | —                | ['el-icon-star-on', 'el-icon-star-on','el-icon-star-on'] |
+| icon-classes             | nombres de clase de los iconos. Si es array, debe tener 3 elementos, cada uno de los cuales corresponde a un nivel de puntuación, en caso contrario, si es objeto, la clave debe ser el valor umbral entre dos niveles, y el valor debe ser la clase de icono correspondiente. | array/object   | —                | ['el-icon-star-on', 'el-icon-star-on','el-icon-star-on'] |
 | void-icon-class          | nombre de clase para iconos no seleccionados | string  | —                | el-icon-star-off                         |
 | disabled-void-icon-class | nombre de clase para elementos no seleccionados de solo lectura | string  | —                | el-icon-star-on                          |
 | show-text                | muestra el texto                         | boolean | —                | false                                    |
diff --git a/examples/docs/es/select.md b/examples/docs/es/select.md
index 8f271df48fd..2db3a5d4227 100644
--- a/examples/docs/es/select.md
+++ b/examples/docs/es/select.md
@@ -1,138 +1,3 @@
-<script>
-  export default {
-    data() {
-      return {
-        list: null,
-        options: [{
-          value: 'Option1',
-          label: 'Option1'
-        }, {
-          value: 'Option2',
-          label: 'Option2'
-        }, {
-          value: 'Option3',
-          label: 'Option3'
-        }, {
-          value: 'Option4',
-          label: 'Option4'
-        }, {
-          value: 'Option5',
-          label: 'Option5'
-        }],
-        options2: [{
-          value: 'Option1',
-          label: 'Option1'
-        }, {
-          value: 'Option2',
-          label: 'Option2',
-          disabled: true
-        }, {
-          value: 'Option3',
-          label: 'Option3'
-        }, {
-          value: 'Option4',
-          label: 'Option4'
-        }, {
-          value: 'Option5',
-          label: 'Option5'
-        }],
-        options3: [{
-          label: 'Popular cities',
-          options: [{
-            value: 'Shanghai',
-            label: 'Shanghai'
-          }, {
-            value: 'Beijing',
-            label: 'Beijing'
-          }]
-        }, {
-          label: 'City Name',
-          options: [{
-            value: 'Chengdu',
-            label: 'Chengdu'
-          }, {
-            value: 'Shenzhen',
-            label: 'Shenzhen'
-          }, {
-            value: 'Guangzhou',
-            label: 'Guangzhou'
-          }, {
-            value: 'Dalian',
-            label: 'Dalian'
-          }]
-        }],
-        options4: [],
-        options5: [{
-          value: 'HTML',
-          label: 'HTML'
-        }, {
-          value: 'CSS',
-          label: 'CSS'
-        }, {
-          value: 'JavaScript',
-          label: 'JavaScript'
-        }],
-        cities: [{
-          value: 'Beijing',
-          label: 'Beijing'
-        }, {
-          value: 'Shanghai',
-          label: 'Shanghai'
-        }, {
-          value: 'Nanjing',
-          label: 'Nanjing'
-        }, {
-          value: 'Chengdu',
-          label: 'Chengdu'
-        }, {
-          value: 'Shenzhen',
-          label: 'Shenzhen'
-        }, {
-          value: 'Guangzhou',
-          label: 'Guangzhou'
-        }],
-        value: '',
-        value2: '',
-        value3: '',
-        value4: '',
-        value5: [],
-        value6: '',
-        value7: '',
-        value8: '',
-        value9: [],
-        value10: [],
-        value11: [],
-        loading: false,
-        states: ["Alabama", "Alaska", "Arizona", "Arkansas", "California", "Colorado", "Connecticut", "Delaware", "Florida", "Georgia", "Hawaii", "Idaho", "Illinois", "Indiana", "Iowa", "Kansas", "Kentucky", "Louisiana", "Maine", "Maryland", "Massachusetts", "Michigan", "Minnesota", "Mississippi", "Missouri", "Montana", "Nebraska", "Nevada", "New Hampshire", "New Jersey", "New Mexico", "New York", "North Carolina", "North Dakota", "Ohio", "Oklahoma", "Oregon", "Pennsylvania", "Rhode Island", "South Carolina", "South Dakota", "Tennessee", "Texas", "Utah", "Vermont", "Virginia", "Washington", "West Virginia", "Wisconsin", "Wyoming"]
-      };
-    },
-    
-    mounted() {
-      this.list = this.states.map(item => { return { value: item, label: item }; });
-    },
-    
-    methods: {
-      remoteMethod(query) {
-        if (query !== '') {
-          this.loading = true;
-          setTimeout(() => {
-            this.loading = false;
-            this.options4 = this.list.filter(item => item.label.toLowerCase().indexOf(query.toLowerCase()) > -1);
-          }, 200);
-        } else {
-          this.options4 = [];
-        }
-      }
-    }
-  };
-</script>
-
-<style>
-  .demo-select .el-select {
-    width: 240px;
-  }
-</style>
-
 ## Select
 
 Cuando haya muchas opciones, utilice un menú desplegable para mostrar y seleccionar las que desee.
@@ -187,9 +52,9 @@ Cuando haya muchas opciones, utilice un menú desplegable para mostrar y selecci
 
 ```html
 <template>
-  <el-select v-model="value2" placeholder="Select">
+  <el-select v-model="value" placeholder="Select">
     <el-option
-      v-for="item in options2"
+      v-for="item in options"
       :key="item.value"
       :label="item.label"
       :value="item.value"
@@ -202,7 +67,7 @@ Cuando haya muchas opciones, utilice un menú desplegable para mostrar y selecci
   export default {
     data() {
       return {
-        options2: [{
+        options: [{
           value: 'Option1',
           label: 'Option1'
         }, {
@@ -219,7 +84,7 @@ Cuando haya muchas opciones, utilice un menú desplegable para mostrar y selecci
           value: 'Option5',
           label: 'Option5'
         }],
-        value2: ''
+        value: ''
       }
     }
   }
@@ -235,7 +100,7 @@ Desactivar todo el componente.
 
 ```html
 <template>
-  <el-select v-model="value3" disabled placeholder="Select">
+  <el-select v-model="value" disabled placeholder="Select">
     <el-option
       v-for="item in options"
       :key="item.value"
@@ -265,7 +130,7 @@ Desactivar todo el componente.
           value: 'Option5',
           label: 'Option5'
         }],
-        value3: ''
+        value: ''
       }
     }
   }
@@ -281,7 +146,7 @@ Puede limpiar un Select con un icono.
 
 ```html
 <template>
-  <el-select v-model="value4" clearable placeholder="Select">
+  <el-select v-model="value" clearable placeholder="Select">
     <el-option
       v-for="item in options"
       :key="item.value"
@@ -311,7 +176,7 @@ Puede limpiar un Select con un icono.
           value: 'Option5',
           label: 'Option5'
         }],
-        value4: ''
+        value: ''
       }
     }
   }
@@ -327,7 +192,7 @@ Selección multiple utiliza tags para mostrar las opciones seleccionadas.
 
 ```html
 <template>
-  <el-select v-model="value5" multiple placeholder="Select">
+  <el-select v-model="value1" multiple placeholder="Select">
     <el-option
       v-for="item in options"
       :key="item.value"
@@ -337,7 +202,7 @@ Selección multiple utiliza tags para mostrar las opciones seleccionadas.
   </el-select>
 
   <el-select
-    v-model="value11"
+    v-model="value2"
     multiple
     collapse-tags
     style="margin-left: 20px;"
@@ -371,7 +236,8 @@ Selección multiple utiliza tags para mostrar las opciones seleccionadas.
           value: 'Option5',
           label: 'Option5'
         }],
-        value5: []
+        value1: [],
+        value2: []
       }
     }
   }
@@ -387,7 +253,7 @@ Puede personalizar templates HTML para las opciones.
 
 ```html
 <template>
-  <el-select v-model="value6" placeholder="Select">
+  <el-select v-model="value" placeholder="Select">
     <el-option
       v-for="item in cities"
       :key="item.value"
@@ -422,7 +288,7 @@ Puede personalizar templates HTML para las opciones.
           value: 'Guangzhou',
           label: 'Guangzhou'
         }],
-        value6: ''
+        value: ''
       }
     }
   }
@@ -438,9 +304,9 @@ Mostrar opciones en grupos.
 
 ```html
 <template>
-  <el-select v-model="value7" placeholder="Select">
+  <el-select v-model="value" placeholder="Select">
     <el-option-group
-      v-for="group in options3"
+      v-for="group in options"
       :key="group.label"
       :label="group.label">
       <el-option
@@ -457,7 +323,7 @@ Mostrar opciones en grupos.
   export default {
     data() {
       return {
-        options3: [{
+        options: [{
           label: 'Popular cities',
           options: [{
             value: 'Shanghai',
@@ -482,7 +348,7 @@ Mostrar opciones en grupos.
             label: 'Dalian'
           }]
         }],
-        value7: ''
+        value: ''
       }
     }
   }
@@ -498,7 +364,7 @@ Puede filtrar opciones como lo desee.
 
 ```html
 <template>
-  <el-select v-model="value8" filterable placeholder="Select">
+  <el-select v-model="value" filterable placeholder="Select">
     <el-option
       v-for="item in options"
       :key="item.value"
@@ -528,7 +394,7 @@ Puede filtrar opciones como lo desee.
           value: 'Option5',
           label: 'Option5'
         }],
-        value8: ''
+        value: ''
       }
     }
   }
@@ -545,7 +411,7 @@ Introduzca palabras y datos para buscar desde el servidor.
 ```html
 <template>
   <el-select
-    v-model="value9"
+    v-model="value"
     multiple
     filterable
     remote
@@ -554,7 +420,7 @@ Introduzca palabras y datos para buscar desde el servidor.
     :remote-method="remoteMethod"
     :loading="loading">
     <el-option
-      v-for="item in options4"
+      v-for="item in options"
       :key="item.value"
       :label="item.label"
       :value="item.value">
@@ -566,8 +432,8 @@ Introduzca palabras y datos para buscar desde el servidor.
   export default {
     data() {
       return {
-        options4: [],
-        value9: [],
+        options: [],
+        value: [],
         list: [],
         loading: false,
         states: ["Alabama", "Alaska", "Arizona",
@@ -591,7 +457,7 @@ Introduzca palabras y datos para buscar desde el servidor.
     },
     mounted() {
       this.list = this.states.map(item => {
-        return { value: item, label: item };
+        return { value: `value:${item}`, label: `label:${item}` };
       });
     },
     methods: {
@@ -600,13 +466,13 @@ Introduzca palabras y datos para buscar desde el servidor.
           this.loading = true;
           setTimeout(() => {
             this.loading = false;
-            this.options4 = this.list.filter(item => {
+            this.options = this.list.filter(item => {
               return item.label.toLowerCase()
                 .indexOf(query.toLowerCase()) > -1;
             });
           }, 200);
         } else {
-          this.options4 = [];
+          this.options = [];
         }
       }
     }
@@ -623,13 +489,13 @@ Crear y seleccionar nuevos items que no están incluidas en las opciones de sele
 ```html
 <template>
   <el-select
-    v-model="value10"
+    v-model="value"
     multiple
     filterable
     allow-create
     placeholder="Choose tags for your article">
     <el-option
-      v-for="item in options5"
+      v-for="item in options"
       :key="item.value"
       :label="item.label"
       :value="item.value">
@@ -641,7 +507,7 @@ Crear y seleccionar nuevos items que no están incluidas en las opciones de sele
   export default {
     data() {
       return {
-        options5: [{
+        options: [{
           value: 'HTML',
           label: 'HTML'
         }, {
@@ -651,7 +517,7 @@ Crear y seleccionar nuevos items que no están incluidas en las opciones de sele
           value: 'JavaScript',
           label: 'JavaScript'
         }],
-        value10: []
+        value: []
       }
     }
   }
@@ -668,25 +534,26 @@ Si el valor de encuadernación de Select es un objeto, asegúrese de asignar `va
 ### Select atributos
 | Atributo             | Descripción                              | Tipo     | Valores aceptados | Por defecto      |
 | -------------------- | ---------------------------------------- | -------- | ----------------- | ---------------- |
+| value / v-model       | valor enlazado                           | boolean / string / number  | —         | —                |
 | multiple             | si multiple-select esta activo           | boolean  | —                 | false            |
 | disabled             | si Select esta deshabilitado             | boolean  | —                 | false            |
 | collapse-tags        | si se colapsan los tags a un texto cuando `multiple` es `true`. | boolean  | —                 | false            |
 | value-key            | nombre de clave de identidad única para el valor, necesario cuando el valor es un objeto. | string   | —                 | value            |
 | size                 | tamaño del Input                         | string   | large/small/mini  | —                |
-| clearable            | whether select can be cleared  | boolean  | —                 | false            |
-| multiple-limit       | maximo numero de opciones que el usuario puede seleccionar cuando `multiple` es `true`.  Sin límite cuando se fija a 0 | number   | —                 | 0                |
+| clearable            | si el select puede ser limpiado | boolean  | —                 | true            |
+| multiple-limit       | máximo numero de opciones que el usuario puede seleccionar cuando `multiple` es `true`.  Sin límite cuando se fija a 0 | number   | —                 | 0                |
 | name                 | el atributo `name` del input seleccionado | string   | —                 | —                |
 | autocomplete         | el atributo `autocomplete` del input seleccionado | string   | —         | off              |
-| auto-complete         | @DEPRECATED in next major version | string   | —         | off              |
+| auto-complete         | @DEPRECATED en la proxima major versión | string   | —         | off              |
 | placeholder          | placeholder                              | string   | —                 | Select           |
-| filterable           | si Select es filtrable                   | boolean  | —                 | false            |
+| filterable           | si Select es filtrable                   | boolean  | —                 | true            |
 | allow-create         | si esta permitido crear nuevos items. Para usar esto, `filterable` debe ser `true`. | boolean  | —                 | false            |
-| filter-method        | metodo de filtrado personalizado         | function | —                 | —                |
-| remote               | si las opciones se traeran desde el servidor | boolean  | —                 | false            |
-| remote-method        | metodo de busqueda remota personalizada  | function | —                 | —                |
+| filter-method        | método de filtrado personalizado   | function | —                 | —                |
+| remote               | si las opciones se traerán desde el servidor | boolean  | —                 | false            |
+| remote-method        | método de búsqueda remota personalizada | function | —                 | —                |
 | loading              | si Select está cargando datos del servidor | boolean  | —                 | false            |
-| loading-text         | texto mostrado durante la carga de datos del servidor | string   | —                 | Loading          |
-| no-match-text        | texto mostrado cuando ningún dato coincide con la consulta de filtrado. | string   | —                 | No matching data |
+| loading-text         | texto mostrado durante la carga de datos del servidor, también puedes usar la configuración de slot = "empty" | string   | —                 | Loading          |
+| no-match-text        | texto mostrado cuando ningún dato coincide con la consulta de filtrado. También puedes usar la configuración de slot = "empty" | string   | —                 | No matching data |
 | no-data-text         | texto mostrado cuando no hay opciones    | string   | —                 | No data          |
 | popper-class         | nombre de clase personalizado para el menú desplegable del Select | string   | —                 | —                |
 | reserve-keyword      | cuando `multiple` y `filter` es `true`, si se debe reservar la palabra clave actual después de seleccionar una opción. | boolean  | —                 | false            |
@@ -695,20 +562,21 @@ Si el valor de encuadernación de Select es un objeto, asegúrese de asignar `va
 | automatic-dropdown | para non-filterable Select, este `prop` decide si el menú de opciones aparece cuando la entrada está enfocada | boolean | - | false |
 
 ### Eventos Select
-| Nombre         | Descripción                              | Parametros                               |
-| -------------- | ---------------------------------------- | ---------------------------------------- |
-| change         | se dispara cuando el valor del select cambia | valor actual del select                  |
-| visible-change | se dispara cuando el menu desplegable aparece o desaparece | true cuando aparece, y false en otro caso |
-| remove-tag     | se dispara cuando un tag es removido en modo multiple | el valor del tag removido                |
-| clear          | se dispara cuando el icono se clickea en un Select limpiable | —                                        |
-| blur           | se dispara cuando el input pierde el foco | (event: Event)                           |
-| focus          | se dispara cuando el input obtiene el foco | (event: Event)                           |
+| Nombre         | Descripción                                                  | Parametros                                |
+| -------------- | ------------------------------------------------------------ | ----------------------------------------- |
+| change         | se dispara cuando el valor del select cambia                 | valor actual del select                   |
+| visible-change | se dispara cuando el menú desplegable aparece o desaparece   | true cuando aparece, y false en otro caso |
+| remove-tag     | se dispara cuando un tag es removido en modo múltiple        | el valor del tag removido                 |
+| clear          | se dispara cuando el icono se clickea en un Select limpiable | —                                         |
+| blur           | se dispara cuando el input pierde el foco                    | (event: Event)                            |
+| focus          | se dispara cuando el input obtiene el foco                   | (event: Event)                            |
 
 ### Select Slots
 | Name    | Description |
 |---------|-------------|
 |    —    | lista de los componentes Option |
 | prefix  | contenido prefix de un  Select |
+| empty | Lista sin opciones |
 
 ### Atributos del grupo de opciones
 | Atributo | Descripción                              | Tipo    | Valores aceptados | Por defecto |
diff --git a/examples/docs/es/skeleton.md b/examples/docs/es/skeleton.md
new file mode 100644
index 00000000000..ff876ea8b9b
--- /dev/null
+++ b/examples/docs/es/skeleton.md
@@ -0,0 +1 @@
+## Skeleton
diff --git a/examples/docs/es/slider.md b/examples/docs/es/slider.md
index 6e07bac7e28..58ceaf263b6 100644
--- a/examples/docs/es/slider.md
+++ b/examples/docs/es/slider.md
@@ -1,54 +1,3 @@
-<script>
-  export default {
-    data() {
-      return {
-        value1: 0,
-        value2: 50,
-        value3: 36,
-        value4: 48,
-        value5: 42,
-        value6: 0,
-        value7: 0,
-        value8: 0,
-        value9: [4, 8],
-        value10: 0
-      };
-    },
-    methods: {
-      formatTooltip(val) {
-        return val / 100;
-      }
-    }
-  }
-</script>
-
-<style>
-  .demo-box.demo-slider .source {
-    padding: 0;
-  }
-
-  .demo-box.demo-slider .block {
-    padding: 30px 24px;
-    overflow: hidden;
-    border-bottom: solid 1px #EFF2F6;
-    &:last-child {
-      border-bottom: none;
-    }
-  }
-
-  .demo-box.demo-slider .demonstration {
-    font-size: 14px;
-    color: #8492a6;
-    line-height: 44px;
-  }
-
-  .demo-box.demo-slider .demonstration + .el-slider {
-    float: right;
-    width: 70%;
-    margin-right: 20px;
-  }
-</style>
-
 ## Slider
 
 Desliza el slider dentro de un rango fijo.
@@ -115,14 +64,14 @@ Las opciones pueden ser discretas.
   <div class="block">
     <span class="demonstration">Breakpoints not displayed</span>
     <el-slider
-      v-model="value6"
+      v-model="value1"
       :step="10">
     </el-slider>
   </div>
   <div class="block">
     <span class="demonstration">Breakpoints displayed</span>
     <el-slider
-      v-model="value7"
+      v-model="value2"
       :step="10"
       show-stops>
     </el-slider>
@@ -133,8 +82,8 @@ Las opciones pueden ser discretas.
   export default {
     data() {
       return {
-        value6: 0,
-        value7: 0
+        value1: 0,
+        value2: 0
       }
     }
   }
@@ -144,7 +93,7 @@ Las opciones pueden ser discretas.
 
 ### Slider con input
 
-Inserte el valor a traves de un input
+Inserte el valor a través de un input
 
 :::demo Configure el atributo `show-input` para que muestre un input a la derecha.
 
@@ -152,7 +101,7 @@ Inserte el valor a traves de un input
 <template>
   <div class="block">
     <el-slider
-      v-model="value8"
+      v-model="value"
       show-input>
     </el-slider>
   </div>
@@ -162,7 +111,7 @@ Inserte el valor a traves de un input
   export default {
     data() {
       return {
-        value8: 0
+        value: 0
       }
     }
   }
@@ -180,7 +129,7 @@ Se soporta la selección de un rango de valores.
 <template>
   <div class="block">
     <el-slider
-      v-model="value9"
+      v-model="value"
       range
       show-stops
       :max="10">
@@ -192,7 +141,7 @@ Se soporta la selección de un rango de valores.
   export default {
     data() {
       return {
-        value9: [4, 8]
+        value: [4, 8]
       }
     }
   }
@@ -208,7 +157,7 @@ Se soporta la selección de un rango de valores.
 <template>
   <div class="block">
     <el-slider
-      v-model="value10"
+      v-model="value"
       vertical
       height="200px">
     </el-slider>
@@ -219,7 +168,44 @@ Se soporta la selección de un rango de valores.
   export default {
     data() {
       return {
-        value10: 0
+        value: 0
+      }
+    }
+  }
+</script>
+```
+:::
+
+### Mostrar marcas
+
+:::demo Use el atributo `marks`  para mostrar marcas en el slider.
+```html
+<template>
+  <div class="block">
+    <el-slider
+      v-model="value"
+      range
+      :marks="marks">
+    </el-slider>
+  </div>
+</template>
+
+<script>
+  export default {
+    data() {
+      return {
+        value: [30, 60],
+        marks: {
+          0: '0°C',
+          8: '8°C',
+          37: '37°C',
+          50: {
+            style: {
+              color: '#1989FA'
+            },
+            label: this.$createElement('strong', '50%')
+          }
+        }
       }
     }
   }
@@ -230,11 +216,12 @@ Se soporta la selección de un rango de valores.
 ## Atributos
 | Atributo            | Descripción                              | Tipo            | Valores aceptados | Por defecto |
 | ------------------- | ---------------------------------------- | --------------- | ----------------- | ----------- |
-| min                 | valor minimo                             | number          | —                 | 0           |
+| value / v-model      | valor enlazado                           | number          | —                 | 0           |
+| min                 | valor mínimo                       | number          | —                 | 0           |
 | max                 | valor máximo                             | number          | —                 | 100         |
 | disabled            | si el Slider esta deshabitado            | boolean         | —                 | false       |
 | step                | tamaño del paso                          | number          | —                 | 1           |
-| show-input          | Si se muestra el input, trabaja cuando`range`es false | boolean         | —                 | false       |
+| show-input          | Si se muestra el input, trabaja cuando `range`es false | boolean         | —                 | false       |
 | show-input-controls | si se muestran los botones de control cuando`show-input`es true | boolean         | —                 | true        |
 | input-size          | tamaño del input   | string           | large / medium / small / mini | small |
 | show-stops          | si se muestran los puntos de ruptura (breakpoints) | boolean         | —                 | false       |
@@ -246,9 +233,11 @@ Se soporta la selección de un rango de valores.
 | label               | etiqueta para screen reader              | string          | —                 | —           |
 | debounce            | retardo al escribir, en milisegundos, funciona cuando`show-input` es true. | number          | —                 | 300         |
 | tooltip-class       | nombre personalizado de clase para el tooltip | string | — | — |
+| marks | marcas, tipo de clave debe ser `number` y debe estar en intervalo cerrado [min, max], cada marca puede tener estilo personalizado | object | — | — |
 
 ## Eventos
 | Nombre | Descripción                              | Parametros               |
 | ------ | ---------------------------------------- | ------------------------ |
 | change | se dispara cuando el valor cambia (si el ratón está comenzando el arrastre este evento sólo se disparara cuando se suelte el ratón) | valor despues del cambio |
+| input | triggers when the data changes (It'll be emitted in real time during sliding) | value after changing |
 
diff --git a/examples/docs/es/status-steps.md b/examples/docs/es/status-steps.md
new file mode 100644
index 00000000000..a8891d83038
--- /dev/null
+++ b/examples/docs/es/status-steps.md
@@ -0,0 +1 @@
+## StatusSteps
diff --git a/examples/docs/es/steps.md b/examples/docs/es/steps.md
index 8eff2e20549..8c3f8a94b52 100644
--- a/examples/docs/es/steps.md
+++ b/examples/docs/es/steps.md
@@ -1,19 +1,3 @@
-<script>
-  export default {
-    data() {
-      return {
-        active: 0
-      };
-    },
-    
-    methods: {
-      next() {
-        if (this.active++ > 2) this.active = 0;
-      }
-    }
-  }
-</script>
-
 ## Steps
 
 Guía al usuario para completar tareas de acuerdo con el proceso. Sus pasos pueden configurarse de acuerdo con el escenario de aplicación real y el número de pasos no puede ser inferior a dos.
@@ -51,11 +35,11 @@ Barra de pasos simple.
 ```
 :::
 
-### Step bar con el status
+### Step bar con el estatus
 
 Muestra el estado del step para cada paso.
 
-:::demo Utilice el atributo `title` para establecer el nombre del paso, o sobreescriba el atributo usando un slot con nombre. Hemos enumerado todos los nombres de slots al final de esta página.
+:::demo Utilice el atributo `title` para establecer el nombre del paso, o sobrescriba el atributo usando un slot con nombre. Hemos enumerado todos los nombres de slots al final de esta página.
 
 ```html
 <el-steps :space="200" :active="1" finish-status="success">
@@ -95,7 +79,7 @@ Puede poner una descripción para cada paso.
 ```
 :::
 
-### Step bar with icon
+### Step bar con icono
 
 En la barra de pasos se pueden utilizar diversos iconos personalizados.
 
@@ -149,15 +133,15 @@ Step bar simple, donde se ignorará `align-center`, `description`, `direction` y
 
 ### Steps atributos
 
-| Atributo       | Descripción                              | Tipo            | Valores aceptados                        | Por defecto |
-| -------------- | ---------------------------------------- | --------------- | ---------------------------------------- | ----------- |
-| space          | el espaciado de cada paso, será responsivo si se omite. Soporta porcentaje. | number / string | —                                        | —           |
-| direction      | dirección de visualización               | string          | vertical/horizontal                      | horizontal  |
-| active         | actual paso de activación                | number          | —                                        | 0           |
-| process-status | status del paso actual                   | string          | wait / process / finish / error / success | process     |
-| finish-status  | status del paso final                    | string          | wait / process / finish / error / success | finish      |
-| align-center   | centrado de título y descripción         | boolean         | —                                        | false       |
-| simple         | si aplicar un tema simple                | boolean         | -                                        | false       |
+| Atributo       | Descripción                                                  | Tipo            | Valores aceptados                         | Por defecto |
+| -------------- | ------------------------------------------------------------ | --------------- | ----------------------------------------- | ----------- |
+| space          | el espaciado de cada paso, será responsivo si se omite. Soporta porcentaje. | number / string | —                                         | —           |
+| direction      | dirección de visualización                                   | string          | vertical/horizontal                       | horizontal  |
+| active         | actual paso de activación                                    | number          | —                                         | 0           |
+| process-status | estatus del paso actual                                      | string          | wait / process / finish / error / success | process     |
+| finish-status  | estatus del paso final                                       | string          | wait / process / finish / error / success | finish      |
+| align-center   | centrado de título y descripción                             | boolean         | —                                         | false       |
+| simple         | si aplicar un tema simple                                    | boolean         | -                                         | false       |
 
 ### Step atributos
 | Atributo    | Descripción                              | Tipo                                     | Valores aceptados | Por defecto |
@@ -172,5 +156,5 @@ Step bar simple, donde se ignorará `align-center`, `description`, `direction` y
 | ----------- | -------------------- |
 | icon        | Icono personalizado  |
 | title       | Titulo del paso      |
-| description | Descripcion del paso |
+| description | Descripción del paso |
 
diff --git a/examples/docs/es/switch.md b/examples/docs/es/switch.md
index 83b04713136..66f5aa2222e 100644
--- a/examples/docs/es/switch.md
+++ b/examples/docs/es/switch.md
@@ -1,30 +1,6 @@
-<style>
-  .demo-box.demo-switch {
-    .el-switch {
-      margin: 20px 20px 20px 0;
-    }
-  }
-</style>
-
-<script>
-  export default {
-    data() {
-      return {
-        value1: true,
-        value2: true,
-        value3: true,
-        value4: true,
-        value5: '100',
-        value6: true,
-        value7: false
-      }
-    }
-  };
-</script>
-
 ## Switch
 
-Switch es utilizdo para realizar cambios entre dos estados opuestos.
+Switch es utilizado para realizar cambios entre dos estados opuestos.
 
 ### Uso básico
 
@@ -57,13 +33,13 @@ Switch es utilizdo para realizar cambios entre dos estados opuestos.
 
 ```html
 <el-switch
-  v-model="value3"
+  v-model="value1"
   active-text="Pay by month"
   inactive-text="Pay by year">
 </el-switch>
 <el-switch
   style="display: block"
-  v-model="value4"
+  v-model="value2"
   active-color="#13ce66"
   inactive-color="#ff4949"
   active-text="Pay by month"
@@ -74,8 +50,8 @@ Switch es utilizdo para realizar cambios entre dos estados opuestos.
   export default {
     data() {
       return {
-        value3: true,
-        value4: true
+        value1: true,
+        value2: true
       }
     }
   };
@@ -88,9 +64,9 @@ Switch es utilizdo para realizar cambios entre dos estados opuestos.
 :::demo Puede establecer los atributos `active-value` y `inactive-value`. Ambos reciben valores de tipo `Boolean`, `String` o `Number`.
 
 ```html
-<el-tooltip :content="'Switch value: ' + value5" placement="top">
+<el-tooltip :content="'Switch value: ' + value" placement="top">
   <el-switch
-    v-model="value5"
+    v-model="value"
     active-color="#13ce66"
     inactive-color="#ff4949"
     active-value="100"
@@ -102,7 +78,7 @@ Switch es utilizdo para realizar cambios entre dos estados opuestos.
   export default {
     data() {
       return {
-        value5: '100'
+        value: '100'
       }
     }
   };
@@ -117,11 +93,11 @@ Switch es utilizdo para realizar cambios entre dos estados opuestos.
 
 ```html
 <el-switch
-  v-model="value6"
+  v-model="value1"
   disabled>
 </el-switch>
 <el-switch
-  v-model="value7"
+  v-model="value2"
   disabled>
 </el-switch>
 
@@ -129,8 +105,8 @@ Switch es utilizdo para realizar cambios entre dos estados opuestos.
   export default {
     data() {
       return {
-        value6: true,
-        value7: false
+        value1: true,
+        value2: false
       }
     }
   };
@@ -142,17 +118,19 @@ Switch es utilizdo para realizar cambios entre dos estados opuestos.
 
 | Atributo            | Descripción                              | Tipo                      | Valores aceptados | Por defecto |
 | ------------------- | ---------------------------------------- | ------------------------- | ----------------- | ----------- |
+| value / v-model      | valor enlazado                           | boolean / string / number | —                 | —           |
 | disabled            | si Switch esta deshabilitado             | boolean                   | —                 | false       |
 | width               | ancho del componente Switch              | number                    | —                 | 40          |
-| active-icon-class   | nombre de la clase del icono mostrado en el estado `on`, sobreescribe `active-text` | string                    | —                 | —           |
-| inactive-icon-class | nombre de la clase del icono mostrado en el estado `off`, sobreescribe `inactive-text` | string                    | —                 | —           |
+| active-icon-class   | nombre de la clase del icono mostrado en el estado `on`, sobrescribe `active-text` | string                    | —                 | —           |
+| inactive-icon-class | nombre de la clase del icono mostrado en el estado `off`, sobrescribe `inactive-text` | string                    | —                 | —           |
 | active-text         | texto mostrado en el estado `on`         | string                    | —                 | —           |
 | inactive-text       | texto mostrado en el estado `off`        | string                    | —                 | —           |
 | active-value        | cambia su valor cuando se encuentra en el estado `on` | boolean / string / number | —                 | true        |
 | inactive-value      | cambia su valor cuando se encuentra en el estado `off` | boolean / string / number | —                 | false       |
-| active-color        | color de fondo cuando se encuentra en el estado `on` | string                    | —                 | #409EFF     |
+| active-color        | color de fondo cuando se encuentra en el estado `on` | string                    | —                 | #2460e0     |
 | inactive-color      | color de fondo cuando se encuentra en el estado `off` | string                    | —                 | #C0CCDA     |
 | name                | nombre de entrada del componente Switch  | string                    | —                 | —           |
+| validate-event      | si se debe lanzar la validación de formulario | boolean              | -                 | true        |
 
 ### Eventos
 
diff --git a/examples/docs/es/table.md b/examples/docs/es/table.md
index 490e429b0a7..9cc89711bc5 100644
--- a/examples/docs/es/table.md
+++ b/examples/docs/es/table.md
@@ -1,369 +1,3 @@
-<script>
-  export default {
-    data() {
-      return {
-        tableData: [{
-          date: '2016-05-03',
-          name: 'Tom',
-          state: 'California',
-          city: 'Los Angeles',
-          address: 'No. 189, Grove St, Los Angeles',
-          zip: 'CA 90036',
-          tag: 'Home'
-        }, {
-          date: '2016-05-02',
-          name: 'Tom',
-          state: 'California',
-          city: 'Los Angeles',
-          address: 'No. 189, Grove St, Los Angeles',
-          zip: 'CA 90036',
-          tag: 'Office'
-        }, {
-          date: '2016-05-04',
-          name: 'Tom',
-          state: 'California',
-          city: 'Los Angeles',
-          address: 'No. 189, Grove St, Los Angeles',
-          zip: 'CA 90036',
-          tag: 'Home'
-        }, {
-          date: '2016-05-01',
-          name: 'Tom',
-          state: 'California',
-          city: 'Los Angeles',
-          address: 'No. 189, Grove St, Los Angeles',
-          zip: 'CA 90036',
-          tag: 'Office'
-        }],
-        tableData2: [{
-          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',
-          $info: true
-        }, {
-          date: '2016-05-01',
-          name: 'Tom',
-          address: 'No. 189, Grove St, Los Angeles',
-        }, {
-          date: '2016-05-03',
-          name: 'Tom',
-          address: 'No. 189, Grove St, Los Angeles',
-          $positive: true
-        }],
-        tableData3: [{
-          date: '2016-05-03',
-          name: 'Tom',
-          state: 'California',
-          city: 'Los Angeles',
-          address: 'No. 189, Grove St, Los Angeles',
-          zip: 'CA 90036'
-        }, {
-          date: '2016-05-02',
-          name: 'Tom',
-          state: 'California',
-          city: 'Los Angeles',
-          address: 'No. 189, Grove St, Los Angeles',
-          zip: 'CA 90036'
-        }, {
-          date: '2016-05-04',
-          name: 'Tom',
-          state: 'California',
-          city: 'Los Angeles',
-          address: 'No. 189, Grove St, Los Angeles',
-          zip: 'CA 90036'
-        }, {
-          date: '2016-05-01',
-          name: 'Tom',
-          state: 'California',
-          city: 'Los Angeles',
-          address: 'No. 189, Grove St, Los Angeles',
-          zip: 'CA 90036'
-        }, {
-          date: '2016-05-08',
-          name: 'Tom',
-          state: 'California',
-          city: 'Los Angeles',
-          address: 'No. 189, Grove St, Los Angeles',
-          zip: 'CA 90036'
-        }, {
-          date: '2016-05-06',
-          name: 'Tom',
-          state: 'California',
-          city: 'Los Angeles',
-          address: 'No. 189, Grove St, Los Angeles',
-          zip: 'CA 90036'
-        }, {
-          date: '2016-05-07',
-          name: 'Tom',
-          state: 'California',
-          city: 'Los Angeles',
-          address: 'No. 189, Grove St, Los Angeles',
-          zip: 'CA 90036'
-        }],
-        tableData4: [{
-          date: '2016-05-03',
-          name: 'Tom',
-          state: 'California',
-          city: 'Los Angeles',
-          address: 'No. 189, Grove St, Los Angeles',
-          zip: 'CA 90036'
-        }, {
-          date: '2016-05-02',
-          name: 'Tom',
-          state: 'California',
-          city: 'Los Angeles',
-          address: 'No. 189, Grove St, Los Angeles',
-          zip: 'CA 90036'
-        }, {
-          date: '2016-05-04',
-          name: 'Tom',
-          state: 'California',
-          city: 'Los Angeles',
-          address: 'No. 189, Grove St, Los Angeles',
-          zip: 'CA 90036'
-        }, {
-          date: '2016-05-01',
-          name: 'Tom',
-          state: 'California',
-          city: 'Los Angeles',
-          address: 'No. 189, Grove St, Los Angeles',
-          zip: 'CA 90036'
-        }, {
-          date: '2016-05-08',
-          name: 'Tom',
-          state: 'California',
-          city: 'Los Angeles',
-          address: 'No. 189, Grove St, Los Angeles',
-          zip: 'CA 90036'
-        }, {
-          date: '2016-05-06',
-          name: 'Tom',
-          state: 'California',
-          city: 'Los Angeles',
-          address: 'No. 189, Grove St, Los Angeles',
-          zip: 'CA 90036'
-        }, {
-          date: '2016-05-07',
-          name: 'Tom',
-          state: 'California',
-          city: 'Los Angeles',
-          address: 'No. 189, Grove St, Los Angeles',
-          zip: 'CA 90036'
-        }],
-        tableData6: [{
-          id: '12987122',
-          name: 'Tom',
-          amount1: '234',
-          amount2: '3.2',
-          amount3: 10
-        }, {
-          id: '12987123',
-          name: 'Tom',
-          amount1: '165',
-          amount2: '4.43',
-          amount3: 12
-        }, {
-          id: '12987124',
-          name: 'Tom',
-          amount1: '324',
-          amount2: '1.9',
-          amount3: 9
-        }, {
-          id: '12987125',
-          name: 'Tom',
-          amount1: '621',
-          amount2: '2.2',
-          amount3: 17
-        }, {
-          id: '12987126',
-          name: 'Tom',
-          amount1: '539',
-          amount2: '4.1',
-          amount3: 15
-        }],
-        tableData7: [{
-          date: '2016-05-02',
-          name: 'Tom',
-          address: 'No. 189, Grove St, Los Angeles',
-        }, {
-          date: '2016-05-04',
-          name: 'John',
-          address: 'No. 189, Grove St, Los Angeles',
-        }, {
-          date: '2016-05-01',
-          name: 'Morgan',
-          address: 'No. 189, Grove St, Los Angeles',
-        }, {
-          date: '2016-05-03',
-          name: 'Jessy',
-          address: 'No. 189, Grove St, Los Angeles',
-        }],
-        currentRow: null,
-        multipleSelection: [],
-        search: '',
-      };
-    },
-
-    methods: {
-      getSummaries(param) {
-        const { columns, data } = param;
-        const sums = [];
-        columns.forEach((column, index) => {
-          if (index === 0) {
-            sums[index] = 'Total Cost';
-            return;
-          }
-          const values = data.map(item => Number(item[column.property]));
-          if (!values.every(value => isNaN(value))) {
-            sums[index] = '$ ' + values.reduce((prev, curr) => {
-              const value = Number(curr);
-              if (!isNaN(value)) {
-                return prev + curr;
-              } else {
-                return prev;
-              }
-            }, 0);
-          } else {
-            sums[index] = 'N/A';
-          }
-        });
-    
-        return sums;
-      },
-      resetDateFilter() {
-        this.$refs.filterTable.clearFilter('date');
-      },
-      clearFilter() {
-        this.$refs.filterTable.clearFilter();
-      },
-      setCurrent(row) {
-        this.$refs.singleTable.setCurrentRow(row);
-      },
-      toggleSelection(rows) {
-        if (rows) {
-          rows.forEach(row => {
-            this.$refs.multipleTable.toggleRowSelection(row);
-          });
-        } else {
-          this.$refs.multipleTable.clearSelection();
-        }
-      },
-    
-      handleClick() {
-        console.log('click');
-      },
-    
-      handleEdit(index, row) {
-        console.log(index, row);
-      },
-    
-      handleDelete(index, row) {
-        console.log(index, row);
-      },
-    
-      handleSelectionChange(val) {
-        this.multipleSelection = val;
-      },
-    
-      handleCurrentChange(val) {
-        this.currentRow = val;
-      },
-    
-      formatter(row, column) {
-        return row.address;
-      },
-    
-      filterTag(value, row) {
-        return row.tag === value;
-      },
-    
-      filterHandler(value, row, column) {
-        const property = column['property'];
-        return row[property] === value;
-      },
-    
-      tableRowClassName({row, rowIndex}) {
-        if (rowIndex === 1) {
-          return 'warning-row';
-        } else if (rowIndex === 3) {
-          return 'success-row';
-        }
-        return '';
-      },
-    
-      deleteRow(index, rows) {
-        rows.splice(index, 1);
-      },
-    
-      arraySpanMethod({ row, column, rowIndex, columnIndex }) {
-        if (rowIndex % 2 === 0) {
-          if (columnIndex === 0) {
-            return [1, 2];
-          } else if (columnIndex === 1) {
-            return [0, 0];
-          }
-        }
-      },
-    
-      objectSpanMethod({ row, column, rowIndex, columnIndex }) {
-        if (columnIndex === 0) {
-          if (rowIndex % 2 === 0) {
-            return {
-              rowspan: 2,
-              colspan: 1
-            };
-          } else {
-            return {
-              rowspan: 0,
-              colspan: 0
-            };
-          }
-        }
-      },
-    
-      indexMethod(index) {
-        return index * 2;
-      }
-    },
-    
-    watch: {
-      multipleSelection(val) {
-        console.log('selection: ', val);
-      }
-    }
-  };
-</script>
-
-<style>
-  .el-table .warning-row {
-    background: oldlace;
-  }
-
-  .el-table .success-row {
-    background: #f0f9eb;
-  }
-
-  .demo-table .name-wrapper {
-    display: inline-block;
-  }
-
-  .demo-table .demo-table-expand {
-    label {
-      width: 90px;
-      color: #99a9bf;
-    }
-    .el-form-item {
-      margin-right: 0;
-      margin-bottom: 0;
-      width: 50%;
-    }
-  }
-</style>
-
 ## Tablas
 
 Visualiza múltiples datos con un formato en particular. Podrá ordenar, filtrar y comparar datos en una tabla.
@@ -543,7 +177,7 @@ Puede destacar el contenido de la tabla para distinguir entre "success, informat
 ```html
 <template>
   <el-table
-    :data="tableData2"
+    :data="tableData"
     style="width: 100%"
     :row-class-name="tableRowClassName">
     <el-table-column
@@ -587,7 +221,7 @@ Puede destacar el contenido de la tabla para distinguir entre "success, informat
     },
     data() {
       return {
-        tableData2:  [{
+        tableData:  [{
           date: '2016-05-03',
           name: 'Tom',
           address: 'No. 189, Grove St, Los Angeles'
@@ -619,7 +253,7 @@ Cuando esta tiene demasiadas filas, puede utilizar una cabecera fija.
 ```html
 <template>
   <el-table
-    :data="tableData3"
+    :data="tableData"
     height="250"
     style="width: 100%">
     <el-table-column
@@ -643,7 +277,7 @@ Cuando esta tiene demasiadas filas, puede utilizar una cabecera fija.
   export default {
     data() {
       return {
-        tableData3: [{
+        tableData: [{
           date: '2016-05-03',
           name: 'Tom',
           address: 'No. 189, Grove St, Los Angeles'
@@ -789,7 +423,7 @@ Cuando tienes grandes cantidades de datos para colocar en una tabla, puede fijar
 ```html
 <template>
   <el-table
-    :data="tableData3"
+    :data="tableData"
     style="width: 100%"
     height="250">
     <el-table-column
@@ -830,7 +464,7 @@ Cuando tienes grandes cantidades de datos para colocar en una tabla, puede fijar
   export default {
     data() {
       return {
-        tableData3: [{
+        tableData: [{
           date: '2016-05-03',
           name: 'Tom',
           state: 'California',
@@ -895,7 +529,7 @@ Cuando los datos se modifican dinámicamente, es posible que necesite que la tab
 ```html
 <template>
   <el-table
-    :data="tableData4"
+    :data="tableData"
     style="width: 100%"
     max-height="250">
     <el-table-column
@@ -935,7 +569,7 @@ Cuando los datos se modifican dinámicamente, es posible que necesite que la tab
       width="120">
       <template slot-scope="scope">
         <el-button
-          @click.native.prevent="deleteRow(scope.$index, tableData4)"
+          @click.native.prevent="deleteRow(scope.$index, tableData)"
           type="text"
           size="small">
           Eliminar
@@ -954,7 +588,7 @@ Cuando los datos se modifican dinámicamente, es posible que necesite que la tab
     },
     data() {
       return {
-        tableData4: [{
+        tableData: [{
           date: '2016-05-03',
           name: 'Tom',
           state: 'California',
@@ -1019,7 +653,7 @@ Cuando la estructura de datos es compleja, tu puedes hacer uso de cabeceras agru
 ```html
 <template>
   <el-table
-    :data="tableData3"
+    :data="tableData"
     style="width: 100%">
     <el-table-column
       prop="date"
@@ -1062,7 +696,7 @@ Cuando la estructura de datos es compleja, tu puedes hacer uso de cabeceras agru
   export default {
     data() {
       return {
-        tableData3: [{
+        tableData: [{
           date: '2016-05-03',
           name: 'Tom',
           state: 'California',
@@ -1204,7 +838,7 @@ También puede seleccionar múltiples filas.
 <template>
   <el-table
     ref="multipleTable"
-    :data="tableData3"
+    :data="tableData"
     style="width: 100%"
     @selection-change="handleSelectionChange">
     <el-table-column
@@ -1228,7 +862,7 @@ También puede seleccionar múltiples filas.
     </el-table-column>
   </el-table>
   <div style="margin-top: 20px">
-    <el-button @click="toggleSelection([tableData3[1], tableData3[2]])">Cambia el estado de selección de la segunda y tercera fila.</el-button>
+    <el-button @click="toggleSelection([tableData[1], tableData[2]])">Cambia el estado de selección de la segunda y tercera fila.</el-button>
     <el-button @click="toggleSelection()">Limpiar selección</el-button>
   </div>
 </template>
@@ -1237,7 +871,7 @@ También puede seleccionar múltiples filas.
   export default {
     data() {
       return {
-        tableData3: [{
+        tableData: [{
           date: '2016-05-03',
           name: 'Tom',
           address: 'No. 189, Grove St, Los Angeles'
@@ -1455,7 +1089,7 @@ Filtra la tabla para encontrar la información que necesita.
 
 Personalice la columna de la tabla para que pueda integrarse con otros componentes.
 
-:::demo Tiene acceso a la siguiente informacion: row, column, $index, store (gestor de estados de la tabla) por [Scoped slots](https://vuejs.org/v2/guide/components.html#Scoped-Slots).
+:::demo Tiene acceso a la siguiente información: row, column, $index, store (gestor de estados de la tabla) por [Scoped slots](https://vuejs.org/v2/guide/components.html#Scoped-Slots).
 ```html
 <template>
   <el-table
@@ -1540,7 +1174,7 @@ Se puede personalizar el encabezado de la tabla para que se pueda adaptar aún m
 ```html
 <template>
   <el-table
-    :data="tableData7.filter(data => !search || data.name.toLowerCase().includes(search.toLowerCase()))"
+    :data="tableData.filter(data => !search || data.name.toLowerCase().includes(search.toLowerCase()))"
     style="width: 100%">
     <el-table-column
       label="Date"
@@ -1610,13 +1244,13 @@ Se puede personalizar el encabezado de la tabla para que se pueda adaptar aún m
 
 ### Fila expandible
 
-Cuando el contenido de la fila es demasiado largo y busca no mostrar la barra de desplazamiento horizontal, puede utilizar la caracteristica de fila expandible.
+Cuando el contenido de la fila es demasiado largo y busca no mostrar la barra de desplazamiento horizontal, puede utilizar la característica de fila expandible.
 
 :::demo Puede activar la fila expandible estableciendo la propiedad `type` a `expand` y Scoped Slots. La plantilla para `el-table-column` se representará como el contenido de la fila expandible, y puede acceder a algunos atributos cuando está usando `Scoped Slots` en plantillas de columna personalizadas.
 ```html
 <template>
   <el-table
-    :data="tableData3"
+    :data="tableData"
     style="width: 100%">
     <el-table-column type="expand">
       <template slot-scope="props">
@@ -1641,7 +1275,7 @@ Cuando el contenido de la fila es demasiado largo y busca no mostrar la barra de
   export default {
     data() {
       return {
-        tableData3: [{
+        tableData: [{
           date: '2016-05-03',
           name: 'Tom',
           state: 'California',
@@ -1698,6 +1332,126 @@ Cuando el contenido de la fila es demasiado largo y busca no mostrar la barra de
 ```
 :::
 
+### Datos tree y modo lazy
+
+:::demo Puede visualizar datos de estructura de árbol. Cuando la fila contiene el campo `children`, se trata como datos anidados. Para renderizar datos anidados, la `row-key` es requerida。Ademas, los datos de las filas secundarias pueden ser cargados asincrónicamente. Poner la propiedad `lazy` de Table a true y la función `load`. Especifique el atributo `hasChildren` en la fila para determinar qué fila contiene descendencia. Tanto `children` como `hasChildren` pueden configurarse a través de `tree-props`.
+
+```html
+<template>
+<div>
+  <el-table
+    :data="tableData"
+    style="width: 100%;margin-bottom: 20px;"
+    row-key="id"
+    border
+    default-expand-all>
+    <el-table-column
+      prop="date"
+      label="日期"
+      sortable
+      width="180">
+    </el-table-column>
+    <el-table-column
+      prop="name"
+      label="name"
+      sortable
+      width="180">
+    </el-table-column>
+  </el-table>
+
+  <el-table
+    :data="tableData1"
+    style="width: 100%"
+    row-key="id"
+    border
+    lazy
+    :load="load"
+    :tree-props="{children: 'children', hasChildren: 'hasChildren'}">
+    <el-table-column
+      prop="date"
+      label="date"
+      width="180">
+    </el-table-column>
+    <el-table-column
+      prop="name"
+      label="name"
+      width="180">
+    </el-table-column>
+  </el-table>
+</div>
+</template>
+<script>
+  export default {
+    data() {
+      return {
+        tableData: [{
+          id: 1,
+          date: '2016-05-02',
+          name: 'wangxiaohu'
+        }, {
+          id: 2,
+          date: '2016-05-04',
+          name: 'wangxiaohu'
+        }, {
+          id: 3,
+          date: '2016-05-01',
+          name: 'wangxiaohu',
+          children: [{
+              id: 31,
+              date: '2016-05-01',
+              name: 'wangxiaohu'
+            }, {
+              id: 32,
+              date: '2016-05-01',
+              name: 'wangxiaohu'
+          }]
+        }, {
+          id: 4,
+          date: '2016-05-03',
+          name: 'wangxiaohu'
+        }],
+        tableData1: [{
+          id: 1,
+          date: '2016-05-02',
+          name: 'wangxiaohu'
+        }, {
+          id: 2,
+          date: '2016-05-04',
+          name: 'wangxiaohu'
+        }, {
+          id: 3,
+          date: '2016-05-01',
+          name: 'wangxiaohu',
+          hasChildren: true
+        }, {
+          id: 4,
+          date: '2016-05-03',
+          name: 'wangxiaohu'
+        }]
+      }
+    },
+    methods: {
+      load(tree, treeNode, resolve) {
+        setTimeout(() => {
+          resolve([
+            {
+              id: 31,
+              date: '2016-05-01',
+              name: 'wangxiaohu'
+            }, {
+              id: 32,
+              date: '2016-05-01',
+              name: 'wangxiaohu'
+            }
+          ])
+        }, 1000)
+      }
+    },
+  }
+</script>
+```
+:::
+
 ### Fila de resumen
 
 Para una tabla de números, puede agregar una fila extra en el pie de página de la tabla que muestra la suma de cada columna.
@@ -1706,7 +1460,7 @@ Para una tabla de números, puede agregar una fila extra en el pie de página de
 ```html
 <template>
   <el-table
-    :data="tableData6"
+    :data="tableData"
     border
     show-summary
     style="width: 100%">
@@ -1737,7 +1491,7 @@ Para una tabla de números, puede agregar una fila extra en el pie de página de
   </el-table>
 
   <el-table
-    :data="tableData6"
+    :data="tableData"
     border
     height="200"
     :summary-method="getSummaries"
@@ -1771,7 +1525,7 @@ Para una tabla de números, puede agregar una fila extra en el pie de página de
   export default {
     data() {
       return {
-        tableData6: [{
+        tableData: [{
           id: '12987122',
           name: 'Tom',
           amount1: '234',
@@ -1840,13 +1594,13 @@ Para una tabla de números, puede agregar una fila extra en el pie de página de
 
 Configurar _rowspan_ y _colspan_ le permite fusionar celdas.
 
-:::demo Utilice el atributo `span-method` para configurar rowspan y colspan. Este acepta un método, y pasa un objeto a ese método incluyedo la fila actual `row`, columna actual `column`, índice de fila actual `rowIndex` y índice de columna actual `columnIndex`. El método debe devolver un arreglo de dos números, el primer número siendo `rowspan` y el segundo `colspan`. También puede devolver un objeto con las propiedades `rowspan` y `colspan`.
+:::demo Utilice el atributo `span-method` para configurar rowspan y colspan. Este acepta un método, y pasa un objeto a ese método incluyendo la fila actual `row`, columna actual `column`, índice de fila actual `rowIndex` y índice de columna actual `columnIndex`. El método debe devolver un arreglo de dos números, el primer número siendo `rowspan` y el segundo `colspan`. También puede devolver un objeto con las propiedades `rowspan` y `colspan`.
 
 ```html
 <template>
   <div>
     <el-table
-      :data="tableData6"
+      :data="tableData"
       :span-method="arraySpanMethod"
       border
       style="width: 100%">
@@ -1877,7 +1631,7 @@ Configurar _rowspan_ y _colspan_ le permite fusionar celdas.
     </el-table>
 
     <el-table
-      :data="tableData6"
+      :data="tableData"
       :span-method="objectSpanMethod"
       border
       style="width: 100%; margin-top: 20px">
@@ -1910,7 +1664,7 @@ Configurar _rowspan_ y _colspan_ le permite fusionar celdas.
   export default {
     data() {
       return {
-        tableData6: [{
+        tableData: [{
           id: '12987122',
           name: 'Tom',
           amount1: '234',
@@ -2061,7 +1815,7 @@ Puede personalizar el índice de la fila con la propiedad `type=index` de las co
 | ---------------------- | ---------------------------------------- | ---------------------------------------- | ------------------------------ | ---------------------------------------- |
 | data                   | Datos de la tabla                        | array                                    | —                              | —                                        |
 | height                 | Altura de la tabla. Por defecto esta tiene un tamaño `auto`. Si este valor es un número, la altura es medido en pixeles; si este valor es una cadena, la altura es afectada por estilos externos. | string/number                            | —                              | —                                        |
-| max-height             | Altura máxima de la tabla. La altura de la tabla comienza desde `auto` hasta que alcanza la altura máxima. El `max-height` es medido en pixeles, lo mismo que `height` | string/number                            | —                              | —                                        |
+| max-height             | Table's max-height. The legal value is a number or the height in px.                | string/number                            | —                              | —                                        |
 | stripe                 | especifica si la tabla será en franjas   | boolean                                  | —                              | false                                    |
 | border                 | especifica si la tabla tiene bordes verticales | boolean                                  | —                              | false                                    |
 | size                   | tamaño de la tabla                       | string                                   | medium / small / mini          | —                                        |
@@ -2077,9 +1831,9 @@ Puede personalizar el índice de la fila con la propiedad `type=index` de las co
 | header-row-style       | función que devuelve estilos personalizados para una fila en la cabecera de la tabla, o un objeto asignando estilos personalizados para cada fila en la cabecera de la tabla | Function({row, rowIndex})/Object         | —                              | —                                        |
 | header-cell-class-name | función que devuelve nombre de clases personalizadas para una celda en la cabecera de la tabla, o una cadena asignando nombres de clases para cada celda en la cabecera de la tabla | Function({row, column, rowIndex, columnIndex})/String         | —                              | —                                        |
 | header-cell-style      | función que devuelve estilos personalizados para una celda en la cabecera de la tabla, o un objeto asignando estilos personalizados para cada celda en la cabecera de la tabla | Function({row, column, rowIndex, columnIndex})/Object         | —                              | —                                        |
-| row-key                | clave de datos de la fila, utilizada para optimizar la representación de los datos. Es obligatorio `reserve-selection` esta habilitado. Cuando su tipo es string, se permite el acceso multinivel, por ejemplo, `user.info.id`, pero `user.info[0].id` no es permitido, en cuyo caso se debe usar una `function` | Function(row)/String                     | —                              | —                                        |
+| row-key | key de los datos de las filas, utilizada para optimizar el renderizado. Requerido si `reserve-selection` está activada o muestra los datos del árbol. Cuando su tipo es String, se admite el acceso multinivel, por ejemplo, `user.info.id`, pero `user.info[0].id` no se admite, en cuyo caso se debe utilizar la función. | Function(row)/String | — | — |
 | empty-text             | Texto mostrado cuando no existen datos. Puede personalizar esta área con `slot="empty"` | String                                   | —                              | No Data                                  |
-| default-expand-all     | especifica si todas las filas se expanden por defeto, solo funciona cuando la tabla tiene una columna `type="expand"` | Boolean                                  | —                              | false                                    |
+| default-expand-all     | especifica si todas las filas se expanden por defecto, solo funciona cuando la tabla tiene una columna `type="expand"` | Boolean                                  | —                              | false                                    |
 | expand-row-keys        | establece las filas expandidas a través de esta propiedad, este valor es la clave de filas expandidas, debería establecer `row-key` antes de usar esta propiedad | Array                                    | —                              |                                          |
 | default-sort           | establece la columna y orden por defecto. La propiedad `prop` es utilizada para establecer la columna de ordenamiento por defecto, la propiedad `order` es utilizada para definir el tipo de orden por defecto | Object                                   | `order`: ascending, descending | if `prop` is set, and `order` is not set, then `order` is default to ascending |
 | tooltip-effect         | propiedad `effect` para efectos en tooltip | String                                   | dark/light                     |                                          |
@@ -2087,7 +1841,11 @@ Puede personalizar el índice de la fila con la propiedad `type=index` de las co
 | sum-text               | texto a mostrar para la primer columna de la fila de resumen | String                                   | —                              | Sum                                      |
 | summary-method         | método personalizado para resumen        | Function({ columns, data })              | —                              | —                                        |
 | span-method            | método que devuelve _rowspan_ y _colspan_ | Function({ row, column, rowIndex, columnIndex }) | —                              | —                                        |
-| select-on-indeterminate | controla el comportamiento del checkbox maestro en tablas de selección múltiple cuando sólo se seleccionan algunas filas (pero no todas). Si es true, todas las filas serán seleccionadas, de lo contrario deseleccionadas. | Boolean | — | true |
+| select-on-indeterminate | controla el comportamiento del checkbox maestro en tablas de selección múltiple cuando sólo se seleccionan algunas filas (pero no todas). Si es true, todas las filas serán seleccionadas, de lo contrario deseleccionadas.               | Boolean   | — | true |
+| indent                 | indentación horizontal de los datos en formato tree | Number    | — | 16   |
+| lazy                   | si se realiza un lazy loading de los datos | Boolean   | — | —    |
+| load                   | método para cargar las filas de los hijos, solamente funciona cuando `lazy`es true | Function(row, treeNode, resolve) | — | — |
+| tree-props             | configuración para renderizar datos anidados | Object    | — | { hasChildren: 'hasChildren', children: 'children' } |
 
 ### Eventos de la tabla
 | Nombre del evento  | Descripción                              | Parámetros                        |
@@ -2099,24 +1857,24 @@ Puede personalizar el índice de la fila con la propiedad `type=index` de las co
 | cell-mouse-leave   | se dispara cuando se desplaza fuera de una celda | row, column, cell, event          |
 | cell-click         | se dispara cuando se hace clic en una celda | row, column, cell, event          |
 | cell-dblclick      | se dispara cuando se hace doble clic en una celda | row, column, cell, event          |
-| row-click          | se dispara cuando se hace clic en una fila | row, event, column                |
-| row-contextmenu    | se dispara cuando el usuario hace clic derecho en una fila | row, event                        |
-| row-dblclick       | se dispara cuando se hace doble clic en una fila | row, event                        |
-| header-click       | se dispara cuando se hace click en una cabecera de columna | column, event                     |
+| row-click          | se dispara cuando se hace clic en una fila | row, column, event                |
+| row-contextmenu    | se dispara cuando el usuario hace clic derecho en una fila | row, column, event                        |
+| row-dblclick       | se dispara cuando se hace doble clic en una fila | row, column, event                        |
+| header-click       | se dispara cuando se hace clic en una cabecera de columna | column, event                     |
 | header-contextmenu | se dispara cuando el usuario hace clic derecho en una cabecera de columna | column, event                     |
 | sort-change        | se dispara cuando el ordenamiento de la tabla cambia | { column, prop, order }           |
 | filter-change      | clave de la columna. Si necesitas utilizar el evento filter-change, este atributo es obligatorio para identificar cuál columna está siendo filtrada | filters                           |
 | current-change     | se dispara cuando la fila actual cambia  | currentRow, oldCurrentRow         |
 | header-dragend     | se dispara después de modificar el ancho de una columna arrastrando el borde de la cabecera. | newWidth, oldWidth, column, event |
-| expand-change      | se dispara cuando el usuario expande o colapsa una fila | row, expandedRows                 |
+| expand-change      | se activa cuando el usuario expande o colapsa una fila (para la tabla expansible, el segundo parámetro es expandedRows; para la tabla de árbol, el segundo parámetro es expanded) | row, (expandedRows \| expanded) |
 
 ### Métodos de la tabla
 | Metodo             | Descripción                              | Parametros    |
 | ------------------ | ---------------------------------------- | ------------- |
 | clearSelection     | utilizado en selección múltiple de la tabla, limpiar selección | —     |
 | toggleRowSelection | utilizado en selección múltiple de la tabla, alterna si una cierta fila es seleccionada. Con el segundo parámetro, puede directamente establecer si la fila es seleccionada | row, selected |
-| toggleAllSelection | usado en Table de seleccion multiple, cambia los estados de seleccion de todas las filas. | - |
-| toggleRowExpansion | utilizado en tabla expandible, alterna si una cierta fila es expandida. Con el segundo parámetro, puede directamente establecer si esta fila es expandida o colapsada | row, expanded |
+| toggleAllSelection | usado en Table de selección múltiple, cambia los estados de selección de todas las filas. | - |
+| toggleRowExpansion | utilizado en la Tabla expandible o en la Tabla de árbol, conmutar si se desglosa una determinada línea. Con el segundo parámetro, se puede fijar directamente si esta línea se desglosa o se pliega | row, expanded |
 | setCurrentRow      | utilizado en tabla con selección sencilla, establece una cierta fila seleccionada. Si es llamado sin ningún parámetro, este puede limpiar la selección | row           |
 | clearSort          | limpiar ordenamiento, restaurar datos a orden original | —             |
 | clearFilter        | Se utiliza para borrar todas las condiciones de filtro cuando no se pasan parámetros, los datos se restaurarán a un estado sin filtrar, o se puede pasar una matriz de columnas para borrar las condiciones de filtro de la columna especificada.  | columnKey |
@@ -2132,7 +1890,7 @@ Puede personalizar el índice de la fila con la propiedad `type=index` de las co
 | Atributo              | Descripción                              | Tipo                              | Valores aceptados             | Por defecto |
 | --------------------- | ---------------------------------------- | --------------------------------- | ----------------------------- | ----------- |
 | type                  | tipo de la columna. Si se establece a `selection`, la columna puede mostrar un _checkbox_. Si se establece a `index`, la columna puede mostrar el índice de la fila (iniciando desde 1). Si se establece a `expand`, la columna puede mostrar un ícono para expandir. | string                            | selection/index/expand        | —           |
-| index                 | personalice los índices para cada fila, funciona en columnas con `type=index` | string, Function(index)           | -                             | -           |
+| index                 | personalice los índices para cada fila, funciona en columnas con `type=index` | number, Function(index)           | -                             | -           |
 | label                 | etiqueta de la columna                   | string                            | —                             | —           |
 | column-key            | clave de la columna. Si necesita utilizar el evento `filter-change`, necesita el atributo para identificar cual columna está siendo filtrada | string                            | string                        | —           |
 | prop                  | nombre del campo. También puede usar su alias: `property` | string                            | —                             | —           |
@@ -2143,7 +1901,7 @@ Puede personalizar el índice de la fila con la propiedad `type=index` de las co
 | sortable              | especifica que columna puede ser ordenado. El ordenamiento remoto puede ser hecho configurando el atributo `custom` y escucha al evento de tabla `sort-change` | boolean, string                   | true, false, custom           | false       |
 | sort-method           | método de ordenamiento, funciona cuando `sortable` está en `true`. Debería devolver un número, al igual que Array.sort | Function(a, b)                    | —                             | —           |
 | sort-by               | especifica por cual propiedad de va a ordenar, funciona cuando `sortable` es `true` y `sort-method` es `undefined`. Si se establece a un arreglo, la columna ordenara secuencialmente por la siguiente propiedad si la anterior es igual | Function(row, index)/String/Array | —                             | —           |
-| sort-orders           | the order of the sorting strategies used when sorting the data, works when `sortable` is `true`. Accepts an array, as the user clicks on the header, the column is sorted in order of the elements in the array | array | the elements in the array need to be one of the following: `ascending`, `descending` and `null` (restores to the original order) | ['ascending', 'descending', null] |
+| sort-orders           | el orden de las estrategias de ordenación utilizadas al ordenar los datos, funciona cuando `sortable` es `true`. Acepta un array, a medida que el usuario hace clic en el encabezado, la columna se ordena en el orden de los elementos del array. | array | los elementos en el arreglo necesitan ser uno de los siguientes: `ascending`, `descending` y `null` (restaura el orden original) | ['ascending', 'descending', null] |
 | resizable             | especifica si el ancho de la columna puede ser redimensionado, funciona cuando `border` de `el-table` está en `true` | boolean                           | —                             | false       |
 | formatter             | función que formatea el contenido de la celda | Function(row, column, cellValue, index)  | —                             | —           |
 | show-overflow-tooltip | especifica si el _tooltip_ debe ocultarse o mostrarse al hacer _hover_ en la celda | boolean                           | —                             | false       |
@@ -2152,9 +1910,9 @@ Puede personalizar el índice de la fila con la propiedad `type=index` de las co
 | class-name            | nombre de clase de la celda en la columna | string                            | —                             | —           |
 | label-class-name      | nombre de clase de la etiqueta de esta columna | string                            | —                             | —           |
 | selectable            | función que determina si una cierta fila puede ser seleccionada, funciona cuando `type` esta en `selection` | Function(row, index)              | —                             | —           |
-| reserve-selection     | especifica si se reserva la selección después de actualizar los datos, funciona cuando `type` está en `selection`. Note that `row-key` is required for this to work | boolean                           | —                             | false       |
+| reserve-selection     | especifica si se reserva la selección después de actualizar los datos, funciona cuando `type` está en `selection`. Note que `row-key` es requerido para que esto funcione | boolean                           | —                             | false       |
 | filters               | un arreglo de opciones para filtrado de datos. Para cada elemento en este arreglo, `text` y `value` son obligatorios | Array[{ text, value }]            | —                             | —           |
-| filter-placement      | colocación para el menu desplegable del filtro | String                            | same as Tooltip's `placement` | —           |
+| filter-placement      | colocación para el menú desplegable del filtro | String                            | same as Tooltip's `placement` | —           |
 | filter-multiple       | especifica si el filtrado de datos soporta múltiples opciones | Boolean                           | —                             | true        |
 | filter-method         | método para filtrado de datos. Si `filter-multiple` está habilitado, este método se invocará varias veces para cada fila, y una fila puede mostrar si una de las llamadas devuelve `true` | Function(value, row, column)      | —                             | —           |
 | filtered-value        | el valor del filtro para los datos seleccionados, puede ser útil cuando el encabezado de la tabla se representará con `render-header` | Array                             | —                             | —           |
diff --git a/examples/docs/es/tabs-dotted.md b/examples/docs/es/tabs-dotted.md
new file mode 100644
index 00000000000..b8837a53bc9
--- /dev/null
+++ b/examples/docs/es/tabs-dotted.md
@@ -0,0 +1 @@
+## TabsDotted
diff --git a/examples/docs/es/tabs.md b/examples/docs/es/tabs.md
index bafae0b3dc4..8c3c7bc5280 100644
--- a/examples/docs/es/tabs.md
+++ b/examples/docs/es/tabs.md
@@ -1,95 +1,3 @@
-<script>
-  export default {
-    data() {
-      return {
-        activeName: 'second',
-        activeName2: 'first',
-        editableTabsValue: '2',
-        editableTabsValue2: '2',
-        editableTabs: [{
-          title: 'Tab 1',
-          name: '1',
-          content: 'Tab 1 content'
-        }, {
-          title: 'Tab 2',
-          name: '2',
-          content: 'Tab 2 content'
-        }],
-        editableTabs2: [{
-          title: 'Tab 1',
-          name: '1',
-          content: 'Tab 1 content'
-        }, {
-          title: 'Tab 2',
-          name: '2',
-          content: 'Tab 2 content'
-        }],
-        tabIndex: 2,
-        tabPosition: 'top'
-      }
-    },
-    methods: {
-      handleClick(tab, event) {
-        console.log(tab, event);
-      },
-      handleTabsEdit(targetName, action) {
-        if (action === 'add') {
-          let newTabName = ++this.tabIndex + '';
-          this.editableTabs.push({
-            title: 'New Tab',
-            name: newTabName,
-            content: 'New Tab content'
-          });
-          this.editableTabsValue = newTabName;
-        }
-        if (action === 'remove') {
-          let tabs = this.editableTabs;
-          let activeName = this.editableTabsValue;
-          if (activeName === targetName) {
-            tabs.forEach((tab, index) => {
-              if (tab.name === targetName) {
-                let nextTab = tabs[index + 1] || tabs[index - 1];
-                if (nextTab) {
-                  activeName = nextTab.name;
-                }
-              }
-            });
-          }
-          
-          this.editableTabsValue = activeName;
-          this.editableTabs = tabs.filter(tab => tab.name !== targetName);
-        }
-      },
-      addTab(targetName) {
-        let newTabName = ++this.tabIndex + '';
-        this.editableTabs2.push({
-          title: 'New Tab',
-          name: newTabName,
-          content: 'New Tab content'
-        });
-        this.editableTabsValue2 = newTabName;
-      },
-      removeTab(targetName) {
-        let tabs = this.editableTabs2;
-        let activeName = this.editableTabsValue2;
-        if (activeName === targetName) {
-          tabs.forEach((tab, index) => {
-            if (tab.name === targetName) {
-              let nextTab = tabs[index + 1] || tabs[index - 1];
-              if (nextTab) {
-                activeName = nextTab.name;
-              }
-            }
-          });
-        }
-        
-        this.editableTabsValue2 = activeName;
-        this.editableTabs2 = tabs.filter(tab => tab.name !== targetName);
-      }
-    }
-  }
-</script>
-
 ## Tabulación
 
 Divide colecciones de datos que están relacionados pero pertenecen a diferentes tipos.
@@ -201,7 +109,7 @@ Es posible usar el atributo `tab-position` para establecer la posición de la ta
   export default {
     data() {
       return {
-        tabPosition: 'top'
+        tabPosition: 'left'
       };
     }
   };
@@ -302,14 +210,14 @@ Solo las pestañas de tipo tarjeta soportan adición y cierre.
 <div style="margin-bottom: 20px;">
   <el-button
     size="small"
-    @click="addTab(editableTabsValue2)"
+    @click="addTab(editableTabsValue)"
   >
     add tab
   </el-button>
 </div>
-<el-tabs v-model="editableTabsValue2" type="card" closable @tab-remove="removeTab">
+<el-tabs v-model="editableTabsValue" type="card" closable @tab-remove="removeTab">
   <el-tab-pane
-    v-for="(item, index) in editableTabs2"
+    v-for="(item, index) in editableTabs"
     :key="item.name"
     :label="item.title"
     :name="item.name"
@@ -321,8 +229,8 @@ Solo las pestañas de tipo tarjeta soportan adición y cierre.
   export default {
     data() {
       return {
-        editableTabsValue2: '2',
-        editableTabs2: [{
+        editableTabsValue: '2',
+        editableTabs: [{
           title: 'Tab 1',
           name: '1',
           content: 'Tab 1 content'
@@ -337,16 +245,16 @@ Solo las pestañas de tipo tarjeta soportan adición y cierre.
     methods: {
       addTab(targetName) {
         let newTabName = ++this.tabIndex + '';
-        this.editableTabs2.push({
+        this.editableTabs.push({
           title: 'New Tab',
           name: newTabName,
           content: 'New Tab content'
         });
-        this.editableTabsValue2 = newTabName;
+        this.editableTabsValue = newTabName;
       },
       removeTab(targetName) {
-        let tabs = this.editableTabs2;
-        let activeName = this.editableTabsValue2;
+        let tabs = this.editableTabs;
+        let activeName = this.editableTabsValue;
         if (activeName === targetName) {
           tabs.forEach((tab, index) => {
             if (tab.name === targetName) {
@@ -358,8 +266,8 @@ Solo las pestañas de tipo tarjeta soportan adición y cierre.
           });
         }
         
-        this.editableTabsValue2 = activeName;
-        this.editableTabs2 = tabs.filter(tab => tab.name !== targetName);
+        this.editableTabsValue = activeName;
+        this.editableTabs = tabs.filter(tab => tab.name !== targetName);
       }
     }
   }
@@ -368,30 +276,30 @@ Solo las pestañas de tipo tarjeta soportan adición y cierre.
 :::
 
 ### Atributos de Pestañas
-| Atributo     | Descripción                          | Tipo    | Valores aceptados     | Por defecto                 |
-| ------------ | ------------------------------------ | ------- | --------------------- | --------------------------- |
-| type         | tipo de Pestaña                      | string  | card/border-card      | —                           |
-| closable     | si la Pestaña es cerrable            | boolean | —                     | false                       |
-| addable      | si la Pestaña es añadible            | boolean | —                     | false                       |
-| editable     | si la Pestaña es añadible y cerrable | boolean | —                     | false                       |
-| value        | nombre de la pestaña seleccionada    | string  | —                     | nombre de la primer pestaña |
-| tab-position | posición de tabulación               | string  | top/right/bottom/left | top                         |
-| stretch      | si el ancho del tab se ajusta automáticamente a su contenedor | boolean | - | false |
-| before-leave | función `hook` antes de cambiar de pestaña. Si se devuelve `false` o se devuelve una `Promise` y luego se rechaza, se evitará el cambio. | Function(activeName, oldActiveName) | — | — |
+| Atributo       | Descripción                          | Tipo    | Valores aceptados     | Por defecto                 |
+| -------------- | ------------------------------------ | ------- | --------------------- | --------------------------- |
+| value / v-model | valor enlazado, nombre de la pestaña seleccionada    | string  | —                     | nombre de la primer pestaña |
+| type           | tipo de Pestaña                      | string  | card/border-card      | —                           |
+| closable       | si la Pestaña es cerrable            | boolean | —                     | false                       |
+| addable        | si la Pestaña es añadible            | boolean | —                     | false                       |
+| editable       | si la Pestaña es añadible y cerrable | boolean | —                     | false                       |
+| tab-position   | posición de tabulación               | string  | top/right/bottom/left | top                         |
+| stretch        | si el ancho del tab se ajusta automáticamente a su contenedor | boolean | - | false |
+| before-leave   | función `hook` antes de cambiar de pestaña. Si se devuelve `false` o se devuelve una `Promise` y luego se rechaza, se evitará el cambio. | Function(activeName, oldActiveName)  | — | — |
 
 ### Eventos de Pestañas
-| Nombre de Evento | Descripción                              | Parámetros                    |
-| ---------------- | ---------------------------------------- | ----------------------------- |
-| tab-click        | se lanza cuando se hace click a una pestaña | pestaña clickeada             |
-| tab-remove       | se lanza cuando se hace click al botón tab-remove | nombre de la pestaña removida |
-| tab-add          | se lanza cuando se hace click al botón tab-add | —                             |
+| Nombre de Evento | Descripción                                                  | Parámetros                    |
+| ---------------- | ------------------------------------------------------------ | ----------------------------- |
+| tab-click        | se lanza cuando se hace clic a una pestaña                   | pestaña clickeada             |
+| tab-remove       | se lanza cuando se hace clic al botón tab-remove             | nombre de la pestaña removida |
+| tab-add          | se lanza cuando se hace clic al botón tab-add                | —                             |
 | edit             | se lanza cuando los botones de tab-add y/o tab-remove son clickeados | (targetName, action)          |
 
-### Attributos del Tab-pane
+### Atributos del Tab-pane
 | Atributo | Descripción                                                  | Tipo    | Valores Aceptados | Default                                                      |
 | -------- | ------------------------------------------------------------ | ------- | ----------------- | ------------------------------------------------------------ |
 | label    | título de la pestaña                                         | string  | —                 | —                                                            |
 | disabled | si la Tabulación está deshabilitada                          | boolean | —                 | false                                                        |
-| name     | identificador correspondiente al activeName de la Tabulación, representando el alias del tab-pane | string  | —                 | número ordinal del tab-pane en la secuencia, p.ej el primer tab-pane de pestañas es '1' |
+| name     | identificador correspondiente al value de la Tabulación, representando el alias del tab-pane | string  | —                 | número ordinal del tab-pane en la secuencia, p.ej el primer tab-pane de pestañas es '1' |
 | closable | si el Tab es cerrable                                        | boolean | —                 | false                                                        |
 | lazy     | si Tab es renderizado con `lazy-load`                        | boolean | —                 | false                                                        |
diff --git a/examples/docs/es/tag.md b/examples/docs/es/tag.md
index a884f497770..f87faa25a07 100644
--- a/examples/docs/es/tag.md
+++ b/examples/docs/es/tag.md
@@ -1,62 +1,3 @@
-<script>
-  export default {
-    data() {
-      return {
-        tags: [
-          { name: 'Tag 1', type: '' },
-          { name: 'Tag 2', type: 'success' },
-          { name: 'Tag 3', type: 'info' },
-          { name: 'Tag 4', type: 'warning' },
-          { name: 'Tag 5', type: 'danger' }
-        ],
-        dynamicTags: ['Tag 1', 'Tag 2', 'Tag 3'],
-        inputVisible: false,
-        inputValue: ''
-      };
-    },
-    methods: {
-      handleClose(tag) {
-        this.dynamicTags.splice(this.dynamicTags.indexOf(tag), 1);
-      },
-    
-      showInput() {
-        this.inputVisible = true;
-        this.$nextTick(_ => {
-          this.$refs.saveTagInput.$refs.input.focus();
-        });
-      },
-    
-      handleInputConfirm() {
-        let inputValue = this.inputValue;
-        if (inputValue) {
-          this.dynamicTags.push(inputValue);
-        }
-        this.inputVisible = false;
-        this.inputValue = '';
-      }
-    }
-  }
-</script>
-
-<style>
-  .demo-box.demo-tag {
-    .el-tag + .el-tag {
-      margin-left: 10px;
-    }
-    .button-new-tag {
-      margin-left: 10px;
-      height: 32px;
-      line-height: 30px;
-      padding: 0 *;
-    }
-    .input-new-tag {
-      width: 90px;
-      margin-left: 10px;
-      vertical-align: bottom;
-    }
-  }
-</style>
-
 ## Tag
 
 Se utiliza para marcar y seleccionar.
@@ -66,11 +7,11 @@ Se utiliza para marcar y seleccionar.
 :::demo Utilice el atributo `type` para definir el tipo de etiqueta. Además, el atributo `color` se puede utilizar para establecer el color de fondo de la etiqueta.
 
 ```html
-<el-tag>Tag One</el-tag>
-<el-tag type="success">Tag Two</el-tag>
-<el-tag type="info">Tag Three</el-tag>
-<el-tag type="warning">Tag Four</el-tag>
-<el-tag type="danger">Tag Five</el-tag>
+<el-tag>Tag 1</el-tag>
+<el-tag type="success">Tag 2</el-tag>
+<el-tag type="info">Tag 3</el-tag>
+<el-tag type="warning">Tag 4</el-tag>
+<el-tag type="danger">Tag 5</el-tag>
 ```
 :::
 
@@ -198,18 +139,65 @@ Además del tamaño predeterminado, el componente Tag proporciona tres tamaños
 ```
 :::
 
+### Theme
+
+Tag provide three different themes: `dark`、`light` and `plain`
+
+:::demo Using `effect` to change, default is `light`
+```html
+<div class="tag-group">
+  <span class="tag-group__title">Dark</span>
+  <el-tag
+    v-for="item in items"
+    :key="item.label"
+    :type="item.type"
+    effect="dark">
+    {{ item.label }}
+  </el-tag>
+</div>
+<div class="tag-group">
+  <span class="tag-group__title">Plain</span>
+  <el-tag
+    v-for="item in items"
+    :key="item.label"
+    :type="item.type"
+    effect="plain">
+    {{ item.label }}
+  </el-tag>
+</div>
+
+<script>
+  export default {
+    data() {
+      return {
+        items: [
+          { type: '', label: 'Tag 1' },
+          { type: 'success', label: 'Tag 2' },
+          { type: 'info', label: 'Tag 3' },
+          { type: 'danger', label: 'Tag 4' },
+          { type: 'warning', label: 'Tag 5' }
+        ]
+      }
+    }
+  }
+</script>
+```
+:::
+
 ### Atributos
 | Atributo            | Descripción                         | Tipo    | Valores aceptados           | Por defecto |
 | ------------------- | ----------------------------------- | ------- | --------------------------- | ----------- |
-| type                | tema                                | string  | success/info/warning/danger | —           |
+| type                | tipo de Tag | string  | success/info/warning/danger | —           |
 | closable            | si el Tag puede ser removido        | boolean | —                           | false       |
 | disable-transitions | si se deshabilitan las animaciones  | boolean | —                           | false       |
 | hit                 | si el  Tag tiene un borde resaltado | boolean | —                           | false       |
 | color               | color de fondo del Tag              | string  | —                           | —           |
 | size                | tamaño del Tag                      | string  | medium / small / mini       | —           |
+| effect | Tema del Tag | string | dark / light / plain | light |
 
 
 ### Eventos
 | Nombre | Descripción                          | Parametros |
 | ------ | ------------------------------------ | ---------- |
-| close  | se disoara cuando el Tag es removido | —          |
\ No newline at end of file
+| click  | se dispara cuando el Tag es clic     | —          |
+| close  | se dispara cuando el Tag es removido | —          |
diff --git a/examples/docs/es/time-picker.md b/examples/docs/es/time-picker.md
index 716b2d18448..36e20f8fab7 100644
--- a/examples/docs/es/time-picker.md
+++ b/examples/docs/es/time-picker.md
@@ -1,23 +1,15 @@
-<style>
-  .demo-box {
-    .el-date-editor + .el-date-editor {
-      margin-left: 10px;
-    }
-  }
-</style>
-
 ## Selector de Tiempo
 
 Use el Time Picker para input de tipo time.
 
 ### Selector de tiempo fijo
 
-Provee una lista de tiempo fijo para que los usuarios escogan.
+Provee una lista de tiempo fijo para que los usuarios escojan.
 
 :::demo Use el tag `el-time-select`, se pueden asignar tiempo de inicio, tiempo de finalización y salto de tiempo con `start`, `end` y `step`.
 ```html
 <el-time-select
-  v-model="value1"
+  v-model="value"
   :picker-options="{
     start: '08:30',
     step: '00:15',
@@ -30,7 +22,7 @@ Provee una lista de tiempo fijo para que los usuarios escogan.
   export default {
     data() {
       return {
-        value1: ''
+        value: ''
       };
     }
   }
@@ -47,7 +39,7 @@ Un tiempo arbitrario puede ser escogido.
 ```html
 <template>
   <el-time-picker
-    v-model="value2"
+    v-model="value1"
     :picker-options="{
       selectableRange: '18:30:00 - 20:30:00'
     }"
@@ -55,7 +47,7 @@ Un tiempo arbitrario puede ser escogido.
   </el-time-picker>
   <el-time-picker
     arrow-control
-    v-model="value3"
+    v-model="value2"
     :picker-options="{
       selectableRange: '18:30:00 - 20:30:00'
     }"
@@ -67,8 +59,8 @@ Un tiempo arbitrario puede ser escogido.
   export default {
     data() {
       return {
-        value2: new Date(2016, 9, 10, 18, 40),
-        value3: new Date(2016, 9, 10, 18, 40)
+        value1: new Date(2016, 9, 10, 18, 40),
+        value2: new Date(2016, 9, 10, 18, 40)
       };
     }
   }
@@ -126,7 +118,7 @@ Es posible escoger un rango de tiempo arbitrario.
 <template>
   <el-time-picker
     is-range
-    v-model="value4"
+    v-model="value1"
     range-separator="To"
     start-placeholder="Start time"
     end-placeholder="End time">
@@ -134,7 +126,7 @@ Es posible escoger un rango de tiempo arbitrario.
   <el-time-picker
     is-range
     arrow-control
-    v-model="value5"
+    v-model="value2"
     range-separator="To"
     start-placeholder="Start time"
     end-placeholder="End time">
@@ -145,8 +137,8 @@ Es posible escoger un rango de tiempo arbitrario.
   export default {
     data() {
       return {
-        value4: [new Date(2016, 9, 10, 8, 40), new Date(2016, 9, 10, 9, 40)],
-        value5: [new Date(2016, 9, 10, 8, 40), new Date(2016, 9, 10, 9, 40)]
+        value1: [new Date(2016, 9, 10, 8, 40), new Date(2016, 9, 10, 9, 40)],
+        value2: [new Date(2016, 9, 10, 8, 40), new Date(2016, 9, 10, 9, 40)]
       };
     }
   }
@@ -154,25 +146,10 @@ Es posible escoger un rango de tiempo arbitrario.
 ```
 :::
 
-<script>
-  export default {
-    data() {
-      return {
-        value1: '',
-        value2: new Date(2016, 9, 10, 18, 40),
-        value3: new Date(2016, 9, 10, 18, 40),
-        value4: [new Date(2016, 9, 10, 8, 40), new Date(2016, 9, 10, 9, 40)],
-        value5: [new Date(2016, 9, 10, 8, 40), new Date(2016, 9, 10, 9, 40)],
-        startTime: '',
-        endTime: ''
-      };
-    }
-  }
-</script>
-
 ### Atributos
 | Atributo          | Descripción                              | Tipo                                     | Valores aceptados                        | Por defecto          |
 | ----------------- | ---------------------------------------- | ---------------------------------------- | ---------------------------------------- | -------------------- |
+| value / v-model    | valor enlazado                           | date(TimePicker) / string(TimeSelect)    | -                                        | -                    |
 | readonly          | si el Time Picker está en modo de sólo lectura | boolean                                  | —                                        | false                |
 | disabled          | si el Time Picker se encuentra deshabilitado | boolean                                  | —                                        | false                |
 | editable          | si el input puede ser editado            | boolean                                  | —                                        | true                 |
@@ -183,7 +160,6 @@ Es posible escoger un rango de tiempo arbitrario.
 | end-placeholder   | placeholder para el tiempo de finalización en modo de rango | string                                   | —                                        | —                    |
 | is-range          | si es posible escoger un rango de tiempo, solo funciona con `<el-time-picker>` | boolean                                  | —                                        | false                |
 | arrow-control     | si es posible escoger el tiempo usando los botones de flecha, solo funciona con `<el-time-picker>` | boolean                                  | —                                        | false                |
-| value             | valor del selector                       | Fecha para Selector de Tiempo, string para el Seleccionador de Tiempo | hour `HH`, minute `mm`, second `ss`      | HH:mm:ss             |
 | align             | alineación                               | left / center / right                    | left                                     |                      |
 | popper-class      | nombre de clase personalizada para el dropdown del Time Picker | string                                   | —                                        | —                    |
 | picker-options    | opciones adicionales, revisar la tabla posterior | object                                   | —                                        | {}                   |
diff --git a/examples/docs/es/timeline.md b/examples/docs/es/timeline.md
new file mode 100644
index 00000000000..1c76ca6ed37
--- /dev/null
+++ b/examples/docs/es/timeline.md
@@ -0,0 +1,153 @@
+## Timeline
+
+Línea de tiempo visual.
+
+### Uso básico
+
+El Timeline puede ser dividido en múltiples actividades en forma ascendente o descendente. Las marcas de tiempo son características importantes que los distinguen de otros componentes. Observe la diferencia con Steps.
+
+:::demo
+```html
+<div class="block">
+  <div class="radio">
+    Order: 
+    <el-radio-group v-model="reverse">
+      <el-radio :label="true">descending</el-radio>
+      <el-radio :label="false">ascending</el-radio>
+    </el-radio-group>
+  </div>
+
+  <el-timeline :reverse="reverse">
+    <el-timeline-item
+      v-for="(activity, index) in activities"
+      :key="index"
+      :timestamp="activity.timestamp">
+      {{activity.content}}
+    </el-timeline-item>
+  </el-timeline>
+</div>
+
+<script>
+  export default {
+    data() {
+      return {
+        reverse: true,
+        activities: [{
+          content: 'Success',
+          timestamp: '2018-04-11'
+        }, {
+          content: 'Approved',
+          timestamp: '2018-04-13'
+        }, {
+          content: 'Event start',
+          timestamp: '2018-04-15'
+        }]
+      };
+    }
+  };
+</script>
+```
+:::
+
+### Nodo personalizado
+
+El tamaño, el color y los iconos se pueden personalizar en el nodo.
+
+:::demo
+```html
+<div class="block">
+  <el-timeline>
+    <el-timeline-item
+      v-for="(activity, index) in activities"
+      :key="index"
+      :icon="activity.icon"
+      :type="activity.type"
+      :color="activity.color"
+      :size="activity.size"
+      :timestamp="activity.timestamp">
+      {{activity.content}}
+    </el-timeline-item>
+  </el-timeline>
+</div>
+
+<script>
+  export default {
+    data() {
+      return {
+        activities: [{
+          content: 'Custom icon',
+          timestamp: '2018-04-12 20:46',
+          size: 'large',
+          type: 'primary',
+          icon: 'el-icon-more'
+        }, {
+          content: 'Custom color',
+          timestamp: '2018-04-03 20:46',
+          color: '#0bbd87'
+        }, {
+          content: 'Custom size',
+          timestamp: '2018-04-03 20:46',
+          size: 'large'
+        }, {
+          content: 'Default node',
+          timestamp: '2018-04-03 20:46'
+        }]
+      };
+    }
+  };
+</script>
+```
+:::
+
+### Marcas de tiempo personalizadas
+
+Las marcas de tiempo ( timestamp )  puede colocarse encima del contenido cuando éste es demasiado alto.
+
+:::demo
+```html
+<div class="block">
+  <el-timeline>
+    <el-timeline-item timestamp="2018/4/12" placement="top">
+      <el-card>
+        <h4>Update Github template</h4>
+        <p>Tom committed 2018/4/12 20:46</p>
+      </el-card>
+    </el-timeline-item>
+    <el-timeline-item timestamp="2018/4/3" placement="top">
+      <el-card>
+        <h4>Update Github template</h4>
+        <p>Tom committed 2018/4/3 20:46</p>
+      </el-card>
+    </el-timeline-item>
+    <el-timeline-item timestamp="2018/4/2" placement="top">
+      <el-card>
+        <h4>Update Github template</h4>
+        <p>Tom committed 2018/4/2 20:46</p>
+      </el-card>
+    </el-timeline-item>
+  </el-timeline>
+</div>
+```
+:::
+
+### Timeline Atributos
+| Atributo | Descripción | Tipo    | Valores aceptados | Por defecto |
+|---------- |-------- |---------- |-------------  |-------- |
+| reverse | Si el node es ascendente o descendente. Por defecto es ascendente | boolean | — | false |
+
+### Timeline-item Atributos
+| Atributo    | Descripción | Tipo    | Valores aceptados | Por defecto |
+|---------- |-------- |---------- |-------------  |-------- |
+| timestamp     | Contenido de las marcas de tiempo | string  | - | — |
+| hide-timestamp  | Si se muestra o no timestamp | boolean | — | false |
+| placement | la posición de timestamp | string | top / bottom | bottom |
+| type | tipo de nodo | string | primary / success / warning / danger / info | - |
+| color | color de fondo del nodo | string | hsl / hsv / hex / rgb | - |
+| size | tamaño del nodo | string | normal / large | normal |
+| icon | nombre de la clase del icono | string | — | - |
+
+### Timeline-Item Slot
+| name | Description |
+|------|--------|
+| — | Contenido personalizado del ítem del timeline |
+| dot | Definición personalizada del nodo |
diff --git a/examples/docs/es/tooltip.md b/examples/docs/es/tooltip.md
index 91d9a198977..b1be34b4e4a 100644
--- a/examples/docs/es/tooltip.md
+++ b/examples/docs/es/tooltip.md
@@ -1,60 +1,3 @@
-<script>
-  export default {
-    data() {
-      return {
-        disabled: false
-      };
-    }
-  };
-</script>
-
-<style>
-  .demo-tooltip.demo-es {
-    &:first-of-type .source {
-      .el-button {
-        width: 110px;
-      }
-    }
-    .el-tooltip + .el-tooltip {
-      margin-left: 15px;
-    }
-    .box {
-      width: 400px;
-    
-      .top {
-        text-align: center;
-      }
-      
-      .left {
-        float: left;
-        width: 110px;
-      }
-      
-      .right {
-        float: right;
-        width: 110px;
-      }
-      
-      .bottom {
-        clear: both;
-        text-align: center;
-      }
-      
-      .item {
-        margin: 4px;
-      }
-      
-      .left .el-tooltip__popper,
-      .right .el-tooltip__popper {
-        padding: 8px 10px;
-      }
-      .el-tooltip {
-        margin-left: 0;
-      }
-    }
-  }
-</style>
-
 ## Tooltip
 
 Mostrar aviso de información con el hover del mouse.
@@ -156,7 +99,7 @@ Tooltip tiene 9 colocaciones.
 
 ### Tema
 
-Tooltip tiene dos temas: `dark` and `light`.
+Tooltip tiene dos temas: `dark` y `light`.
 
 :::demo Establecer `effect` para modificar el tema, el valor por defecto es `dark`.
 ```html
@@ -173,7 +116,7 @@ Tooltip tiene dos temas: `dark` and `light`.
 
 Despliegue múltiples líneas de texto y establezca su formato.
 
-:::demo Sobre-escribiba el atributo `content` del `el-tooltip` añadiendo un slot llamado `content`.
+:::demo Sobrecriba el atributo `content` del `el-tooltip` añadiendo un slot llamado `content`.
 ```html
 <el-tooltip placement="top">
   <div slot="content">multiple lines<br/>second line</div>
@@ -190,7 +133,7 @@ el atributo `transition` permite personalizar la animación con la que el Toolti
 
 el atributo `disabled` permite deshabilitar `tooltip`. Solo es necesario definirlo como `true`.
 
-De hecho, Tooltip es una extension basada en [Vue-popper](https://github.com/element-component/vue-popper), es posible utilizar cualquier atributo permitido en Vue-popper.
+De hecho, Tooltip es una extensión basada en [Vue-popper](https://github.com/element-component/vue-popper), es posible utilizar cualquier atributo permitido en Vue-popper.
 
 :::demo
 ```html
@@ -200,6 +143,16 @@ De hecho, Tooltip es una extension basada en [Vue-popper](https://github.com/ele
   </el-tooltip>
 </template>
 
+<script>
+  export default {
+    data() {
+      return {
+        disabled: false
+      };
+    }
+  };
+</script>
+
 <style>
   .slide-fade-enter-active {
     transition: all .3s ease;
@@ -215,7 +168,6 @@ De hecho, Tooltip es una extension basada en [Vue-popper](https://github.com/ele
 ```
 :::
 
-
 :::tip
 El componente `router-link` no es soportado por Tooltip, favor de usar `vm.$router.push`.
 
@@ -230,7 +182,7 @@ Es necesario envolver los elementos de forma deshabilitados en un elemento conte
 | effect         | tema del Tooltip                         | string  | dark/light                               | dark                                     |
 | content        | contenido a mostrar, puede ser sobre-escrito por `slot#content` | string  | —                                        | —                                        |
 | placement      | posición del Tooltip                     | string  | top/top-start/top-end/bottom/bottom-start/bottom-end/left/left-start/left-end/right/right-start/right-end | bottom                                   |
-| value(v-model) | visibilidad del Tooltip                  | boolean | —                                        | false                                    |
+| value / v-model | visibilidad del Tooltip                  | boolean | —                                        | false                                    |
 | disabled       | saber si el Tooltip se encuentra deshabilitado | boolean | —                                        | false                                    |
 | offset         | offset del Tooltip                       | number  | —                                        | 0                                        |
 | transition     | nombre de animación                      | string  | —                                        | el-fade-in-linear                        |
@@ -241,3 +193,4 @@ Es necesario envolver los elementos de forma deshabilitados en un elemento conte
 | popper-class   | nombre de clase personalizada para el popper del Tooltip | string  | —                                        | —                                        |
 | enterable      | si el mouse puede entrar al Tooltip      | Boolean | —                                        | true                                     |
 | hide-after     | tiempo a esperar en milisegundos para esconder el Tooltip | number  | —                                        | 0                                        |
+| tabindex       | [tabindex](https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/tabindex) of Tooltip | number   | —                      | 0              |
diff --git a/examples/docs/es/transfer.md b/examples/docs/es/transfer.md
index 290641f4e31..d617a563b04 100644
--- a/examples/docs/es/transfer.md
+++ b/examples/docs/es/transfer.md
@@ -1,84 +1,11 @@
-<style>
-  .demo-transfer {
-    .transfer-footer {
-      margin-left: 15px;
-      padding: 6px 5px;
-    }
-  }
-</style>
-
-<script>
-  export default {
-    data() {
-      const generateData = _ => {
-        const data = [];
-        for (let i = 1; i <= 15; i++) {
-          data.push({
-            key: i,
-            label: `Option ${ i }`,
-            disabled: i % 4 === 0
-          });
-        }
-        return data;
-      };
-      const generateData2 = _ => {
-        const data = [];
-        const states = ['California', 'Illinois', 'Maryland', 'Texas', 'Florida', 'Colorado', 'Connecticut '];
-        const initials = ['CA', 'IL', 'MD', 'TX', 'FL', 'CO', 'CT'];
-        states.forEach((city, index) => {
-          data.push({
-            label: city,
-            key: index,
-            initial: initials[index]
-          });
-        });
-        return data;
-      };
-      const generateData3 = _ => {
-        const data = [];
-        for (let i = 1; i <= 15; i++) {
-          data.push({
-            value: i,
-            desc: `Option ${ i }`,
-            disabled: i % 4 === 0
-          });
-        }
-        return data;
-      };
-      return {
-        data: generateData(),
-        data2: generateData2(),
-        data3: generateData3(),
-        value1: [1, 4],
-        value2: [],
-        value3: [1],
-        value4: [1],
-        value5: [],
-        filterMethod(query, item) {
-          return item.initial.toLowerCase().indexOf(query.toLowerCase()) > -1;
-        },
-        renderFunc(h, option) {
-          return <span>{ option.key } - { option.label }</span>;
-        }
-      };
-    },
-    
-    methods: {
-      handleChange(value, direction, movedKeys) {
-        console.log(value, direction, movedKeys);
-      }
-    }
-  };
-</script>
-
 ## Transfer
 
 ### Uso básico
-:::demo Los datos se pasan a Transfer a través del atributo `data`. Los datos tienen que ser un array de objetos, y cada objeto debe tener estos atributos: `key` que será el identificador del item, `label` que será el texto a mostrar, y `disabled` que indicará si el elemento esta desactivado. Los items dentro de la lista destino están sincronizados con la variable asociada a `v-model`, y el valor de esa variable es un array de claves de los elementos de la lista destino. Así que si no quiere que la lista destino esté vacía inicialmente puede inicializar el `v-model` con un array.
+:::demo Los datos se pasan a Transfer a través del atributo `data`. Los datos tienen que ser un array de objetos, y cada objeto debe tener estos atributos: `key` que será el identificador del ítem, `label` que será el texto a mostrar, y `disabled` que indicará si el elemento esta desactivado. Los items dentro de la lista destino están sincronizados con la variable asociada a `v-model`, y el valor de esa variable es un array de claves de los elementos de la lista destino. Así que si no quiere que la lista destino esté vacía inicialmente puede inicializar el `v-model` con un array.
 ```html
 <template>
   <el-transfer
-    v-model="value1"
+    v-model="value"
     :data="data">
   </el-transfer>
 </template>
@@ -99,7 +26,7 @@
       };
       return {
         data: generateData(),
-        value1: [1, 4]
+        value: [1, 4]
       };
     }
   };
@@ -111,22 +38,22 @@
 
 Puede buscar y filtrar los items.
 
-:::demo Ponga el atributo `filterable` a true para permitir el filtrado.Por defecto si el `label` del item contiene el término buscado será incluido en el resultado. También puede implementar su propio método de filtrado con el atributo `filter-method`, que recibe un método y le pasa la búsqueda y cada item. Los items para los que devuelva true serán incluidos en el resultado de la búsqueda.
+:::demo Ponga el atributo `filterable` a true para permitir el filtrado.Por defecto si el `label` del ítem contiene el término buscado será incluido en el resultado. También puede implementar su propio método de filtrado con el atributo `filter-method`, que recibe un método y le pasa la búsqueda y cada ítem. Los items para los que devuelva true serán incluidos en el resultado de la búsqueda.
 ```html
 <template>
   <el-transfer
     filterable
     :filter-method="filterMethod"
     filter-placeholder="State Abbreviations"
-    v-model="value2"
-    :data="data2">
+    v-model="value"
+    :data="data">
   </el-transfer>
 </template>
 
 <script>
   export default {
     data() {
-      const generateData2 = _ => {
+      const generateData = _ => {
         const data = [];
         const states = ['California', 'Illinois', 'Maryland', 'Texas', 'Florida', 'Colorado', 'Connecticut '];
         const initials = ['CA', 'IL', 'MD', 'TX', 'FL', 'CO', 'CT'];
@@ -140,8 +67,8 @@ Puede buscar y filtrar los items.
         return data;
       };
       return {
-        data2: generateData2(),
-        value2: [],
+        data: generateData(),
+        value: [],
         filterMethod(query, item) {
           return item.initial.toLowerCase().indexOf(query.toLowerCase()) > -1;
         }
@@ -154,16 +81,16 @@ Puede buscar y filtrar los items.
 
 ### Personalizable
 
-Puede personalizar los títulos, botones, la función de renderizado de los items, el texto de status de la cabecera y el contenido del pie.
+Puede personalizar los títulos, botones, la función de renderizado de los items, el texto de estatus de la cabecera y el contenido del pie.
 
-:::demo Use `titles`, `button-texts`, `render-content` y `format` respectivamente para personalizar los títulos de las listas, el texto de los botones, la función de renderizado para los items y el texto de la cabecera que muestra el estado de los items. Plus, you can also use scoped slot to customize data items. Para el pie de la lista hay dos slots: `left-footer` y `right-footer`. Además, si quiere algunos items marcados inicialmente puede usar `left-default-checked` y `right-default-checked`. Finalmente este ejemplo muestra el evento `change`. Tenga en cuenta que este ejemplo no se puede ejecutar en jsfiddle porque no soporta sintaxis JSX. En un proyecto real `render-content` funcionará si las dependencias son configuradas correctamente.
+:::demo Use `titles`, `button-texts`, `render-content` y `format` respectivamente para personalizar los títulos de las listas, el texto de los botones, la función de renderizado para los items y el texto de la cabecera que muestra el estado de los items. Además, también puede utilizar el scoped-slot para personalizar los elementos de datos. Para el pie de la lista hay dos slots: `left-footer` y `right-footer`. Además, si quiere algunos items marcados inicialmente puede usar `left-default-checked` y `right-default-checked`. Finalmente este ejemplo muestra el evento `change`. Tenga en cuenta que este ejemplo no se puede ejecutar en jsfiddle porque no soporta sintaxis JSX. En un proyecto real `render-content` funcionará si las dependencias son configuradas correctamente.
 ```html
 <template>
   <p style="text-align: center; margin: 0 0 20px">Customize data items using render-content</p>
   <div style="text-align: center">
     <el-transfer
       style="text-align: left; display: inline-block"
-      v-model="value3"
+      v-model="value"
       filterable
       :left-default-checked="[2, 3]"
       :right-default-checked="[1]"
@@ -226,7 +153,7 @@ Puede personalizar los títulos, botones, la función de renderizado de los item
       };
       return {
         data: generateData(),
-        value3: [1],
+        value: [1],
         value4: [1],
         renderFunc(h, option) {
           return <span>{ option.key } - { option.label }</span>;
@@ -252,19 +179,19 @@ Por defecto Transfer busca los atributos `key`, `label`, y `disabled` en cada el
 ```html
 <template>
   <el-transfer
-    v-model="value5"
+    v-model="value"
     :props="{
       key: 'value',
       label: 'desc'
     }"
-    :data="data3">
+    :data="data">
   </el-transfer>
 </template>
 
 <script>
   export default {
     data() {
-      const generateData3 = _ => {
+      const generateData = _ => {
         const data = [];
         for (let i = 1; i <= 15; i++) {
           data.push({
@@ -276,8 +203,8 @@ Por defecto Transfer busca los atributos `key`, `label`, y `disabled` en cada el
         return data;
       };
       return {
-        data3: generateData3(),
-        value5: []
+        data: generateData(),
+        value: []
       };
     }
   };
@@ -288,6 +215,7 @@ Por defecto Transfer busca los atributos `key`, `label`, y `disabled` en cada el
 ### Atributos
 | Atriburo              | Descripcion                              | Tipo                            | Valores aceptados | Por defecto                              |
 | --------------------- | ---------------------------------------- | ------------------------------- | ----------------- | ---------------------------------------- |
+| value / v-model        | valor enlazado                           | array                           | —                 | —                                        |
 | data                  | Origen de datos                          | array[{ key, label, disabled }] | —                 | [ ]                                      |
 | filterable            | Si se puede filtrar                      | boolean                         | —                 | false                                    |
 | filter-placeholder    | Placeholder para el input del filtro     | string                          | —                 | Enter keyword                            |
@@ -310,7 +238,7 @@ Por defecto Transfer busca los atributos `key`, `label`, y `disabled` en cada el
 ### Scoped Slot
 | Name | Description |
 |------|--------|
-| — | Custom content for data items. The scope parameter is { option } |
+| — | Contenido personalizado para los datos de los items. El parámetro del scope es { option } |
 
 ### Methods
 | Method | Description | Parameters |
@@ -320,6 +248,6 @@ Por defecto Transfer busca los atributos `key`, `label`, y `disabled` en cada el
 ### Eventos
 | Nombre | Descripcion                              | Parametros                               |
 | ------ | ---------------------------------------- | ---------------------------------------- |
-| change | se lanzá cuando los elementos cambian en la lista de la derecha | array con las claves de los elementos de la lista de la derecha |
+| change | se lanza cuando los elementos cambian en la lista de la derecha | array con las claves de los elementos de la lista de la derecha |
 | left-check-change | se dispara cuando el usuario final cambia el estado verificado de cualquier elemento de datos en la lista izquierda | array clave de ítems actualmente verificados, array clave de ítems cuyo estado verificado ha cambiado |
 | right-check-change | se dispara cuando el usuario final cambia el estado verificado de cualquier elemento de datos en la lista derecha. | array clave de ítems actualmente verificados, array clave de ítems cuyo estado verificado ha cambiado |
diff --git a/examples/docs/es/transition.md b/examples/docs/es/transition.md
index f3adc4d94bc..a7f3071f796 100644
--- a/examples/docs/es/transition.md
+++ b/examples/docs/es/transition.md
@@ -35,7 +35,7 @@ Puede usar directamente las transiciones incorporadas en Element. Antes de hacer
     width: 200px;
     height: 100px;
     border-radius: 4px;
-    background-color: #409EFF;
+    background-color: #2460e0;
     text-align: center;
     color: #fff;
     padding: 40px 20px;
@@ -84,7 +84,7 @@ Puede usar directamente las transiciones incorporadas en Element. Antes de hacer
     width: 200px;
     height: 100px;
     border-radius: 4px;
-    background-color: #409EFF;
+    background-color: #2460e0;
     text-align: center;
     color: #fff;
     padding: 40px 20px;
@@ -99,6 +99,7 @@ Puede usar directamente las transiciones incorporadas en Element. Antes de hacer
 ### Colapsado
 Para efectos de colapsado usar el componente `el-collapse-transition`.
 :::demo
+
 ```html
 <template>
   <div>
@@ -129,7 +130,7 @@ Para efectos de colapsado usar el componente `el-collapse-transition`.
     width: 200px;
     height: 100px;
     border-radius: 4px;
-    background-color: #409EFF;
+    background-color: #2460e0;
     text-align: center;
     color: #fff;
     padding: 40px 20px;
@@ -140,39 +141,14 @@ Para efectos de colapsado usar el componente `el-collapse-transition`.
 ```
 :::
 
-### On demand
+### Bajo demanda
 
 ```js
 // fade/zoom
-import 'element-ui/lib/theme-chalk/base.css';
+import '@femessage/element-ui/lib/theme-chalk/base.css';
 // colapsar
-import CollapseTransition from 'element-ui/lib/transitions/collapse-transition';
+import CollapseTransition from '@femessage/element-ui/lib/transitions/collapse-transition';
 import Vue from 'vue'
 
 Vue.component(CollapseTransition.name, CollapseTransition)
 ```
-
-<style>
-  .transition-box {
-    margin-bottom: 10px;
-    width: 200px;
-    height: 100px;
-    border-radius: 4px;
-    background-color: #409EFF;
-    text-align: center;
-    color: #fff;
-    padding: 40px 20px;
-    margin-right: 20px;
-    box-sizing: border-box;
-  }
-</style>
-
-<script>
-  module.exports = {
-    data: () => ({
-      show: true,
-      show2: true,
-      show3: true
-    })
-  }
-</script>
diff --git a/examples/docs/es/tree.md b/examples/docs/es/tree.md
index c6d11bc8c77..c66065aa10c 100644
--- a/examples/docs/es/tree.md
+++ b/examples/docs/es/tree.md
@@ -1,382 +1,3 @@
-<style>
-  .demo-tree {
-    .leaf {
-      width: 20px;
-      background: #ddd;
-    }
-
-    .folder {
-      width: 20px;
-      background: #888;
-    }
-
-    .buttons {
-      margin-top: 20px;
-    }
-
-    .filter-tree {
-      margin-top: 20px;
-    }
-
-    .custom-tree-container {
-      display: flex;
-      margin: -24px;
-    }
-
-    .block {
-      flex: 1;
-      padding: 8px 24px 24px;
-
-      &:first-child {
-        border-right: solid 1px #eff2f6;
-      }
-
-      > p {
-        text-align: center;
-        margin: 0;
-        line-height: 4;
-      }
-    }
-
-    .custom-tree-node {
-      flex: 1;
-      display: flex;
-      align-items: center;
-      justify-content: space-between;
-      font-size: 14px;
-      padding-right: 8px;
-    }
-  }
-</style>
-
-<script>
-  const data = [{
-    label: 'Level one 1',
-    children: [{
-      label: 'Level two 1-1',
-      children: [{
-        label: 'Level three 1-1-1'
-      }]
-    }]
-  }, {
-    label: 'Level one 2',
-    children: [{
-      label: 'Level two 2-1',
-      children: [{
-        label: 'Level three 2-1-1'
-      }]
-    }, {
-      label: 'Level two 2-2',
-      children: [{
-        label: 'Level three 2-2-1'
-      }]
-    }]
-  }, {
-    label: 'Level one 3',
-    children: [{
-      label: 'Level two 3-1',
-      children: [{
-        label: 'Level three 3-1-1'
-      }]
-    }, {
-      label: 'Level two 3-2',
-      children: [{
-        label: 'Level three 3-2-1'
-      }]
-    }]
-  }];
-
-  const data2 = [{
-    id: 1,
-    label: 'Level one 1',
-    children: [{
-      id: 4,
-      label: 'Level two 1-1',
-      children: [{
-        id: 9,
-        label: 'Level three 1-1-1'
-      }, {
-        id: 10,
-        label: 'Level three 1-1-2'
-      }]
-    }]
-  }, {
-    id: 2,
-    label: 'Level one 2',
-    children: [{
-      id: 5,
-      label: 'Level two 2-1'
-    }, {
-      id: 6,
-      label: 'Level two 2-2'
-    }]
-  }, {
-    id: 3,
-    label: 'Level one 3',
-    children: [{
-      id: 7,
-      label: 'Level two 3-1'
-    }, {
-      id: 8,
-      label: 'Level two 3-2'
-    }]
-  }];
-
-  const data3 = [{
-    id: 1,
-    label: 'Level one 1',
-    children: [{
-      id: 3,
-      label: 'Level two 2-1',
-      children: [{
-        id: 4,
-        label: 'Level three 3-1-1'
-      }, {
-        id: 5,
-        label: 'Level three 3-1-2',
-        disabled: true
-      }]
-    }, {
-      id: 2,
-      label: 'Level two 2-2',
-      disabled: true,
-      children: [{
-        id: 6,
-        label: 'Level three 3-2-1'
-      }, {
-        id: 7,
-        label: 'Level three 3-2-2',
-        disabled: true
-      }]
-    }]
-  }];
-
-  const data6 = [{
-    label: 'Level one 1',
-    children: [{
-      label: 'Level two 1-1',
-      children: [{
-        label: 'Level three 1-1-1'
-      }]
-    }]
-  }, {
-    label: 'Level one 2',
-    children: [{
-      label: 'Level two 2-1',
-      children: [{
-        label: 'Level three 2-1-1'
-      }]
-    }, {
-      label: 'Level two 2-2',
-      children: [{
-        label: 'Level three 2-2-1'
-      }]
-    }]
-  }, {
-    label: 'Level one 3',
-    children: [{
-      label: 'Level two 3-1',
-      children: [{
-        label: 'Level three 3-1-1'
-      }]
-    }, {
-      label: 'Level two 3-2',
-      children: [{
-        label: 'Level three 3-2-1'
-      }]
-    }]
-  }];
-
-  let id = 1000;
-
-  const regions = [{
-    'name': 'region1'
-  }, {
-    'name': 'region2'
-  }];
-
-  let count = 1;
-
-  const props = {
-    label: 'name',
-    children: 'zones'
-  };
-
-  const props1 = {
-    label: 'name',
-    children: 'zones',
-    isLeaf: 'leaf'
-  };
-
-  const defaultProps = {
-    children: 'children',
-    label: 'label'
-  };
-
-  export default {
-    watch: {
-      filterText(val) {
-        this.$refs.tree2.filter(val);
-      }
-    },
-
-    methods: {
-      handleCheckChange(data, checked, indeterminate) {
-        console.log(data, checked, indeterminate);
-      },
-      handleNodeClick(data) {
-        console.log(data);
-      },
-      handleDragStart(node, ev) {
-        console.log('drag start', node);
-      },
-      handleDragEnter(draggingNode, dropNode, ev) {
-        console.log('tree drag enter: ', dropNode.label);
-      },
-      handleDragLeave(draggingNode, dropNode, ev) {
-        console.log('tree drag leave: ', dropNode.label);
-      },
-      handleDragOver(draggingNode, dropNode, ev) {
-        console.log('tree drag over: ', dropNode.label);
-      },
-      handleDragEnd(draggingNode, dropNode, dropType, ev) {
-        console.log('tree drag end: ', dropNode && dropNode.label, dropType);
-      },
-      handleDrop(draggingNode, dropNode, dropType, ev) {
-        console.log('tree drop: ', dropNode.label, dropType);
-      },
-      allowDrop(draggingNode, dropNode, type) {
-        if (dropNode.data.label === 'Level two 3-1') {
-          return type !== 'inner';
-        } else {
-          return true;
-        }
-      },
-      allowDrag(draggingNode) {
-        return draggingNode.data.label.indexOf('Level three 3-1-1') === -1;
-      },
-      loadNode(node, resolve) {
-        if (node.level === 0) {
-          return resolve([{ name: 'Root1' }, { name: 'Root2' }]);
-        }
-        if (node.level > 3) return resolve([]);
-        var hasChild;
-        if (node.data.name === 'region1') {
-          hasChild = true;
-        } else if (node.data.name === 'region2') {
-          hasChild = false;
-        } else {
-          hasChild = Math.random() > 0.5;
-        }
-
-        setTimeout(function() {
-          let data;
-          if (hasChild) {
-            data = [{
-              name: 'zone' + count++
-            }, {
-              name: 'zone' + count++
-            }];
-          } else {
-            data = [];
-          }
-
-          resolve(data);
-        }, 500);
-      },
-      loadNode1(node, resolve) {
-        if (node.level === 0) {
-          return resolve([{ name: 'region' }]);
-        }
-        if (node.level > 1) return resolve([]);
-
-        setTimeout(() => {
-          const data = [{
-            name: 'leaf',
-            leaf: true
-          }, {
-            name: 'zone'
-          }];
-
-          resolve(data);
-        }, 500);
-      },
-      getCheckedNodes() {
-        console.log(this.$refs.tree.getCheckedNodes());
-      },
-      getCheckedKeys() {
-        console.log(this.$refs.tree.getCheckedKeys());
-      },
-      setCheckedNodes() {
-        this.$refs.tree.setCheckedNodes([
-          {
-            id: 5,
-            label: 'Level two 2-1'
-          },
-          {
-            id: 9,
-            label: 'Level three 1-1-1'
-          }
-        ]);
-      },
-      setCheckedKeys() {
-        this.$refs.tree.setCheckedKeys([3]);
-      },
-      resetChecked() {
-        this.$refs.tree.setCheckedKeys([]);
-      },
-      append(data) {
-        const newChild = { id: id++, label: 'testtest', children: [] };
-        if (!data.children) {
-          this.$set(data, 'children', []);
-        }
-        data.children.push(newChild);
-      },
-
-      remove(node, data) {
-        const parent = node.parent;
-        const children = parent.data.children || parent.data;
-        const index = children.findIndex(d => d.id === data.id);
-        children.splice(index, 1);
-      },
-
-      renderContent(h, { node, data, store }) {
-        return (
-          <span class="custom-tree-node">
-            <span>{node.label}</span>
-            <span>
-              <el-button size="mini" type="text" on-click={ () => this.append(data) }>Append</el-button>
-              <el-button size="mini" type="text" on-click={ () => this.remove(node, data) }>Delete</el-button>
-            </span>
-          </span>);
-      },
-
-      filterNode(value, data) {
-        if (!value) return true;
-        return data.label.indexOf(value) !== -1;
-      }
-    },
-
-    data() {
-      return {
-        data,
-        data2,
-        data3,
-        data4: JSON.parse(JSON.stringify(data2)),
-        data5: JSON.parse(JSON.stringify(data2)),
-        data6,
-        regions,
-        defaultProps,
-        props,
-        props1,
-        defaultCheckedKeys: [5],
-        defaultExpandedKeys: [2, 3],
-        filterText: ''
-      };
-    }
-  };
-</script>
-
 ## Tree
 
 Muestra un conjunto de datos jerárquicos.
@@ -512,13 +133,13 @@ Usado para la selección de nodos.
 ```
 :::
 
-### Nodos hoja en modo perezoso
+### Nodos hoja en modo perezoso (lazy load)
 
 :::demo Los datos de un nodo no son cargados hasta que no es pinchado, así que el árbol no puede predecir si es una hoja. Por eso a cada nodo se le añade el botón de desplegar, y si el nodo es una hoja el botón desaparecerá al pinchar en él. También puede decirle al árbol que el nodo es una hoja de antemano, y así evita que muestre el botón de desplegar.
 ```html
 <el-tree
-  :props="props1"
-  :load="loadNode1"
+  :props="props"
+  :load="loadNode"
   lazy
   show-checkbox>
 </el-tree>
@@ -527,7 +148,7 @@ Usado para la selección de nodos.
   export default {
     data() {
       return {
-        props1: {
+        props: {
           label: 'name',
           children: 'zones',
           isLeaf: 'leaf'
@@ -535,7 +156,7 @@ Usado para la selección de nodos.
       };
     },
     methods: {
-      loadNode1(node, resolve) {
+      loadNode(node, resolve) {
         if (node.level === 0) {
           return resolve([{ name: 'region' }]);
         }
@@ -562,10 +183,10 @@ Usado para la selección de nodos.
 
 El checkbox de un nodo se puede poner como desactivado.
 
-:::demo En el ejemplo, la propiedad 'disabled' se declara en defaultProps, y algunos nodos se ponen como 'disabled:true'. Los checkboxes correspondientes son desactivados y no se pueden pinchar.
+:::demo En el ejemplo, la propiedad `disabled` se declara en `defaultProps`, y algunos nodos se ponen como `disabled:true`. Los checkboxes correspondientes son desactivados y no se pueden pinchar.
 ```html
 <el-tree
-  :data="data3"
+  :data="data"
   :props="defaultProps"
   show-checkbox
   @check-change="handleCheckChange">
@@ -575,7 +196,7 @@ El checkbox de un nodo se puede poner como desactivado.
   export default {
     data() {
       return {
-        data3: [{
+        data: [{
           id: 1,
           label: 'Level one 1',
           children: [{
@@ -621,7 +242,7 @@ Los nodos pueden estar desplegados o seleccionados por defecto.
 :::demo Utilice `default-expanded-keys` y `default-checked-keys` para establecer los nodos desplegados y seleccionados respectivamente. Tenga en cuenta que para que funcione es necesario que tengan `node-key`. Su valor es el nombre de una clave en el objeto data, y el valor de la clave debe ser único en todo el árbol.
 ```html
 <el-tree
-  :data="data2"
+  :data="data"
   show-checkbox
   node-key="id"
   :default-expanded-keys="[2, 3]"
@@ -633,7 +254,7 @@ Los nodos pueden estar desplegados o seleccionados por defecto.
   export default {
     data() {
       return {
-        data2: [{
+        data: [{
           id: 1,
           label: 'Level one 1',
           children: [{
@@ -684,7 +305,7 @@ Los nodos pueden estar desplegados o seleccionados por defecto.
 :::demo Este ejemplo muestra como establecer y leer nodos seleccionados. Esto se puede hacer por nodos o por claves. Si lo hace por claves el atributo `node-key` es necesario.
 ```html
 <el-tree
-  :data="data2"
+  :data="data"
   show-checkbox
   default-expand-all
   node-key="id"
@@ -729,7 +350,7 @@ Los nodos pueden estar desplegados o seleccionados por defecto.
 
     data() {
       return {
-        data2: [{
+        data: [{
           id: 1,
           label: 'Level one 1',
           children: [{
@@ -778,13 +399,13 @@ Los nodos pueden estar desplegados o seleccionados por defecto.
 ### Contenido personalizado en los nodos
 El contenido de los nodos puede ser personalizado, así que puede añadir iconos y botones a su gusto.
 
-:::demo Hay dos maneras de personalizar la plantilla para los nodos de árbol: `render-content` y scoped slot. Utilice `render-content` para asignar una función de renderizado que devuelve el contenido del árbol de nodos. Mire la documentación de node para una introducción detallada a las funciondes de renderizado. Si prefiere scoped slot, tendrá acceso a los `nodos` y `datos` en el ámbito de aplicación, representando el objeto TreeNode y los datos del nodo actual respectivamente. Tenga en cuenta que este ejemplo no puede ejecutarse en jsfiddle ya que no soporta la sintaxis JSX. En un proyecto real `render-content` funcionará si las dependencias relevantes están configuradas correctamente.
+:::demo Hay dos maneras de personalizar la plantilla para los nodos de árbol: `render-content` y scoped slot. Utilice `render-content` para asignar una función de renderizado que devuelve el contenido del árbol de nodos. Mire la documentación de node para una introducción detallada a las funciones de renderizado. Si prefiere scoped slot, tendrá acceso a los `nodos` y `datos` en el ámbito de aplicación, representando el objeto TreeNode y los datos del nodo actual respectivamente. Tenga en cuenta que este ejemplo no puede ejecutarse en codepen.io ya que no soporta la sintaxis JSX. En un proyecto real `render-content` funcionará si las dependencias relevantes están configuradas correctamente.
 ```html
 <div class="custom-tree-container">
   <div class="block">
     <p>Using render-content</p>
     <el-tree
-      :data="data4"
+      :data="data"
       show-checkbox
       node-key="id"
       default-expand-all
@@ -795,7 +416,7 @@ El contenido de los nodos puede ser personalizado, así que puede añadir iconos
   <div class="block">
     <p>Using scoped slot</p>
     <el-tree
-      :data="data5"
+      :data="data"
       show-checkbox
       node-key="id"
       default-expand-all
@@ -862,8 +483,8 @@ El contenido de los nodos puede ser personalizado, así que puede añadir iconos
         }]
       }];
       return {
-        data4: JSON.parse(JSON.stringify(data)),
-        data5: JSON.parse(JSON.stringify(data))
+        data: JSON.parse(JSON.stringify(data)),
+        data: JSON.parse(JSON.stringify(data))
       }
     },
 
@@ -913,7 +534,7 @@ El contenido de los nodos puede ser personalizado, así que puede añadir iconos
 ### Filtrado de nodos
 Los nodos del árbol se pueden filtrar.
 
-:::demo Invoque el método `filter` de la instancia de Tree para filtrar los nodos. Su parametro es la palabra de filtrado. Tenga en cuenta que para que funcione es necesario `filter-node-method`, y su valor el método de filtrado.
+:::demo Invoque el método `filter` de la instancia de Tree para filtrar los nodos. Su parámetro es la palabra de filtrado. Tenga en cuenta que para que funcione es necesario `filter-node-method`, y su valor el método de filtrado.
 ```html
 <el-input
   placeholder="Filter keyword"
@@ -922,18 +543,18 @@ Los nodos del árbol se pueden filtrar.
 
 <el-tree
   class="filter-tree"
-  :data="data2"
+  :data="data"
   :props="defaultProps"
   default-expand-all
   :filter-node-method="filterNode"
-  ref="tree2">
+  ref="tree">
 </el-tree>
 
 <script>
   export default {
     watch: {
       filterText(val) {
-        this.$refs.tree2.filter(val);
+        this.$refs.tree.filter(val);
       }
     },
 
@@ -947,7 +568,7 @@ Los nodos del árbol se pueden filtrar.
     data() {
       return {
         filterText: '',
-        data2: [{
+        data: [{
           id: 1,
           label: 'Level one 1',
           children: [{
@@ -1068,7 +689,7 @@ Puede arrastrar y soltar nodos de Tree añadiendo un atributo `draggable` .
 :::demo
 ```html
 <el-tree
-  :data="data6"
+  :data="data"
   node-key="id"
   default-expand-all
   @node-drag-start="handleDragStart"
@@ -1086,7 +707,7 @@ Puede arrastrar y soltar nodos de Tree añadiendo un atributo `draggable` .
   export default {
     data() {
       return {
-        data6: [{
+        data: [{
           label: 'Level one 1',
           children: [{
             label: 'Level two 1-1',
@@ -1179,15 +800,15 @@ Puede arrastrar y soltar nodos de Tree añadiendo un atributo `draggable` .
 | auto-expand-parent    | Expandir un nodo padre si el hijo está seleccionado | boolean                           | —                 | true        |
 | default-expanded-keys | Array de claves de los nodos expandidos inicialmente | array                             | —                 | —           |
 | show-checkbox         | Si un nodo es seleccionable              | boolean                           | —                 | false       |
-| check-strictly        | El estado de seleccion de un nodo no afecta a sus padres o hijos, cuando `show-checkbox` es `true` | boolean                           | —                 | false       |
+| check-strictly        | El estado de selección de un nodo no afecta a sus padres o hijos, cuando `show-checkbox` es `true` | boolean                           | —                 | false       |
 | default-checked-keys  | Array con claves de los nodos seleccionados inicialmente | array                             | —                 | —           |
-| current-node-key      | key of initially selected node | string, number                       | —               | —       |
-| filter-node-method    | Esta función se ejecutará en cada nodo cuando se use el método filtrtar, si devuelve `false` el nodo se oculta | Function(value, data, node)       | —                 | —           |
+| current-node-key      | la clave del nodo inicialmente seleccionado | string, number                       | —               | —       |
+| filter-node-method    | Esta función se ejecutará en cada nodo cuando se use el método filtrar, si devuelve `false` el nodo se oculta | Function(value, data, node)       | —                 | —           |
 | accordion             | Si solo un nodo de cada nivel puede expandirse a la vez | boolean                           | —                 | false       |
 | indent                | Indentación horizontal de los nodos en niveles adyacentes, en pixeles | number                            | —                 | 16          |
 | icon-class            | Icono del nodo del árbol de cliente                                                | string                            | -                 | -           |
 | lazy                  | si se trata de un nodo de hoja lazy load, utilizado con el atributo `load`  | boolean                     | —    | false |
-| draggable             | si se habilita la función de drag and drop en los nodos | boolean            | —    | false |
+| draggable             | si se habilita la función de drag & drop en los nodos | boolean            | —    | false |
 | allow-drag            | esta función se ejecutará antes de arrastrar un nodo. si devuelve `false`, el nodo no puede ser arrastrado. | Function(nodo) | —  | —  |
 | allow-drop            | esta función se ejecutará al arrastrar y soltar un nodo. si devuelve false, el nodo arrastrando no se puede soltar en el nodo destino. `type` tiene tres valores posibles: 'prev' (insertar el nodo de arrastre antes del nodo de destino), 'inner' (insertar el nodo de arrastre en el nodo de destino) y 'next' (insertar el nodo de arrastre después del nodo de destino) | Function(Nodoquesearrastra, Nododestino, type) | —    | —     |
 
@@ -1200,6 +821,7 @@ Puede arrastrar y soltar nodos de Tree añadiendo un atributo `draggable` .
 
 ### Métodos
 `Tree` tiene los siguientes métodos, que devuelven el array de nodos seleccionados.
+
 | Método            | Descripción                              | Parámetros                               |
 | ----------------- | ---------------------------------------- | ---------------------------------------- |
 | filter            | Filtra los nodos del árbol, los nodos filtrados estarán ocultos | Acepta un parámetro que será usado como primer parámetro para filter-node-method |
@@ -1212,8 +834,8 @@ Puede arrastrar y soltar nodos de Tree añadiendo un atributo `draggable` .
 | getHalfCheckedNodes | Si el nodo puede ser seleccionado (`show-checkbox` es `true`), devuelve la mitad del array de nodos actualmente seleccionada. | - |
 | getHalfCheckedKeys | Si el nodo puede ser seleccionado (`show-checkbox` es `true`), devuelve la mitad del array de claves del nodo actualmente seleccionado. | - |
 | getCurrentKey     | devuelve la clave del nodo resaltado actualmente (null si no hay ninguno) | —                                        |
-| getCurrentNode    | devuelve el nodo resaltado (null si no hay ninguno) | —                                        |
-| setCurrentKey     | establece el nodo resaltado por la clave, solo funciona si `node-key` está asignado | (key) la clave del nodo a ser resaltado. If `null`, cancel the currently highlighted node  |
+| getCurrentNode    | devuelve los datos del nodo de resaltado (nulo si no hay ningún nodo resaltado) | —                                        |
+| setCurrentKey     | establece el nodo resaltado por la clave, solo funciona si `node-key` está asignado | (key) la clave del nodo a ser resaltado. Si es `null`, cancela los nodos actualmente resaltados |
 | setCurrentNode    | establece el nodo resaltado, solo funciona si `node-key` está asignado | (node) nodo a ser resaltado              |
 | getNode         | devuelve el nodo por el dato o la clave | (data) los datos o clave del nodo |
 | remove          | elimina un nodo, solo funciona si `node-key` está asignado  | (data) los datos del nodo o nodo a borrar |
@@ -1225,20 +847,20 @@ Puede arrastrar y soltar nodos de Tree añadiendo un atributo `draggable` .
 | Nombre del evento | Descripción                              | Parámetros                               |
 | ----------------- | ---------------------------------------- | ---------------------------------------- |
 | node-click        | se lanza cuando un nodo es pinchado      | tres parámetros: el objeto del nodo seleccionado, propiedad `node` de TreeNode y el TreeNode en si |
-| node-contextmenu     | se lanza cuando en un nodo se hace click con el boton derecho | cuatro parámetros: evento, el objeto nodo sobre el que se hizo click, la propiedad `node`  del TreeNode, el TreeNode en si mismo |
+| node-contextmenu     | se lanza cuando en un nodo se hace clic con el botón derecho | cuatro parámetros: evento, el objeto nodo sobre el que se hizo clic, la propiedad `node`  del TreeNode, el TreeNode en si mismo |
 | check-change      | se lanza cuando el estado de selección del nodo cambia | tres parámetros: objeto nodo que se corresponde con el que ha cambiado, booleano que dice si esta seleccionado, booleano que dice si el nodo tiene hijos seleccionados |
-| check   | se activa al hacer clic en la casilla de selección de un nodo | dos parámetros: objeto de nodo correspondiente al nodo que se marca/desmarca, objeto de status de árbol verificado que tiene cuatro puntales: checkedNodes, checkedKeys, halfCheckedNodes, halfCheckedKeys |
+| check   | se activa al hacer clic en la casilla de selección de un nodo | dos parámetros: objeto de nodo correspondiente al nodo que se marca/desmarca, objeto de estatus de árbol verificado que tiene cuatro puntales: checkedNodes, checkedKeys, halfCheckedNodes, halfCheckedKeys |
 | current-change    | cambia cuando el nodo actual cambia      | dos parámetros: objeto nodo que se corresponde al nodo actual y propiedad `node` del TreeNode |
 | node-expand       | se lanza cuando el nodo actual se abre   | tres parámetros: el objeto del nodo abierto, propiedad `node` de TreeNode y el TreeNode en si |
 | node-collapse     | se lanza cuando el nodo actual se cierra | tres parámetros: el objeto del nodo cerrado, propiedad `node` de TreeNode y el TreeNode en si |
-| node-drag-start | se activa cuando se inicia el arrastre | dos parametros: el objeto del nodo que se arrastrara, evento. |
-| node-drag-enter | se desencadena cuando el nodo de arrastre entra en otro nodo | tres parametros: objeto del nodo que se arrastra, objeto del nodo en el que entra, evento. |
-| node-drag-leave | se desencadena cuando el nodo de arrastre sale de un nodo | tres parametros: objeto del nodo que se arrastra, objeto del nodo del cual se sale, evento. |
-| node-drag-over | se activa cuando se arrastra sobre un nodo (como el evento mouseover) | tres parametros: objeto del nodo que se arrastra, objeto del nodo sobre el que esta el arrastre, evento. |
-| node-drag-end  | se activa cuando se termina de arrastrar | cuatro parametros: objeto del nodo que se arrastra, objeto del nodo que corresponde al final del arrastre (puede ser `undefined` ), tipo de integracion (antes (before), despues (after), dentro (inner) ), evento. |
-| node-drop  | después de soltar el nodo de arrastre | cuatro parametros: objeto del nodo que se esta arrastrando, objeto del nodo sobre el que se esta soltando, tipo de integracion (antes (before), despues (after), dentro (inner) ), evento. |
+| node-drag-start | se activa cuando se inicia el arrastre | dos parámetros: el objeto del nodo que se arrastrara, evento. |
+| node-drag-enter | se desencadena cuando el nodo de arrastre entra en otro nodo | tres parámetros: objeto del nodo que se arrastra, objeto del nodo en el que entra, evento. |
+| node-drag-leave | se desencadena cuando el nodo de arrastre sale de un nodo | tres parámetros: objeto del nodo que se arrastra, objeto del nodo del cual se sale, evento. |
+| node-drag-over | se activa cuando se arrastra sobre un nodo (como el evento mouseover) | tres parámetros: objeto del nodo que se arrastra, objeto del nodo sobre el que esta el arrastre, evento. |
+| node-drag-end  | se activa cuando se termina de arrastrar | cuatro parámetros: objeto del nodo que se arrastra, objeto del nodo que corresponde al final del arrastre (puede ser `undefined` ), tipo de integración (antes (before), después (after), dentro (inner) ), evento. |
+| node-drop  | después de soltar el nodo de arrastre | cuatro parámetros: objeto del nodo que se esta arrastrando, objeto del nodo sobre el que se esta soltando, tipo de integración (antes (before), después (after), dentro (inner) ), evento. |
 
 ### Scoped Slot
-| Name | Description |
+| Nombre | Descripción |
 |------|--------|
 | — | Contenido personalizado para nodos de tree. El parámetro del scope es { node, data }. |
diff --git a/examples/docs/es/typography.md b/examples/docs/es/typography.md
index 342de2f93a2..81097ca8ed3 100644
--- a/examples/docs/es/typography.md
+++ b/examples/docs/es/typography.md
@@ -1,151 +1,151 @@
-<style>
-  .demo-typo-box {
-    height: 200px;
-    width: 200px;
-    position: relative;
-    border: 1px solid #eaeefb;
-    font-size: 40px;
-    color: #1f2d3d;
-    text-align: center;
-    line-height: 162px;
-    padding-bottom: 36px;
-    box-sizing: border-box;
-    display: inline-block;
-    margin-right: 17px;
-    border-radius: 4px;
-    
-    .name {
-      position: absolute;
-      bottom: 0;
-      width: 100%;
-      height: 35px;
-      border-top: 1px solid #eaeefb;
-      font-size: 14px;
-      color: #8492a6;
-      line-height: 35px;
-      text-align: left;
-      text-indent: 10px;
-      font-family: 'Helvetica Neue';
-    }
+<script>
+  import bus from '../../bus';
+  import { ACTION_USER_CONFIG_UPDATE } from '../../components/theme/constant.js';
+  const varMap = [
+    '$--font-size-extra-large',
+    '$--font-size-large',
+    '$--font-size-medium',
+    '$--font-size-base',
+    '$--font-size-small',
+    '$--font-size-extra-small'
+  ];
+  const original = {
+    'font_size_extra_large': '20px',
+    'font_size_large': '18px',
+    'font_size_medium': '16px',
+    'font_size_base': '14px',
+    'font_size_small': '13px',
+    'font_size_extra_small': '12px'
   }
-  .demo-typo-size {
-    .h1 {
-      font-size: 20px;
-    }
-    .h2 {
-      font-size: 18px;
-    }
-    .h3 {
-      font-size: 16px;
-    }
-    .text-regular {
-      font-size: 14px;
-    }
-    .text-small {
-      font-size: 13px;
-    }
-    .text-smaller {
-      font-size: 12px;
-    }
-    .color-dark-light {
-      color: #99a9bf;
-    }
+  export default {
+    created() {
+      bus.$on(ACTION_USER_CONFIG_UPDATE, this.setGlobal);
+    },
+    mounted() {
+      this.setGlobal();
+    },
+    methods: {
+      tintColor(color, tint) {
+        return tintColor(color, tint);
+      },
+      setGlobal() {
+        if (window.userThemeConfig) {
+          this.global = window.userThemeConfig.global;
+        }
+      }
+    },
+    data() {
+      return {
+        global: {},
+        'font_size_extra_large': '',
+        'font_size_large': '',
+        'font_size_medium': '',
+        'font_size_base': '',
+        'font_size_small': '',
+        'font_size_extra_small': ''
+      }
+    },
+    watch: {
+      global: {
+        immediate: true,
+        handler(value) {
+          varMap.forEach((v) => {
+            const key = v.replace('$--', '').replace(/-/g, '_')
+            if (value[v]) {
+              this[key] = value[v]
+            } else {
+              this[key] = original[key]
+            }
+          });
+        }
+      }
+    },
   }
-  .typo-PingFang {
-    font-family: 'PingFang SC';
-  }
-  .typo-Hiragino {
-    font-family: 'Hiragino Sans GB';
-  }
-  .typo-Microsoft {
-    font-family: 'Microsoft YaHei';
-  }
-  /* 英文 */
-  .typo-Helvetica-Neue {
-    font-family: 'Helvetica Neue';
-  }
-  .typo-Helvetica {
-    font-family: 'Helvetica';
-  }
-  .typo-Arial {
-    font-family: 'Arial';
-  }
-</style>
+</script>
 
 ## Tipografía
 
 Creamos una convención de fuentes para asegurar la mejor presentación en diferentes plataformas.
 
-### Fuente en chino
-
-<div class="demo-typo-box typo-PingFang">
-  和畅惠风
-  <div class="name">PingFang SC</div>
-</div>
-<div class="demo-typo-box typo-Hiragino">
-  和畅惠风
-  <div class="name">Hiragino Sans GB</div>
+### Fuente
+<div class="demo-term-box">
+<img src="../../assets/images/term-pingfang.png" alt="">
+<img src="../../assets/images/term-hiragino.png" alt="">
+<img src="../../assets/images/term-microsoft.png" alt="">
+<img src="../../assets/images/term-sf.png" alt="">
+<img src="../../assets/images/term-helvetica.png" alt="">
+<img src="../../assets/images/term-arial.png" alt="">
 </div>
-<div class="demo-typo-box typo-Microsoft">
-  和畅惠风
-  <div class="name">Microsoft YaHei</div>
-</div>
-
-### Inglés / Fuente Numérica
-
-<div class="demo-typo-box typo-Helvetica-neue">
-  RGag
-  <div class="name">Helvetica Neue</div>
-</div>
-<div class="demo-typo-box typo-Helvetica">
-  RGag
-  <div class="name">Helvetica</div>
-</div>
-<div class="demo-typo-box typo-Arial">
-  RGag
-  <div class="name">Arial</div>
-</div>
-
-### Font-family
-
-```css
-font-family: "Helvetica Neue",Helvetica,"PingFang SC","Hiragino Sans GB","Microsoft YaHei","微软雅黑",Arial,sans-serif;
-```
 
 ### Convención de fuentes
 
 <table class="demo-typo-size">
   <tbody>
-    <tr>
-      <td class="h1">Main Title</td>
-      <td class="h1">Build with Element</td>
-      <td class="color-dark-light">20px  Extra large</td>
+  <tr
+    >
+      <td>Level</td>
+      <td>Font Size</td>
+      <td class="color-dark-light">Demo</td>
+    </tr>
+    <tr
+    :style="{ fontSize: font_size_extra_small }"
+    >
+      <td>Supplementary text</td>
+      <td class="color-dark-light">{{font_size_extra_small}} Extra Small</td>
+      <td>Build with Element</td>
     </tr>
-    <tr>
-      <td class="h2">Title</td>
-      <td class="h2">Build with Element</td>
-      <td class="color-dark-light">18px large</td>
+    <tr
+    :style="{ fontSize: font_size_small }"
+    >
+      <td>Body (small)</td>
+      <td class="color-dark-light">{{font_size_small}} Small</td>
+      <td>Build with Element</td>
     </tr>
-    <tr>
-      <td class="h3">Small Title</td>
-      <td class="h3">Build with Element</td>
-      <td class="color-dark-light">16px Medium</td>
+    <tr
+    :style="{ fontSize: font_size_base }"
+    >
+      <td>Body</td>
+      <td class="color-dark-light">{{font_size_base}} Base</td>
+      <td>Build with Element</td>
     </tr>
-    <tr>
-      <td class="text-regular">Body</td>
-      <td class="text-regular">Build with Element</td>
-      <td class="color-dark-light">14px Small</td>
+    <tr
+    :style="{ fontSize: font_size_medium }"
+    >
+      <td >Small Title</td>
+      <td class="color-dark-light">{{font_size_medium}} Medium</td>
+      <td>Build with Element</td>
     </tr>
-    <tr>
-      <td class="text-small">Body (small)</td>
-      <td class="text-small">Build with Element</td>
-      <td class="color-dark-light">13px Extra Small</td>
+    <tr
+    :style="{ fontSize: font_size_large }"
+    >
+      <td>Title</td>
+      <td class="color-dark-light">{{font_size_large}} large</td>
+      <td>Build with Element</td>
     </tr>
-    <tr>
-      <td class="text-smaller">Supplementary text</td>
-      <td class="text-smaller">Build with Element</td>
-      <td class="color-dark-light">12px Extra Extra Small</td>
+    <tr
+    :style="{ fontSize: font_size_extra_large }"
+    >
+      <td>Main Title</td>
+      <td class="color-dark-light">{{font_size_extra_large}} Extra large</td>
+      <td>Build with Element</td>
     </tr>
   </tbody>
 </table>
 
+### Font Line Height
+
+<div>
+<img class="lineH-left" src="~examples/assets/images/typography.png" />
+<ul class="lineH-right">
+<li>line-height:1 <span>No line height</span></li>
+<li>line-height:1.3 <span>Compact</span></li>
+<li>line-height:1.5 <span>Regular</span></li>
+<li>line-height:1.7 <span>Loose</span></li>
+</ul>
+</div>
+
+### Font-family
+
+```css
+font-family: "Helvetica Neue",Helvetica,"PingFang SC","Hiragino Sans GB","Microsoft YaHei","微软雅黑",Arial,sans-serif;
+```
diff --git a/examples/docs/es/upload.md b/examples/docs/es/upload.md
index d6adcb7bd95..454aa4fc7cd 100644
--- a/examples/docs/es/upload.md
+++ b/examples/docs/es/upload.md
@@ -1,119 +1,3 @@
-<style>
-  .upload-tip {
-    color: #8492a6;
-    font-size: 12px;
-    margin-top: 7px;
-  }
-  .demo-box {
-    margin-bottom: 24px;
-
-    .upload-demo {
-      width: 360px;
-    }
-    .avatar-uploader {
-      .el-upload {
-        border: 1px dashed #d9d9d9;
-        border-radius: 6px;
-        cursor: pointer;
-        position: relative;
-        overflow: hidden;
-    
-        &:hover, &:focus {
-          border-color: #409EFF;
-        }
-      }
-      .avatar-uploader-icon {
-        font-size: 28px;
-        color: #8c939d;
-        width: 178px;
-        height: @width;
-        line-height: @height;
-        text-align: center;
-      }
-      .avatar {
-        width: 178px;
-        height: @width;
-        display: block;
-      }
-    }
-  }
-</style>
-
-<script>
-  export default {
-    data() {
-      return {
-        fileList: [{
-          name: 'food.jpeg',
-          url: 'https://fuss10.elemecdn.com/3/63/4e7f3a15429bfda99bce42a18cdd1jpeg.jpeg?imageMogr2/thumbnail/360x360/format/webp/quality/100'
-        }, {
-          name: 'food2.jpeg',
-          url: 'https://fuss10.elemecdn.com/3/63/4e7f3a15429bfda99bce42a18cdd1jpeg.jpeg?imageMogr2/thumbnail/360x360/format/webp/quality/100'
-        }],
-        fileList2: [{
-          name: 'food.jpeg',
-          url: 'https://fuss10.elemecdn.com/3/63/4e7f3a15429bfda99bce42a18cdd1jpeg.jpeg?imageMogr2/thumbnail/360x360/format/webp/quality/100'
-        }, {
-          name: 'food2.jpeg',
-          url: 'https://fuss10.elemecdn.com/3/63/4e7f3a15429bfda99bce42a18cdd1jpeg.jpeg?imageMogr2/thumbnail/360x360/format/webp/quality/100'
-        }],
-        fileList3: [{
-          name: 'food.jpeg',
-          url: 'https://fuss10.elemecdn.com/3/63/4e7f3a15429bfda99bce42a18cdd1jpeg.jpeg?imageMogr2/thumbnail/360x360/format/webp/quality/100'
-        }, {
-          name: 'food2.jpeg',
-          url: 'https://fuss10.elemecdn.com/3/63/4e7f3a15429bfda99bce42a18cdd1jpeg.jpeg?imageMogr2/thumbnail/360x360/format/webp/quality/100'
-        }],
-        imageUrl: '',
-        dialogImageUrl: '',
-        dialogVisible: false
-      };
-    },
-    methods: {
-      handleRemove(file, fileList) {
-        console.log(file, fileList);
-      },
-      beforeUpload(file) {
-        if (file.size > 40000000) {
-          console.warn(file.name + ' is too large!');
-          return false;
-        }
-        return true;
-      },
-      handlePreview(file) {
-        console.log(file);
-      },
-      handlePictureCardPreview(file) {
-        this.dialogImageUrl = file.url;
-        this.dialogVisible = true;
-      },
-      submitUpload() {
-        this.$refs.upload.submit();
-      },
-      handleAvatarSuccess(res, file) {
-        this.imageUrl = URL.createObjectURL(file.raw);
-      },
-      beforeAvatarUpload(file) {
-        const isJPG = file.type === 'image/jpeg';
-        const isLt2M = file.size / 1024 / 1024 < 2;
-
-        if (!isJPG) {
-          this.$message.error('Avatar picture must be JPG format!');
-        }
-        if (!isLt2M) {
-          this.$message.error('Avatar picture size can not exceed 2MB!');
-        }
-        return isJPG && isLt2M;
-      },
-      handleChange(file, fileList) {
-        this.fileList3 = fileList.slice(-3);
-      },
-      handleExceed(files, fileList) {
-        this.$message.warning(`You can upload up to 3 files. You selected ${files.length} files this time, and ${files.length + fileList.length} files totally`);
-      }
-    }
-  }
-</script>
 ## Carga de archivos
 
 Carga archivos haciendo clic o arrastrándolos.
@@ -182,7 +66,7 @@ Utilice el _hook_ `before-upload` para limitar el formato de archivo y su tamañ
     overflow: hidden;
   }
   .avatar-uploader .el-upload:hover {
-    border-color: #409EFF;
+    border-color: #2460e0;
   }
   .avatar-uploader-icon {
     font-size: 28px;
@@ -266,6 +150,75 @@ Utilice la propiedad `list-type` para cambiar el estilo a un listado de archivos
 ```
 :::
 
+### Custom file thumbnail
+
+Use `scoped-slot` to change default thumbnail template.
+
+:::demo
+```html
+<el-upload
+  action="#"
+  list-type="picture-card"
+  :auto-upload="false">
+    <i slot="default" class="el-icon-plus"></i>
+    <div slot="file" slot-scope="{file}">
+      <img
+        class="el-upload-list__item-thumbnail"
+        :src="file.url" alt=""
+      >
+      <span class="el-upload-list__item-actions">
+        <span
+          class="el-upload-list__item-preview"
+          @click="handlePictureCardPreview(file)"
+        >
+          <i class="el-icon-zoom-in"></i>
+        </span>
+        <span
+          v-if="!disabled"
+          class="el-upload-list__item-delete"
+          @click="handleDownload(file)"
+        >
+          <i class="el-icon-download"></i>
+        </span>
+        <span
+          v-if="!disabled"
+          class="el-upload-list__item-delete"
+          @click="handleRemove(file)"
+        >
+          <i class="el-icon-delete"></i>
+        </span>
+      </span>
+    </div>
+</el-upload>
+<el-dialog :visible.sync="dialogVisible">
+  <img width="100%" :src="dialogImageUrl" alt="">
+</el-dialog>
+<script>
+  export default {
+    data() {
+      return {
+        dialogImageUrl: '',
+        dialogVisible: false,
+        disabled: false
+      };
+    },
+    methods: {
+      handleRemove(file) {
+        console.log(file);
+      },
+      handlePictureCardPreview(file) {
+        this.dialogImageUrl = file.url;
+        this.dialogVisible = true;
+      },
+      handleDownload(file) {
+        console.log(file);
+      }
+    }
+  }
+</script>
+```
+:::
+
 ### Lista de archivos con miniatura
 
 :::demo
@@ -275,7 +228,7 @@ Utilice la propiedad `list-type` para cambiar el estilo a un listado de archivos
   action="https://jsonplaceholder.typicode.com/posts/"
   :on-preview="handlePreview"
   :on-remove="handleRemove"
-  :file-list="fileList2"
+  :file-list="fileList"
   list-type="picture">
   <el-button size="small" type="primary">Clic para subir archivo</el-button>
   <div slot="tip" class="el-upload__tip">Solo archivos jpg/png con un tamaño menor de 500kb</div>
@@ -284,7 +237,7 @@ Utilice la propiedad `list-type` para cambiar el estilo a un listado de archivos
   export default {
     data() {
       return {
-        fileList2: [{name: 'food.jpeg', url: 'https://fuss10.elemecdn.com/3/63/4e7f3a15429bfda99bce42a18cdd1jpeg.jpeg?imageMogr2/thumbnail/360x360/format/webp/quality/100'}, {name: 'food2.jpeg', url: 'https://fuss10.elemecdn.com/3/63/4e7f3a15429bfda99bce42a18cdd1jpeg.jpeg?imageMogr2/thumbnail/360x360/format/webp/quality/100'}]
+        fileList: [{name: 'food.jpeg', url: 'https://fuss10.elemecdn.com/3/63/4e7f3a15429bfda99bce42a18cdd1jpeg.jpeg?imageMogr2/thumbnail/360x360/format/webp/quality/100'}, {name: 'food2.jpeg', url: 'https://fuss10.elemecdn.com/3/63/4e7f3a15429bfda99bce42a18cdd1jpeg.jpeg?imageMogr2/thumbnail/360x360/format/webp/quality/100'}]
       };
     },
     methods: {
@@ -310,7 +263,7 @@ Utilice el _hook_ `on-change` para controlar la funcionalidad de la lista de arc
   class="upload-demo"
   action="https://jsonplaceholder.typicode.com/posts/"
   :on-change="handleChange"
-  :file-list="fileList3">
+  :file-list="fileList">
   <el-button size="small" type="primary">Clic para subir archivo</el-button>
   <div slot="tip" class="el-upload__tip">Solo archivos jpg/png con un tamaño menor de 500kb</div>
 </el-upload>
@@ -318,7 +271,7 @@ Utilice el _hook_ `on-change` para controlar la funcionalidad de la lista de arc
   export default {
     data() {
       return {
-        fileList3: [{
+        fileList: [{
           name: 'food.jpeg',
           url: 'https://fuss10.elemecdn.com/3/63/4e7f3a15429bfda99bce42a18cdd1jpeg.jpeg?imageMogr2/thumbnail/360x360/format/webp/quality/100'
         }, {
@@ -329,7 +282,7 @@ Utilice el _hook_ `on-change` para controlar la funcionalidad de la lista de arc
     },
     methods: {
       handleChange(file, fileList) {
-        this.fileList3 = fileList.slice(-3);
+        this.fileList = fileList.slice(-3);
       }
     }
   }
@@ -384,33 +337,33 @@ Puede arrastrar el archivo dentro de un área en especifico para cargar el archi
 :::
 
 ### Atributos
-| Atributo         | Descripción                              | Tipo                               | Valores aceptados         | Por defecto |
-| ---------------- | ---------------------------------------- | ---------------------------------- | ------------------------- | ----------- |
-| action           | obligatorio, URL de la petición          | string                             | —                         | —           |
-| headers          | cabeceras de la petición                 | object                             | —                         | —           |
-| multiple         | especifica si se permite subir múltiples archivos | boolean                            | —                         | —           |
-| data             | opciones adicionales de la petición      | object                             | —                         | —           |
-| name             | nombre clave del archivo                 | string                             | —                         | file        |
-| with-credentials | especifica si enviará cookies            | boolean                            | —                         | false       |
-| show-file-list   | especifica si se debe mostrar la lista de archivos cargados | boolean                            | —                         | true        |
-| drag             | se especifica si se activará el modo arrastrar y soltar | boolean                            | —                         | false       |
+| Atributo         | Descripción                                                  | Tipo                               | Valores aceptados         | Por defecto |
+| ---------------- | ------------------------------------------------------------ | ---------------------------------- | ------------------------- | ----------- |
+| action           | obligatorio, URL de la petición                              | string                             | —                         | —           |
+| headers          | cabeceras de la petición                                     | object                             | —                         | —           |
+| multiple         | especifica si se permite subir múltiples archivos            | boolean                            | —                         | —           |
+| data             | opciones adicionales de la petición                          | object                             | —                         | —           |
+| name             | nombre clave del archivo                                     | string                             | —                         | file        |
+| with-credentials | especifica si enviará cookies                                | boolean                            | —                         | false       |
+| show-file-list   | especifica si se debe mostrar la lista de archivos cargados  | boolean                            | —                         | true        |
+| drag             | se especifica si se activará el modo arrastrar y soltar      | boolean                            | —                         | false       |
 | accept           | acepta [tipos de archivos](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input#attr-accept), puede no funcionar cuando `thumbnail-mode` esta en `true` | string                             | —                         | —           |
-| on-preview       | _hook_ lanzado al hacer clic en los archivos subidos | function(file)                     | —                         | —           |
-| on-remove        | _hook_ lanzado cuando los archivos son eliminados | function(file, fileList)           | —                         | —           |
+| on-preview       | _hook_ lanzado al hacer clic en los archivos subidos         | function(file)                     | —                         | —           |
+| on-remove        | _hook_ lanzado cuando los archivos son eliminados            | function(file, fileList)           | —                         | —           |
 | on-success       | _hook_ lanzado cuando los archivos fueron cargados correctamente | function(response, file, fileList) | —                         | —           |
-| on-error         | _hook_ lanzado cuando han ocurrido algunos errores | function(err, file, fileList)      | —                         | —           |
-| on-progress      | _hook_ lanzado cuando se produce algún progreso | function(event, file, fileList)    | —                         | —           |
+| on-error         | _hook_ lanzado cuando han ocurrido algunos errores           | function(err, file, fileList)      | —                         | —           |
+| on-progress      | _hook_ lanzado cuando se produce algún progreso              | function(event, file, fileList)    | —                         | —           |
 | on-change        | _hook_ lanzado cuando el archivo seleccionado se carga correctamente o falla | function(file, fileList)           | —                         | —           |
 | before-upload    | _hook_ lanzado antes de que el archivo sea cargado. Si este devuelve `true` o `Promise` entonces será rechazado, la carga puede ser cancelada | function(file)                     | —                         | —           |
-| before-remove    | _hook_ lanzado antes de eliminar un archivo. Los parametros son el archivo y la lista de archivos. Si se devuelve `false` o se devuelve una `Promise` y que luego es rechazada, la eliminación será abortada. | function(file, fileList)           | —                         | —           |
-| thumbnail-mode   | especifica si se mostrará la miniatura   | boolean                            | —                         | false       |
+| before-remove    | _hook_ lanzado antes de eliminar un archivo. Los parámetros son el archivo y la lista de archivos. Si se devuelve `false` o se devuelve una `Promise` y que luego es rechazada, la eliminación será abortada. | function(file, fileList)           | —                         | —           |
+| thumbnail-mode   | especifica si se mostrará la miniatura                       | boolean                            | —                         | false       |
 | file-list        | archivos cargados por defecto, por ejemplo,  [{name: 'food.jpg', url: 'https://xxx.cdn.com/xxx.jpg'}] | array                              | —                         | []          |
-| list-type        | tipo de lista de archivos                | string                             | text/picture/picture-card | text        |
-| auto-upload      | se especifica si se autocargan archivos  | boolean                            | —                         | true        |
-| http-request     | sobreescribe el comportamiento por defecto de xhr, permitiendo implementar tu propia petición de carga de archivos | function                           | —                         | —           |
-| disabled         | especifica si se deshabilita la carga de archivos | boolean                            | —                         | false       |
-| limit            | número máximo de cargas permitidas       | number                             | —                         | —           |
-| on-exceed        | _hook_ lanzado cuando el límite ha sido excedido | function(files, fileList)          | —                         | -           |
+| list-type        | tipo de lista de archivos                                    | string                             | text/picture/picture-card | text        |
+| auto-upload      | se especifica si se autocargan archivos                      | boolean                            | —                         | true        |
+| http-request     | sobrescribe el comportamiento por defecto de xhr, permitiendo implementar tu propia petición de carga de archivos | function                           | —                         | —           |
+| disabled         | especifica si se deshabilita la carga de archivos            | boolean                            | —                         | false       |
+| limit            | número máximo de cargas permitidas                           | number                             | —                         | —           |
+| on-exceed        | _hook_ lanzado cuando el límite ha sido excedido             | function(files, fileList)          | —                         | -           |
 
 ### Slot
 | Nombre       | Descripcion                              |
diff --git a/examples/docs/fr-FR/affix.md b/examples/docs/fr-FR/affix.md
new file mode 100644
index 00000000000..b0b148f0525
--- /dev/null
+++ b/examples/docs/fr-FR/affix.md
@@ -0,0 +1 @@
+## Affix
diff --git a/examples/docs/fr-FR/alert.md b/examples/docs/fr-FR/alert.md
new file mode 100644
index 00000000000..aab56d1a275
--- /dev/null
+++ b/examples/docs/fr-FR/alert.md
@@ -0,0 +1,242 @@
+## Alert
+
+Affiche des messages importants.
+
+### Usage
+
+Les Alertes sont des composants non superposés qui ne disparaissent pas automatiquement.
+
+:::demo Les Alertes peuvent être de 4 types différents, définit par `type`, le type par défaut étant `info`.
+
+```html
+<template>
+  <el-alert
+    title="succès"
+    type="success">
+  </el-alert>
+  <el-alert
+    title="information"
+    type="info">
+  </el-alert>
+  <el-alert
+    title="avertissement"
+    type="warning">
+  </el-alert>
+  <el-alert
+    title="erreur"
+    type="error">
+  </el-alert>
+</template>
+```
+:::
+
+### Thème
+
+Alert fournit deux thèmes différents, `light` et `dark`.
+
+:::demo Réglez `effect` pour changer le thème, le défaut étant `light`.
+```html
+<template>
+  <el-alert
+    title="succès"
+    type="success"
+    effect="dark">
+  </el-alert>
+  <el-alert
+    title="info"
+    type="info"
+    effect="dark">
+  </el-alert>
+  <el-alert
+    title="avertissement"
+    type="warning"
+    effect="dark">
+  </el-alert>
+  <el-alert
+    title="erreur"
+    type="error"
+    effect="dark">
+  </el-alert>
+</template>
+```
+:::
+
+### Bouton personnalisable
+
+Personnalisez le bouton de fermeture avec du texte ou des symboles.
+
+:::demo Les alertes peuvent être configurées pour être fermables ou non. Le bouton de fermeture et les callbacks sont aussi personnalisables. L'attribut `closable` détermine si le composant peut être fermé ou non. Il accepte un `boolean`, la valeur par défaut étant `true`. Vous pouvez configurer l'attribut `close-text`pour remplacer la croix du bouton de fermeture. Assurez-vous que `close-text` soit une chaîne de caractères. L'évènement `close` se déclenche quand le composant est fermé.
+
+```html
+<template>
+  <el-alert
+    title="alerte non fermable"
+    type="success"
+    :closable="false">
+  </el-alert>
+  <el-alert
+    title="texte de fermeture personnalisé"
+    type="info"
+    close-text="Gotcha">
+  </el-alert>
+  <el-alert
+    title="alerte avec callback"
+    type="warning"
+    @close="hello">
+  </el-alert>
+</template>
+
+<script>
+  export default {
+    methods: {
+      hello() {
+        alert('Hello World!');
+      }
+    }
+  }
+</script>
+```
+:::
+
+### Avec icône
+
+Afficher une icône améliore la lisibilité.
+
+:::demo Ajouter l'attribut `show-icon` affiche une icône correspondant au type de l'alerte.
+
+```html
+<template>
+  <el-alert
+    title="succès"
+    type="success"
+    show-icon>
+  </el-alert>
+  <el-alert
+    title="information"
+    type="info"
+    show-icon>
+  </el-alert>
+  <el-alert
+    title="avertissement"
+    type="warning"
+    show-icon>
+  </el-alert>
+  <el-alert
+    title="erreur"
+    type="error"
+    show-icon>
+  </el-alert>
+</template>
+```
+:::
+
+## Texte centré
+
+Utilisez l'attribut `center` pour centrer le texte.
+
+:::demo
+
+```html
+<template>
+  <el-alert
+    title="succès"
+    type="success"
+    center
+    show-icon>
+  </el-alert>
+  <el-alert
+    title="information"
+    type="info"
+    center
+    show-icon>
+  </el-alert>
+  <el-alert
+    title="avertissement"
+    type="warning"
+    center
+    show-icon>
+  </el-alert>
+  <el-alert
+    title="erreur"
+    type="error"
+    center
+    show-icon>
+  </el-alert>
+</template>
+```
+:::
+
+### Description
+
+Contient un message avec plus d'informations.
+
+:::demo A coté de l'attribut `title`, vous pouvez ajouter `description` pour décrire l'alerte avec plus de précisions. Les descriptions ne peuvent contenir que du texte, et les retours à la ligne sont automatiques.
+
+```html
+<template>
+  <el-alert
+    title="Titre"
+    type="success"
+    description="Ceci est la description.">
+  </el-alert>
+</template>
+```
+:::
+
+### Icône et description
+
+:::demo Pour finir, voici un exemple utilisant à la fois l'icône et la description.
+
+```html
+<template>
+  <el-alert
+    title="succès"
+    type="success"
+    description="Plus de texte pour décrire."
+    show-icon>
+  </el-alert>
+  <el-alert
+    title="information"
+    type="info"
+    description="Plus de texte pour décrire."
+    show-icon>
+  </el-alert>
+  <el-alert
+    title="avertissement"
+    type="warning"
+    description="Plus de texte pour décrire."
+    show-icon>
+  </el-alert>
+  <el-alert
+    title="erreur"
+    type="error"
+    description="Plus de texte pour décrire."
+    show-icon>
+  </el-alert>
+</template>
+```
+:::
+
+### Attributs
+| Attribut      | Description          | Type      | Valeurs acceptées       | Défaut  |
+|---------- |-------------- |---------- |--------------------------------  |-------- |
+| title     | Titre.         | string | — | — |
+| type | Type du composant. | string | success/warning/info/error | info |
+| description | Texte de description. Peut aussi être passé via le slot par défaut | string | — | — |
+| closable | Si peut être fermé ou non. | boolean | — | true |
+| center | Si le texte doit être centré ou non. | boolean | — | false |
+| close-text | Texte personnalisé pour le bouton de fermeture. | string | — | — |
+| show-icon | Si une icône s'affiche ou non. | boolean | — | false |
+| effect | Détermine le thème.  | string | light/dark | light |
+
+### Slot
+
+| Nom | Description |
+|------|--------|
+| — | la description |
+| title | Le contenu du titre. |
+
+### Évènements
+| Nom | Description | Paramètres |
+|---------- |-------- |---------- |
+| close | Se déclenche lorsque l'alerte est fermée. | — |
diff --git a/examples/docs/fr-FR/avatar.md b/examples/docs/fr-FR/avatar.md
new file mode 100644
index 00000000000..50078de482b
--- /dev/null
+++ b/examples/docs/fr-FR/avatar.md
@@ -0,0 +1,146 @@
+## Avatar avatar
+
+Avatars can be used to represent people or objects. It supports images, Icons, or characters.
+Les avatars peuvent être utilisés pour représenter des personnes ou des objets. Les images, icônes et les caractères sont supportés.
+
+### Basic
+
+utilisez les prop `shape` et` size` pour définir la forme et la taille de l'avatar
+
+:::demo
+```html
+<template>
+  <el-row class="demo-avatar demo-basic">
+    <el-col :span="12">
+      <div class="sub-title">cercle</div>
+      <div class="demo-basic--circle">
+        <div class="block"><el-avatar :size="50" :src="circleUrl"></el-avatar></div>
+        <div class="block" v-for="size in sizeList" :key="size">
+          <el-avatar :size="size" :src="circleUrl"></el-avatar>
+        </div>
+      </div>
+    </el-col>  
+    <el-col :span="12">
+      <div class="sub-title">carré</div>
+      <div class="demo-basic--circle">
+        <div class="block"><el-avatar shape="square" :size="50" :src="squareUrl"></el-avatar></div>
+        <div class="block" v-for="size in sizeList" :key="size">
+          <el-avatar shape="square" :size="size" :src="squareUrl"></el-avatar>
+        </div>
+      </div>
+    </el-col>
+  </el-row>
+</template>
+<script>
+  export default {
+    data () {
+      return {
+        circleUrl: "https://cube.elemecdn.com/3/7c/3ea6beec64369c2642b92c6726f1epng.png",
+        squareUrl: "https://cube.elemecdn.com/9/c2/f0ee8a3c7c9638a54940382568c9dpng.png",
+        sizeList: ["large", "medium", "small"]
+      }
+    }
+  }
+</script>
+
+```
+:::
+
+### Types
+
+Les images, icônes et les caractères sont supportés.
+
+:::demo
+```html
+<template>
+  <div class="demo-type">
+    <div>
+      <el-avatar icon="el-icon-user-solid"></el-avatar>
+    </div>
+    <div>
+      <el-avatar src="https://cube.elemecdn.com/0/88/03b0d39583f48206768a7534e55bcpng.png"></el-avatar>
+    </div>
+    <div>
+      <el-avatar> user </el-avatar>
+    </div>
+  </div>
+</template>
+```
+:::
+
+### fallback en cas d'erreur de chargement d'image
+
+fallback en cas d'erreur de chargement d'image
+
+:::demo
+```html
+<template>
+  <div class="demo-type">
+    <el-avatar :size="60" src="https://empty" @error="errorHandler">
+      <img src="https://cube.elemecdn.com/e/fd/0fc7d20532fdaf769a25683617711png.png"/>
+      </el-avatar>
+  </div>
+</template>
+<script>
+  export default {
+    methods: {
+      errorHandler() {
+        return true
+      }
+    }
+  }
+</script>
+
+```
+:::
+
+### Comment l'image s'adapte à son conteneur
+
+Défini comment l'image s'adapte à son conteneur, pareil que [object-fit](https://developer.mozilla.org/en-US/docs/Web/CSS/object-fit).
+
+:::demo
+```html
+<template>
+  <div class="demo-fit">
+    <div class="block" v-for="fit in fits" :key="fit">
+        <span class="title">{{ fit }}</span>
+        <el-avatar shape="square" :size="100" :fit="fit" :src="url"></el-avatar>
+    </div>
+  </div>
+</template>
+<script>
+  export default {
+    data() {
+      return {
+        fits: ['fill', 'contain', 'cover', 'none', 'scale-down'],
+        url: 'https://fuss10.elemecdn.com/e/5d/4a731a90594a4af544c0c25941171jpeg.jpeg'
+      }
+    }
+  }
+</script>
+
+```
+:::
+
+### Attributes
+
+| Attribute      | Description          | Type      | Valeurs acceptées       | Default  |
+| ----------------- | -------------------------------- | --------------- | ------ | ------ |
+| icon              | Défini le type de représentation sur Icon, plus d’informations sur le composant Icon   | string          |        |        |
+| size              | Défini la taille de l'avatar                     | number/string | number / large / medium / small | large  |
+| shape             | Défini la forme de l'avatar  | string |    circle / square     |   circle  |
+| src               | L'adresse de l'image pour un avatar image | string |        |      |
+| srcSet            | Une liste d'un ou plusieurs string séparés par des virgules indiquant un ensemble de sources d'images possibles que le user agent peut utiliser | string |        |      |
+| alt               | Cet attribut définit une description textuelle alternative de l'image | string |        |      |
+| fit               | Défini comment l'image s'adapte à son conteneur | string |    fill / contain / cover / none / scale-down    |   cover   |
+
+### Évènements
+
+| Event Name | Description         | Paramètres  |
+| ------ | ------------------ | -------- |
+| error  | handler en cas d'erreur de chargement de l'image, renvoie false pour éviter le fallback par défaut |(e: Event)  |
+
+### Slot
+
+| Slot Name | Description |
+| default  | personnalise le contenu de l'avatar |
diff --git a/examples/docs/fr-FR/backtop.md b/examples/docs/fr-FR/backtop.md
new file mode 100644
index 00000000000..322ef570358
--- /dev/null
+++ b/examples/docs/fr-FR/backtop.md
@@ -0,0 +1,60 @@
+## Backtop
+
+Un bouton pour revenir en haut de la page
+
+### Basic usage
+
+Scrollez en bas de la page pour voir le bouton en bas à droite.
+:::demo
+
+```html
+<template>
+  Scrollez en bas de la page pour voir le bouton en bas à droite.
+  <el-backtop target=".page-component__scroll .el-scrollbar__wrap"></el-backtop>
+</template>
+```
+
+:::
+
+### Customizations
+
+La zone d'affichage est de 40px \* 40px.
+:::demo
+
+```html
+<template>
+  Scrollez en bas de la page pour voir le bouton en bas à droite.
+  <el-backtop target=".page-component__scroll .el-scrollbar__wrap" :bottom="100">
+    <div
+      style="{
+        height: 100%;
+        width: 100%;
+        background-color: #f2f5f6;
+        box-shadow: 0 0 6px rgba(0,0,0, .12);
+        text-align: center;
+        line-height: 40px;
+        color: #1989fa;
+      }"
+    >
+      UP
+    </div>
+  </el-backtop>
+</template>
+```
+
+:::
+
+### Attributes
+
+| Attribut          | Description                                                         | Type            | Valeurs acceptées | Défaut |
+| ----------------- | ------------------------------------------------------------------- | --------------- | --------------- | ------- |
+| target            | La cible pour déclencher le scroll                                  | string          |                 |         |
+| visibility-height | Le bouton ne s'affichera pas tant que la hauteur de défilement n'aura pas atteint cette valeur. |  number |    | 200     |
+| right             | La distance du bord droit                                           | number |                 | 40      |
+| bottom            | La distance du bord gauche                                          | number |                 | 40      |
+
+### Events
+
+| Event Name | Description         | Parameters  |
+| ---------- | ------------------- | ----------- |
+| click      | Se déclenche quand l'utilisateur clique | click event |
diff --git a/examples/docs/fr-FR/badge.md b/examples/docs/fr-FR/badge.md
new file mode 100644
index 00000000000..cf21b165f82
--- /dev/null
+++ b/examples/docs/fr-FR/badge.md
@@ -0,0 +1,125 @@
+## Badge
+
+Un nombre ou un status affiché par-dessus un bouton ou un icône.
+
+### Usage
+
+Affiche le nombre de nouveaux messages.
+
+:::demo La quantité est définit par `value` qui accepte un `Number` ou un `String`.
+
+```html
+<el-badge :value="12" class="item">
+  <el-button size="small">Commentaires</el-button>
+</el-badge>
+<el-badge :value="3" class="item">
+  <el-button size="small">Réponses</el-button>
+</el-badge>
+<el-badge :value="1" class="item" type="primary">
+  <el-button size="small">Commentaires</el-button>
+</el-badge>
+<el-badge :value="2" class="item" type="warning">
+  <el-button size="small">Réponses</el-button>
+</el-badge>
+
+<el-dropdown trigger="click">
+  <span class="el-dropdown-link">
+    Cliquez<i class="el-icon-caret-bottom el-icon--right"></i>
+  </span>
+  <el-dropdown-menu slot="dropdown">
+    <el-dropdown-item class="clearfix">
+      Commentaires
+      <el-badge class="mark" :value="12" />
+    </el-dropdown-item>
+    <el-dropdown-item class="clearfix">
+      Réponses
+      <el-badge class="mark" :value="3" />
+    </el-dropdown-item>
+  </el-dropdown-menu>
+</el-dropdown>
+
+<style>
+.item {
+  margin-top: 10px;
+  margin-right: 40px;
+}
+</style>
+```
+:::
+
+### Valeur maximale
+
+Vous pouvez configurer la valeur maximale.
+
+:::demo La valeur maximale est définit par `max` qui accepte un `Number`. Ceci ne marche qui si `value` est également un `Number`.
+
+```html
+<el-badge :value="200" :max="99" class="item">
+  <el-button size="small">Commentaires</el-button>
+</el-badge>
+<el-badge :value="100" :max="10" class="item">
+  <el-button size="small">Réponses</el-button>
+</el-badge>
+
+<style>
+.item {
+  margin-top: 10px;
+  margin-right: 40px;
+}
+</style>
+```
+:::
+
+### Configuration
+
+Affiche du texte autre que des nombres.
+
+:::demo Quand `value` est un `String`, il affiche un texte personnalisé.
+
+```html
+<el-badge value="new" class="item">
+  <el-button size="small">Commentaires</el-button>
+</el-badge>
+<el-badge value="hot" class="item">
+  <el-button size="small">Réponses</el-button>
+</el-badge>
+
+<style>
+.item {
+  margin-top: 10px;
+  margin-right: 40px;
+}
+</style>
+```
+:::
+
+### Point rouge
+
+Utilisez un point rouge pour signaler du contenu devant être remarqué.
+
+:::demo Utilisez l'attribut `is-dot` qui est un `Boolean`.
+
+```html
+<el-badge is-dot class="item">Requète</el-badge>
+<el-badge is-dot class="item">
+  <el-button class="share-button" icon="el-icon-share" type="primary"></el-button>
+</el-badge>
+
+<style>
+.item {
+  margin-top: 10px;
+  margin-right: 40px;
+}
+</style>
+```
+:::
+
+### Attributs
+
+| Attribut     | Description     | Type            | Valeurs acceptées       | Défaut |
+|-------------  |---------------- |---------------- |---------------------- |-------- |
+| value         | Valeur affichée.   | string, number  |          —            |    —    |
+| max           |  Valeur maximale, affiche '{max}+' quand elle est dépassée. Ne marche que si `value` est un `Number`.   | number  |         —              |     —    |
+| is-dot        | Affiche un point rouge. | boolean   |    —           |  false  |
+| hidden        | Cache le badge.    | boolean         |          —            |  false  |
+| type          | Type du bouton.     | string          | primary / success / warning / danger / info |   —  |
diff --git a/examples/docs/fr-FR/border.md b/examples/docs/fr-FR/border.md
new file mode 100644
index 00000000000..76a75741cf4
--- /dev/null
+++ b/examples/docs/fr-FR/border.md
@@ -0,0 +1,135 @@
+<script>
+  import bus from '../../bus';
+  import { ACTION_USER_CONFIG_UPDATE } from '../../components/theme/constant.js';
+  const varMap = {
+    '$--box-shadow-light': 'boxShadowLight',
+    '$--box-shadow-base': 'boxShadowBase',
+    '$--border-radius-base': 'borderRadiusBase',
+    '$--border-radius-small': 'borderRadiusSmall'
+  };
+  const original = {
+    boxShadowLight: '0 2px 12px 0 rgba(0, 0, 0, 0.1)',
+    boxShadowBase: '0 2px 4px rgba(0, 0, 0, .12), 0 0 6px rgba(0, 0, 0, .04)',
+    borderRadiusBase: '4px',
+    borderRadiusSmall: '2px'
+  }
+  export default {
+    created() {
+      bus.$on(ACTION_USER_CONFIG_UPDATE, this.setGlobal);
+    },
+    mounted() {
+      this.setGlobal();
+    },
+    methods: {
+      setGlobal() {
+        if (window.userThemeConfig) {
+          this.global = window.userThemeConfig.global;
+        }
+      }
+    },
+    data() {
+      return {
+        global: {},
+        boxShadowLight: '',
+        boxShadowBase: '',
+        borderRadiusBase: '',
+        borderRadiusSmall: ''
+      }
+    },
+    watch: {
+      global: {
+        immediate: true,
+        handler(value) {
+          Object.keys(varMap).forEach((c) => {
+            if (value[c]) {
+              this[varMap[c]] = value[c]
+            } else {
+              this[varMap[c]] = original[varMap[c]]
+            }
+          });
+        }
+      }
+    }
+  }
+</script>
+
+## Bordure
+
+Nous normalisons l'apparence des bordures qui peuvent être utilisées pour les boutons, les cartes, les pop-ups et d'autres composants.
+
+### Bordure
+
+Il y a plusieurs styles de bordure que vous pouvez choisir.
+
+<table class="demo-border">
+  <tbody>
+    <tr>
+      <td class="text">Nom</td>
+      <td class="text">Épaisseur</td>
+      <td class="line">Demo</td>
+    </tr>
+    <tr>
+      <td class="text">Solid</td>
+      <td class="text">1px</td>
+      <td class="line">
+        <div></div>
+      </td>
+    </tr>
+    <tr>
+      <td class="text">Dashed</td>
+      <td class="text">2px</td>
+      <td class="line">
+        <div class="dashed"></div>
+      </td>
+    </tr>
+  </tbody>
+</table>
+
+### Radius
+
+Il y a plusieurs styles de radius que vous pouvez choisir.
+
+<el-row :gutter="12" class="demo-radius">
+  <el-col :span="6" :xs="{span: 12}">
+    <div class="title">Pas de radius</div>
+    <div class="value">border-radius: 0px</div>
+    <div class="radius"></div>
+  </el-col>
+  <el-col :span="6" :xs="{span: 12}">
+    <div class="title">Petit radius</div>
+    <div class="value">border-radius: {{borderRadiusSmall}}</div>
+    <div
+      class="radius"
+      :style="{ borderRadius: borderRadiusSmall }"
+    ></div>
+  </el-col>
+  <el-col :span="6" :xs="{span: 12}">
+    <div class="title">Grand radius</div>
+    <div class="value">border-radius: {{borderRadiusBase}}</div>
+    <div
+      class="radius"
+      :style="{ borderRadius: borderRadiusBase }"
+    ></div>
+  </el-col>
+  <el-col :span="6" :xs="{span: 12}">
+    <div class="title">Radius rond</div>
+    <div class="value">border-radius: 30px</div>
+    <div class="radius radius-30"></div>
+  </el-col>
+</el-row>
+
+### Ombres
+
+Il y a plusieurs styles d'ombres que vous pouvez choisir.
+
+<div
+class="demo-shadow"
+:style="{ boxShadow: boxShadowBase }"
+></div>
+<span class="demo-shadow-text">Ombre de base, box-shadow: {{boxShadowBase}}</span>
+
+<div
+class="demo-shadow"
+:style="{ boxShadow: boxShadowLight }"
+></div>
+<span class="demo-shadow-text">Ombre légère, box-shadow: {{boxShadowLight}}</span>
diff --git a/examples/docs/fr-FR/breadcrumb.md b/examples/docs/fr-FR/breadcrumb.md
new file mode 100644
index 00000000000..37c2070d0d0
--- /dev/null
+++ b/examples/docs/fr-FR/breadcrumb.md
@@ -0,0 +1,44 @@
+## Breadcrumb
+
+Affiche le chemin de la page actuelle, afin de pouvoir naviguer plus facilement.
+
+### Usage
+
+
+:::demo Dans `el-breadcrumb`, chaque `el-breadcrumb-item` est un tag représentant chaque niveau depuis la page d'accueil. Ce Composant possède un attribut de type `String` appelé `separator` qui détermine le séparateur. Sa valeur par défaut est '/'.
+
+```html
+<el-breadcrumb separator="/">
+  <el-breadcrumb-item :to="{ path: '/' }">Accueil</el-breadcrumb-item>
+  <el-breadcrumb-item><a href="/">Gestion promotions</a></el-breadcrumb-item>
+  <el-breadcrumb-item>Liste promotions</el-breadcrumb-item>
+  <el-breadcrumb-item>Détail promotion</el-breadcrumb-item>
+</el-breadcrumb>
+```
+:::
+
+### Icône de séparation
+
+:::demo Configurez `separator-class` pour utiliser `iconfont` en tant que séparateur. Cela remplacera `separator`.
+
+```html
+<el-breadcrumb separator-class="el-icon-arrow-right">
+  <el-breadcrumb-item :to="{ path: '/' }">Accueil</el-breadcrumb-item>
+  <el-breadcrumb-item>Gestion promotions</el-breadcrumb-item>
+  <el-breadcrumb-item>Liste promotions</el-breadcrumb-item>
+  <el-breadcrumb-item>Détail promotion</el-breadcrumb-item>
+</el-breadcrumb>
+```
+:::
+
+### Attributs de Breadcrumb
+| Attributs      | Description          | Type      | Valeurs acceptées            | Défaut|
+|---------- |-------------- |---------- |--------------------------------  |-------- |
+| separator | Caractère de séparation | string | — | / |
+| separator-class | Classe de l'icône de séparation | string | — | - |
+
+### Attributs de Breadcrumb Item
+| Attributs      | Description          | Type      | Valeurs acceptées            | Défaut|
+|---------- |-------------- |---------- |--------------------------------  |-------- |
+| to | Route cible du lien, identique au `to` de `vue-router`. | string/object | — | — |
+| replace | Si `true`, la navigation ne laissera pas d'historique. | boolean | — | false |
diff --git a/examples/docs/fr-FR/button-group-enhance.md b/examples/docs/fr-FR/button-group-enhance.md
new file mode 100644
index 00000000000..188c81b7813
--- /dev/null
+++ b/examples/docs/fr-FR/button-group-enhance.md
@@ -0,0 +1 @@
+## ButtonGroupEnhance
diff --git a/examples/docs/fr-FR/button.md b/examples/docs/fr-FR/button.md
new file mode 100644
index 00000000000..50dd8a3b8d4
--- /dev/null
+++ b/examples/docs/fr-FR/button.md
@@ -0,0 +1,165 @@
+## Bouton
+
+Bouton communément utilisé.
+
+### Usage
+
+:::demo Utilisez `type`, `plain`, `round` et `circle` pour définir le style du bouton.
+
+```html
+<el-row>
+  <el-button>Défaut</el-button>
+  <el-button type="primary">Primary</el-button>
+  <el-button type="success">Success</el-button>
+  <el-button type="info">Info</el-button>
+  <el-button type="warning">Warning</el-button>
+  <el-button type="danger">Danger</el-button>
+</el-row>
+
+<el-row>
+  <el-button plain>Plein</el-button>
+  <el-button type="primary" plain>Primary</el-button>
+  <el-button type="success" plain>Success</el-button>
+  <el-button type="info" plain>Info</el-button>
+  <el-button type="warning" plain>Warning</el-button>
+  <el-button type="danger" plain>Danger</el-button>
+</el-row>
+
+<el-row>
+  <el-button round>Arrondi</el-button>
+  <el-button type="primary" round>Primary</el-button>
+  <el-button type="success" round>Success</el-button>
+  <el-button type="info" round>Info</el-button>
+  <el-button type="warning" round>Warning</el-button>
+  <el-button type="danger" round>Danger</el-button>
+</el-row>
+
+<el-row>
+  <el-button icon="el-icon-search" circle></el-button>
+  <el-button type="primary" icon="el-icon-edit" circle></el-button>
+  <el-button type="success" icon="el-icon-check" circle></el-button>
+  <el-button type="info" icon="el-icon-message" circle></el-button>
+  <el-button type="warning" icon="el-icon-star-off" circle></el-button>
+  <el-button type="danger" icon="el-icon-delete" circle></el-button>
+</el-row>
+```
+:::
+
+### Bouton désactivé
+
+L'attribut `disabled` détermine si le bouton est désactivé.
+
+:::demo Utilisez l'attribut `disabled` pour déterminer si un bouton est désactivé ou non. Il accepte un `Boolean`.
+
+```html
+<el-row>
+  <el-button disabled>Défaut</el-button>
+  <el-button type="primary" disabled>Principal</el-button>
+  <el-button type="success" disabled>Succès</el-button>
+  <el-button type="info" disabled>Info</el-button>
+  <el-button type="warning" disabled>Attention</el-button>
+  <el-button type="danger" disabled>Danger</el-button>
+</el-row>
+
+<el-row>
+  <el-button plain disabled>Plein</el-button>
+  <el-button type="primary" plain disabled>Principal</el-button>
+  <el-button type="success" plain disabled>Succès</el-button>
+  <el-button type="info" plain disabled>Info</el-button>
+  <el-button type="warning" plain disabled>Attention</el-button>
+  <el-button type="danger" plain disabled>Danger</el-button>
+</el-row>
+```
+:::
+
+### Bouton texte
+
+Bouton sans bordure ni fond.
+
+:::demo
+```html
+<el-button type="text">Bouton texte</el-button>
+<el-button type="text" disabled>Bouton texte</el-button>
+```
+:::
+
+### Icône
+
+Utilisez des icônes pour ajouter plus de sens aux boutons. Vous pouvez utiliser uniquement l'icône pour économiser de l'espace, ou bien l'utiliser avec du texte.
+
+:::demo Utilisez l'attribut `icon` pour ajouter une icône. Vous pourrez trouver la liste des icônes dans le composant Icon d'Element. Ajouter des icônes sur le coté droit du texte est possible grâce à la balise `<i>`. Des icônes personnalisées peuvent également être utilisées.
+
+```html
+<el-button type="primary" icon="el-icon-edit"></el-button>
+<el-button type="primary" icon="el-icon-share"></el-button>
+<el-button type="primary" icon="el-icon-delete"></el-button>
+<el-button type="primary" icon="el-icon-search">Recherche</el-button>
+<el-button type="primary">Upload<i class="el-icon-upload el-icon-right"></i></el-button>
+```
+:::
+
+### Groupes de boutons
+
+Affiche un groupe de bouton. Peut être utilisé pour grouper un ensemble d'opérations similaires.
+
+:::demo Utilisez la balise `<el-button-group>` pour grouper vos boutons.
+
+```html
+<el-button-group>
+  <el-button type="primary" icon="el-icon-arrow-left">Page précédente</el-button>
+  <el-button type="primary">Page suivante<i class="el-icon-arrow-right el-icon-right"></i></el-button>
+</el-button-group>
+<el-button-group>
+  <el-button type="primary" icon="el-icon-edit"></el-button>
+  <el-button type="primary" icon="el-icon-share"></el-button>
+  <el-button type="primary" icon="el-icon-delete"></el-button>
+</el-button-group>
+```
+:::
+
+### Bouton en chargement
+
+Cliquez sur le bouton pour charger des données et il affichera un état de chargement.
+
+:::demo Configurez l'attribut `loading` à `true` pour afficher un état de chargement.
+
+```html
+<el-button type="primary" :loading="true">Chargement</el-button>
+```
+:::
+
+### Tailles
+
+En plus de la taille par défaut, le composant Button fournit trois tailles supplémentaires pour différents scénarios.
+
+:::demo Utilisez l'attribut `size` pour choisir d'autres tailles parmi `medium`, `small` ou `mini`.
+
+```html
+<el-row>
+  <el-button>Défaut</el-button>
+  <el-button size="medium">Medium</el-button>
+  <el-button size="small">Small</el-button>
+  <el-button size="mini">Mini</el-button>
+</el-row>
+<el-row>
+  <el-button round>Défaut</el-button>
+  <el-button size="medium" round>Medium</el-button>
+  <el-button size="small" round>Small</el-button>
+  <el-button size="mini" round>Mini</el-button>
+</el-row>
+```
+:::
+
+### Attributs
+| Attribut      | Description    | Type      | Valeurs acceptées       | Défaut   |
+|---------- |-------- |---------- |-------------  |-------- |
+| size     | Taille du bouton.   | string  |   medium / small / mini            |    —     |
+| type     | Type du bouton.   | string    |   primary / success / warning / danger / info / text |     —    |
+| plain     | Détermine si le bouton est plein.   | boolean    | — | false   |
+| round     | Détermine si le bouton est arrondi.   | boolean    | — | false   |
+| circle     | Détermine si le bouton est un cercle.   | boolean    | — | false   |
+| loading   | Détermine si l'état de chargement est affiché.   | boolean    | — | false   |
+| disabled  | Désactive le bouton    | boolean   | —   | false   |
+| icon  | Classe de l'icône. | string   |  —  |  —  |
+| autofocus  | Identique à l'attribut natif `autofocus` | boolean   |  —  |  false  |
+| native-type | Identique à l'attribut natif `type` | string | button / submit / reset | button |
diff --git a/examples/docs/fr-FR/calendar.md b/examples/docs/fr-FR/calendar.md
new file mode 100644
index 00000000000..a198b2be9d2
--- /dev/null
+++ b/examples/docs/fr-FR/calendar.md
@@ -0,0 +1,68 @@
+## Calendrier
+
+Affiche un calendrier.
+
+### Usage basique
+
+:::demo Réglez `value` pour spécifier le mois à afficher. Si `value` n'est pas spécifiée, le mois actuel sera affiché. `value` supporte le two-way binding.
+```html
+<el-calendar v-model="value">
+</el-calendar>
+
+<script>
+  export default {
+    data() {
+      return {
+        value: new Date()
+      }
+    }
+  }
+</script>
+```
+:::
+
+### Contenu personnalisé
+
+:::demo Personnalisez le contenu du calendrier en utilisant le `scoped-slot` appelé `dateCell`. Dans ce `scoped-slot` vous aurez accès au paramètres date (date de la cellule courante), data (incluant les attributs type, isSelected et day). Pour plus d'informations, référez-vous à la documentation ci-dessous.
+```html
+<el-calendar>
+  <!-- Use 2.5 slot syntax. If you use Vue 2.6, please use new slot syntax-->
+  <template
+    slot="dateCell"
+    slot-scope="{date, data}">
+    <p :class="data.isSelected ? 'is-selected' : ''">
+      {{ data.day.split('-').slice(1).join('-') }} {{ data.isSelected ? '✔️' : ''}}
+    </p>
+  </template>
+</el-calendar>
+<style>
+  .is-selected {
+    color: #1989FA;
+  }
+</style>
+```
+:::
+
+### Intervalle
+
+:::demo Utilisez l'attribut `range` pour afficher un intervalle particulier. Le début doit être un lundi et la fin un dimanche, l'intervalle ne pouvant excéder deux mois.
+```html
+<el-calendar :range="['2019-03-04', '2019-03-24']">
+</el-calendar>
+```
+:::
+
+### Attributs
+
+| Attribut          | Description   | Type      | Valeurs acceptées     | Défaut   |
+|------------------ |-------------- |---------- |---------------------- |--------- |
+| value / v-model   | Valeur liée.  | Date/string/number | —            | —        |
+| range             | Intervalle de dates, début et fin inclus. Start time must be start day of week, end time must be end day of week, the time span cannot exceed two months. | Array     | —           | —      |
+| first-day-of-week | fisrt day of week| Number | 1 to 7                |  1       |
+
+### Slot dateCell
+
+| Attribut       | Description   | Type      | Valeurs acceptées       | Défaut  |
+|-----------------|-------------- |---------- |---------------------- |--------- |
+| date            | Date de la cellule courante.  | Date      | —                     | —        |
+| data            | { type, isSelected, day }. `type` indique le mois de la date courante, les valeurs prev-month, current-month et next-month pouvant être utilisées; `isSelected` indique si la date est sélectionnée; `day` est la date formattée en yyyy-MM-dd.    | Object      | —           | —      |
diff --git a/examples/docs/fr-FR/card.md b/examples/docs/fr-FR/card.md
new file mode 100644
index 00000000000..28106933367
--- /dev/null
+++ b/examples/docs/fr-FR/card.md
@@ -0,0 +1,170 @@
+## Card
+
+Conteneur intégrant des informations.
+
+### Usage
+
+Le composant Card comprend un titre, un contenu et des opérations.
+
+:::demo Card est composé d'un `header` et d'un `body`. `header` est optionnel et son contenu nécessite l'utilisation d'un slot.
+```html
+<el-card class="box-card">
+  <div slot="header" class="clearfix">
+    <span>Card name</span>
+    <el-button style="float: right; padding: 3px 0" type="text">Bouton</el-button>
+  </div>
+  <div v-for="o in 4" :key="o" class="text item">
+    {{'List item ' + o }}
+  </div>
+</el-card>
+
+<style>
+  .text {
+    font-size: 14px;
+  }
+
+  .item {
+    margin-bottom: 18px;
+  }
+
+  .clearfix:before,
+  .clearfix:after {
+    display: table;
+    content: "";
+  }
+  .clearfix:after {
+    clear: both
+  }
+
+  .box-card {
+    width: 480px;
+  }
+</style>
+```
+:::
+
+### Card simple
+
+Le header peut être omis.
+
+:::demo
+```html
+<el-card class="box-card">
+  <div v-for="o in 4" :key="o" class="text item">
+    {{'List item ' + o }}
+  </div>
+</el-card>
+
+<style>
+  .text {
+    font-size: 14px;
+  }
+
+  .item {
+    padding: 18px 0;
+  }
+
+  .box-card {
+    width: 480px;
+  }
+</style>
+```
+:::
+
+### Images
+
+Affichez un contenu plus riche grâce à la configuration.
+
+:::demo L'attribut `body-style` définit le style CSS du `body`. Cet exemple utilise aussi `el-col` pour la mise en page.
+```html
+<el-row>
+  <el-col :span="8" v-for="(o, index) in 2" :key="o" :offset="index > 0 ? 2 : 0">
+    <el-card :body-style="{ padding: '0px' }">
+      <img src="https://shadow.elemecdn.com/app/element/hamburger.9cf7b091-55e9-11e9-a976-7f4d0b07eef6.png" class="image">
+      <div style="padding: 14px;">
+        <span>Yummy hamburger</span>
+        <div class="bottom clearfix">
+          <time class="time">{{ currentDate }}</time>
+          <el-button type="text" class="button">Operating</el-button>
+        </div>
+      </div>
+    </el-card>
+  </el-col>
+</el-row>
+
+<style>
+  .time {
+    font-size: 13px;
+    color: #999;
+  }
+
+  .bottom {
+    margin-top: 13px;
+    line-height: 12px;
+  }
+
+  .button {
+    padding: 0;
+    float: right;
+  }
+
+  .image {
+    width: 100%;
+    display: block;
+  }
+
+  .clearfix:before,
+  .clearfix:after {
+      display: table;
+      content: "";
+  }
+
+  .clearfix:after {
+      clear: both
+  }
+</style>
+
+<script>
+export default {
+  data() {
+    return {
+      currentDate: new Date()
+    };
+  }
+}
+</script>
+```
+:::
+
+### Ombres
+
+Vous pouvez définir quand l'ombre des Cards doivent apparaître.
+
+:::demo L'attribut `shadow` détermine quand l'ombre doit apparaître. Les valeurs possibles sont `always`, `hover` ou `never`.
+```html
+<el-row :gutter="12">
+  <el-col :span="8">
+    <el-card shadow="always">
+      Always
+    </el-card>
+  </el-col>
+  <el-col :span="8">
+    <el-card shadow="hover">
+      Hover
+    </el-card>
+  </el-col>
+  <el-col :span="8">
+    <el-card shadow="never">
+      Never
+    </el-card>
+  </el-col>
+</el-row>
+```
+:::
+
+### Attributs
+| Attribut      | Description          | Type      | Valeurs acceptées       | Défaut  |
+|---------- |-------- |---------- |-------------  |-------- |
+| header | Titre de la Card. Accepte aussi un template DOM passé via `slot#header`. | string| — | — |
+| body-style | Style CSS du body. | object| — | { padding: '20px' } |
+| shadow | Quand l'ombre doit apparaître | string | always / hover / never | always |
diff --git a/examples/docs/fr-FR/carousel.md b/examples/docs/fr-FR/carousel.md
new file mode 100644
index 00000000000..defa9e1e5b4
--- /dev/null
+++ b/examples/docs/fr-FR/carousel.md
@@ -0,0 +1,212 @@
+## Carousel
+
+Affiche en boucle une série d'images ou de textes dans un espace limité.
+
+### Usage
+
+:::demo Utilisez `el-carousel` avec `el-carousel-item`, et vous obtiendrez un carrousel. Le contenu de chaque slide est complètement personnalisable, il vous suffit juste de le placer à l'intérieur de la balise `el-carousel-item`. Par défaut le carrousel défile quand la souris passe sur un indicateur. Réglez `trigger` sur `click` et le carrousel défilera uniquement quand vous cliquerez sur l'indicateur.
+```html
+<template>
+  <div class="block">
+    <span class="demonstration">Défile quand la souris passe sur l'indicateur (défaut)</span>
+    <el-carousel height="150px">
+      <el-carousel-item v-for="item in 4" :key="item">
+        <h3 class="small">{{ item }}</h3>
+      </el-carousel-item>
+    </el-carousel>
+  </div>
+  <div class="block">
+    <span class="demonstration">Défile quand on clique sur l'indicateur</span>
+    <el-carousel trigger="click" height="150px">
+      <el-carousel-item v-for="item in 4" :key="item">
+        <h3 class="small">{{ item }}</h3>
+      </el-carousel-item>
+    </el-carousel>
+  </div>
+</template>
+
+<style>
+  .el-carousel__item h3 {
+    color: #475669;
+    font-size: 14px;
+    opacity: 0.75;
+    line-height: 150px;
+    margin: 0;
+  }
+
+  .el-carousel__item:nth-child(2n) {
+    background-color: #99a9bf;
+  }
+
+  .el-carousel__item:nth-child(2n+1) {
+    background-color: #d3dce6;
+  }
+</style>
+```
+:::
+
+### Indicateurs
+
+Les indicateurs peuvent être affichés en dehors du carrousel.
+
+:::demo L'attribut `indicator-position` détermine où les indicateurs sont localisés. Par défaut ils se trouvent à l'intérieur du carrousel, régler `indicator-position` sur `outside` les affichera à l'extérieur; régler `indicator-position` sur `none` les cachera totalement.
+```html
+<template>
+  <el-carousel indicator-position="outside">
+    <el-carousel-item v-for="item in 4" :key="item">
+      <h3>{{ item }}</h3>
+    </el-carousel-item>
+  </el-carousel>
+</template>
+
+<style>
+  .el-carousel__item h3 {
+    color: #475669;
+    font-size: 18px;
+    opacity: 0.75;
+    line-height: 300px;
+    margin: 0;
+  }
+
+  .el-carousel__item:nth-child(2n) {
+    background-color: #99a9bf;
+  }
+
+  .el-carousel__item:nth-child(2n+1) {
+    background-color: #d3dce6;
+  }
+</style>
+```
+:::
+
+### Flèches
+
+Vous pouvez définir quand les flèches doivent apparaître.
+
+:::demo L'attribut `arrow` détermine quand les flèches sont affichées. Par défaut elles apparaissent quand la souris passe sur le carrousel. Réglez `arrow` sur `always` ou `never` affiche ou cache les flèches de manière permanente.
+```html
+<template>
+  <el-carousel :interval="5000" arrow="always">
+    <el-carousel-item v-for="item in 4" :key="item">
+      <h3>{{ item }}</h3>
+    </el-carousel-item>
+  </el-carousel>
+</template>
+
+<style>
+  .el-carousel__item h3 {
+    color: #475669;
+    font-size: 18px;
+    opacity: 0.75;
+    line-height: 300px;
+    margin: 0;
+  }
+
+  .el-carousel__item:nth-child(2n) {
+    background-color: #99a9bf;
+  }
+
+  .el-carousel__item:nth-child(2n+1) {
+    background-color: #d3dce6;
+  }
+</style>
+```
+:::
+
+### Mode carte
+
+Quand la page est suffisamment large mais avec une hauteur limitée, vous pouvez activer le mode carte.
+
+:::demo Réglez `type` sur `card` pour activer le mode carte. Hormis l'apparence, la principale différence par rapport au mode commun est que cliquer sur une des slides se trouvant de chaque coté fait directement défiler le carrousel.
+```html
+<template>
+  <el-carousel :interval="4000" type="card" height="200px">
+    <el-carousel-item v-for="item in 6" :key="item">
+      <h3 class="medium">{{ item }}</h3>
+    </el-carousel-item>
+  </el-carousel>
+</template>
+
+<style>
+  .el-carousel__item h3 {
+    color: #475669;
+    font-size: 14px;
+    opacity: 0.75;
+    line-height: 200px;
+    margin: 0;
+  }
+
+  .el-carousel__item:nth-child(2n) {
+    background-color: #99a9bf;
+  }
+
+  .el-carousel__item:nth-child(2n+1) {
+    background-color: #d3dce6;
+  }
+</style>
+```
+:::
+
+Par défaut, `direction` est `horizontal`. Vous pouvez faire en sorte que le défilement soit vertical en mettant `direction` à `vertical`.
+
+:::demo
+```html
+<template>
+  <el-carousel height="200px" direction="vertical" :autoplay="false">
+    <el-carousel-item v-for="item in 4" :key="item">
+      <h3 class="medium">{{ item }}</h3>
+    </el-carousel-item>
+  </el-carousel>
+</template>
+
+<style>
+  .el-carousel__item h3 {
+    color: #475669;
+    font-size: 14px;
+    opacity: 0.75;
+    line-height: 200px;
+    margin: 0;
+  }
+
+  .el-carousel__item:nth-child(2n) {
+    background-color: #99a9bf;
+  }
+
+  .el-carousel__item:nth-child(2n+1) {
+    background-color: #d3dce6;
+  }
+</style>
+```
+:::
+
+### Attributs du Carrousel
+| Attribut      | Description          | Type      | Valeurs acceptées       | Défaut  |
+|---------- |-------------- |---------- |--------------------------------  |-------- |
+| height | Hauteur du carrousel. | string | — | — |
+| initial-index | Index de la slide initiale (commence à 0). | number | — | 0 |
+| trigger | Comment les indicateurs sont déclenchés | string | hover/click | hover |
+| autoplay | Si le carrousel défile automatiquement | boolean | — | true |
+| interval | Intervalle pour le défilement automatique, en millisecondes. | number | — | 3000 |
+| indicator-position | Position des indicateurs. | string | outside/none | — |
+| arrow | Détermine quand les flèches sont affichées. | string | always/hover/never | hover |
+| type | Type du carrousel. | string | card | — |
+| loop | Affiche les éléments en boucle. | boolean | - | true |
+| direction | Détermine la direction du défilement. | string | horizontal/vertical | horizontal |
+
+### Évènements du Carrousel
+| Nom | Description | Paramètres |
+|---------|---------|---------|
+| change | Se déclenche quand la slide active défile. | Index de la nouvelle slide, index de l'ancienne slide |
+
+### Méthodes du Carrousel
+| Mathode | Description | Paramètres |
+|---------- |-------------- | -- |
+| setActiveItem | Défile manuellement vers une slide. | index de la slide d'arrivée, à partir de 0; ou bien le `name` du `el-carousel-item` correspondant|
+| prev | Défile vers la slide précédente. | — |
+| next | Défile vers la slide suivante. | — |
+
+### Attributs du Carrousel-Item
+| Attribut      | Description          | Type      | Valeurs acceptées       | Défaut  |
+|---------- |-------------- |---------- |--------------------------------  |-------- |
+| name | Nom de l'item, peut être utilisé dans `setActiveItem`. | string | — | — |
+| label | Texte affiché au niveau de l'indicateur correspondant.| string | — | — |
diff --git a/examples/docs/fr-FR/cascader.md b/examples/docs/fr-FR/cascader.md
new file mode 100644
index 00000000000..7603b0933fc
--- /dev/null
+++ b/examples/docs/fr-FR/cascader.md
@@ -0,0 +1,1987 @@
+## Cascader
+
+Si les options ont une structure hiérarchique claire, Le composant Cascader peut être utilisé pour les afficher et les sélectionner.
+
+### Basic usage
+
+Il y a deux manières d'étendres les options enfants.
+
+:::demo Assigner l'attribut `options` à un tableau d'options fournit un composant Cascader. L'attribut `props.expandTrigger` définit comment les options enfants sont étendues.
+```html
+<div class="block">
+  <span class="demonstration">Les options enfants se développent lorsque vous cliquez dessus (par défaut)</span>
+  <el-cascader
+    v-model="value"
+    :options="options"
+    @change="handleChange"></el-cascader>
+</div>
+<div class="block">
+  <span class="demonstration">Les options enfants se développent lorsqu'elles sont survolées</span>
+  <el-cascader
+    v-model="value"
+    :options="options"
+    :props="{ expandTrigger: 'hover' }"
+    @change="handleChange"></el-cascader>
+</div>
+
+<script>
+  export default {
+    data() {
+      return {
+        value: [],
+        options: [{
+          value: 'guide',
+          label: 'Guide',
+          children: [{
+            value: 'disciplines',
+            label: 'Disciplines',
+            children: [{
+              value: 'consistency',
+              label: 'Consistency'
+            }, {
+              value: 'feedback',
+              label: 'Feedback'
+            }, {
+              value: 'efficiency',
+              label: 'Efficiency'
+            }, {
+              value: 'controllability',
+              label: 'Controllability'
+            }]
+          }, {
+            value: 'navigation',
+            label: 'Navigation',
+            children: [{
+              value: 'side nav',
+              label: 'Side Navigation'
+            }, {
+              value: 'top nav',
+              label: 'Top Navigation'
+            }]
+          }]
+        }, {
+          value: 'component',
+          label: 'Component',
+          children: [{
+            value: 'basic',
+            label: 'Basic',
+            children: [{
+              value: 'layout',
+              label: 'Layout'
+            }, {
+              value: 'color',
+              label: 'Color'
+            }, {
+              value: 'typography',
+              label: 'Typography'
+            }, {
+              value: 'icon',
+              label: 'Icon'
+            }, {
+              value: 'button',
+              label: 'Button'
+            }]
+          }, {
+            value: 'form',
+            label: 'Form',
+            children: [{
+              value: 'radio',
+              label: 'Radio'
+            }, {
+              value: 'checkbox',
+              label: 'Checkbox'
+            }, {
+              value: 'input',
+              label: 'Input'
+            }, {
+              value: 'input-number',
+              label: 'InputNumber'
+            }, {
+              value: 'select',
+              label: 'Select'
+            }, {
+              value: 'cascader',
+              label: 'Cascader'
+            }, {
+              value: 'switch',
+              label: 'Switch'
+            }, {
+              value: 'slider',
+              label: 'Slider'
+            }, {
+              value: 'time-picker',
+              label: 'TimePicker'
+            }, {
+              value: 'date-picker',
+              label: 'DatePicker'
+            }, {
+              value: 'datetime-picker',
+              label: 'DateTimePicker'
+            }, {
+              value: 'upload',
+              label: 'Upload'
+            }, {
+              value: 'rate',
+              label: 'Rate'
+            }, {
+              value: 'form',
+              label: 'Form'
+            }]
+          }, {
+            value: 'data',
+            label: 'Data',
+            children: [{
+              value: 'table',
+              label: 'Table'
+            }, {
+              value: 'tag',
+              label: 'Tag'
+            }, {
+              value: 'progress',
+              label: 'Progress'
+            }, {
+              value: 'tree',
+              label: 'Tree'
+            }, {
+              value: 'pagination',
+              label: 'Pagination'
+            }, {
+              value: 'badge',
+              label: 'Badge'
+            }]
+          }, {
+            value: 'notice',
+            label: 'Notice',
+            children: [{
+              value: 'alert',
+              label: 'Alert'
+            }, {
+              value: 'loading',
+              label: 'Loading'
+            }, {
+              value: 'message',
+              label: 'Message'
+            }, {
+              value: 'message-box',
+              label: 'MessageBox'
+            }, {
+              value: 'notification',
+              label: 'Notification'
+            }]
+          }, {
+            value: 'navigation',
+            label: 'Navigation',
+            children: [{
+              value: 'menu',
+              label: 'NavMenu'
+            }, {
+              value: 'tabs',
+              label: 'Tabs'
+            }, {
+              value: 'breadcrumb',
+              label: 'Breadcrumb'
+            }, {
+              value: 'dropdown',
+              label: 'Dropdown'
+            }, {
+              value: 'steps',
+              label: 'Steps'
+            }]
+          }, {
+            value: 'others',
+            label: 'Others',
+            children: [{
+              value: 'dialog',
+              label: 'Dialog'
+            }, {
+              value: 'tooltip',
+              label: 'Tooltip'
+            }, {
+              value: 'popover',
+              label: 'Popover'
+            }, {
+              value: 'card',
+              label: 'Card'
+            }, {
+              value: 'carousel',
+              label: 'Carousel'
+            }, {
+              value: 'collapse',
+              label: 'Collapse'
+            }]
+          }]
+        }, {
+          value: 'resource',
+          label: 'Resource',
+          children: [{
+            value: 'axure',
+            label: 'Axure Components'
+          }, {
+            value: 'sketch',
+            label: 'Sketch Templates'
+          }, {
+            value: 'docs',
+            label: 'Design Documentation'
+          }]
+        }]
+      };
+    },
+    methods: {
+      handleChange(value) {
+        console.log(value);
+      }
+    }
+  };
+</script>
+```
+:::
+
+### Disabled option
+
+Désactivez une option en définissant un champ `disabled` dans l'objet d'option.
+
+:::demo Dans cet exemple, le premier élément du tableau `options` a un champ` disabled: true`, il est donc désactivé. Par défaut, Cascader vérifie le champ `disabled` dans chaque objet option. Si vous utilisez un autre nom de champ pour indiquer si une option est désactivée, vous pouvez l'affecter dans l'attribut `props.disabled` (voir le tableau des API ci-dessous pour plus de détails). Et bien sûr, les noms de champs `value`,` label` et `children` peuvent également être personnalisés de la même manière.
+```html
+<el-cascader :options="options"></el-cascader>
+
+<script>
+  export default {
+    data() {
+      return {
+        options: [{
+          value: 'guide',
+          label: 'Guide',
+          disabled: true,
+          children: [{
+            value: 'disciplines',
+            label: 'Disciplines',
+            children: [{
+              value: 'consistency',
+              label: 'Consistency'
+            }, {
+              value: 'feedback',
+              label: 'Feedback'
+            }, {
+              value: 'efficiency',
+              label: 'Efficiency'
+            }, {
+              value: 'controllability',
+              label: 'Controllability'
+            }]
+          }, {
+            value: 'navigation',
+            label: 'Navigation',
+            children: [{
+              value: 'side nav',
+              label: 'Side Navigation'
+            }, {
+              value: 'top nav',
+              label: 'Top Navigation'
+            }]
+          }]
+        }, {
+          value: 'component',
+          label: 'Component',
+          children: [{
+            value: 'basic',
+            label: 'Basic',
+            children: [{
+              value: 'layout',
+              label: 'Layout'
+            }, {
+              value: 'color',
+              label: 'Color'
+            }, {
+              value: 'typography',
+              label: 'Typography'
+            }, {
+              value: 'icon',
+              label: 'Icon'
+            }, {
+              value: 'button',
+              label: 'Button'
+            }]
+          }, {
+            value: 'form',
+            label: 'Form',
+            children: [{
+              value: 'radio',
+              label: 'Radio'
+            }, {
+              value: 'checkbox',
+              label: 'Checkbox'
+            }, {
+              value: 'input',
+              label: 'Input'
+            }, {
+              value: 'input-number',
+              label: 'InputNumber'
+            }, {
+              value: 'select',
+              label: 'Select'
+            }, {
+              value: 'cascader',
+              label: 'Cascader'
+            }, {
+              value: 'switch',
+              label: 'Switch'
+            }, {
+              value: 'slider',
+              label: 'Slider'
+            }, {
+              value: 'time-picker',
+              label: 'TimePicker'
+            }, {
+              value: 'date-picker',
+              label: 'DatePicker'
+            }, {
+              value: 'datetime-picker',
+              label: 'DateTimePicker'
+            }, {
+              value: 'upload',
+              label: 'Upload'
+            }, {
+              value: 'rate',
+              label: 'Rate'
+            }, {
+              value: 'form',
+              label: 'Form'
+            }]
+          }, {
+            value: 'data',
+            label: 'Data',
+            children: [{
+              value: 'table',
+              label: 'Table'
+            }, {
+              value: 'tag',
+              label: 'Tag'
+            }, {
+              value: 'progress',
+              label: 'Progress'
+            }, {
+              value: 'tree',
+              label: 'Tree'
+            }, {
+              value: 'pagination',
+              label: 'Pagination'
+            }, {
+              value: 'badge',
+              label: 'Badge'
+            }]
+          }, {
+            value: 'notice',
+            label: 'Notice',
+            children: [{
+              value: 'alert',
+              label: 'Alert'
+            }, {
+              value: 'loading',
+              label: 'Loading'
+            }, {
+              value: 'message',
+              label: 'Message'
+            }, {
+              value: 'message-box',
+              label: 'MessageBox'
+            }, {
+              value: 'notification',
+              label: 'Notification'
+            }]
+          }, {
+            value: 'navigation',
+            label: 'Navigation',
+            children: [{
+              value: 'menu',
+              label: 'NavMenu'
+            }, {
+              value: 'tabs',
+              label: 'Tabs'
+            }, {
+              value: 'breadcrumb',
+              label: 'Breadcrumb'
+            }, {
+              value: 'dropdown',
+              label: 'Dropdown'
+            }, {
+              value: 'steps',
+              label: 'Steps'
+            }]
+          }, {
+            value: 'others',
+            label: 'Others',
+            children: [{
+              value: 'dialog',
+              label: 'Dialog'
+            }, {
+              value: 'tooltip',
+              label: 'Tooltip'
+            }, {
+              value: 'popover',
+              label: 'Popover'
+            }, {
+              value: 'card',
+              label: 'Card'
+            }, {
+              value: 'carousel',
+              label: 'Carousel'
+            }, {
+              value: 'collapse',
+              label: 'Collapse'
+            }]
+          }]
+        }, {
+          value: 'resource',
+          label: 'Resource',
+          children: [{
+            value: 'axure',
+            label: 'Axure Components'
+          }, {
+            value: 'sketch',
+            label: 'Sketch Templates'
+          }, {
+            value: 'docs',
+            label: 'Design Documentation'
+          }]
+        }]
+      };
+    }
+  };
+</script>
+```
+:::
+
+### Clearable
+
+Définissez l'attribut `clearable` pour` el-cascader` et une icône claire apparaîtra une fois sélectionnée et survolée
+
+:::demo
+```html
+<el-cascader :options="options" clearable></el-cascader>
+
+<script>
+  export default {
+    data() {
+      return {
+        options: [{
+          value: 'guide',
+          label: 'Guide',
+          children: [{
+            value: 'disciplines',
+            label: 'Disciplines',
+            children: [{
+              value: 'consistency',
+              label: 'Consistency'
+            }, {
+              value: 'feedback',
+              label: 'Feedback'
+            }, {
+              value: 'efficiency',
+              label: 'Efficiency'
+            }, {
+              value: 'controllability',
+              label: 'Controllability'
+            }]
+          }, {
+            value: 'navigation',
+            label: 'Navigation',
+            children: [{
+              value: 'side nav',
+              label: 'Side Navigation'
+            }, {
+              value: 'top nav',
+              label: 'Top Navigation'
+            }]
+          }]
+        }, {
+          value: 'component',
+          label: 'Component',
+          children: [{
+            value: 'basic',
+            label: 'Basic',
+            children: [{
+              value: 'layout',
+              label: 'Layout'
+            }, {
+              value: 'color',
+              label: 'Color'
+            }, {
+              value: 'typography',
+              label: 'Typography'
+            }, {
+              value: 'icon',
+              label: 'Icon'
+            }, {
+              value: 'button',
+              label: 'Button'
+            }]
+          }, {
+            value: 'form',
+            label: 'Form',
+            children: [{
+              value: 'radio',
+              label: 'Radio'
+            }, {
+              value: 'checkbox',
+              label: 'Checkbox'
+            }, {
+              value: 'input',
+              label: 'Input'
+            }, {
+              value: 'input-number',
+              label: 'InputNumber'
+            }, {
+              value: 'select',
+              label: 'Select'
+            }, {
+              value: 'cascader',
+              label: 'Cascader'
+            }, {
+              value: 'switch',
+              label: 'Switch'
+            }, {
+              value: 'slider',
+              label: 'Slider'
+            }, {
+              value: 'time-picker',
+              label: 'TimePicker'
+            }, {
+              value: 'date-picker',
+              label: 'DatePicker'
+            }, {
+              value: 'datetime-picker',
+              label: 'DateTimePicker'
+            }, {
+              value: 'upload',
+              label: 'Upload'
+            }, {
+              value: 'rate',
+              label: 'Rate'
+            }, {
+              value: 'form',
+              label: 'Form'
+            }]
+          }, {
+            value: 'data',
+            label: 'Data',
+            children: [{
+              value: 'table',
+              label: 'Table'
+            }, {
+              value: 'tag',
+              label: 'Tag'
+            }, {
+              value: 'progress',
+              label: 'Progress'
+            }, {
+              value: 'tree',
+              label: 'Tree'
+            }, {
+              value: 'pagination',
+              label: 'Pagination'
+            }, {
+              value: 'badge',
+              label: 'Badge'
+            }]
+          }, {
+            value: 'notice',
+            label: 'Notice',
+            children: [{
+              value: 'alert',
+              label: 'Alert'
+            }, {
+              value: 'loading',
+              label: 'Loading'
+            }, {
+              value: 'message',
+              label: 'Message'
+            }, {
+              value: 'message-box',
+              label: 'MessageBox'
+            }, {
+              value: 'notification',
+              label: 'Notification'
+            }]
+          }, {
+            value: 'navigation',
+            label: 'Navigation',
+            children: [{
+              value: 'menu',
+              label: 'NavMenu'
+            }, {
+              value: 'tabs',
+              label: 'Tabs'
+            }, {
+              value: 'breadcrumb',
+              label: 'Breadcrumb'
+            }, {
+              value: 'dropdown',
+              label: 'Dropdown'
+            }, {
+              value: 'steps',
+              label: 'Steps'
+            }]
+          }, {
+            value: 'others',
+            label: 'Others',
+            children: [{
+              value: 'dialog',
+              label: 'Dialog'
+            }, {
+              value: 'tooltip',
+              label: 'Tooltip'
+            }, {
+              value: 'popover',
+              label: 'Popover'
+            }, {
+              value: 'card',
+              label: 'Card'
+            }, {
+              value: 'carousel',
+              label: 'Carousel'
+            }, {
+              value: 'collapse',
+              label: 'Collapse'
+            }]
+          }]
+        }, {
+          value: 'resource',
+          label: 'Resource',
+          children: [{
+            value: 'axure',
+            label: 'Axure Components'
+          }, {
+            value: 'sketch',
+            label: 'Sketch Templates'
+          }, {
+            value: 'docs',
+            label: 'Design Documentation'
+          }]
+        }]
+      }
+    }
+  }
+</script>
+```
+:::
+
+### Display only the last level
+
+L'entrée peut afficher uniquement le dernier niveau au lieu de tous les niveaux.
+
+:::demo L'attribut `show-all-levels` définit si tous les niveaux sont affichés. S'il est `false`, seul le dernier niveau est affiché.
+```html
+<el-cascader :options="options" :show-all-levels="false"></el-cascader>
+<script>
+  export default {
+    data() {
+      return {
+        options: [{
+          value: 'guide',
+          label: 'Guide',
+          children: [{
+            value: 'disciplines',
+            label: 'Disciplines',
+            children: [{
+              value: 'consistency',
+              label: 'Consistency'
+            }, {
+              value: 'feedback',
+              label: 'Feedback'
+            }, {
+              value: 'efficiency',
+              label: 'Efficiency'
+            }, {
+              value: 'controllability',
+              label: 'Controllability'
+            }]
+          }, {
+            value: 'navigation',
+            label: 'Navigation',
+            children: [{
+              value: 'side nav',
+              label: 'Side Navigation'
+            }, {
+              value: 'top nav',
+              label: 'Top Navigation'
+            }]
+          }]
+        }, {
+          value: 'component',
+          label: 'Component',
+          children: [{
+            value: 'basic',
+            label: 'Basic',
+            children: [{
+              value: 'layout',
+              label: 'Layout'
+            }, {
+              value: 'color',
+              label: 'Color'
+            }, {
+              value: 'typography',
+              label: 'Typography'
+            }, {
+              value: 'icon',
+              label: 'Icon'
+            }, {
+              value: 'button',
+              label: 'Button'
+            }]
+          }, {
+            value: 'form',
+            label: 'Form',
+            children: [{
+              value: 'radio',
+              label: 'Radio'
+            }, {
+              value: 'checkbox',
+              label: 'Checkbox'
+            }, {
+              value: 'input',
+              label: 'Input'
+            }, {
+              value: 'input-number',
+              label: 'InputNumber'
+            }, {
+              value: 'select',
+              label: 'Select'
+            }, {
+              value: 'cascader',
+              label: 'Cascader'
+            }, {
+              value: 'switch',
+              label: 'Switch'
+            }, {
+              value: 'slider',
+              label: 'Slider'
+            }, {
+              value: 'time-picker',
+              label: 'TimePicker'
+            }, {
+              value: 'date-picker',
+              label: 'DatePicker'
+            }, {
+              value: 'datetime-picker',
+              label: 'DateTimePicker'
+            }, {
+              value: 'upload',
+              label: 'Upload'
+            }, {
+              value: 'rate',
+              label: 'Rate'
+            }, {
+              value: 'form',
+              label: 'Form'
+            }]
+          }, {
+            value: 'data',
+            label: 'Data',
+            children: [{
+              value: 'table',
+              label: 'Table'
+            }, {
+              value: 'tag',
+              label: 'Tag'
+            }, {
+              value: 'progress',
+              label: 'Progress'
+            }, {
+              value: 'tree',
+              label: 'Tree'
+            }, {
+              value: 'pagination',
+              label: 'Pagination'
+            }, {
+              value: 'badge',
+              label: 'Badge'
+            }]
+          }, {
+            value: 'notice',
+            label: 'Notice',
+            children: [{
+              value: 'alert',
+              label: 'Alert'
+            }, {
+              value: 'loading',
+              label: 'Loading'
+            }, {
+              value: 'message',
+              label: 'Message'
+            }, {
+              value: 'message-box',
+              label: 'MessageBox'
+            }, {
+              value: 'notification',
+              label: 'Notification'
+            }]
+          }, {
+            value: 'navigation',
+            label: 'Navigation',
+            children: [{
+              value: 'menu',
+              label: 'NavMenu'
+            }, {
+              value: 'tabs',
+              label: 'Tabs'
+            }, {
+              value: 'breadcrumb',
+              label: 'Breadcrumb'
+            }, {
+              value: 'dropdown',
+              label: 'Dropdown'
+            }, {
+              value: 'steps',
+              label: 'Steps'
+            }]
+          }, {
+            value: 'others',
+            label: 'Others',
+            children: [{
+              value: 'dialog',
+              label: 'Dialog'
+            }, {
+              value: 'tooltip',
+              label: 'Tooltip'
+            }, {
+              value: 'popover',
+              label: 'Popover'
+            }, {
+              value: 'card',
+              label: 'Card'
+            }, {
+              value: 'carousel',
+              label: 'Carousel'
+            }, {
+              value: 'collapse',
+              label: 'Collapse'
+            }]
+          }]
+        }, {
+          value: 'resource',
+          label: 'Resource',
+          children: [{
+            value: 'axure',
+            label: 'Axure Components'
+          }, {
+            value: 'sketch',
+            label: 'Sketch Templates'
+          }, {
+            value: 'docs',
+            label: 'Design Documentation'
+          }]
+        }]
+      };
+    }
+  };
+</script>
+```
+:::
+
+### Multiple Selection
+
+Définissez `props.multiple = true` pour utiliser la sélection multiple.
+
+:::demo Lors de l'utilisation de la sélection multiple, toutes les balises sélectionnées seront affichées par défaut. Vous pouvez définir `collapse-tags = true` pour replier les balises sélectionnées.
+```html
+<div class="block">
+  <span class="demonstration">Afficher toutes les balises (par défaut)</span>
+  <el-cascader
+    :options="options"
+    :props="props"
+    clearable></el-cascader>
+</div>
+<div class="block">
+  <span class="demonstration">Réduire les balises</span>
+  <el-cascader
+    :options="options"
+    :props="props"
+    collapse-tags
+    clearable></el-cascader>
+</div>
+
+<script>
+  export default {
+    data() {
+      return {
+        props: { multiple: true },
+        options: [{
+          value: 1,
+          label: 'Asia',
+          children: [{
+            value: 2,
+            label: 'China',
+            children: [
+              { value: 3, label: 'Beijing' },
+              { value: 4, label: 'Shanghai' },
+              { value: 5, label: 'Hangzhou' }
+            ]
+          }, {
+            value: 6,
+            label: 'Japan',
+            children: [
+              { value: 7, label: 'Tokyo' },
+              { value: 8, label: 'Osaka' },
+              { value: 9, label: 'Kyoto' }
+            ]
+          }, {
+            value: 10,
+            label: 'Korea',
+            children: [
+              { value: 11, label: 'Seoul' },
+              { value: 12, label: 'Busan' },
+              { value: 13, label: 'Taegu' }
+            ]
+          }]
+        }, {
+          value: 14,
+          label: 'Europe',
+          children: [{
+            value: 15,
+            label: 'France',
+            children: [
+              { value: 16, label: 'Paris' },
+              { value: 17, label: 'Marseille' },
+              { value: 18, label: 'Lyon' }
+            ]
+          }, {
+            value: 19,
+            label: 'UK',
+            children: [
+              { value: 20, label: 'London' },
+              { value: 21, label: 'Birmingham' },
+              { value: 22, label: 'Manchester' }
+            ]
+          }]
+        }, {
+          value: 23,
+          label: 'North America',
+          children: [{
+            value: 24,
+            label: 'US',
+            children: [
+              { value: 25, label: 'New York' },
+              { value: 26, label: 'Los Angeles' },
+              { value: 27, label: 'Washington' }
+            ]
+          }, {
+            value: 28,
+            label: 'Canada',
+            children: [
+              { value: 29, label: 'Toronto' },
+              { value: 30, label: 'Montreal' },
+              { value: 31, label: 'Ottawa' }
+            ]
+          }]
+        }]
+      };
+    }
+  };
+</script>
+```
+:::
+
+
+### Select any level of options
+
+Dans la sélection simple, seuls les noeuds terminaux peuvent être coché, et dans la sélection multiple, coché les noeuds parents cochera les noeuds terminaux. Lorsque cette fonctionnalité est activée, les noeuds parents et enfants peuvent être dissociés et vous pouvez sélectionner n’importe quel niveau d’options.
+
+:::demo Définissez `props.checkStrictly = true` pour que l'état vérifié d'un noeud n'affecte pas ses noeuds parents et ses noeuds enfants. Vous pouvez ensuite sélectionner n'importe quel niveau d'options.
+```html
+<div class="block">
+  <span class="demonstration">Sélectionnez n'importe quel niveau d'options (Sélection unique)</span>
+  <el-cascader
+    :options="options"
+    :props="{ checkStrictly: true }"
+    clearable></el-cascader>
+</div>
+<div class="block">
+  <span class="demonstration">Sélectionnez n'importe quel niveau d'options (sélection multiple)</span>
+  <el-cascader
+    :options="options"
+    :props="{ multiple: true, checkStrictly: true }"
+    clearable></el-cascader>
+</div>
+
+<script>
+  export default {
+    data() {
+      return {
+        options: [{
+          value: 'guide',
+          label: 'Guide',
+          children: [{
+            value: 'disciplines',
+            label: 'Disciplines',
+            children: [{
+              value: 'consistency',
+              label: 'Consistency'
+            }, {
+              value: 'feedback',
+              label: 'Feedback'
+            }, {
+              value: 'efficiency',
+              label: 'Efficiency'
+            }, {
+              value: 'controllability',
+              label: 'Controllability'
+            }]
+          }, {
+            value: 'navigation',
+            label: 'Navigation',
+            children: [{
+              value: 'side nav',
+              label: 'Side Navigation'
+            }, {
+              value: 'top nav',
+              label: 'Top Navigation'
+            }]
+          }]
+        }, {
+          value: 'component',
+          label: 'Component',
+          children: [{
+            value: 'basic',
+            label: 'Basic',
+            children: [{
+              value: 'layout',
+              label: 'Layout'
+            }, {
+              value: 'color',
+              label: 'Color'
+            }, {
+              value: 'typography',
+              label: 'Typography'
+            }, {
+              value: 'icon',
+              label: 'Icon'
+            }, {
+              value: 'button',
+              label: 'Button'
+            }]
+          }, {
+            value: 'form',
+            label: 'Form',
+            children: [{
+              value: 'radio',
+              label: 'Radio'
+            }, {
+              value: 'checkbox',
+              label: 'Checkbox'
+            }, {
+              value: 'input',
+              label: 'Input'
+            }, {
+              value: 'input-number',
+              label: 'InputNumber'
+            }, {
+              value: 'select',
+              label: 'Select'
+            }, {
+              value: 'cascader',
+              label: 'Cascader'
+            }, {
+              value: 'switch',
+              label: 'Switch'
+            }, {
+              value: 'slider',
+              label: 'Slider'
+            }, {
+              value: 'time-picker',
+              label: 'TimePicker'
+            }, {
+              value: 'date-picker',
+              label: 'DatePicker'
+            }, {
+              value: 'datetime-picker',
+              label: 'DateTimePicker'
+            }, {
+              value: 'upload',
+              label: 'Upload'
+            }, {
+              value: 'rate',
+              label: 'Rate'
+            }, {
+              value: 'form',
+              label: 'Form'
+            }]
+          }, {
+            value: 'data',
+            label: 'Data',
+            children: [{
+              value: 'table',
+              label: 'Table'
+            }, {
+              value: 'tag',
+              label: 'Tag'
+            }, {
+              value: 'progress',
+              label: 'Progress'
+            }, {
+              value: 'tree',
+              label: 'Tree'
+            }, {
+              value: 'pagination',
+              label: 'Pagination'
+            }, {
+              value: 'badge',
+              label: 'Badge'
+            }]
+          }, {
+            value: 'notice',
+            label: 'Notice',
+            children: [{
+              value: 'alert',
+              label: 'Alert'
+            }, {
+              value: 'loading',
+              label: 'Loading'
+            }, {
+              value: 'message',
+              label: 'Message'
+            }, {
+              value: 'message-box',
+              label: 'MessageBox'
+            }, {
+              value: 'notification',
+              label: 'Notification'
+            }]
+          }, {
+            value: 'navigation',
+            label: 'Navigation',
+            children: [{
+              value: 'menu',
+              label: 'NavMenu'
+            }, {
+              value: 'tabs',
+              label: 'Tabs'
+            }, {
+              value: 'breadcrumb',
+              label: 'Breadcrumb'
+            }, {
+              value: 'dropdown',
+              label: 'Dropdown'
+            }, {
+              value: 'steps',
+              label: 'Steps'
+            }]
+          }, {
+            value: 'others',
+            label: 'Others',
+            children: [{
+              value: 'dialog',
+              label: 'Dialog'
+            }, {
+              value: 'tooltip',
+              label: 'Tooltip'
+            }, {
+              value: 'popover',
+              label: 'Popover'
+            }, {
+              value: 'card',
+              label: 'Card'
+            }, {
+              value: 'carousel',
+              label: 'Carousel'
+            }, {
+              value: 'collapse',
+              label: 'Collapse'
+            }]
+          }]
+        }, {
+          value: 'resource',
+          label: 'Resource',
+          children: [{
+            value: 'axure',
+            label: 'Axure Components'
+          }, {
+            value: 'sketch',
+            label: 'Sketch Templates'
+          }, {
+            value: 'docs',
+            label: 'Design Documentation'
+          }]
+        }]
+      };
+    }
+  };
+</script>
+```
+:::
+
+### Dynamic loading
+
+Charge dynamiquement ses noeuds enfants lorsque un noeud est sélectionné.
+
+:::demo Définissez `lazy = true` pour utiliser le chargement dynamique. Vous devez Spécifier comment charger la source de données avec` lazyload`. Il existe deux paramètres de `lazyload`, le premier paramètre` node` est le noeud sur lequel l'utilisateur a cliqué, et `resolution` est un callback indiquant que le chargement est terminé et qu'il doit être appelé. Pour afficher le statut du noeud plus précisément, vous pouvez ajouter un champ `leaf` (modifiable par` props.leaf`) pour indiquer s'il s'agit d'un noeud feuille. Sinon, il sera déduit par ses noeuds enfants.
+```html
+<el-cascader :props="props"></el-cascader>
+
+<script>
+  let id = 0;
+
+  export default {
+    data() {
+      return {
+        props: {
+          lazy: true,
+          lazyLoad (node, resolve) {
+            const { level } = node;
+            setTimeout(() => {
+              const nodes = Array.from({ length: level + 1 })
+                .map(item => ({
+                  value: ++id,
+                  label: `Option - ${id}`,
+                  leaf: level >= 2
+                }));
+              // Appelez le callback `resolve` pour renvoyer les données des noeuds enfants et indiquer que le chargement est terminé.
+              resolve(nodes);
+            }, 1000);
+          }
+        }
+      };
+    }
+  };
+</script>
+```
+:::
+
+### Filterable
+
+Rechercher et sélectionner des options avec un mot clé.
+
+:::demo Ajouter `filterable` à` el-cascader` permet le filtrage. Cascader recherchera les noeuds dont l'étiquette ou l'étiquette du parent (selon `show-all-levels`) inclut le mot-clé input. Bien sûr, vous pouvez personnaliser la logique de recherche en utilisant `filter-method` qui accepte une fonction, le premier paramètre est `node`, le second est `keyword` et doit renvoyer une valeur booléenne indiquant si le résultat est positif.
+```html
+<div class="block">
+  <span class="demonstration">Filtrable (Sélection unique)</span>
+  <el-cascader
+    placeholder="Try searchingL Guide"
+    :options="options"
+    filterable></el-cascader>
+</div>
+<div class="block">
+  <span class="demonstration">Filtrable (Sélection multiple)</span>
+  <el-cascader
+    placeholder="Try searchingL Guide"
+    :options="options"
+    :props="{ multiple: true }"
+    filterable></el-cascader>
+</div>
+
+<script>
+  export default {
+    data() {
+      return {
+        options: [{
+          value: 'guide',
+          label: 'Guide',
+          children: [{
+            value: 'disciplines',
+            label: 'Disciplines',
+            children: [{
+              value: 'consistency',
+              label: 'Consistency'
+            }, {
+              value: 'feedback',
+              label: 'Feedback'
+            }, {
+              value: 'efficiency',
+              label: 'Efficiency'
+            }, {
+              value: 'controllability',
+              label: 'Controllability'
+            }]
+          }, {
+            value: 'navigation',
+            label: 'Navigation',
+            children: [{
+              value: 'side nav',
+              label: 'Side Navigation'
+            }, {
+              value: 'top nav',
+              label: 'Top Navigation'
+            }]
+          }]
+        }, {
+          value: 'component',
+          label: 'Component',
+          children: [{
+            value: 'basic',
+            label: 'Basic',
+            children: [{
+              value: 'layout',
+              label: 'Layout'
+            }, {
+              value: 'color',
+              label: 'Color'
+            }, {
+              value: 'typography',
+              label: 'Typography'
+            }, {
+              value: 'icon',
+              label: 'Icon'
+            }, {
+              value: 'button',
+              label: 'Button'
+            }]
+          }, {
+            value: 'form',
+            label: 'Form',
+            children: [{
+              value: 'radio',
+              label: 'Radio'
+            }, {
+              value: 'checkbox',
+              label: 'Checkbox'
+            }, {
+              value: 'input',
+              label: 'Input'
+            }, {
+              value: 'input-number',
+              label: 'InputNumber'
+            }, {
+              value: 'select',
+              label: 'Select'
+            }, {
+              value: 'cascader',
+              label: 'Cascader'
+            }, {
+              value: 'switch',
+              label: 'Switch'
+            }, {
+              value: 'slider',
+              label: 'Slider'
+            }, {
+              value: 'time-picker',
+              label: 'TimePicker'
+            }, {
+              value: 'date-picker',
+              label: 'DatePicker'
+            }, {
+              value: 'datetime-picker',
+              label: 'DateTimePicker'
+            }, {
+              value: 'upload',
+              label: 'Upload'
+            }, {
+              value: 'rate',
+              label: 'Rate'
+            }, {
+              value: 'form',
+              label: 'Form'
+            }]
+          }, {
+            value: 'data',
+            label: 'Data',
+            children: [{
+              value: 'table',
+              label: 'Table'
+            }, {
+              value: 'tag',
+              label: 'Tag'
+            }, {
+              value: 'progress',
+              label: 'Progress'
+            }, {
+              value: 'tree',
+              label: 'Tree'
+            }, {
+              value: 'pagination',
+              label: 'Pagination'
+            }, {
+              value: 'badge',
+              label: 'Badge'
+            }]
+          }, {
+            value: 'notice',
+            label: 'Notice',
+            children: [{
+              value: 'alert',
+              label: 'Alert'
+            }, {
+              value: 'loading',
+              label: 'Loading'
+            }, {
+              value: 'message',
+              label: 'Message'
+            }, {
+              value: 'message-box',
+              label: 'MessageBox'
+            }, {
+              value: 'notification',
+              label: 'Notification'
+            }]
+          }, {
+            value: 'navigation',
+            label: 'Navigation',
+            children: [{
+              value: 'menu',
+              label: 'NavMenu'
+            }, {
+              value: 'tabs',
+              label: 'Tabs'
+            }, {
+              value: 'breadcrumb',
+              label: 'Breadcrumb'
+            }, {
+              value: 'dropdown',
+              label: 'Dropdown'
+            }, {
+              value: 'steps',
+              label: 'Steps'
+            }]
+          }, {
+            value: 'others',
+            label: 'Others',
+            children: [{
+              value: 'dialog',
+              label: 'Dialog'
+            }, {
+              value: 'tooltip',
+              label: 'Tooltip'
+            }, {
+              value: 'popover',
+              label: 'Popover'
+            }, {
+              value: 'card',
+              label: 'Card'
+            }, {
+              value: 'carousel',
+              label: 'Carousel'
+            }, {
+              value: 'collapse',
+              label: 'Collapse'
+            }]
+          }]
+        }, {
+          value: 'resource',
+          label: 'Resource',
+          children: [{
+            value: 'axure',
+            label: 'Axure Components'
+          }, {
+            value: 'sketch',
+            label: 'Sketch Templates'
+          }, {
+            value: 'docs',
+            label: 'Design Documentation'
+          }]
+        }]
+      };
+    }
+  };
+</script>
+```
+:::
+
+### Custom option content
+
+Vous pouvez personnaliser le contenu du noeud cascader.
+
+:::demo Vous pouvez personnaliser le contenu du noeud cascader avec `scoped slot`. Vous aurez accès à `node` et` data` dans la portée, correspondant respectivement à l'objet Node et aux données de noeud du noeud actuel.
+```html
+<el-cascader :options="options">
+  <template slot-scope="{ node, data }">
+    <span>{{ data.label }}</span>
+    <span v-if="!node.isLeaf"> ({{ data.children.length }}) </span>
+  </template>
+</el-cascader>
+
+<script>
+  export default {
+    data() {
+      return {
+        options: [{
+          value: 'guide',
+          label: 'Guide',
+          children: [{
+            value: 'disciplines',
+            label: 'Disciplines',
+            children: [{
+              value: 'consistency',
+              label: 'Consistency'
+            }, {
+              value: 'feedback',
+              label: 'Feedback'
+            }, {
+              value: 'efficiency',
+              label: 'Efficiency'
+            }, {
+              value: 'controllability',
+              label: 'Controllability'
+            }]
+          }, {
+            value: 'navigation',
+            label: 'Navigation',
+            children: [{
+              value: 'side nav',
+              label: 'Side Navigation'
+            }, {
+              value: 'top nav',
+              label: 'Top Navigation'
+            }]
+          }]
+        }, {
+          value: 'component',
+          label: 'Component',
+          children: [{
+            value: 'basic',
+            label: 'Basic',
+            children: [{
+              value: 'layout',
+              label: 'Layout'
+            }, {
+              value: 'color',
+              label: 'Color'
+            }, {
+              value: 'typography',
+              label: 'Typography'
+            }, {
+              value: 'icon',
+              label: 'Icon'
+            }, {
+              value: 'button',
+              label: 'Button'
+            }]
+          }, {
+            value: 'form',
+            label: 'Form',
+            children: [{
+              value: 'radio',
+              label: 'Radio'
+            }, {
+              value: 'checkbox',
+              label: 'Checkbox'
+            }, {
+              value: 'input',
+              label: 'Input'
+            }, {
+              value: 'input-number',
+              label: 'InputNumber'
+            }, {
+              value: 'select',
+              label: 'Select'
+            }, {
+              value: 'cascader',
+              label: 'Cascader'
+            }, {
+              value: 'switch',
+              label: 'Switch'
+            }, {
+              value: 'slider',
+              label: 'Slider'
+            }, {
+              value: 'time-picker',
+              label: 'TimePicker'
+            }, {
+              value: 'date-picker',
+              label: 'DatePicker'
+            }, {
+              value: 'datetime-picker',
+              label: 'DateTimePicker'
+            }, {
+              value: 'upload',
+              label: 'Upload'
+            }, {
+              value: 'rate',
+              label: 'Rate'
+            }, {
+              value: 'form',
+              label: 'Form'
+            }]
+          }, {
+            value: 'data',
+            label: 'Data',
+            children: [{
+              value: 'table',
+              label: 'Table'
+            }, {
+              value: 'tag',
+              label: 'Tag'
+            }, {
+              value: 'progress',
+              label: 'Progress'
+            }, {
+              value: 'tree',
+              label: 'Tree'
+            }, {
+              value: 'pagination',
+              label: 'Pagination'
+            }, {
+              value: 'badge',
+              label: 'Badge'
+            }]
+          }, {
+            value: 'notice',
+            label: 'Notice',
+            children: [{
+              value: 'alert',
+              label: 'Alert'
+            }, {
+              value: 'loading',
+              label: 'Loading'
+            }, {
+              value: 'message',
+              label: 'Message'
+            }, {
+              value: 'message-box',
+              label: 'MessageBox'
+            }, {
+              value: 'notification',
+              label: 'Notification'
+            }]
+          }, {
+            value: 'navigation',
+            label: 'Navigation',
+            children: [{
+              value: 'menu',
+              label: 'NavMenu'
+            }, {
+              value: 'tabs',
+              label: 'Tabs'
+            }, {
+              value: 'breadcrumb',
+              label: 'Breadcrumb'
+            }, {
+              value: 'dropdown',
+              label: 'Dropdown'
+            }, {
+              value: 'steps',
+              label: 'Steps'
+            }]
+          }, {
+            value: 'others',
+            label: 'Others',
+            children: [{
+              value: 'dialog',
+              label: 'Dialog'
+            }, {
+              value: 'tooltip',
+              label: 'Tooltip'
+            }, {
+              value: 'popover',
+              label: 'Popover'
+            }, {
+              value: 'card',
+              label: 'Card'
+            }, {
+              value: 'carousel',
+              label: 'Carousel'
+            }, {
+              value: 'collapse',
+              label: 'Collapse'
+            }]
+          }]
+        }, {
+          value: 'resource',
+          label: 'Resource',
+          children: [{
+            value: 'axure',
+            label: 'Axure Components'
+          }, {
+            value: 'sketch',
+            label: 'Sketch Templates'
+          }, {
+            value: 'docs',
+            label: 'Design Documentation'
+          }]
+        }]
+      }
+    }
+  }
+</script>
+```
+:::
+
+### Cascader panel
+
+`CascaderPanel` est le composant principal de` Cascader`. Il comporte diverses fonctionnalités telles que la sélection unique, la sélection multiple, le chargement dynamique, etc.
+
+:::demo Tout comme `el-cascader`, vous pouvez définir des options alternatives par `options`, et activer d'autres fonctionnalités par `props`, voir le formulaire d'API ci-dessous pour plus de détails.
+```html
+<el-cascader-panel :options="options"></el-cascader-panel>
+
+<script>
+  export default {
+    data() {
+      return {
+        options: [{
+          value: 'guide',
+          label: 'Guide',
+          children: [{
+            value: 'disciplines',
+            label: 'Disciplines',
+            children: [{
+              value: 'consistency',
+              label: 'Consistency'
+            }, {
+              value: 'feedback',
+              label: 'Feedback'
+            }, {
+              value: 'efficiency',
+              label: 'Efficiency'
+            }, {
+              value: 'controllability',
+              label: 'Controllability'
+            }]
+          }, {
+            value: 'navigation',
+            label: 'Navigation',
+            children: [{
+              value: 'side nav',
+              label: 'Side Navigation'
+            }, {
+              value: 'top nav',
+              label: 'Top Navigation'
+            }]
+          }]
+        }, {
+          value: 'component',
+          label: 'Component',
+          children: [{
+            value: 'basic',
+            label: 'Basic',
+            children: [{
+              value: 'layout',
+              label: 'Layout'
+            }, {
+              value: 'color',
+              label: 'Color'
+            }, {
+              value: 'typography',
+              label: 'Typography'
+            }, {
+              value: 'icon',
+              label: 'Icon'
+            }, {
+              value: 'button',
+              label: 'Button'
+            }]
+          }, {
+            value: 'form',
+            label: 'Form',
+            children: [{
+              value: 'radio',
+              label: 'Radio'
+            }, {
+              value: 'checkbox',
+              label: 'Checkbox'
+            }, {
+              value: 'input',
+              label: 'Input'
+            }, {
+              value: 'input-number',
+              label: 'InputNumber'
+            }, {
+              value: 'select',
+              label: 'Select'
+            }, {
+              value: 'cascader',
+              label: 'Cascader'
+            }, {
+              value: 'switch',
+              label: 'Switch'
+            }, {
+              value: 'slider',
+              label: 'Slider'
+            }, {
+              value: 'time-picker',
+              label: 'TimePicker'
+            }, {
+              value: 'date-picker',
+              label: 'DatePicker'
+            }, {
+              value: 'datetime-picker',
+              label: 'DateTimePicker'
+            }, {
+              value: 'upload',
+              label: 'Upload'
+            }, {
+              value: 'rate',
+              label: 'Rate'
+            }, {
+              value: 'form',
+              label: 'Form'
+            }]
+          }, {
+            value: 'data',
+            label: 'Data',
+            children: [{
+              value: 'table',
+              label: 'Table'
+            }, {
+              value: 'tag',
+              label: 'Tag'
+            }, {
+              value: 'progress',
+              label: 'Progress'
+            }, {
+              value: 'tree',
+              label: 'Tree'
+            }, {
+              value: 'pagination',
+              label: 'Pagination'
+            }, {
+              value: 'badge',
+              label: 'Badge'
+            }]
+          }, {
+            value: 'notice',
+            label: 'Notice',
+            children: [{
+              value: 'alert',
+              label: 'Alert'
+            }, {
+              value: 'loading',
+              label: 'Loading'
+            }, {
+              value: 'message',
+              label: 'Message'
+            }, {
+              value: 'message-box',
+              label: 'MessageBox'
+            }, {
+              value: 'notification',
+              label: 'Notification'
+            }]
+          }, {
+            value: 'navigation',
+            label: 'Navigation',
+            children: [{
+              value: 'menu',
+              label: 'NavMenu'
+            }, {
+              value: 'tabs',
+              label: 'Tabs'
+            }, {
+              value: 'breadcrumb',
+              label: 'Breadcrumb'
+            }, {
+              value: 'dropdown',
+              label: 'Dropdown'
+            }, {
+              value: 'steps',
+              label: 'Steps'
+            }]
+          }, {
+            value: 'others',
+            label: 'Others',
+            children: [{
+              value: 'dialog',
+              label: 'Dialog'
+            }, {
+              value: 'tooltip',
+              label: 'Tooltip'
+            }, {
+              value: 'popover',
+              label: 'Popover'
+            }, {
+              value: 'card',
+              label: 'Card'
+            }, {
+              value: 'carousel',
+              label: 'Carousel'
+            }, {
+              value: 'collapse',
+              label: 'Collapse'
+            }]
+          }]
+        }, {
+          value: 'resource',
+          label: 'Resource',
+          children: [{
+            value: 'axure',
+            label: 'Axure Components'
+          }, {
+            value: 'sketch',
+            label: 'Sketch Templates'
+          }, {
+            value: 'docs',
+            label: 'Design Documentation'
+          }]
+        }]
+      };
+    }
+  };
+</script>
+```
+:::
+
+### Cascader Attributs
+| Attribut | Description | Type  | Valeurs acceptées | Défaut |
+|---------- |-------- |---------- |-------------  |-------- |
+| value / v-model | Valeur de liaison | - | — | — |
+| options | Les données des options，la clé de `value` et `label` peuvent être personnalisées par `Props`.| array | — | — |
+| props | Options de configuration, voir le tableau suivant. | object | — | — |
+| size | Taille de l'entrée | string | medium / small / mini | — |
+| placeholder | Placeholder de l'input | string | — | Select |
+| disabled | Si Cascader est désactivé | boolean | — | false |
+| clearable | Si la valeur sélectionnée peut être effacée | boolean | — | true |
+| show-all-levels | Afficher ou non tous les niveaux de la valeur sélectionnée dans l'entrée | boolean | — | true |
+| collapse-tags | Réduire ou non les balises en mode de sélection multiple | boolean | - | false |
+| separator | Option label separator | string | — | ' / ' |
+| filterable | Si les options peuvent être recherchées | boolean | — | true |
+| filter-method | Personnaliser la logique de recherche, le premier paramètre est `node`, le second est `keyword`, et doit renvoyer une valeur booléenne indiquant si le résultat est positif. | function(node, keyword) | - | - |
+| debounce | Délai de réponse lors de la saisie du mot clé de filtre, en millisecondes | number | — | 300 |
+| before-filter | Hook fonction avant de filtrer avec la valeur à filtrer en tant que paramètre. Si `false` est renvoyé ou si une `Promise` est renvoyée puis rejetée, le filtrage sera annulé | function(value) | — | — |
+| popper-class | Nom de classe personnalisé pour la liste déroulante de Cascader   | string | —  | — |
+
+### Cascader Events
+| Event Name | Description | Paramètres |
+|---------- |-------- |---------- |
+| change | Se déclenche lorsque la valeur de liaison change | value |
+| expand-change | Se déclenche lorsque l'option d'agrandissement change | an array of the expanding node's parent nodes |
+| blur | Se déclenche lorsque Cascader blurs | (event: Event) |
+| focus | Se déclenche lorsque Cascader à le focus | (event: Event) |
+| visible-change | Se déclenche lorsque le menu déroulant apparaît / disparaît | vrai quand il apparaît, et faux sinon |
+| remove-tag | Se déclenche lors de la suppression d'une balise en mode de sélection multiple | la valeur de la balise qui est supprimée |
+
+### Cascader Methods
+| Method Name | Description | Parameters |
+| ---- | ---- | ---- |
+| getCheckedNodes | get an array of currently selected node | (leafOnly) whether only return the leaf checked nodes, default is `false` |
+
+### Cascader Slots
+| Slot Name | Description |
+|---------|-------------|
+| - | Le contenu personnalisé du noeud cascader, le paramètre est { node, data }, qui sont respectivement les objets de noeud et les données de noeud actuels. |
+| empty  | Contenu quand il n'y a pas d'options correspondantes. |
+
+### CascaderPanel Attributes
+| Attribut | Description | Type  | Valeurs acceptées | Défaut |
+|---------- |-------- |---------- |-------------  |-------- |
+| value / v-model | Baleur de liaison | - | — | — |
+| options | Les données des options, la clé de `value` et `label` peuvent être personnalisées par `Props`.| array | — | — |
+| props | Options de configuration, voir le tableau suivant. | object | — | — |
+
+### CascaderPanel Events
+| Event Name | Description | Paramètres |
+|---------- |-------- |---------- |
+| change | Se déclenche lorsque la valeur de liaison change | value |
+| expand-change | Se déclenche lorsque l'option d'agrandissement change | an array of the expanding node's parent nodes |
+
+### CascaderPanel Methods
+| Method Name | Description | Parameters |
+| ---- | ---- | ---- |
+| getCheckedNodes | get an array of currently selected node | (leafOnly) whether only return the leaf checked nodes, default is `false` |
+| clearCheckedNodes | clear checked nodes | - |
+
+### CascaderPanel Slots
+| Slot Name | Description |
+|---------|-------------|
+| - | Le contenu personnalisé du noeud cascader, le paramètre est { node, data }, qui sont respectivement les objets de noeud et les données de noeud actuels. |
+
+### Props
+| Attribute | Description | Type  | Valeurs acceptées | Défaut |
+| -------- | ----------------- | ------ | ------ | ------ |
+| expandTrigger | Mode de déclenchement des options de développement | string | click / hover | 'click' |
+| multiple | Si la sélection multiple est activée | boolean | - | false |
+| checkStrictly | Si l'état coché d'un noeud n'affecte pas ses noeuds parents et enfants | boolean | - | false |
+| emitPath | Lorsque les noeuds cochés changent, émet ou non un tableau du chemin du noeud. Si la valeur est false, n'émet que la valeur du noeud. | boolean | - | true |
+| lazy | S'il faut charger dynamiquement les noeuds enfants, utiliser avec l'attribut `lazyload` | boolean | - | false |
+| lazyLoad | Méthode de chargement de données de noeuds enfants, ne fonctionne que lorsque `lazy` est vrai | function(node, resolve) | - | - |
+| value    | Spécifie quelle clé de l'objet noeud est utilisée comme valeur du noeud | string | — | 'value' |
+| label    | Spécifie quelle clé de l'objet noeud est utilisée comme label du noeud | string | — | 'label' |
+| children | Spécifie quelle clé de l'objet noeud est utilisée en tant qu'enfant du noeud | string | — | 'children' |
+| disabled | Spécifie quelle clé de l'objet noeud est utilisée comme noeud désactivé | string | — | 'disabled' |
+| leaf     | Spécifie quelle clé de l'objet est noeud utilisée comme champ feuille du noeud | string | — | 'leaf' |
diff --git a/examples/docs/fr-FR/checkbox-img-button.md b/examples/docs/fr-FR/checkbox-img-button.md
new file mode 100644
index 00000000000..17a74d94499
--- /dev/null
+++ b/examples/docs/fr-FR/checkbox-img-button.md
@@ -0,0 +1 @@
+## CheckboxImgButton
diff --git a/examples/docs/fr-FR/checkbox.md b/examples/docs/fr-FR/checkbox.md
new file mode 100644
index 00000000000..ab3f7237b2e
--- /dev/null
+++ b/examples/docs/fr-FR/checkbox.md
@@ -0,0 +1,284 @@
+## Checkbox
+
+Un groupe d'options à choix multiples.
+
+### Usage
+
+Checkbox peut être utilisé seul pour switcher entre deux états.
+
+:::demo Définissez `v-model` (variable liée) dans `el-checkbox`. La valeur par défaut est un `Boolean` pour une seule `checkbox` et devient `true` quand elle est sélectionnée. Le contenu à l'intérieur de la balise `el-checkbox` deviendra le label du bouton de la checkbox.
+
+```html
+<template>
+  <!-- `checked` should be true or false -->
+  <el-checkbox v-model="checked">Option</el-checkbox>
+</template>
+<script>
+  export default {
+    data() {
+      return {
+        checked: true
+      };
+    }
+  };
+</script>
+```
+:::
+
+### Désactivation
+
+La checkbox peut être désactivée.
+
+:::demo Ajouter l'attribut `disabled`.
+
+```html
+<template>
+  <el-checkbox v-model="checked1" disabled>Option</el-checkbox>
+  <el-checkbox v-model="checked2" disabled>Option</el-checkbox>
+</template>
+<script>
+  export default {
+    data() {
+      return {
+        checked1: false,
+        checked2: true
+      };
+    }
+  };
+</script>
+```
+:::
+
+### Checkbox groupées
+
+Utile pour grouper des checkbox, indiquant si une option est sélectionnée en vérifiant la case en question.
+
+:::demo L'élément `checkbox-group` peut gérer plusieurs checkbox d'un groupe en utilisant `v-model`, qui sera un `Array`. Dans l'élément `el-checkbox`, `label` est la valeur de la checkbox. S'il n'y a aucun contenu dans la balise, `label` sera également la description de la checkbox. `label` correspond aussi aux valeurs des éléments dans le tableau. Il est sélectionné si la valeur spécifiée existe dans le tableau, et vice-versa.
+
+```html
+<template>
+  <el-checkbox-group v-model="checkList">
+    <el-checkbox label="Option A"></el-checkbox>
+    <el-checkbox label="Option B"></el-checkbox>
+    <el-checkbox label="Option C"></el-checkbox>
+    <el-checkbox label="Désactivée" disabled></el-checkbox>
+    <el-checkbox label="Sélectionnée et désactivée" disabled></el-checkbox>
+  </el-checkbox-group>
+</template>
+
+<script>
+  export default {
+    data () {
+      return {
+        checkList: ['selected and disabled','Option A']
+      };
+    }
+  };
+</script>
+```
+:::
+
+### Indéterminée
+
+La propriété `indeterminate` permet de réaliser un effet "Sélectionner tout".
+
+:::demo
+
+```html
+<template>
+  <el-checkbox :indeterminate="isIndeterminate" v-model="checkAll" @change="handleCheckAllChange">Sélectionner tout</el-checkbox>
+  <div style="margin: 15px 0;"></div>
+  <el-checkbox-group v-model="checkedCities" @change="handleCheckedCitiesChange">
+    <el-checkbox v-for="city in cities" :label="city" :key="city">{{city}}</el-checkbox>
+  </el-checkbox-group>
+</template>
+<script>
+  const cityOptions = ['Shanghai', 'Beijing', 'Guangzhou', 'Shenzhen'];
+  export default {
+    data() {
+      return {
+        checkAll: false,
+        checkedCities: ['Shanghai', 'Beijing'],
+        cities: cityOptions,
+        isIndeterminate: true
+      };
+    },
+    methods: {
+      handleCheckAllChange(val) {
+        this.checkedCities = val ? cityOptions : [];
+        this.isIndeterminate = false;
+      },
+      handleCheckedCitiesChange(value) {
+        let checkedCount = value.length;
+        this.checkAll = checkedCount === this.cities.length;
+        this.isIndeterminate = checkedCount > 0 && checkedCount < this.cities.length;
+      }
+    }
+  };
+</script>
+```
+:::
+
+### Minimum / Maximum d'éléments sélectionnés
+
+Les propriétés `min` et `max` permettent de limiter la quantité d'éléments sélectionnés.
+
+:::demo
+
+```html
+<template>
+  <el-checkbox-group
+    v-model="checkedCities"
+    :min="1"
+    :max="2">
+    <el-checkbox v-for="city in cities" :label="city" :key="city">{{city}}</el-checkbox>
+  </el-checkbox-group>
+</template>
+<script>
+  const cityOptions = ['Shanghai', 'Beijing', 'Guangzhou', 'Shenzhen'];
+  export default {
+    data() {
+      return {
+        checkedCities: ['Shanghai', 'Beijing'],
+        cities: cityOptions
+      };
+    }
+  };
+</script>
+```
+:::
+
+### Style bouton
+
+Des checkbox avec une apparence de bouton.
+
+:::demo Il vous suffit de changer `el-checkbox` en `el-checkbox-button`. Il existe aussi un attribut `size`.
+```html
+<template>
+  <div>
+    <el-checkbox-group v-model="checkboxGroup1">
+      <el-checkbox-button v-for="city in cities" :label="city" :key="city">{{city}}</el-checkbox-button>
+    </el-checkbox-group>
+  </div>
+  <div style="margin-top: 20px">
+    <el-checkbox-group v-model="checkboxGroup2" size="medium">
+      <el-checkbox-button v-for="city in cities" :label="city" :key="city">{{city}}</el-checkbox-button>
+    </el-checkbox-group>
+  </div>
+  <div style="margin-top: 20px">
+    <el-checkbox-group v-model="checkboxGroup3" size="small">
+      <el-checkbox-button v-for="city in cities" :label="city" :disabled="city === 'Beijing'" :key="city">{{city}}</el-checkbox-button>
+    </el-checkbox-group>
+  </div>
+  <div style="margin-top: 20px">
+    <el-checkbox-group v-model="checkboxGroup4" size="mini" disabled>
+      <el-checkbox-button v-for="city in cities" :label="city" :key="city">{{city}}</el-checkbox-button>
+    </el-checkbox-group>
+  </div>
+</template>
+<script>
+  const cityOptions = ['Shanghai', 'Beijing', 'Guangzhou', 'Shenzhen'];
+
+  export default {
+    data () {
+      return {
+        checkboxGroup1: ['Shanghai'],
+        checkboxGroup2: ['Shanghai'],
+        checkboxGroup3: ['Shanghai'],
+        checkboxGroup4: ['Shanghai'],
+        cities: cityOptions
+      };
+    }
+  }
+</script>
+```
+:::
+
+### Bordures
+
+:::demo L'attribut `border` ajoute une bordure aux checkbox.
+```html
+<template>
+  <div>
+    <el-checkbox v-model="checked1" label="Option1" border></el-checkbox>
+    <el-checkbox v-model="checked2" label="Option2" border></el-checkbox>
+  </div>
+  <div style="margin-top: 20px">
+    <el-checkbox v-model="checked3" label="Option1" border size="medium"></el-checkbox>
+    <el-checkbox v-model="checked4" label="Option2" border size="medium"></el-checkbox>
+  </div>
+  <div style="margin-top: 20px">
+    <el-checkbox-group v-model="checkboxGroup1" size="small">
+      <el-checkbox label="Option1" border></el-checkbox>
+      <el-checkbox label="Option2" border disabled></el-checkbox>
+    </el-checkbox-group>
+  </div>
+  <div style="margin-top: 20px">
+    <el-checkbox-group v-model="checkboxGroup2" size="mini" disabled>
+      <el-checkbox label="Option1" border></el-checkbox>
+      <el-checkbox label="Option2" border></el-checkbox>
+    </el-checkbox-group>
+  </div>
+</template>
+
+<script>
+  export default {
+    data () {
+      return {
+        checked1: true,
+        checked2: false,
+        checked3: false,
+        checked4: true,
+        checkboxGroup1: [],
+        checkboxGroup2: []
+      };
+    }
+  }
+</script>
+```
+:::
+
+### Attributs Checkbox
+| Attribut      | Description         | Type    | Options                         | Défaut|
+|---------- |-------- |---------- |-------------  |-------- |
+| value / v-model | La valeur liée. | string / number / boolean | — | — |
+| label     | Valeur de la checkbox quand utilisée dans un `checkbox-group`.   | string / number / boolean   |       —        |     —    |
+| true-label | Valeur de la checkbox si cochée.   | string / number    |       —        |     —    |
+| false-label | Valeur de la checkbox si non cochée.   | string / number    |      —         |     —    |
+| disabled  | Désactive la checkbox.   | boolean   |  — | false   |
+| border  | Ajoute une bordure à la checkbox.  | boolean   | — | false   |
+| size  | taille de la checkbox, ne marche que si `border` est 'true'  | string  | medium / small / mini | — |
+| name | Attribut 'name' natif. | string    |      —         |     —    |
+| checked  | Si la checkbox est cochée.   | boolean   |  — | false   |
+| indeterminate  | Identique à `indeterminate` dans les checkbox natives. | boolean   |  — | false   |
+
+### Évènements Checkbox
+| Nom | Description | Paramètres |
+|---------- |-------- |---------- |
+| change  | Se déclenche quand la valeur change. | La nouvelle valeur |
+
+### Attributs Checkbox-group
+| Attribut      | Description         | Type    | Options                         | Défaut|
+|---------- |-------- |---------- |-------------  |-------- |
+| value / v-model | La valeur liée. | array | — | — |
+|size | Taille des checkbox-boutons ou des checkbox avec bordure. | string | medium / small / mini | — |
+| disabled  | Si les checkbox imbriquées sont désactivées. | boolean   | — | false   |
+| min     | Nombre minimum de checkbox cochées.   | number    |       —        |     —    |
+| max     | Nombre maximum de checkbox cochées.   | number    |       —        |     —    |
+|text-color | Couleur de police quand le bouton est actif. | string   | — | #ffffff   |
+|fill  | Couleur de la bordure et du fond quand le bouton est actif. | string   | — | #2460e0   |
+
+### Évènements Checkbox-group
+| Nom | Description | Paramètres |
+|---------- |-------- |---------- |
+| change  | Se déclenche quand la valeur change. | La nouvelle valeur |
+
+### Attributs Checkbox-button
+| Attribut      | Description         | Type    | Options                         | Défaut|
+|---------- |-------- |---------- |-------------  |-------- |
+| label     | Valeur de la checkbox quand utilisée dans un `checkbox-group` | string / number / boolean  |       —        |     —    |
+| true-label | Valeur de la checkbox si cochée. | string / number | — |     —    |
+| false-label | Valeur de la checkbox si non cochée. | string / number    |      —         |     —    |
+| disabled  | Si la checkbox est désactivée. | boolean   |  — | false   |
+| name | Attribut 'name' natif. | string    |      —         |     —    |
+| checked  | Si la checkbox est cochée. | boolean   |  — | false   |
diff --git a/examples/docs/fr-FR/collapse.md b/examples/docs/fr-FR/collapse.md
new file mode 100644
index 00000000000..e0bab0d2659
--- /dev/null
+++ b/examples/docs/fr-FR/collapse.md
@@ -0,0 +1,131 @@
+## Collapse
+
+Utilisez Collapse pour stocker du contenu.
+
+### Usage
+
+Vous pouvez agrandir plusieurs panneaux.
+
+:::demo
+```html
+<el-collapse v-model="activeNames" @change="handleChange">
+  <el-collapse-item title="Cohérence" name="1">
+    <div>Cohérence avec la vraie vie: en accord avec les processus habituels de la vie réelle, conforme aux langages et habitudes des utilisateurs;</div>
+    <div>Cohérence au sein de l'interface: tout les éléments doivent être cohérents entre eux et suivre les mêmes règles, par exemple: le style global, les icônes, la position des éléments, etc.</div>
+  </el-collapse-item>
+  <el-collapse-item title="Feedback" name="2">
+    <div>Retour d'expérience: permets aux utilisateurs de percevoir clairement leurs opérations par le biais d'animations et d'effets interactifs.</div>
+    <div>Retour visuel: reflète l'état actuel de la page via le réarrangement ou la mise à jour des éléments.</div>
+  </el-collapse-item>
+  <el-collapse-item title="Efficacité" name="3">
+    <div>Simplifier le processus: garde chaque opération simple et intuitive.;</div>
+    <div>Clair et défini: énonce clairement ses intentions afin que l'utilisateur puisse comprendre et prendre une décision rapidement;</div>
+    <div>Facile à identifier: l'interface devrait être simple et facile d'accès, afin que les utilisateurs n'ai pas d'efforts de mémorisation à faire.</div>
+  </el-collapse-item>
+  <el-collapse-item title="Controllabilité" name="4">
+    <div>Prise de décision: possibilité de donner des conseils sur les opérations, mais ne jamais prendre de décisions à la place des utilisateurs;</div>
+    <div>Contrôle des conséquences: les utilisateurs devraient pouvoir contrôler l'exécution de leurs opérations, y compris l'annulation et la suppression des opérations courantes.</div>
+  </el-collapse-item>
+</el-collapse>
+<script>
+  export default {
+    data() {
+      return {
+        activeNames: ['1']
+      };
+    },
+    methods: {
+      handleChange(val) {
+        console.log(val);
+      }
+    }
+  }
+</script>
+```
+:::
+
+### Accordéon
+
+En mode accordéon, un seul panneau peut être ouvert à la fois.
+
+:::demo Utilisez l'attribut `accordion` pour activer le mode accordéon.
+```html
+<el-collapse v-model="activeName" accordion>
+    <el-collapse-item title="Cohérence" name="1">
+      <div>Cohérence avec la vraie vie: en accord avec les processus habituels de la vie réelle, conforme aux langages et habitudes des utilisateurs;</div>
+      <div>Cohérence au sein de l'interface: tout les éléments doivent être cohérents entre eux et suivre les mêmes règles, par exemple: le style global, les icônes, la position des éléments, etc.</div>
+    </el-collapse-item>
+    <el-collapse-item title="Feedback" name="2">
+      <div>Retour d'expèrience: permets aux utilisateurs de percevoir clairement leur opérations par le biais d'animations et d'effets interactifs.</div>
+      <div>Retour visuel: reflète l'état actuel de la page via le réarrangement ou la mise à jour des éléments.</div>
+    </el-collapse-item>
+    <el-collapse-item title="Efficacité" name="3">
+      <div>Simplifier le processus: garde chaque opération simple et intuitive.;</div>
+      <div>Clair et défini: énonce clairement ses intentions afin que l'utilisateur puisse comprendre et prendre une décision rapidement;</div>
+      <div>Facile à identifier: l'interface devrait être simple et facile d'accès, afin que les utilisateurs n'ai pas d'efforts de mémorisation à faire.</div>
+    </el-collapse-item>
+    <el-collapse-item title="Controllabilité" name="4">
+      <div>Prise de décision: possibilité de donner des conseils sur les opérations, mais ne jamais prendre de décisions à la place des utilisateurs;</div>
+      <div>Contrôle des conséquences: les utilisateurs devraient pouvoir contrôler l'exécution de leurs opérations, y compris l'annulation et la suppression des opérations courantes.</div>
+    </el-collapse-item>
+</el-collapse>
+<script>
+  export default {
+    data() {
+      return {
+        activeName: '1'
+      };
+    }
+  }
+</script>
+```
+:::
+
+### Titre personnalisé
+
+En plus de l'utilisation de l'attribut `title`, vous pouvez configurer les titres de panneau, ce qui rend possible l'ajout de contenu personnalisé, comme des icônes par exemple.
+
+:::demo
+```html
+<el-collapse accordion>
+  <el-collapse-item name="1">
+    <template slot="title">
+      Cohérence<i class="header-icon el-icon-info"></i>
+    </template>
+    <div>Cohérence avec la vraie vie: en accord avec les processus habituels de la vie réelle, conforme aux langages et habitudes des utilisateurs;</div>
+    <div>Cohérence au sein de l'interface: tout les éléments doivent être cohérents entre eux et suivre les mêmes règles, par exemple: le style global, les icônes, la position des éléments, etc.</div>
+  </el-collapse-item>
+  <el-collapse-item title="Feedback" name="2">
+      <div>Retour d'expèrience: permets aux utilisateurs de percevoir clairement leur opérations par le biais d'animations et d'effets interactifs.</div>
+      <div>Retour visuel: reflète l'état actuel de la page via le réarrangement ou la mise à jour des éléments.</div>
+  </el-collapse-item>
+  <el-collapse-item title="Efficacité" name="3">
+      <div>Simplifier le processus: garde chaque opération simple et intuitive.;</div>
+      <div>Clair et défini: énonce clairement ses intentions afin que l'utilisateur puisse comprendre et prendre une décision rapidement;</div>
+      <div>Facile à identifier: l'interface devrait être simple et facile d'accès, afin que les utilisateurs n'ai pas d'efforts de mémorisation à faire.</div>
+  </el-collapse-item>
+  <el-collapse-item title="Controllabilité" name="4">
+      <div>Prise de décision: possibilité de donner des conseils sur les opérations, mais ne jamais prendre de décisions à la place des utilisateurs;</div>
+      <div>Contrôle des conséquences: les utilisateurs devraient pouvoir contrôler l'exécution de leurs opérations, y compris l'annulation et la suppression des opérations courantes.</div>
+  </el-collapse-item>
+</el-collapse>
+```
+:::
+
+### Attributs de Collapse
+| Attribut      | Description          | Type      | Valeurs acceptées       | Défaut  |
+|---------- |-------------- |---------- |--------------------------------  |-------- |
+| value / v-model | Le panneau actuellement activé. | string (en mode accordéon) / array (en mode normal) | — | — |
+| accordion | Active le mode accordéon. | boolean | — | false |
+
+### Évènements de Collapse
+| Nom | Description | Paramètres |
+|---------|---------|---------|
+| change | Se déclenche quand un panneau est activé / désactivé. | (activeNames: array (en mode normal) / string (en mode accordéon)) |
+
+### Attributs de Collapse-Item
+| Attribut      | Description          | Type      | Valeurs acceptées       | Défaut  |
+|---------- |-------------- |---------- |--------------------------------  |-------- |
+| name      | Identifiant unique du panneau. | string/number | — | — |
+| title     | Titre du panneau.              | string        | — | — |
+| disabled  | Désactive le panneau.          | boolean       | — | — |
diff --git a/examples/docs/fr-FR/color-picker.md b/examples/docs/fr-FR/color-picker.md
new file mode 100644
index 00000000000..f91644fb828
--- /dev/null
+++ b/examples/docs/fr-FR/color-picker.md
@@ -0,0 +1,123 @@
+## ColorPicker
+
+ColorPicker est un sélecteur de couleur qui supporte plusieurs formats.
+
+### Usage
+
+:::demo ColorPicker nécessite une variable de type string liée à v-model.
+```html
+<div class="block">
+  <span class="demonstration">Avec valeur par défaut</span>
+  <el-color-picker v-model="color1"></el-color-picker>
+</div>
+<div class="block">
+  <span class="demonstration">Sans valeur par défaut</span>
+  <el-color-picker v-model="color2"></el-color-picker>
+</div>
+
+<script>
+  export default {
+    data() {
+      return {
+        color1: '#2460e0',
+        color2: null
+      }
+    }
+  };
+</script>
+```
+:::
+
+### Canal Alpha
+
+:::demo ColorPicker supporte le canal alpha. Pour activer la sélection du canal alpha, ajoutez l'attribut `show-alpha`.
+```html
+<el-color-picker v-model="color" show-alpha></el-color-picker>
+
+<script>
+  export default {
+    data() {
+      return {
+        color: 'rgba(19, 206, 102, 0.8)'
+      }
+    }
+  };
+</script>
+```
+:::
+
+### Couleurs prédéfinies
+
+:::demo ColorPicker supporte les couleurs prédéfinies.
+```html
+<el-color-picker
+  v-model="color"
+  show-alpha
+  :predefine="predefineColors">
+</el-color-picker>
+
+<script>
+  export default {
+    data() {
+      return {
+        color: 'rgba(255, 69, 0, 0.68)',
+        predefineColors: [
+          '#ff4500',
+          '#ff8c00',
+          '#ffd700',
+          '#90ee90',
+          '#00ced1',
+          '#1e90ff',
+          '#c71585',
+          'rgba(255, 69, 0, 0.68)',
+          'rgb(255, 120, 0)',
+          'hsv(51, 100, 98)',
+          'hsva(120, 40, 94, 0.5)',
+          'hsl(181, 100%, 37%)',
+          'hsla(209, 100%, 56%, 0.73)',
+          '#c7158577'
+        ]
+      }
+    }
+  };
+</script>
+```
+:::
+
+### Tailles
+
+:::demo
+```html
+<el-color-picker v-model="color"></el-color-picker>
+<el-color-picker v-model="color" size="medium"></el-color-picker>
+<el-color-picker v-model="color" size="small"></el-color-picker>
+<el-color-picker v-model="color" size="mini"></el-color-picker>
+
+<script>
+  export default {
+    data() {
+      return {
+        color: '#2460e0'
+      }
+    }
+  };
+</script>
+```
+:::
+
+### Attributs
+| Attribut | Description | Type | Valeurs acceptées | Défaut |
+|---------- |-------- |---------- |-------------  |-------- |
+| value / v-model | La valeur liée. | string | — | — |
+| disabled | Désactive le ColorPicker. | boolean | — | false |
+| size | Taille du ColorPicker. | string | — | medium / small / mini |
+| show-alpha | Affiche la sélection du canal alpha. | boolean | — | false |
+| color-format | Format de couleur du v-model. | string | hsl / hsv / hex / rgb | hex (quand show-alpha est false)/ rgb (quand show-alpha est true) |
+| popper-class | Classe du menu déroulant du ColorPicker. | string | — | — |
+| predefine | Couleurs prédéfinies. | array | — | — |
+
+### Évènements
+| Nom | Description | Paramètres |
+|---------|--------|---------|
+| change | Se déclenche quand la valeur change. | La valeur de la couleur |
+| active-change | Se déclenche quand la couleur active change. | La valeur de la couleur active |
diff --git a/examples/docs/fr-FR/color.md b/examples/docs/fr-FR/color.md
new file mode 100644
index 00000000000..e74ae790958
--- /dev/null
+++ b/examples/docs/fr-FR/color.md
@@ -0,0 +1,227 @@
+<script>
+  import bus from '../../bus';
+  import { tintColor } from '../../color.js';
+  import { ACTION_USER_CONFIG_UPDATE } from '../../components/theme/constant.js';
+  const varMap = {
+    'primary': '$--color-primary',
+    'success': '$--color-success',
+    'warning': '$--color-warning',
+    'danger': '$--color-danger',
+    'info': '$--color-info',
+    'white': '$--color-white',
+    'black': '$--color-black',
+    'textPrimary': '$--color-text-primary',
+    'textRegular': '$--color-text-regular',
+    'textSecondary': '$--color-text-secondary',
+    'textPlaceholder': '$--color-text-placeholder',
+    'borderBase': '$--border-color-base',
+    'borderLight': '$--border-color-light',
+    'borderLighter': '$--border-color-lighter',
+    'borderExtraLight': '$--border-color-extra-light'
+  };
+  const original = {
+    primary: '#2460e0',
+    success: '#2FD163',
+    warning: '#F5A623',
+    danger: '#FF4D4F',
+    info: '#A7A8AD',
+    white: '#FFFFFF',
+    black: '#000000',
+    textPrimary: '#303133',
+    textRegular: '#606266',
+    textSecondary: '#A7A8AD',
+    textPlaceholder: '#C0C4CC',
+    borderBase: '#DCDFE6',
+    borderLight: '#E4E7ED',
+    borderLighter: '#EBEEF5',
+    borderExtraLight: '#F2F6FC'
+  }
+  export default {
+    created() {
+      bus.$on(ACTION_USER_CONFIG_UPDATE, this.setGlobal);
+    },
+    mounted() {
+      this.setGlobal();
+    },
+    methods: {
+      tintColor(color, tint) {
+        return tintColor(color, tint);
+      },
+      setGlobal() {
+        if (window.userThemeConfig) {
+          this.global = window.userThemeConfig.global;
+        }
+      }
+    },
+    data() {
+      return {
+        global: {},
+        primary: '',
+        success: '',
+        warning: '',
+        danger: '',
+        info: '',
+        white: '',
+        black: '',
+        textPrimary: '',
+        textRegular: '',
+        textSecondary: '',
+        textPlaceholder: '',
+        borderBase: '',
+        borderLight: '',
+        borderLighter: '',
+        borderExtraLight: ''
+      }
+    },
+    watch: {
+      global: {
+        immediate: true,
+        handler(value) {
+          Object.keys(original).forEach((o) => {
+            if (value[varMap[o]]) {
+              this[o] = value[varMap[o]]
+            } else {
+              this[o] = original[o]
+            }
+          });
+        }
+      }
+    },
+  }
+</script>
+
+## Couleur
+Element utilise un ensemble de palettes spécifiques afin de fournir un style consistant pour vos produits.
+
+### Couleur principale
+
+La couleur principale d'Element est un bleu clair et agréable.
+
+<el-row :gutter="12">
+  <el-col :span="10" :xs="{span: 12}">
+    <div class="demo-color-box" :style="{ background: primary }">Couleur principale
+      <div class="value">#2460e0</div>
+      <div class="bg-color-sub" :style="{ background: tintColor(primary, 0.9) }">
+        <div
+          class="bg-blue-sub-item"
+          v-for="(item, key) in Array(8)"
+          :key="key"
+          :style="{ background: tintColor(primary, (key + 1) / 10) }"
+        ></div>
+      </div>
+    </div>
+  </el-col>
+</el-row>
+
+### Couleurs secondaires
+
+En plus de la couleur principale, vous devrez sans doute utiliser d'autres couleurs pour différents cas de figures, par exemple une couleur de danger pour indiquer une opération dangereuse.
+
+<el-row :gutter="12">
+  <el-col :span="6" :xs="{span: 12}">
+    <div class="demo-color-box" :style="{ background: success }">Succès
+      <div class="value">#2FD163</div>
+      <div class="bg-color-sub">
+        <div
+          class="bg-success-sub-item"
+          v-for="(item, key) in Array(2)"
+          :key="key"
+          :style="{ background: tintColor(success, (key + 8) / 10) }"
+        ></div>
+      </div>
+    </div>
+  </el-col>
+  <el-col :span="6" :xs="{span: 12}">
+    <div class="demo-color-box" :style="{ background: warning }">Avertissement
+      <div class="value">#F5A623</div>
+      <div class="bg-color-sub">
+        <div
+          class="bg-success-sub-item"
+          v-for="(item, key) in Array(2)"
+          :key="key"
+          :style="{ background: tintColor(warning, (key + 8) / 10) }"
+        ></div>
+      </div>
+    </div>
+  </el-col>
+  <el-col :span="6" :xs="{span: 12}">
+    <div class="demo-color-box" :style="{ background: danger }">Danger
+      <div class="value">#FF4D4F</div>
+      <div class="bg-color-sub">
+        <div
+          class="bg-success-sub-item"
+          v-for="(item, key) in Array(2)"
+          :key="key"
+          :style="{ background: tintColor(danger, (key + 8) / 10) }"
+        ></div>
+      </div>
+    </div>
+  </el-col>
+  <el-col :span="6" :xs="{span: 12}">
+    <div class="demo-color-box" :style="{ background: info }">Info
+      <div class="value">#A7A8AD</div>
+      <div class="bg-color-sub">
+        <div
+          class="bg-success-sub-item"
+          v-for="(item, key) in Array(2)"
+          :key="key"
+          :style="{ background: tintColor(info, (key + 8) / 10) }"
+        ></div>
+      </div>
+    </div>
+  </el-col>
+</el-row>
+
+### Couleurs neutres
+
+Les couleurs neutres sont les couleurs du fond, du texte et des bordures. Vous pouvez utiliser différentes couleurs neutres pour représenter une structure hiérarchique.
+
+<el-row :gutter="12">
+  <el-col :span="6" :xs="{span: 12}">
+    <div class="demo-color-box-group">
+      <div class="demo-color-box demo-color-box-other"
+      :style="{ background: textPrimary }"
+      >Texte principal<div class="value">{{textPrimary}}</div></div>
+      <div class="demo-color-box demo-color-box-other"
+      :style="{ background: textRegular }"
+      >
+      Texte normal<div class="value">{{textRegular}}</div></div>
+      <div class="demo-color-box demo-color-box-other"
+      :style="{ background: textSecondary }"
+      >Texte secondaire<div class="value">{{textSecondary}}</div></div>
+      <div class="demo-color-box demo-color-box-other"
+      :style="{ background: textPlaceholder }"
+      >Texte de placeholder<div class="value">{{textPlaceholder}}</div></div>
+    </div>
+  </el-col>
+  <el-col :span="6" :xs="{span: 12}">
+    <div class="demo-color-box-group">
+      <div class="demo-color-box demo-color-box-other demo-color-box-lite"
+      :style="{ background: borderBase }"
+      >Bordure de base<div class="value">{{borderBase}}</div></div>
+      <div class="demo-color-box demo-color-box-other demo-color-box-lite"
+      :style="{ background: borderLight }"
+      >Bordure claire<div class="value">{{borderLight}}</div></div>
+      <div class="demo-color-box demo-color-box-other demo-color-box-lite"
+      :style="{ background: borderLighter }"
+      >Bordure très claire<div class="value">{{borderLighter}}</div></div>
+      <div class="demo-color-box demo-color-box-other demo-color-box-lite"
+      :style="{ background: borderExtraLight }"
+      >Bordure extra claire<div class="value">{{borderExtraLight}}</div></div>
+    </div>
+  </el-col>
+  <el-col :span="6" :xs="{span: 12}">
+    <div class="demo-color-box-group">
+      <div
+      class="demo-color-box demo-color-box-other"
+      :style="{ background: black }"
+      >Noir<div class="value">{{black}}</div></div>
+      <div
+      class="demo-color-box demo-color-box-other"
+      :style="{ background: white, color: '#303133', border: '1px solid #eee' }"
+      >Blanc<div class="value">{{white}}</div></div>
+      <div class="demo-color-box demo-color-box-other bg-transparent">Transparent<div class="value">Transparent</div>
+      </div>
+    </div>
+  </el-col>
+</el-row>
diff --git a/examples/docs/fr-FR/container.md b/examples/docs/fr-FR/container.md
new file mode 100644
index 00000000000..20bcc93f601
--- /dev/null
+++ b/examples/docs/fr-FR/container.md
@@ -0,0 +1,240 @@
+## Container
+Les composants Container servent à structurer la page:
+
+`<el-container>`: Conteneur de wrapping. Quand il est placé à l'intérieur de `<el-header>` ou `<el-footer>`, tous les éléments enfants seront placés verticalement. Dans le cas contraire ils seront placés horizontalement.
+
+`<el-header>`: Conteneur pour headers.
+
+`<el-aside>`: Conteneur pour section latérale (en général un menu).
+
+`<el-main>`: Conteneur pour la section principal.
+
+`<el-footer>`: Conteneur pour footers.
+
+:::tip
+Ces composants utilisent flexbox, assurez vous que le navigateur supporte cette fonctionnalité. De plus, les éléments enfants directs de `<el-container>` doivent être un des quatre éléments précédents, leur élément père devant obligatoirement être `<el-container>`.
+:::
+
+### Mises en page habituelles
+
+:::demo
+```html
+<el-container>
+  <el-header>Header</el-header>
+  <el-main>Main</el-main>
+</el-container>
+
+<el-container>
+  <el-header>Header</el-header>
+  <el-main>Main</el-main>
+  <el-footer>Footer</el-footer>
+</el-container>
+
+<el-container>
+  <el-aside width="200px">Aside</el-aside>
+  <el-main>Main</el-main>
+</el-container>
+
+<el-container>
+  <el-header>Header</el-header>
+  <el-container>
+    <el-aside width="200px">Aside</el-aside>
+    <el-main>Main</el-main>
+  </el-container>
+</el-container>
+
+<el-container>
+  <el-header>Header</el-header>
+  <el-container>
+    <el-aside width="200px">Aside</el-aside>
+    <el-container>
+      <el-main>Main</el-main>
+      <el-footer>Footer</el-footer>
+    </el-container>
+  </el-container>
+</el-container>
+
+<el-container>
+  <el-aside width="200px">Aside</el-aside>
+  <el-container>
+    <el-header>Header</el-header>
+    <el-main>Main</el-main>
+  </el-container>
+</el-container>
+
+<el-container>
+  <el-aside width="200px">Aside</el-aside>
+  <el-container>
+    <el-header>Header</el-header>
+    <el-main>Main</el-main>
+    <el-footer>Footer</el-footer>
+  </el-container>
+</el-container>
+
+<style>
+  .el-header, .el-footer {
+    background-color: #B3C0D1;
+    color: #333;
+    text-align: center;
+    line-height: 60px;
+  }
+
+  .el-aside {
+    background-color: #D3DCE6;
+    color: #333;
+    text-align: center;
+    line-height: 200px;
+  }
+
+  .el-main {
+    background-color: #E9EEF3;
+    color: #333;
+    text-align: center;
+    line-height: 160px;
+  }
+
+  body > .el-container {
+    margin-bottom: 40px;
+  }
+
+  .el-container:nth-child(5) .el-aside,
+  .el-container:nth-child(6) .el-aside {
+    line-height: 260px;
+  }
+
+  .el-container:nth-child(7) .el-aside {
+    line-height: 320px;
+  }
+</style>
+```
+:::
+
+### Exemple
+
+:::demo
+```html
+<el-container style="height: 500px; border: 1px solid #eee">
+  <el-aside width="200px" style="background-color: rgb(238, 241, 246)">
+    <el-menu :default-openeds="['1', '3']">
+      <el-submenu index="1">
+        <template slot="title"><i class="el-icon-message"></i>Navigator One</template>
+        <el-menu-item-group>
+          <template slot="title">Group 1</template>
+          <el-menu-item index="1-1">Option 1</el-menu-item>
+          <el-menu-item index="1-2">Option 2</el-menu-item>
+        </el-menu-item-group>
+        <el-menu-item-group title="Group 2">
+          <el-menu-item index="1-3">Option 3</el-menu-item>
+        </el-menu-item-group>
+        <el-submenu index="1-4">
+          <template slot="title">Option4</template>
+          <el-menu-item index="1-4-1">Option 4-1</el-menu-item>
+        </el-submenu>
+      </el-submenu>
+      <el-submenu index="2">
+        <template slot="title"><i class="el-icon-menu"></i>Navigator Two</template>
+        <el-menu-item-group>
+          <template slot="title">Group 1</template>
+          <el-menu-item index="2-1">Option 1</el-menu-item>
+          <el-menu-item index="2-2">Option 2</el-menu-item>
+        </el-menu-item-group>
+        <el-menu-item-group title="Group 2">
+          <el-menu-item index="2-3">Option 3</el-menu-item>
+        </el-menu-item-group>
+        <el-submenu index="2-4">
+          <template slot="title">Option 4</template>
+          <el-menu-item index="2-4-1">Option 4-1</el-menu-item>
+        </el-submenu>
+      </el-submenu>
+      <el-submenu index="3">
+        <template slot="title"><i class="el-icon-setting"></i>Navigator Three</template>
+        <el-menu-item-group>
+          <template slot="title">Group 1</template>
+          <el-menu-item index="3-1">Option 1</el-menu-item>
+          <el-menu-item index="3-2">Option 2</el-menu-item>
+        </el-menu-item-group>
+        <el-menu-item-group title="Group 2">
+          <el-menu-item index="3-3">Option 3</el-menu-item>
+        </el-menu-item-group>
+        <el-submenu index="3-4">
+          <template slot="title">Option 4</template>
+          <el-menu-item index="3-4-1">Option 4-1</el-menu-item>
+        </el-submenu>
+      </el-submenu>
+    </el-menu>
+  </el-aside>
+
+  <el-container>
+    <el-header style="text-align: right; font-size: 12px">
+      <el-dropdown>
+        <i class="el-icon-setting" style="margin-right: 15px"></i>
+        <el-dropdown-menu slot="dropdown">
+          <el-dropdown-item>View</el-dropdown-item>
+          <el-dropdown-item>Add</el-dropdown-item>
+          <el-dropdown-item>Delete</el-dropdown-item>
+        </el-dropdown-menu>
+      </el-dropdown>
+      <span>Tom</span>
+    </el-header>
+
+    <el-main>
+      <el-table :data="tableData">
+        <el-table-column prop="date" label="Date" width="140">
+        </el-table-column>
+        <el-table-column prop="name" label="Name" width="120">
+        </el-table-column>
+        <el-table-column prop="address" label="Address">
+        </el-table-column>
+      </el-table>
+    </el-main>
+  </el-container>
+</el-container>
+
+<style>
+  .el-header {
+    background-color: #B3C0D1;
+    color: #333;
+    line-height: 60px;
+  }
+
+  .el-aside {
+    color: #333;
+  }
+</style>
+
+<script>
+  export default {
+    data() {
+      const item = {
+        date: '2016-05-02',
+        name: 'Tom',
+        address: 'No. 189, Grove St, Los Angeles'
+      };
+      return {
+        tableData: Array(20).fill(item)
+      }
+    }
+  };
+</script>
+```
+:::
+
+### Attributs de Container
+| Attribut      | Description          | Type      | Valeurs acceptées       | Défaut  |
+|---------- |-------------- |---------- |--------------------------------  |-------- |
+| direction | Direction d'affichage pour les éléments enfants. | string | horizontal / vertical | vertical quand dans `el-header` ou `el-footer`; horizontal sinon |
+
+### Attributs de Header
+| Attribut      | Description          | Type      | Valeurs acceptées       | Défaut  |
+|---------- |-------------- |---------- |--------------------------------  |-------- |
+| height | Hauteur du header. | string | — | 60px |
+
+### Attributs de Aside
+| Attribut      | Description          | Type      | Valeurs acceptées       | Défaut  |
+|---------- |-------------- |---------- |--------------------------------  |-------- |
+| width | Largeur de la section. | string | — | 300px |
+
+### Attributs de Footer
+| Attribut      | Description          | Type      | Valeurs acceptées       | Défaut  |
+|---------- |-------------- |---------- |--------------------------------  |-------- |
+| height | Hauteur du footer. | string | — | 60px |
diff --git a/examples/docs/fr-FR/custom-theme.md b/examples/docs/fr-FR/custom-theme.md
new file mode 100644
index 00000000000..552935e993e
--- /dev/null
+++ b/examples/docs/fr-FR/custom-theme.md
@@ -0,0 +1,134 @@
+## Thème
+Element utilise le style BEM pour le CSS afin que vous puissiez écraser les règles prédéfinies facilement. Mais si vous avez besoin de remplacer des styles à une plus grande échelle , e.g. changer le thème de bleu à orange ou vert, les modifier une par une serait fastidieux. Nous fournissons ttrtois méthodes pour changer les variables de style.
+
+### Theme Roller
+Utilisez [Online Theme Roller](./#/fr-FR/theme) pour personnaliser les Design Tokens des variables globales et des composants, et prévisualisez le nouveau thème en temps réel. Il peut générer un package de style complet basé sur le nouveau thème que vous pouvez télécharger directement (pour importer de nouveaux fichiers de style dans votre projet, veuillez vous reporter à la partie 'Importer un thème personnalisé'' de cette section).
+
+Also, use [Theme Roller Chrome Extension](https://chrome.google.com/webstore/detail/element-theme-roller/lifkjlojflekabbmlddfccdkphlelmim)，to customize theme and preview in real-time on any website developed by Element.
+
+<img src="https://shadow.elemecdn.com/app/sns-client/element-theme-editor2.e16c6a01-806d-11e9-bc23-21435c54c509.png" style="width: 100%;margin: 30px auto 0;display: block;">
+
+### Changer la couleur du thème
+Si vous avez juste besoin de changer la couleur du thème, le [générateur de thème en ligne](https://elementui.github.io/theme-chalk-preview/#/en-US) est recommandé. La couleur du thème d'Element est un bleu clair et agréable. En le changeant, vous rendez Element visuellement plus adapté à vos projets.
+
+Le site précédent vous permet de visualiser et de télécharger un nouveau thème immédiatement (pour importer un nouveau thème, référez-vous à la partie 'Importer un thème personnalisé' or 'Importer un thème de composant à la demande' de cette section).
+
+### Mettre à jour les variables SCSS de votre projet
+`theme-chalk` est écrit en SCSS. Si votre projet utilises SCSS, vous pouvez changer directement les variables d'Élément. Créez un nouveau fichier, e.g. `element-variables.scss`:
+
+```html
+/* couleur du thème */
+$--color-primary: teal;
+
+/* chemin vers le fichier de police, requis */
+$--font-path: '~@femessage/element-ui/lib/theme-chalk/fonts';
+
+@import "~@femessage/element-ui/packages/theme-chalk/src/index";
+```
+
+Puis dans le fichier d'entrée, importez ce style au lieu de celui d'Element:
+```JS
+import Vue from 'vue'
+import Element from '@femessage/element-ui'
+import './element-variables.scss'
+
+Vue.use(Element)
+```
+
+:::tip
+Il est obligatoire de remplacer le chemin du fichier de police.
+:::
+
+### Outil de thème CLI
+Si votre projet n'utilise pas SCSS, vous pouvez personnaliser le thème en utilisant notre outil en ligne de commande:
+
+#### <strong>Installation</strong>
+Installez le générateur de thème de manière globale ou locale. Une installation locale est recommandé afin que les personnes clonant votre dépôt bénéficient d'une installation automatique via npm.
+```shell
+npm i element-theme -g
+```
+
+Installer ensuite le thème chalk depuis npm ou GitHub.
+```shell
+# Via npm
+npm i element-theme-chalk -D
+
+# Via GitHub
+npm i https://github.com/ElementUI/theme-chalk -D
+```
+
+#### <strong>Initialisation d'un fichier de variable</strong>
+Après l'installation des paquets ci-dessus, une commande appelée `et` devient disponible dans le CLI (si les paquets sont installés localement, utilisez `node_modules/.bin/et` à la place). Utilisez `-i` pour initialiser le fichier de variables, `element-variables.scss` par défaut. Vous pouvez spécifier n'importe quel dossier comme sortie.
+
+```shell
+et -i [nom du fichier]
+
+> ✔ Generator variables file
+```
+
+Dans `element-variables.scss` vous trouverez toutes les variables utilisées pour le style d'Element, définies en SCSS. Voici un snippet:
+
+```css
+$--color-primary: #2460e0 !default;
+$--color-primary-light-1: mix($--color-white, $--color-primary, 10%) !default; /* 53a8ff */
+$--color-primary-light-2: mix($--color-white, $--color-primary, 20%) !default; /* 66b1ff */
+$--color-primary-light-3: mix($--color-white, $--color-primary, 30%) !default; /* 79bbff */
+$--color-primary-light-4: mix($--color-white, $--color-primary, 40%) !default; /* 8cc5ff */
+$--color-primary-light-5: mix($--color-white, $--color-primary, 50%) !default; /* a0cfff */
+$--color-primary-light-6: mix($--color-white, $--color-primary, 60%) !default; /* b3d8ff */
+$--color-primary-light-7: mix($--color-white, $--color-primary, 70%) !default; /* c6e2ff */
+$--color-primary-light-8: mix($--color-white, $--color-primary, 80%) !default; /* d9ecff */
+$--color-primary-light-9: mix($--color-white, $--color-primary, 90%) !default; /* ecf5ff */
+
+$--color-success: #2FD163 !default;
+$--color-warning: #F5A623 !default;
+$--color-danger: #FF4D4F !default;
+$--color-info: #A7A8AD !default;
+
+...
+```
+
+#### <strong>Modifier les variables</strong>
+Éditer `element-variables.scss`, e.g. en changeant la couleur du thème pour du rouge:
+```CSS
+$--color-primary: red;
+```
+
+#### <strong>Générer le thème</strong>
+Après avoir sauvegardé le fichier de variables, utilisez `et` pour générer le thème. Vous pouvez activer le mode `watch` en ajoutant le paramètre `-w`. Si vous avez choisi le chemin du fichier de sortie, il vous faudra ajouter le paramètre `-c` avec le nom du fichier. Par défaut le thème généré est placé dans `./theme`. Vous pouvez spécifier le dossier de sortie grâce à `-o`. 
+```shell
+et
+
+> ✔ build theme font
+> ✔ build element theme
+```
+
+### Use custom theme
+#### <strong>Importer le thème</strong>
+Importing your own theme is just like importing the default theme, only this time you import the file built from "Online Theme Roller" or "CLI tool":
+
+```javascript
+import '../theme/index.css'
+import ElementUI from '@femessage/element-ui'
+import Vue from 'vue'
+
+Vue.use(ElementUI)
+```
+
+#### <strong>Importer le thème d'un composant sur demande</strong>
+Si vous utilisez `babel-plugin-component` pour les imports sur demande, modifiez `.babelrc` et spécifiez `styleLibraryName` avec le chemin où votre thème est localisé relativement à `.babelrc`. N'oubliez pas que `~` est requis:
+```json
+{
+  "plugins": [
+    [
+      "component",
+      {
+        "libraryName": "element-ui",
+        "styleLibraryName": "~theme"
+      }
+    ]
+  ]
+}
+```
+
+Si vous n'êtes pas familier avec `babel-plugin-component`, référez-vous à la page <a href="./#/fr-FR/component/quickstart">Guide</a>. Pour plus d'informations, jetez un oeil au [dépôt du projet](https://github.com/ElementUI/element-theme) de `element-theme`.
diff --git a/examples/docs/fr-FR/data-mapper.md b/examples/docs/fr-FR/data-mapper.md
new file mode 100644
index 00000000000..c8deb33827a
--- /dev/null
+++ b/examples/docs/fr-FR/data-mapper.md
@@ -0,0 +1 @@
+## DataMapper
diff --git a/examples/docs/fr-FR/date-picker.md b/examples/docs/fr-FR/date-picker.md
new file mode 100644
index 00000000000..1b40290f6c5
--- /dev/null
+++ b/examples/docs/fr-FR/date-picker.md
@@ -0,0 +1,490 @@
+## DatePicker
+
+Utilisez DatePicker pour les champs de dates.
+
+### Entrez la date
+
+L'unité de base du DatePicker est le jour.
+
+:::demo L'unité est déterminée par l'attribut `type`. Vous pouvez ajouter des options en créant un objet `picker-options` avec la propriété `shortcuts`. L'état désactivé est contrôlé par `disabledDate` qui est une fonction.
+
+```html
+<template>
+  <div class="block">
+    <span class="demonstration">Défaut</span>
+    <el-date-picker
+      v-model="value1"
+      type="date"
+      placeholder="Choississez un jour">
+    </el-date-picker>
+  </div>
+  <div class="block">
+    <span class="demonstration">Picker avec raccourcis</span>
+    <el-date-picker
+      v-model="value2"
+      type="date"
+      placeholder="Choississez un jour"
+      :picker-options="pickerOptions">
+    </el-date-picker>
+  </div>
+</template>
+
+<script>
+  export default {
+    data() {
+      return {
+        pickerOptions: {
+          disabledDate(time) {
+            return time.getTime() > Date.now();
+          },
+          shortcuts: [{
+            text: 'Aujourd\'hui',
+            onClick(picker) {
+              picker.$emit('pick', new Date());
+            }
+          }, {
+            text: 'Hier',
+            onClick(picker) {
+              const date = new Date();
+              date.setTime(date.getTime() - 3600 * 1000 * 24);
+              picker.$emit('pick', date);
+            }
+          }, {
+            text: 'Il y a une semaine',
+            onClick(picker) {
+              const date = new Date();
+              date.setTime(date.getTime() - 3600 * 1000 * 24 * 7);
+              picker.$emit('pick', date);
+            }
+          }]
+        },
+        value1: '',
+        value2: '',
+      };
+    }
+  };
+</script>
+```
+:::
+
+### Autres unités
+
+Vous pouvez sélectionner une semaine, un mois, une année ou plusieurs dates en ajoutant des options grâce aux attributs.
+
+:::demo
+
+```html
+<div class="container">
+  <div class="block">
+    <span class="demonstration">Semaine</span>
+    <el-date-picker
+      v-model="value1"
+      type="week"
+      format="Week WW"
+      placeholder="Sélectionnez une semaine">
+    </el-date-picker>
+  </div>
+  <div class="block">
+    <span class="demonstration">Mois</span>
+    <el-date-picker
+      v-model="value2"
+      type="month"
+      placeholder="Sélectionnez un mois">
+    </el-date-picker>
+  </div>
+</div>
+<div class="container">
+  <div class="block">
+    <span class="demonstration">Année</span>
+    <el-date-picker
+      v-model="value3"
+      type="year"
+      placeholder="Sélectionnez une année">
+    </el-date-picker>
+  </div>
+  <div class="block">
+    <span class="demonstration">Dates</span>
+    <el-date-picker
+      type="dates"
+      v-model="value4"
+      placeholder="Sélectionnez une ou plusieurs dates">
+    </el-date-picker>
+  </div>
+</div>
+
+<script>
+  export default {
+    data() {
+      return {
+        value1: '',
+        value2: '',
+        value3: '',
+        value4: ''
+      };
+    }
+  };
+</script>
+```
+
+:::
+
+### Plage de dates
+
+Vous pouvez sélectionner une plage de dates.
+
+:::demo Lorsque ce mode est activé, les deux panneaux sont liés par défaut. Si vous souhaitez qu'ils changent de mois de manière indépendante, ajoutez l'attribut `unlink-panels`.
+
+```html
+<template>
+  <div class="block">
+    <span class="demonstration">Défaut</span>
+    <el-date-picker
+      v-model="value1"
+      type="daterange"
+      range-separator="à"
+      start-placeholder="Date de début"
+      end-placeholder="Date de fin">
+    </el-date-picker>
+  </div>
+  <div class="block">
+    <span class="demonstration">Avec des options</span>
+    <el-date-picker
+      v-model="value2"
+      type="daterange"
+      align="right"
+      unlink-panels
+      range-separator="à"
+      start-placeholder="Date de début"
+      end-placeholder="Date de fin"
+      :picker-options="pickerOptions">
+    </el-date-picker>
+  </div>
+</template>
+
+<script>
+  export default {
+    data() {
+      return {
+        pickerOptions: {
+          shortcuts: [{
+            text: 'Semaine dernière',
+            onClick(picker) {
+              const end = new Date();
+              const start = new Date();
+              start.setTime(start.getTime() - 3600 * 1000 * 24 * 7);
+              picker.$emit('pick', [start, end]);
+            }
+          }, {
+            text: 'Mois dernier',
+            onClick(picker) {
+              const end = new Date();
+              const start = new Date();
+              start.setTime(start.getTime() - 3600 * 1000 * 24 * 30);
+              picker.$emit('pick', [start, end]);
+            }
+          }, {
+            text: 'Trois derniers mois',
+            onClick(picker) {
+              const end = new Date();
+              const start = new Date();
+              start.setTime(start.getTime() - 3600 * 1000 * 24 * 90);
+              picker.$emit('pick', [start, end]);
+            }
+          }]
+        },
+        value1: '',
+        value2: ''
+      };
+    }
+  };
+</script>
+```
+
+:::
+
+### Plage de mois
+
+Vous pouvez sélectionner une plage de mois.
+
+:::demo Lorsque ce mode est activé, les panneaux gauche et droit sont liés par défaut. Si vous voulez que les deux panneaux switch indépendamment les années en cours, vous pouvez utiliser l'attribut `unlink-panels`.
+```html
+<template>
+  <div class="block">
+    <span class="demonstration">Défaut</span>
+    <el-date-picker
+      v-model="value1"
+      type="monthrange"
+      range-separator="à"
+      start-placeholder="Mois de début"
+      end-placeholder="Mois de fin">
+    </el-date-picker>
+  </div>
+  <div class="block">
+    <span class="demonstration">Avec options</span>
+    <el-date-picker
+      v-model="value2"
+      type="monthrange"
+      align="right"
+      unlink-panels
+      range-separator="à"
+      start-placeholder="Mois de début"
+      end-placeholder="Mois de fin"
+      :picker-options="pickerOptions">
+    </el-date-picker>
+  </div>
+</template>
+
+<script>
+  export default {
+    data() {
+      return {
+        pickerOptions: {
+          shortcuts: [{
+            text: 'Ce mois',
+            onClick(picker) {
+              picker.$emit('pick', [new Date(), new Date()]);
+            }
+          }, {
+            text: 'Cette année',
+            onClick(picker) {
+              const end = new Date();
+              const start = new Date(new Date().getFullYear(), 0);
+              picker.$emit('pick', [start, end]);
+            }
+          }, {
+            text: 'Les derniers 6 mois',
+            onClick(picker) {
+              const end = new Date();
+              const start = new Date();
+              start.setMonth(start.getMonth() - 6);
+              picker.$emit('pick', [start, end]);
+            }
+          }]
+        },
+        value1: '',
+        value2: ''
+      };
+    }
+  };
+</script>
+```
+:::
+
+### Valeur par défaut
+
+Si l'utilisateur n'a pas sélectionné de date, vous pouvez montrer la date d'aujourd'hui par défaut. Utilisez `default-value` pour montrer une autre date. Sa valeur doit être parsable par `new Date()`.
+
+Si le type est `daterange`, `default-value` configure la panneau de gauche.
+
+:::demo
+```html
+<template>
+  <div class="block">
+    <span class="demonstration">Date</span>
+    <el-date-picker
+      v-model="value1"
+      type="date"
+      placeholder="Sélectionnez une date"
+      default-value="2010-10-01">
+    </el-date-picker>
+  </div>
+  <div class="block">
+    <span class="demonstration">Plage de dates</span>
+    <el-date-picker
+      v-model="value2"
+      type="daterange"
+      align="right"
+      start-placeholder="Date de début"
+      end-placeholder="Date de fin"
+      default-value="2010-10-01">
+    </el-date-picker>
+  </div>
+</template>
+
+<script>
+  export default {
+    data() {
+      return {
+        value1: '',
+        value2: ''
+      };
+    }
+  };
+</script>
+```
+:::
+
+### Formats de date
+
+Utilisez `format` pour contrôler l'affichage de la date dans le champ. Utilisez `value-format` pour contrôler le format de la variable stockée.
+
+Par défaut, le composant accepte et émet un objet `Date`. Les formats supportés se trouvent ci-dessous, avec la date UTC 2017-01-02 03:04:05 comme exemple:
+
+:::warning
+Attention à la capitalisation !
+:::
+
+| Format | Signification | Note | Exemple |
+|------|------|------|------|------|
+| `yyyy` | Année | | 2017 |
+| `M`  | Mois | pas de 0 au début | 1 |
+| `MM` | Mois | | 01 |
+| `MMM` | Mois | | Jan |
+| `MMMM` | Mois | | Janvier |
+| `W`  | Semaine | uniquement pour les `format` des types 'semaine' ; pas de 0 au début | 1 |
+| `WW` | Semaine | uniquement pour les `format` des types 'semaine' | 01 |
+| `d`  | Jour | pas de 0 au début | 2 |
+| `dd` | Jour | | 02 |
+| `H`  | Heure | Horloge 24 heures; pas de 0 au début | 3 |
+| `HH` | Heure | Horloge 24 heures | 03 |
+| `h`  | Heure | Horloge 12 heures ; doit être utilisé avec `A` ou `a`; pas de 0 au début | 3 |
+| `hh` | Heure | Horloge 12 heures ; doit être utilisé avec `A` ou `a` | 03 |
+| `m`  | Minute | pas de 0 au début | 4 |
+| `mm` | Minute | | 04 |
+| `s`  | Seconde | pas de 0 au début | 5 |
+| `ss` | Seconde | | 05 |
+| `A`  | AM/PM | uniquement pour `format`, majuscules | AM |
+| `a`  | am/pm | uniquement pour `format`, minuscules | am |
+| `timestamp` | timestamp JS | uniquement pour `value-format`; la variable stockée sera un `number` | 1483326245000 |
+| `[MM]` | Pas de caractère d'échappement | Pour échapper des caractères, placez-les entre crochets (ex: [A] [MM]) | MM |
+
+:::demo
+```html
+<template>
+  <div class="block">
+    <span class="demonstration">Émet un objet Date</span>
+    <div class="demonstration">Value: {{ value1 }}</div>
+    <el-date-picker
+      v-model="value1"
+      type="date"
+      placeholder="Sélectionnez une date"
+      format="yyyy/MM/dd">
+    </el-date-picker>
+  </div>
+  <div class="block">
+    <span class="demonstration">Utilise value-format</span>
+    <div class="demonstration">Value: {{ value2 }}</div>
+    <el-date-picker
+      v-model="value2"
+      type="date"
+      placeholder="Sélectionnez une date"
+      format="yyyy/MM/dd"
+      value-format="yyyy-MM-dd">
+    </el-date-picker>
+  </div>
+  <div class="block">
+    <span class="demonstration">Timestamp</span>
+    <div class="demonstration">Value：{{ value3 }}</div>
+    <el-date-picker
+      v-model="value3"
+      type="date"
+      placeholder="Sélectionnez une date"
+      format="yyyy/MM/dd"
+      value-format="timestamp">
+    </el-date-picker>
+  </div>
+</template>
+
+<script>
+  export default {
+    data() {
+      return {
+        value1: '',
+        value2: '',
+        value3: ''
+      };
+    }
+  };
+</script>
+```
+:::
+
+### Horaire par défaut pour les dates de fin et de début
+
+Lorsque vous choisissez une plage de dates, vous pouvez assigner l'horaire de départ et de fin pour chacune des dates.
+
+:::demo Par défaut, l'horaire pour les dates de début et de fin est `00:00:00`. Configurez `default-time` pour changer l'horaire. Cet attribut prends un tableau de un ou deux horaires au format `12:00:00`. Le premier est pour la date de début, le deuxième pour la date de fin.
+```html
+<template>
+  <div class="block">
+    <p>Valeur: {{ value }}</p>
+    <el-date-picker
+      v-model="value"
+      type="daterange"
+      start-placeholder="Date de début"
+      end-placeholder="Date de fin"
+      :default-time="['00:00:00', '23:59:59']">
+    </el-date-picker>
+  </div>
+</template>
+
+<script>
+  export default {
+    data() {
+      return {
+        value: ''
+      };
+    }
+  };
+</script>
+```
+:::
+
+### Attributs
+| Attribut      | Description          | Type      | Valeurs acceptées       | Défaut  |
+|---------- |-------------- |---------- |--------------------------------  |-------- |
+| value / v-model | La valeur liée. | date(DatePicker) / array(DateRangePicker) | — | — |
+| readonly | Si le DatePicker est en lecture seule. | boolean | — | false |
+| disabled | Si le DatePicker est désactivé. | boolean | — | false |
+| size | Taille du champs. | string | large/small/mini | — |
+| editable | Si le champ est éditable. | boolean | — | true |
+| clearable | Si la croix de reset doit apparaître. | boolean | — | true |
+| placeholder | Le placeholder en mode normal. | string | — | — |
+| start-placeholder | Le placeholder pour la date de début en mode plage de dates. | string | — | — |
+| end-placeholder | Le placeholder pour la date de fin en mode plage de dates. | string | — | — |
+| type | Type du picker. | string | year/month/date/dates/datetime/ week/datetimerange/daterange/ monthrange | date |
+| format | Format d'affichage dans le champ. | string | Voir [formats de date](#/fr-FR/component/date-picker#formats-de-date). | yyyy-MM-dd |
+| align | Alignement. | left/center/right | left |
+| popper-class | Nom de classe pour le menu déroulant du DatePicker. | string | — | — |
+| picker-options | Options additionnelles, voir la table ci-dessous. | object | — | {} |
+| range-separator | Séparateur de plage de dates. | string | — | '-' |
+| default-value | Date par défaut du calendrier, optionnelle. | Date | Tout ce qui est accepté par `new Date()` | — |
+| default-time | Horaire par défaut quand on sélectionne une plage dates, optionnel. | string[] | Tableau de taille 2, chaque valeur est au format `12:00:00`. La première pour la date de début, la deuxième pour la date de fin. | — |
+| value-format | Format de la variable stockée, optionnel. Si non spécifié, la valeur sera un objet Date. | string | Voir [formats de date](#/en-US/component/date-picker#formats-de-date) | — |
+| name | Identique au `name` de l'input natif | string | — | — |
+| unlink-panels | Rend indépendants les deux panneaux de plage de dates. | boolean | — | false |
+| prefix-icon | Icône de préfixe. | string | — | el-icon-date |
+| clear-icon | Icône de reset. | string | — | el-icon-circle-close |
+| validate-event | Si la validation doit être déclenchée. | boolean | - | true |
+
+### Options du Picker
+| Attribut      | Description          | Type      | Valeurs acceptées       | Défaut  |
+|---------- |-------------- |---------- |--------------------------------  |-------- |
+| shortcuts | Un tableau d'objets { text, onClick } pour configurer les raccourcis, voir table ci-dessous. | object[] | — | — |
+| disabledDate | Une fonction qui détermine si une date est désactivée ou pas, avec cette date en paramètre. Doit retourner un booléen. | function | — | — |
+| cellClassName | set custom className | Function(Date) | — | — |
+| firstDayOfWeek | Premier jour du mois. | Number | 1 to 7 | 7 |
+| onPick | Callback se déclenchant quand la date sélectionnée change. Uniquement pour `daterange` et `datetimerange`. | Function({ maxDate, minDate }) | - | - |
+
+### Raccourcis
+| Attribut      | Description          | Type      | Valeurs acceptées       | Défaut  |
+|---------- |-------------- |---------- |--------------------------------  |-------- |
+| text | Titre du raccourci. | string | — | — |
+| onClick | Callback se déclenchant quand le raccourci est cliqué, avec `vm` en paramètre. Vous pouvez changer la valeur du picker en émettant l'évènement `pick`. Exemple: `vm.$emit('pick', new Date())`| function | — | — |
+
+### Évènements
+| Nom | Description | Paramètres |
+|---------|--------|---------|
+| change | Se déclenche quand l'utilisateur confirme la valeur | component's binding value |
+| blur | Se déclenche quand le champ perds le focus. | component instance |
+| focus | Se déclenche quand le champ a le focus. | component instance |
+
+### Méthodes
+| Méthode | Description | Paramètres |
+|------|--------|-------|
+| focus | Focus sur le champ. | — |
+
+### Slots
+| Nom    | Description |
+|---------|-------------|
+| range-separator  | Séparateur d'intervalle personnalisé. |
diff --git a/examples/docs/fr-FR/datetime-picker.md b/examples/docs/fr-FR/datetime-picker.md
new file mode 100644
index 00000000000..64609219e89
--- /dev/null
+++ b/examples/docs/fr-FR/datetime-picker.md
@@ -0,0 +1,241 @@
+## DateTimePicker
+
+Sélectionnez une date et une heure dans un seul picker.
+
+:::tip
+DateTimePicker est dérivé de DatePicker et TimePicker. Pour plus d'informations sur `pickerOptions` et d'autres attributs, vous pouvez vous référer à DatePicker et TimePicker.
+:::
+
+### Date et horaire
+
+:::demo Vous pouvez sélectionner une date et un horaire en un seul picker en réglant `type` sur `datetime`. La manière d'utiliser des raccourcis est la même que pour DatePicker.
+
+```html
+<template>
+  <div class="block">
+    <span class="demonstration">Défaut</span>
+    <el-date-picker
+      v-model="value1"
+      type="datetime"
+      placeholder="Selectionnez date et horaire">
+    </el-date-picker>
+  </div>
+  <div class="block">
+    <span class="demonstration">Avec raccourcis</span>
+    <el-date-picker
+      v-model="value2"
+      type="datetime"
+      placeholder="Selectionnez date et horaire"
+      :picker-options="pickerOptions">
+    </el-date-picker>
+  </div>
+  <div class="block">
+    <span class="demonstration">Avec horaire par défaut</span>
+    <el-date-picker
+      v-model="value3"
+      type="datetime"
+      placeholder="Selectionnez date et horaire"
+      default-time="12:00:00">
+    </el-date-picker>
+  </div>
+</template>
+
+<script>
+  export default {
+    data() {
+      return {
+        pickerOptions: {
+          shortcuts: [{
+            text: 'Aujourdh\'ui',
+            onClick(picker) {
+              picker.$emit('pick', new Date());
+            }
+          }, {
+            text: 'Hier',
+            onClick(picker) {
+              const date = new Date();
+              date.setTime(date.getTime() - 3600 * 1000 * 24);
+              picker.$emit('pick', date);
+            }
+          }, {
+            text: 'Il y a une semaine',
+            onClick(picker) {
+              const date = new Date();
+              date.setTime(date.getTime() - 3600 * 1000 * 24 * 7);
+              picker.$emit('pick', date);
+            }
+          }]
+        },
+        value1: '',
+        value2: '',
+        value3: ''
+      };
+    }
+  };
+</script>
+```
+:::
+
+### Plage de dates et d'horaires
+
+:::demo Vous pouvez sélectionner des plages en configurant `type` sur `datetimerange`.
+
+```html
+<template>
+  <div class="block">
+    <span class="demonstration">Défaut</span>
+    <el-date-picker
+      v-model="value1"
+      type="datetimerange"
+      range-separator="à"
+      start-placeholder="Date de début"
+      end-placeholder="Date de fin">
+    </el-date-picker>
+  </div>
+  <div class="block">
+    <span class="demonstration">Avec raccourcis</span>
+    <el-date-picker
+      v-model="value2"
+      type="datetimerange"
+      :picker-options="pickerOptions"
+      range-separator="à"
+      start-placeholder="Date de début"
+      end-placeholder="Date de fin"
+      align="right">
+    </el-date-picker>
+  </div>
+</template>
+
+<script>
+  export default {
+    data() {
+      return {
+        pickerOptions: {
+          shortcuts: [{
+            text: 'La semaine passée',
+            onClick(picker) {
+              const end = new Date();
+              const start = new Date();
+              start.setTime(start.getTime() - 3600 * 1000 * 24 * 7);
+              picker.$emit('pick', [start, end]);
+            }
+          }, {
+            text: 'Le mois dernier',
+            onClick(picker) {
+              const end = new Date();
+              const start = new Date();
+              start.setTime(start.getTime() - 3600 * 1000 * 24 * 30);
+              picker.$emit('pick', [start, end]);
+            }
+          }, {
+            text: 'Les 2 derniers mois',
+            onClick(picker) {
+              const end = new Date();
+              const start = new Date();
+              start.setTime(start.getTime() - 3600 * 1000 * 24 * 90);
+              picker.$emit('pick', [start, end]);
+            }
+          }]
+        },
+        value1: [new Date(2000, 10, 10, 10, 10), new Date(2000, 10, 11, 10, 10)],
+        value2: ''
+      };
+    }
+  };
+</script>
+```
+:::
+
+### Horaire par défaut pour les plages de dates
+
+:::demo Lorsque vous sélectionnez une plage de dates dans le panneau de date avec le type `datetimerange`, `00:00:00` sera utilisé comme horaire par défaut pour les dates de début et de fin. Vous pouvez contrôler cette valeur avec l'attribut `default-time`. Il accepte un tableau de une ou deux chaînes de caractères. La première indique l'horaire de la date de début, la deuxième celui de la date de fin.
+```html
+<template>
+  <div class="block">
+    <span class="demonstration">Heure de la date de début 12:00:00</span>
+    <el-date-picker
+      v-model="value1"
+      type="datetimerange"
+      start-placeholder="Date de début"
+      end-placeholder="Date de fin"
+      :default-time="['12:00:00']">
+    </el-date-picker>
+  </div>
+  <div class="block">
+    <span class="demonstration">Heure de la date de début 12:00:00, heure de la date de fin 08:00:00</span>
+    <el-date-picker
+      v-model="value2"
+      type="datetimerange"
+      align="right"
+      start-placeholder="Date de début"
+      end-placeholder="Date de fin"
+      :default-time="['12:00:00', '08:00:00']">
+    </el-date-picker>
+  </div>
+</template>
+
+<script>
+  export default {
+    data() {
+      return {
+        value1: '',
+        value2: ''
+      };
+    }
+  };
+</script>
+```
+:::
+
+### Attributs
+| Attribut      | Description          | Type      | Valeurs acceptées       | Défaut  |
+|---------- |-------------- |---------- |--------------------------------  |-------- |
+| value / v-model | La valeur liée. | date(DateTimePicker) / array(DateTimeRangePicker) | — | — |
+| readonly | Si le DatePicker est en lecture seule. | boolean | — | false |
+| disabled | Si le DatePicker est désactivé. | boolean | — | false |
+| editable | Si le champ est éditable. | boolean | — | true |
+| clearable | Si la croix de reset doit apparaître. | boolean | — | true |
+|size | Taille du champ. | string | large/small/mini | — |
+| placeholder | Le placeholder en mode normal. | string | — | — |
+| start-placeholder | Le placeholder de la date de début en mode plage de dates. | string | — | — |
+| end-placeholder | Le placeholder de la date de fin en mode plage de dates. | string | — | — |
+| time-arrow-control | Si l'horaire peut être sélectionné en utilisant les flèches de direction. | boolean | — | false |
+| type | Type du picker. | string | year/month/date/datetime/ week/datetimerange/daterange | date |
+| format | Format d'affichage de la date dans le champ. | string | Voir [formats de date](#/fr-FR/component/date-picker#formats-de-date) | yyyy-MM-dd HH:mm:ss |
+| align | Alignements. | left/center/right | left |
+| popper-class | Nom de classe pour le menu déroulant du DateTimePicker. | string | — | — |
+| picker-options | Options additionnelles, voir la table ci-dessous. | object | — | {} |
+| range-separator | Séparateur de plage. | string | - | '-' |
+| default-value | Date par défaut du calendrier, optionnelle. | Date | N'importe quelle valeur acceptée par `new Date()` | — |
+| default-time | L'horaire par défaut après avoir choisi une date. | normal: string / plage de dates: string[] | normal: un string tel que `12:00:00`, range: tableau de deux strings, le premier pour la date de début, le deuxième pour la date de fin. Si non spécifié, `00:00:00` est utilisé. | — |
+| value-format | Format de la variable stockée, optionnel. Si non spécifié, La valeur sera un objet Date. | string | Voir [formats de date](#/fr-FR/component/date-picker#formats-de-date) | — |
+| name | Identique au `name` de l'input natif | string | — | — |
+| unlink-panels | Rend indépendants les deux panneaux de plage de dates | boolean | — | false |
+| prefix-icon | Icône de préfixe. | string | — | el-icon-date |
+| clear-icon | Icône de reset | string | — | el-icon-circle-close |
+
+### Options du Picker
+| Attribut      | Description          | Type      | Valeurs acceptées       | Défaut  |
+|---------- |-------------- |---------- |--------------------------------  |-------- |
+| shortcuts | Un tableau d'objets { text, onClick } pour mettre en place des raccourcis, vérifier le tableau ci-dessous | object[] | — | — |
+| disabledDate | Une fonction déterminant si une date est désactivée avec cette date en paramètre. Retourne un Boolean | function | — | — |
+| cellClassName | set custom className | Function(Date) | — | — |
+| firstDayOfWeek | Le premier jour de la semaine | Number | 1 à 7 | 7 |
+
+### Raccourcis
+| Attribut      | Description          | Type      | Valeurs acceptées       | Défaut  |
+|---------- |-------------- |---------- |--------------------------------  |-------- |
+| text | Titre du raccourci. | string | — | — |
+| onClick | Callback se déclenchant quand le raccourci est cliqué, avec `vm` en paramètre. Vous pouvez changer la valeur du picker en émettant l'évènement `pick`. Exemple: `vm.$emit('pick', new Date())`| function | — | — |
+
+### Évènements
+| Nom | Description | Paramètres |
+|---------|--------|---------|
+| change | Se déclenche quand l'utilisateur confirme la valeur | component's binding value |
+| blur | Se déclenche quand le champ perds le focus. | component instance |
+| focus | Se déclenche quand le champ a le focus. | component instance |
+
+### Méthodes
+| Méthode | Description | Paramètres |
+|------|--------|-------|
+| focus | Focus sur le champ. | — |
diff --git a/examples/docs/fr-FR/dialog.md b/examples/docs/fr-FR/dialog.md
new file mode 100644
index 00000000000..b4960ff9e21
--- /dev/null
+++ b/examples/docs/fr-FR/dialog.md
@@ -0,0 +1,244 @@
+## Dialog
+
+Informe les utilisateurs tout en préservant l'état de la page.
+
+### Usage
+
+Le Dialog ouvre un modal personnalisable.
+
+:::demo Configurez l'attribut `visible` avec un `Boolean`, un modal apparaîtra quand la valeur sera à `true`. Le Dialog possède deux parties: `body` et `footer`, ce-dernier nécessitant un `slot` appelé `footer`. L'attribut optionnel `title` (vide par défaut) définit le titre. Cet exemple montre également comment `before-close` peut être utilisé.
+
+```html
+<el-button type="text" @click="dialogVisible = true">Cliquez pour ouvrir le modal</el-button>
+
+<el-dialog
+  title="Tips"
+  :visible.sync="dialogVisible"
+  width="30%"
+  :before-close="handleClose">
+  <span>Ceci est un message</span>
+  <span slot="footer" class="dialog-footer">
+    <el-button @click="dialogVisible = false">Annuler</el-button>
+    <el-button type="primary" @click="dialogVisible = false">Confirmer</el-button>
+  </span>
+</el-dialog>
+
+<script>
+  export default {
+    data() {
+      return {
+        dialogVisible: false
+      };
+    },
+    methods: {
+      handleClose(done) {
+        this.$confirm('Voulez-vous vraiment quitter ?')
+          .then(_ => {
+            done();
+          })
+          .catch(_ => {});
+      }
+    }
+  };
+</script>
+```
+:::
+
+:::tip
+`before-close` ne fonctionne que quand l'utilisateur clique sur l'icône de fermeture en dehors du modal. S'il y a des boutons dans le `footer`, vous pouvez configurer `before-close` grâce à leur évènement click.
+:::
+
+### Personalisation
+
+Le contenu du modal peut être n'importe quoi, tableau ou formulaire compris.
+
+:::demo
+
+```html
+<!-- Table -->
+<el-button type="text" @click="dialogTableVisible = true">Ouvrir un modal avec tableau</el-button>
+
+<el-dialog title="Adresse d'expédition" :visible.sync="dialogTableVisible">
+  <el-table :data="gridData">
+    <el-table-column property="date" label="Date" width="150"></el-table-column>
+    <el-table-column property="name" label="Nom" width="200"></el-table-column>
+    <el-table-column property="address" label="Adresse"></el-table-column>
+  </el-table>
+</el-dialog>
+
+<!-- Form -->
+<el-button type="text" @click="dialogFormVisible = true">Ouvrir un modal avec formulaire</el-button>
+
+<el-dialog title="Adresse d'expédition" :visible.sync="dialogFormVisible">
+  <el-form :model="form">
+    <el-form-item label="Nom de promotion" :label-width="formLabelWidth">
+      <el-input v-model="form.name" autocomplete="off"></el-input>
+    </el-form-item>
+    <el-form-item label="Zones" :label-width="formLabelWidth">
+      <el-select v-model="form.region" placeholder="Sélectionnez une zone">
+        <el-option label="Zone No.1" value="shanghai"></el-option>
+        <el-option label="Zone No.2" value="beijing"></el-option>
+      </el-select>
+    </el-form-item>
+  </el-form>
+  <span slot="footer" class="dialog-footer">
+    <el-button @click="dialogFormVisible = false">Annuler</el-button>
+    <el-button type="primary" @click="dialogFormVisible = false">Confirmer</el-button>
+  </span>
+</el-dialog>
+
+<script>
+  export default {
+    data() {
+      return {
+        gridData: [{
+          date: '2016-05-02',
+          name: 'John Smith',
+          address: 'No.1518,  Jinshajiang Road, Putuo District'
+        }, {
+          date: '2016-05-04',
+          name: 'John Smith',
+          address: 'No.1518,  Jinshajiang Road, Putuo District'
+        }, {
+          date: '2016-05-01',
+          name: 'John Smith',
+          address: 'No.1518,  Jinshajiang Road, Putuo District'
+        }, {
+          date: '2016-05-03',
+          name: 'John Smith',
+          address: 'No.1518,  Jinshajiang Road, Putuo District'
+        }],
+        dialogTableVisible: false,
+        dialogFormVisible: false,
+        form: {
+          name: '',
+          region: '',
+          date1: '',
+          date2: '',
+          delivery: false,
+          type: [],
+          resource: '',
+          desc: ''
+        },
+        formLabelWidth: '120px'
+      };
+    }
+  };
+</script>
+```
+:::
+
+### Dialog imbriqué
+
+Si un Dialog est imbriqué dans un autre Dialog, `append-to-body` est requis.
+
+:::demo Normalement l'utilisation de Dialog imbriqué est déconseillée. Si vous avez besoin de plusieurs Dialogs sur la page, vous pouvez les aplatir afin qu'ils soit au même niveau. Si vous devez absolument utiliser un Dialog imbriqué, configurez l'attribut `append-to-body` du Dialog imbriqué à `true` et il sera ajouté au body au lieu de son noeud parent, afin d'avoir un affichage correct.
+```html
+<template>
+  <el-button type="text" @click="outerVisible = true">Ouvrir le modal extérieur</el-button>
+
+  <el-dialog title="Modal extérieur" :visible.sync="outerVisible">
+    <el-dialog
+        width="30%"
+        title="Modal intérieur"
+        :visible.sync="innerVisible"
+        append-to-body>
+    </el-dialog>
+    <div slot="footer" class="dialog-footer">
+      <el-button @click="outerVisible = false">Annuler</el-button>
+      <el-button type="primary" @click="innerVisible = true">Ouvrir le modal intérieur</el-button>
+    </div>
+  </el-dialog>
+</template>
+
+<script>
+  export default {
+    data() {
+      return {
+        outerVisible: false,
+        innerVisible: false
+      };
+    }
+  }
+</script>
+```
+:::
+
+### Centrer le contenu
+
+Le contenu du modal peut être centré.
+
+:::demo Régler `center` à `true` centrera horizontalement le header et le footer. `center` n'affecte que le header et le footer. Le contenu du body pouvant être n'importe quoi, si vous désirez le centrer vous devrez ajouter des règles CSS.
+
+```html
+<el-button type="text" @click="centerDialogVisible = true">Cliquez pour ouvrir le modal</el-button>
+
+<el-dialog
+  title="Attention"
+  :visible.sync="centerDialogVisible"
+  width="30%"
+  center>
+  <span>Le contenu du modal n'est pas centré par défaut.</span>
+  <span slot="footer" class="dialog-footer">
+    <el-button @click="centerDialogVisible = false">Annuler</el-button>
+    <el-button type="primary" @click="centerDialogVisible = false">Confirmer</el-button>
+  </span>
+</el-dialog>
+
+<script>
+  export default {
+    data() {
+      return {
+        centerDialogVisible: false
+      };
+    }
+  };
+</script>
+```
+:::
+
+:::tip
+Le contenu de Dialog bénéficie du lazy loading, ce qui signifie que le slot par défaut n'est pas généré par le DOM avant la première ouverture. Si vous avez besoin de manipuler le DOM ou d'accéder à un composant via `ref`, vous pouvez le faire avec la callback de l'évènement `open`.
+:::
+
+:::tip
+Si la variable liée à `visible` est gérée dans Vuex, le modificateur `.sync` ne peut pas fonctionner. Dans ce cas retirez-le, écoutez les évènements `open` et `close`, et commitez les mutations Vuex pour mettre à jour la valeur de cette variable.
+:::
+
+### Attributs
+
+| Attribut      | Description          | Type      | Valeurs acceptées       | Défaut  |
+|---------- |-------------- |---------- |--------------------------------  |-------- |
+| visible   | Visibilité du Dialog, supporte le modificateur .sync. | boolean | — | false |
+| title     | Titre du Dialog. Peut aussi être passé via un slot (voir la table suivante). | string    | — | — |
+| width     | Largeur du Dialog. | string    | — | 50% |
+| fullscreen     | Si le Dialog doit être en plein écran. | boolean    | — | false |
+| top      | Valeur du `margin-top` du CSS du Dialog. | string    | — | 15vh |
+| modal     | Si un masque est affiché. | boolean   | — | true |
+| modal-append-to-body     | S'il faut ajouter le modal au body. Si `false`, le modal sera ajouter à l'élément parent du Dialog. | boolean   | — | true |
+| append-to-body     | S'il faut ajouter le Dialog au body. Un Dialog imbriqué doit avoir cet attribut à `true`. | boolean   | — | false |
+| lock-scroll     | Si le défilement du body est désactivé. | boolean   | — | true |
+| custom-class      | Nom de classe pour le Dialog | string    | — | — |
+| close-on-click-modal | Si le Dialog peut être fermé en cliquant sur le masque. | boolean    | — | true |
+| close-on-press-escape | Si le Dialog peut être fermé en appuyant sur Echap. | boolean    | — | true |
+| show-close | Si le bouton de fermeture doit apparaître. | boolean    | — | true |
+| before-close | Callback avant la fermeture du Dialog. | function(done)，done est utilisé pour fermer le Dialog. | — | — |
+| center | Si le header et le footer doivent être centrés. | boolean | — | false |
+| destroy-on-close | Destroy elements in Dialog when closed   | boolean | — | false |
+
+### Slot
+
+| Nom | Description |
+|------|--------|
+| — | Contenu du Dialog. |
+| title | Contenu du titre. |
+| footer | Contenu du footer. |
+
+### Évènements
+
+| Nom | Description | Paramètres |
+|---------- |-------- |---------- |
+| open | Se déclenche quand le Dialog s'ouvre. | — |
+| opened | Se déclenche quand l'animation d'ouverture est terminée. | — |
+| close | Se déclenche quand le Dialog se ferme. | — |
+| closed | Se déclenche quand l'animation de fermeture du Dialog est terminée. | — |
diff --git a/examples/docs/fr-FR/divider.md b/examples/docs/fr-FR/divider.md
new file mode 100644
index 00000000000..6676ef91fe9
--- /dev/null
+++ b/examples/docs/fr-FR/divider.md
@@ -0,0 +1,61 @@
+## Divider
+
+Une ligne de séparation entre deux contenus.
+
+### Usage basique
+
+Séparer le texte de deux paragraphes.
+
+:::demo
+```html
+<template>
+  <div>
+    <span>Je suis assis à ma fenêtre ce matin où le monde, tel un passant, s’arrête un instant, me fait signe de la tête et part.</span>
+    <el-divider></el-divider>
+    <span>Les petites pensées sont le bruissement des feuilles; ils ont leur murmure de joie dans mon esprit.</span>
+  </div>
+</template>
+```
+:::
+
+### Contenu personnalisé
+
+Vous ajouter du contenu dans la ligne de séparation.
+
+:::demo
+```html
+<template>
+  <div>
+    <span>Vous ne voyez pas ce que vous êtes, ce que vous voyez est votre ombre.</span>
+    <el-divider content-position="left">Rabindranath Tagore</el-divider>
+    <span>Je ne peux pas choisir le meilleur. Le meilleur me choisit.</span>
+    <el-divider><i class="el-icon-star-on"></i></el-divider>
+    <span>Mes souhaits sont des imbéciles, ils crient à travers ta chanson, mon Maître. Laisse-moi mais écoute.</span>
+    <el-divider content-position="right">Rabindranath Tagore</el-divider>
+  </div>
+</template>
+```
+:::
+
+### Séparation verticale
+
+:::demo
+```html
+<template>
+  <div>
+    <span>Pluie</span>
+    <el-divider direction="vertical"></el-divider>
+    <span>Maison</span>
+    <el-divider direction="vertical"></el-divider>
+    <span>Herbe</span>
+  </div>
+</template>
+```
+:::
+
+### Attributs
+
+| Attribut      | Description          | Type      | Valeurs acceptées       | Défaut  |
+|-------------  |---------------- |---------------- |---------------------- |-------- |
+| direction      | Règle la direction du séparateur.  | string  |          horizontal / vertical           |    horizontal     |
+| content-position      | Personnalise le contenu du séparateur. | String  |  left / right / center  |  center |
diff --git a/examples/docs/fr-FR/drawer.md b/examples/docs/fr-FR/drawer.md
new file mode 100644
index 00000000000..7e99cdd7807
--- /dev/null
+++ b/examples/docs/fr-FR/drawer.md
@@ -0,0 +1,305 @@
+## Drawer
+
+Sometimes, `Dialog` does not always satisfy our requirements, let's say you have a massive form, or you need space to display something like `terms & conditions`, `Drawer` has almost identical API with `Dialog`, but it introduces different user experience.
+
+### Basic Usage
+
+Callout a temporary drawer, from multiple direction
+
+:::demo You must set `visible` for `Drawer` like `Dialog` does to control the visibility of `Drawer` itself, it's `boolean` type. `Drawer` has to parts: `title` & `body`, the `title` is a named slot, you can also set the title through attribute named `title`, default to an empty string, the `body` part is the main area of `Drawer`, which contains user defined content. When opening, `Drawer` expand itself from the **right corner to left** which size is **30%** of the browser window by default. You can change that default behavior by setting `direction` and `size` attribute. This show case also demonstrated how to use the `before-close` API, check the Attribute section for more detail
+
+```html
+<el-radio-group v-model="direction">
+  <el-radio label="ltr">left to right</el-radio>
+  <el-radio label="rtl">right to left</el-radio>
+  <el-radio label="ttb">top to bottom</el-radio>
+  <el-radio label="btt">bottom to top</el-radio>
+</el-radio-group>
+
+<el-button @click="drawer = true" type="primary" style="margin-left: 16px;">
+  open
+</el-button>
+
+<el-drawer
+  title="I am the title"
+  :visible.sync="drawer"
+  :direction="direction"
+  :before-close="handleClose">
+  <span>Hi, there!</span>
+</el-drawer>
+
+<script>
+  export default {
+    data() {
+      return {
+        drawer: false,
+        direction: 'rtl',
+      };
+    },
+    methods: {
+      handleClose(done) {
+        this.$confirm('Are you sure you want to close this?')
+          .then(_ => {
+            done();
+          })
+          .catch(_ => {});
+      }
+    }
+  };
+</script>
+```
+:::
+
+### No Title
+
+When you no longer need a title, you can remove title from drawer.
+
+:::demo Set the `withHeader` attribute to **false**, you can remove the title from drawer, thus your drawer can have more space on screen. If you want to be accessible, make sure to set the `title` attribute.
+
+```html
+<el-button @click="drawer = true" type="primary" style="margin-left: 16px;">
+  open
+</el-button>
+
+<el-drawer
+  title="I am the title"
+  :visible.sync="drawer"
+  :with-header="false">
+  <span>Hi there!</span>
+</el-drawer>
+
+<script>
+  export default {
+    data() {
+      return {
+        drawer: false,
+      };
+    }
+  };
+</script>
+```
+:::
+
+### Customization Content
+
+Like `Dialog`, `Drawer` can do many diverse interaction as you wanted.
+
+:::demo
+
+```html
+<el-button type="text" @click="table = true">Open Drawer with nested table</el-button>
+<el-button type="text" @click="dialog = true">Open Drawer with nested form</el-button>
+<el-drawer
+  title="I have a nested table inside!"
+  :visible.sync="table"
+  direction="rtl"
+  size="50%">
+   <el-table :data="gridData">
+      <el-table-column property="date" label="Date" width="150"></el-table-column>
+      <el-table-column property="name" label="Name" width="200"></el-table-column>
+      <el-table-column property="address" label="Address"></el-table-column>
+    </el-table>
+</el-drawer>
+
+<el-drawer
+  title="I have a nested form inside!"
+  :before-close="handleClose"
+  :visible.sync="dialog"
+  direction="ltr"
+  custom-class="demo-drawer"
+  ref="drawer"
+  >
+  <div class="demo-drawer__content">
+    <el-form :model="form">
+      <el-form-item label="Name" :label-width="formLabelWidth">
+        <el-input v-model="form.name" autocomplete="off"></el-input>
+      </el-form-item>
+      <el-form-item label="Area" :label-width="formLabelWidth">
+        <el-select v-model="form.region" placeholder="Please select activity area">
+          <el-option label="Area1" value="shanghai"></el-option>
+          <el-option label="Area2" value="beijing"></el-option>
+        </el-select>
+      </el-form-item>
+    </el-form>
+    <div class="demo-drawer__footer">
+      <el-button @click="cancelForm">Cancel</el-button>
+      <el-button type="primary" @click="$refs.drawer.closeDrawer()" :loading="loading">{{ loading ? 'Submitting ...' : 'Submit' }}</el-button>
+    </div>
+  </div>
+</el-drawer>
+
+<script>
+export default {
+  data() {
+    return {
+      table: false,
+      dialog: false,
+      loading: false,
+      gridData: [{
+        date: '2016-05-02',
+        name: 'Peter Parker',
+        address: 'Queens, New York City'
+      }, {
+        date: '2016-05-04',
+        name: 'Peter Parker',
+        address: 'Queens, New York City'
+      }, {
+        date: '2016-05-01',
+        name: 'Peter Parker',
+        address: 'Queens, New York City'
+      }, {
+        date: '2016-05-03',
+        name: 'Peter Parker',
+        address: 'Queens, New York City'
+      }],
+      form: {
+        name: '',
+        region: '',
+        date1: '',
+        date2: '',
+        delivery: false,
+        type: [],
+        resource: '',
+        desc: ''
+      },
+      formLabelWidth: '80px',
+      timer: null,
+    };
+  },
+  methods: {
+    handleClose(done) {
+      if (this.loading) {
+        return;
+      }
+      this.$confirm('Do you want to submit?')
+        .then(_ => {
+          this.loading = true;
+          this.timer = setTimeout(() => {
+            done();
+            // animation takes time
+            setTimeout(() => {
+              this.loading = false;
+            }, 400);
+          }, 2000);
+        })
+        .catch(_ => {});
+    },
+    cancelForm() {
+      this.loading = false;
+      this.dialog = false;
+      clearTimeout(this.timer);
+    }
+  }
+}
+</script>
+```
+:::
+
+### Nested Drawer
+
+You can also have multiple layer of `Drawer` just like `Dialog`.
+:::demo If you need multiple Drawer in different layer, you must set the `append-to-body` attribute to **true**
+
+```html
+
+<el-button @click="drawer = true" type="primary" style="margin-left: 16px;">
+  open
+</el-button>
+
+<el-drawer
+  title="I'm outer Drawer"
+  :visible.sync="drawer"
+  size="50%">
+  <div>
+   <el-button @click="innerDrawer = true">Click me!</el-button>
+   <el-drawer
+     title="I'm inner Drawer"
+     :append-to-body="true"
+     :before-close="handleClose"
+     :visible.sync="innerDrawer">
+     <p>_(:зゝ∠)_</p>
+   </el-drawer>
+  </div>
+</el-drawer>
+
+<script>
+  export default {
+    data() {
+      return {
+        drawer: false,
+        innerDrawer: false,
+      };
+    },
+    methods: {
+      handleClose(done) {
+        this.$confirm('You still have unsaved data, proceed?')
+          .then(_ => {
+            done();
+          })
+          .catch(_ => {});
+      }
+    }
+  };
+</script>
+
+```
+:::
+
+:::tip
+
+The content inside Drawer should be lazy rendered, which means that the content inside Drawer will not impact the initial render performance, therefore any DOM operation should be performed through `ref` or after `open` event emitted.
+
+:::
+
+:::tip
+
+Drawer provides an API called `destroyOnClose`, which is a flag variable that indicates should destroy the children content inside Drawer after Drawer was closed. You can use this API when you need your `mounted` life cycle to be called every time the Drawer opens.
+
+:::
+
+:::tip
+
+If the variable bound to `visible` is managed in Vuex store, the `.sync` can not work properly. In this case, please remove the `.sync` modifier, listen to `open` and `close` events of Dialog, and commit Vuex mutations to update the value of that variable in the event handlers.
+
+:::
+
+### Drawer Attributes
+
+| Parameter| Description | Type      | Acceptable Values                           | Defaults  |
+|---------- |-------------- |---------- |--------------------------------  |-------- |
+| append-to-body | Controls should Drawer be inserted to DocumentBody Element, nested Drawer must assign this param to **true**| boolean   | — | false |
+| before-close | If set, closing procedure will be halted | function(done), done is function type that accepts a boolean as parameter, calling done with true or without parameter will abort the close procedure | — | — |
+| close-on-press-escape | Indicates whether Drawer can be closed by pressing ESC | boolean | — | true |
+| custom-class | Extra class names for Drawer | string | — | — |
+| destroy-on-close | Indicates whether children should be destroyed after Drawer closed | boolean | - | false |
+| modal | Should show shadowing layer | boolean | — | true |
+| modal-append-to-body | Indicates should shadowing layer be insert into DocumentBody element | boolean   | — | true |
+| direction | Drawer's opening direction | Direction | rtl / ltr / ttb / btt | rtl |
+| show-close | Should show close button at the top right of Drawer | boolean | — | true |
+| size | Drawer's size, if Drawer is horizontal mode, it effects the width property, otherwise it effects the height property, when size is `number` type, it describes the size by unit of pixels; when size is `string` type, it should be used with `x%` notation, other wise it will be interpreted to pixel unit | number / string | - | '30%' |
+| title | Drawer's title, can also be set by named slot, detailed descriptions can be found in the slot form | string | — | — |
+| visible | Should Drawer be displayed, also support the `.sync` notation | boolean | — | false |
+| wrapperClosable | Indicates whether user can close Drawer by clicking the shadowing layer. | boolean | - | true |
+| withHeader | Flag that controls the header section's existance, default to true, when withHeader set to false, both `title attribute` and `title slot` won't work | boolean | - | true |
+
+### Drawer Slot
+
+| Name | Description |
+|------|--------|
+| — | Drawer's Content |
+| title | Drawer Title Section |
+
+### Drawer Methods
+
+| Name | Description |
+| ---- | ---  |
+| closeDrawer | In order to close Drawer, this method will call `before-close`. |
+
+### Drawer Events
+
+| Event Name | Description | Parameter |
+|---------- |-------- |---------- |
+| open  | Triggered before Drawer opening animation begins  | — |
+| opened  | Triggered after Drawer opening animation ended | — |
+| close  | Triggered before Drawer closing animation begins | — |
+| closed | Triggered after Drawer closing animation ended | — |
diff --git a/examples/docs/fr-FR/dropdown.md b/examples/docs/fr-FR/dropdown.md
new file mode 100644
index 00000000000..7ddcae1f8f3
--- /dev/null
+++ b/examples/docs/fr-FR/dropdown.md
@@ -0,0 +1,307 @@
+## Dropdown
+Menu déroulant pour afficher des listes de liens et d'actions possibles.
+
+### Usage
+Passez sur le menu avec la souris pour dérouler son contenu.
+
+:::demo L'élément déclencheur est généré par le `slot` par défaut, et le menu déroulant est généré par le `slot` appelé `dropdown`. Par défaut le menu apparaît simplement en passant la souris sur l'élément déclencheur, sans avoir à cliquer.
+
+```html
+<el-dropdown>
+  <span class="el-dropdown-link">
+    Menu déroulant<i class="el-icon-arrow-down el-icon--right"></i>
+  </span>
+  <el-dropdown-menu slot="dropdown">
+    <el-dropdown-item>Action 1</el-dropdown-item>
+    <el-dropdown-item>Action 2</el-dropdown-item>
+    <el-dropdown-item>Action 3</el-dropdown-item>
+    <el-dropdown-item disabled>Action 4</el-dropdown-item>
+    <el-dropdown-item divided>Action 5</el-dropdown-item>
+  </el-dropdown-menu>
+</el-dropdown>
+
+<style>
+  .el-dropdown-link {
+    cursor: pointer;
+    color: #2460e0;
+  }
+  .el-icon-arrow-down {
+    font-size: 12px;
+  }
+</style>
+
+```
+
+:::
+
+### Élément déclencheur
+
+Utilisez le bouton pour ouvrir le menu déroulant.
+
+:::demo Utilisez `split-button` pour séparer le déclencheur du reste du bouton, ce dernier devenant la partie gauche et le déclencheur la partie droite.
+```html
+<el-dropdown>
+  <el-button type="primary">
+    Liste déroulante<i class="el-icon-arrow-down el-icon--right"></i>
+  </el-button>
+  <el-dropdown-menu slot="dropdown">
+    <el-dropdown-item>Action 1</el-dropdown-item>
+    <el-dropdown-item>Action 2</el-dropdown-item>
+    <el-dropdown-item>Action 3</el-dropdown-item>
+    <el-dropdown-item>Action 4</el-dropdown-item>
+    <el-dropdown-item>Action 5</el-dropdown-item>
+  </el-dropdown-menu>
+</el-dropdown>
+<el-dropdown split-button type="primary" @click="handleClick">
+  Liste déroulante
+  <el-dropdown-menu slot="dropdown">
+    <el-dropdown-item>Action 1</el-dropdown-item>
+    <el-dropdown-item>Action 2</el-dropdown-item>
+    <el-dropdown-item>Action 3</el-dropdown-item>
+    <el-dropdown-item>Action 4</el-dropdown-item>
+    <el-dropdown-item>Action 5</el-dropdown-item>
+  </el-dropdown-menu>
+</el-dropdown>
+
+<style>
+  .el-dropdown {
+    vertical-align: top;
+  }
+  .el-dropdown + .el-dropdown {
+    margin-left: 15px;
+  }
+  .el-icon-arrow-down {
+    font-size: 12px;
+  }
+</style>
+
+<script>
+  export default {
+    methods: {
+      handleClick() {
+        alert('button click');
+      }
+    }
+  }
+</script>
+```
+:::
+
+### Déclencheur
+
+Vous pouvez choisir de déclencher le menu au moment du clic, ou en passant la souris sur l'élément.
+
+:::demo Utilisez l'attribut `trigger`. Par défaut, il est à `hover`.
+
+```html
+<el-row class="block-col-2">
+  <el-col :span="12">
+    <span class="demonstration">En passant la souris</span>
+    <el-dropdown>
+      <span class="el-dropdown-link">
+        Liste déroulante<i class="el-icon-arrow-down el-icon--right"></i>
+      </span>
+      <el-dropdown-menu slot="dropdown">
+        <el-dropdown-item icon="el-icon-plus">Action 1</el-dropdown-item>
+        <el-dropdown-item icon="el-icon-circle-plus">Action 2</el-dropdown-item>
+        <el-dropdown-item icon="el-icon-circle-plus-outline">Action 3</el-dropdown-item>
+        <el-dropdown-item icon="el-icon-check">Action 4</el-dropdown-item>
+        <el-dropdown-item icon="el-icon-circle-check">Action 5</el-dropdown-item>
+      </el-dropdown-menu>
+    </el-dropdown>
+  </el-col>
+  <el-col :span="12">
+    <span class="demonstration">En cliquant</span>
+    <el-dropdown trigger="click">
+      <span class="el-dropdown-link">
+        Liste déroulante<i class="el-icon-arrow-down el-icon--right"></i>
+      </span>
+      <el-dropdown-menu slot="dropdown">
+        <el-dropdown-item icon="el-icon-plus">Action 1</el-dropdown-item>
+        <el-dropdown-item icon="el-icon-circle-plus">Action 2</el-dropdown-item>
+        <el-dropdown-item icon="el-icon-circle-plus-outline">Action 3</el-dropdown-item>
+        <el-dropdown-item icon="el-icon-check">Action 4</el-dropdown-item>
+        <el-dropdown-item icon="el-icon-circle-check">Action 5</el-dropdown-item>
+      </el-dropdown-menu>
+    </el-dropdown>
+  </el-col>
+</el-row>
+
+<style>
+  .el-dropdown-link {
+    cursor: pointer;
+    color: #2460e0;
+  }
+  .el-icon-arrow-down {
+    font-size: 12px;
+  }
+  .demonstration {
+    display: block;
+    color: #8492a6;
+    font-size: 14px;
+    margin-bottom: 20px;
+  }
+</style>
+```
+:::
+
+### Fermer le menu
+
+Utilisez l'attribut `hide-on-click` pour déterminer si le menu se ferme après avoir cliqué sur un élément de la liste.
+
+:::demo Par défaut le menu se ferme après avoir cliqué dans la liste. Vous pouvez changer cette option en mettant `hide-on-click` à `false`.
+```html
+<el-dropdown :hide-on-click="false">
+  <span class="el-dropdown-link">
+    Liste déroulante<i class="el-icon-arrow-down el-icon--right"></i>
+  </span>
+  <el-dropdown-menu slot="dropdown">
+    <el-dropdown-item>Action 1</el-dropdown-item>
+    <el-dropdown-item>Action 2</el-dropdown-item>
+    <el-dropdown-item>Action 3</el-dropdown-item>
+    <el-dropdown-item disabled>Action 4</el-dropdown-item>
+    <el-dropdown-item divided>Action 5</el-dropdown-item>
+  </el-dropdown-menu>
+</el-dropdown>
+
+<style>
+  .el-dropdown-link {
+    cursor: pointer;
+    color: #2460e0;
+  }
+  .el-icon-arrow-down {
+    font-size: 12px;
+  }
+</style>
+```
+:::
+
+### Évènement command
+
+Cliquer sur un élément du dropdown déclenche un évènement "command".
+Le paramètre de cet évènement peut être assigné à chaque élément de la liste.
+
+:::demo
+```html
+<el-dropdown @command="handleCommand">
+  <span class="el-dropdown-link">
+    Liste déroulante<i class="el-icon-arrow-down el-icon--right"></i>
+  </span>
+  <el-dropdown-menu slot="dropdown">
+    <el-dropdown-item command="a">Action 1</el-dropdown-item>
+    <el-dropdown-item command="b">Action 2</el-dropdown-item>
+    <el-dropdown-item command="c">Action 3</el-dropdown-item>
+    <el-dropdown-item command="d" disabled>Action 4</el-dropdown-item>
+    <el-dropdown-item command="e" divided>Action 5</el-dropdown-item>
+  </el-dropdown-menu>
+</el-dropdown>
+
+<style>
+  .el-dropdown-link {
+    cursor: pointer;
+    color: #2460e0;
+  }
+  .el-icon-arrow-down {
+    font-size: 12px;
+  }
+</style>
+
+<script>
+  export default {
+    methods: {
+      handleCommand(command) {
+        this.$message('click on item ' + command);
+      }
+    }
+  }
+</script>
+```
+:::
+
+### Tailles
+
+En plus de la taille par défaut, le composant Dropdown propose trois autres tailles différentes.
+
+:::demo Utilisez `size` pour déterminer une autre taille parmi `medium`, `small` ou `mini`.
+
+```html
+<el-dropdown split-button type="primary">
+  Défaut
+  <el-dropdown-menu slot="dropdown">
+    <el-dropdown-item>Action 1</el-dropdown-item>
+    <el-dropdown-item>Action 2</el-dropdown-item>
+    <el-dropdown-item>Action 3</el-dropdown-item>
+    <el-dropdown-item>Action 4</el-dropdown-item>
+  </el-dropdown-menu>
+</el-dropdown>
+
+<el-dropdown size="medium" split-button type="primary">
+  Medium
+  <el-dropdown-menu slot="dropdown">
+    <el-dropdown-item>Action 1</el-dropdown-item>
+    <el-dropdown-item>Action 2</el-dropdown-item>
+    <el-dropdown-item>Action 3</el-dropdown-item>
+    <el-dropdown-item>Action 4</el-dropdown-item>
+  </el-dropdown-menu>
+</el-dropdown>
+
+<el-dropdown size="small" split-button type="primary">
+  Small
+  <el-dropdown-menu slot="dropdown">
+   <el-dropdown-item>Action 1</el-dropdown-item>
+   <el-dropdown-item>Action 2</el-dropdown-item>
+   <el-dropdown-item>Action 3</el-dropdown-item>
+   <el-dropdown-item>Action 4</el-dropdown-item>
+  </el-dropdown-menu>
+</el-dropdown>
+
+<el-dropdown size="mini" split-button type="primary">
+  Mini
+  <el-dropdown-menu slot="dropdown">
+    <el-dropdown-item>Action 1</el-dropdown-item>
+    <el-dropdown-item>Action 2</el-dropdown-item>
+    <el-dropdown-item>Action 3</el-dropdown-item>
+    <el-dropdown-item>Action 4</el-dropdown-item>
+  </el-dropdown-menu>
+</el-dropdown>
+```
+:::
+
+
+### Attributs du Dropdown
+
+| Attribut      | Description          | Type      | Valeurs acceptées       | Défaut  |
+|-------------  |---------------- |---------------- |---------------------- |-------- |
+| type          | Type du bouton, se référer au composant `Button`. Ne marche que si `split-button` est `true`.  | string  |  —   |    —     |
+| size          | Taille du menu, marche aussi avec `split button`.  | string  | medium / small / mini  |    —     |
+| split-button | Si le bouton est séparé en deux. | boolean         |     —       | false   |
+| placement    | Emplacement du menu déroulant | string | top/top-start/top-end/bottom/bottom-start/bottom-end  | bottom-end |
+| trigger       | Comment déclencher l'ouverture du menu.     | string  |    hover/click  |  hover |
+| hide-on-click | Si le menu doit disparaître après avoir cliqué sur un élément.     | boolean          | — | true |
+| show-timeout | Délai avant d'afficher le menu (ne marche que si `trigger` est `hover`) | number | — | 250 |
+| hide-timeout | Délai avant de cacher le menu (ne marche que si `trigger` est `hover`) | number | — | 150 |
+| tabindex     | [tabindex](https://developer.mozilla.org/fr/docs/Web/HTML/Attributs_universels/tabindex) de Dropdown | number | — | 0 |
+
+### Dropdown Slots
+
+| Nom | Description |
+|------|--------|
+| — | Contenu du Dropdown. Note: doit être un élément du DOM valide (ex. `<span>, <button> etc.`) ou `el-component`, pour y attacher un évènement.  |
+| dropdown | Contenu du menu du Dropdown, en général un élément `<el-dropdown-menu>`. |
+
+### Évènements du Dropdown
+
+| Nom | Description | Paramètres |
+|---------- |-------- |---------- |
+| click | Si `split-button` est `true`, se déclenche quand le bouton de gauche est cliqué. | — |
+| command | Se déclenche quand un élément de la liste est cliqué. | L'attribut command de l'élément de la liste. |
+| visible-change | Se déclenche quand le menu s'affiche ou disparaît. | `true` quand il apparaît, `false` sinon. |
+
+### Attributs des éléments du menu
+
+| Attribut      | Description          | Type      | Valeurs acceptées       | Défaut  |
+|-------------  |---------------- |---------------- |---------------------- |-------- |
+| command       | Le contenu à envoyer au callback de l'évènement `command` du Dropdown. | string/number/object  |          —             |    —     |
+| disabled      | Si l'élément est désactivé.  | boolean  |          —             |    false     |
+| divided       | Si un diviseur doit être affiché.  | boolean  |          —             |    false     |
+| icon          | Classe de l'icône. | string   |  —  |  —  |
diff --git a/examples/docs/fr-FR/edit-table.md b/examples/docs/fr-FR/edit-table.md
new file mode 100644
index 00000000000..0b99bde7fc7
--- /dev/null
+++ b/examples/docs/fr-FR/edit-table.md
@@ -0,0 +1 @@
+## EditTable
diff --git a/examples/docs/fr-FR/empty.md b/examples/docs/fr-FR/empty.md
new file mode 100644
index 00000000000..86e90e45463
--- /dev/null
+++ b/examples/docs/fr-FR/empty.md
@@ -0,0 +1 @@
+## Empty
diff --git a/examples/docs/fr-FR/form.md b/examples/docs/fr-FR/form.md
new file mode 100644
index 00000000000..62a3a2865af
--- /dev/null
+++ b/examples/docs/fr-FR/form.md
@@ -0,0 +1,650 @@
+## Form
+
+Un formulaire est constitué des éléments `input`, `radio`, `select`, `checkbox`, etc. Il sert principalement à collecter, vérifier et soumettre des données.
+
+### Formulaire de base
+
+Il peut contenir toutes sortes de champs tels que `input`, `select`, `radio` et `checkbox`.
+
+:::demo Dans chaque composant `form`, il vous faudra utiliser la balise `form-item` pour servir de conteneur à chaque champ.
+
+```html
+<el-form ref="form" :model="form" label-width="120px">
+  <el-form-item label="Activity name">
+    <el-input v-model="form.name"></el-input>
+  </el-form-item>
+  <el-form-item label="Activity zone">
+    <el-select v-model="form.region" placeholder="please select your zone">
+      <el-option label="Zone one" value="shanghai"></el-option>
+      <el-option label="Zone two" value="beijing"></el-option>
+    </el-select>
+  </el-form-item>
+  <el-form-item label="Activity time">
+    <el-col :span="11">
+      <el-date-picker type="date" placeholder="Choisissez une date" v-model="form.date1" style="width: 100%;"></el-date-picker>
+    </el-col>
+    <el-col class="line" :span="2">-</el-col>
+    <el-col :span="11">
+      <el-time-picker placeholder="Pick a time" v-model="form.date2" style="width: 100%;"></el-time-picker>
+    </el-col>
+  </el-form-item>
+  <el-form-item label="Instant delivery">
+    <el-switch v-model="form.delivery"></el-switch>
+  </el-form-item>
+  <el-form-item label="Activity type">
+    <el-checkbox-group v-model="form.type">
+      <el-checkbox label="Online activities" name="type"></el-checkbox>
+      <el-checkbox label="Promotion activities" name="type"></el-checkbox>
+      <el-checkbox label="Offline activities" name="type"></el-checkbox>
+      <el-checkbox label="Simple brand exposure" name="type"></el-checkbox>
+    </el-checkbox-group>
+  </el-form-item>
+  <el-form-item label="Resources">
+    <el-radio-group v-model="form.resource">
+      <el-radio label="Sponsor"></el-radio>
+      <el-radio label="Venue"></el-radio>
+    </el-radio-group>
+  </el-form-item>
+  <el-form-item label="Activity form">
+    <el-input type="textarea" v-model="form.desc"></el-input>
+  </el-form-item>
+  <el-form-item>
+    <el-button type="primary" @click="onSubmit">Créer</el-button>
+    <el-button>Annuler</el-button>
+  </el-form-item>
+</el-form>
+<script>
+  export default {
+    data() {
+      return {
+        form: {
+          name: '',
+          region: '',
+          date1: '',
+          date2: '',
+          delivery: false,
+          type: [],
+          resource: '',
+          desc: ''
+        }
+      }
+    },
+    methods: {
+      onSubmit() {
+        console.log('submit!');
+      }
+    }
+  }
+</script>
+```
+:::
+
+:::tip
+[W3C](https://www.w3.org/MarkUp/html-spec/html-spec_8.html#SEC8.2) stipule que
+> <i>Lorsqu'il n'y a qu'un seul champ de type texte dans un formulaire, le navigateur devrait accepter la pression de la touche Entrée sur ce champ comme méthode de soumission du formulaire</i>
+
+Pour éviter ce comportement, vous pouvez ajouter `@submit.native.prevent` dans `<el-form>`.
+  :::
+
+### Formulaire horizontal
+
+Lorsque l'espace vertical est limité et que le formulaire est relativement simple, vous pouvez le placer sur une seule ligne.
+
+:::demo Mettez l'attribut `inline` à `true` et le formulaire sera en une seul ligne.
+
+```html
+<el-form :inline="true" :model="formInline" class="demo-form-inline">
+  <el-form-item label="Approved by">
+    <el-input v-model="formInline.user" placeholder="Approved by"></el-input>
+  </el-form-item>
+  <el-form-item label="Activity zone">
+    <el-select v-model="formInline.region" placeholder="Activity zone">
+      <el-option label="Zone one" value="shanghai"></el-option>
+      <el-option label="Zone two" value="beijing"></el-option>
+    </el-select>
+  </el-form-item>
+  <el-form-item>
+    <el-button type="primary" @click="onSubmit">Query</el-button>
+  </el-form-item>
+</el-form>
+<script>
+  export default {
+    data() {
+      return {
+        formInline: {
+          user: '',
+          region: ''
+        }
+      }
+    },
+    methods: {
+      onSubmit() {
+        console.log('submit!');
+      }
+    }
+  }
+</script>
+```
+:::
+
+### Alignement
+
+Suivant votre design, il y a différents moyens d'aligner vos labels.
+
+:::demo L'attribut `label-position` permet de régler l'alignement, il peut être à `top` ou `left`. Quand il est à `top`, les labels sont placés au-dessus des champs.
+
+```html
+<el-radio-group v-model="labelPosition" size="small">
+  <el-radio-button label="left">Left</el-radio-button>
+  <el-radio-button label="right">Right</el-radio-button>
+  <el-radio-button label="top">Top</el-radio-button>
+</el-radio-group>
+<div style="margin: 20px;"></div>
+<el-form :label-position="labelPosition" label-width="100px" :model="formLabelAlign">
+  <el-form-item label="Name">
+    <el-input v-model="formLabelAlign.name"></el-input>
+  </el-form-item>
+  <el-form-item label="Activity zone">
+    <el-input v-model="formLabelAlign.region"></el-input>
+  </el-form-item>
+  <el-form-item label="Activity form">
+    <el-input v-model="formLabelAlign.type"></el-input>
+  </el-form-item>
+</el-form>
+<script>
+  export default {
+    data() {
+      return {
+        labelPosition: 'right',
+        formLabelAlign: {
+          name: '',
+          region: '',
+          type: ''
+        }
+      };
+    }
+  }
+</script>
+```
+:::
+
+### Validation
+
+Le composant Form vous permet d'effectuer des vérifications, afin de détecter et corriger les erreurs facilement.
+
+:::demo Ajoutez l'attribut `rules` au composant `Form`, passez les règles de validation, et configurez l'attribut `prop` de `Form-Item` pour ajouter la clé de la règle correspondante au champ. Plus d'informations ici:  [async-validator](https://github.com/yiminghe/async-validator).
+
+```html
+<el-form :model="ruleForm" :rules="rules" ref="ruleForm" label-width="120px" class="demo-ruleForm">
+  <el-form-item label="Activity name" prop="name">
+    <el-input v-model="ruleForm.name"></el-input>
+  </el-form-item>
+  <el-form-item label="Activity zone" prop="region">
+    <el-select v-model="ruleForm.region" placeholder="Activity zone">
+      <el-option label="Zone one" value="shanghai"></el-option>
+      <el-option label="Zone two" value="beijing"></el-option>
+    </el-select>
+  </el-form-item>
+  <el-form-item label="Activity time" required>
+    <el-col :span="11">
+      <el-form-item prop="date1">
+        <el-date-picker type="date" placeholder="Choisissez une date" v-model="ruleForm.date1" style="width: 100%;"></el-date-picker>
+      </el-form-item>
+    </el-col>
+    <el-col class="line" :span="2">-</el-col>
+    <el-col :span="11">
+      <el-form-item prop="date2">
+        <el-time-picker placeholder="Pick a time" v-model="ruleForm.date2" style="width: 100%;"></el-time-picker>
+      </el-form-item>
+    </el-col>
+  </el-form-item>
+  <el-form-item label="Instant delivery" prop="delivery">
+    <el-switch v-model="ruleForm.delivery"></el-switch>
+  </el-form-item>
+  <el-form-item label="Activity type" prop="type">
+    <el-checkbox-group v-model="ruleForm.type">
+      <el-checkbox label="Online activities" name="type"></el-checkbox>
+      <el-checkbox label="Promotion activities" name="type"></el-checkbox>
+      <el-checkbox label="Offline activities" name="type"></el-checkbox>
+      <el-checkbox label="Simple brand exposure" name="type"></el-checkbox>
+    </el-checkbox-group>
+  </el-form-item>
+  <el-form-item label="Resources" prop="resource">
+    <el-radio-group v-model="ruleForm.resource">
+      <el-radio label="Sponsorship"></el-radio>
+      <el-radio label="Venue"></el-radio>
+    </el-radio-group>
+  </el-form-item>
+  <el-form-item label="Activity form" prop="desc">
+    <el-input type="textarea" v-model="ruleForm.desc"></el-input>
+  </el-form-item>
+  <el-form-item>
+    <el-button type="primary" @click="submitForm('ruleForm')">Créer</el-button>
+    <el-button @click="resetForm('ruleForm')">Réinitialiser</el-button>
+  </el-form-item>
+</el-form>
+<script>
+  export default {
+    data() {
+      return {
+        ruleForm: {
+          name: '',
+          region: '',
+          date1: '',
+          date2: '',
+          delivery: false,
+          type: [],
+          resource: '',
+          desc: ''
+        },
+        rules: {
+          name: [
+            { required: true, message: 'Please input Activity name', trigger: 'blur' },
+            { min: 3, max: 5, message: 'Length should be 3 to 5', trigger: 'blur' }
+          ],
+          region: [
+            { required: true, message: 'Please select Activity zone', trigger: 'change' }
+          ],
+          date1: [
+            { type: 'date', required: true, message: 'Please pick a date', trigger: 'change' }
+          ],
+          date2: [
+            { type: 'date', required: true, message: 'Please pick a time', trigger: 'change' }
+          ],
+          type: [
+            { type: 'array', required: true, message: 'Please select at least one activity type', trigger: 'change' }
+          ],
+          resource: [
+            { required: true, message: 'Please select activity resource', trigger: 'change' }
+          ],
+          desc: [
+            { required: true, message: 'Please input activity form', trigger: 'blur' }
+          ]
+        }
+      };
+    },
+    methods: {
+      submitForm(formName) {
+        this.$refs[formName].validate((valid) => {
+          if (valid) {
+            alert('submit!');
+          } else {
+            console.log('error submit!!');
+            return false;
+          }
+        });
+      },
+      resetForm(formName) {
+        this.$refs[formName].resetFields();
+      }
+    }
+  }
+</script>
+```
+:::
+
+### Validations personnalisées
+
+Cet exemple montre comment vous pouvez personnaliser vos règles de validation pour effectuer une identification à deux facteurs.
+
+:::demo Ici, nous utilisons `status-icon` pour afficher le résultat de la validation sous forme d'icône.
+```html
+<el-form :model="ruleForm" status-icon :rules="rules" ref="ruleForm" label-width="120px" class="demo-ruleForm">
+  <el-form-item label="Password" prop="pass">
+    <el-input type="password" v-model="ruleForm.pass" autocomplete="off"></el-input>
+  </el-form-item>
+  <el-form-item label="Confirm" prop="checkPass">
+    <el-input type="password" v-model="ruleForm.checkPass" autocomplete="off"></el-input>
+  </el-form-item>
+  <el-form-item label="Age" prop="age">
+    <el-input v-model.number="ruleForm.age"></el-input>
+  </el-form-item>
+  <el-form-item>
+    <el-button type="primary" @click="submitForm('ruleForm')">Submit</el-button>
+    <el-button @click="resetForm('ruleForm')">Réinitialiser</el-button>
+  </el-form-item>
+</el-form>
+<script>
+  export default {
+    data() {
+      var checkAge = (rule, value, callback) => {
+        if (!value) {
+          return callback(new Error('Veuillez entrer l\'âge'));
+        }
+        setTimeout(() => {
+          if (!Number.isInteger(value)) {
+            callback(new Error('Veuillez entrer des chiffres'));
+          } else {
+            if (value < 18) {
+              callback(new Error('L\'âge doit être supérieur à 18 ans'));
+            } else {
+              callback();
+            }
+          }
+        }, 1000);
+      };
+      var validatePass = (rule, value, callback) => {
+        if (value === '') {
+          callback(new Error('Veuillez entrer le mot de passe'));
+        } else {
+          if (this.ruleForm.checkPass !== '') {
+            this.$refs.ruleForm.validateField('checkPass');
+          }
+          callback();
+        }
+      };
+      var validatePass2 = (rule, value, callback) => {
+        if (value === '') {
+          callback(new Error('Veuillez entrer à nouveau le mot de passe'));
+        } else if (value !== this.ruleForm.pass) {
+          callback(new Error('Les deux entrées ne correspondent pas!'));
+        } else {
+          callback();
+        }
+      };
+      return {
+        ruleForm: {
+          pass: '',
+          checkPass: '',
+          age: ''
+        },
+        rules: {
+          pass: [
+            { validator: validatePass, trigger: 'blur' }
+          ],
+          checkPass: [
+            { validator: validatePass2, trigger: 'blur' }
+          ],
+          age: [
+            { validator: checkAge, trigger: 'blur' }
+          ]
+        }
+      };
+    },
+    methods: {
+      submitForm(formName) {
+        this.$refs[formName].validate((valid) => {
+          if (valid) {
+            alert('submit!');
+          } else {
+            console.log('error submit!!');
+            return false;
+          }
+        });
+      },
+      resetForm(formName) {
+        this.$refs[formName].resetFields();
+      }
+    }
+  }
+</script>
+```
+:::
+
+:::tip
+Les callback de validations personnalisées doivent être appelées. Un usage plus avancé se trouve ici: [async-validator](https://github.com/yiminghe/async-validator).
+:::
+
+### Ajouter ou supprimer des champs dynamiquement
+
+:::demo En plus de pouvoir passer toutes les règles de validation en une seule fois au formulaire, vous pouvez aussi ajouter ou supprimer des règles sur un seul champ de manière dynamique.
+```html
+<el-form :model="dynamicValidateForm" ref="dynamicValidateForm" label-width="120px" class="demo-dynamic">
+  <el-form-item
+    prop="email"
+    label="Email"
+    :rules="[
+      { required: true, message: 'Veuillez entrer l\'adresse e-mail', trigger: 'blur' },
+      { type: 'email', message: 'Veuillez entrer une adresse e-mail valide', trigger: ['blur', 'change'] }
+    ]"
+  >
+    <el-input v-model="dynamicValidateForm.email"></el-input>
+  </el-form-item>
+  <el-form-item
+    v-for="(domain, index) in dynamicValidateForm.domains"
+    :label="'Domain' + index"
+    :key="domain.key"
+    :prop="'domains.' + index + '.value'"
+    :rules="{
+      required: true, message: 'domain ne peut pas être null', trigger: 'blur'
+    }"
+  >
+    <el-input v-model="domain.value"></el-input><el-button @click.prevent="removeDomain(domain)">Supprimer</el-button>
+  </el-form-item>
+  <el-form-item>
+    <el-button type="primary" @click="submitForm('dynamicValidateForm')">Soumettre</el-button>
+    <el-button @click="addDomain">Nouveau domaine</el-button>
+    <el-button @click="resetForm('dynamicValidateForm')">Réinitialiser</el-button>
+  </el-form-item>
+</el-form>
+<script>
+  export default {
+    data() {
+      return {
+        dynamicValidateForm: {
+          domains: [{
+            key: 1,
+            value: ''
+          }],
+          email: ''
+        }
+      };
+    },
+    methods: {
+      submitForm(formName) {
+        this.$refs[formName].validate((valid) => {
+          if (valid) {
+            alert('submit!');
+          } else {
+            console.log('error submit!!');
+            return false;
+          }
+        });
+      },
+      resetForm(formName) {
+        this.$refs[formName].resetFields();
+      },
+      removeDomain(item) {
+        var index = this.dynamicValidateForm.domains.indexOf(item);
+        if (index !== -1) {
+          this.dynamicValidateForm.domains.splice(index, 1);
+        }
+      },
+      addDomain() {
+        this.dynamicValidateForm.domains.push({
+          key: Date.now(),
+          value: ''
+        });
+      }
+    }
+  }
+</script>
+```
+:::
+
+### Validation des nombres
+
+:::demo Pour valider les nombres correctement, il vous faudra ajouter le modificateur `.number` à l'attribut `v-model`. Il est utilisé par Vuejs pour transformer les valeurs en nombres .
+```html
+<el-form :model="numberValidateForm" ref="numberValidateForm" label-width="100px" class="demo-ruleForm">
+  <el-form-item
+    label="age"
+    prop="age"
+    :rules="[
+      { required: true, message: 'l\'âge est requis'},
+      { type: 'number', message: 'l\'âge doit être un nombre'}
+    ]"
+  >
+    <el-input type="age" v-model.number="numberValidateForm.age" autocomplete="off"></el-input>
+  </el-form-item>
+  <el-form-item>
+    <el-button type="primary" @click="submitForm('numberValidateForm')">Soumettre</el-button>
+    <el-button @click="resetForm('numberValidateForm')">Réinitialiser</el-button>
+  </el-form-item>
+</el-form>
+<script>
+  export default {
+    data() {
+      return {
+        numberValidateForm: {
+          age: ''
+        }
+      };
+    },
+    methods: {
+      submitForm(formName) {
+        this.$refs[formName].validate((valid) => {
+          if (valid) {
+            alert('submit!');
+          } else {
+            console.log('error submit!!');
+            return false;
+          }
+        });
+      },
+      resetForm(formName) {
+        this.$refs[formName].resetFields();
+      }
+    }
+  }
+</script>
+```
+:::
+
+:::tip
+Lorsqu'un `el-form-item` est imbriqué dans un autre `el-form-item`, la largeur de son label sera `0`. Utilisez `label-width` sur ce `el-form-item` si besoin.
+:::
+
+### Taille
+
+Tout les composants d'un formulaire héritent leur attribut `size` de ce formulaire. Il est aussi possible de l'utiliser individuellement sur chaque FormItem.
+
+:::demo Vous pouvez régler le `size` de chaque item si vous ne souhaitez pas qu'il hérite de son parent.
+```html
+<el-form ref="form" :model="sizeForm" label-width="120px" size="mini">
+  <el-form-item label="Activity name">
+    <el-input v-model="sizeForm.name"></el-input>
+  </el-form-item>
+  <el-form-item label="Activity zone">
+    <el-select v-model="sizeForm.region" placeholder="veuillez sélectionner votre zone">
+      <el-option label="Zone one" value="shanghai"></el-option>
+      <el-option label="Zone two" value="beijing"></el-option>
+    </el-select>
+  </el-form-item>
+  <el-form-item label="Activity time">
+    <el-col :span="11">
+      <el-date-picker type="date" placeholder="Choisissez une date" v-model="sizeForm.date1" style="width: 100%;"></el-date-picker>
+    </el-col>
+    <el-col class="line" :span="2">-</el-col>
+    <el-col :span="11">
+      <el-time-picker placeholder="Choisissez une heure" v-model="sizeForm.date2" style="width: 100%;"></el-time-picker>
+    </el-col>
+  </el-form-item>
+  <el-form-item label="Activity type">
+    <el-checkbox-group v-model="sizeForm.type">
+      <el-checkbox-button label="Online activities" name="type"></el-checkbox-button>
+      <el-checkbox-button label="Promotion activities" name="type"></el-checkbox-button>
+    </el-checkbox-group>
+  </el-form-item>
+  <el-form-item label="Resources">
+    <el-radio-group v-model="sizeForm.resource" size="medium">
+      <el-radio border label="Sponsor"></el-radio>
+      <el-radio border label="Venue"></el-radio>
+    </el-radio-group>
+  </el-form-item>
+  <el-form-item size="large">
+    <el-button type="primary" @click="onSubmit">Créer</el-button>
+    <el-button>Annuler</el-button>
+  </el-form-item>
+</el-form>
+
+<script>
+  export default {
+    data() {
+      return {
+        sizeForm: {
+          name: '',
+          region: '',
+          date1: '',
+          date2: '',
+          delivery: false,
+          type: [],
+          resource: '',
+          desc: ''
+        }
+      };
+    },
+    methods: {
+      onSubmit() {
+        console.log('submit!');
+      }
+    }
+  };
+</script>
+```
+:::
+
+### Attributs de Form
+
+| Attribut      | Description          | Type      | Valeurs acceptées       | Défaut  |
+| ---- | ----| ---- | ---- | ---- |
+| model| Données du formulaire. | object | — | — |
+| rules | Règles de validation du formulaire. | object | — | — |
+| inline | Si le formulaire est horizontal. | boolean | — | false |
+| label-position | Position des labels. Si 'left' ou 'right', `label-width` est aussi requis. | string | left / right / top | right |
+| label-width | Largeur des labels, tout les enfants directs hériteront de cette valeur. La largeur `auto` est supportée. | string | — | — |
+| label-suffix | Suffixe de labels. | string | — | — |
+| hide-required-asterisk | Si les champs obligatoires doivent avoir une astérisque rouge (étoile) à coté de leurs labels. | boolean | — | false |
+| show-message  | Si le message d'erreur doit apparaître. | boolean | — | true |
+| inline-message  | Si le message d'erreur doit apparaître en ligne avec son champ. | boolean | — | false |
+| status-icon  | Si une icône indiquant le résultat de validation doit apparaître. | boolean | — | false |
+| validate-on-rule-change  | Si la validation doit se déclencher lorsque `rules` est modifié. | boolean | — | true |
+| size  | Contrôle la taille des champs du formulaire. | string | medium / small / mini | — |
+| disabled | Si tout les champs du formulaire doivent être désactivés. Si `true`, il ne peut pas être modifié par l'attribut `disabled` des enfants. | boolean | — | false |
+
+### Méthodes de Form
+
+| Méthode | Description | Paramètres |
+| ---- | ---- | ---- |
+| validate | Valide le formulaire. Prends une callback en paramètre. Après la validation, la callback est exécutée avec deux paramètres: un boolean indiquant si la validation est bonne, et un objet contenant tout les champs qui ont échoués. Retourne une promesse si aucune callback n'est passée. | Function(callback: Function(boolean, object)) |
+| validateField | Valide un ou plusieurs champs du formulaire. | Function(props: string \| array, callback: Function(errorMessage: string)) |
+| resetFields | Efface tout les champs et les résultats de validation. | — |
+| clearValidate | Efface les messages de validation de certains champs. Le paramètre est le nom du champ ou une liste des champs concernés. S'il est omis, tout les champs seront concernés. | Function(props: string \| array) |
+
+### Évènnements de Form
+
+| Nom | Description | Paramètres |
+|----------- |------------ |----------- |
+| validate   | Se déclenche après la validation d'un champ. | Nom du champs qui a été validé, si la validation est bonne et le message d'erreur sinon. |
+
+### Attributs de FormItem
+
+| Attribut      | Description          | Type      | Valeurs acceptées       | Défaut  |
+| ---- | ----| ---- | ---- | ---- |
+| prop | Une des clés de `model`. Utilisés par les méthodes validate et resetFields. Requis. | string | Clés du model passé à `form`. |
+| label | Le label. | string | — | — |
+| label-width | Largeur du label, e.g. '50px'. La largeur `auto` est supportée. | string | — | — |
+| required | Si le champ est requis ou non. Si omis, sera déterminé par les règles de validation. | boolean |  — | false |
+| rules | Règles de validation du formulaire. | object | — | — |
+| error | Message d'erreur du champ. S'il est modifié, le champ l'affichera immédiatement. | string | — | — |
+| show-message  | Si le message d'erreur doit apparaître. | boolean | — | true |
+| inline-message  | Si le message d'erreur doit être en ligne avec le champ. | boolean | — | false |
+| size  | Contrôle la taille du FormItem. | string | medium / small / mini | - |
+
+### Slot de Form-Item
+| Nom | Description |
+|------|--------|
+| — | Contenu de Form Item. |
+| label | Contenu du label. |
+
+### Slot avec portée de Form-Item
+|      Nom     | Description |
+|---------------|-------------|
+|      error    | Contenu personnalisé pour les messages de validation. Le paramètre du scope est { error }. |
+
+### Méthodes de Form-Item
+
+| Méthode | Description | Paramètres |
+| ---- | ---- | ---- |
+| resetField | Efface le champ et les résultats de validation. | — |
+| clearValidate | Efface le status de validation du champ. | - |
diff --git a/examples/docs/fr-FR/i18n.md b/examples/docs/fr-FR/i18n.md
new file mode 100644
index 00000000000..fc3c2d502db
--- /dev/null
+++ b/examples/docs/fr-FR/i18n.md
@@ -0,0 +1,229 @@
+## Internationalisation
+
+La langue par défaut d'Element est le Chinois. Si vous souhaitez utiliser une autre langue, il vous faudra la configurer. Par exemple, dans votre fichier d'entrée, si vous importez Element entièrement:
+
+```javascript
+import Vue from 'vue'
+import ElementUI from '@femessage/element-ui'
+import locale from '@femessage/element-ui/lib/locale/lang/en'
+
+Vue.use(ElementUI, { locale })
+```
+
+Ou si vous importez Element à la demande:
+
+```javascript
+import Vue from 'vue'
+import { Button, Select } from '@femessage/element-ui'
+import lang from '@femessage/element-ui/lib/locale/lang/en'
+import locale from '@femessage/element-ui/lib/locale'
+
+// configure la langue
+locale.use(lang)
+
+// importe les composants
+Vue.component(Button.name, Button)
+Vue.component(Select.name, Select)
+```
+
+La pack de la langue Chinois est importé par défaut, même si vous configurez une autre langue. En utilisant le `NormalModuleReplacementPlugin` fournit par webpack vous pouvez remplacer la locale par défaut:
+
+webpack.config.js
+```javascript
+{
+  plugins: [
+    new webpack.NormalModuleReplacementPlugin(/@femessage[\/\\]element-ui[\/\\]lib[\/\\]locale[\/\\]lang[\/\\]zh-CN/, '@femessage/element-ui/lib/locale/lang/en')
+  ]
+}
+```
+
+## Compatible avec `vue-i18n@5.x`
+
+Element est compatible avec [vue-i18n@5.x](https://github.com/kazupon/vue-i18n), ce qui rend le changement de langue encore plus simple.
+
+```javascript
+import Vue from 'vue'
+import VueI18n from 'vue-i18n'
+import Element from '@femessage/element-ui'
+import enLocale from '@femessage/element-ui/lib/locale/lang/en'
+import zhLocale from '@femessage/element-ui/lib/locale/lang/zh-CN'
+
+Vue.use(VueI18n)
+Vue.use(Element)
+
+Vue.config.lang = 'zh-cn'
+Vue.locale('zh-cn', zhLocale)
+Vue.locale('en', enLocale)
+```
+
+## Compatible avec d'autres plugins i18n
+
+Element n'est pas forcément compatible avec d'autres plugins i18n que vue-i18n, mais vous pouvez configurer le fonctionnement i18n.
+
+```javascript
+import Vue from 'vue'
+import Element from '@femessage/element-ui'
+import enLocale from '@femessage/element-ui/lib/locale/lang/en'
+import zhLocale from '@femessage/element-ui/lib/locale/lang/zh-CN'
+
+Vue.use(Element, {
+  i18n: function (path, options) {
+    // ...
+  }
+})
+```
+
+## Compatible avec `vue-i18n@6.x`
+
+Vous devrez le configurer manuellement pour la compatibilité avec `6.x`.
+
+```javascript
+import Vue from 'vue'
+import Element from '@femessage/element-ui'
+import VueI18n from 'vue-i18n'
+import enLocale from '@femessage/element-ui/lib/locale/lang/en'
+import zhLocale from '@femessage/element-ui/lib/locale/lang/zh-CN'
+
+Vue.use(VueI18n)
+
+const messages = {
+  en: {
+    message: 'hello',
+    ...enLocale // Ou utilisez `Object.assign({ message: 'hello' }, enLocale)`
+  },
+  zh: {
+    message: '你好',
+    ...zhLocale // Ou utilisez `Object.assign({ message: '你好' }, zhLocale)`
+  }
+}
+
+// Crée l'instance de VueI18n avec ses options
+const i18n = new VueI18n({
+  locale: 'en', // indique la locale
+  messages, // indique les messages
+})
+
+Vue.use(Element, {
+  i18n: (key, value) => i18n.t(key, value)
+})
+
+new Vue({ i18n }).$mount('#app')
+```
+
+## i18n personnalisée dans les composants à la demande
+
+```js
+import Vue from 'vue'
+import DatePicker from 'element/lib/date-picker'
+import VueI18n from 'vue-i18n'
+
+import enLocale from '@femessage/element-ui/lib/locale/lang/en'
+import zhLocale from '@femessage/element-ui/lib/locale/lang/zh-CN'
+import ElementLocale from '@femessage/element-ui/lib/locale'
+
+Vue.use(VueI18n)
+Vue.use(DatePicker)
+
+const messages = {
+  en: {
+    message: 'hello',
+    ...enLocale
+  },
+  zh: {
+    message: '你好',
+    ...zhLocale
+  }
+}
+
+// Crée l'instance de VueI18n avec ses options
+const i18n = new VueI18n({
+  locale: 'en', // indique la locale
+  messages, // indique les messages
+})
+
+ElementLocale.i18n((key, value) => i18n.t(key, value))
+```
+
+## Import via un CDN
+
+```html
+<script src="//unpkg.com/vue"></script>
+<script src="//unpkg.com/@femessage/element-ui"></script>
+<script src="//unpkg.com/@femessage/element-ui/lib/umd/locale/en.js"></script>
+
+<script>
+  ELEMENT.locale(ELEMENT.lang.en)
+</script>
+```
+
+Compatible avec `vue-i18n`
+
+```html
+<script src="//unpkg.com/vue"></script>
+<script src="//unpkg.com/vue-i18n/dist/vue-i18n.js"></script>
+<script src="//unpkg.com/@femessage/element-ui"></script>
+<script src="//unpkg.com/@femessage/element-ui/lib/umd/locale/zh-CN.js"></script>
+<script src="//unpkg.com/@femessage/element-ui/lib/umd/locale/en.js"></script>
+
+<script>
+  Vue.locale('en', ELEMENT.lang.en)
+  Vue.locale('zh-cn', ELEMENT.lang.zhCN)
+</script>
+```
+
+Actuellement, Element supporte les langues suivantes:
+<ul class="language-list">
+  <li>Chinois simplifié (zh-CN)</li>
+  <li>Anglais (en)</li>
+  <li>Allemand (de)</li>
+  <li>Portugais (pt)</li>
+  <li>Espagnol (es)</li>
+  <li>Danois (da)</li>
+  <li>Français (fr)</li>
+  <li>Norvégien (nb-NO)</li>
+  <li>Chinois traditionnel (zh-TW)</li>
+  <li>Italien (it)</li>
+  <li>Coréen (ko)</li>
+  <li>Japonais (ja)</li>
+  <li>Néerlandais (nl)</li>
+  <li>Vietnamien (vi)</li>
+  <li>Russe (ru-RU)</li>
+  <li>Turque (tr-TR)</li>
+  <li>Portugais brésilien (pt-br)</li>
+  <li>Farsi (fa)</li>
+  <li>Thaï (th)</li>
+  <li>Indonésien (id)</li>
+  <li>Bulgare (bg)</li>
+  <li>Polonais (pl)</li>
+  <li>Finnois (fi)</li>
+  <li>Suédois (sv-SE)</li>
+  <li>Grec (el)</li>
+  <li>Slovaque (sk)</li>
+  <li>Catalan (ca)</li>
+  <li>Tchèque (cs-CZ)</li>
+  <li>Ukrainien (ua)</li>
+  <li>Turkmène (tk)</li>
+  <li>Tamoul (ta)</li>
+  <li>Letton (lv)</li>
+  <li>Afrikaans (af-ZA)</li>
+  <li>Estonien (ee)</li>
+  <li>Slovène (sl)</li>
+  <li>Arabe (ar)</li>
+  <li>Hébreu (he)</li>
+  <li>Lituanien (lt)</li>
+  <li>Mongol (mn)</li>
+  <li>Kazakh (kz)</li>
+  <li>Hongrois (hu)</li>
+  <li>Roumain (ro)</li>
+  <li>Kurde (ku)</li>
+  <li>Ouïghour (ug-CN)</li>
+  <li>Khmer (km)</li>
+  <li>Serbe (sr)</li>
+  <li>Basque (eu)</li>
+  <li>Kirghize (kg)</li>
+  <li>Croate (hr)</li>
+  <li>Arménien (hy)</li>
+  <li>Espéranto (eo)</li>
+</ul>
+
+Si votre langue n'apparaît pas dans la liste, n'hésitez pas a contribuer: ajoutez simplement un fichier de configuration [ici](https://github.com/femessage/element/tree/dev/src/locale/lang) et créez une pull request.
diff --git a/examples/docs/fr-FR/icon-checkbox.md b/examples/docs/fr-FR/icon-checkbox.md
new file mode 100644
index 00000000000..232335c8ee7
--- /dev/null
+++ b/examples/docs/fr-FR/icon-checkbox.md
@@ -0,0 +1 @@
+## IconCheckbox
diff --git a/examples/docs/fr-FR/icon.md b/examples/docs/fr-FR/icon.md
new file mode 100644
index 00000000000..b891eedc92e
--- /dev/null
+++ b/examples/docs/fr-FR/icon.md
@@ -0,0 +1,29 @@
+## Icônes
+
+Element fournit un ensemble d'icônes basiques.
+
+### Usage
+
+Il vous suffit d'assigner le nom de classe `el-icon-iconName` à une balise `<i>`.
+
+:::demo
+
+```html
+<i class="el-icon-edit"></i>
+<i class="el-icon-share"></i>
+<i class="el-icon-delete"></i>
+<el-button type="primary" icon="el-icon-search">Chercher</el-button>
+
+```
+:::
+
+### Icônes
+
+<ul class="icon-list">
+  <li v-for="name in $icon" :key="name">
+    <span>
+      <i :class="'el-icon-' + name"></i>
+      <span class="icon-name">{{'el-icon-' + name}}</span>
+    </span>
+  </li>
+</ul>
diff --git a/examples/docs/fr-FR/image.md b/examples/docs/fr-FR/image.md
new file mode 100644
index 00000000000..569f91a175c
--- /dev/null
+++ b/examples/docs/fr-FR/image.md
@@ -0,0 +1,162 @@
+## Image
+
+En plus des propriétés natives de img, ce composant supporte le lazy loading, les placeholder personnalisés, les échecs de téléchargement, etc.
+
+### Usage basique
+
+:::demo Indique comment l'image devrait être redimmensionnée pour s'adapter à son conteneur grâce à `fit`, identique au [object-fit](https://developer.mozilla.org/en-US/docs/Web/CSS/object-fit) natif.
+```html
+<div class="demo-image">
+  <div class="block" v-for="fit in fits" :key="fit">
+    <span class="demonstration">{{ fit }}</span>
+    <el-image
+      style="width: 100px; height: 100px"
+      :src="url"
+      :fit="fit"></el-image>
+  </div>
+</div>
+
+<script>
+  export default {
+    data() {
+      return {
+        fits: ['fill', 'contain', 'cover', 'none', 'scale-down'],
+        url: 'https://fuss10.elemecdn.com/e/5d/4a731a90594a4af544c0c25941171jpeg.jpeg'
+      }
+    }
+  }
+</script>
+```
+:::
+
+### Placeholder
+
+:::demo Placeholder personnalisé qui s'affiche lorsque l'image n'est pas encore chargée, grâce à `slot = placeholder`.
+```html
+<div class="demo-image__placeholder">
+  <div class="block">
+    <span class="demonstration">Défaut</span>
+    <el-image :src="src"></el-image>
+  </div>
+  <div class="block">
+    <span class="demonstration">Personnalisé</span>
+    <el-image :src="src">
+      <div slot="placeholder" class="image-slot">
+        Chargement<span class="dot">...</span>
+      </div>
+    </el-image>
+  </div>
+</div>
+
+<script>
+  export default {
+    data() {
+      return {
+        src: 'https://cube.elemecdn.com/6/94/4d3ea53c084bad6931a56d5158a48jpeg.jpeg'
+      }
+    }
+  }
+</script>
+```
+:::
+
+### Échec du chargement
+
+:::demo Contenu personnalisé qui s'affiche lorsque le chargement a échoué, grâce à `slot = error`.
+```html
+<div class="demo-image__error">
+  <div class="block">
+    <span class="demonstration">Défaut</span>
+    <el-image></el-image>
+  </div>
+  <div class="block">
+    <span class="demonstration">Personnalisé</span>
+    <el-image>
+      <div slot="error" class="image-slot">
+        <i class="el-icon-picture-outline"></i>
+      </div>
+    </el-image>
+  </div>
+</div>
+```
+:::
+
+### Lazy Loading
+
+:::demo Utilisez le lazy loading avec `lazy = true`. Les images ne se chargeront que lorsque le scrolling les atteindra. Vous pouvez indiquer le conteneur grâce à `scroll-container`. Si undefined, ce sera le conteneur parent le plus proche avec la propriété overflow à auto ou scroll.
+```html
+<div class="demo-image__lazy">
+  <el-image v-for="url in urls" :key="url" :src="url" lazy></el-image>
+</div>
+
+<script>
+  export default {
+    data() {
+      return {
+        urls: [
+          'https://fuss10.elemecdn.com/a/3f/3302e58f9a181d2509f3dc0fa68b0jpeg.jpeg',
+          'https://fuss10.elemecdn.com/1/34/19aa98b1fcb2781c4fba33d850549jpeg.jpeg',
+          'https://fuss10.elemecdn.com/0/6f/e35ff375812e6b0020b6b4e8f9583jpeg.jpeg',
+          'https://fuss10.elemecdn.com/9/bb/e27858e973f5d7d3904835f46abbdjpeg.jpeg',
+          'https://fuss10.elemecdn.com/d/e6/c4d93a3805b3ce3f323f7974e6f78jpeg.jpeg',
+          'https://fuss10.elemecdn.com/3/28/bbf893f792f03a54408b3b7a7ebf0jpeg.jpeg',
+          'https://fuss10.elemecdn.com/2/11/6535bcfb26e4c79b48ddde44f4b6fjpeg.jpeg'
+        ]
+      }
+    }
+  }
+</script>
+```
+:::
+
+### Image Preview
+
+:::demo allow big image preview by setting `previewSrcList` prop.
+```html
+<div class="demo-image__preview">
+  <el-image 
+    style="width: 100px; height: 100px"
+    :src="url" 
+    :preview-src-list="srcList">
+  </el-image>
+</div>
+
+<script>
+  export default {
+    data() {
+      return {
+        url: 'https://fuss10.elemecdn.com/e/5d/4a731a90594a4af544c0c25941171jpeg.jpeg',
+        srcList: [
+          'https://fuss10.elemecdn.com/8/27/f01c15bb73e1ef3793e64e6b7bbccjpeg.jpeg',
+          'https://fuss10.elemecdn.com/1/8e/aeffeb4de74e2fde4bd74fc7b4486jpeg.jpeg'
+        ]
+      }
+    }
+  }
+</script>
+```
+:::
+
+### Attributs
+| Attribut | Description | Type  | Valeurs acceptées | Défaut   |
+|---------- |-------- |---------- |-------------  |-------- |
+| src | Source de l'image, identique au natif. | string | — | - |
+| fit | Indique comment l'image devrait être redimmensionnée pour s'adapter à son conteneur, identique à [object-fit](https://developer.mozilla.org/en-US/docs/Web/CSS/object-fit) | string | fill / contain / cover / none / scale-down | - |
+| alt | Attribut alt natif.| string | - | - |
+| referrer-policy | Attribut referrerPolicy natif.| string | - | - |
+| lazy | Si le lazy loading doit être utilisé. | boolean | — | false |
+| scroll-container | Le conteneur auquel ajouter le listener du scroll en mode lazy loading. | string / HTMLElement | — | Le conteneur parent le plus proche avec la propriété overflow à auto ou scroll. |
+| preview-src-list | allow big image preview | Array | — | - |
+| z-index | set image preview z-index | Number | — | 2000 |
+
+### Évènements
+| Nom | Description | Paramètres |
+|---------- |-------- |---------- |
+| load | Identique au load natif. | (e: Event) |
+| error | Identique au error natif. | (e: Error) |
+
+### Slots
+| Nom | Description |
+|---------|-------------|
+| placeholder | Se déclenche quand l'image charge. |
+| error | Se déclenche quand le chargement de l'image a échoué. |
diff --git a/examples/docs/fr-FR/infiniteScroll.md b/examples/docs/fr-FR/infiniteScroll.md
new file mode 100644
index 00000000000..022be00be21
--- /dev/null
+++ b/examples/docs/fr-FR/infiniteScroll.md
@@ -0,0 +1,87 @@
+## InfiniteScroll
+
+Charge plus de données quand le bas de la page est atteint
+
+### Utilisation de base
+Ajoutez `v-infinite-scroll` à la liste pour exécuter automatiquement la méthode de chargement lors du défilement vers le bas.
+:::demo
+```html
+<template>
+  <ul class="infinite-list" v-infinite-scroll="load" style="overflow:auto">
+    <li v-for="i in count" class="infinite-list-item">{{ i }}</li>
+  </ul>
+</template>
+
+<script>
+  export default {
+    data () {
+      return {
+        count: 0
+      }
+    },
+    methods: {
+      load () {
+        this.count += 2
+      }
+    }
+  }
+</script>
+```
+:::
+
+### Désactiver le chargement
+
+:::demo
+```html
+<template>
+  <div class="infinite-list-wrapper" style="overflow:auto">
+    <ul
+      class="list"
+      v-infinite-scroll="load"
+      infinite-scroll-disabled="disabled">
+      <li v-for="i in count" class="list-item">{{ i }}</li>
+    </ul>
+    <p v-if="loading">Loading...</p>
+    <p v-if="noMore">Pas plus</p>
+  </div>
+</template>
+
+<script>
+  export default {
+    data () {
+      return {
+        count: 10,
+        loading: false
+      }
+    },
+    computed: {
+      noMore () {
+        return this.count >= 20
+      },
+      disabled () {
+        return this.loading || this.noMore
+      }
+    },
+    methods: {
+      load () {
+        this.loading = true
+        setTimeout(() => {
+          this.count += 2
+          this.loading = false
+        }, 2000)
+      }
+    }
+  }
+</script>
+```
+:::
+
+
+### Attributs
+
+| Attribut | Description | Type  | Valeur acceptées | Défaut   |
+| -------------- | ------------------------------ | --------- | ------------------------------------ | ------- |
+| infinite-scroll-disabled | Est désactivé           | boolean      | - |false |
+| infinite-scroll-delay   | Throttle le delais (ms)   | number       |   - |200   |
+| infinite-scroll-distance| Distance de déclenchement (px) | number   |- |0 |
+| infinite-scroll-immediate | S'il faut exécuter la méthode de chargement immédiatement, au cas où le contenu ne pourrait pas être set à l'état initial. | boolean | - |true |
diff --git a/examples/docs/fr-FR/input-email.md b/examples/docs/fr-FR/input-email.md
new file mode 100644
index 00000000000..b7d6d9f8798
--- /dev/null
+++ b/examples/docs/fr-FR/input-email.md
@@ -0,0 +1 @@
+## InputEmail
diff --git a/examples/docs/fr-FR/input-id-card.md b/examples/docs/fr-FR/input-id-card.md
new file mode 100644
index 00000000000..ab7abe5624d
--- /dev/null
+++ b/examples/docs/fr-FR/input-id-card.md
@@ -0,0 +1 @@
+## InputIdCard
diff --git a/examples/docs/fr-FR/input-number.md b/examples/docs/fr-FR/input-number.md
new file mode 100644
index 00000000000..031735981c2
--- /dev/null
+++ b/examples/docs/fr-FR/input-number.md
@@ -0,0 +1,200 @@
+## InputNumber
+
+Un champ d'input de valeurs numériques, avec un domaine personnalisable.
+
+### Usage
+
+:::demo Liez une variable à `v-model` dans l'élément `<el-input-number>` et c'est tout !
+
+```html
+<template>
+  <el-input-number v-model="num" @change="handleChange" :min="1" :max="10"></el-input-number>
+</template>
+<script>
+  export default {
+    data() {
+      return {
+        num: 1
+      };
+    },
+    methods: {
+      handleChange(value) {
+        console.log(value)
+      }
+    }
+  };
+</script>
+```
+:::
+
+### Désactivé
+
+:::demo L'attribut `disabled` accepte un `boolean` et si la valeur est `true`, le composant sera désactivé. Si vous souhaitez juste contrôler le domaine des valeurs possibles, ajoutez l'attribut `min` pour régler la valeur minimale et `max` pour la valeur maximale. Par défaut, la valeur minimale est `0`.
+
+```html
+<template>
+  <el-input-number v-model="num" :disabled="true"></el-input-number>
+</template>
+<script>
+  export default {
+    data() {
+      return {
+        num: 1
+      }
+    }
+  };
+</script>
+```
+:::
+
+### Pas
+
+Vous pouvez déterminer un pas pour le champs.
+
+:::demo Ajoutez l'attribut `step` pour configurer le pas.
+
+```html
+<template>
+  <el-input-number v-model="num" :step="2"></el-input-number>
+</template>
+<script>
+  export default {
+    data() {
+      return {
+        num: 5
+      }
+    }
+  };
+</script>
+```
+:::
+
+### Pas strict
+
+:::demo L'attribut `step-strictly` accepte un `boolean`. Si cet attribut est `true`, la valeur de l'input ne peut être qu'un multiple de `step`.
+
+```html
+<template>
+  <el-input-number v-model="num" :step="2" step-strictly></el-input-number>
+</template>
+<script>
+  export default {
+    data() {
+      return {
+        num: 2
+      }
+    }
+  };
+</script>
+```
+:::
+
+### Précision
+
+:::demo Ajoutez l'attribut `precision` pour régler la précision du champs.
+
+```html
+<template>
+  <el-input-number v-model="num" :precision="2" :step="0.1" :max="10"></el-input-number>
+</template>
+<script>
+  export default {
+    data() {
+      return {
+        num: 1
+      }
+    }
+  };
+</script>
+```
+
+:::
+
+:::tip
+La valeur de `precision` doit être un integer non négatif et ne doit pas être inférieure aux décimales de `step`.
+:::
+
+### Taille
+
+Utilisez l'attribut `size` pour régler la taille avec `medium`, `small` ou `mini`.
+
+:::demo
+
+```html
+<template>
+  <el-input-number v-model="num1"></el-input-number>
+    <el-input-number size="medium" v-model="num2"></el-input-number>
+    <el-input-number size="small" v-model="num3"></el-input-number>
+    <el-input-number size="mini" v-model="num4"></el-input-number>
+</template>
+<script>
+  export default {
+    data() {
+      return {
+        num1: 1,
+        num2: 1,
+        num3: 1,
+        num4: 1
+      }
+    }
+  };
+</script>
+```
+:::
+
+### Position des contrôles
+
+:::demo Réglez `controls-position` pour déterminer la position des boutons.
+```html
+<template>
+  <el-input-number v-model="num" controls-position="right" @change="handleChange" :min="1" :max="10"></el-input-number>
+</template>
+<script>
+  export default {
+    data() {
+      return {
+        num: 1
+      };
+    },
+    methods: {
+      handleChange(value) {
+        console.log(value);
+      }
+    }
+  };
+</script>
+```
+:::
+
+### Attributs
+
+| Attribut      | Description          | Type      | Valeurs acceptées       | Défaut  |
+|----| ----| ---| ----| -----|
+| value / v-model | La valeur liée. | number | — | 0 |
+| min | La valeur minimale autorisée. | number | — | `-Infinity` |
+| max | La valeur maximale autorisée. | number | — | `Infinity` |
+| step | Le pas pour l'incrémentation. | number | — | 1 |
+| step-strictly | Si la valeur ne peut être qu'un multiple du pas. | number   | — | false |
+| precision | La précision de la valeur. | number | — | — |
+| size | La taille du composant. | string | large/small| — |
+| disabled| Si le composant est désactivé. | boolean | — | false |
+| controls| Si les boutons sont visibles. | boolean | — | true |
+| controls-position | Position des boutons. | string | right | - |
+| name | Identique à `name` dans l'input natif. | string | — | — |
+| label | Texte du label. | string | — | — |
+| placeholder | Placeholder du champ. | string | - | - |
+
+### Évènements
+
+| Nom | Description | Paramètres |
+|----| ---- | -----|
+| change | Se déclenche quand la valeur change. | currentValue, oldValue |
+| blur | Se déclenche quand le champ perds le focus. | (event: Event) |
+| focus | Se déclenche quand le champ a le focus. | (event: Event) |
+
+### Méthodes
+
+| Méthode | Description | Paramètres |
+|------|--------|-------|
+| focus | Met le focus sur le composant. | - |
+| select | Sélectionne le texte dans le champ. | — |
diff --git a/examples/docs/fr-FR/input-phone.md b/examples/docs/fr-FR/input-phone.md
new file mode 100644
index 00000000000..defde569d5b
--- /dev/null
+++ b/examples/docs/fr-FR/input-phone.md
@@ -0,0 +1 @@
+## InputPhone
diff --git a/examples/docs/fr-FR/input-url.md b/examples/docs/fr-FR/input-url.md
new file mode 100644
index 00000000000..2f61fb034ac
--- /dev/null
+++ b/examples/docs/fr-FR/input-url.md
@@ -0,0 +1 @@
+## InputUrl
diff --git a/examples/docs/fr-FR/input.md b/examples/docs/fr-FR/input.md
new file mode 100644
index 00000000000..1cbad79e862
--- /dev/null
+++ b/examples/docs/fr-FR/input.md
@@ -0,0 +1,667 @@
+## Input
+
+Le champ d'input de base.
+
+:::warning
+Input est un composant contrôlé, il **affiche toujours la valeur liée de Vue**.
+
+En règle générale, l'évènement `input` devrait être géré. Son handler devrait mettre à jour la valeur du composant (ou utilisez `v-model`). Dans le cas contraire, la valeur du champ ne sera pas modifiée.
+
+Les modificateurs de `v-model` ne sont pas supportés.
+:::
+
+### Usage
+
+:::demo
+
+```html
+<el-input placeholder="Entrez quelque chose" v-model="input"></el-input>
+
+<script>
+export default {
+  data() {
+    return {
+      input: ''
+    }
+  }
+}
+</script>
+```
+:::
+
+### Désactivé
+
+:::demo Désactivez l'input avec l'attribut `disabled`.
+
+```html
+<el-input
+  placeholder="Entrez quelque chose"
+  v-model="input"
+  :disabled="true">
+</el-input>
+
+<script>
+export default {
+  data() {
+    return {
+      input: ''
+    }
+  }
+}
+</script>
+```
+:::
+
+### Effaçable
+
+:::demo Rendez l'input effaçable avec l'attribut `clearable`.
+
+```html
+<el-input
+  placeholder="Entrez quelque chose"
+  v-model="input"
+  clearable>
+</el-input>
+
+<script>
+export default {
+  data() {
+    return {
+      input: ''
+    }
+  }
+}
+</script>
+```
+:::
+
+### Champ de mot de passe
+
+:::demo Créez un champ de mot de passe avec icône de visualisation grâce à l'attribut `show-password`.
+
+```html
+<el-input placeholder="Entrez votre mot de passe" v-model="input" show-password></el-input>
+
+<script>
+  export default {
+    data() {
+      return {
+        input: ''
+      }
+    }
+  }
+</script>
+```
+:::
+
+### Input avec icône
+
+Ajoutez une icône pour indiquer le type d'input.
+
+:::demo Pour ajouter une icône, vous pouvez utiliser les attributs `prefix-icon` et `suffix-icon`. De plus, les slots nommés `prefix` et `suffix` fonctionnent aussi.
+```html
+<div class="demo-input-suffix">
+  <span class="demo-input-label">Avec les attributs</span>
+  <el-input
+    placeholder="Entrez une date"
+    suffix-icon="el-icon-date"
+    v-model="input1">
+  </el-input>
+  <el-input
+    placeholder="Entrez du texte"
+    prefix-icon="el-icon-search"
+    v-model="input2">
+  </el-input>
+</div>
+<div class="demo-input-suffix">
+  <span class="demo-input-label">Avec les slots</span>
+  <el-input
+    placeholder="Entrez une date"
+    v-model="input3">
+    <i slot="suffix" class="el-input__icon el-icon-date"></i>
+  </el-input>
+  <el-input
+    placeholder="Entrez du texte"
+    v-model="input4">
+    <i slot="prefix" class="el-input__icon el-icon-search"></i>
+  </el-input>
+</div>
+
+<style>
+  .demo-input-label {
+    display: inline-block;
+    width: 130px;
+  }
+</style>
+
+<script>
+export default {
+  data() {
+    return {
+      input1: '',
+      input2: '',
+      input3: '',
+      input4: ''
+    }
+  }
+}
+</script>
+```
+:::
+
+### Zone de texte
+
+Une zone de texte de taille réglable à la souris pour écrire plusieurs lignes. Ajoutez l'attribut `type="textarea"` pour changer `input` en un `textarea` natif.
+
+:::demo Réglez la hauteur grâce à la propriété `rows`.
+
+```html
+<el-input
+  type="textarea"
+  :rows="2"
+  placeholder="Entrez quelque chose"
+  v-model="textarea">
+</el-input>
+
+<script>
+export default {
+  data() {
+    return {
+      textarea: ''
+    }
+  }
+}
+</script>
+```
+:::
+
+### Zone de texte avec taille automatique
+
+Configurer la propriété `autosize` pour une zone de texte permet de rendre la hauteur automatique en fonction de la taille du texte. Un objet options pour être fournit à `autosize` les nombres minimal et maximal de lignes.
+
+:::demo
+
+```html
+<el-input
+  type="textarea"
+  autosize
+  placeholder="Entrez quelque chose"
+  v-model="textarea1">
+</el-input>
+<div style="margin: 20px 0;"></div>
+<el-input
+  type="textarea"
+  :autosize="{ minRows: 2, maxRows: 4}"
+  placeholder="Entrez quelque chose"
+  v-model="textarea2">
+</el-input>
+
+<script>
+export default {
+  data() {
+    return {
+      textarea1: '',
+      textarea2: ''
+    }
+  }
+}
+</script>
+```
+:::
+
+### Input mixte
+
+Ajouter un élément avant ou après l'input, généralement du texte ou un bouton.
+
+:::demo Utilisez `slot` pour ajouter des éléments avant ou après l'input.
+
+```html
+<div>
+  <el-input placeholder="Entrez quelque chose" v-model="input1">
+    <template slot="prepend">Http://</template>
+  </el-input>
+</div>
+<div style="margin-top: 15px;">
+  <el-input placeholder="Entrez quelque chose" v-model="input2">
+    <template slot="append">.com</template>
+  </el-input>
+</div>
+<div style="margin-top: 15px;">
+  <el-input placeholder="Entrez quelque chose" v-model="input3" class="input-with-select">
+    <el-select v-model="select" slot="prepend" placeholder="Choisir">
+      <el-option label="Restaurant" value="1"></el-option>
+      <el-option label="Num. Commande" value="2"></el-option>
+      <el-option label="Tel" value="3"></el-option>
+    </el-select>
+    <el-button slot="append" icon="el-icon-search"></el-button>
+  </el-input>
+</div>
+
+<style>
+  .el-select .el-input {
+    width: 110px;
+  }
+  .input-with-select .el-input-group__prepend {
+    background-color: #fff;
+  }
+</style>
+<script>
+export default {
+  data() {
+    return {
+      input1: '',
+      input2: '',
+      input3: '',
+      select: ''
+    }
+  }
+}
+</script>
+```
+:::
+
+### Tailles
+
+:::demo Ajoutez l'attribut `size` pour changer la taille de l'input. En plus de la taille par défaut, il y a trois autres options: `large`, `small` et `mini`.
+```html
+<div class="demo-input-size">
+  <el-input
+    placeholder="Entrez quelque chose"
+    v-model="input1">
+  </el-input>
+  <el-input
+    size="medium"
+    placeholder="Entrez quelque chose"
+    v-model="input2">
+  </el-input>
+  <el-input
+    size="small"
+    placeholder="Entrez quelque chose"
+    v-model="input3">
+  </el-input>
+  <el-input
+    size="mini"
+    placeholder="Entrez quelque chose"
+    v-model="input4">
+  </el-input>
+</div>
+
+<script>
+export default {
+  data() {
+    return {
+      input1: '',
+      input2: '',
+      input3: '',
+      input4: ''
+    }
+  }
+}
+</script>
+```
+:::
+
+### Autocomplétion
+
+Vous pouvez obtenir de l'aide ou des suggestions basées sur ce que vous entrez.
+
+:::demo Le composant d'autocomplétion fournit des suggestions d'entrées. L'attribut `fetch-suggestions` est une méthode qui retourne les suggestions. Dans cet exemple, `querySearch(queryString, cb)` renvoie des suggestions à l'autocomplétion via `cb(data)` quand elles sont prêtes.
+```html
+<el-row class="demo-autocomplete">
+  <el-col :span="12">
+    <div class="sub-title">Liste des suggestions au focus</div>
+    <el-autocomplete
+      class="inline-input"
+      v-model="state1"
+      :fetch-suggestions="querySearch"
+      placeholder="Entrez quelque chose"
+      @select="handleSelect"
+    ></el-autocomplete>
+  </el-col>
+  <el-col :span="12">
+    <div class="sub-title">Liste des suggestions à l'écriture</div>
+    <el-autocomplete
+      class="inline-input"
+      v-model="state2"
+      :fetch-suggestions="querySearch"
+      placeholder="Entrez quelque chose"
+      :trigger-on-focus="false"
+      @select="handleSelect"
+    ></el-autocomplete>
+  </el-col>
+</el-row>
+<script>
+  export default {
+    data() {
+      return {
+        links: [],
+        state1: '',
+        state2: ''
+      };
+    },
+    methods: {
+      querySearch(queryString, cb) {
+        var links = this.links;
+        var results = queryString ? links.filter(this.createFilter(queryString)) : links;
+        // call callback function to return suggestions
+        cb(results);
+      },
+      createFilter(queryString) {
+        return (link) => {
+          return (link.value.toLowerCase().indexOf(queryString.toLowerCase()) === 0);
+        };
+      },
+      loadAll() {
+        return [
+          { "value": "vue", "link": "https://github.com/vuejs/vue" },
+          { "value": "element", "link": "https://github.com/femessage/element" },
+          { "value": "cooking", "link": "https://github.com/ElemeFE/cooking" },
+          { "value": "mint-ui", "link": "https://github.com/ElemeFE/mint-ui" },
+          { "value": "vuex", "link": "https://github.com/vuejs/vuex" },
+          { "value": "vue-router", "link": "https://github.com/vuejs/vue-router" },
+          { "value": "babel", "link": "https://github.com/babel/babel" }
+         ];
+      },
+      handleSelect(item) {
+        console.log(item);
+      }
+    },
+    mounted() {
+      this.links = this.loadAll();
+    }
+  }
+</script>
+```
+:::
+
+### Template personnalisé
+
+Vous pouvez personnaliser la manière dont les suggestions sont affichées.
+
+:::demo Utilisez `scoped slot` pour personnaliser les différentes suggestions. Dans le scope, vous pouvez accéder à l'objet suggestion via la clé `item`.
+```html
+<el-autocomplete
+  popper-class="my-autocomplete"
+  v-model="state"
+  :fetch-suggestions="querySearch"
+  placeholder="Entrez quelque chose"
+  @select="handleSelect">
+  <i
+    class="el-icon-edit el-input__icon"
+    slot="suffix"
+    @click="handleIconClick">
+  </i>
+  <template slot-scope="{ item }">
+    <div class="value">{{ item.value }}</div>
+    <span class="link">{{ item.link }}</span>
+  </template>
+</el-autocomplete>
+
+<style>
+  .my-autocomplete {
+    li {
+      line-height: normal;
+      padding: 7px;
+
+      .value {
+        text-overflow: ellipsis;
+        overflow: hidden;
+      }
+      .link {
+        font-size: 12px;
+        color: #b4b4b4;
+      }
+    }
+  }
+</style>
+
+<script>
+  export default {
+    data() {
+      return {
+        links: [],
+        state: ''
+      };
+    },
+    methods: {
+      querySearch(queryString, cb) {
+        var links = this.links;
+        var results = queryString ? links.filter(this.createFilter(queryString)) : links;
+        // call callback function to return suggestion objects
+        cb(results);
+      },
+      createFilter(queryString) {
+        return (link) => {
+          return (link.value.toLowerCase().indexOf(queryString.toLowerCase()) === 0);
+        };
+      },
+      loadAll() {
+        return [
+          { "value": "vue", "link": "https://github.com/vuejs/vue" },
+          { "value": "element", "link": "https://github.com/femessage/element" },
+          { "value": "cooking", "link": "https://github.com/ElemeFE/cooking" },
+          { "value": "mint-ui", "link": "https://github.com/ElemeFE/mint-ui" },
+          { "value": "vuex", "link": "https://github.com/vuejs/vuex" },
+          { "value": "vue-router", "link": "https://github.com/vuejs/vue-router" },
+          { "value": "babel", "link": "https://github.com/babel/babel" }
+         ];
+      },
+      handleSelect(item) {
+        console.log(item);
+      },
+      handleIconClick(ev) {
+        console.log(ev);
+      }
+    },
+    mounted() {
+      this.links = this.loadAll();
+    }
+  }
+</script>
+```
+:::
+
+### Recherche distante
+
+Vous pouvez aller chercher des infos de suggestions sur un serveur distant.
+
+:::demo
+```html
+<el-autocomplete
+  v-model="state"
+  :fetch-suggestions="querySearchAsync"
+  placeholder="Entrez quelque chose"
+  @select="handleSelect"
+></el-autocomplete>
+<script>
+  export default {
+    data() {
+      return {
+        links: [],
+        state: '',
+        timeout:  null
+      };
+    },
+    methods: {
+      loadAll() {
+        return [
+          { "value": "vue", "link": "https://github.com/vuejs/vue" },
+          { "value": "element", "link": "https://github.com/femessage/element" },
+          { "value": "cooking", "link": "https://github.com/ElemeFE/cooking" },
+          { "value": "mint-ui", "link": "https://github.com/ElemeFE/mint-ui" },
+          { "value": "vuex", "link": "https://github.com/vuejs/vuex" },
+          { "value": "vue-router", "link": "https://github.com/vuejs/vue-router" },
+          { "value": "babel", "link": "https://github.com/babel/babel" }
+         ];
+      },
+      querySearchAsync(queryString, cb) {
+        var links = this.links;
+        var results = queryString ? links.filter(this.createFilter(queryString)) : links;
+
+        clearTimeout(this.timeout);
+        this.timeout = setTimeout(() => {
+          cb(results);
+        }, 3000 * Math.random());
+      },
+      createFilter(queryString) {
+        return (link) => {
+          return (link.value.toLowerCase().indexOf(queryString.toLowerCase()) === 0);
+        };
+      },
+      handleSelect(item) {
+        console.log(item);
+      }
+    },
+    mounted() {
+      this.links = this.loadAll();
+    }
+  };
+</script>
+```
+:::
+
+### Taille limite
+
+:::demo `maxlength` et `minlength` sont des attributs natifs, indiquant la taille limite de l'input. Le nombre de caractères est mesuré par la taille de la chaine Javascript. Si vous utilisez `maxlength`, vous pourrez montrer le nombre de caractères en mettant `show-word-limit` à `true`.
+
+```html
+<el-input
+  type="text"
+  placeholder="Please input"
+  v-model="text"
+  maxlength="10"
+  show-word-limit
+>
+</el-input>
+<div style="margin: 20px 0;"></div>
+<el-input
+  type="textarea"
+  placeholder="Please input"
+  v-model="textarea"
+  maxlength="30"
+  show-word-limit
+>
+</el-input>
+
+<script>
+export default {
+  data() {
+    return {
+      text: '',
+      textarea: ''
+    }
+  }
+}
+</script>
+```
+:::
+
+### Attributs de l'Input
+
+| Attribut      | Description          | Type      | Valeurs acceptées       | Défaut  |
+| ----| ----| ----| ---- | ----- |
+| type| Type de l'input. | string | text, textarea et autres [types d'input natifs](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input#Form_%3Cinput%3E_types) | text |
+| value / v-model | Variable liée. | string / number | — | — |
+| maxlength| Identique à `maxlength` dans l'input natif. | number| — | — |
+| minlength| Identique à `minlength` dans l'input natif. | number | — | — |
+| show-word-limit | Affiche le nombre de caractères restant， ne marche que lorsque `type` est 'text' ou 'textarea'. | boolean    |  —  | false |
+| placeholder| Placeholder de l' Input. | string | — | — |
+| clearable | Si le bouton de reset apparaît. | boolean | — | false |
+| show-password | Si le champ doit un champ de mot de passe avec bouton de visualisation. | boolean         | — | false |
+| disabled | Si le champ est désactivé. | boolean | — | false |
+| size | Taille du champ, marche quand `type` n'est pas 'textarea'. | string | medium / small / mini | — |
+| prefix-icon   | Classe de l'icône de préfixe.  | string          | — | — |
+| suffix-icon   | Classe de l'iĉone de suffixe.  | string          | — | — |
+| rows | Nombre de ligne pour une zone de texte, ne marche que si `type` est 'textarea'. | number | — | 2 |
+| autosize | Si la zone de texte à une hauteur adaptative, ne marche que si `type` est 'textarea'. Peut accepter un objet, e.g. { minRows: 2, maxRows: 6 }  | boolean / object | — | false |
+| autocomplete | Identique à `autocomplete` dans l'input natif. | string | on / off | off |
+| auto-complete | @DEPRECATED dans la prochaine version majeure. | string | on/off | off |
+| name | Identique à `name` dans l'input natif. | string | — | — |
+| readonly | Identique à `readonly` dans l'input natif. | boolean | — | false |
+| max | Identique à `max` dans l'input natif. | — | — | — |
+| min | Identique à `min` dans l'input natif. | — | — | — |
+| step| Identique à `step` dans l'input natif. | — | — | — |
+| resize| Contrôle les changements de taille autorisés. | string | none, both, horizontal, vertical | — |
+| autofocus | Identique à `autofocus` dans l'input natif. | boolean | — | false |
+| form | Identique à `form` dans l'input natif. | string | — | — |
+| label | Texte du label. | string | — | — |
+| tabindex | tabindex de l'input. | string | - | - |
+| validate-event | Si la validation doit avoir lieu. | boolean | - | true |
+
+### Slots de l'Input
+
+| Nom | Description |
+|------|--------|
+| prefix | Contenu du préfixe, ne marche que si `type` est 'text'. |
+| suffix | Contenu du suffixe, ne marche que si `type` est 'text'. |
+| prepend | Contenu à ajouter avant l'Input, ne marche que si `type` est 'text'. |
+| append | Contenu à ajouter après l'Input, ne marche que si `type` est 'text'. |
+
+### Évènements
+
+| Nom | Description | Paramètres |
+|----| ----| ----|
+| blur | Se déclenche quand Input perds le focus. | (event: Event) |
+| focus | Se déclenche quand Input a le focus. | (event: Event) |
+| change | Déclenché uniquement lorsque la zone de saisie perd le focus ou que l'utilisateur appuie sur Entrée. | (value: string \| number) |
+| input | Déclenché lorsque la valeur d'entrée change. | (value: string \| number) |
+| clear | Se déclenche quand le champ est effacé par le bouton de reset. | — |
+
+### Méthodes de l'Input
+
+| Méthode | Description | Paramètres |
+|------|--------|-------|
+| focus | Met le focus sur le champ. | — |
+| blur | Retire le focus de le champ. | — |
+| select | Sélectionne le texte du champ. | — |
+
+### Attributs de l'autocomplétion
+
+| Attribut | Description | Type | Options | Défaut |
+|----| ----| ----| ---- | -----|
+| placeholder| Le placeholder de l'autocomplétion. | string | — | — |
+| clearable | Si un bouton d'effacement doit apparaître. | boolean | — | false |
+| disabled | Si l'autocomplétion est déactivée. | boolean | — | false|
+| value-key | Nom de la clé de l'objet suggestion pour l'affichage. | string | — | value |
+| icon | Nom de l'icône. | string | — | — |
+| value | Variable liée. | string | — | — |
+| debounce | Délai d'attente après écriture, en millisecondes. | number | — | 300 |
+| placement | Emplacement du menu popup. | string | top / top-start / top-end / bottom / bottom-start / bottom-end | bottom-start |
+| fetch-suggestions | La méthode pour rechercher les suggestions. Lorsqu'elles sont prêtes, appelle `callback(data:[])` pour les renvoyer à l'autocomplétion. | Function(queryString, callback) | — | — |
+| popper-class | Nom de classe pour le menu de l'autocomplétion. | string | — | — |
+| trigger-on-focus | Si les suggestions doivent apparaître quand l'input a le focus. | boolean | — | true |
+| name | Identique à `name` dans l'input natif. | string | — | — |
+| select-when-unmatched | Si un évènement `select` doit être émis après pression sur entrée quand il n'y a pas de résultats. | boolean | — | false |
+| label | Texte du label. | string | — | — |
+| prefix-icon | Classe de l'icône de préfixe. | string | — | — |
+| suffix-icon | Classe de l'iĉone de suffixe. | string | — | — |
+| hide-loading | Si l'icône de chargement doit être cachée dans le cas d'une recherche distante. | boolean | — | false |
+| popper-append-to-body | Si le menu doit être ajouter au body. Si le positionnement du menu est incorrect, essayez de mettre cette propriété à `false`. | boolean | - | true |
+| highlight-first-item | Si la première suggestion de la liste issue de la recherche distante doit être en surbrillance par défaut. | boolean | — | false |
+
+### Slots de l'autocomplétion
+
+| Nom | Description |
+|------|--------|
+| prefix | Contenu du préfixe. |
+| suffix | Contenu du suffixe. |
+| prepend | Contenu à ajouter avant le champ. |
+| append | Contenu à ajouter après le champ. |
+
+### Template personnalisé pour l'autocomplétion
+
+| Nom | Description |
+|------|--------|
+| — | Contenu personnalisé pour les suggestions. Le paramètre de scope est { item }. |
+
+### Évènements de l'autocomplétion
+
+| Nom | Description | Paramètres |
+|----| ----| ----|
+| select | Se déclenche quand une suggestion est cliquée. | La suggestion sélectionnée. |
+
+### Méthodes de l'autocomplétion
+
+| Méthode | Description | Paramètres |
+|------|--------|-------|
+| focus | Met le focus sur l'élément. | — |
diff --git a/examples/docs/fr-FR/installation.md b/examples/docs/fr-FR/installation.md
new file mode 100644
index 00000000000..66076028605
--- /dev/null
+++ b/examples/docs/fr-FR/installation.md
@@ -0,0 +1,35 @@
+## Installation
+
+### NPM
+
+Installer Element via npm est recommandé, il fonctionne parfaitement avec [webpack](https://webpack.js.org/).
+
+```shell
+npm i element-ui -S
+```
+
+### CDN
+
+Obtenez la dernière version via [unpkg.com/element-ui](https://unpkg.com/@femessage/element-ui/), et importez le JavaScript et le CSS dans votre page.
+
+```html
+<!-- import du CSS -->
+<link rel="stylesheet" href="https://unpkg.com/@femessage/element-ui/lib/theme-chalk/index.css">
+<!-- import du JavaScript -->
+<script src="https://unpkg.com/@femessage/element-ui/lib/index.js"></script>
+```
+
+:::tip
+Il est recommandé de fixer la version d'Element lors de l'utilisation du CDN. Référez-vous à  [unpkg.com](https://unpkg.com) pour plus d'informations.
+:::
+
+### Hello world
+
+Si vous utilisez un CDN, une page hello-world peut être obtenue facilement avec Element ([démo en ligne](https://codepen.io/ziyoung/pen/rRKYpd)).
+
+<iframe height="265" style="width: 100%;" scrolling="no" title="Element demo" src="//codepen.io/ziyoung/embed/rRKYpd/?height=265&theme-id=light&default-tab=html" frameborder="no" allowtransparency="true" allowfullscreen="true">
+  See the Pen <a href='https://codepen.io/ziyoung/pen/rRKYpd/'>Element demo</a> by hetech
+  (<a href='https://codepen.io/ziyoung'>@ziyoung</a>) on <a href='https://codepen.io'>CodePen</a>.
+</iframe>
+
+Si vous utilisez npm et souhaitez ajouter webpack, continuez sur la page suivante: [Démarrer](/#/fr-FR/component/quickstart).
diff --git a/examples/docs/fr-FR/layout.md b/examples/docs/fr-FR/layout.md
new file mode 100644
index 00000000000..ed9a52afc71
--- /dev/null
+++ b/examples/docs/fr-FR/layout.md
@@ -0,0 +1,357 @@
+## Layout
+
+Vous pouvez créer une mise en page facilement et rapidement grâce à une base de 24 colonnes.
+
+### Mise en page basique
+
+Créez une grille de mise en page basique grâce aux colonnes.
+
+:::demo Grâce à `row` et `col`, vous pouvez arranger la mise en page en utilisant l'attribut `span`.
+```html
+<el-row>
+  <el-col :span="24"><div class="grid-content bg-purple-dark"></div></el-col>
+</el-row>
+<el-row>
+  <el-col :span="12"><div class="grid-content bg-purple"></div></el-col>
+  <el-col :span="12"><div class="grid-content bg-purple-light"></div></el-col>
+</el-row>
+<el-row>
+  <el-col :span="8"><div class="grid-content bg-purple"></div></el-col>
+  <el-col :span="8"><div class="grid-content bg-purple-light"></div></el-col>
+  <el-col :span="8"><div class="grid-content bg-purple"></div></el-col>
+</el-row>
+<el-row>
+  <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-col :span="6"><div class="grid-content bg-purple-light"></div></el-col>
+</el-row>
+<el-row>
+  <el-col :span="4"><div class="grid-content bg-purple"></div></el-col>
+  <el-col :span="4"><div class="grid-content bg-purple-light"></div></el-col>
+  <el-col :span="4"><div class="grid-content bg-purple"></div></el-col>
+  <el-col :span="4"><div class="grid-content bg-purple-light"></div></el-col>
+  <el-col :span="4"><div class="grid-content bg-purple"></div></el-col>
+  <el-col :span="4"><div class="grid-content bg-purple-light"></div></el-col>
+</el-row>
+
+<style>
+  .el-row {
+    margin-bottom: 20px;
+    &:last-child {
+      margin-bottom: 0;
+    }
+  }
+  .el-col {
+    border-radius: 4px;
+  }
+  .bg-purple-dark {
+    background: #99a9bf;
+  }
+  .bg-purple {
+    background: #d3dce6;
+  }
+  .bg-purple-light {
+    background: #e5e9f2;
+  }
+  .grid-content {
+    border-radius: 4px;
+    min-height: 36px;
+  }
+  .row-bg {
+    padding: 10px 0;
+    background-color: #f9fafc;
+  }
+</style>
+```
+:::
+
+### Espacement
+
+L'espacement entre colonnes est configurable.
+
+:::demo Utilisez l'attribut `gutter` dans el-row pour spécifier l'espacement entre colonnes. La valeur par défaut est 0.
+```html
+<el-row :gutter="20">
+  <el-col :span="6"><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"></div></el-col>
+  <el-col :span="6"><div class="grid-content bg-purple"></div></el-col>
+</el-row>
+
+<style>
+  .el-row {
+    margin-bottom: 20px;
+    &:last-child {
+      margin-bottom: 0;
+    }
+  }
+  .el-col {
+    border-radius: 4px;
+  }
+  .bg-purple-dark {
+    background: #99a9bf;
+  }
+  .bg-purple {
+    background: #d3dce6;
+  }
+  .bg-purple-light {
+    background: #e5e9f2;
+  }
+  .grid-content {
+    border-radius: 4px;
+    min-height: 36px;
+  }
+  .row-bg {
+    padding: 10px 0;
+    background-color: #f9fafc;
+  }
+</style>
+```
+:::
+
+### Mise en page complexe
+
+Vous pouvez former une mise en page complexe en combinant les systèmes de colonnes 1 / 24 comme vous le souhaitez.
+
+:::demo
+```html
+<el-row :gutter="20">
+  <el-col :span="16"><div class="grid-content bg-purple"></div></el-col>
+  <el-col :span="8"><div class="grid-content bg-purple"></div></el-col>
+</el-row>
+<el-row :gutter="20">
+  <el-col :span="8"><div class="grid-content bg-purple"></div></el-col>
+  <el-col :span="8"><div class="grid-content bg-purple"></div></el-col>
+  <el-col :span="4"><div class="grid-content bg-purple"></div></el-col>
+  <el-col :span="4"><div class="grid-content bg-purple"></div></el-col>
+</el-row>
+<el-row :gutter="20">
+  <el-col :span="4"><div class="grid-content bg-purple"></div></el-col>
+  <el-col :span="16"><div class="grid-content bg-purple"></div></el-col>
+  <el-col :span="4"><div class="grid-content bg-purple"></div></el-col>
+</el-row>
+
+<style>
+  .el-row {
+    margin-bottom: 20px;
+    &:last-child {
+      margin-bottom: 0;
+    }
+  }
+  .el-col {
+    border-radius: 4px;
+  }
+  .bg-purple-dark {
+    background: #99a9bf;
+  }
+  .bg-purple {
+    background: #d3dce6;
+  }
+  .bg-purple-light {
+    background: #e5e9f2;
+  }
+  .grid-content {
+    border-radius: 4px;
+    min-height: 36px;
+  }
+  .row-bg {
+    padding: 10px 0;
+    background-color: #f9fafc;
+  }
+</style>
+```
+:::
+
+### Décalage des colonnes
+
+Vous pouvez spécifier un décalage pour les colonnes.
+
+:::demo Utiliser l'attribut `offset` pour régler le décalage.
+
+```html
+<el-row :gutter="20">
+  <el-col :span="6"><div class="grid-content bg-purple"></div></el-col>
+  <el-col :span="6" :offset="6"><div class="grid-content bg-purple"></div></el-col>
+</el-row>
+<el-row :gutter="20">
+  <el-col :span="6" :offset="6"><div class="grid-content bg-purple"></div></el-col>
+  <el-col :span="6" :offset="6"><div class="grid-content bg-purple"></div></el-col>
+</el-row>
+<el-row :gutter="20">
+  <el-col :span="12" :offset="6"><div class="grid-content bg-purple"></div></el-col>
+</el-row>
+
+<style>
+  .el-row {
+    margin-bottom: 20px;
+    &:last-child {
+      margin-bottom: 0;
+    }
+  }
+  .el-col {
+    border-radius: 4px;
+  }
+  .bg-purple-dark {
+    background: #99a9bf;
+  }
+  .bg-purple {
+    background: #d3dce6;
+  }
+  .bg-purple-light {
+    background: #e5e9f2;
+  }
+  .grid-content {
+    border-radius: 4px;
+    min-height: 36px;
+  }
+  .row-bg {
+    padding: 10px 0;
+    background-color: #f9fafc;
+  }
+</style>
+```
+:::
+
+### Alignement
+
+Utilisez la mise en page flex pour rendre l'alignement des colonnes flexible.
+
+:::demo Vous pouvez activer la mise en page flex en réglant l'attribut `type` à 'flex', puis en configurant la disposition des éléments enfants avec l'attribut `justify` définit à 'start', 'center', 'end', 'space-between' ou 'space-around'.
+```html
+<el-row type="flex" class="row-bg">
+  <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>
+<el-row type="flex" class="row-bg" justify="center">
+  <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>
+<el-row type="flex" class="row-bg" justify="end">
+  <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>
+<el-row type="flex" class="row-bg" justify="space-between">
+  <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>
+<el-row type="flex" class="row-bg" justify="space-around">
+  <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>
+
+<style>
+  .el-row {
+    margin-bottom: 20px;
+    &:last-child {
+      margin-bottom: 0;
+    }
+  }
+  .el-col {
+    border-radius: 4px;
+  }
+  .bg-purple-dark {
+    background: #99a9bf;
+  }
+  .bg-purple {
+    background: #d3dce6;
+  }
+  .bg-purple-light {
+    background: #e5e9f2;
+  }
+  .grid-content {
+    border-radius: 4px;
+    min-height: 36px;
+  }
+  .row-bg {
+    padding: 10px 0;
+    background-color: #f9fafc;
+  }
+</style>
+```
+:::
+
+### Mise en page responsive
+
+Se basant sur le design responsive de Bootstrap, il existe cinq breakpoints déjà définit: xs, sm, md, lg and xl.
+
+:::demo
+```html
+<el-row :gutter="10">
+  <el-col :xs="8" :sm="6" :md="4" :lg="3" :xl="1"><div class="grid-content bg-purple"></div></el-col>
+  <el-col :xs="4" :sm="6" :md="8" :lg="9" :xl="11"><div class="grid-content bg-purple-light"></div></el-col>
+  <el-col :xs="4" :sm="6" :md="8" :lg="9" :xl="11"><div class="grid-content bg-purple"></div></el-col>
+  <el-col :xs="8" :sm="6" :md="4" :lg="3" :xl="1"><div class="grid-content bg-purple-light"></div></el-col>
+</el-row>
+
+<style>
+  .el-col {
+    border-radius: 4px;
+  }
+  .bg-purple-dark {
+    background: #99a9bf;
+  }
+  .bg-purple {
+    background: #d3dce6;
+  }
+  .bg-purple-light {
+    background: #e5e9f2;
+  }
+  .grid-content {
+    border-radius: 4px;
+    min-height: 36px;
+  }
+</style>
+```
+:::
+
+### Classes pour cacher certains éléments
+
+Element fournit également une série de classes pour cacher des éléments dans certaines circonstances. Ces classes peuvent être ajoutées à n'importe quel élément du DOM ou composant. Vous devrez importer le fichier CSS suivant pour pouvoir les utiliser:
+
+```js
+import '@femessage/element-ui/lib/theme-chalk/display.css';
+```
+
+Ces classes sont:
+- `hidden-xs-only` - disparaît sur les très petits viewports uniquement
+- `hidden-sm-only` - disparaît sur les petits viewports uniquement
+- `hidden-sm-and-down` - disparaît sur les petits viewports et plus petits
+- `hidden-sm-and-up` - disparaît sur les petits viewports et plus grand
+- `hidden-md-only` - disparaît sur les viewports moyens uniquement
+- `hidden-md-and-down` - disparaît sur les viewports moyens et plus petits
+- `hidden-md-and-up` - disparaît sur les viewports moyens et plus grand
+- `hidden-lg-only` - disparaît sur les viewports larges uniquement
+- `hidden-lg-and-down` - disparaît sur les viewports larges et plus petits
+- `hidden-lg-and-up` - disparaît sur les viewports larges et plus grand
+- `hidden-xl-only` - disparaît sur les viewports très larges uniquement
+
+### Attributs des lignes
+
+| Attribut      | Description          | Type      | Valeurs acceptées       | Défaut  |
+|---------- |-------------- |---------- |--------------------------------  |-------- |
+| gutter | Espacement de la grille. | number | — | 0 |
+| type | Mode de mise en page. Vous pouvez utiliser flex, qui fonctionne sur les navigateurs modernes. | string | — | — |
+| justify | Alignement horizontal pour le mise en page flex. | string | start/end/center/space-around/space-between | start |
+| align | Alignement vertical pour la mise en page flex. | string | top/middle/bottom | top |
+| tag | Élément de tag personnalisé. | string | * | div |
+
+### Attributs des colonnes
+
+| Attribut      | Description          | Type      | Valeurs acceptées       | Défaut  |
+|---------- |-------------- |---------- |--------------------------------  |-------- |
+| span | Nombre de colonnes sur lesquelles l'élément s'étend. | number | — | 24 |
+| offset | Nombre d'espacements sur la gauche de l'élément. | number | — | 0 |
+| push |  Nombre de colonnes dont l'élément se déplace vers la droite. | number | — | 0 |
+| pull |  Nombre de colonnes dont l'élément se déplace vers la gauche. | number | — | 0 |
+| xs | `<768px` Nombre de colonnes responsives ou bien objet de propriétés de colonne. | number/object (e.g. {span: 4, offset: 4}) | — | — |
+| sm | `≥768px` Nombre de colonnes responsives ou bien objet de propriétés de colonne. | number/object (e.g. {span: 4, offset: 4}) | — | — |
+| md | `≥992px` Nombre de colonnes responsives ou bien objet de propriétés de colonne. | number/object (e.g. {span: 4, offset: 4}) | — | — |
+| lg | `≥1200px` Nombre de colonnes responsives ou bien objet de propriétés de colonne. | number/object (e.g. {span: 4, offset: 4}) | — | — |
+| xl | `≥1920px` Nombre de colonnes responsives ou bien objet de propriétés de colonne. | number/object (e.g. {span: 4, offset: 4}) | — | — |
+| tag | Élément de tag personnalisé. | string | * | div |
diff --git a/examples/docs/fr-FR/link.md b/examples/docs/fr-FR/link.md
new file mode 100644
index 00000000000..60762ab6013
--- /dev/null
+++ b/examples/docs/fr-FR/link.md
@@ -0,0 +1,81 @@
+## Link
+
+Un hyperlien textuel.
+
+### Usage basique
+
+Lien texte basique.
+
+:::demo
+
+```html
+<div>
+  <el-link href="https://element.eleme.io" target="_blank">défaut</el-link>
+  <el-link type="primary">primaire</el-link>
+  <el-link type="success">succès</el-link>
+  <el-link type="warning">avertissement</el-link>
+  <el-link type="danger">danger</el-link>
+  <el-link type="info">info</el-link>
+</div>
+```
+
+:::
+
+### Désactivé
+
+Lien désactivé.
+
+:::demo
+
+```html
+<div>
+  <el-link disabled>défaut</el-link>
+  <el-link type="primary" disabled>primaire</el-link>
+  <el-link type="success" disabled>succès</el-link>
+  <el-link type="warning" disabled>avertissement</el-link>
+  <el-link type="danger" disabled>danger</el-link>
+  <el-link type="info" disabled>info</el-link>
+</div>
+```
+
+:::
+
+### Souligné
+
+Lien souligné.
+
+:::demo
+
+```html
+<div>
+  <el-link :underline="false">non souligné</el-link>
+  <el-link>Souligné</el-link>
+</div>
+```
+
+:::
+
+### Icône
+
+Lien avec icône.
+
+:::demo
+
+```html
+<div>
+  <el-link icon="el-icon-edit">Éditer</el-link>
+  <el-link>Vérifier<i class="el-icon-view el-icon--right"></i> </el-link>
+</div>
+```
+
+:::
+
+### Attributs
+
+| Attribut  | Description                     | Type    | Options                                     | Défaut  |
+| --------- | ------------------------------- | ------- | ------------------------------------------- | ------- |
+| type      | Type du lien.                   | string  | primary / success / warning / danger / info | défaut  |
+| underline | Si le composant est souligné.   | boolean | —                                           | true    |
+| disabled  | Si le composant est désactivé.  | boolean | —                                           | false   |
+| href      | Identique au `href` natif.      | string  | —                                           | -       |
+| icon      | Nom de classe de l'icône.       | string  | —                                           | -       |
diff --git a/examples/docs/fr-FR/loading-button.md b/examples/docs/fr-FR/loading-button.md
new file mode 100644
index 00000000000..53b7e055691
--- /dev/null
+++ b/examples/docs/fr-FR/loading-button.md
@@ -0,0 +1 @@
+## LoadingButton
diff --git a/examples/docs/fr-FR/loading.md b/examples/docs/fr-FR/loading.md
new file mode 100644
index 00000000000..335505cdc49
--- /dev/null
+++ b/examples/docs/fr-FR/loading.md
@@ -0,0 +1,218 @@
+## Loading
+
+Affiche une animation durant le chargement de données.
+
+### Loading dans un conteneur
+
+Affiche une animation dans un conteneur (Comme un tableau par exemple) pendant le chargement des données.
+
+:::demo Element fournit deux moyens d'invoquer Loading: la directive et le service. Pour la directive `v-loading`, attachez simplement un `boolean`. Par défaut le masque sera ajouté à l'élément contenant la directive. Ajoutez le modificateur `body` pour ajouter le masque à l'élément body.
+
+```html
+<template>
+  <el-table
+    v-loading="loading"
+    :data="tableData"
+    style="width: 100%">
+    <el-table-column
+      prop="date"
+      label="Date"
+      width="180">
+    </el-table-column>
+    <el-table-column
+      prop="name"
+      label="Nom"
+      width="180">
+    </el-table-column>
+    <el-table-column
+      prop="address"
+      label="Adresse">
+    </el-table-column>
+  </el-table>
+</template>
+
+<style>
+  body {
+    margin: 0;
+  }
+</style>
+
+<script>
+  export default {
+    data() {
+      return {
+        tableData: [{
+          date: '2016-05-02',
+          name: 'John Smith',
+          address: 'No.1518,  Jinshajiang Road, Putuo District'
+        }, {
+          date: '2016-05-04',
+          name: 'John Smith',
+          address: 'No.1518,  Jinshajiang Road, Putuo District'
+        }, {
+          date: '2016-05-01',
+          name: 'John Smith',
+          address: 'No.1518,  Jinshajiang Road, Putuo District'
+        }],
+        loading: true
+      };
+    }
+  };
+</script>
+```
+:::
+
+### Personnalisation
+
+Vous pouvez personnaliser le texte, le spinner et la couleur de fond.
+
+:::demo Ajoutez l'attribut `element-loading-text` à l'élement sur lequel `v-loading` est attaché et sa valeur sera affichée sous le spinner. De la même façon, `element-loading-spinner` et `element-loading-background` permettent de personnaliser le spinner et la couleur de fond.
+```html
+<template>
+  <el-table
+    v-loading="loading"
+    element-loading-text="Loading..."
+    element-loading-spinner="el-icon-loading"
+    element-loading-background="rgba(0, 0, 0, 0.8)"
+    :data="tableData"
+    style="width: 100%">
+    <el-table-column
+      prop="date"
+      label="Date"
+      width="180">
+    </el-table-column>
+    <el-table-column
+      prop="name"
+      label="Nom"
+      width="180">
+    </el-table-column>
+    <el-table-column
+      prop="address"
+      label="Adresse">
+    </el-table-column>
+  </el-table>
+</template>
+
+<script>
+  export default {
+    data() {
+      return {
+        tableData: [{
+          date: '2016-05-02',
+          name: 'John Smith',
+          address: 'No.1518,  Jinshajiang Road, Putuo District'
+        }, {
+          date: '2016-05-04',
+          name: 'John Smith',
+          address: 'No.1518,  Jinshajiang Road, Putuo District'
+        }, {
+          date: '2016-05-01',
+          name: 'John Smith',
+          address: 'No.1518,  Jinshajiang Road, Putuo District'
+        }],
+        loading: true
+      };
+    }
+  };
+</script>
+```
+:::
+
+### Chargement plein écran
+
+Affichez une animation en plein écran quand vous charger des données.
+
+:::demo Quand il est utilisé comme une directive, un Loading plein écran nécessite le modificateur `fullscreen` qui sera ajouté au body. Dans ce cas, si vous souhaitez désactiver le défilement du body, vous pouvez ajouter le modificateur `lock`. Quand il est utilisé comme service, Loading est en plein écran par défaut.
+
+```html
+<template>
+  <el-button
+    type="primary"
+    @click="openFullScreen1"
+    v-loading.fullscreen.lock="fullscreenLoading">
+    Comme directive
+  </el-button>
+  <el-button
+    type="primary"
+    @click="openFullScreen2">
+    Comme service
+  </el-button>
+</template>
+
+<script>
+  export default {
+    data() {
+      return {
+        fullscreenLoading: false
+      }
+    },
+    methods: {
+      openFullScreen1() {
+        this.fullscreenLoading = true;
+        setTimeout(() => {
+          this.fullscreenLoading = false;
+        }, 2000);
+      },
+      openFullScreen2() {
+        const loading = this.$loading({
+          lock: true,
+          text: 'Loading',
+          spinner: 'el-icon-loading',
+          background: 'rgba(0, 0, 0, 0.7)'
+        });
+        setTimeout(() => {
+          loading.close();
+        }, 2000);
+      }
+    }
+  }
+</script>
+```
+:::
+
+### Service
+
+Vous pouvez invoquer Loading comme un service. Importez le service Loading:
+
+```javascript
+import { Loading } from '@femessage/element-ui';
+```
+Et invoquer-le:
+
+```javascript
+Loading.service(options);
+```
+
+Le paramètre `options` correspond à la configuration de Loading (voir table suivante). `LoadingService` retourne une instance de Loading, que vous pouvez fermer en appelant la méthode `close`:
+
+```javascript
+let loadingInstance = Loading.service(options);
+this.$nextTick(() => { // Loading should be closed asynchronously
+  loadingInstance.close();
+});
+```
+
+Notez que dans ce cas le Loading plein écran est un singleton. Si un nouveau Loading plein écran est invoqué avant la fermeture du précédent, celui-ci sera retourné au lieu d'en créer un nouveau:
+
+```javascript
+let loadingInstance1 = Loading.service({ fullscreen: true });
+let loadingInstance2 = Loading.service({ fullscreen: true });
+console.log(loadingInstance1 === loadingInstance2); // true
+```
+
+Appeler la méthode `close` sur n'importe lequel des deux fermera le Loading.
+
+Si Element est importé en entier, une méthode globale `$loading` sera ajoutée à Vue.prototype. Vous pourrez l'invoquer comme ceci: `this.$loading(options)` et elle retournera une instance Loading.
+
+### Options
+
+| Attribut      | Description          | Type      | Valeurs acceptées       | Défaut  |
+|---------- |-------------- |---------- |--------------------------------  |-------- |
+| target | L'élément du DOM a couvrir. Accepte un objet DOM ou un string. Si c'est un string, il sera passé à `document.querySelector` Pour avoir l'élément du DOM correspondant. | object/string | — | document.body |
+| body | Identique au modificateur `body` de `v-loading`. | boolean | — | false |
+| fullscreen | Identique au modificateur `fullscreen` de `v-loading`. | boolean | — | true |
+| lock | Identique au modificateur `lock` de `v-loading`. | boolean | — | false |
+| text | Texte a afficher sous le spinner. | string | — | — |
+| spinner | Classe du spinner. | string | — | — |
+| background | Couleur de fond du masque. | string | — | — |
+| customClass | Classe du Loading. | string | — | — |
diff --git a/examples/docs/fr-FR/lr-container.md b/examples/docs/fr-FR/lr-container.md
new file mode 100644
index 00000000000..980502df7ac
--- /dev/null
+++ b/examples/docs/fr-FR/lr-container.md
@@ -0,0 +1 @@
+## LrContainer
diff --git a/examples/docs/fr-FR/menu.md b/examples/docs/fr-FR/menu.md
new file mode 100644
index 00000000000..a884b6b52d3
--- /dev/null
+++ b/examples/docs/fr-FR/menu.md
@@ -0,0 +1,305 @@
+## NavMenu
+
+Menu qui fournit un système de navigation à votre site.
+
+### Barre du haut
+
+La barre du haut peut être utilisée pour différents scénarios.
+
+:::demo Par défaut le menu est vertical, mais vous pouvez le passer en horizontal en réglant l'attribut `mode` sur 'horizontal'. De plus, vous pouvez utiliser le composant submenu pour créer un second niveau niveau de menu. Le menu utilises `background-color`, `text-color` et `active-text-color` pour personnaliser les couleurs.
+```html
+<el-menu :default-active="activeIndex" class="el-menu-demo" mode="horizontal" @select="handleSelect">
+  <el-menu-item index="1">Centre de traitement</el-menu-item>
+  <el-submenu index="2">
+    <template slot="title">Lieu de travail</template>
+    <el-menu-item index="2-1">item un</el-menu-item>
+    <el-menu-item index="2-2">item deux</el-menu-item>
+    <el-menu-item index="2-3">item trois</el-menu-item>
+    <el-submenu index="2-4">
+      <template slot="title">item quatre</template>
+      <el-menu-item index="2-4-1">item un</el-menu-item>
+      <el-menu-item index="2-4-2">item deux</el-menu-item>
+      <el-menu-item index="2-4-3">item trois</el-menu-item>
+    </el-submenu>
+  </el-submenu>
+  <el-menu-item index="3" disabled>Infos</el-menu-item>
+  <el-menu-item index="4"><a href="https://www.ele.me" target="_blank">Commandes</a></el-menu-item>
+</el-menu>
+<div class="line"></div>
+<el-menu
+  :default-active="activeIndex2"
+  class="el-menu-demo"
+  mode="horizontal"
+  @select="handleSelect"
+  background-color="#545c64"
+  text-color="#fff"
+  active-text-color="#ffd04b">
+  <el-menu-item index="1">Centre de traitement</el-menu-item>
+  <el-submenu index="2">
+    <template slot="title">Lieu de travail</template>
+    <el-menu-item index="2-1">item un</el-menu-item>
+    <el-menu-item index="2-2">item deux</el-menu-item>
+    <el-menu-item index="2-3">item trois</el-menu-item>
+    <el-submenu index="2-4">
+      <template slot="title">item quatre</template>
+      <el-menu-item index="2-4-1">item un</el-menu-item>
+      <el-menu-item index="2-4-2">item deux</el-menu-item>
+      <el-menu-item index="2-4-3">item trois</el-menu-item>
+    </el-submenu>
+  </el-submenu>
+  <el-menu-item index="3" disabled>Info</el-menu-item>
+  <el-menu-item index="4"><a href="https://www.ele.me" target="_blank">Commandes</a></el-menu-item>
+</el-menu>
+
+<script>
+  export default {
+    data() {
+      return {
+        activeIndex: '1',
+        activeIndex2: '1'
+      };
+    },
+    methods: {
+      handleSelect(key, keyPath) {
+        console.log(key, keyPath);
+      }
+    }
+  }
+</script>
+```
+:::
+
+### Barre latérale
+
+Menu vertical avec sous-menus.
+
+:::demo Vous pouvez utiliser le composant el-menu-item-group pour créer un groupe dans le menu dont le nom sera déterminé par celui de la propriété title ou d'un slot.
+```html
+<el-row class="tac">
+  <el-col :span="12">
+    <h5>Couleurs par défaut</h5>
+    <el-menu
+      default-active="2"
+      class="el-menu-vertical-demo"
+      @open="handleOpen"
+      @close="handleClose">
+      <el-submenu index="1">
+        <template slot="title">
+          <i class="el-icon-location"></i>
+          <span>Navigateur Un</span>
+        </template>
+        <el-menu-item-group title="Group Un">
+          <el-menu-item index="1-1">item un</el-menu-item>
+          <el-menu-item index="1-2">item un</el-menu-item>
+        </el-menu-item-group>
+        <el-menu-item-group title="Group Deux">
+          <el-menu-item index="1-3">item trois</el-menu-item>
+        </el-menu-item-group>
+        <el-submenu index="1-4">
+          <template slot="title">item quatre</template>
+          <el-menu-item index="1-4-1">item un</el-menu-item>
+        </el-submenu>
+      </el-submenu>
+      <el-menu-item index="2">
+        <i class="el-icon-menu"></i>
+        <span>Navigateur Deux</span>
+      </el-menu-item>
+      <el-menu-item index="3" disabled>
+        <i class="el-icon-document"></i>
+        <span>Navigateur Trois</span>
+      </el-menu-item>
+      <el-menu-item index="4">
+        <i class="el-icon-setting"></i>
+        <span>Navigateur Quatre</span>
+      </el-menu-item>
+    </el-menu>
+  </el-col>
+  <el-col :span="12">
+    <h5>Couleurs personnalisées</h5>
+    <el-menu
+      default-active="2"
+      class="el-menu-vertical-demo"
+      @open="handleOpen"
+      @close="handleClose"
+      background-color="#545c64"
+      text-color="#fff"
+      active-text-color="#ffd04b">
+      <el-submenu index="1">
+        <template slot="title">
+          <i class="el-icon-location"></i>
+          <span>Navigateur Un</span>
+        </template>
+        <el-menu-item-group title="Group Un">
+          <el-menu-item index="1-1">item un</el-menu-item>
+          <el-menu-item index="1-2">item un</el-menu-item>
+        </el-menu-item-group>
+        <el-menu-item-group title="Group Deux">
+          <el-menu-item index="1-3">item trois</el-menu-item>
+        </el-menu-item-group>
+        <el-submenu index="1-4">
+          <template slot="title">item quatre</template>
+          <el-menu-item index="1-4-1">item un</el-menu-item>
+        </el-submenu>
+      </el-submenu>
+      <el-menu-item index="2">
+        <i class="el-icon-menu"></i>
+        <span>Navigateur Deux</span>
+      </el-menu-item>
+      <el-menu-item index="3" disabled>
+        <i class="el-icon-document"></i>
+        <span>Navigateur Trois</span>
+      </el-menu-item>
+      <el-menu-item index="4">
+        <i class="el-icon-setting"></i>
+        <span>Navigateur Quatre</span>
+      </el-menu-item>
+    </el-menu>
+  </el-col>
+</el-row>
+
+<script>
+  export default {
+    methods: {
+      handleOpen(key, keyPath) {
+        console.log(key, keyPath);
+      },
+      handleClose(key, keyPath) {
+        console.log(key, keyPath);
+      }
+    }
+  }
+</script>
+```
+:::
+
+### Menu réduit
+
+Le menu vertical peut être réduit.
+
+:::demo
+```html
+<el-radio-group v-model="isCollapse" style="margin-bottom: 20px;">
+  <el-radio-button :label="false">Agrandir</el-radio-button>
+  <el-radio-button :label="true">Réduire</el-radio-button>
+</el-radio-group>
+<el-menu default-active="2" class="el-menu-vertical-demo" @open="handleOpen" @close="handleClose" :collapse="isCollapse">
+  <el-submenu index="1">
+    <template slot="title">
+      <i class="el-icon-location"></i>
+      <span slot="title">Navigateur Un</span>
+    </template>
+    <el-menu-item-group>
+      <span slot="title">Group Un</span>
+      <el-menu-item index="1-1">item un</el-menu-item>
+      <el-menu-item index="1-2">item deux</el-menu-item>
+    </el-menu-item-group>
+    <el-menu-item-group title="Group Deux">
+      <el-menu-item index="1-3">item trois</el-menu-item>
+    </el-menu-item-group>
+    <el-submenu index="1-4">
+      <span slot="title">item quatre</span>
+      <el-menu-item index="1-4-1">item un</el-menu-item>
+    </el-submenu>
+  </el-submenu>
+  <el-menu-item index="2">
+    <i class="el-icon-menu"></i>
+    <span slot="title">Navigateur Deux</span>
+  </el-menu-item>
+  <el-menu-item index="3" disabled>
+    <i class="el-icon-document"></i>
+    <span slot="title">Navigateur Trois</span>
+  </el-menu-item>
+  <el-menu-item index="4">
+    <i class="el-icon-setting"></i>
+    <span slot="title">Navigateur Quatre</span>
+  </el-menu-item>
+</el-menu>
+
+<style>
+  .el-menu-vertical-demo:not(.el-menu--collapse) {
+    width: 200px;
+    min-height: 400px;
+  }
+</style>
+
+<script>
+  export default {
+    data() {
+      return {
+        isCollapse: true
+      };
+    },
+    methods: {
+      handleOpen(key, keyPath) {
+        console.log(key, keyPath);
+      },
+      handleClose(key, keyPath) {
+        console.log(key, keyPath);
+      }
+    }
+  }
+</script>
+```
+:::
+
+### Attributs du menu
+
+| Attribut      | Description          | Type      | Valeurs acceptées       | Défaut  |
+|---------- |-------- |---------- |-------------  |-------- |
+| mode     | Mode d'affichage du menu.   | string  |   horizontal / vertical   | vertical |
+| collapse  | Si le menu peut être réduit, uniquement disponible en mode vertical. | boolean  |   —   | false |
+| background-color  | Couleur de fond du menu (format hexadécimal). | string |   —   | #ffffff |
+| text-color  | Couleur du texte du menu (format hexadécimal) | string |   —   | #303133 |
+| active-text-color  | Couleur du texte de l'item actif (format hexadécimal). | string |   —   | #2460e0 |
+| default-active | Index du menu actif. | string    | — | — |
+| default-openeds | Liste contenant les index les sous-menus actifs.  | Array    | — | — |
+| unique-opened  | Si un seul sous-menu peut être actif.  | boolean   | — | false   |
+| menu-trigger | Comment les sous-menu sont déclenchés, uniquement en mode horizontal. | string    | hover / click | hover |
+| router  | Si le mode `vue-router` est activé. Si `true`, l'index sera utilisé comme 'path' pour activer la route. | boolean   | — | false   |
+| collapse-transition  | Si la transition de réduction doit être activée. | boolean   | — | true   |
+
+### Méthodes du menu
+
+| Nom | Description | Paramètres |
+|---------- |-------- |---------- |
+| open  | Ouvre un sous-menu spécifique. | index: index du sous-menu à ouvrir |
+| close  | Ferme un sous-menu spécifique. | index: index du sous-menu à fermer |
+
+### Évènements du menu
+
+| Nom | Description | Paramètres |
+|---------- |-------- |---------- |
+| select  | Fonction de callback pour quand le menu est activé. | index: index du menu activé, indexPath: index path du menu activé.  |
+| open  | Fonction de callback pour quand le sous-menu s'agrandit. | index: index of expanded sous-menu, indexPath: index path du sous-menu |
+| close  | Fonction de callback pour quand le sous-menu se réduit. | index: index of collapsed sous-menu, indexPath: index path du sous-menu |
+
+### Évènements des items du menu
+
+| Nom | Description | Paramètres |
+|---------- |-------- |---------- |
+| click  | Fonction de callback pour quand le menu-item est cliqué. | el: instance du menu-item.  |
+
+### Attributs du sous-menu
+
+| Attributs      | Description          | Type      | Valeurs acceptées       | Défaut  |
+|---------- |-------- |---------- |-------------  |-------- |
+| index     | Identificateur unique. | string  | — | — |
+| popper-class | Classe du menu popup. | string | — | — |
+| show-timeout | Délai avant de montrer un sous-menu. | number | — | 300 |
+| hide-timeout | Délai avant de cacher un sous-menu. | number | — | 300 |
+| disabled | Si le sous-menu est désactivé. | boolean | — | false |
+| popper-append-to-body | S'il faut ajouter un menu popup au body. Si le positionnement du body n'est pas bon, vous pouvez essayer de régler cette propriété. | boolean | - | Sous-menus de niveau 1: true / autres sous-menus: false |
+
+### Attributs des items du menu
+
+| Attributs      | Description          | Type      | Valeurs acceptées       | Défaut  |
+|---------- |-------- |---------- |-------------  |-------- |
+| index     | Identificateur unique. | string/null  | — | null |
+| route     | Objet Vue Router. | object | — | — |
+| disabled | Si l'item est désactivé. | boolean | — | false |
+
+### Attributs des groupes
+
+| Attributs      | Description          | Type      | Valeurs acceptées       | Défaut  |
+|---------- |-------- |---------- |-------------  |-------- |
+| title     | Titre du groupe. | string  | — | — |
diff --git a/examples/docs/fr-FR/message-box-center.md b/examples/docs/fr-FR/message-box-center.md
new file mode 100644
index 00000000000..c331ef7e5a2
--- /dev/null
+++ b/examples/docs/fr-FR/message-box-center.md
@@ -0,0 +1 @@
+## MessageBoxCenter
diff --git a/examples/docs/fr-FR/message-box.md b/examples/docs/fr-FR/message-box.md
new file mode 100644
index 00000000000..dd5a9e67295
--- /dev/null
+++ b/examples/docs/fr-FR/message-box.md
@@ -0,0 +1,330 @@
+## MessageBox
+
+Un ensemble de fenêtres modales pour afficher des messages système, tels que des alertes, des demandes de confirmation ou des informations importantes.
+
+:::tip
+MessageBox est avant tout conçue pour émuler des `alert`, `confirm` ou `prompt`, son contenu devrait donc être simple. Pour afficher un contenu plus riche, utilisez plutôt Dialog.
+:::
+
+### Alert
+
+Alert interrompt l'action de l'utilisateur jusqu'à ce qu'il confirme.
+
+:::demo Ouvrez un alert en appelant la méthode `$alert`. Elle simule une `alert` système et ne peut être fermée en pressant ESC ou en cliquant hors de la boite. Dans cet exemple, deux paramètres `message` et `title` sont reçus. Notez que lorsque la boite est fermée, elle retourne un objet `Promise`. Si vous n'êtes pas certains que tout vos navigateurs cibles supportent `Promise`, utilisez un polyfill ou utilisez des callbacks comme dans l'exemple qui suit.
+
+```html
+<template>
+  <el-button type="text" @click="open">Cliquez pour ouvrir la MessageBox</el-button>
+</template>
+
+<script>
+  export default {
+    methods: {
+      open() {
+        this.$alert('Ceci est un message', 'Titre', {
+          confirmButtonText: 'OK',
+          callback: action => {
+            this.$message({
+              type: 'info',
+              message: `action: ${ action }`
+            });
+          }
+        });
+      }
+    }
+  }
+</script>
+```
+:::
+
+### Confirm
+
+Confirm est utilisé pour demander une confirmation à l'utilisateur.
+
+:::demo Appelez la méthode `$confirm` pour ouvrir une confirm, qui simule le `confirm` système. Vous pouvez aussi personnaliser MessageBox en passant un objet à l'attribut `options`. L'attribut `type` indique le type de message (voir en bas de la page pour la liste des valeurs possibles). Notez que l'attribut `title` doit être de type `string`. S'il se trouve être un `object`, il sera considéré comme étant l'attribut `options`. Cet exemple utilise une `Promise` pour gérer la suite du processus.
+
+```html
+<template>
+  <el-button type="text" @click="open">Cliquez pour ouvrir la MessageBox</el-button>
+</template>
+
+<script>
+  export default {
+    methods: {
+      open() {
+        this.$confirm('Ceci effacera le fichier. Continuer?', 'Warning', {
+          confirmButtonText: 'OK',
+          cancelButtonText: 'Annuler',
+          type: 'warning'
+        }).then(() => {
+          this.$message({
+            type: 'success',
+            message: 'Fichier supprimé'
+          });
+        }).catch(() => {
+          this.$message({
+            type: 'info',
+            message: 'Suppression annulée'
+          });          
+        });
+      }
+    }
+  }
+</script>
+```
+
+:::
+
+### Prompt
+
+Prompt est utilisé lorsqu'un utilisateur.
+
+:::demo Appellez la méthode `$prompt` pour ouvrir un prompt simulant le `prompt` système. Vous pouvez utiliser le paramètre `inputPattern` pour spécifier un pattern à l'aide d'une RegExp. Utilisez `inputValidator` pour indiquer la méthode de validation, qui devra retourner un `Boolean` ou un `String`. Retourner `false` ou un `String` veut dire que la validation a échouée, et la string ainsi fournie sera le `inputErrorMessage`. De plus, vous pouvez personnaliser le placeholder du champs avec le paramètre `inputPlaceholder`.
+
+```html
+<template>
+  <el-button type="text" @click="open">Cliquez pour ouvrir la MessageBox</el-button>
+</template>
+
+<script>
+  export default {
+    methods: {
+      open() {
+        this.$prompt('Entrez votre e-mail', 'Astuce', {
+          confirmButtonText: 'OK',
+          cancelButtonText: 'Annuler',
+          inputPattern: /[\w!#$%&'*+/=?^_`{|}~-]+(?:\.[\w!#$%&'*+/=?^_`{|}~-]+)*@(?:[\w](?:[\w-]*[\w])?\.)+[\w](?:[\w-]*[\w])?/,
+          inputErrorMessage: 'E-mail invalide'
+        }).then(({ value }) => {
+          this.$message({
+            type: 'success',
+            message: 'Votre e-mail est: ' + value
+          });
+        }).catch(() => {
+          this.$message({
+            type: 'info',
+            message: 'Annulé'
+          });
+        });
+      }
+    }
+  }
+</script>
+```
+:::
+
+### Personnalisation
+
+Il est possible d'afficher du contenu un peu plus varié et personnalisé.
+
+:::demo les trois précédentes méthodes sont des repackagings de la méthode `$msgbox`. cet exemple appelle directement `$msgbox` en utilisant l'attribut `showCancelButton` pour indiquer si un bouton annuler doit être affiché. De plus, vous pouvez utiliser `cancelButtonClass` pour ajouter du style et `cancelButtonText` pour personnaliser le bouton texte (voir la liste complète en fin de page). La méthode `beforeClose`est appelée quand la MessageBox va être fermée et prévient sa fermeture. Elle prend trois paramètres: `action`, `instance` et `done`. Elle vous permet ainsi d'effectuer des actions avant la fermeture, e.g. activer `loading` pour le bouton de confirmation. Appelez `done` pour fermer la MessageBox, sinon l'instance ne sera jamais fermée.
+
+```html
+<template>
+  <el-button type="text" @click="open">Cliquez pour ouvrir la MessageBox</el-button>
+</template>
+
+<script>
+  export default {
+    methods: {
+      open() {
+        const h = this.$createElement;
+        this.$msgbox({
+          title: 'Message',
+          message: h('p', null, [
+            h('span', null, 'Le message peut être '),
+            h('i', { style: 'color: teal' }, 'VNode')
+          ]),
+          showCancelButton: true,
+          confirmButtonText: 'OK',
+          cancelButtonText: 'Annuler',
+          beforeClose: (action, instance, done) => {
+            if (action === 'confirm') {
+              instance.confirmButtonLoading = true;
+              instance.confirmButtonText = 'Chargement...';
+              setTimeout(() => {
+                done();
+                setTimeout(() => {
+                  instance.confirmButtonLoading = false;
+                }, 300);
+              }, 3000);
+            } else {
+              done();
+            }
+          }
+        }).then(action => {
+          this.$message({
+            type: 'info',
+            message: 'Action: ' + action
+          });
+        });
+      },
+    }
+  }
+</script>
+```
+:::
+
+:::tip
+Le contenu de MessageBox peut être `VNode`, Vous permettant de passer des composants personnalisés. Lorsque vous ouvrer MessageBox, Vue compare le nouveau `VNode` avec l'ancien `VNode`, puis détermine comment rafraîchir efficacement l'UI, le composant peut donc ne pas être totalement re-rendu ([#8931](https://github.com/femessage/element/issues/8931)). Dans ce cas, Vous pouvez ajouter une clé unique à `VNode` à chaque fois que MessageBox s'ouvre: [exemple](https://jsfiddle.net/zhiyang/ezmhq2ef).
+:::
+
+### Utiliser du HTML
+
+`message` supporte le HTML.
+
+:::demo Mettez `dangerouslyUseHTMLString` à `true` et `message` sera traité comme du HTML.
+
+```html
+<template>
+  <el-button type="text" @click="open">Cliquez pour ouvrir la MessageBox</el-button>
+</template>
+
+<script>
+  export default {
+    methods: {
+      open() {
+        this.$alert('<strong>Ceci est du <i>HTML</i></strong>', 'HTML', {
+          dangerouslyUseHTMLString: true
+        });
+      }
+    }
+  }
+</script>
+```
+:::
+
+:::warning
+Bien que la propriété `message` supporte le HTML, générer du contenu HTML dynamiquement peut être très dangereux, car cela permet des [attaques XSS](https://en.wikipedia.org/wiki/Cross-site_scripting). Donc lorsque `dangerouslyUseHTMLString` est présent, soyez certain de sécuriser le contenu de `message`, et n'assignez **jamais** à `message` du contenu fournit par l'utilisateur.
+:::
+
+### Distinguer 'annuler' de 'fermer'
+
+Dans certains cas, les boutons fermer et annuler peuvent avoir des sens différents.
+
+:::demo Par défaut, le paramètre de la `callback` et de la promesse rejetée est 'cancel' lorsque l'utilisateur annule (clique sur le bouton annuler) ou lorsqu'il ferme la fenêtre (clique sur le bouton fermer, hors de la fenêtre, ou presse ESC). Si `distinguishCancelAndClose` est à `true`, le dernier cas précédent renvoie 'close' au lieu de 'cancel' afin de pouvoir gérer les deux actions différemment.
+
+```html
+<template>
+  <el-button type="text" @click="open">Cliquez pour ouvrir la MessageBox</el-button>
+</template>
+
+<script>
+  export default {
+    methods: {
+      open() {
+        this.$confirm('Vous avez du travail non enregistré, enregistrer et quitter?', 'Confirm', {
+          distinguishCancelAndClose: true,
+          confirmButtonText: 'Enregistrer',
+          cancelButtonText: 'Ne pas enregistrer'
+        })
+          .then(() => {
+            this.$message({
+              type: 'info',
+              message: 'Enregistré. Passage a une nouvelle route.'
+            });
+          })
+          .catch(action => {
+            this.$message({
+              type: 'info',
+              message: action === 'cancel'
+                ? 'Changements annulés. Passage sur une nouvelle route.'
+                : 'Reste sur la même route'
+            })
+          });
+      }
+    }
+  }
+</script>
+```
+:::
+
+### Contenu centré
+
+le contenu de MessageBox peut être centré.
+
+:::demo Mettre `center` à `true` centrera le contenu
+
+```html
+<template>
+  <el-button type="text" @click="open">Cliquez pour ouvrir la MessageBox</el-button>
+</template>
+
+<script>
+  export default {
+    methods: {
+      open() {
+        this.$confirm('Ceci effacera le fichier, continuer?' , 'Warning', {
+          confirmButtonText: 'OK',
+          cancelButtonText: 'Annuler',
+          type: 'warning',
+          center: true
+        }).then(() => {
+          this.$message({
+            type: 'success',
+            message: 'Fichier supprimé'
+          });
+        }).catch(() => {
+          this.$message({
+            type: 'info',
+            message: 'Annulé'
+          });
+        });
+      }
+    }
+  }
+</script>
+```
+:::
+
+### Méthode globale
+
+Si Element est importé entièrement, il ajoutera les méthodes suivantes à Vue.prototype: `$msgbox`, `$alert`, `$confirm` et `$prompt`. Dans ce cas vous pouvez appeler `MessageBox` comme nous l'avons fait dans cette page. Les paramètres sont:
+- `$msgbox(options)`
+- `$alert(message, title, options)` ou `$alert(message, options)`
+- `$confirm(message, title, options)` ou `$confirm(message, options)`
+- `$prompt(message, title, options)` ou `$prompt(message, options)`
+
+### Import à la demande
+
+Si vous préférer importer `MessageBox` à la demande:
+
+```javascript
+import { MessageBox } from '@femessage/element-ui';
+```
+
+Les méthodes correspondantes sont: `MessageBox`, `MessageBox.alert`, `MessageBox.confirm` et `MessageBox.prompt`. Les paramètres sont les mêmes que précédemment.
+
+### Options
+
+| Attribut      | Description          | Type      | Valeurs acceptées       | Défaut  |
+|---------- |-------------- |---------- |--------------------------------  |-------- |
+| title | Titre de la MessageBox. | string | — | — |
+| message | Contenu de la MessageBox. | string | — | — |
+| dangerouslyUseHTMLString | Si `message` doit être traité comme du HTML. | boolean | — | false |
+| type | Type du message, utilisé pour le choix d'icône. | string | success / info / warning / error | — |
+| iconClass | Classe d'icône personnalisée, écrase `type`. | string | — | — |
+| customClass | Nom de classe pour MessageBox. | string | — | — |
+| callback | La callback de fermeture de MessageBox si vous n'utilisez pas les promesses. | function(action, instance), ou `action` peut être 'confirm', 'cancel' ou 'close', et `instance` est l'instance MessageBox. | — | — |
+| showClose | Si l'icône de fermeture doit être affichée. | boolean | — | true |
+| beforeClose | La callback de pré-fermeture qui empèchera MessageBox de se fermer. | function(action, instance, done), ou `action` peut-être 'confirm', 'cancel' ou 'close'; `instance` est l'instance de MessageBox; `done` est la méthode pour fermer l'instance. | — | — |
+| distinguishCancelAndClose | S'il doit y avoir une différence entre l'annulation et la fermeture de la MessageBox. | boolean | — | false |
+| lockScroll | Si le défilement de la page doit être bloqué lorsque la MessageBox est active. | boolean | — | true |
+| showCancelButton | Si le bouton annuler doit être affiché. | boolean | — | false (true dans le cas de confirm ou prompt). |
+| showConfirmButton | Si le bouton confirmer doit être affiché. | boolean | — | true |
+| cancelButtonText | Le texte du bouton annuler. | string | — | Cancel |
+| confirmButtonText | Le texte du bouton confirmer. | string | — | OK |
+| cancelButtonClass | Classe du bouton annuler. | string | — | — |
+| confirmButtonClass | Classe du bouton confirmer. | string | — | — |
+| closeOnClickModal | Si MessageBox peut être fermée en cliquant en dehors. | boolean | — | true (false dans le cas de alert). |
+| closeOnPressEscape | Si MessageBox peut être fermée en pressant ESC. | boolean | — | true (false dans le cas de alert) |
+| closeOnHashChange | Si MessageBox doit être fermée quand le hash change. | boolean | — | true |
+| showInput | Si un champs d'input doit être affiché. | boolean | — | false (true dans le cas de prompt). |
+| inputPlaceholder | Placeholder du champs d'input. | string | — | — |
+| inputType | Type du champs d'input. | string | — | text |
+| inputValue | Valeur initiale du champs d'input. | string | — | — |
+| inputPattern | RegExp du champs d'input. | regexp | — | — |
+| inputValidator | Fonction de validation du champs d'input. Doit retourner un boolean ou un string. Si c'est un string, il sera assigné à inputErrorMessage. | function | — | — |
+| inputErrorMessage | Message d'erreur lorsque la validation échoue. | string | — | Illegal input |
+| center | Si le contenu doit être centré. | boolean | — | false |
+| roundButton | Si le bouton doit être rond. | boolean | — | false |
diff --git a/examples/docs/fr-FR/message.md b/examples/docs/fr-FR/message.md
new file mode 100644
index 00000000000..e2e51713016
--- /dev/null
+++ b/examples/docs/fr-FR/message.md
@@ -0,0 +1,224 @@
+## Message
+
+Utilisé pour avoir un retour après une action particulière. La différence avec Notification est que ce dernier est surtout utilisé pour afficher des notifications système passives.
+
+### Usage
+
+S'affiche en haut de la page et disparaît après trois secondes.
+
+:::demo L'utilisation de Message est très similaire à Notification, la plupart des options ne sont donc pas expliquées ici. Référez-vous à la table en fin de page et celle de Notification pour en savoir plus. Element affecte la méthode `$message` pour appeler Message. Il peut prendre en paramètre un string ou un VNode, qui sera affiché en tant que body principal.
+
+```html
+<template>
+  <el-button :plain="true" @click="open">Afficher le message</el-button>
+  <el-button :plain="true" @click="openVn">VNode</el-button>
+</template>
+
+<script>
+  export default {
+    methods: {
+      open() {
+        this.$message('Ceci est un message.');
+      },
+
+      openVn() {
+        const h = this.$createElement;
+        this.$message({
+          message: h('p', null, [
+            h('span', null, 'Message peut être '),
+            h('i', { style: 'color: teal' }, 'VNode')
+          ])
+        });
+      }
+    }
+  }
+</script>
+```
+:::
+
+### Types
+
+Utilisé pour montrer un retour d'activités Success, Warning, Message ou Error.
+
+:::demo Lorsque vous avez besoin de plus de personnalisation, Message peut aussi accepter un objet en paramètre. Par exemple, le paramètre `type` définit différents types, son défaut étant `info`. Dans ce cas le body est passé comme valeur de `message`. De plus, il existe des méthodes pour chaque type, afin que vous puissiez vous passer de la propriété `type` comme dans `open4`.
+```html
+<template>
+  <el-button :plain="true" @click="open2">success</el-button>
+  <el-button :plain="true" @click="open3">warning</el-button>
+  <el-button :plain="true" @click="open1">message</el-button>
+  <el-button :plain="true" @click="open4">error</el-button>
+</template>
+
+<script>
+  export default {
+    methods: {
+      open1() {
+        this.$message('Ceci est un message.');
+      },
+      open2() {
+        this.$message({
+          message: 'Félicitations, ceci est un message de succès.',
+          type: 'success'
+        });
+      },
+
+      open3() {
+        this.$message({
+          message: 'Attention, ceci est un avertissement.',
+          type: 'warning'
+        });
+      },
+
+      open4() {
+        this.$message.error('Ouups, ceci est une erreur.');
+      }
+    }
+  }
+</script>
+```
+:::
+
+### Fermeture
+
+Un bouton de fermeture peut être ajouté.
+
+:::demo Un Message ne peut être fermé par défaut. Utiliséez `showClose` si vous avez besoin de pouvoir le fermer. De plus, tout comme Notification, Message possède une `duration` réglable. La durée par défaut est de 3000 ms, et infinie si à `0`.
+```html
+<template>
+  <el-button :plain="true" @click="open1">message</el-button>
+  <el-button :plain="true" @click="open2">success</el-button>
+  <el-button :plain="true" @click="open3">warning</el-button>
+  <el-button :plain="true" @click="open4">error</el-button>
+</template>
+
+<script>
+  export default {
+    methods: {
+      open1() {
+        this.$message({
+          showClose: true,
+          message: 'Ceci est un message.'
+        });
+      },
+
+      open2() {
+        this.$message({
+          showClose: true,
+          message: 'Félicitations, ceci est un message de succès.',
+          type: 'success'
+        });
+      },
+
+      open3() {
+        this.$message({
+          showClose: true,
+          message: 'Attention, ceci est un avertissement.',
+          type: 'warning'
+        });
+      },
+
+      open4() {
+        this.$message({
+          showClose: true,
+          message: 'Ouups, ceci est une erreur.',
+          type: 'error'
+        });
+      }
+    }
+  }
+</script>
+```
+:::
+
+### Texte centré
+
+Utilisez l'attribut `center` pour centrer le texte.
+
+:::demo
+
+```html
+<template>
+  <el-button :plain="true" @click="openCenter">Texte centré</el-button>
+</template>
+
+<script>
+  export default {
+    methods: {
+      openCenter() {
+        this.$message({
+          message: 'Texte centré',
+          center: true
+        });
+      }
+    }
+  }
+</script>
+```
+:::
+
+### Utiliser du HTML
+
+`message` supporte le HTML.
+
+:::demo Mettez `dangerouslyUseHTMLString` à true et `message` sera traité comme du HTML.
+
+```html
+<template>
+  <el-button :plain="true" @click="openHTML">Utiliser du HTML</el-button>
+</template>
+
+<script>
+  export default {
+    methods: {
+      openHTML() {
+        this.$message({
+          dangerouslyUseHTMLString: true,
+          message: '<strong>Ceci est du <i>HTML</i></strong>'
+        });
+      }
+    }
+  }
+</script>
+```
+:::
+
+:::warning
+Bien que la propriété `message` supporte le HTML, générer du contenu HTML dynamiquement peut être très dangereux, car cela permet des [attaques XSS](https://en.wikipedia.org/wiki/Cross-site_scripting). Donc lorsque `dangerouslyUseHTMLString` est présent, soyez certain de sécuriser le contenu de `message`, et n'assignez **jamais** à `message` du contenu fournit par l'utilisateur.
+:::
+
+### Méthode globale
+
+Element ajoute une méthode `$message` à Vue.prototype. Vous pouvez donc appeler `Message` dans l'instance de Vue comme dans cette page.
+
+### Import à la demande
+
+Importez `Message`:
+
+```javascript
+import { Message } from '@femessage/element-ui';
+```
+
+Dans ce cas il faudra appeler `Message(options)`. Les méthodes des différents types sont aussi ajoutées, e.g. `Message.success(options)`. Vous pouvez appeler `Message.closeAll()` pour fermer manuellement toutes les instances.
+
+### Options
+
+| Attribut      | Description          | Type      | Valeurs acceptées       | Défaut  |
+|---------- |-------------- |---------- |--------------------------------  |-------- |
+| message | Texte du message. | string / VNode | — | — |
+| type | Type du message. | string | success/warning/info/error | info |
+| iconClass | Classe de l'icône, écrase `type`. | string | — | — |
+| dangerouslyUseHTMLString | Si `message` doit être traité comme du HTML. | boolean | — | false |
+| customClass | Nom de classe pour Message. | string | — | — |
+| duration | La durée d'affichage, en millisecondes. Si 0, la durée est infinie. | number | — | 3000 |
+| showClose | Si un bouton de fermeture doit être affiché. | boolean | — | false |
+| center | Si le texte doit être centré. | boolean | — | false |
+| onClose | Callback de fermeture avec en paramètre l'instance de Message. | function | — | — |
+| offset | set the distance to the top of viewport | number | — | 20 |
+
+### Méthodes
+
+`Message` et `this.$message` retourne l'instance actuelle. Pour fermer manuellement cette instance, appelez sa méthode `close`.
+
+| Méthode | Description |
+| ---- | ---- |
+| close | Ferme l'instance de Message. |
diff --git a/examples/docs/fr-FR/notification.md b/examples/docs/fr-FR/notification.md
new file mode 100644
index 00000000000..21f4ede62de
--- /dev/null
+++ b/examples/docs/fr-FR/notification.md
@@ -0,0 +1,316 @@
+## Notification
+
+Affiche une notification globale dans un coin de la page.
+
+### Usage
+
+:::demo Element enregistre la méthode `$notify` qui reçoit un objet en paramètre. Dans le cas le plus simple, vous pouvez simplement configurer les champs `title` et` message`. Par défaut, la notification se ferme automatiquement après 4500ms, mais vous pouvez régler une autre durée avec `duration`. Si la durée est mise à `0`, la notification ne se fermera pas. `duration` prends donc un `Number` en millisecondes.
+
+```html
+<template>
+  <el-button
+    plain
+    @click="open1">
+    Se ferme automatiquement
+  </el-button>
+  <el-button
+    plain
+    @click="open2">
+    Ne se ferme pas automatiquement
+    </el-button>
+</template>
+
+<script>
+  export default {
+    methods: {
+      open1() {
+        const h = this.$createElement;
+
+        this.$notify({
+          title: 'Titre',
+          message: h('i', { style: 'color: teal' }, 'Ceci est un rappel')
+        });
+      },
+
+      open2() {
+        this.$notify({
+          title: 'Prompt',
+          message: 'Ceci est un message qui ne se ferme pas',
+          duration: 0
+        });
+      }
+    }
+  }
+</script>
+```
+:::
+
+### Types
+
+Nous fournissons quatre types: succès, avertissement, information et erreur.
+
+:::demo Element fournit quatre types de notifications: `success`, `warning`, `info` et `error`. Il sont choisis grâce au champs `type`, et n'importe quelle autre valeur sera ignorée. Il existe des méthodes  enregistrées pour chaque type, comme dans `open3` et `open4`, qui ne nécessitent donc pas le champs `type`.
+```html
+<template>
+  <el-button
+    plain
+    @click="open1">
+    Success
+  </el-button>
+  <el-button
+    plain
+    @click="open2">
+    Warning
+  </el-button>
+  <el-button
+    plain
+    @click="open3">
+    Info
+  </el-button>
+  <el-button
+    plain
+    @click="open4">
+    Error
+  </el-button>
+</template>
+
+<script>
+  export default {
+    methods: {
+      open1() {
+        this.$notify({
+          title: 'Success',
+          message: 'Ceci est un message de succès',
+          type: 'success'
+        });
+      },
+
+      open2() {
+        this.$notify({
+          title: 'Warning',
+          message: 'Ceci est un avertissement',
+          type: 'warning'
+        });
+      },
+
+      open3() {
+        this.$notify.info({
+          title: 'Info',
+          message: 'Ceci est une information'
+        });
+      },
+
+      open4() {
+        this.$notify.error({
+          title: 'Error',
+          message: 'Ceci est une erreur'
+        });
+      }
+    }
+  }
+</script>
+```
+:::
+
+### Position personnalisée
+
+La notification peut apparaître dans le coin de votre choix.
+
+:::demo L'attribut `position` définit le coin d'apparition de la notification. Cela peut être `top-right`, `top-left`, `bottom-right` ou `bottom-left`. Le défaut est `top-right`.
+```html
+<template>
+  <el-button
+    plain
+    @click="open1">
+    Top Right
+  </el-button>
+  <el-button
+    plain
+    @click="open2">
+    Bottom Right
+  </el-button>
+  <el-button
+    plain
+    @click="open3">
+    Bottom Left
+  </el-button>
+  <el-button
+    plain
+    @click="open4">
+    Top Left
+  </el-button>
+</template>
+
+<script>
+  export default {
+    methods: {
+      open1() {
+        this.$notify({
+          title: 'Custom Position',
+          message: 'Je suis dans le coin supérieur droit'
+        });
+      },
+
+      open2() {
+        this.$notify({
+          title: 'Custom Position',
+          message: 'Je suis dans le coin inférieur droit',
+          position: 'bottom-right'
+        });
+      },
+
+      open3() {
+        this.$notify({
+          title: 'Custom Position',
+          message: 'Je suis dans le coin inférieur gauche',
+          position: 'bottom-left'
+        });
+      },
+
+      open4() {
+        this.$notify({
+          title: 'Custom Position',
+          message: 'Je suis dans le coin supérieur gauche',
+          position: 'top-left'
+        });
+      }
+    }
+  }
+</script>
+```
+:::
+
+### Avec décalage
+
+Vous pouvez décaler l'emplacement de la notification par rapport au bord de la page.
+
+:::demo Réglez `offset` pour choisir le décalage de la notification. Notez que chaque notification apparaissant au même moment devrait avoir le même décalage.
+```html
+<template>
+  <el-button
+    plain
+    @click="open">
+    Notification avec décalage
+  </el-button>
+</template>
+
+<script>
+  export default {
+    methods: {
+      open() {
+        this.$notify.success({
+          title: 'Success',
+          message: 'Ceci est un message de succès',
+          offset: 100
+        });
+      }
+    }
+  }
+</script>
+```
+:::
+
+### Utiliser du HTML
+
+L'attribut `message` supporte le HTML.
+
+:::demo Mettez `dangerouslyUseHTMLString` à true et `message` sera traité comme du HTML.
+
+```html
+<template>
+  <el-button
+    plain
+    @click="open">
+    Utiliser du HTML
+  </el-button>
+</template>
+
+<script>
+  export default {
+    methods: {
+      open() {
+        this.$notify({
+          title: 'HTML String',
+          dangerouslyUseHTMLString: true,
+          message: '<strong>Ceci est du <i>HTML</i></strong>'
+        });
+      }
+    }
+  }
+</script>
+```
+:::
+
+:::warning
+Bien que la propriété `message` supporte le HTML, générer du contenu HTML dynamiquement peut être très dangereux, car cela permet des [attaques XSS](https://en.wikipedia.org/wiki/Cross-site_scripting). Donc lorsque `dangerouslyUseHTMLString` est présent, soyez certain de sécuriser le contenu de `message`, et n'assignez **jamais** à `message` du contenu fournit par l'utilisateur.
+:::
+
+### Cacher le bouton de fermeture
+
+Il est possible de cacher le bouton de fermeture.
+
+:::demo Mettez `showClose` à `false` Pour que la notification ne puisse pas être fermée par l'utilisateur.
+
+```html
+<template>
+  <el-button
+    plain
+    @click="open">
+    Bouton de fermeture caché
+    </el-button>
+</template>
+
+<script>
+  export default {
+    methods: {
+      open() {
+        this.$notify.success({
+          title: 'Info',
+          message: 'Ceci est un message sans bouton de fermeture',
+          showClose: false
+        });
+      }
+    }
+  }
+</script>
+```
+:::
+
+### Méthode globale
+
+Element ajoute la méthode `$notify` à Vue.prototype. Vous pouvez donc appeler `Notification` dans l'instance de Vue comme nous avons fait dans cette page.
+
+### Import à la demande
+
+Importez `Notification`:
+
+```javascript
+import { Notification } from '@femessage/element-ui';
+```
+
+Dans ce cas vous devrez appeler `Notification(options)`. Il existe aussi des méthodes pour chaque type, e.g. `Notification.success(options)`. Vous pouvez appeler `Notification.closeAll()` pour fermer manuellement toutes les instances.
+
+### Options
+
+| Attribut      | Description          | Type      | Valeurs acceptées       | Défaut  |
+|---------- |-------------- |---------- |--------------------------------  |-------- |
+| title | Titre de la notification. | string | — | — |
+| message | Message de la notification. | string/Vue.VNode | — | — |
+| dangerouslyUseHTMLString | Si `message` doit être traité comme du HTML. | boolean | — | false |
+| type | Type de notification. | string | success/warning/info/error | — |
+| iconClass | Classe d'icône. Écrasé par `type`. | string | — | — |
+| customClass | Nom de classe pour la notification. | string | — | — |
+| duration | Durée avant fermeture. Infinie si mise à 0. | number | — | 4500 |
+| position | Position de la notification. | string | top-right/top-left/bottom-right/bottom-left | top-right |
+| showClose | Si le bouton de fermeture doit être affiché. | boolean | — | true |
+| onClose | Callback de fermeture. | function | — | — |
+| onClick | Callback quand la notification est cliquée. | function | — | — |
+| offset | Décalage par rapport au bord de la page. Toutes les notifications arrivant au même moment devraient avoir le même décalage. | number | — | 0 |
+
+### Méthodes
+
+`Notification` et `this.$notify` retourne l'instance actuelle de Notification. Pour fermer chaque instance manuellement, appelez la méthode `close`.
+
+| Méthode | Description |
+| ---- | ---- |
+| close | Ferme la notification. |
diff --git a/examples/docs/fr-FR/page-header.md b/examples/docs/fr-FR/page-header.md
new file mode 100644
index 00000000000..badf872bc35
--- /dev/null
+++ b/examples/docs/fr-FR/page-header.md
@@ -0,0 +1,39 @@
+## PageHeader
+
+Si le chemin de la page est simple, il est recommandé d’utiliser PageHeader au lieu de Breadcrumb.
+
+### Basic
+
+:::demo
+```html
+<el-page-header @back="goBack" content="detail">
+</el-page-header>
+
+<script>
+  export default {
+    methods: {
+      goBack() {
+        console.log('go back');
+      }
+    }
+  }
+</script>
+```
+:::
+
+### Attributes
+| Attribute | Description   | Type      | Valeurs acceptées             | Défaut |
+|---------- |-------------- |---------- |------------------------------ | ------ |
+| title     | titre principal | string  |  —                            | Back   |
+| content   | contenu       | string    |  —                            | —      |
+
+### Events
+| Event Name | Description   | Parameters |
+|----------- |-------------- |----------- |
+| back       | se déclenche lorsque vous cliquez sur le côté droit | — |
+
+### Slots
+| slot      | Description            |
+|---------- | ---------------------- |
+| title     | contenu du titre       |
+| content   | contenu                |
diff --git a/examples/docs/fr-FR/pagination.md b/examples/docs/fr-FR/pagination.md
new file mode 100644
index 00000000000..5771b39cd51
--- /dev/null
+++ b/examples/docs/fr-FR/pagination.md
@@ -0,0 +1,207 @@
+## Pagination
+
+Si vous avez beaucoup de données à afficher sur une seule page, il est préférable d'utiliser une pagination.
+
+### Usage
+
+:::demo Configurez `layout` avec les différent éléments de pagination que vous souhaitez, séparés par des virgules. Les éléments possibles sont: `prev` (pour aller vers la page précédente), `next` (pour aller vers la page suivante), `pager` (liste des pages), `jumper` (un champ pour aller directement à une page précise), `total` (Le nombre total d'entrées), `size` (un sélecteur qui détermine la taille de la page) et `->`(chaque élément après celui-ci sera poussé vers la droite).
+
+```html
+<div class="block">
+  <span class="demonstration">Quand vous avez quelques pages</span>
+  <el-pagination
+    layout="prev, pager, next"
+    :total="50">
+  </el-pagination>
+</div>
+<div class="block">
+  <span class="demonstration">Quand vous avez plus que 7 pages</span>
+  <el-pagination
+    layout="prev, pager, next"
+    :total="1000">
+  </el-pagination>
+</div>
+```
+:::
+
+### Nombre de pages
+
+:::demo Par défaut, Pagination réduit les boutons lorsqu'il y a plus de 7 pages. Ce nombre est configurable avec l'attribut `pager-count`.
+
+```html
+<el-pagination
+  :page-size="20"
+  :pager-count="11"
+  layout="prev, pager, next"
+  :total="1000">
+</el-pagination>
+```
+:::
+
+### Boutons avec couleur de fond
+
+:::demo Réglez l'attribut `background` pour change la couleur de fond des boutons.
+
+```html
+<el-pagination
+  background
+  layout="prev, pager, next"
+  :total="1000">
+</el-pagination>
+```
+:::
+
+### Petite pagination
+
+Utilisez une pagination de taille réduite si vous manquez d'espace.
+
+:::demo Ajoutez simplement l'attribut `small` et la pagination sera de taille réduite.
+
+```html
+<el-pagination
+  small
+  layout="prev, pager, next"
+  :total="50">
+</el-pagination>
+```
+:::
+
+### Plus d'éléments
+
+Vous pouvez ajouter plus de modules suivant vos besoins.
+
+:::demo Cet exemple contient un use-case complet. Il utilise les évènements `size-change` et `current-change` pour gérer la taille de la page et son changement. `page-sizes` accepte un tableau d'entiers, chacun représentant une taille dans les options de `sizes`, e.g. `[100, 200, 300, 400]` indique que le sélecteur aura quatre options: 100, 200, 300 ou 400 entrées par page.
+
+```html
+<template>
+  <div class="block">
+    <span class="demonstration">Total d'entrées</span>
+    <el-pagination
+      @size-change="handleSizeChange"
+      @current-change="handleCurrentChange"
+      :current-page.sync="currentPage1"
+      :page-size="100"
+      layout="total, prev, pager, next"
+      :total="1000">
+    </el-pagination>
+  </div>
+  <div class="block">
+    <span class="demonstration">Changement de taille de la page</span>
+    <el-pagination
+      @size-change="handleSizeChange"
+      @current-change="handleCurrentChange"
+      :current-page.sync="currentPage2"
+      :page-sizes="[100, 200, 300, 400]"
+      :page-size="100"
+      layout="sizes, prev, pager, next"
+      :total="1000">
+    </el-pagination>
+  </div>
+  <div class="block">
+    <span class="demonstration">Aller à</span>
+    <el-pagination
+      @size-change="handleSizeChange"
+      @current-change="handleCurrentChange"
+      :current-page.sync="currentPage3"
+      :page-size="100"
+      layout="prev, pager, next, jumper"
+      :total="1000">
+    </el-pagination>
+  </div>
+  <div class="block">
+    <span class="demonstration">Tous en même temps</span>
+    <el-pagination
+      @size-change="handleSizeChange"
+      @current-change="handleCurrentChange"
+      :current-page.sync="currentPage4"
+      :page-sizes="[100, 200, 300, 400]"
+      :page-size="100"
+      layout="total, sizes, prev, pager, next, jumper"
+      :total="400">
+    </el-pagination>
+  </div>
+</template>
+<script>
+  export default {
+    methods: {
+      handleSizeChange(val) {
+        console.log(`${val} items per page`);
+      },
+      handleCurrentChange(val) {
+        console.log(`current page: ${val}`);
+      }
+    },
+    data() {
+      return {
+        currentPage1: 5,
+        currentPage2: 5,
+        currentPage3: 5,
+        currentPage4: 4
+      };
+    }
+  }
+</script>
+```
+:::
+
+### Cacher la pagination s'il n'y a qu'une seule page
+
+Lorsqu'il n'y a qu'une seule page, il est possible de cacher la pagination avec l'attribut `hide-on-single-page`.
+
+:::demo
+```html
+<div>
+ <el-switch v-model="value">
+ </el-switch>
+ <el-pagination
+  :hide-on-single-page="value"
+  :total="5"
+  layout="prev, pager, next">
+</el-pagination>
+</div>
+
+<script>
+  export default {
+    data() {
+      return {
+        value: false
+      }
+    }
+  }
+</script>
+```
+:::
+
+### Attributs
+
+| Attribut      | Description          | Type      | Valeurs acceptées       | Défaut  |
+|--------------------|----------------------------------------------------------|-------------------|-------------|--------|
+| small | Si la pagination doit être petite. | boolean |      —       | false |
+| background | Si les boutons doivent avoir une couleur de fond. | boolean | — | false |
+| page-size | Nombre d'entrées sur chaque page, supporte le modificateur .sync. | number |      —       | 10 |
+| total | Nombre total d'entrées. | number | — | — |
+| page-count | Nombre de pages. Réglez `total` ou `page-count` et le nombre de pages sera affiché; si vous avez besoin de `page-sizes`, `total` est requis. | number | — | — |
+| pager-count | Nombre de sélecteurs de pages. Pagination se réduit lorsque le nombre de pages dépasse cette valeur. | number | Nombre impair entre 5 et 21. | 7 |
+| current-page | Le numéro de page courant, supporte le modificateur .sync. | number | — | 1 |
+| layout | L'ensemble des éléments de la pagination, séparés par des virgules. | string | `sizes`, `prev`, `pager`, `next`, `jumper`, `->`, `total`, `slot` | 'prev, pager, next, jumper, ->, total'  |
+| page-sizes | Options pour la taille des pages. | number[] | — |  [10, 20, 30, 40, 50, 100] |
+| popper-class | Classe du menu de sélection de la taille des pages. | string | — | — |
+| prev-text | Texte du bouton prev. | string | — | — |
+| next-text | Texte du bouton next. | string | — | — |
+| disabled | Si la pagination est désactivée. | boolean | — | false |
+| hide-on-single-page | Si la pagination doit être cachée quand il n'y a qu'une seule page. | boolean | — | - |
+
+### Évènements
+
+| Nom | Description | Paramètres |
+|---------|--------|---------|
+| size-change | Se déclenche quand `page-size` change. | La nouvelle taille. |
+| current-change | Se déclenche quand `current-page` change. | La nouvelle page courante |
+| prev-click | Se déclenche quand le bouton prev est cliqué et que la page courante change. | La nouvelle page courante. |
+| next-click | Se déclenche quand le bouton next est cliqué et que la page courante change. | La nouvelle page courante. |
+
+### Slot
+
+| Name | Description |
+| --- | --- |
+| — | Contenu personnalisé. Pour l'utiliser vous devez déclarer `slot` dans `layout`. |
diff --git a/examples/docs/fr-FR/panel.md b/examples/docs/fr-FR/panel.md
new file mode 100644
index 00000000000..48382924949
--- /dev/null
+++ b/examples/docs/fr-FR/panel.md
@@ -0,0 +1 @@
+## Panel
diff --git a/examples/docs/fr-FR/popconfirm.md b/examples/docs/fr-FR/popconfirm.md
new file mode 100644
index 00000000000..72033bfc06f
--- /dev/null
+++ b/examples/docs/fr-FR/popconfirm.md
@@ -0,0 +1,54 @@
+## Popconfirm 
+
+A simple confirmation dialog of an element click action.
+
+### Basic usage
+
+Popconfirm is similar to Popover. So for some duplicated attributes, please refer to the documentation of Popover.
+
+:::demo Only `title` attribute is avaliable in Popconfirm, `content` will be ignored.
+```html
+<template>
+<el-popconfirm
+  title="Are you sure to delete this?"
+>
+  <el-button slot="reference">Delete</el-button>
+</el-popconfirm>
+</template>
+````
+:::
+
+### Customise
+You can customise Popconfirm like:
+:::demo
+```html
+<template>
+<el-popconfirm
+  confirmButtonText='OK'
+  cancelButtonText='No, Thanks'
+  icon="el-icon-info"
+  iconColor="red"
+  title="Are you sure to delete this?"
+>
+  <el-button slot="reference">Delete</el-button>
+</el-popconfirm>
+</template>
+```
+:::
+
+### Attributes
+| Attribute      | Description          | Type      | Accepted Values       | Default  |
+|--------------------|----------------------------------------------------------|-------------------|-------------|--------|
+|  title              | Title | String | — | — |
+|  confirmButtonText              | Confirm button text | String | — | — |
+|  cancelButtonText              | Cancel button text | String | — | — |
+|  confirmButtonType              | Confirm button type | String | — | Primary |
+|  cancelButtonType              | Cancel button type | String | — | Text |
+|  icon              | Icon | String | — | el-icon-question |
+|  iconColor              | Icon color | String | — | #f90 |
+|  hideIcon              | is hide Icon | Boolean | — | false |
+
+### Slot
+| Name | Description |
+|--- | ---|
+| reference | HTML element that triggers Popconfirm |
diff --git a/examples/docs/fr-FR/popover.md b/examples/docs/fr-FR/popover.md
new file mode 100644
index 00000000000..eca6f859e0e
--- /dev/null
+++ b/examples/docs/fr-FR/popover.md
@@ -0,0 +1,173 @@
+## Popover
+
+### Usage
+
+Similaire à Tooltip, Popover est aussi construit avec `Vue-popper`. Certains attributs sont donc les mêmes, vous pourrez vous référer à la documentation de Tooltip pour certains d'entre eux.
+
+:::demo L'attribut `trigger` détermine comment le popover se déclenche: `hover`, `click`, `focus` ou `manual`. Concernant l'élément déclencheur, vous pouvez l'écrire de deux manières: en utilisant le slot `slot="reference"` ou bien la directive `v-popover` avec `ref` égal à popover.
+
+```html
+<template>
+  <el-popover
+    placement="top-start"
+    title="Title"
+    width="200"
+    trigger="hover"
+    content="this is content, this is content, this is content">
+    <el-button slot="reference">S'active au passage du curseur</el-button>
+  </el-popover>
+
+  <el-popover
+    placement="bottom"
+    title="Title"
+    width="200"
+    trigger="click"
+    content="this is content, this is content, this is content">
+    <el-button slot="reference">S'active en cliquant</el-button>
+  </el-popover>
+
+  <el-popover
+    ref="popover"
+    placement="right"
+    title="Title"
+    width="200"
+    trigger="focus"
+    content="this is content, this is content, this is content">
+  </el-popover>
+  <el-button v-popover:popover>S'active au focus</el-button>
+
+  <el-popover
+    placement="bottom"
+    title="Title"
+    width="200"
+    trigger="manual"
+    content="this is content, this is content, this is content"
+    v-model="visible">
+    <el-button slot="reference" @click="visible = !visible">S'active manuellement</el-button>
+  </el-popover>
+</template>
+
+<script>
+  export default {
+    data() {
+      return {
+        visible: false
+      };
+    }
+  };
+</script>
+```
+:::
+
+### Informations imbriquées
+
+D'autres composants peuvent s'imbriquer dans un popover.
+
+:::demo Remplacez `content` par un `slot`.
+
+```html
+<el-popover
+  placement="right"
+  width="400"
+  trigger="click">
+  <el-table :data="gridData">
+    <el-table-column width="150" property="date" label="date"></el-table-column>
+    <el-table-column width="100" property="name" label="name"></el-table-column>
+    <el-table-column width="300" property="address" label="address"></el-table-column>
+  </el-table>
+  <el-button slot="reference">Cliquez pour activer</el-button>
+</el-popover>
+
+<script>
+  export default {
+    data() {
+      return {
+        gridData: [{
+          date: '2016-05-02',
+          name: 'Jack',
+          address: 'New York City'
+        }, {
+          date: '2016-05-04',
+          name: 'Jack',
+          address: 'New York City'
+        }, {
+          date: '2016-05-01',
+          name: 'Jack',
+          address: 'New York City'
+        }, {
+          date: '2016-05-03',
+          name: 'Jack',
+          address: 'New York City'
+        }]
+      };
+    }
+  };
+</script>
+```
+:::
+
+### Opérations imbriquées
+
+Vous pouvez aussi imbriquer des opérations. Procéder ainsi est plus léger que d'utiliser Dialog.
+
+:::demo
+```html
+<el-popover
+  placement="top"
+  width="160"
+  v-model="visible">
+  <p>Voulez-vous vraiment supprimer ceci?</p>
+  <div style="text-align: right; margin: 0">
+    <el-button size="mini" type="text" @click="visible = false">Annuler</el-button>
+    <el-button type="primary" size="mini" @click="visible = false">Confirmer</el-button>
+  </div>
+  <el-button slot="reference">Supprimer</el-button>
+</el-popover>
+
+<script>
+  export default {
+    data() {
+      return {
+        visible: false,
+      };
+    }
+  }
+</script>
+```
+:::
+
+### Attributs
+
+| Attribut      | Description          | Type      | Valeurs acceptées       | Défaut  |
+|--------------------|----------------------------------------------------------|-------------------|-------------|--------|
+| trigger | Comment le popover se déclenche. | string  | click/focus/hover/manual |    click    |
+| title | Titre du popover. | string | — | — |
+| content | Contenu du popover, peut être remplacé par un `slot` | string | — | — |
+| width | Largeur du popover. | string, number  | — | Min width 150px |
+| placement | Emplacement du popover. | string | top/top-start/top-end/bottom/bottom-start/bottom-end/left/left-start/left-end/right/right-start/right-end |  bottom |
+| disabled | Si le popover est désactivé. | boolean | — |  false |
+| value / v-model | Si le popover est visible. | Boolean | — |  false |
+| offset | Décalage du popover. | number | — |  0 |
+| transition | Animation de transition du popover. | string | — | el-fade-in-linear |
+| visible-arrow | Si une flèche doit être affichée ou non. Pour plus d'informations, référez-vous à [Vue-popper](https://github.com/element-component/vue-popper). | boolean | — | true |
+| popper-options | Paramètres pour [popper.js](https://popper.js.org/documentation.html). | object | Référez-vous à [popper.js](https://popper.js.org/documentation.html). | `{ boundariesElement: 'body', gpuAcceleration: false }` |
+| popper-class | Classe du popover. | string | — | — |
+| open-delay | Délai d'affichage, lorsque `trigger` est 'hover', en millisecondes. | number | — | — |
+| close-delay | delay before disappearing when `trigger` is hover, in milliseconds | number | — | 200 |
+| tabindex   | [tabindex](https://developer.mozilla.org/fr/docs/Web/HTML/Attributs_universels/tabindex) de Popover | number | — | 0 |
+
+### Slot
+
+| Nom | Description |
+| --- | --- |
+| — | Contenu du popover. |
+| reference | Element HTML qui déclenche le popover. |
+
+### Évènements
+
+| Nom | Description | Paramètres |
+|---------|--------|---------|
+| show | Se déclenche quand le popover s'affiche. | — |
+| after-enter | Se déclenche quand la transition d'entrée se termine. | — |
+| hide | Se déclenche quand le popover disparaît. | — |
+| after-leave | Se déclenche quand la transition de sortie se termine. | — |
diff --git a/examples/docs/fr-FR/progress.md b/examples/docs/fr-FR/progress.md
new file mode 100644
index 00000000000..2c9f673ff42
--- /dev/null
+++ b/examples/docs/fr-FR/progress.md
@@ -0,0 +1,174 @@
+## Progress
+
+Progress est utilisé pour afficher la progression d'une opération et informer l'utilisateur de son status actuel.
+
+### Barre de progression linéaire
+
+:::demo Utilisez l'attribut `percentage` pour indiquer le pourcentage. Cet attribut est **requis** et doit être compris entre 0 et 100. You can custom text format by setting `format`.
+```html
+<el-progress :percentage="50"></el-progress>
+<el-progress :percentage="100" :format="format"></el-progress>
+<el-progress :percentage="100" status="success"></el-progress>
+<el-progress :percentage="100" status="warning"></el-progress>
+<el-progress :percentage="50" status="exception"></el-progress>
+
+<script>
+  export default {
+    methods: {
+      format(percentage) {
+        return percentage === 100 ? 'Full' : `${percentage}%`;
+      }
+    }
+  };
+</script>
+```
+:::
+
+### Pourcentage interne
+
+Dans ce cas le pourcentage ne prends pas de place en plus.
+
+:::demo L'attribut `stroke-width` détermine le `width` de la barre de progression. Utilisez `text-inside` mettre la description à l'intérieur de la barre.
+```html
+<el-progress :text-inside="true" :stroke-width="26" :percentage="70"></el-progress>
+<el-progress :text-inside="true" :stroke-width="24" :percentage="100" status="success"></el-progress>
+<el-progress :text-inside="true" :stroke-width="22" :percentage="80" status="warning"></el-progress>
+<el-progress :text-inside="true" :stroke-width="20" :percentage="50" status="exception"></el-progress>
+```
+:::
+
+### Couleur personnalisée
+
+Vous pouvez utiliser l'attribut `color` pour définir la couleur de la barre de progression. il accepte une couleur, une fonction ou un tableau.
+
+:::demo
+
+```html
+<el-progress :percentage="percentage" :color="customColor"></el-progress>
+
+<el-progress :percentage="percentage" :color="customColorMethod"></el-progress>
+
+<el-progress :percentage="percentage" :color="customColors"></el-progress>
+<div>
+  <el-button-group>
+    <el-button icon="el-icon-minus" @click="decrease"></el-button>
+    <el-button icon="el-icon-plus" @click="increase"></el-button>
+  </el-button-group>
+</div>
+
+<script>
+  export default {
+    data() {
+      return {
+        percentage: 20,
+        customColor: '#2460e0',
+        customColors: [
+          {color: '#FF4D4F', percentage: 20},
+          {color: '#F5A623', percentage: 40},
+          {color: '#5cb87a', percentage: 60},
+          {color: '#1989fa', percentage: 80},
+          {color: '#6f7ad3', percentage: 100}
+        ]
+      };
+    },
+    methods: {
+      customColorMethod(percentage) {
+        if (percentage < 30) {
+          return '#A7A8AD';
+        } else if (percentage < 70) {
+          return '#F5A623';
+        } else {
+          return '#2FD163';
+        }
+      },
+      increase() {
+        this.percentage += 10;
+        if (this.percentage > 100) {
+          this.percentage = 100;
+        }
+      },
+      decrease() {
+        this.percentage -= 10;
+        if (this.percentage < 0) {
+          this.percentage = 0;
+        }
+      }
+    }
+  }
+</script>
+```
+:::
+
+### Barre de progression circulaire
+
+:::demo Vous pouvez mettre l'attribut `type` à `circle` pour obtenir une barre circulaire, et utiliser `width` pour changer la taille du cercle.
+```html
+<el-progress type="circle" :percentage="0"></el-progress>
+<el-progress type="circle" :percentage="25"></el-progress>
+<el-progress type="circle" :percentage="100" status="success"></el-progress>
+<el-progress type="circle" :percentage="70" status="warning"></el-progress>
+<el-progress type="circle" :percentage="50" status="exception"></el-progress>
+```
+:::
+
+### Barre de progression du tableau de bord
+
+Vous pouvez également spécifier l'attribut `type` de `dashboard` pour utiliser la barre de progression du tableau de bord.
+
+:::demo
+
+```html
+<el-progress type="dashboard" :percentage="percentage" :color="colors"></el-progress>
+<div>
+  <el-button-group>
+    <el-button icon="el-icon-minus" @click="decrease"></el-button>
+    <el-button icon="el-icon-plus" @click="increase"></el-button>
+  </el-button-group>
+</div>
+
+<script>
+  export default {
+    data() {
+      return {
+        percentage: 10,
+        colors: [
+          {color: '#FF4D4F', percentage: 20},
+          {color: '#F5A623', percentage: 40},
+          {color: '#5cb87a', percentage: 60},
+          {color: '#1989fa', percentage: 80},
+          {color: '#6f7ad3', percentage: 100}
+        ]
+      };
+    },
+    methods: {
+      increase() {
+        this.percentage += 10;
+        if (this.percentage > 100) {
+          this.percentage = 100;
+        }
+      },
+      decrease() {
+        this.percentage -= 10;
+        if (this.percentage < 0) {
+          this.percentage = 0;
+        }
+      }
+    }
+  }
+</script>
+```
+:::
+
+### Attributs
+
+| Attribut      | Description          | Type      | Valeurs acceptées       | Défaut  |
+| --- | ---- | ---- | ---- | ---- |
+| **percentage** | Le pourcentage, **requis**. | number | 0-100 | 0 |
+| type | Le type de barre. | string | line/circle/dashboard | line |
+| stroke-width | La largeur de la barre. | number | — | 6 |
+| text-inside | Si le pourcentage doit être à l'intérieur de la barre, ne marche que si `type` est 'line'. | boolean | — | false |
+| status | Le statut actuel de la progression. | string | success/exception/text | — |
+| color  | La couleur de fon de la barre. Écrase `status`. | string/function/array | — | '' |
+| width | La largeur du canvas dans le cas d'une barre circulaire. | number | — | 126 |
+| show-text | Si le pourcentage doit être affiché. | boolean | — | true |
+| stroke-linecap  | circle/dashboard type shape at the end path | string | butt/round/square | round |
\ No newline at end of file
diff --git a/examples/docs/fr-FR/quickstart.md b/examples/docs/fr-FR/quickstart.md
new file mode 100644
index 00000000000..90df66d3a6e
--- /dev/null
+++ b/examples/docs/fr-FR/quickstart.md
@@ -0,0 +1,289 @@
+## Démarrer
+
+Cette page vous guidera tout le long de l'installation d'Element au sein d'un projet webpack.
+
+### Use vue-cli@3
+
+Nous fournissons un [plugin Element](https://github.com/ElementUI/vue-cli-plugin-element) pour vue-cli@3, que vous pouvez utiliser pour créer rapidement un projet basé sur Element.
+
+### Utiliser le Starter Kit
+
+Nous fournissons un [template de projet](https://github.com/ElementUI/element-starter) pour débuter rapidement. Pour les utilisateurs Laravel, il est aussi possible d'utiliser ce [template](https://github.com/ElementUI/element-in-laravel-starter). VOus pouvez les télécharger directement.
+
+Si vous préférer vous passer de template, voyez la section suivante.
+
+### Importer Element
+
+Element peut être importé entièrement ou à la demande. Commençons par l'import total.
+
+#### Import total
+
+Dans main.js:
+
+```javascript
+import Vue from 'vue';
+import ElementUI from '@femessage/element-ui';
+import '@femessage/element-ui/lib/theme-chalk/index.css';
+import App from './App.vue';
+
+Vue.use(ElementUI);
+
+new Vue({
+  el: '#app',
+  render: h => h(App)
+});
+```
+
+L'exemple ci-dessus importe Element entièrement. Notez que les fichiers CSS doivent être importés séparément.
+
+#### À la demande
+
+Grâce au [babel-plugin-component](https://github.com/QingWei-Li/babel-plugin-component), nous pouvons importer uniquement les composants désirés, rendant ainsi le projet plus léger.
+
+Tout d'abord, installez babel-plugin-component:
+
+```bash
+npm install babel-plugin-component -D
+```
+
+Puis éditez .babelrc:
+
+```json
+{
+  "presets": [["es2015", { "modules": false }]],
+  "plugins": [
+    [
+      "component",
+      {
+        "libraryName": "element-ui",
+        "styleLibraryName": "theme-chalk"
+      }
+    ]
+  ]
+}
+```
+
+Ensuite, si vous n'avez besoin que de Button et Select, éditez main.js comme suit:
+
+```javascript
+import Vue from 'vue';
+import { Button, Select } from '@femessage/element-ui';
+import App from './App.vue';
+
+Vue.component(Button.name, Button);
+Vue.component(Select.name, Select);
+/* ou
+ * Vue.use(Button)
+ * Vue.use(Select)
+ */
+
+new Vue({
+  el: '#app',
+  render: h => h(App)
+});
+```
+
+Exemple complet (liste complète des composants dans [components.json](https://github.com/femessage/element/blob/master/components.json)):
+
+```javascript
+import Vue from 'vue';
+import {
+  Pagination,
+  Dialog,
+  Autocomplete,
+  Dropdown,
+  DropdownMenu,
+  DropdownItem,
+  Menu,
+  Submenu,
+  MenuItem,
+  MenuItemGroup,
+  Input,
+  InputNumber,
+  Radio,
+  RadioGroup,
+  RadioButton,
+  Checkbox,
+  CheckboxButton,
+  CheckboxGroup,
+  Switch,
+  Select,
+  Option,
+  OptionGroup,
+  Button,
+  ButtonGroup,
+  Table,
+  TableColumn,
+  DatePicker,
+  TimeSelect,
+  TimePicker,
+  Popover,
+  Tooltip,
+  Breadcrumb,
+  BreadcrumbItem,
+  Form,
+  FormItem,
+  Tabs,
+  TabPane,
+  Tag,
+  Tree,
+  Alert,
+  Slider,
+  Icon,
+  Row,
+  Col,
+  Upload,
+  Progress,
+  Spinner,
+  Badge,
+  Card,
+  Rate,
+  Steps,
+  Step,
+  Carousel,
+  CarouselItem,
+  Collapse,
+  CollapseItem,
+  Cascader,
+  ColorPicker,
+  Transfer,
+  Container,
+  Header,
+  Aside,
+  Main,
+  Footer,
+  Timeline,
+  TimelineItem,
+  Link,
+  Divider,
+  Image,
+  Calendar,
+  Backtop,
+  PageHeader,
+  CascaderPanel,
+  Loading,
+  MessageBox,
+  Message,
+  Notification
+} from '@femessage/element-ui';
+
+Vue.use(Pagination);
+Vue.use(Dialog);
+Vue.use(Autocomplete);
+Vue.use(Dropdown);
+Vue.use(DropdownMenu);
+Vue.use(DropdownItem);
+Vue.use(Menu);
+Vue.use(Submenu);
+Vue.use(MenuItem);
+Vue.use(MenuItemGroup);
+Vue.use(Input);
+Vue.use(InputNumber);
+Vue.use(Radio);
+Vue.use(RadioGroup);
+Vue.use(RadioButton);
+Vue.use(Checkbox);
+Vue.use(CheckboxButton);
+Vue.use(CheckboxGroup);
+Vue.use(Switch);
+Vue.use(Select);
+Vue.use(Option);
+Vue.use(OptionGroup);
+Vue.use(Button);
+Vue.use(ButtonGroup);
+Vue.use(Table);
+Vue.use(TableColumn);
+Vue.use(DatePicker);
+Vue.use(TimeSelect);
+Vue.use(TimePicker);
+Vue.use(Popover);
+Vue.use(Tooltip);
+Vue.use(Breadcrumb);
+Vue.use(BreadcrumbItem);
+Vue.use(Form);
+Vue.use(FormItem);
+Vue.use(Tabs);
+Vue.use(TabPane);
+Vue.use(Tag);
+Vue.use(Tree);
+Vue.use(Alert);
+Vue.use(Slider);
+Vue.use(Icon);
+Vue.use(Row);
+Vue.use(Col);
+Vue.use(Upload);
+Vue.use(Progress);
+Vue.use(Spinner);
+Vue.use(Badge);
+Vue.use(Card);
+Vue.use(Rate);
+Vue.use(Steps);
+Vue.use(Step);
+Vue.use(Carousel);
+Vue.use(CarouselItem);
+Vue.use(Collapse);
+Vue.use(CollapseItem);
+Vue.use(Cascader);
+Vue.use(ColorPicker);
+Vue.use(Transfer);
+Vue.use(Container);
+Vue.use(Header);
+Vue.use(Aside);
+Vue.use(Main);
+Vue.use(Footer);
+Vue.use(Timeline);
+Vue.use(TimelineItem);
+Vue.use(Link);
+Vue.use(Divider);
+Vue.use(Image);
+Vue.use(Calendar);
+Vue.use(Backtop);
+Vue.use(PageHeader);
+Vue.use(CascaderPanel);
+
+Vue.use(Loading.directive);
+
+Vue.prototype.$loading = Loading.service;
+Vue.prototype.$msgbox = MessageBox;
+Vue.prototype.$alert = MessageBox.alert;
+Vue.prototype.$confirm = MessageBox.confirm;
+Vue.prototype.$prompt = MessageBox.prompt;
+Vue.prototype.$notify = Notification;
+Vue.prototype.$message = Message;
+```
+
+### Configuration globale
+
+Lors de l'import d'Element, vous pouvez définir un objet de configuration global. Actuellement il possède de propriétés: `size` et `zIndex`. La propriété `size` détermine la taille par défaut de tout les composants et `zIndex` règle le z-index initial (default: 2000) des fenêtres modales:
+
+Import total d'Element：
+
+```js
+import Vue from 'vue';
+import Element from '@femessage/element-ui';
+Vue.use(Element, { size: 'small', zIndex: 3000 });
+```
+
+Import partiel d'Element：
+
+```js
+import Vue from 'vue';
+import { Button } from '@femessage/element-ui';
+
+Vue.prototype.$ELEMENT = { size: 'small', zIndex: 3000 };
+Vue.use(Button);
+```
+
+Avec la configuration ci-dessus, la taille par défaut des composants ayant l'attribut size sera 'small', et le z-index initial des fenêtres modales est 3000.
+
+### Commencer à développer
+
+Maintenant que vous avez ajouté Vue et Element à votre projet, vous pouvez commencer à coder. Référez-vous à la documentation de chaque composant pour savoir comment les utiliser.
+
+### Utiliser Nuxt.js
+
+Vous pouvez également commencer un projet avec [Nuxt.js](https://nuxtjs.org/):
+
+<div class="glitch-embed-wrap" style="height: 420px; width: 100%;">
+  <iframe src="https://glitch.com/embed/#!/embed/nuxt-with-element?path=nuxt.config.js&previewSize=0&attributionHidden=true" alt="nuxt-with-element on glitch" style="height: 100%; width: 100%; border: 0;"></iframe>
+</div>
diff --git a/examples/docs/fr-FR/radio-img-button.md b/examples/docs/fr-FR/radio-img-button.md
new file mode 100644
index 00000000000..7851a46ce52
--- /dev/null
+++ b/examples/docs/fr-FR/radio-img-button.md
@@ -0,0 +1 @@
+## RadioImgButton
diff --git a/examples/docs/fr-FR/radio.md b/examples/docs/fr-FR/radio.md
new file mode 100644
index 00000000000..4ae4610eae8
--- /dev/null
+++ b/examples/docs/fr-FR/radio.md
@@ -0,0 +1,213 @@
+## Radio
+
+Boutons de sélection entre plusieurs options.
+
+### Usage
+
+Radio ne devrait pas avoir trop d'options. Dans ce cas utilisez plutôt Select.
+
+:::demo Créer un composant Radio est facile, vous avez juste besoin de lier les `v-model` des options. Chacun équivaut à la valeur de `label` du radio correspondant. Le type de `label` est `String`, `Number` ou `Boolean`.
+```html
+<template>
+  <el-radio v-model="radio" label="1">Option A</el-radio>
+  <el-radio v-model="radio" label="2">Option B</el-radio>
+</template>
+
+<script>
+  export default {
+    data () {
+      return {
+        radio: '1'
+      };
+    }
+  }
+</script>
+```
+:::
+
+### Désactivé
+
+L'attribut `disabled` désactive le radio.
+
+:::demo Ajoutez simplement l'attribut `disabled` au radio.
+```html
+<template>
+  <el-radio disabled v-model="radio" label="disabled">Option A</el-radio>
+  <el-radio disabled v-model="radio" label="selected and disabled">Option B</el-radio>
+</template>
+
+<script>
+  export default {
+    data () {
+      return {
+        radio: 'selected and disabled'
+      };
+    }
+  }
+</script>
+```
+:::
+
+### Groupe de boutons radio
+
+Utile pour choisir entre plusieurs groupes d'options mutuellement exclusives.
+
+:::demo Combinez `el-radio-group` avec `el-radio` pour afficher un groupe de radios. Liez une variable au `v-model` de `el-radio-group` et configurez le label dans `el-radio`. Cet élément fournit aussi l'évènement `change` qui a en paramètre la valeur courante.
+
+```html
+<el-radio-group v-model="radio">
+  <el-radio :label="3">Option A</el-radio>
+  <el-radio :label="6">Option B</el-radio>
+  <el-radio :label="9">Option C</el-radio>
+</el-radio-group>
+
+<script>
+  export default {
+    data () {
+      return {
+        radio: 3
+      };
+    }
+  }
+</script>
+```
+:::
+
+### Style bouton
+
+Des radios affichés comme des boutons standards.
+
+:::demo Changez simplement `el-radio` pour `el-radio-button`. L'attribut `size` permet de régler la taille.
+```html
+<template>
+  <div>
+    <el-radio-group v-model="radio1">
+      <el-radio-button label="New York"></el-radio-button>
+      <el-radio-button label="Washington"></el-radio-button>
+      <el-radio-button label="Los Angeles"></el-radio-button>
+      <el-radio-button label="Chicago"></el-radio-button>
+    </el-radio-group>
+  </div>
+  <div style="margin-top: 20px">
+    <el-radio-group v-model="radio2" size="medium">
+      <el-radio-button label="New York" ></el-radio-button>
+      <el-radio-button label="Washington"></el-radio-button>
+      <el-radio-button label="Los Angeles"></el-radio-button>
+      <el-radio-button label="Chicago"></el-radio-button>
+    </el-radio-group>
+  </div>
+  <div style="margin-top: 20px">
+    <el-radio-group v-model="radio3" size="small">
+      <el-radio-button label="New York"></el-radio-button>
+      <el-radio-button label="Washington" disabled ></el-radio-button>
+      <el-radio-button label="Los Angeles"></el-radio-button>
+      <el-radio-button label="Chicago"></el-radio-button>
+    </el-radio-group>
+  </div>
+  <div style="margin-top: 20px">
+    <el-radio-group v-model="radio4" disabled size="mini">
+      <el-radio-button label="New York"></el-radio-button>
+      <el-radio-button label="Washington"></el-radio-button>
+      <el-radio-button label="Los Angeles"></el-radio-button>
+      <el-radio-button label="Chicago"></el-radio-button>
+    </el-radio-group>
+  </div>
+</template>
+
+<script>
+  export default {
+    data () {
+      return {
+        radio1: 'New York',
+        radio2: 'New York',
+        radio3: 'New York',
+        radio4: 'New York'
+      };
+    }
+  }
+</script>
+```
+:::
+
+### Avec bordures
+
+:::demo L'attribut `border` ajoute une bordure aux radios.
+```html
+<template>
+  <div>
+    <el-radio v-model="radio1" label="1" border>Option A</el-radio>
+    <el-radio v-model="radio1" label="2" border>Option B</el-radio>
+  </div>
+  <div style="margin-top: 20px">
+    <el-radio v-model="radio2" label="1" border size="medium">Option A</el-radio>
+    <el-radio v-model="radio2" label="2" border size="medium">Option B</el-radio>
+  </div>
+  <div style="margin-top: 20px">
+    <el-radio-group v-model="radio3" size="small">
+      <el-radio label="1" border>Option A</el-radio>
+      <el-radio label="2" border disabled>Option B</el-radio>
+    </el-radio-group>
+  </div>
+  <div style="margin-top: 20px">
+    <el-radio-group v-model="radio4" size="mini" disabled>
+      <el-radio label="1" border>Option A</el-radio>
+      <el-radio label="2" border>Option B</el-radio>
+    </el-radio-group>
+  </div>
+</template>
+
+<script>
+  export default {
+    data () {
+      return {
+        radio1: '1',
+        radio2: '1',
+        radio3: '1',
+        radio4: '1'
+      };
+    }
+  }
+</script>
+```
+:::
+
+### Attributs de Radio
+
+| Attribut      | Description          | Type      | Valeurs acceptées       | Défaut |
+| ---- | ---- | ---- | ---- | ---- |
+| value / v-model | La valeur liée. | string / number / boolean | — | — |
+| label | La valeur du radio. | string / number / boolean | — | — |
+| disabled | Si le radio est désactivé. | boolean | — | false |
+| border  | Si une bordure doit être affichée autour du radio. | boolean   | — | false |
+| size  | Taille du radio, ne marche que si `border` est `true`. | string  | medium / small / mini | — |
+| name | Attribut 'name' natif. | string | — | — |
+
+### Évènements de Radio
+
+| Nom | Description | Paramètres |
+| --- | --- | --- |
+| change | Se déclenche quand la valeur change. | La valeur du label. |
+
+### Attributs de Radio-group
+
+| Attribut      | Description          | Type      | Valeurs acceptées       | Défaut
+| ---- | ---- | ---- | ---- | ---- |
+| value / v-model | La valeur liée. | string / number / boolean | — | — |
+| size | Taille des radios. | string | medium / small / mini | —
+| disabled  | Si les radios sont désactivés. | boolean   | — | false
+| text-color | Couleur du texte quand le bouton est actif. | string | — | #ffffff   |
+| fill  | Bordure et couleur de fond quand le bouton est actif. | string | — | #2460e0 |
+
+### Évènements de Radio-group
+
+| Nom | Description | Paramètres |
+| --- | --- | --- |
+| change | Se déclenche quand la valeur change. | La valeur du label. |
+
+### Attributs Radio-button
+
+| Attribut      | Description          | Type      | Valeurs acceptées       | Défaut |
+| ---- | ---- | ---- | ---- | ---- |
+| label | Valeur du radio. | string / number | — | — |
+| disabled | Si le radio est désactivé. | boolean | — | false |
+| name | Attribut 'name' natif. | string | — | — |
diff --git a/examples/docs/fr-FR/rate.md b/examples/docs/fr-FR/rate.md
new file mode 100644
index 00000000000..842b2f300d7
--- /dev/null
+++ b/examples/docs/fr-FR/rate.md
@@ -0,0 +1,141 @@
+## Rate
+
+Utilisé pour donner une note sur cinq étoiles.
+
+### Usage
+
+:::demo Rate divise les scores en trois niveaux et ces niveaux peuvent être distingués en utilisant différentes couleurs de fond. Par défaut ces couleurs sont identiques, mais vous pouvez affecter un tableau des codes couleur à l'attribut `colors`, ainsi que les deux seuils via `low-threshold` et `high-threshold`. Vous pouvez aussi les affecter avec un objet dont la clé est le seuil et la valeur est la couleur correspondante.
+
+```html
+<div class="block">
+  <span class="demonstration">Défaut</span>
+  <el-rate v-model="value1"></el-rate>
+</div>
+<div class="block">
+  <span class="demonstration">Couleurs pour chaque niveau</span>
+  <el-rate
+    v-model="value2"
+    :colors="colors">
+  </el-rate>
+</div>
+
+<script>
+  export default {
+    data() {
+      return {
+        value1: null,
+        value2: null,
+        colors: ['#99A9BF', '#F7BA2A', '#FF9900'] // same as { 2: '#99A9BF', 4: { value: '#F7BA2A', excluded: true }, 5: '#FF9900' }
+      }
+    }
+  }
+</script>
+```
+:::
+
+### Avec du texte
+
+Vous pouvez ajouter du texte à chaque score.
+
+:::demo Ajoutez l'attribut `show-text` pour afficher du texte à droite des étoiles. Vous pouvez choisir les textes avec l'attribut `texts`. C'est un tableau dont la taille doit être égale au score max `max`.
+
+```html
+<el-rate
+  v-model="value"
+  :texts="['oops', 'disappointed', 'normal', 'good', 'great']"
+  show-text>
+</el-rate>
+
+<script>
+  export default {
+    data() {
+      return {
+        value: null
+      }
+    }
+  }
+</script>
+```
+:::
+
+### Plus d'icônes
+
+Vous pouvez utiliser différentes icônes pour chaque
+
+:::demo Vous pouvez personnaliser les icônes en passant à `icon-classes` un tableau avec trois éléments ou un objet dont la clé est le seuil entre deux niveaux et la valeur la classe d'icônes correspondante. Dans cet exemple, nous utilisons aussi `void-icon-class` qui permet de choisir d'autres valeurs non sélectionnées.
+
+```html
+<el-rate
+  v-model="value"
+  :icon-classes="iconClasses"
+  void-icon-class="icon-rate-face-off"
+  :colors="['#99A9BF', '#F7BA2A', '#FF9900']">
+</el-rate>
+
+<script>
+  export default {
+    data() {
+      return {
+        value: null,
+        iconClasses: ['icon-rate-face-1', 'icon-rate-face-2', 'icon-rate-face-3'] // same as { 2: 'icon-rate-face-1', 4: { value: 'icon-rate-face-2', excluded: true }, 5: 'icon-rate-face-3' }
+      }
+  }
+  }
+</script>
+```
+:::
+
+### Lecture seule
+
+Le score peut être en lecture seule. Les demi-étoiles sont supportées.
+
+:::demo Utilisez `disabled` pour mettre le composant en lecture seule. Ajoutez `show-score` pour afficher le score à droite des étoiles. De plus, vous pouvez utiliser `score-template` pour déterminer un template. Il doit contenir `{value}` qui sera remplacé par la valeur du score.
+
+```html
+<el-rate
+  v-model="value"
+  disabled
+  show-score
+  text-color="#ff9900"
+  score-template="{value} points">
+</el-rate>
+
+<script>
+  export default {
+    data() {
+      return {
+        value: 3.7
+      }
+    }
+  }
+</script>
+```
+:::
+
+### Attributs
+
+| Attribut      | Description          | Type      | Valeurs acceptées       | Défaut  |
+|---------- |-------- |---------- |-------------  |-------- |
+| value / v-model | La valeur liée. | number | — | 0 |
+| max | Score maximum. | number | — | 5 |
+| disabled | Si le score est en lecture seule. | boolean | — | false |
+| allow-half | Si les demi-étoiles sont autorisées. | boolean | — | false |
+| low-threshold | Seuil entre les niveaux bas et moyen. La valeur sera incluse dans le niveau bas. | number | — | 2 |
+| high-threshold | Seuil entre les niveaux moyen et haut. La valeur sera incluse entre dans le niveau haut. | number | — | 4 |
+| colors | colors for icons. Si c'est un array, il doit avoir 3 élements, chacun correspondant à un niveau. Si c'est un objet, la clé est le seuil entre deux niveaux et la valeur est la couleur correspondante. | array/object | — | ['#F7BA2A', '#F7BA2A', '#F7BA2A'] |
+| void-color | Couleur des icônes non sélectionnées. | string | — | #C6D1DE |
+| disabled-void-color | Couleur des icônes non sélectionnées en lecture seule. | string | — | #EFF2F7 |
+| icon-classes | Noms de classe des icônes. Si c'est un array, il doit avoir 3 élements, chacun correspondant à un niveau. Si c'est un objet, la clé est le seuil entre deux niveaux et la valeur est le nom de classe de l'icône. | array/object | — | ['el-icon-star-on', 'el-icon-star-on','el-icon-star-on'] |
+| void-icon-class | Classe des icônes non sélectionnées. | string | — | el-icon-star-off |
+| disabled-void-icon-class | Classe des icônes non sélectionnées en lecture seule. | string | — | el-icon-star-on |
+| show-text | Si du texte doit apparaître à droite des étoiles. | boolean | — | false |
+| show-score | Si le score doit apparaître. Incompatible avec show-text. | boolean | — | false |
+| text-color | Couleur du texte. | string | — | #1F2D3D |
+| texts | Label des différents scores. | array | — | ['极差', '失望', '一般', '满意', '惊喜'] |
+| score-template | Template du score. | string | — | {value} |
+
+### Évènements
+
+| Nom | Description | Paramètres |
+|---------- |-------- |---------- |
+| change | Se déclenche quand la valeur change. | Valeur après le changement. |
diff --git a/examples/docs/fr-FR/select.md b/examples/docs/fr-FR/select.md
new file mode 100644
index 00000000000..5c216a9dcc9
--- /dev/null
+++ b/examples/docs/fr-FR/select.md
@@ -0,0 +1,599 @@
+## Select
+
+Utile lorsqu'il faut sélectionner des options parmi un large choix, affiché grâce à un menu déroulant.
+
+### Usage
+
+:::demo `v-model` est la valeur du `el-option` sélectionné.
+
+```html
+<template>
+  <el-select v-model="value" placeholder="Select">
+    <el-option
+      v-for="item in options"
+      :key="item.value"
+      :label="item.label"
+      :value="item.value">
+    </el-option>
+  </el-select>
+</template>
+
+<script>
+  export default {
+    data() {
+      return {
+        options: [{
+          value: 'Option1',
+          label: 'Option1'
+        }, {
+          value: 'Option2',
+          label: 'Option2'
+        }, {
+          value: 'Option3',
+          label: 'Option3'
+        }, {
+          value: 'Option4',
+          label: 'Option4'
+        }, {
+          value: 'Option5',
+          label: 'Option5'
+        }],
+        value: ''
+      }
+    }
+  }
+</script>
+```
+:::
+
+### Option désactivée
+
+:::demo Mettez l'attribut `disabled` dans `el-option` à `true` pour désactiver cette option.
+
+```html
+<template>
+  <el-select v-model="value" placeholder="Select">
+    <el-option
+      v-for="item in options"
+      :key="item.value"
+      :label="item.label"
+      :value="item.value"
+      :disabled="item.disabled">
+    </el-option>
+  </el-select>
+</template>
+
+<script>
+  export default {
+    data() {
+      return {
+        options: [{
+          value: 'Option1',
+          label: 'Option1'
+        }, {
+          value: 'Option2',
+          label: 'Option2',
+          disabled: true
+        }, {
+          value: 'Option3',
+          label: 'Option3'
+        }, {
+          value: 'Option4',
+          label: 'Option4'
+        }, {
+          value: 'Option5',
+          label: 'Option5'
+        }],
+        value: ''
+      }
+    }
+  }
+</script>
+```
+:::
+
+### Sélecteur désactivé
+
+Vous pouvez désactiver le composant lui-même.
+
+:::demo Ajoutez `disabled` à `el-select` pour le désactiver.
+```html
+<template>
+  <el-select v-model="value" disabled placeholder="Select">
+    <el-option
+      v-for="item in options"
+      :key="item.value"
+      :label="item.label"
+      :value="item.value">
+    </el-option>
+  </el-select>
+</template>
+
+<script>
+  export default {
+    data() {
+      return {
+        options: [{
+          value: 'Option1',
+          label: 'Option1'
+        }, {
+          value: 'Option2',
+          label: 'Option2'
+        }, {
+          value: 'Option3',
+          label: 'Option3'
+        }, {
+          value: 'Option4',
+          label: 'Option4'
+        }, {
+          value: 'Option5',
+          label: 'Option5'
+        }],
+        value: ''
+      }
+    }
+  }
+</script>
+```
+:::
+
+### Effacer la sélection
+
+Vous pouvez ajouter un bouton pour effacer la sélection.
+
+:::demo Ajoutez l'attribut `clearable` à `el-select` et l'icône de fermeture s'affichera après une sélection. Notez que `clearable` ne marche qu'avec les sélecteurs à choix unique.
+```html
+<template>
+  <el-select v-model="value" clearable placeholder="Select">
+    <el-option
+      v-for="item in options"
+      :key="item.value"
+      :label="item.label"
+      :value="item.value">
+    </el-option>
+  </el-select>
+</template>
+
+<script>
+  export default {
+    data() {
+      return {
+        options: [{
+          value: 'Option1',
+          label: 'Option1'
+        }, {
+          value: 'Option2',
+          label: 'Option2'
+        }, {
+          value: 'Option3',
+          label: 'Option3'
+        }, {
+          value: 'Option4',
+          label: 'Option4'
+        }, {
+          value: 'Option5',
+          label: 'Option5'
+        }],
+        value: ''
+      }
+    }
+  }
+</script>
+```
+:::
+
+### Sélecteur multiple
+
+Les sélecteurs multiples utilisent des tags pour afficher les différentes options choisies.
+
+:::demo Ajoutez `multiple` à `el-select` pour le changer en sélecteur multiple. La valeur de `v-model` devient un tableau contenant toutes les options. Par défaut les différents choix sont affichés sous forme de tags. Vous pouvez réduire leur nombre en utilisant l'attribut `collapse-tags`.
+```html
+<template>
+  <el-select v-model="value1" multiple placeholder="Select">
+    <el-option
+      v-for="item in options"
+      :key="item.value"
+      :label="item.label"
+      :value="item.value">
+    </el-option>
+  </el-select>
+
+  <el-select
+    v-model="value2"
+    multiple
+    collapse-tags
+    style="margin-left: 20px;"
+    placeholder="Select">
+    <el-option
+      v-for="item in options"
+      :key="item.value"
+      :label="item.label"
+      :value="item.value">
+    </el-option>
+  </el-select>
+</template>
+
+<script>
+  export default {
+    data() {
+      return {
+        options: [{
+          value: 'Option1',
+          label: 'Option1'
+        }, {
+          value: 'Option2',
+          label: 'Option2'
+        }, {
+          value: 'Option3',
+          label: 'Option3'
+        }, {
+          value: 'Option4',
+          label: 'Option4'
+        }, {
+          value: 'Option5',
+          label: 'Option5'
+        }],
+        value1: [],
+        value2: []
+      }
+    }
+  }
+</script>
+```
+:::
+
+### Template personnalisé
+
+Vous pouvez définir un template HTML pour l'affichage des options.
+
+:::demo Insérez votre template dans le slot de `el-option`.
+
+```html
+<template>
+  <el-select v-model="value" placeholder="Select">
+    <el-option
+      v-for="item in cities"
+      :key="item.value"
+      :label="item.label"
+      :value="item.value">
+      <span style="float: left">{{ item.label }}</span>
+      <span style="float: right; color: #8492a6; font-size: 13px">{{ item.value }}</span>
+    </el-option>
+  </el-select>
+</template>
+
+<script>
+  export default {
+    data() {
+      return {
+        cities: [{
+          value: 'Beijing',
+          label: 'Beijing'
+        }, {
+          value: 'Shanghai',
+          label: 'Shanghai'
+        }, {
+          value: 'Nanjing',
+          label: 'Nanjing'
+        }, {
+          value: 'Chengdu',
+          label: 'Chengdu'
+        }, {
+          value: 'Shenzhen',
+          label: 'Shenzhen'
+        }, {
+          value: 'Guangzhou',
+          label: 'Guangzhou'
+        }],
+        value: ''
+      }
+    }
+  }
+</script>
+```
+:::
+
+### Grouper les options
+
+Vous pouvez définir des groupes pour les options du menu.
+
+:::demo Utilisez `el-option-group` pour grouper les options. L'attribut `label` définit le nom du groupe.
+
+```html
+<template>
+  <el-select v-model="value" placeholder="Select">
+    <el-option-group
+      v-for="group in options"
+      :key="group.label"
+      :label="group.label">
+      <el-option
+        v-for="item in group.options"
+        :key="item.value"
+        :label="item.label"
+        :value="item.value">
+      </el-option>
+    </el-option-group>
+  </el-select>
+</template>
+
+<script>
+  export default {
+    data() {
+      return {
+        options: [{
+          label: 'Villes célèbres',
+          options: [{
+            value: 'Shanghai',
+            label: 'Shanghai'
+          }, {
+            value: 'Beijing',
+            label: 'Beijing'
+          }]
+        }, {
+          label: 'Nom de ville',
+          options: [{
+            value: 'Chengdu',
+            label: 'Chengdu'
+          }, {
+            value: 'Shenzhen',
+            label: 'Shenzhen'
+          }, {
+            value: 'Guangzhou',
+            label: 'Guangzhou'
+          }, {
+            value: 'Dalian',
+            label: 'Dalian'
+          }]
+        }],
+        value: ''
+      }
+    }
+  }
+</script>
+```
+:::
+
+### Filtrage des options
+
+Vous pouvez ajouter un mode de filtrage pour trouver les options désirées plus rapidement.
+
+:::demo Ajoutez `filterable` à `el-select` pour activer le filtrage. Par défaut, Select cherchera les options dont le `label` contient la valeur du filtre. Si vous préférez une autre stratégie de filtrage, utilisez `filter-method`. C'est une `Function` qui est appelée quand la valeur change, avec pour paramètre la valeur courante.
+```html
+<template>
+  <el-select v-model="value" filterable placeholder="Select">
+    <el-option
+      v-for="item in options"
+      :key="item.value"
+      :label="item.label"
+      :value="item.value">
+    </el-option>
+  </el-select>
+</template>
+
+<script>
+  export default {
+    data() {
+      return {
+        options: [{
+          value: 'Option1',
+          label: 'Option1'
+        }, {
+          value: 'Option2',
+          label: 'Option2'
+        }, {
+          value: 'Option3',
+          label: 'Option3'
+        }, {
+          value: 'Option4',
+          label: 'Option4'
+        }, {
+          value: 'Option5',
+          label: 'Option5'
+        }],
+        value: ''
+      }
+    }
+  }
+</script>
+```
+:::
+
+### Recherche à distance
+
+Vous pouvez aller chercher les options sur le serveur de manière dynamique.
+
+:::demo Ajoutez `filterable` et `remote` pour activer la recherche distante, ainsi que `remote-method`. Cette dernière est une `Function` qui est appelée lorsque la valeur change, avec pour paramètre la valeur courante. Notes que si `el-option` est rendu dans une directive `v-for`, vous devriez ajouter l'attribut `key` aux `el-option`. Cette valeur doit unique, comme `item.value` dans l'exemple suivant.
+
+```html
+<template>
+  <el-select
+    v-model="value"
+    multiple
+    filterable
+    remote
+    reserve-keyword
+    placeholder="Entrez un mot-clé"
+    :remote-method="remoteMethod"
+    :loading="loading">
+    <el-option
+      v-for="item in options"
+      :key="item.value"
+      :label="item.label"
+      :value="item.value">
+    </el-option>
+  </el-select>
+</template>
+
+<script>
+  export default {
+    data() {
+      return {
+        options: [],
+        value: [],
+        list: [],
+        loading: false,
+        states: ["Alabama", "Alaska", "Arizona",
+        "Arkansas", "California", "Colorado",
+        "Connecticut", "Delaware", "Florida",
+        "Georgia", "Hawaii", "Idaho", "Illinois",
+        "Indiana", "Iowa", "Kansas", "Kentucky",
+        "Louisiana", "Maine", "Maryland",
+        "Massachusetts", "Michigan", "Minnesota",
+        "Mississippi", "Missouri", "Montana",
+        "Nebraska", "Nevada", "New Hampshire",
+        "New Jersey", "New Mexico", "New York",
+        "North Carolina", "North Dakota", "Ohio",
+        "Oklahoma", "Oregon", "Pennsylvania",
+        "Rhode Island", "South Carolina",
+        "South Dakota", "Tennessee", "Texas",
+        "Utah", "Vermont", "Virginia",
+        "Washington", "West Virginia", "Wisconsin",
+        "Wyoming"]
+      }
+    },
+    mounted() {
+      this.list = this.states.map(item => {
+        return { value: `value:${item}`, label: `label:${item}` };
+      });
+    },
+    methods: {
+      remoteMethod(query) {
+        if (query !== '') {
+          this.loading = true;
+          setTimeout(() => {
+            this.loading = false;
+            this.options = this.list.filter(item => {
+              return item.label.toLowerCase()
+                .indexOf(query.toLowerCase()) > -1;
+            });
+          }, 200);
+        } else {
+          this.options = [];
+        }
+      }
+    }
+  }
+</script>
+```
+:::
+
+### Créer des options
+
+Vous pouvez entrer des choix dans le champ de sélection qui ne sont pas incluses dans le menu.
+
+:::demo En utilisant `allow-create`, peuvent créer de nouveaux choix en les entrant dans le champ d'input. Cette option ne marche que si `filterable` est activé. Cette exemple montre aussi `default-first-option`, qui permet de sélectionner la première option en pressant Entrée sans avoir à utiliser la souris ou le clavier.
+```html
+<template>
+  <el-select
+    v-model="value"
+    multiple
+    filterable
+    allow-create
+    default-first-option
+    placeholder="Choisissez les tags de vos articles">
+    <el-option
+      v-for="item in options"
+      :key="item.value"
+      :label="item.label"
+      :value="item.value">
+    </el-option>
+  </el-select>
+</template>
+
+<script>
+  export default {
+    data() {
+      return {
+        options: [{
+          value: 'HTML',
+          label: 'HTML'
+        }, {
+          value: 'CSS',
+          label: 'CSS'
+        }, {
+          value: 'JavaScript',
+          label: 'JavaScript'
+        }],
+        value: []
+      }
+    }
+  }
+</script>
+```
+:::
+
+:::tip
+Si la valeur de Select est un objet, assurez-vous d'utiliser `value-key` comme identifiant unique.
+:::
+
+### Attributs de Select
+
+| Attribut      | Description          | Type      | Valeurs acceptées       | Défaut  |
+|---------- |-------------- |---------- |--------------------------------  |-------- |
+| value / v-model | La valeur liée. | boolean / string / number | — | — |
+| multiple | Si la sélection multiple est activée. | boolean | — | false |
+| disabled | Si le sélecteur est désactivé. | boolean | — | false |
+| value-key | Identifiant unique pour la valeur, requis quand la valeur est un objet. | string | — | value |
+| size | Taille de l'Input. | string | large/small/mini | — |
+| clearable | Si la sélection est effaçable. | boolean | — | true |
+| collapse-tags | Si les tags peuvent être réduits, dans le cas d'une sélection multiple. | boolean | — | false |
+| multiple-limit | Nombre maximum d'options multiples sélectionnable. Pas de limites quand est à 0. | number | — | 0 |
+| name | L'attribut name natif du sélecteur. | string | — | — |
+| autocomplete | L'attribut autocomplete natif du sélecteur. | string | — | off |
+| auto-complete | @DEPRECATED dans la prochaine version majeure. | string | — | off |
+| placeholder | Le placeholder du champ. | string | — | Select |
+| filterable | Si les options sont filtrables. | boolean | — | true |
+| allow-create | Si l'utilisateur peut créer des options. Dans ce cas `filterable` doit être activé. | boolean | — | false |
+| filter-method | Méthode de filtrage personnalisée. | function | — | — |
+| remote | Si les options sont chargées dynamiquement depuis le serveur. | boolean | — | false |
+| remote-method | Méthode pour la recherche distante. | function | — | — |
+| loading | Si le sélecteur est en train de charger des options. | boolean | — | false |
+| loading-text | Texte à afficher pendant le chargement. | string | — | Loading |
+| no-match-text | Texte à afficher quand le filtrage ne retourne aucune option. Vous pouvez aussi utiliser le slot `empty`. | string | — | No matching data |
+| no-data-text | Texte à afficher quand il n'y a aucune option. Vous pouvez aussi utiliser le slot `empty`. | string | — | No data |
+| popper-class | Classe du menu déroulant. | string | — | — |
+| reserve-keyword | Quand `multiple` et `filter` sont activés, s'il faut réserver le mot-clé courant après la sélection d'une option. | boolean | — | false |
+| default-first-option | Sélectionne la première option avec Entrée. Utilisable avec `filterable` ou `remote` | boolean | - | false |
+| popper-append-to-body| Si le menu déroulant doit être ajouté au body. Si le positionnement du menu est incorrect, essayez de mettre cette option à `false`. | boolean | - | true |
+| automatic-dropdown | Pour les sélecteurs non filtrables, détermine si le menu apparaît au focus du champ. | boolean | - | false |
+
+### Évènements de Select
+
+| Nom | Description | Paramètre |
+|---------|---------|---------|
+| change | Se déclenche quand la valeur change. | current selected value |
+| visible-change | Se déclenche quand le menu apparaît ou disparaît. | true quand il apparaît, sinon false . |
+| remove-tag | Se déclenche quand un tag est retiré. | La valeur du tag retiré. |
+| clear | Se déclenche quand le champ est effacé grâce au bouton. | — |
+| blur | Se déclenche quand le champ perd le focus. | (event: Event) |
+| focus | Se déclenche gagne le focus. | (event: Event) |
+
+### Slots de Select
+
+| Nom    | Description |
+|---------|-------------|
+|    —    | Liste de options. |
+| prefix  | Contenu du préfixe du sélecteur. |
+| empty  | Contenu lorsqu'il n'y a aucune option. |
+
+### Attributs du groupe d'options
+
+| Attribut      | Description          | Type      | Valeurs acceptées       | Défaut  |
+|---------- |-------------- |---------- |--------------------------------  |-------- |
+| label | Nom du group. | string | — | — |
+| disabled | Si les options du groupe sont désactivées. | boolean | — | false |
+
+### Attributs des options
+
+| Attribut      | Description          | Type      | Valeurs acceptées       | Défaut  |
+|---------- |-------------- |---------- |--------------------------------  |-------- |
+| value | Valeur de l'option. | string/number/object | — | — |
+| label | Label de l'option, identique à `value` si omis. | string/number | — | — |
+| disabled | Si l'option est désactivée. | boolean | — | false |
+
+### Méthodes
+
+| Méthode | Description | Paramètres |
+|------|--------|-------|
+| focus | Focus sur l'input. | - |
+| blur | Enlève le focus de l'input et cache le menu. | - |
diff --git a/examples/docs/fr-FR/skeleton.md b/examples/docs/fr-FR/skeleton.md
new file mode 100644
index 00000000000..ff876ea8b9b
--- /dev/null
+++ b/examples/docs/fr-FR/skeleton.md
@@ -0,0 +1 @@
+## Skeleton
diff --git a/examples/docs/fr-FR/slider.md b/examples/docs/fr-FR/slider.md
new file mode 100644
index 00000000000..214ccc92924
--- /dev/null
+++ b/examples/docs/fr-FR/slider.md
@@ -0,0 +1,240 @@
+## Slider
+
+Permet de sélectionner une valeur au sein d'un intervalle.
+
+### Usage
+
+La valeur est affichée lorsque le slider est utilisé.
+
+:::demo Vous pouvez décider de la valeur initiale en initialisant la variable liée.
+
+```html
+<template>
+  <div class="block">
+    <span class="demonstration">Valeur par défaut</span>
+    <el-slider v-model="value1"></el-slider>
+  </div>
+  <div class="block">
+    <span class="demonstration">Valeur initiale personnalisée</span>
+    <el-slider v-model="value2"></el-slider>
+  </div>
+  <div class="block">
+    <span class="demonstration">Pas de tooltip</span>
+    <el-slider v-model="value3" :show-tooltip="false"></el-slider>
+  </div>
+  <div class="block">
+    <span class="demonstration">Tooltip formatté</span>
+    <el-slider v-model="value4" :format-tooltip="formatTooltip"></el-slider>
+  </div>
+  <div class="block">
+    <span class="demonstration">Désactivé</span>
+    <el-slider v-model="value5" disabled></el-slider>
+  </div>
+</template>
+
+<script>
+  export default {
+    data() {
+      return {
+        value1: 0,
+        value2: 50,
+        value3: 36,
+        value4: 48,
+        value5: 42
+      }
+    },
+    methods: {
+      formatTooltip(val) {
+        return val / 100;
+      }
+    }
+  }
+</script>
+```
+:::
+
+### Valeurs discrètes
+
+Les valeurs peuvent être discrètes.
+
+:::demo Réglez le pas avec l'attribut `step`. Vous pouvez affiché chaque point grâce à `show-stops`.
+
+```html
+<template>
+  <div class="block">
+    <span class="demonstration">Points absents</span>
+    <el-slider
+      v-model="value1"
+      :step="10">
+    </el-slider>
+  </div>
+  <div class="block">
+    <span class="demonstration">Points affichés</span>
+    <el-slider
+      v-model="value2"
+      :step="10"
+      show-stops>
+    </el-slider>
+  </div>
+</template>
+
+<script>
+  export default {
+    data() {
+      return {
+        value1: 0,
+        value2: 0
+      }
+    }
+  }
+</script>
+```
+:::
+
+### Slider avec champ d'input
+
+Vous pouvez afficher un champ d'input synchronisé pour entrer une valeur précise rapidement.
+
+:::demo Ajoutez l'attribut `show-input` pour ajouter le champ à droite du Slider.
+
+```html
+<template>
+  <div class="block">
+    <el-slider
+      v-model="value"
+      show-input>
+    </el-slider>
+  </div>
+</template>
+
+<script>
+  export default {
+    data() {
+      return {
+        value: 0
+      }
+    }
+  }
+</script>
+```
+:::
+
+### Sélectionner une intervalle
+
+Vous pouvez sélectionner des intervalles de valeurs au lieu d'une valeur unique.
+
+:::demo Ajouter l'attribut `range` active le mode intervalle, ou la valeur sera maintenant un tableau contenant les deux valeurs de l'intervalle.
+```html
+<template>
+  <div class="block">
+    <el-slider
+      v-model="value"
+      range
+      show-stops
+      :max="10">
+    </el-slider>
+  </div>
+</template>
+
+<script>
+  export default {
+    data() {
+      return {
+        value: [4, 8]
+      }
+    }
+  }
+</script>
+```
+:::
+
+### Mode vertical
+
+:::demo Ajoutez l'attribut `vertical` active le mode vertical. Dans ce mode, l'attribut `height` est requis.
+```html
+<template>
+  <div class="block">
+    <el-slider
+      v-model="value"
+      vertical
+      height="200px">
+    </el-slider>
+  </div>
+</template>
+
+<script>
+  export default {
+    data() {
+      return {
+        value: 0
+      }
+    }
+  }
+</script>
+```
+:::
+
+:::demo Vous pouvez afficher des marqueurs sur le slider grâce à l'attribut `marks`.
+```html
+<template>
+  <div class="block">
+    <el-slider
+      v-model="value"
+      range
+      :marks="marks">
+    </el-slider>
+  </div>
+</template>
+
+<script>
+  export default {
+    data() {
+      return {
+        value: [30, 60],
+        marks: {
+          0: '0°C',
+          8: '8°C',
+          37: '37°C',
+          50: {
+            style: {
+              color: '#1989FA'
+            },
+            label: this.$createElement('strong', '50%')
+          }
+        }
+      }
+    }
+  }
+</script>
+```
+:::
+
+## Attributs
+
+| Attribut      | Description          | Type      | Valeurs acceptées       | Défaut  |
+|---------- |-------------- |---------- |--------------------------------  |-------- |
+| value / v-model | La valeur liée. | number | — | 0 |
+| min | Valeur minimale. | number | — | 0 |
+| max | Valeur maximale. | number | — | 100 |
+| disabled | Si le Slider est désactivé. | boolean | — | false |
+| step | La taille du pas. | number | — | 1 |
+| show-input | Si une champ d'input doit être affiché, ne marche que si `range` est `false`. | boolean | — | false |
+| show-input-controls | Si des boutons de contrôle doivent être affichés quand `show-input` est `true`. | boolean | — | true |
+| input-size | Taille du champ d'input. | string | large / medium / small / mini | small |
+| show-stops | Si les points de valeurs discrètes doivent être affichés. | boolean | — | false |
+| show-tooltip | Si le tooltip doit être affiché. | boolean | — | true |
+| format-tooltip | Format du contenu du tooltip. | function(value) | — | — |
+| range | Si le mode intervalle est activé. | boolean | — | false |
+| vertical | Si le mode vertical est activé. | boolean | — | false |
+| height | Hauteur du Slider, requis en mode vertical. | string | — | — |
+| label | Label pour les lecteurs d'écran. | string | — | — |
+| debounce | Délai après écriture en millisecondes, marche quand `show-input` est `true`. | number | — | 300 |
+| tooltip-class | Classe du tooltip. | string | — | — |
+| marks | Marqueurs, les clés doivent être des `number` et être comprises dans l'intervalle `[min, max]`. Chaque marqueur peut avoir un style particulier. | object | — | — |
+
+## Évènements
+
+| Nom | Description | Paramètres |
+|---------- |-------- |---------- |
+| change | Se déclenche quand la valeur change (si le changement est fait à la souris, se déclenche quand la souris redevient immobile). | La nouvelle valeur. |
+| input | triggers when the data changes (It'll be emitted in real time during sliding) | value after changing |
diff --git a/examples/docs/fr-FR/status-steps.md b/examples/docs/fr-FR/status-steps.md
new file mode 100644
index 00000000000..a8891d83038
--- /dev/null
+++ b/examples/docs/fr-FR/status-steps.md
@@ -0,0 +1 @@
+## StatusSteps
diff --git a/examples/docs/fr-FR/steps.md b/examples/docs/fr-FR/steps.md
new file mode 100644
index 00000000000..33af263a0c0
--- /dev/null
+++ b/examples/docs/fr-FR/steps.md
@@ -0,0 +1,162 @@
+## Steps
+
+Permet de guider l'utilisateur dans l'accomplissement de toutes les taches d'un processus. Les étapes peuvent être créées de manière à refléter le scénario en question et leur nombre ne peut être inférieur à 2.
+
+### Usage
+
+Voici une barre d'étapes basique.
+
+:::demo Réglez l'attribut `active` avec une variable `Number`, qui indique l'index des étapes et commence à 0. L'attribut `space` permet de déterminer si l'espace entre les étapes doit être fixe à l'aide d'un `Boolean`. L'unité de `space` est `px`. Si cet attribut est absent, la barre sera responsive. L'attribut `finish-status` change le statut d'accomplissement des étapes.
+
+```html
+<el-steps :active="active" finish-status="success">
+  <el-step title="Étape 1"></el-step>
+  <el-step title="Étape 2"></el-step>
+  <el-step title="Étape 3"></el-step>
+</el-steps>
+
+<el-button style="margin-top: 12px;" @click="next">Prochaine étape</el-button>
+
+<script>
+  export default {
+    data() {
+      return {
+        active: 0
+      };
+    },
+
+    methods: {
+      next() {
+        if (this.active++ > 2) this.active = 0;
+      }
+    }
+  }
+</script>
+```
+:::
+
+### Barre avec statut
+
+Vous pouvez afficher le statut de chaque étape.
+
+:::demo Utilisez `title` pour définir le nom de l'étape, ou écrasez cet attribut en utilisant un `slot`. La liste complète des slots se trouve en fin de page.
+
+```html
+<el-steps :space="200" :active="1" finish-status="success">
+  <el-step title="Terminé"></el-step>
+  <el-step title="En cours"></el-step>
+  <el-step title="Étape 3"></el-step>
+</el-steps>
+```
+:::
+
+### Barre avec description
+
+Vous pouvez ajouter une description pour chaque étape.
+
+:::demo
+```html
+<el-steps :active="1">
+  <el-step title="Étape 1" description="Une description"></el-step>
+  <el-step title="Étape 2" description="Une description"></el-step>
+  <el-step title="Étape 3" description="Une description"></el-step>
+</el-steps>
+```
+:::
+
+### Centrer
+
+Le titre et la description peuvent être centrés.
+
+:::demo
+```html
+<el-steps :active="2" align-center>
+  <el-step title="Étape 1" description="Une description"></el-step>
+  <el-step title="Étape 2" description="Une description"></el-step>
+  <el-step title="Étape 3" description="Une description"></el-step>
+  <el-step title="Étape 4" description="Une description"></el-step>
+</el-steps>
+```
+:::
+
+### Barre avec icône
+
+Une grande variété d'icônes peut être utilisée dans la barre d'étapes.
+
+:::demo L'icône est ajoutée en utilisant `icon`. Les types d'icônes possibles sont référencés dans la documentation du composant Icon. De plus, vous pouvez utilisé une icône personnalisée en utilisant un `slot`.
+
+```html
+<el-steps :active="1">
+  <el-step title="Étape 1" icon="el-icon-edit"></el-step>
+  <el-step title="Étape 2" icon="el-icon-upload"></el-step>
+  <el-step title="Étape 3" icon="el-icon-picture"></el-step>
+</el-steps>
+```
+:::
+
+### Barre verticale
+
+La barre d'étape peut être affichée de manière verticale.
+
+:::demo Mettez simplement l'attribut `direction` à ` vertical` dans l'élément `el-steps`.
+
+```html
+<div style="height: 300px;">
+  <el-steps direction="vertical" :active="1">
+    <el-step title="Étape 1"></el-step>
+    <el-step title="Étape 2"></el-step>
+    <el-step title="Étape 3"></el-step>
+  </el-steps>
+</div>
+```
+:::
+
+### Barre d'étapes simple
+
+La barre peut être simplifiée de manière à ce que `align-center`, `description`, `direction` et `space` soient ignorées.
+
+:::demo
+```html
+
+<el-steps :space="200" :active="1" simple>
+  <el-step title="Étape 1" icon="el-icon-edit"></el-step>
+  <el-step title="Étape 2" icon="el-icon-upload"></el-step>
+  <el-step title="Étape 3" icon="el-icon-picture"></el-step>
+</el-steps>
+
+<el-steps :active="1" finish-status="success" simple style="margin-top: 20px">
+  <el-step title="Étape 1" ></el-step>
+  <el-step title="Étape 2" ></el-step>
+  <el-step title="Étape 3" ></el-step>
+</el-steps>
+```
+:::
+
+### Attributs de la barre
+
+| Attribut      | Description          | Type      | Valeurs acceptées       | Défaut  |
+|---------- |-------- |---------- |-------------  |-------- |
+| space | L'espace entre chaque étape, sera responsive si omis. Supporte les pourcentages. | number / string | — | — |
+| direction | L'orientation de la barre. | string | vertical/horizontal | horizontal |
+| active | L'index de l'étape courante.  | number | — | 0 |
+| process-status | Le statut de l'étape courante. | string | wait / process / finish / error / success | process |
+| finish-status | Le statut de la dernière étape. | string | wait / process / finish / error / success | finish |
+| align-center | Si le titre et la description doivent être centrés. | boolean | — | false |
+| simple | Si un thème simple doit être appliqué. | boolean | - | false |
+
+### Attributs des étapes
+
+| Attribut      | Description          | Type      | Valeurs acceptées       | Défaut  |
+|---------- |-------- |---------- |-------------  |-------- |
+| title | Titre de l'étape. | string | — | — |
+| description | Description de l'étape. | string | — | — |
+| icon | step icon | Classe de l'icône d'étape. Les icônes peuvent aussi être passées via des slots. | string | — |
+| status | Le statut actuel. Sera déterminé par la barre d'étapes si omis. | wait / process / finish / error / success | - |
+
+### Slots des étapes
+
+| Nom | Description |
+|----|----|
+| icon | L'icône de l'étape. |
+| title | Le titre de l'étape. |
+| description | La description de l'étape. |
diff --git a/examples/docs/fr-FR/switch.md b/examples/docs/fr-FR/switch.md
new file mode 100644
index 00000000000..1a943b7f9b8
--- /dev/null
+++ b/examples/docs/fr-FR/switch.md
@@ -0,0 +1,146 @@
+## Switch
+
+Switch est utilisé pour choisir entre deux états opposés.
+
+### Usage
+
+:::demo Liez `v-model` à une variable de type `Boolean`. Les attributs `active-color` et `inactive-color` déterminent les couleurs des deux états.
+
+```html
+<el-switch v-model="value1">
+</el-switch>
+<el-switch
+  v-model="value2"
+  active-color="#13ce66"
+  inactive-color="#ff4949">
+</el-switch>
+
+<script>
+  export default {
+    data() {
+      return {
+        value1: true,
+        value2: true
+      }
+    }
+  };
+</script>
+```
+:::
+
+### Description
+
+:::demo Utilisez `active-text` et `inactive-text` pour afficher une description de chaque étape.
+
+```html
+<el-switch
+  v-model="value1"
+  active-text="Paiement mensuel"
+  inactive-text="Paiement annuel">
+</el-switch>
+<el-switch
+  style="display: block"
+  v-model="value2"
+  active-color="#13ce66"
+  inactive-color="#ff4949"
+  active-text="Paiement mensuel"
+  inactive-text="Paiement annuel">
+</el-switch>
+
+<script>
+  export default {
+    data() {
+      return {
+        value1: true,
+        value2: true
+      }
+    }
+  };
+</script>
+```
+:::
+
+### Valeurs des états
+
+:::demo Vous pouvez utiliser `active-value` et `inactive-value` pour déterminer la valeur de chaque état. Ils prennent un `Boolean`, `String` ou `Number`.
+
+```html
+<el-tooltip :content="'Valeur de l\'état: ' + value" placement="top">
+  <el-switch
+    v-model="value"
+    active-color="#13ce66"
+    inactive-color="#ff4949"
+    active-value="100"
+    inactive-value="0">
+  </el-switch>
+</el-tooltip>
+
+<script>
+  export default {
+    data() {
+      return {
+        value: '100'
+      }
+    }
+  };
+</script>
+```
+
+:::
+
+### Désactivé
+
+:::demo Ajoutez l'attribut `disabled` pour désactiver le switch.
+
+```html
+<el-switch
+  v-model="value1"
+  disabled>
+</el-switch>
+<el-switch
+  v-model="value2"
+  disabled>
+</el-switch>
+
+<script>
+  export default {
+    data() {
+      return {
+        value1: true,
+        value2: false
+      }
+    }
+  };
+</script>
+```
+:::
+
+### Attributs
+
+| Attribut      | Description          | Type      | Valeurs acceptées       | Défaut |
+| ----| ----| ----| ----|---- |
+| value / v-model | La valeur liée. | boolean / string / number | — | — |
+| disabled | Si le switch est désactivé. | boolean | — | false |
+| width | Largeur du switch. | number | — | 40 |
+| active-icon-class | Classe de l'icône de l'état `on`, écrase `active-text`. | string | — | — |
+| inactive-icon-class | Classe de l'icône de l'état `off`, écrase `inactive-text`. | string | — | — |
+| active-text | Texte affiché dans l'état `on`. | string | — | — |
+| inactive-text | Texte affiché dans l'état `off`. | string | — | — |
+| active-value  | Valeur du switch dans l'état `on`. | boolean / string / number | — | true |
+| inactive-value  | Valeur du switch dans l'état `off`. | boolean / string / number | — | false |
+| active-color | Couleur de fond de l'état `on`. | string | — | #2460e0 |
+| inactive-color | Couleur de fond de l'état `off`. | string | — | #C0CCDA |
+| name| Nom du champ d'input du switch. | string | — | — |
+| validate-event | Si la validation doit avoir lieu. | boolean | - | true |
+
+### Évènements
+
+| Nom | Description | Paramètres |
+| ---- | ----| ---- |
+| change | Se déclenche quand la valeur change. | La valeur après changement. |
+
+### Méthodes
+
+| Méthode | Description | Paramètres |
+|-------|--------|------- |
+| focus | Donne le focus au switch. | — |
diff --git a/examples/docs/fr-FR/table.md b/examples/docs/fr-FR/table.md
new file mode 100644
index 00000000000..a9d873ac120
--- /dev/null
+++ b/examples/docs/fr-FR/table.md
@@ -0,0 +1,1931 @@
+## Table
+
+Permet d'afficher de nombreuses données possédant un format similaire. Vous pouvez ainsi trier, filtrer et comparer les données de votre tableau.
+
+### Table basique
+
+Un tableau de base pour afficher seulement.
+
+:::demo Après avoir configuré l'attribut `data` de `el-table` avec un tableau d'objets, vous pouvez utiliser `prop` (correspondant à une clé dans chaque objet du tableau `data`) dans `el-table-column` pour insérer des données dans les colonnes, ainsi que l'attribut `label` pour définir le nom de la colonne. L'attribut `width` définit si besoin la largeur de la colonne.
+
+```html
+  <template>
+    <el-table
+      :data="tableData"
+      style="width: 100%">
+      <el-table-column
+        prop="date"
+        label="Date"
+        width="180">
+      </el-table-column>
+      <el-table-column
+        prop="name"
+        label="Nom"
+        width="180">
+      </el-table-column>
+      <el-table-column
+        prop="address"
+        label="Adresse">
+      </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'
+          }]
+        }
+      }
+    }
+  </script>
+```
+:::
+
+### Table rayée
+
+Ajouter des couleurs différentes pour les lignes paires et impaires permet de lire le tableau plus facilement.
+
+:::demo L'attribut `stripe` accepte un `Boolean`. Si `true`, le tableau sera rayé.
+```html
+<template>
+  <el-table
+    :data="tableData"
+    stripe
+    style="width: 100%">
+    <el-table-column
+      prop="date"
+      label="Date"
+      width="180">
+    </el-table-column>
+    <el-table-column
+      prop="name"
+      label="Nom"
+      width="180">
+    </el-table-column>
+    <el-table-column
+      prop="address"
+      label="Adresse">
+    </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'
+        }]
+      }
+    }
+  }
+</script>
+```
+:::
+
+### Table avec bordure
+
+:::demo Par défaut, Table n'a pas de bordure verticale. Si vous en avez besoin, mettez l'attribut `border` à `true`.
+
+```html
+<template>
+  <el-table
+    :data="tableData"
+    border
+    style="width: 100%">
+    <el-table-column
+      prop="date"
+      label="Date"
+      width="180">
+    </el-table-column>
+    <el-table-column
+      prop="name"
+      label="Nom"
+      width="180">
+    </el-table-column>
+    <el-table-column
+      prop="address"
+      label="Adresse">
+    </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'
+        }]
+      }
+    }
+  }
+</script>
+```
+:::
+
+### Table avec statut
+
+Vous pouvez mettre en valeur certaines lignes du tableau suivant leur état, comme "success", "information", "warning", "danger" et d'autres.
+
+:::demo Utilisez `row-class-name` dans `el-table` pour utiliser une fonction qui permettra ajouter des classes à certaines lignes. Vous pouvez ensuite définir les classes en question dans votre CSS.
+```html
+<template>
+  <el-table
+    :data="tableData"
+    style="width: 100%"
+    :row-class-name="tableRowClassName">
+    <el-table-column
+      prop="date"
+      label="Date"
+      width="180">
+    </el-table-column>
+    <el-table-column
+      prop="name"
+      label="Nom"
+      width="180">
+    </el-table-column>
+    <el-table-column
+      prop="address"
+      label="Adresse">
+    </el-table-column>
+  </el-table>
+</template>
+
+<style>
+  .el-table .warning-row {
+    background: oldlace;
+  }
+
+  .el-table .success-row {
+    background: #f0f9eb;
+  }
+</style>
+
+<script>
+  export default {
+    methods: {
+      tableRowClassName({row, rowIndex}) {
+        if (rowIndex === 1) {
+          return 'warning-row';
+        } else if (rowIndex === 3) {
+          return 'success-row';
+        }
+        return '';
+      }
+    },
+    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'
+        }]
+      }
+    }
+  }
+</script>
+```
+:::
+
+### Table avec un header fixe
+
+Lorsqu'il y a beaucoup de lignes, il peut être utile d'avoir un header fixe afin de ne pas perdre le nom de colonnes à mesure que l'utilisateur défile vers le bas.
+
+:::demo En réglant l'attribut `height` de `el-table`, vous pouvez fixer le header sans avoir besoin de plus de code.
+```html
+<template>
+  <el-table
+    :data="tableData"
+    height="250"
+    style="width: 100%">
+    <el-table-column
+      prop="date"
+      label="Date"
+      width="180">
+    </el-table-column>
+    <el-table-column
+      prop="name"
+      label="Nom"
+      width="180">
+    </el-table-column>
+    <el-table-column
+      prop="address"
+      label="Adresse">
+    </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'
+        }, {
+          date: '2016-05-08',
+          name: 'Tom',
+          address: 'No. 189, Grove St, Los Angeles'
+        }, {
+          date: '2016-05-06',
+          name: 'Tom',
+          address: 'No. 189, Grove St, Los Angeles'
+        }, {
+          date: '2016-05-07',
+          name: 'Tom',
+          address: 'No. 189, Grove St, Los Angeles'
+        }],
+      }
+    }
+  }
+</script>
+```
+:::
+
+### Table avec colonnes fixes
+
+Lorsque qu'il y a beaucoup de colonnes, il peut être utile d'en fixer certaines afin de ne pas perdre de vue leurs informations à mesure que l'utilisateur défile sur les cotés.
+
+:::demo Utilisez l'attribut `fixed` de `el-table-column` qui accepte un `Boolean`. Si `true`, la colonne sera fixée à gauche. Il accepte aussi les valeurs 'left' et 'right', indiquant de quel coté la colonne doit être fixée.
+```html
+<template>
+  <el-table
+    :data="tableData"
+    style="width: 100%">
+    <el-table-column
+      fixed
+      prop="date"
+      label="Date"
+      width="150">
+    </el-table-column>
+    <el-table-column
+      prop="name"
+      label="Nom"
+      width="120">
+    </el-table-column>
+    <el-table-column
+      prop="state"
+      label="État"
+      width="120">
+    </el-table-column>
+    <el-table-column
+      prop="city"
+      label="Ville"
+      width="120">
+    </el-table-column>
+    <el-table-column
+      prop="address"
+      label="Adresse"
+      width="300">
+    </el-table-column>
+    <el-table-column
+      prop="zip"
+      label="Zip"
+      width="120">
+    </el-table-column>
+    <el-table-column
+      fixed="right"
+      label="Opérations"
+      width="120">
+      <template slot-scope="scope">
+        <el-button @click="handleClick" type="text" size="small">Detail</el-button>
+        <el-button type="text" size="small">Editer</el-button>
+      </template>
+    </el-table-column>
+  </el-table>
+</template>
+
+<script>
+  export default {
+    methods: {
+      handleClick() {
+        console.log('click');
+      }
+    },
+    data() {
+      return {
+        tableData: [{
+          date: '2016-05-03',
+          name: 'Tom',
+          state: 'California',
+          city: 'Los Angeles',
+          address: 'No. 189, Grove St, Los Angeles',
+          zip: 'CA 90036',
+          tag: 'Home'
+        }, {
+          date: '2016-05-02',
+          name: 'Tom',
+          state: 'California',
+          city: 'Los Angeles',
+          address: 'No. 189, Grove St, Los Angeles',
+          zip: 'CA 90036',
+          tag: 'Office'
+        }, {
+          date: '2016-05-04',
+          name: 'Tom',
+          state: 'California',
+          city: 'Los Angeles',
+          address: 'No. 189, Grove St, Los Angeles',
+          zip: 'CA 90036',
+          tag: 'Home'
+        }, {
+          date: '2016-05-01',
+          name: 'Tom',
+          state: 'California',
+          city: 'Los Angeles',
+          address: 'No. 189, Grove St, Los Angeles',
+          zip: 'CA 90036',
+          tag: 'Office'
+        }]
+      }
+    }
+  }
+</script>
+```
+:::
+
+### Table avec header et colonnes fixes
+
+Si vous avez un gros volume de données à afficher, vous pouvez fixer le header et des colonnes en même temps.
+
+:::demo Header et colonnes fixes combinant les deux exemples précédents.
+```html
+<template>
+  <el-table
+    :data="tableData"
+    style="width: 100%"
+    height="250">
+    <el-table-column
+      fixed
+      prop="date"
+      label="Date"
+      width="150">
+    </el-table-column>
+    <el-table-column
+      prop="name"
+      label="Nom"
+      width="120">
+    </el-table-column>
+    <el-table-column
+      prop="state"
+      label="État"
+      width="120">
+    </el-table-column>
+    <el-table-column
+      prop="city"
+      label="Ville"
+      width="120">
+    </el-table-column>
+    <el-table-column
+      prop="address"
+      label="Adresse"
+      width="300">
+    </el-table-column>
+    <el-table-column
+      prop="zip"
+      label="Zip"
+      width="120">
+    </el-table-column>
+  </el-table>
+</template>
+
+<script>
+  export default {
+    data() {
+      return {
+        tableData: [{
+          date: '2016-05-03',
+          name: 'Tom',
+          state: 'California',
+          city: 'Los Angeles',
+          address: 'No. 189, Grove St, Los Angeles',
+          zip: 'CA 90036'
+        }, {
+          date: '2016-05-02',
+          name: 'Tom',
+          state: 'California',
+          city: 'Los Angeles',
+          address: 'No. 189, Grove St, Los Angeles',
+          zip: 'CA 90036'
+        }, {
+          date: '2016-05-04',
+          name: 'Tom',
+          state: 'California',
+          city: 'Los Angeles',
+          address: 'No. 189, Grove St, Los Angeles',
+          zip: 'CA 90036'
+        }, {
+          date: '2016-05-01',
+          name: 'Tom',
+          state: 'California',
+          city: 'Los Angeles',
+          address: 'No. 189, Grove St, Los Angeles',
+          zip: 'CA 90036'
+        }, {
+          date: '2016-05-08',
+          name: 'Tom',
+          state: 'California',
+          city: 'Los Angeles',
+          address: 'No. 189, Grove St, Los Angeles',
+          zip: 'CA 90036'
+        }, {
+          date: '2016-05-06',
+          name: 'Tom',
+          state: 'California',
+          city: 'Los Angeles',
+          address: 'No. 189, Grove St, Los Angeles',
+          zip: 'CA 90036'
+        }, {
+          date: '2016-05-07',
+          name: 'Tom',
+          state: 'California',
+          city: 'Los Angeles',
+          address: 'No. 189, Grove St, Los Angeles',
+          zip: 'CA 90036'
+        }]
+      }
+    }
+  }
+</script>
+```
+:::
+
+### Hauteur fluide dans une Table avec header et colonnes fixes
+
+Quand les données changent dynamiquement, vous pouvez avoir besoin d'une hauteur maximale et d'afficher une barre de défilement si besoin.
+
+:::demo En utilisant l'attribut `max-height` de `el-table`, vous fixez le header. Le tableau ne défilera que si la hauteur des lignes dépasse cette hauteur maximale.
+```html
+<template>
+  <el-table
+    :data="tableData"
+    style="width: 100%"
+    max-height="250">
+    <el-table-column
+      fixed
+      prop="date"
+      label="Date"
+      width="150">
+    </el-table-column>
+    <el-table-column
+      prop="name"
+      label="Nom"
+      width="120">
+    </el-table-column>
+    <el-table-column
+      prop="state"
+      label="État"
+      width="120">
+    </el-table-column>
+    <el-table-column
+      prop="city"
+      label="Ville"
+      width="120">
+    </el-table-column>
+    <el-table-column
+      prop="address"
+      label="Adresse"
+      width="300">
+    </el-table-column>
+    <el-table-column
+      prop="zip"
+      label="Zip"
+      width="120">
+    </el-table-column>
+    <el-table-column
+      fixed="right"
+      label="Opérations"
+      width="120">
+      <template slot-scope="scope">
+        <el-button
+          @click.native.prevent="deleteRow(scope.$index, tableData)"
+          type="text"
+          size="small">
+          Supprimer
+        </el-button>
+      </template>
+    </el-table-column>
+  </el-table>
+</template>
+
+<script>
+  export default {
+    methods: {
+      deleteRow(index, rows) {
+        rows.splice(index, 1);
+      }
+    },
+    data() {
+      return {
+        tableData: [{
+          date: '2016-05-03',
+          name: 'Tom',
+          state: 'California',
+          city: 'Los Angeles',
+          address: 'No. 189, Grove St, Los Angeles',
+          zip: 'CA 90036'
+        }, {
+          date: '2016-05-02',
+          name: 'Tom',
+          state: 'California',
+          city: 'Los Angeles',
+          address: 'No. 189, Grove St, Los Angeles',
+          zip: 'CA 90036'
+        }, {
+          date: '2016-05-04',
+          name: 'Tom',
+          state: 'California',
+          city: 'Los Angeles',
+          address: 'No. 189, Grove St, Los Angeles',
+          zip: 'CA 90036'
+        }, {
+          date: '2016-05-01',
+          name: 'Tom',
+          state: 'California',
+          city: 'Los Angeles',
+          address: 'No. 189, Grove St, Los Angeles',
+          zip: 'CA 90036'
+        }, {
+          date: '2016-05-08',
+          name: 'Tom',
+          state: 'California',
+          city: 'Los Angeles',
+          address: 'No. 189, Grove St, Los Angeles',
+          zip: 'CA 90036'
+        }, {
+          date: '2016-05-06',
+          name: 'Tom',
+          state: 'California',
+          city: 'Los Angeles',
+          address: 'No. 189, Grove St, Los Angeles',
+          zip: 'CA 90036'
+        }, {
+          date: '2016-05-07',
+          name: 'Tom',
+          state: 'California',
+          city: 'Los Angeles',
+          address: 'No. 189, Grove St, Los Angeles',
+          zip: 'CA 90036'
+        }]
+      }
+    }
+  }
+</script>
+```
+:::
+
+### Grouper les headers
+
+Quand la structure du tableau est complexe, vous pouvez grouper les headers afin de montrer une hiérarchie.
+
+:::demo Placez simplement `el-table-column` dans une autre `el-table-column`, et vous grouperez ainsi les headers.
+```html
+<template>
+  <el-table
+    :data="tableData"
+    style="width: 100%">
+    <el-table-column
+      prop="date"
+      label="Date"
+      width="150">
+    </el-table-column>
+    <el-table-column label="Informations de livraison">
+      <el-table-column
+        prop="name"
+        label="Nom"
+        width="120">
+      </el-table-column>
+      <el-table-column label="Informations d'adresse">
+        <el-table-column
+          prop="state"
+          label="État"
+          width="120">
+        </el-table-column>
+        <el-table-column
+          prop="city"
+          label="Ville"
+          width="120">
+        </el-table-column>
+        <el-table-column
+          prop="address"
+          label="Adresse"
+          width="300">
+        </el-table-column>
+        <el-table-column
+          prop="zip"
+          label="Zip"
+          width="120">
+        </el-table-column>
+      </el-table-column>
+    </el-table-column>
+  </el-table>
+</template>
+
+<script>
+  export default {
+    data() {
+      return {
+        tableData: [{
+          date: '2016-05-03',
+          name: 'Tom',
+          state: 'California',
+          city: 'Los Angeles',
+          address: 'No. 189, Grove St, Los Angeles',
+          zip: 'CA 90036'
+        }, {
+          date: '2016-05-02',
+          name: 'Tom',
+          state: 'California',
+          city: 'Los Angeles',
+          address: 'No. 189, Grove St, Los Angeles',
+          zip: 'CA 90036'
+        }, {
+          date: '2016-05-04',
+          name: 'Tom',
+          state: 'California',
+          city: 'Los Angeles',
+          address: 'No. 189, Grove St, Los Angeles',
+          zip: 'CA 90036'
+        }, {
+          date: '2016-05-01',
+          name: 'Tom',
+          state: 'California',
+          city: 'Los Angeles',
+          address: 'No. 189, Grove St, Los Angeles',
+          zip: 'CA 90036'
+        }, {
+          date: '2016-05-08',
+          name: 'Tom',
+          state: 'California',
+          city: 'Los Angeles',
+          address: 'No. 189, Grove St, Los Angeles',
+          zip: 'CA 90036'
+        }, {
+          date: '2016-05-06',
+          name: 'Tom',
+          state: 'California',
+          city: 'Los Angeles',
+          address: 'No. 189, Grove St, Los Angeles',
+          zip: 'CA 90036'
+        }, {
+          date: '2016-05-07',
+          name: 'Tom',
+          state: 'California',
+          city: 'Los Angeles',
+          address: 'No. 189, Grove St, Los Angeles',
+          zip: 'CA 90036'
+        }]
+      }
+    }
+  }
+</script>
+```
+:::
+
+### Sélecteur simple
+
+Vous pouvez activer la sélection d'une ligne.
+
+:::demo Activez la sélection en ajoutant l'attribut `highlight-current-row`. L'évènement `current-change` se déclenchera à chaque changement de sélection, ses paramètres étant les deux lignes avant et après le changement: `currentRow` et `oldCurrentRow`. Si vous avez besoin d'afficher l'index des lignes, ajoutez une `el-table-column` avec pour `type` la valeur `index`, qui commencera à 1.
+```html
+<template>
+  <el-table
+    ref="singleTable"
+    :data="tableData"
+    highlight-current-row
+    @current-change="handleCurrentChange"
+    style="width: 100%">
+    <el-table-column
+      type="index"
+      width="50">
+    </el-table-column>
+    <el-table-column
+      property="date"
+      label="Date"
+      width="120">
+    </el-table-column>
+    <el-table-column
+      property="name"
+      label="Nom"
+      width="120">
+    </el-table-column>
+    <el-table-column
+      property="address"
+      label="Adresse">
+    </el-table-column>
+  </el-table>
+  <div style="margin-top: 20px">
+    <el-button @click="setCurrent(tableData[1])">Sélectionner la deuxième ligne</el-button>
+    <el-button @click="setCurrent()">Effacer la sélection</el-button>
+  </div>
+</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'
+        }],
+        currentRow: null
+      }
+    },
+
+    methods: {
+      setCurrent(row) {
+        this.$refs.singleTable.setCurrentRow(row);
+      },
+      handleCurrentChange(val) {
+        this.currentRow = val;
+      }
+    }
+  }
+</script>
+```
+:::
+
+### Sélection multiple
+
+Vous pouvez aussi sélectionner plusieurs lignes.
+
+:::demo Ajoutez une `el-table-column` avec son `type` à `selection`. Cet exemple utilise aussi `show-overflow-tooltip`: par défaut, si le contenu est trop long, il se séparera en plusieurs lignes. Si vous souhaitez conserver une seule ligne, utilisez `show-overflow-tooltip`, qui accepte un `Boolean`. Si `true`, le contenu non affiché s'affichera dans le tooltip lorsque la souris passera sur la case.
+```html
+<template>
+  <el-table
+    ref="multipleTable"
+    :data="tableData"
+    style="width: 100%"
+    @selection-change="handleSelectionChange">
+    <el-table-column
+      type="selection"
+      width="55">
+    </el-table-column>
+    <el-table-column
+      label="Date"
+      width="120">
+      <template slot-scope="scope">{{ scope.row.date }}</template>
+    </el-table-column>
+    <el-table-column
+      property="name"
+      label="Nom"
+      width="120">
+    </el-table-column>
+    <el-table-column
+      property="address"
+      label="Adresse"
+      show-overflow-tooltip>
+    </el-table-column>
+  </el-table>
+  <div style="margin-top: 20px">
+    <el-button @click="toggleSelection([tableData[1], tableData[2]])">Sélectionner les deuxième et troisième lignes</el-button>
+    <el-button @click="toggleSelection()">Effacer la sélection</el-button>
+  </div>
+</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'
+        }, {
+          date: '2016-05-08',
+          name: 'Tom',
+          address: 'No. 189, Grove St, Los Angeles'
+        }, {
+          date: '2016-05-06',
+          name: 'Tom',
+          address: 'No. 189, Grove St, Los Angeles'
+        }, {
+          date: '2016-05-07',
+          name: 'Tom',
+          address: 'No. 189, Grove St, Los Angeles'
+        }],
+        multipleSelection: []
+      }
+    },
+
+    methods: {
+      toggleSelection(rows) {
+        if (rows) {
+          rows.forEach(row => {
+            this.$refs.multipleTable.toggleRowSelection(row);
+          });
+        } else {
+          this.$refs.multipleTable.clearSelection();
+        }
+      },
+      handleSelectionChange(val) {
+        this.multipleSelection = val;
+      }
+    }
+  }
+</script>
+```
+:::
+
+### Trier
+
+Il est possible de trier les données afin de trouver plus facilement ce qu'on cherche.
+
+:::demo Ajoutez l'attribut `sortable` a une colonne pour pouvoir trier cette colonne. Il accepte un `Boolean` et à `false` par défaut. Ajoutez `default-sort` pour déterminer les propriétés par défaut du tri. Pour appliquer vos propres règles, utilisez `sort-method` ou `sort-by`. Si vous avez besoin d'un tri dynamique depuis le serveur, mettez `sortable` à `custom`, et écoutez l'évènement `sort-change` de `Table`. Depuis cet évènement, vous aurez accès à la colonne et l'ordre de tri. cet exemple utilise aussi `formatter` pour formater les valeurs de colonnes. Il prend une fonction avec deux paramètres: `row` et `column`. Vous pouvez ainsi transformer les valeurs.
+```html
+<template>
+  <el-table
+    :data="tableData"
+    :default-sort = "{prop: 'date', order: 'descending'}"
+    style="width: 100%">
+    <el-table-column
+      prop="date"
+      label="Date"
+      sortable
+      width="180">
+    </el-table-column>
+    <el-table-column
+      prop="name"
+      label="Nom"
+      width="180">
+    </el-table-column>
+    <el-table-column
+      prop="address"
+      label="Adresse"
+      :formatter="formatter">
+    </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: {
+      formatter(row, column) {
+        return row.address;
+      }
+    }
+  }
+</script>
+```
+:::
+
+### Filtrer
+
+Vous pouvez filtrer la table pour obtenir rapidement les lignes désirées.
+
+:::demo Réglez `filters` et `filter-method` dans `el-table-column` pour rendre la colonne filtrable. `filters` prends un tableau, et `filter-method` est une fonction déterminant comment les lignes s'affichent. Elle prend trois paramètres: `value`, `row` et `column`.
+```html
+<template>
+  <el-button @click="resetDateFilter">Effacer le filtre date</el-button>
+  <el-button @click="clearFilter">Effacer tout les filtres</el-button>
+  <el-table
+    ref="filterTable"
+    :data="tableData"
+    style="width: 100%">
+    <el-table-column
+      prop="date"
+      label="Date"
+      sortable
+      width="180"
+      column-key="date"
+      :filters="[{text: '2016-05-01', value: '2016-05-01'}, {text: '2016-05-02', value: '2016-05-02'}, {text: '2016-05-03', value: '2016-05-03'}, {text: '2016-05-04', value: '2016-05-04'}]"
+      :filter-method="filterHandler"
+    >
+    </el-table-column>
+    <el-table-column
+      prop="name"
+      label="Nom"
+      width="180">
+    </el-table-column>
+    <el-table-column
+      prop="address"
+      label="Adresse"
+      :formatter="formatter">
+    </el-table-column>
+    <el-table-column
+      prop="tag"
+      label="Tag"
+      width="100"
+      :filters="[{ text: 'Home', value: 'Home' }, { text: 'Office', value: 'Office' }]"
+      :filter-method="filterTag"
+      filter-placement="bottom-end">
+      <template slot-scope="scope">
+        <el-tag
+          :type="scope.row.tag === 'Home' ? 'primary' : 'success'"
+          disable-transitions>{{scope.row.tag}}</el-tag>
+      </template>
+    </el-table-column>
+  </el-table>
+</template>
+
+<script>
+  export default {
+    data() {
+      return {
+        tableData: [{
+          date: '2016-05-03',
+          name: 'Tom',
+          address: 'No. 189, Grove St, Los Angeles',
+          tag: 'Home'
+        }, {
+          date: '2016-05-02',
+          name: 'Tom',
+          address: 'No. 189, Grove St, Los Angeles',
+          tag: 'Office'
+        }, {
+          date: '2016-05-04',
+          name: 'Tom',
+          address: 'No. 189, Grove St, Los Angeles',
+          tag: 'Home'
+        }, {
+          date: '2016-05-01',
+          name: 'Tom',
+          address: 'No. 189, Grove St, Los Angeles',
+          tag: 'Office'
+        }]
+      }
+    },
+    methods: {
+      resetDateFilter() {
+        this.$refs.filterTable.clearFilter('date');
+      },
+      clearFilter() {
+        this.$refs.filterTable.clearFilter();
+      },
+      formatter(row, column) {
+        return row.address;
+      },
+      filterTag(value, row) {
+        return row.tag === value;
+      },
+      filterHandler(value, row, column) {
+        const property = column['property'];
+        return row[property] === value;
+      }
+    }
+  }
+</script>
+```
+:::
+
+### Template de colonne personnalisé
+
+Vous pouvez customiser le contenu des colonnes afin de pouvoir utiliser d'autres composants.
+
+:::demo Vous avez acccès aux données suivantes: `row`, `column`, `$index` et `store` (gestionnaire d'état de Table) grâce aux [Scoped slot](https://vuejs.org/v2/guide/components.html#Scoped-Slots).
+```html
+<template>
+  <el-table
+    :data="tableData"
+    style="width: 100%">
+    <el-table-column
+      label="Date"
+      width="180">
+      <template slot-scope="scope">
+        <i class="el-icon-time"></i>
+        <span style="margin-left: 10px">{{ scope.row.date }}</span>
+      </template>
+    </el-table-column>
+    <el-table-column
+      label="Nom"
+      width="180">
+      <template slot-scope="scope">
+        <el-popover trigger="hover" placement="top">
+          <p>Nom: {{ scope.row.name }}</p>
+          <p>Addr: {{ scope.row.address }}</p>
+          <div slot="reference" class="name-wrapper">
+            <el-tag size="medium">{{ scope.row.name }}</el-tag>
+          </div>
+        </el-popover>
+      </template>
+    </el-table-column>
+    <el-table-column
+      label="Opérations">
+      <template slot-scope="scope">
+        <el-button
+          size="mini"
+          @click="handleEdit(scope.$index, scope.row)">Editer</el-button>
+        <el-button
+          size="mini"
+          type="danger"
+          @click="handleDelete(scope.$index, scope.row)">Supprimer</el-button>
+      </template>
+    </el-table-column>
+  </el-table>
+</template>
+
+<script>
+  export default {
+    data() {
+      return {
+        tableData: [{
+          date: '2016-05-03',
+          name: 'Tom',
+          address: 'No. 189, Grove St, Los Angeles'
+        }, {
+          date: '2016-05-02',
+          name: 'Tom',
+          address: 'No. 189, Grove St, Los Angeles'
+        }, {
+          date: '2016-05-04',
+          name: 'Tom',
+          address: 'No. 189, Grove St, Los Angeles'
+        }, {
+          date: '2016-05-01',
+          name: 'Tom',
+          address: 'No. 189, Grove St, Los Angeles'
+        }]
+      }
+    },
+    methods: {
+      handleEdit(index, row) {
+        console.log(index, row);
+      },
+      handleDelete(index, row) {
+        console.log(index, row);
+      }
+    }
+  }
+</script>
+```
+:::
+
+### Table avec header personnalisé
+
+Vous pouvez également personnaliser le header de la table.
+
+:::demo Vous pouvez personnaliser le header grâce aux [slots avec portée](https://vuejs.org/v2/guide/components-slots.html#Scoped-Slots).
+```html
+<template>
+  <el-table
+    :data="tableData.filter(data => !search || data.name.toLowerCase().includes(search.toLowerCase()))"
+    style="width: 100%">
+    <el-table-column
+      label="Date"
+      prop="date">
+    </el-table-column>
+    <el-table-column
+      label="Name"
+      prop="name">
+    </el-table-column>
+    <el-table-column
+      align="right">
+      <template slot="header" slot-scope="scope">
+        <el-input
+          v-model="search"
+          size="mini"
+          placeholder="Type to search"/>
+      </template>
+      <template slot-scope="scope">
+        <el-button
+          size="mini"
+          @click="handleEdit(scope.$index, scope.row)">Editer</el-button>
+        <el-button
+          size="mini"
+          type="danger"
+          @click="handleDelete(scope.$index, scope.row)">Supprimer</el-button>
+      </template>
+    </el-table-column>
+  </el-table>
+</template>
+
+<script>
+  export default {
+    data() {
+      return {
+        tableData: [{
+          date: '2016-05-03',
+          name: 'Tom',
+          address: 'No. 189, Grove St, Los Angeles'
+        }, {
+          date: '2016-05-02',
+          name: 'John',
+          address: 'No. 189, Grove St, Los Angeles'
+        }, {
+          date: '2016-05-04',
+          name: 'Morgan',
+          address: 'No. 189, Grove St, Los Angeles'
+        }, {
+          date: '2016-05-01',
+          name: 'Jessy',
+          address: 'No. 189, Grove St, Los Angeles'
+        }],
+        search: '',
+      }
+    },
+    methods: {
+      handleEdit(index, row) {
+        console.log(index, row);
+      },
+      handleDelete(index, row) {
+        console.log(index, row);
+      }
+    },
+  }
+</script>
+```
+:::
+
+### Ligne extensible
+
+Lorsque le contenu d'une ligne est trop long et que vous ne souhaitez pas afficher de scrollbar, vous pouvez utiliser une ligne extensible.
+
+:::demo Activer la ligne extensible en mettant `type` à `expand` et en utilisant un slot. Le contenu de `el-table-column` sera généré quand l'extension aura lieu, et vous avez aux même attributs que pour le slot des templates de colonnes.
+```html
+<template>
+  <el-table
+    :data="tableData"
+    style="width: 100%">
+    <el-table-column type="expand">
+      <template slot-scope="props">
+        <p>État: {{ props.row.state }}</p>
+        <p>Ville: {{ props.row.city }}</p>
+        <p>Adresse: {{ props.row.address }}</p>
+        <p>Zip: {{ props.row.zip }}</p>
+      </template>
+    </el-table-column>
+    <el-table-column
+      label="Date"
+      prop="date">
+    </el-table-column>
+    <el-table-column
+      label="Nom"
+      prop="name">
+    </el-table-column>
+  </el-table>
+</template>
+
+<script>
+  export default {
+    data() {
+      return {
+        tableData: [{
+          date: '2016-05-03',
+          name: 'Tom',
+          state: 'California',
+          city: 'Los Angeles',
+          address: 'No. 189, Grove St, Los Angeles',
+          zip: 'CA 90036'
+        }, {
+          date: '2016-05-02',
+          name: 'Tom',
+          state: 'California',
+          city: 'Los Angeles',
+          address: 'No. 189, Grove St, Los Angeles',
+          zip: 'CA 90036'
+        }, {
+          date: '2016-05-04',
+          name: 'Tom',
+          state: 'California',
+          city: 'Los Angeles',
+          address: 'No. 189, Grove St, Los Angeles',
+          zip: 'CA 90036'
+        }, {
+          date: '2016-05-01',
+          name: 'Tom',
+          state: 'California',
+          city: 'Los Angeles',
+          address: 'No. 189, Grove St, Los Angeles',
+          zip: 'CA 90036'
+        }, {
+          date: '2016-05-08',
+          name: 'Tom',
+          state: 'California',
+          city: 'Los Angeles',
+          address: 'No. 189, Grove St, Los Angeles',
+          zip: 'CA 90036'
+        }, {
+          date: '2016-05-06',
+          name: 'Tom',
+          state: 'California',
+          city: 'Los Angeles',
+          address: 'No. 189, Grove St, Los Angeles',
+          zip: 'CA 90036'
+        }, {
+          date: '2016-05-07',
+          name: 'Tom',
+          state: 'California',
+          city: 'Los Angeles',
+          address: 'No. 189, Grove St, Los Angeles',
+          zip: 'CA 90036'
+        }]
+      }
+    }
+  }
+</script>
+```
+:::
+
+### Arborescence et lazy loading
+
+:::demo You can display tree structure data. When row contains the `children` field, it is treated as nested data. For rendering nested data, the prop `row-key` is required。Also, child row data can be loaded asynchronously. Set `lazy` property of Table to true and the function `load`. Specify `hasChildren` attribute in row to determine which row contains children. Both `children` and `hasChildren` can be configured via `tree-props`.
+
+```html
+<template>
+<div>
+  <el-table
+    :data="tableData"
+    style="width: 100%;margin-bottom: 20px;"
+    row-key="id"
+    border
+    default-expand-all>
+    <el-table-column
+      prop="date"
+      label="date"
+      sortable
+      width="180">
+    </el-table-column>
+    <el-table-column
+      prop="name"
+      label="Nom"
+      sortable
+      width="180">
+    </el-table-column>
+  </el-table>
+
+  <el-table
+    :data="tableData1"
+    style="width: 100%"
+    row-key="id"
+    border
+    lazy
+    :load="load"
+    :tree-props="{children: 'children', hasChildren: 'hasChildren'}">
+    <el-table-column
+      prop="date"
+      label="Date"
+      width="180">
+    </el-table-column>
+    <el-table-column
+      prop="name"
+      label="Nom"
+      width="180">
+    </el-table-column>
+  </el-table>
+</div>
+</template>
+<script>
+  export default {
+    data() {
+      return {
+        tableData: [{
+          id: 1,
+          date: '2016-05-02',
+          name: 'wangxiaohu'
+        }, {
+          id: 2,
+          date: '2016-05-04',
+          name: 'wangxiaohu'
+        }, {
+          id: 3,
+          date: '2016-05-01',
+          name: 'wangxiaohu',
+          children: [{
+              id: 31,
+              date: '2016-05-01',
+              name: 'wangxiaohu'
+            }, {
+              id: 32,
+              date: '2016-05-01',
+              name: 'wangxiaohu'
+          }]
+        }, {
+          id: 4,
+          date: '2016-05-03',
+          name: 'wangxiaohu'
+        }],
+        tableData1: [{
+          id: 1,
+          date: '2016-05-02',
+          name: 'wangxiaohu'
+        }, {
+          id: 2,
+          date: '2016-05-04',
+          name: 'wangxiaohu'
+        }, {
+          id: 3,
+          date: '2016-05-01',
+          name: 'wangxiaohu',
+          hasChildren: true
+        }, {
+          id: 4,
+          date: '2016-05-03',
+          name: 'wangxiaohu'
+        }]
+      }
+    },
+    methods: {
+      load(tree, treeNode, resolve) {
+        setTimeout(() => {
+          resolve([
+            {
+              id: 31,
+              date: '2016-05-01',
+              name: 'wangxiaohu'
+            }, {
+              id: 32,
+              date: '2016-05-01',
+              name: 'wangxiaohu'
+            }
+          ])
+        }, 1000)
+      }
+    },
+  }
+</script>
+```
+:::
+
+### Ligne de somme
+
+Pour les tableaux de nombres, vous pouvez ajouter une ligne en plus pour afficher la somme de chaque colonne.
+
+:::demo Mettez l'attribut `show-summary` à `true` dans `el-table`. Par défaut, la première colonne n'affiche que 'Sum' (vous pouvez configurer ce label avec `sum-text`), alors que les autres affichent la somme de chaque colonne. Vous pouvez choisir comment effectuer l'opération grâce à `summary-method`, qui doit retourner un tableau, cahque élément correspondant à la somme de chaque colonne. La deuxième table de cet exemple montre tout cela en pratique.
+```html
+<template>
+  <el-table
+    :data="tableData"
+    border
+    show-summary
+    style="width: 100%">
+    <el-table-column
+      prop="id"
+      label="ID"
+      width="180">
+    </el-table-column>
+    <el-table-column
+      prop="name"
+      label="Nom">
+    </el-table-column>
+    <el-table-column
+      prop="amount1"
+      sortable
+      label="Quantité 1">
+    </el-table-column>
+    <el-table-column
+      prop="amount2"
+      sortable
+      label="Quantité 2">
+    </el-table-column>
+    <el-table-column
+      prop="amount3"
+      sortable
+      label="Quantité 3">
+    </el-table-column>
+  </el-table>
+
+  <el-table
+    :data="tableData"
+    border
+    height="200"
+    :summary-method="getSummaries"
+    show-summary
+    style="width: 100%; margin-top: 20px">
+    <el-table-column
+      prop="id"
+      label="ID"
+      width="180">
+    </el-table-column>
+    <el-table-column
+      prop="name"
+      label="Nom">
+    </el-table-column>
+    <el-table-column
+      prop="amount1"
+      label="Coût 1 ($)">
+    </el-table-column>
+    <el-table-column
+      prop="amount2"
+      label="Coût 2 ($)">
+    </el-table-column>
+    <el-table-column
+      prop="amount3"
+      label="Coût 3 ($)">
+    </el-table-column>
+  </el-table>
+</template>
+
+<script>
+  export default {
+    data() {
+      return {
+        tableData: [{
+          id: '12987122',
+          name: 'Tom',
+          amount1: '234',
+          amount2: '3.2',
+          amount3: 10
+        }, {
+          id: '12987123',
+          name: 'Tom',
+          amount1: '165',
+          amount2: '4.43',
+          amount3: 12
+        }, {
+          id: '12987124',
+          name: 'Tom',
+          amount1: '324',
+          amount2: '1.9',
+          amount3: 9
+        }, {
+          id: '12987125',
+          name: 'Tom',
+          amount1: '621',
+          amount2: '2.2',
+          amount3: 17
+        }, {
+          id: '12987126',
+          name: 'Tom',
+          amount1: '539',
+          amount2: '4.1',
+          amount3: 15
+        }]
+      };
+    },
+    methods: {
+      getSummaries(param) {
+        const { columns, data } = param;
+        const sums = [];
+        columns.forEach((column, index) => {
+          if (index === 0) {
+            sums[index] = 'Coût total';
+            return;
+          }
+          const values = data.map(item => Number(item[column.property]));
+          if (!values.every(value => isNaN(value))) {
+            sums[index] = '$ ' + values.reduce((prev, curr) => {
+              const value = Number(curr);
+              if (!isNaN(value)) {
+                return prev + curr;
+              } else {
+                return prev;
+              }
+            }, 0);
+          } else {
+            sums[index] = 'N/A';
+          }
+        });
+
+        return sums;
+      }
+    }
+  };
+</script>
+```
+:::
+
+### Étendue des lignes et colonnes
+
+Vous pouvez configurer l'étendue des lignes et colonnes afin de fusionner des cellules.
+
+:::demo Utilisez `span-method` pour configurer chaque étendue. Il accepte une fonction, et lui passe un objet incluant la ligne actuelle `row`, la colonne actuelle `column`, l'index de la ligne `rowIndex` et l'index de la colonne `columnIndex`. La fonction doit retourner un tableau contenant deux nombres, le premier étant `rowspan` et le second `colspan`. Elle peut aussi retourner un objet avec les propriétés `rowspan` et `colspan`.
+
+```html
+<template>
+  <div>
+    <el-table
+      :data="tableData"
+      :span-method="arraySpanMethod"
+      border
+      style="width: 100%">
+      <el-table-column
+        prop="id"
+        label="ID"
+        width="180">
+      </el-table-column>
+      <el-table-column
+        prop="name"
+        label="Nom">
+      </el-table-column>
+      <el-table-column
+        prop="amount1"
+        sortable
+        label="Quantité 1">
+      </el-table-column>
+      <el-table-column
+        prop="amount2"
+        sortable
+        label="Quantité 2">
+      </el-table-column>
+      <el-table-column
+        prop="amount3"
+        sortable
+        label="Quantité 3">
+      </el-table-column>
+    </el-table>
+
+    <el-table
+      :data="tableData"
+      :span-method="objectSpanMethod"
+      border
+      style="width: 100%; margin-top: 20px">
+      <el-table-column
+        prop="id"
+        label="ID"
+        width="180">
+      </el-table-column>
+      <el-table-column
+        prop="name"
+        label="Nom">
+      </el-table-column>
+      <el-table-column
+        prop="amount1"
+        label="Quantité 1">
+      </el-table-column>
+      <el-table-column
+        prop="amount2"
+        label="Quantité 2">
+      </el-table-column>
+      <el-table-column
+        prop="amount3"
+        label="Quantité 3">
+      </el-table-column>
+    </el-table>
+  </div>
+</template>
+
+<script>
+  export default {
+    data() {
+      return {
+        tableData: [{
+          id: '12987122',
+          name: 'Tom',
+          amount1: '234',
+          amount2: '3.2',
+          amount3: 10
+        }, {
+          id: '12987123',
+          name: 'Tom',
+          amount1: '165',
+          amount2: '4.43',
+          amount3: 12
+        }, {
+          id: '12987124',
+          name: 'Tom',
+          amount1: '324',
+          amount2: '1.9',
+          amount3: 9
+        }, {
+          id: '12987125',
+          name: 'Tom',
+          amount1: '621',
+          amount2: '2.2',
+          amount3: 17
+        }, {
+          id: '12987126',
+          name: 'Tom',
+          amount1: '539',
+          amount2: '4.1',
+          amount3: 15
+        }]
+      };
+    },
+    methods: {
+      arraySpanMethod({ row, column, rowIndex, columnIndex }) {
+        if (rowIndex % 2 === 0) {
+          if (columnIndex === 0) {
+            return [1, 2];
+          } else if (columnIndex === 1) {
+            return [0, 0];
+          }
+        }
+      },
+
+      objectSpanMethod({ row, column, rowIndex, columnIndex }) {
+        if (columnIndex === 0) {
+          if (rowIndex % 2 === 0) {
+            return {
+              rowspan: 2,
+              colspan: 1
+            };
+          } else {
+            return {
+              rowspan: 0,
+              colspan: 0
+            };
+          }
+        }
+      }
+    }
+  };
+</script>
+```
+:::
+
+### Indices personnalisés
+
+Vous pouvez personnaliser les indices des colonnes de type `index`.
+
+:::demo Utilisez l'attribut `index` sur une `el-table-column` avec `type=index`. Si un nombre est assigné, tout les indices auront un décalage égal à ce nombre. Il peut aussi prendre une fonction avec chaque indice (commençant à `0`) comme paramètre, et la valeur de retour sera affichée en tant qu'indice.
+
+```html
+<template>
+  <el-table
+    :data="tableData"
+    style="width: 100%">
+    <el-table-column
+      type="index"
+      :index="indexMethod">
+    </el-table-column>
+    <el-table-column
+      prop="date"
+      label="Date"
+      width="180">
+    </el-table-column>
+    <el-table-column
+      prop="name"
+      label="Nom"
+      width="180">
+    </el-table-column>
+    <el-table-column
+      prop="address"
+      label="Adresse">
+    </el-table-column>
+  </el-table>
+</template>
+
+<script>
+  export default {
+    data() {
+      return {
+        tableData: [{
+          date: '2016-05-03',
+          name: 'Tom',
+          state: 'California',
+          city: 'Los Angeles',
+          address: 'No. 189, Grove St, Los Angeles',
+          zip: 'CA 90036',
+          tag: 'Home'
+        }, {
+          date: '2016-05-02',
+          name: 'Tom',
+          state: 'California',
+          city: 'Los Angeles',
+          address: 'No. 189, Grove St, Los Angeles',
+          zip: 'CA 90036',
+          tag: 'Office'
+        }, {
+          date: '2016-05-04',
+          name: 'Tom',
+          state: 'California',
+          city: 'Los Angeles',
+          address: 'No. 189, Grove St, Los Angeles',
+          zip: 'CA 90036',
+          tag: 'Home'
+        }, {
+          date: '2016-05-01',
+          name: 'Tom',
+          state: 'California',
+          city: 'Los Angeles',
+          address: 'No. 189, Grove St, Los Angeles',
+          zip: 'CA 90036',
+          tag: 'Office'
+        }],
+      }
+    },
+    methods: {
+      indexMethod(index) {
+        return index * 2;
+      }
+    }
+  };
+</script>
+```
+:::
+
+### Attributs de Table
+
+| Attribut      | Description          | Type      | Valeurs acceptées       | Défaut  |
+|----------------|----------------------|-----------|-----------------------|----------|
+| data | Les données de la table. | array | — | — |
+| height | La hauteur de la table. Par défaut la hauteur est `auto`. Si sa valeur est un nombre, la hauteur est en px; si c'est un string, la valeur est assigné au style.height de l'élement. La hauteur est affectée par les styles externes. | string/number | — | — |
+| max-height | Table's max-height. The legal value is a number or the height in px. | string/number | — | — |
+| stripe | Si la table est rayée. | boolean | — | false |
+| border | Si la table à une bordure verticale. | boolean | — | false |
+| size | Taille de la table. | string | medium / small / mini | — |
+| fit | Si la largeur des colonnes s'adapte au conteneur. | boolean | — | true |
+| show-header | Si le header de la table est visible. | boolean | — | true |
+| highlight-current-row | Si la ligne courante est mise en valeur. | boolean | — | false |
+| current-row-key | Clé de la ligne actuelle. Propriété set-only. | string,number | — | — |
+| row-class-name | Fonction qui retourne un nom de classe pour chaque ligne. Peut aussi être une simple chaîne de caractères assignant une classe à chaque ligne. | Function({row, rowIndex})/String | — | — |
+| row-style | Fonction qui retourne un style pour chaque ligne. Peut aussi être un objet assignant un style à chaque ligne. | Function({row, rowIndex})/Object | — | — |
+| cell-class-name | Fonction qui retourne un nom de classe pour chaque cellule. Peut aussi être une simple chaîne de caractères assignant une classe à chaque cellule. | Function({row, column, rowIndex, columnIndex})/String | — | — |
+| cell-style | Fonction qui retourne un style pour chaque cellule. Peut aussi être un objet assignant un style à chaque cellule. | Function({row, column, rowIndex, columnIndex})/Object | — | — |
+| header-row-class-name | Fonction qui retourne un nom de classe pour chaque ligne de header. Peut aussi être une simple chaîne de caractères assignant une classe à chaque ligne de header. | Function({row, rowIndex})/String | — | — |
+| header-row-style | Fonction qui retourne un style pour chaque ligne de header. Peut aussi être un objet assignant un style à chaque ligne de header. | Function({row, rowIndex})/Object | — | — |
+| header-cell-class-name | Fonction qui retourne un nom de classe pour chaque cellule de header. Peut aussi être une simple chaîne de caractères assignant une classe à chaque cellule de header. | Function({row, column, rowIndex, columnIndex})/String | — | — |
+| header-cell-style | Fonction qui retourne un style pour chaque cellule de header. Peut aussi être un objet assignant un style à chaque cellule de header. | Function({row, column, rowIndex, columnIndex})/Object | — | — |
+| row-key | Clé de chaque ligne, utilisée pour optimiser le rendu. Requise si `reserve-selection` est activé. Quand c'est un `String`, l'accès multi-niveaux est supporté, e.g. `user.info.id`, mais `user.info[0].id` n'est pas supporté. Dans ce dernier cas une `Function` devrait être utilisée. | Function(row)/String | — | — |
+| empty-text | Texte à afficher quand il n'y a pas de données. Vous pouvez changer cette zone grâce à `slot="empty"`. | String | — | No Data |
+| default-expand-all | whether expand all rows by default, works when the table has a column type="expand" or contains tree structure data | Boolean | — | false |
+| expand-row-keys | Détermine les lignes qui sont étendues, contient les clés des lignes correspondantes. Vous devriez configurer `row-key` avant celle-ci. | Array | — | |
+| default-sort | Détermine l'ordre de tri par défaut. La propriété `prop` détermine la colonne par défaut, `order` détermine l'ordre par défaut. | Object | `order`: ascending, descending | Si `order` est absent, son défaut sera `ascending`. |
+| tooltip-effect | Propriété `effect` de Tooltip. | String | dark/light | | dark |
+| show-summary | Si une ligne de somme doit apparaître. | Boolean | — | false |
+| sum-text | Le label de la première cellule de la ligne de somme. | String | — | Sum |
+| summary-method | La méthode pour calculer la somme. | Function({ columns, data }) | — | — |
+| span-method | Méthode qui retourne les valeurs de colspan et rowspan. | Function({ row, column, rowIndex, columnIndex }) | — | — |
+| select-on-indeterminate | Contrôle le comportement de la checkbox globale dans les tables avec sélection multiple lorsque seulement certaines lignes sont sélectionnées. Si `true`, toutes les lignes sont sélectionnées. | Boolean | — | true |
+| indent                  | horizontal indentation of tree data      | Number    | — | 16   |
+| lazy                    | whether to lazy loading data             | Boolean   | — | —    |
+| load                    | method for loading child row data, only works when `lazy` is true | Function({ row, treeNode, resolve }) | — | — |
+| tree-props              | configuration for rendering nested data | Object | — | { hasChildren: 'hasChildren', children: 'children' } |
+
+### Évènements de Table
+
+| Nom | Description | Paramètres |
+| ---- | ---- | ---- |
+| select | Se déclenche quand l'utilisateur clique sur la checkbox d'une ligne. | selection, row |
+| select-all | Se déclenche quand l'utilisateur clique sur la checkbox du header. | selection |
+| selection-change | Se déclenche quand la selection change. | selection |
+| cell-mouse-enter | Se déclenche quand la souris passe sur une cellule. | row, column, cell, event |
+| cell-mouse-leave | Se déclenche quand la souris sort d'une cellule. | row, column, cell, event |
+| cell-click | Se déclenche quand l'utilisateur clique sur une cellule. | row, column, cell, event |
+| cell-dblclick | Se déclenche quand l'utilisateur double-clique sur une cellule. | row, column, cell, event |
+| row-click | Se déclenche quand l'utilisateur clique sur une ligne. | row, column, event |
+| row-contextmenu | Se déclenche quand l'utilisateur fait un clic droit sur une ligne. | row, column, event |
+| row-dblclick | Se déclenche quand l'utilisateur double-clique sur une ligne. | row, column, event |
+| header-click | Se déclenche quand l'utilisateur clique sur une colonne du header. | column, event |
+| header-contextmenu | Se déclenche quand l'utilisateur fait un clic droit sur une colonne du header. | column, event |
+| sort-change | Se déclenche quand l'ordre de tri change. | { column, prop, order } |
+| filter-change | column's key. If you need to use the filter-change event, this attribute is mandatory to identify which column is being filtered. | filters |
+| current-change | Se déclenche quand la ligne sélectionnée change. | currentRow, oldCurrentRow |
+| header-dragend | Se déclenche après un changement de taille de colonne en déplaçant la ligne verticale du header. | newWidth, oldWidth, column, event |
+| expand-change  | triggers when user expands or collapses a row (for expandable table, second param is expandedRows; for tree Table, second param is expanded) | row, (expandedRows \| expanded) |
+
+### Méthodes de Table
+
+| Méthode | Description | Paramètres |
+|------|--------|-------|
+| clearSelection | Dans les tables avec sélection multiple, efface la sélection. | — |
+| toggleRowSelection | Dans les tables avec sélection multiple, change la sélection d'une ligne. Grâce au deuxième paramètre vous pouvez directement décider si cette ligne est sélectionnée. | row, selected |
+| toggleAllSelection | Utilisé dans les tables à sélection multiples, sélectionne toutes les lignes. | - |
+| toggleRowExpansion | used in expandable Table or tree Table, toggle if a certain row is expanded. With the second parameter, you can directly set if this row is expanded or collapsed | row, expanded |
+| setCurrentRow | Dans les tables à sélection simple, sélectionne une ligne. Sans paramètre la sélection est effacé. | row |
+| clearSort | Efface le tri. | — |
+| clearFilter | Efface les filtres des colonnes dont les `columnKey` sont passées. Si aucun paramètre, efface tout les filtres. | columnKeys |
+| doLayout | Rafraîchi le layout de la table. Quand la visibilité de la table change vous aurez peut-être besoin de cette méthode pour corriger le layout. | — |
+| sort | Tri la table manuellement. La proriété `prop` détermine la colonne, `order` détermine l'ordre de tri. | prop: string, order: string |
+
+### Slots de Table
+
+| Nom | Description |
+|------|--------|
+| append | Contenu à insérer après la dernière ligne. Vous aurez sans doute besoin de ce slot si vous implémentez un scroll infini. Il sera affiché au-dessus de la ligne de somme s'il y en a une. |
+
+### Attributs de Table-column
+
+| Attribut      | Description          | Type      | Valeurs acceptées       | Défaut  |
+|---------- |-------------- |---------- |--------------------------------  |-------- |
+| type | Type de la colonne. Si mis à `selection`, la colonne affichera des checkbox. Si mis à `index`, la colonne affichera l'indice de la ligne (début à 1). Si mis à `expand`, affichera l'icône d'extension.  | string | selection/index/expand | — |
+| index | Personnalise les indices de chaque ligne, marche avec les colonnes `type=index`. | number, Function(index) | - | - |
+| label | Label de la colonne. | string | — | — |
+| column-key | La clé de la colonne. Si vous avez besoin d'utiliser l'évènement filter-change, vous aurez besoin de cet attribut pour savoir quelle colonne est filtrée. | string | string | — | — |
+| prop | Nom du champ de l'objet de données. Alias: `property`. | string | — | — |
+| width | Largeur de la colonne. | string | — | — |
+| min-width | Largeur minimale de la colonne. Les colonnes avec `width` ont une largeur fixe, alors que celles avec `min-width` ont une largeur proportionnellement distribuée. | string | — | — |
+| fixed | Si la colonne est fixée à droite ou à gauche. Fixée à gauche si `true`. | string/boolean | true/left/right | — |
+| render-header | Fonction de rendu pour le header de cette colonne. | Function(h, { column, $index }) | — | — |
+| sortable | Si la colonne peut être triée. Tri dynamique possible en mettant à 'custom' et en écoutant l'évènement `sort-change` de Table. | boolean, string | true, false, custom | false |
+| sort-method | Méthode de tri, marche quand `sortable` est `true`. Doit retourner un nombre, tout comme Array.sort. | Function(a, b) | — | — |
+| sort-by | Détermine par quelle propriété effectuer le tri, marche quand `sortable` est `true` et `sort-method` est `undefined`. Si c'est un Array, sera triée par la propriété suivante si la précédente est équivalente. | Function(row, index)/String/Array | — | — |
+| sort-orders | Liste des stratégies de tri, marche quand `sortable` est `true`. Accepte un tableau. Lorsque l'utilisateur clique plusieurs fois sur le header, la colonne est triée dans l'ordre des stratégies indiquée. | array | Les élements du tableau doivent être parmi: `ascending`, `descending` et `null` (restaure l'état originel du tableau). | ['ascending', 'descending', null] |
+| resizable | Si la largeur de la colonne peut être modifiée, marche quand `border` de `el-table` est `true`. | boolean | — | false |
+| formatter | Fonction pour formater le contenu des cellules. | Function(row, column, cellValue, index) | — | — |
+| show-overflow-tooltip | Si du contenu trop long doit être caché et affiché dans une tooltip quand la souris passe sur la cellule. | boolean | — | false |
+| align | Alignement. | string | left/center/right | left |
+| header-align | Alignement du header. Si omis, la valeur du `align` ci-dessus est appliqué. | String | left/center/right | — |
+| class-name | Classe des cellules dans cette colonne. | string | — | — |
+| label-class-name | Classe du label de cette colonne. | string | — | — |
+| selectable | Détermine si certaines colonnes peuvent être sélectionnées, marche quand `type` est 'selection'. | Function(row, index) | — | — |
+| reserve-selection | Si la sélection doit être conservée après rafraîchissement, marche quand `type` est 'selection'. Notez que `row-key` est requis. | boolean | — | false |
+| filters | Un tableau d'options de filtrage. Pour chaque élément, `text` et `value` sont requis. | Array[{ text, value }] | — | — |
+| filter-placement | Emplacement du menu du filtre. | String | Voir `placement` de Tooltip. | — |
+| filter-multiple | Si le filtrage supporte plusieurs options. | Boolean | — | true |
+| filter-method | Méthode de filtrage. Si `filter-multiple` est activé, cette méthode sera appelé plusieurs fois pour chaque ligne, qui sera affichée si dès qu'un `true` sera renvoyé. | Function(value, row, column) | — | — |
+| filtered-value | Valeur de filtre pour les colonnes sélectionnées, peut être utile quand le header est rendu avec `render-header`. | Array | — | — |
+
+### Slot de Table-column
+
+| Nom | Description |
+|------|--------|
+| — | Contenu personnalisé pour les colonnes. Les paramètres sont { row, column, $index } |
+| header | Contenu personnalisé pour le header. Le paramètre de scope est { column, $index } |
diff --git a/examples/docs/fr-FR/tabs-dotted.md b/examples/docs/fr-FR/tabs-dotted.md
new file mode 100644
index 00000000000..b8837a53bc9
--- /dev/null
+++ b/examples/docs/fr-FR/tabs-dotted.md
@@ -0,0 +1 @@
+## TabsDotted
diff --git a/examples/docs/fr-FR/tabs.md b/examples/docs/fr-FR/tabs.md
new file mode 100644
index 00000000000..25477ec81dc
--- /dev/null
+++ b/examples/docs/fr-FR/tabs.md
@@ -0,0 +1,308 @@
+## Tabs
+
+Divise des collections de données de types différents, mais reliées entre elles par un contexte ou un type global.
+
+### Usage
+
+Onglets basiques.
+
+:::demo Tabs fournit un outil de sélection des onglets. Par défaut, le premier onglet est sélectionné et actif mais vous pouvez activer n'importe lequel en réglant l'attribut `value`.
+
+```html
+<template>
+  <el-tabs v-model="activeName" @tab-click="handleClick">
+    <el-tab-pane label="User" name="first">Utilisateur</el-tab-pane>
+    <el-tab-pane label="Config" name="second">Config</el-tab-pane>
+    <el-tab-pane label="Role" name="third">Rôle</el-tab-pane>
+    <el-tab-pane label="Task" name="fourth">Tâche</el-tab-pane>
+  </el-tabs>
+</template>
+<script>
+  export default {
+    data() {
+      return {
+        activeName: 'first'
+      };
+    },
+    methods: {
+      handleClick(tab, event) {
+        console.log(tab, event);
+      }
+    }
+  };
+</script>
+```
+:::
+
+### Style carte
+
+Les onglets peuvent être stylisés comme des cartes.
+
+:::demo Mettez `type` à `card` pour avoir des onglets avec un style de carte.
+
+```html
+<template>
+  <el-tabs type="card" @tab-click="handleClick">
+    <el-tab-pane label="User">Utilisateur</el-tab-pane>
+    <el-tab-pane label="Config">Config</el-tab-pane>
+    <el-tab-pane label="Role">Rôle</el-tab-pane>
+    <el-tab-pane label="Task">Tâche</el-tab-pane>
+  </el-tabs>
+</template>
+<script>
+  export default {
+    data() {
+      return {
+        activeName: 'first'
+      };
+    },
+    methods: {
+      handleClick(tab, event) {
+        console.log(tab, event);
+      }
+    }
+  };
+</script>
+```
+:::
+
+### Style carte avec bordure
+
+Onglets avec style de carte et bordure.
+
+:::demo Mettez `type` à `border-card`.
+
+```html
+<el-tabs type="border-card">
+  <el-tab-pane label="User">Utilisateur</el-tab-pane>
+  <el-tab-pane label="Config">Config</el-tab-pane>
+  <el-tab-pane label="Role">Rôle</el-tab-pane>
+  <el-tab-pane label="Task">Tâche</el-tab-pane>
+</el-tabs>
+```
+
+:::
+
+### Position des onglets
+
+Vous pouvez utiliser `tab-position` pour régler la position des onglets.
+
+:::demo Il y a quatre positions différentes: `tabPosition="left|right|top|bottom"`
+
+```html
+<template>
+  <el-radio-group v-model="tabPosition" style="margin-bottom: 30px;">
+    <el-radio-button label="top">En haut</el-radio-button>
+    <el-radio-button label="right">À droite</el-radio-button>
+    <el-radio-button label="bottom">En bas</el-radio-button>
+    <el-radio-button label="left">À gauche</el-radio-button>
+  </el-radio-group>
+
+  <el-tabs :tab-position="tabPosition" style="height: 200px;">
+    <el-tab-pane label="User">Utilisateur</el-tab-pane>
+    <el-tab-pane label="Config">Config</el-tab-pane>
+    <el-tab-pane label="Role">Rôle</el-tab-pane>
+    <el-tab-pane label="Task">Tâche</el-tab-pane>
+  </el-tabs>
+</template>
+<script>
+  export default {
+    data() {
+      return {
+        tabPosition: 'left'
+      };
+    }
+  };
+</script>
+```
+:::
+
+### Onglet personnalisé
+
+Vous pouvez utiliser un slot pour customiser le label d'un onglet.
+
+:::demo
+```html
+<el-tabs type="border-card">
+  <el-tab-pane>
+    <span slot="label"><i class="el-icon-date"></i> Route</span>
+    Route
+  </el-tab-pane>
+  <el-tab-pane label="Config">Config</el-tab-pane>
+  <el-tab-pane label="Role">Rôle</el-tab-pane>
+  <el-tab-pane label="Task">Tâche</el-tab-pane>
+</el-tabs>
+```
+:::
+
+### Ajouter et supprimer des onglets
+
+Seuls les onglets de type carte supportent l'ajout et la suppression.
+
+:::demo
+```html
+<el-tabs v-model="editableTabsValue" type="card" editable @edit="handleTabsEdit">
+  <el-tab-pane
+    v-for="(item, index) in editableTabs"
+    :key="item.name"
+    :label="item.title"
+    :name="item.name"
+  >
+    {{item.content}}
+  </el-tab-pane>
+</el-tabs>
+<script>
+  export default {
+    data() {
+      return {
+        editableTabsValue: '2',
+        editableTabs: [{
+          title: 'Onglet 1',
+          name: '1',
+          content: 'Contenu de l\'onglet 1'
+        }, {
+          title: 'Onglet 2',
+          name: '2',
+          content: 'Contenu de l\'onglet 2'
+        }],
+        tabIndex: 2
+      }
+    },
+    methods: {
+      handleTabsEdit(targetName, action) {
+        if (action === 'add') {
+          let newTabName = ++this.tabIndex + '';
+          this.editableTabs.push({
+            title: 'Nouvel onglet',
+            name: newTabName,
+            content: 'Contenu du nouvel onglet'
+          });
+          this.editableTabsValue = newTabName;
+        }
+        if (action === 'remove') {
+          let tabs = this.editableTabs;
+          let activeName = this.editableTabsValue;
+          if (activeName === targetName) {
+            tabs.forEach((tab, index) => {
+              if (tab.name === targetName) {
+                let nextTab = tabs[index + 1] || tabs[index - 1];
+                if (nextTab) {
+                  activeName = nextTab.name;
+                }
+              }
+            });
+          }
+
+          this.editableTabsValue = activeName;
+          this.editableTabs = tabs.filter(tab => tab.name !== targetName);
+        }
+      }
+    }
+  }
+</script>
+```
+:::
+
+### Personnaliser le bouton d'ajout d'onglet
+
+:::demo
+```html
+<div style="margin-bottom: 20px;">
+  <el-button
+    size="small"
+    @click="addTab(editableTabsValue)"
+  >
+    Ajouter un onglet
+  </el-button>
+</div>
+<el-tabs v-model="editableTabsValue" type="card" closable @tab-remove="removeTab">
+  <el-tab-pane
+    v-for="(item, index) in editableTabs"
+    :key="item.name"
+    :label="item.title"
+    :name="item.name"
+  >
+    {{item.content}}
+  </el-tab-pane>
+</el-tabs>
+<script>
+  export default {
+    data() {
+      return {
+        editableTabsValue: '2',
+        editableTabs: [{
+          title: 'Onglet 1',
+          name: '1',
+          content: 'Contenu de l\'onglet 1'
+        }, {
+          title: 'Onglet 2',
+          name: '2',
+          content: 'Contenu de l\'onglet 2'
+        }],
+        tabIndex: 2
+      }
+    },
+    methods: {
+      addTab(targetName) {
+        let newTabName = ++this.tabIndex + '';
+        this.editableTabs.push({
+          title: 'Nouvel onglet',
+          name: newTabName,
+          content: 'Contenu du nouvel onglet'
+        });
+        this.editableTabsValue = newTabName;
+      },
+      removeTab(targetName) {
+        let tabs = this.editableTabs;
+        let activeName = this.editableTabsValue;
+        if (activeName === targetName) {
+          tabs.forEach((tab, index) => {
+            if (tab.name === targetName) {
+              let nextTab = tabs[index + 1] || tabs[index - 1];
+              if (nextTab) {
+                activeName = nextTab.name;
+              }
+            }
+          });
+        }
+
+        this.editableTabsValue = activeName;
+        this.editableTabs = tabs.filter(tab => tab.name !== targetName);
+      }
+    }
+  }
+</script>
+```
+:::
+
+### Attributs de Tabs
+
+| Attribut      | Description          | Type      | Valeurs acceptées       | Défaut  |
+|---------- |-------- |---------- |-------------  |-------- |
+| value / v-model | La valeur liée, nom de l'onglet sélectionné. | string   |  —  | Nom du premier onglet. |
+| type     | Type de l'onglet. | string   | card/border-card  |     —    |
+| closable  | Si des onglets peuvent être supprimés. | boolean   | — |  false  |
+| addable  | Si des onglets peuvent être ajoutés. | boolean   | — |  false  |
+| editable  | Si des onglets peuvent être ajoutés et supprimés. | boolean   | — |  false  |
+| tab-position  | Position des onglets. | string   |  top/right/bottom/left  |  top |
+| stretch  | Si la largeur des onglets s'adapte au conteneur. | boolean   |  -  |  false |
+| before-leave | Fonction de hook avant de changer d'onglet. Si `false` est retourné ou qu'une `Promise` retournée et rejetée, le changement sera annulé. | Function(activeName, oldActiveName) | — | — |
+
+### Évènements de Tabs
+
+| Nom | Description | Paramètres |
+|---------- |-------- |---------- |
+| tab-click  | Se déclenche quand on clique sur un onglet. | clicked tab |
+| tab-remove  | Se déclenche quand on clique sur le bouton de suppression des onglets. | name of the removed tab |
+| tab-add  | Se déclenche quand on clique sur le bouton d'ajout des onglets.  | — |
+| edit  | Se déclenche quand on clique sur les boutons d'ajout ou de suppression des onglets. | (targetName, action) |
+
+### Attributs de Tab-pane
+
+| Attribut      | Description          | Type      | Valeurs acceptées       | Défaut  |
+|---------- |-------- |---------- |-------------  |-------- |
+| label     | Titre de l'onglet. | string   | — |    —     |
+| disabled | Si l'onglet est désactivé. | boolean | — | false |
+| name      | Identifiant correspondant au nom des onglets, utilisé par Tabs pour savoir quel est l'onglet actif. | string | — | Numéro de l'onglet dans l'ordre d'apparition, e.g. le premier est '1'. |
+| closable  | Si l'onglet est supprimable. | boolean   | — |  false  |
+| lazy  | Si le contenu de l'onglet bénéficie du lazy-loading.  | boolean   | — |  false  |
diff --git a/examples/docs/fr-FR/tag.md b/examples/docs/fr-FR/tag.md
new file mode 100644
index 00000000000..0047c2311c9
--- /dev/null
+++ b/examples/docs/fr-FR/tag.md
@@ -0,0 +1,204 @@
+## Tag
+
+Les tags sont utiles sont marquer certaines données afin d'ajouter des informations et de les retrouver plus facilement.
+
+### Usage
+
+:::demo Utilisez l'attribut `type` pour définir le type de tag. De plus, l'attribut `color` détermine la couleur de fond.
+
+```html
+<el-tag>Tag 1</el-tag>
+<el-tag type="success">Tag 2</el-tag>
+<el-tag type="info">Tag 3</el-tag>
+<el-tag type="warning">Tag 4</el-tag>
+<el-tag type="danger">Tag 5</el-tag>
+```
+:::
+
+### Supprimer des tags
+
+:::demo L'attribut `closable` détermine si un tag est supprimable grâce à un `Boolean`. Par défaut la suppression bénéficie d'un animation de fading. Utilisez `disable-transitions` si vous ne souhaitez pas d'animations en utilisant un `Boolean` à `true`. L'évènement `close` se déclenche quand un tag est supprimé.
+
+```html
+<el-tag
+  v-for="tag in tags"
+  :key="tag.name"
+  closable
+  :type="tag.type">
+  {{tag.name}}
+</el-tag>
+
+<script>
+  export default {
+    data() {
+      return {
+        tags: [
+          { name: 'Tag 1', type: '' },
+          { name: 'Tag 2', type: 'success' },
+          { name: 'Tag 3', type: 'info' },
+          { name: 'Tag 4', type: 'warning' },
+          { name: 'Tag 5', type: 'danger' }
+        ]
+      };
+    }
+  }
+</script>
+```
+:::
+
+### Édition dynamique
+
+Vous pouvez utiliser l'évènement `close` pour ajouter et supprimer des tags dynamiquement.
+
+:::demo
+```html
+<el-tag
+  :key="tag"
+  v-for="tag in dynamicTags"
+  closable
+  :disable-transitions="false"
+  @close="handleClose(tag)">
+  {{tag}}
+</el-tag>
+<el-input
+  class="input-new-tag"
+  v-if="inputVisible"
+  v-model="inputValue"
+  ref="saveTagInput"
+  size="mini"
+  @keyup.enter.native="handleInputConfirm"
+  @blur="handleInputConfirm"
+>
+</el-input>
+<el-button v-else class="button-new-tag" size="small" @click="showInput">+ Nouveau Tag</el-button>
+
+<style>
+  .el-tag + .el-tag {
+    margin-left: 10px;
+  }
+  .button-new-tag {
+    margin-left: 10px;
+    height: 32px;
+    line-height: 30px;
+    padding-top: 0;
+    padding-bottom: 0;
+  }
+  .input-new-tag {
+    width: 90px;
+    margin-left: 10px;
+    vertical-align: bottom;
+  }
+</style>
+
+<script>
+  export default {
+    data() {
+      return {
+        dynamicTags: ['Tag 1', 'Tag 2', 'Tag 3'],
+        inputVisible: false,
+        inputValue: ''
+      };
+    },
+    methods: {
+      handleClose(tag) {
+        this.dynamicTags.splice(this.dynamicTags.indexOf(tag), 1);
+      },
+
+      showInput() {
+        this.inputVisible = true;
+        this.$nextTick(_ => {
+          this.$refs.saveTagInput.$refs.input.focus();
+        });
+      },
+
+      handleInputConfirm() {
+        let inputValue = this.inputValue;
+        if (inputValue) {
+          this.dynamicTags.push(inputValue);
+        }
+        this.inputVisible = false;
+        this.inputValue = '';
+      }
+    }
+  }
+</script>
+```
+:::
+
+### Tailles
+
+En plus de la taille par défaut, Tag fournit d'autres tailles pour vos composants.
+
+:::demo Utilisez `size` pour choisir une autre taille parmi `medium`, `small` ou `mini`.
+
+```html
+<el-tag>Défaut</el-tag>
+<el-tag size="medium">Medium</el-tag>
+<el-tag size="small">Small</el-tag>
+<el-tag size="mini">Mini</el-tag>
+```
+:::
+
+### Theme
+
+Les balises utilisent trois thèmes différents: `dark`, `light` et `plain`
+
+:::demo Utilisez `effect` pour changer. La valeur par défaut est `light`
+```html
+<div class="tag-group">
+  <span class="tag-group__title">Dark</span>
+  <el-tag
+    v-for="item in items"
+    :key="item.label"
+    :type="item.type"
+    effect="dark">
+    {{ item.label }}
+  </el-tag>
+</div>
+<div class="tag-group">
+  <span class="tag-group__title">Plain</span>
+  <el-tag
+    v-for="item in items"
+    :key="item.label"
+    :type="item.type"
+    effect="plain">
+    {{ item.label }}
+  </el-tag>
+</div>
+
+<script>
+  export default {
+    data() {
+      return {
+        items: [
+          { type: '', label: 'Tag 1' },
+          { type: 'success', label: 'Tag 2' },
+          { type: 'info', label: 'Tag 3' },
+          { type: 'danger', label: 'Tag 4' },
+          { type: 'warning', label: 'Tag 5' }
+        ]
+      }
+    }
+  }
+</script>
+```
+:::
+
+### Attributs
+
+| Attribut      | Description          | Type      | Valeurs acceptées       | Défaut  |
+|---------- |-------------- |---------- |--------------------------------  |-------- |
+| type | Type du tag. | string | success/info/warning/danger | — |
+| closable | Si le tag peut être supprimé. | boolean | — | false |
+| disable-transitions | Si les animations sont désactivées. | boolean | — | false |
+| hit | Si le tag à une bordure mise en valeur. | boolean | — | false |
+| color | Couleur de fond du tag. | string | — | — |
+| size | Taille du tag. | string | medium / small / mini | — |
+| effect | component theme | string | dark / light / plain | light |
+
+### Évènements
+
+| Nom | Description | Paramètres |
+|---------- |-------- |---------- |
+| click | Se déclenche quand le tag est cliqué. | — |
+| close | Se déclenche quand le tag est supprimé. | — |
diff --git a/examples/docs/fr-FR/time-picker.md b/examples/docs/fr-FR/time-picker.md
new file mode 100644
index 00000000000..6a8a3d03322
--- /dev/null
+++ b/examples/docs/fr-FR/time-picker.md
@@ -0,0 +1,203 @@
+## TimePicker
+
+Utiliser TimePicker pour sélectionner un horaire.
+
+### Sélection d'horaire fixe
+
+Vous pouvez fournir une liste d'horaires fixés pour que l'utilisateur en choisisse un.
+
+:::demo Utilisez `el-time-select` puis assignez un horaire de début, de fin et un pas grâce aux propriétés `start`, `end` et `step` de l'attribut `picker-options`.
+```html
+<el-time-select
+  v-model="value"
+  :picker-options="{
+    start: '08:30',
+    step: '00:15',
+    end: '18:30'
+  }"
+  placeholder="Choisissez un horaire">
+</el-time-select>
+
+<script>
+  export default {
+    data() {
+      return {
+        value: ''
+      };
+    }
+  }
+</script>
+```
+:::
+
+### Sélection d'horaire libre
+
+Vous pouvez aussi laisser l'utilisateur choisir librement un horaire.
+
+:::demo Utilisez `el-time-picker` puis l'attribut `picker-options` et sa propriété `selectableRange` pour déterminer la tranche horaire disponible. Par défaut, vous pouvez utiliser la molette de votre souris, ou les flèches directionnelles si l'attribut `arrow-control` est présent.
+
+```html
+<template>
+  <el-time-picker
+    v-model="value1"
+    :picker-options="{
+      selectableRange: '18:30:00 - 20:30:00'
+    }"
+    placeholder="Horaire libre">
+  </el-time-picker>
+  <el-time-picker
+    arrow-control
+    v-model="value2"
+    :picker-options="{
+      selectableRange: '18:30:00 - 20:30:00'
+    }"
+    placeholder="Horaire libre">
+  </el-time-picker>
+</template>
+
+<script>
+  export default {
+    data() {
+      return {
+        value1: new Date(2016, 9, 10, 18, 40),
+        value2: new Date(2016, 9, 10, 18, 40)
+      };
+    }
+  }
+</script>
+```
+:::
+
+### Intervalle de temps fixe
+
+Vous pouvez définir un intervalle de temps. Si l'horaire de début est sélectionné en premier, certains horaires de fins seront désactivés s'ils ont lieu avant l'horaire de début.
+
+:::demo
+```html
+<template>
+  <el-time-select
+    placeholder="Horaire de début"
+    v-model="startTime"
+    :picker-options="{
+      start: '08:30',
+      step: '00:15',
+      end: '18:30'
+    }">
+  </el-time-select>
+  <el-time-select
+    placeholder="Horaire de fin"
+    v-model="endTime"
+    :picker-options="{
+      start: '08:30',
+      step: '00:15',
+      end: '18:30',
+      minTime: startTime
+    }">
+  </el-time-select>
+</template>
+
+<script>
+  export default {
+    data() {
+      return {
+        startTime: '',
+        endTime: ''
+      };
+    }
+  }
+</script>
+```
+:::
+
+### Intervalle de temps libre
+
+Vous pouvez également définir un intervalle libre.
+
+:::demo Ajoutez l'attribut `is-range`. L'attribut `arrow-control` est aussi supporté dans ce mode.
+```html
+<template>
+  <el-time-picker
+    is-range
+    v-model="value1"
+    range-separator="To"
+    start-placeholder="Horaire de début"
+    end-placeholder="Horaire de fin">
+  </el-time-picker>
+  <el-time-picker
+    is-range
+    arrow-control
+    v-model="value2"
+    range-separator="To"
+    start-placeholder="Horaire de début"
+    end-placeholder="Horaire de fin">
+  </el-time-picker>
+</template>
+
+<script>
+  export default {
+    data() {
+      return {
+        value1: [new Date(2016, 9, 10, 8, 40), new Date(2016, 9, 10, 9, 40)],
+        value2: [new Date(2016, 9, 10, 8, 40), new Date(2016, 9, 10, 9, 40)]
+      };
+    }
+  }
+</script>
+```
+:::
+
+### Attributs
+
+| Attribut      | Description          | Type      | Valeurs acceptées       | Défaut  |
+|---------- |-------------- |---------- |--------------------------------  |-------- |
+| value / v-model | La valeur liée. | date(TimePicker) / string(TimeSelect) | - | - |
+| readonly | Si TimePicker est en lecture seule. | boolean | — | false |
+| disabled | Si TimePicker est désactivé. | boolean | — | false |
+| editable | Si le champ d'input est éditable. | boolean | — | true |
+| clearable | Si un bouton d'effacement doit être affiché. | boolean | — | true |
+| size | Taille du champ. | string | medium / small / mini | — |
+| placeholder | Placeholder en mode non-intervalle. | string | — | — |
+| start-placeholder | Placeholder de l'horaire de début en mode intervalle. | string | — | — |
+| end-placeholder | Placeholder de l'horaire de fin en mode intervalle. | string | — | — |
+| is-range | Si le mode intervalle est activé, marche avec `<el-time-picker>`. | boolean | — | false |
+| arrow-control | Si les flèches directionnelles peuvent être utilisées, marche avec `<el-time-picker>`. | boolean | — | false |
+| align | Alignement. | left / center / right | left |
+| popper-class | Classe du menu du TimePicker. | string | — | — |
+| picker-options | Options additionnelles, voir la table ci-dessous. | object | — | {} |
+| range-separator | Séparateur d'intervalle. | string | - | '-' |
+| default-value | Optionnel, date d'aujourd'hui par défaut. | `Date` pour le TimePicker, `string` pour le TimeSelect | Toute valeur acceptée par `new Date()` pour le TimePicker, une valeur sélectionnable pour TimeSelect. | — |
+| value-format | Optionnel, uniquement pour TimePicker, format de la valeur. Si non spécifié, la valeur sera un objet `Date`. | string | Voir [date formats](#/en-US/component/date-picker#date-formats) | — |
+| name | Attribut `name` natif de l'input. | string | — | — |
+| prefix-icon | Classe de l'icône de préfixe. | string | — | el-icon-time |
+| clear-icon | Classe de l'icône d'effacement. | string | — | el-icon-circle-close |
+
+### Options de TimeSelect
+
+| Attribut      | Description          | Type      | Valeurs acceptées       | Défaut  |
+|---------- |-------------- |---------- |--------------------------------  |-------- |
+| start | Horaire de début. | string | — | 09:00 |
+| end | Horaire de fin. | string | — | 18:00 |
+| step | Intervalle entre les horaires. | string | — | 00:30 |
+| minTime | Horaire minimum, n'importe quel horaire avant celui-ci sera désactivé. | string | — | 00:00 |
+| maxTime | Horaire maximum, n'importe quel horaire après celui-ci sera désactivé. | string | — | — |
+
+### Options de TimePicker
+
+| Attribut      | Description          | Type      | Valeurs acceptées       | Défaut  |
+|---------- |-------------- |---------- |--------------------------------  |-------- |
+| selectableRange | Intervalle de temps disponible, e.g.`'18:30:00 - 20:30:00'` ou ` ['09:30:00 - 12:00:00', '14:30:00 - 18:30:00']` | string / array | — | — |
+| format | Format du sélecteur. | string | hour `HH`, minute `mm`, second `ss`, AM/PM `A` | HH:mm:ss |
+
+### Évènements
+
+| Nom | Description | Paramètres |
+|---------|--------|---------|
+| change | Se déclenche quand l'utilisateur confirme la valeur. | La valeur confirmée. |
+| blur | Se déclenche quand le composant perd le focus. | L'instance du composant. |
+| focus | Se déclenche quand le composant a le focus. | L'instance du composant. |
+
+### Méthodes
+
+| Méthode | Description | Paramètres |
+| ---- | ---- | ---- |
+| focus | Met le focus sur le composant. | - |
diff --git a/examples/docs/fr-FR/timeline.md b/examples/docs/fr-FR/timeline.md
new file mode 100644
index 00000000000..9193ea72aca
--- /dev/null
+++ b/examples/docs/fr-FR/timeline.md
@@ -0,0 +1,156 @@
+## Timeline
+
+Affiche une suite d'évènements dans un ordre chronologique.
+
+### Usage
+
+La timeline peut être divisée en plusieurs activités en ordre ascendant ou descendant. Les timestamps sont des caractéristiques importantes qui les distinguent des autres composants. Notez la différence avec Steps.
+
+:::demo
+```html
+<div class="block">
+  <div class="radio">
+    Order:
+    <el-radio-group v-model="reverse">
+      <el-radio :label="true">Descendant</el-radio>
+      <el-radio :label="false">Ascendant</el-radio>
+    </el-radio-group>
+  </div>
+
+  <el-timeline :reverse="reverse">
+    <el-timeline-item
+      v-for="(activity, index) in activities"
+      :key="index"
+      :timestamp="activity.timestamp">
+      {{activity.content}}
+    </el-timeline-item>
+  </el-timeline>
+</div>
+
+<script>
+  export default {
+    data() {
+      return {
+        reverse: true,
+        activities: [{
+          content: 'Début de l\'évènement',
+          timestamp: '2018-04-15'
+        }, {
+          content: 'Approuvé',
+          timestamp: '2018-04-13'
+        }, {
+          content: 'Succès',
+          timestamp: '2018-04-11'
+        }]
+      };
+    }
+  };
+</script>
+```
+:::
+
+### Noeud personnalisé
+
+Vous pouvez personnaliser la taille, la couleur et les icônes de chaque Noeud.
+
+:::demo
+```html
+<div class="block">
+  <el-timeline>
+    <el-timeline-item
+      v-for="(activity, index) in activities"
+      :key="index"
+      :icon="activity.icon"
+      :type="activity.type"
+      :color="activity.color"
+      :size="activity.size"
+      :timestamp="activity.timestamp">
+      {{activity.content}}
+    </el-timeline-item>
+  </el-timeline>
+</div>
+
+<script>
+  export default {
+    data() {
+      return {
+        activities: [{
+          content: 'Icône',
+          timestamp: '2018-04-12 20:46',
+          size: 'large',
+          type: 'primary',
+          icon: 'el-icon-more'
+        }, {
+          content: 'Couleur',
+          timestamp: '2018-04-03 20:46',
+          color: '#0bbd87'
+        }, {
+          content: 'Taille',
+          timestamp: '2018-04-03 20:46',
+          size: 'large'
+        }, {
+          content: 'Défaut',
+          timestamp: '2018-04-03 20:46'
+        }]
+      };
+    }
+  };
+</script>
+```
+:::
+
+### Timestamp personnalisé
+
+Le timestamp peut être placé au-dessus du contenu lorsque celui-ci est trop haut.
+
+:::demo
+```html
+<div class="block">
+  <el-timeline>
+    <el-timeline-item timestamp="2018/4/12" placement="top">
+      <el-card>
+        <h4>Mise à jour du template GitHub</h4>
+        <p>Commit de Tom le 2018/4/12 20:46</p>
+      </el-card>
+    </el-timeline-item>
+    <el-timeline-item timestamp="2018/4/3" placement="top">
+      <el-card>
+        <h4>Mise à jour du template GitHub</h4>
+        <p>Commit de Tom le 2018/4/3 20:46</p>
+      </el-card>
+    </el-timeline-item>
+    <el-timeline-item timestamp="2018/4/2" placement="top">
+      <el-card>
+        <h4>Mise à jour du template GitHub</h4>
+        <p>Commit de Tom le 2018/4/2 20:46</p>
+      </el-card>
+    </el-timeline-item>
+  </el-timeline>
+</div>
+```
+:::
+
+### Attributs de Timeline
+
+| Attribut      | Description    | Type      | Valeurs acceptées | Défaut   |
+|---------- |-------- |---------- |-------------  |-------- |
+| reverse | Si l'ordre chronologique est ascendant ou descendant, le défaut étant ascendant. | boolean | — | false |
+
+### Attribut de Timeline-item
+
+| Attribut      | Description    | Type      | Valeurs acceptées | Défaut   |
+|---------- |-------- |---------- |-------------  |-------- |
+| timestamp     | Le contenu du timestamp. | string  | - | — |
+| hide-timestamp  | Si le timestamp doit être affiché. | boolean | — | false |
+| placement | La position du timestamp. | string | top / bottom | bottom |
+| type | Le type de noeud. | string | primary / success / warning / danger / info | - |
+| color | La couleur de fond du noeud. | string | hsl / hsv / hex / rgb | - |
+| size | La taille du noeud | string | normal / large | normal |
+| icon | Le nom de classe de l'icône. | string | — | - |
+
+### Slots de Timeline-Item
+
+| Nom | Description |
+|------|--------|
+| — | Contenu personnalisé pour le timeline-item. |
+| dot | Noeud personnalisé. |
diff --git a/examples/docs/fr-FR/tooltip.md b/examples/docs/fr-FR/tooltip.md
new file mode 100644
index 00000000000..b28343a5e16
--- /dev/null
+++ b/examples/docs/fr-FR/tooltip.md
@@ -0,0 +1,197 @@
+## Tooltip
+
+Permet d'afficher des informations au passage de la souris sur un élément.
+
+### Usage
+
+Tooltip a 9 emplacements.
+
+:::demo L'attribut `content` détermine le contenu à afficher. L'attribut `placement` détermine la position du tooltip. Sa valeur est sous la forme `[orientation]-[alignment]` avec quatre orientations `top`, `left`, `right`, `bottom` et trois alignements `start`, `end`, `null`, le défaut étant `null`. Par exemple, `placement="left-end"` affichera la tooltip sur la gauche de l'élément et le bas de la tooltip sera aligné avec le bas de l'élément.
+```html
+<div class="box">
+  <div class="top">
+    <el-tooltip class="item" effect="dark" content="Top Left prompts info" placement="top-start">
+      <el-button>top-start</el-button>
+    </el-tooltip>
+    <el-tooltip class="item" effect="dark" content="Top Center prompts info" placement="top">
+      <el-button>top</el-button>
+    </el-tooltip>
+    <el-tooltip class="item" effect="dark" content="Top Right prompts info" placement="top-end">
+      <el-button>top-end</el-button>
+    </el-tooltip>
+  </div>
+  <div class="left">
+    <el-tooltip class="item" effect="dark" content="Left Top prompts info" placement="left-start">
+      <el-button>left-start</el-button>
+    </el-tooltip>
+    <el-tooltip class="item" effect="dark" content="Left Center prompts info" placement="left">
+      <el-button>left</el-button>
+    </el-tooltip>
+    <el-tooltip class="item" effect="dark" content="Left Bottom prompts info" placement="left-end">
+      <el-button>left-end</el-button>
+    </el-tooltip>
+  </div>
+
+  <div class="right">
+    <el-tooltip class="item" effect="dark" content="Right Top prompts info" placement="right-start">
+      <el-button>right-start</el-button>
+    </el-tooltip>
+    <el-tooltip class="item" effect="dark" content="Right Center prompts info" placement="right">
+      <el-button>right</el-button>
+    </el-tooltip>
+    <el-tooltip class="item" effect="dark" content="Right Bottom prompts info" placement="right-end">
+      <el-button>right-end</el-button>
+    </el-tooltip>
+  </div>
+  <div class="bottom">
+    <el-tooltip class="item" effect="dark" content="Bottom Left prompts info" placement="bottom-start">
+      <el-button>bottom-start</el-button>
+    </el-tooltip>
+    <el-tooltip class="item" effect="dark" content="Bottom Center prompts info" placement="bottom">
+      <el-button>bottom</el-button>
+    </el-tooltip>
+    <el-tooltip class="item" effect="dark" content="Bottom Right prompts info" placement="bottom-end">
+      <el-button>bottom-end</el-button>
+    </el-tooltip>
+  </div>
+</div>
+
+<style>
+  .box {
+    width: 400px;
+
+    .top {
+      text-align: center;
+    }
+
+    .left {
+      float: left;
+      width: 110px;
+    }
+
+    .right {
+      float: right;
+      width: 110px;
+    }
+
+    .bottom {
+      clear: both;
+      text-align: center;
+    }
+
+    .item {
+      margin: 4px;
+    }
+
+    .left .el-tooltip__popper,
+    .right .el-tooltip__popper {
+      padding: 8px 10px;
+    }
+
+    .el-button {
+      width: 110px;
+    }
+  }
+</style>
+```
+:::
+
+
+### Thèmes
+
+Tooltip a deux thèmes: `dark` et `light`。
+
+:::demo Utilisez `effect` pour modifier le thème, le défaut étant `dark`.
+```html
+<el-tooltip content="Top center" placement="top">
+  <el-button>Dark</el-button>
+</el-tooltip>
+<el-tooltip content="Bottom center" placement="bottom" effect="light">
+  <el-button>Light</el-button>
+</el-tooltip>
+```
+:::
+
+### Plus de contenu
+
+Vous pouvez afficher plus de lignes et formater leur contenu.
+
+:::demo Utiliser un slot nommé `content` au lieu de l'attribut.
+```html
+<el-tooltip placement="top">
+  <div slot="content">Multiples lignes<br/>Seconde ligne</div>
+  <el-button>Top center</el-button>
+</el-tooltip>
+```
+:::
+
+### Usage avancé
+
+Vous pouvez utiliser d'autres attributs pour un usage plus poussé:
+
+`transition` permet de définir l'animation d'apparition et de disparition du tooltip, le défaut étant el-fade-in-linear.
+
+`disabled` permet de désactiver le tooltip. Mettez-le simplement à `true`.
+
+En réalité, Tooltip est une extension de [Vue-popper](https://github.com/element-component/vue-popper), vous pouvez donc utiliser n'importe quel attribut de Vue-popper.
+
+:::demo
+```html
+<template>
+  <el-tooltip :disabled="disabled" content="Cliquez pour désactiver le tooltip" placement="bottom" effect="light">
+    <el-button @click="disabled = !disabled">Cliquez pour {{disabled ? 'activer' : 'désactiver'}} le tooltip</el-button>
+  </el-tooltip>
+</template>
+
+<script>
+  export default {
+    data() {
+      return {
+        disabled: false
+      };
+    }
+  };
+</script>
+
+<style>
+  .slide-fade-enter-active {
+    transition: all .3s ease;
+  }
+  .slide-fade-leave-active {
+    transition: all .3s cubic-bezier(1.0, 0.5, 0.8, 1.0);
+  }
+  .slide-fade-enter, .expand-fade-leave-active {
+    margin-left: 20px;
+    opacity: 0;
+  }
+</style>
+```
+:::
+
+
+:::tip
+Le composant `router-link` n'est pas supporté par tooltip, utilisez plutôt `vm.$router.push`.
+
+Les éléments de formulaire désactivés ne sont pas supportés par Tooltip, plus d'informations sur [MDN](https://developer.mozilla.org/en-US/docs/Web/Events/mouseenter). Vous aurez besoin de mettre ces éléments dans un conteneur pour que cela fonctionne.
+:::
+
+
+### Attributs
+
+| Attribut      | Description          | Type      | Valeurs acceptées       | Défaut  |
+|----------------|---------|-----------|-------------|--------|
+| effect | Thème du Tooltip.  | string   | dark/light  | dark  |
+| content | Contenu à afficher, écrasé par `slot#content`. | String   | — | — |
+| placement | Position du Tooltip. | string |  top/top-start/top-end/bottom/bottom-start/bottom-end/left/left-start/left-end/right/right-start/right-end |  bottom |
+| value / v-model | Visibilité du Tooltip. | boolean | — |  false |
+| disabled | Si le Tooltip est désactivé. | boolean | — |  false |
+| offset | Décalage du Tooltip. | number | — |  0 |
+| transition | Animation de transition. | string | — | el-fade-in-linear |
+| visible-arrow | Si une flèche doit être affichée. Pour plus d'information, voir [Vue-popper](https://github.com/element-component/vue-popper). | boolean | — | true |
+| popper-options | Paramètres [popper.js](https://popper.js.org/documentation.html). | Object | Se référer à  [popper.js](https://popper.js.org/documentation.html). | `{ boundariesElement: 'body', gpuAcceleration: false }` |
+| open-delay | Délai avant l'apparition en millisecondes. | number | — | 0 |
+| manual | Si le contrôle du Tooltip doit être manuel. `mouseenter` et `mouseleave` n'auront pas d'effet si `true`. | boolean | — | false |
+| popper-class | Classe du popper de Tooltip. | string | — | — |
+| enterable | Si la souris peut entrer dans la Tooltip. | Boolean | — | true |
+| hide-after | Délai avant disparition. | number | — | 0 |
+| tabindex   | [tabindex](https://developer.mozilla.org/fr/docs/Web/HTML/Attributs_universels/tabindex) de Tooltip. | number | — | 0 |
diff --git a/examples/docs/fr-FR/transfer.md b/examples/docs/fr-FR/transfer.md
new file mode 100644
index 00000000000..5a3ba73b5aa
--- /dev/null
+++ b/examples/docs/fr-FR/transfer.md
@@ -0,0 +1,260 @@
+## Transfer
+
+Permet de transférer des options d'une liste à une autre de manière ergonomique.
+
+### Usage
+:::demo Les données sont passée via l'attribut `data`. Ce doit être un tableau d'objets, chaque objet ayant les propriétés suivantes: `key` étant l'identifiant de l'objet, `label` étant le texte à afficher et `disabled` indiquant si l'objet est désactivé. Ces objets sont synchronisés avec `v-model`, sa valeur étant un tableau d'identifiants des objets. Si vous ne souhaitez pas avoir une liste vide par défaut, vous pouvez donc initialiser `v-model` avec un tableau.
+```html
+<template>
+  <el-transfer
+    v-model="value"
+    :data="data">
+  </el-transfer>
+</template>
+
+<script>
+  export default {
+    data() {
+      const generateData = _ => {
+        const data = [];
+        for (let i = 1; i <= 15; i++) {
+          data.push({
+            key: i,
+            label: `Option ${ i }`,
+            disabled: i % 4 === 0
+          });
+        }
+        return data;
+      };
+      return {
+        data: generateData(),
+        value: [1, 4]
+      };
+    }
+  };
+</script>
+```
+:::
+
+### Filtrable
+
+Vous pouvez filtrer les options.
+
+:::demo Ajoutez l'attribut `filterable` activer le filtrage. Par défaut, si la propriété `label` de l'objet contient le mot-clé, il sera inclus dans les résultats. Vous pouvez aussi implémenter votre propre filtre grâce à `filter-method`. Cette fonction est lancée à chaque changement de mot-clé. Si elle retourne `true` l'objet en question sera dans les résultats.
+```html
+<template>
+  <el-transfer
+    filterable
+    :filter-method="filterMethod"
+    filter-placeholder="State Abbreviations"
+    v-model="value"
+    :data="data">
+  </el-transfer>
+</template>
+
+<script>
+  export default {
+    data() {
+      const generateData = _ => {
+        const data = [];
+        const states = ['California', 'Illinois', 'Maryland', 'Texas', 'Florida', 'Colorado', 'Connecticut '];
+        const initials = ['CA', 'IL', 'MD', 'TX', 'FL', 'CO', 'CT'];
+        states.forEach((city, index) => {
+          data.push({
+            label: city,
+            key: index,
+            initial: initials[index]
+          });
+        });
+        return data;
+      };
+      return {
+        data: generateData(),
+        value: [],
+        filterMethod(query, item) {
+          return item.initial.toLowerCase().indexOf(query.toLowerCase()) > -1;
+        }
+      };
+    }
+  };
+</script>
+```
+:::
+
+### Personnalisable
+
+Vous pouvez personnaliser les titres, les textes des boutons, les fonctions de rendu pour les objets et le contenu du footer.
+
+:::demo Utilisez `titles`, `button-texts`, `render-content` et `format` pour personnaliser respectivement les titres des listes, les textes des boutons, les fonctions de rendus des objets et le texte des statuts du header. Vous pouvez aussi utiliser des slots pour les objets. Pour le contenu du footer, deux slots sont fournis: `left-footer` et `right-footer`. Si vous souhaitez que certains items soient sélectionnés par défaut, utilisez `left-default-checked` et `right-default-checked`. Enfin, cet exemple utilise aussi l'évènement `change`. Notez que cet exemple ne fonctionne pas dans jsfiddle car il ne supporte pas JSX. Dans un vrai projet, `render-content` fonctionnera si les dépendances sont satisfaites.
+```html
+<template>
+  <p style="text-align: center; margin: 0 0 20px">Utilise render-content</p>
+  <div style="text-align: center">
+    <el-transfer
+      style="text-align: left; display: inline-block"
+      v-model="value"
+      filterable
+      :left-default-checked="[2, 3]"
+      :right-default-checked="[1]"
+      :render-content="renderFunc"
+      :titles="['Source', 'Target']"
+      :button-texts="['To left', 'To right']"
+      :format="{
+        noChecked: '${total}',
+        hasChecked: '${checked}/${total}'
+      }"
+      @change="handleChange"
+      :data="data">
+      <el-button class="transfer-footer" slot="left-footer" size="small">Opération</el-button>
+      <el-button class="transfer-footer" slot="right-footer" size="small">Opération</el-button>
+    </el-transfer>
+    <p style="text-align: center; margin: 50px 0 20px">Utilise des slots</p>
+    <div style="text-align: center">
+      <el-transfer
+        style="text-align: left; display: inline-block"
+        v-model="value4"
+        filterable
+        :left-default-checked="[2, 3]"
+        :right-default-checked="[1]"
+        :titles="['Source', 'Target']"
+        :button-texts="['To left', 'To right']"
+        :format="{
+          noChecked: '${total}',
+          hasChecked: '${checked}/${total}'
+        }"
+        @change="handleChange"
+        :data="data">
+        <span slot-scope="{ option }">{{ option.key }} - {{ option.label }}</span>
+        <el-button class="transfer-footer" slot="left-footer" size="small">Opération</el-button>
+        <el-button class="transfer-footer" slot="right-footer" size="small">Opération</el-button>
+      </el-transfer>
+    </div>
+  </div>
+</template>
+
+<style>
+  .transfer-footer {
+    margin-left: 20px;
+    padding: 6px 5px;
+  }
+</style>
+
+<script>
+  export default {
+    data() {
+      const generateData = _ => {
+        const data = [];
+        for (let i = 1; i <= 15; i++) {
+          data.push({
+            key: i,
+            label: `Option ${ i }`,
+            disabled: i % 4 === 0
+          });
+        }
+        return data;
+      };
+      return {
+        data: generateData(),
+        value: [1],
+        value4: [1],
+        renderFunc(h, option) {
+          return <span>{ option.key } - { option.label }</span>;
+        }
+      };
+    },
+
+    methods: {
+      handleChange(value, direction, movedKeys) {
+        console.log(value, direction, movedKeys);
+      }
+    }
+  };
+</script>
+```
+:::
+
+### Alias des propriétés
+
+Par défaut, Transfer utilise `key`, `label` et `disabled` de vos objets. Si vos objets ont des propriétés différentes, vous pouvez utiliser l'attribut `props` pour définir des alias.
+
+:::demo Les objets de cet exemple n'ont pas de `key` ni `label`, à la place ils ont `value` et `desc`. Vous devez donc configurer les alias de `key` et `label`.
+```html
+<template>
+  <el-transfer
+    v-model="value"
+    :props="{
+      key: 'value',
+      label: 'desc'
+    }"
+    :data="data">
+  </el-transfer>
+</template>
+
+<script>
+  export default {
+    data() {
+      const generateData = _ => {
+        const data = [];
+        for (let i = 1; i <= 15; i++) {
+          data.push({
+            value: i,
+            desc: `Option ${ i }`,
+            disabled: i % 4 === 0
+          });
+        }
+        return data;
+      };
+      return {
+        data: generateData(),
+        value: []
+      };
+    }
+  };
+</script>
+```
+:::
+
+### Attributs
+
+| Attribut | Description | Type  | Valeurs acceptées | Défaut |
+|---------- |-------- |---------- |-------------  |-------- |
+| value / v-model | La valeur liée. | array | — | — |
+| data | Données principales. | array[{ key, label, disabled }] | — | [ ] |
+| filterable | Si Transfer est filtrable. | boolean | — | false |
+| filter-placeholder | Placeholder du champ de filtrage. | string | — | Enter keyword |
+| filter-method | Méthode de filtrage. | function | — | — |
+| target-order | Ordre de tri des éléments de la liste d'arrivée. S'il est à `original`, les éléments garderont le même ordre que la liste d'origine. Si à `push`, les nouveaux éléments seront mis à la suite des anciens. Si mis à `unshift`, les nouveaux éléments seront mis en haut de la liste. | string | original / push / unshift | original |
+| titles | Titres des listes. | array | — | ['List 1', 'List 2'] |
+| button-texts | Textes des boutons. | array | — | [ ] |
+| render-content | Fonction de rendu pour les objets. | function(h, option) | — | — |
+| format | Textes de statut dans le header. | object{noChecked, hasChecked} | — | { noChecked: '${checked}/${total}', hasChecked: '${checked}/${total}' } |
+| props | Alias des propriétés des objets source. | object{key, label, disabled} | — | — |
+| left-default-checked | Tableau des objets initialement sélectionnés dans la liste de gauche.  | array | — | [ ] |
+| right-default-checked | Tableau des objets initialement sélectionnés dans la liste de droite. | array | — | [ ] |
+
+### Slot
+
+| Nom | Description |
+|------|--------|
+| left-footer | Contenu du footer de la liste de gauche. |
+| right-footer | Contenu du footer de la liste de droite. |
+
+### Slot avec portée
+
+| Nom | Description |
+|------|--------|
+| — | Contenu personnalisé pour les objets. Le paramètre est { option }. |
+
+### Méthodes
+
+| Méthode | Description | Paramètres |
+| ---- | ---- | ---- |
+| clearQuery | Efface le filtre d'une liste. | 'left' / 'right' |
+
+### Events
+
+| Event nom | Description | Paramètres |
+|---------- |-------- |---------- |
+| change | Se déclenche quand un objet change dans la liste de droite. | Tableau des objets de la liste de droite, direction du transfer (`left` ou `right`), les clés des objets bougés. |
+| left-check-change | Se déclenche quand l'utilisateur change le statut d'un objet dans la liste de gauche. | Liste des objets actuellement sélectionnées, Liste des objets dont le statut a changé. |
+| right-check-change | Se déclenche quand l'utilisateur change le statut d'un objet dans la liste de droite. | Liste des objets actuellement sélectionnées, Liste des objets dont le statut a changé. |
diff --git a/examples/docs/fr-FR/transition.md b/examples/docs/fr-FR/transition.md
new file mode 100644
index 00000000000..60ea816d43f
--- /dev/null
+++ b/examples/docs/fr-FR/transition.md
@@ -0,0 +1,155 @@
+## Transitions
+
+Vous pouvez utiliser les transitions d'Element directement. Mais avant ça, merci de lire la [documentation](https://vuejs.org/v2/api/#transition).
+
+### Fade
+
+:::demo Il y a deux effets de fading: `el-fade-in-linear` et `el-fade-in`.
+```html
+<template>
+  <div>
+    <el-button @click="show = !show">Cliquez ici</el-button>
+
+    <div style="display: flex; margin-top: 20px; height: 100px;">
+      <transition name="el-fade-in-linear">
+        <div v-show="show" class="transition-box">.el-fade-in-linear</div>
+      </transition>
+      <transition name="el-fade-in">
+        <div v-show="show" class="transition-box">.el-fade-in</div>
+      </transition>
+    </div>
+  </div>
+</template>
+
+<script>
+    export default {
+    data: () => ({
+      show: true
+    })
+  }
+</script>
+
+<style>
+  .transition-box {
+    margin-bottom: 10px;
+    width: 200px;
+    height: 100px;
+    border-radius: 4px;
+    background-color: #2460e0;
+    text-align: center;
+    color: #fff;
+    padding: 40px 20px;
+    box-sizing: border-box;
+    margin-right: 20px;
+  }
+</style>
+```
+:::
+
+### Zoom
+
+:::demo `el-zoom-in-center`, `el-zoom-in-top` et `el-zoom-in-bottom` sont fournis.
+```html
+<template>
+  <div>
+    <el-button @click="show2 = !show2">Cliquez ici</el-button>
+
+    <div style="display: flex; margin-top: 20px; height: 100px;">
+      <transition name="el-zoom-in-center">
+        <div v-show="show2" class="transition-box">.el-zoom-in-center</div>
+      </transition>
+
+      <transition name="el-zoom-in-top">
+        <div v-show="show2" class="transition-box">.el-zoom-in-top</div>
+      </transition>
+
+      <transition name="el-zoom-in-bottom">
+        <div v-show="show2" class="transition-box">.el-zoom-in-bottom</div>
+      </transition>
+    </div>
+  </div>
+</template>
+
+<script>
+    export default {
+    data: () => ({
+      show2: true
+    })
+  }
+</script>
+
+<style>
+  .transition-box {
+    margin-bottom: 10px;
+    width: 200px;
+    height: 100px;
+    border-radius: 4px;
+    background-color: #2460e0;
+    text-align: center;
+    color: #fff;
+    padding: 40px 20px;
+    box-sizing: border-box;
+    margin-right: 20px;
+  }
+</style>
+```
+:::
+
+
+### Collapse
+
+Pour l'effet collapse, utilisez le composant `el-collapse-transition`.
+
+:::demo
+```html
+<template>
+  <div>
+    <el-button @click="show3 = !show3">Cliquez ici</el-button>
+
+    <div style="margin-top: 20px; height: 200px;">
+      <el-collapse-transition>
+        <div v-show="show3">
+          <div class="transition-box">el-collapse-transition</div>
+          <div class="transition-box">el-collapse-transition</div>
+        </div>
+      </el-collapse-transition>
+    </div>
+  </div>
+</template>
+
+<script>
+    export default {
+    data: () => ({
+      show3: true
+    })
+  }
+</script>
+
+<style>
+  .transition-box {
+    margin-bottom: 10px;
+    width: 200px;
+    height: 100px;
+    border-radius: 4px;
+    background-color: #2460e0;
+    text-align: center;
+    color: #fff;
+    padding: 40px 20px;
+    box-sizing: border-box;
+    margin-right: 20px;
+  }
+</style>
+```
+:::
+
+### À la demande
+
+```js
+// fade/zoom
+import '@femessage/element-ui/lib/theme-chalk/base.css';
+// collapse
+import CollapseTransition from '@femessage/element-ui/lib/transitions/collapse-transition';
+import Vue from 'vue'
+
+Vue.component(CollapseTransition.name, CollapseTransition)
+```
diff --git a/examples/docs/fr-FR/tree.md b/examples/docs/fr-FR/tree.md
new file mode 100644
index 00000000000..fa6055b264a
--- /dev/null
+++ b/examples/docs/fr-FR/tree.md
@@ -0,0 +1,875 @@
+## Tree
+
+Affiche un ensemble de données possédant plusieurs niveaux de hiérarchie ou d'imbrication.
+
+### Usage
+
+Voici la structure basique.
+
+:::demo
+```html
+<el-tree :data="data" :props="defaultProps" @node-click="handleNodeClick"></el-tree>
+
+<script>
+  export default {
+    data() {
+      return {
+        data: [{
+          label: 'Niveau un 1',
+          children: [{
+            label: 'Niveau deux 1-1',
+            children: [{
+              label: 'Niveau trois 1-1-1'
+            }]
+          }]
+        }, {
+          label: 'Niveau un 2',
+          children: [{
+            label: 'Niveau deux 2-1',
+            children: [{
+              label: 'Niveau trois 2-1-1'
+            }]
+          }, {
+            label: 'Niveau deux 2-2',
+            children: [{
+              label: 'Niveau trois 2-2-1'
+            }]
+          }]
+        }, {
+          label: 'Niveau un 3',
+          children: [{
+            label: 'Niveau deux 3-1',
+            children: [{
+              label: 'Niveau trois 3-1-1'
+            }]
+          }, {
+            label: 'Niveau deux 3-2',
+            children: [{
+              label: 'Niveau trois 3-2-1'
+            }]
+          }]
+        }],
+        defaultProps: {
+          children: 'children',
+          label: 'label'
+        }
+      };
+    },
+    methods: {
+      handleNodeClick(data) {
+        console.log(data);
+      }
+    }
+  };
+</script>
+```
+:::
+
+### Sélection
+
+Vous pouvez activer la sélection des noeuds.
+
+:::demo cet exemple montre également comment charger des données de manière asynchrone.
+```html
+<el-tree
+  :props="props"
+  :load="loadNode"
+  lazy
+  show-checkbox
+  @check-change="handleCheckChange">
+</el-tree>
+
+<script>
+  export default {
+    data() {
+      return {
+        props: {
+          label: 'name',
+          children: 'zones'
+        },
+        count: 1
+      };
+    },
+    methods: {
+      handleCheckChange(data, checked, indeterminate) {
+        console.log(data, checked, indeterminate);
+      },
+      handleNodeClick(data) {
+        console.log(data);
+      },
+      loadNode(node, resolve) {
+        if (node.level === 0) {
+          return resolve([{ name: 'Root1' }, { name: 'Root2' }]);
+        }
+        if (node.level > 3) return resolve([]);
+
+        var hasChild;
+        if (node.data.name === 'region1') {
+          hasChild = true;
+        } else if (node.data.name === 'region2') {
+          hasChild = false;
+        } else {
+          hasChild = Math.random() > 0.5;
+        }
+
+        setTimeout(() => {
+          var data;
+          if (hasChild) {
+            data = [{
+              name: 'zone' + this.count++
+            }, {
+              name: 'zone' + this.count++
+            }];
+          } else {
+            data = [];
+          }
+
+          resolve(data);
+        }, 500);
+      }
+    }
+  };
+</script>
+```
+:::
+
+### Noeud-feuille personnalisés en mode lazy
+
+:::demo Les données d'un noeud ne sont pas accessibles tant que la noeud n'est pas cliqué, l'arbre ne peut donc pas prédire si un noeud sera une feuille. C'est pourquoi un bouton de menu est ajouté à chaque noeud, et si c'est une feuille il disparaîtra après le clic. Vous pouvez également dire par avance à l'arbre si un noeud est une feuille, pour éviter l'apparition du bouton de menu.
+```html
+<el-tree
+  :props="props"
+  :load="loadNode"
+  lazy
+  show-checkbox>
+</el-tree>
+
+<script>
+  export default {
+    data() {
+      return {
+        props: {
+          label: 'name',
+          children: 'zones',
+          isLeaf: 'leaf'
+        },
+      };
+    },
+    methods: {
+      loadNode(node, resolve) {
+        if (node.level === 0) {
+          return resolve([{ name: 'region' }]);
+        }
+        if (node.level > 1) return resolve([]);
+
+        setTimeout(() => {
+          const data = [{
+            name: 'leaf',
+            leaf: true
+          }, {
+            name: 'zone'
+          }];
+
+          resolve(data);
+        }, 500);
+      }
+    }
+  };
+</script>
+```
+:::
+
+### Checkbox désactivées
+
+Les checkbox des noeuds peuvent être désactivées individuellement.
+
+:::demo Dans cet exemple, la propriété `disabled` est ajoutée à `defaultProps`, et certains noeuds ont `disabled:true`. Les checkbox correspondantes sont donc désactivées.
+```html
+<el-tree
+  :data="data"
+  :props="defaultProps"
+  show-checkbox
+  @check-change="handleCheckChange">
+</el-tree>
+
+<script>
+  export default {
+    data() {
+      return {
+        data: [{
+          id: 1,
+          label: 'Niveau un 1',
+          children: [{
+            id: 3,
+            label: 'Niveau deux 2-1',
+            children: [{
+              id: 4,
+              label: 'Niveau trois 3-1-1'
+            }, {
+              id: 5,
+              label: 'Niveau trois 3-1-2',
+              disabled: true
+            }]
+          }, {
+            id: 2,
+            label: 'Niveau deux 2-2',
+            disabled: true,
+            children: [{
+              id: 6,
+              label: 'Niveau trois 3-2-1'
+            }, {
+              id: 7,
+              label: 'Niveau trois 3-2-2',
+              disabled: true
+            }]
+          }]
+        }],
+        defaultProps: {
+            children: 'children',
+            label: 'label',
+            disabled: 'disabled',
+        },
+      };
+    }
+  };
+</script>
+```
+:::
+
+### Ouverture et sélection par défaut
+
+Certains noeuds peuvent être ouverts et/ou sélectionnés par défaut.
+
+:::demo Utilisez `default-expanded-keys` et `default-checked-keys` pour réglez respectivement les noeuds ouverts et les noeuds sélectionnés par défaut. Notez que `node-key` est requis dans ce cas. Sa valeurs est le nom d'une clé dans l'objets data, et sa valeur devrait être unique dans tout l'arbre.
+```html
+<el-tree
+  :data="data"
+  show-checkbox
+  node-key="id"
+  :default-expanded-keys="[2, 3]"
+  :default-checked-keys="[5]"
+  :props="defaultProps">
+</el-tree>
+
+<script>
+  export default {
+    data() {
+      return {
+        data: [{
+          id: 1,
+          label: 'Niveau un 1',
+          children: [{
+            id: 4,
+            label: 'Niveau deux 1-1',
+            children: [{
+              id: 9,
+              label: 'Niveau trois 1-1-1'
+            }, {
+              id: 10,
+              label: 'Niveau trois 1-1-2'
+            }]
+          }]
+        }, {
+          id: 2,
+          label: 'Niveau un 2',
+          children: [{
+            id: 5,
+            label: 'Niveau deux 2-1'
+          }, {
+            id: 6,
+            label: 'Niveau deux 2-2'
+          }]
+        }, {
+          id: 3,
+          label: 'Niveau un 3',
+          children: [{
+            id: 7,
+            label: 'Niveau deux 3-1'
+          }, {
+            id: 8,
+            label: 'Niveau deux 3-2'
+          }]
+        }],
+        defaultProps: {
+          children: 'children',
+          label: 'label'
+        }
+      };
+    }
+  };
+</script>
+```
+:::
+
+### Sélectionner des noeuds
+
+:::demo Cet exemple montre comment récupérer et sélectionner des noeuds. Vous pouvez utiliser deux approches: les noeuds ou les clés. Dans le cas des clés, `node-key` est requis.
+```html
+<el-tree
+  :data="data"
+  show-checkbox
+  default-expand-all
+  node-key="id"
+  ref="tree"
+  highlight-current
+  :props="defaultProps">
+</el-tree>
+
+<div class="buttons">
+  <el-button @click="getCheckedNodes">Récupération par noeud</el-button>
+  <el-button @click="getCheckedKeys">Récupération par clé</el-button>
+  <el-button @click="setCheckedNodes">Sélection par noeud</el-button>
+  <el-button @click="setCheckedKeys">Sélection par clé</el-button>
+  <el-button @click="resetChecked">Reset</el-button>
+</div>
+
+<script>
+  export default {
+    methods: {
+      getCheckedNodes() {
+        console.log(this.$refs.tree.getCheckedNodes());
+      },
+      getCheckedKeys() {
+        console.log(this.$refs.tree.getCheckedKeys());
+      },
+      setCheckedNodes() {
+        this.$refs.tree.setCheckedNodes([{
+          id: 5,
+          label: 'Niveau deux 2-1'
+        }, {
+          id: 9,
+          label: 'Niveau trois 1-1-1'
+        }]);
+      },
+      setCheckedKeys() {
+        this.$refs.tree.setCheckedKeys([3]);
+      },
+      resetChecked() {
+        this.$refs.tree.setCheckedKeys([]);
+      }
+    },
+
+    data() {
+      return {
+        data: [{
+          id: 1,
+          label: 'Niveau un 1',
+          children: [{
+            id: 4,
+            label: 'Niveau deux 1-1',
+            children: [{
+              id: 9,
+              label: 'Niveau trois 1-1-1'
+            }, {
+              id: 10,
+              label: 'Niveau trois 1-1-2'
+            }]
+          }]
+        }, {
+          id: 2,
+          label: 'Niveau un 2',
+          children: [{
+            id: 5,
+            label: 'Niveau deux 2-1'
+          }, {
+            id: 6,
+            label: 'Niveau deux 2-2'
+          }]
+        }, {
+          id: 3,
+          label: 'Niveau un 3',
+          children: [{
+            id: 7,
+            label: 'Niveau deux 3-1'
+          }, {
+            id: 8,
+            label: 'Niveau deux 3-2'
+          }]
+        }],
+        defaultProps: {
+          children: 'children',
+          label: 'label'
+        }
+      };
+    }
+  };
+</script>
+```
+:::
+
+### Contenu personnalisé
+
+Le contenu des noeuds peut être personnalisé, afin de pouvoir ajouter des icônes ou des boutons par exemple.
+
+:::demo Il existe deux méthodes de personnalisation: `render-content` et les slots avec portée. Utilisez `render-content` pour assigner une fonction de rendu qui va générer le contenu des noeuds. Voire la documentation de Vue pour plus d'informations. Si vous préférez les slots, vous aurez accès à `node` et `data` dans le scope, corerspondant à l'objet TreeNode et aux données du noeud courant. Notez que  la démo de `render-content` ne marche pas dans jsfiddle car il ne supporte pas JSX. Dans un vrai projet, `render-content` marchera si les dépendances sont satisfaites.
+```html
+<div class="custom-tree-container">
+  <div class="block">
+    <p>Avec render-content</p>
+    <el-tree
+      :data="data"
+      show-checkbox
+      node-key="id"
+      default-expand-all
+      :expand-on-click-node="false"
+      :render-content="renderContent">
+    </el-tree>
+  </div>
+  <div class="block">
+    <p>Avec un slot</p>
+    <el-tree
+      :data="data"
+      show-checkbox
+      node-key="id"
+      default-expand-all
+      :expand-on-click-node="false">
+      <span class="custom-tree-node" slot-scope="{ node, data }">
+        <span>{{ node.label }}</span>
+        <span>
+          <el-button
+            type="text"
+            size="mini"
+            @click="() => append(data)">
+            Ajouter
+          </el-button>
+          <el-button
+            type="text"
+            size="mini"
+            @click="() => remove(node, data)">
+            Supprimer
+          </el-button>
+        </span>
+      </span>
+    </el-tree>
+  </div>
+</div>
+
+<script>
+  let id = 1000;
+
+  export default {
+    data() {
+      const data = [{
+        id: 1,
+        label: 'Niveau un 1',
+        children: [{
+          id: 4,
+          label: 'Niveau deux 1-1',
+          children: [{
+            id: 9,
+            label: 'Niveau trois 1-1-1'
+          }, {
+            id: 10,
+            label: 'Niveau trois 1-1-2'
+          }]
+        }]
+      }, {
+        id: 2,
+        label: 'Niveau un 2',
+        children: [{
+          id: 5,
+          label: 'Niveau deux 2-1'
+        }, {
+          id: 6,
+          label: 'Niveau deux 2-2'
+        }]
+      }, {
+        id: 3,
+        label: 'Niveau un 3',
+        children: [{
+          id: 7,
+          label: 'Niveau deux 3-1'
+        }, {
+          id: 8,
+          label: 'Niveau deux 3-2'
+        }]
+      }];
+      return {
+        data: JSON.parse(JSON.stringify(data)),
+        data: JSON.parse(JSON.stringify(data))
+      }
+    },
+
+    methods: {
+      append(data) {
+        const newChild = { id: id++, label: 'testtest', children: [] };
+        if (!data.children) {
+          this.$set(data, 'children', []);
+        }
+        data.children.push(newChild);
+      },
+
+      remove(node, data) {
+        const parent = node.parent;
+        const children = parent.data.children || parent.data;
+        const index = children.findIndex(d => d.id === data.id);
+        children.splice(index, 1);
+      },
+
+      renderContent(h, { node, data, store }) {
+        return (
+          <span class="custom-tree-node">
+            <span>{node.label}</span>
+            <span>
+              <el-button size="mini" type="text" on-click={ () => this.append(data) }>Ajouter</el-button>
+              <el-button size="mini" type="text" on-click={ () => this.remove(node, data) }>Supprimer</el-button>
+            </span>
+          </span>);
+      }
+    }
+  };
+</script>
+
+<style>
+  .custom-tree-node {
+    flex: 1;
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    font-size: 14px;
+    padding-right: 8px;
+  }
+</style>
+```
+:::
+
+### Filtrage
+
+Les noeuds peuvent être filtrés par mot-clé.
+
+:::demo Utilisez la méthode `filter` de l'instance de Tree pour pouvoir filtrer les noeuds, son paramètre étant le mot-clé. Notez que pour que cela fonctionne, `filter-node-method` est requis, sa valeur étant la méthode de filtrage.
+```html
+<el-input
+  placeholder="Filter keyword"
+  v-model="filterText">
+</el-input>
+
+<el-tree
+  class="filter-tree"
+  :data="data"
+  :props="defaultProps"
+  default-expand-all
+  :filter-node-method="filterNode"
+  ref="tree">
+</el-tree>
+
+<script>
+  export default {
+    watch: {
+      filterText(val) {
+        this.$refs.tree.filter(val);
+      }
+    },
+
+    methods: {
+      filterNode(value, data) {
+        if (!value) return true;
+        return data.label.indexOf(value) !== -1;
+      }
+    },
+
+    data() {
+      return {
+        filterText: '',
+        data: [{
+          id: 1,
+          label: 'Niveau un 1',
+          children: [{
+            id: 4,
+            label: 'Niveau deux 1-1',
+            children: [{
+              id: 9,
+              label: 'Niveau trois 1-1-1'
+            }, {
+              id: 10,
+              label: 'Niveau trois 1-1-2'
+            }]
+          }]
+        }, {
+          id: 2,
+          label: 'Niveau un 2',
+          children: [{
+            id: 5,
+            label: 'Niveau deux 2-1'
+          }, {
+            id: 6,
+            label: 'Niveau deux 2-2'
+          }]
+        }, {
+          id: 3,
+          label: 'Niveau un 3',
+          children: [{
+            id: 7,
+            label: 'Niveau deux 3-1'
+          }, {
+            id: 8,
+            label: 'Niveau deux 3-2'
+          }]
+        }],
+        defaultProps: {
+          children: 'children',
+          label: 'label'
+        }
+      };
+    }
+  };
+</script>
+```
+:::
+
+### Accordéon
+
+Vous pouvez utiliser un mode accordéon afin que seul un noeud par niveau soit ouvert.
+
+:::demo
+```html
+<el-tree
+  :data="data"
+  :props="defaultProps"
+  accordion
+  @node-click="handleNodeClick">
+</el-tree>
+
+<script>
+  export default {
+    data() {
+      return {
+        data: [{
+          label: 'Niveau un 1',
+          children: [{
+            label: 'Niveau deux 1-1',
+            children: [{
+              label: 'Niveau trois 1-1-1'
+            }]
+          }]
+        }, {
+          label: 'Niveau un 2',
+          children: [{
+            label: 'Niveau deux 2-1',
+            children: [{
+              label: 'Niveau trois 2-1-1'
+            }]
+          }, {
+            label: 'Niveau deux 2-2',
+            children: [{
+              label: 'Niveau trois 2-2-1'
+            }]
+          }]
+        }, {
+          label: 'Niveau un 3',
+          children: [{
+            label: 'Niveau deux 3-1',
+            children: [{
+              label: 'Niveau trois 3-1-1'
+            }]
+          }, {
+            label: 'Niveau deux 3-2',
+            children: [{
+              label: 'Niveau trois 3-2-1'
+            }]
+          }]
+        }],
+        defaultProps: {
+          children: 'children',
+          label: 'label'
+        }
+      };
+    },
+    methods: {
+      handleNodeClick(data) {
+        console.log(data);
+      }
+    }
+  };
+</script>
+```
+:::
+
+### Noeuds déplaçables
+
+Vous pouvez déplacer les noeuds par drag'n drop en ajoutant l'attribut `draggable`.
+
+:::demo
+```html
+<el-tree
+  :data="data"
+  node-key="id"
+  default-expand-all
+  @node-drag-start="handleDragStart"
+  @node-drag-enter="handleDragEnter"
+  @node-drag-leave="handleDragLeave"
+  @node-drag-over="handleDragOver"
+  @node-drag-end="handleDragEnd"
+  @node-drop="handleDrop"
+  draggable
+  :allow-drop="allowDrop"
+  :allow-drag="allowDrag">
+</el-tree>
+
+<script>
+  export default {
+    data() {
+      return {
+        data: [{
+          label: 'Niveau un 1',
+          children: [{
+            label: 'Niveau deux 1-1',
+            children: [{
+              label: 'Niveau trois 1-1-1'
+            }]
+          }]
+        }, {
+          label: 'Niveau un 2',
+          children: [{
+            label: 'Niveau deux 2-1',
+            children: [{
+              label: 'Niveau trois 2-1-1'
+            }]
+          }, {
+            label: 'Niveau deux 2-2',
+            children: [{
+              label: 'Niveau trois 2-2-1'
+            }]
+          }]
+        }, {
+          label: 'Niveau un 3',
+          children: [{
+            label: 'Niveau deux 3-1',
+            children: [{
+              label: 'Niveau trois 3-1-1'
+            }]
+          }, {
+            label: 'Niveau deux 3-2',
+            children: [{
+              label: 'Niveau trois 3-2-1'
+            }]
+          }]
+        }],
+        defaultProps: {
+          children: 'children',
+          label: 'label'
+        }
+      };
+    },
+    methods: {
+      handleDragStart(node, ev) {
+        console.log('drag start', node);
+      },
+      handleDragEnter(draggingNode, dropNode, ev) {
+        console.log('tree drag enter: ', dropNode.label);
+      },
+      handleDragLeave(draggingNode, dropNode, ev) {
+        console.log('tree drag leave: ', dropNode.label);
+      },
+      handleDragOver(draggingNode, dropNode, ev) {
+        console.log('tree drag over: ', dropNode.label);
+      },
+      handleDragEnd(draggingNode, dropNode, dropType, ev) {
+        console.log('tree drag end: ', dropNode && dropNode.label, dropType);
+      },
+      handleDrop(draggingNode, dropNode, dropType, ev) {
+        console.log('tree drop: ', dropNode.label, dropType);
+      },
+      allowDrop(draggingNode, dropNode, type) {
+        if (dropNode.data.label === 'Niveau deux 3-1') {
+          return type !== 'inner';
+        } else {
+          return true;
+        }
+      },
+      allowDrag(draggingNode) {
+        return draggingNode.data.label.indexOf('Niveau trois 3-1-1') === -1;
+      }
+    }
+  };
+</script>
+```
+:::
+
+### Attributs
+
+| Attribut             | Description                              | Type                        | Valeurs acceptées | Défaut |
+| --------------------- | ---------------------------------------- | --------------------------- | --------------- | ------- |
+| data                  | Données de l'arbre                       | array                       | —               | —       |
+| empty-text            | Texte à afficher quand il n'y a pas de données.         | string                      | —               | —       |
+| node-key              | Identifiant unique pour chaque noeud, doit être unique dans tout l'arbre. | string                      | —               | —       |
+| props                 | Options de configuration, voir table suivante. | object                      | —               | —       |
+| render-after-expand   | Si les noeuds enfants doivent être générés seulement après la première ouverture du parent. | boolean | — | true |
+| load                  | Méthode pour charger les noeuds enfants, uniquement en mode `lazy`.  | function(node, resolve)     | —               | —       |
+| render-content        | Fonction de rendu pour les noeuds.            | Function(h, { node, data, store }        | —               | —       |
+| highlight-current     | Si le noeud courant est mis en valeur.      | boolean                     | —               | false   |
+| default-expand-all    | Si tous les noeuds sont ouverts par défaut.   | boolean                     | —               | false   |
+| expand-on-click-node  | Si l'ouverture se fait aussi en cliquant sur le noeud. Si `false`, l'ouverture ne se fera qu'en cliquant sur l'icône. | boolean | — | true |
+| check-on-click-node   | Si la sélection se fait aussi en cliquant sur le noeud. Si `false`, la sélection ne se fera qu'en cliquant sur la checkbox. | boolean | — | false |
+| auto-expand-parent    | Si un noeud parent est automatiquement ouvert quand un noeud enfant s'ouvre. | boolean                     | —               | true    |
+| default-expanded-keys | Tableau des clés des noeuds initialement ouverts. | array                       | —               | —       |
+| show-checkbox         | Si un noeud est sélectionnable.           | boolean                     | —               | false   |
+| check-strictly        | Si la sélection d'un noeud affecte celle de son parent quand `show-checkbox` est `true`. | boolean                     | —               | false   |
+| default-checked-keys  | Tableau des clés des noeuds initialement sélectionnés. | array                       | —               | —       |
+| current-node-key      | Clé du noeud initialement sélectionné. | string, number                       | —               | —       |
+| filter-node-method    | Fonction exécutée sur chaque noeud pour le filtrage. Si elle retourne `false`, les noeuds seront cachés. | Function(value, data, node) | —               | —       |
+| accordion             | Si les noeuds fonctionnent en mode accordéon. | boolean                     | —               | false   |
+| indent                | Indentation horizontale des noeuds en px. | number                     | —    | 16 |
+| icon-class            | Icône pour chaque noeud.                                       | string                     | -    | -  |
+| lazy                  | Si les noeuds sont chargés en mode lazy, utilisé avec l'attribut `load`.  | boolean                     | —    | false |
+| draggable             | Si les noeuds sont déplaçables par drag'n drop. | boolean            | —    | false |
+| allow-drag            | Fonction exécutée avant le déplacement d'un noeud. Si `false` est retourné, le noeud ne sera pas déplaçable. | Function(node)  | —  | —  |
+| allow-drop            | Fonction exécutée avant le placement d'un noeud. Si `false` est retourné, le noeud ne pourra être placé sur la zone en question. `type` a trois valeurs possibles: 'prev' (insertion avant le noeud cible), 'inner' (insertion dans le noeud cible) and 'next' (insertion après le noeud cible). | Function(draggingNode, dropNode, type)  | —    | —     |
+
+### props
+
+| Attribut | Description                              | Type   | Valeurs acceptées | Défaut |
+| --------- | ---------------------------------------- | ------ | --------------- | ------- |
+| label     | Détermine quelle clé de l'objet noeud représente le label. | string, function(data, node) | —               | —       |
+| children | Détermine quelle clé de l'objet noeud représente les noeuds enfants. | string | —               | —       |
+| disabled | Détermine quelle clé de l'objet noeud représente la désactivation du noeud. | boolean, function(data, node) | —    | —    |
+| isLeaf | Détermine si le noeud est une feuille, ne marche qu'avec le mode lazy loading. | boolean, function(data, node) | —    | —    |
+
+### Méthodes
+
+`Tree` possède les méthodes suivantes, qui retourne la sélection de noeuds actuelle.
+
+| Méthode          | Description                              | Paramètres                               |
+| --------------- | ---------------------------------------- | ---------------------------------------- |
+| filter          | Filtre les noeuds. | Accepte un paramètre qui sera le premier paramètre de `filter-node-method`. |
+| updateKeyChildren | Ajoute de nouvelles données au noeud, ne marche que lorsque `node-key` est assigné.  | (key, data) Accepte deux paramètres: 1. clé du noeud 2. nouvelles données. |
+| getCheckedNodes | Si le noeud peut-être sélectionné (`show-checkbox` est `true`), il retourne un tableau des noeuds sélectionnés. | (leafOnly, includeHalfChecked) Accepte deux booléen: 1. Défaut à `false`. Si `true`, retourne seulement un tableau des sous-noeuds sélectionnés. 2. Défaut à `false`. Si `true`, retourne la moitié des noeuds sélectionnés. |
+| setCheckedNodes | Détermine quels noeuds sont sélectionnés, ne marche que si `node_key` est assigné. | Un tableau de noeuds qui doivent être sélectionnés.          |
+| getCheckedKeys  | Si le noeud peut être sélectionné (`show-checkbox` est `true`), retourne un tableau de clés des noeuds sélectionnés. | (leafOnly) Booléen, défaut à `false`. Si à `true`, Il retourne seulement un tableau des sous-noeuds sélectionnés. |
+| setCheckedKeys  | Détermine quels noeuds sont sélectionnés, ne marche que si `node_key` est assigné. | (keys, leafOnly) Accepte deux paramètres: 1. un tableau de clés de noeuds à sélectionner 2. un booléen avec pour défaut `false`. Si à `true`, Il retourne seulement un tableau des sous-noeuds sélectionnés. |
+| setChecked      | Détermine si un noeud est sélectionnable, ne marche que si `node_key` est assigné. | (key/data, checked, deep) Accepte trois paramètres: 1. La clé ou les données du noeud 2. un booléen indiquant si sélectionné. 3. un booléen indiquant si profond. |
+| getHalfCheckedNodes | Si le noeud peut être sélectionné (`show-checkbox` est `true`), retourne la moitié des noeuds sélectionnés. | - |
+| getHalfCheckedKeys | Si le noeud peut être sélectionné (`show-checkbox` est `true`), retourne les clés de la moitié des noeuds sélectionnés. | - |
+| getCurrentKey   | retourne la clé du noeud actuellement en valeur (`null` si aucun noeud n'est en valeur). | — |
+| getCurrentNode  | retourne les données du noeud actuellement en valeur (`null` si aucun noeud n'est en valeur). | — |
+| setCurrentKey   | Met un noeud en valeur par sa clé, ne marche que si `node_key` est assigné. | (key) la clé du noeud. Si `null`, annule la sélection actuelle. |
+| setCurrentNode  | Met un noeud en valeur, ne marche que si `node_key` est assigné. | (node) le noeud. |
+| getNode         | Retourne le noeud grâce à sa clé ou ses données. | (data) la clé ou les données du noeud. |
+| remove          | Supprime un noeud, ne marche que si node-key est assigné. | (data) le noeud ou ses données à supprimer. |
+| append          | Ajoute un noeud à un autre noeud. | (data, parentNode) 1. les données du noeud à ajouter 2. les données du parent, clé ou données. |
+| insertBefore    | Insère un noeud avant un autre noeud. | (data, refNode) 1. Les données du noeud à insérer 2. Clé ou noeud de référence. |
+| insertAfter     | Insère un noeud après un autre noeud. | (data, refNode) 1. Les données du noeud à insérer 2. Clé ou noeud de référence. |
+
+### Évènements
+
+| Nom     | Description                              | Paramètres                               |
+| -------------- | ---------------------------------------- | ---------------------------------------- |
+| node-click     | Se déclenche quand est cliqué.          | Le noeud cliqué, la propriété `node` de TreeNode, TreeNode lui-même. |
+| node-contextmenu     | Se déclenche quand un noeud reçoit un clic droit.          | L'évènement, le noeud cliqué, la propriété `node` de TreeNode, TreeNode lui-même. |
+| check-change   | Se déclenche quand quand la sélection d'un noeud change. | Le noeud modifié, si le noeud est sélectionné, si des enfants sont sélectionnés. |
+| check   | Se déclenche après un clic sur le checkbox. | Le noeud modifié, l'objet statut de l'arbre avec quatre propriétés: checkedNodes, checkedKeys, halfCheckedNodes, halfCheckedKeys. |
+| current-change | Se déclenche quand le noeud courant changes.       | Le noeud courant, la propriété `node` de TreeNode |
+| node-expand    | Se déclenche quand le noeud courant s'ouvre.          | Le noeud ouvert, la propriété `node` de TreeNode, TreeNode lui-même. |
+| node-collapse  | Se déclenche quand le noeud courant se ferme.         | Le noeud fermé, la propriété `node` de TreeNode, TreeNode lui-même. |
+| node-drag-start | Se déclenche quand le déplacement commence.  | Le noeud déplacé, l'évènement. |
+| node-drag-enter | Se déclenche quand le noeud déplacé entre dans un autre noeud.  | Le noeud déplacé, l'autre noeud, l'évènement. |
+| node-drag-leave | Se déclenche quand le noeud déplacé quitte un autre noeud. | Le noeud déplacé, l'autre noeud, l'évènement.  |
+| node-drag-over | Se déclenche quand le noeud passe au-dessus d'un autre noeud (comme l'évènement mouseover). | Le noeud déplacé, l'autre noeud, l'évènement.  |
+| node-drag-end  | Se déclenche quand le déplacement se termine.  | Le noeud déplacé, le noeud d'arrivée (peut-être `undefined`), le type de placement (before / after / inner), l'évènement. |
+| node-drop  | Se déclenche après que le noeud déplacé soit placé. | Le noeud déplacé, le noeud d'arrivée, le type de placement (before / after / inner), l'évènement. |
+
+### Slot avec portée
+
+| Nom | Description |
+|------|--------|
+| — | Le contenu personnalisé des noeuds. les paramètres sont { node, data }. |
diff --git a/examples/docs/fr-FR/typography.md b/examples/docs/fr-FR/typography.md
new file mode 100644
index 00000000000..e88c18dd1bc
--- /dev/null
+++ b/examples/docs/fr-FR/typography.md
@@ -0,0 +1,152 @@
+<script>
+  import bus from '../../bus';
+  import { ACTION_USER_CONFIG_UPDATE } from '../../components/theme/constant.js';
+  const varMap = [
+    '$--font-size-extra-large',
+    '$--font-size-large',
+    '$--font-size-medium',
+    '$--font-size-base',
+    '$--font-size-small',
+    '$--font-size-extra-small'
+  ];
+  const original = {
+    'font_size_extra_large': '20px',
+    'font_size_large': '18px',
+    'font_size_medium': '16px',
+    'font_size_base': '14px',
+    'font_size_small': '13px',
+    'font_size_extra_small': '12px'
+  }
+  export default {
+    created() {
+      bus.$on(ACTION_USER_CONFIG_UPDATE, this.setGlobal);
+    },
+    mounted() {
+      this.setGlobal();
+    },
+    methods: {
+      tintColor(color, tint) {
+        return tintColor(color, tint);
+      },
+      setGlobal() {
+        if (window.userThemeConfig) {
+          this.global = window.userThemeConfig.global;
+        }
+      }
+    },
+    data() {
+      return {
+        global: {},
+        'font_size_extra_large': '',
+        'font_size_large': '',
+        'font_size_medium': '',
+        'font_size_base': '',
+        'font_size_small': '',
+        'font_size_extra_small': ''
+      }
+    },
+    watch: {
+      global: {
+        immediate: true,
+        handler(value) {
+          varMap.forEach((v) => {
+            const key = v.replace('$--', '').replace(/-/g, '_')
+            if (value[v]) {
+              this[key] = value[v]
+            } else {
+              this[key] = original[key]
+            }
+          });
+        }
+      }
+    },
+  }
+</script>
+
+## Typographie
+
+Nous avons créé une convention de police d'écriture afin d'assurer la meilleur présentation possible sur toutes le plateformes.
+
+### Police
+
+<div class="demo-term-box">
+<img src="../../assets/images/term-pingfang.png" alt="">
+<img src="../../assets/images/term-hiragino.png" alt="">
+<img src="../../assets/images/term-microsoft.png" alt="">
+<img src="../../assets/images/term-sf.png" alt="">
+<img src="../../assets/images/term-helvetica.png" alt="">
+<img src="../../assets/images/term-arial.png" alt="">
+</div>
+
+### Convention des polices
+
+<table class="demo-typo-size">
+  <tbody>
+  <tr
+    >
+      <td>Level</td>
+      <td>Font Size</td>
+      <td class="color-dark-light">Demo</td>
+    </tr>
+    <tr
+    :style="{ fontSize: font_size_extra_small }"
+    >
+      <td>Supplementary text</td>
+      <td class="color-dark-light">{{font_size_extra_small}} Extra Small</td>
+      <td>Build with Element</td>
+    </tr>
+    <tr
+    :style="{ fontSize: font_size_small }"
+    >
+      <td>Body (small)</td>
+      <td class="color-dark-light">{{font_size_small}} Small</td>
+      <td>Build with Element</td>
+    </tr>
+    <tr
+    :style="{ fontSize: font_size_base }"
+    >
+      <td>Body</td>
+      <td class="color-dark-light">{{font_size_base}} Base</td>
+      <td>Build with Element</td>
+    </tr>
+    <tr
+    :style="{ fontSize: font_size_medium }"
+    >
+      <td >Small Title</td>
+      <td class="color-dark-light">{{font_size_medium}} Medium</td>
+      <td>Build with Element</td>
+    </tr>
+    <tr
+    :style="{ fontSize: font_size_large }"
+    >
+      <td>Title</td>
+      <td class="color-dark-light">{{font_size_large}} large</td>
+      <td>Build with Element</td>
+    </tr>
+    <tr
+    :style="{ fontSize: font_size_extra_large }"
+    >
+      <td>Main Title</td>
+      <td class="color-dark-light">{{font_size_extra_large}} Extra large</td>
+      <td>Build with Element</td>
+    </tr>
+  </tbody>
+</table>
+
+### Font Line Height
+
+<div>
+<img class="lineH-left" src="~examples/assets/images/typography.png" />
+<ul class="lineH-right">
+<li>line-height:1 <span>No line height</span></li>
+<li>line-height:1.3 <span>Compact</span></li>
+<li>line-height:1.5 <span>Regular</span></li>
+<li>line-height:1.7 <span>Loose</span></li>
+</ul>
+</div>
+
+### Font-family
+
+```css
+font-family: "Helvetica Neue",Helvetica,"PingFang SC","Hiragino Sans GB","Microsoft YaHei","微软雅黑",Arial,sans-serif;
+```
diff --git a/examples/docs/fr-FR/upload.md b/examples/docs/fr-FR/upload.md
new file mode 100644
index 00000000000..20e80a22938
--- /dev/null
+++ b/examples/docs/fr-FR/upload.md
@@ -0,0 +1,386 @@
+## Upload
+
+Permet d'uploader des fichiers en cliquant ou en les déplaçant sur le composant.
+
+### Cliquer pour envoyer
+
+:::demo Personnalisez le bouton d'envoi avec `slot`. Utilisez `limit` et `on-exceed` pour limiter le nombre maximal de fichiers et déterminer le comportement quand ce nombre est dépassé. De plus, vous pouvez annuler la suppression d'un fichier avec `before-remove`.
+```html
+<el-upload
+  class="upload-demo"
+  action="https://jsonplaceholder.typicode.com/posts/"
+  :on-preview="handlePreview"
+  :on-remove="handleRemove"
+  :before-remove="beforeRemove"
+  multiple
+  :limit="3"
+  :on-exceed="handleExceed"
+  :file-list="fileList">
+  <el-button size="small" type="primary">Cliquer pour envoyer</el-button>
+  <div slot="tip" class="el-upload__tip">Fichiers jpg/png avec une taille inférieure à 500kb</div>
+</el-upload>
+<script>
+  export default {
+    data() {
+      return {
+        fileList: [{name: 'food.jpeg', url: 'https://fuss10.elemecdn.com/3/63/4e7f3a15429bfda99bce42a18cdd1jpeg.jpeg?imageMogr2/thumbnail/360x360/format/webp/quality/100'}, {name: 'food2.jpeg', url: 'https://fuss10.elemecdn.com/3/63/4e7f3a15429bfda99bce42a18cdd1jpeg.jpeg?imageMogr2/thumbnail/360x360/format/webp/quality/100'}]
+      };
+    },
+    methods: {
+      handleRemove(file, fileList) {
+        console.log(file, fileList);
+      },
+      handlePreview(file) {
+        console.log(file);
+      },
+      handleExceed(files, fileList) {
+        this.$message.warning(`La limite est 3, vous avez choisi ${files.length} fichiers, soit ${files.length + fileList.length} au total.`);
+      },
+      beforeRemove(file, fileList) {
+        return this.$confirm(`Supprimer le transfert de ${ file.name } ?`);
+      }
+    }
+  }
+</script>
+```
+:::
+
+### Envoi d'avatar utilisateur
+
+Utilisez `before-upload` pour restreindre le format et la taille du fichier à envoyer.
+
+:::demo
+```html
+<el-upload
+  class="avatar-uploader"
+  action="https://jsonplaceholder.typicode.com/posts/"
+  :show-file-list="false"
+  :on-success="handleAvatarSuccess"
+  :before-upload="beforeAvatarUpload">
+  <img v-if="imageUrl" :src="imageUrl" class="avatar">
+  <i v-else class="el-icon-plus avatar-uploader-icon"></i>
+</el-upload>
+
+<style>
+  .avatar-uploader .el-upload {
+    border: 1px dashed #d9d9d9;
+    border-radius: 6px;
+    cursor: pointer;
+    position: relative;
+    overflow: hidden;
+  }
+  .avatar-uploader .el-upload:hover {
+    border-color: #2460e0;
+  }
+  .avatar-uploader-icon {
+    font-size: 28px;
+    color: #8c939d;
+    width: 178px;
+    height: 178px;
+    line-height: 178px;
+    text-align: center;
+  }
+  .avatar {
+    width: 178px;
+    height: 178px;
+    display: block;
+  }
+</style>
+
+<script>
+  export default {
+    data() {
+      return {
+        imageUrl: ''
+      };
+    },
+    methods: {
+      handleAvatarSuccess(res, file) {
+        this.imageUrl = URL.createObjectURL(file.raw);
+      },
+      beforeAvatarUpload(file) {
+        const isJPG = file.type === 'image/jpeg';
+        const isLt2M = file.size / 1024 / 1024 < 2;
+
+        if (!isJPG) {
+          this.$message.error('L\'avatar doit être en JPG !');
+        }
+        if (!isLt2M) {
+          this.$message.error('L\'avatar ne peut pas excéder 2Mb !');
+        }
+        return isJPG && isLt2M;
+      }
+    }
+  }
+</script>
+```
+:::
+
+### Mur de photos
+
+Utilisez `list-type` pour changer le style de la liste de fichiers.
+
+:::demo
+```html
+<el-upload
+  action="https://jsonplaceholder.typicode.com/posts/"
+  list-type="picture-card"
+  :on-preview="handlePictureCardPreview"
+  :on-remove="handleRemove">
+  <i class="el-icon-plus"></i>
+</el-upload>
+<el-dialog :visible.sync="dialogVisible">
+  <img width="100%" :src="dialogImageUrl" alt="">
+</el-dialog>
+<script>
+  export default {
+    data() {
+      return {
+        dialogImageUrl: '',
+        dialogVisible: false
+      };
+    },
+    methods: {
+      handleRemove(file, fileList) {
+        console.log(file, fileList);
+      },
+      handlePictureCardPreview(file) {
+        this.dialogImageUrl = file.url;
+        this.dialogVisible = true;
+      }
+    }
+  }
+</script>
+```
+:::
+
+### Custom file thumbnail
+
+Use `scoped-slot` to change default thumbnail template.
+
+:::demo
+```html
+<el-upload
+  action="#"
+  list-type="picture-card"
+  :auto-upload="false">
+    <i slot="default" class="el-icon-plus"></i>
+    <div slot="file" slot-scope="{file}">
+      <img
+        class="el-upload-list__item-thumbnail"
+        :src="file.url" alt=""
+      >
+      <span class="el-upload-list__item-actions">
+        <span
+          class="el-upload-list__item-preview"
+          @click="handlePictureCardPreview(file)"
+        >
+          <i class="el-icon-zoom-in"></i>
+        </span>
+        <span
+          v-if="!disabled"
+          class="el-upload-list__item-delete"
+          @click="handleDownload(file)"
+        >
+          <i class="el-icon-download"></i>
+        </span>
+        <span
+          v-if="!disabled"
+          class="el-upload-list__item-delete"
+          @click="handleRemove(file)"
+        >
+          <i class="el-icon-delete"></i>
+        </span>
+      </span>
+    </div>
+</el-upload>
+<el-dialog :visible.sync="dialogVisible">
+  <img width="100%" :src="dialogImageUrl" alt="">
+</el-dialog>
+<script>
+  export default {
+    data() {
+      return {
+        dialogImageUrl: '',
+        dialogVisible: false,
+        disabled: false
+      };
+    },
+    methods: {
+      handleRemove(file) {
+        console.log(file);
+      },
+      handlePictureCardPreview(file) {
+        this.dialogImageUrl = file.url;
+        this.dialogVisible = true;
+      },
+      handleDownload(file) {
+        console.log(file);
+      }
+    }
+  }
+</script>
+```
+:::
+
+### Liste de fichiers avec miniatures
+
+:::demo
+```html
+<el-upload
+  class="upload-demo"
+  action="https://jsonplaceholder.typicode.com/posts/"
+  :on-preview="handlePreview"
+  :on-remove="handleRemove"
+  :file-list="fileList"
+  list-type="picture">
+  <el-button size="small" type="primary">Cliquer pour envoyer</el-button>
+  <div slot="tip" class="el-upload__tip">Fichiers jpg/png avec une taille inférieure à 500kb</div>
+</el-upload>
+<script>
+  export default {
+    data() {
+      return {
+        fileList: [{name: 'food.jpeg', url: 'https://fuss10.elemecdn.com/3/63/4e7f3a15429bfda99bce42a18cdd1jpeg.jpeg?imageMogr2/thumbnail/360x360/format/webp/quality/100'}, {name: 'food2.jpeg', url: 'https://fuss10.elemecdn.com/3/63/4e7f3a15429bfda99bce42a18cdd1jpeg.jpeg?imageMogr2/thumbnail/360x360/format/webp/quality/100'}]
+      };
+    },
+    methods: {
+      handleRemove(file, fileList) {
+        console.log(file, fileList);
+      },
+      handlePreview(file) {
+        console.log(file);
+      }
+    }
+  }
+</script>
+```
+:::
+
+### Contrôle de la liste de fichiers
+
+Utilisez `on-change` pour contrôler le comportement de la liste de fichiers.
+
+:::demo
+```html
+<el-upload
+  class="upload-demo"
+  action="https://jsonplaceholder.typicode.com/posts/"
+  :on-change="handleChange"
+  :file-list="fileList">
+  <el-button size="small" type="primary">Cliquer pour envoyer</el-button>
+  <div slot="tip" class="el-upload__tip">Fichiers jpg/png avec une taille inférieure à 500kb</div>
+</el-upload>
+<script>
+  export default {
+    data() {
+      return {
+        fileList: [{
+          name: 'food.jpeg',
+          url: 'https://fuss10.elemecdn.com/3/63/4e7f3a15429bfda99bce42a18cdd1jpeg.jpeg?imageMogr2/thumbnail/360x360/format/webp/quality/100'
+        }, {
+          name: 'food2.jpeg',
+          url: 'https://fuss10.elemecdn.com/3/63/4e7f3a15429bfda99bce42a18cdd1jpeg.jpeg?imageMogr2/thumbnail/360x360/format/webp/quality/100'
+        }]
+      };
+    },
+    methods: {
+      handleChange(file, fileList) {
+        this.fileList = fileList.slice(-3);
+      }
+    }
+  }
+</script>
+```
+:::
+
+### Envoi en déposant
+
+Vous pouvez déposer les fichiers par drag'n drop sur l'espace dédié.
+
+:::demo
+```html
+<el-upload
+  class="upload-demo"
+  drag
+  action="https://jsonplaceholder.typicode.com/posts/"
+  :on-preview="handlePreview"
+  :on-remove="handleRemove"
+  :file-list="fileList"
+  multiple>
+  <i class="el-icon-upload"></i>
+  <div class="el-upload__text">Déposer les fichiers ici ou<em>cliquez pour envoyer</em></div>
+  <div class="el-upload__tip" slot="tip">Fichiers jpg/png avec une taille inférieure à 500kb</div>
+</el-upload>
+```
+:::
+
+### Envoi manuel
+
+:::demo
+```html
+<el-upload
+  class="upload-demo"
+  ref="upload"
+  action="https://jsonplaceholder.typicode.com/posts/"
+  :auto-upload="false">
+  <el-button slot="trigger" size="small" type="primary">Choisir un fichier</el-button>
+  <el-button style="margin-left: 10px;" size="small" type="success" @click="submitUpload">Envoyer au serveur</el-button>
+  <div class="el-upload__tip" slot="tip">Fichiers jpg/png avec une taille inférieure à 500kb</div>
+</el-upload>
+<script>
+  export default {
+    methods: {
+      submitUpload() {
+        this.$refs.upload.submit();
+      }
+    }
+  }
+</script>
+```
+:::
+
+### Attributs
+
+Attribut      | Description          | Type      | Valeurs acceptées       | Défaut
+----| ----| ----| ----| ----
+action | Requis, l'url de requête. | string | — | —
+headers | Les headers de la requête. | object | — | —
+multiple | Si envoyer de multiples fichiers est autorisé. | boolean | — | —
+data | Options additionnelles de la requête. | object | — | —
+name | Identifiant du fichier. | string | — | file
+with-credentials | Si les cookies sont aussi envoyés. | boolean | — |false
+show-file-list | Si la liste des fichiers est affichée. | boolean | — | true
+ drag | Si le mode drag'n drop est activé. | boolean | — | false
+accept | [Types de fichiers](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input#attr-accept) acceptés, ne marche pas si `thumbnail-mode` est `true`. | string | — | —
+on-preview | Fonction pour quand le fichier est cliqué. | function(file) | — | —
+on-remove | Fonction pour quand des fichiers sont supprimés. | function(file, fileList) | — | —
+on-success | Fonction pour quand l'upload a réussi. | function(response, file, fileList) | — | —
+on-error | Fonction pour quand l'upload renvoi une erreur. | function(err, file, fileList) | — | —
+on-progress | Fonction pour quand l'upload est en cours. | function(event, file, fileList) | — | — |
+on-change | Fonction pour quand le statut d'un fichier change (sélection, upload, erreur...). | function(file, fileList) | — | — |
+before-upload | Fonction pour avant l'upload. Si `false` est retourné ou une `Promise` qui est ensuite rejetée, l'envoi sera annulé. | function(file) | — | —
+before-remove | Fonction pour avant la suppression de fichiers. Si `false` est retourné ou une `Promise` qui est ensuite rejetée, la suppression sera ensuite annulée. | function(file, fileList) | — | — |
+thumbnail-mode | Si les miniatures sont affichées. | boolean | — | false
+file-list | Les fichiers envoyé par défaut, e.g. [{name: 'food.jpg', url: 'https://xxx.cdn.com/xxx.jpg'}] | array | — | []
+list-type | Le type de liste de fichiers. | string | text/picture/picture-card | text |
+auto-upload | Si l'envoi est automatique. | boolean | — | true |
+http-request | Écrase le xhr par défaut, afin que vous puissiez implémenter votre propre fonction d'envoi. | function | — | — |
+disabled | Si le composant est désactivé. | boolean | — | false |
+limit | Nombre maximum d'envoi autorisés. | number | — | — |
+on-exceed | Fonction pour quand la limite d'envoi est dépassée. | function(files, fileList) | — | - |
+
+### Slot
+
+| Nom | Description |
+|------|--------|
+| trigger | Le contenu qui déclenche le Dialog du fichier. |
+| tip | Le contenu des tips. |
+
+### Méthodes
+
+| Méthode | Description | Paramètres |
+|---------- |-------- |---------- |
+| clearFiles | Efface la liste (non supporté dans `before-upload`). | — |
+| abort | Annule l'envoi en cours. | （ file: fileList's item ） |
+| submit | Envoi la liste de fichiers manuellement. |  —  |
diff --git a/examples/docs/zh-CN/affix.md b/examples/docs/zh-CN/affix.md
new file mode 100644
index 00000000000..6bf78f47d5e
--- /dev/null
+++ b/examples/docs/zh-CN/affix.md
@@ -0,0 +1,108 @@
+## Affix 固钉
+
+将页面元素钉在可视范围。
+
+
+### 何时使用
+
+当内容区域比较长，需要滚动页面时，这部分内容对应的操作或者导航需要在滚动范围内始终展现。常用于侧边菜单和按钮组合。
+页面可视范围过小时，慎用此功能以免遮挡页面内容。
+
+
+### 基本使用
+
+:::demo
+```html
+
+<template>
+  <div>
+    <el-affix :offsetTop="this.top">
+      <el-button type="primary" @click="()=>{this.top += 10}">Affix top</el-button>
+    </el-affix>
+    <br />
+    <el-affix :offsetBottom="this.bottom">
+      <el-button type="primary" @click="()=>{this.bottom += 10}">Affix bottom</el-button>
+    </el-affix>
+  </div>
+</template>
+
+<script>
+  export default {
+    data() {
+      return {
+        top: 10,
+        bottom: 10,
+      };
+    },
+  };
+</script>
+
+```
+:::
+
+#### 固定状态改变的回调
+
+可以获得是否固定的状态。
+
+:::demo
+```html
+<template>
+  <el-affix :offsetTop="120" @change="change">
+    <el-button>120px to affix top</el-button>
+  </el-affix>
+</template>
+<script>
+  export default {
+    methods: {
+      change(affixed) {
+        console.log(affixed);
+      },
+    },
+  };
+</script>
+```
+:::
+
+#### 设定滚动容器
+
+用 `target` 设置 `Affix` 需要监听其滚动事件的元素，默认为 `window`。
+
+:::demo
+```html
+<template>
+  <div style="height: 100px; overflow-y: scroll;" ref="container">
+    <div style="padding-top: 60px;height: 300px;background-image: url('https://zos.alipayobjects.com/rmsportal/RmjwQiJorKyobvI.jpg');">
+      <el-affix :target="() => this.$refs.container">
+        <el-button type="primary">
+          Fixed at the top of container
+        </el-button>
+      </el-affix>
+    </div>
+  </div>
+</template>
+
+
+```
+:::
+
+### API
+
+| 成员 | 说明 | 类型 | 默认值 |
+| --- | --- | --- | --- |
+| offsetBottom | 距离窗口底部达到指定偏移量后触发 | number |  |
+| offsetTop | 距离窗口顶部达到指定偏移量后触发 | number |  |
+| target | 设置 `Affix` 需要监听其滚动事件的元素，值为一个返回对应 DOM 元素的函数 | () => HTMLElement | () => window |
+
+#### 事件
+
+| 事件名称 | 说明                         | 回调参数          |
+| -------- | ---------------------------- | ----------------- |
+| change   | 固定状态改变时触发的回调函数 | Function(affixed) |
+
+**注意：**`Affix` 内的元素不要使用绝对定位，如需要绝对定位的效果，可以直接设置 `Affix` 为绝对定位：
+
+```html
+<el-affix :style="{ position: 'absolute', top: y, left: x}">
+  ...
+</el-affix>
+```
diff --git a/examples/docs/zh-CN/alert.md b/examples/docs/zh-CN/alert.md
index 47b1e17983d..7f84a0f16f2 100644
--- a/examples/docs/zh-CN/alert.md
+++ b/examples/docs/zh-CN/alert.md
@@ -1,22 +1,3 @@
-<script>
-  export default {
-    methods: {
-      hello() {
-        alert('Hello World!');
-      }
-    }
-  }
-</script>
-<style>
-  .demo-box.demo-alert .el-alert {
-    margin: 20px 0 0;
-  }
-
-  .demo-box.demo-alert .el-alert:first-child {
-    margin: 0;
-  }
-</style>
-
 ## Alert 警告
 
 用于页面中展示重要的提示信息。
@@ -48,6 +29,39 @@
 ```
 :::
 
+### 主题
+
+Alert 组件提供了两个不同的主题：`light`和`dark`。
+
+:::demo 通过设置`effect`属性来改变主题，默认为`light`。
+```html
+<template>
+  <el-alert
+    title="成功提示的文案"
+    type="success"
+    effect="dark">
+  </el-alert>
+  <el-alert
+    title="消息提示的文案"
+    type="info"
+    effect="dark">
+  </el-alert>
+  <el-alert
+    title="警告提示的文案"
+    type="warning"
+    effect="dark">
+  </el-alert>
+  <el-alert
+    title="错误提示的文案"
+    type="error"
+    effect="dark">
+  </el-alert>
+</template>
+```
+:::
+
+
+
 ### 自定义关闭按钮
 
 自定义关闭按钮为文字或其他符号。
@@ -209,11 +223,13 @@
 | center | 文字是否居中 | boolean | — | true |
 | close-text | 关闭按钮自定义文本 | string | — | — |
 | show-icon | 是否显示图标 | boolean | — | false |
+| effect | 选择提供的主题 | string | light/dark | light |
 
 ### Slot
 
 | Name | Description |
 |------|--------|
+| — | 描述 |
 | title | 标题的内容 |
 
 ### Events
diff --git a/examples/docs/zh-CN/avatar.md b/examples/docs/zh-CN/avatar.md
new file mode 100644
index 00000000000..316c0cc183c
--- /dev/null
+++ b/examples/docs/zh-CN/avatar.md
@@ -0,0 +1,253 @@
+## Avatar 头像
+
+用图标、图片或者字符的形式展示用户或事物信息。
+
+### 基本用法
+
+通过 `shape` 和 `size` 设置头像的形状和大小。
+
+:::demo
+
+```html
+<template>
+  <el-row class="demo-avatar demo-basic">
+    <el-col :span="12">
+      <div class="sub-title">circle</div>
+      <div class="demo-basic--circle">
+        <div class="block">
+          <el-avatar :size="50" :src="circleUrl"></el-avatar>
+        </div>
+        <div class="block" v-for="size in sizeList" :key="size">
+          <el-avatar :size="size" :src="circleUrl"></el-avatar>
+        </div>
+      </div>
+    </el-col>
+    <el-col :span="12">
+      <div class="sub-title">square</div>
+      <div class="demo-basic--circle">
+        <div class="block">
+          <el-avatar shape="square" :size="50" :src="squareUrl"></el-avatar>
+        </div>
+        <div class="block" v-for="size in sizeList" :key="size">
+          <el-avatar shape="square" :size="size" :src="squareUrl"></el-avatar>
+        </div>
+      </div>
+    </el-col>
+  </el-row>
+</template>
+<script>
+  export default {
+    data() {
+      return {
+        circleUrl:
+          'https://cube.elemecdn.com/3/7c/3ea6beec64369c2642b92c6726f1epng.png',
+        squareUrl:
+          'https://cube.elemecdn.com/9/c2/f0ee8a3c7c9638a54940382568c9dpng.png',
+        sizeList: ['large', 'medium', 'small'],
+      }
+    },
+  }
+</script>
+```
+
+:::
+
+### 展示类型
+
+支持三种类型：图标、图片和字符
+
+:::demo
+
+```html
+<template>
+  <div class="demo-type">
+    <div>
+      <el-avatar icon="el-icon-user-solid"></el-avatar>
+    </div>
+    <div>
+      <el-avatar
+        src="https://cube.elemecdn.com/0/88/03b0d39583f48206768a7534e55bcpng.png"
+      ></el-avatar>
+    </div>
+    <div>
+      <el-avatar> user </el-avatar>
+    </div>
+  </div>
+</template>
+```
+
+:::
+
+### Tooltip
+
+当 `text` 或者 `tooltip` 存在时，支持鼠标 hover 显示 tooltip
+
+:::demo
+
+```html
+<template>
+  <div class="demo-type">
+    <div>
+      <el-avatar
+        tooltip="This is a custom tooltip content"
+        icon="el-icon-user-solid"
+      ></el-avatar>
+    </div>
+    <div>
+      <el-avatar
+        text="element"
+        src="https://cube.elemecdn.com/0/88/03b0d39583f48206768a7534e55bcpng.png"
+      ></el-avatar>
+    </div>
+    <div>
+      <el-avatar text="张全蛋" bgColor="#409eff"></el-avatar>
+    </div>
+  </div>
+</template>
+<script>
+  export default {
+    methods: {
+      errorHandler() {
+        return true
+      },
+    },
+  }
+</script>
+```
+
+:::
+
+### 图片加载失败的 fallback 行为
+
+当展示类型为图片的时候，图片加载失败或没有传入 `src` 的 fallback 行为
+
+可以通过默认插槽自定义展示内容，也可以通过传入 `text` 属性传入占位文本
+
+:::demo
+
+```html
+<template>
+  <div class="demo-type">
+    <div>
+      <el-avatar src="https://empty" @error="errorHandler">
+        <img
+          src="https://cube.elemecdn.com/e/fd/0fc7d20532fdaf769a25683617711png.png"
+        />
+      </el-avatar>
+    </div>
+    <div>
+      <el-avatar
+        src="https://empty"
+        @error="errorHandler"
+        text="张全蛋"
+        bgColor="#409eff"
+      ></el-avatar>
+    </div>
+  </div>
+</template>
+<script>
+  export default {
+    methods: {
+      errorHandler() {
+        return true
+      },
+    },
+  }
+</script>
+```
+
+:::
+
+### 自定义 Text Formatter
+
+当使用 text 作为占位文本时，默认截取最后两个字符用于展示，hover 时显示完整文本
+
+也可以通过 `textFormatter` 方法自定义截取的行为
+
+:::demo
+
+```html
+<template>
+  <div class="demo-type">
+    <div>
+      <el-avatar text="张全蛋" bgColor="#409eff"></el-avatar>
+    </div>
+    <div>
+      <el-avatar
+        text="待分配"
+        bgColor="#409eff"
+        :text-formatter="(s) => s.slice(0, 1)"
+        :font-size="15"
+      ></el-avatar>
+    </div>
+    <div>
+      <el-avatar
+        text="Linus Torvalds"
+        bgColor="#409eff"
+        :text-formatter="(s) => s.split(' ').map(s=>s[0]).join('')"
+      ></el-avatar>
+    </div>
+  </div>
+</template>
+```
+
+:::
+
+### 图片如何适应容器框
+
+当展示类型为图片的时候，使用 `fit` 属性定义图片如何适应容器框，同原生 [object-fit](https://developer.mozilla.org/en-US/docs/Web/CSS/object-fit)。
+
+:::demo
+
+```html
+<template>
+  <div class="demo-fit">
+    <div class="block" v-for="fit in fits" :key="fit">
+      <span class="title">{{ fit }}</span>
+      <el-avatar shape="square" :size="100" :fit="fit" :src="url"></el-avatar>
+    </div>
+  </div>
+</template>
+<script>
+  export default {
+    data() {
+      return {
+        fits: ['fill', 'contain', 'cover', 'none', 'scale-down'],
+        url:
+          'https://fuss10.elemecdn.com/e/5d/4a731a90594a4af544c0c25941171jpeg.jpeg',
+      }
+    },
+  }
+</script>
+```
+
+:::
+
+### Attributes
+
+| 参数          | 说明                                                                                                                       | 类型          | 可选值                                     | 默认值                 |
+| ------------- | -------------------------------------------------------------------------------------------------------------------------- | ------------- | ------------------------------------------ | ---------------------- |
+| icon          | 设置头像的图标类型，参考 Icon 组件                                                                                         | string        |                                            |                        |
+| size          | 设置头像的大小                                                                                                             | number/string | number / large / medium / small            | large                  |
+| shape         | 设置头像的形状                                                                                                             | string        | circle / square                            | circle                 |
+| src           | 图片头像的资源地址                                                                                                         | string        |                                            |                        |
+| srcSet        | 以逗号分隔的一个或多个字符串列表表明一系列用户代理使用的可能的图像                                                         | string        |                                            |                        |
+| alt           | 描述图像的替换文本                                                                                                         | string        |                                            |                        |
+| fit           | 当展示类型为图片的时候，设置图片如何适应容器框                                                                             | string        | fill / contain / cover / none / scale-down | cover                  |
+| text          | 当图片无法加载并且没有使用默认插槽的时候，会将经过 `textFormatter` 处理后的文本作为占位符，也会用于 tooltip 的默认展示内容 | string        |                                            |                        |
+| fontSize      | 显示 `text` 值的文字大小                                                                                                   | number        |                                            | 12                     |
+| bgColor       | 背景颜色                                                                                                                   | string        |                                            | #c0c4cc                |
+| textFormatter | 用于格式化 `text`，以便显示缩写在头像占位符中，默认取最后两个字符                                                          | function      |                                            | (str) => str.slice(-2) |
+| tooltip       | tooltip 的内容，如果为空则使用 `text` 属性的值                                                                             | string        |                                            |                        |
+
+### Events
+
+| 事件名 | 说明                                                                 | 回调参数   |
+| ------ | -------------------------------------------------------------------- | ---------- |
+| error  | 图片类头像加载失败的回调， 返回 false 会关闭组件默认的 fallback 行为 | (e: Event) |
+
+### Slot
+
+| 名称    | 说明               |
+| ------- | ------------------ |
+| default | 自定义头像展示内容 |
diff --git a/examples/docs/zh-CN/backtop.md b/examples/docs/zh-CN/backtop.md
new file mode 100644
index 00000000000..a29983629cb
--- /dev/null
+++ b/examples/docs/zh-CN/backtop.md
@@ -0,0 +1,60 @@
+## Backtop 回到顶部
+
+返回页面顶部的操作按钮
+
+### 基础用法
+
+滑动页面即可看到右下方的按钮。
+:::demo
+
+```html
+<template>
+  Scroll down to see the bottom-right button.
+  <el-backtop target=".page-component__scroll .el-scrollbar__wrap"></el-backtop>
+</template>
+```
+
+:::
+
+### 自定义显示内容
+
+显示区域被固定为 40px \* 40px 的区域, 其中的内容可支持自定义。
+:::demo
+
+```html
+<template>
+  Scroll down to see the bottom-right button.
+  <el-backtop target=".page-component__scroll .el-scrollbar__wrap" :bottom="100">
+    <div
+      style="{
+        height: 100%;
+        width: 100%;
+        background-color: #f2f5f6;
+        box-shadow: 0 0 6px rgba(0,0,0, .12);
+        text-align: center;
+        line-height: 40px;
+        color: #1989fa;
+      }"
+    >
+      UP
+    </div>
+  </el-backtop>
+</template>
+```
+
+:::
+
+### Attributes
+
+| 参数              | 说明                             | 类型            | 可选值 | 默认值 |
+| ----------------- | -------------------------------- | --------------- | ------ | ------ |
+| target            | 触发滚动的对象                   | string          |        |        |
+| visibility-height | 滚动高度达到此参数值才出现       | number |        | 200    |
+| right             | 控制其显示位置, 距离页面右边距   | number |        | 40     |
+| bottom            | 控制其显示位置, 距离页面底部距离 | number |        | 40     |
+
+### Events
+
+| 事件名 | 说明               | 回调参数 |
+| ------ | ------------------ | -------- |
+| click  | 点击按钮触发的事件 | 点击事件 |
diff --git a/examples/docs/zh-CN/badge.md b/examples/docs/zh-CN/badge.md
index 1d866f18223..b6cabcef431 100644
--- a/examples/docs/zh-CN/badge.md
+++ b/examples/docs/zh-CN/badge.md
@@ -1,9 +1,3 @@
-<style>
-  .demo-badge.demo-box .el-dropdown {
-    vertical-align: middle;
-  }
-</style>
-
 ## Badge 标记
 
 出现在按钮、图标旁的数字或状态标记。
@@ -116,27 +110,6 @@
 ```
 :::
 
-<style scoped>
-  .share-button {
-    width: 36px;
-    padding: 10px;
-  }
-
-  .mark {
-    margin-top: 8px;
-    line-height: 1;
-    float: right;
-  }
-
-  .clearfix {
-    @utils-clearfix;
-  }
-
-  .item {
-    margin-right: 40px;
-  }
-</style>
-
 ### Attributes
 | 参数          | 说明            | 类型            | 可选值                 | 默认值   |
 |------------- |---------------- |---------------- |---------------------- |-------- |
diff --git a/examples/docs/zh-CN/border.md b/examples/docs/zh-CN/border.md
new file mode 100644
index 00000000000..4d602344499
--- /dev/null
+++ b/examples/docs/zh-CN/border.md
@@ -0,0 +1,135 @@
+<script>
+  import bus from '../../bus';
+  import { ACTION_USER_CONFIG_UPDATE } from '../../components/theme/constant.js';
+  const varMap = {
+    '$--box-shadow-light': 'boxShadowLight',
+    '$--box-shadow-base': 'boxShadowBase',
+    '$--border-radius-base': 'borderRadiusBase',
+    '$--border-radius-small': 'borderRadiusSmall'
+  };
+  const original = {
+    boxShadowLight: '0 2px 12px 0 rgba(0, 0, 0, 0.1)',
+    boxShadowBase: '0 2px 4px rgba(0, 0, 0, .12), 0 0 6px rgba(0, 0, 0, .04)',
+    borderRadiusBase: '4px',
+    borderRadiusSmall: '2px'
+  }
+  export default {
+    created() {
+      bus.$on(ACTION_USER_CONFIG_UPDATE, this.setGlobal);
+    },
+    mounted() {
+      this.setGlobal();
+    },
+    methods: {
+      setGlobal() {
+        if (window.userThemeConfig) {
+          this.global = window.userThemeConfig.global;
+        }
+      }
+    },
+    data() {
+      return {
+        global: {},
+        boxShadowLight: '',
+        boxShadowBase: '',
+        borderRadiusBase: '',
+        borderRadiusSmall: ''
+      }
+    },
+    watch: {
+      global: {
+        immediate: true,
+        handler(value) {
+          Object.keys(varMap).forEach((c) => {
+            if (value[c]) {
+              this[varMap[c]] = value[c]
+            } else {
+              this[varMap[c]] = original[varMap[c]]
+            }
+          });
+        }
+      }
+    }
+  }
+</script>
+
+## Border 边框
+
+我们对边框进行统一规范，可用于按钮、卡片、弹窗等组件里。
+
+### 边框
+
+我们提供了以下几种边框样式，以供选择。
+
+<table class="demo-border">
+  <tbody>
+    <tr>
+      <td class="text">名称</td>
+      <td class="text">粗细</td>
+      <td class="line">举例</td>
+    </tr>
+    <tr>
+      <td class="text">实线</td>
+      <td class="text">1px</td>
+      <td class="line">
+        <div></div>
+      </td>
+    </tr>
+    <tr>
+      <td class="text">虚线</td>
+      <td class="text">2px</td>
+      <td class="line">
+        <div class="dashed"></div>
+      </td>
+    </tr>
+  </tbody>
+</table>
+
+### 圆角
+
+我们提供了以下几种圆角样式，以供选择。
+
+<el-row :gutter="12" class="demo-radius">
+  <el-col :span="6" :xs="{span: 12}">
+    <div class="title">无圆角</div>
+    <div class="value">border-radius: 0px</div>
+    <div class="radius"></div>
+  </el-col>
+  <el-col :span="6" :xs="{span: 12}">
+    <div class="title">小圆角</div>
+    <div class="value">border-radius: {{borderRadiusSmall}}</div>
+    <div 
+      class="radius" 
+      :style="{ borderRadius: borderRadiusSmall }"
+    ></div>
+  </el-col>
+  <el-col :span="6" :xs="{span: 12}">
+    <div class="title">大圆角</div>
+    <div class="value">border-radius: {{borderRadiusBase}}</div>
+    <div 
+      class="radius"
+      :style="{ borderRadius: borderRadiusBase }"
+    ></div>
+  </el-col>
+  <el-col :span="6" :xs="{span: 12}">
+    <div class="title">圆形圆角</div>
+    <div class="value">border-radius: 30px</div>
+    <div class="radius radius-30"></div>
+  </el-col>
+</el-row>
+
+### 投影
+
+我们提供了以下几种投影样式，以供选择。
+
+<div 
+class="demo-shadow"
+:style="{ boxShadow: boxShadowBase }"
+></div>
+<span class="demo-shadow-text">基础投影 box-shadow: {{boxShadowBase}}</span>
+
+<div 
+class="demo-shadow"
+:style="{ boxShadow: boxShadowLight }"
+></div>
+<span class="demo-shadow-text">浅色投影 box-shadow: {{boxShadowLight}}</span>
diff --git a/examples/docs/zh-CN/button-group-enhance.md b/examples/docs/zh-CN/button-group-enhance.md
new file mode 100644
index 00000000000..1ad19790b09
--- /dev/null
+++ b/examples/docs/zh-CN/button-group-enhance.md
@@ -0,0 +1,112 @@
+## ElButtonGroupEnhance 可折叠按钮组
+
+### 基本用法
+
+可折叠的按钮组，常用于卡片底部放置聚合操作。
+
+:::demo
+
+```html
+<template>
+  <el-row :gutter="15">
+    <el-col :span="10">
+      <el-button-group-enhance
+        :buttons="buttons()"
+        type="primary"
+        :collapse-at="3"
+      />
+      <el-button-group-enhance
+        style="margin-top: 15px"
+        :buttons="buttons()"
+        :collapse-at="3"
+      />
+    </el-col>
+    <el-col :span="10">
+      <el-card shadow="hover">
+        <div class="content">
+          activate: {{activate}}
+        </div>
+        <el-button-group-enhance
+          :buttons="buttons()"
+          :collapse-at="3"
+        />
+      </el-card>
+      <el-card shadow="hover" style="margin-top: 15px">
+        <div class="content">
+          activate: {{activate}}
+        </div>
+        <el-button-group-enhance
+          :buttons="buttons()"
+          type="primary"
+          :collapse-at="3"
+        />
+      </el-card>
+    </el-col>
+  </el-row>
+</template>
+
+<script>
+export default {
+  data() {
+    return {
+      activate: true,
+      buttons: () => [
+        {
+          text: '查看应用信息',
+          click: () => {
+            return new Promise(r => setTimeout(r, 2000))
+          },
+        },
+        {
+          text: '开发者信息',
+        },
+        {
+          text: `${this.activate ? '禁' : '启'}用应用`,
+          click: () => {
+            this.activate = !this.activate
+          },
+        },
+        {
+          text: '删除应用',
+          show: !this.activate
+        },
+      ],
+    }
+  }
+}
+</script>
+<style lang="scss">
+.el-card .el-card__body {
+  padding: 0;
+
+  .content {
+    padding: 20px;
+  }
+  .el-button-group-enhance {
+    .el-button {
+      border-bottom: none;
+      border-radius: 0;
+      &:first-child {
+        border-left: none;
+      }
+      &.el-dropdown__caret-button {
+        border-right: none;
+      }
+    }
+  }
+}
+</style>
+```
+:::
+
+### Attributes
+| 参数      | 说明    | 类型      | 可选值       | 默认值   |
+|---------- |-------- |---------- |-------------  |-------- |
+| buttons     | 按钮配置列表  | array  |   —    |    []     |
+| buttons[0]     | el-button 的所有属性  | object  |   —    |    —     |
+| buttons[0].text     | 按钮文案  | string  |   —    |    —     |
+| buttons[0].click     | 点击按钮触发的操作  | function  |   —    |    —     |
+| collapseAt  | 从第几个按钮开始折叠  | number  |   —    |    2     |
+| moreText  | 折叠按钮的文案 | string  |   —    |    更多     |
+| size  | 尺寸 | string  |   mini /small / median    |  small |
+| type  | 类型 | string  | primary / success / warning / danger / info / text  | default  |
diff --git a/examples/docs/zh-CN/button.md b/examples/docs/zh-CN/button.md
index 892aa605aaa..37364aebc33 100644
--- a/examples/docs/zh-CN/button.md
+++ b/examples/docs/zh-CN/button.md
@@ -1,27 +1,3 @@
-<style>
-  .demo-box.demo-button {
-    .el-row {
-      margin-bottom: 20px;
-      
-      &:last-child {
-        margin-bottom: 0;
-      }
-    }
-    .el-button + .el-button {
-      margin-left: 10px;
-    }
-    .el-button-group {
-      .el-button + .el-button {
-        margin-left: 0;
-      }
-
-      & + .el-button-group {
-        margin-left: 10px;
-      }
-    }
-  }
-</style>
-
 ## Button 按钮
 常用的操作按钮。
 
diff --git a/examples/docs/zh-CN/calendar.md b/examples/docs/zh-CN/calendar.md
new file mode 100644
index 00000000000..2dc53b51156
--- /dev/null
+++ b/examples/docs/zh-CN/calendar.md
@@ -0,0 +1,66 @@
+## Calendar calendar
+
+显示日期
+
+### 基本
+
+:::demo 设置 `value` 来指定当前显示的月份。如果 `value` 未指定，则显示当月。`value` 支持 `v-model` 双向绑定。
+```html
+<el-calendar v-model="value">
+</el-calendar>
+
+<script>
+  export default {
+    data() {
+      return {
+        value: new Date()
+      }
+    }
+  }
+</script>
+```
+:::
+
+### 自定义内容
+
+:::demo 通过设置名为 `dateCell` 的 `scoped-slot` 来自定义日历单元格中显示的内容。在 `scoped-slot` 可以获取到 date（当前单元格的日期）, data（包括 type，isSelected，day 属性）。详情解释参考下方的 API 文档。
+```html
+<el-calendar>
+  <!-- 这里使用的是 2.5 slot 语法，对于新项目请使用 2.6 slot 语法-->
+  <template
+    slot="dateCell"
+    slot-scope="{date, data}">
+    <p :class="data.isSelected ? 'is-selected' : ''">
+      {{ data.day.split('-').slice(1).join('-') }} {{ data.isSelected ? '✔️' : ''}}
+    </p>
+  </template>
+</el-calendar>
+<style>
+  .is-selected {
+    color: #1989FA;
+  }
+</style>
+```
+:::
+
+### 自定义范围
+
+:::demo 设置 `range` 属性指定日历的显示范围。开始时间必须是周起始日，结束时间必须是周结束日，且时间跨度不能超过两个月。
+```html
+<el-calendar :range="['2019-03-04', '2019-03-24']">
+</el-calendar>
+```
+:::
+
+### Attributes
+| 参数             | 说明          | 类型      | 可选值        | 默认值  |
+|-----------------|-------------- |---------- |------------ |-------- |
+| value / v-model | 绑定值         | Date/string/number | —  | —      |
+| range           | 时间范围，包括开始时间与结束时间。开始时间必须是周一，结束时间必须是周日，且时间跨度不能超过两个月。 | Array     | —           | —      |
+| first-day-of-week | 周起始日	    | Number    | 1 到 7      |  1     |
+
+### dateCell scoped slot 参数
+| 参数             | 说明          | 类型      | 可选值        | 默认值  |
+|-----------------|-------------- |---------- |------------ |-------- |
+| date            | 单元格代表的日期 | Date      | —           | —      |
+| data            | { type, isSelected, day}，`type` 表示该日期的所属月份，可选值有 prev-month，current-month，next-month；`isSelected` 标明该日期是否被选中；`day` 是格式化的日期，格式为 yyyy-MM-dd    | Object      | —           | —      |
diff --git a/examples/docs/zh-CN/card.md b/examples/docs/zh-CN/card.md
index a25f89c0b54..78ef256c649 100644
--- a/examples/docs/zh-CN/card.md
+++ b/examples/docs/zh-CN/card.md
@@ -1,51 +1,3 @@
-<script>
-  import dateUtil from 'main/utils/date'
-  export default {
-    data() {
-      return {
-        currentDate: dateUtil.format(new Date(), 'yyyy-MM-dd HH:mm')
-      };
-    }
-  }
-</script>
-
-<style scoped>
-  .text {
-    font-size: 14px;
-  }
-
-  .time {
-    font-size: 13px;
-    color: #999;
-  }
-
-  .bottom {
-    margin-top: 13px;
-    line-height: 12px;
-  }
-
-  .item {
-    margin-bottom: 18px;
-  }
-
-  .button {
-    padding: 0;
-    float: right;
-  }
-
-  .image {
-    width: 100%;
-    display: block;
-  }
-
-  .clearfix {
-    @utils-clearfix;
-  }
-
-  .box-card {
-    width: 480px;
-  }
-</style>
 ## Card 卡片
 将信息聚合在卡片容器中展示。
 
@@ -128,7 +80,7 @@
 <el-row>
   <el-col :span="8" v-for="(o, index) in 2" :key="o" :offset="index > 0 ? 2 : 0">
     <el-card :body-style="{ padding: '0px' }">
-      <img src="~examples/assets/images/hamburger.png" class="image">
+      <img src="https://shadow.elemecdn.com/app/element/hamburger.9cf7b091-55e9-11e9-a976-7f4d0b07eef6.png" class="image">
       <div style="padding: 14px;">
         <span>好吃的汉堡</span>
         <div class="bottom clearfix">
diff --git a/examples/docs/zh-CN/carousel.md b/examples/docs/zh-CN/carousel.md
index bb1a334648b..030926da35b 100644
--- a/examples/docs/zh-CN/carousel.md
+++ b/examples/docs/zh-CN/carousel.md
@@ -1,64 +1,3 @@
-<script>
-  export default {
-    mounted() {
-      this.$nextTick(() => {
-        const demos = document.querySelectorAll('.source');
-        demos[0].style.padding = '0';
-        demos[0].className += ' small';
-        demos[3].className += ' medium';
-      });
-    }
-  }
-</script>
-<style>
-  .demo-carousel .block {
-    padding: 30px;
-    text-align: center;
-    border-right: solid 1px #EFF2F6;
-    display: inline-block;
-    width: 50%;
-    box-sizing: border-box;
-    &:last-child {
-      border-right: none;
-    }
-  }
-  
-  .demo-carousel .demonstration {
-    display: block;
-    color: #8492a6;
-    font-size: 14px;
-    margin-bottom: 20px;
-  }
-
-  .demo-carousel .el-carousel__container {
-    text-align: center;
-  }
-  
-  .demo-carousel .el-carousel__item {
-    h3 {
-      color: #fff;
-      font-size: 18px;
-      line-height: 300px;
-      margin: 0;
-    }
-    &:nth-child(2n) {
-      background-color: #99a9bf;
-    }
-    &:nth-child(2n+1) {
-      background-color: #d3dce6;
-    }
-  }
-  
-  .demo-carousel .small h3 {
-    font-size: 14px;
-    line-height: 150px;
-  }
-
-  .demo-carousel .medium h3 {
-    font-size: 14px;
-    line-height: 200px;
-  }
-</style>
 ## Carousel 走马灯
 
 在有限空间内，循环播放同一类型的图片、文字等内容
@@ -74,7 +13,7 @@
     <span class="demonstration">默认 Hover 指示器触发</span>
     <el-carousel height="150px">
       <el-carousel-item v-for="item in 4" :key="item">
-        <h3>{{ item }}</h3>
+        <h3 class="small">{{ item }}</h3>
       </el-carousel-item>
     </el-carousel>
   </div>
@@ -82,7 +21,7 @@
     <span class="demonstration">Click 指示器触发</span>
     <el-carousel trigger="click" height="150px">
       <el-carousel-item v-for="item in 4" :key="item">
-        <h3>{{ item }}</h3>
+        <h3 class="small">{{ item }}</h3>
       </el-carousel-item>
     </el-carousel>
   </div>
@@ -183,7 +122,39 @@
 <template>
   <el-carousel :interval="4000" type="card" height="200px">
     <el-carousel-item v-for="item in 6" :key="item">
-      <h3>{{ item }}</h3>
+      <h3 class="medium">{{ item }}</h3>
+    </el-carousel-item>
+  </el-carousel>
+</template>
+
+<style>
+  .el-carousel__item h3 {
+    color: #475669;
+    font-size: 14px;
+    opacity: 0.75;
+    line-height: 200px;
+    margin: 0;
+  }
+  
+  .el-carousel__item:nth-child(2n) {
+    background-color: #99a9bf;
+  }
+  
+  .el-carousel__item:nth-child(2n+1) {
+    background-color: #d3dce6;
+  }
+</style>
+```
+:::
+
+### 方向
+默认情况下，`direction` 为 `horizontal`。通过设置 `direction` 为 `vertical` 来让走马灯在垂直方向上显示。
+:::demo
+```html
+<template>
+  <el-carousel height="200px" direction="vertical" :autoplay="false">
+    <el-carousel-item v-for="item in 3" :key="item">
+      <h3 class="medium">{{ item }}</h3>
     </el-carousel-item>
   </el-carousel>
 </template>
@@ -220,6 +191,7 @@
 | arrow | 切换箭头的显示时机 | string | always/hover/never | hover |
 | type | 走马灯的类型 | string | card | — |
 | loop | 是否循环显示 | boolean | - | true |
+| direction | 走马灯展示的方向 | string | horizontal/vertical | horizontal |
 
 ### Carousel Events
 | 事件名称 | 说明 | 回调参数 |
diff --git a/examples/docs/zh-CN/cascader.md b/examples/docs/zh-CN/cascader.md
index 88126071b7d..ba11bc9e01d 100644
--- a/examples/docs/zh-CN/cascader.md
+++ b/examples/docs/zh-CN/cascader.md
@@ -1,18 +1,34 @@
+## Cascader 级联选择器
+
+当一个数据集合有清晰的层级结构时，可通过级联选择器逐级查看并选择。
+
+### 基础用法
+
+有两种触发子菜单的方式
+
+:::demo 只需为 Cascader 的`options`属性指定选项数组即可渲染出一个级联选择器。通过`props.expandTrigger`可以定义展开子级菜单的触发方式。
+```html
+<div class="block">
+  <span class="demonstration">默认 click 触发子菜单</span>
+  <el-cascader
+    v-model="value"
+    :options="options"
+    @change="handleChange"></el-cascader>
+</div>
+<div class="block">
+  <span class="demonstration">hover 触发子菜单</span>
+  <el-cascader
+    v-model="value"
+    :options="options"
+    :props="{ expandTrigger: 'hover' }"
+    @change="handleChange"></el-cascader>
+</div>
+
 <script>
   export default {
     data() {
       return {
-        options2: [{
-          label: '江苏',
-          cities: []
-        }, {
-          label: '浙江',
-          cities: []
-        }],
-        props: {
-          value: 'label',
-          children: 'cities'
-        },
+        value: [],
         options: [{
           value: 'zhinan',
           label: '指南',
@@ -207,104 +223,26 @@
             value: 'jiaohu',
             label: '组件交互文档'
           }]
-        }],
-        optionsWithDisabled: [],
-        selectedOptions: [],
-        selectedOptions2: [],
-        selectedOptions3: ['zujian', 'data', 'tag']
+        }]
       };
     },
-    created() {
-      this.optionsWithDisabled = JSON.parse(JSON.stringify(this.options));
-      this.optionsWithDisabled[0].disabled = true;
-    },
-    mounted() {
-      this.$nextTick(() => {
-        const demos = document.querySelectorAll('.source');
-        demos[0].style.padding = '0';
-        demos[demos.length - 1].style.padding = '0';
-      });
-    },
     methods: {
-      handleItemChange(val) {
-        console.log('active item:', val);
-        setTimeout(_ => {
-          if (val.indexOf('江苏') > -1 && !this.options2[0].cities.length) {
-            this.options2[0].cities = [{
-              label: '南京'
-            }];
-          } else if (val.indexOf('浙江') > -1 && !this.options2[1].cities.length) {
-            this.options2[1].cities = [{
-              label: '杭州'
-            }];
-          }
-        }, 300);
-      },
       handleChange(value) {
         console.log(value);
       }
     }
   };
 </script>
+```
+:::
 
-<style>
-  .demo-cascader {
-    .el-cascader {
-      width: 222px;
-    }
-  }
-  .demo-cascader-size {
-    .el-cascader {
-      vertical-align: top;
-      margin-right: 15px;
-    }
-  }
-  .demo-cascader .block {
-    padding: 30px 0;
-    text-align: center;
-    border-right: solid 1px #EFF2F6;
-    display: inline-block;
-    width: 50%;
-    box-sizing: border-box;
-    &:last-child {
-      border-right: none;
-    }
-  }
-  .demo-cascader .demonstration {
-    display: block;
-    color: #8492a6;
-    font-size: 14px;
-    margin-bottom: 20px;
-  }
-</style>
-
-## Cascader 级联选择器
-
-当一个数据集合有清晰的层级结构时，可通过级联选择器逐级查看并选择。
-
-### 基础用法
+### 禁用选项
 
-有两种触发子菜单的方式
+通过在数据源中设置 `disabled` 字段来声明该选项是禁用的
 
-:::demo 只需为 Cascader 的`options`属性指定选项数组即可渲染出一个级联选择器。通过`expand-trigger`可以定义展开子级菜单的触发方式。本例还展示了`change`事件，它的参数为 Cascader 的绑定值：一个由各级菜单的值所组成的数组。
+:::demo 本例中，`options`指定的数组中的第一个元素含有`disabled: true`键值对，因此是禁用的。在默认情况下，Cascader 会检查数据中每一项的`disabled`字段是否为`true`，如果你的数据中表示禁用含义的字段名不为`disabled`，可以通过`props.disabled`属性来指定（详见下方 API 表格）。当然，`value`、`label`和`children`这三个字段名也可以通过同样的方式指定。
 ```html
-<div class="block">
-  <span class="demonstration">默认 click 触发子菜单</span>
-  <el-cascader
-    :options="options"
-    v-model="selectedOptions"
-    @change="handleChange">
-  </el-cascader>
-</div>
-<div class="block">
-  <span class="demonstration">hover 触发子菜单</span>
-  <el-cascader
-    expand-trigger="hover"
-    :options="options"
-    v-model="selectedOptions2"
-    @change="handleChange">
-  </el-cascader>
-</div>
+<el-cascader :options="options"></el-cascader>
 
 <script>
   export default {
@@ -313,6 +251,7 @@
         options: [{
           value: 'zhinan',
           label: '指南',
+          disabled: true,
           children: [{
             value: 'shejiyuanze',
             label: '设计原则',
@@ -504,38 +443,29 @@
             value: 'jiaohu',
             label: '组件交互文档'
           }]
-        }],
-        selectedOptions: [],
-        selectedOptions2: []
+        }]
       };
-    },
-    methods: {
-      handleChange(value) {
-        console.log(value);
-      }
     }
   };
 </script>
 ```
 :::
 
-### 禁用选项
+### 可清空
 
-通过在数据源中设置 `disabled` 字段来声明该选项是禁用的
+通过 `clearable` 设置输入框可清空
 
-:::demo 本例中，`options`指定的数组中的第一个元素含有`disabled: true`键值对，因此是禁用的。在默认情况下，Cascader 会检查数据中每一项的`disabled`字段是否为`true`，如果你的数据中表示禁用含义的字段名不为`disabled`，可以通过`props`属性来指定（详见下方 API 表格）。当然，`value`、`label`和`children`这三个字段名也可以通过同样的方式指定。
+:::demo
 ```html
-<el-cascader
-  :options="optionsWithDisabled"
-></el-cascader>
+<el-cascader :options="options" clearable></el-cascader>
+
 <script>
   export default {
     data() {
       return {
-        optionsWithDisabled: [{
+        options: [{
           value: 'zhinan',
           label: '指南',
-          disabled: true,
           children: [{
             value: 'shejiyuanze',
             label: '设计原则',
@@ -728,9 +658,9 @@
             label: '组件交互文档'
           }]
         }]
-      };
+      }
     }
-  };
+  }
 </script>
 ```
 :::
@@ -741,10 +671,8 @@
 
 :::demo 属性`show-all-levels`定义了是否显示完整的路径，将其赋值为`false`则仅显示最后一级
 ```html
-<el-cascader
-  :options="options"
-  :show-all-levels="false"
-></el-cascader>
+<el-cascader :options="options" :show-all-levels="false"></el-cascader>
+
 <script>
   export default {
     data() {
@@ -951,14 +879,109 @@
 ```
 :::
 
-### 默认值
+### 多选
+
+可通过 `props.multiple = true` 来开启多选模式
 
-:::demo 默认值通过数组的方式指定。
+:::demo 在开启多选模式后，默认情况下会展示所有已选中的选项的Tag，你可以使用`collapse-tags`来折叠Tag
 ```html
-<el-cascader
-  :options="options"
-  v-model="selectedOptions3"
-></el-cascader>
+<div class="block">
+  <span class="demonstration">默认显示所有Tag</span>
+  <el-cascader
+    :options="options"
+    :props="props"
+    clearable></el-cascader>
+</div>
+<div class="block">
+  <span class="demonstration">折叠展示Tag</span>
+  <el-cascader
+    :options="options"
+    :props="props"
+    collapse-tags
+    clearable></el-cascader>
+</div>
+
+<script>
+  export default {
+    data() {
+      return {
+        props: { multiple: true },
+        options: [{
+          value: 1,
+          label: '东南',
+          children: [{
+            value: 2,
+            label: '上海',
+            children: [
+              { value: 3, label: '普陀' },
+              { value: 4, label: '黄埔' },
+              { value: 5, label: '徐汇' }
+            ]
+          }, {
+            value: 7,
+            label: '江苏',
+            children: [
+              { value: 8, label: '南京' },
+              { value: 9, label: '苏州' },
+              { value: 10, label: '无锡' }
+            ]
+          }, {
+            value: 12,
+            label: '浙江',
+            children: [
+              { value: 13, label: '杭州' },
+              { value: 14, label: '宁波' },
+              { value: 15, label: '嘉兴' }
+            ]
+          }]
+        }, {
+          value: 17,
+          label: '西北',
+          children: [{
+            value: 18,
+            label: '陕西',
+            children: [
+              { value: 19, label: '西安' },
+              { value: 20, label: '延安' }
+            ]
+          }, {
+            value: 21,
+            label: '新疆维吾尔族自治区',
+            children: [
+              { value: 22, label: '乌鲁木齐' },
+              { value: 23, label: '克拉玛依' }
+            ]
+          }]
+        }]
+      };
+    }
+  };
+</script>
+```
+:::
+
+
+### 选择任意一级选项
+
+在单选模式下，你只能选择叶子节点；而在多选模式下，勾选父节点真正选中的都是叶子节点。启用该功能后，可让父子节点取消关联，选择任意一级选项。
+
+:::demo 可通过 `props.checkStrictly = true` 来设置父子节点取消选中关联，从而达到选择任意一级选项的目的。
+```html
+<div class="block">
+  <span class="demonstration">单选选择任意一级选项</span>
+  <el-cascader
+    :options="options"
+    :props="{ checkStrictly: true }"
+    clearable></el-cascader>
+</div>
+<div class="block">
+  <span class="demonstration">多选选择任意一级选项</span>
+  <el-cascader
+    :options="options"
+    :props="{ multiple: true, checkStrictly: true }"
+    clearable></el-cascader>
+</div>
+
 <script>
   export default {
     data() {
@@ -1157,8 +1180,44 @@
             value: 'jiaohu',
             label: '组件交互文档'
           }]
-        }],
-        selectedOptions3: ['zujian', 'data', 'tag']
+        }]
+      };
+    }
+  };
+</script>
+```
+:::
+
+### 动态加载
+
+当选中某一级时，动态加载该级下的选项。
+
+:::demo 通过`lazy`开启动态加载，并通过`lazyload`来设置加载数据源的方法。`lazyload`方法有两个参数，第一个参数`node`为当前点击的节点，第二个`resolve`为数据加载完成的回调(必须调用)。为了更准确的显示节点的状态，还可以对节点数据添加是否为叶子节点的标志位 (默认字段为`leaf`，可通过`props.leaf`修改)，否则会简单的以有无子节点来判断是否为叶子节点。
+```html
+<el-cascader :props="props"></el-cascader>
+
+<script>
+  let id = 0;
+
+  export default {
+    data() {
+      return {
+        props: {
+          lazy: true,
+          lazyLoad (node, resolve) {
+            const { level } = node;
+            setTimeout(() => {
+              const nodes = Array.from({ length: level + 1 })
+                .map(item => ({
+                  value: ++id,
+                  label: `选项${id}`,
+                  leaf: level >= 2
+                }));
+              // 通过调用resolve将子节点数据返回，通知组件数据加载完成
+              resolve(nodes);
+            }, 1000);
+          }
+        }
       };
     }
   };
@@ -1166,16 +1225,28 @@
 ```
 :::
 
-### 选择即改变
+### 可搜索
 
-点击或移入选项即表示选中该项，可用于选择任意一级菜单的选项。
+可以快捷地搜索选项并选择。
 
-:::demo 若需要允许用户选择任意一级选项，则可将`change-on-select`赋值为`true`
+:::demo 将`filterable`赋值为`true`即可打开搜索功能，默认会匹配节点的`label`或所有父节点的`label`(由`show-all-levels`决定)中包含输入值的选项。你也可以用`filter-method`自定义搜索逻辑，接受一个函数，第一个参数是节点`node`，第二个参数是搜索关键词`keyword`，通过返回布尔值表示是否命中。
 ```html
-<el-cascader
-  :options="options"
-  change-on-select
-></el-cascader>
+<div class="block">
+  <span class="demonstration">单选可搜索</span>
+  <el-cascader
+    placeholder="试试搜索：指南"
+    :options="options"
+    filterable></el-cascader>
+</div>
+<div class="block">
+  <span class="demonstration">多选可搜索</span>
+  <el-cascader
+    placeholder="试试搜索：指南"
+    :options="options"
+    :props="{ multiple: true }"
+    filterable></el-cascader>
+</div>
+
 <script>
   export default {
     data() {
@@ -1382,80 +1453,232 @@
 ```
 :::
 
-### 动态加载次级选项
+### 自定义节点内容
 
-当选中某一级时，动态加载该级下的选项。
+可以自定义备选项的节点内容
 
-:::demo 本例的选项数据源在初始化时不包含城市数据。利用`active-item-change`事件，可以在用户点击某个省份时拉取该省份下的城市数据。此外，本例还展示了`props`属性的用法。
+:::demo 可以通过`scoped slot`对级联选择器的备选项的节点内容进行自定义，scoped slot会传入两个字段 `node` 和 `data`，分别表示当前节点的 Node 对象和数据。
 ```html
-<el-cascader
-  :options="options2"
-  @active-item-change="handleItemChange"
-  :props="props"
-></el-cascader>
+<el-cascader :options="options">
+  <template slot-scope="{ node, data }">
+    <span>{{ data.label }}</span>
+    <span v-if="!node.isLeaf"> ({{ data.children.length }}) </span>
+  </template>
+</el-cascader>
 
 <script>
   export default {
     data() {
       return {
-        options2: [{
-          label: '江苏',
-          cities: []
+        options: [{
+          value: 'zhinan',
+          label: '指南',
+          children: [{
+            value: 'shejiyuanze',
+            label: '设计原则',
+            children: [{
+              value: 'yizhi',
+              label: '一致'
+            }, {
+              value: 'fankui',
+              label: '反馈'
+            }, {
+              value: 'xiaolv',
+              label: '效率'
+            }, {
+              value: 'kekong',
+              label: '可控'
+            }]
+          }, {
+            value: 'daohang',
+            label: '导航',
+            children: [{
+              value: 'cexiangdaohang',
+              label: '侧向导航'
+            }, {
+              value: 'dingbudaohang',
+              label: '顶部导航'
+            }]
+          }]
         }, {
-          label: '浙江',
-          cities: []
-        }],
-        props: {
-          value: 'label',
-          children: 'cities'
-        }
-      };
-    },
-
-    methods: {
-      handleItemChange(val) {
-        console.log('active item:', val);
-        setTimeout(_ => {
-          if (val.indexOf('江苏') > -1 && !this.options2[0].cities.length) {
-            this.options2[0].cities = [{
-              label: '南京'
-            }];
-          } else if (val.indexOf('浙江') > -1 && !this.options2[1].cities.length) {
-            this.options2[1].cities = [{
-              label: '杭州'
-            }];
-          }
-        }, 300);
+          value: 'zujian',
+          label: '组件',
+          children: [{
+            value: 'basic',
+            label: 'Basic',
+            children: [{
+              value: 'layout',
+              label: 'Layout 布局'
+            }, {
+              value: 'color',
+              label: 'Color 色彩'
+            }, {
+              value: 'typography',
+              label: 'Typography 字体'
+            }, {
+              value: 'icon',
+              label: 'Icon 图标'
+            }, {
+              value: 'button',
+              label: 'Button 按钮'
+            }]
+          }, {
+            value: 'form',
+            label: 'Form',
+            children: [{
+              value: 'radio',
+              label: 'Radio 单选框'
+            }, {
+              value: 'checkbox',
+              label: 'Checkbox 多选框'
+            }, {
+              value: 'input',
+              label: 'Input 输入框'
+            }, {
+              value: 'input-number',
+              label: 'InputNumber 计数器'
+            }, {
+              value: 'select',
+              label: 'Select 选择器'
+            }, {
+              value: 'cascader',
+              label: 'Cascader 级联选择器'
+            }, {
+              value: 'switch',
+              label: 'Switch 开关'
+            }, {
+              value: 'slider',
+              label: 'Slider 滑块'
+            }, {
+              value: 'time-picker',
+              label: 'TimePicker 时间选择器'
+            }, {
+              value: 'date-picker',
+              label: 'DatePicker 日期选择器'
+            }, {
+              value: 'datetime-picker',
+              label: 'DateTimePicker 日期时间选择器'
+            }, {
+              value: 'upload',
+              label: 'Upload 上传'
+            }, {
+              value: 'rate',
+              label: 'Rate 评分'
+            }, {
+              value: 'form',
+              label: 'Form 表单'
+            }]
+          }, {
+            value: 'data',
+            label: 'Data',
+            children: [{
+              value: 'table',
+              label: 'Table 表格'
+            }, {
+              value: 'tag',
+              label: 'Tag 标签'
+            }, {
+              value: 'progress',
+              label: 'Progress 进度条'
+            }, {
+              value: 'tree',
+              label: 'Tree 树形控件'
+            }, {
+              value: 'pagination',
+              label: 'Pagination 分页'
+            }, {
+              value: 'badge',
+              label: 'Badge 标记'
+            }]
+          }, {
+            value: 'notice',
+            label: 'Notice',
+            children: [{
+              value: 'alert',
+              label: 'Alert 警告'
+            }, {
+              value: 'loading',
+              label: 'Loading 加载'
+            }, {
+              value: 'message',
+              label: 'Message 消息提示'
+            }, {
+              value: 'message-box',
+              label: 'MessageBox 弹框'
+            }, {
+              value: 'notification',
+              label: 'Notification 通知'
+            }]
+          }, {
+            value: 'navigation',
+            label: 'Navigation',
+            children: [{
+              value: 'menu',
+              label: 'NavMenu 导航菜单'
+            }, {
+              value: 'tabs',
+              label: 'Tabs 标签页'
+            }, {
+              value: 'breadcrumb',
+              label: 'Breadcrumb 面包屑'
+            }, {
+              value: 'dropdown',
+              label: 'Dropdown 下拉菜单'
+            }, {
+              value: 'steps',
+              label: 'Steps 步骤条'
+            }]
+          }, {
+            value: 'others',
+            label: 'Others',
+            children: [{
+              value: 'dialog',
+              label: 'Dialog 对话框'
+            }, {
+              value: 'tooltip',
+              label: 'Tooltip 文字提示'
+            }, {
+              value: 'popover',
+              label: 'Popover 弹出框'
+            }, {
+              value: 'card',
+              label: 'Card 卡片'
+            }, {
+              value: 'carousel',
+              label: 'Carousel 走马灯'
+            }, {
+              value: 'collapse',
+              label: 'Collapse 折叠面板'
+            }]
+          }]
+        }, {
+          value: 'ziyuan',
+          label: '资源',
+          children: [{
+            value: 'axure',
+            label: 'Axure Components'
+          }, {
+            value: 'sketch',
+            label: 'Sketch Templates'
+          }, {
+            value: 'jiaohu',
+            label: '组件交互文档'
+          }]
+        }]
       }
     }
-  };
+  }
 </script>
 ```
 :::
 
-### 可搜索
+### 级联面板
 
-可以快捷地搜索选项并选择。
+级联面板是级联选择器的核心组件，与级联选择器一样，有单选、多选、动态加载等多种功能。
 
-:::demo 将`filterable`赋值为`true`即可打开搜索功能。
+:::demo 和级联选择器一样，通过`options`来指定选项，也可通过`props`来设置多选、动态加载等功能，具体详情见下方API表格。
 ```html
-<div class="block">
-  <span class="demonstration">只可选择最后一级菜单的选项</span>
-  <el-cascader
-    placeholder="试试搜索：指南"
-    :options="options"
-    filterable
-  ></el-cascader>
-</div>
-<div class="block">
-  <span class="demonstration">可选择任意一级菜单的选项</span>
-  <el-cascader
-    placeholder="试试搜索：指南"
-    :options="options"
-    filterable
-    change-on-select
-  ></el-cascader>
-</div>
+<el-cascader-panel :options="options"></el-cascader-panel>
 
 <script>
   export default {
@@ -1663,38 +1886,81 @@
 ```
 :::
 
-### Attributes
+### Cascader Attributes
 | 参数      | 说明    | 类型      | 可选值       | 默认值   |
 |---------- |-------- |---------- |-------------  |-------- |
-| options | 可选项数据源，键名可通过 `props` 属性配置 | array | — | — |
+| value / v-model | 选中项绑定值 | - | — | — |
+| options | 可选项数据源，键名可通过 `Props` 属性配置 | array | — | — |
 | props | 配置选项，具体见下表 | object | — | — |
-| value | 选中项绑定值   | array | — | — |
-| separator | 选项分隔符 | string | — | 斜杠'/' |
-| popper-class | 自定义浮层类名   | string | —  | — |
+| size | 尺寸 | string | medium / small / mini | — |
 | placeholder | 输入框占位文本 | string | — | 请选择 |
 | disabled | 是否禁用 | boolean | — | false |
-| clearable | 是否支持清空选项 | boolean | — | false |
-| expand-trigger | 次级菜单的展开方式 | string | click / hover | click |
+| clearable | 是否支持清空选项 | boolean | — | true |
 | show-all-levels | 输入框中是否显示选中值的完整路径 | boolean | — | true |
-| filterable | 是否可搜索选项 | boolean | — | — |
+| collapse-tags | 多选模式下是否折叠Tag | boolean | - | false |
+| separator | 选项分隔符 | string | — | 斜杠' / ' |
+| filterable | 是否可搜索选项 | boolean | — | true |
+| filter-method | 自定义搜索逻辑，第一个参数是节点`node`，第二个参数是搜索关键词`keyword`，通过返回布尔值表示是否命中 | function(node, keyword) | - | - |
 | debounce | 搜索关键词输入的去抖延迟，毫秒 | number | — | 300 |
-| change-on-select | 是否允许选择任意一级的选项 | boolean | — | false |
-| size | 尺寸 | string | medium / small / mini | — |
 | before-filter | 筛选之前的钩子，参数为输入的值，若返回 false 或者返回 Promise 且被 reject，则停止筛选 | function(value) | — | — |
+| popper-class | 自定义浮层类名   | string | —  | — |
 
-### props
-| 参数     | 说明              | 类型   | 可选值 | 默认值 |
-| -------- | ----------------- | ------ | ------ | ------ |
-| value    | 指定选项的值为选项对象的某个属性值 | string | — | — |
-| label    | 指定选项标签为选项对象的某个属性值 | string | — | — |
-| children | 指定选项的子选项为选项对象的某个属性值 | string | — | — |
-| disabled | 指定选项的禁用为选项对象的某个属性值 | string | — | — |
-
-### Events
+### Cascader Events
 | 事件名称      | 说明    | 回调参数      |
 |---------- |-------- |---------- |
-| change | 当绑定值变化时触发的事件 | 当前值 |
-| active-item-change | 当父级选项变化时触发的事件，仅在 `change-on-select` 为 `false` 时可用 | 各父级选项组成的数组 |
-| blur | 在 Cascader 失去焦点时触发 | (event: Event) |
-| focus | 在 Cascader 获得焦点时触发 | (event: Event) |
+| change | 当选中节点变化时触发 | 选中节点的值 |
+| expand-change | 当展开节点发生变化时触发 | 各父级选项值组成的数组 |
+| blur | 当失去焦点时触发 | (event: Event) |
+| focus | 当获得焦点时触发 | (event: Event) |
 | visible-change | 下拉框出现/隐藏时触发 | 出现则为 true，隐藏则为 false |
+| remove-tag | 在多选模式下，移除Tag时触发 | 移除的Tag对应的节点的值 |
+
+### Cascader Methods
+| 方法名 | 说明 | 参数 |
+| ---- | ---- | ---- |
+| getCheckedNodes | 获取选中的节点 | (leafOnly) 是否只是叶子节点，默认值为 `false` |
+
+### Cascader Slots
+| 名称     | 说明 |
+|---------|-------------|
+| - | 自定义备选项的节点内容，参数为 { node, data }，分别为当前节点的 Node 对象和数据 |
+| empty  | 无匹配选项时的内容 |
+
+### CascaderPanel Attributes
+| 参数      | 说明    | 类型      | 可选值       | 默认值   |
+|---------- |-------- |---------- |-------------  |-------- |
+| value / v-model | 选中项绑定值 | - | — | — |
+| options | 可选项数据源，键名可通过 `Props` 属性配置 | array | — | — |
+| props | 配置选项，具体见下表 | object | — | — |
+
+### CascaderPanel Events
+| 事件名称      | 说明    | 回调参数      |
+|---------- |-------- |---------- |
+| change | 当选中节点变化时触发 | 选中节点的值 |
+| expand-change | 当展开节点发生变化时触发 | 各父级选项值组成的数组 |
+
+### CascaderPanel Methods
+| 方法名 | 说明 | 参数 |
+| ---- | ---- | ---- |
+| getCheckedNodes | 获取选中的节点数组 | (leafOnly) 是否只是叶子节点，默认值为 `false` |
+| clearCheckedNodes | 清空选中的节点 | - |
+
+### CascaderPanel Slots
+| 名称     | 说明 |
+|---------|-------------|
+| - | 自定义备选项的节点内容，参数为 { node, data }，分别为当前节点的 Node 对象和数据 |
+
+### Props
+| 参数     | 说明              | 类型   | 可选值 | 默认值 |
+| -------- | ----------------- | ------ | ------ | ------ |
+| expandTrigger | 次级菜单的展开方式 | string | click / hover | 'click' |
+| multiple | 是否多选 | boolean | - | false |
+| checkStrictly | 是否严格的遵守父子节点不互相关联 | boolean | - | false |
+| emitPath | 在选中节点改变时，是否返回由该节点所在的各级菜单的值所组成的数组，若设置 false，则只返回该节点的值 | boolean | - | true |
+| lazy | 是否动态加载子节点，需与 lazyLoad 方法结合使用 | boolean | - | false |
+| lazyLoad | 加载动态数据的方法，仅在 lazy 为 true 时有效 | function(node, resolve)，`node`为当前点击的节点，`resolve`为数据加载完成的回调(必须调用) | - | - |
+| value    | 指定选项的值为选项对象的某个属性值 | string | — | 'value' |
+| label    | 指定选项标签为选项对象的某个属性值 | string | — | 'label' |
+| children | 指定选项的子选项为选项对象的某个属性值 | string | — | 'children' |
+| disabled | 指定选项的禁用为选项对象的某个属性值 | string | — | 'disabled' |
+| leaf     | 指定选项的叶子节点的标志位为选项对象的某个属性值 | string | — | 'leaf' |
diff --git a/examples/docs/zh-CN/checkbox-img-button.md b/examples/docs/zh-CN/checkbox-img-button.md
new file mode 100644
index 00000000000..7cee417363b
--- /dev/null
+++ b/examples/docs/zh-CN/checkbox-img-button.md
@@ -0,0 +1,130 @@
+## CheckboxImgButton 带图片的Checkbox
+
+该组件支持 `el-checkbox` 的所有属性和方法，相关文档可参考`el-checkbox`组件
+
+### 自定义内容用法
+
+自定义内容 -- `vertical`属性可设置纵向和横向（默认）
+
+:::demo 
+```html
+<template>
+  <div style="display:flex;">
+    <el-checkbox-img-button v-model="checked" label="1">
+      <div style="padding:5px 20px">自定义内容</div>
+      <div style="padding:5px 20px;">自定义内容</div>
+    </el-checkbox-img-button>
+
+    <el-checkbox-img-button v-model="checked" label="2" vertical>
+      <div style="padding:5px 20px">自定义内容</div>
+      <div style="padding:5px 20px;">自定义内容</div>
+    </el-checkbox-img-button>
+
+    <el-checkbox-img-button v-model="checked" label="2" disabled vertical>
+      <div style="padding:5px 20px">自定义内容</div>
+      <div style="padding:5px 20px;">自定义内容</div>
+    </el-checkbox-img-button>
+  </div>
+</template>
+<script>
+  export default {
+    data() {
+      return {
+        checked: ['1']
+      };
+    }
+  };
+</script>
+```
+:::
+
+### 带图片用法
+
+根据 `el-checkbox-img-button` 标签中属性 `img-url` 的值不为空进行判断.
+
+#### 纵向布局
+
+:::demo
+```html
+<div style="display:flex;">
+  <el-checkbox-img-button
+    vertical
+    v-model="check1"
+    :img-url="imgUrl"
+    img-title="飞飞飞飞飞飞飞飞飞"
+    label="1">
+  </el-checkbox-img-button>
+  <el-checkbox-img-button
+    vertical
+    v-model="check1"
+    :img-url="imgUrl"
+    img-title="呀呀呀呀呀呀哎呀"
+    label="2">
+  </el-checkbox-img-button>
+</div>
+
+<script>
+  export default {
+    data() {
+      return {
+        imgUrl: 'https://fuss10.elemecdn.com/e/5d/4a731a90594a4af544c0c25941171jpeg.jpeg',
+        check1: ['1']
+      }
+    }
+  }
+</script>
+```
+:::
+
+#### 横向布局
+
+:::demo 可自行通过style设置`width`，样式默认有`min-width:320px`;
+```html
+<div  style="display:flex;flex-direction:column;">
+  <el-checkbox-img-button  
+    v-model="check1"
+    :img-url="img.url"
+    :img-title="img.title"
+    :img-desc="img.desc"
+    label="1">
+  </el-checkbox-img-button>
+  <el-checkbox-img-button  
+    v-model="check1"
+    :img-url="img.url"
+    :img-title="img.title"
+    :img-desc="img.desc"
+    label="2"
+    style="margin-top:15px;width:400px">
+  </el-checkbox-img-button>
+</div>
+
+<script>
+  export default {
+    data() {
+      return {
+        check1: ['1'],
+        img:{
+          url: 'https://fuss10.elemecdn.com/e/5d/4a731a90594a4af544c0c25941171jpeg.jpeg',
+          title: '飞飞飞飞飞飞飞飞飞',
+          desc:'在多人协作项目中，良好的规则和规范是保证项目有序进行下去的必要条件'
+        }
+      }
+    }
+  }
+</script>
+```
+:::
+
+### Checkbox-img-button Attributes
+| 参数      | 说明    | 类型      | 可选值       | 默认值   |
+|---------- |-------- |---------- |-------------  |-------- |
+| value / v-model | 绑定值 | string / number / boolean | — | — |
+| disabled  | 是否禁用    | boolean   | — | false   |
+| vertical  | 控制是否垂直方向显示    | boolean   | — | false   |
+| img-url  | 图片地址    | string   | — | —   |
+| img-title  | 图片标题    | string   | — | —  |
+| img-desc  | 图片描述    | string   | — | —  |
+
+:::tip
+说明：其他属性和方法请参考 `Checkbox`组件
+:::
\ No newline at end of file
diff --git a/examples/docs/zh-CN/checkbox.md b/examples/docs/zh-CN/checkbox.md
index def7b93813e..ac187020c86 100644
--- a/examples/docs/zh-CN/checkbox.md
+++ b/examples/docs/zh-CN/checkbox.md
@@ -1,47 +1,3 @@
-<script>
-  const cityOptions = ['上海', '北京', '广州', '深圳'];
-  module.exports = {
-    data() {
-      return {
-        checkList: ['选中且禁用','复选框 A'],
-        // checkList2: ['复选框 A'],
-        checked: true,
-        checked1: false,
-        checked2: true,
-        checked3: true,
-        checked4: false,
-        checked5: false,
-        checked6: true,
-        isValid: '可用',
-        checkAll: false,
-        cities: cityOptions,
-        checkedCities: ['上海', '北京'],
-        checkedCities1: ['上海', '北京'],
-        isIndeterminate: true,
-        checkboxGroup1: ['上海'],
-        checkboxGroup2: ['上海'],
-        checkboxGroup3: ['上海'],
-        checkboxGroup4: ['上海'],
-        checkboxGroup5: [],
-        checkboxGroup6: []
-      };
-    },
-    methods: {
-      handleChange(ev) {
-        console.log(ev);
-      },
-      handleCheckAllChange(val) {
-        this.checkedCities = val ? cityOptions : [];
-        this.isIndeterminate = false;
-      },
-      handleCheckedCitiesChange(value) {
-        let checkedCount = value.length;
-        this.checkAll = checkedCount === this.cities.length;
-        this.isIndeterminate = checkedCount > 0 && checkedCount < this.cities.length;
-      }
-    }
-  };
-</script>
 ## Checkbox 多选框
 一组备选项中进行多选
 
@@ -171,7 +127,7 @@
 ```html
 <template>
   <el-checkbox-group 
-    v-model="checkedCities1"
+    v-model="checkedCities"
     :min="1"
     :max="2">
     <el-checkbox v-for="city in cities" :label="city" :key="city">{{city}}</el-checkbox>
@@ -182,7 +138,7 @@
   export default {
     data() {
       return {
-        checkedCities1: ['上海', '北京'],
+        checkedCities: ['上海', '北京'],
         cities: cityOptions
       };
     }
@@ -243,21 +199,21 @@
 ```html
 <template>
   <div>
-    <el-checkbox v-model="checked3" label="备选项1" border></el-checkbox>
-    <el-checkbox v-model="checked4" label="备选项2" border></el-checkbox>
+    <el-checkbox v-model="checked1" label="备选项1" border></el-checkbox>
+    <el-checkbox v-model="checked2" label="备选项2" border></el-checkbox>
   </div>
   <div style="margin-top: 20px">
-    <el-checkbox v-model="checked5" label="备选项1" border size="medium"></el-checkbox>
-    <el-checkbox v-model="checked6" label="备选项2" border size="medium"></el-checkbox>
+    <el-checkbox v-model="checked3" label="备选项1" border size="medium"></el-checkbox>
+    <el-checkbox v-model="checked4" label="备选项2" border size="medium"></el-checkbox>
   </div>
   <div style="margin-top: 20px">
-    <el-checkbox-group v-model="checkboxGroup5" size="small">
+    <el-checkbox-group v-model="checkboxGroup1" size="small">
       <el-checkbox label="备选项1" border></el-checkbox>
       <el-checkbox label="备选项2" border disabled></el-checkbox>
     </el-checkbox-group>
   </div>
   <div style="margin-top: 20px">
-    <el-checkbox-group v-model="checkboxGroup6" size="mini" disabled>
+    <el-checkbox-group v-model="checkboxGroup2" size="mini" disabled>
       <el-checkbox label="备选项1" border></el-checkbox>
       <el-checkbox label="备选项2" border></el-checkbox>
     </el-checkbox-group>
@@ -268,12 +224,12 @@
   export default {
     data () {
       return {
-        checked3: true,
-        checked4: false,
-        checked5: false,
-        checked6: true,
-        checkboxGroup5: [],
-        checkboxGroup6: []
+        checked1: true,
+        checked2: false,
+        checked3: false,
+        checked4: true,
+        checkboxGroup1: [],
+        checkboxGroup2: []
       };
     }
   }
@@ -284,6 +240,7 @@
 ### Checkbox Attributes
 | 参数      | 说明    | 类型      | 可选值       | 默认值   |
 |---------- |-------- |---------- |-------------  |-------- |
+| value / v-model | 绑定值 | string / number / boolean | — | — |
 | label     | 选中状态的值（只有在`checkbox-group`或者绑定对象类型为`array`时有效）| string / number / boolean  |       —        |     —    |
 | true-label | 选中时的值   | string / number | — |     —    |
 | false-label | 没有选中时的值   | string / number    |      —         |     —    |
@@ -302,12 +259,13 @@
 ### Checkbox-group Attributes
 | 参数      | 说明    | 类型      | 可选值       | 默认值   |
 |---------- |-------- |---------- |-------------  |-------- |
+| value / v-model | 绑定值 | array | — | — |
 | size     | 多选框组尺寸，仅对按钮形式的 Checkbox 或带有边框的 Checkbox 有效   | string  | medium / small / mini  |    —     |
 | disabled  | 是否禁用    | boolean   | — | false   |
 | min     | 可被勾选的 checkbox 的最小数量   | number    |       —        |     —    |
 | max     | 可被勾选的 checkbox 的最大数量   | number    |       —        |     —    |
 | text-color  | 按钮形式的 Checkbox 激活时的文本颜色    | string   | — | #ffffff   |
-| fill  | 按钮形式的 Checkbox 激活时的填充色和边框色    | string   | — | #409EFF   |
+| fill  | 按钮形式的 Checkbox 激活时的填充色和边框色    | string   | — | #2460e0   |
 
 ### Checkbox-group Events
 | 事件名称      | 说明    | 回调参数      |
diff --git a/examples/docs/zh-CN/collapse.md b/examples/docs/zh-CN/collapse.md
index 20795efba19..bd54decd551 100644
--- a/examples/docs/zh-CN/collapse.md
+++ b/examples/docs/zh-CN/collapse.md
@@ -1,28 +1,3 @@
-<script>
-  export default {
-    data() {
-      return {
-        activeNames: ['1'],
-        activeName: '1'
-      };
-    },
-    methods: {
-      handleChange(val) {
-        console.log(val);
-      }
-    }
-  }
-</script>
-<style>
-  .demo-collapse {
-    .el-collapse-item__header {
-      .header-icon {
-        margin-left: 5px;
-      }
-    }
-  }
-</style>
-
 ## Collapse 折叠面板
 
 通过折叠面板收纳内容区域
@@ -140,16 +115,17 @@
 ### Collapse Attributes
 | 参数      | 说明          | 类型      | 可选值                           | 默认值  |
 |---------- |-------------- |---------- |--------------------------------  |-------- |
+| value / v-model | 当前激活的面板(如果是手风琴模式，绑定值类型需要为`string`，否则为`array`) | string / array | — | — |
 | accordion | 是否手风琴模式 | boolean | — | false |
-| value | 当前激活的面板(如果是手风琴模式，绑定值类型需要为`string`，否则为`array`) | string/array | — | — |
 
 ### Collapse Events
 | 事件名称 | 说明 | 回调参数 |
 |---------|---------|---------|
-| change | 当前激活面板改变时触发(如果是手风琴模式，参数 `activeNames` 类型为`string`，否则为`array`) | (activeNames: array\|string) |
+| change | 当前激活面板改变时触发(如果是手风琴模式，参数 `activeNames` 类型为`string`，否则为`array`) | (activeNames: array / string) |
 
 ### Collapse Item Attributes
 | 参数      | 说明          | 类型      | 可选值                           | 默认值  |
 |---------- |-------------- |---------- |--------------------------------  |-------- |
-| name | 唯一标志符 | string/number | — | — |
-| title | 面板标题 | string | — | — |
\ No newline at end of file
+| name      | 唯一标志符      | string/number | —     | —    |
+| title     | 面板标题        | string        | —     | —    |
+| disabled  | 是否禁用        | boolean       | —     | —    |
diff --git a/examples/docs/zh-CN/color-picker.md b/examples/docs/zh-CN/color-picker.md
index 8bee9b5d963..4806e01cf72 100644
--- a/examples/docs/zh-CN/color-picker.md
+++ b/examples/docs/zh-CN/color-picker.md
@@ -1,62 +1,3 @@
-<script>
-  export default {
-    data() {
-      return {
-        color1: '#409EFF',
-        color2: null,
-        color3: 'rgba(19, 206, 102, 0.8)',
-        color4: '#409EFF',
-        color5: 'rgba(255, 69, 0, 0.68)',
-        predefineColors: [
-          '#ff4500',
-          '#ff8c00',
-          '#ffd700',
-          '#90ee90',
-          '#00ced1',
-          '#1e90ff',
-          '#c71585',
-          'rgba(255, 69, 0, 0.68)',
-          'rgb(255, 120, 0)',
-          'hsv(51, 100, 98)',
-          'hsva(120, 40, 94, 0.5)',
-          'hsl(181, 100%, 37%)',
-          'hsla(209, 100%, 56%, 0.73)',
-          '#c7158577'
-        ]
-      };
-    },
-    mounted() {
-      this.$nextTick(() => {
-        const demos = document.querySelectorAll('.source');
-        demos[0].style.padding = '0';
-      });
-    },
-  }
-</script>
-
-<style>
-  .demo-color-picker .block {
-    padding: 30px 0;
-    text-align: center;
-    border-right: solid 1px #EFF2F6;
-    display: inline-block;
-    width: 50%;
-    box-sizing: border-box;
-    &:last-child {
-      border-right: none;
-    }
-  }
-  .demo-color-picker .demonstration {
-    display: block;
-    color: #8492a6;
-    font-size: 14px;
-    margin-bottom: 20px;
-  }
-  .demo-color-picker .el-color-picker + .el-color-picker {
-    margin-left: 20px;
-  }
-</style>
-
 ## ColorPicker 颜色选择器
 
 用于颜色选择，支持多种格式。
@@ -78,7 +19,7 @@
   export default {
     data() {
       return {
-        color1: '#409EFF',
+        color1: '#2460e0',
         color2: null
       }
     }
@@ -91,13 +32,13 @@
 
 :::demo ColorPicker 支持普通颜色，也支持带 Alpha 通道的颜色，通过`show-alpha`属性即可控制是否支持透明度的选择。
 ```html
-<el-color-picker v-model="color3" show-alpha></el-color-picker>
+<el-color-picker v-model="color" show-alpha></el-color-picker>
 
 <script>
   export default {
     data() {
       return {
-        color3: 'rgba(19, 206, 102, 0.8)'
+        color: 'rgba(19, 206, 102, 0.8)'
       }
     }
   };
@@ -110,7 +51,7 @@
 :::demo ColorPicker 支持预定义颜色
 ```html
 <el-color-picker
-  v-model="color5"
+  v-model="color"
   show-alpha
   :predefine="predefineColors">
 </el-color-picker>
@@ -119,7 +60,7 @@
   export default {
     data() {
       return {
-        color5: 'rgba(255, 69, 0, 0.68)',
+        color: 'rgba(255, 69, 0, 0.68)',
         predefineColors: [
           '#ff4500',
           '#ff8c00',
@@ -147,16 +88,16 @@
 
 :::demo
 ```html
-<el-color-picker v-model="color4"></el-color-picker>
-<el-color-picker v-model="color4" size="medium"></el-color-picker>
-<el-color-picker v-model="color4" size="small"></el-color-picker>
-<el-color-picker v-model="color4" size="mini"></el-color-picker>
+<el-color-picker v-model="color"></el-color-picker>
+<el-color-picker v-model="color" size="medium"></el-color-picker>
+<el-color-picker v-model="color" size="small"></el-color-picker>
+<el-color-picker v-model="color" size="mini"></el-color-picker>
 
 <script>
   export default {
     data() {
       return {
-        color4: '#409EFF'
+        color: '#2460e0'
       }
     }
   };
@@ -167,6 +108,7 @@
 ### Attributes
 | 参数      | 说明    | 类型      | 可选值       | 默认值   |
 |---------- |-------- |---------- |-------------  |-------- |
+| value / v-model | 绑定值 | string | — | — |
 | disabled | 是否禁用 | boolean | — | false |
 | size | 尺寸 | string | — | medium / small / mini |
 | show-alpha | 是否支持透明度选择 | boolean | — | false |
diff --git a/examples/docs/zh-CN/color.md b/examples/docs/zh-CN/color.md
index b5da767dcd5..45c956006e3 100644
--- a/examples/docs/zh-CN/color.md
+++ b/examples/docs/zh-CN/color.md
@@ -1,78 +1,94 @@
-<style>
-  .demo-color-box {
-    border-radius: 4px;
-    padding: 20px;
-    margin: 5px 0;
-    height: 74px;
-    box-sizing: border-box;
-    color: #fff;
-    font-size: 14px;
-
-    & .value {
-      font-size: 12px;
-      opacity: 0.69;
-      line-height: 24px;
-    }
-  }
-  .demo-color-box-group {
-    .demo-color-box {
-      border-radius: 0;
-      margin: 0;
-    }
-    .demo-color-box:first-child {
-      border-radius: 4px 4px 0 0;
-    }
-    .demo-color-box:last-child {
-      border-radius: 0 0 4px 4px;
-    }
-  }
-  .bg-blue {
-    background-color: #409EFF;
-  }
-
-  .bg-success {
-    background-color: #67C23A;
-  }
-  .bg-warning {
-    background-color: #E6A23C;
-  }
-  .bg-danger {
-    background-color: #F56C6C;
-  }
-  .bg-info {
-    background-color: #909399;
-  }
-
-  .bg-text-primary {
-    background-color: #303133;
-  }
-  .bg-text-regular {
-    background-color: #606266;
-  }
-  .bg-text-secondary {
-    background-color: #909399;
-  }
-  .bg-text-placeholder {
-    background-color: #c0c4cc;
-  }
-
-  .bg-border-base {
-    background-color: #dcdfe6;
-  }
-  .bg-border-light {
-    background-color: #e4e7ed;
-  }
-  .bg-border-lighter {
-    background-color: #ebeef5;
-  }
-  .bg-border-extra-light {
-    background-color: #f2f6fc;
-  }
-
-  [class*=" bg-border-"] {
-    color: #303133;
-  }
-</style>
+<script>
+  import bus from '../../bus';
+  import { tintColor } from '../../color.js';
+  import { ACTION_USER_CONFIG_UPDATE } from '../../components/theme/constant.js';
+  const varMap = {
+    'primary': '$--color-primary',
+    'success': '$--color-success',
+    'warning': '$--color-warning',
+    'danger': '$--color-danger',
+    'info': '$--color-info',
+    'white': '$--color-white',
+    'black': '$--color-black',
+    'textPrimary': '$--color-text-primary',
+    'textRegular': '$--color-text-regular',
+    'textSecondary': '$--color-text-secondary',
+    'textPlaceholder': '$--color-text-placeholder',
+    'borderBase': '$--border-color-base',
+    'borderLight': '$--border-color-light',
+    'borderLighter': '$--border-color-lighter',
+    'borderExtraLight': '$--border-color-extra-light'
+  };
+  const original = {
+    primary: '#2460e0',
+    success: '#2FD163',
+    warning: '#F5A623',
+    danger: '#FF4D4F',
+    info: '#A7A8AD',
+    white: '#FFFFFF',
+    black: '#000000',
+    textPrimary: '#2D303B',
+    textRegular: '#6A6C73',
+    textSecondary: '#A7A8AD',
+    textPlaceholder: '#C6C7CA',
+    borderBase: '#DCDFE6',
+    borderLight: '#E4E7ED',
+    borderLighter: '#EBEEF5',
+    borderExtraLight: '#F2F6FC'
+  }
+  export default {
+    created() {
+      bus.$on(ACTION_USER_CONFIG_UPDATE, this.setGlobal);
+    },
+    mounted() {
+      this.setGlobal();
+    },
+    methods: {
+      tintColor(color, tint) {
+        return tintColor(color, tint);
+      },
+      setGlobal() {
+        if (window.userThemeConfig) {
+          this.global = window.userThemeConfig.global;
+        }
+      }
+    },
+    data() {
+      return {
+        global: {},
+        primary: '',
+        success: '',
+        warning: '',
+        danger: '',
+        info: '',
+        white: '',
+        black: '',
+        textPrimary: '',
+        textRegular: '',
+        textSecondary: '',
+        textPlaceholder: '',
+        borderBase: '',
+        borderLight: '',
+        borderLighter: '',
+        borderExtraLight: ''
+      }
+    },
+    watch: {
+      global: {
+        immediate: true,
+        handler(value) {
+          Object.keys(original).forEach((o) => {
+            if (value[varMap[o]]) {
+              this[o] = value[varMap[o]]
+            } else {
+              this[o] = original[o]
+            }
+          });
+        }
+      }
+    },
+  }
+</script>
 
 ## Color 色彩
 
@@ -83,8 +99,18 @@ Element 为了避免视觉传达差异，使用一套特定的调色板来规定
 Element 主要品牌颜色是鲜艳、友好的蓝色。
 
 <el-row :gutter="12">
-  <el-col :span="6" :xs="{span: 12}">
-    <div class="demo-color-box bg-blue">Blue<div class="value">#409EFF</div></div>
+  <el-col :span="10" :xs="{span: 12}">
+    <div class="demo-color-box" :style="{ background: primary }">Brand Color
+      <div class="value">#2460e0</div>
+      <div class="bg-color-sub" :style="{ background: tintColor(primary, 0.9) }">
+        <div
+          class="bg-blue-sub-item"
+          v-for="(item, key) in Array(8)"
+          :key="key"
+          :style="{ background: tintColor(primary, (key + 1) / 10) }"
+        ></div>
+      </div>
+    </div>
   </el-col>
 </el-row>
 
@@ -94,16 +120,72 @@ Element 主要品牌颜色是鲜艳、友好的蓝色。
 
 <el-row :gutter="12">
   <el-col :span="6" :xs="{span: 12}">
-    <div class="demo-color-box bg-success">Success<div class="value">#67C23A</div></div>
+    <div class="demo-color-box"
+    :style="{ background: success }"
+    >Success<div class="value">#2FD163</div>
+      <div 
+        class="bg-color-sub"
+      >
+        <div 
+          class="bg-success-sub-item" 
+          v-for="(item, key) in Array(2)"
+          :key="key"
+          :style="{ background: tintColor(success, (key + 8) / 10) }"
+            >
+        </div>
+      </div>
+    </div>
   </el-col>
   <el-col :span="6" :xs="{span: 12}">
-    <div class="demo-color-box bg-warning">Warning<div class="value">#E6A23C</div></div>
+    <div class="demo-color-box"
+    :style="{ background: warning }"
+    >Warning<div class="value">#F5A623</div>
+      <div 
+          class="bg-color-sub"
+        >
+        <div 
+          class="bg-success-sub-item" 
+          v-for="(item, key) in Array(2)"
+          :key="key"
+          :style="{ background: tintColor(warning, (key + 8) / 10) }"
+            >
+        </div>
+      </div>
+    </div>
   </el-col>
   <el-col :span="6" :xs="{span: 12}">
-    <div class="demo-color-box bg-danger">Danger<div class="value">#F56C6C</div></div>
+    <div class="demo-color-box"
+    :style="{ background: danger }"
+    >Danger<div class="value">#FF4D4F</div>
+      <div 
+          class="bg-color-sub"
+        >
+        <div 
+          class="bg-success-sub-item" 
+          v-for="(item, key) in Array(2)"
+          :key="key"
+          :style="{ background: tintColor(danger, (key + 8) / 10) }"
+            >
+        </div>
+      </div>
+    </div>
   </el-col>
   <el-col :span="6" :xs="{span: 12}">
-    <div class="demo-color-box bg-info">Info<div class="value">#909399</div></div>
+    <div class="demo-color-box"
+    :style="{ background: info }"
+    >Info<div class="value">#A7A8AD</div>
+      <div 
+          class="bg-color-sub"
+        >
+        <div 
+          class="bg-success-sub-item" 
+          v-for="(item, key) in Array(2)"
+          :key="key"
+          :style="{ background: tintColor(info, (key + 8) / 10) }"
+            >
+        </div>
+      </div>
+    </div>
   </el-col>
 </el-row>
 
@@ -114,18 +196,49 @@ Element 主要品牌颜色是鲜艳、友好的蓝色。
 <el-row :gutter="12">
   <el-col :span="6" :xs="{span: 12}">
     <div class="demo-color-box-group">
-      <div class="demo-color-box bg-text-primary">主要文字<div class="value">#303133</div></div>
-      <div class="demo-color-box bg-text-regular">常规文字<div class="value">#606266</div></div>
-      <div class="demo-color-box bg-text-secondary">次要文字<div class="value">#909399</div></div>
-      <div class="demo-color-box bg-text-placeholder">占位文字<div class="value">#C0C4CC</div></div>
+      <div class="demo-color-box demo-color-box-other"
+      :style="{ background: textPrimary }"
+      >主要文字<div class="value">{{textPrimary}}</div></div>
+      <div class="demo-color-box demo-color-box-other"
+      :style="{ background: textRegular }"
+      >
+      常规文字<div class="value">{{textRegular}}</div></div>
+      <div class="demo-color-box demo-color-box-other"
+      :style="{ background: textSecondary }"
+      >次要文字<div class="value">{{textSecondary}}</div></div>
+      <div class="demo-color-box demo-color-box-other"
+      :style="{ background: textPlaceholder }"
+      >占位文字<div class="value">{{textPlaceholder}}</div></div>
+    </div>
+  </el-col>
+  <el-col :span="6" :xs="{span: 12}">
+    <div class="demo-color-box-group">
+      <div class="demo-color-box demo-color-box-other demo-color-box-lite"
+      :style="{ background: borderBase }"
+      >一级边框<div class="value">{{borderBase}}</div></div>
+      <div class="demo-color-box demo-color-box-other demo-color-box-lite"
+      :style="{ background: borderLight }"
+      >二级边框<div class="value">{{borderLight}}</div></div>
+      <div class="demo-color-box demo-color-box-other demo-color-box-lite"
+      :style="{ background: borderLighter }"
+      >三级边框<div class="value">{{borderLighter}}</div></div>
+      <div class="demo-color-box demo-color-box-other demo-color-box-lite"
+      :style="{ background: borderExtraLight }"
+      >四级边框<div class="value">{{borderExtraLight}}</div></div>
     </div>
   </el-col>
   <el-col :span="6" :xs="{span: 12}">
     <div class="demo-color-box-group">
-      <div class="demo-color-box bg-border-base">一级边框<div class="value">#DCDFE6</div></div>
-      <div class="demo-color-box bg-border-light">二级边框<div class="value">#E4E7ED</div></div>
-      <div class="demo-color-box bg-border-lighter">三级边框<div class="value">#EBEEF5</div></div>
-      <div class="demo-color-box bg-border-extra-light">四级边框<div class="value">#F2F6FC</div></div>
+      <div 
+      class="demo-color-box demo-color-box-other"
+      :style="{ background: black }"
+      >基础黑色<div class="value">{{black}}</div></div>
+      <div
+      class="demo-color-box demo-color-box-other"
+      :style="{ background: white, color: '#303133', border: '1px solid #eee' }"
+      >基础白色<div class="value">{{white}}</div></div>
+      <div class="demo-color-box demo-color-box-other bg-transparent">透明<div class="value">Transparent</div>
+      </div>
     </div>
   </el-col>
 </el-row>
diff --git a/examples/docs/zh-CN/container.md b/examples/docs/zh-CN/container.md
index d650eebdb6a..9d91fd61cde 100644
--- a/examples/docs/zh-CN/container.md
+++ b/examples/docs/zh-CN/container.md
@@ -1,62 +1,3 @@
-<style>
-  .el-header, .el-footer {
-    background-color: #B3C0D1;
-    color: #333;
-    line-height: 60px;
-  }
-  
-  .el-aside {
-    color: #333;
-  }
-  
-  #chang-jian-ye-mian-bu-ju + .demo-container {
-    .el-header, .el-footer {
-      text-align: center;
-    }
-  
-    .el-aside {
-      background-color: #D3DCE6;
-      text-align: center;
-      line-height: 200px;
-    }
-  
-    .el-main {
-      background-color: #E9EEF3;
-      color: #333;
-      text-align: center;
-      line-height: 160px;
-    }
-    
-    & > .source > .el-container {
-      margin-bottom: 40px;
-    
-      &:nth-child(5) .el-aside,
-      &:nth-child(6) .el-aside {
-        line-height: 260px;
-      }
-
-      &:nth-child(7) .el-aside {
-        line-height: 320px;
-      }
-    }
-  }
-</style>
-
-<script>
-  export default {
-    data() {
-      const item = {
-        date: '2016-05-02',
-        name: '王小虎',
-        address: '上海市普陀区金沙江路 1518 弄'
-      };
-      return {
-        tableData: Array(20).fill(item)
-      }
-    }
-  };
-</script>
-
 ## Container 布局容器
 用于布局的容器组件，方便快速搭建页面的基本结构：
 
diff --git a/examples/docs/zh-CN/custom-theme.md b/examples/docs/zh-CN/custom-theme.md
index 50b36cd9cfb..c3579afae4f 100644
--- a/examples/docs/zh-CN/custom-theme.md
+++ b/examples/docs/zh-CN/custom-theme.md
@@ -1,5 +1,12 @@
 ## 自定义主题
-Element 默认提供一套主题，CSS 命名采用 BEM 的风格，方便使用者覆盖样式。我们提供了三种方法，可以进行不同程度的样式自定义。
+Element 默认提供一套主题，CSS 命名采用 BEM 的风格，方便使用者覆盖样式。我们提供了四种方法，可以进行不同程度的样式自定义。
+
+### 主题编辑器
+使用[在线主题编辑器](./#/zh-CN/theme)，可以修改定制 Element 所有全局和组件的 Design Tokens，并可以方便地实时预览样式改变后的视觉。同时它还可以基于新的定制样式生成完整的样式文件包，供直接下载使用（关于如何使用下载的主题包，请参考本节「引入自定义主题」部分）。
+
+也可以使用[主题编辑器 Chrome 插件](https://chrome.google.com/webstore/detail/element-theme-roller/lifkjlojflekabbmlddfccdkphlelmim)，在任何使用 Element 开发的网站上配置并实时预览主题。
+
+<img src="https://shadow.elemecdn.com/app/sns-client/element-theme-editor2.e16c6a01-806d-11e9-bc23-21435c54c509.png" style="width: 100%;margin: 30px auto 0;display: block;">
 
 ### 仅替换主题色
 如果仅希望更换 Element 的主题色，推荐使用[在线主题生成工具](https://elementui.github.io/theme-chalk-preview)。Element 默认的主题色是鲜艳、友好的蓝色。通过替换主题色，能够让 Element 的视觉更加符合具体项目的定位。
@@ -13,15 +20,15 @@ Element 的 theme-chalk 使用 SCSS 编写，如果你的项目也使用了 SCSS
 $--color-primary: teal;
 
 /* 改变 icon 字体路径变量，必需 */
-$--font-path: '~element-ui/lib/theme-chalk/fonts';
+$--font-path: '~@femessage/element-ui/lib/theme-chalk/fonts';
 
-@import "~element-ui/packages/theme-chalk/src/index";
+@import "~@femessage/element-ui/packages/theme-chalk/src/index";
 ```
 
 之后，在项目的入口文件中，直接引入以上样式文件即可（无需引入 Element 编译好的 CSS 文件）：
 ```JS
 import Vue from 'vue'
-import Element from 'element-ui'
+import Element from '@femessage/element-ui'
 import './element-variables.scss'
 
 Vue.use(Element)
@@ -31,75 +38,13 @@ Vue.use(Element)
 需要注意的是，覆盖字体路径变量是必需的，将其赋值为 Element 中 icon 图标所在的相对路径即可。
 :::
 
-### 命令行主题工具
-如果你的项目没有使用 SCSS，那么可以使用命令行主题工具进行深层次的主题定制：
-
-#### <strong>安装工具</strong>
-首先安装「主题生成工具」，可以全局安装或者安装在当前项目下，推荐安装在项目里，方便别人 clone 项目时能直接安装依赖并启动，这里以全局安装做演示。
-```shell
-npm i element-theme -g
-```
-
-安装白垩主题，可以从 npm 安装或者从 GitHub 拉取最新代码。
-```shell
-# 从 npm
-npm i element-theme-chalk -D
-
-# 从 GitHub
-npm i https://github.com/ElementUI/theme-chalk -D
-```
-
-#### <strong>初始化变量文件</strong>
-主题生成工具安装成功后，如果全局安装可以在命令行里通过 `et` 调用工具，如果安装在当前目录下，需要通过 `node_modules/.bin/et` 访问到命令。执行 `-i` 初始化变量文件。默认输出到 `element-variables.scss`，当然你可以传参数指定文件输出目录。
-
-```shell
-et -i [可以自定义变量文件]
-
-> ✔ Generator variables file
-```
-
-如果使用默认配置，执行后当前目录会有一个 `element-variables.scss` 文件。内部包含了主题所用到的所有变量，它们使用 SCSS 的格式定义。大致结构如下：
-```css
-$--color-primary: #409EFF !default;
-$--color-primary-light-1: mix($--color-white, $--color-primary, 10%) !default; /* 53a8ff */
-$--color-primary-light-2: mix($--color-white, $--color-primary, 20%) !default; /* 66b1ff */
-$--color-primary-light-3: mix($--color-white, $--color-primary, 30%) !default; /* 79bbff */
-$--color-primary-light-4: mix($--color-white, $--color-primary, 40%) !default; /* 8cc5ff */
-$--color-primary-light-5: mix($--color-white, $--color-primary, 50%) !default; /* a0cfff */
-$--color-primary-light-6: mix($--color-white, $--color-primary, 60%) !default; /* b3d8ff */
-$--color-primary-light-7: mix($--color-white, $--color-primary, 70%) !default; /* c6e2ff */
-$--color-primary-light-8: mix($--color-white, $--color-primary, 80%) !default; /* d9ecff */
-$--color-primary-light-9: mix($--color-white, $--color-primary, 90%) !default; /* ecf5ff */
-
-$--color-success: #67c23a !default;
-$--color-warning: #e6a23c !default;
-$--color-danger: #f56c6c !default;
-$--color-info: #909399 !default;
-
-...
-```
-
-#### <strong>修改变量</strong>
-直接编辑 `element-variables.scss` 文件，例如修改主题色为红色。
-```CSS
-$--color-primary: red;
-```
-
-#### <strong>编译主题</strong>
-保存文件后，到命令行里执行 `et` 编译主题，如果你想启用 `watch` 模式，实时编译主题，增加 `-w` 参数；如果你在初始化时指定了自定义变量文件，则需要增加 `-c` 参数，并带上你的变量文件名
-```shell
-et
-
-> ✔ build theme font
-> ✔ build element theme
-```
-
+### 使用自定义主题
 #### <strong>引入自定义主题</strong>
-默认情况下编译的主题目录是放在 `./theme` 下，你可以通过 `-o` 参数指定打包目录。像引入默认主题一样，在代码里直接引用 `theme/index.css` 文件即可。
+和引入默认主题一样，在代码里直接引用「在线主题编辑器」或「命令行工具」生成的主题的 `theme/index.css` 文件即可。
 
 ```javascript
 import '../theme/index.css'
-import ElementUI from 'element-ui'
+import ElementUI from '@femessage/element-ui'
 import Vue from 'vue'
 
 Vue.use(ElementUI)
@@ -109,13 +54,16 @@ Vue.use(ElementUI)
 如果是搭配 `babel-plugin-component` 一起使用，只需要修改 `.babelrc` 的配置，指定 `styleLibraryName` 路径为自定义主题相对于 `.babelrc` 的路径，注意要加 `~`。
 ```json
 {
-  "plugins": [["component", [
-    {
-      "libraryName": "element-ui",
-      "styleLibraryName": "~theme"
-    }
-  ]]]
+  "plugins": [
+    [
+      "component",
+      {
+        "libraryName": "@femessage/element-ui",
+        "styleLibraryName": "~theme"
+      }
+    ]
+  ]
 }
 ```
 
-如果不清楚 `babel-plugin-component` 是什么，请阅读 <a href="./#/zh-CN/component/quickstart">快速上手</a> 一节。更多 `element-theme` 用法请参考[项目仓库](https://github.com/ElementUI/element-theme)。
\ No newline at end of file
+如果不清楚 `babel-plugin-component` 是什么，请阅读 <a href="./#/zh-CN/component/quickstart">快速上手</a> 一节。更多 `element-theme` 用法请参考[项目仓库](https://github.com/ElementUI/element-theme)。
diff --git a/examples/docs/zh-CN/data-mapper.md b/examples/docs/zh-CN/data-mapper.md
new file mode 100644
index 00000000000..4f1b41006c7
--- /dev/null
+++ b/examples/docs/zh-CN/data-mapper.md
@@ -0,0 +1,339 @@
+## DataMapper 数据映射
+
+数据映射器，用于展示多列信息
+
+### 基础用法
+
+:::demo 在 data 中注入数据后，通过设置"column",在 columns 中用 prop 属性来对应对象中的键名即可填入数据，用 label 属性来定义列名。
+
+```html
+<el-data-mapper
+  :data="data"
+  :columns="columns"
+  placeholder="-"
+></el-data-mapper>
+<script>
+  export default {
+    data() {
+      return {
+        data: {
+          name: "韩梅梅",
+          grade: "女",
+          age: "18",
+          address: "中国广东省广州市海珠区大塘",
+          birth: ""
+        },
+        columns: [
+          {
+            label: "姓名",
+            prop: "name"
+          },
+          {
+            label: "性别",
+            prop: "grade"
+          },
+          {
+            label: "年龄",
+            prop: "age"
+          },
+          {
+            label: "地址",
+            prop: "address"
+          },
+          {
+            label: "生日",
+            prop: "birth"
+          }
+        ]
+      };
+    }
+  };
+</script>
+```
+
+:::
+
+### 通过formatter来格式化数据
+
+:::demo formatter 属性，用于格式化指定列的值，接受一个 Function，会传入三个参数：data、col、index，可以根据自己的需求进行处理。
+
+```html
+<el-data-mapper
+  :data="data"
+  :columns="columns"
+  placeholder="-"
+></el-data-mapper>
+<script>
+  export default {
+    data() {
+      return {
+        data: {
+          name: "韩梅梅",
+          grade: "女",
+          age: "18",
+          address: "中国广东省广州市海珠区大塘",
+          year: "1998",
+          month: "12"
+        },
+        columns: [
+          {
+            label: "姓名",
+            prop: "name"
+          },
+          {
+            label: "性别",
+            prop: "grade"
+          },
+          {
+            label: "年龄",
+            prop: "age"
+          },
+          {
+            label: "地址",
+            prop: "address",
+            formatter: (data, col, index) => {
+              return (
+                <span>
+                  <span>地球村</span>
+                  <span>{data.address}</span>
+                </span>
+              )
+            }
+          },
+          {
+            label: "生日",
+            prop: "birth",
+            formatter: (data, col, index) => {
+              return data.year + "-" + data.month;
+            }
+          }
+        ]
+      };
+    }
+  };
+</script>
+```
+
+:::
+
+### 设置占位符placeholder
+
+:::demo 通过设置占位符placeholder，可以替代data数据中为空的数据
+
+```html
+<el-data-mapper
+  :data="data"
+  :columns="columns"
+  placeholder="-"
+></el-data-mapper>
+<script>
+  export default {
+    data() {
+      return {
+        data: {
+          name: undefined,
+          grade: 0,
+          age: "",
+          address: "中国广东省广州市海珠区大塘",
+          birth: "2019-10-10"
+        },
+        columns: [
+          {
+            label: "姓名",
+            prop: "name"
+          },
+          {
+            label: "性别",
+            prop: "grade"
+          },
+          {
+            label: "年龄",
+            prop: "age"
+          },
+          {
+            label: "地址",
+            prop: "address"
+          },
+          {
+            label: "生日",
+            prop: "birth"
+          }
+        ]
+      };
+    }
+  };
+</script>
+```
+
+:::
+
+
+### 设置显示的最大行数 contentRows
+
+:::demo 通过设置 contentRows，可以决定内容显示的最大行数，超出的内容用省略号...代替，同时鼠标 hover 时会有文字信息提示。
+
+```html
+<el-data-mapper
+  :data="data"
+  :columns="columns"
+  placeholder="-"
+  :contentRows="contentRows"
+></el-data-mapper>
+<script>
+  export default {
+    data() {
+      return {
+        contentRows: 2,
+        data: {
+          name: "韩梅梅",
+          grade: "女",
+          address: "上海市普陀区金沙江路弄中国广东省广州市海珠区大塘地铁站"
+        },
+        columns: [
+          {
+            label: "姓名",
+            prop: "name"
+          },
+          {
+            label: "性别",
+            prop: "grade"
+          },
+          {
+            label: "地址",
+            prop: "address"
+          }
+        ]
+      };
+    }
+  };
+</script>
+```
+
+:::
+
+### 非行内模式
+
+:::demo 在 data 中注入数据后，通过设置"inline"为false,即可关闭行内模式
+
+```html
+<el-data-mapper
+  :data="data"
+  :columns="columns"
+  :inline="false"
+></el-data-mapper>
+<script>
+  export default {
+    data() {
+      return {
+        data: {
+          name: "韩梅梅",
+          grade: "女",
+          age: "18",
+          address: "中国广东省广州市海珠区大塘",
+          birth: ""
+        },
+        columns: [
+          {
+            label: "姓名",
+            prop: "name"
+          },
+          {
+            label: "性别",
+            prop: "grade"
+          },
+          {
+            label: "年龄",
+            prop: "age"
+          },
+          {
+            label: "地址",
+            prop: "address"
+          },
+          {
+            label: "生日",
+            prop: "birth"
+          }
+        ]
+      };
+    }
+  };
+</script>
+```
+:::
+
+### 对齐方式
+
+根据具体目标和制约因素，选择最佳的标签对齐方式。
+
+:::demo 通过设置 `label-position` 属性可以改变表单域标签的位置，可选值为 `top`、`left`，当设为 `top` 时标签会置于表单域的顶部
+```html
+<el-radio-group v-model="labelPosition" size="small">
+  <el-radio-button label="left">左对齐</el-radio-button>
+  <el-radio-button label="right">右对齐</el-radio-button>
+  <el-radio-button label="top">顶部对齐</el-radio-button>
+</el-radio-group>
+<div style="margin: 20px;"></div>
+<el-data-mapper
+  :data="data"
+  :columns="columns"
+  :labelPosition="labelPosition"
+  :labelWidth="labelWidth"
+></el-data-mapper>
+<script>
+  export default {
+    data() {
+      return {
+        labelWidth: '80px',
+        labelPosition: 'right',
+        data: {
+          name: "韩梅梅",
+          grade: "女",
+          age: "18",
+          address: "中国广东省广州市海珠区大塘",
+          year: "1998",
+          month: "12"
+        },
+        columns: [
+          {
+            label: "姓名",
+            prop: "name"
+          },
+          {
+            label: "性别",
+            prop: "grade"
+          },
+          {
+            label: "年龄",
+            prop: "age"
+          },
+          {
+            label: "地址",
+            prop: "address"
+          },
+          {
+            label: "生日",
+            prop: "birth",
+            formatter: (data, col, index) => {
+              return data.year + "-" + data.month;
+            }
+          }
+        ]
+      };
+    }
+  };
+</script>
+```
+:::
+
+### Attributes
+
+| 参数        | 说明                                          | 类型                     | 可选值 | 默认值 |
+| ----------- | --------------------------------------------- | ------------------------ | ------ | ------ |
+| data        | 数据                                          | object                   | —      | —      |
+| columns     | 设置列                                        | array                    | —      | —      |
+| formatter   | 用来格式化内容                                | function(data,col,index) | —      | —      |
+| placeholder | 占位符                                        | string                   | —      | —      |
+| contentRows | 内容显示的最大行数，超出的内容用省略号...代替 | number                   | —      | 1      |
+| inline | 行内模式 | boolean | —   | true      |
+| labelWidth | 标签的宽度，例如 '50px'。支持 auto。 | string/number | —   | —|
+| labelPosition | 标签的位置，如果值为 left 或者 right 时，则需要设置 label-width | string | right/left/top | right |
diff --git a/examples/docs/zh-CN/date-picker.md b/examples/docs/zh-CN/date-picker.md
index 1be2dbf8d12..aa976775ab1 100644
--- a/examples/docs/zh-CN/date-picker.md
+++ b/examples/docs/zh-CN/date-picker.md
@@ -1,116 +1,3 @@
-<script>
-  module.exports = {
-    data() {
-      return {
-        pickerOptions1: {
-          disabledDate(time) {
-            return time.getTime() > Date.now();
-          },
-          shortcuts: [{
-            text: '今天',
-            onClick(picker) {
-              picker.$emit('pick', new Date());
-            }
-          }, {
-            text: '昨天',
-            onClick(picker) {
-              const date = new Date();
-              date.setTime(date.getTime() - 3600 * 1000 * 24);
-              picker.$emit('pick', date);
-            }
-          }, {
-            text: '一周前',
-            onClick(picker) {
-              const date = new Date();
-              date.setTime(date.getTime() - 3600 * 1000 * 24 * 7);
-              picker.$emit('pick', date);
-            }
-          }]
-        },
-        pickerOptions2: {
-          shortcuts: [{
-            text: '最近一周',
-            onClick(picker) {
-              const end = new Date();
-              const start = new Date();
-              start.setTime(start.getTime() - 3600 * 1000 * 24 * 7);
-              picker.$emit('pick', [start, end]);
-            }
-          }, {
-            text: '最近一个月',
-            onClick(picker) {
-              const end = new Date();
-              const start = new Date();
-              start.setTime(start.getTime() - 3600 * 1000 * 24 * 30);
-              picker.$emit('pick', [start, end]);
-            }
-          }, {
-            text: '最近三个月',
-            onClick(picker) {
-              const end = new Date();
-              const start = new Date();
-              start.setTime(start.getTime() - 3600 * 1000 * 24 * 90);
-              picker.$emit('pick', [start, end]);
-            }
-          }]
-        },
-        value1: '',
-        value2: '',
-        value3: '',
-        value4: '',
-        value5: '',
-        value6: '',
-        value7: '',
-        value8: '',
-        value9: '',
-        value10: '',
-        value11: '',
-        value12: '',
-        value13: '',
-        value14: ''
-      };
-    }
-  };
-</script>
-
-<style>
-  .demo-block.demo-date-picker .source {
-    padding: 0;
-    display: flex;
-    flex-wrap: wrap;
-  }
-
-  .demo-date-picker .block {
-    padding: 30px 0;
-    text-align: center;
-    border-right: solid 1px #EFF2F6;
-    flex: 1;
-    &:last-child {
-      border-right: none;
-    }
-  }
-
-  .demo-date-picker .container {
-    flex: 1;
-    border-right: solid 1px #EFF2F6;
-    .block {
-      border-right: none;
-      &:last-child {
-        border-top: solid 1px #EFF2F6;
-      }
-    }
-    &:last-child {
-      border-right: none;
-    }
-  }
-
-  .demo-date-picker .demonstration {
-    display: block;
-    color: #8492a6;
-    font-size: 14px;
-    margin-bottom: 20px;
-  }
-</style>
 
 ## DatePicker 日期选择器
 
@@ -138,7 +25,7 @@
       align="right"
       type="date"
       placeholder="选择日期"
-      :picker-options="pickerOptions1">
+      :picker-options="pickerOptions">
     </el-date-picker>
   </div>
 </template>
@@ -147,7 +34,7 @@
   export default {
     data() {
       return {
-        pickerOptions1: {
+        pickerOptions: {
           disabledDate(time) {
             return time.getTime() > Date.now();
           },
@@ -191,7 +78,7 @@
   <div class="block">
     <span class="demonstration">周</span>
     <el-date-picker
-      v-model="value3"
+      v-model="value1"
       type="week"
       format="yyyy 第 WW 周"
       placeholder="选择周">
@@ -200,7 +87,7 @@
   <div class="block">
     <span class="demonstration">月</span>
     <el-date-picker
-      v-model="value4"
+      v-model="value2"
       type="month"
       placeholder="选择月">
     </el-date-picker>
@@ -210,7 +97,7 @@
   <div class="block">
     <span class="demonstration">年</span>
     <el-date-picker
-      v-model="value5"
+      v-model="value3"
       type="year"
       placeholder="选择年">
     </el-date-picker>
@@ -219,7 +106,7 @@
     <span class="demonstration">多个日期</span>
     <el-date-picker
       type="dates"
-      v-model="value14"
+      v-model="value4"
       placeholder="选择一个或多个日期">
     </el-date-picker>
   </div>
@@ -229,10 +116,10 @@
   export default {
     data() {
       return {
+        value1: '',
+        value2: '',
         value3: '',
-        value4: '',
-        value5: '',
-        value14: ''
+        value4: ''
       };
     }
   };
@@ -240,7 +127,7 @@
 ```
 :::
 
-###  选择日期范围
+### 选择日期范围
 
 可在一个选择器中便捷地选择一个时间范围
 
@@ -249,9 +136,8 @@
 <template>
   <div class="block">
     <span class="demonstration">默认</span>
-    {{value6}}
     <el-date-picker
-      v-model="value6"
+      v-model="value1"
       type="daterange"
       range-separator="至"
       start-placeholder="开始日期"
@@ -261,14 +147,14 @@
   <div class="block">
     <span class="demonstration">带快捷选项</span>
     <el-date-picker
-      v-model="value7"
+      v-model="value2"
       type="daterange"
       align="right"
       unlink-panels
       range-separator="至"
       start-placeholder="开始日期"
       end-placeholder="结束日期"
-      :picker-options="pickerOptions2">
+      :picker-options="pickerOptions">
     </el-date-picker>
   </div>
 </template>
@@ -277,7 +163,7 @@
   export default {
     data() {
       return {
-        pickerOptions2: {
+        pickerOptions: {
           shortcuts: [{
             text: '最近一周',
             onClick(picker) {
@@ -304,8 +190,77 @@
             }
           }]
         },
-        value6: '',
-        value7: ''
+        value1: '',
+        value2: ''
+      };
+    }
+  };
+</script>
+```
+:::
+
+
+### 选择月份范围
+
+可在一个选择器中便捷地选择一个月份范围
+
+:::demo 在选择月份范围时，默认情况下左右面板会联动。如果希望两个面板各自独立切换当前年份，可以使用`unlink-panels`属性解除联动。
+```html
+<template>
+  <div class="block">
+    <span class="demonstration">默认</span>
+    <el-date-picker
+      v-model="value1"
+      type="monthrange"
+      range-separator="至"
+      start-placeholder="开始月份"
+      end-placeholder="结束月份">
+    </el-date-picker>
+  </div>
+  <div class="block">
+    <span class="demonstration">带快捷选项</span>
+    <el-date-picker
+      v-model="value2"
+      type="monthrange"
+      align="right"
+      unlink-panels
+      range-separator="至"
+      start-placeholder="开始月份"
+      end-placeholder="结束月份"
+      :picker-options="pickerOptions">
+    </el-date-picker>
+  </div>
+</template>
+
+<script>
+  export default {
+    data() {
+      return {
+        pickerOptions: {
+          shortcuts: [{
+            text: '本月',
+            onClick(picker) {
+              picker.$emit('pick', [new Date(), new Date()]);
+            }
+          }, {
+            text: '今年至今',
+            onClick(picker) {
+              const end = new Date();
+              const start = new Date(new Date().getFullYear(), 0);
+              picker.$emit('pick', [start, end]);
+            }
+          }, {
+            text: '最近六个月',
+            onClick(picker) {
+              const end = new Date();
+              const start = new Date();
+              start.setMonth(start.getMonth() - 6);
+              picker.$emit('pick', [start, end]);
+            }
+          }]
+        },
+        value1: '',
+        value2: ''
       };
     }
   };
@@ -313,6 +268,7 @@
 ```
 :::
 
+
 ###  日期格式
 
 使用`format`指定输入框的格式；使用`value-format`指定绑定值的格式。
@@ -343,15 +299,16 @@
 | `A`  | AM/PM | 仅 `format` 可用，大写 | AM |
 | `a`  | am/pm | 仅 `format` 可用，小写 | am |
 | `timestamp` | JS时间戳 | 仅 `value-format` 可用；组件绑定值为`number`类型 | 1483326245000 |
+| `[MM]` | 不需要格式化字符 | 使用方括号标识不需要格式化的字符 (如  [A] [MM])  | MM |
 
 :::demo
 ```html
 <template>
   <div class="block">
     <span class="demonstration">默认为 Date 对象</span>
-    <div class="demonstration">值：{{ value10 }}</div>
+    <div class="demonstration">值：{{ value1 }}</div>
     <el-date-picker
-      v-model="value10"
+      v-model="value1"
       type="date"
       placeholder="选择日期"
       format="yyyy 年 MM 月 dd 日">
@@ -359,9 +316,9 @@
   </div>
   <div class="block">
     <span class="demonstration">使用 value-format</span>
-    <div class="demonstration">值：{{ value11 }}</div>
+    <div class="demonstration">值：{{ value2 }}</div>
     <el-date-picker
-      v-model="value11"
+      v-model="value2"
       type="date"
       placeholder="选择日期"
       format="yyyy 年 MM 月 dd 日"
@@ -370,9 +327,9 @@
   </div>
   <div class="block">
     <span class="demonstration">时间戳</span>
-    <div class="demonstration">值：{{ value12 }}</div>
+    <div class="demonstration">值：{{ value3 }}</div>
     <el-date-picker
-      v-model="value12"
+      v-model="value3"
       type="date"
       placeholder="选择日期"
       format="yyyy 年 MM 月 dd 日"
@@ -385,9 +342,9 @@
   export default {
     data() {
       return {
-        value10: '',
-        value11: '',
-        value12: ''
+        value1: '',
+        value2: '',
+        value3: ''
       };
     }
   };
@@ -403,9 +360,9 @@
 ```html
 <template>
   <div class="block">
-    <p>组件值：{{ value13 }}</p>
+    <p>组件值：{{ value }}</p>
     <el-date-picker
-      v-model="value13"
+      v-model="value"
       type="daterange"
       start-placeholder="开始日期"
       end-placeholder="结束日期"
@@ -418,7 +375,7 @@
   export default {
     data() {
       return {
-        value13: ''
+        value: ''
       };
     }
   };
@@ -429,6 +386,7 @@
 ### Attributes
 | 参数      | 说明          | 类型      | 可选值                           | 默认值  |
 |---------- |-------------- |---------- |--------------------------------  |-------- |
+| value / v-model | 绑定值 | date(DatePicker) / array(DateRangePicker) | — | — |
 | readonly | 完全只读 | boolean | — | false |
 | disabled | 禁用 | boolean | — | false |
 | editable | 文本框可输入 | boolean | — | true |
@@ -437,7 +395,7 @@
 | placeholder | 非范围选择时的占位内容 | string | — | — |
 | start-placeholder | 范围选择时开始日期的占位内容 | string | — | — |
 | end-placeholder | 范围选择时结束日期的占位内容 | string | — | — |
-| type | 显示类型 | string | year/month/date/dates/ week/datetime/datetimerange/daterange | date |
+| type | 显示类型 | string | year/month/date/dates/ week/datetime/datetimerange/ daterange/monthrange | date |
 | format | 显示在输入框中的格式 | string | 见[日期格式](#/zh-CN/component/date-picker#ri-qi-ge-shi) | yyyy-MM-dd |
 | align | 对齐方式 | string | left, center, right | left |
 | popper-class | DatePicker 下拉框的类名 | string | — | — |
@@ -450,12 +408,14 @@
 | unlink-panels | 在范围选择器里取消两个日期面板之间的联动 | boolean | — | false |
 | prefix-icon | 自定义头部图标的类名 | string | — | el-icon-date |
 | clear-icon | 自定义清空图标的类名 | string | — | el-icon-circle-close |
+| validate-event | 输入时是否触发表单的校验 | boolean | - | true |
 
 ### Picker Options
 | 参数      | 说明          | 类型      | 可选值                           | 默认值  |
 |---------- |-------------- |---------- |--------------------------------  |-------- |
 | shortcuts | 设置快捷选项，需要传入 { text, onClick } 对象用法参考 demo 或下表 | Object[] | — | — |
 | disabledDate | 设置禁用状态，参数为当前日期，要求返回 Boolean | Function | — | — |
+| cellClassName | 设置日期的 className | Function(Date) | — | — |
 | firstDayOfWeek | 周起始日 | Number | 1 到 7 | 7 |
 | onPick | 选中日期后会执行的回调，只有当 `daterange` 或 `datetimerange` 才生效 | Function({ maxDate, minDate }) | — | — |
 
diff --git a/examples/docs/zh-CN/datetime-picker.md b/examples/docs/zh-CN/datetime-picker.md
index 89d6de52cbd..c1f94a8f3b7 100644
--- a/examples/docs/zh-CN/datetime-picker.md
+++ b/examples/docs/zh-CN/datetime-picker.md
@@ -1,92 +1,3 @@
-<script>
-  module.exports = {
-    data() {
-      return {
-        pickerOptions1: {
-          shortcuts: [{
-            text: '今天',
-            onClick(picker) {
-              picker.$emit('pick', new Date());
-            }
-          }, {
-            text: '昨天',
-            onClick(picker) {
-              const date = new Date();
-              date.setTime(date.getTime() - 3600 * 1000 * 24);
-              picker.$emit('pick', date);
-            }
-          }, {
-            text: '一周前',
-            onClick(picker) {
-              const date = new Date();
-              date.setTime(date.getTime() - 3600 * 1000 * 24 * 7);
-              picker.$emit('pick', date);
-            }
-          }]
-        },
-        pickerOptions2: {
-          shortcuts: [{
-            text: '最近一周',
-            onClick(picker) {
-              const end = new Date();
-              const start = new Date();
-              start.setTime(start.getTime() - 3600 * 1000 * 24 * 7);
-              picker.$emit('pick', [start, end]);
-            }
-          }, {
-            text: '最近一个月',
-            onClick(picker) {
-              const end = new Date();
-              const start = new Date();
-              start.setTime(start.getTime() - 3600 * 1000 * 24 * 30);
-              picker.$emit('pick', [start, end]);
-            }
-          }, {
-            text: '最近三个月',
-            onClick(picker) {
-              const end = new Date();
-              const start = new Date();
-              start.setTime(start.getTime() - 3600 * 1000 * 24 * 90);
-              picker.$emit('pick', [start, end]);
-            }
-          }]
-        },
-        value1: '',
-        value2: '',
-        value3: '',
-        value4: [new Date(2000, 10, 10, 10, 10), new Date(2000, 10, 11, 10, 10)],
-        value5: '',
-        value6: '',
-        value7: ''
-      };
-    }
-  };
-</script>
-
-<style>
-.demo-block.demo-datetime-picker .source {
-    padding: 0;
-    display: flex;
-  }
-
-  .demo-datetime-picker .block {
-    padding: 30px 0;
-    text-align: center;
-    border-right: solid 1px #EFF2F6;
-    flex: 1;
-    &:last-child {
-      border-right: none;
-    }
-  }
-
-  .demo-datetime-picker .demonstration {
-    display: block;
-    color: #8492a6;
-    font-size: 14px;
-    margin-bottom: 20px;
-  }
-</style>
-
 ## DateTimePicker 日期时间选择器
 
 在同一个选择器里选择日期和时间
@@ -115,7 +26,7 @@ DateTimePicker 由 DatePicker 和 TimePicker 派生，`Picker Options` 或者其
       type="datetime"
       placeholder="选择日期时间"
       align="right"
-      :picker-options="pickerOptions1">
+      :picker-options="pickerOptions">
     </el-date-picker>
   </div>
   <div class="block">
@@ -133,7 +44,7 @@ DateTimePicker 由 DatePicker 和 TimePicker 派生，`Picker Options` 或者其
   export default {
     data() {
       return {
-        pickerOptions1: {
+        pickerOptions: {
           shortcuts: [{
             text: '今天',
             onClick(picker) {
@@ -173,7 +84,7 @@ DateTimePicker 由 DatePicker 和 TimePicker 派生，`Picker Options` 或者其
   <div class="block">
     <span class="demonstration">默认</span>
     <el-date-picker
-      v-model="value4"
+      v-model="value1"
       type="datetimerange"
       range-separator="至"
       start-placeholder="开始日期"
@@ -183,9 +94,9 @@ DateTimePicker 由 DatePicker 和 TimePicker 派生，`Picker Options` 或者其
   <div class="block">
     <span class="demonstration">带快捷选项</span>
     <el-date-picker
-      v-model="value5"
+      v-model="value2"
       type="datetimerange"
-      :picker-options="pickerOptions2"
+      :picker-options="pickerOptions"
       range-separator="至"
       start-placeholder="开始日期"
       end-placeholder="结束日期"
@@ -198,7 +109,7 @@ DateTimePicker 由 DatePicker 和 TimePicker 派生，`Picker Options` 或者其
   export default {
     data() {
       return {
-        pickerOptions2: {
+        pickerOptions: {
           shortcuts: [{
             text: '最近一周',
             onClick(picker) {
@@ -225,8 +136,8 @@ DateTimePicker 由 DatePicker 和 TimePicker 派生，`Picker Options` 或者其
             }
           }]
         },
-        value4: [new Date(2000, 10, 10, 10, 10), new Date(2000, 10, 11, 10, 10)],
-        value5: ''
+        value1: [new Date(2000, 10, 10, 10, 10), new Date(2000, 10, 11, 10, 10)],
+        value2: ''
       };
     }
   };
@@ -242,7 +153,7 @@ DateTimePicker 由 DatePicker 和 TimePicker 派生，`Picker Options` 或者其
   <div class="block">
     <span class="demonstration">起始日期时刻为 12:00:00</span>
     <el-date-picker
-      v-model="value6"
+      v-model="value1"
       type="datetimerange"
       start-placeholder="开始日期"
       end-placeholder="结束日期"
@@ -252,7 +163,7 @@ DateTimePicker 由 DatePicker 和 TimePicker 派生，`Picker Options` 或者其
   <div class="block">
     <span class="demonstration">起始日期时刻为 12:00:00，结束日期时刻为 08:00:00</span>
     <el-date-picker
-      v-model="value7"
+      v-model="value2"
       type="datetimerange"
       align="right"
       start-placeholder="开始日期"
@@ -266,8 +177,8 @@ DateTimePicker 由 DatePicker 和 TimePicker 派生，`Picker Options` 或者其
   export default {
     data() {
       return {
-        value6: '',
-        value7: ''
+        value1: '',
+        value2: ''
       };
     }
   };
@@ -278,6 +189,7 @@ DateTimePicker 由 DatePicker 和 TimePicker 派生，`Picker Options` 或者其
 ### Attributes
 | 参数      | 说明          | 类型      | 可选值                           | 默认值  |
 |---------- |-------------- |---------- |--------------------------------  |-------- |
+| value / v-model | 绑定值 | date(DateTimePicker) / array(DateTimeRangePicker) | — | — |
 | readonly | 完全只读 | boolean | — | false |
 | disabled | 禁用 | boolean | — | false |
 | editable | 文本框可输入 | boolean | — | true |
@@ -288,7 +200,7 @@ DateTimePicker 由 DatePicker 和 TimePicker 派生，`Picker Options` 或者其
 | end-placeholder | 范围选择时结束日期的占位内容 | string | — | — |
 | time-arrow-control | 是否使用箭头进行时间选择 | boolean | — | false |
 | type | 显示类型 | string | year/month/date/week/ datetime/datetimerange/daterange | date |
-| format | 显示在输入框中的格式 | string | 见[日期格式](#/zh-CN/component/date-picker#ri-qi-ge-shi) | yyyy-MM-dd |
+| format | 显示在输入框中的格式 | string | 见[日期格式](#/zh-CN/component/date-picker#ri-qi-ge-shi) | yyyy-MM-dd HH:mm:ss |
 | align | 对齐方式 | string | left, center, right | left |
 | popper-class | DateTimePicker 下拉框的类名 | string | — | — |
 | picker-options | 当前时间日期选择器特有的选项参考下表 | object |  — | {} |
@@ -306,6 +218,7 @@ DateTimePicker 由 DatePicker 和 TimePicker 派生，`Picker Options` 或者其
 |---------- |-------------- |---------- |--------------------------------  |-------- |
 | shortcuts | 设置快捷选项，需要传入 { text, onClick } 对象用法参考 demo 或下表 | Object[] | — | — |
 | disabledDate | 设置禁用状态，参数为当前日期，要求返回 Boolean | Function | — | — |
+| cellClassName | 设置日期的 className | Function(Date) | — | — |
 | firstDayOfWeek | 周起始日 | Number | 1 到 7 | 7 |
 
 ### Shortcuts
diff --git a/examples/docs/zh-CN/dialog.md b/examples/docs/zh-CN/dialog.md
index 091a4231502..0c21c65334e 100644
--- a/examples/docs/zh-CN/dialog.md
+++ b/examples/docs/zh-CN/dialog.md
@@ -1,77 +1,3 @@
-<script>
-  module.exports = {
-    data() {
-      return {
-        gridData: [{
-          date: '2016-05-02',
-          name: '王小虎',
-          address: '上海市普陀区金沙江路 1518 弄'
-        }, {
-          date: '2016-05-04',
-          name: '王小虎',
-          address: '上海市普陀区金沙江路 1518 弄'
-        }, {
-          date: '2016-05-01',
-          name: '王小虎',
-          address: '上海市普陀区金沙江路 1518 弄'
-        }, {
-          date: '2016-05-03',
-          name: '王小虎',
-          address: '上海市普陀区金沙江路 1518 弄'
-        }],
-        dialogVisible: false,
-        dialogTableVisible: false,
-        dialogFormVisible: false,
-        outerVisible: false,
-        innerVisible: false,
-        centerDialogVisible: false,
-        form: {
-          name: '',
-          region: '',
-          date1: '',
-          date2: '',
-          delivery: false,
-          type: [],
-          resource: '',
-          desc: ''
-        },
-        formLabelWidth: '80px'
-      };
-    },
-    methods: {
-      handleClose(done) {
-        this.$confirm('确认关闭？')
-          .then(_ => {
-            done();
-          })
-          .catch(_ => {});
-      }
-    }
-  };
-</script>
-
-<style>
-  .demo-box.demo-dialog {
-    .dialog-footer button:first-child {
-      margin-right: 10px;
-    }
-    .full-image {
-      width: 100%;
-    }
-    .el-dialog__wrapper {
-      margin: 0;
-    }
-    .el-select {
-      width: 300px;
-    }
-    .el-input {
-      width: 300px;
-    }
-    .el-button--text {
-      margin-right: 15px;
-    }
-  }
-</style>
 ## Dialog 对话框
 在保留当前页面状态的情况下，告知用户并承载相关操作。
 
@@ -293,6 +219,7 @@ Dialog 的内容是懒渲染的，即在第一次被打开之前，传入的默
 | show-close | 是否显示关闭按钮 | boolean    | — | true |
 | before-close | 关闭前的回调，会暂停 Dialog 的关闭 | function(done)，done 用于关闭 Dialog | — | — |
 | center | 是否对头部和底部采用居中布局 | boolean | — | false |
+| destroy-on-close | 关闭时销毁 Dialog 中的元素 | boolean | — | false |
 
 ### Slot
 | name | 说明 |
diff --git a/examples/docs/zh-CN/divider.md b/examples/docs/zh-CN/divider.md
new file mode 100644
index 00000000000..a5dae7d3b24
--- /dev/null
+++ b/examples/docs/zh-CN/divider.md
@@ -0,0 +1,61 @@
+## Divider 分割线
+
+区隔内容的分割线。
+
+### 基础用法
+
+对不同章节的文本段落进行分割。
+
+:::demo
+```html
+<template>
+  <div>
+    <span>青春是一个短暂的美梦, 当你醒来时, 它早已消失无踪</span>
+    <el-divider></el-divider>
+    <span>少量的邪恶足以抵消全部高贵的品质, 害得人声名狼藉</span>
+  </div>
+</template>
+```
+:::
+
+### 设置文案
+
+可以在分割线上自定义文案内容。
+
+
+:::demo
+```html
+<template>
+  <div>
+    <span>头上一片晴天，心中一个想念</span>
+    <el-divider content-position="left">少年包青天</el-divider>
+    <span>饿了别叫妈, 叫饿了么</span>
+    <el-divider><i class="el-icon-mobile-phone"></i></el-divider>
+    <span>为了无法计算的价值</span>
+    <el-divider content-position="right">阿里云</el-divider>
+  </div>
+</template>
+```
+:::
+
+### 垂直分割
+
+:::demo
+```html
+<template>
+  <div>
+    <span>雨纷纷</span>
+    <el-divider direction="vertical"></el-divider>
+    <span>旧故里</span>
+    <el-divider direction="vertical"></el-divider>
+    <span>草木深</span>
+  </div>
+</template>
+```
+:::
+
+### Divider Attributes
+| 参数          | 说明            | 类型            | 可选值                 | 默认值   |
+|-------------  |---------------- |---------------- |---------------------- |-------- |
+| direction      | 设置分割线方向  | string  |            horizontal / vertical          |    horizontal     |
+| content-position      | 设置分割线文案的位置 | string  |  left / right / center  |  center |
\ No newline at end of file
diff --git a/examples/docs/zh-CN/drawer.md b/examples/docs/zh-CN/drawer.md
new file mode 100644
index 00000000000..2b6c53a212d
--- /dev/null
+++ b/examples/docs/zh-CN/drawer.md
@@ -0,0 +1,307 @@
+## Drawer 抽屉
+
+有些时候, `Dialog` 组件并不满足我们的需求, 比如你的表单很长, 亦或是你需要临时展示一些文档, `Drawer` 拥有和 `Dialog` 几乎相同的 API, 在 UI 上带来不一样的体验.
+
+### 基本用法
+
+呼出一个临时的侧边栏, 可以从多个方向呼出
+
+:::demo 需要设置 `visible` 属性，它的**类型**是 `boolean`,当为 **true** 时显示 Drawer。Drawer 分为两个部分：`title` 和 `body`，`title` 需要具名为 **title** 的 `slot`, 也可以通过 `title` 属性来定义，默认值为空。需要注意的是, Drawer 默认是从右往左打开, 当然可以设置对应的 `direction`, 详细请参考 `direction` 用法 最后，本例还展示了 `before-close` 的用法
+
+```html
+<el-radio-group v-model="direction">
+  <el-radio label="ltr">从左往右开</el-radio>
+  <el-radio label="rtl">从右往左开</el-radio>
+  <el-radio label="ttb">从上往下开</el-radio>
+  <el-radio label="btt">从下往上开</el-radio>
+</el-radio-group>
+
+<el-button @click="drawer = true" type="primary" style="margin-left: 16px;">
+  点我打开
+</el-button>
+
+<el-drawer
+  title="我是标题"
+  :visible.sync="drawer"
+  :direction="direction"
+  :before-close="handleClose">
+  <span>我来啦!</span>
+</el-drawer>
+
+<script>
+  export default {
+    data() {
+      return {
+        drawer: false,
+        direction: 'rtl',
+      };
+    },
+    methods: {
+      handleClose(done) {
+        this.$confirm('确认关闭？')
+          .then(_ => {
+            done();
+          })
+          .catch(_ => {});
+      }
+    }
+  };
+</script>
+```
+:::
+
+### 不添加 Title
+
+当你不需要标题到时候, 你还可以去掉标题
+
+:::demo 当遇到不需要 title 的场景时, 可以通过 `withHeader` 这个属性来关闭掉 title 的显示, 这样可以留出更大的空间给到用户, 为了用户的可访问性, 请务必设定 `title` 的值
+
+```html
+<el-button @click="drawer = true" type="primary" style="margin-left: 16px;">
+  点我打开
+</el-button>
+
+<el-drawer
+  title="我是标题"
+  :visible.sync="drawer"
+  :with-header="false">
+  <span>我来啦!</span>
+</el-drawer>
+
+<script>
+  export default {
+    data() {
+      return {
+        drawer: false,
+      };
+    }
+  };
+</script>
+```
+:::
+
+
+### 自定义内容
+
+和 `Dialog` 组件一样, `Drawer` 同样可以在其内部嵌套各种丰富的操作
+
+:::demo
+
+```html
+<el-button type="text" @click="table = true">打开嵌套表格的 Drawer</el-button>
+<el-button type="text" @click="dialog = true">打开嵌套 Form 的 Drawer</el-button>
+<el-drawer
+  title="我嵌套了表格!"
+  :visible.sync="table"
+  direction="rtl"
+  size="50%">
+   <el-table :data="gridData">
+      <el-table-column property="date" label="日期" width="150"></el-table-column>
+      <el-table-column property="name" label="姓名" width="200"></el-table-column>
+      <el-table-column property="address" label="地址"></el-table-column>
+    </el-table>
+</el-drawer>
+
+<el-drawer
+  title="我嵌套了 Form !"
+  :before-close="handleClose"
+  :visible.sync="dialog"
+  direction="ltr"
+  custom-class="demo-drawer"
+  ref="drawer"
+  >
+  <div class="demo-drawer__content">
+    <el-form :model="form">
+      <el-form-item label="活动名称" :label-width="formLabelWidth">
+        <el-input v-model="form.name" autocomplete="off"></el-input>
+      </el-form-item>
+      <el-form-item label="活动区域" :label-width="formLabelWidth">
+        <el-select v-model="form.region" placeholder="请选择活动区域">
+          <el-option label="区域一" value="shanghai"></el-option>
+          <el-option label="区域二" value="beijing"></el-option>
+        </el-select>
+      </el-form-item>
+    </el-form>
+    <div class="demo-drawer__footer">
+      <el-button @click="cancelForm">取 消</el-button>
+      <el-button type="primary" @click="$refs.drawer.closeDrawer()" :loading="loading">{{ loading ? '提交中 ...' : '确 定' }}</el-button>
+    </div>
+  </div>
+</el-drawer>
+
+<script>
+export default {
+  data() {
+    return {
+      table: false,
+      dialog: false,
+      loading: false,
+      gridData: [{
+        date: '2016-05-02',
+        name: '王小虎',
+        address: '上海市普陀区金沙江路 1518 弄'
+      }, {
+        date: '2016-05-04',
+        name: '王小虎',
+        address: '上海市普陀区金沙江路 1518 弄'
+      }, {
+        date: '2016-05-01',
+        name: '王小虎',
+        address: '上海市普陀区金沙江路 1518 弄'
+      }, {
+        date: '2016-05-03',
+        name: '王小虎',
+        address: '上海市普陀区金沙江路 1518 弄'
+      }],
+      form: {
+        name: '',
+        region: '',
+        date1: '',
+        date2: '',
+        delivery: false,
+        type: [],
+        resource: '',
+        desc: ''
+      },
+      formLabelWidth: '80px',
+      timer: null,
+    };
+  },
+  methods: {
+    handleClose(done) {
+      if (this.loading) {
+        return;
+      }
+      this.$confirm('确定要提交表单吗？')
+        .then(_ => {
+          this.loading = true;
+          this.timer = setTimeout(() => {
+            done();
+            // 动画关闭需要一定的时间
+            setTimeout(() => {
+              this.loading = false;
+            }, 400);
+          }, 2000);
+        })
+        .catch(_ => {});
+    },
+    cancelForm() {
+      this.loading = false;
+      this.dialog = false;
+      clearTimeout(this.timer);
+    }
+  }
+}
+</script>
+```
+:::
+
+### 多层嵌套
+
+`Drawer` 组件也拥有多层嵌套的方法
+
+:::demo 同样, 如果你需要嵌套多层 `Drawer` 请一定要设置 `append-to-body` 属性为 **true**
+
+```html
+
+<el-button @click="drawer = true" type="primary" style="margin-left: 16px;">
+  点我打开
+</el-button>
+
+<el-drawer
+  title="我是外面的 Drawer"
+  :visible.sync="drawer"
+  size="50%">
+  <div>
+   <el-button @click="innerDrawer = true">打开里面的!</el-button>
+   <el-drawer
+     title="我是里面的"
+     :append-to-body="true"
+     :before-close="handleClose"
+     :visible.sync="innerDrawer">
+     <p>_(:зゝ∠)_</p>
+   </el-drawer>
+  </div>
+</el-drawer>
+
+<script>
+  export default {
+    data() {
+      return {
+        drawer: false,
+        innerDrawer: false,
+      };
+    },
+    methods: {
+      handleClose(done) {
+        this.$confirm('还有未保存的工作哦确定关闭吗？')
+          .then(_ => {
+            done();
+          })
+          .catch(_ => {});
+      }
+    }
+  };
+</script>
+
+```
+:::
+
+:::tip
+
+Drawer 的内容是懒渲染的，即在第一次被打开之前，传入的默认 slot 不会被渲染到 DOM 上。因此，如果需要执行 DOM 操作，或通过 `ref` 获取相应组件，请在 `open` 事件回调中进行。
+
+:::
+
+:::tip
+
+Drawer 提供一个 `destroyOnClose` API, 用来在关闭 Drawer 时销毁子组件内容, 例如清理表单内的状态, 在必要时可以将该属性设置为 **true** 用来保证初始状态的一致性
+
+:::
+
+:::tip
+
+如果 `visible` 属性绑定的变量位于 Vuex 的 store 内，那么 `.sync` 不会正常工作。此时需要去除 `.sync` 修饰符，同时监听 Drawer 的 `open` 和 `close` 事件，在事件回调中执行 Vuex 中对应的 mutation 更新 `visible` 属性绑定的变量的值。
+
+:::
+
+### Drawer Attributes
+
+| 参数      | 说明          | 类型      | 可选值                           | 默认值  |
+|---------- |-------------- |---------- |--------------------------------  |-------- |
+| append-to-body     | Drawer 自身是否插入至 body 元素上。嵌套的 Drawer 必须指定该属性并赋值为 true   | boolean   | — | false |
+| before-close | 关闭前的回调，会暂停 Drawer 的关闭 | function(done)，done 用于关闭 Drawer | — | — |
+| close-on-press-escape | 是否可以通过按下 ESC 关闭 Drawer | boolean    | — | true |
+| custom-class      | Drawer 的自定义类名 | string    | — | — |
+| destroy-on-close | 控制是否在关闭 Drawer 之后将子元素全部销毁 | boolean | - | false |
+| modal     | 是否需要遮罩层   | boolean   | — | true |
+| modal-append-to-body     | 遮罩层是否插入至 body 元素上，若为 false，则遮罩层会插入至 Drawer 的父元素上   | boolean   | — | true |
+| direction | Drawer 打开的方向 | Direction | rtl / ltr / ttb / btt | rtl |
+| show-close | 是否显示关闭按钮 | boolean    | — | true |
+| size | Drawer 窗体的大小, 当使用 `number` 类型时, 以像素为单位, 当使用 `string` 类型时, 请传入 'x%', 否则便会以 `number` 类型解释 | number / string | - | '30%' |
+| title     | Drawer 的标题，也可通过具名 slot （见下表）传入 | string    | — | — |
+| visible   | 是否显示 Drawer，支持 .sync 修饰符 | boolean | — | false |
+| wrapperClosable | 点击遮罩层是否可以关闭 Drawer | boolean | - | true |
+| withHeader | 控制是否显示 header 栏, 默认为 true, 当此项为 false 时, title attribute 和 title slot 均不生效 | boolean | - | true |
+
+### Drawer Slot
+
+| name | 说明 |
+|------|--------|
+| — | Drawer 的内容 |
+| title | Drawer 标题区的内容 |
+
+### Drawer Methods
+
+| name | 说明 |
+| ---- | ---  |
+| closeDrawer | 用于关闭 Drawer, 该方法会调用传入的 `before-close` 方法 |
+
+### Drawer Events
+
+| 事件名称      | 说明    | 回调参数      |
+|---------- |-------- |---------- |
+| open  | Drawer 打开的回调 | — |
+| opened  | Drawer 打开动画结束时的回调 | — |
+| close  | Drawer 关闭的回调 | — |
+| closed | Drawer 关闭动画结束时的回调 | — |
diff --git a/examples/docs/zh-CN/dropdown.md b/examples/docs/zh-CN/dropdown.md
index 45c0cd45ce4..1c725d422e9 100644
--- a/examples/docs/zh-CN/dropdown.md
+++ b/examples/docs/zh-CN/dropdown.md
@@ -1,55 +1,3 @@
-<style>
-  .demo-box {
-    .el-dropdown {
-      vertical-align: top;
-
-      & + .el-dropdown {
-        margin-left: 15px;
-      }
-    }
-    .el-dropdown-link {
-      cursor: pointer;
-      color: #409EFF;
-    }
-    .el-icon-arrow-down {
-      font-size: 12px;
-    }
-  }
-
-  .block-col-2 {
-    margin: -24px;
-
-    .el-col {
-      padding: 30px 0;
-      text-align: center;
-      border-right: 1px solid #eff2f6;
-
-      &:last-child {
-        border-right: 0;
-      }
-    }
-  }
-
- .demo-dropdown .demonstration {
-   display: block;
-   color: #8492a6;
-   font-size: 14px;
-   margin-bottom: 20px;
- }
-</style>
-
-<script>
-  export default {
-    methods: {
-      handleClick() {
-        alert('button click');
-      },
-      handleCommand(command) {
-        this.$message('click on item ' + command);
-      }
-    }
-  }
-</script>
 ## Dropdown 下拉菜单
 
 将动作或菜单折叠到下拉菜单中。
@@ -73,18 +21,17 @@
     <el-dropdown-item divided>蚵仔煎</el-dropdown-item>
   </el-dropdown-menu>
 </el-dropdown>
-```
 
 <style>
   .el-dropdown-link {
     cursor: pointer;
-    color: #409EFF;
+    color: #2460e0;
   }
   .el-icon-arrow-down {
     font-size: 12px;
   }
 </style>
-
+```
 :::
 
 ### 触发对象
@@ -156,11 +103,11 @@
         下拉菜单<i class="el-icon-arrow-down el-icon--right"></i>
       </span>
       <el-dropdown-menu slot="dropdown">
-        <el-dropdown-item>黄金糕</el-dropdown-item>
-        <el-dropdown-item>狮子头</el-dropdown-item>
-        <el-dropdown-item>螺蛳粉</el-dropdown-item>
-        <el-dropdown-item>双皮奶</el-dropdown-item>
-        <el-dropdown-item>蚵仔煎</el-dropdown-item>
+        <el-dropdown-item icon="el-icon-plus">黄金糕</el-dropdown-item>
+        <el-dropdown-item icon="el-icon-circle-plus">狮子头</el-dropdown-item>
+        <el-dropdown-item icon="el-icon-circle-plus-outline">螺蛳粉</el-dropdown-item>
+        <el-dropdown-item icon="el-icon-check">双皮奶</el-dropdown-item>
+        <el-dropdown-item icon="el-icon-circle-check">蚵仔煎</el-dropdown-item>
       </el-dropdown-menu>
     </el-dropdown>
   </el-col>
@@ -171,21 +118,20 @@
         下拉菜单<i class="el-icon-arrow-down el-icon--right"></i>
       </span>
       <el-dropdown-menu slot="dropdown">
-        <el-dropdown-item>黄金糕</el-dropdown-item>
-        <el-dropdown-item>狮子头</el-dropdown-item>
-        <el-dropdown-item>螺蛳粉</el-dropdown-item>
-        <el-dropdown-item>双皮奶</el-dropdown-item>
-        <el-dropdown-item>蚵仔煎</el-dropdown-item>
+        <el-dropdown-item icon="el-icon-plus">黄金糕</el-dropdown-item>
+        <el-dropdown-item icon="el-icon-circle-plus">狮子头</el-dropdown-item>
+        <el-dropdown-item icon="el-icon-circle-plus-outline">螺蛳粉</el-dropdown-item>
+        <el-dropdown-item icon="el-icon-check">双皮奶</el-dropdown-item>
+        <el-dropdown-item icon="el-icon-circle-check">蚵仔煎</el-dropdown-item>
       </el-dropdown-menu>
     </el-dropdown>
   </el-col>
 </el-row>
-```
 
 <style>
   .el-dropdown-link {
     cursor: pointer;
-    color: #409EFF;
+    color: #2460e0;
   }
   .el-icon-arrow-down {
     font-size: 12px;
@@ -197,7 +143,7 @@
     margin-bottom: 20px;
   }
 </style>
-
+```
 :::
 
 ### 菜单隐藏方式
@@ -222,7 +168,7 @@
 <style>
   .el-dropdown-link {
     cursor: pointer;
-    color: #409EFF;
+    color: #2460e0;
   }
   .el-icon-arrow-down {
     font-size: 12px;
@@ -253,7 +199,7 @@
 <style>
   .el-dropdown-link {
     cursor: pointer;
-    color: #409EFF;
+    color: #2460e0;
   }
   .el-icon-arrow-down {
     font-size: 12px;
@@ -336,6 +282,7 @@ Dropdown 组件提供除了默认值以外的三种尺寸，可以在不同场
 | hide-on-click | 是否在点击菜单项后隐藏菜单     | boolean          | — | true |
 | show-timeout  | 展开下拉菜单的延时（仅在 trigger 为 hover 时有效）| number          | — | 250 |
 | hide-timeout  | 收起下拉菜单的延时（仅在 trigger 为 hover 时有效）| number          | — | 150 |
+| tabindex      | Dropdown 组件的 [tabindex](https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/tabindex) | number | — | 0 |
 
 ### Dropdown Slots
 
@@ -357,3 +304,4 @@ Dropdown 组件提供除了默认值以外的三种尺寸，可以在不同场
 | command       | 指令     | string/number/object          | — | — |
 | disabled      | 禁用     | boolean          | — | false |
 | divided       | 显示分割线     | boolean          | — | false |
+| icon          | 图标类名 | string   |  —  |  —  |
diff --git a/examples/docs/zh-CN/edit-table.md b/examples/docs/zh-CN/edit-table.md
new file mode 100644
index 00000000000..0f236ceaf5d
--- /dev/null
+++ b/examples/docs/zh-CN/edit-table.md
@@ -0,0 +1,624 @@
+## EditTable 可编辑表格组件
+
+### 基本使用
+
+columns兼容el-form-renderer的基本属性，表单数据支持双向绑定。type暂时只支持input和select，和支持自定义component属性。
+
+:::demo
+
+```html
+<el-edit-table ref="form" :columns="columns" v-model="data"></el-edit-table>
+<el-button @click="validate">校验表单</el-button>
+<el-button @click="clearValidate">清除校验</el-button>
+<div>当前数据：{{data}}</div>
+
+<script>
+export default {
+  data() {
+    return {
+      data: [],
+      columns:[
+        {id: 'name', label: '姓名', type: 'input', el: {placeholder: '输入姓名'}, rules: [{required: true, trigger: 'blur', message: '请输入姓名'}]},
+        {
+          id: 'phone',
+          label: '手机号',
+          type: 'input',
+          default: '13',
+          el: {placeholder: '输入手机号码'},
+          rules:[
+            {
+              validator: (rule,value,callback) => {
+                if(value && !/^1\d{10}$/.test(value)){
+                  callback(new Error('请输入正确的手机号码'))
+                  return false
+                }
+                callback()
+                return true
+              },
+              trigger: 'blur',
+            }
+          ]
+        },
+        {id: 'sex' , label: '性别', type: 'select', el: {placeholder: '选择性别'}, options: [{label: '男', value: 'male'}, {label: '女', value: 'female'}]}
+      ]
+    }
+  },
+  methods: {
+    validate(){
+      this.$refs.form.validate()
+    },
+    clearValidate() {
+      this.$refs.form.clearValidate()
+    }
+  }
+}
+</script>
+```
+
+:::
+
+### 使用setOptions
+
+setOptions使用方法和el-form-renderer的基本一致。但有第三个参数index来单独设置某行的options，没有第三个参数则设置所有行的options
+
+:::demo
+
+```html
+<el-edit-table ref="form" :columns="columns" v-model="data"></el-edit-table>
+
+<script>
+export default {
+  data() {
+    return {
+      data: [],
+      columns:[
+        {id: 'name', label: '姓名', type: 'input', el: {placeholder: '输入姓名'}, rules: [{required: true, trigger: 'blur', message: '请输入姓名'}]},
+        {
+          id: 'province',
+          label: '省',
+          type: 'select',
+          el: {placeholder: '选择省'},
+          on: {
+            change: this.setCityOptions
+          }
+        },
+        {id: 'city' , label: '市', type: 'select', el: {placeholder: '选择市'}, options: []}
+      ]
+    }
+  },
+  mounted(){
+    this.$refs.form.setOptions('province', [{label:'广东', value: '1'}, {label: '江苏', value: '2'}])
+  },
+  methods: {
+    setCityOptions(data, value){
+      if(value === '1') {
+        this.$refs.form.setOptions('city', [{label: '广州', value: '11'}, {label: '深圳', value: '12'}], data.index)
+      }else if(value === '2') {
+        this.$refs.form.setOptions('city', [{label: '南京', value: '21'}, {label: '无锡', value: '22'}], data.index)
+      }
+    }
+  }
+}
+</script>
+```
+
+:::
+
+### 禁止添加和删减
+
+使用has-operation属性可禁止删减, 此时需要自己设定value数组的长度来决定表格的行数
+
+:::demo
+
+```html
+<el-edit-table ref="form" :columns="columns" v-model="data" :has-operation="false"></el-edit-table>
+
+<script>
+export default {
+  data() {
+    return {
+      data: Array(4).fill({}),
+      columns:[
+        {id: 'name', label: '姓名', type: 'input', el: {placeholder: '输入姓名'}, rules: [{required: true, trigger: 'blur', message: '请输入姓名'}]},
+        {
+          id: 'phone',
+          label: '手机号',
+          type: 'input',
+          default: '13',
+          el: {placeholder: '输入手机号码'},
+          rules:[
+            {
+              validator: (rule, value, callback) => {
+                if(value && !/^1\d{10}$/.test(value)){
+                  callback(new Error('请输入正确的手机号码'))
+                  return false
+                }
+                return true
+              },
+              trigger: 'blur',
+            }
+          ]
+        },
+        {id: 'sex' , label: '性别', type: 'select', el: {placeholder: '选择性别'}, options: [{label: '男', value: 'male'}, {label: '女', value: 'female'}]}
+      ]
+    }
+  },
+  mounted(){},
+  methods: {}
+}
+</script>
+```
+
+:::
+
+### 设置最小行数和最大行数
+
+使用min和max属性设置最小行数和最大行数, min最小值为1，max>=min。此时value数组长度小于min会补齐，大于max会截取前max个数据。min默认为1，max默认为Infinity。
+
+:::demo
+
+```html
+<div>只能设置3-5行数据：</div>
+<el-edit-table ref="form" :columns="columns" v-model="data" :min="3" :max="5"></el-edit-table>
+
+<script>
+export default {
+  data() {
+    return {
+      data: [],
+      columns:[
+        {id: 'name', label: '姓名', type: 'input', el: {placeholder: '输入姓名'}, rules: [{required: true, trigger: 'blur', message: '请输入姓名'}]},
+        {
+          id: 'phone',
+          label: '手机号',
+          type: 'input',
+          default: '13',
+          el: {placeholder: '输入手机号码'},
+          rules:[
+            {
+              validator: (rule, value, callback) => {
+                if(value && !/^1\d{10}$/.test(value)){
+                  callback(new Error('请输入正确的手机号码'))
+                  return false
+                }
+                return true
+              },
+              trigger: 'blur',
+            }
+          ]
+        },
+        {id: 'sex' , label: '性别', type: 'select', el: {placeholder: '选择性别'}, options: [{label: '男', value: 'male'}, {label: '女', value: 'female'}]}
+      ]
+    }
+  }
+}
+</script>
+```
+
+:::
+
+### 使用slot
+
+设置默认slot可以在前面生成自定义列; add slot自定义添加内容; delete slot自定义删除内容。scope内置disabled状态。
+
+:::demo
+
+```html
+<el-edit-table ref="form" :columns="columns" v-model="data">
+  <el-table-column label="序列" width="50px" align="center">
+    <template slot-scope="scope">{{scope.$index + 1}}</template>
+  </el-table-column>
+  <template slot="add" slot-scope="scope">
+    <el-button :disabled="scope.disabled" type="primary">点这里添加一行</el-button>
+  </template>
+  <template slot="delete" slot-scope="scope">
+    <el-button :disabled="scope.disabled" type="danger">点这里删除本行</el-button>
+  </template>
+</el-edit-table>
+
+<script>
+export default {
+  data() {
+    return {
+      data: [],
+      columns:[
+        {id: 'name', label: '姓名', type: 'input', el: {placeholder: '输入姓名'}, rules: [{required: true, trigger: 'blur', message: '请输入姓名'}]},
+        {
+          id: 'phone',
+          label: '手机号',
+          type: 'input',
+          default: '13',
+          el: {placeholder: '输入手机号码'},
+          rules:[
+            {
+              validator: (rule, value, callback) => {
+                if(value && !/^1\d{10}$/.test(value)){
+                  callback(new Error('请输入正确的手机号码'))
+                  return false
+                }
+                return true
+              },
+              trigger: 'blur',
+            }
+          ]
+        },
+        {id: 'sex' , label: '性别', type: 'select', el: {placeholder: '选择性别'}, options: [{label: '男', value: 'male'}, {label: '女', value: 'female'}]}
+      ]
+    }
+  },
+  mounted(){},
+  methods: {}
+}
+</script>
+```
+
+:::
+
+### 使用slot表头
+
+设置slot='header:'+column.id即可设置对应的表头内容
+
+:::demo
+
+```html
+<el-edit-table ref="form" :columns="columns" v-model="data">
+  <el-tooltip slot="header:name" slot-scope="scope" content="输入姓名">
+    <span class="el-icon-s-custom">{{scope.column.label}}</span>
+  </el-tooltip>
+</el-edit-table>
+
+<script>
+export default {
+  data() {
+    return {
+      data: [],
+      columns:[
+        {id: 'name', label: '姓名', type: 'input', el: {placeholder: '输入姓名'}, rules: [{required: true, trigger: 'blur', message: '请输入姓名'}]},
+        {
+          id: 'phone',
+          label: '手机号',
+          type: 'input',
+          default: '13',
+          el: {placeholder: '输入手机号码'},
+          rules:[
+            {
+              validator: (rule, value, callback) => {
+                if(value && !/^1\d{10}$/.test(value)){
+                  callback(new Error('请输入正确的手机号码'))
+                  return false
+                }
+                return true
+              },
+              trigger: 'blur',
+            }
+          ]
+        },
+        {id: 'sex' , label: '性别', type: 'select', el: {placeholder: '选择性别'}, options: [{label: '男', value: 'male'}, {label: '女', value: 'female'}]}
+      ]
+    }
+  }
+}
+</script>
+```
+
+:::
+
+### 事件触发
+
+:::demo
+
+```html
+<el-edit-table ref="form" :columns="columns" v-model="data" @delete="deleteRow"></el-edit-table>
+
+<script>
+export default {
+  data() {
+    return {
+      data: Array(3).fill({}),
+      columns:[
+        {id: 'name', label: '姓名', type: 'input', el: {placeholder: '输入姓名'}, rules: [{required: true, trigger: 'blur', message: '请输入姓名'}]},
+        {
+          id: 'phone',
+          label: '手机号',
+          type: 'input',
+          default: '13',
+          el: {placeholder: '输入手机号码'},
+          rules:[
+            {
+              validator: (rule, value, callback) => {
+                if(value && !/^1\d{10}$/.test(value)){
+                  callback(new Error('请输入正确的手机号码'))
+                  return false
+                }
+                return true
+              },
+              trigger: 'blur',
+            }
+          ]
+        },
+        {id: 'sex' , label: '性别', type: 'select', el: {placeholder: '选择性别'}, options: [{label: '男', value: 'male'}, {label: '女', value: 'female'}]}
+      ]
+    }
+  },
+  methods: {
+    deleteRow(row, index) {
+      this.$message.success(`删除了第${index+1}行数据，数据为${JSON.stringify(row)}`)
+    }
+  }
+}
+</script>
+```
+
+:::
+
+### 单独设置column的readonly状态
+
+在各个column属性下设置readonly状态。当readonly=true时，则仅显示text文本。若column.formatter为函数时，则显示格式化后的文本。
+
+:::demo
+
+```html
+<el-edit-table ref="form" :columns="columns" v-model="data"></el-edit-table>
+
+<script>
+export default {
+  data() {
+    return {
+      data: [{name: 'readonly'}, {}],
+      columns:[
+        {id: 'name', label: '姓名', type: 'input', el: {placeholder: '输入姓名'}, rules: [{required: true, trigger: 'blur', message: '请输入姓名'}]},
+        {
+          id: 'phone',
+          label: '手机号',
+          type: 'input',
+          default: '13',
+          el: {placeholder: '输入手机号码'},
+          rules:[
+            {
+              validator: (rule, value, callback) => {
+                if(value && !/^1\d{10}$/.test(value)){
+                  callback(new Error('请输入正确的手机号码'))
+                  return false
+                }
+                return true
+              },
+              trigger: 'blur',
+            }
+          ],
+        },
+        {id: 'sex' , label: '性别', type: 'select', el: {placeholder: '选择性别'}, default: 'man', options: [{label: '男', value: 'man'}, {label: '女', value: 'woman'}]},
+        {
+          id: 'readonly',
+          label: '组成句子',
+          type: 'input',
+          readonly: true,
+          formatter(row, column) {
+            return row.name?`${row.name} is a ${row.sex}, ${{man: 'his', woman: 'her'}[row.sex] || 'his'} phone number is ${row.phone}`:'Please Input Name'
+          }
+        }
+      ]
+    }
+  },
+}
+</script>
+```
+
+:::
+
+### EditTable的readonly状态
+
+readonly状态。当readonly=true时，则整个表格不可编辑，只是一个table。此时column内部的readonly不在生效，不建议如此使用。
+
+:::demo
+
+```html
+<el-edit-table ref="form" :columns="columns" readonly v-model="data"></el-edit-table>
+
+<script>
+export default {
+  data() {
+    return {
+      data: [{name: 'Jack', phone: '13123456789'},{name: 'Kate', phone: '13231456789', sex: 'woman'}],
+      columns:[
+        {id: 'name', label: '姓名', type: 'input', el: {placeholder: '输入姓名'}, rules: [{required: true, trigger: 'blur', message: '请输入姓名'}]},
+        {
+          id: 'phone',
+          label: '手机号',
+          type: 'input',
+          readonly: false,
+          el: {placeholder: '输入手机号码'},
+          rules:[
+            {
+              validator: (rule, value, callback) => {
+                if(value && !/^1\d{10}$/.test(value)){
+                  callback(new Error('请输入正确的手机号码'))
+                  return false
+                }
+                return true
+              },
+              trigger: 'blur',
+            }
+          ],
+        },
+        {id: 'sex' , label: '性别', type: 'select', el: {placeholder: '选择性别'}, default: 'man', options: [{label: '男', value: 'man'}, {label: '女', value: 'woman'}]}
+      ]
+    }
+  },
+}
+</script>
+```
+
+:::
+
+### 使用formatter函数
+
+当edit-table使用了 `readonly` 状态时，可在字段属性自定义 `column.formatter`。该函数接收 `row`, `cellValue` 和 `index` 参数，可返回 JSX(需要项目配置支持), 自定义组件和字符串。不定义则默认返回原数据对应的字段。
+
+:::demo
+
+```html
+<el-edit-table ref="form" :columns="columns" readonly v-model="data"></el-edit-table>
+
+<script>
+export default {
+  data() {
+    return {
+      data: [{name: 'Jack', phone: '13123456789'},{name: 'Kate', phone: '13231456789', sex: 'woman'}],
+      columns:[
+        {id: 'name', label: '姓名', type: 'input', el: {placeholder: '输入姓名'}, rules: [{required: true, trigger: 'blur', message: '请输入姓名'}]},
+        {
+          id: 'phone',
+          label: '手机号',
+          type: 'input',
+          readonly: false,
+          el: {placeholder: '输入手机号码'},
+          rules:[
+            {
+              validator: (rule, value, callback) => {
+                if(value && !/^1\d{10}$/.test(value)){
+                  callback(new Error('请输入正确的手机号码'))
+                  return false
+                }
+                return true
+              },
+              trigger: 'blur',
+            }
+          ],
+        },
+        {
+          id: 'sex',
+          label: '性别',
+          type: 'select',
+          el: {placeholder: '选择性别'},
+          default: 'man',
+          options: [{label: '男', value: 'man'}, {label: '女', value: 'woman'}],
+          formatter: (row, cellValue) => <span style="color: #2a7">{cellValue}</span>
+        },
+        {
+          id: 'readonly',
+          label: '组成句子',
+          type: 'input',
+          formatter(row) {
+            return row.name?`${row.name} is a ${row.sex}, ${{man: 'his', woman: 'her'}[row.sex] || 'his'} phone number is ${row.phone}`:'Please Input Name'
+          }
+        }
+      ]
+    }
+  },
+}
+</script>
+```
+
+:::
+
+### 异步更新和单独 setOptions
+
+:::demo
+
+```html
+<el-button @click="onSyncUpdate">Append</el-button>
+<el-button @click="onSetOptions">SetOptions</el-button>
+<el-edit-table ref="form" :columns="columns" v-model="data"></el-edit-table>
+
+<script>
+  export default {
+    data() {
+      return {
+        id: 1,
+        data: [
+          {
+            id: `第 1 行`,
+            option: '',
+          },
+        ],
+        columns: [
+          {
+            id: 'id',
+            label: '第几行',
+            type: 'input',
+            el: { placeholder: '请输入' },
+          },
+          {
+            id: 'option',
+            label: '选项',
+            type: 'select',
+            el: { placeholder: '请选择' },
+          },
+        ],
+      }
+    },
+    mounted() {
+      this.$refs.form.setOptions('option', [
+        { label: '这是统一的选项 A', value: 1 },
+        { label: '这是统一的选项 B', value: 2 },
+      ])
+    },
+    methods: {
+      onSyncUpdate() {
+        for (let i = 0; i < 3; i++) {
+          this.data.push({
+            id: `第 ${++this.id} 行`,
+            option: '',
+          })
+        }
+      },
+      onSetOptions() {
+        this.data.forEach((e, i) => {
+          this.$refs.form.setOptions(
+            'option',
+            [
+              {
+                label: `第 ${i + 1} 行的选项 A`,
+                value: 1,
+              },
+              {
+                label: `第 ${i + 1} 行的选项 B`,
+                value: 2,
+              },
+            ],
+            i,
+          )
+        })
+      },
+    },
+  }
+</script>
+```
+
+:::
+
+### Attributes
+
+| 参数      |   说明    |  类型     | 可选值       | 默认值   |
+|---------- | -------- |---------- |-------------  |-------- |
+| value | 表单数据 | array   |  —  |  —  |
+| columns | 表单字段,table列属性;和el-form-renderer的content基本一致 | array   |  —  |  —  |
+| min | 表格最少行数 | number |  自然数  |  1  |
+| max | 表格最多行数 | number   |  自然数  |  Infinity  |
+| hasOperation | 是否有添加和删除功能 | boolean   |  —  |  true  |
+| readonly | 表格是否可编辑,当为true时，hasOperation不生效 | boolean | — | false |
+| tableAttrs | el-table原生属性 | object   |  —  |  —  |
+| operationAttrs | 操作列的el-table-column原生属性 | object   |  —  |  —  |
+
+### Methods
+
+| 方法名      | 说明          | 参数 |
+|---------- |-------------- | -------------- |
+| validate | 返回el-form的validate方法 | Function(callback: Function(boolean, object))|
+| clearValidate | 返回el-form的clearValidate方法, 接收第二个参数行号数组，不传则清除整行 | Function(props: string/array, rowIndexes: array[number]) |
+|setOptions|同el-form-renderer的setOptions方法,前2个参数为列id,选项数组;第3个参数为所在行，起始行为0，不传则修改所有行的options|Function(id:string,options: array,index: number)|
+
+### Slot
+
+| name | 说明 |
+|------|--------|
+| default | 列表前插入内容 |
+| add | 添加按钮的slot，当添加按钮样式文案等无法满足时使用 |
+| delete | 删除按钮的slot，当删除按钮样式文案等无法满足时使用 |
+| header:${column.id} | 自定义对应column表头内容 |
+
+### Events
+
+| Event Name | Description | Parameters |
+|----| ---- | -------- |
+| delete | 删除行事件 | row：行数据，index：行号 |
diff --git a/examples/docs/zh-CN/empty.md b/examples/docs/zh-CN/empty.md
new file mode 100644
index 00000000000..66f6dbd96cd
--- /dev/null
+++ b/examples/docs/zh-CN/empty.md
@@ -0,0 +1,42 @@
+## Empty 空状态
+
+空状态时的展示占位图。
+
+### 何时使用
+
+当目前没有数据时，用于显式的用户提示。
+
+### 代码演示
+
+:::demo
+
+```html
+<template>
+  <el-empty />
+</template>
+```
+:::
+
+### 自定义
+
+自定义图片、描述、附属内容。
+
+:::demo
+
+```html
+<template>
+  <el-empty
+    image="https://gw.alipayobjects.com/mdn/miniapp_social/afts/img/A*pevERLJC9v0AAAAAAAAAAABjAQAAAQ/original"
+  >
+    <span slot="description"> Customize <a href="javascript:void(0)">Description</a> </span>
+    <el-button type="primary">Create Now</el-button>
+  </el-empty>
+</template>
+```
+:::
+
+### Attributes
+| 参数 | 说明  | 类型  | 可选值 | 默认值 |
+| --- | ------ | ---- | ----- | ---- |
+| description | 自定义描述内容 | string \| v-slot | - | - |
+| image       | 设置显示图片，为 string 时表示自定义图片地址 | string \| v-slot | - | false  |
diff --git a/examples/docs/zh-CN/form.md b/examples/docs/zh-CN/form.md
index c264bd2cc87..6bb86ee386b 100644
--- a/examples/docs/zh-CN/form.md
+++ b/examples/docs/zh-CN/form.md
@@ -1,243 +1,3 @@
-<script>
-  export default {
-    data() {
-      var checkAge = (rule, value, callback) => {
-        if (!value) {
-          return callback(new Error('年龄不能为空'));
-        }
-        setTimeout(() => {
-          if (!Number.isInteger(value)) {
-            callback(new Error('请输入数字值'));
-          } else {
-            if (value < 18) {
-              callback(new Error('必须年满18岁'));
-            } else {
-              callback();
-            }
-          }
-        }, 1000);
-      };
-      var validatePass = (rule, value, callback) => {
-        if (value === '') {
-          callback(new Error('请输入密码'));
-        } else {
-          if (this.ruleForm2.checkPass !== '') {
-            this.$refs.ruleForm2.validateField('checkPass');
-          }
-          callback();
-        }
-      };
-      var validatePass2 = (rule, value, callback) => {
-        if (value === '') {
-          callback(new Error('请再次输入密码'));
-        } else if (value !== this.ruleForm2.pass) {
-          callback(new Error('两次输入密码不一致!'));
-        } else {
-          callback();
-        }
-      };
-      return {
-        form: {
-          name: '',
-          region: '',
-          date1: '',
-          date2: '',
-          delivery: false,
-          type: [],
-          resource: '',
-          desc: ''
-        },
-        sizeForm: {
-          name: '',
-          region: '',
-          date1: '',
-          date2: '',
-          delivery: false,
-          type: [],
-          resource: '',
-          desc: ''
-        },
-        formInline: {
-          user: '',
-          region: ''
-        },
-        labelPosition: 'right',
-        formLabelAlign: {
-          name: '',
-          region: '',
-          type: ''
-        },
-        ruleForm: {
-          name: '',
-          region: '',
-          date1: '',
-          date2: '',
-          delivery: false,
-          type: [],
-          resource: '',
-          desc: ''
-        },
-        ruleForm2: {
-          pass: '',
-          checkPass: '',
-          age: ''
-        },
-        formLabelWidth: '80px',
-        rules: {
-          name: [
-            { required: true, message: '请输入活动名称', trigger: 'blur' },
-            { min: 3, max: 5, message: '长度在 3 到 5 个字符', trigger: 'blur' }
-          ],
-          region: [
-            { required: true, message: '请选择活动区域', trigger: 'change' }
-          ],
-          date1: [
-            { type: 'date', required: true, message: '请选择日期', trigger: 'change' }
-          ],
-          date2: [
-            { type: 'date', required: true, message: '请选择时间', trigger: 'change' }
-          ],
-          type: [
-            { type: 'array', required: true, message: '请至少选择一个活动性质', trigger: 'change' }
-          ],
-          resource: [
-            { required: true, message: '请选择活动资源', trigger: 'change' }
-          ],
-          desc: [
-            { required: true, message: '请填写活动形式', trigger: 'blur' }
-          ]
-        },
-        rules2: {
-          pass: [
-            { validator: validatePass, trigger: 'blur' }
-          ],
-          checkPass: [
-            { validator: validatePass2, trigger: 'blur' }
-          ],
-          age: [
-            { validator: checkAge, trigger: 'blur' }
-          ]
-        },
-        dynamicValidateForm: {
-          domains: [{
-            value: '',
-            key: Date.now()
-          }],
-          email: ''
-        },
-        numberValidateForm: {
-          age: ''
-        }
-      };
-    },
-    methods: {
-      onSubmit() {
-        console.log('submit!');
-      },
-      submitForm(formName) {
-        this.$refs[formName].validate((valid) => {
-          if (valid) {
-            alert('submit!');
-          } else {
-            console.log('error submit!!');
-            return false;
-          }
-        });
-      },
-      resetForm(formName) {
-        this.$refs[formName].resetFields();
-      },
-      removeDomain(item) {
-        var index = this.dynamicValidateForm.domains.indexOf(item)
-        if (index !== -1) {
-          this.dynamicValidateForm.domains.splice(index, 1)
-        }
-      },
-      addDomain() {
-        this.dynamicValidateForm.domains.push({
-          value: '',
-          key: Date.now()
-        });
-      }
-    }
-  }
-</script>
-
-<style>
-  .demo-form.demo-zh-CN {
-    .el-select .el-input {
-      width: 380px;
-    }
-    .el-form {
-      width: 460px;
-    }
-
-    .line {
-      text-align: center;
-    }
-
-    .el-checkbox-group {
-      width: 320px;
-      margin: 0;
-      padding: 0;
-      list-style: none;
-
-      &:after, &:before {
-        content: ' ';
-        display: table;
-      }
-      &:after {
-        clear: both;
-        visibility: hidden;
-        font-size: 0;
-        height: 0;
-      }
-
-      .el-checkbox {
-        float: left;
-        width: 160px;
-        padding-right: 20px;
-        margin: 0;
-        padding: 0;
-
-        + .el-checkbox {
-          margin-left: 0;
-        }
-      }
-    }
-    .demo-form-normal {
-      width: 460px;
-    }
-    .demo-form-inline {
-      width: auto;
-
-      .el-input {
-        width: 150px;
-      }
-      > * {
-        margin-right: 10px;
-      }
-    }
-    .demo-ruleForm {
-      width: 460px;
-
-      .el-select .el-input {
-        width: 360px;
-      }
-    }
-    .demo-dynamic {
-      .el-input {
-        margin-right: 10px;
-        width: 270px;
-        vertical-align: top;
-      }
-    }
-    .fr {
-      float: right;
-    }
-  }
-</style>
-
 ## Form 表单
 
 由输入框、选择器、单选框、多选框等控件组成，用以收集、校验、提交数据
@@ -264,7 +24,7 @@
     </el-col>
     <el-col class="line" :span="2">-</el-col>
     <el-col :span="11">
-      <el-time-picker type="fixed-time" placeholder="选择时间" v-model="form.date2" style="width: 100%;"></el-time-picker>
+      <el-time-picker placeholder="选择时间" v-model="form.date2" style="width: 100%;"></el-time-picker>
     </el-col>
   </el-form-item>
   <el-form-item label="即时配送">
@@ -430,7 +190,7 @@ W3C 标准中有如下[规定](https://www.w3.org/MarkUp/html-spec/html-spec_8.h
     <el-col class="line" :span="2">-</el-col>
     <el-col :span="11">
       <el-form-item prop="date2">
-        <el-time-picker type="fixed-time" placeholder="选择时间" v-model="ruleForm.date2" style="width: 100%;"></el-time-picker>
+        <el-time-picker placeholder="选择时间" v-model="ruleForm.date2" style="width: 100%;"></el-time-picker>
       </el-form-item>
     </el-col>
   </el-form-item>
@@ -525,19 +285,19 @@ W3C 标准中有如下[规定](https://www.w3.org/MarkUp/html-spec/html-spec_8.h
 
 :::demo 本例还使用`status-icon`属性为输入框添加了表示校验结果的反馈图标。
 ```html
-<el-form :model="ruleForm2" status-icon :rules="rules2" ref="ruleForm2" label-width="100px" class="demo-ruleForm">
+<el-form :model="ruleForm" status-icon :rules="rules" ref="ruleForm" label-width="100px" class="demo-ruleForm">
   <el-form-item label="密码" prop="pass">
-    <el-input type="password" v-model="ruleForm2.pass" autocomplete="off"></el-input>
+    <el-input type="password" v-model="ruleForm.pass" autocomplete="off"></el-input>
   </el-form-item>
   <el-form-item label="确认密码" prop="checkPass">
-    <el-input type="password" v-model="ruleForm2.checkPass" autocomplete="off"></el-input>
+    <el-input type="password" v-model="ruleForm.checkPass" autocomplete="off"></el-input>
   </el-form-item>
   <el-form-item label="年龄" prop="age">
-    <el-input v-model.number="ruleForm2.age"></el-input>
+    <el-input v-model.number="ruleForm.age"></el-input>
   </el-form-item>
   <el-form-item>
-    <el-button type="primary" @click="submitForm('ruleForm2')">提交</el-button>
-    <el-button @click="resetForm('ruleForm2')">重置</el-button>
+    <el-button type="primary" @click="submitForm('ruleForm')">提交</el-button>
+    <el-button @click="resetForm('ruleForm')">重置</el-button>
   </el-form-item>
 </el-form>
 <script>
@@ -563,8 +323,8 @@ W3C 标准中有如下[规定](https://www.w3.org/MarkUp/html-spec/html-spec_8.h
         if (value === '') {
           callback(new Error('请输入密码'));
         } else {
-          if (this.ruleForm2.checkPass !== '') {
-            this.$refs.ruleForm2.validateField('checkPass');
+          if (this.ruleForm.checkPass !== '') {
+            this.$refs.ruleForm.validateField('checkPass');
           }
           callback();
         }
@@ -572,19 +332,19 @@ W3C 标准中有如下[规定](https://www.w3.org/MarkUp/html-spec/html-spec_8.h
       var validatePass2 = (rule, value, callback) => {
         if (value === '') {
           callback(new Error('请再次输入密码'));
-        } else if (value !== this.ruleForm2.pass) {
+        } else if (value !== this.ruleForm.pass) {
           callback(new Error('两次输入密码不一致!'));
         } else {
           callback();
         }
       };
       return {
-        ruleForm2: {
+        ruleForm: {
           pass: '',
           checkPass: '',
           age: ''
         },
-        rules2: {
+        rules: {
           pass: [
             { validator: validatePass, trigger: 'blur' }
           ],
@@ -617,6 +377,10 @@ W3C 标准中有如下[规定](https://www.w3.org/MarkUp/html-spec/html-spec_8.h
 ```
 :::
 
+:::tip
+自定义校验 callback 必须被调用。 更多高级用法可参考 [async-validator](https://github.com/yiminghe/async-validator)。
+:::
+
 ### 动态增减表单项
 
 :::demo 除了在 Form 组件上一次性传递所有的验证规则外还可以在单个的表单域上传递属性的验证规则
@@ -768,7 +532,7 @@ W3C 标准中有如下[规定](https://www.w3.org/MarkUp/html-spec/html-spec_8.h
     </el-col>
     <el-col class="line" :span="2">-</el-col>
     <el-col :span="11">
-      <el-time-picker type="fixed-time" placeholder="选择时间" v-model="sizeForm.date2" style="width: 100%;"></el-time-picker>
+      <el-time-picker placeholder="选择时间" v-model="sizeForm.date2" style="width: 100%;"></el-time-picker>
     </el-col>
   </el-form-item>
   <el-form-item label="活动性质">
@@ -824,7 +588,7 @@ W3C 标准中有如下[规定](https://www.w3.org/MarkUp/html-spec/html-spec_8.h
 | rules    | 表单验证规则 | object | — | — |
 | inline    | 行内表单模式 | boolean | — | false |
 | label-position | 表单域标签的位置，如果值为 left 或者 right 时，则需要设置 `label-width` | string |  right/left/top            | right |
-| label-width | 表单域标签的宽度，作为 Form 直接子元素的 form-item 会继承该值 | string | — | — |
+| label-width | 表单域标签的宽度，例如 '50px'。作为 Form 直接子元素的 form-item 会继承该值。支持 `auto`。 | string | — | — |
 | label-suffix | 表单域标签的后缀 | string | — | — |
 | hide-required-asterisk | 是否显示必填字段的标签旁边的红色星号 | boolean | — | false |
 | show-message  | 是否显示校验错误信息 | boolean | — | true |
@@ -839,9 +603,9 @@ W3C 标准中有如下[规定](https://www.w3.org/MarkUp/html-spec/html-spec_8.h
 | 方法名      | 说明          | 参数
 |---------- |-------------- | --------------
 | validate | 对整个表单进行校验的方法，参数为一个回调函数。该回调函数会在校验结束后被调用，并传入两个参数：是否校验成功和未通过校验的字段。若不传入回调函数，则会返回一个 promise | Function(callback: Function(boolean, object))
-| validateField | 对部分表单字段进行校验的方法 | Function(props: array | string, callback: Function(errorMessage: string))
+| validateField | 对部分表单字段进行校验的方法 | Function(props: array \| string, callback: Function(errorMessage: string))
 | resetFields | 对整个表单进行重置，将所有字段值重置为初始值并移除校验结果 | —
-| clearValidate | 移除表单项的校验结果。传入待移除的表单项的 prop 属性或者 prop 组成的数组，如不传则移除整个表单的校验结果 | Function(props: array | string)
+| clearValidate | 移除表单项的校验结果。传入待移除的表单项的 prop 属性或者 prop 组成的数组，如不传则移除整个表单的校验结果 | Function(props: array \| string)
 
 ### Form Events
 | 事件名称 | 说明    | 回调参数  |
@@ -854,7 +618,7 @@ W3C 标准中有如下[规定](https://www.w3.org/MarkUp/html-spec/html-spec_8.h
 |---------- |-------------- |---------- |--------------------------------  |-------- |
 | prop    | 表单域 model 字段，在使用 validate、resetFields 方法的情况下，该属性是必填的 | string    | 传入 Form 组件的 `model` 中的字段 | — |
 | label | 标签文本 | string | — | — |
-| label-width | 表单域标签的的宽度，例如 '50px' | string |       —       | — |
+| label-width | 表单域标签的的宽度，例如 '50px'。支持 `auto`。 | string |       —       | — |
 | required | 是否必填，如不设置，则会根据校验规则自动生成 | boolean | — | false |
 | rules    | 表单验证规则 | object | — | — |
 | error    | 表单域验证错误信息, 设置该值会使表单验证状态变为`error`，并显示该错误信息 | string | — | — |
diff --git a/examples/docs/zh-CN/i18n.md b/examples/docs/zh-CN/i18n.md
index 27588ff9053..31af7f4f1f4 100644
--- a/examples/docs/zh-CN/i18n.md
+++ b/examples/docs/zh-CN/i18n.md
@@ -1,13 +1,3 @@
-<style>
-  ul.language-list {
-    color: #5e6d82;
-    font-size: 14px;
-    padding-left: 20px;
-    li {
-      line-height: 1.8
-    }
-  }
-</style>
 ## 国际化
 
 Element 组件内部默认使用中文，若希望使用其他语言，则需要进行多语言设置。以英文为例，在 main.js 中：
@@ -15,8 +5,8 @@ Element 组件内部默认使用中文，若希望使用其他语言，则需要
 ```javascript
 // 完整引入 Element
 import Vue from 'vue'
-import ElementUI from 'element-ui'
-import locale from 'element-ui/lib/locale/lang/en'
+import ElementUI from '@femessage/element-ui'
+import locale from '@femessage/element-ui/lib/locale/lang/en'
 
 Vue.use(ElementUI, { locale })
 ```
@@ -26,9 +16,9 @@ Vue.use(ElementUI, { locale })
 ```javascript
 // 按需引入 Element
 import Vue from 'vue'
-import { Button, Select } from 'element-ui'
-import lang from 'element-ui/lib/locale/lang/en'
-import locale from 'element-ui/lib/locale'
+import { Button, Select } from '@femessage/element-ui'
+import lang from '@femessage/element-ui/lib/locale/lang/en'
+import locale from '@femessage/element-ui/lib/locale'
 
 // 设置语言
 locale.use(lang)
@@ -44,7 +34,7 @@ Vue.component(Select.name, Select)
 ```javascript
 {
   plugins: [
-    new webpack.NormalModuleReplacementPlugin(/element-ui[\/\\]lib[\/\\]locale[\/\\]lang[\/\\]zh-CN/, 'element-ui/lib/locale/lang/en')
+    new webpack.NormalModuleReplacementPlugin(/@femessage[\/\\]element-ui[\/\\]lib[\/\\]locale[\/\\]lang[\/\\]zh-CN/, '@femessage/element-ui/lib/locale/lang/en')
   ]
 }
 ```
@@ -56,9 +46,9 @@ Element 兼容 [vue-i18n@5.x](https://github.com/kazupon/vue-i18n)，搭配使
 ```javascript
 import Vue from 'vue'
 import VueI18n from 'vue-i18n'
-import Element from 'element-ui'
-import enLocale from 'element-ui/lib/locale/lang/en'
-import zhLocale from 'element-ui/lib/locale/lang/zh-CN'
+import Element from '@femessage/element-ui'
+import enLocale from '@femessage/element-ui/lib/locale/lang/en'
+import zhLocale from '@femessage/element-ui/lib/locale/lang/zh-CN'
 
 Vue.use(VueI18n)
 Vue.use(Element)
@@ -73,9 +63,9 @@ Vue.locale('en', enLocale)
 
 ```javascript
 import Vue from 'vue'
-import Element from 'element-ui'
-import enLocale from 'element-ui/lib/locale/lang/en'
-import zhLocale from 'element-ui/lib/locale/lang/zh-CN'
+import Element from '@femessage/element-ui'
+import enLocale from '@femessage/element-ui/lib/locale/lang/en'
+import zhLocale from '@femessage/element-ui/lib/locale/lang/zh-CN'
 
 Vue.use(Element, {
   i18n: function (path, options) {
@@ -90,10 +80,10 @@ Vue.use(Element, {
 
 ```javascript
 import Vue from 'vue'
-import Element from 'element-ui'
+import Element from '@femessage/element-ui'
 import VueI18n from 'vue-i18n'
-import enLocale from 'element-ui/lib/locale/lang/en'
-import zhLocale from 'element-ui/lib/locale/lang/zh-CN'
+import enLocale from '@femessage/element-ui/lib/locale/lang/en'
+import zhLocale from '@femessage/element-ui/lib/locale/lang/zh-CN'
 
 Vue.use(VueI18n)
 
@@ -127,9 +117,9 @@ import Vue from 'vue'
 import DatePicker from 'element/lib/date-picker'
 import VueI18n from 'vue-i18n'
 
-import enLocale from 'element-ui/lib/locale/lang/en'
-import zhLocale from 'element-ui/lib/locale/lang/zh-CN'
-import ElementLocale from 'element-ui/lib/locale'
+import enLocale from '@femessage/element-ui/lib/locale/lang/en'
+import zhLocale from '@femessage/element-ui/lib/locale/lang/zh-CN'
+import ElementLocale from '@femessage/element-ui/lib/locale'
 
 Vue.use(VueI18n)
 Vue.use(DatePicker)
@@ -157,8 +147,8 @@ ElementLocale.i18n((key, value) => i18n.t(key, value))
 
 ```html
 <script src="//unpkg.com/vue"></script>
-<script src="//unpkg.com/element-ui"></script>
-<script src="//unpkg.com/element-ui/lib/umd/locale/en.js"></script>
+<script src="//unpkg.com/@femessage/element-ui"></script>
+<script src="//unpkg.com/@femessage/element-ui/lib/umd/locale/en.js"></script>
 
 <script>
   ELEMENT.locale(ELEMENT.lang.en)
@@ -170,9 +160,9 @@ ElementLocale.i18n((key, value) => i18n.t(key, value))
 ```html
 <script src="//unpkg.com/vue"></script>
 <script src="//unpkg.com/vue-i18n/dist/vue-i18n.js"></script>
-<script src="//unpkg.com/element-ui"></script>
-<script src="//unpkg.com/element-ui/lib/umd/locale/zh-CN.js"></script>
-<script src="//unpkg.com/element-ui/lib/umd/locale/en.js"></script>
+<script src="//unpkg.com/@femessage/element-ui"></script>
+<script src="//unpkg.com/@femessage/element-ui/lib/umd/locale/zh-CN.js"></script>
+<script src="//unpkg.com/@femessage/element-ui/lib/umd/locale/en.js"></script>
 
 <script>
   Vue.locale('en', ELEMENT.lang.en)
@@ -229,6 +219,10 @@ ElementLocale.i18n((key, value) => i18n.t(key, value))
   <li>高棉语（km）</li>
   <li>塞尔维亚语（sr）</li>
   <li>巴斯克语（eu）</li>
+  <li>吉尔吉斯语（kg）</li>
+  <li>亚美尼亚语 (hy)</li>
+  <li>克罗地亚 (hr)</li>
+  <li>世界语 (eo)</li>
 </ul>
 
-如果你需要使用其他的语言，欢迎贡献 PR：只需在 [这里](https://github.com/ElemeFE/element/tree/dev/src/locale/lang) 添加一个语言配置文件即可。
+如果你需要使用其他的语言，欢迎贡献 PR：只需在 [这里](https://github.com/femessage/element/tree/dev/src/locale/lang) 添加一个语言配置文件即可。
diff --git a/examples/docs/zh-CN/icon-checkbox.md b/examples/docs/zh-CN/icon-checkbox.md
new file mode 100644
index 00000000000..d9b57e0e870
--- /dev/null
+++ b/examples/docs/zh-CN/icon-checkbox.md
@@ -0,0 +1,48 @@
+## IconCheckbox 不同样式的多选框
+新样式
+
+`indeterminate` 属性用以表示 checkbox 的不确定状态，一般用于实现全选的效果
+
+:::demo
+
+```html
+<template>
+  <el-checkbox :indeterminate="isIndeterminate" v-model="checkAll" @change="handleCheckAllChange">全选</el-checkbox>
+  <div style="margin: 15px 0;"></div>
+  <el-checkbox-group v-model="checkedCities" @change="handleCheckedCitiesChange">
+    <el-icon-checkbox v-for="city in cities" :label="city" :key="city" @change="handleCheckbox">{{city}}</el-icon-checkbox>
+  </el-checkbox-group>
+</template>
+<script>
+  const cityOptions = ['上海', '北京', '广州', '深圳'];
+  export default {
+    data() {
+      return {
+        checkAll: false,
+        checkedCities: ['上海', '北京'],
+        cities: cityOptions,
+        isIndeterminate: true
+      };
+    },
+    methods: {
+      handleCheckAllChange(val) {
+        this.checkedCities = val ? cityOptions : [];
+        this.isIndeterminate = false;
+      },
+      handleCheckedCitiesChange(value) {
+        let checkedCount = value.length;
+        this.checkAll = checkedCount === this.cities.length;
+        this.isIndeterminate = checkedCount > 0 && checkedCount < this.cities.length;
+      },
+      handleCheckbox(value, event) {
+        console.log(value);
+      }
+    }
+  };
+</script>
+```
+:::
+
+:::tip
+说明：其他属性和方法与 `Checkbox`组件完全一致
+:::
\ No newline at end of file
diff --git a/examples/docs/zh-CN/icon.md b/examples/docs/zh-CN/icon.md
index 35c5021f3a6..b0310b3f384 100644
--- a/examples/docs/zh-CN/icon.md
+++ b/examples/docs/zh-CN/icon.md
@@ -1,77 +1,3 @@
-<script>
-  var iconList = require('examples/icon.json');
-
-  export default {
-    data() {
-      return {
-        icons: iconList
-      };
-    }
-  }
-</script>
-<style>
-  .demo-icon .source > i {
-    color: #606266;
-    margin: 0 20px;
-    font-size: 1.5em;
-    vertical-align: middle;
-  }
-  
-  .demo-icon .source > button {
-    margin: 0 20px;
-  }
-
-  .page-component .content > ul.icon-list {
-    overflow: hidden;
-    list-style: none;
-    padding: 0;
-    border: solid 1px #eaeefb;
-    border-radius: 4px;
-  }
-  .icon-list li {
-    float: left;
-    width: 16.66%;
-    text-align: center;
-    height: 120px;
-    line-height: 120px;
-    color: #666;
-    font-size: 13px;
-    transition: color .15s linear;
-
-    border-right: 1px solid #eee;
-    border-bottom: 1px solid #eee;
-    margin-right: -1px;
-    margin-bottom: -1px;
-
-    @utils-vertical-center;
-
-    span {
-      display: inline-block;
-      line-height: normal;
-      vertical-align: middle;
-      font-family: 'Helvetica Neue',Helvetica,'PingFang SC','Hiragino Sans GB','Microsoft YaHei',SimSun,sans-serif;
-      color: #99a9bf;
-    }
-    
-    i {
-      display: block;
-      font-size: 32px;
-      margin-bottom: 15px;
-      color: #606266;
-    }
-    
-    .icon-name {
-      display: inline-block;
-      padding: 0 3px;
-      height: 1em;
-      color: #606266;
-    }
-    
-    &:hover {
-      color: rgb(92, 182, 255);
-    }
-  }
-</style>
 ## Icon 图标
 
 提供了一套常用的图标集合。
@@ -93,7 +19,7 @@
 ### 图标集合
 
 <ul class="icon-list">
-  <li v-for="name in icons" :key="name">
+  <li v-for="name in $icon" :key="name">
     <span>
       <i :class="'el-icon-' + name"></i>
       <span class="icon-name">{{'el-icon-' + name}}</span>
diff --git a/examples/docs/zh-CN/image.md b/examples/docs/zh-CN/image.md
new file mode 100644
index 00000000000..7698798b61e
--- /dev/null
+++ b/examples/docs/zh-CN/image.md
@@ -0,0 +1,163 @@
+## Image 图片
+图片容器，在保留原生img的特性下，支持懒加载，自定义占位、加载失败等
+
+### 基础用法
+
+:::demo 可通过`fit`确定图片如何适应到容器框，同原生 [object-fit](https://developer.mozilla.org/en-US/docs/Web/CSS/object-fit)。
+```html
+<div class="demo-image">
+  <div class="block" v-for="fit in fits" :key="fit">
+    <span class="demonstration">{{ fit }}</span>
+    <el-image
+      style="width: 100px; height: 100px"
+      :src="url"
+      :fit="fit"></el-image>
+  </div>
+</div>
+
+<script>
+  export default {
+    data() {
+      return {
+        fits: ['fill', 'contain', 'cover', 'none', 'scale-down'],
+        url: 'https://fuss10.elemecdn.com/e/5d/4a731a90594a4af544c0c25941171jpeg.jpeg'
+      }
+    }
+  }
+</script>
+```
+:::
+
+### 占位内容
+
+:::demo 可通过`slot = placeholder`可自定义占位内容
+```html
+<div class="demo-image__placeholder">
+  <div class="block">
+    <span class="demonstration">默认</span>
+    <el-image :src="src"></el-image>
+  </div>
+  <div class="block">
+    <span class="demonstration">自定义</span>
+    <el-image :src="src">
+      <div slot="placeholder" class="image-slot">
+        加载中<span class="dot">...</span>
+      </div>
+    </el-image>
+  </div>
+</div>
+
+<script>
+  export default {
+    data() {
+      return {
+        src: 'https://cube.elemecdn.com/6/94/4d3ea53c084bad6931a56d5158a48jpeg.jpeg'
+      }
+    }
+  }
+</script>
+```
+:::
+
+### 加载失败
+
+:::demo 可通过`slot = error`可自定义加载失败内容
+```html
+<div class="demo-image__error">
+  <div class="block">
+    <span class="demonstration">默认</span>
+    <el-image></el-image>
+  </div>
+  <div class="block">
+    <span class="demonstration">自定义</span>
+    <el-image>
+      <div slot="error" class="image-slot">
+        <i class="el-icon-picture-outline"></i>
+      </div>
+    </el-image>
+  </div>
+</div>
+```
+:::
+
+### 懒加载
+
+:::demo 可通过`lazy`开启懒加载功能，当图片滚动到可视范围内才会加载。可通过`scroll-container`来设置滚动容器，若未定义，则为最近一个`overflow`值为`auto`或`scroll`的父元素。
+```html
+<div class="demo-image__lazy">
+  <el-image v-for="url in urls" :key="url" :src="url" lazy></el-image>
+</div>
+
+<script>
+  export default {
+    data() {
+      return {
+        urls: [
+          'https://fuss10.elemecdn.com/a/3f/3302e58f9a181d2509f3dc0fa68b0jpeg.jpeg',
+          'https://fuss10.elemecdn.com/1/34/19aa98b1fcb2781c4fba33d850549jpeg.jpeg',
+          'https://fuss10.elemecdn.com/0/6f/e35ff375812e6b0020b6b4e8f9583jpeg.jpeg',
+          'https://fuss10.elemecdn.com/9/bb/e27858e973f5d7d3904835f46abbdjpeg.jpeg',
+          'https://fuss10.elemecdn.com/d/e6/c4d93a3805b3ce3f323f7974e6f78jpeg.jpeg',
+          'https://fuss10.elemecdn.com/3/28/bbf893f792f03a54408b3b7a7ebf0jpeg.jpeg',
+          'https://fuss10.elemecdn.com/2/11/6535bcfb26e4c79b48ddde44f4b6fjpeg.jpeg'
+        ]
+      }
+    }
+  }
+</script>
+```
+:::
+
+### 大图预览
+
+:::demo 可通过 `previewSrcList` 开启预览大图的功能。
+```html
+<div class="demo-image__preview">
+  <el-image 
+    style="width: 100px; height: 100px"
+    :src="url" 
+    :preview-src-list="srcList">
+  </el-image>
+</div>
+
+<script>
+  export default {
+    data() {
+      return {
+        url: 'https://fuss10.elemecdn.com/e/5d/4a731a90594a4af544c0c25941171jpeg.jpeg',
+        srcList: [
+          'https://fuss10.elemecdn.com/8/27/f01c15bb73e1ef3793e64e6b7bbccjpeg.jpeg',
+          'https://fuss10.elemecdn.com/1/8e/aeffeb4de74e2fde4bd74fc7b4486jpeg.jpeg'
+        ]
+      }
+    }
+  }
+</script>
+```
+:::
+
+### Attributes
+| 参数      | 说明    | 类型      | 可选值       | 默认值   |
+|---------- |-------- |---------- |-------------  |-------- |
+| src | 图片源，同原生 | string | — | - |
+| fit | 确定图片如何适应容器框，同原生 [object-fit](https://developer.mozilla.org/en-US/docs/Web/CSS/object-fit) | string | fill / contain / cover / none / scale-down | - |
+| alt | 原生 alt | string | - | - |
+| referrer-policy | 原生 referrerPolicy | string | - | - |
+| lazy | 是否开启懒加载 | boolean | — | false |
+| scroll-container | 开启懒加载后，监听 scroll 事件的容器 | string / HTMLElement | — | 最近一个 overflow 值为 auto 或 scroll 的父元素 |
+| preview-src-list | 开启图片预览功能 | Array | — | - |
+| z-index | 设置图片预览的 z-index | Number | — | 2000 |
+
+### Events
+| 事件名称      | 说明    | 回调参数      |
+|---------- |-------- |---------- |
+| load | 图片加载成功触发 | (e: Event) |
+| error | 图片加载失败触发 | (e: Error) |
+
+### Slots
+| 名称    | 说明         |
+|---------|-------------|
+| placeholder | 图片未加载的占位内容 |
+| error | 加载失败的内容 |
+
+
diff --git a/examples/docs/zh-CN/infiniteScroll.md b/examples/docs/zh-CN/infiniteScroll.md
new file mode 100644
index 00000000000..6d76ba2bc83
--- /dev/null
+++ b/examples/docs/zh-CN/infiniteScroll.md
@@ -0,0 +1,87 @@
+## InfiniteScroll 无限滚动
+
+滚动至底部时，加载更多数据。
+
+### 基础用法
+在要实现滚动加载的列表上上添加`v-infinite-scroll`，并赋值相应的加载方法，可实现滚动到底部时自动执行加载方法。
+:::demo
+```html
+<template>
+  <ul class="infinite-list" v-infinite-scroll="load" style="overflow:auto">
+    <li v-for="i in count" class="infinite-list-item">{{ i }}</li>
+  </ul>
+</template>
+
+<script>
+  export default {
+    data () {
+      return {
+        count: 0
+      }
+    },
+    methods: {
+      load () {
+        this.count += 2
+      }
+    }
+  }
+</script>
+```
+:::
+
+### 禁用加载
+
+:::demo
+```html
+<template>
+  <div class="infinite-list-wrapper" style="overflow:auto">
+    <ul
+      class="list"
+      v-infinite-scroll="load"
+      infinite-scroll-disabled="disabled">
+      <li v-for="i in count" class="list-item">{{ i }}</li>
+    </ul>
+    <p v-if="loading">加载中...</p>
+    <p v-if="noMore">没有更多了</p>
+  </div>
+</template>
+
+<script>
+  export default {
+    data () {
+      return {
+        count: 10,
+        loading: false
+      }
+    },
+    computed: {
+      noMore () {
+        return this.count >= 20
+      },
+      disabled () {
+        return this.loading || this.noMore
+      }
+    },
+    methods: {
+      load () {
+        this.loading = true
+        setTimeout(() => {
+          this.count += 2
+          this.loading = false
+        }, 2000)
+      }
+    }
+  }
+</script>
+```
+:::
+
+
+### Attributes
+
+| 参数           | 说明                           | 类型      | 可选值                               | 默认值  |
+| -------------- | ------------------------------ | --------- | ------------------------------------ | ------- |
+| infinite-scroll-disabled | 是否禁用           | boolean      | - |false |
+| infinite-scroll-delay   | 节流时延，单位为ms   | number       |   - |200   |
+| infinite-scroll-distance| 触发加载的距离阈值，单位为px | number   |- |0 |
+| infinite-scroll-immediate | 是否立即执行加载方法，以防初始状态下内容无法撑满容器。| boolean | - |true |
diff --git a/examples/docs/zh-CN/input-email.md b/examples/docs/zh-CN/input-email.md
new file mode 100644
index 00000000000..5dd5197bc84
--- /dev/null
+++ b/examples/docs/zh-CN/input-email.md
@@ -0,0 +1,79 @@
+## InputEmail 邮箱地址输入
+
+### 结合el-form-renderer使用
+
+在 el-form-renderer 里监听 blur 事件
+
+:::demo
+
+```html
+<el-form-renderer :content="content" label-width="80px" />
+
+<script>
+// 正确import方式
+// import {ElInputEmail} from '@femessage/element-ui'
+const ElInputEmail = require('element-ui/packages/input-email/src/main.vue').default
+export default {
+  data() {
+    return {
+      content:[
+        {
+          id: 'email',
+          label: 'email',
+          component: ElInputEmail,
+          default: '',
+          on: {
+            input: ([v]) => console.log(v)
+          }
+        }
+      ],
+    }
+  }
+}
+</script>
+```
+
+:::
+
+### 自定义提示的邮箱列表
+
+:::demo
+
+```html
+<el-form-renderer :content="content" label-width="80px" />
+
+<script>
+// 正确import方式
+// import {ElInputEmal} from '@femessage/element-ui'
+const ElInputEmail = require('element-ui/packages/input-email/src/main.vue').default
+export default {
+  data() {
+    return {
+      content:[
+        {
+          id: 'email',
+          label: 'email',
+          component: ElInputEmail,
+          default: '',
+          el: {
+            emailList: [
+              'deepexi.com',
+            ]
+          }
+        }
+      ],
+    }
+  }
+}
+</script>
+```
+
+:::
+
+### Attributes
+
+| 参数      |   说明    |  类型     | 可选值       | 默认值   |
+|---------- | -------- |---------- |-------------  |-------- |
+| value | 邮箱地址 | string   |  —  |  —  |
+| placeholder | 输入框placeholder | string   |  —  |  请输入邮箱地址  |
+| emailList | 提示补全的邮箱列表 | array   |  —  |  gmail、qq 等  |
diff --git a/examples/docs/zh-CN/input-id-card.md b/examples/docs/zh-CN/input-id-card.md
new file mode 100644
index 00000000000..c003a9f2f0e
--- /dev/null
+++ b/examples/docs/zh-CN/input-id-card.md
@@ -0,0 +1,34 @@
+## InputIdCard 身份证输入框
+
+### 结合el-form-renderer使用
+
+:::demo
+
+```html
+<el-form-renderer :content="content"></el-form-renderer>
+
+<script>
+// 正确的import方式
+// import {InputIdCard} from '@femessage/element-ui'
+const ElInputIdCard = require('element-ui/packages/input-id-card/src/main.vue').default
+export default {
+  data() {
+    return {
+      content: [
+        {id:'id',label:'身份证号码',component: ElInputIdCard}
+      ]
+    }
+  }
+}
+</script>
+```
+
+:::
+
+
+### Attributes
+
+| 参数      |   说明    |  类型     | 可选值       | 默认值   |
+|---------- | -------- |---------- |-------------  |-------- |
+| value | 身份证号码 | string   |  —  |  —  |
+| placeholder | 输入框placeholder | string   |  —  |  请输入身份证号  |
diff --git a/examples/docs/zh-CN/input-number.md b/examples/docs/zh-CN/input-number.md
index 64c496d5ff1..e5fce48620d 100644
--- a/examples/docs/zh-CN/input-number.md
+++ b/examples/docs/zh-CN/input-number.md
@@ -1,33 +1,3 @@
-<script>
-  export default {
-    data() {
-      return {
-        num1: 1,
-        num2: 1,
-        num3: 5,
-        num4: 1,
-        num5: 1,
-        num6: 1,
-        num7: 1,
-        num8: 1,
-        num9: 1
-      }
-    },
-    methods: {
-      handleChange(value) {
-        console.log(value);
-      }
-    }
-  };
-</script>
-<style>
-  .demo-box.demo-input-number {
-    .el-input-number + .el-input-number {
-      margin-left: 10px;
-    }
-  }
-</style>
-
 ## InputNumber 计数器
 
 仅允许输入标准的数字值，可定义范围
@@ -37,13 +7,13 @@
 :::demo 要使用它，只需要在`el-input-number`元素中使用`v-model`绑定变量即可，变量的初始值即为默认值。
 ```html
 <template>
-  <el-input-number v-model="num1" @change="handleChange" :min="1" :max="10" label="描述文字"></el-input-number>
+  <el-input-number v-model="num" @change="handleChange" :min="1" :max="10" label="描述文字"></el-input-number>
 </template>
 <script>
   export default {
     data() {
       return {
-        num1: 1
+        num: 1
       };
     },
     methods: {
@@ -62,13 +32,13 @@
 
 ```html
 <template>
-  <el-input-number v-model="num2" :disabled="true"></el-input-number>
+  <el-input-number v-model="num" :disabled="true"></el-input-number>
 </template>
 <script>
   export default {
     data() {
       return {
-        num2: 1
+        num: 1
       }
     }
   };
@@ -84,13 +54,33 @@
 
 ```html
 <template>
-  <el-input-number v-model="num3" :step="2"></el-input-number>
+  <el-input-number v-model="num" :step="2"></el-input-number>
 </template>
 <script>
   export default {
     data() {
       return {
-        num3: 5
+        num: 5
+      }
+    }
+  };
+</script>
+```
+:::
+
+### 严格步数
+
+:::demo `step-strictly`属性接受一个`Boolean`。如果这个属性被设置为`true`，则只能输入步数的倍数。
+
+```html
+<template>
+  <el-input-number v-model="num" :step="2" step-strictly></el-input-number>
+</template>
+<script>
+  export default {
+    data() {
+      return {
+        num: 2
       }
     }
   };
@@ -104,13 +94,13 @@
 
 ```html
 <template>
-  <el-input-number v-model="num9" :precision="2" :step="0.1" :max="10"></el-input-number>
+  <el-input-number v-model="num" :precision="2" :step="0.1" :max="10"></el-input-number>
 </template>
 <script>
   export default {
     data() {
       return {
-        num9: 1
+        num: 1
       }
     }
   };
@@ -131,19 +121,19 @@
 
 ```html
 <template>
-  <el-input-number v-model="num4"></el-input-number>
-  <el-input-number size="medium" v-model="num5"></el-input-number>
-  <el-input-number size="small" v-model="num6"></el-input-number>
-  <el-input-number size="mini" v-model="num7"></el-input-number>
+  <el-input-number v-model="num1"></el-input-number>
+  <el-input-number size="medium" v-model="num2"></el-input-number>
+  <el-input-number size="small" v-model="num3"></el-input-number>
+  <el-input-number size="mini" v-model="num4"></el-input-number>
 </template>
 <script>
   export default {
     data() {
       return {
-        num4: 1,
-        num5: 1,
-        num6: 1,
-        num7: 1
+        num1: 1,
+        num2: 1,
+        num3: 1,
+        num4: 1
       }
     }
   };
@@ -156,13 +146,13 @@
 :::demo 设置 `controls-position` 属性可以控制按钮位置。
 ```html
 <template>
-  <el-input-number v-model="num8" controls-position="right" @change="handleChange" :min="1" :max="10"></el-input-number>
+  <el-input-number v-model="num" controls-position="right" @change="handleChange" :min="1" :max="10"></el-input-number>
 </template>
 <script>
   export default {
     data() {
       return {
-        num8: 1
+        num: 1
       };
     },
     methods: {
@@ -178,10 +168,11 @@
 ### Attributes
 | 参数      | 说明          | 类型      | 可选值                           | 默认值  |
 |----------|-------------- |----------|--------------------------------  |-------- |
-| value    | 绑定值         | number | — | — |
+| value / v-model    | 绑定值         | number | — | 0 |
 | min      | 设置计数器允许的最小值 | number | — | -Infinity |
 | max      | 设置计数器允许的最大值 | number | — | Infinity |
 | step     | 计数器步长           | number   | — | 1 |
+| step-strictly | 是否只能输入 step 的倍数 | number   | — | false |
 | precision| 数值精度             | number   | — | — |
 | size     | 计数器尺寸           | string   | large, small | — |
 | disabled | 是否禁用计数器        | boolean | — | false |
@@ -194,7 +185,7 @@
 ### Events
 | 事件名称 | 说明 | 回调参数 |
 |---------|--------|---------|
-| change | 绑定值被改变时触发 | 最后变更的值 |
+| change | 绑定值被改变时触发 | currentValue, oldValue |
 | blur | 在组件 Input 失去焦点时触发 | (event: Event) |
 | focus | 在组件 Input 获得焦点时触发 | (event: Event) |
 
diff --git a/examples/docs/zh-CN/input-phone.md b/examples/docs/zh-CN/input-phone.md
new file mode 100644
index 00000000000..de8d16bc279
--- /dev/null
+++ b/examples/docs/zh-CN/input-phone.md
@@ -0,0 +1,35 @@
+## InputPhone 手机号输入框
+
+### 结合el-form-renderer使用
+
+在 el-form-renderer 里监听 blur 事件
+
+:::demo
+
+```html
+<el-form-renderer :content="content" label-width="80px"></el-form-renderer>
+
+<script>
+// 正确import方式
+// import {ElInputPhone} from '@femessage/element-ui'
+const ElInputPhone = require('element-ui/packages/input-phone/src/main.vue').default
+export default {
+  data() {
+    return {
+      content:[
+        {id: 'phone', label: 'Phone', component: ElInputPhone}
+      ]
+    }
+  }
+}
+</script>
+```
+
+:::
+
+### Attributes
+
+| 参数      |   说明    |  类型     | 可选值       | 默认值   |
+|---------- | -------- |---------- |-------------  |-------- |
+| value | 手机号 | string   |  —  |  —  |
+| placeholder | 输入框placeholder | string   |  —  |  请输入手机号码  |
diff --git a/examples/docs/zh-CN/input-url.md b/examples/docs/zh-CN/input-url.md
new file mode 100644
index 00000000000..f58a42d448f
--- /dev/null
+++ b/examples/docs/zh-CN/input-url.md
@@ -0,0 +1,43 @@
+## InputUrl URL 输入框
+
+### 结合el-form-renderer使用
+
+在 el-form-renderer 里监听 blur 事件
+
+:::demo
+
+```html
+<el-form-renderer :content="content" label-width="80px" />
+
+<script>
+// 正确import方式
+// import {ElInputUrl} from '@femessage/element-ui'
+const ElInputUrl = require('element-ui/packages/input-url/src/main.vue').default
+export default {
+  data() {
+    return {
+      content:[
+        {
+          id: 'url',
+          label: 'url',
+          component: ElInputUrl,
+          default: '',
+          on: {
+            input: ([v]) => console.log(v)
+          }
+        }
+      ],
+    }
+  }
+}
+</script>
+```
+
+:::
+
+### Attributes
+
+| 参数      |   说明    |  类型     | 可选值       | 默认值   |
+|---------- | -------- |---------- |-------------  |-------- |
+| value | url地址 | string   |  —  |  ''  |
+| placeholder | 输入框占位符 | string   |  —  |  请输入 URL 地址  |
diff --git a/examples/docs/zh-CN/input.md b/examples/docs/zh-CN/input.md
index 57fed6cc827..7c47831799a 100644
--- a/examples/docs/zh-CN/input.md
+++ b/examples/docs/zh-CN/input.md
@@ -1,188 +1,14 @@
-<script>
-  export default {
-    data() {
-      return {
-        restaurants: [],
-        input: '',
-        input1: '',
-        input2: '',
-        input21: '',
-        input22: '',
-        input23: '',
-        input3: '',
-        input4: '',
-        input5: '',
-        input6: '',
-        input7: '',
-        input8: '',
-        input9: '',
-        input10: '',
-        textarea: '',
-        textarea2: '',
-        textarea3: '',
-        select: '',
-        state1: '',
-        state2: '',
-        state3: '',
-        state4: ''
-      };
-    },
-    methods: {
-      loadAll() {
-        return [
-          { "value": "三全鲜食（北新泾店）", "address": "长宁区新渔路144号" },
-          { "value": "Hot honey 首尔炸鸡（仙霞路）", "address": "上海市长宁区淞虹路661号" },
-          { "value": "新旺角茶餐厅", "address": "上海市普陀区真北路988号创邑金沙谷6号楼113" },
-          { "value": "泷千家(天山西路店)", "address": "天山西路438号" },
-          { "value": "胖仙女纸杯蛋糕（上海凌空店）", "address": "上海市长宁区金钟路968号1幢18号楼一层商铺18-101" },
-          { "value": "贡茶", "address": "上海市长宁区金钟路633号" },
-          { "value": "豪大大香鸡排超级奶爸", "address": "上海市嘉定区曹安公路曹安路1685号" },
-          { "value": "茶芝兰（奶茶，手抓饼）", "address": "上海市普陀区同普路1435号" },
-          { "value": "十二泷町", "address": "上海市北翟路1444弄81号B幢-107" },
-          { "value": "星移浓缩咖啡", "address": "上海市嘉定区新郁路817号" },
-          { "value": "阿姨奶茶/豪大大", "address": "嘉定区曹安路1611号" },
-          { "value": "新麦甜四季甜品炸鸡", "address": "嘉定区曹安公路2383弄55号" },
-          { "value": "Monica摩托主题咖啡店", "address": "嘉定区江桥镇曹安公路2409号1F，2383弄62号1F" },
-          { "value": "浮生若茶（凌空soho店）", "address": "上海长宁区金钟路968号9号楼地下一层" },
-          { "value": "NONO JUICE  鲜榨果汁", "address": "上海市长宁区天山西路119号" },
-          { "value": "CoCo都可(北新泾店）", "address": "上海市长宁区仙霞西路" },
-          { "value": "快乐柠檬（神州智慧店）", "address": "上海市长宁区天山西路567号1层R117号店铺" },
-          { "value": "Merci Paul cafe", "address": "上海市普陀区光复西路丹巴路28弄6号楼819" },
-          { "value": "猫山王（西郊百联店）", "address": "上海市长宁区仙霞西路88号第一层G05-F01-1-306" },
-          { "value": "枪会山", "address": "上海市普陀区棕榈路" },
-          { "value": "纵食", "address": "元丰天山花园(东门) 双流路267号" },
-          { "value": "钱记", "address": "上海市长宁区天山西路" },
-          { "value": "壹杯加", "address": "上海市长宁区通协路" },
-          { "value": "唦哇嘀咖", "address": "上海市长宁区新泾镇金钟路999号2幢（B幢）第01层第1-02A单元" },
-          { "value": "爱茜茜里(西郊百联)", "address": "长宁区仙霞西路88号1305室" },
-          { "value": "爱茜茜里(近铁广场)", "address": "上海市普陀区真北路818号近铁城市广场北区地下二楼N-B2-O2-C商铺" },
-          { "value": "鲜果榨汁（金沙江路和美广店）", "address": "普陀区金沙江路2239号金沙和美广场B1-10-6" },
-          { "value": "开心丽果（缤谷店）", "address": "上海市长宁区威宁路天山路341号" },
-          { "value": "超级鸡车（丰庄路店）", "address": "上海市嘉定区丰庄路240号" },
-          { "value": "妙生活果园（北新泾店）", "address": "长宁区新渔路144号" },
-          { "value": "香宜度麻辣香锅", "address": "长宁区淞虹路148号" },
-          { "value": "凡仔汉堡（老真北路店）", "address": "上海市普陀区老真北路160号" },
-          { "value": "港式小铺", "address": "上海市长宁区金钟路968号15楼15-105室" },
-          { "value": "蜀香源麻辣香锅（剑河路店）", "address": "剑河路443-1" },
-          { "value": "北京饺子馆", "address": "长宁区北新泾街道天山西路490-1号" },
-          { "value": "饭典*新简餐（凌空SOHO店）", "address": "上海市长宁区金钟路968号9号楼地下一层9-83室" },
-          { "value": "焦耳·川式快餐（金钟路店）", "address": "上海市金钟路633号地下一层甲部" },
-          { "value": "动力鸡车", "address": "长宁区仙霞西路299弄3号101B" },
-          { "value": "浏阳蒸菜", "address": "天山西路430号" },
-          { "value": "四海游龙（天山西路店）", "address": "上海市长宁区天山西路" },
-          { "value": "樱花食堂（凌空店）", "address": "上海市长宁区金钟路968号15楼15-105室" },
-          { "value": "壹分米客家传统调制米粉(天山店)", "address": "天山西路428号" },
-          { "value": "福荣祥烧腊（平溪路店）", "address": "上海市长宁区协和路福泉路255弄57-73号" },
-          { "value": "速记黄焖鸡米饭", "address": "上海市长宁区北新泾街道金钟路180号1层01号摊位" },
-          { "value": "红辣椒麻辣烫", "address": "上海市长宁区天山西路492号" },
-          { "value": "(小杨生煎)西郊百联餐厅", "address": "长宁区仙霞西路88号百联2楼" },
-          { "value": "阳阳麻辣烫", "address": "天山西路389号" },
-          { "value": "南拳妈妈龙虾盖浇饭", "address": "普陀区金沙江路1699号鑫乐惠美食广场A13" }
-        ];
-      },
-      querySearch(queryString, cb) {
-        var restaurants = this.restaurants;
-        var results = queryString ? restaurants.filter(this.createStateFilter(queryString)) : restaurants;
-
-        cb(results);
-      },
-      querySearchAsync(queryString, cb) {
-        var restaurants = this.restaurants;
-        var results = queryString ? restaurants.filter(this.createStateFilter(queryString)) : restaurants;
-
-        clearTimeout(this.timeout);
-        this.timeout = setTimeout(() => {
-          cb(results);
-        }, 3000 * Math.random());
-      },
-      createStateFilter(queryString) {
-        return (state) => {
-          return (state.value.toLowerCase().indexOf(queryString.toLowerCase()) === 0);
-        };
-      },
-      handleSelect(item) {
-        console.log(item);
-      },
-      handleIconClick(ev) {
-        console.log(ev);
-      }
-    },
-    mounted() {
-      this.restaurants = this.loadAll();
-    }
-  };
-</script>
-
-<style>
-  .demo-input.demo-zh-CN {
-    .el-select .el-input {
-      width: 130px;
-    }
-    .el-input {
-      width: 180px;
-    }
-    .el-textarea {
-      width: 414px;
-    }
-    .el-input-group {
-      width: 100%;
-    }
-    .demo-input-size {
-      .el-input {
-        vertical-align: top;
-        margin: 0 10px 10px 0;
-      }
-    }
-    .input-with-select .el-input-group__prepend {
-      background-color: #fff;
-    }
-    .demo-autocomplete {
-      text-align: center;
-
-      .sub-title {
-        margin-bottom: 10px;
-        font-size: 14px;
-        color: #8492a6;
-      }
+## Input 输入框
 
-      .el-col:not(:last-child) {
-        border-right: 1px solid rgba(224,230,237,0.50);
-      }
+通过鼠标或键盘输入字符
 
-      .el-autocomplete {
-        text-align: left;
-      }
-    }
-  }
-  .el-autocomplete-suggestion.my-autocomplete {
-    li {
-      line-height: normal;
-      padding: 7px *;
-
-      .name {
-        text-overflow: ellipsis;
-        overflow: hidden;
-      }
-      .addr {
-        font-size: 12px;
-        color: #b4b4b4;
-      }
-      .highlighted .addr {
-        color: #ddd;
-      }
-    }
-  }
-  .demo-input-suffix {
-    margin-bottom: 15px;
-    .el-input {
-      margin-right: 15px;
-    }
-  }
-</style>
+:::warning
+Input 为受控组件，它**总会显示 Vue 绑定值**。
 
-## Input 输入框
+通常情况下，应当处理 `input` 事件，并更新组件的绑定值（或使用`v-model`）。否则，输入框内显示的值将不会改变。
 
-通过鼠标或键盘输入字符
+不支持 `v-model` 修饰符。
+:::
 
 ### 基础用法
 
@@ -209,7 +35,7 @@ export default {
 ```html
 <el-input
   placeholder="请输入内容"
-  v-model="input1"
+  v-model="input"
   :disabled="true">
 </el-input>
 
@@ -217,7 +43,7 @@ export default {
 export default {
   data() {
     return {
-      input1: ''
+      input: ''
     }
   }
 }
@@ -232,7 +58,7 @@ export default {
 ```html
 <el-input
   placeholder="请输入内容"
-  v-model="input10"
+  v-model="input"
   clearable>
 </el-input>
 
@@ -240,7 +66,26 @@ export default {
   export default {
     data() {
       return {
-        input10: ''
+        input: ''
+      }
+    }
+  }
+</script>
+```
+:::
+
+### 密码框
+
+:::demo 使用`show-password`属性即可得到一个可切换显示隐藏的密码框
+
+```html
+<el-input placeholder="请输入密码" v-model="input" show-password></el-input>
+
+<script>
+  export default {
+    data() {
+      return {
+        input: ''
       }
     }
   }
@@ -259,24 +104,24 @@ export default {
   <el-input
     placeholder="请选择日期"
     suffix-icon="el-icon-date"
-    v-model="input2">
+    v-model="input1">
   </el-input>
   <el-input
     placeholder="请输入内容"
     prefix-icon="el-icon-search"
-    v-model="input21">
+    v-model="input2">
   </el-input>
 </div>
 <div class="demo-input-suffix">
   slot 方式：
   <el-input
     placeholder="请选择日期"
-    v-model="input22">
+    v-model="input3">
     <i slot="suffix" class="el-input__icon el-icon-date"></i>
   </el-input>
   <el-input
     placeholder="请输入内容"
-    v-model="input23">
+    v-model="input4">
     <i slot="prefix" class="el-input__icon el-icon-search"></i>
   </el-input>
 </div>
@@ -285,10 +130,10 @@ export default {
 export default {
   data() {
     return {
+      input1: '',
       input2: '',
-      input21: '',
-      input22: '',
-      input23: ''
+      input3: '',
+      input4: ''
     }
   }
 }
@@ -331,22 +176,22 @@ export default {
   type="textarea"
   autosize
   placeholder="请输入内容"
-  v-model="textarea2">
+  v-model="textarea1">
 </el-input>
 <div style="margin: 20px 0;"></div>
 <el-input
   type="textarea"
   :autosize="{ minRows: 2, maxRows: 4}"
   placeholder="请输入内容"
-  v-model="textarea3">
+  v-model="textarea2">
 </el-input>
 
 <script>
 export default {
   data() {
     return {
-      textarea2: '',
-      textarea3: ''
+      textarea1: '',
+      textarea2: ''
     }
   }
 }
@@ -361,17 +206,17 @@ export default {
 :::demo 可通过 slot 来指定在 input 中前置或者后置内容。
 ```html
 <div>
-  <el-input placeholder="请输入内容" v-model="input3">
+  <el-input placeholder="请输入内容" v-model="input1">
     <template slot="prepend">Http://</template>
   </el-input>
 </div>
 <div style="margin-top: 15px;">
-  <el-input placeholder="请输入内容" v-model="input4">
+  <el-input placeholder="请输入内容" v-model="input2">
     <template slot="append">.com</template>
   </el-input>
 </div>
 <div style="margin-top: 15px;">
-  <el-input placeholder="请输入内容" v-model="input5" class="input-with-select">
+  <el-input placeholder="请输入内容" v-model="input3" class="input-with-select">
     <el-select v-model="select" slot="prepend" placeholder="请选择">
       <el-option label="餐厅名" value="1"></el-option>
       <el-option label="订单号" value="2"></el-option>
@@ -392,9 +237,9 @@ export default {
 export default {
   data() {
     return {
+      input1: '',
+      input2: '',
       input3: '',
-      input4: '',
-      input5: '',
       select: ''
     }
   }
@@ -411,25 +256,25 @@ export default {
   <el-input
     placeholder="请输入内容"
     suffix-icon="el-icon-date"
-    v-model="input6">
+    v-model="input1">
   </el-input>
   <el-input
     size="medium"
     placeholder="请输入内容"
     suffix-icon="el-icon-date"
-    v-model="input7">
+    v-model="input2">
   </el-input>
   <el-input
     size="small"
     placeholder="请输入内容"
     suffix-icon="el-icon-date"
-    v-model="input8">
+    v-model="input3">
   </el-input>
   <el-input
     size="mini"
     placeholder="请输入内容"
     suffix-icon="el-icon-date"
-    v-model="input9">
+    v-model="input4">
   </el-input>
 </div>
 
@@ -437,10 +282,10 @@ export default {
 export default {
   data() {
     return {
-      input6: '',
-      input7: '',
-      input8: '',
-      input9: ''
+      input1: '',
+      input2: '',
+      input3: '',
+      input4: ''
     }
   }
 }
@@ -570,7 +415,7 @@ export default {
 ```html
 <el-autocomplete
   popper-class="my-autocomplete"
-  v-model="state3"
+  v-model="state"
   :fetch-suggestions="querySearch"
   placeholder="请输入内容"
   @select="handleSelect">
@@ -612,7 +457,7 @@ export default {
     data() {
       return {
         restaurants: [],
-        state3: ''
+        state: ''
       };
     },
     methods: {
@@ -701,7 +546,7 @@ export default {
 :::demo
 ```html
 <el-autocomplete
-  v-model="state4"
+  v-model="state"
   :fetch-suggestions="querySearchAsync"
   placeholder="请输入内容"
   @select="handleSelect"
@@ -711,7 +556,7 @@ export default {
     data() {
       return {
         restaurants: [],
-        state4: '',
+        state: '',
         timeout:  null
       };
     },
@@ -794,16 +639,53 @@ export default {
 ```
 :::
 
+### 输入长度限制
+
+:::demo  `maxlength` 和 `minlength` 是原生属性，用来限制输入框的字符长度，其中字符长度是用 Javascript 的字符串长度统计的。对于类型为 `text` 或 `textarea` 的输入框，在使用 `maxlength` 属性限制最大输入长度的同时，可通过设置 `show-word-limit` 属性来展示字数统计。
+```html
+<el-input
+  type="text"
+  placeholder="请输入内容"
+  v-model="text"
+  maxlength="10"
+  show-word-limit
+>
+</el-input>
+<div style="margin: 20px 0;"></div>
+<el-input
+  type="textarea"
+  placeholder="请输入内容"
+  v-model="textarea"
+  maxlength="30"
+  show-word-limit
+>
+</el-input>
+
+<script>
+export default {
+  data() {
+    return {
+      text: '',
+      textarea: ''
+    }
+  }
+}
+</script>
+```
+:::
+
 ### Input Attributes
 
 | 参数          | 说明            | 类型            | 可选值                 | 默认值   |
 |-------------  |---------------- |---------------- |---------------------- |-------- |
 | type         | 类型   | string  | text，textarea 和其他 [原生 input 的 type 值](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input#Form_%3Cinput%3E_types) | text |
-| value         | 绑定值           | string / number  | — | — |
+| value / v-model | 绑定值           | string / number  | — | — |
 | maxlength     | 原生属性，最大输入长度      | number          |  —  | — |
 | minlength     | 原生属性，最小输入长度      | number          | — | — |
+| show-word-limit | 是否显示输入字数统计，只在 `type = "text"` 或 `type = "textarea"` 时有效 | boolean    |  —  | false |
 | placeholder   | 输入框占位文本    | string          | — | — |
 | clearable     | 是否可清空        | boolean         | — | false |
+| show-password | 是否显示切换密码图标| boolean         | — | false |
 | disabled      | 禁用            | boolean         | — | false   |
 | size          | 输入框尺寸，只在 `type!="textarea"` 时有效      | string          | medium / small / mini  | — |
 | prefix-icon   | 输入框头部图标    | string          | — | — |
@@ -822,7 +704,7 @@ export default {
 | form | 原生属性 | string | — | — |
 | label | 输入框关联的label文字 | string | — | — |
 | tabindex | 输入框的tabindex | string | - | - |
-| validate-event | 输入时是否触发表单的校验 | boolean | - | - |
+| validate-event | 输入时是否触发表单的校验 | boolean | - | true |
 
 ### Input Slots
 | name | 说明 |
@@ -837,7 +719,8 @@ export default {
 |---------|--------|---------|
 | blur | 在 Input 失去焦点时触发 | (event: Event) |
 | focus | 在 Input 获得焦点时触发 | (event: Event) |
-| change | 在 Input 值改变时触发 | (value: string \| number) |
+| change | 仅在输入框失去焦点或用户按下回车时触发 | (value: string \| number) |
+| input | 在 Input 值改变时触发 | (value: string \| number) |
 | clear | 在点击由 `clearable` 属性生成的清空按钮时触发 | — |
 
 ### Input Methods
@@ -867,6 +750,7 @@ export default {
 | suffix-icon | 输入框尾部图标 | string | — | — |
 | hide-loading | 是否隐藏远程加载时的加载图标 | boolean | — | false |
 | popper-append-to-body | 是否将下拉列表插入至 body 元素。在下拉列表的定位出现问题时，可将该属性设置为 false | boolean | - | true |
+| highlight-first-item | 是否默认突出显示远程搜索建议中的第一项 | boolean | — | false |
 
 ### Autocomplete Slots
 | name | 说明 |
diff --git a/examples/docs/zh-CN/installation.md b/examples/docs/zh-CN/installation.md
index 8cc61968bca..bec38b02bb5 100644
--- a/examples/docs/zh-CN/installation.md
+++ b/examples/docs/zh-CN/installation.md
@@ -5,18 +5,21 @@
 推荐使用 npm 的方式安装，它能更好地和 [webpack](https://webpack.js.org/) 打包工具配合使用。
 
 ```shell
-npm i element-ui -S
+npm i @femessage/element-ui -S
+
+# or
+yarn add @femessage/element-ui
 ```
 
 ### CDN
 
-目前可以通过 [unpkg.com/element-ui](https://unpkg.com/element-ui/) 获取到最新版本的资源，在页面上引入 js 和 css 文件即可开始使用。
+目前可以通过 [unpkg.com/@femessage/element-ui](https://unpkg.com/@femessage/element-ui/) 获取到最新版本的资源，在页面上引入 js 和 css 文件即可开始使用。
 
 ```html
 <!-- 引入样式 -->
-<link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">
+<link rel="stylesheet" href="https://unpkg.com/@femessage/element-ui/lib/theme-chalk/index.css">
 <!-- 引入组件库 -->
-<script src="https://unpkg.com/element-ui/lib/index.js"></script>
+<script src="https://unpkg.com/@femessage/element-ui/lib/index.js"></script>
 ```
 
 :::tip
@@ -25,8 +28,11 @@ npm i element-ui -S
 
 ### Hello world
 
-通过 CDN 的方式我们可以很容易地使用 Element 写出一个 Hello world 页面。[在线演示](https://jsfiddle.net/hzfpyvg6/14/)
+通过 CDN 的方式我们可以很容易地使用 Element 写出一个 Hello world 页面。[在线演示](https://codepen.io/ziyoung/pen/rRKYpd)
 
-<iframe width="100%" height="600" src="//jsfiddle.net/hzfpyvg6/1213/embedded/html,result/" allowpaymentrequest allowfullscreen="allowfullscreen" frameborder="0"></iframe>
+<iframe height="265" style="width: 100%;" scrolling="no" title="Element demo" src="//codepen.io/ziyoung/embed/rRKYpd/?height=265&theme-id=light&default-tab=html" frameborder="no" allowtransparency="true" allowfullscreen="true">
+  See the Pen <a href='https://codepen.io/ziyoung/pen/rRKYpd/'>Element demo</a> by hetech
+  (<a href='https://codepen.io/ziyoung'>@ziyoung</a>) on <a href='https://codepen.io'>CodePen</a>.
+</iframe>
 
 如果是通过 npm 安装，并希望配合 webpack 使用，请阅读下一节：[快速上手](/#/zh-CN/component/quickstart)。
diff --git a/examples/docs/zh-CN/layout.md b/examples/docs/zh-CN/layout.md
index fb89e92c665..721bd1aca1a 100644
--- a/examples/docs/zh-CN/layout.md
+++ b/examples/docs/zh-CN/layout.md
@@ -1,34 +1,3 @@
-<style>
-  .demo-layout {
-    .el-row {
-      margin-bottom: 20px;
-      &:last-child {
-        margin-bottom: 0;
-      }
-    }
-    .el-col {
-      border-radius: 4px;
-    }
-    .bg-purple-dark {
-      background: #99a9bf;
-    }
-    .bg-purple {
-      background: #d3dce6;
-    }
-    .bg-purple-light {
-      background: #e5e9f2;
-    }
-    .grid-content {
-      border-radius: 4px;
-      min-height: 36px;
-    }
-    .row-bg {
-      padding: 10px 0;
-      background-color: #f9fafc;
-    }
-  }
-</style>
-
 ## Layout 布局
 
 通过基础的 24 分栏，迅速简便地创建布局。
@@ -345,7 +314,7 @@
 Element 额外提供了一系列类名，用于在某些条件下隐藏元素。这些类名可以添加在任何 DOM 元素或自定义组件上。如果需要，请自行引入以下文件：
 
 ```js
-import 'element-ui/lib/theme-chalk/display.css';
+import '@femessage/element-ui/lib/theme-chalk/display.css';
 ```
 
 包含的类名及其含义为：
diff --git a/examples/docs/zh-CN/link.md b/examples/docs/zh-CN/link.md
new file mode 100644
index 00000000000..a64a9beb49c
--- /dev/null
+++ b/examples/docs/zh-CN/link.md
@@ -0,0 +1,66 @@
+## Link 文字链接
+
+文字超链接
+
+### 基础用法
+基础的文字链接用法。
+:::demo
+```html
+<div>
+  <el-link href="https://element.eleme.io" target="_blank">默认链接</el-link>
+  <el-link type="primary">主要链接</el-link>
+  <el-link type="success">成功链接</el-link>
+  <el-link type="warning">警告链接</el-link>
+  <el-link type="danger">危险链接</el-link>
+  <el-link type="info">信息链接</el-link>
+</div>
+```
+:::
+
+### 禁用状态
+文字链接不可用状态。
+:::demo
+```html
+<div>
+  <el-link disabled>默认链接</el-link>
+  <el-link type="primary" disabled>主要链接</el-link>
+  <el-link type="success" disabled>成功链接</el-link>
+  <el-link type="warning" disabled>警告链接</el-link>
+  <el-link type="danger" disabled>危险链接</el-link>
+  <el-link type="info" disabled>信息链接</el-link>
+</div>
+```
+:::
+
+### 下划线
+文字链接下划线。
+:::demo
+```html
+<div>
+  <el-link :underline="false">无下划线</el-link>
+  <el-link>有下划线</el-link>
+</div>
+```
+:::
+
+### 图标
+
+带图标的文字链接可增强辨识度。
+:::demo
+```html
+<div>
+  <el-link icon="el-icon-edit">编辑</el-link>
+  <el-link>查看<i class="el-icon-view el-icon--right"></i> </el-link>
+</div>
+```
+:::
+
+### Attributes
+
+| 参数           | 说明                           | 类型      | 可选值                               | 默认值  |
+| -------------- | ------------------------------ | --------- | ------------------------------------ | ------- |
+| type           | 类型                   | string  | primary / success / warning / danger / info | default |
+| underline      | 是否下划线                         | boolean | —                                    | true    |
+| disabled       | 是否禁用状态                       | boolean | —                                    | false   |
+| href           | 原生 href 属性                     | string  | —                                    | -       |
+| icon           | 图标类名                       | string  | —                                    | -       |
diff --git a/examples/docs/zh-CN/loading-button.md b/examples/docs/zh-CN/loading-button.md
new file mode 100644
index 00000000000..0b2592eef72
--- /dev/null
+++ b/examples/docs/zh-CN/loading-button.md
@@ -0,0 +1,116 @@
+## LoadingButton 加载按钮
+
+用于显示加载中的按钮，不需要重新添加变量
+
+### 基本用法
+
+用法跟button的一致，就是在绑定button方法的时候，如果是promise,则需要返回promise
+
+:::demo 当只返回普通promise函数的时候，详细用法如下。
+```html
+<template>
+  <el-loading-button
+    :loadingClick="promiseButton"
+  >
+    loadingButton
+  </el-loading-button>
+</template>
+<script>
+  export default {
+    methods: {
+      promiseButton() {
+        return new Promise((resolve) => {
+          setTimeout(() => {
+            resolve()
+          }, 3000)
+        })
+      }
+    }
+  }
+</script>
+```
+:::
+
+### 当函数中需要传参数
+
+当loadingClick中需要绑定参入的参数就需要使用bind
+
+:::demo 触发的函数需要绑定对应的参数。
+```html
+<template>
+  <el-loading-button
+    :loadingClick="promiseButton.bind(this, '我是传入的参数')"
+  >
+    bind
+  </el-loading-button>
+</template>
+<script>
+  export default {
+    methods: {
+      promiseButton(val) {
+        return new Promise((resolve) => {
+          setTimeout(() => {
+            window.alert(val);
+            resolve()
+          }, 3000)
+        })
+      }
+    }
+  }
+</script>
+```
+:::
+
+### 当需要使用触发的原生事件
+
+当组件需要获取到触发的原生事件，则在函数调用中可以获取到对应的事件
+
+:::demo 获取原生事件
+```html
+<template>
+  <el-loading-button
+    :loadingClick="promiseButton1"
+  >
+    普通按钮
+  </el-loading-button>
+  <el-loading-button
+    :loadingClick="promiseButton2.bind(this, '我是传入的参数')"
+  >
+    传入参数按钮
+  </el-loading-button>
+</template>
+<script>
+  export default {
+    methods: {
+      promiseButton1(e) {
+        return new Promise((resolve) => {
+          setTimeout(() => {
+            console.log(e);
+            resolve()
+          }, 3000)
+        })
+      },
+      promiseButton2(val, e) {
+        return new Promise((resolve) => {
+          setTimeout(() => {
+            console.log(val);
+            console.log(e);
+            resolve()
+          }, 3000)
+        })
+      }
+    }
+  }
+</script>
+```
+:::
+
+### Attributes
+| 参数      | 说明          | 类型      | 可选值                           | 默认值  |
+|---------- |-------------- |---------- |--------------------------------  |-------- |
+| loading-button     | 点击触发的函数，必须返回promise           | Function | — | — |
+
+
+:::tip
+说明：其他参数请参照`Button`组件
+:::
diff --git a/examples/docs/zh-CN/loading.md b/examples/docs/zh-CN/loading.md
index 51f7b354bbf..eca3466df14 100644
--- a/examples/docs/zh-CN/loading.md
+++ b/examples/docs/zh-CN/loading.md
@@ -1,53 +1,3 @@
-<style>
-  .demo-loading .el-table {
-    border: none;
-  }
-</style>
-
-<script>
-  export default {
-    data() {
-      return {
-        tableData: [{
-          date: '2016-05-03',
-          name: '王小虎',
-          address: '上海市普陀区金沙江路 1518 弄'
-        }, {
-          date: '2016-05-02',
-          name: '王小虎',
-          address: '上海市普陀区金沙江路 1518 弄'
-        }, {
-          date: '2016-05-04',
-          name: '王小虎',
-          address: '上海市普陀区金沙江路 1518 弄'
-        }],
-        loading: true,
-        loading2: true,
-        fullscreenLoading: false
-      }
-    },
-
-    methods: {
-      openFullScreen() {
-        this.fullscreenLoading = true;
-        setTimeout(() => {
-          this.fullscreenLoading = false;
-        }, 2000);
-      },
-      openFullScreen2() {
-        const loading = this.$loading({
-          lock: true,
-          text: 'Loading',
-          spinner: 'el-icon-loading',
-          background: 'rgba(0, 0, 0, 0.7)'
-        });
-        setTimeout(() => {
-          loading.close();
-        }, 2000);
-      }
-    }
-  }
-</script>
 ## Loading 加载
 
 加载数据时显示动效。
@@ -119,7 +69,7 @@
 ```html
 <template>
   <el-table
-    v-loading="loading2"
+    v-loading="loading"
     element-loading-text="拼命加载中"
     element-loading-spinner="el-icon-loading"
     element-loading-background="rgba(0, 0, 0, 0.8)"
@@ -159,7 +109,7 @@
           name: '王小虎',
           address: '上海市普陀区金沙江路 1518 弄'
         }],
-        loading2: true
+        loading: true
       };
     }
   };
@@ -177,7 +127,7 @@
 <template>
   <el-button
     type="primary"
-    @click="openFullScreen"
+    @click="openFullScreen1"
     v-loading.fullscreen.lock="fullscreenLoading">
     指令方式
   </el-button>
@@ -196,7 +146,7 @@
       }
     },
     methods: {
-      openFullScreen() {
+      openFullScreen1() {
         this.fullscreenLoading = true;
         setTimeout(() => {
           this.fullscreenLoading = false;
@@ -222,7 +172,7 @@
 ### 服务
 Loading 还可以以服务的方式调用。引入 Loading 服务：
 ```javascript
-import { Loading } from 'element-ui';
+import { Loading } from '@femessage/element-ui';
 ```
 在需要调用时：
 ```javascript
diff --git a/examples/docs/zh-CN/lr-container.md b/examples/docs/zh-CN/lr-container.md
new file mode 100644
index 00000000000..175d59267c6
--- /dev/null
+++ b/examples/docs/zh-CN/lr-container.md
@@ -0,0 +1,49 @@
+## LrContainer 左右布局容器
+
+相对于上面的布局容器，该组件主要针对左右两侧布局，对滚动条样式进行了优化.
+
+### 基础用法
+
+:::demo
+```html
+  <el-lr-container
+    aside-width='100'
+    aside-height='200px'
+    main-height='200px'
+    >
+    <template slot='aside'>
+      <div style="height:300px;">aside</div>
+    </template>
+    <template slot="main">
+      <div style="height:300px;">main</div>
+    </template>
+  </el-lr-container>
+```
+:::
+
+### 带有边框
+
+:::demo
+```html
+  <el-lr-container
+    aside-width='100'
+    aside-height='200px'
+    main-height='200px'
+    border
+    >
+    <template slot='aside'>
+      <div style="height:300px;">aside</div>
+    </template>
+    <template slot="main">
+      <div style="height:300px;">main</div>
+    </template>
+  </el-lr-container>
+```
+:::
+
+### Attributes
+| 参数      |   说明    |  类型     | 可选值       | 默认值   |
+|---------- | -------- |---------- |-------------  |-------- |
+| aside-height |左侧边栏高度。height 为 number 类型时，单位为px； | string/number   |  —  |  —  |
+| aside-width | 左侧边栏宽度。同上 | string/number   |  —  |  —  |
+| main-height | 右侧边栏高度。同上 | string/number   |  —  |  —  |
\ No newline at end of file
diff --git a/examples/docs/zh-CN/menu.md b/examples/docs/zh-CN/menu.md
index 4aa3ff138e9..03442140ad3 100644
--- a/examples/docs/zh-CN/menu.md
+++ b/examples/docs/zh-CN/menu.md
@@ -1,56 +1,3 @@
-<style>
-  .demo-box.demo-menu {
-    .el-menu-demo {
-      padding-left: 55px;
-    }
-    .el-menu-vertical-demo:not(.el-menu--collapse) {
-      width: 240px;
-      min-height: 400px;
-    }
-    .line {
-      height: 1px;
-      background-color: #e0e6ed;
-      margin: 35px -24px;
-    }
-    h5 {
-      font-size: 14px;
-      color: #8492a6;
-      margin-top: 10px;
-    }
-    .tac {
-      text-align: center;
-
-      .el-menu-vertical-demo {
-        display: inline-block;
-        text-align: left;
-      }
-    }
-  }
-</style>
-
-<script>
-  export default {
-    data() {
-      return {
-        activeIndex: '1',
-        activeIndex2: '1',
-        isCollapse: true
-      };
-    },
-    methods: {
-      handleOpen(key, keyPath) {
-        console.log(key, keyPath);
-      },
-      handleClose(key, keyPath) {
-        console.log(key, keyPath);
-      },
-      handleSelect(key, keyPath) {
-        console.log(key, keyPath);
-      }
-    }
-  }
-</script>
-
 ## NavMenu 导航菜单
 
 为网站提供导航功能的菜单。
@@ -303,7 +250,7 @@
 | collapse  | 是否水平折叠收起菜单（仅在 mode 为 vertical 时可用）| boolean  |   —   | false |
 | background-color  | 菜单的背景色（仅支持 hex 格式） | string |   —   | #ffffff |
 | text-color  | 菜单的文字颜色（仅支持 hex 格式） | string |   —   | #303133 |
-| active-text-color  | 当前激活菜单的文字颜色（仅支持 hex 格式） | string |   —   | #409EFF |
+| active-text-color  | 当前激活菜单的文字颜色（仅支持 hex 格式） | string |   —   | #2460e0 |
 | default-active | 当前激活菜单的 index | string    | — | — |
 | default-openeds | 当前打开的 sub-menu 的 index 的数组 | Array    | — | — |
 | unique-opened  | 是否只保持一个子菜单的展开 | boolean   | — | false   |
@@ -327,7 +274,7 @@
 ### SubMenu Attribute
 | 参数      | 说明    | 类型      | 可选值       | 默认值   |
 |---------- |-------- |---------- |-------------  |-------- |
-| index     | 唯一标志   | string  | — | — |
+| index     | 唯一标志   | string/null  | — | null |
 | popper-class | 弹出菜单的自定义类名 | string | — | — |
 | show-timeout | 展开 sub-menu 的延时 | number | — | 300 |
 | hide-timeout | 收起 sub-menu 的延时 | number | — | 300 |
diff --git a/examples/docs/zh-CN/message-box-center.md b/examples/docs/zh-CN/message-box-center.md
new file mode 100644
index 00000000000..0d8d5baf579
--- /dev/null
+++ b/examples/docs/zh-CN/message-box-center.md
@@ -0,0 +1,76 @@
+## MessageBoxCenter 组件
+
+### 居中消息提示
+
+当用户进行操作时会被触发，该对话框中断用户操作，直到用户确认知晓后才可关闭。
+
+:::demo 调用`$alertCenter`方法即可打开消息提示，它模拟了系统的 `alert`，无法通过按下 ESC 或点击框外关闭。此例中接收了两个参数，`message`和`title`。值得一提的是，窗口被关闭后，它默认会返回一个`Promise`对象便于进行后续操作的处理。若不确定浏览器是否支持`Promise`，可自行引入第三方 polyfill 或像本例一样使用回调进行后续处理。
+```html
+<template>
+  <el-button type="text" @click="open">点击打开 Message Box</el-button>
+</template>
+
+<script>
+  export default {
+    methods: {
+      open() {
+        this.$alertCenter('这是一段内容', '标题名称', {
+          confirmButtonText: '确定',
+          callback: action => {
+            this.$message({
+              type: 'info',
+              message: `action: ${ action }`
+            });
+          }
+        });
+      }
+    }
+  }
+</script>
+```
+:::
+
+### 确认消息
+
+提示用户确认其已经触发的动作，并询问是否进行此操作时会用到此对话框。
+
+:::demo 调用`$confirm`方法即可打开消息提示，它模拟了系统的 `confirm`。Message Box 组件也拥有极高的定制性，我们可以传入`options`作为第三个参数，它是一个字面量对象。`type`字段表明消息类型，可以为`success`，`error`，`info`和`warning`，无效的设置将会被忽略。注意，第二个参数`title`必须定义为`String`类型，如果是`Object`，会被理解为`options`。在这里我们用了 Promise 来处理后续响应。
+
+```html
+<template>
+  <el-button type="text" @click="open">点击打开 Message Box</el-button>
+</template>
+
+<script>
+  export default {
+    methods: {
+      open() {
+        this.$confirmCenter('此操作将永久删除该文件, 是否继续?', '提示', {
+          confirmButtonText: '确定',
+          cancelButtonText: '取消',
+          type: 'warning'
+        }).then(() => {
+          this.$message({
+            type: 'success',
+            message: '删除成功!'
+          });
+        }).catch(() => {
+          this.$message({
+            type: 'info',
+            message: '已取消删除'
+          });          
+        });
+      }
+    }
+  }
+</script>
+```
+:::
+
+### 全局方法
+
+如果你按需引入MessageBoxCenter组件，并且在Vue.prototype中添加了$alert方法，可以用`Vue.prototype.$alert = MessageBoxCenter.alertCenter`来代替`Vue.prototype.$alert = MessageBox.alert`；Vue.prototype中添加了$confirm方法，可以用`Vue.prototype.$confirm = MessageBoxCenter.confirmCenter`来代替`Vue.prototype.$confirm = MessageBox.confirm`。。以上方法调用的参数完全一致，完全兼容。
+
+:::tip
+说明：所有参数跟`MessageBox`组件一致
+:::
\ No newline at end of file
diff --git a/examples/docs/zh-CN/message-box.md b/examples/docs/zh-CN/message-box.md
index a448a31c70d..676988f663f 100644
--- a/examples/docs/zh-CN/message-box.md
+++ b/examples/docs/zh-CN/message-box.md
@@ -1,148 +1,3 @@
-<script>
-  export default {
-    methods: {
-      open() {
-        this.$alert('这是一段内容', '标题名称', {
-          confirmButtonText: '确定',
-          callback: action => {
-            this.$message({
-              type: 'info',
-              message: `action: ${ action }`
-            });
-          }
-        });
-      },
-
-      open2() {
-        this.$confirm('此操作将永久删除该文件, 是否继续?', '提示', {
-          confirmButtonText: '确定',
-          cancelButtonText: '取消',
-          type: 'warning'
-        }).then(() => {
-          setTimeout(() => {
-            this.$message({
-              message: '删除成功!',
-              type: 'success'
-            });
-          }, 200);
-        }).catch(() => {
-          setTimeout(() => {
-            this.$message({
-              message: '已取消删除',
-              type: 'info'
-            });  
-          }, 200);
-        });
-      },
-
-      open3() {
-        this.$prompt('请输入邮箱', '提示', {
-          confirmButtonText: '确定',
-          cancelButtonText: '取消',
-          inputPattern: /[\w!#$%&'*+/=?^_`{|}~-]+(?:\.[\w!#$%&'*+/=?^_`{|}~-]+)*@(?:[\w](?:[\w-]*[\w])?\.)+[\w](?:[\w-]*[\w])?/,
-          inputErrorMessage: '邮箱格式不正确'
-        }).then(({ value }) => {
-          setTimeout(() => {
-            this.$message({
-              type: 'success',
-              message: '你的邮箱是: ' + value
-            });
-          }, 200);
-        }).catch(() => {
-          setTimeout(() => {
-            this.$message({
-              type: 'info',
-              message: '取消输入'
-            });
-          }, 200);
-        });
-      },
-
-
-      open4() {
-        const h = this.$createElement;
-        this.$msgbox({
-          title: '消息',
-          message: h('p', null, [
-            h('span', null, '内容可以是 '),
-            h('i', { style: 'color: teal' }, 'VNode')
-          ]),
-          showCancelButton: true,
-          confirmButtonText: '确定',
-          cancelButtonText: '取消',
-          beforeClose: (action, instance, done) => {
-            if (action === 'confirm') {
-              instance.confirmButtonLoading = true;
-              instance.confirmButtonText = '执行中...';
-              setTimeout(() => {
-                done();
-                setTimeout(() => {
-                  instance.confirmButtonLoading = false;
-                }, 300);
-              }, 3000);
-            } else {
-              done();
-            }
-          }
-        }).then(action => {
-          setTimeout(() => {
-            this.$message({
-              type: 'info',
-              message: 'action: ' + action
-            });
-          }, 200);
-        });
-      },
-
-      open5() {
-        this.$alert('<strong>这是 <i>HTML</i> 片段</strong>', 'HTML 片段', {
-          dangerouslyUseHTMLString: true
-        });
-      },
-
-      open6() {
-        this.$confirm('检测到未保存的内容，是否在离开页面前保存修改？', '确认信息', {
-          distinguishCancelAndClose: true,
-          confirmButtonText: '保存',
-          cancelButtonText: '放弃修改'
-        })
-          .then(() => {
-            this.$message({
-              type: 'info',
-              message: '保存修改'
-            });
-          })
-          .catch(action => {
-            this.$message({
-              type: 'info',
-              message: action === 'cancel'
-                ? '放弃保存并离开页面'
-                : '停留在当前页面'
-            })
-          });
-      },
-
-      open7() {
-        this.$confirm('此操作将永久删除该文件, 是否继续?', '提示', {
-          confirmButtonText: '确定',
-          cancelButtonText: '取消',
-          type: 'warning',
-          center: true
-        }).then(() => {
-          this.$message({
-            type: 'success',
-            message: '删除成功!'
-          });
-        }).catch(() => {
-          this.$message({
-            type: 'info',
-            message: '已取消删除'
-          });
-        });
-      }
-    }
-  };
-</script>
 ## MessageBox 弹框
 模拟系统的消息提示框而实现的一套模态对话框组件，用于消息提示、确认消息和提交内容。
 
@@ -188,13 +43,13 @@
 
 ```html
 <template>
-  <el-button type="text" @click="open2">点击打开 Message Box</el-button>
+  <el-button type="text" @click="open">点击打开 Message Box</el-button>
 </template>
 
 <script>
   export default {
     methods: {
-      open2() {
+      open() {
         this.$confirm('此操作将永久删除该文件, 是否继续?', '提示', {
           confirmButtonText: '确定',
           cancelButtonText: '取消',
@@ -208,7 +63,7 @@
           this.$message({
             type: 'info',
             message: '已取消删除'
-          });          
+          });
         });
       }
     }
@@ -225,13 +80,13 @@
 
 ```html
 <template>
-  <el-button type="text" @click="open3">点击打开 Message Box</el-button>
+  <el-button type="text" @click="open">点击打开 Message Box</el-button>
 </template>
 
 <script>
   export default {
     methods: {
-      open3() {
+      open() {
         this.$prompt('请输入邮箱', '提示', {
           confirmButtonText: '确定',
           cancelButtonText: '取消',
@@ -246,7 +101,7 @@
           this.$message({
             type: 'info',
             message: '取消输入'
-          });       
+          });
         });
       }
     }
@@ -263,13 +118,13 @@
 
 ```html
 <template>
-  <el-button type="text" @click="open4">点击打开 Message Box</el-button>
+  <el-button type="text" @click="open">点击打开 Message Box</el-button>
 </template>
 
 <script>
   export default {
     methods: {
-      open4() {
+      open() {
         const h = this.$createElement;
         this.$msgbox({
           title: '消息',
@@ -308,7 +163,7 @@
 :::
 
 :::tip
-弹出层的内容可以是 `VNode`，所以我们能把一些自定义组件传入其中。每次弹出层打开后，Vue 会对新老 `VNode` 节点进行比对，然后将根据比较结果进行最小单位地修改视图。这也许会造成弹出层内容区域的组件没有重新渲染，例如 [#8931](https://github.com/ElemeFE/element/issues/8931)。当这类问题出现时，解决方案是给 `VNode` 加上一个不相同的 key，参考[这里](https://jsfiddle.net/zhiyang/ezmhq2ef/)。
+弹出层的内容可以是 `VNode`，所以我们能把一些自定义组件传入其中。每次弹出层打开后，Vue 会对新老 `VNode` 节点进行比对，然后将根据比较结果进行最小单位地修改视图。这也许会造成弹出层内容区域的组件没有重新渲染，例如 [#8931](https://github.com/femessage/element/issues/8931)。当这类问题出现时，解决方案是给 `VNode` 加上一个不相同的 key，参考[这里](https://jsfiddle.net/zhiyang/ezmhq2ef/)。
 :::
 
 ### 使用 HTML 片段
@@ -319,13 +174,13 @@
 
 ```html
 <template>
-  <el-button type="text" @click="open5">点击打开 Message Box</el-button>
+  <el-button type="text" @click="open">点击打开 Message Box</el-button>
 </template>
 
 <script>
   export default {
     methods: {
-      open5() {
+      open() {
         this.$alert('<strong>这是 <i>HTML</i> 片段</strong>', 'HTML 片段', {
           dangerouslyUseHTMLString: true
         });
@@ -348,13 +203,13 @@
 
 ```html
 <template>
-  <el-button type="text" @click="open6">点击打开 Message Box</el-button>
+  <el-button type="text" @click="open">点击打开 Message Box</el-button>
 </template>
 
 <script>
   export default {
     methods: {
-      open6() {
+      open() {
         this.$confirm('检测到未保存的内容，是否在离开页面前保存修改？', '确认信息', {
           distinguishCancelAndClose: true,
           confirmButtonText: '保存',
@@ -388,13 +243,13 @@
 
 ```html
 <template>
-  <el-button type="text" @click="open7">点击打开 Message Box</el-button>
+  <el-button type="text" @click="open">点击打开 Message Box</el-button>
 </template>
 
 <script>
   export default {
     methods: {
-      open7() {
+      open() {
         this.$confirm('此操作将永久删除该文件, 是否继续?', '提示', {
           confirmButtonText: '确定',
           cancelButtonText: '取消',
@@ -418,6 +273,35 @@
 ```
 :::
 
+### 实例插入位置
+支持实例插入文档位置
+
+:::demo 将 `appendTarget` 设置为 要插入的位置 即可
+
+```html
+<template>
+  <div ref="target" id="target">
+    <el-button type="text" @click="open">点击打开 Message Box</el-button>
+  </div>
+</template>
+
+<script>
+  export default {
+    methods: {
+      open() {
+        this.$confirm('打开控制台查看插入的位置', '提示', {
+          confirmButtonText: '确定',
+          cancelButtonText: '取消',
+          center: true,
+          appendTarget: this.$refs.target // '#target'
+        })
+      }
+    }
+  }
+</script>
+```
+:::
+
 ### 全局方法
 
 如果你完整引入了 Element，它会为 Vue.prototype 添加如下全局方法：$msgbox, $alert, $confirm 和 $prompt。因此在 Vue instance 中可以采用本页面中的方式调用 `MessageBox`。调用参数为：
@@ -431,7 +315,7 @@
 如果单独引入 `MessageBox`：
 
 ```javascript
-import { MessageBox } from 'element-ui';
+import { MessageBox } from '@femessage/element-ui';
 ```
 
 那么对应于上述四个全局方法的调用方法依次为：MessageBox, MessageBox.alert, MessageBox.confirm 和 MessageBox.prompt，调用参数与全局方法相同。
@@ -469,3 +353,4 @@ import { MessageBox } from 'element-ui';
 | inputErrorMessage | 校验未通过时的提示文本 | string | — | 输入的数据不合法! |
 | center | 是否居中布局 | boolean | — | false |
 | roundButton | 是否使用圆角按钮 | boolean | — | false |
+| appendTarget | 实例插入文档的目标位置 | HTMLElement / string | — | document.body |
diff --git a/examples/docs/zh-CN/message.md b/examples/docs/zh-CN/message.md
index d2225814c12..f9cd7b616d5 100644
--- a/examples/docs/zh-CN/message.md
+++ b/examples/docs/zh-CN/message.md
@@ -1,86 +1,3 @@
-<script>
-  module.exports = {
-    methods: {
-      open() {
-        this.$message('这是一条消息提示');
-      },
-
-      openVn() {
-        const h = this.$createElement;
-        this.$message({
-          message: h('p', null, [
-            h('span', null, '内容可以是 '),
-            h('i', { style: 'color: teal' }, 'VNode')
-          ])
-        });
-      },
-
-      open2() {
-        this.$message({
-          message: '恭喜你，这是一条成功消息',
-          type: 'success'
-        });
-      },
-
-      open3() {
-        this.$message({
-          message: '警告哦，这是一条警告消息',
-          type: 'warning'
-        });
-      },
-
-      open4() {
-        this.$message.error('错了哦，这是一条错误消息');
-      },
-
-      open5() {
-        this.$message({
-          showClose: true,
-          message: '这是一条消息提示'
-        });
-      },
-
-      open6() {
-        this.$message({
-          showClose: true,
-          message: '恭喜你，这是一条成功消息',
-          type: 'success'
-        });
-      },
-
-      open7() {
-        this.$message({
-          showClose: true,
-          message: '警告哦，这是一条警告消息',
-          type: 'warning'
-        });
-      },
-
-      open8() {
-        this.$message({
-          showClose: true,
-          message: '错了哦，这是一条错误消息',
-          type: 'error'
-        });
-      },
-
-      openCenter() {
-        this.$message({
-          message: '居中的文字',
-          center: true
-        });
-      },
-
-      openHTML() {
-        this.$message({
-          dangerouslyUseHTMLString: true,
-          message: '<strong>这是 <i>HTML</i> 片段</strong>'
-        });
-      }
-    }
-  };
-</script>
-
 ## Message 消息提示
 
 常用于主动操作后的反馈提示。与 Notification 的区别是后者更多用于系统级通知的被动提醒。
@@ -128,14 +45,14 @@
 <template>
   <el-button :plain="true" @click="open2">成功</el-button>
   <el-button :plain="true" @click="open3">警告</el-button>
-  <el-button :plain="true" @click="open">消息</el-button>
+  <el-button :plain="true" @click="open1">消息</el-button>
   <el-button :plain="true" @click="open4">错误</el-button>
 </template>
 
 <script>
   export default {
     methods: {
-      open() {
+      open1() {
         this.$message('这是一条消息提示');
       },
       open2() {
@@ -168,23 +85,23 @@
 :::demo 默认的 Message 是不可以被人工关闭的，如果需要可手动关闭的 Message，可以使用`showClose`字段。此外，和 Notification 一样，Message 拥有可控的`duration`，设置`0`为不会被自动关闭，默认为 3000 毫秒。
 ```html
 <template>
-  <el-button :plain="true" @click="open5">消息</el-button>
-  <el-button :plain="true" @click="open6">成功</el-button>
-  <el-button :plain="true" @click="open7">警告</el-button>
-  <el-button :plain="true" @click="open8">错误</el-button>
+  <el-button :plain="true" @click="open1">消息</el-button>
+  <el-button :plain="true" @click="open2">成功</el-button>
+  <el-button :plain="true" @click="open3">警告</el-button>
+  <el-button :plain="true" @click="open4">错误</el-button>
 </template>
 
 <script>
   export default {
     methods: {
-      open5() {
+      open1() {
         this.$message({
           showClose: true,
           message: '这是一条消息提示'
         });
       },
 
-      open6() {
+      open2() {
         this.$message({
           showClose: true,
           message: '恭喜你，这是一条成功消息',
@@ -192,7 +109,7 @@
         });
       },
 
-      open7() {
+      open3() {
         this.$message({
           showClose: true,
           message: '警告哦，这是一条警告消息',
@@ -200,7 +117,7 @@
         });
       },
 
-      open8() {
+      open4() {
         this.$message({
           showClose: true,
           message: '错了哦，这是一条错误消息',
@@ -276,7 +193,7 @@ Element 为 Vue.prototype 添加了全局方法 $message。因此在 vue instanc
 单独引入 `Message`：
 
 ```javascript
-import { Message } from 'element-ui';
+import { Message } from '@femessage/element-ui';
 ```
 
 此时调用方法为 `Message(options)`。我们也为每个 type 定义了各自的方法，如 `Message.success(options)`。并且可以调用 `Message.closeAll()` 手动关闭所有实例。
@@ -293,6 +210,7 @@ import { Message } from 'element-ui';
 | showClose | 是否显示关闭按钮 | boolean | — | false |
 | center | 文字是否居中 | boolean | — | false |
 | onClose | 关闭时的回调函数, 参数为被关闭的 message 实例 | function | — | — |
+| offset | Message 距离窗口顶部的偏移量 | number | — | 20 |
 
 ### 方法
 调用 `Message` 或 `this.$message` 会返回当前 Message 的实例。如果需要手动关闭实例，可以调用它的 `close` 方法。
diff --git a/examples/docs/zh-CN/notification.md b/examples/docs/zh-CN/notification.md
index 9876f785a9b..e8db72dcbff 100644
--- a/examples/docs/zh-CN/notification.md
+++ b/examples/docs/zh-CN/notification.md
@@ -1,115 +1,3 @@
-<script>
-  module.exports = {
-    methods: {
-      open() {
-        const h = this.$createElement;
-
-        this.$notify({
-          title: '标题名称',
-          message: h('i', { style: 'color: teal'}, '这是提示文案这是提示文案这是提示文案这是提示文案这是提示文案这是提示文案这是提示文案这是提示文案')
-        });
-      },
-
-      open2() {
-        this.$notify({
-          title: '提示',
-          message: '这是一条不会自动关闭的消息',
-          duration: 0
-        });
-      },
-
-      open3() {
-        this.$notify({
-          title: '成功',
-          message: '这是一条成功的提示消息',
-          type: 'success'
-        });
-      },
-
-      open4() {
-        this.$notify({
-          title: '警告',
-          message: '这是一条警告的提示消息',
-          type: 'warning'
-        });
-      },
-
-      open5() {
-        this.$notify.info({
-          title: '消息',
-          message: '这是一条消息的提示消息'
-        });
-      },
-
-      open6() {
-        this.$notify.error({
-          title: '错误',
-          message: '这是一条错误的提示消息'
-        });
-      },
-
-      open7() {
-        this.$notify({
-          title: '自定义位置',
-          message: '右上角弹出的消息'
-        });
-      },
-
-      open8() {
-        this.$notify({
-          title: '自定义位置',
-          message: '右下角弹出的消息',
-          position: 'bottom-right'
-        });
-      },
-
-      open9() {
-        this.$notify({
-          title: '自定义位置',
-          message: '左下角弹出的消息',
-          position: 'bottom-left'
-        });
-      },
-
-      open10() {
-        this.$notify({
-          title: '自定义位置',
-          message: '左上角弹出的消息',
-          position: 'top-left'
-        });
-      },
-
-      open11() {
-        this.$notify({
-          title: '偏移',
-          message: '这是一条带有偏移的提示消息',
-          offset: 100
-        });
-      },
-
-      open12() {
-        this.$notify({
-          title: 'HTML 片段',
-          dangerouslyUseHTMLString: true,
-          message: '<strong>这是 <i>HTML</i> 片段</strong>'
-        });
-      },
-
-      open13() {
-        this.$notify.success({
-          title: 'Info',
-          message: '这是一条没有关闭按钮的消息',
-          showClose: false
-        });
-      },
-
-      onClose() {
-        console.log('Notification 已关闭');
-      }
-    }
-  };
-</script>
-
 ## Notification 通知
 
 悬浮出现在页面角落，显示全局的通知提醒消息。
@@ -123,7 +11,7 @@
 <template>
   <el-button
     plain
-    @click="open">
+    @click="open1">
     可自动关闭
   </el-button>
   <el-button
@@ -136,7 +24,7 @@
 <script>
   export default {
     methods: {
-      open() {
+      open1() {
         const h = this.$createElement;
 
         this.$notify({
@@ -162,27 +50,27 @@
 
 带有 icon，常用来显示「成功、警告、消息、错误」类的系统消息
 
-:::demo Element 为 Notification 组件准备了四种通知类型：`success`, `warning`, `info`, `error`。通过`type`字段来设置，除此以外的值将被忽略。同时，我们也为 Notification 的各种 type 注册了方法，可以在不传入`type`字段的情况下像`open5`和`open6`那样直接调用。
+:::demo Element 为 Notification 组件准备了四种通知类型：`success`, `warning`, `info`, `error`。通过`type`字段来设置，除此以外的值将被忽略。同时，我们也为 Notification 的各种 type 注册了方法，可以在不传入`type`字段的情况下像`open3`和`open4`那样直接调用。
 ```html
 <template>
   <el-button
     plain
-    @click="open3">
+    @click="open1">
     成功
   </el-button>
   <el-button
     plain
-    @click="open4">
+    @click="open2">
     警告
   </el-button>
   <el-button
     plain
-    @click="open5">
+    @click="open3">
     消息
   </el-button>
   <el-button
     plain
-    @click="open6">
+    @click="open4">
     错误
   </el-button>
 </template>
@@ -190,7 +78,7 @@
 <script>
   export default {
     methods: {
-      open3() {
+      open1() {
         this.$notify({
           title: '成功',
           message: '这是一条成功的提示消息',
@@ -198,7 +86,7 @@
         });
       },
 
-      open4() {
+      open2() {
         this.$notify({
           title: '警告',
           message: '这是一条警告的提示消息',
@@ -206,14 +94,14 @@
         });
       },
 
-      open5() {
+      open3() {
         this.$notify.info({
           title: '消息',
           message: '这是一条消息的提示消息'
         });
       },
 
-      open6() {
+      open4() {
         this.$notify.error({
           title: '错误',
           message: '这是一条错误的提示消息'
@@ -234,22 +122,22 @@
 <template>
   <el-button
     plain
-    @click="open7">
+    @click="open1">
     右上角
   </el-button>
   <el-button
     plain
-    @click="open8">
+    @click="open2">
     右下角
   </el-button>
   <el-button
     plain
-    @click="open9">
+    @click="open3">
     左下角
   </el-button>
   <el-button
     plain
-    @click="open10">
+    @click="open4">
     左上角
   </el-button>
 </template>
@@ -257,14 +145,14 @@
 <script>
   export default {
     methods: {
-      open7() {
+      open1() {
         this.$notify({
           title: '自定义位置',
           message: '右上角弹出的消息'
         });
       },
 
-      open8() {
+      open2() {
         this.$notify({
           title: '自定义位置',
           message: '右下角弹出的消息',
@@ -272,7 +160,7 @@
         });
       },
 
-      open9() {
+      open3() {
         this.$notify({
           title: '自定义位置',
           message: '左下角弹出的消息',
@@ -280,7 +168,7 @@
         });
       },
 
-      open10() {
+      open4() {
         this.$notify({
           title: '自定义位置',
           message: '左上角弹出的消息',
@@ -302,7 +190,7 @@
 <template>
   <el-button
     plain
-    @click="open11">
+    @click="open">
     偏移的消息
   </el-button>
 </template>
@@ -310,7 +198,7 @@
 <script>
   export default {
     methods: {
-      open11() {
+      open() {
         this.$notify({
           title: '偏移',
           message: '这是一条带有偏移的提示消息',
@@ -331,7 +219,7 @@
 <template>
   <el-button
     plain
-    @click="open12">
+    @click="open">
     使用 HTML 片段
   </el-button>
 </template>
@@ -339,7 +227,7 @@
 <script>
   export default {
     methods: {
-      open12() {
+      open() {
         this.$notify({
           title: 'HTML 片段',
           dangerouslyUseHTMLString: true,
@@ -365,7 +253,7 @@
 <template>
   <el-button
     plain
-    @click="open13">
+    @click="open">
     隐藏关闭按钮
   </el-button>
 </template>
@@ -373,7 +261,7 @@
 <script>
   export default {
     methods: {
-      open13() {
+      open() {
         this.$notify.success({
           title: 'Info',
           message: '这是一条没有关闭按钮的消息',
@@ -395,7 +283,7 @@ Element 为 `Vue.prototype` 添加了全局方法 `$notify`。因此在 vue inst
 单独引入 Notification：
 
 ```javascript
-import { Notification } from 'element-ui';
+import { Notification } from '@femessage/element-ui';
 ```
 
 此时调用方法为 `Notification(options)`。我们也为每个 type 定义了各自的方法，如 `Notification.success(options)`。并且可以调用 `Notification.closeAll()` 手动关闭所有实例。
diff --git a/examples/docs/zh-CN/page-header.md b/examples/docs/zh-CN/page-header.md
new file mode 100644
index 00000000000..8384b8024bf
--- /dev/null
+++ b/examples/docs/zh-CN/page-header.md
@@ -0,0 +1,40 @@
+## PageHeader 页头
+
+如果页面的路径比较简单，推荐使用页头组件而非面包屑组件。
+
+### 基础
+
+:::demo
+```html
+<el-page-header @back="goBack" content="详情页面">
+</el-page-header>
+
+<script>
+  export default {
+    methods: {
+      goBack() {
+        console.log('go back');
+      }
+    }
+  }
+</script>
+```
+:::
+
+### Attributes
+| 参数      | 说明          | 类型      | 可选值                           | 默认值  |
+|---------- |-------------- |---------- |------------------------------ | ------ |
+| title     | 标题           | string    |  —                            | 返回   |
+| content   | 内容           | string    |  —                            | —      |
+
+
+### Events
+| 事件名称   | 说明           | 回调参数   |
+|---------- |-------------- |---------- |
+| back      | 点击左侧区域触发 | —        |
+
+### Slots
+| 事件名称    | 说明         |
+|---------- |------------- |
+| title     | 标题内容      |
+| content   | 内容         |
diff --git a/examples/docs/zh-CN/pagination.md b/examples/docs/zh-CN/pagination.md
index 5d8e96a8ef8..f9a2b416342 100644
--- a/examples/docs/zh-CN/pagination.md
+++ b/examples/docs/zh-CN/pagination.md
@@ -139,86 +139,34 @@
 </script>
 ```
 :::
+
+### 当只有一页时隐藏分页
+
+当只有一页时，通过设置 `hide-on-single-page` 属性来隐藏分页。
+
+:::demo
+```html
+<div>
+ <el-switch v-model="value">
+ </el-switch>
+ <el-pagination
+  :hide-on-single-page="value"
+  :total="5"
+  layout="prev, pager, next">
+</el-pagination>
+</div>
+
 <script>
-  import { addClass } from 'element-ui/src/utils/dom';
   export default {
-    methods: {
-      handleSizeChange(val) {
-        console.log(`每页 ${val} 条`);
-      },
-      handleCurrentChange(val) {
-        console.log(`当前页: ${val}`);
-      }
-    },
     data() {
       return {
-        currentPage1: 5,
-        currentPage2: 5,
-        currentPage3: 5,
-        currentPage4: 4
-      };
-    },
-    mounted() {
-      this.$nextTick(() => {
-        let demos = document.querySelectorAll('.source');
-        let firstDemo = demos[0];
-        let lastDemo = demos[demos.length - 1];
-        addClass(firstDemo, 'first');
-        addClass(lastDemo, 'last');
-      });
+        value: false
+      }
     }
   }
 </script>
-<style>
-  .demo-pagination .source.first {
-    padding: 0;
-  }
-
-  .demo-pagination .first .block {
-    padding: 30px 0;
-    text-align: center;
-    border-right: solid 1px #EFF2F6;
-    display: inline-block;
-    width: 50%;
-    box-sizing: border-box;
-
-    &:last-child {
-      border-right: none;
-    }
-  }
-
-  .demo-pagination .first .demonstration {
-    display: block;
-    color: #8492a6;
-    font-size: 14px;
-    margin-bottom: 20px;
-  }
-
-  .demo-pagination .source.last {
-    padding: 0;
-  }
-
-  .demo-pagination .last .block {
-    padding: 30px 24px;
-    border-bottom: solid 1px #EFF2F6;
-    &:last-child {
-      border-bottom: none;
-    }
-  }
-
-  .demo-pagination .last .demonstration {
-    font-size: 14px;
-    color: #8492a6;
-    line-height: 44px;
-  }
-
-  .demo-pagination .last .demonstration + .el-pagination {
-    float: right;
-    width: 70%;
-    margin: 5px 20px 0 0;
-  }
-</style>
-
+```
+:::
 
 ### Attributes
 | 参数               | 说明                                                     | 类型              | 可选值      | 默认值 |
@@ -236,6 +184,7 @@
 | prev-text | 替代图标显示的上一页文字 | string | — | — |
 | next-text | 替代图标显示的下一页文字 | string | — | — |
 | disabled | 是否禁用 | boolean | — | false |
+| hide-on-single-page | 只有一页时是否隐藏 | boolean | — | - |
 
 ### Events
 | 事件名称 | 说明 | 回调参数 |
diff --git a/examples/docs/zh-CN/panel.md b/examples/docs/zh-CN/panel.md
new file mode 100644
index 00000000000..61ab77e70f3
--- /dev/null
+++ b/examples/docs/zh-CN/panel.md
@@ -0,0 +1,44 @@
+## Panel 展示板
+查看信息展示板
+
+
+### 基础用法
+
+### view
+包含标题、小标题、展示类型(view)
+
+:::demo 
+```html
+<el-panel title="标题" subtitle="小标题" type="view"></el-panel>
+```
+:::
+
+### edit
+包含标题、小标题、展示类型(edit)
+
+:::demo 
+```html
+<el-panel title="标题" subtitle="小标题" type="edit"></el-panel>
+
+```
+:::
+
+### slot
+除设置标题外，还可以通过 slot 来添加操作属性。
+:::demo 
+```html
+<el-panel title="标题" subtitle="小标题" type="view">
+    <div slot="operation">操作</div>
+</el-panel>
+
+```
+:::
+
+### Attributes
+| 参数      | 说明    | 类型      | 可选值       | 默认值   |
+|---------- |-------- |---------- |-------------  |-------- |
+| title | 标题 | string | — | — |
+| subtitle | 小标题 | string | — | — |
+| type | 展示类型 | string | view/edit | view |
+| bodyPadding | 内边距 | string | — | — |
+| width | 宽度 | string/number | — | — |
\ No newline at end of file
diff --git a/examples/docs/zh-CN/popconfirm.md b/examples/docs/zh-CN/popconfirm.md
new file mode 100644
index 00000000000..e3eb86e1cae
--- /dev/null
+++ b/examples/docs/zh-CN/popconfirm.md
@@ -0,0 +1,54 @@
+## Popconfirm 气泡确认框
+
+点击元素，弹出气泡确认框。
+
+### 基础用法
+
+Popconfirm 的属性与 Popover 很类似，因此对于重复属性，请参考 Popover 的文档，在此文档中不做详尽解释。
+:::demo 在 Popconfirm 中，只有 `title` 属性可用，`content` 属性不会被展示。
+```html
+<template>
+<el-popconfirm
+  title="这是一段内容确定删除吗？"
+>
+  <el-button slot="reference">删除</el-button>
+</el-popconfirm>
+</template>
+````
+:::
+
+### 自定义
+
+可以在 Popconfirm 中自定义内容。
+:::demo
+```html
+<template>
+<el-popconfirm
+  confirmButtonText='好的'
+  cancelButtonText='不用了'
+  icon="el-icon-info"
+  iconColor="red"
+  title="这是一段内容确定删除吗？"
+>
+  <el-button slot="reference">删除</el-button>
+</el-popconfirm>
+</template>
+```
+:::
+
+### Attributes
+| 参数               | 说明                                                     | 类型              | 可选值      | 默认值 |
+|--------------------|----------------------------------------------------------|-------------------|-------------|--------|
+|  title              | 标题 | String | — | — |
+|  confirmButtonText              | 确认按钮文字 | String | — | — |
+|  cancelButtonText              | 取消按钮文字 | String | — | — |
+|  confirmButtonType              | 确认按钮类型 | String | — | Primary |
+|  cancelButtonType              | 取消按钮类型 | String | — | Text |
+|  icon              | Icon | String | — | el-icon-question |
+|  iconColor              | Icon 颜色 | String | — | #f90 |
+|  hideIcon              | 是否隐藏 Icon | Boolean | — | false |
+
+### Slot
+| 参数 | 说明 |
+|--- | ---|
+| reference | 触发 Popconfirm 显示的 HTML 元素 |
diff --git a/examples/docs/zh-CN/popover.md b/examples/docs/zh-CN/popover.md
index 2cc0a2c1959..ff9dbd85345 100644
--- a/examples/docs/zh-CN/popover.md
+++ b/examples/docs/zh-CN/popover.md
@@ -1,100 +1,3 @@
-<script>
-  export default {
-    data() {
-      return {
-        visible: false,
-        visible2: false,
-        gridData: [{
-          date: '2016-05-02',
-          name: '王小虎',
-          address: '上海市普陀区金沙江路 1518 弄'
-        }, {
-          date: '2016-05-04',
-          name: '王小虎',
-          address: '上海市普陀区金沙江路 1518 弄'
-        }, {
-          date: '2016-05-01',
-          name: '王小虎',
-          address: '上海市普陀区金沙江路 1518 弄'
-        }, {
-          date: '2016-05-03',
-          name: '王小虎',
-          address: '上海市普陀区金沙江路 1518 弄'
-        }],
-        gridData2: [{
-          date: '2016-05-02',
-          name: '王小虎',
-          address: '上海市普陀区金沙江路 1518 弄',
-        }, {
-          date: '2016-05-04',
-          name: '王小虎',
-          address: '上海市普陀区金沙江路 1518 弄',
-          $info: true
-        }, {
-          date: '2016-05-01',
-          name: '王小虎',
-          address: '上海市普陀区金沙江路 1518 弄',
-        }, {
-          date: '2016-05-03',
-          name: '王小虎',
-          address: '上海市普陀区金沙江路 1518 弄',
-          $positive: true
-        }],
-        gridData3: [{
-          tag: '家',
-          date: '2016-05-03',
-          name: '王小虎',
-          address: '上海市普陀区金沙江路 1518 弄'
-        }, {
-          tag: '公司',
-          date: '2016-05-02',
-          name: '王小虎',
-          address: '上海市普陀区金沙江路 1518 弄'
-        }, {
-          tag: '公司',
-          date: '2016-05-04',
-          name: '王小虎',
-          address: '上海市普陀区金沙江路 1518 弄'
-        }, {
-          tag: '家',
-          date: '2016-05-01',
-          name: '王小虎',
-          address: '上海市普陀区金沙江路 1518 弄'
-        }, {
-          tag: '公司',
-          date: '2016-05-08',
-          name: '王小虎',
-          address: '上海市普陀区金沙江路 1518 弄'
-        }, {
-          tag: '家',
-          date: '2016-05-06',
-          name: '王小虎',
-          address: '上海市普陀区金沙江路 1518 弄'
-        }, {
-          tag: '公司',
-          date: '2016-05-07',
-          name: '王小虎',
-          address: '上海市普陀区金沙江路 1518 弄'
-        }]
-      };
-    }
-  };
-</script>
-
-<style>
-  .demo-box.demo-popover {
-    .el-popover + .el-popover {
-      margin-left: 10px;
-    }
-    .el-input {
-      width: 360px;
-    }
-    .el-button {
-      margin-left: 10px;
-    }
-  }
-</style>
-
 ## Popover 弹出框
 
 ### 基础用法
@@ -209,11 +112,11 @@ Popover 的属性与 Tooltip 很类似，它们都是基于`Vue-popper`开发的
 <el-popover
   placement="top"
   width="160"
-  v-model="visible2">
+  v-model="visible">
   <p>这是一段内容这是一段内容确定删除吗？</p>
   <div style="text-align: right; margin: 0">
-    <el-button size="mini" type="text" @click="visible2 = false">取消</el-button>
-    <el-button type="primary" size="mini" @click="visible2 = false">确定</el-button>
+    <el-button size="mini" type="text" @click="visible = false">取消</el-button>
+    <el-button type="primary" size="mini" @click="visible = false">确定</el-button>
   </div>
   <el-button slot="reference">删除</el-button>
 </el-popover>
@@ -222,7 +125,7 @@ Popover 的属性与 Tooltip 很类似，它们都是基于`Vue-popper`开发的
   export default {
     data() {
       return {
-        visible2: false,
+        visible: false,
       };
     }
   }
@@ -239,13 +142,15 @@ Popover 的属性与 Tooltip 很类似，它们都是基于`Vue-popper`开发的
 |  width        |  宽度  | String, Number            | — | 最小宽度 150px |
 |  placement        |  出现位置  | String | top/top-start/top-end/bottom/bottom-start/bottom-end/left/left-start/left-end/right/right-start/right-end |  bottom |
 |  disabled       |  Popover 是否可用  | Boolean           | — |  false |
-|  value(v-model)        |  状态是否可见  | Boolean           | — |  false |
+|  value / v-model        |  状态是否可见  | Boolean           | — |  false |
 |  offset        |  出现位置的偏移量  | Number           | — |  0 |
 |  transition     |  定义渐变动画      | String             | — | fade-in-linear |
 |  visible-arrow   |  是否显示 Tooltip 箭头，更多参数可见[Vue-popper](https://github.com/element-component/vue-popper) | Boolean | — | true |
 |  popper-options        | [popper.js](https://popper.js.org/documentation.html) 的参数 | Object            | 参考 [popper.js](https://popper.js.org/documentation.html) 文档 | `{ boundariesElement: 'body', gpuAcceleration: false }` |
 | popper-class | 为 popper 添加类名 | String | — | — |
 | open-delay | 触发方式为 hover 时的显示延迟，单位为毫秒 | Number | — | — |
+| close-delay | 触发方式为 hover 时的隐藏延迟，单位为毫秒 | number | — | 200 |
+| tabindex   | Popover 组件的 [tabindex](https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/tabindex) | number | — | 0 |
 
 ### Slot
 | 参数 | 说明 |
diff --git a/examples/docs/zh-CN/progress.md b/examples/docs/zh-CN/progress.md
index d00aca7c37c..de9c79be592 100644
--- a/examples/docs/zh-CN/progress.md
+++ b/examples/docs/zh-CN/progress.md
@@ -1,69 +1,177 @@
-<style>
-  .demo-box.demo-progress {
-    .el-progress--line {
-      margin-bottom: 15px;
-      width: 350px;
-    }
-    .el-progress--circle {
-      margin-right: 15px;
-    }
-  }
-</style>
-
 ## Progress 进度条
 
 用于展示操作进度，告知用户当前状态和预期。
 
-### 线形进度条 — 百分比外显
+### 线形进度条
 
-:::demo Progress 组件设置`percentage`属性即可，表示进度条对应的百分比，**必填**，必须在 0-100。
+:::demo Progress 组件设置`percentage`属性即可，表示进度条对应的百分比，**必填**，必须在 0-100。通过 `format` 属性来指定进度条文字内容。
 
 ```html
-<el-progress :percentage="0"></el-progress>
-<el-progress :percentage="70"></el-progress>
-<el-progress :percentage="80" color="#8e71c7"></el-progress>
+<el-progress :percentage="50"></el-progress>
+<el-progress :percentage="100" :format="format"></el-progress>
 <el-progress :percentage="100" status="success"></el-progress>
+<el-progress :percentage="100" status="warning"></el-progress>
 <el-progress :percentage="50" status="exception"></el-progress>
+
+<script>
+  export default {
+    methods: {
+      format(percentage) {
+        return percentage === 100 ? '满' : `${percentage}%`;
+      }
+    }
+  };
+</script>
 ```
 :::
 
-### 线形进度条 — 百分比内显
+### 百分比内显
 
 百分比不占用额外控件，适用于文件上传等场景。
 
 :::demo Progress 组件可通过 `stroke-width` 属性更改进度条的高度，并可通过 `text-inside` 属性来将进度条描述置于进度条内部。
 
 ```html
-<el-progress :text-inside="true" :stroke-width="18" :percentage="0"></el-progress>
-<el-progress :text-inside="true" :stroke-width="18" :percentage="70"></el-progress>
-<el-progress :text-inside="true" :stroke-width="18" :percentage="80" color="rgba(142, 113, 199, 0.7)"></el-progress>
-<el-progress :text-inside="true" :stroke-width="18" :percentage="100" status="success"></el-progress>
-<el-progress :text-inside="true" :stroke-width="18" :percentage="50" status="exception"></el-progress>
+<el-progress :text-inside="true" :stroke-width="26" :percentage="70"></el-progress>
+<el-progress :text-inside="true" :stroke-width="24" :percentage="100" status="success"></el-progress>
+<el-progress :text-inside="true" :stroke-width="22" :percentage="80" status="warning"></el-progress>
+<el-progress :text-inside="true" :stroke-width="20" :percentage="50" status="exception"></el-progress>
+```
+:::
+
+### 自定义颜色
+
+可以通过 `color` 设置进度条的颜色，`color` 可以接受颜色字符串，函数和数组。
+
+:::demo
+
+```html
+<el-progress :percentage="percentage" :color="customColor"></el-progress>
+
+<el-progress :percentage="percentage" :color="customColorMethod"></el-progress>
+
+<el-progress :percentage="percentage" :color="customColors"></el-progress>
+<div>
+  <el-button-group>
+    <el-button icon="el-icon-minus" @click="decrease"></el-button>
+    <el-button icon="el-icon-plus" @click="increase"></el-button>
+  </el-button-group>
+</div>
+
+<script>
+  export default {
+    data() {
+      return {
+        percentage: 20,
+        customColor: '#2460e0',
+        customColors: [
+          {color: '#FF4D4F', percentage: 20},
+          {color: '#F5A623', percentage: 40},
+          {color: '#5cb87a', percentage: 60},
+          {color: '#1989fa', percentage: 80},
+          {color: '#6f7ad3', percentage: 100}
+        ]
+      };
+    },
+    methods: {
+      customColorMethod(percentage) {
+        if (percentage < 30) {
+          return '#A7A8AD';
+        } else if (percentage < 70) {
+          return '#F5A623';
+        } else {
+          return '#2FD163';
+        }
+      },
+      increase() {
+        this.percentage += 10;
+        if (this.percentage > 100) {
+          this.percentage = 100;
+        }
+      },
+      decrease() {
+        this.percentage -= 10;
+        if (this.percentage < 0) {
+          this.percentage = 0;
+        }
+      }
+    }
+  }
+</script>
 ```
 :::
 
 ### 环形进度条
 
-:::demo Progress 组件可通过 `type` 属性来指定使用环形进度条，在环形进度条中，还可以通过 `width` 属性来设置其大小。
+Progress 组件可通过 `type` 属性来指定使用环形进度条，在环形进度条中，还可以通过 `width` 属性来设置其大小。
+
+:::demo
 
 ```html
 <el-progress type="circle" :percentage="0"></el-progress>
 <el-progress type="circle" :percentage="25"></el-progress>
-<el-progress type="circle" :percentage="80" color="#8e71c7"></el-progress>
 <el-progress type="circle" :percentage="100" status="success"></el-progress>
+<el-progress type="circle" :percentage="70" status="warning"></el-progress>
 <el-progress type="circle" :percentage="50" status="exception"></el-progress>
-<el-progress type="circle" :percentage="100" status="text">Done</el-progress>
+```
+:::
+
+### 仪表盘形进度条
+
+:::demo 通过 `type` 属性来指定使用仪表盘形进度条。
+
+```html
+
+<el-progress type="dashboard" :percentage="percentage" :color="colors"></el-progress>
+<div>
+  <el-button-group>
+    <el-button icon="el-icon-minus" @click="decrease"></el-button>
+    <el-button icon="el-icon-plus" @click="increase"></el-button>
+  </el-button-group>
+</div>
+
+<script>
+  export default {
+    data() {
+      return {
+        percentage: 10,
+        colors: [
+          {color: '#FF4D4F', percentage: 20},
+          {color: '#F5A623', percentage: 40},
+          {color: '#5cb87a', percentage: 60},
+          {color: '#1989fa', percentage: 80},
+          {color: '#6f7ad3', percentage: 100}
+        ]
+      };
+    },
+    methods: {
+      increase() {
+        this.percentage += 10;
+        if (this.percentage > 100) {
+          this.percentage = 100;
+        }
+      },
+      decrease() {
+        this.percentage -= 10;
+        if (this.percentage < 0) {
+          this.percentage = 0;
+        }
+      }
+    }
+  }
+</script>
 ```
 :::
 
 ### Attributes
 | 参数          | 说明            | 类型            | 可选值                 | 默认值   |
 |-------------  |---------------- |---------------- |---------------------- |-------- |
-| **percentage** | **百分比（必填）**   | number          |     0-100          |     0    |
-| type          | 进度条类型           | string         | line/circle | line |
+| **percentage** | **百分比（必填）**   | number         |     0-100          |     0    |
+| type          | 进度条类型           | string         | line/circle/dashboard | line |
 | stroke-width  | 进度条的宽度，单位 px | number          | — | 6 |
 | text-inside  | 进度条显示文字内置在进度条内（只在 type=line 时可用） | boolean | — | false |
-| status  | 进度条当前状态 | string | success/exception/text | — |
-| color  | 进度条背景色（会覆盖 status 状态颜色） | string | — | — |
-| width  | 环形进度条画布宽度（只在 type=circle 时可用） | number |  | 126 |
+| status  | 进度条当前状态 | string | success/exception/warning | — |
+| color  | 进度条背景色（会覆盖 status 状态颜色） | string/function/array | — | '' |
+| width  | 环形进度条画布宽度（只在 type 为 circle 或 dashboard 时可用） | number |  | 126 |
 | show-text  | 是否显示进度条文字内容 | boolean | — | true |
+| stroke-linecap  | circle/dashboard 类型路径两端的形状 | string | butt/round/square | round |
\ No newline at end of file
diff --git a/examples/docs/zh-CN/quickstart.md b/examples/docs/zh-CN/quickstart.md
index 5177315e269..0e80b679b11 100644
--- a/examples/docs/zh-CN/quickstart.md
+++ b/examples/docs/zh-CN/quickstart.md
@@ -2,7 +2,7 @@
 
 本节将介绍如何在项目中使用 Element。
 
-### 使用 vue-cli@3
+[使用nuxt + element 框架](https://github.com/levy9527/nuxt-element-dashboard)
 
 我们为新版的 vue-cli 准备了相应的 [Element 插件](https://github.com/ElementUI/vue-cli-plugin-element)，你可以用它们快速地搭建一个基于 Element 的项目。
 
@@ -22,8 +22,8 @@
 
 ```javascript
 import Vue from 'vue';
-import ElementUI from 'element-ui';
-import 'element-ui/lib/theme-chalk/index.css';
+import ElementUI from '@femessage/element-ui';
+import '@femessage/element-ui/lib/theme-chalk/index.css';
 import App from './App.vue';
 
 Vue.use(ElementUI);
@@ -55,7 +55,7 @@ npm install babel-plugin-component -D
     [
       "component",
       {
-        "libraryName": "element-ui",
+        "libraryName": "@femessage/element-ui",
         "styleLibraryName": "theme-chalk"
       }
     ]
@@ -67,7 +67,7 @@ npm install babel-plugin-component -D
 
 ```javascript
 import Vue from 'vue';
-import { Button, Select } from 'element-ui';
+import { Button, Select } from '@femessage/element-ui';
 import App from './App.vue';
 
 Vue.component(Button.name, Button);
@@ -83,7 +83,7 @@ new Vue({
 });
 ```
 
-完整组件列表和引入方式（完整组件列表以 [components.json](https://github.com/ElemeFE/element/blob/master/components.json) 为准）
+完整组件列表和引入方式（完整组件列表以 [components.json](https://github.com/femessage/element/blob/master/components.json) 为准）
 
 ```javascript
 import Vue from 'vue';
@@ -134,6 +134,7 @@ import {
   Col,
   Upload,
   Progress,
+  Spinner,
   Badge,
   Card,
   Rate,
@@ -151,11 +152,20 @@ import {
   Aside,
   Main,
   Footer,
+  Timeline,
+  TimelineItem,
+  Link,
+  Divider,
+  Image,
+  Calendar,
+  Backtop,
+  PageHeader,
+  CascaderPanel,
   Loading,
   MessageBox,
   Message,
   Notification
-} from 'element-ui';
+} from '@femessage/element-ui';
 
 Vue.use(Pagination);
 Vue.use(Dialog);
@@ -203,6 +213,7 @@ Vue.use(Row);
 Vue.use(Col);
 Vue.use(Upload);
 Vue.use(Progress);
+Vue.use(Spinner);
 Vue.use(Badge);
 Vue.use(Card);
 Vue.use(Rate);
@@ -220,6 +231,15 @@ Vue.use(Header);
 Vue.use(Aside);
 Vue.use(Main);
 Vue.use(Footer);
+Vue.use(Timeline);
+Vue.use(TimelineItem);
+Vue.use(Link);
+Vue.use(Divider);
+Vue.use(Image);
+Vue.use(Calendar);
+Vue.use(Backtop);
+Vue.use(PageHeader);
+Vue.use(CascaderPanel);
 
 Vue.use(Loading.directive);
 
@@ -240,7 +260,7 @@ Vue.prototype.$message = Message;
 
 ```js
 import Vue from 'vue';
-import Element from 'element-ui';
+import Element from '@femessage/element-ui';
 Vue.use(Element, { size: 'small', zIndex: 3000 });
 ```
 
@@ -248,7 +268,7 @@ Vue.use(Element, { size: 'small', zIndex: 3000 });
 
 ```js
 import Vue from 'vue';
-import { Button } from 'element-ui';
+import { Button } from '@femessage/element-ui';
 
 Vue.prototype.$ELEMENT = { size: 'small', zIndex: 3000 };
 Vue.use(Button);
diff --git a/examples/docs/zh-CN/radio-img-button.md b/examples/docs/zh-CN/radio-img-button.md
new file mode 100644
index 00000000000..d471b4d30d6
--- /dev/null
+++ b/examples/docs/zh-CN/radio-img-button.md
@@ -0,0 +1,234 @@
+## RadioImgButton 带有图片的 radio
+
+### 基本用法
+
+除了能够使用普通 radio 的所有属性之外，我们还给单选按钮添加了具有图片的样式，使用该组件需要设置组件的图片地址 imgUrl 和宽度 width，按钮默认宽度为 160px
+
+:::demo
+
+```html
+<template>
+  <div style="display: flex">
+    <el-radio-img-button
+      v-model="value"
+      imgUrl="http://img5.imgtn.bdimg.com/it/u=3987907653,720009510&fm=26&gp=0.jpg"
+      label="1"
+      text="radio-img-button"
+      vertical
+      description="我是radio1"
+    >
+    </el-radio-img-button>
+    <el-radio-img-button
+      v-model="value"
+      imgUrl="http://img5.imgtn.bdimg.com/it/u=3987907653,720009510&fm=26&gp=0.jpg"
+      label="2"
+      text="radio-img-button"
+      vertical
+      description="真是一段很长很长很真是一段很长很长很长的文字真是一段很长很长很长的文字真是一段很长很长很长的文字真是一段很长很长很长的文字真是一段很长很长很长的文字真是一段很长很长很长的文字真是一段很长很长很长的文字长的文字"
+    >
+    </el-radio-img-button>
+  </div>
+</template>
+<script>
+  export default {
+    data() {
+      return {
+        value: "2"
+      };
+    }
+  };
+</script>
+```
+
+:::
+
+### 单选框组
+
+适用于在多个互斥的选项中选择的场景
+
+:::demo 结合`el-radio-group`元素和子元素`el-radio-img-button`可以实现单选组，在`el-radio-group`中绑定`v-model`，在`el-radio-img-button`中设置好`label`即可，无需再给每一个`el-radio-img-button`绑定变量，另外，还提供了`change`事件来响应变化，它会传入一个参数`value`。
+
+```html
+<template>
+  <el-radio-group v-model="value" style="display: flex">
+    <el-radio-img-button
+      vertical
+      imgUrl="http://img5.imgtn.bdimg.com/it/u=3987907653,720009510&fm=26&gp=0.jpg"
+      label="1"
+      text="radio-img-button"
+      ref="radio1"
+      description="备选项"
+    >
+    </el-radio-img-button>
+    <el-radio-img-button
+      vertical
+      imgUrl="http://img5.imgtn.bdimg.com/it/u=3987907653,720009510&fm=26&gp=0.jpg"
+      label="2"
+      text="radio-img-button"
+      ref="radio2"
+      description="备选项"
+    >
+    </el-radio-img-button>
+    <el-radio-img-button
+      vertical
+      imgUrl="http://img5.imgtn.bdimg.com/it/u=3987907653,720009510&fm=26&gp=0.jpg"
+      label="3"
+      text="radio-img-button"
+      ref="radio3"
+      description="备选项"
+    >
+    </el-radio-img-button>
+  </el-radio-group>
+</template>
+
+<script>
+  export default {
+    data() {
+      return {
+        value: "3"
+      };
+    }
+  };
+</script>
+```
+
+:::
+
+### 禁用状态
+
+单选框不可用的状态。
+
+:::demo 只要在`el-radio-img-button`元素中设置`disabled`属性即可，它接受一个`Boolean`，`true`为禁用。
+
+```html
+<template>
+  <div style="display: flex">
+    <el-radio-img-button
+      v-model="value"
+      disabled
+      imgUrl="http://img5.imgtn.bdimg.com/it/u=3987907653,720009510&fm=26&gp=0.jpg"
+      label="1"
+      text="radio-img-button"
+      vertical
+      description="我是radio1"
+    ></el-radio-img-button>
+    <el-radio-img-button
+      v-model="value"
+      imgUrl="http://img5.imgtn.bdimg.com/it/u=3987907653,720009510&fm=26&gp=0.jpg"
+      label="2"
+      disabled
+      text="radio-img-button"
+      vertical
+      description="真是一段很长很长很真是一段很长很长很长的文字真是一段很长很长很长的文字真是一段很长很长很长的文字真是一段很长很长很长的文字真是一段很长很长很长的文字真是一段很长很长很长的文字真是一段很长很长很长的文字长的文字"
+    ></el-radio-img-button>
+  </div>
+</template>
+
+<script>
+  export default {
+    data() {
+      return {
+        value: "2"
+      };
+    }
+  };
+</script>
+```
+
+:::
+
+### 横向布局
+
+当设置为横向布局，记住一定要设置 width
+
+:::demo 默认只有两种布局，设置为横向布局时只需要去掉 vertical 属性或者设置其值为 false 即可
+
+```html
+<template>
+  <div style="display: flex">
+    <el-radio-img-button
+      v-model="value"
+      imgUrl="http://img5.imgtn.bdimg.com/it/u=3987907653,720009510&fm=26&gp=0.jpg"
+      label="1"
+      width="586px"
+      text="radio-img-button"
+      description="此处风景优美，令人身心向往；但是却带一股寒冷之气，恰恰还是那些市井之地，才充满生活气息；不知是知了还是蛐蛐的叫声，使得夜晚更加的宁静安逸"
+    ></el-radio-img-button>
+    <el-radio-img-button
+      v-model="value"
+      imgUrl="http://img5.imgtn.bdimg.com/it/u=3987907653,720009510&fm=26&gp=0.jpg"
+      label="2"
+      width="586px"
+      text="radio-img-button"
+      description="此处风景优美，令人身心向往；但是却带一股寒冷之气，恰恰还是那些市井之地，才充满生活气息；不知是知了还是蛐蛐的叫声，使得夜晚更加的宁静安逸"
+    ></el-radio-img-button>
+  </div>
+</template>
+<script>
+  export default {
+    data() {
+      return {
+        value: "2"
+      };
+    }
+  };
+</script>
+```
+
+:::
+
+### 按钮文字与描述
+
+与 radio 不同的是，如果我们需要给按钮添加文字和描述，则用 text 和 description
+
+:::demo 值得注意的是，description 只有在横向布局时才有效
+
+```html
+<template>
+  <div style="display: flex">
+    <el-radio-img-button
+      v-model="value"
+      imgUrl="http://img5.imgtn.bdimg.com/it/u=3987907653,720009510&fm=26&gp=0.jpg"
+      label="1"
+      width="310px"
+      text="按钮文字"
+      description="按钮描述"
+    ></el-radio-img-button>
+    <el-radio-img-button
+      v-model="value"
+      imgUrl="http://img5.imgtn.bdimg.com/it/u=3987907653,720009510&fm=26&gp=0.jpg"
+      label="2"
+      width="310px"
+      text="按钮文字"
+      description="按钮描述"
+    ></el-radio-img-button>
+  </div>
+</template>
+<script>
+  export default {
+    data() {
+      return {
+        value: "2"
+      };
+    }
+  };
+</script>
+```
+
+:::
+
+### Radio-img-button Attributes
+
+| 参数            | 说明           | 类型                      | 可选值 | 默认值      |
+| --------------- | -------------- | ------------------------- | ------ | ----------- |
+| value / v-model | 绑定值         | string / number / boolean | —      | —           |
+| disabled        | 是否禁用       | boolean                   | —      | false       |
+| name            | 原生 name 属性 | string                    | —      | —           |
+| width           | 按钮宽度       | string / number           | —      | 160px / 160 |
+| imgUrl          | 图片地址       | string                    | —      | —           |
+| text            | 按钮文字       | string                    | —      | —           |
+| description     | 按钮描述       | string                    | —      | —           |
+
+:::tip
+说明：其他属性和方法请参考 `Radio`组件
+:::
\ No newline at end of file
diff --git a/examples/docs/zh-CN/radio.md b/examples/docs/zh-CN/radio.md
index 3ae648e3ad6..618b87ef321 100644
--- a/examples/docs/zh-CN/radio.md
+++ b/examples/docs/zh-CN/radio.md
@@ -1,23 +1,3 @@
-<script>
-  module.exports = {
-    data() {
-      return {
-        radio: '1',
-        radio1: '选中且禁用',
-        radio2: 3,
-        radio3: '上海',
-        radio4: '上海',
-        radio5: '上海',
-        radio6: '上海',
-        radio7: '1',
-        radio8: '1',
-        radio9: '1',
-        radio10: '1'
-      };
-    }
-  };
-</script>
-
 ## Radio 单选框
 
 在一组备选项中进行单选
@@ -53,15 +33,15 @@
 :::demo 只要在`el-radio`元素中设置`disabled`属性即可，它接受一个`Boolean`，`true`为禁用。
 ```html
 <template>
-  <el-radio disabled v-model="radio1" label="禁用">备选项</el-radio>
-  <el-radio disabled v-model="radio1" label="选中且禁用">备选项</el-radio>
+  <el-radio disabled v-model="radio" label="禁用">备选项</el-radio>
+  <el-radio disabled v-model="radio" label="选中且禁用">备选项</el-radio>
 </template>
 
 <script>
   export default {
     data () {
       return {
-        radio1: '选中且禁用'
+        radio: '选中且禁用'
       };
     }
   }
@@ -77,7 +57,7 @@
 
 ```html
 <template>
-  <el-radio-group v-model="radio2">
+  <el-radio-group v-model="radio">
     <el-radio :label="3">备选项</el-radio>
     <el-radio :label="6">备选项</el-radio>
     <el-radio :label="9">备选项</el-radio>
@@ -88,7 +68,7 @@
   export default {
     data () {
       return {
-        radio2: 3
+        radio: 3
       };
     }
   }
@@ -104,7 +84,7 @@
 ```html
 <template>
   <div>
-    <el-radio-group v-model="radio3">
+    <el-radio-group v-model="radio1">
       <el-radio-button label="上海"></el-radio-button>
       <el-radio-button label="北京"></el-radio-button>
       <el-radio-button label="广州"></el-radio-button>
@@ -112,7 +92,7 @@
     </el-radio-group>
   </div>
   <div style="margin-top: 20px">
-    <el-radio-group v-model="radio4" size="medium">
+    <el-radio-group v-model="radio2" size="medium">
       <el-radio-button label="上海" ></el-radio-button>
       <el-radio-button label="北京"></el-radio-button>
       <el-radio-button label="广州"></el-radio-button>
@@ -120,7 +100,7 @@
     </el-radio-group>
   </div>
   <div style="margin-top: 20px">
-    <el-radio-group v-model="radio5" size="small">
+    <el-radio-group v-model="radio3" size="small">
       <el-radio-button label="上海"></el-radio-button>
       <el-radio-button label="北京" disabled ></el-radio-button>
       <el-radio-button label="广州"></el-radio-button>
@@ -128,7 +108,7 @@
     </el-radio-group>
   </div>
   <div style="margin-top: 20px">
-    <el-radio-group v-model="radio6" disabled size="mini">
+    <el-radio-group v-model="radio4" disabled size="mini">
       <el-radio-button label="上海"></el-radio-button>
       <el-radio-button label="北京"></el-radio-button>
       <el-radio-button label="广州"></el-radio-button>
@@ -141,10 +121,10 @@
   export default {
     data () {
       return {
+        radio1: '上海',
+        radio2: '上海',
         radio3: '上海',
-        radio4: '上海',
-        radio5: '上海',
-        radio6: '上海'
+        radio4: '上海'
       };
     }
   }
@@ -158,21 +138,21 @@
 ```html
 <template>
   <div>
-    <el-radio v-model="radio7" label="1" border>备选项1</el-radio>
-    <el-radio v-model="radio7" label="2" border>备选项2</el-radio>
+    <el-radio v-model="radio1" label="1" border>备选项1</el-radio>
+    <el-radio v-model="radio1" label="2" border>备选项2</el-radio>
   </div>
   <div style="margin-top: 20px">
-    <el-radio v-model="radio8" label="1" border size="medium">备选项1</el-radio>
-    <el-radio v-model="radio8" label="2" border size="medium">备选项2</el-radio>
+    <el-radio v-model="radio2" label="1" border size="medium">备选项1</el-radio>
+    <el-radio v-model="radio2" label="2" border size="medium">备选项2</el-radio>
   </div>
   <div style="margin-top: 20px">
-    <el-radio-group v-model="radio9" size="small">
+    <el-radio-group v-model="radio3" size="small">
       <el-radio label="1" border>备选项1</el-radio>
       <el-radio label="2" border disabled>备选项2</el-radio>
     </el-radio-group>
   </div>
   <div style="margin-top: 20px">
-    <el-radio-group v-model="radio10" size="mini" disabled>
+    <el-radio-group v-model="radio4" size="mini" disabled>
       <el-radio label="1" border>备选项1</el-radio>
       <el-radio label="2" border>备选项2</el-radio>
     </el-radio-group>
@@ -183,10 +163,10 @@
   export default {
     data () {
       return {
-        radio7: '1',
-        radio8: '1',
-        radio9: '1',
-        radio10: '1'
+        radio1: '1',
+        radio2: '1',
+        radio3: '1',
+        radio4: '1'
       };
     }
   }
@@ -197,6 +177,7 @@
 ### Radio Attributes
 | 参数      | 说明    | 类型      | 可选值       | 默认值   |
 |---------- |-------- |---------- |-------------  |-------- |
+| value / v-model | 绑定值 | string / number / boolean | — | — |
 | label     | Radio 的 value   | string / number / boolean    |       —        |      —   |
 | disabled  | 是否禁用    | boolean   | — | false   |
 | border  | 是否显示边框  | boolean   | — | false   |
@@ -211,10 +192,11 @@
 ### Radio-group Attributes
 | 参数      | 说明    | 类型      | 可选值       | 默认值   |
 |---------- |-------- |---------- |-------------  |-------- |
+| value / v-model | 绑定值 | string / number / boolean | — | — |
 | size     | 单选框组尺寸，仅对按钮形式的 Radio 或带有边框的 Radio 有效   | string  | medium / small / mini |    —     |
 | disabled  | 是否禁用    | boolean   | — | false   |
 | text-color  | 按钮形式的 Radio 激活时的文本颜色    | string   | — | #ffffff   |
-| fill  | 按钮形式的 Radio 激活时的填充色和边框色    | string   | — | #409EFF   |
+| fill  | 按钮形式的 Radio 激活时的填充色和边框色    | string   | — | #2460e0   |
 
 ### Radio-group Events
 | 事件名称 | 说明 | 回调参数 |
diff --git a/examples/docs/zh-CN/rate.md b/examples/docs/zh-CN/rate.md
index 6e54a63e6ac..471459da239 100644
--- a/examples/docs/zh-CN/rate.md
+++ b/examples/docs/zh-CN/rate.md
@@ -1,51 +1,11 @@
-<script>
-  export default {
-    data() {
-      return {
-        value1: null,
-        value2: null,
-        value3: null,
-        value4: null,
-        value5: 3.7
-      };
-    },
-    mounted() {
-      this.$nextTick(() => {
-        let firstDemo = document.querySelector('.source');
-        firstDemo.style.padding = '0';
-      });
-    }
-  }
-</script>
-<style>
-  .demo-rate .block {
-    padding: 30px 0;
-    text-align: center;
-    border-right: solid 1px #EFF2F6;
-    display: inline-block;
-    width: 50%;
-    box-sizing: border-box;
-    &:last-child {
-      border-right: none;
-    }
-  }
-
-  .demo-rate .demonstration {
-    display: block;
-    color: #8492a6;
-    font-size: 14px;
-    margin-bottom: 20px;
-  }
-</style>
-
 ## Rate 评分
 
 评分组件
 
 ### 基础用法
 
-:::demo 评分被分为三个等级，可以利用颜色对分数及情感倾向进行分级（默认情况下不区分颜色）。三个等级所对应的颜色用过`colors`属性设置，而它们对应的两个阈值则通过 `low-threshold` 和 `high-threshold` 设定。
-``` html
+:::demo 评分默认被分为三个等级，可以利用颜色数组对分数及情感倾向进行分级（默认情况下不区分颜色）。三个等级所对应的颜色用`colors`属性设置，而它们对应的两个阈值则通过 `low-threshold` 和 `high-threshold` 设定。你也可以通过传入颜色对象来自定义分段，键名为分段的界限值，键值为对应的颜色。
+```html
 <div class="block">
   <span class="demonstration">默认不区分颜色</span>
   <el-rate v-model="value1"></el-rate>
@@ -54,7 +14,7 @@
   <span class="demonstration">区分颜色</span>
   <el-rate
     v-model="value2"
-    :colors="['#99A9BF', '#F7BA2A', '#FF9900']">
+    :colors="colors">
   </el-rate>
 </div>
 
@@ -63,7 +23,8 @@
     data() {
       return {
         value1: null,
-        value2: null
+        value2: null,
+        colors: ['#99A9BF', '#F7BA2A', '#FF9900']  // 等同于 { 2: '#99A9BF', 4: { value: '#F7BA2A', excluded: true }, 5: '#FF9900' }
       }
     }
   }
@@ -76,9 +37,9 @@
 用辅助文字直接地表达对应分数
 
 :::demo 为组件设置 `show-text` 属性会在右侧显示辅助文字。通过设置 `texts` 可以为每一个分值指定对应的辅助文字。`texts` 为一个数组，长度应等于最大值 `max`。
-``` html
+```html
 <el-rate
-  v-model="value3"
+  v-model="value"
   show-text>
 </el-rate>
 
@@ -86,7 +47,7 @@
   export default {
     data() {
       return {
-        value3: null
+        value: null
       }
     }
   }
@@ -98,11 +59,11 @@
 
 当有多层评价时，可以用不同类型的 icon 区分评分层级
 
-:::demo 设置`icon-classes`属性可以自定义对应 3 个不同分段的图标。本例还使用`void-icon-class`指定了未选中时的图标类名。
-``` html
+:::demo 设置`icon-classes`属性可以自定义不同分段的图标。若传入数组，共有 3 个元素，为 3 个分段所对应的类名；若传入对象，可自定义分段，键名为分段的界限值，键值为对应的类名。本例还使用`void-icon-class`指定了未选中时的图标类名。
+```html
 <el-rate
-  v-model="value4"
-  :icon-classes="['icon-rate-face-1', 'icon-rate-face-2', 'icon-rate-face-3']"
+  v-model="value"
+  :icon-classes="iconClasses"
   void-icon-class="icon-rate-face-off"
   :colors="['#99A9BF', '#F7BA2A', '#FF9900']">
 </el-rate>
@@ -111,7 +72,8 @@
   export default {
     data() {
       return {
-        value4: null
+        value: null,
+        iconClasses: ['icon-rate-face-1', 'icon-rate-face-2', 'icon-rate-face-3'] // 等同于 { 2: 'icon-rate-face-1', 4: { value: 'icon-rate-face-2', excluded: true }, 5: 'icon-rate-face-3' }
       }
     }
   }
@@ -124,9 +86,9 @@
 只读的评分用来展示分数，允许出现半星
 
 :::demo 为组件设置 `disabled` 属性表示组件为只读，支持小数分值。此时若设置 `show-score`，则会在右侧显示目前的分值。可以提供 `score-template` 作为显示模板，模板为一个包含了 `{value}` 的字符串，`{value}` 会被解析为分值。
-``` html
+```html
 <el-rate
-  v-model="value5"
+  v-model="value"
   disabled
   show-score
   text-color="#ff9900"
@@ -137,7 +99,7 @@
   export default {
     data() {
       return {
-        value5: 3.7
+        value: 3.7
       }
     }
   }
@@ -148,15 +110,16 @@
 ### Attributes
 | 参数      | 说明    | 类型      | 可选值       | 默认值   |
 |---------- |-------- |---------- |-------------  |-------- |
+| value / v-model | 绑定值 | number | — | 0 |
 | max | 最大分值 | number | — | 5 |
 | disabled | 是否为只读 | boolean | — | false |
 | allow-half | 是否允许半选 | boolean | — | false |
 | low-threshold | 低分和中等分数的界限值，值本身被划分在低分中 | number | — | 2 |
 | high-threshold | 高分和中等分数的界限值，值本身被划分在高分中 | number | — | 4 |
-| colors | icon 的颜色数组，共有 3 个元素，为 3 个分段所对应的颜色 | array | — | ['#F7BA2A', '#F7BA2A', '#F7BA2A'] |
+| colors | icon 的颜色。若传入数组，共有 3 个元素，为 3 个分段所对应的颜色；若传入对象，可自定义分段，键名为分段的界限值，键值为对应的颜色 | array/object | — | ['#F7BA2A', '#F7BA2A', '#F7BA2A'] |
 | void-color | 未选中 icon 的颜色 | string | — | #C6D1DE |
 | disabled-void-color | 只读时未选中 icon 的颜色 | string | — | #EFF2F7 |
-| icon-classes | icon 的类名数组，共有 3 个元素，为 3 个分段所对应的类名 | array | — | ['el-icon-star-on', 'el-icon-star-on','el-icon-star-on'] |
+| icon-classes | icon 的类名。若传入数组，共有 3 个元素，为 3 个分段所对应的类名；若传入对象，可自定义分段，键名为分段的界限值，键值为对应的类名 | array/object | — | ['el-icon-star-on', 'el-icon-star-on','el-icon-star-on'] |
 | void-icon-class | 未选中 icon 的类名 | string | — | el-icon-star-off |
 | disabled-void-icon-class | 只读时未选中 icon 的类名 | string | — | el-icon-star-on |
 | show-text | 是否显示辅助文字，若为真，则会从 texts 数组中选取当前分数对应的文字内容 | boolean | — | false |
diff --git a/examples/docs/zh-CN/select.md b/examples/docs/zh-CN/select.md
index 4b858df112d..0a13ccae9aa 100644
--- a/examples/docs/zh-CN/select.md
+++ b/examples/docs/zh-CN/select.md
@@ -1,138 +1,3 @@
-<script>
-  export default {
-    data() {
-      return {
-        list: null,
-        options: [{
-          value: '选项1',
-          label: '黄金糕'
-        }, {
-          value: '选项2',
-          label: '双皮奶'
-        }, {
-          value: '选项3',
-          label: '蚵仔煎'
-        }, {
-          value: '选项4',
-          label: '龙须面'
-        }, {
-          value: '选项5',
-          label: '北京烤鸭'
-        }],
-        options2: [{
-          value: '选项1',
-          label: '黄金糕'
-        }, {
-          value: '选项2',
-          label: '双皮奶',
-          disabled: true
-        }, {
-          value: '选项3',
-          label: '蚵仔煎'
-        }, {
-          value: '选项4',
-          label: '龙须面'
-        }, {
-          value: '选项5',
-          label: '北京烤鸭'
-        }],
-        options3: [{
-          label: '热门城市',
-          options: [{
-            value: 'Shanghai',
-            label: '上海'
-          }, {
-            value: 'Beijing',
-            label: '北京'
-          }]
-        }, {
-          label: '城市名',
-          options: [{
-            value: 'Chengdu',
-            label: '成都'
-          }, {
-            value: 'Shenzhen',
-            label: '深圳'
-          }, {
-            value: 'Guangzhou',
-            label: '广州'
-          }, {
-            value: 'Dalian',
-            label: '大连'
-          }]
-        }],
-        options4: [],
-        options5: [{
-          value: 'HTML',
-          label: 'HTML'
-        }, {
-          value: 'CSS',
-          label: 'CSS'
-        }, {
-          value: 'JavaScript',
-          label: 'JavaScript'
-        }],
-        cities: [{
-          value: 'Beijing',
-          label: '北京'
-        }, {
-          value: 'Shanghai',
-          label: '上海'
-        }, {
-          value: 'Nanjing',
-          label: '南京'
-        }, {
-          value: 'Chengdu',
-          label: '成都'
-        }, {
-          value: 'Shenzhen',
-          label: '深圳'
-        }, {
-          value: 'Guangzhou',
-          label: '广州'
-        }],
-        value: '',
-        value2: '',
-        value3: '',
-        value4: '',
-        value5: [],
-        value6: '',
-        value7: '',
-        value8: '',
-        value9: '',
-        value10: [],
-        value11: [],
-        loading: false,
-        states: ["Alabama", "Alaska", "Arizona", "Arkansas", "California", "Colorado", "Connecticut", "Delaware", "Florida", "Georgia", "Hawaii", "Idaho", "Illinois", "Indiana", "Iowa", "Kansas", "Kentucky", "Louisiana", "Maine", "Maryland", "Massachusetts", "Michigan", "Minnesota", "Mississippi", "Missouri", "Montana", "Nebraska", "Nevada", "New Hampshire", "New Jersey", "New Mexico", "New York", "North Carolina", "North Dakota", "Ohio", "Oklahoma", "Oregon", "Pennsylvania", "Rhode Island", "South Carolina", "South Dakota", "Tennessee", "Texas", "Utah", "Vermont", "Virginia", "Washington", "West Virginia", "Wisconsin", "Wyoming"]
-      };
-    },
-    
-    mounted() {
-      this.list = this.states.map(item => { return { value: item, label: item }; });
-    },
-
-    methods: {
-      remoteMethod(query) {
-        if (query !== '') {
-          this.loading = true;
-          setTimeout(() => {
-            this.loading = false;
-            this.options4 = this.list.filter(item => item.label.toLowerCase().indexOf(query.toLowerCase()) > -1);
-          }, 200);
-        } else {
-          this.options4 = [];
-        }
-      }
-    }
-  };
-</script>
-
-<style>
-  .demo-select .el-select {
-    width: 240px;
-  }
-</style>
-
 ## Select 选择器
 
 当选项过多时，使用下拉菜单展示并选择内容。
@@ -186,9 +51,9 @@
 :::demo 在`el-option`中，设定`disabled`值为 true，即可禁用该选项
 ```html
 <template>
-  <el-select v-model="value2" placeholder="请选择">
+  <el-select v-model="value" placeholder="请选择">
     <el-option
-      v-for="item in options2"
+      v-for="item in options"
       :key="item.value"
       :label="item.label"
       :value="item.value"
@@ -201,7 +66,7 @@
   export default {
     data() {
       return {
-        options2: [{
+        options: [{
           value: '选项1',
           label: '黄金糕'
         }, {
@@ -218,7 +83,7 @@
           value: '选项5',
           label: '北京烤鸭'
         }],
-        value2: ''
+        value: ''
       }
     }
   }
@@ -233,7 +98,7 @@
 :::demo 为`el-select`设置`disabled`属性，则整个选择器不可用
 ```html
 <template>
-  <el-select v-model="value3" disabled placeholder="请选择">
+  <el-select v-model="value" disabled placeholder="请选择">
     <el-option
       v-for="item in options"
       :key="item.value"
@@ -263,7 +128,7 @@
           value: '选项5',
           label: '北京烤鸭'
         }],
-        value3: ''
+        value: ''
       }
     }
   }
@@ -278,7 +143,7 @@
 :::demo 为`el-select`设置`clearable`属性，则可将选择器清空。需要注意的是，`clearable`属性仅适用于单选。
 ```html
 <template>
-  <el-select v-model="value4" clearable placeholder="请选择">
+  <el-select v-model="value" clearable placeholder="请选择">
     <el-option
       v-for="item in options"
       :key="item.value"
@@ -308,7 +173,7 @@
           value: '选项5',
           label: '北京烤鸭'
         }],
-        value4: ''
+        value: ''
       }
     }
   }
@@ -323,7 +188,7 @@
 :::demo 为`el-select`设置`multiple`属性即可启用多选，此时`v-model`的值为当前选中值所组成的数组。默认情况下选中值会以 Tag 的形式展现，你也可以设置`collapse-tags`属性将它们合并为一段文字。
 ```html
 <template>
-  <el-select v-model="value5" multiple placeholder="请选择">
+  <el-select v-model="value1" multiple placeholder="请选择">
     <el-option
       v-for="item in options"
       :key="item.value"
@@ -333,7 +198,7 @@
   </el-select>
 
   <el-select
-    v-model="value11"
+    v-model="value2"
     multiple
     collapse-tags
     style="margin-left: 20px;"
@@ -367,8 +232,8 @@
           value: '选项5',
           label: '北京烤鸭'
         }],
-        value5: [],
-        value11: []
+        value1: [],
+        value2: []
       }
     }
   }
@@ -383,7 +248,7 @@
 :::demo 将自定义的 HTML 模板插入`el-option`的 slot 中即可。
 ```html
 <template>
-  <el-select v-model="value6" placeholder="请选择">
+  <el-select v-model="value" placeholder="请选择">
     <el-option
       v-for="item in cities"
       :key="item.value"
@@ -418,7 +283,7 @@
           value: 'Guangzhou',
           label: '广州'
         }],
-        value6: ''
+        value: ''
       }
     }
   }
@@ -433,9 +298,9 @@
 :::demo 使用`el-option-group`对备选项进行分组，它的`label`属性为分组名
 ```html
 <template>
-  <el-select v-model="value7" placeholder="请选择">
+  <el-select v-model="value" placeholder="请选择">
     <el-option-group
-      v-for="group in options3"
+      v-for="group in options"
       :key="group.label"
       :label="group.label">
       <el-option
@@ -452,7 +317,7 @@
   export default {
     data() {
       return {
-        options3: [{
+        options: [{
           label: '热门城市',
           options: [{
             value: 'Shanghai',
@@ -477,7 +342,7 @@
             label: '大连'
           }]
         }],
-        value7: ''
+        value: ''
       }
     }
   }
@@ -492,7 +357,7 @@
 :::demo 为`el-select`添加`filterable`属性即可启用搜索功能。默认情况下，Select 会找出所有`label`属性包含输入值的选项。如果希望使用其他的搜索逻辑，可以通过传入一个`filter-method`来实现。`filter-method`为一个`Function`，它会在输入值发生变化时调用，参数为当前输入值。
 ```html
 <template>
-  <el-select v-model="value8" filterable placeholder="请选择">
+  <el-select v-model="value" filterable placeholder="请选择">
     <el-option
       v-for="item in options"
       :key="item.value"
@@ -522,7 +387,7 @@
           value: '选项5',
           label: '北京烤鸭'
         }],
-        value8: ''
+        value: ''
       }
     }
   }
@@ -537,7 +402,7 @@
 ```html
 <template>
   <el-select
-    v-model="value9"
+    v-model="value"
     multiple
     filterable
     remote
@@ -546,7 +411,7 @@
     :remote-method="remoteMethod"
     :loading="loading">
     <el-option
-      v-for="item in options4"
+      v-for="item in options"
       :key="item.value"
       :label="item.label"
       :value="item.value">
@@ -558,8 +423,8 @@
   export default {
     data() {
       return {
-        options4: [],
-        value9: [],
+        options: [],
+        value: [],
         list: [],
         loading: false,
         states: ["Alabama", "Alaska", "Arizona",
@@ -583,7 +448,7 @@
     },
     mounted() {
       this.list = this.states.map(item => {
-        return { value: item, label: item };
+        return { value: `value:${item}`, label: `label:${item}` };
       });
     },
     methods: {
@@ -592,13 +457,13 @@
           this.loading = true;
           setTimeout(() => {
             this.loading = false;
-            this.options4 = this.list.filter(item => {
+            this.options = this.list.filter(item => {
               return item.label.toLowerCase()
                 .indexOf(query.toLowerCase()) > -1;
             });
           }, 200);
         } else {
-          this.options4 = [];
+          this.options = [];
         }
       }
     }
@@ -613,14 +478,14 @@
 ```html
 <template>
   <el-select
-    v-model="value10"
+    v-model="value"
     multiple
     filterable
     allow-create
     default-first-option
     placeholder="请选择文章标签">
     <el-option
-      v-for="item in options5"
+      v-for="item in options"
       :key="item.value"
       :label="item.label"
       :value="item.value">
@@ -632,7 +497,7 @@
   export default {
     data() {
       return {
-        options5: [{
+        options: [{
           value: 'HTML',
           label: 'HTML'
         }, {
@@ -642,7 +507,7 @@
           value: 'JavaScript',
           label: 'JavaScript'
         }],
-        value10: []
+        value: []
       }
     }
   }
@@ -650,6 +515,65 @@
 ```
 :::
 
+### 扩展插槽
+
+选项列表底部扩展内容
+:::demo 扩展插槽可以插入自己需要的功能按钮。
+```html
+<template>
+  <div>
+    <el-select v-model="value" placeholder="请选择">
+      <el-option
+        v-for="item in cities"
+        :key="item.value"
+        :label="item.label"
+        :value="item.value">
+      </el-option>
+      <div slot="extra">
+        <el-button type="text" @click="handleRefresh" style="width: 100%;">
+          刷新城市列表
+        </el-button>
+      </div>
+    </el-select>
+  </div>
+</template>
+
+<script>
+  export default {
+    data() {
+      return {
+        cities: [{
+          value: 'Beijing',
+          label: '北京'
+        }, {
+          value: 'Shanghai',
+          label: '上海'
+        }, {
+          value: 'Nanjing',
+          label: '南京'
+        }, {
+          value: 'Chengdu',
+          label: '成都'
+        }, {
+          value: 'Shenzhen',
+          label: '深圳'
+        }, {
+          value: 'Guangzhou',
+          label: '广州'
+        }],
+        value: ''
+      };
+    },
+    methods: {
+      handleRefresh() {
+        // 重新请求获取 cities 数据
+      },
+    }
+  }
+</script>
+```
+:::
+
 :::tip
 如果 Select 的绑定值为对象类型，请务必指定 `value-key` 作为它的唯一性标识。
 :::
@@ -657,26 +581,27 @@
 ### Select Attributes
 | 参数      | 说明          | 类型      | 可选值                           | 默认值  |
 |---------- |-------------- |---------- |--------------------------------  |-------- |
+| value / v-model | 绑定值 | boolean / string / number | — | — |
 | multiple | 是否多选 | boolean | — | false |
 | disabled | 是否禁用 | boolean | — | false |
 | value-key | 作为 value 唯一标识的键名，绑定值为对象类型时必填 | string | — | value |
 | size | 输入框尺寸 | string | medium/small/mini | — |
-| clearable | 是否可以清空选项 | boolean | — | false |
+| clearable | 是否可以清空选项 | boolean | — | true |
 | collapse-tags | 多选时是否将选中值按文字的形式展示 | boolean | — | false |
 | multiple-limit | 多选时用户最多可以选择的项目数，为 0 则不限制 | number | — | 0 |
 | name | select input 的 name 属性 | string | — | — |
 | autocomplete | select input 的 autocomplete 属性 | string | — | off |
 | auto-complete | 下个主版本弃用 | string | — | off |
 | placeholder | 占位符 | string | — | 请选择 |
-| filterable | 是否可搜索 | boolean | — | false |
+| filterable | 是否可搜索 | boolean | — | true |
 | allow-create | 是否允许用户创建新条目，需配合 `filterable` 使用 | boolean | — | false |
 | filter-method | 自定义搜索方法 | function | — | — |
 | remote | 是否为远程搜索 | boolean | — | false |
 | remote-method | 远程搜索方法 | function | — | — |
 | loading | 是否正在从远程获取数据 | boolean | — | false |
 | loading-text | 远程加载时显示的文字 | string | — | 加载中 |
-| no-match-text | 搜索条件无匹配时显示的文字 | string | — | 无匹配数据 |
-| no-data-text | 选项为空时显示的文字 | string | — | 无数据 |
+| no-match-text | 搜索条件无匹配时显示的文字，也可以使用`slot="empty"`设置 | string | — | 无匹配数据 |
+| no-data-text | 选项为空时显示的文字，也可以使用`slot="empty"`设置 | string | — | 无数据 |
 | popper-class | Select 下拉框的类名 | string | — | — |
 | reserve-keyword | 多选且可搜索时，是否在选中一个选项后保留当前的搜索关键词 | boolean | — | false |
 | default-first-option | 在输入框按下回车，选择第一个匹配项。需配合 `filterable` 或 `remote` 使用 | boolean | - | false |
@@ -698,6 +623,8 @@
 |---------|---------|
 |    —    | Option 组件列表 |
 | prefix  | Select 组件头部内容 |
+| empty | 无选项时的列表 |
+| extra | 选项列表底部扩展内容 |
 
 ### Option Group Attributes
 | 参数      | 说明          | 类型      | 可选值                           | 默认值  |
diff --git a/examples/docs/zh-CN/skeleton.md b/examples/docs/zh-CN/skeleton.md
new file mode 100644
index 00000000000..4600dc07637
--- /dev/null
+++ b/examples/docs/zh-CN/skeleton.md
@@ -0,0 +1,120 @@
+## Skeleton 骨架屏
+
+### 基本
+
+最简单的占位效果。
+
+
+:::demo
+```html
+<template>
+  <el-skeleton />
+</template>
+```
+:::
+
+### 复杂的组合
+
+更复杂的组合。
+
+:::demo 
+```html
+<template>
+  <el-skeleton avatar :paragraph="{rows: 4}" />
+</template>
+```
+:::
+
+
+### 动画效果
+
+显示动画效果。
+
+:::demo
+```html
+<template>
+  <el-skeleton avatar active />
+</template>
+```
+:::
+
+### 包含子组件
+
+加载占位图包含子组件。
+
+:::demo
+```html
+<template>
+  <div class="article">
+    <el-skeleton :loading="loading">
+      <div>
+        <h4>Element UI, a design language</h4>
+        <p>
+          We supply a series of design principles, practical patterns and high quality design
+          resources (Sketch and Axure), to help people create their product prototypes beautifully
+          and efficiently.
+        </p>
+      </div>
+    </el-skeleton>
+    <el-button @click="showSkeleton" :disabled="loading">
+      Show Skeleton
+    </el-button>
+  </div>
+</template>
+<script>
+  export default {
+    data() {
+      return {
+        loading: false,
+      };
+    },
+    methods: {
+      showSkeleton() {
+        this.loading = true;
+        setTimeout(() => {
+          this.loading = false;
+        }, 3000);
+      },
+    },
+  };
+</script>
+<style>
+  .article h4 {
+    margin-bottom: 16px;
+  }
+  .article button {
+    margin-top: 16px;
+  }
+</style>
+```
+:::
+
+### Skeleton
+
+| 属性 | 说明 | 类型 | 默认值 |
+| --- | --- | --- | --- |
+| active | 是否展示动画效果 | boolean | false |
+| avatar | 是否显示头像占位图 | boolean \| SkeletonAvatarProps(详情看下方说明) | false |
+| loading | 为 `true` 时，显示占位图。反之则直接展示子组件 | boolean | - |
+| paragraph | 是否显示段落占位图 | boolean \|SkeletonParagraphProps(详情看下方说明) | true |
+| title | 是否显示标题占位图 | boolean \| SkeletonTitleProps(详情看下方说明) | true |
+
+### SkeletonAvatarProps
+
+| 属性  | 说明                 | 类型                                | 默认值 |
+| ----- | -------------------- | ----------------------------------- | ------ |
+| size  | 设置头像占位图的大小 | Enum{ 'large', 'small', 'default' } | -      |
+| shape | 指定头像的形状       | Enum{ 'circle', 'square' }          | -      |
+
+### SkeletonTitleProps
+
+| 属性  | 说明                 | 类型             | 默认值 |
+| ----- | -------------------- | ---------------- | ------ |
+| width | 设置标题占位图的宽度 | number \| string | -      |
+
+### SkeletonParagraphProps
+
+| 属性 | 说明 | 类型 | 默认值 |
+| --- | --- | --- | --- |
+| rows | 设置段落占位图的行数 | number | - |
+| width | 设置段落占位图的宽度，若为数组时则为对应的每行宽度，反之则是最后一行的宽度 | number \| string \| Array<number \| string> | - |
\ No newline at end of file
diff --git a/examples/docs/zh-CN/slider.md b/examples/docs/zh-CN/slider.md
index 1245cd291d8..1ba4e8fd7af 100644
--- a/examples/docs/zh-CN/slider.md
+++ b/examples/docs/zh-CN/slider.md
@@ -1,54 +1,3 @@
-<script>
-  export default {
-    data() {
-      return {
-        value1: 0,
-        value2: 50,
-        value3: 36,
-        value4: 48,
-        value5: 42,
-        value6: 0,
-        value7: 0,
-        value8: 0,
-        value9: [4, 8],
-        value10: 0
-      };
-    },
-    methods: {
-      formatTooltip(val) {
-        return val / 100;
-      }
-    }
-  }
-</script>
-
-<style>
-  .demo-box.demo-slider .source {
-    padding: 0;
-  }
-
-  .demo-box.demo-slider .block {
-    padding: 30px 24px;
-    overflow: hidden;
-    border-bottom: solid 1px #EFF2F6;
-    &:last-child {
-      border-bottom: none;
-    }
-  }
-
-  .demo-box.demo-slider .demonstration {
-    font-size: 14px;
-    color: #8492a6;
-    line-height: 44px;
-  }
-
-  .demo-box.demo-slider .demonstration + .el-slider {
-    float: right;
-    width: 70%;
-    margin-right: 20px;
-  }
-</style>
-
 ## Slider 滑块
 
 通过拖动滑块在一个固定区间内进行选择
@@ -113,14 +62,14 @@
   <div class="block">
     <span class="demonstration">不显示间断点</span>
     <el-slider
-      v-model="value6"
+      v-model="value1"
       :step="10">
     </el-slider>
   </div>
   <div class="block">
     <span class="demonstration">显示间断点</span>
     <el-slider
-      v-model="value7"
+      v-model="value2"
       :step="10"
       show-stops>
     </el-slider>
@@ -131,8 +80,8 @@
   export default {
     data() {
       return {
-        value6: 0,
-        value7: 0
+        value1: 0,
+        value2: 0
       }
     }
   }
@@ -149,7 +98,7 @@
 <template>
   <div class="block">
     <el-slider
-      v-model="value8"
+      v-model="value"
       show-input>
     </el-slider>
   </div>
@@ -159,7 +108,7 @@
   export default {
     data() {
       return {
-        value8: 0
+        value: 0
       }
     }
   }
@@ -176,7 +125,7 @@
 <template>
   <div class="block">
     <el-slider
-      v-model="value9"
+      v-model="value"
       range
       show-stops
       :max="10">
@@ -188,7 +137,7 @@
   export default {
     data() {
       return {
-        value9: [4, 8]
+        value: [4, 8]
       }
     }
   }
@@ -203,7 +152,7 @@
 <template>
   <div class="block">
     <el-slider
-      v-model="value10"
+      v-model="value"
       vertical
       height="200px">
     </el-slider>
@@ -214,7 +163,44 @@
   export default {
     data() {
       return {
-        value10: 0
+        value: 0
+      }
+    }
+  }
+</script>
+```
+:::
+
+### 展示标记
+
+:::demo 设置 `marks` 属性可以展示标记
+```html
+<template>
+  <div class="block">
+    <el-slider
+      v-model="value"
+      range
+      :marks="marks">
+    </el-slider>
+  </div>
+</template>
+
+<script>
+  export default {
+    data() {
+      return {
+        value: [30, 60],
+        marks: {
+          0: '0°C',
+          8: '8°C',
+          37: '37°C',
+          50: {
+            style: {
+              color: '#1989FA'
+            },
+            label: this.$createElement('strong', '50%')
+          }
+        }
       }
     }
   }
@@ -225,6 +211,7 @@
 ### Attributes
 | 参数      | 说明          | 类型      | 可选值                           | 默认值  |
 |---------- |-------------- |---------- |--------------------------------  |-------- |
+| value / v-model | 绑定值 | number | — | 0 |
 | min | 最小值 | number | — | 0 |
 | max | 最大值 | number | — | 100 |
 | disabled | 是否禁用 | boolean | — | false |
@@ -241,8 +228,10 @@
 | label | 屏幕阅读器标签 | string | — | — |
 | debounce | 输入时的去抖延迟，毫秒，仅在`show-input`等于true时有效 | number | — | 300 |
 | tooltip-class | tooltip 的自定义类名 | string | — | — |
+| marks | 标记， key 的类型必须为 number 且取值在闭区间 `[min, max]` 内，每个标记可以单独设置样式 | object | — | — |
 
 ### Events
 | 事件名称      | 说明    | 回调参数      |
 |---------- |-------- |---------- |
 | change | 值改变时触发（使用鼠标拖曳时，只在松开鼠标后触发） | 改变后的值 |
+| input | 数据改变时触发（使用鼠标拖曳时，活动过程实时触发） | 改变后的值 |
diff --git a/examples/docs/zh-CN/status-steps.md b/examples/docs/zh-CN/status-steps.md
new file mode 100644
index 00000000000..f298ad636bc
--- /dev/null
+++ b/examples/docs/zh-CN/status-steps.md
@@ -0,0 +1,75 @@
+## StatusSteps组件
+
+### 基础用法
+
+:::demo
+```html
+
+<el-steps :active="active">
+  <el-status-steps title="步骤 1"></el-status-steps>
+  <el-status-steps title="步骤 2"></el-status-steps>
+  <el-status-steps title="步骤 3"></el-status-steps>
+</el-steps>
+
+<el-button style="margin-top: 12px;" @click="next()">下一步</el-button>
+
+<script>
+  export default {
+    data() {
+      return {
+        active: 1
+      };
+    },
+
+    methods: {
+      next() {
+        if (this.active++ > 2) this.active = 0;
+      }
+    }
+  }
+</script>
+```
+:::
+
+### 带数字的简约风格步骤条
+设置 `simple` 可应用简洁风格，该条件下 `align-center` / `description` / `direction` / `space` 都将失效。
+设置了`simple`之后，设置`number`属性可以显示带数字带步骤条
+
+:::demo
+```html
+
+<el-steps :active="active" finish-status="success" simple style="margin-top: 20px">
+  <el-status-steps title="步骤 1" number></el-status-steps>
+  <el-status-steps title="步骤 2" number></el-status-steps>
+  <el-status-steps title="步骤 3" number></el-status-steps>
+</el-steps>
+<el-button style="margin-top: 12px;" @click="next()">下一步</el-button>
+
+<script>
+  export default {
+    data() {
+      return {
+        active: 1
+      };
+    },
+
+    methods: {
+      next() {
+        if (this.active++ > 2) this.active = 0;
+      }
+    }
+  }
+</script>
+```
+:::
+
+### Steps Attributes
+
+| 参数      | 说明    | 类型      | 可选值       | 默认值   |
+|---------- |-------- |---------- |-------------  |-------- |
+| simple | 是否应用简洁风格 | boolean | - | false |
+| number | 是否应用简洁风格的number模式，需要跟simple一起使用 | boolean | - | false |
+
+:::tip
+说明：其他属性和方法请参考 `Steps`组件
+:::
diff --git a/examples/docs/zh-CN/steps.md b/examples/docs/zh-CN/steps.md
index 2117d85497f..533053c2b92 100644
--- a/examples/docs/zh-CN/steps.md
+++ b/examples/docs/zh-CN/steps.md
@@ -1,19 +1,3 @@
-<script>
-  export default {
-    data() {
-      return {
-        active: 0
-      };
-    },
-
-    methods: {
-      next() {
-        if (this.active++ > 2) this.active = 0;
-      }
-    }
-  }
-</script>
-
 ## Steps 步骤条
 引导用户按照流程完成任务的分步导航条，可根据实际应用场景设定步骤，步骤不得少于 2 步。
 
diff --git a/examples/docs/zh-CN/switch-enhance.md b/examples/docs/zh-CN/switch-enhance.md
new file mode 100644
index 00000000000..a602808207e
--- /dev/null
+++ b/examples/docs/zh-CN/switch-enhance.md
@@ -0,0 +1,104 @@
+## SwitchEnhance 开关增强
+
+表示两种相互对立的状态间的切换，多用于触发「开/关」，与 `el-switch` 用法一致。
+
+### 基本用法
+
+:::demo 绑定`v-model`到一个`Boolean`类型的变量。可以使用`active-color`属性与`inactive-color`属性来设置开关的背景色。
+
+```html
+<el-switch-enhance v-model="value" active-text="开" inactive-text="关" />
+
+<script>
+  export default {
+    data() {
+      return {
+        value: true
+      }
+    }
+  };
+</script>
+```
+:::
+
+### 文字在切换内部
+
+:::demo 使用 `inline-text` 属性将提示文字放到组件内部
+
+```html
+<el-switch-enhance
+  v-model="value1"
+  :width="77"
+  inline-text
+  active-text="按月付费"
+  inactive-text="按年付费"
+/>
+<script>
+export default {
+  data() {
+    return {
+      value1: '按月付费'
+    }
+  }
+}
+</script>
+:::
+
+
+### 方形切换
+
+:::demo 使用 `square` 属性减小组件圆角
+
+```html
+<el-switch-enhance
+  v-model="value2"
+  square
+  inline-text
+  :width="67"
+  active-text="已启用"
+  inactive-text="已关闭"
+/>
+
+<script>
+export default {
+  data() {
+    return {
+      value2: true
+    }
+  }
+}
+</script>
+```
+:::
+
+### Attributes
+
+| 参数      | 说明    | 类型      | 可选值       | 默认值   |
+|---------- |-------- |---------- |-------------  |-------- |
+| value / v-model | 绑定值 | boolean / string / number | — | — |
+| disabled  | 是否禁用    | boolean   | — | false   |
+| width  | switch 的宽度（像素）    | number   | — | 40 |
+| active-icon-class  | switch 打开时所显示图标的类名，设置此项会忽略 `active-text`    | string   | — | — |
+| inactive-icon-class  | switch 关闭时所显示图标的类名，设置此项会忽略 `inactive-text`    | string   | — | — |
+| active-text  | switch 打开时的文字描述    | string   | — | — |
+| inactive-text  | switch 关闭时的文字描述    | string   | — | — |
+| active-value  | switch 打开时的值    | boolean / string / number | — | true |
+| inactive-value  | switch 关闭时的值    | boolean / string / number | — | false |
+| active-color  | switch 打开时的背景色    | string   | — | #2460e0 |
+| inactive-color  | switch 关闭时的背景色    | string   | — | #C0CCDA |
+| name            | switch 对应的 name 属性    | string   | — | — |
+| validate-event  | 改变 switch 状态时是否触发表单的校验     | boolean   | - | true |
+| inline-text  | 提示文字是否在 switch 内部     | boolean   | - | false |
+| square  | 方形的 switch      | boolean   | - | false |
+
+### Events
+
+| 事件名称      | 说明    | 回调参数      |
+|---------- |-------- |---------- |
+| change  | switch 状态发生变化时的回调函数    | 新状态的值 |
+
+### Methods
+
+| 方法名 | 说明 | 参数 |
+| ---- | ---- | ---- |
+| focus | 使 Switch 获取焦点 | - |
diff --git a/examples/docs/zh-CN/switch.md b/examples/docs/zh-CN/switch.md
index 08fbec58f26..37de450cc4f 100644
--- a/examples/docs/zh-CN/switch.md
+++ b/examples/docs/zh-CN/switch.md
@@ -1,27 +1,3 @@
-<style>
-  .demo-box.demo-switch {
-    .el-switch {
-      margin: 20px 20px 20px 0;
-    }
-  }
-</style>
-
-<script>
-  export default {
-    data() {
-      return {
-        value1: true,
-        value2: true,
-        value3: true,
-        value4: true,
-        value5: '100',
-        value6: true,
-        value7: false
-      }
-    }
-  };
-</script>
-
 ## Switch 开关
 
 表示两种相互对立的状态间的切换，多用于触发「开/关」。
@@ -32,7 +8,7 @@
 
 ```html
 <el-switch
-  v-model="value2"
+  v-model="value"
   active-color="#13ce66"
   inactive-color="#ff4949">
 </el-switch>
@@ -41,8 +17,7 @@
   export default {
     data() {
       return {
-        value1: true,
-        value2: true
+        value: true
       }
     }
   };
@@ -56,13 +31,13 @@
 
 ```html
 <el-switch
-  v-model="value3"
+  v-model="value1"
   active-text="按月付费"
   inactive-text="按年付费">
 </el-switch>
 <el-switch
   style="display: block"
-  v-model="value4"
+  v-model="value2"
   active-color="#13ce66"
   inactive-color="#ff4949"
   active-text="按月付费"
@@ -73,8 +48,8 @@
   export default {
     data() {
       return {
-        value3: true,
-        value4: true
+        value1: true,
+        value2: true
       }
     }
   };
@@ -87,9 +62,9 @@
 :::demo 设置`active-value`和`inactive-value`属性，接受`Boolean`, `String`或`Number`类型的值。
 
 ```html
-<el-tooltip :content="'Switch value: ' + value5" placement="top">
+<el-tooltip :content="'Switch value: ' + value" placement="top">
   <el-switch
-    v-model="value5"
+    v-model="value"
     active-color="#13ce66"
     inactive-color="#ff4949"
     active-value="100"
@@ -101,7 +76,7 @@
   export default {
     data() {
       return {
-        value5: '100'
+        value: '100'
       }
     }
   };
@@ -117,19 +92,19 @@
 
 ```html
 <el-switch
-  v-model="value6"
+  v-model="value1"
   disabled>
 </el-switch>
 <el-switch
-  v-model="value7"
+  v-model="value2"
   disabled>
 </el-switch>
 <script>
   export default {
     data() {
       return {
-        value6: true,
-        value7: false
+        value1: true,
+        value2: false
       }
     }
   };
@@ -142,6 +117,7 @@
 
 | 参数      | 说明    | 类型      | 可选值       | 默认值   |
 |---------- |-------- |---------- |-------------  |-------- |
+| value / v-model | 绑定值 | boolean / string / number | — | — |
 | disabled  | 是否禁用    | boolean   | — | false   |
 | width  | switch 的宽度（像素）    | number   | — | 40 |
 | active-icon-class  | switch 打开时所显示图标的类名，设置此项会忽略 `active-text`    | string   | — | — |
@@ -150,9 +126,10 @@
 | inactive-text  | switch 关闭时的文字描述    | string   | — | — |
 | active-value  | switch 打开时的值    | boolean / string / number | — | true |
 | inactive-value  | switch 关闭时的值    | boolean / string / number | — | false |
-| active-color  | switch 打开时的背景色    | string   | — | #409EFF |
+| active-color  | switch 打开时的背景色    | string   | — | #2460e0 |
 | inactive-color  | switch 关闭时的背景色    | string   | — | #C0CCDA |
-| name  | switch 对应的 name 属性    | string   | — | — |
+| name            | switch 对应的 name 属性    | string   | — | — |
+| validate-event  | 改变 switch 状态时是否触发表单的校验     | boolean   | - | true |
 
 ### Events
 | 事件名称      | 说明    | 回调参数      |
diff --git a/examples/docs/zh-CN/table.md b/examples/docs/zh-CN/table.md
index 002351dab42..6014ce5c78e 100644
--- a/examples/docs/zh-CN/table.md
+++ b/examples/docs/zh-CN/table.md
@@ -1,410 +1,3 @@
-<script>
-  export default {
-    data() {
-      return {
-        tableData: [{
-          date: '2016-05-03',
-          name: '王小虎',
-          province: '上海',
-          city: '普陀区',
-          address: '上海市普陀区金沙江路 1518 弄',
-          zip: 200333,
-          tag: '家'
-        }, {
-          date: '2016-05-02',
-          name: '王小虎',
-          province: '上海',
-          city: '普陀区',
-          address: '上海市普陀区金沙江路 1518 弄',
-          zip: 200333,
-          tag: '公司'
-        }, {
-          date: '2016-05-04',
-          name: '王小虎',
-          province: '上海',
-          city: '普陀区',
-          address: '上海市普陀区金沙江路 1518 弄',
-          zip: 200333,
-          tag: '家'
-        }, {
-          date: '2016-05-01',
-          name: '王小虎',
-          province: '上海',
-          city: '普陀区',
-          address: '上海市普陀区金沙江路 1518 弄',
-          zip: 200333,
-          tag: '公司'
-        }],
-        tableData2: [{
-          date: '2016-05-02',
-          name: '王小虎',
-          address: '上海市普陀区金沙江路 1518 弄',
-        }, {
-          date: '2016-05-04',
-          name: '王小虎',
-          address: '上海市普陀区金沙江路 1518 弄',
-          $info: true
-        }, {
-          date: '2016-05-01',
-          name: '王小虎',
-          address: '上海市普陀区金沙江路 1518 弄',
-        }, {
-          date: '2016-05-03',
-          name: '王小虎',
-          address: '上海市普陀区金沙江路 1518 弄',
-          $positive: true
-        }],
-        tableData3: [{
-          date: '2016-05-03',
-          name: '王小虎',
-          province: '上海',
-          city: '普陀区',
-          address: '上海市普陀区金沙江路 1518 弄',
-          detailAddress: '金沙江路 1518 弄',
-          zip: 200333
-        }, {
-          date: '2016-05-02',
-          name: '王小虎',
-          province: '上海',
-          city: '普陀区',
-          address: '上海市普陀区金沙江路 1518 弄',
-          detailAddress: '金沙江路 1518 弄',
-          zip: 200333
-        }, {
-          date: '2016-05-04',
-          name: '王小虎',
-          province: '上海',
-          city: '普陀区',
-          address: '上海市普陀区金沙江路 1518 弄',
-          detailAddress: '金沙江路 1518 弄',
-          zip: 200333
-        }, {
-          date: '2016-05-01',
-          name: '王小虎',
-          province: '上海',
-          city: '普陀区',
-          address: '上海市普陀区金沙江路 1518 弄',
-          detailAddress: '金沙江路 1518 弄',
-          zip: 200333
-        }, {
-          date: '2016-05-08',
-          name: '王小虎',
-          province: '上海',
-          city: '普陀区',
-          address: '上海市普陀区金沙江路 1518 弄',
-          detailAddress: '金沙江路 1518 弄',
-          zip: 200333
-        }, {
-          date: '2016-05-06',
-          name: '王小虎',
-          province: '上海',
-          city: '普陀区',
-          address: '上海市普陀区金沙江路 1518 弄',
-          detailAddress: '金沙江路 1518 弄',
-          zip: 200333
-        }, {
-          date: '2016-05-07',
-          name: '王小虎',
-          province: '上海',
-          city: '普陀区',
-          address: '上海市普陀区金沙江路 1518 弄',
-          detailAddress: '金沙江路 1518 弄',
-          zip: 200333
-        }],
-        tableData4: [{
-          date: '2016-05-03',
-          name: '王小虎',
-          province: '上海',
-          city: '普陀区',
-          address: '上海市普陀区金沙江路 1518 弄',
-          zip: 200333
-        }, {
-          date: '2016-05-02',
-          name: '王小虎',
-          province: '上海',
-          city: '普陀区',
-          address: '上海市普陀区金沙江路 1518 弄',
-          zip: 200333
-        }, {
-          date: '2016-05-04',
-          name: '王小虎',
-          province: '上海',
-          city: '普陀区',
-          address: '上海市普陀区金沙江路 1518 弄',
-          zip: 200333
-        }, {
-          date: '2016-05-01',
-          name: '王小虎',
-          province: '上海',
-          city: '普陀区',
-          address: '上海市普陀区金沙江路 1518 弄',
-          zip: 200333
-        }, {
-          date: '2016-05-08',
-          name: '王小虎',
-          province: '上海',
-          city: '普陀区',
-          address: '上海市普陀区金沙江路 1518 弄',
-          zip: 200333
-        }, {
-          date: '2016-05-06',
-          name: '王小虎',
-          province: '上海',
-          city: '普陀区',
-          address: '上海市普陀区金沙江路 1518 弄',
-          zip: 200333
-        }, {
-          date: '2016-05-07',
-          name: '王小虎',
-          province: '上海',
-          city: '普陀区',
-          address: '上海市普陀区金沙江路 1518 弄',
-          zip: 200333
-        }],
-        tableData5: [{
-          id: '12987122',
-          name: '好滋好味鸡蛋仔',
-          category: '江浙小吃、小吃零食',
-          desc: '荷兰优质淡奶，奶香浓而不腻',
-          address: '上海市普陀区真北路',
-          shop: '王小虎夫妻店',
-          shopId: '10333'
-        }, {
-          id: '12987123',
-          name: '好滋好味鸡蛋仔',
-          category: '江浙小吃、小吃零食',
-          desc: '荷兰优质淡奶，奶香浓而不腻',
-          address: '上海市普陀区真北路',
-          shop: '王小虎夫妻店',
-          shopId: '10333'
-        }, {
-          id: '12987125',
-          name: '好滋好味鸡蛋仔',
-          category: '江浙小吃、小吃零食',
-          desc: '荷兰优质淡奶，奶香浓而不腻',
-          address: '上海市普陀区真北路',
-          shop: '王小虎夫妻店',
-          shopId: '10333'
-        }, {
-          id: '12987126',
-          name: '好滋好味鸡蛋仔',
-          category: '江浙小吃、小吃零食',
-          desc: '荷兰优质淡奶，奶香浓而不腻',
-          address: '上海市普陀区真北路',
-          shop: '王小虎夫妻店',
-          shopId: '10333'
-        }],
-        tableData6: [{
-          id: '12987122',
-          name: '王小虎',
-          amount1: '234',
-          amount2: '3.2',
-          amount3: 10
-        }, {
-          id: '12987123',
-          name: '王小虎',
-          amount1: '165',
-          amount2: '4.43',
-          amount3: 12
-        }, {
-          id: '12987124',
-          name: '王小虎',
-          amount1: '324',
-          amount2: '1.9',
-          amount3: 9
-        }, {
-          id: '12987125',
-          name: '王小虎',
-          amount1: '621',
-          amount2: '2.2',
-          amount3: 17
-        }, {
-          id: '12987126',
-          name: '王小虎',
-          amount1: '539',
-          amount2: '4.1',
-          amount3: 15
-        }],
-        tableData7: [{
-          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 弄'
-        }],
-        currentRow: null,
-        multipleSelection: [],
-        search: '',
-      };
-    },
-
-    methods: {
-      getSummaries(param) {
-        const { columns, data } = param;
-        const sums = [];
-        columns.forEach((column, index) => {
-          if (index === 0) {
-            sums[index] = '总价';
-            return;
-          }
-          const values = data.map(item => Number(item[column.property]));
-          if (!values.every(value => isNaN(value))) {
-            sums[index] = values.reduce((prev, curr) => {
-              const value = Number(curr);
-              if (!isNaN(value)) {
-                return prev + curr;
-              } else {
-                return prev;
-              }
-            }, 0);
-            sums[index] += ' 元';
-          } else {
-            sums[index] = 'N/A';
-          }
-        });
-
-        return sums;
-      },
-      resetDateFilter() {
-        this.$refs.filterTable.clearFilter('date');
-      },
-      clearFilter() {
-        this.$refs.filterTable.clearFilter();
-      },
-      setCurrent(row) {
-        this.$refs.singleTable.setCurrentRow(row);
-      },
-      toggleSelection(rows) {
-        if (rows) {
-          rows.forEach(row => {
-            this.$refs.multipleTable.toggleRowSelection(row);
-          });
-        } else {
-          this.$refs.multipleTable.clearSelection();
-        }
-      },
-
-      handleClick(row) {
-        console.log(row);
-      },
-
-      handleEdit(index, row) {
-        console.log(index, row);
-      },
-
-      handleDelete(index, row) {
-        console.log(index, row);
-      },
-
-      handleSelectionChange(val) {
-        this.multipleSelection = val;
-      },
-
-      handleCurrentChange(val) {
-        this.currentRow = val;
-      },
-
-      formatter(row, column) {
-        return row.address;
-      },
-
-      filterTag(value, row) {
-        return row.tag === value;
-      },
-
-      filterHandler(value, row, column) {
-        const property = column['property'];
-        return row[property] === value;
-      },
-
-      tableRowClassName({row, rowIndex}) {
-        if (rowIndex === 1) {
-          return 'warning-row';
-        } else if (rowIndex === 3) {
-          return 'success-row';
-        }
-        return '';
-      },
-
-      deleteRow(index, rows) {
-        rows.splice(index, 1);
-      },
-
-      arraySpanMethod({ row, column, rowIndex, columnIndex }) {
-        if (rowIndex % 2 === 0) {
-          if (columnIndex === 0) {
-            return [1, 2];
-          } else if (columnIndex === 1) {
-            return [0, 0];
-          }
-        }
-      },
-
-      objectSpanMethod({ row, column, rowIndex, columnIndex }) {
-        if (columnIndex === 0) {
-          if (rowIndex % 2 === 0) {
-            return {
-              rowspan: 2,
-              colspan: 1
-            };
-          } else {
-            return {
-              rowspan: 0,
-              colspan: 0
-            };
-          }
-        }
-      },
-
-      indexMethod(index) {
-        return index * 2;
-      }
-    },
-
-    watch: {
-      multipleSelection(val) {
-        console.log('selection: ', val);
-      }
-    }
-  };
-</script>
-
-<style>
-  .el-table .warning-row {
-    background: oldlace;
-  }
-
-  .el-table .success-row {
-    background: #f0f9eb;
-  }
-
-  .demo-table .name-wrapper {
-    display: inline-block;
-  }
-
-  .demo-table .demo-table-expand {
-    label {
-      width: 90px;
-      color: #99a9bf;
-    }
-    .el-form-item {
-      margin-right: 0;
-      margin-bottom: 0;
-      width: 50%;
-    }
-  }
-</style>
-
 ## Table 表格
 
 用于展示多条结构类似的数据，可对数据进行排序、筛选、对比或其他自定义操作。
@@ -582,7 +175,7 @@
 ```html
 <template>
   <el-table
-    :data="tableData2"
+    :data="tableData"
     style="width: 100%"
     :row-class-name="tableRowClassName">
     <el-table-column
@@ -626,7 +219,7 @@
     },
     data() {
       return {
-        tableData2: [{
+        tableData: [{
           date: '2016-05-02',
           name: '王小虎',
           address: '上海市普陀区金沙江路 1518 弄',
@@ -658,7 +251,7 @@
 ```html
 <template>
   <el-table
-    :data="tableData3"
+    :data="tableData"
     height="250"
     border
     style="width: 100%">
@@ -683,7 +276,7 @@
   export default {
     data() {
       return {
-        tableData3: [{
+        tableData: [{
           date: '2016-05-03',
           name: '王小虎',
           address: '上海市普陀区金沙江路 1518 弄'
@@ -784,32 +377,32 @@
     data() {
       return {
         tableData: [{
-          date: '2016-05-03',
+          date: '2016-05-02',
           name: '王小虎',
           province: '上海',
           city: '普陀区',
           address: '上海市普陀区金沙江路 1518 弄',
           zip: 200333
         }, {
-          date: '2016-05-02',
+          date: '2016-05-04',
           name: '王小虎',
           province: '上海',
           city: '普陀区',
-          address: '上海市普陀区金沙江路 1518 弄',
+          address: '上海市普陀区金沙江路 1517 弄',
           zip: 200333
         }, {
-          date: '2016-05-04',
+          date: '2016-05-01',
           name: '王小虎',
           province: '上海',
           city: '普陀区',
-          address: '上海市普陀区金沙江路 1518 弄',
+          address: '上海市普陀区金沙江路 1519 弄',
           zip: 200333
         }, {
-          date: '2016-05-01',
+          date: '2016-05-03',
           name: '王小虎',
           province: '上海',
           city: '普陀区',
-          address: '上海市普陀区金沙江路 1518 弄',
+          address: '上海市普陀区金沙江路 1516 弄',
           zip: 200333
         }]
       }
@@ -827,7 +420,7 @@
 ```html
 <template>
   <el-table
-    :data="tableData3"
+    :data="tableData"
     style="width: 100%"
     height="250">
     <el-table-column
@@ -868,7 +461,7 @@
   export default {
     data() {
       return {
-        tableData3: [{
+        tableData: [{
           date: '2016-05-03',
           name: '王小虎',
           province: '上海',
@@ -933,7 +526,7 @@
 ```html
 <template>
   <el-table
-    :data="tableData4"
+    :data="tableData"
     style="width: 100%"
     max-height="250">
     <el-table-column
@@ -973,7 +566,7 @@
       width="120">
       <template slot-scope="scope">
         <el-button
-          @click.native.prevent="deleteRow(scope.$index, tableData4)"
+          @click.native.prevent="deleteRow(scope.$index, tableData)"
           type="text"
           size="small">
           移除
@@ -992,7 +585,7 @@
     },
     data() {
       return {
-        tableData4: [{
+        tableData: [{
           date: '2016-05-03',
           name: '王小虎',
           province: '上海',
@@ -1057,7 +650,7 @@
 ```html
 <template>
   <el-table
-    :data="tableData3"
+    :data="tableData"
     style="width: 100%">
     <el-table-column
       prop="date"
@@ -1100,7 +693,7 @@
   export default {
     data() {
       return {
-        tableData3: [{
+        tableData: [{
           date: '2016-05-03',
           name: '王小虎',
           province: '上海',
@@ -1242,7 +835,7 @@
 <template>
   <el-table
     ref="multipleTable"
-    :data="tableData3"
+    :data="tableData"
     tooltip-effect="dark"
     style="width: 100%"
     @selection-change="handleSelectionChange">
@@ -1267,7 +860,7 @@
     </el-table-column>
   </el-table>
   <div style="margin-top: 20px">
-    <el-button @click="toggleSelection([tableData3[1], tableData3[2]])">切换第二、第三行的选中状态</el-button>
+    <el-button @click="toggleSelection([tableData[1], tableData[2]])">切换第二、第三行的选中状态</el-button>
     <el-button @click="toggleSelection()">取消选择</el-button>
   </div>
 </template>
@@ -1276,7 +869,7 @@
   export default {
     data() {
       return {
-        tableData3: [{
+        tableData: [{
           date: '2016-05-03',
           name: '王小虎',
           address: '上海市普陀区金沙江路 1518 弄'
@@ -1579,7 +1172,7 @@
 ```html
 <template>
   <el-table
-    :data="tableData5"
+    :data="tableData"
     style="width: 100%">
     <el-table-column type="expand">
       <template slot-scope="props">
@@ -1642,7 +1235,7 @@
   export default {
     data() {
       return {
-        tableData5: [{
+        tableData: [{
           id: '12987122',
           name: '好滋好味鸡蛋仔',
           category: '江浙小吃、小吃零食',
@@ -1682,6 +1275,147 @@
 ```
 :::
 
+### 树形数据与懒加载
+
+:::demo 支持树类型的数据的显示。当 row 中包含 `children` 字段时，被视为树形数据。渲染树形数据时，必须要指定 `row-key`。支持子节点数据异步加载。设置 Table 的 `lazy` 属性为 true 与加载函数 `load` 。通过指定 row 中的 `hasChildren` 字段来指定哪些行是包含子节点。`children` 与 `hasChildren` 都可以通过 `tree-props` 配置。
+
+```html
+<template>
+<div>
+  <el-table
+    :data="tableData"
+    style="width: 100%;margin-bottom: 20px;"
+    row-key="id"
+    border
+    default-expand-all
+    :tree-props="{children: 'children', hasChildren: 'hasChildren'}">
+    <el-table-column
+      prop="date"
+      label="日期"
+      sortable
+      width="180">
+    </el-table-column>
+    <el-table-column
+      prop="name"
+      label="姓名"
+      sortable
+      width="180">
+    </el-table-column>
+    <el-table-column
+      prop="address"
+      label="地址">
+    </el-table-column>
+  </el-table>
+
+  <el-table
+    :data="tableData1"
+    style="width: 100%"
+    row-key="id"
+    border
+    lazy
+    :load="load"
+    :tree-props="{children: 'children', hasChildren: 'hasChildren'}">
+    <el-table-column
+      prop="date"
+      label="日期"
+      width="180">
+    </el-table-column>
+    <el-table-column
+      prop="name"
+      label="姓名"
+      width="180">
+    </el-table-column>
+    <el-table-column
+      prop="address"
+      label="地址">
+    </el-table-column>
+  </el-table>
+</div>
+</template>
+<script>
+  export default {
+    data() {
+      return {
+        tableData: [{
+          id: 1,
+          date: '2016-05-02',
+          name: '王小虎',
+          address: '上海市普陀区金沙江路 1518 弄'
+        }, {
+          id: 2,
+          date: '2016-05-04',
+          name: '王小虎',
+          address: '上海市普陀区金沙江路 1517 弄'
+        }, {
+          id: 3,
+          date: '2016-05-01',
+          name: '王小虎',
+          address: '上海市普陀区金沙江路 1519 弄',
+          children: [{
+              id: 31,
+              date: '2016-05-01',
+              name: '王小虎',
+              address: '上海市普陀区金沙江路 1519 弄'
+            }, {
+              id: 32,
+              date: '2016-05-01',
+              name: '王小虎',
+              address: '上海市普陀区金沙江路 1519 弄'
+          }]
+        }, {
+          id: 4,
+          date: '2016-05-03',
+          name: '王小虎',
+          address: '上海市普陀区金沙江路 1516 弄'
+        }],
+        tableData1: [{
+          id: 1,
+          date: '2016-05-02',
+          name: '王小虎',
+          address: '上海市普陀区金沙江路 1518 弄'
+        }, {
+          id: 2,
+          date: '2016-05-04',
+          name: '王小虎',
+          address: '上海市普陀区金沙江路 1517 弄'
+        }, {
+          id: 3,
+          date: '2016-05-01',
+          name: '王小虎',
+          address: '上海市普陀区金沙江路 1519 弄',
+          hasChildren: true
+        }, {
+          id: 4,
+          date: '2016-05-03',
+          name: '王小虎',
+          address: '上海市普陀区金沙江路 1516 弄'
+        }]
+      }
+    },
+    methods: {
+      load(tree, treeNode, resolve) {
+        setTimeout(() => {
+          resolve([
+            {
+              id: 31,
+              date: '2016-05-01',
+              name: '王小虎',
+              address: '上海市普陀区金沙江路 1519 弄'
+            }, {
+              id: 32,
+              date: '2016-05-01',
+              name: '王小虎',
+              address: '上海市普陀区金沙江路 1519 弄'
+            }
+          ])
+        }, 1000)
+      }
+    },
+  }
+</script>
+```
+:::
+
 ### 自定义表头
 
 表头支持自定义。
@@ -1690,7 +1424,7 @@
 ```html
 <template>
   <el-table
-    :data="tableData7.filter(data => !search || data.name.toLowerCase().includes(search.toLowerCase()))"
+    :data="tableData.filter(data => !search || data.name.toLowerCase().includes(search.toLowerCase()))"
     style="width: 100%">
     <el-table-column
       label="Date"
@@ -1765,7 +1499,7 @@
 ```html
 <template>
   <el-table
-    :data="tableData6"
+    :data="tableData"
     border
     show-summary
     style="width: 100%">
@@ -1796,7 +1530,7 @@
   </el-table>
 
   <el-table
-    :data="tableData6"
+    :data="tableData"
     border
     height="200"
     :summary-method="getSummaries"
@@ -1830,7 +1564,7 @@
   export default {
     data() {
       return {
-        tableData6: [{
+        tableData: [{
           id: '12987122',
           name: '王小虎',
           amount1: '234',
@@ -1905,7 +1639,7 @@
 <template>
   <div>
     <el-table
-      :data="tableData6"
+      :data="tableData"
       :span-method="arraySpanMethod"
       border
       style="width: 100%">
@@ -1936,7 +1670,7 @@
     </el-table>
 
     <el-table
-      :data="tableData6"
+      :data="tableData"
       :span-method="objectSpanMethod"
       border
       style="width: 100%; margin-top: 20px">
@@ -1969,7 +1703,7 @@
   export default {
     data() {
       return {
-        tableData6: [{
+        tableData: [{
           id: '12987122',
           name: '王小虎',
           amount1: '234',
@@ -2070,7 +1804,7 @@
     data() {
       return {
         tableData: [{
-          date: '2016-05-03',
+          date: '2016-05-02',
           name: '王小虎',
           province: '上海',
           city: '普陀区',
@@ -2078,27 +1812,27 @@
           zip: 200333,
           tag: '家'
         }, {
-          date: '2016-05-02',
+          date: '2016-05-04',
           name: '王小虎',
           province: '上海',
           city: '普陀区',
-          address: '上海市普陀区金沙江路 1518 弄',
+          address: '上海市普陀区金沙江路 1517 弄',
           zip: 200333,
           tag: '公司'
         }, {
-          date: '2016-05-04',
+          date: '2016-05-01',
           name: '王小虎',
           province: '上海',
           city: '普陀区',
-          address: '上海市普陀区金沙江路 1518 弄',
+          address: '上海市普陀区金沙江路 1519 弄',
           zip: 200333,
           tag: '家'
         }, {
-          date: '2016-05-01',
+          date: '2016-05-03',
           name: '王小虎',
           province: '上海',
           city: '普陀区',
-          address: '上海市普陀区金沙江路 1518 弄',
+          address: '上海市普陀区金沙江路 1516 弄',
           zip: 200333,
           tag: '公司'
         }],
@@ -2114,12 +1848,138 @@
 ```
 :::
 
+### 树形数据与勾选联动
+
+:::demo 支持树类型的数据的显示。暂时不支持懒加载的联动。通过 `check-strictly` 控制是否严格的遵循父子不互相关联的做法，默认为 `false`
+
+```html
+<template>
+<div>
+  <el-table
+    v-for="strictly in checkStrictly"
+    :data="tableData"
+    style="width: 100%;margin-bottom: 20px;"
+    row-key="id"
+    border
+    default-expand-all
+    :key="strictly"
+    :check-strictly="strictly"
+    :tree-props="{children: 'children', hasChildren: 'hasChildren'}"
+    @selection-change="onSelectionChange"
+  >
+    <el-table-column
+      type="selection"
+    >
+    </el-table-column>
+    <el-table-column
+      prop="date"
+      label="日期"
+      sortable
+      width="180">
+    </el-table-column>
+    <el-table-column
+      prop="name"
+      label="姓名"
+      sortable
+      width="180">
+    </el-table-column>
+    <el-table-column
+      prop="address"
+      label="地址">
+    </el-table-column>
+  </el-table>
+</div>
+</template>
+<script>
+  export default {
+    data() {
+      return {
+        checkStrictly: [false, true],
+        tableData: [{
+          id: 1,
+          date: '2016-05-02',
+          name: '王小虎',
+          address: '上海市普陀区金沙江路 1518 弄'
+        }, {
+          id: 2,
+          date: '2016-05-04',
+          name: '王小虎',
+          address: '上海市普陀区金沙江路 1517 弄'
+        }, {
+          id: 3,
+          date: '2016-05-01',
+          name: '王小虎',
+          address: '上海市普陀区金沙江路 1519 弄',
+          children: [{
+              id: 31,
+              date: '2016-05-11',
+              name: '王小虎-1',
+              address: '上海市普陀区金沙江路 1519-1 弄'
+            }, {
+              id: 32,
+              date: '2016-05-12',
+              name: '王小虎-2',
+              address: '上海市普陀区金沙江路 1519-2 弄',
+              children: [
+                {
+                  id: 321,
+                  date: '2016-05-21',
+                  name: '王小虎-2-1',
+                  address: '上海市普陀区金沙江路 1519-2-1 弄'
+                },{
+                  id: 322,
+                  date: '2016-05-22',
+                  name: '王小虎-2-2',
+                  address: '上海市普陀区金沙江路 1519-2-2 弄'
+                }
+              ]
+          }]
+        }, {
+          id: 4,
+          date: '2016-05-03',
+          name: '王小虎',
+          address: '上海市普陀区金沙江路 1516 弄'
+        }],
+        tableData1: [{
+          id: 1,
+          date: '2016-05-02',
+          name: '王小虎',
+          address: '上海市普陀区金沙江路 1518 弄'
+        }, {
+          id: 2,
+          date: '2016-05-04',
+          name: '王小虎',
+          address: '上海市普陀区金沙江路 1517 弄'
+        }, {
+          id: 3,
+          date: '2016-05-01',
+          name: '王小虎',
+          address: '上海市普陀区金沙江路 1519 弄',
+          hasChildren: true
+        }, {
+          id: 4,
+          date: '2016-05-03',
+          name: '王小虎',
+          address: '上海市普陀区金沙江路 1516 弄'
+        }]
+      }
+    },
+    methods: {
+      onSelectionChange(selection){
+        console.log(selection)
+      }
+    },
+  }
+</script>
+```
+:::
+
 ### Table Attributes
 | 参数      | 说明          | 类型      | 可选值                           | 默认值  |
 |---------- |-------------- |---------- |--------------------------------  |-------- |
 | data | 显示的数据 | array | — | — |
 | height | Table 的高度，默认为自动高度。如果 height 为 number 类型，单位 px；如果 height 为 string 类型，则这个高度会设置为 Table 的 style.height 的值，Table 的高度会受控于外部样式。  | string/number | — | — |
-| max-height | Table 的最大高度 | string/number | — | — |
+| max-height | Table 的最大高度。合法的值为数字或者单位为 px 的高度。 | string/number | — | — |
 | stripe | 是否为斑马纹 table | boolean | — | false |
 | border | 是否带有纵向边框 | boolean | — | false |
 | size | Table 的尺寸 | string | medium / small / mini | — |
@@ -2135,9 +1995,9 @@
 | header-row-style | 表头行的 style 的回调方法，也可以使用一个固定的 Object 为所有表头行设置一样的 Style。 | Function({row, rowIndex})/Object | — | — |
 | header-cell-class-name | 表头单元格的 className 的回调方法，也可以使用字符串为所有表头单元格设置一个固定的 className。 | Function({row, column, rowIndex, columnIndex})/String | — | — |
 | header-cell-style | 表头单元格的 style 的回调方法，也可以使用一个固定的 Object 为所有表头单元格设置一样的 Style。 | Function({row, column, rowIndex, columnIndex})/Object | — | — |
-| row-key | 行数据的 Key，用来优化 Table 的渲染；在使用 reserve-selection 功能的情况下，该属性是必填的。类型为 String 时，支持多层访问：`user.info.id`，但不支持 `user.info[0].id`，此种情况请使用 `Function`。 | Function(row)/String | — | — |
+| row-key | 行数据的 Key，用来优化 Table 的渲染；在使用 reserve-selection 功能与显示树形数据时，该属性是必填的。类型为 String 时，支持多层访问：`user.info.id`，但不支持 `user.info[0].id`，此种情况请使用 `Function`。 | Function(row)/String | — | — |
 | empty-text | 空数据时显示的文本内容，也可以通过 `slot="empty"` 设置 | String | — | 暂无数据 |
-| default-expand-all | 是否默认展开所有行，当 Table 中存在 type="expand" 的 Column 的时候有效 | Boolean | — | false |
+| default-expand-all | 是否默认展开所有行，当 Table 包含展开行存在或者为树形表格时有效 | Boolean | — | false |
 | expand-row-keys | 可以通过该属性设置 Table 目前的展开行，需要设置 row-key 属性才能使用，该属性为展开行的 keys 数组。| Array | — | |
 | default-sort | 默认的排序列的 prop 和顺序。它的`prop`属性指定默认的排序的列，`order`指定默认排序的顺序| Object | `order`: ascending, descending | 如果只指定了`prop`, 没有指定`order`, 则默认顺序是ascending |
 | tooltip-effect | tooltip `effect` 属性 | String | dark/light | | dark |
@@ -2146,6 +2006,11 @@
 | summary-method | 自定义的合计计算方法 | Function({ columns, data }) | — | — |
 | span-method | 合并行或列的计算方法 | Function({ row, column, rowIndex, columnIndex }) | — | — |
 | select-on-indeterminate | 在多选表格中，当仅有部分行被选中时，点击表头的多选框时的行为。若为 true，则选中所有行；若为 false，则取消选择所有行 | Boolean | — | true |
+| indent      | 展示树形数据时，树节点的缩进 | Number | — | 16 |
+| lazy        | 是否懒加载子节点数据 | Boolean | — | — |
+| load        | 加载子节点数据的函数，lazy 为 true 时生效，函数第二个参数包含了节点的层级信息 | Function(row, treeNode, resolve) | — | — |
+| tree-props  | 渲染嵌套数据的配置选项 | Object | — | { hasChildren: 'hasChildren', children: 'children' } |
+| check-strictly | 在显示复选框的情况下，是否严格的遵循父子不互相关联的做法，默认为 false | Boolean | - | false |
 
 ### Table Events
 | 事件名 | 说明 | 参数 |
@@ -2157,16 +2022,16 @@
 | cell-mouse-leave | 当单元格 hover 退出时会触发该事件 | row, column, cell, event |
 | cell-click | 当某个单元格被点击时会触发该事件 | row, column, cell, event |
 | cell-dblclick | 当某个单元格被双击击时会触发该事件 | row, column, cell, event |
-| row-click | 当某一行被点击时会触发该事件 | row, event, column |
-| row-contextmenu | 当某一行被鼠标右键点击时会触发该事件 | row, event |
-| row-dblclick | 当某一行被双击时会触发该事件 | row, event |
+| row-click | 当某一行被点击时会触发该事件 | row, column, event |
+| row-contextmenu | 当某一行被鼠标右键点击时会触发该事件 | row, column, event |
+| row-dblclick | 当某一行被双击时会触发该事件 | row, column, event |
 | header-click | 当某一列的表头被点击时会触发该事件 | column, event |
 | header-contextmenu | 当某一列的表头被鼠标右键点击时触发该事件 | column, event |
 | sort-change | 当表格的排序条件发生变化的时候会触发该事件 | { column, prop, order } |
 | filter-change | 当表格的筛选条件发生变化的时候会触发该事件，参数的值是一个对象，对象的 key 是 column 的 columnKey，对应的 value 为用户选择的筛选条件的数组。 | filters |
 | current-change | 当表格的当前行发生变化的时候会触发该事件，如果要高亮当前行，请打开表格的 highlight-current-row 属性 | currentRow, oldCurrentRow |
 | header-dragend | 当拖动表头改变了列的宽度的时候会触发该事件 | newWidth, oldWidth, column, event |
-| expand-change | 当用户对某一行展开或者关闭的时候会触发该事件 | row, expandedRows |
+| expand-change  | 当用户对某一行展开或者关闭的时候会触发该事件（展开行时，回调的第二个参数为 expandedRows；树形表格时第二参数为 expanded） | row, (expandedRows \| expanded) |
 
 ### Table Methods
 | 方法名 | 说明 | 参数 |
@@ -2174,7 +2039,7 @@
 | clearSelection | 用于多选表格，清空用户的选择 | — |
 | toggleRowSelection | 用于多选表格，切换某一行的选中状态，如果使用了第二个参数，则是设置这一行选中与否（selected 为 true 则选中） | row, selected |
 | toggleAllSelection | 用于多选表格，切换所有行的选中状态 | - |
-| toggleRowExpansion | 用于可展开表格，切换某一行的展开状态，如果使用了第二个参数，则是设置这一行展开与否（expanded 为 true 则展开） | row, expanded |
+| toggleRowExpansion | 用于可展开表格与树形表格，切换某一行的展开状态，如果使用了第二个参数，则是设置这一行展开与否（expanded 为 true 则展开） | row, expanded |
 | setCurrentRow | 用于单选表格，设定某一行为选中行，如果调用时不加参数，则会取消目前高亮行的选中状态。 | row |
 | clearSort | 用于清空排序条件，数据会恢复成未排序的状态 | — |
 | clearFilter | 不传入参数时用于清空所有过滤条件，数据会恢复成未过滤的状态，也可传入由columnKey组成的数组以清除指定列的过滤条件 | columnKey |
@@ -2190,7 +2055,7 @@
 | 参数      | 说明          | 类型      | 可选值                           | 默认值  |
 |---------- |-------------- |---------- |--------------------------------  |-------- |
 | type | 对应列的类型。如果设置了 `selection` 则显示多选框；如果设置了 `index` 则显示该行的索引（从 1 开始计算）；如果设置了 `expand` 则显示为一个可展开的按钮 | string | selection/index/expand | — |
-| index | 如果设置了 `type=index`，可以通过传递 `index` 属性来自定义索引 | string, Function(index) | - | - |
+| index | 如果设置了 `type=index`，可以通过传递 `index` 属性来自定义索引 | number, Function(index) | - | - |
 | column-key | column 的 key，如果需要使用 filter-change 事件，则需要此属性标识是哪个 column 的筛选条件 | string | — | — |
 | label | 显示的标题 | string | — | — |
 | prop | 对应列内容的字段名，也可以使用 property 属性 | string | — | — |
@@ -2221,4 +2086,4 @@
 | name | 说明 |
 |------|--------|
 | — | 自定义列的内容，参数为 { row, column, $index } |
-| header | 自定义表头的内容. 参数为 { column, $index } |
\ No newline at end of file
+| header | 自定义表头的内容. 参数为 { column, $index } |
diff --git a/examples/docs/zh-CN/tabs-dotted.md b/examples/docs/zh-CN/tabs-dotted.md
new file mode 100644
index 00000000000..48081b55c1e
--- /dev/null
+++ b/examples/docs/zh-CN/tabs-dotted.md
@@ -0,0 +1,39 @@
+## TabsDotted 点分tab标签
+
+本组件是对 `el-tabs` 进行扩展，新增`type="dotted"`类型。tips：`el-tabs` 所有的属性和方法在该组件同样适用。
+
+### 基础用法
+
+:::demo 
+
+```html
+<template>
+  <el-tabs-dotted tab-position="top" type="dotted" @tab-click="doClick">
+    <el-tab-pane label="用户管理">用户管理</el-tab-pane>
+    <el-tab-pane label="配置管理">配置管理</el-tab-pane>
+    <el-tab-pane label="角色管理">角色管理</el-tab-pane>
+    <el-tab-pane label="定时任务补偿">定时任务补偿</el-tab-pane>
+  </el-tabs-dotted>
+</template>
+<script>
+  export default {
+    methods: {
+      doClick(v) {
+        console.log(v)
+      }
+    }
+  }
+</script>
+```
+:::
+
+
+### TabsDotted Attributes
+|   参数   |    说明    |   类型    |   可选值   |   默认值   |
+|---------- |-------- |---------- |-------------  |-------- |
+| type     | 风格类型   | string   | card/border-card/dotted  |     —    |
+| tab-position | 选项卡所在位置 | string  |  top/right/bottom/left --- type="dotted"只支持top/bottom |  top |
+
+:::tip
+说明：其他属性和方法请参考 `Tabs`组件
+:::
\ No newline at end of file
diff --git a/examples/docs/zh-CN/tabs.md b/examples/docs/zh-CN/tabs.md
index 74b4b3c8733..4d90741401f 100644
--- a/examples/docs/zh-CN/tabs.md
+++ b/examples/docs/zh-CN/tabs.md
@@ -1,95 +1,3 @@
-<script>
-  export default {
-    data() {
-      return {
-        activeName: 'second',
-        activeName2: 'first',
-        editableTabsValue: '2',
-        editableTabsValue2: '2',
-        editableTabs: [{
-          title: 'Tab 1',
-          name: '1',
-          content: 'Tab 1 content'
-        }, {
-          title: 'Tab 2',
-          name: '2',
-          content: 'Tab 2 content'
-        }],
-        editableTabs2: [{
-          title: 'Tab 1',
-          name: '1',
-          content: 'Tab 1 content'
-        }, {
-          title: 'Tab 2',
-          name: '2',
-          content: 'Tab 2 content'
-        }],
-        tabIndex: 2,
-        tabPosition: 'top'
-      }
-    },
-    methods: {
-      handleClick(tab, event) {
-        console.log(tab, event);
-      },
-      handleTabsEdit(targetName, action) {
-        if (action === 'add') {
-          let newTabName = ++this.tabIndex + '';
-          this.editableTabs.push({
-            title: 'New Tab',
-            name: newTabName,
-            content: 'New Tab content'
-          });
-          this.editableTabsValue = newTabName;
-        }
-        if (action === 'remove') {
-          let tabs = this.editableTabs;
-          let activeName = this.editableTabsValue;
-          if (activeName === targetName) {
-            tabs.forEach((tab, index) => {
-              if (tab.name === targetName) {
-                let nextTab = tabs[index + 1] || tabs[index - 1];
-                if (nextTab) {
-                  activeName = nextTab.name;
-                }
-              }
-            });
-          }
-          
-          this.editableTabsValue = activeName;
-          this.editableTabs = tabs.filter(tab => tab.name !== targetName);
-        }
-      },
-      addTab(targetName) {
-        let newTabName = ++this.tabIndex + '';
-        this.editableTabs2.push({
-          title: 'New Tab',
-          name: newTabName,
-          content: 'New Tab content'
-        });
-        this.editableTabsValue2 = newTabName;
-      },
-      removeTab(targetName) {
-        let tabs = this.editableTabs2;
-        let activeName = this.editableTabsValue2;
-        if (activeName === targetName) {
-          tabs.forEach((tab, index) => {
-            if (tab.name === targetName) {
-              let nextTab = tabs[index + 1] || tabs[index - 1];
-              if (nextTab) {
-                activeName = nextTab.name;
-              }
-            }
-          });
-        }
-        
-        this.editableTabsValue2 = activeName;
-        this.editableTabs2 = tabs.filter(tab => tab.name !== targetName);
-      }
-    }
-  }
-</script>
-
 ## Tabs 标签页
 
 分隔内容上有关联但属于不同类别的数据集合。
@@ -134,7 +42,7 @@
 
 ```html
 <template>
-  <el-tabs v-model="activeName2" type="card" @tab-click="handleClick">
+  <el-tabs v-model="activeName" type="card" @tab-click="handleClick">
     <el-tab-pane label="用户管理" name="first">用户管理</el-tab-pane>
     <el-tab-pane label="配置管理" name="second">配置管理</el-tab-pane>
     <el-tab-pane label="角色管理" name="third">角色管理</el-tab-pane>
@@ -145,7 +53,7 @@
   export default {
     data() {
       return {
-        activeName2: 'first'
+        activeName: 'first'
       };
     },
     methods: {
@@ -199,7 +107,7 @@
   export default {
     data() {
       return {
-        tabPosition: 'top'
+        tabPosition: 'left'
       };
     }
   };
@@ -300,14 +208,14 @@
 <div style="margin-bottom: 20px;">
   <el-button
     size="small"
-    @click="addTab(editableTabsValue2)"
+    @click="addTab(editableTabsValue)"
   >
     add tab
   </el-button>
 </div>
-<el-tabs v-model="editableTabsValue2" type="card" closable @tab-remove="removeTab">
+<el-tabs v-model="editableTabsValue" type="card" closable @tab-remove="removeTab">
   <el-tab-pane
-    v-for="(item, index) in editableTabs2"
+    v-for="(item, index) in editableTabs"
     :key="item.name"
     :label="item.title"
     :name="item.name"
@@ -319,8 +227,8 @@
   export default {
     data() {
       return {
-        editableTabsValue2: '2',
-        editableTabs2: [{
+        editableTabsValue: '2',
+        editableTabs: [{
           title: 'Tab 1',
           name: '1',
           content: 'Tab 1 content'
@@ -335,16 +243,16 @@
     methods: {
       addTab(targetName) {
         let newTabName = ++this.tabIndex + '';
-        this.editableTabs2.push({
+        this.editableTabs.push({
           title: 'New Tab',
           name: newTabName,
           content: 'New Tab content'
         });
-        this.editableTabsValue2 = newTabName;
+        this.editableTabsValue = newTabName;
       },
       removeTab(targetName) {
-        let tabs = this.editableTabs2;
-        let activeName = this.editableTabsValue2;
+        let tabs = this.editableTabs;
+        let activeName = this.editableTabsValue;
         if (activeName === targetName) {
           tabs.forEach((tab, index) => {
             if (tab.name === targetName) {
@@ -356,8 +264,8 @@
           });
         }
         
-        this.editableTabsValue2 = activeName;
-        this.editableTabs2 = tabs.filter(tab => tab.name !== targetName);
+        this.editableTabsValue = activeName;
+        this.editableTabs = tabs.filter(tab => tab.name !== targetName);
       }
     }
   }
@@ -368,11 +276,11 @@
 ### Tabs Attributes
 | 参数       | 说明     | 类型      | 可选值       | 默认值   |
 |---------- |-------- |---------- |-------------  |-------- |
+| value / v-model  | 绑定值，选中选项卡的 name  | string   |  —  |  第一个选项卡的 name |
 | type     | 风格类型   | string   | card/border-card  |     —    |
 | closable  | 标签是否可关闭   | boolean   | — |  false  |
 | addable  | 标签是否可增加   | boolean   | — |  false  |
 | editable  | 标签是否同时可增加和关闭   | boolean   | — |  false  |
-| value  | 绑定值，选中选项卡的 name  | string   |  —  |  第一个选项卡的 name |
 | tab-position  | 选项卡所在位置 | string   |  top/right/bottom/left  |  top |
 | stretch  | 标签的宽度是否自撑开 | boolean   |  -  |  false |
 | before-leave | 切换标签之前的钩子，若返回 false 或者返回 Promise 且被 reject，则阻止切换。 | Function(activeName, oldActiveName) | — | — |
@@ -390,6 +298,6 @@
 |---------- |-------- |---------- |-------------  |-------- |
 | label     | 选项卡标题   | string   | — |    —     |
 | disabled | 是否禁用 | boolean | — | false |
-| name      | 与选项卡 activeName 对应的标识符，表示选项卡别名 | string | — | 该选项卡在选项卡列表中的顺序值，如第一个选项卡则为'1' |
+| name      | 与选项卡绑定值 value 对应的标识符，表示选项卡别名 | string | — | 该选项卡在选项卡列表中的顺序值，如第一个选项卡则为'1' |
 | closable  | 标签是否可关闭   | boolean   | — |  false  |
 | lazy  | 标签是否延迟渲染   | boolean   | — |  false  |
diff --git a/examples/docs/zh-CN/tag.md b/examples/docs/zh-CN/tag.md
index 8a02563bdaa..ebc565d2cc6 100644
--- a/examples/docs/zh-CN/tag.md
+++ b/examples/docs/zh-CN/tag.md
@@ -1,62 +1,3 @@
-<script>
-  export default {
-    data() {
-      return {
-        tags: [
-          { name: '标签一', type: '' },
-          { name: '标签二', type: 'success' },
-          { name: '标签三', type: 'info' },
-          { name: '标签四', type: 'warning' },
-          { name: '标签五', type: 'danger' }
-        ],
-        dynamicTags: ['标签一', '标签二', '标签三'],
-        inputVisible: false,
-        inputValue: ''
-      };
-    },
-    methods: {
-      handleClose(tag) {
-        this.dynamicTags.splice(this.dynamicTags.indexOf(tag), 1);
-      },
-
-      showInput() {
-        this.inputVisible = true;
-        this.$nextTick(_ => {
-          this.$refs.saveTagInput.$refs.input.focus();
-        });
-      },
-
-      handleInputConfirm() {
-        let inputValue = this.inputValue;
-        if (inputValue) {
-          this.dynamicTags.push(inputValue);
-        }
-        this.inputVisible = false;
-        this.inputValue = '';
-      }
-    }
-  }
-</script>
-
-<style>
-  .demo-box.demo-tag {
-    .el-tag + .el-tag {
-      margin-left: 10px;
-    }
-    .button-new-tag {
-      margin-left: 10px;
-      height: 32px;
-      line-height: 30px;
-      padding: 0 *;
-    }
-    .input-new-tag {
-      width: 90px;
-      margin-left: 10px;
-      vertical-align: bottom;
-    }
-  }
-</style>
-
 ## Tag 标签
 
 用于标记和选择。
@@ -198,18 +139,65 @@ Tag 组件提供除了默认值以外的三种尺寸，可以在不同场景下
 ```
 :::
 
+### 不同主题
+
+Tag 组件提供了三个不同的主题：`dark`、`light` 和 `plain`
+
+:::demo 通过设置`effect`属性来改变主题，默认为 `light`
+```html
+<div class="tag-group">
+  <span class="tag-group__title">Dark</span>
+  <el-tag
+    v-for="item in items"
+    :key="item.label"
+    :type="item.type"
+    effect="dark">
+    {{ item.label }}
+  </el-tag>
+</div>
+<div class="tag-group">
+  <span class="tag-group__title">Plain</span>
+  <el-tag
+    v-for="item in items"
+    :key="item.label"
+    :type="item.type"
+    effect="plain">
+    {{ item.label }}
+  </el-tag>
+</div>
+
+<script>
+  export default {
+    data() {
+      return {
+        items: [
+          { type: '', label: '标签一' },
+          { type: 'success', label: '标签二' },
+          { type: 'info', label: '标签三' },
+          { type: 'danger', label: '标签四' },
+          { type: 'warning', label: '标签五' }
+        ]
+      }
+    }
+  }
+</script>
+```
+:::
+
 ### Attributes
 | 参数      | 说明          | 类型      | 可选值                           | 默认值  |
 |---------- |-------------- |---------- |--------------------------------  |-------- |
-| type | 主题 | string | success/info/warning/danger | — |
+| type | 类型 | string | success/info/warning/danger | — |
 | closable | 是否可关闭 | boolean | — | false |
 | disable-transitions | 是否禁用渐变动画 | boolean | — | false |
 | hit | 是否有边框描边 | boolean | — | false |
 | color | 背景色 | string | — | — |
 | size | 尺寸 | string | medium / small / mini | — |
+| effect | 主题 | string | dark / light / plain | light |
 
 
 ### Events
 | 事件名称 | 说明 | 回调参数 |
 |---------- |-------- |---------- |
+| click | 点击 Tag 时触发的事件 | — |
 | close | 关闭 Tag 时触发的事件 | — |
diff --git a/examples/docs/zh-CN/time-picker.md b/examples/docs/zh-CN/time-picker.md
index 8a605d75323..743de63f368 100644
--- a/examples/docs/zh-CN/time-picker.md
+++ b/examples/docs/zh-CN/time-picker.md
@@ -1,11 +1,3 @@
-<style>
-  .demo-box {
-    .el-date-editor + .el-date-editor {
-      margin-left: 10px;
-    }
-  }
-</style>
-
 ## TimePicker 时间选择器
 
  用于选择或输入日期
@@ -14,10 +6,10 @@
 
 提供几个固定的时间点供用户选择
 
-:::demo 使用 el-time-select 标签，分别通过`star`、`end`和`step`指定可选的起始时间、结束时间和步长
+:::demo 使用 el-time-select 标签，分别通过`start`、`end`和`step`指定可选的起始时间、结束时间和步长
 ```html
 <el-time-select
-  v-model="value1"
+  v-model="value"
   :picker-options="{
     start: '08:30',
     step: '00:15',
@@ -30,7 +22,7 @@
   export default {
     data() {
       return {
-        value1: ''
+        value: ''
       };
     }
   }
@@ -46,7 +38,7 @@
 ```html
 <template>
   <el-time-picker
-    v-model="value2"
+    v-model="value1"
     :picker-options="{
       selectableRange: '18:30:00 - 20:30:00'
     }"
@@ -54,7 +46,7 @@
   </el-time-picker>
   <el-time-picker
     arrow-control
-    v-model="value3"
+    v-model="value2"
     :picker-options="{
       selectableRange: '18:30:00 - 20:30:00'
     }"
@@ -66,8 +58,8 @@
   export default {
     data() {
       return {
-        value2: new Date(2016, 9, 10, 18, 40),
-        value3: new Date(2016, 9, 10, 18, 40)
+        value1: new Date(2016, 9, 10, 18, 40),
+        value2: new Date(2016, 9, 10, 18, 40)
       };
     }
   }
@@ -125,7 +117,7 @@
 <template>
   <el-time-picker
     is-range
-    v-model="value4"
+    v-model="value1"
     range-separator="至"
     start-placeholder="开始时间"
     end-placeholder="结束时间"
@@ -134,7 +126,7 @@
   <el-time-picker
     is-range
     arrow-control
-    v-model="value5"
+    v-model="value2"
     range-separator="至"
     start-placeholder="开始时间"
     end-placeholder="结束时间"
@@ -146,8 +138,8 @@
   export default {
     data() {
       return {
-        value4: [new Date(2016, 9, 10, 8, 40), new Date(2016, 9, 10, 9, 40)],
-        value5: [new Date(2016, 9, 10, 8, 40), new Date(2016, 9, 10, 9, 40)]
+        value1: [new Date(2016, 9, 10, 8, 40), new Date(2016, 9, 10, 9, 40)],
+        value2: [new Date(2016, 9, 10, 8, 40), new Date(2016, 9, 10, 9, 40)]
       };
     }
   }
@@ -155,25 +147,10 @@
 ```
 :::
 
-<script>
-  export default {
-    data() {
-      return {
-        value1: '',
-        value2: new Date(2016, 9, 10, 18, 40),
-        value3: new Date(2016, 9, 10, 18, 40),
-        value4: [new Date(2016, 9, 10, 8, 40), new Date(2016, 9, 10, 9, 40)],
-        value5: [new Date(2016, 9, 10, 8, 40), new Date(2016, 9, 10, 9, 40)],
-        startTime: '',
-        endTime: ''
-      };
-    }
-  }
-</script>
-
 ### Attributes
 | 参数      | 说明          | 类型      | 可选值                           | 默认值  |
 |---------- |-------------- |---------- |--------------------------------  |-------- |
+| value / v-model | 绑定值 | date(TimePicker) / string(TimeSelect) | — | — |
 | readonly | 完全只读 | boolean | — | false |
 | disabled | 禁用 | boolean | — | false |
 | editable | 文本框可输入 | boolean | — | true |
@@ -184,7 +161,6 @@
 | end-placeholder | 范围选择时开始日期的占位内容 | string | — | — |
 | is-range | 是否为时间范围选择，仅对`<el-time-picker>`有效 | boolean | — | false |
 | arrow-control | 是否使用箭头进行时间选择，仅对`<el-time-picker>`有效 | boolean | — | false |
-| value | 绑定值 | date(TimePicker) / string(TimeSelect) | — | — |
 | align | 对齐方式 | string | left / center / right | left |
 | popper-class | TimePicker 下拉框的类名 | string | — | — |
 | picker-options | 当前时间日期选择器特有的选项参考下表 | object | — | {} |
diff --git a/examples/docs/zh-CN/timeline.md b/examples/docs/zh-CN/timeline.md
new file mode 100644
index 00000000000..bfee910f09c
--- /dev/null
+++ b/examples/docs/zh-CN/timeline.md
@@ -0,0 +1,227 @@
+## Timeline 时间线
+
+可视化地呈现时间流信息。
+
+### 基础用法
+
+Timeline 可拆分成多个按照时间戳正序或倒序排列的 activity，时间戳是其区分于其他控件的重要特征，使⽤时注意与 Steps 步骤条等区分。
+
+:::demo
+```html
+<div class="block">
+  <div class="radio">
+    排序：
+    <el-radio-group v-model="reverse">
+      <el-radio :label="true">倒序</el-radio>
+      <el-radio :label="false">正序</el-radio>
+    </el-radio-group><br />
+    排列：
+    <el-radio-group v-model="direction">
+      <el-radio label="vertical">竖排</el-radio>
+      <el-radio label="horizontal">横排</el-radio>
+    </el-radio-group>
+  </div>
+
+  <el-timeline :reverse="reverse" :direction="direction">
+    <el-timeline-item
+      v-for="(activity, index) in activities"
+      :key="index"
+      :timestamp="activity.timestamp">
+      {{activity.content}}
+    </el-timeline-item>
+  </el-timeline>
+</div>
+
+<script>
+  export default {
+    data() {
+      return {
+        reverse: true,
+        direction: 'vertical',
+        activities: [{
+          content: '活动按期开始',
+          timestamp: '2018-04-15'
+        }, {
+          content: '通过审核',
+          timestamp: '2018-04-13'
+        }, {
+          content: '创建成功',
+          timestamp: '2018-04-11'
+        }]
+      };
+    }
+  };
+</script>
+```
+:::
+
+### ⾃定义节点样式
+
+可根据实际场景⾃定义节点尺⼨、颜⾊，或直接使⽤图标。
+
+:::demo
+```html
+<div class="block">
+  <div class="radio">
+    排列：
+    <el-radio-group v-model="direction">
+      <el-radio label="vertical">竖排</el-radio>
+      <el-radio label="horizontal">横排</el-radio>
+    </el-radio-group>
+  </div>
+  <el-timeline :direction="direction">
+    <el-timeline-item
+      v-for="(activity, index) in activities"
+      :key="index"
+      :icon="activity.icon"
+      :type="activity.type"
+      :color="activity.color"
+      :size="activity.size"
+      :timestamp="activity.timestamp">
+      {{activity.content}}
+    </el-timeline-item>
+  </el-timeline>
+</div>
+
+<script>
+  export default {
+    data() {
+      return {
+        direction: 'vertical',
+        activities: [{
+          content: '支持使用图标',
+          timestamp: '2018-04-12 20:46',
+          size: 'large',
+          type: 'primary',
+          icon: 'el-icon-more'
+        }, {
+          content: '支持自定义颜色',
+          timestamp: '2018-04-03 20:46',
+          color: '#0bbd87'
+        }, {
+          content: '支持自定义尺寸',
+          timestamp: '2018-04-03 20:46',
+          size: 'large'
+        }, {
+          content: '默认样式的节点',
+          timestamp: '2018-04-03 20:46'
+        }]
+      };
+    }
+  };
+</script>
+```
+:::
+
+### ⾃定义时间戳
+
+当内容在垂直⽅向上过⾼时，可将时间戳置于内容之上。
+
+:::demo
+```html
+<div class="block">
+  <div class="radio">
+    排列：
+    <el-radio-group v-model="direction">
+      <el-radio label="vertical">竖排</el-radio>
+      <el-radio label="horizontal">横排</el-radio>
+    </el-radio-group>
+  </div>
+  <el-timeline :direction="direction">
+    <el-timeline-item timestamp="2018/4/12" placement="top">
+      <el-card>
+        <h4>更新 Github 模板</h4>
+        <p>王小虎 提交于 2018/4/12 20:46</p>
+      </el-card>
+    </el-timeline-item>
+    <el-timeline-item timestamp="2018/4/3" placement="top">
+      <el-card>
+        <h4>更新 Github 模板</h4>
+        <p>王小虎 提交于 2018/4/3 20:46</p>
+      </el-card>
+    </el-timeline-item>
+    <el-timeline-item timestamp="2018/4/2" placement="top">
+      <el-card>
+        <h4>更新 Github 模板</h4>
+        <p>王小虎 提交于 2018/4/2 20:46</p>
+      </el-card>
+    </el-timeline-item>
+  </el-timeline>
+</div>
+
+<script>
+  export default{
+    data(){
+      return {
+        direction: 'vertical'
+      }
+    }
+  }
+</script>
+:::
+
+### ⾃定义时间戳内容
+
+设置slot=timestamp可以自定义内容
+
+:::demo
+```html
+<div class="block">
+  <div class="radio">
+    排列：
+    <el-radio-group v-model="direction">
+      <el-radio label="vertical">竖排</el-radio>
+      <el-radio label="horizontal">横排</el-radio>
+    </el-radio-group>
+  </div>
+  <el-timeline :direction="direction">
+    <el-timeline-item timestamp="2018/4/12" placement="top">
+      <el-button slot="timestamp" type="text">2018/4/12</el-button>
+      创建成功
+    </el-timeline-item>
+    <el-timeline-item timestamp="2018/4/3" placement="top">
+      <el-button slot="timestamp" type="text">2018/4/3</el-button>
+      通过审核
+    </el-timeline-item>
+    <el-timeline-item timestamp="2018/4/2" placement="top">
+      <el-button slot="timestamp" type="text">2018/4/2</el-button>
+      活动按期开始
+    </el-timeline-item>
+  </el-timeline>
+</div>
+
+<script>
+  export default{
+    data(){
+      return {
+        direction: 'vertical'
+      }
+    }
+  }
+</script>
+```
+:::
+
+### Timeline Attributes
+| 参数      | 说明    | 类型      | 可选值       | 默认值   |
+|---------- |-------- |---------- |-------------  |-------- |
+| reverse | 指定节点排序方向，默认为正序 | boolean | — | false |
+| direction | 排列方向，默认为竖向 | string| vertical/horizontal | vertical |
+
+### Timeline-item Attributes
+| 参数      | 说明    | 类型      | 可选值       | 默认值   |
+|---------- |-------- |---------- |-------------  |-------- |
+| timestamp     | 时间戳 | string  | - | — |
+| hide-timestamp  | 是否隐藏时间戳 | boolean | — | false |
+| placement | 时间戳位置 | string | top / bottom | bottom |
+| type | 节点类型 | string | primary / success / warning / danger / info | - |
+| color | 节点颜色 | string | hsl / hsv / hex / rgb | - |
+| size | 节点尺寸 | string | normal / large | normal |
+| icon | 节点图标 | string | — | - |
+
+### Timeline-Item Slot
+| name | 说明 |
+|------|--------|
+| — | Timeline-Item 的内容 |
+| dot | 自定义节点 |
+| timestamp | 时间戳内容 |
diff --git a/examples/docs/zh-CN/tooltip.md b/examples/docs/zh-CN/tooltip.md
index 07eb8d03f74..8176b775fd1 100644
--- a/examples/docs/zh-CN/tooltip.md
+++ b/examples/docs/zh-CN/tooltip.md
@@ -1,54 +1,3 @@
-<script>
-  export default {
-    data() {
-      return {
-        disabled: false
-      };
-    }
-  };
-</script>
-<style>
-  .demo-tooltip {
-    .el-tooltip + .el-tooltip {
-      margin-left: 15px;
-    }
-    .box {
-      width: 400px;
-
-      .top {
-        text-align: center;
-      }
-
-      .left {
-        float: left;
-        width: 60px;
-      }
-
-      .right {
-        float: right;
-        width: 60px;
-      }
-
-      .bottom {
-        clear: both;
-        text-align: center;
-      }
-
-      .item {
-        margin: 4px;
-      }
-
-      .left .el-tooltip__popper,
-      .right .el-tooltip__popper {
-        padding: 8px 10px;
-      }
-      .el-tooltip {
-        margin-left: 0;
-      }
-    }
-  }
-</style>
-
 ## Tooltip 文字提示
 
 常用于展示鼠标 hover 时的提示信息。
@@ -190,6 +139,15 @@ Tooltip 组件提供了两个不同的主题：`dark`和`light`。
     <el-button @click="disabled = !disabled">点击{{disabled ? '开启' : '关闭'}} tooltip 功能</el-button>
   </el-tooltip>
 </template>
+<script>
+  export default {
+    data() {
+      return {
+        disabled: false
+      };
+    }
+  };
+</script>
 ```
 :::
 
@@ -205,7 +163,7 @@ tooltip 内不支持 disabled form 元素，参考[MDN](https://developer.mozill
 |  effect        |  默认提供的主题  | String            | dark/light | dark  |
 |  content        |  显示的内容，也可以通过 `slot#content` 传入 DOM  | String            | — | — |
 |  placement        |  Tooltip 的出现位置  | String           |  top/top-start/top-end/bottom/bottom-start/bottom-end/left/left-start/left-end/right/right-start/right-end |  bottom |
-|  value(v-model) |  状态是否可见  | Boolean           | — |  false |
+|  value / v-model |  状态是否可见  | Boolean           | — |  false |
 |  disabled       |  Tooltip 是否可用  | Boolean           | — |  false |
 |  offset        |  出现位置的偏移量  | Number           | — |  0 |
 |  transition     |  定义渐变动画      | String             | — | el-fade-in-linear |
@@ -216,3 +174,4 @@ tooltip 内不支持 disabled form 元素，参考[MDN](https://developer.mozill
 | popper-class | 为 Tooltip 的 popper 添加类名 | String | — | — |
 | enterable | 鼠标是否可进入到 tooltip 中 | Boolean | — | true |
 | hide-after | Tooltip 出现后自动隐藏延时，单位毫秒，为 0 则不会自动隐藏 | number | — | 0 |
+| tabindex   | Tooltip 组件的 [tabindex](https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/tabindex) | number | — | 0 |
diff --git a/examples/docs/zh-CN/transfer.md b/examples/docs/zh-CN/transfer.md
index e8cc4e7766e..e10fb11e592 100644
--- a/examples/docs/zh-CN/transfer.md
+++ b/examples/docs/zh-CN/transfer.md
@@ -1,83 +1,10 @@
-<style>
-  .demo-transfer {
-    .transfer-footer {
-      margin-left: 15px;
-      padding: 6px 5px;
-    }
-  }
-</style>
-
-<script>
-  export default {
-    data() {
-      const generateData = _ => {
-        const data = [];
-        for (let i = 1; i <= 15; i++) {
-          data.push({
-            key: i,
-            label: `备选项 ${ i }`,
-            disabled: i % 4 === 0
-          });
-        }
-        return data;
-      };
-      const generateData2 = _ => {
-        const data = [];
-        const cities = ['上海', '北京', '广州', '深圳', '南京', '西安', '成都'];
-        const pinyin = ['shanghai', 'beijing', 'guangzhou', 'shenzhen', 'nanjing', 'xian', 'chengdu'];
-        cities.forEach((city, index) => {
-          data.push({
-            label: city,
-            key: index,
-            pinyin: pinyin[index]
-          });
-        });
-        return data;
-      };
-      const generateData3 = _ => {
-        const data = [];
-        for (let i = 1; i <= 15; i++) {
-          data.push({
-            value: i,
-            desc: `备选项 ${ i }`,
-            disabled: i % 4 === 0
-          });
-        }
-        return data;
-      };
-      return {
-        data: generateData(),
-        data2: generateData2(),
-        data3: generateData3(),
-        value1: [1, 4],
-        value2: [],
-        value3: [1],
-        value4: [1],
-        value5: [],
-        filterMethod(query, item) {
-          return item.pinyin.indexOf(query) > -1;
-        },
-        renderFunc(h, option) {
-          return <span>{ option.key } - { option.label }</span>;
-        }
-      };
-    },
-
-    methods: {
-      handleChange(value, direction, movedKeys) {
-        console.log(value, direction, movedKeys);
-      }
-    }
-  };
-</script>
-
 ## Transfer 穿梭框
 
 ### 基础用法
 :::demo Transfer 的数据通过 `data` 属性传入。数据需要是一个对象数组，每个对象有以下属性：`key` 为数据的唯一性标识，`label` 为显示文本，`disabled` 表示该项数据是否禁止转移。目标列表中的数据项会同步到绑定至 `v-model` 的变量，值为数据项的 `key` 所组成的数组。当然，如果希望在初始状态时目标列表不为空，可以像本例一样为 `v-model` 绑定的变量赋予一个初始值。
 ```html
 <template>
-  <el-transfer v-model="value1" :data="data"></el-transfer>
+  <el-transfer v-model="value" :data="data"></el-transfer>
 </template>
 
 <script>
@@ -96,7 +23,7 @@
       };
       return {
         data: generateData(),
-        value1: [1, 4]
+        value: [1, 4]
       };
     }
   };
@@ -115,15 +42,15 @@
     filterable
     :filter-method="filterMethod"
     filter-placeholder="请输入城市拼音"
-    v-model="value2"
-    :data="data2">
+    v-model="value"
+    :data="data">
   </el-transfer>
 </template>
 
 <script>
   export default {
     data() {
-      const generateData2 = _ => {
+      const generateData = _ => {
         const data = [];
         const cities = ['上海', '北京', '广州', '深圳', '南京', '西安', '成都'];
         const pinyin = ['shanghai', 'beijing', 'guangzhou', 'shenzhen', 'nanjing', 'xian', 'chengdu'];
@@ -137,8 +64,8 @@
         return data;
       };
       return {
-        data2: generateData2(),
-        value2: [],
+        data: generateData(),
+        value: [],
         filterMethod(query, item) {
           return item.pinyin.indexOf(query) > -1;
         }
@@ -160,7 +87,7 @@
   <div style="text-align: center">
     <el-transfer
       style="text-align: left; display: inline-block"
-      v-model="value3"
+      v-model="value"
       filterable
       :left-default-checked="[2, 3]"
       :right-default-checked="[1]"
@@ -223,7 +150,7 @@
       };
       return {
         data: generateData(),
-        value3: [1],
+        value: [1],
         value4: [1],
         renderFunc(h, option) {
           return <span>{ option.key } - { option.label }</span>;
@@ -248,19 +175,19 @@
 ```html
 <template>
   <el-transfer
-    v-model="value5"
+    v-model="value"
     :props="{
       key: 'value',
       label: 'desc'
     }"
-    :data="data3">
+    :data="data">
   </el-transfer>
 </template>
 
 <script>
   export default {
     data() {
-      const generateData3 = _ => {
+      const generateData = _ => {
         const data = [];
         for (let i = 1; i <= 15; i++) {
           data.push({
@@ -272,8 +199,8 @@
         return data;
       };
       return {
-        data3: generateData3(),
-        value5: []
+        data: generateData(),
+        value: []
       };
     }
   };
@@ -284,6 +211,7 @@
 ### Attributes
 | 参数      | 说明    | 类型      | 可选值       | 默认值   |
 |---------- |-------- |---------- |-------------  |-------- |
+| value / v-model | 绑定值 | array | — | — |
 | data | Transfer 的数据源 | array[{ key, label, disabled }] | — | [ ] |
 | filterable | 是否可搜索 | boolean | — | false |
 | filter-placeholder | 搜索框占位符 | string | — | 请输入搜索内容 |
diff --git a/examples/docs/zh-CN/transition.md b/examples/docs/zh-CN/transition.md
index 02a7a9a1291..5f31272645d 100644
--- a/examples/docs/zh-CN/transition.md
+++ b/examples/docs/zh-CN/transition.md
@@ -35,7 +35,7 @@ Element 内应用在部分组件的过渡动画，你也可以直接使用。在
     width: 200px;
     height: 100px;
     border-radius: 4px;
-    background-color: #409EFF;
+    background-color: #2460e0;
     text-align: center;
     color: #fff;
     padding: 40px 20px;
@@ -84,7 +84,7 @@ Element 内应用在部分组件的过渡动画，你也可以直接使用。在
     width: 200px;
     height: 100px;
     border-radius: 4px;
-    background-color: #409EFF;
+    background-color: #2460e0;
     text-align: center;
     color: #fff;
     padding: 40px 20px;
@@ -131,7 +131,7 @@ Element 内应用在部分组件的过渡动画，你也可以直接使用。在
     width: 200px;
     height: 100px;
     border-radius: 4px;
-    background-color: #409EFF;
+    background-color: #2460e0;
     text-align: center;
     color: #fff;
     padding: 40px 20px;
@@ -146,35 +146,10 @@ Element 内应用在部分组件的过渡动画，你也可以直接使用。在
 
 ```js
 // fade/zoom 等
-import 'element-ui/lib/theme-chalk/base.css';
+import '@femessage/element-ui/lib/theme-chalk/base.css';
 // collapse 展开折叠
-import CollapseTransition from 'element-ui/lib/transitions/collapse-transition';
+import CollapseTransition from '@femessage/element-ui/lib/transitions/collapse-transition';
 import Vue from 'vue'
 
 Vue.component(CollapseTransition.name, CollapseTransition)
 ```
-
-<style>
-  .transition-box {
-    margin-bottom: 10px;
-    width: 200px;
-    height: 100px;
-    border-radius: 4px;
-    background-color: #409EFF;
-    text-align: center;
-    color: #fff;
-    padding: 40px 20px;
-    margin-right: 20px;
-    box-sizing: border-box;
-  }
-</style>
-
-<script>
-  module.exports = {
-    data: () => ({
-      show: true,
-      show2: true,
-      show3: true
-    })
-  }
-</script>
diff --git a/examples/docs/zh-CN/tree.md b/examples/docs/zh-CN/tree.md
index 275cf310646..33e1d891e68 100644
--- a/examples/docs/zh-CN/tree.md
+++ b/examples/docs/zh-CN/tree.md
@@ -1,392 +1,3 @@
-<style>
-  .demo-tree {
-    .leaf {
-      width: 20px;
-      background: #ddd;
-    }
-
-    .folder {
-      width: 20px;
-      background: #888;
-    }
-
-    .buttons {
-      margin-top: 20px;
-    }
-
-    .filter-tree {
-      margin-top: 20px;
-    }
-
-    .custom-tree-container {
-      display: flex;
-      margin: -24px;
-    }
-
-    .block {
-      flex: 1;
-      padding: 8px 24px 24px;
-
-      &:first-child {
-        border-right: solid 1px #eff2f6;
-      }
-
-      > p {
-        text-align: center;
-        margin: 0;
-        line-height: 4;
-      }
-    }
-
-    .custom-tree-node {
-      flex: 1;
-      display: flex;
-      align-items: center;
-      justify-content: space-between;
-      font-size: 14px;
-      padding-right: 8px;
-    }
-  }
-</style>
-
-<script>
-  const data = [{
-    label: '一级 1',
-    children: [{
-      label: '二级 1-1',
-      children: [{
-        label: '三级 1-1-1'
-      }]
-    }]
-  }, {
-    label: '一级 2',
-    children: [{
-      label: '二级 2-1',
-      children: [{
-        label: '三级 2-1-1'
-      }]
-    }, {
-      label: '二级 2-2',
-      children: [{
-        label: '三级 2-2-1'
-      }]
-    }]
-  }, {
-    label: '一级 3',
-    children: [{
-      label: '二级 3-1',
-      children: [{
-        label: '三级 3-1-1'
-      }]
-    }, {
-      label: '二级 3-2',
-      children: [{
-        label: '三级 3-2-1'
-      }]
-    }]
-  }];
-
-  const data2 = [{
-    id: 1,
-    label: '一级 1',
-    children: [{
-      id: 4,
-      label: '二级 1-1',
-      children: [{
-        id: 9,
-        label: '三级 1-1-1'
-      }, {
-        id: 10,
-        label: '三级 1-1-2'
-      }]
-    }]
-  }, {
-    id: 2,
-    label: '一级 2',
-    children: [{
-      id: 5,
-      label: '二级 2-1'
-    }, {
-      id: 6,
-      label: '二级 2-2'
-    }]
-  }, {
-    id: 3,
-    label: '一级 3',
-    children: [{
-      id: 7,
-      label: '二级 3-1'
-    }, {
-      id: 8,
-      label: '二级 3-2'
-    }]
-  }];
-
-  const data3 = [{
-    id: 1,
-    label: '一级 2',
-    children: [{
-      id: 3,
-      label: '二级 2-1',
-      children: [{
-        id: 4,
-        label: '三级 3-1-1'
-      }, {
-        id: 5,
-        label: '三级 3-1-2',
-        disabled: true
-      }]
-    }, {
-      id: 2,
-      label: '二级 2-2',
-      disabled: true,
-      children: [{
-        id: 6,
-        label: '三级 3-2-1'
-      }, {
-        id: 7,
-        label: '三级 3-2-2',
-        disabled: true
-      }]
-    }]
-  }];
-
-  const data6 = [{
-    id: 1,
-    label: '一级 1',
-    children: [{
-      id: 4,
-      label: '二级 1-1',
-      children: [{
-        id: 9,
-        label: '三级 1-1-1'
-      }, {
-        id: 10,
-        label: '三级 1-1-2'
-      }]
-    }]
-  }, {
-    id: 2,
-    label: '一级 2',
-    children: [{
-      id: 5,
-      label: '二级 2-1'
-    }, {
-      id: 6,
-      label: '二级 2-2'
-    }]
-  }, {
-    id: 3,
-    label: '一级 3',
-    children: [{
-      id: 7,
-      label: '二级 3-1'
-    }, {
-      id: 8,
-      label: '二级 3-2',
-      children: [{
-       id: 11,
-        label: '三级 3-2-1'
-      }, {
-        id: 12,
-        label: '三级 3-2-2'
-      }, {
-        id: 13,
-        label: '三级 3-2-3'
-      }]
-    }]
-  }];
-
-  let id = 1000;
-
-  const regions = [{
-    'name': 'region1'
-  }, {
-    'name': 'region2'
-  }];
-
-  let count = 1;
-
-  const props = {
-    label: 'name',
-    children: 'zones'
-  };
-
-  const props1 = {
-    label: 'name',
-    children: 'zones',
-    isLeaf: 'leaf'
-  };
-
-  const defaultProps = {
-    children: 'children',
-    label: 'label'
-  };
-
-  export default {
-    watch: {
-      filterText(val) {
-        this.$refs.tree2.filter(val);
-      }
-    },
-
-    methods: {
-      handleCheckChange(data, checked, indeterminate) {
-        console.log(data, checked, indeterminate);
-      },
-      handleNodeClick(data) {
-        console.log(data);
-      },
-      handleDragStart(node, ev) {
-        console.log('drag start', node);
-      },
-      handleDragEnter(draggingNode, dropNode, ev) {
-        console.log('tree drag enter: ', dropNode.label);
-      },
-      handleDragLeave(draggingNode, dropNode, ev) {
-        console.log('tree drag leave: ', dropNode.label);
-      },
-      handleDragOver(draggingNode, dropNode, ev) {
-        console.log('tree drag over: ', dropNode.label);
-      },
-      handleDragEnd(draggingNode, dropNode, dropType, ev) {
-        console.log('tree drag end: ', dropNode && dropNode.label, dropType);
-      },
-      handleDrop(draggingNode, dropNode, dropType, ev) {
-        console.log('tree drop: ', dropNode.label, dropType);
-      },
-      allowDrop(draggingNode, dropNode, type) {
-        if (dropNode.data.label === '二级 3-1') {
-          return type !== 'inner';
-        } else {
-          return true;
-        }
-      },
-      allowDrag(draggingNode) {
-        return draggingNode.data.label.indexOf('三级 3-2-2') === -1;
-      },
-      loadNode(node, resolve) {
-        if (node.level === 0) {
-          return resolve([{ name: 'region1' }, { name: 'region2' }]);
-        }
-        if (node.level > 3) return resolve([]);
-        var hasChild;
-        if (node.data.name === 'region1') {
-          hasChild = true;
-        } else if (node.data.name === 'region2') {
-          hasChild = false;
-        } else {
-          hasChild = Math.random() > 0.5;
-        }
-
-        setTimeout(function() {
-          var data;
-          if (hasChild) {
-            data = [{
-              name: 'zone' + count++
-            }, {
-              name: 'zone' + count++
-            }];
-          } else {
-            data = [];
-          }
-
-          resolve(data);
-        }, 500);
-      },
-      loadNode1(node, resolve) {
-        if (node.level === 0) {
-          return resolve([{ name: 'region' }]);
-        }
-        if (node.level > 1) return resolve([]);
-
-        setTimeout(() => {
-          const data = [{
-            name: 'leaf',
-            leaf: true
-          }, {
-            name: 'zone'
-          }];
-
-          resolve(data);
-        }, 500);
-      },
-      getCheckedNodes() {
-        console.log(this.$refs.tree.getCheckedNodes());
-      },
-      getCheckedKeys() {
-        console.log(this.$refs.tree.getCheckedKeys());
-      },
-      setCheckedNodes() {
-        this.$refs.tree.setCheckedNodes([
-          {
-            id: 5,
-            label: '二级 2-1'
-          },
-          {
-            id: 9,
-            label: '三级 1-1-1'
-          }
-        ]);
-      },
-      setCheckedKeys() {
-        this.$refs.tree.setCheckedKeys([3]);
-      },
-      resetChecked() {
-        this.$refs.tree.setCheckedKeys([]);
-      },
-      append(data) {
-        const newChild = { id: id++, label: 'testtest', children: [] };
-        if (!data.children) {
-          this.$set(data, 'children', []);
-        }
-        data.children.push(newChild);
-      },
-
-      remove(node, data) {
-        const parent = node.parent;
-        const children = parent.data.children || parent.data;
-        const index = children.findIndex(d => d.id === data.id);
-        children.splice(index, 1);
-      },
-
-      renderContent(h, { node, data }) {
-        return (
-          <span class="custom-tree-node">
-            <span>{node.label}</span>
-            <span>
-              <el-button size="mini" type="text" on-click={ () => this.append(data) }>Append</el-button>
-              <el-button size="mini" type="text" on-click={ () => this.remove(node, data) }>Delete</el-button>
-            </span>
-          </span>);
-      },
-
-      filterNode(value, data) {
-        if (!value) return true;
-        return data.label.indexOf(value) !== -1;
-      }
-    },
-
-    data() {
-      return {
-        data,
-        data2,
-        data3,
-        data4: JSON.parse(JSON.stringify(data2)),
-        data5: JSON.parse(JSON.stringify(data2)),
-        data6,
-        regions,
-        defaultProps,
-        props,
-        props1,
-        defaultCheckedKeys: [5],
-        defaultExpandedKeys: [2, 3],
-        filterText: ''
-      };
-    }
-  };
-</script>
-
 ## Tree 树形控件
 
 用清晰的层级结构展示信息，可展开或折叠。
@@ -527,8 +138,8 @@
 :::demo 由于在点击节点时才进行该层数据的获取，默认情况下 Tree 无法预知某个节点是否为叶子节点，所以会为每个节点添加一个下拉按钮，如果节点没有下层数据，则点击后下拉按钮会消失。同时，你也可以提前告知 Tree 某个节点是否为叶子节点，从而避免在叶子节点前渲染下拉按钮。
 ```html
 <el-tree
-  :props="props1"
-  :load="loadNode1"
+  :props="props"
+  :load="loadNode"
   lazy
   show-checkbox>
 </el-tree>
@@ -537,7 +148,7 @@
   export default {
     data() {
       return {
-        props1: {
+        props: {
           label: 'name',
           children: 'zones',
           isLeaf: 'leaf'
@@ -545,7 +156,7 @@
       };
     },
     methods: {
-      loadNode1(node, resolve) {
+      loadNode(node, resolve) {
         if (node.level === 0) {
           return resolve([{ name: 'region' }]);
         }
@@ -574,7 +185,7 @@
 :::demo 分别通过`default-expanded-keys`和`default-checked-keys`设置默认展开和默认选中的节点。需要注意的是，此时必须设置`node-key`，其值为节点数据中的一个字段名，该字段在整棵树中是唯一的。
 ```html
 <el-tree
-  :data="data2"
+  :data="data"
   show-checkbox
   node-key="id"
   :default-expanded-keys="[2, 3]"
@@ -586,7 +197,7 @@
   export default {
     data() {
       return {
-        data2: [{
+        data: [{
           id: 1,
           label: '一级 1',
           children: [{
@@ -638,7 +249,7 @@
 :::demo 通过`disabled`设置禁用状态。
 ```html
 <el-tree
-  :data="data3"
+  :data="data"
   show-checkbox
   node-key="id"
   :default-expanded-keys="[2, 3]"
@@ -649,7 +260,7 @@
   export default {
     data() {
       return {
-        data3: [{
+        data: [{
           id: 1,
           label: '一级 2',
           children: [{
@@ -693,7 +304,7 @@
 :::demo 本例展示如何获取和设置选中节点。获取和设置各有两种方式：通过 node 或通过 key。如果需要通过 key 来获取或设置，则必须设置`node-key`。
 ```html
 <el-tree
-  :data="data2"
+  :data="data"
   show-checkbox
   default-expand-all
   node-key="id"
@@ -738,7 +349,7 @@
 
     data() {
       return {
-        data2: [{
+        data: [{
           id: 1,
           label: '一级 1',
           children: [{
@@ -793,7 +404,7 @@
   <div class="block">
     <p>使用 render-content</p>
     <el-tree
-      :data="data4"
+      :data="data"
       show-checkbox
       node-key="id"
       default-expand-all
@@ -804,7 +415,7 @@
   <div class="block">
     <p>使用 scoped slot</p>
     <el-tree
-      :data="data5"
+      :data="data"
       show-checkbox
       node-key="id"
       default-expand-all
@@ -871,8 +482,8 @@
         }]
       }];
       return {
-        data4: JSON.parse(JSON.stringify(data)),
-        data5: JSON.parse(JSON.stringify(data))
+        data: JSON.parse(JSON.stringify(data)),
+        data: JSON.parse(JSON.stringify(data))
       }
     },
 
@@ -931,18 +542,18 @@
 
 <el-tree
   class="filter-tree"
-  :data="data2"
+  :data="data"
   :props="defaultProps"
   default-expand-all
   :filter-node-method="filterNode"
-  ref="tree2">
+  ref="tree">
 </el-tree>
 
 <script>
   export default {
     watch: {
       filterText(val) {
-        this.$refs.tree2.filter(val);
+        this.$refs.tree.filter(val);
       }
     },
 
@@ -956,7 +567,7 @@
     data() {
       return {
         filterText: '',
-        data2: [{
+        data: [{
           id: 1,
           label: '一级 1',
           children: [{
@@ -1077,7 +688,7 @@
 :::demo
 ```html
 <el-tree
-  :data="data6"
+  :data="data"
   node-key="id"
   default-expand-all
   @node-drag-start="handleDragStart"
@@ -1095,7 +706,7 @@
   export default {
     data() {
       return {
-        data6: [{
+        data: [{
           id: 1,
           label: '一级 1',
           children: [{
@@ -1181,6 +792,48 @@
 ```
 :::
 
+### 虚拟滚动
+
+通过 `height` 切换为虚拟滚动，使长列表拥有更好的表现
+
+**注意：当启动虚拟滚动后，懒加载、可拖拽节点功能将失效**
+:::demo
+```html
+<el-tree :data="data" nodeKey="key" :props="defaultProps" default-expand-all :height="300" show-checkbox />
+
+<script>
+  export default {
+    data() {
+      function dig(path = '0', level = 3) {
+        const list = [];
+        for (let i = 0; i < 10; i += 1) {
+          const key = `${path}-${i}`;
+          const treeNode = {
+            title: key,
+            key,
+          };
+
+          if (level > 0) {
+            treeNode.children = dig(key, level - 1);
+          }
+
+          list.push(treeNode);
+        }
+        return list;
+      }
+      return {
+        data: dig(),
+        defaultProps: {
+          children: 'children',
+          label: 'title'
+        }
+      };
+    }
+  };
+</script>
+```
+:::
+
 ### Attributes
 | 参数                  | 说明                                               | 类型                        | 可选值  | 默认值   |
 | --------------------- | ---------------------------------------- | --------------------------- | ---- | ----- |
@@ -1209,6 +862,8 @@
 | draggable             | 是否开启拖拽节点功能                                   | boolean            | —    | false |
 | allow-drag            | 判断节点能否被拖拽                  | Function(node)  | —  | —  |
 | allow-drop            | 拖拽时判定目标节点能否被放置。`type` 参数有三种情况：'prev'、'inner' 和 'next'，分别表示放置在目标节点前、插入至目标节点和放置在目标节点后 | Function(draggingNode, dropNode, type)  | —    | —     |
+| height                  | 设置虚拟滚动容器高度，设置后自动启动虚拟容器           | number                     | —    | 0 |
+| extra-line                  | 容器外数据数目，需与 height 方法结合使用           | number                     | —    | 8 |
 
 ### props
 | 参数       | 说明                | 类型     | 可选值  | 默认值  |
@@ -1234,7 +889,7 @@
 | getHalfCheckedNodes | 若节点可被选择（即 `show-checkbox` 为 `true`），则返回目前半选中的节点所组成的数组  | - |
 | getHalfCheckedKeys | 若节点可被选择（即 `show-checkbox` 为 `true`），则返回目前半选中的节点的 key 所组成的数组 | - |
 | getCurrentKey   | 获取当前被选中节点的 key，使用此方法必须设置 node-key 属性，若没有节点被选中则返回 null | — |
-| getCurrentNode  | 获取当前被选中节点的 node，若没有节点被选中则返回 null | — |
+| getCurrentNode  | 获取当前被选中节点的 data，若没有节点被选中则返回 null | — |
 | setCurrentKey   | 通过 key 设置某个节点的当前选中状态，使用此方法必须设置 node-key 属性 | (key) 待被选节点的 key，若为 null 则取消当前高亮的节点 |
 | setCurrentNode  | 通过 node 设置某个节点的当前选中状态，使用此方法必须设置 node-key 属性 | (node) 待被选节点的 node |
 | getNode         | 根据 data 或者 key 拿到 Tree 组件中的 node | (data) 要获得 node 的 key 或者 data |
diff --git a/examples/docs/zh-CN/typography.md b/examples/docs/zh-CN/typography.md
index a4736090354..1eb21203221 100644
--- a/examples/docs/zh-CN/typography.md
+++ b/examples/docs/zh-CN/typography.md
@@ -1,150 +1,151 @@
-<style>
-  .demo-typo-box {
-    height: 200px;
-    width: 200px;
-    position: relative;
-    border: 1px solid #eaeefb;
-    font-size: 40px;
-    color: #1f2d3d;
-    text-align: center;
-    line-height: 162px;
-    padding-bottom: 36px;
-    box-sizing: border-box;
-    display: inline-block;
-    margin-right: 17px;
-    border-radius: 4px;
-
-    .name {
-      position: absolute;
-      bottom: 0;
-      width: 100%;
-      height: 35px;
-      border-top: 1px solid #eaeefb;
-      font-size: 14px;
-      color: #8492a6;
-      line-height: 35px;
-      text-align: left;
-      text-indent: 10px;
-      font-family: 'Helvetica Neue';
-    }
-  }
-  .demo-typo-size {
-    .h1 {
-      font-size: 20px;
-    }
-    .h2 {
-      font-size: 18px;
-    }
-    .h3 {
-      font-size: 16px;
-    }
-    .text-regular {
-      font-size: 14px;
-    }
-    .text-small {
-      font-size: 13px;
-    }
-    .text-smaller {
-      font-size: 12px;
-    }
-    .color-dark-light {
-      color: #99a9bf;
-    }
-  }
-  .typo-PingFang {
-    font-family: 'PingFang SC';
-  }
-  .typo-Hiragino {
-    font-family: 'Hiragino Sans GB';
+<script>
+  import bus from '../../bus';
+  import { ACTION_USER_CONFIG_UPDATE } from '../../components/theme/constant.js';
+  const varMap = [
+    '$--font-size-extra-large',
+    '$--font-size-large',
+    '$--font-size-medium',
+    '$--font-size-base',
+    '$--font-size-small',
+    '$--font-size-extra-small'
+  ];
+  const original = {
+    'font_size_extra_large': '20px',
+    'font_size_large': '18px',
+    'font_size_medium': '16px',
+    'font_size_base': '14px',
+    'font_size_small': '13px',
+    'font_size_extra_small': '12px'
   }
-  .typo-Microsoft {
-    font-family: 'Microsoft YaHei';
+  export default {
+    created() {
+      bus.$on(ACTION_USER_CONFIG_UPDATE, this.setGlobal);
+    },
+    mounted() {
+      this.setGlobal();
+    },
+    methods: {
+      tintColor(color, tint) {
+        return tintColor(color, tint);
+      },
+      setGlobal() {
+        if (window.userThemeConfig) {
+          this.global = window.userThemeConfig.global;
+        }
+      }
+    },
+    data() {
+      return {
+        global: {},
+        'font_size_extra_large': '',
+        'font_size_large': '',
+        'font_size_medium': '',
+        'font_size_base': '',
+        'font_size_small': '',
+        'font_size_extra_small': ''
+      }
+    },
+    watch: {
+      global: {
+        immediate: true,
+        handler(value) {
+          varMap.forEach((v) => {
+            const key = v.replace('$--', '').replace(/-/g, '_')
+            if (value[v]) {
+              this[key] = value[v]
+            } else {
+              this[key] = original[key]
+            }
+          });
+        }
+      }
+    },
   }
-  /* 英文 */
-  .typo-Helvetica-Neue {
-    font-family: 'Helvetica Neue';
-  }
-  .typo-Helvetica {
-    font-family: 'Helvetica';
-  }
-  .typo-Arial {
-    font-family: 'Arial';
-  }
-</style>
+</script>
 
 ## Typography 字体
 
 我们对字体进行统一规范，力求在各个操作系统下都有最佳展示效果。
 
-### 中文字体
-
-<div class="demo-typo-box typo-PingFang">
-  和畅惠风
-  <div class="name">PingFang SC</div>
-</div>
-<div class="demo-typo-box typo-Hiragino">
-  和畅惠风
-  <div class="name">Hiragino Sans GB</div>
-</div>
-<div class="demo-typo-box typo-Microsoft">
-  和畅惠风
-  <div class="name">Microsoft YaHei</div>
-</div>
-
-### 英文／数字字体
-
-<div class="demo-typo-box typo-Helvetica-neue">
-  RGag
-  <div class="name">Helvetica Neue</div>
-</div>
-<div class="demo-typo-box typo-Helvetica">
-  RGag
-  <div class="name">Helvetica</div>
-</div>
-<div class="demo-typo-box typo-Arial">
-  RGag
-  <div class="name">Arial</div>
+### 字体
+<div class="demo-term-box">
+<img src="../../assets/images/term-pingfang.png" alt="">
+<img src="../../assets/images/term-hiragino.png" alt="">
+<img src="../../assets/images/term-microsoft.png" alt="">
+<img src="../../assets/images/term-sf.png" alt="">
+<img src="../../assets/images/term-helvetica.png" alt="">
+<img src="../../assets/images/term-arial.png" alt="">
 </div>
 
-### Font-family 代码
-
-```css
-font-family: "Helvetica Neue",Helvetica,"PingFang SC","Hiragino Sans GB","Microsoft YaHei","微软雅黑",Arial,sans-serif;
-```
-
-### 字体使用规范
+### 字号
 
 <table class="demo-typo-size">
   <tbody>
-    <tr>
-      <td class="h1">主标题</td>
-      <td class="h1">用 Element 快速搭建页面</td>
-      <td class="color-dark-light">20px  Extra large</td>
+  <tr
+    >
+      <td>层级</td>
+      <td>字体大小</td>
+      <td class="color-dark-light">举例</td>
+    </tr>
+    <tr
+    :style="{ fontSize: font_size_extra_small }"
+    >
+      <td>辅助文字</td>
+      <td class="color-dark-light">{{font_size_extra_small}} Extra Small</td>
+      <td>用 Element 快速搭建页面</td>
     </tr>
-    <tr>
-      <td class="h2">标题</td>
-      <td class="h2">用 Element 快速搭建页面</td>
-      <td class="color-dark-light">18px large</td>
+    <tr
+    :style="{ fontSize: font_size_small }"
+    >
+      <td>正文（小）</td>
+      <td class="color-dark-light">{{font_size_small}} Small</td>
+      <td>用 Element 快速搭建页面</td>
     </tr>
-    <tr>
-      <td class="h3">小标题</td>
-      <td class="h3">用 Element 快速搭建页面</td>
-      <td class="color-dark-light">16px Medium</td>
+    <tr
+    :style="{ fontSize: font_size_base }"
+    >
+      <td>正文</td>
+      <td class="color-dark-light">{{font_size_base}} Base</td>
+      <td>用 Element 快速搭建页面</td>
     </tr>
-    <tr>
-      <td class="text-regular">正文</td>
-      <td class="text-regular">用 Element 快速搭建页面</td>
-      <td class="color-dark-light">14px Small</td>
+    <tr
+    :style="{ fontSize: font_size_medium }"
+    >
+      <td>小标题</td>
+      <td class="color-dark-light">{{font_size_medium}} Medium</td>
+      <td>用 Element 快速搭建页面</td>
     </tr>
-    <tr>
-      <td class="text-small">正文（小）</td>
-      <td class="text-small">用 Element 快速搭建页面</td>
-      <td class="color-dark-light">13px Extra Small</td>
+    <tr
+    :style="{ fontSize: font_size_large }"
+    >
+      <td>标题</td>
+      <td class="color-dark-light">{{font_size_large}} large</td>
+      <td>用 Element 快速搭建页面</td>
     </tr>
-    <tr>
-      <td class="text-smaller">辅助文字</td>
-      <td class="text-smaller">用 Element 快速搭建页面</td>
-      <td class="color-dark-light">12px Extra Extra Small</td>
+    <tr
+    :style="{ fontSize: font_size_extra_large }"
+    >
+      <td>主标题</td>
+      <td class="color-dark-light">{{font_size_extra_large}} Extra large</td>
+      <td>用 Element 快速搭建页面</td>
     </tr>
   </tbody>
 </table>
+
+### 行高
+
+<div>
+<img class="lineH-left" src="~examples/assets/images/typography.png" />
+<ul class="lineH-right">
+<li>line-height:1 <span>无行高</span></li>
+<li>line-height:1.3 <span>紧凑</span></li>
+<li>line-height:1.5 <span>常规</span></li>
+<li>line-height:1.7 <span>宽松</span></li>
+</ul>
+</div>
+
+### Font-family 代码
+
+```css
+font-family: "Helvetica Neue",Helvetica,"PingFang SC","Hiragino Sans GB","Microsoft YaHei","微软雅黑",Arial,sans-serif;
+```
diff --git a/examples/docs/zh-CN/upload.md b/examples/docs/zh-CN/upload.md
index f87094c3ceb..9bb63957b40 100644
--- a/examples/docs/zh-CN/upload.md
+++ b/examples/docs/zh-CN/upload.md
@@ -1,122 +1,3 @@
-<style>
-  .upload-tip {
-    color: #8492a6;
-    font-size: 12px;
-    margin-top: 7px;
-  }
-  .demo-box {
-    margin-bottom: 24px;
-
-    .upload-demo {
-      width: 360px;
-    }
-    .avatar-uploader {
-      .el-upload {
-        border: 1px dashed #d9d9d9;
-        border-radius: 6px;
-        cursor: pointer;
-        position: relative;
-        overflow: hidden;
-
-        &:hover, &:focus {
-          border-color: #409EFF;
-        }
-      }
-      .avatar-uploader-icon {
-        font-size: 28px;
-        color: #8c939d;
-        width: 178px;
-        height: @width;
-        line-height: @height;
-        text-align: center;
-      }
-      .avatar {
-        width: 178px;
-        height: @width;
-        display: block;
-      }
-    }
-  }
-</style>
-<script>
-  export default {
-    data() {
-      return {
-        fileList: [{
-          name: 'food.jpeg',
-          url: 'https://fuss10.elemecdn.com/3/63/4e7f3a15429bfda99bce42a18cdd1jpeg.jpeg?imageMogr2/thumbnail/360x360/format/webp/quality/100'
-        }, {
-          name: 'food2.jpeg',
-          url: 'https://fuss10.elemecdn.com/3/63/4e7f3a15429bfda99bce42a18cdd1jpeg.jpeg?imageMogr2/thumbnail/360x360/format/webp/quality/100'
-        }],
-        fileList2: [{
-          name: 'food.jpeg',
-          url: 'https://fuss10.elemecdn.com/3/63/4e7f3a15429bfda99bce42a18cdd1jpeg.jpeg?imageMogr2/thumbnail/360x360/format/webp/quality/100'
-        }, {
-          name: 'food2.jpeg',
-          url: 'https://fuss10.elemecdn.com/3/63/4e7f3a15429bfda99bce42a18cdd1jpeg.jpeg?imageMogr2/thumbnail/360x360/format/webp/quality/100'
-        }],
-        fileList3: [{
-          name: 'food.jpeg',
-          url: 'https://fuss10.elemecdn.com/3/63/4e7f3a15429bfda99bce42a18cdd1jpeg.jpeg?imageMogr2/thumbnail/360x360/format/webp/quality/100'
-        }, {
-          name: 'food2.jpeg',
-          url: 'https://fuss10.elemecdn.com/3/63/4e7f3a15429bfda99bce42a18cdd1jpeg.jpeg?imageMogr2/thumbnail/360x360/format/webp/quality/100'
-        }],
-        imageUrl: '',
-        dialogImageUrl: '',
-        dialogVisible: false
-      };
-    },
-    methods: {
-      handleRemove(file, fileList) {
-        console.log(file, fileList);
-      },
-      beforeUpload(file) {
-        if (file.size > 40000000) {
-          console.warn(file.name + ' is too large!');
-          return false;
-        }
-        return true;
-      },
-      handlePreview(file) {
-        console.log(file);
-      },
-      handlePictureCardPreview(file) {
-        this.dialogImageUrl = file.url;
-        this.dialogVisible = true;
-      },
-      submitUpload() {
-        this.$refs.upload.submit();
-      },
-      handleAvatarSuccess(res, file) {
-        this.imageUrl = URL.createObjectURL(file.raw);
-      },
-      beforeAvatarUpload(file) {
-        const isJPG = file.type === 'image/jpeg';
-        const isLt2M = file.size / 1024 / 1024 < 2;
-
-        if (!isJPG) {
-          this.$message.error('上传头像图片只能是 JPG 格式!');
-        }
-        if (!isLt2M) {
-          this.$message.error('上传头像图片大小不能超过 2MB!');
-        }
-        return isJPG && isLt2M;
-      },
-      handleChange(file, fileList) {
-        this.fileList3 = fileList.slice(-3);
-      },
-      handleExceed(files, fileList) {
-        this.$message.warning(`当前限制选择 3 个文件，本次选择了 ${files.length} 个文件，共选择了 ${files.length + fileList.length} 个文件`);
-      },
-      beforeRemove(file, fileList) {
-        return this.$confirm(`确定移除 ${ file.name }？`);
-      }
-    }
-  }
-</script>
-
 ## Upload 上传
 
 通过点击或者拖拽上传文件
@@ -189,7 +70,7 @@
     overflow: hidden;
   }
   .avatar-uploader .el-upload:hover {
-    border-color: #409EFF;
+    border-color: #2460e0;
   }
   .avatar-uploader-icon {
     font-size: 28px;
@@ -273,6 +154,75 @@
 ```
 :::
 
+### 文件缩略图
+
+使用 `scoped-slot` 去设置缩略图模版。
+
+:::demo
+```html
+<el-upload
+  action="#"
+  list-type="picture-card"
+  :auto-upload="false">
+    <i slot="default" class="el-icon-plus"></i>
+    <div slot="file" slot-scope="{file}">
+      <img
+        class="el-upload-list__item-thumbnail"
+        :src="file.url" alt=""
+      >
+      <span class="el-upload-list__item-actions">
+        <span
+          class="el-upload-list__item-preview"
+          @click="handlePictureCardPreview(file)"
+        >
+          <i class="el-icon-zoom-in"></i>
+        </span>
+        <span
+          v-if="!disabled"
+          class="el-upload-list__item-delete"
+          @click="handleDownload(file)"
+        >
+          <i class="el-icon-download"></i>
+        </span>
+        <span
+          v-if="!disabled"
+          class="el-upload-list__item-delete"
+          @click="handleRemove(file)"
+        >
+          <i class="el-icon-delete"></i>
+        </span>
+      </span>
+    </div>
+</el-upload>
+<el-dialog :visible.sync="dialogVisible">
+  <img width="100%" :src="dialogImageUrl" alt="">
+</el-dialog>
+<script>
+  export default {
+    data() {
+      return {
+        dialogImageUrl: '',
+        dialogVisible: false,
+        disabled: false
+      };
+    },
+    methods: {
+      handleRemove(file) {
+        console.log(file);
+      },
+      handlePictureCardPreview(file) {
+        this.dialogImageUrl = file.url;
+        this.dialogVisible = true;
+      },
+      handleDownload(file) {
+        console.log(file);
+      }
+    }
+  }
+</script>
+```
+:::
+
 ### 图片列表缩略图
 
 :::demo
@@ -282,7 +232,7 @@
   action="https://jsonplaceholder.typicode.com/posts/"
   :on-preview="handlePreview"
   :on-remove="handleRemove"
-  :file-list="fileList2"
+  :file-list="fileList"
   list-type="picture">
   <el-button size="small" type="primary">点击上传</el-button>
   <div slot="tip" class="el-upload__tip">只能上传jpg/png文件，且不超过500kb</div>
@@ -291,7 +241,7 @@
   export default {
     data() {
       return {
-        fileList2: [{name: 'food.jpeg', url: 'https://fuss10.elemecdn.com/3/63/4e7f3a15429bfda99bce42a18cdd1jpeg.jpeg?imageMogr2/thumbnail/360x360/format/webp/quality/100'}, {name: 'food2.jpeg', url: 'https://fuss10.elemecdn.com/3/63/4e7f3a15429bfda99bce42a18cdd1jpeg.jpeg?imageMogr2/thumbnail/360x360/format/webp/quality/100'}]
+        fileList: [{name: 'food.jpeg', url: 'https://fuss10.elemecdn.com/3/63/4e7f3a15429bfda99bce42a18cdd1jpeg.jpeg?imageMogr2/thumbnail/360x360/format/webp/quality/100'}, {name: 'food2.jpeg', url: 'https://fuss10.elemecdn.com/3/63/4e7f3a15429bfda99bce42a18cdd1jpeg.jpeg?imageMogr2/thumbnail/360x360/format/webp/quality/100'}]
       };
     },
     methods: {
@@ -317,7 +267,7 @@
   class="upload-demo"
   action="https://jsonplaceholder.typicode.com/posts/"
   :on-change="handleChange"
-  :file-list="fileList3">
+  :file-list="fileList">
   <el-button size="small" type="primary">点击上传</el-button>
   <div slot="tip" class="el-upload__tip">只能上传jpg/png文件，且不超过500kb</div>
 </el-upload>
@@ -325,7 +275,7 @@
   export default {
     data() {
       return {
-        fileList3: [{
+        fileList: [{
           name: 'food.jpeg',
           url: 'https://fuss10.elemecdn.com/3/63/4e7f3a15429bfda99bce42a18cdd1jpeg.jpeg?imageMogr2/thumbnail/360x360/format/webp/quality/100'
         }, {
@@ -336,7 +286,7 @@
     },
     methods: {
       handleChange(file, fileList) {
-        this.fileList3 = fileList.slice(-3);
+        this.fileList = fileList.slice(-3);
       }
     }
   }
@@ -418,7 +368,7 @@
 | on-progress | 文件上传时的钩子 | function(event, file, fileList) | — | — |
 | on-change | 文件状态改变时的钩子，添加文件、上传成功和上传失败时都会被调用 | function(file, fileList) | — | — |
 | before-upload | 上传文件之前的钩子，参数为上传的文件，若返回 false 或者返回 Promise 且被 reject，则停止上传。 | function(file) | — | — |
-| before-remove | 删除文件之前的钩子，参数为上传的文件和文件列表，若返回 false 或者返回 Promise 且被 reject，则停止上传。| function(file, fileList) | — | — |
+| before-remove | 删除文件之前的钩子，参数为上传的文件和文件列表，若返回 false 或者返回 Promise 且被 reject，则停止删除。| function(file, fileList) | — | — |
 | list-type | 文件列表的类型 | string | text/picture/picture-card | text |
 | auto-upload | 是否在选取文件后立即进行上传 | boolean | — | true |
 | file-list | 上传的文件列表, 例如: [{name: 'food.jpg', url: 'https://xxx.cdn.com/xxx.jpg'}] | array | — | [] |
diff --git a/examples/entry.js b/examples/entry.js
index 4e127584e01..2f932091d89 100644
--- a/examples/entry.js
+++ b/examples/entry.js
@@ -2,14 +2,22 @@ import Vue from 'vue';
 import entry from './app';
 import VueRouter from 'vue-router';
 import Element from 'main/index.js';
-import 'packages/theme-chalk/src/index.scss';
+import hljs from 'highlight.js';
 import routes from './route.config';
-import demoBlock from './components/demo-block.vue';
-import MainFooter from './components/footer.vue';
-import MainHeader from './components/header.vue';
+import demoBlock from './components/demo-block';
+import MainFooter from './components/footer';
+import MainHeader from './components/header';
 import SideNav from './components/side-nav';
 import FooterNav from './components/footer-nav';
-import title from './i18n/title.json';
+import title from './i18n/title';
+
+import ElFormRenderer from '@femessage/el-form-renderer';
+
+import 'packages/theme-chalk/src/index.scss';
+import './demo-styles/index.scss';
+import './assets/styles/common.css';
+import './assets/styles/fonts/style.css';
+import icon from './icon.json';
 
 Vue.use(Element);
 Vue.use(VueRouter);
@@ -18,6 +26,22 @@ Vue.component('main-footer', MainFooter);
 Vue.component('main-header', MainHeader);
 Vue.component('side-nav', SideNav);
 Vue.component('footer-nav', FooterNav);
+Vue.component('el-form-renderer', ElFormRenderer);
+
+const globalEle = new Vue({
+  data: { $isEle: false } // 是否 ele 用户
+});
+
+Vue.mixin({
+  computed: {
+    $isEle: {
+      get: () => (globalEle.$data.$isEle),
+      set: (data) => {globalEle.$data.$isEle = data;}
+    }
+  }
+});
+
+Vue.prototype.$icon = icon; // Icon 列表页用
 
 const router = new VueRouter({
   mode: 'hash',
@@ -26,6 +50,11 @@ const router = new VueRouter({
 });
 
 router.afterEach(route => {
+  // https://github.com/highlightjs/highlight.js/issues/909#issuecomment-131686186
+  Vue.nextTick(() => {
+    const blocks = document.querySelectorAll('pre code:not(.hljs)');
+    Array.prototype.forEach.call(blocks, hljs.highlightBlock);
+  });
   const data = title[route.meta.lang];
   for (let val in data) {
     if (new RegExp('^' + val, 'g').test(route.name)) {
@@ -34,9 +63,10 @@ router.afterEach(route => {
     }
   }
   document.title = 'Element';
+  ga('send', 'event', 'PageView', route.name);
 });
 
 new Vue({ // eslint-disable-line
-  render: h => h(entry),
+  ...entry,
   router
 }).$mount('#app');
diff --git a/examples/extension/.gitignore b/examples/extension/.gitignore
new file mode 100644
index 00000000000..53c37a16608
--- /dev/null
+++ b/examples/extension/.gitignore
@@ -0,0 +1 @@
+dist
\ No newline at end of file
diff --git a/examples/extension/src/app.js b/examples/extension/src/app.js
new file mode 100644
index 00000000000..740093a8777
--- /dev/null
+++ b/examples/extension/src/app.js
@@ -0,0 +1,18 @@
+import Vue from 'vue';
+import App from './editor/index';
+import Element from 'main/index.js';
+import 'packages/theme-chalk/src/index.scss';
+
+export default () => {
+  Vue.use(Element, { zIndex: 100000 });
+  const root = document.createElement('div');
+  document.body.appendChild(root);
+
+  window.ga = function() {
+    console.log(arguments);
+  };
+
+  new Vue({ // eslint-disable-line
+    render: h => h(App)
+  }).$mount(root);
+};
diff --git a/examples/extension/src/background.js b/examples/extension/src/background.js
new file mode 100644
index 00000000000..48a93ef82fc
--- /dev/null
+++ b/examples/extension/src/background.js
@@ -0,0 +1,6 @@
+chrome.browserAction.onClicked.addListener(tab => {
+  chrome.tabs.executeScript(tab.id, {
+    file: 'entry.js'
+  });
+})
+;
diff --git a/examples/extension/src/editor/editor.vue b/examples/extension/src/editor/editor.vue
new file mode 100644
index 00000000000..45e5c881e96
--- /dev/null
+++ b/examples/extension/src/editor/editor.vue
@@ -0,0 +1,212 @@
+<template>
+  <div class="ext-panel" :class="{moving : moving}" :style="{top: `${top}px`, left: `${left}px`}" ref="editor" >
+    <img class="entrance touch-icon" src="./icon-entrance.png" v-show="!showSidebar" @click="toggleSidebar" />
+    <img class="close touch-icon" src="./icon-close.png" v-show="showSidebar" @click="toggleSidebar" />
+    <div class="editor" :style="{height: `${height}px`}" v-show="showSidebar">
+      <el-tabs v-model="activeTab" @tab-click="onTabClick">
+        <el-tab-pane label="Config" name="config">
+          <theme-configurator
+            :themeConfig="themeConfig"
+            :previewConfig="previewConfig"
+            :onUserConfigUpdate="onUserConfigUpdate"
+            from="extension"
+          ></theme-configurator>
+        </el-tab-pane>
+        <el-tab-pane label="Gallery" name="gallery">
+          <gallery 
+            ref='gallery'
+            :height="height"
+            :width="width - 7"
+            @action="onGalleryAction"
+          />
+        </el-tab-pane>
+      </el-tabs>
+    </div>
+  </div>
+</template>
+
+<script>
+import ThemeConfigurator from '../../../components/theme-configurator';
+import themeLoader from '../../../components/theme/loader';
+import gallery from './gallery';
+import { loadUserThemeFromLocal, saveUserThemeToLocal } from './utils';
+import bus from '../../../bus.js';
+import {
+  ACTION_APPLY_THEME
+} from '../../../components/theme/constant.js';
+
+let initX;
+let initY;
+let leftX = 0;
+let topY = 25;
+export default {
+  mixins: [themeLoader],
+  components: {
+    ThemeConfigurator,
+    gallery
+  },
+  data() {
+    return {
+      showSidebar: true,
+      previewConfig: {},
+      themeConfig: {},
+      top: topY,
+      left: leftX,
+      height: window.innerHeight - 30 * 2,
+      width: 0,
+      moving: false,
+      activeTab: 'config',
+      themeName: '',
+      userTheme: []
+    };
+  },
+  mounted() {
+    const editor = this.$refs.editor;
+    this.width = editor.offsetWidth;
+    leftX = window.innerWidth - 20 - this.width;
+    this.left = leftX;
+    editor.addEventListener('mousedown', e => {
+      initX = e.clientX;
+      initY = e.clientY;
+      leftX = this.left;
+      topY = this.top;
+      document.addEventListener('mousemove', this.moveFunc);
+    });
+    document.addEventListener('mouseup', e => {
+      document.removeEventListener('mousemove', this.moveFunc);
+      setTimeout(() => {this.moving = false;}, 0);
+    });
+    // chrome.storage.local.remove('ELEMENT_THEME_USER_CONFIG');
+    loadUserThemeFromLocal()
+      .then((result) => {
+        if (result) {
+          this.activeTab = 'gallery';
+          this.userTheme = result;
+        }
+      });
+  },
+  methods: {
+    checkLocalThemeConfig() {}, // disable mixin auto loading
+    toggleSidebar() {
+      if (this.moving) return;
+      this.showSidebar = !this.showSidebar;
+      if (!this.showSidebar) {
+        const windowWidth = window.innerWidth;
+        if (this.left + this.width * 0.5 < windowWidth * 0.5) {
+          this.left = 0;
+        } else {
+          this.left = windowWidth - 50;
+        }
+      } else {
+        this.moveEditor(this.left, this.top);
+      }
+    },
+    moveFunc(e) {
+      e.preventDefault();
+      const deltaX = initX - e.clientX;
+      const deltaY = initY - e.clientY;
+      if (Math.abs(deltaX) > 5 || Math.abs(deltaY) > 5) {
+        this.moving = true;
+      }
+      this.moveEditor(leftX - deltaX, topY - deltaY);
+    },
+    moveEditor(x, y) {
+      const showSidebar = this.showSidebar;
+      let nextTop = y;
+      if (nextTop < 0) nextTop = 0;
+      const maxTop = window.innerHeight - (showSidebar ? (this.height + 5) : 50);
+      if (nextTop > maxTop) nextTop = maxTop;
+      this.top = nextTop;
+      let nextLeft = x;
+      if (nextLeft < 0) nextLeft = 0;
+      const maxLeft = window.innerWidth - (showSidebar ? (this.width + 5) : 50);
+      if (nextLeft > maxLeft) nextLeft = maxLeft;
+      this.left = nextLeft;
+    },
+    onGalleryAction(key, value) {
+      switch (key) {
+        case 'edit':
+          this.themeName = value.name;
+          this.themeConfig = JSON.parse(value.theme);
+          bus.$emit(ACTION_APPLY_THEME, this.themeConfig);
+          this.activeTab = 'config';
+          break;
+        default:
+          return;
+      }
+    },
+    onTabClick(e) {
+      if (e && e.name === 'gallery') {
+        this.$refs.gallery.init();
+      }
+    },
+    onUserConfigUpdate(userConfig) {
+      if (this.themeName) {
+        this.userTheme.forEach((config) => {
+          if (config.name === this.themeName) {
+            config.update = Date.now();
+            config.theme = JSON.stringify(userConfig);
+          }
+        });
+      } else {
+        this.themeName = `Theme-${Date.now()}`;
+        this.userTheme.push({
+          update: Date.now(),
+          name: this.themeName,
+          theme: JSON.stringify(userConfig)
+        });
+      }
+      saveUserThemeToLocal(this.userTheme);
+    }
+  }
+};
+</script>
+<style scoped>
+.ext-panel {
+  position: fixed;
+  background: transparent;
+  user-select: none;
+  z-index: 100000;
+}
+.ext-panel.moving{
+  cursor: move;
+}
+.ext-panel.moving .touch-icon{
+  cursor: move;
+}
+.ext-panel .touch-icon{
+  cursor: pointer;
+}
+.ext-panel .close {
+  position: absolute;
+  right: 0;
+  top: 0;
+  height: 20px;
+  width: 20px;
+  z-index: 100001;
+}
+.ext-panel .entrance {
+  height: 50px;
+  width: 50px;
+}
+.ext-panel .editor {
+  overflow: hidden;
+  background: #f5f7fa;
+  border: 1px solid #ebeef5;
+  border-radius: 5px;
+  box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.1);
+  margin: 5px 5px 0 0;
+  min-width: 261px;
+}
+</style>
+<style>
+.ext-panel  .editor .el-tabs__content, .ext-panel  .editor .el-tabs--top, .ext-panel  .editor .el-tab-pane {
+  height: 100%;
+}
+.ext-panel .el-tabs__nav-scroll >div {
+  transform: translateX(60px)!important;
+}
+.ext-panel .editor-main {
+  padding: 0 18px 70px;
+}
+</style>
\ No newline at end of file
diff --git a/examples/extension/src/editor/gallery.vue b/examples/extension/src/editor/gallery.vue
new file mode 100644
index 00000000000..6e2814683ca
--- /dev/null
+++ b/examples/extension/src/editor/gallery.vue
@@ -0,0 +1,185 @@
+<template>
+  <div :style="{ 
+    height: `${height}px`,
+      width: `${width}px`
+      }"
+    class="main"
+    >
+    <ul
+      class="theme-card-list"
+    >
+      <li class="theme-card" v-for="item in userTheme" :key="item.name">
+        <theme-card type="user" :config="item" @action="onAction" from="extension"></theme-card>
+      </li>
+      <li class="theme-card">
+        <theme-card type="upload" :config="{name: 'upload'}" @action="onAction"></theme-card>
+      </li>
+    </ul>
+    <el-dialog :visible.sync="copyDialogVisible" :modal-append-to-body="false">
+      <el-form :model="copyForm" ref="copyForm" :rules="copyFormRule">
+        <el-form-item label="主题名称" prop="name">
+          <el-input v-model="copyForm.name"></el-input>
+        </el-form-item>
+      </el-form>
+      <div slot="footer" class="dialog-footer">
+        <el-button @click="closeCopyForm">取消</el-button>
+        <el-button type="primary" @click="copyToUser">确认</el-button>
+      </div>
+    </el-dialog>
+  </div>
+</template>
+
+<style scoped>
+ul, li {
+  padding: 0;
+  margin: 0;
+}
+.main {
+  overflow: auto;
+}
+.theme-card-list {
+  padding-bottom: 50px;
+  width: 90%;
+  margin: 0 auto;
+}
+.theme-card {
+  display: inline-block;
+  height: 140px;
+  height: 15vw;
+  width: 100%;
+  max-height: 230px;
+  flex: 0 0 24%;
+  cursor: default;
+  vertical-align: bottom;
+}
+</style>
+<style>
+.theme-card .theme-card-item {
+  margin-top: 0;
+}
+.theme-card .theme-card-item.is-upload {
+  height: 80%
+}
+</style>
+
+<script>
+import ThemeCard from '../../../components/theme/theme-card.vue';
+import { loadUserThemeFromLocal, saveUserThemeToLocal } from './utils';
+
+export default {
+  props: {
+    height: Number,
+    width: Number
+  },
+  data() {
+    return {
+      userTheme: [],
+      copyDialogVisible: false,
+      copyForm: {},
+      copyFormRule: {
+        name: [{
+          validator: this.validateCopyName,
+          trigger: 'blur'
+        }]
+      }
+    };
+  },
+  components: {
+    ThemeCard
+  },
+  mounted() {
+    this.init();
+  },
+  methods: {
+    init() {
+      loadUserThemeFromLocal().then(result => {
+        if (!result) return;
+        this.userTheme = result;
+      });
+    },
+    onAction(key, value) {
+      switch (key) {
+        case 'copy':
+          this.openCopyForm(value.theme);
+          break;
+        case 'upload':
+          this.openCopyForm(value);
+          break;
+        case 'delete':
+          this.$confirm('确定要删除这个主题?', '提示', {
+            confirmButtonText: '确认',
+            cancelButtonText: '取消',
+            type: 'warning'
+          }).then(() => {
+            this.deleteUserThemeByName(value.name);
+          }).catch(() => {});
+          break;
+        case 'rename':
+          this.openRenameForm(value.name);
+          break;
+        default:
+          this.$emit('action', key, value);
+          return;
+      }
+    },
+    openCopyForm(theme) {
+      this.copyForm.theme = theme;
+      this.copyDialogVisible = true;
+    },
+    openRenameForm(name) {
+      this.copyForm.oldname = name;
+      this.copyDialogVisible = true;
+    },
+    closeCopyForm() {
+      this.copyDialogVisible = false;
+      this.$nextTick(() => {
+        this.copyForm = {};
+      });
+    },
+    validateCopyName(rule, value, callback) {
+      if (!value) {
+        callback(new Error('主题名称是必填项'));
+      } else if (this.filterUserThemeByName(value).length > 0) {
+        callback(new Error('主题名称重复'));
+      } else {
+        callback();
+      }
+    },
+    copyToUser() {
+      this.$refs.copyForm.validate((valid) => {
+        if (valid) {
+          const { theme, name, oldname } = this.copyForm;
+          if (theme) {
+            // copy
+            this.userTheme.push({
+              update: Date.now(),
+              name,
+              theme
+            });
+          } else {
+            // rename
+            this.userTheme.forEach((config) => {
+              if (config.name === oldname) {
+                config.update = Date.now();
+                config.name = name;
+              }
+            });
+          }
+          this.saveToLocal();
+          this.closeCopyForm();
+        }
+      });
+    },
+    filterUserThemeByName(name, include = true) {
+      return this.userTheme.filter((theme) => (include ? theme.name === name : theme.name !== name));
+    },
+    saveToLocal() {
+      saveUserThemeToLocal(this.userTheme);
+    },
+    deleteUserThemeByName(name) {
+      this.userTheme = this.filterUserThemeByName(name, false);
+      this.saveToLocal();
+    }
+  }
+};
+</script>
\ No newline at end of file
diff --git a/examples/extension/src/editor/icon-close.png b/examples/extension/src/editor/icon-close.png
new file mode 100644
index 00000000000..d102a54044a
Binary files /dev/null and b/examples/extension/src/editor/icon-close.png differ
diff --git a/examples/extension/src/editor/icon-entrance.png b/examples/extension/src/editor/icon-entrance.png
new file mode 100644
index 00000000000..8effde9addb
Binary files /dev/null and b/examples/extension/src/editor/icon-entrance.png differ
diff --git a/examples/extension/src/editor/index.vue b/examples/extension/src/editor/index.vue
new file mode 100644
index 00000000000..a148afca3a6
--- /dev/null
+++ b/examples/extension/src/editor/index.vue
@@ -0,0 +1,13 @@
+<template>
+  <editor />
+</template>
+
+<script>
+import editor from './editor';
+
+export default {
+  components: {
+    editor
+  }
+};
+</script>
diff --git a/examples/extension/src/editor/utils.js b/examples/extension/src/editor/utils.js
new file mode 100644
index 00000000000..0d1929f89c5
--- /dev/null
+++ b/examples/extension/src/editor/utils.js
@@ -0,0 +1,18 @@
+const ELEMENT_THEME_USER_CONFIG = 'ELEMENT_THEME_USER_CONFIG';
+export const loadFromLocal = (key) => {
+  return new window.Promise((resolve) => {
+    chrome.storage.local.get([key], (result) => {
+      resolve(result[key]);
+    });
+  });
+};
+export const saveToLocal = (key, value) => {
+  chrome.storage.local.set({[key]: value});
+};
+
+export const loadUserThemeFromLocal = () => {
+  return loadFromLocal(ELEMENT_THEME_USER_CONFIG);
+};
+export const saveUserThemeToLocal = (value) => {
+  saveToLocal(ELEMENT_THEME_USER_CONFIG, value);
+};
diff --git a/examples/extension/src/entry.js b/examples/extension/src/entry.js
new file mode 100644
index 00000000000..a6390bb9ade
--- /dev/null
+++ b/examples/extension/src/entry.js
@@ -0,0 +1,7 @@
+import init from './app';
+
+if (!window.ElementThemeRollerInit) {
+  window.ElementThemeRollerInit = true;
+  init();
+}
+
diff --git a/examples/extension/src/icon.png b/examples/extension/src/icon.png
new file mode 100644
index 00000000000..faca4a31ba7
Binary files /dev/null and b/examples/extension/src/icon.png differ
diff --git a/examples/extension/src/manifest.json b/examples/extension/src/manifest.json
new file mode 100644
index 00000000000..c21e0b1fd7b
--- /dev/null
+++ b/examples/extension/src/manifest.json
@@ -0,0 +1,27 @@
+{
+  "name": "Element Theme Roller",
+  "version": "0.0.9",
+  "description": "Customize all Design Tokens of Element UI and preview in real-time",
+  "web_accessible_resources": ["entry.js"],
+  "background": {
+    "scripts": [
+      "background.js"
+    ],
+    "persistent": true
+  },
+  "icons": {
+    "128": "icon.png"
+  },
+  "browser_action": {
+    "default_icon": "icon.png",
+    "default_title": "Element Theme Roller"
+  },
+  "content_security_policy": "script-src 'self' 'unsafe-eval'; object-src 'self'",
+  "manifest_version": 2,
+  "permissions": [
+    "activeTab",
+    "storage",
+    "https://*.ele.me/",
+    "https://*.elenet.me/"
+  ]
+}
\ No newline at end of file
diff --git a/examples/i18n/component.json b/examples/i18n/component.json
index 0563c8a3896..1b7c553d017 100644
--- a/examples/i18n/component.json
+++ b/examples/i18n/component.json
@@ -5,15 +5,14 @@
       "hide-text": "隐藏代码",
       "show-text": "显示代码",
       "button-text": "在线运行",
-      "tooltip-text": "前往 jsfiddle.net 运行此示例"
+      "tooltip-text": "前往 codepen.io 运行此示例"
     },
     "footer": {
       "links": "链接",
       "repo": "代码仓库",
       "community": "社区",
       "changelog": "更新日志",
-      "theme": "自定义主题工具",
-      "preview": "在线主题生成",
+      "theme": "在线主题生成器",
       "faq": "常见问题",
       "gitter": "在线讨论",
       "starter": "脚手架",
@@ -24,6 +23,7 @@
     "header": {
       "guide": "指南",
       "components": "组件",
+      "theme": "主题",
       "resource": "资源"
     },
     "nav": {
@@ -36,15 +36,14 @@
       "hide-text": "Hide",
       "show-text": "Expand",
       "button-text": "Try it!",
-      "tooltip-text": "Run this demo on jsfiddle.net"
+      "tooltip-text": "Run this demo on codepen.io"
     },
     "footer": {
       "links": "Links",
       "repo": "GitHub",
       "community": "Community",
       "changelog": "Changelog",
-      "theme": "Theme CLI tool",
-      "preview": "Online theme generator",
+      "theme": "Online Theme Roller",
       "faq": "FAQ",
       "gitter": "Gitter",
       "starter": "Starter kit",
@@ -55,6 +54,7 @@
     "header": {
       "guide": "Guide",
       "components": "Component",
+      "theme": "Theme",
       "resource": "Resource"
     },
     "nav": {
@@ -67,15 +67,14 @@
       "hide-text": "Ocultar",
       "show-text": "Mostrar",
       "button-text": "Probar",
-      "tooltip-text": "Prueba este ejemplo en jsfiddle.net"
+      "tooltip-text": "Prueba este ejemplo en codepen.io"
     },
     "footer": {
       "links": "Enlaces",
       "repo": "GitHub",
       "community": "Comunidad",
       "changelog": "Lista de cambios",
-      "theme": "Generador de temas por CLI",
-      "preview": "Generador de temas en línea",
+      "theme": "Online Theme Roller",
       "faq": "FAQ",
       "gitter": "Gitter",
       "starter": "Kit de inicio",
@@ -86,10 +85,42 @@
     "header": {
       "guide": "Guía",
       "components": "Componentes",
+      "theme": "Theme",
       "resource": "Recursos"
     },
     "nav": {
       "dropdown": "Versión: "
     }
+  },
+  {
+    "lang": "fr-FR",
+    "demo-block": {
+      "hide-text": "Réduire",
+      "show-text": "Agrandir",
+      "button-text": "Essayez!",
+      "tooltip-text": "Essayer cette démo sur codepen.io"
+    },
+    "footer": {
+      "links": "Liens",
+      "repo": "GitHub",
+      "community": "Communauté",
+      "changelog": "Changelog",
+      "theme": "Online Theme Roller",
+      "faq": "FAQ",
+      "gitter": "Gitter",
+      "starter": "Kit de démarrage",
+      "feedback": "Commentaires",
+      "contribution": "Contribution",
+      "eleme": "Eleme"
+    },
+    "header": {
+      "guide": "Guide",
+      "components": "Composants",
+      "theme": "Theme",
+      "resource": "Ressources"
+    },
+    "nav": {
+      "dropdown": "Version: "
+    }
   }
 ]
diff --git a/examples/i18n/page.json b/examples/i18n/page.json
index d91967a7dc7..1683ebab6dd 100644
--- a/examples/i18n/page.json
+++ b/examples/i18n/page.json
@@ -12,11 +12,25 @@
         "7": "使用组件 Demo 快速体验交互细节；使用前端框架封装的代码帮助工程师快速开发。",
         "8": "资源",
         "9": "下载相关资源，用其快速搭建页面原型或高保真视觉稿，提升产品设计效率。",
+        "10": "主题",
+        "11": "在线主题编辑器，可视化定制和管理站点主题、组件样式",
+        "12": "主题定制功能上线",
+        "13": "点击开始编辑",
+        "14": "尝试您的新主题",
         "lang": "zh-CN",
         "titleSize": "34",
         "paraSize": "18"
       },
       "component": {},
+      "theme": {
+        "1": "官方主题",
+        "2": "我的主题",
+        "3": "主题名称"
+      },
+      "theme-preview": {
+        "1": "返回"
+      },
+      "theme-nav": {},
       "changelog": {
         "1": "更新日志",
         "2": "zh-CN"
@@ -104,11 +118,25 @@
         "7": "Experience interaction details by strolling through component demos. Use encapsulated code to improve developing efficiency.",
         "8": "Resource",
         "9": "Download relevant design resources for shaping page prototype or visual draft, increasing design efficiency.",
+        "10": "Theme",
+        "11": "Online theme roller, visualize custom and manage site themes and component styles",
+        "12": "Theme customization is available!",
+        "13": "Click here",
+        "14": "Make your own theme",
         "lang": "en-US",
         "titleSize": "34",
         "paraSize": "18"
       },
       "component": {},
+      "theme": {
+        "1": "Official Theme",
+        "2": "My Theme",
+        "3": "Theme name"
+      },
+      "theme-preview": {
+        "1": "Back"
+      },
+      "theme-nav": {},
       "changelog": {
         "1": "Changelog",
         "2": "en-US"
@@ -196,11 +224,25 @@
         "7": "Experimenta la interacción al pasear con los ejemplos de los componentes. Utiliza el código encapsulado para mejorar la eficiencia en el desarrollo.",
         "8": "Recursos",
         "9": "Descarga los recursos de diseño relevantes para dar forma a un prototipo o borrador, aumentando la eficiencia del diseño.",
+        "10": "Theme",
+        "11": "Online theme roller, visualize custom and manage site themes and component styles",
+        "12": "Theme customization is available!",
+        "13": "Click here",
+        "14": "Make your own theme",
         "lang": "es",
         "titleSize": "34",
         "paraSize": "18"
       },
       "component": {},
+      "theme": {
+        "1": "Official Theme",
+        "2": "My Theme",
+        "3": "Theme name"
+      },
+      "theme-preview": {
+        "1": "Back"
+      },
+      "theme-nav": {},
       "changelog": {
         "1": "Lista de cambios",
         "2": "es"
@@ -274,5 +316,111 @@
         "placeholder2": "Se están desarrollando más recursos"
       }
     }
+  },
+  {
+    "lang": "fr-FR",
+    "pages": {
+      "index": {
+        "1": "Un kit de composants d'interface pour le web",
+        "2": "Element, une bibliothèque de composants web basée sur Vue 2.0 pour les développeurs, designers et chef de produits.",
+        "3": "Guide",
+        "4": "Comprendre le design, aider les designers à concevoir un produit adapté, structuré et facile d'utilisation.",
+        "5": "Détails",
+        "6": "Composants",
+        "7": "Découvrez les détails de chaque composant and parcourant les différentes démos. Utilisez l'encapsulation du code pour développer plus efficacement.",
+        "8": "Ressources",
+        "9": "Téléchargez différents outils de prototypage ou de visualisation pour un design plus efficace.",
+        "10": "Theme",
+        "11": "Online theme roller, visualize custom and manage site themes and component styles",
+        "12": "Theme customization is available!",
+        "13": "Click here",
+        "14": "Make your own theme",
+        "lang": "fr-FR",
+        "titleSize": "34",
+        "paraSize": "18"
+      },
+      "component": {},
+      "theme": {
+        "1": "Official Theme",
+        "2": "My Theme",
+        "3": "Theme name"
+      },
+      "theme-preview": {
+        "1": "Back"
+      },
+      "theme-nav": {},
+      "changelog": {
+        "1": "Changelog",
+        "2": "fr-FR"
+      },
+      "design": {
+        "1": "Principes de conception",
+        "2": "Cohérence",
+        "3": "",
+        "4": "Feedback",
+        "5": "",
+        "6": "Efficacité",
+        "7": "",
+        "8": "Controlabilité",
+        "9": "",
+        "10": "Cohérence",
+        "11": "Cohérence avec la vraie vie: ",
+        "12": "en accord avec les processus habituels de la vie réelle, conforme aux langages et habitudes des utilisateurs.",
+        "13": "Cohérence au sein de l'interface: ",
+        "14": "tout les élements doivent être cohérents entre eux et suivre les même règles, par exemple: le style global, les icônes, la position des élements, etc.",
+        "15": "Feedback",
+        "16": "Retour d'expèrience: ",
+        "17": "permets aux utilisateurs de percevoir clairement leur opérations par le biais d'animations et d'effets interactifs.",
+        "18": "Retour visuel: ",
+        "19": "reflète l'état actuel de la page via le réarrangement ou la mise à jour des éléments.",
+        "20": "Efficacité",
+        "21": "Simplifier le processus: ",
+        "22": "garde chaque operation simple et intuitive.",
+        "23": "Clair et défini: ",
+        "24": "énonce clairement ses intentions afin que l'utilisateur puisse comprendre et prendre une décision rapidement.",
+        "25": "Facile à identifier: ",
+        "26": "l'interface devrait être simple et facile d'accès, afin que les utilisateurs n'ai pas d'efforts de mémorisation à faire.",
+        "27": "Controllabilité",
+        "28": "Prise de décision: ",
+        "29": "possibilité de donner des conseils sur les opérations, mais ne jamais prendre de décisions à la place des utilisateurs",
+        "30": "Contrôle des conséquences: ",
+        "31": "les utilisateurs devraient pouvoir controller l'exécution de leurs opérations, y compris l'annulation et la suppression des opérations courantes."
+      },
+      "guide": {
+        "1": "Principes de conception",
+        "2": "Navigation"
+      },
+      "nav": {
+        "1": "Navigation",
+        "2": "La navigation a pour but de guider les utilisateurs pour qu'ils sachent ou aller et comment y parvenir. En général on peut distinguer deux types de navigation: le menu latéral ou 'sidebar' et le menu en haut de page ou 'topbar'.",
+        "3": "Choisir la bonne navigation",
+        "4": "Une navigation appropriée procure à l'utilisation une expèrience facile et fluide, alors qu'une mauvaise navigation entraîne de la confusion. Voici les différences entre les navigations 'sidebar' et 'topbar'",
+        "5": "Menu latéral",
+        "6": "Fixe la navigation sur le coté gauche, améliorant ainsi sa visibilité et facilitant le passage d'une page à l'autre. Dans ce cas, la zone en haut de la page peut contenir une barre de recherche, des liens vers de la documentation, des contacts, des boutons d'aide, etc. Utile pour des interfaces de gestion ou des sites utilitaires.",
+        "7": "Catégories de niveau 1",
+        "8": "Appropriées pour des sites avec une structure simple et un seul niveau de page. L'affichage du chemin de navigation n'est pas néccessaire.",
+        "9": "Catégories de niveau 2",
+        "10": "Le menu affiche au moins deux niveaux de navigation. Dans ce cas l'affichage du chemin de navigation est recommandé, afin que l'utilisateur sache facilement ou il se trouve.",
+        "11": "Catégories de niveau 3",
+        "12": "Appropriées pour les sites web complexes. La barre la plus à gauche gère le premier niveau de navigation, tandis que celle à coté gère le deuxième niveau ansi que d'autres options.",
+        "13": "Menu en haut de page",
+        "14": "Conforme à l'ordre normal de navigation qui va de haut en bas, ce qui rends les choses plus naturelles. Les quantités de liens et de texte sont limités par la largeur de la barre.",
+        "15": "Approprié pour les sites ayant une navigation simple et un contenu large."
+      },
+      "resource": {
+        "1": "Resources",
+        "2": "En construction.",
+        "3": "Composants Axure",
+        "4": "En important ELement UI dans Axure, vous pourrez facilement utiliser les composants durant le design des interactions",
+        "5": "Téléchargement",
+        "6": "Modèle de croquis",
+        "7": "Applique des composants d'un template Element, afin d'améliorer l'efficacité du design tout en gardant un style visuel unifié.",
+        "8": "Documentation du design des interactions",
+        "9": "Jetez un oeil à la documentation du design des interactions. Obtenez des détails sur chaque composant.",
+        "paraHeight": "1.6",
+        "placeholder1": "En construction",
+        "placeholder2": "Plus de ressources sont en développement."
+      }
+    }
   }
 ]
diff --git a/examples/i18n/route.json b/examples/i18n/route.json
index ad93c4a3c8f..dd0e9082f99 100644
--- a/examples/i18n/route.json
+++ b/examples/i18n/route.json
@@ -7,5 +7,8 @@
   },
   {
     "lang": "es"
+  },
+  {
+    "lang": "fr-FR"
   }
 ]
diff --git a/examples/i18n/theme-editor.json b/examples/i18n/theme-editor.json
new file mode 100644
index 00000000000..f88232e7fad
--- /dev/null
+++ b/examples/i18n/theme-editor.json
@@ -0,0 +1,377 @@
+[
+  {
+    "lang": "zh-CN",
+    "display-name": {
+      "border-color": "边框颜色",
+      "font-color": "文字颜色",
+      "background-color": "背景颜色",
+      "font-weight": "文字粗细",
+      "font-size": "文字大小",
+      "font-line-height": "文字行高",
+      "border-radius": "边框圆角",
+      "vertical": "纵向",
+      "horizontal": "横向",
+      "padding": "内间距",
+      "margin": "外间距",
+      "icon": "图标",
+      "placeholder": "占位符",
+      "dropdown": "下拉菜单",
+      "checked": "选中状态",
+      "active": "激活状态",
+      "hover": "鼠标悬停状态",
+      "max": "最大",
+      "medium": "中号",
+      "small": "小号",
+      "mini": "最小号",
+      "min": "最小",
+      "focus": "聚焦",
+      "selected": "选中",
+      "height": "高度",
+      "size": "大小",
+      "header": "头部",
+      "group": "分组",
+      "radius": "圆角",
+      "width": "宽度",
+      "color": "颜色",
+      "title": "标题",
+      "content": "内容",
+      "success": "成功状态",
+      "danger": "危险状态",
+      "warning": "警告状态",
+      "info": "提示状态",
+      "customed": "客制化的",
+      "disabled": "禁用状态",
+      "default": "默认",
+      "primary": "主要",
+      "inrange": "日期范围"
+    },
+    "action": {
+      "require-them-name": "主题名称是必填项",
+      "duplicate-them-name": "主题名称重复",
+      "confirm-delete-theme": "确定要删除这个主题?",
+      "max-user-theme": "已达自定义主题上限",
+      "no-preview-config": "获取主题预览配置错误",
+      "undo": "撤销",
+      "redo": "重做",
+      "notice": "提示",
+      "confirm": "确定",
+      "cancel": "取消",
+      "load-local-theme-config": "正在恢复您上次编辑的自定义主题",
+      "upload-theme": "点击上传主题",
+      "rename-theme": "修改命名",
+      "copy-theme": "复制主题",
+      "last-modified": "最近修改",
+      "reset-theme": "重置",
+      "delete-theme": "删除主题",
+      "download-theme": "下载",
+      "theme-check": "查看",
+      "theme-copy": "复制",
+      "theme-edit": "编辑",
+      "description-element": "默认主题",
+      "description-napos": "深色主题",
+      "description-kiwi": "KIWI 主题"
+    },
+    "category": {
+      "BrandColor": "品牌颜色",
+      "FunctionalColor": "辅助颜色",
+      "FontColor": "文字颜色",
+      "BorderColor": "边框颜色",
+      "BackgroundColor": "背景颜色",
+      "Other": "其他",
+      "Color": "颜色",
+      "Border": "边框",
+      "Font": "文字",
+      "Radius": "边框圆角",
+      "Shadow": "阴影",
+      "Spacing": "间距",
+      "FontSize": "文字大小",
+      "FontWeight": "文字粗细",
+      "LineHeight": "文字行高"
+    },
+    "variable-name" : {
+      "color-primary": "主题色",
+      "color-white": "基础白色",
+      "color-black": "基础黑色",
+      "color-success": "成功颜色",
+      "color-warning": "警告颜色",
+      "color-danger": "危险颜色",
+      "color-info": "信息颜色",
+      "color-text-primary": "主要文字颜色",
+      "color-text-regular": "常规文字颜色",
+      "color-text-secondary": "次要文字颜色",
+      "color-text-placeholder": "占位文字颜色",
+      "border-color-base": "一级边框颜色",
+      "border-color-light": "二级边框颜色",
+      "border-color-lighter": "三级边框颜色",
+      "border-color-extra-light": "四级边框颜色",
+      "background-color-base": "基础背景色",
+      "border-radius-base": "大圆角",
+      "border-radius-small": "小圆角",
+      "border-radius-zero": "无圆角",
+      "border-radius-circle": "圆形圆角",
+      "box-shadow-base": "基础投影",
+      "box-shadow-dark": "深色投影",
+      "box-shadow-light": "浅色投影",
+      "font-size-extra-large": "主标题文字大小",
+      "font-size-large": "标题文字大小",
+      "font-size-medium": "小标题文字大小",
+      "font-size-base": "正文文字大小",
+      "font-size-small": "正文（小）文字大小",
+      "font-size-extra-small": "辅助文字大小",
+      "font-weight-primary": "主要文字粗细",
+      "font-weight-secondary": "次要文字粗细",
+      "font-line-height-primary": "主要文字行高",
+      "font-line-height-secondary": "次要文字行高",
+      "tooltip-fill": "Dark 主题背景色",
+      "tooltip-color": "Light 主题背景色",
+      "slider-height": "滑块轨道高度",
+      "datepicker-off-font-color": "不是当前月份的日期文字颜色"
+    }
+  },
+  {
+    "lang": "en-US",
+    "variable-name" : {
+      "color-primary": "primary color",
+      "color-white": "basic white",
+      "color-black": "basic black",
+      "color-success": "success color",
+      "color-warning": "warning color",
+      "color-danger": "danger color",
+      "color-info": "info color",
+      "color-text-primary": "primary text color",
+      "color-text-regular": "regular text color",
+      "color-text-secondary": "secondary text color",
+      "color-text-placeholder": "placeholder text color",
+      "border-color-base": "border color base",
+      "border-color-light": "border color light",
+      "border-color-lighter": "border color lighter",
+      "border-color-extra-light": "border color extra light",
+      "background-color-base": "base background color",
+      "border-radius-base": "border radius base",
+      "border-radius-small": "border radius small",
+      "border-radius-circle": "border radius circle",
+      "box-shadow-base": "box shadow base",
+      "box-shadow-dark": "box shadow dark",
+      "box-shadow-light": "box shadow light",
+      "font-size-extra-large": "extra large font size",
+      "font-size-large": "large font size",
+      "font-size-medium": "medium font size",
+      "font-size-base": "base font size",
+      "font-size-small": "small font size",
+      "font-size-extra-small": "extra small font size",
+      "font-weight-primary": "primary font weight",
+      "font-weight-secondary": "secondary font weight",
+      "font-line-height-primary": "primary font line height",
+      "font-line-height-secondary": "secondary font line height"
+    },
+    "display-name": {
+      "border-color": "border color",
+      "font-color": "font color",
+      "background-color": "background color",
+      "font-weight": "font weight",
+      "font-size": "font size",
+      "font-line-height": "font line height",
+      "border-radius": "border radius"
+    },
+    "action": {
+      "require-them-name": "Theme name is required",
+      "duplicate-them-name": "Duplicate them name",
+      "confirm-delete-theme": "Are you sure you want to delete this theme?",
+      "no-preview-config": "No preview config found",
+      "max-user-theme": "Maxium user theme limit",
+      "undo": "Undo",
+      "redo": "Redo",
+      "notice": "Notice",
+      "confirm": "Confirm",
+      "cancel": "Cancel",
+      "load-local-theme-config": "Loading your last saved theme config",
+      "last-modified": "Last modified",
+      "upload-theme": "Click to upload theme",
+      "reset-theme": "Reset",
+      "rename-theme": "Rename",
+      "copy-theme": "Copy",
+      "delete-theme": "Delete",
+      "download-theme": "Download",
+      "theme-check": "Preview",
+      "theme-copy": "Copy",
+      "theme-edit": "Edit",
+      "description-element": "Default theme",
+      "description-napos": "Dark theme",
+      "description-kiwi": "kiwi theme"
+    },
+    "category": {
+      "BrandColor": "Brand Color",
+      "FunctionalColor": "Functional Color",
+      "FontColor": "Font Color",
+      "BorderColor": "Border Color",
+      "BackgroundColor": "Background Color",
+      "FontSize": "Font Size",
+      "FontWeight": "Font Weight",
+      "LineHeight": "Line Height"
+    }
+  },
+  {
+    "lang": "es",
+    "variable-name" : {
+      "color-primary": "primary color",
+      "color-white": "basic white",
+      "color-black": "basic black",
+      "color-success": "success color",
+      "color-warning": "warning color",
+      "color-danger": "danger color",
+      "color-info": "info color",
+      "color-text-primary": "primary text color",
+      "color-text-regular": "regular text color",
+      "color-text-secondary": "secondary text color",
+      "color-text-placeholder": "placeholder text color",
+      "border-color-base": "border color base",
+      "border-color-light": "border color light",
+      "border-color-lighter": "border color lighter",
+      "border-color-extra-light": "border color extra light",
+      "background-color-base": "base background color",
+      "border-radius-base": "border radius base",
+      "border-radius-small": "border radius small",
+      "border-radius-circle": "border radius circle",
+      "box-shadow-base": "box shadow base",
+      "box-shadow-dark": "box shadow dark",
+      "box-shadow-light": "box shadow light",
+      "font-size-extra-large": "extra large font size",
+      "font-size-large": "large font size",
+      "font-size-medium": "medium font size",
+      "font-size-base": "base font size",
+      "font-size-small": "small font size",
+      "font-size-extra-small": "extra small font size",
+      "font-weight-primary": "primary font weight",
+      "font-weight-secondary": "secondary font weight",
+      "font-line-height-primary": "primary font line height",
+      "font-line-height-secondary": "secondary font line height"
+    },
+    "display-name": {
+      "border-color": "border color",
+      "font-color": "font color",
+      "background-color": "background color",
+      "font-weight": "font weight",
+      "font-size": "font size",
+      "font-line-height": "font line height",
+      "border-radius": "border radius"
+    },
+    "action": {
+      "require-them-name": "Theme name is required",
+      "duplicate-them-name": "Duplicate them name",
+      "confirm-delete-theme": "Are you sure you want to delete this theme?",
+      "no-preview-config": "No preview config found",
+      "max-user-theme": "Maxium user theme limit",
+      "undo": "Undo",
+      "redo": "Redo",
+      "notice": "Notice",
+      "confirm": "Confirm",
+      "cancel": "Cancel",
+      "load-local-theme-config": "Loading your last saved theme config",
+      "last-modified": "Last modified",
+      "upload-theme": "Click to upload theme",
+      "reset-theme": "Reset",
+      "rename-theme": "Rename",
+      "copy-theme": "Copy",
+      "delete-theme": "Delete",
+      "download-theme": "Download",
+      "theme-check": "Preview",
+      "theme-copy": "Copy",
+      "theme-edit": "Edit",
+      "description-element": "Default theme",
+      "description-napos": "Dark theme",
+      "description-kiwi": "kiwi theme"
+    },
+    "category": {
+      "BrandColor": "Brand Color",
+      "FunctionalColor": "Functional Color",
+      "FontColor": "Font Color",
+      "BorderColor": "Border Color",
+      "BackgroundColor": "Background Color",
+      "FontSize": "Font Size",
+      "FontWeight": "Font Weight",
+      "LineHeight": "Line Height"
+    }
+  },
+  {
+    "lang": "fr-FR",
+    "variable-name" : {
+      "color-primary": "primary color",
+      "color-white": "basic white",
+      "color-black": "basic black",
+      "color-success": "success color",
+      "color-warning": "warning color",
+      "color-danger": "danger color",
+      "color-info": "info color",
+      "color-text-primary": "primary text color",
+      "color-text-regular": "regular text color",
+      "color-text-secondary": "secondary text color",
+      "color-text-placeholder": "placeholder text color",
+      "border-color-base": "border color base",
+      "border-color-light": "border color light",
+      "border-color-lighter": "border color lighter",
+      "border-color-extra-light": "border color extra light",
+      "background-color-base": "base background color",
+      "border-radius-base": "border radius base",
+      "border-radius-small": "border radius small",
+      "border-radius-circle": "border radius circle",
+      "box-shadow-base": "box shadow base",
+      "box-shadow-dark": "box shadow dark",
+      "box-shadow-light": "box shadow light",
+      "font-size-extra-large": "extra large font size",
+      "font-size-large": "large font size",
+      "font-size-medium": "medium font size",
+      "font-size-base": "base font size",
+      "font-size-small": "small font size",
+      "font-size-extra-small": "extra small font size",
+      "font-weight-primary": "primary font weight",
+      "font-weight-secondary": "secondary font weight",
+      "font-line-height-primary": "primary font line height",
+      "font-line-height-secondary": "secondary font line height"
+    },
+    "display-name": {
+      "border-color": "border color",
+      "font-color": "font color",
+      "background-color": "background color",
+      "font-weight": "font weight",
+      "font-size": "font size",
+      "font-line-height": "font line height",
+      "border-radius": "border radius"
+    },
+    "action": {
+      "require-them-name": "Theme name is required",
+      "duplicate-them-name": "Duplicate them name",
+      "confirm-delete-theme": "Are you sure you want to delete this theme?",
+      "no-preview-config": "No preview config found",
+      "max-user-theme": "Maxium user theme limit",
+      "undo": "Undo",
+      "redo": "Redo",
+      "notice": "Notice",
+      "confirm": "Confirm",
+      "cancel": "Cancel",
+      "load-local-theme-config": "Loading your last saved theme config",
+      "last-modified": "Last modified",
+      "upload-theme": "Click to upload theme",
+      "reset-theme": "Reset",
+      "rename-theme": "Rename",
+      "copy-theme": "Copy",
+      "delete-theme": "Delete",
+      "download-theme": "Download",
+      "theme-check": "Preview",
+      "theme-copy": "Copy",
+      "theme-edit": "Edit",
+      "description-element": "Default theme",
+      "description-napos": "Dark theme",
+      "description-kiwi": "kiwi theme"
+    },
+    "category": {
+      "BrandColor": "Brand Color",
+      "FunctionalColor": "Functional Color",
+      "FontColor": "Font Color",
+      "BorderColor": "Border Color",
+      "BackgroundColor": "Background Color",
+      "FontSize": "Font Size",
+      "FontWeight": "Font Weight",
+      "LineHeight": "Line Height"
+    }
+  }
+]
diff --git a/examples/i18n/title.json b/examples/i18n/title.json
index 91e57f36e07..1f8b3c34ae9 100644
--- a/examples/i18n/title.json
+++ b/examples/i18n/title.json
@@ -16,5 +16,11 @@
     "guide": "Guía | Element",
     "component": "Componentes | Element",
     "resource": "Recursos | Element"
+  },
+  "fr-FR": {
+    "home": "Element - Un kit de composants d'interface pour le web",
+    "guide": "Guide | Element",
+    "component": "Composants | Element",
+    "resource": "Ressources | Element"
   }
 }
diff --git a/examples/icon.json b/examples/icon.json
index 0355a886543..2d9999a31e3 100644
--- a/examples/icon.json
+++ b/examples/icon.json
@@ -1 +1 @@
-["info","error","success","warning","question","back","arrow-left","arrow-down","arrow-right","arrow-up","caret-left","caret-bottom","caret-top","caret-right","d-arrow-left","d-arrow-right","minus","plus","remove","circle-plus","remove-outline","circle-plus-outline","close","check","circle-close","circle-check","circle-close-outline","circle-check-outline","zoom-out","zoom-in","d-caret","sort","sort-down","sort-up","tickets","document","goods","sold-out","news","message","date","printer","time","bell","mobile-phone","service","view","menu","more","more-outline","star-on","star-off","location","location-outline","phone","phone-outline","picture","picture-outline","delete","search","edit","edit-outline","rank","refresh","share","setting","upload","upload2","download","loading"]
\ No newline at end of file
+["platform-eleme","eleme","delete-solid","delete","s-tools","setting","user-solid","user","phone","phone-outline","more","more-outline","star-on","star-off","s-goods","goods","warning","warning-outline","question","info","remove","circle-plus","success","error","zoom-in","zoom-out","remove-outline","circle-plus-outline","circle-check","circle-close","s-help","help","minus","plus","check","close","picture","picture-outline","picture-outline-round","upload","upload2","download","camera-solid","camera","video-camera-solid","video-camera","message-solid","bell","s-cooperation","s-order","s-platform","s-fold","s-unfold","s-operation","s-promotion","s-home","s-release","s-ticket","s-management","s-open","s-shop","s-marketing","s-flag","s-comment","s-finance","s-claim","s-custom","s-opportunity","s-data","s-check","s-grid","menu","share","d-caret","caret-left","caret-right","caret-bottom","caret-top","bottom-left","bottom-right","back","right","bottom","top","top-left","top-right","arrow-left","arrow-right","arrow-down","arrow-up","d-arrow-left","d-arrow-right","video-pause","video-play","refresh","refresh-right","refresh-left","finished","sort","sort-up","sort-down","rank","loading","view","c-scale-to-original","date","edit","edit-outline","folder","folder-opened","folder-add","folder-remove","folder-delete","folder-checked","tickets","document-remove","document-delete","document-copy","document-checked","document","document-add","printer","paperclip","takeaway-box","search","monitor","attract","mobile","scissors","umbrella","headset","brush","mouse","coordinate","magic-stick","reading","data-line","data-board","pie-chart","data-analysis","collection-tag","film","suitcase","suitcase-1","receiving","collection","files","notebook-1","notebook-2","toilet-paper","office-building","school","table-lamp","house","no-smoking","smoking","shopping-cart-full","shopping-cart-1","shopping-cart-2","shopping-bag-1","shopping-bag-2","sold-out","sell","present","box","bank-card","money","coin","wallet","discount","price-tag","news","guide","male","female","thumb","cpu","link","connection","open","turn-off","set-up","chat-round","chat-line-round","chat-square","chat-dot-round","chat-dot-square","chat-line-square","message","postcard","position","turn-off-microphone","microphone","close-notification","bangzhu","time","odometer","crop","aim","switch-button","full-screen","copy-document","mic","stopwatch","medal-1","medal","trophy","trophy-1","first-aid-kit","discover","place","location","location-outline","location-information","add-location","delete-location","map-location","alarm-clock","timer","watch-1","watch","lock","unlock","key","service","mobile-phone","bicycle","truck","ship","basketball","football","soccer","baseball","wind-power","light-rain","lightning","heavy-rain","sunrise","sunrise-1","sunset","sunny","cloudy","partly-cloudy","cloudy-and-sunny","moon","moon-night","dish","dish-1","food","chicken","fork-spoon","knife-fork","burger","tableware","sugar","dessert","ice-cream","hot-water","water-cup","coffee-cup","cold-drink","goblet","goblet-full","goblet-square","goblet-square-full","refrigerator","grape","watermelon","cherry","apple","pear","orange","coffee","ice-tea","ice-drink","milk-tea","potato-strips","lollipop","ice-cream-square","ice-cream-round"]
\ No newline at end of file
diff --git a/examples/index.tpl b/examples/index.tpl
index f6d791ba796..e97b4be4197 100644
--- a/examples/index.tpl
+++ b/examples/index.tpl
@@ -4,8 +4,10 @@
     <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_137970_p1tpzmomxp9cnmi.css">
-    <link rel='mask-icon' href="https://raw.githubusercontent.com/ElemeFE/element/dev/examples/assets/images/element-logo-small.svg" color="#409EFF">
-    <title>Element</title>
+    <link rel='mask-icon' href="https://raw.githubusercontent.com/ElemeFE/element/dev/examples/assets/images/element-logo-small.svg" color="#2460e0">
+    <link rel="stylesheet" href="//shadow.elemecdn.com/npm/highlight.js@9.3.0/styles/color-brewer.css">
+    <title>Element - The world's most popular Vue UI framework</title>
+    <meta name="description" content="Element，一套为开发者、设计师和产品经理准备的基于 Vue 2.0 的桌面端组件库" />
   </head>
   <body>
     <script>
@@ -13,9 +15,12 @@
         document.write('<script src="//cdn.jsdelivr.net/npm/es6-promise@4.1.1/dist/es6-promise.min.js"><\/script><script>ES6Promise.polyfill()<\/script>')
       }
     </script>
-    <div id="app"></div><% if (process.env.NODE_ENV === 'production') { %>
-    <script src="//cdn.jsdelivr.net/npm/vue@2.5.2/dist/vue.runtime.min.js"></script>
-    <script src="//cdn.jsdelivr.net/npm/vue-router@2.7.0/dist/vue-router.min.js"></script><% } %>
+    <div id="app"></div>
+    <% if (process.env.NODE_ENV === 'production') { %>
+      <script src="//shadow.elemecdn.com/npm/vue@2.5.21/dist/vue.runtime.min.js"></script>
+      <script src="//shadow.elemecdn.com/npm/vue-router@3.0.1/dist/vue-router.min.js"></script>
+      <script src="//shadow.elemecdn.com/app/element/highlight.pack.b1f71b31-3c07-11e9-ba1a-55bba1877129.js"></script>
+    <% } %>
   </body>
   <% if (process.env.NODE_ENV === 'production') { %><script>
     (function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){
@@ -31,4 +36,9 @@
       ga('send', 'pageview');
     });
   </script><% } %>
+  <% if (process.env.NODE_ENV !== 'production') { %><script>
+    var ga = function() {
+      console.log(arguments)
+    };
+  </script><% } %>
 </html>
diff --git a/examples/nav.config.json b/examples/nav.config.json
index 651e6910fbe..d1ee8a4bca9 100644
--- a/examples/nav.config.json
+++ b/examples/nav.config.json
@@ -59,6 +59,10 @@
               "path": "/typography",
               "title": "Typography 字体"
             },
+            {
+              "path": "/border",
+              "title": "Border 边框"
+            },
             {
               "path": "/icon",
               "title": "Icon 图标"
@@ -66,6 +70,10 @@
             {
               "path": "/button",
               "title": "Button 按钮"
+            },
+            {
+              "path": "/link",
+              "title": "Link 文字链接"
             }
           ]
         },
@@ -118,7 +126,8 @@
             },
             {
               "path": "/upload",
-              "title": "Upload 上传"
+              "title": "Upload 上传",
+              "disabled": true
             },
             {
               "path": "/rate",
@@ -164,6 +173,10 @@
             {
               "path": "/badge",
               "title": "Badge 标记"
+            },
+            {
+              "path": "/avatar",
+              "title": "Avatar 头像"
             }
           ]
         },
@@ -207,6 +220,10 @@
               "path": "/breadcrumb",
               "title": "Breadcrumb 面包屑"
             },
+            {
+              "path": "/page-header",
+              "title": "PageHeader 页头"
+            },
             {
               "path": "/dropdown",
               "title": "Dropdown 下拉菜单"
@@ -232,6 +249,10 @@
               "path": "/popover",
               "title": "Popover 弹出框"
             },
+            {
+              "path": "/popconfirm",
+              "title": "Popconfirm 气泡确认框"
+            },
             {
               "path": "/card",
               "title": "Card 卡片"
@@ -243,6 +264,125 @@
             {
               "path": "/collapse",
               "title": "Collapse 折叠面板"
+            },
+            {
+              "path": "/timeline",
+              "title": "Timeline 时间线"
+            },
+            {
+              "path": "/divider",
+              "title": "Divider 分割线"
+            },
+            {
+              "path": "/calendar",
+              "title": "Calendar 日历"
+            },
+            {
+              "path": "/image",
+              "title": "Image 图片",
+              "disabled": true
+            },
+            {
+              "path": "/backtop",
+              "title": "Backtop 回到顶部"
+            },
+            {
+              "path": "/infiniteScroll",
+              "title": "InfiniteScroll 无限滚动"
+            },
+            {
+              "path": "/drawer",
+              "title": "Drawer 抽屉"
+            }
+          ]
+        },
+        {
+          "groupName": "Input-Enhance",
+          "list": [
+            {
+              "path": "/input-id-card",
+              "title": "InputIdCard 身份证输入框"
+            },
+            {
+              "path": "/input-phone",
+              "title": "InputPhone 手机号输入框"
+            },
+            {
+              "path": "/input-email",
+              "title": "InputEmail 邮箱地址输入框"
+            },
+            {
+              "path": "/input-url",
+              "title": "InputUrl URL 输入框"
+            }
+          ]
+        },
+        {
+          "groupName": "Wheel",
+          "list": [
+            {
+              "path": "/lr-container",
+              "title": "LrContainer 左右布局容器"
+            },
+            {
+              "path": "/loading-button",
+              "title": "LoadingButton 加载按钮"
+            },
+            {
+              "path": "/message-box-center",
+              "title": "MessageBoxCenter 居中提示弹窗"
+            },
+            {
+              "path": "/tabs-dotted",
+              "title": "TabsDotted 点分Tab标签"
+            },
+            {
+              "path": "/data-mapper",
+              "title": "DataMapper 数据映射"
+            },
+            {
+              "path": "/checkbox-img-button",
+              "title": "CheckboxImgButton checkbox扩展"
+            },
+            {
+              "path": "/radio-img-button",
+              "title": "RadioImgButton radio扩展"
+            },
+            {
+              "path": "/icon-checkbox",
+              "title": "IconCheckbox 多选按钮"
+            },
+            {
+              "path": "/status-steps",
+              "title": "StatusSteps 简约步骤条"
+            },
+            {
+              "path": "/panel",
+              "title": "Panel 展示板"
+            },
+            {
+              "path": "/skeleton",
+              "title": "Skeleton 骨架屏"
+            },
+            {
+              "path": "/empty",
+              "title": "Empty 无数据"
+            },
+            {
+              "path": "/affix",
+              "title": "Affix 固钉"
+            },
+            {
+              "path": "/edit-table",
+              "title": "EditTable 可编辑表格组件"
+            },
+            {
+              "path": "/switch-enhance",
+              "title": "SwitchEnhance 开关增强"
+            },
+            {
+              "path": "/button-group-enhance",
+              "title": "ButtonGroupEnhance 可折叠按钮组"
             }
           ]
         }
@@ -309,6 +449,10 @@
               "path": "/typography",
               "title": "Typography"
             },
+            {
+              "path": "/border",
+              "title": "Border"
+            },
             {
               "path": "/icon",
               "title": "Icon"
@@ -316,6 +460,10 @@
             {
               "path": "/button",
               "title": "Button"
+            },
+            {
+              "path": "/link",
+              "title": "Link"
             }
           ]
         },
@@ -457,6 +605,10 @@
               "path": "/breadcrumb",
               "title": "Breadcrumb"
             },
+            {
+              "path": "/page-header",
+              "title": "PageHeader"
+            },
             {
               "path": "/dropdown",
               "title": "Dropdown"
@@ -482,6 +634,10 @@
               "path": "/popover",
               "title": "Popover"
             },
+            {
+              "path": "/popconfirm",
+              "title": "Popconfirm"
+            },
             {
               "path": "/card",
               "title": "Card"
@@ -493,6 +649,124 @@
             {
               "path": "/collapse",
               "title": "Collapse"
+            },
+            {
+              "path": "/timeline",
+              "title": "Timeline"
+            },
+            {
+              "path": "/divider",
+              "title": "Divider"
+            },
+            {
+              "path": "/calendar",
+              "title": "Calendar"
+            },
+            {
+              "path": "/image",
+              "title": "Image",
+              "disabled": true
+            },
+            {
+              "path": "/backtop",
+              "title": "Backtop"
+            },
+            {
+              "path": "/infiniteScroll",
+              "title": "InfiniteScroll"
+            },
+            {
+              "path": "/avatar",
+              "title": "Avatar"
+            },
+            {
+              "path": "/drawer",
+              "title": "Drawer"
+            }
+          ]
+        },
+        {
+          "groupName": "SPaaS",
+          "list": [
+            {
+              "path": "/lr-container",
+              "title": "LrContainer"
+            },
+            {
+              "path": "/loading-button",
+              "title": "LoadingButton"
+            },
+            {
+              "path": "/message-box-center",
+              "title": "MessageBoxCenter"
+            },
+            {
+              "path": "/tabs-dotted",
+              "title": "TabsDotted"
+            },
+            {
+              "path": "/data-mapper",
+              "title": "DataMapper"
+            },
+            {
+              "path": "/checkbox-img-button",
+              "title": "CheckboxImgButton"
+            },
+            {
+              "path": "/radio-img-button",
+              "title": "RadioImgButton"
+            },
+            {
+              "path": "/icon-checkbox",
+              "title": "IconCheckbox"
+            },
+            {
+              "path": "/status-steps",
+              "title": "StatusSteps"
+            },
+            {
+              "path": "/panel",
+              "title": "Panel"
+            },
+            {
+              "path": "/skeleton",
+              "title": "Skeleton"
+            },
+            {
+              "path": "/empty",
+              "title": "Empty"
+            },
+            {
+              "path": "/affix",
+              "title": "Affix"
+            },
+            {
+              "path": "/input-phone",
+              "title": "InputPhone"
+            },
+            {
+              "path": "/input-id-card",
+              "title": "InputIdCard"
+            },
+            {
+              "path": "/edit-table",
+              "title": "EditTable"
+            },
+            {
+              "path": "/input-email",
+              "title": "InputEmail"
+            },
+            {
+              "path": "/switch-enhance",
+              "title": "SwitchEnhance"
+            },
+            {
+              "path": "/input-url",
+              "title": "InputUrl"
+            },
+            {
+              "path": "/button-group-enhance",
+              "title": "ButtonGroupEnhance"
             }
           ]
         }
@@ -559,6 +833,10 @@
               "path": "/typography",
               "title": "Typography"
             },
+            {
+              "path": "/border",
+              "title": "Border"
+            },
             {
               "path": "/icon",
               "title": "Icon"
@@ -566,6 +844,10 @@
             {
               "path": "/button",
               "title": "Button"
+            },
+            {
+              "path": "/link",
+              "title": "Link"
             }
           ]
         },
@@ -618,7 +900,8 @@
             },
             {
               "path": "/upload",
-              "title": "Upload"
+              "title": "Upload",
+              "disabled": true
             },
             {
               "path": "/rate",
@@ -707,6 +990,10 @@
               "path": "/breadcrumb",
               "title": "Breadcrumb"
             },
+            {
+              "path": "/page-header",
+              "title": "PageHeader"
+            },
             {
               "path": "/dropdown",
               "title": "Dropdown"
@@ -732,6 +1019,10 @@
               "path": "/popover",
               "title": "Popover"
             },
+            {
+              "path": "/popconfirm",
+              "title": "Popconfirm"
+            },
             {
               "path": "/card",
               "title": "Card"
@@ -743,6 +1034,506 @@
             {
               "path": "/collapse",
               "title": "Collapse"
+            },
+            {
+              "path": "/timeline",
+              "title": "Timeline"
+            },
+            {
+              "path": "/divider",
+              "title": "Divider"
+            },
+            {
+              "path": "/calendar",
+              "title": "Calendar"
+            },
+            {
+              "path": "/image",
+              "title": "Image"
+            },
+            {
+              "path": "/backtop",
+              "title": "Backtop"
+            },
+            {
+              "path": "/infiniteScroll",
+              "title": "InfiniteScroll"
+            },
+            {
+              "path": "/avatar",
+              "title": "Avatar"
+            },
+            {
+              "path": "/drawer",
+              "title": "Drawer"
+            }
+          ]
+        },
+        {
+          "groupName": "SPaaS",
+          "list": [
+            {
+              "path": "/lr-container",
+              "title": "LrContainer"
+            },
+            {
+              "path": "/loading-button",
+              "title": "LoadingButton"
+            },
+            {
+              "path": "/message-box-center",
+              "title": "MessageBoxCenter"
+            },
+            {
+              "path": "/tabs-dotted",
+              "title": "TabsDotted"
+            },
+            {
+              "path": "/data-mapper",
+              "title": "DataMapper"
+            },
+            {
+              "path": "/checkbox-img-button",
+              "title": "CheckboxImgButton"
+            },
+            {
+              "path": "/radio-img-button",
+              "title": "RadioImgButton"
+            },
+            {
+              "path": "/icon-checkbox",
+              "title": "IconCheckbox"
+            },
+            {
+              "path": "/status-steps",
+              "title": "StatusSteps"
+            },
+            {
+              "path": "/panel",
+              "title": "Panel"
+            },
+            {
+              "path": "/skeleton",
+              "title": "Skeleton"
+            },
+            {
+              "path": "/empty",
+              "title": "Empty"
+            },
+            {
+              "path": "/affix",
+              "title": "Affix"
+            },
+            {
+              "path": "/input-phone",
+              "title": "InputPhone"
+            },
+            {
+              "path": "/input-id-card",
+              "title": "InputIdCard"
+            },
+            {
+			        "path": "/edit-table",
+              "title": "EditTable"
+            },
+            {
+              "path": "/input-email",
+              "title": "InputEmail"
+            },
+            {
+              "path": "/switch-enhance",
+              "title": "SwitchEnhance"
+            },
+            {
+              "path": "/input-url",
+              "title": "InputUrl"
+            },
+            {
+              "path": "/button-group-enhance",
+              "title": "ButtonGroupEnhance"
+            }
+          ]
+        }
+      ]
+    }
+  ],
+  "fr-FR": [
+    {
+      "name": "Changelog",
+      "path": "/changelog"
+    },
+    {
+      "name": "Element pour React",
+      "href": "https://elemefe.github.io/element-react/"
+    },
+    {
+      "name": "Element pour Angular",
+      "href": "https://element-angular.faas.ele.me/"
+    },
+    {
+      "name": "Développement",
+      "children": [
+        {
+          "path": "/installation",
+          "name": "Installation"
+        },
+        {
+          "path": "/quickstart",
+          "name": "Démarrer"
+        },
+        {
+          "path": "/i18n",
+          "name": "Internationalisation"
+        },
+        {
+          "path": "/custom-theme",
+          "name": "Thème"
+        },
+        {
+          "path": "/transition",
+          "name": "Transitions"
+        }
+      ]
+    },
+    {
+      "name": "Composants",
+      "groups": [
+        {
+          "groupName": "Basiques",
+          "list": [
+            {
+              "path": "/layout",
+              "title": "Layout"
+            },
+            {
+              "path": "/container",
+              "title": "Layout Container"
+            },
+            {
+              "path": "/color",
+              "title": "Color"
+            },
+            {
+              "path": "/typography",
+              "title": "Typography"
+            },
+            {
+              "path": "/border",
+              "title": "Border"
+            },
+            {
+              "path": "/icon",
+              "title": "Icon"
+            },
+            {
+              "path": "/button",
+              "title": "Button"
+            },
+            {
+              "path": "/link",
+              "title": "Link"
+            }
+          ]
+        },
+        {
+          "groupName": "Formulaire",
+          "list": [
+            {
+              "path": "/radio",
+              "title": "Radio"
+            },
+            {
+              "path": "/checkbox",
+              "title": "Checkbox"
+            },
+            {
+              "path": "/input",
+              "title": "Input"
+            },
+            {
+              "path": "/input-number",
+              "title": "InputNumber"
+            },
+            {
+              "path": "/select",
+              "title": "Select"
+            },
+            {
+              "path": "/cascader",
+              "title": "Cascader"
+            },
+            {
+              "path": "/switch",
+              "title": "Switch"
+            },
+            {
+              "path": "/slider",
+              "title": "Slider"
+            },
+            {
+              "path": "/time-picker",
+              "title": "TimePicker"
+            },
+            {
+              "path": "/date-picker",
+              "title": "DatePicker"
+            },
+            {
+              "path": "/datetime-picker",
+              "title": "DateTimePicker"
+            },
+            {
+              "path": "/upload",
+              "title": "Upload"
+            },
+            {
+              "path": "/rate",
+              "title": "Rate"
+            },
+            {
+              "path": "/color-picker",
+              "title": "ColorPicker"
+            },
+            {
+              "path": "/transfer",
+              "title": "Transfer"
+            },
+            {
+              "path": "/form",
+              "title": "Form"
+            }
+          ]
+        },
+        {
+          "groupName": "Données",
+          "list": [
+            {
+              "path": "/table",
+              "title": "Table"
+            },
+            {
+              "path": "/tag",
+              "title": "Tag"
+            },
+            {
+              "path": "/progress",
+              "title": "Progress"
+            },
+            {
+              "path": "/tree",
+              "title": "Tree"
+            },
+            {
+              "path": "/pagination",
+              "title": "Pagination"
+            },
+            {
+              "path": "/badge",
+              "title": "Badge"
+            }
+          ]
+        },
+        {
+          "groupName": "Notifier",
+          "list": [
+            {
+              "path": "/alert",
+              "title": "Alert"
+            },
+            {
+              "path": "/loading",
+              "title": "Loading"
+            },
+            {
+              "path": "/message",
+              "title": "Message"
+            },
+            {
+              "path": "/message-box",
+              "title": "MessageBox"
+            },
+            {
+              "path": "/notification",
+              "title": "Notification"
+            }
+          ]
+        },
+        {
+          "groupName": "Navigation",
+          "list": [
+            {
+              "path": "/menu",
+              "title": "NavMenu"
+            },
+            {
+              "path": "/tabs",
+              "title": "Tabs"
+            },
+            {
+              "path": "/breadcrumb",
+              "title": "Breadcrumb"
+            },
+            {
+              "path": "/page-header",
+              "title": "PageHeader"
+            },
+            {
+              "path": "/dropdown",
+              "title": "Dropdown"
+            },
+            {
+              "path": "/steps",
+              "title": "Steps"
+            }
+          ]
+        },
+        {
+          "groupName": "Autres",
+          "list": [
+            {
+              "path": "/dialog",
+              "title": "Dialog"
+            },
+            {
+              "path": "/tooltip",
+              "title": "Tooltip"
+            },
+            {
+              "path": "/popover",
+              "title": "Popover"
+            },
+            {
+              "path": "/popconfirm",
+              "title": "Popconfirm"
+            },
+            {
+              "path": "/card",
+              "title": "Card"
+            },
+            {
+              "path": "/carousel",
+              "title": "Carousel"
+            },
+            {
+              "path": "/collapse",
+              "title": "Collapse"
+            },
+            {
+              "path": "/timeline",
+              "title": "Timeline"
+            },
+            {
+              "path": "/divider",
+              "title": "Divider"
+            },
+            {
+              "path": "/calendar",
+              "title": "Calendar"
+            },
+            {
+              "path": "/image",
+              "title": "Image"
+            },
+            {
+              "path": "/backtop",
+              "title": "Backtop"
+            },
+            {
+              "path": "/infiniteScroll",
+              "title": "InfiniteScroll"
+            },
+            {
+              "path": "/avatar",
+              "title": "Avatar"
+            },
+            {
+              "path": "/drawer",
+              "title": "Drawer"
+            }
+          ]
+        },
+        {
+          "groupName": "SPaaS",
+          "list": [
+            {
+              "path": "/lr-container",
+              "title": "LrContainer"
+            },
+            {
+              "path": "/loading-button",
+              "title": "LoadingButton"
+            },
+            {
+              "path": "/message-box-center",
+              "title": "MessageBoxCenter"
+            },
+            {
+              "path": "/tabs-dotted",
+              "title": "TabsDotted"
+            },
+            {
+              "path": "/data-mapper",
+              "title": "DataMapper"
+            },
+            {
+              "path": "/checkbox-img-button",
+              "title": "CheckboxImgButton"
+            },
+            {
+              "path": "/radio-img-button",
+              "title": "RadioImgButton"
+            },
+            {
+              "path": "/icon-checkbox",
+              "title": "IconCheckbox"
+            },
+            {
+              "path": "/status-steps",
+              "title": "StatusSteps"
+            },
+            {
+              "path": "/panel",
+              "title": "Panel"
+            },
+            {
+              "path": "/skeleton",
+              "title": "Skeleton"
+            },
+            {
+              "path": "/empty",
+              "title": "Empty"
+            },
+            {
+              "path": "/affix",
+              "title": "Affix"
+            },
+            {
+              "path": "/input-phone",
+              "title": "InputPhone"
+            },
+            {
+              "path": "/input-id-card",
+              "title": "InputIdCard"
+            },
+            {
+			        "path": "/edit-table",
+              "title": "EditTable"
+            },
+            {
+              "path": "/input-email",
+              "title": "InputEmail"
+            },
+            {
+              "path": "/switch-enhance",
+              "title": "SwitchEnhance"
+            },
+            {
+              "path": "/input-url",
+              "title": "InputUrl"
+            },
+            {
+              "path": "/button-group-enhance",
+              "title": "ButtonGroupEnhance"
             }
           ]
         }
diff --git a/examples/pages/template/changelog.tpl b/examples/pages/template/changelog.tpl
index 35bb18b7f82..690a0c5f0c7 100644
--- a/examples/pages/template/changelog.tpl
+++ b/examples/pages/template/changelog.tpl
@@ -17,7 +17,7 @@
       }
 
       &:hover a {
-        color: #409EFF;
+        color: #2460e0;
       }
     }
 
@@ -138,7 +138,7 @@
   <div class="page-changelog">
     <div class="heading">
       <el-button class="fr">
-        <a href="https://github.com/ElemeFE/element/releases" target="_blank">GitHub Releases</a>
+        <a href="https://github.com/femessage/element/releases" target="_blank">GitHub Releases</a>
       </el-button>
       <%= 1 >
     </div>
@@ -165,7 +165,7 @@
       let a = changeLogNodes[1].querySelector('a');
       a && a.remove();
       let release = changeLogNodes[1].textContent.trim();
-      let fragments = `<li><h3><a href="https://github.com/ElemeFE/element/releases/tag/v${release}" target="_blank">${release}</a></h3>`;
+      let fragments = `<li><h3><a href="https://github.com/femessage/element/releases/tag/v${release}" target="_blank">${release}</a></h3>`;
 
       for (let len = changeLogNodes.length, i = 2; i < len; i++) {
         let node = changeLogNodes[i];
@@ -175,7 +175,7 @@
           fragments += changeLogNodes[i].outerHTML;
         } else {
           release = changeLogNodes[i].textContent.trim();
-          fragments += `</li><li><h3><a href="https://github.com/ElemeFE/element/releases/tag/v${release}" target="_blank">${release}</a></h3>`;
+          fragments += `</li><li><h3><a href="https://github.com/femessage/element/releases/tag/v${release}" target="_blank">${release}</a></h3>`;
         }
       }
       fragments = fragments.replace(/#(\d+)/g, '<a href="https://github.com/ElemeFE/element/issues/$1" target="_blank">#$1</a>');
diff --git a/examples/pages/template/component.tpl b/examples/pages/template/component.tpl
index df6c181423e..a2c8721aa91 100644
--- a/examples/pages/template/component.tpl
+++ b/examples/pages/template/component.tpl
@@ -3,7 +3,7 @@
     height: calc(100% - 80px);
     margin-top: 80px;
 
-    .el-scrollbar__wrap {
+    > .el-scrollbar__wrap {
       overflow-x: auto;
     }
   }
@@ -24,8 +24,9 @@
       margin-top: 80px;
       transition: padding-top .3s;
 
-      .el-scrollbar__wrap {
+      > .el-scrollbar__wrap {
         height: 100%;
+        overflow-x: auto;
       }
 
       &.is-extended {
@@ -71,7 +72,7 @@
           }
 
           td, th {
-            border-bottom: 1px solid #d8d8d8;
+            border-bottom: 1px solid #dcdfe6;
             padding: 15px;
             max-width: 250px;
           }
@@ -79,12 +80,12 @@
           th {
             text-align: left;
             white-space: nowrap;
-            color: #666;
+            color: #909399;
             font-weight: normal;
           }
 
           td {
-            color: #333;
+            color: #606266;
           }
 
           th:first-child, td:first-child {
@@ -101,36 +102,6 @@
         }
       }
     }
-
-    .page-component-up {
-      background-color: #fff;
-      position: fixed;
-      right: 100px;
-      bottom: 150px;
-      size: 40px;
-      border-radius: 20px;
-      cursor: pointer;
-      transition: .3s;
-      box-shadow: 0 0 6px rgba(0,0,0, .12);
-      z-index: 5;
-
-      i {
-        color: #409EFF;
-        display: block;
-        line-height: 40px;
-        text-align: center;
-        font-size: 18px;
-      }
-
-      &.hover {
-        opacity: 1;
-      }
-    }
-    .back-top-fade-enter,
-    .back-top-fade-leave-active {
-      transform: translateY(-30px);
-      opacity: 0;
-    }
   }
 
   @media (max-width: 768px) {
@@ -155,9 +126,6 @@
         overflow: auto;
         display: block;
       }
-      .page-component-up {
-        display: none;
-      }
     }
   }
 </style>
@@ -171,17 +139,12 @@
       <router-view class="content"></router-view>
       <footer-nav></footer-nav>
     </div>
-    <transition name="back-top-fade">
-      <div
-        class="page-component-up"
-        :class="{ 'hover': hover }"
-        v-show="showBackToTop"
-        @mouseenter="hover = true"
-        @mouseleave="hover = false"
-        @click="toTop">
-        <i class="el-icon-caret-top"></i>
-      </div>
-    </transition>
+    <el-backtop 
+      v-if="showBackToTop"
+      target=".page-component__scroll .el-scrollbar__wrap"
+      :right="100"
+      :bottom="150"
+    ></el-backtop>
   </div>
   </el-scrollbar>
 </template>
@@ -195,8 +158,6 @@
       return {
         lang: this.$route.meta.lang,
         navsData,
-        hover: false,
-        showBackToTop: false,
         scrollTop: 0,
         showHeader: true,
         componentScrollBar: null,
@@ -215,7 +176,7 @@
     methods: {
       renderAnchorHref() {
         if (/changelog/g.test(location.href)) return;
-        const anchors = document.querySelectorAll('h2 a,h3 a');
+        const anchors = document.querySelectorAll('h2 a,h3 a,h4 a,h5 a');
         const basePath = location.href.split('#').splice(0, 2).join('#');
 
         [].slice.call(anchors).forEach(a => {
@@ -236,15 +197,9 @@
           }, 50);
         }
       },
-      toTop() {
-        this.hover = false;
-        this.showBackToTop = false;
-        this.componentScrollBox.scrollTop = 0;
-      },
 
       handleScroll() {
         const scrollTop = this.componentScrollBox.scrollTop;
-        this.showBackToTop = scrollTop >= 0.5 * document.body.clientHeight;
         if (this.showHeader !== this.scrollTop > scrollTop) {
           this.showHeader = this.scrollTop > scrollTop;
         }
@@ -257,18 +212,15 @@
         this.scrollTop = scrollTop;
       }
     },
+    computed: {
+      showBackToTop() {
+        return !this.$route.path.match(/backtop/);
+      }
+    },
     created() {
       bus.$on('navFade', val => {
         this.navFaded = val;
       });
-      window.addEventListener('hashchange', () => {
-        if (location.href.match(/#/g).length < 2) {
-          document.documentElement.scrollTop = document.body.scrollTop = 0;
-          this.renderAnchorHref();
-        } else {
-          this.goAnchor();
-        }
-      });
     },
     mounted() {
       this.componentScrollBar = this.$refs.componentScrollBar;
@@ -284,6 +236,20 @@
     },
     beforeDestroy() {
       this.componentScrollBox.removeEventListener('scroll', this.throttledScrollHandler);
+    },
+    beforeRouteUpdate(to, from, next) {
+      next();
+      setTimeout(() => {
+        const toPath = to.path;
+        const fromPath = from.path;
+        if (toPath === fromPath && to.hash) {
+          this.goAnchor();
+        }
+        if (toPath !== fromPath) {
+          document.documentElement.scrollTop = document.body.scrollTop = 0;
+          this.renderAnchorHref();
+        }
+      }, 100);
     }
   };
 </script>
diff --git a/examples/pages/template/guide.tpl b/examples/pages/template/guide.tpl
index b3fe6225c62..107fe506dae 100644
--- a/examples/pages/template/guide.tpl
+++ b/examples/pages/template/guide.tpl
@@ -35,7 +35,7 @@
           content: '';
           display: inline-block;
           width: 4px;
-          height: @width;
+          height: 4px;
           border-radius: 50%;
           vertical-align: middle;
           background-color: #5e6d82;
diff --git a/examples/pages/template/index.tpl b/examples/pages/template/index.tpl
index d79af5046e0..3079ed66ef3 100644
--- a/examples/pages/template/index.tpl
+++ b/examples/pages/template/index.tpl
@@ -49,80 +49,18 @@
   }
   .jumbotron {
     width: 890px;
-    height: 465px;
     margin: 30px auto;
     position: relative;
-
-    div {
+    img {
       width: 100%;
-      height: 100%;
-      background-color: transparent;
-      position: absolute;
-      top: 0;
-      left: 0;
     }
-
-    img {
+    .jumbotron-red {
+      transition: height .1s;
+      background: #FFF;
       position: absolute;
-    }
-
-    .jumbotron-cloud-1 {
-      right: 0;
-      top: 0;
-      height: 55px;
-    }
-
-    .jumbotron-plant-2 {
-      left: 60px;
-      top: 200px;
-    }
-
-    .jumbotron-web {
-      height: 385px;
-      top: 35px;
-      left: 110px;
-    }
-
-    .jumbotron-cloud-2 {
       left: 0;
-      top: 50px;
-      height: 55px;
-    }
-
-    .jumbotron-compo-1 {
-      left: 94px;
-      height: 90px;
-      top: 220px;
-    }
-
-    .jumbotron-compo-2 {
-      right: 73px;
-      top: 60px;
-      height: 124px;
-    }
-
-    .jumbotron-compo-3 {
-      right: 42px;
-      top: 200px;
-      height: 120px;
-    }
-
-    .jumbotron-plant-1 {
-      bottom: 0;
-      left: 30px;
-      height: 185px;
-    }
-
-    .jumbotron-figure-1 {
-      bottom: 0;
-      right: 180px;
-      height: 140px;
-    }
-
-    .jumbotron-figure-2 {
-      bottom: 0;
-      right: 10px;
-      height: 68px;
+      top:0;
+      overflow: hidden;
     }
   }
   .cards {
@@ -130,14 +68,21 @@
     width: 1140px;
 
     .container {
-      @utils-clearfix;
       padding: 0;
       margin: 0 -11px;
       width: auto;
+      &::before, &::after {
+        display: table;
+        content: "";
+      }
+      &::after {
+        clear: both;
+      }
     }
 
+
     li {
-      width: 33.33333%;
+      width: 25%;
       padding: 0 19px;
       box-sizing: border-box;
       float: left;
@@ -180,7 +125,7 @@
       height: 53px;
       line-height: 52px;
       font-size: 14px;
-      color: #409EFF;
+      color: #2460e0;
       text-align: center;
       border: 0;
       border-top: 1px solid #eaeefb;
@@ -198,7 +143,7 @@
 
       &:hover {
         color: #fff;
-        background: #409EFF;
+        background: #2460e0;
       }
     }
     &:hover {
@@ -261,6 +206,81 @@
       }
     }
   }
+  .theme-intro-b {
+    position: fixed;
+    left: 0;
+    right: 0;
+    top: 0;
+    bottom: 0;
+    z-index: 200;
+    .intro-banner {
+      position: absolute
+    }
+    img {
+      width: 300px;
+    }
+    .title {
+      position: absolute;
+      top: 0;
+      bottom: 0;
+      left: 0;
+      right: 0;
+      color: #FFF;
+      text-align: center;
+      font-weight: bold;
+      font-size: 20px;
+      display: flex;
+      justify-content: center;
+      align-items: center;
+      p {
+        padding: 0;
+        margin: 10px 0;
+      }
+    }
+  }
+  .theme-intro-a {
+    position: fixed;
+    left: 0;
+    right: 0;
+    top: 0;
+    bottom: 0;
+    z-index: 200;
+    .mask{
+      position: fixed;
+      left: 0;
+      right: 0;
+      top: 0;
+      bottom: 0;
+      background: #000;
+      opacity: .5;
+    }
+    .intro-banner {
+      top: 50%;
+      left: 50%;
+      position: fixed;
+      -webkit-transform: translate(-50%, -50%);
+      transform: translate(-50%, -50%);
+      box-sizing: border-box;
+      text-align: center;
+      z-index: 100;
+      img {
+        width: 100%;
+      }
+      .intro-text {
+        position: absolute;
+        top: 50%;
+        left: 0;
+        right: 0;
+        p {
+          padding: 0;
+          margin: 0;
+          font-size: 48px;
+          font-weight: bold;
+          color: #FFF;
+        }
+      }
+    }
+  }
 </style>
 <template>
   <div>
@@ -270,22 +290,12 @@
         <p><%= 2 ></p>
       </div>
     </div>
-    <div class="jumbotron">
-      <div>
-        <img class="jumbotron-plant-2" src="~examples/assets/images/plant-2.png" alt="">
-        <img class="jumbotron-web" src="~examples/assets/images/web.png" alt="">
-        <img class="jumbotron-plant-1" src="~examples/assets/images/plant-1.png" alt="">
-        <img class="jumbotron-figure-1" src="~examples/assets/images/figure-1.png" alt="">
-        <img class="jumbotron-figure-2" src="~examples/assets/images/figure-2.png" alt="">
-      </div>
-      <div data-hover-layer="0">
-        <img class="jumbotron-cloud-1" src="~examples/assets/images/cloud-1.png" alt="">
-        <img class="jumbotron-cloud-2" src="~examples/assets/images/cloud-2.png" alt="">
-      </div>
-      <div data-hover-layer="1">
-        <img class="jumbotron-compo-1" src="~examples/assets/images/compo-1.png" alt="">
-        <img class="jumbotron-compo-2" src="~examples/assets/images/compo-2.png" alt="">
-        <img class="jumbotron-compo-3" src="~examples/assets/images/compo-3.png" alt="">
+    <div class="jumbotron" ref="indexMainImg">
+      <img src="~examples/assets/images/theme-index-blue.png" alt="">
+      <div class="jumbotron-red" :style="{
+           height: mainImgOffset + 'px'
+         }">
+        <img src="~examples/assets/images/theme-index-red.png" alt="">
       </div>
     </div>
     <div class="sponsors">
@@ -296,13 +306,6 @@
           <p>Next Generation API-first CMS</p>
         </div>
       </a>
-      <a class="sponsor" href="https://www.duotai.net/?utm_source=element" target="_blank">
-        <img width="42px" src="~examples/assets/images/duotai.svg" alt="duotai">
-        <div>
-          <p>Sponsored by 多态</p>
-          <p>多元化的数据收集和整理工具</p>
-        </div>
-      </a>
       <a class="sponsor" href="https://www.duohui.cn/?utm_source=element&utm_medium=web&utm_campaign=element-index" target="_blank">
         <img width="45px" src="~examples/assets/images/duohui.svg" alt="duohui">
         <div>
@@ -337,6 +340,18 @@
             </router-link>
           </div>
         </li>
+        <li>
+          <div class="card">
+            <img src="~examples/assets/images/theme-index-icon.svg" alt="">
+            <h3><%= 10 ></h3>
+            <p><%= 11 ></p>
+            <router-link
+              active-class="active"
+              to="/<%= lang >/theme"
+              exact><%= 5 >
+            </router-link>
+          </div>
+        </li>
         <li>
           <div class="card">
             <img src="~examples/assets/images/resource.png" alt="">
@@ -351,30 +366,88 @@
         </li>
       </ul>
     </div>
+    <div class="theme-intro-a" v-if="showIntroA" @click="hideIntroA">
+      <div class="intro-banner">
+        <img src="~examples/assets/images/theme-intro.png" alt="">
+        <div class="intro-text">
+          <p><%= 12 ></p>
+        </div>
+      </div>
+      <div class="mask"></div>
+    </div>
+    <div 
+      class="theme-intro-b"
+      @click="hideIntroB"
+      v-if="showIntroB"
+    >
+      <div class="intro-banner"
+      :style="{
+        left: introBX + 'px',
+        top: introBY + 'px'
+      }"
+      >
+        <img src="~examples/assets/images/intro-theme-b.png" alt="">
+          <div class="title">
+            <div>
+              <p><%= 13 ></p>
+              <p><%= 14 ></p>
+            </div>
+          </div>
+      </div>
+    </div>
   </div>
 </template>
 <script>
-  import { Hover } from 'perspective.js';
-
+  import throttle from 'throttle-debounce/throttle';
+  import { addClass, removeClass } from 'element-ui/src/utils/dom';
+  
   export default {
+    created() {
+      this.throttledHandleScroll = throttle(10, true, index => {
+        this.handleScroll(index);
+      });
+    },
+    methods: {
+      handleScroll(index) {
+        const ele = this.$refs.indexMainImg;
+        const rect = ele.getBoundingClientRect();
+        const eleHeight = ele.clientHeight + 55;
+        let calHeight = (180 - rect.top) * 2;
+        if (calHeight < 0) calHeight = 0;
+        if (calHeight > eleHeight) calHeight = eleHeight;
+        this.mainImgOffset = calHeight;
+      },
+      hideIntroB() {
+        removeClass(document.body, 'el-loading-parent--hidden');
+        localStorage.setItem('KNOW_THEME', 'true');
+        this.showIntroB = false;
+      },
+      hideIntroA() {
+        const themeTab = document.querySelector('.nav-item-theme');
+        this.introBX = themeTab.offsetLeft + (themeTab.clientWidth * 0.5) - (300 / 2);
+        this.introBY = themeTab.offsetTop + 40;
+        this.showIntroA = false;
+        this.showIntroB = true;
+      }
+    },
     data() {
       return {
-        lang: this.$route.meta.lang
+        lang: this.$route.meta.lang,
+        mainImgOffset: 0,
+        showIntroA: false,
+        showIntroB: false,
+        introBY: 0,
+        introBX: 0
       };
     },
+    beforeDestroy() {
+      window.removeEventListener('scroll', this.throttledHandleScroll);
+    },
     mounted() {
-      new Hover('.jumbotron', { // eslint-disable-line
-        max: 3,
-        scale: 1,
-        perspective: 700,
-        layers: [{
-          multiple: 0.01,
-          reverseTranslate: true
-        }, {
-          multiple: 0.02,
-          reverseTranslate: true
-        }]
-      });
+      window.addEventListener('scroll', this.throttledHandleScroll);
+      if (localStorage.getItem('KNOW_THEME')) return;
+      this.showIntroA = true;
+      addClass(document.body, 'el-loading-parent--hidden');
     }
   };
 </script>
diff --git a/examples/pages/template/resource.tpl b/examples/pages/template/resource.tpl
index c88ad76fc1f..ee7062489dd 100644
--- a/examples/pages/template/resource.tpl
+++ b/examples/pages/template/resource.tpl
@@ -30,7 +30,13 @@
     margin: 35px auto 110px;
 
     .container {
-      @utils-clearfix;
+      &::before, &::after {
+        display: table;
+        content: "";
+      }
+      &::after {
+        clear: both;
+      }
       padding: 0;
       margin: 0 -11px;
       width: auto;
@@ -80,15 +86,16 @@
       color: #99a9bf;
       padding: 0 30px;
       margin: 0;
+      word-break: break-all;
       line-height: <%= paraHeight >;
     }
     a {
       height: 42px;
       width: 190px;
       display: inline-block;
-      line-height: @height;
+      line-height: 42px;
       font-size: 14px;
-      background-color: #409EFF;
+      background-color: #2460e0;
       color: #fff;
       text-align: center;
       border: 0;
@@ -130,20 +137,26 @@
     <p><%= placeholder2 ></p>
     <div class="cards">
       <ul class="container">
-        <!--<li>-->
-          <!--<div class="card">-->
-            <!--<img src="~examples/assets/images/Axure-Components.svg" alt="">-->
-            <!--<h3><%= 3 ></h3>-->
-            <!--<p><%= 4 ></p>-->
-            <!--<a href="https://github.com/ElementUI/Resources/raw/master/Element_Components_v1.1.0.rplib"><%= 5 ></a>-->
-          <!--</div>-->
-        <!--</li>-->
+        <li>
+          <div class="card">
+            <img src="~examples/assets/images/Axure-Components.svg" alt="">
+            <h3><%= 3 ></h3>
+            <p><%= 4 ></p>
+            <a
+              onclick="ga('send', 'event', 'ResourceDownload', 'Download', 'Axure');" 
+              href="https://github.com/ElementUI/Resources/raw/master/Element_Components_v2.0.0.rplib"
+            ><%= 5 ></a>
+          </div>
+        </li>
         <li>
           <div class="card">
             <img src="~examples/assets/images/Sketch-Template.svg" alt="">
             <h3><%= 6 ></h3>
             <p><%= 7 ></p>
-            <a href="https://github.com/ElementUI/Resources/raw/master/Element%20UI%20Kit_v2.0.sketch"><%= 5 ></a>
+            <a 
+              onclick="ga('send', 'event', 'ResourceDownload', 'Download', 'Sketch');"
+              href="https://github.com/ElementUI/Resources/raw/master/Element%20UI%20Kit_v2.0.sketch"
+            ><%= 5 ></a>
           </div>
         </li>
         <!--<li>-->
diff --git a/examples/pages/template/theme-nav.tpl b/examples/pages/template/theme-nav.tpl
new file mode 100644
index 00000000000..ba32c22ce24
--- /dev/null
+++ b/examples/pages/template/theme-nav.tpl
@@ -0,0 +1,3 @@
+<template>
+  <router-view></router-view>
+</template>
\ No newline at end of file
diff --git a/examples/pages/template/theme-preview.tpl b/examples/pages/template/theme-preview.tpl
new file mode 100644
index 00000000000..0ad1cd02bcb
--- /dev/null
+++ b/examples/pages/template/theme-preview.tpl
@@ -0,0 +1,196 @@
+<style lang="scss">
+.page-container.page-theme-preview {
+  padding-top: 30px;
+  .display {
+    width: 75%;
+    display: inline-block;
+    vertical-align: top;
+    h3 {
+      font-size: 28px;
+      margin: 30px 0 0 0;
+    }
+  }
+  .side {
+    display: inline-block;
+    width: 25%;
+    .editor {
+      overflow: hidden;
+      background: #f5f7fa;
+      border: 1px solid #ebeef5;
+      border-radius: 5px;
+      margin-bottom: 20px;
+      &.fixed {
+        position: fixed;
+        width: 285px;
+        box-sizing: border-box;
+      }
+    }
+  }
+}
+</style>
+<template>
+  <div class="page-container page-theme-preview" ref="themePreview">
+    <section class="display">
+      <el-button type="text" icon="el-icon-back" @click="navBack">
+        <%= 1 >
+      </el-button>
+      <h3>{{previewConfig.name}}</h3>
+      <basic-tokens-preview>
+      </basic-tokens-preview>
+      <components-preview>
+      </components-preview>
+    </section>
+    <aside class="side">
+      <section class="editor" :style="{top: `${editorTop}px`, height: `${editorHeight}px`}" :class="{'fixed': isFixed}">
+        <theme-configurator
+          :isOfficial="isOfficial"
+          :themeConfig="themeConfig"
+          :previewConfig="previewConfig"
+          :onUserConfigUpdate="onUserConfigUpdate"
+        >
+        </theme-configurator>
+      </section>
+    </aside>
+  </div>
+</template>
+<script>
+import bus from '../../bus.js';
+import ThemeConfigurator from '../../components/theme-configurator';
+import ComponentsPreview from '../../components/theme/components-preview';
+import BasicTokensPreview from '../../components/theme/basic-tokens-preview';
+import {
+  loadPreviewFromLocal,
+  loadUserThemeFromLocal,
+  saveUserThemeToLocal
+} from '../../components/theme/localstorage';
+import {
+  getThemeConfigObject
+} from '../../components/theme/utils';
+import {
+  ACTION_APPLY_THEME
+} from '../../components/theme/constant.js';
+import throttle from 'throttle-debounce/throttle';
+import { getActionDisplayName } from '../../components/theme-configurator/utils/utils';
+
+const maxUserTheme = 8;
+
+export default {
+  components: {
+    ThemeConfigurator,
+    BasicTokensPreview,
+    ComponentsPreview
+  },
+  data() {
+    return {
+      previewConfig: {},
+      themeConfig: {},
+      userTheme: [],
+      editorTop: 0,
+      editorHeight: 1000,
+      isFixed: false
+    };
+  },
+  computed: {
+    isOfficial() {
+      return this.previewConfig.type === 'official';
+    }
+  },
+  created() {
+    this.throttledHandleScroll = throttle(10, true, index => {
+      this.handleScroll(index);
+    });
+  },
+  methods: {
+    navBack() {
+      this.$router.go(-1);
+      this.$nextTick(() => {
+        window.scrollTo(0, 0);
+      });
+    },
+    getNewUserThemeName(originName) {
+      let n = 1;
+      let name;
+      while (true) {
+        name = `${originName}-${n}`;
+        if (this.userTheme.filter(theme => (theme.name === name)).length === 0) {
+          break;
+        }
+        n += 1;
+      }
+      return name;
+    },
+    onUserConfigUpdate(userConfig) {
+      const themeConfig = JSON.stringify(userConfig);
+      const { type, name } = this.previewConfig;
+      if (this.isOfficial) {
+        if (this.userTheme.length >= maxUserTheme) {
+          this.$message.error(getActionDisplayName('max-user-theme'));
+          return;
+        }
+        const autoUserName = this.getNewUserThemeName(name);
+        this.previewConfig.name = autoUserName;
+        this.previewConfig.type = 'user';
+        this.userTheme.push({
+          update: Date.now(),
+          name: autoUserName,
+          theme: themeConfig
+        });
+        saveUserThemeToLocal(this.userTheme);
+        return;
+      }
+      if (type === 'user') {
+        this.userTheme.forEach((config) => {
+          if (config.name === name) {
+            config.update = Date.now();
+            config.theme = themeConfig;
+          }
+        });
+        saveUserThemeToLocal(this.userTheme);
+      }
+    },
+    handleScroll() {
+      const rect = this.$refs.themePreview.getBoundingClientRect();
+      let offsetTop = rect.top;
+      let offsetBottom = rect.bottom;
+      const calHeight = this.editorHeight + 30 + 20;
+      if (offsetTop < 0) {
+        this.isFixed = true;
+        if (offsetBottom < calHeight) {
+          this.editorTop = 30 - calHeight + offsetBottom;
+        } else {
+          this.editorTop = 30;
+        }
+      } else {
+        this.isFixed = false;
+        this.editorTop = 0;
+      }
+    }
+  },
+  beforeDestroy() {
+    window.removeEventListener('scroll', this.throttledHandleScroll);
+  },
+  mounted() {
+    this.editorHeight = window.innerHeight - 40 - 5;
+    window.addEventListener('scroll', this.throttledHandleScroll);
+    this.userTheme = loadUserThemeFromLocal();
+    const previewConfig = loadPreviewFromLocal();
+    const pageRefer = this.$route.params.refer;
+    if (!previewConfig || !pageRefer) {
+      this.$alert(getActionDisplayName('no-preview-config'), getActionDisplayName('notice'), {
+        confirmButtonText: getActionDisplayName('confirm'),
+        callback: action => {
+          const newPath = this.$route.path.replace('/preview', '');
+          this.$router.replace(newPath);
+        }
+      });
+      return;
+    }
+    this.previewConfig = previewConfig;
+    const themeConfig = getThemeConfigObject(previewConfig.theme);
+    if (themeConfig) {
+      this.themeConfig = themeConfig;
+      bus.$emit(ACTION_APPLY_THEME, themeConfig);
+    }
+  }
+};
+</script>
diff --git a/examples/pages/template/theme.tpl b/examples/pages/template/theme.tpl
new file mode 100644
index 00000000000..646d9f5dc12
--- /dev/null
+++ b/examples/pages/template/theme.tpl
@@ -0,0 +1,230 @@
+<style lang="scss">
+.page-theme {
+  &:last-child {
+    margin-bottom: 55px;
+  }
+  h2 {
+    font-size: 28px;
+    line-height: 28px;
+    margin: 0;
+  }
+  ul {
+    list-style: none;
+    padding: 0;
+    margin: 0;
+    display: flex;
+    flex-wrap: wrap;
+    justify-content: space-between;
+  }
+  .theme-card {
+    display: inline-block;
+    height: 150px;
+    height: 16vw;
+    max-height: 230px;
+    flex: 0 0 24%;
+    cursor: default;
+    vertical-align: bottom;
+  }
+  .theme-section {
+    margin-bottom: 20px;
+  }
+  .second-section {
+    margin-top: 60px;
+  }
+}
+</style>
+<template>
+  <div class="page-container page-theme">
+    <section class="theme-section">
+      <h2><%= 1 ></h2>
+      <ul>
+        <li class="theme-card" v-for="item in officialTheme" :key="item.name">
+          <theme-card 
+            type="official" 
+            :config="item"
+            @action="onAction"
+          ></theme-card>
+        </li>
+      </ul>
+    </section>
+    <section class="theme-section second-section">
+      <h2><%= 2 > ({{userThemeCount}}/{{maxUserTheme}})</h2>
+      <ul>
+        <li class="theme-card" v-if="showUserUpload">
+          <theme-card 
+            type="upload" 
+            :config="{name: 'upload'}"
+            @action="onAction"
+          ></theme-card>
+        </li>
+        <li class="theme-card" v-for="item in displayUserTheme" :key="item.name">
+          <theme-card 
+            type="user"
+            :config="item"
+            @action="onAction"
+          ></theme-card>
+        </li>
+      </ul>
+    </section>
+    <el-dialog :visible.sync="copyDialogVisible">
+      <el-form :model="copyForm" ref="copyForm" :rules="copyFormRule">
+        <el-form-item label="<%= 3 >" prop="name">
+          <el-input v-model="copyForm.name"></el-input>
+        </el-form-item>
+      </el-form>
+      <div slot="footer" class="dialog-footer">
+        <el-button @click="closeCopyForm">{{getActionDisplayName('cancel')}}</el-button>
+        <el-button type="primary" @click="copyToUser">{{getActionDisplayName('confirm')}}</el-button>
+      </div>
+    </el-dialog>
+  </div>
+</template>
+<script>
+import ThemeCard from '../../components/theme/theme-card.vue';
+import { themeList, eleThemeList } from '../../components/theme/theme-list.js';
+import { saveUserThemeToLocal, loadUserThemeFromLocal } from '../../components/theme/localstorage';
+import { getActionDisplayName } from '../../components/theme-configurator/utils/utils';
+
+const maxUserTheme = 8;
+
+export default {
+  components: {
+    ThemeCard
+  },
+  mounted() {
+    this.userTheme = loadUserThemeFromLocal();
+    if (!Array.isArray(this.userTheme)) {
+      this.userTheme = [];
+      saveUserThemeToLocal(this.userTheme);
+    }
+    this.$nextTick(() => {
+      window.scrollTo(0, 0);
+    });
+  },
+  data() {
+    return {
+      userTheme: [],
+      maxUserTheme,
+      copyDialogVisible: false,
+      copyForm: {},
+      copyFormRule: {
+        name: [{
+          validator: this.validateCopyName,
+          trigger: 'blur'
+        }]
+      }
+    };
+  },
+  computed: {
+    officialTheme() {
+      return this.padEmpeyTheme(themeList.concat(this.$isEle ? eleThemeList : []));
+    },
+    userThemeCount() {
+      return this.userTheme.length;
+    },
+    showUserUpload() {
+      return this.userThemeCount < maxUserTheme;
+    },
+    displayUserTheme() {
+      return this.padEmpeyTheme(this.userTheme, this.showUserUpload ? 1 : 0);
+    }
+  },
+  methods: {
+    getActionDisplayName(key) {
+      return getActionDisplayName(key);
+    },
+    validateCopyName(rule, value, callback) {
+      if (!value) {
+        callback(new Error(this.getActionDisplayName('require-them-name')));
+      } else if (this.filterUserThemeByName(value).length > 0) {
+        callback(new Error(this.getActionDisplayName('duplicate-them-name')));
+      } else {
+        callback();
+      }
+    },
+    filterUserThemeByName(name, include = true) {
+      return this.userTheme.filter((theme) => (include ? theme.name === name : theme.name !== name));
+    },
+    padEmpeyTheme(theme, add = 0) {
+      if (!theme.length) return [];
+      const pad = 4 - ((theme.length + add) % 4);
+      if (pad < 4) return theme.concat(Array(pad).fill({}));
+      return theme;
+    },
+    onAction(name, item) {
+      switch (name) {
+        case 'copy':
+          this.openCopyForm(item.theme);
+          break;
+        case 'upload':
+          this.openCopyForm(item);
+          break;
+        case 'rename':
+          this.openRenameForm(item.name);
+          break;
+        case 'delete':
+          this.$confirm(this.getActionDisplayName('confirm-delete-theme'), this.getActionDisplayName('notice'), {
+            confirmButtonText: this.getActionDisplayName('confirm'),
+            cancelButtonText: this.getActionDisplayName('cancel'),
+            type: 'warning'
+          }).then(() => {
+            this.deleteUserThemeByName(item.name);
+          }).catch(() => {});
+          break;
+        default:
+          return;
+      }
+    },
+    deleteUserThemeByName(name) {
+      this.userTheme = this.filterUserThemeByName(name, false);
+      this.saveToLocal();
+    },
+    openRenameForm(name) {
+      this.copyForm.oldname = name;
+      this.copyDialogVisible = true;
+    },
+    openCopyForm(theme) {
+      if (this.userTheme.length >= 8) {
+        this.$message.error(this.getActionDisplayName('max-user-theme'));
+        return;
+      }
+      this.copyForm.theme = theme;
+      this.copyDialogVisible = true;
+    },
+    closeCopyForm() {
+      this.copyDialogVisible = false;
+      this.$nextTick(() => {
+        this.copyForm = {};
+      });
+    },
+    copyToUser() {
+      this.$refs.copyForm.validate((valid) => {
+        if (valid) {
+          const { theme, name, oldname } = this.copyForm;
+          if (theme) {
+            // copy
+            this.userTheme.push({
+              update: Date.now(),
+              name,
+              theme
+            });
+          } else {
+            // rename
+            this.userTheme.forEach((config) => {
+              if (config.name === oldname) {
+                config.update = Date.now();
+                config.name = name;
+              }
+            });
+          }
+          this.saveToLocal();
+          this.closeCopyForm();
+        }
+      });
+    },
+    saveToLocal() {
+      saveUserThemeToLocal(this.userTheme);
+    }
+  }
+};
+</script>
diff --git a/examples/play/index.vue b/examples/play/index.vue
index a1b8e0c8576..b14a8752803 100644
--- a/examples/play/index.vue
+++ b/examples/play/index.vue
@@ -1,8 +1,15 @@
 <template>
   <div style="margin: 20px;">
+    <el-input v-model="input" placeholder="请输入内容"> </el-input>
   </div>
 </template>
+
 <script>
   export default {
+    data() {
+      return {
+        input: 'Hello Element UI!'
+      };
+    }
   };
 </script>
diff --git a/examples/route.config.js b/examples/route.config.js
index d881e896fd3..52c32db1ea0 100644
--- a/examples/route.config.js
+++ b/examples/route.config.js
@@ -1,5 +1,5 @@
-import navConfig from './nav.config.json';
-import langs from './i18n/route.json';
+import navConfig from './nav.config';
+import langs from './i18n/route';
 
 const LOAD_MAP = {
   'zh-CN': name => {
@@ -16,6 +16,11 @@ const LOAD_MAP = {
     return r => require.ensure([], () =>
       r(require(`./pages/es/${name}.vue`)),
     'es');
+  },
+  'fr-FR': name => {
+    return r => require.ensure([], () =>
+      r(require(`./pages/fr-FR/${name}.vue`)),
+    'fr-FR');
   }
 };
 
@@ -38,6 +43,11 @@ const LOAD_DOCS_MAP = {
     return r => require.ensure([], () =>
       r(require(`./docs/es${path}.md`)),
     'es');
+  },
+  'fr-FR': path => {
+    return r => require.ensure([], () =>
+      r(require(`./docs/fr-FR${path}.md`)),
+    'fr-FR');
   }
 };
 
@@ -113,6 +123,24 @@ const generateMiscRoutes = function(lang) {
     }]
   };
 
+  let themeRoute = {
+    path: `/${ lang }/theme`,
+    component: load(lang, 'theme-nav'),
+    children: [
+      {
+        path: '/', // 主题管理
+        name: 'theme' + lang,
+        meta: { lang },
+        component: load(lang, 'theme')
+      },
+      {
+        path: 'preview', // 主题预览编辑
+        name: 'theme-preview-' + lang,
+        meta: { lang },
+        component: load(lang, 'theme-preview')
+      }]
+  };
+
   let resourceRoute = {
     path: `/${ lang }/resource`, // 资源
     meta: { lang },
@@ -127,7 +155,7 @@ const generateMiscRoutes = function(lang) {
     component: load(lang, 'index')
   };
 
-  return [guideRoute, resourceRoute, indexRoute];
+  return [guideRoute, resourceRoute, themeRoute, indexRoute];
 };
 
 langs.forEach(lang => {
@@ -140,12 +168,14 @@ route.push({
   component: require('./play/index.vue')
 });
 
-let userLanguage = localStorage.getItem('ELEMENT_LANGUAGE') || window.navigator.language || 'en-US';
-let defaultPath = '/en-US';
+let userLanguage = localStorage.getItem('ELEMENT_LANGUAGE') || window.navigator.language || '/zh-CN';
+let defaultPath = '/zh-CN';
 if (userLanguage.indexOf('zh-') !== -1) {
   defaultPath = '/zh-CN';
 } else if (userLanguage.indexOf('es') !== -1) {
   defaultPath = '/es';
+} else if (userLanguage.indexOf('fr') !== -1) {
+  defaultPath = '/fr-FR';
 }
 
 route = route.concat([{
diff --git a/examples/util.js b/examples/util.js
new file mode 100644
index 00000000000..0550f108fcf
--- /dev/null
+++ b/examples/util.js
@@ -0,0 +1,17 @@
+export function stripScript(content) {
+  const result = content.match(/<(script)>([\s\S]+)<\/\1>/);
+  return result && result[2] ? result[2].trim() : '';
+}
+
+export function stripStyle(content) {
+  const result = content.match(/<(style)\s*>([\s\S]+)<\/\1>/);
+  return result && result[2] ? result[2].trim() : '';
+}
+
+export function stripTemplate(content) {
+  content = content.trim();
+  if (!content) {
+    return content;
+  }
+  return content.replace(/<(script|style)[\s\S]+<\/\1>/g, '').trim();
+}
diff --git a/examples/versions.json b/examples/versions.json
index 9bd52db91d2..84ae01394b0 100644
--- a/examples/versions.json
+++ b/examples/versions.json
@@ -1 +1 @@
-{"1.4.13":"1.4","2.0.11":"2.0","2.1.0":"2.1","2.2.2":"2.2","2.3.9":"2.3","2.4.11":"2.4"}
\ No newline at end of file
+{"2.13.0":"2.13"}
\ No newline at end of file
diff --git a/netlify.sh b/netlify.sh
new file mode 100755
index 00000000000..dd192cff0d2
--- /dev/null
+++ b/netlify.sh
@@ -0,0 +1,17 @@
+#!/bin/sh
+echo "is netlify: $NETLIFY"
+echo "in branch: $BRANCH"
+echo "head: $HEAD"
+
+if [ "$NETLIFY" != "true" ]
+then
+  echo "this script only runs in netlify, bye"
+  exit 1
+fi
+
+if [ "$BRANCH" != "dev" ] && [ "$HEAD" != "dev" ]
+then
+  yarn build:file && yarn deploy:build
+else
+  echo "this script only runs in targeting dev's PR deploy preview, bye"
+fi
diff --git a/notify.sh b/notify.sh
new file mode 100755
index 00000000000..4e3c7e01cc4
--- /dev/null
+++ b/notify.sh
@@ -0,0 +1,26 @@
+#!/bin/sh
+if [ "$TRAVIS_TEST_RESULT" != "0" ]
+then
+  echo "build not success, bye"
+  exit 1
+fi
+
+git remote add github https://$GITHUB_TOKEN@github.com/$TRAVIS_REPO_SLUG.git > /dev/null 2>&1
+git push github HEAD:master --follow-tags
+
+GREN_GITHUB_TOKEN=$GITHUB_TOKEN yarn gren
+
+url=https://api.github.com/repos/$TRAVIS_REPO_SLUG/releases/latest
+resp_tmp_file=resp.tmp
+
+curl -H "Authorization: token $GITHUB_TOKEN" $url > $resp_tmp_file
+
+html_url=$(sed -n 5p $resp_tmp_file | sed 's/\"html_url\"://g' | awk -F '"' '{print $2}')
+body=$(grep body < $resp_tmp_file | sed 's/\"body\"://g;s/\"//g')
+version=$(echo $html_url | awk -F '/' '{print $NF}')
+
+msg='{"msgtype": "markdown", "markdown": {"title": "element更新", "text": "@所有人\n# [element('$version')]('$html_url')\n'$body'"}}'
+
+curl -X POST https://oapi.dingtalk.com/robot/send\?access_token\=$DINGTALK_ROBOT_TOKEN -H 'Content-Type: application/json' -d "$msg"
+
+rm $resp_tmp_file
diff --git a/package.json b/package.json
index 62779e2989a..276902437c2 100644
--- a/package.json
+++ b/package.json
@@ -1,14 +1,18 @@
 {
-  "name": "element-ui",
-  "version": "2.4.11",
+  "name": "@femessage/element-ui",
+  "version": "2.12.0",
   "description": "A Component Library for Vue.js.",
   "main": "lib/element-ui.common.js",
   "files": [
     "lib",
     "src",
     "packages",
-    "types"
+    "types",
+    "vetur-helper"
   ],
+  "publishConfig": {
+    "access": "public"
+  },
   "typings": "types/index.d.ts",
   "scripts": {
     "bootstrap": "yarn || npm i",
@@ -17,26 +21,39 @@
     "build:utils": "cross-env BABEL_ENV=utils babel src --out-dir lib --ignore src/index.js",
     "build:umd": "node build/bin/build-locale.js",
     "clean": "rimraf lib && rimraf packages/*/lib && rimraf test/**/coverage",
-    "deploy": "npm run deploy:build && gh-pages -d examples/element-ui --remote eleme && rimraf examples/element-ui",
-    "deploy:build": "npm run build:file && cross-env NODE_ENV=production webpack --config build/webpack.demo.js && echo element.eleme.io>>examples/element-ui/CNAME",
+    "deploy:build": "cross-env NODE_ENV=production webpack --config build/webpack.demo.js",
+    "deploy:extension": "cross-env NODE_ENV=production webpack --config build/webpack.extension.js",
+    "dev:extension": "rimraf examples/extension/dist && cross-env NODE_ENV=development webpack --watch --config build/webpack.extension.js",
     "dev": "npm run bootstrap && npm run build:file && cross-env NODE_ENV=development webpack-dev-server --config build/webpack.demo.js & node build/bin/template.js",
     "dev:play": "npm run build:file && cross-env NODE_ENV=development PLAY_ENV=true webpack-dev-server --config build/webpack.demo.js",
-    "dist": "npm run clean && npm run build:file && npm run lint && webpack --config build/webpack.conf.js && webpack --config build/webpack.common.js && webpack --config build/webpack.component.js && npm run build:utils && npm run build:umd && npm run build:theme",
+    "dist": "npm run clean && webpack --config build/webpack.conf.js && webpack --config build/webpack.common.js && webpack --config build/webpack.component.js && npm run build:utils && npm run build:umd && npm run build:theme",
     "i18n": "node build/bin/i18n.js",
     "lint": "eslint src/**/* test/**/* packages/**/* build/**/* --quiet",
     "pub": "npm run bootstrap && sh build/git-release.sh && sh build/release.sh && node build/bin/gen-indices.js && sh build/deploy-faas.sh",
-    "test": "npm run lint && npm run build:theme && cross-env CI_ENV=/dev/ karma start test/unit/karma.conf.js --single-run",
-    "test:watch": "npm run build:theme && karma start test/unit/karma.conf.js"
-  },
-  "faas": {
-    "domain": "element",
-    "public": "temp_web/element"
+    "test": "npm run build:theme && cross-env CI_ENV=/dev/ BABEL_ENV=test karma start test/unit/karma.conf.js --single-run",
+    "test:watch": "npm run build:theme && cross-env BABEL_ENV=test karma start test/unit/karma.conf.js",
+    "stdver": "standard-version -m '[skip ci] chore(release): v%s'",
+    "gren": "gren release --override"
   },
+  "faas": [
+    {
+      "domain": "element",
+      "public": "temp_web/element"
+    },
+    {
+      "domain": "element-theme",
+      "public": "examples/element-ui",
+      "build": [
+        "yarn",
+        "npm run deploy:build"
+      ]
+    }
+  ],
   "repository": {
     "type": "git",
-    "url": "git@github.com:ElemeFE/element.git"
+    "url": "git+https://github.com:femessage/element.git"
   },
-  "homepage": "http://element.eleme.io",
+  "homepage": "http://femessage.github.io/element/",
   "keywords": [
     "eleme",
     "vue",
@@ -44,96 +61,119 @@
   ],
   "license": "MIT",
   "bugs": {
-    "url": "https://github.com/ElemeFE/element/issues"
+    "url": "https://github.com/femessage/element/issues"
   },
   "unpkg": "lib/index.js",
   "style": "lib/theme-chalk/index.css",
   "dependencies": {
     "async-validator": "~1.8.1",
     "babel-helper-vue-jsx-merge-props": "^2.0.0",
+    "classnames": "^2.2.6",
     "deepmerge": "^1.2.0",
+    "lodash.isequal": "^4.5.0",
     "normalize-wheel": "^1.0.1",
+    "omit.js": "^1.0.2",
+    "raf": "^3.4.1",
     "resize-observer-polyfill": "^1.5.0",
-    "throttle-debounce": "^1.0.1"
+    "shallowequal": "^1.1.0",
+    "throttle-debounce": "^1.0.1",
+    "vue-virtual-scroll-list": "^2.3.1"
   },
   "peerDependencies": {
-    "vue": "^2.5.2"
+    "vue": "^2.5.17"
   },
   "devDependencies": {
+    "@babel/runtime": "^7.7.7",
+    "@commitlint/cli": "^8.2.0",
+    "@commitlint/config-conventional": "^8.2.0",
+    "@femessage/el-form-renderer": "^1.12.1",
+    "@femessage/github-release-notes": "^0.19.0",
+    "@vue/component-compiler-utils": "^2.6.0",
     "algoliasearch": "^3.24.5",
-    "babel-cli": "^6.14.0",
-    "babel-core": "^6.14.0",
-    "babel-loader": "^7.1.2",
+    "babel-cli": "^6.26.0",
+    "babel-core": "^6.26.3",
+    "babel-loader": "^7.1.5",
     "babel-plugin-add-module-exports": "^0.2.1",
+    "babel-plugin-istanbul": "^4.1.1",
     "babel-plugin-module-resolver": "^2.2.0",
-    "babel-plugin-syntax-jsx": "^6.8.0",
-    "babel-plugin-transform-vue-jsx": "^3.3.0",
-    "babel-preset-es2015": "^6.14.0",
-    "chai": "^3.5.0",
-    "cheerio": "^0.18.0",
+    "babel-plugin-syntax-jsx": "^6.18.0",
+    "babel-plugin-transform-vue-jsx": "^3.7.0",
+    "babel-preset-env": "^1.7.0",
+    "babel-preset-stage-2": "^6.24.1",
+    "babel-regenerator-runtime": "^6.5.0",
+    "chai": "^4.2.0",
     "chokidar": "^1.7.0",
-    "copy-webpack-plugin": "^4.1.1",
-    "coveralls": "^2.11.14",
+    "copy-webpack-plugin": "^5.0.0",
+    "coveralls": "^3.0.3",
     "cp-cli": "^1.0.2",
     "cross-env": "^3.1.3",
-    "css-loader": "^0.28.7",
+    "css-loader": "^2.1.0",
     "es6-promise": "^4.0.5",
-    "eslint": "4.14.0",
+    "eslint": "4.18.2",
     "eslint-config-elemefe": "0.1.1",
-    "eslint-loader": "^1.9.0",
+    "eslint-loader": "^2.0.0",
     "eslint-plugin-html": "^4.0.1",
     "eslint-plugin-json": "^1.2.0",
-    "extract-text-webpack-plugin": "^3.0.1",
-    "file-loader": "^1.1.5",
+    "file-loader": "^1.1.11",
     "file-save": "^0.2.0",
-    "gh-pages": "^0.11.0",
-    "gulp": "^3.9.1",
-    "gulp-autoprefixer": "^4.0.0",
-    "gulp-cssmin": "^0.1.7",
-    "gulp-postcss": "^6.1.1",
-    "gulp-sass": "^3.1.0",
+    "gulp": "^4.0.0",
+    "gulp-autoprefixer": "^6.0.0",
+    "gulp-cssmin": "^0.2.0",
+    "gulp-sass": "^4.1.0",
     "highlight.js": "^9.3.0",
-    "html-loader": "^0.5.1",
-    "html-webpack-plugin": "^2.30.1",
-    "inject-loader": "^3.0.1",
-    "isparta-loader": "^2.0.0",
+    "html-webpack-plugin": "^3.2.0",
+    "husky": "1.3.1",
     "json-loader": "^0.5.7",
     "json-templater": "^1.0.4",
-    "karma": "^1.3.0",
+    "karma": "^4.0.1",
     "karma-chrome-launcher": "^2.2.0",
-    "karma-coverage": "^1.1.1",
-    "karma-mocha": "^1.2.0",
-    "karma-sinon-chai": "^1.2.4",
+    "karma-coverage": "^1.1.2",
+    "karma-mocha": "^1.3.0",
+    "karma-sinon-chai": "^2.0.2",
     "karma-sourcemap-loader": "^0.3.7",
-    "karma-spec-reporter": "0.0.26",
-    "karma-webpack": "^3.0.0",
-    "lolex": "^1.5.1",
-    "markdown-it": "^6.1.1",
-    "markdown-it-anchor": "^2.5.0",
+    "karma-spec-reporter": "^0.0.32",
+    "karma-webpack": "^3.0.5",
+    "markdown-it": "^8.4.1",
+    "markdown-it-anchor": "^5.0.2",
+    "markdown-it-chain": "^1.3.0",
     "markdown-it-container": "^2.0.0",
-    "mocha": "^3.1.1",
-    "node-sass": "^4.5.3",
-    "perspective.js": "^1.0.0",
-    "postcss": "^5.1.2",
-    "postcss-loader": "0.11.1",
-    "postcss-salad": "^1.0.8",
+    "mini-css-extract-plugin": "^0.4.1",
+    "mocha": "^6.0.2",
+    "optimize-css-assets-webpack-plugin": "^5.0.1",
+    "postcss": "^7.0.14",
     "progress-bar-webpack-plugin": "^1.11.0",
     "rimraf": "^2.5.4",
-    "sass-loader": "^6.0.6",
-    "sinon": "^1.17.6",
-    "sinon-chai": "^2.8.0",
-    "style-loader": "^0.19.0",
+    "sass-loader": "^7.1.0",
+    "select-version-cli": "^0.0.2",
+    "sinon": "^7.2.7",
+    "sinon-chai": "^3.3.0",
+    "standard-version": "^7.0.0",
+    "style-loader": "^0.23.1",
+    "svg-inline-loader": "^0.8.0",
     "transliteration": "^1.1.11",
+    "uglifyjs-webpack-plugin": "^2.1.1",
     "uppercamelcase": "^1.1.0",
-    "url-loader": "^0.6.2",
-    "vue": "^2.5.2",
-    "vue-loader": "^13.3.0",
-    "vue-markdown-loader": "1",
-    "vue-router": "2.7.0",
-    "vue-template-compiler": "^2.5.2",
+    "url-loader": "^1.0.1",
+    "vue": "2.5.21",
+    "vue-loader": "^15.7.0",
+    "vue-router": "^3.0.1",
+    "vue-template-compiler": "2.5.21",
     "vue-template-es2015-compiler": "^1.6.0",
-    "webpack": "^3.7.1",
-    "webpack-dev-server": "^2.9.1",
-    "webpack-node-externals": "^1.6.0"
+    "webpack": "^4.14.0",
+    "webpack-cli": "^3.0.8",
+    "webpack-dev-server": "^3.1.11",
+    "webpack-node-externals": "^1.7.2"
+  },
+  "husky": {
+    "hooks": {
+      "pre-commit": "npm run lint --fix",
+      "commit-msg": "commitlint -e $HUSKY_GIT_PARAMS",
+      "post-commit": "git update-index --again"
+    }
+  },
+  "gren": "@femessage/grenrc",
+  "vetur": {
+    "tags": "vetur-helper/element-tags.json",
+    "attributes": "vetur-helper/element-attributes.json"
   }
 }
diff --git a/packages/affix/index.js b/packages/affix/index.js
new file mode 100644
index 00000000000..af34ab7862b
--- /dev/null
+++ b/packages/affix/index.js
@@ -0,0 +1,8 @@
+import Affix from './src/main.jsx';
+
+/* istanbul ignore next */
+Affix.install = function(Vue) {
+  Vue.component(Affix.name, Affix);
+};
+
+export default Affix;
diff --git a/packages/affix/src/main.jsx b/packages/affix/src/main.jsx
new file mode 100644
index 00000000000..38dc0302022
--- /dev/null
+++ b/packages/affix/src/main.jsx
@@ -0,0 +1,260 @@
+import PropTypes from 'element-ui/src/utils/vue-types';
+import classNames from 'classnames';
+import shallowequal from 'shallowequal';
+import omit from 'omit.js';
+import getScroll from 'element-ui/src/utils/getScroll';
+import BaseMixin from 'element-ui/src/utils/BaseMixin';
+import throttleByAnimationFrame from 'element-ui/src/utils/throttleByAnimationFrame';
+
+function getTargetRect(target) {
+  return target !== window ? target.getBoundingClientRect() : { top: 0, left: 0, bottom: 0 };
+}
+
+function getOffset(element, target) {
+  const elemRect = element.getBoundingClientRect();
+  const targetRect = getTargetRect(target);
+
+  const scrollTop = getScroll(target, true);
+  const scrollLeft = getScroll(target, false);
+
+  const docElem = window.document.body;
+  const clientTop = docElem.clientTop || 0;
+  const clientLeft = docElem.clientLeft || 0;
+
+  return {
+    top: elemRect.top - targetRect.top + scrollTop - clientTop,
+    left: elemRect.left - targetRect.left + scrollLeft - clientLeft,
+    width: elemRect.width,
+    height: elemRect.height
+  };
+}
+
+function getDefaultTarget() {
+  return typeof window !== 'undefined' ? window : null;
+}
+
+// Affix
+const AffixProps = {
+  /**
+   * 距离窗口顶部达到指定偏移量后触发
+   */
+  offsetTop: PropTypes.number,
+  offset: PropTypes.number,
+  /** 距离窗口底部达到指定偏移量后触发 */
+  offsetBottom: PropTypes.number,
+  /** 固定状态改变时触发的回调函数 */
+  // onChange?: (affixed?: boolean) => void;
+  /** 设置 Affix 需要监听其滚动事件的元素，值为一个返回对应 DOM 元素的函数 */
+  target: PropTypes.func,
+  prefixCls: PropTypes.string
+};
+
+const Affix = {
+  name: 'ElAffix',
+  props: AffixProps,
+  mixins: [BaseMixin],
+  data() {
+    this.events = ['resize', 'scroll', 'touchstart', 'touchmove', 'touchend', 'pageshow', 'load'];
+    this.eventHandlers = {};
+    return {
+      affixStyle: undefined,
+      placeholderStyle: undefined
+    };
+  },
+  beforeMount() {
+    this.updatePosition = throttleByAnimationFrame(this.updatePosition);
+  },
+  mounted() {
+    const target = this.target || getDefaultTarget;
+    // Wait for parent component ref has its value
+    this.timeout = setTimeout(() => {
+      this.setTargetEventListeners(target);
+      // Mock Event object.
+      this.updatePosition({});
+    });
+  },
+  watch: {
+    target(val) {
+      this.clearEventListeners();
+      this.setTargetEventListeners(val);
+      // Mock Event object.
+      this.updatePosition({});
+    },
+    offsetTop() {
+      this.updatePosition({});
+    },
+    offsetBottom() {
+      this.updatePosition({});
+    }
+  },
+  beforeDestroy() {
+    this.clearEventListeners();
+    clearTimeout(this.timeout);
+    this.updatePosition.cancel();
+  },
+  methods: {
+    setAffixStyle(e, affixStyle) {
+      const { target = getDefaultTarget } = this;
+      const originalAffixStyle = this.affixStyle;
+      const isWindow = target() === window;
+      if (e.type === 'scroll' && originalAffixStyle && affixStyle && isWindow) {
+        return;
+      }
+      if (shallowequal(affixStyle, originalAffixStyle)) {
+        return;
+      }
+      this.setState({ affixStyle: affixStyle }, () => {
+        const affixed = !!this.affixStyle;
+        if ((affixStyle && !originalAffixStyle) || (!affixStyle && originalAffixStyle)) {
+          this.$emit('change', affixed);
+        }
+      });
+    },
+
+    setPlaceholderStyle(placeholderStyle) {
+      const originalPlaceholderStyle = this.placeholderStyle;
+      if (shallowequal(placeholderStyle, originalPlaceholderStyle)) {
+        return;
+      }
+      this.setState({ placeholderStyle: placeholderStyle });
+    },
+    syncPlaceholderStyle(e) {
+      const { affixStyle } = this;
+      if (!affixStyle) {
+        return;
+      }
+      this.$refs.placeholderNode.style.cssText = '';
+      this.setAffixStyle(e, {
+        ...affixStyle,
+        width: this.$refs.placeholderNode.offsetWidth + 'px'
+      });
+      this.setPlaceholderStyle({
+        width: this.$refs.placeholderNode.offsetWidth + 'px'
+      });
+    },
+
+    updatePosition(e) {
+      const { offsetBottom, offset, target = getDefaultTarget } = this;
+      let { offsetTop } = this;
+      const targetNode = target();
+
+      // Backwards support
+      // Fix: if offsetTop === 0, it will get undefined,
+      //   if offsetBottom is type of number, offsetMode will be { top: false, ... }
+      offsetTop = typeof offsetTop === 'undefined' ? offset : offsetTop;
+      const scrollTop = getScroll(targetNode, true);
+      const affixNode = this.$el;
+      const elemOffset = getOffset(affixNode, targetNode);
+      const elemSize = {
+        width: this.$refs.fixedNode.offsetWidth,
+        height: this.$refs.fixedNode.offsetHeight
+      };
+
+      const offsetMode = {
+        top: false,
+        bottom: false
+      };
+      // Default to `offsetTop=0`.
+      if (typeof offsetTop !== 'number' && typeof offsetBottom !== 'number') {
+        offsetMode.top = true;
+        offsetTop = 0;
+      } else {
+        offsetMode.top = typeof offsetTop === 'number';
+        offsetMode.bottom = typeof offsetBottom === 'number';
+      }
+
+      const targetRect = getTargetRect(targetNode);
+      const targetInnerHeight = targetNode.innerHeight || targetNode.clientHeight;
+      // ref: https://github.com/ant-design/ant-design/issues/13662
+      if (scrollTop >= elemOffset.top - offsetTop && offsetMode.top) {
+        // Fixed Top
+        const width = `${elemOffset.width}px`;
+        const top = `${targetRect.top + offsetTop}px`;
+        this.setAffixStyle(e, {
+          position: 'fixed',
+          top,
+          left: `${targetRect.left + elemOffset.left}px`,
+          width
+        });
+        this.setPlaceholderStyle({
+          width,
+          height: `${elemSize.height}px`
+        });
+      } else if (
+        scrollTop <= elemOffset.top + elemSize.height + offsetBottom - targetInnerHeight &&
+        offsetMode.bottom
+      ) {
+        // Fixed Bottom
+        const targetBottomOffet =
+          targetNode === window ? 0 : window.innerHeight - targetRect.bottom;
+        const width = `${elemOffset.width}px`;
+        this.setAffixStyle(e, {
+          position: 'fixed',
+          bottom: targetBottomOffet + offsetBottom + 'px',
+          left: targetRect.left + elemOffset.left + 'px',
+          width
+        });
+        this.setPlaceholderStyle({
+          width,
+          height: elemOffset.height + 'px'
+        });
+      } else {
+        const { affixStyle } = this;
+        if (
+          e.type === 'resize' &&
+          affixStyle &&
+          affixStyle.position === 'fixed' &&
+          affixNode.offsetWidth
+        ) {
+          this.setAffixStyle(e, { ...affixStyle, width: affixNode.offsetWidth + 'px' });
+        } else {
+          this.setAffixStyle(e, null);
+        }
+        this.setPlaceholderStyle(null);
+      }
+      if (e.type === 'resize') {
+        this.syncPlaceholderStyle(e);
+      }
+    },
+    setTargetEventListeners(getTarget) {
+      const target = getTarget();
+      if (!target) {
+        return;
+      }
+      this.clearEventListeners();
+
+      this.events.forEach(eventName => {
+        this.eventHandlers[eventName] = target.addEventListener(eventName, this.updatePosition);
+      });
+    },
+
+    clearEventListeners() {
+      this.events.forEach(eventName => {
+        const handler = this.eventHandlers[eventName];
+        if (handler && handler.remove) {
+          handler.remove();
+        }
+      });
+    }
+  },
+
+  render() {
+    const { affixStyle, placeholderStyle, $slots, $props } = this;
+    const className = classNames({
+      'el-affix': affixStyle
+    });
+
+    const props = {
+      attrs: omit($props, ['prefixCls', 'offsetTop', 'offsetBottom', 'target'])
+    };
+    return (
+      <div {...props} style={placeholderStyle} ref="placeholderNode">
+        <div class={className} ref="fixedNode" style={affixStyle}>
+          {$slots.default}
+        </div>
+      </div>
+    );
+  }
+};
+
+export default Affix;
diff --git a/packages/alert/src/main.vue b/packages/alert/src/main.vue
index 5000c7d1c2d..f4bcb47d933 100644
--- a/packages/alert/src/main.vue
+++ b/packages/alert/src/main.vue
@@ -2,7 +2,7 @@
   <transition name="el-alert-fade">
     <div
       class="el-alert"
-      :class="[typeClass, center ? 'is-center' : '']"
+      :class="[typeClass, center ? 'is-center' : '', 'is-' + effect]"
       v-show="visible"
       role="alert"
     >
@@ -11,9 +11,8 @@
         <span class="el-alert__title" :class="[ isBoldTitle ]" v-if="title || $slots.title">
           <slot name="title">{{ title }}</slot>
         </span>
-        <slot>
-          <p class="el-alert__description" v-if="description">{{ description }}</p>
-        </slot>
+        <p class="el-alert__description" v-if="$slots.default && !description"><slot></slot></p>
+        <p class="el-alert__description" v-if="description && !$slots.default">{{ description }}</p>
         <i class="el-alert__closebtn" :class="{ 'is-customed': closeText !== '', 'el-icon-close': closeText === '' }" v-show="closable" @click="close()">{{closeText}}</i>
       </div>
     </div>
@@ -51,7 +50,14 @@
         default: ''
       },
       showIcon: Boolean,
-      center: Boolean
+      center: Boolean,
+      effect: {
+        type: String,
+        default: 'light',
+        validator: function(value) {
+          return ['light', 'dark'].indexOf(value) !== -1;
+        }
+      }
     },
 
     data() {
diff --git a/packages/autocomplete/src/autocomplete.vue b/packages/autocomplete/src/autocomplete.vue
index 4fa3e450132..2ce802b052c 100644
--- a/packages/autocomplete/src/autocomplete.vue
+++ b/packages/autocomplete/src/autocomplete.vue
@@ -126,6 +126,10 @@
       popperAppendToBody: {
         type: Boolean,
         default: true
+      },
+      highlightFirstItem: {
+        type: Boolean,
+        default: false
       }
     },
     data() {
@@ -149,7 +153,10 @@
     },
     watch: {
       suggestionVisible(val) {
-        this.broadcast('ElAutocompleteSuggestions', 'visible', [val, this.$refs.input.$refs.input.offsetWidth]);
+        let $input = this.getInput();
+        if ($input) {
+          this.broadcast('ElAutocompleteSuggestions', 'visible', [val, $input.offsetWidth]);
+        }
       }
     },
     methods: {
@@ -173,6 +180,7 @@
           }
           if (Array.isArray(suggestions)) {
             this.suggestions = suggestions;
+            this.highlightedIndex = this.highlightFirstItem ? 0 : -1;
           } else {
             console.error('[Element Error][Autocomplete]autocomplete suggestions must be an array');
           }
@@ -248,7 +256,11 @@
           suggestion.scrollTop -= highlightItem.scrollHeight;
         }
         this.highlightedIndex = index;
-        this.$el.querySelector('.el-input__inner').setAttribute('aria-activedescendant', `${this.id}-item-${this.highlightedIndex}`);
+        let $input = this.getInput();
+        $input.setAttribute('aria-activedescendant', `${this.id}-item-${this.highlightedIndex}`);
+      },
+      getInput() {
+        return this.$refs.input.getInput();
       }
     },
     mounted() {
@@ -256,7 +268,7 @@
       this.$on('item-click', item => {
         this.select(item);
       });
-      let $input = this.$el.querySelector('.el-input__inner');
+      let $input = this.getInput();
       $input.setAttribute('role', 'textbox');
       $input.setAttribute('aria-autocomplete', 'list');
       $input.setAttribute('aria-controls', 'id');
diff --git a/packages/avatar/index.js b/packages/avatar/index.js
new file mode 100644
index 00000000000..36589e34d8e
--- /dev/null
+++ b/packages/avatar/index.js
@@ -0,0 +1,8 @@
+import Avatar from './src/main';
+
+/* istanbul ignore next */
+Avatar.install = function(Vue) {
+  Vue.component(Avatar.name, Avatar);
+};
+
+export default Avatar;
diff --git a/packages/avatar/src/main.vue b/packages/avatar/src/main.vue
new file mode 100644
index 00000000000..c6012bf4f7d
--- /dev/null
+++ b/packages/avatar/src/main.vue
@@ -0,0 +1,166 @@
+<script>
+export default {
+  name: 'ElAvatar',
+
+  props: {
+    size: {
+      type: [Number, String],
+      validator(val) {
+        if (typeof val === 'string') {
+          return ['large', 'medium', 'small'].includes(val);
+        }
+        return typeof val === 'number';
+      },
+      default: 'large'
+    },
+    shape: {
+      type: String,
+      default: 'circle',
+      validator(val) {
+        return ['circle', 'square'].includes(val);
+      }
+    },
+    icon: String,
+    src: String,
+    alt: String,
+    srcSet: String,
+    error: Function,
+    fit: {
+      type: String,
+      default: 'cover'
+    },
+    text: {
+      type: String,
+      default: ''
+    },
+    fontSize: {
+      type: Number,
+      default: 12
+    },
+    bgColor: {
+      type: String,
+      default: '#C0C4CC'
+    },
+    textFormatter: {
+      type: Function,
+      default: (str) => str.slice(-2)
+    },
+    tooltip: {
+      type: String,
+      default: ''
+    }
+  },
+
+  data() {
+    return {
+      isImageExist: true
+    };
+  },
+
+  computed: {
+    avatarClass() {
+      const { size, icon, shape } = this;
+      const classList = ['el-avatar'];
+
+      if (size && typeof size === 'string') {
+        classList.push(`el-avatar--${size}`);
+      }
+
+      if (icon) {
+        classList.push('el-avatar--icon');
+      }
+
+      if (shape) {
+        classList.push(`el-avatar--${shape}`);
+      }
+
+      return classList.join(' ');
+    }
+  },
+
+  methods: {
+    handleError() {
+      const { error } = this;
+      const errorFlag = error ? error() : undefined;
+      if (errorFlag !== false) {
+        this.isImageExist = false;
+      }
+    },
+    renderAvatar() {
+      const {
+        icon,
+        src,
+        text,
+        alt,
+        isImageExist,
+        srcSet,
+        fit,
+        fontSize,
+        textFormatter
+      } = this;
+
+      if (isImageExist && src) {
+        return (
+          <img
+            src={src}
+            onError={this.handleError}
+            alt={alt}
+            srcSet={srcSet}
+            style={{ 'object-fit': fit }}
+          />
+        );
+      }
+
+      if (icon) {
+        return <i class={icon} />;
+      }
+
+      if (this.$slots.default) {
+        return this.$slots.default;
+      }
+
+      const textStyle = {
+        transform: `translate(-50%, -50%) scale(${fontSize / 12})`
+      };
+
+      return (
+        <span class="avatar-text" style={textStyle}>
+          {textFormatter(text)}
+        </span>
+      );
+    }
+  },
+
+  render() {
+    const { avatarClass, size, bgColor, text, tooltip } = this;
+
+    const sizeStyle =
+      typeof size === 'number'
+        ? {
+          height: `${size}px`,
+          width: `${size}px`,
+          lineHeight: `${size}px`
+        }
+        : {};
+
+    const bgStyle = {
+      backgroundColor: bgColor
+    };
+
+    const style = { ...sizeStyle, ...bgStyle };
+
+    return (
+      <el-tooltip
+        disabled={!(tooltip || text)}
+        content={tooltip || text}
+        placement="top"
+        popper-class="el-avatar-popper"
+      >
+        <span class={avatarClass} style={style}>
+          {this.renderAvatar()}
+        </span>
+      </el-tooltip>
+    );
+  }
+};
+</script>
diff --git a/packages/backtop/index.js b/packages/backtop/index.js
new file mode 100644
index 00000000000..21433c53645
--- /dev/null
+++ b/packages/backtop/index.js
@@ -0,0 +1,8 @@
+import Backtop from './src/main';
+
+/* istanbul ignore next */
+Backtop.install = function(Vue) {
+  Vue.component(Backtop.name, Backtop);
+};
+
+export default Backtop;
diff --git a/packages/backtop/src/main.vue b/packages/backtop/src/main.vue
new file mode 100644
index 00000000000..806f43ea9cf
--- /dev/null
+++ b/packages/backtop/src/main.vue
@@ -0,0 +1,110 @@
+<template>
+  <transition name="el-fade-in">
+    <div
+      v-if="visible"
+      @click.stop="handleClick"
+      :style="{
+        'right': styleRight,
+        'bottom': styleBottom
+      }"
+      class="el-backtop">
+      <slot>
+        <el-icon name="caret-top"></el-icon>
+      </slot>
+    </div>
+  </transition>
+</template>
+
+<script>
+import throttle from 'throttle-debounce/throttle';
+
+const cubic = value => Math.pow(value, 3);
+const easeInOutCubic = value => value < 0.5
+  ? cubic(value * 2) / 2
+  : 1 - cubic((1 - value) * 2) / 2;
+
+export default {
+  name: 'ElBacktop',
+
+  props: {
+    visibilityHeight: {
+      type: Number,
+      default: 200
+    },
+    target: [String],
+    right: {
+      type: Number,
+      default: 40
+    },
+    bottom: {
+      type: Number,
+      default: 40
+    }
+  },
+
+  data() {
+    return {
+      el: null,
+      container: null,
+      visible: false
+    };
+  },
+
+  computed: {
+    styleBottom() {
+      return `${this.bottom}px`;
+    },
+    styleRight() {
+      return `${this.right}px`;
+    }
+  },
+
+  mounted() {
+    this.init();
+    this.throttledScrollHandler = throttle(300, this.onScroll);
+    this.container.addEventListener('scroll', this.throttledScrollHandler);
+  },
+
+  methods: {
+    init() {
+      this.container = document;
+      this.el = document.documentElement;
+      if (this.target) {
+        this.el = document.querySelector(this.target);
+        if (!this.el) {
+          throw new Error(`target is not existed: ${this.target}`);
+        }
+        this.container = this.el;
+      }
+    },
+    onScroll() {
+      const scrollTop = this.el.scrollTop;
+      this.visible = scrollTop >= this.visibilityHeight;
+    },
+    handleClick(e) {
+      this.scrollToTop();
+      this.$emit('click', e);
+    },
+    scrollToTop() {
+      const el = this.el;
+      const beginTime = Date.now();
+      const beginValue = el.scrollTop;
+      const rAF = window.requestAnimationFrame || (func => setTimeout(func, 16));
+      const frameFunc = () => {
+        const progress = (Date.now() - beginTime) / 500;
+        if (progress < 1) {
+          el.scrollTop = beginValue * (1 - easeInOutCubic(progress));
+          rAF(frameFunc);
+        } else {
+          el.scrollTop = 0;
+        }
+      };
+      rAF(frameFunc);
+    }
+  },
+
+  beforeDestroy() {
+    this.container.removeEventListener('scroll', this.throttledScrollHandler);
+  }
+};
+</script>
diff --git a/packages/badge/src/main.vue b/packages/badge/src/main.vue
index d89e187ed23..5b2eeb73923 100644
--- a/packages/badge/src/main.vue
+++ b/packages/badge/src/main.vue
@@ -23,7 +23,7 @@ export default {
   name: 'ElBadge',
 
   props: {
-    value: {},
+    value: [String, Number],
     max: Number,
     isDot: Boolean,
     hidden: Boolean,
diff --git a/packages/button-group-enhance/index.js b/packages/button-group-enhance/index.js
new file mode 100644
index 00000000000..08ee215b6f7
--- /dev/null
+++ b/packages/button-group-enhance/index.js
@@ -0,0 +1,8 @@
+import ButtonGroupEnhance from './src/main';
+
+/* istanbul ignore next */
+ButtonGroupEnhance.install = function(Vue) {
+  Vue.component(ButtonGroupEnhance.name, ButtonGroupEnhance);
+};
+
+export default ButtonGroupEnhance;
diff --git a/packages/button-group-enhance/src/main.vue b/packages/button-group-enhance/src/main.vue
new file mode 100644
index 00000000000..1c1f0715ae1
--- /dev/null
+++ b/packages/button-group-enhance/src/main.vue
@@ -0,0 +1,104 @@
+<template>
+  <el-button-group class="el-button-group-enhance">
+    <el-loading-button
+      v-for="(button, index) in buttonsAtFront"
+      :key="index"
+      :type="type"
+      :size="size"
+      v-bind="button"
+      :loading-click="button.click"
+      >{{ button.text }}</el-loading-button
+    >
+    <el-dropdown
+      v-if="buttonsCollapsed.length"
+      :size="size"
+      placement="bottom-start"
+      @command="handleCommand"
+    >
+      <el-button :type="type" :size="size" class="el-dropdown__caret-button">
+        <slot name="more">
+          {{ moreText }}
+          <i class="el-icon-arrow-down el-icon--right"></i>
+        </slot>
+      </el-button>
+      <el-dropdown-menu slot="dropdown">
+        <el-dropdown-item
+          v-for="(item, key) in buttonsCollapsed"
+          :key="key"
+          v-bind="item"
+          :command="key"
+        >
+          <slot v-bind="item" name="dropdownItem">{{ item.text }}</slot>
+        </el-dropdown-item>
+      </el-dropdown-menu>
+    </el-dropdown>
+  </el-button-group>
+</template>
+
+<script>
+export default {
+  name: 'ElButtonGroupEnhance',
+  props: {
+    /**
+     * 支持所有 button 属性和以下：
+     * text: string
+     * show: (data) => boolean
+     * click: (data) => Promise | undefined
+     */
+    buttons: {
+      type: Array,
+      default: () => []
+    },
+
+    // 从第 n 个按钮开始折叠
+    collapseAt: {
+      type: Number,
+      default: 2,
+      validator: v => v > 1
+    },
+
+    moreText: {
+      type: String,
+      default: '更多'
+    },
+
+    type: {
+      type: String,
+      default: 'default'
+    },
+
+    size: {
+      type: String,
+      default: 'small'
+    }
+  },
+
+  computed: {
+    buttonsDisplay: ({ buttons }) =>
+      buttons
+        .filter(({ show = true }) => show)
+        .map(config => ({
+          click() {},
+          ...config
+        })),
+
+    sliceIndex() {
+      return this.collapseAt - 1;
+    },
+
+    buttonsAtFront() {
+      return this.buttonsDisplay.slice(0, this.sliceIndex);
+    },
+
+    buttonsCollapsed() {
+      return this.buttonsDisplay.slice(this.sliceIndex);
+    }
+  },
+
+  methods: {
+    handleCommand(index) {
+      this.buttonsCollapsed[index].click();
+    }
+  }
+};
+</script>
diff --git a/packages/calendar/index.js b/packages/calendar/index.js
new file mode 100644
index 00000000000..ec79cd99a15
--- /dev/null
+++ b/packages/calendar/index.js
@@ -0,0 +1,8 @@
+import Calendar from './src/main';
+
+/* istanbul ignore next */
+Calendar.install = function(Vue) {
+  Vue.component(Calendar.name, Calendar);
+};
+
+export default Calendar;
diff --git a/packages/calendar/src/date-table.vue b/packages/calendar/src/date-table.vue
new file mode 100644
index 00000000000..6e78cf26710
--- /dev/null
+++ b/packages/calendar/src/date-table.vue
@@ -0,0 +1,202 @@
+<script>
+import fecha from 'element-ui/src/utils/date';
+import { range as rangeArr, getFirstDayOfMonth, getPrevMonthLastDays, getMonthDays, getI18nSettings, validateRangeInOneMonth } from 'element-ui/src/utils/date-util';
+
+export default {
+  props: {
+    selectedDay: String, // formated date yyyy-MM-dd
+    range: {
+      type: Array,
+      validator(val) {
+        if (!(val && val.length)) return true;
+        const [start, end] = val;
+        return validateRangeInOneMonth(start, end);
+      }
+    },
+    date: Date,
+    hideHeader: Boolean,
+    firstDayOfWeek: Number
+  },
+
+  inject: ['elCalendar'],
+
+  data() {
+    return {
+      WEEK_DAYS: getI18nSettings().dayNames
+    };
+  },
+
+  methods: {
+    toNestedArr(days) {
+      return rangeArr(days.length / 7).map((_, index) => {
+        const start = index * 7;
+        return days.slice(start, start + 7);
+      });
+    },
+
+    getFormateDate(day, type) {
+      if (!day || ['prev', 'current', 'next'].indexOf(type) === -1) {
+        throw new Error('invalid day or type');
+      }
+      let prefix = this.curMonthDatePrefix;
+      if (type === 'prev') {
+        prefix = this.prevMonthDatePrefix;
+      } else if (type === 'next') {
+        prefix = this.nextMonthDatePrefix;
+      }
+      day = `00${day}`.slice(-2);
+      return `${prefix}-${day}`;
+    },
+
+    getCellClass({ text, type}) {
+      const classes = [type];
+      if (type === 'current') {
+        const date = this.getFormateDate(text, type);
+        if (date === this.selectedDay) {
+          classes.push('is-selected');
+        }
+        if (date === this.formatedToday) {
+          classes.push('is-today');
+        }
+      }
+      return classes;
+    },
+
+    pickDay({ text, type }) {
+      const date = this.getFormateDate(text, type);
+      this.$emit('pick', date);
+    },
+
+    cellRenderProxy({ text, type }) {
+      let render = this.elCalendar.$scopedSlots.dateCell;
+      if (!render) return <span>{ text }</span>;
+
+      const day = this.getFormateDate(text, type);
+      const date = new Date(day);
+      const data = {
+        isSelected: this.selectedDay === day,
+        type: `${type}-month`,
+        day
+      };
+      return render({ date, data });
+    }
+  },
+
+  computed: {
+    prevMonthDatePrefix() {
+      const temp = new Date(this.date.getTime());
+      temp.setDate(0);
+      return fecha.format(temp, 'yyyy-MM');
+    },
+
+    curMonthDatePrefix() {
+      return fecha.format(this.date, 'yyyy-MM');
+    },
+
+    nextMonthDatePrefix() {
+      const temp = new Date(this.date.getFullYear(), this.date.getMonth() + 1, 1);
+      return fecha.format(temp, 'yyyy-MM');
+    },
+
+    formatedToday() {
+      return this.elCalendar.formatedToday;
+    },
+
+    isInRange() {
+      return this.range && this.range.length;
+    },
+
+    rows() {
+      let days = [];
+      // if range exists, should render days in range.
+      if (this.isInRange) {
+        const [start, end] = this.range;
+        const currentMonthRange = rangeArr(end.getDate() - start.getDate() + 1).map((_, index) => ({
+          text: start.getDate() + index,
+          type: 'current'
+        }));
+        let remaining = currentMonthRange.length % 7;
+        remaining = remaining === 0 ? 0 : 7 - remaining;
+        const nextMonthRange = rangeArr(remaining).map((_, index) => ({
+          text: index + 1,
+          type: 'next'
+        }));
+        days = currentMonthRange.concat(nextMonthRange);
+      } else {
+        const date = this.date;
+        let firstDay = getFirstDayOfMonth(date);
+        firstDay = firstDay === 0 ? 7 : firstDay;
+        const firstDayOfWeek = typeof this.firstDayOfWeek === 'number' ? this.firstDayOfWeek : 1;
+        const prevMonthDays = getPrevMonthLastDays(date, firstDay - firstDayOfWeek).map(day => ({
+          text: day,
+          type: 'prev'
+        }));
+        const currentMonthDays = getMonthDays(date).map(day => ({
+          text: day,
+          type: 'current'
+        }));
+        days = [...prevMonthDays, ...currentMonthDays];
+        const nextMonthDays = rangeArr(42 - days.length).map((_, index) => ({
+          text: index + 1,
+          type: 'next'
+        }));
+        days = days.concat(nextMonthDays);
+      }
+      return this.toNestedArr(days);
+    },
+
+    weekDays() {
+      const start = this.firstDayOfWeek;
+      const { WEEK_DAYS } = this;
+
+      if (typeof start !== 'number' || start === 0) {
+        return WEEK_DAYS.slice();
+      } else {
+        return WEEK_DAYS.slice(start).concat(WEEK_DAYS.slice(0, start));
+      }
+    }
+  },
+
+  render() {
+    const thead = this.hideHeader ? null : (<thead>
+      {
+        this.weekDays.map(day => <th key={day}>{ day }</th>)
+      }
+    </thead>);
+    return (
+      <table
+        class={{
+          'el-calendar-table': true,
+          'is-range': this.isInRange
+        }}
+        cellspacing="0"
+        cellpadding="0">
+        {
+          thead
+        }
+        <tbody>
+          {
+            this.rows.map((row, index) => <tr
+              class={{
+                'el-calendar-table__row': true,
+                'el-calendar-table__row--hide-border': index === 0 && this.hideHeader
+              }}
+              key={index}>
+              {
+                row.map((cell, key) => <td key={key}
+                  class={ this.getCellClass(cell) }
+                  onClick={this.pickDay.bind(this, cell)}>
+                  <div class="el-calendar-day">
+                    {
+                      this.cellRenderProxy(cell)
+                    }
+                  </div>
+                </td>)
+              }
+            </tr>)
+          }
+        </tbody>
+      </table>);
+  }
+};
+</script>
diff --git a/packages/calendar/src/main.vue b/packages/calendar/src/main.vue
new file mode 100644
index 00000000000..268b1674d39
--- /dev/null
+++ b/packages/calendar/src/main.vue
@@ -0,0 +1,280 @@
+<template>
+  <div class="el-calendar">
+    <div class="el-calendar__header">
+      <div class="el-calendar__title">
+        {{ i18nDate }}
+      </div>
+      <div
+        class="el-calendar__button-group"
+        v-if="validatedRange.length === 0">
+        <el-button-group>
+          <el-button
+            type="plain"
+            size="mini"
+            @click="selectDate('prev-month')">
+            {{ t('el.datepicker.prevMonth') }}
+          </el-button>
+          <el-button
+            type="plain"
+            size="mini"
+            @click="selectDate('today')">
+            {{ t('el.datepicker.today') }}
+          </el-button>
+          <el-button
+            type="plain"
+            size="mini"
+            @click="selectDate('next-month')">
+            {{ t('el.datepicker.nextMonth') }}
+          </el-button>
+        </el-button-group>
+      </div>
+    </div>
+    <div
+      class="el-calendar__body"
+      v-if="validatedRange.length === 0"
+      key="no-range">
+      <date-table
+        :date="date"
+        :selected-day="realSelectedDay"
+        :first-day-of-week="realFirstDayOfWeek"
+        @pick="pickDay" />
+    </div>
+    <div
+      v-else
+      class="el-calendar__body"
+      key="has-range">
+      <date-table
+        v-for="(range, index) in validatedRange"
+        :key="index"
+        :date="range[0]"
+        :selected-day="realSelectedDay"
+        :range="range"
+        :hide-header="index !== 0"
+        :first-day-of-week="realFirstDayOfWeek"
+        @pick="pickDay" />
+    </div>
+  </div>
+</template>
+
+<script>
+import Locale from 'element-ui/src/mixins/locale';
+import fecha from 'element-ui/src/utils/date';
+import ElButton from 'element-ui/packages/button';
+import ElButtonGroup from 'element-ui/packages/button-group';
+import DateTable from './date-table';
+import { validateRangeInOneMonth } from 'element-ui/src/utils/date-util';
+
+const validTypes = ['prev-month', 'today', 'next-month'];
+const weekDays = ['Sunday', 'Monday', 'Tuesday', 'Wednesday', 'Thursday', 'Friday', 'Saturday'];
+const oneDay = 86400000;
+
+export default {
+  name: 'ElCalendar',
+
+  mixins: [Locale],
+
+  components: {
+    DateTable,
+    ElButton,
+    ElButtonGroup
+  },
+
+  props: {
+    value: [Date, String, Number],
+    range: {
+      type: Array,
+      validator(range) {
+        if (Array.isArray(range)) {
+          return range.length === 2 && range.every(
+            item => typeof item === 'string' ||
+            typeof item === 'number' ||
+            item instanceof Date);
+        } else {
+          return true;
+        }
+      }
+    },
+    firstDayOfWeek: {
+      type: Number,
+      default: 1
+    }
+  },
+
+  provide() {
+    return {
+      elCalendar: this
+    };
+  },
+
+  methods: {
+    pickDay(day) {
+      this.realSelectedDay = day;
+    },
+
+    selectDate(type) {
+      if (validTypes.indexOf(type) === -1) {
+        throw new Error(`invalid type ${type}`);
+      }
+      let day = '';
+      if (type === 'prev-month') {
+        day = `${this.prevMonthDatePrefix}-01`;
+      } else if (type === 'next-month') {
+        day = `${this.nextMonthDatePrefix}-01`;
+      } else {
+        day = this.formatedToday;
+      }
+
+      if (day === this.formatedDate) return;
+      this.pickDay(day);
+    },
+
+    toDate(val) {
+      if (!val) {
+        throw new Error('invalid val');
+      }
+      return val instanceof Date ? val : new Date(val);
+    },
+
+    rangeValidator(date, isStart) {
+      const firstDayOfWeek = this.realFirstDayOfWeek;
+      const expected = isStart ? firstDayOfWeek : (firstDayOfWeek === 0 ? 6 : firstDayOfWeek - 1);
+      const message = `${isStart ? 'start' : 'end'} of range should be ${weekDays[expected]}.`;
+      if (date.getDay() !== expected) {
+        console.warn('[ElementCalendar]', message, 'Invalid range will be ignored.');
+        return false;
+      }
+      return true;
+    }
+  },
+
+  computed: {
+    prevMonthDatePrefix() {
+      const temp = new Date(this.date.getTime());
+      temp.setDate(0);
+      return fecha.format(temp, 'yyyy-MM');
+    },
+
+    curMonthDatePrefix() {
+      return fecha.format(this.date, 'yyyy-MM');
+    },
+
+    nextMonthDatePrefix() {
+      const temp = new Date(this.date.getFullYear(), this.date.getMonth() + 1, 1);
+      return fecha.format(temp, 'yyyy-MM');
+    },
+
+    formatedDate() {
+      return fecha.format(this.date, 'yyyy-MM-dd');
+    },
+
+    i18nDate() {
+      const year = this.date.getFullYear();
+      const month = this.date.getMonth() + 1;
+      return `${year} ${this.t('el.datepicker.year')} ${this.t('el.datepicker.month' + month)}`;
+    },
+
+    formatedToday() {
+      return fecha.format(this.now, 'yyyy-MM-dd');
+    },
+
+    realSelectedDay: {
+      get() {
+        if (!this.value) return this.selectedDay;
+        return this.formatedDate;
+      },
+      set(val) {
+        this.selectedDay = val;
+        const date = new Date(val);
+        this.$emit('input', date);
+      }
+    },
+
+    date() {
+      if (!this.value) {
+        if (this.realSelectedDay) {
+          const d = this.selectedDay.split('-');
+          return new Date(d[0], d[1] - 1, d[2]);
+        } else if (this.validatedRange.length) {
+          return this.validatedRange[0][0];
+        }
+        return this.now;
+      } else {
+        return this.toDate(this.value);
+      }
+    },
+
+    // if range is valid, we get a two-digit array
+    validatedRange() {
+      let range = this.range;
+      if (!range) return [];
+      range = range.reduce((prev, val, index) => {
+        const date = this.toDate(val);
+        if (this.rangeValidator(date, index === 0)) {
+          prev = prev.concat(date);
+        }
+        return prev;
+      }, []);
+      if (range.length === 2) {
+        const [start, end] = range;
+        if (start > end) {
+          console.warn('[ElementCalendar]end time should be greater than start time');
+          return [];
+        }
+        // start time and end time in one month
+        if (validateRangeInOneMonth(start, end)) {
+          return [
+            [start, end]
+          ];
+        }
+        const data = [];
+        let startDay = new Date(start.getFullYear(), start.getMonth() + 1, 1);
+        const lastDay = this.toDate(startDay.getTime() - oneDay);
+        if (!validateRangeInOneMonth(startDay, end)) {
+          console.warn('[ElementCalendar]start time and end time interval must not exceed two months');
+          return [];
+        }
+        // 第一个月的时间范围
+        data.push([
+          start,
+          lastDay
+        ]);
+        // 下一月的时间范围，需要计算一下该月的第一个周起始日
+        const firstDayOfWeek = this.realFirstDayOfWeek;
+        const nextMontFirstDay = startDay.getDay();
+        let interval = 0;
+        if (nextMontFirstDay !== firstDayOfWeek) {
+          if (firstDayOfWeek === 0) {
+            interval = 7 - nextMontFirstDay;
+          } else {
+            interval = firstDayOfWeek - nextMontFirstDay;
+            interval = interval > 0 ? interval : 7 + interval;
+          }
+        }
+        startDay = this.toDate(startDay.getTime() + interval * oneDay);
+        if (startDay.getDate() < end.getDate()) {
+          data.push([
+            startDay,
+            end
+          ]);
+        }
+        return data;
+      }
+      return [];
+    },
+
+    realFirstDayOfWeek() {
+      if (this.firstDayOfWeek < 1 || this.firstDayOfWeek > 6) {
+        return 0;
+      }
+      return Math.floor(this.firstDayOfWeek);
+    }
+  },
+
+  data() {
+    return {
+      selectedDay: '',
+      now: new Date()
+    };
+  }
+};
+</script>
diff --git a/packages/card/src/main.vue b/packages/card/src/main.vue
index 81e27c1ce33..403fd04080e 100644
--- a/packages/card/src/main.vue
+++ b/packages/card/src/main.vue
@@ -1,5 +1,6 @@
 <template>
-  <div class="el-card" :class="shadow ? 'is-' + shadow + '-shadow' : 'is-always-shadow'">
+  <div class="el-card" :class="shadow ? 'is-' + shadow + '-shadow' : 'is-always-shadow'"
+       v-bind="$attrs" v-on="$listeners">
     <div class="el-card__header" v-if="$slots.header || header">
       <slot name="header">{{ header }}</slot>
     </div>
diff --git a/packages/carousel/src/item.vue b/packages/carousel/src/item.vue
index 1e2382b9daf..907574e96a0 100644
--- a/packages/carousel/src/item.vue
+++ b/packages/carousel/src/item.vue
@@ -10,11 +10,7 @@
       'is-animating': animating
     }"
     @click="handleItemClick"
-    :style="{
-      msTransform: `translateX(${ translate }px) scale(${ scale })`,
-      webkitTransform: `translateX(${ translate }px) scale(${ scale })`,
-      transform: `translateX(${ translate }px) scale(${ scale })`
-    }">
+    :style="itemStyle">
     <div
       v-if="$parent.type === 'card'"
       v-show="!active"
@@ -25,6 +21,7 @@
 </template>
 
 <script>
+  import { autoprefixer } from 'element-ui/src/utils/util';
   const CARD_SCALE = 0.83;
   export default {
     name: 'ElCarouselItem',
@@ -63,7 +60,8 @@
         return index;
       },
 
-      calculateTranslate(index, activeIndex, parentWidth) {
+      calcCardTranslate(index, activeIndex) {
+        const parentWidth = this.$parent.$el.offsetWidth;
         if (this.inStage) {
           return parentWidth * ((2 - CARD_SCALE) * (index - activeIndex) + 1) / 4;
         } else if (index < activeIndex) {
@@ -73,23 +71,33 @@
         }
       },
 
+      calcTranslate(index, activeIndex, isVertical) {
+        const distance = this.$parent.$el[isVertical ? 'offsetHeight' : 'offsetWidth'];
+        return distance * (index - activeIndex);
+      },
+
       translateItem(index, activeIndex, oldIndex) {
-        const parentWidth = this.$parent.$el.offsetWidth;
+        const parentType = this.$parent.type;
+        const parentDirection = this.parentDirection;
         const length = this.$parent.items.length;
-        if (this.$parent.type !== 'card' && oldIndex !== undefined) {
+        if (parentType !== 'card' && oldIndex !== undefined) {
           this.animating = index === activeIndex || index === oldIndex;
         }
         if (index !== activeIndex && length > 2 && this.$parent.loop) {
           index = this.processIndex(index, activeIndex, length);
         }
-        if (this.$parent.type === 'card') {
+        if (parentType === 'card') {
+          if (parentDirection === 'vertical') {
+            console.warn('[Element Warn][Carousel]vertical directionis not supported in card mode');
+          }
           this.inStage = Math.round(Math.abs(index - activeIndex)) <= 1;
           this.active = index === activeIndex;
-          this.translate = this.calculateTranslate(index, activeIndex, parentWidth);
+          this.translate = this.calcCardTranslate(index, activeIndex);
           this.scale = this.active ? 1 : CARD_SCALE;
         } else {
           this.active = index === activeIndex;
-          this.translate = parentWidth * (index - activeIndex);
+          const isVertical = parentDirection === 'vertical';
+          this.translate = this.calcTranslate(index, activeIndex, isVertical);
         }
         this.ready = true;
       },
@@ -103,6 +111,21 @@
       }
     },
 
+    computed: {
+      parentDirection() {
+        return this.$parent.direction;
+      },
+
+      itemStyle() {
+        const translateType = this.parentDirection === 'vertical' ? 'translateY' : 'translateX';
+        const value = `${translateType}(${ this.translate }px) scale(${ this.scale })`;
+        const style = {
+          transform: value
+        };
+        return autoprefixer(style);
+      }
+    },
+
     created() {
       this.$parent && this.$parent.updateItems();
     },
diff --git a/packages/carousel/src/main.vue b/packages/carousel/src/main.vue
index 3983ce4fcf2..9a3f85694cb 100644
--- a/packages/carousel/src/main.vue
+++ b/packages/carousel/src/main.vue
@@ -1,16 +1,16 @@
 <template>
   <div
-    class="el-carousel"
-    :class="{ 'el-carousel--card': type === 'card' }"
+    :class="carouselClasses"
     @mouseenter.stop="handleMouseEnter"
     @mouseleave.stop="handleMouseLeave">
     <div
       class="el-carousel__container"
       :style="{ height: height }">
-      <transition name="carousel-arrow-left">
+      <transition
+        v-if="arrowDisplay"
+        name="carousel-arrow-left">
         <button
           type="button"
-          v-if="arrow !== 'never'"
           v-show="(arrow === 'always' || hover) && (loop || activeIndex > 0)"
           @mouseenter="handleButtonEnter('left')"
           @mouseleave="handleButtonLeave"
@@ -19,10 +19,11 @@
           <i class="el-icon-arrow-left"></i>
         </button>
       </transition>
-      <transition name="carousel-arrow-right">
+      <transition
+        v-if="arrowDisplay"
+        name="carousel-arrow-right">
         <button
           type="button"
-          v-if="arrow !== 'never'"
           v-show="(arrow === 'always' || hover) && (loop || activeIndex < items.length - 1)"
           @mouseenter="handleButtonEnter('right')"
           @mouseleave="handleButtonLeave"
@@ -34,16 +35,20 @@
       <slot></slot>
     </div>
     <ul
-      class="el-carousel__indicators"
       v-if="indicatorPosition !== 'none'"
-      :class="{ 'el-carousel__indicators--labels': hasLabel, 'el-carousel__indicators--outside': indicatorPosition === 'outside' || type === 'card' }">
+      :class="indicatorsClasses">
       <li
         v-for="(item, index) in items"
-        class="el-carousel__indicator"
-        :class="{ 'is-active': index === activeIndex }"
+        :key="index"
+        :class="[
+          'el-carousel__indicator',
+          'el-carousel__indicator--' + direction,
+          { 'is-active': index === activeIndex }]"
         @mouseenter="throttledIndicatorHover(index)"
         @click.stop="handleIndicatorClick(index)">
-        <button class="el-carousel__button"><span v-if="hasLabel">{{ item.label }}</span></button>
+        <button class="el-carousel__button">
+          <span v-if="hasLabel">{{ item.label }}</span>
+        </button>
       </li>
     </ul>
   </div>
@@ -87,6 +92,13 @@ export default {
     loop: {
       type: Boolean,
       default: true
+    },
+    direction: {
+      type: String,
+      default: 'horizontal',
+      validator(val) {
+        return ['horizontal', 'vertical'].indexOf(val) !== -1;
+      }
     }
   },
 
@@ -101,8 +113,31 @@ export default {
   },
 
   computed: {
+    arrowDisplay() {
+      return this.arrow !== 'never' && this.direction !== 'vertical';
+    },
+
     hasLabel() {
       return this.items.some(item => item.label.toString().length > 0);
+    },
+
+    carouselClasses() {
+      const classes = ['el-carousel', 'el-carousel--' + this.direction];
+      if (this.type === 'card') {
+        classes.push('el-carousel--card');
+      }
+      return classes;
+    },
+
+    indicatorsClasses() {
+      const classes = ['el-carousel__indicators', 'el-carousel__indicators--' + this.direction];
+      if (this.hasLabel) {
+        classes.push('el-carousel__indicators--labels');
+      }
+      if (this.indicatorPosition === 'outside' || this.type === 'card') {
+        classes.push('el-carousel__indicators--outside');
+      }
+      return classes;
     }
   },
 
@@ -113,7 +148,9 @@ export default {
 
     activeIndex(val, oldVal) {
       this.resetItemPosition(oldVal);
-      this.$emit('change', val, oldVal);
+      if (oldVal > -1) {
+        this.$emit('change', val, oldVal);
+      }
     },
 
     autoplay(val) {
@@ -149,6 +186,7 @@ export default {
     },
 
     handleButtonEnter(arrow) {
+      if (this.direction === 'vertical') return;
       this.items.forEach((item, index) => {
         if (arrow === this.itemInStage(item, index)) {
           item.hover = true;
@@ -157,6 +195,7 @@ export default {
     },
 
     handleButtonLeave() {
+      if (this.direction === 'vertical') return;
       this.items.forEach(item => {
         item.hover = false;
       });
@@ -181,11 +220,14 @@ export default {
     },
 
     pauseTimer() {
-      clearInterval(this.timer);
+      if (this.timer) {
+        clearInterval(this.timer);
+        this.timer = null;
+      }
     },
 
     startTimer() {
-      if (this.interval <= 0 || !this.autoplay) return;
+      if (this.interval <= 0 || !this.autoplay || this.timer) return;
       this.timer = setInterval(this.playSlides, this.interval);
     },
 
@@ -198,7 +240,6 @@ export default {
       }
       index = Number(index);
       if (isNaN(index) || index !== Math.floor(index)) {
-        process.env.NODE_ENV !== 'production' &&
         console.warn('[Element Warn][Carousel]index must be an integer.');
         return;
       }
@@ -257,6 +298,7 @@ export default {
 
   beforeDestroy() {
     if (this.$el) removeResizeListener(this.$el, this.resetItemPosition);
+    this.pauseTimer();
   }
 };
 </script>
diff --git a/packages/cascader-panel/index.js b/packages/cascader-panel/index.js
new file mode 100644
index 00000000000..ceade94e796
--- /dev/null
+++ b/packages/cascader-panel/index.js
@@ -0,0 +1,8 @@
+import CascaderPanel from './src/cascader-panel';
+
+/* istanbul ignore next */
+CascaderPanel.install = function(Vue) {
+  Vue.component(CascaderPanel.name, CascaderPanel);
+};
+
+export default CascaderPanel;
diff --git a/packages/cascader-panel/src/cascader-menu.vue b/packages/cascader-panel/src/cascader-menu.vue
new file mode 100644
index 00000000000..c7977e07f85
--- /dev/null
+++ b/packages/cascader-panel/src/cascader-menu.vue
@@ -0,0 +1,138 @@
+<script>
+import ElScrollbar from 'element-ui/packages/scrollbar';
+import CascaderNode from './cascader-node.vue';
+import Locale from 'element-ui/src/mixins/locale';
+import { generateId } from 'element-ui/src/utils/util';
+
+export default {
+  name: 'ElCascaderMenu',
+
+  mixins: [Locale],
+
+  inject: ['panel'],
+
+  components: {
+    ElScrollbar,
+    CascaderNode
+  },
+
+  props: {
+    nodes: {
+      type: Array,
+      required: true
+    },
+    index: Number
+  },
+
+  data() {
+    return {
+      activeNode: null,
+      hoverTimer: null,
+      id: generateId()
+    };
+  },
+
+  computed: {
+    isEmpty() {
+      return !this.nodes.length;
+    },
+    menuId() {
+      return `cascader-menu-${this.id}-${this.index}`;
+    }
+  },
+
+  methods: {
+    handleExpand(e) {
+      this.activeNode = e.target;
+    },
+    handleMouseMove(e) {
+      const { activeNode, hoverTimer } = this;
+      const { hoverZone } = this.$refs;
+
+      if (!activeNode || !hoverZone) return;
+
+      if (activeNode.contains(e.target)) {
+        clearTimeout(hoverTimer);
+
+        const { left } = this.$el.getBoundingClientRect();
+        const startX = e.clientX - left;
+        const { offsetWidth, offsetHeight } = this.$el;
+        const top = activeNode.offsetTop;
+        const bottom = top + activeNode.offsetHeight;
+
+        hoverZone.innerHTML = `
+          <path style="pointer-events: auto;" fill="transparent" d="M${startX} ${top} L${offsetWidth} 0 V${top} Z" />
+          <path style="pointer-events: auto;" fill="transparent" d="M${startX} ${bottom} L${offsetWidth} ${offsetHeight} V${bottom} Z" />
+        `;
+      } else if (!hoverTimer) {
+        this.hoverTimer = setTimeout(this.clearHoverZone, this.panel.config.hoverThreshold);
+      }
+    },
+    clearHoverZone() {
+      const { hoverZone } = this.$refs;
+      if (!hoverZone) return;
+      hoverZone.innerHTML = '';
+    },
+
+    renderEmptyText(h) {
+      return (
+        <div class="el-cascader-menu__empty-text">{ this.t('el.cascader.noData') }</div>
+      );
+    },
+    renderNodeList(h) {
+      const { menuId } = this;
+      const { isHoverMenu } = this.panel;
+      const events = { on: {} };
+
+      if (isHoverMenu) {
+        events.on.expand = this.handleExpand;
+      }
+
+      const nodes = this.nodes.map((node, index) => {
+        const { hasChildren } = node;
+        return (
+          <cascader-node
+            key={ node.uid }
+            node={ node }
+            node-id={ `${menuId}-${index}` }
+            aria-haspopup={ hasChildren }
+            aria-owns = { hasChildren ? menuId : null }
+            { ...events }></cascader-node>
+        );
+      });
+
+      return [
+        ...nodes,
+        isHoverMenu ? <svg ref='hoverZone' class='el-cascader-menu__hover-zone'></svg> : null
+      ];
+    }
+  },
+
+  render(h) {
+    const { isEmpty, menuId } = this;
+    const events = { nativeOn: {} };
+
+    // optimize hover to expand experience (#8010)
+    if (this.panel.isHoverMenu) {
+      events.nativeOn.mousemove = this.handleMouseMove;
+      // events.nativeOn.mouseleave = this.clearHoverZone;
+    }
+
+    return (
+      <el-scrollbar
+        tag="ul"
+        role="menu"
+        id={ menuId }
+        class="el-cascader-menu"
+        wrap-class="el-cascader-menu__wrap"
+        view-class={{
+          'el-cascader-menu__list': true,
+          'is-empty': isEmpty
+        }}
+        { ...events }>
+        { isEmpty ? this.renderEmptyText(h) : this.renderNodeList(h) }
+      </el-scrollbar>
+    );
+  }
+};
+</script>
diff --git a/packages/cascader-panel/src/cascader-node.vue b/packages/cascader-panel/src/cascader-node.vue
new file mode 100644
index 00000000000..360f588b666
--- /dev/null
+++ b/packages/cascader-panel/src/cascader-node.vue
@@ -0,0 +1,246 @@
+<script>
+  import ElCheckbox from 'element-ui/packages/checkbox';
+  import ElRadio from 'element-ui/packages/radio';
+  import { isEqual } from 'element-ui/src/utils/util';
+
+  const stopPropagation = e => e.stopPropagation();
+
+  export default {
+    inject: ['panel'],
+
+    components: {
+      ElCheckbox,
+      ElRadio
+    },
+
+    props: {
+      node: {
+        required: true
+      },
+      nodeId: String
+    },
+
+    computed: {
+      config() {
+        return this.panel.config;
+      },
+      isLeaf() {
+        return this.node.isLeaf;
+      },
+      isDisabled() {
+        return this.node.isDisabled;
+      },
+      checkedValue() {
+        return this.panel.checkedValue;
+      },
+      isChecked() {
+        return this.node.isSameNode(this.checkedValue);
+      },
+      inActivePath() {
+        return this.isInPath(this.panel.activePath);
+      },
+      inCheckedPath() {
+        if (!this.config.checkStrictly) return false;
+
+        return this.panel.checkedNodePaths
+          .some(checkedPath => this.isInPath(checkedPath));
+      },
+      value() {
+        return this.node.getValueByOption();
+      }
+    },
+
+    methods: {
+      handleExpand() {
+        const { panel, node, isDisabled, config } = this;
+        const { multiple, checkStrictly } = config;
+
+        if (!checkStrictly && isDisabled || node.loading) return;
+
+        if (config.lazy && !node.loaded) {
+          panel.lazyLoad(node, () => {
+            // do not use cached leaf value here, invoke this.isLeaf to get new value.
+            const { isLeaf } = this;
+
+            if (!isLeaf) this.handleExpand();
+            if (multiple) {
+              // if leaf sync checked state, else clear checked state
+              const checked = isLeaf ? node.checked : false;
+              this.handleMultiCheckChange(checked);
+            }
+          });
+        } else {
+          panel.handleExpand(node);
+        }
+      },
+
+      handleCheckChange() {
+        const { panel, value, node } = this;
+        panel.handleCheckChange(value);
+        panel.handleExpand(node);
+      },
+
+      handleMultiCheckChange(checked) {
+        this.node.doCheck(checked);
+        this.panel.calculateMultiCheckedValue();
+      },
+
+      isInPath(pathNodes) {
+        const { node } = this;
+        const selectedPathNode = pathNodes[node.level - 1] || {};
+        return selectedPathNode.uid === node.uid;
+      },
+
+      renderPrefix(h) {
+        const { isLeaf, isChecked, config } = this;
+        const { checkStrictly, multiple } = config;
+
+        if (multiple) {
+          return this.renderCheckbox(h);
+        } else if (checkStrictly) {
+          return this.renderRadio(h);
+        } else if (isLeaf && isChecked) {
+          return this.renderCheckIcon(h);
+        }
+
+        return null;
+      },
+
+      renderPostfix(h) {
+        const { node, isLeaf } = this;
+
+        if (node.loading) {
+          return this.renderLoadingIcon(h);
+        } else if (!isLeaf) {
+          return this.renderExpandIcon(h);
+        }
+
+        return null;
+      },
+
+      renderCheckbox(h) {
+        const { node, config, isDisabled } = this;
+        const events = {
+          on: { change: this.handleMultiCheckChange },
+          nativeOn: {}
+        };
+
+        if (config.checkStrictly) { // when every node is selectable, click event should not trigger expand event.
+          events.nativeOn.click = stopPropagation;
+        }
+
+        return (
+          <el-checkbox
+            value={ node.checked }
+            indeterminate={ node.indeterminate }
+            disabled={ isDisabled }
+            { ...events }
+          ></el-checkbox>
+        );
+      },
+
+      renderRadio(h) {
+        let { checkedValue, value, isDisabled } = this;
+
+        // to keep same reference if value cause radio's checked state is calculated by reference comparision;
+        if (isEqual(value, checkedValue)) {
+          value = checkedValue;
+        }
+
+        return (
+          <el-radio
+            value={ checkedValue }
+            label={ value }
+            disabled={ isDisabled }
+            onChange={ this.handleCheckChange }
+            nativeOnClick={ stopPropagation }>
+            {/* add an empty element to avoid render label */}
+            <span></span>
+          </el-radio>
+        );
+      },
+
+      renderCheckIcon(h) {
+        return (
+          <i class="el-icon-check el-cascader-node__prefix"></i>
+        );
+      },
+
+      renderLoadingIcon(h) {
+        return (
+          <i class="el-icon-loading el-cascader-node__postfix"></i>
+        );
+      },
+
+      renderExpandIcon(h) {
+        return (
+          <i class="el-icon-arrow-right el-cascader-node__postfix"></i>
+        );
+      },
+
+      renderContent(h) {
+        const { panel, node } = this;
+        const render = panel.renderLabelFn;
+        const vnode = render
+          ? render({ node, data: node.data })
+          : null;
+
+        return (
+          <span class="el-cascader-node__label">{ vnode || node.label }</span>
+        );
+      }
+    },
+
+    render(h) {
+      const {
+        inActivePath,
+        inCheckedPath,
+        isChecked,
+        isLeaf,
+        isDisabled,
+        config,
+        nodeId
+      } = this;
+      const { expandTrigger, checkStrictly, multiple } = config;
+      const disabled = !checkStrictly && isDisabled;
+      const events = { on: {} };
+
+      if (expandTrigger === 'click') {
+        events.on.click = this.handleExpand;
+      } else {
+        events.on.mouseenter = e => {
+          this.handleExpand();
+          this.$emit('expand', e);
+        };
+        events.on.focus = e => {
+          this.handleExpand();
+          this.$emit('expand', e);
+        };
+      }
+      if (isLeaf && !isDisabled && !checkStrictly && !multiple) {
+        events.on.click = this.handleCheckChange;
+      }
+
+      return (
+        <li
+          role="menuitem"
+          id={ nodeId }
+          aria-expanded={ inActivePath }
+          tabindex={ disabled ? null : -1 }
+          class={{
+            'el-cascader-node': true,
+            'is-selectable': checkStrictly,
+            'in-active-path': inActivePath,
+            'in-checked-path': inCheckedPath,
+            'is-active': isChecked,
+            'is-disabled': disabled
+          }}
+          {...events}>
+          { this.renderPrefix(h) }
+          { this.renderContent(h) }
+          { this.renderPostfix(h) }
+        </li>
+      );
+    }
+  };
+</script>
diff --git a/packages/cascader-panel/src/cascader-panel.vue b/packages/cascader-panel/src/cascader-panel.vue
new file mode 100644
index 00000000000..1d804166772
--- /dev/null
+++ b/packages/cascader-panel/src/cascader-panel.vue
@@ -0,0 +1,382 @@
+<template>
+  <div
+    :class="[
+      'el-cascader-panel',
+      border && 'is-bordered'
+    ]"
+    @keydown="handleKeyDown">
+    <cascader-menu
+      ref="menu"
+      v-for="(menu, index) in menus"
+      :index="index"
+      :key="index"
+      :nodes="menu"></cascader-menu>
+  </div>
+</template>
+
+<script>
+import CascaderMenu from './cascader-menu';
+import Store from './store';
+import merge from 'element-ui/src/utils/merge';
+import AriaUtils from 'element-ui/src/utils/aria-utils';
+import scrollIntoView from 'element-ui/src/utils/scroll-into-view';
+import {
+  noop,
+  coerceTruthyValueToArray,
+  isEqual,
+  isEmpty,
+  valueEquals
+} from 'element-ui/src/utils/util';
+
+const { keys: KeyCode } = AriaUtils;
+const DefaultProps = {
+  expandTrigger: 'click', // or hover
+  multiple: false,
+  checkStrictly: false, // whether all nodes can be selected
+  emitPath: true, // wether to emit an array of all levels value in which node is located
+  lazy: false,
+  lazyLoad: noop,
+  value: 'value',
+  label: 'label',
+  children: 'children',
+  leaf: 'leaf',
+  disabled: 'disabled',
+  hoverThreshold: 500
+};
+
+const isLeaf = el => !el.getAttribute('aria-owns');
+
+const getSibling = (el, distance) => {
+  const { parentNode } = el;
+  if (parentNode) {
+    const siblings = parentNode.querySelectorAll('.el-cascader-node[tabindex="-1"]');
+    const index = Array.prototype.indexOf.call(siblings, el);
+    return siblings[index + distance] || null;
+  }
+  return null;
+};
+
+const getMenuIndex = (el, distance) => {
+  if (!el) return;
+  const pieces = el.id.split('-');
+  return Number(pieces[pieces.length - 2]);
+};
+
+const focusNode = el => {
+  if (!el) return;
+  el.focus();
+  !isLeaf(el) && el.click();
+};
+
+const checkNode = el => {
+  if (!el) return;
+
+  const input = el.querySelector('input');
+  if (input) {
+    input.click();
+  } else if (isLeaf(el)) {
+    el.click();
+  }
+};
+
+export default {
+  name: 'ElCascaderPanel',
+
+  components: {
+    CascaderMenu
+  },
+
+  props: {
+    value: {},
+    options: Array,
+    props: Object,
+    border: {
+      type: Boolean,
+      default: true
+    },
+    renderLabel: Function
+  },
+
+  provide() {
+    return {
+      panel: this
+    };
+  },
+
+  data() {
+    return {
+      checkedValue: null,
+      checkedNodePaths: [],
+      store: [],
+      menus: [],
+      activePath: [],
+      loadCount: 0
+    };
+  },
+
+  computed: {
+    config() {
+      return merge({ ...DefaultProps }, this.props || {});
+    },
+    multiple() {
+      return this.config.multiple;
+    },
+    checkStrictly() {
+      return this.config.checkStrictly;
+    },
+    leafOnly() {
+      return !this.checkStrictly;
+    },
+    isHoverMenu() {
+      return this.config.expandTrigger === 'hover';
+    },
+    renderLabelFn() {
+      return this.renderLabel || this.$scopedSlots.default;
+    }
+  },
+
+  watch: {
+    options: {
+      handler: function() {
+        this.initStore();
+      },
+      immediate: true,
+      deep: true
+    },
+    value() {
+      this.syncCheckedValue();
+      this.checkStrictly && this.calculateCheckedNodePaths();
+    },
+    checkedValue(val) {
+      if (!isEqual(val, this.value)) {
+        this.checkStrictly && this.calculateCheckedNodePaths();
+        this.$emit('input', val);
+        this.$emit('change', val);
+      }
+    }
+  },
+
+  mounted() {
+    if (!isEmpty(this.value)) {
+      this.syncCheckedValue();
+    }
+  },
+
+  methods: {
+    initStore() {
+      const { config, options } = this;
+      if (config.lazy && isEmpty(options)) {
+        this.lazyLoad();
+      } else {
+        this.store = new Store(options, config);
+        this.menus = [this.store.getNodes()];
+        this.syncMenuState();
+      }
+    },
+    syncCheckedValue() {
+      const { value, checkedValue } = this;
+      if (!isEqual(value, checkedValue)) {
+        this.checkedValue = value;
+        this.syncMenuState();
+      }
+    },
+    syncMenuState() {
+      const { multiple, checkStrictly } = this;
+      this.syncActivePath();
+      multiple && this.syncMultiCheckState();
+      checkStrictly && this.calculateCheckedNodePaths();
+      this.$nextTick(this.scrollIntoView);
+    },
+    syncMultiCheckState() {
+      const nodes = this.getFlattedNodes(this.leafOnly);
+
+      nodes.forEach(node => {
+        node.syncCheckState(this.checkedValue);
+      });
+    },
+    syncActivePath() {
+      const { store, multiple, activePath, checkedValue } = this;
+
+      if (!isEmpty(activePath)) {
+        const nodes = activePath.map(node => this.getNodeByValue(node.getValue()));
+        this.expandNodes(nodes);
+      } else if (!isEmpty(checkedValue)) {
+        const value = multiple ? checkedValue[0] : checkedValue;
+        const checkedNode = this.getNodeByValue(value) || {};
+        const nodes = (checkedNode.pathNodes || []).slice(0, -1);
+        this.expandNodes(nodes);
+      } else {
+        this.activePath = [];
+        this.menus = [store.getNodes()];
+      }
+    },
+    expandNodes(nodes) {
+      nodes.forEach(node => this.handleExpand(node, true /* silent */));
+    },
+    calculateCheckedNodePaths() {
+      const { checkedValue, multiple } = this;
+      const checkedValues = multiple
+        ? coerceTruthyValueToArray(checkedValue)
+        : [ checkedValue ];
+      this.checkedNodePaths = checkedValues.map(v => {
+        const checkedNode = this.getNodeByValue(v);
+        return checkedNode ? checkedNode.pathNodes : [];
+      });
+    },
+    handleKeyDown(e) {
+      const { target, keyCode } = e;
+
+      switch (keyCode) {
+        case KeyCode.up:
+          const prev = getSibling(target, -1);
+          focusNode(prev);
+          break;
+        case KeyCode.down:
+          const next = getSibling(target, 1);
+          focusNode(next);
+          break;
+        case KeyCode.left:
+          const preMenu = this.$refs.menu[getMenuIndex(target) - 1];
+          if (preMenu) {
+            const expandedNode = preMenu.$el.querySelector('.el-cascader-node[aria-expanded="true"]');
+            focusNode(expandedNode);
+          }
+          break;
+        case KeyCode.right:
+          const nextMenu = this.$refs.menu[getMenuIndex(target) + 1];
+          if (nextMenu) {
+            const firstNode = nextMenu.$el.querySelector('.el-cascader-node[tabindex="-1"]');
+            focusNode(firstNode);
+          }
+          break;
+        case KeyCode.enter:
+          checkNode(target);
+          break;
+        case KeyCode.esc:
+        case KeyCode.tab:
+          this.$emit('close');
+          break;
+        default:
+          return;
+      }
+    },
+    handleExpand(node, silent) {
+      const { activePath } = this;
+      const { level } = node;
+      const path = activePath.slice(0, level - 1);
+      const menus = this.menus.slice(0, level);
+
+      if (!node.isLeaf) {
+        path.push(node);
+        menus.push(node.children);
+      }
+
+      this.activePath = path;
+      this.menus = menus;
+
+      if (!silent) {
+        const pathValues = path.map(node => node.getValue());
+        const activePathValues = activePath.map(node => node.getValue());
+        if (!valueEquals(pathValues, activePathValues)) {
+          this.$emit('active-item-change', pathValues); // Deprecated
+          this.$emit('expand-change', pathValues);
+        }
+      }
+    },
+    handleCheckChange(value) {
+      this.checkedValue = value;
+    },
+    lazyLoad(node, onFullfiled) {
+      const { config } = this;
+      if (!node) {
+        node = node || { root: true, level: 0 };
+        this.store = new Store([], config);
+        this.menus = [this.store.getNodes()];
+      }
+      node.loading = true;
+      const resolve = dataList => {
+        const parent = node.root ? null : node;
+        dataList && dataList.length && this.store.appendNodes(dataList, parent);
+        node.loading = false;
+        node.loaded = true;
+
+        // dispose default value on lazy load mode
+        if (Array.isArray(this.checkedValue)) {
+          const nodeValue = this.checkedValue[this.loadCount++];
+          const valueKey = this.config.value;
+          const leafKey = this.config.leaf;
+
+          if (Array.isArray(dataList) && dataList.filter(item => item[valueKey] === nodeValue).length > 0) {
+            const checkedNode = this.store.getNodeByValue(nodeValue);
+
+            if (!checkedNode.data[leafKey]) {
+              this.lazyLoad(checkedNode, () => {
+                this.handleExpand(checkedNode);
+              });
+            }
+
+            if (this.loadCount === this.checkedValue.length) {
+              this.$parent.computePresentText();
+            }
+          }
+        }
+
+        onFullfiled && onFullfiled(dataList);
+      };
+      config.lazyLoad(node, resolve);
+    },
+
+    /**
+     * public methods
+    */
+    calculateMultiCheckedValue() {
+      this.checkedValue = this.getCheckedNodes(this.leafOnly)
+        .map(node => node.getValueByOption());
+    },
+    scrollIntoView() {
+      if (this.$isServer) return;
+
+      const menus = this.$refs.menu || [];
+      menus.forEach(menu => {
+        const menuElement = menu.$el;
+        if (menuElement) {
+          const container = menuElement.querySelector('.el-scrollbar__wrap');
+          const activeNode = menuElement.querySelector('.el-cascader-node.is-active') ||
+            menuElement.querySelector('.el-cascader-node.in-active-path');
+          scrollIntoView(container, activeNode);
+        }
+      });
+    },
+    getNodeByValue(val) {
+      return this.store.getNodeByValue(val);
+    },
+    getFlattedNodes(leafOnly) {
+      const cached = !this.config.lazy;
+      return this.store.getFlattedNodes(leafOnly, cached);
+    },
+    getCheckedNodes(leafOnly) {
+      const { checkedValue, multiple } = this;
+      if (multiple) {
+        const nodes = this.getFlattedNodes(leafOnly);
+        return nodes.filter(node => node.checked);
+      } else {
+        return isEmpty(checkedValue)
+          ? []
+          : [this.getNodeByValue(checkedValue)];
+      }
+    },
+    clearCheckedNodes() {
+      const { config, leafOnly } = this;
+      const { multiple, emitPath } = config;
+      if (multiple) {
+        this.getCheckedNodes(leafOnly)
+          .filter(node => !node.isDisabled)
+          .forEach(node => node.doCheck(false));
+        this.calculateMultiCheckedValue();
+      } else {
+        this.checkedValue = emitPath ? [] : null;
+      }
+    }
+  }
+};
+</script>
diff --git a/packages/cascader-panel/src/node.js b/packages/cascader-panel/src/node.js
new file mode 100644
index 00000000000..1efd4f775ca
--- /dev/null
+++ b/packages/cascader-panel/src/node.js
@@ -0,0 +1,166 @@
+import { isEqual, capitalize } from 'element-ui/src/utils/util';
+import { isDef } from 'element-ui/src/utils/shared';
+
+let uid = 0;
+
+export default class Node {
+
+  constructor(data, config, parentNode) {
+    this.data = data;
+    this.config = config;
+    this.parent = parentNode || null;
+    this.level = !this.parent ? 1 : this.parent.level + 1;
+    this.uid = uid++;
+
+    this.initState();
+    this.initChildren();
+  }
+
+  initState() {
+    const { value: valueKey, label: labelKey } = this.config;
+
+    this.value = this.data[valueKey];
+    this.label = this.data[labelKey];
+    this.pathNodes = this.calculatePathNodes();
+    this.path = this.pathNodes.map(node => node.value);
+    this.pathLabels = this.pathNodes.map(node => node.label);
+
+    // lazy load
+    this.loading = false;
+    this.loaded = false;
+  }
+
+  initChildren() {
+    const { config } = this;
+    const childrenKey = config.children;
+    const childrenData = this.data[childrenKey];
+    this.hasChildren = Array.isArray(childrenData);
+    this.children = (childrenData || []).map(child => new Node(child, config, this));
+  }
+
+  get isDisabled() {
+    const { data, parent, config } = this;
+    const disabledKey = config.disabled;
+    const { checkStrictly } = config;
+    return data[disabledKey] ||
+      !checkStrictly && parent && parent.isDisabled;
+  }
+
+  get isLeaf() {
+    const { data, loaded, hasChildren, children } = this;
+    const { lazy, leaf: leafKey } = this.config;
+    if (lazy) {
+      const isLeaf = isDef(data[leafKey])
+        ? data[leafKey]
+        : (loaded ? !children.length : false);
+      this.hasChildren = !isLeaf;
+      return isLeaf;
+    }
+    return !hasChildren;
+  }
+
+  calculatePathNodes() {
+    const nodes = [this];
+    let parent = this.parent;
+
+    while (parent) {
+      nodes.unshift(parent);
+      parent = parent.parent;
+    }
+
+    return nodes;
+  }
+
+  getPath() {
+    return this.path;
+  }
+
+  getValue() {
+    return this.value;
+  }
+
+  getValueByOption() {
+    return this.config.emitPath
+      ? this.getPath()
+      : this.getValue();
+  }
+
+  getText(allLevels, separator) {
+    return allLevels ? this.pathLabels.join(separator) : this.label;
+  }
+
+  isSameNode(checkedValue) {
+    const value = this.getValueByOption();
+    return this.config.multiple && Array.isArray(checkedValue)
+      ? checkedValue.some(val => isEqual(val, value))
+      : isEqual(checkedValue, value);
+  }
+
+  broadcast(event, ...args) {
+    const handlerName = `onParent${capitalize(event)}`;
+
+    this.children.forEach(child => {
+      if (child) {
+        // bottom up
+        child.broadcast(event, ...args);
+        child[handlerName] && child[handlerName](...args);
+      }
+    });
+  }
+
+  emit(event, ...args) {
+    const { parent } = this;
+    const handlerName = `onChild${capitalize(event)}`;
+    if (parent) {
+      parent[handlerName] && parent[handlerName](...args);
+      parent.emit(event, ...args);
+    }
+  }
+
+  onParentCheck(checked) {
+    if (!this.isDisabled) {
+      this.setCheckState(checked);
+    }
+  }
+
+  onChildCheck() {
+    const { children } = this;
+    const validChildren = children.filter(child => !child.isDisabled);
+    const checked = validChildren.length
+      ? validChildren.every(child => child.checked)
+      : false;
+
+    this.setCheckState(checked);
+  }
+
+  setCheckState(checked) {
+    const totalNum = this.children.length;
+    const checkedNum = this.children.reduce((c, p) => {
+      const num = p.checked ? 1 : (p.indeterminate ? 0.5 : 0);
+      return c + num;
+    }, 0);
+
+    this.checked = checked;
+    this.indeterminate = checkedNum !== totalNum && checkedNum > 0;
+  }
+
+  syncCheckState(checkedValue) {
+    const value = this.getValueByOption();
+    const checked = this.isSameNode(checkedValue, value);
+
+    this.doCheck(checked);
+  }
+
+  doCheck(checked) {
+    if (this.checked !== checked) {
+      if (this.config.checkStrictly) {
+        this.checked = checked;
+      } else {
+        // bottom up to unify the calculation of the indeterminate state
+        this.broadcast('check', checked);
+        this.setCheckState(checked);
+        this.emit('check');
+      }
+    }
+  }
+}
diff --git a/packages/cascader-panel/src/store.js b/packages/cascader-panel/src/store.js
new file mode 100644
index 00000000000..90e68bad87d
--- /dev/null
+++ b/packages/cascader-panel/src/store.js
@@ -0,0 +1,62 @@
+import Node from './node';
+import { coerceTruthyValueToArray, valueEquals } from 'element-ui/src/utils/util';
+
+const flatNodes = (data, leafOnly) => {
+  return data.reduce((res, node) => {
+    if (node.isLeaf) {
+      res.push(node);
+    } else {
+      !leafOnly && res.push(node);
+      res = res.concat(flatNodes(node.children, leafOnly));
+    }
+    return res;
+  }, []);
+};
+
+export default class Store {
+
+  constructor(data, config) {
+    this.config = config;
+    this.initNodes(data);
+  }
+
+  initNodes(data) {
+    data = coerceTruthyValueToArray(data);
+    this.nodes = data.map(nodeData => new Node(nodeData, this.config));
+    this.flattedNodes = this.getFlattedNodes(false, false);
+    this.leafNodes = this.getFlattedNodes(true, false);
+  }
+
+  appendNode(nodeData, parentNode) {
+    const node = new Node(nodeData, this.config, parentNode);
+    const children = parentNode ? parentNode.children : this.nodes;
+
+    children.push(node);
+  }
+
+  appendNodes(nodeDataList, parentNode) {
+    nodeDataList = coerceTruthyValueToArray(nodeDataList);
+    nodeDataList.forEach(nodeData => this.appendNode(nodeData, parentNode));
+  }
+
+  getNodes() {
+    return this.nodes;
+  }
+
+  getFlattedNodes(leafOnly, cached = true) {
+    const cachedNodes = leafOnly ? this.leafNodes : this.flattedNodes;
+    return cached
+      ? cachedNodes
+      : flatNodes(this.nodes, leafOnly);
+  }
+
+  getNodeByValue(value) {
+    if (value) {
+      const nodes = this.getFlattedNodes(false, !this.config.lazy)
+        .filter(node => (valueEquals(node.path, value) || node.value === value));
+      return nodes && nodes.length ? nodes[0] : null;
+    }
+    return null;
+  }
+
+}
diff --git a/packages/cascader/index.js b/packages/cascader/index.js
index 68163ac5e32..b3d860fc1ac 100644
--- a/packages/cascader/index.js
+++ b/packages/cascader/index.js
@@ -1,4 +1,4 @@
-import Cascader from './src/main';
+import Cascader from './src/cascader';
 
 /* istanbul ignore next */
 Cascader.install = function(Vue) {
diff --git a/packages/cascader/src/cascader.vue b/packages/cascader/src/cascader.vue
new file mode 100644
index 00000000000..6e2887631c1
--- /dev/null
+++ b/packages/cascader/src/cascader.vue
@@ -0,0 +1,657 @@
+<template>
+  <div
+    ref="reference"
+    :class="[
+      'el-cascader',
+      realSize && `el-cascader--${realSize}`,
+      { 'is-disabled': isDisabled }
+    ]"
+    v-clickoutside="() => toggleDropDownVisible(false)"
+    @mouseenter="inputHover = true"
+    @mouseleave="inputHover = false"
+    @click="() => toggleDropDownVisible(readonly ? undefined : true)"
+    @keydown="handleKeyDown">
+
+    <el-input
+      ref="input"
+      v-model="multiple ? presentText : inputValue"
+      :size="realSize"
+      :placeholder="placeholder"
+      :readonly="readonly"
+      :disabled="isDisabled"
+      :validate-event="false"
+      :class="{ 'is-focus': dropDownVisible }"
+      @focus="handleFocus"
+      @blur="handleBlur"
+      @input="handleInput">
+      <template slot="suffix">
+        <i
+          v-if="clearBtnVisible"
+          key="clear"
+          class="el-input__icon el-icon-circle-close"
+          @click.stop="handleClear"></i>
+        <i
+          v-else
+          key="arrow-down"
+          :class="[
+            'el-input__icon',
+            'el-icon-arrow-down',
+            dropDownVisible && 'is-reverse'
+          ]"
+          @click.stop="toggleDropDownVisible()"></i>
+      </template>
+    </el-input>
+
+    <div v-if="multiple" class="el-cascader__tags">
+      <el-tag
+        v-for="(tag) in presentTags"
+        :key="tag.key"
+        type="info"
+        :size="tagSize"
+        :hit="tag.hitState"
+        :closable="tag.closable"
+        disable-transitions
+        @close="deleteTag(tag)">
+        <span>{{ tag.text }}</span>
+      </el-tag>
+      <input
+        v-if="filterable && !isDisabled"
+        v-model.trim="inputValue"
+        type="text"
+        class="el-cascader__search-input"
+        :placeholder="presentTags.length ? '' : placeholder"
+        @input="e => handleInput(inputValue, e)"
+        @click.stop="toggleDropDownVisible(true)"
+        @keydown.delete="handleDelete">
+    </div>
+
+    <transition name="el-zoom-in-top" @after-leave="handleDropdownLeave">
+      <div
+        v-show="dropDownVisible"
+        ref="popper"
+        :class="['el-popper', 'el-cascader__dropdown', popperClass]">
+        <el-cascader-panel
+          ref="panel"
+          v-show="!filtering"
+          v-model="checkedValue"
+          :options="options"
+          :props="config"
+          :border="false"
+          :render-label="$scopedSlots.default"
+          @expand-change="handleExpandChange"
+          @close="toggleDropDownVisible(false)"></el-cascader-panel>
+        <el-scrollbar
+          ref="suggestionPanel"
+          v-if="filterable"
+          v-show="filtering"
+          tag="ul"
+          class="el-cascader__suggestion-panel"
+          view-class="el-cascader__suggestion-list"
+          @keydown.native="handleSuggestionKeyDown">
+          <template v-if="suggestions.length">
+            <li
+              v-for="(item, index) in suggestions"
+              :key="item.uid"
+              :class="[
+                'el-cascader__suggestion-item',
+                item.checked && 'is-checked'
+              ]"
+              :tabindex="-1"
+              @click="handleSuggestionClick(index)">
+              <span>{{ item.text }}</span>
+              <i v-if="item.checked" class="el-icon-check"></i>
+            </li>
+          </template>
+          <slot v-else name="empty">
+            <li class="el-cascader__empty-text">{{ t('el.cascader.noMatch') }}</li>
+          </slot>
+        </el-scrollbar>
+      </div>
+    </transition>
+  </div>
+</template>
+
+<script>
+import Popper from 'element-ui/src/utils/vue-popper';
+import Clickoutside from 'element-ui/src/utils/clickoutside';
+import Emitter from 'element-ui/src/mixins/emitter';
+import Locale from 'element-ui/src/mixins/locale';
+import Migrating from 'element-ui/src/mixins/migrating';
+import ElInput from 'element-ui/packages/input';
+import ElTag from 'element-ui/packages/tag';
+import ElScrollbar from 'element-ui/packages/scrollbar';
+import ElCascaderPanel from 'element-ui/packages/cascader-panel';
+import AriaUtils from 'element-ui/src/utils/aria-utils';
+import { t } from 'element-ui/src/locale';
+import { isEqual, isEmpty, kebabCase, valueEquals } from 'element-ui/src/utils/util';
+import { isUndefined, isFunction } from 'element-ui/src/utils/types';
+import { isDef } from 'element-ui/src/utils/shared';
+import { addResizeListener, removeResizeListener } from 'element-ui/src/utils/resize-event';
+import debounce from 'throttle-debounce/debounce';
+
+const { keys: KeyCode } = AriaUtils;
+const MigratingProps = {
+  expandTrigger: {
+    newProp: 'expandTrigger',
+    type: String
+  },
+  changeOnSelect: {
+    newProp: 'checkStrictly',
+    type: Boolean
+  },
+  hoverThreshold: {
+    newProp: 'hoverThreshold',
+    type: Number
+  }
+};
+
+const PopperMixin = {
+  props: {
+    placement: {
+      type: String,
+      default: 'bottom-start'
+    },
+    appendToBody: Popper.props.appendToBody,
+    visibleArrow: {
+      type: Boolean,
+      default: true
+    },
+    arrowOffset: Popper.props.arrowOffset,
+    offset: Popper.props.offset,
+    boundariesPadding: Popper.props.boundariesPadding,
+    popperOptions: Popper.props.popperOptions
+  },
+  methods: Popper.methods,
+  data: Popper.data,
+  beforeDestroy: Popper.beforeDestroy
+};
+
+const InputSizeMap = {
+  medium: 36,
+  small: 32,
+  mini: 28
+};
+
+export default {
+  name: 'ElCascader',
+
+  directives: { Clickoutside },
+
+  mixins: [PopperMixin, Emitter, Locale, Migrating],
+
+  inject: {
+    elForm: {
+      default: ''
+    },
+    elFormItem: {
+      default: ''
+    }
+  },
+
+  components: {
+    ElInput,
+    ElTag,
+    ElScrollbar,
+    ElCascaderPanel
+  },
+
+  props: {
+    value: {},
+    options: Array,
+    props: Object,
+    size: String,
+    placeholder: {
+      type: String,
+      default: () => t('el.cascader.placeholder')
+    },
+    disabled: Boolean,
+    clearable: {
+      type: Boolean,
+      default: true
+    },
+    filterable: {
+      type: Boolean,
+      default: true
+    },
+    filterMethod: Function,
+    separator: {
+      type: String,
+      default: ' / '
+    },
+    showAllLevels: {
+      type: Boolean,
+      default: true
+    },
+    collapseTags: Boolean,
+    debounce: {
+      type: Number,
+      default: 300
+    },
+    beforeFilter: {
+      type: Function,
+      default: () => (() => {})
+    },
+    popperClass: String
+  },
+
+  data() {
+    return {
+      dropDownVisible: false,
+      checkedValue: this.value || null,
+      inputHover: false,
+      inputValue: null,
+      presentText: null,
+      presentTags: [],
+      checkedNodes: [],
+      filtering: false,
+      suggestions: [],
+      inputInitialHeight: 0,
+      pressDeleteCount: 0
+    };
+  },
+
+  computed: {
+    realSize() {
+      const _elFormItemSize = (this.elFormItem || {}).elFormItemSize;
+      return this.size || _elFormItemSize || (this.$ELEMENT || {}).size;
+    },
+    tagSize() {
+      return ['small', 'mini'].indexOf(this.realSize) > -1
+        ? 'mini'
+        : 'small';
+    },
+    isDisabled() {
+      return this.disabled || (this.elForm || {}).disabled;
+    },
+    config() {
+      const config = this.props || {};
+      const { $attrs } = this;
+
+      Object
+        .keys(MigratingProps)
+        .forEach(oldProp => {
+          const { newProp, type } = MigratingProps[oldProp];
+          let oldValue = $attrs[oldProp] || $attrs[kebabCase(oldProp)];
+          if (isDef(oldProp) && !isDef(config[newProp])) {
+            if (type === Boolean && oldValue === '') {
+              oldValue = true;
+            }
+            config[newProp] = oldValue;
+          }
+        });
+
+      return config;
+    },
+    multiple() {
+      return this.config.multiple;
+    },
+    leafOnly() {
+      return !this.config.checkStrictly;
+    },
+    readonly() {
+      return !this.filterable || this.multiple;
+    },
+    clearBtnVisible() {
+      if (!this.clearable || this.isDisabled || this.filtering || !this.inputHover) {
+        return false;
+      }
+
+      return this.multiple
+        ? !!this.checkedNodes.filter(node => !node.isDisabled).length
+        : !!this.presentText;
+    },
+    panel() {
+      return this.$refs.panel;
+    }
+  },
+
+  watch: {
+    disabled() {
+      this.computePresentContent();
+    },
+    value(val) {
+      if (!isEqual(val, this.checkedValue)) {
+        this.checkedValue = val;
+        this.computePresentContent();
+      }
+    },
+    checkedValue(val) {
+      const { value, dropDownVisible } = this;
+      const { checkStrictly, multiple } = this.config;
+
+      if (!isEqual(val, value) || isUndefined(value)) {
+        this.computePresentContent();
+        // hide dropdown when single mode
+        if (!multiple && !checkStrictly && dropDownVisible) {
+          this.toggleDropDownVisible(false);
+        }
+
+        this.$emit('input', val);
+        this.$emit('change', val);
+        this.dispatch('ElFormItem', 'el.form.change', [val]);
+      }
+    },
+    options: {
+      handler: function() {
+        this.$nextTick(this.computePresentContent);
+      },
+      deep: true
+    },
+    presentText(val) {
+      this.inputValue = val;
+    },
+    presentTags(val, oldVal) {
+      if (this.multiple && (val.length || oldVal.length)) {
+        this.$nextTick(this.updateStyle);
+      }
+    },
+    filtering(val) {
+      this.$nextTick(this.updatePopper);
+    }
+  },
+
+  mounted() {
+    const { input } = this.$refs;
+    if (input && input.$el) {
+      this.inputInitialHeight = input.$el.offsetHeight || InputSizeMap[this.realSize] || 40;
+    }
+
+    if (!isEmpty(this.value)) {
+      this.computePresentContent();
+    }
+
+    this.filterHandler = debounce(this.debounce, () => {
+      const { inputValue } = this;
+
+      if (!inputValue) {
+        this.filtering = false;
+        return;
+      }
+
+      const before = this.beforeFilter(inputValue);
+      if (before && before.then) {
+        before.then(this.getSuggestions);
+      } else if (before !== false) {
+        this.getSuggestions();
+      } else {
+        this.filtering = false;
+      }
+    });
+
+    addResizeListener(this.$el, this.updateStyle);
+  },
+
+  beforeDestroy() {
+    removeResizeListener(this.$el, this.updateStyle);
+  },
+
+  methods: {
+    getMigratingConfig() {
+      return {
+        props: {
+          'expand-trigger': 'expand-trigger is removed, use `props.expandTrigger` instead.',
+          'change-on-select': 'change-on-select is removed, use `props.checkStrictly` instead.',
+          'hover-threshold': 'hover-threshold is removed, use `props.hoverThreshold` instead'
+        },
+        events: {
+          'active-item-change': 'active-item-change is renamed to expand-change'
+        }
+      };
+    },
+    toggleDropDownVisible(visible) {
+      if (this.isDisabled) return;
+
+      const { dropDownVisible } = this;
+      const { input } = this.$refs;
+      visible = isDef(visible) ? visible : !dropDownVisible;
+      if (visible !== dropDownVisible) {
+        this.dropDownVisible = visible;
+        if (visible) {
+          this.$nextTick(() => {
+            this.updatePopper();
+            this.panel.scrollIntoView();
+          });
+        }
+        input.$refs.input.setAttribute('aria-expanded', visible);
+        this.$emit('visible-change', visible);
+      }
+    },
+    handleDropdownLeave() {
+      this.filtering = false;
+      this.inputValue = this.presentText;
+    },
+    handleKeyDown(event) {
+      switch (event.keyCode) {
+        case KeyCode.enter:
+          this.toggleDropDownVisible();
+          break;
+        case KeyCode.down:
+          this.toggleDropDownVisible(true);
+          this.focusFirstNode();
+          event.preventDefault();
+          break;
+        case KeyCode.esc:
+        case KeyCode.tab:
+          this.toggleDropDownVisible(false);
+          break;
+      }
+    },
+    handleFocus(e) {
+      this.$emit('focus', e);
+    },
+    handleBlur(e) {
+      this.$emit('blur', e);
+    },
+    handleInput(val, event) {
+      !this.dropDownVisible && this.toggleDropDownVisible(true);
+
+      if (event && event.isComposing) return;
+      if (val) {
+        this.filterHandler();
+      } else {
+        this.filtering = false;
+      }
+    },
+    handleClear() {
+      this.presentText = '';
+      this.panel.clearCheckedNodes();
+    },
+    handleExpandChange(value) {
+      this.$nextTick(this.updatePopper.bind(this));
+      this.$emit('expand-change', value);
+      this.$emit('active-item-change', value); // Deprecated
+    },
+    focusFirstNode() {
+      this.$nextTick(() => {
+        const { filtering } = this;
+        const { popper, suggestionPanel } = this.$refs;
+        let firstNode = null;
+
+        if (filtering && suggestionPanel) {
+          firstNode = suggestionPanel.$el.querySelector('.el-cascader__suggestion-item');
+        } else {
+          const firstMenu = popper.querySelector('.el-cascader-menu');
+          firstNode = firstMenu.querySelector('.el-cascader-node[tabindex="-1"]');
+        }
+
+        if (firstNode) {
+          firstNode.focus();
+          !filtering && firstNode.click();
+        }
+      });
+    },
+    computePresentContent() {
+      // nextTick is required, because checked nodes may not change right now
+      this.$nextTick(() => {
+        if (this.config.multiple) {
+          this.computePresentTags();
+          this.presentText = this.presentTags.length ? ' ' : null;
+        } else {
+          this.computePresentText();
+        }
+      });
+    },
+    computePresentText() {
+      const { checkedValue, config } = this;
+      if (!isEmpty(checkedValue)) {
+        const node = this.panel.getNodeByValue(checkedValue);
+        if (node && (config.checkStrictly || node.isLeaf)) {
+          this.presentText = node.getText(this.showAllLevels, this.separator);
+          return;
+        }
+      }
+      this.presentText = null;
+    },
+    computePresentTags() {
+      const { isDisabled, leafOnly, showAllLevels, separator, collapseTags } = this;
+      const checkedNodes = this.getCheckedNodes(leafOnly);
+      const tags = [];
+
+      const genTag = node => ({
+        node,
+        key: node.uid,
+        text: node.getText(showAllLevels, separator),
+        hitState: false,
+        closable: !isDisabled && !node.isDisabled
+      });
+
+      if (checkedNodes.length) {
+        const [first, ...rest] = checkedNodes;
+        const restCount = rest.length;
+        tags.push(genTag(first));
+
+        if (restCount) {
+          if (collapseTags) {
+            tags.push({
+              key: -1,
+              text: `+ ${restCount}`,
+              closable: false
+            });
+          } else {
+            rest.forEach(node => tags.push(genTag(node)));
+          }
+        }
+      }
+
+      this.checkedNodes = checkedNodes;
+      this.presentTags = tags;
+    },
+    getSuggestions() {
+      let { filterMethod } = this;
+
+      if (!isFunction(filterMethod)) {
+        filterMethod = (node, keyword) => node.text.includes(keyword);
+      }
+
+      const suggestions = this.panel.getFlattedNodes(this.leafOnly)
+        .filter(node => {
+          if (node.isDisabled) return false;
+          node.text = node.getText(this.showAllLevels, this.separator) || '';
+          return filterMethod(node, this.inputValue);
+        });
+
+      if (this.multiple) {
+        this.presentTags.forEach(tag => {
+          tag.hitState = false;
+        });
+      } else {
+        suggestions.forEach(node => {
+          node.checked = isEqual(this.checkedValue, node.getValueByOption());
+        });
+      }
+
+      this.filtering = true;
+      this.suggestions = suggestions;
+      this.$nextTick(this.updatePopper);
+    },
+    handleSuggestionKeyDown(event) {
+      const { keyCode, target } = event;
+      switch (keyCode) {
+        case KeyCode.enter:
+          target.click();
+          break;
+        case KeyCode.up:
+          const prev = target.previousElementSibling;
+          prev && prev.focus();
+          break;
+        case KeyCode.down:
+          const next = target.nextElementSibling;
+          next && next.focus();
+          break;
+        case KeyCode.esc:
+        case KeyCode.tab:
+          this.toggleDropDownVisible(false);
+          break;
+      }
+    },
+    handleDelete() {
+      const { inputValue, pressDeleteCount, presentTags } = this;
+      const lastIndex = presentTags.length - 1;
+      const lastTag = presentTags[lastIndex];
+      this.pressDeleteCount = inputValue ? 0 : pressDeleteCount + 1;
+
+      if (!lastTag) return;
+
+      if (this.pressDeleteCount) {
+        if (lastTag.hitState) {
+          this.deleteTag(lastTag);
+        } else {
+          lastTag.hitState = true;
+        }
+      }
+    },
+    handleSuggestionClick(index) {
+      const { multiple } = this;
+      const targetNode = this.suggestions[index];
+
+      if (multiple) {
+        const { checked } = targetNode;
+        targetNode.doCheck(!checked);
+        this.panel.calculateMultiCheckedValue();
+      } else {
+        this.checkedValue = targetNode.getValueByOption();
+        this.toggleDropDownVisible(false);
+      }
+    },
+    deleteTag(tag) {
+      const { checkedValue, props: { emitPath = true }} = this;
+      const index = checkedValue.findIndex(v => valueEquals(v, tag.node[emitPath ? 'path' : 'value']));
+      const val = checkedValue[index];
+      // 不能用 splice，因为 checkedValue 的监听器会再判断一次引用是否相同
+      this.checkedValue = checkedValue.filter((n, i) => i !== index);
+      this.$emit('remove-tag', val);
+    },
+    updateStyle() {
+      const { $el, inputInitialHeight } = this;
+      if (this.$isServer || !$el) return;
+
+      const { suggestionPanel } = this.$refs;
+      const inputInner = $el.querySelector('.el-input__inner');
+
+      if (!inputInner) return;
+
+      const tags = $el.querySelector('.el-cascader__tags');
+      let suggestionPanelEl = null;
+
+      if (suggestionPanel && (suggestionPanelEl = suggestionPanel.$el)) {
+        const suggestionList = suggestionPanelEl.querySelector('.el-cascader__suggestion-list');
+        suggestionList.style.minWidth = inputInner.offsetWidth + 'px';
+      }
+
+      if (tags) {
+        const { offsetHeight } = tags;
+        const height = Math.max(offsetHeight + 6, inputInitialHeight) + 'px';
+        inputInner.style.height = height;
+        this.updatePopper();
+      }
+    },
+
+    /**
+     * public methods
+    */
+    getCheckedNodes(leafOnly) {
+      return this.panel.getCheckedNodes(leafOnly);
+    }
+  }
+};
+</script>
diff --git a/packages/cascader/src/main.vue b/packages/cascader/src/main.vue
deleted file mode 100644
index 099c35e22bd..00000000000
--- a/packages/cascader/src/main.vue
+++ /dev/null
@@ -1,456 +0,0 @@
-<template>
-  <span
-    class="el-cascader"
-    :class="[
-      {
-        'is-opened': menuVisible,
-        'is-disabled': cascaderDisabled
-      },
-      cascaderSize ? 'el-cascader--' + cascaderSize : ''
-    ]"
-    @click="handleClick"
-    @mouseenter="inputHover = true"
-    @focus="inputHover = true"
-    @mouseleave="inputHover = false"
-    @blur="inputHover = false"
-    ref="reference"
-    v-clickoutside="handleClickoutside"
-    @keydown="handleKeydown"
-  >
-    <el-input
-      ref="input"
-      :readonly="readonly"
-      :placeholder="currentLabels.length ? undefined : placeholder"
-      v-model="inputValue"
-      @input="debouncedInputChange"
-      @focus="handleFocus"
-      @blur="handleBlur"
-      @compositionstart.native="handleComposition"
-      @compositionend.native="handleComposition"
-      :validate-event="false"
-      :size="size"
-      :disabled="cascaderDisabled"
-      :class="{ 'is-focus': menuVisible }"
-    >
-      <template slot="suffix">
-        <i
-          key="1"
-          v-if="clearable && inputHover && currentLabels.length"
-          class="el-input__icon el-icon-circle-close el-cascader__clearIcon"
-          @click="clearValue"
-        ></i>
-        <i
-          key="2"
-          v-else
-          class="el-input__icon el-icon-arrow-down"
-          :class="{ 'is-reverse': menuVisible }"
-        ></i>
-      </template>
-    </el-input>
-    <span class="el-cascader__label" v-show="inputValue === '' && !isOnComposition">
-      <template v-if="showAllLevels">
-        <template v-for="(label, index) in currentLabels">
-          {{ label }}
-          <span v-if="index < currentLabels.length - 1" :key="index"> {{ separator }} </span>
-        </template>
-      </template>
-      <template v-else>
-        {{ currentLabels[currentLabels.length - 1] }}
-      </template>
-    </span>
-  </span>
-</template>
-
-<script>
-import Vue from 'vue';
-import ElCascaderMenu from './menu';
-import ElInput from 'element-ui/packages/input';
-import Popper from 'element-ui/src/utils/vue-popper';
-import Clickoutside from 'element-ui/src/utils/clickoutside';
-import emitter from 'element-ui/src/mixins/emitter';
-import Locale from 'element-ui/src/mixins/locale';
-import { t } from 'element-ui/src/locale';
-import debounce from 'throttle-debounce/debounce';
-import { generateId, escapeRegexpString, isIE, isEdge } from 'element-ui/src/utils/util';
-
-const popperMixin = {
-  props: {
-    placement: {
-      type: String,
-      default: 'bottom-start'
-    },
-    appendToBody: Popper.props.appendToBody,
-    arrowOffset: Popper.props.arrowOffset,
-    offset: Popper.props.offset,
-    boundariesPadding: Popper.props.boundariesPadding,
-    popperOptions: Popper.props.popperOptions
-  },
-  methods: Popper.methods,
-  data: Popper.data,
-  beforeDestroy: Popper.beforeDestroy
-};
-
-export default {
-  name: 'ElCascader',
-
-  directives: { Clickoutside },
-
-  mixins: [popperMixin, emitter, Locale],
-
-  inject: {
-    elForm: {
-      default: ''
-    },
-    elFormItem: {
-      default: ''
-    }
-  },
-
-  components: {
-    ElInput
-  },
-
-  props: {
-    options: {
-      type: Array,
-      required: true
-    },
-    props: {
-      type: Object,
-      default() {
-        return {
-          children: 'children',
-          label: 'label',
-          value: 'value',
-          disabled: 'disabled'
-        };
-      }
-    },
-    value: {
-      type: Array,
-      default() {
-        return [];
-      }
-    },
-    separator: {
-      type: String,
-      default: '/'
-    },
-    placeholder: {
-      type: String,
-      default() {
-        return t('el.cascader.placeholder');
-      }
-    },
-    disabled: Boolean,
-    clearable: {
-      type: Boolean,
-      default: false
-    },
-    changeOnSelect: Boolean,
-    popperClass: String,
-    expandTrigger: {
-      type: String,
-      default: 'click'
-    },
-    filterable: Boolean,
-    size: String,
-    showAllLevels: {
-      type: Boolean,
-      default: true
-    },
-    debounce: {
-      type: Number,
-      default: 300
-    },
-    beforeFilter: {
-      type: Function,
-      default: () => (() => {})
-    },
-    hoverThreshold: {
-      type: Number,
-      default: 500
-    }
-  },
-
-  data() {
-    return {
-      currentValue: this.value || [],
-      menu: null,
-      debouncedInputChange() {},
-      menuVisible: false,
-      inputHover: false,
-      inputValue: '',
-      flatOptions: null,
-      id: generateId(),
-      needFocus: true,
-      isOnComposition: false
-    };
-  },
-
-  computed: {
-    labelKey() {
-      return this.props.label || 'label';
-    },
-    valueKey() {
-      return this.props.value || 'value';
-    },
-    childrenKey() {
-      return this.props.children || 'children';
-    },
-    disabledKey() {
-      return this.props.disabled || 'disabled';
-    },
-    currentLabels() {
-      let options = this.options;
-      let labels = [];
-      this.currentValue.forEach(value => {
-        const targetOption = options && options.filter(option => option[this.valueKey] === value)[0];
-        if (targetOption) {
-          labels.push(targetOption[this.labelKey]);
-          options = targetOption[this.childrenKey];
-        }
-      });
-      return labels;
-    },
-    _elFormItemSize() {
-      return (this.elFormItem || {}).elFormItemSize;
-    },
-    cascaderSize() {
-      return this.size || this._elFormItemSize || (this.$ELEMENT || {}).size;
-    },
-    cascaderDisabled() {
-      return this.disabled || (this.elForm || {}).disabled;
-    },
-    readonly() {
-      return !this.filterable || (!isIE() && !isEdge() && !this.menuVisible);
-    }
-  },
-
-  watch: {
-    menuVisible(value) {
-      this.$refs.input.$refs.input.setAttribute('aria-expanded', value);
-      value ? this.showMenu() : this.hideMenu();
-      this.$emit('visible-change', value);
-    },
-    value(value) {
-      this.currentValue = value;
-    },
-    currentValue(value) {
-      this.dispatch('ElFormItem', 'el.form.change', [value]);
-    },
-    currentLabels(value) {
-      const inputLabel = this.showAllLevels ? value.join('/') : value[value.length - 1] ;
-      this.$refs.input.$refs.input.setAttribute('value', inputLabel);
-    },
-    options: {
-      deep: true,
-      handler(value) {
-        if (!this.menu) {
-          this.initMenu();
-        }
-        this.flatOptions = this.flattenOptions(this.options);
-        this.menu.options = value;
-      }
-    }
-  },
-
-  methods: {
-    initMenu() {
-      this.menu = new Vue(ElCascaderMenu).$mount();
-      this.menu.options = this.options;
-      this.menu.props = this.props;
-      this.menu.expandTrigger = this.expandTrigger;
-      this.menu.changeOnSelect = this.changeOnSelect;
-      this.menu.popperClass = this.popperClass;
-      this.menu.hoverThreshold = this.hoverThreshold;
-      this.popperElm = this.menu.$el;
-      this.menu.$refs.menus[0].setAttribute('id', `cascader-menu-${this.id}`);
-      this.menu.$on('pick', this.handlePick);
-      this.menu.$on('activeItemChange', this.handleActiveItemChange);
-      this.menu.$on('menuLeave', this.doDestroy);
-      this.menu.$on('closeInside', this.handleClickoutside);
-    },
-    showMenu() {
-      if (!this.menu) {
-        this.initMenu();
-      }
-
-      this.menu.value = this.currentValue.slice(0);
-      this.menu.visible = true;
-      this.menu.options = this.options;
-      this.$nextTick(_ => {
-        this.updatePopper();
-        this.menu.inputWidth = this.$refs.input.$el.offsetWidth - 2;
-      });
-    },
-    hideMenu() {
-      this.inputValue = '';
-      this.menu.visible = false;
-      if (this.needFocus) {
-        this.$refs.input.focus();
-      } else {
-        this.needFocus = true;
-      }
-    },
-    handleActiveItemChange(value) {
-      this.$nextTick(_ => {
-        this.updatePopper();
-      });
-      this.$emit('active-item-change', value);
-    },
-    handleKeydown(e) {
-      const keyCode = e.keyCode;
-      if (keyCode === 13) {
-        this.handleClick();
-      } else if (keyCode === 40) { // down
-        this.menuVisible = true; // 打开
-        setTimeout(() => {
-          const firstMenu = this.popperElm.querySelectorAll('.el-cascader-menu')[0];
-          firstMenu.querySelectorAll("[tabindex='-1']")[0].focus();
-        });
-        e.stopPropagation();
-        e.preventDefault();
-      } else if (keyCode === 27 || keyCode === 9) { // esc  tab
-        this.inputValue = '';
-        if (this.menu) this.menu.visible = false;
-      }
-    },
-    handlePick(value, close = true) {
-      this.currentValue = value;
-      this.$emit('input', value);
-      this.$emit('change', value);
-
-      if (close) {
-        this.menuVisible = false;
-      } else {
-        this.$nextTick(this.updatePopper);
-      }
-    },
-    handleInputChange(value) {
-      if (!this.menuVisible) return;
-      const flatOptions = this.flatOptions;
-
-      if (!value) {
-        this.menu.options = this.options;
-        this.$nextTick(this.updatePopper);
-        return;
-      }
-
-      let filteredFlatOptions = flatOptions.filter(optionsStack => {
-        return optionsStack.some(option => new RegExp(escapeRegexpString(value), 'i')
-          .test(option[this.labelKey]));
-      });
-
-      if (filteredFlatOptions.length > 0) {
-        filteredFlatOptions = filteredFlatOptions.map(optionStack => {
-          return {
-            __IS__FLAT__OPTIONS: true,
-            value: optionStack.map(item => item[this.valueKey]),
-            label: this.renderFilteredOptionLabel(value, optionStack),
-            disabled: optionStack.some(item => item[this.disabledKey])
-          };
-        });
-      } else {
-        filteredFlatOptions = [{
-          __IS__FLAT__OPTIONS: true,
-          label: this.t('el.cascader.noMatch'),
-          value: '',
-          disabled: true
-        }];
-      }
-      this.menu.options = filteredFlatOptions;
-      this.$nextTick(this.updatePopper);
-    },
-    renderFilteredOptionLabel(inputValue, optionsStack) {
-      return optionsStack.map((option, index) => {
-        const label = option[this.labelKey];
-        const keywordIndex = label.toLowerCase().indexOf(inputValue.toLowerCase());
-        const labelPart = label.slice(keywordIndex, inputValue.length + keywordIndex);
-        const node = keywordIndex > -1 ? this.highlightKeyword(label, labelPart) : label;
-        return index === 0 ? node : [` ${this.separator} `, node];
-      });
-    },
-    highlightKeyword(label, keyword) {
-      const h = this._c;
-      return label.split(keyword)
-        .map((node, index) => index === 0 ? node : [
-          h('span', { class: { 'el-cascader-menu__item__keyword': true }}, [this._v(keyword)]),
-          node
-        ]);
-    },
-    flattenOptions(options, ancestor = []) {
-      let flatOptions = [];
-      options.forEach((option) => {
-        const optionsStack = ancestor.concat(option);
-        if (!option[this.childrenKey]) {
-          flatOptions.push(optionsStack);
-        } else {
-          if (this.changeOnSelect) {
-            flatOptions.push(optionsStack);
-          }
-          flatOptions = flatOptions.concat(this.flattenOptions(option[this.childrenKey], optionsStack));
-        }
-      });
-      return flatOptions;
-    },
-    clearValue(ev) {
-      ev.stopPropagation();
-      this.handlePick([], true);
-    },
-    handleClickoutside(pickFinished = false) {
-      if (this.menuVisible && !pickFinished) {
-        this.needFocus = false;
-      }
-      this.menuVisible = false;
-    },
-    handleClick() {
-      if (this.cascaderDisabled) return;
-      this.$refs.input.focus();
-      if (this.filterable) {
-        this.menuVisible = true;
-        return;
-      }
-      this.menuVisible = !this.menuVisible;
-    },
-    handleFocus(event) {
-      this.$emit('focus', event);
-    },
-    handleBlur(event) {
-      this.$emit('blur', event);
-    },
-    handleComposition(event) {
-      this.isOnComposition = event.type !== 'compositionend';
-    }
-  },
-
-  created() {
-    this.debouncedInputChange = debounce(this.debounce, value => {
-      const before = this.beforeFilter(value);
-
-      if (before && before.then) {
-        this.menu.options = [{
-          __IS__FLAT__OPTIONS: true,
-          label: this.t('el.cascader.loading'),
-          value: '',
-          disabled: true
-        }];
-        before
-          .then(() => {
-            this.$nextTick(() => {
-              this.handleInputChange(value);
-            });
-          });
-      } else if (before !== false) {
-        this.$nextTick(() => {
-          this.handleInputChange(value);
-        });
-      }
-    });
-  },
-
-  mounted() {
-    this.flatOptions = this.flattenOptions(this.options);
-  }
-};
-</script>
diff --git a/packages/cascader/src/menu.vue b/packages/cascader/src/menu.vue
deleted file mode 100644
index 511a0d9e046..00000000000
--- a/packages/cascader/src/menu.vue
+++ /dev/null
@@ -1,376 +0,0 @@
-<script>
-  import { isDef } from 'element-ui/src/utils/shared';
-  import scrollIntoView from 'element-ui/src/utils/scroll-into-view';
-  import { generateId } from 'element-ui/src/utils/util';
-
-  const copyArray = (arr, props) => {
-    if (!arr || !Array.isArray(arr) || !props) return arr;
-    const result = [];
-    const configurableProps = ['__IS__FLAT__OPTIONS', 'label', 'value', 'disabled'];
-    const childrenProp = props.children || 'children';
-    arr.forEach(item => {
-      const itemCopy = {};
-      configurableProps.forEach(prop => {
-        let name = props[prop];
-        let value = item[name];
-        if (value === undefined) {
-          name = prop;
-          value = item[name];
-        }
-        if (value !== undefined) itemCopy[name] = value;
-      });
-      if (Array.isArray(item[childrenProp])) {
-        itemCopy[childrenProp] = copyArray(item[childrenProp], props);
-      }
-      result.push(itemCopy);
-    });
-    return result;
-  };
-
-  export default {
-    name: 'ElCascaderMenu',
-
-    data() {
-      return {
-        inputWidth: 0,
-        options: [],
-        props: {},
-        visible: false,
-        activeValue: [],
-        value: [],
-        expandTrigger: 'click',
-        changeOnSelect: false,
-        popperClass: '',
-        hoverTimer: 0,
-        clicking: false,
-        id: generateId()
-      };
-    },
-
-    watch: {
-      visible(value) {
-        if (value) {
-          this.activeValue = this.value;
-        }
-      },
-      value: {
-        immediate: true,
-        handler(value) {
-          this.activeValue = value;
-        }
-      }
-    },
-
-    computed: {
-      activeOptions: {
-        cache: false,
-        get() {
-          const activeValue = this.activeValue;
-          const configurableProps = ['label', 'value', 'children', 'disabled'];
-
-          const formatOptions = options => {
-            options.forEach(option => {
-              if (option.__IS__FLAT__OPTIONS) return;
-              configurableProps.forEach(prop => {
-                const value = option[this.props[prop] || prop];
-                if (value !== undefined) option[prop] = value;
-              });
-              if (Array.isArray(option.children)) {
-                formatOptions(option.children);
-              }
-            });
-          };
-
-          const loadActiveOptions = (options, activeOptions = []) => {
-            const level = activeOptions.length;
-            activeOptions[level] = options;
-            let active = activeValue[level];
-            if (isDef(active)) {
-              options = options.filter(option => option.value === active)[0];
-              if (options && options.children) {
-                loadActiveOptions(options.children, activeOptions);
-              }
-            }
-            return activeOptions;
-          };
-
-          const optionsCopy = copyArray(this.options, this.props);
-          formatOptions(optionsCopy);
-          return loadActiveOptions(optionsCopy);
-        }
-      }
-    },
-
-    methods: {
-      select(item, menuIndex) {
-        if (item.__IS__FLAT__OPTIONS) {
-          this.activeValue = item.value;
-        } else if (menuIndex) {
-          this.activeValue.splice(menuIndex, this.activeValue.length - 1, item.value);
-        } else {
-          this.activeValue = [item.value];
-        }
-        this.$emit('pick', this.activeValue.slice());
-      },
-      handleMenuLeave() {
-        this.$emit('menuLeave');
-      },
-      activeItem(item, menuIndex) {
-        const len = this.activeOptions.length;
-        this.activeValue.splice(menuIndex, len, item.value);
-        this.activeOptions.splice(menuIndex + 1, len, item.children);
-        if (this.changeOnSelect) {
-          this.$emit('pick', this.activeValue.slice(), false);
-        } else {
-          this.$emit('activeItemChange', this.activeValue);
-        }
-      },
-      scrollMenu(menu) {
-        scrollIntoView(menu, menu.getElementsByClassName('is-active')[0]);
-      },
-      handleMenuEnter() {
-        this.$nextTick(() => this.$refs.menus.forEach(menu => this.scrollMenu(menu)));
-      }
-    },
-
-    render(h) {
-      const {
-        activeValue,
-        activeOptions,
-        visible,
-        expandTrigger,
-        popperClass,
-        hoverThreshold
-      } = this;
-      let itemId = null;
-      let itemIndex = 0;
-
-      let hoverMenuRefs = {};
-      const hoverMenuHandler = e => {
-        const activeMenu = hoverMenuRefs.activeMenu;
-        if (!activeMenu) return;
-        const offsetX = e.offsetX;
-        const width = activeMenu.offsetWidth;
-        const height = activeMenu.offsetHeight;
-
-        if (e.target === hoverMenuRefs.activeItem) {
-          clearTimeout(this.hoverTimer);
-          const {activeItem} = hoverMenuRefs;
-          const offsetY_top = activeItem.offsetTop;
-          const offsetY_Bottom = offsetY_top + activeItem.offsetHeight;
-
-          hoverMenuRefs.hoverZone.innerHTML = `
-            <path style="pointer-events: auto;" fill="transparent" d="M${offsetX} ${offsetY_top} L${width} 0 V${offsetY_top} Z" />
-            <path style="pointer-events: auto;" fill="transparent" d="M${offsetX} ${offsetY_Bottom} L${width} ${height} V${offsetY_Bottom} Z" />
-          `;
-        } else {
-          if (!this.hoverTimer) {
-            this.hoverTimer = setTimeout(() => {
-              hoverMenuRefs.hoverZone.innerHTML = '';
-            }, hoverThreshold);
-          }
-        }
-      };
-
-      const menus = this._l(activeOptions, (menu, menuIndex) => {
-        let isFlat = false;
-        const menuId = `menu-${this.id}-${ menuIndex}`;
-        const ownsId = `menu-${this.id}-${ menuIndex + 1 }`;
-        const items = this._l(menu, item => {
-          const events = {
-            on: {}
-          };
-
-          if (item.__IS__FLAT__OPTIONS) isFlat = true;
-
-          if (!item.disabled) {
-            // keydown up/down/left/right/enter
-            events.on.keydown = (ev) => {
-              const keyCode = ev.keyCode;
-              if ([37, 38, 39, 40, 13, 9, 27].indexOf(keyCode) < 0) {
-                return;
-              }
-              const currentEle = ev.target;
-              const parentEle = this.$refs.menus[menuIndex];
-              const menuItemList = parentEle.querySelectorAll("[tabindex='-1']");
-              const currentIndex = Array.prototype.indexOf.call(menuItemList, currentEle); // 当前索引
-              let nextIndex, nextMenu;
-              if ([38, 40].indexOf(keyCode) > -1) {
-                if (keyCode === 38) { // up键
-                  nextIndex = currentIndex !== 0 ? (currentIndex - 1) : currentIndex;
-                } else if (keyCode === 40) { // down
-                  nextIndex = currentIndex !== (menuItemList.length - 1) ? currentIndex + 1 : currentIndex;
-                }
-                menuItemList[nextIndex].focus();
-              } else if (keyCode === 37) { // left键
-                if (menuIndex !== 0) {
-                  const previousMenu = this.$refs.menus[menuIndex - 1];
-                  previousMenu.querySelector('[aria-expanded=true]').focus();
-                }
-              } else if (keyCode === 39) { // right
-                if (item.children) {
-                  // 有子menu 选择子menu的第一个menuitem
-                  nextMenu = this.$refs.menus[menuIndex + 1];
-                  nextMenu.querySelectorAll("[tabindex='-1']")[0].focus();
-                }
-              } else if (keyCode === 13) {
-                if (!item.children) {
-                  const id = currentEle.getAttribute('id');
-                  parentEle.setAttribute('aria-activedescendant', id);
-                  this.select(item, menuIndex);
-                  this.$nextTick(() => this.scrollMenu(this.$refs.menus[menuIndex]));
-                }
-              } else if (keyCode === 9 || keyCode === 27) { // esc tab
-                this.$emit('closeInside');
-              }
-            };
-            if (item.children) {
-              let triggerEvent = {
-                click: 'click',
-                hover: 'mouseenter'
-              }[expandTrigger];
-              const triggerHandler = () => {
-                if (this.visible) {
-                  this.activeItem(item, menuIndex);
-                  this.$nextTick(() => {
-                    // adjust self and next level
-                    this.scrollMenu(this.$refs.menus[menuIndex]);
-                    this.scrollMenu(this.$refs.menus[menuIndex + 1]);
-                  });
-                }
-              };
-              events.on[triggerEvent] = triggerHandler;
-              if (triggerEvent === 'mouseenter' && this.changeOnSelect) {
-                events.on.click = () => {
-                  if (this.activeValue.indexOf(item.value) !== -1) {
-                    this.$emit('closeInside', true);
-                  }
-                };
-              }
-              events.on['mousedown'] = () => {
-                this.clicking = true;
-              };
-              events.on['focus'] = () => { // focus 选中
-                if (this.clicking) {
-                  this.clicking = false;
-                  return;
-                }
-                triggerHandler();
-              };
-            } else {
-              events.on.click = () => {
-                this.select(item, menuIndex);
-                this.$nextTick(() => this.scrollMenu(this.$refs.menus[menuIndex]));
-              };
-            }
-          }
-          if (!item.disabled && !item.children) { // no children set id
-            itemId = `${menuId}-${itemIndex}`;
-            itemIndex++;
-          }
-          return (
-            <li
-              class={{
-                'el-cascader-menu__item': true,
-                'el-cascader-menu__item--extensible': item.children,
-                'is-active': item.value === activeValue[menuIndex],
-                'is-disabled': item.disabled
-              }}
-              ref={item.value === activeValue[menuIndex] ? 'activeItem' : null}
-              {...events}
-              tabindex= { item.disabled ? null : -1 }
-              role="menuitem"
-              aria-haspopup={ !!item.children }
-              aria-expanded={ item.value === activeValue[menuIndex] }
-              id = { itemId }
-              aria-owns = { !item.children ? null : ownsId }
-            >
-              {item.label}
-            </li>
-          );
-        });
-        let menuStyle = {};
-        if (isFlat) {
-          menuStyle.minWidth = this.inputWidth + 'px';
-        }
-
-        const isHoveredMenu = expandTrigger === 'hover' && activeValue.length - 1 === menuIndex;
-        const hoverMenuEvent = {
-          on: {
-          }
-        };
-
-        if (isHoveredMenu) {
-          hoverMenuEvent.on.mousemove = hoverMenuHandler;
-          menuStyle.position = 'relative';
-        }
-
-        return (
-          <ul
-            class={{
-              'el-cascader-menu': true,
-              'el-cascader-menu--flexible': isFlat
-            }}
-            {...hoverMenuEvent}
-            style={menuStyle}
-            refInFor
-            ref="menus"
-            role="menu"
-            id = { menuId }
-          >
-            {items}
-            {
-              isHoveredMenu
-                ? (<svg
-                  ref="hoverZone"
-                  style={{
-                    position: 'absolute',
-                    top: 0,
-                    height: '100%',
-                    width: '100%',
-                    left: 0,
-                    pointerEvents: 'none'
-                  }}
-                ></svg>) : null
-            }
-          </ul>
-        );
-      });
-
-      if (expandTrigger === 'hover') {
-        this.$nextTick(() => {
-          const activeItem = this.$refs.activeItem;
-
-          if (activeItem) {
-            const activeMenu = activeItem.parentElement;
-            const hoverZone = this.$refs.hoverZone;
-
-            hoverMenuRefs = {
-              activeMenu,
-              activeItem,
-              hoverZone
-            };
-          } else {
-            hoverMenuRefs = {};
-          }
-        });
-      }
-
-      return (
-        <transition name="el-zoom-in-top" on-before-enter={this.handleMenuEnter} on-after-leave={this.handleMenuLeave}>
-          <div
-            v-show={visible}
-            class={[
-              'el-cascader-menus el-popper',
-              popperClass
-            ]}
-            ref="wrapper"
-          >
-            <div x-arrow class="popper__arrow"></div>
-            {menus}
-          </div>
-        </transition>
-      );
-    }
-  };
-</script>
diff --git a/packages/checkbox-img-button/index.js b/packages/checkbox-img-button/index.js
new file mode 100644
index 00000000000..337133b8c12
--- /dev/null
+++ b/packages/checkbox-img-button/index.js
@@ -0,0 +1,8 @@
+import CheckboxImgButton from './src/main';
+
+/* istanbul ignore next */
+CheckboxImgButton.install = function(Vue) {
+  Vue.component(CheckboxImgButton.name, CheckboxImgButton);
+};
+
+export default CheckboxImgButton;
diff --git a/packages/checkbox-img-button/src/main.vue b/packages/checkbox-img-button/src/main.vue
new file mode 100644
index 00000000000..74efa5547c7
--- /dev/null
+++ b/packages/checkbox-img-button/src/main.vue
@@ -0,0 +1,241 @@
+<template>
+  <label
+    class="el-checkbox-img-button"
+    :class="[
+      border && checkboxSize ? 'el-checkbox-img-button--' + checkboxSize : '',
+      { 'is-disabled': isDisabled },
+      { 'is-bordered': border || imgUrl },
+      { 'is-checked': isChecked },
+      {'is-vertical': vertical },
+      {'is-horizontal': !vertical },
+      {'is-img': imgUrl },
+    ]"
+    :id="id"
+   >
+    <span class="el-checkbox-img-button__input"
+      :class="{
+        'is-disabled': isDisabled,
+        'is-checked': isChecked,
+        'is-indeterminate': indeterminate,
+        'is-focus': focus
+      }"
+      :tabindex="indeterminate ? 0 : false"
+      :role="indeterminate ? 'checkbox' : false"
+      :aria-checked="indeterminate ? 'mixed' : false"
+    >
+      <span class="el-checkbox-img-button__inner"></span>
+      <input
+        v-if="trueLabel || falseLabel"
+        class="el-checkbox-img-button__original"
+        type="checkbox"
+        :aria-hidden="indeterminate ? 'true' : 'false'"
+        :name="name"
+        :disabled="isDisabled"
+        :true-value="trueLabel"
+        :false-value="falseLabel"
+        v-model="model"
+        @change="handleChange"
+        @focus="focus = true"
+        @blur="focus = false">
+      <input
+        v-else
+        class="el-checkbox-img-button__original"
+        type="checkbox"
+        :aria-hidden="indeterminate ? 'true' : 'false'"
+        :disabled="isDisabled"
+        :value="label"
+        :name="name"
+        v-model="model"
+        @change="handleChange"
+        @focus="focus = true"
+        @blur="focus = false">
+    </span>
+    <span class="el-checkbox-img-button__label"  v-if="($slots.default || label) && !imgUrl">
+      <slot></slot>
+      <template v-if="!$slots.default">{{label}}</template>
+    </span>
+    <template v-if="imgUrl">
+      <img class="el-checkbox-img-button__img" :src="imgUrl" alt="加载失败" >
+      <span class="el-checkbox-img-button__label">
+        <span class="el-checkbox-img-button__word">
+          <span class="el-checkbox-img-button__text" :title="imgTitle">{{imgTitle}}</span>
+          <span class="el-checkbox-img-button__description" v-if="!vertical" :title="imgDesc">{{imgDesc}}</span>
+        </span>
+      </span>
+    </template>
+  </label>
+</template>
+<script>
+  import Emitter from 'element-ui/src/mixins/emitter';
+
+  export default {
+    name: 'ElCheckboxImgButton',
+
+    mixins: [Emitter],
+
+    inject: {
+      elForm: {
+        default: ''
+      },
+      elFormItem: {
+        default: ''
+      }
+    },
+
+    componentName: 'ElCheckboxImgButton',
+
+    data() {
+      return {
+        selfModel: false,
+        focus: false,
+        isLimitExceeded: false
+      };
+    },
+
+    computed: {
+      model: {
+        get() {
+          return this.isGroup
+            ? this.store : this.value !== undefined
+              ? this.value : this.selfModel;
+        },
+
+        set(val) {
+          if (this.isGroup) {
+            this.isLimitExceeded = false;
+            (this._checkboxGroup.min !== undefined &&
+              val.length < this._checkboxGroup.min &&
+              (this.isLimitExceeded = true));
+
+            (this._checkboxGroup.max !== undefined &&
+              val.length > this._checkboxGroup.max &&
+              (this.isLimitExceeded = true));
+
+            this.isLimitExceeded === false &&
+            this.dispatch('ElCheckboxGroup', 'input', [val]);
+          } else {
+            this.$emit('input', val);
+            this.selfModel = val;
+          }
+        }
+      },
+
+      isChecked() {
+        if ({}.toString.call(this.model) === '[object Boolean]') {
+          return this.model;
+        } else if (Array.isArray(this.model)) {
+          return this.model.indexOf(this.label) > -1;
+        } else if (this.model !== null && this.model !== undefined) {
+          return this.model === this.trueLabel;
+        }
+      },
+
+      isGroup() {
+        let parent = this.$parent;
+        while (parent) {
+          if (parent.$options.componentName !== 'ElCheckboxGroup') {
+            parent = parent.$parent;
+          } else {
+            this._checkboxGroup = parent;
+            return true;
+          }
+        }
+        return false;
+      },
+
+      store() {
+        return this._checkboxGroup ? this._checkboxGroup.value : this.value;
+      },
+
+      /* used to make the isDisabled judgment under max/min props */
+      isLimitDisabled() {
+        const { max, min } = this._checkboxGroup;
+        return !!(max || min) &&
+          (this.model.length >= max && !this.isChecked) ||
+          (this.model.length <= min && this.isChecked);
+      },
+
+      isDisabled() {
+        return this.isGroup
+          ? this._checkboxGroup.disabled || this.disabled || (this.elForm || {}).disabled || this.isLimitDisabled
+          : this.disabled || (this.elForm || {}).disabled;
+      },
+
+      _elFormItemSize() {
+        return (this.elFormItem || {}).elFormItemSize;
+      },
+
+      checkboxSize() {
+        const temCheckboxSize = this.size || this._elFormItemSize || (this.$ELEMENT || {}).size;
+        return this.isGroup
+          ? this._checkboxGroup.checkboxGroupSize || temCheckboxSize
+          : temCheckboxSize;
+      }
+    },
+
+    props: {
+      value: {},
+      label: {},
+      indeterminate: Boolean,
+      disabled: Boolean,
+      checked: Boolean,
+      name: String,
+      trueLabel: [String, Number],
+      falseLabel: [String, Number],
+      id: String, /* 当indeterminate为真时，为controls提供相关连的checkbox的id，表明元素间的控制关系*/
+      controls: String, /* 当indeterminate为真时，为controls提供相关连的checkbox的id，表明元素间的控制关系*/
+      border: Boolean,
+      size: String,
+      imgUrl: String,
+      imgTitle: String,
+      imgDesc: String,
+      vertical: {
+        type: Boolean,
+        default: false
+      }
+    },
+
+    methods: {
+      addToStore() {
+        if (
+          Array.isArray(this.model) &&
+          this.model.indexOf(this.label) === -1
+        ) {
+          this.model.push(this.label);
+        } else {
+          this.model = this.trueLabel || true;
+        }
+      },
+      handleChange(ev) {
+        if (this.isLimitExceeded) return;
+        let value;
+        if (ev.target.checked) {
+          value = this.trueLabel === undefined ? true : this.trueLabel;
+        } else {
+          value = this.falseLabel === undefined ? false : this.falseLabel;
+        }
+        this.$emit('change', value, ev);
+        this.$nextTick(() => {
+          if (this.isGroup) {
+            this.dispatch('ElCheckboxGroup', 'change', [this._checkboxGroup.value]);
+          }
+        });
+      }
+    },
+
+    created() {
+      this.checked && this.addToStore();
+    },
+    mounted() { // 为indeterminate元素 添加aria-controls 属性
+      if (this.indeterminate) {
+        this.$el.setAttribute('aria-controls', this.controls);
+      }
+    },
+
+    watch: {
+      value(value) {
+        this.dispatch('ElFormItem', 'el.form.change', value);
+      }
+    }
+  };
+</script>
diff --git a/packages/checkbox/src/checkbox-button.vue b/packages/checkbox/src/checkbox-button.vue
index 61fc1d617d0..446a071f291 100644
--- a/packages/checkbox/src/checkbox-button.vue
+++ b/packages/checkbox/src/checkbox-button.vue
@@ -35,7 +35,7 @@
       @focus="focus = true"
       @blur="focus = false">
 
-    <span class="el-checkbox-button__inner" 
+    <span class="el-checkbox-button__inner"
       v-if="$slots.default || label"
       :style="isChecked ? activeStyle : null">
       <slot>{{label}}</slot>
@@ -150,9 +150,17 @@
         return this._checkboxGroup.checkboxGroupSize || this._elFormItemSize || (this.$ELEMENT || {}).size;
       },
 
+      /* used to make the isDisabled judgment under max/min props */
+      isLimitDisabled() {
+        const { max, min } = this._checkboxGroup;
+        return !!(max || min) &&
+          (this.model.length >= max && !this.isChecked) ||
+          (this.model.length <= min && this.isChecked);
+      },
+
       isDisabled() {
         return this._checkboxGroup
-          ? this._checkboxGroup.disabled || this.disabled || (this.elForm || {}).disabled
+          ? this._checkboxGroup.disabled || this.disabled || (this.elForm || {}).disabled || this.isLimitDisabled
           : this.disabled || (this.elForm || {}).disabled;
       }
     },
diff --git a/packages/checkbox/src/checkbox.vue b/packages/checkbox/src/checkbox.vue
index f30f4b2d66c..00df69e99b1 100644
--- a/packages/checkbox/src/checkbox.vue
+++ b/packages/checkbox/src/checkbox.vue
@@ -7,9 +7,6 @@
       { 'is-bordered': border },
       { 'is-checked': isChecked }
     ]"
-    role="checkbox"
-    :aria-checked="indeterminate ? 'mixed': isChecked"
-    :aria-disabled="isDisabled"
     :id="id"
   >
     <span class="el-checkbox__input"
@@ -19,14 +16,16 @@
         'is-indeterminate': indeterminate,
         'is-focus': focus
       }"
-       aria-checked="mixed"
+      :tabindex="indeterminate ? 0 : false"
+      :role="indeterminate ? 'checkbox' : false"
+      :aria-checked="indeterminate ? 'mixed' : false"
     >
       <span class="el-checkbox__inner"></span>
       <input
         v-if="trueLabel || falseLabel"
         class="el-checkbox__original"
         type="checkbox"
-        aria-hidden="true"
+        :aria-hidden="indeterminate ? 'true' : 'false'"
         :name="name"
         :disabled="isDisabled"
         :true-value="trueLabel"
@@ -39,7 +38,7 @@
         v-else
         class="el-checkbox__original"
         type="checkbox"
-        aria-hidden="true"
+        :aria-hidden="indeterminate ? 'true' : 'false'"
         :disabled="isDisabled"
         :value="label"
         :name="name"
@@ -136,9 +135,17 @@
         return this._checkboxGroup ? this._checkboxGroup.value : this.value;
       },
 
+      /* used to make the isDisabled judgment under max/min props */
+      isLimitDisabled() {
+        const { max, min } = this._checkboxGroup;
+        return !!(max || min) &&
+          (this.model.length >= max && !this.isChecked) ||
+          (this.model.length <= min && this.isChecked);
+      },
+
       isDisabled() {
         return this.isGroup
-          ? this._checkboxGroup.disabled || this.disabled || (this.elForm || {}).disabled
+          ? this._checkboxGroup.disabled || this.disabled || (this.elForm || {}).disabled || this.isLimitDisabled
           : this.disabled || (this.elForm || {}).disabled;
       },
 
diff --git a/packages/collapse/src/collapse-item.vue b/packages/collapse/src/collapse-item.vue
index 29d59312ab5..2a25810267c 100644
--- a/packages/collapse/src/collapse-item.vue
+++ b/packages/collapse/src/collapse-item.vue
@@ -1,5 +1,6 @@
 <template>
-  <div class="el-collapse-item" :class="{'is-active': isActive}">
+  <div class="el-collapse-item"
+    :class="{'is-active': isActive, 'is-disabled': disabled }">
     <div
       role="tab"
       :aria-expanded="isActive"
@@ -11,7 +12,7 @@
         @click="handleHeaderClick"
         role="button"
         :id="`el-collapse-head-${id}`"
-        tabindex="0"
+        :tabindex="disabled ? undefined : 0"
         @keyup.space.enter.stop="handleEnterClick"
         :class="{
           'focusing': focusing,
@@ -65,7 +66,8 @@
         },
         contentHeight: 0,
         focusing: false,
-        isClick: false
+        isClick: false,
+        id: generateId()
       };
     },
 
@@ -78,15 +80,13 @@
         default() {
           return this._uid;
         }
-      }
+      },
+      disabled: Boolean
     },
 
     computed: {
       isActive() {
         return this.collapse.activeNames.indexOf(this.name) > -1;
-      },
-      id() {
-        return generateId();
       }
     },
 
@@ -101,6 +101,7 @@
         }, 50);
       },
       handleHeaderClick() {
+        if (this.disabled) return;
         this.dispatch('ElCollapse', 'item-click', this);
         this.focusing = false;
         this.isClick = true;
diff --git a/packages/color-picker/src/color.js b/packages/color-picker/src/color.js
index 8dee3c84df8..b7242a43a9b 100644
--- a/packages/color-picker/src/color.js
+++ b/packages/color-picker/src/color.js
@@ -249,6 +249,7 @@ export default class Color {
       }
     } else if (value.indexOf('#') !== -1) {
       const hex = value.replace('#', '').trim();
+      if (!/^(?:[0-9a-fA-F]{3}){1,2}$/.test(hex)) return;
       let r, g, b;
 
       if (hex.length === 3) {
diff --git a/packages/data-mapper/index.js b/packages/data-mapper/index.js
new file mode 100644
index 00000000000..7ca0f08de97
--- /dev/null
+++ b/packages/data-mapper/index.js
@@ -0,0 +1,8 @@
+import DataMapper from './src/main';
+
+/* istanbul ignore next */
+DataMapper.install = function(Vue) {
+  Vue.component(DataMapper.name, DataMapper);
+};
+
+export default DataMapper;
diff --git a/packages/data-mapper/src/main.vue b/packages/data-mapper/src/main.vue
new file mode 100644
index 00000000000..714a50c2365
--- /dev/null
+++ b/packages/data-mapper/src/main.vue
@@ -0,0 +1,129 @@
+<script>
+import Row from 'element-ui/packages/row';
+import Col from 'element-ui/packages/col';
+import TextEllipsis from './text-ellipsis';
+
+export default {
+  name: 'ElDataMapper',
+  components: {
+    'el-row': Row,
+    'el-col': Col,
+    TextEllipsis
+  },
+  props: {
+    // 数据
+    data: {
+      type: Object,
+      default: () => {}
+    },
+    // 设置列
+    // [{
+    //   prop: 'prop',
+    //   label: 'label'
+    // }]
+    columns: {
+      type: Array,
+      default: () => []
+    },
+    // 占位符
+    placeholder: {
+      type: String,
+      default: ''
+    },
+    contentRows: {
+      type: Number,
+      default: 1
+    },
+    // 子元素的排列方向
+    inline: {
+      type: Boolean,
+      default: true
+    },
+    labelWidth: {
+      type: [String, Number],
+      default: ''
+    },
+    labelPosition: {
+      type: String,
+      default: 'right'
+    }
+  },
+  render(h) {
+    const contentRows = this.renderRow(h, this.columns);
+    return h(
+      'div',
+      {
+        class: 'el-data-mapper'
+      },
+      [contentRows]
+    );
+  },
+  methods: {
+    // 渲染contentRows
+    renderRow(h, columns) {
+      const cols = this.renderCol(h, columns);
+      return h('el-row', cols);
+    },
+    // 渲染列
+    renderCol(h, columns = []) {
+      return columns.map((col, index) => {
+        // 处理object path
+        const isPath = col.prop.indexOf('.') >= 0;
+        let propData = isPath
+          ? col.prop.split('.').reduce((pre, next) => pre[next] || {}, this.data)
+          : this.data[col.prop];
+
+        // 处理内容
+        typeof propData === 'object' && (propData = this.placeholder);
+        const VALUE = col.formatter
+          ? col.formatter(this.data, col, index)
+          : propData || this.placeholder;
+
+        const title = h(
+          'div',
+          {
+            class: ['el-data-mapper-col-title', `el-data-mapper-col-title-${this.labelPosition}`],
+            style: this.labelWidth !== undefined ? {
+              width: (/^[0-9]$/).test(this.labelWidth) ? this.labelWidth + 'px' : this.labelWidth
+            } : {}
+          },
+          [col.label && `${col.label}：`]
+        );
+        return h(
+          'el-col',
+          {
+            class: {
+              'el-data-mapper-col': this.inline,
+              'el-data-mapper-col-vertical': !this.inline,
+              'el-data-mapper-col-top': this.labelPosition === 'top'
+            },
+            props: this.inline ? {
+              xs: 24,
+              sm: 12,
+              md: 12,
+              lg: 8,
+              xl: 8
+            } : {}
+          },
+          [title, this.renderContent(h, VALUE)]
+        );
+      });
+    },
+    renderContent(h, content) {
+      const textEllipsis = h('text-ellipsis', {
+        props: {
+          content,
+          contentRows: this.contentRows
+        }
+      });
+      return h(
+        'div',
+        {
+          class: 'el-data-mapper-col-content'
+        },
+        [textEllipsis]
+      );
+    }
+  }
+};
+</script>
diff --git a/packages/data-mapper/src/text-ellipsis.vue b/packages/data-mapper/src/text-ellipsis.vue
new file mode 100644
index 00000000000..97d35f7e93d
--- /dev/null
+++ b/packages/data-mapper/src/text-ellipsis.vue
@@ -0,0 +1,76 @@
+<script>
+export default {
+  name: 'text-ellipsis',
+  props: {
+    content: {
+      type: [String, Number, Object],
+      default: ''
+    },
+    contentRows: {
+      type: Number,
+      default: 1
+    }
+  },
+  data() {
+    return {
+      height: 'auto',
+      contentHeight: 'auto',
+      tooltipContent: ''
+    };
+  },
+  computed: {
+    show() {
+      return window.parseInt(this.height) < this.contentHeight;
+    }
+  },
+  render(h) {
+    return h(
+      'div',
+      {
+        class: 'text-ellipsis-container',
+        style: {
+          'max-height': this.height,
+          '-webkit-line-clamp': this.contentRows
+        }
+      },
+      [
+        h(
+          'el-tooltip',
+          {
+            props: {
+              placement: 'top',
+              content: `${this.tooltipContent}`,
+              disabled: !this.show
+            }
+          },
+          [h('div', [h('span', {class: 'mapper-content'}, [this.content])])]
+        )
+      ]
+    );
+  },
+  mounted() {
+    this.computedEllipsis();
+    window.addEventListener('resize', this.computedEllipsis);
+  },
+  watch: {
+    content() {
+      this.computedEllipsis();
+    }
+  },
+  methods: {
+    computedEllipsis() {
+      this.$nextTick(() => {
+        this.tooltipContent = typeof this.content === 'object' ? this.content.elm.innerText : this.content;
+        const el = this.$el;
+        const children = el.children[0].children[0];
+        this.height = `${window.parseInt(window.getComputedStyle(el, null).lineHeight) *
+          this.contentRows}px`;
+        this.contentHeight = children.offsetHeight;
+      });
+    }
+  },
+  beforeDestroy() {
+    window.removeEventListener('resize', this.computedEllipsis);
+  }
+};
+</script>
diff --git a/packages/date-picker/src/basic/date-table.vue b/packages/date-picker/src/basic/date-table.vue
index e7ce6d6d4f3..e77ab07f9b4 100644
--- a/packages/date-picker/src/basic/date-table.vue
+++ b/packages/date-picker/src/basic/date-table.vue
@@ -32,7 +32,7 @@
 </template>
 
 <script>
-  import { getFirstDayOfMonth, getDayCountOfMonth, getWeekNumber, getStartDateOfMonth, nextDate, isDate, clearTime as _clearTime} from '../util';
+  import { getFirstDayOfMonth, getDayCountOfMonth, getWeekNumber, getStartDateOfMonth, prevDate, nextDate, isDate, clearTime as _clearTime} from 'element-ui/src/utils/date-util';
   import Locale from 'element-ui/src/mixins/locale';
   import { arrayFindIndex, arrayFind, coerceTruthyValueToArray } from 'element-ui/src/utils/util';
 
@@ -86,6 +86,8 @@
       },
 
       disabledDate: {},
+  
+      cellClassName: {},
 
       minDate: {},
 
@@ -137,10 +139,10 @@
         const offset = this.offsetDay;
         const rows = this.tableRows;
         let count = 1;
-        let firstDayPosition;
 
         const startDate = this.startDate;
         const disabledDate = this.disabledDate;
+        const cellClassName = this.cellClassName;
         const selectedDate = this.selectionMode === 'dates' ? coerceTruthyValueToArray(this.value) : [];
         const now = getDateTimestamp(new Date());
 
@@ -173,21 +175,17 @@
             }
 
             if (i >= 0 && i <= 1) {
-              if (j + i * 7 >= (day + offset)) {
+              const numberOfDaysFromPreviousMonth = day + offset < 0 ? 7 + day + offset : day + offset;
+
+              if (j + i * 7 >= numberOfDaysFromPreviousMonth) {
                 cell.text = count++;
-                if (count === 2) {
-                  firstDayPosition = i * 7 + j;
-                }
               } else {
-                cell.text = dateCountOfLastMonth - (day + offset - j % 7) + 1 + i * 7;
+                cell.text = dateCountOfLastMonth - (numberOfDaysFromPreviousMonth - j % 7) + 1 + i * 7;
                 cell.type = 'prev-month';
               }
             } else {
               if (count <= dateCountOfMonth) {
                 cell.text = count++;
-                if (count === 2) {
-                  firstDayPosition = i * 7 + j;
-                }
               } else {
                 cell.text = count++ - dateCountOfMonth;
                 cell.type = 'next-month';
@@ -197,7 +195,7 @@
             let cellDate = new Date(time);
             cell.disabled = typeof disabledDate === 'function' && disabledDate(cellDate);
             cell.selected = arrayFind(selectedDate, date => date.getTime() === cellDate.getTime());
-
+            cell.customClass = typeof cellClassName === 'function' && cellClassName(cellDate);
             this.$set(row, this.showWeekNumber ? j + 1 : j, cell);
           }
 
@@ -213,8 +211,6 @@
           }
         }
 
-        rows.firstDayPosition = firstDayPosition;
-
         return rows;
       }
     },
@@ -295,6 +291,10 @@
           classes.push('selected');
         }
 
+        if (cell.customClass) {
+          classes.push(cell.customClass);
+        }
+
         return classes.join(' ');
       },
 
@@ -321,8 +321,12 @@
 
         newDate.setDate(parseInt(cell.text, 10));
 
-        const valueYear = isDate(this.value) ? this.value.getFullYear() : null;
-        return year === valueYear && getWeekNumber(newDate) === getWeekNumber(this.value);
+        if (isDate(this.value)) {
+          const dayOffset = (this.value.getDay() - this.firstDayOfWeek + 7) % 7 - 1;
+          const weekDate = prevDate(this.value, dayOffset);
+          return weekDate.getTime() === newDate.getTime();
+        }
+        return false;
       },
 
       markRange(minDate, maxDate) {
diff --git a/packages/date-picker/src/basic/month-table.vue b/packages/date-picker/src/basic/month-table.vue
index a343cb4be4b..c25e6a07bd2 100644
--- a/packages/date-picker/src/basic/month-table.vue
+++ b/packages/date-picker/src/basic/month-table.vue
@@ -1,46 +1,11 @@
 <template>
-  <table @click="handleMonthTableClick" class="el-month-table">
+  <table @click="handleMonthTableClick" @mousemove="handleMouseMove" class="el-month-table">
     <tbody>
-    <tr>
-      <td :class="getCellStyle(0)">
-        <a class="cell">{{ t('el.datepicker.months.jan') }}</a>
-      </td>
-      <td :class="getCellStyle(1)">
-        <a class="cell">{{ t('el.datepicker.months.feb') }}</a>
-      </td>
-      <td :class="getCellStyle(2)">
-        <a class="cell">{{ t('el.datepicker.months.mar') }}</a>
-      </td>
-      <td :class="getCellStyle(3)">
-        <a class="cell">{{ t('el.datepicker.months.apr') }}</a>
-      </td>
-    </tr>
-    <tr>
-      <td :class="getCellStyle(4)">
-        <a class="cell">{{ t('el.datepicker.months.may') }}</a>
-      </td>
-      <td :class="getCellStyle(5)">
-        <a class="cell">{{ t('el.datepicker.months.jun') }}</a>
-      </td>
-      <td :class="getCellStyle(6)">
-        <a class="cell">{{ t('el.datepicker.months.jul') }}</a>
-      </td>
-      <td :class="getCellStyle(7)">
-        <a class="cell">{{ t('el.datepicker.months.aug') }}</a>
-      </td>
-    </tr>
-    <tr>
-      <td :class="getCellStyle(8)">
-        <a class="cell">{{ t('el.datepicker.months.sep') }}</a>
-      </td>
-      <td :class="getCellStyle(9)">
-        <a class="cell">{{ t('el.datepicker.months.oct') }}</a>
-      </td>
-      <td :class="getCellStyle(10)">
-        <a class="cell">{{ t('el.datepicker.months.nov') }}</a>
-      </td>
-      <td :class="getCellStyle(11)">
-        <a class="cell">{{ t('el.datepicker.months.dec') }}</a>
+    <tr v-for="(row, key) in rows" :key="key">
+      <td :class="getCellStyle(cell)" v-for="(cell, key) in row" :key="key">
+        <div>
+          <a class="cell">{{ t('el.datepicker.months.' + months[cell.text]) }}</a>
+        </div>
       </td>
     </tr>
     </tbody>
@@ -49,9 +14,9 @@
 
 <script type="text/babel">
   import Locale from 'element-ui/src/mixins/locale';
-  import { isDate, range, getDayCountOfMonth, nextDate } from '../util';
+  import { isDate, range, getDayCountOfMonth, nextDate } from 'element-ui/src/utils/date-util';
   import { hasClass } from 'element-ui/src/utils/dom';
-  import { arrayFindIndex, coerceTruthyValueToArray } from 'element-ui/src/utils/util';
+  import { arrayFindIndex, coerceTruthyValueToArray, arrayFind } from 'element-ui/src/utils/util';
 
   const datesInMonth = (year, month) => {
     const numOfDays = getDayCountOfMonth(year, month);
@@ -59,46 +24,230 @@
     return range(numOfDays).map(n => nextDate(firstDay, n));
   };
 
+  const clearDate = (date) => {
+    return new Date(date.getFullYear(), date.getMonth());
+  };
+
+  const getMonthTimestamp = function(time) {
+    if (typeof time === 'number' || typeof time === 'string') {
+      return clearDate(new Date(time)).getTime();
+    } else if (time instanceof Date) {
+      return clearDate(time).getTime();
+    } else {
+      return NaN;
+    }
+  };
   export default {
     props: {
       disabledDate: {},
       value: {},
+      selectionMode: {
+        default: 'month'
+      },
+      minDate: {},
+
+      maxDate: {},
       defaultValue: {
         validator(val) {
           // null or valid Date Object
-          return val === null || (val instanceof Date && isDate(val));
+          return val === null || isDate(val) || (Array.isArray(val) && val.every(isDate));
         }
       },
-      date: {}
+      date: {},
+      rangeState: {
+        default() {
+          return {
+            endDate: null,
+            selecting: false
+          };
+        }
+      }
     },
+
     mixins: [Locale],
+
+    watch: {
+      'rangeState.endDate'(newVal) {
+        this.markRange(this.minDate, newVal);
+      },
+
+      minDate(newVal, oldVal) {
+        if (getMonthTimestamp(newVal) !== getMonthTimestamp(oldVal)) {
+          this.markRange(this.minDate, this.maxDate);
+        }
+      },
+
+      maxDate(newVal, oldVal) {
+        if (getMonthTimestamp(newVal) !== getMonthTimestamp(oldVal)) {
+          this.markRange(this.minDate, this.maxDate);
+        }
+      }
+    },
+
+    data() {
+      return {
+        months: ['jan', 'feb', 'mar', 'apr', 'may', 'jun', 'jul', 'aug', 'sep', 'oct', 'nov', 'dec'],
+        tableRows: [ [], [], [] ],
+        lastRow: null,
+        lastColumn: null
+      };
+    },
+
     methods: {
-      getCellStyle(month) {
+      cellMatchesDate(cell, date) {
+        const value = new Date(date);
+        return this.date.getFullYear() === value.getFullYear() && Number(cell.text) === value.getMonth();
+      },
+      getCellStyle(cell) {
         const style = {};
         const year = this.date.getFullYear();
         const today = new Date();
-
+        const month = cell.text;
+        const defaultValue = this.defaultValue ? Array.isArray(this.defaultValue) ? this.defaultValue : [this.defaultValue] : [];
         style.disabled = typeof this.disabledDate === 'function'
           ? datesInMonth(year, month).every(this.disabledDate)
           : false;
         style.current = arrayFindIndex(coerceTruthyValueToArray(this.value), date => date.getFullYear() === year && date.getMonth() === month) >= 0;
         style.today = today.getFullYear() === year && today.getMonth() === month;
-        style.default = this.defaultValue &&
-          this.defaultValue.getFullYear() === year &&
-          this.defaultValue.getMonth() === month;
+        style.default = defaultValue.some(date => this.cellMatchesDate(cell, date));
+
+        if (cell.inRange) {
+          style['in-range'] = true;
 
+          if (cell.start) {
+            style['start-date'] = true;
+          }
+
+          if (cell.end) {
+            style['end-date'] = true;
+          }
+        }
         return style;
       },
+      getMonthOfCell(month) {
+        const year = this.date.getFullYear();
+        return new Date(year, month, 1);
+      },
+      markRange(minDate, maxDate) {
+        minDate = getMonthTimestamp(minDate);
+        maxDate = getMonthTimestamp(maxDate) || minDate;
+        [minDate, maxDate] = [Math.min(minDate, maxDate), Math.max(minDate, maxDate)];
+        const rows = this.rows;
+        for (let i = 0, k = rows.length; i < k; i++) {
+          const row = rows[i];
+          for (let j = 0, l = row.length; j < l; j++) {
+
+            const cell = row[j];
+            const index = i * 4 + j;
+            const time = new Date(this.date.getFullYear(), index).getTime();
+
+            cell.inRange = minDate && time >= minDate && time <= maxDate;
+            cell.start = minDate && time === minDate;
+            cell.end = maxDate && time === maxDate;
+          }
+        }
+      },
+      handleMouseMove(event) {
+        if (!this.rangeState.selecting) return;
 
+        let target = event.target;
+        if (target.tagName === 'A') {
+          target = target.parentNode.parentNode;
+        }
+        if (target.tagName === 'DIV') {
+          target = target.parentNode;
+        }
+        if (target.tagName !== 'TD') return;
+
+        const row = target.parentNode.rowIndex;
+        const column = target.cellIndex;
+        // can not select disabled date
+        if (this.rows[row][column].disabled) return;
+
+        // only update rangeState when mouse moves to a new cell
+        // this avoids frequent Date object creation and improves performance
+        if (row !== this.lastRow || column !== this.lastColumn) {
+          this.lastRow = row;
+          this.lastColumn = column;
+          this.$emit('changerange', {
+            minDate: this.minDate,
+            maxDate: this.maxDate,
+            rangeState: {
+              selecting: true,
+              endDate: this.getMonthOfCell(row * 4 + column)
+            }
+          });
+        }
+      },
       handleMonthTableClick(event) {
-        const target = event.target;
-        if (target.tagName !== 'A') return;
-        if (hasClass(target.parentNode, 'disabled')) return;
-        const column = target.parentNode.cellIndex;
-        const row = target.parentNode.parentNode.rowIndex;
+        let target = event.target;
+        if (target.tagName === 'A') {
+          target = target.parentNode.parentNode;
+        }
+        if (target.tagName === 'DIV') {
+          target = target.parentNode;
+        }
+        if (target.tagName !== 'TD') return;
+        if (hasClass(target, 'disabled')) return;
+        const column = target.cellIndex;
+        const row = target.parentNode.rowIndex;
         const month = row * 4 + column;
+        const newDate = this.getMonthOfCell(month);
+        if (this.selectionMode === 'range') {
+          if (!this.rangeState.selecting) {
+            this.$emit('pick', {minDate: newDate, maxDate: null});
+            this.rangeState.selecting = true;
+          } else {
+            if (newDate >= this.minDate) {
+              this.$emit('pick', {minDate: this.minDate, maxDate: newDate});
+            } else {
+              this.$emit('pick', {minDate: newDate, maxDate: this.minDate});
+            }
+            this.rangeState.selecting = false;
+          }
+        } else {
+          this.$emit('pick', month);
+        }
+      }
+    },
+
+    computed: {
+      rows() {
+        // TODO: refactory rows / getCellClasses
+        const rows = this.tableRows;
+        const disabledDate = this.disabledDate;
+        const selectedDate = [];
+        const now = getMonthTimestamp(new Date());
+
+        for (let i = 0; i < 3; i++) {
+          const row = rows[i];
+          for (let j = 0; j < 4; j++) {
+            let cell = row[j];
+            if (!cell) {
+              cell = { row: i, column: j, type: 'normal', inRange: false, start: false, end: false };
+            }
+
+            cell.type = 'normal';
 
-        this.$emit('pick', month);
+            const index = i * 4 + j;
+            const time = new Date(this.date.getFullYear(), index).getTime();
+            cell.inRange = time >= getMonthTimestamp(this.minDate) && time <= getMonthTimestamp(this.maxDate);
+            cell.start = this.minDate && time === getMonthTimestamp(this.minDate);
+            cell.end = this.maxDate && time === getMonthTimestamp(this.maxDate);
+            const isToday = time === now;
+
+            if (isToday) {
+              cell.type = 'today';
+            }
+            cell.text = index;
+            let cellDate = new Date(time);
+            cell.disabled = typeof disabledDate === 'function' && disabledDate(cellDate);
+            cell.selected = arrayFind(selectedDate, date => date.getTime() === cellDate.getTime());
+
+            this.$set(row, j, cell);
+          }
+        }
+        return rows;
       }
     }
   };
diff --git a/packages/date-picker/src/basic/time-spinner.vue b/packages/date-picker/src/basic/time-spinner.vue
index ffacaaeea1e..aaf9cf3ad63 100644
--- a/packages/date-picker/src/basic/time-spinner.vue
+++ b/packages/date-picker/src/basic/time-spinner.vue
@@ -14,6 +14,7 @@
           @click="handleClick('hours', { value: hour, disabled: disabled })"
           v-for="(disabled, hour) in hoursList"
           class="el-time-spinner__item"
+          :key="hour"
           :class="{ 'active': hour === hours, 'disabled': disabled }">{{ ('0' + (amPmMode ? (hour % 12 || 12) : hour )).slice(-2) }}{{ amPm(hour) }}</li>
       </el-scrollbar>
       <el-scrollbar
@@ -28,6 +29,7 @@
         <li
           @click="handleClick('minutes', { value: key, disabled: false })"
           v-for="(enabled, key) in minutesList"
+          :key="key"
           class="el-time-spinner__item"
           :class="{ 'active': key === minutes, disabled: !enabled }">{{ ('0' + key).slice(-2) }}</li>
       </el-scrollbar>
@@ -99,7 +101,7 @@
 </template>
 
 <script type="text/babel">
-  import { getRangeHours, getRangeMinutes, modifyTime } from '../util';
+  import { getRangeHours, getRangeMinutes, modifyTime } from 'element-ui/src/utils/date-util';
   import ElScrollbar from 'element-ui/packages/scrollbar';
   import RepeatClick from 'element-ui/src/directives/repeat-click';
 
@@ -229,7 +231,7 @@
       },
 
       handleScroll(type) {
-        const value = Math.min(Math.floor((this.$refs[type].wrap.scrollTop - (this.scrollBarHeight(type) * 0.5 - 10) / this.typeItemHeight(type) + 3) / this.typeItemHeight(type)), (type === 'hours' ? 23 : 59));
+        const value = Math.min(Math.round((this.$refs[type].wrap.scrollTop - (this.scrollBarHeight(type) * 0.5 - 10) / this.typeItemHeight(type) + 3) / this.typeItemHeight(type)), (type === 'hours' ? 23 : 59));
         this.modifyDateField(type, value);
       },
 
@@ -281,6 +283,7 @@
 
         this.modifyDateField(label, now);
         this.adjustSpinner(label, now);
+        this.$nextTick(() => this.emitSelectRange(this.currentScrollbar));
       },
       amPm(hour) {
         let shouldShowAmPm = this.amPmMode.toLowerCase() === 'a';
diff --git a/packages/date-picker/src/basic/year-table.vue b/packages/date-picker/src/basic/year-table.vue
index 607aef6d229..02509adcb3c 100644
--- a/packages/date-picker/src/basic/year-table.vue
+++ b/packages/date-picker/src/basic/year-table.vue
@@ -45,7 +45,7 @@
 
 <script type="text/babel">
   import { hasClass } from 'element-ui/src/utils/dom';
-  import { isDate, range, nextDate, getDayCountOfYear } from '../util';
+  import { isDate, range, nextDate, getDayCountOfYear } from 'element-ui/src/utils/date-util';
   import { arrayFindIndex, coerceTruthyValueToArray } from 'element-ui/src/utils/util';
 
   const datesInYear = year => {
diff --git a/packages/date-picker/src/panel/date-range.vue b/packages/date-picker/src/panel/date-range.vue
index de3c8dd0dbb..bb608ff8d5c 100644
--- a/packages/date-picker/src/panel/date-range.vue
+++ b/packages/date-picker/src/panel/date-range.vue
@@ -28,18 +28,19 @@
                   :placeholder="t('el.datepicker.startDate')"
                   class="el-date-range-picker__editor"
                   :value="minVisibleDate"
-                  @input.native="handleDateInput($event, 'min')"
-                  @change.native="handleDateChange($event, 'min')" />
+                  @input="val => handleDateInput(val, 'min')"
+                  @change="val => handleDateChange(val, 'min')" />
               </span>
               <span class="el-date-range-picker__time-picker-wrap" v-clickoutside="handleMinTimeClose">
                 <el-input
                   size="small"
+                  class="el-date-range-picker__editor"
                   :disabled="rangeState.selecting"
                   :placeholder="t('el.datepicker.startTime')"
-                  class="el-date-range-picker__editor"
                   :value="minVisibleTime"
                   @focus="minTimePickerVisible = true"
-                  @change.native="handleTimeChange($event, 'min')" />
+                  @input="val => handleTimeInput(val, 'min')"
+                  @change="val => handleTimeChange(val, 'min')" />
                 <time-picker
                   ref="minTimePicker"
                   @pick="handleMinTimePick"
@@ -54,25 +55,25 @@
               <span class="el-date-range-picker__time-picker-wrap">
                 <el-input
                   size="small"
+                  class="el-date-range-picker__editor"
                   :disabled="rangeState.selecting"
                   :placeholder="t('el.datepicker.endDate')"
-                  class="el-date-range-picker__editor"
                   :value="maxVisibleDate"
                   :readonly="!minDate"
-                  @input.native="handleDateInput($event, 'max')"
-                  @change.native="handleDateChange($event, 'max')" />
+                  @input="val => handleDateInput(val, 'max')"
+                  @change="val => handleDateChange(val, 'max')" />
               </span>
               <span class="el-date-range-picker__time-picker-wrap" v-clickoutside="handleMaxTimeClose">
                 <el-input
                   size="small"
+                  class="el-date-range-picker__editor"
                   :disabled="rangeState.selecting"
-                  ref="maxInput"
                   :placeholder="t('el.datepicker.endTime')"
-                  class="el-date-range-picker__editor"
                   :value="maxVisibleTime"
-                  @focus="minDate && (maxTimePickerVisible = true)"
                   :readonly="!minDate"
-                  @change.native="handleTimeChange($event, 'max')" />
+                  @focus="minDate && (maxTimePickerVisible = true)"
+                  @input="val => handleTimeInput(val, 'max')"
+                  @change="val => handleTimeChange(val, 'max')" />
                 <time-picker
                   ref="maxTimePicker"
                   @pick="handleMaxTimePick"
@@ -117,6 +118,7 @@
               :max-date="maxDate"
               :range-state="rangeState"
               :disabled-date="disabledDate"
+              :cell-class-name="cellClassName"
               @changerange="handleChangeRange"
               :first-day-of-week="firstDayOfWeek"
               @pick="handleRangePick">
@@ -156,6 +158,7 @@
               :max-date="maxDate"
               :range-state="rangeState"
               :disabled-date="disabledDate"
+              :cell-class-name="cellClassName"
               @changerange="handleChangeRange"
               :first-day-of-week="firstDayOfWeek"
               @pick="handleRangePick">
@@ -196,9 +199,10 @@
     nextYear,
     prevMonth,
     nextMonth,
+    nextDate,
     extractDateFormat,
     extractTimeFormat
-  } from '../util';
+  } from 'element-ui/src/utils/date-util';
   import Clickoutside from 'element-ui/src/utils/clickoutside';
   import Locale from 'element-ui/src/mixins/locale';
   import TimePicker from './time';
@@ -206,17 +210,13 @@
   import ElInput from 'element-ui/packages/input';
   import ElButton from 'element-ui/packages/button';
 
-  const advanceDate = (date, amount) => {
-    return new Date(new Date(date).getTime() + amount);
-  };
-
   const calcDefaultValue = (defaultValue) => {
     if (Array.isArray(defaultValue)) {
       return [new Date(defaultValue[0]), new Date(defaultValue[1])];
     } else if (defaultValue) {
-      return [new Date(defaultValue), advanceDate(defaultValue, 24 * 60 * 60 * 1000)];
+      return [new Date(defaultValue), nextDate(new Date(defaultValue), 1)];
     } else {
-      return [new Date(), advanceDate(Date.now(), 24 * 60 * 60 * 1000)];
+      return [new Date(), nextDate(new Date(), 1)];
     }
   };
 
@@ -263,19 +263,27 @@
       },
 
       minVisibleDate() {
-        return this.minDate ? formatDate(this.minDate, this.dateFormat) : '';
+        if (this.dateUserInput.min !== null) return this.dateUserInput.min;
+        if (this.minDate) return formatDate(this.minDate, this.dateFormat);
+        return '';
       },
 
       maxVisibleDate() {
-        return (this.maxDate || this.minDate) ? formatDate(this.maxDate || this.minDate, this.dateFormat) : '';
+        if (this.dateUserInput.max !== null) return this.dateUserInput.max;
+        if (this.maxDate || this.minDate) return formatDate(this.maxDate || this.minDate, this.dateFormat);
+        return '';
       },
 
       minVisibleTime() {
-        return this.minDate ? formatDate(this.minDate, this.timeFormat) : '';
+        if (this.timeUserInput.min !== null) return this.timeUserInput.min;
+        if (this.minDate) return formatDate(this.minDate, this.timeFormat);
+        return '';
       },
 
       maxVisibleTime() {
-        return (this.maxDate || this.minDate) ? formatDate(this.maxDate || this.minDate, this.timeFormat) : '';
+        if (this.timeUserInput.max !== null) return this.timeUserInput.max;
+        if (this.maxDate || this.minDate) return formatDate(this.maxDate || this.minDate, this.timeFormat);
+        return '';
       },
 
       timeFormat() {
@@ -325,17 +333,33 @@
         shortcuts: '',
         visible: '',
         disabledDate: '',
+        cellClassName: '',
         firstDayOfWeek: 7,
         minTimePickerVisible: false,
         maxTimePickerVisible: false,
         format: '',
         arrowControl: false,
-        unlinkPanels: false
+        unlinkPanels: false,
+        dateUserInput: {
+          min: null,
+          max: null
+        },
+        timeUserInput: {
+          min: null,
+          max: null
+        }
       };
     },
 
     watch: {
+      visible(v) {
+        if (!v) {
+          this.rangeState.selecting = false;
+        }
+      },
       minDate(val) {
+        this.dateUserInput.min = null;
+        this.timeUserInput.min = null;
         this.$nextTick(() => {
           if (this.$refs.maxTimePicker && this.maxDate && this.maxDate < this.minDate) {
             const format = 'HH:mm:ss';
@@ -354,6 +378,8 @@
       },
 
       maxDate(val) {
+        this.dateUserInput.max = null;
+        this.timeUserInput.max = null;
         if (val && this.$refs.maxTimePicker) {
           this.$refs.maxTimePicker.date = val;
           this.$refs.maxTimePicker.value = val;
@@ -433,8 +459,8 @@
         this.rangeState = val.rangeState;
       },
 
-      handleDateInput(event, type) {
-        const value = event.target.value;
+      handleDateInput(value, type) {
+        this.dateUserInput[type] = value;
         if (value.length !== this.dateFormat.length) return;
         const parsedValue = parseDate(value, this.dateFormat);
 
@@ -444,19 +470,22 @@
             return;
           }
           if (type === 'min') {
-            this.minDate = new Date(parsedValue);
+            this.minDate = modifyDate(this.minDate || new Date(), parsedValue.getFullYear(), parsedValue.getMonth(), parsedValue.getDate());
             this.leftDate = new Date(parsedValue);
-            this.rightDate = nextMonth(this.leftDate);
+            if (!this.unlinkPanels) {
+              this.rightDate = nextMonth(this.leftDate);
+            }
           } else {
-            this.maxDate = new Date(parsedValue);
-            this.leftDate = prevMonth(parsedValue);
+            this.maxDate = modifyDate(this.maxDate || new Date(), parsedValue.getFullYear(), parsedValue.getMonth(), parsedValue.getDate());
             this.rightDate = new Date(parsedValue);
+            if (!this.unlinkPanels) {
+              this.leftDate = prevMonth(parsedValue);
+            }
           }
         }
       },
 
-      handleDateChange(event, type) {
-        const value = event.target.value;
+      handleDateChange(value, type) {
         const parsedValue = parseDate(value, this.dateFormat);
         if (parsedValue) {
           if (type === 'min') {
@@ -473,8 +502,23 @@
         }
       },
 
-      handleTimeChange(event, type) {
-        const value = event.target.value;
+      handleTimeInput(value, type) {
+        this.timeUserInput[type] = value;
+        if (value.length !== this.timeFormat.length) return;
+        const parsedValue = parseDate(value, this.timeFormat);
+
+        if (parsedValue) {
+          if (type === 'min') {
+            this.minDate = modifyTime(this.minDate, parsedValue.getHours(), parsedValue.getMinutes(), parsedValue.getSeconds());
+            this.$nextTick(_ => this.$refs.minTimePicker.adjustSpinners());
+          } else {
+            this.maxDate = modifyTime(this.maxDate, parsedValue.getHours(), parsedValue.getMinutes(), parsedValue.getSeconds());
+            this.$nextTick(_ => this.$refs.maxTimePicker.adjustSpinners());
+          }
+        }
+      },
+
+      handleTimeChange(value, type) {
         const parsedValue = parseDate(value, this.timeFormat);
         if (parsedValue) {
           if (type === 'min') {
@@ -497,6 +541,35 @@
 
       handleRangePick(val, close = true) {
         const defaultTime = this.defaultTime || [];
+
+        let save = false;
+        const firstPick = val.minDate && !val.maxDate;
+
+        if (this.minDate && this.maxDate && this.inputType) {
+          if (this.inputType === 'min') {
+            let newDate = '';
+
+            if (firstPick) {
+              newDate = val.minDate;
+            } else {
+              newDate = val.minDate <= this.minDate ? val.minDate : val.maxDate;
+            }
+
+            if (newDate < this.maxDate) {
+              val.minDate = newDate;
+              val.maxDate = this.maxDate;
+              save = true;
+            }
+          } else if (this.inputType === 'max') {
+            const newDate = firstPick ? val.minDate : val.maxDate;
+            if (newDate > this.minDate) {
+              val.minDate = this.minDate;
+              val.maxDate = newDate;
+              save = true;
+            }
+          }
+        }
+
         const minDate = modifyWithTimeString(val.minDate, defaultTime[0]);
         const maxDate = modifyWithTimeString(val.maxDate, defaultTime[1]);
 
@@ -506,12 +579,18 @@
         this.onPick && this.onPick(val);
         this.maxDate = maxDate;
         this.minDate = minDate;
-
         // workaround for https://github.com/ElemeFE/element/issues/7539, should remove this block when we don't have to care about Chromium 55 - 57
         setTimeout(() => {
           this.maxDate = maxDate;
           this.minDate = minDate;
         }, 10);
+
+        if (save) {
+          this.inputType = null;
+          close = false;
+          this.handleConfirm(true);
+        }
+  
         if (!close || this.showTime) return;
         this.handleConfirm();
       },
@@ -630,6 +709,7 @@
         // NOTE: this is a hack to reset {min, max}Date on picker open.
         // TODO: correct way of doing so is to refactor {min, max}Date to be dependent on value and internal selection state
         //       an alternative would be resetView whenever picker becomes visible, should also investigate date-panel's resetView
+        if (this.minDate && this.maxDate == null) this.rangeState.selecting = false;
         this.minDate = this.value && isDate(this.value[0]) ? new Date(this.value[0]) : null;
         this.maxDate = this.value && isDate(this.value[0]) ? new Date(this.value[1]) : null;
       }
diff --git a/packages/date-picker/src/panel/date.vue b/packages/date-picker/src/panel/date.vue
index 88afe7647c2..dc58c286a15 100644
--- a/packages/date-picker/src/panel/date.vue
+++ b/packages/date-picker/src/panel/date.vue
@@ -96,6 +96,7 @@
               :value="value"
               :default-value="defaultValue ? new Date(defaultValue) : null"
               :date="date"
+              :cell-class-name="cellClassName"
               :disabled-date="disabledDate">
             </date-table>
             <year-table
@@ -158,8 +159,9 @@
     nextMonth,
     changeYearMonthAndClampDate,
     extractDateFormat,
-    extractTimeFormat
-  } from '../util';
+    extractTimeFormat,
+    timeWithinRange
+  } from 'element-ui/src/utils/date-util';
   import Clickoutside from 'element-ui/src/utils/clickoutside';
   import Locale from 'element-ui/src/mixins/locale';
   import ElInput from 'element-ui/packages/input';
@@ -222,13 +224,16 @@
         const format = timeFormat => {this.$refs.timepicker.format = timeFormat;};
         const value = value => {this.$refs.timepicker.value = value;};
         const date = date => {this.$refs.timepicker.date = date;};
+        const selectableRange = selectableRange => {this.$refs.timepicker.selectableRange = selectableRange;};
 
         this.$watch('value', value);
         this.$watch('date', date);
+        this.$watch('selectableRange', selectableRange);
 
         format(this.timeFormat);
         value(this.value);
         date(this.date);
+        selectableRange(this.selectableRange);
       },
 
       handleClear() {
@@ -333,9 +338,14 @@
 
       handleDatePick(value) {
         if (this.selectionMode === 'day') {
-          this.date = this.value
+          let newDate = this.value
             ? modifyDate(this.value, value.getFullYear(), value.getMonth(), value.getDate())
             : modifyWithTimeString(value, this.defaultTime);
+          // change default time while out of selectableRange
+          if (!this.checkDateWithinRange(newDate)) {
+            newDate = modifyDate(this.selectableRange[0][0], value.getFullYear(), value.getMonth(), value.getDate());
+          }
+          this.date = newDate;
           this.emit(this.date, this.showTime);
         } else if (this.selectionMode === 'week') {
           this.emit(value.date);
@@ -359,7 +369,7 @@
       changeToNow() {
         // NOTE: not a permanent solution
         //       consider disable "now" button in the future
-        if (!this.disabledDate || !this.disabledDate(new Date())) {
+        if ((!this.disabledDate || !this.disabledDate(new Date())) && this.checkDateWithinRange(new Date())) {
           this.date = new Date();
           this.emit(this.date);
         }
@@ -446,7 +456,7 @@
 
       handleVisibleTimeChange(value) {
         const time = parseDate(value, this.timeFormat);
-        if (time) {
+        if (time && this.checkDateWithinRange(time)) {
           this.date = modifyDate(time, this.year, this.month, this.monthDate);
           this.userInputTime = null;
           this.$refs.timepicker.value = this.date;
@@ -473,13 +483,19 @@
           typeof this.disabledDate === 'function'
             ? !this.disabledDate(value)
             : true
-        );
+        ) && this.checkDateWithinRange(value);
       },
 
       getDefaultValue() {
         // if default-value is set, return it
         // otherwise, return now (the moment this method gets called)
         return this.defaultValue ? new Date(this.defaultValue) : new Date();
+      },
+
+      checkDateWithinRange(date) {
+        return this.selectableRange.length > 0
+          ? timeWithinRange(date, this.selectableRange, this.format || 'HH:mm:ss')
+          : true;
       }
     },
 
@@ -500,6 +516,8 @@
         visible: false,
         currentView: 'date',
         disabledDate: '',
+        cellClassName: '',
+        selectableRange: [],
         firstDayOfWeek: 7,
         showWeekNumber: false,
         timePickerVisible: false,
diff --git a/packages/date-picker/src/panel/month-range.vue b/packages/date-picker/src/panel/month-range.vue
new file mode 100644
index 00000000000..d491e31321d
--- /dev/null
+++ b/packages/date-picker/src/panel/month-range.vue
@@ -0,0 +1,289 @@
+<template>
+  <transition name="el-zoom-in-top" @after-leave="$emit('dodestroy')">
+    <div
+      v-show="visible"
+      class="el-picker-panel el-date-range-picker el-popper"
+      :class="[{
+        'has-sidebar': $slots.sidebar || shortcuts
+      }, popperClass]">
+      <div class="el-picker-panel__body-wrapper">
+        <slot name="sidebar" class="el-picker-panel__sidebar"></slot>
+        <div class="el-picker-panel__sidebar" v-if="shortcuts">
+          <button
+            type="button"
+            class="el-picker-panel__shortcut"
+            v-for="(shortcut, key) in shortcuts"
+            :key="key"
+            @click="handleShortcutClick(shortcut)">{{shortcut.text}}</button>
+        </div>
+        <div class="el-picker-panel__body">
+          <div class="el-picker-panel__content el-date-range-picker__content is-left">
+            <div class="el-date-range-picker__header">
+              <button
+                type="button"
+                @click="leftPrevYear"
+                class="el-picker-panel__icon-btn el-icon-d-arrow-left"></button>
+              <button
+                type="button"
+                v-if="unlinkPanels"
+                @click="leftNextYear"
+                :disabled="!enableYearArrow"
+                :class="{ 'is-disabled': !enableYearArrow }"
+                class="el-picker-panel__icon-btn el-icon-d-arrow-right"></button>
+              <div>{{ leftLabel }}</div>
+            </div>
+            <month-table
+              selection-mode="range"
+              :date="leftDate"
+              :default-value="defaultValue"
+              :min-date="minDate"
+              :max-date="maxDate"
+              :range-state="rangeState"
+              :disabled-date="disabledDate"
+              @changerange="handleChangeRange"
+              @pick="handleRangePick">
+            </month-table>
+          </div>
+          <div class="el-picker-panel__content el-date-range-picker__content is-right">
+            <div class="el-date-range-picker__header">
+              <button
+                type="button"
+                v-if="unlinkPanels"
+                @click="rightPrevYear"
+                :disabled="!enableYearArrow"
+                :class="{ 'is-disabled': !enableYearArrow }"
+                class="el-picker-panel__icon-btn el-icon-d-arrow-left"></button>
+              <button
+                type="button"
+                @click="rightNextYear"
+                class="el-picker-panel__icon-btn el-icon-d-arrow-right"></button>
+              <div>{{ rightLabel }}</div>
+            </div>
+            <month-table
+              selection-mode="range"
+              :date="rightDate"
+              :default-value="defaultValue"
+              :min-date="minDate"
+              :max-date="maxDate"
+              :range-state="rangeState"
+              :disabled-date="disabledDate"
+              @changerange="handleChangeRange"
+              @pick="handleRangePick">
+            </month-table>
+          </div>
+        </div>
+      </div>
+    </div>
+  </transition>
+</template>
+
+<script type="text/babel">
+  import {
+    isDate,
+    modifyWithTimeString,
+    prevYear,
+    nextYear,
+    nextMonth
+  } from 'element-ui/src/utils/date-util';
+  import Clickoutside from 'element-ui/src/utils/clickoutside';
+  import Locale from 'element-ui/src/mixins/locale';
+  import MonthTable from '../basic/month-table';
+  import ElInput from 'element-ui/packages/input';
+  import ElButton from 'element-ui/packages/button';
+
+  const calcDefaultValue = (defaultValue) => {
+    if (Array.isArray(defaultValue)) {
+      return [new Date(defaultValue[0]), new Date(defaultValue[1])];
+    } else if (defaultValue) {
+      return [new Date(defaultValue), nextMonth(new Date(defaultValue))];
+    } else {
+      return [new Date(), nextMonth(new Date())];
+    }
+  };
+  export default {
+    mixins: [Locale],
+
+    directives: { Clickoutside },
+
+    computed: {
+      btnDisabled() {
+        return !(this.minDate && this.maxDate && !this.selecting && this.isValidValue([this.minDate, this.maxDate]));
+      },
+
+      leftLabel() {
+        return this.leftDate.getFullYear() + ' ' + this.t('el.datepicker.year');
+      },
+
+      rightLabel() {
+        return this.rightDate.getFullYear() + ' ' + this.t('el.datepicker.year');
+      },
+
+      leftYear() {
+        return this.leftDate.getFullYear();
+      },
+
+      rightYear() {
+        return this.rightDate.getFullYear() === this.leftDate.getFullYear() ? this.leftDate.getFullYear() + 1 : this.rightDate.getFullYear();
+      },
+
+      enableYearArrow() {
+        return this.unlinkPanels && this.rightYear > this.leftYear + 1;
+      }
+    },
+
+    data() {
+      return {
+        popperClass: '',
+        value: [],
+        defaultValue: null,
+        defaultTime: null,
+        minDate: '',
+        maxDate: '',
+        leftDate: new Date(),
+        rightDate: nextYear(new Date()),
+        rangeState: {
+          endDate: null,
+          selecting: false,
+          row: null,
+          column: null
+        },
+        shortcuts: '',
+        visible: '',
+        disabledDate: '',
+        format: '',
+        arrowControl: false,
+        unlinkPanels: false
+      };
+    },
+
+    watch: {
+      value(newVal) {
+        if (!newVal) {
+          this.minDate = null;
+          this.maxDate = null;
+        } else if (Array.isArray(newVal)) {
+          this.minDate = isDate(newVal[0]) ? new Date(newVal[0]) : null;
+          this.maxDate = isDate(newVal[1]) ? new Date(newVal[1]) : null;
+          if (this.minDate) {
+            this.leftDate = this.minDate;
+            if (this.unlinkPanels && this.maxDate) {
+              const minDateYear = this.minDate.getFullYear();
+              const maxDateYear = this.maxDate.getFullYear();
+              this.rightDate = minDateYear === maxDateYear
+                ? nextYear(this.maxDate)
+                : this.maxDate;
+            } else {
+              this.rightDate = nextYear(this.leftDate);
+            }
+          } else {
+            this.leftDate = calcDefaultValue(this.defaultValue)[0];
+            this.rightDate = nextYear(this.leftDate);
+          }
+        }
+      },
+
+      defaultValue(val) {
+        if (!Array.isArray(this.value)) {
+          const [left, right] = calcDefaultValue(val);
+          this.leftDate = left;
+          this.rightDate = val && val[1] && left.getFullYear() !== right.getFullYear() && this.unlinkPanels
+            ? right
+            : nextYear(this.leftDate);
+        }
+      }
+    },
+
+    methods: {
+      handleClear() {
+        this.minDate = null;
+        this.maxDate = null;
+        this.leftDate = calcDefaultValue(this.defaultValue)[0];
+        this.rightDate = nextYear(this.leftDate);
+        this.$emit('pick', null);
+      },
+
+      handleChangeRange(val) {
+        this.minDate = val.minDate;
+        this.maxDate = val.maxDate;
+        this.rangeState = val.rangeState;
+      },
+
+      handleRangePick(val, close = true) {
+        const defaultTime = this.defaultTime || [];
+        const minDate = modifyWithTimeString(val.minDate, defaultTime[0]);
+        const maxDate = modifyWithTimeString(val.maxDate, defaultTime[1]);
+        if (this.maxDate === maxDate && this.minDate === minDate) {
+          return;
+        }
+        this.onPick && this.onPick(val);
+        this.maxDate = maxDate;
+        this.minDate = minDate;
+
+        // workaround for https://github.com/ElemeFE/element/issues/7539, should remove this block when we don't have to care about Chromium 55 - 57
+        setTimeout(() => {
+          this.maxDate = maxDate;
+          this.minDate = minDate;
+        }, 10);
+        if (!close) return;
+        this.handleConfirm();
+      },
+
+      handleShortcutClick(shortcut) {
+        if (shortcut.onClick) {
+          shortcut.onClick(this);
+        }
+      },
+
+      // leftPrev*, rightNext* need to take care of `unlinkPanels`
+      leftPrevYear() {
+        this.leftDate = prevYear(this.leftDate);
+        if (!this.unlinkPanels) {
+          this.rightDate = prevYear(this.rightDate);
+        }
+      },
+
+      rightNextYear() {
+        if (!this.unlinkPanels) {
+          this.leftDate = nextYear(this.leftDate);
+        }
+        this.rightDate = nextYear(this.rightDate);
+      },
+
+      // leftNext*, rightPrev* are called when `unlinkPanels` is true
+      leftNextYear() {
+        this.leftDate = nextYear(this.leftDate);
+      },
+
+      rightPrevYear() {
+        this.rightDate = prevYear(this.rightDate);
+      },
+
+      handleConfirm(visible = false) {
+        if (this.isValidValue([this.minDate, this.maxDate])) {
+          this.$emit('pick', [this.minDate, this.maxDate], visible);
+        }
+      },
+
+      isValidValue(value) {
+        return Array.isArray(value) &&
+          value && value[0] && value[1] &&
+          isDate(value[0]) && isDate(value[1]) &&
+          value[0].getTime() <= value[1].getTime() && (
+          typeof this.disabledDate === 'function'
+            ? !this.disabledDate(value[0]) && !this.disabledDate(value[1])
+            : true
+        );
+      },
+
+      resetView() {
+        // NOTE: this is a hack to reset {min, max}Date on picker open.
+        // TODO: correct way of doing so is to refactor {min, max}Date to be dependent on value and internal selection state
+        //       an alternative would be resetView whenever picker becomes visible, should also investigate date-panel's resetView
+        this.minDate = this.value && isDate(this.value[0]) ? new Date(this.value[0]) : null;
+        this.maxDate = this.value && isDate(this.value[0]) ? new Date(this.value[1]) : null;
+      }
+    },
+
+    components: { MonthTable, ElInput, ElButton }
+  };
+</script>
diff --git a/packages/date-picker/src/panel/time-range.vue b/packages/date-picker/src/panel/time-range.vue
index f65772e95d0..f6ce5395fba 100644
--- a/packages/date-picker/src/panel/time-range.vue
+++ b/packages/date-picker/src/panel/time-range.vue
@@ -62,7 +62,7 @@
     modifyDate,
     clearMilliseconds,
     timeWithinRange
-  } from '../util';
+  } from 'element-ui/src/utils/date-util';
   import Locale from 'element-ui/src/mixins/locale';
   import TimeSpinner from '../basic/time-spinner';
 
diff --git a/packages/date-picker/src/panel/time-select.vue b/packages/date-picker/src/panel/time-select.vue
index 230cfaf27ee..4eb0898a1c0 100644
--- a/packages/date-picker/src/panel/time-select.vue
+++ b/packages/date-picker/src/panel/time-select.vue
@@ -11,6 +11,7 @@
           v-for="item in items"
           :class="{ selected: value === item.value, disabled: item.disabled, default: item.value === defaultValue }"
           :disabled="item.disabled"
+          :key="item.value"
           @click="handleClick(item)">{{ item.value }}</div>
       </el-scrollbar>
     </div>
diff --git a/packages/date-picker/src/panel/time.vue b/packages/date-picker/src/panel/time.vue
index e5bef1f81c2..b2f97e6ca4c 100644
--- a/packages/date-picker/src/panel/time.vue
+++ b/packages/date-picker/src/panel/time.vue
@@ -31,7 +31,7 @@
 </template>
 
 <script type="text/babel">
-  import { limitTimeRange, isDate, clearMilliseconds, timeWithinRange } from '../util';
+  import { limitTimeRange, isDate, clearMilliseconds, timeWithinRange } from 'element-ui/src/utils/date-util';
   import Locale from 'element-ui/src/mixins/locale';
   import TimeSpinner from '../basic/time-spinner';
 
diff --git a/packages/date-picker/src/picker.vue b/packages/date-picker/src/picker.vue
index 18a6e5c2729..38a0b6c0330 100644
--- a/packages/date-picker/src/picker.vue
+++ b/packages/date-picker/src/picker.vue
@@ -2,7 +2,7 @@
   <el-input
     class="el-date-editor"
     :class="'el-date-editor--' + type"
-    :readonly="!editable || readonly || type === 'dates'"
+    :readonly="!editable || readonly || type === 'dates' || type === 'week'"
     :disabled="pickerDisabled"
     :size="pickerSize"
     :name="name"
@@ -57,7 +57,7 @@
       :name="name && name[0]"
       @input="handleStartInput"
       @change="handleStartChange"
-      @focus="handleFocus"
+      @focus="handleFocus('min')"
       class="el-range-input">
     <slot name="range-separator">
       <span class="el-range-separator">{{ rangeSeparator }}</span>
@@ -72,7 +72,7 @@
       :name="name && name[1]"
       @input="handleEndInput"
       @change="handleEndChange"
-      @focus="handleFocus"
+      @focus="handleFocus('max')"
       class="el-range-input">
     <i
       @click="handleClickIcon"
@@ -86,7 +86,7 @@
 <script>
 import Vue from 'vue';
 import Clickoutside from 'element-ui/src/utils/clickoutside';
-import { formatDate, parseDate, isDateObject, getWeekNumber } from './util';
+import { formatDate, parseDate, isDateObject, getWeekNumber } from 'element-ui/src/utils/date-util';
 import Popper from 'element-ui/src/utils/vue-popper';
 import Emitter from 'element-ui/src/mixins/emitter';
 import ElInput from 'element-ui/packages/input';
@@ -114,6 +114,7 @@ const DEFAULT_FORMATS = {
   week: 'yyyywWW',
   timerange: 'HH:mm:ss',
   daterange: 'yyyy-MM-dd',
+  monthrange: 'yyyy-MM',
   datetimerange: 'yyyy-MM-dd HH:mm:ss',
   year: 'yyyy'
 };
@@ -126,6 +127,7 @@ const HAVE_TRIGGER_TYPES = [
   'month',
   'year',
   'daterange',
+  'monthrange',
   'timerange',
   'datetimerange',
   'dates'
@@ -188,17 +190,9 @@ const TYPE_VALUE_RESOLVER_MAP = {
         : date.replace(/W/, week);
       return date;
     },
-    parser(text) {
-      const array = (text || '').split('w');
-      if (array.length === 2) {
-        const year = Number(array[0]);
-        const month = Number(array[1]);
-
-        if (!isNaN(year) && !isNaN(month) && month < 54) {
-          return text;
-        }
-      }
-      return null;
+    parser(text, format) {
+      // parse as if a normal date
+      return TYPE_VALUE_RESOLVER_MAP.date.parser(text, format);
     }
   },
   date: {
@@ -213,6 +207,10 @@ const TYPE_VALUE_RESOLVER_MAP = {
     formatter: RANGE_FORMATTER,
     parser: RANGE_PARSER
   },
+  monthrange: {
+    formatter: RANGE_FORMATTER,
+    parser: RANGE_PARSER
+  },
   datetimerange: {
     formatter: RANGE_FORMATTER,
     parser: RANGE_PARSER
@@ -386,7 +384,11 @@ export default {
       default: '-'
     },
     pickerOptions: {},
-    unlinkPanels: Boolean
+    unlinkPanels: Boolean,
+    validateEvent: {
+      type: Boolean,
+      default: true
+    }
   },
 
   components: { ElInput },
@@ -399,7 +401,8 @@ export default {
       showClose: false,
       userInput: null,
       valueOnOpen: null, // value when picker opens, used to determine whether to emit change
-      unwatchPickerOptions: null
+      unwatchPickerOptions: null,
+      inputType: null
     };
   },
 
@@ -413,7 +416,9 @@ export default {
         this.hidePicker();
         this.emitChange(this.value);
         this.userInput = null;
-        this.dispatch('ElFormItem', 'el.form.blur');
+        if (this.validateEvent) {
+          this.dispatch('ElFormItem', 'el.form.blur');
+        }
         this.$emit('blur', this);
         this.blur();
       }
@@ -433,7 +438,7 @@ export default {
       }
     },
     value(val, oldVal) {
-      if (!valueEquals(val, oldVal) && !this.pickerVisible) {
+      if (!valueEquals(val, oldVal) && !this.pickerVisible && this.validateEvent) {
         this.dispatch('ElFormItem', 'el.form.change', val);
       }
     }
@@ -720,10 +725,11 @@ export default {
       this.userInput = initialValue === '' ? null : initialValue;
     },
 
-    handleFocus() {
+    handleFocus(inputType) {
       const type = this.type;
 
       if (HAVE_TRIGGER_TYPES.indexOf(type) !== -1 && !this.pickerVisible) {
+        this.inputType = inputType;
         this.pickerVisible = true;
       }
       this.$emit('focus', this);
@@ -810,6 +816,7 @@ export default {
 
       this.picker.value = this.parsedValue;
       this.picker.resetView && this.picker.resetView();
+      this.picker.inputType = this.inputType;
 
       this.$nextTick(() => {
         this.picker.adjustSpinners && this.picker.adjustSpinners();
@@ -858,7 +865,6 @@ export default {
       };
       updateOptions();
       this.unwatchPickerOptions = this.$watch('pickerOptions', () => updateOptions(), { deep: true });
-
       this.$el.appendChild(this.picker.$el);
       this.picker.resetView && this.picker.resetView();
 
@@ -897,8 +903,10 @@ export default {
       // determine user real change only
       if (!valueEquals(val, this.valueOnOpen)) {
         this.$emit('change', val);
-        this.dispatch('ElFormItem', 'el.form.change', val);
         this.valueOnOpen = val;
+        if (this.validateEvent) {
+          this.dispatch('ElFormItem', 'el.form.change', val);
+        }
       }
     },
 
diff --git a/packages/date-picker/src/picker/date-picker.js b/packages/date-picker/src/picker/date-picker.js
index 63a7df366fc..6efc0edb81e 100644
--- a/packages/date-picker/src/picker/date-picker.js
+++ b/packages/date-picker/src/picker/date-picker.js
@@ -1,10 +1,13 @@
 import Picker from '../picker';
 import DatePanel from '../panel/date';
 import DateRangePanel from '../panel/date-range';
+import MonthRangePanel from '../panel/month-range';
 
 const getPanel = function(type) {
   if (type === 'daterange' || type === 'datetimerange') {
     return DateRangePanel;
+  } else if (type === 'monthrange') {
+    return MonthRangePanel;
   }
   return DatePanel;
 };
diff --git a/packages/dialog/src/component.vue b/packages/dialog/src/component.vue
index c4543a9860c..4450dfd1b3b 100644
--- a/packages/dialog/src/component.vue
+++ b/packages/dialog/src/component.vue
@@ -3,13 +3,16 @@
     name="dialog-fade"
     @after-enter="afterEnter"
     @after-leave="afterLeave">
-    <div class="el-dialog__wrapper" v-show="visible" @click.self="handleWrapperClick">
+    <div
+      v-show="visible"
+      class="el-dialog__wrapper"
+      @click.self="handleWrapperClick">
       <div
         role="dialog"
+        :key="key"
         aria-modal="true"
         :aria-label="title || 'dialog'"
-        class="el-dialog"
-        :class="[{ 'is-fullscreen': fullscreen, 'el-dialog--center': center }, customClass]"
+        :class="['el-dialog', { 'is-fullscreen': fullscreen, 'el-dialog--center': center }, customClass]"
         ref="dialog"
         :style="style">
         <div class="el-dialog__header">
@@ -102,12 +105,15 @@
       center: {
         type: Boolean,
         default: false
-      }
+      },
+
+      destroyOnClose: Boolean
     },
 
     data() {
       return {
-        closed: false
+        closed: false,
+        key: 0
       };
     },
 
@@ -126,6 +132,11 @@
         } else {
           this.$el.removeEventListener('scroll', this.updatePopper);
           if (!this.closed) this.$emit('close');
+          if (this.destroyOnClose) {
+            this.$nextTick(() => {
+              this.key++;
+            });
+          }
         }
       }
     },
diff --git a/packages/divider/index.js b/packages/divider/index.js
new file mode 100644
index 00000000000..b49f9d0fe4e
--- /dev/null
+++ b/packages/divider/index.js
@@ -0,0 +1,8 @@
+import Divider from './src/main';
+
+/* istanbul ignore next */
+Divider.install = function(Vue) {
+  Vue.component(Divider.name, Divider);
+};
+
+export default Divider;
diff --git a/packages/divider/src/main.vue b/packages/divider/src/main.vue
new file mode 100644
index 00000000000..fa712981acc
--- /dev/null
+++ b/packages/divider/src/main.vue
@@ -0,0 +1,37 @@
+<template functional>
+  <div
+    v-bind="data.attrs"
+    v-on="listeners"
+    :class="[data.staticClass, 'el-divider', `el-divider--${props.direction}`]"
+  >
+    <div
+      v-if="slots().default && props.direction !== 'vertical'"
+      :class="['el-divider__text', `is-${props.contentPosition}`]"
+     >
+      <slot />
+    </div>
+  </div>
+</template>
+
+<script>
+export default {
+  name: 'ElDivider',
+  props: {
+    direction: {
+      type: String,
+      default: 'horizontal',
+      validator(val) {
+        return ['horizontal', 'vertical'].indexOf(val) !== -1;
+      }
+    },
+    contentPosition: {
+      type: String,
+      default: 'center',
+      validator(val) {
+        return ['left', 'center', 'right'].indexOf(val) !== -1;
+      }
+    }
+  }
+};
+
+</script>
diff --git a/packages/drawer/index.js b/packages/drawer/index.js
new file mode 100644
index 00000000000..803e071d099
--- /dev/null
+++ b/packages/drawer/index.js
@@ -0,0 +1,8 @@
+import Drawer from './src/main';
+
+/* istanbul ignore next */
+Drawer.install = function(Vue) {
+  Vue.component(Drawer.name, Drawer);
+};
+
+export default Drawer;
diff --git a/packages/drawer/src/main.vue b/packages/drawer/src/main.vue
new file mode 100644
index 00000000000..a378194df3a
--- /dev/null
+++ b/packages/drawer/src/main.vue
@@ -0,0 +1,198 @@
+<template>
+  <transition
+    name="el-drawer-fade"
+    @after-enter="afterEnter"
+    @after-leave="afterLeave">
+    <div
+      class="el-drawer__wrapper"
+      tabindex="-1"
+      v-show="visible">
+      <div
+        class="el-drawer__container"
+        :class="visible && 'el-drawer__open'"
+        @click.self="handleWrapperClick"
+        role="document"
+        tabindex="-1">
+        <div
+          aria-modal="true"
+          aria-labelledby="el-drawer__title"
+          :aria-label="title"
+          class="el-drawer"
+          :class="[direction, customClass]"
+          :style="isHorizontal ? `width: ${size}` : `height: ${size}`"
+          ref="drawer"
+          role="dialog"
+          tabindex="-1"
+          >
+          <header class="el-drawer__header" id="el-drawer__title" v-if="withHeader">
+            <slot name="title">
+              <span role="heading" tabindex="0" :title="title">{{ title }}</span>
+            </slot>
+            <button
+              :aria-label="`close ${title || 'drawer'}`"
+              class="el-drawer__close-btn"
+              type="button"
+              v-if="showClose"
+              @click="closeDrawer">
+              <i class="el-dialog__close el-icon el-icon-close"></i>
+            </button>
+          </header>
+          <section class="el-drawer__body" v-if="rendered">
+            <slot></slot>
+          </section>
+        </div>
+      </div>
+    </div>
+  </transition>
+</template>
+
+<script>
+import Popup from 'element-ui/src/utils/popup';
+import emitter from 'element-ui/src/mixins/emitter';
+import Utils from 'element-ui/src/utils/aria-utils';
+
+export default {
+  name: 'ElDrawer',
+  mixins: [Popup, emitter],
+  props: {
+    appendToBody: {
+      type: Boolean,
+      default: false
+    },
+    beforeClose: {
+      type: Function
+    },
+    customClass: {
+      type: String,
+      default: ''
+    },
+    closeOnPressEscape: {
+      type: Boolean,
+      default: true
+    },
+    destroyOnClose: {
+      type: Boolean,
+      default: false
+    },
+    modal: {
+      type: Boolean,
+      default: true
+    },
+    direction: {
+      type: String,
+      default: 'rtl',
+      validator(val) {
+        return ['ltr', 'rtl', 'ttb', 'btt'].indexOf(val) !== -1;
+      }
+    },
+    modalAppendToBody: {
+      type: Boolean,
+      default: true
+    },
+    showClose: {
+      type: Boolean,
+      default: true
+    },
+    size: {
+      type: String,
+      default: '30%'
+    },
+    title: {
+      type: String,
+      default: ''
+    },
+    visible: {
+      type: Boolean
+    },
+    wrapperClosable: {
+      type: Boolean,
+      default: true
+    },
+    withHeader: {
+      type: Boolean,
+      default: true
+    }
+  },
+  computed: {
+    isHorizontal() {
+      return this.direction === 'rtl' || this.direction === 'ltr';
+    }
+  },
+  data() {
+    return {
+      closed: false,
+      prevActiveElement: null
+    };
+  },
+  watch: {
+    visible(val) {
+      if (val) {
+        this.closed = false;
+        this.$emit('open');
+        if (this.appendToBody) {
+          document.body.appendChild(this.$el);
+        }
+        this.prevActiveElement = document.activeElement;
+        this.$nextTick(() => {
+          Utils.focusFirstDescendant(this.$refs.drawer);
+        });
+      } else {
+        if (!this.closed) this.$emit('close');
+        this.$nextTick(() => {
+          if (this.prevActiveElement) {
+            this.prevActiveElement.focus();
+          }
+        });
+      }
+    }
+  },
+  methods: {
+    afterEnter() {
+      this.$emit('opened');
+    },
+    afterLeave() {
+      this.$emit('closed');
+    },
+    hide(cancel) {
+      if (cancel !== false) {
+        this.$emit('update:visible', false);
+        this.$emit('close');
+        if (this.destroyOnClose === true) {
+          this.rendered = false;
+        }
+        this.closed = true;
+      }
+    },
+    handleWrapperClick() {
+      if (this.wrapperClosable) {
+        this.closeDrawer();
+      }
+    },
+    closeDrawer() {
+      if (typeof this.beforeClose === 'function') {
+        this.beforeClose(this.hide);
+      } else {
+        this.hide();
+      }
+    },
+    handleClose() {
+      // This method here will be called by PopupManger, when the `closeOnPressEscape` was set to true
+      // pressing `ESC` will call this method, and also close the drawer.
+      // This method also calls `beforeClose` if there was one.
+      this.closeDrawer();
+    }
+  },
+  mounted() {
+    if (this.visible) {
+      this.rendered = true;
+      this.open();
+    }
+  },
+  destroyed() {
+    // if appendToBody is true, remove DOM node after destroy
+    if (this.appendToBody && this.$el && this.$el.parentNode) {
+      this.$el.parentNode.removeChild(this.$el);
+    }
+  }
+};
+</script>
diff --git a/packages/dropdown/src/dropdown-item.vue b/packages/dropdown/src/dropdown-item.vue
index 9af930a6865..9fc33d8c31b 100644
--- a/packages/dropdown/src/dropdown-item.vue
+++ b/packages/dropdown/src/dropdown-item.vue
@@ -9,6 +9,7 @@
     :aria-disabled="disabled"
     :tabindex="disabled ? null : -1"
   >
+    <i :class="icon" v-if="icon"></i>
     <slot></slot>
   </li>
 </template>
@@ -23,7 +24,8 @@
     props: {
       command: {},
       disabled: Boolean,
-      divided: Boolean
+      divided: Boolean,
+      icon: String
     },
 
     methods: {
diff --git a/packages/dropdown/src/dropdown-menu.vue b/packages/dropdown/src/dropdown-menu.vue
index 1b64892bbbe..1766467423d 100644
--- a/packages/dropdown/src/dropdown-menu.vue
+++ b/packages/dropdown/src/dropdown-menu.vue
@@ -44,8 +44,11 @@
     },
 
     mounted() {
-      this.$parent.popperElm = this.popperElm = this.$el;
-      this.referenceElm = this.$parent.$el;
+      this.dropdown.popperElm = this.popperElm = this.$el;
+      this.referenceElm = this.dropdown.$el;
+      // compatible with 2.6 new v-slot syntax
+      // issue link https://github.com/ElemeFE/element/issues/14345
+      this.dropdown.initDomOperation();
     },
 
     watch: {
diff --git a/packages/dropdown/src/dropdown.vue b/packages/dropdown/src/dropdown.vue
index 2daa5503006..1d6e7a19dd8 100644
--- a/packages/dropdown/src/dropdown.vue
+++ b/packages/dropdown/src/dropdown.vue
@@ -55,6 +55,10 @@
       hideTimeout: {
         type: Number,
         default: 150
+      },
+      tabindex: {
+        type: Number,
+        default: 0
       }
     },
 
@@ -79,8 +83,6 @@
 
     mounted() {
       this.$on('menu-item-click', this.handleMenuItemClick);
-      this.initEvent();
-      this.initAria();
     },
 
     watch: {
@@ -118,7 +120,9 @@
       hide() {
         if (this.triggerElm.disabled) return;
         this.removeTabindex();
-        this.resetTabindex(this.triggerElm);
+        if (this.tabindex >= 0) {
+          this.resetTabindex(this.triggerElm);
+        }
         clearTimeout(this.timeout);
         this.timeout = setTimeout(() => {
           this.visible = false;
@@ -145,7 +149,6 @@
         } else if ([9, 27].indexOf(keyCode) > -1) { // tab || esc
           this.hide();
         }
-        return;
       },
       handleItemKeyDown(ev) {
         const keyCode = ev.keyCode;
@@ -165,16 +168,15 @@
           ev.preventDefault();
           ev.stopPropagation();
         } else if (keyCode === 13) { // enter选中
-          this.triggerElm.focus();
+          this.triggerElmFocus();
           target.click();
           if (this.hideOnClick) { // click关闭
             this.visible = false;
           }
         } else if ([9, 27].indexOf(keyCode) > -1) { // tab // esc
           this.hide();
-          this.triggerElm.focus();
+          this.triggerElmFocus();
         }
-        return;
       },
       resetTabindex(ele) { // 下次tab时组件聚焦元素
         this.removeTabindex();
@@ -190,12 +192,10 @@
         this.dropdownElm.setAttribute('id', this.listId);
         this.triggerElm.setAttribute('aria-haspopup', 'list');
         this.triggerElm.setAttribute('aria-controls', this.listId);
-        this.menuItems = this.dropdownElm.querySelectorAll("[tabindex='-1']");
-        this.menuItemsArray = Array.prototype.slice.call(this.menuItems);
 
         if (!this.splitButton) { // 自定义
           this.triggerElm.setAttribute('role', 'button');
-          this.triggerElm.setAttribute('tabindex', '0');
+          this.triggerElm.setAttribute('tabindex', this.tabindex);
           this.triggerElm.setAttribute('class', (this.triggerElm.getAttribute('class') || '') + ' el-dropdown-selfdefine'); // 控制
         }
       },
@@ -205,7 +205,7 @@
           ? this.$refs.trigger.$el
           : this.$slots.default[0].elm;
 
-        let dropdownElm = this.dropdownElm = this.$slots.dropdown[0].elm;
+        let dropdownElm = this.dropdownElm;
 
         this.triggerElm.addEventListener('keydown', handleTriggerKeyDown); // triggerElm keydown
         dropdownElm.addEventListener('keydown', handleItemKeyDown, true); // item keydown
@@ -236,8 +236,16 @@
         }
         this.$emit('command', command, instance);
       },
-      focus() {
+      triggerElmFocus() {
         this.triggerElm.focus && this.triggerElm.focus();
+      },
+      initDomOperation() {
+        this.dropdownElm = this.popperElm;
+        this.menuItems = this.dropdownElm.querySelectorAll("[tabindex='-1']");
+        this.menuItemsArray = [].slice.call(this.menuItems);
+
+        this.initEvent();
+        this.initAria();
       }
     },
 
diff --git a/packages/edit-table/index.js b/packages/edit-table/index.js
new file mode 100644
index 00000000000..6d5ad9d6579
--- /dev/null
+++ b/packages/edit-table/index.js
@@ -0,0 +1,8 @@
+import EditTable from './src/main';
+
+/* istanbul ignore next */
+EditTable.install = function(Vue) {
+  Vue.component(EditTable.name, EditTable);
+};
+
+export default EditTable;
diff --git a/packages/edit-table/src/form-input.vue b/packages/edit-table/src/form-input.vue
new file mode 100644
index 00000000000..bb2adf7e8a6
--- /dev/null
+++ b/packages/edit-table/src/form-input.vue
@@ -0,0 +1,116 @@
+<template>
+  <el-form-item
+    class="form-input"
+    :class="[`form-input-${column.id}`, {'form-input--readonly': readonly}]"
+    v-bind="$attrs"
+    :prop="`data.${index}.${column.id}`"
+  >
+    <component v-if="readonly" :is="readonlyComponent" />
+    <component
+      v-else-if="column.type"
+      :is="`el-${column.type}`"
+      v-model="data[column.id]"
+      v-bind="inputAttrs"
+      v-on="event(column.on)"
+    >
+      <template v-if="column.type === 'select'">
+        <el-option
+          v-for="(option, index) in options"
+          :key="index"
+          v-bind="option"
+        ></el-option>
+      </template>
+    </component>
+    <component
+      v-else-if="column.component"
+      :is="column.component"
+      v-model="data[column.id]"
+      v-bind="inputAttrs"
+      v-on="event(column.on)"
+    ></component>
+  </el-form-item>
+</template>
+
+<script>
+import { isFunction, isObject } from 'element-ui/src/utils/types';
+import { isVNode } from 'element-ui/src/utils/vdom';
+
+export default {
+  name: 'FormInput',
+  props: {
+    data: {
+      type: Object,
+      default() {
+        return {};
+      }
+    },
+    column: {
+      type: Object,
+      default() {
+        return {};
+      }
+    },
+    index: {
+      type: Number,
+      default: -1
+    },
+    options: {
+      type: Array,
+      default: () => []
+    },
+    readonly: {
+      type: Boolean,
+      default: false
+    }
+  },
+  computed: {
+    readonlyComponent() {
+      let cellValue = this.data[this.column.id];
+
+      let Component = {
+        render: h => h('p', null, cellValue)
+      };
+
+      if (isFunction(this.column.formatter)) {
+        const formatted = this.column.formatter(this.data, cellValue, this.index);
+
+        if (isVNode(formatted)) {
+          Component = { render: h => formatted };
+        } else if (isObject(formatted)) {
+          Component = formatted;
+        } else {
+          cellValue = formatted;
+        }
+      }
+
+      return Component;
+    },
+    inputAttrs() {
+      if (isFunction(this.column.el)) {
+        return this.column.el(this.data, this.index);
+      }
+      return this.column.el;
+    }
+  },
+  methods: {
+    event(on) {
+      const event = {};
+      on &&
+        Object.keys(on).forEach(key => {
+          event[key] = (...args) => {
+            return on[key](
+              {
+                data: this.data,
+                index: this.index,
+                value: this.data[this.column.id],
+                id: this.column.id
+              },
+              ...args
+            );
+          };
+        });
+      return event;
+    }
+  }
+};
+</script>
diff --git a/packages/edit-table/src/main.vue b/packages/edit-table/src/main.vue
new file mode 100644
index 00000000000..404538a08f9
--- /dev/null
+++ b/packages/edit-table/src/main.vue
@@ -0,0 +1,282 @@
+<template>
+  <el-form class="el-edit-table" :class="{'el-edit-table-readonly': readonly}" ref="form" :model="model">
+    <el-table ref="table" :data="model.data" v-bind="tableAttrs">
+      <slot></slot>
+      <el-table-column
+        v-for="(column, index) in columns"
+        :key="index"
+        :label="column.label"
+        :prop="column.id"
+        v-bind="column.columnAttrs"
+      >
+        <template slot="header" slot-scope="scope">
+          <slot :name="`header:${column.id}`" :column="column">{{ scope.column.label }}</slot>
+          <span v-if="hasRequired(columns[index].rules)" class="required">*</span>
+        </template>
+        <template slot-scope="scope">
+          <form-input
+            :index="scope.$index"
+            :column="column"
+            :data="scope.row"
+            :rules="column.rules"
+            :options="createOptions(column.id, scope.$index)"
+            :readonly="isReadOnly(column)"
+          ></form-input>
+        </template>
+      </el-table-column>
+      <el-table-column label="操作" v-bind="operationAttrs" v-if="!readonly && hasOperation">
+        <el-form-item slot-scope="scope">
+          <span @click="deleteRow(scope.row, scope.$index)">
+            <slot name="delete" :disabled="value.length >= maxCount">
+              <el-button class="danger-button" type="text" :disabled="value.length <= minCount">删除</el-button>
+            </slot>
+          </span>
+        </el-form-item>
+      </el-table-column>
+    </el-table>
+    <span @click="addRow" v-if="!readonly && hasOperation">
+      <slot name="add" :disabled="value.length >= maxCount">
+        <el-button type="text" :disabled="value.length >= maxCount">
+          添加
+        </el-button>
+      </slot>
+    </span>
+  </el-form>
+</template>
+
+<script>
+import { isString, isUndefined } from 'element-ui/src/utils/types';
+
+import FormInput from './form-input.vue';
+
+export default {
+  name: 'ElEditTable',
+  components: {
+    FormInput
+  },
+  props: {
+    value: {
+      type: Array,
+      required: true
+    },
+    columns: {
+      type: Array,
+      default() {
+        return [];
+      }
+    },
+    readonly: {
+      type: [Boolean, undefined],
+      default: undefined
+    },
+    min: {
+      type: Number,
+      default: 1
+    },
+    max: {
+      type: Number,
+      default: Infinity
+    },
+    hasOperation: {
+      type: Boolean,
+      default: true
+    },
+    tableAttrs: {
+      type: Object,
+      default: () => ({})
+    },
+    operationAttrs: {
+      type: Object,
+      default: () => ({})
+    }
+  },
+  data() {
+    return {
+      indexKeys: [],
+      commonOptionsData: {},
+      rowOptionsData: {},
+      oldValue: []
+    };
+  },
+
+  computed: {
+    basicData() {
+      const data = {};
+      this.columns.forEach(column => {
+        data[column.id] = 'default' in column ? column.default : '';
+      });
+      return data;
+    },
+
+    model() {
+      return {
+        data: this.value
+      };
+    },
+
+    createOptions() {
+      // 对于 select 这样的组件，可以统一设置 options，也可以对一行单独设置
+      return (id, index) => {
+        const rowOptions = this.rowOptionsData[`${id}-${this.indexKeys[index]}`] || [];
+
+        // 判断是否存在单独设置的 options
+        if (rowOptions.length > 0) {
+          return rowOptions;
+        } else {
+          return this.commonOptionsData[id];
+        }
+      };
+    },
+
+    selectColumnIds() {
+      return this.columns
+        .filter(({ type }) => type === 'select')
+        .map(({ id }) => id);
+    },
+
+    isReadOnly() {
+      return column => isUndefined(this.readonly) ? !!column.readonly : this.readonly;
+    },
+
+    minCount() {
+      return this.min < 0 ? 0 : this.min;
+    },
+
+    maxCount() {
+      return this.max < this.minCount ? this.minCount : this.max;
+    }
+  },
+
+  beforeMount() {
+    let initLen = this.value.length;
+    if (initLen < this.minCount) {
+      initLen = this.minCount;
+    } else if (initLen > this.maxCount) {
+      initLen = this.maxCount;
+    }
+    const values = [];
+    for (let i = 0; i < initLen; i++) {
+      const value = this.value[i] || {};
+      values.push(Object.assign({}, this.basicData, value));
+    }
+    this.updateValue(values);
+    this.columns.forEach(column => {
+      if (column.options) {
+        this.commonOptionsData[column.id] = column.options;
+      }
+    });
+  },
+
+  watch: {
+    value(v) {
+      this.resetRowOptionsData(v, this.oldValue);
+
+      this.oldValue = [...v];
+
+      this.indexKeys = v.map((_, i) => i);
+    }
+  },
+
+  methods: {
+    hasRequired(rules) {
+      if (Array.isArray(rules)) {
+        return rules.some(rule => rule.required);
+      }
+      return false;
+    },
+
+    deleteRow(row, index) {
+      if (this.value.length <= this.minCount) {
+        return;
+      }
+      const deleteIndex = () => {
+        this.updateValue(this.model.data.filter((item, i) => i !== index));
+        this.$emit('delete', row, index);
+      };
+      if (Object.keys(row).some(key => row[key] !== this.basicData[key])) {
+        this.$confirm('确认删除该行数据吗？').then(deleteIndex);
+      } else {
+        deleteIndex();
+      }
+    },
+
+    addRow() {
+      if (this.value.length >= this.maxCount) {
+        return ;
+      }
+
+      this.updateValue(this.model.data.concat([{ ...this.basicData }]));
+    },
+
+    updateValue(value) {
+      this.$emit('input', value);
+    },
+
+    resetRowOptionsData(value, oldValue) {
+      const newRowOptionsData = {};
+
+      value.forEach((newItem, newIndex) => {
+        const oldIndex = oldValue.findIndex((oldItem) => oldItem === newItem);
+
+        if (oldIndex !== -1) {
+          // 根据旧的 index 将对应的 rowOptions 放到新的 index 下面
+          this.selectColumnIds.forEach((id) => {
+            const rowOptions = this.rowOptionsData[
+              `${id}-${this.indexKeys[oldIndex]}`
+            ];
+            if (rowOptions) {
+              newRowOptionsData[`${id}-${this.indexKeys[newIndex]}`] = [...rowOptions];
+            }
+          });
+        }
+      });
+
+      this.rowOptionsData = newRowOptionsData;
+    },
+
+    setOptions(id, options, index = -1) {
+      if (index > -1) {
+        // 单独设置一行options
+        this.$set(
+          this.rowOptionsData,
+          `${id}-${this.indexKeys[index]}`,
+          options
+        );
+      } else {
+        // 设置所有行的options
+        this.$set(this.commonOptionsData, id, options);
+        Object.keys(this.rowOptionsData).forEach(key => {
+          if (key.split('-')[0] === id) {
+            delete this.rowOptionsData[key];
+          }
+        });
+      }
+    },
+
+    validate(callback) {
+      return this.$refs.form.validate(callback);
+    },
+    clearValidate(props, rowIndexes) {
+      const clearValidate = this.$refs.form.clearValidate;
+      const getAllProps = (prop) => {
+        const allProps = [];
+        const len = rowIndexes ? rowIndexes.length : this.value.length;
+        for (let i = 0; i < len; i++) {
+          const index = rowIndexes ? rowIndexes[i] : i;
+          allProps.push(`data.${index}.${prop}`);
+        }
+        return allProps;
+      };
+      if (props && Array.isArray(props)) {
+        return clearValidate(props.reduce((prev, prop) => {
+          return prev.concat(getAllProps(prop, rowIndexes));
+        }, []));
+      }
+      if (isString(props)) {
+        return clearValidate(getAllProps(props, rowIndexes));
+      }
+      return clearValidate(props);
+    }
+  }
+};
+</script>
diff --git a/packages/empty/index.js b/packages/empty/index.js
new file mode 100644
index 00000000000..6c2d1e90e8c
--- /dev/null
+++ b/packages/empty/index.js
@@ -0,0 +1,8 @@
+import Empty from './src/main.jsx';
+
+/* istanbul ignore next */
+Empty.install = function(Vue) {
+  Vue.component(Empty.name, Empty);
+};
+
+export default Empty;
diff --git a/packages/empty/src/empty.svg b/packages/empty/src/empty.svg
new file mode 100644
index 00000000000..5eb60169ffc
--- /dev/null
+++ b/packages/empty/src/empty.svg
@@ -0,0 +1,16 @@
+<svg width="184" height="152" xmlns="http://www.w3.org/2000/svg">
+  <g fill="none" fill-rule="evenodd">
+    <g transform="translate(24 31.67)">
+      <ellipse fill-opacity=".8" fill="#F5F5F7" cx="67.797" cy="106.89" rx="67.797" ry="12.668"/>
+      <path d="M122.034 69.674L98.109 40.229c-1.148-1.386-2.826-2.225-4.593-2.225h-51.44c-1.766 0-3.444.839-4.592 2.225L13.56 69.674v15.383h108.475V69.674z" fill="#AEB8C2"/>
+      <path d="M101.537 86.214L80.63 61.102c-1.001-1.207-2.507-1.867-4.048-1.867H31.724c-1.54 0-3.047.66-4.048 1.867L6.769 86.214v13.792h94.768V86.214z" fill="url(#linearGradient-1)" transform="translate(13.56)"/>
+      <path d="M33.83 0h67.933a4 4 0 0 1 4 4v93.344a4 4 0 0 1-4 4H33.83a4 4 0 0 1-4-4V4a4 4 0 0 1 4-4z" fill="#F5F5F7"/>
+      <path d="M42.678 9.953h50.237a2 2 0 0 1 2 2V36.91a2 2 0 0 1-2 2H42.678a2 2 0 0 1-2-2V11.953a2 2 0 0 1 2-2zM42.94 49.767h49.713a2.262 2.262 0 1 1 0 4.524H42.94a2.262 2.262 0 0 1 0-4.524zM42.94 61.53h49.713a2.262 2.262 0 1 1 0 4.525H42.94a2.262 2.262 0 0 1 0-4.525zM121.813 105.032c-.775 3.071-3.497 5.36-6.735 5.36H20.515c-3.238 0-5.96-2.29-6.734-5.36a7.309 7.309 0 0 1-.222-1.79V69.675h26.318c2.907 0 5.25 2.448 5.25 5.42v.04c0 2.971 2.37 5.37 5.277 5.37h34.785c2.907 0 5.277-2.421 5.277-5.393V75.1c0-2.972 2.343-5.426 5.25-5.426h26.318v33.569c0 .617-.077 1.216-.221 1.789z" fill="#DCE0E6"/>
+    </g>
+    <path d="M149.121 33.292l-6.83 2.65a1 1 0 0 1-1.317-1.23l1.937-6.207c-2.589-2.944-4.109-6.534-4.109-10.408C138.802 8.102 148.92 0 161.402 0 173.881 0 184 8.102 184 18.097c0 9.995-10.118 18.097-22.599 18.097-4.528 0-8.744-1.066-12.28-2.902z" fill="#DCE0E6"/>
+    <g transform="translate(149.65 15.383)" fill="#FFF">
+      <ellipse cx="20.654" cy="3.167" rx="2.849" ry="2.815"/>
+      <path d="M5.698 5.63H0L2.898.704zM9.259.704h4.985V5.63H9.259z"/>
+    </g>
+  </g>
+</svg>;
diff --git a/packages/empty/src/main.jsx b/packages/empty/src/main.jsx
new file mode 100644
index 00000000000..ffadfe038cf
--- /dev/null
+++ b/packages/empty/src/main.jsx
@@ -0,0 +1,41 @@
+import PropTypes from 'element-ui/src/utils/vue-types';
+import { getComponentFromProp } from 'element-ui/src/utils/props-util';
+import emptyImg from './empty.svg';
+
+export const EmptyProps = {
+  prefixCls: PropTypes.string,
+  image: PropTypes.any,
+  description: PropTypes.any
+};
+
+const Empty = {
+  name: 'ElEmpty',
+  props: EmptyProps,
+  render() {
+    const prefixCls = 'el-empty';
+    const image = getComponentFromProp(this, 'image');
+    const description = getComponentFromProp(this, 'description');
+
+    const des = description || '暂无数据';
+    const alt = typeof des === 'string' ? des : 'empty';
+
+    let imageNode = null;
+    if (!image) {
+      imageNode = <img alt={alt} src={emptyImg} />;
+    } else if (typeof image === 'string') {
+      imageNode = <img alt={alt} src={image} />;
+    } else {
+      imageNode = image;
+    }
+
+    return (
+      <div class={prefixCls} {...{ on: this.$listeners }}>
+        <div class={`${prefixCls}-image`}>{imageNode}</div>
+        <p class={`${prefixCls}-description`}>{des}</p>
+        {this.$slots.default && <div class={`${prefixCls}-footer`}>{this.$slots.default}</div>}
+      </div>
+    );
+  }
+};
+
+export default Empty;
diff --git a/packages/form/src/form-item.vue b/packages/form/src/form-item.vue
index e55967d2cba..e072f389f5e 100644
--- a/packages/form/src/form-item.vue
+++ b/packages/form/src/form-item.vue
@@ -9,15 +9,19 @@
     },
     sizeClass ? 'el-form-item--' + sizeClass : ''
   ]">
-    <label :for="labelFor" class="el-form-item__label" :style="labelStyle" v-if="label || $slots.label">
-      <slot name="label">{{label + form.labelSuffix}}</slot>
-    </label>
+    <label-wrap
+      :is-auto-width="labelStyle && labelStyle.width === 'auto'"
+      :update-all="form.labelWidth === 'auto'">
+      <label :for="labelFor" class="el-form-item__label" :style="labelStyle" v-if="label || $slots.label">
+        <slot name="label">{{label + form.labelSuffix}}</slot>
+      </label>
+    </label-wrap>
     <div class="el-form-item__content" :style="contentStyle">
       <slot></slot>
       <transition name="el-zoom-in-top">
-        <slot 
-          v-if="validateState === 'error' && showMessage && form.showMessage" 
-          name="error" 
+        <slot
+          v-if="validateState === 'error' && showMessage && form.showMessage"
+          name="error"
           :error="validateMessage">
           <div
             class="el-form-item__error"
@@ -39,7 +43,7 @@
   import emitter from 'element-ui/src/mixins/emitter';
   import objectAssign from 'element-ui/src/utils/merge';
   import { noop, getPropByPath } from 'element-ui/src/utils/util';
-
+  import LabelWrap from './label-wrap';
   export default {
     name: 'ElFormItem',
 
@@ -77,6 +81,10 @@
       },
       size: String
     },
+    components: {
+      // use this component to calculate auto width
+      LabelWrap
+    },
     watch: {
       error: {
         immediate: true,
@@ -108,7 +116,13 @@
         if (this.form.labelPosition === 'top' || this.form.inline) return ret;
         if (!label && !this.labelWidth && this.isNested) return ret;
         const labelWidth = this.labelWidth || this.form.labelWidth;
-        if (labelWidth) {
+        if (labelWidth === 'auto') {
+          if (this.labelWidth === 'auto') {
+            ret.marginLeft = this.computedLabelWidth;
+          } else if (this.form.labelWidth === 'auto') {
+            ret.marginLeft = this.elForm.autoLabelWidth;
+          }
+        } else {
           ret.marginLeft = labelWidth;
         }
         return ret;
@@ -167,7 +181,8 @@
         validateMessage: '',
         validateDisabled: false,
         validator: {},
-        isNested: false
+        isNested: false,
+        computedLabelWidth: ''
       };
     },
     methods: {
@@ -227,6 +242,11 @@
           prop.o[prop.k] = this.initialValue;
         }
 
+        // reset validateDisabled after onFieldChange triggered
+        this.$nextTick(() => {
+          this.validateDisabled = false;
+        });
+
         this.broadcast('ElTimeSelect', 'fieldReset', this.initialValue);
       },
       getRules() {
@@ -261,6 +281,20 @@
         }
 
         this.validate('change');
+      },
+      updateComputedLabelWidth(width) {
+        this.computedLabelWidth = width ? `${width}px` : '';
+      },
+      addValidateEvents() {
+        const rules = this.getRules();
+
+        if (rules.length || this.required !== undefined) {
+          this.$on('el.form.blur', this.onFieldBlur);
+          this.$on('el.form.change', this.onFieldChange);
+        }
+      },
+      removeValidateEvents() {
+        this.$off();
       }
     },
     mounted() {
@@ -275,12 +309,7 @@
           value: initialValue
         });
 
-        let rules = this.getRules();
-
-        if (rules.length || this.required !== undefined) {
-          this.$on('el.form.blur', this.onFieldBlur);
-          this.$on('el.form.change', this.onFieldChange);
-        }
+        this.addValidateEvents();
       }
     },
     beforeDestroy() {
diff --git a/packages/form/src/form.vue b/packages/form/src/form.vue
index e2f5b87c78b..59ed4dfa151 100644
--- a/packages/form/src/form.vue
+++ b/packages/form/src/form.vue
@@ -49,14 +49,28 @@
     },
     watch: {
       rules() {
+        // remove then add event listeners on form-item after form rules change
+        this.fields.forEach(field => {
+          field.removeValidateEvents();
+          field.addValidateEvents();
+        });
+
         if (this.validateOnRuleChange) {
           this.validate(() => {});
         }
       }
     },
+    computed: {
+      autoLabelWidth() {
+        if (!this.potentialLabelWidthArr.length) return 0;
+        const max = Math.max(...this.potentialLabelWidthArr);
+        return max ? `${max}px` : '';
+      }
+    },
     data() {
       return {
-        fields: []
+        fields: [],
+        potentialLabelWidthArr: [] // use this array to calculate auto width
       };
     },
     created() {
@@ -135,13 +149,33 @@
         props = [].concat(props);
         const fields = this.fields.filter(field => props.indexOf(field.prop) !== -1);
         if (!fields.length) {
-          confirm.warn('[Element Warn]please pass correct props!');
+          console.warn('[Element Warn]please pass correct props!');
           return;
         }
 
         fields.forEach(field => {
           field.validate('', cb);
         });
+      },
+      getLabelWidthIndex(width) {
+        const index = this.potentialLabelWidthArr.indexOf(width);
+        // it's impossible
+        if (index === -1) {
+          throw new Error('[ElementForm]unpected width ', width);
+        }
+        return index;
+      },
+      registerLabelWidth(val, oldVal) {
+        if (val && oldVal) {
+          const index = this.getLabelWidthIndex(oldVal);
+          this.potentialLabelWidthArr.splice(index, 1, val);
+        } else if (val) {
+          this.potentialLabelWidthArr.push(val);
+        }
+      },
+      deregisterLabelWidth(val) {
+        const index = this.getLabelWidthIndex(val);
+        this.potentialLabelWidthArr.splice(index, 1);
       }
     }
   };
diff --git a/packages/form/src/label-wrap.vue b/packages/form/src/label-wrap.vue
new file mode 100644
index 00000000000..d263f7ddc78
--- /dev/null
+++ b/packages/form/src/label-wrap.vue
@@ -0,0 +1,78 @@
+<script>
+
+export default {
+  props: {
+    isAutoWidth: Boolean,
+    updateAll: Boolean
+  },
+
+  inject: ['elForm', 'elFormItem'],
+
+  render() {
+    const slots = this.$slots.default;
+    if (!slots) return null;
+    if (this.isAutoWidth) {
+      const autoLabelWidth = this.elForm.autoLabelWidth;
+      const style = {};
+      if (autoLabelWidth && autoLabelWidth !== 'auto') {
+        const marginLeft = parseInt(autoLabelWidth, 10) - this.computedWidth;
+        if (marginLeft) {
+          style.marginLeft = marginLeft + 'px';
+        }
+      }
+      return (<div class="el-form-item__label-wrap" style={style}>
+        { slots }
+      </div>);
+    } else {
+      return slots[0];
+    }
+  },
+
+  methods: {
+    getLabelWidth() {
+      if (this.$el && this.$el.firstElementChild) {
+        const computedWidth = window.getComputedStyle(this.$el.firstElementChild).width;
+        return Math.ceil(parseFloat(computedWidth));
+      } else {
+        return 0;
+      }
+    },
+    updateLabelWidth(action = 'update') {
+      if (this.$slots.default && this.isAutoWidth && this.$el.firstElementChild) {
+        if (action === 'update') {
+          this.computedWidth = this.getLabelWidth();
+        } else if (action === 'remove') {
+          this.elForm.deregisterLabelWidth(this.computedWidth);
+        }
+      }
+    }
+  },
+
+  watch: {
+    computedWidth(val, oldVal) {
+      if (this.updateAll) {
+        this.elForm.registerLabelWidth(val, oldVal);
+        this.elFormItem.updateComputedLabelWidth(val);
+      }
+    }
+  },
+
+  data() {
+    return {
+      computedWidth: 0
+    };
+  },
+
+  mounted() {
+    this.updateLabelWidth('update');
+  },
+
+  updated() {
+    this.updateLabelWidth('update');
+  },
+
+  beforeDestroy() {
+    this.updateLabelWidth('remove');
+  }
+};
+</script>
diff --git a/packages/icon-checkbox/index.js b/packages/icon-checkbox/index.js
new file mode 100644
index 00000000000..3c8461c3b2b
--- /dev/null
+++ b/packages/icon-checkbox/index.js
@@ -0,0 +1,8 @@
+import IconCheckbox from './src/main';
+
+/* istanbul ignore next */
+IconCheckbox.install = function(Vue) {
+  Vue.component(IconCheckbox.name, IconCheckbox);
+};
+
+export default IconCheckbox;
diff --git a/packages/icon-checkbox/src/main.vue b/packages/icon-checkbox/src/main.vue
new file mode 100644
index 00000000000..a9c1002f32f
--- /dev/null
+++ b/packages/icon-checkbox/src/main.vue
@@ -0,0 +1,16 @@
+<template>
+  <el-checkbox-button class="el-checkbox-icon-button" v-bind="$attrs" :label="label" v-on="$listeners"></el-checkbox-button>
+</template>
+<script>
+  import ElCheckboxButton from '../../checkbox-button';
+  export default {
+    name: 'ElIconCheckbox',
+    components: {
+      ElCheckboxButton
+    },
+    props: {
+      label: {}
+    },
+    methods: {}
+  };
+</script>
diff --git a/packages/image/index.js b/packages/image/index.js
new file mode 100644
index 00000000000..5e1d9656ea2
--- /dev/null
+++ b/packages/image/index.js
@@ -0,0 +1,8 @@
+import Image from './src/main';
+
+/* istanbul ignore next */
+Image.install = function(Vue) {
+  Vue.component(Image.name, Image);
+};
+
+export default Image;
diff --git a/packages/image/src/image-viewer.vue b/packages/image/src/image-viewer.vue
new file mode 100644
index 00000000000..c3fc33c08a8
--- /dev/null
+++ b/packages/image/src/image-viewer.vue
@@ -0,0 +1,302 @@
+<template>
+  <transition name="viewer-fade">
+    <div tabindex="-1" ref="el-image-viewer__wrapper" class="el-image-viewer__wrapper" :style="{ 'z-index': zIndex }">
+      <div class="el-image-viewer__mask"></div>
+      <!-- CLOSE -->
+      <span class="el-image-viewer__btn el-image-viewer__close" @click="hide">
+        <i class="el-icon-circle-close"></i>
+      </span>
+      <!-- ARROW -->
+      <template v-if="!isSingle">
+        <span
+          class="el-image-viewer__btn el-image-viewer__prev"
+          :class="{ 'is-disabled': !infinite && isFirst }"
+          @click="prev">
+          <i class="el-icon-arrow-left"/>
+        </span>
+        <span
+          class="el-image-viewer__btn el-image-viewer__next"
+          :class="{ 'is-disabled': !infinite && isLast }"
+          @click="next">
+          <i class="el-icon-arrow-right"/>
+        </span>
+      </template>
+      <!-- ACTIONS -->
+      <div class="el-image-viewer__btn el-image-viewer__actions">
+        <div class="el-image-viewer__actions__inner">
+          <i class="el-icon-zoom-out" @click="handleActions('zoomOut')"></i>
+          <i class="el-icon-zoom-in" @click="handleActions('zoomIn')"></i>
+          <i class="el-image-viewer__actions__divider"></i>
+          <i :class="mode.icon" @click="toggleMode"></i>
+          <i class="el-image-viewer__actions__divider"></i>
+          <i class="el-icon-refresh-left" @click="handleActions('anticlocelise')"></i>
+          <i class="el-icon-refresh-right" @click="handleActions('clocelise')"></i>
+        </div>
+      </div>
+      <!-- CANVAS -->
+      <div class="el-image-viewer__canvas">
+        <img
+          v-for="(url, i) in urlList"
+          v-if="i === index"
+          ref="img"
+          class="el-image-viewer__img"
+          :key="url"
+          :src="currentImg"
+          :style="imgStyle"
+          @load="handleImgLoad"
+          @error="handleImgError"
+          @mousedown="handleMouseDown">
+      </div>
+    </div>
+  </transition>
+</template>
+
+<script>
+import { on, off } from 'element-ui/src/utils/dom';
+import { rafThrottle, isFirefox } from 'element-ui/src/utils/util';
+
+const Mode = {
+  CONTAIN: {
+    name: 'contain',
+    icon: 'el-icon-full-screen'
+  },
+  ORIGINAL: {
+    name: 'original',
+    icon: 'el-icon-c-scale-to-original'
+  }
+};
+
+const mousewheelEventName = isFirefox() ? 'DOMMouseScroll' : 'mousewheel';
+
+export default {
+  name: 'elImageViewer',
+
+  props: {
+    urlList: {
+      type: Array,
+      default: () => []
+    },
+    zIndex: {
+      type: Number,
+      default: 2000
+    },
+    onSwitch: {
+      type: Function,
+      default: () => {}
+    },
+    onClose: {
+      type: Function,
+      default: () => {}
+    },
+    initialIndex: {
+      type: Number,
+      default: 0
+    }
+  },
+
+  data() {
+    return {
+      index: this.initialIndex,
+      isShow: false,
+      infinite: true,
+      loading: false,
+      mode: Mode.CONTAIN,
+      transform: {
+        scale: 1,
+        deg: 0,
+        offsetX: 0,
+        offsetY: 0,
+        enableTransition: false
+      }
+    };
+  },
+  computed: {
+    isSingle() {
+      return this.urlList.length <= 1;
+    },
+    isFirst() {
+      return this.index === 0;
+    },
+    isLast() {
+      return this.index === this.urlList.length - 1;
+    },
+    currentImg() {
+      return this.urlList[this.index];
+    },
+    imgStyle() {
+      const { scale, deg, offsetX, offsetY, enableTransition } = this.transform;
+      const style = {
+        transform: `scale(${scale}) rotate(${deg}deg)`,
+        transition: enableTransition ? 'transform .3s' : '',
+        'margin-left': `${offsetX}px`,
+        'margin-top': `${offsetY}px`
+      };
+      if (this.mode === Mode.CONTAIN) {
+        style.maxWidth = style.maxHeight = '100%';
+      }
+      return style;
+    }
+  },
+  watch: {
+    index: {
+      handler: function(val) {
+        this.reset();
+        this.onSwitch(val);
+      }
+    },
+    currentImg(val) {
+      this.$nextTick(_ => {
+        const $img = this.$refs.img[0];
+        if (!$img.complete) {
+          this.loading = true;
+        }
+      });
+    }
+  },
+  methods: {
+    hide() {
+      this.deviceSupportUninstall();
+      this.onClose();
+    },
+    deviceSupportInstall() {
+      this._keyDownHandler = rafThrottle(e => {
+        const keyCode = e.keyCode;
+        switch (keyCode) {
+          // ESC
+          case 27:
+            this.hide();
+            break;
+          // SPACE
+          case 32:
+            this.toggleMode();
+            break;
+          // LEFT_ARROW
+          case 37:
+            this.prev();
+            break;
+          // UP_ARROW
+          case 38:
+            this.handleActions('zoomIn');
+            break;
+          // RIGHT_ARROW
+          case 39:
+            this.next();
+            break;
+          // DOWN_ARROW
+          case 40:
+            this.handleActions('zoomOut');
+            break;
+        }
+      });
+      this._mouseWheelHandler = rafThrottle(e => {
+        const delta = e.wheelDelta ? e.wheelDelta : -e.detail;
+        if (delta > 0) {
+          this.handleActions('zoomIn', {
+            zoomRate: 0.015,
+            enableTransition: false
+          });
+        } else {
+          this.handleActions('zoomOut', {
+            zoomRate: 0.015,
+            enableTransition: false
+          });
+        }
+      });
+      on(document, 'keydown', this._keyDownHandler);
+      on(document, mousewheelEventName, this._mouseWheelHandler);
+    },
+    deviceSupportUninstall() {
+      off(document, 'keydown', this._keyDownHandler);
+      off(document, mousewheelEventName, this._mouseWheelHandler);
+      this._keyDownHandler = null;
+      this._mouseWheelHandler = null;
+    },
+    handleImgLoad(e) {
+      this.loading = false;
+    },
+    handleImgError(e) {
+      this.loading = false;
+      e.target.alt = '加载失败';
+    },
+    handleMouseDown(e) {
+      if (this.loading || e.button !== 0) return;
+
+      const { offsetX, offsetY } = this.transform;
+      const startX = e.pageX;
+      const startY = e.pageY;
+      this._dragHandler = rafThrottle(ev => {
+        this.transform.offsetX = offsetX + ev.pageX - startX;
+        this.transform.offsetY = offsetY + ev.pageY - startY;
+      });
+      on(document, 'mousemove', this._dragHandler);
+      on(document, 'mouseup', ev => {
+        off(document, 'mousemove', this._dragHandler);
+      });
+
+      e.preventDefault();
+    },
+    reset() {
+      this.transform = {
+        scale: 1,
+        deg: 0,
+        offsetX: 0,
+        offsetY: 0,
+        enableTransition: false
+      };
+    },
+    toggleMode() {
+      if (this.loading) return;
+
+      const modeNames = Object.keys(Mode);
+      const modeValues = Object.values(Mode);
+      const index = modeValues.indexOf(this.mode);
+      const nextIndex = (index + 1) % modeNames.length;
+      this.mode = Mode[modeNames[nextIndex]];
+      this.reset();
+    },
+    prev() {
+      if (this.isFirst && !this.infinite) return;
+      const len = this.urlList.length;
+      this.index = (this.index - 1 + len) % len;
+    },
+    next() {
+      if (this.isLast && !this.infinite) return;
+      const len = this.urlList.length;
+      this.index = (this.index + 1) % len;
+    },
+    handleActions(action, options = {}) {
+      if (this.loading) return;
+      const { zoomRate, rotateDeg, enableTransition } = {
+        zoomRate: 0.2,
+        rotateDeg: 90,
+        enableTransition: true,
+        ...options
+      };
+      const { transform } = this;
+      switch (action) {
+        case 'zoomOut':
+          if (transform.scale > 0.2) {
+            transform.scale = parseFloat((transform.scale - zoomRate).toFixed(3));
+          }
+          break;
+        case 'zoomIn':
+          transform.scale = parseFloat((transform.scale + zoomRate).toFixed(3));
+          break;
+        case 'clocelise':
+          transform.deg += rotateDeg;
+          break;
+        case 'anticlocelise':
+          transform.deg -= rotateDeg;
+          break;
+      }
+      transform.enableTransition = enableTransition;
+    }
+  },
+  mounted() {
+    this.deviceSupportInstall();
+    // add tabindex then wrapper can be focusable via Javascript
+    // focus wrapper so arrow key can't cause inner scroll behavior underneath
+    this.$refs['el-image-viewer__wrapper'].focus();
+  }
+};
+</script>
diff --git a/packages/image/src/main.vue b/packages/image/src/main.vue
new file mode 100644
index 00000000000..d1494aae254
--- /dev/null
+++ b/packages/image/src/main.vue
@@ -0,0 +1,231 @@
+<template>
+  <div class="el-image">
+    <slot v-if="loading" name="placeholder">
+      <div class="el-image__placeholder"></div>
+    </slot>
+    <slot v-else-if="error" name="error">
+      <div class="el-image__error">{{ t('el.image.error') }}</div>
+    </slot>
+    <img
+      v-else
+      class="el-image__inner"
+      v-bind="$attrs"
+      v-on="$listeners"
+      @click="clickHandler"
+      :src="src"
+      :style="imageStyle"
+      :class="{ 'el-image__inner--center': alignCenter, 'el-image__preview': preview }">
+    <template v-if="preview">
+      <image-viewer :z-index="zIndex" :initial-index="imageIndex" v-show="showViewer" :on-close="closeViewer" :url-list="previewSrcList"/>
+    </template>
+  </div>
+</template>
+
+<script>
+  import ImageViewer from './image-viewer';
+  import Locale from 'element-ui/src/mixins/locale';
+  import { on, off, getScrollContainer, isInContainer } from 'element-ui/src/utils/dom';
+  import { isString, isHtmlElement } from 'element-ui/src/utils/types';
+  import throttle from 'throttle-debounce/throttle';
+
+  const isSupportObjectFit = () => document.documentElement.style.objectFit !== undefined;
+
+  const ObjectFit = {
+    NONE: 'none',
+    CONTAIN: 'contain',
+    COVER: 'cover',
+    FILL: 'fill',
+    SCALE_DOWN: 'scale-down'
+  };
+
+  let prevOverflow = '';
+
+  export default {
+    name: 'ElImage',
+
+    mixins: [Locale],
+    inheritAttrs: false,
+
+    components: {
+      ImageViewer
+    },
+
+    props: {
+      src: String,
+      fit: String,
+      lazy: Boolean,
+      scrollContainer: {},
+      previewSrcList: {
+        type: Array,
+        default: () => []
+      },
+      zIndex: {
+        type: Number,
+        default: 2000
+      }
+    },
+
+    data() {
+      return {
+        loading: true,
+        error: false,
+        show: !this.lazy,
+        imageWidth: 0,
+        imageHeight: 0,
+        showViewer: false
+      };
+    },
+
+    computed: {
+      imageStyle() {
+        const { fit } = this;
+        if (!this.$isServer && fit) {
+          return isSupportObjectFit()
+            ? { 'object-fit': fit }
+            : this.getImageStyle(fit);
+        }
+        return {};
+      },
+      alignCenter() {
+        return !this.$isServer && !isSupportObjectFit() && this.fit !== ObjectFit.FILL;
+      },
+      preview() {
+        const { previewSrcList } = this;
+        return Array.isArray(previewSrcList) && previewSrcList.length > 0;
+      },
+      imageIndex() {
+        return this.previewSrcList.indexOf(this.src);
+      }
+    },
+
+    watch: {
+      src(val) {
+        this.show && this.loadImage();
+      },
+      show(val) {
+        val && this.loadImage();
+      }
+    },
+
+    mounted() {
+      if (this.lazy) {
+        this.addLazyLoadListener();
+      } else {
+        this.loadImage();
+      }
+    },
+
+    beforeDestroy() {
+      this.lazy && this.removeLazyLoadListener();
+    },
+
+    methods: {
+      loadImage() {
+        if (this.$isServer) return;
+
+        // reset status
+        this.loading = true;
+        this.error = false;
+
+        const img = new Image();
+        img.onload = e => this.handleLoad(e, img);
+        img.onerror = this.handleError.bind(this);
+
+        // bind html attrs
+        // so it can behave consistently
+        Object.keys(this.$attrs)
+          .forEach((key) => {
+            const value = this.$attrs[key];
+            img.setAttribute(key, value);
+          });
+        img.src = this.src;
+      },
+      handleLoad(e, img) {
+        this.imageWidth = img.width;
+        this.imageHeight = img.height;
+        this.loading = false;
+      },
+      handleError(e) {
+        this.loading = false;
+        this.error = true;
+        this.$emit('error', e);
+      },
+      handleLazyLoad() {
+        if (isInContainer(this.$el, this._scrollContainer)) {
+          this.show = true;
+          this.removeLazyLoadListener();
+        }
+      },
+      addLazyLoadListener() {
+        if (this.$isServer) return;
+
+        const { scrollContainer } = this;
+        let _scrollContainer = null;
+
+        if (isHtmlElement(scrollContainer)) {
+          _scrollContainer = scrollContainer;
+        } else if (isString(scrollContainer)) {
+          _scrollContainer = document.querySelector(scrollContainer);
+        } else {
+          _scrollContainer = getScrollContainer(this.$el);
+        }
+
+        if (_scrollContainer) {
+          this._scrollContainer = _scrollContainer;
+          this._lazyLoadHandler = throttle(200, this.handleLazyLoad);
+          on(_scrollContainer, 'scroll', this._lazyLoadHandler);
+          this.handleLazyLoad();
+        }
+      },
+      removeLazyLoadListener() {
+        const { _scrollContainer, _lazyLoadHandler } = this;
+
+        if (this.$isServer || !_scrollContainer || !_lazyLoadHandler) return;
+
+        off(_scrollContainer, 'scroll', _lazyLoadHandler);
+        this._scrollContainer = null;
+        this._lazyLoadHandler = null;
+      },
+      /**
+       * simulate object-fit behavior to compatible with IE11 and other browsers which not support object-fit
+       */
+      getImageStyle(fit) {
+        const { imageWidth, imageHeight } = this;
+        const {
+          clientWidth: containerWidth,
+          clientHeight: containerHeight
+        } = this.$el;
+
+        if (!imageWidth || !imageHeight || !containerWidth || !containerHeight) return {};
+
+        const vertical = imageWidth / imageHeight < 1;
+
+        if (fit === ObjectFit.SCALE_DOWN) {
+          const isSmaller = imageWidth < containerWidth && imageHeight < containerHeight;
+          fit = isSmaller ? ObjectFit.NONE : ObjectFit.CONTAIN;
+        }
+
+        switch (fit) {
+          case ObjectFit.NONE:
+            return { width: 'auto', height: 'auto' };
+          case ObjectFit.CONTAIN:
+            return vertical ? { width: 'auto' } : { height: 'auto' };
+          case ObjectFit.COVER:
+            return vertical ? { height: 'auto' } : { width: 'auto' };
+          default:
+            return {};
+        }
+      },
+      clickHandler() {
+        // prevent body scroll
+        prevOverflow = document.body.style.overflow;
+        document.body.style.overflow = 'hidden';
+        this.showViewer = true;
+      },
+      closeViewer() {
+        document.body.style.overflow = prevOverflow;
+        this.showViewer = false;
+      }
+    }
+  };
+</script>
diff --git a/packages/infinite-scroll/index.js b/packages/infinite-scroll/index.js
new file mode 100644
index 00000000000..228bbba43fe
--- /dev/null
+++ b/packages/infinite-scroll/index.js
@@ -0,0 +1,8 @@
+import InfiniteScroll from './src/main.js';
+
+/* istanbul ignore next */
+InfiniteScroll.install = function(Vue) {
+  Vue.directive(InfiniteScroll.name, InfiniteScroll);
+};
+
+export default InfiniteScroll;
diff --git a/packages/infinite-scroll/src/main.js b/packages/infinite-scroll/src/main.js
new file mode 100644
index 00000000000..2942a22b48f
--- /dev/null
+++ b/packages/infinite-scroll/src/main.js
@@ -0,0 +1,150 @@
+import throttle from 'throttle-debounce/debounce';
+import {
+  isHtmlElement,
+  isFunction,
+  isUndefined,
+  isDefined
+} from 'element-ui/src/utils/types';
+import {
+  getScrollContainer
+} from 'element-ui/src/utils/dom';
+
+const getStyleComputedProperty = (element, property) => {
+  if (element === window) {
+    element = document.documentElement;
+  }
+
+  if (element.nodeType !== 1) {
+    return [];
+  }
+  // NOTE: 1 DOM access here
+  const css = window.getComputedStyle(element, null);
+  return property ? css[property] : css;
+};
+
+const entries = (obj) => {
+  return Object.keys(obj || {})
+    .map(key => ([key, obj[key]]));
+};
+
+const getPositionSize = (el, prop) => {
+  return el === window || el === document
+    ? document.documentElement[prop]
+    : el[prop];
+};
+
+const getOffsetHeight = el => {
+  return getPositionSize(el, 'offsetHeight');
+};
+
+const getClientHeight = el => {
+  return getPositionSize(el, 'clientHeight');
+};
+
+const scope = 'ElInfiniteScroll';
+const attributes = {
+  delay: {
+    type: Number,
+    default: 200
+  },
+  distance: {
+    type: Number,
+    default: 0
+  },
+  disabled: {
+    type: Boolean,
+    default: false
+  },
+  immediate: {
+    type: Boolean,
+    default: true
+  }
+};
+
+const getScrollOptions = (el, vm) => {
+  if (!isHtmlElement(el)) return {};
+
+  return entries(attributes).reduce((map, [key, option]) => {
+    const { type, default: defaultValue } = option;
+    let value = el.getAttribute(`infinite-scroll-${key}`);
+    value = isUndefined(vm[value]) ? value : vm[value];
+    switch (type) {
+      case Number:
+        value = Number(value);
+        value = Number.isNaN(value) ? defaultValue : value;
+        break;
+      case Boolean:
+        value = isDefined(value) ? value === 'false' ? false : Boolean(value) : defaultValue;
+        break;
+      default:
+        value = type(value);
+    }
+    map[key] = value;
+    return map;
+  }, {});
+};
+
+const getElementTop = el => el.getBoundingClientRect().top;
+
+const handleScroll = function(cb) {
+  const { el, vm, container, observer } = this[scope];
+  const { distance, disabled } = getScrollOptions(el, vm);
+
+  if (disabled) return;
+
+  const containerInfo = container.getBoundingClientRect();
+  if (!containerInfo.width && !containerInfo.height) return;
+
+  let shouldTrigger = false;
+
+  if (container === el) {
+    // be aware of difference between clientHeight & offsetHeight & window.getComputedStyle().height
+    const scrollBottom = container.scrollTop + getClientHeight(container);
+    shouldTrigger = container.scrollHeight - scrollBottom <= distance;
+  } else {
+    const heightBelowTop = getOffsetHeight(el) + getElementTop(el) - getElementTop(container);
+    const offsetHeight = getOffsetHeight(container);
+    const borderBottom = Number.parseFloat(getStyleComputedProperty(container, 'borderBottomWidth'));
+    shouldTrigger = heightBelowTop - offsetHeight + borderBottom <= distance;
+  }
+
+  if (shouldTrigger && isFunction(cb)) {
+    cb.call(vm);
+  } else if (observer) {
+    observer.disconnect();
+    this[scope].observer = null;
+  }
+
+};
+
+export default {
+  name: 'InfiniteScroll',
+  inserted(el, binding, vnode) {
+    const cb = binding.value;
+
+    const vm = vnode.context;
+    // only include vertical scroll
+    const container = getScrollContainer(el, true);
+    const { delay, immediate } = getScrollOptions(el, vm);
+    const onScroll = throttle(delay, handleScroll.bind(el, cb));
+
+    el[scope] = { el, vm, container, onScroll };
+
+    if (container) {
+      container.addEventListener('scroll', onScroll);
+
+      if (immediate) {
+        const observer = el[scope].observer = new MutationObserver(onScroll);
+        observer.observe(container, { childList: true, subtree: true });
+        onScroll();
+      }
+    }
+  },
+  unbind(el) {
+    const { container, onScroll } = el[scope];
+    if (container) {
+      container.removeEventListener('scroll', onScroll);
+    }
+  }
+};
+
diff --git a/packages/input-email/index.js b/packages/input-email/index.js
new file mode 100644
index 00000000000..c49acb1c261
--- /dev/null
+++ b/packages/input-email/index.js
@@ -0,0 +1,8 @@
+import InputEmail from './src/main';
+
+/* istanbul ignore next */
+InputEmail.install = function(Vue) {
+  Vue.component(InputEmail.name, InputEmail);
+};
+
+export default InputEmail;
diff --git a/packages/input-email/src/email-list.js b/packages/input-email/src/email-list.js
new file mode 100644
index 00000000000..925ec7e79e1
--- /dev/null
+++ b/packages/input-email/src/email-list.js
@@ -0,0 +1,16 @@
+export default [
+  'gmail.com',
+  'qq.com',
+  '126.com',
+  '163.com',
+  'outlook.com',
+  'hotmail.com',
+  '263.com',
+  '21cn.com',
+  'yahoo.com',
+  'yahoo.com.cn',
+  'live.com',
+  'sohu.com',
+  'sina.com',
+  'sina.com.cn'
+];
diff --git a/packages/input-email/src/main.vue b/packages/input-email/src/main.vue
new file mode 100644
index 00000000000..67e5705ab06
--- /dev/null
+++ b/packages/input-email/src/main.vue
@@ -0,0 +1,74 @@
+<template>
+  <el-autocomplete
+    type="email"
+    class="el-input-email"
+    v-bind="$attrs"
+    v-on="$listeners"
+    :value="value"
+    :placeholder="placeholder"
+    :fetch-suggestions="getSuggestions"
+    highlight-first-item
+    hide-loading
+  />
+</template>
+
+<script>
+import defaultEmailList from './email-list.js';
+const emailReg = /^[\w-]+@[\w-]+(\.[\w-]+)+$/;
+export default {
+  name: 'ElInputEmail',
+  rules: [
+    {
+      pattern: emailReg,
+      message: '请输入正确的邮箱地址',
+      trigger: 'blur'
+    }
+  ],
+  props: {
+    /**
+     * 提示补全的邮箱列表
+     */
+    emailList: {
+      type: Array,
+      default() {
+        return defaultEmailList;
+      }
+    },
+    /**
+     * 占位文本
+     */
+    placeholder: {
+      type: String,
+      default: '请输入邮箱地址'
+    },
+    /**
+     * 输入邮箱
+     */
+    value: {
+      type: String,
+      required: true
+    }
+  },
+  methods: {
+    getSuggestions(input, cb) {
+      if (!input.length) return cb([]);
+
+      const i = input.indexOf('@');
+      let suggestions;
+      if (i === -1) {
+        suggestions = this.emailList.map(server => ({
+          value: input + '@' + server
+        }));
+      } else {
+        const right = input.slice(i + 1);
+        suggestions = this.emailList
+          .filter(server => server.startsWith(right))
+          .map(server => ({
+            value: input.slice(0, i + 1) + server
+          }));
+      }
+      cb(suggestions);
+    }
+  }
+};
+</script>
diff --git a/packages/input-id-card/index.js b/packages/input-id-card/index.js
new file mode 100644
index 00000000000..411923055e2
--- /dev/null
+++ b/packages/input-id-card/index.js
@@ -0,0 +1,8 @@
+import InputIdCard from './src/main';
+
+/* istanbul ignore next */
+InputIdCard.install = function(Vue) {
+  Vue.component(InputIdCard.name, InputIdCard);
+};
+
+export default InputIdCard;
diff --git a/packages/input-id-card/src/is-id-card.js b/packages/input-id-card/src/is-id-card.js
new file mode 100644
index 00000000000..141c0609be7
--- /dev/null
+++ b/packages/input-id-card/src/is-id-card.js
@@ -0,0 +1,15 @@
+/**
+ * 旧版身份证 15位, 1999年开始强制实施新标准, 18位身份证, 多了2位年份(解决千年虫问题), 1位检验位
+ * 18 位格式如下
+ * AAAAAA YYYY MM DD NNS C
+ * 前6位是 行政区划分代码 http://www.mca.gov.cn/article/sj/xzqh/2018/
+ * 中间8位是 出生日期码 YYYY 代表年, MM 与 DD 分别代表 月 与 年, 高位不足则补0
+ * 倒数后3位 是顺序码, 给同地址码同出生日期码的人编定的顺序. N 代表0-9的数字, S 表示性别, 奇数给男性, 偶数给女性. 即某地某年某月某日第一个出生的男性顺序码为: 001
+ * 最后1位 是校验码. 0-10, 其中10用罗马数字X表示
+ *
+ * 计算方法 https://zh.wikipedia.org/wiki/%E4%B8%AD%E5%8D%8E%E4%BA%BA%E6%B0%91%E5%85%B1%E5%92%8C%E5%9B%BD%E5%85%AC%E6%B0%91%E8%BA%AB%E4%BB%BD%E5%8F%B7%E7%A0%81#%E6%A0%A1%E9%AA%8C%E7%A0%81%E8%AE%A1%E7%AE%97%E6%96%B9%E6%B3%95
+ */
+const idCard = /^((1[1-5])|(2[1-3])|(3[1-7])|(4[1-6])|(5[0-4])|(6[1-5])|71|(8[12]))\d{4}(((19\d{2}|[2-9]\d{3})(0[13-9]|1[012])(0[1-9]|[12]\d|30))|((19\d{2}|[2-9]\d{3})(0[13578]|1[02])31)|((19\d{2}|[2-9]\d{3})02(0[1-9]|1\d|2[0-8]))|(19([13579][26]|[2468][048]|0[48])0229))\d{3}(\d|X)$|^[1-9]\d{7}((0\d)|(1[0-2]))(([012]\d)|3[0-1])\d{3}$/;
+export default function(value) {
+  return idCard.test(value);
+};
diff --git a/packages/input-id-card/src/main.vue b/packages/input-id-card/src/main.vue
new file mode 100644
index 00000000000..bf53e4039b8
--- /dev/null
+++ b/packages/input-id-card/src/main.vue
@@ -0,0 +1,71 @@
+<template>
+  <el-input
+    class="el-input-id-card"
+    type="text"
+    :maxlength="valueLen"
+    :placeholder="placeholder"
+    v-bind="attrs"
+    v-on="$listeners"
+    :value="value"
+    @input="handleInput"
+  ></el-input>
+</template>
+
+<script>
+import isIDCard from './is-id-card.js';
+
+const validateIdCard = (rule, value, callback) => {
+  if (!value) {
+    return callback(new Error('请输入身份证号'));
+  }
+  if (isIDCard(value)) {
+    callback();
+  } else {
+    callback(new Error('请输入正确的身份证号'));
+  }
+};
+export default {
+  name: 'ElInputIdCard',
+
+  props: {
+    value: {
+      type: String,
+      required: true
+    },
+
+    placeholder: {
+      type: String,
+      default: '请输入身份证号'
+    }
+  },
+
+  data() {
+    return {
+      valueLen: 18
+    };
+  },
+
+  computed: {
+    attrs() {
+      const { ...rest } = this.$attrs;
+      delete rest.type;
+      delete rest.maxlength;
+      return rest;
+    }
+  },
+
+  rules: [
+    { required: true, message: '请输入身份证号', trigger: 'blur' },
+    {
+      validator: validateIdCard,
+      trigger: 'blur'
+    }
+  ],
+
+  methods: {
+    handleInput(value) {
+      this.$emit('input', value);
+    }
+  }
+};
+</script>
diff --git a/packages/input-number/src/input-number.vue b/packages/input-number/src/input-number.vue
index 91e6bdf1b28..1d2294ca7a5 100644
--- a/packages/input-number/src/input-number.vue
+++ b/packages/input-number/src/input-number.vue
@@ -28,7 +28,7 @@
     </span>
     <el-input
       ref="input"
-      :value="currentInputValue"
+      :value="displayValue"
       :placeholder="placeholder"
       :disabled="inputNumberDisabled"
       :size="inputNumberSize"
@@ -40,6 +40,7 @@
       @keydown.down.native.prevent="decrease"
       @blur="handleBlur"
       @focus="handleFocus"
+      @input="handleInput"
       @change="handleInputChange">
     </el-input>
   </div>
@@ -71,6 +72,10 @@
         type: Number,
         default: 1
       },
+      stepStrictly: {
+        type: Boolean,
+        default: false
+      },
       max: {
         type: Number,
         default: Infinity
@@ -102,7 +107,8 @@
     },
     data() {
       return {
-        currentValue: 0
+        currentValue: 0,
+        userInput: null
       };
     },
     watch: {
@@ -114,6 +120,13 @@
             if (isNaN(newVal)) {
               return;
             }
+
+            if (this.stepStrictly) {
+              const stepPrecision = this.getPrecision(this.step);
+              const precisionFactor = Math.pow(10, stepPrecision);
+              newVal = Math.round(newVal / this.step) * precisionFactor * this.step / precisionFactor;
+            }
+
             if (this.precision !== undefined) {
               newVal = this.toPrecision(newVal, this.precision);
             }
@@ -121,6 +134,7 @@
           if (newVal >= this.max) newVal = this.max;
           if (newVal <= this.min) newVal = this.min;
           this.currentValue = newVal;
+          this.userInput = null;
           this.$emit('input', newVal);
         }
       }
@@ -156,19 +170,32 @@
       inputNumberDisabled() {
         return this.disabled || (this.elForm || {}).disabled;
       },
-      currentInputValue() {
-        const currentValue = this.currentValue;
-        if (typeof currentValue === 'number' && this.precision !== undefined) {
-          return currentValue.toFixed(this.precision);
-        } else {
-          return currentValue;
+      displayValue() {
+        if (this.userInput !== null) {
+          return this.userInput;
         }
+
+        let currentValue = this.currentValue;
+
+        if (typeof currentValue === 'number') {
+          if (this.stepStrictly) {
+            const stepPrecision = this.getPrecision(this.step);
+            const precisionFactor = Math.pow(10, stepPrecision);
+            currentValue = Math.round(currentValue / this.step) * precisionFactor * this.step / precisionFactor;
+          }
+
+          if (this.precision !== undefined) {
+            currentValue = currentValue.toFixed(this.precision);
+          }
+        }
+
+        return currentValue;
       }
     },
     methods: {
       toPrecision(num, precision) {
         if (precision === undefined) precision = this.numPrecision;
-        return parseFloat(parseFloat(Number(num).toFixed(precision)));
+        return parseFloat(Math.round(num * Math.pow(10, precision)) / Math.pow(10, precision));
       },
       getPrecision(value) {
         if (value === undefined) return 0;
@@ -208,7 +235,6 @@
       },
       handleBlur(event) {
         this.$emit('blur', event);
-        this.$refs.input.setCurrentValue(this.currentInputValue);
       },
       handleFocus(event) {
         this.$emit('focus', event);
@@ -220,19 +246,21 @@
         }
         if (newVal >= this.max) newVal = this.max;
         if (newVal <= this.min) newVal = this.min;
-        if (oldVal === newVal) {
-          this.$refs.input.setCurrentValue(this.currentInputValue);
-          return;
-        }
+        if (oldVal === newVal) return;
+        this.userInput = null;
         this.$emit('input', newVal);
         this.$emit('change', newVal, oldVal);
         this.currentValue = newVal;
       },
+      handleInput(value) {
+        this.userInput = value;
+      },
       handleInputChange(value) {
         const newVal = value === '' ? undefined : Number(value);
         if (!isNaN(newVal) || value === '') {
           this.setCurrentValue(newVal);
         }
+        this.userInput = null;
       },
       select() {
         this.$refs.input.select();
diff --git a/packages/input-phone/index.js b/packages/input-phone/index.js
new file mode 100644
index 00000000000..99e1894f258
--- /dev/null
+++ b/packages/input-phone/index.js
@@ -0,0 +1,8 @@
+import InputPhone from './src/main';
+
+/* istanbul ignore next */
+InputPhone.install = function(Vue) {
+  Vue.component(InputPhone.name, InputPhone);
+};
+
+export default InputPhone;
diff --git a/packages/input-phone/src/const.js b/packages/input-phone/src/const.js
new file mode 100644
index 00000000000..5d28a4754f0
--- /dev/null
+++ b/packages/input-phone/src/const.js
@@ -0,0 +1,11 @@
+const cellRegEx = /^1\d{10}$/;
+const cellRegExPrefix = /^(1)[0-9]{10}$/;
+
+export const areaGroup = {
+  china: {
+    code: '+86',
+    regEx: cellRegEx,
+    regExPrefix: cellRegExPrefix,
+    max: 11
+  }
+};
diff --git a/packages/input-phone/src/main.vue b/packages/input-phone/src/main.vue
new file mode 100644
index 00000000000..8828bdcadef
--- /dev/null
+++ b/packages/input-phone/src/main.vue
@@ -0,0 +1,72 @@
+<template>
+  <!-- number 多用于数量累加之类操作，而且 tel 有对应软键盘适配 -->
+  <el-input
+    type="tel"
+    class="el-input-phone"
+    v-bind="$attrs"
+    v-on="$listeners"
+    :value="value"
+    :placeholder="placeholder"
+    @input="handleInput"
+  />
+</template>
+
+<script>
+import {areaGroup} from './const.js';
+
+const ElInputPhone = {
+  name: 'ElInputPhone',
+  props: {
+    /**
+     * 手机号码
+     */
+    value: {
+      type: String
+    },
+    /**
+     * 占位文本
+     */
+    placeholder: {
+      type: String,
+      default: '请输入手机号码'
+    }
+  },
+  data() {
+    return {
+      isError: false
+    };
+  },
+  rules: [
+    {
+      validator(rule, value, callback) {
+        if (!areaGroup.china.regEx.test(value)) {
+          callback('请输入正确的手机号码');
+          return false;
+        }
+        return true;
+      },
+      trigger: 'blur'
+    }
+  ],
+  methods: {
+    handleInput(value) {
+      // 只能输出数字
+      const newValue = value.replace(/[^\d]/g, '');
+      if (!newValue.length) {
+        this.emitInput('');
+        return;
+      }
+      this.emitInput(newValue);
+    },
+    emitInput(value) {
+      /**
+       * 配合v-model使用
+       */
+      this.$emit('input', value);
+    }
+  }
+};
+
+export default ElInputPhone;
+
+</script>
diff --git a/packages/input-url/index.js b/packages/input-url/index.js
new file mode 100644
index 00000000000..997ff5b64dd
--- /dev/null
+++ b/packages/input-url/index.js
@@ -0,0 +1,8 @@
+import InputUrl from './src/main';
+
+/* istanbul ignore next */
+InputUrl.install = function(Vue) {
+  Vue.component(InputUrl.name, InputUrl);
+};
+
+export default InputUrl;
diff --git a/packages/input-url/src/main.vue b/packages/input-url/src/main.vue
new file mode 100644
index 00000000000..24fcec371cd
--- /dev/null
+++ b/packages/input-url/src/main.vue
@@ -0,0 +1,38 @@
+<template>
+  <el-input
+    class="el-input-url"
+    :value="value"
+    :placeholder="placeholder"
+    v-bind="$attrs"
+    v-on="$listeners"
+  />
+</template>
+
+<script>
+export default {
+  name: 'ElInputUrl',
+  rules: [
+    {
+      type: 'url',
+      message: '请输入正确的 URL 地址',
+      trigger: 'blur'
+    }
+  ],
+  props: {
+    /**
+     * @model
+     */
+    value: {
+      type: String,
+      default: ''
+    },
+    /**
+     * 输入框占位符
+     */
+    placeholder: {
+      type: String,
+      default: '请输入 URL 地址'
+    }
+  }
+};
+</script>
diff --git a/packages/input/src/input.vue b/packages/input/src/input.vue
index 5c3254ba700..3c54eab6da9 100644
--- a/packages/input/src/input.vue
+++ b/packages/input/src/input.vue
@@ -4,11 +4,12 @@
     inputSize ? 'el-input--' + inputSize : '',
     {
       'is-disabled': inputDisabled,
+      'is-exceed': inputExceed,
       'el-input-group': $slots.prepend || $slots.append,
       'el-input-group--append': $slots.append,
       'el-input-group--prepend': $slots.prepend,
       'el-input--prefix': $slots.prefix || prefixIcon,
-      'el-input--suffix': $slots.suffix || suffixIcon || clearable
+      'el-input--suffix': $slots.suffix || suffixIcon || clearable || showPassword
     }
     ]"
     @mouseenter="hovering = true"
@@ -24,15 +25,14 @@
         v-if="type !== 'textarea'"
         class="el-input__inner"
         v-bind="$attrs"
-        :type="type"
+        :type="showPassword ? (passwordVisible ? 'text': 'password') : type"
         :disabled="inputDisabled"
         :readonly="readonly"
         :autocomplete="autoComplete || autocomplete"
-        :value="currentValue"
         ref="input"
-        @compositionstart="handleComposition"
-        @compositionupdate="handleComposition"
-        @compositionend="handleComposition"
+        @compositionstart="handleCompositionStart"
+        @compositionupdate="handleCompositionUpdate"
+        @compositionend="handleCompositionEnd"
         @input="handleInput"
         @focus="handleFocus"
         @blur="handleBlur"
@@ -50,19 +50,29 @@
       <!-- 后置内容 -->
       <span
         class="el-input__suffix"
-        v-if="$slots.suffix || suffixIcon || showClear || validateState && needStatusIcon">
+        v-if="getSuffixVisible()">
         <span class="el-input__suffix-inner">
-          <template v-if="!showClear">
+          <template v-if="!showClear || !showPwdVisible || !isWordLimitVisible">
             <slot name="suffix"></slot>
             <i class="el-input__icon"
               v-if="suffixIcon"
               :class="suffixIcon">
             </i>
           </template>
-          <i v-else
+          <i v-if="showClear"
             class="el-input__icon el-icon-circle-close el-input__clear"
+            @mousedown.prevent
             @click="clear"
           ></i>
+          <i v-if="showPwdVisible"
+            class="el-input__icon el-icon-view el-input__clear"
+            @click="handlePasswordVisible"
+          ></i>
+          <span v-if="isWordLimitVisible" class="el-input__count">
+            <span class="el-input__count-inner">
+              {{ textLength }}/{{ upperLimit }}
+            </span>
+          </span>
         </span>
         <i class="el-input__icon"
           v-if="validateState"
@@ -78,10 +88,10 @@
       v-else
       :tabindex="tabindex"
       class="el-textarea__inner"
-      :value="currentValue"
-      @compositionstart="handleComposition"
-      @compositionupdate="handleComposition"
-      @compositionend="handleComposition"
+      :class="{'el-textarea__count': isWordLimitVisible}"
+      @compositionstart="handleCompositionStart"
+      @compositionupdate="handleCompositionUpdate"
+      @compositionend="handleCompositionEnd"
       @input="handleInput"
       ref="textarea"
       v-bind="$attrs"
@@ -95,6 +105,7 @@
       :aria-label="label"
     >
     </textarea>
+    <span v-if="isWordLimitVisible && type === 'textarea'" class="el-input__count">{{ textLength }}/{{ upperLimit }}</span>
   </div>
 </template>
 <script>
@@ -102,7 +113,7 @@
   import Migrating from 'element-ui/src/mixins/migrating';
   import calcTextareaHeight from './calcTextareaHeight';
   import merge from 'element-ui/src/utils/merge';
-  import { isKorean } from 'element-ui/src/utils/shared';
+  import {isKorean} from 'element-ui/src/utils/shared';
 
   export default {
     name: 'ElInput',
@@ -124,14 +135,11 @@
 
     data() {
       return {
-        currentValue: this.value === undefined || this.value === null
-          ? ''
-          : this.value,
         textareaCalcStyle: {},
         hovering: false,
         focused: false,
-        isOnComposition: false,
-        valueBeforeComposition: null
+        isComposing: false,
+        passwordVisible: false
       };
     },
 
@@ -174,6 +182,14 @@
         type: Boolean,
         default: false
       },
+      showPassword: {
+        type: Boolean,
+        default: false
+      },
+      showWordLimit: {
+        type: Boolean,
+        default: false
+      },
       tabindex: String
     },
 
@@ -203,27 +219,78 @@
       inputDisabled() {
         return this.disabled || (this.elForm || {}).disabled;
       },
+      nativeInputValue() {
+        return this.value === null || this.value === undefined ? '' : String(this.value);
+      },
       showClear() {
         return this.clearable &&
           !this.inputDisabled &&
           !this.readonly &&
-          this.currentValue !== '' &&
+          this.nativeInputValue &&
           (this.focused || this.hovering);
+      },
+      showPwdVisible() {
+        return this.showPassword &&
+          !this.inputDisabled &&
+          !this.readonly &&
+          (!!this.nativeInputValue || this.focused);
+      },
+      isWordLimitVisible() {
+        return this.showWordLimit &&
+          this.$attrs.maxlength &&
+          (this.type === 'text' || this.type === 'textarea') &&
+          !this.inputDisabled &&
+          !this.readonly &&
+          !this.showPassword;
+      },
+      upperLimit() {
+        return this.$attrs.maxlength;
+      },
+      textLength() {
+        if (typeof this.value === 'number') {
+          return String(this.value).length;
+        }
+
+        return (this.value || '').length;
+      },
+      inputExceed() {
+        // show exceed style if length of initial value greater then maxlength
+        return this.isWordLimitVisible &&
+          (this.textLength > this.upperLimit);
       }
     },
 
     watch: {
-      value(val, oldValue) {
-        this.setCurrentValue(val);
+      value(val) {
+        this.$nextTick(this.resizeTextarea);
+        if (this.validateEvent) {
+          this.dispatch('ElFormItem', 'el.form.change', [val]);
+        }
+      },
+      // native input value is set explicitly
+      // do not use v-model / :value in template
+      // see: https://github.com/ElemeFE/element/issues/14521
+      nativeInputValue() {
+        this.setNativeInputValue();
+      },
+      // when change between <input> and <textarea>,
+      // update DOM dependent value and styles
+      // https://github.com/ElemeFE/element/issues/14857
+      type() {
+        this.$nextTick(() => {
+          this.setNativeInputValue();
+          this.resizeTextarea();
+          this.updateIconOffset();
+        });
       }
     },
 
     methods: {
       focus() {
-        (this.$refs.input || this.$refs.textarea).focus();
+        this.getInput().focus();
       },
       blur() {
-        (this.$refs.input || this.$refs.textarea).blur();
+        this.getInput().blur();
       },
       getMigratingConfig() {
         return {
@@ -240,11 +307,11 @@
         this.focused = false;
         this.$emit('blur', event);
         if (this.validateEvent) {
-          this.dispatch('ElFormItem', 'el.form.blur', [this.currentValue]);
+          this.dispatch('ElFormItem', 'el.form.blur', [this.value]);
         }
       },
       select() {
-        (this.$refs.input || this.$refs.textarea).select();
+        this.getInput().select();
       },
       resizeTextarea() {
         if (this.$isServer) return;
@@ -261,43 +328,48 @@
 
         this.textareaCalcStyle = calcTextareaHeight(this.$refs.textarea, minRows, maxRows);
       },
+      setNativeInputValue() {
+        const input = this.getInput();
+        if (!input) return;
+        if (input.value === this.nativeInputValue) return;
+        input.value = this.nativeInputValue;
+      },
       handleFocus(event) {
         this.focused = true;
         this.$emit('focus', event);
       },
-      handleComposition(event) {
-        if (event.type === 'compositionend') {
-          this.isOnComposition = false;
-          this.currentValue = this.valueBeforeComposition;
-          this.valueBeforeComposition = null;
+      handleCompositionStart() {
+        this.isComposing = true;
+      },
+      handleCompositionUpdate(event) {
+        const text = event.target.value;
+        const lastCharacter = text[text.length - 1] || '';
+        this.isComposing = !isKorean(lastCharacter);
+      },
+      handleCompositionEnd(event) {
+        if (this.isComposing) {
+          this.isComposing = false;
           this.handleInput(event);
-        } else {
-          const text = event.target.value;
-          const lastCharacter = text[text.length - 1] || '';
-          this.isOnComposition = !isKorean(lastCharacter);
-          if (this.isOnComposition && event.type === 'compositionstart') {
-            this.valueBeforeComposition = text;
-          }
         }
       },
       handleInput(event) {
-        const value = event.target.value;
-        this.setCurrentValue(value);
-        if (this.isOnComposition) return;
-        this.$emit('input', value);
+        // should not emit input during composition
+        // see: https://github.com/ElemeFE/element/issues/10516
+        if (this.isComposing) return;
+
+        // hack for https://github.com/ElemeFE/element/issues/8548
+        // should remove the following line when we don't support IE
+        if (event.target.value === this.nativeInputValue) return;
+
+        this.$emit('input', event.target.value);
+
+        // ensure native input value is controlled
+        // see: https://github.com/ElemeFE/element/issues/12850
+        this.$nextTick(this.setNativeInputValue);
       },
       handleChange(event) {
         this.$emit('change', event.target.value);
       },
-      setCurrentValue(value) {
-        if (this.isOnComposition && value === this.valueBeforeComposition) return;
-        this.currentValue = value;
-        if (this.isOnComposition) return;
-        this.$nextTick(this.resizeTextarea);
-        if (this.validateEvent && this.currentValue === this.value) {
-          this.dispatch('ElFormItem', 'el.form.change', [value]);
-        }
-      },
       calcIconOffset(place) {
         let elList = [].slice.call(this.$el.querySelectorAll(`.el-input__${place}`) || []);
         if (!elList.length) return;
@@ -329,7 +401,21 @@
         this.$emit('input', '');
         this.$emit('change', '');
         this.$emit('clear');
-        this.setCurrentValue('');
+      },
+      handlePasswordVisible() {
+        this.passwordVisible = !this.passwordVisible;
+        this.focus();
+      },
+      getInput() {
+        return this.$refs.input || this.$refs.textarea;
+      },
+      getSuffixVisible() {
+        return this.$slots.suffix ||
+          this.suffixIcon ||
+          this.showClear ||
+          this.showPassword ||
+          this.isWordLimitVisible ||
+          (this.validateState && this.needStatusIcon);
       }
     },
 
@@ -338,6 +424,7 @@
     },
 
     mounted() {
+      this.setNativeInputValue();
       this.resizeTextarea();
       this.updateIconOffset();
     },
diff --git a/packages/link/index.js b/packages/link/index.js
new file mode 100644
index 00000000000..7caa97cd4e5
--- /dev/null
+++ b/packages/link/index.js
@@ -0,0 +1,8 @@
+import Link from './src/main';
+
+/* istanbul ignore next */
+Link.install = function(Vue) {
+  Vue.component(Link.name, Link);
+};
+
+export default Link;
diff --git a/packages/link/src/main.vue b/packages/link/src/main.vue
new file mode 100644
index 00000000000..b5283cc6efc
--- /dev/null
+++ b/packages/link/src/main.vue
@@ -0,0 +1,53 @@
+<template>
+  <a
+    :class="[
+      'el-link',
+      type ? `el-link--${type}` : '',
+      disabled && 'is-disabled',
+      underline && !disabled && 'is-underline'
+    ]"
+    :href="disabled ? null : href"
+    v-bind="$attrs"
+    @click="handleClick"
+  >
+
+    <i :class="icon" v-if="icon"></i>
+
+    <span v-if="$slots.default" class="el-link--inner">
+      <slot></slot>
+    </span>
+
+    <template v-if="$slots.icon"><slot v-if="$slots.icon" name="icon"></slot></template>
+  </a>
+</template>
+
+<script>
+
+export default {
+  name: 'ElLink',
+
+  props: {
+    type: {
+      type: String,
+      default: 'default'
+    },
+    underline: {
+      type: Boolean,
+      default: true
+    },
+    disabled: Boolean,
+    href: String,
+    icon: String
+  },
+
+  methods: {
+    handleClick(event) {
+      if (!this.disabled) {
+        if (!this.href) {
+          this.$emit('click', event);
+        }
+      }
+    }
+  }
+};
+</script>
diff --git a/packages/loading-button/index.js b/packages/loading-button/index.js
new file mode 100644
index 00000000000..17c35b9504e
--- /dev/null
+++ b/packages/loading-button/index.js
@@ -0,0 +1,8 @@
+import LoadingButton from './src/main';
+
+/* istanbul ignore next */
+LoadingButton.install = function(Vue) {
+  Vue.component(LoadingButton.name, LoadingButton);
+};
+
+export default LoadingButton;
diff --git a/packages/loading-button/src/main.vue b/packages/loading-button/src/main.vue
new file mode 100644
index 00000000000..0d6b74728b4
--- /dev/null
+++ b/packages/loading-button/src/main.vue
@@ -0,0 +1,63 @@
+<template>
+  <el-button 
+    class="el-loading-button"
+    v-on="$listeners"
+    v-bind="$attrs"
+    :loading="selfLoading"
+    @click.stop.prevent="handleClick"
+  >
+    <slot></slot>
+  </el-button>
+</template>
+
+<script>
+import ElButton from 'element-ui/packages/button';
+
+export default {
+  name: 'ElLoadingButton',
+
+  inject: {
+    elForm: {
+      default: ''
+    },
+    elFormItem: {
+      default: ''
+    }
+  },
+
+  props: {
+    loading: Boolean,
+    loadingClick: {
+      type: Function,
+      required: true
+    }
+  },
+
+  data() {
+    return {
+      selfLoading: this.loading
+    };
+  },
+
+  watch: {
+    loading(val) {
+      this.selfLoading = val;
+    }
+  },
+
+  components: {
+    ElButton
+  },
+
+  methods: {
+    handleClick(evt) {
+      this.selfLoading = true;
+      window.Promise.resolve(this.loadingClick(evt))
+        .catch(e => {})
+        .finally(e => {
+          this.selfLoading = false;
+        });
+    }
+  }
+};
+</script>
diff --git a/packages/loading/src/directive.js b/packages/loading/src/directive.js
index e96237ea0ee..f4400feb65c 100644
--- a/packages/loading/src/directive.js
+++ b/packages/loading/src/directive.js
@@ -45,6 +45,7 @@ loadingDirective.install = Vue => {
       });
     } else {
       afterLeave(el.instance, _ => {
+        if (!el.instance.hiding) return;
         el.domVisible = false;
         const target = binding.modifiers.fullscreen || binding.modifiers.body
           ? document.body
@@ -80,6 +81,9 @@ loadingDirective.install = Vue => {
         }
       });
       el.domInserted = true;
+    } else if (el.domVisible && el.instance.hiding === true) {
+      el.instance.visible = true;
+      el.instance.hiding = false;
     }
   };
 
@@ -121,6 +125,7 @@ loadingDirective.install = Vue => {
         el.mask.parentNode.removeChild(el.mask);
         toggleLoading(el, { value: false, modifiers: binding.modifiers });
       }
+      el.instance && el.instance.$destroy();
     }
   });
 };
diff --git a/packages/lr-container/index.js b/packages/lr-container/index.js
new file mode 100644
index 00000000000..547c4e947e7
--- /dev/null
+++ b/packages/lr-container/index.js
@@ -0,0 +1,8 @@
+import LrContainer from './src/main';
+
+/* istanbul ignore next */
+LrContainer.install = function(Vue) {
+  Vue.component(LrContainer.name, LrContainer);
+};
+
+export default LrContainer;
diff --git a/packages/lr-container/src/main.vue b/packages/lr-container/src/main.vue
new file mode 100644
index 00000000000..3b4a79487ce
--- /dev/null
+++ b/packages/lr-container/src/main.vue
@@ -0,0 +1,75 @@
+<template>
+  <div :class="['el-lr-container', border && 'is-bordered']" >
+    <div class="el-lr-container-aside el-aside-border-right">
+      <el-scrollbar>
+        <div class="el-lr-container-aside-content" ref="aside-content">
+          <slot name="aside"></slot>
+        </div>
+      </el-scrollbar>
+    </div>
+    <div class="el-lr-container-main">
+      <el-scrollbar>
+        <div class="el-lr-container-main-content" ref="main-content">
+          <slot name="main"></slot>
+        </div>
+      </el-scrollbar>
+    </div>
+  </div>
+</template>
+
+<script>
+import elScrollbar from 'element-ui/packages/scrollbar';
+export default {
+  name: 'ElLrContainer',
+  components: {
+    elScrollbar
+  },
+  props: {
+    border: Boolean,
+    asideWidth: [String, Number],
+    asideHeight: [String, Number],
+    mainHeight: [String, Number]
+  },
+  mounted() {
+    this.setStyle();
+  },
+  methods: {
+    parseHW(hw) {
+      if (typeof hw === 'number') {
+        return hw;
+      }
+      if (typeof hw === 'string') {
+        if (/^\d+(?:px)?$/.test(hw)) {
+          return parseInt(hw, 10);
+        } else {
+          return hw;
+        }
+      }
+      return null;
+    },
+    setStyle() {
+      const formatValue = (value)=> {
+        if (typeof value === 'number') {
+          value = value + 'px';
+        } else if (typeof value === 'string') {
+          value = value;
+        }
+        return value;
+      };
+      let value;
+      if (this.asideWidth) {
+        value = formatValue(this.parseHW(this.asideWidth));
+        this.$refs['aside-content'].style.width = value;
+      }
+      if (this.asideHeight) {
+        value = formatValue(this.parseHW(this.asideHeight));
+        this.$refs['aside-content'].style.height = value;
+      }
+      if (this.mainHeight) {
+        value = formatValue(this.parseHW(this.mainHeight));
+        this.$refs['main-content'].style.height = value;
+      }
+    }
+  }
+};
+</script>
diff --git a/packages/menu/src/menu-item.vue b/packages/menu/src/menu-item.vue
index a4e7aac617c..e53ec87e7e2 100644
--- a/packages/menu/src/menu-item.vue
+++ b/packages/menu/src/menu-item.vue
@@ -44,8 +44,8 @@
 
     props: {
       index: {
-        type: String,
-        required: true
+        default: null,
+        validator: val => typeof val === 'string' || val === null
       },
       route: [String, Object],
       disabled: Boolean
diff --git a/packages/menu/src/menu.vue b/packages/menu/src/menu.vue
index ca448e3c39c..645e5ac9527 100644
--- a/packages/menu/src/menu.vue
+++ b/packages/menu/src/menu.vue
@@ -139,7 +139,12 @@
       }
     },
     watch: {
-      defaultActive: 'updateActiveIndex',
+      defaultActive(value){
+        if(!this.items[value]){
+          this.activeIndex = null
+        }
+        this.updateActiveIndex(value)
+      },
 
       defaultOpeneds(value) {
         if (!this.collapse) {
@@ -251,18 +256,27 @@
       handleItemClick(item) {
         const { index, indexPath } = item;
         const oldActiveIndex = this.activeIndex;
+        const hasIndex = item.index !== null;
+
+        if (hasIndex) {
+          this.activeIndex = item.index;
+        }
 
-        this.activeIndex = item.index;
         this.$emit('select', index, indexPath, item);
 
         if (this.mode === 'horizontal' || this.collapse) {
           this.openedMenus = [];
         }
 
-        if (this.router) {
+        if (this.router && hasIndex) {
           this.routeToItem(item, (error) => {
             this.activeIndex = oldActiveIndex;
-            if (error) console.error(error);
+            if (error) {
+              // vue-router 3.1.0+ push/replace cause NavigationDuplicated error 
+              // https://github.com/ElemeFE/element/issues/17044
+              if (error.name === 'NavigationDuplicated') return
+              console.error(error)
+            }
           });
         }
       },
diff --git a/packages/menu/src/submenu.vue b/packages/menu/src/submenu.vue
index 37596693327..342e6c0457e 100644
--- a/packages/menu/src/submenu.vue
+++ b/packages/menu/src/submenu.vue
@@ -178,7 +178,11 @@
         }
         this.dispatch('ElMenu', 'submenu-click', this);
       },
-      handleMouseenter() {
+      handleMouseenter(event, showTimeout = this.showTimeout) {
+
+        if (!('ActiveXObject' in window) && event.type === 'focus' && !event.relatedTarget) {
+          return;
+        }
         const { rootMenu, disabled } = this;
         if (
           (rootMenu.menuTrigger === 'click' && rootMenu.mode === 'horizontal') ||
@@ -191,9 +195,13 @@
         clearTimeout(this.timeout);
         this.timeout = setTimeout(() => {
           this.rootMenu.openMenu(this.index, this.indexPath);
-        }, this.showTimeout);
+        }, showTimeout);
+
+        if (this.appendToBody) {
+          this.$parent.$el.dispatchEvent(new MouseEvent('mouseenter'));
+        }
       },
-      handleMouseleave() {
+      handleMouseleave(deepDispatch = false) {
         const {rootMenu} = this;
         if (
           (rootMenu.menuTrigger === 'click' && rootMenu.mode === 'horizontal') ||
@@ -206,6 +214,12 @@
         this.timeout = setTimeout(() => {
           !this.mouseInChild && this.rootMenu.closeMenu(this.index);
         }, this.hideTimeout);
+
+        if (this.appendToBody && deepDispatch) {
+          if (this.$parent.$options.name === 'ElSubmenu') {
+            this.$parent.handleMouseleave(true);
+          }
+        }
       },
       handleTitleMouseenter() {
         if (this.mode === 'horizontal' && !this.rootMenu.backgroundColor) return;
@@ -271,9 +285,9 @@
             ref="menu"
             v-show={opened}
             class={[`el-menu--${mode}`, popperClass]}
-            on-mouseenter={this.handleMouseenter}
-            on-mouseleave={this.handleMouseleave}
-            on-focus={this.handleMouseenter}>
+            on-mouseenter={($event) => this.handleMouseenter($event, 100)}
+            on-mouseleave={() => this.handleMouseleave(true)}
+            on-focus={($event) => this.handleMouseenter($event, 100)}>
             <ul
               role="menu"
               class={['el-menu el-menu--popup', `el-menu--popup-${currentPlacement}`]}
@@ -313,7 +327,7 @@
           aria-haspopup="true"
           aria-expanded={opened}
           on-mouseenter={this.handleMouseenter}
-          on-mouseleave={this.handleMouseleave}
+          on-mouseleave={() => this.handleMouseleave(false)}
           on-focus={this.handleMouseenter}
         >
           <div
diff --git a/packages/message-box-center/index.js b/packages/message-box-center/index.js
new file mode 100644
index 00000000000..5b7b8124d8c
--- /dev/null
+++ b/packages/message-box-center/index.js
@@ -0,0 +1,2 @@
+import MessageBoxCenter from './src/index.js';
+export default MessageBoxCenter;
diff --git a/packages/message-box-center/src/index.js b/packages/message-box-center/src/index.js
new file mode 100644
index 00000000000..98810bff7b9
--- /dev/null
+++ b/packages/message-box-center/src/index.js
@@ -0,0 +1,61 @@
+import MessageBox from 'element-ui/packages/message-box'; // eslint-disable-line
+import merge from 'element-ui/src/utils/merge';
+import deepmerge from 'deepmerge';
+
+const MessageBoxCenter = deepmerge(MessageBox, {});
+
+MessageBoxCenter.setDefaults = defaults => {
+  MessageBox.defaults = defaults;
+};
+
+MessageBoxCenter.alert = (message, title, options) => {
+  if (typeof title === 'object') {
+    options = title;
+    title = '';
+  } else if (title === undefined) {
+    title = '';
+  }
+  if (options) {
+    options = {
+      ...options,
+      customClass: `el-message-box-center ${options.customClass || ''}`
+    };
+  }
+  return MessageBox(merge({
+    title: title,
+    message: message,
+    $type: 'alert',
+    closeOnPressEscape: false,
+    closeOnClickModal: false
+  }, options));
+};
+
+MessageBoxCenter.confirm = (message, title, options) => {
+  if (typeof title === 'object') {
+    options = title;
+    title = '';
+  } else if (title === undefined) {
+    title = '';
+  }
+  if (options) {
+    options = {
+      ...options,
+      customClass: `el-message-box-center ${options.customClass || ''}`
+    };
+  }
+  return MessageBox(merge({
+    title: title,
+    message: message,
+    $type: 'confirm',
+    showCancelButton: true
+  }, options));
+};
+
+MessageBoxCenter.close = () => {
+  return MessageBox.close();
+};
+
+export default MessageBoxCenter;
+
+export { MessageBoxCenter };
+
diff --git a/packages/message-box/src/main.js b/packages/message-box/src/main.js
index 7b9a7fd39d7..e5c98cd36ee 100644
--- a/packages/message-box/src/main.js
+++ b/packages/message-box/src/main.js
@@ -30,7 +30,8 @@ const defaults = {
   dangerouslyUseHTMLString: false,
   center: false,
   roundButton: false,
-  distinguishCancelAndClose: false
+  distinguishCancelAndClose: false,
+  appendTarget: null
 };
 
 import Vue from 'vue';
@@ -43,6 +44,18 @@ const MessageBoxConstructor = Vue.extend(msgboxVue);
 let currentMsg, instance;
 let msgQueue = [];
 
+const getAppendTarget = (target) => {
+  if (!target) {
+    return document.body;
+  }
+  if (typeof target === 'string') {
+    return document.querySelector(target);
+  }
+  if (target instanceof HTMLElement) {
+    return target;
+  }
+};
+
 const defaultCallback = action => {
   if (currentMsg) {
     let callback = currentMsg.callback;
@@ -111,7 +124,7 @@ const showNextMsg = () => {
           instance[prop] = true;
         }
       });
-      document.body.appendChild(instance.$el);
+      getAppendTarget(options.appendTarget).appendChild(instance.$el);
 
       Vue.nextTick(() => {
         instance.visible = true;
diff --git a/packages/message-box/src/main.vue b/packages/message-box/src/main.vue
index 92f6f22f74c..5ce6445347e 100644
--- a/packages/message-box/src/main.vue
+++ b/packages/message-box/src/main.vue
@@ -28,15 +28,17 @@
           </button>
         </div>
         <div class="el-message-box__content">
-          <div
-            :class="['el-message-box__status', icon]"
-            v-if="icon && !center && message !== ''">
-          </div>
-          <div class="el-message-box__message" v-if="message !== ''">
-            <slot>
-              <p v-if="!dangerouslyUseHTMLString">{{ message }}</p>
-              <p v-else v-html="message"></p>
-            </slot>
+          <div class="el-message-box__container">
+            <div
+              :class="['el-message-box__status', icon]"
+              v-if="icon && !center && message !== ''">
+            </div>
+            <div class="el-message-box__message" v-if="message !== ''">
+              <slot>
+                <p v-if="!dangerouslyUseHTMLString">{{ message }}</p>
+                <p v-else v-html="message"></p>
+              </slot>
+            </div>
           </div>
           <div class="el-message-box__input" v-show="showInput">
             <el-input
@@ -231,6 +233,9 @@
       getInputElement() {
         const inputRefs = this.$refs.input.$refs;
         return inputRefs.input || inputRefs.textarea;
+      },
+      handleClose() {
+        this.handleAction('close');
       }
     },
 
diff --git a/packages/message/src/main.js b/packages/message/src/main.js
index bfc228b7ab3..3799e7f2eaf 100644
--- a/packages/message/src/main.js
+++ b/packages/message/src/main.js
@@ -30,13 +30,17 @@ const Message = function(options) {
     instance.$slots.default = [instance.message];
     instance.message = null;
   }
-  instance.vm = instance.$mount();
-  document.body.appendChild(instance.vm.$el);
-  instance.vm.visible = true;
-  instance.dom = instance.vm.$el;
-  instance.dom.style.zIndex = PopupManager.nextZIndex();
+  instance.$mount();
+  document.body.appendChild(instance.$el);
+  let verticalOffset = options.offset || 20;
+  instances.forEach(item => {
+    verticalOffset += item.$el.offsetHeight + 16;
+  });
+  instance.verticalOffset = verticalOffset;
+  instance.visible = true;
+  instance.$el.style.zIndex = PopupManager.nextZIndex();
   instances.push(instance);
-  return instance.vm;
+  return instance;
 };
 
 ['success', 'warning', 'info', 'error'].forEach(type => {
@@ -52,8 +56,13 @@ const Message = function(options) {
 });
 
 Message.close = function(id, userOnClose) {
-  for (let i = 0, len = instances.length; i < len; i++) {
+  let len = instances.length;
+  let index = -1;
+  let removedHeight;
+  for (let i = 0; i < len; i++) {
     if (id === instances[i].id) {
+      removedHeight = instances[i].$el.offsetHeight;
+      index = i;
       if (typeof userOnClose === 'function') {
         userOnClose(instances[i]);
       }
@@ -61,6 +70,12 @@ Message.close = function(id, userOnClose) {
       break;
     }
   }
+  if (len <= 1 || index === -1 || index > instances.length - 1) return;
+  for (let i = index; i < len - 1 ; i++) {
+    let dom = instances[i].$el;
+    dom.style['top'] =
+      parseInt(dom.style['top'], 10) - removedHeight - 16 + 'px';
+  }
 };
 
 Message.closeAll = function() {
diff --git a/packages/message/src/main.vue b/packages/message/src/main.vue
index 8e9e5d22b2d..dc572e0f00c 100644
--- a/packages/message/src/main.vue
+++ b/packages/message/src/main.vue
@@ -1,5 +1,5 @@
 <template>
-  <transition name="el-message-fade">
+  <transition name="el-message-fade" @after-leave="handleAfterLeave">
     <div
       :class="[
         'el-message',
@@ -8,6 +8,7 @@
         showClose ? 'is-closable' : '',
         customClass
       ]"
+      :style="positionStyle"
       v-show="visible"
       @mouseenter="clearTimer"
       @mouseleave="startTimer"
@@ -43,6 +44,7 @@
         onClose: null,
         showClose: false,
         closed: false,
+        verticalOffset: 20,
         timer: null,
         dangerouslyUseHTMLString: false,
         center: false
@@ -54,6 +56,11 @@
         return this.type && !this.iconClass
           ? `el-message__icon el-icon-${ typeMap[this.type] }`
           : '';
+      },
+      positionStyle() {
+        return {
+          'top': `${ this.verticalOffset }px`
+        };
       }
     },
 
@@ -61,14 +68,12 @@
       closed(newVal) {
         if (newVal) {
           this.visible = false;
-          this.$el.addEventListener('transitionend', this.destroyElement);
         }
       }
     },
 
     methods: {
-      destroyElement() {
-        this.$el.removeEventListener('transitionend', this.destroyElement);
+      handleAfterLeave() {
         this.$destroy(true);
         this.$el.parentNode.removeChild(this.$el);
       },
diff --git a/packages/notification/src/main.js b/packages/notification/src/main.js
index 0843339f4c9..f10b1c12723 100644
--- a/packages/notification/src/main.js
+++ b/packages/notification/src/main.js
@@ -1,5 +1,6 @@
 import Vue from 'vue';
 import Main from './main.vue';
+import merge from 'element-ui/src/utils/merge';
 import { PopupManager } from 'element-ui/src/utils/popup';
 import { isVNode } from 'element-ui/src/utils/vdom';
 const NotificationConstructor = Vue.extend(Main);
@@ -10,7 +11,7 @@ let seed = 1;
 
 const Notification = function(options) {
   if (Vue.prototype.$isServer) return;
-  options = options || {};
+  options = merge({}, options);
   const userOnClose = options.onClose;
   const id = 'notification_' + seed++;
   const position = options.position || 'top-right';
diff --git a/packages/page-header/index.js b/packages/page-header/index.js
new file mode 100644
index 00000000000..105da732268
--- /dev/null
+++ b/packages/page-header/index.js
@@ -0,0 +1,8 @@
+import PageHeader from './src/main';
+
+/* istanbul ignore next */
+PageHeader.install = function(Vue) {
+  Vue.component(PageHeader.name, PageHeader);
+};
+
+export default PageHeader;
diff --git a/packages/page-header/src/main.vue b/packages/page-header/src/main.vue
new file mode 100644
index 00000000000..d7d6b38076a
--- /dev/null
+++ b/packages/page-header/src/main.vue
@@ -0,0 +1,30 @@
+<template>
+  <div class="el-page-header">
+    <div class="el-page-header__left" @click="$emit('back')">
+      <i class="el-icon-back"></i>
+      <div class="el-page-header__title">
+        <slot name="title">{{ title }}</slot>
+      </div>
+    </div>
+    <div class="el-page-header__content">
+      <slot name="content">{{ content }}</slot>
+    </div>
+  </div>
+</template>
+
+<script>
+import { t } from 'element-ui/src/locale';
+export default {
+  name: 'ElPageHeader',
+
+  props: {
+    title: {
+      type: String,
+      default() {
+        return t('el.pageHeader.title');
+      }
+    },
+    content: String
+  }
+};
+</script>
diff --git a/packages/pagination/src/pagination.js b/packages/pagination/src/pagination.js
index 0bb2c67cdfb..381de8245ab 100644
--- a/packages/pagination/src/pagination.js
+++ b/packages/pagination/src/pagination.js
@@ -52,7 +52,9 @@ export default {
 
     background: Boolean,
 
-    disabled: Boolean
+    disabled: Boolean,
+
+    hideOnSinglePage: Boolean
   },
 
   data() {
@@ -65,19 +67,21 @@ export default {
   },
 
   render(h) {
+    const layout = this.layout;
+    if (!layout) return null;
+    if (this.hideOnSinglePage && (!this.internalPageCount || this.internalPageCount === 1)) return null;
+
     let template = <div class={['el-pagination', {
       'is-background': this.background,
       'el-pagination--small': this.small
     }] }></div>;
-    const layout = this.layout || '';
-    if (!layout) return;
     const TEMPLATE_MAP = {
       prev: <prev></prev>,
       jumper: <jumper></jumper>,
       pager: <pager currentPage={ this.internalCurrentPage } pageCount={ this.internalPageCount } pagerCount={ this.pagerCount } on-change={ this.handleCurrentChange } disabled={ this.disabled }></pager>,
       next: <next></next>,
       sizes: <sizes pageSizes={ this.pageSizes }></sizes>,
-      slot: <my-slot></my-slot>,
+      slot: <slot>{ this.$slots.default ? this.$slots.default : '' }</slot>,
       total: <total></total>
     };
     const components = layout.split(',').map((item) => item.trim());
@@ -107,15 +111,6 @@ export default {
   },
 
   components: {
-    MySlot: {
-      render(h) {
-        return (
-          this.$parent.$slots.default
-            ? this.$parent.$slots.default[0]
-            : ''
-        );
-      }
-    },
     Prev: {
       render(h) {
         return (
@@ -181,6 +176,7 @@ export default {
               popperClass={ this.$parent.popperClass || '' }
               size="mini"
               on-input={ this.handleChange }
+              clearable={false}
               disabled={ this.$parent.disabled }>
               {
                 this.pageSizes.map(item =>
@@ -215,56 +211,36 @@ export default {
     Jumper: {
       mixins: [Locale],
 
+      components: { ElInput },
+
       data() {
         return {
-          oldValue: null
+          userInput: null
         };
       },
 
-      components: { ElInput },
-
       watch: {
-        '$parent.internalPageSize'() {
-          this.$nextTick(() => {
-            this.$refs.input.$el.querySelector('input').value = this.$parent.internalCurrentPage;
-          });
+        '$parent.internalCurrentPage'() {
+          this.userInput = null;
         }
       },
 
       methods: {
-        handleFocus(event) {
-          this.oldValue = event.target.value;
-        },
-        handleBlur({ target }) {
-          this.resetValueIfNeed(target.value);
-          this.reassignMaxValue(target.value);
-        },
         handleKeyup({ keyCode, target }) {
-          if (keyCode === 13 && this.oldValue && target.value !== this.oldValue) {
+          // Chrome, Safari, Firefox triggers change event on Enter
+          // Hack for IE: https://github.com/ElemeFE/element/issues/11710
+          // Drop this method when we no longer supports IE
+          if (keyCode === 13) {
             this.handleChange(target.value);
           }
         },
+        handleInput(value) {
+          this.userInput = value;
+        },
         handleChange(value) {
           this.$parent.internalCurrentPage = this.$parent.getValidCurrentPage(value);
           this.$parent.emitChange();
-          this.oldValue = null;
-          this.resetValueIfNeed(value);
-        },
-        resetValueIfNeed(value) {
-          const num = parseInt(value, 10);
-          if (!isNaN(num)) {
-            if (num < 1) {
-              this.$refs.input.setCurrentValue(1);
-            } else {
-              this.reassignMaxValue(value);
-            }
-          }
-        },
-        reassignMaxValue(value) {
-          const { internalPageCount } = this.$parent;
-          if (+value > internalPageCount) {
-            this.$refs.input.setCurrentValue(internalPageCount || 1);
-          }
+          this.userInput = null;
         }
       },
 
@@ -276,15 +252,12 @@ export default {
               class="el-pagination__editor is-in-pagination"
               min={ 1 }
               max={ this.$parent.internalPageCount }
-              value={ this.$parent.internalCurrentPage }
-              domPropsValue={ this.$parent.internalCurrentPage }
+              value={ this.userInput !== null ? this.userInput : this.$parent.internalCurrentPage }
               type="number"
-              ref="input"
               disabled={ this.$parent.disabled }
               nativeOnKeyup={ this.handleKeyup }
-              onChange={ this.handleChange }
-              onFocus={ this.handleFocus }
-              onBlur={ this.handleBlur }/>
+              onInput={ this.handleInput }
+              onChange={ this.handleChange }/>
             { this.t('el.pagination.pageClassifier') }
           </span>
         );
@@ -368,9 +341,9 @@ export default {
   computed: {
     internalPageCount() {
       if (typeof this.total === 'number') {
-        return Math.ceil(this.total / this.internalPageSize);
+        return Math.max(1, Math.ceil(this.total / this.internalPageSize));
       } else if (typeof this.pageCount === 'number') {
-        return this.pageCount;
+        return Math.max(1, this.pageCount);
       }
       return null;
     }
@@ -380,7 +353,7 @@ export default {
     currentPage: {
       immediate: true,
       handler(val) {
-        this.internalCurrentPage = val;
+        this.internalCurrentPage = this.getValidCurrentPage(val);
       }
     },
 
@@ -393,24 +366,8 @@ export default {
 
     internalCurrentPage: {
       immediate: true,
-      handler(newVal, oldVal) {
-        newVal = parseInt(newVal, 10);
-
-        /* istanbul ignore if */
-        if (isNaN(newVal)) {
-          newVal = oldVal || 1;
-        } else {
-          newVal = this.getValidCurrentPage(newVal);
-        }
-
-        if (newVal !== undefined) {
-          this.internalCurrentPage = newVal;
-          if (oldVal !== newVal) {
-            this.$emit('update:currentPage', newVal);
-          }
-        } else {
-          this.$emit('update:currentPage', newVal);
-        }
+      handler(newVal) {
+        this.$emit('update:currentPage', newVal);
         this.lastEmittedPage = -1;
       }
     },
diff --git a/packages/panel/index.js b/packages/panel/index.js
new file mode 100644
index 00000000000..50bada68d20
--- /dev/null
+++ b/packages/panel/index.js
@@ -0,0 +1,8 @@
+import Panel from './src/main';
+
+/* istanbul ignore next */
+Panel.install = function(Vue) {
+  Vue.component(Panel.name, Panel);
+};
+
+export default Panel;
diff --git a/packages/panel/src/main.vue b/packages/panel/src/main.vue
new file mode 100644
index 00000000000..3cba9914da4
--- /dev/null
+++ b/packages/panel/src/main.vue
@@ -0,0 +1,63 @@
+<template>
+  <div class="el-panel" :style="{width: panelWidth}">
+    <div :class="`el-panel-${panelType}__header`">
+      <div :class="`el-panel-${panelType}__title`">
+        <h3 class="title">{{ title }}</h3>
+        <p class="subtitle" v-if="subtitle">{{ subtitle }}</p>
+      </div>
+      <div :class="`el-panel-${panelType}__operation`">
+        <slot name="operation"></slot>
+      </div>
+    </div>
+    <div class="el-panel__body" :style="{padding: bodyPadding}">
+      <slot></slot>
+    </div>
+  </div>
+</template>
+<script>
+export default {
+  name: 'ElPanel',
+  props: {
+    // 标题
+    title: {
+      type: String,
+      default: ''
+    },
+    // 小标题
+    subtitle: {
+      type: String,
+      default: ''
+    },
+    // 展示类型
+    type: {
+      type: String,
+      default: 'view',
+      validator: function(value) {
+        // 这个值必须匹配下列字符串中的一个
+        return ['view', 'edit'].indexOf(value) !== -1
+          ? true
+          : console.error('type is view or edit');
+      }
+    },
+    // body设置padding
+    bodyPadding: {
+      type: String,
+      default: '20px'
+    },
+    // panel宽度
+    width: {
+      type: [String, Number],
+      default: '100%'
+    }
+  },
+  computed: {
+    // panel类型
+    panelType() {
+      return ['view', 'edit'].indexOf(this.type) !== -1 ? this.type : 'view';
+    },
+    panelWidth() {
+      return (/^[0-9]*px$/).test(this.width) ? this.width : this.width + 'px';
+    }
+  }
+};
+</script>
diff --git a/packages/popconfirm/index.js b/packages/popconfirm/index.js
new file mode 100644
index 00000000000..15db1f0e1f2
--- /dev/null
+++ b/packages/popconfirm/index.js
@@ -0,0 +1,8 @@
+import Popconfirm from './src/main';
+
+/* istanbul ignore next */
+Popconfirm.install = function(Vue) {
+  Vue.component(Popconfirm.name, Popconfirm);
+};
+
+export default Popconfirm;
diff --git a/packages/popconfirm/src/main.vue b/packages/popconfirm/src/main.vue
new file mode 100644
index 00000000000..8e158e0212e
--- /dev/null
+++ b/packages/popconfirm/src/main.vue
@@ -0,0 +1,98 @@
+<template>
+  <el-popover
+    v-bind="$attrs"
+    v-model="visible"
+    trigger="click"
+  >
+  <div class="el-popconfirm">
+    <p class="el-popconfirm__main">
+    <i
+      v-if="!hideIcon"
+      :class="icon"
+      class="el-popconfirm__icon"
+      :style="{color: iconColor}"
+    ></i>
+      {{title}}
+    </p>
+    <div class="el-popconfirm__action">
+      <el-button 
+        size="mini" 
+        :type="cancelButtonType" 
+        @click="cancel"
+      >
+        {{cancelButtonText}}
+      </el-button>
+      <el-button 
+        size="mini" 
+        :type="confirmButtonType" 
+        @click="confirm"
+      >
+        {{confirmButtonText}}
+      </el-button>
+    </div>
+  </div>
+  <slot name="reference" slot="reference"></slot>
+</el-popover>
+</template>
+
+<script>
+import ElPopover from 'element-ui/packages/popover';
+import ElButton from 'element-ui/packages/button';
+import {t} from 'element-ui/src/locale';
+
+export default {
+  name: 'ElPopconfirm',
+  props: {
+    title: {
+      type: String
+    },
+    confirmButtonText: {
+      type: String,
+      default: t('el.popconfirm.confirmButtonText')
+    },
+    cancelButtonText: {
+      type: String,
+      default: t('el.popconfirm.cancelButtonText')
+    },
+    confirmButtonType: {
+      type: String,
+      default: 'primary'
+    },
+    cancelButtonType: {
+      type: String,
+      default: 'text'
+    },
+    icon: {
+      type: String,
+      default: 'el-icon-question'
+    },
+    iconColor: {
+      type: String,
+      default: '#f90'
+    },
+    hideIcon: {
+      type: Boolean,
+      default: false
+    }
+  },
+  components: {
+    ElPopover,
+    ElButton
+  },
+  data() {
+    return {
+      visible: false
+    };
+  },
+  methods: {
+    confirm() {
+      this.visible = false;
+      this.$emit('onConfirm');
+    },
+    cancel() {
+      this.visible = false;
+      this.$emit('onCancel');
+    }
+  }
+};
+</script>
diff --git a/packages/popover/src/main.vue b/packages/popover/src/main.vue
index c856c40f405..67e1e536065 100644
--- a/packages/popover/src/main.vue
+++ b/packages/popover/src/main.vue
@@ -42,6 +42,10 @@ export default {
       type: Number,
       default: 0
     },
+    closeDelay: {
+      type: Number,
+      default: 200
+    },
     title: String,
     disabled: Boolean,
     content: String,
@@ -58,6 +62,10 @@ export default {
     transition: {
       type: String,
       default: 'fade-in-linear'
+    },
+    tabindex: {
+      type: Number,
+      default: 0
     }
   },
 
@@ -86,7 +94,7 @@ export default {
     if (reference) {
       addClass(reference, 'el-popover__reference');
       reference.setAttribute('aria-describedby', this.tooltipId);
-      reference.setAttribute('tabindex', 0); // tab序列
+      reference.setAttribute('tabindex', this.tabindex); // tab序列
       popper.setAttribute('tabindex', 0);
 
       if (this.trigger !== 'click') {
@@ -113,6 +121,9 @@ export default {
       on(reference, 'mouseleave', this.handleMouseLeave);
       on(popper, 'mouseleave', this.handleMouseLeave);
     } else if (this.trigger === 'focus') {
+      if (this.tabindex < 0) {
+        console.warn('[Element Warn][Popover]a negative taindex means that the element cannot be focused by tab key');
+      }
       if (reference.querySelector('input, textarea')) {
         on(reference, 'focusin', this.doShow);
         on(reference, 'focusout', this.doClose);
@@ -123,6 +134,14 @@ export default {
     }
   },
 
+  beforeDestroy() {
+    this.cleanup();
+  },
+
+  deactivated() {
+    this.cleanup();
+  },
+
   methods: {
     doToggle() {
       this.showPopper = !this.showPopper;
@@ -135,14 +154,14 @@ export default {
     },
     handleFocus() {
       addClass(this.referenceElm, 'focusing');
-      if (this.trigger !== 'manual') this.showPopper = true;
+      if (this.trigger === 'click' || this.trigger === 'focus') this.showPopper = true;
     },
     handleClick() {
       removeClass(this.referenceElm, 'focusing');
     },
     handleBlur() {
       removeClass(this.referenceElm, 'focusing');
-      if (this.trigger !== 'manual') this.showPopper = false;
+      if (this.trigger === 'click' || this.trigger === 'focus') this.showPopper = false;
     },
     handleMouseEnter() {
       clearTimeout(this._timer);
@@ -161,9 +180,13 @@ export default {
     },
     handleMouseLeave() {
       clearTimeout(this._timer);
-      this._timer = setTimeout(() => {
+      if (this.closeDelay) {
+        this._timer = setTimeout(() => {
+          this.showPopper = false;
+        }, this.closeDelay);
+      } else {
         this.showPopper = false;
-      }, 200);
+      }
     },
     handleDocumentClick(e) {
       let reference = this.reference || this.$refs.reference;
@@ -186,6 +209,11 @@ export default {
     handleAfterLeave() {
       this.$emit('after-leave');
       this.doDestroy();
+    },
+    cleanup() {
+      if (this.openDelay || this.closeDelay) {
+        clearTimeout(this._timer);
+      }
     }
   },
 
diff --git a/packages/progress/src/progress.vue b/packages/progress/src/progress.vue
index 2417eba061f..67051dd9dd6 100644
--- a/packages/progress/src/progress.vue
+++ b/packages/progress/src/progress.vue
@@ -17,22 +17,36 @@
     <div class="el-progress-bar" v-if="type === 'line'">
       <div class="el-progress-bar__outer" :style="{height: strokeWidth + 'px'}">
         <div class="el-progress-bar__inner" :style="barStyle">
-          <div class="el-progress-bar__innerText" v-if="showText && textInside">{{percentage}}%</div>
+          <div class="el-progress-bar__innerText" v-if="showText && textInside">{{content}}</div>
         </div>
       </div>
     </div>
     <div class="el-progress-circle" :style="{height: width + 'px', width: width + 'px'}" v-else>
       <svg viewBox="0 0 100 100">
-        <path class="el-progress-circle__track" :d="trackPath" stroke="#e5e9f2" :stroke-width="relativeStrokeWidth" fill="none"></path>
-        <path class="el-progress-circle__path" :d="trackPath" stroke-linecap="round" :stroke="stroke" :stroke-width="relativeStrokeWidth" fill="none" :style="circlePathStyle"></path>
+        <path
+          class="el-progress-circle__track"
+          :d="trackPath"
+          stroke="#e5e9f2"
+          :stroke-width="relativeStrokeWidth"
+          fill="none"
+          :style="trailPathStyle"></path>
+        <path
+          class="el-progress-circle__path"
+          :d="trackPath"
+          :stroke="stroke"
+          fill="none"
+          :stroke-linecap="strokeLinecap"
+          :stroke-width="percentage ? relativeStrokeWidth : 0"
+          :style="circlePathStyle"></path>
       </svg>
     </div>
-    <div class="el-progress__text" v-if="showText && !textInside" :style="{fontSize: progressTextSize + 'px'}">
-      <template v-if="!status">{{percentage}}%</template>
-      <template v-else>
-        <slot v-if="status === 'text'"></slot>
-        <i v-else :class="iconClass"></i>
-      </template>
+    <div
+      class="el-progress__text"
+      v-if="showText && !textInside"
+      :style="{fontSize: progressTextSize + 'px'}"
+    >
+      <template v-if="!status">{{content}}</template>
+      <i v-else :class="iconClass"></i>
     </div>
   </div>
 </template>
@@ -43,7 +57,7 @@
       type: {
         type: String,
         default: 'line',
-        validator: val => ['line', 'circle'].indexOf(val) > -1
+        validator: val => ['line', 'circle', 'dashboard'].indexOf(val) > -1
       },
       percentage: {
         type: Number,
@@ -53,12 +67,16 @@
       },
       status: {
         type: String,
-        validator: val => ['text', 'success', 'exception'].indexOf(val) > -1
+        validator: val => ['success', 'exception', 'warning'].indexOf(val) > -1
       },
       strokeWidth: {
         type: Number,
         default: 6
       },
+      strokeLinecap: {
+        type: String,
+        default: 'round'
+      },
       textInside: {
         type: Boolean,
         default: false
@@ -72,41 +90,65 @@
         default: true
       },
       color: {
-        type: String,
+        type: [String, Array, Function],
         default: ''
-      }
+      },
+      format: Function
     },
     computed: {
       barStyle() {
         const style = {};
         style.width = this.percentage + '%';
-        style.backgroundColor = this.color;
+        style.backgroundColor = this.getCurrentColor(this.percentage);
         return style;
       },
       relativeStrokeWidth() {
         return (this.strokeWidth / this.width * 100).toFixed(1);
       },
+      radius() {
+        if (this.type === 'circle' || this.type === 'dashboard') {
+          return parseInt(50 - parseFloat(this.relativeStrokeWidth) / 2, 10);
+        } else {
+          return 0;
+        }
+      },
       trackPath() {
-        const radius = parseInt(50 - parseFloat(this.relativeStrokeWidth) / 2, 10);
-
-        return `M 50 50 m 0 -${radius} a ${radius} ${radius} 0 1 1 0 ${radius * 2} a ${radius} ${radius} 0 1 1 0 -${radius * 2}`;
+        const radius = this.radius;
+        const isDashboard = this.type === 'dashboard';
+        return `
+          M 50 50
+          m 0 ${isDashboard ? '' : '-'}${radius}
+          a ${radius} ${radius} 0 1 1 0 ${isDashboard ? '-' : ''}${radius * 2}
+          a ${radius} ${radius} 0 1 1 0 ${isDashboard ? '' : '-'}${radius * 2}
+          `;
       },
       perimeter() {
-        const radius = 50 - parseFloat(this.relativeStrokeWidth) / 2;
-        return 2 * Math.PI * radius;
+        return 2 * Math.PI * this.radius;
+      },
+      rate() {
+        return this.type === 'dashboard' ? 0.75 : 1;
+      },
+      strokeDashoffset() {
+        const offset = -1 * this.perimeter * (1 - this.rate) / 2;
+        return `${offset}px`;
+      },
+      trailPathStyle() {
+        return {
+          strokeDasharray: `${(this.perimeter * this.rate)}px, ${this.perimeter}px`,
+          strokeDashoffset: this.strokeDashoffset
+        };
       },
       circlePathStyle() {
-        const perimeter = this.perimeter;
         return {
-          strokeDasharray: `${perimeter}px,${perimeter}px`,
-          strokeDashoffset: (1 - this.percentage / 100) * perimeter + 'px',
-          transition: 'stroke-dashoffset 0.6s ease 0s, stroke 0.6s ease'
+          strokeDasharray: `${this.perimeter * this.rate * (this.percentage / 100) }px, ${this.perimeter}px`,
+          strokeDashoffset: this.strokeDashoffset,
+          transition: 'stroke-dasharray 0.6s ease 0s, stroke 0.6s ease'
         };
       },
       stroke() {
         let ret;
         if (this.color) {
-          ret = this.color;
+          ret = this.getCurrentColor(this.percentage);
         } else {
           switch (this.status) {
             case 'success':
@@ -115,6 +157,9 @@
             case 'exception':
               ret = '#ff4949';
               break;
+            case 'warning':
+              ret = '#F5A623';
+              break;
             default:
               ret = '#20a0ff';
           }
@@ -122,6 +167,9 @@
         return ret;
       },
       iconClass() {
+        if (this.status === 'warning') {
+          return 'el-icon-warning';
+        }
         if (this.type === 'line') {
           return this.status === 'success' ? 'el-icon-circle-check' : 'el-icon-circle-close';
         } else {
@@ -132,6 +180,47 @@
         return this.type === 'line'
           ? 12 + this.strokeWidth * 0.4
           : this.width * 0.111111 + 2 ;
+      },
+      content() {
+        if (typeof this.format === 'function') {
+          return this.format(this.percentage) || '';
+        } else {
+          return `${this.percentage}%`;
+        }
+      }
+    },
+    methods: {
+      getCurrentColor(percentage) {
+        if (typeof this.color === 'function') {
+          return this.color(percentage);
+        } else if (typeof this.color === 'string') {
+          return this.color;
+        } else {
+          return this.getLevelColor(percentage);
+        }
+      },
+      getLevelColor(percentage) {
+        const colorArray = this.getColorArray().sort((a, b) => a.percentage - b.percentage);
+
+        for (let i = 0; i < colorArray.length; i++) {
+          if (colorArray[i].percentage > percentage) {
+            return colorArray[i].color;
+          }
+        }
+        return colorArray[colorArray.length - 1].color;
+      },
+      getColorArray() {
+        const color = this.color;
+        const span = 100 / color.length;
+        return color.map((seriesColor, index) => {
+          if (typeof seriesColor === 'string') {
+            return {
+              color: seriesColor,
+              progress: (index + 1) * span
+            };
+          }
+          return seriesColor;
+        });
       }
     }
   };
diff --git a/packages/radio-img-button/index.js b/packages/radio-img-button/index.js
new file mode 100644
index 00000000000..5b4bbb2ac98
--- /dev/null
+++ b/packages/radio-img-button/index.js
@@ -0,0 +1,8 @@
+import RadioImgButton from './src/main';
+
+/* istanbul ignore next */
+RadioImgButton.install = function(Vue) {
+  Vue.component(RadioImgButton.name, RadioImgButton);
+};
+
+export default RadioImgButton;
diff --git a/packages/radio-img-button/src/main.vue b/packages/radio-img-button/src/main.vue
new file mode 100644
index 00000000000..f84bed4ce44
--- /dev/null
+++ b/packages/radio-img-button/src/main.vue
@@ -0,0 +1,157 @@
+<template>
+  <label class="el-radio-img-button" :class="[
+        {'is-vertical': vertical},
+        {'is-horizontal': !vertical},
+        { 'is-disabled': isDisabled },
+        { 'is-focus': focus },
+        { 'is-bordered': true },
+        { 'is-checked': model === label }
+      ]"
+         :style="{ width: `${numberWidth}px`}"
+         role="radio" :aria-checked="model === label"
+         :aria-disabled="isDisabled"
+         :tabindex="tabIndex"
+         @keydown.space.stop.prevent="model = isDisabled ? model : label"
+  >
+    <span class="el-radio-img-button__input" :class="{'is-disabled': isDisabled, 'is-checked': model === label}">
+      <span class="el-radio-img-button__inner"></span>
+      <input
+        ref="radio"
+        class="el-radio-img-button__original"
+        :value="label"
+        type="radio"
+        aria-hidden="true"
+        v-model="model"
+        @focus="focus = true"
+        @blur="focus = false"
+        @change="handleChange"
+        :name="name"
+        :disabled="isDisabled"
+        tabindex="-1"
+      >
+    </span>
+    <span>
+      <template>
+        <img class="el-radio-img-button__img" :src="imgUrl">
+      </template>
+    </span>
+    <span class="el-radio-img-button__label" @keydown.stop>
+      <span class="el-radio-img-button__word">
+        <span class="el-radio-img-button__text" :title="text">{{text}}</span>
+        <span class="el-radio-img-button__description" v-if="!vertical" :title="description">{{description}}</span>
+      </span>
+    </span>
+  </label>
+</template>
+<script>
+  import Emitter from 'element-ui/src/mixins/emitter';
+
+  export default {
+    name: 'ElRadioImgButton',
+
+    mixins: [Emitter],
+
+    inject: {
+      elForm: {
+        default: ''
+      },
+
+      elFormItem: {
+        default: ''
+      }
+    },
+
+    componentName: 'ElRadio',
+
+    props: {
+      value: {},
+      label: {},
+      disabled: Boolean,
+      name: String,
+      border: Boolean,
+      width: {
+        type: [ String, Number ],
+        default: 160
+      },
+      vertical: Boolean,
+      text: {
+        type: String,
+        default: ''
+      },
+      description: {
+        type: String,
+        default: ''
+      },
+      imgUrl: String
+    },
+
+    data() {
+      return {
+        focus: false
+      };
+    },
+    computed: {
+      isGroup() {
+        let parent = this.$parent;
+        while (parent) {
+          if (parent.$options.componentName !== 'ElRadioGroup') {
+            parent = parent.$parent;
+          } else {
+            this._radioGroup = parent;
+            return true;
+          }
+        }
+        return false;
+      },
+      model: {
+        get() {
+          return this.isGroup ? this._radioGroup.value : this.value;
+        },
+        set(val) {
+          if (this.isGroup) {
+            this.dispatch('ElRadioGroup', 'input', [val]);
+          } else {
+            this.$emit('input', val);
+          }
+          this.$refs.radio && (this.$refs.radio.checked = this.model === this.label);
+        }
+      },
+      _elFormItemSize() {
+        return (this.elFormItem || {}).elFormItemSize;
+      },
+      radioSize() {
+        const temRadioSize = this.size || this._elFormItemSize || (this.$ELEMENT || {}).size;
+        return this.isGroup ? this._radioGroup.radioGroupSize || temRadioSize : temRadioSize;
+      },
+      isDisabled() {
+        return this.isGroup ? this._radioGroup.disabled || this.disabled || (this.elForm || {}).disabled : this.disabled || (this.elForm || {}).disabled;
+      },
+      tabIndex() {
+        return (this.isDisabled || (this.isGroup && this.model !== this.label)) ? -1 : 0;
+      },
+      numberWidth() {
+        const width = this.width;
+        if (typeof width === 'number') {
+          return width;
+        }
+        if (typeof width === 'string') {
+          if (/^\d+(?:px)?$/.test(width)) {
+            return parseInt(width, 10);
+          } else {
+            return width;
+          }
+        }
+        return null;
+      }
+    },
+
+    methods: {
+      handleChange() {
+        this.$nextTick(() => {
+          this.$emit('change', this.model);
+          this.isGroup && this.dispatch('ElRadioGroup', 'handleChange', this.model);
+        });
+      }
+    }
+  };
+</script>
diff --git a/packages/radio/src/radio-group.vue b/packages/radio/src/radio-group.vue
index 8cae1ef7da2..342de3a2bd7 100644
--- a/packages/radio/src/radio-group.vue
+++ b/packages/radio/src/radio-group.vue
@@ -1,11 +1,12 @@
 <template>
-  <div
+  <component
+    :is="_elTag"
     class="el-radio-group"
     role="radiogroup"
     @keydown="handleKeydown"
   >
     <slot></slot>
-  </div>
+  </component>
 </template>
 <script>
   import Emitter from 'element-ui/src/mixins/emitter';
@@ -41,6 +42,9 @@
       _elFormItemSize() {
         return (this.elFormItem || {}).elFormItemSize;
       },
+      _elTag() {
+        return (this.$vnode.data || {}).tag || 'div';
+      },
       radioGroupSize() {
         return this.size || this._elFormItemSize || (this.$ELEMENT || {}).size;
       }
diff --git a/packages/radio/src/radio.vue b/packages/radio/src/radio.vue
index d5de914ceec..dfef3aed45c 100644
--- a/packages/radio/src/radio.vue
+++ b/packages/radio/src/radio.vue
@@ -22,6 +22,7 @@
     >
       <span class="el-radio__inner"></span>
       <input
+        ref="radio"
         class="el-radio__original"
         :value="label"
         type="radio"
@@ -98,6 +99,7 @@
           } else {
             this.$emit('input', val);
           }
+          this.$refs.radio && (this.$refs.radio.checked = this.model === this.label);
         }
       },
       _elFormItemSize() {
diff --git a/packages/rate/src/main.vue b/packages/rate/src/main.vue
index 56f4d406e4c..b70ec86e601 100644
--- a/packages/rate/src/main.vue
+++ b/packages/rate/src/main.vue
@@ -34,6 +34,7 @@
 
 <script>
   import { hasClass } from 'element-ui/src/utils/dom';
+  import { isObject } from 'element-ui/src/utils/types';
   import Migrating from 'element-ui/src/mixins/migrating';
 
   export default {
@@ -73,7 +74,7 @@
         default: 5
       },
       colors: {
-        type: Array,
+        type: [Array, Object],
         default() {
           return ['#F7BA2A', '#F7BA2A', '#F7BA2A'];
         }
@@ -87,7 +88,7 @@
         default: '#EFF2F7'
       },
       iconClasses: {
-        type: Array,
+        type: [Array, Object],
         default() {
           return ['el-icon-star-on', 'el-icon-star-on', 'el-icon-star-on'];
         }
@@ -148,9 +149,8 @@
       decimalStyle() {
         let width = '';
         if (this.rateDisabled) {
-          width = `${ this.valueDecimal < 50 ? 0 : 50 }%`;
-        }
-        if (this.allowHalf) {
+          width = `${ this.valueDecimal }%`;
+        } else if (this.allowHalf) {
           width = '50%';
         }
         return {
@@ -163,12 +163,21 @@
         return this.value * 100 - Math.floor(this.value) * 100;
       },
 
+      classMap() {
+        return Array.isArray(this.iconClasses)
+          ? {
+            [this.lowThreshold]: this.iconClasses[0],
+            [this.highThreshold]: { value: this.iconClasses[1], excluded: true },
+            [this.max]: this.iconClasses[2]
+          } : this.iconClasses;
+      },
+
       decimalIconClass() {
         return this.getValueFromMap(this.value, this.classMap);
       },
 
       voidClass() {
-        return this.rateDisabled ? this.classMap.disabledVoidClass : this.classMap.voidClass;
+        return this.rateDisabled ? this.disabledVoidIconClass : this.voidIconClass;
       },
 
       activeClass() {
@@ -176,13 +185,12 @@
       },
 
       colorMap() {
-        return {
-          lowColor: this.colors[0],
-          mediumColor: this.colors[1],
-          highColor: this.colors[2],
-          voidColor: this.voidColor,
-          disabledVoidColor: this.disabledVoidColor
-        };
+        return Array.isArray(this.colors)
+          ? {
+            [this.lowThreshold]: this.colors[0],
+            [this.highThreshold]: { value: this.colors[1], excluded: true },
+            [this.max]: this.colors[2]
+          } : this.colors;
       },
 
       activeColor() {
@@ -205,16 +213,6 @@
         return result;
       },
 
-      classMap() {
-        return {
-          lowClass: this.iconClasses[0],
-          mediumClass: this.iconClasses[1],
-          highClass: this.iconClasses[2],
-          voidClass: this.voidIconClass,
-          disabledVoidClass: this.disabledVoidIconClass
-        };
-      },
-
       rateDisabled() {
         return this.disabled || (this.elForm || {}).disabled;
       }
@@ -237,15 +235,15 @@
       },
 
       getValueFromMap(value, map) {
-        let result = '';
-        if (value <= this.lowThreshold) {
-          result = map.lowColor || map.lowClass;
-        } else if (value >= this.highThreshold) {
-          result = map.highColor || map.highClass;
-        } else {
-          result = map.mediumColor || map.mediumClass;
-        }
-        return result;
+        const matchedKeys = Object.keys(map)
+          .filter(key => {
+            const val = map[key];
+            const excluded = isObject(val) ? val.excluded : false;
+            return excluded ? value < key : value <= key;
+          })
+          .sort((a, b) => a - b);
+        const matchedValue = map[matchedKeys[0]];
+        return isObject(matchedValue) ? matchedValue.value : (matchedValue || '');
       },
 
       showDecimalIcon(item) {
@@ -259,7 +257,7 @@
       },
 
       getIconStyle(item) {
-        const voidColor = this.rateDisabled ? this.colorMap.disabledVoidColor : this.colorMap.voidColor;
+        const voidColor = this.rateDisabled ? this.disabledVoidColor : this.voidColor;
         return {
           color: item <= this.currentValue ? this.activeColor : voidColor
         };
diff --git a/packages/scrollbar/src/bar.js b/packages/scrollbar/src/bar.js
index 45d7485d114..0cf4c7ec77b 100644
--- a/packages/scrollbar/src/bar.js
+++ b/packages/scrollbar/src/bar.js
@@ -40,6 +40,10 @@ export default {
 
   methods: {
     clickThumbHandler(e) {
+      // prevent click event of right button
+      if (e.ctrlKey || e.button === 2) {
+        return;
+      }
       this.startDrag(e);
       this[this.bar.axis] = (e.currentTarget[this.bar.offset] - (e[this.bar.client] - e.currentTarget.getBoundingClientRect()[this.bar.direction]));
     },
diff --git a/packages/select/src/option.vue b/packages/select/src/option.vue
index b6bc9378cce..a343b5b94fe 100644
--- a/packages/select/src/option.vue
+++ b/packages/select/src/option.vue
@@ -109,10 +109,10 @@
 
       contains(arr = [], target) {
         if (!this.isObject) {
-          return arr.indexOf(target) > -1;
+          return arr && arr.indexOf(target) > -1;
         } else {
           const valueKey = this.select.valueKey;
-          return arr.some(item => {
+          return arr && arr.some(item => {
             return getValueByPath(item, valueKey) === getValueByPath(target, valueKey);
           });
         }
@@ -153,6 +153,15 @@
     },
 
     beforeDestroy() {
+      const { selected, multiple } = this.select;
+      let selectedOptions = multiple ? selected : [selected];
+      let index = this.select.cachedOptions.indexOf(this);
+      let selectedIndex = selectedOptions.indexOf(this);
+
+      // if option is not selected, remove it from cache
+      if (index > -1 && selectedIndex < 0) {
+        this.select.cachedOptions.splice(index, 1);
+      }
       this.select.onOptionDestroy(this.select.options.indexOf(this));
     }
   };
diff --git a/packages/select/src/select.vue b/packages/select/src/select.vue
index feb68fd5d61..70a1a6ac933 100644
--- a/packages/select/src/select.vue
+++ b/packages/select/src/select.vue
@@ -50,7 +50,6 @@
         :autocomplete="autoComplete || autocomplete"
         @focus="handleFocus"
         @blur="softFocus = false"
-        @click.stop
         @keyup="managePlaceholder"
         @keydown="resetInputState"
         @keydown.down.prevent="navigateOptions('next')"
@@ -58,6 +57,7 @@
         @keydown.enter.prevent="selectOption"
         @keydown.esc.stop.prevent="visible = false"
         @keydown.delete="deletePrevTag"
+        @keydown.tab="visible = false"
         @compositionstart="handleComposition"
         @compositionupdate="handleComposition"
         @compositionend="handleComposition"
@@ -80,6 +80,7 @@
       :readonly="readonly"
       :validate-event="false"
       :class="{ 'is-focus': visible }"
+      :tabindex="(multiple && filterable) ? '-1' : null"
       @focus="handleFocus"
       @blur="handleBlur"
       @keyup.native="debouncedOnInputChange"
@@ -121,12 +122,15 @@
           </el-option>
           <slot></slot>
         </el-scrollbar>
-        <p
-          class="el-select-dropdown__empty"
-          v-if="emptyText &&
-            (!allowCreate || loading || (allowCreate && options.length === 0 ))">
-          {{ emptyText }}
-        </p>
+        <template v-if="$slots.extra">
+          <slot name="extra"></slot>
+        </template>
+        <template v-if="emptyText && (!allowCreate || loading || (allowCreate && options.length === 0 ))">
+          <slot name="empty" v-if="$slots.empty"></slot>
+          <p class="el-select-dropdown__empty" v-else>
+            {{ emptyText }}
+          </p>
+        </template>
       </el-select-menu>
     </transition>
   </div>
@@ -146,8 +150,7 @@
   import { addResizeListener, removeResizeListener } from 'element-ui/src/utils/resize-event';
   import { t } from 'element-ui/src/locale';
   import scrollIntoView from 'element-ui/src/utils/scroll-into-view';
-  import { getValueByPath } from 'element-ui/src/utils/util';
-  import { valueEquals, isIE, isEdge } from 'element-ui/src/utils/util';
+  import { getValueByPath, valueEquals, isIE, isEdge } from 'element-ui/src/utils/util';
   import NavigationMixin from './navigation-mixin';
   import { isKorean } from 'element-ui/src/utils/shared';
 
@@ -270,8 +273,14 @@
       automaticDropdown: Boolean,
       size: String,
       disabled: Boolean,
-      clearable: Boolean,
-      filterable: Boolean,
+      clearable: {
+        type: Boolean,
+        default: true
+      },
+      filterable: {
+        type: Boolean,
+        default: true
+      },
       allowCreate: Boolean,
       loading: Boolean,
       popperClass: String,
@@ -346,7 +355,7 @@
       value(val, oldVal) {
         if (this.multiple) {
           this.resetInputHeight();
-          if (val.length > 0 || (this.$refs.input && this.query !== '')) {
+          if ((val && val.length > 0) || (this.$refs.input && this.query !== '')) {
             this.currentPlaceholder = '';
           } else {
             this.currentPlaceholder = this.cachedPlaceHolder;
@@ -394,6 +403,10 @@
               }
               if (this.filterable) this.query = this.selectedLabel;
             }
+
+            if (this.filterable) {
+              this.currentPlaceholder = this.cachedPlaceHolder;
+            }
           }
         } else {
           this.broadcast('ElSelectDropdown', 'updatePopper');
@@ -407,7 +420,11 @@
                 this.broadcast('ElOption', 'queryChange', '');
                 this.broadcast('ElOptionGroup', 'queryChange');
               }
-              this.broadcast('ElInput', 'inputSelect');
+
+              if (this.selectedLabel) {
+                this.currentPlaceholder = this.selectedLabel;
+                this.selectedLabel = '';
+              }
             }
           }
         }
@@ -437,7 +454,7 @@
         const text = event.target.value;
         if (event.type === 'compositionend') {
           this.isOnComposition = false;
-          this.handleQueryChange(text);
+          this.$nextTick(_ => this.handleQueryChange(text));
         } else {
           const lastCharacter = text[text.length - 1] || '';
           this.isOnComposition = !isKorean(lastCharacter);
@@ -458,10 +475,12 @@
         });
         this.hoverIndex = -1;
         if (this.multiple && this.filterable) {
-          const length = this.$refs.input.value.length * 15 + 20;
-          this.inputLength = this.collapseTags ? Math.min(50, length) : length;
-          this.managePlaceholder();
-          this.resetInputHeight();
+          this.$nextTick(() => {
+            const length = this.$refs.input.value.length * 15 + 20;
+            this.inputLength = this.collapseTags ? Math.min(50, length) : length;
+            this.managePlaceholder();
+            this.resetInputHeight();
+          });
         }
         if (this.remote && typeof this.remoteMethod === 'function') {
           this.hoverIndex = -1;
@@ -502,6 +521,7 @@
         let option;
         const isObject = Object.prototype.toString.call(value).toLowerCase() === '[object object]';
         const isNull = Object.prototype.toString.call(value).toLowerCase() === '[object null]';
+        const isUndefined = Object.prototype.toString.call(value).toLowerCase() === '[object undefined]';
 
         for (let i = this.cachedOptions.length - 1; i >= 0; i--) {
           const cachedOption = this.cachedOptions[i];
@@ -514,7 +534,7 @@
           }
         }
         if (option) return option;
-        const label = (!isObject && !isNull)
+        const label = (!isObject && !isNull && !isUndefined)
           ? value : '';
         let newOption = {
           value: value,
@@ -556,7 +576,9 @@
         if (!this.softFocus) {
           if (this.automaticDropdown || this.filterable) {
             this.visible = true;
-            this.menuVisibleOnFocus = true;
+            if (this.filterable) {
+              this.menuVisibleOnFocus = true;
+            }
           }
           this.$emit('focus', event);
         } else {
@@ -663,7 +685,7 @@
 
       handleOptionSelect(option, byClick) {
         if (this.multiple) {
-          const value = this.value.slice();
+          const value = (this.value || []).slice();
           const optionIndex = this.getValueIndex(value, option.value);
           if (optionIndex > -1) {
             value.splice(optionIndex, 1);
@@ -858,7 +880,8 @@
           small: 32,
           mini: 28
         };
-        this.initialInputHeight = reference.$el.getBoundingClientRect().height || sizeMap[this.selectSize];
+        const input = reference.$el.querySelector('input');
+        this.initialInputHeight = input.getBoundingClientRect().height || sizeMap[this.selectSize];
       }
       if (this.remote && this.multiple) {
         this.resetInputHeight();
diff --git a/packages/skeleton/index.js b/packages/skeleton/index.js
new file mode 100644
index 00000000000..d1f91250330
--- /dev/null
+++ b/packages/skeleton/index.js
@@ -0,0 +1,8 @@
+import Skeleton from './src/index.jsx';
+
+/* istanbul ignore next */
+Skeleton.install = function(Vue) {
+  Vue.component(Skeleton.name, Skeleton);
+};
+
+export default Skeleton;
diff --git a/packages/skeleton/src/Avatar.jsx b/packages/skeleton/src/Avatar.jsx
new file mode 100644
index 00000000000..e39c754e853
--- /dev/null
+++ b/packages/skeleton/src/Avatar.jsx
@@ -0,0 +1,34 @@
+import classNames from 'classnames';
+import PropTypes from 'element-ui/src/utils/vue-types';
+import { initDefaultProps } from 'element-ui/src/utils/props-util';
+
+const skeletonAvatarProps = {
+  prefixCls: PropTypes.string,
+  size: PropTypes.oneOf(['large', 'small', 'default']),
+  shape: PropTypes.oneOf(['circle', 'square'])
+};
+
+export const SkeletonAvatarProps = PropTypes.shape(skeletonAvatarProps).loose;
+
+const Avatar = {
+  props: initDefaultProps(skeletonAvatarProps, {
+    size: 'large'
+  }),
+  render() {
+    const { prefixCls, size, shape } = this.$props;
+
+    const sizeCls = classNames({
+      [`${prefixCls}-lg`]: size === 'large',
+      [`${prefixCls}-sm`]: size === 'small'
+    });
+
+    const shapeCls = classNames({
+      [`${prefixCls}-circle`]: shape === 'circle',
+      [`${prefixCls}-square`]: shape === 'square'
+    });
+
+    return <span class={classNames(prefixCls, sizeCls, shapeCls)} />;
+  }
+};
+
+export default Avatar;
diff --git a/packages/skeleton/src/Paragraph.jsx b/packages/skeleton/src/Paragraph.jsx
new file mode 100644
index 00000000000..68bca85bd13
--- /dev/null
+++ b/packages/skeleton/src/Paragraph.jsx
@@ -0,0 +1,38 @@
+import PropTypes from 'element-ui/src/utils/vue-types';
+
+const widthUnit = PropTypes.oneOfType([PropTypes.number, PropTypes.string]);
+
+const skeletonParagraphProps = {
+  prefixCls: PropTypes.string,
+  width: PropTypes.oneOfType([widthUnit, PropTypes.arrayOf(widthUnit)]),
+  rows: PropTypes.number
+};
+
+export const SkeletonParagraphProps = PropTypes.shape(skeletonParagraphProps);
+
+const Paragraph = {
+  props: skeletonParagraphProps,
+  methods: {
+    getWidth(index) {
+      const { width, rows = 2 } = this;
+      if (Array.isArray(width)) {
+        return width[index];
+      }
+      // last paragraph
+      if (rows - 1 === index) {
+        return width;
+      }
+      return undefined;
+    }
+  },
+  render() {
+    const { prefixCls, rows } = this.$props;
+    const rowList = new Array(rows).fill('').map((_, index) => {
+      const width = this.getWidth(index);
+      return <li key={index} style={{ width: typeof width === 'number' ? `${width}px` : width }} />;
+    });
+    return <ul class={prefixCls}>{rowList}</ul>;
+  }
+};
+
+export default Paragraph;
diff --git a/packages/skeleton/src/Title.jsx b/packages/skeleton/src/Title.jsx
new file mode 100644
index 00000000000..5536bd2cd77
--- /dev/null
+++ b/packages/skeleton/src/Title.jsx
@@ -0,0 +1,19 @@
+import PropTypes from 'element-ui/src/utils/vue-types';
+
+const skeletonTitleProps = {
+  prefixCls: PropTypes.string,
+  width: PropTypes.oneOfType([PropTypes.number, PropTypes.string])
+};
+
+export const SkeletonTitleProps = PropTypes.shape(skeletonTitleProps);
+
+const Title = {
+  props: skeletonTitleProps,
+  render() {
+    const { prefixCls, width } = this.$props;
+    const zWidth = typeof width === 'number' ? `${width}px` : width;
+    return <h3 class={prefixCls} style={{ width: zWidth }} />;
+  }
+};
+
+export default Title;
diff --git a/packages/skeleton/src/index.jsx b/packages/skeleton/src/index.jsx
new file mode 100644
index 00000000000..9247e77cd21
--- /dev/null
+++ b/packages/skeleton/src/index.jsx
@@ -0,0 +1,155 @@
+import classNames from 'classnames';
+import PropTypes from 'element-ui/src/utils/vue-types';
+import { initDefaultProps, hasProp } from 'element-ui/src/utils/props-util';
+
+import Avatar, { SkeletonAvatarProps } from './Avatar.jsx'; // eslint-disable-line
+import Title, { SkeletonTitleProps } from './Title.jsx'; // eslint-disable-line
+import Paragraph, { SkeletonParagraphProps } from './Paragraph.jsx'; // eslint-disable-line
+
+export const SkeletonProps = {
+  active: PropTypes.bool,
+  loading: PropTypes.bool,
+  prefixCls: PropTypes.string,
+  children: PropTypes.any,
+  avatar: PropTypes.oneOfType([PropTypes.string, SkeletonAvatarProps, PropTypes.bool]),
+  title: PropTypes.oneOfType([PropTypes.bool, PropTypes.string, SkeletonTitleProps]),
+  paragraph: PropTypes.oneOfType([PropTypes.bool, PropTypes.string, SkeletonParagraphProps])
+};
+
+function getComponentProps(prop) {
+  if (prop && typeof prop === 'object') {
+    return prop;
+  }
+  return {};
+}
+
+function getAvatarBasicProps(hasTitle, hasParagraph) {
+  if (hasTitle && !hasParagraph) {
+    return { shape: 'square' };
+  }
+
+  return { shape: 'circle' };
+}
+
+function getTitleBasicProps(hasAvatar, hasParagraph) {
+  if (!hasAvatar && hasParagraph) {
+    return { width: '38%' };
+  }
+
+  if (hasAvatar && hasParagraph) {
+    return { width: '50%' };
+  }
+
+  return {};
+}
+
+function getParagraphBasicProps(hasAvatar, hasTitle) {
+  const basicProps = {};
+
+  // Width
+  if (!hasAvatar || !hasTitle) {
+    basicProps.width = '61%';
+  }
+
+  // Rows
+  if (!hasAvatar && hasTitle) {
+    basicProps.rows = 3;
+  } else {
+    basicProps.rows = 2;
+  }
+  return basicProps;
+}
+
+const Skeleton = {
+  name: 'ElSkeleton',
+  props: initDefaultProps(SkeletonProps, {
+    avatar: false,
+    title: true,
+    paragraph: true
+  }),
+  render() {
+    const {
+      loading,
+      avatar,
+      title,
+      paragraph,
+      active
+    } = this.$props;
+    const prefixCls = 'el-skeleton';
+    if (loading || !hasProp(this, 'loading')) {
+      const hasAvatar = !!avatar || avatar === '';
+      const hasTitle = !!title;
+      const hasParagraph = !!paragraph;
+
+      // Avatar
+      let avatarNode;
+      if (hasAvatar) {
+        const avatarProps = {
+          props: {
+            prefixCls: `${prefixCls}-avatar`,
+            ...getAvatarBasicProps(hasTitle, hasParagraph),
+            ...getComponentProps(avatar)
+          }
+        };
+
+        avatarNode = (
+          <div class={`${prefixCls}-header`}>
+            <Avatar {...avatarProps} />
+          </div>
+        );
+      }
+
+      let contentNode;
+      if (hasTitle || hasParagraph) {
+        // Title
+        let $title;
+        if (hasTitle) {
+          const titleProps = {
+            props: {
+              prefixCls: `${prefixCls}-title`,
+              ...getTitleBasicProps(hasAvatar, hasParagraph),
+              ...getComponentProps(title)
+            }
+          };
+
+          $title = <Title {...titleProps} />;
+        }
+
+        // Paragraph
+        let paragraphNode;
+        if (hasParagraph) {
+          const paragraphProps = {
+            props: {
+              prefixCls: `${prefixCls}-paragraph`,
+              ...getParagraphBasicProps(hasAvatar, hasTitle),
+              ...getComponentProps(paragraph)
+            }
+          };
+          paragraphNode = <Paragraph {...paragraphProps} />;
+        }
+
+        contentNode = (
+          <div class={`${prefixCls}-content`}>
+            {$title}
+            {paragraphNode}
+          </div>
+        );
+      }
+
+      const cls = classNames(prefixCls, {
+        [`${prefixCls}-with-avatar`]: hasAvatar,
+        [`${prefixCls}-active`]: active
+      });
+
+      return (
+        <div class={cls}>
+          {avatarNode}
+          {contentNode}
+        </div>
+      );
+    }
+    return this.$slots.default && this.$slots.default[0];
+  }
+};
+
+export default Skeleton;
diff --git a/packages/slider/src/button.vue b/packages/slider/src/button.vue
index 241dc83b06f..5dfa4387f9b 100644
--- a/packages/slider/src/button.vue
+++ b/packages/slider/src/button.vue
@@ -145,11 +145,13 @@
         if (this.disabled) return;
         this.newPosition = parseFloat(this.currentPosition) - this.step / (this.max - this.min) * 100;
         this.setPosition(this.newPosition);
+        this.$parent.emitChange();
       },
       onRightKeyDown() {
         if (this.disabled) return;
         this.newPosition = parseFloat(this.currentPosition) + this.step / (this.max - this.min) * 100;
         this.setPosition(this.newPosition);
+        this.$parent.emitChange();
       },
       onDragStart(event) {
         this.dragging = true;
@@ -224,6 +226,7 @@
         value = parseFloat(value.toFixed(this.precision));
         this.$emit('input', value);
         this.$nextTick(() => {
+          this.displayTooltip();
           this.$refs.tooltip && this.$refs.tooltip.updatePopper();
         });
         if (!this.dragging && this.value !== this.oldValue) {
diff --git a/packages/slider/src/main.vue b/packages/slider/src/main.vue
index 3c326fbc2c1..68d00ad4cbb 100644
--- a/packages/slider/src/main.vue
+++ b/packages/slider/src/main.vue
@@ -1,18 +1,19 @@
 <template>
-  <div class="el-slider"
+  <div
+    class="el-slider"
     :class="{ 'is-vertical': vertical, 'el-slider--with-input': showInput }"
-     role="slider"
-     :aria-valuemin="min"
-     :aria-valuemax="max"
-     :aria-orientation="vertical ? 'vertical': 'horizontal'"
-     :aria-disabled="sliderDisabled"
+    role="slider"
+    :aria-valuemin="min"
+    :aria-valuemax="max"
+    :aria-orientation="vertical ? 'vertical': 'horizontal'"
+    :aria-disabled="sliderDisabled"
   >
     <el-input-number
       v-model="firstValue"
       v-if="showInput && !range"
       class="el-slider__input"
       ref="input"
-      @change="$nextTick(emitChange)"
+      @change="emitChange"
       :step="step"
       :disabled="sliderDisabled"
       :controls="showInputControls"
@@ -21,7 +22,8 @@
       :debounce="debounce"
       :size="inputSize">
     </el-input-number>
-    <div class="el-slider__runway"
+    <div
+      class="el-slider__runway"
       :class="{ 'show-input': showInput, 'disabled': sliderDisabled }"
       :style="runwayStyle"
       @click="onSliderClick"
@@ -47,9 +49,26 @@
         class="el-slider__stop"
         v-for="(item, key) in stops"
         :key="key"
-        :style="vertical ? { 'bottom': item + '%' } : { 'left': item + '%' }"
+        :style="getStopStyle(item)"
         v-if="showStops">
       </div>
+      <template v-if="markList.length > 0">
+        <div>
+          <div
+            v-for="(item, key) in markList"
+            :style="getStopStyle(item.position)"
+            class="el-slider__stop el-slider__marks-stop"
+            :key="key">
+          </div>
+        </div>
+        <div class="el-slider__marks">
+          <slider-marker
+            :mark="item.mark" v-for="(item, key) in markList"
+            :key="key"
+            :style="getStopStyle(item.position)">
+          </slider-marker>
+        </div>
+      </template>
     </div>
   </div>
 </template>
@@ -57,6 +76,7 @@
 <script type="text/babel">
   import ElInputNumber from 'element-ui/packages/input-number';
   import SliderButton from './button.vue';
+  import SliderMarker from './marker';
   import Emitter from 'element-ui/src/mixins/emitter';
 
   export default {
@@ -130,12 +150,14 @@
       label: {
         type: String
       },
-      tooltipClass: String
+      tooltipClass: String,
+      marks: Object
     },
 
     components: {
       ElInputNumber,
-      SliderButton
+      SliderButton,
+      SliderMarker
     },
 
     data() {
@@ -273,6 +295,10 @@
         this.$nextTick(() => {
           this.$emit('change', this.range ? [this.minValue, this.maxValue] : this.value);
         });
+      },
+
+      getStopStyle(position) {
+        return this.vertical ? { 'bottom': position + '%' } : { 'left': position + '%' };
       }
     },
 
@@ -300,6 +326,22 @@
         }
       },
 
+      markList() {
+        if (!this.marks) {
+          return [];
+        }
+
+        const marksKeys = Object.keys(this.marks);
+        return marksKeys.map(parseFloat)
+          .sort((a, b) => a - b)
+          .filter(point => point <= this.max && point >= this.min)
+          .map(point => ({
+            point,
+            position: (point - this.min) * 100 / (this.max - this.min),
+            mark: this.marks[point]
+          }));
+      },
+
       minValue() {
         return Math.min(this.firstValue, this.secondValue);
       },
diff --git a/packages/slider/src/marker.js b/packages/slider/src/marker.js
new file mode 100644
index 00000000000..2d5f91cf07d
--- /dev/null
+++ b/packages/slider/src/marker.js
@@ -0,0 +1,18 @@
+export default {
+  name: 'ElMarker',
+
+  props: {
+    mark: {
+      type: [String, Object]
+    }
+  },
+  render() {
+    let label = typeof this.mark === 'string' ? this.mark : this.mark.label;
+
+    return (
+      <div class="el-slider__marks-text" style={ this.mark.style || {} }>
+        { label }
+      </div>
+    );
+  }
+};
diff --git a/packages/status-steps/index.js b/packages/status-steps/index.js
new file mode 100644
index 00000000000..4a50fac2a91
--- /dev/null
+++ b/packages/status-steps/index.js
@@ -0,0 +1,8 @@
+import StatusSteps from './src/main';
+
+/* istanbul ignore next */
+StatusSteps.install = function(Vue) {
+  Vue.component(StatusSteps.name, StatusSteps);
+};
+
+export default StatusSteps;
diff --git a/packages/status-steps/src/main.vue b/packages/status-steps/src/main.vue
new file mode 100644
index 00000000000..1105a748771
--- /dev/null
+++ b/packages/status-steps/src/main.vue
@@ -0,0 +1,188 @@
+<template>
+    <div
+            class="el-step"
+            :style="style"
+            :class="[
+      !isSimple && `is-${$parent.direction}`,
+      isSimple && 'is-simple',
+      isLast && !space && !isCenter && 'is-flex',
+      isCenter && !isVertical && !isSimple && 'is-center'
+     ]">
+        <!-- icon & line -->
+        <div
+                class="el-step__head"
+                :class="`is-${currentStatus}`">
+            <div
+                    class="el-step__line"
+                    :style="isLast ? '' : { marginRight: $parent.stepOffset + 'px' }"
+            >
+                <i class="el-step__line-inner" :style="lineStyle"></i>
+            </div>
+
+            <div class="el-step__icon" :class="`is-${icon ? 'icon' : 'text'}`">
+                <slot
+                        v-if="currentStatus !== 'success' && currentStatus !== 'error'"
+                        name="icon">
+                    <i v-if="icon" class="el-step__icon-inner" :class="[icon]"></i>
+                    <div class="el-step__icon-inner" v-if="(!icon && isNumber) || (!icon && !isSimple)">{{ index + 1 }}</div>
+                </slot>
+                <i
+                        v-else
+                        :class="['el-icon-' + (currentStatus === 'success' ? 'check' : 'close')]"
+                        class="el-step__icon-inner is-status"
+                >
+                </i>
+            </div>
+        </div>
+        <!-- title & description -->
+        <div class="el-step__main">
+            <div
+                    class="el-step__title"
+                    ref="title"
+                    :class="['is-' + currentStatus]">
+                <slot name="title">{{ title }}</slot>
+            </div>
+            <div v-if="isSimple" class="el-step__arrow"></div>
+            <div
+                    v-else
+                    class="el-step__description"
+                    :class="['is-' + currentStatus]">
+                <slot name="description">{{ description }}</slot>
+            </div>
+        </div>
+    </div>
+</template>
+
+<script>
+  export default {
+    name: 'ElStatusSteps',
+
+    props: {
+      title: String,
+      icon: String,
+      description: String,
+      status: String,
+      number: Boolean
+    },
+
+    data() {
+      return {
+        index: -1,
+        lineStyle: {},
+        internalStatus: ''
+      };
+    },
+
+    beforeCreate() {
+      this.$parent.steps.push(this);
+    },
+
+    beforeDestroy() {
+      const steps = this.$parent.steps;
+      const index = steps.indexOf(this);
+      if (index >= 0) {
+        steps.splice(index, 1);
+      }
+    },
+
+    computed: {
+      currentStatus() {
+        return this.status || this.internalStatus;
+      },
+      prevStatus() {
+        const prevStep = this.$parent.steps[this.index - 1];
+        return prevStep ? prevStep.currentStatus : 'wait';
+      },
+      isCenter() {
+        return this.$parent.alignCenter;
+      },
+      isVertical() {
+        return this.$parent.direction === 'vertical';
+      },
+      isSimple() {
+        return this.$parent.simple;
+      },
+      isLast() {
+        const parent = this.$parent;
+        return parent.steps[parent.steps.length - 1] === this;
+      },
+      isNumber() {
+        return this.number;
+      },
+      stepsCount() {
+        return this.$parent.steps.length;
+      },
+      space() {
+        const { isSimple, $parent: { space } } = this;
+        return isSimple ? '' : space ;
+      },
+      style: function() {
+        const style = {};
+        const parent = this.$parent;
+        const len = parent.steps.length;
+
+        const space = (typeof this.space === 'number'
+          ? this.space + 'px'
+          : this.space
+            ? this.space
+            : 100 / (len - (this.isCenter ? 0 : 1)) + '%');
+        style.flexBasis = space;
+        if (this.isVertical) return style;
+        if (this.isLast) {
+          style.maxWidth = 100 / this.stepsCount + '%';
+        } else {
+          style.marginRight = -this.$parent.stepOffset + 'px';
+        }
+
+        return style;
+      }
+    },
+
+    methods: {
+      updateStatus(val) {
+        const prevChild = this.$parent.$children[this.index - 1];
+
+        if (val > this.index) {
+          this.internalStatus = this.$parent.finishStatus;
+        } else if (val === this.index && this.prevStatus !== 'error') {
+          this.internalStatus = this.$parent.processStatus;
+        } else {
+          this.internalStatus = 'wait';
+        }
+
+        if (prevChild) prevChild.calcProgress(this.internalStatus);
+      },
+
+      calcProgress(status) {
+        let step = 100;
+        const style = {};
+
+        style.transitionDelay = 150 * this.index + 'ms';
+        if (status === this.$parent.processStatus) {
+          step = this.currentStatus !== 'error' ? 0 : 0;
+        } else if (status === 'wait') {
+          step = 0;
+          style.transitionDelay = (-150 * this.index) + 'ms';
+        }
+
+        style.borderWidth = step && !this.isSimple ? '1px' : 0;
+        this.$parent.direction === 'vertical'
+          ? style.height = step + '%'
+          : style.width = step + '%';
+
+        this.lineStyle = style;
+      }
+    },
+
+    mounted() {
+      const unwatch = this.$watch('index', val => {
+        this.$watch('$parent.active', this.updateStatus, { immediate: true });
+        this.$watch('$parent.processStatus', () => {
+          const activeIndex = this.$parent.active;
+          this.updateStatus(activeIndex);
+        }, { immediate: true });
+        unwatch();
+      });
+    }
+  };
+</script>
diff --git a/packages/steps/src/step.vue b/packages/steps/src/step.vue
index 1527c778a31..bd5eb92a4f3 100644
--- a/packages/steps/src/step.vue
+++ b/packages/steps/src/step.vue
@@ -161,7 +161,7 @@ export default {
         style.transitionDelay = (-150 * this.index) + 'ms';
       }
 
-      style.borderWidth = step ? '1px' : 0;
+      style.borderWidth = step && !this.isSimple ? '1px' : 0;
       this.$parent.direction === 'vertical'
         ? style.height = step + '%'
         : style.width = step + '%';
@@ -173,6 +173,10 @@ export default {
   mounted() {
     const unwatch = this.$watch('index', val => {
       this.$watch('$parent.active', this.updateStatus, { immediate: true });
+      this.$watch('$parent.processStatus', () => {
+        const activeIndex = this.$parent.active;
+        this.updateStatus(activeIndex);
+      }, { immediate: true });
       unwatch();
     });
   }
diff --git a/packages/switch-enhance/index.js b/packages/switch-enhance/index.js
new file mode 100644
index 00000000000..189451c1341
--- /dev/null
+++ b/packages/switch-enhance/index.js
@@ -0,0 +1,8 @@
+import SwitchEnhance from './src/main';
+
+/* istanbul ignore next */
+SwitchEnhance.install = function(Vue) {
+  Vue.component(SwitchEnhance.name, SwitchEnhance);
+};
+
+export default SwitchEnhance;
diff --git a/packages/switch-enhance/src/main.vue b/packages/switch-enhance/src/main.vue
new file mode 100644
index 00000000000..b02a1d65a78
--- /dev/null
+++ b/packages/switch-enhance/src/main.vue
@@ -0,0 +1,36 @@
+<template>
+  <div class="el-switch-enhance">
+    <el-switch
+      :class="{'square': square, 'inline-text': inlineText}"
+      v-bind="$attrs"
+      :value="value"
+      @input="onInput"
+      v-on="$listeners"
+    />
+  </div>
+</template>
+
+<script>
+export default {
+  name: 'ElSwitchEnhance',
+  props: {
+    square: {
+      type: Boolean,
+      default: false
+    },
+    inlineText: {
+      type: Boolean,
+      default: false
+    },
+    value: {
+      type: [Boolean, String, Number],
+      default: false
+    }
+  },
+  methods: {
+    onInput(v) {
+      this.$emit('input', v);
+    }
+  }
+};
+</script>
diff --git a/packages/switch/src/component.vue b/packages/switch/src/component.vue
index 5b3397f0dc0..88c5483ee5f 100644
--- a/packages/switch/src/component.vue
+++ b/packages/switch/src/component.vue
@@ -5,7 +5,7 @@
     role="switch"
     :aria-checked="checked"
     :aria-disabled="switchDisabled"
-    @click="switchValue"
+    @click.prevent="switchValue"
   >
     <input
       class="el-switch__input"
@@ -36,12 +36,13 @@
   </div>
 </template>
 <script>
+  import emitter from 'element-ui/src/mixins/emitter';
   import Focus from 'element-ui/src/mixins/focus';
   import Migrating from 'element-ui/src/mixins/migrating';
 
   export default {
     name: 'ElSwitch',
-    mixins: [Focus('input'), Migrating],
+    mixins: [Focus('input'), Migrating, emitter],
     inject: {
       elForm: {
         default: ''
@@ -90,6 +91,10 @@
         type: String,
         default: ''
       },
+      validateEvent: {
+        type: Boolean,
+        default: true
+      },
       id: String
     },
     data() {
@@ -116,12 +121,16 @@
         if (this.activeColor || this.inactiveColor) {
           this.setBackgroundColor();
         }
+        if (this.validateEvent) {
+          this.dispatch('ElFormItem', 'el.form.change', [this.value]);
+        }
       }
     },
     methods: {
       handleChange(event) {
-        this.$emit('input', !this.checked ? this.activeValue : this.inactiveValue);
-        this.$emit('change', !this.checked ? this.activeValue : this.inactiveValue);
+        const val = this.checked ? this.inactiveValue : this.activeValue;
+        this.$emit('input', val);
+        this.$emit('change', val);
         this.$nextTick(() => {
           // set input's checked property
           // in case parent refuses to change component's value
diff --git a/packages/table/src/config.js b/packages/table/src/config.js
new file mode 100644
index 00000000000..fc77275637c
--- /dev/null
+++ b/packages/table/src/config.js
@@ -0,0 +1,124 @@
+import { getPropByPath } from 'element-ui/src/utils/util';
+
+export const cellStarts = {
+  default: {
+    order: ''
+  },
+  selection: {
+    width: 48,
+    minWidth: 48,
+    realWidth: 48,
+    order: '',
+    className: 'el-table-column--selection'
+  },
+  expand: {
+    width: 48,
+    minWidth: 48,
+    realWidth: 48,
+    order: ''
+  },
+  index: {
+    width: 48,
+    minWidth: 48,
+    realWidth: 48,
+    order: ''
+  }
+};
+
+// 这些选项不应该被覆盖
+export const cellForced = {
+  selection: {
+    renderHeader: function(h, { store }) {
+      return <el-checkbox
+        disabled={ store.states.data && store.states.data.length === 0 }
+        indeterminate={ store.states.selection.length > 0 && !this.isAllSelected }
+        nativeOn-click={ this.toggleAllSelection }
+        value={ this.isAllSelected } />;
+    },
+    renderCell: function(h, { row, column, store, $index }) {
+      return <el-checkbox
+        nativeOn-click={ (event) => event.stopPropagation() }
+        value={ store.isSelected(row) }
+        indeterminate={ store.isHalfSelected(row) }
+        disabled={ column.selectable ? !column.selectable.call(null, row, $index) : false }
+        on-input={ () => { store.commit('rowSelectedChanged', row); } } />;
+    },
+    sortable: false,
+    resizable: false
+  },
+  index: {
+    renderHeader: function(h, { column }) {
+      return column.label || '#';
+    },
+    renderCell: function(h, { $index, column }) {
+      let i = $index + 1;
+      const index = column.index;
+
+      if (typeof index === 'number') {
+        i = $index + index;
+      } else if (typeof index === 'function') {
+        i = index($index);
+      }
+
+      return <div>{ i }</div>;
+    },
+    sortable: false
+  },
+  expand: {
+    renderHeader: function(h, { column }) {
+      return column.label || '';
+    },
+    renderCell: function(h, { row, store }) {
+      const classes = ['el-table__expand-icon'];
+      if (store.states.expandRows.indexOf(row) > -1) {
+        classes.push('el-table__expand-icon--expanded');
+      }
+      const callback = function(e) {
+        e.stopPropagation();
+        store.toggleRowExpansion(row);
+      };
+      return (<div class={ classes }
+        on-click={callback}>
+        <i class='el-icon el-icon-arrow-right'></i>
+      </div>);
+    },
+    sortable: false,
+    resizable: false,
+    className: 'el-table__expand-column'
+  }
+};
+
+export function defaultRenderCell(h, { row, column, $index }) {
+  const property = column.property;
+  const value = property && getPropByPath(row, property).v;
+  if (column && column.formatter) {
+    return column.formatter(row, column, value, $index);
+  }
+  return value;
+}
+
+export function treeCellPrefix(h, { row, treeNode, store }) {
+  if (!treeNode) return null;
+  const ele = [];
+  const callback = function(e) {
+    e.stopPropagation();
+    store.loadOrToggle(row);
+  };
+  if (treeNode.indent) {
+    ele.push(<span class="el-table__indent" style={{'padding-left': treeNode.indent + 'px'}}></span>);
+  }
+  if (typeof treeNode.expanded === 'boolean' && !treeNode.noLazyChildren) {
+    const expandClasses = ['el-table__expand-icon', treeNode.expanded ? 'el-table__expand-icon--expanded' : ''];
+    let iconClasses = ['el-icon-arrow-right'];
+    if (treeNode.loading) {
+      iconClasses = ['el-icon-loading'];
+    }
+    ele.push(<div class={ expandClasses }
+      on-click={ callback }>
+      <i class={ iconClasses }></i>
+    </div>);
+  } else {
+    ele.push(<span class="el-table__placeholder"></span>);
+  }
+  return ele;
+}
diff --git a/packages/table/src/filter-panel.vue b/packages/table/src/filter-panel.vue
index 9ff7b452471..3220d6dc764 100644
--- a/packages/table/src/filter-panel.vue
+++ b/packages/table/src/filter-panel.vue
@@ -50,6 +50,7 @@
   import Dropdown from './dropdown';
   import ElCheckbox from 'element-ui/packages/checkbox';
   import ElCheckboxGroup from 'element-ui/packages/checkbox-group';
+  import ElScrollbar from 'element-ui/packages/scrollbar';
 
   export default {
     name: 'ElTableFilterPanel',
@@ -62,7 +63,8 @@
 
     components: {
       ElCheckbox,
-      ElCheckboxGroup
+      ElCheckboxGroup,
+      ElScrollbar
     },
 
     props: {
@@ -72,17 +74,6 @@
       }
     },
 
-    customRender(h) {
-      return (<div class="el-table-filter">
-        <div class="el-table-filter__content">
-        </div>
-        <div class="el-table-filter__bottom">
-          <button on-click={ this.handleConfirm }>{ this.t('el.table.confirmFilter') }</button>
-          <button on-click={ this.handleReset }>{ this.t('el.table.resetFilter') }</button>
-        </div>
-      </div>);
-    },
-
     methods: {
       isActive(filter) {
         return filter.value === this.filterValue;
diff --git a/packages/table/src/layout-observer.js b/packages/table/src/layout-observer.js
index 6e9a1c30bc1..605a0f200d8 100644
--- a/packages/table/src/layout-observer.js
+++ b/packages/table/src/layout-observer.js
@@ -33,10 +33,10 @@ export default {
   },
 
   methods: {
-    onColumnsChange() {
+    onColumnsChange(layout) {
       const cols = this.$el.querySelectorAll('colgroup > col');
       if (!cols.length) return;
-      const flattenColumns = this.tableLayout.getFlattenColumns();
+      const flattenColumns = layout.getFlattenColumns();
       const columnsMap = {};
       flattenColumns.forEach((column) => {
         columnsMap[column.id] = column;
diff --git a/packages/table/src/store/current.js b/packages/table/src/store/current.js
new file mode 100644
index 00000000000..19e31ff0d4b
--- /dev/null
+++ b/packages/table/src/store/current.js
@@ -0,0 +1,76 @@
+import { arrayFind } from 'element-ui/src/utils/util';
+import { getRowIdentity } from '../util';
+
+export default {
+  data() {
+    return {
+      states: {
+        // 不可响应的，设置 currentRowKey 时，data 不一定存在，也许无法算出正确的 currentRow
+        // 把该值缓存一下，当用户点击修改 currentRow 时，把该值重置为 null
+        _currentRowKey: null,
+        currentRow: null
+      }
+    };
+  },
+
+  methods: {
+    setCurrentRowKey(key) {
+      this.assertRowKey();
+      this.states._currentRowKey = key;
+      this.setCurrentRowByKey(key);
+    },
+
+    restoreCurrentRowKey() {
+      this.states._currentRowKey = null;
+    },
+
+    setCurrentRowByKey(key) {
+      const { states } = this;
+      const { data = [], rowKey } = states;
+      let currentRow = null;
+      if (rowKey) {
+        currentRow = arrayFind(data, item => getRowIdentity(item, rowKey) === key);
+      }
+      states.currentRow = currentRow;
+    },
+
+    updateCurrentRow(currentRow) {
+      const { states, table } = this;
+      const oldCurrentRow = states.currentRow;
+      if (currentRow && currentRow !== oldCurrentRow) {
+        states.currentRow = currentRow;
+        table.$emit('current-change', currentRow, oldCurrentRow);
+        return;
+      }
+      if (!currentRow && oldCurrentRow) {
+        states.currentRow = null;
+        table.$emit('current-change', null, oldCurrentRow);
+      }
+    },
+
+    updateCurrentRowData() {
+      const { states, table } = this;
+      const { rowKey, _currentRowKey } = states;
+      // data 为 null 时，解构时的默认值会被忽略
+      const data = states.data || [];
+      const oldCurrentRow = states.currentRow;
+
+      // 当 currentRow 不在 data 中时尝试更新数据
+      if (data.indexOf(oldCurrentRow) === -1 && oldCurrentRow) {
+        if (rowKey) {
+          const currentRowKey = getRowIdentity(oldCurrentRow, rowKey);
+          this.setCurrentRowByKey(currentRowKey);
+        } else {
+          states.currentRow = null;
+        }
+        if (states.currentRow === null) {
+          table.$emit('current-change', null, oldCurrentRow);
+        }
+      } else if (_currentRowKey) {
+        // 把初始时下设置的 rowKey 转化成 rowData
+        this.setCurrentRowByKey(_currentRowKey);
+        this.restoreCurrentRowKey();
+      }
+    }
+  }
+};
diff --git a/packages/table/src/store/expand.js b/packages/table/src/store/expand.js
new file mode 100644
index 00000000000..65b7ce8a736
--- /dev/null
+++ b/packages/table/src/store/expand.js
@@ -0,0 +1,65 @@
+import { toggleRowStatus, getKeysMap, getRowIdentity } from '../util';
+
+export default {
+  data() {
+    return {
+      states: {
+        defaultExpandAll: false,
+        expandRows: []
+      }
+    };
+  },
+
+  methods: {
+    updateExpandRows() {
+      const { data = [], rowKey, defaultExpandAll, expandRows } = this.states;
+      if (defaultExpandAll) {
+        this.states.expandRows = data.slice();
+      } else if (rowKey) {
+        // TODO：这里的代码可以优化
+        const expandRowsMap = getKeysMap(expandRows, rowKey);
+        this.states.expandRows = data.reduce((prev, row) => {
+          const rowId = getRowIdentity(row, rowKey);
+          const rowInfo = expandRowsMap[rowId];
+          if (rowInfo) {
+            prev.push(row);
+          }
+          return prev;
+        }, []);
+      } else {
+        this.states.expandRows = [];
+      }
+    },
+
+    toggleRowExpansion(row, expanded) {
+      const changed = toggleRowStatus(this.states.expandRows, row, expanded);
+      if (changed) {
+        this.table.$emit('expand-change', row, this.states.expandRows.slice());
+        this.scheduleLayout();
+      }
+    },
+
+    setExpandRowKeys(rowKeys) {
+      this.assertRowKey();
+      // TODO：这里的代码可以优化
+      const { data, rowKey } = this.states;
+      const keysMap = getKeysMap(data, rowKey);
+      this.states.expandRows = rowKeys.reduce((prev, cur) => {
+        const info = keysMap[cur];
+        if (info) {
+          prev.push(info.row);
+        }
+        return prev;
+      }, []);
+    },
+
+    isRowExpanded(row) {
+      const { expandRows = [], rowKey } = this.states;
+      if (rowKey) {
+        const expandMap = getKeysMap(expandRows, rowKey);
+        return !!expandMap[getRowIdentity(row, rowKey)];
+      }
+      return expandRows.indexOf(row) !== -1;
+    }
+  }
+};
diff --git a/packages/table/src/store/helper.js b/packages/table/src/store/helper.js
new file mode 100644
index 00000000000..b27ee896bcc
--- /dev/null
+++ b/packages/table/src/store/helper.js
@@ -0,0 +1,41 @@
+import Store from './index';
+import debounce from 'throttle-debounce/debounce';
+
+export function createStore(table, initialState = {}) {
+  if (!table) {
+    throw new Error('Table is required.');
+  }
+
+  const store = new Store();
+  store.table = table;
+  // fix https://github.com/ElemeFE/element/issues/14075
+  // related pr https://github.com/ElemeFE/element/pull/14146
+  store.toggleAllSelection = debounce(10, store._toggleAllSelection);
+  Object.keys(initialState).forEach(key => {
+    store.states[key] = initialState[key];
+  });
+  return store;
+}
+
+export function mapStates(mapper) {
+  const res = {};
+  Object.keys(mapper).forEach(key => {
+    const value = mapper[key];
+    let fn;
+    if (typeof value === 'string') {
+      fn = function() {
+        return this.store.states[value];
+      };
+    } else if (typeof value === 'function') {
+      fn = function() {
+        return value.call(this, this.store.states);
+      };
+    } else {
+      console.error('invalid value type');
+    }
+    if (fn) {
+      res[key] = fn;
+    }
+  });
+  return res;
+};
diff --git a/packages/table/src/store/index.js b/packages/table/src/store/index.js
new file mode 100644
index 00000000000..0bf49360080
--- /dev/null
+++ b/packages/table/src/store/index.js
@@ -0,0 +1,147 @@
+import Vue from 'vue';
+import Watcher from './watcher';
+import { arrayFind } from 'element-ui/src/utils/util';
+
+Watcher.prototype.mutations = {
+  setData(states, data) {
+    const dataInstanceChanged = states._data !== data;
+    states._data = data;
+
+    this.execQuery();
+    // 数据变化，更新部分数据。
+    // 没有使用 computed，而是手动更新部分数据 https://github.com/vuejs/vue/issues/6660#issuecomment-331417140
+    this.updateCurrentRowData();
+    this.updateExpandRows();
+    if (states.reserveSelection) {
+      this.assertRowKey();
+      this.updateSelectionByRowKey();
+    } else {
+      if (dataInstanceChanged) {
+        this.clearSelection();
+      } else {
+        this.cleanSelection();
+      }
+    }
+    this.updateAllSelected();
+
+    this.updateTableScrollY();
+  },
+
+  insertColumn(states, column, index, parent) {
+    let array = states._columns;
+    if (parent) {
+      array = parent.children;
+      if (!array) array = parent.children = [];
+    }
+
+    if (typeof index !== 'undefined') {
+      array.splice(index, 0, column);
+    } else {
+      array.push(column);
+    }
+
+    if (column.type === 'selection') {
+      states.selectable = column.selectable;
+      states.reserveSelection = column.reserveSelection;
+    }
+
+    if (this.table.$ready) {
+      this.updateColumns(); // hack for dynamics insert column
+      this.scheduleLayout();
+    }
+  },
+
+  removeColumn(states, column, parent) {
+    let array = states._columns;
+    if (parent) {
+      array = parent.children;
+      if (!array) array = parent.children = [];
+    }
+    if (array) {
+      array.splice(array.indexOf(column), 1);
+    }
+
+    if (this.table.$ready) {
+      this.updateColumns(); // hack for dynamics remove column
+      this.scheduleLayout();
+    }
+  },
+
+  sort(states, options) {
+    const { prop, order, init } = options;
+    if (prop) {
+      const column = arrayFind(states.columns, column => column.property === prop);
+      if (column) {
+        column.order = order;
+        this.updateSort(column, prop, order);
+        this.commit('changeSortCondition', { init });
+      }
+    }
+  },
+
+  changeSortCondition(states, options) {
+    // 修复 pr https://github.com/ElemeFE/element/pull/15012 导致的 bug
+    const { sortingColumn: column, sortProp: prop, sortOrder: order } = states;
+    if (order === null) {
+      states.sortingColumn = null;
+      states.sortProp = null;
+    }
+    const ingore = { filter: true };
+    this.execQuery(ingore);
+
+    if (!options || !(options.silent || options.init)) {
+      this.table.$emit('sort-change', {
+        column,
+        prop,
+        order
+      });
+    }
+
+    this.updateTableScrollY();
+  },
+
+  filterChange(states, options) {
+    let { column, values, silent } = options;
+    const newFilters = this.updateFilters(column, values);
+
+    this.execQuery();
+
+    if (!silent) {
+      this.table.$emit('filter-change', newFilters);
+    }
+
+    this.updateTableScrollY();
+  },
+
+  toggleAllSelection() {
+    this.toggleAllSelection();
+  },
+
+  rowSelectedChanged(states, row) {
+    this.toggleRowSelection(row);
+    this.updateAllSelected();
+  },
+
+  setHoverRow(states, row) {
+    states.hoverRow = row;
+  },
+
+  setCurrentRow(states, row) {
+    this.updateCurrentRow(row);
+  }
+};
+
+Watcher.prototype.commit = function(name, ...args) {
+  const mutations = this.mutations;
+  if (mutations[name]) {
+    mutations[name].apply(this, [this.states].concat(args));
+  } else {
+    throw new Error(`Action not found: ${name}`);
+  }
+};
+
+Watcher.prototype.updateTableScrollY = function() {
+  Vue.nextTick(this.table.updateScrollY);
+};
+
+export default Watcher;
diff --git a/packages/table/src/store/tree.js b/packages/table/src/store/tree.js
new file mode 100644
index 00000000000..7558588f8a5
--- /dev/null
+++ b/packages/table/src/store/tree.js
@@ -0,0 +1,208 @@
+import { walkTreeNode, getRowIdentity } from '../util';
+
+export default {
+  data() {
+    return {
+      states: {
+        // defaultExpandAll 存在于 expand.js 中，这里不重复添加
+        // 在展开行中，expandRowKeys 会被转化成 expandRows，expandRowKeys 这个属性只是记录了 TreeTable 行的展开
+        // TODO: 拆分为独立的 TreeTable，统一用法
+        expandRowKeys: [],
+        treeData: {},
+        indent: 16,
+        lazy: false,
+        lazyTreeNodeMap: {},
+        lazyColumnIdentifier: 'hasChildren',
+        childrenColumnName: 'children'
+      }
+    };
+  },
+
+  computed: {
+    // 嵌入型的数据，watch 无法是检测到变化 https://github.com/ElemeFE/element/issues/14998
+    // TODO: 使用 computed 解决该问题，是否会造成性能问题？
+    // @return { id: { level, children } }
+    normalizedData() {
+      if (!this.states.rowKey) return {};
+      const data = this.states.data || [];
+      return this.normalize(data);
+    },
+    // @return { id: { children } }
+    // 针对懒加载的情形，不处理嵌套数据
+    normalizedLazyNode() {
+      const { rowKey, lazyTreeNodeMap, lazyColumnIdentifier } = this.states;
+      const keys = Object.keys(lazyTreeNodeMap);
+      const res = {};
+      if (!keys.length) return res;
+      keys.forEach(key => {
+        if (lazyTreeNodeMap[key].length) {
+          const item = { children: [] };
+          lazyTreeNodeMap[key].forEach(row => {
+            const currentRowKey = getRowIdentity(row, rowKey);
+            item.children.push(currentRowKey);
+            if (row[lazyColumnIdentifier] && !res[currentRowKey]) {
+              res[currentRowKey] = { children: [] };
+            }
+          });
+          res[key] = item;
+        }
+      });
+      return res;
+    }
+  },
+
+  watch: {
+    normalizedData: 'updateTreeData',
+    normalizedLazyNode: 'updateTreeData'
+  },
+
+  methods: {
+    normalize(data) {
+      const {
+        childrenColumnName,
+        lazyColumnIdentifier,
+        rowKey,
+        lazy
+      } = this.states;
+      const res = {};
+      walkTreeNode(
+        data,
+        (parent, children, level) => {
+          const parentId = getRowIdentity(parent, rowKey);
+          if (Array.isArray(children)) {
+            res[parentId] = {
+              children: children.map(row => getRowIdentity(row, rowKey)),
+              level
+            };
+          } else if (lazy) {
+            // 当 children 不存在且 lazy 为 true，该节点即为懒加载的节点
+            res[parentId] = {
+              children: [],
+              lazy: true,
+              level
+            };
+          }
+        },
+        childrenColumnName,
+        lazyColumnIdentifier
+      );
+      return res;
+    },
+
+    updateTreeData() {
+      const nested = this.normalizedData;
+      const normalizedLazyNode = this.normalizedLazyNode;
+      const keys = Object.keys(nested);
+      const newTreeData = {};
+      if (keys.length) {
+        const {
+          treeData: oldTreeData,
+          defaultExpandAll,
+          expandRowKeys,
+          lazy
+        } = this.states;
+        const rootLazyRowKeys = [];
+        const getExpanded = (oldValue, key) => {
+          const included =
+            defaultExpandAll ||
+            (expandRowKeys && expandRowKeys.indexOf(key) !== -1);
+          return !!((oldValue && oldValue.expanded) || included);
+        };
+        // 合并 expanded 与 display，确保数据刷新后，状态不变
+        keys.forEach(key => {
+          const oldValue = oldTreeData[key];
+          const newValue = { ...nested[key] };
+          newValue.expanded = getExpanded(oldValue, key);
+          if (newValue.lazy) {
+            const { loaded = false, loading = false } = oldValue || {};
+            newValue.loaded = !!loaded;
+            newValue.loading = !!loading;
+            rootLazyRowKeys.push(key);
+          }
+          newTreeData[key] = newValue;
+        });
+        // 根据懒加载数据更新 treeData
+        const lazyKeys = Object.keys(normalizedLazyNode);
+        if (lazy && lazyKeys.length && rootLazyRowKeys.length) {
+          lazyKeys.forEach(key => {
+            const oldValue = oldTreeData[key];
+            const lazyNodeChildren = normalizedLazyNode[key].children;
+            if (rootLazyRowKeys.indexOf(key) !== -1) {
+              // 懒加载的 root 节点，更新一下原有的数据，原来的 children 一定是空数组
+              if (newTreeData[key].children.length !== 0) {
+                throw new Error('[ElTable]children must be an empty array.');
+              }
+              newTreeData[key].children = lazyNodeChildren;
+            } else {
+              const { loaded = false, loading = false } = oldValue || {};
+              newTreeData[key] = {
+                lazy: true,
+                loaded: !!loaded,
+                loading: !!loading,
+                expanded: getExpanded(oldValue, key),
+                children: lazyNodeChildren,
+                level: ''
+              };
+            }
+          });
+        }
+      }
+      this.states.treeData = newTreeData;
+      this.updateTableScrollY();
+    },
+
+    updateTreeExpandKeys(value) {
+      this.states.expandRowKeys = value;
+      this.updateTreeData();
+    },
+
+    toggleTreeExpansion(row, expanded) {
+      this.assertRowKey();
+
+      const { rowKey, treeData } = this.states;
+      const id = getRowIdentity(row, rowKey);
+      const data = id && treeData[id];
+      if (id && data && ('expanded' in data)) {
+        const oldExpanded = data.expanded;
+        expanded = typeof expanded === 'undefined' ? !data.expanded : expanded;
+        treeData[id].expanded = expanded;
+        if (oldExpanded !== expanded) {
+          this.table.$emit('expand-change', row, expanded);
+        }
+        this.updateTableScrollY();
+      }
+    },
+
+    loadOrToggle(row) {
+      this.assertRowKey();
+      const { lazy, treeData, rowKey } = this.states;
+      const id = getRowIdentity(row, rowKey);
+      const data = treeData[id];
+      if (lazy && data && 'loaded' in data && !data.loaded) {
+        this.loadData(row, id, data);
+      } else {
+        this.toggleTreeExpansion(row);
+      }
+    },
+
+    loadData(row, key, treeNode) {
+      const { load } = this.table;
+      const { lazyTreeNodeMap, treeData } = this.states;
+      if (load && !treeData[key].loaded) {
+        treeData[key].loading = true;
+        load(row, treeNode, data => {
+          if (!Array.isArray(data)) {
+            throw new Error('[ElTable] data must be an array');
+          }
+          treeData[key].loading = false;
+          treeData[key].loaded = true;
+          treeData[key].expanded = true;
+          if (data.length) {
+            this.$set(lazyTreeNodeMap, key, data);
+          }
+          this.table.$emit('expand-change', row, true);
+        });
+      }
+    }
+  }
+};
diff --git a/packages/table/src/store/watcher.js b/packages/table/src/store/watcher.js
new file mode 100644
index 00000000000..2f64c2277f6
--- /dev/null
+++ b/packages/table/src/store/watcher.js
@@ -0,0 +1,438 @@
+import Vue from 'vue';
+import merge from 'element-ui/src/utils/merge';
+import { getKeysMap, getRowIdentity, getColumnById, getColumnByKey, orderBy, toggleRowStatus, findParentData } from '../util';
+import expand from './expand';
+import current from './current';
+import tree from './tree';
+
+const sortData = (data, states) => {
+  const sortingColumn = states.sortingColumn;
+  if (!sortingColumn || typeof sortingColumn.sortable === 'string') {
+    return data;
+  }
+  return orderBy(data, states.sortProp, states.sortOrder, sortingColumn.sortMethod, sortingColumn.sortBy);
+};
+
+const doFlattenColumns = (columns) => {
+  const result = [];
+  columns.forEach((column) => {
+    if (column.children) {
+      result.push.apply(result, doFlattenColumns(column.children));
+    } else {
+      result.push(column);
+    }
+  });
+  return result;
+};
+
+const changeAllSelectionState = (data, states, selection, status) => {
+  let selectionChanged = false;
+  // 这里递归解决
+  data.forEach((row, index) => {
+    if (states.selectable) {
+      if (states.selectable.call(null, row, index) && toggleRowStatus(selection, row, status)) {
+        selectionChanged = true;
+      }
+    } else {
+      if (toggleRowStatus(selection, row, status)) {
+        selectionChanged = true;
+      }
+    }
+    if (row[ states.childrenColumnName ]) {
+      selectionChanged = changeAllSelectionState(row[ states.childrenColumnName ], states, selection, status) || selectionChanged;
+    }
+  });
+
+  return selectionChanged;
+};
+
+export default Vue.extend({
+  data() {
+    return {
+      states: {
+        // 3.0 版本后要求必须设置该属性
+        rowKey: null,
+
+        // 渲染的数据来源，是对 table 中的 data 过滤排序后的结果
+        data: [],
+
+        // 是否包含固定列
+        isComplex: false,
+
+        // 列
+        _columns: [], // 不可响应的
+        originColumns: [],
+        columns: [],
+        fixedColumns: [],
+        rightFixedColumns: [],
+        leafColumns: [],
+        fixedLeafColumns: [],
+        rightFixedLeafColumns: [],
+        leafColumnsLength: 0,
+        fixedLeafColumnsLength: 0,
+        rightFixedLeafColumnsLength: 0,
+
+        // 选择
+        isAllSelected: false,
+        selection: [],
+        halfSelection: [],
+        reserveSelection: false,
+        selectOnIndeterminate: false,
+        selectable: null,
+
+        // 过滤
+        filters: {}, // 不可响应的
+        filteredData: null,
+
+        // 排序
+        sortingColumn: null,
+        sortProp: null,
+        sortOrder: null,
+
+        hoverRow: null
+      }
+    };
+  },
+
+  mixins: [expand, current, tree],
+
+  methods: {
+    // 检查 rowKey 是否存在
+    assertRowKey() {
+      const rowKey = this.states.rowKey;
+      if (!rowKey) throw new Error('[ElTable] prop row-key is required');
+    },
+
+    // 更新列
+    updateColumns() {
+      const states = this.states;
+      const _columns = states._columns || [];
+      states.fixedColumns = _columns.filter((column) => column.fixed === true || column.fixed === 'left');
+      states.rightFixedColumns = _columns.filter((column) => column.fixed === 'right');
+
+      if (states.fixedColumns.length > 0 && _columns[0] && _columns[0].type === 'selection' && !_columns[0].fixed) {
+        _columns[0].fixed = true;
+        states.fixedColumns.unshift(_columns[0]);
+      }
+
+      const notFixedColumns = _columns.filter(column => !column.fixed);
+      states.originColumns = [].concat(states.fixedColumns).concat(notFixedColumns).concat(states.rightFixedColumns);
+
+      const leafColumns = doFlattenColumns(notFixedColumns);
+      const fixedLeafColumns = doFlattenColumns(states.fixedColumns);
+      const rightFixedLeafColumns = doFlattenColumns(states.rightFixedColumns);
+
+      states.leafColumnsLength = leafColumns.length;
+      states.fixedLeafColumnsLength = fixedLeafColumns.length;
+      states.rightFixedLeafColumnsLength = rightFixedLeafColumns.length;
+
+      states.columns = [].concat(fixedLeafColumns).concat(leafColumns).concat(rightFixedLeafColumns);
+      states.isComplex = states.fixedColumns.length > 0 || states.rightFixedColumns.length > 0;
+    },
+
+    // 更新 DOM
+    scheduleLayout(needUpdateColumns) {
+      if (needUpdateColumns) {
+        this.updateColumns();
+      }
+      this.table.debouncedUpdateLayout();
+    },
+
+    // 选择
+    isSelected(row) {
+      const { selection = [] } = this.states;
+      return selection.indexOf(row) > -1;
+    },
+
+    isHalfSelected(row) {
+      const { halfSelection = [] } = this.states;
+      return halfSelection.indexOf(row) > -1;
+    },
+
+    clearSelection() {
+      const states = this.states;
+      states.isAllSelected = false;
+      const oldSelection = states.selection;
+      if (oldSelection.length) {
+        states.selection = [];
+        this.table.$emit('selection-change', []);
+      }
+    },
+
+    cleanSelection() {
+      const states = this.states;
+      const { data, rowKey, selection } = states;
+      let deleted;
+      if (rowKey) {
+        deleted = [];
+        const selectedMap = getKeysMap(selection, rowKey);
+        const dataMap = getKeysMap(data, rowKey);
+        for (let key in selectedMap) {
+          if (selectedMap.hasOwnProperty(key) && !dataMap[key]) {
+            deleted.push(selectedMap[key].row);
+          }
+        }
+      } else {
+        deleted = selection.filter(item => data.indexOf(item) === -1);
+      }
+      if (deleted.length) {
+        const newSelection = selection.filter(item => deleted.indexOf(item) === -1);
+        states.selection = newSelection;
+        this.table.$emit('selection-change', newSelection.slice());
+      }
+    },
+
+    toggleRowSelection(row, selected, emitChange = true) {
+      let changed = toggleRowStatus(this.states.selection, row, selected);
+      const {checkStrictly, childrenColumnName, data = []} = this.states;
+      selected = this.isSelected(row);
+      // 切换半选状态
+      const toggleHalfSelect = (row, isHalfSelected) => {
+        if (typeof isHalfSelected !== 'boolean') {
+          isHalfSelected = this.isHalfSelected(row) && !selected;
+        }
+        toggleRowStatus(this.states.halfSelection, row, isHalfSelected);
+      };
+      toggleHalfSelect(row);
+      // 同步子级数据及父级数据
+      if (!checkStrictly) {
+        // 同步子级数据
+        // 递归调用子数据
+        const asyncChildrenData = (row) => {
+          if (row[childrenColumnName]) {
+            row[childrenColumnName].forEach(child => {
+              changed = toggleRowStatus(this.states.selection, child, selected) || changed;
+              toggleHalfSelect(child);
+              asyncChildrenData(child);
+            });
+          }
+        };
+        asyncChildrenData(row);
+        // 同步父数据
+        // 兄弟数据状态查找
+        // 兄弟全为选中，父数据添加进selection，再递归同步父数据
+        // 兄弟不全为选中，selection移除父数据，父数据添加进halfSelection，递归父数据添加进halfSelection
+        const asyncParentData = (parentData, current, childKey) => {
+          const parent = findParentData(parentData, current, childKey);
+          if (parent) {
+            const isAllSelected = parent[childKey].every(this.isSelected);
+            const isSomeSelected = parent[childKey].some(child => this.isSelected(child) || this.isHalfSelected(child));
+            toggleHalfSelect(parent, isSomeSelected && !isAllSelected);
+            changed = toggleRowStatus(this.states.selection, parent, isAllSelected) || changed;
+            asyncParentData(parentData, parent, childKey);
+          }
+        };
+        asyncParentData(data, row, childrenColumnName);
+      }
+      if (changed) {
+        const newSelection = (this.states.selection || []).slice();
+        // 调用 API 修改选中值，不触发 select 事件
+        if (emitChange) {
+          this.table.$emit('select', newSelection, row);
+        }
+        this.table.$emit('selection-change', newSelection);
+      }
+    },
+
+    _toggleAllSelection() {
+      const states = this.states;
+      const { data = [], selection } = states;
+      states.halfSelection = [];
+      // when only some rows are selected (but not all), select or deselect all of them
+      // depending on the value of selectOnIndeterminate
+      const value = states.selectOnIndeterminate
+        ? !states.isAllSelected
+        : !(states.isAllSelected || selection.length);
+      states.isAllSelected = value;
+
+      const selectionChanged = changeAllSelectionState(data, states, selection, value);
+
+      if (selectionChanged) {
+        this.table.$emit('selection-change', selection ? selection.slice() : []);
+      }
+      this.table.$emit('select-all', selection);
+    },
+
+    updateSelectionByRowKey() {
+      const states = this.states;
+      const { selection, rowKey, data } = states;
+      const selectedMap = getKeysMap(selection, rowKey);
+      data.forEach(row => {
+        const rowId = getRowIdentity(row, rowKey);
+        const rowInfo = selectedMap[rowId];
+        if (rowInfo) {
+          selection[rowInfo.index] = row;
+        }
+      });
+    },
+
+    updateAllSelected() {
+      const states = this.states;
+      const { selection, rowKey, selectable } = states;
+      // data 为 null 时，解构时的默认值会被忽略
+      const data = states.data || [];
+      if (data.length === 0) {
+        states.isAllSelected = false;
+        return;
+      }
+
+      let selectedMap;
+      if (rowKey) {
+        selectedMap = getKeysMap(selection, rowKey);
+      }
+      const isSelected = function(row) {
+        if (selectedMap) {
+          return !!selectedMap[getRowIdentity(row, rowKey)];
+        } else {
+          return selection.indexOf(row) !== -1;
+        }
+      };
+      let isAllSelected = true;
+      let selectedCount = 0;
+      for (let i = 0, j = data.length; i < j; i++) {
+        const item = data[i];
+        const isRowSelectable = selectable && selectable.call(null, item, i);
+        if (!isSelected(item)) {
+          if (!selectable || isRowSelectable) {
+            isAllSelected = false;
+            break;
+          }
+        } else {
+          selectedCount++;
+        }
+      }
+
+      if (selectedCount === 0) isAllSelected = false;
+      states.isAllSelected = isAllSelected;
+    },
+
+    // 过滤与排序
+    updateFilters(columns, values) {
+      if (!Array.isArray(columns)) {
+        columns = [columns];
+      }
+      const states = this.states;
+      const filters = {};
+      columns.forEach(col => {
+        states.filters[col.id] = values;
+        filters[col.columnKey || col.id] = values;
+      });
+
+      return filters;
+    },
+
+    updateSort(column, prop, order) {
+      if (this.states.sortingColumn && this.states.sortingColumn !== column) {
+        this.states.sortingColumn.order = null;
+      }
+      this.states.sortingColumn = column;
+      this.states.sortProp = prop;
+      this.states.sortOrder = order;
+    },
+
+    execFilter() {
+      const states = this.states;
+      const { _data, filters } = states;
+      let data = _data;
+
+      Object.keys(filters).forEach((columnId) => {
+        const values = states.filters[columnId];
+        if (!values || values.length === 0) return;
+        const column = getColumnById(this.states, columnId);
+        if (column && column.filterMethod) {
+          data = data.filter((row) => {
+            return values.some(value => column.filterMethod.call(null, value, row, column));
+          });
+        }
+      });
+
+      states.filteredData = data;
+    },
+
+    execSort() {
+      const states = this.states;
+      states.data = sortData(states.filteredData, states);
+    },
+
+    // 根据 filters 与 sort 去过滤 data
+    execQuery(ignore) {
+      if (!(ignore && ignore.filter)) {
+        this.execFilter();
+      }
+      this.execSort();
+    },
+
+    clearFilter(columnKeys) {
+      const states = this.states;
+      const { tableHeader, fixedTableHeader, rightFixedTableHeader } = this.table.$refs;
+
+      let panels = {};
+      if (tableHeader) panels = merge(panels, tableHeader.filterPanels);
+      if (fixedTableHeader) panels = merge(panels, fixedTableHeader.filterPanels);
+      if (rightFixedTableHeader) panels = merge(panels, rightFixedTableHeader.filterPanels);
+
+      const keys = Object.keys(panels);
+      if (!keys.length) return;
+
+      if (typeof columnKeys === 'string') {
+        columnKeys = [columnKeys];
+      }
+
+      if (Array.isArray(columnKeys)) {
+        const columns = columnKeys.map(key => getColumnByKey(states, key));
+        keys.forEach(key => {
+          const column = columns.find(col => col.id === key);
+          if (column) {
+            // TODO: 优化这里的代码
+            panels[key].filteredValue = [];
+          }
+        });
+        this.commit('filterChange', {
+          column: columns,
+          values: [],
+          silent: true,
+          multi: true
+        });
+      } else {
+        keys.forEach(key => {
+          // TODO: 优化这里的代码
+          panels[key].filteredValue = [];
+        });
+
+        states.filters = {};
+        this.commit('filterChange', {
+          column: {},
+          values: [],
+          silent: true
+        });
+      }
+    },
+
+    clearSort() {
+      const states = this.states;
+      if (!states.sortingColumn) return;
+
+      this.updateSort(null, null, null);
+      this.commit('changeSortCondition', {
+        silent: true
+      });
+    },
+
+    // 适配层，expand-row-keys 在 Expand 与 TreeTable 中都有使用
+    setExpandRowKeysAdapter(val) {
+      // 这里会触发额外的计算，但为了兼容性，暂时这么做
+      this.setExpandRowKeys(val);
+      this.updateTreeExpandKeys(val);
+    },
+
+    // 展开行与 TreeTable 都要使用
+    toggleRowExpansionAdapter(row, expanded) {
+      const hasExpandColumn = this.states.columns.some(({ type }) => type === 'expand');
+      if (hasExpandColumn) {
+        this.toggleRowExpansion(row, expanded);
+      } else {
+        this.toggleTreeExpansion(row, expanded);
+      }
+    }
+  }
+});
diff --git a/packages/table/src/table-body.js b/packages/table/src/table-body.js
index e48c8d2a936..4be819a92ab 100644
--- a/packages/table/src/table-body.js
+++ b/packages/table/src/table-body.js
@@ -1,9 +1,11 @@
+import { arrayFindIndex } from 'element-ui/src/utils/util';
 import { getCell, getColumnByCell, getRowIdentity } from './util';
-import { getStyle, hasClass, addClass, removeClass } from 'element-ui/src/utils/dom';
+import { getStyle, hasClass, removeClass, addClass } from 'element-ui/src/utils/dom';
 import ElCheckbox from 'element-ui/packages/checkbox';
 import ElTooltip from 'element-ui/packages/tooltip';
 import debounce from 'throttle-debounce/debounce';
 import LayoutObserver from './layout-observer';
+import { mapStates } from './store/helper';
 
 export default {
   name: 'ElTableBody',
@@ -28,7 +30,7 @@ export default {
   },
 
   render(h) {
-    const columnsHidden = this.columns.map((column, index) => this.isColumnHidden(index));
+    const data = this.data || [];
     return (
       <table
         class="el-table__body"
@@ -37,139 +39,63 @@ export default {
         border="0">
         <colgroup>
           {
-            this._l(this.columns, column => <col name={ column.id } />)
+            this.columns.map(column => <col name={ column.id } key={column.id} />)
           }
         </colgroup>
         <tbody>
           {
-            this._l(this.data, (row, $index) =>
-              [<tr
-                style={ this.rowStyle ? this.getRowStyle(row, $index) : null }
-                key={ this.table.rowKey ? this.getKeyOfRow(row, $index) : $index }
-                on-dblclick={ ($event) => this.handleDoubleClick($event, row) }
-                on-click={ ($event) => this.handleClick($event, row) }
-                on-contextmenu={ ($event) => this.handleContextMenu($event, row) }
-                on-mouseenter={ _ => this.handleMouseEnter($index) }
-                on-mouseleave={ _ => this.handleMouseLeave() }
-                class={ [this.getRowClass(row, $index)] }>
-                {
-                  this._l(this.columns, (column, cellIndex) => {
-                    const { rowspan, colspan } = this.getSpan(row, column, $index, cellIndex);
-                    if (!rowspan || !colspan) {
-                      return '';
-                    } else {
-                      return (
-                        <td
-                          style={ this.getCellStyle($index, cellIndex, row, column) }
-                          class={ this.getCellClass($index, cellIndex, row, column) }
-                          rowspan={ rowspan }
-                          colspan={ colspan }
-                          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.context || this.table.$vnode.context
-                              },
-                              columnsHidden[cellIndex]
-                            )
-                          }
-                        </td>
-                      );
-                    }
-                  })
-                }
-              </tr>,
-              this.store.isRowExpanded(row)
-                ? (<tr>
-                  <td colspan={ this.columns.length } class="el-table__expanded-cell">
-                    { this.table.renderExpanded ? this.table.renderExpanded(h, { row, $index, store: this.store }) : ''}
-                  </td>
-                </tr>)
-                : ''
-              ]
-            ).concat(
-              <el-tooltip effect={ this.table.tooltipEffect } placement="top" ref="tooltip" content={ this.tooltipContent }></el-tooltip>
-            )
+            data.reduce((acc, row) => {
+              return acc.concat(this.wrappedRowRender(row, acc.length));
+            }, [])
           }
+          <el-tooltip effect={ this.table.tooltipEffect } placement="top" ref="tooltip" content={ this.tooltipContent }></el-tooltip>
         </tbody>
       </table>
     );
   },
 
-  watch: {
-    'store.states.hoverRow'(newVal, oldVal) {
-      if (!this.store.states.isComplex) return;
-      const el = this.$el;
-      if (!el) return;
-      const tr = el.querySelector('tbody').children;
-      const rows = [].filter.call(tr, row => hasClass(row, 'el-table__row'));
-      const oldRow = rows[oldVal];
-      const newRow = rows[newVal];
-      if (oldRow) {
-        removeClass(oldRow, 'hover-row');
-      }
-      if (newRow) {
-        addClass(newRow, 'hover-row');
-      }
-    },
-    'store.states.currentRow'(newVal, oldVal) {
-      if (!this.highlight) return;
-      const el = this.$el;
-      if (!el) return;
-      const data = this.store.states.data;
-      const tr = el.querySelector('tbody').children;
-      const rows = [].filter.call(tr, row => hasClass(row, 'el-table__row'));
-      const oldRow = rows[data.indexOf(oldVal)];
-      const newRow = rows[data.indexOf(newVal)];
-      if (oldRow) {
-        removeClass(oldRow, 'current-row');
-      } else {
-        [].forEach.call(rows, row => removeClass(row, 'current-row'));
-      }
-      if (newRow) {
-        addClass(newRow, 'current-row');
-      }
-    }
-  },
-
   computed: {
     table() {
       return this.$parent;
     },
 
-    data() {
-      return this.store.states.data;
-    },
-
-    columnsCount() {
-      return this.store.states.columns.length;
-    },
-
-    leftFixedLeafCount() {
-      return this.store.states.fixedLeafColumnsLength;
-    },
-
-    rightFixedLeafCount() {
-      return this.store.states.rightFixedLeafColumnsLength;
-    },
-
-    leftFixedCount() {
-      return this.store.states.fixedColumns.length;
-    },
-
-    rightFixedCount() {
-      return this.store.states.rightFixedColumns.length;
-    },
+    ...mapStates({
+      data: 'data',
+      columns: 'columns',
+      treeIndent: 'indent',
+      leftFixedLeafCount: 'fixedLeafColumnsLength',
+      rightFixedLeafCount: 'rightFixedLeafColumnsLength',
+      columnsCount: states => states.columns.length,
+      leftFixedCount: states => states.fixedColumns.length,
+      rightFixedCount: states => states.rightFixedColumns.length,
+      hasExpandColumn: states => states.columns.some(({ type }) => type === 'expand')
+    }),
+
+    firstDefaultColumnIndex() {
+      return arrayFindIndex(this.columns, ({ type }) => type === 'default');
+    }
+  },
 
-    columns() {
-      return this.store.states.columns;
+  watch: {
+    // don't trigger getter of currentRow in getCellClass. see https://jsfiddle.net/oe2b4hqt/
+    // update DOM manually. see https://github.com/ElemeFE/element/pull/13954/files#diff-9b450c00d0a9dec0ffad5a3176972e40
+    'store.states.hoverRow'(newVal, oldVal) {
+      if (!this.store.states.isComplex || this.$isServer) return;
+      let raf = window.requestAnimationFrame;
+      if (!raf) {
+        raf = (fn) => setTimeout(fn, 16);
+      }
+      raf(() => {
+        const rows = this.$el.querySelectorAll('.el-table__row');
+        const oldRow = rows[oldVal];
+        const newRow = rows[newVal];
+        if (oldRow) {
+          removeClass(oldRow, 'hover-row');
+        }
+        if (newRow) {
+          addClass(newRow, 'hover-row');
+        }
+      });
     }
   },
 
@@ -205,7 +131,6 @@ export default {
     getSpan(row, column, rowIndex, columnIndex) {
       let rowspan = 1;
       let colspan = 1;
-
       const fn = this.table.spanMethod;
       if (typeof fn === 'function') {
         const result = fn({
@@ -214,7 +139,6 @@ export default {
           rowIndex,
           columnIndex
         });
-
         if (Array.isArray(result)) {
           rowspan = result[0];
           colspan = result[1];
@@ -223,11 +147,7 @@ export default {
           colspan = result.colspan;
         }
       }
-
-      return {
-        rowspan,
-        colspan
-      };
+      return { rowspan, colspan };
     },
 
     getRowStyle(row, rowIndex) {
@@ -238,7 +158,7 @@ export default {
           rowIndex
         });
       }
-      return rowStyle;
+      return rowStyle || null;
     },
 
     getRowClass(row, rowIndex) {
@@ -264,7 +184,7 @@ export default {
         classes.push('expanded');
       }
 
-      return classes.join(' ');
+      return classes;
     },
 
     getCellStyle(rowIndex, columnIndex, row, column) {
@@ -302,6 +222,14 @@ export default {
       return classes.join(' ');
     },
 
+    getColspanRealWidth(columns, colspan, index) {
+      if (colspan < 1) {
+        return columns[index].realWidth;
+      }
+      const widthArr = columns.map(({ realWidth }) => realWidth).slice(index, index + colspan);
+      return widthArr.reduce((acc, width) => acc + width, -1);
+    },
+
     handleCellMouseEnter(event, row) {
       const table = this.table;
       const cell = getCell(event);
@@ -350,13 +278,13 @@ export default {
       this.table.$emit('cell-mouse-leave', oldHoverState.row, oldHoverState.column, oldHoverState.cell, event);
     },
 
-    handleMouseEnter(index) {
+    handleMouseEnter: debounce(30, function(index) {
       this.store.commit('setHoverRow', index);
-    },
+    }),
 
-    handleMouseLeave() {
+    handleMouseLeave: debounce(30, function() {
       this.store.commit('setHoverRow', null);
-    },
+    }),
 
     handleContextMenu(event, row) {
       this.handleEvent(event, row, 'contextmenu');
@@ -381,12 +309,175 @@ export default {
           table.$emit(`cell-${name}`, row, column, cell, event);
         }
       }
-      table.$emit(`row-${name}`, row, event, column);
+      table.$emit(`row-${name}`, row, column, event);
+    },
+
+    rowRender(row, $index, treeRowData) {
+      const { treeIndent, columns, firstDefaultColumnIndex } = this;
+      const columnsHidden = columns.map((column, index) => this.isColumnHidden(index));
+      const rowClasses = this.getRowClass(row, $index);
+      let display = true;
+      if (treeRowData) {
+        rowClasses.push('el-table__row--level-' + treeRowData.level);
+        display = treeRowData.display;
+      }
+      // 指令 v-show 会覆盖 row-style 中 display
+      // 使用 :style 代替 v-show https://github.com/ElemeFE/element/issues/16995
+      let displayStyle = display ? null : {
+        display: 'none'
+      };
+      return (<tr
+        style={ [displayStyle, this.getRowStyle(row, $index)] }
+        class={ rowClasses }
+        key={ this.getKeyOfRow(row, $index) }
+        on-dblclick={ ($event) => this.handleDoubleClick($event, row) }
+        on-click={ ($event) => this.handleClick($event, row) }
+        on-contextmenu={ ($event) => this.handleContextMenu($event, row) }
+        on-mouseenter={ _ => this.handleMouseEnter($index) }
+        on-mouseleave={ this.handleMouseLeave }>
+        {
+          columns.map((column, cellIndex) => {
+            const { rowspan, colspan } = this.getSpan(row, column, $index, cellIndex);
+            if (!rowspan || !colspan) {
+              return null;
+            }
+            const columnData = { ...column };
+            columnData.realWidth = this.getColspanRealWidth(columns, colspan, cellIndex);
+            const data = {
+              store: this.store,
+              _self: this.context || this.table.$vnode.context,
+              column: columnData,
+              row,
+              $index
+            };
+            if (cellIndex === firstDefaultColumnIndex && treeRowData) {
+              data.treeNode = {
+                indent: treeRowData.level * treeIndent,
+                level: treeRowData.level
+              };
+              if (typeof treeRowData.expanded === 'boolean') {
+                data.treeNode.expanded = treeRowData.expanded;
+                // 表明是懒加载
+                if ('loading' in treeRowData) {
+                  data.treeNode.loading = treeRowData.loading;
+                }
+                if ('noLazyChildren' in treeRowData) {
+                  data.treeNode.noLazyChildren = treeRowData.noLazyChildren;
+                }
+              }
+            }
+            return (
+              <td
+                style={ this.getCellStyle($index, cellIndex, row, column) }
+                class={ this.getCellClass($index, cellIndex, row, column) }
+                rowspan={ rowspan }
+                colspan={ colspan }
+                on-mouseenter={ ($event) => this.handleCellMouseEnter($event, row) }
+                on-mouseleave={ this.handleCellMouseLeave }>
+                {
+                  column.renderCell.call(
+                    this._renderProxy,
+                    this.$createElement,
+                    data,
+                    columnsHidden[cellIndex]
+                  )
+                }
+              </td>
+            );
+          })
+        }
+      </tr>);
     },
 
-    handleExpandClick(row, e) {
-      e.stopPropagation();
-      this.store.toggleRowExpansion(row);
+    wrappedRowRender(row, $index) {
+      const store = this.store;
+      const { isRowExpanded, assertRowKey } = store;
+      const { treeData, lazyTreeNodeMap, childrenColumnName, rowKey } = store.states;
+      if (this.hasExpandColumn && isRowExpanded(row)) {
+        const renderExpanded = this.table.renderExpanded;
+        const tr = this.rowRender(row, $index);
+        if (!renderExpanded) {
+          console.error('[Element Error]renderExpanded is required.');
+          return tr;
+        }
+        // 使用二维数组，避免修改 $index
+        return [[
+          tr,
+          <tr key={'expanded-row__' + tr.key}>
+            <td colspan={ this.columnsCount } class="el-table__expanded-cell">
+              { renderExpanded(this.$createElement, { row, $index, store: this.store }) }
+            </td>
+          </tr>]];
+      } else if (Object.keys(treeData).length) {
+        assertRowKey();
+        // TreeTable 时，rowKey 必须由用户设定，不使用 getKeyOfRow 计算
+        // 在调用 rowRender 函数时，仍然会计算 rowKey，不太好的操作
+        const key = getRowIdentity(row, rowKey);
+        let cur = treeData[key];
+        let treeRowData = null;
+        if (cur) {
+          treeRowData = {
+            expanded: cur.expanded,
+            level: cur.level,
+            display: true
+          };
+          if (typeof cur.lazy === 'boolean') {
+            if (typeof cur.loaded === 'boolean' && cur.loaded) {
+              treeRowData.noLazyChildren = !(cur.children && cur.children.length);
+            }
+            treeRowData.loading = cur.loading;
+          }
+        }
+        const tmp = [this.rowRender(row, $index, treeRowData)];
+        // 渲染嵌套数据
+        if (cur) {
+          // currentRow 记录的是 index，所以还需主动增加 TreeTable 的 index
+          let i = 0;
+          const traverse = (children, parent) => {
+            if (!(children && children.length && parent)) return;
+            children.forEach(node => {
+              // 父节点的 display 状态影响子节点的显示状态
+              const innerTreeRowData = {
+                display: parent.display && parent.expanded,
+                level: parent.level + 1
+              };
+              const childKey = getRowIdentity(node, rowKey);
+              if (childKey === undefined || childKey === null) {
+                throw new Error('for nested data item, row-key is required.');
+              }
+              cur = { ...treeData[childKey] };
+              // 对于当前节点，分成有无子节点两种情况。
+              // 如果包含子节点的，设置 expanded 属性。
+              // 对于它子节点的 display 属性由它本身的 expanded 与 display 共同决定。
+              if (cur) {
+                innerTreeRowData.expanded = cur.expanded;
+                // 懒加载的某些节点，level 未知
+                cur.level = cur.level || innerTreeRowData.level;
+                cur.display = !!(cur.expanded && innerTreeRowData.display);
+                if (typeof cur.lazy === 'boolean') {
+                  if (typeof cur.loaded === 'boolean' && cur.loaded) {
+                    innerTreeRowData.noLazyChildren = !(cur.children && cur.children.length);
+                  }
+                  innerTreeRowData.loading = cur.loading;
+                }
+              }
+              i++;
+              tmp.push(this.rowRender(node, $index + i, innerTreeRowData));
+              if (cur) {
+                const nodes = lazyTreeNodeMap[childKey] || node[childrenColumnName];
+                traverse(nodes, cur);
+              }
+            });
+          };
+          // 对于 root 节点，display 一定为 true
+          cur.display = true;
+          const nodes = lazyTreeNodeMap[key] || row[childrenColumnName];
+          traverse(nodes, cur);
+        }
+        return tmp;
+      } else {
+        return this.rowRender(row, $index);
+      }
     }
   }
 };
diff --git a/packages/table/src/table-column.js b/packages/table/src/table-column.js
index c1a197b306e..528eff1ab11 100644
--- a/packages/table/src/table-column.js
+++ b/packages/table/src/table-column.js
@@ -1,141 +1,9 @@
+import { cellStarts, cellForced, defaultRenderCell, treeCellPrefix } from './config';
+import { mergeOptions, parseWidth, parseMinWidth, compose } from './util';
 import ElCheckbox from 'element-ui/packages/checkbox';
-import ElTag from 'element-ui/packages/tag';
-import objectAssign from 'element-ui/src/utils/merge';
-import { getPropByPath } from 'element-ui/src/utils/util';
 
 let columnIdSeed = 1;
 
-const defaults = {
-  default: {
-    order: ''
-  },
-  selection: {
-    width: 48,
-    minWidth: 48,
-    realWidth: 48,
-    order: '',
-    className: 'el-table-column--selection'
-  },
-  expand: {
-    width: 48,
-    minWidth: 48,
-    realWidth: 48,
-    order: ''
-  },
-  index: {
-    width: 48,
-    minWidth: 48,
-    realWidth: 48,
-    order: ''
-  }
-};
-
-const forced = {
-  selection: {
-    renderHeader: function(h, { store }) {
-      return <el-checkbox
-        disabled={ store.states.data && store.states.data.length === 0 }
-        indeterminate={ store.states.selection.length > 0 && !this.isAllSelected }
-        nativeOn-click={ this.toggleAllSelection }
-        value={ this.isAllSelected } />;
-    },
-    renderCell: function(h, { row, column, store, $index }) {
-      return <el-checkbox
-        nativeOn-click={ (event) => event.stopPropagation() }
-        value={ store.isSelected(row) }
-        disabled={ column.selectable ? !column.selectable.call(null, row, $index) : false }
-        on-input={ () => { store.commit('rowSelectedChanged', row); } } />;
-    },
-    sortable: false,
-    resizable: false
-  },
-  index: {
-    renderHeader: function(h, { column }) {
-      return column.label || '#';
-    },
-    renderCell: function(h, { $index, column }) {
-      let i = $index + 1;
-      const index = column.index;
-
-      if (typeof index === 'number') {
-        i = $index + index;
-      } else if (typeof index === 'function') {
-        i = index($index);
-      }
-
-      return <div>{ i }</div>;
-    },
-    sortable: false
-  },
-  expand: {
-    renderHeader: function(h, { column }) {
-      return column.label || '';
-    },
-    renderCell: function(h, { row, store }, proxy) {
-      const expanded = store.states.expandRows.indexOf(row) > -1;
-      return <div class={ 'el-table__expand-icon ' + (expanded ? 'el-table__expand-icon--expanded' : '') }
-        on-click={ e => proxy.handleExpandClick(row, e) }>
-        <i class='el-icon el-icon-arrow-right'></i>
-      </div>;
-    },
-    sortable: false,
-    resizable: false,
-    className: 'el-table__expand-column'
-  }
-};
-
-const getDefaultColumn = function(type, options) {
-  const column = {};
-
-  objectAssign(column, defaults[type || 'default']);
-
-  for (let name in options) {
-    if (options.hasOwnProperty(name)) {
-      const value = options[name];
-      if (typeof value !== 'undefined') {
-        column[name] = value;
-      }
-    }
-  }
-
-  if (!column.minWidth) {
-    column.minWidth = 80;
-  }
-
-  column.realWidth = column.width === undefined ? column.minWidth : column.width;
-
-  return column;
-};
-
-const DEFAULT_RENDER_CELL = function(h, { row, column, $index }) {
-  const property = column.property;
-  const value = property && getPropByPath(row, property).v;
-  if (column && column.formatter) {
-    return column.formatter(row, column, value, $index);
-  }
-  return value;
-};
-
-const parseWidth = (width) => {
-  if (width !== undefined) {
-    width = parseInt(width, 10);
-    if (isNaN(width)) {
-      width = null;
-    }
-  }
-  return width;
-};
-
-const parseMinWidth = (minWidth) => {
-  if (minWidth !== undefined) {
-    minWidth = parseInt(minWidth, 10);
-    if (isNaN(minWidth)) {
-      minWidth = 80;
-    }
-  }
-  return minWidth;
-};
-
 export default {
   name: 'ElTableColumn',
 
@@ -153,7 +21,7 @@ export default {
     minWidth: {},
     renderHeader: Function,
     sortable: {
-      type: [String, Boolean],
+      type: [Boolean, String],
       default: false
     },
     sortMethod: Function,
@@ -162,7 +30,6 @@ export default {
       type: Boolean,
       default: true
     },
-    context: {},
     columnKey: String,
     align: String,
     headerAlign: String,
@@ -199,17 +66,6 @@ export default {
     };
   },
 
-  beforeCreate() {
-    this.row = {};
-    this.column = {};
-    this.$index = 0;
-  },
-
-  components: {
-    ElCheckbox,
-    ElTag
-  },
-
   computed: {
     owner() {
       let parent = this.$parent;
@@ -218,245 +74,246 @@ export default {
       }
       return parent;
     },
+
     columnOrTableParent() {
       let parent = this.$parent;
       while (parent && !parent.tableId && !parent.columnId) {
         parent = parent.$parent;
       }
       return parent;
-    }
-  },
-
-  created() {
-    this.customRender = this.$options.render;
-    this.$options.render = h => h('div', this.$slots.default);
-
-    let parent = this.columnOrTableParent;
-    let owner = this.owner;
-    this.isSubColumn = owner !== parent;
-    this.columnId = (parent.tableId || parent.columnId) + '_column_' + columnIdSeed++;
-
-    let type = this.type;
-
-    const width = parseWidth(this.width);
-    const minWidth = parseMinWidth(this.minWidth);
-
-    let isColumnGroup = false;
-
-    let column = getDefaultColumn(type, {
-      id: this.columnId,
-      columnKey: this.columnKey,
-      label: this.label,
-      className: this.className,
-      labelClassName: this.labelClassName,
-      property: this.prop || this.property,
-      type,
-      renderCell: null,
-      renderHeader: this.renderHeader,
-      minWidth,
-      width,
-      isColumnGroup,
-      context: this.context,
-      align: this.align ? 'is-' + this.align : null,
-      headerAlign: this.headerAlign ? 'is-' + this.headerAlign : (this.align ? 'is-' + this.align : null),
-      sortable: this.sortable === '' ? true : this.sortable,
-      sortMethod: this.sortMethod,
-      sortBy: this.sortBy,
-      resizable: this.resizable,
-      showOverflowTooltip: this.showOverflowTooltip || this.showTooltipWhenOverflow,
-      formatter: this.formatter,
-      selectable: this.selectable,
-      reserveSelection: this.reserveSelection,
-      fixed: this.fixed === '' ? true : this.fixed,
-      filterMethod: this.filterMethod,
-      filters: this.filters,
-      filterable: this.filters || this.filterMethod,
-      filterMultiple: this.filterMultiple,
-      filterOpened: false,
-      filteredValue: this.filteredValue || [],
-      filterPlacement: this.filterPlacement || '',
-      index: this.index,
-      sortOrders: this.sortOrders
-    });
-
-    let source = forced[type] || {};
-    Object.keys(source).forEach((prop) => {
-      let value = source[prop];
-      if (value !== undefined) {
-        if (prop === 'renderHeader') {
-          if (type === 'selection' && column[prop]) {
-            console.warn('[Element Warn][TableColumn]Selection column doesn\'t allow to set render-header function.');
-          } else {
-            value = column[prop] || value;
-          }
-        }
-        column[prop] = prop === 'className' ? `${column[prop]} ${value}` : value;
-      }
-    });
-
-    // Deprecation warning for renderHeader property
-    if (this.renderHeader) {
-      console.warn('[Element Warn][TableColumn]Comparing to render-header, scoped-slot header is easier to use. We recommend users to use scoped-slot header.');
-    }
-
-    this.columnConfig = column;
+    },
 
-    let renderCell = column.renderCell;
-    let _self = this;
+    realWidth() {
+      return parseWidth(this.width);
+    },
 
-    if (type === 'expand') {
-      owner.renderExpanded = function(h, data) {
-        return _self.$scopedSlots.default
-          ? _self.$scopedSlots.default(data)
-          : _self.$slots.default;
-      };
+    realMinWidth() {
+      return parseMinWidth(this.minWidth);
+    },
 
-      column.renderCell = function(h, data) {
-        return <div class="cell">{ renderCell(h, data, this._renderProxy) }</div>;
-      };
+    realAlign() {
+      return this.align ? 'is-' + this.align : null;
+    },
 
-      return;
+    realHeaderAlign() {
+      return this.headerAlign ? 'is-' + this.headerAlign : this.realAlign;
     }
-
-    column.renderCell = function(h, data) {
-      if (_self.$scopedSlots.default) {
-        renderCell = () => _self.$scopedSlots.default(data);
-      }
-
-      if (!renderCell) {
-        renderCell = DEFAULT_RENDER_CELL;
-      }
-
-      return _self.showOverflowTooltip || _self.showTooltipWhenOverflow
-        ? <div class="cell el-tooltip" style={ {width: (data.column.realWidth || data.column.width) - 1 + 'px'} }>{ renderCell(h, data) }</div>
-        : <div class="cell">{ renderCell(h, data) }</div>;
-    };
-  },
-
-  destroyed() {
-    if (!this.$parent) return;
-    const parent = this.$parent;
-    this.owner.store.commit('removeColumn', this.columnConfig, this.isSubColumn ? parent.columnConfig : null);
   },
 
-  watch: {
-    label(newVal) {
-      if (this.columnConfig) {
-        this.columnConfig.label = newVal;
-      }
+  methods: {
+    getPropsData(...props) {
+      return props.reduce((prev, cur) => {
+        if (Array.isArray(cur)) {
+          cur.forEach((key) => {
+            prev[key] = this[key];
+          });
+        }
+        return prev;
+      }, {});
     },
 
-    prop(newVal) {
-      if (this.columnConfig) {
-        this.columnConfig.property = newVal;
-      }
+    getColumnElIndex(children, child) {
+      return [].indexOf.call(children, child);
     },
 
-    property(newVal) {
-      if (this.columnConfig) {
-        this.columnConfig.property = newVal;
+    setColumnWidth(column) {
+      if (this.realWidth) {
+        column.width = this.realWidth;
       }
-    },
-
-    filters(newVal) {
-      if (this.columnConfig) {
-        this.columnConfig.filters = newVal;
+      if (this.realMinWidth) {
+        column.minWidth = this.realMinWidth;
       }
-    },
-
-    filterMultiple(newVal) {
-      if (this.columnConfig) {
-        this.columnConfig.filterMultiple = newVal;
+      if (!column.minWidth) {
+        column.minWidth = 80;
       }
+      column.realWidth = column.width === undefined ? column.minWidth : column.width;
+      return column;
     },
 
-    align(newVal) {
-      if (this.columnConfig) {
-        this.columnConfig.align = newVal ? 'is-' + newVal : null;
-
-        if (!this.headerAlign) {
-          this.columnConfig.headerAlign = newVal ? 'is-' + newVal : null;
+    setColumnForcedProps(column) {
+      // 对于特定类型的 column，某些属性不允许设置
+      const type = column.type;
+      const source = cellForced[type] || {};
+      Object.keys(source).forEach(prop => {
+        let value = source[prop];
+        if (value !== undefined) {
+          column[prop] = prop === 'className' ? `${column[prop]} ${value}` : value;
         }
-      }
+      });
+      return column;
     },
 
-    headerAlign(newVal) {
-      if (this.columnConfig) {
-        this.columnConfig.headerAlign = 'is-' + (newVal ? newVal : this.align);
+    setColumnRenders(column) {
+      // renderHeader 属性不推荐使用。
+      if (this.renderHeader) {
+        console.warn('[Element Warn][TableColumn]Comparing to render-header, scoped-slot header is easier to use. We recommend users to use scoped-slot header.');
+      } else if (column.type !== 'selection') {
+        column.renderHeader = (h, scope) => {
+          const renderHeader = this.$scopedSlots.header;
+          return renderHeader ? renderHeader(scope) : column.label;
+        };
       }
-    },
 
-    width(newVal) {
-      if (this.columnConfig) {
-        this.columnConfig.width = parseWidth(newVal);
-        this.owner.store.scheduleLayout();
+      let originRenderCell = column.renderCell;
+      // TODO: 这里的实现调整
+      if (column.type === 'expand') {
+        // 对于展开行，renderCell 不允许配置的。在上一步中已经设置过，这里需要简单封装一下。
+        column.renderCell = (h, data) => (<div class="cell">
+          { originRenderCell(h, data) }
+        </div>);
+        this.owner.renderExpanded = (h, data) => {
+          return this.$scopedSlots.default
+            ? this.$scopedSlots.default(data)
+            : this.$slots.default;
+        };
+      } else {
+        originRenderCell = originRenderCell || defaultRenderCell;
+        // 对 renderCell 进行包装
+        column.renderCell = (h, data) => {
+          let children = null;
+          if (this.$scopedSlots.default) {
+            children = this.$scopedSlots.default(data);
+          } else {
+            children = originRenderCell(h, data);
+          }
+          const prefix = treeCellPrefix(h, data);
+          const props = {
+            class: 'cell',
+            style: {}
+          };
+          if (column.showOverflowTooltip) {
+            props.class += ' el-tooltip';
+            props.style = {width: (data.column.realWidth || data.column.width) - 1 + 'px'};
+          }
+          return (<div { ...props }>
+            { prefix }
+            { children }
+          </div>);
+        };
       }
+      return column;
     },
 
-    minWidth(newVal) {
-      if (this.columnConfig) {
-        this.columnConfig.minWidth = parseMinWidth(newVal);
-        this.owner.store.scheduleLayout();
-      }
+    registerNormalWatchers() {
+      const props = ['label', 'property', 'filters', 'filterMultiple', 'sortable', 'index', 'formatter', 'className', 'labelClassName', 'showOverflowTooltip'];
+      // 一些属性具有别名
+      const aliases = {
+        prop: 'property',
+        realAlign: 'align',
+        realHeaderAlign: 'headerAlign',
+        realWidth: 'width'
+      };
+      const allAliases = props.reduce((prev, cur) => {
+        prev[cur] = cur;
+        return prev;
+      }, aliases);
+
+      Object.keys(allAliases).forEach(key => {
+        const columnKey = aliases[key];
+
+        this.$watch(key, (newVal) => {
+          this.columnConfig[columnKey] = newVal;
+        });
+      });
     },
 
-    fixed(newVal) {
-      if (this.columnConfig) {
-        this.columnConfig.fixed = newVal;
-        this.owner.store.scheduleLayout(true);
-      }
-    },
+    registerComplexWatchers() {
+      const props = ['fixed'];
+      const aliases = {
+        realWidth: 'width',
+        realMinWidth: 'minWidth'
+      };
+      const allAliases = props.reduce((prev, cur) => {
+        prev[cur] = cur;
+        return prev;
+      }, aliases);
+
+      Object.keys(allAliases).forEach(key => {
+        const columnKey = aliases[key];
+
+        this.$watch(key, (newVal) => {
+          this.columnConfig[columnKey] = newVal;
+          const updateColumns = columnKey === 'fixed';
+          this.owner.store.scheduleLayout(updateColumns);
+        });
+      });
+    }
+  },
 
-    sortable(newVal) {
-      if (this.columnConfig) {
-        this.columnConfig.sortable = newVal;
-      }
-    },
+  components: {
+    ElCheckbox
+  },
 
-    index(newVal) {
-      if (this.columnConfig) {
-        this.columnConfig.index = newVal;
-      }
-    },
+  beforeCreate() {
+    this.row = {};
+    this.column = {};
+    this.$index = 0;
+    this.columnId = '';
+  },
 
-    formatter(newVal) {
-      if (this.columnConfig) {
-        this.columnConfig.formatter = newVal;
-      }
-    },
+  created() {
+    const parent = this.columnOrTableParent;
+    this.isSubColumn = this.owner !== parent;
+    this.columnId = (parent.tableId || parent.columnId) + '_column_' + columnIdSeed++;
 
-    className(newVal) {
-      if (this.columnConfig) {
-        this.columnConfig.className = newVal;
-      }
-    },
+    const type = this.type || 'default';
+    const sortable = this.sortable === '' ? true : this.sortable;
+    const defaults = {
+      ...cellStarts[type],
+      id: this.columnId,
+      type: type,
+      property: this.prop || this.property,
+      align: this.realAlign,
+      headerAlign: this.realHeaderAlign,
+      showOverflowTooltip: this.showOverflowTooltip || this.showTooltipWhenOverflow,
+      // filter 相关属性
+      filterable: this.filters || this.filterMethod,
+      filteredValue: [],
+      filterPlacement: '',
+      isColumnGroup: false,
+      filterOpened: false,
+      // sort 相关属性
+      sortable: sortable,
+      // index 列
+      index: this.index
+    };
 
-    labelClassName(newVal) {
-      if (this.columnConfig) {
-        this.columnConfig.labelClassName = newVal;
-      }
-    }
+    const basicProps = ['columnKey', 'label', 'className', 'labelClassName', 'type', 'renderHeader', 'formatter', 'fixed', 'resizable'];
+    const sortProps = ['sortMethod', 'sortBy', 'sortOrders'];
+    const selectProps = ['selectable', 'reserveSelection'];
+    const filterProps = ['filterMethod', 'filters', 'filterMultiple', 'filterOpened', 'filteredValue', 'filterPlacement'];
+
+    let column = this.getPropsData(basicProps, sortProps, selectProps, filterProps);
+    column = mergeOptions(defaults, column);
+
+    // 注意 compose 中函数执行的顺序是从右到左
+    const chains = compose(this.setColumnRenders, this.setColumnWidth, this.setColumnForcedProps);
+    column = chains(column);
+
+    this.columnConfig = column;
+
+    // 注册 watcher
+    this.registerNormalWatchers();
+    this.registerComplexWatchers();
   },
 
   mounted() {
     const owner = this.owner;
     const parent = this.columnOrTableParent;
-    let columnIndex;
+    const children = this.isSubColumn ? parent.$el.children : parent.$refs.hiddenColumns.children;
+    const columnIndex = this.getColumnElIndex(children, this.$el);
 
-    if (!this.isSubColumn) {
-      columnIndex = [].indexOf.call(parent.$refs.hiddenColumns.children, this.$el);
-    } else {
-      columnIndex = [].indexOf.call(parent.$el.children, this.$el);
-    }
+    owner.store.commit('insertColumn', this.columnConfig, columnIndex, this.isSubColumn ? parent.columnConfig : null);
+  },
 
-    if (this.$scopedSlots.header) {
-      if (this.type === 'selection') {
-        console.warn('[Element Warn][TableColumn]Selection column doesn\'t allow to set scoped-slot header.');
-      } else {
-        this.columnConfig.renderHeader = (h, scope) => this.$scopedSlots.header(scope);
-      }
-    }
+  destroyed() {
+    if (!this.$parent) return;
+    const parent = this.$parent;
+    this.owner.store.commit('removeColumn', this.columnConfig, this.isSubColumn ? parent.columnConfig : null);
+  },
 
-    owner.store.commit('insertColumn', this.columnConfig, columnIndex, this.isSubColumn ? parent.columnConfig : null);
+  render(h) {
+    // slots 也要渲染，需要计算合并表头
+    return h('div', this.$slots.default);
   }
 };
diff --git a/packages/table/src/table-footer.js b/packages/table/src/table-footer.js
index 5774d868662..8d51c97da89 100644
--- a/packages/table/src/table-footer.js
+++ b/packages/table/src/table-footer.js
@@ -1,4 +1,5 @@
 import LayoutObserver from './layout-observer';
+import { mapStates } from './store/helper';
 
 export default {
   name: 'ElTableFooter',
@@ -49,7 +50,7 @@ export default {
         border="0">
         <colgroup>
           {
-            this._l(this.columns, column => <col name={ column.id } />)
+            this.columns.map(column => <col name={ column.id } key={column.id} />)
           }
           {
             this.hasGutter ? <col name="gutter" /> : ''
@@ -58,18 +59,17 @@ export default {
         <tbody class={ [{ 'has-gutter': this.hasGutter }] }>
           <tr>
             {
-              this._l(this.columns, (column, cellIndex) =>
-                <td
-                  colspan={ column.colSpan }
-                  rowspan={ column.rowSpan }
-                  class={ [column.id, column.headerAlign, column.className || '', this.isCellHidden(cellIndex, this.columns) ? 'is-hidden' : '', !column.children ? 'is-leaf' : '', column.labelClassName] }>
-                  <div class={ ['cell', column.labelClassName] }>
-                    {
-                      sums[cellIndex]
-                    }
-                  </div>
-                </td>
-              )
+              this.columns.map((column, cellIndex) => <td
+                key={cellIndex}
+                colspan={ column.colSpan }
+                rowspan={ column.rowSpan }
+                class={ this.getRowClasses(column, cellIndex) }>
+                <div class={ ['cell', column.labelClassName] }>
+                  {
+                    sums[cellIndex]
+                  }
+                </div>
+              </td>)
             }
             {
               this.hasGutter ? <th class="gutter"></th> : ''
@@ -104,44 +104,50 @@ export default {
       return this.$parent;
     },
 
-    isAllSelected() {
-      return this.store.states.isAllSelected;
-    },
-
-    columnsCount() {
-      return this.store.states.columns.length;
-    },
-
-    leftFixedCount() {
-      return this.store.states.fixedColumns.length;
-    },
-
-    rightFixedCount() {
-      return this.store.states.rightFixedColumns.length;
-    },
-
-    columns() {
-      return this.store.states.columns;
-    },
-
     hasGutter() {
       return !this.fixed && this.tableLayout.gutterWidth;
-    }
+    },
+
+    ...mapStates({
+      columns: 'columns',
+      isAllSelected: 'isAllSelected',
+      leftFixedLeafCount: 'fixedLeafColumnsLength',
+      rightFixedLeafCount: 'rightFixedLeafColumnsLength',
+      columnsCount: states => states.columns.length,
+      leftFixedCount: states => states.fixedColumns.length,
+      rightFixedCount: states => states.rightFixedColumns.length
+    })
   },
 
   methods: {
-    isCellHidden(index, columns) {
+    isCellHidden(index, columns, column) {
       if (this.fixed === true || this.fixed === 'left') {
-        return index >= this.leftFixedCount;
+        return index >= this.leftFixedLeafCount;
       } else if (this.fixed === 'right') {
         let before = 0;
         for (let i = 0; i < index; i++) {
           before += columns[i].colSpan;
         }
-        return before < this.columnsCount - this.rightFixedCount;
+        return before < this.columnsCount - this.rightFixedLeafCount;
+      } else if (!this.fixed && column.fixed) { // hide cell when footer instance is not fixed and column is fixed
+        return true;
       } else {
         return (index < this.leftFixedCount) || (index >= this.columnsCount - this.rightFixedCount);
       }
+    },
+
+    getRowClasses(column, cellIndex) {
+      const classes = [column.id, column.align, column.labelClassName];
+      if (column.className) {
+        classes.push(column.className);
+      }
+      if (this.isCellHidden(cellIndex, this.columns, column)) {
+        classes.push('is-hidden');
+      }
+      if (!column.children) {
+        classes.push('is-leaf');
+      }
+      return classes;
     }
   }
 };
diff --git a/packages/table/src/table-header.js b/packages/table/src/table-header.js
index 7dab6ec4e32..656266972a4 100644
--- a/packages/table/src/table-header.js
+++ b/packages/table/src/table-header.js
@@ -1,9 +1,9 @@
+import Vue from 'vue';
 import { hasClass, addClass, removeClass } from 'element-ui/src/utils/dom';
 import ElCheckbox from 'element-ui/packages/checkbox';
-import ElTag from 'element-ui/packages/tag';
-import Vue from 'vue';
 import FilterPanel from './filter-panel.vue';
 import LayoutObserver from './layout-observer';
+import { mapStates } from './store/helper';
 
 const getAllColumns = (columns) => {
   const result = [];
@@ -82,7 +82,7 @@ export default {
         border="0">
         <colgroup>
           {
-            this._l(this.columns, column => <col name={ column.id } />)
+            this.columns.map(column => <col name={ column.id } key={column.id} />)
           }
           {
             this.hasGutter ? <col name="gutter" /> : ''
@@ -96,42 +96,44 @@ export default {
                 class={ this.getHeaderRowClass(rowIndex) }
               >
                 {
-                  this._l(columns, (column, cellIndex) =>
-                    <th
-                      colspan={ column.colSpan }
-                      rowspan={ column.rowSpan }
-                      on-mousemove={ ($event) => this.handleMouseMove($event, column) }
-                      on-mouseout={ this.handleMouseOut }
-                      on-mousedown={ ($event) => this.handleMouseDown($event, column) }
-                      on-click={ ($event) => this.handleHeaderClick($event, column) }
-                      on-contextmenu={ ($event) => this.handleHeaderContextMenu($event, column) }
-                      style={ this.getHeaderCellStyle(rowIndex, cellIndex, columns, column) }
-                      class={ this.getHeaderCellClass(rowIndex, cellIndex, columns, column) }
-                      key={ column.id }>
-                      <div class={ ['cell', column.filteredValue && column.filteredValue.length > 0 ? 'highlight' : '', column.labelClassName] }>
-                        {
-                          column.renderHeader
-                            ? column.renderHeader.call(this._renderProxy, h, { column, $index: cellIndex, store: this.store, _self: this.$parent.$vnode.context })
-                            : column.label
-                        }
-                        {
-                          column.sortable
-                            ? <span class="caret-wrapper" on-click={ ($event) => this.handleSortClick($event, column) }>
-                              <i class="sort-caret ascending" on-click={ ($event) => this.handleSortClick($event, column, 'ascending') }>
-                              </i>
-                              <i class="sort-caret descending" on-click={ ($event) => this.handleSortClick($event, column, 'descending') }>
-                              </i>
-                            </span>
-                            : ''
-                        }
-                        {
-                          column.filterable
-                            ? <span class="el-table__column-filter-trigger" on-click={ ($event) => this.handleFilterClick($event, column) }><i class={ ['el-icon-arrow-down', column.filterOpened ? 'el-icon-arrow-up' : ''] }></i></span>
-                            : ''
-                        }
-                      </div>
-                    </th>
-                  )
+                  columns.map((column, cellIndex) => (<th
+                    colspan={ column.colSpan }
+                    rowspan={ column.rowSpan }
+                    on-mousemove={ ($event) => this.handleMouseMove($event, column) }
+                    on-mouseout={ this.handleMouseOut }
+                    on-mousedown={ ($event) => this.handleMouseDown($event, column) }
+                    on-click={ ($event) => this.handleHeaderClick($event, column) }
+                    on-contextmenu={ ($event) => this.handleHeaderContextMenu($event, column) }
+                    style={ this.getHeaderCellStyle(rowIndex, cellIndex, columns, column) }
+                    class={ this.getHeaderCellClass(rowIndex, cellIndex, columns, column) }
+                    key={ column.id }>
+                    <div class={ ['cell', column.filteredValue && column.filteredValue.length > 0 ? 'highlight' : '', column.labelClassName] }>
+                      {
+                        column.renderHeader
+                          ? column.renderHeader.call(this._renderProxy, h, { column, $index: cellIndex, store: this.store, _self: this.$parent.$vnode.context })
+                          : column.label
+                      }
+                      {
+                        column.sortable ? (<span
+                          class="caret-wrapper"
+                          on-click={ ($event) => this.handleSortClick($event, column) }>
+                          <i class="sort-caret ascending"
+                            on-click={ ($event) => this.handleSortClick($event, column, 'ascending') }>
+                          </i>
+                          <i class="sort-caret descending"
+                            on-click={ ($event) => this.handleSortClick($event, column, 'descending') }>
+                          </i>
+                        </span>) : ''
+                      }
+                      {
+                        column.filterable ? (<span
+                          class="el-table__column-filter-trigger"
+                          on-click={ ($event) => this.handleFilterClick($event, column) }>
+                          <i class={ ['el-icon-arrow-down', column.filterOpened ? 'el-icon-arrow-up' : ''] }></i>
+                        </span>) : ''
+                      }
+                    </div>
+                  </th>))
                 }
                 {
                   this.hasGutter ? <th class="gutter"></th> : ''
@@ -162,8 +164,7 @@ export default {
   },
 
   components: {
-    ElCheckbox,
-    ElTag
+    ElCheckbox
   },
 
   computed: {
@@ -171,37 +172,19 @@ export default {
       return this.$parent;
     },
 
-    isAllSelected() {
-      return this.store.states.isAllSelected;
-    },
-
-    columnsCount() {
-      return this.store.states.columns.length;
-    },
-
-    leftFixedCount() {
-      return this.store.states.fixedColumns.length;
-    },
-
-    rightFixedCount() {
-      return this.store.states.rightFixedColumns.length;
-    },
-
-    leftFixedLeafCount() {
-      return this.store.states.fixedLeafColumnsLength;
-    },
-
-    rightFixedLeafCount() {
-      return this.store.states.rightFixedLeafColumnsLength;
-    },
-
-    columns() {
-      return this.store.states.columns;
-    },
-
     hasGutter() {
       return !this.fixed && this.tableLayout.gutterWidth;
-    }
+    },
+
+    ...mapStates({
+      columns: 'columns',
+      isAllSelected: 'isAllSelected',
+      leftFixedLeafCount: 'fixedLeafColumnsLength',
+      rightFixedLeafCount: 'rightFixedLeafColumnsLength',
+      columnsCount: states => states.columns.length,
+      leftFixedCount: states => states.fixedColumns.length,
+      rightFixedCount: states => states.rightFixedColumns.length
+    })
   },
 
   created() {
@@ -209,8 +192,12 @@ export default {
   },
 
   mounted() {
-    const { prop, order } = this.defaultSort;
-    this.store.commit('sort', { prop, order });
+    // nextTick 是有必要的 https://github.com/ElemeFE/element/pull/11311
+    this.$nextTick(() => {
+      const { prop, order } = this.defaultSort;
+      const init = true;
+      this.store.commit('sort', { prop, order, init });
+    });
   },
 
   beforeDestroy() {
@@ -311,6 +298,7 @@ export default {
       event.stopPropagation();
       const target = event.target;
       let cell = target.tagName === 'TH' ? target : target.parentNode;
+      if (hasClass(cell, 'noclick')) return;
       cell = cell.querySelector('.el-table__column-filter-trigger') || cell;
       const table = this.$parent;
 
@@ -468,7 +456,9 @@ export default {
 
     handleSortClick(event, column, givenOrder) {
       event.stopPropagation();
-      let order = givenOrder || this.toggleOrder(column);
+      let order = column.order === givenOrder
+        ? null
+        : (givenOrder || this.toggleOrder(column));
 
       let target = event.target;
       while (target && target.tagName !== 'TH') {
@@ -499,8 +489,6 @@ export default {
 
       if (!order) {
         sortOrder = column.order = null;
-        states.sortingColumn = null;
-        sortProp = null;
       } else {
         sortOrder = column.order = order;
       }
diff --git a/packages/table/src/table-layout.js b/packages/table/src/table-layout.js
index a7a14a1c6c2..6365dc9b550 100644
--- a/packages/table/src/table-layout.js
+++ b/packages/table/src/table-layout.js
@@ -1,5 +1,6 @@
-import scrollbarWidth from 'element-ui/src/utils/scrollbar-width';
 import Vue from 'vue';
+import scrollbarWidth from 'element-ui/src/utils/scrollbar-width';
+import { parseHeight } from './util';
 
 class TableLayout {
   constructor(options) {
@@ -41,27 +42,28 @@ class TableLayout {
 
   updateScrollY() {
     const height = this.height;
-    if (typeof height !== 'string' && typeof height !== 'number') return;
+    if (height === null) return false;
     const bodyWrapper = this.table.bodyWrapper;
     if (this.table.$el && bodyWrapper) {
       const body = bodyWrapper.querySelector('.el-table__body');
-      this.scrollY = body.offsetHeight > this.bodyHeight;
+      const prevScrollY = this.scrollY;
+      const scrollY = body.offsetHeight > this.bodyHeight;
+      this.scrollY = scrollY;
+      return prevScrollY !== scrollY;
     }
+    return false;
   }
 
   setHeight(value, prop = 'height') {
     if (Vue.prototype.$isServer) return;
     const el = this.table.$el;
-    if (typeof value === 'string' && /^\d+$/.test(value)) {
-      value = Number(value);
-    }
+    value = parseHeight(value);
     this.height = value;
 
     if (!el && (value || value === 0)) return Vue.nextTick(() => this.setHeight(value, prop));
 
     if (typeof value === 'number') {
       el.style[prop] = value + 'px';
-
       this.updateElsHeight();
     } else if (typeof value === 'string') {
       el.style[prop] = value;
@@ -70,7 +72,21 @@ class TableLayout {
   }
 
   setMaxHeight(value) {
-    return this.setHeight(value, 'max-height');
+    this.setHeight(value, 'max-height');
+  }
+
+  getFlattenColumns() {
+    const flattenColumns = [];
+    const columns = this.table.columns;
+    columns.forEach((column) => {
+      if (column.isColumnGroup) {
+        flattenColumns.push.apply(flattenColumns, column.columns);
+      } else {
+        flattenColumns.push(column);
+      }
+    });
+
+    return flattenColumns;
   }
 
   updateElsHeight() {
@@ -79,36 +95,39 @@ class TableLayout {
     this.appendHeight = appendWrapper ? appendWrapper.offsetHeight : 0;
 
     if (this.showHeader && !headerWrapper) return;
+
+    // fix issue (https://github.com/ElemeFE/element/pull/16956)
+    const headerTrElm = headerWrapper ? headerWrapper.querySelector('.el-table__header tr') : null;
+    const noneHeader = this.headerDisplayNone(headerTrElm);
+
     const headerHeight = this.headerHeight = !this.showHeader ? 0 : headerWrapper.offsetHeight;
-    if (this.showHeader && headerWrapper.offsetWidth > 0 && (this.table.columns || []).length > 0 && headerHeight < 2) {
+    if (this.showHeader && !noneHeader && headerWrapper.offsetWidth > 0 && (this.table.columns || []).length > 0 && headerHeight < 2) {
       return Vue.nextTick(() => this.updateElsHeight());
     }
     const tableHeight = this.tableHeight = this.table.$el.clientHeight;
-    if (this.height !== null && (!isNaN(this.height) || typeof this.height === 'string')) {
-      const footerHeight = this.footerHeight = footerWrapper ? footerWrapper.offsetHeight : 0;
+    const footerHeight = this.footerHeight = footerWrapper ? footerWrapper.offsetHeight : 0;
+    if (this.height !== null) {
       this.bodyHeight = tableHeight - headerHeight - footerHeight + (footerWrapper ? 1 : 0);
     }
-    this.fixedBodyHeight = this.scrollX ? this.bodyHeight - this.gutterWidth : this.bodyHeight;
+    this.fixedBodyHeight = this.scrollX ? (this.bodyHeight - this.gutterWidth) : this.bodyHeight;
 
-    const noData = !this.table.data || this.table.data.length === 0;
+    const noData = !(this.store.states.data && this.store.states.data.length);
     this.viewportHeight = this.scrollX ? tableHeight - (noData ? 0 : this.gutterWidth) : tableHeight;
 
     this.updateScrollY();
     this.notifyObservers('scrollable');
   }
 
-  getFlattenColumns() {
-    const flattenColumns = [];
-    const columns = this.table.columns;
-    columns.forEach((column) => {
-      if (column.isColumnGroup) {
-        flattenColumns.push.apply(flattenColumns, column.columns);
-      } else {
-        flattenColumns.push(column);
+  headerDisplayNone(elm) {
+    if (!elm) return true;
+    let headerChild = elm;
+    while (headerChild.tagName !== 'DIV') {
+      if (getComputedStyle(headerChild).display === 'none') {
+        return true;
       }
-    });
-
-    return flattenColumns;
+      headerChild = headerChild.parentElement;
+    }
+    return false;
   }
 
   updateColumnsWidth() {
diff --git a/packages/table/src/table-store.js b/packages/table/src/table-store.js
deleted file mode 100644
index f12036899f1..00000000000
--- a/packages/table/src/table-store.js
+++ /dev/null
@@ -1,657 +0,0 @@
-import Vue from 'vue';
-import debounce from 'throttle-debounce/debounce';
-import merge from 'element-ui/src/utils/merge';
-import { hasClass, addClass, removeClass } from 'element-ui/src/utils/dom';
-import { orderBy, getColumnById, getRowIdentity, getColumnByKey } from './util';
-
-const sortData = (data, states) => {
-  const sortingColumn = states.sortingColumn;
-  if (!sortingColumn || typeof sortingColumn.sortable === 'string') {
-    return data;
-  }
-  return orderBy(data, states.sortProp, states.sortOrder, sortingColumn.sortMethod, sortingColumn.sortBy);
-};
-
-const getKeysMap = function(array, rowKey) {
-  const arrayMap = {};
-  (array || []).forEach((row, index) => {
-    arrayMap[getRowIdentity(row, rowKey)] = { row, index };
-  });
-  return arrayMap;
-};
-
-const toggleRowSelection = function(states, row, selected) {
-  let changed = false;
-  const selection = states.selection;
-  const index = selection.indexOf(row);
-  if (typeof selected === 'undefined') {
-    if (index === -1) {
-      selection.push(row);
-      changed = true;
-    } else {
-      selection.splice(index, 1);
-      changed = true;
-    }
-  } else {
-    if (selected && index === -1) {
-      selection.push(row);
-      changed = true;
-    } else if (!selected && index > -1) {
-      selection.splice(index, 1);
-      changed = true;
-    }
-  }
-
-  return changed;
-};
-
-const toggleRowExpansion = function(states, row, expanded) {
-  let changed = false;
-  const expandRows = states.expandRows;
-  if (typeof expanded !== 'undefined') {
-    const index = expandRows.indexOf(row);
-    if (expanded) {
-      if (index === -1) {
-        expandRows.push(row);
-        changed = true;
-      }
-    } else {
-      if (index !== -1) {
-        expandRows.splice(index, 1);
-        changed = true;
-      }
-    }
-  } else {
-    const index = expandRows.indexOf(row);
-    if (index === -1) {
-      expandRows.push(row);
-      changed = true;
-    } else {
-      expandRows.splice(index, 1);
-      changed = true;
-    }
-  }
-
-  return changed;
-};
-
-const TableStore = function(table, initialState = {}) {
-  if (!table) {
-    throw new Error('Table is required.');
-  }
-  this.table = table;
-
-  this.states = {
-    rowKey: null,
-    _columns: [],
-    originColumns: [],
-    columns: [],
-    fixedColumns: [],
-    rightFixedColumns: [],
-    leafColumns: [],
-    fixedLeafColumns: [],
-    rightFixedLeafColumns: [],
-    leafColumnsLength: 0,
-    fixedLeafColumnsLength: 0,
-    rightFixedLeafColumnsLength: 0,
-    isComplex: false,
-    filteredData: null,
-    data: null,
-    sortingColumn: null,
-    sortProp: null,
-    sortOrder: null,
-    isAllSelected: false,
-    selection: [],
-    reserveSelection: false,
-    selectable: null,
-    currentRow: null,
-    hoverRow: null,
-    filters: {},
-    expandRows: [],
-    defaultExpandAll: false,
-    selectOnIndeterminate: false
-  };
-
-  for (let prop in initialState) {
-    if (initialState.hasOwnProperty(prop) && this.states.hasOwnProperty(prop)) {
-      this.states[prop] = initialState[prop];
-    }
-  }
-};
-
-TableStore.prototype.mutations = {
-  setData(states, data) {
-    const dataInstanceChanged = states._data !== data;
-    states._data = data;
-
-    Object.keys(states.filters).forEach((columnId) => {
-      const values = states.filters[columnId];
-      if (!values || values.length === 0) return;
-      const column = getColumnById(this.states, columnId);
-      if (column && column.filterMethod) {
-        data = data.filter((row) => {
-          return values.some(value => column.filterMethod.call(null, value, row, column));
-        });
-      }
-    });
-
-    states.filteredData = data;
-    states.data = sortData((data || []), states);
-
-    this.updateCurrentRow();
-
-    const rowKey = states.rowKey;
-
-    if (!states.reserveSelection) {
-      if (dataInstanceChanged) {
-        this.clearSelection();
-      } else {
-        this.cleanSelection();
-      }
-      this.updateAllSelected();
-    } else {
-      if (rowKey) {
-        const selection = states.selection;
-        const selectedMap = getKeysMap(selection, rowKey);
-
-        states.data.forEach((row) => {
-          const rowId = getRowIdentity(row, rowKey);
-          const rowInfo = selectedMap[rowId];
-          if (rowInfo) {
-            selection[rowInfo.index] = row;
-          }
-        });
-
-        this.updateAllSelected();
-      } else {
-        console.warn('WARN: rowKey is required when reserve-selection is enabled.');
-      }
-    }
-
-    const defaultExpandAll = states.defaultExpandAll;
-    if (defaultExpandAll) {
-      this.states.expandRows = (states.data || []).slice(0);
-    } else if (rowKey) {
-      // update expandRows to new rows according to rowKey
-      const ids = getKeysMap(this.states.expandRows, rowKey);
-      let expandRows = [];
-      for (const row of states.data) {
-        const rowId = getRowIdentity(row, rowKey);
-        if (ids[rowId]) {
-          expandRows.push(row);
-        }
-      }
-      this.states.expandRows = expandRows;
-    } else {
-      // clear the old rows
-      this.states.expandRows = [];
-    }
-
-    Vue.nextTick(() => this.table.updateScrollY());
-  },
-
-  changeSortCondition(states, options) {
-    states.data = sortData((states.filteredData || states._data || []), states);
-
-    const { $el, highlightCurrentRow } = this.table;
-    if ($el && highlightCurrentRow) {
-      const data = states.data;
-      const tr = $el.querySelector('tbody').children;
-      const rows = [].filter.call(tr, row => hasClass(row, 'el-table__row'));
-      const row = rows[data.indexOf(states.currentRow)];
-
-      [].forEach.call(rows, row => removeClass(row, 'current-row'));
-      addClass(row, 'current-row');
-    }
-
-    if (!options || !options.silent) {
-      this.table.$emit('sort-change', {
-        column: this.states.sortingColumn,
-        prop: this.states.sortProp,
-        order: this.states.sortOrder
-      });
-    }
-
-    Vue.nextTick(() => this.table.updateScrollY());
-  },
-
-  sort(states, options) {
-    const { prop, order } = options;
-    if (prop) {
-      states.sortProp = prop;
-      states.sortOrder = order || 'ascending';
-      Vue.nextTick(() => {
-        for (let i = 0, length = states.columns.length; i < length; i++) {
-          let column = states.columns[i];
-          if (column.property === states.sortProp) {
-            column.order = states.sortOrder;
-            states.sortingColumn = column;
-            break;
-          }
-        }
-
-        if (states.sortingColumn) {
-          this.commit('changeSortCondition');
-        }
-      });
-    }
-  },
-
-  filterChange(states, options) {
-    let { column, values, silent, multi } = options;
-    if (values && !Array.isArray(values)) {
-      values = [values];
-    }
-    const filters = {};
-
-    if (multi) {
-      column.forEach(col => {
-        states.filters[col.id] = values;
-        filters[col.columnKey || col.id] = values;
-      });
-    } else {
-      const prop = column.property;
-
-      if (prop) {
-        states.filters[column.id] = values;
-        filters[column.columnKey || column.id] = values;
-      }
-    }
-
-    let data = states._data;
-
-    Object.keys(states.filters).forEach((columnId) => {
-      const values = states.filters[columnId];
-      if (!values || values.length === 0) return;
-      const column = getColumnById(this.states, columnId);
-      if (column && column.filterMethod) {
-        data = data.filter((row) => {
-          return values.some(value => column.filterMethod.call(null, value, row, column));
-        });
-      }
-    });
-
-    states.filteredData = data;
-    states.data = sortData(data, states);
-
-    if (!silent) {
-      this.table.$emit('filter-change', filters);
-    }
-
-    Vue.nextTick(() => this.table.updateScrollY());
-  },
-
-  insertColumn(states, column, index, parent) {
-    let array = states._columns;
-    if (parent) {
-      array = parent.children;
-      if (!array) array = parent.children = [];
-    }
-
-    if (typeof index !== 'undefined') {
-      array.splice(index, 0, column);
-    } else {
-      array.push(column);
-    }
-
-    if (column.type === 'selection') {
-      states.selectable = column.selectable;
-      states.reserveSelection = column.reserveSelection;
-    }
-
-    if (this.table.$ready) {
-      this.updateColumns(); // hack for dynamics insert column
-      this.scheduleLayout();
-    }
-  },
-
-  removeColumn(states, column, parent) {
-    let array = states._columns;
-    if (parent) {
-      array = parent.children;
-      if (!array) array = parent.children = [];
-    }
-    if (array) {
-      array.splice(array.indexOf(column), 1);
-    }
-
-    if (this.table.$ready) {
-      this.updateColumns(); // hack for dynamics remove column
-      this.scheduleLayout();
-    }
-  },
-
-  setHoverRow(states, row) {
-    states.hoverRow = row;
-  },
-
-  setCurrentRow(states, row) {
-    const oldCurrentRow = states.currentRow;
-    states.currentRow = row;
-
-    if (oldCurrentRow !== row) {
-      this.table.$emit('current-change', row, oldCurrentRow);
-    }
-  },
-
-  rowSelectedChanged(states, row) {
-    const changed = toggleRowSelection(states, row);
-    const selection = states.selection;
-
-    if (changed) {
-      const table = this.table;
-      table.$emit('selection-change', selection ? selection.slice() : []);
-      table.$emit('select', selection, row);
-    }
-
-    this.updateAllSelected();
-  },
-
-  toggleAllSelection: debounce(10, function(states) {
-    const data = states.data || [];
-    if (data.length === 0) return;
-    const selection = this.states.selection;
-    // when only some rows are selected (but not all), select or deselect all of them
-    // depending on the value of selectOnIndeterminate
-    const value = states.selectOnIndeterminate
-      ? !states.isAllSelected
-      : !(states.isAllSelected || selection.length);
-    let selectionChanged = false;
-
-    data.forEach((item, index) => {
-      if (states.selectable) {
-        if (states.selectable.call(null, item, index) && toggleRowSelection(states, item, value)) {
-          selectionChanged = true;
-        }
-      } else {
-        if (toggleRowSelection(states, item, value)) {
-          selectionChanged = true;
-        }
-      }
-    });
-
-    const table = this.table;
-    if (selectionChanged) {
-      table.$emit('selection-change', selection ? selection.slice() : []);
-    }
-    table.$emit('select-all', selection);
-    states.isAllSelected = value;
-  })
-};
-
-const doFlattenColumns = (columns) => {
-  const result = [];
-  columns.forEach((column) => {
-    if (column.children) {
-      result.push.apply(result, doFlattenColumns(column.children));
-    } else {
-      result.push(column);
-    }
-  });
-  return result;
-};
-
-TableStore.prototype.updateColumns = function() {
-  const states = this.states;
-  const _columns = states._columns || [];
-  states.fixedColumns = _columns.filter((column) => column.fixed === true || column.fixed === 'left');
-  states.rightFixedColumns = _columns.filter((column) => column.fixed === 'right');
-
-  if (states.fixedColumns.length > 0 && _columns[0] && _columns[0].type === 'selection' && !_columns[0].fixed) {
-    _columns[0].fixed = true;
-    states.fixedColumns.unshift(_columns[0]);
-  }
-
-  const notFixedColumns = _columns.filter(column => !column.fixed);
-  states.originColumns = [].concat(states.fixedColumns).concat(notFixedColumns).concat(states.rightFixedColumns);
-
-  const leafColumns = doFlattenColumns(notFixedColumns);
-  const fixedLeafColumns = doFlattenColumns(states.fixedColumns);
-  const rightFixedLeafColumns = doFlattenColumns(states.rightFixedColumns);
-
-  states.leafColumnsLength = leafColumns.length;
-  states.fixedLeafColumnsLength = fixedLeafColumns.length;
-  states.rightFixedLeafColumnsLength = rightFixedLeafColumns.length;
-
-  states.columns = [].concat(fixedLeafColumns).concat(leafColumns).concat(rightFixedLeafColumns);
-  states.isComplex = states.fixedColumns.length > 0 || states.rightFixedColumns.length > 0;
-};
-
-TableStore.prototype.isSelected = function(row) {
-  return (this.states.selection || []).indexOf(row) > -1;
-};
-
-TableStore.prototype.clearSelection = function() {
-  const states = this.states;
-  states.isAllSelected = false;
-  const oldSelection = states.selection;
-  if (states.selection.length) {
-    states.selection = [];
-  }
-  if (oldSelection.length > 0) {
-    this.table.$emit('selection-change', states.selection ? states.selection.slice() : []);
-  }
-};
-
-TableStore.prototype.setExpandRowKeys = function(rowKeys) {
-  const expandRows = [];
-  const data = this.states.data;
-  const rowKey = this.states.rowKey;
-  if (!rowKey) throw new Error('[Table] prop row-key should not be empty.');
-  const keysMap = getKeysMap(data, rowKey);
-  rowKeys.forEach((key) => {
-    const info = keysMap[key];
-    if (info) {
-      expandRows.push(info.row);
-    }
-  });
-
-  this.states.expandRows = expandRows;
-};
-
-TableStore.prototype.toggleRowSelection = function(row, selected) {
-  const changed = toggleRowSelection(this.states, row, selected);
-  if (changed) {
-    this.table.$emit('selection-change', this.states.selection ? this.states.selection.slice() : []);
-  }
-};
-
-TableStore.prototype.toggleRowExpansion = function(row, expanded) {
-  const changed = toggleRowExpansion(this.states, row, expanded);
-  if (changed) {
-    this.table.$emit('expand-change', row, this.states.expandRows);
-    this.scheduleLayout();
-  }
-};
-
-TableStore.prototype.isRowExpanded = function(row) {
-  const { expandRows = [], rowKey } = this.states;
-  if (rowKey) {
-    const expandMap = getKeysMap(expandRows, rowKey);
-    return !!expandMap[getRowIdentity(row, rowKey)];
-  }
-  return expandRows.indexOf(row) !== -1;
-};
-
-TableStore.prototype.cleanSelection = function() {
-  const selection = this.states.selection || [];
-  const data = this.states.data;
-  const rowKey = this.states.rowKey;
-  let deleted;
-  if (rowKey) {
-    deleted = [];
-    const selectedMap = getKeysMap(selection, rowKey);
-    const dataMap = getKeysMap(data, rowKey);
-    for (let key in selectedMap) {
-      if (selectedMap.hasOwnProperty(key) && !dataMap[key]) {
-        deleted.push(selectedMap[key].row);
-      }
-    }
-  } else {
-    deleted = selection.filter((item) => {
-      return data.indexOf(item) === -1;
-    });
-  }
-
-  deleted.forEach((deletedItem) => {
-    selection.splice(selection.indexOf(deletedItem), 1);
-  });
-
-  if (deleted.length) {
-    this.table.$emit('selection-change', selection ? selection.slice() : []);
-  }
-};
-
-TableStore.prototype.clearFilter = function(columnKeys) {
-  const states = this.states;
-  const { tableHeader, fixedTableHeader, rightFixedTableHeader } = this.table.$refs;
-  let panels = {};
-
-  if (tableHeader) panels = merge(panels, tableHeader.filterPanels);
-  if (fixedTableHeader) panels = merge(panels, fixedTableHeader.filterPanels);
-  if (rightFixedTableHeader) panels = merge(panels, rightFixedTableHeader.filterPanels);
-
-  const keys = Object.keys(panels);
-  if (!keys.length) return;
-
-  if (typeof columnKeys === 'string') {
-    columnKeys = [columnKeys];
-  }
-  if (Array.isArray(columnKeys)) {
-    const columns = columnKeys.map(key => getColumnByKey(states, key));
-    keys.forEach(key => {
-      const column = columns.find(col => col.id === key);
-      if (column) {
-        panels[key].filteredValue = [];
-      }
-    });
-    this.commit('filterChange', {
-      column: columns,
-      value: [],
-      silent: true,
-      multi: true
-    });
-  } else {
-    keys.forEach(key => {
-      panels[key].filteredValue = [];
-    });
-
-    states.filters = {};
-
-    this.commit('filterChange', {
-      column: {},
-      values: [],
-      silent: true
-    });
-  }
-};
-
-TableStore.prototype.clearSort = function() {
-  const states = this.states;
-  if (!states.sortingColumn) return;
-  states.sortingColumn.order = null;
-  states.sortProp = null;
-  states.sortOrder = null;
-
-  this.commit('changeSortCondition', {
-    silent: true
-  });
-};
-
-TableStore.prototype.updateAllSelected = function() {
-  const states = this.states;
-  const { selection, rowKey, selectable, data } = states;
-  if (!data || data.length === 0) {
-    states.isAllSelected = false;
-    return;
-  }
-
-  let selectedMap;
-  if (rowKey) {
-    selectedMap = getKeysMap(states.selection, rowKey);
-  }
-
-  const isSelected = function(row) {
-    if (selectedMap) {
-      return !!selectedMap[getRowIdentity(row, rowKey)];
-    } else {
-      return selection.indexOf(row) !== -1;
-    }
-  };
-
-  let isAllSelected = true;
-  let selectedCount = 0;
-  for (let i = 0, j = data.length; i < j; i++) {
-    const item = data[i];
-    const isRowSelectable = selectable && selectable.call(null, item, i);
-    if (!isSelected(item)) {
-      if (!selectable || isRowSelectable) {
-        isAllSelected = false;
-        break;
-      }
-    } else {
-      selectedCount++;
-    }
-  }
-
-  if (selectedCount === 0) isAllSelected = false;
-
-  states.isAllSelected = isAllSelected;
-};
-
-TableStore.prototype.scheduleLayout = function(updateColumns) {
-  if (updateColumns) {
-    this.updateColumns();
-  }
-  this.table.debouncedUpdateLayout();
-};
-
-TableStore.prototype.setCurrentRowKey = function(key) {
-  const states = this.states;
-  const rowKey = states.rowKey;
-  if (!rowKey) throw new Error('[Table] row-key should not be empty.');
-  const data = states.data || [];
-  const keysMap = getKeysMap(data, rowKey);
-  const info = keysMap[key];
-  states.currentRow = info ? info.row : null;
-};
-
-TableStore.prototype.updateCurrentRow = function() {
-  const states = this.states;
-  const table = this.table;
-  const data = states.data || [];
-  const oldCurrentRow = states.currentRow;
-
-  if (data.indexOf(oldCurrentRow) === -1) {
-    if (states.rowKey && oldCurrentRow) {
-      let newCurrentRow = null;
-      for (let i = 0; i < data.length; i++) {
-        const item = data[i];
-        if (item && item[states.rowKey] === oldCurrentRow[states.rowKey]) {
-          newCurrentRow = item;
-          break;
-        }
-      }
-      if (newCurrentRow) {
-        states.currentRow = newCurrentRow;
-        return;
-      }
-    }
-    states.currentRow = null;
-
-    if (states.currentRow !== oldCurrentRow) {
-      table.$emit('current-change', null, oldCurrentRow);
-    }
-  }
-};
-
-TableStore.prototype.commit = function(name, ...args) {
-  const mutations = this.mutations;
-  if (mutations[name]) {
-    mutations[name].apply(this, [this.states].concat(args));
-  } else {
-    throw new Error(`Action not found: ${name}`);
-  }
-};
-
-export default TableStore;
diff --git a/packages/table/src/table.vue b/packages/table/src/table.vue
index 6d2996eef20..b8e39b84920 100644
--- a/packages/table/src/table.vue
+++ b/packages/table/src/table.vue
@@ -49,10 +49,8 @@
         v-if="!data || data.length === 0"
         class="el-table__empty-block"
         ref="emptyBlock"
-        :style="{
-          width: bodyWidth
-        }">
-        <span class="el-table__empty-text">
+        :style="emptyBlockStyle">
+        <span class="el-table__empty-text" >
           <slot name="empty">{{ emptyText || t('el.table.emptyText') }}</slot>
         </span>
       </div>
@@ -123,9 +121,7 @@
         <div
           v-if="$slots.append"
           class="el-table__append-gutter"
-          :style="{
-            height: layout.appendHeight + 'px'
-          }"></div>
+          :style="{ height: layout.appendHeight + 'px'}"></div>
       </div>
       <div
         v-if="showSummary"
@@ -183,6 +179,10 @@
             width: bodyWidth
           }">
         </table-body>
+         <div
+          v-if="$slots.append"
+          class="el-table__append-gutter"
+          :style="{ height: layout.appendHeight + 'px' }"></div>
       </div>
       <div
         v-if="showSummary"
@@ -214,16 +214,17 @@
 
 <script type="text/babel">
   import ElCheckbox from 'element-ui/packages/checkbox';
-  import debounce from 'throttle-debounce/debounce';
+  import { debounce, throttle } from 'throttle-debounce';
   import { addResizeListener, removeResizeListener } from 'element-ui/src/utils/resize-event';
   import Mousewheel from 'element-ui/src/directives/mousewheel';
   import Locale from 'element-ui/src/mixins/locale';
   import Migrating from 'element-ui/src/mixins/migrating';
-  import TableStore from './table-store';
+  import { createStore, mapStates } from './store/helper';
   import TableLayout from './table-layout';
   import TableBody from './table-body';
   import TableHeader from './table-header';
   import TableFooter from './table-footer';
+  import { parseHeight } from './util';
 
   let tableIdSeed = 1;
 
@@ -311,6 +312,30 @@
       selectOnIndeterminate: {
         type: Boolean,
         default: true
+      },
+
+      indent: {
+        type: Number,
+        default: 16
+      },
+
+      treeProps: {
+        type: Object,
+        default() {
+          return {
+            hasChildren: 'hasChildren',
+            children: 'children'
+          };
+        }
+      },
+
+      lazy: Boolean,
+
+      load: Function,
+
+      checkStrictly: {
+        type: Boolean,
+        default: false
       }
     },
 
@@ -335,12 +360,12 @@
       },
 
       toggleRowSelection(row, selected) {
-        this.store.toggleRowSelection(row, selected);
+        this.store.toggleRowSelection(row, selected, false);
         this.store.updateAllSelected();
       },
 
       toggleRowExpansion(row, expanded) {
-        this.store.toggleRowExpansion(row, expanded);
+        this.store.toggleRowExpansionAdapter(row, expanded);
       },
 
       clearSelection() {
@@ -361,8 +386,11 @@
       },
 
       updateScrollY() {
-        this.layout.updateScrollY();
-        this.layout.updateColumnsWidth();
+        const changed = this.layout.updateScrollY();
+        if (changed) {
+          this.layout.notifyObservers('scrollable');
+          this.layout.updateColumnsWidth();
+        }
       },
 
       handleFixedMousewheel(event, data) {
@@ -384,37 +412,42 @@
       handleHeaderFooterMousewheel(event, data) {
         const { pixelX, pixelY } = data;
         if (Math.abs(pixelX) >= Math.abs(pixelY)) {
-          event.preventDefault();
           this.bodyWrapper.scrollLeft += data.pixelX / 5;
         }
       },
 
-      bindEvents() {
-        const { headerWrapper, footerWrapper } = this.$refs;
-        const refs = this.$refs;
-        let self = this;
-
-        this.bodyWrapper.addEventListener('scroll', function() {
-          if (headerWrapper) headerWrapper.scrollLeft = this.scrollLeft;
-          if (footerWrapper) footerWrapper.scrollLeft = this.scrollLeft;
-          if (refs.fixedBodyWrapper) refs.fixedBodyWrapper.scrollTop = this.scrollTop;
-          if (refs.rightFixedBodyWrapper) refs.rightFixedBodyWrapper.scrollTop = this.scrollTop;
-          const maxScrollLeftPosition = this.scrollWidth - this.offsetWidth - 1;
-          const scrollLeft = this.scrollLeft;
-          if (scrollLeft >= maxScrollLeftPosition) {
-            self.scrollPosition = 'right';
-          } else if (scrollLeft === 0) {
-            self.scrollPosition = 'left';
-          } else {
-            self.scrollPosition = 'middle';
-          }
-        });
+      // TODO 使用 CSS transform
+      syncPostion: throttle(20, function() {
+        const { scrollLeft, scrollTop, offsetWidth, scrollWidth } = this.bodyWrapper;
+        const { headerWrapper, footerWrapper, fixedBodyWrapper, rightFixedBodyWrapper } = this.$refs;
+        if (headerWrapper) headerWrapper.scrollLeft = scrollLeft;
+        if (footerWrapper) footerWrapper.scrollLeft = scrollLeft;
+        if (fixedBodyWrapper) fixedBodyWrapper.scrollTop = scrollTop;
+        if (rightFixedBodyWrapper) rightFixedBodyWrapper.scrollTop = scrollTop;
+        const maxScrollLeftPosition = scrollWidth - offsetWidth - 1;
+        if (scrollLeft >= maxScrollLeftPosition) {
+          this.scrollPosition = 'right';
+        } else if (scrollLeft === 0) {
+          this.scrollPosition = 'left';
+        } else {
+          this.scrollPosition = 'middle';
+        }
+      }),
 
+      bindEvents() {
+        this.bodyWrapper.addEventListener('scroll', this.syncPostion, { passive: true });
         if (this.fit) {
           addResizeListener(this.$el, this.resizeListener);
         }
       },
 
+      unbindEvents() {
+        this.bodyWrapper.removeEventListener('scroll', this.syncPostion, { passive: true });
+        if (this.fit) {
+          removeResizeListener(this.$el, this.resizeListener);
+        }
+      },
+
       resizeListener() {
         if (!this.$ready) return;
         let shouldUpdateLayout = false;
@@ -439,10 +472,10 @@
       },
 
       doLayout() {
-        this.layout.updateColumnsWidth();
         if (this.shouldUpdateHeight) {
           this.layout.updateElsHeight();
         }
+        this.layout.updateColumnsWidth();
       },
 
       sort(prop, order) {
@@ -452,11 +485,7 @@
       toggleAllSelection() {
         this.store.commit('toggleAllSelection');
       }
-    },
 
-    created() {
-      this.tableId = 'el-table_' + tableIdSeed++;
-      this.debouncedUpdateLayout = debounce(50, () => this.doLayout());
     },
 
     computed: {
@@ -475,42 +504,24 @@
           this.rightFixedColumns.length > 0;
       },
 
-      selection() {
-        return this.store.states.selection;
-      },
-
-      columns() {
-        return this.store.states.columns;
-      },
-
-      tableData() {
-        return this.store.states.data;
-      },
-
-      fixedColumns() {
-        return this.store.states.fixedColumns;
-      },
-
-      rightFixedColumns() {
-        return this.store.states.rightFixedColumns;
-      },
-
       bodyWidth() {
         const { bodyWidth, scrollY, gutterWidth } = this.layout;
         return bodyWidth ? bodyWidth - (scrollY ? gutterWidth : 0) + 'px' : '';
       },
 
       bodyHeight() {
+        const { headerHeight = 0, bodyHeight, footerHeight = 0} = this.layout;
         if (this.height) {
           return {
-            height: this.layout.bodyHeight ? this.layout.bodyHeight + 'px' : ''
+            height: bodyHeight ? bodyHeight + 'px' : ''
           };
         } else if (this.maxHeight) {
-          return {
-            'max-height': (this.showHeader
-              ? this.maxHeight - this.layout.headerHeight - this.layout.footerHeight
-              : this.maxHeight - this.layout.footerHeight) + 'px'
-          };
+          const maxHeight = parseHeight(this.maxHeight);
+          if (typeof maxHeight === 'number') {
+            return {
+              'max-height': (maxHeight - footerHeight - (this.showHeader ? headerHeight : 0)) + 'px'
+            };
+          }
         }
         return {};
       },
@@ -521,19 +532,18 @@
             height: this.layout.fixedBodyHeight ? this.layout.fixedBodyHeight + 'px' : ''
           };
         } else if (this.maxHeight) {
-          let maxHeight = this.layout.scrollX ? this.maxHeight - this.layout.gutterWidth : this.maxHeight;
-
-          if (this.showHeader) {
-            maxHeight -= this.layout.headerHeight;
+          let maxHeight = parseHeight(this.maxHeight);
+          if (typeof maxHeight === 'number') {
+            maxHeight = this.layout.scrollX ? maxHeight - this.layout.gutterWidth : maxHeight;
+            if (this.showHeader) {
+              maxHeight -= this.layout.headerHeight;
+            }
+            maxHeight -= this.layout.footerHeight;
+            return {
+              'max-height': maxHeight + 'px'
+            };
           }
-
-          maxHeight -= this.layout.footerHeight;
-
-          return {
-            'max-height': maxHeight + 'px'
-          };
         }
-
         return {};
       },
 
@@ -557,7 +567,27 @@
             height: this.layout.viewportHeight ? this.layout.viewportHeight + 'px' : ''
           };
         }
-      }
+      },
+
+      emptyBlockStyle() {
+        if (this.data && this.data.length) return null;
+        let height = '100%';
+        if (this.layout.appendHeight) {
+          height = `calc(100% - ${this.layout.appendHeight}px)`;
+        }
+        return {
+          width: this.bodyWidth,
+          height
+        };
+      },
+
+      ...mapStates({
+        selection: 'selection',
+        columns: 'columns',
+        tableData: 'data',
+        fixedColumns: 'fixedColumns',
+        rightFixedColumns: 'rightFixedColumns'
+      })
     },
 
     watch: {
@@ -575,19 +605,18 @@
         }
       },
 
-      currentRowKey(newVal) {
-        this.store.setCurrentRowKey(newVal);
+      currentRowKey: {
+        immediate: true,
+        handler(value) {
+          if (!this.rowKey) return;
+          this.store.setCurrentRowKey(value);
+        }
       },
 
       data: {
         immediate: true,
         handler(value) {
           this.store.commit('setData', value);
-          if (this.$ready) {
-            this.$nextTick(() => {
-              this.doLayout();
-            });
-          }
         }
       },
 
@@ -595,14 +624,15 @@
         immediate: true,
         handler(newVal) {
           if (newVal) {
-            this.store.setExpandRowKeys(newVal);
+            this.store.setExpandRowKeysAdapter(newVal);
           }
         }
       }
     },
 
-    destroyed() {
-      if (this.resizeListener) removeResizeListener(this.$el, this.resizeListener);
+    created() {
+      this.tableId = 'el-table_' + tableIdSeed++;
+      this.debouncedUpdateLayout = debounce(50, () => this.doLayout());
     },
 
     mounted() {
@@ -629,21 +659,31 @@
       this.$ready = true;
     },
 
+    destroyed() {
+      this.unbindEvents();
+    },
+
     data() {
-      const store = new TableStore(this, {
+      const { hasChildren = 'hasChildren', children = 'children' } = this.treeProps;
+      this.store = createStore(this, {
         rowKey: this.rowKey,
         defaultExpandAll: this.defaultExpandAll,
-        selectOnIndeterminate: this.selectOnIndeterminate
+        selectOnIndeterminate: this.selectOnIndeterminate,
+        // TreeTable 的相关配置
+        indent: this.indent,
+        lazy: this.lazy,
+        lazyColumnIdentifier: hasChildren,
+        childrenColumnName: children,
+        checkStrictly: this.checkStrictly
       });
       const layout = new TableLayout({
-        store,
+        store: this.store,
         table: this,
         fit: this.fit,
         showHeader: this.showHeader
       });
       return {
         layout,
-        store,
         isHidden: false,
         renderExpanded: null,
         resizeProxyVisible: false,
diff --git a/packages/table/src/util.js b/packages/table/src/util.js
index 2125e6c5321..7a8ae5c216d 100644
--- a/packages/table/src/util.js
+++ b/packages/table/src/util.js
@@ -120,3 +120,157 @@ export const getRowIdentity = (row, rowKey) => {
     return rowKey.call(null, row);
   }
 };
+
+export const getKeysMap = function(array, rowKey) {
+  const arrayMap = {};
+  (array || []).forEach((row, index) => {
+    arrayMap[getRowIdentity(row, rowKey)] = { row, index };
+  });
+  return arrayMap;
+};
+
+function hasOwn(obj, key) {
+  return Object.prototype.hasOwnProperty.call(obj, key);
+}
+
+export function mergeOptions(defaults, config) {
+  const options = {};
+  let key;
+  for (key in defaults) {
+    options[key] = defaults[key];
+  }
+  for (key in config) {
+    if (hasOwn(config, key)) {
+      const value = config[key];
+      if (typeof value !== 'undefined') {
+        options[key] = value;
+      }
+    }
+  }
+  return options;
+}
+
+export function parseWidth(width) {
+  if (width !== undefined) {
+    width = parseInt(width, 10);
+    if (isNaN(width)) {
+      width = null;
+    }
+  }
+  return width;
+}
+
+export function parseMinWidth(minWidth) {
+  if (typeof minWidth !== 'undefined') {
+    minWidth = parseWidth(minWidth);
+    if (isNaN(minWidth)) {
+      minWidth = 80;
+    }
+  }
+  return minWidth;
+};
+
+export function parseHeight(height) {
+  if (typeof height === 'number') {
+    return height;
+  }
+  if (typeof height === 'string') {
+    if (/^\d+(?:px)?$/.test(height)) {
+      return parseInt(height, 10);
+    } else {
+      return height;
+    }
+  }
+  return null;
+}
+
+// https://github.com/reduxjs/redux/blob/master/src/compose.js
+export function compose(...funcs) {
+  if (funcs.length === 0) {
+    return arg => arg;
+  }
+  if (funcs.length === 1) {
+    return funcs[0];
+  }
+  return funcs.reduce((a, b) => (...args) => a(b(...args)));
+}
+
+export function toggleRowStatus(statusArr, row, newVal) {
+  let changed = false;
+  const index = statusArr.indexOf(row);
+  const included = index !== -1;
+
+  const addRow = () => {
+    statusArr.push(row);
+    changed = true;
+  };
+  const removeRow = () => {
+    statusArr.splice(index, 1);
+    changed = true;
+  };
+
+  if (typeof newVal === 'boolean') {
+    if (newVal && !included) {
+      addRow();
+    } else if (!newVal && included) {
+      removeRow();
+    }
+  } else {
+    if (included) {
+      removeRow();
+    } else {
+      addRow();
+    }
+  }
+  return changed;
+}
+
+export function walkTreeNode(root, cb, childrenKey = 'children', lazyKey = 'hasChildren') {
+  const isNil = (array) => !(Array.isArray(array) && array.length);
+
+  function _walker(parent, children, level) {
+    cb(parent, children, level);
+    children.forEach(item => {
+      if (item[lazyKey]) {
+        cb(item, null, level + 1);
+        return;
+      }
+      const children = item[childrenKey];
+      if (!isNil(children)) {
+        _walker(item, children, level + 1);
+      }
+    });
+  }
+
+  root.forEach(item => {
+    if (item[lazyKey]) {
+      cb(item, null, 0);
+      return;
+    }
+    const children = item[childrenKey];
+    if (!isNil(children)) {
+      _walker(item, children, 0);
+    }
+  });
+}
+
+export function findParentData(data, row, childKey = 'children') {
+  let parent = null;
+  for (let i = 0; i < data.length; i++) {
+    const item = data[i];
+    const children = item[childKey] || [];
+    // 如果children里的数据包含row，则找到parent了
+    if (children.indexOf(row) > -1) {
+      parent = item;
+    }
+    // 如果没找到并且该item有children，则继续查找该item的children
+    if (!parent && children.length) {
+      parent = findParentData(children, row, childKey);
+    }
+    // 找到后立刻返回
+    if (parent) {
+      return parent;
+    }
+  }
+  return null;
+}
diff --git a/packages/tabs-dotted/index.js b/packages/tabs-dotted/index.js
new file mode 100644
index 00000000000..90541acde05
--- /dev/null
+++ b/packages/tabs-dotted/index.js
@@ -0,0 +1,8 @@
+import TabsDotted from './src/main';
+
+/* istanbul ignore next */
+TabsDotted.install = function(Vue) {
+  Vue.component(TabsDotted.name, TabsDotted);
+};
+
+export default TabsDotted;
diff --git a/packages/tabs-dotted/src/main.vue b/packages/tabs-dotted/src/main.vue
new file mode 100644
index 00000000000..b6c99828158
--- /dev/null
+++ b/packages/tabs-dotted/src/main.vue
@@ -0,0 +1,15 @@
+<template>
+  <el-tabs :class="{'el-tabs-dotted' : $attrs.type === 'dotted'}" v-bind="$attrs" v-on='$listeners'>
+    <slot></slot>
+  </el-tabs>
+</template>
+
+<script>
+import ElTabs from 'element-ui/packages/tabs';
+export default {
+  name: 'ElTabsDotted',
+  components: {
+    ElTabs
+  }
+};
+</script>
diff --git a/packages/tabs/src/tab-bar.vue b/packages/tabs/src/tab-bar.vue
index 5014055dc07..dc1ed001ad0 100644
--- a/packages/tabs/src/tab-bar.vue
+++ b/packages/tabs/src/tab-bar.vue
@@ -2,6 +2,7 @@
   <div class="el-tabs__active-bar" :class="`is-${ rootTabs.tabPosition }`" :style="barStyle"></div>
 </template>
 <script>
+  import { arrayFind } from 'element-ui/src/utils/util';
   export default {
     name: 'TabBar',
 
@@ -13,9 +14,7 @@
 
     computed: {
       barStyle: {
-        cache: false,
         get() {
-          if (!this.$parent.$refs.tabs) return {};
           let style = {};
           let offset = 0;
           let tabSize = 0;
@@ -24,25 +23,36 @@
           const firstUpperCase = str => {
             return str.toLowerCase().replace(/( |^)[a-z]/g, (L) => L.toUpperCase());
           };
-          this.tabs.every((tab, index) => {
-            let $el = this.$parent.$refs.tabs[index];
+          const isHorizon = sizeName === 'width';
+
+          this.tabs.every((tab) => {
+            let $el = arrayFind(this.$parent.$refs.tabs || [], t => t.id.replace('tab-', '') === tab.paneName);
             if (!$el) { return false; }
 
+            const tabStyles = window.getComputedStyle($el);
             if (!tab.active) {
               offset += $el[`client${firstUpperCase(sizeName)}`];
+              if (isHorizon) {
+                offset += parseFloat(tabStyles.marginLeft) + parseFloat(tabStyles.marginRight);
+              } else {
+                offset += parseFloat(tabStyles.marginTop) + parseFloat(tabStyles.marginBottom);
+              }
               return true;
             } else {
               tabSize = $el[`client${firstUpperCase(sizeName)}`];
-              if (sizeName === 'width' && this.tabs.length > 1) {
-                tabSize -= (index === 0 || index === this.tabs.length - 1) ? 20 : 40;
+              if (isHorizon && this.tabs.length > 1) {
+                tabSize -= parseFloat(tabStyles.paddingLeft) + parseFloat(tabStyles.paddingRight);
+              }
+              if (isHorizon) {
+                offset += parseFloat(tabStyles.paddingLeft);
+                offset += parseFloat(tabStyles.marginLeft);
+              } else {
+                offset += parseFloat(tabStyles.marginTop);
               }
               return false;
             }
           });
 
-          if (sizeName === 'width' && offset !== 0) {
-            offset += 20;
-          }
           const transform = `translate${firstUpperCase(sizeDir)}(${offset}px)`;
           style[sizeName] = tabSize + 'px';
           style.transform = transform;
diff --git a/packages/tabs/src/tab-nav.vue b/packages/tabs/src/tab-nav.vue
index 0d5ff6a9588..19096f28148 100644
--- a/packages/tabs/src/tab-nav.vue
+++ b/packages/tabs/src/tab-nav.vue
@@ -85,19 +85,30 @@
         const activeTab = this.$el.querySelector('.is-active');
         if (!activeTab) return;
         const navScroll = this.$refs.navScroll;
+        const isHorizontal = ['top', 'bottom'].indexOf(this.rootTabs.tabPosition) !== -1;
         const activeTabBounding = activeTab.getBoundingClientRect();
         const navScrollBounding = navScroll.getBoundingClientRect();
-        const maxOffset = nav.offsetWidth - navScrollBounding.width;
+        const maxOffset = isHorizontal
+          ? nav.offsetWidth - navScrollBounding.width
+          : nav.offsetHeight - navScrollBounding.height;
         const currentOffset = this.navOffset;
         let newOffset = currentOffset;
 
-        if (activeTabBounding.left < navScrollBounding.left) {
-          newOffset = currentOffset - (navScrollBounding.left - activeTabBounding.left);
-        }
-        if (activeTabBounding.right > navScrollBounding.right) {
-          newOffset = currentOffset + activeTabBounding.right - navScrollBounding.right;
+        if (isHorizontal) {
+          if (activeTabBounding.left < navScrollBounding.left) {
+            newOffset = currentOffset - (navScrollBounding.left - activeTabBounding.left);
+          }
+          if (activeTabBounding.right > navScrollBounding.right) {
+            newOffset = currentOffset + activeTabBounding.right - navScrollBounding.right;
+          }
+        } else {
+          if (activeTabBounding.top < navScrollBounding.top) {
+            newOffset = currentOffset - (navScrollBounding.top - activeTabBounding.top);
+          }
+          if (activeTabBounding.bottom > navScrollBounding.bottom) {
+            newOffset = currentOffset + (activeTabBounding.bottom - navScrollBounding.bottom);
+          }
         }
-
         newOffset = Math.max(newOffset, 0);
         this.navOffset = Math.min(newOffset, maxOffset);
       },
@@ -268,6 +279,9 @@
       document.addEventListener('visibilitychange', this.visibilityChangeHandler);
       window.addEventListener('blur', this.windowBlurHandler);
       window.addEventListener('focus', this.windowFocusHandler);
+      setTimeout(() => {
+        this.scrollToActiveTab();
+      }, 0);
     },
 
     beforeDestroy() {
diff --git a/packages/tabs/src/tab-pane.vue b/packages/tabs/src/tab-pane.vue
index bb6d4f15651..2e3ed7528e4 100644
--- a/packages/tabs/src/tab-pane.vue
+++ b/packages/tabs/src/tab-pane.vue
@@ -49,10 +49,8 @@
       }
     },
 
-    watch: {
-      label() {
-        this.$parent.$forceUpdate();
-      }
+    updated() {
+      this.$parent.$emit('tab-nav-update');
     }
   };
 </script>
diff --git a/packages/tabs/src/tabs.vue b/packages/tabs/src/tabs.vue
index d70d28c897b..6d1b0932979 100644
--- a/packages/tabs/src/tabs.vue
+++ b/packages/tabs/src/tabs.vue
@@ -55,13 +55,14 @@
     },
 
     methods: {
-      calcPaneInstances() {
+      calcPaneInstances(isForceUpdate = false) {
         if (this.$slots.default) {
           const paneSlots = this.$slots.default.filter(vnode => vnode.tag &&
             vnode.componentOptions && vnode.componentOptions.Ctor.options.name === 'ElTabPane');
           // update indeed
           const panes = paneSlots.map(({ componentInstance }) => componentInstance);
-          if (!(panes.length === this.panes.length && panes.every((pane, index) => pane === this.panes[index]))) {
+          const panesChanged = !(panes.length === this.panes.length && panes.every((pane, index) => pane === this.panes[index]));
+          if (isForceUpdate || panesChanged) {
             this.panes = panes;
           }
         } else if (this.panes.length !== 0) {
@@ -91,11 +92,14 @@
         if (this.currentName !== value && this.beforeLeave) {
           const before = this.beforeLeave(value, this.currentName);
           if (before && before.then) {
-            before.then(() => {
-              changeCurrentName();
-
-              this.$refs.nav && this.$refs.nav.removeFocus();
-            });
+            before
+              .then(() => {
+                changeCurrentName();
+                this.$refs.nav && this.$refs.nav.removeFocus();
+              }, () => {
+                // https://github.com/ElemeFE/element/pull/14816
+                // ignore promise rejection in `before-leave` hook
+              });
           } else if (before !== false) {
             changeCurrentName();
           }
@@ -172,6 +176,8 @@
       if (!this.currentName) {
         this.setCurrentName('0');
       }
+
+      this.$on('tab-nav-update', this.calcPaneInstances.bind(null, true));
     },
 
     mounted() {
diff --git a/packages/tag/src/tag.vue b/packages/tag/src/tag.vue
index 7b11c293571..7aa0bb595ba 100644
--- a/packages/tag/src/tag.vue
+++ b/packages/tag/src/tag.vue
@@ -8,12 +8,22 @@
       hit: Boolean,
       disableTransitions: Boolean,
       color: String,
-      size: String
+      size: String,
+      effect: {
+        type: String,
+        default: 'light',
+        validator(val) {
+          return ['dark', 'light', 'plain'].indexOf(val) !== -1;
+        }
+      }
     },
     methods: {
       handleClose(event) {
         event.stopPropagation();
         this.$emit('close', event);
+      },
+      handleClick(event) {
+        this.$emit('click', event);
       }
     },
     computed: {
@@ -22,16 +32,25 @@
       }
     },
     render(h) {
-      const classes = [ 'el-tag', this.type ? `el-tag--${this.type}` : '',
-        this.tagSize ? `el-tag--${this.tagSize}` : '',
-        {'is-hit': this.hit}
+      const { type, tagSize, hit, effect } = this;
+      const classes = [
+        'el-tag',
+        type ? `el-tag--${type}` : '',
+        tagSize ? `el-tag--${tagSize}` : '',
+        effect ? `el-tag--${effect}` : '',
+        hit && 'is-hit'
       ];
-      const tagEl = (<span class={classes} style={{backgroundColor: this.color}}>
-        { this.$slots.default }
-        {
-          this.closable && <i class="el-tag__close el-icon-close" on-click={this.handleClose}></i>
-        }
-      </span>);
+      const tagEl = (
+        <span
+          class={ classes }
+          style={{ backgroundColor: this.color }}
+          on-click={ this.handleClick }>
+          { this.$slots.default }
+          {
+            this.closable && <i class="el-tag__close el-icon-close" on-click={ this.handleClose }></i>
+          }
+        </span>
+      );
 
       return this.disableTransitions ? tagEl : <transition name="el-zoom-in-center">{ tagEl }</transition>;
     }
diff --git a/packages/theme-chalk/README.md b/packages/theme-chalk/README.md
index ad6fce84826..3ed47ca7bbc 100644
--- a/packages/theme-chalk/README.md
+++ b/packages/theme-chalk/README.md
@@ -1,33 +1,32 @@
-# element-theme-chalk
-> element component chalk theme.
-
+# @femessage/theme-deepexi
+deepexi 自定义 element 主题
 
 ## Installation
 ```shell
-npm i element-theme-chalk -S
+yarn add @femessage/theme-deepexi
 ```
 
 ## Usage
 
-Use Sass import
-```css
-@import 'element-theme-chalk';
-```
-
-Or Use webpack
+在 nuxt 中使用
 ```javascript
-import 'element-theme-chalk';
-```
-
-Or
-```html
-<link rel="stylesheet" href="path/to/node_modules/element-theme-chalk/lib/index.css">
+// 修改 nuxt.config.js
+babel: {
+  plugins: [
+    [
+      'component',
+      {
+        libraryName: 'element-ui',
+        styleLibraryName: '~node_modules/@femessage/theme-deepexi/lib'
+      }
+    ]
+  ]
+}
 ```
-
-##  Import on demand
+在 vue 项目中使用
 ```javascript
-import 'element-theme-chalk/lib/input.css';
-import 'element-theme-chalk/lib/select.css';
-
-// ...
-```
+import Vue from "vue";
+import ElementUI from 'element-ui';
+import '@femessage/theme-deepexi/lib/index.css';
+Vue.use(ElementUI);
+```
\ No newline at end of file
diff --git a/packages/theme-chalk/gulpfile.js b/packages/theme-chalk/gulpfile.js
index 3e20d8a6ae0..e1c5479e769 100644
--- a/packages/theme-chalk/gulpfile.js
+++ b/packages/theme-chalk/gulpfile.js
@@ -1,25 +1,25 @@
 'use strict';
 
-var gulp = require('gulp');
-var sass = require('gulp-sass');
-var autoprefixer = require('gulp-autoprefixer');
-var cssmin = require('gulp-cssmin');
+const { series, src, dest } = require('gulp');
+const sass = require('gulp-sass');
+const autoprefixer = require('gulp-autoprefixer');
+const cssmin = require('gulp-cssmin');
 
-gulp.task('compile', function() {
-  return gulp.src('./src/*.scss')
+function compile() {
+  return src('./src/*.scss')
     .pipe(sass.sync())
     .pipe(autoprefixer({
       browsers: ['ie > 9', 'last 2 versions'],
       cascade: false
     }))
     .pipe(cssmin())
-    .pipe(gulp.dest('./lib'));
-});
+    .pipe(dest('./lib'));
+}
 
-gulp.task('copyfont', function() {
-  return gulp.src('./src/fonts/**')
+function copyfont() {
+  return src('./src/fonts/**')
     .pipe(cssmin())
-    .pipe(gulp.dest('./lib/fonts'));
-});
+    .pipe(dest('./lib/fonts'));
+}
 
-gulp.task('build', ['compile', 'copyfont']);
+exports.build = series(compile, copyfont);
diff --git a/packages/theme-chalk/package.json b/packages/theme-chalk/package.json
index 260ce0c3ba3..df37cd8990b 100644
--- a/packages/theme-chalk/package.json
+++ b/packages/theme-chalk/package.json
@@ -1,6 +1,6 @@
 {
   "name": "element-theme-chalk",
-  "version": "2.4.11",
+  "version": "2.13.0",
   "description": "Element component chalk theme.",
   "main": "lib/index.css",
   "style": "lib/index.css",
@@ -13,18 +13,13 @@
   },
   "repository": {
     "type": "git",
-    "url": "git+https://github.com/ElementUI/theme-chalk.git"
+    "url": "git+https://github.com/FEMessage/element.git"
   },
   "keywords": [
     "element",
     "theme"
   ],
-  "author": "yi.shyang@ele.me",
-  "license": "MIT",
-  "bugs": {
-    "url": "https://github.com/ElementUI/theme-chalk/issues"
-  },
-  "homepage": "https://github.com/ElementUI/theme-chalk#readme",
+  "homepage": "https://github.com/FEMessage/element#readme",
   "devDependencies": {
     "gulp": "^3.9.1",
     "gulp-cssmin": "^0.1.7",
diff --git a/packages/theme-chalk/src/affix.scss b/packages/theme-chalk/src/affix.scss
new file mode 100644
index 00000000000..3819f16c20f
--- /dev/null
+++ b/packages/theme-chalk/src/affix.scss
@@ -0,0 +1,7 @@
+@import "mixins/mixins";
+@import "common/var";
+
+@include b(affix) {
+  position: fixed;
+  z-index: $--zindex-affix;
+}
diff --git a/packages/theme-chalk/src/alert.scss b/packages/theme-chalk/src/alert.scss
index 659ac43e640..500560b2ba3 100644
--- a/packages/theme-chalk/src/alert.scss
+++ b/packages/theme-chalk/src/alert.scss
@@ -15,22 +15,51 @@
   align-items: center;
   transition: opacity .2s;
 
+  @include when(light) {
+    .el-alert__closebtn {
+      color: $--color-text-placeholder;
+    }
+  }
+
+  @include when(dark) {
+    .el-alert__closebtn {
+      color: $--color-white;
+    }
+    .el-alert__description {
+      color: $--color-white;
+    }
+  }
+
   @include when(center) {
     justify-content: center;
   }
 
   @include m(success) {
-    background-color: $--alert-success-color;
-    color: $--color-success;
-
-    .el-alert__description {
+    &.is-light {
+      background-color: $--alert-success-color;
       color: $--color-success;
+
+      .el-alert__description {
+        color: $--color-success;
+      }
+    }
+
+    &.is-dark {
+      background-color: $--color-success;
+      color: $--color-white;
     }
   }
 
   @include m(info) {
-    background-color: $--alert-info-color;
-    color: $--color-info;
+    &.is-light {
+      background-color: $--alert-info-color;
+      color: $--color-info;
+    }
+
+    &.is-dark {
+      background-color: $--color-info;
+      color: $--color-white;
+    }
 
     .el-alert__description {
       color: $--color-info;
@@ -38,20 +67,34 @@
   }
 
   @include m(warning) {
-    background-color: $--alert-warning-color;
-    color: $--color-warning;
-
-    .el-alert__description {
+    &.is-light {
+      background-color: $--alert-warning-color;
       color: $--color-warning;
+
+      .el-alert__description {
+        color: $--color-warning;
+      }
+    }
+
+    &.is-dark {
+      background-color: $--color-warning;
+      color: $--color-white;
     }
   }
 
   @include m(error) {
-    background-color: $--alert-danger-color;
-    color: $--color-danger;
-
-    .el-alert__description {
+    &.is-light {
+      background-color: $--alert-danger-color;
       color: $--color-danger;
+
+      .el-alert__description {
+        color: $--color-danger;
+      }
+    }
+
+    &.is-dark {
+      background-color: $--color-danger;
+      color: $--color-white;
     }
   }
 
@@ -84,7 +127,6 @@
 
   @include e(closebtn) {
     font-size: $--alert-close-font-size;
-    color: $--color-text-placeholder;
     opacity: 1;
     position: absolute;
     top: 12px;
diff --git a/packages/theme-chalk/src/autocomplete.scss b/packages/theme-chalk/src/autocomplete.scss
index 68fa447f334..d9c6e194155 100644
--- a/packages/theme-chalk/src/autocomplete.scss
+++ b/packages/theme-chalk/src/autocomplete.scss
@@ -15,15 +15,13 @@
   box-shadow: $--box-shadow-light;
   border-radius: $--border-radius-base;
   border: 1px solid $--border-color-light;
-  overflow: hidden;
   box-sizing: border-box;
+  background-color: $--color-white;
 
   @include e(wrap) {
     max-height: 280px;
     padding: 10px 0;
     box-sizing: border-box;
-    overflow: auto;
-    background-color: $--color-white;
   }
 
   @include e(list) {
diff --git a/packages/theme-chalk/src/avatar.scss b/packages/theme-chalk/src/avatar.scss
new file mode 100644
index 00000000000..3352620af6f
--- /dev/null
+++ b/packages/theme-chalk/src/avatar.scss
@@ -0,0 +1,61 @@
+@import "mixins/mixins";
+@import "common/var";
+
+@include b(avatar) {
+  position: relative;
+  display: inline-block;
+  box-sizing: border-box;
+  text-align: center;
+  overflow: hidden;
+  color: $--avatar-font-color;
+  background: $--avatar-background-color;
+  width: $--avatar-large-size;
+  height: $--avatar-large-size;
+  line-height: $--avatar-large-size;
+  font-size: $--avatar-text-font-size;
+
+  >img {
+    display: block;
+    height: 100%;
+    vertical-align: middle;
+  }
+
+  .avatar-text {
+    font-size: 12px;
+    position: absolute;
+    top: 50%;
+    left: 50%;
+    white-space: nowrap;
+    display: inline-block;
+  }
+
+  @include m(circle) {
+    border-radius: 50%;
+  }
+
+  @include m(square) {
+    border-radius: $--avatar-border-radius;
+  }
+
+  @include m(icon) {
+    font-size: $--avatar-icon-font-size;
+  }
+
+  @include m(large) {
+    width: $--avatar-large-size;
+    height: $--avatar-large-size;
+    line-height: $--avatar-large-size;
+  }
+
+  @include m(medium) {
+    width: $--avatar-medium-size;
+    height: $--avatar-medium-size;
+    line-height: $--avatar-medium-size;
+  }
+
+  @include m(small) {
+    width: $--avatar-small-size;
+    height: $--avatar-small-size;
+    line-height: $--avatar-small-size;
+  }
+}
diff --git a/packages/theme-chalk/src/backtop.scss b/packages/theme-chalk/src/backtop.scss
new file mode 100644
index 00000000000..f41524358ad
--- /dev/null
+++ b/packages/theme-chalk/src/backtop.scss
@@ -0,0 +1,22 @@
+@import "mixins/mixins";
+@import "common/var";
+
+@include b(backtop) {
+  position: fixed;
+  background-color: $--backtop-background-color;
+  width: 40px;
+  height: 40px;
+  border-radius: 50%;
+  color: $--backtop-font-color;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  font-size: 20px;
+  box-shadow: 0 0 6px rgba(0,0,0, .12);
+  cursor: pointer;
+  z-index: 5;
+
+  &:hover {
+    background-color: $--backtop-hover-background-color
+  }
+}
diff --git a/packages/theme-chalk/src/badge.scss b/packages/theme-chalk/src/badge.scss
index 1ef8d3897fd..4776e677948 100644
--- a/packages/theme-chalk/src/badge.scss
+++ b/packages/theme-chalk/src/badge.scss
@@ -7,7 +7,7 @@
   display: inline-block;
 
   @include e(content) {
-    background-color: $--badge-fill;
+    background-color: $--badge-background-color;
     border-radius: $--badge-radius;
     color: $--color-white;
     display: inline-block;
diff --git a/packages/theme-chalk/src/button-group-enhance.scss b/packages/theme-chalk/src/button-group-enhance.scss
new file mode 100644
index 00000000000..187bd3313ad
--- /dev/null
+++ b/packages/theme-chalk/src/button-group-enhance.scss
@@ -0,0 +1,28 @@
+@import "mixins/mixins";
+@import "common/var";
+
+@include b(button-group-enhance) {
+  display: flex;
+
+  & > .el-button {
+    flex: 1 0 0;
+    padding-left: 0;
+    padding-right: 0;
+  }
+
+  .el-dropdown {
+    flex: 1 0 0;
+    .el-dropdown__caret-button {
+      width: 100%;
+      border-top-left-radius: 0;
+      border-bottom-left-radius: 0;
+      &::before {
+        top: 0;
+        bottom: 0;
+      }
+      &.el-button--default::before {
+        background-color: #DCDEE6;
+      }
+    }
+  }
+}
diff --git a/packages/theme-chalk/src/button.scss b/packages/theme-chalk/src/button.scss
index f94040c205d..52c8767d946 100644
--- a/packages/theme-chalk/src/button.scss
+++ b/packages/theme-chalk/src/button.scss
@@ -9,10 +9,10 @@
   line-height: 1;
   white-space: nowrap;
   cursor: pointer;
-  background: $--button-default-fill;
+  background: $--button-default-background-color;
   border: $--border-base;
-  border-color: $--button-default-border;
-  color: $--button-default-color;
+  border-color: $--button-default-border-color;
+  color: $--button-default-font-color;
   -webkit-appearance: none;
   text-align: center;
   box-sizing: border-box;
@@ -75,11 +75,11 @@
     &,
     &:hover,
     &:focus {
-      color: $--button-disabled-color;
+      color: $--button-disabled-font-color;
       cursor: not-allowed;
       background-image: none;
-      background-color: $--button-disabled-fill;
-      border-color: $--button-disabled-border;
+      background-color: $--button-disabled-background-color;
+      border-color: $--button-disabled-border-color;
     }
 
     &.el-button--text {
@@ -91,8 +91,8 @@
       &:hover,
       &:focus {
         background-color: $--color-white;
-        border-color: $--button-disabled-border;
-        color: $--button-disabled-color;
+        border-color: $--button-disabled-border-color;
+        color: $--button-disabled-font-color;
       }
     }
   }
@@ -122,19 +122,19 @@
     padding: $--button-padding-vertical;
   }
   @include m(primary) {
-    @include button-variant($--button-primary-color, $--button-primary-fill, $--button-primary-border);
+    @include button-variant($--button-primary-font-color, $--button-primary-background-color, $--button-primary-border-color);
   }
   @include m(success) {
-    @include button-variant($--button-success-color, $--button-success-fill, $--button-success-border);
+    @include button-variant($--button-success-font-color, $--button-success-background-color, $--button-success-border-color);
   }
   @include m(warning) {
-    @include button-variant($--button-warning-color, $--button-warning-fill, $--button-warning-border);
+    @include button-variant($--button-warning-font-color, $--button-warning-background-color, $--button-warning-border-color);
   }
   @include m(danger) {
-    @include button-variant($--button-danger-color, $--button-danger-fill, $--button-danger-border);
+    @include button-variant($--button-danger-font-color, $--button-danger-background-color, $--button-danger-border-color);
   }
   @include m(info) {
-    @include button-variant($--button-info-color, $--button-info-fill, $--button-info-border);
+    @include button-variant($--button-info-font-color, $--button-info-background-color, $--button-info-border-color);
   }
   @include m(medium) {
     @include button-size($--button-medium-padding-vertical, $--button-medium-padding-horizontal, $--button-medium-font-size, $--button-medium-border-radius);
diff --git a/packages/theme-chalk/src/calendar.scss b/packages/theme-chalk/src/calendar.scss
new file mode 100644
index 00000000000..1364861017b
--- /dev/null
+++ b/packages/theme-chalk/src/calendar.scss
@@ -0,0 +1,79 @@
+@import "mixins/mixins";
+@import "common/var";
+@import "button";
+@import "button-group";
+
+@include b(calendar) {
+  background-color:#fff;
+
+  @include e(header) {
+    display: flex;
+    justify-content: space-between;
+    padding: 12px 20px;
+    border-bottom: $--table-border;
+  }
+
+  @include e(title) {
+    color: #000000;
+    align-self: center;
+  }
+
+  @include e(body) {
+    padding: 12px 20px 35px;
+  }
+}
+
+@include b(calendar-table) {
+  table-layout: fixed;
+  width: 100%;
+
+  thead th {
+    padding: 12px 0;
+    color: $--color-text-regular;
+    font-weight: normal;
+  }
+
+  &:not(.is-range) {
+    td.prev,
+    td.next {
+      color: $--color-text-placeholder;
+    }
+  }
+
+  td {
+    border-bottom: $--calendar-border;
+    border-right: $--calendar-border;
+    vertical-align: top;
+    transition: background-color 0.2s ease;
+
+    @include when(selected) {
+      background-color: $--calendar-selected-background-color;
+    }
+
+    @include when(today) {
+      color: $--color-primary;
+    }
+  }
+
+  tr:first-child td {
+    border-top: $--calendar-border;
+  }
+
+  tr td:first-child {
+    border-left: $--calendar-border;
+  }
+
+  tr.el-calendar-table__row--hide-border td {
+    border-top: none;
+  }
+
+  @include b(calendar-day) {
+    box-sizing: border-box;
+    padding: 8px;
+    height: $--calendar-cell-width;
+    &:hover {
+      cursor: pointer;
+      background-color: $--calendar-selected-background-color;
+    }
+  }
+}
diff --git a/packages/theme-chalk/src/carousel.scss b/packages/theme-chalk/src/carousel.scss
index 0a6de09e44d..cfca9626df2 100644
--- a/packages/theme-chalk/src/carousel.scss
+++ b/packages/theme-chalk/src/carousel.scss
@@ -2,9 +2,16 @@
 @import "common/var";
 
 @include b(carousel) {
-  overflow-x: hidden;
   position: relative;
 
+  @include m(horizontal) {
+    overflow-x: hidden;
+  }
+
+  @include m(vertical) {
+    overflow-y: hidden;
+  }
+
   @include e(container) {
     position: relative;
     height: 300px;
@@ -49,13 +56,22 @@
   @include e(indicators) {
     position: absolute;
     list-style: none;
-    bottom: 0;
-    left: 50%;
-    transform: translateX(-50%);
     margin: 0;
     padding: 0;
     z-index: #{$--index-normal + 1};
 
+    @include m(horizontal) {
+      bottom: 0;
+      left: 50%;
+      transform: translateX(-50%);
+    }
+
+    @include m(vertical) {
+      right: 0;
+      top: 50%;
+      transform: translateY(-50%);
+    }
+
     @include m(outside) {
       bottom: #{$--carousel-indicator-height + $--carousel-indicator-padding-vertical * 2};
       text-align: center;
@@ -90,15 +106,26 @@
   }
 
   @include e(indicator) {
-    display: inline-block;
     background-color: transparent;
-    padding: $--carousel-indicator-padding-vertical $--carousel-indicator-padding-horizontal;
     cursor: pointer;
 
     &:hover button {
       opacity: 0.72;
     }
 
+    @include m(horizontal) {
+      display: inline-block;
+      padding: $--carousel-indicator-padding-vertical $--carousel-indicator-padding-horizontal;
+    }
+
+    @include m(vertical) {
+      padding: $--carousel-indicator-padding-horizontal $--carousel-indicator-padding-vertical;
+      .el-carousel__button {
+        width: $--carousel-indicator-height;
+        height: #{$--carousel-indicator-width / 2};
+      }
+    }
+
     @include when(active) {
       button {
         opacity: 1;
diff --git a/packages/theme-chalk/src/cascader-panel.scss b/packages/theme-chalk/src/cascader-panel.scss
new file mode 100644
index 00000000000..7fca5a0f09e
--- /dev/null
+++ b/packages/theme-chalk/src/cascader-panel.scss
@@ -0,0 +1,120 @@
+@import "mixins/mixins";
+@import "common/var";
+@import "./checkbox";
+@import "./radio";
+@import "./scrollbar";
+
+@include b(cascader-panel) {
+  display: flex;
+  border-radius: $--cascader-menu-radius;
+  font-size: $--cascader-menu-font-size;
+
+  @include when(bordered) {
+    border: $--cascader-menu-border;
+    border-radius: $--cascader-menu-radius;
+  }
+}
+
+@include b(cascader-menu) {
+  min-width: 180px;
+  box-sizing: border-box;
+  color: $--cascader-menu-font-color;
+  border-right: $--cascader-menu-border;
+
+  &:last-child {
+    border-right: none;
+    .el-cascader-node {
+      padding-right: 20px;
+    }
+  }
+
+  @include e(wrap) {
+    height: 204px;
+  }
+
+  @include e(list) {
+    position: relative;
+    min-height: 100%;
+    margin: 0;
+    padding: 6px 0;
+    list-style: none;
+    box-sizing: border-box;
+  }
+
+  @include e(hover-zone) {
+    position: absolute;
+    top: 0;
+    left: 0;
+    width: 100%;
+    height: 100%;
+    pointer-events: none;
+  }
+
+  @include e(empty-text) {
+    position: absolute;
+    top: 50%;
+    left: 50%;
+    transform: translate(-50%, -50%);
+    text-align: center;
+    color: $--cascader-color-empty;
+  }
+}
+
+@include b(cascader-node) {
+  position: relative;
+  display: flex;
+  align-items: center;
+  padding: 0 30px 0 20px;
+  height: 34px;
+  line-height: 34px;
+  outline: none;
+
+  &.is-selectable.in-active-path {
+    color: $--cascader-menu-font-color;
+  }
+
+  &.in-active-path,
+  &.is-selectable.in-checked-path,
+  &.is-active {
+    color: $--cascader-menu-selected-font-color;
+    font-weight: bold;
+  }
+
+  &:not(.is-disabled) {
+    cursor: pointer;
+    &:hover, &:focus {
+      background: $--cascader-node-background-hover;
+    }
+  }
+
+  @include when(disabled) {
+    color: $--cascader-node-color-disabled;
+    cursor: not-allowed;
+  }
+
+  @include e(prefix) {
+    position: absolute;
+    left: 10px;
+  }
+
+  @include e(postfix) {
+    position: absolute;
+    right: 10px;
+  }
+
+  @include e(label) {
+    flex: 1;
+    padding: 0 10px;
+    white-space: nowrap;
+    overflow: hidden;
+    text-overflow: ellipsis;
+  }
+
+  > .el-radio {
+    margin-right: 0;
+
+    .el-radio__label {
+      padding-left: 0;
+    }
+  }
+}
diff --git a/packages/theme-chalk/src/cascader.scss b/packages/theme-chalk/src/cascader.scss
index e57f8a8bb76..5c883ea9ccf 100644
--- a/packages/theme-chalk/src/cascader.scss
+++ b/packages/theme-chalk/src/cascader.scss
@@ -1,7 +1,9 @@
 @import "mixins/mixins";
 @import "common/var";
-@import "./input.scss";
+@import "./input";
 @import "./popper";
+@import "./tag";
+@import "./cascader-panel";
 
 @include b(cascader) {
   display: inline-block;
@@ -9,76 +11,57 @@
   font-size: $--font-size-base;
   line-height: $--input-height;
 
-  .el-input,
-  .el-input__inner {
-    cursor: pointer;
-  }
-
-  .el-input.is-focus .el-input__inner {
-    border-color: $--input-focus-border;
+  &:not(.is-disabled):hover {
+    .el-input__inner {
+      cursor: pointer;
+      border-color: $--input-hover-border;
+    }
   }
 
-  .el-input__icon {
-    transition: none;
-  }
+  .el-input {
+    cursor: pointer;
 
-  .el-icon-arrow-down {
-    transition: transform .3s;
-    font-size: 14px;
+    .el-input__inner {
+      text-overflow: ellipsis;
 
-    @include when(reverse) {
-      transform: rotateZ(180deg);
+      &:focus {
+        border-color: $--input-focus-border;
+      }
     }
-  }
 
-  .el-icon-circle-close {
-    z-index: #{$--index-normal + 1};
-    transition: $--color-transition-base;
+    .el-icon-arrow-down {
+      transition: transform .3s;
+      font-size: 14px;
 
-    &:hover {
-      color: $--color-text-secondary;
+      @include when(reverse) {
+        transform: rotateZ(180deg);
+      }
     }
-  }
-
-  @include e(clearIcon) {
-    z-index: 2;
-    position: relative;
-  }
 
-  @include e(label) {
-    position: absolute;
-    left: 0;
-    top: 0;
-    height: 100%;
-    padding: 0 25px 0 15px;
-    color: $--input-color;
-    width: 100%;
-    white-space: nowrap;
-    text-overflow: ellipsis;
-    overflow: hidden;
-    box-sizing: border-box;
-    cursor: pointer;
-    text-align: left;
-    font-size: inherit;
+    .el-icon-circle-close:hover {
+      color: $--input-clear-hover-color;
+    }
 
-    span {
-      color: $--color-black;
+    @include when(focus) {
+      .el-input__inner {
+        border-color: $--input-focus-border;
+      }
     }
   }
 
   @include m(medium) {
     font-size: $--input-medium-font-size;
-    line-height: #{$--input-medium-height};
+    line-height: $--input-medium-height;
   }
 
   @include m(small) {
     font-size: $--input-small-font-size;
-    line-height: #{$--input-small-height};
+    line-height: $--input-small-height;
   }
 
   @include m(mini) {
     font-size: $--input-mini-font-size;
-    line-height: #{$--input-mini-height};
+    line-height: $--input-mini-height;
   }
 
   @include when(disabled) {
@@ -87,94 +70,113 @@
       color: $--disabled-color-base;
     }
   }
-}
-
-@include b(cascader-menus) {
-  white-space: nowrap;
-  background: #fff;
-  position: absolute;
-  margin: 5px 0;
-  z-index: #{$--index-normal + 1};
-  border: $--select-dropdown-border;
-  border-radius: $--border-radius-small;
-  box-shadow: $--select-dropdown-shadow;
-}
 
-@include b(cascader-menu) {
-  display: inline-block;
-  vertical-align: top;
-  height: 204px;
-  overflow: auto;
-  border-right: $--select-dropdown-border;
-  background-color: $--select-dropdown-background;
-  box-sizing: border-box;
-  margin: 0;
-  padding: 6px 0;
-  min-width: 160px;
-
-  &:last-child {
-    border-right: 0;
+  @include e(dropdown) {
+    margin: 5px 0;
+    font-size: $--cascader-menu-font-size;
+    background: $--cascader-menu-fill;
+    border: $--cascader-menu-border;
+    border-radius: $--cascader-menu-radius;
+    box-shadow: $--cascader-menu-shadow;
   }
 
-  @include e(item) {
-    font-size: $--select-font-size;
-    padding: 8px 20px;
-    position: relative;
-    white-space: nowrap;
-    overflow: hidden;
-    text-overflow: ellipsis;
-    color: $--select-option-color;
-    height: $--select-option-height;
-    line-height: 1.5;
+  @include e(tags) {
+    position: absolute;
+    left: 0;
+    right: 30px;
+    top: 50%;
+    transform: translateY(-50%);
+    display: flex;
+    flex-wrap: wrap;
+    line-height: normal;
+    text-align: left;
     box-sizing: border-box;
-    cursor: pointer;
-    outline: none;
-    @include m(extensible) {
-      &:after {
-        font-family: 'element-icons';
-        content: "\e604";
-        font-size: 14px;
-        color: rgb(191, 203, 217);
-        position: absolute;
-        right: 15px;
+
+    .el-tag {
+      display: inline-flex;
+      align-items: center;
+      max-width: 100%;
+      margin: 2px 0 2px 6px;
+      text-overflow: ellipsis;
+      background: $--cascader-tag-background;
+
+      &:not(.is-hit) {
+        border-color: transparent;
+      }
+
+      > span {
+        flex: 1;
+        overflow: hidden;
+        text-overflow: ellipsis;
       }
-    }
 
-    @include when(disabled) {
-      color: $--select-option-disabled-color;
-      background-color: $--select-option-disabled-background;
-      cursor: not-allowed;
+      .el-icon-close {
+        flex: none;
+        background-color: $--color-text-placeholder;
+        color: $--color-white;
 
-      &:hover {
-        background-color: $--color-white;
+        &:hover {
+          background-color: $--color-text-secondary;
+        }
       }
     }
+  }
+
+  @include e(suggestion-panel) {
+    border-radius: $--cascader-menu-radius;
+  }
 
-    @include when(active) {
-      color: $--select-option-selected;
+  @include e(suggestion-list) {
+    max-height: 204px;
+    margin: 0;
+    padding: 6px 0;
+    font-size: $--font-size-base;
+    color: $--cascader-menu-font-color;
+    text-align: center;
+  }
+
+  @include e(suggestion-item) {
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    height: 34px;
+    padding: 0 15px;
+    text-align: left;
+    outline: none;
+    cursor: pointer;
+
+    &:hover, &:focus {
+      background: $--cascader-node-background-hover;
     }
 
-    &:hover, &:focus:not(:active) {
-      background-color: $--select-option-hover-background;
+    &.is-checked {
+      color: $--cascader-menu-selected-font-color;
+      font-weight: bold;
     }
 
-    &.selected {
-      color: $--color-white;
-      background-color: $--select-option-selected-hover;
+    > span {
+      margin-right: 10px;
     }
   }
 
-  @include e(item__keyword) {
-    font-weight: bold;
+  @include e(empty-text) {
+    margin: 10px 0;
+    color: $--cascader-color-empty;
   }
 
-  @include m(flexible) {
-    height: auto;
-    max-height: 180px;
-    overflow: auto;
+  @include e(search-input) {
+    flex: 1;
+    height: 24px;
+    min-width: 60px;
+    margin: 2px 0 2px 15px;
+    padding: 0;
+    color: $--cascader-menu-font-color;
+    border: none;
+    outline: none;
+    box-sizing: border-box;
 
-    .el-cascader-menu__item {
-      overflow: visible;
+    &::placeholder {
+      color: $--color-text-placeholder;
     }
   }
 }
diff --git a/packages/theme-chalk/src/checkbox-img-button.scss b/packages/theme-chalk/src/checkbox-img-button.scss
new file mode 100644
index 00000000000..41934104837
--- /dev/null
+++ b/packages/theme-chalk/src/checkbox-img-button.scss
@@ -0,0 +1,463 @@
+@import "common/var";
+@import "mixins/mixins";
+@import "mixins/_button";
+@import "mixins/utils";
+
+@include b(checkbox-img-button) {
+  color: $--checkbox-font-color;
+  font-weight: $--checkbox-font-weight;
+  font-size: $--font-size-base;
+  position: relative;
+  cursor: pointer;
+  display: inline-block;
+  white-space: nowrap;
+  user-select: none;
+  margin-right: 30px;
+
+  @include when(vertical){
+    display: flex;
+    flex-direction: column;
+    justify-content: center;
+    align-items: center;
+    width: 160px;
+    @include when(bordered) {
+      padding: 0;
+    }
+    @include e(label) { 
+      padding-left: 0;
+    }
+    @include when(img) {
+      width: 160px;
+      // border: 1px solid #DCDFE6;
+      border-radius: 4px;
+      @include e(img) {
+        height: 50px;
+        width: 80px;
+      }
+      @include e(label) {
+        font-size: 14px;
+        padding: 19px 0;
+        .el-checkbox-img-button__text{
+          font-size: 14px;
+          padding-left: 40px;
+          padding-right: 40px;
+          color: #606266;
+          overflow: hidden;
+          text-overflow: ellipsis;
+          display: -webkit-box;
+          -webkit-line-clamp:1;
+          -webkit-box-orient: vertical;
+          word-break: break-all;
+          white-space: pre-wrap;
+        }
+      }
+      @include e(input) {
+        padding: 20px 0 17px 0;
+      }
+    }
+  }
+
+  @include when(horizontal){
+    display: flex;
+    flex-direction: row;
+    align-items: center;
+    margin-right: 0px;
+    @include when(bordered) {
+      padding: 0;
+    }
+    @include when(img) {
+      min-width: 350px;
+      @include e(img) {
+        width: 108px;
+        height: 80px;
+        padding: 20px 0;
+      }
+      @include e(input) {
+        padding: 0 20px;
+      }
+      @include e(label) {
+        padding-left: 0;
+        white-space: pre-wrap;
+        word-break: break-all;
+        .el-checkbox-img-button__word{
+          padding-left: 30px;
+          padding-right: 30px;
+          display: flex;
+          flex-direction: column;
+  
+          .el-checkbox-img-button__text{
+            font-size: 16px;
+            line-height: 30px;
+            color: #606266;
+            overflow: hidden;
+            text-overflow: ellipsis;
+            display: -webkit-box;
+            -webkit-line-clamp:1;
+            -webkit-box-orient: vertical;
+          }
+  
+          .el-checkbox-img-button__description{
+            font-size: 14px;
+            line-height: 24px;
+            color: #909399;
+            overflow: hidden;
+            text-overflow: ellipsis;
+            display: -webkit-box;
+            -webkit-line-clamp:2;
+            -webkit-box-orient: vertical;
+          }
+        }
+      }
+    }
+  }
+
+  @include when(bordered) {
+    padding: $--checkbox-bordered-padding;
+    border-radius: $--border-radius-base;
+    border: $--border-base;
+    box-sizing: border-box;
+    line-height: normal;
+
+    &.is-checked {
+      border-color: $--color-primary;
+    }
+
+    &.is-disabled {
+      border-color: $--border-color-lighter;
+      cursor: not-allowed;
+    }
+
+    & + .el-checkbox-img-button.is-bordered {
+      margin-left: 10px;
+    }
+
+    @include when(horizontal){
+      & + .el-checkbox-img-button.is-bordered {
+        margin-left: 0px;
+      }
+    }
+    
+
+    &.el-checkbox-img-button--medium {
+      padding: $--checkbox-bordered-medium-padding;
+      border-radius: $--button-medium-border-radius;
+      height: $--checkbox-bordered-medium-height;
+
+      .el-checkbox-img-button__label {
+        line-height: 17px;
+        font-size: $--button-medium-font-size;
+      }
+
+      .el-checkbox-img-button__inner {
+        height: $--checkbox-bordered-medium-input-height;
+        width: $--checkbox-bordered-medium-input-width;
+      }
+    }
+
+    &.el-checkbox-img-button--small {
+      padding: $--checkbox-bordered-small-padding;
+      border-radius: $--button-small-border-radius;
+      height: $--checkbox-bordered-small-height;
+
+      .el-checkbox-img-button__label {
+        line-height: 15px;
+        font-size: $--button-small-font-size;
+      }
+
+      .el-checkbox-img-button__inner {
+        height: $--checkbox-bordered-small-input-height;
+        width: $--checkbox-bordered-small-input-width;
+
+        &::after {
+          height: 6px;
+          width: 2px;
+        }
+      }
+    }
+
+    &.el-checkbox-img-button--mini {
+      padding: $--checkbox-bordered-mini-padding;
+      border-radius: $--button-mini-border-radius;
+      height: $--checkbox-bordered-mini-height;
+
+      .el-checkbox-img-button__label {
+        line-height: 12px;
+        font-size: $--button-mini-font-size;
+      }
+
+      .el-checkbox-img-button__inner {
+        height: $--checkbox-bordered-mini-input-height;
+        width: $--checkbox-bordered-mini-input-width;
+        &::after {
+          height: 6px;
+          width: 2px;
+        }
+      }
+    }
+  }
+
+  @include e(input) {
+    white-space: nowrap;
+    cursor: pointer;
+    outline: none;
+    display: inline-block;
+    line-height: 1;
+    position: relative;
+    vertical-align: middle;
+
+    @include when(disabled) {
+      .el-checkbox-img-button__inner {
+        background-color: $--checkbox-disabled-input-fill;
+        border-color: $--checkbox-disabled-border-color;
+        cursor: not-allowed;
+
+        &::after {
+          cursor: not-allowed;
+          border-color: $--checkbox-disabled-icon-color;
+        }
+
+        & + .el-checkbox-img-button__label {
+          cursor: not-allowed;
+        }
+      }
+
+      &.is-checked {
+        .el-checkbox-img-button__inner {
+          background-color: $--checkbox-disabled-checked-input-fill;
+          border-color: $--checkbox-disabled-checked-input-border-color;
+
+          &::after {
+            border-color: $--checkbox-disabled-checked-icon-color;
+          }
+        }
+      }
+
+      &.is-indeterminate {
+        .el-checkbox-img-button__inner {
+          background-color: $--checkbox-disabled-checked-input-fill;
+          border-color: $--checkbox-disabled-checked-input-border-color;
+
+          &::before {
+            background-color: $--checkbox-disabled-checked-icon-color;
+            border-color: $--checkbox-disabled-checked-icon-color;
+          }
+        }
+      }
+
+      & + span.el-checkbox-img-button__label {
+        color: $--disabled-color-base;
+        cursor: not-allowed;
+      }
+    }
+
+    @include when(checked) {
+      .el-checkbox-img-button__inner {
+        background-color: $--checkbox-checked-background-color;
+        border-color: $--checkbox-checked-input-border-color;
+
+        &::after {
+          transform: rotate(45deg) scaleY(1);
+        }
+      }
+
+      & + .el-checkbox-img-button__label {
+        color: $--checkbox-checked-font-color;
+      }
+    }
+    @include when(focus) { /*focus时 视觉上区分*/
+      .el-checkbox-img-button__inner {
+        border-color: $--checkbox-input-border-color-hover;
+      }
+    }
+    @include when(indeterminate) {
+      .el-checkbox-img-button__inner {
+        background-color: $--checkbox-checked-background-color;
+        border-color: $--checkbox-checked-input-border-color;
+
+        &::before {
+          content: '';
+          position: absolute;
+          display: block;
+          background-color: $--checkbox-checked-icon-color;
+          height: 2px;
+          transform: scale(0.5);
+          left: 0;
+          right: 0;
+          top: 5px;
+        }
+
+        &::after {
+          display: none;
+        }
+      }
+    }
+  }
+  @include e(inner) {
+    display: inline-block;
+    position: relative;
+    border: $--checkbox-input-border;
+    border-radius: $--checkbox-border-radius;
+    box-sizing: border-box;
+    width: $--checkbox-input-width;
+    height: $--checkbox-input-height;
+    background-color: $--checkbox-background-color;
+    z-index: $--index-normal;
+    transition: border-color .25s cubic-bezier(.71,-.46,.29,1.46),
+    background-color .25s cubic-bezier(.71,-.46,.29,1.46);
+
+    &:hover {
+      border-color: $--checkbox-input-border-color-hover;
+    }
+
+    &::after {
+      box-sizing: content-box;
+      content: "";
+      border: 1px solid $--checkbox-checked-icon-color;
+      border-left: 0;
+      border-top: 0;
+      height: 7px;
+      left: 4px;
+      position: absolute;
+      top: 1px;
+      transform: rotate(45deg) scaleY(0);
+      width: 3px;
+      transition: transform .15s ease-in .05s;
+      transform-origin: center;
+    }
+  }
+
+  @include e(original) {
+    opacity: 0;
+    outline: none;
+    position: absolute;
+    margin: 0;
+    width: 0;
+    height: 0;
+    z-index: -1;
+  }
+
+  @include e(label) {
+    display: inline-block;
+    padding-left: 10px;
+    line-height: 19px;
+    font-size: $--checkbox-font-size;
+  }
+
+  &:last-of-type {
+    margin-right: 0;
+  }
+}
+
+@include b(checkbox-button) {
+  position: relative;
+  display: inline-block;
+
+  @include e(inner) {
+    display: inline-block;
+    line-height: 1;
+    font-weight: $--checkbox-font-weight;
+    white-space: nowrap;
+    vertical-align: middle;
+    cursor: pointer;
+    background: $--button-default-background-color;
+    border: $--border-base;
+    border-left: 0;
+    color: $--button-default-font-color;
+    -webkit-appearance: none;
+    text-align: center;
+    box-sizing: border-box;
+    outline: none;
+    margin: 0;
+    position: relative;
+    transition: $--all-transition;
+    @include utils-user-select(none);
+
+    @include button-size($--button-padding-vertical, $--button-padding-horizontal, $--button-font-size, 0);
+
+    &:hover {
+      color: $--color-primary;
+    }
+
+    & [class*="el-icon-"] {
+      line-height: 0.9;
+
+      & + span {
+        margin-left: 5px;
+      }
+    }
+  }
+
+  @include e(original) {
+    opacity: 0;
+    outline: none;
+    position: absolute;
+    margin: 0;
+    z-index: -1;
+  }
+
+  &.is-checked {
+    & .el-checkbox-img-button-button__inner {
+      color: $--checkbox-button-checked-font-color;
+      background-color: $--checkbox-button-checked-background-color;
+      border-color: $--checkbox-button-checked-border-color;
+      box-shadow: -1px 0 0 0 $--color-primary-light-4;
+    }
+    &:first-child .el-checkbox-img-button-button__inner {
+      border-left-color: $--checkbox-button-checked-border-color;
+    }
+  }
+
+  &.is-disabled {
+    & .el-checkbox-img-button-button__inner {
+      color: $--button-disabled-font-color;
+      cursor: not-allowed;
+      background-image: none;
+      background-color: $--button-disabled-background-color;
+      border-color: $--button-disabled-border-color;
+      box-shadow: none;
+    }
+    &:first-child .el-checkbox-img-button-button__inner {
+      border-left-color: $--button-disabled-border-color;
+    }
+  }
+
+  &:first-child {
+    .el-checkbox-img-button-button__inner {
+      border-left: $--border-base;
+      border-radius: $--border-radius-base 0 0 $--border-radius-base;
+      box-shadow: none !important;
+    }
+  }
+
+  &.is-focus {
+    & .el-checkbox-img-button-button__inner {
+      border-color: $--checkbox-button-checked-border-color;
+    }
+  }
+
+  &:last-child {
+    .el-checkbox-img-button-button__inner {
+      border-radius: 0 $--border-radius-base $--border-radius-base 0;
+    }
+  }
+  @include m(medium) {
+    .el-checkbox-img-button-button__inner {
+      @include button-size($--button-medium-padding-vertical, $--button-medium-padding-horizontal, $--button-medium-font-size, 0);
+    }
+  }
+  @include m(small) {
+    .el-checkbox-img-button-button__inner {
+      @include button-size($--button-small-padding-vertical, $--button-small-padding-horizontal, $--button-small-font-size, 0);
+    }
+  }
+  @include m(mini) {
+    .el-checkbox-img-button-button__inner {
+      @include button-size($--button-mini-padding-vertical, $--button-mini-padding-horizontal, $--button-mini-font-size, 0);
+    }
+  }
+  
+}
+
+@include b(checkbox-group) {
+  font-size: 0;
+}
diff --git a/packages/theme-chalk/src/checkbox.scss b/packages/theme-chalk/src/checkbox.scss
index c8507b47977..7c1b9388aa2 100644
--- a/packages/theme-chalk/src/checkbox.scss
+++ b/packages/theme-chalk/src/checkbox.scss
@@ -4,7 +4,7 @@
 @import "mixins/utils";
 
 @include b(checkbox) {
-  color: $--checkbox-color;
+  color: $--checkbox-font-color;
   font-weight: $--checkbox-font-weight;
   font-size: $--font-size-base;
   position: relative;
@@ -12,6 +12,7 @@
   display: inline-block;
   white-space: nowrap;
   user-select: none;
+  margin-right: 30px;
 
   @include when(bordered) {
     padding: $--checkbox-bordered-padding;
@@ -104,7 +105,7 @@
     @include when(disabled) {
       .el-checkbox__inner {
         background-color: $--checkbox-disabled-input-fill;
-        border-color: $--checkbox-disabled-input-border-color;
+        border-color: $--checkbox-disabled-border-color;
         cursor: not-allowed;
 
         &::after {
@@ -148,7 +149,7 @@
 
     @include when(checked) {
       .el-checkbox__inner {
-        background-color: $--checkbox-checked-input-fill;
+        background-color: $--checkbox-checked-background-color;
         border-color: $--checkbox-checked-input-border-color;
 
         &::after {
@@ -157,7 +158,7 @@
       }
 
       & + .el-checkbox__label {
-        color: $--checkbox-checked-text-color;
+        color: $--checkbox-checked-font-color;
       }
     }
     @include when(focus) { /*focus时 视觉上区分*/
@@ -167,7 +168,7 @@
     }
     @include when(indeterminate) {
       .el-checkbox__inner {
-        background-color: $--checkbox-checked-input-fill;
+        background-color: $--checkbox-checked-background-color;
         border-color: $--checkbox-checked-input-border-color;
 
         &::before {
@@ -192,11 +193,11 @@
     display: inline-block;
     position: relative;
     border: $--checkbox-input-border;
-    border-radius: $--checkbox-input-border-radius;
+    border-radius: $--checkbox-border-radius;
     box-sizing: border-box;
     width: $--checkbox-input-width;
     height: $--checkbox-input-height;
-    background-color: $--checkbox-input-fill;
+    background-color: $--checkbox-background-color;
     z-index: $--index-normal;
     transition: border-color .25s cubic-bezier(.71,-.46,.29,1.46),
     background-color .25s cubic-bezier(.71,-.46,.29,1.46);
@@ -239,8 +240,8 @@
     font-size: $--checkbox-font-size;
   }
 
-  & + .el-checkbox {
-    margin-left: 30px;
+  &:last-of-type {
+    margin-right: 0;
   }
 }
 
@@ -255,10 +256,10 @@
     white-space: nowrap;
     vertical-align: middle;
     cursor: pointer;
-    background: $--button-default-fill;
+    background: $--button-default-background-color;
     border: $--border-base;
     border-left: 0;
-    color: $--button-default-color;
+    color: $--button-default-font-color;
     -webkit-appearance: none;
     text-align: center;
     box-sizing: border-box;
@@ -293,8 +294,8 @@
 
   &.is-checked {
     & .el-checkbox-button__inner {
-      color: $--checkbox-button-checked-color;
-      background-color: $--checkbox-button-checked-fill;
+      color: $--checkbox-button-checked-font-color;
+      background-color: $--checkbox-button-checked-background-color;
       border-color: $--checkbox-button-checked-border-color;
       box-shadow: -1px 0 0 0 $--color-primary-light-4;
     }
@@ -305,15 +306,15 @@
 
   &.is-disabled {
     & .el-checkbox-button__inner {
-      color: $--button-disabled-color;
+      color: $--button-disabled-font-color;
       cursor: not-allowed;
       background-image: none;
-      background-color: $--button-disabled-fill;
-      border-color: $--button-disabled-border;
+      background-color: $--button-disabled-background-color;
+      border-color: $--button-disabled-border-color;
       box-shadow: none;
     }
     &:first-child .el-checkbox-button__inner {
-      border-left-color: $--button-disabled-border;
+      border-left-color: $--button-disabled-border-color;
     }
   }
 
diff --git a/packages/theme-chalk/src/collapse.scss b/packages/theme-chalk/src/collapse.scss
index f86aed3ab90..ffe78f39ce6 100644
--- a/packages/theme-chalk/src/collapse.scss
+++ b/packages/theme-chalk/src/collapse.scss
@@ -7,16 +7,22 @@
   border-bottom: 1px solid $--collapse-border-color;
 }
 @include b(collapse-item) {
+  @include when(disabled) {
+    .el-collapse-item__header {
+      color: $--font-color-disabled-base;
+      cursor: not-allowed;
+    }
+  }
   @include e(header) {
     display: flex;
     align-items: center;
     height: $--collapse-header-height;
     line-height: $--collapse-header-height;
-    background-color: $--collapse-header-fill;
-    color: $--collapse-header-color;
+    background-color: $--collapse-header-background-color;
+    color: $--collapse-header-font-color;
     cursor: pointer;
     border-bottom: 1px solid $--collapse-border-color;
-    font-size: $--collapse-header-size;
+    font-size: $--collapse-header-font-size;
     font-weight: 500;
     transition: border-bottom-color .3s;
     outline: none;
@@ -38,7 +44,7 @@
 
   @include e(wrap) {
     will-change: height;
-    background-color: $--collapse-content-fill;
+    background-color: $--collapse-content-background-color;
     overflow: hidden;
     box-sizing: border-box;
     border-bottom: 1px solid $--collapse-border-color;
@@ -46,8 +52,8 @@
 
   @include e(content) {
     padding-bottom: 25px;
-    font-size: $--collapse-content-size;
-    color: $--collapse-content-color;
+    font-size: $--collapse-content-font-size;
+    color: $--collapse-content-font-color;
     line-height: 1.769230769230769;
   }
 
diff --git a/packages/theme-chalk/src/common/popup.scss b/packages/theme-chalk/src/common/popup.scss
index e1806c9d992..00030ba6cdc 100644
--- a/packages/theme-chalk/src/common/popup.scss
+++ b/packages/theme-chalk/src/common/popup.scss
@@ -1,3 +1,4 @@
+@import "./var.scss";
 @import "../mixins/mixins";
 
 .v-modal-enter {
@@ -30,8 +31,8 @@
   top: 0;
   width: 100%;
   height: 100%;
-  opacity: 0.5;
-  background: #000;
+  opacity: $--popup-modal-opacity;
+  background: $--popup-modal-background-color;
 }
 
 @include b(popup-parent) {
diff --git a/packages/theme-chalk/src/common/var.scss b/packages/theme-chalk/src/common/var.scss
index 020d193473b..aa3c1707385 100644
--- a/packages/theme-chalk/src/common/var.scss
+++ b/packages/theme-chalk/src/common/var.scss
@@ -1,5 +1,9 @@
 /* Element Chalk Variables */
 
+// Special comment for theme configurator
+// type|skipAutoTranslation|Category|Order
+// skipAutoTranslation 1
+
 /* Transition
 -------------------------- */
 $--all-transition: all .3s cubic-bezier(.645,.045,.355,1) !default;
@@ -9,12 +13,14 @@ $--md-fade-transition: transform 300ms cubic-bezier(0.23, 1, 0.32, 1), opacity 3
 $--border-transition-base: border-color .2s cubic-bezier(.645,.045,.355,1) !default;
 $--color-transition-base: color .2s cubic-bezier(.645,.045,.355,1) !default;
 
-/* Colors
+/* Color
 -------------------------- */
-$--color-white: #fff !default;
-$--color-black: #000 !default;
-
-$--color-primary: #409EFF !default;
+/// color|1|Brand Color|0
+$--color-primary: #2460e0 !default; // 409EFF
+/// color|1|Background Color|4
+$--color-white: #FFFFFF !default;
+/// color|1|Background Color|4
+$--color-black: #000000 !default;
 $--color-primary-light-1: mix($--color-white, $--color-primary, 10%) !default; /* 53a8ff */
 $--color-primary-light-2: mix($--color-white, $--color-primary, 20%) !default; /* 66b1ff */
 $--color-primary-light-3: mix($--color-white, $--color-primary, 30%) !default; /* 79bbff */
@@ -25,10 +31,15 @@ $--color-primary-light-7: mix($--color-white, $--color-primary, 70%) !default; /
 $--color-primary-light-8: mix($--color-white, $--color-primary, 80%) !default; /* d9ecff */
 $--color-primary-light-9: mix($--color-white, $--color-primary, 90%) !default; /* ecf5ff */
 
-$--color-success: #67c23a !default;
-$--color-warning: #e6a23c !default;
-$--color-danger: #f56c6c !default;
-$--color-info: #909399 !default;
+// README: success warning danger 用于产品内有提示作用的颜色；不要随意修改
+/// color|1|Functional Color|1
+$--color-success: #2FD163 !default; // 67C23A
+/// color|1|Functional Color|1
+$--color-warning: #F5A623 !default; // E6A23C
+/// color|1|Functional Color|1
+$--color-danger: #FF4D4F !default; // F56C6C
+/// color|1|Functional Color|1
+$--color-info: #A7A8AD !default; // 909399
 
 $--color-success-light: mix($--color-white, $--color-success, 80%) !default;
 $--color-warning-light: mix($--color-white, $--color-warning, 80%) !default;
@@ -39,55 +50,84 @@ $--color-success-lighter: mix($--color-white, $--color-success, 90%) !default;
 $--color-warning-lighter: mix($--color-white, $--color-warning, 90%) !default;
 $--color-danger-lighter: mix($--color-white, $--color-danger, 90%) !default;
 $--color-info-lighter: mix($--color-white, $--color-info, 90%) !default;
-
-$--color-text-primary: #303133 !default;
-$--color-text-regular: #606266 !default;
-$--color-text-secondary: #909399 !default;
-$--color-text-placeholder: #c0c4cc !default;
+/// color|1|Font Color|2
+$--color-text-primary: #2D303B !default; // 303133
+/// color|1|Font Color|2
+$--color-text-regular: #6A6C73 !default; // 606266
+/// color|1|Font Color|2
+$--color-text-secondary: #A7A8AD !default; // 909399
+/// color|1|Font Color|2
+$--color-text-placeholder: #C6C7CA !default; // C0C4CC
+/// color|1|Border Color|3
+$--border-color-base: #DCDEE6 !default; // DCDFE6
+/// color|1|Border Color|3
+$--border-color-light: #E4E8F3 !default; // E4E7ED
+/// color|1|Border Color|3
+$--border-color-lighter: #EBEEF5 !default;
+/// color|1|Border Color|3
+$--border-color-extra-light: #F2F6FC !default;
+
+// Background
+/// color|1|Background Color|4
+$--background-color-base: #F0F2F5 !default; // F5F7FA
 
 /* Link
 -------------------------- */
 $--link-color: $--color-primary-light-2 !default;
 $--link-hover-color: $--color-primary !default;
 
-/* Background
--------------------------- */
-$--background-color-base: #f5f7fa !default;
-
 /* Border
 -------------------------- */
 $--border-width-base: 1px !default;
 $--border-style-base: solid !default;
-$--border-color-base: #dcdfe6 !default;
-$--border-color-light: #e4e7ed !default;
-$--border-color-lighter: #ebeef5 !default;
-$--border-color-extra-light: #f2f6fc !default;
 $--border-color-hover: $--color-text-placeholder !default;
 $--border-base: $--border-width-base $--border-style-base $--border-color-base !default;
+/// borderRadius|1|Radius|0
 $--border-radius-base: 4px !default;
+/// borderRadius|1|Radius|0
 $--border-radius-small: 2px !default;
+/// borderRadius|1|Radius|0
 $--border-radius-circle: 100% !default;
+/// borderRadius|1|Radius|0
+$--border-radius-zero: 0 !default;
 
-/* Box-shadow
--------------------------- */
+// Box-shadow
+/// boxShadow|1|Shadow|1
 $--box-shadow-base: 0 2px 4px rgba(0, 0, 0, .12), 0 0 6px rgba(0, 0, 0, .04) !default;
+// boxShadow|1|Shadow|1
 $--box-shadow-dark: 0 2px 4px rgba(0, 0, 0, .12), 0 0 6px rgba(0, 0, 0, .12) !default;
+/// boxShadow|1|Shadow|1
 $--box-shadow-light: 0 2px 12px 0 rgba(0, 0, 0, 0.1) !default;
 
 /* Fill
 -------------------------- */
 $--fill-base: $--color-white !default;
 
-/* Font
+/* Typography
 -------------------------- */
 $--font-path: 'fonts' !default;
+$--font-display: 'auto' !default;
+/// fontSize|1|Font Size|0
+$--font-size-extra-large: 20px !default;
+/// fontSize|1|Font Size|0
+$--font-size-large: 18px !default;
+/// fontSize|1|Font Size|0
+$--font-size-medium: 16px !default;
+/// fontSize|1|Font Size|0
 $--font-size-base: 14px !default;
+/// fontSize|1|Font Size|0
 $--font-size-small: 13px !default;
-$--font-size-large: 18px !default;
-$--font-color-disabled-base: #bbb !default;
-$--font-weight-primary: 500 !default;
+/// fontSize|1|Font Size|0
+$--font-size-extra-small: 12px !default;
+/// fontWeight|1|Font Weight|1
+$--font-weight-primary: 400 !default; // 500
+/// fontWeight|1|Font Weight|1
+$--font-weight-secondary: 100 !default;
+/// fontLineHeight|1|Line Height|2
 $--font-line-height-primary: 24px !default;
-
+/// fontLineHeight|1|Line Height|2
+$--font-line-height-secondary: 16px !default;
+$--font-color-disabled-base: #bbb !default;
 /* Size
 -------------------------- */
 $--size-base: 14px !default;
@@ -97,6 +137,7 @@ $--size-base: 14px !default;
 $--index-normal: 1 !default;
 $--index-top: 1000 !default;
 $--index-popper: 2000 !default;
+$--index-peak: 9999 !important;
 
 /* Disable base
 -------------------------- */
@@ -111,18 +152,22 @@ $--icon-color-base: $--color-info !default;
 
 /* Checkbox
 -------------------------- */
+/// fontSize||Font|1
 $--checkbox-font-size: 14px !default;
+/// fontWeight||Font|1
 $--checkbox-font-weight: $--font-weight-primary !default;
-$--checkbox-color: $--color-text-regular !default;
+/// color||Color|0
+$--checkbox-font-color: $--color-text-regular !default;
 $--checkbox-input-height: 14px !default;
 $--checkbox-input-width: 14px !default;
-$--checkbox-input-border-radius: $--border-radius-small !default;
-$--checkbox-input-fill: $--color-white !default;
+/// borderRadius||Border|2
+$--checkbox-border-radius: $--border-radius-small !default;
+/// color||Color|0
+$--checkbox-background-color: $--color-white !default;
 $--checkbox-input-border: $--border-base !default;
-$--checkbox-input-border-color: $--border-color-base !default;
-$--checkbox-icon-color: $--color-white !default;
 
-$--checkbox-disabled-input-border-color: $--border-color-base !default;
+/// color||Color|0
+$--checkbox-disabled-border-color: $--border-color-base !default;
 $--checkbox-disabled-input-fill: #edf2fc !default;
 $--checkbox-disabled-icon-color: $--color-text-placeholder !default;
 
@@ -130,46 +175,64 @@ $--checkbox-disabled-checked-input-fill: $--border-color-extra-light !default;
 $--checkbox-disabled-checked-input-border-color: $--border-color-base !default;
 $--checkbox-disabled-checked-icon-color: $--color-text-placeholder !default;
 
-$--checkbox-checked-text-color: $--color-primary !default;
+/// color||Color|0
+$--checkbox-checked-font-color: $--color-primary !default;
 $--checkbox-checked-input-border-color: $--color-primary !default;
-$--checkbox-checked-input-fill: $--color-primary !default;
+/// color||Color|0
+$--checkbox-checked-background-color: $--color-primary !default;
 $--checkbox-checked-icon-color: $--fill-base !default;
 
 $--checkbox-input-border-color-hover: $--color-primary !default;
-
+/// height||Other|4
 $--checkbox-bordered-height: 40px !default;
+/// padding||Spacing|3
 $--checkbox-bordered-padding: 9px 20px 9px 10px !default;
+/// padding||Spacing|3
 $--checkbox-bordered-medium-padding: 7px 20px 7px 10px !default;
+/// padding||Spacing|3
 $--checkbox-bordered-small-padding: 5px 15px 5px 10px !default;
+/// padding||Spacing|3
 $--checkbox-bordered-mini-padding: 3px 15px 3px 10px !default;
 $--checkbox-bordered-medium-input-height: 14px !default;
 $--checkbox-bordered-medium-input-width: 14px !default;
+/// height||Other|4
 $--checkbox-bordered-medium-height: 36px !default;
 $--checkbox-bordered-small-input-height: 12px !default;
 $--checkbox-bordered-small-input-width: 12px !default;
+/// height||Other|4
 $--checkbox-bordered-small-height: 32px !default;
 $--checkbox-bordered-mini-input-height: 12px !default;
 $--checkbox-bordered-mini-input-width: 12px !default;
+/// height||Other|4
 $--checkbox-bordered-mini-height: 28px !default;
 
-$--checkbox-button-font-size: $--font-size-base !default;
-$--checkbox-button-checked-fill: $--color-primary !default;
-$--checkbox-button-checked-color: $--color-white !default;
+/// color||Color|0
+$--checkbox-button-checked-background-color: $--color-primary !default;
+/// color||Color|0
+$--checkbox-button-checked-font-color: $--color-white !default;
+/// color||Color|0
 $--checkbox-button-checked-border-color: $--color-primary !default;
 
 
 
 /* Radio
 -------------------------- */
-$--radio-font-size: 14px !default;
+/// fontSize||Font|1
+$--radio-font-size: $--font-size-base !default;
+/// fontWeight||Font|1
 $--radio-font-weight: $--font-weight-primary !default;
-$--radio-color: $--color-text-regular !default;
+/// color||Color|0
+$--radio-font-color: $--color-text-regular !default;
 $--radio-input-height: 14px !default;
 $--radio-input-width: 14px !default;
+/// borderRadius||Border|2
 $--radio-input-border-radius: $--border-radius-circle !default;
-$--radio-input-fill: $--color-white !default;
+/// color||Color|0
+$--radio-input-background-color: $--color-white !default;
 $--radio-input-border: $--border-base !default;
+/// color||Color|0
 $--radio-input-border-color: $--border-color-base !default;
+/// color||Color|0
 $--radio-icon-color: $--color-white !default;
 
 $--radio-disabled-input-border-color: $--disabled-border-base !default;
@@ -180,9 +243,13 @@ $--radio-disabled-checked-input-border-color: $--disabled-border-base !default;
 $--radio-disabled-checked-input-fill: $--disabled-fill-base !default;
 $--radio-disabled-checked-icon-color: $--color-text-placeholder !default;
 
-$--radio-checked-text-color: $--color-primary !default;
+/// color||Color|0
+$--radio-checked-font-color: $--color-primary !default;
+/// color||Color|0
 $--radio-checked-input-border-color: $--color-primary !default;
-$--radio-checked-input-fill: $--color-white !default;
+/// color||Color|0
+$--radio-checked-input-background-color: $--color-white !default;
+/// color||Color|0
 $--radio-checked-icon-color: $--color-primary !default;
 
 $--radio-input-border-color-hover: $--color-primary !default;
@@ -202,9 +269,13 @@ $--radio-bordered-mini-input-height: 12px !default;
 $--radio-bordered-mini-input-width: 12px !default;
 $--radio-bordered-mini-height: 28px !default;
 
+/// fontSize||Font|1
 $--radio-button-font-size: $--font-size-base !default;
-$--radio-button-checked-fill: $--color-primary !default;
-$--radio-button-checked-color: $--color-white !default;
+/// color||Color|0
+$--radio-button-checked-background-color: $--color-primary !default;
+/// color||Color|0
+$--radio-button-checked-font-color: $--color-white !default;
+/// color||Color|0
 $--radio-button-checked-border-color: $--color-primary !default;
 $--radio-button-disabled-checked-fill: $--border-color-extra-light !default;
 
@@ -212,21 +283,26 @@ $--radio-button-disabled-checked-fill: $--border-color-extra-light !default;
 -------------------------- */
 $--select-border-color-hover: $--border-color-hover !default;
 $--select-disabled-border: $--disabled-border-base !default;
+/// fontSize||Font|1
 $--select-font-size: $--font-size-base !default;
 $--select-close-hover-color: $--color-text-secondary !default;
 
 $--select-input-color: $--color-text-placeholder !default;
 $--select-multiple-input-color: #666 !default;
-$--select-input-focus-background: $--color-primary !default;
+/// color||Color|0
+$--select-input-focus-border-color: $--color-primary !default;
+/// fontSize||Font|1
 $--select-input-font-size: 14px !default;
 
 $--select-option-color: $--color-text-regular !default;
 $--select-option-disabled-color: $--color-text-placeholder !default;
 $--select-option-disabled-background: $--color-white !default;
+/// height||Other|4
 $--select-option-height: 34px !default;
-$--select-option-hover-background: $--background-color-base !default;
-$--select-option-selected: $--color-primary !default;
-$--select-option-selected-hover: $--background-color-base !default;
+$--select-option-hover-background: #F7F8FE !default; // $--background-color-base
+/// color||Color|0
+$--select-option-selected-font-color: $--color-primary !default;
+$--select-option-selected-hover: #F7F8FE !default; // $--background-color-base
 
 $--select-group-color: $--color-info !default;
 $--select-group-height: 30px !default;
@@ -235,6 +311,7 @@ $--select-group-font-size: 12px !default;
 $--select-dropdown-background: $--color-white !default;
 $--select-dropdown-shadow: $--box-shadow-light !default;
 $--select-dropdown-empty-color: #999 !default;
+/// height||Other|4
 $--select-dropdown-max-height: 274px !default;
 $--select-dropdown-padding: 6px 0 !default;
 $--select-dropdown-empty-padding: 10px 0 !default;
@@ -243,10 +320,15 @@ $--select-dropdown-border: solid 1px $--border-color-light !default;
 /* Alert
 -------------------------- */
 $--alert-padding: 8px 16px !default;
+/// borderRadius||Border|2
 $--alert-border-radius: $--border-radius-base !default;
+/// fontSize||Font|1
 $--alert-title-font-size: 13px !default;
+/// fontSize||Font|1
 $--alert-description-font-size: 12px !default;
+/// fontSize||Font|1
 $--alert-close-font-size: 12px !default;
+/// fontSize||Font|1
 $--alert-close-customed-font-size: 13px !default;
 
 $--alert-success-color: $--color-success-lighter !default;
@@ -254,23 +336,34 @@ $--alert-info-color: $--color-info-lighter !default;
 $--alert-warning-color: $--color-warning-lighter !default;
 $--alert-danger-color: $--color-danger-lighter !default;
 
+/// height||Other|4
 $--alert-icon-size: 16px !default;
+/// height||Other|4
 $--alert-icon-large-size: 28px !default;
 
-/* Message Box
+/* MessageBox
 -------------------------- */
+/// color||Color|0
+$--messagebox-title-color: $--color-text-primary !default;
 $--msgbox-width: 420px !default;
 $--msgbox-border-radius: 4px !default;
-$--msgbox-font-size: $--font-size-large !default;
-$--msgbox-content-font-size: $--font-size-base !default;
-$--msgbox-content-color: $--color-text-regular !default;
-$--msgbox-error-font-size: 12px !default;
+/// fontSize||Font|1
+$--messagebox-font-size: $--font-size-large !default;
+/// fontSize||Font|1
+$--messagebox-content-font-size: $--font-size-base !default;
+/// color||Color|0
+$--messagebox-content-color: $--color-text-regular !default;
+/// fontSize||Font|1
+$--messagebox-error-font-size: 12px !default;
 $--msgbox-padding-primary: 15px !default;
-
-$--msgbox-success-color: $--color-success !default;
-$--msgbox-info-color: $--color-info !default;
-$--msgbox-warning-color: $--color-warning !default;
-$--msgbox-danger-color: $--color-danger !default;
+/// color||Color|0
+$--messagebox-success-color: $--color-success !default;
+/// color||Color|0
+$--messagebox-info-color: $--color-info !default;
+/// color||Color|0
+$--messagebox-warning-color: $--color-warning !default;
+/// color||Color|0
+$--messagebox-danger-color: $--color-danger !default;
 
 /* Message
 -------------------------- */
@@ -278,53 +371,79 @@ $--message-shadow: $--box-shadow-base !default;
 $--message-min-width: 380px !default;
 $--message-background-color: #edf2fc !default;
 $--message-padding: 15px 15px 15px 20px !default;
-$--message-content-color: $--color-text-regular !default;
-$--message-close-color: $--color-text-placeholder !default;
+/// color||Color|0
+$--message-close-icon-color: $--color-text-placeholder !default;
+/// height||Other|4
 $--message-close-size: 16px !default;
+/// color||Color|0
 $--message-close-hover-color: $--color-text-secondary !default;
 
-$--message-success-color: $--color-success !default;
-$--message-info-color: $--color-info !default;
-$--message-warning-color: $--color-warning !default;
-$--message-danger-color: $--color-danger !default;
+/// color||Color|0
+$--message-success-font-color: $--color-success !default;
+/// color||Color|0
+$--message-info-font-color: $--color-info !default;
+/// color||Color|0
+$--message-warning-font-color: $--color-warning !default;
+/// color||Color|0
+$--message-danger-font-color: $--color-danger !default;
 
 /* Notification
 -------------------------- */
 $--notification-width: 330px !default;
+/// padding||Spacing|3
 $--notification-padding: 14px 26px 14px 13px !default;
 $--notification-radius: 8px !default;
 $--notification-shadow: $--box-shadow-light !default;
+/// color||Color|0
 $--notification-border-color: $--border-color-lighter !default;
 $--notification-icon-size: 24px !default;
 $--notification-close-font-size: $--message-close-size !default;
-$--notification-group-margin: 13px !default;
-$--notification-font-size: $--font-size-base !default;
-$--notification-color: $--color-text-regular !default;
+$--notification-group-margin-left: 13px !default;
+$--notification-group-margin-right: 8px !default;
+/// fontSize||Font|1
+$--notification-content-font-size: $--font-size-base !default;
+/// color||Color|0
+$--notification-content-color: $--color-text-regular !default;
+/// fontSize||Font|1
 $--notification-title-font-size: 16px !default;
+/// color||Color|0
 $--notification-title-color: $--color-text-primary !default;
 
+/// color||Color|0
 $--notification-close-color: $--color-text-secondary !default;
+/// color||Color|0
 $--notification-close-hover-color: $--color-text-regular !default;
 
-$--notification-success-color: $--color-success !default;
-$--notification-info-color: $--color-info !default;
-$--notification-warning-color: $--color-warning !default;
-$--notification-danger-color: $--color-danger !default;
+/// color||Color|0
+$--notification-success-icon-color: $--color-success !default;
+/// color||Color|0
+$--notification-info-icon-color: $--color-info !default;
+/// color||Color|0
+$--notification-warning-icon-color: $--color-warning !default;
+/// color||Color|0
+$--notification-danger-icon-color: $--color-danger !default;
 
 /* Input
 -------------------------- */
 $--input-font-size: $--font-size-base !default;
-$--input-color: $--color-text-regular !default;
+/// color||Color|0
+$--input-font-color: $--color-text-regular !default;
+/// height||Other|4
 $--input-width: 140px !default;
+/// height||Other|4
 $--input-height: 40px !default;
 $--input-border: $--border-base !default;
 $--input-border-color: $--border-color-base !default;
+/// borderRadius||Border|2
 $--input-border-radius: $--border-radius-base !default;
 $--input-border-color-hover: $--border-color-hover !default;
-$--input-fill: $--color-white !default;
+/// color||Color|0
+$--input-background-color: $--color-white !default;
 $--input-fill-disabled: $--disabled-fill-base !default;
 $--input-color-disabled: $--font-color-disabled-base !default;
+/// color||Color|0
 $--input-icon-color: $--color-text-placeholder !default;
+/// color||Color|0
 $--input-placeholder-color: $--color-text-placeholder !default;
 $--input-max-width: 314px !default;
 
@@ -339,35 +458,34 @@ $--input-disabled-border: $--disabled-border-base !default;
 $--input-disabled-color: $--disabled-color-base !default;
 $--input-disabled-placeholder-color: $--color-text-placeholder !default;
 
+/// fontSize||Font|1
 $--input-medium-font-size: 14px !default;
+/// height||Other|4
 $--input-medium-height: 36px !default;
-
+/// fontSize||Font|1
 $--input-small-font-size: 13px !default;
+/// height||Other|4
 $--input-small-height: 32px !default;
-
+/// fontSize||Font|1
 $--input-mini-font-size: 12px !default;
+/// height||Other|4
 $--input-mini-height: 28px !default;
 
 /* Cascader
 -------------------------- */
+/// color||Color|0
+$--cascader-menu-font-color: $--color-text-regular !default;
+/// color||Color|0
+$--cascader-menu-selected-font-color: $--color-primary !default;
 $--cascader-menu-fill: $--fill-base !default;
 $--cascader-menu-font-size: $--font-size-base !default;
 $--cascader-menu-radius: $--border-radius-base !default;
-$--cascader-menu-border: $--border-base !default;
-$--cascader-menu-border-color: $--border-color-base !default;
-$--cascader-menu-border-width: $--border-width-base !default;
-$--cascader-menu-color: $--color-text-regular !default;
-$--cascader-menu-option-color-active: $--color-text-secondary !default;
-$--cascader-menu-option-fill-active: rgba($--color-text-secondary, 0.12) !default;
-$--cascader-menu-option-color-hover: $--color-text-regular !default;
-$--cascader-menu-option-fill-hover: rgba($--color-text-primary, 0.06) !default;
-$--cascader-menu-option-color-disabled: #999 !default;
-$--cascader-menu-option-fill-disabled: rgba($--color-black, 0.06) !default;
-$--cascader-menu-option-empty-color: #666 !default;
-$--cascader-menu-group-color: #999 !default;
-$--cascader-menu-shadow: 0 1px 2px rgba($--color-black, 0.14), 0 0 3px rgba($--color-black, 0.14) !default;
-$--cascader-menu-option-pinyin-color: #999 !default;
-$--cascader-menu-submenu-shadow: 1px 1px 2px rgba($--color-black, 0.14), 1px 0 2px rgba($--color-black, 0.14) !default;
+$--cascader-menu-border: solid 1px $--border-color-light !default;
+$--cascader-menu-shadow: $--box-shadow-light !default;
+$--cascader-node-background-hover: $--background-color-base !default;
+$--cascader-node-color-disabled:$--color-text-placeholder !default;
+$--cascader-color-empty:$--color-text-placeholder !default;
+$--cascader-tag-background: #f0f2f5;
 
 /* Group
 -------------------------- */
@@ -393,54 +511,85 @@ $--tab-vertical-header-count-fill: $--color-text-secondary !default;
 
 /* Button
 -------------------------- */
-$--button-font-size: 14px !default;
+/// fontSize||Font|1
+$--button-font-size: $--font-size-base !default;
+/// fontWeight||Font|1
 $--button-font-weight: $--font-weight-primary !default;
+/// borderRadius||Border|2
 $--button-border-radius: $--border-radius-base !default;
+/// padding||Spacing|3
 $--button-padding-vertical: 12px !default;
+/// padding||Spacing|3
 $--button-padding-horizontal: 20px !default;
 
-$--button-medium-font-size: 14px !default;
+/// fontSize||Font|1
+$--button-medium-font-size: $--font-size-base !default;
+/// borderRadius||Border|2
 $--button-medium-border-radius: $--border-radius-base !default;
+/// padding||Spacing|3
 $--button-medium-padding-vertical: 10px !default;
+/// padding||Spacing|3
 $--button-medium-padding-horizontal: 20px !default;
 
+/// fontSize||Font|1
 $--button-small-font-size: 12px !default;
 $--button-small-border-radius: #{$--border-radius-base - 1} !default;
+/// padding||Spacing|3
 $--button-small-padding-vertical: 9px !default;
+/// padding||Spacing|3
 $--button-small-padding-horizontal: 15px !default;
-
+/// fontSize||Font|1
 $--button-mini-font-size: 12px !default;
 $--button-mini-border-radius: #{$--border-radius-base - 1} !default;
+/// padding||Spacing|3
 $--button-mini-padding-vertical: 7px !default;
+/// padding||Spacing|3
 $--button-mini-padding-horizontal: 15px !default;
 
-$--button-default-color: $--color-text-regular !default;
-$--button-default-fill: $--color-white !default;
-$--button-default-border: $--border-color-base !default;
-
-$--button-disabled-color: $--color-text-placeholder !default;
-$--button-disabled-fill: $--color-white !default;
-$--button-disabled-border: $--border-color-lighter !default;
-
-$--button-primary-border: $--color-primary !default;
-$--button-primary-color: $--color-white !default;
-$--button-primary-fill: $--color-primary !default;
-
-$--button-success-border: $--color-success !default;
-$--button-success-color: $--color-white !default;
-$--button-success-fill: $--color-success !default;
-
-$--button-warning-border: $--color-warning !default;
-$--button-warning-color: $--color-white !default;
-$--button-warning-fill: $--color-warning !default;
-
-$--button-danger-border: $--color-danger !default;
-$--button-danger-color: $--color-white !default;
-$--button-danger-fill: $--color-danger !default;
-
-$--button-info-border: $--color-info !default;
-$--button-info-color: $--color-white !default;
-$--button-info-fill: $--color-info !default;
+/// color||Color|0
+$--button-default-font-color: $--color-text-regular !default;
+/// color||Color|0
+$--button-default-background-color: $--color-white !default;
+/// color||Color|0
+$--button-default-border-color: $--border-color-base !default;
+
+/// color||Color|0
+$--button-disabled-font-color: $--color-text-placeholder !default;
+/// color||Color|0
+$--button-disabled-background-color: $--color-white !default;
+/// color||Color|0
+$--button-disabled-border-color: $--border-color-lighter !default;
+
+/// color||Color|0
+$--button-primary-border-color: $--color-primary !default;
+/// color||Color|0
+$--button-primary-font-color: $--color-white !default;
+/// color||Color|0
+$--button-primary-background-color: $--color-primary !default;
+/// color||Color|0
+$--button-success-border-color: $--color-success !default;
+/// color||Color|0
+$--button-success-font-color: $--color-white !default;
+/// color||Color|0
+$--button-success-background-color: $--color-success !default;
+/// color||Color|0
+$--button-warning-border-color: $--color-warning !default;
+/// color||Color|0
+$--button-warning-font-color: $--color-white !default;
+/// color||Color|0
+$--button-warning-background-color: $--color-warning !default;
+/// color||Color|0
+$--button-danger-border-color: $--color-danger !default;
+/// color||Color|0
+$--button-danger-font-color: $--color-white !default;
+/// color||Color|0
+$--button-danger-background-color: $--color-danger !default;
+/// color||Color|0
+$--button-info-border-color: $--color-info !default;
+/// color||Color|0
+$--button-info-font-color: $--color-white !default;
+/// color||Color|0
+$--button-info-background-color: $--color-info !default;
 
 $--button-hover-tint-percent: 20% !default;
 $--button-active-shade-percent: 10% !default;
@@ -452,106 +601,133 @@ $--cascader-height: 200px !default;
 
 /* Switch
 -------------------------- */
+/// color||Color|0
 $--switch-on-color: $--color-primary !default;
+/// color||Color|0
 $--switch-off-color: $--border-color-base !default;
-$--switch-disabled-color: $--border-color-lighter !default;
-$--switch-disabled-text-color: $--color-text-placeholder !default;
-
+/// fontSize||Font|1
 $--switch-font-size: $--font-size-base !default;
 $--switch-core-border-radius: 10px !default;
+// height||Other|4 TODO: width 代码写死的40px 所以下面这三个属性都没意义
 $--switch-width: 40px !default;
+// height||Other|4
 $--switch-height: 20px !default;
+// height||Other|4
 $--switch-button-size: 16px !default;
 
 /* Dialog
 -------------------------- */
-$--dialog-background-color: $--color-primary-light-4 !default;
+$--dialog-background-color: $--color-white !default;
 $--dialog-box-shadow: 0 1px 3px rgba(0, 0, 0, 0.3) !default;
-$--dialog-close-hover-color: $--color-primary !default;
+/// fontSize||Font|1
 $--dialog-title-font-size: $--font-size-large !default;
-$--dialog-font-size: 14px !default;
-$--dialog-line-height: $--font-line-height-primary !default;
+/// fontSize||Font|1
+$--dialog-content-font-size: 14px !default;
+/// fontLineHeight||LineHeight|2
+$--dialog-font-line-height: $--font-line-height-primary !default;
+/// padding||Spacing|3
 $--dialog-padding-primary: 20px !default;
 
 /* Table
 -------------------------- */
+/// color||Color|0
 $--table-border-color: $--border-color-lighter !default;
 $--table-border: 1px solid $--table-border-color !default;
-$--table-text-color: $--color-text-regular !default;
-$--table-header-color: $--color-text-secondary !default;
-$--table-row-hover-background: $--background-color-base !default;
-$--table-current-row-background: $--color-primary-light-9 !default;
-$--table-header-background: $--color-white !default;
-$--table-footer-background: $--color-text-placeholder !default;
+/// color||Color|0
+$--table-font-color: $--color-text-regular !default;
+/// color||Color|0
+$--table-header-font-color: $--color-text-secondary !default;
+/// color||Color|0
+$--table-row-hover-background-color: $--background-color-base !default;
+$--table-current-row-background-color: $--color-primary-light-9 !default;
+/// color||Color|0
+$--table-header-background-color: $--color-white !default;
 $--table-fixed-box-shadow: 0 0 10px rgba(0, 0, 0, .12) !default;
 
 /* Pagination
 -------------------------- */
+/// fontSize||Font|1
 $--pagination-font-size: 13px !default;
-$--pagination-fill: $--color-white !default;
-$--pagination-color: $--color-text-primary !default;
+/// color||Color|0
+$--pagination-background-color: $--color-white !default;
+/// color||Color|0
+$--pagination-font-color: $--color-text-primary !default;
 $--pagination-border-radius: 3px !default;
+/// color||Color|0
 $--pagination-button-color: $--color-text-primary !default;
+/// height||Other|4
 $--pagination-button-width: 35.5px !default;
+/// height||Other|4
 $--pagination-button-height: 28px !default;
+/// color||Color|0
 $--pagination-button-disabled-color: $--color-text-placeholder !default;
-$--pagination-button-disabled-fill: $--color-white !default;
-$--pagination-hover-fill: $--color-primary !default;
-$--pagination-hover-color: $--color-white !default;
+/// color||Color|0
+$--pagination-button-disabled-background-color: $--color-white !default;
+/// color||Color|0
+$--pagination-hover-color: $--color-primary !default;
+
+/* Popup
+-------------------------- */
+/// color||Color|0
+$--popup-modal-background-color: $--color-black !default;
+/// opacity||Other|1
+$--popup-modal-opacity: 0.5 !default;
 
 /* Popover
 -------------------------- */
-$--popover-fill: $--color-white !default;
+/// color||Color|0
+$--popover-background-color: $--color-white !default;
+/// fontSize||Font|1
 $--popover-font-size: $--font-size-base !default;
+/// color||Color|0
 $--popover-border-color: $--border-color-lighter !default;
 $--popover-arrow-size: 6px !default;
+/// padding||Spacing|3
 $--popover-padding: 12px !default;
 $--popover-padding-large: 18px 20px !default;
+/// fontSize||Font|1
 $--popover-title-font-size: 16px !default;
-$--popover-title-color: $--color-text-primary !default;
+/// color||Color|0
+$--popover-title-font-color: $--color-text-primary !default;
 
 /* Tooltip
 -------------------------- */
+/// color|1|Color|0
 $--tooltip-fill: $--color-text-primary !default;
+/// color|1|Color|0
 $--tooltip-color: $--color-white !default;
+/// fontSize||Font|1
 $--tooltip-font-size: 12px !default;
+/// color||Color|0
 $--tooltip-border-color: $--color-text-primary !default;
 $--tooltip-arrow-size: 6px !default;
+/// padding||Spacing|3
 $--tooltip-padding: 10px !default;
 
 /* Tag
 -------------------------- */
-$--tag-padding: 0 10px !default;
-$--tag-fill: rgba($--color-primary, 0.10) !default;
-$--tag-color: $--color-primary !default;
-$--tag-border: rgba($--color-primary, 0.20) !default;
-$--tag-font-size: 12px !default;
-$--tag-border-radius: 4px !default;
-
-$--tag-info-fill: rgba($--color-info, 0.10) !default;
-$--tag-info-border: rgba($--color-info, 0.20) !default;
+/// color||Color|0
 $--tag-info-color: $--color-info !default;
-
-$--tag-primary-fill: rgba($--color-primary, 0.10) !default;
-$--tag-primary-border: rgba($--color-primary, 0.20) !default;
+/// color||Color|0
 $--tag-primary-color: $--color-primary !default;
-
-$--tag-success-fill: rgba($--color-success, 0.10) !default;
-$--tag-success-border: rgba($--color-success, 0.20) !default;
+/// color||Color|0
 $--tag-success-color: $--color-success !default;
-
-$--tag-warning-fill: rgba($--color-warning, 0.10) !default;
-$--tag-warning-border: rgba($--color-warning, 0.20) !default;
+/// color||Color|0
 $--tag-warning-color: $--color-warning !default;
-
-$--tag-danger-fill: rgba($--color-danger, 0.10) !default;
-$--tag-danger-border: rgba($--color-danger, 0.20) !default;
+/// color||Color|0
 $--tag-danger-color: $--color-danger !default;
+/// fontSize||Font|1
+$--tag-font-size: 12px !default;
+$--tag-border-radius: 4px !default;
+$--tag-padding: 0 10px !default;
 
 /* Tree
 -------------------------- */
-$--tree-node-hover-color: $--background-color-base !default;
-$--tree-text-color: $--color-text-regular !default;
+/// color||Color|0
+$--tree-node-hover-background-color: $--background-color-base !default;
+/// color||Color|0
+$--tree-font-color: $--color-text-regular !default;
+/// color||Color|0
 $--tree-expand-icon-color: $--color-text-placeholder !default;
 
 /* Dropdown
@@ -562,29 +738,38 @@ $--dropdown-menuItem-hover-color: $--link-color !default;
 
 /* Badge
 -------------------------- */
-$--badge-fill: $--color-danger !default;
+/// color||Color|0
+$--badge-background-color: $--color-danger !default;
 $--badge-radius: 10px !default;
+/// fontSize||Font|1
 $--badge-font-size: 12px !default;
+/// padding||Spacing|3
 $--badge-padding: 6px !default;
+/// height||Other|4
 $--badge-size: 18px !default;
 
 /* Card
 --------------------------*/
+/// color||Color|0
 $--card-border-color: $--border-color-lighter !default;
 $--card-border-radius: 4px !default;
+/// padding||Spacing|3
 $--card-padding: 20px !default;
 
 /* Slider
 --------------------------*/
+/// color||Color|0
 $--slider-main-background-color: $--color-primary !default;
+/// color||Color|0
 $--slider-runway-background-color: $--border-color-light !default;
 $--slider-button-hover-color: mix($--color-primary, black, 97%) !default;
 $--slider-stop-background-color: $--color-white !default;
 $--slider-disable-color: $--color-text-placeholder !default;
-
 $--slider-margin: 16px 0 !default;
 $--slider-border-radius: 3px !default;
+/// height|1|Other|4
 $--slider-height: 6px !default;
+/// height||Other|4
 $--slider-button-size: 16px !default;
 $--slider-button-wrapper-size: 36px !default;
 $--slider-button-wrapper-offset: -15px !default;
@@ -597,36 +782,50 @@ $--steps-padding: 20px !default;
 
 /* Menu
 --------------------------*/
+/// fontSize||Font|1
 $--menu-item-font-size: $--font-size-base !default;
-$--menu-item-color: $--color-text-primary !default;
-$--menu-item-fill: $--color-white !default;
+/// color||Color|0
+$--menu-item-font-color: $--color-text-primary !default;
+/// color||Color|0
+$--menu-background-color: $--color-white !default;
 $--menu-item-hover-fill: $--color-primary-light-9 !default;
 
 /* Rate
 --------------------------*/
 $--rate-height: 20px !default;
+/// fontSize||Font|1
 $--rate-font-size: $--font-size-base !default;
+/// height||Other|3
 $--rate-icon-size: 18px !default;
+/// margin||Spacing|2
 $--rate-icon-margin: 6px !default;
 $--rate-icon-color: $--color-text-placeholder !default;
 
 /* DatePicker
 --------------------------*/
-$--datepicker-color: $--color-text-regular !default;
-$--datepicker-off-color: $--color-text-placeholder !default;
-$--datepicker-header-color: $--color-text-regular !default;
+$--datepicker-font-color: $--color-text-regular !default;
+/// color|1|Color|0
+$--datepicker-off-font-color: $--color-text-placeholder !default;
+/// color||Color|0
+$--datepicker-header-font-color: $--color-text-regular !default;
 $--datepicker-icon-color: $--color-text-primary !default;
 $--datepicker-border-color: $--disabled-border-base !default;
 $--datepicker-inner-border-color: #e4e4e4 !default;
-$--datepicker-inrange-color: $--border-color-extra-light !default;
-$--datepicker-inrange-hover-color: $--border-color-extra-light !default;
+/// color||Color|0
+$--datepicker-inrange-background-color: $--border-color-extra-light !default;
+/// color||Color|0
+$--datepicker-inrange-hover-background-color: $--border-color-extra-light !default;
+/// color||Color|0
 $--datepicker-active-color: $--color-primary !default;
-$--datepicker-text-hover-color: $--color-primary !default;
+/// color||Color|0
+$--datepicker-hover-font-color: $--color-primary !default;
 $--datepicker-cell-hover-color: #fff !default;
 
 /* Loading
 --------------------------*/
+/// height||Other|4
 $--loading-spinner-size: 42px !default;
+/// height||Other|4
 $--loading-fullscreen-spinner-size: 50px !default;
 
 /* Scrollbar
@@ -636,11 +835,14 @@ $--scrollbar-hover-background-color: rgba($--color-text-secondary, .5) !default;
 
 /* Carousel
 --------------------------*/
+/// fontSize||Font|1
 $--carousel-arrow-font-size: 12px !default;
 $--carousel-arrow-size: 36px !default;
 $--carousel-arrow-background: rgba(31, 45, 61, 0.11) !default;
 $--carousel-arrow-hover-background: rgba(31, 45, 61, 0.23) !default;
+/// width||Other|4
 $--carousel-indicator-width: 30px !default;
+/// height||Other|4
 $--carousel-indicator-height: 2px !default;
 $--carousel-indicator-padding-horizontal: 4px !default;
 $--carousel-indicator-padding-vertical: 12px !default;
@@ -648,27 +850,40 @@ $--carousel-indicator-out-color: $--border-color-hover !default;
 
 /* Collapse
 --------------------------*/
+/// color||Color|0
 $--collapse-border-color: $--border-color-lighter !default;
+/// height||Other|4
 $--collapse-header-height: 48px !default;
-$--collapse-header-padding: 20px !default;
-$--collapse-header-fill: $--color-white !default;
-$--collapse-header-color: $--color-text-primary !default;
-$--collapse-header-size: 13px !default;
-$--collapse-content-fill: $--color-white !default;
-$--collapse-content-size: 13px !default;
-$--collapse-content-color: $--color-text-primary !default;
+/// color||Color|0
+$--collapse-header-background-color: $--color-white !default;
+/// color||Color|0
+$--collapse-header-font-color: $--color-text-primary !default;
+/// fontSize||Font|1
+$--collapse-header-font-size: 13px !default;
+/// color||Color|0
+$--collapse-content-background-color: $--color-white !default;
+/// fontSize||Font|1
+$--collapse-content-font-size: 13px !default;
+/// color||Color|0
+$--collapse-content-font-color: $--color-text-primary !default;
 
 /* Transfer
 --------------------------*/
 $--transfer-border-color: $--border-color-lighter !default;
 $--transfer-border-radius: $--border-radius-base !default;
+/// height||Other|4
 $--transfer-panel-width: 200px !default;
+/// height||Other|4
 $--transfer-panel-header-height: 40px !default;
-$--transfer-panel-header-background: $--background-color-base !default;
+/// color||Color|0
+$--transfer-panel-header-background-color: $--background-color-base !default;
+/// height||Other|4
 $--transfer-panel-footer-height: 40px !default;
+/// height||Other|4
 $--transfer-panel-body-height: 246px !default;
+/// height||Other|4
 $--transfer-item-height: 30px !default;
-$--transfer-item-hover-background: $--color-text-secondary !default;
+/// height||Other|4
 $--transfer-filter-height: 32px !default;
 
 /* Header
@@ -683,6 +898,75 @@ $--footer-padding: 0 20px !default;
 --------------------------*/
 $--main-padding: 20px !default;
 
+/* Timeline
+--------------------------*/
+$--timeline-node-size-normal: 12px !default;
+$--timeline-node-size-large: 14px !default;
+$--timeline-node-color: $--border-color-light !default;
+
+/* Backtop
+--------------------------*/
+/// color||Color|0
+$--backtop-background-color: $--color-white !default;
+/// color||Color|0
+$--backtop-font-color: $--color-primary !default;
+/// color||Color|0
+$--backtop-hover-background-color: $--border-color-extra-light !default;
+
+/* Link
+--------------------------*/
+/// fontSize||Font|1
+$--link-font-size: $--font-size-base !default;
+/// fontWeight||Font|1
+$--link-font-weight: $--font-weight-primary !default;
+/// color||Color|0
+$--link-default-font-color: $--color-text-regular !default;
+/// color||Color|0
+$--link-default-active-color: $--color-primary !default;
+/// color||Color|0
+$--link-disabled-font-color: $--color-text-placeholder !default;
+/// color||Color|0
+$--link-primary-font-color: $--color-primary !default;
+/// color||Color|0
+$--link-success-font-color: $--color-success !default;
+/// color||Color|0
+$--link-warning-font-color: $--color-warning !default;
+/// color||Color|0
+$--link-danger-font-color: $--color-danger !default;
+/// color||Color|0
+$--link-info-font-color: $--color-info !default;
+/* Calendar
+--------------------------*/
+/// border||Other|4
+$--calendar-border: $--table-border !default;
+/// color||Other|4
+$--calendar-selected-background-color: #F2F8FE !default;
+$--calendar-cell-width: 85px !default;
+
+/* Form
+-------------------------- */
+/// fontSize||Font|1
+$--form-label-font-size: $--font-size-base !default;
+
+/* Avatar
+--------------------------*/
+/// color||Color|0
+$--avatar-font-color: #fff !default;
+/// color||Color|0
+$--avatar-background-color: #C0C4CC !default;
+/// fontSize||Font Size|1
+$--avatar-text-font-size: 14px !default;
+/// fontSize||Font Size|1
+$--avatar-icon-font-size: 18px !default;
+/// borderRadius||Border|2
+$--avatar-border-radius: $--border-radius-base !default;
+/// size|1|Avatar Size|3
+$--avatar-large-size: 40px !default;
+/// size|1|Avatar Size|3
+$--avatar-medium-size: 36px !default;
+/// size|1|Avatar Size|3
+$--avatar-small-size: 28px !default;
+
 /* Break-point
 --------------------------*/
 $--sm: 768px !default;
@@ -690,6 +974,23 @@ $--md: 992px !default;
 $--lg: 1200px !default;
 $--xl: 1920px !default;
 
+/* LrContainer
+--------------------------*/
+$--aside-border-color: $--border-color-base;
+
+/* Skeleton
+--------------------------*/
+$--skeleton-color: #f2f2f2;
+$--skeleton-to-color: #e6e6e6;
+
+/* Empty
+--------------------------*/
+$--empty-font-size: $--font-size-base;
+
+/* Affix
+--------------------------*/
+$--zindex-affix: 10;
+
 $--breakpoints: (
   'xs' : (max-width: $--sm - 1),
   'sm' : (min-width: $--sm),
@@ -701,13 +1002,13 @@ $--breakpoints: (
 $--breakpoints-spec: (
   'xs-only' : (max-width: $--sm - 1),
   'sm-and-up' : (min-width: $--sm),
-  'sm-only': "(min-width: #{$--sm}) and (max-width: #{$--md} - 1)",
+  'sm-only': "(min-width: #{$--sm}) and (max-width: #{$--md - 1})",
   'sm-and-down': (max-width: $--md - 1),
   'md-and-up' : (min-width: $--md),
-  'md-only': "(min-width: #{$--md}) and (max-width: #{$--lg } - 1)",
+  'md-only': "(min-width: #{$--md}) and (max-width: #{$--lg - 1})",
   'md-and-down': (max-width: $--lg - 1),
   'lg-and-up' : (min-width: $--lg),
-  'lg-only': "(min-width: #{$--lg}) and (max-width: #{$--xl } - 1)",
+  'lg-only': "(min-width: #{$--lg}) and (max-width: #{$--xl - 1})",
   'lg-and-down': (max-width: $--xl - 1),
   'xl-only' : (min-width: $--xl),
 );
diff --git a/packages/theme-chalk/src/data-mapper.scss b/packages/theme-chalk/src/data-mapper.scss
new file mode 100644
index 00000000000..47eb39e3b7d
--- /dev/null
+++ b/packages/theme-chalk/src/data-mapper.scss
@@ -0,0 +1,62 @@
+@import "mixins/mixins";
+@import "common/var";
+
+@include b(data-mapper) {
+    margin-bottom: -14px;
+    line-height: 21px;
+    &-col {
+        margin-bottom: 14px;
+        &-title {
+            color: #2d303b;
+        }
+        &-content {
+            flex: 1;
+            padding-right: 5px;
+            color: #818389;
+        }
+    }
+    &-col-vertical {
+        margin-bottom: 14px;
+        &-title {
+            margin-right: 5px;
+            color: #2d303b;
+        }
+        &-content {
+            flex: 1;
+            padding-right: 5px;
+            color: #818389;
+        }
+    }
+    &-col-top {
+        flex-direction: column;
+    }
+    &-col-title- {
+        &left {
+            text-align: left;
+        }
+        &right {
+            text-align: right;
+        }
+        &top {
+            margin-bottom: 10px;
+        }
+    }
+    [class*='el-col-'] {
+        float: none;
+        display: inline-flex;
+    }
+    .el-data-mapper-col-vertical {
+        display: flex;
+        width: 100%;
+    }
+    .text-ellipsis-container {
+        overflow: hidden;
+        text-overflow: ellipsis;
+        display: -webkit-box;
+        -webkit-box-orient: vertical;
+        > .el-tooltip {
+            word-break: break-all;
+            outline: none;
+        }
+    }
+}
diff --git a/packages/theme-chalk/src/date-picker/date-picker.scss b/packages/theme-chalk/src/date-picker/date-picker.scss
index 74a1750fb99..7ac85ab1c07 100644
--- a/packages/theme-chalk/src/date-picker/date-picker.scss
+++ b/packages/theme-chalk/src/date-picker/date-picker.scss
@@ -67,7 +67,7 @@
     color: $--color-text-regular;
 
     &:hover {
-      color: $--datepicker-text-hover-color;
+      color: $--datepicker-hover-font-color;
     }
 
     &.active {
diff --git a/packages/theme-chalk/src/date-picker/date-range-picker.scss b/packages/theme-chalk/src/date-picker/date-range-picker.scss
index 374acdea164..cff12a1243d 100644
--- a/packages/theme-chalk/src/date-picker/date-range-picker.scss
+++ b/packages/theme-chalk/src/date-picker/date-range-picker.scss
@@ -50,14 +50,11 @@
     @include when(left) {
       border-right: 1px solid $--datepicker-inner-border-color;
     }
+    .el-date-range-picker__header {
 
-    @include when(right) {
-      .el-date-range-picker__header {
-
-        div {
-          margin-left: 50px;
-          margin-right: 50px;
-        }
+      div {
+        margin-left: 50px;
+        margin-right: 50px;
       }
     }
   }
diff --git a/packages/theme-chalk/src/date-picker/date-table.scss b/packages/theme-chalk/src/date-picker/date-table.scss
index 94bb24a0d85..5fed1bbd30c 100644
--- a/packages/theme-chalk/src/date-picker/date-table.scss
+++ b/packages/theme-chalk/src/date-picker/date-table.scss
@@ -9,10 +9,10 @@
     .el-date-table__row {
       &:hover {
         div {
-          background-color: $--datepicker-inrange-color;
+          background-color: $--datepicker-inrange-background-color;
         }
         td.available:hover {
-          color: $--datepicker-color;
+          color: $--datepicker-font-color;
         }
         td:first-child div {
           margin-left: 5px;
@@ -27,7 +27,7 @@
       }
 
       &.current div {
-        background-color: $--datepicker-inrange-color;
+        background-color: $--datepicker-inrange-background-color;
       }
     }
   }
@@ -61,7 +61,7 @@
 
     &.next-month,
     &.prev-month {
-      color: $--datepicker-off-color;
+      color: $--datepicker-off-font-color;
     }
 
     &.today {
@@ -77,13 +77,13 @@
     }
 
     &.available:hover {
-      color: $--datepicker-text-hover-color;
+      color: $--datepicker-hover-font-color;
     }
 
     &.in-range div {
-      background-color: $--datepicker-inrange-color;
+      background-color: $--datepicker-inrange-background-color;
       &:hover {
-        background-color: $--datepicker-inrange-hover-color;
+        background-color: $--datepicker-inrange-hover-background-color;
       }
     }
 
@@ -123,10 +123,10 @@
     &.selected div {
       margin-left: 5px;
       margin-right: 5px;
-      background-color: $--datepicker-inrange-color;
+      background-color: $--datepicker-inrange-background-color;
       border-radius: 15px;
       &:hover {
-        background-color: $--datepicker-inrange-hover-color;
+        background-color: $--datepicker-inrange-hover-background-color;
       }
     }
 
@@ -138,13 +138,13 @@
 
     &.week {
       font-size: 80%;
-      color: $--datepicker-header-color;
+      color: $--datepicker-header-font-color;
     }
   }
 
   th {
     padding: 5px;
-    color: $--datepicker-header-color;
+    color: $--datepicker-header-font-color;
     font-weight: 400;
     border-bottom: solid 1px $--border-color-lighter;
   }
diff --git a/packages/theme-chalk/src/date-picker/month-table.scss b/packages/theme-chalk/src/date-picker/month-table.scss
index 37b7c1ecb8e..1164f70b5bc 100644
--- a/packages/theme-chalk/src/date-picker/month-table.scss
+++ b/packages/theme-chalk/src/date-picker/month-table.scss
@@ -7,8 +7,23 @@
 
   td {
     text-align: center;
-    padding: 20px 3px;
+    padding: 8px 0px;
     cursor: pointer;
+    & div {
+      height: 48px;
+      padding: 6px 0;
+      box-sizing: border-box;
+    }
+    &.today {
+      .cell {
+        color: $--color-primary;
+        font-weight: bold;
+      }
+      &.start-date .cell,
+      &.end-date .cell {
+        color: $--color-white;
+      }
+    }
 
     &.disabled .cell {
       background-color: $--background-color-base;
@@ -21,17 +36,44 @@
     }
 
     .cell {
-      width: 48px;
-      height: 32px;
+      width: 60px;
+      height: 36px;
       display: block;
-      line-height: 32px;
-      color: $--datepicker-color;
+      line-height: 36px;
+      color: $--datepicker-font-color;
       margin: 0 auto;
+      border-radius: 18px;
+      &:hover {
+        color: $--datepicker-hover-font-color;
+      }
+    }
 
+    &.in-range div {
+      background-color: $--datepicker-inrange-background-color;
       &:hover {
-        color: $--datepicker-text-hover-color;
+        background-color: $--datepicker-inrange-hover-background-color;
       }
     }
+    &.start-date div,
+    &.end-date div {
+      color: $--color-white;
+    }
+
+    &.start-date .cell,
+    &.end-date .cell {
+      color: $--color-white;
+      background-color: $--datepicker-active-color;
+    }
+
+    &.start-date div {
+      border-top-left-radius: 24px;
+      border-bottom-left-radius: 24px;
+    }
+
+    &.end-date div {
+      border-top-right-radius: 24px;
+      border-bottom-right-radius: 24px;
+    }
 
     &.current:not(.disabled) .cell {
       color: $--datepicker-active-color;
diff --git a/packages/theme-chalk/src/date-picker/picker-panel.scss b/packages/theme-chalk/src/date-picker/picker-panel.scss
index 3a8e386a6a0..70fed3b0d56 100644
--- a/packages/theme-chalk/src/date-picker/picker-panel.scss
+++ b/packages/theme-chalk/src/date-picker/picker-panel.scss
@@ -38,14 +38,14 @@
     background-color: transparent;
     line-height: 28px;
     font-size: 14px;
-    color: $--datepicker-color;
+    color: $--datepicker-font-color;
     padding-left: 12px;
     text-align: left;
     outline: none;
     cursor: pointer;
 
     &:hover {
-      color: $--datepicker-text-hover-color;
+      color: $--datepicker-hover-font-color;
     }
 
     &.active {
@@ -81,7 +81,7 @@
     margin-top: 8px;
 
     &:hover {
-      color: $--datepicker-text-hover-color;
+      color: $--datepicker-hover-font-color;
     }
 
     @include when(disabled) {
diff --git a/packages/theme-chalk/src/date-picker/picker.scss b/packages/theme-chalk/src/date-picker/picker.scss
index afb48604532..8110c2af0c7 100644
--- a/packages/theme-chalk/src/date-picker/picker.scss
+++ b/packages/theme-chalk/src/date-picker/picker.scss
@@ -12,6 +12,13 @@
     width: 220px;
   }
 
+  @include m((monthrange)) {
+    &.el-input,
+    &.el-input__inner {
+      width: 300px;
+    }
+  }
+
   @include m((daterange, timerange)) {
     &.el-input,
     &.el-input__inner {
diff --git a/packages/theme-chalk/src/date-picker/year-table.scss b/packages/theme-chalk/src/date-picker/year-table.scss
index 9e2d60c95e2..18fbed921f5 100644
--- a/packages/theme-chalk/src/date-picker/year-table.scss
+++ b/packages/theme-chalk/src/date-picker/year-table.scss
@@ -14,6 +14,13 @@
     padding: 20px 3px;
     cursor: pointer;
 
+    &.today {
+      .cell {
+        color: $--color-primary;
+        font-weight: bold;
+      }
+    }
+
     &.disabled .cell {
       background-color: $--background-color-base;
       cursor: not-allowed;
@@ -29,11 +36,11 @@
       height: 32px;
       display: block;
       line-height: 32px;
-      color: $--datepicker-color;
+      color: $--datepicker-font-color;
       margin: 0 auto;
 
       &:hover {
-        color: $--datepicker-text-hover-color;
+        color: $--datepicker-hover-font-color;
       }
     }
 
diff --git a/packages/theme-chalk/src/dialog.scss b/packages/theme-chalk/src/dialog.scss
index 797e232f57c..fa8a3a8ce40 100644
--- a/packages/theme-chalk/src/dialog.scss
+++ b/packages/theme-chalk/src/dialog.scss
@@ -6,7 +6,7 @@
 @include b(dialog) {
   position: relative;
   margin: 0 auto 50px;
-  background: $--color-white;
+  background: $--dialog-background-color;
   border-radius: $--border-radius-small;
   box-shadow: $--dialog-box-shadow;
   box-sizing: border-box;
@@ -58,15 +58,16 @@
   }
 
   @include e(title) {
-    line-height: $--dialog-line-height;
+    line-height: $--dialog-font-line-height;
     font-size: $--dialog-title-font-size;
     color: $--color-text-primary;
   }
 
   @include e(body) {
-    padding: 30px 20px;
+    padding: ($--dialog-padding-primary + 10px) $--dialog-padding-primary;
     color: $--color-text-regular;
-    font-size: $--dialog-font-size;
+    font-size: $--dialog-content-font-size;
+    word-break: break-all;
   }
 
   @include e(footer) {
diff --git a/packages/theme-chalk/src/divider.scss b/packages/theme-chalk/src/divider.scss
new file mode 100644
index 00000000000..4ed94ee5983
--- /dev/null
+++ b/packages/theme-chalk/src/divider.scss
@@ -0,0 +1,47 @@
+@import "common/var";
+@import "mixins/mixins";
+
+@include b(divider) {
+  background-color: $--border-color-base;
+  position: relative;
+
+  @include m(horizontal) {
+    display: block;
+    height: 1px;
+    width: 100%;
+    margin: 24px 0;
+  }
+
+  @include m(vertical) {
+    display: inline-block;
+    width: 1px;
+    height: 1em;
+    margin: 0 8px;
+    vertical-align: middle;
+    position: relative;
+  }
+
+  @include e(text) {
+    position: absolute;
+    background-color: $--color-white;
+    padding: 0 20px;
+    font-weight: 500;
+    color: $--color-text-primary;
+    font-size: 14px;
+
+    @include when(left) {
+      left: 20px;
+      transform: translateY(-50%);
+    }
+
+    @include when(center)  {
+      left: 50%;
+      transform: translateX(-50%) translateY(-50%);
+    }
+
+    @include when(right)  {
+      right: 20px;
+      transform: translateY(-50%);
+    }
+  }
+}
\ No newline at end of file
diff --git a/packages/theme-chalk/src/drawer.scss b/packages/theme-chalk/src/drawer.scss
new file mode 100644
index 00000000000..9e03a1d662a
--- /dev/null
+++ b/packages/theme-chalk/src/drawer.scss
@@ -0,0 +1,217 @@
+@import "mixins/mixins";
+@import "common/var";
+
+@keyframes el-drawer-fade-in {
+  0% {
+    opacity: 0;
+  }
+  100% {
+    opacity: 1;
+  }
+}
+
+@mixin drawer-animation($direction) {
+
+  @keyframes #{$direction}-drawer-in {
+    0% {
+
+      @if $direction == ltr {
+        transform: translate(-100%, 0px);
+      }
+
+      @if $direction == rtl {
+        transform: translate(100%, 0px);
+      }
+
+      @if $direction == ttb {
+        transform: translate(0px, -100%);
+      }
+
+      @if $direction == btt {
+        transform: translate(0px, 100%);
+      }
+    }
+
+    100% {
+      @if $direction == ltr {
+        transform: translate(0px, 0px);
+      }
+
+      @if $direction == rtl {
+        transform: translate(0px, 0px);
+      }
+
+      @if $direction == ttb {
+        transform: translate(0px, 0px);
+      }
+
+      @if $direction == btt {
+        transform: translate(0px, 0px);
+      }
+    }
+  }
+
+  @keyframes #{$direction}-drawer-out {
+    0% {
+      @if $direction == ltr {
+        transform: translate(0px, 0px);
+      }
+
+      @if $direction == rtl {
+        transform: translate(0px, 0px);;
+      }
+
+      @if $direction == ttb {
+        transform: translate(0px, 0px);
+      }
+
+      @if $direction == btt {
+        transform: translate(0px, 0);
+      }
+    }
+
+    100% {
+      @if $direction == ltr {
+        transform: translate(-100%, 0px);
+      }
+
+      @if $direction == rtl {
+        transform: translate(100%, 0px);
+      }
+
+      @if $direction == ttb {
+        transform: translate(0px, -100%);
+      }
+
+      @if $direction == btt {
+        transform: translate(0px, 100%);
+      }
+    }
+  }
+}
+
+@mixin animation-in($direction) {
+  .el-drawer__open &.#{$direction} {
+    animation: #{$direction}-drawer-in .3s 1ms;
+  }
+}
+
+@mixin animation-out($direction) {
+  &.#{$direction} {
+    animation: #{$direction}-drawer-out .3s;
+  }
+}
+
+@include drawer-animation(rtl);
+@include drawer-animation(ltr);
+@include drawer-animation(ttb);
+@include drawer-animation(btt);
+
+$directions: rtl, ltr, ttb, btt;
+
+@include b(drawer) {
+  position: absolute;
+  box-sizing: border-box;
+  background-color: $--dialog-background-color;
+  display: flex;
+  flex-direction: column;
+  box-shadow: 0 8px 10px -5px rgba(0, 0, 0, 0.2),
+  0 16px 24px 2px rgba(0, 0, 0, 0.14),
+  0 6px 30px 5px rgba(0, 0, 0, 0.12);
+  overflow: hidden;
+
+  @each $direction in $directions {
+    @include animation-out($direction);
+    @include animation-in($direction);
+  }
+
+  &__wrapper {
+    position: fixed;
+    top: 0;
+    right: 0;
+    bottom: 0;
+    left: 0;
+    overflow: hidden;
+    margin: 0;
+  }
+
+  &__header {
+    align-items: center;
+    color: rgb(114, 118, 123);
+    display: flex;
+    margin-bottom: 32px;
+    padding: $--dialog-padding-primary;
+    padding-bottom: 0;
+    & > :first-child {
+      flex: 1;
+    }
+  }
+
+  &__title {
+    margin: 0;
+    flex: 1;
+    line-height: inherit;
+    font-size: 1rem;
+  }
+
+  &__close-btn {
+    border: none;
+    cursor: pointer;
+    font-size: $--font-size-extra-large;
+    color: inherit;
+    background-color: transparent;
+  }
+
+  &__body {
+    flex: 1;
+    & > * {
+      box-sizing: border-box;
+    }
+  }
+
+  &.ltr, &.rtl {
+    height: 100%;
+    top: 0;
+    bottom: 0;
+  }
+
+  &.ttb, &.btt {
+    width: 100%;
+    left: 0;
+    right: 0;
+  }
+
+  &.ltr {
+    left: 0;
+  }
+
+  &.rtl {
+    right: 0;
+  }
+
+  &.ttb {
+    top: 0;
+  }
+
+  &.btt {
+    bottom: 0;
+  }
+}
+
+.el-drawer__container {
+  position: relative;
+  left: 0;
+  right: 0;
+  top: 0;
+  bottom: 0;
+  height: 100%;
+  width: 100%;
+}
+
+.el-drawer-fade-enter-active {
+  animation: el-drawer-fade-in .3s;
+}
+
+.el-drawer-fade-leave-active {
+  animation: el-drawer-fade-in .3s reverse;
+}
diff --git a/packages/theme-chalk/src/dropdown.scss b/packages/theme-chalk/src/dropdown.scss
index 5871f83d166..84718599b4f 100644
--- a/packages/theme-chalk/src/dropdown.scss
+++ b/packages/theme-chalk/src/dropdown.scss
@@ -35,6 +35,10 @@
       background: mix(white, transparent, 50%);
     }
 
+    &.el-button--default::before {
+      background: mix($--button-default-border-color, transparent, 50%);
+    }
+
     &:hover {
       &::before {
         top: 0;
@@ -84,6 +88,10 @@
       color: $--dropdown-menuItem-hover-color;
     }
 
+    i {
+      margin-right: 5px;
+    }
+
     @include m(divided) {
       $divided-offset: 6px;
 
diff --git a/packages/theme-chalk/src/edit-table.scss b/packages/theme-chalk/src/edit-table.scss
new file mode 100644
index 00000000000..25b67a0f66f
--- /dev/null
+++ b/packages/theme-chalk/src/edit-table.scss
@@ -0,0 +1,37 @@
+@import "mixins/mixins";
+@import "common/var";
+
+@include b(edit-table) {
+  .el-table td, .el-table th{
+    .required{
+      color: $--color-danger;
+    }
+  }
+  .el-table__body {
+    td, th{
+      padding-bottom: 0;
+    }
+  }
+  &.el-edit-table-readonly{
+    .el-table__body {
+      td, th{
+        padding-top: 0;
+      }
+    }
+    .form-input.form-input--readonly{
+      margin-bottom: 0px;
+    }
+  }
+  .el-form-item__error{
+    overflow: hidden;
+    text-overflow:ellipsis;
+    white-space: nowrap;
+    width: 100%;
+  }
+  .danger-button{
+    color: $--color-danger;
+    &.is-disabled {
+      color: $--disabled-color-base;
+    }
+  }
+}
diff --git a/packages/theme-chalk/src/empty.scss b/packages/theme-chalk/src/empty.scss
new file mode 100644
index 00000000000..232109437e0
--- /dev/null
+++ b/packages/theme-chalk/src/empty.scss
@@ -0,0 +1,43 @@
+@import "mixins/mixins";
+@import "common/var";
+
+@include b(empty) {
+  margin: 0 8px;
+  font-size: $--empty-font-size;
+  line-height: 22px;
+  text-align: center;
+
+  &-image {
+    height: 100px;
+    margin-bottom: 8px;
+
+    img {
+      height: 100%;
+    }
+  }
+
+  &-description {
+    margin: 0;
+  }
+
+  &-footer {
+    margin-top: 16px;
+  }
+
+  // antd internal empty style
+  &-small {
+    margin: 8px 0;
+
+    @include b(image) {
+      height: 35px;
+    }
+  }
+
+  &-normal {
+    margin: 32px 0;
+
+    @include b(image) {
+      height: 40px;
+    }
+  }
+}
diff --git a/packages/theme-chalk/src/fonts/element-icons.ttf b/packages/theme-chalk/src/fonts/element-icons.ttf
index 73bc90f4ab7..91b74de3677 100644
Binary files a/packages/theme-chalk/src/fonts/element-icons.ttf and b/packages/theme-chalk/src/fonts/element-icons.ttf differ
diff --git a/packages/theme-chalk/src/fonts/element-icons.woff b/packages/theme-chalk/src/fonts/element-icons.woff
index 28da65d498a..02b9a2539e4 100644
Binary files a/packages/theme-chalk/src/fonts/element-icons.woff and b/packages/theme-chalk/src/fonts/element-icons.woff differ
diff --git a/packages/theme-chalk/src/form.scss b/packages/theme-chalk/src/form.scss
index 786f1e54be6..2494ca0bedd 100644
--- a/packages/theme-chalk/src/form.scss
+++ b/packages/theme-chalk/src/form.scss
@@ -84,11 +84,19 @@
     }
   }
 
+  @include e(label-wrap) {
+    float: left;
+    .el-form-item__label {
+      display: inline-block;
+      float: none;
+    }
+  }
+
   @include e(label) {
     text-align: right;
     vertical-align: middle;
     float: left;
-    font-size: 14px;
+    font-size: $--form-label-font-size;
     color: $--color-text-regular;
     line-height: 40px;
     padding: 0 12px 0 0;
@@ -101,7 +109,7 @@
     @include utils-clearfix;
 
     .el-input-group {
-      vertical-align: middle;
+      vertical-align: top;
     }
   }
   @include e(error) {
@@ -124,7 +132,8 @@
 
   @include when(required) {
     @include pseudo('not(.is-no-asterisk)') {
-      & > .el-form-item__label:before {
+      & > .el-form-item__label:before,
+      & .el-form-item__label-wrap > .el-form-item__label:before {
         content: '*';
         color: $--color-danger;
         margin-right: 4px;
@@ -149,23 +158,7 @@
       color: $--color-danger;
     }
   }
-  @include when(success) {
-    & .el-input__inner,
-    & .el-textarea__inner {
-      &, &:focus {
-        border-color: $--color-success;
-      }
-    }
-    & .el-input-group__append,
-    & .el-input-group__prepend {
-      & .el-input__inner {
-        border-color: transparent;
-      }
-    }
-    .el-input__validateIcon {
-      color: $--color-success;
-    }
-  }
+
   @include m(feedback) {
     .el-input__validateIcon {
       display: inline-block;
diff --git a/packages/theme-chalk/src/icon-checkbox.scss b/packages/theme-chalk/src/icon-checkbox.scss
new file mode 100644
index 00000000000..4862f95f845
--- /dev/null
+++ b/packages/theme-chalk/src/icon-checkbox.scss
@@ -0,0 +1,66 @@
+@import "mixins/mixins";
+@import "common/var";
+@import "mixins/_button";
+@import "mixins/utils";
+
+$--label-background-color: transparent;
+
+@include b(checkbox) {
+  color: #2D303B;
+}
+
+@include b(checkbox-icon-button) {
+  .el-checkbox-button__inner {
+    margin: 0 10px 0 0;
+    padding: 7px 8px;
+    border-radius: 14px;
+    border: none;
+    border-left: 0;
+    color: #818389;
+  }
+  @include e(inner) {
+    background: $--label-background-color;
+    transition: $--label-background-color;
+    @include utils-user-select(none);
+
+    @include button-size(7px, 8px, $--button-font-size, 14px);
+
+    &:hover {
+      color: $--color-primary;
+    }
+
+    & [class*="el-icon-"] {
+      line-height: 0.9;
+
+      & + span {
+        margin-left: 5px;
+      }
+    }
+  }
+
+  &.is-checked {
+    & .el-checkbox-button__inner {
+      color: #2460e0;
+      background-color: #E7ECFE;
+      border-color: $--label-background-color;
+      box-shadow: none;
+    }
+    &:first-child .el-checkbox-button__inner {
+      border-left-color: $--label-background-color;
+    }
+  }
+
+  &:first-child {
+    .el-checkbox-button__inner {
+      border-left: $--label-background-color;
+      border-radius: 14px;
+      box-shadow: none !important;
+    }
+  }
+
+  &:last-child {
+    .el-checkbox-button__inner {
+      border-radius: 14px;
+    }
+  }
+}
diff --git a/packages/theme-chalk/src/icon.scss b/packages/theme-chalk/src/icon.scss
index d1c05776f46..25a4487723c 100644
--- a/packages/theme-chalk/src/icon.scss
+++ b/packages/theme-chalk/src/icon.scss
@@ -5,7 +5,8 @@
   src: url('#{$--font-path}/element-icons.woff') format('woff'), /* chrome, firefox */
        url('#{$--font-path}/element-icons.ttf') format('truetype'); /* chrome, firefox, opera, Safari, Android, iOS 4.2+*/
   font-weight: normal;
-  font-style: normal
+  font-display: $--font-display;
+  font-style: normal;
 }
 
 [class^="el-icon-"], [class*=" el-icon-"] {
@@ -25,145 +26,1125 @@
   -moz-osx-font-smoothing: grayscale;
 }
 
-.el-icon-info:before { content: "\e61a"; }
+.el-icon-ice-cream-round:before {
+  content: "\e6a0";
+}
+
+.el-icon-ice-cream-square:before {
+  content: "\e6a3";
+}
+
+.el-icon-lollipop:before {
+  content: "\e6a4";
+}
+
+.el-icon-potato-strips:before {
+  content: "\e6a5";
+}
+
+.el-icon-milk-tea:before {
+  content: "\e6a6";
+}
+
+.el-icon-ice-drink:before {
+  content: "\e6a7";
+}
+
+.el-icon-ice-tea:before {
+  content: "\e6a9";
+}
+
+.el-icon-coffee:before {
+  content: "\e6aa";
+}
+
+.el-icon-orange:before {
+  content: "\e6ab";
+}
+
+.el-icon-pear:before {
+  content: "\e6ac";
+}
+
+.el-icon-apple:before {
+  content: "\e6ad";
+}
+
+.el-icon-cherry:before {
+  content: "\e6ae";
+}
+
+.el-icon-watermelon:before {
+  content: "\e6af";
+}
+
+.el-icon-grape:before {
+  content: "\e6b0";
+}
+
+.el-icon-refrigerator:before {
+  content: "\e6b1";
+}
+
+.el-icon-goblet-square-full:before {
+  content: "\e6b2";
+}
+
+.el-icon-goblet-square:before {
+  content: "\e6b3";
+}
+
+.el-icon-goblet-full:before {
+  content: "\e6b4";
+}
+
+.el-icon-goblet:before {
+  content: "\e6b5";
+}
+
+.el-icon-cold-drink:before {
+  content: "\e6b6";
+}
+
+.el-icon-coffee-cup:before {
+  content: "\e6b8";
+}
+
+.el-icon-water-cup:before {
+  content: "\e6b9";
+}
+
+.el-icon-hot-water:before {
+  content: "\e6ba";
+}
+
+.el-icon-ice-cream:before {
+  content: "\e6bb";
+}
+
+.el-icon-dessert:before {
+  content: "\e6bc";
+}
+
+.el-icon-sugar:before {
+  content: "\e6bd";
+}
+
+.el-icon-tableware:before {
+  content: "\e6be";
+}
+
+.el-icon-burger:before {
+  content: "\e6bf";
+}
+
+.el-icon-knife-fork:before {
+  content: "\e6c1";
+}
+
+.el-icon-fork-spoon:before {
+  content: "\e6c2";
+}
+
+.el-icon-chicken:before {
+  content: "\e6c3";
+}
+
+.el-icon-food:before {
+  content: "\e6c4";
+}
+
+.el-icon-dish-1:before {
+  content: "\e6c5";
+}
+
+.el-icon-dish:before {
+  content: "\e6c6";
+}
+
+.el-icon-moon-night:before {
+  content: "\e6ee";
+}
+
+.el-icon-moon:before {
+  content: "\e6f0";
+}
+
+.el-icon-cloudy-and-sunny:before {
+  content: "\e6f1";
+}
+
+.el-icon-partly-cloudy:before {
+  content: "\e6f2";
+}
+
+.el-icon-cloudy:before {
+  content: "\e6f3";
+}
+
+.el-icon-sunny:before {
+  content: "\e6f6";
+}
+
+.el-icon-sunset:before {
+  content: "\e6f7";
+}
+
+.el-icon-sunrise-1:before {
+  content: "\e6f8";
+}
+
+.el-icon-sunrise:before {
+  content: "\e6f9";
+}
+
+.el-icon-heavy-rain:before {
+  content: "\e6fa";
+}
+
+.el-icon-lightning:before {
+  content: "\e6fb";
+}
+
+.el-icon-light-rain:before {
+  content: "\e6fc";
+}
+
+.el-icon-wind-power:before {
+  content: "\e6fd";
+}
+
+.el-icon-baseball:before {
+  content: "\e712";
+}
+
+.el-icon-soccer:before {
+  content: "\e713";
+}
+
+.el-icon-football:before {
+  content: "\e715";
+}
+
+.el-icon-basketball:before {
+  content: "\e716";
+}
+
+.el-icon-ship:before {
+  content: "\e73f";
+}
+
+.el-icon-truck:before {
+  content: "\e740";
+}
+
+.el-icon-bicycle:before {
+  content: "\e741";
+}
+
+.el-icon-mobile-phone:before {
+  content: "\e6d3";
+}
+
+.el-icon-service:before {
+  content: "\e6d4";
+}
+
+.el-icon-key:before {
+  content: "\e6e2";
+}
+
+.el-icon-unlock:before {
+  content: "\e6e4";
+}
+
+.el-icon-lock:before {
+  content: "\e6e5";
+}
+
+.el-icon-watch:before {
+  content: "\e6fe";
+}
+
+.el-icon-watch-1:before {
+  content: "\e6ff";
+}
+
+.el-icon-timer:before {
+  content: "\e702";
+}
 
-.el-icon-error:before { content: "\e62c"; }
+.el-icon-alarm-clock:before {
+  content: "\e703";
+}
 
-.el-icon-success:before { content: "\e62d"; }
+.el-icon-map-location:before {
+  content: "\e704";
+}
 
-.el-icon-warning:before { content: "\e62e"; }
+.el-icon-delete-location:before {
+  content: "\e705";
+}
 
-.el-icon-question:before { content: "\e634"; }
+.el-icon-add-location:before {
+  content: "\e706";
+}
 
-.el-icon-back:before { content: "\e606"; }
+.el-icon-location-information:before {
+  content: "\e707";
+}
 
-.el-icon-arrow-left:before { content: "\e600"; }
+.el-icon-location-outline:before {
+  content: "\e708";
+}
 
-.el-icon-arrow-down:before { content: "\e603"; }
+.el-icon-location:before {
+  content: "\e79e";
+}
 
-.el-icon-arrow-right:before { content: "\e604"; }
+.el-icon-place:before {
+  content: "\e709";
+}
 
-.el-icon-arrow-up:before { content: "\e605"; }
+.el-icon-discover:before {
+  content: "\e70a";
+}
 
-.el-icon-caret-left:before { content: "\e60a"; }
+.el-icon-first-aid-kit:before {
+  content: "\e70b";
+}
 
-.el-icon-caret-bottom:before { content: "\e60b"; }
+.el-icon-trophy-1:before {
+  content: "\e70c";
+}
 
-.el-icon-caret-top:before { content: "\e60c"; }
+.el-icon-trophy:before {
+  content: "\e70d";
+}
 
-.el-icon-caret-right:before { content: "\e60e"; }
+.el-icon-medal:before {
+  content: "\e70e";
+}
 
-.el-icon-d-arrow-left:before { content: "\e610"; }
+.el-icon-medal-1:before {
+  content: "\e70f";
+}
 
-.el-icon-d-arrow-right:before { content: "\e613"; }
+.el-icon-stopwatch:before {
+  content: "\e710";
+}
 
-.el-icon-minus:before { content: "\e621"; }
+.el-icon-mic:before {
+  content: "\e711";
+}
 
-.el-icon-plus:before { content: "\e62b"; }
+.el-icon-copy-document:before {
+  content: "\e718";
+}
 
-.el-icon-remove:before { content: "\e635"; }
+.el-icon-full-screen:before {
+  content: "\e719";
+}
 
-.el-icon-circle-plus:before { content: "\e601"; }
+.el-icon-switch-button:before {
+  content: "\e71b";
+}
 
-.el-icon-remove-outline:before { content: "\e63c"; }
+.el-icon-aim:before {
+  content: "\e71c";
+}
 
-.el-icon-circle-plus-outline:before { content: "\e602"; }
+.el-icon-crop:before {
+  content: "\e71d";
+}
 
-.el-icon-close:before { content: "\e60f"; }
+.el-icon-odometer:before {
+  content: "\e71e";
+}
 
-.el-icon-check:before { content: "\e611"; }
+.el-icon-time:before {
+  content: "\e71f";
+}
 
-.el-icon-circle-close:before { content: "\e607"; }
+.el-icon-bangzhu:before {
+  content: "\e724";
+}
 
-.el-icon-circle-check:before { content: "\e639"; }
+.el-icon-close-notification:before {
+  content: "\e726";
+}
 
-.el-icon-circle-close-outline:before { content: "\e609"; }
+.el-icon-microphone:before {
+  content: "\e727";
+}
 
-.el-icon-circle-check-outline:before { content: "\e63e"; }
+.el-icon-turn-off-microphone:before {
+  content: "\e728";
+}
 
-.el-icon-zoom-out:before { content: "\e645"; }
+.el-icon-position:before {
+  content: "\e729";
+}
 
-.el-icon-zoom-in:before { content: "\e641"; }
+.el-icon-postcard:before {
+  content: "\e72a";
+}
 
-.el-icon-d-caret:before { content: "\e615"; }
+.el-icon-message:before {
+  content: "\e72b";
+}
 
-.el-icon-sort:before { content: "\e640"; }
+.el-icon-chat-line-square:before {
+  content: "\e72d";
+}
 
-.el-icon-sort-down:before { content: "\e630"; }
+.el-icon-chat-dot-square:before {
+  content: "\e72e";
+}
 
-.el-icon-sort-up:before { content: "\e631"; }
+.el-icon-chat-dot-round:before {
+  content: "\e72f";
+}
 
-.el-icon-tickets:before { content: "\e63f"; }
+.el-icon-chat-square:before {
+  content: "\e730";
+}
 
-.el-icon-document:before { content: "\e614"; }
+.el-icon-chat-line-round:before {
+  content: "\e731";
+}
 
-.el-icon-goods:before { content: "\e618"; }
+.el-icon-chat-round:before {
+  content: "\e732";
+}
 
-.el-icon-sold-out:before { content: "\e63b"; }
+.el-icon-set-up:before {
+  content: "\e733";
+}
 
-.el-icon-news:before { content: "\e625"; }
+.el-icon-turn-off:before {
+  content: "\e734";
+}
 
-.el-icon-message:before { content: "\e61b"; }
+.el-icon-open:before {
+  content: "\e735";
+}
 
-.el-icon-date:before { content: "\e608"; }
+.el-icon-connection:before {
+  content: "\e736";
+}
 
-.el-icon-printer:before { content: "\e62f"; }
+.el-icon-link:before {
+  content: "\e737";
+}
 
-.el-icon-time:before { content: "\e642"; }
+.el-icon-cpu:before {
+  content: "\e738";
+}
 
-.el-icon-bell:before { content: "\e622"; }
+.el-icon-thumb:before {
+  content: "\e739";
+}
 
-.el-icon-mobile-phone:before { content: "\e624"; }
+.el-icon-female:before {
+  content: "\e73a";
+}
 
-.el-icon-service:before { content: "\e63a"; }
+.el-icon-male:before {
+  content: "\e73b";
+}
 
-.el-icon-view:before { content: "\e643"; }
+.el-icon-guide:before {
+  content: "\e73c";
+}
 
-.el-icon-menu:before { content: "\e620"; }
+.el-icon-news:before {
+  content: "\e73e";
+}
 
-.el-icon-more:before { content: "\e646"; }
+.el-icon-price-tag:before {
+  content: "\e744";
+}
 
-.el-icon-more-outline:before { content: "\e626"; }
+.el-icon-discount:before {
+  content: "\e745";
+}
 
-.el-icon-star-on:before { content: "\e637"; }
+.el-icon-wallet:before {
+  content: "\e747";
+}
 
-.el-icon-star-off:before { content: "\e63d"; }
+.el-icon-coin:before {
+  content: "\e748";
+}
 
-.el-icon-location:before { content: "\e61d"; }
+.el-icon-money:before {
+  content: "\e749";
+}
 
-.el-icon-location-outline:before { content: "\e61f"; }
+.el-icon-bank-card:before {
+  content: "\e74a";
+}
 
-.el-icon-phone:before { content: "\e627"; }
+.el-icon-box:before {
+  content: "\e74b";
+}
 
-.el-icon-phone-outline:before { content: "\e628"; }
+.el-icon-present:before {
+  content: "\e74c";
+}
 
-.el-icon-picture:before { content: "\e629"; }
+.el-icon-sell:before {
+  content: "\e6d5";
+}
 
-.el-icon-picture-outline:before { content: "\e62a"; }
+.el-icon-sold-out:before {
+  content: "\e6d6";
+}
 
-.el-icon-delete:before { content: "\e612"; }
+.el-icon-shopping-bag-2:before {
+  content: "\e74d";
+}
 
-.el-icon-search:before { content: "\e619"; }
+.el-icon-shopping-bag-1:before {
+  content: "\e74e";
+}
 
-.el-icon-edit:before { content: "\e61c"; }
+.el-icon-shopping-cart-2:before {
+  content: "\e74f";
+}
 
-.el-icon-edit-outline:before { content: "\e616"; }
+.el-icon-shopping-cart-1:before {
+  content: "\e750";
+}
 
-.el-icon-rank:before { content: "\e632"; }
+.el-icon-shopping-cart-full:before {
+  content: "\e751";
+}
+
+.el-icon-smoking:before {
+  content: "\e752";
+}
+
+.el-icon-no-smoking:before {
+  content: "\e753";
+}
+
+.el-icon-house:before {
+  content: "\e754";
+}
+
+.el-icon-table-lamp:before {
+  content: "\e755";
+}
+
+.el-icon-school:before {
+  content: "\e756";
+}
 
-.el-icon-refresh:before { content: "\e633"; }
+.el-icon-office-building:before {
+  content: "\e757";
+}
 
-.el-icon-share:before { content: "\e636"; }
+.el-icon-toilet-paper:before {
+  content: "\e758";
+}
 
-.el-icon-setting:before { content: "\e638"; }
+.el-icon-notebook-2:before {
+  content: "\e759";
+}
 
-.el-icon-upload:before { content: "\e60d"; }
+.el-icon-notebook-1:before {
+  content: "\e75a";
+}
 
-.el-icon-upload2:before { content: "\e644"; }
+.el-icon-files:before {
+  content: "\e75b";
+}
 
-.el-icon-download:before { content: "\e617"; }
+.el-icon-collection:before {
+  content: "\e75c";
+}
+
+.el-icon-receiving:before {
+  content: "\e75d";
+}
+
+.el-icon-suitcase-1:before {
+  content: "\e760";
+}
+
+.el-icon-suitcase:before {
+  content: "\e761";
+}
+
+.el-icon-film:before {
+  content: "\e763";
+}
+
+.el-icon-collection-tag:before {
+  content: "\e765";
+}
+
+.el-icon-data-analysis:before {
+  content: "\e766";
+}
+
+.el-icon-pie-chart:before {
+  content: "\e767";
+}
+
+.el-icon-data-board:before {
+  content: "\e768";
+}
+
+.el-icon-data-line:before {
+  content: "\e76d";
+}
+
+.el-icon-reading:before {
+  content: "\e769";
+}
+
+.el-icon-magic-stick:before {
+  content: "\e76a";
+}
+
+.el-icon-coordinate:before {
+  content: "\e76b";
+}
+
+.el-icon-mouse:before {
+  content: "\e76c";
+}
+
+.el-icon-brush:before {
+  content: "\e76e";
+}
+
+.el-icon-headset:before {
+  content: "\e76f";
+}
+
+.el-icon-umbrella:before {
+  content: "\e770";
+}
+
+.el-icon-scissors:before {
+  content: "\e771";
+}
+
+.el-icon-mobile:before {
+  content: "\e773";
+}
+
+.el-icon-attract:before {
+  content: "\e774";
+}
+
+.el-icon-monitor:before {
+  content: "\e775";
+}
+
+.el-icon-search:before {
+  content: "\e778";
+}
+
+.el-icon-takeaway-box:before {
+  content: "\e77a";
+}
 
-.el-icon-loading:before { content: "\e61e"; }
+.el-icon-paperclip:before {
+  content: "\e77d";
+}
+
+.el-icon-printer:before {
+  content: "\e77e";
+}
+
+.el-icon-document-add:before {
+  content: "\e782";
+}
+
+.el-icon-document:before {
+  content: "\e785";
+}
+
+.el-icon-document-checked:before {
+  content: "\e786";
+}
+
+.el-icon-document-copy:before {
+  content: "\e787";
+}
+
+.el-icon-document-delete:before {
+  content: "\e788";
+}
+
+.el-icon-document-remove:before {
+  content: "\e789";
+}
+
+.el-icon-tickets:before {
+  content: "\e78b";
+}
+
+.el-icon-folder-checked:before {
+  content: "\e77f";
+}
+
+.el-icon-folder-delete:before {
+  content: "\e780";
+}
+
+.el-icon-folder-remove:before {
+  content: "\e781";
+}
+
+.el-icon-folder-add:before {
+  content: "\e783";
+}
+
+.el-icon-folder-opened:before {
+  content: "\e784";
+}
+
+.el-icon-folder:before {
+  content: "\e78a";
+}
+
+.el-icon-edit-outline:before {
+  content: "\e764";
+}
+
+.el-icon-edit:before {
+  content: "\e78c";
+}
+
+.el-icon-date:before {
+  content: "\e78e";
+}
+
+.el-icon-c-scale-to-original:before {
+  content: "\e7c6";
+}
+
+.el-icon-view:before {
+  content: "\e6ce";
+}
+
+.el-icon-loading:before {
+  content: "\e6cf";
+}
+
+.el-icon-rank:before {
+  content: "\e6d1";
+}
+
+.el-icon-sort-down:before {
+  content: "\e7c4";
+}
+
+.el-icon-sort-up:before {
+  content: "\e7c5";
+}
+
+.el-icon-sort:before {
+  content: "\e6d2";
+}
+
+.el-icon-finished:before {
+  content: "\e6cd";
+}
+
+.el-icon-refresh-left:before {
+  content: "\e6c7";
+}
+
+.el-icon-refresh-right:before {
+  content: "\e6c8";
+}
+
+.el-icon-refresh:before {
+  content: "\e6d0";
+}
+
+.el-icon-video-play:before {
+  content: "\e7c0";
+}
+
+.el-icon-video-pause:before {
+  content: "\e7c1";
+}
+
+.el-icon-d-arrow-right:before {
+  content: "\e6dc";
+}
+
+.el-icon-d-arrow-left:before {
+  content: "\e6dd";
+}
+
+.el-icon-arrow-up:before {
+  content: "\e6e1";
+}
+
+.el-icon-arrow-down:before {
+  content: "\e6df";
+}
+
+.el-icon-arrow-right:before {
+  content: "\e6e0";
+}
+
+.el-icon-arrow-left:before {
+  content: "\e6de";
+}
+
+.el-icon-top-right:before {
+  content: "\e6e7";
+}
+
+.el-icon-top-left:before {
+  content: "\e6e8";
+}
+
+.el-icon-top:before {
+  content: "\e6e6";
+}
+
+.el-icon-bottom:before {
+  content: "\e6eb";
+}
+
+.el-icon-right:before {
+  content: "\e6e9";
+}
+
+.el-icon-back:before {
+  content: "\e6ea";
+}
+
+.el-icon-bottom-right:before {
+  content: "\e6ec";
+}
+
+.el-icon-bottom-left:before {
+  content: "\e6ed";
+}
+
+.el-icon-caret-top:before {
+  content: "\e78f";
+}
+
+.el-icon-caret-bottom:before {
+  content: "\e790";
+}
+
+.el-icon-caret-right:before {
+  content: "\e791";
+}
+
+.el-icon-caret-left:before {
+  content: "\e792";
+}
+
+.el-icon-d-caret:before {
+  content: "\e79a";
+}
+
+.el-icon-share:before {
+  content: "\e793";
+}
+
+.el-icon-menu:before {
+  content: "\e798";
+}
+
+.el-icon-s-grid:before {
+  content: "\e7a6";
+}
+
+.el-icon-s-check:before {
+  content: "\e7a7";
+}
+
+.el-icon-s-data:before {
+  content: "\e7a8";
+}
+
+.el-icon-s-opportunity:before {
+  content: "\e7aa";
+}
+
+.el-icon-s-custom:before {
+  content: "\e7ab";
+}
+
+.el-icon-s-claim:before {
+  content: "\e7ad";
+}
+
+.el-icon-s-finance:before {
+  content: "\e7ae";
+}
+
+.el-icon-s-comment:before {
+  content: "\e7af";
+}
+
+.el-icon-s-flag:before {
+  content: "\e7b0";
+}
+
+.el-icon-s-marketing:before {
+  content: "\e7b1";
+}
+
+.el-icon-s-shop:before {
+  content: "\e7b4";
+}
+
+.el-icon-s-open:before {
+  content: "\e7b5";
+}
+
+.el-icon-s-management:before {
+  content: "\e7b6";
+}
+
+.el-icon-s-ticket:before {
+  content: "\e7b7";
+}
+
+.el-icon-s-release:before {
+  content: "\e7b8";
+}
+
+.el-icon-s-home:before {
+  content: "\e7b9";
+}
+
+.el-icon-s-promotion:before {
+  content: "\e7ba";
+}
+
+.el-icon-s-operation:before {
+  content: "\e7bb";
+}
+
+.el-icon-s-unfold:before {
+  content: "\e7bc";
+}
+
+.el-icon-s-fold:before {
+  content: "\e7a9";
+}
+
+.el-icon-s-platform:before {
+  content: "\e7bd";
+}
+
+.el-icon-s-order:before {
+  content: "\e7be";
+}
+
+.el-icon-s-cooperation:before {
+  content: "\e7bf";
+}
+
+.el-icon-bell:before {
+  content: "\e725";
+}
+
+.el-icon-message-solid:before {
+  content: "\e799";
+}
+
+.el-icon-video-camera:before {
+  content: "\e772";
+}
+
+.el-icon-video-camera-solid:before {
+  content: "\e796";
+}
+
+.el-icon-camera:before {
+  content: "\e779";
+}
+
+.el-icon-camera-solid:before {
+  content: "\e79b";
+}
+
+.el-icon-download:before {
+  content: "\e77c";
+}
+
+.el-icon-upload2:before {
+  content: "\e77b";
+}
+
+.el-icon-upload:before {
+  content: "\e7c3";
+}
+
+.el-icon-picture-outline-round:before {
+  content: "\e75f";
+}
+
+.el-icon-picture-outline:before {
+  content: "\e75e";
+}
+
+.el-icon-picture:before {
+  content: "\e79f";
+}
+
+.el-icon-close:before {
+  content: "\e6db";
+}
+
+.el-icon-check:before {
+  content: "\e6da";
+}
+
+.el-icon-plus:before {
+  content: "\e6d9";
+}
+
+.el-icon-minus:before {
+  content: "\e6d8";
+}
+
+.el-icon-help:before {
+  content: "\e73d";
+}
+
+.el-icon-s-help:before {
+  content: "\e7b3";
+}
+
+.el-icon-circle-close:before {
+  content: "\e78d";
+}
+
+.el-icon-circle-check:before {
+  content: "\e720";
+}
+
+.el-icon-circle-plus-outline:before {
+  content: "\e723";
+}
+
+.el-icon-remove-outline:before {
+  content: "\e722";
+}
+
+.el-icon-zoom-out:before {
+  content: "\e776";
+}
+
+.el-icon-zoom-in:before {
+  content: "\e777";
+}
+
+.el-icon-error:before {
+  content: "\e79d";
+}
+
+.el-icon-success:before {
+  content: "\e79c";
+}
+
+.el-icon-circle-plus:before {
+  content: "\e7a0";
+}
+
+.el-icon-remove:before {
+  content: "\e7a2";
+}
+
+.el-icon-info:before {
+  content: "\e7a1";
+}
+
+.el-icon-question:before {
+  content: "\e7a4";
+}
+
+.el-icon-warning-outline:before {
+  content: "\e6c9";
+}
+
+.el-icon-warning:before {
+  content: "\e7a3";
+}
+
+.el-icon-goods:before {
+  content: "\e7c2";
+}
+
+.el-icon-s-goods:before {
+  content: "\e7b2";
+}
+
+.el-icon-star-off:before {
+  content: "\e717";
+}
+
+.el-icon-star-on:before {
+  content: "\e797";
+}
+
+.el-icon-more-outline:before {
+  content: "\e6cc";
+}
+
+.el-icon-more:before {
+  content: "\e794";
+}
+
+.el-icon-phone-outline:before {
+  content: "\e6cb";
+}
+
+.el-icon-phone:before {
+  content: "\e795";
+}
+
+.el-icon-user:before {
+  content: "\e6e3";
+}
+
+.el-icon-user-solid:before {
+  content: "\e7a5";
+}
+
+.el-icon-setting:before {
+  content: "\e6ca";
+}
+
+.el-icon-s-tools:before {
+  content: "\e7ac";
+}
+
+.el-icon-delete:before {
+  content: "\e6d7";
+}
+
+.el-icon-delete-solid:before {
+  content: "\e7c9";
+}
+
+.el-icon-eleme:before {
+  content: "\e7c7";
+}
+
+.el-icon-platform-eleme:before {
+  content: "\e7ca";
+}
 
 .el-icon-loading {
   animation: rotating 2s linear infinite;
diff --git a/packages/theme-chalk/src/image.scss b/packages/theme-chalk/src/image.scss
new file mode 100644
index 00000000000..96fd660910a
--- /dev/null
+++ b/packages/theme-chalk/src/image.scss
@@ -0,0 +1,177 @@
+@import "mixins/mixins";
+@import "common/var";
+
+%size {
+  width: 100%;
+  height: 100%;
+}
+
+@include b(image) {
+  position: relative;
+  display: inline-block;
+  overflow: hidden;
+
+  @include e(inner) {
+    @extend %size;
+    vertical-align: top;
+
+    @include m(center) {
+      position: relative;
+      top: 50%;
+      left: 50%;
+      transform: translate(-50%, -50%);
+      display: block;
+    }
+  }
+
+  @include e(placeholder) {
+    @extend %size;
+    background: $--background-color-base;
+  }
+
+  @include e(error) {
+    @extend %size;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    font-size: 14px;
+    background: $--background-color-base;
+    color: $--color-text-placeholder;
+    vertical-align: middle;
+  }
+
+  @include e(preview) {
+    cursor: pointer;
+  }
+}
+
+
+@include b(image-viewer) {
+
+
+  @include e(wrapper) {
+    position: fixed;
+    top: 0;
+    right: 0;
+    bottom: 0;
+    left: 0;
+  }
+
+  @include e(btn) {
+    position: absolute;
+    z-index: 1;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    border-radius: 50%;
+    opacity: .8;
+    cursor: pointer;
+    box-sizing: border-box;
+    user-select: none;
+  }
+
+  @include e(close) {
+    top: 40px;
+    right: 40px;
+    width: 40px;
+    height: 40px;
+    font-size: 40px;
+  }
+
+  @include e(canvas) {
+    width: 100%;
+    height: 100%;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+  }
+
+  @include e(actions) {
+    left: 50%;
+    bottom: 30px;
+    transform: translateX(-50%);
+    width: 282px;
+    height: 44px;
+    padding: 0 23px;
+    background-color: #606266;
+    border-color: #fff;
+    border-radius: 22px;
+
+    @include e(actions__inner) {
+      width: 100%;
+      height: 100%;
+      text-align: justify;
+      cursor: default;
+      font-size: 23px;
+      color: #fff;
+      display: flex;
+      align-items: center;
+      justify-content: space-around;
+    }
+  }
+
+  @include e(prev){
+    top: 50%;
+    transform: translateY(-50%);
+    width: 44px;
+    height: 44px;
+    font-size: 24px;
+    color: #fff;
+    background-color: #606266;
+    border-color: #fff;
+    left: 40px;
+  }
+
+  @include e(next){
+    top: 50%;
+    transform: translateY(-50%);
+    width: 44px;
+    height: 44px;
+    font-size: 24px;
+    color: #fff;
+    background-color: #606266;
+    border-color: #fff;
+    right: 40px;
+    text-indent: 2px;
+  }
+
+  @include e(mask) {
+    position: absolute;
+    width: 100%;
+    height: 100%;
+    top: 0;
+    left: 0;
+    opacity: .5;
+    background: #000;
+  }
+}
+
+.viewer-fade-enter-active {
+  animation: viewer-fade-in .3s;
+}
+
+.viewer-fade-leave-active {
+  animation: viewer-fade-out .3s;
+}
+
+@keyframes viewer-fade-in {
+  0% {
+    transform: translate3d(0, -20px, 0);
+    opacity: 0;
+  }
+  100% {
+    transform: translate3d(0, 0, 0);
+    opacity: 1;
+  }
+}
+
+@keyframes viewer-fade-out {
+  0% {
+    transform: translate3d(0, 0, 0);
+    opacity: 1;
+  }
+  100% {
+    transform: translate3d(0, -20px, 0);
+    opacity: 0;
+  }
+}
diff --git a/packages/theme-chalk/src/index.scss b/packages/theme-chalk/src/index.scss
index aed93072166..2082359138b 100644
--- a/packages/theme-chalk/src/index.scss
+++ b/packages/theme-chalk/src/index.scss
@@ -65,3 +65,36 @@
 @import "./aside.scss";
 @import "./main.scss";
 @import "./footer.scss";
+@import "./timeline.scss";
+@import "./timeline-item.scss";
+@import "./link.scss";
+@import "./divider.scss";
+@import "./image.scss";
+@import "./calendar.scss";
+@import "./backtop.scss";
+@import "./infinite-scroll.scss";
+@import "./page-header.scss";
+@import "./cascader-panel.scss";
+@import "./avatar.scss";
+@import "./drawer.scss";
+@import "./popconfirm.scss";
+@import "./lr-container.scss";
+@import "./loading-button.scss";
+@import "./message-box-center.scss";
+@import "./tabs-dotted.scss";
+@import "./data-mapper.scss";
+@import "./checkbox-img-button.scss";
+@import "./radio-img-button.scss";
+@import "./icon-checkbox.scss";
+@import "./status-steps.scss";
+@import "./panel.scss";
+@import "./skeleton.scss";
+@import "./empty.scss";
+@import "./affix.scss";
+@import "./input-id-card.scss";
+@import "./input-phone.scss";
+@import "./input-email.scss";
+@import "./switch-enhance.scss";
+@import "./input-url.scss";
+@import "./edit-table.scss";
+@import "./button-group-enhance.scss";
diff --git a/packages/theme-chalk/src/infinite-scroll.scss b/packages/theme-chalk/src/infinite-scroll.scss
new file mode 100644
index 00000000000..e69de29bb2d
diff --git a/packages/theme-chalk/src/infiniteScroll.scss b/packages/theme-chalk/src/infiniteScroll.scss
new file mode 100644
index 00000000000..e69de29bb2d
diff --git a/packages/theme-chalk/src/input-email.scss b/packages/theme-chalk/src/input-email.scss
new file mode 100644
index 00000000000..49644b66e23
--- /dev/null
+++ b/packages/theme-chalk/src/input-email.scss
@@ -0,0 +1,5 @@
+@import "mixins/mixins";
+@import "common/var";
+
+@include b(input-email) {
+}
diff --git a/packages/theme-chalk/src/input-id-card.scss b/packages/theme-chalk/src/input-id-card.scss
new file mode 100644
index 00000000000..bf0bf6568ad
--- /dev/null
+++ b/packages/theme-chalk/src/input-id-card.scss
@@ -0,0 +1,5 @@
+@import "mixins/mixins";
+@import "common/var";
+
+@include b(input-id-card) {
+}
diff --git a/packages/theme-chalk/src/input-phone.scss b/packages/theme-chalk/src/input-phone.scss
new file mode 100644
index 00000000000..9b8a938f217
--- /dev/null
+++ b/packages/theme-chalk/src/input-phone.scss
@@ -0,0 +1,5 @@
+@import "mixins/mixins";
+@import "common/var";
+
+@include b(input-phone) {
+}
diff --git a/packages/theme-chalk/src/input-url.scss b/packages/theme-chalk/src/input-url.scss
new file mode 100644
index 00000000000..8a8bf34347d
--- /dev/null
+++ b/packages/theme-chalk/src/input-url.scss
@@ -0,0 +1,5 @@
+@import "mixins/mixins";
+@import "common/var";
+
+@include b(input-url) {
+}
diff --git a/packages/theme-chalk/src/input.scss b/packages/theme-chalk/src/input.scss
index acc8891480b..4f26610b90b 100644
--- a/packages/theme-chalk/src/input.scss
+++ b/packages/theme-chalk/src/input.scss
@@ -2,6 +2,7 @@
 @import "common/var";
 
 @include b(textarea) {
+  position: relative;
   display: inline-block;
   width: 100%;
   vertical-align: bottom;
@@ -15,13 +16,17 @@
     box-sizing: border-box;
     width: 100%;
     font-size: inherit;
-    color: $--input-color;
-    background-color: $--input-fill;
+    color: $--input-font-color;
+    background-color: $--input-background-color;
     background-image: none;
     border: $--input-border;
     border-radius: $--input-border-radius;
     transition: $--border-transition-base;
 
+    &.el-textarea__count {
+      padding-bottom: 20px;
+    }
+
     &::placeholder {
       color: $--input-placeholder-color;
     }
@@ -36,6 +41,16 @@
     }
   }
 
+  & .el-input__count {
+    color: $--color-info;
+    background: $--color-white;
+    position: absolute;
+    font-size: 12px;
+    bottom: 5px;
+    right: 10px;
+    line-height: 1;
+  }
+
   @include when(disabled) {
     .el-textarea__inner {
       background-color: $--input-disabled-fill;
@@ -48,6 +63,16 @@
       }
     }
   }
+
+  @include when(exceed) {
+    .el-textarea__inner {
+      border-color: $--color-danger;
+    }
+
+    .el-input__count {
+      color: $--color-danger;
+    }
+  }
 }
 
 @include b(input) {
@@ -60,7 +85,6 @@
   & .el-input__clear {
     color: $--input-icon-color;
     font-size: $--input-font-size;
-    line-height: 16px;
     cursor: pointer;
     transition: $--color-transition-base;
 
@@ -69,14 +93,29 @@
     }
   }
 
+  & .el-input__count {
+    height: 100%;
+    display: inline-flex;
+    align-items: center;
+    color: $--color-info;
+    font-size: 12px;
+
+    .el-input__count-inner {
+      background: $--color-white;
+      line-height: initial;
+      display: inline-block;
+      padding: 0 5px;
+    }
+  }
+
   @include e(inner) {
     -webkit-appearance: none;
-    background-color: $--input-fill;
+    background-color: $--input-background-color;
     background-image: none;
     border-radius: $--input-border-radius;
     border: $--input-border;
     box-sizing: border-box;
-    color: $--input-color;
+    color: $--input-font-color;
     display: inline-block;
     font-size: inherit;
     height: $--input-height;
@@ -169,6 +208,18 @@
     }
   }
 
+  @include when(exceed) {
+    .el-input__inner {
+      border-color: $--color-danger;
+    }
+
+    .el-input__suffix {
+      .el-input__count {
+        color: $--color-danger;
+      }
+    }
+  }
+
   @include m(suffix) {
     .el-input__inner {
       padding-right: 30px;
diff --git a/packages/theme-chalk/src/link.scss b/packages/theme-chalk/src/link.scss
new file mode 100644
index 00000000000..704379f0b35
--- /dev/null
+++ b/packages/theme-chalk/src/link.scss
@@ -0,0 +1,81 @@
+@import "mixins/mixins";
+@import "common/var";
+
+$typeMap: (
+  primary: $--link-primary-font-color, 
+  danger: $--link-danger-font-color, 
+  success: $--link-success-font-color, 
+  warning: $--link-warning-font-color, 
+  info: $--link-info-font-color);
+
+@include b(link) {
+  display: inline-flex;
+  flex-direction: row;
+  align-items: center;
+  justify-content: center;
+  vertical-align: middle;
+  position: relative;
+  text-decoration: none;
+  outline: none;
+  cursor: pointer;
+  padding: 0;
+  font-size: $--link-font-size;
+  font-weight: $--link-font-weight;
+
+  @include when(underline) {
+    &:hover:after {
+      content: "";
+      position: absolute;
+      left: 0;
+      right: 0;
+      height: 0;
+      bottom: 0;
+      border-bottom: 1px solid $--link-default-active-color
+    }
+  }
+
+  @include when(disabled) {
+    cursor: not-allowed;
+  } 
+
+  & [class*="el-icon-"] {
+    & + span {
+      margin-left: 5px;
+    }
+  }
+    
+    
+  &.el-link--default  {
+    color: $--link-default-font-color;
+    &:hover {
+      color: $--link-default-active-color
+    }
+    &:after {
+      border-color: $--link-default-active-color
+    }
+    @include when(disabled) {
+      color: $--link-disabled-font-color
+    }
+  }
+
+  @each $type, $primaryColor in $typeMap {
+    &.el-link--#{$type} {
+      color: $primaryColor;
+      &:hover {
+        color: mix($primaryColor, $--color-white, 80%)
+      }
+      &:after {
+        border-color: $primaryColor
+      }
+      @include when(disabled) {
+        color: mix($primaryColor, $--color-white, 50%)
+      }
+      @include when(underline) {
+        &:hover:after {
+          border-color: $primaryColor
+        }
+      }
+    }
+  }
+    
+}
diff --git a/packages/theme-chalk/src/loading-button.scss b/packages/theme-chalk/src/loading-button.scss
new file mode 100644
index 00000000000..fe07a775c02
--- /dev/null
+++ b/packages/theme-chalk/src/loading-button.scss
@@ -0,0 +1,5 @@
+@import "mixins/mixins";
+@import "common/var";
+
+@include b(loading-button) {
+}
diff --git a/packages/theme-chalk/src/lr-container.scss b/packages/theme-chalk/src/lr-container.scss
new file mode 100644
index 00000000000..d5756523980
--- /dev/null
+++ b/packages/theme-chalk/src/lr-container.scss
@@ -0,0 +1,25 @@
+@import "mixins/mixins";
+@import "common/var";
+
+@include b(lr-container) {
+  display: flex;
+  
+  &.is-bordered {
+    border-width: 1px;
+    border-style: solid;
+    border-color: $--aside-border-color;
+  }
+
+  @include b(aside-border-right) {
+    border-right-width: 1px;
+    border-right-style: solid;
+    border-right-color: $--aside-border-color;
+  }
+
+  @include b(lr-container-main) {
+    flex: 1;
+  }
+  @include b(lr-container-aside-content) {
+    min-width: 80px;
+  }
+}
diff --git a/packages/theme-chalk/src/menu.scss b/packages/theme-chalk/src/menu.scss
index aafca5506b7..5b8c38e5bec 100644
--- a/packages/theme-chalk/src/menu.scss
+++ b/packages/theme-chalk/src/menu.scss
@@ -7,7 +7,7 @@
   height: 56px;
   line-height: 56px;
   font-size: $--menu-item-font-size;
-  color: $--menu-item-color;
+  color: $--menu-item-font-color;
   padding: 0 20px;
   list-style: none;
   cursor: pointer;
@@ -43,7 +43,7 @@
   position: relative;
   margin: 0;
   padding-left: 0;
-  background-color: $--menu-item-fill;
+  background-color: $--menu-background-color;
   @include utils-clearfix;
   &.el-menu--horizontal {
     border-bottom: solid 1px #e6e6e6;
diff --git a/packages/theme-chalk/src/message-box-center.scss b/packages/theme-chalk/src/message-box-center.scss
new file mode 100644
index 00000000000..413840e2ee1
--- /dev/null
+++ b/packages/theme-chalk/src/message-box-center.scss
@@ -0,0 +1,16 @@
+@import "mixins/mixins";
+@import "common/var";
+
+@include b(message-box-center) {
+  &.el-message-box{
+    .el-message-box__content {
+      text-align: center;
+    }
+    .el-message-box__status {
+      display: inline-block;
+    }
+    .el-message-box__message {
+      display: inline-block;
+    }
+  }
+}
diff --git a/packages/theme-chalk/src/message-box.scss b/packages/theme-chalk/src/message-box.scss
index 94d4e123d30..b2be54bd0f4 100644
--- a/packages/theme-chalk/src/message-box.scss
+++ b/packages/theme-chalk/src/message-box.scss
@@ -12,7 +12,7 @@
   background-color: $--color-white;
   border-radius: $--msgbox-border-radius;
   border: 1px solid $--border-color-lighter;
-  font-size: $--msgbox-font-size;
+  font-size: $--messagebox-font-size;
   box-shadow: $--box-shadow-light;
   text-align: left;
   overflow: hidden;
@@ -44,9 +44,9 @@
   @include e(title) {
     padding-left: 0;
     margin-bottom: 0;
-    font-size: $--msgbox-font-size;
+    font-size: $--messagebox-font-size;
     line-height: 1;
-    color: $--color-text-primary;
+    color: $--messagebox-title-color;
   }
 
   @include e(headerbtn) {
@@ -73,10 +73,13 @@
   }
 
   @include e(content) {
-    position: relative;
     padding: 10px $--msgbox-padding-primary;
-    color: $--msgbox-content-color;
-    font-size: $--msgbox-content-font-size;
+    color: $--messagebox-content-color;
+    font-size: $--messagebox-content-font-size;
+  }
+  
+  @include e(container) {
+    position: relative;
   }
 
   @include e(input) {
@@ -107,19 +110,19 @@
     }
 
     &.el-icon-success {
-      color: $--msgbox-success-color;
+      color: $--messagebox-success-color;
     }
 
     &.el-icon-info {
-      color: $--msgbox-info-color;
+      color: $--messagebox-info-color;
     }
 
     &.el-icon-warning {
-      color: $--msgbox-warning-color;
+      color: $--messagebox-warning-color;
     }
 
     &.el-icon-error {
-      color: $--msgbox-danger-color;
+      color: $--messagebox-danger-color;
     }
   }
 
@@ -134,7 +137,7 @@
 
   @include e(errormsg) {
     color: $--color-danger;
-    font-size: $--msgbox-error-font-size;
+    font-size: $--messagebox-error-font-size;
     min-height: 18px;
     margin-top: 2px;
   }
diff --git a/packages/theme-chalk/src/message.scss b/packages/theme-chalk/src/message.scss
index a5f5f221812..233b568cafc 100644
--- a/packages/theme-chalk/src/message.scss
+++ b/packages/theme-chalk/src/message.scss
@@ -13,11 +13,12 @@
   top: 20px;
   transform: translateX(-50%);
   background-color: $--message-background-color;
-  transition: opacity 0.3s, transform .4s;
+  transition: opacity 0.3s, transform .4s, top 0.4s;
   overflow: hidden;
   padding: $--message-padding;
   display: flex;
   align-items: center;
+  z-index: $--index-peak;
 
   @include when(center) {
     justify-content: center;
@@ -35,7 +36,7 @@
 
   @include m(info) {
     .el-message__content {
-      color: $--message-info-color;
+      color: $--message-info-font-color;
     }
   }
 
@@ -44,7 +45,7 @@
     border-color: $--color-success-light;
 
     .el-message__content {
-      color: $--message-success-color;
+      color: $--message-success-font-color;
     }
   }
 
@@ -53,7 +54,7 @@
     border-color: $--color-warning-light;
 
     .el-message__content {
-      color: $--message-warning-color;
+      color: $--message-warning-font-color;
     }
   }
 
@@ -62,7 +63,7 @@
     border-color: $--color-danger-light;
 
     .el-message__content {
-      color: $--message-danger-color;
+      color: $--message-danger-font-color;
     }
   }
 
@@ -85,7 +86,7 @@
     right: 15px;
     transform: translateY(-50%);
     cursor: pointer;
-    color: $--message-close-color;
+    color: $--message-close-icon-color;
     font-size: $--message-close-size;
 
     &:focus {
@@ -97,19 +98,19 @@
   }
 
   & .el-icon-success {
-    color: $--message-success-color;
+    color: $--message-success-font-color;
   }
 
   & .el-icon-error {
-    color: $--message-danger-color;
+    color: $--message-danger-font-color;
   }
 
   & .el-icon-info {
-    color: $--message-info-color;
+    color: $--message-info-font-color;
   }
 
   & .el-icon-warning {
-    color: $--message-warning-color;
+    color: $--message-warning-font-color;
   }
 }
 
diff --git a/packages/theme-chalk/src/notification.scss b/packages/theme-chalk/src/notification.scss
index 3ef27ad7f71..fb3afb8f8a8 100644
--- a/packages/theme-chalk/src/notification.scss
+++ b/packages/theme-chalk/src/notification.scss
@@ -13,6 +13,7 @@
   box-shadow: $--notification-shadow;
   transition: opacity .3s, transform .3s, left .3s, right .3s, top 0.4s, bottom .3s;
   overflow: hidden;
+  z-index: $--index-peak;
 
   &.right {
     right: 16px;
@@ -23,7 +24,8 @@
   }
 
   @include e(group) {
-    margin-left: $--notification-group-margin;
+    margin-left: $--notification-group-margin-left;
+    margin-right: $--notification-group-margin-right;
   }
 
   @include e(title) {
@@ -34,10 +36,10 @@
   }
 
   @include e(content) {
-    font-size: $--notification-font-size;
+    font-size: $--notification-content-font-size;
     line-height: 21px;
     margin: 6px 0 0 0;
-    color: $--notification-color;
+    color: $--notification-content-color;
     text-align: justify;
 
     p {
@@ -65,19 +67,19 @@
   }
 
   .el-icon-success {
-    color: $--notification-success-color;
+    color: $--notification-success-icon-color;
   }
 
   .el-icon-error {
-    color: $--notification-danger-color;
+    color: $--notification-danger-icon-color;
   }
 
   .el-icon-info {
-    color: $--notification-info-color;
+    color: $--notification-info-icon-color;
   }
 
   .el-icon-warning {
-    color: $--notification-warning-color;
+    color: $--notification-warning-icon-color;
   }
 }
 
diff --git a/packages/theme-chalk/src/option.scss b/packages/theme-chalk/src/option.scss
index f4d023dbf53..ee5a383ee88 100644
--- a/packages/theme-chalk/src/option.scss
+++ b/packages/theme-chalk/src/option.scss
@@ -29,7 +29,7 @@
     }
 
     &.selected {
-      color: $--select-option-selected;
+      color: $--select-option-selected-font-color;
       font-weight: bold;
     }
   }
diff --git a/packages/theme-chalk/src/page-header.scss b/packages/theme-chalk/src/page-header.scss
new file mode 100644
index 00000000000..14c19fa9d8a
--- /dev/null
+++ b/packages/theme-chalk/src/page-header.scss
@@ -0,0 +1,41 @@
+@import "mixins/mixins";
+@import "common/var";
+
+@include b(page-header) {
+  display: flex;
+  line-height: 24px;
+
+  @include e(left) {
+    display: flex;
+    cursor: pointer;
+    margin-right: 40px;
+    position: relative;
+
+    &::after {
+      content: "";
+      position: absolute;
+      width: 1px;
+      height: 16px;
+      right: -20px;
+      top: 50%;
+      transform: translateY(-50%);
+      background-color: $--border-color-base;
+    }
+
+    .el-icon-back {
+      font-size: 18px;
+      margin-right: 6px;
+      align-self: center;
+    }
+
+    @include e(title) {
+      font-size: 14px;
+      font-weight: 500;
+    }
+  }
+
+  @include e(content) {
+    font-size: 18px;
+    color: $--color-text-primary;
+  }
+}
diff --git a/packages/theme-chalk/src/pagination.scss b/packages/theme-chalk/src/pagination.scss
index 207f10d73b2..02384e67747 100644
--- a/packages/theme-chalk/src/pagination.scss
+++ b/packages/theme-chalk/src/pagination.scss
@@ -6,7 +6,7 @@
 @include b(pagination) {
   white-space: nowrap;
   padding: 2px 5px;
-  color: $--pagination-color;
+  color: $--pagination-font-color;
   font-weight: bold;
   @include utils-clearfix;
 
@@ -53,12 +53,12 @@
     }
 
     &:hover {
-      color: $--pagination-hover-fill;
+      color: $--pagination-hover-color;
     }
 
     &:disabled {
       color: $--pagination-button-disabled-color;
-      background-color: $--pagination-button-disabled-fill;
+      background-color: $--pagination-button-disabled-background-color;
       cursor: not-allowed;
     }
   }
@@ -67,7 +67,7 @@
   .btn-next {
     background: center center no-repeat;
     background-size: 16px;
-    background-color: $--pagination-fill;
+    background-color: $--pagination-background-color;
     cursor: pointer;
     margin: 0;
     color: $--pagination-button-color;
@@ -139,7 +139,7 @@
       padding-left: 8px;
 
       &:hover {
-        border-color: $--pagination-hover-fill;
+        border-color: $--pagination-hover-color;
       }
     }
   }
@@ -214,7 +214,7 @@
 
     .el-pager li:not(.disabled) {
       &:hover {
-        color: $--pagination-hover-fill;
+        color: $--pagination-hover-color;
       }
 
       &.active {
@@ -249,7 +249,7 @@
 
   li {
     padding: 0 4px;
-    background: $--pagination-fill;
+    background: $--pagination-background-color;
     vertical-align: top;
     display: inline-block;
     font-size: $--pagination-font-size;
@@ -284,11 +284,11 @@
     }
 
     &:hover {
-      color: $--pagination-hover-fill;
+      color: $--pagination-hover-color;
     }
 
     &.active {
-      color: $--pagination-hover-fill;
+      color: $--pagination-hover-color;
       cursor: default;
     }
   }
diff --git a/packages/theme-chalk/src/panel.scss b/packages/theme-chalk/src/panel.scss
new file mode 100644
index 00000000000..090902ca789
--- /dev/null
+++ b/packages/theme-chalk/src/panel.scss
@@ -0,0 +1,69 @@
+@import "mixins/mixins";
+@import "common/var";
+
+@include b(panel) {
+    .el-panel {
+        background-color: #fff;
+        &-view {
+          &__header {
+            display: flex;
+            justify-content: space-between;
+            height: 54px;
+            line-height: 54px;
+            padding: 0 20px;
+            border-bottom: 1px solid #e4e8f3;
+          }
+      
+          &__title {
+            display: flex;
+            justify-content: center;
+            align-items: center;
+          }
+        }
+      
+        &-edit {
+          &__header {
+            display: flex;
+            justify-content: space-between;
+            height: 54px;
+            line-height: 54px;
+            padding: 0 20px;
+          }
+      
+          &__title {
+            display: flex;
+            position: relative;
+            padding-left: 10px;
+            justify-content: center;
+            align-items: center;
+            &:before {
+              content: '';
+              display: block;
+              width: 4px;
+              height: 12px;
+              background-color: #575962;
+              border-radius: 4px;
+              position: absolute;
+              left: 0;
+              top: 50%;
+              transform: translateY(-50%);
+            }
+          }
+        }
+      
+        &-view__title,
+        &-edit__title {
+          .title {
+            font-size: 14px;
+            color: #2d303b;
+            font-weight: 500;
+          }
+      
+          .subtitle {
+            font-size: 12px;
+            color: #9ca6c7;
+            padding-left: 10px;
+          }
+        }
+      }
+}
diff --git a/packages/theme-chalk/src/popconfirm.scss b/packages/theme-chalk/src/popconfirm.scss
new file mode 100644
index 00000000000..bc4bb526c75
--- /dev/null
+++ b/packages/theme-chalk/src/popconfirm.scss
@@ -0,0 +1,16 @@
+@import "mixins/mixins";
+@import "common/var";
+
+@include b(popconfirm) {
+  @include e(main) {
+    display: flex;
+    align-items: center;
+  }
+  @include e(icon) {
+    margin-right: 5px;
+  }
+  @include e(action) {
+    text-align: right; 
+    margin: 0
+  }
+}
diff --git a/packages/theme-chalk/src/popover.scss b/packages/theme-chalk/src/popover.scss
index bd9c2885656..896712ac9b9 100644
--- a/packages/theme-chalk/src/popover.scss
+++ b/packages/theme-chalk/src/popover.scss
@@ -4,7 +4,7 @@
 
 @include b(popover) {
   position: absolute;
-  background: $--popover-fill;
+  background: $--popover-background-color;
   min-width: 150px;
   border-radius: 4px;
   border: 1px solid $--popover-border-color;
@@ -15,13 +15,14 @@
   text-align: justify;
   font-size: $--popover-font-size;
   box-shadow: $--box-shadow-light;
+  word-break: break-all;
 
   @include m(plain) {
     padding: $--popover-padding-large;
   }
 
   @include e(title) {
-    color: $--popover-title-color;
+    color: $--popover-title-font-color;
     font-size: $--popover-title-font-size;
     line-height: 1;
     margin-bottom: 12px;
diff --git a/packages/theme-chalk/src/popper.scss b/packages/theme-chalk/src/popper.scss
index 5fa73310ae0..2104f599bbd 100644
--- a/packages/theme-chalk/src/popper.scss
+++ b/packages/theme-chalk/src/popper.scss
@@ -36,7 +36,7 @@
     &::after {
       bottom: 1px;
       margin-left: -$--popover-arrow-size;
-      border-top-color: $--popover-fill;
+      border-top-color: $--popover-background-color;
       border-bottom-width: 0;
     }
   }
@@ -56,7 +56,7 @@
       top: 1px;
       margin-left: -$--popover-arrow-size;
       border-top-width: 0;
-      border-bottom-color: $--popover-fill;
+      border-bottom-color: $--popover-background-color;
     }
   }
 
@@ -74,7 +74,7 @@
     &::after {
       bottom: -$--popover-arrow-size;
       left: 1px;
-      border-right-color: $--popover-fill;
+      border-right-color: $--popover-background-color;
       border-left-width: 0;
     }
   }
@@ -95,7 +95,7 @@
       bottom: -$--popover-arrow-size;
       margin-left: -$--popover-arrow-size;
       border-right-width: 0;
-      border-left-color: $--popover-fill;
+      border-left-color: $--popover-background-color;
     }
   }
 }
\ No newline at end of file
diff --git a/packages/theme-chalk/src/progress.scss b/packages/theme-chalk/src/progress.scss
index 1280fba1c16..e6139f59dc4 100644
--- a/packages/theme-chalk/src/progress.scss
+++ b/packages/theme-chalk/src/progress.scss
@@ -20,7 +20,7 @@
     }
   }
 
-  @include m(circle) {
+  @include m((circle,dashboard)) {
     display: inline-block;
 
     .el-progress__text {
@@ -39,6 +39,7 @@
     }
   }
 
+
   @include m(without-text) {
     .el-progress__text {
       display: none;
@@ -68,6 +69,16 @@
     }
   }
 
+  @include when(warning) {
+    .el-progress-bar__inner {
+      background-color: $--color-warning;
+    }
+
+    .el-progress__text {
+      color: $--color-warning;
+    }
+  }
+
   @include when(exception) {
     .el-progress-bar__inner {
       background-color: $--color-danger;
diff --git a/packages/theme-chalk/src/radio-button.scss b/packages/theme-chalk/src/radio-button.scss
index fe9e013cba6..bd4215eea03 100644
--- a/packages/theme-chalk/src/radio-button.scss
+++ b/packages/theme-chalk/src/radio-button.scss
@@ -12,11 +12,11 @@
     line-height: 1;
     white-space: nowrap;
     vertical-align: middle;
-    background: $--button-default-fill;
+    background: $--button-default-background-color;
     border: $--border-base;
     font-weight: $--button-font-weight;
     border-left: 0;
-    color: $--button-default-color;
+    color: $--button-default-font-color;
     -webkit-appearance: none;
     text-align: center;
     box-sizing: border-box;
@@ -57,8 +57,8 @@
 
     &:checked {
       & + .el-radio-button__inner {
-        color: $--radio-button-checked-color;
-        background-color: $--radio-button-checked-fill;
+        color: $--radio-button-checked-font-color;
+        background-color: $--radio-button-checked-background-color;
         border-color: $--radio-button-checked-border-color;
         box-shadow: -1px 0 0 0 $--radio-button-checked-border-color;
       }
@@ -66,11 +66,11 @@
 
     &:disabled {
       & + .el-radio-button__inner {
-        color: $--button-disabled-color;
+        color: $--button-disabled-font-color;
         cursor: not-allowed;
         background-image: none;
-        background-color: $--button-disabled-fill;
-        border-color: $--button-disabled-border;
+        background-color: $--button-disabled-background-color;
+        border-color: $--button-disabled-border-color;
         box-shadow: none;
       }
       &:checked + .el-radio-button__inner {
diff --git a/packages/theme-chalk/src/radio-img-button.scss b/packages/theme-chalk/src/radio-img-button.scss
new file mode 100644
index 00000000000..b7ccf78f939
--- /dev/null
+++ b/packages/theme-chalk/src/radio-img-button.scss
@@ -0,0 +1,274 @@
+@import "mixins/mixins";
+@import "mixins/utils";
+@import 'mixins/button';
+@import "common/var";
+
+@include b(radio-img-button) {
+  color: $--radio-font-color;
+  font-weight: $--radio-font-weight;
+  line-height: 1;
+  position: relative;
+  cursor: pointer;
+  outline: none;
+  font-size: $--font-size-base;
+  @include utils-user-select(none);
+  display: flex;
+
+  @include when(vertical){
+    flex-direction: column;
+    align-items: center;
+    justify-content: center;
+
+    @include e(img) {
+      width: 80px;
+      height: 50px;
+    }
+
+    @include e(input) {
+      padding: 20px 0 17px 0;
+    }
+
+    @include e(label) {
+      .el-radio-img-button__text{
+        font-size: 14px;
+        padding-left: 40px;
+        padding-right: 40px;
+        color: #606266;
+        overflow: hidden;
+        text-overflow: ellipsis;
+        display: -webkit-box;
+        -webkit-line-clamp:1;
+        -webkit-box-orient: vertical;
+      }
+
+    }
+  }
+
+  @include when(horizontal){
+    flex-direction: row;
+    align-items: center;
+
+    @include e(img) {
+      width: 108px;
+      height: 80px;
+      padding: 20px 0;
+    }
+
+    @include e(input) {
+      padding: 0 20px;
+    }
+
+    @include e(label) {
+      .el-radio-img-button__word{
+        padding-left: 30px;
+        padding-right: 30px;
+        display: flex;
+        flex-direction: column;
+
+        .el-radio-img-button__text{
+          font-size: 16px;
+          line-height: 30px;
+          color: #606266;
+          overflow: hidden;
+          text-overflow: ellipsis;
+          display: -webkit-box;
+          -webkit-line-clamp:1;
+          -webkit-box-orient: vertical;
+        }
+
+        .el-radio-img-button__description{
+          font-size: 14px;
+          line-height: 24px;
+          color: #909399;
+          overflow: hidden;
+          text-overflow: ellipsis;
+          display: -webkit-box;
+          -webkit-line-clamp:2;
+          -webkit-box-orient: vertical;
+        }
+      }
+    }
+  }
+
+  @include when(bordered) {
+    border-radius: $--border-radius-base;
+    border: $--border-base;
+    box-sizing: border-box;
+
+    &.is-checked {
+      border-color: $--color-primary;
+    }
+
+    &.is-disabled {
+      cursor: not-allowed;
+      border-color: $--border-color-lighter;
+    }
+
+    & + .el-radio-img-button.is-bordered {
+      margin-left: 10px;
+    }
+  }
+
+  @include m(medium) {
+    &.is-bordered {
+      padding: $--radio-bordered-medium-padding;
+      border-radius: $--button-medium-border-radius;
+      height: $--radio-bordered-medium-height;
+      .el-radio-img-button__label {
+        font-size: $--button-medium-font-size;
+      }
+      .el-radio-img-button__inner {
+        height: $--radio-bordered-medium-input-height;
+        width: $--radio-bordered-medium-input-width;
+      }
+    }
+  }
+  @include m(small) {
+    &.is-bordered {
+      padding: $--radio-bordered-small-padding;
+      border-radius: $--button-small-border-radius;
+      height: $--radio-bordered-small-height;
+      .el-radio-img-button__label {
+        font-size: $--button-small-font-size;
+      }
+      .el-radio-img-button__inner {
+        height: $--radio-bordered-small-input-height;
+        width: $--radio-bordered-small-input-width;
+      }
+    }
+  }
+  @include m(mini) {
+    &.is-bordered {
+      padding: $--radio-bordered-mini-padding;
+      border-radius: $--button-mini-border-radius;
+      height: $--radio-bordered-mini-height;
+      .el-radio-img-button__label {
+        font-size: $--button-mini-font-size;
+      }
+      .el-radio-img-button__inner {
+        height: $--radio-bordered-mini-input-height;
+        width: $--radio-bordered-mini-input-width;
+      }
+    }
+  }
+
+
+  &:last-child {
+    margin-right: 0;
+  }
+
+  @include e(input) {
+    white-space: nowrap;
+    cursor: pointer;
+    outline: none;
+    display: inline-block;
+    line-height: 1;
+    position: relative;
+    vertical-align: middle;
+
+    @include when(disabled) {
+      .el-radio-img-button__inner {
+        background-color: $--radio-disabled-input-fill;
+        border-color: $--radio-disabled-input-border-color;
+        cursor: not-allowed;
+
+        &::after {
+          cursor: not-allowed;
+          background-color: $--radio-disabled-icon-color;
+        }
+
+        & + .el-radio-img-button__label {
+          cursor: not-allowed;
+        }
+      }
+      &.is-checked {
+        .el-radio-img-button__inner {
+          background-color: $--radio-disabled-checked-input-fill;
+          border-color: $--radio-disabled-checked-input-border-color;
+
+          &::after {
+            background-color: $--radio-disabled-checked-icon-color;
+          }
+        }
+      }
+      & + span.el-radio-img-button__label {
+        color: #818389;
+        cursor: not-allowed;
+      }
+    }
+
+    @include when(checked) {
+      .el-radio-img-button__inner {
+        border-color: $--radio-checked-input-border-color;
+        background: $--radio-checked-icon-color;
+
+        &::after {
+          transform: translate(-50%, -50%) scale(1);
+        }
+      }
+
+      & + .el-radio-img-button__label {
+        color: $--radio-checked-font-color;
+      }
+    }
+
+    @include when(focus) {
+      .el-radio-img-button__inner {
+        border-color: $--radio-input-border-color-hover;
+      }
+    }
+  }
+
+  @include e(inner) {
+    border: $--radio-input-border;
+    border-radius: $--radio-input-border-radius;
+    width: $--radio-input-width;
+    height: $--radio-input-height;
+    background-color: $--radio-input-background-color;
+    position: relative;
+    cursor: pointer;
+    display: inline-block;
+    box-sizing: border-box;
+
+    &:hover {
+      border-color: $--radio-input-border-color-hover;
+    }
+
+    &::after {
+      width: 4px;
+      height: 4px;
+      border-radius: $--radio-input-border-radius;
+      background-color: $--color-white;
+      content: "";
+      position: absolute;
+      left: 50%;
+      top: 50%;
+      transform: translate(-50%, -50%) scale(0);
+      transition: transform .15s ease-in;
+    }
+  }
+
+  @include e(original) {
+    opacity: 0;
+    outline: none;
+    position: absolute;
+    z-index: -1;
+    top: 0;
+    left: 0;
+    right: 0;
+    bottom: 0;
+    margin: 0;
+  }
+
+  &:focus:not(.is-focus):not(:active):not(.is-disabled) { /*获得焦点时 样式提醒*/
+    .el-radio-img-button__inner {
+      box-shadow: 0 0 2px 2px $--radio-input-border-color-hover;
+    }
+  }
+
+  @include e(label) {
+    font-size: $--radio-font-size;
+    padding: 19px 0;
+  }
+
+}
diff --git a/packages/theme-chalk/src/radio.scss b/packages/theme-chalk/src/radio.scss
index f8aa6736e86..4d8faf1798c 100644
--- a/packages/theme-chalk/src/radio.scss
+++ b/packages/theme-chalk/src/radio.scss
@@ -4,7 +4,7 @@
 @import "common/var";
 
 @include b(radio) {
-  color: $--radio-color;
+  color: $--radio-font-color;
   font-weight: $--radio-font-weight;
   line-height: 1;
   position: relative;
@@ -13,6 +13,7 @@
   white-space: nowrap;
   outline: none;
   font-size: $--font-size-base;
+  margin-right: 30px;
   @include utils-user-select(none);
 
   @include when(bordered) {
@@ -79,8 +80,8 @@
     }
   }
 
-  & + .el-radio {
-    margin-left: 30px;
+  &:last-child {
+    margin-right: 0;
   }
 
   @include e(input) {
@@ -134,7 +135,7 @@
       }
 
       & + .el-radio__label {
-        color: $--radio-checked-text-color;
+        color: $--radio-checked-font-color;
       }
     }
 
@@ -149,7 +150,7 @@
     border-radius: $--radio-input-border-radius;
     width: $--radio-input-width;
     height: $--radio-input-height;
-    background-color: $--radio-input-fill;
+    background-color: $--radio-input-background-color;
     position: relative;
     cursor: pointer;
     display: inline-block;
diff --git a/packages/theme-chalk/src/scrollbar.scss b/packages/theme-chalk/src/scrollbar.scss
index e99d0ec1df5..56e5f29106b 100644
--- a/packages/theme-chalk/src/scrollbar.scss
+++ b/packages/theme-chalk/src/scrollbar.scss
@@ -19,6 +19,7 @@
     height: 100%;
 
     @include m(hidden-default) {
+      scrollbar-width: none;
       &::-webkit-scrollbar {
         width: 0;
         height: 0;
diff --git a/packages/theme-chalk/src/select-dropdown.scss b/packages/theme-chalk/src/select-dropdown.scss
index d6a9135d8af..f9b3b4fd929 100644
--- a/packages/theme-chalk/src/select-dropdown.scss
+++ b/packages/theme-chalk/src/select-dropdown.scss
@@ -14,7 +14,7 @@
 
   @include when(multiple) {
     & .el-select-dropdown__item.selected {
-      color: $--select-option-selected;
+      color: $--select-option-selected-font-color;
       background-color: $--select-dropdown-background;
 
       &.hover {
@@ -25,7 +25,7 @@
         position: absolute;
         right: 20px;
         font-family: 'element-icons';
-        content: "\E611";
+        content: "\e6da";
         font-size: 12px;
         font-weight: bold;
         -webkit-font-smoothing: antialiased;
diff --git a/packages/theme-chalk/src/select.scss b/packages/theme-chalk/src/select.scss
index d11dcdca59d..d5f6a30d1ba 100644
--- a/packages/theme-chalk/src/select.scss
+++ b/packages/theme-chalk/src/select.scss
@@ -28,7 +28,7 @@
     padding-right: 35px;
 
     &:focus {
-      border-color: $--select-input-focus-background;
+      border-color: $--select-input-focus-border-color;
     }
   }
 
@@ -69,7 +69,7 @@
     }
 
     &.is-focus .el-input__inner {
-      border-color: $--select-input-focus-background;
+      border-color: $--select-input-focus-border-color;
     }
   }
 
diff --git a/packages/theme-chalk/src/skeleton.scss b/packages/theme-chalk/src/skeleton.scss
new file mode 100644
index 00000000000..d93557c00bb
--- /dev/null
+++ b/packages/theme-chalk/src/skeleton.scss
@@ -0,0 +1,124 @@
+@import "mixins/mixins";
+
+@mixin avatar-size($size) {
+  width: $size;
+  height: $size;
+  line-height: $size;
+}
+
+@mixin skeleton-color {
+  background: linear-gradient(
+    90deg,
+    $--skeleton-color 25%,
+    $--skeleton-to-color 37%,
+    $--skeleton-color 63%
+  );
+  background-size: 400% 100%;
+  animation: skeletonLoading 1.4s ease infinite;
+}
+
+@keyframes skeletonLoading {
+  0% {
+    background-position: 100% 50%;
+  }
+  100% {
+    background-position: 0 50%;
+  }
+}
+
+
+@include b(skeleton) {
+  display: table;
+  width: 100%;
+
+  &-avatar {
+    &-circle {
+      border-radius: 50%;
+    }
+    display: inline-block;
+    vertical-align: top;
+    background: $--skeleton-color;
+
+    @include avatar-size($--avatar-medium-size);
+
+    &-lg {
+      @include avatar-size($--avatar-large-size);
+    }
+
+    &-sm {
+      @include avatar-size($--avatar-small-size);
+    }
+  }
+
+  &-header {
+    display: table-cell;
+    padding-right: 16px;
+    vertical-align: top;
+  }
+
+  &-content {
+    display: table-cell;
+    width: 100%;
+    vertical-align: top;
+
+    // Title
+    @include b(skeleton-title) {
+      width: 100%;
+      height: 16px;
+      margin-top: 16px;
+      background: $--skeleton-color;
+
+      @include m(skeleton-paragraph) {
+        margin-top: 24px;
+      }
+    }
+
+    // paragraph
+    @include b(skeleton-paragraph) {
+      > li {
+        width: 100%;
+        height: 16px;
+        list-style: none;
+        background: $--skeleton-color;
+
+        &:last-child:not(:first-child):not(:nth-child(2)) {
+          width: 61%;
+        }
+
+        + li {
+          margin-top: 16px;
+        }
+      }
+    }
+  }
+
+  &-with-avatar &-content {
+    // Title
+    @include b(skeleton-title) {
+      margin-top: 12px;
+
+      @include m(skeleton-paragraph) {
+        margin-top: 28px;
+      }
+    }
+  }
+
+  // With active animation
+  &.el-skeleton-active {
+    @include b(skeleton-content) {
+      .el-skeleton-title,
+      .el-skeleton-paragraph > li {
+        @include skeleton-color;
+      }
+    }
+
+    @include b(skeleton-avatar) {
+      @include skeleton-color;
+    }
+  }
+}
+
+ol, ul, dl {
+  margin: 0;
+  padding: 0;
+}
\ No newline at end of file
diff --git a/packages/theme-chalk/src/slider.scss b/packages/theme-chalk/src/slider.scss
index 7961df9254d..666c52dccfb 100644
--- a/packages/theme-chalk/src/slider.scss
+++ b/packages/theme-chalk/src/slider.scss
@@ -5,6 +5,7 @@
 @import "common/var";
 
 @include b(slider) {
+
   @include utils-clearfix;
 
   @include e(runway) {
@@ -151,6 +152,21 @@
     transform: translateX(-50%);
   }
 
+  @include e(marks) {
+    top: 0;
+    left: 12px;
+    width: 18px;
+    height: 100%;
+
+    @include e(marks-text) {
+      position: absolute;
+      transform: translateX(-50%);
+      font-size: 14px;
+      color: $--color-info;
+      margin-top: 15px;
+    }
+  }
+
   @include when(vertical) {
     position: relative;
     .el-slider__runway {
@@ -224,5 +240,11 @@
         }
       }
     }
+
+    @include e(marks-text) {
+      margin-top: 0;
+      left: 15px;
+      transform: translateY(50%);
+    }
   }
 }
diff --git a/packages/theme-chalk/src/status-steps.scss b/packages/theme-chalk/src/status-steps.scss
new file mode 100644
index 00000000000..b646439c28e
--- /dev/null
+++ b/packages/theme-chalk/src/status-steps.scss
@@ -0,0 +1,16 @@
+@import "mixins/mixins";
+@import "common/var";
+
+@include b(step) {
+
+  @include when(horizontal) {
+    display: inline-block;
+
+    @include e(line) {
+      height: 2px;
+      top: 11px;
+      left: 34px;
+      right: 10px;
+    }
+  }
+}
diff --git a/packages/theme-chalk/src/switch-enhance.scss b/packages/theme-chalk/src/switch-enhance.scss
new file mode 100644
index 00000000000..1ce1b8cf3b7
--- /dev/null
+++ b/packages/theme-chalk/src/switch-enhance.scss
@@ -0,0 +1,47 @@
+@import "mixins/mixins";
+@import "common/var";
+
+@include b(switch-enhance) {
+  .square {
+    .el-switch__core {
+      border-radius: 4px;
+    }
+
+    .el-switch__core::after {
+      border-radius: 4px;
+    }
+  }
+
+  .inline-text {
+    .el-switch__label {
+      position: absolute;
+      margin: 0;
+      opacity: 0;
+      visibility: hidden;
+
+      & span {
+        font-size: 12px;
+      }
+    }
+
+    .el-switch__label.is-active {
+      color: $--color-white;
+      z-index: 1;
+      opacity: 1;
+      visibility: visible;
+    }
+
+    .el-switch__label--left {
+      right: 6px;
+    }
+
+    .el-switch__label--right {
+      left: 6px;
+    }
+
+    &:not(.is-checked) .el-switch__core {
+      background-color: #A7A8AD;
+      border-color: #A7A8AD;
+    }
+  }
+}
diff --git a/packages/theme-chalk/src/table.scss b/packages/theme-chalk/src/table.scss
index 8257491bf14..319c5d135af 100644
--- a/packages/theme-chalk/src/table.scss
+++ b/packages/theme-chalk/src/table.scss
@@ -13,20 +13,22 @@
   max-width: 100%;
   background-color: $--color-white;
   font-size: 14px;
-  color: $--table-text-color;
+  color: $--table-font-color;
 
   // 数据为空
   @include e(empty-block) {
     min-height: 60px;
     text-align: center;
     width: 100%;
-    height: 100%;
     display: flex;
     justify-content: center;
     align-items: center;
   }
 
   @include e(empty-text) {
+    // min-height doesn't work in IE10 and IE11 https://github.com/philipwalton/flexbugs#3-min-height-on-a-flex-container-wont-apply-to-its-flex-items
+    // set empty text line height up to contrainer min-height as workaround.
+    line-height: 60px;
     width: 50%;
     color: $--color-text-secondary;
   }
@@ -73,6 +75,16 @@
     }
   }
 
+  @include e(placeholder) {
+    display: inline-block;
+    width: 20px;
+  }
+
+  @include e(append-wrapper) {
+    // 避免外边距重合 https://developer.mozilla.org/zh-CN/docs/Web/CSS/CSS_Box_Model/Mastering_margin_collapsing
+    overflow: hidden;
+  }
+
   @include m(fit) {
     border-right: 0;
     border-bottom: 0;
@@ -95,7 +107,7 @@
   }
 
   thead {
-    color: $--table-header-color;
+    color: $--table-header-font-color;
     font-weight: 500;
 
     &.is-group {
@@ -173,30 +185,18 @@
   }
 
   th {
-    white-space: nowrap;
     overflow: hidden;
     user-select: none;
-    background-color: $--table-header-background;
+    background-color: $--table-header-background-color;
 
-    div {
+    > .cell {
       display: inline-block;
-      padding-left: 10px;
-      padding-right: 10px;
-      line-height: 40px;
       box-sizing: border-box;
-      overflow: hidden;
-      white-space: nowrap;
-      text-overflow: ellipsis;
-    }
-
-    > .cell {
       position: relative;
-      word-wrap: normal;
-      text-overflow: ellipsis;
-      display: inline-block;
       vertical-align: middle;
+      padding-left: 10px;
+      padding-right: 10px;
       width: 100%;
-      box-sizing: border-box;
 
       &.highlight {
         color: $--color-primary;
@@ -358,8 +358,8 @@
 
     & tbody td {
       border-top: $--table-border;
-      background-color: $--table-row-hover-background;
-      color: $--table-text-color;
+      background-color: $--table-row-hover-background-color;
+      color: $--table-font-color;
     }
   }
 
@@ -391,8 +391,8 @@
     overflow: hidden;
 
     & tbody td {
-      background-color: $--table-row-hover-background;
-      color: $--table-text-color;
+      background-color: $--table-row-hover-background-color;
+      color: $--table-font-color;
     }
   }
 
@@ -486,7 +486,7 @@
         }
 
         &.current-row td {
-          background-color: $--table-current-row-background;
+          background-color: $--table-current-row-background-color;
         }
       }
     }
@@ -497,14 +497,14 @@
       &, &.el-table__row--striped {
         &, &.current-row {
           > td {
-            background-color: $--table-current-row-background;
+            background-color: $--table-row-hover-background-color;
           }
         }
       }
     }
 
     tr.current-row > td {
-      background-color: $--table-current-row-background;
+      background-color: $--table-current-row-background-color;
     }
   }
 
@@ -538,7 +538,7 @@
 
   @include m(enable-row-hover) {
     .el-table__body tr:hover > td {
-      background-color: $--table-row-hover-background;
+      background-color: $--table-row-hover-background-color;
     }
   }
 
@@ -549,4 +549,15 @@
       overflow: hidden;
     }
   }
+
+  [class*=el-table__row--level] {
+    .el-table__expand-icon {
+      display: inline-block;
+      width: 20px;
+      line-height: 20px;
+      height: 20px;
+      text-align: center;
+      margin-right: 3px;
+    }
+  }
 }
diff --git a/packages/theme-chalk/src/tabs-dotted.scss b/packages/theme-chalk/src/tabs-dotted.scss
new file mode 100644
index 00000000000..b307eef0620
--- /dev/null
+++ b/packages/theme-chalk/src/tabs-dotted.scss
@@ -0,0 +1,31 @@
+@import "mixins/mixins";
+@import "common/var";
+
+@include b(tabs-dotted) {
+  > .el-tabs__header .el-tabs__nav-wrap::after {
+    content: none;
+  }
+  > .el-tabs__header {
+    .el-tabs__item:not(:last-child)::after {
+      content: '';
+      display: inline-block;
+      width: 4px;
+      height: 4px;
+      background-color: #999;
+      vertical-align: middle;
+      border-radius: 4px;
+      position: absolute;
+      top: 45%;
+      right: 0;
+    }
+    .el-tabs__active-bar{
+      display: none;
+    }
+    .el-tabs__item:first-child {
+      padding-left: 0
+    }
+    .el-tabs__item:nth-child(2) {
+      padding-left: 20px;
+    }
+  }
+}
diff --git a/packages/theme-chalk/src/tabs.scss b/packages/theme-chalk/src/tabs.scss
index 84b62105618..355be4c3066 100644
--- a/packages/theme-chalk/src/tabs.scss
+++ b/packages/theme-chalk/src/tabs.scss
@@ -50,7 +50,7 @@
       left: 0;
       bottom: 0;
       width: 100%;
-      height: 2px;
+      height: 1px;
       background-color: $--border-color-light;
       z-index: $--index-normal;
     }
@@ -100,7 +100,7 @@
     display: inline-block;
     list-style: none;
     font-size: 14px;
-    font-weight: 500;
+    font-weight: 400;
     color: $--color-text-primary;
     position: relative;
 
@@ -109,7 +109,7 @@
     }
 
     &:focus.is-active.is-focus:not(:active) {
-      box-shadow: 0 0 2px 2px #409eff inset;
+      box-shadow: 0 0 2px 2px $--color-primary inset;
       border-radius: 3px;
     }
 
@@ -211,10 +211,10 @@
     border: 1px solid $--border-color-base;
     box-shadow: 0 2px 4px 0 rgba(0,0,0,0.12), 0 0 6px 0 rgba(0,0,0,0.04);
 
-    >.el-tabs__content {
+    > .el-tabs__content {
       padding: 15px;
     }
-    >.el-tabs__header {
+    > .el-tabs__header {
       background-color: $--background-color-base;
       border-bottom: 1px solid $--border-color-light;
       margin: 0;
@@ -222,12 +222,20 @@
     > .el-tabs__header .el-tabs__nav-wrap::after {
       content: none;
     }
-    >.el-tabs__header .el-tabs__item {
+    > .el-tabs__header .el-tabs__item {
       transition: all .3s cubic-bezier(.645,.045,.355,1);
       border: 1px solid transparent;
-      margin: -1px -1px 0;
+      margin-top: -1px;
       color: $--color-text-secondary;
 
+      &:first-child {
+        margin-left: -1px;
+      }
+
+      & + .el-tabs__item {
+        margin-left: -1px;
+      }
+
       &.is-active {
         color: $--color-primary;
         background-color: $--color-white;
@@ -241,6 +249,10 @@
         color: $--disabled-color-base;
       }
     }
+
+    > .el-tabs__header .is-scrollable .el-tabs__item:first-child {
+      margin-left: 0;
+    }
   }
   @include m((top, bottom)) {
     .el-tabs__item.is-top:nth-child(2),
@@ -254,11 +266,13 @@
 
     &.el-tabs--border-card, &.el-tabs--card,
     .el-tabs--left, .el-tabs--right {
-      .el-tabs__item:nth-child(2) {
-        padding-left: 20px;
-      }
-      .el-tabs__item:last-child {
-        padding-right: 20px;
+      > .el-tabs__header {
+        .el-tabs__item:nth-child(2) {
+          padding-left: 20px;
+        }
+        .el-tabs__item:last-child {
+          padding-right: 20px;
+        }
       }
     }
   }
@@ -314,7 +328,7 @@
         width: 100%;
         text-align: center;
         cursor: pointer;
-  
+
         i {
           transform: rotateZ(90deg);
         }
@@ -334,7 +348,7 @@
 
       &::after {
         height: 100%;
-        width: 2px;
+        width: 1px;
         bottom: auto;
         top: 0;
       }
@@ -379,6 +393,7 @@
         border-right: 1px solid $--border-color-light;
         border-bottom: none;
         border-top: 1px solid $--border-color-light;
+        text-align: left;
       }
       .el-tabs__item.is-left:first-child {
         border-right: 1px solid $--border-color-light;
diff --git a/packages/theme-chalk/src/tag.scss b/packages/theme-chalk/src/tag.scss
index 6c949d7164c..162290206f3 100644
--- a/packages/theme-chalk/src/tag.scss
+++ b/packages/theme-chalk/src/tag.scss
@@ -1,119 +1,136 @@
 @import "mixins/mixins";
 @import "common/var";
 
-@include b(tag) {
-  background-color: $--tag-fill;
-  display: inline-block;
-  padding: $--tag-padding;
-  height: 32px;
-  line-height: 30px;
-  font-size: $--tag-font-size;
-  color: $--tag-color;
-  border-radius: $--tag-border-radius;
-  box-sizing: border-box;
-  border: 1px solid $--tag-border;
-  white-space: nowrap;
-
-  .el-icon-close {
-    border-radius: 50%;
-    text-align: center;
-    position: relative;
-    cursor: pointer;
-    font-size: 12px;
-    height: 16px;
-    width: 16px;
-    line-height: 16px;
-    vertical-align: middle;
-    top: -1px;
-    right: -5px;
-    color: $--tag-color;
+@mixin genTheme($backgroundColorWeight, $borderColorWeight, $fontColorWeight, $hoverColorWeight) {
+  background-color: mix($--tag-primary-color, $--color-white, $backgroundColorWeight);
+  border-color: mix($--tag-primary-color, $--color-white, $borderColorWeight);
+  color: mix($--tag-primary-color, $--color-white, $fontColorWeight);
 
-    &::before {
-      display: block;
-    }
+  @include when(hit) {
+    border-color: $--tag-primary-color;
+  }
 
+  .el-tag__close {
+    color: mix($--tag-primary-color, $--color-white, $fontColorWeight);
     &:hover {
-      background-color: $--tag-color;
       color: $--color-white;
+      background-color: mix($--tag-primary-color, $--color-white, $hoverColorWeight);
     }
   }
 
-  @include m(info) {
-    background-color: $--tag-info-fill;
-    border-color: $--tag-info-border;
-    color: $--tag-info-color;
+  &.el-tag--info {
+    background-color: mix($--tag-info-color, $--color-white, $backgroundColorWeight);
+    border-color: mix($--tag-info-color, $--color-white, $borderColorWeight);
+    color: mix($--tag-info-color, $--color-white, $fontColorWeight);
 
     @include when(hit) {
       border-color: $--tag-info-color;
     }
 
     .el-tag__close {
-      color: $--tag-info-color;
-    }
-
-    .el-tag__close:hover {
-      background-color: $--tag-info-color;
-      color: $--color-white;
+      color: mix($--tag-info-color, $--color-white, $fontColorWeight);
+      &:hover {
+        color: $--color-white;
+        background-color: mix($--tag-info-color, $--color-white, $hoverColorWeight);
+      }
     }
   }
 
-  @include m(success) {
-    background-color: $--tag-success-fill;
-    border-color: $--tag-success-border;
-    color: $--tag-success-color;
+  &.el-tag--success {
+    background-color: mix($--tag-success-color, $--color-white, $backgroundColorWeight);
+    border-color: mix($--tag-success-color, $--color-white, $borderColorWeight);
+    color: mix($--tag-success-color, $--color-white, $fontColorWeight);
 
     @include when(hit) {
       border-color: $--tag-success-color;
     }
 
     .el-tag__close {
-      color: $--tag-success-color;
-    }
-
-    .el-tag__close:hover {
-      background-color: $--tag-success-color;
-      color: $--color-white;
+      color: mix($--tag-success-color, $--color-white, $fontColorWeight);
+      &:hover {
+        color: $--color-white;
+        background-color: mix($--tag-success-color, $--color-white, $hoverColorWeight);
+      }
     }
   }
 
-  @include m(warning) {
-    background-color: $--tag-warning-fill;
-    border-color: $--tag-warning-border;
-    color: $--tag-warning-color;
+  &.el-tag--warning {
+    background-color: mix($--tag-warning-color, $--color-white, $backgroundColorWeight);
+    border-color: mix($--tag-warning-color, $--color-white, $borderColorWeight);
+    color: mix($--tag-warning-color, $--color-white, $fontColorWeight);
 
     @include when(hit) {
       border-color: $--tag-warning-color;
     }
 
     .el-tag__close {
-      color: $--tag-warning-color;
-    }
-
-    .el-tag__close:hover {
-      background-color: $--tag-warning-color;
-      color: $--color-white;
+      color: mix($--tag-warning-color, $--color-white, $fontColorWeight);
+      &:hover {
+        color: $--color-white;
+        background-color: mix($--tag-warning-color, $--color-white, $hoverColorWeight);
+      }
     }
   }
 
-  @include m(danger) {
-    background-color: $--tag-danger-fill;
-    border-color: $--tag-danger-border;
-    color: $--tag-danger-color;
+  &.el-tag--danger {
+    background-color: mix($--tag-danger-color, $--color-white, $backgroundColorWeight);
+    border-color: mix($--tag-danger-color, $--color-white, $borderColorWeight);
+    color: mix($--tag-danger-color, $--color-white, $fontColorWeight);
 
     @include when(hit) {
       border-color: $--tag-danger-color;
     }
 
     .el-tag__close {
-      color: $--tag-danger-color;
+      color: mix($--tag-danger-color, $--color-white, $fontColorWeight);
+      &:hover {
+        color: $--color-white;
+        background-color: mix($--tag-danger-color, $--color-white, $hoverColorWeight);
+      }
     }
+  }
+}
 
-    .el-tag__close:hover {
-      background-color: $--tag-danger-color;
-      color: $--color-white;
+@include b(tag) {
+  @include genTheme(10%, 20%, 100%, 100%);
+  display: inline-block;
+  height: 32px;
+  padding: $--tag-padding;
+  line-height: 30px;
+  font-size: $--tag-font-size;
+  color: $--tag-primary-color;
+  border-width: 1px;
+  border-style: solid;
+  border-radius: $--tag-border-radius;
+  box-sizing: border-box;
+  white-space: nowrap;
+
+  .el-icon-close {
+    border-radius: 50%;
+    text-align: center;
+    position: relative;
+    cursor: pointer;
+    font-size: 12px;
+    height: 16px;
+    width: 16px;
+    line-height: 16px;
+    vertical-align: middle;
+    top: -1px;
+    right: -5px;
+
+    &::before {
+      display: block;
     }
   }
 
+  @include m(dark) {
+    @include genTheme(100%, 100%, 0, 80%);
+  }
+
+  @include m(plain) {
+    @include genTheme(0, 40%, 100%, 100%);
+  }
+
   @include m(medium) {
     height: 28px;
     line-height: 26px;
diff --git a/packages/theme-chalk/src/timeline-item.scss b/packages/theme-chalk/src/timeline-item.scss
new file mode 100644
index 00000000000..9deb600944f
--- /dev/null
+++ b/packages/theme-chalk/src/timeline-item.scss
@@ -0,0 +1,149 @@
+@import "mixins/mixins";
+@import "common/var";
+
+@include b(timeline-item) {
+  position: relative;
+  padding-bottom: 20px;
+
+  @include e(wrapper) {
+    position: relative;
+    padding-left: 28px;
+    top: -3px;
+  }
+
+  @include e(horizontal){
+    position: relative;
+  }
+
+  @include e(tail) {
+    position: absolute;
+    left: 4px;
+    height: 100%;
+    border-left: 2px solid $--timeline-node-color;
+  }
+
+  @include e(icon) {
+    color: $--color-white;
+    font-size: $--font-size-small;
+  }
+
+  @include e(node) {
+    position: absolute;
+    background-color: $--timeline-node-color;
+    border-radius: 50%;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+
+    @include m(normal) {
+      left: -1px;
+      width: $--timeline-node-size-normal;
+      height: $--timeline-node-size-normal;
+    }
+    @include m(large) {
+      left: -2px;
+      width: $--timeline-node-size-large;
+      height: $--timeline-node-size-large;
+    }
+
+    @include m(primary) {
+      background-color: $--color-primary;
+    }
+    @include m(success) {
+      background-color: $--color-success;
+    }
+    @include m(warning) {
+      background-color: $--color-warning;
+    }
+    @include m(danger) {
+      background-color: $--color-danger;
+    }
+    @include m(info) {
+      background-color: $--color-info;
+    }
+  }
+
+  @include e(dot) {
+    position: absolute;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+  }
+
+  @include e(content) {
+    color: $--color-text-primary;
+  }
+
+  @include e(timestamp) {
+    color: $--color-text-secondary;
+    line-height: 1;
+    font-size: $--font-size-small;
+
+    @include when(top) {
+      margin-bottom: 8px;
+      padding-top: 4px;
+    }
+    @include when(bottom) {
+      margin-top: 8px;
+    }
+  }
+  
+  &.is-horizontal {
+    padding-bottom: 0;
+    padding-right: 20px;
+
+    @include e(wrapper){
+      & > .el-timeline-item__horizontal{
+        & > {
+          @include e(tail) {
+            left: 0;
+            top: 5px;
+            border-left: 0;
+            height: 0;
+            width: calc(100% + 20px + 28px);
+            border-bottom: 2px solid $--timeline-node-color;
+          }
+    
+          @include e(node) {
+    
+            @include m(normal) {
+              left: 50%;
+              transform: translateX(-50%);
+            }
+
+            @include m(large) {
+              left: 50%;
+              transform: translateX(-50%);
+            }
+          }
+        }
+      }
+    }
+
+    @include e(horizontal){
+      display: block;
+      margin-bottom: 28px;
+    }
+  
+    @include e(dot) {
+      position: absolute;
+      display: flex;
+      justify-content: center;
+      align-items: center;
+    }
+
+    @include e(content) {
+      margin-bottom: 8px;
+    }
+  
+    @include e(timestamp) {  
+      @include when(top) {
+        margin-bottom: 8px;
+        padding-top: 4px;
+      }
+      @include when(bottom) {
+        margin-top: 8px;
+      }
+    }
+  }
+}
diff --git a/packages/theme-chalk/src/timeline.scss b/packages/theme-chalk/src/timeline.scss
new file mode 100644
index 00000000000..58b39287777
--- /dev/null
+++ b/packages/theme-chalk/src/timeline.scss
@@ -0,0 +1,56 @@
+@import "mixins/mixins";
+@import "common/var";
+
+@include b(timeline) {
+  margin: 0;
+  font-size: $--font-size-base;
+  list-style: none;
+
+  &.is-horizontal{
+    display: flex;
+
+    & > .el-timeline-item{
+      & > .el-timeline-item__wrapper{
+        text-align:center;
+      }
+    }
+
+    & > .el-timeline-item:first-child{
+      .el-timeline-item__wrapper{
+        & > .el-timeline-item__horizontal{
+          & > {
+            .el-timeline-item__tail{
+              width: calc(50% + 20px + 28px);
+              left: 50%;
+            }
+          }
+        }
+      }
+    }
+
+    & .el-timeline-item:last-child {
+      .el-timeline-item__wrapper{
+        & > .el-timeline-item__horizontal{
+          & > {
+            .el-timeline-item__tail{
+              width: 50%;
+            }
+          }
+        }
+      }
+
+      & .el-timeline-item__tail {
+        display: block;
+      }
+    }
+  }
+
+  &.is-vertical{
+    & .el-timeline-item.is-vertical:last-child {
+    & .el-timeline-item__tail {
+      display: none;
+    }
+  }
+  }
+  
+}
diff --git a/packages/theme-chalk/src/transfer.scss b/packages/theme-chalk/src/transfer.scss
index e231fd05462..7334cdf6c63 100644
--- a/packages/theme-chalk/src/transfer.scss
+++ b/packages/theme-chalk/src/transfer.scss
@@ -100,6 +100,7 @@
 
     & + .el-transfer-panel__item {
       margin-left: 0;
+      display: block!important;
     }
 
     &.el-checkbox {
@@ -155,7 +156,7 @@
   .el-transfer-panel__header {
     height: $--transfer-panel-header-height;
     line-height: $--transfer-panel-header-height;
-    background: $--transfer-panel-header-background;
+    background: $--transfer-panel-header-background-color;
     margin: 0;
     padding-left: 15px;
     border-bottom: 1px solid $--transfer-border-color;
diff --git a/packages/theme-chalk/src/tree.scss b/packages/theme-chalk/src/tree.scss
index 3d4e4775bad..c3b18de1816 100644
--- a/packages/theme-chalk/src/tree.scss
+++ b/packages/theme-chalk/src/tree.scss
@@ -7,7 +7,7 @@
   position: relative;
   cursor: default;
   background: $--color-white;
-  color: $--tree-text-color;
+  color: $--tree-font-color;
 
   @include e(empty-block) {
     position: relative;
@@ -22,7 +22,8 @@
     left: 50%;
     top: 50%;
     transform: translate(-50%, -50%);
-    color: mix($--color-primary, rgb(158, 68, 0), 50%);
+    color: $--color-text-secondary;
+    font-size: $--font-size-base;
   }
 
   @include e(drop-indicator) {
@@ -39,7 +40,7 @@
   outline: none;
   &:focus { /* focus */
     > .el-tree-node__content {
-      background-color: $--tree-node-hover-color;
+      background-color: $--tree-node-hover-background-color;
     }
   }
 
@@ -59,11 +60,11 @@
     & > .el-tree-node__expand-icon {
       padding: 6px;
     }
-    & > .el-checkbox {
+    & > label.el-checkbox {
       margin-right: 8px;
     }
     &:hover {
-      background-color: $--tree-node-hover-color;
+      background-color: $--tree-node-hover-background-color;
     }
 
     .el-tree.is-dragging & {
diff --git a/packages/theme-chalk/src/upload.scss b/packages/theme-chalk/src/upload.scss
index 1ca2b37e2cb..aebbc1cd598 100644
--- a/packages/theme-chalk/src/upload.scss
+++ b/packages/theme-chalk/src/upload.scss
@@ -431,6 +431,7 @@
       position: relative;
       z-index: 1;
       margin-left: -80px;
+      background-color: $--color-white
     }
 
     .el-upload-list__item-name {
diff --git a/packages/timeline-item/index.js b/packages/timeline-item/index.js
new file mode 100644
index 00000000000..a9e52459621
--- /dev/null
+++ b/packages/timeline-item/index.js
@@ -0,0 +1,8 @@
+import ElTimelineItem from '../timeline/src/item';
+
+/* istanbul ignore next */
+ElTimelineItem.install = function(Vue) {
+  Vue.component(ElTimelineItem.name, ElTimelineItem);
+};
+
+export default ElTimelineItem;
diff --git a/packages/timeline/index.js b/packages/timeline/index.js
new file mode 100644
index 00000000000..ddfa6da000a
--- /dev/null
+++ b/packages/timeline/index.js
@@ -0,0 +1,8 @@
+import Timeline from './src/main';
+
+/* istanbul ignore next */
+Timeline.install = function(Vue) {
+  Vue.component(Timeline.name, Timeline);
+};
+
+export default Timeline;
diff --git a/packages/timeline/src/dot.vue b/packages/timeline/src/dot.vue
new file mode 100644
index 00000000000..f5c423cb294
--- /dev/null
+++ b/packages/timeline/src/dot.vue
@@ -0,0 +1,33 @@
+<template>
+  <div
+    class="el-timeline-item__node"
+    :class="[
+      `el-timeline-item__node--${size || ''}`,
+      `el-timeline-item__node--${type || ''}`
+    ]"
+    :style="{
+      backgroundColor: color
+    }"
+  >
+    <i v-if="icon" class="el-timeline-item__icon" :class="icon"></i>
+  </div>
+</template>
+
+<script>
+export default {
+  name: 'ElTimelineDot',
+
+  props: {
+    size: {
+      type: String,
+      default: 'normal'
+    },
+
+    type: String,
+
+    color: String,
+
+    icon: String
+  }
+};
+</script>
diff --git a/packages/timeline/src/item.vue b/packages/timeline/src/item.vue
new file mode 100644
index 00000000000..ecb4623baf6
--- /dev/null
+++ b/packages/timeline/src/item.vue
@@ -0,0 +1,155 @@
+<template>
+  <li class="el-timeline-item" :class="[
+    'is-' + timeline.direction
+  ]">
+    
+    <div
+      v-if="timeline.direction==='vertical'"
+      class="el-timeline-item__tail el-timeline-item__vertical"
+    ></div>
+
+    <el-timeline-dot
+      v-if="!$slots.dot && timeline.direction==='vertical'"
+      class="el-timeline-item__vertical"
+      :type="type"
+      :color="color"
+      :icon="icon"
+      :size="size"
+    ></el-timeline-dot>
+    <div v-if="$slots.dot && timeline.direction==='vertical'" class="el-timeline-item__dot">
+      <slot name="dot"></slot>
+    </div>
+
+    <component :is="renderTimelineWrapper"></component>
+  </li>
+</template>
+
+<script>
+import ElTimelineDot from './dot';
+// 不能使用utils的isEqual，会出问题
+import isEqual from 'lodash.isequal';
+export default {
+  name: 'ElTimelineItem',
+
+  inject: ['timeline'],
+
+  components: {
+    ElTimelineDot
+  },
+
+  props: {
+    timestamp: String,
+
+    hideTimestamp: {
+      type: Boolean,
+      default: false
+    },
+
+    placement: {
+      type: String,
+      default: 'bottom'
+    },
+
+    type: String,
+
+    color: String,
+
+    size: {
+      type: String,
+      default: 'normal'
+    },
+
+    icon: String
+  },
+
+  data() {
+    return {
+      defaultContent: null,
+      timestampContent: null,
+      dotContent: null
+    };
+  },
+
+  computed: {
+    renderTimelineStroke() {
+      const slotDot = this.dotContent || this.$slots.dot;
+      const { type, color, icon, size } = this;
+      return (
+        <div class='el-timeline-item__horizontal'>
+          <div class='el-timeline-item__tail'></div>
+          {slotDot ? (
+            <div class='el-timeline-item__dot'>{slotDot}</div>
+          ) : (
+            <el-timeline-dot
+              type={type}
+              color={color}
+              icon={icon}
+              size={size}
+            ></el-timeline-dot>
+          )}
+        </div>
+      );
+    },
+
+    renderTimeStamp() {
+      const slotTimestamp = this.timestampContent || this.$slots.timestamp;
+      const { hideTimestamp, placement, timestamp } = this;
+      const timestampContent = slotTimestamp || timestamp;
+      return hideTimestamp ? '' : (
+        <div class={'el-timeline-item__timestamp is-' + placement}>
+          {timestampContent}
+        </div>
+      );
+    },
+
+    renderTimelineWrapper() {
+      const slotDefault = this.defaultContent || this.$slots.default;
+      const direction = this.timeline.direction;
+      const { placement } = this;
+      const timestampContent = this.renderTimeStamp;
+      const renderTimelineStroke = (direction === 'horizontal'
+        ? this.renderTimelineStroke
+        : '');
+      const timelineContent = (
+        <div class='el-timeline-item__content'>{slotDefault}</div>
+      );
+      const contents = [
+        timelineContent,
+        renderTimelineStroke,
+        timestampContent
+      ];
+      if (placement === 'top') {
+        contents.reverse();
+      }
+
+      return {
+        render() {
+          return (
+            <div class='el-timeline-item__wrapper'>{contents}</div>
+          );
+        }
+      };
+    }
+  },
+
+  methods: {
+    updateSlotsRender() {
+      if (!isEqual(this.$slots.default, this.defaultContent)) {
+        this.defaultContent = this.$slots.default;
+      }
+
+      if (!isEqual(this.$slots.timestamp, this.timestampContent)) {
+        this.timestampContent = this.$slots.timestamp;
+      }
+
+      if (!isEqual(this.$slots.dot, this.dotContent)) {
+        this.dotContent = this.$slots.dot;
+      }
+    }
+  },
+
+  beforeUpdate() {
+    this.updateSlotsRender();
+  }
+};
+</script>
diff --git a/packages/timeline/src/main.vue b/packages/timeline/src/main.vue
new file mode 100644
index 00000000000..94b5a6d3e2d
--- /dev/null
+++ b/packages/timeline/src/main.vue
@@ -0,0 +1,40 @@
+<script>
+  export default {
+    name: 'ElTimeline',
+
+    props: {
+      reverse: {
+        type: Boolean,
+        default: false
+      },
+      direction: {
+        type: String,
+        default: 'vertical'
+      }
+    },
+
+    provide() {
+      return {
+        timeline: this
+      };
+    },
+
+    render() {
+      const reverse = this.reverse;
+      const direction = this.direction;
+      const classes = {
+        'el-timeline': true,
+        'is-reverse': reverse,
+        'is-horizontal': direction === 'horizontal',
+        'is-vertical': direction === 'vertical'
+      };
+      let slots = this.$slots.default || [];
+      if (reverse) {
+        slots = slots.reverse();
+      }
+      return (<ul class={ classes }>
+        { slots }
+      </ul>);
+    }
+  };
+</script>
diff --git a/packages/tooltip/src/main.js b/packages/tooltip/src/main.js
index e465c708be4..6b700bba8f3 100644
--- a/packages/tooltip/src/main.js
+++ b/packages/tooltip/src/main.js
@@ -1,7 +1,6 @@
 import Popper from 'element-ui/src/utils/vue-popper';
 import debounce from 'throttle-debounce/debounce';
 import { addClass, removeClass, on, off } from 'element-ui/src/utils/dom';
-import { getFirstComponentChild } from 'element-ui/src/utils/vdom';
 import { generateId } from 'element-ui/src/utils/util';
 import Vue from 'vue';
 
@@ -49,20 +48,20 @@ export default {
     hideAfter: {
       type: Number,
       default: 0
+    },
+    tabindex: {
+      type: Number,
+      default: 0
     }
   },
 
   data() {
     return {
+      tooltipId: `el-tooltip-${generateId()}`,
       timeoutPending: null,
       focusing: false
     };
   },
-  computed: {
-    tooltipId() {
-      return `el-tooltip-${generateId()}`;
-    }
-  },
   beforeCreate() {
     if (this.$isServer) return;
 
@@ -98,23 +97,20 @@ export default {
         </transition>);
     }
 
-    if (!this.$slots.default || !this.$slots.default.length) return this.$slots.default;
+    const firstElement = this.getFirstElement();
+    if (!firstElement) return null;
 
-    const vnode = getFirstComponentChild(this.$slots.default);
+    const data = firstElement.data = firstElement.data || {};
+    data.staticClass = this.addTooltipClass(data.staticClass);
 
-    if (!vnode) return vnode;
-
-    const data = vnode.data = vnode.data || {};
-    data.staticClass = this.concatClass(data.staticClass, 'el-tooltip');
-
-    return vnode;
+    return firstElement;
   },
 
   mounted() {
     this.referenceElm = this.$el;
     if (this.$el.nodeType === 1) {
       this.$el.setAttribute('aria-describedby', this.tooltipId);
-      this.$el.setAttribute('tabindex', 0);
+      this.$el.setAttribute('tabindex', this.tabindex);
       on(this.referenceElm, 'mouseenter', this.show);
       on(this.referenceElm, 'mouseleave', this.hide);
       on(this.referenceElm, 'focus', () => {
@@ -132,6 +128,14 @@ export default {
       on(this.referenceElm, 'blur', this.handleBlur);
       on(this.referenceElm, 'click', this.removeFocusing);
     }
+    // fix issue https://github.com/ElemeFE/element/issues/14424
+    if (this.value && this.popperVM) {
+      this.popperVM.$nextTick(() => {
+        if (this.value) {
+          this.updatePopper();
+        }
+      });
+    }
   },
   watch: {
     focusing(val) {
@@ -164,9 +168,12 @@ export default {
       this.focusing = false;
     },
 
-    concatClass(a, b) {
-      if (a && a.indexOf(b) > -1) return a;
-      return a ? b ? (a + ' ' + b) : a : (b || '');
+    addTooltipClass(prev) {
+      if (!prev) {
+        return 'el-tooltip';
+      } else {
+        return 'el-tooltip ' + prev.replace('el-tooltip', '');
+      }
     },
 
     handleShowPopper() {
@@ -202,15 +209,33 @@ export default {
         clearTimeout(this.timeoutPending);
       }
       this.expectedState = expectedState;
+    },
+
+    getFirstElement() {
+      const slots = this.$slots.default;
+      if (!Array.isArray(slots)) return null;
+      let element = null;
+      for (let index = 0; index < slots.length; index++) {
+        if (slots[index] && slots[index].tag) {
+          element = slots[index];
+        };
+      }
+      return element;
     }
   },
 
+  beforeDestroy() {
+    this.popperVM && this.popperVM.$destroy();
+  },
+
   destroyed() {
     const reference = this.referenceElm;
-    off(reference, 'mouseenter', this.show);
-    off(reference, 'mouseleave', this.hide);
-    off(reference, 'focus', this.handleFocus);
-    off(reference, 'blur', this.handleBlur);
-    off(reference, 'click', this.removeFocusing);
+    if (reference.nodeType === 1) {
+      off(reference, 'mouseenter', this.show);
+      off(reference, 'mouseleave', this.hide);
+      off(reference, 'focus', this.handleFocus);
+      off(reference, 'blur', this.handleBlur);
+      off(reference, 'click', this.removeFocusing);
+    }
   }
 };
diff --git a/packages/tree/src/mixin/node.js b/packages/tree/src/mixin/node.js
new file mode 100644
index 00000000000..9c785071826
--- /dev/null
+++ b/packages/tree/src/mixin/node.js
@@ -0,0 +1,116 @@
+import { getNodeKey } from '../model/util';
+
+export default {
+  methods: {
+    creator(parent, nodeTag) {
+      const node = this[nodeTag];
+
+      if (parent.isTree) {
+        this.tree = parent;
+      } else {
+        this.tree = parent.tree;
+      }
+
+      const tree = this.tree;
+      if (!tree) {
+        console.warn('Can not find node\'s tree.');
+      }
+
+      const props = tree.props || {};
+      const childrenKey = props['children'] || 'children';
+
+      this.$watch(`${nodeTag}.data.${childrenKey}`, () => {
+        node.updateChildren();
+      });
+
+      if (node.expanded) {
+        this.expanded = true;
+        this.childNodeRendered = true;
+      }
+
+      if (this.tree.accordion) {
+        this.$on('tree-node-expand', currentNode => {
+          if (node !== currentNode) {
+            node.collapse();
+          }
+        });
+      }
+    },
+
+    getNodeKey(node) {
+      return getNodeKey(this.tree.nodeKey, node.data);
+    },
+
+    handleSelectChange(checked, indeterminate) {
+      const node = this.node || this.source;
+
+      if (this.oldChecked !== checked && this.oldIndeterminate !== indeterminate) {
+        this.tree.$emit('check-change', node.data, checked, indeterminate);
+      }
+      this.oldChecked = checked;
+      this.indeterminate = indeterminate;
+    },
+
+    handleClick() {
+      const node = this.node || this.source;
+      const store = this.tree.store;
+
+      store.setCurrentNode(node);
+      this.tree.$emit('current-change', store.currentNode ? store.currentNode.data : null, store.currentNode);
+      this.tree.currentNode = this;
+      if (this.tree.expandOnClickNode) {
+        this.handleExpandIconClick();
+      }
+      if (this.tree.checkOnClickNode && !node.disabled) {
+        this.handleCheckChange(null, {
+          target: { checked: !node.checked }
+        });
+      }
+
+      this.tree.$emit('node-click', node.data, node, this);
+    },
+
+    handleContextMenu(event) {
+      const node = this.node || this.source;
+
+      if (this.tree._events['node-contextmenu'] && this.tree._events['node-contextmenu'].length > 0) {
+        event.stopPropagation();
+        event.preventDefault();
+      }
+      this.tree.$emit('node-contextmenu', event, node.data, node, this);
+    },
+
+    handleExpandIconClick() {
+      const node = this.node || this.source;
+
+      if (node.isLeaf) return;
+      if (this.expanded) {
+        this.tree.$emit('node-collapse', node.data, node, this);
+        node.collapse();
+      } else {
+        node.expand();
+        this.$emit('node-expand', node.data, node, this);
+      }
+    },
+
+    handleCheckChange(_, ev) {
+      const node = this.node || this.source;
+
+      node.setChecked(ev.target.checked, !this.tree.checkStrictly);
+      this.$nextTick(() => {
+        const store = this.tree.store;
+        this.tree.$emit('check', node.data, {
+          checkedNodes: store.getCheckedNodes(),
+          checkedKeys: store.getCheckedKeys(),
+          halfCheckedNodes: store.getHalfCheckedNodes(),
+          halfCheckedKeys: store.getHalfCheckedKeys()
+        });
+      });
+    },
+
+    handleChildNodeExpand(nodeData, node, instance) {
+      this.broadcast('ElTreeNode', 'tree-node-expand', node);
+      this.tree.$emit('node-expand', nodeData, node, instance);
+    }
+  }
+};
diff --git a/packages/tree/src/model/node.js b/packages/tree/src/model/node.js
index 8e62a709de8..657b3b82be9 100644
--- a/packages/tree/src/model/node.js
+++ b/packages/tree/src/model/node.js
@@ -1,5 +1,6 @@
 import objectAssign from 'element-ui/src/utils/merge';
 import { markNodeData, NODE_KEY } from './util';
+import { arrayFindIndex } from 'element-ui/src/utils/util';
 
 export const getChildState = node => {
   let all = true;
@@ -71,6 +72,7 @@ export default class Node {
     this.expanded = false;
     this.parent = null;
     this.visible = true;
+    this.isCurrent = false;
 
     for (let name in options) {
       if (options.hasOwnProperty(name)) {
@@ -123,6 +125,7 @@ export default class Node {
 
     if (key && store.currentNodeKey !== undefined && this.key === store.currentNodeKey) {
       store.currentNode = this;
+      store.currentNode.isCurrent = true;
     }
 
     if (store.lazy) {
@@ -433,8 +436,10 @@ export default class Node {
     const newNodes = [];
 
     newData.forEach((item, index) => {
-      if (item[NODE_KEY]) {
-        newDataMap[item[NODE_KEY]] = { index, data: item };
+      const key = item[NODE_KEY];
+      const isNodeExists = !!key && arrayFindIndex(oldData, data => data[NODE_KEY] === key) >= 0;
+      if (isNodeExists) {
+        newDataMap[key] = { index, data: item };
       } else {
         newNodes.push({ index, data: item });
       }
@@ -465,7 +470,6 @@ export default class Node {
         this.doCreateChildren(children, defaultProps);
 
         this.updateLeafState();
-        reInitChecked(this);
         if (callback) {
           callback.call(this, children);
         }
diff --git a/packages/tree/src/model/tree-store.js b/packages/tree/src/model/tree-store.js
index 0bdf2528c4b..d0bcd3ea5f4 100644
--- a/packages/tree/src/model/tree-store.js
+++ b/packages/tree/src/model/tree-store.js
@@ -44,10 +44,7 @@ export default class TreeStore {
 
       if (!node.visible && childNodes.length) {
         let allHidden = true;
-
-        childNodes.forEach((child) => {
-          if (child.visible) allHidden = false;
-        });
+        allHidden = !childNodes.some(child => child.visible);
 
         if (node.root) {
           node.root.visible = allHidden === false;
@@ -91,7 +88,11 @@ export default class TreeStore {
 
   remove(data) {
     const node = this.getNode(data);
+
     if (node && node.parent) {
+      if (node === this.currentNode) {
+        this.currentNode = null;
+      }
       node.parent.removeChild(node);
     }
   }
@@ -310,8 +311,13 @@ export default class TreeStore {
     return this.currentNode;
   }
 
-  setCurrentNode(node) {
-    this.currentNode = node;
+  setCurrentNode(currentNode) {
+    const prevCurrentNode = this.currentNode;
+    if (prevCurrentNode) {
+      prevCurrentNode.isCurrent = false;
+    }
+    this.currentNode = currentNode;
+    this.currentNode.isCurrent = true;
   }
 
   setUserCurrentNode(node) {
@@ -321,13 +327,14 @@ export default class TreeStore {
   }
 
   setCurrentNodeKey(key) {
-    if (key === null) {
+    if (key === null || key === undefined) {
+      this.currentNode && (this.currentNode.isCurrent = false);
       this.currentNode = null;
       return;
     }
     const node = this.getNode(key);
     if (node) {
-      this.currentNode = node;
+      this.setCurrentNode(node);
     }
   }
 };
diff --git a/packages/tree/src/tree-node.vue b/packages/tree/src/tree-node.vue
index b77c5697fd3..74027f26700 100644
--- a/packages/tree/src/tree-node.vue
+++ b/packages/tree/src/tree-node.vue
@@ -6,7 +6,7 @@
     v-show="node.visible"
     :class="{
       'is-expanded': expanded,
-      'is-current': tree.store.currentNode === node,
+      'is-current': node.isCurrent,
       'is-hidden': !node.visible,
       'is-focusable': !node.disabled,
       'is-checked': !node.disabled && node.checked
@@ -61,6 +61,7 @@
           :render-content="renderContent"
           v-for="child in node.childNodes"
           :render-after-expand="renderAfterExpand"
+          :show-checkbox="showCheckbox"
           :key="getNodeKey(child)"
           :node="child"
           @node-expand="handleChildNodeExpand">
@@ -74,6 +75,7 @@
   import ElCollapseTransition from 'element-ui/src/transitions/collapse-transition';
   import ElCheckbox from 'element-ui/packages/checkbox';
   import emitter from 'element-ui/src/mixins/emitter';
+  import mixinNode from './mixin/node';
   import { getNodeKey } from './model/util';
 
   export default {
@@ -81,7 +83,7 @@
 
     componentName: 'ElTreeNode',
 
-    mixins: [emitter],
+    mixins: [emitter, mixinNode],
 
     props: {
       node: {
@@ -94,6 +96,10 @@
       renderAfterExpand: {
         type: Boolean,
         default: true
+      },
+      showCheckbox: {
+        type: Boolean,
+        default: false
       }
     },
 
@@ -127,7 +133,6 @@
         tree: null,
         expanded: false,
         childNodeRendered: false,
-        showCheckbox: false,
         oldChecked: null,
         oldIndeterminate: null
       };
@@ -151,71 +156,6 @@
     },
 
     methods: {
-      getNodeKey(node) {
-        return getNodeKey(this.tree.nodeKey, node.data);
-      },
-
-      handleSelectChange(checked, indeterminate) {
-        if (this.oldChecked !== checked && this.oldIndeterminate !== indeterminate) {
-          this.tree.$emit('check-change', this.node.data, checked, indeterminate);
-        }
-        this.oldChecked = checked;
-        this.indeterminate = indeterminate;
-      },
-
-      handleClick() {
-        const store = this.tree.store;
-        store.setCurrentNode(this.node);
-        this.tree.$emit('current-change', store.currentNode ? store.currentNode.data : null, store.currentNode);
-        this.tree.currentNode = this;
-        if (this.tree.expandOnClickNode) {
-          this.handleExpandIconClick();
-        }
-        if (this.tree.checkOnClickNode && !this.node.disabled) {
-          this.handleCheckChange(null, {
-            target: { checked: !this.node.checked }
-          });
-        }
-        this.tree.$emit('node-click', this.node.data, this.node, this);
-      },
-
-      handleContextMenu(event) {
-        if (this.tree._events['node-contextmenu'] && this.tree._events['node-contextmenu'].length > 0) {
-          event.stopPropagation();
-          event.preventDefault();
-        }
-        this.tree.$emit('node-contextmenu', event, this.node.data, this.node, this);
-      },
-
-      handleExpandIconClick() {
-        if (this.node.isLeaf) return;
-        if (this.expanded) {
-          this.tree.$emit('node-collapse', this.node.data, this.node, this);
-          this.node.collapse();
-        } else {
-          this.node.expand();
-          this.$emit('node-expand', this.node.data, this.node, this);
-        }
-      },
-
-      handleCheckChange(value, ev) {
-        this.node.setChecked(ev.target.checked, !this.tree.checkStrictly);
-        this.$nextTick(() => {
-          const store = this.tree.store;
-          this.tree.$emit('check', this.node.data, {
-            checkedNodes: store.getCheckedNodes(),
-            checkedKeys: store.getCheckedKeys(),
-            halfCheckedNodes: store.getHalfCheckedNodes(),
-            halfCheckedKeys: store.getHalfCheckedKeys(),
-          });
-        });
-      },
-
-      handleChildNodeExpand(nodeData, node, instance) {
-        this.broadcast('ElTreeNode', 'tree-node-expand', node);
-        this.tree.$emit('node-expand', nodeData, node, instance);
-      },
-
       handleDragStart(event) {
         if (!this.tree.draggable) return;
         this.tree.$emit('tree-node-drag-start', event, this);
@@ -239,39 +179,7 @@
 
     created() {
       const parent = this.$parent;
-
-      if (parent.isTree) {
-        this.tree = parent;
-      } else {
-        this.tree = parent.tree;
-      }
-
-      const tree = this.tree;
-      if (!tree) {
-        console.warn('Can not find node\'s tree.');
-      }
-
-      const props = tree.props || {};
-      const childrenKey = props['children'] || 'children';
-
-      this.$watch(`node.data.${childrenKey}`, () => {
-        this.node.updateChildren();
-      });
-
-      this.showCheckbox = tree.showCheckbox;
-
-      if (this.node.expanded) {
-        this.expanded = true;
-        this.childNodeRendered = true;
-      }
-
-      if(this.tree.accordion) {
-        this.$on('tree-node-expand', node => {
-          if(this.node !== node) {
-            this.node.collapse();
-          }
-        });
-      }
+      this.creator(parent, 'node');
     }
   };
 </script>
diff --git a/packages/tree/src/tree-virtual-node.vue b/packages/tree/src/tree-virtual-node.vue
new file mode 100644
index 00000000000..0d918424264
--- /dev/null
+++ b/packages/tree/src/tree-virtual-node.vue
@@ -0,0 +1,131 @@
+<template>
+  <div
+    class="el-tree-node"
+    @click.stop="handleClick"
+    @contextmenu="($event) => this.handleContextMenu($event)"
+    v-show="source.visible"
+    :class="{
+      'is-expanded': expanded,
+      'is-current': source.isCurrent,
+      'is-hidden': !source.visible,
+      'is-focusable': !source.disabled,
+      'is-checked': !source.disabled && source.checked
+    }"
+    role="treeitem"
+    tabindex="-1"
+    :aria-expanded="expanded"
+    :aria-disabled="source.disabled"
+    :aria-checked="source.checked"
+    ref="node"
+  >
+    <div class="el-tree-node__content">
+      <span aria-hidden="true" :style="{ 'width': (source.level - 1) * tree.indent + 'px' }"></span>
+      <span
+        @click.stop="handleExpandIconClick"
+        :class="[
+          { 'is-leaf': source.isLeaf, expanded: !source.isLeaf && expanded },
+          'el-tree-node__expand-icon',
+          tree.iconClass ? tree.iconClass : 'el-icon-caret-right'
+        ]"
+      >
+      </span>
+      <el-checkbox
+        v-if="showCheckbox"
+        v-model="source.checked"
+        :indeterminate="source.indeterminate"
+        :disabled="!!source.disabled"
+        @click.native.stop
+        @change="handleCheckChange"
+      >
+      </el-checkbox>
+      <span
+        v-if="source.loading"
+        class="el-tree-node__loading-icon el-icon-loading">
+      </span>
+      <node-content :node="source"></node-content>
+    </div>
+  </div>
+</template>
+
+<script type="text/jsx">
+  import ElCheckbox from 'element-ui/packages/checkbox';
+  import emitter from 'element-ui/src/mixins/emitter';
+  import mixinNode from './mixin/node';
+  import { getNodeKey } from './model/util';
+
+  export default {
+    name: 'ElTreeVirtualNode',
+    componentName: 'ElTreeVirtualNode',
+
+    mixins: [emitter, mixinNode],
+
+    props: {
+      source: {
+        default() {
+          return {};
+        }
+      },
+      renderContent: Function,
+      showCheckbox: {
+        type: Boolean,
+        default: false
+      }
+    },
+
+    components: {
+      ElCheckbox,
+      NodeContent: {
+        props: {
+          node: {
+            required: true
+          }
+        },
+        render(h) {
+          const parent = this.$parent;
+          const tree = parent.tree;
+          const node = this.node;
+          const { data, store } = node;
+          return (
+            parent.renderContent
+              ? parent.renderContent.call(parent._renderProxy, h, { _self: tree.$vnode.context, node, data, store })
+              : tree.$scopedSlots.default
+                ? tree.$scopedSlots.default({ node, data })
+                : <span class="el-tree-node__label">{ node.label }</span>
+          );
+        }
+      }
+    },
+
+    data() {
+      return {
+        tree: null,
+        expanded: false,
+        childNodeRendered: false,
+        oldChecked: null,
+        oldIndeterminate: null
+      };
+    },
+
+    watch: {
+      'source.indeterminate'(val) {
+        this.handleSelectChange(this.source.checked, val);
+      },
+
+      'source.checked'(val) {
+        this.handleSelectChange(val, this.source.indeterminate);
+      },
+
+      'source.expanded'(val) {
+        this.$nextTick(() => this.expanded = val);
+        if (val) {
+          this.childNodeRendered = true;
+        }
+      }
+    },
+
+    created() {
+      const parent = this.$parent.$parent.$parent;
+      this.creator(parent, 'source');
+    }
+  };
+</script>
diff --git a/packages/tree/src/tree.vue b/packages/tree/src/tree.vue
index a5cae37a55d..d69cac99965 100644
--- a/packages/tree/src/tree.vue
+++ b/packages/tree/src/tree.vue
@@ -9,11 +9,25 @@
     }"
     role="tree"
   >
+    <virtual-list v-if="height" :style="{ height: height + 'px', 'overflow-y': 'auto' }"
+      :data-key="getNodeKey"
+      :data-sources="visibleList"
+      :data-component="itemComponent"
+      :keeps="Math.ceil(height / 22) + extraLine"
+      :extra-props="{
+        renderAfterExpand,
+        showCheckbox,
+        renderContent,
+        onNodeExpand: handleNodeExpand
+      }"
+    />
     <el-tree-node
+      v-else
       v-for="child in root.childNodes"
       :node="child"
       :props="props"
       :render-after-expand="renderAfterExpand"
+      :show-checkbox="showCheckbox"
       :key="getNodeKey(child)"
       :render-content="renderContent"
       @node-expand="handleNodeExpand">
@@ -31,8 +45,10 @@
 
 <script>
   import TreeStore from './model/tree-store';
+  import VirtualList from 'vue-virtual-scroll-list';
   import { getNodeKey, findNearestComponent } from './model/util';
   import ElTreeNode from './tree-node.vue';
+  import ElVirtualNode from './tree-virtual-node.vue';
   import {t} from 'element-ui/src/locale';
   import emitter from 'element-ui/src/mixins/emitter';
   import { addClass, removeClass } from 'element-ui/src/utils/dom';
@@ -43,6 +59,7 @@
     mixins: [emitter],
 
     components: {
+      VirtualList,
       ElTreeNode
     },
 
@@ -58,7 +75,8 @@
           draggingNode: null,
           dropNode: null,
           allowDrop: true
-        }
+        },
+        itemComponent: ElVirtualNode
       };
     },
 
@@ -127,7 +145,15 @@
         type: Number,
         default: 18
       },
-      iconClass: String
+      iconClass: String,
+      height: {
+        type: Number,
+        default: 0
+      },
+      extraLine: {
+        type: Number,
+        default: 8
+      }
     },
 
     computed: {
@@ -147,6 +173,10 @@
       isEmpty() {
         const { childNodes } = this.root;
         return !childNodes || childNodes.length === 0 || childNodes.every(({visible}) => !visible);
+      },
+
+      visibleList() {
+        return this.flattenTree(this.root.childNodes);
       }
     },
 
@@ -176,6 +206,16 @@
     },
 
     methods: {
+      flattenTree(datas) {
+        return datas.reduce((conn, data) => {
+          conn.push(data);
+          if (data.expanded && data.childNodes.length) {
+            conn.push(...this.flattenTree(data.childNodes));
+          }
+
+          return conn;
+        }, []);
+      },
       filter(value) {
         if (!this.filterNodeMethod) throw new Error('[Tree] filterNodeMethod is required when filter');
         this.store.filter(value);
diff --git a/packages/upload/src/index.vue b/packages/upload/src/index.vue
index e050524bafd..e73565359fe 100644
--- a/packages/upload/src/index.vue
+++ b/packages/upload/src/index.vue
@@ -122,6 +122,20 @@ export default {
   },
 
   watch: {
+    listType(type) {
+      if (type === 'picture-card' || type === 'picture') {
+        this.uploadFiles = this.uploadFiles.map(file => {
+          if (!file.url && file.raw) {
+            try {
+              file.url = URL.createObjectURL(file.raw);
+            } catch (err) {
+              console.error('[Element Error][Upload]', err);
+            }
+          }
+          return file;
+        });
+      }
+    },
     fileList: {
       immediate: true,
       handler(fileList) {
@@ -262,6 +276,15 @@ export default {
           files={this.uploadFiles}
           on-remove={this.handleRemove}
           handlePreview={this.onPreview}>
+          {
+            (props) => {
+              if (this.$scopedSlots.file) {
+                return this.$scopedSlots.file({
+                  file: props.file
+                });
+              }
+            }
+          }
         </UploadList>
       );
     }
diff --git a/packages/upload/src/upload-list.vue b/packages/upload/src/upload-list.vue
index ce9e7c2605a..7178d4fbbe0 100644
--- a/packages/upload/src/upload-list.vue
+++ b/packages/upload/src/upload-list.vue
@@ -18,45 +18,47 @@
       @blur="focusing = false"
       @click="focusing = false"
     >
-      <img
-        class="el-upload-list__item-thumbnail"
-        v-if="file.status !== 'uploading' && ['picture-card', 'picture'].indexOf(listType) > -1"
-        :src="file.url" alt=""
-      >
-      <a class="el-upload-list__item-name" @click="handleClick(file)">
-        <i class="el-icon-document"></i>{{file.name}}
-      </a>
-      <label class="el-upload-list__item-status-label">
-        <i :class="{
-          'el-icon-upload-success': true,
-          'el-icon-circle-check': listType === 'text',
-          'el-icon-check': ['picture-card', 'picture'].indexOf(listType) > -1
-        }"></i>
-      </label>
-      <i class="el-icon-close" v-if="!disabled" @click="$emit('remove', file)"></i>
-      <i class="el-icon-close-tip" v-if="!disabled">{{ t('el.upload.deleteTip') }}</i> <!--因为close按钮只在li:focus的时候 display, li blur后就不存在了，所以键盘导航时永远无法 focus到 close按钮上-->
-      <el-progress
-        v-if="file.status === 'uploading'"
-        :type="listType === 'picture-card' ? 'circle' : 'line'"
-        :stroke-width="listType === 'picture-card' ? 6 : 2"
-        :percentage="parsePercentage(file.percentage)">
-      </el-progress>
-      <span class="el-upload-list__item-actions" v-if="listType === 'picture-card'">
-        <span
-          class="el-upload-list__item-preview"
-          v-if="handlePreview && listType === 'picture-card'"
-          @click="handlePreview(file)"
+      <slot :file="file">
+        <img
+          class="el-upload-list__item-thumbnail"
+          v-if="file.status !== 'uploading' && ['picture-card', 'picture'].indexOf(listType) > -1"
+          :src="file.url" alt=""
         >
-          <i class="el-icon-zoom-in"></i>
+        <a class="el-upload-list__item-name" @click="handleClick(file)">
+          <i class="el-icon-document"></i>{{file.name}}
+        </a>
+        <label class="el-upload-list__item-status-label">
+          <i :class="{
+            'el-icon-upload-success': true,
+            'el-icon-circle-check': listType === 'text',
+            'el-icon-check': ['picture-card', 'picture'].indexOf(listType) > -1
+          }"></i>
+        </label>
+        <i class="el-icon-close" v-if="!disabled" @click="$emit('remove', file)"></i>
+        <i class="el-icon-close-tip" v-if="!disabled">{{ t('el.upload.deleteTip') }}</i> <!--因为close按钮只在li:focus的时候 display, li blur后就不存在了，所以键盘导航时永远无法 focus到 close按钮上-->
+        <el-progress
+          v-if="file.status === 'uploading'"
+          :type="listType === 'picture-card' ? 'circle' : 'line'"
+          :stroke-width="listType === 'picture-card' ? 6 : 2"
+          :percentage="parsePercentage(file.percentage)">
+        </el-progress>
+        <span class="el-upload-list__item-actions" v-if="listType === 'picture-card'">
+          <span
+            class="el-upload-list__item-preview"
+            v-if="handlePreview && listType === 'picture-card'"
+            @click="handlePreview(file)"
+          >
+            <i class="el-icon-zoom-in"></i>
+          </span>
+          <span
+            v-if="!disabled"
+            class="el-upload-list__item-delete"
+            @click="$emit('remove', file)"
+          >
+            <i class="el-icon-delete"></i>
+          </span>
         </span>
-        <span
-          v-if="!disabled"
-          class="el-upload-list__item-delete"
-          @click="$emit('remove', file)"
-        >
-          <i class="el-icon-delete"></i>
-        </span>
-      </span>
+      </slot>
     </li>
   </transition-group>
 </template>
diff --git a/postcss.config.js b/postcss.config.js
deleted file mode 100644
index 6c2f7489924..00000000000
--- a/postcss.config.js
+++ /dev/null
@@ -1,20 +0,0 @@
-module.exports = {
-  plugins: {
-    'postcss-salad': {
-      browsers: ['ie > 8', 'last 2 versions'],
-      features: {
-        bem: {
-          shortcuts: {
-            component: 'b',
-            modifier: 'm',
-            descendent: 'e'
-          },
-          separators: {
-            descendent: '__',
-            modifier: '--'
-          }
-        }
-      }
-    }
-  }
-};
diff --git a/publish-theme.sh b/publish-theme.sh
new file mode 100755
index 00000000000..be816e7444d
--- /dev/null
+++ b/publish-theme.sh
@@ -0,0 +1,4 @@
+#! /bin/sh
+yarn build:theme
+cd packages/theme-chalk
+npm publish 
diff --git a/src/directives/repeat-click.js b/src/directives/repeat-click.js
index 32094c6e9b1..9aaef3addf5 100644
--- a/src/directives/repeat-click.js
+++ b/src/directives/repeat-click.js
@@ -6,7 +6,7 @@ export default {
     let startTime;
     const handler = () => vnode.context[binding.expression].apply();
     const clear = () => {
-      if (new Date() - startTime < 100) {
+      if (Date.now() - startTime < 100) {
         handler();
       }
       clearInterval(interval);
@@ -15,7 +15,7 @@ export default {
 
     on(el, 'mousedown', (e) => {
       if (e.button !== 0) return;
-      startTime = new Date();
+      startTime = Date.now();
       once(document, 'mouseup', clear);
       clearInterval(interval);
       interval = setInterval(handler, 100);
diff --git a/src/index.js b/src/index.js
index 066d23577fe..476b7f00d86 100644
--- a/src/index.js
+++ b/src/index.js
@@ -69,6 +69,39 @@ import Header from '../packages/header/index.js';
 import Aside from '../packages/aside/index.js';
 import Main from '../packages/main/index.js';
 import Footer from '../packages/footer/index.js';
+import Timeline from '../packages/timeline/index.js';
+import TimelineItem from '../packages/timeline-item/index.js';
+import Link from '../packages/link/index.js';
+import Divider from '../packages/divider/index.js';
+import Image from '../packages/image/index.js';
+import Calendar from '../packages/calendar/index.js';
+import Backtop from '../packages/backtop/index.js';
+import InfiniteScroll from '../packages/infinite-scroll/index.js';
+import PageHeader from '../packages/page-header/index.js';
+import CascaderPanel from '../packages/cascader-panel/index.js';
+import Avatar from '../packages/avatar/index.js';
+import Drawer from '../packages/drawer/index.js';
+import Popconfirm from '../packages/popconfirm/index.js';
+import LrContainer from '../packages/lr-container/index.js';
+import LoadingButton from '../packages/loading-button/index.js';
+import MessageBoxCenter from '../packages/message-box-center/index.js';
+import TabsDotted from '../packages/tabs-dotted/index.js';
+import DataMapper from '../packages/data-mapper/index.js';
+import CheckboxImgButton from '../packages/checkbox-img-button/index.js';
+import RadioImgButton from '../packages/radio-img-button/index.js';
+import IconCheckbox from '../packages/icon-checkbox/index.js';
+import StatusSteps from '../packages/status-steps/index.js';
+import Panel from '../packages/panel/index.js';
+import Skeleton from '../packages/skeleton/index.js';
+import Empty from '../packages/empty/index.js';
+import Affix from '../packages/affix/index.js';
+import InputIdCard from '../packages/input-id-card/index.js';
+import InputPhone from '../packages/input-phone/index.js';
+import InputEmail from '../packages/input-email/index.js';
+import SwitchEnhance from '../packages/switch-enhance/index.js';
+import InputUrl from '../packages/input-url/index.js';
+import EditTable from '../packages/edit-table/index.js';
+import ButtonGroupEnhance from '../packages/button-group-enhance/index.js';
 import locale from 'element-ui/src/locale';
 import CollapseTransition from 'element-ui/src/transitions/collapse-transition';
 
@@ -138,6 +171,37 @@ const components = [
   Aside,
   Main,
   Footer,
+  Timeline,
+  TimelineItem,
+  Link,
+  Divider,
+  Image,
+  Calendar,
+  Backtop,
+  PageHeader,
+  CascaderPanel,
+  Avatar,
+  Drawer,
+  Popconfirm,
+  LrContainer,
+  LoadingButton,
+  TabsDotted,
+  DataMapper,
+  CheckboxImgButton,
+  RadioImgButton,
+  IconCheckbox,
+  StatusSteps,
+  Panel,
+  Skeleton,
+  Empty,
+  Affix,
+  InputIdCard,
+  InputPhone,
+  InputEmail,
+  SwitchEnhance,
+  InputUrl,
+  EditTable,
+  ButtonGroupEnhance,
   CollapseTransition
 ];
 
@@ -149,6 +213,7 @@ const install = function(Vue, opts = {}) {
     Vue.component(component.name, component);
   });
 
+  Vue.use(InfiniteScroll);
   Vue.use(Loading.directive);
 
   Vue.prototype.$ELEMENT = {
@@ -163,6 +228,8 @@ const install = function(Vue, opts = {}) {
   Vue.prototype.$prompt = MessageBox.prompt;
   Vue.prototype.$notify = Notification;
   Vue.prototype.$message = Message;
+  Vue.prototype.$alertCenter = MessageBoxCenter.alert;
+  Vue.prototype.$confirmCenter = MessageBoxCenter.confirm;
 
 };
 
@@ -171,8 +238,8 @@ if (typeof window !== 'undefined' && window.Vue) {
   install(window.Vue);
 }
 
-module.exports = {
-  version: '2.4.11',
+export default {
+  version: '2.12.0',
   locale: locale.use,
   i18n: locale.i18n,
   install,
@@ -245,7 +312,38 @@ module.exports = {
   Header,
   Aside,
   Main,
-  Footer
+  Footer,
+  Timeline,
+  TimelineItem,
+  Link,
+  Divider,
+  Image,
+  Calendar,
+  Backtop,
+  InfiniteScroll,
+  PageHeader,
+  CascaderPanel,
+  Avatar,
+  Drawer,
+  Popconfirm,
+  LrContainer,
+  LoadingButton,
+  MessageBoxCenter,
+  TabsDotted,
+  DataMapper,
+  CheckboxImgButton,
+  RadioImgButton,
+  IconCheckbox,
+  StatusSteps,
+  Panel,
+  Skeleton,
+  Empty,
+  Affix,
+  InputIdCard,
+  InputPhone,
+  InputEmail,
+  SwitchEnhance,
+  InputUrl,
+  EditTable,
+  ButtonGroupEnhance
 };
-
-module.exports.default = module.exports;
diff --git a/src/locale/lang/af-ZA.js b/src/locale/lang/af-ZA.js
index 5f09d42e7c9..391be2e329e 100644
--- a/src/locale/lang/af-ZA.js
+++ b/src/locale/lang/af-ZA.js
@@ -67,7 +67,8 @@ export default {
     cascader: {
       noMatch: 'Geen toepaslike data',
       loading: 'Laai',
-      placeholder: 'Kies'
+      placeholder: 'Kies',
+      noData: 'Geen data'
     },
     pagination: {
       goto: 'Gaan na',
@@ -104,6 +105,16 @@ export default {
       filterPlaceholder: 'Voer sleutelwoord in',
       noCheckedFormat: '{total} items',
       hasCheckedFormat: '{checked}/{total} gekies'
+    },
+    image: {
+      error: 'FAILED' // to be translated
+    },
+    pageHeader: {
+      title: 'Back' // to be translated
+    },
+    popconfirm: {
+      confirmButtonText: 'Yes', // to be translated
+      cancelButtonText: 'No' // to be translated
     }
   }
 };
diff --git a/src/locale/lang/ar.js b/src/locale/lang/ar.js
index 251f68d4ed2..bec1800d036 100644
--- a/src/locale/lang/ar.js
+++ b/src/locale/lang/ar.js
@@ -10,17 +10,17 @@ export default {
       cancel: 'إلغاء',
       clear: 'إزالة',
       confirm: 'موافق',
-      selectDate: 'أختر التاريخ',
-      selectTime: 'أختر الوقت',
+      selectDate: 'إختر التاريخ',
+      selectTime: 'إختر الوقت',
       startDate: 'تاريخ البدء',
       startTime: 'وقت البدء',
-      endDate: 'تاريخ الانتهاء',
-      endTime: 'وقت الانتهاء',
-      prevYear: 'Previous Year', // to be translated
-      nextYear: 'Next Year', // to be translated
-      prevMonth: 'Previous Month', // to be translated
-      nextMonth: 'Next Month', // to be translated
-      year: '',
+      endDate: 'تاريخ الإنتهاء',
+      endTime: 'وقت الإنتهاء',
+      prevYear: 'السنة السابقة',
+      nextYear: 'السنة التالية',
+      prevMonth: 'الشهر السابق',
+      nextMonth: 'الشهر التالي',
+      year: 'سنة',
       month1: 'يناير',
       month2: 'فبراير',
       month3: 'مارس',
@@ -62,12 +62,13 @@ export default {
       loading: 'جار التحميل',
       noMatch: 'لايوجد بيانات مطابقة',
       noData: 'لايوجد بيانات',
-      placeholder: 'أختر'
+      placeholder: 'إختر'
     },
     cascader: {
       noMatch: 'لايوجد بيانات مطابقة',
       loading: 'جار التحميل',
-      placeholder: 'أختر'
+      placeholder: 'إختر',
+      noData: 'لايوجد بيانات'
     },
     pagination: {
       goto: 'أذهب إلى',
@@ -76,7 +77,7 @@ export default {
       pageClassifier: ''
     },
     messagebox: {
-      title: 'الرسالة',
+      title: 'العنوان',
       confirm: 'موافق',
       cancel: 'إلغاء',
       error: 'مدخل غير صحيح'
@@ -103,6 +104,16 @@ export default {
       filterPlaceholder: 'ادخل كلمة',
       noCheckedFormat: '{total} عناصر',
       hasCheckedFormat: '{checked}/{total} مختار'
+    },
+    image: {
+      error: 'فشل'
+    },
+    pageHeader: {
+      title: 'عودة'
+    },
+    popconfirm: {
+      confirmButtonText: 'Yes', // to be translated
+      cancelButtonText: 'No' // to be translated
     }
   }
 };
diff --git a/src/locale/lang/bg.js b/src/locale/lang/bg.js
index a8ab931313e..fb5b7bf6f41 100644
--- a/src/locale/lang/bg.js
+++ b/src/locale/lang/bg.js
@@ -67,7 +67,8 @@ export default {
     cascader: {
       noMatch: 'Няма намерени',
       loading: 'Зареждане',
-      placeholder: 'Избери'
+      placeholder: 'Избери',
+      noData: 'Няма данни'
     },
     pagination: {
       goto: 'Иди на',
@@ -104,6 +105,16 @@ export default {
       filterPlaceholder: 'Enter keyword', // to be translated
       noCheckedFormat: '{total} items', // to be translated
       hasCheckedFormat: '{checked}/{total} checked' // to be translated
+    },
+    image: {
+      error: 'FAILED' // to be translated
+    },
+    pageHeader: {
+      title: 'Back' // to be translated
+    },
+    popconfirm: {
+      confirmButtonText: 'Yes', // to be translated
+      cancelButtonText: 'No' // to be translated
     }
   }
 };
diff --git a/src/locale/lang/ca.js b/src/locale/lang/ca.js
index c0ea1542a13..d50361ed9e3 100644
--- a/src/locale/lang/ca.js
+++ b/src/locale/lang/ca.js
@@ -16,11 +16,11 @@ export default {
       startTime: 'Hora Inici',
       endDate: 'Data Final',
       endTime: 'Hora Final',
-      prevYear: 'Previous Year', // to be translated
-      nextYear: 'Next Year', // to be translated
-      prevMonth: 'Previous Month', // to be translated
-      nextMonth: 'Next Month', // to be translated
-      year: 'Any',
+      prevYear: 'Any anterior',
+      nextYear: 'Pròxim Any',
+      prevMonth: 'Mes anterior',
+      nextMonth: 'Pròxim Mes',
+      year: '',
       month1: 'Gener',
       month2: 'Febrer',
       month3: 'Març',
@@ -67,7 +67,8 @@ export default {
     cascader: {
       noMatch: 'No hi ha dades que coincideixin',
       loading: 'Carregant',
-      placeholder: 'Seleccionar'
+      placeholder: 'Seleccionar',
+      noData: 'Sense Dades'
     },
     pagination: {
       goto: 'Anar a',
@@ -81,7 +82,7 @@ export default {
       error: 'Entrada invàlida'
     },
     upload: {
-      deleteTip: 'press delete to remove', // to be translated
+      deleteTip: 'premi eliminar per descartar',
       delete: 'Eliminar',
       preview: 'Vista Prèvia',
       continue: 'Continuar'
@@ -103,6 +104,16 @@ export default {
       filterPlaceholder: 'Introdueix la paraula clau',
       noCheckedFormat: '{total} ítems',
       hasCheckedFormat: '{checked}/{total} seleccionats'
+    },
+    image: {
+      error: 'FAILED' // to be translated
+    },
+    pageHeader: {
+      title: 'Back' // to be translated
+    },
+    popconfirm: {
+      confirmButtonText: 'Yes', // to be translated
+      cancelButtonText: 'No' // to be translated
     }
   }
 };
diff --git a/src/locale/lang/cs-CZ.js b/src/locale/lang/cs-CZ.js
index 6529ac6198e..a2e19ba1c55 100644
--- a/src/locale/lang/cs-CZ.js
+++ b/src/locale/lang/cs-CZ.js
@@ -69,7 +69,8 @@ export default {
     cascader: {
       noMatch: 'Žádná shoda',
       loading: 'Načítání',
-      placeholder: 'Vybrat'
+      placeholder: 'Vybrat',
+      noData: 'Žádná data'
     },
     pagination: {
       goto: 'Jít na',
@@ -106,6 +107,16 @@ export default {
       filterPlaceholder: 'Klíčové slovo',
       noCheckedFormat: '{total} položek',
       hasCheckedFormat: '{checked}/{total} vybráno'
+    },
+    image: {
+      error: 'FAILED' // to be translated
+    },
+    pageHeader: {
+      title: 'Back' // to be translated
+    },
+    popconfirm: {
+      confirmButtonText: 'Yes', // to be translated
+      cancelButtonText: 'No' // to be translated
     }
   }
 };
diff --git a/src/locale/lang/da.js b/src/locale/lang/da.js
index 3501e62ac0a..35a25d7f8ee 100644
--- a/src/locale/lang/da.js
+++ b/src/locale/lang/da.js
@@ -67,7 +67,8 @@ export default {
     cascader: {
       noMatch: 'Ingen matchende data',
       loading: 'Henter',
-      placeholder: 'Vælg'
+      placeholder: 'Vælg',
+      noData: 'Ingen data'
     },
     pagination: {
       goto: 'Gå til',
@@ -103,6 +104,16 @@ export default {
       filterPlaceholder: 'Indtast søgeord',
       noCheckedFormat: '{total} emner',
       hasCheckedFormat: '{checked}/{total} valgt'
+    },
+    image: {
+      error: 'FAILED' // to be translated
+    },
+    pageHeader: {
+      title: 'Back' // to be translated
+    },
+    popconfirm: {
+      confirmButtonText: 'Yes', // to be translated
+      cancelButtonText: 'No' // to be translated
     }
   }
 };
diff --git a/src/locale/lang/de.js b/src/locale/lang/de.js
index 84877c494ac..a3ad3d57636 100644
--- a/src/locale/lang/de.js
+++ b/src/locale/lang/de.js
@@ -69,7 +69,8 @@ export default {
     cascader: {
       noMatch: 'Nichts gefunden.',
       loading: 'Lädt.',
-      placeholder: 'Daten wählen'
+      placeholder: 'Daten wählen',
+      noData: 'Keine Daten'
     },
     pagination: {
       goto: 'Gehe zu',
@@ -105,6 +106,16 @@ export default {
       filterPlaceholder: 'Einträge filtern',
       noCheckedFormat: '{total} Einträge',
       hasCheckedFormat: '{checked}/{total} ausgewählt'
+    },
+    image: {
+      error: 'FAILED' // to be translated
+    },
+    pageHeader: {
+      title: 'Back' // to be translated
+    },
+    popconfirm: {
+      confirmButtonText: 'Yes', // to be translated
+      cancelButtonText: 'No' // to be translated
     }
   }
 };
diff --git a/src/locale/lang/ee.js b/src/locale/lang/ee.js
index 1f7f1af7789..d9d4914e76e 100644
--- a/src/locale/lang/ee.js
+++ b/src/locale/lang/ee.js
@@ -67,7 +67,8 @@ export default {
     cascader: {
       noMatch: 'Sobivad andmed puuduvad',
       loading: 'Laadimine',
-      placeholder: 'Vali'
+      placeholder: 'Vali',
+      noData: 'Andmed puuduvad'
     },
     pagination: {
       goto: 'Mine lehele',
@@ -104,6 +105,16 @@ export default {
       filterPlaceholder: 'Sisesta märksõna',
       noCheckedFormat: '{total} objekti',
       hasCheckedFormat: '{checked}/{total} valitud'
+    },
+    image: {
+      error: 'FAILED' // to be translated
+    },
+    pageHeader: {
+      title: 'Back' // to be translated
+    },
+    popconfirm: {
+      confirmButtonText: 'Yes', // to be translated
+      cancelButtonText: 'No' // to be translated
     }
   }
 };
diff --git a/src/locale/lang/el.js b/src/locale/lang/el.js
index 4eae67fae7e..8722a69d405 100644
--- a/src/locale/lang/el.js
+++ b/src/locale/lang/el.js
@@ -67,7 +67,8 @@ export default {
     cascader: {
       noMatch: 'Δεν βρέθηκαν αποτελέσματα',
       loading: 'Φόρτωση',
-      placeholder: 'Επιλογή'
+      placeholder: 'Επιλογή',
+      noData: 'Χωρίς δεδομένα'
     },
     pagination: {
       goto: 'Μετάβαση σε',
@@ -104,6 +105,16 @@ export default {
       filterPlaceholder: 'Αναζήτηση',
       noCheckedFormat: '{total} Αντικείμενα',
       hasCheckedFormat: '{checked}/{total} επιλεγμένα'
+    },
+    image: {
+      error: 'FAILED' // to be translated
+    },
+    pageHeader: {
+      title: 'Back' // to be translated
+    },
+    popconfirm: {
+      confirmButtonText: 'Yes', // to be translated
+      cancelButtonText: 'No' // to be translated
     }
   }
 };
diff --git a/src/locale/lang/en.js b/src/locale/lang/en.js
index be7f7f8f89e..b096f421db5 100644
--- a/src/locale/lang/en.js
+++ b/src/locale/lang/en.js
@@ -33,7 +33,7 @@ export default {
       month10: 'October',
       month11: 'November',
       month12: 'December',
-      // week: 'week',
+      week: 'week',
       weeks: {
         sun: 'Sun',
         mon: 'Mon',
@@ -67,7 +67,8 @@ export default {
     cascader: {
       noMatch: 'No matching data',
       loading: 'Loading',
-      placeholder: 'Select'
+      placeholder: 'Select',
+      noData: 'No data'
     },
     pagination: {
       goto: 'Go to',
@@ -104,6 +105,16 @@ export default {
       filterPlaceholder: 'Enter keyword', // to be translated
       noCheckedFormat: '{total} items', // to be translated
       hasCheckedFormat: '{checked}/{total} checked' // to be translated
+    },
+    image: {
+      error: 'FAILED'
+    },
+    pageHeader: {
+      title: 'Back' // to be translated
+    },
+    popconfirm: {
+      confirmButtonText: 'Yes',
+      cancelButtonText: 'No'
     }
   }
 };
diff --git a/src/locale/lang/eo.js b/src/locale/lang/eo.js
new file mode 100644
index 00000000000..da1d8decd0c
--- /dev/null
+++ b/src/locale/lang/eo.js
@@ -0,0 +1,120 @@
+export default {
+  el: {
+    colorpicker: {
+      confirm: 'Bone',
+      clear: 'Malplenigi'
+    },
+    datepicker: {
+      now: 'Nun',
+      today: 'Hodiaŭ',
+      cancel: 'Nuligi',
+      clear: 'Malplenigi',
+      confirm: 'Bone',
+      selectDate: 'Elektu daton',
+      selectTime: 'Elektu horon',
+      startDate: 'Komenca Dato',
+      startTime: 'Komenca Horo',
+      endDate: 'Fina Dato',
+      endTime: 'Fina Horo',
+      prevYear: 'Antaŭa Jaro',
+      nextYear: 'Sekva Jaro',
+      prevMonth: 'Antaŭa Monato',
+      nextMonth: 'Sekva Monato',
+      year: 'Jaro',
+      month1: 'Januaro',
+      month2: 'Februaro',
+      month3: 'Marto',
+      month4: 'Aprilo',
+      month5: 'Majo',
+      month6: 'Junio',
+      month7: 'Julio',
+      month8: 'Aŭgusto',
+      month9: 'Septembro',
+      month10: 'Oktobro',
+      month11: 'Novembro',
+      month12: 'Decembro',
+      week: 'Semajno',
+      weeks: {
+        sun: 'Dim',
+        mon: 'Lun',
+        tue: 'Mar',
+        wed: 'Mer',
+        thu: 'Ĵaŭ',
+        fri: 'Ven',
+        sat: 'Sab'
+      },
+      months: {
+        jan: 'Jan',
+        feb: 'Feb',
+        mar: 'Mar',
+        apr: 'Apr',
+        may: 'Maj',
+        jun: 'Jun',
+        jul: 'Jul',
+        aug: 'Aŭg',
+        sep: 'Sep',
+        oct: 'Okt',
+        nov: 'Nov',
+        dec: 'Dec'
+      }
+    },
+    select: {
+      loading: 'Ŝarĝante',
+      noMatch: 'Neniuj kongruaj datumoj',
+      noData: 'Neniuj datumoj',
+      placeholder: 'Bonvolu elekti'
+    },
+    cascader: {
+      noMatch: 'Neniuj kongruaj datumoj',
+      loading: 'Ŝarĝante',
+      placeholder: 'Bonvolu elekti',
+      noData: 'Neniuj datumoj'
+    },
+    pagination: {
+      goto: 'Iru al',
+      pagesize: '/ paĝo',
+      total: 'Entute {total}',
+      pageClassifier: ''
+    },
+    messagebox: {
+      title: 'Mesaĝo',
+      confirm: 'Bone',
+      cancel: 'Nuligi',
+      error: 'Nevalida Enigo!'
+    },
+    upload: {
+      deleteTip: 'Premu "Delete" por forigi',
+      delete: 'Forigi',
+      preview: 'Antaŭrigardi',
+      continue: 'Daŭrigi'
+    },
+    table: {
+      emptyText: 'Neniuj datumoj',
+      confirmFilter: 'Konfirmi',
+      resetFilter: 'Restarigi',
+      clearFilter: 'Ĉiuj',
+      sumText: 'Sumo'
+    },
+    tree: {
+      emptyText: 'Neniuj datumoj'
+    },
+    transfer: {
+      noMatch: 'Neniuj kongruaj datumoj',
+      noData: 'Neniuj datumoj',
+      titles: ['Listo 1', 'Listo 2'],
+      filterPlaceholder: 'Enigu ŝlosilvorton',
+      noCheckedFormat: '{total} elementoj',
+      hasCheckedFormat: '{checked}/{total} elektitaj'
+    },
+    image: {
+      error: 'MALSUKCESIS'
+    },
+    pageHeader: {
+      title: 'Reen'
+    },
+    popconfirm: {
+      confirmButtonText: 'Yes', // to be translated
+      cancelButtonText: 'No' // to be translated
+    }
+  }
+};
diff --git a/src/locale/lang/es.js b/src/locale/lang/es.js
index 6067f427e5d..348a319af97 100644
--- a/src/locale/lang/es.js
+++ b/src/locale/lang/es.js
@@ -67,7 +67,8 @@ export default {
     cascader: {
       noMatch: 'No hay datos que coincidan',
       loading: 'Cargando',
-      placeholder: 'Seleccionar'
+      placeholder: 'Seleccionar',
+      noData: 'Sin datos'
     },
     pagination: {
       goto: 'Ir a',
@@ -103,6 +104,16 @@ export default {
       filterPlaceholder: 'Ingresar palabra clave',
       noCheckedFormat: '{total} artículos',
       hasCheckedFormat: '{checked}/{total} revisados'
+    },
+    image: {
+      error: 'HA FALLADO'
+    },
+    pageHeader: {
+      title: 'Volver'
+    },
+    popconfirm: {
+      confirmButtonText: 'Yes', // to be translated
+      cancelButtonText: 'No' // to be translated
     }
   }
 };
diff --git a/src/locale/lang/eu.js b/src/locale/lang/eu.js
index 8caa109f137..7da9aa4272e 100644
--- a/src/locale/lang/eu.js
+++ b/src/locale/lang/eu.js
@@ -67,7 +67,8 @@ export default {
     cascader: {
       noMatch: 'Bat datorren daturik ez',
       loading: 'Kargatzen',
-      placeholder: 'Hautatu'
+      placeholder: 'Hautatu',
+      noData: 'Daturik ez'
     },
     pagination: {
       goto: 'Joan',
@@ -104,6 +105,16 @@ export default {
       filterPlaceholder: 'Sartu gako-hitza', // to be translated
       noCheckedFormat: '{total} elementu', // to be translated
       hasCheckedFormat: '{checked}/{total} hautatuta' // to be translated
+    },
+    image: {
+      error: 'FAILED' // to be translated
+    },
+    pageHeader: {
+      title: 'Back' // to be translated
+    },
+    popconfirm: {
+      confirmButtonText: 'Yes', // to be translated
+      cancelButtonText: 'No' // to be translated
     }
   }
 };
diff --git a/src/locale/lang/fa.js b/src/locale/lang/fa.js
index 8ffc0e57ba1..3e00457f1ce 100644
--- a/src/locale/lang/fa.js
+++ b/src/locale/lang/fa.js
@@ -67,7 +67,8 @@ export default {
     cascader: {
       noMatch: 'هیچ داده‌ای پیدا نشد',
       loading: 'بارگیری',
-      placeholder: 'انتخاب کنید'
+      placeholder: 'انتخاب کنید',
+      noData: 'اطلاعاتی وجود ندارد'
     },
     pagination: {
       goto: 'برو به',
@@ -104,6 +105,16 @@ export default {
       filterPlaceholder: 'کلید واژه هارو وارد کن',
       noCheckedFormat: '{total} مورد',
       hasCheckedFormat: '{checked} مورد از {total} مورد انتخاب شده است'
+    },
+    image: {
+      error: 'خطا در بارگیری تصویر'
+    },
+    pageHeader: {
+      title: 'بازگشت'
+    },
+    popconfirm: {
+      confirmButtonText: 'Yes', // to be translated
+      cancelButtonText: 'No' // to be translated
     }
   }
 };
diff --git a/src/locale/lang/fi.js b/src/locale/lang/fi.js
index 82844f6babc..9f1e7c72009 100644
--- a/src/locale/lang/fi.js
+++ b/src/locale/lang/fi.js
@@ -16,10 +16,10 @@ export default {
       startTime: 'Aloitusaika',
       endDate: 'Lopetuspäivä',
       endTime: 'Lopetusaika',
-      prevYear: 'Edellinen Vuosi',
-      nextYear: 'Seuraava Vuosi',
-      prevMonth: 'Edellinen Kuukausi',
-      nextMonth: 'Seuraava Kuukausi',
+      prevYear: 'Edellinen vuosi',
+      nextYear: 'Seuraava vuosi',
+      prevMonth: 'Edellinen kuukausi',
+      nextMonth: 'Seuraava kuukausi',
       year: '',
       month1: 'tammikuu',
       month2: 'helmikuu',
@@ -44,18 +44,18 @@ export default {
         sat: 'la'
       },
       months: {
-        jan: 'tam',
-        feb: 'hel',
-        mar: 'maa',
-        apr: 'huh',
-        may: 'tou',
-        jun: 'kes',
-        jul: 'hei',
+        jan: 'tammi',
+        feb: 'helmi',
+        mar: 'maalis',
+        apr: 'huhti',
+        may: 'touko',
+        jun: 'kesä',
+        jul: 'heinä',
         aug: 'elo',
-        sep: 'syy',
-        oct: 'lok',
-        nov: 'mar',
-        dec: 'jou'
+        sep: 'syys',
+        oct: 'loka',
+        nov: 'marras',
+        dec: 'joulu'
       }
     },
     select: {
@@ -67,7 +67,8 @@ export default {
     cascader: {
       noMatch: 'Ei vastaavia tietoja',
       loading: 'Lataa',
-      placeholder: 'Valitse'
+      placeholder: 'Valitse',
+      noData: 'Ei tietoja'
     },
     pagination: {
       goto: 'Mene',
@@ -82,7 +83,7 @@ export default {
       error: 'Virheellinen syöte'
     },
     upload: {
-      deleteTip: 'Lehdistö Poista että poistaa',
+      deleteTip: 'Poista Delete-näppäimellä',
       delete: 'Poista',
       preview: 'Esikatsele',
       continue: 'Jatka'
@@ -101,9 +102,19 @@ export default {
       noMatch: 'Ei vastaavia tietoja',
       noData: 'Ei tietoja',
       titles: ['Luettelo 1', 'Luettelo 2'],
-      filterPlaceholder: 'Kirjoita avainsana',
+      filterPlaceholder: 'Syötä hakusana',
       noCheckedFormat: '{total} kohdetta',
       hasCheckedFormat: '{checked}/{total} valittu'
+    },
+    image: {
+      error: 'FAILED' // to be translated
+    },
+    pageHeader: {
+      title: 'Back' // to be translated
+    },
+    popconfirm: {
+      confirmButtonText: 'Yes', // to be translated
+      cancelButtonText: 'No' // to be translated
     }
   }
 };
diff --git a/src/locale/lang/fr.js b/src/locale/lang/fr.js
index 41ac3f3b6b9..13a31a2e57f 100644
--- a/src/locale/lang/fr.js
+++ b/src/locale/lang/fr.js
@@ -67,7 +67,8 @@ export default {
     cascader: {
       noMatch: 'Aucune correspondance',
       loading: 'Chargement',
-      placeholder: 'Choisir'
+      placeholder: 'Choisir',
+      noData: 'Aucune donnée'
     },
     pagination: {
       goto: 'Aller à',
@@ -103,6 +104,16 @@ export default {
       filterPlaceholder: 'Entrer un mot clef',
       noCheckedFormat: '{total} elements',
       hasCheckedFormat: '{checked}/{total} coché(s)'
+    },
+    image: {
+      error: 'FAILED' // to be translated
+    },
+    pageHeader: {
+      title: 'Back' // to be translated
+    },
+    popconfirm: {
+      confirmButtonText: 'Yes', // to be translated
+      cancelButtonText: 'No' // to be translated
     }
   }
 };
diff --git a/src/locale/lang/he.js b/src/locale/lang/he.js
index 7a5f8ffc44d..c63163cb6fc 100644
--- a/src/locale/lang/he.js
+++ b/src/locale/lang/he.js
@@ -67,7 +67,8 @@ export default {
     cascader: {
       noMatch: 'ללא נתונים מתאימים',
       loading: 'טוען',
-      placeholder: 'בחר'
+      placeholder: 'בחר',
+      noData: 'ללא נתונים'
     },
     pagination: {
       goto: 'עבור ל',
@@ -104,6 +105,16 @@ export default {
       filterPlaceholder: 'הקלד',
       noCheckedFormat: 'פריטים {total}',
       hasCheckedFormat: ' אישור {checked}/{total}'
+    },
+    image: {
+      error: 'FAILED' // to be translated
+    },
+    pageHeader: {
+      title: 'Back' // to be translated
+    },
+    popconfirm: {
+      confirmButtonText: 'Yes', // to be translated
+      cancelButtonText: 'No' // to be translated
     }
   }
 };
diff --git a/src/locale/lang/hr.js b/src/locale/lang/hr.js
new file mode 100644
index 00000000000..9b38016856f
--- /dev/null
+++ b/src/locale/lang/hr.js
@@ -0,0 +1,120 @@
+export default {
+  el: {
+    colorpicker: {
+      confirm: 'OK',
+      clear: 'Očisti'
+    },
+    datepicker: {
+      now: 'Sada',
+      today: 'Danas',
+      cancel: 'Otkaži',
+      clear: 'Očisti',
+      confirm: 'OK',
+      selectDate: 'Odaberi datum',
+      selectTime: 'Odaberi vrijeme',
+      startDate: 'Datum početka',
+      startTime: 'Vrijeme početka',
+      endDate: 'Datum završetka',
+      endTime: 'Vrijeme završetka',
+      prevYear: 'Prethodna godina',
+      nextYear: 'Sljedeća godina',
+      prevMonth: 'Prethodni mjesec',
+      nextMonth: 'Sljedeći mjesec',
+      year: '',
+      month1: 'Siječanj',
+      month2: 'Veljača',
+      month3: 'Ožujak',
+      month4: 'Travanj',
+      month5: 'Svibanj',
+      month6: 'Lipanj',
+      month7: 'Srpanj',
+      month8: 'Kolovoz',
+      month9: 'Rujan',
+      month10: 'Listopad',
+      month11: 'Studeni',
+      month12: 'Prosinac',
+      week: 'tjedan',
+      weeks: {
+        sun: 'Pon',
+        mon: 'Uto',
+        tue: 'Sri',
+        wed: 'Čet',
+        thu: 'Pet',
+        fri: 'Sub',
+        sat: 'Ned'
+      },
+      months: {
+        jan: 'Jan',
+        feb: 'Feb',
+        mar: 'Mar',
+        apr: 'Apr',
+        may: 'May',
+        jun: 'Jun',
+        jul: 'Jul',
+        aug: 'Aug',
+        sep: 'Sep',
+        oct: 'Oct',
+        nov: 'Nov',
+        dec: 'Dec'
+      }
+    },
+    select: {
+      loading: 'Učitavanje',
+      noMatch: 'Nema pronađenih podataka',
+      noData: 'Nema podataka',
+      placeholder: 'Izaberi'
+    },
+    cascader: {
+      noMatch: 'Nema pronađenih podataka',
+      loading: 'Učitavanje',
+      placeholder: 'Izaberi',
+      noData: 'Nema podataka'
+    },
+    pagination: {
+      goto: 'Idi na',
+      pagesize: '/stranica',
+      total: 'Ukupno {total}',
+      pageClassifier: ''
+    },
+    messagebox: {
+      title: 'Poruka',
+      confirm: 'OK',
+      cancel: 'Otkaži',
+      error: 'Pogrešan unos'
+    },
+    upload: {
+      deleteTip: 'pritisnite izbriši za brisanje',
+      delete: 'Izbriši',
+      preview: 'Pregled',
+      continue: 'Nastavak'
+    },
+    table: {
+      emptyText: 'Nema podataka',
+      confirmFilter: 'Potvrdi',
+      resetFilter: 'Resetiraj',
+      clearFilter: 'Sve',
+      sumText: 'Suma'
+    },
+    tree: {
+      emptyText: 'Nema podataka'
+    },
+    transfer: {
+      noMatch: 'Nema pronađenih podataka',
+      noData: 'Nema podataka',
+      titles: ['Lista 1', 'Lista 2'], // to be translated
+      filterPlaceholder: 'Unesite ključnu riječ', // to be translated
+      noCheckedFormat: '{total} stavki', // to be translated
+      hasCheckedFormat: '{checked}/{total} checked' // to be translated
+    },
+    image: {
+      error: 'FAILED' // to be translated
+    },
+    pageHeader: {
+      title: 'Back' // to be translated
+    },
+    popconfirm: {
+      confirmButtonText: 'Yes', // to be translated
+      cancelButtonText: 'No' // to be translated
+    }
+  }
+};
diff --git a/src/locale/lang/hu.js b/src/locale/lang/hu.js
index d1840555a4e..d4c5e7666fa 100644
--- a/src/locale/lang/hu.js
+++ b/src/locale/lang/hu.js
@@ -66,7 +66,8 @@ export default {
     cascader: {
       noMatch: 'Nincs találat',
       loading: 'Betöltés',
-      placeholder: 'Válassz'
+      placeholder: 'Válassz',
+      noData: 'Nincs adat'
     },
     pagination: {
       goto: 'Ugrás',
@@ -103,6 +104,16 @@ export default {
       filterPlaceholder: 'Kulcsszó',
       noCheckedFormat: '{total} elem',
       hasCheckedFormat: '{checked}/{total} kiválasztva'
+    },
+    image: {
+      error: 'FAILED' // to be translated
+    },
+    pageHeader: {
+      title: 'Back' // to be translated
+    },
+    popconfirm: {
+      confirmButtonText: 'Yes', // to be translated
+      cancelButtonText: 'No' // to be translated
     }
   }
 };
diff --git a/src/locale/lang/hy-AM.js b/src/locale/lang/hy-AM.js
new file mode 100644
index 00000000000..f8d55f8daab
--- /dev/null
+++ b/src/locale/lang/hy-AM.js
@@ -0,0 +1,120 @@
+export default {
+  el: {
+    colorpicker: {
+      confirm: 'Լաւ',
+      clear: 'Մաքրել'
+    },
+    datepicker: {
+      now: 'Հիմա',
+      today: 'Այսօր',
+      cancel: 'Չեղարկել',
+      clear: 'Մաքրել',
+      confirm: 'Լաւ',
+      selectDate: 'Ընտրեք ամսաթիւը',
+      selectTime: 'Ընտրեք ժամանակը',
+      startDate: 'Սկզբ. ամսաթիւը',
+      startTime: 'Սկզբ. ժամանակը',
+      endDate: 'Վերջ. ամսաթիվը',
+      endTime: 'Վերջ. ժամանակը',
+      prevYear: 'Նախորդ տարի',
+      nextYear: 'Յաջորդ տարի',
+      prevMonth: 'Նախորդ ամիս',
+      nextMonth: 'Յաջորդ ամիս',
+      year: 'Տարի',
+      month1: 'Յունուար',
+      month2: 'Փետրուար',
+      month3: 'Մարտ',
+      month4: 'Ապրիլ',
+      month5: 'Մայիս',
+      month6: 'Յունիս',
+      month7: 'Յուլիս',
+      month8: 'Օգոստոս',
+      month9: 'Սեպտեմբեր',
+      month10: 'Յոկտեմբեր',
+      month11: 'Նոյեմբեր',
+      month12: 'Դեկտեմբեր',
+      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: 'Ընտրել'
+    },
+    cascader: {
+      noMatch: 'Համապատասխան տուեալներ չկան',
+      loading: 'Բեռնում',
+      placeholder: 'Ընտրել',
+      noData: 'Տվյալներ չկան'
+    },
+    pagination: {
+      goto: 'Անցնել',
+      pagesize: ' էջում',
+      total: 'Ընդամենը {total}',
+      pageClassifier: ''
+    },
+    messagebox: {
+      title: 'Հաղորդագրութիւն',
+      confirm: 'Լաւ',
+      cancel: 'Չեղարկել',
+      error: 'Անվաւեր տուեալների մուտք'
+    },
+    upload: {
+      deleteTip: 'Սեղմեք [Ջնջել] ջնջելու համար',
+      delete: 'Ջնջել',
+      preview: 'Նախադիտում',
+      continue: 'Շարունակել'
+    },
+    table: {
+      emptyText: 'Տուեալներ չկան',
+      confirmFilter: 'Յաստատել',
+      resetFilter: 'Վերագործարկել',
+      clearFilter: 'Բոլորը',
+      sumText: 'Գումարը'
+    },
+    tree: {
+      emptyText: 'Տուեալներ չկան'
+    },
+    transfer: {
+      noMatch: 'Համապատասխան տուեալներ չկան',
+      noData: 'Տուեալներ չկան',
+      titles: ['Ցուցակ 1', 'Ցուցակ 2'],
+      filterPlaceholder: 'Մուտքագրեք բանալի բառ',
+      noCheckedFormat: '{total} միաւոր',
+      hasCheckedFormat: '{checked}/{total} ընտրուած է'
+    },
+    image: {
+      error: 'FAILED' // to be translated
+    },
+    pageHeader: {
+      title: 'Back' // to be translated
+    },
+    popconfirm: {
+      confirmButtonText: 'Yes', // to be translated
+      cancelButtonText: 'No' // to be translated
+    }
+  }
+};
diff --git a/src/locale/lang/id.js b/src/locale/lang/id.js
index 9194b786660..f5249499819 100644
--- a/src/locale/lang/id.js
+++ b/src/locale/lang/id.js
@@ -67,7 +67,8 @@ export default {
     cascader: {
       noMatch: 'Tidak ada data yg cocok',
       loading: 'Memuat',
-      placeholder: 'Pilih'
+      placeholder: 'Pilih',
+      noData: 'Tidak ada data'
     },
     pagination: {
       goto: 'Pergi ke',
@@ -104,6 +105,16 @@ export default {
       filterPlaceholder: 'Masukan kata kunci',
       noCheckedFormat: '{total} butir',
       hasCheckedFormat: '{checked}/{total} terpilih'
+    },
+    image: {
+      error: 'FAILED' // to be translated
+    },
+    pageHeader: {
+      title: 'Back' // to be translated
+    },
+    popconfirm: {
+      confirmButtonText: 'Yes', // to be translated
+      cancelButtonText: 'No' // to be translated
     }
   }
 };
diff --git a/src/locale/lang/it.js b/src/locale/lang/it.js
index 6fa262ad264..40bc974ee34 100644
--- a/src/locale/lang/it.js
+++ b/src/locale/lang/it.js
@@ -67,7 +67,8 @@ export default {
     cascader: {
       noMatch: 'Nessuna corrispondenza',
       loading: 'Caricamento',
-      placeholder: 'Seleziona'
+      placeholder: 'Seleziona',
+      noData: 'Nessun dato'
     },
     pagination: {
       goto: 'Vai a',
@@ -103,6 +104,16 @@ export default {
       filterPlaceholder: 'Inserisci filtro',
       noCheckedFormat: '{total} elementi',
       hasCheckedFormat: '{checked}/{total} selezionati'
+    },
+    image: {
+      error: 'FAILED' // to be translated
+    },
+    pageHeader: {
+      title: 'Back' // to be translated
+    },
+    popconfirm: {
+      confirmButtonText: 'Yes', // to be translated
+      cancelButtonText: 'No' // to be translated
     }
   }
 };
diff --git a/src/locale/lang/ja.js b/src/locale/lang/ja.js
index ff08f1f1cc5..a6b62bef6bd 100644
--- a/src/locale/lang/ja.js
+++ b/src/locale/lang/ja.js
@@ -67,7 +67,8 @@ export default {
     cascader: {
       noMatch: 'データなし',
       loading: 'ロード中',
-      placeholder: '選択してください'
+      placeholder: '選択してください',
+      noData: 'データなし'
     },
     pagination: {
       goto: '',
@@ -104,6 +105,16 @@ export default {
       filterPlaceholder: 'キーワードを入力',
       noCheckedFormat: '総計 {total} 件',
       hasCheckedFormat: '{checked}/{total} を選択した'
+    },
+    image: {
+      error: 'FAILED' // to be translated
+    },
+    pageHeader: {
+      title: 'Back' // to be translated
+    },
+    popconfirm: {
+      confirmButtonText: 'Yes', // to be translated
+      cancelButtonText: 'No' // to be translated
     }
   }
 };
diff --git a/src/locale/lang/kg.js b/src/locale/lang/kg.js
new file mode 100644
index 00000000000..8c8526f6eee
--- /dev/null
+++ b/src/locale/lang/kg.js
@@ -0,0 +1,120 @@
+export default {
+  el: {
+    colorpicker: {
+      confirm: 'Мурунку',
+      clear: 'ачык'
+    },
+    datepicker: {
+      now: 'азыр',
+      today: 'бүгүн',
+      cancel: 'жокко чыгарылды',
+      clear: 'ачык',
+      confirm: 'белгилөө',
+      selectDate: 'дата',
+      selectTime: 'тандоо убактысы',
+      startDate: 'Башталган датасы',
+      startTime: 'Start убакыт',
+      endDate: 'Бүткөн датасы',
+      endTime: 'End убакыт',
+      prevYear: 'өткөн жылы',
+      nextYear: 'бир жылдан кийин',
+      prevMonth: 'Өткөн айда',
+      nextMonth: 'Кийинки ай',
+      year: 'жыл',
+      month1: 'биринчи ай',
+      month2: 'Экинчи айда',
+      month3: 'Үчүнчү айда',
+      month4: 'Төртүнчү айда',
+      month5: 'бешинчи айда',
+      month6: 'Алгачкы алты ай',
+      month7: 'жетинчи айда',
+      month8: 'сегизинчи ай',
+      month9: 'Алгачкы тогуз ай',
+      month10: 'онунчу айда',
+      month11: 'он биринчи ай',
+      month12: 'он экинчи айда',
+      // 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: 'тандоо'
+    },
+    cascader: {
+      noMatch: 'Дал келген маалыматтар',
+      loading: 'Жүктөлүүдө',
+      placeholder: 'тандоо',
+      noData: 'маалымат жок'
+    },
+    pagination: {
+      goto: 'Мурунку',
+      pagesize: 'бир',
+      total: 'бүтүндөй {total} сан ',
+      pageClassifier: 'бет'
+    },
+    messagebox: {
+      title: 'тез',
+      confirm: 'белгилөө',
+      cancel: 'жокко чыгарылды',
+      error: 'Маалыматтарды киргизүү мыйзамдуу эмес!'
+    },
+    upload: {
+      deleteTip: 'Жок кылуу баскычын басуу жок',
+      delete: 'жок кылуу',
+      preview: 'ЖМКнын картинки',
+      continue: 'жүктөп бер'
+    },
+    table: {
+      emptyText: 'маалымат жок',
+      confirmFilter: 'чыпка',
+      resetFilter: 'кайра орнотуу',
+      clearFilter: 'бүткөн',
+      sumText: 'Бардыгы болуп'
+    },
+    tree: {
+      emptyText: 'маалымат жок'
+    },
+    transfer: {
+      noMatch: 'Дал келген маалыматтар',
+      noData: 'маалымат жок',
+      titles: ['1 тизмеси', '2 тизмеси'],
+      filterPlaceholder: 'Сураныч, издөө кирет',
+      noCheckedFormat: 'бүтүндөй {total} сан',
+      hasCheckedFormat: 'Тандалган {checked}/{total} сан'
+    },
+    image: {
+      error: 'FAILED' // to be translated
+    },
+    pageHeader: {
+      title: 'Back' // to be translated
+    },
+    popconfirm: {
+      confirmButtonText: 'Yes', // to be translated
+      cancelButtonText: 'No' // to be translated
+    }
+  }
+};
diff --git a/src/locale/lang/km.js b/src/locale/lang/km.js
index 97d2fc371dc..dfef469c81b 100644
--- a/src/locale/lang/km.js
+++ b/src/locale/lang/km.js
@@ -67,7 +67,8 @@ export default {
     cascader: {
       noMatch: 'គ្មានទិន្ន័យដូច',
       loading: 'កំពុងផ្ទុក',
-      placeholder: 'ជ្រើសរើស'
+      placeholder: 'ជ្រើសរើស',
+      noData: 'គ្មានទិន្ន័យ'
     },
     pagination: {
       goto: 'ទៅកាន់',
@@ -104,6 +105,16 @@ export default {
       filterPlaceholder: 'បញ្ចូលពាក្យ',
       noCheckedFormat: '{total} ធាតុ',
       hasCheckedFormat: '{checked}/{total} បានគូសធីក'
+    },
+    image: {
+      error: 'FAILED' // to be translated
+    },
+    pageHeader: {
+      title: 'Back' // to be translated
+    },
+    popconfirm: {
+      confirmButtonText: 'Yes', // to be translated
+      cancelButtonText: 'No' // to be translated
     }
   }
 };
diff --git a/src/locale/lang/ko.js b/src/locale/lang/ko.js
index d203366c448..b5b4c5ee454 100644
--- a/src/locale/lang/ko.js
+++ b/src/locale/lang/ko.js
@@ -67,7 +67,8 @@ export default {
     cascader: {
       noMatch: '맞는 데이터가 없습니다',
       loading: '불러오는 중',
-      placeholder: '선택'
+      placeholder: '선택',
+      noData: '데이터 없음'
     },
     pagination: {
       goto: '이동',
@@ -104,6 +105,16 @@ export default {
       filterPlaceholder: ' 입력하세요',
       noCheckedFormat: '{total} 항목',
       hasCheckedFormat: '{checked}/{total} 선택됨'
+    },
+    image: {
+      error: 'FAILED' // to be translated
+    },
+    pageHeader: {
+      title: 'Back' // to be translated
+    },
+    popconfirm: {
+      confirmButtonText: 'Yes', // to be translated
+      cancelButtonText: 'No' // to be translated
     }
   }
 };
diff --git a/src/locale/lang/ku.js b/src/locale/lang/ku.js
index 88328ffcb8e..5188ba704f6 100644
--- a/src/locale/lang/ku.js
+++ b/src/locale/lang/ku.js
@@ -67,7 +67,8 @@ export default {
     cascader: {
       noMatch: 'Li hembere ve agahî tune',
       loading: 'Bardibe',
-      placeholder: 'Bibijêre'
+      placeholder: 'Bibijêre',
+      noData: 'Agahî tune'
     },
     pagination: {
       goto: 'Biçe',
@@ -104,6 +105,16 @@ export default {
       filterPlaceholder: 'Binivîse',
       noCheckedFormat: '{total} lib',
       hasCheckedFormat: '{checked}/{total} bijartin'
+    },
+    image: {
+      error: 'FAILED' // to be translated
+    },
+    pageHeader: {
+      title: 'Back' // to be translated
+    },
+    popconfirm: {
+      confirmButtonText: 'Yes', // to be translated
+      cancelButtonText: 'No' // to be translated
     }
   }
 };
diff --git a/src/locale/lang/kz.js b/src/locale/lang/kz.js
index 01c43823e42..acfc8e27e4d 100644
--- a/src/locale/lang/kz.js
+++ b/src/locale/lang/kz.js
@@ -67,7 +67,8 @@ export default {
     cascader: {
       noMatch: 'Сәйкес деректер жоқ',
       loading: 'Жүктелуде',
-      placeholder: 'Таңдаңыз'
+      placeholder: 'Таңдаңыз',
+      noData: 'Деректер жоқ'
     },
     pagination: {
       goto: 'Бару',
@@ -104,6 +105,16 @@ export default {
       filterPlaceholder: 'Кілт сөзді енгізіңіз',
       noCheckedFormat: '{total} элэмэнт',
       hasCheckedFormat: '{checked}/{total} құсбелгісі қойылды'
+    },
+    image: {
+      error: 'FAILED' // to be translated
+    },
+    pageHeader: {
+      title: 'Back' // to be translated
+    },
+    popconfirm: {
+      confirmButtonText: 'Yes', // to be translated
+      cancelButtonText: 'No' // to be translated
     }
   }
 };
diff --git a/src/locale/lang/lt.js b/src/locale/lang/lt.js
index f8cb517541b..988de6b9559 100644
--- a/src/locale/lang/lt.js
+++ b/src/locale/lang/lt.js
@@ -67,7 +67,8 @@ export default {
     cascader: {
       noMatch: 'Duomenų nerasta',
       loading: 'Kraunasi',
-      placeholder: 'Pasirink'
+      placeholder: 'Pasirink',
+      noData: 'Nėra duomenų'
     },
     pagination: {
       goto: 'Eiti į',
@@ -104,6 +105,16 @@ export default {
       filterPlaceholder: 'Įvesk raktažodį',
       noCheckedFormat: 'Viso: {total}',
       hasCheckedFormat: 'Pažymėta {checked} iš {total}'
+    },
+    image: {
+      error: 'FAILED' // to be translated
+    },
+    pageHeader: {
+      title: 'Back' // to be translated
+    },
+    popconfirm: {
+      confirmButtonText: 'Yes', // to be translated
+      cancelButtonText: 'No' // to be translated
     }
   }
 };
diff --git a/src/locale/lang/lv.js b/src/locale/lang/lv.js
index ae4554251d5..b9497ea18b8 100644
--- a/src/locale/lang/lv.js
+++ b/src/locale/lang/lv.js
@@ -67,7 +67,8 @@ export default {
     cascader: {
       noMatch: 'Nav atbilstošu datu',
       loading: 'Ielādē',
-      placeholder: 'Izvēlēties'
+      placeholder: 'Izvēlēties',
+      noData: 'Nav datu'
     },
     pagination: {
       goto: 'Iet uz',
@@ -104,6 +105,16 @@ export default {
       filterPlaceholder: 'Ievadīt atslēgvārdu',
       noCheckedFormat: '{total} vienības',
       hasCheckedFormat: '{checked}/{total} atzīmēti'
+    },
+    image: {
+      error: 'FAILED' // to be translated
+    },
+    pageHeader: {
+      title: 'Back' // to be translated
+    },
+    popconfirm: {
+      confirmButtonText: 'Yes', // to be translated
+      cancelButtonText: 'No' // to be translated
     }
   }
 };
diff --git a/src/locale/lang/mn.js b/src/locale/lang/mn.js
index df563b59922..a0e3f6d6552 100644
--- a/src/locale/lang/mn.js
+++ b/src/locale/lang/mn.js
@@ -67,7 +67,8 @@ export default {
     cascader: {
       noMatch: 'Тохирох өгөгдөл байхгүй',
       loading: 'Ачаалж байна',
-      placeholder: 'Сонгох'
+      placeholder: 'Сонгох',
+      noData: 'Өгөгдөл байхгүй'
     },
     pagination: {
       goto: 'Очих',
@@ -104,6 +105,16 @@ export default {
       filterPlaceholder: 'Утга оруул',
       noCheckedFormat: '{total} өгөгдөл',
       hasCheckedFormat: '{checked}/{total} сонгосон'
+    },
+    image: {
+      error: 'FAILED' // to be translated
+    },
+    pageHeader: {
+      title: 'Back' // to be translated
+    },
+    popconfirm: {
+      confirmButtonText: 'Yes', // to be translated
+      cancelButtonText: 'No' // to be translated
     }
   }
 };
diff --git a/src/locale/lang/nb-NO.js b/src/locale/lang/nb-NO.js
index 91c8ffe7819..843a67e0d26 100644
--- a/src/locale/lang/nb-NO.js
+++ b/src/locale/lang/nb-NO.js
@@ -67,7 +67,8 @@ export default {
     cascader: {
       noMatch: 'Ingen samsvarende data',
       loading: 'Laster',
-      placeholder: 'Velg'
+      placeholder: 'Velg',
+      noData: 'Ingen data'
     },
     pagination: {
       goto: 'Gå til',
@@ -103,6 +104,16 @@ export default {
       filterPlaceholder: 'Enter keyword', // to be translated
       noCheckedFormat: '{total} items', // to be translated
       hasCheckedFormat: '{checked}/{total} checked' // to be translated
+    },
+    image: {
+      error: 'FAILED' // to be translated
+    },
+    pageHeader: {
+      title: 'Back' // to be translated
+    },
+    popconfirm: {
+      confirmButtonText: 'Yes', // to be translated
+      cancelButtonText: 'No' // to be translated
     }
   }
 };
diff --git a/src/locale/lang/nl.js b/src/locale/lang/nl.js
index 6c76f20cee8..6d084318bfc 100644
--- a/src/locale/lang/nl.js
+++ b/src/locale/lang/nl.js
@@ -67,7 +67,8 @@ export default {
     cascader: {
       noMatch: 'Geen overeenkomende resultaten',
       loading: 'Laden',
-      placeholder: 'Selecteer'
+      placeholder: 'Selecteer',
+      noData: 'Geen data'
     },
     pagination: {
       goto: 'Ga naar',
@@ -104,6 +105,16 @@ export default {
       filterPlaceholder: 'Geef zoekwoerd',
       noCheckedFormat: '{total} items',
       hasCheckedFormat: '{checked}/{total} geselecteerd'
+    },
+    image: {
+      error: 'FAILED' // to be translated
+    },
+    pageHeader: {
+      title: 'Back' // to be translated
+    },
+    popconfirm: {
+      confirmButtonText: 'Yes', // to be translated
+      cancelButtonText: 'No' // to be translated
     }
   }
 };
diff --git a/src/locale/lang/pl.js b/src/locale/lang/pl.js
index 8cc5c06f3f4..72af9639733 100644
--- a/src/locale/lang/pl.js
+++ b/src/locale/lang/pl.js
@@ -67,7 +67,8 @@ export default {
     cascader: {
       noMatch: 'Brak dopasowań',
       loading: 'Ładowanie',
-      placeholder: 'Wybierz'
+      placeholder: 'Wybierz',
+      noData: 'Brak danych'
     },
     pagination: {
       goto: 'Idź do',
@@ -104,6 +105,16 @@ export default {
       filterPlaceholder: 'Wpisz szukaną frazę',
       noCheckedFormat: 'razem: {total}',
       hasCheckedFormat: 'wybranych: {checked}/{total}'
+    },
+    image: {
+      error: 'FAILED' // to be translated
+    },
+    pageHeader: {
+      title: 'Back' // to be translated
+    },
+    popconfirm: {
+      confirmButtonText: 'Yes', // to be translated
+      cancelButtonText: 'No' // to be translated
     }
   }
 };
diff --git a/src/locale/lang/pt-br.js b/src/locale/lang/pt-br.js
index 5b0009a4010..6bc2860c9e8 100644
--- a/src/locale/lang/pt-br.js
+++ b/src/locale/lang/pt-br.js
@@ -67,7 +67,8 @@ export default {
     cascader: {
       noMatch: 'Sem resultados',
       loading: 'Carregando',
-      placeholder: 'Selecione'
+      placeholder: 'Selecione',
+      noData: 'Sem dados'
     },
     pagination: {
       goto: 'Ir para',
@@ -104,6 +105,16 @@ export default {
       filterPlaceholder: 'Digite uma palavra-chave',
       noCheckedFormat: '{total} itens',
       hasCheckedFormat: '{checked}/{total} selecionados'
+    },
+    image: {
+      error: 'Erro ao carregar imagem'
+    },
+    pageHeader: {
+      title: 'Voltar'
+    },
+    popconfirm: {
+      confirmButtonText: 'Yes', // to be translated
+      cancelButtonText: 'No' // to be translated
     }
   }
 };
diff --git a/src/locale/lang/pt.js b/src/locale/lang/pt.js
index e8aacad3cfd..722e0a7a845 100644
--- a/src/locale/lang/pt.js
+++ b/src/locale/lang/pt.js
@@ -67,7 +67,8 @@ export default {
     cascader: {
       noMatch: 'Sem correspondência',
       loading: 'A carregar',
-      placeholder: 'Selecione'
+      placeholder: 'Selecione',
+      noData: 'Sem dados'
     },
     pagination: {
       goto: 'Ir para',
@@ -104,6 +105,16 @@ export default {
       filterPlaceholder: 'Enter keyword', // to be translated
       noCheckedFormat: '{total} items', // to be translated
       hasCheckedFormat: '{checked}/{total} checked' // to be translated
+    },
+    image: {
+      error: 'FAILED' // to be translated
+    },
+    pageHeader: {
+      title: 'Back' // to be translated
+    },
+    popconfirm: {
+      confirmButtonText: 'Yes', // to be translated
+      cancelButtonText: 'No' // to be translated
     }
   }
 };
diff --git a/src/locale/lang/ro.js b/src/locale/lang/ro.js
index 16a7ad15b27..3f5646b9673 100644
--- a/src/locale/lang/ro.js
+++ b/src/locale/lang/ro.js
@@ -67,7 +67,8 @@ export default {
     cascader: {
       noMatch: 'Nu există date potrivite',
       loading: 'Se încarcă',
-      placeholder: 'Selectează'
+      placeholder: 'Selectează',
+      noData: 'Nu există date'
     },
     pagination: {
       goto: 'Go to',
@@ -104,6 +105,16 @@ export default {
       filterPlaceholder: 'Introduceți cuvântul cheie',
       noCheckedFormat: '{total} elemente',
       hasCheckedFormat: '{checked}/{total} verificate'
+    },
+    image: {
+      error: 'FAILED' // to be translated
+    },
+    pageHeader: {
+      title: 'Back' // to be translated
+    },
+    popconfirm: {
+      confirmButtonText: 'Yes', // to be translated
+      cancelButtonText: 'No' // to be translated
     }
   }
 };
diff --git a/src/locale/lang/ru-RU.js b/src/locale/lang/ru-RU.js
index e97cb77dc46..d58dec8387b 100644
--- a/src/locale/lang/ru-RU.js
+++ b/src/locale/lang/ru-RU.js
@@ -33,7 +33,7 @@ export default {
       month10: 'Октябрь',
       month11: 'Ноябрь',
       month12: 'Декабрь',
-      // week: 'week',
+      week: 'неделя',
       weeks: {
         sun: 'Вс',
         mon: 'Пн',
@@ -67,7 +67,8 @@ export default {
     cascader: {
       noMatch: 'Совпадений не найдено',
       loading: 'Загрузка',
-      placeholder: 'Выбрать'
+      placeholder: 'Выбрать',
+      noData: 'Нет данных'
     },
     pagination: {
       goto: 'Перейти',
@@ -104,6 +105,16 @@ export default {
       filterPlaceholder: 'Введите ключевое слово',
       noCheckedFormat: '{total} пунктов',
       hasCheckedFormat: '{checked}/{total} выбрано'
+    },
+    image: {
+      error: 'FAILED' // to be translated
+    },
+    pageHeader: {
+      title: 'Back' // to be translated
+    },
+    popconfirm: {
+      confirmButtonText: 'Yes', // to be translated
+      cancelButtonText: 'No' // to be translated
     }
   }
 };
diff --git a/src/locale/lang/sk.js b/src/locale/lang/sk.js
index 0ef62c4e31e..7c7103cb81f 100644
--- a/src/locale/lang/sk.js
+++ b/src/locale/lang/sk.js
@@ -69,7 +69,8 @@ export default {
     cascader: {
       noMatch: 'Žiadna zhoda',
       loading: 'Načítavanie',
-      placeholder: 'Vybrať'
+      placeholder: 'Vybrať',
+      noData: 'Žiadne dáta'
     },
     pagination: {
       goto: 'Choď na',
@@ -106,6 +107,16 @@ export default {
       filterPlaceholder: 'Filtrovať podľa',
       noCheckedFormat: '{total} položiek',
       hasCheckedFormat: '{checked}/{total} označených'
+    },
+    image: {
+      error: 'FAILED' // to be translated
+    },
+    pageHeader: {
+      title: 'Back' // to be translated
+    },
+    popconfirm: {
+      confirmButtonText: 'Yes', // to be translated
+      cancelButtonText: 'No' // to be translated
     }
   }
 };
diff --git a/src/locale/lang/sl.js b/src/locale/lang/sl.js
index f6000a0715e..8c64be8177e 100644
--- a/src/locale/lang/sl.js
+++ b/src/locale/lang/sl.js
@@ -67,7 +67,8 @@ export default {
     cascader: {
       noMatch: 'Ni ustreznih podatkov',
       loading: 'Nalaganje',
-      placeholder: 'Izberi'
+      placeholder: 'Izberi',
+      noData: 'Ni podatkov'
     },
     pagination: {
       goto: 'Pojdi na',
@@ -104,6 +105,16 @@ export default {
       filterPlaceholder: 'Vnesi ključno besedo',
       noCheckedFormat: '{total} elementov',
       hasCheckedFormat: '{checked}/{total} izbranih'
+    },
+    image: {
+      error: 'FAILED' // to be translated
+    },
+    pageHeader: {
+      title: 'Back' // to be translated
+    },
+    popconfirm: {
+      confirmButtonText: 'Yes', // to be translated
+      cancelButtonText: 'No' // to be translated
     }
   }
 };
diff --git a/src/locale/lang/sr.js b/src/locale/lang/sr.js
index fe2f108e718..a64b8aaebac 100644
--- a/src/locale/lang/sr.js
+++ b/src/locale/lang/sr.js
@@ -67,7 +67,8 @@ export default {
     cascader: {
       noMatch: 'Нема резултата',
       loading: 'Учитавање',
-      placeholder: 'Изабери'
+      placeholder: 'Изабери',
+      noData: 'Нема података'
     },
     pagination: {
       goto: 'Иди на',
@@ -104,6 +105,16 @@ export default {
       filterPlaceholder: 'Унеси кључну реч', // to be translated
       noCheckedFormat: '{total} ставки', // to be translated
       hasCheckedFormat: '{checked}/{total} обележених' // to be translated
+    },
+    image: {
+      error: 'FAILED' // to be translated
+    },
+    pageHeader: {
+      title: 'Back' // to be translated
+    },
+    popconfirm: {
+      confirmButtonText: 'Yes', // to be translated
+      cancelButtonText: 'No' // to be translated
     }
   }
 };
diff --git a/src/locale/lang/sv-SE.js b/src/locale/lang/sv-SE.js
index 0be73a0b215..2f0ae4e7b5c 100644
--- a/src/locale/lang/sv-SE.js
+++ b/src/locale/lang/sv-SE.js
@@ -16,11 +16,11 @@ export default {
       startTime: 'Starttid',
       endDate: 'Slutdatum',
       endTime: 'Sluttid',
-      prevYear: 'Previous Year', // to be translated
-      nextYear: 'Next Year', // to be translated
-      prevMonth: 'Previous Month', // to be translated
-      nextMonth: 'Next Month', // to be translated
-      year: 'År',
+      prevYear: 'Föregående år',
+      nextYear: 'Nästa år',
+      prevMonth: 'Föregående månad',
+      nextMonth: 'Nästa månad',
+      year: '',
       month1: 'Januari',
       month2: 'Februari',
       month3: 'Mars',
@@ -67,12 +67,13 @@ export default {
     cascader: {
       noMatch: 'Hittade inget',
       loading: 'Laddar',
-      placeholder: 'Välj'
+      placeholder: 'Välj',
+      noData: 'Ingen data'
     },
     pagination: {
       goto: 'Gå till',
       pagesize: '/sida',
-      total: 'Total {total}',
+      total: 'Totalt {total}',
       pageClassifier: ''
     },
     messagebox: {
@@ -92,10 +93,10 @@ export default {
       confirmFilter: 'Bekräfta',
       resetFilter: 'Återställ',
       clearFilter: 'Alla',
-      sumText: 'Sum' // to be translated
+      sumText: 'Summa'
     },
     tree: {
-      emptyText: 'Inga Data'
+      emptyText: 'Ingen data'
     },
     transfer: {
       noMatch: 'Hittade inget',
@@ -104,6 +105,16 @@ export default {
       filterPlaceholder: 'Enter keyword', // to be translated
       noCheckedFormat: '{total} items', // to be translated
       hasCheckedFormat: '{checked}/{total} checked' // to be translated
+    },
+    image: {
+      error: 'FAILED' // to be translated
+    },
+    pageHeader: {
+      title: 'Bakåt' // to be translated
+    },
+    popconfirm: {
+      confirmButtonText: 'Ja',
+      cancelButtonText: 'Nej'
     }
   }
 };
diff --git a/src/locale/lang/ta.js b/src/locale/lang/ta.js
index 7b458112fdb..2f289298194 100644
--- a/src/locale/lang/ta.js
+++ b/src/locale/lang/ta.js
@@ -66,7 +66,8 @@ export default {
     cascader: {
       noMatch: 'பொருத்தமான தரவு கிடைக்கவில்லை',
       loading: 'தயாராகிக்கொண்டிருக்கிறது',
-      placeholder: 'தேர்வு செய்'
+      placeholder: 'தேர்வு செய்',
+      noData: 'தரவு இல்லை'
     },
     pagination: {
       goto: 'தேவையான் பகுதிக்கு செல்',
@@ -103,6 +104,16 @@ export default {
       filterPlaceholder: 'சொல்லை உள்ளீடு செய்',
       noCheckedFormat: '{total} items', // to be translated
       hasCheckedFormat: '{checked}/{total} தேர்வு செய்யப்பட்டவைகள்'
+    },
+    image: {
+      error: 'FAILED' // to be translated
+    },
+    pageHeader: {
+      title: 'Back' // to be translated
+    },
+    popconfirm: {
+      confirmButtonText: 'Yes', // to be translated
+      cancelButtonText: 'No' // to be translated
     }
   }
 };
diff --git a/src/locale/lang/th.js b/src/locale/lang/th.js
index e45a392e715..a175e7a4082 100644
--- a/src/locale/lang/th.js
+++ b/src/locale/lang/th.js
@@ -16,10 +16,10 @@ export default {
       startTime: 'เวลาเริ่มต้น',
       endDate: 'วันที่สิ้นสุด',
       endTime: 'เวลาสิ้นสุด',
-      prevYear: 'Previous Year', // to be translated
-      nextYear: 'Next Year', // to be translated
-      prevMonth: 'Previous Month', // to be translated
-      nextMonth: 'Next Month', // to be translated
+      prevYear: 'ปีก่อนหน้า',
+      nextYear: 'ปีถัดไป',
+      prevMonth: 'เดือนก่อนหน้า',
+      nextMonth: 'เดือนถัดไป',
       year: 'ปี',
       month1: 'มกราคม',
       month2: 'กุมภาพันธ์',
@@ -67,7 +67,8 @@ export default {
     cascader: {
       noMatch: 'ไม่พบข้อมูลที่ตรงกัน',
       loading: 'กำลังโหลด',
-      placeholder: 'เลือก'
+      placeholder: 'เลือก',
+      noData: 'ไม่พบข้อมูล'
     },
     pagination: {
       goto: 'ไปที่',
@@ -82,7 +83,7 @@ export default {
       error: 'คุณป้อนข้อมูลไม่ถูกต้อง'
     },
     upload: {
-      deleteTip: 'press delete to remove', // to be translated
+      deleteTip: 'กดปุ่ม "ลบ" เพื่อลบออก',
       delete: 'ลบ',
       preview: 'ตัวอย่าง',
       continue: 'ทำต่อ'
@@ -92,7 +93,7 @@ export default {
       confirmFilter: 'ยืนยัน',
       resetFilter: 'รีเซ็ต',
       clearFilter: 'ทั้งหมด',
-      sumText: 'Sum' // to be translated
+      sumText: 'รวม'
     },
     tree: {
       emptyText: 'ไม่พบข้อมูล'
@@ -101,9 +102,19 @@ export default {
       noMatch: 'ไม่พบข้อมูลที่ตรงกัน',
       noData: 'ไม่พบข้อมูล',
       titles: ['List 1', 'List 2'], // to be translated
-      filterPlaceholder: 'Enter keyword', // to be translated
+      filterPlaceholder: 'กรอกคีย์เวิร์ด',
       noCheckedFormat: '{total} items', // to be translated
       hasCheckedFormat: '{checked}/{total} checked' // to be translated
+    },
+    image: {
+      error: 'FAILED' // to be translated
+    },
+    pageHeader: {
+      title: 'ย้อนกลับ'
+    },
+    popconfirm: {
+      confirmButtonText: 'Yes', // to be translated
+      cancelButtonText: 'No' // to be translated
     }
   }
 };
diff --git a/src/locale/lang/tk.js b/src/locale/lang/tk.js
index 6db1e0cbaee..86dc9a6645a 100644
--- a/src/locale/lang/tk.js
+++ b/src/locale/lang/tk.js
@@ -67,7 +67,8 @@ export default {
     cascader: {
       noMatch: 'Hiçzat tapylmady',
       loading: 'Indirilýär',
-      placeholder: 'Saýlaň'
+      placeholder: 'Saýlaň',
+      noData: 'Hiçzat ýok'
     },
     pagination: {
       goto: 'Git',
@@ -104,6 +105,16 @@ export default {
       filterPlaceholder: 'Gözleg sözlerini giriziň',
       noCheckedFormat: '{total} sany',
       hasCheckedFormat: '{checked}/{total} saýlanan'
+    },
+    image: {
+      error: 'FAILED' // to be translated
+    },
+    pageHeader: {
+      title: 'Back' // to be translated
+    },
+    popconfirm: {
+      confirmButtonText: 'Yes', // to be translated
+      cancelButtonText: 'No' // to be translated
     }
   }
 };
diff --git a/src/locale/lang/tr-TR.js b/src/locale/lang/tr-TR.js
index de5e68fb257..1984dbc8752 100644
--- a/src/locale/lang/tr-TR.js
+++ b/src/locale/lang/tr-TR.js
@@ -67,7 +67,8 @@ export default {
     cascader: {
       noMatch: 'Eşleşen veri bulunamadı',
       loading: 'Yükleniyor',
-      placeholder: 'Seç'
+      placeholder: 'Seç',
+      noData: 'Veri yok'
     },
     pagination: {
       goto: 'Git',
@@ -104,6 +105,16 @@ export default {
       filterPlaceholder: 'Anahtar kelimeleri gir',
       noCheckedFormat: '{total} adet',
       hasCheckedFormat: '{checked}/{total} seçildi'
+    },
+    image: {
+      error: 'FAILED' // to be translated
+    },
+    pageHeader: {
+      title: 'Back' // to be translated
+    },
+    popconfirm: {
+      confirmButtonText: 'Yes', // to be translated
+      cancelButtonText: 'No' // to be translated
     }
   }
 };
diff --git a/src/locale/lang/ua.js b/src/locale/lang/ua.js
index c23035e1876..f952fefa3ab 100644
--- a/src/locale/lang/ua.js
+++ b/src/locale/lang/ua.js
@@ -33,7 +33,7 @@ export default {
       month10: 'Жовтень',
       month11: 'Листопад',
       month12: 'Грудень',
-      // week: 'week',
+      week: 'тиждень',
       weeks: {
         sun: 'Нд',
         mon: 'Пн',
@@ -67,7 +67,8 @@ export default {
     cascader: {
       noMatch: 'Співпадінь не знайдено',
       loading: 'Завантаження',
-      placeholder: 'Обрати'
+      placeholder: 'Обрати',
+      noData: 'Немає даних'
     },
     pagination: {
       goto: 'Перейти',
@@ -104,6 +105,16 @@ export default {
       filterPlaceholder: 'Введіть ключове слово',
       noCheckedFormat: '{total} пунктів',
       hasCheckedFormat: '{checked}/{total} вибрано'
+    },
+    image: {
+      error: 'FAILED' // to be translated
+    },
+    pageHeader: {
+      title: 'Back' // to be translated
+    },
+    popconfirm: {
+      confirmButtonText: 'Yes', // to be translated
+      cancelButtonText: 'No' // to be translated
     }
   }
 };
diff --git a/src/locale/lang/ug-CN.js b/src/locale/lang/ug-CN.js
index 6db539251a7..f76a64a64b6 100644
--- a/src/locale/lang/ug-CN.js
+++ b/src/locale/lang/ug-CN.js
@@ -67,7 +67,8 @@ export default {
     cascader: {
       noMatch: 'ئۇچۇر تېپىلمىدى',
       loading: 'يۈكلىنىۋاتىدۇ',
-      placeholder: 'تاللاڭ'
+      placeholder: 'تاللاڭ',
+      noData: 'ئۇچۇر يوق'
     },
     pagination: {
       goto: 'كىيىنكى بەت',
@@ -104,6 +105,16 @@ export default {
       filterPlaceholder: 'ئىزدىمەكچى بولغان مەزمۇننى كىرگۈزۈڭ',
       noCheckedFormat: 'جەمئىي {total} تۈر',
       hasCheckedFormat: 'تاللانغىنى {checked}/{total} تۈر'
+    },
+    image: {
+      error: 'FAILED' // to be translated
+    },
+    pageHeader: {
+      title: 'Back' // to be translated
+    },
+    popconfirm: {
+      confirmButtonText: 'Yes', // to be translated
+      cancelButtonText: 'No' // to be translated
     }
   }
 };
diff --git a/src/locale/lang/uz-UZ.js b/src/locale/lang/uz-UZ.js
new file mode 100644
index 00000000000..39ac99f1a60
--- /dev/null
+++ b/src/locale/lang/uz-UZ.js
@@ -0,0 +1,120 @@
+export default {
+  el: {
+    colorpicker: {
+      confirm: 'Qabul qilish',
+      clear: 'Tozalash'
+    },
+    datepicker: {
+      now: 'Hozir',
+      today: 'Bugun',
+      cancel: 'Bekor qilish',
+      clear: 'Tozalash',
+      confirm: 'Qabul qilish',
+      selectDate: 'Kunni tanlash',
+      selectTime: 'Soatni tanlash',
+      startDate: 'Boshlanish sanasi',
+      startTime: 'Boshlanish vaqti',
+      endDate: 'Tugash sanasi',
+      endTime: 'Tugash vaqti',
+      prevYear: 'Oʻtgan yil',
+      nextYear: 'Kelgusi yil',
+      prevMonth: 'Oʻtgan oy',
+      nextMonth: 'Kelgusi oy',
+      year: 'Yil',
+      month1: 'Yanvar',
+      month2: 'Fevral',
+      month3: 'Mart',
+      month4: 'Aprel',
+      month5: 'May',
+      month6: 'Iyun',
+      month7: 'Iyul',
+      month8: 'Avgust',
+      month9: 'Sentabr',
+      month10: 'Oktabr',
+      month11: 'Noyabr',
+      month12: 'Dekabr',
+      week: 'Hafta',
+      weeks: {
+        sun: 'Yak',
+        mon: 'Dush',
+        tue: 'Sesh',
+        wed: 'Chor',
+        thu: 'Pay',
+        fri: 'Jum',
+        sat: 'Shan'
+      },
+      months: {
+        jan: 'Yan',
+        feb: 'Fev',
+        mar: 'Mar',
+        apr: 'Apr',
+        may: 'May',
+        jun: 'Iyun',
+        jul: 'Iyul',
+        aug: 'Avg',
+        sep: 'Sen',
+        oct: 'Okt',
+        nov: 'Noy',
+        dec: 'Dek'
+      }
+    },
+    select: {
+      loading: 'Yuklanmoqda',
+      noMatch: 'Mos maʼlumot yoʻq',
+      noData: 'Maʼlumot yoʻq',
+      placeholder: 'Tanladizngiz'
+    },
+    cascader: {
+      noMatch: 'Mos maʼlumot topilmadi',
+      loading: 'Yuklanmoqda',
+      placeholder: 'Tanlash',
+      noData: 'Maʼlumot yoʻq'
+    },
+    pagination: {
+      goto: 'Oʻtish',
+      pagesize: '/sahifa',
+      total: 'Barchasi {total} ta',
+      pageClassifier: ''
+    },
+    messagebox: {
+      title: 'Xabar',
+      confirm: 'Qabul qilish',
+      cancel: 'Bekor qilish',
+      error: 'Xatolik'
+    },
+    upload: {
+      deleteTip: 'Oʻchirish tugmasini bosib oʻchiring',
+      delete: 'Oʻchirish',
+      preview: 'Oldin koʻrish',
+      continue: 'Davom qilish'
+    },
+    table: {
+      emptyText: 'Boʻsh',
+      confirmFilter: 'Qabul qilish',
+      resetFilter: 'Oldingi holatga qaytarish',
+      clearFilter: 'Jami',
+      sumText: 'Summasi'
+    },
+    tree: {
+      emptyText: 'Maʼlumot yoʻq'
+    },
+    transfer: {
+      noMatch: 'Mos maʼlumot topilmadi',
+      noData: 'Maʼlumot yoʻq',
+      titles: ['1-jadval', '2-jadval'],
+      filterPlaceholder: 'Kalit soʻzni kiriting',
+      noCheckedFormat: '{total} ta element',
+      hasCheckedFormat: '{checked}/{total} ta belgilandi'
+    },
+    image: {
+      error: 'Xatolik'
+    },
+    pageHeader: {
+      title: 'Orqaga'
+    },
+    popconfirm: {
+      confirmButtonText: 'Yes', // to be translated
+      cancelButtonText: 'No' // to be translated
+    }
+  }
+};
diff --git a/src/locale/lang/vi.js b/src/locale/lang/vi.js
index a09d68e09f2..ad03d056a13 100644
--- a/src/locale/lang/vi.js
+++ b/src/locale/lang/vi.js
@@ -67,7 +67,8 @@ export default {
     cascader: {
       noMatch: 'Dữ liệu không phù hợp',
       loading: 'Đang tải',
-      placeholder: 'Chọn'
+      placeholder: 'Chọn',
+      noData: 'Không tìm thấy dữ liệu'
     },
     pagination: {
       goto: 'Nhảy tới',
@@ -104,6 +105,16 @@ export default {
       filterPlaceholder: 'Nhập từ khóa',
       noCheckedFormat: '{total} mục',
       hasCheckedFormat: '{checked}/{total} đã chọn '
+    },
+    image: {
+      error: 'FAILED' // to be translated
+    },
+    pageHeader: {
+      title: 'Back' // to be translated
+    },
+    popconfirm: {
+      confirmButtonText: 'Yes', // to be translated
+      cancelButtonText: 'No' // to be translated
     }
   }
 };
diff --git a/src/locale/lang/zh-CN.js b/src/locale/lang/zh-CN.js
index 6d25fd24095..cef54779d72 100644
--- a/src/locale/lang/zh-CN.js
+++ b/src/locale/lang/zh-CN.js
@@ -67,7 +67,8 @@ export default {
     cascader: {
       noMatch: '无匹配数据',
       loading: '加载中',
-      placeholder: '请选择'
+      placeholder: '请选择',
+      noData: '暂无数据'
     },
     pagination: {
       goto: '前往',
@@ -104,6 +105,16 @@ export default {
       filterPlaceholder: '请输入搜索内容',
       noCheckedFormat: '共 {total} 项',
       hasCheckedFormat: '已选 {checked}/{total} 项'
+    },
+    image: {
+      error: '加载失败'
+    },
+    pageHeader: {
+      title: '返回'
+    },
+    popconfirm: {
+      confirmButtonText: '确定',
+      cancelButtonText: '取消'
     }
   }
 };
diff --git a/src/locale/lang/zh-TW.js b/src/locale/lang/zh-TW.js
index 03b257289f1..43312be7ead 100644
--- a/src/locale/lang/zh-TW.js
+++ b/src/locale/lang/zh-TW.js
@@ -67,7 +67,8 @@ export default {
     cascader: {
       noMatch: '無匹配資料',
       loading: '加載中',
-      placeholder: '請選擇'
+      placeholder: '請選擇',
+      noData: '無資料'
     },
     pagination: {
       goto: '前往',
@@ -104,6 +105,16 @@ export default {
       filterPlaceholder: 'Enter keyword', // to be translated
       noCheckedFormat: '{total} items', // to be translated
       hasCheckedFormat: '{checked}/{total} checked' // to be translated
+    },
+    image: {
+      error: '加載失敗'
+    },
+    pageHeader: {
+      title: '返回'
+    },
+    popconfirm: {
+      confirmButtonText: 'Yes', // to be translated
+      cancelButtonText: 'No' // to be translated
     }
   }
 };
diff --git a/src/mixins/migrating.js b/src/mixins/migrating.js
index a69a0af35ac..cf7400b5b26 100644
--- a/src/mixins/migrating.js
+++ b/src/mixins/migrating.js
@@ -1,3 +1,4 @@
+import { kebabCase } from 'element-ui/src/utils/util';
 /**
  * Show migrating guide in browser console.
  *
@@ -29,13 +30,15 @@ export default {
     const definedEvents = componentOptions.listeners || {};
 
     for (let propName in definedProps) {
-      if (definedProps.hasOwnProperty(propName) && props[propName]) {
+      propName = kebabCase(propName); // compatible with camel case
+      if (props[propName]) {
         console.warn(`[Element Migrating][${this.$options.name}][Attribute]: ${props[propName]}`);
       }
     }
 
     for (let eventName in definedEvents) {
-      if (definedEvents.hasOwnProperty(eventName) && events[eventName]) {
+      eventName = kebabCase(eventName); // compatible with camel case
+      if (events[eventName]) {
         console.warn(`[Element Migrating][${this.$options.name}][Event]: ${events[eventName]}`);
       }
     }
diff --git a/src/utils/BaseMixin.js b/src/utils/BaseMixin.js
new file mode 100644
index 00000000000..fa65cdfcd28
--- /dev/null
+++ b/src/utils/BaseMixin.js
@@ -0,0 +1,40 @@
+export default {
+  // directives: {
+  //   ref: {
+  //     bind: function (el, binding, vnode) {
+  //       binding.value(vnode.componentInstance ? vnode.componentInstance : vnode.elm)
+  //     },
+  //     update: function (el, binding, vnode) {
+  //       binding.value(vnode.componentInstance ? vnode.componentInstance : vnode.elm)
+  //     },
+  //     unbind: function (el, binding, vnode) {
+  //       binding.value(null)
+  //     },
+  //   },
+  // },
+  methods: {
+    setState(state, callback) {
+      const newState = typeof state === 'function' ? state(this.$data, this.$props) : state;
+      // if (this.getDerivedStateFromProps) {
+      //   Object.assign(newState, this.getDerivedStateFromProps(getOptionProps(this), { ...this.$data, ...newState }, true) || {})
+      // }
+      Object.assign(this.$data, newState);
+      this.$nextTick(() => {
+        callback && callback();
+      });
+    },
+    __emit() {
+      // 直接调用listeners，底层组件不需要vueTool记录events
+      const args = [].slice.call(arguments, 0);
+      const filterEvent = [];
+      const eventName = args[0];
+      if (args.length && this.$listeners[eventName]) {
+        if (filterEvent.includes(eventName)) {
+          this.$emit(eventName, ...args.slice(1));
+        } else {
+          this.$listeners[eventName](...args.slice(1));
+        }
+      }
+    }
+  }
+};
diff --git a/src/utils/aria-utils.js b/src/utils/aria-utils.js
index 2e7f84ce6be..5bccfab1c80 100644
--- a/src/utils/aria-utils.js
+++ b/src/utils/aria-utils.js
@@ -115,7 +115,8 @@ aria.Utils.keys = {
   left: 37,
   up: 38,
   right: 39,
-  down: 40
+  down: 40,
+  esc: 27
 };
 
 export default aria.Utils;
diff --git a/packages/date-picker/src/util/index.js b/src/utils/date-util.js
similarity index 89%
rename from packages/date-picker/src/util/index.js
rename to src/utils/date-util.js
index 7833f3e96a3..1828adfc222 100644
--- a/packages/date-picker/src/util/index.js
+++ b/src/utils/date-util.js
@@ -1,17 +1,8 @@
-import dateUtil from 'element-ui/src/utils/date';
+import fecha from 'element-ui/src/utils/date';
 import { t } from 'element-ui/src/locale';
 
 const weeks = ['sun', 'mon', 'tue', 'wed', 'thu', 'fri', 'sat'];
 const months = ['jan', 'feb', 'mar', 'apr', 'may', 'jun', 'jul', 'aug', 'sep', 'oct', 'nov', 'dec'];
-const getI18nSettings = () => {
-  return {
-    dayNamesShort: weeks.map(week => t(`el.datepicker.weeks.${ week }`)),
-    dayNames: weeks.map(week => t(`el.datepicker.weeks.${ week }`)),
-    monthNamesShort: months.map(month => t(`el.datepicker.months.${ month }`)),
-    monthNames: months.map((month, index) => t(`el.datepicker.month${ index + 1 }`)),
-    amPm: ['am', 'pm']
-  };
-};
 
 const newArray = function(start, end) {
   let result = [];
@@ -21,6 +12,16 @@ const newArray = function(start, end) {
   return result;
 };
 
+export const getI18nSettings = () => {
+  return {
+    dayNamesShort: weeks.map(week => t(`el.datepicker.weeks.${ week }`)),
+    dayNames: weeks.map(week => t(`el.datepicker.weeks.${ week }`)),
+    monthNamesShort: months.map(month => t(`el.datepicker.months.${ month }`)),
+    monthNames: months.map((month, index) => t(`el.datepicker.month${ index + 1 }`)),
+    amPm: ['am', 'pm']
+  };
+};
+
 export const toDate = function(date) {
   return isDate(date) ? new Date(date) : null;
 };
@@ -39,11 +40,11 @@ export const isDateObject = function(val) {
 export const formatDate = function(date, format) {
   date = toDate(date);
   if (!date) return '';
-  return dateUtil.format(date, format || 'yyyy-MM-dd', getI18nSettings());
+  return fecha.format(date, format || 'yyyy-MM-dd', getI18nSettings());
 };
 
 export const parseDate = function(string, format) {
-  return dateUtil.parse(string, format || 'yyyy-MM-dd', getI18nSettings());
+  return fecha.parse(string, format || 'yyyy-MM-dd', getI18nSettings());
 };
 
 export const getDayCountOfMonth = function(year, month) {
@@ -131,6 +132,20 @@ export const getRangeHours = function(ranges) {
   return hours;
 };
 
+export const getPrevMonthLastDays = (date, amount) => {
+  if (amount <= 0) return [];
+  const temp = new Date(date.getTime());
+  temp.setDate(0);
+  const lastDay = temp.getDate();
+  return range(amount).map((_, index) => lastDay - (amount - index - 1));
+};
+
+export const getMonthDays = (date) => {
+  const temp = new Date(date.getFullYear(), date.getMonth() + 1, 0);
+  const days = temp.getDate();
+  return range(days).map((_, index) => index + 1);
+};
+
 function setRangeData(arr, start, end, value) {
   for (let i = start; i < end; i++) {
     arr[i] = value;
@@ -196,7 +211,7 @@ export const clearMilliseconds = function(date) {
 export const limitTimeRange = function(date, ranges, format = 'HH:mm:ss') {
   // TODO: refactory a more elegant solution
   if (ranges.length === 0) return date;
-  const normalizeDate = date => dateUtil.parse(dateUtil.format(date, format), format);
+  const normalizeDate = date => fecha.parse(fecha.format(date, format), format);
   const ndate = normalizeDate(date);
   const nranges = ranges.map(range => range.map(normalizeDate));
   if (nranges.some(nrange => ndate >= nrange[0] && ndate <= nrange[1])) return date;
@@ -271,3 +286,7 @@ export const extractTimeFormat = function(format) {
     .replace(/\W?D{1,2}|\W?Do|\W?d{1,4}|\W?M{1,4}|\W?y{2,4}/g, '')
     .trim();
 };
+
+export const validateRangeInOneMonth = function(start, end) {
+  return (start.getMonth() === end.getMonth()) && (start.getFullYear() === end.getFullYear());
+};
diff --git a/src/utils/date.js b/src/utils/date.js
index 42db03067fb..001692c4536 100644
--- a/src/utils/date.js
+++ b/src/utils/date.js
@@ -34,13 +34,18 @@
    */
   var fecha = {};
   var token = /d{1,4}|M{1,4}|yy(?:yy)?|S{1,3}|Do|ZZ|([HhMsDm])\1?|[aA]|"[^"]*"|'[^']*'/g;
-  var twoDigits = /\d\d?/;
-  var threeDigits = /\d{3}/;
-  var fourDigits = /\d{4}/;
-  var word = /[0-9]*['a-z\u00A0-\u05FF\u0700-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF]+|[\u0600-\u06FF\/]+(\s*?[\u0600-\u06FF]+){1,2}/i;
+  var twoDigits = '\\d\\d?';
+  var threeDigits = '\\d{3}';
+  var fourDigits = '\\d{4}';
+  var word = '[^\\s]+';
+  var literal = /\[([^]*?)\]/gm;
   var noop = function () {
   };
 
+  function regexEscape(str) {
+    return str.replace( /[|\\{()[^$+*?.-]/g, '\\$&');
+  }
+
   function shorten(arr, sLen) {
     var newArr = [];
     for (var i = 0, len = arr.length; i < len; i++) {
@@ -117,10 +122,10 @@
       return i18n.monthNames[dateObj.getMonth()];
     },
     yy: function(dateObj) {
-      return String(dateObj.getFullYear()).substr(2);
+      return pad(String(dateObj.getFullYear()), 4).substr(2);
     },
     yyyy: function(dateObj) {
-      return dateObj.getFullYear();
+      return pad(dateObj.getFullYear(), 4);
     },
     h: function(dateObj) {
       return dateObj.getHours() % 12 || 12;
@@ -171,6 +176,9 @@
     d: [twoDigits, function (d, v) {
       d.day = v;
     }],
+    Do: [twoDigits + word, function (d, v) {
+      d.day = parseInt(v, 10);
+    }],
     M: [twoDigits, function (d, v) {
       d.month = v - 1;
     }],
@@ -190,10 +198,10 @@
     yyyy: [fourDigits, function (d, v) {
       d.year = v;
     }],
-    S: [/\d/, function (d, v) {
+    S: ['\\d', function (d, v) {
       d.millisecond = v * 100;
     }],
-    SS: [/\d{2}/, function (d, v) {
+    SS: ['\\d{2}', function (d, v) {
       d.millisecond = v * 10;
     }],
     SSS: [threeDigits, function (d, v) {
@@ -211,8 +219,8 @@
         d.isPm = true;
       }
     }],
-    ZZ: [/[\+\-]\d\d:?\d\d/, function (d, v) {
-      var parts = (v + '').match(/([\+\-]|\d\d)/gi), minutes;
+    ZZ: ['[^\\s]*?[\\+\\-]\\d\\d:?\\d\\d|[^\\s]*?Z', function (d, v) {
+      var parts = (v + '').match(/([+-]|\d\d)/gi), minutes;
 
       if (parts) {
         minutes = +(parts[1] * 60) + parseInt(parts[2], 10);
@@ -220,9 +228,9 @@
       }
     }]
   };
-  parseFlags.DD = parseFlags.D;
+  parseFlags.dd = parseFlags.d;
   parseFlags.dddd = parseFlags.ddd;
-  parseFlags.Do = parseFlags.dd = parseFlags.d;
+  parseFlags.DD = parseFlags.D;
   parseFlags.mm = parseFlags.m;
   parseFlags.hh = parseFlags.H = parseFlags.HH = parseFlags.h;
   parseFlags.MM = parseFlags.M;
@@ -232,7 +240,7 @@
 
   // Some common format strings
   fecha.masks = {
-    'default': 'ddd MMM dd yyyy HH:mm:ss',
+    default: 'ddd MMM dd yyyy HH:mm:ss',
     shortDate: 'M/D/yy',
     mediumDate: 'MMM d, yyyy',
     longDate: 'MMMM d, yyyy',
@@ -261,9 +269,21 @@
 
     mask = fecha.masks[mask] || mask || fecha.masks['default'];
 
-    return mask.replace(token, function ($0) {
+    var literals = [];
+
+    // Make literals inactive by replacing them with ??
+    mask = mask.replace(literal, function($0, $1) {
+      literals.push($1);
+      return '@@@';
+    });
+    // Apply formatting rules
+    mask = mask.replace(token, function ($0) {
       return $0 in formatFlags ? formatFlags[$0](dateObj, i18n) : $0.slice(1, $0.length - 1);
     });
+    // Inline literal values back into the formatted value
+    return mask.replace(/@@@/g, function() {
+      return literals.shift();
+    });
   };
 
   /**
@@ -285,31 +305,35 @@
     // Avoid regular expression denial of service, fail early for really long strings
     // https://www.owasp.org/index.php/Regular_expression_Denial_of_Service_-_ReDoS
     if (dateStr.length > 1000) {
-      return false;
+      return null;
     }
 
-    var isValid = true;
     var dateInfo = {};
-    format.replace(token, function ($0) {
+    var parseInfo = [];
+    var literals = [];
+    format = format.replace(literal, function($0, $1) {
+      literals.push($1);
+      return '@@@';
+    });
+    var newFormat = regexEscape(format).replace(token, function ($0) {
       if (parseFlags[$0]) {
         var info = parseFlags[$0];
-        var index = dateStr.search(info[0]);
-        if (!~index) {
-          isValid = false;
-        } else {
-          dateStr.replace(info[0], function (result) {
-            info[1](dateInfo, result, i18n);
-            dateStr = dateStr.substr(index + result.length);
-            return result;
-          });
-        }
+        parseInfo.push(info[1]);
+        return '(' + info[0] + ')';
       }
 
-      return parseFlags[$0] ? '' : $0.slice(1, $0.length - 1);
+      return $0;
     });
+    newFormat = newFormat.replace(/@@@/g, function() {
+      return literals.shift();
+    });
+    var matches = dateStr.match(new RegExp(newFormat, 'i'));
+    if (!matches) {
+      return null;
+    }
 
-    if (!isValid) {
-      return false;
+    for (var i = 1; i < matches.length; i++) {
+      parseInfo[i - 1](dateInfo, matches[i], i18n);
     }
 
     var today = new Date();
diff --git a/src/utils/dom.js b/src/utils/dom.js
index 0221295f5fd..8d2c668079c 100644
--- a/src/utils/dom.js
+++ b/src/utils/dom.js
@@ -172,3 +172,56 @@ export function setStyle(element, styleName, value) {
     }
   }
 };
+
+export const isScroll = (el, vertical) => {
+  if (isServer) return;
+
+  const determinedDirection = vertical !== null || vertical !== undefined;
+  const overflow = determinedDirection
+    ? vertical
+      ? getStyle(el, 'overflow-y')
+      : getStyle(el, 'overflow-x')
+    : getStyle(el, 'overflow');
+
+  return overflow.match(/(scroll|auto)/);
+};
+
+export const getScrollContainer = (el, vertical) => {
+  if (isServer) return;
+
+  let parent = el;
+  while (parent) {
+    if ([window, document, document.documentElement].includes(parent)) {
+      return window;
+    }
+    if (isScroll(parent, vertical)) {
+      return parent;
+    }
+    parent = parent.parentNode;
+  }
+
+  return parent;
+};
+
+export const isInContainer = (el, container) => {
+  if (isServer || !el || !container) return false;
+
+  const elRect = el.getBoundingClientRect();
+  let containerRect;
+
+  if ([window, document, document.documentElement, null, undefined].includes(container)) {
+    containerRect = {
+      top: 0,
+      right: window.innerWidth,
+      bottom: window.innerHeight,
+      left: 0
+    };
+  } else {
+    containerRect = container.getBoundingClientRect();
+  }
+
+  return elRect.top < containerRect.bottom &&
+    elRect.bottom > containerRect.top &&
+    elRect.right > containerRect.left &&
+    elRect.left < containerRect.right;
+};
diff --git a/src/utils/get-femessage-navs.js b/src/utils/get-femessage-navs.js
new file mode 100644
index 00000000000..3ff1f232a82
--- /dev/null
+++ b/src/utils/get-femessage-navs.js
@@ -0,0 +1,38 @@
+const defaultBaseUrl = 'https://frontend-infra.deepexi.com/#/material';
+const navListUrl =
+  '//mockapi.eolinker.com/jttjNwp60fc1c9e944fdf1cc494b28a7ca4cfe66bbafee1/prod/open';
+
+// 只要有一个设置了 frontendInfraBaseUrl，就相当于全部都设置了这个值
+export function getFrontendInfraBaseUrl(navs) {
+  const nav = navs.find((nav) => nav.frontendInfraBaseUrl);
+
+  return nav ? nav.frontendInfraBaseUrl : defaultBaseUrl;
+}
+
+export function getFemessageNavs() {
+  const xhr = new XMLHttpRequest();
+
+  // eslint-disable-next-line no-undef
+  return new Promise((resolve) => {
+    xhr.onreadystatechange = (_) => {
+      if (xhr.readyState === 4 && xhr.status === 200) {
+        const { data: navs } = JSON.parse(xhr.responseText);
+
+        const baseUrl = getFrontendInfraBaseUrl(navs);
+
+        const femessageNavs = navs
+          .map((nav) => {
+            nav.url = `${baseUrl}/${nav.repoName}`;
+            return nav;
+          })
+          .filter((nav) => nav.lib && nav.lib.indexOf('element') > -1);
+
+        resolve(femessageNavs);
+      }
+    };
+
+    xhr.open('GET', navListUrl);
+
+    xhr.send();
+  });
+}
diff --git a/src/utils/getScroll.js b/src/utils/getScroll.js
new file mode 100644
index 00000000000..1b085e3e3dc
--- /dev/null
+++ b/src/utils/getScroll.js
@@ -0,0 +1,17 @@
+export default function getScroll(target, top) {
+  if (typeof window === 'undefined') {
+    return 0;
+  }
+
+  const prop = top ? 'pageYOffset' : 'pageXOffset';
+  const method = top ? 'scrollTop' : 'scrollLeft';
+  const isWindow = target === window;
+
+  let ret = isWindow ? target[prop] : target[method];
+  // ie6,7,8 standard mode
+  if (isWindow && typeof ret !== 'number') {
+    ret = window.document.documentElement[method];
+  }
+
+  return ret;
+}
diff --git a/src/utils/popup/index.js b/src/utils/popup/index.js
index 8156b2dcf08..0fc1bbd7d63 100644
--- a/src/utils/popup/index.js
+++ b/src/utils/popup/index.js
@@ -8,14 +8,6 @@ let idSeed = 1;
 
 let scrollBarWidth;
 
-const getDOM = function(dom) {
-  if (dom.nodeType === 3) {
-    dom = dom.nextElementSibling || dom.nextSibling;
-    getDOM(dom);
-  }
-  return dom;
-};
-
 export default {
   props: {
     visible: {
@@ -124,7 +116,7 @@ export default {
 
       this._opening = true;
 
-      const dom = getDOM(this.$el);
+      const dom = this.$el;
 
       const modal = props.modal;
 
diff --git a/src/utils/popup/popup-manager.js b/src/utils/popup/popup-manager.js
index 2d18ef18fce..598f8b84da8 100644
--- a/src/utils/popup/popup-manager.js
+++ b/src/utils/popup/popup-manager.js
@@ -3,7 +3,7 @@ import { addClass, removeClass } from 'element-ui/src/utils/dom';
 
 let hasModal = false;
 let hasInitZIndex = false;
-let zIndex = 2000;
+let zIndex;
 
 const getModal = function() {
   if (Vue.prototype.$isServer) return;
@@ -155,7 +155,7 @@ Object.defineProperty(PopupManager, 'zIndex', {
   configurable: true,
   get() {
     if (!hasInitZIndex) {
-      zIndex = (Vue.prototype.$ELEMENT || {}).zIndex || zIndex;
+      zIndex = zIndex || (Vue.prototype.$ELEMENT || {}).zIndex || 2000;
       hasInitZIndex = true;
     }
     return zIndex;
diff --git a/src/utils/props-util.js b/src/utils/props-util.js
new file mode 100644
index 00000000000..23350070618
--- /dev/null
+++ b/src/utils/props-util.js
@@ -0,0 +1,316 @@
+import isPlainObject from 'lodash/isPlainObject';
+import classNames from 'classnames';
+function getType(fn) {
+  const match = fn && fn.toString().match(/^\s*function (\w+)/);
+  return match ? match[1] : '';
+}
+
+const camelizeRE = /-(\w)/g;
+const camelize = str => {
+  return str.replace(camelizeRE, (_, c) => (c ? c.toUpperCase() : ''));
+};
+const parseStyleText = (cssText = '', camel) => {
+  const res = {};
+  const listDelimiter = /;(?![^(]*\))/g;
+  const propertyDelimiter = /:(.+)/;
+  cssText.split(listDelimiter).forEach(function(item) {
+    if (item) {
+      const tmp = item.split(propertyDelimiter);
+      if (tmp.length > 1) {
+        const k = camel ? camelize(tmp[0].trim()) : tmp[0].trim();
+        res[k] = tmp[1].trim();
+      }
+    }
+  });
+  return res;
+};
+
+const hasProp = (instance, prop) => {
+  const $options = instance.$options || {};
+  const propsData = $options.propsData || {};
+  return prop in propsData;
+};
+const slotHasProp = (slot, prop) => {
+  const $options = slot.componentOptions || {};
+  const propsData = $options.propsData || {};
+  return prop in propsData;
+};
+const filterProps = (props, propsData = {}) => {
+  const res = {};
+  Object.keys(props).forEach(k => {
+    if (k in propsData || props[k] !== undefined) {
+      res[k] = props[k];
+    }
+  });
+  return res;
+};
+
+const getScopedSlots = ele => {
+  return (ele.data && ele.data.scopedSlots) || {};
+};
+
+const getSlots = ele => {
+  let componentOptions = ele.componentOptions || {};
+  if (ele.$vnode) {
+    componentOptions = ele.$vnode.componentOptions || {};
+  }
+  const children = ele.children || componentOptions.children || [];
+  const slots = {};
+  children.forEach(child => {
+    if (!isEmptyElement(child)) {
+      const name = (child.data && child.data.slot) || 'default';
+      slots[name] = slots[name] || [];
+      slots[name].push(child);
+    }
+  });
+  return { ...slots, ...getScopedSlots(ele) };
+};
+const getSlot = (self, name = 'default', options = {}) => {
+  return (
+    (self.$scopedSlots && self.$scopedSlots[name] && self.$scopedSlots[name](options)) ||
+    self.$slots[name] ||
+    []
+  );
+};
+
+const getAllChildren = ele => {
+  let componentOptions = ele.componentOptions || {};
+  if (ele.$vnode) {
+    componentOptions = ele.$vnode.componentOptions || {};
+  }
+  return ele.children || componentOptions.children || [];
+};
+const getSlotOptions = ele => {
+  if (ele.fnOptions) {
+    // 函数式组件
+    return ele.fnOptions;
+  }
+  let componentOptions = ele.componentOptions;
+  if (ele.$vnode) {
+    componentOptions = ele.$vnode.componentOptions;
+  }
+  return componentOptions ? componentOptions.Ctor.options || {} : {};
+};
+const getOptionProps = instance => {
+  if (instance.componentOptions) {
+    const componentOptions = instance.componentOptions;
+    const { propsData = {}, Ctor = {} } = componentOptions;
+    const props = (Ctor.options || {}).props || {};
+    const res = {};
+    for (const [k, v] of Object.entries(props)) {
+      const def = v.default;
+      if (def !== undefined) {
+        res[k] =
+          typeof def === 'function' && getType(v.type) !== 'Function' ? def.call(instance) : def;
+      }
+    }
+    return { ...res, ...propsData };
+  }
+  const { $options = {}, $props = {} } = instance;
+  return filterProps($props, $options.propsData);
+};
+
+const getComponentFromProp = (instance, prop, options = instance, execute = true) => {
+  if (instance.$createElement) {
+    const h = instance.$createElement;
+    const temp = instance[prop];
+    if (temp !== undefined) {
+      return typeof temp === 'function' && execute ? temp(h, options) : temp;
+    }
+    return (
+      (instance.$scopedSlots[prop] && execute && instance.$scopedSlots[prop](options)) ||
+      instance.$scopedSlots[prop] ||
+      instance.$slots[prop] ||
+      undefined
+    );
+  } else {
+    const h = instance.context.$createElement;
+    const temp = getPropsData(instance)[prop];
+    if (temp !== undefined) {
+      return typeof temp === 'function' && execute ? temp(h, options) : temp;
+    }
+    const slotScope = getScopedSlots(instance)[prop];
+    if (slotScope !== undefined) {
+      return typeof slotScope === 'function' && execute ? slotScope(h, options) : slotScope;
+    }
+    const slotsProp = [];
+    const componentOptions = instance.componentOptions || {};
+    (componentOptions.children || []).forEach(child => {
+      if (child.data && child.data.slot === prop) {
+        if (child.data.attrs) {
+          delete child.data.attrs.slot;
+        }
+        if (child.tag === 'template') {
+          slotsProp.push(child.children);
+        } else {
+          slotsProp.push(child);
+        }
+      }
+    });
+    return slotsProp.length ? slotsProp : undefined;
+  }
+};
+
+const getAllProps = ele => {
+  let data = ele.data || {};
+  let componentOptions = ele.componentOptions || {};
+  if (ele.$vnode) {
+    data = ele.$vnode.data || {};
+    componentOptions = ele.$vnode.componentOptions || {};
+  }
+  return { ...data.props, ...data.attrs, ...componentOptions.propsData };
+};
+
+const getPropsData = ele => {
+  let componentOptions = ele.componentOptions;
+  if (ele.$vnode) {
+    componentOptions = ele.$vnode.componentOptions;
+  }
+  return componentOptions ? componentOptions.propsData || {} : {};
+};
+const getValueByProp = (ele, prop) => {
+  return getPropsData(ele)[prop];
+};
+
+const getAttrs = ele => {
+  let data = ele.data;
+  if (ele.$vnode) {
+    data = ele.$vnode.data;
+  }
+  return data ? data.attrs || {} : {};
+};
+
+const getKey = ele => {
+  let key = ele.key;
+  if (ele.$vnode) {
+    key = ele.$vnode.key;
+  }
+  return key;
+};
+
+export function getEvents(child) {
+  let events = {};
+  if (child.componentOptions && child.componentOptions.listeners) {
+    events = child.componentOptions.listeners;
+  } else if (child.data && child.data.on) {
+    events = child.data.on;
+  }
+  return { ...events };
+}
+export function getClass(ele) {
+  let data = {};
+  if (ele.data) {
+    data = ele.data;
+  } else if (ele.$vnode && ele.$vnode.data) {
+    data = ele.$vnode.data;
+  }
+  const tempCls = data.class || {};
+  const staticClass = data.staticClass;
+  let cls = {};
+  staticClass &&
+    staticClass.split(' ').forEach(c => {
+      cls[c.trim()] = true;
+    });
+  if (typeof tempCls === 'string') {
+    tempCls.split(' ').forEach(c => {
+      cls[c.trim()] = true;
+    });
+  } else if (Array.isArray(tempCls)) {
+    classNames(tempCls)
+      .split(' ')
+      .forEach(c => {
+        cls[c.trim()] = true;
+      });
+  } else {
+    cls = { ...cls, ...tempCls };
+  }
+  return cls;
+}
+export function getStyle(ele, camel) {
+  let data = {};
+  if (ele.data) {
+    data = ele.data;
+  } else if (ele.$vnode && ele.$vnode.data) {
+    data = ele.$vnode.data;
+  }
+  let style = data.style || data.staticStyle;
+  if (typeof style === 'string') {
+    style = parseStyleText(style, camel);
+  } else if (camel && style) {
+    // 驼峰化
+    const res = {};
+    Object.keys(style).forEach(k => (res[camelize(k)] = style[k]));
+    return res;
+  }
+  return style;
+}
+
+export function getComponentName(opts) {
+  return opts && (opts.Ctor.options.name || opts.tag);
+}
+
+export function isEmptyElement(c) {
+  return !(c.tag || (c.text && c.text.trim() !== ''));
+}
+
+export function filterEmpty(children = []) {
+  return children.filter(c => !isEmptyElement(c));
+}
+const initDefaultProps = (propTypes, defaultProps) => {
+  Object.keys(defaultProps).forEach(k => {
+    if (propTypes[k]) {
+      propTypes[k].def && (propTypes[k] = propTypes[k].def(defaultProps[k]));
+    } else {
+      throw new Error(`not have ${k} prop`);
+    }
+  });
+  return propTypes;
+};
+
+export function mergeProps() {
+  const args = [].slice.call(arguments, 0);
+  const props = {};
+  args.forEach((p = {}) => {
+    for (const [k, v] of Object.entries(p)) {
+      props[k] = props[k] || {};
+      if (isPlainObject(v)) {
+        Object.assign(props[k], v);
+      } else {
+        props[k] = v;
+      }
+    }
+  });
+  return props;
+}
+
+function isValidElement(element) {
+  return (
+    element &&
+    typeof element === 'object' &&
+    'componentOptions' in element &&
+    'context' in element &&
+    element.tag !== undefined
+  ); // remove text node
+}
+
+export {
+  hasProp,
+  filterProps,
+  getOptionProps,
+  getComponentFromProp,
+  getSlotOptions,
+  slotHasProp,
+  getPropsData,
+  getKey,
+  getAttrs,
+  getValueByProp,
+  parseStyleText,
+  initDefaultProps,
+  isValidElement,
+  camelize,
+  getSlots,
+  getSlot,
+  getAllProps,
+  getAllChildren
+};
+export default hasProp;
diff --git a/src/utils/throttleByAnimationFrame.js b/src/utils/throttleByAnimationFrame.js
new file mode 100644
index 00000000000..08d1b1f22b5
--- /dev/null
+++ b/src/utils/throttleByAnimationFrame.js
@@ -0,0 +1,45 @@
+import raf from 'raf';
+
+export default function throttleByAnimationFrame(fn) {
+  let requestId;
+
+  const later = args => () => {
+    requestId = null;
+    fn(...args);
+  };
+
+  const throttled = (...args) => {
+    if (requestId == null) {
+      requestId = raf(later(args));
+    }
+  };
+
+  throttled.cancel = () => raf.cancel(requestId);
+
+  return throttled;
+}
+
+export function throttleByAnimationFrameDecorator() {
+  return function(target, key, descriptor) {
+    const fn = descriptor.value;
+    let definingProperty = false;
+    return {
+      configurable: true,
+      get() {
+        if (definingProperty || this === target.prototype || this.hasOwnProperty(key)) {
+          return fn;
+        }
+
+        const boundFn = throttleByAnimationFrame(fn.bind(this));
+        definingProperty = true;
+        Object.defineProperty(this, key, {
+          value: boundFn,
+          configurable: true,
+          writable: true
+        });
+        definingProperty = false;
+        return boundFn;
+      }
+    };
+  };
+}
diff --git a/src/utils/types.js b/src/utils/types.js
new file mode 100644
index 00000000000..bfcceed5f0f
--- /dev/null
+++ b/src/utils/types.js
@@ -0,0 +1,24 @@
+export function isString(obj) {
+  return Object.prototype.toString.call(obj) === '[object String]';
+}
+
+export function isObject(obj) {
+  return Object.prototype.toString.call(obj) === '[object Object]';
+}
+
+export function isHtmlElement(node) {
+  return node && node.nodeType === Node.ELEMENT_NODE;
+}
+
+export const isFunction = (functionToCheck) => {
+  var getType = {};
+  return functionToCheck && getType.toString.call(functionToCheck) === '[object Function]';
+};
+
+export const isUndefined = (val)=> {
+  return val === void 0;
+};
+
+export const isDefined = (val) => {
+  return val !== undefined && val !== null;
+};
diff --git a/src/utils/util.js b/src/utils/util.js
index 1b9db5fb900..eab95814a19 100644
--- a/src/utils/util.js
+++ b/src/utils/util.js
@@ -1,4 +1,5 @@
 import Vue from 'vue';
+import { isString, isObject } from 'element-ui/src/utils/types';
 
 const hasOwnProperty = Object.prototype.hasOwnProperty;
 
@@ -120,3 +121,121 @@ export const isIE = function() {
 export const isEdge = function() {
   return !Vue.prototype.$isServer && navigator.userAgent.indexOf('Edge') > -1;
 };
+
+export const isFirefox = function() {
+  return !Vue.prototype.$isServer && !!window.navigator.userAgent.match(/firefox/i);
+};
+
+export const autoprefixer = function(style) {
+  if (typeof style !== 'object') return style;
+  const rules = ['transform', 'transition', 'animation'];
+  const prefixes = ['ms-', 'webkit-'];
+  rules.forEach(rule => {
+    const value = style[rule];
+    if (rule && value) {
+      prefixes.forEach(prefix => {
+        style[prefix + rule] = value;
+      });
+    }
+  });
+  return style;
+};
+
+export const kebabCase = function(str) {
+  const hyphenateRE = /([^-])([A-Z])/g;
+  return str
+    .replace(hyphenateRE, '$1-$2')
+    .replace(hyphenateRE, '$1-$2')
+    .toLowerCase();
+};
+
+export const capitalize = function(str) {
+  if (!isString(str)) return str;
+  return str.charAt(0).toUpperCase() + str.slice(1);
+};
+
+export const looseEqual = function(a, b) {
+  const isObjectA = isObject(a);
+  const isObjectB = isObject(b);
+  if (isObjectA && isObjectB) {
+    return JSON.stringify(a) === JSON.stringify(b);
+  } else if (!isObjectA && !isObjectB) {
+    return String(a) === String(b);
+  } else {
+    return false;
+  }
+};
+
+export const arrayEquals = function(arrayA, arrayB) {
+  arrayA = arrayA || [];
+  arrayB = arrayB || [];
+
+  if (arrayA.length !== arrayB.length) {
+    return false;
+  }
+
+  for (let i = 0; i < arrayA.length; i++) {
+    if (!looseEqual(arrayA[i], arrayB[i])) {
+      return false;
+    }
+  }
+
+  return true;
+};
+
+export const isEqual = function(value1, value2) {
+  if (Array.isArray(value1) && Array.isArray(value2)) {
+    return arrayEquals(value1, value2);
+  }
+  return looseEqual(value1, value2);
+};
+
+export const isEmpty = function(val) {
+  // null or undefined
+  if (val == null) return true;
+
+  if (typeof val === 'boolean') return false;
+
+  if (typeof val === 'number') return !val;
+
+  if (val instanceof Error) return val.message === '';
+
+  switch (Object.prototype.toString.call(val)) {
+    // String or Array
+    case '[object String]':
+    case '[object Array]':
+      return !val.length;
+
+    // Map or Set or File
+    case '[object File]':
+    case '[object Map]':
+    case '[object Set]': {
+      return !val.size;
+    }
+    // Plain Object
+    case '[object Object]': {
+      return !Object.keys(val).length;
+    }
+  }
+
+  return false;
+};
+
+export function rafThrottle(fn) {
+  let locked = false;
+  return function(...args) {
+    if (locked) return;
+    locked = true;
+    window.requestAnimationFrame(_ => {
+      fn.apply(this, args);
+      locked = false;
+    });
+  };
+}
+
+export function objToArray(obj) {
+  if (Array.isArray(obj)) {
+    return obj;
+  }
+  return isEmpty(obj) ? [] : [obj];
+}
diff --git a/src/utils/vdom.js b/src/utils/vdom.js
index 7b6ee9d9423..6bf702849df 100644
--- a/src/utils/vdom.js
+++ b/src/utils/vdom.js
@@ -3,7 +3,3 @@ import { hasOwn } from 'element-ui/src/utils/util';
 export function isVNode(node) {
   return node !== null && typeof node === 'object' && hasOwn(node, 'componentOptions');
 };
-
-export function getFirstComponentChild(children) {
-  return children && children.filter(c => c && c.tag)[0];
-};
diff --git a/src/utils/vue-popper.js b/src/utils/vue-popper.js
index 3826161859f..ca35df92b1c 100644
--- a/src/utils/vue-popper.js
+++ b/src/utils/vue-popper.js
@@ -70,9 +70,7 @@ export default {
     },
 
     showPopper(val) {
-      if (this.disabled) {
-        return;
-      }
+      if (this.disabled) return;
       val ? this.updatePopper() : this.destroyPopper();
       this.$emit('input', val);
     }
diff --git a/src/utils/vue-types/index.js b/src/utils/vue-types/index.js
new file mode 100644
index 00000000000..529282623d3
--- /dev/null
+++ b/src/utils/vue-types/index.js
@@ -0,0 +1,259 @@
+import isPlainObject from 'lodash/isPlainObject';
+import { toType, getType, isFunction, validateType, isInteger, isArray, warn } from './utils';
+
+const VuePropTypes = {
+  get any() {
+    return toType('any', {
+      type: null
+    });
+  },
+
+  get func() {
+    return toType('function', {
+      type: Function
+    }).def(currentDefaults.func);
+  },
+
+  get bool() {
+    return toType('boolean', {
+      type: Boolean
+    }).def(currentDefaults.bool);
+  },
+
+  get string() {
+    return toType('string', {
+      type: String
+    }).def(currentDefaults.string);
+  },
+
+  get number() {
+    return toType('number', {
+      type: Number
+    }).def(currentDefaults.number);
+  },
+
+  get array() {
+    return toType('array', {
+      type: Array
+    }).def(currentDefaults.array);
+  },
+
+  get object() {
+    return toType('object', {
+      type: Object
+    }).def(currentDefaults.object);
+  },
+
+  get integer() {
+    return toType('integer', {
+      type: Number,
+      validator(value) {
+        return isInteger(value);
+      }
+    }).def(currentDefaults.integer);
+  },
+
+  get symbol() {
+    return toType('symbol', {
+      type: null,
+      validator(value) {
+        return typeof value === 'symbol';
+      }
+    });
+  },
+
+  custom(validatorFn, warnMsg = 'custom validation failed') {
+    if (typeof validatorFn !== 'function') {
+      throw new TypeError('[VueTypes error]: You must provide a function as argument');
+    }
+
+    return toType(validatorFn.name || '<<anonymous function>>', {
+      validator(...args) {
+        const valid = validatorFn(...args);
+        if (!valid) warn(`${this._vueTypes_name} - ${warnMsg}`);
+        return valid;
+      }
+    });
+  },
+
+  oneOf(arr) {
+    if (!isArray(arr)) {
+      throw new TypeError('[VueTypes error]: You must provide an array as argument');
+    }
+    const msg = `oneOf - value should be one of "${arr.join('", "')}"`;
+    const allowedTypes = arr.reduce((ret, v) => {
+      if (v !== null && v !== undefined) {
+        ret.indexOf(v.constructor) === -1 && ret.push(v.constructor);
+      }
+      return ret;
+    }, []);
+
+    return toType('oneOf', {
+      type: allowedTypes.length > 0 ? allowedTypes : null,
+      validator(value) {
+        const valid = arr.indexOf(value) !== -1;
+        if (!valid) warn(msg);
+        return valid;
+      }
+    });
+  },
+
+  instanceOf(instanceConstructor) {
+    return toType('instanceOf', {
+      type: instanceConstructor
+    });
+  },
+
+  oneOfType(arr) {
+    if (!isArray(arr)) {
+      throw new TypeError('[VueTypes error]: You must provide an array as argument');
+    }
+
+    let hasCustomValidators = false;
+
+    const nativeChecks = arr.reduce((ret, type) => {
+      if (isPlainObject(type)) {
+        if (type._vueTypes_name === 'oneOf') {
+          return ret.concat(type.type || []);
+        }
+        if (type.type && !isFunction(type.validator)) {
+          if (isArray(type.type)) return ret.concat(type.type);
+          ret.push(type.type);
+        } else if (isFunction(type.validator)) {
+          hasCustomValidators = true;
+        }
+        return ret;
+      }
+      ret.push(type);
+      return ret;
+    }, []);
+
+    if (!hasCustomValidators) {
+      // we got just native objects (ie: Array, Object)
+      // delegate to Vue native prop check
+      return toType('oneOfType', {
+        type: nativeChecks
+      }).def(undefined);
+    }
+
+    const typesStr = arr
+      .map(type => {
+        if (type && isArray(type.type)) {
+          return type.type.map(getType);
+        }
+        return getType(type);
+      })
+      .reduce((ret, type) => ret.concat(isArray(type) ? type : [type]), [])
+      .join('", "');
+
+    return this.custom(function oneOfType(value) {
+      const valid = arr.some(type => {
+        if (type._vueTypes_name === 'oneOf') {
+          return type.type ? validateType(type.type, value, true) : true;
+        }
+        return validateType(type, value, true);
+      });
+      if (!valid) warn(`oneOfType - value type should be one of "${typesStr}"`);
+      return valid;
+    }).def(undefined);
+  },
+
+  arrayOf(type) {
+    return toType('arrayOf', {
+      type: Array,
+      validator(values) {
+        const valid = values.every(value => validateType(type, value));
+        if (!valid) warn(`arrayOf - value must be an array of "${getType(type)}"`);
+        return valid;
+      }
+    });
+  },
+
+  objectOf(type) {
+    return toType('objectOf', {
+      type: Object,
+      validator(obj) {
+        const valid = Object.keys(obj).every(key => validateType(type, obj[key]));
+        if (!valid) warn(`objectOf - value must be an object of "${getType(type)}"`);
+        return valid;
+      }
+    });
+  },
+
+  shape(obj) {
+    const keys = Object.keys(obj);
+    const requiredKeys = keys.filter(key => obj[key] && obj[key].required === true);
+
+    const type = toType('shape', {
+      type: Object,
+      validator(value) {
+        if (!isPlainObject(value)) {
+          return false;
+        }
+        const valueKeys = Object.keys(value);
+
+        // check for required keys (if any)
+        if (requiredKeys.length > 0 && requiredKeys.some(req => valueKeys.indexOf(req) === -1)) {
+          warn(`shape - at least one of required properties "${requiredKeys.join('", "')}" is not present`); // eslint-disable-line
+          return false;
+        }
+
+        return valueKeys.every(key => {
+          if (keys.indexOf(key) === -1) {
+            if (this._vueTypes_isLoose === true) return true;
+            warn(`shape - object is missing "${key}" property`);
+            return false;
+          }
+          const type = obj[key];
+          return validateType(type, value[key]);
+        });
+      }
+    });
+
+    Object.defineProperty(type, '_vueTypes_isLoose', {
+      enumerable: false,
+      writable: true,
+      value: false
+    });
+
+    Object.defineProperty(type, 'loose', {
+      get() {
+        this._vueTypes_isLoose = true;
+        return this;
+      },
+      enumerable: false
+    });
+
+    return type;
+  }
+};
+
+const typeDefaults = () => ({
+  func: undefined,
+  bool: undefined,
+  string: undefined,
+  number: undefined,
+  array: undefined,
+  object: undefined,
+  integer: undefined
+});
+
+let currentDefaults = typeDefaults();
+
+Object.defineProperty(VuePropTypes, 'sensibleDefaults', {
+  enumerable: false,
+  set(value) {
+    if (value === false) {
+      currentDefaults = {};
+    } else if (value === true) {
+      currentDefaults = typeDefaults();
+    } else if (isPlainObject(value)) {
+      currentDefaults = value;
+    }
+  },
+  get() {
+    return currentDefaults;
+  }
+});
+
+export default VuePropTypes;
diff --git a/src/utils/vue-types/utils.js b/src/utils/vue-types/utils.js
new file mode 100644
index 00000000000..ab15cc8d0b7
--- /dev/null
+++ b/src/utils/vue-types/utils.js
@@ -0,0 +1,200 @@
+import isPlainObject from 'lodash/isPlainObject';
+
+const ObjProto = Object.prototype;
+const toString = ObjProto.toString;
+export const hasOwn = ObjProto.hasOwnProperty;
+
+const FN_MATCH_REGEXP = /^\s*function (\w+)/;
+
+// https://github.com/vuejs/vue/blob/dev/src/core/util/props.js#L159
+export const getType = fn => {
+  const type = fn !== null && fn !== undefined ? (fn.type ? fn.type : fn) : null;
+  const match = type && type.toString().match(FN_MATCH_REGEXP);
+  return match && match[1];
+};
+
+export const getNativeType = value => {
+  if (value === null || value === undefined) return null;
+  const match = value.constructor.toString().match(FN_MATCH_REGEXP);
+  return match && match[1];
+};
+
+/**
+ * No-op function
+ */
+export const noop = () => {};
+
+/**
+ * Checks for a own property in an object
+ *
+ * @param {object} obj - Object
+ * @param {string} prop - Property to check
+ */
+export const has = (obj, prop) => hasOwn.call(obj, prop);
+
+/**
+ * Determines whether the passed value is an integer. Uses `Number.isInteger` if available
+ *
+ * @see https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Number/isInteger
+ * @param {*} value - The value to be tested for being an integer.
+ * @returns {boolean}
+ */
+export const isInteger =
+  Number.isInteger ||
+  function(value) {
+    return typeof value === 'number' && isFinite(value) && Math.floor(value) === value;
+  };
+
+/**
+ * Determines whether the passed value is an Array.
+ *
+ * @param {*} value - The value to be tested for being an array.
+ * @returns {boolean}
+ */
+export const isArray =
+  Array.isArray ||
+  function(value) {
+    return toString.call(value) === '[object Array]';
+  };
+
+/**
+ * Checks if a value is a function
+ *
+ * @param {any} value - Value to check
+ * @returns {boolean}
+ */
+export const isFunction = value => toString.call(value) === '[object Function]';
+
+/**
+ * Adds a `def` method to the object returning a new object with passed in argument as `default` property
+ *
+ * @param {object} type - Object to enhance
+ */
+export const withDefault = function(type) {
+  Object.defineProperty(type, 'def', {
+    value(def) {
+      if (def === undefined && this.default === undefined) {
+        this.default = undefined;
+        return this;
+      }
+      if (!isFunction(def) && !validateType(this, def)) {
+        warn(`${this._vueTypes_name} - invalid default value: "${def}"`, def);
+        return this;
+      }
+      this.default =
+        isArray(def) || isPlainObject(def)
+          ? function() {
+            return def;
+          }
+          : def;
+
+      return this;
+    },
+    enumerable: false,
+    writable: false
+  });
+};
+
+/**
+ * Adds a `isRequired` getter returning a new object with `required: true` key-value
+ *
+ * @param {object} type - Object to enhance
+ */
+export const withRequired = function(type) {
+  Object.defineProperty(type, 'isRequired', {
+    get() {
+      this.required = true;
+      return this;
+    },
+    enumerable: false
+  });
+};
+
+/**
+ * Adds `isRequired` and `def` modifiers to an object
+ *
+ * @param {string} name - Type internal name
+ * @param {object} obj - Object to enhance
+ * @returns {object}
+ */
+export const toType = (name, obj) => {
+  Object.defineProperty(obj, '_vueTypes_name', {
+    enumerable: false,
+    writable: false,
+    value: name
+  });
+  withRequired(obj);
+  withDefault(obj);
+
+  if (isFunction(obj.validator)) {
+    obj.validator = obj.validator.bind(obj);
+  }
+  return obj;
+};
+
+/**
+ * Validates a given value against a prop type object
+ *
+ * @param {Object|*} type - Type to use for validation. Either a type object or a constructor
+ * @param {*} value - Value to check
+ * @param {boolean} silent - Silence warnings
+ * @returns {boolean}
+ */
+export const validateType = (type, value, silent = false) => {
+  let typeToCheck = type;
+  let valid = true;
+  let expectedType;
+  if (!isPlainObject(type)) {
+    typeToCheck = { type };
+  }
+  const namePrefix = typeToCheck._vueTypes_name ? typeToCheck._vueTypes_name + ' - ' : '';
+
+  if (hasOwn.call(typeToCheck, 'type') && typeToCheck.type !== null) {
+    if (isArray(typeToCheck.type)) {
+      valid = typeToCheck.type.some(type => validateType(type, value, true));
+      expectedType = typeToCheck.type.map(type => getType(type)).join(' or ');
+    } else {
+      expectedType = getType(typeToCheck);
+
+      if (expectedType === 'Array') {
+        valid = isArray(value);
+      } else if (expectedType === 'Object') {
+        valid = isPlainObject(value);
+      } else if (
+        expectedType === 'String' ||
+        expectedType === 'Number' ||
+        expectedType === 'Boolean' ||
+        expectedType === 'Function'
+      ) {
+        valid = getNativeType(value) === expectedType;
+      } else {
+        valid = value instanceof typeToCheck.type;
+      }
+    }
+  }
+
+  if (!valid) {
+    silent === false && warn(`${namePrefix}value "${value}" should be of type "${expectedType}"`);
+    return false;
+  }
+
+  if (hasOwn.call(typeToCheck, 'validator') && isFunction(typeToCheck.validator)) {
+    valid = typeToCheck.validator(value);
+    if (!valid && silent === false) warn(`${namePrefix}custom validation failed`);
+    return valid;
+  }
+  return valid;
+};
+
+let warn = noop;
+
+if (process.env.NODE_ENV !== 'production') {
+  const hasConsole = typeof console !== 'undefined';
+  warn = msg => {
+    if (hasConsole) {
+      console.warn(`[VueTypes warn]: ${msg}`);
+    }
+  };
+}
+
+export { warn };
diff --git a/test/.eslintrc b/test/.eslintrc
new file mode 100644
index 00000000000..32ff361127f
--- /dev/null
+++ b/test/.eslintrc
@@ -0,0 +1,13 @@
+{
+  "env": {
+    "mocha": true,
+    "es6": true
+  },
+  "globals": {
+    "expect": true,
+    "sinon": true
+  },
+  "parserOptions": {
+    "ecmaVersion": 2017
+  }
+}
diff --git a/test/ssr/require.test.js b/test/ssr/require.test.js
new file mode 100644
index 00000000000..3584239a777
--- /dev/null
+++ b/test/ssr/require.test.js
@@ -0,0 +1,10 @@
+const path = require('path');
+
+try {
+  process.env.VUE_ENV = 'server';
+  require(path.join(process.env.PWD, './lib/index'));
+  console.log('SSR require test PASS');
+} catch (e) {
+  console.error('SSR require test error');
+  throw Error(e);
+}
diff --git a/test/unit/index.js b/test/unit/index.js
index facac592fdb..fe3fcefbe93 100644
--- a/test/unit/index.js
+++ b/test/unit/index.js
@@ -1,6 +1,4 @@
-// Polyfill fn.bind() for PhantomJS
-/* eslint-disable no-extend-native */
-Function.prototype.bind = require('function-bind');
+require('babel-regenerator-runtime'); // add regenerator support for async await
 require('packages/theme-chalk/lib/index.css');
 
 // require all test files (files that ends with .spec.js)
diff --git a/test/unit/karma.conf.js b/test/unit/karma.conf.js
index 225489e493c..73374ca30d6 100644
--- a/test/unit/karma.conf.js
+++ b/test/unit/karma.conf.js
@@ -1,21 +1,8 @@
-var webpackConfig = require('../../build/webpack.test');
-
-// no need for app entry during tests
-// delete webpackConfig.entry;
+const webpackConfig = require('../../build/webpack.test');
 
 module.exports = function(config) {
-  var configuration = {
-    // to run in additional browsers:
-    // 1. install corresponding karma launcher
-    //    http://karma-runner.github.io/0.13/config/browsers.html
-    // 2. add it to the `browsers` array below.
-    browsers: ['Chrome'],
-    customLaunchers: {
-      Chrome_travis_ci: {
-        base: 'Chrome',
-        flags: ['--no-sandbox']
-      }
-    },
+  const configuration = {
+    browsers: ['ChromeHeadless'],
     frameworks: ['mocha', 'sinon-chai'],
     reporters: ['spec', 'coverage'],
     files: ['./index.js'],
@@ -40,9 +27,5 @@ module.exports = function(config) {
     }
   };
 
-  if (process.env.TRAVIS) {
-    configuration.browsers = ['Chrome_travis_ci'];
-  }
-
   config.set(configuration);
 };
diff --git a/test/unit/mocks/uri.js b/test/unit/mocks/uri.js
new file mode 100644
index 00000000000..ba9a4d31fe0
--- /dev/null
+++ b/test/unit/mocks/uri.js
@@ -0,0 +1,3 @@
+export const IMAGE_SUCCESS = 'data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAEAAAABACAYAAACqaXHeAAAFmklEQVR4Xu2ba2wUVRTH/2cWtlaooFQwKpr4CkESTQBNUAkodGeaKFGD2u6WGPyAmmAEEZmpj1VhBghE/KKGBIztDIXAByWBnQ1oQREfARNiDDHiF1+ooBiksVt295hFiqSdxx3KdmcH5uv+z+3//O65c19TwgX+0AWePy4CuFgBISCQ3J6+DFLuVQKmg2k4gK3xuvwr6+9e+Xe57YViCCRttY1ALX2S/asIPLRB1jvLCSEUAFK2egKgYf0T5a6TxdhtmxqXfl8uCBUHMHfP4rqeE0OOeyS4w5T1hsgCmLNTvaWYp299EpxoyvpX5YBQ8QpotlvvkMBfeCbHvMpUjOejCSCjPSYROrySY/B+SzYmRRJA0tZWEfCcJwBGz81yvDZN6eL5hlDxIZCyta8BTPBLjIv5sVbjyp/8dEF/ryiAlL3kJkD6TsQ0STS5vWHZPhFtEE1FAYiUf28yBaZ7OpRle4IkJ6KtGIDZexfU1hyv/QXASBGjBeYpHYrxmYg2iKZiAFIZdSGIVouaLVJx0obE8v2ielFdRQA83pkemc/lDgE0StRopF6CSVuzCGgWTb6ku7T+aHztpLUng8SIaAe9ApJ265MEflvE3P8a/t2UjTHBYsTUgwqgKauOk4p0gAhxMXunVcwfmYpxX6AYQfGgAWjqTNdL3bndRDRe0NsZGYPXWLKxIGiciH5QAJye8r4UWfE5mWbCE1ZCXy+SUFBN2QEo2+fXjKK6zSDcH9Rcr55i0vj2mUsPnmu8V1xZAZxKXhq+G6A7z9U8Mx+zFOOKc433iysbgNKYj3XnNoHoXj8T3r/z+6ZsPDiwNtyjHQE07dTGSAU8QkX4LlSY6Ndh9UfWnT1Ht2QXjeZifC8INw7UOAMfE2MgB6NdhaFo65ih/+bkxRFAMqPuIaK7xM3zu6ZszO3Vt2S1CcwobXPD8TAfoZjU6LSb7AdgWmd6yLW5nqArrm5T1mtDC+A/Y3tNWe/XqY4VkLK1fwBcItp9DGZLNqQwA2DmgiUbQ0Hgs/NyBpBRD4PoqigBKOWSGxuv2XxruscXQNJWDxJoXJQAMPCnJev9XuouQ0D9PMjcXQ1DAIx9pqJP7tupLrOAZhMhEaUKAGOjqehNYgBsdSOBHo0UAOBlU9ZfFwOQUd8honmRAsA8y1SMrWIAbHUFgRZHCUCe6LqNiWU/igHIaCoR9KgAYMZRS9GvFF4Kp7LqU2B6KzoAeKulGLOEASRtrZkAK0IAVEsxlgsDaM6ojRLRtqgAIImntTcYu4UBpLKtU8D8aRQAMJD/uSZeu2t6Oi8MILldHU8SfRMFAG67wN7cHFeCcz5svaZ4koWvosO9FGbdlI1Wt850BNCSXTSMOX4iEhVAaDAT+o5AAEriVEYrgHBmj+8FI7QVwJzLjei+fPOUN0rnG46P66FoMqMdIUK9SBWEGIDvjZIrgFRGOyR6qBlWAMzQLEU3vDrRvQJsdR+BJlZzBYh8VuM1BHYSQehCMpwVwF1mwqjrewYotBk69RK0tS0AHq7eChC7UPEYAto6As6c9VfdLED8tJkwfL9DcH8J2upqgBZWbwXgalPWD/v59wCgvQTgNb8GSr+H7x3AB0zZuF3EuyuA5oz6jET0pkgjYQPAzEstxSh1oO/jVQFzALzn20IIK0CKFa5vm7niBxHvHgsh9QEQfSDSSP8KWDSaOe54GyvS3sA0vMuUjemibbgPgWzrVInZ8RChb+N9AQSdRkXNiul4qikbn4hp4f5/g7N3vDAiXpCOEcj/IwpG0VT02Nl/9NSOshjvGMinMaJJ9OqYeYulGLODxHkml7TVZ8GYT0Q3uDfKXQxaY8n6i06aZnvJDGKaB8JMAo0IYk5UW7r5BbAtNhRz22YYf4jGlXT+vRuktSrUXgRQhZ12Xi1f8BXwL38cy1+mrtJNAAAAAElFTkSuQmCC';
+
+export const IMAGE_FAIL = 'data:image/png;base64,fail';
diff --git a/test/unit/specs/affix.spec.js b/test/unit/specs/affix.spec.js
new file mode 100644
index 00000000000..fdcb0603ff4
--- /dev/null
+++ b/test/unit/specs/affix.spec.js
@@ -0,0 +1,58 @@
+import { createTest, destroyVM, createVue, wait } from '../util';
+import Affix from 'packages/affix';
+
+describe('Affix', () => {
+  let vm;
+  afterEach(() => {
+    destroyVM(vm);
+  });
+
+  it('create', () => {
+    vm = createTest(Affix, true);
+    expect(vm.$el).to.exist;
+  });
+
+  it('offsetTop', async() => {
+    vm = createVue({
+      template: `
+        <div ref="container" class="test-scroll"  style="height: 100px; overflow: auto; position: relative">
+          <div style="height: 10000px; width: 100%">
+            <el-affix ref="scrollTarget" :target="fn" :offsetTop="100">
+              <el-button type="primary">Affix top</el-button>
+            </el-affix>
+          </div>
+        </div>
+      `,
+      data() {
+        return {
+          fn: () => this.$refs.container
+        };
+      }
+    }, true);
+    vm.$refs.scrollTarget.scrollTop = 100000;
+    await wait();
+    expect(vm.$el.querySelector('.el-affix').style.top).not.be.equal('');
+  });
+
+  it('offsetBottom', async() => {
+    vm = createVue({
+      template: `
+        <div ref="container" class="test-scroll"  style="height: 100px; overflow: auto; position: relative">
+          <div style="height: 10000px; width: 100%">
+            <el-affix ref="scrollTarget" :target="fn" :offsetBottom="100">
+              <el-button type="primary">Affix top</el-button>
+            </el-affix>
+          </div>
+        </div>
+      `,
+      data() {
+        return {
+          fn: () => this.$refs.container
+        };
+      }
+    }, true);
+    vm.$refs.scrollTarget.scrollBottom = 10000;
+    await wait();
+    expect(vm.$el.querySelector('.el-affix').style.bottom).not.to.be.equal('');
+  });
+});
diff --git a/test/unit/specs/alert.spec.js b/test/unit/specs/alert.spec.js
index ee72483b8f9..5c17d7360a3 100644
--- a/test/unit/specs/alert.spec.js
+++ b/test/unit/specs/alert.spec.js
@@ -35,6 +35,14 @@ describe('Alert', () => {
       .to.equal('Unbowed, Unbent, Unbroken');
   });
 
+  it('theme', () => {
+    vm = createTest(Alert, {
+      title: 'test',
+      effect: 'dark'
+    }, true);
+    expect(vm.$el.classList.contains('is-dark')).to.true;
+  });
+
   it('title slot', () => {
     vm = createVue(`
       <el-alert>
diff --git a/test/unit/specs/autocomplete.spec.js b/test/unit/specs/autocomplete.spec.js
index f2c145139aa..1136c1a9d34 100644
--- a/test/unit/specs/autocomplete.spec.js
+++ b/test/unit/specs/autocomplete.spec.js
@@ -570,4 +570,54 @@ describe('Autocomplete', () => {
       done();
     });
   });
+  it('can highlight first item', done => {
+    vm = createVue({
+      template: `
+        <el-autocomplete
+          ref="autocomplete"
+          v-model="state"
+          :fetch-suggestions="querySearch"
+          highlight-first-item
+        ></el-autocomplete>
+      `,
+      data() {
+        return {
+          restaurants: [],
+          state: ''
+        };
+      },
+      methods: {
+        querySearch(queryString, cb) {
+          const opts = [
+            { 'value': '1' },
+            { 'value': '11' },
+            { 'value': '2' },
+            { 'value': '22' }
+          ];
+          cb(
+            queryString
+              ? opts.filter(opt => opt.value.indexOf(queryString) >= 0)
+              : opts
+          );
+        }
+      }
+    }, true);
+    let elm = vm.$el;
+    let inputElm = elm.querySelector('input');
+    inputElm.focus();
+
+    const autocomplete = vm.$refs.autocomplete;
+    const input = autocomplete.$refs.input;
+    input.$emit('input', '1');
+
+    setTimeout(_ => {
+      const suggestions = vm.$refs.autocomplete.$refs.suggestions.$el;
+      const items = suggestions.querySelectorAll('.el-autocomplete-suggestion__list li');
+
+      expect(items.length).to.equal(2);
+      expect(items[0].classList.contains('highlighted')).to.be.true;
+
+      done();
+    }, 500);
+  });
 });
diff --git a/test/unit/specs/avatar.spec.js b/test/unit/specs/avatar.spec.js
new file mode 100644
index 00000000000..871344e3658
--- /dev/null
+++ b/test/unit/specs/avatar.spec.js
@@ -0,0 +1,235 @@
+import { createTest, createVue, destroyVM, wait } from '../util';
+import Avatar from 'packages/avatar';
+import { IMAGE_SUCCESS, IMAGE_FAIL } from '../mocks/uri';
+
+describe('Avatar', () => {
+  let vm;
+  afterEach(() => {
+    destroyVM(vm);
+  });
+
+  it('create', () => {
+    vm = createTest(Avatar);
+    expect(vm.$el).to.exist;
+  });
+
+  it('size is number', () => {
+    vm = createVue({
+      template: `
+        <el-avatar :size="50">
+        </el-avatar>
+      `
+    }, true);
+    const avatarElm = vm.$el;
+    expect(avatarElm.style.height).to.equal('50px');
+  });
+
+  it('size is string', () => {
+    vm = createVue({
+      template: `
+        <el-avatar size="small">
+          user
+        </el-avatar>
+      `
+    }, true);
+    const avatarElm = vm.$el;
+    expect(avatarElm.classList.contains('el-avatar--small')).to.be.true;
+  });
+
+  it('shape', () => {
+    vm = createVue({
+      template: `
+        <el-avatar size="small" shape="square">
+          user
+        </el-avatar>
+      `
+    }, true);
+    const avatarElm = vm.$el;
+    expect(avatarElm.classList.contains('el-avatar--square')).to.be.true;
+  });
+
+  it('icon avatar', () => {
+    vm = createVue({
+      template: `
+        <el-avatar icon="el-icon-user-solid">
+        </el-avatar>
+      `
+    }, true);
+    const avatarElm = vm.$el;
+    const iconELm = avatarElm.children[0];
+    expect(avatarElm.classList.contains('el-avatar--icon')).to.be.true;
+    expect(iconELm.classList.contains('el-icon-user-solid')).to.be.true;
+  });
+
+  it('no avatar tooltip', (done) => {
+    vm = createVue({
+      template: `
+          <el-avatar 
+            ref="avatarTooltip" 
+            src="${IMAGE_SUCCESS}">
+          </el-avatar>
+        `
+    }, true);
+    vm.$nextTick(_ => {
+      expect(vm.$refs.avatarTooltip.$children[0].popperVM.$el).to.have.property('textContent', '');
+      done();
+    });
+  });
+
+  it('avatar tooltip - display text value', (done) => {
+    vm = createVue({
+      template: `
+          <el-avatar 
+            ref="avatarTooltip" 
+            src="${IMAGE_SUCCESS}" 
+            text="display 'text' by tooltip">
+          </el-avatar>
+        `
+    }, true);
+    vm.$nextTick(_ => {
+      expect(vm.$refs.avatarTooltip.$children[0].popperVM.$el).to.have.property('textContent', "display 'text' by tooltip");
+      done();
+    });
+  });
+
+  it('avatar tooltip - display tooltip value', (done) => {
+    vm = createVue({
+      template: `
+          <el-avatar 
+            ref="avatarTooltip" 
+            src="${IMAGE_SUCCESS}" 
+            tooltip="display 'tooltip' by tooltip">
+          </el-avatar>
+        `
+    }, true);
+    vm.$nextTick(_ => {
+      expect(vm.$refs.avatarTooltip.$children[0].popperVM.$el).to.have.property('textContent', "display 'tooltip' by tooltip");
+      done();
+    });
+  });
+
+  it('avatar tooltip - priority display tooltip value', (done) => {
+    vm = createVue({
+      template: `
+          <el-avatar 
+            ref="avatarTooltip" 
+            src="${IMAGE_SUCCESS}" 
+            text="text"  
+            tooltip="tooltip">
+          </el-avatar>
+        `
+    }, true);
+    vm.$nextTick(_ => {
+      expect(vm.$refs.avatarTooltip.$children[0].popperVM.$el).to.have.property('textContent', 'tooltip');
+      done();
+    });
+  });
+
+  it('image avatar', () => {
+    vm = createVue({
+      template: `
+        <el-avatar src="${IMAGE_SUCCESS}"></el-avatar>
+      `
+    }, true);
+    const imgElm = vm.$el.children[0];
+    expect(imgElm.tagName.toUpperCase()).to.equal('IMG');
+    expect(imgElm.src).to.equal(IMAGE_SUCCESS);
+  });
+
+  it('image fallback text', async() => {
+    vm = createVue({
+      template: `
+        <el-avatar 
+            src="${IMAGE_FAIL}" 
+            @error="errorHandler" 
+            text="fallback text" 
+            bgColor="#409eff">
+        </el-avatar>
+      `,
+      methods: {
+        errorHandler() {
+          return true;
+        }
+      }
+    }, true);
+    await wait();
+    const avatarElm = vm.$el;
+    expect(avatarElm.textContent.trim()).to.equal('fallback text'.slice(-2));
+    expect(avatarElm.style.backgroundColor).to.equal('rgb(64, 158, 255)');
+  });
+
+  it('image fallback slot', async() => {
+    vm = createVue({
+      template: `
+        <el-avatar src="${IMAGE_FAIL}" @error="errorHandler" text="fallback text">
+          fallback slot
+        </el-avatar>
+      `,
+      methods: {
+        errorHandler() {
+          return true;
+        }
+      }
+    }, true);
+    await wait();
+    const avatarElm = vm.$el;
+    expect(avatarElm.textContent.trim()).to.equal('fallback slot');
+  });
+
+  it('custom textFormatter', async() => {
+    vm = createVue({
+      template: `
+        <el-avatar
+            ref="avatarTooltip"
+            src="${IMAGE_FAIL}" 
+            @error="errorHandler" 
+            text="Linus Torvalds"
+            :text-formatter="(s) => s.split(' ').map(s=>s[0]).join('')"
+        >
+        </el-avatar>
+      `,
+      methods: {
+        errorHandler() {
+          return true;
+        }
+      }
+    }, true);
+    await wait();
+    const avatarElm = vm.$el;
+    expect(avatarElm.textContent.trim()).to.equal('LT');
+
+    return await new Promise(resolve=>{
+      vm.$nextTick(_ => {
+        expect(vm.$refs.avatarTooltip.$children[0].popperVM.$el).to.have.property('textContent', 'Linus Torvalds');
+        resolve();
+      });
+    });
+  });
+
+  it('image fit', async() => {
+    vm = createVue({
+      template: `
+        <div>
+          <el-avatar :src="url"></el-avatar>
+          <el-avatar :src="url" v-for="fit in fits" :fit="fit" :key="fit"></el-avatar>
+        </div>
+        
+      `,
+      data() {
+        return {
+          fits: ['fill', 'contain', 'cover', 'none', 'scale-down'],
+          url: IMAGE_SUCCESS
+        };
+      }
+    }, true);
+    await wait();
+    const containerElm = vm.$el;
+    expect(containerElm.children[0].children[0].style.objectFit).to.equal('cover');
+    expect(containerElm.children[1].children[0].style.objectFit).to.equal('fill');
+    expect(containerElm.children[2].children[0].style.objectFit).to.equal('contain');
+    expect(containerElm.children[3].children[0].style.objectFit).to.equal('cover');
+    expect(containerElm.children[4].children[0].style.objectFit).to.equal('none');
+    expect(containerElm.children[5].children[0].style.objectFit).to.equal('scale-down');
+  });
+});
+
diff --git a/test/unit/specs/backtop.spec.js b/test/unit/specs/backtop.spec.js
new file mode 100644
index 00000000000..05de5663e45
--- /dev/null
+++ b/test/unit/specs/backtop.spec.js
@@ -0,0 +1,28 @@
+import { createVue, destroyVM, wait } from '../util';
+
+describe('Backtop', () => {
+  let vm;
+  afterEach(() => {
+    destroyVM(vm);
+  });
+
+  it('create', async() => {
+    vm = createVue({
+      template: `
+        <div ref="scrollTarget" class="test-scroll"  style="height: 100px; overflow: auto">
+          <div style="height: 10000px; width: 100%">
+            <el-backtop target=".test-scroll">
+              <span>test_up_text</span>
+            </el-backtop>
+          </div>
+        </div>
+      `
+    }, true);
+    expect(vm.$el).to.exist;
+    expect(vm.$el.innerText).to.be.equal('');
+    vm.$refs.scrollTarget.scrollTop = 2000;
+    await wait();
+    expect(vm.$el.innerText).to.be.equal('test_up_text');
+  });
+});
+
diff --git a/test/unit/specs/button-group-enhance.spec.js b/test/unit/specs/button-group-enhance.spec.js
new file mode 100644
index 00000000000..9beebef1e3c
--- /dev/null
+++ b/test/unit/specs/button-group-enhance.spec.js
@@ -0,0 +1,15 @@
+import { createTest, destroyVM } from '../util';
+import ButtonGroupEnhance from 'packages/button-group-enhance';
+
+describe('ButtonGroupEnhance', () => {
+  let vm;
+  afterEach(() => {
+    destroyVM(vm);
+  });
+
+  it('create', () => {
+    vm = createTest(ButtonGroupEnhance, true);
+    expect(vm.$el).to.exist;
+  });
+});
+
diff --git a/test/unit/specs/calendar.spec.js b/test/unit/specs/calendar.spec.js
new file mode 100644
index 00000000000..a393e9640da
--- /dev/null
+++ b/test/unit/specs/calendar.spec.js
@@ -0,0 +1,108 @@
+import { createVue, destroyVM, waitImmediate } from '../util';
+
+describe('Calendar', () => {
+  let vm;
+  afterEach(() => {
+    destroyVM(vm);
+  });
+
+  it('create', async() => {
+    vm = createVue({
+      template: `
+      <el-calendar v-model="value"></el-calendar>
+      `,
+      data() {
+        return {
+          value: new Date('2019-04-01')
+        };
+      }
+    }, true);
+    const titleEl = vm.$el.querySelector('.el-calendar__title');
+    expect(/2019.*4/.test(titleEl.innerText)).to.be.true;
+    expect(vm.$el.querySelectorAll('thead th').length).to.equal(7);
+    const rows = vm.$el.querySelectorAll('.el-calendar-table__row');
+    expect(rows.length).to.equal(6);
+    rows[5].firstElementChild.click();
+
+    await waitImmediate();
+
+    expect(/2019.*5/.test(titleEl.innerText)).to.be.true;
+    const value = vm.value;
+    expect(value.getFullYear()).to.be.equal(2019);
+    expect(value.getMonth()).to.be.equal(4);
+    expect(vm.$el.querySelector('.is-selected span').innerText).to.be.equal('6');
+  });
+
+  it('range', () => {
+    vm = createVue({
+      template: `
+      <el-calendar :range="['2019-03-04', '2019-03-24']"></el-calendar>
+      `
+    }, true);
+    const titleEl = vm.$el.querySelector('.el-calendar__title');
+    expect(/2019.*3/.test(titleEl.innerText)).to.be.true;
+    const rows = vm.$el.querySelectorAll('.el-calendar-table__row');
+    expect(rows.length).to.equal(3);
+    expect(vm.$el.querySelector('.el-calendar__button-group')).to.be.a('null');
+  });
+
+  it('range tow monthes', async() => {
+    vm = createVue({
+      template: `
+      <el-calendar :range="['2019-04-15', '2019-05-19']"></el-calendar>
+      `
+    }, true);
+    const titleEl = vm.$el.querySelector('.el-calendar__title');
+    expect(/2019.*4/.test(titleEl.innerText)).to.be.true;
+    const dateTables = vm.$el.querySelectorAll('.el-calendar-table.is-range');
+    expect(dateTables.length).to.be.equal(2);
+    const rows = vm.$el.querySelectorAll('.el-calendar-table__row');
+    expect(rows.length).to.equal(5);
+    const cell = rows[rows.length - 1].firstElementChild;
+    cell.click();
+
+    await waitImmediate();
+
+    expect(/2019.*5/.test(titleEl.innerText)).to.be.true;
+    expect(cell.classList.contains('is-selected')).to.be.true;
+  });
+
+  it('firstDayOfWeek', async() => {
+    vm = createVue({
+      template: `
+      <el-calendar v-model="value" :first-day-of-week="0"></el-calendar>
+      `,
+      data() {
+        return {
+          value: new Date('2019-04-01')
+        };
+      }
+    }, true);
+    const head = vm.$el.querySelector('.el-calendar-table thead');
+    expect(head.firstElementChild.innerText).to.be.equal('日');
+    expect(head.lastElementChild.innerText).to.be.equal('六');
+    const firstRow = vm.$el.querySelector('.el-calendar-table__row');
+    expect(firstRow.firstElementChild.innerText).to.be.equal('31');
+    expect(firstRow.lastElementChild.innerText).to.be.equal('6');
+  });
+
+  it('firstDayOfWeek in range mode', async() => {
+    vm = createVue({
+      template: `
+      <el-calendar v-model="value" :first-day-of-week="7" :range="['2019-02-03', '2019-03-23']"></el-calendar>
+      `,
+      data() {
+        return {
+          value: new Date('2019-03-04')
+        };
+      }
+    }, true);
+    const head = vm.$el.querySelector('.el-calendar-table thead');
+    expect(head.firstElementChild.innerText).to.be.equal('日');
+    expect(head.lastElementChild.innerText).to.be.equal('六');
+    const firstRow = vm.$el.querySelector('.el-calendar-table__row');
+    expect(firstRow.firstElementChild.innerText).to.be.equal('3');
+    expect(firstRow.lastElementChild.innerText).to.be.equal('9');
+  });
+});
+
diff --git a/test/unit/specs/carousel.spec.js b/test/unit/specs/carousel.spec.js
index 139de234894..635d47990a6 100644
--- a/test/unit/specs/carousel.spec.js
+++ b/test/unit/specs/carousel.spec.js
@@ -10,12 +10,13 @@ describe('Carousel', () => {
     vm = createVue({
       template: `
         <div>
-          <el-carousel>
+          <el-carousel ref="carousel">
             <el-carousel-item v-for="item in 3" :key="item"></el-carousel-item>
           </el-carousel>
         </div>
       `
     });
+    expect(vm.$refs.carousel.direction).to.be.equal('horizontal');
     expect(vm.$el.querySelectorAll('.el-carousel__item').length).to.equal(3);
   });
 
@@ -256,5 +257,21 @@ describe('Carousel', () => {
       }, 10);
     }, 10);
   });
+
+  it('vertical direction', () => {
+    vm = createVue({
+      template: `
+        <div>
+          <el-carousel ref="carousel" :autoplay="false" direction="vertical" height="100px">
+            <el-carousel-item v-for="item in 3" :key="item"></el-carousel-item>
+          </el-carousel>
+        </div>
+      `
+    });
+    const items = vm.$el.querySelectorAll('.el-carousel__item');
+
+    expect(vm.$refs.carousel.direction).to.be.equal('vertical');
+    expect(items[0].style.transform.indexOf('translateY') !== -1).to.be.true;
+  });
 });
 
diff --git a/test/unit/specs/cascader-panel.spec.js b/test/unit/specs/cascader-panel.spec.js
new file mode 100644
index 00000000000..fda7d75a46a
--- /dev/null
+++ b/test/unit/specs/cascader-panel.spec.js
@@ -0,0 +1,581 @@
+import {
+  createTest,
+  createVue,
+  destroyVM,
+  waitImmediate,
+  wait,
+  triggerEvent
+} from '../util';
+import CascaderPanel from 'packages/cascader-panel';
+
+const selectedValue = ['zhejiang', 'hangzhou', 'xihu'];
+
+const options = [{
+  value: 'zhejiang',
+  label: 'Zhejiang',
+  children: [{
+    value: 'hangzhou',
+    label: 'Hangzhou',
+    children: [{
+      value: 'xihu',
+      label: 'West Lake'
+    }, {
+      value: 'binjiang',
+      label: 'Bin Jiang'
+    }]
+  }, {
+    value: 'ningbo',
+    label: 'NingBo',
+    children: [{
+      value: 'jiangbei',
+      label: 'Jiang Bei'
+    }, {
+      value: 'jiangdong',
+      label: 'Jiang Dong',
+      disabled: true
+    }]
+  }]
+}, {
+  value: 'jiangsu',
+  label: 'Jiangsu',
+  disabled: true,
+  children: [{
+    value: 'nanjing',
+    label: 'Nanjing',
+    children: [{
+      value: 'zhonghuamen',
+      label: 'Zhong Hua Men'
+    }]
+  }]
+}];
+
+const options2 = [{
+  id: 'zhejiang',
+  name: 'Zhejiang',
+  areas: [{
+    id: 'hangzhou',
+    name: 'Hangzhou',
+    areas: [{
+      id: 'xihu',
+      name: 'West Lake'
+    }, {
+      id: 'binjiang',
+      name: 'Bin Jiang'
+    }]
+  }, {
+    id: 'ningbo',
+    name: 'NingBo',
+    areas: [{
+      id: 'jiangbei',
+      label: 'Jiang Bei'
+    }, {
+      id: 'jiangdong',
+      name: 'Jiang Dong',
+      invalid: true
+    }]
+  }]
+}, {
+  id: 'jiangsu',
+  name: 'Jiangsu',
+  invalid: true,
+  areas: [{
+    id: 'nanjing',
+    name: 'Nanjing',
+    areas: [{
+      id: 'zhonghuamen',
+      name: 'Zhong Hua Men'
+    }]
+  }]
+}];
+
+const options3 = [
+  {
+    value: 'shanghai',
+    label: '上海',
+    children: [
+      {
+        value: 'baoshan',
+        label: '宝山'
+      }
+    ]
+  },
+  {
+    value: 'beijing',
+    label: '北京'
+  }
+];
+
+const getMenus = el => el.querySelectorAll('.el-cascader-menu');
+const getOptions = (el, menuIndex) => getMenus(el)[menuIndex].querySelectorAll('.el-cascader-node');
+const getValidOptions = (el, menuIndex) => getMenus(el)[menuIndex].querySelectorAll('.el-cascader-node[tabindex="-1"]');
+const getLabel = el => el.querySelector('.el-cascader-node__label').textContent;
+
+describe('CascaderPanel', () => {
+  let vm;
+  afterEach(() => {
+    destroyVM(vm);
+  });
+
+  it('create', () => {
+    vm = createTest(CascaderPanel, true);
+    expect(vm.$el).to.exist;
+  });
+
+  it('expand and check', async() => {
+    vm = createVue({
+      template: `
+        <el-cascader-panel
+          ref="panel"
+          v-model="value"
+          :options="options"></el-cascader-panel>
+      `,
+      data() {
+        return {
+          value: [],
+          options
+        };
+      }
+    }, true);
+
+    const el = vm.$el;
+    const expandHandler = sinon.spy();
+    const changeHandler = sinon.spy();
+    vm.$refs.panel.$on('expand-change', expandHandler);
+    vm.$refs.panel.$on('change', changeHandler);
+
+    expect(getMenus(el).length).to.equal(1);
+    expect(getOptions(el, 0).length).to.equal(2);
+
+    const firstOption = getOptions(el, 0)[0];
+    expect(getLabel(firstOption)).to.equal('Zhejiang');
+    firstOption.click();
+    await waitImmediate();
+    expect(expandHandler.calledOnceWith(['zhejiang'])).to.be.true;
+    expect(getMenus(el).length).to.equal(2);
+
+    getOptions(el, 1)[0].click();
+    await waitImmediate();
+    expect(getMenus(el).length).to.equal(3);
+
+    getOptions(el, 2)[0].click();
+    await waitImmediate();
+    expect(changeHandler.calledOnceWith(selectedValue)).to.be.true;
+    expect(vm.value).to.deep.equal(selectedValue);
+  });
+
+  it('with default value', async() => {
+    vm = createVue({
+      template: `
+        <el-cascader-panel
+          ref="panel"
+          v-model="value"
+          :options="options"></el-cascader-panel>
+      `,
+      data() {
+        return {
+          value: selectedValue,
+          options
+        };
+      }
+    }, true);
+
+    const el = vm.$el;
+
+    await waitImmediate();
+    expect(getMenus(el).length).to.equal(3);
+    expect(getOptions(el, 0)[0].className).to.includes('in-active-path');
+    expect(getOptions(el, 2)[0].className).to.includes('is-active');
+    expect(getOptions(el, 2)[0].querySelector('.el-icon-check')).to.exist;
+  });
+
+  it('disabled options', async() => {
+    vm = createVue({
+      template: `
+        <el-cascader-panel
+          ref="panel"
+          :value="value"
+          :options="options"></el-cascader-panel>
+      `,
+      data() {
+        return {
+          value: [],
+          options
+        };
+      }
+    }, true);
+
+    const el = vm.$el;
+    const expandHandler = sinon.spy();
+    vm.$refs.panel.$on('expand-change', expandHandler);
+
+    expect(getOptions(el, 0).length).to.equal(2);
+    expect(getValidOptions(el, 0).length).to.equal(1);
+
+    const secondOption = getOptions(el, 0)[1];
+    expect(secondOption.className).to.includes('is-disabled');
+    secondOption.click();
+
+    await waitImmediate();
+    expect(expandHandler.called).to.be.false;
+    expect(getMenus(el).length).to.equal(1);
+  });
+
+  it('expand by hover', async() => {
+    vm = createVue({
+      template: `
+        <el-cascader-panel
+          :options="options"
+          :props="props"></el-cascader-panel>
+      `,
+      data() {
+        return {
+          options,
+          props: {
+            expandTrigger: 'hover'
+          }
+        };
+      }
+    }, true);
+
+    const el = vm.$el;
+    triggerEvent(getOptions(el, 0)[1], 'mouseenter');
+    await waitImmediate();
+    expect(getMenus(el).length).to.equal(1);
+    triggerEvent(getOptions(el, 0)[0], 'mouseenter');
+    await waitImmediate();
+    expect(getMenus(el).length).to.equal(2);
+    triggerEvent(getOptions(el, 1)[0], 'mouseenter');
+    await waitImmediate();
+    expect(getMenus(el).length).to.equal(3);
+  });
+
+  it('emit value only', async() => {
+    vm = createVue({
+      template: `
+        <el-cascader-panel
+          ref="panel"
+          v-model="value"
+          :options="options"
+          :props="props"></el-cascader-panel>
+      `,
+      data() {
+        return {
+          value: 'xihu',
+          options,
+          props: {
+            emitPath: false
+          }
+        };
+      }
+    }, true);
+
+    const el = vm.$el;
+
+    await waitImmediate();
+    expect(getMenus(el).length).to.equal(3);
+    expect(getOptions(el, 2)[0].querySelector('.el-icon-check')).to.exist;
+
+    getOptions(el, 1)[1].click();
+    await waitImmediate();
+    getOptions(el, 2)[0].click();
+    await waitImmediate();
+    expect(vm.value).to.equal('jiangbei');
+  });
+
+  it('multiple mode', async() => {
+    vm = createVue({
+      template: `
+        <el-cascader-panel
+          v-model="value"
+          :options="options"
+          :props="props"></el-cascader-panel>
+      `,
+      data() {
+        return {
+          value: [],
+          options: options,
+          props: {
+            multiple: true
+          }
+        };
+      }
+    }, true);
+
+    const el = vm.$el;
+    const checkbox = getOptions(el, 0)[0].querySelector('.el-checkbox');
+    expect(checkbox).to.exist;
+    expect(checkbox.querySelector('.el-checkbox__input').className).to.not.includes('is-checked');
+    checkbox.querySelector('input').click();
+
+    await waitImmediate();
+    expect(checkbox.querySelector('.el-checkbox__input').className).to.includes('is-checked');
+    expect(vm.value.length).to.equal(3);
+  });
+
+  it('multiple mode with disabled default value', async() => {
+    vm = createVue({
+      template: `
+        <el-cascader-panel
+          v-model="value"
+          :options="options"
+          :props="props"></el-cascader-panel>
+      `,
+      data() {
+        return {
+          value: [['zhejiang', 'ningbo', 'jiangdong']],
+          options: options,
+          props: {
+            multiple: true
+          }
+        };
+      }
+    }, true);
+
+    const el = vm.$el;
+    const checkbox = getOptions(el, 0)[0].querySelector('.el-checkbox');
+
+    await waitImmediate();
+    expect(checkbox).to.exist;
+    expect(checkbox.querySelector('.el-checkbox__input').className).to.includes('is-indeterminate');
+    checkbox.querySelector('input').click();
+
+    await waitImmediate();
+    expect(checkbox.querySelector('.el-checkbox__input').className).to.includes('is-checked');
+    expect(vm.value.length).to.equal(4);
+
+    getOptions(el, 1)[1].click();
+    await waitImmediate();
+    getOptions(el, 2)[1].querySelector('input').click();
+    await waitImmediate();
+    expect(vm.value.length).to.equal(4);
+  });
+
+  it('check strictly in single mode', async() => {
+    vm = createVue({
+      template: `
+        <el-cascader-panel
+          v-model="value"
+          :options="options"
+          :props="props"></el-cascader-panel>
+      `,
+      data() {
+        return {
+          value: ['zhejiang'],
+          options: options,
+          props: {
+            checkStrictly: true
+          }
+        };
+      }
+    }, true);
+
+    const el = vm.$el;
+    const radio = getOptions(el, 0)[0].querySelector('.el-radio');
+
+    await waitImmediate();
+    expect(radio).to.exist;
+    expect(radio.className).to.includes('is-checked');
+
+    getOptions(el, 0)[0].click();
+    await waitImmediate();
+    getOptions(el, 1)[0].querySelector('input').click();
+    await waitImmediate();
+    expect(vm.value).to.deep.equal(['zhejiang', 'hangzhou']);
+    expect(getOptions(el, 0)[1].querySelector('.el-radio').className).to.includes('is-disabled');
+  });
+
+  it('check strictly in multiple mode', async() => {
+    vm = createVue({
+      template: `
+        <el-cascader-panel
+          v-model="value"
+          :options="options"
+          :props="props"></el-cascader-panel>
+      `,
+      data() {
+        return {
+          value: [['zhejiang']],
+          options: options,
+          props: {
+            multiple: true,
+            checkStrictly: true,
+            emitPath: false
+          }
+        };
+      }
+    }, true);
+
+    const el = vm.$el;
+    const checkbox = getOptions(el, 0)[0].querySelector('.el-checkbox');
+
+    await waitImmediate();
+    expect(checkbox).to.exist;
+    expect(checkbox.className).to.includes('is-checked');
+
+    getOptions(el, 0)[0].click();
+    await waitImmediate();
+    expect(getOptions(el, 1)[0].querySelector('.el-checkbox').className).to.not.includes('is-checked');
+    getOptions(el, 1)[0].querySelector('input').click();
+    await waitImmediate();
+    expect(vm.value).to.deep.equal(['zhejiang', 'hangzhou']);
+    expect(getOptions(el, 0)[1].querySelector('.el-checkbox').className).to.includes('is-disabled');
+  });
+
+  it('custom props', async() => {
+    vm = createVue({
+      template: `
+        <el-cascader-panel
+          v-model="value"
+          :options="options"
+          :props="props"></el-cascader-panel>
+      `,
+      data() {
+        return {
+          value: [],
+          options: options2,
+          props: {
+            value: 'id',
+            label: 'name',
+            children: 'areas',
+            disabled: 'invalid'
+          }
+        };
+      }
+    }, true);
+
+    const el = vm.$el;
+
+    expect(getMenus(el).length).to.equal(1);
+    expect(getOptions(el, 0).length).to.equal(2);
+    expect(getValidOptions(el, 0).length).to.equal(1);
+
+    const firstOption = getOptions(el, 0)[0];
+    expect(getLabel(firstOption)).to.equal('Zhejiang');
+    firstOption.click();
+    await waitImmediate();
+    expect(getMenus(el).length).to.equal(2);
+
+    getOptions(el, 1)[0].click();
+    await waitImmediate();
+    expect(getMenus(el).length).to.equal(3);
+
+    getOptions(el, 2)[0].click();
+    await waitImmediate();
+    expect(vm.value).to.deep.equal(selectedValue);
+  });
+
+  it('value key is same as label key', async() => {
+    vm = createVue({
+      template: `
+        <el-cascader-panel
+          v-model="value"
+          :options="options"
+          :props="props"></el-cascader-panel>
+      `,
+      data() {
+        return {
+          value: [],
+          options,
+          props: {
+            label: 'value'
+          }
+        };
+      }
+    }, true);
+
+    const el = vm.$el;
+
+    expect(getMenus(el).length).to.equal(1);
+    expect(getOptions(el, 0).length).to.equal(2);
+    expect(getValidOptions(el, 0).length).to.equal(1);
+
+    const firstOption = getOptions(el, 0)[0];
+    expect(getLabel(firstOption)).to.equal('zhejiang');
+    firstOption.click();
+    await waitImmediate();
+    expect(getMenus(el).length).to.equal(2);
+
+    getOptions(el, 1)[0].click();
+    await waitImmediate();
+    expect(getMenus(el).length).to.equal(3);
+
+    getOptions(el, 2)[0].click();
+    await waitImmediate();
+    expect(vm.value).to.deep.equal(selectedValue);
+  });
+
+  it('dynamic loading', async() => {
+    vm = createVue({
+      template: `
+        <el-cascader-panel
+          v-model="value"
+          :props="props"></el-cascader-panel>
+      `,
+      data() {
+        let id = 0;
+        return {
+          value: [],
+          props: {
+            lazy: true,
+            lazyLoad(node, resolve) {
+              const { level } = node;
+              setTimeout(() => {
+                const nodes = Array.from({ length: level + 1 })
+                  .map(() => ({
+                    value: ++id,
+                    label: `选项${id}`,
+                    leaf: level >= 2
+                  }));
+                resolve(nodes);
+              }, 1000);
+            }
+          }
+        };
+      }
+    }, true);
+
+    const el = vm.$el;
+    await wait(1000);
+    const firstOption = getOptions(el, 0)[0];
+    firstOption.click();
+    await waitImmediate();
+    expect(firstOption.querySelector('i').className).to.includes('el-icon-loading');
+    await wait(1000);
+    expect(firstOption.querySelector('i').className).to.includes('el-icon-arrow-right');
+    expect(getMenus(el).length).to.equal(2);
+    getOptions(el, 1)[0].click();
+    await wait(1000);
+    getOptions(el, 2)[0].click();
+    await waitImmediate();
+    expect(vm.value.length).to.equal(3);
+  });
+
+  it('click leaf hidden children', async() => {
+    vm = createVue({
+      template: `
+        <el-cascader-panel
+          ref="panel"
+          v-model="value"
+          :options="options"></el-cascader-panel>
+      `,
+      data() {
+        return {
+          value: [],
+          options: options3
+        };
+      }
+    }, true);
+
+    const el = vm.$el;
+    const elOptions = getOptions(el, 0);
+    const firstOption = elOptions[0];
+    const twoOption = elOptions[1];
+    firstOption.click();
+    await waitImmediate();
+    expect(getMenus(el).length).to.equal(2);
+    twoOption.click();
+    await waitImmediate();
+    expect(getMenus(el).length).to.equal(1);
+  });
+});
+
diff --git a/test/unit/specs/cascader.spec.js b/test/unit/specs/cascader.spec.js
index e8c7dac41c7..4beac36aa74 100644
--- a/test/unit/specs/cascader.spec.js
+++ b/test/unit/specs/cascader.spec.js
@@ -1,4 +1,56 @@
-import { createVue, destroyVM, triggerEvent, triggerClick } from '../util';
+import {
+  createTest,
+  createVue,
+  destroyVM,
+  waitImmediate,
+  wait,
+  triggerEvent
+} from '../util';
+import Cascader from 'packages/cascader';
+
+const options = [{
+  value: 'zhejiang',
+  label: 'Zhejiang',
+  children: [{
+    value: 'hangzhou',
+    label: 'Hangzhou',
+    children: [{
+      value: 'xihu',
+      label: 'West Lake'
+    }, {
+      value: 'binjiang',
+      label: 'Bin Jiang'
+    }]
+  }, {
+    value: 'ningbo',
+    label: 'NingBo',
+    children: [{
+      value: 'jiangbei',
+      label: 'Jiang Bei'
+    }, {
+      value: 'jiangdong',
+      label: 'Jiang Dong',
+      disabled: true
+    }]
+  }]
+}, {
+  value: 'jiangsu',
+  label: 'Jiangsu',
+  disabled: true,
+  children: [{
+    value: 'nanjing',
+    label: 'Nanjing',
+    children: [{
+      value: 'zhonghuamen',
+      label: 'Zhong Hua Men'
+    }]
+  }]
+}];
+
+const getMenus = el => el.querySelectorAll('.el-cascader-menu');
+const getOptions = (el, menuIndex) => getMenus(el)[menuIndex].querySelectorAll('.el-cascader-node');
+const selectedValue = ['zhejiang', 'hangzhou', 'xihu'];
+const getCloseButton = el => el.querySelectorAll('i.el-tag__close');
 
 describe('Cascader', () => {
   let vm;
@@ -6,846 +58,360 @@ describe('Cascader', () => {
     destroyVM(vm);
   });
 
-  it('create', done => {
-    vm = createVue({
+  it('create', () => {
+    vm = createTest(Cascader, true);
+    expect(vm.$el).to.exist;
+  });
+
+  it('toggle dropdown visible', async() => {
+    vm = createTest(Cascader, true);
+    const closeBtn = vm.$el.querySelector('i.el-input__icon');
+    expect(vm.$refs.popper.style.display).to.equal('none');
+    closeBtn.click();
+    await waitImmediate();
+    expect(vm.$refs.popper.style.display).to.includes('');
+    closeBtn.click();
+    await wait(500);
+    expect(vm.$refs.popper.style.display).to.includes('none');
+  });
+
+  it('expand and check', async() => {
+    vm = createTest({
       template: `
         <el-cascader
           ref="cascader"
-          placeholder="请选择"
-          :options="options"
-          clearable
-          v-model="selectedOptions"
-        ></el-cascader>
+          v-model="value"
+          :options="options"></el-cascader>
       `,
       data() {
         return {
-          options: [{
-            value: 'zhejiang',
-            label: 'Zhejiang',
-            children: [{
-              value: 'hangzhou',
-              label: 'Hangzhou',
-              children: [{
-                value: 'xihu',
-                label: 'West Lake'
-              }]
-            }, {
-              value: 'ningbo',
-              label: 'NingBo',
-              children: [{
-                value: 'jiangbei',
-                label: 'Jiang Bei'
-              }]
-            }]
-          }, {
-            value: 'jiangsu',
-            label: 'Jiangsu',
-            children: [{
-              value: 'nanjing',
-              label: 'Nanjing',
-              children: [{
-                value: 'zhonghuamen',
-                label: 'Zhong Hua Men'
-              }]
-            }]
-          }],
-          selectedOptions: []
+          value: [],
+          options
         };
       }
     }, true);
-    expect(vm.$el).to.be.exist;
-    vm.$el.click();
-    setTimeout(_ => {
-      expect(document.body.querySelector('.el-cascader-menus')).to.be.exist;
-
-      const menu = vm.$refs.cascader.menu;
-      const menuElm = menu.$el;
-      const item1 = menuElm.querySelector('.el-cascader-menu__item');
-
-      item1.click();
-      menu.$nextTick(_ => {
-        expect(menuElm.children.length).to.be.equal(3); // two menus and an arrow
-        expect(item1.classList.contains('is-active')).to.be.true;
-
-        const item2 = menuElm.children[2].querySelector('.el-cascader-menu__item');
-        item2.click();
-
-        menu.$nextTick(_ => {
-          expect(menuElm.children.length).to.be.equal(4);
-          expect(item2.classList.contains('is-active')).to.be.true;
 
-          const item3 = menuElm.children[3].querySelector('.el-cascader-menu__item');
-          item3.click();
-
-          setTimeout(_ => {
-            expect(document.body.querySelector('.el-cascader-menus').style.display).to.be.equal('none');
-            expect(vm.selectedOptions[0]).to.be.equal('zhejiang');
-            expect(vm.selectedOptions[1]).to.be.equal('hangzhou');
-            expect(vm.selectedOptions[2]).to.be.equal('xihu');
+    const { body } = document;
+    const expandHandler = sinon.spy();
+    const changeHandler = sinon.spy();
+
+    vm.$refs.cascader.$on('expand-change', expandHandler);
+    vm.$refs.cascader.$on('change', changeHandler);
+
+    getOptions(body, 0)[0].click();
+    await waitImmediate();
+    expect(expandHandler.calledOnceWith(['zhejiang'])).to.be.true;
+    getOptions(body, 1)[0].click();
+    await waitImmediate();
+    const checkedOption = getOptions(body, 2)[0];
+    checkedOption.click();
+    await waitImmediate();
+    expect(changeHandler.calledOnceWith(selectedValue)).to.be.true;
+    expect(vm.value).to.deep.equal(selectedValue);
+    expect(checkedOption.querySelector('i.el-icon-check')).to.exist;
+    expect(vm.$el.querySelector('input').value).to.equal('Zhejiang / Hangzhou / West Lake');
+  });
 
-            triggerEvent(vm.$refs.cascader.$el, 'mouseenter');
-            vm.$nextTick(_ => {
-              vm.$refs.cascader.$el.querySelector('.el-cascader__clearIcon').click();
-              vm.$nextTick(_ => {
-                expect(vm.selectedOptions.length).to.be.equal(0);
-                done();
-              });
-            });
-          }, 500);
-        });
-      });
-    }, 300);
+  it('disabled', async() => {
+    vm = createTest(Cascader, {
+      disabled: true
+    }, true);
+    expect(vm.$el.className).to.includes('is-disabled');
+    vm.$el.click();
+    await waitImmediate();
+    expect(vm.$refs.popper.style.display).to.includes('none');
   });
-  // Github issue #3470
-  it('should work with zero', done => {
+
+  it('with default value', async() => {
     vm = createVue({
       template: `
         <el-cascader
-          ref="cascader"
-          placeholder="请选择"
-          :options="options"
-          clearable
-          v-model="selectedOptions"
-        ></el-cascader>
+          v-model="value"
+          :options="options"></el-cascader>
       `,
       data() {
         return {
-          options: [{
-            value: 'zhejiang',
-            label: 'Zhejiang',
-            children: [{
-              value: 0,
-              label: 'Hangzhou',
-              children: [{
-                value: 'xihu',
-                label: 'West Lake'
-              }]
-            }, {
-              value: 'ningbo',
-              label: 'NingBo',
-              children: [{
-                value: 'jiangbei',
-                label: 'Jiang Bei'
-              }]
-            }]
-          }, {
-            value: 'jiangsu',
-            label: 'Jiangsu',
-            children: [{
-              value: 'nanjing',
-              label: 'Nanjing',
-              children: [{
-                value: 'zhonghuamen',
-                label: 'Zhong Hua Men'
-              }]
-            }]
-          }],
-          selectedOptions: []
+          value: selectedValue,
+          options
         };
       }
     }, true);
-    expect(vm.$el).to.be.exist;
-    vm.$el.click();
-    setTimeout(_ => {
-      expect(document.body.querySelector('.el-cascader-menus')).to.be.exist;
-
-      const menu = vm.$refs.cascader.menu;
-      const menuElm = menu.$el;
-      const item1 = menuElm.querySelector('.el-cascader-menu__item');
-
-      item1.click();
-      menu.$nextTick(_ => {
-        expect(menuElm.children.length).to.be.equal(3);
-        expect(item1.classList.contains('is-active')).to.be.true;
-
-        const item2 = menuElm.children[2].querySelector('.el-cascader-menu__item');
-        item2.click();
 
-        menu.$nextTick(_ => {
-          expect(menuElm.children.length).to.be.equal(4);
-          expect(item2.classList.contains('is-active')).to.be.true;
-
-          const item3 = menuElm.children[3].querySelector('.el-cascader-menu__item');
-          item3.click();
-
-          setTimeout(_ => {
-            expect(document.body.querySelector('.el-cascader-menus').style.display).to.be.equal('none');
-            expect(vm.selectedOptions[0]).to.be.equal('zhejiang');
-            expect(vm.selectedOptions[1]).to.be.equal(0);
-            expect(vm.selectedOptions[2]).to.be.equal('xihu');
-
-            triggerEvent(vm.$refs.cascader.$el, 'mouseenter');
-            vm.$nextTick(_ => {
-              vm.$refs.cascader.$el.querySelector('.el-cascader__clearIcon').click();
-              vm.$nextTick(_ => {
-                expect(vm.selectedOptions.length).to.be.equal(0);
-                done();
-              });
-            });
-          }, 500);
-        });
-      });
-    }, 300);
+    const el = vm.$el;
+    await waitImmediate();
+    expect(getMenus(el).length).to.equal(3);
+    expect(getOptions(el, 2)[0].querySelector('i').className).to.includes('el-icon-check');
+    expect(vm.$el.querySelector('input').value).to.equal('Zhejiang / Hangzhou / West Lake');
   });
-  it('not allow clearable', done => {
+
+  it('async set selected value', async() => {
     vm = createVue({
       template: `
         <el-cascader
-          ref="cascader"
-          placeholder="请选择"
-          :options="options"
-          :clearable="false"
-          v-model="selectedOptions"
-        ></el-cascader>
+          v-model="value"
+          :options="options"></el-cascader>
       `,
       data() {
         return {
-          options: [{
-            value: 'zhejiang',
-            label: 'Zhejiang',
-            children: [{
-              value: 'hangzhou',
-              label: 'Hangzhou',
-              children: [{
-                value: 'xihu',
-                label: 'West Lake'
-              }]
-            }, {
-              value: 'ningbo',
-              label: 'NingBo',
-              children: [{
-                value: 'jiangbei',
-                label: 'Jiang Bei'
-              }]
-            }]
-          }, {
-            value: 'jiangsu',
-            label: 'Jiangsu',
-            children: [{
-              value: 'nanjing',
-              label: 'Nanjing',
-              children: [{
-                value: 'zhonghuamen',
-                label: 'Zhong Hua Men'
-              }]
-            }]
-          }],
-          selectedOptions: []
+          value: [],
+          options
         };
       }
     }, true);
-    expect(vm.$el).to.be.exist;
-    triggerEvent(vm.$refs.cascader.$el, 'mouseenter');
-    vm.$nextTick(_ => {
-      expect(vm.$refs.cascader.$el.querySelector('.el-cascader__clearIcon')).to.not.exist;
-      done();
-    });
+
+    const el = vm.$el;
+    vm.value = selectedValue;
+    await waitImmediate();
+    expect(getMenus(el).length).to.equal(3);
+    expect(getOptions(el, 2)[0].querySelector('i').className).to.includes('el-icon-check');
+    expect(vm.$el.querySelector('input').value).to.equal('Zhejiang / Hangzhou / West Lake');
   });
-  it('disabled options', done => {
+
+  it('default value with async options', async() => {
     vm = createVue({
       template: `
         <el-cascader
-          ref="cascader"
-          placeholder="请选择"
-          :options="options"
-          v-model="selectedOptions"
-        ></el-cascader>
+          v-model="value"
+          :options="options"></el-cascader>
       `,
       data() {
         return {
-          options: [{
-            value: 'zhejiang',
-            label: 'Zhejiang',
-            disabled: true,
-            children: [{
-              value: 'hangzhou',
-              label: 'Hangzhou',
-              children: [{
-                value: 'xihu',
-                label: 'West Lake'
-              }]
-            }, {
-              value: 'ningbo',
-              label: 'NingBo',
-              children: [{
-                value: 'jiangbei',
-                label: 'Jiang Bei'
-              }]
-            }]
-          }, {
-            value: 'jiangsu',
-            label: 'Jiangsu',
-            children: [{
-              value: 'nanjing',
-              label: 'Nanjing',
-              children: [{
-                value: 'zhonghuamen',
-                label: 'Zhong Hua Men'
-              }]
-            }]
-          }],
-          selectedOptions: []
+          value: selectedValue,
+          options: []
         };
       }
     }, true);
-    expect(vm.$el).to.be.exist;
-    vm.$el.click();
-    setTimeout(_ => {
-      expect(document.body.querySelector('.el-cascader-menus')).to.be.exist;
 
-      const menu = vm.$refs.cascader.menu;
-      const menuElm = menu.$el;
-      const item1 = menuElm.querySelector('.el-cascader-menu__item');
-
-      item1.click();
-      menu.$nextTick(_ => {
-        expect(menuElm.children.length).to.be.equal(2);
-        expect(item1.classList.contains('is-active')).to.be.false;
-        done();
-      });
-    }, 300);
+    const el = vm.$el;
+    vm.options = options;
+    await waitImmediate();
+    expect(getMenus(el).length).to.equal(3);
+    expect(getOptions(el, 2)[0].querySelector('i').className).to.includes('el-icon-check');
+    expect(vm.$el.querySelector('input').value).to.equal('Zhejiang / Hangzhou / West Lake');
   });
-  it('default value', done => {
+
+  it('clearable', async() => {
     vm = createVue({
       template: `
         <el-cascader
-          ref="cascader"
-          placeholder="请选择"
+          v-model="value"
           :options="options"
-          v-model="selectedOptions"
-        ></el-cascader>
+          clearable></el-cascader>
       `,
       data() {
         return {
-          options: [{
-            value: 'zhejiang',
-            label: 'Zhejiang',
-            children: [{
-              value: 'hangzhou',
-              label: 'Hangzhou',
-              children: [{
-                value: 'xihu',
-                label: 'West Lake'
-              }]
-            }, {
-              value: 'ningbo',
-              label: 'NingBo',
-              children: [{
-                value: 'jiangbei',
-                label: 'Jiang Bei'
-              }]
-            }]
-          }, {
-            value: 'jiangsu',
-            label: 'Jiangsu',
-            children: [{
-              value: 'nanjing',
-              label: 'Nanjing',
-              children: [{
-                value: 'zhonghuamen',
-                label: 'Zhong Hua Men'
-              }]
-            }]
-          }],
-          selectedOptions: ['zhejiang', 'hangzhou', 'xihu']
+          value: selectedValue,
+          options
         };
       }
     }, true);
-    expect(vm.$el).to.be.exist;
-    vm.$el.click();
-    setTimeout(_ => {
-      expect(document.body.querySelector('.el-cascader-menus')).to.be.exist;
-      const menu = vm.$refs.cascader.menu;
-      const menuElm = menu.$el;
-      const item1 = menuElm.children[1].querySelector('.el-cascader-menu__item');
-      const item2 = menuElm.children[2].querySelector('.el-cascader-menu__item');
-      const item3 = menuElm.children[3].querySelector('.el-cascader-menu__item');
 
-      expect(menuElm.children.length).to.be.equal(4);
-      expect(item1.classList.contains('is-active')).to.be.true;
-      expect(item2.classList.contains('is-active')).to.be.true;
-      expect(item3.classList.contains('is-active')).to.be.true;
-      triggerClick(document, 'mouseup');
-      setTimeout(_ => {
-        expect(document.body.querySelector('.el-cascader-menus').style.display).to.be.equal('none');
-        done();
-      }, 500);
-    }, 300);
+    triggerEvent(vm.$el, 'mouseenter');
+    await waitImmediate();
+    const closeBtn = vm.$el.querySelector('i.el-input__icon');
+    expect(closeBtn).to.exist;
+    closeBtn.click();
+    await waitImmediate();
+    expect(vm.value).to.deep.equal([]);
   });
-  it('expand by hover', done => {
+
+  it('show last level label', async() => {
     vm = createVue({
       template: `
         <el-cascader
-          ref="cascader"
-          placeholder="请选择"
+          v-model="value"
           :options="options"
-          expand-trigger="hover"
-          v-model="selectedOptions"
-        ></el-cascader>
+          :show-all-levels="false"></el-cascader>
       `,
       data() {
         return {
-          options: [{
-            value: 'zhejiang',
-            label: 'Zhejiang',
-            children: [{
-              value: 'hangzhou',
-              label: 'Hangzhou',
-              children: [{
-                value: 'xihu',
-                label: 'West Lake'
-              }]
-            }, {
-              value: 'ningbo',
-              label: 'NingBo',
-              children: [{
-                value: 'jiangbei',
-                label: 'Jiang Bei'
-              }]
-            }]
-          }, {
-            value: 'jiangsu',
-            label: 'Jiangsu',
-            children: [{
-              value: 'nanjing',
-              label: 'Nanjing',
-              children: [{
-                value: 'zhonghuamen',
-                label: 'Zhong Hua Men'
-              }]
-            }]
-          }],
-          selectedOptions: []
+          value: selectedValue,
+          options
         };
       }
     }, true);
-    expect(vm.$el).to.be.exist;
-    vm.$el.click();
-    setTimeout(_ => {
-      expect(document.body.querySelector('.el-cascader-menus')).to.be.exist;
-
-      const menu = vm.$refs.cascader.menu;
-      const menuElm = menu.$el;
-      const item1 = menuElm.querySelector('.el-cascader-menu__item');
-
-      triggerEvent(item1, 'mouseenter');
-      menu.$nextTick(_ => {
-        expect(menuElm.children.length).to.be.equal(3);
-        expect(item1.classList.contains('is-active')).to.be.true;
-
-        const item2 = menuElm.children[2].querySelector('.el-cascader-menu__item');
-        triggerEvent(item2, 'mouseenter');
 
-        menu.$nextTick(_ => {
-          expect(menuElm.children.length).to.be.equal(4);
-          expect(item2.classList.contains('is-active')).to.be.true;
-
-          const item3 = menuElm.children[3].querySelector('.el-cascader-menu__item');
-          item3.click();
-
-          setTimeout(_ => {
-            expect(document.body.querySelector('.el-cascader-menus').style.display).to.be.equal('none');
-            expect(vm.selectedOptions[0]).to.be.equal('zhejiang');
-            expect(vm.selectedOptions[1]).to.be.equal('hangzhou');
-            expect(vm.selectedOptions[2]).to.be.equal('xihu');
-            done();
-          }, 500);
-        });
-      });
-    }, 300);
+    const el = vm.$el;
+    await waitImmediate();
+    expect(getMenus(el).length).to.equal(3);
+    expect(getOptions(el, 2)[0].querySelector('i').className).to.includes('el-icon-check');
+    expect(vm.$el.querySelector('input').value).to.equal('West Lake');
   });
-  it('change on select', done => {
+
+  it('multiple mode', async() => {
     vm = createVue({
       template: `
         <el-cascader
-          ref="cascader"
-          placeholder="请选择"
+          v-model="value"
           :options="options"
-          change-on-select
-          v-model="selectedOptions"
-        ></el-cascader>
+          :disabled="disabled"
+          :props="props"></el-cascader>
       `,
       data() {
         return {
-          options: [{
-            value: 'zhejiang',
-            label: 'Zhejiang',
-            children: [{
-              value: 'hangzhou',
-              label: 'Hangzhou',
-              children: [{
-                value: 'xihu',
-                label: 'West Lake'
-              }]
-            }, {
-              value: 'ningbo',
-              label: 'NingBo',
-              children: [{
-                value: 'jiangbei',
-                label: 'Jiang Bei'
-              }]
-            }]
-          }, {
-            value: 'jiangsu',
-            label: 'Jiangsu',
-            children: [{
-              value: 'nanjing',
-              label: 'Nanjing',
-              children: [{
-                value: 'zhonghuamen',
-                label: 'Zhong Hua Men'
-              }]
-            }]
-          }],
-          selectedOptions: []
+          value: [],
+          options,
+          disabled: false,
+          props: {
+            multiple: true
+          }
         };
       }
     }, true);
-    expect(vm.$el).to.be.exist;
-    vm.$el.click();
-    setTimeout(_ => {
-      expect(document.body.querySelector('.el-cascader-menus')).to.be.exist;
-
-      const menu = vm.$refs.cascader.menu;
-      const menuElm = menu.$el;
-      const item1 = menuElm.querySelector('.el-cascader-menu__item');
-
-      item1.click();
-      menu.$nextTick(_ => {
-        expect(menuElm.children.length).to.be.equal(3);
-        expect(item1.classList.contains('is-active')).to.be.true;
-        expect(vm.selectedOptions[0]).to.be.equal('zhejiang');
-
-        const item2 = menuElm.children[2].querySelector('.el-cascader-menu__item');
-        item2.click();
-
-        menu.$nextTick(_ => {
-          expect(menuElm.children.length).to.be.equal(4);
-          expect(item2.classList.contains('is-active')).to.be.true;
-          expect(vm.selectedOptions[1]).to.be.equal('hangzhou');
-
-          const item3 = menuElm.children[3].querySelector('.el-cascader-menu__item');
-          item3.click();
 
-          setTimeout(_ => {
-            expect(document.body.querySelector('.el-cascader-menus').style.display).to.be.equal('none');
-            expect(vm.selectedOptions[0]).to.be.equal('zhejiang');
-            expect(vm.selectedOptions[1]).to.be.equal('hangzhou');
-            expect(vm.selectedOptions[2]).to.be.equal('xihu');
-            done();
-          }, 500);
-        });
-      });
-    }, 300);
+    getOptions(document.body, 0)[0].querySelector('.el-checkbox input').click();
+    await waitImmediate();
+    expect(vm.value.length).to.equal(3);
+    expect(getCloseButton(vm.$el).length).to.equal(3);
+
+    const tags = vm.$el.querySelectorAll('.el-tag');
+    const closeBtn = tags[0].querySelector('.el-tag__close');
+    expect(tags.length).to.equal(3);
+    expect(closeBtn).to.exist;
+    closeBtn.click();
+    await waitImmediate();
+    expect(vm.value.length).to.equal(2);
+    expect(vm.$el.querySelectorAll('.el-tag').length).to.equal(2);
+
+    vm.disabled = true;
+    await waitImmediate();
+    expect(getCloseButton(vm.$el).length).to.equal(0);
   });
-  it('hover and select', done => {
+
+  it('clearable in multiple mode', async() => {
     vm = createVue({
       template: `
         <el-cascader
-          ref="cascader"
-          placeholder="请选择"
+          v-model="value"
           :options="options"
-          expand-trigger="hover"
-          change-on-select
-          v-model="selectedOptions"
-        ></el-cascader>
+          :props="props"
+          clearable></el-cascader>
       `,
       data() {
         return {
-          options: [{
-            value: 'zhejiang',
-            label: 'Zhejiang',
-            children: [{
-              value: 'hangzhou',
-              label: 'Hangzhou',
-              children: [{
-                value: 'xihu',
-                label: 'West Lake'
-              }]
-            }, {
-              value: 'ningbo',
-              label: 'NingBo',
-              children: [{
-                value: 'jiangbei',
-                label: 'Jiang Bei'
-              }]
-            }]
-          }, {
-            value: 'jiangsu',
-            label: 'Jiangsu',
-            children: [{
-              value: 'nanjing',
-              label: 'Nanjing',
-              children: [{
-                value: 'zhonghuamen',
-                label: 'Zhong Hua Men'
-              }]
-            }]
-          }],
-          selectedOptions: []
+          value: [],
+          options,
+          props: {
+            multiple: true,
+            emitPath: false
+          }
         };
       }
     }, true);
-    vm.$el.click();
-    vm.$nextTick(() => {
-      const menu = vm.$refs.cascader.menu;
-      const menuElm = menu.$el;
-      const item1 = menuElm.querySelector('.el-cascader-menu__item');
-
-      triggerEvent(item1, 'mouseenter');
-      menu.$nextTick(() => {
-        expect(vm.selectedOptions[0]).to.be.equal('zhejiang');
-
-        const spy = sinon.spy();
-        menu.$on('closeInside', spy);
-        item1.click();
-
-        menu.$nextTick(() => {
-          expect(spy.calledWith(true)).to.be.true;
-          expect(menu.visible).to.be.false;
-          done();
-        });
-      });
-    });
+    vm.value = ['xihu', 'binjiang', 'jiangbei', 'jiangdong'];
+    await waitImmediate();
+    expect(getOptions(document.body, 0)[0].querySelector('.el-checkbox.is-checked')).to.exist;
+    triggerEvent(vm.$el, 'mouseenter');
+    await waitImmediate();
+    const closeBtn = vm.$el.querySelector('i.el-input__icon');
+    expect(closeBtn).to.exist;
+    closeBtn.click();
+    await waitImmediate();
+    expect(vm.value.length).to.equal(1);
   });
-  it('filterable', done => {
+
+  it('collapse tags', async() => {
     vm = createVue({
       template: `
         <el-cascader
-          ref="cascader"
-          placeholder="请选择"
+          v-model="value"
           :options="options"
-          filterable
-          :debounce="0"
-          v-model="selectedOptions"
-        ></el-cascader>
+          :props="props"
+          collapse-tags></el-cascader>
       `,
       data() {
         return {
-          options: [{
-            value: 'zhejiang',
-            label: 'Zhejiang',
-            children: [{
-              value: 'hangzhou',
-              label: 'Hangzhou',
-              children: [{
-                value: 'xihu',
-                label: 'West Lake'
-              }]
-            }, {
-              value: 'ningbo',
-              label: 'NingBo',
-              children: [{
-                value: 'jiangbei',
-                label: 'Jiang Bei'
-              }]
-            }]
-          }, {
-            value: 'jiangsu',
-            label: 'Jiangsu',
-            children: [{
-              value: 'nanjing',
-              label: 'Nanjing',
-              children: [{
-                value: 'zhonghuamen',
-                label: 'Zhong Hua Men'
-              }]
-            }]
-          }],
-          selectedOptions: []
+          value: ['xihu', 'binjiang', 'jiangbei', 'jiangdong'],
+          options,
+          props: {
+            multiple: true,
+            emitPath: false
+          }
         };
       }
     }, true);
-    expect(vm.$el).to.be.exist;
-    vm.$el.click();
-    vm.$nextTick(_ => {
-      vm.$refs.cascader.handleInputChange('z');
-      setTimeout(_ => {
-        expect(document.body.querySelector('.el-cascader-menus')).to.be.exist;
-
-        const menu = vm.$refs.cascader.menu;
-        const menuElm = menu.$el;
-        const item1 = menuElm.querySelector('.el-cascader-menu__item');
-
-        expect(menuElm.children.length).to.be.equal(2);
-        expect(menuElm.children[1].children.length).to.be.equal(3);
-
-        item1.click();
-
-        setTimeout(_ => {
-          expect(document.body.querySelector('.el-cascader-menus').style.display).to.be.equal('none');
-          expect(vm.selectedOptions[0]).to.be.equal('zhejiang');
-          expect(vm.selectedOptions[1]).to.be.equal('hangzhou');
-          expect(vm.selectedOptions[2]).to.be.equal('xihu');
-          done();
-        }, 500);
-      }, 300);
-    });
+    await waitImmediate();
+    const tags = vm.$el.querySelectorAll('.el-tag');
+    expect(tags.length).to.equal(2);
+    expect(tags[0].querySelector('.el-tag__close')).to.exist;
+    expect(tags[1].querySelector('.el-tag__close')).to.be.null;
+    tags[0].querySelector('.el-tag__close').click();
+    expect(tags[1].textContent).to.equal('+ 3');
+    await waitImmediate();
+    expect(vm.value.length).to.equal(3);
+    vm.$el.querySelector('.el-tag .el-tag__close').click();
+    await waitImmediate();
+    vm.$el.querySelector('.el-tag .el-tag__close').click();
+    await waitImmediate();
+    expect(vm.$el.querySelector('.el-tag')).to.exist;
+    // disabled tag can not be closed
+    expect(vm.$el.querySelector('.el-tag .el-tag__close')).to.be.null;
   });
-  it('props', done => {
+
+  it('filterable', async() => {
     vm = createVue({
       template: `
         <el-cascader
-          ref="cascader"
+          v-model="value"
           :options="options"
-          :props="props"
-          v-model="selectedOptions"
-        ></el-cascader>
+          filterable></el-cascader>
       `,
       data() {
         return {
-          options: [{
-            label: 'Zhejiang',
-            cities: [{
-              label: 'Hangzhou'
-            }, {
-              label: 'NingBo'
-            }]
-          }, {
-            label: 'Jiangsu',
-            cities: [{
-              label: 'Nanjing'
-            }]
-          }],
-          props: {
-            value: 'label',
-            children: 'cities'
-          },
-          selectedOptions: []
+          value: [],
+          options
         };
       }
     }, true);
-    vm.$el.click();
-    setTimeout(_ => {
-      expect(document.body.querySelector('.el-cascader-menus')).to.be.exist;
-
-      const menu = vm.$refs.cascader.menu;
-      const menuElm = menu.$el;
-      let items = menuElm.querySelectorAll('.el-cascader-menu__item');
-      expect(items.length).to.equal(2);
-      items[0].click();
-      setTimeout(_ => {
-        items = menuElm.querySelectorAll('.el-cascader-menu__item');
-        expect(items.length).to.equal(4);
-        expect(items[items.length - 1].innerText).to.equal('NingBo');
-        done();
-      }, 100);
-    }, 100);
+    const el = vm.$el;
+    const { body } = document;
+    const input = el.querySelector('input');
+    el.click();
+    await waitImmediate();
+    input.value = 'Zhejiang';
+    triggerEvent(input, 'input');
+    await wait(300);
+    expect(body.querySelector('.el-cascader__suggestion-list')).to.exist;
+    expect(body.querySelectorAll('.el-cascader__suggestion-item').length).to.equal(3);
+    body.querySelectorAll('.el-cascader__suggestion-item')[0].click();
+    await waitImmediate();
+    expect(vm.value).to.deep.equal(selectedValue);
   });
-  it('show last level', done => {
+
+  it('filter method', async() => {
     vm = createVue({
       template: `
         <el-cascader
-          ref="cascader"
+          v-model="value"
           :options="options"
-          :show-all-levels="false"
-          v-model="selectedOptions"
-        ></el-cascader>
+          :filter-method="filterMethod"
+          filterable></el-cascader>
       `,
       data() {
         return {
-          options: [{
-            value: 'zhejiang',
-            label: 'Zhejiang',
-            children: [{
-              value: 'hangzhou',
-              label: 'Hangzhou',
-              children: [{
-                value: 'xihu',
-                label: 'West Lake'
-              }]
-            }, {
-              value: 'ningbo',
-              label: 'NingBo',
-              children: [{
-                value: 'jiangbei',
-                label: 'Jiang Bei'
-              }]
-            }]
-          }, {
-            value: 'jiangsu',
-            label: 'Jiangsu',
-            children: [{
-              value: 'nanjing',
-              label: 'Nanjing',
-              children: [{
-                value: 'zhonghuamen',
-                label: 'Zhong Hua Men'
-              }]
-            }]
-          }],
-          selectedOptions: ['zhejiang', 'ningbo', 'jiangbei']
+          value: [],
+          options
         };
+      },
+      methods: {
+        filterMethod(node, keyword) {
+          const { text, path } = node;
+          return text.includes(keyword) || path.includes(keyword);
+        }
       }
     }, true);
-    setTimeout(_ => {
-      const span = vm.$el.querySelector('.el-cascader__label');
-      expect(span.innerText).to.equal('Jiang Bei');
-      done();
-    }, 100);
-  });
-  describe('Cascader Events', () => {
-    it('event:focus & blur', done => {
-      vm = createVue({
-        template: `
-          <el-cascader
-            ref="cascader"
-            placeholder="请选择"
-            :options="options"
-            clearable
-            v-model="selectedOptions"
-          ></el-cascader>
-        `,
-        data() {
-          return {
-            options: [{
-              value: 'zhejiang',
-              label: 'Zhejiang',
-              children: [{
-                value: 'hangzhou',
-                label: 'Hangzhou',
-                children: [{
-                  value: 'xihu',
-                  label: 'West Lake'
-                }]
-              }, {
-                value: 'ningbo',
-                label: 'NingBo',
-                children: [{
-                  value: 'jiangbei',
-                  label: 'Jiang Bei'
-                }]
-              }]
-            }, {
-              value: 'jiangsu',
-              label: 'Jiangsu',
-              children: [{
-                value: 'nanjing',
-                label: 'Nanjing',
-                children: [{
-                  value: 'zhonghuamen',
-                  label: 'Zhong Hua Men'
-                }]
-              }]
-            }],
-            selectedOptions: []
-          };
-        }
-      }, true);
-
-      const spyFocus = sinon.spy();
-      const spyBlur = sinon.spy();
-
-      vm.$refs.cascader.$on('focus', spyFocus);
-      vm.$refs.cascader.$on('blur', spyBlur);
-      vm.$el.querySelector('input').focus();
-      vm.$el.querySelector('input').blur();
-
-      vm.$nextTick(_ => {
-        expect(spyFocus.calledOnce).to.be.true;
-        expect(spyBlur.calledOnce).to.be.true;
-        done();
-      });
-    });
+    const el = vm.$el;
+    const { body } = document;
+    const input = el.querySelector('input');
+    el.click();
+    await waitImmediate();
+    input.value = 'Zhejiang';
+    triggerEvent(input, 'input');
+    await wait(300);
+    expect(body.querySelectorAll('.el-cascader__suggestion-item').length).to.equal(3);
+    input.value = 'xihu';
+    triggerEvent(input, 'input');
+    await wait(300);
+    expect(body.querySelector('.el-cascader__suggestion-item').textContent).to.equal('Zhejiang / Hangzhou / West Lake');
   });
 });
diff --git a/test/unit/specs/checkbox-img-button.spec.js b/test/unit/specs/checkbox-img-button.spec.js
new file mode 100644
index 00000000000..dfd3835b399
--- /dev/null
+++ b/test/unit/specs/checkbox-img-button.spec.js
@@ -0,0 +1,48 @@
+import { createVue, destroyVM } from '../util';
+
+describe('CheckboxImgButton', () => {
+  let vm;
+  afterEach(() => {
+    destroyVM(vm);
+  });
+
+  it('create', done => {
+    vm = createVue({
+      template: `
+        <el-checkbox-img-button v-model="checked"></el-checkbox-img-button>
+      `,
+      data() {
+        return {
+          checked: false
+        };
+      }
+    }, true);
+    let elm = vm.$el;
+    expect(elm.classList.contains('el-checkbox-img-button')).to.be.true;
+    elm.click();
+    vm.$nextTick(_ => {
+      expect(elm.querySelector('.is-checked')).to.be.ok;
+      done();
+    });
+  });
+
+  it('vertical', () => {
+    vm = createVue({
+      template: `
+        <el-checkbox-img-button
+          v-model="checked"
+          vertical
+        >
+        </el-checkbox-img-button>
+      `,
+      data() {
+        return {
+          checked: false
+        };
+      }
+    }, true);
+    let elm = vm.$el;
+    expect(elm.classList.contains('is-vertical')).to.be.ok;
+  });
+
+});
diff --git a/test/unit/specs/checkbox.spec.js b/test/unit/specs/checkbox.spec.js
index 4e1bc99480c..eefd49b2079 100644
--- a/test/unit/specs/checkbox.spec.js
+++ b/test/unit/specs/checkbox.spec.js
@@ -147,6 +147,7 @@ describe('Checkbox', () => {
       }
     }, true);
     expect(vm.checkList.length === 1).to.be.true;
+    expect(vm.$refs.a.isDisabled).to.be.true;
     vm.$refs.a.$el.click();
     vm.$nextTick(() => {
       expect(vm.checkList.indexOf('a') !== -1).to.be.true;
@@ -158,6 +159,8 @@ describe('Checkbox', () => {
         vm.$nextTick(() => {
           expect(vm.checkList.indexOf('c') !== -1).to.be.false;
           expect(vm.checkList.indexOf('d') !== -1).to.be.false;
+          expect(vm.$refs.c.isDisabled).to.be.true;
+          expect(vm.$refs.d.isDisabled).to.be.true;
           done();
         });
       });
diff --git a/test/unit/specs/data-mapper.spec.js b/test/unit/specs/data-mapper.spec.js
new file mode 100644
index 00000000000..474574bf18b
--- /dev/null
+++ b/test/unit/specs/data-mapper.spec.js
@@ -0,0 +1,285 @@
+import { createTest, createVue, destroyVM } from '../util';
+import DataMapper from 'packages/data-mapper';
+
+describe('DataMapper', () => {
+  let vm;
+  afterEach(() => {
+    destroyVM(vm);
+  });
+
+  it('create', () => {
+    vm = createTest(DataMapper, true);
+    let dataMapperEle = vm.$el;
+    expect(dataMapperEle.classList.contains('el-data-mapper')).to.be.true;
+  });
+
+  it('formatter', done => {
+    let data = {
+      name: '韩梅梅',
+      grade: '女',
+      age: '18'
+    };
+    vm = createVue({
+      methods: {
+        formatter(data, col, index) {
+          return `[${data.name}]`;
+        }
+      }
+    }, true);
+    vm.$el.querySelectorAll('.el-data-mapper-col .el-col .el-data-mapper-col-title .el-data-mapper-col-content');
+    setTimeout(() =>{
+      expect(`[${data.name}]`).to.exist;
+      done();
+    }, 10);
+  });
+
+  it('renderCol', done => {
+    vm = createVue({
+      template: `
+        <el-data-mapper :data="data" :columns="columns" placeholder="-"></el-data-mapper>
+      `,
+      data() {
+        return {
+          data: {},
+          columns: []
+        };
+      }
+    }, true);
+    const colEle = vm.$el.children[0];
+    setTimeout(() =>{
+      expect(colEle.querySelectorAll('.el-data-mapper-col .el-col .el-data-mapper-col-title .el-data-mapper-col-content .mapper-content')).to.exist;
+      done();
+    }, 10);
+  });
+
+  it('contentRows', () => {
+    vm = createVue({
+      template: `
+        <el-data-mapper :data="data" :columns="columns" placeholder="-" :contentRows="contentRows"></el-data-mapper>
+      `,
+      data() {
+        return {
+          data: {
+            name: '韩梅梅',
+            grade: '女',
+            age: '18',
+            adress: '中国广东省广州市海珠区大塘'
+          },
+          columns: [
+            {
+              label: '姓名',
+              prop: 'name'
+            },
+            {
+              label: '性别',
+              prop: 'grade'
+            },
+            {
+              label: '年龄',
+              prop: 'age'
+            },
+            {
+              label: '地址',
+              prop: 'adress'
+            }
+          ],
+          contentRows: 4
+        };
+      }
+    }, true);
+    let contentRowsElm = vm.$el.children[0].children[0].children[1].children[0];
+    expect(contentRowsElm.style.webkitLineClamp).to.equal('4');
+  });
+  it('contentRows', () => {
+    vm = createVue({
+      template: `
+        <el-data-mapper :data="data" :columns="columns" placeholder="-" :contentRows="contentRows"></el-data-mapper>
+      `,
+      data() {
+        return {
+          data: {
+            name: '韩梅梅',
+            grade: '女',
+            age: '18',
+            adress: '中国广东省广州市海珠区大塘'
+          },
+          columns: [
+            {
+              label: '姓名',
+              prop: 'name'
+            },
+            {
+              label: '性别',
+              prop: 'grade'
+            },
+            {
+              label: '年龄',
+              prop: 'age'
+            },
+            {
+              label: '地址',
+              prop: 'adress'
+            }
+          ],
+          contentRows: 4
+        };
+      }
+    }, true);
+    let contentRowsElm = vm.$el.children[0].children[0].children[1].children[0];
+    expect(contentRowsElm.style.webkitLineClamp).to.equal('4');
+  });
+
+  it('inline', () => {
+    vm = createVue({
+      template: `
+        <el-data-mapper :inline='inline' :data="data" :columns="columns" placeholder="-" :contentRows="contentRows"></el-data-mapper>
+      `,
+      data() {
+        return {
+          inline: false,
+          data: {
+            name: '韩梅梅',
+            grade: '女',
+            age: '18',
+            adress: '中国广东省广州市海珠区大塘'
+          },
+          columns: [
+            {
+              label: '姓名',
+              prop: 'name'
+            },
+            {
+              label: '性别',
+              prop: 'grade'
+            },
+            {
+              label: '年龄',
+              prop: 'age'
+            },
+            {
+              label: '地址',
+              prop: 'adress'
+            }
+          ],
+          contentRows: 4
+        };
+      }
+    }, true);
+    let contentRowsElm = vm.$el.children[0].children[0];
+    expect(contentRowsElm.classList.contains('el-data-mapper-col-vertical')).to.true;
+  });
+
+  it('labelWidth', () => {
+    vm = createVue({
+      template: `
+        <el-data-mapper labelWidth="900px" :data="data" :columns="columns"></el-data-mapper>
+      `,
+      data() {
+        return {
+          data: {
+            name: '韩梅梅',
+            grade: '女'
+          },
+          columns: [
+            {
+              label: '姓名',
+              prop: 'name'
+            },
+            {
+              label: '性别',
+              prop: 'grade'
+            }
+          ]
+        };
+      }
+    }, true);
+    let contentRowsElm = vm.$el.children[0].children[0].children[0];
+    expect(contentRowsElm.style.width === '900px').to.true;
+  });
+
+  it('labelPosition to be left', () => {
+    vm = createVue({
+      template: `
+        <el-data-mapper labelPosition="left" :data="data" :columns="columns"></el-data-mapper>
+      `,
+      data() {
+        return {
+          data: {
+            name: '韩梅梅',
+            grade: '女'
+          },
+          columns: [
+            {
+              label: '姓名',
+              prop: 'name'
+            },
+            {
+              label: '性别',
+              prop: 'grade'
+            }
+          ]
+        };
+      }
+    }, true);
+    let contentRowsElm = vm.$el.children[0].children[0].children[0];
+    expect(contentRowsElm.classList.contains('el-data-mapper-col-title-left')).to.true;
+  });
+
+  it('labelPosition to be right', () => {
+    vm = createVue({
+      template: `
+        <el-data-mapper labelPosition="right" :data="data" :columns="columns"></el-data-mapper>
+      `,
+      data() {
+        return {
+          data: {
+            name: '韩梅梅',
+            grade: '女'
+          },
+          columns: [
+            {
+              label: '姓名',
+              prop: 'name'
+            },
+            {
+              label: '性别',
+              prop: 'grade'
+            }
+          ]
+        };
+      }
+    }, true);
+    let contentRowsElm = vm.$el.children[0].children[0].children[0];
+    expect(contentRowsElm.classList.contains('el-data-mapper-col-title-right')).to.true;
+  });
+
+  it('labelPosition to be top', () => {
+    vm = createVue({
+      template: `
+        <el-data-mapper labelPosition="top" :data="data" :columns="columns"></el-data-mapper>
+      `,
+      data() {
+        return {
+          data: {
+            name: '韩梅梅',
+            grade: '女'
+          },
+          columns: [
+            {
+              label: '姓名',
+              prop: 'name'
+            },
+            {
+              label: '性别',
+              prop: 'grade'
+            }
+          ]
+        };
+      }
+    }, true);
+    const parentContent = vm.$el.children[0].children[0];
+    let contentRowsElm = parentContent.children[0];
+    expect(parentContent.classList.contains('el-data-mapper-col-top')).to.true;
+    expect(contentRowsElm.classList.contains('el-data-mapper-col-title-top')).to.true;
+  });
+});
diff --git a/test/unit/specs/date-picker.spec.js b/test/unit/specs/date-picker.spec.js
index 7e713779b47..070db48c0ea 100644
--- a/test/unit/specs/date-picker.spec.js
+++ b/test/unit/specs/date-picker.spec.js
@@ -2,7 +2,8 @@ import {
   createTest,
   createVue,
   destroyVM,
-  triggerEvent
+  triggerEvent,
+  wait
 } from '../util';
 import DatePicker from 'packages/date-picker';
 
@@ -21,16 +22,14 @@ const keyDown = (el, keyCode) => {
 
 describe('DatePicker', () => {
   let vm;
-  afterEach(() => {
-    destroyVM(vm);
-  });
+  afterEach(() => { destroyVM(vm); });
 
   it('create', () => {
     vm = createTest(DatePicker, {
       readonly: true,
       placeholder: '23333',
       format: 'HH-mm-ss'
-    });
+    }, true);
     const input = vm.$el.querySelector('input');
 
     expect(input.getAttribute('placeholder')).to.equal('23333');
@@ -319,9 +318,7 @@ describe('DatePicker', () => {
   describe('input event', () => {
     // mimic standard <select>'s behavior
     // emit input if and only if value changes
-    afterEach(() => {
-      destroyVM(vm);
-    });
+    afterEach(() => { destroyVM(vm); });
 
     it('works for type=date', done => {
       let emitted = false;
@@ -455,6 +452,8 @@ describe('DatePicker', () => {
   });
 
   describe('value-format', () => {
+    afterEach(() => { destroyVM(vm); });
+
     it('emits', done => {
       vm = createVue({
         template: `
@@ -490,6 +489,37 @@ describe('DatePicker', () => {
       }, DELAY);
     });
 
+    it('with literal string', done => {
+      vm = createVue({
+        template: `
+          <el-date-picker
+            ref="compo"
+            v-model="value"
+            type="date"
+            value-format="dd/MM yyyy [Element]" />`,
+        data() {
+          return {
+            value: ''
+          };
+        }
+      }, true);
+
+      vm.$refs.compo.$el.querySelector('input').focus();
+
+      setTimeout(_ => {
+        vm.$refs.compo.picker.$el.querySelector('.el-date-table td.available').click();
+        setTimeout(_ => {
+          const today = new Date();
+          const yyyy = today.getFullYear();
+          const MM = ('0' + (today.getMonth() + 1)).slice(-2);
+          const dd = '01'; // first available one should be first day of month
+          const expectValue = `${dd}/${MM} ${yyyy} Element`;
+          expect(vm.value).to.equal(expectValue);
+          done();
+        }, DELAY);
+      }, DELAY);
+    });
+
     it('accepts', done => {
       vm = createVue({
         template: `
@@ -550,6 +580,34 @@ describe('DatePicker', () => {
       }, DELAY);
     });
 
+    it('translates format to value-format with literal string', done => {
+      vm = createVue({
+        template: `
+          <el-date-picker
+            ref="compo"
+            v-model="value"
+            type="date"
+            format="[Element] yyyy-MM-dd"
+            value-format="dd/MM yyyy [UI]" />`,
+        data() {
+          return {
+            value: ''
+          };
+        }
+      }, true);
+      const input = vm.$refs.compo.$el.querySelector('input');
+      input.focus();
+      setTimeout(_ => {
+        input.value = 'Element 2000-10-01';
+        triggerEvent(input, 'input');
+        keyDown(input, ENTER);
+        setTimeout(_ => {
+          expect(vm.value).to.equal('01/10 2000 UI');
+          done();
+        }, DELAY);
+      }, DELAY);
+    });
+
     it('works for daterange', done => {
       vm = createVue({
         template: `
@@ -655,7 +713,9 @@ describe('DatePicker', () => {
     });
   });
 
-  describe('default value', done => {
+  describe('default value', () => {
+    afterEach(() => { destroyVM(vm); });
+
     it('it works', done => {
       let defaultValue = '2000-01-01';
       let expectValue = new Date(2000, 0, 1);
@@ -799,6 +859,8 @@ describe('DatePicker', () => {
   });
 
   describe('can be cleared using keyboard', () => {
+    afterEach(() => { destroyVM(vm); });
+
     it('works for type=date, when blur', done => {
       vm = createVue({
         template: `
@@ -858,15 +920,17 @@ describe('DatePicker', () => {
     // TODO: implement the same feature for range panels
   });
 
-  describe('nagivation', _ => {
-    const click = (el, cbk = () => {}) => {
+  describe('navigation', () => {
+    afterEach(() => { destroyVM(vm); });
+
+    const clickAndWait = (el) => {
       el.click();
-      setTimeout(cbk, DELAY);
+      return wait();
     };
 
     let prevMonth, prevYear, nextMonth, nextYear, getYearLabel, getMonthLabel;
 
-    const navigationTest = (value, cbk) => {
+    const initNavigationTest = async(value) => {
       vm = createVue({
         template: '<el-date-picker v-model="value" ref="compo" />',
         data() {
@@ -876,80 +940,63 @@ describe('DatePicker', () => {
         }
       }, true);
       vm.$refs.compo.$el.querySelector('input').focus();
-      setTimeout(_ => {
-        const $el = vm.$refs.compo.picker.$el;
-        prevMonth = $el.querySelector('button.el-icon-arrow-left');
-        prevYear = $el.querySelector('button.el-icon-d-arrow-left');
-        nextMonth = $el.querySelector('button.el-icon-arrow-right');
-        nextYear = $el.querySelector('button.el-icon-d-arrow-right');
-        getYearLabel = () => $el.querySelectorAll('.el-date-picker__header-label')[0].textContent;
-        getMonthLabel = () => $el.querySelectorAll('.el-date-picker__header-label')[1].textContent;
-        cbk();
-      }, DELAY);
+      await wait();
+      const $el = vm.$refs.compo.picker.$el;
+      prevMonth = $el.querySelector('button.el-icon-arrow-left');
+      prevYear = $el.querySelector('button.el-icon-d-arrow-left');
+      nextMonth = $el.querySelector('button.el-icon-arrow-right');
+      nextYear = $el.querySelector('button.el-icon-d-arrow-right');
+      getYearLabel = () => $el.querySelectorAll('.el-date-picker__header-label')[0].textContent;
+      getMonthLabel = () => $el.querySelectorAll('.el-date-picker__header-label')[1].textContent;
     };
 
-    it('month, year', done => {
-      navigationTest(new Date(2000, 0, 1), _ => {
-        expect(getYearLabel()).to.include('2000');
-        expect(getMonthLabel()).to.include('1');
-        click(prevMonth, _ => {
-          expect(getYearLabel()).to.include('1999');
-          expect(getMonthLabel()).to.include('12');
-          click(prevYear, _ => {
-            expect(getYearLabel()).to.include('1998');
-            expect(getMonthLabel()).to.include('12');
-            click(nextMonth, _ => {
-              expect(getYearLabel()).to.include('1999');
-              expect(getMonthLabel()).to.include('1');
-              click(nextYear, _ => {
-                expect(getYearLabel()).to.include('2000');
-                expect(getMonthLabel()).to.include('1');
-                done();
-              });
-            });
-          });
-        });
-      });
+    it('month, year', async() => {
+      await initNavigationTest(new Date(2000, 0, 1));
+      expect(getYearLabel()).to.include('2000');
+      expect(getMonthLabel()).to.include('1');
+
+      await clickAndWait(prevMonth);
+      expect(getYearLabel()).to.include('1999');
+      expect(getMonthLabel()).to.include('12');
+
+      await clickAndWait(prevYear);
+      expect(getYearLabel()).to.include('1998');
+      expect(getMonthLabel()).to.include('12');
+
+      await clickAndWait(nextMonth);
+      expect(getYearLabel()).to.include('1999');
+      expect(getMonthLabel()).to.include('1');
+
+      await clickAndWait(nextYear);
+      expect(getYearLabel()).to.include('2000');
+      expect(getMonthLabel()).to.include('1');
     });
 
-    it('month with fewer dates', done => {
+    it('month with fewer dates', async() => {
       // July has 31 days, June has 30
-      navigationTest(new Date(2000, 6, 31), _ => {
-        click(prevMonth, _ => {
-          expect(getYearLabel()).to.include('2000');
-          expect(getMonthLabel()).to.include('6');
-          done();
-        });
-      });
+      await initNavigationTest(new Date(2000, 6, 31));
+      await clickAndWait(prevMonth);
+      expect(getYearLabel()).to.include('2000');
+      expect(getMonthLabel()).to.include('6');
     });
 
-    it('year with fewer Feburary dates', done => {
+    it('year with fewer Feburary dates', async() => {
       // Feburary 2008 has 29 days, Feburary 2007 has 28
-      navigationTest(new Date(2008, 1, 29), _ => {
-        click(prevYear, _ => {
-          expect(getYearLabel()).to.include('2007');
-          expect(getMonthLabel()).to.include('2');
-          done();
-        });
-      });
+      await initNavigationTest(new Date(2008, 1, 29));
+      await clickAndWait(prevYear);
+      expect(getYearLabel()).to.include('2007');
+      expect(getMonthLabel()).to.include('2');
     });
 
-    it('month label with fewer dates', done => {
-      navigationTest(new Date(2000, 6, 31), _ => {
-        const $el = vm.$refs.compo.picker.$el;
-        const monthLabel = $el.querySelectorAll('.el-date-picker__header-label')[1];
-        click(monthLabel, _ => {
-          setTimeout(_ => {
-            const juneLabel = $el.querySelectorAll('.el-month-table td a')[5];
-            juneLabel.click();
-            setTimeout(_ => {
-              expect(getYearLabel()).to.include('2000');
-              expect(getMonthLabel()).to.include('6');
-              done();
-            }, DELAY);
-          }, DELAY);
-        });
-      });
+    it('month label with fewer dates', async() => {
+      await initNavigationTest(new Date(2000, 6, 31));
+      const $el = vm.$refs.compo.picker.$el;
+      const monthLabel = $el.querySelectorAll('.el-date-picker__header-label')[1];
+      await clickAndWait(monthLabel);
+      const juneLabel = $el.querySelectorAll('.el-month-table td a')[5];
+      await clickAndWait(juneLabel);
+      expect(getYearLabel()).to.include('2000');
+      expect(getMonthLabel()).to.include('6');
     });
   });
 
@@ -1004,22 +1051,27 @@ describe('DatePicker', () => {
 
   describe('type:datetime', () => {
     let vm;
-    beforeEach(done => {
-      vm = createTest(DatePicker, {
-        type: 'datetime'
+
+    afterEach(() => destroyVM(vm));
+
+    it('create', done => {
+      vm = createVue({
+        template: '<el-date-picker type="datetime" v-model="value" ref="compo" />',
+        data() {
+          return {
+            value: ''
+          };
+        }
       }, true);
-      const input = vm.$el.querySelector('input');
+      const input = vm.$refs.compo.$el.querySelector('input');
 
       input.blur();
       input.focus();
 
-      setTimeout(done, DELAY);
-    });
-
-    afterEach(() => destroyVM(vm));
-
-    it('create', () => {
-      expect(vm.picker.$el.querySelector('.el-time-panel')).to.ok;
+      setTimeout(_ => {
+        expect(vm.$refs.compo.picker.$el.querySelector('.el-time-panel')).to.ok;
+        done();
+      }, DELAY);
     });
 
     it('both picker show correct formated value (extract date-format and time-format from format property)', done => {
@@ -1053,7 +1105,7 @@ describe('DatePicker', () => {
             expect(dateInput.value).to.equal('5-3-18');
             expect(timeInput.value).to.equal('10 am');
 
-            // change not documented pickerOptions.format mustn't change picker format
+            // change undocumented pickerOptions.format won't change picker format
             vm.pickerOptions = { format: 'yyyy-MM-dd HH:mm:ss'};
             setTimeout(_ => {
               expect(dateInput.value).to.equal('5-3-18');
@@ -1111,69 +1163,122 @@ describe('DatePicker', () => {
     });
 
     it('click now button', done => {
-      const date = new Date(1999, 10, 10, 10, 10);
+      vm = createTest(DatePicker, {
+        type: 'datetime'
+      }, true);
+      const input = vm.$el.querySelector('input');
+
+      input.blur();
+      input.focus();
 
-      vm.picker.$el.querySelector('.el-picker-panel__link-btn').click();
       setTimeout(_ => {
-        expect(vm.picker.date > date).to.true;
-        done();
+        const date = new Date(1999, 10, 10, 10, 10);
+
+        vm.picker.$el.querySelector('.el-picker-panel__link-btn').click();
+        setTimeout(_ => {
+          expect(vm.picker.date > date).to.true;
+          done();
+        }, DELAY);
       }, DELAY);
     });
 
     it('click timepicker', done => {
-      const input = vm.picker.$el.querySelectorAll('.el-date-picker__editor-wrap input')[1];
-      triggerEvent(input, 'focus');
+      vm = createTest(DatePicker, {
+        type: 'datetime'
+      }, true);
+      const input = vm.$el.querySelector('input');
+
+      input.blur();
+      input.focus();
 
       setTimeout(_ => {
-        expect(vm.picker.$el.querySelector('.el-time-panel')).to.have.deep.property('style.display').to.equal('');
-        done();
+        const input = vm.picker.$el.querySelectorAll('.el-date-picker__editor-wrap input')[1];
+        triggerEvent(input, 'focus');
+
+        setTimeout(_ => {
+          const timePanel = vm.picker.$el.querySelector('.el-time-panel');
+          expect(window.getComputedStyle(timePanel)).to.not.equal('none');
+          done();
+        }, DELAY);
       }, DELAY);
     });
 
     it('input timepicker', done => {
-      const input = vm.picker.$el.querySelectorAll('.el-date-picker__editor-wrap input')[1];
+      vm = createTest(DatePicker, {
+        type: 'datetime'
+      }, true);
+      const input = vm.$el.querySelector('input');
+
+      input.blur();
+      input.focus();
 
-      input.value = '20:30:33';
-      triggerEvent(input, 'change', true);
       setTimeout(_ => {
-        expect(vm.picker.date.getHours()).to.equal(20);
-        expect(vm.picker.date.getMinutes()).to.equal(30);
-        expect(vm.picker.date.getSeconds()).to.equal(33);
-        done();
+        const input = vm.picker.$el.querySelectorAll('.el-date-picker__editor-wrap input')[1];
+
+        input.value = '20:30:33';
+        triggerEvent(input, 'change', true);
+        setTimeout(_ => {
+          expect(vm.picker.date.getHours()).to.equal(20);
+          expect(vm.picker.date.getMinutes()).to.equal(30);
+          expect(vm.picker.date.getSeconds()).to.equal(33);
+          done();
+        }, DELAY);
       }, DELAY);
     });
 
     it('input date', done => {
-      const input = vm.picker.$el.querySelector('.el-date-picker__editor-wrap input');
+      vm = createTest(DatePicker, {
+        type: 'datetime'
+      }, true);
+      const input = vm.$el.querySelector('input');
+
+      input.blur();
+      input.focus();
 
-      input.value = '2017-2-2';
-      triggerEvent(input, 'change', true);
       setTimeout(_ => {
-        expect(vm.picker.date.getFullYear()).to.equal(2017);
-        expect(vm.picker.date.getMonth()).to.equal(1);
-        expect(vm.picker.date.getDate()).to.equal(2);
-        done();
+        const input = vm.picker.$el.querySelector('.el-date-picker__editor-wrap input');
+
+        input.value = '2017-2-2';
+        triggerEvent(input, 'change', true);
+        setTimeout(_ => {
+          expect(vm.picker.date.getFullYear()).to.equal(2017);
+          expect(vm.picker.date.getMonth()).to.equal(1);
+          expect(vm.picker.date.getDate()).to.equal(2);
+          done();
+        }, DELAY);
       }, DELAY);
     });
 
     it('select time', done => {
-      const input = vm.picker.$el.querySelectorAll('.el-date-picker__editor-wrap input')[1];
+      vm = createTest(DatePicker, {
+        type: 'datetime'
+      }, true);
+      const input = vm.$el.querySelector('input');
+
       input.blur();
       input.focus();
-      input.blur();
 
       setTimeout(_ => {
-        const button = vm.picker.$el.querySelector('.el-time-panel .confirm');
-        button.click();
+        const input = vm.picker.$el.querySelectorAll('.el-date-picker__editor-wrap input')[1];
+        input.blur();
+        input.focus();
+        input.blur();
 
         setTimeout(_ => {
-          expect(input.value).to.exist;
-          done();
+          const button = vm.picker.$el.querySelector('.el-time-panel .confirm');
+          button.click();
+
+          setTimeout(_ => {
+            expect(input.value).to.exist;
+            done();
+          }, DELAY);
         }, DELAY);
       }, DELAY);
     });
 
     describe('change event', () => {
+      afterEach(() => destroyVM(vm));
+
       it('pick date, emits on confirm', done => {
         vm = createVue({
           template: '<el-date-picker type="datetime" v-model="value" ref="compo" />',
@@ -1242,6 +1347,8 @@ describe('DatePicker', () => {
     });
 
     describe('cancel time', () => {
+      afterEach(() => destroyVM(vm));
+
       it('cancel to empty', done => {
         vm = createVue({
           template: '<el-date-picker type="datetime" v-model="value" ref="compo" />',
@@ -1539,6 +1646,8 @@ describe('DatePicker', () => {
   });
 
   describe('type:daterange', () => {
+    afterEach(() => destroyVM(vm));
+
     it('works', done => {
       vm = createVue({
         template: '<el-date-picker type="daterange" v-model="value" ref="compo" />',
@@ -2159,16 +2268,16 @@ describe('DatePicker', () => {
         triggerEvent(rightCell, 'click', true);
 
         setTimeout(_ => {
-          triggerEvent(input2, 'input');
           input2.value = '1988-6-4';
+          triggerEvent(input2, 'input');
           triggerEvent(input2, 'change');
 
           setTimeout(_ => {
-            triggerEvent(input, 'input');
             input.value = '1989-6-4';
+            triggerEvent(input, 'input');
             triggerEvent(input, 'change', true);
             setTimeout(_ => {
-              expect(vm.picker.maxDate > vm.picker.minDate).to.true;
+              expect(vm.picker.maxDate >= vm.picker.minDate).to.true;
               done();
             }, DELAY);
           }, DELAY);
@@ -2194,6 +2303,8 @@ describe('DatePicker', () => {
     });
 
     it('confirm honors disabledDate', done => {
+      destroyVM(vm); // nuke beforeEach's vm before creating our own
+
       vm = createVue({
         template: '<el-date-picker type="datetimerange" value-format="yyyy-MM-dd HH:mm:ss" v-model="value" :picker-options="pickerOptions" ref="compo" />',
         data() {
@@ -2213,7 +2324,7 @@ describe('DatePicker', () => {
       input.focus();
       setTimeout(_ => {
         // simulate user input of invalid date
-        vm.$refs.compo.picker.handleDateChange({ target: { value: '2000-09-01'} }, 'min');
+        vm.$refs.compo.picker.handleDateChange('2000-09-01', 'min');
         setTimeout(_ => {
           expect(vm.$refs.compo.picker.btnDisabled).to.equal(true); // invalid input disables button
           vm.$refs.compo.picker.handleConfirm();
@@ -2231,49 +2342,355 @@ describe('DatePicker', () => {
     });
   });
 
-  const currentMonth = new Date(new Date().getTime());
-  currentMonth.setDate(1);
-  const chineseWeek = ['一', '二', '三', '四', '五', '六', '日'];
-
-  const testWeek = (i) => it('picker-options:firstDayOfWeek ' + i, done => {
-    vm = createTest(DatePicker, {
-      pickerOptions: {
-        firstDayOfWeek: i
-      }
-    }, true);
+  describe('type:monthrange', () => {
+    afterEach(() => destroyVM(vm));
 
-    const input = vm.$el.querySelector('input');
+    it('works', done => {
+      vm = createVue({
+        template: '<el-date-picker type="monthrange" v-model="value" ref="compo" />',
+        data() {
+          return {
+            value: ''
+          };
+        }
+      }, true);
 
-    input.blur();
-    input.focus();
+      const rangePicker = vm.$refs.compo;
+      const inputs = rangePicker.$el.querySelectorAll('input');
+      inputs[0].focus();
 
-    setTimeout(_ => {
-      const firstWeek = vm.picker.$el.querySelector('tr th');
-      expect(firstWeek.innerText).to.equal(chineseWeek[i - 1]);
-      done();
+      setTimeout(_ => {
+        const panels = rangePicker.picker.$el.querySelectorAll('.el-date-range-picker__content');
+        expect(Array.prototype.slice.call(panels)).to.length(2);
+        panels[0].querySelector('td:not(.disabled)').click();
+        setTimeout(_ => {
+          panels[1].querySelector('td:not(.disabled)').click();
+          setTimeout(_ => {
+            inputs[0].focus();
+            setTimeout(_ => {
+              // correct highlight
+              const startDate = rangePicker.picker.$el.querySelectorAll('.start-date');
+              const endDate = rangePicker.picker.$el.querySelectorAll('.end-date');
+              const inRangeDate = rangePicker.picker.$el.querySelectorAll('.in-range');
+              expect(startDate.length).to.equal(1);
+              expect(endDate.length).to.equal(1);
+              expect(inRangeDate.length).to.above(0);
+              // value is array
+              expect(vm.value).to.be.an.instanceof(Array);
+              // input text is something like date string
+              expect(inputs[0].value.length).to.equal(7);
+              expect(inputs[1].value.length).to.equal(7);
+              done();
+            }, DELAY);
+          }, DELAY);
+        }, DELAY);
+      }, DELAY);
     });
-  });
-  for (var i = 1; i <= 7; i++) {
-    testWeek(i);
-  }
-
-  it('picker-options:shortcuts', done => {
-    let test;
-    vm = createTest(DatePicker, {
-      pickerOptions: {
-        shortcuts: [{
-          text: '今天',
-          onClick(picker) {
-            test = true;
-            picker.$emit('pick', new Date());
-          }
-        }]
-      }
-    }, true);
-    const input = vm.$el.querySelector('input');
 
-    input.blur();
-    input.focus();
+    it('works: reverse selection', done => {
+      vm = createVue({
+        template: '<el-date-picker type="monthrange" v-model="value" ref="compo" />',
+        data() {
+          return {
+            value: ''
+          };
+        }
+      }, true);
+
+      const rangePicker = vm.$refs.compo;
+      const inputs = rangePicker.$el.querySelectorAll('input');
+      inputs[0].focus();
+
+      setTimeout(_ => {
+        const panels = rangePicker.picker.$el.querySelectorAll('.el-date-range-picker__content');
+        expect(Array.prototype.slice.call(panels)).to.length(2);
+        panels[1].querySelector('td:not(.disabled)').click();
+        setTimeout(_ => {
+          panels[0].querySelector('td:not(.disabled)').click();
+          setTimeout(_ => {
+            inputs[0].focus();
+            setTimeout(_ => {
+              // correct highlight
+              const startDate = rangePicker.picker.$el.querySelectorAll('.start-date');
+              const endDate = rangePicker.picker.$el.querySelectorAll('.end-date');
+              const inRangeDate = rangePicker.picker.$el.querySelectorAll('.in-range');
+              expect(startDate.length).to.equal(1);
+              expect(endDate.length).to.equal(1);
+              expect(inRangeDate.length).to.above(0);
+              // value is array
+              expect(vm.value).to.be.an.instanceof(Array);
+              // input text is something like date string
+              expect(inputs[0].value.length).to.equal(7);
+              expect(inputs[1].value.length).to.equal(7);
+              // result array is properly ordered
+              expect(vm.value[0].getTime() < vm.value[1].getTime()).to.be.true;
+              done();
+            }, DELAY);
+          }, DELAY);
+        }, DELAY);
+      }, DELAY);
+    });
+
+    it('type:monthrange unlink:true', done => {
+      vm = createVue({
+        template: '<el-date-picker type="monthrange" unlink-panels v-model="value" ref="compo" />',
+        data() {
+          return {
+            value: [new Date(2000, 9), new Date(2000, 10)]
+          };
+        }
+      }, true);
+
+      const rangePicker = vm.$refs.compo;
+      const inputs = rangePicker.$el.querySelectorAll('input');
+      setTimeout(_ => {
+        inputs[0].focus();
+        setTimeout(_ => {
+          const panels = rangePicker.picker.$el.querySelectorAll('.el-date-range-picker__content');
+          const left = panels[0].querySelector('.el-date-range-picker__header');
+          const right = panels[1].querySelector('.is-right .el-date-range-picker__header');
+          const leftText = left.textContent.match(/\d+/g).map(i => Number(i));
+          const rightText = right.textContent.match(/\d+/g).map(i => Number(i));
+          expect(rightText[0] - leftText[0]).to.equal(1); // one year
+          done();
+        }, DELAY);
+      }, DELAY);
+    });
+
+    it('unlink panels', done => {
+      vm = createTest(DatePicker, {
+        type: 'monthrange',
+        unlinkPanels: true
+      }, true);
+      const input = vm.$el.querySelector('input');
+      input.click();
+
+      setTimeout(_ => {
+        const panels = vm.picker.$el.querySelectorAll('.el-date-range-picker__content');
+        expect(Array.prototype.slice.call(panels)).to.length(2);
+
+        panels[1].querySelector('.el-icon-d-arrow-right').click();
+
+        setTimeout(_ => {
+          const left = panels[0].querySelector('.el-date-range-picker__header');
+          const right = panels[1].querySelector('.is-right .el-date-range-picker__header');
+          const leftText = left.textContent.match(/\d+/g).map(i => Number(i));
+          const rightText = right.textContent.match(/\d+/g).map(i => Number(i));
+
+          expect(rightText[0] - leftText[0]).to.equal(2);
+
+          done();
+        }, DELAY);
+      }, DELAY);
+    });
+
+    it('daylight saving time highlight', done => {
+      // Run test with environment variable TZ=Australia/Sydney
+      // The following test uses Australian Eastern Daylight Time (AEDT)
+      // AEST -> AEDT shift happened on 2016-10-02 02:00:00
+      vm = createVue({
+        template: '<el-date-picker type="monthrange" v-model="value" ref="compo" />',
+        data() {
+          return {
+            value: [new Date(2016, 6), new Date(2016, 12)]
+          };
+        }
+      }, true);
+
+      const rangePicker = vm.$refs.compo;
+      const inputs = rangePicker.$el.querySelectorAll('input');
+      inputs[0].focus();
+
+      setTimeout(_ => {
+        const startDate = rangePicker.picker.$el.querySelectorAll('.start-date');
+        const endDate = rangePicker.picker.$el.querySelectorAll('.end-date');
+        expect(startDate.length).to.equal(1);
+        expect(endDate.length).to.equal(1);
+        done();
+      }, DELAY);
+    });
+
+    it('clear value', done => {
+      vm = createVue({
+        template: '<el-date-picker type="monthrange" v-model="value" ref="compo" />',
+        data() {
+          return {
+            value: [new Date(2000, 9), new Date(2000, 10)]
+          };
+        }
+      }, true);
+
+      vm.$el.querySelector('input').focus();
+
+      setTimeout(_ => {
+        vm.$refs.compo.showClose = true;
+        vm.$refs.compo.handleClickIcon({ stopPropagation: () => null });
+        setTimeout(_ => {
+          expect(vm.value).to.equal(null);
+          done();
+        }, DELAY);
+      }, DELAY);
+    });
+
+    it('change event', done => {
+      vm = createVue({
+        template: `
+          <el-date-picker
+            ref="compo"
+            v-model="value"
+            type="monthrange" />`,
+        data() {
+          return {
+            value: ''
+          };
+        }
+      }, true);
+
+      const spy = sinon.spy();
+      vm.$refs.compo.$on('change', spy);
+
+      const input = vm.$el.querySelector('input');
+
+      input.blur();
+      input.focus();
+
+      setTimeout(_ => {
+        const picker = vm.$refs.compo.picker;
+        setTimeout(_ => {
+          picker.$el.querySelector('td:not(.disabled)').click();
+          setTimeout(_ => {
+            picker.$el.querySelector('td:not(.disabled) ~ td:not(.disabled)').click();
+            setTimeout(_ => {
+              expect(spy.calledOnce).to.equal(true);
+              // change event is not emitted if used does not change value
+              // datarange also requires proper array equality check
+              input.blur();
+              input.focus();
+              setTimeout(_ => {
+                const startCell = picker.$el.querySelector('td.start-date');
+                const endCell = picker.$el.querySelector('td.end-date');
+                startCell.click();
+                setTimeout(_ => {
+                  endCell.click();
+                  setTimeout(_ => {
+                    expect(spy.calledOnce).to.equal(true);
+                    done();
+                  }, DELAY);
+                }, DELAY);
+              }, DELAY);
+            }, DELAY);
+          }, DELAY);
+        }, DELAY);
+      }, DELAY);
+    });
+
+    describe('default value', () => {
+      afterEach(() => destroyVM(vm));
+
+      it('single', done => {
+        let defaultValue = '2000-10';
+        let expectValue = [new Date(2000, 9), new Date(2000, 10)];
+
+        vm = createVue({
+          template: '<el-date-picker type="monthrange" v-model="value" ref="compo" :default-value="defaultValue" />',
+          data() {
+            return {
+              value: '',
+              defaultValue
+            };
+          }
+        }, true);
+
+        vm.$el.querySelector('input').focus();
+        setTimeout(_ => {
+          const $el = vm.$refs.compo.picker.$el;
+          const defaultEls = $el.querySelectorAll('.el-month-table td.default');
+          expect(defaultEls.length).to.equal(1);
+          defaultEls[0].click();
+          setTimeout(_ => {
+            $el.querySelector('.el-month-table td.default + td').click();
+            setTimeout(_ => {
+              expect(vm.value).to.eql(expectValue);
+              done();
+            }, DELAY);
+          }, DELAY);
+        }, DELAY);
+      });
+
+      it('array', done => {
+        let defaultValue = ['2000-01', '2000-03'];
+        let expectValue = [new Date(2000, 0), new Date(2000, 2)];
+
+        vm = createVue({
+          template: '<el-date-picker type="monthrange" v-model="value" ref="compo" :default-value="defaultValue" />',
+          data() {
+            return {
+              value: '',
+              defaultValue
+            };
+          }
+        }, true);
+
+        vm.$el.querySelector('input').focus();
+        setTimeout(_ => {
+          const defaultEls = vm.$refs.compo.picker.$el.querySelectorAll('.el-month-table td.default');
+          expect(defaultEls.length).to.equal(2);
+          defaultEls[0].click();
+          setTimeout(_ => {
+            defaultEls[1].click();
+            setTimeout(_ => {
+              expect(vm.value).to.eql(expectValue);
+              done();
+            }, DELAY);
+          }, DELAY);
+        }, DELAY);
+      });
+    });
+  });
+
+  const currentMonth = new Date(new Date().getTime());
+  currentMonth.setDate(1);
+  const chineseWeek = ['一', '二', '三', '四', '五', '六', '日'];
+
+  const testWeek = (i) => it('picker-options:firstDayOfWeek ' + i, done => {
+    vm = createTest(DatePicker, {
+      pickerOptions: {
+        firstDayOfWeek: i
+      }
+    }, true);
+
+    const input = vm.$el.querySelector('input');
+
+    input.blur();
+    input.focus();
+
+    setTimeout(_ => {
+      const firstWeek = vm.picker.$el.querySelector('tr th');
+      expect(firstWeek.innerText).to.equal(chineseWeek[i - 1]);
+      done();
+    });
+  });
+  for (var i = 1; i <= 7; i++) {
+    testWeek(i);
+  }
+
+  it('picker-options:shortcuts', done => {
+    let test;
+    vm = createTest(DatePicker, {
+      pickerOptions: {
+        shortcuts: [{
+          text: '今天',
+          onClick(picker) {
+            test = true;
+            picker.$emit('pick', new Date());
+          }
+        }]
+      }
+    }, true);
+    const input = vm.$el.querySelector('input');
+
+    input.blur();
+    input.focus();
 
     setTimeout(_ => {
       const shortcut = vm.picker.$el.querySelector('.el-picker-panel__shortcut');
@@ -2289,6 +2706,51 @@ describe('DatePicker', () => {
     }, DELAY);
   });
 
+  describe('picker-options:selectableRange', () => {
+    let vm;
+    afterEach(() => destroyVM(vm));
+    it('selectableRange', done => {
+      vm = createVue({
+        template: `
+        <el-date-picker v-model="value" type="datetime" :picker-options="pickerOptions" ref="compo"></el-date-picker>
+        `,
+        data() {
+          return {
+            value: new Date(2019, 0, 1, 18, 50),
+            pickerOptions: {
+              selectableRange: ['17:30:00 - 18:30:00', '18:50:00 - 20:30:00', '21:00:00 - 22:00:00']
+            }
+          };
+        }
+      }, true);
+      const input = vm.$el.querySelector('input');
+      input.blur();
+      input.focus();
+      setTimeout(() => {
+        const $el = vm.$refs.compo.picker.$el;
+        const input1 = $el.querySelectorAll('.el-date-picker__editor-wrap input')[1];
+        input1.blur();
+        input1.focus();
+        setTimeout(_ => {
+          const list = $el.querySelectorAll('.el-time-spinner__list');
+          const hoursEl = list[0];
+          const disabledHours = [].slice
+            .call(hoursEl.querySelectorAll('.disabled'))
+            .map(node => Number(node.textContent));
+          expect(disabledHours[disabledHours.length - 2]).to.equal(16);
+          expect(disabledHours[disabledHours.length - 1]).to.equal(23);
+          const minutesEl = list[1];
+          const disabledMinutes = [].slice
+            .call(minutesEl.querySelectorAll('.disabled'))
+            .map(node => Number(node.textContent));
+          expect(disabledMinutes.length).to.equal(19);
+          done();
+        }, DELAY);
+      }, DELAY);
+    });
+
+  });
+
   describe('picker-options:disabledDate', () => {
     let vm;
     beforeEach(done => {
@@ -2323,4 +2785,71 @@ describe('DatePicker', () => {
       }, DELAY);
     });
   });
+
+  describe('picker-options:firstDayOfWeek issue-14523', () => {
+    let vm;
+    beforeEach(done => {
+      vm = createTest(DatePicker, {
+        value: new Date(),
+        pickerOptions: {
+          firstDayOfWeek: 3
+        }
+      }, true);
+      const input = vm.$el.querySelector('input');
+
+      input.blur();
+      input.focus();
+
+      setTimeout(done, DELAY);
+    });
+
+    afterEach(() => destroyVM(vm));
+
+    it('set value equal to 2019-01-01', done => {
+      const date = new Date('2019-01-01');
+      vm.picker.value = date;
+
+      setTimeout(_ => {
+        const currentElement = vm.picker.$el.querySelector('tr:nth-child(2) td:nth-child(7) span');
+        const lastPrevMonthElement = vm.picker.$el.querySelector('tr:nth-child(2) td:nth-child(6) span');
+        expect(currentElement.innerText.trim()).to.equal('1');
+        expect(lastPrevMonthElement.innerText.trim()).to.equal('31');
+        done();
+      }, DELAY);
+    });
+
+    it('set value equal to 2018-01-01', done => {
+      const date = new Date('2018-01-01');
+      vm.picker.value = date;
+
+      setTimeout(_ => {
+        const currentElement = vm.picker.$el.querySelector('tr:nth-child(2) td:nth-child(6) span');
+        const lastPrevMonthElement = vm.picker.$el.querySelector('tr:nth-child(2) td:nth-child(5) span');
+        expect(currentElement.innerText.trim()).to.equal('1');
+        expect(lastPrevMonthElement.innerText.trim()).to.equal('31');
+        done();
+      }, DELAY);
+    });
+  });
+  describe('picker-options:className', () => {
+    it('set custom class name', async() => {
+      vm = createVue({
+        template: '<el-date-picker type="datetime" v-model="value" ref="compo" :pickerOptions="pickerOptions" />',
+        data() {
+          return {
+            value: '',
+            pickerOptions: {
+              cellClassName() { return 'test-class'; }
+            }
+          };
+        }
+      }, true);
+      vm.$refs.compo.$el.querySelector('input').focus();
+      await wait();
+      expect(
+        (vm.$refs.compo.picker.$el.querySelector('.el-date-table__row td').className)
+          .indexOf('test-class') > -1
+      ).to.be.true;
+    });
+  });
 });
diff --git a/test/unit/specs/dialog.spec.js b/test/unit/specs/dialog.spec.js
index 72f3c072a4e..22ff0d32645 100644
--- a/test/unit/specs/dialog.spec.js
+++ b/test/unit/specs/dialog.spec.js
@@ -1,4 +1,4 @@
-import { createVue, destroyVM } from '../util';
+import { createVue, destroyVM, waitImmediate } from '../util';
 
 describe('Dialog', () => {
   let vm;
@@ -100,14 +100,14 @@ describe('Dialog', () => {
         };
       }
     }, true);
-    const dialog = vm.$children[0];
-    expect(dialog.$el.style.display).to.equal('none');
+    const dialogEl = vm.$children[0].$el;
+    expect(getComputedStyle(dialogEl).display).to.equal('none');
     vm.visible = true;
     setTimeout(() => {
-      expect(dialog.$el.style.display).to.not.equal('none');
+      expect(getComputedStyle(dialogEl).display).to.not.equal('none');
       vm.visible = false;
       setTimeout(() => {
-        expect(dialog.$el.style.display).to.equal('none');
+        expect(getComputedStyle(dialogEl).display).to.equal('none');
         done();
       }, 400);
     }, 50);
@@ -289,4 +289,31 @@ describe('Dialog', () => {
       }, 500);
     }, 10);
   });
+
+  it('destroyOnClose', async() => {
+    vm = createVue({
+      template: `
+        <div>
+          <el-dialog :title="title" :visible.sync="visible" destroy-on-close>
+            <input />
+          </el-dialog>
+        </div>
+      `,
+
+      data() {
+        return {
+          title: 'dialog test',
+          visible: true
+        };
+      }
+    }, true);
+    const dialog = vm.$children[0];
+    await waitImmediate();
+    dialog.$el.querySelector('input').value = '123';
+    dialog.$el.click();
+    await waitImmediate();
+    vm.visible = true;
+    await waitImmediate();
+    expect(dialog.$el.querySelector('input').value).to.be.equal('');
+  });
 });
diff --git a/test/unit/specs/divider.spec.js b/test/unit/specs/divider.spec.js
new file mode 100644
index 00000000000..cea5dc2b136
--- /dev/null
+++ b/test/unit/specs/divider.spec.js
@@ -0,0 +1,37 @@
+import { createVue, destroyVM } from '../util';
+
+describe('Divider', () => {
+  let vm;
+  afterEach(() => {
+    destroyVM(vm);
+  });
+
+  it('content', () => {
+    vm = createVue({
+      template: `
+          <el-divider>我是一条完美分割线！</el-divider>
+      `
+    });
+
+    expect(vm.$el).to.property('textContent').to.include('我是一条完美分割线！');
+  });
+
+  it('direction', () => {
+    vm = createVue({
+      template: `
+          <el-divider direction="vertical">我是一条完美分割线！</el-divider>
+      `
+    });
+
+    expect(vm.$el.className).to.include('el-divider--vertical');
+  });
+
+  it('apply class to divider', () => {
+    vm = createVue({
+      template: `
+        <el-divider direction="vertical" class="my-divider">我是一条完美分割线！</el-divider>
+      `
+    });
+    expect(vm.$el.className).to.include('my-divider');
+  });
+});
diff --git a/test/unit/specs/drawer.spec.js b/test/unit/specs/drawer.spec.js
new file mode 100644
index 00000000000..c8d1c3caf9f
--- /dev/null
+++ b/test/unit/specs/drawer.spec.js
@@ -0,0 +1,350 @@
+import { createVue, destroyVM, waitImmediate, wait } from '../util';
+
+const title = '我是测试 title';
+const content = 'content';
+
+describe('Drawer', () => {
+  let vm;
+  afterEach(() => {
+    destroyVM(vm);
+  });
+
+  it('create', async() => {
+    vm = createVue(
+      {
+        template: `
+        <el-drawer :title='title' :visible='visible'></el-drawer>
+      `,
+        data() {
+          return {
+            title,
+            visible: true
+          };
+        }
+      },
+      true
+    );
+    const drawer = vm.$children[0];
+    await waitImmediate();
+    expect(document.querySelector('.v-modal')).to.exist;
+    expect(vm.$el.querySelector('.el-drawer__header').textContent).to.equal(
+      title
+    );
+    expect(drawer.$el.style.display).to.not.equal('none');
+  });
+
+  it('render correct content', async() => {
+    vm = createVue(
+      {
+        template: `
+          <el-drawer :title='title' :visible='visible'>
+            <span>这是一段信息</span>
+            <el-button @click.native='dialogVisible = false'>取消</el-button>
+            <el-button type='primary' @click.native='dialogVisible = false'>确定</el-button>
+          </el-drawer>
+      `,
+
+        data() {
+          return {
+            title: 'drawer test',
+            visible: true
+          };
+        }
+      },
+      true
+    );
+    await waitImmediate();
+    expect(vm.$el.querySelector('.el-drawer__body span').textContent).to.equal(
+      '这是一段信息'
+    );
+    const footerBtns = vm.$el.querySelectorAll('.el-button');
+    expect(footerBtns.length).to.equal(2);
+    expect(footerBtns[0].querySelector('span').textContent).to.equal('取消');
+    expect(footerBtns[1].querySelector('span').textContent).to.equal('确定');
+  });
+
+  it('should append to body, when append-to-body flag is true', async() => {
+    vm = createVue(
+      {
+        template: `
+        <el-drawer :title='title' :visible='visible' :append-to-body='true'>
+           <span> content </span>
+        </el-drawer>
+      `,
+        data() {
+          return {
+            title,
+            visible: true
+          };
+        }
+      },
+      true
+    );
+    await waitImmediate();
+    expect(vm.$el.parentNode).to.equal(document.body);
+  });
+
+  it('should open and close drawer properly', async() => {
+    vm = createVue({
+      template: `
+        <el-drawer :title='title' :visible='visible' ref='drawer'>
+           <span>${content}</span>
+        </el-drawer>
+      `,
+      data() {
+        return {
+          title,
+          visible: false
+        };
+      }
+    });
+    let drawer = vm.$children[0].$el;
+    expect(drawer.style.display).to.equal('none');
+    vm.visible = true;
+    await waitImmediate();
+    expect(drawer.style.display).not.to.equal('none');
+    vm.visible = false;
+    await wait(400);
+    expect(drawer.style.display).to.equal('none');
+  });
+
+  it('should destroy every child after drawer was closed when destroy-on-close flag is true', async() => {
+    vm = createVue({
+      template: `
+        <el-drawer :title='title' :visible='visible' :append-to-body='true' :destroy-on-close='true' ref='drawer'>
+           <span>${content}</span>
+        </el-drawer>
+      `,
+      data() {
+        return {
+          title,
+          visible: true
+        };
+      }
+    });
+
+    await waitImmediate();
+    expect(vm.$el.querySelector('.el-drawer__body span').textContent).to.equal(
+      content
+    );
+    vm.$refs.drawer.closeDrawer();
+    await wait(400);
+    expect(vm.$el.querySelector('.el-drawer__body')).not.to.exist;
+  });
+
+  it('should close dialog by clicking the close button', async() => {
+    vm = createVue({
+      template: `
+        <el-drawer :title='title' :visible.sync='visible' :append-to-body='true' :destroy-on-close='true' ref='drawer'>
+           <span>${content}</span>
+        </el-drawer>
+      `,
+      data() {
+        return {
+          title,
+          visible: true
+        };
+      }
+    });
+
+    await waitImmediate();
+    vm.$children[0].$el.querySelector('.el-drawer__close-btn').click();
+    expect(vm.visible).to.equal(false);
+  });
+
+  it('should invoke before-close', async() => {
+    const beforeClose = sinon.spy();
+    vm = createVue({
+      template: `
+        <el-drawer
+                :before-close='beforeClose'
+                :title='title'
+                :visible.sync='visible'
+                :append-to-body='true'
+                :destroy-on-close='true'
+                ref='drawer'
+               >
+           <span>${content}</span>
+        </el-drawer>
+      `,
+      data() {
+        return {
+          title,
+          visible: true,
+          beforeClose
+        };
+      }
+    });
+
+    await waitImmediate();
+    vm.$refs.drawer.closeDrawer();
+    await waitImmediate();
+    expect(beforeClose.called).to.be.true;
+  });
+
+  it('should not show close button when show-close flag is false', async() => {
+    vm = createVue({
+      template: `
+        <el-drawer :title='title' :visible='visible' ref='drawer' :show-close='false'>
+           <span>${content}</span>
+        </el-drawer>
+      `,
+      data() {
+        return {
+          title,
+          visible: false
+        };
+      }
+    });
+    expect(vm.$el.querySelector('.el-drawer__close-btn')).not.to.exist;
+  });
+
+  it('should have custom classes when custom classes were given', async() => {
+    const classes = 'some-custom-class';
+    vm = createVue({
+      template: `
+        <el-drawer :title='title' :visible='visible' ref='drawer' custom-class='${classes}'>
+           <span>${content}</span>
+        </el-drawer>
+      `,
+      data() {
+        return {
+          title,
+          visible: false
+        };
+      }
+    });
+
+    expect(vm.$el.querySelector(`.${classes}`)).to.exist;
+  });
+
+  it('should not render header when withHeader attribute is false', () => {
+    vm = createVue({
+      template: `
+        <el-drawer :title='title' :visible='visible' ref='drawer' :with-header='false'>
+           <span>${content}</span>
+        </el-drawer>
+      `,
+      data() {
+        return {
+          title,
+          visible: true
+        };
+      }
+    });
+
+    expect(vm.$el.querySelector('.el-drawer__header')).to.not.exist;
+  });
+
+  describe('directions', () => {
+    const renderer = direction => {
+      return createVue({
+        template: `
+         <el-drawer :title='title' :visible='visible' direction='${direction}'>
+            <span>${content}</span>
+         </el-drawer>
+        `,
+        data: {
+          visible: true,
+          title
+        }
+      });
+    };
+    it('should render from left to right', async() => {
+      vm = renderer('ltr');
+      await waitImmediate();
+      expect(vm.$el.querySelector('.ltr')).to.exist;
+    });
+
+    it('should render from right to left', async() => {
+      vm = renderer('rtl');
+      await waitImmediate();
+      expect(vm.$el.querySelector('.rtl')).to.exist;
+    });
+
+    it('should render from top to bottom', async() => {
+      vm = renderer('ttb');
+      await waitImmediate();
+      expect(vm.$el.querySelector('.ttb')).to.exist;
+    });
+
+    it('should render from bottom to top', async() => {
+      vm = renderer('btt');
+      await waitImmediate();
+      expect(vm.$el.querySelector('.btt')).to.exist;
+    });
+  });
+
+  it('events', async() => {
+    const open = sinon.spy();
+    const opened = sinon.spy();
+    const close = sinon.spy();
+    const closed = sinon.spy();
+
+    vm = createVue({
+      template: `
+        <el-drawer 
+            :title='title'
+            :visible='visible'
+            ref="drawer"
+            @open="open"
+            @opened="opened"
+            @close="close"
+            @closed="closed">
+          <span>${content}</span>
+         </el-drawer>
+      `,
+      data() {
+        return {
+          content,
+          visible: false,
+          title
+        };
+      },
+      methods: {
+        close,
+        closed,
+        open,
+        opened
+      }
+    });
+    vm.visible = true;
+    await wait(400);
+    expect(open.called).to.be.true;
+    expect(opened.called).to.be.true;
+    expect(close.called).to.be.false;
+    expect(closed.called).to.be.false;
+    vm.visible = false;
+    await wait(500);
+    expect(close.called).to.be.true;
+    expect(closed.called).to.be.true;
+  });
+
+  describe('size', () => {
+    const renderer = (size, isVertical) =>
+      createVue({
+        template: `
+         <el-drawer :title='title' :visible='visible' direction='${isVertical ? 'ltr' : 'ttb'}' size='${size}'>
+            <span>${content}</span>
+         </el-drawer>
+      `,
+        data: {
+          visible: true,
+          title
+        }
+      });
+
+    it('should effect height when drawer is vertical', async() => {
+      const size = '50%';
+      vm = renderer(size, true);
+
+      expect(vm.$el.querySelector('.el-drawer').style.width).to.equal('50%');
+    });
+
+    it('should effect width when drawer is horizontal', async() => {
+      const size = '50%';
+      vm = renderer(size, false);
+      expect(vm.$el.querySelector('.el-drawer').style.height).to.equal('50%');
+    });
+  });
+});
diff --git a/test/unit/specs/edit-table.spec.js b/test/unit/specs/edit-table.spec.js
new file mode 100644
index 00000000000..7dda7ebc478
--- /dev/null
+++ b/test/unit/specs/edit-table.spec.js
@@ -0,0 +1,15 @@
+import { createTest, destroyVM } from '../util';
+import EditTable from 'packages/edit-table';
+
+describe('EditTable', () => {
+  let vm;
+  afterEach(() => {
+    destroyVM(vm);
+  });
+
+  it('create', () => {
+    vm = createTest(EditTable, true);
+    expect(vm.$el).to.exist;
+  });
+});
+
diff --git a/test/unit/specs/empty.spec.js b/test/unit/specs/empty.spec.js
new file mode 100644
index 00000000000..465306f5013
--- /dev/null
+++ b/test/unit/specs/empty.spec.js
@@ -0,0 +1,29 @@
+import { createTest, destroyVM } from '../util';
+import Empty from 'packages/empty';
+
+describe('Empty', () => {
+  let vm;
+  afterEach(() => {
+    destroyVM(vm);
+  });
+
+  it('create', () => {
+    vm = createTest(Empty, true);
+    expect(vm.$el).to.exist;
+  });
+
+  it('description', () => {
+    vm = createTest(Empty, {
+      description: '我是描述'
+    });
+    expect(vm.$el.querySelector('.el-empty-description').innerHTML).to.equal('我是描述');
+  });
+
+  it('image', () => {
+    vm = createTest(Empty, {
+      image: 'http://empty.image.com/empty.png'
+    });
+    expect(vm.$el.querySelector('img').src).to.equal('http://empty.image.com/empty.png');
+  });
+
+});
diff --git a/test/unit/specs/form.spec.js b/test/unit/specs/form.spec.js
index 68a354d3be9..c3f6edd0b3f 100644
--- a/test/unit/specs/form.spec.js
+++ b/test/unit/specs/form.spec.js
@@ -1,4 +1,4 @@
-import { createVue, destroyVM } from '../util';
+import { createVue, destroyVM, waitImmediate } from '../util';
 
 const DELAY = 50;
 
@@ -43,6 +43,43 @@ describe('Form', () => {
     expect(vm.$el.querySelector('.el-form-item__content').style.marginLeft).to.equal('80px');
     done();
   });
+  it('auto label width', async() => {
+    vm = createVue({
+      template: `
+        <el-form ref="form" :model="form" label-width="auto">
+          <el-form-item label="活动名称">
+            <el-input v-model="form.name"></el-input>
+          </el-form-item>
+          <el-form-item label="活动备注信息" v-if="display">
+            <el-input v-model="form.name"></el-input>
+          </el-form-item>
+        </el-form>
+      `,
+      data() {
+        return {
+          display: true,
+          form: {
+            name: '',
+            intro: ''
+          }
+        };
+      }
+    }, true);
+
+    await waitImmediate();
+
+    const formItems = vm.$el.querySelectorAll('.el-form-item__content');
+    const marginLeft = parseInt(formItems[0].style.marginLeft, 10);
+    const marginLeft1 = parseInt(formItems[1].style.marginLeft, 10);
+    expect(marginLeft === marginLeft1).to.be.true;
+
+    vm.display = false;
+    await waitImmediate();
+
+    const formItem = vm.$el.querySelector('.el-form-item__content');
+    const newMarginLeft = parseInt(formItem.style.marginLeft, 10);
+    expect(newMarginLeft < marginLeft).to.be.true;
+  });
   it('inline form', done => {
     vm = createVue({
       template: `
@@ -284,7 +321,7 @@ describe('Form', () => {
             <el-col class="line" :span="2">-</el-col>
             <el-col :span="11">
               <el-form-item prop="date2">
-                <el-time-picker type="fixed-time" placeholder="选择时间" v-model="form.date2" style="width: 100%;"></el-time-picker>
+                <el-time-picker placeholder="选择时间" v-model="form.date2" style="width: 100%;"></el-time-picker>
               </el-form-item>
             </el-col>
           </el-form-item>
@@ -517,7 +554,7 @@ describe('Form', () => {
         template: `
           <el-form :model="form" :rules="rules" ref="form">
             <el-form-item label="记住密码" prop="date" ref="field">
-              <el-time-picker type="fixed-time" ref="picker" placeholder="选择时间" v-model="form.date" style="width: 100%;"></el-time-picker>
+              <el-time-picker ref="picker" placeholder="选择时间" v-model="form.date" style="width: 100%;"></el-time-picker>
             </el-form-item>
           </el-form>
         `,
diff --git a/test/unit/specs/icon-checkbox.spec.js b/test/unit/specs/icon-checkbox.spec.js
new file mode 100644
index 00000000000..3d6b496733a
--- /dev/null
+++ b/test/unit/specs/icon-checkbox.spec.js
@@ -0,0 +1,29 @@
+import {createVue, destroyVM} from '../util';
+
+describe('IconCheckbox', () => {
+  let vm;
+  afterEach(() => {
+    destroyVM(vm);
+  });
+
+  it('create', done => {
+    vm = createVue({
+      template: `
+          <el-icon-checkbox v-model="checked" label="a">
+          </el-icon-checkbox>
+        `,
+      data() {
+        return {
+          checked: false
+        };
+      }
+    }, true);
+    let checkboxElm = vm.$el;
+    expect(checkboxElm.classList.contains('el-checkbox-icon-button')).to.be.true;
+    checkboxElm.click();
+    vm.$nextTick(_ => {
+      expect(checkboxElm.classList.contains('is-checked')).to.be.ok;
+      done();
+    });
+  });
+});
diff --git a/test/unit/specs/image.spec.js b/test/unit/specs/image.spec.js
new file mode 100644
index 00000000000..9ae43b39191
--- /dev/null
+++ b/test/unit/specs/image.spec.js
@@ -0,0 +1,138 @@
+import { createTest, createVue, destroyVM, wait } from '../util';
+import Image from 'packages/image';
+import { IMAGE_SUCCESS, IMAGE_FAIL } from '../mocks/uri';
+
+const src = IMAGE_SUCCESS;
+
+describe('Image', () => {
+  let vm;
+
+  afterEach(() => {
+    destroyVM(vm);
+  });
+
+  it('create', async() => {
+    vm = createTest(Image, {
+      src,
+      fit: 'fill'
+    }, true);
+    const placeholder = vm.$el.querySelector('.el-image__placeholder');
+    const error = vm.$el.querySelector('.el-image__error');
+    let img = vm.$el.querySelector('.el-image__inner');
+    expect(placeholder).to.exist;
+    expect(error).to.be.null;
+    expect(img).to.be.null;
+
+    await wait();
+    img = vm.$el.querySelector('.el-image__inner');
+    expect(img.style.objectFit).to.equal('fill');
+  });
+
+  it('load failed', async() => {
+    vm = createTest(Image, {
+      src: IMAGE_FAIL
+    }, true);
+    await wait();
+    const error = vm.$el.querySelector('.el-image__error');
+    expect(error).to.be.exist;
+  });
+
+  it('lazy load', async() => {
+    vm = createVue({
+      template: `
+        <div ref="wrapper" style="height: 200px; overflow: auto;">
+          <el-image
+            v-for="item in 2"
+            :key="item"
+            :src="src"
+            ref="image"
+            style="display: block; height: 200px;"
+            lazy></el-image>
+        </div>
+      `,
+      data() {
+        return {
+          src
+        };
+      }
+    }, true);
+    const { image, wrapper } = vm.$refs;
+    const [image1, image2] = image;
+
+    await wait();
+    expect(image1.loading).to.be.false;
+    expect(image2.loading).to.be.true;
+    wrapper.scrollTop = 10;
+
+    await wait();
+    expect(image2.loading).to.be.false;
+  });
+
+  it('$attrs', async() => {
+    vm = createVue({
+      template: `
+        <el-image
+          alt="$attrs test"
+          referrerpolicy="origin"
+          :src="src"></el-image>
+      `,
+      data() {
+        return {
+          src
+        };
+      }
+    }, true);
+
+    await wait();
+    const $img = vm.$el.querySelector('.el-image__inner');
+    expect($img.getAttribute('alt')).to.be.equal('$attrs test');
+    expect($img.getAttribute('referrerpolicy')).to.be.equal('origin');
+  });
+
+  it('pass event listeners', async() => {
+    let result;
+    vm = createVue({
+      template: `
+        <el-image @click="handleClick" :src="src"></el-image>
+      `,
+      data() {
+        return {
+          src
+        };
+      },
+      methods: {
+        handleClick(e) {
+          result = e;
+        }
+      }
+    }, true);
+    await wait();
+    vm.$el.querySelector('.el-image__inner').click();
+    await wait();
+    expect(result).to.exist;
+  });
+
+  it('big image preview', async() => {
+    vm = createVue({
+      template: `
+        <el-image :src="src" :preview-src-list="srcList"></el-image>
+      `,
+      data() {
+        return {
+          src: src,
+          srcList: [src]
+        };
+      }
+    }, true);
+    await wait();
+    vm.$el.querySelector('.el-image__inner').click();
+    await wait();
+
+    const $wrapper = vm.$el.querySelector('.el-image-viewer__wrapper');
+    expect($wrapper).to.exist;
+    vm.$el.querySelector('.el-image-viewer__close').click();
+    await wait(1000);
+    expect($wrapper.style.display).to.equal('none');
+  });
+});
+
diff --git a/test/unit/specs/infiniteScroll.spec.js b/test/unit/specs/infiniteScroll.spec.js
new file mode 100644
index 00000000000..7f3d26b0bdd
--- /dev/null
+++ b/test/unit/specs/infiniteScroll.spec.js
@@ -0,0 +1,58 @@
+import { createVue, wait, destroyVM } from '../util';
+
+describe('InfiniteScroll', () => {
+  let vm;
+  afterEach(() => {
+    destroyVM(vm);
+  });
+
+  it('create', async() => {
+    vm = createVue({
+      template: `
+      <ul ref="scrollTarget" v-infinite-scroll="load" style="height: 300px;overflow: auto;">
+        <li v-for="i in count" style="display: flex;height: 50px;">{{ i }}</li>
+      </ul>
+      `,
+      data() {
+        return {
+          count: 0
+        };
+      },
+      methods: {
+        load() {
+          this.count += 2;
+        }
+      }
+    }, true);
+    vm.$refs.scrollTarget.scrollTop = 2000;
+    await wait();
+    expect(vm.$el.innerText.indexOf('2') > -1).to.be.true;
+  });
+
+  it('invisible element not trigger', async() => {
+    vm = createVue({
+      template: `
+      <div v-show="false">
+        <ul ref="scrollTarget" v-infinite-scroll="load" style="height: 300px;overflow: auto;">
+          <li v-for="i in count" style="display: flex;height: 50px;">{{ i }}</li>
+        </ul>
+      </div>
+      `,
+      data() {
+        return {
+          count: 0
+        };
+      },
+      methods: {
+        load() {
+          this.count += 2;
+        }
+      }
+    }, true);
+    vm.$refs.scrollTarget.scrollTop = 2000;
+    await wait();
+    expect(vm.$el.innerText.indexOf('2') > -1).to.be.false;
+  });
+
+});
+
diff --git a/test/unit/specs/input-email.spec.js b/test/unit/specs/input-email.spec.js
new file mode 100644
index 00000000000..ca949da83ce
--- /dev/null
+++ b/test/unit/specs/input-email.spec.js
@@ -0,0 +1,15 @@
+import { createTest, destroyVM } from '../util';
+import InputEmail from 'packages/input-email';
+
+describe('InputEmail', () => {
+  let vm;
+  afterEach(() => {
+    destroyVM(vm);
+  });
+
+  it('create', () => {
+    vm = createTest(InputEmail, true);
+    expect(vm.$el).to.exist;
+  });
+});
+
diff --git a/test/unit/specs/input-id-card.spec.js b/test/unit/specs/input-id-card.spec.js
new file mode 100644
index 00000000000..2de49906a7d
--- /dev/null
+++ b/test/unit/specs/input-id-card.spec.js
@@ -0,0 +1,15 @@
+import { createTest, destroyVM } from '../util';
+import InputIdCard from 'packages/input-id-card';
+
+describe('InputIdCard', () => {
+  let vm;
+  afterEach(() => {
+    destroyVM(vm);
+  });
+
+  it('create', () => {
+    vm = createTest(InputIdCard, true);
+    expect(vm.$el).to.exist;
+  });
+});
+
diff --git a/test/unit/specs/input-number.spec.js b/test/unit/specs/input-number.spec.js
index 34a28db16f9..dbff288b651 100644
--- a/test/unit/specs/input-number.spec.js
+++ b/test/unit/specs/input-number.spec.js
@@ -1,4 +1,4 @@
-import { createVue, triggerEvent, triggerClick, destroyVM } from '../util';
+import {createVue, triggerEvent, triggerClick, destroyVM, waitImmediate} from '../util';
 
 const DELAY = 1;
 
@@ -142,6 +142,29 @@ describe('InputNumber', () => {
       });
     });
   });
+  it('step strictly', async() => {
+    vm = createVue({
+      template: `
+        <el-input-number v-model="value" :step="1.2" step-strictly>
+        </el-input-number>
+      `,
+      data() {
+        return {
+          value: 5
+        };
+      }
+    }, true);
+
+    let input = vm.$el.querySelector('input');
+    await waitImmediate();
+    expect(vm.value).to.be.equal(4.8);
+    expect(input.value).to.be.equal('4.8');
+    vm.value = '8';
+
+    await waitImmediate();
+    expect(vm.value).to.be.equal(8.4);
+    expect(input.value).to.be.equal('8.4');
+  });
   it('min', done => {
     vm = createVue({
       template: `
diff --git a/test/unit/specs/input-phone.spec.js b/test/unit/specs/input-phone.spec.js
new file mode 100644
index 00000000000..22c2d433174
--- /dev/null
+++ b/test/unit/specs/input-phone.spec.js
@@ -0,0 +1,15 @@
+import { createTest, destroyVM } from '../util';
+import InputPhone from 'packages/input-phone';
+
+describe('InputPhone', () => {
+  let vm;
+  afterEach(() => {
+    destroyVM(vm);
+  });
+
+  it('create', () => {
+    vm = createTest(InputPhone, true);
+    expect(vm.$el).to.exist;
+  });
+});
+
diff --git a/test/unit/specs/input-url.spec.js b/test/unit/specs/input-url.spec.js
new file mode 100644
index 00000000000..9472207e4b1
--- /dev/null
+++ b/test/unit/specs/input-url.spec.js
@@ -0,0 +1,15 @@
+import { createTest, destroyVM } from '../util';
+import InputUrl from 'packages/input-url';
+
+describe('InputUrl', () => {
+  let vm;
+  afterEach(() => {
+    destroyVM(vm);
+  });
+
+  it('create', () => {
+    vm = createTest(InputUrl, true);
+    expect(vm.$el).to.exist;
+  });
+});
+
diff --git a/test/unit/specs/input.spec.js b/test/unit/specs/input.spec.js
index 22f791c7848..f12b87ba535 100644
--- a/test/unit/specs/input.spec.js
+++ b/test/unit/specs/input.spec.js
@@ -1,4 +1,4 @@
-import { createVue, destroyVM } from '../util';
+import { createVue, destroyVM, triggerEvent, wait, waitImmediate } from '../util';
 
 describe('Input', () => {
   let vm;
@@ -6,7 +6,7 @@ describe('Input', () => {
     destroyVM(vm);
   });
 
-  it('create', () => {
+  it('create', async() => {
     vm = createVue({
       template: `
         <el-input
@@ -14,11 +14,12 @@ describe('Input', () => {
           :maxlength="5"
           placeholder="请输入内容"
           @focus="handleFocus"
-          value="input">
+          :value="input">
         </el-input>
       `,
       data() {
         return {
+          input: 'input',
           inputFocus: false
         };
       },
@@ -35,6 +36,18 @@ describe('Input', () => {
     expect(inputElm.value).to.equal('input');
     expect(inputElm.getAttribute('minlength')).to.equal('3');
     expect(inputElm.getAttribute('maxlength')).to.equal('5');
+
+    vm.input = 'text';
+    await waitImmediate();
+    expect(inputElm.value).to.equal('text');
+  });
+
+  it('default to empty', () => {
+    vm = createVue({
+      template: '<el-input/>'
+    }, true);
+    let inputElm = vm.$el.querySelector('input');
+    expect(inputElm.value).to.equal('');
   });
 
   it('disabled', () => {
@@ -100,7 +113,7 @@ describe('Input', () => {
   });
 
   // Github issue #2836
-  it('resize', done => {
+  it('resize', async() => {
     vm = createVue({
       template: `
         <div>
@@ -111,17 +124,14 @@ describe('Input', () => {
         resize: 'none'
       }
     }, true);
-    vm.$nextTick(() => {
-      expect(vm.$el.querySelector('.el-textarea__inner').style.resize).to.be.equal(vm.resize);
-      vm.resize = 'horizontal';
-      vm.$nextTick(() => {
-        expect(vm.$el.querySelector('.el-textarea__inner').style.resize).to.be.equal(vm.resize);
-        done();
-      });
-    });
+    await waitImmediate();
+    expect(vm.$el.querySelector('.el-textarea__inner').style.resize).to.be.equal(vm.resize);
+    vm.resize = 'horizontal';
+    await waitImmediate();
+    expect(vm.$el.querySelector('.el-textarea__inner').style.resize).to.be.equal(vm.resize);
   });
 
-  it('autosize', done => {
+  it('autosize', async() => {
     vm = createVue({
       template: `
         <div>
@@ -154,14 +164,13 @@ describe('Input', () => {
     expect(limitlessSizeInput.textareaStyle.height).to.be.equal('201px');
 
     vm.textareaValue = '';
-    setTimeout(_ => {
-      expect(limitSizeInput.textareaStyle.height).to.be.equal('75px');
-      expect(limitlessSizeInput.textareaStyle.height).to.be.equal('33px');
-      done();
-    }, 200);
+
+    await wait();
+    expect(limitSizeInput.textareaStyle.height).to.be.equal('75px');
+    expect(limitlessSizeInput.textareaStyle.height).to.be.equal('33px');
   });
 
-  it('focus', done => {
+  it('focus', async() => {
     vm = createVue({
       template: `
         <el-input ref="input">
@@ -174,13 +183,11 @@ describe('Input', () => {
     vm.$refs.input.$on('focus', spy);
     vm.$refs.input.focus();
 
-    vm.$nextTick(_ => {
-      expect(spy.calledOnce).to.be.true;
-      done();
-    });
+    await waitImmediate();
+    expect(spy.calledOnce).to.be.true;
   });
 
-  it('Input contains Select and append slot', (done) => {
+  it('Input contains Select and append slot', async() => {
     vm = createVue({
       template: `
       <el-input v-model="value" clearable class="input-with-select" ref="input">
@@ -194,20 +201,20 @@ describe('Input', () => {
       `,
       data() {
         return {
-          value: '1234'
+          value: '1234',
+          select: '1'
         };
       }
     }, true);
     vm.$refs.input.hovering = true;
-    setTimeout(() => {
-      const suffixEl = document.querySelector('.input-with-select > .el-input__suffix');
-      expect(suffixEl).to.not.be.null;
-      expect(suffixEl.style.transform).to.not.be.empty;
-      done();
-    }, 20);
+
+    await wait();
+    const suffixEl = document.querySelector('.input-with-select > .el-input__suffix');
+    expect(suffixEl).to.not.be.null;
+    expect(suffixEl.style.transform).to.not.be.empty;
   });
 
-  it('validateEvent', done => {
+  it('validateEvent', async() => {
     const spy = sinon.spy();
     vm = createVue({
       template: `
@@ -237,14 +244,12 @@ describe('Input', () => {
     }, true);
 
     vm.model.input = '123';
-    vm.$nextTick(() => {
-      expect(spy.called).to.be.false;
-      done();
-    });
+    await waitImmediate();
+    expect(spy.called).to.be.false;
   });
 
   describe('Input Events', () => {
-    it('event:focus & blur', done => {
+    it('event:focus & blur', async() => {
       vm = createVue({
         template: `
           <el-input
@@ -263,13 +268,11 @@ describe('Input', () => {
       vm.$el.querySelector('input').focus();
       vm.$el.querySelector('input').blur();
 
-      vm.$nextTick(_ => {
-        expect(spyFocus.calledOnce).to.be.true;
-        expect(spyBlur.calledOnce).to.be.true;
-        done();
-      });
+      await waitImmediate();
+      expect(spyFocus.calledOnce).to.be.true;
+      expect(spyBlur.calledOnce).to.be.true;
     });
-    it('event:change', done => {
+    it('event:change', async() => {
       // NOTE: should be same as native's change behavior
       vm = createVue({
         template: `
@@ -298,13 +301,11 @@ describe('Input', () => {
       // simplified test, component should emit change when native does
       simulateEvent('1', 'input');
       simulateEvent('2', 'change');
-      vm.$nextTick(_ => {
-        expect(spy.calledWith('2')).to.be.true;
-        expect(spy.calledOnce).to.be.true;
-        done();
-      });
+      await waitImmediate();
+      expect(spy.calledWith('2')).to.be.true;
+      expect(spy.calledOnce).to.be.true;
     });
-    it('event:clear', done => {
+    it('event:clear', async() => {
       vm = createVue({
         template: `
           <el-input
@@ -327,18 +328,51 @@ describe('Input', () => {
       // focus to show clear button
       inputElm.focus();
       vm.$refs.input.$on('clear', spyClear);
-      vm.$nextTick(_ => {
-        vm.$el.querySelector('.el-input__clear').click();
-        vm.$nextTick(_ => {
-          expect(spyClear.calledOnce).to.be.true;
-          done();
-        });
-      });
+      await waitImmediate();
+      vm.$el.querySelector('.el-input__clear').click();
+      await waitImmediate();
+      expect(spyClear.calledOnce).to.be.true;
+    });
+    it('event:input', async() => {
+      vm = createVue({
+        template: `
+          <el-input
+            ref="input"
+            placeholder="请输入内容"
+            clearable
+            :value="input">
+          </el-input>
+        `,
+        data() {
+          return {
+            input: 'a'
+          };
+        }
+      }, true);
+      const spy = sinon.spy();
+      vm.$refs.input.$on('input', spy);
+      const nativeInput = vm.$refs.input.$el.querySelector('input');
+      nativeInput.value = '1';
+      triggerEvent(nativeInput, 'compositionstart');
+      triggerEvent(nativeInput, 'input');
+      await waitImmediate();
+      nativeInput.value = '2';
+      triggerEvent(nativeInput, 'compositionupdate');
+      triggerEvent(nativeInput, 'input');
+      await waitImmediate();
+      triggerEvent(nativeInput, 'compositionend');
+      await waitImmediate();
+      // input event does not fire during composition
+      expect(spy.calledOnce).to.be.true;
+      // native input value is controlled
+      expect(vm.input).to.equal('a');
+      expect(nativeInput.value).to.equal('a');
+
     });
   });
 
   describe('Input Methods', () => {
-    it('method:select', done => {
+    it('method:select', async() => {
       const testContent = 'test';
 
       vm = createVue({
@@ -355,11 +389,95 @@ describe('Input', () => {
 
       vm.$refs.inputComp.select();
 
-      vm.$nextTick(_ => {
-        expect(vm.$refs.inputComp.$refs.input.selectionStart).to.equal(0);
-        expect(vm.$refs.inputComp.$refs.input.selectionEnd).to.equal(testContent.length);
-        done();
-      });
+      await waitImmediate();
+      expect(vm.$refs.inputComp.$refs.input.selectionStart).to.equal(0);
+      expect(vm.$refs.inputComp.$refs.input.selectionEnd).to.equal(testContent.length);
     });
   });
+
+  it('sets value on textarea / input type change', async() => {
+    vm = createVue({
+      template: `
+        <el-input :type="type" v-model="val" />
+      `,
+      data() {
+        return {
+          type: 'text',
+          val: '123'
+        };
+      }
+    }, true);
+
+    expect(vm.$el.querySelector('input').value).to.equal('123');
+    vm.type = 'textarea';
+    await waitImmediate();
+    expect(vm.$el.querySelector('textarea').value).to.equal('123');
+    vm.type = 'password';
+    await waitImmediate();
+    expect(vm.$el.querySelector('input').value).to.equal('123');
+  });
+
+  it('limit input and show word count', async() => {
+    vm = createVue({
+      template: `
+        <div>
+          <el-input
+            class="test-text"
+            type="text"
+            v-model="input1"
+            maxlength="10"
+            :show-word-limit="show">
+          </el-input>
+          <el-input
+            class="test-textarea"
+            type="textarea"
+            v-model="input2"
+            maxlength="10"
+            show-word-limit>
+          </el-input>
+          <el-input
+            class="test-password"
+            type="password"
+            v-model="input3"
+            maxlength="10"
+            show-word-limit>
+          </el-input>
+          <el-input
+            class="test-initial-exceed"
+            type="text"
+            v-model="input4"
+            maxlength="2"
+            show-word-limit>
+          </el-input>
+        </div>
+      `,
+      data() {
+        return {
+          input1: '',
+          input2: '',
+          input3: '',
+          input4: 'exceed',
+          show: false
+        };
+      }
+    }, true);
+
+    const inputElm1 = vm.$el.querySelector('.test-text');
+    const inputElm2 = vm.$el.querySelector('.test-textarea');
+    const inputElm3 = vm.$el.querySelector('.test-password');
+    const inputElm4 = vm.$el.querySelector('.test-initial-exceed');
+
+    expect(inputElm1.querySelectorAll('.el-input__count').length).to.equal(0);
+    expect(inputElm2.querySelectorAll('.el-input__count').length).to.equal(1);
+    expect(inputElm3.querySelectorAll('.el-input__count').length).to.equal(0);
+    expect(inputElm4.classList.contains('is-exceed')).to.true;
+
+    vm.show = true;
+    await waitImmediate();
+    expect(inputElm1.querySelectorAll('.el-input__count').length).to.equal(1);
+
+    vm.input4 = '1';
+    await waitImmediate();
+    expect(inputElm4.classList.contains('is-exceed')).to.false;
+  });
 });
diff --git a/test/unit/specs/link.spec.js b/test/unit/specs/link.spec.js
new file mode 100644
index 00000000000..5eae9f0a902
--- /dev/null
+++ b/test/unit/specs/link.spec.js
@@ -0,0 +1,66 @@
+import { createTest, createVue, destroyVM, wait } from '../util';
+import Link from 'packages/link';
+
+describe('Link', () => {
+  let vm;
+  afterEach(() => {
+    destroyVM(vm);
+  });
+
+  it('create', () => {
+    vm = createTest(Link, {
+      type: 'primary'
+    }, true);
+    let linkElm = vm.$el;
+    expect(linkElm.classList.contains('el-link--primary')).to.be.true;
+  });
+  it('icon', () => {
+    vm = createTest(Link, {
+      icon: 'el-icon-search'
+    }, true);
+    let linkElm = vm.$el;
+    expect(linkElm.querySelector('.el-icon-search')).to.be.ok;
+  });
+  it('href', () => {
+    vm = createTest(Link, {
+      href: 'https://element.eleme.io/'
+    }, true);
+    let linkElm = vm.$el;
+    expect(linkElm.getAttribute('href')).to.be.equal('https://element.eleme.io/');
+  });
+  it('target', () => {
+    vm = createVue(`
+    <el-link href="https://element.eleme.io" target="_blank">
+      default
+    </el-link>
+    `);
+    let linkElm = vm.$el;
+    expect(linkElm.getAttribute('target')).to.be.equal('_blank');
+  });
+  it('disabled', () => {
+    vm = createTest(Link, {
+      disabled: true
+    }, true);
+    let linkElm = vm.$el;
+    expect(linkElm.classList.contains('is-disabled')).to.be.true;
+  });
+
+  it('click', async() => {
+    let result;
+    vm = createVue({
+      template: `
+        <el-link @click="handleClick"></el-link>
+      `,
+      methods: {
+        handleClick(evt) {
+          result = evt;
+        }
+      }
+    }, true);
+    vm.$el.click();
+    await wait();
+    expect(result).to.exist;
+  });
+
+});
+
diff --git a/test/unit/specs/loading-button.spec.js b/test/unit/specs/loading-button.spec.js
new file mode 100644
index 00000000000..a825f228f5d
--- /dev/null
+++ b/test/unit/specs/loading-button.spec.js
@@ -0,0 +1,42 @@
+import { createTest, destroyVM, createVue } from '../util';
+import LoadingButton from 'packages/loading-button';
+
+function checkClick(vm, done) {
+  let result;
+  vm = createVue({
+    template: `
+        <el-loading-button :loadingClick="handleClick"></el-loading-button>
+      `,
+    methods: {
+      handleClick(evt) {
+        result = evt;
+      }
+    }
+  }, true);
+  vm.$el.click();
+
+  setTimeout(_ => {
+    expect(result).to.exist;
+    done();
+  }, 20);
+}
+
+describe('LoadingButton', () => {
+  let vm;
+  afterEach(() => {
+    destroyVM(vm);
+  });
+
+  it('create', () => {
+    vm = createTest(LoadingButton, true);
+    expect(vm.$el).to.exist;
+  });
+
+  it('loadingClick', done => {
+    checkClick(vm, done);
+  });
+
+  it('click', done => {
+    checkClick(vm, done);
+  });
+});
diff --git a/test/unit/specs/loading.spec.js b/test/unit/specs/loading.spec.js
index cceede7cd46..480d861233f 100644
--- a/test/unit/specs/loading.spec.js
+++ b/test/unit/specs/loading.spec.js
@@ -257,8 +257,8 @@ describe('Loading', () => {
             expect(masks.length).to.equal(0);
             done();
           }, 350);
-        }, 10);
-      }, 10);
+        }, 50);
+      }, 50);
     });
 
     it('lock', () => {
diff --git a/test/unit/specs/lr-container.spec.js b/test/unit/specs/lr-container.spec.js
new file mode 100644
index 00000000000..43bc1ea8cc7
--- /dev/null
+++ b/test/unit/specs/lr-container.spec.js
@@ -0,0 +1,36 @@
+import { createTest, destroyVM, createVue } from '../util';
+import LrContainer from 'packages/lr-container';
+
+describe('LrContainer', () => {
+  it('create', () => {
+    const vm = createTest(LrContainer, true);
+    expect(vm.$el).to.exist;
+  });
+
+  it('aside', done => {
+    const vm = createVue({
+      template: `
+        <el-lr-container aside-height="100px" aside-width="200px"></el-lr-container>
+      `
+    }, true);
+    setTimeout(_ => {
+      expect(vm.$el.querySelector('.el-lr-container-aside-content').style.height).to.equal('100px');
+      expect(vm.$el.querySelector('.el-lr-container-aside-content').style.width).to.equal('200px');
+      destroyVM(vm);
+      done();
+    }, 10);
+  });
+
+  it('main', done => {
+    const vm = createVue({
+      template: `
+        <el-lr-container main-height="100px"></el-lr-container>
+      `
+    }, true);
+    setTimeout(_ => {
+      expect(vm.$el.querySelector('.el-lr-container-main-content').style.height).to.equal('100px');
+      destroyVM(vm);
+      done();
+    }, 10);
+  });
+});
diff --git a/test/unit/specs/message-box-center.spec.js b/test/unit/specs/message-box-center.spec.js
new file mode 100644
index 00000000000..8dcf1f0b7da
--- /dev/null
+++ b/test/unit/specs/message-box-center.spec.js
@@ -0,0 +1,77 @@
+import MessageBoxCenter from 'packages/message-box-center';
+
+describe('MessageBoxCenter', () => {
+  let hasPromise = true;
+  before(() => {
+    if (!window.Promise) {
+      hasPromise = false;
+      window.Promise = require('es6-promise').Promise;
+    }
+  });
+
+  after(() => {
+    if (!hasPromise) {
+      window.Promise = undefined;
+    }
+  });
+
+  afterEach(() => {
+    const el = document.querySelector('.el-message-box__wrapper');
+    if (!el) return;
+    if (el.parentNode) {
+      el.parentNode.removeChild(el);
+    }
+    MessageBoxCenter.close();
+  });
+
+  it('create and close', done => {
+    MessageBoxCenter.alert('这是一段内容', {
+      type: 'success',
+      title: '消息'
+    });
+    setTimeout(() => {
+      const msgbox = document.querySelector('.el-message-box__wrapper');
+      expect(msgbox.__vue__.$parent.visible).to.true;
+      expect(msgbox.querySelector('.el-message-box-center')).to.exist;
+      expect(msgbox.querySelector('.el-message-box__title span').textContent).to.equal('消息');
+      expect(msgbox.querySelector('.el-message-box__message')
+        .querySelector('p').textContent).to.equal('这是一段内容');
+      MessageBoxCenter.close();
+      expect(msgbox.__vue__.$parent.visible).to.false;
+      done();
+    }, 300);
+  });
+
+  it('customClass', done => {
+    MessageBoxCenter.alert('这是一段内容', {
+      type: 'success',
+      title: '消息',
+      customClass: 'test-custom-class'
+    });
+    setTimeout(() => {
+      const msgbox = document.querySelector('.el-message-box__wrapper');
+      expect(msgbox.querySelector('.test-custom-class')).to.exist;
+      MessageBoxCenter.close();
+      expect(msgbox.__vue__.$parent.visible).to.false;
+      done();
+    }, 300);
+  });
+
+  it('confirm', done => {
+    MessageBoxCenter.confirm('这是一段内容', {
+      type: 'success',
+      title: '消息'
+    });
+    setTimeout(() => {
+      const msgbox = document.querySelector('.el-message-box__wrapper');
+      expect(msgbox.__vue__.$parent.visible).to.true;
+      expect(msgbox.querySelector('.el-message-box-center')).to.exist;
+      expect(msgbox.querySelector('.el-message-box__title span').textContent).to.equal('消息');
+      expect(msgbox.querySelector('.el-message-box__message')
+        .querySelector('p').textContent).to.equal('这是一段内容');
+      MessageBoxCenter.close();
+      expect(msgbox.__vue__.$parent.visible).to.false;
+      done();
+    }, 300);
+  });
+});
diff --git a/test/unit/specs/message-box.spec.js b/test/unit/specs/message-box.spec.js
index b2ec5a62735..9e11c717da6 100644
--- a/test/unit/specs/message-box.spec.js
+++ b/test/unit/specs/message-box.spec.js
@@ -33,7 +33,7 @@ describe('MessageBox', () => {
     setTimeout(() => {
       const msgbox = document.querySelector('.el-message-box__wrapper');
       expect(msgbox.__vue__.$parent.visible).to.true;
-      expect(msgbox.querySelector('.el-message-box__title').textContent).to.equal('消息');
+      expect(msgbox.querySelector('.el-message-box__title span').textContent).to.equal('消息');
       expect(msgbox.querySelector('.el-message-box__message')
         .querySelector('p').textContent).to.equal('这是一段内容');
       MessageBox.close();
diff --git a/test/unit/specs/page-header.spec.js b/test/unit/specs/page-header.spec.js
new file mode 100644
index 00000000000..b0c31cd7d93
--- /dev/null
+++ b/test/unit/specs/page-header.spec.js
@@ -0,0 +1,24 @@
+import { createVue, destroyVM, waitImmediate } from '../util';
+import PageHeader from 'packages/page-header';
+
+describe('PageHeader', () => {
+  let vm;
+  afterEach(() => {
+    destroyVM(vm);
+  });
+
+  it('render well and trigger back event', async() => {
+    vm = createVue(PageHeader, {
+      content: 'content'
+    });
+    expect(vm.$el).to.exist;
+    const spy = sinon.spy();
+    vm.$on('back', spy);
+    vm.$el.querySelector('.el-page-header__left').click();
+
+    await waitImmediate();
+
+    expect(spy.calledOnce).to.be.true;
+  });
+});
+
diff --git a/test/unit/specs/pagination.spec.js b/test/unit/specs/pagination.spec.js
index 8858f871949..d09308514c3 100644
--- a/test/unit/specs/pagination.spec.js
+++ b/test/unit/specs/pagination.spec.js
@@ -249,7 +249,6 @@ describe('Pagination', () => {
     const input = vm.inputer;
     const changeValue = (value) => {
       input.$emit('input', value);
-      input.setCurrentValue(value);
       input.$emit('change', value);
     };
 
@@ -422,6 +421,17 @@ describe('Pagination', () => {
     expect(vm.page).to.equal(1);
   });
 
+  it('hideOnSinglePage', () => {
+    vm = createVue({
+      template: `
+        <el-pagination
+          hide-on-single-page
+          :total="1" />
+      `
+    });
+    expect(vm.$el.nodeType).to.be.equal(window.Node.COMMENT_NODE);
+  });
+
   describe('click pager', () => {
     it('click ul', () => {
       vm = createTest(Pagination, {
diff --git a/test/unit/specs/panel.spec.js b/test/unit/specs/panel.spec.js
new file mode 100644
index 00000000000..37f937b437f
--- /dev/null
+++ b/test/unit/specs/panel.spec.js
@@ -0,0 +1,49 @@
+import { createTest, destroyVM } from '../util';
+import Panel from 'packages/panel';
+
+describe('Panel', () => {
+  let vm;
+  afterEach(() => {
+    destroyVM(vm);
+  });
+
+  it('create', () => {
+    vm = createTest(Panel, true);
+    let panelElm = vm.$el;
+    expect(panelElm.classList.contains('el-panel')).to.be.true;
+  });
+
+  it('type', () => {
+    vm = createTest(Panel, {
+      type: 'view'
+    }, true);
+    let panelElm = vm.$el.children[0];
+    expect(panelElm.classList.contains('el-panel-view__header')).to.be.true;
+  });
+
+  it('title', () => {
+    vm = createTest(Panel, {
+      title: '标题哈哈哈哈'
+    }, true);
+    let panelElm = vm.$el.children[0].children[0].children[0];
+    expect(panelElm.classList.contains('title')).to.be.true;
+  });
+
+  it('subtitle', () => {
+    vm = createTest(Panel, {
+      subtitle: '小标题'
+    }, true);
+    let panelElm = vm.$el.children[0].children[0].children[1];
+    expect(panelElm.classList.contains('subtitle')).to.be.true;
+  });
+
+  it('operation', () => {
+    vm = createTest(Panel, {
+      type: 'view',
+      slot: 'operation'
+    }, true);
+    let panelElm = vm.$el.children[0].children[1];
+    expect(panelElm.classList.contains('el-panel-view__operation')).to.be.true;
+  });
+
+});
diff --git a/test/unit/specs/popconfirm.spec.js b/test/unit/specs/popconfirm.spec.js
new file mode 100644
index 00000000000..a956513a408
--- /dev/null
+++ b/test/unit/specs/popconfirm.spec.js
@@ -0,0 +1,29 @@
+import { createVue, destroyVM } from '../util';
+
+describe('Popconfirm', () => {
+  let vm;
+  afterEach(() => {
+    destroyVM(vm);
+  });
+
+  describe('trigger', () => {
+    const createVM = () => {
+      return createVue(`
+        <div>
+          <el-popconfirm
+            ref="popover"
+            title="content">
+            <button slot="reference">trigger</button>
+          </el-popconfirm>
+        </div>
+      `, true);
+    };
+    it('click', () => {
+      vm = createVM();
+      vm.$el.querySelector('button').click();
+      document.body.click();
+      expect(document.body.querySelector('.el-popconfirm__action').style.display).to.equal('');
+    });
+  });
+
+});
diff --git a/test/unit/specs/popover.spec.js b/test/unit/specs/popover.spec.js
index b0df25ff0b9..a1d4e91938d 100644
--- a/test/unit/specs/popover.spec.js
+++ b/test/unit/specs/popover.spec.js
@@ -1,4 +1,4 @@
-import { createVue, triggerEvent, createTest, destroyVM } from '../util';
+import { createVue, triggerEvent, createTest, destroyVM, wait } from '../util';
 import Popover from 'packages/popover';
 
 describe('Popover', () => {
@@ -162,7 +162,8 @@ describe('Popover', () => {
       vm.$el.querySelector('button').click();
       expect(compo.popperElm).to.not.exist;
       vm.$nextTick(_ => {
-        expect(compo).to.have.deep.property('popperElm.style.display').not.equal('none');
+        const popperElm = compo.popperElm;
+        expect(getComputedStyle(popperElm).display).to.not.equal('none');
         done();
       });
     });
@@ -194,7 +195,8 @@ describe('Popover', () => {
       vm.$el.querySelector('button').click();
       expect(compo.popperElm).to.not.exist;
       vm.$nextTick(_ => {
-        expect(compo).to.have.deep.property('popperElm.style.display').not.equal('none');
+        const popperElm = compo.popperElm;
+        expect(getComputedStyle(popperElm).display).to.not.equal('none');
         done();
       });
     });
@@ -247,6 +249,56 @@ describe('Popover', () => {
     }, 50);
   });
 
+  describe('open/close delays', () => {
+    it('100ms open / instant close', async() => {
+      vm = createVue(`
+        <div>
+          <el-popover
+            ref="popover"
+            content="content"
+            trigger="hover"
+            :open-delay="100"
+            :close-delay="0">
+            <button slot="reference">reference</button>
+          </el-popover>
+        </div>
+      `, true);
+      const compo = vm.$refs.popover;
+      const button = vm.$el.querySelector('button');
+
+      triggerEvent(button, 'mouseenter');
+      expect(compo.showPopper).to.false;
+      await wait(150);
+      expect(compo.showPopper).to.true;
+      triggerEvent(button, 'mouseleave');
+      expect(compo.showPopper).to.false;
+    });
+
+    it('instant open / 100ms close', async() => {
+      vm = createVue(`
+        <div>
+          <el-popover
+            ref="popover"
+            content="content"
+            trigger="hover"
+            :open-delay="0"
+            :close-delay="100">
+            <button slot="reference">reference</button>
+          </el-popover>
+        </div>
+      `, true);
+      const compo = vm.$refs.popover;
+      const button = vm.$el.querySelector('button');
+
+      triggerEvent(button, 'mouseenter');
+      expect(compo.showPopper).to.true;
+      triggerEvent(button, 'mouseleave');
+      expect(compo.showPopper).to.true;
+      await wait(150);
+      expect(compo.showPopper).to.false;
+    });
+  });
+
   it('destroy event', () => {
     vm = createTest(Popover, {
       reference: document.createElement('div'),
diff --git a/test/unit/specs/progress.spec.js b/test/unit/specs/progress.spec.js
index 16a3380a726..ee66452aafd 100644
--- a/test/unit/specs/progress.spec.js
+++ b/test/unit/specs/progress.spec.js
@@ -1,4 +1,4 @@
-import { createVue, destroyVM } from '../util';
+import { createVue, destroyVM, waitImmediate } from '../util';
 
 describe('Progress', () => {
   let vm;
@@ -33,7 +33,6 @@ describe('Progress', () => {
           <el-progress ref="lineException" :percentage="0" status="exception"></el-progress>
           <el-progress type="circle" ref="circleSuccess" :percentage="100" status="success"></el-progress>
           <el-progress type="circle" ref="circleException" :percentage="0" status="exception"></el-progress>
-          <el-progress type="circle" ref="textException" :percentage="100" status="text">Done</el-progress>
         </div>
       `
     }, true);
@@ -46,7 +45,6 @@ describe('Progress', () => {
     expect(vm.$refs.circleSuccess.$el.querySelector('.el-progress__text .el-icon-check')).to.be.exist;
     expect(vm.$refs.circleException.$el.classList.contains('is-exception')).to.be.true;
     expect(vm.$refs.circleException.$el.querySelector('.el-progress__text .el-icon-close')).to.be.exist;
-    expect(vm.$refs.textException.$el.querySelector('.el-progress__text').innerText).to.be.equal('Done');
   });
   it('text inside', () => {
     vm = createVue({
@@ -80,6 +78,14 @@ describe('Progress', () => {
     }, true);
     expect(vm.$el.classList.contains('el-progress--circle')).to.be.true;
   });
+  it('dashboard', () => {
+    vm = createVue({
+      template: `
+        <el-progress type="dashboard" :percentage="50"></el-progress>
+      `
+    }, true);
+    expect(vm.$el.classList.contains('el-progress--dashboard')).to.be.true;
+  });
   it('width', () => {
     vm = createVue({
       template: `
@@ -105,4 +111,81 @@ describe('Progress', () => {
     }, true);
     expect(vm.$el.querySelector('.el-progress-bar__inner').style.backgroundColor).to.equal('rgb(0, 0, 0)');
   });
+  it('color is function', async() => {
+    vm = createVue({
+      template: `
+      <el-progress :percentage="percentage" :color="customColor"></el-progress>
+      `,
+      data() {
+        return {
+          percentage: 50
+        };
+      },
+      methods: {
+        customColor(percentage) {
+          if (percentage > 50) {
+            return '#13ce66';
+          } else {
+            return '#20a0ff';
+          }
+        },
+        increase() {
+          this.percentage = 60;
+        }
+      }
+    }, true);
+
+    expect(vm.$el.querySelector('.el-progress-bar__inner').style.backgroundColor).to.equal('rgb(32, 160, 255)');
+    vm.increase();
+
+    await waitImmediate();
+    expect(vm.$el.querySelector('.el-progress-bar__inner').style.backgroundColor).to.equal('rgb(19, 206, 102)');
+  });
+
+  it('color is array', async() => {
+    vm = createVue({
+      template: `
+      <el-progress :percentage="percentage" :color="colors"></el-progress>
+      `,
+      data() {
+        return {
+          percentage: 50,
+          colors: [
+            {color: '#FF4D4F', percentage: 20},
+            {color: '#F5A623', percentage: 40},
+            {color: '#20a0ff', percentage: 60},
+            {color: '#13ce66', percentage: 80},
+            {color: '#6f7ad3', percentage: 100}
+          ]
+        };
+      },
+      methods: {
+        increase() {
+          this.percentage = 70;
+        }
+      }
+    }, true);
+
+    // #20a0ff
+    expect(vm.$el.querySelector('.el-progress-bar__inner').style.backgroundColor).to.equal('rgb(32, 160, 255)');
+
+    vm.increase();
+    await waitImmediate();
+    // #13ce66
+    expect(vm.$el.querySelector('.el-progress-bar__inner').style.backgroundColor).to.equal('rgb(19, 206, 102)');
+  });
+
+  it('format content', () => {
+    vm = createVue({
+      template: `
+      <el-progress :percentage="50" :format="format"></el-progress>
+      `,
+      methods: {
+        format(percentage) {
+          return `占比${percentage}%`;
+        }
+      }
+    }, true);
+    expect(vm.$el.querySelector('.el-progress__text').innerHTML).to.equal('占比50%');
+  });
 });
diff --git a/test/unit/specs/radio-img-button.spec.js b/test/unit/specs/radio-img-button.spec.js
new file mode 100644
index 00000000000..707437837c7
--- /dev/null
+++ b/test/unit/specs/radio-img-button.spec.js
@@ -0,0 +1,194 @@
+import { createVue, destroyVM } from '../util';
+
+describe('RadioImgButton', () => {
+  let vm;
+  const imgUrl = 'http://img5.imgtn.bdimg.com/it/u=3987907653,720009510&fm=26&gp=0.jpg';
+  const text = 'radio-img-button';
+  const description = '我是radio1';
+  const name = 'nameStr';
+  const basicVm = createVue({
+    template: `
+        <el-radio-img-button 
+          v-model="value" 
+          :imgUrl= "imgUrl"
+          label="1" 
+          :text="text" 
+          vertical
+          :name="name"
+          width="310" 
+          description="description">
+        </el-radio-img-button>
+      `,
+    data() {
+      return {
+        value: '',
+        imgUrl,
+        text,
+        description,
+        name
+      };
+    }
+  }, true);
+  afterEach(() => {
+    if (vm) {
+      destroyVM(vm);
+    }
+    destroyVM(basicVm);
+  });
+
+  it('create', done => {
+    let radioElm = basicVm.$el;
+    expect(radioElm.classList.contains('el-radio-img-button')).to.be.true;
+    radioElm.click();
+    setTimeout(_ => {
+      expect(radioElm.querySelector('.is-checked')).to.be.ok;
+      done();
+    }, 10);
+  });
+
+  it('disabled', done => {
+    vm = createVue({
+      template: `
+        <el-radio-img-button 
+          v-model="value" 
+          imgUrl="http://img5.imgtn.bdimg.com/it/u=3987907653,720009510&fm=26&gp=0.jpg" 
+          label="1" text="radio-img-button" 
+          vertical 
+          disabled
+          description="我是radio1">
+        </el-radio-img-button>
+      `,
+      data() {
+        return {
+          value: ''
+        };
+      }
+    }, true);
+    let radioElm = vm.$el;
+    radioElm.click();
+    setTimeout(_ => {
+      expect(vm.value === '').to.be.true;
+      expect(radioElm.querySelector('.is-disabled')).to.be.ok;
+      done();
+    }, 10);
+  });
+
+  it('name', () => {
+    const inputDom = basicVm.$el.getElementsByClassName('el-radio-img-button__original')[0];
+    expect(inputDom.name === name).to.be.true;
+  });
+
+  it('width', () => {
+    const elm = basicVm.$el;
+    expect(elm.style.width === '310px').to.be.true;
+  });
+
+  it('imgUrl', () => {
+    const imgDom = basicVm.$el.getElementsByClassName('el-radio-img-button__img')[0];
+    expect(imgDom.src === imgUrl).to.be.true;
+  });
+
+  it('text', () => {
+    const textDom = basicVm.$el.getElementsByClassName('el-radio-img-button__text')[0];
+    expect(textDom.title === text && textDom.innerText === text).to.be.true;
+  });
+
+  it('description', () => {
+    vm = createVue({
+      template: `
+        <el-radio-img-button 
+          v-model="value" 
+          imgUrl="http://img5.imgtn.bdimg.com/it/u=3987907653,720009510&fm=26&gp=0.jpg" 
+          label="1" text="radio-img-button" 
+          disabled
+          description="我是radio1">
+        </el-radio-img-button>
+      `,
+      data() {
+        return {
+          value: ''
+        };
+      }
+    }, true);
+    const descriptionDom = vm.$el.getElementsByClassName('el-radio-img-button__description')[0];
+    expect(
+      descriptionDom.title === '我是radio1' &&
+        descriptionDom.innerText === '我是radio1'
+    ).to.be.true;
+  });
+
+  it('change event', done => {
+    vm = createVue({
+      template: `
+        <el-radio-img-button 
+          v-model="value" 
+          imgUrl="http://img5.imgtn.bdimg.com/it/u=3987907653,720009510&fm=26&gp=0.jpg" 
+          label="1" text="radio-img-button" 
+          @change="handleChange"
+          description="">
+        </el-radio-img-button>
+      `,
+      data() {
+        return {
+          value: '',
+          data: ''
+        };
+      },
+      methods: {
+        handleChange(val) {
+          this.data = val;
+        }
+      }
+    }, true);
+    let radioElm = vm.$el;
+    radioElm.click();
+    setTimeout(_ => {
+      expect(vm.data).to.equal('1');
+      done();
+    }, 10);
+  });
+
+  describe('Radio group', () => {
+    it('create', done => {
+      vm = createVue({
+        template: `
+          <el-radio-group v-model="value">
+            <el-radio-img-button 
+              imgUrl="http://img5.imgtn.bdimg.com/it/u=3987907653,720009510&fm=26&gp=0.jpg" 
+              label="1" text="radio-img-button" 
+              ref="radio1"
+              description="备选项">
+            </el-radio-img-button>
+            <el-radio-img-button 
+              imgUrl="http://img5.imgtn.bdimg.com/it/u=3987907653,720009510&fm=26&gp=0.jpg" 
+              label="2" text="radio-img-button" 
+              ref="radio2"
+              description="备选项">
+            </el-radio-img-button>
+            <el-radio-img-button 
+              imgUrl="http://img5.imgtn.bdimg.com/it/u=3987907653,720009510&fm=26&gp=0.jpg" 
+              label="3" text="radio-img-button" 
+              ref="radio3"
+              description="备选项">
+            </el-radio-img-button>
+          </el-radio-group>
+        `,
+        data() {
+          return {
+            value: '3'
+          };
+        }
+      }, true);
+      setTimeout(_ => {
+        expect(vm.$refs.radio3.$el.querySelector('.is-checked')).to.be.ok;
+        let radioElm = vm.$refs.radio2.$el;
+        radioElm.click();
+        setTimeout(_ => {
+          expect(radioElm.querySelector('.is-checked')).to.be.ok;
+          expect(vm.value).to.equal('2');
+          done();
+        }, 10);
+      }, 50);
+    });
+  });
+});
diff --git a/test/unit/specs/rate.spec.js b/test/unit/specs/rate.spec.js
index c98932c5f51..48a27e89566 100644
--- a/test/unit/specs/rate.spec.js
+++ b/test/unit/specs/rate.spec.js
@@ -181,7 +181,7 @@ describe('Rate', () => {
 
     const fourthStar = vm2.$el.querySelectorAll('.el-rate__item')[3];
     const halfStar = fourthStar.querySelector('.el-rate__decimal');
-    expect(halfStar.style.width).to.equal('0%');
+    expect(halfStar.style.width).to.equal('40%');
   });
 
   it('allow half', () => {
@@ -205,4 +205,25 @@ describe('Rate', () => {
     rate.resetCurrentValue();
     expect(vm.value).to.equal(0.5);
   });
+
+  it('custom icon classes by passing object', () => {
+    vm = createVue({
+      template: `
+        <div>
+          <el-rate
+            v-model="value"
+            :icon-classes="{ 2: 'icon-rate-face-1', 4: { value: 'icon-rate-face-2', excluded: true }, 5: 'icon-rate-face-3' }"></el-rate>
+        </div>
+      `,
+
+      data() {
+        return {
+          value: 4
+        };
+      }
+    }, true);
+    const thirdIcon = vm.$el.querySelectorAll('.el-rate__item')[3].querySelector('.el-rate__icon');
+    expect(thirdIcon.className).to.include('icon-rate-face-3');
+  });
+
 });
diff --git a/test/unit/specs/select.spec.js b/test/unit/specs/select.spec.js
index b9ec39cd2a2..69677d00996 100644
--- a/test/unit/specs/select.spec.js
+++ b/test/unit/specs/select.spec.js
@@ -1,4 +1,4 @@
-import { createTest, createVue, triggerEvent, destroyVM } from '../util';
+import { createTest, createVue, triggerEvent, destroyVM, waitImmediate } from '../util';
 import Select from 'packages/select';
 
 describe('Select', () => {
@@ -693,7 +693,7 @@ describe('Select', () => {
       expect(spyFocus.calledOnce).to.be.true;
       expect(spyBlur.calledOnce).to.be.true;
       done();
-    }, 100);
+    }, 250);
   });
 
   it('should return focus to input inside select after option select', done => {
@@ -801,6 +801,85 @@ describe('Select', () => {
     }, 10);
   });
 
+  it('render slot `empty`', done => {
+    vm = createVue({
+      template: `
+        <div>
+          <el-select v-model="value">
+            <div class="empty-slot" slot="empty">EmptySlot</div>
+          </el-select>
+        </div>
+      `,
+      data() {
+        return {
+          value: 1
+        };
+      }
+    });
+
+    expect(vm.$el.querySelector('.empty-slot').innerText).to.be.equal('EmptySlot');
+    done();
+  });
+
+  it('should set placeholder to label of selected option when filterable is true and multiple is false', async() => {
+    vm = createVue({
+      template: `
+        <div>
+          <el-select ref="select" v-model="value" filterable>
+            <el-option label="test" value="test" />
+          </el-select>
+        </div>
+      `,
+      data() {
+        return {
+          value: 'test'
+        };
+      }
+    });
+    vm.$refs.select.$el.click();
+    await waitImmediate();
+    expect(vm.$refs.select.visible).to.be.equal(true);
+    expect(vm.$el.querySelector('.el-input__inner').placeholder).to.be.equal('test');
+    expect(vm.value).to.be.equal('test');
+  });
+
+  it('default value is null or undefined', async() => {
+    vm = createVue({
+      template: `
+        <div>
+          <el-select v-model="value">
+            <el-option
+              v-for="item in options"
+              :label="item.label"
+              :key="item.value"
+              :value="item.value">
+            </el-option>
+          </el-select>
+        </div>
+      `,
+
+      data() {
+        return {
+          options: [{
+            value: '选项1',
+            label: '黄金糕'
+          }, {
+            value: '选项2',
+            label: '双皮奶'
+          }],
+          value: undefined
+        };
+      }
+    }, true);
+
+    vm.value = null;
+    await waitImmediate();
+    expect(vm.$el.querySelector('.el-input__inner').value).to.equal('');
+    vm.value = '选项1';
+    await waitImmediate();
+    expect(vm.$el.querySelector('.el-input__inner').value).to.equal('黄金糕');
+  });
+
   describe('resetInputHeight', () => {
     const getSelectComponentVm = (configs) => {
       vm = getSelectVm(configs || {});
diff --git a/test/unit/specs/skeleton.spec.js b/test/unit/specs/skeleton.spec.js
new file mode 100644
index 00000000000..eecff5dbeee
--- /dev/null
+++ b/test/unit/specs/skeleton.spec.js
@@ -0,0 +1,62 @@
+import { createTest, destroyVM } from '../util';
+import Skeleton from 'packages/skeleton';
+
+describe('Skeleton', () => {
+  let vm;
+  afterEach(() => {
+    destroyVM(vm);
+  });
+
+  it('create', () => {
+    vm = createTest(Skeleton, true);
+    expect(vm.$el).to.exist;
+  });
+
+  describe('avatar', () => {
+    it('size small', () => {
+      vm = createTest(Skeleton, { avatar: { size: 'small' } }, true);
+      expect(vm.$el.classList.contains('el-skeleton-with-avatar')).to.true;
+      expect(vm.$children[0].$el.classList.contains('el-skeleton-avatar-sm')).to.true;
+    });
+    it('size large', () => {
+      vm = createTest(Skeleton, { avatar: { size: 'large' } }, true);
+      expect(vm.$el.classList.contains('el-skeleton-with-avatar')).to.true;
+      expect(vm.$children[0].$el.classList.contains('el-skeleton-avatar-lg')).to.true;
+    });
+
+    it('shape circle', () => {
+      vm = createTest(Skeleton, { avatar: { shape: 'circle' } }, true);
+      expect(vm.$children[0].$el.classList.contains('el-skeleton-avatar-circle')).to.true;
+    });
+
+    it('shape square', () => {
+      vm = createTest(Skeleton, { avatar: { shape: 'square' } }, true);
+      expect(vm.$children[0].$el.classList.contains('el-skeleton-avatar-square')).to.true;
+    });
+  });
+
+  describe('title', () => {
+    it('width', () => {
+      vm = createTest(Skeleton, { title: { width: '93%' } }, true);
+      expect(vm.$children[0].$el.style.width).to.equal('93%');
+    });
+  });
+
+  describe('paragraph', () => {
+    it('rows', () => {
+      vm = createTest(Skeleton, { paragraph: { rows: 5 } }, true);
+      expect(vm.$el.querySelector('.el-skeleton-paragraph').children.length).to.equal(5);
+    });
+    it('width 93%', () => {
+      vm = createTest(Skeleton, { paragraph: { width: '93%' } }, true);
+      const childrenList = vm.$el.querySelector('.el-skeleton-paragraph').children;
+      expect(childrenList[childrenList.length - 1].style.width).to.equal('93%');
+    });
+    it('width 28% 93%', () => {
+      vm = createTest(Skeleton, { paragraph: { width: ['28%', '93%'] } }, true);
+      const childrenList = vm.$el.querySelector('.el-skeleton-paragraph').children;
+      expect(childrenList[0].style.width).to.equal('28%');
+      expect(childrenList[1].style.width).to.equal('93%');
+    });
+  });
+});
diff --git a/test/unit/specs/slider.spec.js b/test/unit/specs/slider.spec.js
index 1e98bb29b08..7cd1063b73f 100644
--- a/test/unit/specs/slider.spec.js
+++ b/test/unit/specs/slider.spec.js
@@ -1,4 +1,4 @@
-import { createTest, createVue, triggerEvent, destroyVM } from '../util';
+import { createTest, createVue, triggerEvent, destroyVM, waitImmediate } from '../util';
 import Slider from 'packages/slider';
 
 describe('Slider', () => {
@@ -81,11 +81,11 @@ describe('Slider', () => {
     expect(slider.$refs.tooltip.disabled).to.true;
   });
 
-  it('format tooltip', () => {
+  it('format tooltip', async() => {
     vm = createVue({
       template: `
         <div>
-          <el-slider v-model="value" :format-tooltip="formatTooltip">
+          <el-slider ref="slider" v-model="value" :format-tooltip="formatTooltip">
           </el-slider>
         </div>
       `,
@@ -101,11 +101,9 @@ describe('Slider', () => {
         }
       }
     }, true);
-    const slider = vm.$children[0].$children[0];
-    expect(slider.formatTooltip).to.function;
-    vm.$nextTick(() => {
-      expect(slider.formatValue).to.equal('$0');
-    });
+    const sliderButton = vm.$refs.slider.$children[0];
+    await waitImmediate();
+    expect(sliderButton.formatValue).to.equal('$0');
   });
 
   it('drag', done => {
@@ -460,5 +458,44 @@ describe('Slider', () => {
         done();
       }, 10);
     });
+
+    it('marks', async() => {
+      vm = createVue({
+        template: `
+        <div>
+          <el-slider
+            v-model="value"
+            range
+            :step="10"
+            :marks="marks"
+            :min="20"
+            show-stops></el-slider>
+        </div>
+      `,
+
+        data() {
+          return {
+            value: [30, 60],
+            marks: {
+              0: '0°C',
+              8: '8°C',
+              37: '37°C',
+              50: {
+                style: {
+                  color: '#f50'
+                },
+                label: <strong>50°C</strong>
+              }
+            }
+          };
+        }
+      }, true);
+
+      waitImmediate();
+      const stops = vm.$el.querySelectorAll('.el-slider__marks-stop.el-slider__stop');
+      const marks = vm.$el.querySelectorAll('.el-slider__marks .el-slider__marks-text');
+      expect(marks.length).to.equal(2);
+      expect(stops.length).to.equal(2);
+    });
   });
 });
diff --git a/test/unit/specs/status-steps.spec.js b/test/unit/specs/status-steps.spec.js
new file mode 100644
index 00000000000..d1576e51a85
--- /dev/null
+++ b/test/unit/specs/status-steps.spec.js
@@ -0,0 +1,163 @@
+import { createVue, destroyVM, waitImmediate } from '../util';
+
+describe('StatusSteps', () => {
+  let vm;
+  afterEach(() => {
+    destroyVM(vm);
+  });
+
+  it('create', () => {
+    vm = createVue(`
+      <el-steps>
+        <el-status-steps title="step1"></el-status-steps>
+        <el-status-steps title="step2"></el-status-steps>
+        <el-status-steps title="step3"></el-status-steps>
+      </el-steps>
+    `);
+
+    expect(vm.$el.querySelectorAll('.el-step')).to.length(3);
+  });
+
+  it('space', async() => {
+    vm = createVue(`
+      <el-steps>
+        <el-status-steps title="step1"></el-status-steps>
+        <el-status-steps title="step2"></el-status-steps>
+        <el-status-steps title="step3"></el-status-steps>
+      </el-steps>
+    `, true);
+
+    const vm2 = createVue(`
+      <el-steps :space="100">
+        <el-status-steps title="step1"></el-status-steps>
+        <el-status-steps title="step2"></el-status-steps>
+        <el-status-steps title="step3"></el-status-steps>
+        <el-status-steps title="step4"></el-status-steps>
+      </el-steps>
+    `, true);
+
+    await waitImmediate();
+    const stepElm = vm.$el.querySelector('.el-step');
+    const stepElm2 = vm2.$el.querySelector('.el-step');
+    expect(getComputedStyle(stepElm).flexBasis).to.equal('50%');
+    expect(getComputedStyle(stepElm2).flexBasis).to.equal('100px');
+  });
+
+  it('processStatus', done => {
+    vm = createVue(`
+      <el-steps :active="1" process-status="error">
+        <el-status-steps title="step1"></el-status-steps>
+        <el-status-steps title="step2"></el-status-steps>
+        <el-status-steps title="step3"></el-status-steps>
+      </el-steps>
+    `);
+
+    vm.$nextTick(_ => {
+      expect(vm.$el.querySelectorAll('.el-step__head.is-error')).to.length(1);
+      done();
+    });
+  });
+
+  it('update processStatus', done => {
+    vm = createVue({
+      template: `
+        <el-steps :active="1" :process-status="processStatus">
+          <el-status-steps title="abc"></el-status-steps>
+          <el-status-steps title="abc2"></el-status-steps>
+        </el-steps>
+      `,
+      data() {
+        return { processStatus: 'error' };
+      }
+    });
+
+    vm.$nextTick(_ => {
+      expect(vm.$el.querySelectorAll('.el-step__head.is-error')).to.length(1);
+      vm.processStatus = 'process';
+      vm.$nextTick(_ => {
+        expect(vm.$el.querySelectorAll('.el-step__head.is-process')).to.length(1);
+        done();
+      });
+    });
+  });
+
+  it('finishStatus', done => {
+    vm = createVue(`
+      <el-steps :active="1" finish-status="error">
+        <el-status-steps title="abc"></el-status-steps>
+        <el-status-steps title="abc2"></el-status-steps>
+      </el-steps>
+    `);
+
+    vm.$nextTick(_ => {
+      expect(vm.$el.querySelectorAll('.el-step__head.is-error')).to.length(1);
+      done();
+    });
+  });
+
+  it('active', done => {
+    vm = createVue({
+      template: `
+        <el-steps :active="active" finish-status="error">
+          <el-status-steps title="abc"></el-status-steps>
+          <el-status-steps title="abc2"></el-status-steps>
+        </el-steps>
+      `,
+
+      data() {
+        return { active: 0 };
+      }
+    });
+
+    vm.$nextTick(_ => {
+      expect(vm.$el.querySelectorAll('.el-step__head.is-error')).to.length(0);
+      vm.active = 2;
+      vm.$nextTick(_ => {
+        expect(vm.$el.querySelectorAll('.el-step__head.is-error')).to.length(2);
+        done();
+      });
+    });
+  });
+
+  it('create vertical', () => {
+    vm = createVue(`
+      <el-steps direction="vertical">
+        <el-status-steps title="aaa"></el-status-steps>
+        <el-status-steps title="bbb"></el-status-steps>
+      </el-steps>
+    `);
+
+    expect(vm.$el.querySelector('.is-vertical')).to.exist;
+  });
+
+  it('vertical:height', async() => {
+    vm = createVue(`
+      <el-steps direction="vertical" :space="200">
+        <el-status-steps title="aaa"></el-status-steps>
+        <el-status-steps title="bbb"></el-status-steps>
+      </el-steps>
+    `, true);
+
+    await waitImmediate();
+    const stepElm = vm.$el.querySelector('.el-step');
+    expect(getComputedStyle(stepElm).flexBasis).to.equal('200px');
+  });
+
+  it('step:status=error', done => {
+    vm = createVue(`
+      <el-steps :active="2" process-status="process" finish-status="success" direction="horizontal">
+        <el-status-steps title="step1"></el-status-steps>
+        <el-status-steps title="step2" status="error"></el-status-steps>
+        <el-status-steps title="step3"></el-status-steps>
+      </el-steps>
+    `);
+
+    vm.$nextTick(_ => {
+      const errorLine = vm.$el.querySelector('.el-step:nth-child(2) .el-step__line-inner');
+      expect(errorLine.getBoundingClientRect().width).to.equal(0);
+      const nextStep = vm.$el.querySelector('.el-step:nth-child(3) .el-step__head');
+      expect(nextStep.classList.contains('is-wait')).to.equal(true);
+      done();
+    });
+  });
+});
diff --git a/test/unit/specs/steps.spec.js b/test/unit/specs/steps.spec.js
index 527cce89637..6efae9e7149 100644
--- a/test/unit/specs/steps.spec.js
+++ b/test/unit/specs/steps.spec.js
@@ -1,5 +1,4 @@
-import { createVue, destroyVM } from '../util';
-import Vue from 'vue';
+import { createVue, destroyVM, waitImmediate } from '../util';
 
 describe('Steps', () => {
   let vm;
@@ -19,14 +18,14 @@ describe('Steps', () => {
     expect(vm.$el.querySelectorAll('.el-step')).to.length(3);
   });
 
-  it('space', done => {
+  it('space', async() => {
     vm = createVue(`
       <el-steps>
         <el-step title="step1"></el-step>
         <el-step title="step2"></el-step>
         <el-step title="step3"></el-step>
       </el-steps>
-    `);
+    `, true);
 
     const vm2 = createVue(`
       <el-steps :space="100">
@@ -35,13 +34,13 @@ describe('Steps', () => {
         <el-step title="step3"></el-step>
         <el-step title="step4"></el-step>
       </el-steps>
-    `);
+    `, true);
 
-    Vue.nextTick(_ => {
-      expect(vm.$el.querySelector('.el-step')).have.deep.property('style.webkitFlexBasis').equal('50%');
-      expect(vm2.$el.querySelector('.el-step')).have.deep.property('style.webkitFlexBasis').equal('100px');
-      done();
-    });
+    await waitImmediate();
+    const stepElm = vm.$el.querySelector('.el-step');
+    const stepElm2 = vm2.$el.querySelector('.el-step');
+    expect(getComputedStyle(stepElm).flexBasis).to.equal('50%');
+    expect(getComputedStyle(stepElm2).flexBasis).to.equal('100px');
   });
 
   it('processStatus', done => {
@@ -59,6 +58,29 @@ describe('Steps', () => {
     });
   });
 
+  it('update processStatus', done => {
+    vm = createVue({
+      template: `
+        <el-steps :active="1" :process-status="processStatus">
+          <el-step title="abc"></el-step>
+          <el-step title="abc2"></el-step>
+        </el-steps>
+      `,
+      data() {
+        return { processStatus: 'error' };
+      }
+    });
+
+    vm.$nextTick(_ => {
+      expect(vm.$el.querySelectorAll('.el-step__head.is-error')).to.length(1);
+      vm.processStatus = 'process';
+      vm.$nextTick(_ => {
+        expect(vm.$el.querySelectorAll('.el-step__head.is-process')).to.length(1);
+        done();
+      });
+    });
+  });
+
   it('finishStatus', done => {
     vm = createVue(`
       <el-steps :active="1" finish-status="error">
@@ -108,18 +130,17 @@ describe('Steps', () => {
     expect(vm.$el.querySelector('.is-vertical')).to.exist;
   });
 
-  it('vertical:height', done => {
+  it('vertical:height', async() => {
     vm = createVue(`
       <el-steps direction="vertical" :space="200">
         <el-step title="aaa"></el-step>
         <el-step title="bbb"></el-step>
       </el-steps>
-    `);
+    `, true);
 
-    vm.$nextTick(_ => {
-      expect(vm.$el.querySelector('.el-step')).have.deep.property('style.webkitFlexBasis').equal('200px');
-      done();
-    });
+    await waitImmediate();
+    const stepElm = vm.$el.querySelector('.el-step');
+    expect(getComputedStyle(stepElm).flexBasis).to.equal('200px');
   });
 
   it('step:status=error', done => {
diff --git a/test/unit/specs/switch-enhance.spec.js b/test/unit/specs/switch-enhance.spec.js
new file mode 100644
index 00000000000..3b55ffbb644
--- /dev/null
+++ b/test/unit/specs/switch-enhance.spec.js
@@ -0,0 +1,59 @@
+import { createTest, createVue, destroyVM } from '../util';
+import SwitchEnhance from 'packages/switch-enhance';
+
+describe('SwitchEnhance', () => {
+  let vm;
+  afterEach(() => {
+    destroyVM(vm);
+  });
+
+  it('create', () => {
+    vm = createTest(SwitchEnhance, true);
+    expect(vm.$el).to.exist;
+  });
+
+  it('update value', done => {
+    vm = createVue({
+      template: '<el-switch-enhance v-model="value" />',
+      data() {
+        return {
+          value: true
+        };
+      }
+    }, true);
+
+    const core = vm.$el.querySelector('.el-switch__core');
+    core.click();
+
+    setTimeout(() => {
+      expect(vm.value).to.equal(false);
+      done();
+    }, 10);
+  });
+
+  it('change event', done => {
+    vm = createVue({
+      template: '<el-switch-enhance v-model="value" />',
+      mounted() {
+        setTimeout(() => {
+          this.value = false;
+        }, 10);
+      },
+      methods: {
+        handleChange(val) {
+          this.target = val;
+        }
+      },
+      data() {
+        return {
+          target: 1,
+          value: true
+        };
+      }
+    }, true);
+
+    expect(vm.target).to.equal(1);
+    done();
+  });
+});
+
diff --git a/test/unit/specs/table.spec.js b/test/unit/specs/table.spec.js
index 52cc4148c2e..f0888d2fc2a 100644
--- a/test/unit/specs/table.spec.js
+++ b/test/unit/specs/table.spec.js
@@ -1,4 +1,4 @@
-import { createVue, triggerEvent, destroyVM } from '../util';
+import { createVue, triggerEvent, destroyVM, waitImmediate, wait } from '../util';
 
 const DELAY = 10;
 const testDataArr = [];
@@ -91,9 +91,9 @@ describe('Table', () => {
     });
 
     it('height as string', done => {
-      const vm = createTable('height="100pt"');
+      const vm = createTable('height="100px"');
       setTimeout(_ => {
-        expect(vm.$el.style.height).to.equal('100pt');
+        expect(vm.$el.style.height).to.equal('100px');
         destroyVM(vm);
         done();
       }, DELAY);
@@ -182,7 +182,7 @@ describe('Table', () => {
         methods: {
           tableRowStyle({row, rowIndex}) {
             if (rowIndex === 1) {
-              return { height: '60px' };
+              return { height: '60px', display: 'none' };
             }
 
             return null;
@@ -191,8 +191,12 @@ describe('Table', () => {
       });
 
       setTimeout(_ => {
-        expect(vm.$el.querySelector('.el-table__body tr:nth-child(1)').style.height).to.equal('');
-        expect(vm.$el.querySelector('.el-table__body tr:nth-child(2)').style.height).to.equal('60px');
+        let child1 = vm.$el.querySelector('.el-table__body tr:nth-child(1)');
+        let child2 = vm.$el.querySelector('.el-table__body tr:nth-child(2)');
+        expect(child1.style.height).to.equal('');
+        expect(child1.style.display).to.equal('');
+        expect(child2.style.height).to.equal('60px');
+        expect(child2.style.display).to.equal('none');
         destroyVM(vm);
         done();
       }, DELAY);
@@ -555,6 +559,34 @@ describe('Table', () => {
         done();
       }, DELAY);
     });
+
+    it('sort-change', async() => {
+      const vm = createVue({
+        template: `
+          <el-table ref="table" :data="testData" :default-sort = "{prop: 'runtime', order: 'ascending'}">
+            <el-table-column prop="name" />
+            <el-table-column prop="release" />
+            <el-table-column prop="director" />
+            <el-table-column prop="runtime" sortable/>
+          </el-table>
+        `,
+
+        data() {
+          return { testData: getTestData() };
+        }
+      });
+
+      const spy = sinon.spy();
+      vm.$refs.table.$on('sort-change', spy);
+      await waitImmediate();
+      expect(spy.notCalled).to.be.true;// not emit when mounted
+
+      const elm = vm.$el.querySelector('.caret-wrapper');
+      elm.click();
+      await waitImmediate();
+      expect(spy.calledOnce).to.be.true;
+      destroyVM(vm);
+    });
   });
 
   describe('column attributes', () => {
@@ -676,7 +708,10 @@ describe('Table', () => {
       const vm = createVue({
         template: `
           <el-table :data="testData">
-            <el-table-column prop="name" :render-header="renderHeader" label="name">
+            <el-table-column prop="name" label="name">
+              <template slot="header" slot-scope="{ column, $index }">
+              {{ $index }}:{{column.label}}
+              </template>
             </el-table-column>
             <el-table-column prop="release"/>
             <el-table-column prop="director"/>
@@ -684,12 +719,6 @@ describe('Table', () => {
           </el-table>
         `,
 
-        methods: {
-          renderHeader(h, { column, $index }) {
-            return '' + $index + ':' + column.label;
-          }
-        },
-
         created() {
           this.testData = getTestData();
         }
@@ -697,7 +726,7 @@ describe('Table', () => {
 
       setTimeout(_ => {
         const headerCell = vm.$el.querySelector('.el-table__header-wrapper thead tr th:first-child .cell');
-        expect(headerCell.textContent).to.equal('0:name');
+        expect(headerCell.textContent.trim()).to.equal('0:name');
         destroyVM(vm);
         done();
       }, DELAY);
@@ -952,7 +981,7 @@ describe('Table', () => {
                 <template slot-scope="props">
                   <div>{{props.row.name}}</div>
                 </template>
-            </el-table-column>
+              </el-table-column>
               <el-table-column prop="release" label="release" />
               <el-table-column prop="director" label="director" />
               <el-table-column prop="runtime" label="runtime" />
@@ -1147,27 +1176,6 @@ describe('Table', () => {
           }, DELAY);
         }, DELAY);
       });
-
-      it('sort-change', done => {
-        let result;
-        const vm = createTable('sortable="custom"', '', '', '', {
-          methods: {
-            sortChange(...args) {
-              result = args;
-            }
-          }
-        }, '@sort-change="sortChange"');
-        setTimeout(_ => {
-          const elm = vm.$el.querySelector('.caret-wrapper');
-
-          elm.click();
-          setTimeout(_ => {
-            expect(result).to.exist;
-            destroyVM(vm);
-            done();
-          }, DELAY);
-        }, DELAY);
-      });
     });
 
     describe('click sortable column', () => {
@@ -1708,6 +1716,48 @@ describe('Table', () => {
       }, 50);
     });
 
+    it('toggleAllSelection debounce', async() => {
+      const spy = sinon.spy();
+      const vm = createVue({
+        template: `
+        <div>
+          <el-table ref="table" :data="testData" @selection-change="change">
+            <el-table-column type="selection" />
+            <el-table-column prop="name" />
+          </el-table>
+          <el-table ref="table1" :data="testData1" @selection-change="change">
+            <el-table-column type="selection" />
+            <el-table-column prop="name" />
+          </el-table>
+        </div>
+        `,
+
+        data() {
+          return {
+            testData: getTestData(),
+            testData1: getTestData()
+          };
+        },
+
+        methods: {
+          change(selection) {
+            spy(selection);
+          }
+        },
+
+        mounted() {
+          this.$refs.table.toggleAllSelection();
+          this.$refs.table1.toggleAllSelection();
+        }
+      }, true);
+
+      await wait(50);
+      expect(spy.callCount).to.be.equal(2);
+      expect(spy.args[0][0].length).to.be.equal(5);
+      expect(spy.args[1][0].length).to.be.equal(5);
+      destroyVM(vm);
+    });
+
     it('clearSelection', () => {
       const vm = createTable('selection-change');
       vm.$refs.table.toggleRowSelection(vm.testData[0]);
@@ -1756,14 +1806,85 @@ describe('Table', () => {
           vm.$nextTick(() => {
             expect(toArray(lastCells).map(node => node.textContent))
               .to.eql(['-100', '-95', '-92', '-92', '-80']);
+            destroyVM(vm);
             done();
           });
         });
       }, DELAY);
     });
+
+    it('sort correct change icon', async() => {
+      function assertSortIconCount($el, msg, count = 1) {
+        const sortIconCount = $el.querySelectorAll('th.ascending, th.descending').length;
+        expect(sortIconCount).to.equal(count, msg);
+      }
+
+      const vm = createVue({
+        template: `
+          <el-table ref="table" :data="testData" >
+            <el-table-column prop="name" sortable />
+            <el-table-column prop="release" sortable />
+            <el-table-column prop="director" sortable />
+            <el-table-column prop="runtime" sortable />
+          </el-table>
+        `,
+        data() {
+          return { testData: getTestData() };
+        }
+      });
+      await waitImmediate();
+      assertSortIconCount(vm.$el, 'sorting icon is not empty after mount', 0);
+      // manual click first column header
+      const elm = vm.$el.querySelector('.caret-wrapper');
+      elm.click();
+      await waitImmediate();
+      assertSortIconCount(vm.$el, 'sorting icon is not one after click header');
+      vm.$refs.table.sort('director', 'descending');
+      await waitImmediate();
+      assertSortIconCount(vm.$el, 'sorting icon is not one after call sort');
+      vm.$refs.table.sort('director', 'ascending');
+      await waitImmediate();
+      assertSortIconCount(vm.$el, 'sorting icon is not one after sort same column');
+      destroyVM(vm);
+    });
+
+    it('setCurrentRow', async() => {
+      const vm = createVue({
+        template: `
+        <div>
+          <el-table ref="table" :data="testData" highlight-current-row>
+            <el-table-column prop="name" sortable />
+            <el-table-column prop="release" sortable />
+            <el-table-column prop="director" sortable />
+            <el-table-column prop="runtime" sortable />
+          </el-table>
+          <button class="clear" @click="clear">clear</button>
+        </div>
+        `,
+        data() {
+          return { testData: getTestData() };
+        },
+        methods: {
+          clear() {
+            this.$refs.table.setCurrentRow();
+          }
+        }
+      });
+
+      vm.$refs.table.setCurrentRow(vm.testData[1]);
+      await waitImmediate();
+      const secondRow = vm.$el.querySelectorAll('.el-table__row')[1];
+      expect(secondRow.classList.contains('current-row')).to.true;
+
+      vm.$el.querySelector('.clear').click();
+      await waitImmediate();
+      expect(secondRow.classList.contains('current-row')).to.false;
+
+      destroyVM(vm);
+    });
   });
 
-  it('hover', done => {
+  it('hover', async() => {
     const vm = createVue({
       template: `
         <el-table :data="testData">
@@ -1773,24 +1894,23 @@ describe('Table', () => {
           <el-table-column prop="runtime" label="时长（分）" />
         </el-table>
       `,
-
-      created() {
-        this.testData = getTestData();
+      data() {
+        return {
+          testData: getTestData()
+        };
       }
     }, true);
-    setTimeout(_ => {
-      const tr = vm.$el.querySelector('.el-table__body-wrapper tbody tr');
-      triggerEvent(tr, 'mouseenter', true, false);
-      setTimeout(_ => {
-        expect(tr.classList.contains('hover-row')).to.true;
-        triggerEvent(tr, 'mouseleave', true, false);
-        setTimeout(_ => {
-          expect(tr.classList.contains('hover-row')).to.false;
-          destroyVM(vm);
-          done();
-        }, DELAY);
-      }, DELAY);
-    }, DELAY);
+    await waitImmediate();
+    const tr = vm.$el.querySelector('.el-table__body-wrapper tbody tr');
+    triggerEvent(tr, 'mouseenter', true, false);
+
+    await wait(50);
+    expect(tr.classList.contains('hover-row')).to.true;
+    triggerEvent(tr, 'mouseleave', true, false);
+
+    await wait(50);
+    expect(tr.classList.contains('hover-row')).to.false;
+    destroyVM(vm);
   });
 
   it('highlight-current-row', done => {
@@ -1835,4 +1955,303 @@ describe('Table', () => {
       }, DELAY);
     }, DELAY);
   });
+
+  it('keep highlight row when data change', done => {
+    const vm = createVue({
+      template: `
+        <el-table :data="testData" highlight-current-row row-key="release">
+          <el-table-column prop="name" label="片名" />
+          <el-table-column prop="release" label="发行日期" />
+          <el-table-column prop="director" label="导演" />
+          <el-table-column prop="runtime" label="时长（分）" sortable />
+        </el-table>
+      `,
+      data() {
+        return {
+          testData: getTestData()
+        };
+      }
+    }, true);
+    setTimeout(() => {
+      let rows = vm.$el.querySelectorAll('.el-table__body-wrapper tbody tr');
+      triggerEvent(rows[2], 'click', true, false);
+      setTimeout(() => {
+        expect(rows[2].classList.contains('current-row')).to.be.true;
+        const data = getTestData();
+        data.splice(0, 0, {
+          id: 8,
+          name: 'Monsters, Inc.',
+          release: '2018-02-01',
+          director: 'Peter Docter',
+          runtime: 92
+        });
+        data[2].name = 'Modified Name';
+        vm.testData = data;
+
+        setTimeout(() => {
+          rows = vm.$el.querySelectorAll('.el-table__body-wrapper tbody tr');
+          expect(rows[3].classList.contains('current-row')).to.be.true;
+          destroyVM(vm);
+          done();
+        }, DELAY);
+      }, DELAY);
+    }, DELAY);
+  });
+
+  it('keep highlight row after sort', done => {
+    const vm = createVue({
+      template: `
+        <el-table :data="testData" row-key="release" highlight-current-row >
+          <el-table-column prop="name" label="片名" />
+          <el-table-column prop="release" label="发行日期" />
+          <el-table-column prop="director" label="导演" />
+          <el-table-column prop="runtime" label="时长（分）" sortable />
+        </el-table>
+      `,
+      data() {
+        return {
+          testData: getTestData()
+        };
+      }
+    }, true);
+    setTimeout(() => {
+      let rows = vm.$el.querySelectorAll('.el-table__body-wrapper tbody tr');
+      triggerEvent(rows[1], 'click', true, false);
+      setTimeout(() => {
+        expect(rows[1].classList.contains('current-row')).to.be.true;
+        const cells = vm.$el.querySelectorAll('.el-table__header-wrapper thead th > .cell');
+        triggerEvent(cells[3], 'click', true, false);
+
+        setTimeout(() => {
+          rows = vm.$el.querySelectorAll('.el-table__body-wrapper tbody tr');
+          expect(rows[3].classList.contains('current-row')).to.be.true;
+          destroyVM(vm);
+          done();
+        }, DELAY);
+      }, DELAY);
+    }, DELAY);
+  });
+
+  it('table append is visible in viewport if height is 100%', async() => {
+    const vm = createVue({
+      template: `
+      <el-table :data="[]" height="100%">
+        <el-table-column prop="name" label="片名" />
+        <el-table-column prop="release" label="发行日期" />
+        <el-table-column prop="director" label="导演" />
+        <el-table-column prop="runtime" label="时长（分）" />
+        <template slot="append">
+          <div class="append-content" style="height: 48px;">
+            append 区域始终出现在视图内
+          </div>
+        </template>
+      </el-table>
+      `
+    }, true);
+    await waitImmediate();
+    const emptyBlockEl = vm.$el.querySelector('.el-table__empty-block');
+    expect(emptyBlockEl.style.height).to.be.equal('calc(100% - 48px)');
+    destroyVM(vm);
+  });
+
+  describe('tree', () => {
+    let vm;
+    afterEach(() => destroyVM(vm));
+    it('render tree structual data', async() => {
+      vm = createVue({
+        template: `
+          <el-table :data="testData" row-key="release">
+            <el-table-column prop="name" label="片名" />
+            <el-table-column prop="release" label="发行日期" />
+            <el-table-column prop="director" label="导演" />
+            <el-table-column prop="runtime" label="时长（分）" />
+          </el-table>
+        `,
+        data() {
+          const testData = getTestData();
+          testData[1].children = [
+            {
+              name: 'A Bug\'s Life copy 1', release: '1998-11-25-1', director: 'John Lasseter', runtime: 95
+            },
+            {
+              name: 'A Bug\'s Life copy 2', release: '1998-11-25-2', director: 'John Lasseter', runtime: 95
+            }
+          ];
+          return {
+            testData: testData
+          };
+        }
+      }, true);
+      await waitImmediate();
+
+      const rows = vm.$el.querySelectorAll('.el-table__row');
+      expect(rows.length).to.equal(7);
+      const childRows = vm.$el.querySelectorAll('.el-table__row--level-1');
+      expect(childRows.length).to.equal(2);
+      childRows.forEach(item => {
+        expect(item.style.display).to.equal('none');
+      });
+      vm.$el.querySelector('.el-table__expand-icon').click();
+
+      await waitImmediate();
+      childRows.forEach(item => {
+        expect(item.style.display).to.equal('');
+      });
+    });
+
+    it('load substree row data', async() => {
+      vm = createVue({
+        template: `
+          <el-table :data="testData" row-key="release" lazy :load="load">
+            <el-table-column prop="name" label="片名" />
+            <el-table-column prop="release" label="发行日期" />
+            <el-table-column prop="director" label="导演" />
+            <el-table-column prop="runtime" label="时长（分）" />
+          </el-table>
+        `,
+        data() {
+          const testData = getTestData();
+          testData[testData.length - 1].children = [
+            {
+              name: 'A Bug\'s Life copy 1', release: '2008-1-25-1', director: 'John Lasseter', runtime: 95
+            }
+          ];
+          testData[1].hasChildren = true;
+          return {
+            testData: testData
+          };
+        },
+        methods: {
+          load(row, treeNode, resolve) {
+            resolve([
+              {
+                name: 'A Bug\'s Life copy 1', release: '1998-11-25-1', director: 'John Lasseter', runtime: 95
+              },
+              {
+                name: 'A Bug\'s Life copy 2', release: '1998-11-25-2', director: 'John Lasseter', runtime: 95
+              }
+            ]);
+          }
+        }
+      }, true);
+      await waitImmediate();
+
+      const expandIcon = vm.$el.querySelector('.el-table__expand-icon');
+      expandIcon.click();
+
+      await waitImmediate();
+
+      expect(expandIcon.classList.contains('el-table__expand-icon--expanded')).to.be.true;
+      expect(vm.$el.querySelectorAll('.el-table__row').length).to.equal(8);
+    });
+
+    it('tree-props & default-expand-all & expand-change', async() => {
+      const spy = sinon.spy();
+      vm = createVue({
+        template: `
+          <el-table
+            :data="testData" lazy default-expand-all row-key="release" :tree-props="{children: 'childrenTest', hasChildren: 'hasChildrenTest'}"
+            :load="load" @expand-change="change">
+            <el-table-column prop="name" label="片名" />
+            <el-table-column prop="release" label="发行日期" />
+            <el-table-column prop="director" label="导演" />
+            <el-table-column prop="runtime" label="时长（分）" />
+          </el-table>
+        `,
+        data() {
+          const testData = getTestData();
+          testData[testData.length - 1].childrenTest = [
+            {
+              name: 'A Bug\'s Life copy 1', release: '2008-1-25-1', director: 'John Lasseter', runtime: 95
+            }
+          ];
+          testData[1].hasChildrenTest = true;
+          return {
+            testData: testData
+          };
+        },
+        methods: {
+          load(row, treeNode, resolve) {
+            resolve([
+              {
+                name: 'A Bug\'s Life copy 1', release: '1998-11-25-1', director: 'John Lasseter', runtime: 95
+              },
+              {
+                name: 'A Bug\'s Life copy 2', release: '1998-11-25-2', director: 'John Lasseter', runtime: 95
+              }
+            ]);
+          },
+          change: spy
+        }
+      }, true);
+      await waitImmediate();
+      const childRows = vm.$el.querySelectorAll('.el-table__row--level-1');
+      childRows.forEach(item => {
+        expect(item.style.display).to.equal('');
+      });
+      const expandIcon = vm.$el.querySelector('.el-table__expand-icon');
+      expandIcon.click();
+
+      await waitImmediate();
+
+      expect(expandIcon.classList.contains('el-table__expand-icon--expanded')).to.be.true;
+      expect(vm.$el.querySelectorAll('.el-table__row').length).to.equal(8);
+      expect(spy.args[0][0]).to.be.an('object');
+      expect(spy.args[0][1]).to.be.true;
+    });
+
+    it('expand-row-keys & toggleRowExpansion', async() => {
+      vm = createVue({
+        template: `
+          <el-table :data="testData" row-key="release" lazy :load="load" :expand-row-keys="['2003-5-30']" ref="table">
+            <el-table-column prop="name" label="片名" />
+            <el-table-column prop="release" label="发行日期" />
+            <el-table-column prop="director" label="导演" />
+            <el-table-column prop="runtime" label="时长（分）" />
+          </el-table>
+        `,
+        data() {
+          const testData = getTestData();
+          testData[testData.length - 1].children = [
+            {
+              name: 'A Bug\'s Life copy 1', release: '2003-5-30-1', director: 'John Lasseter', runtime: 95,
+              hasChildren: true
+            }
+          ];
+          return {
+            testData: testData
+          };
+        },
+        methods: {
+          load(row, treeNode, resolve) {
+            resolve([
+              {
+                name: 'A Bug\'s Life copy 1', release: '2003-5-30-2', director: 'John Lasseter', runtime: 95
+              }
+            ]);
+          },
+          closeExpandRow() {
+            const testData = this.testData;
+            const row = testData[testData.length - 1].children[0];
+            this.$refs.table.toggleRowExpansion(row);
+          }
+        }
+      }, true);
+      await waitImmediate();
+      const childRows = vm.$el.querySelectorAll('.el-table__row--level-1');
+      childRows.forEach(item => {
+        expect(item.style.display).to.equal('');
+      });
+      const expandIcon = childRows[0].querySelector('.el-table__expand-icon');
+      expandIcon.click();
+
+      await waitImmediate();
+
+      expect(expandIcon.classList.contains('el-table__expand-icon--expanded')).to.be.true;
+      vm.closeExpandRow();
+
+      await waitImmediate();
+      expect(expandIcon.classList.contains('el-table__expand-icon--expanded')).to.be.false;
+    });
+  });
 });
diff --git a/test/unit/specs/tabs-dotted.spec.js b/test/unit/specs/tabs-dotted.spec.js
new file mode 100644
index 00000000000..ce4c9171035
--- /dev/null
+++ b/test/unit/specs/tabs-dotted.spec.js
@@ -0,0 +1,15 @@
+import { createTest, destroyVM } from '../util';
+import TabsDotted from 'packages/tabs-dotted';
+
+describe('TabsDotted', () => {
+  let vm;
+  afterEach(() => {
+    destroyVM(vm);
+  });
+
+  it('create', () => {
+    vm = createTest(TabsDotted, true);
+    expect(vm.$el).to.exist;
+  });
+});
+
diff --git a/test/unit/specs/tag.spec.js b/test/unit/specs/tag.spec.js
index c1d7c88c0a0..b0ddcf18922 100644
--- a/test/unit/specs/tag.spec.js
+++ b/test/unit/specs/tag.spec.js
@@ -1,4 +1,5 @@
-import { createVue, destroyVM } from '../util';
+import { createTest, createVue, destroyVM } from '../util';
+import Tag from 'packages/tag';
 
 describe('Tag', () => {
   let vm;
@@ -82,9 +83,43 @@ describe('Tag', () => {
   it('color', () => {
     vm = createVue({
       template: `
-      <el-tag color="rgb(0, 0, 0)"></el-tag>
+      <el-tag ref="tag" color="rgb(0, 0, 0)"></el-tag>
       `
     }, true);
     expect(vm.$el.style.backgroundColor).to.equal('rgb(0, 0, 0)');
   });
+
+  it('click', done => {
+    vm = createVue({
+      template: `
+      <el-tag ref="tag" @click="handleClick">点击标签</el-tag>
+      `,
+      data() {
+        return {
+          clicksCount: 0
+        };
+      },
+      methods: {
+        handleClick() {
+          this.clicksCount = this.clicksCount + 1;
+        }
+      }
+    }, true);
+
+    let tag = vm.$refs.tag;
+    tag.$el.click();
+
+    setTimeout(_ => {
+      expect(vm.clicksCount).to.be.equal(1);
+      done();
+    }, 20);
+  });
+
+  it('theme', () => {
+    vm = createTest(Tag, { effect: 'dark' }, true);
+    const el = vm.$el;
+    expect(el.className).to.includes('el-tag--dark');
+    expect(el.className).to.not.includes('el-tag--light');
+    expect(el.className).to.not.includes('el-tag--plain');
+  });
 });
diff --git a/test/unit/specs/timeline.spec.js b/test/unit/specs/timeline.spec.js
new file mode 100644
index 00000000000..69b44469fae
--- /dev/null
+++ b/test/unit/specs/timeline.spec.js
@@ -0,0 +1,228 @@
+import { createVue, destroyVM } from '../util';
+
+describe('Timeline', () => {
+  let vm;
+  afterEach(() => {
+    destroyVM(vm);
+  });
+
+  it('create', () => {
+    vm = createVue({
+      template: `
+        <el-timeline>
+          <el-timeline-item
+            v-for="(activity, index) in activities"
+            :key="index"
+            :timestamp="activity.timestamp">
+            {{activity.content}}
+          </el-timeline-item>
+        </el-timeline>
+      `,
+      data() {
+        return {
+          activities: [{
+            content: '创建成功',
+            timestamp: '2018-04-11'
+          }, {
+            content: '通过审核',
+            timestamp: '2018-04-13'
+          }, {
+            content: '活动按期开始',
+            timestamp: '2018-04-15'
+          }]
+        };
+      }
+    }, true);
+    let contentElms = vm.$el.querySelectorAll('.el-timeline-item__content');
+    contentElms.forEach((elm, index) => {
+      expect(elm.innerText).to.equal(vm.activities[index].content);
+    });
+    let timestampElms = vm.$el.querySelectorAll('.el-timeline-item__timestamp');
+    timestampElms.forEach((elm, index) => {
+      expect(elm.innerText).to.equal(vm.activities[index].timestamp);
+    });
+  });
+
+  it('reverse', done => {
+    vm = createVue({
+      template: `
+        <el-timeline :reverse="reverse">
+          <el-timeline-item
+            v-for="(activity, index) in activities"
+            :key="index"
+            :timestamp="activity.timestamp">
+            {{activity.content}}
+          </el-timeline-item>
+        </el-timeline>
+      `,
+
+      data() {
+        return {
+          reverse: true,
+          activities: [{
+            content: '创建成功',
+            timestamp: '2018-04-11'
+          }, {
+            content: '通过审核',
+            timestamp: '2018-04-13'
+          }, {
+            content: '活动按期开始',
+            timestamp: '2018-04-15'
+          }]
+        };
+      }
+    }, true);
+
+    const contentElms = vm.$el.querySelectorAll('.el-timeline-item__content');
+    contentElms.forEach((elm, index) => {
+      expect(elm.innerText).to.equal(vm.activities[vm.activities.length - index - 1].content);
+    });
+
+    vm.reverse = false;
+    vm.$nextTick(() => {
+      const contentElms = vm.$el.querySelectorAll('.el-timeline-item__content');
+      contentElms.forEach((elm, index) => {
+        expect(elm.innerText).to.equal(vm.activities[index].content);
+      });
+      done();
+    });
+  });
+
+  it('placement', () => {
+    vm = createVue({
+      template: `
+        <el-timeline>
+          <el-timeline-item
+            v-for="(activity, index) in activities"
+            :key="index"
+            :timestamp="activity.timestamp"
+            :placement="activity.placement">
+            {{activity.content}}
+          </el-timeline-item>
+        </el-timeline>
+      `,
+
+      data() {
+        return {
+          activities: [{
+            content: '创建成功',
+            timestamp: '2018-04-11',
+            placement: 'top'
+          }, {
+            content: '通过审核',
+            timestamp: '2018-04-13'
+          }, {
+            content: '活动按期开始',
+            timestamp: '2018-04-15'
+          }]
+        };
+      }
+    }, true);
+
+    const timestampElm = vm.$el.querySelectorAll('.el-timeline-item__timestamp')[0];
+    expect(timestampElm.classList.contains('is-top')).to.true;
+  });
+
+  it('hide-timestamp', () => {
+    vm = createVue({
+      template: `
+        <el-timeline>
+          <el-timeline-item
+            v-for="(activity, index) in activities"
+            :key="index"
+            :timestamp="activity.timestamp"
+            :hide-timestamp="activity.hideTimestamp">
+            {{activity.content}}
+          </el-timeline-item>
+        </el-timeline>
+      `,
+
+      data() {
+        return {
+          activities: [{
+            content: '创建成功',
+            timestamp: '2018-04-11',
+            hideTimestamp: true
+          }, {
+            content: '通过审核',
+            timestamp: '2018-04-13'
+          }, {
+            content: '活动按期开始',
+            timestamp: '2018-04-15'
+          }]
+        };
+      }
+    }, true);
+
+    const timestampElms = vm.$el.querySelectorAll('.el-timeline-item__timestamp');
+    expect(timestampElms.length).to.equal(2);
+  });
+
+  it('color', () => {
+    vm = createVue({
+      template: `
+        <el-timeline>
+          <el-timeline-item
+            timestamp="2018-04-11"
+            color="#f00">
+            创建成功
+          </el-timeline-item>
+        </el-timeline>
+      `
+    }, true);
+
+    const nodeElm = vm.$el.querySelector('.el-timeline-item__node');
+    expect(nodeElm.style.backgroundColor).to.equal('rgb(255, 0, 0)');
+  });
+
+  it('type', () => {
+    vm = createVue({
+      template: `
+        <el-timeline>
+          <el-timeline-item
+            timestamp="2018-04-11"
+            type="primary">
+            创建成功
+          </el-timeline-item>
+        </el-timeline>
+      `
+    }, true);
+
+    const nodeElm = vm.$el.querySelector('.el-timeline-item__node');
+    expect(nodeElm.classList.contains('el-timeline-item__node--primary')).to.true;
+  });
+
+  it('size', () => {
+    vm = createVue({
+      template: `
+        <el-timeline>
+          <el-timeline-item
+            timestamp="2018-04-11"
+            type="large">
+            创建成功
+          </el-timeline-item>
+        </el-timeline>
+      `
+    }, true);
+
+    const nodeElm = vm.$el.querySelector('.el-timeline-item__node');
+    expect(nodeElm.classList.contains('el-timeline-item__node--large')).to.true;
+  });
+
+  it('icon', () => {
+    vm = createVue({
+      template: `
+        <el-timeline>
+          <el-timeline-item
+            timestamp="2018-04-11"
+            icon="el-icon-more">
+            创建成功
+          </el-timeline-item>
+        </el-timeline>
+      `
+    }, true);
+
+    const nodeElm = vm.$el.querySelector('.el-timeline-item__icon');
+    expect(nodeElm.classList.contains('el-icon-more')).to.true;
+  });
+});
diff --git a/test/unit/specs/tooltip.spec.js b/test/unit/specs/tooltip.spec.js
index 469e2a92495..7a5dffa7d19 100644
--- a/test/unit/specs/tooltip.spec.js
+++ b/test/unit/specs/tooltip.spec.js
@@ -153,4 +153,12 @@ describe('Tooltip', () => {
       }, 100);
     });
   });
+  it('custom tabindex', () => {
+    vm = createVue(`
+      <el-tooltip ref="tooltip" content="提示文字" :tabindex="-1">
+        <button>click</button>
+      </el-tooltip>
+    `, true);
+    expect(vm.$el.getAttribute('tabindex')).to.be.equal('-1');
+  });
 });
diff --git a/test/unit/specs/tree.spec.js b/test/unit/specs/tree.spec.js
index a79c096e24d..403d51c061c 100644
--- a/test/unit/specs/tree.spec.js
+++ b/test/unit/specs/tree.spec.js
@@ -1,4 +1,4 @@
-import { createVue, destroyVM } from '../util';
+import { createVue, destroyVM, waitImmediate, wait } from '../util';
 
 const DELAY = 10;
 
@@ -299,36 +299,6 @@ describe('Tree', () => {
     expect(vm.$el.querySelectorAll('.el-checkbox .is-checked').length).to.equal(1);
   });
 
-  it('defaultCheckedKeys & lazy, checked children length as expected', () => {
-    vm = getTreeVm(':load="loadNode" :props="defaultProps" :default-checked-keys="defaultCheckedKeys" node-key="id" :default-expanded-keys="[1]" lazy show-checkbox ', {
-      created() {
-        this.defaultCheckedKeys = [2, 3];
-      },
-      methods: {
-        loadNode(node, resolve) {
-          if (node.level === 0) {
-            return resolve([{ label: 'head', id: 1} ]);
-          }
-          return resolve([
-            {
-              label: '#1',
-              id: 2
-            },
-            {
-              label: '#3',
-              id: 3
-            },
-            {
-              label: '$4',
-              id: 5
-            }
-          ]);
-        }
-      }
-    });
-    expect(vm.$el.querySelectorAll('.el-checkbox.is-checked').length).to.equal(2);
-  });
-
   it('show checkbox', done => {
     vm = getTreeVm(':props="defaultProps" show-checkbox');
     const tree = vm.$children[0];
@@ -353,12 +323,10 @@ describe('Tree', () => {
   });
 
   it('check', done => {
+    const spy = sinon.spy();
     vm = getTreeVm(':props="defaultProps" show-checkbox @check="handleCheck"', {
       methods: {
-        handleCheck(data, args) {
-          this.data = data;
-          this.args = args;
-        }
+        handleCheck: spy
       }
     });
     const secondNode = document.querySelectorAll('.el-tree-node__content')[1];
@@ -366,8 +334,10 @@ describe('Tree', () => {
     expect(nodeCheckbox).to.be.exist;
     nodeCheckbox.click();
     setTimeout(() => {
-      expect(vm.args.checkedNodes.length).to.equal(3);
-      expect(vm.data.id).to.equal(2);
+      expect(spy.calledOnce).to.be.true;
+      const [data, args] = spy.args[0];
+      expect(data.id).to.equal(2);
+      expect(args.checkedNodes.length).to.equal(3);
       done();
     }, 10);
   });
@@ -389,31 +359,31 @@ describe('Tree', () => {
     }, 10);
   });
 
-  it('setCheckedKeys', () => {
+  it('setCheckedKeys', async() => {
     vm = getTreeVm(':props="defaultProps" show-checkbox node-key="id"');
     const tree = vm.$children[0];
     tree.setCheckedKeys([111]);
+    await waitImmediate();
     expect(tree.getCheckedNodes().length).to.equal(3);
     expect(tree.getCheckedKeys().length).to.equal(3);
 
     tree.setCheckedKeys([1]);
-    setTimeout(function() {
-      expect(tree.getCheckedNodes().length).to.equal(3);
-      expect(tree.getCheckedKeys().length).to.equal(3);
-    }, 0);
+    await waitImmediate();
+    expect(tree.getCheckedNodes().length).to.equal(3);
+    expect(tree.getCheckedKeys().length).to.equal(3);
 
     tree.setCheckedKeys([2]);
-    setTimeout(function() {
-      expect(tree.getCheckedNodes().length).to.equal(3);
-      expect(tree.getCheckedKeys().length).to.equal(3);
-    }, 0);
+    await waitImmediate();
+    expect(tree.getCheckedNodes().length).to.equal(3);
+    expect(tree.getCheckedKeys().length).to.equal(3);
 
     tree.setCheckedKeys([21]);
+    await waitImmediate();
     expect(tree.getCheckedNodes().length).to.equal(1);
     expect(tree.getCheckedKeys().length).to.equal(1);
   });
 
-  it('setCheckedKeys with checkStrictly', () => {
+  it('setCheckedKeys with checkStrictly', async() => {
     vm = getTreeVm(':props="defaultProps" checkStrictly show-checkbox node-key="id"');
     const tree = vm.$children[0];
     tree.setCheckedKeys([111]);
@@ -421,18 +391,17 @@ describe('Tree', () => {
     expect(tree.getCheckedKeys().length).to.equal(1);
 
     tree.setCheckedKeys([1]);
-    setTimeout(function() {
-      expect(tree.getCheckedNodes().length).to.equal(1);
-      expect(tree.getCheckedKeys().length).to.equal(1);
-    }, 0);
+    await waitImmediate();
+    expect(tree.getCheckedNodes().length).to.equal(1);
+    expect(tree.getCheckedKeys().length).to.equal(1);
 
     tree.setCheckedKeys([2]);
-    setTimeout(function() {
-      expect(tree.getCheckedNodes().length).to.equal(1);
-      expect(tree.getCheckedKeys().length).to.equal(1);
-    }, 0);
+    await waitImmediate();
+    expect(tree.getCheckedNodes().length).to.equal(1);
+    expect(tree.getCheckedKeys().length).to.equal(1);
 
     tree.setCheckedKeys([21, 22]);
+    await waitImmediate();
     expect(tree.getCheckedNodes().length).to.equal(2);
     expect(tree.getCheckedKeys().length).to.equal(2);
   });
@@ -449,24 +418,22 @@ describe('Tree', () => {
     expect(tree.getCheckedKeys().length).to.equal(0);
   });
 
-  it('setCheckedKeys with leafOnly=false', () => {
+  it('setCheckedKeys with leafOnly=false', async() => {
     vm = getTreeVm(':props="defaultProps" show-checkbox node-key="id"');
     const tree = vm.$children[0];
     tree.setCheckedKeys([1, 11, 111, 2], false);
-    setTimeout(function() {
-      expect(tree.getCheckedNodes().length).to.equal(6);
-      expect(tree.getCheckedKeys().length).to.equal(6);
-    }, 0);
+    await waitImmediate();
+    expect(tree.getCheckedNodes().length).to.equal(6);
+    expect(tree.getCheckedKeys().length).to.equal(6);
   });
 
-  it('setCheckedKeys with leafOnly=true', () => {
+  it('setCheckedKeys with leafOnly=true', async() => {
     vm = getTreeVm(':props="defaultProps" show-checkbox node-key="id"');
     const tree = vm.$children[0];
     tree.setCheckedKeys([2], true);
-    setTimeout(function() {
-      expect(tree.getCheckedNodes().length).to.equal(2);
-      expect(tree.getCheckedKeys().length).to.equal(2);
-    }, 0);
+    await waitImmediate();
+    expect(tree.getCheckedNodes().length).to.equal(2);
+    expect(tree.getCheckedKeys().length).to.equal(2);
   });
 
   it('setCurrentKey', (done) => {
@@ -527,10 +494,13 @@ describe('Tree', () => {
   it('remove', (done) => {
     vm = getTreeVm(':props="defaultProps" node-key="id"');
     const tree = vm.$children[0];
+    tree.setCurrentKey(1);
+    expect(tree.getCurrentNode().id).to.equal(1);
     tree.remove(1);
     vm.$nextTick(() => {
       expect(vm.data[0].id).to.equal(2);
       expect(tree.getNode(1)).to.equal(null);
+      expect(tree.getCurrentNode()).to.equal(null);
       done();
     });
   });
@@ -608,7 +578,7 @@ describe('Tree', () => {
     expect(firstNode.querySelector('.custom-content')).to.exist;
     const button = firstNode.querySelector('.custom-content .el-button');
     expect(button).to.exist;
-    expect(button.textContent).to.equal('一级 1');
+    expect(button.querySelector('span').textContent).to.equal('一级 1');
   });
 
   it('scoped slot', () => {
@@ -861,4 +831,63 @@ describe('Tree', () => {
       done();
     });
   });
+
+  it('update multi tree data', async() => {
+    const vm = createVue({
+      template: `
+        <div>
+          <el-tree ref="tree1" :data="data" node-key="id" :props="defaultProps"></el-tree>
+          <el-tree ref="tree2" :data="data" node-key="id" :props="defaultProps"></el-tree>
+        </div>
+        `,
+
+      data() {
+        return {
+          data: [{
+            id: 1,
+            label: '一级 1',
+            children: [{
+              id: 11,
+              label: '二级 1-1',
+              children: [{
+                id: 111,
+                label: '三级 1-1'
+              }]
+            }]
+          }, {
+            id: 2,
+            label: '一级 2',
+            children: [{
+              id: 21,
+              label: '二级 2-1'
+            }, {
+              id: 22,
+              label: '二级 2-2'
+            }]
+          }, {
+            id: 3,
+            label: '一级 3',
+            children: [{
+              id: 31,
+              label: '二级 3-1'
+            }, {
+              id: 32,
+              label: '二级 3-2'
+            }]
+          }],
+          defaultProps: {
+            children: 'children',
+            label: 'label'
+          }
+        };
+      }
+    }, true);
+    const nodeData = { label: '新增 1', id: 4 };
+    vm.data.push(nodeData);
+    await wait();
+    const tree1 = vm.$refs.tree1;
+    expect(tree1.getNode(4).data).to.equal(nodeData);
+    const tree2 = vm.$refs.tree2;
+    expect(tree2.getNode(4).data).to.equal(nodeData);
+  });
 });
diff --git a/test/unit/specs/upload.spec.js b/test/unit/specs/upload.spec.js
index fb5ab8d8380..834fcdbf71f 100644
--- a/test/unit/specs/upload.spec.js
+++ b/test/unit/specs/upload.spec.js
@@ -1,12 +1,13 @@
 import { createVue, destroyVM } from '../util.js';
 import ajax from 'packages/upload/src/ajax';
-const noop = () => {
-};
+
+const noop = () => {};
 const option = {
   onSuccess: noop,
+  onProgress: noop,
   data: { a: 'abc', b: 'bcd' },
   filename: 'file.png',
-  file: 'foo',
+  file: new File([JSON.stringify('foo')], {type: 'image/png'}),
   action: '/upload',
   headers: { region: 'shanghai' }
 };
@@ -34,7 +35,6 @@ describe('ajax', () => {
   it('request width header', done => {
     ajax(option);
     expect(requests[0].requestHeaders).to.eql({
-      // 'X-Requested-With': 'XMLHttpRequest',
       region: 'shanghai'
     });
     done();
diff --git a/test/unit/specs/util-get-femessage-navs.js b/test/unit/specs/util-get-femessage-navs.js
new file mode 100644
index 00000000000..302e45dc650
--- /dev/null
+++ b/test/unit/specs/util-get-femessage-navs.js
@@ -0,0 +1,46 @@
+import { getFrontendInfraBaseUrl } from 'element-ui/src/utils/get-femessage-navs';
+
+const defaultBaseUrl = 'https://frontend-infra.deepexi.com/#/material';
+
+describe('Utils:getFemessageNavs', () => {
+  it('getFrontendInfraBaseUrl navs is empty', () => {
+    const navs = [];
+
+    const url = getFrontendInfraBaseUrl(navs);
+
+    expect(url).to.equal(defaultBaseUrl);
+  });
+
+  it('getFrontendInfraBaseUrl navs no frontendInfraBaseUrl', () => {
+    const navs = [
+      {
+        repoName: 'update-popup',
+        packageName: '@femessage/update-popup'
+      }
+    ];
+
+    const url = getFrontendInfraBaseUrl(navs);
+
+    expect(url).to.equal(defaultBaseUrl);
+  });
+
+  it('getFrontendInfraBaseUrl navs has frontendInfraBaseUrl', () => {
+    const baseUrl =
+      'https://frontend-infra.deepexi.com/home/index.html#/material';
+    const navs = [
+      {
+        repoName: 'update-popup',
+        packageName: '@femessage/update-popup'
+      },
+      {
+        repoName: 'el-data-table',
+        packageName: '@femessage/el-data-table',
+        frontendInfraBaseUrl: baseUrl
+      }
+    ];
+
+    const url = getFrontendInfraBaseUrl(navs);
+
+    expect(url).to.equal(baseUrl);
+  });
+});
diff --git a/test/unit/specs/util.vue-popper.spec.js b/test/unit/specs/util.vue-popper.spec.js
index a3275f2d4c0..8c62387698a 100644
--- a/test/unit/specs/util.vue-popper.spec.js
+++ b/test/unit/specs/util.vue-popper.spec.js
@@ -139,7 +139,7 @@ describe('Utils:VuePopper', () => {
     const vm = createTest(Popper, {
       visibleArrow: true
     });
-    expect(vm.appended).to.empty;
+    expect(vm.appended).to.be.undefined;
     vm.createPopper();
     expect(vm.appended).to.true;
     vm.appendArrow();
@@ -155,7 +155,7 @@ describe('Utils:VuePopper', () => {
       visibleArrow: true,
       popper
     });
-    expect(vm.appended).to.empty;
+    expect(vm.appended).to.be.undefined;
     vm.createPopper();
     expect(vm.popperJS._popper.querySelector('[x-arrow][_v-110]')).to.exist;
   });
diff --git a/test/unit/util.js b/test/unit/util.js
index 15f7dc2bce9..f2cc5bdfb05 100644
--- a/test/unit/util.js
+++ b/test/unit/util.js
@@ -18,7 +18,7 @@ const createElm = function() {
  * 回收 vm
  * @param  {Object} vm
  */
-exports.destroyVM = function(vm) {
+export const destroyVM = function(vm) {
   vm.$destroy && vm.$destroy();
   vm.$el &&
   vm.$el.parentNode &&
@@ -31,7 +31,7 @@ exports.destroyVM = function(vm) {
  * @param  {Boolean=false} mounted 是否添加到 DOM 上
  * @return {Object} vm
  */
-exports.createVue = function(Compo, mounted = false) {
+export const createVue = function(Compo, mounted = false) {
   if (Object.prototype.toString.call(Compo) === '[object String]') {
     Compo = { template: Compo };
   }
@@ -46,7 +46,7 @@ exports.createVue = function(Compo, mounted = false) {
  * @param  {Boolean=false} mounted  - 是否添加到 DOM 上
  * @return {Object} vm
  */
-exports.createTest = function(Compo, propsData = {}, mounted = false) {
+export const createTest = function(Compo, propsData = {}, mounted = false) {
   if (propsData === true || propsData === false) {
     mounted = propsData;
     propsData = {};
@@ -63,7 +63,7 @@ exports.createTest = function(Compo, propsData = {}, mounted = false) {
  * @param  {String} name
  * @param  {*} opts
  */
-exports.triggerEvent = function(elm, name, ...opts) {
+export const triggerEvent = function(elm, name, ...opts) {
   let eventName;
 
   if (/^mouse|click/.test(name)) {
@@ -88,9 +88,9 @@ exports.triggerEvent = function(elm, name, ...opts) {
  * @param {Element} elm
  * @param {*} opts
  */
-exports.triggerClick = function(elm, ...opts) {
-  exports.triggerEvent(elm, 'mousedown', ...opts);
-  exports.triggerEvent(elm, 'mouseup', ...opts);
+export const triggerClick = function(elm, ...opts) {
+  triggerEvent(elm, 'mousedown', ...opts);
+  triggerEvent(elm, 'mouseup', ...opts);
 
   return elm;
 };
@@ -100,9 +100,22 @@ exports.triggerClick = function(elm, ...opts) {
  * @param {Element} elm
  * @param {keyCode} int
  */
-exports.triggerKeyDown = function(el, keyCode) {
+export const triggerKeyDown = function(el, keyCode) {
   const evt = document.createEvent('Events');
   evt.initEvent('keydown', true, true);
   evt.keyCode = keyCode;
   el.dispatchEvent(evt);
 };
+
+/**
+ * 等待 ms 毫秒，返回 Promise
+ * @param {Number} ms
+ */
+export const wait = function(ms = 50) {
+  return new Promise(resolve => setTimeout(() => resolve(), ms));
+};
+
+/**
+ * 等待一个 Tick，代替 Vue.nextTick，返回 Promise
+ */
+export const waitImmediate = () => wait(0);
diff --git a/types/affix.d.ts b/types/affix.d.ts
new file mode 100644
index 00000000000..f9a2af20f60
--- /dev/null
+++ b/types/affix.d.ts
@@ -0,0 +1,8 @@
+import { ElementUIComponent } from './component'
+
+/** Affix Component */
+export declare class ElAffix extends ElementUIComponent {
+  offsetBottom?: number
+  offsetTop?: number
+  target?: () => HTMLElement
+}
diff --git a/types/alert.d.ts b/types/alert.d.ts
index 374a580677c..169811919ed 100644
--- a/types/alert.d.ts
+++ b/types/alert.d.ts
@@ -1,6 +1,7 @@
 import { ElementUIComponent } from './component'
 
 export type AlertType = 'success' | 'warning' | 'info' | 'error'
+export type AlertEffect = 'dark' | 'light'
 
 /** Alert Component */
 export declare class ElAlert extends ElementUIComponent {
@@ -24,4 +25,7 @@ export declare class ElAlert extends ElementUIComponent {
 
   /** If a type icon is displayed */
   showIcon: boolean
+
+  /** Choose effect */
+  effect: AlertEffect
 }
diff --git a/types/avatar.d.ts b/types/avatar.d.ts
new file mode 100644
index 00000000000..4002e0e3108
--- /dev/null
+++ b/types/avatar.d.ts
@@ -0,0 +1,20 @@
+import { ElementUIComponent } from './component'
+
+/** Avatar Component */
+export declare class ElAvatar extends ElementUIComponent {
+  icon: string;
+
+  size: string | number;
+
+  shape: string;
+
+  src: string;
+
+  error: () => false;
+
+  srcSet: string;
+
+  alt: string;
+
+  fit: string;
+}
diff --git a/types/backtop.d.ts b/types/backtop.d.ts
new file mode 100644
index 00000000000..a171c76e1db
--- /dev/null
+++ b/types/backtop.d.ts
@@ -0,0 +1,16 @@
+import { ElementUIComponent } from './component'
+
+/** Backtop Component */
+export declare class ElBacktop extends ElementUIComponent {
+  /** Backtop target */
+  target: string
+  
+  /** Backtop visibility height */
+  visibilityHeight: string | number
+
+  /** Backtop right position */
+  right: string | number
+
+  /** Backtop bottom position */
+  bottom: string | number
+}
diff --git a/types/button-group-enhance.d.ts b/types/button-group-enhance.d.ts
new file mode 100644
index 00000000000..41245581625
--- /dev/null
+++ b/types/button-group-enhance.d.ts
@@ -0,0 +1,5 @@
+import { ElementUIComponent } from './component'
+
+/** ButtonGroupEnhance Component */
+export declare class ElButtonGroupEnhance extends ElementUIComponent {
+}
diff --git a/types/calendar.d.ts b/types/calendar.d.ts
new file mode 100644
index 00000000000..d487867ef43
--- /dev/null
+++ b/types/calendar.d.ts
@@ -0,0 +1,15 @@
+import { ElementUIComponent } from './component'
+
+export type DateType = Date | String | Number
+
+/** Calendar Component */
+export declare class ElCalendar extends ElementUIComponent {
+  /** Binding value */
+  value: DateType
+
+  /** Specify the display range of the calendar */
+  range: DateType[]
+
+  /** First day of week */
+  firstDayOfWeek: number
+}
diff --git a/types/carousel.d.ts b/types/carousel.d.ts
index 04f5414b37b..994a0489f1b 100644
--- a/types/carousel.d.ts
+++ b/types/carousel.d.ts
@@ -4,6 +4,7 @@ export type CarouselIndicatorTrigger = 'hover' | 'click'
 export type CarouselIndicatorPosition = 'outside' | 'none'
 export type CarouselArrowVisibility = 'always' | 'hover' | 'never'
 export type CarouselType = 'card'
+export type CarouselDirection = 'horizontal' | 'vertical'
 
 /** Loop a series of images or texts in a limited space */
 export declare class ElCarousel extends ElementUIComponent {
@@ -31,6 +32,9 @@ export declare class ElCarousel extends ElementUIComponent {
   /** Type of the Carousel */
   type: CarouselType
 
+  /** Display direction */
+  direction: CarouselDirection
+
   /**
    * Manually switch slide by index
    *
diff --git a/types/cascader-panel.d.ts b/types/cascader-panel.d.ts
new file mode 100644
index 00000000000..5c2049c2903
--- /dev/null
+++ b/types/cascader-panel.d.ts
@@ -0,0 +1,72 @@
+import { VNode, CreateElement } from 'vue';
+import { ElementUIComponent } from './component'
+
+/** Trigger mode of expanding current item */
+export type ExpandTrigger = 'click' | 'hover'
+
+/** Cascader Option */
+export interface CascaderOption {
+  label: string,
+  value: any,
+  children?: CascaderOption[],
+  disabled?: boolean,
+  leaf?: boolean
+}
+
+/** Cascader Props */
+export interface CascaderProps<V, D> {
+  expandTrigger?: ExpandTrigger,
+  multiple?: boolean,
+  checkStrictly?: boolean,
+  emitPath?: boolean,
+  lazy?: boolean,
+  lazyLoad?: (node: CascaderNode<V, D>, resolve: Resolve<D>) => void,
+  value?: string,
+  label?: string,
+  children?: string,
+  disabled?: string
+  leaf?: string
+}
+
+/** Cascader Node */
+export interface CascaderNode<V, D> {
+  uid: number,
+  data: D,
+  value: V,
+  label: string,
+  level: number,
+  isDisabled: boolean,
+  isLeaf: boolean,
+  parent: CascaderNode<V, D> | null,
+  children: CascaderNode<V, D>[]
+  config: CascaderProps<V, D>
+}
+
+type Resolve<D> = (dataList?: D[]) => void
+
+export interface CascaderPanelSlots {
+  /** Custom label content */
+  default: VNode[]
+
+  [key: string]: VNode[]
+}
+
+/** CascaderPanel Component */
+export declare class ElCascaderPanel<V = any, D = CascaderOption> extends ElementUIComponent {
+  /** Selected value */
+  value: V | V[]
+
+  /** Data of the options */
+  options: D[]
+
+  /** Configuration options */
+  props: CascaderProps<V, D>
+
+  /** Whether to add border */
+  border: boolean
+
+  /** Render function of custom label content */
+  renderLabel: (h: CreateElement, context: { node: CascaderNode<V, D>; data: D }) => VNode
+
+  $slots: CascaderPanelSlots
+}
diff --git a/types/cascader.d.ts b/types/cascader.d.ts
index a602b6a1e61..4d7997363d6 100644
--- a/types/cascader.d.ts
+++ b/types/cascader.d.ts
@@ -1,29 +1,32 @@
+import { VNode } from 'vue';
 import { ElementUIComponent, ElementUIComponentSize } from './component'
+import { CascaderOption, CascaderProps, CascaderNode } from './cascader-panel';
 
-/** Trigger mode of expanding current item */
-export type ExpandTrigger = 'click' | 'hover'
+export { CascaderOption, CascaderProps, CascaderNode };
 
-/** Cascader Option */
-export interface CascaderOption {
-  label: string,
-  value: any,
-  children: CascaderOption[],
-  disabled: boolean
+export interface CascaderSlots {
+  /** Custom label content */
+  default: VNode[],
+
+  /** Empty content when no option matches */
+  empty: VNode[]
+
+  [key: string]: VNode[]
 }
 
 /** Cascader Component */
-export declare class ElCascader extends ElementUIComponent {
+export declare class ElCascader<V = any, D = CascaderOption> extends ElementUIComponent {
   /** Data of the options */
   options: CascaderOption[]
 
   /** Configuration options */
-  props: object
+  props: CascaderProps<V, D>
 
   /** Selected value */
-  value: any[]
+  value: V | V[]
 
-  /** Custom class name for Cascader's dropdown */
-  popperClass: string
+  /** Size of Input */
+  size: ElementUIComponentSize
 
   /** Input placeholder */
   placeholder: string
@@ -34,24 +37,29 @@ export declare class ElCascader extends ElementUIComponent {
   /** Whether selected value can be cleared */
   clearable: boolean
 
-  /** Trigger mode of expanding current item */
-  expandTrigger: ExpandTrigger
-
   /** Whether to display all levels of the selected value in the input */
   showAllLevels: boolean
 
+  /** Whether to collapse selected tags in multiple selection mode */
+  collapseTags: boolean
+
+  /** Separator of option labels */
+  separator: string
+
   /** Whether the options can be searched */
   filterable: boolean
 
+  /** filter method to match options according to input keyword */
+  filterMethod: (node: CascaderNode<V, D>, keyword: string) => boolean
+
   /** Debounce delay when typing filter keyword, in millisecond */
   debounce: number
 
-  /** Whether selecting an option of any level is permitted */
-  changeOnSelect: boolean
-
-  /** Size of Input */
-  size: ElementUIComponentSize
+  /** Custom class name for Cascader's dropdown */
+  popperClass: string
 
   /** Hook function before filtering with the value to be filtered as its parameter */
   beforeFilter: (value: string) => boolean | Promise<any>
+
+  $slots: CascaderSlots
 }
diff --git a/types/checkbox-img-button.d.ts b/types/checkbox-img-button.d.ts
new file mode 100644
index 00000000000..6717923ef74
--- /dev/null
+++ b/types/checkbox-img-button.d.ts
@@ -0,0 +1,17 @@
+import { ElementUIComponent } from './component'
+
+/** CheckboxImgButton Component */
+export declare class ElCheckboxImgButton extends ElementUIComponent {
+  /** The image's url */
+  imgUrl: string
+
+  /** The image's title */
+  imgTitle: string
+
+  /** The image's description */
+  imgDesc: string
+
+  /** The layout direction */
+  vertical: boolean
+        
+}
diff --git a/types/collapse-item.d.ts b/types/collapse-item.d.ts
index 135ce20d7d1..f780dd7f0d9 100644
--- a/types/collapse-item.d.ts
+++ b/types/collapse-item.d.ts
@@ -20,4 +20,7 @@ export declare class ElCollapseItem extends ElementUIComponent {
   title: string
 
   $slots: CollapseItemSlots
+
+  /** Disable the collapse item */
+  disabled: boolean
 }
diff --git a/types/data-mapper.d.ts b/types/data-mapper.d.ts
new file mode 100644
index 00000000000..c761938ebd4
--- /dev/null
+++ b/types/data-mapper.d.ts
@@ -0,0 +1,28 @@
+import { ElementUIComponent } from './component'
+
+/** DataMapper Component */
+export declare class ElDataMapper extends ElementUIComponent {
+  /** data-mapper data */
+  data:object
+
+  /** data-mapper columns */
+  columns:object[]
+
+  /** formatter col*/
+  formatter: <T>(data: object,col: object,index: number) => T
+
+  /** The placeholder of data-mapper content */
+  placeholder:string
+
+  /** data-mapper rows */
+  contentRows:number
+
+  /** single column display */
+  inline: boolean
+
+  /** label width */
+  labelWidth: string | number
+
+  /** label position */
+  labelPosition: string
+}
diff --git a/types/dialog.d.ts b/types/dialog.d.ts
index 85c7e3ff535..f4e218d2e08 100644
--- a/types/dialog.d.ts
+++ b/types/dialog.d.ts
@@ -55,5 +55,8 @@ export declare class ElDialog extends ElementUIComponent {
   /** Whether to align the header and footer in center */
   center: boolean
 
+  /** Whether to destroy elements in Dialog when closed */
+  destroyOnClose: boolean
+
   $slots: DialogSlots
 }
diff --git a/types/divider.d.ts b/types/divider.d.ts
new file mode 100644
index 00000000000..c7d969cc2f7
--- /dev/null
+++ b/types/divider.d.ts
@@ -0,0 +1,12 @@
+import { ElementUIComponent } from './component'
+
+export type ContentPosition = 'left' | 'center' | 'right'
+
+/** Divider Component */
+export declare class ElDivider extends ElementUIComponent {
+  /** enable vertical divider */
+  vertical: boolean
+
+  /** customize the content on the divider line */
+  posiiton: ContentPosition
+}
diff --git a/types/drawer.d.ts b/types/drawer.d.ts
new file mode 100644
index 00000000000..8d2d7f3a520
--- /dev/null
+++ b/types/drawer.d.ts
@@ -0,0 +1,63 @@
+import { ElementUIComponent } from './component'
+import { VNode } from 'vue'
+
+type hide = (shouldCancel: boolean) => void
+declare enum Direction {
+    LTR = 'ltr', // left to right
+    RTL = 'rtl', // right to left
+    TTB = 'ttb', // top to bottom
+    BTT = 'btt' // bottom to top
+}
+
+interface DrawerSlots {
+    /* Main Content Slots */
+    default: VNode[];
+
+    /* Title Slots */
+    title: VNode[];
+
+    [key: string]: VNode[]
+}
+/** Drawer Component */
+export declare class ElDrawer extends ElementUIComponent {
+    /* Equivalent to `Dialog`'s append to body attribute, when applying nested drawer, make sure this one is set to true */
+    appendToBody: boolean
+
+    /* Hook method called before close drawer, the first parameter is a function which should determine if the drawer should be closed */
+    beforeClose: (done: hide) => void
+
+    /** Whether the Drawer can be closed by pressing ESC */
+    closeOnPressEscape: boolean
+
+    /** Custom class names for Dialog */
+    customClass: string
+
+    /* Determine whether the wrapped children should be destroyed, if true, children's destroyed life cycle method will be called all local state will be destroyed */
+    destroyOnClose: boolean
+
+    /* Equivalent to `Dialog`'s modal attribute, determines whether the dark shadowing background should show */
+    modal: boolean
+
+    /* Equivalent to `Dialog`'s modal-append-to-body attribute, determines whether the shadowing background should be inserted direct to DocumentBody element */
+    modalAppendToBody: boolean
+
+    /* Attributes that controls the drawer's direction of display*/
+    position: Direction
+
+    /* Whether the close button should be rendered to control the drawer's visible state */
+    showClose: boolean
+
+    /* The size of the drawer component, supporting number with unit of pixel, string by percentage e.g. 30% */
+    size: number | string
+
+    /* The Drawer's title, also can be replaced by named slot `title` */
+    title: string
+
+    /* Whether the drawer component should show, also can be decorated by `.sync` */
+    visible: boolean
+
+    /* Flag attribute whi */
+    wrapperClosable: boolean
+
+    $slots: DrawerSlots
+}
diff --git a/types/dropdown-item.d.ts b/types/dropdown-item.d.ts
index 0fb9b451a36..767142414a6 100644
--- a/types/dropdown-item.d.ts
+++ b/types/dropdown-item.d.ts
@@ -10,4 +10,7 @@ export declare class ElDropdownItem extends ElementUIComponent {
 
   /** Whether a divider is displayed */
   divided: boolean
+
+  /** Icon to show on left side of text */
+  icon: string
 }
diff --git a/types/dropdown.d.ts b/types/dropdown.d.ts
index 02b0112f6fe..53df211c8a7 100644
--- a/types/dropdown.d.ts
+++ b/types/dropdown.d.ts
@@ -23,4 +23,13 @@ export declare class ElDropdown extends ElementUIComponent {
 
   /** Whether to hide menu after clicking menu-item */
   hideOnClick: boolean
+
+  /** Delay time before show a dropdown */
+  showTimeout: number
+
+  /** Delay time before hide a dropdown */
+  hideTimeout: number
+
+  /** Dropdown tabindex */
+  tabindex: number
 }
diff --git a/types/edit-table.d.ts b/types/edit-table.d.ts
new file mode 100644
index 00000000000..07107d2fa10
--- /dev/null
+++ b/types/edit-table.d.ts
@@ -0,0 +1,5 @@
+import { ElementUIComponent } from './component'
+
+/** EditTable Component */
+export declare class ElEditTable extends ElementUIComponent {
+}
diff --git a/types/element-ui.d.ts b/types/element-ui.d.ts
index 6411cdb53a1..72440cf2bb3 100644
--- a/types/element-ui.d.ts
+++ b/types/element-ui.d.ts
@@ -1,4 +1,4 @@
-import Vue from 'vue'
+import Vue, { PluginObject } from 'vue'
 import { ElementUIComponent, ElementUIComponentSize, ElementUIHorizontalAlignment } from './component'
 
 import { ElAlert } from './alert'
@@ -61,12 +61,45 @@ import { ElTableColumn } from './table-column'
 import { ElTag } from './tag'
 import { ElTabs } from './tabs'
 import { ElTabPane } from './tab-pane'
+import { ElTimeline } from './timeline'
+import { ElTimelineItem } from './timeline-item'
 import { ElTimePicker } from './time-picker'
 import { ElTimeSelect } from './time-select'
 import { ElTooltip } from './tooltip'
 import { ElTransfer } from './transfer'
-import { ElTree } from './tree'
+import { ElTree, TreeData } from './tree'
 import { ElUpload } from './upload'
+import { ElLink } from './link'
+import { ElDivider } from './divider'
+import { ElIcon } from './icon'
+import { ElCalendar } from './calendar'
+import { ElImage } from './image'
+import { ElBacktop } from './backtop'
+import { ElInfiniteScroll } from './infinite-scroll'
+import { ElPageHeader } from './page-header'
+import { ElAvatar } from './avatar'
+import { ElDrawer } from './drawer'
+import { ElPopconfirm } from './popconfirm'
+import { ElLrContainer } from './lr-container'
+import { ElLoadingButton } from './loading-button'
+import { ElMessageBoxCenter } from './message-box-center'
+import { ElTabsDotted } from './tabs-dotted'
+import { ElDataMapper } from './data-mapper'
+import { ElCheckboxImgButton } from './checkbox-img-button'
+import { ElRadioImgButton } from './radio-img-button'
+import { ElIconCheckbox } from './icon-checkbox'
+import { ElStatusSteps } from './status-steps'
+import { ElPanel } from './panel'
+import { ElSkeleton } from './skeleton'
+import { ElEmpty } from './empty'
+import { ElAffix } from './affix'
+import { ElSwitchEnhance } from './switch-enhance'
+import { ElEditTable } from './edit-table'
+import { ElInputIdCard } from './input-id-card'
+import { ElInputPhone } from './input-phone'
+import { ElInputEmail } from './input-email'
+import { ElInputUrl } from './input-url'
+import { ElButtonGroupEnhance } from './button-group-enhance'
 
 export interface InstallationOptions {
   locale: any,
@@ -102,6 +135,9 @@ export const Message: ElMessage
 /** A set of modal boxes simulating system message box, mainly for message prompt, success tips, error messages and query information */
 export const MessageBox: ElMessageBox
 
+/** A set of modal boxes simulating system message box center, mainly for message prompt, success tips, error messages and query information */
+export const MessageBoxCenter: ElMessageBoxCenter
+
 /** Displays a global notification message at the upper right corner of the page */
 export const Notification: ElNotification
 
@@ -275,6 +311,12 @@ export class TabPane extends ElTabPane {}
 /** Tag Component */
 export class Tag extends ElTag {}
 
+/** Timeline Component */
+export class Timeline extends ElTimeline {}
+
+/** Timeline Item Component */
+export class TimelineItem extends ElTimelineItem {}
+
 /** TimePicker Component */
 export class TimePicker extends ElTimePicker {}
 
@@ -288,7 +330,97 @@ export class Tooltip extends ElTooltip {}
 export class Transfer extends ElTransfer {}
 
 /** Tree Component */
-export class Tree extends ElTree {}
+export class Tree<K = any, D = TreeData> extends ElTree<K, D> {}
 
 /** Upload Component */
 export class Upload extends ElUpload {}
+
+/** Divider Component */
+export class Divider extends ElDivider {}
+
+/** Link Component */
+export class Link extends ElLink {}
+
+/** Image Component */
+export class Image extends ElImage {}
+
+/** Icon Component */
+export class Icon extends ElIcon {}
+
+/** Calendar Component */
+export class Calendar extends ElCalendar {}
+
+/** Backtop Component */
+export class Backtop extends ElBacktop {}
+
+/** InfiniteScroll Directive */
+export const InfiniteScroll: PluginObject<ElInfiniteScroll>;
+
+/** PageHeader Component */
+export class PageHeader extends ElPageHeader {}
+
+/** Avatar Component */
+export class Avatar extends ElAvatar {}
+
+/** Drawer Component */
+export class Drawer extends ElDrawer {}
+
+/** Popconfirm Component */
+export class Popconfirm extends ElPopconfirm {}
+
+/** LrContainer Component */
+export class LrContainer extends ElLrContainer {}
+
+/** LoadingButton Component */
+export class LoadingButton extends ElLoadingButton {}
+
+/** TabsDotted Component */
+export class TabsDotted extends ElTabsDotted {}
+
+/** DataMapper Component */
+export class DataMapper extends ElDataMapper {}
+
+/** CheckboxImgButton Component */
+export class CheckboxImgButton extends ElCheckboxImgButton {}
+
+/** RadioImgButton Component */
+export class RadioImgButton extends ElRadioImgButton {}
+
+/** IconCheckbox Component */
+export class IconCheckbox extends ElIconCheckbox {}
+
+/** StatusSteps Component */
+export class StatusSteps extends ElStatusSteps {}
+
+/** Panel Component */
+export class Panel extends ElPanel {}
+
+/** Skeleton Component */
+export class Skeleton extends ElSkeleton {}
+
+/** Empty Component */
+export class Empty extends ElEmpty {}
+
+/** Affix Component */
+export class Affix extends ElAffix {}
+
+/** InputIdCard Component */
+export class InputIdCard extends ElInputIdCard {}
+
+/** InputPhone Component */
+export class InputPhone extends ElInputPhone {}
+
+/** InputEmail Component */
+export class InputEmail extends ElInputEmail {}
+
+/** SwitchEnhance Component */
+export class SwitchEnhance extends ElSwitchEnhance {}
+
+/** EditTable Component */
+export class EditTable extends ElEditTable {}
+
+/** InputUrl Component */
+export class InputUrl extends ElInputUrl {}
+
+/** ButtonGroupEnhance Component */
+export class ButtonGroupEnhance extends ElButtonGroupEnhance {}
diff --git a/types/empty.d.ts b/types/empty.d.ts
new file mode 100644
index 00000000000..34a5e2187ff
--- /dev/null
+++ b/types/empty.d.ts
@@ -0,0 +1,7 @@
+import { ElementUIComponent } from './component'
+
+/** Empty Component */
+export declare class ElEmpty extends ElementUIComponent {
+  description: string
+  image: string
+}
diff --git a/types/form.d.ts b/types/form.d.ts
index 038214e5fa6..4b2b05a9aed 100644
--- a/types/form.d.ts
+++ b/types/form.d.ts
@@ -72,11 +72,11 @@ export declare class ElForm extends ElementUIComponent {
    * @param props The property of `model` or array of prop which is going to validate
    * @param callback A callback to tell the field validation result
    */
-  validateField (props: string | string[], callback: ValidateFieldCallback): void
+  validateField (props: string | string[], callback?: ValidateFieldCallback): void
 
   /** reset all the fields and remove validation result */
   resetFields (): void
-  
+
   /** clear validation message for certain fields */
   clearValidate (props?: string | string[]): void
 }
diff --git a/types/icon-checkbox.d.ts b/types/icon-checkbox.d.ts
new file mode 100644
index 00000000000..214e7ce1d7e
--- /dev/null
+++ b/types/icon-checkbox.d.ts
@@ -0,0 +1,5 @@
+import { ElementUIComponent } from './component'
+
+/** IconCheckbox Component */
+export declare class ElIconCheckbox extends ElementUIComponent {
+}
diff --git a/types/icon.d.ts b/types/icon.d.ts
new file mode 100644
index 00000000000..ff3ed4dd025
--- /dev/null
+++ b/types/icon.d.ts
@@ -0,0 +1,7 @@
+import { ElementUIComponent } from './component'
+
+/** Icon Component */
+export declare class ElIcon extends ElementUIComponent {
+  /** Icon name */
+  name: string  
+}
diff --git a/types/image.d.ts b/types/image.d.ts
new file mode 100644
index 00000000000..82b18dce92c
--- /dev/null
+++ b/types/image.d.ts
@@ -0,0 +1,41 @@
+import { VNode } from 'vue'
+import { ElementUIComponent } from './component'
+
+export type ObjectFit = 'fill' | 'contain' | 'cover' | 'none' | 'scale-down'
+
+export interface ImageSlots {
+  /** Placeholder content when image hasn't loaded yet */
+  placeholder: VNode[]
+
+  /** Error content when error occurs to image load */
+  error: VNode[]
+
+  [key: string]: VNode[]
+}
+
+/** Image Component */
+export declare class ElImage extends ElementUIComponent {
+  /** Image source */
+  src: string
+
+  /** Indicate how the image should be resized to fit its container, same as native 'object-fit' */
+  fit: ObjectFit
+
+  /** Whether to use lazy load */
+  lazy: boolean
+
+  /** Scroll container that to add scroll listener when using lazy load */
+  scrollContainer: string | HTMLElement
+
+  /** Native 'alt' attribute */
+  alt: string
+
+  /** Native 'referrerPolicy' attribute */
+  referrerPolicy: string
+
+  $slots: ImageSlots
+
+  previewSrcList: string[]
+
+  zIndex: number
+}
diff --git a/types/infinite-scroll.d.ts b/types/infinite-scroll.d.ts
new file mode 100644
index 00000000000..4fbeb3df1b6
--- /dev/null
+++ b/types/infinite-scroll.d.ts
@@ -0,0 +1,6 @@
+import { VNodeDirective } from 'vue'
+
+export interface ElInfiniteScroll extends VNodeDirective {
+  name: 'infinite-scroll',
+  value: Function
+}
\ No newline at end of file
diff --git a/types/input-email.d.ts b/types/input-email.d.ts
new file mode 100644
index 00000000000..039dbd02716
--- /dev/null
+++ b/types/input-email.d.ts
@@ -0,0 +1,5 @@
+import { ElementUIComponent } from './component'
+
+/** InputEmail Component */
+export declare class ElInputEmail extends ElementUIComponent {
+}
diff --git a/types/input-id-card.d.ts b/types/input-id-card.d.ts
new file mode 100644
index 00000000000..b9a4cf66d0f
--- /dev/null
+++ b/types/input-id-card.d.ts
@@ -0,0 +1,5 @@
+import { ElementUIComponent } from './component'
+
+/** InputIdCard Component */
+export declare class ElInputIdCard extends ElementUIComponent {
+}
diff --git a/types/input-number.d.ts b/types/input-number.d.ts
index deec6f59bc5..76288ffc306 100644
--- a/types/input-number.d.ts
+++ b/types/input-number.d.ts
@@ -35,7 +35,10 @@ export declare class ElInputNumber extends ElementUIComponent {
   name: string
 
   /** Precision of input value */
-  precision: Number
+  precision: number
+
+  /** whether input value can only be multiple of step */
+  stepStrictly: boolean
 
   /**
    * Focus the Input component
diff --git a/types/input-phone.d.ts b/types/input-phone.d.ts
new file mode 100644
index 00000000000..0ec56879fe4
--- /dev/null
+++ b/types/input-phone.d.ts
@@ -0,0 +1,5 @@
+import { ElementUIComponent } from './component'
+
+/** InputPhone Component */
+export declare class ElInputPhone extends ElementUIComponent {
+}
diff --git a/types/input-url.d.ts b/types/input-url.d.ts
new file mode 100644
index 00000000000..f40f0575849
--- /dev/null
+++ b/types/input-url.d.ts
@@ -0,0 +1,5 @@
+import { ElementUIComponent } from './component'
+
+/** InputUrl Component */
+export declare class ElInputUrl extends ElementUIComponent {
+}
diff --git a/types/input.d.ts b/types/input.d.ts
index 33f53695f68..a67ef88d0a5 100644
--- a/types/input.d.ts
+++ b/types/input.d.ts
@@ -81,6 +81,15 @@ export declare class ElInput extends ElementUIComponent {
   /** Whether to trigger form validatio */
   validateEvent: boolean
 
+  /** Whether the input is clearable */
+  clearable: boolean
+
+  /** Whether to show password */
+  showPassword: boolean
+
+  /** Whether to show wordCount when setting maxLength */
+  showWordLimit: boolean
+
   /**
    * Focus the Input component
    */
diff --git a/types/link.d.ts b/types/link.d.ts
new file mode 100644
index 00000000000..c7ed7dd1b98
--- /dev/null
+++ b/types/link.d.ts
@@ -0,0 +1,25 @@
+import { ElementUIComponent } from './component'
+
+/** Button type */
+export type LinkType = 'primary' | 'success' | 'warning' | 'danger' | 'info' 
+
+/** Link Component */
+export declare class ElLink extends ElementUIComponent {
+  /** Link type */
+  type: LinkType
+  
+  /** Disable the link */
+  disabled: boolean
+
+  /** Link underline */
+  underline: boolean
+
+  /** Link icon, accepts an icon name of Element icon component */
+  icon: string
+
+  /** Link href */
+  href: string
+
+  /** Link target */
+  target: string
+}
diff --git a/types/loading-button.d.ts b/types/loading-button.d.ts
new file mode 100644
index 00000000000..9665ad537aa
--- /dev/null
+++ b/types/loading-button.d.ts
@@ -0,0 +1,6 @@
+import { ElButton } from './button'
+
+/** LoadingButton Component */
+export declare class ElLoadingButton extends ElButton {
+  loadingClick: () => Promise<any>
+}
diff --git a/types/loading.d.ts b/types/loading.d.ts
index e86df3edb39..45c1b98b496 100644
--- a/types/loading.d.ts
+++ b/types/loading.d.ts
@@ -1,4 +1,4 @@
-import Vue, { VNodeDirective } from 'vue'
+import Vue, { VNodeDirective, PluginObject } from 'vue'
 
 /** Options used in Loading service */
 export interface LoadingServiceOptions {
@@ -51,7 +51,7 @@ export interface ElLoading {
   /** If you do not have a specific DOM node to attach the Loading directive, or if you simply prefer not to use Loading as a directive, you can call this service with some configs to open a Loading instance. */
   service (options: LoadingServiceOptions): ElLoadingComponent
 
-  directive: object
+  directive: PluginObject<never>
 }
 
 declare module 'vue/types/vue' {
diff --git a/types/lr-container.d.ts b/types/lr-container.d.ts
new file mode 100644
index 00000000000..1a3e074a408
--- /dev/null
+++ b/types/lr-container.d.ts
@@ -0,0 +1,13 @@
+import { ElementUIComponent } from './component'
+
+/** LrContainer Component */
+export declare class ElLrContainer extends ElementUIComponent {
+  /** Aside Height */
+  asideHeight: number | string
+
+  /** Aside Width */
+  asideWidth: number | string
+
+  /** Main Height */
+  mainHeight: number | string
+}
diff --git a/types/message-box-center.d.ts b/types/message-box-center.d.ts
new file mode 100644
index 00000000000..07dc271f731
--- /dev/null
+++ b/types/message-box-center.d.ts
@@ -0,0 +1,176 @@
+import Vue, { VNode } from 'vue'
+import { MessageType } from './message'
+
+export type MessageBoxCenterCloseAction = 'confirm' | 'cancel' | 'close'
+export type MessageBoxCenterData = MessageBoxCenterInputData | MessageBoxCenterCloseAction
+
+export interface MessageBoxCenterInputData {
+    value: string,
+    action: MessageBoxCenterCloseAction
+}
+
+export interface MessageBoxCenterInputValidator {
+    (value: string): boolean | string
+}
+
+export declare class ElMessageBoxCenterComponent extends Vue {
+    title: string
+    message: string
+    type: MessageType
+    iconClass: string
+    customClass: string
+    showInput: boolean
+    showClose: boolean
+    inputValue: string
+    inputPlaceholder: string
+    inputType: string
+    inputPattern: RegExp
+    inputValidator: MessageBoxCenterInputValidator
+    inputErrorMessage: string
+    showConfirmButton: boolean
+    showCancelButton: boolean
+    action: MessageBoxCenterCloseAction
+    dangerouslyUseHTMLString: boolean
+    confirmButtonText: string
+    cancelButtonText: string
+    confirmButtonLoading: boolean
+    cancelButtonLoading: boolean
+    confirmButtonClass: string
+    confirmButtonDisabled: boolean
+    cancelButtonClass: string
+    editorErrorMessage: string
+}
+
+/** Options used in MessageBoxCenter */
+export interface ElMessageBoxCenterOptions {
+    /** Title of the MessageBoxCenter */
+    title?: string
+
+    /** Content of the MessageBoxCenter */
+    message?: string | VNode
+
+    /** Message type, used for icon display */
+    type?: MessageType
+
+    /** Custom icon's class */
+    iconClass?: string
+
+    /** Custom class name for MessageBoxCenter */
+    customClass?: string
+
+    /** MessageBoxCenter closing callback if you don't prefer Promise */
+    callback?: (action: MessageBoxCenterCloseAction, instance: ElMessageBoxCenterComponent) => void
+
+    /** Callback before MessageBoxCenter closes, and it will prevent MessageBoxCenter from closing */
+    beforeClose?: (action: MessageBoxCenterCloseAction, instance: ElMessageBoxCenterComponent, done: (() => void)) => void
+
+    /** Whether to lock body scroll when MessageBoxCenter prompts */
+    lockScroll?: boolean
+
+    /** Whether to show a cancel button */
+    showCancelButton?: boolean
+
+    /** Whether to show a confirm button */
+    showConfirmButton?: boolean
+
+    /** Whether to show a close button */
+    showClose?: boolean
+
+    /** Text content of cancel button */
+    cancelButtonText?: string
+
+    /** Text content of confirm button */
+    confirmButtonText?: string
+
+    /** Custom class name of cancel button */
+    cancelButtonClass?: string
+
+    /** Custom class name of confirm button */
+    confirmButtonClass?: string
+
+    /** Whether to align the content in center */
+    center?: boolean
+
+    /** Whether message is treated as HTML string */
+    dangerouslyUseHTMLString?: boolean
+
+    /** Whether to use round button */
+    roundButton?: boolean
+
+    /** Whether MessageBoxCenter can be closed by clicking the mask */
+    closeOnClickModal?: boolean
+
+    /** Whether MessageBoxCenter can be closed by pressing the ESC */
+    closeOnPressEscape?: boolean
+
+    /** Whether to close MessageBoxCenter when hash changes */
+    closeOnHashChange?: boolean
+
+    /** Whether to show an input */
+    showInput?: boolean
+
+    /** Placeholder of input */
+    inputPlaceholder?: string
+
+    /** Initial value of input */
+    inputValue?: string
+
+    /** Regexp for the input */
+    inputPattern?: RegExp
+
+    /** Input Type: text, textArea, password or number */
+    inputType?: string
+
+    /** Validation function for the input. Should returns a boolean or string. If a string is returned, it will be assigned to inputErrorMessage */
+    inputValidator?: MessageBoxCenterInputValidator
+
+    /** Error message when validation fails */
+    inputErrorMessage?: string
+
+    /** Whether to distinguish canceling and closing */
+    distinguishCancelAndClose?: boolean
+}
+
+export interface ElMessageBoxCenterShortcutMethod {
+    (message: string, title: string, options?: ElMessageBoxCenterOptions): Promise<MessageBoxCenterData>
+    (message: string, options?: ElMessageBoxCenterOptions): Promise<MessageBoxCenterData>
+}
+
+export interface ElMessageBoxCenter {
+    /** Show a message box */
+    (message: string, title?: string, type?: string): Promise<MessageBoxCenterData>
+
+    /** Show a message box */
+    (options: ElMessageBoxCenterOptions): Promise<MessageBoxCenterData>
+
+    /** Show an alert message box */
+    alert: ElMessageBoxCenterShortcutMethod
+
+    /** Show a confirm message box */
+    confirm: ElMessageBoxCenterShortcutMethod
+
+    /** Show a prompt message box */
+    prompt: ElMessageBoxCenterShortcutMethod
+
+    /** Set default options of message boxes */
+    setDefaults (defaults: ElMessageBoxCenterOptions): void
+
+    /** Close current message box */
+    close (): void
+}
+
+declare module 'vue/types/vue' {
+    interface Vue {
+        /** Show a message box */
+        $msgbox: ElMessageBoxCenter
+
+        /** Show an alert message box */
+        $alert: ElMessageBoxCenterShortcutMethod
+
+        /** Show a confirm message box */
+        $confirm: ElMessageBoxCenterShortcutMethod
+
+        /** Show a prompt message box */
+        $prompt: ElMessageBoxCenterShortcutMethod
+    }
+}
diff --git a/types/message-box.d.ts b/types/message-box.d.ts
index 0622c2b238b..c3acc3e148a 100644
--- a/types/message-box.d.ts
+++ b/types/message-box.d.ts
@@ -2,7 +2,7 @@ import Vue, { VNode } from 'vue'
 import { MessageType } from './message'
 
 export type MessageBoxCloseAction = 'confirm' | 'cancel' | 'close'
-export type MessageBoxData = MessageBoxInputData
+export type MessageBoxData = MessageBoxInputData | MessageBoxCloseAction
 
 export interface MessageBoxInputData {
   value: string,
diff --git a/types/message.d.ts b/types/message.d.ts
index 90b8f94ac2e..6302327fafd 100644
--- a/types/message.d.ts
+++ b/types/message.d.ts
@@ -45,6 +45,9 @@ export interface ElMessageOptions {
 
   /** Callback function when closed with the message instance as the parameter */
   onClose?: CloseEventHandler
+  
+  /** Set the distance to the top of viewport. Default is 20 px. */
+  offset?: number
 }
 
 export interface ElMessage {
@@ -56,15 +59,27 @@ export interface ElMessage {
 
   /** Show a success message */
   success (text: string): ElMessageComponent
+  
+  /** Show a success message with options */
+  success (options: ElMessageOptions): ElMessageComponent
 
   /** Show a warning message */
   warning (text: string): ElMessageComponent
+  
+  /** Show a warning message with options */
+  warning (options: ElMessageOptions): ElMessageComponent
 
   /** Show an info message */
   info (text: string): ElMessageComponent
+  
+  /** Show an info message with options */
+  info (options: ElMessageOptions): ElMessageComponent
 
   /** Show an error message */
   error (text: string): ElMessageComponent
+  
+  /** Show an error message with options */
+  error (options: ElMessageOptions): ElMessageComponent
 }
 
 declare module 'vue/types/vue' {
diff --git a/types/page-header.d.ts b/types/page-header.d.ts
new file mode 100644
index 00000000000..2831983a881
--- /dev/null
+++ b/types/page-header.d.ts
@@ -0,0 +1,10 @@
+import { ElementUIComponent } from './component'
+
+/** PageHeader Component */
+export declare class ElPageHeader extends ElementUIComponent {
+  /** title */
+  title: String
+
+  /** content */
+  content: String
+}
diff --git a/types/pagination.d.ts b/types/pagination.d.ts
index 278d820267a..61f0baaa088 100644
--- a/types/pagination.d.ts
+++ b/types/pagination.d.ts
@@ -37,4 +37,7 @@ export declare class ElPagination extends ElementUIComponent {
 
   /** Text for the prev button */
   nextText: string
+
+  /** Whether to hide when thers's only one page */ 
+  hideOnSinglePage: boolean
 }
diff --git a/types/panel.d.ts b/types/panel.d.ts
new file mode 100644
index 00000000000..499d3d0f081
--- /dev/null
+++ b/types/panel.d.ts
@@ -0,0 +1,20 @@
+import { ElementUIComponent } from './component'
+
+export type panelType = 'view' | 'edit'
+/** Panel Component */
+export declare class ElPanel extends ElementUIComponent {
+  /** title text */
+  title: string
+
+  /** subtitle text */
+  subtitle: string
+
+  /** Panel type */
+  type: panelType
+
+  /** bodyPadding */
+  bodyPadding: string
+  
+  /** Panel width */
+  width: string | number
+}
diff --git a/types/popconfirm.d.ts b/types/popconfirm.d.ts
new file mode 100644
index 00000000000..b3bee53a329
--- /dev/null
+++ b/types/popconfirm.d.ts
@@ -0,0 +1,29 @@
+import { ElementUIComponent } from './component'
+import { ElPopover } from './popover'
+
+/** Popconfirm Component */
+export declare class ElPopconfirm extends ElPopover {
+  /** Popconfirm title */
+  title: string
+
+  /** Popconfirm ok text */
+  confirmButtonText: string
+  
+  /** Popconfirm cancel text */
+  cancelButtonText: string
+
+  /** Popconfirm ok type */
+  confirmButtonType: string
+
+  /** Popconfirm cancal type */
+  cancelButtonType: string
+
+  /** Popconfirm icon */
+  icon: string
+
+  /** Popconfirm icon color */
+  iconColor: string
+
+  /** Popconfirm hide icon */
+  hideIcon: boolean
+}
diff --git a/types/popover.d.ts b/types/popover.d.ts
index 310884092e3..5ad4812802c 100644
--- a/types/popover.d.ts
+++ b/types/popover.d.ts
@@ -58,8 +58,14 @@ export declare class ElPopover extends ElementUIComponent {
   /** Custom class name for popover */
   popperClass: string
 
-  /** Delay of appearance when trigger is hover, in milliseconds */
+  /** Delay before appearing when trigger is hover, in milliseconds */
   openDelay: number
 
+  /** Delay before disappearing when trigger is hover, in milliseconds */
+  closeDelay: number
+
+  /** Popover tabindex */
+  tabindex: number
+
   $slots: PopoverSlots
 }
diff --git a/types/progress.d.ts b/types/progress.d.ts
index aff7f183af6..780a8d4ff7f 100644
--- a/types/progress.d.ts
+++ b/types/progress.d.ts
@@ -1,7 +1,7 @@
 import { ElementUIComponent } from './component'
 
 export type ProgressType = 'line' | 'circle'
-export type ProgressStatus = 'success' | 'exception' | 'text'
+export type ProgressStatus = 'success' | 'exception'
 
 /** Progress Component */
 export declare class ElProgress extends ElementUIComponent {
@@ -14,6 +14,9 @@ export declare class ElProgress extends ElementUIComponent {
   /** The width of progress bar */
   strokeWidth: number
 
+  /** Circle progress bar stroke line cap */
+  strokeLinecap: string
+
   /** Whether to place the percentage inside progress bar, only works when type is 'line' */
   textInside: boolean
 
@@ -21,11 +24,14 @@ export declare class ElProgress extends ElementUIComponent {
   status: ProgressStatus
 
   /** Background color of progress bar. Overrides `status` prop */
-  color: string
+  color: string | Function | Array<string | { color: string, percentage: number }>
 
   /** The canvas width of circle progress bar */
   width: number
 
   /** Whether to show percentage */
   showText: boolean
+
+  /** Template function of the content	*/
+  format(percentage: number): string
 }
diff --git a/types/radio-img-button.d.ts b/types/radio-img-button.d.ts
new file mode 100644
index 00000000000..eb599980011
--- /dev/null
+++ b/types/radio-img-button.d.ts
@@ -0,0 +1,5 @@
+import { ElementUIComponent } from './component'
+
+/** RadioImgButton Component */
+export declare class ElRadioImgButton extends ElementUIComponent {
+}
diff --git a/types/rate.d.ts b/types/rate.d.ts
index 9fe80a25fc3..ca655f59633 100644
--- a/types/rate.d.ts
+++ b/types/rate.d.ts
@@ -1,5 +1,17 @@
 import { ElementUIComponent } from './component'
 
+interface Option {
+  value: string,
+  excluded?: boolean
+}
+
+interface Options {
+  [threshold: number]: string | Option
+}
+
+export type RateColors = Options
+export type RateIconClasses = Options
+
 /** Rate Component */
 export declare class ElRate extends ElementUIComponent {
   /** Max rating score */
@@ -17,8 +29,8 @@ export declare class ElRate extends ElementUIComponent {
   /** Threshold value between medium and high level. The value itself will be included in high level */
   highThreshold: number
 
-  /** Color array for icons. It should have 3 elements, each of which corresponds with a score level */
-  colors: string[]
+  /** Colors for icons. If array, it should have 3 elements, each of which corresponds with a score level, else if object, the key should be threshold value between two levels, and the value should be corresponding color */
+  colors: string[] | RateColors
 
   /** Color of unselected icons */
   voidColor: string
@@ -26,8 +38,8 @@ export declare class ElRate extends ElementUIComponent {
   /** Color of unselected read-only icons */
   disabledVoidColor: string
 
-  /** Array of class names of icons. It should have 3 elements, each of which corresponds with a score level */
-  iconClasses: string[]
+  /** Class names of icons. If array, it should have 3 elements, each of which corresponds with a score level, else if object, the key should be threshold value between two levels, and the value should be corresponding class name */
+  iconClasses: string[] | RateIconClasses
 
   /** Class name of unselected icons */
   voidIconClass: string
diff --git a/types/skeleton.d.ts b/types/skeleton.d.ts
new file mode 100644
index 00000000000..aee97beaf94
--- /dev/null
+++ b/types/skeleton.d.ts
@@ -0,0 +1,53 @@
+import { ElementUIComponent } from './component'
+
+/** Skeleton Component */
+
+export interface SkeletonAvatarProps {
+  size?: 'large' | 'small' | 'default';
+  shape?: 'circle' | 'square';
+}
+
+export interface SkeletonTitleProps {
+  width?: number | string;
+}
+
+export interface SkeletonParagraphProps {
+  width?: string | number | Array<string | number>;
+  rows?: number;
+}
+
+export declare class ElSkeleton extends ElementUIComponent {
+  /**
+   * Show animation effect
+   * @default false
+   * @type boolean
+   */
+  active: boolean;
+
+  /**
+   * Show avatar placeholder
+   * @default false
+   * @type boolean | object
+   */
+  avatar: boolean | SkeletonAvatarProps;
+
+  /**
+   * Display the skeleton when true
+   * @type boolean
+   */
+  loading: boolean;
+
+  /**
+   * Show paragraph placeholder
+   * @default true
+   * @type boolean | object
+   */
+  paragraph: boolean | SkeletonParagraphProps;
+
+  /**
+   * Show title placeholder
+   * @default true
+   * @type boolean | object
+   */
+  title: boolean | SkeletonTitleProps;
+}
diff --git a/types/slider.d.ts b/types/slider.d.ts
index af706754fc7..d7790b9e839 100644
--- a/types/slider.d.ts
+++ b/types/slider.d.ts
@@ -1,3 +1,4 @@
+import { VNode } from 'vue';
 import { ElementUIComponent } from './component'
 
 export interface SliderTooltipFormat {
@@ -59,4 +60,9 @@ export declare class ElSlider extends ElementUIComponent {
 
   /** Custom class name for the tooltip */
   tooltipClass: string
+
+  /** Custom marks */
+  marks: {
+    [key: number]: string | { style: object; label: string | VNode }
+  }
 }
diff --git a/types/status-steps.d.ts b/types/status-steps.d.ts
new file mode 100644
index 00000000000..599252f6933
--- /dev/null
+++ b/types/status-steps.d.ts
@@ -0,0 +1,5 @@
+import { ElementUIComponent } from './component'
+
+/** StatusSteps Component */
+export declare class ElStatusSteps extends ElementUIComponent {
+}
diff --git a/types/submenu.d.ts b/types/submenu.d.ts
index f5e13595409..559445064d1 100644
--- a/types/submenu.d.ts
+++ b/types/submenu.d.ts
@@ -3,7 +3,7 @@ import { ElementUIComponent } from './component'
 /** Submenu Component */
 export declare class ElSubmenu extends ElementUIComponent {
   /** Unique identification */
-  index: string
+  index: string | null
 
   /** Delay time before showing a sub-menu */
   showTimeout: number
diff --git a/types/switch-enhance.d.ts b/types/switch-enhance.d.ts
new file mode 100644
index 00000000000..ff4d58d7e30
--- /dev/null
+++ b/types/switch-enhance.d.ts
@@ -0,0 +1,5 @@
+import { ElementUIComponent } from './component'
+
+/** SwitchEnhance Component */
+export declare class ElSwitchEnhance extends ElementUIComponent {
+}
diff --git a/types/switch.d.ts b/types/switch.d.ts
index b63987bd934..4489c01a6f9 100644
--- a/types/switch.d.ts
+++ b/types/switch.d.ts
@@ -37,4 +37,7 @@ export declare class ElSwitch extends ElementUIComponent {
 
   /** Input name of Switch */
   name: string
+
+  /** Whether to trigger form validation */
+  validateEvent: boolean
 }
diff --git a/types/table-column.d.ts b/types/table-column.d.ts
index 193ce25ee88..34e1d3034e2 100644
--- a/types/table-column.d.ts
+++ b/types/table-column.d.ts
@@ -65,7 +65,7 @@ export declare class ElTableColumn extends ElementUIComponent {
   renderHeader: (h: CreateElement, data: RenderHeaderData) => VNode | string
 
   /** Whether column can be sorted */
-  sortable: boolean
+  sortable: boolean | 'custom'
 
   /** Sorting method. Works when `sortable` is `true` */
   sortMethod: (a: any, b: any) => number
diff --git a/types/table.d.ts b/types/table.d.ts
index bc27961c541..da5bb3806a0 100644
--- a/types/table.d.ts
+++ b/types/table.d.ts
@@ -29,6 +29,14 @@ export interface cellCallbackParams {
   columnIndex: number
 }
 
+export interface treeNode {
+  rowKey: string | number,
+  isLeaf: boolean,
+  level: number,
+  expanded: boolean,
+  loaded: boolean
+}
+
 /** Table Component */
 export declare class ElTable extends ElementUIComponent {
   /** Table data */
@@ -58,6 +66,12 @@ export declare class ElTable extends ElementUIComponent {
   /** Key of current row, a set only prop */
   currentRowKey: string | number
 
+  /** Whether to lazy load tree structure data, used with load attribute */
+  lazy: boolean
+
+  /** Horizontal indentation of nodes in adjacent levels in pixels */
+  indent: number
+
   /** Function that returns custom class names for a row, or a string assigning class names for every row */
   rowClassName: string | ((param: rowCallbackParams) => string)
 
@@ -154,4 +168,7 @@ export declare class ElTable extends ElementUIComponent {
 
   /** Sort Table manually */
   sort (prop: string, order: string): void
+
+  /** method for lazy load subtree data */
+  load (row: object, treeNode: treeNode, resolve: Function): void
 }
diff --git a/types/tabs-dotted.d.ts b/types/tabs-dotted.d.ts
new file mode 100644
index 00000000000..3d42557de74
--- /dev/null
+++ b/types/tabs-dotted.d.ts
@@ -0,0 +1,5 @@
+import { ElementUIComponent } from './component'
+
+/** TabsDotted Component */
+export declare class ElTabsDotted extends ElementUIComponent {
+}
diff --git a/types/tag.d.ts b/types/tag.d.ts
index 5fa0116b552..cc59f796b7a 100644
--- a/types/tag.d.ts
+++ b/types/tag.d.ts
@@ -1,10 +1,11 @@
 import { ElementUIComponent, ElementUIComponentSize } from './component'
 
 export type TagType = 'primary' | 'gray' | 'success' | 'warning' | 'danger'
+export type TagTheme = 'dark' | 'light' | 'plain'
 
 /** Tag Component */
 export declare class ElTag extends ElementUIComponent {
-  /** Theme */
+  /** Tag type */
   type: TagType
 
   /** Whether Tab can be removed */
@@ -21,4 +22,7 @@ export declare class ElTag extends ElementUIComponent {
 
   /** Tag size */
   size: ElementUIComponentSize
+
+  /** Tag theme */
+  effect: TagTheme
 }
diff --git a/types/timeline-item.d.ts b/types/timeline-item.d.ts
new file mode 100644
index 00000000000..647d5550aef
--- /dev/null
+++ b/types/timeline-item.d.ts
@@ -0,0 +1,20 @@
+import { ElementUIComponent } from './component'
+
+export type TimelineItemPlacement = 'top' | 'bottom'
+export type TimelineItemType = 'primary' | 'success' | 'warning' | 'danger' | 'info'
+export type TimelineItemSize = 'normal' | 'large'
+
+/** TimelineItem Component */
+export declare class ElTimelineItem extends ElementUIComponent {
+  timestamp: string
+
+  hideTimestamp: boolean
+
+  placement: TimelineItemPlacement
+
+  type: TimelineItemType
+
+  size: TimelineItemSize
+
+  icon: string
+}
diff --git a/types/timeline.d.ts b/types/timeline.d.ts
new file mode 100644
index 00000000000..20e033d0552
--- /dev/null
+++ b/types/timeline.d.ts
@@ -0,0 +1,6 @@
+import { ElementUIComponent } from './component'
+
+/** Timeline Component */
+export declare class ElTimeline extends ElementUIComponent {
+  reverse: boolean
+}
diff --git a/types/tooltip.d.ts b/types/tooltip.d.ts
index a62c17972ed..b0fe4b6e1a0 100644
--- a/types/tooltip.d.ts
+++ b/types/tooltip.d.ts
@@ -46,4 +46,7 @@ export declare class ElTooltip extends ElementUIComponent {
 
   /** Timeout in milliseconds to hide tooltip */
   hideAfter: string
+
+  /** Tooltip tabindex */
+  tabindex: number
 }
diff --git a/types/tree.d.ts b/types/tree.d.ts
index f1cc8e9c237..64dd36ad7dd 100644
--- a/types/tree.d.ts
+++ b/types/tree.d.ts
@@ -36,6 +36,7 @@ export interface TreeNode<K, D> {
   label: string;
   nextSibling: TreeNode<K, D> | null;
   previousSibling: TreeNode<K, D> | null;
+  isCurrent: boolean;
 }
 
 /** incomplete, you can convert to any to use other properties */
@@ -44,7 +45,7 @@ export interface TreeStore<K, D> {
 }
 
 /** Tree Component */
-export declare class ElTree<K = any, D = TreeData> extends ElementUIComponent {
+export declare class ElTree<K, D extends TreeData> extends ElementUIComponent {
   /** TreeStore */
   store: TreeStore<K, D>;
 
@@ -209,7 +210,8 @@ export declare class ElTree<K = any, D = TreeData> extends ElementUIComponent {
   setCurrentKey(key: K): void;
 
   /**
-   * Return the highlight node (null if no node is highlighted)
+   * Return the highlight node data (null if no node is highlighted)
+   * @todo the name of methods should be getCurrentNodeData
    */
   getCurrentNode(): D;
 
diff --git a/types/upload.d.ts b/types/upload.d.ts
index 65396958282..525fc36846e 100644
--- a/types/upload.d.ts
+++ b/types/upload.d.ts
@@ -30,7 +30,7 @@ export interface ElUploadProgressEvent extends ProgressEvent {
 export interface HttpRequestOptions {
   headers: object,
   withCredentials: boolean,
-  file: ElUploadInternalFileDetail,
+  file: File,
   data: object,
   filename: string,
   action: string,
@@ -75,13 +75,13 @@ export declare class ElUpload extends ElementUIComponent {
   onRemove: (file: ElUploadInternalFileDetail, fileList: ElUploadInternalFileDetail[]) => void
 
   /** Hook function when uploaded successfully */
-  onSuccess: (response: any, file: ElUploadInternalFileDetail, fileList: ElUploadInternalFileDetail) => void
+  onSuccess: (response: any, file: ElUploadInternalFileDetail, fileList: ElUploadInternalFileDetail[]) => void
 
   /** Hook function when some errors occurs */
-  onError: (err: ErrorEvent, file: ElUploadInternalFileDetail, fileList: ElUploadInternalFileDetail) => void
+  onError: (err: ErrorEvent, file: ElUploadInternalFileDetail, fileList: ElUploadInternalFileDetail[]) => void
 
   /** Hook function when some progress occurs */
-  onProgress: (event: ElUploadProgressEvent, file: ElUploadInternalFileDetail, fileList: ElUploadInternalFileDetail) => void
+  onProgress: (event: ElUploadProgressEvent, file: ElUploadInternalFileDetail, fileList: ElUploadInternalFileDetail[]) => void
 
   /** Hook function when file status change */
   onChange: (file: ElUploadInternalFileDetail, fileList: ElUploadInternalFileDetail[]) => void
diff --git a/vetur-helper/element-attributes.json b/vetur-helper/element-attributes.json
new file mode 100644
index 00000000000..0b4e5b3ba6d
--- /dev/null
+++ b/vetur-helper/element-attributes.json
@@ -0,0 +1,465 @@
+{
+  "gutter": {"description": "grid spacing"},
+  "justify": {"options": ["start", "end", "center", "space-around", "space-between"], "description": "horizontal alignment of flex layout"},
+  "tag": {"description": "custom element tag"},
+  "span": {"description": "number of column the grid spans"},
+  "push": {"description": "number of columns that grid moves to the right"},
+  "pull": {"description": "number of columns that grid moves to the left"},
+  "xs": {"description": "<768px Responsive columns or column props object"},
+  "sm": {"description": "≥768px Responsive columns or column props object"},
+  "md": {"description": "≥992 Responsive columns or column props object"},
+  "lg": {"description": "≥1200 Responsive columns or column props object"},
+  "xl": {"version": ">=2.0.0", "description": "≥1200px Responsive columns or column props object, version >= 2"},
+  "native-type": {"options": ["button", "submit", "reset"], "description": "same as native button's type"},
+  "name": {"description": "native 'name' attribute"},
+  "fill": {"description": "border and background color when button is active"},
+  "true-label": {"description": "value of the checkbox if it's checked"},
+  "false-label": {"description": "value of the checkbox if it's not checked"},
+  "size": {"options": ["medium", "small", "mini"]},
+  "maxlength": {"description": "maximum Input text length"},
+  "minlength": {"description": "minimum Input text length"},
+  "rows": {"description": "number of rows of textarea, only works when type is 'textarea'"},
+  "autosize": {"description": "whether textarea has an adaptive height, only works when type is 'textarea'. Can accept an object, e.g. { minRows: 2, maxRows: 6 }"},
+  "auto-complete": {"options": ["one", "off"]},
+  "form": {"description": "same as 'form' in native input"},
+  "custom-item": {"version": "<2.0.0", "description": "component name of your customized suggestion list item"},
+  "fetch-suggestions": {"description": "a method to fetch input suggestions. When suggestions are ready, invoke callback(data:[]) to return them to Autocomplete"},
+  "trigger-on-focus": {"description": "whether show suggestions when input focus"},
+  "on-icon-click": {"description": "hook function when clicking on the input icon"},
+  "debounce": {"description": "debounce delay when typing, in millisecond"},
+  "multiple-limit": {"description": "maximum number of options user can select when multiple is true. No limit when set to 0"},
+  "loading-text": {"description": "displayed text while loading data from server"},
+  "no-match-text": {"description": "displayed text when no data matches the filtering query"},
+  "no-data-text": {"description": "displayed text when there is no options"},
+  "expand-trigger": {"options": ["click", "hover"], "description": "trigger mode of expanding current item"},
+  "show-all-levels": {"description": "whether to display all levels of the selected value in the input"},
+  "theme": {"version": "<2.0.0", "options": ["light", "dark"], "description": "theme color, default: light"},
+  "on-text": {"version": "<2.0.0", "description": "text displayed when in on state, version < 2"},
+  "off-text": {"version": "<2.0.0", "description": "text displayed when in off state, version < 2"},
+  "on-value": {"version": "<2.0.0", "description": "switch value when in on state, default: true, version < 2"},
+  "off-value": {"version": "<2.0.0", "description": "switch value when in off state, default: false, version < 2"},
+  "on-color": {"version": "<2.0.0", "description": "background color when in on state, default: #20A0FF, version < 2"},
+  "off-color": {"version": "<2.0.0", "description": "background color when in off state, default: #C0CCDA, version < 2"},
+  "active-text": {"version": ">=2.0.0", "description": "text displayed when in on state, version >= 2"},
+  "inactive-text": {"version": ">=2.0.0", "description": "text displayed when in off state, version >= 2"},
+  "active-value": {"version": ">=2.0.0", "description": "switch value when in on state, default: true, version >= 2"},
+  "inactive-value": {"version": ">=2.0.0", "description": "switch value when in off state, default: false, version >= 2"},
+  "active-color": {"version": ">=2.0.0", "description": "background color when in on state, default: #409EFF, version >= 2"},
+  "inactive-color": {"version": ">=2.0.0", "description": "background color when in off state, default: #C0CCDA, version >= 2"},
+  "controls-position": {"version": ">=2.0.0", "options": ["right"], "description": "position of the control buttons"},
+  "tabindex": {"version": ">2.0.10", "description": "input tabindex"},
+  "tooltip-class": {"version": ">=2.2.1", "description": "custom class name for the tooltip"},
+  "predefine": {"version": ">=2.3.0", "description": "predefined color options, type: array"},
+  "allow-drag": {"version": ">=2.3.0", "description": "this function will be executed before dragging a node. If false is returned, the node can not be dragged, type: Function"},
+  "allow-drop": {"version": ">=2.3.0", "description": "this function will be executed before the dragging node is dropped. If false is returned, the dragging node can not be dropped at the target node, type: Function"},
+  "format": {"description": "year yyyy month MM day dd, hour HH, minute mm, second ss, default: yyyy-MM-dd"},
+  "range-separator": {"description": "default: '-'"},
+  "default-value": {"description": "optional default time of the picker, type: Date"},
+  "action": {"description": "required, upload URL"},
+  "headers": {"description": "request headers"},
+  "accept": {"description": "accepted file types, will not work when thumbnail-mode is true"},
+  "on-preview": {"description": "hook function when clicking the uploaded files, type: function(file)"},
+  "on-remove": {"description": "hook function when files are removed, type: function(file, fileList)"},
+  "on-success": {"description": "hook function when uploaded successfully, type: function(response, file, fileList)"},
+  "on-error": {"description": "hook function when some errors occurs, type: function(err, file, fileList)"},
+  "on-progress": {"description": "hook function when some progress occurs, type: function(event, file, fileList)"},
+  "on-change": {"description": "hook function when select file or upload file success or upload file fail, type: function(file, fileList)"},
+  "before-upload": {"description": "hook function before uploading with the file to be uploaded as its parameter. If false is returned or a Promise is returned and then is rejected, uploading will be aborted, type: function(file)"},
+  "before-remove": {"version": ">=2.0.9", "description": "hook function before removing a file with the file and file list as its parameters. If false is returned or a Promise is returned and then is rejected, removing will be aborted. type: function(file, fileList)"},
+  "file-list": {"description": "default uploaded files, e.g. [{name: '*.jpeg', url: '*'}]"},
+  "list-type": {"options": ["text", "picture", "picture-card"],"description": "type of fileList, default: 'text'"},
+  "http-request": {"description": "override default xhr behavior, allowing you to implement your own upload-file's request"},
+  "low-threshold": {"description": "hreshold value between low and medium level. The value itself will be included in low level, default: 2"},
+  "high-threshold": {"description": "threshold value between medium and high level. The value itself will be included in high level, default: 4"},
+  "colors": {"description": "color array for icons. It should have 3 elements, each of which corresponds with a score level, default: ['#F7BA2A', '#F7BA2A', '#F7BA2A']"},
+  "void-color": {"description": "color of unselected icons, default: #C6D1DE"},
+  "disabled-void-color": {"description": "color of unselected read-only icons, default: #EFF2F7"},
+  "texts": {"description": "text array"},
+  "text-template": {"version": "<2.0.0", "description": "text template when the component is read-only, default: {value}"},
+  "score-template": {"version": ">=2.0.0", "description": "score template, default: {value}"},
+  "color-format": {"options": ["hsl", "hsv", "hex", "rgb"], "description": "color format of v-model, default: hex(when show-alpha is false)/rgb(when show-alpha is true)"},
+  "titles": {"description": "custom list titles, default: ['List 1', 'List 2']"},
+  "button-texts": {"description": "custom button texts, default: []"},
+  "render-content": {"description": "custom render function for data items"},
+  "left-default-checked": {"description": "key array of initially checked data items of the left list, default: []"},
+  "right-default-checked": {"description": "key array of initially checked data items of the right list, default: []"},
+  "model": {"description": "data of form component, type: object"},
+  "rules": {"description": "validation rules of form"},
+  "label-position": {"options": ["left", "right", "top"], "description": "position of label, default: 'right'"},
+  "error": {"description": "field error message, set its value and the field will validate error and show this message immediately"},
+  "current-row-key": {"description": "key of current row, a set only prop"},
+  "row-class-name": {"description": "function that returns custom class names for a row, or a string assigning class names for every row"},
+  "prev-text": {"version": ">=2.0.0", "description": "text for the prev button"},
+  "next-text": {"version": ">=2.0.0", "description": "text for the next button"},
+  "header-row-class-name": {"version": ">=2.0.0", "description": "function that returns custom class names for a row in table header, or a string assigning class names for every row in table header"},
+  "header-row-style": {"version": ">=2.0.0", "description": "function that returns custom style for a row in table header, or an object assigning custom style for every row in table header"},
+  "header-cell-class-name": {"version": ">=2.0.0", "description": "function that returns custom class names for a cell in table header, or a string assigning class names for every cell in table header"},
+  "header-cell-style": {"version": ">=2.0.0", "description": "function that returns custom style for a cell in table header, or an object assigning custom style for every cell in table header"},
+  "cell-class-name": {"version": ">=2.0.0", "description": "function that returns custom class names for a cell, or a string assigning class names for every cell"},
+  "cell-style": {"version": ">=2.0.0", "description": "function that returns custom style for a cell, or an object assigning custom style for every cell"},
+  "row-style": {"description": "function that returns custom style for a row, or a string assigning custom style for every row"},
+  "row-key": {"description": "key of row data, used for optimizing rendering. Required if 'reserve-selection' is on"},
+  "expand-row-keys": {"description": "set expanded rows by this prop, prop's value is the keys of expand rows, you should set row-key before using this prop, type: Array"},
+  "default-sort": {"description": "set the default sort column and order. property prop is used to set default sort column, property order is used to set default sort order"},
+  "tooltip-effect": {"options": ["dark", "light"], "description": "tooltip 'effect' property"},
+  "sum-text": {"description": "displayed text for the first column of summary row, default: Sum"},
+  "summary-method": {"description": "custom summary method"},
+  "span-method": {"version": ">=2.0.0", "description": "method that returns rowspan and colspan"},
+  "column-key": {"description": "column's key. If you need to use the filter-change event, you need this attribute to identify which column is being filtered"},
+  "fixed": {"options": ["ture", "left", "right"], "description": "whether column is fixed at left/right. Will be fixed at left if 'true'"},
+  "render-header": {"description": "render function for table header of this column"},
+  "sort-method": {"description": "sorting method, works when 'sortable' is true. Should return a number, just like Array.sort, type: Function(a, b)"},
+  "sort-by": {"version": ">=2.0.2", "description": "specify which property to sort by, works when 'sortable' is true and 'sort-method' is undefined. If set to an Array, the column will sequentially sort by the next property if the previous one is equal, type: Function(row, index)/String/Array"},
+  "formatter": {"description": "function that formats content"},
+  "align": {"options": ["left", "center", "right"]},
+  "header-align": {"options": ["left", "center", "right"], "description": "alignment of the table header. If omitted, the value of the 'align' attribute will be applied"},
+  "label-class-name": {"description": "class name of the label of this column"},
+  "selectable": {"description": "function that determines if a certain row can be selected, works when type is 'selection' Function(row, index)"},
+  "filters": {"description": "an array of data filtering options. For each element in this array, 'text' and 'value' are required"},
+  "filter-placement": {"description": "placement for the filter dropdown"},
+  "filtered-value": {"description": "filter value for selected data, might be useful when table header is rendered with 'render-header'"},
+  "percentage": {"description": "percentage, required, default: 0"},
+  "stroke-width": {"description": "the width of progress bar, default: 6"},
+  "node-key": {"description": "unique identity key name for nodes, its value should be unique across the whole tree"},
+  "load": {"description": "method for loading subtree data"},
+  "current-node-key": {"description": "key of current node, a set only prop"},
+  "default-expanded-keys": {"description": "array of keys of initially expanded nodes"},
+  "default-checked-keys": {"description": "array of keys of initially checked nodes"},
+  "filter-node-method": {"description": "this function will be executed on each node when use filter method. if return 'false', tree node will be hidden."},
+  "indent": {"description": "horizontal indentation of nodes in adjacent levels in pixels, default: 16"},
+  "page-size": {"description": "item count of each page, default: 10"},
+  "total": {"description": "total item count"},
+  "page-count": {"description": "total page count. Set either 'total' or 'page-count' and pages will be displayed; if you need 'page-sizes', total is required"},
+  "current-page": {"description": "current page number, supports the .sync modifier, default: 1"},
+  "layout": {"options": ["sizes", "prev", "pager", "next", "jumper", "->", "total", "slot"], "description": "layout of Pagination, elements separated with a comma"},
+  "page-sizes": {"description": "options of item count per page, example: [10, 20]"},
+  "close-text": {"description": "customized close button text"},
+  "default-openeds": {"description": "array that contains keys of currently active sub-menus"},
+  "default-active": {"description": "index of currently active menu"},
+  "menu-trigger": {"description": "how sub-menus are triggered, only works when mode is 'horizontal', default: hover"},
+  "route": {"description": "Vue Router object"},
+  "activate-name": {"description": "name of the selected tab(deprecated)"},
+  "separator": {"description": "separator character, default: '/'"},
+  "to": {"description": "target route of the link, same as to of vue-router"},
+  "command": {"description": "a command to be dispatched to Dropdown's 'command' callback"},
+  "space": {"description": "the spacing of each step, will be responsive if omitted. Support percentage."},
+  "direction": {"options": ["vertical", "horizontal"], "description": "display direction, default: horizontal"},
+  "active": {"description": "current activation step"},
+  "process-status": {"options": ["wait", "process", "finish", "error", "success"], "description": "status of current step, default: process"},
+  "finish-status": {"options": ["wait", "process", "finish", "error", "success"], "description": "status of end step, default: finish"},
+  "top": {"description": "value for top of Dialog CSS, works when size is not full, default: 15%"},
+  "custom-class": {"description": "custom class names for Dialog"},
+  "before-close": {"description": "callback before Dialog closes, and it will prevent Dialog from closing"},
+  "effect": {"options": ["dark", "light"], "description": "Tooltip theme"},
+  "transition": {"description": "animation name, default: 'el-fade-in-linear'"},
+  "header": {"description": "Title of the card. Also accepts a DOM passed by slot#header"},
+  "body-style": {"description": "CSS style of body,type: object, default: {padding: '20px'}"},
+  "initial-index": {"description": "index of the initially active slide (starting from 0), default: 0"},
+  "interval": {"description": "interval of the auto loop, in milliseconds, default: 30000"},
+  "indicator-position": {"options": ["outside", "none"], "description": "position of the indicators"},
+  "arrow": {"options": ["always", "hover", "nerver"], "description": "when arrows are shown, default: hover"},
+  "menu-algin": {"version": "<2.0.0", "options": ["start", "end"], "description": "horizontal alignment, default: end"},
+  "placement": {"version": ">=2.0.0", "options": ["top", "top-start", "top-end", "bottom", "bottom-start", "bottom-end", "left", "left-start", "left-end", "right", "right-start", "right-end"], "description": "default: bottom"},
+  "value-key": {"description": "unique identity key name for value, required when value is an object"},  
+  "hide-after": {"description": "timeout in milliseconds to hide tooltip, default: 0"},
+  "separator-class": {"version": ">=2.0.0", "description": "iconfont-separator's class"},
+  "start-placeholder": {"version": ">=2.0.0", "description": "placeholder for the start time in range mode"},
+  "end-placeholder": {"version": ">=2.0.0", "description": "placeholder for the end time in range mode"},
+  "value-format": {"version": ">=2.0.0", "description": "optional, format of binding value. If not specified, the binding value will be a Date object"},
+  "tab-position": {"version": ">=2.0.0", "options": ["top", "right", "bottom", "left"], "description": "position of tabs, default: top"},
+  "on-exceed": {"version": ">=2.0.0", "description": "hook function when limit is exceeded"},
+  "show-timeout": {"description": "Delay time before show a dropdown, default: 250"},
+  "hide-timeout": {"description": "Delay time before hide a dropdown, default: 150"},
+  "default-time": {"description": "The time value to use when selecting date range, type: string[]"},
+  "target-order": {"version": ">=2.2.1", "options": ["original", "push", "unshift"], "description": "order strategy for elements in the target list. If set to 'original', the elements will keep the same order as the data source. If set to 'push', the newly added elements will be pushed to the bottom. If set to 'unshift', the newly added elements will be inserted on the top, default: original"},
+  "input-size": {"version": ">=2.2.1", "options": ["large", "medium", "small", "mini"], "description": "size of the input box, default: small"},
+  "el-submenu/show-timeout": {"version": ">=2.0.11", "description": "timeout before showing a sub-menu, default: 300"},
+  "el-submenu/hide-timeout": {"version": ">=2.0.11", "description": "timeout before hiding a sub-menu, default: 300"},
+  "el-input/on-icon-click": {"version": "<2.0.0", "description": "hook function when clicking on the input icon"},
+  "el-upload/limit": {"version": ">=2.0.0", "description": "maximum number of uploads allowed"},
+  "el-transfer/footer-format": {"version": "<2.0.0", "description": "texts for checking status in list footer"},
+  "el-transfer/format": {"version": ">=2.0.0", "description": "texts for checking status in list footer, default: { noChecked: '${total} items', hasChecked: '${checked}/${total} checked' }"},  
+  "el-dropdown/palcement": {"options": ["top", "top-start", "top-end", "bottom", "bottom-start", "bottom-end"], "description": "placement of pop menu, default: 'bottom-end"},
+  "el-menu/background-color": {"version": ">=2.0.0", "description": "background color of Menu (hex format), default: #ffffff"},
+  "el-menu/text-color": {"version": ">=2.0.0", "description": "text color of Menu (hex format), default: #2d2f33"},
+  "el-menu/active-text-color": {"version": ">=2.0.0", "description": "text color of currently active menu item (hex format), default: #409EFF"},
+  "el-tooltip/content": {"description": "display content, can be overridden by slot#content"},
+  "el-popover/content": {"description": "popover content, can be replaced with a default slot"},
+  "el-dropdown/trigger": {"options": ["hover", "click"], "description": "default: hover"},
+  "el-carousel/trigger": {"options": ["hover", "click"], "description": "default: hover"},
+  "el-popover/trigger": {"options": ["click", "focus", "hover", "manual"], "description": "how the popover is triggered, default: click"},
+  "el-tabs/name": {"description": "identifier corresponding to the activeName of Tabs, representing the alias of the tab-pane"},
+  "el-tabs/index": {"description": "name of the selected tab"},
+  "el-menu/model": {"options": ["horizontal", "vertical"], "description": "menu display mode"},
+  "el-tree/render-content": {"description": "render function for tree node"},
+  "el-step/status": {"options": ["wait", "process", "finish", "error", "success"], "description": "current status. It will be automatically set by Steps if not configured."},
+  "el-progress/status": {"options": ["success", "exception"], "description": "the current status of progress bar"},
+  "el-table-column/min-width": {"description": "column minimum width. Columns with width has a fixed width, while columns with min-width has a width that is distributed in proportion"},
+  "el-table/empty-text": {"description": "Displayed text when data is empty. You can customize this area with slot='empty'"},
+  "el-tree/empty-text": {"description": "text displayed when data is void"},
+  "el-form-item/prop": {"description": "a key of model. In the use of validate and resetFields method, the attribute is required"},
+  "el-table-column/prop": {"description": "field name. You can also use its alias: property"},
+  "el-row/align": {"options": ["top", "middle", "bottom"], "description": "vertical alignment of flex layout"},
+  "el-row/offset": {"description": "number of spacing on the left side of the grid"},
+  "el-tooltip/offset": {"description": "offset of the Tooltip, default: 0"},
+  "el-carousel-item/name": {"description": "name of the item, can be used in 'setActiveItem'"},
+  "el-collapse/name": {"description": "unique identification of the panel"},
+  "el-switch/name": {"description": "input name of Switch"},
+  "el-upload/name": {"description": "key name for uploaded file, default: 'file'"},
+  "el-input/resize": {"options": ["none", "both", "horizontal", "vertical"], "description": "control the resizability"},
+  "el-input/step": {"description": "same as step in native input"},
+  "el-input-number/step": {"description": "incremental step"},
+  "el-switch/step": {"description": "step size, default: 1"},
+  "el-carousel/type": {"options": ["card"], "description": "type of the Carousel"},
+  "el-dropdown/type": {"description": "menu button type, refer to Button Component, only works when 'split-button' is true"},
+  "el-tabs/type": {"options": ["card", "border-card"], "description": "type of Tab"},
+  "el-progress/type": {"options": ["line", "circle"], "description": "the type of progress bar, default: line"},
+  "el-row/type": {"options": ["flex"], "description": "layout mode, you can use 'flex', works in modern browsers"},
+  "el-input/type": {"description": "Same as the 'type' attribute of native input, except that it can be 'textarea'"},
+  "el-button/type": {"options": ["primary", "success", "warning", "danger", "info", "text"], "description": "button type"},
+  "el-date-picker/type": {"options": ["year", "month", "date", "week", "datetime", "datetimerange", "daterange"], "description": "type of the picker, default: date"},
+  "el-table-column/type": {"options": ["selection", "index", "expand"], "description": "type of the column. If set to 'selection', the column will display checkbox. If set to 'index', the column will display index of the row (staring from 1). If set to 'expand', the column will display expand icon."},
+  "el-tag/type": {"options": ["info", "success", "warning", "danger"], "description": "theme"},
+  "el-alert/type": {"options": ["success", "warning", "info", "danger"], "description": "component type"},
+  "el-checkbox-group/min": {"description": "minimum number of checkbox checked"},
+  "el-input-number/min": {"description": "the minimum allowed value"},
+  "el-slider/min": {"description": "minimum value, defalult: 0"},
+  "el-slider/max": {"description": "maximum value, defalult: 100"},
+  "el-slider/debounce": {"description": "debounce delay when typing, in millisecond, works when 'show-input' is true, default: 300"},
+  "el-autocomplete/debounce": {"version": ">=2.0.0", "desciption": "debounce delay when typing, in milliseconds, default: 300"},
+  "el-rate/max": {"description": "max rating score, default: 5"},
+  "el-badge/max": {"description": "maximum value, shows '{max}+' when exceeded. Only works if 'value' is a Number"},
+  "el-checkbox-group/max": {"description": "maximum number of checkbox checked"},
+  "el-input-number/max": {"description": "the maximum allowed value"},
+  "el-slider/height": {"description": "Slider height, required in vertical mode"},
+  "el-table/height": {"description": "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"},
+  "el-table/max-height": {"description": "Table's max-height. The height of the table starts from 'auto' until it reaches the maxHeight limit. The 'maxHeight' is measured in pixels, same as 'heigh't"},
+  "el-time-select/value": {"description": "value of the picker, default: HH:mm:ss"},
+  "el-tooltip/open-delay": {"description": "delay of appearance, in millisecond, default: 0"},
+  "el-popover/open-delay": {"description": "delay of appearance when trigger is hover, in milliseconds"},
+  "el-time-select/picker-options": {
+    "options": ["start", "end", "step", "minTime", "maxTime"],
+    "description": "additional options, type is object"
+  },
+  "el-time-picker/picker-options": {
+    "options": ["format", "selectableRange"],
+    "description": "additional options, type is object"
+  },
+  "el-date-picker/picker-options": {
+    "options": ["shortcuts", "disabledDate", "firstDayOfWeek", "onPick"],
+    "description": "additional options, type is object"
+  },
+  "loading": {"type": "boolean"},
+  "disabled": {"type": "boolean"},
+  "autofocus": {"type": "boolean"},
+  "checked": {"type": "boolean"},
+  "controls": {"type": "boolean"},
+  "remote": {"type": "boolean"},
+  "auto-upload": {"type": "boolean"},
+  "show-message": {"type": "boolean"},
+  "hidden": {"type": "boolean"},
+  "visible-arrow": {"type": "boolean"},
+  "collapse-transition": {"version": ">2.3.0", "type": "boolean", "description": "whether to enable the collapse transition, default: true"},
+  "select-on-indeterminate": {"version": ">2.3.0", "type": "boolean", "description": "controls the behavior of master checkbox in multi-select tables when only some rows are selected (but not all). If true, all rows will be selected, else deselected. default: true"},
+  "popper-append-to-body": {"version": ">=2.2.0", "type": "boolean", "description": "whether to append the popper menu to body. If the positioning of the popper is wrong, you can try to set this prop to false, default: true"},
+  "validate-on-rule-change": {"type": "boolean", "description": "whether to trigger validation when the 'rules' prop is changed, default: true"},
+  "fullscreen": {"version": ">=2.0.0", "type": "boolean", "description": "whether the Dialog takes up full screen, default: false"},
+  "autoplay": {"type": "boolean", "description": "whether automatically loop the slides, default: true"},
+  "enterable": {"type": "boolean", "description": "enterable whether the mouse can enter the tooltip, default: true"},
+  "show-close": {"type": "boolean", "description": "whether to show a close button, default: true"},
+  "close-on-press-escape": {"type": "boolean", "description": "whether the Dialog can be closed by pressing ESC, default: true"},
+  "close-on-click-modal": {"type": "boolean", "description": "whether the Dialog can be closed by clicking the mask, default: true"},
+  "lock-scroll": {"type": "boolean", "description": "whether scroll of body is disabled while Dialog is displayed, default: true"},
+  "modal-append-to-body": {"type": "boolean", "description": "whether to append modal to body element. If false, the modal will be appended to Dialog's parent element, default: true"},
+  "append-to-body": {"version": ">=2.0.0", "type": "boolean", "description": "whether to append Dialog itself to body. A nested Dialog should have this attribute set to 'true', default: false"},
+  "modal": {"type": "boolean", "description": "whether a mask is displayed, default: true"},
+  "visible": {"type": "boolean", "description": "visibility of Dialog, supports the '.sync' modifier, default: false"},
+  "hide-on-click": {"type": "boolean", "description": "whether to hide menu after clicking menu-item"},
+  "split-button": {"type": "boolean", "description": "whether a button group is displayed"},
+  "replace": {"type": "boolean", "description": "if 'true', the navigation will not leave a history record, default: false"},
+  "auto-expand-parent": {"type": "boolean", "description": "whether to expand father node when a child node is expanded, default: true"},
+  "expand-on-click-node": {"type": "boolean", "description": "whether to expand or collapse node when clicking on the node, if false, then expand or collapse node only when clicking on the arrow icon, default: true"},
+  "filter-multiple": {"type": "boolean", "description": "whether data filtering supports multiple options"},
+  "shwo-header": {"type": "boolean", "description": "whether table header is visible"},
+  "fit": {"type": "boolean", "description": "whether width of column automatically fits its container"},
+  "inline": {"type": "boolean", "description": "whether the form is inline"},
+  "indeterminate": {"type": "boolean", "description": "same as indeterminate in native checkbox"},
+  "plain": {"type": "boolean", "description": "determine whether it's a plain button"},
+  "allow-half": {"type": "flag", "description": "whether picking half start is allowed"},
+  "thumbnail-mode": {"type": "boolean", "description": "whether thumbnail is displayed, default: false"},
+  "show-upload-list": {"type": "boolean", "description": "whether to show the uploaded file list, default: true"},
+  "vertical": {"type": "boolean", "description": "defaults: false"},
+  "collapse": {"type": "boolean", "description": "whether the menu is collapsed (available only in vertical mode)"},
+  "el-tooltip/vavlue": {"type": "boolean", "description": "visibility of Tooltip, default: false"},
+  "el-collapse/accordion": {"type": "boolean", "description": "whether to activate accordion mode, default: false"},
+  "el-tree/accordion": {"type": "boolean", "description": "whether only one node among the same level can be expanded at one time, default: false"},
+  "el-button/round": {"version": ">=2.0.0", "type": "boolean", "description": "determine whether it's a round button, default: false"},
+  "change": {"type": "method"},
+  "select": {"type": "method"},
+  "click": {"type": "method"},
+  "blur": {"type": "method"},
+  "focus": {"type": "method"},
+  "method": {"type": "method"},
+  "visible-change": {"type": "method"},
+  "remove-tag": {"type": "method"},
+  "szie-change": {"type": "method"},
+  "close": {"type": "method"},
+  "open": {"type": "method"},
+  "active-change": {"type": "method"},
+  "el-input/click": {"version": "<2.0.0", "type": "method"},
+  "el-menu/open": {"version": ">=2.0.0", "type": "method"},
+  "el-menu/close": {"version": ">=2.0.0", "type": "method"},
+  "check": {"version": ">=2.2.0", "type": "method", "description": "triggers after clicking the checkbox of a node"},
+  "show": {"type": "method", "description": "triggers when popover shows"},
+  "hide": {"type": "method", "description": "triggers when popover hides"},
+  "tab-click": {"type": "method", "description": "triggers when a tab is clicked"},
+  "tab-remove": {"type": "method", "description": "triggers when tab-remove button is clicked"},
+  "tab-add": {"type": "method", "description": "triggers when tab-add button is clicked"},
+  "edit": {"type": "method", "description": "triggers when tab-add button or tab-remove is clicked"},
+  "node-expand": {"type": "method", "description": "triggers when current node open"},
+  "node-collapse": {"type": "method", "description": "triggers when current node close"},
+  "node-click":  {"type": "method", "description": "triggers when a node is clicked"},
+  "node-contextmenu": {"type": "method", "version": ">=2.2.0", "description": "triggers when a node is clicked by right button"},
+  "check-change":  {"type": "method", "description": "triggers when the selected state of the node changes"},
+  "active-item-change": {"type": "method", "description": "triggers when active option changes, only works when 'change-on-select' is 'false'"},
+  "select-all": {"type": "method", "description": "triggers when user clicks the checkbox in table header, arg: selection"},
+  "selection-change": {"type": "method", "description": "triggers when selection changes, arg: selection"},
+  "cell-mouse-enter": {"type": "method", "description": "triggers when hovering into a cell, arg: row, column, cell, event"},
+  "cell-mouse-leave": {"type": "method", "description": "triggers when hovering out of a cell, arg: row column, cell, event"},
+  "cell-click": {"type": "method", "description": "triggers when clicking a cell, arg: row, column, cell, event"},
+  "cell-dbclick": {"type": "method", "description": "triggers when double clicking a cell, arg: row, column, cell, event"},
+  "row-click": {"type": "method", "description": "triggers when clicking a row, arg: row, event, column"},
+  "row-contextmenu": {"type": "method", "description": "triggers when user right clicks on a row, arg: row, event"},
+  "row-dbclick": {"type": "method", "description": "triggers when double clicking a row, arg: row, event"},
+  "header-click": {"type": "method", "description": "triggers when clicking a column header, arg: column, event"},
+  "sort-change": {"type": "method", "description": "triggers when Table's sorting changes, arg: { column, prop, order }"},
+  "filter-change": {"type": "method", "description": "column's key. If you need to use the filter-change event, this attribute is mandatory to identify which column is being filtered, arg: filters"},
+  "current-change": {"type": "method", "description": "triggers when current row changes, arg: currentRow, oldCurrentRow"},
+  "header-draggend": {"type": "method", "description": "triggers when finish dragging header, arg: newWidth, oldWidth, column, event"},
+  "expand": {"version": "<2.0.0", "type": "method", "description": "triggers when user expands or collapses a row, arg: row, expanded"},
+  "expand-change": {"version": ">=2.0.0", "type": "method", "description": "triggers when user expands or collapses a row, arg: row, expanded"},
+  "left-check-change": {"version": ">=2.2.2", "type": "method", "description": "triggers when end user changes the checked state of any data item in the left list"},
+  "right-check-change": {"version": ">=2.2.2", "type": "method", "description": "triggers when end user changes the checked state of any data item in the right list"},
+  "node-drag-start": {"version": ">=2.3.0", "type": "method", "description": "triggers when dragging starts"},
+  "node-drag-enter": {"version": ">=2.3.0", "type": "method", "description": "triggers when the dragging node enters another node"},
+  "node-drag-leave": {"version": ">=2.3.0", "type": "method", "description": "triggers when the dragging node leaves a node"},
+  "node-drag-over": {"version": ">=2.3.0", "type": "method", "description": "triggers when dragging over a node (like mouseover event)"},
+  "node-drag-end": {"version": ">=2.3.0", "type": "method", "description": "triggers when dragging ends"},
+  "node-drop": {"version": ">=2.3.0", "type": "method", "description": "triggers after the dragging node is dropped"},
+  "validate": {"version": ">=2.3.0", "type": "method", "description": "triggers after a form item is validated"},
+  "el-table/select": {"type": "method", "description": "triggers when user clicks the checkbox in a row, arg: selection, row"},
+  "el-tag/close": {"type": "method", "description": "triggers when Tab is removed"},
+  "el-tree/current-change": {"type": "method", "description": "triggers when current node changes"},
+  "el-pagination/current-change": {"type": "method", "description": "triggers when 'current-page' changes"},
+  "el-dropdown/command": {"type": "method", "description": "triggers when a dropdown item is clicked"},
+  "el-input/clear": {"version": ">=2.2.2", "type": "method", "descriptino": "triggers when the Input is cleared by the button which generated by the 'clearable' attribute"},
+  "el-select/clear": {"type": "method", "descriptino": "triggers when the clear icon is clicked in a clearable Select"},
+  "el-popover/after-enter": {"version": ">=2.2.2", "type": "method", "description": "triggers when the entering transition ends"},
+  "el-popover/after-leave": {"version": ">=2.2.2", "type": "method", "description": "triggers when the leaving transition ends"},
+  "readonly": {"type": "flag"},
+  "multiple": {"type": "flag"},
+  "clearable": {"type": "flag"},
+  "filterable": {"type": "flag"},
+  "editable": {"type": "flag"},
+  "allow-create": {"type": "flag"},
+  "required": {"type": "flag"},
+  "show-text": {"type": "flag"},
+  "stripe": {"type": "flag"},
+  "border": {"type": "flag"},
+  "show-summary": {"type": "flag"},
+  "default-expand-all": {"type": "flag"},
+  "highlight-current-row": {"type": "flag"},
+  "highlight-current": {"type": "flag"},
+  "sortable": {"type": "flag"},
+  "closable": {"type": "flag"},
+  "small": {"type": "flag"},
+  "divided": {"type": "flag"},
+  "circle": {"version": ">=2.3.0", "type": "flag"},
+  "simple": {"version": ">=2.0.0", "type": "flag"},
+  "el-radio/border": {"version": ">=2.0.0", "type": "flag"},
+  "el-checkbox/border": {"version": ">=2.0.0", "type": "flag"},
+  "draggable": {"version": ">=2.3.0", "type": "flag", "description": "whether enable tree nodes drag and drop"},
+  "unlink-panels": {"version": ">=2.0.0", "type": "flag", "description": "unlink two date-panels in range-picker"},
+  "reserve-keyword": {"version": ">=2.0.0", "type": "flag", "description": "when 'multiple' and 'filter' is true, whether to reserve current keyword after selecting an option"},
+  "default-first-option": {"type": "flag", "description": "select first matching option on enter key. Use with 'filterable' or 'remote'"},
+  "arrow-control": {"version": ">=2.0.0", "type": "flag", "description": "whether to pick time using arrow buttons, only works with <el-time-picker>"},
+  "time-arrow-control": {"version": ">=2.0.0", "type": "flag", "description": "whether to pick time using arrow buttons"},
+  "status-icon": {"version": ">=2.0.0", "type": "flag", "descript": "whether to display an icon indicating the validation result"},
+  "select-when-unmatched": {"type": "flag", "description": "whether to emit a 'select' event on enter when there is no autocomplete match"},
+  "manual": {"type": "flag", "description": "whether to control Tooltip manually. mouseenter and mouseleave won't have effects if set to 'true', default: false"},
+  "align-center": {"type": "flag", "description": "whether step description is centered"},
+  "center": {"type": "flag", "description": "center whole Steps component"},
+  "router": {"type": "flag", "description": "whether vue-router mode is activated. If true, index will be used as 'path' to activate the route action"},
+  "unique-opened": {"type": "flag", "description": "whether only one sub-menu can be active"},
+  "show-icon": {"type": "flag", "description": "if a type icon is displayed"},
+  "is-dot": {"type": "flag", "description": "a little dot is displayed"},
+  "check-strictly": {"type": "flag", "description": "whether checked state of a node not affects its father and child nodes when 'show-checkbox' is 'true'"},
+  "show-checkbox": {"type": "flag", "description": "whether node is selectable"},
+  "text-inside": {"type": "flag", "description": "whether to place the percentage inside progress bar, only works when type is 'line'"},
+  "hit": {"type": "flag", "description": "whether Tag has a highlighted border"},
+  "close-transition": {"type": "flag", "description": "whether the removal animation is disabled"},
+  "reserve-selection": {"type": "flag", "description": "whether to reserve selection after data refreshing, works when type is 'selection'"},
+  "show-overflow-tooltip": {"type": "flag", "description": "whether to hide extra content and show them in a tooltip when hovering on the cell"},
+  "resizable": {"type": "flag", "description": "whether column width can be resized, works when border of 'el-table' is 'true'"},
+  "show-alpha": {"type": "flag", "description": "whether to display the alpha slider"},
+  "drag": {"type": "flag", "description": "whether to activate drag and drop mode"},
+  "with-credentials": {"type": "flag", "description": "whether cookies are sent"},
+  "change-on-select": {"type": "flag", "description": "whether selecting an option of any level is permitted"},
+  "show-input": {"type": "flag", "description": "whether to display an input box, works when 'range' is false, default: false"},
+  "show-input-controls": {"type": "flag", "description": "whether to display control buttons when 'show-input' is true, default: true"},
+  "show-stops": {"type": "flag", "description": "whether to display breakpoints, default: false"},
+  "show-tooltip": {"type": "flag", "description": "whether to display tooltip value, default: true"},
+  "range": {"type": "flag", "description": "whether to select a range"},
+  "show-score": {"version": ">=2.0.0", "type": "flag", "description": "whether to display current score. show-score and show-text cannot be true at the same time"},
+  "background": {"version": ">=2.0.6", "type": "flag", "description": "whether the buttons have a background color"},
+  "collapse-tags": {"version": ">=2.0.5", "type": "flag", "description": "whether to collapse tags to a text when multiple selecting"},
+  "el-dialog/center": {"version": ">=2.0.0", "type": "flag", "description": "whether to align the header and footer in center"},
+  "el-alert/center": {"type": "flag", "description": "whether to center the text"},
+  "e;-steps/center": {"version": "<2.0.0", "type": "flag", "description": "center whole 'Steps' component"},
+  "el-form/inline-message": {"version": ">=2.0.0", "type": "flag", "description": "whether to display the error message inline with the form item"},
+  "el-form-item/inline-message": {"version": ">=2.0.0", "type": "flag", "description": "inline style validate message"},
+  "format-tooltip": {},
+  "filter-method": {},
+  "remote-method": {},
+  "label": {},
+  "placeholder": {},
+  "max": {},
+  "min": {},
+  "popper-class": {},
+  "el-color-picker/popper-class": {"version": ">=2.0.0"},
+  "options": {},
+  "props": {},
+  "el-autocomplete/props": {"version": "<2.0.0"},
+  "value": {},
+  "width": {},
+  "height": {},
+  "data": {},
+  "index": {},
+  "text-color": {},
+  "filter-placeholder": {},
+  "label-width": {},
+  "label-suffix": {},
+  "class-name": {},
+  "color": {},
+  "title": {},
+  "description": {},
+  "popper-options": {},
+  "check-descendants": {"version": ">=2.0.0"},
+  "v-loading": {"global": true},
+  "element-loading-text": {"global": true},
+  "class": {"global": true, "type": "icon"},
+  "el-date-picker/prefix-icon": {"type": "icon", "version": ">=2.1.0", "description": "Custom prefix icon class, default: 'el-icon-date"},
+  "clear-icon": {"type": "icon", "version": ">=2.1.0", "description": "Custom clear icon class, default: 'el-icon-circle-close"},
+  "void-icon-class": {"type": "icon", "description": "class name of unselected icons, default: el-icon-star-off"},
+  "disabled-void-icon-class": {"type": "icon", "description": "class name of unselected read-only icons, default: el-icon-star-on"},
+  "icon-classes": {"type": "icon", "description": "array of class names of icons. It should have 3 elements, each of which corresponds with a score level, default: ['el-icon-star-on', 'el-icon-star-on','el-icon-star-on']"},
+  "on-icon-class": {"version": "<2.0.0", "type": "icon", "description": "class name of the icon displayed when in on state, overrides 'on-text', version < 2"},
+  "off-icon-class": {"version": "<2.0.0", "type": "icon", "description": "class name of the icon displayed when in off state, overrides 'off-text', version < 2"},
+  "active-icon-class": {"version": ">=2.0.0", "type": "icon", "description": "class name of the icon displayed when in on state, overrides 'active-text', version >= 2"},
+  "inactive-icon-class": {"version": ">=2.0.0", "type": "icon", "description": "class name of the icon displayed when in off state, overrides 'inactive-text', version >= 2"},
+  "prefix-icon": {"version": ">=2.0.0", "type":"flag", "description": "prefix icon class"},
+  "suffix-icon": {"version": ">=2.0.0", "type":"flag", "description": "suffix icon class"},
+  "icon": {"type": "shortcut-icon"},
+  "el-input/icon": {"version": "<2.0.0", "type": "shortcut-icon", "description": "icon name"},
+  "icons": ["el-icon-arrow-down", "el-icon-arrow-left","el-icon-arrow-right", "el-icon-arrow-up", "el-icon-caret-bottom", "el-icon-caret-left", "el-icon-caret-right", "el-icon-caret-top", "el-icon-check", "el-icon-circle-check", "el-icon-circle-cross", "el-icon-close", "el-icon-upload", "el-icon-d-arrow-left", "el-icon-d-arrow-right", "el-icon-d-caret", "el-icon-date", "el-icon-delete", "el-icon-document", "el-icon-edit", "el-icon-information", "el-icon-loading", "el-icon-menu", "el-icon-message", "el-icon-minus", "el-icon-more", "el-icon-picture", "el-icon-plus", "el-icon-search", "el-icon-setting", "el-icon-share", "el-icon-star-off", "el-icon-star-on", "el-icon-time", "el-icon-warning", "el-icon-delete2", "el-icon-upload2", "el-icon-view"]
+}
diff --git a/vetur-helper/element-tags.json b/vetur-helper/element-tags.json
new file mode 100644
index 00000000000..1d1c5033287
--- /dev/null
+++ b/vetur-helper/element-tags.json
@@ -0,0 +1,257 @@
+{
+  "el-row": {
+    "attributes": ["gutter", "type", "justify", "align", "tag"],
+    "subtags": ["el-col"],
+    "description": "A row in grid system"
+  },
+  "el-col": {
+    "attributes": ["span", "offset", "push", "pull", "xs", "sm", "md", "lg", "xl", "tag"],
+    "defaults": [":span"],
+    "description": "A column in grid system"
+  },
+  "el-button": {
+    "attributes": ["type", "size", "plain", "loading", "disabled", "icon", "autofocus", "native-type", "round", "circle"],
+    "defaults": ["type"],
+    "description": "Commonly used button."
+  },
+  "el-radio": {
+    "attributes": ["label", "disabled", "border", "size", "name"],
+    "defaults": ["label"],
+    "description": "Single selection among multiple options."
+  },
+  "el-radio-group": {
+    "attributes": ["size", "fill", "text-color", "change"],
+    "defaults": ["v-model"],
+    "subtags": ["el-radio"]
+  },
+  "el-radio-button": {
+    "attributes": ["label", "disabled"],
+    "defaults": ["label"]
+  },
+  "el-checkbox": {
+    "attributes": ["label", "true-label", "false-label", "border", "size", "name", "checked", "indeterminate", "disabled"],
+    "defaults": ["label"],
+    "description": "A group of options for multiple choices."
+  },
+  "el-checkbox-group": {
+    "attributes": ["size", "fill", "text-color", "min", "max", "change"],
+    "defaults": ["v-model"],
+    "subtags": ["el-checkbox"]
+  },
+  "el-checkbox-button": {
+    "attributes": ["label"],
+    "defaults": ["label"]
+  },
+  "el-input": {
+    "attributes": ["type", "value", "maxlength", "minlength", "placeholder", "disabled", "size", "icon", "prefix-icon", "suffix-icon", "rows", "autosize", "auto-complete", "name", "readonly", "max", "min", "step", "resize", "autofocus", "form", "label", "tabindex", "clearable", "on-icon-click", "click", "blur", "focus", "change", "clear"],
+    "defaults": ["v-model", "placeholder"],
+    "description": "Input data using mouse or keyboard."
+  },
+  "el-autocomplete": {
+    "attributes": ["value", "debounce", "placeholder", "disabled", "props", "custom-item", "icon", "fetch-suggestions", "popper-class", "trigger-on-focus", "on-icon-click", "select-when-unmatched", "label", "prefix-icon", "suffix-icon", "select"],
+    "defaults": ["v-model", "placeholder"]
+  },
+  "el-input-number": {
+    "attributes": ["value", "min", "max", "step", "size", "disabled", "controls-position", "controls", "debounce", "change"],
+    "defaults": ["v-model", "placeholder"]
+  },
+  "el-select": {
+    "attributes": ["multiple", "disabled", "value-key", "size", "clearable", "collapse-tags", "multiple-limit", "name", "auto-complete", "placeholder", "filterable", "allow-create", "filter-method", "remote", "remote-method", "loading", "loading-text", "no-match-text", "no-data-text", "popper-class", "reserve-keyword", "default-first-option", "popper-append-to-body", "change", "visible-change", "remote-tag", "clear", "blur", "focus"],
+    "defaults": ["v-model", "placeholder"],
+    "subtags": ["el-option"],
+    "description": "When there are plenty of options, use a drop-down menu to display and select desired ones."
+  },
+  "el-option-group": {
+    "attributes": ["label", "disabled"],
+    "defaults": ["v-for", ":key"],
+    "subtags": ["el-option"]
+  },
+  "el-option": {
+    "attributes": ["value", "label", "disabled"],
+    "defaults": ["v-for", ":key"]
+  },
+  "el-cascader": {
+    "attributes": ["options", "props", "value", "separator", "popper-class", "placeholder", "disabled", "clearable", "expand-trigger", "show-all-levels", "filterable", "debounce", "change-on-select", "size", "change", "active-item-change", "blur", "focus"],
+    "defaults": [":options", "v-model"],
+    "description": "If the options have a clear hierarchical structure, Cascader can be used to view and select them."
+  },
+  "el-switch": {
+    "attributes": ["disabled", "width", "active-icon-class", "inactive-icon-class", "active-text", "inactive-text", "active-value", "inactive-value", "active-color", "inactive-color", "on-icon-class", "off-icon-class", "on-text", "off-text", "on-value", "off-value", "on-color", "off-color", "name", "change"],
+    "defaults": ["v-model"],
+    "description": "Switch is used for switching between two opposing states."
+  },
+  "el-slider": {
+    "attributes": ["min", "max", "disabled", "step", "show-input", "show-input-controls", "input-size", "show-stops", "show-tooltip", "format-tooltip", "range", "vertical", "height", "debounce", "tooltip-class", "change"],
+    "defaults": ["v-model"],
+    "description": "Drag the slider within a fixed range."
+  },
+  "el-time-select": {
+    "attributes": ["readonly", "editable", "disabled", "clearable", "size", "placeholder", "value", "align", "popper-class", "picker-options", "vertical", "height", "change"],
+    "defaults": ["v-model", "placeholder"]
+  },
+  "el-time-picker": {
+    "attributes": ["readonly", "editable", "disabled", "clearable", "size", "placeholder", "start-placeholde", "end-placeholde", "value", "align", "picker-options", "range-separator", "popper-class", "is-range", "arrow-control", "value-format", "default-value", "change", "blur", "focus"],
+    "defaults": ["v-model", "placeholder"]
+  },
+  "el-date-picker": {
+    "attributes": ["readonly", "editable", "disabled", "clearable", "size", "placeholder", "start-placeholde", "end-placeholde", "time-arrow-control", "type", "format", "align", "popper-class", "picker-options", "range-separator", "default-value", "default-time", "value-format", "name", "unlink-panels", "prefix-icon", "clear-icon", "change"],
+    "defaults": ["v-model", "placeholder"]
+  },
+  "el-upload": {
+    "attributes": ["action", "headers", "multiple", "data", "name", "width", "name", "with-credentials", "show-file-list", "drag", "accept", "on-preview", "on-remove", "on-success", "on-error", "on-progress", "on-change", "before-upload", "before-remove", "list-type", "auto-upload", "file-list", "http-request", "disabled", "limit", "on-exceed"],
+    "defaults": ["action"],
+    "subtags": ["el-button"],
+    "description": "Upload files by clicking or drag-and-drop"
+  },
+  "el-rate": {
+    "attributes": ["max", "disabled", "allow-half", "low-threshold", "high-threshold", "colors", "void-color", "disabled-void-color", "icon-classes", "void-icon-class", "disabled-void-icon-class", "show-text", "show-score", "text-color", "texts", "score-template", "change"],
+    "defaults": ["v-model"],
+    "description": "Used for rating"
+  },
+  "el-color-picker": {
+    "attributes": ["disabled", "size", "show-alpha", "color-format", "popper-class", "predefine", "change", "active-change"],
+    "defaults": ["v-model"]
+  },
+  "el-transfer": {
+    "attributes": ["data", "filterable", "filter-placeholder", "filter-method", "target-order", "titles", "button-texts", "render-content", "format", "props", "left-default-checked", "right-default-checked", "change", "left-check-change", "right-check-change"],
+    "defaults": ["v-model", ":data"]
+  },
+  "el-form": {
+    "attributes": ["model", "rules", "inline", "label-position", "label-width", "label-suffix", "show-message", "inline-message", "status-icon", "validate-on-rule-change", "size", "disabled", "validate"],
+    "defaults": [":model"],
+    "subtags": ["el-form-item"],
+    "description": "Form consists of `input`, `radio`, `select`, `checkbox` and so on. With form, you can collect, verify and submit data."
+  },
+  "el-form-item": {
+    "attributes": ["label", "prop", "label-width", "required", "rules", "error", "show-message", "inline-message", "size"],
+    "defaults": ["label"]
+  },
+  "el-table": {
+    "attributes": ["data", "height", "max-height", "stripe", "border", "fit", "show-header", "highlight-current-row", "current-row-key", "row-class-name", "cell-class-name", "cell-style", "header-row-class-name", "header-row-style", "header-cell-name", "header-cell-style", "row-style", "row-key", "empty-text", "default-expand-all", "expand-row-keys", "default-sort", "tooltip-effect", "show-summary", "sum-text", "summary-method", "span-method", "select-on-indeterminate", "select", "select-all", "selection-change", "cell-mouse-enter", "cell-mouse-leave", "cell-click", "cell-dbclick", "row-click", "row-contextmenu", "row-dbclick", "header-click", "sort-change", "filter-change", "current-change", "header-draggend", "expand", "expand-change"],
+    "defaults": [":data"],
+    "subtags": ["el-table-column"],
+    "description": "Display multiple data with similar format. You can sort, filter, compare your data in a table."
+  },
+  "el-table-column": {
+    "attributes": ["type", "column-key", "index", "label", "prop", "width", "min-width", "fixed", "render-header", "sortable", "sort-method", "sort-by", "resizable", "formatter", "show-overflow-tooltip", "align", "header-align", "class-name", "label-class-name", "selectable", "reserve-selection", "filters", "filter-placement", "filter-multiple", "filter-method", "filtered-value"],
+    "defaults": ["label"]
+  },
+  "el-tag": {
+    "attributes": ["type", "closable", "close-transition", "hit", "color", "size", "close"],
+    "defaults": ["type"],
+    "description": "Used for marking and selection."
+  },
+  "el-progress": {
+    "attributes": ["percentage", "type", "stroke-width", "text-inside", "status", "color", "width", "show-text"],
+    "defaults": ["percentage"],
+    "description": "Progress is used to show the progress of current operation, and inform the user the current status."
+  },
+  "el-tree": {
+    "attributes": ["data", "empty-text", "node-key", "props", "load", "render-content", "highlight-current", "current-node-key", "default-expand-all", "expand-on-click-node", "auto-expand-parent", "default-expanded-keys", "show-checkbox", "check-strictly", "default-checked-keys", "filter-node-method", "accordion", "indent", "check-descendants", "draggable", "allow-drag", "allow-drop", "node-click", "node-contextmenu", "check-change", "check", "current-change", "node-expand", "node-collapse", "node-drag-start", "node-drag-enter", "node-drag-leave", "node-drag-over", "node-drag-end", "node-drop"],
+    "defaults": [":data"],
+    "description": "Display a set of data with hierarchies."
+  },
+  "el-pagination": {
+    "attributes": ["small", "background", "page-size", "total", "page-count", "current-page", "layout", "page-sizes", "popper-class", "prev-text", "next-text", "disabled", "size-change", "current-page"],
+    "defaults": [":total", ":current-page", ":page-size", "@current-change", "layout"],
+    "description": "If you have too much data to display in one page, use pagination."
+  },
+  "el-badge": {
+    "attributes": ["value", "max", "is-dot", "hidden"],
+    "defaults": ["value"],
+    "description": "A number or status mark on buttons and icons."
+  },
+  "el-alert": {
+    "attributes": ["title", "type", "description", "closable", "center", "close-text", "show-icon", "close"],
+    "defaults": ["type", "title"],
+    "description": "Displays important alert messages."
+  },
+  "el-menu": {
+    "attributes": ["mode", "collapse", "background-color", "text-color", "active-text-color", "theme", "default-active", "default-openeds", "unique-opened", "menu-trigger", "router", "collapse-transition", "select", "open", "close"],
+    "defaults": ["default-active"],
+    "subtags": ["el-submenu", "el-menu-item"]
+  },
+  "el-submenu": {
+    "attribute": ["index", "popper-class", "show-timeout", "hide-timeout", "disabled"],
+    "defaults": ["index"],
+    "subtags": ["el-menu-item"]
+  },
+  "el-menu-item-group": {
+    "attributes": ["title"],
+    "subtags": ["el-menu-item"]
+  },
+  "el-menu-item": {
+    "attributes": ["index", "route", "disabled"],
+    "defaults": ["index"]
+  },
+  "el-tabs": {
+    "attributes": ["type", "closable", "addable", "editable", "value", "activate-name", "tab-position", "tab-click", "tab-remove", "tab-add", "edit"],
+    "subtags": ["el-tab-pane"],
+    "description": "Divide data collections which are related yet belong to different types."
+  },
+  "el-tab-pane": {
+    "attributes": ["label", "disabled", "name", "closable"]
+  },
+  "el-breadcrumb": {
+    "attributes": ["separator", "separator-class"],
+    "defaults": ["separator"],
+    "subtags": ["el-breadcrumb-item"],
+    "description": "Displays the location of the current page, making it easier to browser back."
+  },
+  "el-breadcrumb-item": {
+    "attributes": ["to", "replace"]
+  },
+  "el-dropdown": {
+    "attributes": ["type", "szie", "split-button", "placement", "trigger", "hide-on-click", "show-timeout", "hide-timeout", "click", "command", "visible-change"],
+    "subtags": ["el-dropdown-menu"],
+    "description": "Toggleable menu for displaying lists of links and actions."
+  },
+  "el-dropdown-menu": {
+    "attributes": ["command", "disabled", "divided"]
+  },
+  "el-steps": {
+    "attributes": ["space", "direction", "active", "process-status", "finish-status", "align-center", "center", "simple"],
+    "defaults": [":space", ":active"],
+    "subtags": ["el-step"],
+    "description": "Guide the user to complete tasks in accordance with the process. Its steps can be set according to the actual application scenario and the number of the steps can't be less than 2."
+  },
+  "el-step": {
+    "attributes": ["title", "description", "icon", "status"],
+    "defaults": ["title"]
+  },
+  "el-dialog": {
+    "attributes": ["title", "top", "visible", "width", "fullscreen", "modal", "modal-append-to-body", "append-to-body", "lock-scroll", "custom-class", "close-on-click-modal", "show-close", "before-close", "center", "close", "open"],
+    "defaults": ["title"],
+    "description": "Informs users while preserving the current page state."
+  },
+  "el-tooltip": {
+    "attributes": ["effect", "content", "placement", "value", "disabled", "offset", "transition", "visible-arrow", "popper-options", "open-delay", "manual", "popper-class", "enterable", "hide-after"],
+    "defaults": ["content", "placement"],
+    "description": "Display prompt information for mouse hover."
+  },
+  "el-popover": {
+    "attributes": ["trigger", "title", "content", "width", "placement", "disabled", "value", "offset", "transition", "visible-arrow", "popper-options", "popper-class", "open-delay", "show", "hide", "after-enter", "after-leave"],
+    "defaults": ["placement"]
+  },
+  "el-card": {
+    "attributes": ["header", "body-style"],
+    "description": "Integrate information in a card container."
+  },
+  "el-carousel": {
+    "attributes": ["height", "initial-index", "trigger", "autoplay", "interval", "indicator-position", "arrow", "type", "change"],
+    "subtags": ["el-carousel-item"],
+    "description": "Loop a series of images or texts in a limited space"
+  },
+  "el-carousel-item": {
+    "attributes": ["name", "label"]
+  },
+  "el-collapse": {
+    "attributes": ["accordion", "value", "change"],
+    "subtags": ["el-collapse-item"],
+    "description": "Use Collapse to store contents."
+  },
+  "el-collapse-item": {
+    "attributes": ["name", "title"],
+    "defaults": ["name", "title"]
+  }
+}
diff --git a/yarn.lock b/yarn.lock
index 01565ab1372..f97d9cc5362 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -2,114 +2,530 @@
 # yarn lockfile v1
 
 
-CSSselect@~0.4.0:
-  version "0.4.1"
-  resolved "https://registry.yarnpkg.com/CSSselect/-/CSSselect-0.4.1.tgz#f8ab7e1f8418ce63cda6eb7bd778a85d7ec492b2"
+"@babel/runtime@^7.7.7":
+  version "7.7.7"
+  resolved "https://registry.yarnpkg.com/@babel/runtime/-/runtime-7.7.7.tgz#194769ca8d6d7790ec23605af9ee3e42a0aa79cf"
+  integrity sha512-uCnC2JEVAu8AKB5do1WRIsvrdJ0flYx/A/9f/6chdacnEZ7LmavjdsDXr5ksYBegxtuTPR5Va9/+13QF/kFkCA==
+  dependencies:
+    regenerator-runtime "^0.13.2"
+
+"@commitlint/cli@^8.2.0":
+  version "8.2.0"
+  resolved "https://registry.yarnpkg.com/@commitlint/cli/-/cli-8.2.0.tgz#fbf9969e04e2162d985eaa644fdad6ce807aadb6"
+  integrity sha512-8fJ5pmytc38yw2QWbTTJmXLfSiWPwMkHH4govo9zJ/+ERPBF2jvlxD/dQvk24ezcizjKc6LFka2edYC4OQ+Dgw==
+  dependencies:
+    "@commitlint/format" "^8.2.0"
+    "@commitlint/lint" "^8.2.0"
+    "@commitlint/load" "^8.2.0"
+    "@commitlint/read" "^8.2.0"
+    babel-polyfill "6.26.0"
+    chalk "2.4.2"
+    get-stdin "7.0.0"
+    lodash "4.17.14"
+    meow "5.0.0"
+    resolve-from "5.0.0"
+    resolve-global "1.0.0"
+
+"@commitlint/config-conventional@^8.2.0":
+  version "8.2.0"
+  resolved "https://registry.yarnpkg.com/@commitlint/config-conventional/-/config-conventional-8.2.0.tgz#886a5538e3708e017ec2871e0cbce00f635d3102"
+  integrity sha512-HuwlHQ3DyVhpK9GHgTMhJXD8Zp8PGIQVpQGYh/iTrEU6TVxdRC61BxIDZvfWatCaiG617Z/U8maRAFrqFM4TqA==
+
+"@commitlint/ensure@^8.2.0":
+  version "8.2.0"
+  resolved "https://registry.yarnpkg.com/@commitlint/ensure/-/ensure-8.2.0.tgz#fad0c81c3d3bd09aa5fbcbcc483ae1f39bc8af8f"
+  integrity sha512-XZZih/kcRrqK7lEORbSYCfqQw6byfsFbLygRGVdJMlCPGu9E2MjpwCtoj5z7y/lKfUB3MJaBhzn2muJqS1gC6A==
+  dependencies:
+    lodash "4.17.14"
+
+"@commitlint/execute-rule@^8.2.0":
+  version "8.2.0"
+  resolved "https://registry.yarnpkg.com/@commitlint/execute-rule/-/execute-rule-8.2.0.tgz#aefb3744e22613660adefb7ebcccaa60bd24e78d"
+  integrity sha512-9MBRthHaulbWTa8ReG2Oii2qc117NuvzhZdnkuKuYLhker7sUXGFcVhLanuWUKGyfyI2o9zVr/NHsNbCCsTzAA==
+
+"@commitlint/format@^8.2.0":
+  version "8.2.0"
+  resolved "https://registry.yarnpkg.com/@commitlint/format/-/format-8.2.0.tgz#0a2447fadac7c0421ce8a8d7e27dfa2172c737d4"
+  integrity sha512-sA77agkDEMsEMrlGhrLtAg8vRexkOofEEv/CZX+4xlANyAz2kNwJvMg33lcL65CBhqKEnRRJRxfZ1ZqcujdKcQ==
   dependencies:
-    CSSwhat "0.4"
-    domutils "1.4"
+    chalk "^2.0.1"
 
-CSSwhat@0.4:
-  version "0.4.7"
-  resolved "https://registry.yarnpkg.com/CSSwhat/-/CSSwhat-0.4.7.tgz#867da0ff39f778613242c44cfea83f0aa4ebdf9b"
+"@commitlint/is-ignored@^8.2.0":
+  version "8.2.0"
+  resolved "https://registry.yarnpkg.com/@commitlint/is-ignored/-/is-ignored-8.2.0.tgz#b6409ab28bf5a80f25e14da17da3916adb230a89"
+  integrity sha512-ADaGnKfbfV6KD1pETp0Qf7XAyc75xTy3WJlbvPbwZ4oPdBMsXF0oXEEGMis6qABfU2IXan5/KAJgAFX3vdd0jA==
+  dependencies:
+    "@types/semver" "^6.0.1"
+    semver "6.2.0"
+
+"@commitlint/lint@^8.2.0":
+  version "8.2.0"
+  resolved "https://registry.yarnpkg.com/@commitlint/lint/-/lint-8.2.0.tgz#aadc606379f3550eb877f16d4f5b103639cbf92a"
+  integrity sha512-ch9JN8aR37ufdjoWv50jLfvFz9rWMgLW5HEkMGLsM/51gjekmQYS5NJg8S2+6F5+jmralAO7VkUMI6FukXKX0A==
+  dependencies:
+    "@commitlint/is-ignored" "^8.2.0"
+    "@commitlint/parse" "^8.2.0"
+    "@commitlint/rules" "^8.2.0"
+    babel-runtime "^6.23.0"
+    lodash "4.17.14"
+
+"@commitlint/load@^8.2.0":
+  version "8.2.0"
+  resolved "https://registry.yarnpkg.com/@commitlint/load/-/load-8.2.0.tgz#9ca53a0c795e4f63d796b4d42279e856549add1a"
+  integrity sha512-EV6PfAY/p83QynNd1llHxJiNxKmp43g8+7dZbyfHFbsGOdokrCnoelAVZ+WGgktXwLN/uXyfkcIAxwac015UYw==
+  dependencies:
+    "@commitlint/execute-rule" "^8.2.0"
+    "@commitlint/resolve-extends" "^8.2.0"
+    babel-runtime "^6.23.0"
+    chalk "2.4.2"
+    cosmiconfig "^5.2.0"
+    lodash "4.17.14"
+    resolve-from "^5.0.0"
+
+"@commitlint/message@^8.2.0":
+  version "8.2.0"
+  resolved "https://registry.yarnpkg.com/@commitlint/message/-/message-8.2.0.tgz#bdc0388183f6bc6006c7e7e197a721683011907a"
+  integrity sha512-LNsSwDLIFgE3nb/Sb1PIluYNy4Q8igdf4tpJCdv5JJDf7CZCZt3ZTglj0YutZZorpRRuHJsVIB2+dI4bVH3bFw==
+
+"@commitlint/parse@^8.2.0":
+  version "8.2.0"
+  resolved "https://registry.yarnpkg.com/@commitlint/parse/-/parse-8.2.0.tgz#de80137e89ee5a2d3029656c9b33e90c88c6f56c"
+  integrity sha512-vzouqroTXG6QXApkrps0gbeSYW6w5drpUk7QAeZIcaCSPsQXDM8eqqt98ZzlzLJHo5oPNXPX1AAVSTrssvHemA==
+  dependencies:
+    conventional-changelog-angular "^1.3.3"
+    conventional-commits-parser "^2.1.0"
+    lodash "^4.17.11"
+
+"@commitlint/read@^8.2.0":
+  version "8.2.0"
+  resolved "https://registry.yarnpkg.com/@commitlint/read/-/read-8.2.0.tgz#54c6549723d532c74434ee0d74e0459032dc9159"
+  integrity sha512-1tBai1VuSQmsOTsvJr3Fi/GZqX3zdxRqYe/yN4i3cLA5S2Y4QGJ5I3l6nGZlKgm/sSelTCVKHltrfWU8s5H7SA==
+  dependencies:
+    "@commitlint/top-level" "^8.2.0"
+    "@marionebl/sander" "^0.6.0"
+    babel-runtime "^6.23.0"
+    git-raw-commits "^1.3.0"
+
+"@commitlint/resolve-extends@^8.2.0":
+  version "8.2.0"
+  resolved "https://registry.yarnpkg.com/@commitlint/resolve-extends/-/resolve-extends-8.2.0.tgz#b7f2f0c71c10f24b98a199ed11d2c14cfd7a318f"
+  integrity sha512-cwi0HUsDcD502HBP8huXfTkVuWmeo1Fiz3GKxNwMBBsJV4+bKa7QrtxbNpXhVuarX7QjWfNTvmW6KmFS7YK9uw==
+  dependencies:
+    "@types/node" "^12.0.2"
+    import-fresh "^3.0.0"
+    lodash "4.17.14"
+    resolve-from "^5.0.0"
+    resolve-global "^1.0.0"
+
+"@commitlint/rules@^8.2.0":
+  version "8.2.0"
+  resolved "https://registry.yarnpkg.com/@commitlint/rules/-/rules-8.2.0.tgz#4cd6a323ca1a3f3d33ae6dc723f8c88f3dcde347"
+  integrity sha512-FlqSBBP2Gxt5Ibw+bxdYpzqYR6HI8NIBpaTBhAjSEAduQtdWFMOhF0zsgkwH7lHN7opaLcnY2fXxAhbzTmJQQA==
+  dependencies:
+    "@commitlint/ensure" "^8.2.0"
+    "@commitlint/message" "^8.2.0"
+    "@commitlint/to-lines" "^8.2.0"
+    babel-runtime "^6.23.0"
+
+"@commitlint/to-lines@^8.2.0":
+  version "8.2.0"
+  resolved "https://registry.yarnpkg.com/@commitlint/to-lines/-/to-lines-8.2.0.tgz#dddb5916a457e1a79e437115a9b8eac7bf9ad52a"
+  integrity sha512-LXTYG3sMenlN5qwyTZ6czOULVcx46uMy+MEVqpvCgptqr/MZcV/C2J+S2o1DGwj1gOEFMpqrZaE3/1R2Q+N8ng==
+
+"@commitlint/top-level@^8.2.0":
+  version "8.2.0"
+  resolved "https://registry.yarnpkg.com/@commitlint/top-level/-/top-level-8.2.0.tgz#206e7cbc54dbe9494190677f887dd60943fed5b0"
+  integrity sha512-Yaw4KmYNy31/HhRUuZ+fupFcDalnfpdu4JGBgGAqS9aBHdMSSWdWqtAaDaxdtWjTZeN3O0sA2gOhXwvKwiDwvw==
+  dependencies:
+    find-up "^4.0.0"
+
+"@femessage/el-form-renderer@^1.12.1":
+  version "1.12.1"
+  resolved "https://registry.yarnpkg.com/@femessage/el-form-renderer/-/el-form-renderer-1.12.1.tgz#07c021f56ad25b11040d605bccf9d369af9a1861"
+  integrity sha512-YijaqZ8nSUrx/0bl+PJgWrdlZwAYIuwQtP8obTz7GI18tHQ3ciM5wAatgz6Tml7z8TQu2YuqrXGrR1MAJ1LhKQ==
+  dependencies:
+    lodash.get "^4.4.2"
+    lodash.set "^4.3.2"
+
+"@femessage/github-release-notes@^0.19.0":
+  version "0.19.0"
+  resolved "https://registry.npm.taobao.org/@femessage/github-release-notes/download/@femessage/github-release-notes-0.19.0.tgz#483767c6a52d3a1086000442580503fed72a0898"
+  integrity sha1-SDdnxqUtOhCGAARCWAUD/tcqCJg=
+  dependencies:
+    babel-runtime "^6.26.0"
+    base-64 "^0.1.0"
+    chalk "^2.1.0"
+    commander "^2.11.0"
+    connectivity "^1.0.0"
+    github-api "^3.0.0"
+    inquirer "^3.3.0"
+    install "^0.10.1"
+    js-beautify "^1.7.4"
+    json2yaml "^1.1.0"
+    minimist "^1.2.0"
+    node-fetch "^1.7.3"
+    npm "^6.4.1"
+    object-assign-deep "^0.3.1"
+    ora "^1.3.0"
+    regex-match-all "^1.0.2"
+    require-from-url "^3.1.3"
+    require-yaml "0.0.1"
+    valid-url "^1.0.9"
+
+"@marionebl/sander@^0.6.0":
+  version "0.6.1"
+  resolved "https://registry.yarnpkg.com/@marionebl/sander/-/sander-0.6.1.tgz#1958965874f24bc51be48875feb50d642fc41f7b"
+  integrity sha1-GViWWHTyS8Ub5Ih1/rUNZC/EH3s=
+  dependencies:
+    graceful-fs "^4.1.3"
+    mkdirp "^0.5.1"
+    rimraf "^2.5.2"
 
-abab@^1.0.0:
-  version "1.0.3"
-  resolved "https://registry.yarnpkg.com/abab/-/abab-1.0.3.tgz#b81de5f7274ec4e756d797cd834f303642724e5d"
+"@sinonjs/commons@^1", "@sinonjs/commons@^1.0.2", "@sinonjs/commons@^1.3.1":
+  version "1.4.0"
+  resolved "https://registry.npmjs.org/@sinonjs/commons/-/commons-1.4.0.tgz#7b3ec2d96af481d7a0321252e7b1c94724ec5a78"
+  integrity sha512-9jHK3YF/8HtJ9wCAbG+j8cD0i0+ATS9A7gXFqS36TblLPNy6rEEc+SB0imo91eCboGaBYGV/MT1/br/J+EE7Tw==
+  dependencies:
+    type-detect "4.0.8"
 
-abbrev@1, abbrev@1.0.x:
-  version "1.0.9"
-  resolved "https://registry.yarnpkg.com/abbrev/-/abbrev-1.0.9.tgz#91b4792588a7738c25f35dd6f63752a2f8776135"
+"@sinonjs/formatio@^3.1.0", "@sinonjs/formatio@^3.2.1":
+  version "3.2.1"
+  resolved "https://registry.npmjs.org/@sinonjs/formatio/-/formatio-3.2.1.tgz#52310f2f9bcbc67bdac18c94ad4901b95fde267e"
+  integrity sha512-tsHvOB24rvyvV2+zKMmPkZ7dXX6LSLKZ7aOtXY6Edklp0uRcgGpOsQTTGTcWViFyx4uhWc6GV8QdnALbIbIdeQ==
+  dependencies:
+    "@sinonjs/commons" "^1"
+    "@sinonjs/samsam" "^3.1.0"
 
-accepts@1.1.4:
-  version "1.1.4"
-  resolved "https://registry.yarnpkg.com/accepts/-/accepts-1.1.4.tgz#d71c96f7d41d0feda2c38cd14e8a27c04158df4a"
+"@sinonjs/samsam@^3.1.0", "@sinonjs/samsam@^3.2.0":
+  version "3.3.0"
+  resolved "https://registry.npmjs.org/@sinonjs/samsam/-/samsam-3.3.0.tgz#9557ea89cd39dbc94ffbd093c8085281cac87416"
+  integrity sha512-beHeJM/RRAaLLsMJhsCvHK31rIqZuobfPLa/80yGH5hnD8PV1hyh9xJBJNFfNmO7yWqm+zomijHsXpI6iTQJfQ==
   dependencies:
-    mime-types "~2.0.4"
-    negotiator "0.4.9"
+    "@sinonjs/commons" "^1.0.2"
+    array-from "^2.1.1"
+    lodash "^4.17.11"
 
-accepts@~1.3.3:
-  version "1.3.3"
-  resolved "https://registry.yarnpkg.com/accepts/-/accepts-1.3.3.tgz#c3ca7434938648c3e0d9c1e328dd68b622c284ca"
+"@sinonjs/text-encoding@^0.7.1":
+  version "0.7.1"
+  resolved "https://registry.npmjs.org/@sinonjs/text-encoding/-/text-encoding-0.7.1.tgz#8da5c6530915653f3a1f38fd5f101d8c3f8079c5"
+  integrity sha512-+iTbntw2IZPb/anVDbypzfQa+ay64MW0Zo8aJ8gZPWMMK6/OubMVb6lUPMagqjOPnmtauXnFCACVl3O7ogjeqQ==
+
+"@types/node@^12.0.2":
+  version "12.12.7"
+  resolved "https://registry.yarnpkg.com/@types/node/-/node-12.12.7.tgz#01e4ea724d9e3bd50d90c11fd5980ba317d8fa11"
+  integrity sha512-E6Zn0rffhgd130zbCbAr/JdXfXkoOUFAKNs/rF8qnafSJ8KYaA/j3oz7dcwal+lYjLA7xvdd5J4wdYpCTlP8+w==
+
+"@types/q@^1.5.1":
+  version "1.5.1"
+  resolved "https://registry.yarnpkg.com/@types/q/-/q-1.5.1.tgz#48fd98c1561fe718b61733daed46ff115b496e18"
+  integrity sha512-eqz8c/0kwNi/OEHQfvIuJVLTst3in0e7uTKeuY+WL/zfKn0xVujOTp42bS/vUUokhK5P2BppLd9JXMOMHcgbjA==
+
+"@types/semver@^6.0.1":
+  version "6.2.0"
+  resolved "https://registry.yarnpkg.com/@types/semver/-/semver-6.2.0.tgz#d688d574400d96c5b0114968705366f431831e1a"
+  integrity sha512-1OzrNb4RuAzIT7wHSsgZRlMBlNsJl+do6UblR7JMW4oB7bbR+uBEYtUh7gEc/jM84GGilh68lSOokyM/zNUlBA==
+
+"@vue/component-compiler-utils@^2.5.1", "@vue/component-compiler-utils@^2.6.0":
+  version "2.6.0"
+  resolved "https://registry.yarnpkg.com/@vue/component-compiler-utils/-/component-compiler-utils-2.6.0.tgz#aa46d2a6f7647440b0b8932434d22f12371e543b"
+  integrity sha512-IHjxt7LsOFYc0DkTncB7OXJL7UzwOLPPQCfEUNyxL2qt+tF12THV+EO33O1G2Uk4feMSWua3iD39Itszx0f0bw==
   dependencies:
-    mime-types "~2.1.11"
-    negotiator "0.6.1"
+    consolidate "^0.15.1"
+    hash-sum "^1.0.2"
+    lru-cache "^4.1.2"
+    merge-source-map "^1.1.0"
+    postcss "^7.0.14"
+    postcss-selector-parser "^5.0.0"
+    prettier "1.16.3"
+    source-map "~0.6.1"
+    vue-template-es2015-compiler "^1.9.0"
+
+"@webassemblyjs/ast@1.7.11":
+  version "1.7.11"
+  resolved "https://registry.yarnpkg.com/@webassemblyjs/ast/-/ast-1.7.11.tgz#b988582cafbb2b095e8b556526f30c90d057cace"
+  integrity sha512-ZEzy4vjvTzScC+SH8RBssQUawpaInUdMTYwYYLh54/s8TuT0gBLuyUnppKsVyZEi876VmmStKsUs28UxPgdvrA==
+  dependencies:
+    "@webassemblyjs/helper-module-context" "1.7.11"
+    "@webassemblyjs/helper-wasm-bytecode" "1.7.11"
+    "@webassemblyjs/wast-parser" "1.7.11"
+
+"@webassemblyjs/floating-point-hex-parser@1.7.11":
+  version "1.7.11"
+  resolved "https://registry.yarnpkg.com/@webassemblyjs/floating-point-hex-parser/-/floating-point-hex-parser-1.7.11.tgz#a69f0af6502eb9a3c045555b1a6129d3d3f2e313"
+  integrity sha512-zY8dSNyYcgzNRNT666/zOoAyImshm3ycKdoLsyDw/Bwo6+/uktb7p4xyApuef1dwEBo/U/SYQzbGBvV+nru2Xg==
+
+"@webassemblyjs/helper-api-error@1.7.11":
+  version "1.7.11"
+  resolved "https://registry.yarnpkg.com/@webassemblyjs/helper-api-error/-/helper-api-error-1.7.11.tgz#c7b6bb8105f84039511a2b39ce494f193818a32a"
+  integrity sha512-7r1qXLmiglC+wPNkGuXCvkmalyEstKVwcueZRP2GNC2PAvxbLYwLLPr14rcdJaE4UtHxQKfFkuDFuv91ipqvXg==
+
+"@webassemblyjs/helper-buffer@1.7.11":
+  version "1.7.11"
+  resolved "https://registry.yarnpkg.com/@webassemblyjs/helper-buffer/-/helper-buffer-1.7.11.tgz#3122d48dcc6c9456ed982debe16c8f37101df39b"
+  integrity sha512-MynuervdylPPh3ix+mKZloTcL06P8tenNH3sx6s0qE8SLR6DdwnfgA7Hc9NSYeob2jrW5Vql6GVlsQzKQCa13w==
+
+"@webassemblyjs/helper-code-frame@1.7.11":
+  version "1.7.11"
+  resolved "https://registry.yarnpkg.com/@webassemblyjs/helper-code-frame/-/helper-code-frame-1.7.11.tgz#cf8f106e746662a0da29bdef635fcd3d1248364b"
+  integrity sha512-T8ESC9KMXFTXA5urJcyor5cn6qWeZ4/zLPyWeEXZ03hj/x9weSokGNkVCdnhSabKGYWxElSdgJ+sFa9G/RdHNw==
+  dependencies:
+    "@webassemblyjs/wast-printer" "1.7.11"
+
+"@webassemblyjs/helper-fsm@1.7.11":
+  version "1.7.11"
+  resolved "https://registry.yarnpkg.com/@webassemblyjs/helper-fsm/-/helper-fsm-1.7.11.tgz#df38882a624080d03f7503f93e3f17ac5ac01181"
+  integrity sha512-nsAQWNP1+8Z6tkzdYlXT0kxfa2Z1tRTARd8wYnc/e3Zv3VydVVnaeePgqUzFrpkGUyhUUxOl5ML7f1NuT+gC0A==
+
+"@webassemblyjs/helper-module-context@1.7.11":
+  version "1.7.11"
+  resolved "https://registry.yarnpkg.com/@webassemblyjs/helper-module-context/-/helper-module-context-1.7.11.tgz#d874d722e51e62ac202476935d649c802fa0e209"
+  integrity sha512-JxfD5DX8Ygq4PvXDucq0M+sbUFA7BJAv/GGl9ITovqE+idGX+J3QSzJYz+LwQmL7fC3Rs+utvWoJxDb6pmC0qg==
+
+"@webassemblyjs/helper-wasm-bytecode@1.7.11":
+  version "1.7.11"
+  resolved "https://registry.yarnpkg.com/@webassemblyjs/helper-wasm-bytecode/-/helper-wasm-bytecode-1.7.11.tgz#dd9a1e817f1c2eb105b4cf1013093cb9f3c9cb06"
+  integrity sha512-cMXeVS9rhoXsI9LLL4tJxBgVD/KMOKXuFqYb5oCJ/opScWpkCMEz9EJtkonaNcnLv2R3K5jIeS4TRj/drde1JQ==
+
+"@webassemblyjs/helper-wasm-section@1.7.11":
+  version "1.7.11"
+  resolved "https://registry.yarnpkg.com/@webassemblyjs/helper-wasm-section/-/helper-wasm-section-1.7.11.tgz#9c9ac41ecf9fbcfffc96f6d2675e2de33811e68a"
+  integrity sha512-8ZRY5iZbZdtNFE5UFunB8mmBEAbSI3guwbrsCl4fWdfRiAcvqQpeqd5KHhSWLL5wuxo53zcaGZDBU64qgn4I4Q==
+  dependencies:
+    "@webassemblyjs/ast" "1.7.11"
+    "@webassemblyjs/helper-buffer" "1.7.11"
+    "@webassemblyjs/helper-wasm-bytecode" "1.7.11"
+    "@webassemblyjs/wasm-gen" "1.7.11"
+
+"@webassemblyjs/ieee754@1.7.11":
+  version "1.7.11"
+  resolved "https://registry.yarnpkg.com/@webassemblyjs/ieee754/-/ieee754-1.7.11.tgz#c95839eb63757a31880aaec7b6512d4191ac640b"
+  integrity sha512-Mmqx/cS68K1tSrvRLtaV/Lp3NZWzXtOHUW2IvDvl2sihAwJh4ACE0eL6A8FvMyDG9abes3saB6dMimLOs+HMoQ==
+  dependencies:
+    "@xtuc/ieee754" "^1.2.0"
+
+"@webassemblyjs/leb128@1.7.11":
+  version "1.7.11"
+  resolved "https://registry.yarnpkg.com/@webassemblyjs/leb128/-/leb128-1.7.11.tgz#d7267a1ee9c4594fd3f7e37298818ec65687db63"
+  integrity sha512-vuGmgZjjp3zjcerQg+JA+tGOncOnJLWVkt8Aze5eWQLwTQGNgVLcyOTqgSCxWTR4J42ijHbBxnuRaL1Rv7XMdw==
+  dependencies:
+    "@xtuc/long" "4.2.1"
+
+"@webassemblyjs/utf8@1.7.11":
+  version "1.7.11"
+  resolved "https://registry.yarnpkg.com/@webassemblyjs/utf8/-/utf8-1.7.11.tgz#06d7218ea9fdc94a6793aa92208160db3d26ee82"
+  integrity sha512-C6GFkc7aErQIAH+BMrIdVSmW+6HSe20wg57HEC1uqJP8E/xpMjXqQUxkQw07MhNDSDcGpxI9G5JSNOQCqJk4sA==
+
+"@webassemblyjs/wasm-edit@1.7.11":
+  version "1.7.11"
+  resolved "https://registry.yarnpkg.com/@webassemblyjs/wasm-edit/-/wasm-edit-1.7.11.tgz#8c74ca474d4f951d01dbae9bd70814ee22a82005"
+  integrity sha512-FUd97guNGsCZQgeTPKdgxJhBXkUbMTY6hFPf2Y4OedXd48H97J+sOY2Ltaq6WGVpIH8o/TGOVNiVz/SbpEMJGg==
+  dependencies:
+    "@webassemblyjs/ast" "1.7.11"
+    "@webassemblyjs/helper-buffer" "1.7.11"
+    "@webassemblyjs/helper-wasm-bytecode" "1.7.11"
+    "@webassemblyjs/helper-wasm-section" "1.7.11"
+    "@webassemblyjs/wasm-gen" "1.7.11"
+    "@webassemblyjs/wasm-opt" "1.7.11"
+    "@webassemblyjs/wasm-parser" "1.7.11"
+    "@webassemblyjs/wast-printer" "1.7.11"
+
+"@webassemblyjs/wasm-gen@1.7.11":
+  version "1.7.11"
+  resolved "https://registry.yarnpkg.com/@webassemblyjs/wasm-gen/-/wasm-gen-1.7.11.tgz#9bbba942f22375686a6fb759afcd7ac9c45da1a8"
+  integrity sha512-U/KDYp7fgAZX5KPfq4NOupK/BmhDc5Kjy2GIqstMhvvdJRcER/kUsMThpWeRP8BMn4LXaKhSTggIJPOeYHwISA==
+  dependencies:
+    "@webassemblyjs/ast" "1.7.11"
+    "@webassemblyjs/helper-wasm-bytecode" "1.7.11"
+    "@webassemblyjs/ieee754" "1.7.11"
+    "@webassemblyjs/leb128" "1.7.11"
+    "@webassemblyjs/utf8" "1.7.11"
+
+"@webassemblyjs/wasm-opt@1.7.11":
+  version "1.7.11"
+  resolved "https://registry.yarnpkg.com/@webassemblyjs/wasm-opt/-/wasm-opt-1.7.11.tgz#b331e8e7cef8f8e2f007d42c3a36a0580a7d6ca7"
+  integrity sha512-XynkOwQyiRidh0GLua7SkeHvAPXQV/RxsUeERILmAInZegApOUAIJfRuPYe2F7RcjOC9tW3Cb9juPvAC/sCqvg==
+  dependencies:
+    "@webassemblyjs/ast" "1.7.11"
+    "@webassemblyjs/helper-buffer" "1.7.11"
+    "@webassemblyjs/wasm-gen" "1.7.11"
+    "@webassemblyjs/wasm-parser" "1.7.11"
+
+"@webassemblyjs/wasm-parser@1.7.11":
+  version "1.7.11"
+  resolved "https://registry.yarnpkg.com/@webassemblyjs/wasm-parser/-/wasm-parser-1.7.11.tgz#6e3d20fa6a3519f6b084ef9391ad58211efb0a1a"
+  integrity sha512-6lmXRTrrZjYD8Ng8xRyvyXQJYUQKYSXhJqXOBLw24rdiXsHAOlvw5PhesjdcaMadU/pyPQOJ5dHreMjBxwnQKg==
+  dependencies:
+    "@webassemblyjs/ast" "1.7.11"
+    "@webassemblyjs/helper-api-error" "1.7.11"
+    "@webassemblyjs/helper-wasm-bytecode" "1.7.11"
+    "@webassemblyjs/ieee754" "1.7.11"
+    "@webassemblyjs/leb128" "1.7.11"
+    "@webassemblyjs/utf8" "1.7.11"
+
+"@webassemblyjs/wast-parser@1.7.11":
+  version "1.7.11"
+  resolved "https://registry.yarnpkg.com/@webassemblyjs/wast-parser/-/wast-parser-1.7.11.tgz#25bd117562ca8c002720ff8116ef9072d9ca869c"
+  integrity sha512-lEyVCg2np15tS+dm7+JJTNhNWq9yTZvi3qEhAIIOaofcYlUp0UR5/tVqOwa/gXYr3gjwSZqw+/lS9dscyLelbQ==
+  dependencies:
+    "@webassemblyjs/ast" "1.7.11"
+    "@webassemblyjs/floating-point-hex-parser" "1.7.11"
+    "@webassemblyjs/helper-api-error" "1.7.11"
+    "@webassemblyjs/helper-code-frame" "1.7.11"
+    "@webassemblyjs/helper-fsm" "1.7.11"
+    "@xtuc/long" "4.2.1"
+
+"@webassemblyjs/wast-printer@1.7.11":
+  version "1.7.11"
+  resolved "https://registry.yarnpkg.com/@webassemblyjs/wast-printer/-/wast-printer-1.7.11.tgz#c4245b6de242cb50a2cc950174fdbf65c78d7813"
+  integrity sha512-m5vkAsuJ32QpkdkDOUPGSltrg8Cuk3KBx4YrmAGQwCZPRdUHXxG4phIOuuycLemHFr74sWL9Wthqss4fzdzSwg==
+  dependencies:
+    "@webassemblyjs/ast" "1.7.11"
+    "@webassemblyjs/wast-parser" "1.7.11"
+    "@xtuc/long" "4.2.1"
+
+"@xtuc/ieee754@^1.2.0":
+  version "1.2.0"
+  resolved "https://registry.yarnpkg.com/@xtuc/ieee754/-/ieee754-1.2.0.tgz#eef014a3145ae477a1cbc00cd1e552336dceb790"
+  integrity sha512-DX8nKgqcGwsc0eJSqYt5lwP4DH5FlHnmuWWBRy7X0NcaGR0ZtuyeESgMwTYVEtxmsNGY+qit4QYT/MIYTOTPeA==
 
-acorn-dynamic-import@^2.0.0:
-  version "2.0.2"
-  resolved "https://registry.yarnpkg.com/acorn-dynamic-import/-/acorn-dynamic-import-2.0.2.tgz#c752bd210bef679501b6c6cb7fc84f8f47158cc4"
+"@xtuc/long@4.2.1":
+  version "4.2.1"
+  resolved "https://registry.yarnpkg.com/@xtuc/long/-/long-4.2.1.tgz#5c85d662f76fa1d34575766c5dcd6615abcd30d8"
+  integrity sha512-FZdkNBDqBRHKQ2MEbSC17xnPFOhZxeJ2YGSfr2BKf3sujG49Qe3bB+rGCwQfIaA7WHnGeGkSijX4FuBCdrzW/g==
+
+JSONStream@^1.0.4, JSONStream@^1.3.4, JSONStream@^1.3.5:
+  version "1.3.5"
+  resolved "https://registry.npmjs.org/JSONStream/-/JSONStream-1.3.5.tgz#3208c1f08d3a4d99261ab64f92302bc15e111ca0"
+  integrity sha512-E+iruNOY8VV9s4JEbe1aNEm6MiszPRr/UfcHMz0TQh1BXSxHK+ASV1R6W4HpjBhSeS+54PIsAMCBmwD06LLsqQ==
   dependencies:
-    acorn "^4.0.3"
+    jsonparse "^1.2.0"
+    through ">=2.2.7 <3"
+
+abbrev@1, abbrev@~1.1.1:
+  version "1.1.1"
+  resolved "https://registry.yarnpkg.com/abbrev/-/abbrev-1.1.1.tgz#f8f2c887ad10bf67f634f005b6987fed3179aac8"
+  integrity sha512-nne9/IiQ/hzIhY6pdDnbBtz7DjPTKrY00P/zvPSm5pOFkl6xuGrGnXn/VtTNNfNtAfZ9/1RtehkszU9qcTii0Q==
 
-acorn-globals@^1.0.4:
+abbrev@1.0.x:
   version "1.0.9"
-  resolved "https://registry.yarnpkg.com/acorn-globals/-/acorn-globals-1.0.9.tgz#55bb5e98691507b74579d0513413217c380c54cf"
+  resolved "https://registry.yarnpkg.com/abbrev/-/abbrev-1.0.9.tgz#91b4792588a7738c25f35dd6f63752a2f8776135"
+  integrity sha1-kbR5JYinc4wl813W9jdSovh3YTU=
+
+accepts@~1.3.4, accepts@~1.3.5:
+  version "1.3.5"
+  resolved "https://registry.yarnpkg.com/accepts/-/accepts-1.3.5.tgz#eb777df6011723a3b14e8a72c0805c8e86746bd2"
+  integrity sha1-63d99gEXI6OxTopywIBcjoZ0a9I=
   dependencies:
-    acorn "^2.1.0"
+    mime-types "~2.1.18"
+    negotiator "0.6.1"
+
+acorn-dynamic-import@^4.0.0:
+  version "4.0.0"
+  resolved "https://registry.yarnpkg.com/acorn-dynamic-import/-/acorn-dynamic-import-4.0.0.tgz#482210140582a36b83c3e342e1cfebcaa9240948"
+  integrity sha512-d3OEjQV4ROpoflsnUA8HozoIR504TFxNivYEUi6uwz0IYhBkTDXGuWlNdMtybRt3nqVx/L6XqMt0FxkXuWKZhw==
 
 acorn-jsx@^3.0.0:
   version "3.0.1"
   resolved "https://registry.yarnpkg.com/acorn-jsx/-/acorn-jsx-3.0.1.tgz#afdf9488fb1ecefc8348f6fb22f464e32a58b36b"
+  integrity sha1-r9+UiPsezvyDSPb7IvRk4ypYs2s=
   dependencies:
     acorn "^3.0.4"
 
-acorn@^2.1.0, acorn@^2.4.0:
-  version "2.7.0"
-  resolved "https://registry.yarnpkg.com/acorn/-/acorn-2.7.0.tgz#ab6e7d9d886aaca8b085bc3312b79a198433f0e7"
-
 acorn@^3.0.4:
   version "3.3.0"
-  resolved "http://registry.npm.taobao.org/acorn/download/acorn-3.3.0.tgz#45e37fb39e8da3f25baee3ff5369e2bb5f22017a"
+  resolved "https://registry.yarnpkg.com/acorn/-/acorn-3.3.0.tgz#45e37fb39e8da3f25baee3ff5369e2bb5f22017a"
+  integrity sha1-ReN/s56No/JbruP/U2niu18iAXo=
 
-acorn@^4.0.3:
-  version "4.0.3"
-  resolved "https://registry.yarnpkg.com/acorn/-/acorn-4.0.3.tgz#1a3e850b428e73ba6b09d1cc527f5aaad4d03ef1"
+acorn@^5.5.0:
+  version "5.7.3"
+  resolved "https://registry.yarnpkg.com/acorn/-/acorn-5.7.3.tgz#67aa231bf8812974b85235a96771eb6bd07ea279"
+  integrity sha512-T/zvzYRfbVojPWahDsE5evJdHb3oJoQfFbsrKM7w5Zcs++Tr257tia3BmMP8XYVjp1S9RZXQMh7gao96BlqZOw==
 
-acorn@^5.0.0:
-  version "5.1.2"
-  resolved "https://registry.yarnpkg.com/acorn/-/acorn-5.1.2.tgz#911cb53e036807cf0fa778dc5d370fbd864246d7"
+acorn@^6.0.5:
+  version "6.0.5"
+  resolved "https://registry.yarnpkg.com/acorn/-/acorn-6.0.5.tgz#81730c0815f3f3b34d8efa95cb7430965f4d887a"
+  integrity sha512-i33Zgp3XWtmZBMNvCr4azvOFeWVw1Rk6p3hfi3LUDvIFraOMywb1kAtrbi+med14m4Xfpqm3zRZMT+c0FNE7kg==
 
-acorn@^5.2.1:
-  version "5.3.0"
-  resolved "http://registry.npm.taobao.org/acorn/download/acorn-5.3.0.tgz#7446d39459c54fb49a80e6ee6478149b940ec822"
+after@0.8.2:
+  version "0.8.2"
+  resolved "https://registry.yarnpkg.com/after/-/after-0.8.2.tgz#fedb394f9f0e02aa9768e702bda23b505fae7e1f"
+  integrity sha1-/ts5T58OAqqXaOcCvaI7UF+ufh8=
+
+agent-base@4, agent-base@^4.3.0:
+  version "4.3.0"
+  resolved "https://registry.npm.taobao.org/agent-base/download/agent-base-4.3.0.tgz?cache=0&other_urls=https%3A%2F%2Fregistry.npm.taobao.org%2Fagent-base%2Fdownload%2Fagent-base-4.3.0.tgz#8165f01c436009bccad0b1d122f05ed770efc6ee"
+  integrity sha1-gWXwHENgCbzK0LHRIvBe13Dvxu4=
+  dependencies:
+    es6-promisify "^5.0.0"
 
-after@0.8.1:
-  version "0.8.1"
-  resolved "https://registry.yarnpkg.com/after/-/after-0.8.1.tgz#ab5d4fb883f596816d3515f8f791c0af486dd627"
+agent-base@~4.2.1:
+  version "4.2.1"
+  resolved "https://registry.npm.taobao.org/agent-base/download/agent-base-4.2.1.tgz?cache=0&other_urls=https%3A%2F%2Fregistry.npm.taobao.org%2Fagent-base%2Fdownload%2Fagent-base-4.2.1.tgz#d89e5999f797875674c07d87f260fc41e83e8ca9"
+  integrity sha1-2J5ZmfeXh1Z0wH2H8mD8Qeg+jKk=
+  dependencies:
+    es6-promisify "^5.0.0"
 
 agentkeepalive@^2.2.0:
   version "2.2.0"
   resolved "https://registry.yarnpkg.com/agentkeepalive/-/agentkeepalive-2.2.0.tgz#c5d1bd4b129008f1163f236f86e5faea2026e2ef"
+  integrity sha1-xdG9SxKQCPEWPyNvhuX66iAm4u8=
 
-ajv-keywords@^2.0.0:
-  version "2.1.0"
-  resolved "https://registry.yarnpkg.com/ajv-keywords/-/ajv-keywords-2.1.0.tgz#a296e17f7bfae7c1ce4f7e0de53d29cb32162df0"
+agentkeepalive@^3.4.1:
+  version "3.5.2"
+  resolved "https://registry.npm.taobao.org/agentkeepalive/download/agentkeepalive-3.5.2.tgz#a113924dd3fa24a0bc3b78108c450c2abee00f67"
+  integrity sha1-oROSTdP6JKC8O3gQjEUMKr7gD2c=
+  dependencies:
+    humanize-ms "^1.2.1"
+
+ajv-errors@^1.0.0:
+  version "1.0.1"
+  resolved "https://registry.yarnpkg.com/ajv-errors/-/ajv-errors-1.0.1.tgz#f35986aceb91afadec4102fbd85014950cefa64d"
+  integrity sha512-DCRfO/4nQ+89p/RK43i8Ezd41EqdGIU4ld7nGF8OQ14oc/we5rEntLCUa7+jrn3nn83BosfwZA0wb4pon2o8iQ==
 
 ajv-keywords@^2.1.0:
   version "2.1.1"
-  resolved "http://registry.npm.taobao.org/ajv-keywords/download/ajv-keywords-2.1.1.tgz#617997fc5f60576894c435f940d819e135b80762"
+  resolved "https://registry.yarnpkg.com/ajv-keywords/-/ajv-keywords-2.1.1.tgz#617997fc5f60576894c435f940d819e135b80762"
+  integrity sha1-YXmX/F9gV2iUxDX5QNgZ4TW4B2I=
 
-ajv@^5.0.0, ajv@^5.1.5:
-  version "5.2.3"
-  resolved "https://registry.yarnpkg.com/ajv/-/ajv-5.2.3.tgz#c06f598778c44c6b161abafe3466b81ad1814ed2"
-  dependencies:
-    co "^4.6.0"
-    fast-deep-equal "^1.0.0"
-    json-schema-traverse "^0.3.0"
-    json-stable-stringify "^1.0.1"
+ajv-keywords@^3.1.0:
+  version "3.2.0"
+  resolved "https://registry.yarnpkg.com/ajv-keywords/-/ajv-keywords-3.2.0.tgz#e86b819c602cf8821ad637413698f1dec021847a"
+  integrity sha1-6GuBnGAs+IIa1jdBNpjx3sAhhHo=
 
 ajv@^5.2.3, ajv@^5.3.0:
   version "5.5.2"
-  resolved "http://registry.npm.taobao.org/ajv/download/ajv-5.5.2.tgz#73b5eeca3fab653e3d3f9422b341ad42205dc965"
+  resolved "https://registry.yarnpkg.com/ajv/-/ajv-5.5.2.tgz#73b5eeca3fab653e3d3f9422b341ad42205dc965"
+  integrity sha1-c7Xuyj+rZT49P5Qis0GtQiBdyWU=
   dependencies:
     co "^4.6.0"
     fast-deep-equal "^1.0.0"
     fast-json-stable-stringify "^2.0.0"
     json-schema-traverse "^0.3.0"
 
+ajv@^6.1.0, ajv@^6.5.5:
+  version "6.7.0"
+  resolved "https://registry.yarnpkg.com/ajv/-/ajv-6.7.0.tgz#e3ce7bb372d6577bb1839f1dfdfcbf5ad2948d96"
+  integrity sha512-RZXPviBTtfmtka9n9sy1N5M5b82CbxWIR6HIis4s3WQTXDJamc/0gpCWNGz6EWdWp4DOfjzJfhz/AS9zVPjjWg==
+  dependencies:
+    fast-deep-equal "^2.0.1"
+    fast-json-stable-stringify "^2.0.0"
+    json-schema-traverse "^0.4.1"
+    uri-js "^4.2.2"
+
+ajv@^6.12.3:
+  version "6.12.3"
+  resolved "https://registry.npm.taobao.org/ajv/download/ajv-6.12.3.tgz?cache=0&sync_timestamp=1593876933357&other_urls=https%3A%2F%2Fregistry.npm.taobao.org%2Fajv%2Fdownload%2Fajv-6.12.3.tgz#18c5af38a111ddeb4f2697bd78d68abc1cabd706"
+  integrity sha1-GMWvOKER3etPJpe9eNaKvByr1wY=
+  dependencies:
+    fast-deep-equal "^3.1.1"
+    fast-json-stable-stringify "^2.0.0"
+    json-schema-traverse "^0.4.1"
+    uri-js "^4.2.2"
+
 algoliasearch@^3.24.5:
-  version "3.24.5"
-  resolved "https://registry.yarnpkg.com/algoliasearch/-/algoliasearch-3.24.5.tgz#15d1e6c6a059b8b357d7d40122d9841829acfd20"
+  version "3.32.0"
+  resolved "https://registry.yarnpkg.com/algoliasearch/-/algoliasearch-3.32.0.tgz#5818168c26ff921bd0346a919071bac928b747ce"
+  integrity sha512-C8oQnPTf0wPuyD2jSZwtBAPvz+lHOE7zRIPpgXGBuNt6ZNcC4omsbytG26318rT77a8h4759vmIp6n9p8iw4NA==
   dependencies:
     agentkeepalive "^2.2.0"
     debug "^2.6.8"
@@ -127,838 +543,1284 @@ algoliasearch@^3.24.5:
     semver "^5.1.0"
     tunnel-agent "^0.6.0"
 
-align-text@^0.1.1, align-text@^0.1.3:
-  version "0.1.4"
-  resolved "https://registry.yarnpkg.com/align-text/-/align-text-0.1.4.tgz#0cd90a561093f35d0a99256c22b7069433fad117"
-  dependencies:
-    kind-of "^3.0.2"
-    longest "^1.0.1"
-    repeat-string "^1.5.2"
-
-alphanum-sort@^1.0.1, alphanum-sort@^1.0.2:
+alphanum-sort@^1.0.0:
   version "1.0.2"
   resolved "https://registry.yarnpkg.com/alphanum-sort/-/alphanum-sort-1.0.2.tgz#97a1119649b211ad33691d9f9f486a8ec9fbe0a3"
+  integrity sha1-l6ERlkmyEa0zaR2fn0hqjsn74KM=
 
 amdefine@>=0.0.4:
   version "1.0.1"
   resolved "https://registry.yarnpkg.com/amdefine/-/amdefine-1.0.1.tgz#4a5282ac164729e93619bcfd3ad151f817ce91f5"
+  integrity sha1-SlKCrBZHKek2Gbz9OtFR+BfOkfU=
+
+ansi-align@^2.0.0:
+  version "2.0.0"
+  resolved "https://registry.npm.taobao.org/ansi-align/download/ansi-align-2.0.0.tgz#c36aeccba563b89ceb556f3690f0b1d9e3547f7f"
+  integrity sha1-w2rsy6VjuJzrVW82kPCx2eNUf38=
+  dependencies:
+    string-width "^2.0.0"
+
+ansi-colors@3.2.3, ansi-colors@^3.0.0:
+  version "3.2.3"
+  resolved "https://registry.yarnpkg.com/ansi-colors/-/ansi-colors-3.2.3.tgz#57d35b8686e851e2cc04c403f1c00203976a1813"
+  integrity sha512-LEHHyuhlPY3TmuUYMh2oz89lTShfvgbmzaBcxve9t/9Wuy7Dwf4yoAKcND7KFT1HAQfqZ12qtc+DUrBMeKF9nw==
+
+ansi-colors@^1.0.1:
+  version "1.1.0"
+  resolved "https://registry.yarnpkg.com/ansi-colors/-/ansi-colors-1.1.0.tgz#6374b4dd5d4718ff3ce27a671a3b1cad077132a9"
+  integrity sha512-SFKX67auSNoVR38N3L+nvsPjOE0bybKTYbkf5tRvushrAPQ9V75huw0ZxBkKVeRU9kqH3d6HA4xTckbwZ4ixmA==
+  dependencies:
+    ansi-wrap "^0.1.0"
 
 ansi-escapes@^3.0.0:
-  version "3.0.0"
-  resolved "http://registry.npm.taobao.org/ansi-escapes/download/ansi-escapes-3.0.0.tgz#ec3e8b4e9f8064fc02c3ac9b65f1c275bda8ef92"
+  version "3.1.0"
+  resolved "https://registry.yarnpkg.com/ansi-escapes/-/ansi-escapes-3.1.0.tgz#f73207bb81207d75fd6c83f125af26eea378ca30"
+  integrity sha512-UgAb8H9D41AQnu/PbWlCofQVcnV4Gs2bBJi9eZPxfU/hgglFh3SMDMENRIqdr7H6XFnXdoknctFByVsCOotTVw==
+
+ansi-escapes@^3.2.0:
+  version "3.2.0"
+  resolved "https://registry.yarnpkg.com/ansi-escapes/-/ansi-escapes-3.2.0.tgz#8780b98ff9dbf5638152d1f1fe5c1d7b4442976b"
+  integrity sha512-cBhpre4ma+U0T1oM5fXg7Dy1Jw7zzwv7lt/GoCpr+hDQJoYnKVPLL4dCvSEFMmQurOQvSrwT7SL/DAlhBI97RQ==
+
+ansi-gray@^0.1.1:
+  version "0.1.1"
+  resolved "https://registry.yarnpkg.com/ansi-gray/-/ansi-gray-0.1.1.tgz#2962cf54ec9792c48510a3deb524436861ef7251"
+  integrity sha1-KWLPVOyXksSFEKPetSRDaGHvclE=
+  dependencies:
+    ansi-wrap "0.1.0"
 
 ansi-html@0.0.7:
   version "0.0.7"
   resolved "https://registry.yarnpkg.com/ansi-html/-/ansi-html-0.0.7.tgz#813584021962a9e9e6fd039f940d12f56ca7859e"
+  integrity sha1-gTWEAhliqenm/QOflA0S9WynhZ4=
 
 ansi-regex@^0.2.0, ansi-regex@^0.2.1:
   version "0.2.1"
   resolved "https://registry.yarnpkg.com/ansi-regex/-/ansi-regex-0.2.1.tgz#0d8e946967a3d8143f93e24e298525fc1b2235f9"
+  integrity sha1-DY6UaWej2BQ/k+JOKYUl/BsiNfk=
 
 ansi-regex@^2.0.0:
   version "2.1.1"
-  resolved "http://registry.npm.taobao.org/ansi-regex/download/ansi-regex-2.1.1.tgz#c3b33ab5ee360d86e0e628f0468ae7ef27d654df"
+  resolved "https://registry.yarnpkg.com/ansi-regex/-/ansi-regex-2.1.1.tgz#c3b33ab5ee360d86e0e628f0468ae7ef27d654df"
+  integrity sha1-w7M6te42DYbg5ijwRorn7yfWVN8=
 
 ansi-regex@^3.0.0:
   version "3.0.0"
-  resolved "http://registry.npm.taobao.org/ansi-regex/download/ansi-regex-3.0.0.tgz#ed0317c322064f79466c02966bddb605ab37d998"
+  resolved "https://registry.yarnpkg.com/ansi-regex/-/ansi-regex-3.0.0.tgz#ed0317c322064f79466c02966bddb605ab37d998"
+  integrity sha1-7QMXwyIGT3lGbAKWa922Bas32Zg=
+
+ansi-regex@^4.0.0:
+  version "4.0.0"
+  resolved "https://registry.yarnpkg.com/ansi-regex/-/ansi-regex-4.0.0.tgz#70de791edf021404c3fd615aa89118ae0432e5a9"
+  integrity sha512-iB5Dda8t/UqpPI/IjsejXu5jOGDrzn41wJyljwPH65VCIbk6+1BzFIMJGFwTNrYXT1CrD+B4l19U7awiQ8rk7w==
+
+ansi-regex@^4.1.0:
+  version "4.1.0"
+  resolved "https://registry.npmjs.org/ansi-regex/-/ansi-regex-4.1.0.tgz#8b9f8f08cf1acb843756a839ca8c7e3168c51997"
+  integrity sha512-1apePfXM1UOSqw0o9IiFAovVz9M5S1Dg+4TrDwfMewQ6p/rmMueb7tWZjQ1rx4Loy1ArBggoqGpfqqdI4rondg==
 
 ansi-styles@^1.1.0:
   version "1.1.0"
   resolved "https://registry.yarnpkg.com/ansi-styles/-/ansi-styles-1.1.0.tgz#eaecbf66cd706882760b2f4691582b8f55d7a7de"
+  integrity sha1-6uy/Zs1waIJ2Cy9GkVgrj1XXp94=
 
 ansi-styles@^2.2.1:
   version "2.2.1"
-  resolved "http://registry.npm.taobao.org/ansi-styles/download/ansi-styles-2.2.1.tgz#b432dd3358b634cf75e1e4664368240533c1ddbe"
-
-ansi-styles@^3.1.0:
-  version "3.2.0"
-  resolved "http://registry.npm.taobao.org/ansi-styles/download/ansi-styles-3.2.0.tgz#c159b8d5be0f9e5a6f346dab94f16ce022161b88"
-  dependencies:
-    color-convert "^1.9.0"
+  resolved "https://registry.yarnpkg.com/ansi-styles/-/ansi-styles-2.2.1.tgz#b432dd3358b634cf75e1e4664368240533c1ddbe"
+  integrity sha1-tDLdM1i2NM914eRmQ2gkBTPB3b4=
 
-ansi-styles@^3.2.1:
+ansi-styles@^3.2.0, ansi-styles@^3.2.1:
   version "3.2.1"
-  resolved "http://registry.npm.taobao.org/ansi-styles/download/ansi-styles-3.2.1.tgz#41fbb20243e50b12be0f04b8dedbf07520ce841d"
+  resolved "https://registry.yarnpkg.com/ansi-styles/-/ansi-styles-3.2.1.tgz#41fbb20243e50b12be0f04b8dedbf07520ce841d"
+  integrity sha512-VT0ZI6kZRdTh8YyJw3SMbYm/u+NqfsAxEpWO0Pf9sq8/e94WxxOpPKx9FR1FlyCtOVDNOQ+8ntlqFxiRc+r5qA==
   dependencies:
     color-convert "^1.9.0"
 
-ansi-styles@~1.0.0:
-  version "1.0.0"
-  resolved "https://registry.yarnpkg.com/ansi-styles/-/ansi-styles-1.0.0.tgz#cb102df1c56f5123eab8b67cd7b98027a0279178"
+ansi-wrap@0.1.0, ansi-wrap@^0.1.0:
+  version "0.1.0"
+  resolved "https://registry.yarnpkg.com/ansi-wrap/-/ansi-wrap-0.1.0.tgz#a82250ddb0015e9a27ca82e82ea603bbfa45efaf"
+  integrity sha1-qCJQ3bABXponyoLoLqYDu/pF768=
 
-any-promise@^1.0.0:
-  version "1.3.0"
-  resolved "https://registry.yarnpkg.com/any-promise/-/any-promise-1.3.0.tgz#abc6afeedcea52e809cdc0376aed3ce39635d17f"
+ansicolors@~0.3.2:
+  version "0.3.2"
+  resolved "https://registry.npm.taobao.org/ansicolors/download/ansicolors-0.3.2.tgz?cache=0&other_urls=https%3A%2F%2Fregistry.npm.taobao.org%2Fansicolors%2Fdownload%2Fansicolors-0.3.2.tgz#665597de86a9ffe3aa9bfbe6cae5c6ea426b4979"
+  integrity sha1-ZlWX3oap/+Oqm/vmyuXG6kJrSXk=
 
-any-promise@~0.1.0:
-  version "0.1.0"
-  resolved "https://registry.yarnpkg.com/any-promise/-/any-promise-0.1.0.tgz#830b680aa7e56f33451d4b049f3bd8044498ee27"
+ansistyles@~0.1.3:
+  version "0.1.3"
+  resolved "https://registry.npm.taobao.org/ansistyles/download/ansistyles-0.1.3.tgz?cache=0&other_urls=https%3A%2F%2Fregistry.npm.taobao.org%2Fansistyles%2Fdownload%2Fansistyles-0.1.3.tgz#5de60415bda071bb37127854c864f41b23254539"
+  integrity sha1-XeYEFb2gcbs3EnhUyGT0GyMlRTk=
 
 anymatch@^1.3.0:
-  version "1.3.0"
-  resolved "https://registry.yarnpkg.com/anymatch/-/anymatch-1.3.0.tgz#a3e52fa39168c825ff57b0248126ce5a8ff95507"
+  version "1.3.2"
+  resolved "https://registry.yarnpkg.com/anymatch/-/anymatch-1.3.2.tgz#553dcb8f91e3c889845dfdba34c77721b90b9d7a"
+  integrity sha512-0XNayC8lTHQ2OI8aljNCN3sSx6hsr/1+rlcDAotXJR7C1oZZHCNsfpbKwMjRA3Uqb5tF1Rae2oloTr4xpq+WjA==
   dependencies:
-    arrify "^1.0.0"
     micromatch "^2.1.5"
+    normalize-path "^2.0.0"
 
-aproba@^1.0.3:
-  version "1.0.4"
-  resolved "https://registry.yarnpkg.com/aproba/-/aproba-1.0.4.tgz#2713680775e7614c8ba186c065d4e2e52d1072c0"
+anymatch@^2.0.0:
+  version "2.0.0"
+  resolved "https://registry.yarnpkg.com/anymatch/-/anymatch-2.0.0.tgz#bcb24b4f37934d9aa7ac17b4adaf89e7c76ef2eb"
+  integrity sha512-5teOsQWABXHHBFP9y3skS5P3d/WfWXpv3FUpy+LorMrNYaT9pI4oLMQX7jzQ2KklNpGpWHzdCXTDT2Y3XGlZBw==
+  dependencies:
+    micromatch "^3.1.4"
+    normalize-path "^2.1.1"
+
+append-buffer@^1.0.2:
+  version "1.0.2"
+  resolved "https://registry.yarnpkg.com/append-buffer/-/append-buffer-1.0.2.tgz#d8220cf466081525efea50614f3de6514dfa58f1"
+  integrity sha1-2CIM9GYIFSXv6lBhTz3mUU36WPE=
+  dependencies:
+    buffer-equal "^1.0.0"
+
+aproba@^1.0.3, aproba@^1.1.1, aproba@^1.1.2:
+  version "1.2.0"
+  resolved "https://registry.yarnpkg.com/aproba/-/aproba-1.2.0.tgz#6802e6264efd18c790a1b0d517f0f2627bf2c94a"
+  integrity sha512-Y9J6ZjXtoYh8RnXVCMOU/ttDmk1aBjunq9vO0ta5x85WDQiQfUF9sIPBITdbiiIVcBo03Hi3jMxigBtsddlXRw==
 
-archy@^1.0.0:
+"aproba@^1.1.2 || 2", aproba@^2.0.0:
+  version "2.0.0"
+  resolved "https://registry.npm.taobao.org/aproba/download/aproba-2.0.0.tgz#52520b8ae5b569215b354efc0caa3fe1e45a8adc"
+  integrity sha1-UlILiuW1aSFbNU78DKo/4eRaitw=
+
+archy@^1.0.0, archy@~1.0.0:
   version "1.0.0"
   resolved "https://registry.yarnpkg.com/archy/-/archy-1.0.0.tgz#f9c8c13757cc1dd7bc379ac77b2c62a5c2868c40"
+  integrity sha1-+cjBN1fMHde8N5rHeyxipcKGjEA=
 
 are-we-there-yet@~1.1.2:
-  version "1.1.2"
-  resolved "https://registry.yarnpkg.com/are-we-there-yet/-/are-we-there-yet-1.1.2.tgz#80e470e95a084794fe1899262c5667c6e88de1b3"
+  version "1.1.5"
+  resolved "https://registry.yarnpkg.com/are-we-there-yet/-/are-we-there-yet-1.1.5.tgz#4b35c2944f062a8bfcda66410760350fe9ddfc21"
+  integrity sha512-5hYdAkZlcG8tOLujVDTgCT+uPX0VnpAH28gWsLfzpXYm7wP6mp5Q/gYyR7YQ0cKVJcXJnl3j2kpBan13PtQf6w==
   dependencies:
     delegates "^1.0.0"
-    readable-stream "^2.0.0 || ^1.1.13"
+    readable-stream "^2.0.6"
 
 argparse@^1.0.7:
-  version "1.0.9"
-  resolved "http://registry.npm.taobao.org/argparse/download/argparse-1.0.9.tgz#73d83bc263f86e97f8cc4f6bae1b0e90a7d22c86"
+  version "1.0.10"
+  resolved "https://registry.yarnpkg.com/argparse/-/argparse-1.0.10.tgz#bcd6791ea5ae09725e17e5ad988134cd40b3d911"
+  integrity sha512-o5Roy6tNG4SL/FOkCAN6RzjiakZS25RLYFrcMttJqbdd8BWrnA+fGz57iN5Pb06pvBGvl5gQ0B48dJlslXvoTg==
   dependencies:
     sprintf-js "~1.0.2"
 
 arr-diff@^2.0.0:
   version "2.0.0"
   resolved "https://registry.yarnpkg.com/arr-diff/-/arr-diff-2.0.0.tgz#8f3b827f955a8bd669697e4a4256ac3ceae356cf"
+  integrity sha1-jzuCf5Vai9ZpaX5KQlasPOrjVs8=
   dependencies:
     arr-flatten "^1.0.1"
 
-arr-flatten@^1.0.1:
-  version "1.0.1"
-  resolved "https://registry.yarnpkg.com/arr-flatten/-/arr-flatten-1.0.1.tgz#e5ffe54d45e19f32f216e91eb99c8ce892bb604b"
+arr-diff@^4.0.0:
+  version "4.0.0"
+  resolved "https://registry.yarnpkg.com/arr-diff/-/arr-diff-4.0.0.tgz#d6461074febfec71e7e15235761a329a5dc7c520"
+  integrity sha1-1kYQdP6/7HHn4VI1dhoyml3HxSA=
 
-array-differ@^1.0.0:
-  version "1.0.0"
-  resolved "https://registry.yarnpkg.com/array-differ/-/array-differ-1.0.0.tgz#eff52e3758249d33be402b8bb8e564bb2b5d4031"
+arr-filter@^1.1.1:
+  version "1.1.2"
+  resolved "https://registry.yarnpkg.com/arr-filter/-/arr-filter-1.1.2.tgz#43fdddd091e8ef11aa4c45d9cdc18e2dff1711ee"
+  integrity sha1-Q/3d0JHo7xGqTEXZzcGOLf8XEe4=
+  dependencies:
+    make-iterator "^1.0.0"
+
+arr-flatten@^1.0.1, arr-flatten@^1.1.0:
+  version "1.1.0"
+  resolved "https://registry.yarnpkg.com/arr-flatten/-/arr-flatten-1.1.0.tgz#36048bbff4e7b47e136644316c99669ea5ae91f1"
+  integrity sha512-L3hKV5R/p5o81R7O02IGnwpDmkp6E982XhtbuwSe3O4qOtMMMtodicASA1Cny2U+aCXcNpml+m4dPsvsJ3jatg==
+
+arr-map@^2.0.0, arr-map@^2.0.2:
+  version "2.0.2"
+  resolved "https://registry.yarnpkg.com/arr-map/-/arr-map-2.0.2.tgz#3a77345ffc1cf35e2a91825601f9e58f2e24cac4"
+  integrity sha1-Onc0X/wc814qkYJWAfnljy4kysQ=
+  dependencies:
+    make-iterator "^1.0.0"
+
+arr-union@^3.1.0:
+  version "3.1.0"
+  resolved "https://registry.yarnpkg.com/arr-union/-/arr-union-3.1.0.tgz#e39b09aea9def866a8f206e288af63919bae39c4"
+  integrity sha1-45sJrqne+Gao8gbiiK9jkZuuOcQ=
+
+array-each@^1.0.0, array-each@^1.0.1:
+  version "1.0.1"
+  resolved "https://registry.yarnpkg.com/array-each/-/array-each-1.0.1.tgz#a794af0c05ab1752846ee753a1f211a05ba0c44f"
+  integrity sha1-p5SvDAWrF1KEbudTofIRoFugxE8=
 
 array-find-index@^1.0.1:
   version "1.0.2"
   resolved "https://registry.yarnpkg.com/array-find-index/-/array-find-index-1.0.2.tgz#df010aa1287e164bbda6f9723b0a96a1ec4187a1"
+  integrity sha1-3wEKoSh+Fku9pvlyOwqWoexBh6E=
 
 array-flatten@1.1.1:
   version "1.1.1"
   resolved "https://registry.yarnpkg.com/array-flatten/-/array-flatten-1.1.1.tgz#9a5f699051b1e7073328f2a008968b64ea2955d2"
+  integrity sha1-ml9pkFGx5wczKPKgCJaLZOopVdI=
 
 array-flatten@^2.1.0:
+  version "2.1.2"
+  resolved "https://registry.yarnpkg.com/array-flatten/-/array-flatten-2.1.2.tgz#24ef80a28c1a893617e2149b0c6d0d788293b099"
+  integrity sha512-hNfzcOV8W4NdualtqBFPyVO+54DSJuZGY9qT4pRroB6S9e3iiido2ISIC5h9R2sPJ8H3FHCIiEnsv1lPXO3KtQ==
+
+array-from@^2.1.1:
   version "2.1.1"
-  resolved "https://registry.yarnpkg.com/array-flatten/-/array-flatten-2.1.1.tgz#426bb9da84090c1838d812c8150af20a8331e296"
+  resolved "https://registry.npmjs.org/array-from/-/array-from-2.1.1.tgz#cfe9d8c26628b9dc5aecc62a9f5d8f1f352c1195"
+  integrity sha1-z+nYwmYoudxa7MYqn12PHzUsEZU=
 
-array-includes@^3.0.3:
-  version "3.0.3"
-  resolved "https://registry.yarnpkg.com/array-includes/-/array-includes-3.0.3.tgz#184b48f62d92d7452bb31b323165c7f8bd02266d"
+array-ify@^1.0.0:
+  version "1.0.0"
+  resolved "https://registry.npmjs.org/array-ify/-/array-ify-1.0.0.tgz#9e528762b4a9066ad163a6962a364418e9626ece"
+  integrity sha1-nlKHYrSpBmrRY6aWKjZEGOlibs4=
+
+array-initial@^1.0.0:
+  version "1.1.0"
+  resolved "https://registry.yarnpkg.com/array-initial/-/array-initial-1.1.0.tgz#2fa74b26739371c3947bd7a7adc73be334b3d795"
+  integrity sha1-L6dLJnOTccOUe9enrcc74zSz15U=
   dependencies:
-    define-properties "^1.1.2"
-    es-abstract "^1.7.0"
+    array-slice "^1.0.0"
+    is-number "^4.0.0"
 
-array-slice@^0.2.3:
-  version "0.2.3"
-  resolved "https://registry.yarnpkg.com/array-slice/-/array-slice-0.2.3.tgz#dd3cfb80ed7973a75117cdac69b0b99ec86186f5"
+array-last@^1.1.1:
+  version "1.3.0"
+  resolved "https://registry.yarnpkg.com/array-last/-/array-last-1.3.0.tgz#7aa77073fec565ddab2493f5f88185f404a9d336"
+  integrity sha512-eOCut5rXlI6aCOS7Z7kCplKRKyiFQ6dHFBem4PwlwKeNFk2/XxTrhRh5T9PyaEWGy/NHTZWbY+nsZlNFJu9rYg==
+  dependencies:
+    is-number "^4.0.0"
+
+array-slice@^1.0.0:
+  version "1.1.0"
+  resolved "https://registry.yarnpkg.com/array-slice/-/array-slice-1.1.0.tgz#e368ea15f89bc7069f7ffb89aec3a6c7d4ac22d4"
+  integrity sha512-B1qMD3RBP7O8o0H2KbrXDyB0IccejMF15+87Lvlor12ONPRHP6gTjXMNkt/d3ZuOGbAe66hFmaCfECI24Ufp6w==
+
+array-sort@^1.0.0:
+  version "1.0.0"
+  resolved "https://registry.yarnpkg.com/array-sort/-/array-sort-1.0.0.tgz#e4c05356453f56f53512a7d1d6123f2c54c0a88a"
+  integrity sha512-ihLeJkonmdiAsD7vpgN3CRcx2J2S0TiYW+IS/5zHBI7mKUq3ySvBdzzBfD236ubDBQFiiyG3SWCPc+msQ9KoYg==
+  dependencies:
+    default-compare "^1.0.0"
+    get-value "^2.0.6"
+    kind-of "^5.0.2"
 
 array-union@^1.0.1:
   version "1.0.2"
-  resolved "http://registry.npm.taobao.org/array-union/download/array-union-1.0.2.tgz#9a34410e4f4e3da23dea375be5be70f24778ec39"
+  resolved "https://registry.yarnpkg.com/array-union/-/array-union-1.0.2.tgz#9a34410e4f4e3da23dea375be5be70f24778ec39"
+  integrity sha1-mjRBDk9OPaI96jdb5b5w8kd47Dk=
   dependencies:
     array-uniq "^1.0.1"
 
-array-uniq@^1.0.1, array-uniq@^1.0.2:
+array-uniq@^1.0.1:
   version "1.0.3"
-  resolved "http://registry.npm.taobao.org/array-uniq/download/array-uniq-1.0.3.tgz#af6ac877a25cc7f74e058894753858dfdb24fdb6"
+  resolved "https://registry.yarnpkg.com/array-uniq/-/array-uniq-1.0.3.tgz#af6ac877a25cc7f74e058894753858dfdb24fdb6"
+  integrity sha1-r2rId6Jcx/dOBYiUdThY39sk/bY=
 
 array-unique@^0.2.1:
   version "0.2.1"
   resolved "https://registry.yarnpkg.com/array-unique/-/array-unique-0.2.1.tgz#a1d97ccafcbc2625cc70fadceb36a50c58b01a53"
+  integrity sha1-odl8yvy8JiXMcPrc6zalDFiwGlM=
 
-arraybuffer.slice@0.0.6:
-  version "0.0.6"
-  resolved "https://registry.yarnpkg.com/arraybuffer.slice/-/arraybuffer.slice-0.0.6.tgz#f33b2159f0532a3f3107a272c0ccfbd1ad2979ca"
+array-unique@^0.3.2:
+  version "0.3.2"
+  resolved "https://registry.yarnpkg.com/array-unique/-/array-unique-0.3.2.tgz#a894b75d4bc4f6cd679ef3244a9fd8f46ae2d428"
+  integrity sha1-qJS3XUvE9s1nnvMkSp/Y9Gri1Cg=
+
+arraybuffer.slice@~0.0.7:
+  version "0.0.7"
+  resolved "https://registry.npmjs.org/arraybuffer.slice/-/arraybuffer.slice-0.0.7.tgz#3bbc4275dd584cc1b10809b89d4e8b63a69e7675"
+  integrity sha512-wGUIVQXuehL5TCqQun8OW81jGzAWycqzFF8lFp+GOM5BXLYj3bKNsYC4daB7n6XjCqxQA/qgTJ+8ANR3acjrog==
 
-arrify@^1.0.0:
+arrify@^1.0.1:
   version "1.0.1"
-  resolved "http://registry.npm.taobao.org/arrify/download/arrify-1.0.1.tgz#898508da2226f380df904728456849c1501a4b0d"
+  resolved "https://registry.yarnpkg.com/arrify/-/arrify-1.0.1.tgz#898508da2226f380df904728456849c1501a4b0d"
+  integrity sha1-iYUI2iIm84DfkEcoRWhJwVAaSw0=
+
+asap@^2.0.0:
+  version "2.0.6"
+  resolved "https://registry.npm.taobao.org/asap/download/asap-2.0.6.tgz#e50347611d7e690943208bbdafebcbc2fb866d46"
+  integrity sha1-5QNHYR1+aQlDIIu9r+vLwvuGbUY=
 
 asn1.js@^4.0.0:
-  version "4.9.1"
-  resolved "https://registry.yarnpkg.com/asn1.js/-/asn1.js-4.9.1.tgz#48ba240b45a9280e94748990ba597d216617fd40"
+  version "4.10.1"
+  resolved "https://registry.yarnpkg.com/asn1.js/-/asn1.js-4.10.1.tgz#b9c2bf5805f1e64aadeed6df3a2bfafb5a73f5a0"
+  integrity sha512-p32cOF5q0Zqs9uBiONKYLm6BClCoBCM5O9JfeUSlnQLBTxYdTK+pW+nXflm8UkKd2UYlEbYz5qEi0JuZR9ckSw==
   dependencies:
     bn.js "^4.0.0"
     inherits "^2.0.1"
     minimalistic-assert "^1.0.0"
 
 asn1@~0.2.3:
-  version "0.2.3"
-  resolved "https://registry.yarnpkg.com/asn1/-/asn1-0.2.3.tgz#dac8787713c9966849fc8180777ebe9c1ddf3b86"
-
-assert-plus@^0.2.0:
-  version "0.2.0"
-  resolved "https://registry.yarnpkg.com/assert-plus/-/assert-plus-0.2.0.tgz#d74e1b87e7affc0db8aadb7021f3fe48101ab234"
+  version "0.2.4"
+  resolved "https://registry.yarnpkg.com/asn1/-/asn1-0.2.4.tgz#8d2475dfab553bb33e77b54e59e880bb8ce23136"
+  integrity sha512-jxwzQpLQjSmWXgwaCZE9Nz+glAG01yF1QnWgbhGwHI5A6FRIEY6IVqtHhIepHqI7/kyEyQEagBC5mBEFlIYvdg==
+  dependencies:
+    safer-buffer "~2.1.0"
 
-assert-plus@^1.0.0:
+assert-plus@1.0.0, assert-plus@^1.0.0:
   version "1.0.0"
   resolved "https://registry.yarnpkg.com/assert-plus/-/assert-plus-1.0.0.tgz#f12e0f3c5d77b0b1cdd9146942e4e96c1e4dd525"
+  integrity sha1-8S4PPF13sLHN2RRpQuTpbB5N1SU=
 
 assert@^1.1.1:
   version "1.4.1"
   resolved "https://registry.yarnpkg.com/assert/-/assert-1.4.1.tgz#99912d591836b5a6f5b345c0f07eefc08fc65d91"
+  integrity sha1-mZEtWRg2tab1s0XA8H7vwI/GXZE=
   dependencies:
     util "0.10.3"
 
-assertion-error@^1.0.1:
-  version "1.0.2"
-  resolved "https://registry.yarnpkg.com/assertion-error/-/assertion-error-1.0.2.tgz#13ca515d86206da0bac66e834dd397d87581094c"
+assertion-error@^1.1.0:
+  version "1.1.0"
+  resolved "https://registry.npmjs.org/assertion-error/-/assertion-error-1.1.0.tgz#e60b6b0e8f301bd97e5375215bda406c85118c0b"
+  integrity sha512-jgsaNduz+ndvGyFt3uSuWqvy4lCnIJiovtouQN5JZHOKCS2QuhEdbcQHFhVksz2N2U9hXJo8odG7ETyWlEeuDw==
 
-ast-types@0.9.2:
-  version "0.9.2"
-  resolved "https://registry.yarnpkg.com/ast-types/-/ast-types-0.9.2.tgz#2cc19979d15c655108bf565323b8e7ee38751f6b"
+assign-symbols@^1.0.0:
+  version "1.0.0"
+  resolved "https://registry.yarnpkg.com/assign-symbols/-/assign-symbols-1.0.0.tgz#59667f41fadd4f20ccbc2bb96b8d4f7f78ec0367"
+  integrity sha1-WWZ/QfrdTyDMvCu5a41Pf3jsA2c=
+
+async-done@^1.2.0, async-done@^1.2.2:
+  version "1.3.1"
+  resolved "https://registry.yarnpkg.com/async-done/-/async-done-1.3.1.tgz#14b7b73667b864c8f02b5b253fc9c6eddb777f3e"
+  integrity sha512-R1BaUeJ4PMoLNJuk+0tLJgjmEqVsdN118+Z8O+alhnQDQgy0kmD5Mqi0DNEmMx2LM0Ed5yekKu+ZXYvIHceicg==
+  dependencies:
+    end-of-stream "^1.1.0"
+    once "^1.3.2"
+    process-nextick-args "^1.0.7"
+    stream-exhaust "^1.0.1"
 
 async-each@^1.0.0:
   version "1.0.1"
   resolved "https://registry.yarnpkg.com/async-each/-/async-each-1.0.1.tgz#19d386a1d9edc6e7c1c85d388aedbcc56d33602d"
+  integrity sha1-GdOGodntxufByF04iu28xW0zYC0=
+
+async-each@^1.0.1:
+  version "1.0.2"
+  resolved "https://registry.npmjs.org/async-each/-/async-each-1.0.2.tgz#8b8a7ca2a658f927e9f307d6d1a42f4199f0f735"
+  integrity sha512-6xrbvN0MOBKSJDdonmSSz2OwFSgxRaVtBDes26mj9KIGtDo+g9xosFRSC+i1gQh2oAN/tQ62AI/pGZGQjVOiRg==
 
 async-foreach@^0.1.3:
   version "0.1.3"
-  resolved "https://registry.yarnpkg.com/async-foreach/-/async-foreach-0.1.3.tgz#36121f845c0578172de419a97dbeb1d16ec34542"
+  resolved "https://registry.npm.taobao.org/async-foreach/download/async-foreach-0.1.3.tgz#36121f845c0578172de419a97dbeb1d16ec34542"
+  integrity sha1-NhIfhFwFeBct5Bmpfb6x0W7DRUI=
+
+async-limiter@~1.0.0:
+  version "1.0.0"
+  resolved "https://registry.npmjs.org/async-limiter/-/async-limiter-1.0.0.tgz#78faed8c3d074ab81f22b4e985d79e8738f720f8"
+  integrity sha512-jp/uFnooOiO+L211eZOoSyzpOITMXx1rBITauYykG3BRYPu8h0UcxsPNB04RR5vo4Tyz3+ay17tR6JVf9qzYWg==
+
+async-settle@^1.0.0:
+  version "1.0.0"
+  resolved "https://registry.yarnpkg.com/async-settle/-/async-settle-1.0.0.tgz#1d0a914bb02575bec8a8f3a74e5080f72b2c0c6b"
+  integrity sha1-HQqRS7Aldb7IqPOnTlCA9yssDGs=
+  dependencies:
+    async-done "^1.2.2"
 
 async-validator@~1.8.1:
-  version "1.8.1"
-  resolved "https://registry.yarnpkg.com/async-validator/-/async-validator-1.8.1.tgz#6665788ca39269af770e5ee02f0e557f2438d2ca"
+  version "1.8.5"
+  resolved "https://registry.yarnpkg.com/async-validator/-/async-validator-1.8.5.tgz#dc3e08ec1fd0dddb67e60842f02c0cd1cec6d7f0"
+  integrity sha512-tXBM+1m056MAX0E8TL2iCjg8WvSyXu0Zc8LNtYqrVeyoL3+esHRZ4SieE9fKQyyU09uONjnMEjrNBMqT0mbvmA==
   dependencies:
     babel-runtime "6.x"
 
-async@1.5.2, async@1.x, async@^1.4.0, async@^1.5.2:
+async@1.x, async@^1.5.2:
   version "1.5.2"
   resolved "https://registry.yarnpkg.com/async/-/async-1.5.2.tgz#ec6a61ae56480c0c3cb241c95618e20892f9672a"
+  integrity sha1-7GphrlZIDAw8skHJVhjiCJL5Zyo=
 
-async@^2.0.0:
-  version "2.6.0"
-  resolved "http://registry.npm.taobao.org/async/download/async-2.6.0.tgz#61a29abb6fcc026fea77e56d1c6ec53a795951f4"
-  dependencies:
-    lodash "^4.14.0"
-
-async@^2.1.2, async@^2.1.5, async@^2.4.1:
-  version "2.5.0"
-  resolved "https://registry.yarnpkg.com/async/-/async-2.5.0.tgz#843190fd6b7357a0b9e1c956edddd5ec8462b54d"
+async@^2.0.0, async@^2.6.1:
+  version "2.6.2"
+  resolved "https://registry.npmjs.org/async/-/async-2.6.2.tgz#18330ea7e6e313887f5d2f2a904bac6fe4dd5381"
+  integrity sha512-H1qVYh1MYhEEFLsP97cVKqCGo7KfCyTt6uEWqsTBr9SO84oK9Uwbyd/yCW+6rKJLHksBNUVWZDAjfS+Ccx0Bbg==
   dependencies:
-    lodash "^4.14.0"
-
-async@~0.2.6:
-  version "0.2.10"
-  resolved "https://registry.yarnpkg.com/async/-/async-0.2.10.tgz#b6bbe0b0674b9d719708ca38de8c237cb526c3d1"
+    lodash "^4.17.11"
 
 asynckit@^0.4.0:
   version "0.4.0"
   resolved "https://registry.yarnpkg.com/asynckit/-/asynckit-0.4.0.tgz#c79ed97f7f34cb8f2ba1bc9790bcc366474b4b79"
+  integrity sha1-x57Zf380y48robyXkLzDZkdLS3k=
 
-autoprefixer@^6.0.2, autoprefixer@^6.3.1:
-  version "6.5.4"
-  resolved "https://registry.yarnpkg.com/autoprefixer/-/autoprefixer-6.5.4.tgz#1386eb6708ccff36aefff70adc694ecfd60af1b0"
-  dependencies:
-    browserslist "~1.4.0"
-    caniuse-db "^1.0.30000597"
-    normalize-range "^0.1.2"
-    num2fraction "^1.2.2"
-    postcss "^5.2.6"
-    postcss-value-parser "^3.2.3"
+atob@^2.1.1:
+  version "2.1.2"
+  resolved "https://registry.yarnpkg.com/atob/-/atob-2.1.2.tgz#6d9517eb9e030d2436666651e86bd9f6f13533c9"
+  integrity sha512-Wm6ukoaOGJi/73p/cl2GvLjTI5JM1k/O14isD73YML8StrH/7/lRFgmg8nICZgD3bZZvjwCGxtMOD3wWNAu8cg==
 
-autoprefixer@^7.0.0:
-  version "7.1.2"
-  resolved "https://registry.yarnpkg.com/autoprefixer/-/autoprefixer-7.1.2.tgz#fbeaf07d48fd878e0682bf7cbeeade728adb2b18"
+autoprefixer@^9.1.3:
+  version "9.5.0"
+  resolved "https://registry.yarnpkg.com/autoprefixer/-/autoprefixer-9.5.0.tgz#7e51d0355c11596e6cf9a0afc9a44e86d1596c70"
+  integrity sha512-hMKcyHsZn5+qL6AUeP3c8OyuteZ4VaUlg+fWbyl8z7PqsKHF/Bf8/px3K6AT8aMzDkBo8Bc11245MM+itDBOxQ==
   dependencies:
-    browserslist "^2.1.5"
-    caniuse-lite "^1.0.30000697"
+    browserslist "^4.4.2"
+    caniuse-lite "^1.0.30000947"
     normalize-range "^0.1.2"
     num2fraction "^1.2.2"
-    postcss "^6.0.6"
-    postcss-value-parser "^3.2.3"
+    postcss "^7.0.14"
+    postcss-value-parser "^3.3.1"
 
-aws-sign2@~0.6.0:
-  version "0.6.0"
-  resolved "https://registry.yarnpkg.com/aws-sign2/-/aws-sign2-0.6.0.tgz#14342dd38dbcc94d0e5b87d763cd63612c0e794f"
+aws-sign2@~0.7.0:
+  version "0.7.0"
+  resolved "https://registry.yarnpkg.com/aws-sign2/-/aws-sign2-0.7.0.tgz#b46e890934a9591f2d2f6f86d7e6a9f1b3fe76a8"
+  integrity sha1-tG6JCTSpWR8tL2+G1+ap8bP+dqg=
 
-aws4@^1.2.1:
-  version "1.5.0"
-  resolved "https://registry.yarnpkg.com/aws4/-/aws4-1.5.0.tgz#0a29ffb79c31c9e712eeb087e8e7a64b4a56d755"
+aws4@^1.8.0:
+  version "1.8.0"
+  resolved "https://registry.yarnpkg.com/aws4/-/aws4-1.8.0.tgz#f0e003d9ca9e7f59c7a508945d7b2ef9a04a542f"
+  integrity sha512-ReZxvNHIOv88FlT7rxcXIIC0fPt4KZqZbOlivyWtXLt8ESx84zd3kMC6iK5jVeS2qt+g7ftS7ye4fi06X5rtRQ==
 
-babel-cli@^6.14.0:
-  version "6.18.0"
-  resolved "https://registry.yarnpkg.com/babel-cli/-/babel-cli-6.18.0.tgz#92117f341add9dead90f6fa7d0a97c0cc08ec186"
-  dependencies:
-    babel-core "^6.18.0"
-    babel-polyfill "^6.16.0"
-    babel-register "^6.18.0"
-    babel-runtime "^6.9.0"
-    commander "^2.8.1"
-    convert-source-map "^1.1.0"
+axios@^0.19.0:
+  version "0.19.0"
+  resolved "https://registry.npm.taobao.org/axios/download/axios-0.19.0.tgz#8e09bff3d9122e133f7b8101c8fbdd00ed3d2ab8"
+  integrity sha1-jgm/89kSLhM/e4EByPvdAO09Krg=
+  dependencies:
+    follow-redirects "1.5.10"
+    is-buffer "^2.0.2"
+
+babel-cli@^6.26.0:
+  version "6.26.0"
+  resolved "https://registry.yarnpkg.com/babel-cli/-/babel-cli-6.26.0.tgz#502ab54874d7db88ad00b887a06383ce03d002f1"
+  integrity sha1-UCq1SHTX24itALiHoGODzgPQAvE=
+  dependencies:
+    babel-core "^6.26.0"
+    babel-polyfill "^6.26.0"
+    babel-register "^6.26.0"
+    babel-runtime "^6.26.0"
+    commander "^2.11.0"
+    convert-source-map "^1.5.0"
     fs-readdir-recursive "^1.0.0"
-    glob "^5.0.5"
-    lodash "^4.2.0"
-    output-file-sync "^1.1.0"
-    path-is-absolute "^1.0.0"
+    glob "^7.1.2"
+    lodash "^4.17.4"
+    output-file-sync "^1.1.2"
+    path-is-absolute "^1.0.1"
     slash "^1.0.0"
-    source-map "^0.5.0"
-    v8flags "^2.0.10"
+    source-map "^0.5.6"
+    v8flags "^2.1.1"
   optionalDependencies:
-    chokidar "^1.0.0"
+    chokidar "^1.6.1"
 
-babel-code-frame@^6.11.0, babel-code-frame@^6.20.0:
-  version "6.20.0"
-  resolved "https://registry.yarnpkg.com/babel-code-frame/-/babel-code-frame-6.20.0.tgz#b968f839090f9a8bc6d41938fb96cb84f7387b26"
-  dependencies:
-    chalk "^1.1.0"
-    esutils "^2.0.2"
-    js-tokens "^2.0.0"
-
-babel-code-frame@^6.22.0:
+babel-code-frame@^6.22.0, babel-code-frame@^6.26.0:
   version "6.26.0"
-  resolved "http://registry.npm.taobao.org/babel-code-frame/download/babel-code-frame-6.26.0.tgz#63fd43f7dc1e3bb7ce35947db8fe369a3f58c74b"
+  resolved "https://registry.yarnpkg.com/babel-code-frame/-/babel-code-frame-6.26.0.tgz#63fd43f7dc1e3bb7ce35947db8fe369a3f58c74b"
+  integrity sha1-Y/1D99weO7fONZR9uP42mj9Yx0s=
   dependencies:
     chalk "^1.1.3"
     esutils "^2.0.2"
     js-tokens "^3.0.2"
 
-babel-core@^6.1.4, babel-core@^6.14.0, babel-core@^6.18.0, babel-core@~6:
-  version "6.20.0"
-  resolved "https://registry.yarnpkg.com/babel-core/-/babel-core-6.20.0.tgz#ab0d7176d9dea434e66badadaf92237865eab1ec"
-  dependencies:
-    babel-code-frame "^6.20.0"
-    babel-generator "^6.20.0"
-    babel-helpers "^6.16.0"
-    babel-messages "^6.8.0"
-    babel-register "^6.18.0"
-    babel-runtime "^6.20.0"
-    babel-template "^6.16.0"
-    babel-traverse "^6.20.0"
-    babel-types "^6.20.0"
-    babylon "^6.11.0"
-    convert-source-map "^1.1.0"
-    debug "^2.1.1"
-    json5 "^0.5.0"
-    lodash "^4.2.0"
-    minimatch "^3.0.2"
-    path-is-absolute "^1.0.0"
-    private "^0.1.6"
+babel-core@^6.26.0, babel-core@^6.26.3:
+  version "6.26.3"
+  resolved "https://registry.yarnpkg.com/babel-core/-/babel-core-6.26.3.tgz#b2e2f09e342d0f0c88e2f02e067794125e75c207"
+  integrity sha512-6jyFLuDmeidKmUEb3NM+/yawG0M2bDZ9Z1qbZP59cyHLz8kYGKYwpJP0UwUKKUiTRNvxfLesJnTedqczP7cTDA==
+  dependencies:
+    babel-code-frame "^6.26.0"
+    babel-generator "^6.26.0"
+    babel-helpers "^6.24.1"
+    babel-messages "^6.23.0"
+    babel-register "^6.26.0"
+    babel-runtime "^6.26.0"
+    babel-template "^6.26.0"
+    babel-traverse "^6.26.0"
+    babel-types "^6.26.0"
+    babylon "^6.18.0"
+    convert-source-map "^1.5.1"
+    debug "^2.6.9"
+    json5 "^0.5.1"
+    lodash "^4.17.4"
+    minimatch "^3.0.4"
+    path-is-absolute "^1.0.1"
+    private "^0.1.8"
     slash "^1.0.0"
-    source-map "^0.5.0"
+    source-map "^0.5.7"
 
-babel-generator@^6.20.0:
-  version "6.20.0"
-  resolved "https://registry.yarnpkg.com/babel-generator/-/babel-generator-6.20.0.tgz#fee63614e0449390103b3097f3f6a118016c6766"
+babel-generator@^6.18.0, babel-generator@^6.26.0:
+  version "6.26.1"
+  resolved "https://registry.yarnpkg.com/babel-generator/-/babel-generator-6.26.1.tgz#1844408d3b8f0d35a404ea7ac180f087a601bd90"
+  integrity sha512-HyfwY6ApZj7BYTcJURpM5tznulaBvyio7/0d4zFOeMPUmfxkCjHocCuoLa2SAGzBI8AREcH3eP3758F672DppA==
   dependencies:
-    babel-messages "^6.8.0"
-    babel-runtime "^6.20.0"
-    babel-types "^6.20.0"
+    babel-messages "^6.23.0"
+    babel-runtime "^6.26.0"
+    babel-types "^6.26.0"
     detect-indent "^4.0.0"
     jsesc "^1.3.0"
-    lodash "^4.2.0"
-    source-map "^0.5.0"
-
-babel-helper-call-delegate@^6.18.0:
-  version "6.18.0"
-  resolved "https://registry.yarnpkg.com/babel-helper-call-delegate/-/babel-helper-call-delegate-6.18.0.tgz#05b14aafa430884b034097ef29e9f067ea4133bd"
+    lodash "^4.17.4"
+    source-map "^0.5.7"
+    trim-right "^1.0.1"
+
+babel-helper-bindify-decorators@^6.24.1:
+  version "6.24.1"
+  resolved "https://registry.yarnpkg.com/babel-helper-bindify-decorators/-/babel-helper-bindify-decorators-6.24.1.tgz#14c19e5f142d7b47f19a52431e52b1ccbc40a330"
+  integrity sha1-FMGeXxQte0fxmlJDHlKxzLxAozA=
+  dependencies:
+    babel-runtime "^6.22.0"
+    babel-traverse "^6.24.1"
+    babel-types "^6.24.1"
+
+babel-helper-builder-binary-assignment-operator-visitor@^6.24.1:
+  version "6.24.1"
+  resolved "https://registry.yarnpkg.com/babel-helper-builder-binary-assignment-operator-visitor/-/babel-helper-builder-binary-assignment-operator-visitor-6.24.1.tgz#cce4517ada356f4220bcae8a02c2b346f9a56664"
+  integrity sha1-zORReto1b0IgvK6KAsKzRvmlZmQ=
+  dependencies:
+    babel-helper-explode-assignable-expression "^6.24.1"
+    babel-runtime "^6.22.0"
+    babel-types "^6.24.1"
+
+babel-helper-call-delegate@^6.24.1:
+  version "6.24.1"
+  resolved "https://registry.yarnpkg.com/babel-helper-call-delegate/-/babel-helper-call-delegate-6.24.1.tgz#ece6aacddc76e41c3461f88bfc575bd0daa2df8d"
+  integrity sha1-7Oaqzdx25Bw0YfiL/Fdb0Nqi340=
+  dependencies:
+    babel-helper-hoist-variables "^6.24.1"
+    babel-runtime "^6.22.0"
+    babel-traverse "^6.24.1"
+    babel-types "^6.24.1"
+
+babel-helper-define-map@^6.24.1:
+  version "6.26.0"
+  resolved "https://registry.yarnpkg.com/babel-helper-define-map/-/babel-helper-define-map-6.26.0.tgz#a5f56dab41a25f97ecb498c7ebaca9819f95be5f"
+  integrity sha1-pfVtq0GiX5fstJjH66ypgZ+Vvl8=
   dependencies:
-    babel-helper-hoist-variables "^6.18.0"
-    babel-runtime "^6.0.0"
-    babel-traverse "^6.18.0"
-    babel-types "^6.18.0"
+    babel-helper-function-name "^6.24.1"
+    babel-runtime "^6.26.0"
+    babel-types "^6.26.0"
+    lodash "^4.17.4"
 
-babel-helper-define-map@^6.18.0, babel-helper-define-map@^6.8.0:
-  version "6.18.0"
-  resolved "https://registry.yarnpkg.com/babel-helper-define-map/-/babel-helper-define-map-6.18.0.tgz#8d6c85dc7fbb4c19be3de40474d18e97c3676ec2"
+babel-helper-explode-assignable-expression@^6.24.1:
+  version "6.24.1"
+  resolved "https://registry.yarnpkg.com/babel-helper-explode-assignable-expression/-/babel-helper-explode-assignable-expression-6.24.1.tgz#f25b82cf7dc10433c55f70592d5746400ac22caa"
+  integrity sha1-8luCz33BBDPFX3BZLVdGQArCLKo=
+  dependencies:
+    babel-runtime "^6.22.0"
+    babel-traverse "^6.24.1"
+    babel-types "^6.24.1"
+
+babel-helper-explode-class@^6.24.1:
+  version "6.24.1"
+  resolved "https://registry.yarnpkg.com/babel-helper-explode-class/-/babel-helper-explode-class-6.24.1.tgz#7dc2a3910dee007056e1e31d640ced3d54eaa9eb"
+  integrity sha1-fcKjkQ3uAHBW4eMdZAztPVTqqes=
+  dependencies:
+    babel-helper-bindify-decorators "^6.24.1"
+    babel-runtime "^6.22.0"
+    babel-traverse "^6.24.1"
+    babel-types "^6.24.1"
+
+babel-helper-function-name@^6.24.1:
+  version "6.24.1"
+  resolved "https://registry.yarnpkg.com/babel-helper-function-name/-/babel-helper-function-name-6.24.1.tgz#d3475b8c03ed98242a25b48351ab18399d3580a9"
+  integrity sha1-00dbjAPtmCQqJbSDUasYOZ01gKk=
+  dependencies:
+    babel-helper-get-function-arity "^6.24.1"
+    babel-runtime "^6.22.0"
+    babel-template "^6.24.1"
+    babel-traverse "^6.24.1"
+    babel-types "^6.24.1"
+
+babel-helper-get-function-arity@^6.24.1:
+  version "6.24.1"
+  resolved "https://registry.yarnpkg.com/babel-helper-get-function-arity/-/babel-helper-get-function-arity-6.24.1.tgz#8f7782aa93407c41d3aa50908f89b031b1b6853d"
+  integrity sha1-j3eCqpNAfEHTqlCQj4mwMbG2hT0=
+  dependencies:
+    babel-runtime "^6.22.0"
+    babel-types "^6.24.1"
+
+babel-helper-hoist-variables@^6.24.1:
+  version "6.24.1"
+  resolved "https://registry.yarnpkg.com/babel-helper-hoist-variables/-/babel-helper-hoist-variables-6.24.1.tgz#1ecb27689c9d25513eadbc9914a73f5408be7a76"
+  integrity sha1-HssnaJydJVE+rbyZFKc/VAi+enY=
+  dependencies:
+    babel-runtime "^6.22.0"
+    babel-types "^6.24.1"
+
+babel-helper-optimise-call-expression@^6.24.1:
+  version "6.24.1"
+  resolved "https://registry.yarnpkg.com/babel-helper-optimise-call-expression/-/babel-helper-optimise-call-expression-6.24.1.tgz#f7a13427ba9f73f8f4fa993c54a97882d1244257"
+  integrity sha1-96E0J7qfc/j0+pk8VKl4gtEkQlc=
+  dependencies:
+    babel-runtime "^6.22.0"
+    babel-types "^6.24.1"
+
+babel-helper-regex@^6.24.1:
+  version "6.26.0"
+  resolved "https://registry.yarnpkg.com/babel-helper-regex/-/babel-helper-regex-6.26.0.tgz#325c59f902f82f24b74faceed0363954f6495e72"
+  integrity sha1-MlxZ+QL4LyS3T6zu0DY5VPZJXnI=
   dependencies:
-    babel-helper-function-name "^6.18.0"
-    babel-runtime "^6.9.0"
-    babel-types "^6.18.0"
-    lodash "^4.2.0"
+    babel-runtime "^6.26.0"
+    babel-types "^6.26.0"
+    lodash "^4.17.4"
 
-babel-helper-function-name@^6.18.0, babel-helper-function-name@^6.8.0:
-  version "6.18.0"
-  resolved "https://registry.yarnpkg.com/babel-helper-function-name/-/babel-helper-function-name-6.18.0.tgz#68ec71aeba1f3e28b2a6f0730190b754a9bf30e6"
-  dependencies:
-    babel-helper-get-function-arity "^6.18.0"
-    babel-runtime "^6.0.0"
-    babel-template "^6.8.0"
-    babel-traverse "^6.18.0"
-    babel-types "^6.18.0"
+babel-helper-remap-async-to-generator@^6.24.1:
+  version "6.24.1"
+  resolved "https://registry.yarnpkg.com/babel-helper-remap-async-to-generator/-/babel-helper-remap-async-to-generator-6.24.1.tgz#5ec581827ad723fecdd381f1c928390676e4551b"
+  integrity sha1-XsWBgnrXI/7N04HxySg5BnbkVRs=
+  dependencies:
+    babel-helper-function-name "^6.24.1"
+    babel-runtime "^6.22.0"
+    babel-template "^6.24.1"
+    babel-traverse "^6.24.1"
+    babel-types "^6.24.1"
+
+babel-helper-replace-supers@^6.24.1:
+  version "6.24.1"
+  resolved "https://registry.yarnpkg.com/babel-helper-replace-supers/-/babel-helper-replace-supers-6.24.1.tgz#bf6dbfe43938d17369a213ca8a8bf74b6a90ab1a"
+  integrity sha1-v22/5Dk40XNpohPKiov3S2qQqxo=
+  dependencies:
+    babel-helper-optimise-call-expression "^6.24.1"
+    babel-messages "^6.23.0"
+    babel-runtime "^6.22.0"
+    babel-template "^6.24.1"
+    babel-traverse "^6.24.1"
+    babel-types "^6.24.1"
 
-babel-helper-get-function-arity@^6.18.0:
-  version "6.18.0"
-  resolved "https://registry.yarnpkg.com/babel-helper-get-function-arity/-/babel-helper-get-function-arity-6.18.0.tgz#a5b19695fd3f9cdfc328398b47dafcd7094f9f24"
-  dependencies:
-    babel-runtime "^6.0.0"
-    babel-types "^6.18.0"
+babel-helper-vue-jsx-merge-props@^2.0.0:
+  version "2.0.3"
+  resolved "https://registry.yarnpkg.com/babel-helper-vue-jsx-merge-props/-/babel-helper-vue-jsx-merge-props-2.0.3.tgz#22aebd3b33902328e513293a8e4992b384f9f1b6"
+  integrity sha512-gsLiKK7Qrb7zYJNgiXKpXblxbV5ffSwR0f5whkPAaBAR4fhi6bwRZxX9wBlIc5M/v8CCkXUbXZL4N/nSE97cqg==
 
-babel-helper-hoist-variables@^6.18.0:
-  version "6.18.0"
-  resolved "https://registry.yarnpkg.com/babel-helper-hoist-variables/-/babel-helper-hoist-variables-6.18.0.tgz#a835b5ab8b46d6de9babefae4d98ea41e866b82a"
+babel-helpers@^6.24.1:
+  version "6.24.1"
+  resolved "https://registry.yarnpkg.com/babel-helpers/-/babel-helpers-6.24.1.tgz#3471de9caec388e5c850e597e58a26ddf37602b2"
+  integrity sha1-NHHenK7DiOXIUOWX5Yom3fN2ArI=
   dependencies:
-    babel-runtime "^6.0.0"
-    babel-types "^6.18.0"
+    babel-runtime "^6.22.0"
+    babel-template "^6.24.1"
 
-babel-helper-optimise-call-expression@^6.18.0:
-  version "6.18.0"
-  resolved "https://registry.yarnpkg.com/babel-helper-optimise-call-expression/-/babel-helper-optimise-call-expression-6.18.0.tgz#9261d0299ee1a4f08a6dd28b7b7c777348fd8f0f"
+babel-loader@^7.1.5:
+  version "7.1.5"
+  resolved "https://registry.yarnpkg.com/babel-loader/-/babel-loader-7.1.5.tgz#e3ee0cd7394aa557e013b02d3e492bfd07aa6d68"
+  integrity sha512-iCHfbieL5d1LfOQeeVJEUyD9rTwBcP/fcEbRCfempxTDuqrKpu0AZjLAQHEQa3Yqyj9ORKe2iHfoj4rHLf7xpw==
   dependencies:
-    babel-runtime "^6.0.0"
-    babel-types "^6.18.0"
+    find-cache-dir "^1.0.0"
+    loader-utils "^1.0.2"
+    mkdirp "^0.5.1"
 
-babel-helper-regex@^6.8.0:
-  version "6.18.0"
-  resolved "https://registry.yarnpkg.com/babel-helper-regex/-/babel-helper-regex-6.18.0.tgz#ae0ebfd77de86cb2f1af258e2cc20b5fe893ecc6"
+babel-messages@^6.23.0:
+  version "6.23.0"
+  resolved "https://registry.yarnpkg.com/babel-messages/-/babel-messages-6.23.0.tgz#f3cdf4703858035b2a2951c6ec5edf6c62f2630e"
+  integrity sha1-8830cDhYA1sqKVHG7F7fbGLyYw4=
   dependencies:
-    babel-runtime "^6.9.0"
-    babel-types "^6.18.0"
-    lodash "^4.2.0"
+    babel-runtime "^6.22.0"
 
-babel-helper-replace-supers@^6.18.0, babel-helper-replace-supers@^6.8.0:
-  version "6.18.0"
-  resolved "https://registry.yarnpkg.com/babel-helper-replace-supers/-/babel-helper-replace-supers-6.18.0.tgz#28ec69877be4144dbd64f4cc3a337e89f29a924e"
+babel-plugin-add-module-exports@^0.2.1:
+  version "0.2.1"
+  resolved "https://registry.yarnpkg.com/babel-plugin-add-module-exports/-/babel-plugin-add-module-exports-0.2.1.tgz#9ae9a1f4a8dc67f0cdec4f4aeda1e43a5ff65e25"
+  integrity sha1-mumh9KjcZ/DN7E9K7aHkOl/2XiU=
+
+babel-plugin-check-es2015-constants@^6.22.0:
+  version "6.22.0"
+  resolved "https://registry.yarnpkg.com/babel-plugin-check-es2015-constants/-/babel-plugin-check-es2015-constants-6.22.0.tgz#35157b101426fd2ffd3da3f75c7d1e91835bbf8a"
+  integrity sha1-NRV7EBQm/S/9PaP3XH0ekYNbv4o=
   dependencies:
-    babel-helper-optimise-call-expression "^6.18.0"
-    babel-messages "^6.8.0"
-    babel-runtime "^6.0.0"
-    babel-template "^6.16.0"
-    babel-traverse "^6.18.0"
-    babel-types "^6.18.0"
+    babel-runtime "^6.22.0"
 
-babel-helper-vue-jsx-merge-props@^2.0.0:
-  version "2.0.2"
-  resolved "https://registry.yarnpkg.com/babel-helper-vue-jsx-merge-props/-/babel-helper-vue-jsx-merge-props-2.0.2.tgz#aceb1c373588279e2755ea1cfd35c22394fd33f8"
+babel-plugin-istanbul@^4.1.1:
+  version "4.1.6"
+  resolved "https://registry.yarnpkg.com/babel-plugin-istanbul/-/babel-plugin-istanbul-4.1.6.tgz#36c59b2192efce81c5b378321b74175add1c9a45"
+  integrity sha512-PWP9FQ1AhZhS01T/4qLSKoHGY/xvkZdVBGlKM/HuxxS3+sC66HhTNR7+MpbO/so/cz/wY94MeSWJuP1hXIPfwQ==
+  dependencies:
+    babel-plugin-syntax-object-rest-spread "^6.13.0"
+    find-up "^2.1.0"
+    istanbul-lib-instrument "^1.10.1"
+    test-exclude "^4.2.1"
 
-babel-helpers@^6.16.0:
-  version "6.16.0"
-  resolved "https://registry.yarnpkg.com/babel-helpers/-/babel-helpers-6.16.0.tgz#1095ec10d99279460553e67eb3eee9973d3867e3"
-  dependencies:
-    babel-runtime "^6.0.0"
-    babel-template "^6.16.0"
-
-babel-loader@^7.1.2:
-  version "7.1.4"
-  resolved "http://registry.npm.taobao.org/babel-loader/download/babel-loader-7.1.4.tgz#e3463938bd4e6d55d1c174c5485d406a188ed015"
-  dependencies:
-    find-cache-dir "^1.0.0"
-    loader-utils "^1.0.2"
-    mkdirp "^0.5.1"
-
-babel-messages@^6.8.0:
-  version "6.8.0"
-  resolved "https://registry.yarnpkg.com/babel-messages/-/babel-messages-6.8.0.tgz#bf504736ca967e6d65ef0adb5a2a5f947c8e0eb9"
-  dependencies:
-    babel-runtime "^6.0.0"
-
-babel-plugin-add-module-exports@^0.2.1:
-  version "0.2.1"
-  resolved "https://registry.yarnpkg.com/babel-plugin-add-module-exports/-/babel-plugin-add-module-exports-0.2.1.tgz#9ae9a1f4a8dc67f0cdec4f4aeda1e43a5ff65e25"
-
-babel-plugin-check-es2015-constants@^6.3.13:
-  version "6.8.0"
-  resolved "https://registry.yarnpkg.com/babel-plugin-check-es2015-constants/-/babel-plugin-check-es2015-constants-6.8.0.tgz#dbf024c32ed37bfda8dee1e76da02386a8d26fe7"
-  dependencies:
-    babel-runtime "^6.0.0"
-
-babel-plugin-module-resolver@^2.2.0:
-  version "2.4.0"
-  resolved "https://registry.yarnpkg.com/babel-plugin-module-resolver/-/babel-plugin-module-resolver-2.4.0.tgz#b7b66e1494ebf955d5f6d83d59d3f282d7c1d71f"
+babel-plugin-module-resolver@^2.2.0:
+  version "2.7.1"
+  resolved "https://registry.yarnpkg.com/babel-plugin-module-resolver/-/babel-plugin-module-resolver-2.7.1.tgz#18be3c42ddf59f7a456c9e0512cd91394f6e4be1"
+  integrity sha1-GL48Qt31n3pFbJ4FEs2ROU9uS+E=
   dependencies:
     find-babel-config "^1.0.1"
     glob "^7.1.1"
-    resolve "^1.1.7"
+    resolve "^1.2.0"
 
-babel-plugin-syntax-jsx@^6.8.0:
-  version "6.18.0"
-  resolved "https://registry.yarnpkg.com/babel-plugin-syntax-jsx/-/babel-plugin-syntax-jsx-6.18.0.tgz#0af32a9a6e13ca7a3fd5069e62d7b0f58d0d8946"
+babel-plugin-syntax-async-functions@^6.8.0:
+  version "6.13.0"
+  resolved "https://registry.yarnpkg.com/babel-plugin-syntax-async-functions/-/babel-plugin-syntax-async-functions-6.13.0.tgz#cad9cad1191b5ad634bf30ae0872391e0647be95"
+  integrity sha1-ytnK0RkbWtY0vzCuCHI5HgZHvpU=
 
-babel-plugin-transform-es2015-arrow-functions@^6.3.13:
-  version "6.8.0"
-  resolved "https://registry.yarnpkg.com/babel-plugin-transform-es2015-arrow-functions/-/babel-plugin-transform-es2015-arrow-functions-6.8.0.tgz#5b63afc3181bdc9a8c4d481b5a4f3f7d7fef3d9d"
-  dependencies:
-    babel-runtime "^6.0.0"
+babel-plugin-syntax-async-generators@^6.5.0:
+  version "6.13.0"
+  resolved "https://registry.yarnpkg.com/babel-plugin-syntax-async-generators/-/babel-plugin-syntax-async-generators-6.13.0.tgz#6bc963ebb16eccbae6b92b596eb7f35c342a8b9a"
+  integrity sha1-a8lj67FuzLrmuStZbrfzXDQqi5o=
 
-babel-plugin-transform-es2015-block-scoped-functions@^6.3.13:
-  version "6.8.0"
-  resolved "https://registry.yarnpkg.com/babel-plugin-transform-es2015-block-scoped-functions/-/babel-plugin-transform-es2015-block-scoped-functions-6.8.0.tgz#ed95d629c4b5a71ae29682b998f70d9833eb366d"
-  dependencies:
-    babel-runtime "^6.0.0"
+babel-plugin-syntax-class-properties@^6.8.0:
+  version "6.13.0"
+  resolved "https://registry.yarnpkg.com/babel-plugin-syntax-class-properties/-/babel-plugin-syntax-class-properties-6.13.0.tgz#d7eb23b79a317f8543962c505b827c7d6cac27de"
+  integrity sha1-1+sjt5oxf4VDlixQW4J8fWysJ94=
 
-babel-plugin-transform-es2015-block-scoping@^6.18.0:
-  version "6.20.0"
-  resolved "https://registry.yarnpkg.com/babel-plugin-transform-es2015-block-scoping/-/babel-plugin-transform-es2015-block-scoping-6.20.0.tgz#5d8f3e83b1a1ae1064e64a9e5bb83108d8e73be3"
-  dependencies:
-    babel-runtime "^6.20.0"
-    babel-template "^6.15.0"
-    babel-traverse "^6.20.0"
-    babel-types "^6.20.0"
-    lodash "^4.2.0"
+babel-plugin-syntax-decorators@^6.13.0:
+  version "6.13.0"
+  resolved "https://registry.yarnpkg.com/babel-plugin-syntax-decorators/-/babel-plugin-syntax-decorators-6.13.0.tgz#312563b4dbde3cc806cee3e416cceeaddd11ac0b"
+  integrity sha1-MSVjtNvePMgGzuPkFszurd0RrAs=
 
-babel-plugin-transform-es2015-classes@^6.18.0:
+babel-plugin-syntax-dynamic-import@^6.18.0:
   version "6.18.0"
-  resolved "https://registry.yarnpkg.com/babel-plugin-transform-es2015-classes/-/babel-plugin-transform-es2015-classes-6.18.0.tgz#ffe7a17321bf83e494dcda0ae3fc72df48ffd1d9"
-  dependencies:
-    babel-helper-define-map "^6.18.0"
-    babel-helper-function-name "^6.18.0"
-    babel-helper-optimise-call-expression "^6.18.0"
-    babel-helper-replace-supers "^6.18.0"
-    babel-messages "^6.8.0"
-    babel-runtime "^6.9.0"
-    babel-template "^6.14.0"
-    babel-traverse "^6.18.0"
-    babel-types "^6.18.0"
+  resolved "https://registry.yarnpkg.com/babel-plugin-syntax-dynamic-import/-/babel-plugin-syntax-dynamic-import-6.18.0.tgz#8d6a26229c83745a9982a441051572caa179b1da"
+  integrity sha1-jWomIpyDdFqZgqRBBRVyyqF5sdo=
 
-babel-plugin-transform-es2015-computed-properties@^6.3.13:
-  version "6.8.0"
-  resolved "https://registry.yarnpkg.com/babel-plugin-transform-es2015-computed-properties/-/babel-plugin-transform-es2015-computed-properties-6.8.0.tgz#f51010fd61b3bd7b6b60a5fdfd307bb7a5279870"
-  dependencies:
-    babel-helper-define-map "^6.8.0"
-    babel-runtime "^6.0.0"
-    babel-template "^6.8.0"
-
-babel-plugin-transform-es2015-destructuring@^6.18.0:
-  version "6.19.0"
-  resolved "https://registry.yarnpkg.com/babel-plugin-transform-es2015-destructuring/-/babel-plugin-transform-es2015-destructuring-6.19.0.tgz#ff1d911c4b3f4cab621bd66702a869acd1900533"
-  dependencies:
-    babel-runtime "^6.9.0"
+babel-plugin-syntax-exponentiation-operator@^6.8.0:
+  version "6.13.0"
+  resolved "https://registry.yarnpkg.com/babel-plugin-syntax-exponentiation-operator/-/babel-plugin-syntax-exponentiation-operator-6.13.0.tgz#9ee7e8337290da95288201a6a57f4170317830de"
+  integrity sha1-nufoM3KQ2pUoggGmpX9BcDF4MN4=
 
-babel-plugin-transform-es2015-duplicate-keys@^6.6.0:
-  version "6.8.0"
-  resolved "https://registry.yarnpkg.com/babel-plugin-transform-es2015-duplicate-keys/-/babel-plugin-transform-es2015-duplicate-keys-6.8.0.tgz#fd8f7f7171fc108cc1c70c3164b9f15a81c25f7d"
-  dependencies:
-    babel-runtime "^6.0.0"
-    babel-types "^6.8.0"
-
-babel-plugin-transform-es2015-for-of@^6.18.0:
+babel-plugin-syntax-jsx@^6.18.0:
   version "6.18.0"
-  resolved "https://registry.yarnpkg.com/babel-plugin-transform-es2015-for-of/-/babel-plugin-transform-es2015-for-of-6.18.0.tgz#4c517504db64bf8cfc119a6b8f177211f2028a70"
-  dependencies:
-    babel-runtime "^6.0.0"
-
-babel-plugin-transform-es2015-function-name@^6.9.0:
-  version "6.9.0"
-  resolved "https://registry.yarnpkg.com/babel-plugin-transform-es2015-function-name/-/babel-plugin-transform-es2015-function-name-6.9.0.tgz#8c135b17dbd064e5bba56ec511baaee2fca82719"
+  resolved "https://registry.yarnpkg.com/babel-plugin-syntax-jsx/-/babel-plugin-syntax-jsx-6.18.0.tgz#0af32a9a6e13ca7a3fd5069e62d7b0f58d0d8946"
+  integrity sha1-CvMqmm4Tyno/1QaeYtew9Y0NiUY=
+
+babel-plugin-syntax-object-rest-spread@^6.13.0, babel-plugin-syntax-object-rest-spread@^6.8.0:
+  version "6.13.0"
+  resolved "https://registry.yarnpkg.com/babel-plugin-syntax-object-rest-spread/-/babel-plugin-syntax-object-rest-spread-6.13.0.tgz#fd6536f2bce13836ffa3a5458c4903a597bb3bf5"
+  integrity sha1-/WU28rzhODb/o6VFjEkDpZe7O/U=
+
+babel-plugin-syntax-trailing-function-commas@^6.22.0:
+  version "6.22.0"
+  resolved "https://registry.yarnpkg.com/babel-plugin-syntax-trailing-function-commas/-/babel-plugin-syntax-trailing-function-commas-6.22.0.tgz#ba0360937f8d06e40180a43fe0d5616fff532cf3"
+  integrity sha1-ugNgk3+NBuQBgKQ/4NVhb/9TLPM=
+
+babel-plugin-transform-async-generator-functions@^6.24.1:
+  version "6.24.1"
+  resolved "https://registry.yarnpkg.com/babel-plugin-transform-async-generator-functions/-/babel-plugin-transform-async-generator-functions-6.24.1.tgz#f058900145fd3e9907a6ddf28da59f215258a5db"
+  integrity sha1-8FiQAUX9PpkHpt3yjaWfIVJYpds=
+  dependencies:
+    babel-helper-remap-async-to-generator "^6.24.1"
+    babel-plugin-syntax-async-generators "^6.5.0"
+    babel-runtime "^6.22.0"
+
+babel-plugin-transform-async-to-generator@^6.22.0, babel-plugin-transform-async-to-generator@^6.24.1:
+  version "6.24.1"
+  resolved "https://registry.yarnpkg.com/babel-plugin-transform-async-to-generator/-/babel-plugin-transform-async-to-generator-6.24.1.tgz#6536e378aff6cb1d5517ac0e40eb3e9fc8d08761"
+  integrity sha1-ZTbjeK/2yx1VF6wOQOs+n8jQh2E=
+  dependencies:
+    babel-helper-remap-async-to-generator "^6.24.1"
+    babel-plugin-syntax-async-functions "^6.8.0"
+    babel-runtime "^6.22.0"
+
+babel-plugin-transform-class-properties@^6.24.1:
+  version "6.24.1"
+  resolved "https://registry.yarnpkg.com/babel-plugin-transform-class-properties/-/babel-plugin-transform-class-properties-6.24.1.tgz#6a79763ea61d33d36f37b611aa9def81a81b46ac"
+  integrity sha1-anl2PqYdM9NvN7YRqp3vgagbRqw=
+  dependencies:
+    babel-helper-function-name "^6.24.1"
+    babel-plugin-syntax-class-properties "^6.8.0"
+    babel-runtime "^6.22.0"
+    babel-template "^6.24.1"
+
+babel-plugin-transform-decorators@^6.24.1:
+  version "6.24.1"
+  resolved "https://registry.yarnpkg.com/babel-plugin-transform-decorators/-/babel-plugin-transform-decorators-6.24.1.tgz#788013d8f8c6b5222bdf7b344390dfd77569e24d"
+  integrity sha1-eIAT2PjGtSIr33s0Q5Df13Vp4k0=
+  dependencies:
+    babel-helper-explode-class "^6.24.1"
+    babel-plugin-syntax-decorators "^6.13.0"
+    babel-runtime "^6.22.0"
+    babel-template "^6.24.1"
+    babel-types "^6.24.1"
+
+babel-plugin-transform-es2015-arrow-functions@^6.22.0:
+  version "6.22.0"
+  resolved "https://registry.yarnpkg.com/babel-plugin-transform-es2015-arrow-functions/-/babel-plugin-transform-es2015-arrow-functions-6.22.0.tgz#452692cb711d5f79dc7f85e440ce41b9f244d221"
+  integrity sha1-RSaSy3EdX3ncf4XkQM5BufJE0iE=
+  dependencies:
+    babel-runtime "^6.22.0"
+
+babel-plugin-transform-es2015-block-scoped-functions@^6.22.0:
+  version "6.22.0"
+  resolved "https://registry.yarnpkg.com/babel-plugin-transform-es2015-block-scoped-functions/-/babel-plugin-transform-es2015-block-scoped-functions-6.22.0.tgz#bbc51b49f964d70cb8d8e0b94e820246ce3a6141"
+  integrity sha1-u8UbSflk1wy42OC5ToICRs46YUE=
+  dependencies:
+    babel-runtime "^6.22.0"
+
+babel-plugin-transform-es2015-block-scoping@^6.23.0:
+  version "6.26.0"
+  resolved "https://registry.yarnpkg.com/babel-plugin-transform-es2015-block-scoping/-/babel-plugin-transform-es2015-block-scoping-6.26.0.tgz#d70f5299c1308d05c12f463813b0a09e73b1895f"
+  integrity sha1-1w9SmcEwjQXBL0Y4E7CgnnOxiV8=
   dependencies:
-    babel-helper-function-name "^6.8.0"
-    babel-runtime "^6.9.0"
-    babel-types "^6.9.0"
+    babel-runtime "^6.26.0"
+    babel-template "^6.26.0"
+    babel-traverse "^6.26.0"
+    babel-types "^6.26.0"
+    lodash "^4.17.4"
 
-babel-plugin-transform-es2015-literals@^6.3.13:
-  version "6.8.0"
-  resolved "https://registry.yarnpkg.com/babel-plugin-transform-es2015-literals/-/babel-plugin-transform-es2015-literals-6.8.0.tgz#50aa2e5c7958fc2ab25d74ec117e0cc98f046468"
-  dependencies:
-    babel-runtime "^6.0.0"
+babel-plugin-transform-es2015-classes@^6.23.0:
+  version "6.24.1"
+  resolved "https://registry.yarnpkg.com/babel-plugin-transform-es2015-classes/-/babel-plugin-transform-es2015-classes-6.24.1.tgz#5a4c58a50c9c9461e564b4b2a3bfabc97a2584db"
+  integrity sha1-WkxYpQyclGHlZLSyo7+ryXolhNs=
+  dependencies:
+    babel-helper-define-map "^6.24.1"
+    babel-helper-function-name "^6.24.1"
+    babel-helper-optimise-call-expression "^6.24.1"
+    babel-helper-replace-supers "^6.24.1"
+    babel-messages "^6.23.0"
+    babel-runtime "^6.22.0"
+    babel-template "^6.24.1"
+    babel-traverse "^6.24.1"
+    babel-types "^6.24.1"
+
+babel-plugin-transform-es2015-computed-properties@^6.22.0:
+  version "6.24.1"
+  resolved "https://registry.yarnpkg.com/babel-plugin-transform-es2015-computed-properties/-/babel-plugin-transform-es2015-computed-properties-6.24.1.tgz#6fe2a8d16895d5634f4cd999b6d3480a308159b3"
+  integrity sha1-b+Ko0WiV1WNPTNmZttNICjCBWbM=
+  dependencies:
+    babel-runtime "^6.22.0"
+    babel-template "^6.24.1"
+
+babel-plugin-transform-es2015-destructuring@^6.23.0:
+  version "6.23.0"
+  resolved "https://registry.yarnpkg.com/babel-plugin-transform-es2015-destructuring/-/babel-plugin-transform-es2015-destructuring-6.23.0.tgz#997bb1f1ab967f682d2b0876fe358d60e765c56d"
+  integrity sha1-mXux8auWf2gtKwh2/jWNYOdlxW0=
+  dependencies:
+    babel-runtime "^6.22.0"
+
+babel-plugin-transform-es2015-duplicate-keys@^6.22.0:
+  version "6.24.1"
+  resolved "https://registry.yarnpkg.com/babel-plugin-transform-es2015-duplicate-keys/-/babel-plugin-transform-es2015-duplicate-keys-6.24.1.tgz#73eb3d310ca969e3ef9ec91c53741a6f1576423e"
+  integrity sha1-c+s9MQypaePvnskcU3QabxV2Qj4=
+  dependencies:
+    babel-runtime "^6.22.0"
+    babel-types "^6.24.1"
+
+babel-plugin-transform-es2015-for-of@^6.23.0:
+  version "6.23.0"
+  resolved "https://registry.yarnpkg.com/babel-plugin-transform-es2015-for-of/-/babel-plugin-transform-es2015-for-of-6.23.0.tgz#f47c95b2b613df1d3ecc2fdb7573623c75248691"
+  integrity sha1-9HyVsrYT3x0+zC/bdXNiPHUkhpE=
+  dependencies:
+    babel-runtime "^6.22.0"
+
+babel-plugin-transform-es2015-function-name@^6.22.0:
+  version "6.24.1"
+  resolved "https://registry.yarnpkg.com/babel-plugin-transform-es2015-function-name/-/babel-plugin-transform-es2015-function-name-6.24.1.tgz#834c89853bc36b1af0f3a4c5dbaa94fd8eacaa8b"
+  integrity sha1-g0yJhTvDaxrw86TF26qU/Y6sqos=
+  dependencies:
+    babel-helper-function-name "^6.24.1"
+    babel-runtime "^6.22.0"
+    babel-types "^6.24.1"
+
+babel-plugin-transform-es2015-literals@^6.22.0:
+  version "6.22.0"
+  resolved "https://registry.yarnpkg.com/babel-plugin-transform-es2015-literals/-/babel-plugin-transform-es2015-literals-6.22.0.tgz#4f54a02d6cd66cf915280019a31d31925377ca2e"
+  integrity sha1-T1SgLWzWbPkVKAAZox0xklN3yi4=
+  dependencies:
+    babel-runtime "^6.22.0"
+
+babel-plugin-transform-es2015-modules-amd@^6.22.0, babel-plugin-transform-es2015-modules-amd@^6.24.1:
+  version "6.24.1"
+  resolved "https://registry.yarnpkg.com/babel-plugin-transform-es2015-modules-amd/-/babel-plugin-transform-es2015-modules-amd-6.24.1.tgz#3b3e54017239842d6d19c3011c4bd2f00a00d154"
+  integrity sha1-Oz5UAXI5hC1tGcMBHEvS8AoA0VQ=
+  dependencies:
+    babel-plugin-transform-es2015-modules-commonjs "^6.24.1"
+    babel-runtime "^6.22.0"
+    babel-template "^6.24.1"
+
+babel-plugin-transform-es2015-modules-commonjs@^6.23.0, babel-plugin-transform-es2015-modules-commonjs@^6.24.1:
+  version "6.26.2"
+  resolved "https://registry.yarnpkg.com/babel-plugin-transform-es2015-modules-commonjs/-/babel-plugin-transform-es2015-modules-commonjs-6.26.2.tgz#58a793863a9e7ca870bdc5a881117ffac27db6f3"
+  integrity sha512-CV9ROOHEdrjcwhIaJNBGMBCodN+1cfkwtM1SbUHmvyy35KGT7fohbpOxkE2uLz1o6odKK2Ck/tz47z+VqQfi9Q==
+  dependencies:
+    babel-plugin-transform-strict-mode "^6.24.1"
+    babel-runtime "^6.26.0"
+    babel-template "^6.26.0"
+    babel-types "^6.26.0"
+
+babel-plugin-transform-es2015-modules-systemjs@^6.23.0:
+  version "6.24.1"
+  resolved "https://registry.yarnpkg.com/babel-plugin-transform-es2015-modules-systemjs/-/babel-plugin-transform-es2015-modules-systemjs-6.24.1.tgz#ff89a142b9119a906195f5f106ecf305d9407d23"
+  integrity sha1-/4mhQrkRmpBhlfXxBuzzBdlAfSM=
+  dependencies:
+    babel-helper-hoist-variables "^6.24.1"
+    babel-runtime "^6.22.0"
+    babel-template "^6.24.1"
+
+babel-plugin-transform-es2015-modules-umd@^6.23.0:
+  version "6.24.1"
+  resolved "https://registry.yarnpkg.com/babel-plugin-transform-es2015-modules-umd/-/babel-plugin-transform-es2015-modules-umd-6.24.1.tgz#ac997e6285cd18ed6176adb607d602344ad38468"
+  integrity sha1-rJl+YoXNGO1hdq22B9YCNErThGg=
+  dependencies:
+    babel-plugin-transform-es2015-modules-amd "^6.24.1"
+    babel-runtime "^6.22.0"
+    babel-template "^6.24.1"
+
+babel-plugin-transform-es2015-object-super@^6.22.0:
+  version "6.24.1"
+  resolved "https://registry.yarnpkg.com/babel-plugin-transform-es2015-object-super/-/babel-plugin-transform-es2015-object-super-6.24.1.tgz#24cef69ae21cb83a7f8603dad021f572eb278f8d"
+  integrity sha1-JM72muIcuDp/hgPa0CH1cusnj40=
+  dependencies:
+    babel-helper-replace-supers "^6.24.1"
+    babel-runtime "^6.22.0"
+
+babel-plugin-transform-es2015-parameters@^6.23.0:
+  version "6.24.1"
+  resolved "https://registry.yarnpkg.com/babel-plugin-transform-es2015-parameters/-/babel-plugin-transform-es2015-parameters-6.24.1.tgz#57ac351ab49caf14a97cd13b09f66fdf0a625f2b"
+  integrity sha1-V6w1GrScrxSpfNE7CfZv3wpiXys=
+  dependencies:
+    babel-helper-call-delegate "^6.24.1"
+    babel-helper-get-function-arity "^6.24.1"
+    babel-runtime "^6.22.0"
+    babel-template "^6.24.1"
+    babel-traverse "^6.24.1"
+    babel-types "^6.24.1"
+
+babel-plugin-transform-es2015-shorthand-properties@^6.22.0:
+  version "6.24.1"
+  resolved "https://registry.yarnpkg.com/babel-plugin-transform-es2015-shorthand-properties/-/babel-plugin-transform-es2015-shorthand-properties-6.24.1.tgz#24f875d6721c87661bbd99a4622e51f14de38aa0"
+  integrity sha1-JPh11nIch2YbvZmkYi5R8U3jiqA=
+  dependencies:
+    babel-runtime "^6.22.0"
+    babel-types "^6.24.1"
+
+babel-plugin-transform-es2015-spread@^6.22.0:
+  version "6.22.0"
+  resolved "https://registry.yarnpkg.com/babel-plugin-transform-es2015-spread/-/babel-plugin-transform-es2015-spread-6.22.0.tgz#d6d68a99f89aedc4536c81a542e8dd9f1746f8d1"
+  integrity sha1-1taKmfia7cRTbIGlQujdnxdG+NE=
+  dependencies:
+    babel-runtime "^6.22.0"
+
+babel-plugin-transform-es2015-sticky-regex@^6.22.0:
+  version "6.24.1"
+  resolved "https://registry.yarnpkg.com/babel-plugin-transform-es2015-sticky-regex/-/babel-plugin-transform-es2015-sticky-regex-6.24.1.tgz#00c1cdb1aca71112cdf0cf6126c2ed6b457ccdbc"
+  integrity sha1-AMHNsaynERLN8M9hJsLta0V8zbw=
+  dependencies:
+    babel-helper-regex "^6.24.1"
+    babel-runtime "^6.22.0"
+    babel-types "^6.24.1"
+
+babel-plugin-transform-es2015-template-literals@^6.22.0:
+  version "6.22.0"
+  resolved "https://registry.yarnpkg.com/babel-plugin-transform-es2015-template-literals/-/babel-plugin-transform-es2015-template-literals-6.22.0.tgz#a84b3450f7e9f8f1f6839d6d687da84bb1236d8d"
+  integrity sha1-qEs0UPfp+PH2g51taH2oS7EjbY0=
+  dependencies:
+    babel-runtime "^6.22.0"
+
+babel-plugin-transform-es2015-typeof-symbol@^6.23.0:
+  version "6.23.0"
+  resolved "https://registry.yarnpkg.com/babel-plugin-transform-es2015-typeof-symbol/-/babel-plugin-transform-es2015-typeof-symbol-6.23.0.tgz#dec09f1cddff94b52ac73d505c84df59dcceb372"
+  integrity sha1-3sCfHN3/lLUqxz1QXITfWdzOs3I=
+  dependencies:
+    babel-runtime "^6.22.0"
+
+babel-plugin-transform-es2015-unicode-regex@^6.22.0:
+  version "6.24.1"
+  resolved "https://registry.yarnpkg.com/babel-plugin-transform-es2015-unicode-regex/-/babel-plugin-transform-es2015-unicode-regex-6.24.1.tgz#d38b12f42ea7323f729387f18a7c5ae1faeb35e9"
+  integrity sha1-04sS9C6nMj9yk4fxinxa4frrNek=
+  dependencies:
+    babel-helper-regex "^6.24.1"
+    babel-runtime "^6.22.0"
+    regexpu-core "^2.0.0"
 
-babel-plugin-transform-es2015-modules-amd@^6.18.0:
-  version "6.18.0"
-  resolved "https://registry.yarnpkg.com/babel-plugin-transform-es2015-modules-amd/-/babel-plugin-transform-es2015-modules-amd-6.18.0.tgz#49a054cbb762bdf9ae2d8a807076cfade6141e40"
+babel-plugin-transform-exponentiation-operator@^6.22.0, babel-plugin-transform-exponentiation-operator@^6.24.1:
+  version "6.24.1"
+  resolved "https://registry.yarnpkg.com/babel-plugin-transform-exponentiation-operator/-/babel-plugin-transform-exponentiation-operator-6.24.1.tgz#2ab0c9c7f3098fa48907772bb813fe41e8de3a0e"
+  integrity sha1-KrDJx/MJj6SJB3cruBP+QejeOg4=
   dependencies:
-    babel-plugin-transform-es2015-modules-commonjs "^6.18.0"
-    babel-runtime "^6.0.0"
-    babel-template "^6.8.0"
+    babel-helper-builder-binary-assignment-operator-visitor "^6.24.1"
+    babel-plugin-syntax-exponentiation-operator "^6.8.0"
+    babel-runtime "^6.22.0"
 
-babel-plugin-transform-es2015-modules-commonjs@^6.18.0:
-  version "6.18.0"
-  resolved "https://registry.yarnpkg.com/babel-plugin-transform-es2015-modules-commonjs/-/babel-plugin-transform-es2015-modules-commonjs-6.18.0.tgz#c15ae5bb11b32a0abdcc98a5837baa4ee8d67bcc"
+babel-plugin-transform-object-rest-spread@^6.22.0:
+  version "6.26.0"
+  resolved "https://registry.yarnpkg.com/babel-plugin-transform-object-rest-spread/-/babel-plugin-transform-object-rest-spread-6.26.0.tgz#0f36692d50fef6b7e2d4b3ac1478137a963b7b06"
+  integrity sha1-DzZpLVD+9rfi1LOsFHgTepY7ewY=
   dependencies:
-    babel-plugin-transform-strict-mode "^6.18.0"
-    babel-runtime "^6.0.0"
-    babel-template "^6.16.0"
-    babel-types "^6.18.0"
+    babel-plugin-syntax-object-rest-spread "^6.8.0"
+    babel-runtime "^6.26.0"
 
-babel-plugin-transform-es2015-modules-systemjs@^6.18.0:
-  version "6.19.0"
-  resolved "https://registry.yarnpkg.com/babel-plugin-transform-es2015-modules-systemjs/-/babel-plugin-transform-es2015-modules-systemjs-6.19.0.tgz#50438136eba74527efa00a5b0fefaf1dc4071da6"
+babel-plugin-transform-regenerator@^6.22.0:
+  version "6.26.0"
+  resolved "https://registry.yarnpkg.com/babel-plugin-transform-regenerator/-/babel-plugin-transform-regenerator-6.26.0.tgz#e0703696fbde27f0a3efcacf8b4dca2f7b3a8f2f"
+  integrity sha1-4HA2lvveJ/Cj78rPi03KL3s6jy8=
   dependencies:
-    babel-helper-hoist-variables "^6.18.0"
-    babel-runtime "^6.11.6"
-    babel-template "^6.14.0"
+    regenerator-transform "^0.10.0"
 
-babel-plugin-transform-es2015-modules-umd@^6.18.0:
-  version "6.18.0"
-  resolved "https://registry.yarnpkg.com/babel-plugin-transform-es2015-modules-umd/-/babel-plugin-transform-es2015-modules-umd-6.18.0.tgz#23351770ece5c1f8e83ed67cb1d7992884491e50"
+babel-plugin-transform-strict-mode@^6.24.1:
+  version "6.24.1"
+  resolved "https://registry.yarnpkg.com/babel-plugin-transform-strict-mode/-/babel-plugin-transform-strict-mode-6.24.1.tgz#d5faf7aa578a65bbe591cf5edae04a0c67020758"
+  integrity sha1-1fr3qleKZbvlkc9e2uBKDGcCB1g=
   dependencies:
-    babel-plugin-transform-es2015-modules-amd "^6.18.0"
-    babel-runtime "^6.0.0"
-    babel-template "^6.8.0"
+    babel-runtime "^6.22.0"
+    babel-types "^6.24.1"
 
-babel-plugin-transform-es2015-object-super@^6.3.13:
-  version "6.8.0"
-  resolved "https://registry.yarnpkg.com/babel-plugin-transform-es2015-object-super/-/babel-plugin-transform-es2015-object-super-6.8.0.tgz#1b858740a5a4400887c23dcff6f4d56eea4a24c5"
+babel-plugin-transform-vue-jsx@^3.7.0:
+  version "3.7.0"
+  resolved "https://registry.yarnpkg.com/babel-plugin-transform-vue-jsx/-/babel-plugin-transform-vue-jsx-3.7.0.tgz#d40492e6692a36b594f7e9a1928f43e969740960"
+  integrity sha512-W39X07/n3oJMQd8tALBO+440NraGSF//Lo1ydd/9Nme3+QiRGFBb1Q39T9iixh0jZPPbfv3so18tNoIgLatymw==
   dependencies:
-    babel-helper-replace-supers "^6.8.0"
-    babel-runtime "^6.0.0"
+    esutils "^2.0.2"
 
-babel-plugin-transform-es2015-parameters@^6.18.0:
-  version "6.18.0"
-  resolved "https://registry.yarnpkg.com/babel-plugin-transform-es2015-parameters/-/babel-plugin-transform-es2015-parameters-6.18.0.tgz#9b2cfe238c549f1635ba27fc1daa858be70608b1"
+babel-polyfill@6.26.0, babel-polyfill@^6.26.0:
+  version "6.26.0"
+  resolved "https://registry.npmjs.org/babel-polyfill/-/babel-polyfill-6.26.0.tgz#379937abc67d7895970adc621f284cd966cf2153"
+  integrity sha1-N5k3q8Z9eJWXCtxiHyhM2WbPIVM=
   dependencies:
-    babel-helper-call-delegate "^6.18.0"
-    babel-helper-get-function-arity "^6.18.0"
-    babel-runtime "^6.9.0"
-    babel-template "^6.16.0"
-    babel-traverse "^6.18.0"
-    babel-types "^6.18.0"
+    babel-runtime "^6.26.0"
+    core-js "^2.5.0"
+    regenerator-runtime "^0.10.5"
 
-babel-plugin-transform-es2015-shorthand-properties@^6.18.0:
-  version "6.18.0"
-  resolved "https://registry.yarnpkg.com/babel-plugin-transform-es2015-shorthand-properties/-/babel-plugin-transform-es2015-shorthand-properties-6.18.0.tgz#e2ede3b7df47bf980151926534d1dd0cbea58f43"
-  dependencies:
-    babel-runtime "^6.0.0"
-    babel-types "^6.18.0"
+babel-preset-env@^1.7.0:
+  version "1.7.0"
+  resolved "https://registry.yarnpkg.com/babel-preset-env/-/babel-preset-env-1.7.0.tgz#dea79fa4ebeb883cd35dab07e260c1c9c04df77a"
+  integrity sha512-9OR2afuKDneX2/q2EurSftUYM0xGu4O2D9adAhVfADDhrYDaxXV0rBbevVYoY9n6nyX1PmQW/0jtpJvUNr9CHg==
+  dependencies:
+    babel-plugin-check-es2015-constants "^6.22.0"
+    babel-plugin-syntax-trailing-function-commas "^6.22.0"
+    babel-plugin-transform-async-to-generator "^6.22.0"
+    babel-plugin-transform-es2015-arrow-functions "^6.22.0"
+    babel-plugin-transform-es2015-block-scoped-functions "^6.22.0"
+    babel-plugin-transform-es2015-block-scoping "^6.23.0"
+    babel-plugin-transform-es2015-classes "^6.23.0"
+    babel-plugin-transform-es2015-computed-properties "^6.22.0"
+    babel-plugin-transform-es2015-destructuring "^6.23.0"
+    babel-plugin-transform-es2015-duplicate-keys "^6.22.0"
+    babel-plugin-transform-es2015-for-of "^6.23.0"
+    babel-plugin-transform-es2015-function-name "^6.22.0"
+    babel-plugin-transform-es2015-literals "^6.22.0"
+    babel-plugin-transform-es2015-modules-amd "^6.22.0"
+    babel-plugin-transform-es2015-modules-commonjs "^6.23.0"
+    babel-plugin-transform-es2015-modules-systemjs "^6.23.0"
+    babel-plugin-transform-es2015-modules-umd "^6.23.0"
+    babel-plugin-transform-es2015-object-super "^6.22.0"
+    babel-plugin-transform-es2015-parameters "^6.23.0"
+    babel-plugin-transform-es2015-shorthand-properties "^6.22.0"
+    babel-plugin-transform-es2015-spread "^6.22.0"
+    babel-plugin-transform-es2015-sticky-regex "^6.22.0"
+    babel-plugin-transform-es2015-template-literals "^6.22.0"
+    babel-plugin-transform-es2015-typeof-symbol "^6.23.0"
+    babel-plugin-transform-es2015-unicode-regex "^6.22.0"
+    babel-plugin-transform-exponentiation-operator "^6.22.0"
+    babel-plugin-transform-regenerator "^6.22.0"
+    browserslist "^3.2.6"
+    invariant "^2.2.2"
+    semver "^5.3.0"
 
-babel-plugin-transform-es2015-spread@^6.3.13:
-  version "6.8.0"
-  resolved "https://registry.yarnpkg.com/babel-plugin-transform-es2015-spread/-/babel-plugin-transform-es2015-spread-6.8.0.tgz#0217f737e3b821fa5a669f187c6ed59205f05e9c"
+babel-preset-stage-2@^6.24.1:
+  version "6.24.1"
+  resolved "https://registry.yarnpkg.com/babel-preset-stage-2/-/babel-preset-stage-2-6.24.1.tgz#d9e2960fb3d71187f0e64eec62bc07767219bdc1"
+  integrity sha1-2eKWD7PXEYfw5k7sYrwHdnIZvcE=
   dependencies:
-    babel-runtime "^6.0.0"
+    babel-plugin-syntax-dynamic-import "^6.18.0"
+    babel-plugin-transform-class-properties "^6.24.1"
+    babel-plugin-transform-decorators "^6.24.1"
+    babel-preset-stage-3 "^6.24.1"
 
-babel-plugin-transform-es2015-sticky-regex@^6.3.13:
-  version "6.8.0"
-  resolved "https://registry.yarnpkg.com/babel-plugin-transform-es2015-sticky-regex/-/babel-plugin-transform-es2015-sticky-regex-6.8.0.tgz#e73d300a440a35d5c64f5c2a344dc236e3df47be"
+babel-preset-stage-3@^6.24.1:
+  version "6.24.1"
+  resolved "https://registry.yarnpkg.com/babel-preset-stage-3/-/babel-preset-stage-3-6.24.1.tgz#836ada0a9e7a7fa37cb138fb9326f87934a48395"
+  integrity sha1-g2raCp56f6N8sTj7kyb4eTSkg5U=
   dependencies:
-    babel-helper-regex "^6.8.0"
-    babel-runtime "^6.0.0"
-    babel-types "^6.8.0"
+    babel-plugin-syntax-trailing-function-commas "^6.22.0"
+    babel-plugin-transform-async-generator-functions "^6.24.1"
+    babel-plugin-transform-async-to-generator "^6.24.1"
+    babel-plugin-transform-exponentiation-operator "^6.24.1"
+    babel-plugin-transform-object-rest-spread "^6.22.0"
 
-babel-plugin-transform-es2015-template-literals@^6.6.0:
-  version "6.8.0"
-  resolved "https://registry.yarnpkg.com/babel-plugin-transform-es2015-template-literals/-/babel-plugin-transform-es2015-template-literals-6.8.0.tgz#86eb876d0a2c635da4ec048b4f7de9dfc897e66b"
-  dependencies:
-    babel-runtime "^6.0.0"
+babel-regenerator-runtime@^6.5.0:
+  version "6.5.0"
+  resolved "https://registry.npmjs.org/babel-regenerator-runtime/-/babel-regenerator-runtime-6.5.0.tgz#0e41cd1c9f80442466f015c749fff8ba98f8e110"
+  integrity sha1-DkHNHJ+ARCRm8BXHSf/4upj44RA=
 
-babel-plugin-transform-es2015-typeof-symbol@^6.18.0:
-  version "6.18.0"
-  resolved "https://registry.yarnpkg.com/babel-plugin-transform-es2015-typeof-symbol/-/babel-plugin-transform-es2015-typeof-symbol-6.18.0.tgz#0b14c48629c90ff47a0650077f6aa699bee35798"
+babel-register@^6.26.0:
+  version "6.26.0"
+  resolved "https://registry.yarnpkg.com/babel-register/-/babel-register-6.26.0.tgz#6ed021173e2fcb486d7acb45c6009a856f647071"
+  integrity sha1-btAhFz4vy0htestFxgCahW9kcHE=
   dependencies:
-    babel-runtime "^6.0.0"
+    babel-core "^6.26.0"
+    babel-runtime "^6.26.0"
+    core-js "^2.5.0"
+    home-or-tmp "^2.0.0"
+    lodash "^4.17.4"
+    mkdirp "^0.5.1"
+    source-map-support "^0.4.15"
 
-babel-plugin-transform-es2015-unicode-regex@^6.3.13:
-  version "6.11.0"
-  resolved "https://registry.yarnpkg.com/babel-plugin-transform-es2015-unicode-regex/-/babel-plugin-transform-es2015-unicode-regex-6.11.0.tgz#6298ceabaad88d50a3f4f392d8de997260f6ef2c"
+babel-runtime@6.x, babel-runtime@^6.0.0, babel-runtime@^6.18.0, babel-runtime@^6.22.0, babel-runtime@^6.23.0, babel-runtime@^6.26.0:
+  version "6.26.0"
+  resolved "https://registry.yarnpkg.com/babel-runtime/-/babel-runtime-6.26.0.tgz#965c7058668e82b55d7bfe04ff2337bc8b5647fe"
+  integrity sha1-llxwWGaOgrVde/4E/yM3vItWR/4=
   dependencies:
-    babel-helper-regex "^6.8.0"
-    babel-runtime "^6.0.0"
-    regexpu-core "^2.0.0"
+    core-js "^2.4.0"
+    regenerator-runtime "^0.11.0"
 
-babel-plugin-transform-regenerator@^6.16.0:
-  version "6.20.0"
-  resolved "https://registry.yarnpkg.com/babel-plugin-transform-regenerator/-/babel-plugin-transform-regenerator-6.20.0.tgz#a546cd2aa1c9889929d5c427a31303847847ab75"
+babel-template@^6.16.0, babel-template@^6.24.1, babel-template@^6.26.0:
+  version "6.26.0"
+  resolved "https://registry.yarnpkg.com/babel-template/-/babel-template-6.26.0.tgz#de03e2d16396b069f46dd9fff8521fb1a0e35e02"
+  integrity sha1-3gPi0WOWsGn0bdn/+FIfsaDjXgI=
   dependencies:
-    regenerator-transform "0.9.8"
+    babel-runtime "^6.26.0"
+    babel-traverse "^6.26.0"
+    babel-types "^6.26.0"
+    babylon "^6.18.0"
+    lodash "^4.17.4"
 
-babel-plugin-transform-strict-mode@^6.18.0:
-  version "6.18.0"
-  resolved "https://registry.yarnpkg.com/babel-plugin-transform-strict-mode/-/babel-plugin-transform-strict-mode-6.18.0.tgz#df7cf2991fe046f44163dcd110d5ca43bc652b9d"
-  dependencies:
-    babel-runtime "^6.0.0"
-    babel-types "^6.18.0"
+babel-traverse@^6.18.0, babel-traverse@^6.24.1, babel-traverse@^6.26.0:
+  version "6.26.0"
+  resolved "https://registry.yarnpkg.com/babel-traverse/-/babel-traverse-6.26.0.tgz#46a9cbd7edcc62c8e5c064e2d2d8d0f4035766ee"
+  integrity sha1-RqnL1+3MYsjlwGTi0tjQ9ANXZu4=
+  dependencies:
+    babel-code-frame "^6.26.0"
+    babel-messages "^6.23.0"
+    babel-runtime "^6.26.0"
+    babel-types "^6.26.0"
+    babylon "^6.18.0"
+    debug "^2.6.8"
+    globals "^9.18.0"
+    invariant "^2.2.2"
+    lodash "^4.17.4"
 
-babel-plugin-transform-vue-jsx@^3.3.0:
-  version "3.3.0"
-  resolved "https://registry.yarnpkg.com/babel-plugin-transform-vue-jsx/-/babel-plugin-transform-vue-jsx-3.3.0.tgz#d6163f93f129e9fac3768813470f5eed9fd26f7e"
+babel-types@^6.18.0, babel-types@^6.19.0, babel-types@^6.24.1, babel-types@^6.26.0:
+  version "6.26.0"
+  resolved "https://registry.yarnpkg.com/babel-types/-/babel-types-6.26.0.tgz#a3b073f94ab49eb6fa55cd65227a334380632497"
+  integrity sha1-o7Bz+Uq0nrb6Vc1lInozQ4BjJJc=
   dependencies:
+    babel-runtime "^6.26.0"
     esutils "^2.0.2"
+    lodash "^4.17.4"
+    to-fast-properties "^1.0.3"
 
-babel-polyfill@^6.16.0, babel-polyfill@^6.7.4:
-  version "6.20.0"
-  resolved "https://registry.yarnpkg.com/babel-polyfill/-/babel-polyfill-6.20.0.tgz#de4a371006139e20990aac0be367d398331204e7"
-  dependencies:
-    babel-runtime "^6.20.0"
-    core-js "^2.4.0"
-    regenerator-runtime "^0.10.0"
-
-babel-preset-es2015@^6.14.0:
-  version "6.18.0"
-  resolved "https://registry.yarnpkg.com/babel-preset-es2015/-/babel-preset-es2015-6.18.0.tgz#b8c70df84ec948c43dcf2bf770e988eb7da88312"
-  dependencies:
-    babel-plugin-check-es2015-constants "^6.3.13"
-    babel-plugin-transform-es2015-arrow-functions "^6.3.13"
-    babel-plugin-transform-es2015-block-scoped-functions "^6.3.13"
-    babel-plugin-transform-es2015-block-scoping "^6.18.0"
-    babel-plugin-transform-es2015-classes "^6.18.0"
-    babel-plugin-transform-es2015-computed-properties "^6.3.13"
-    babel-plugin-transform-es2015-destructuring "^6.18.0"
-    babel-plugin-transform-es2015-duplicate-keys "^6.6.0"
-    babel-plugin-transform-es2015-for-of "^6.18.0"
-    babel-plugin-transform-es2015-function-name "^6.9.0"
-    babel-plugin-transform-es2015-literals "^6.3.13"
-    babel-plugin-transform-es2015-modules-amd "^6.18.0"
-    babel-plugin-transform-es2015-modules-commonjs "^6.18.0"
-    babel-plugin-transform-es2015-modules-systemjs "^6.18.0"
-    babel-plugin-transform-es2015-modules-umd "^6.18.0"
-    babel-plugin-transform-es2015-object-super "^6.3.13"
-    babel-plugin-transform-es2015-parameters "^6.18.0"
-    babel-plugin-transform-es2015-shorthand-properties "^6.18.0"
-    babel-plugin-transform-es2015-spread "^6.3.13"
-    babel-plugin-transform-es2015-sticky-regex "^6.3.13"
-    babel-plugin-transform-es2015-template-literals "^6.6.0"
-    babel-plugin-transform-es2015-typeof-symbol "^6.18.0"
-    babel-plugin-transform-es2015-unicode-regex "^6.3.13"
-    babel-plugin-transform-regenerator "^6.16.0"
-
-babel-register@^6.18.0:
+babylon@^6.18.0:
   version "6.18.0"
-  resolved "https://registry.yarnpkg.com/babel-register/-/babel-register-6.18.0.tgz#892e2e03865078dd90ad2c715111ec4449b32a68"
-  dependencies:
-    babel-core "^6.18.0"
-    babel-runtime "^6.11.6"
-    core-js "^2.4.0"
-    home-or-tmp "^2.0.0"
-    lodash "^4.2.0"
-    mkdirp "^0.5.1"
-    source-map-support "^0.4.2"
-
-babel-runtime@6.x, babel-runtime@^6.0.0, babel-runtime@^6.11.6, babel-runtime@^6.18.0, babel-runtime@^6.20.0, babel-runtime@^6.9.0:
-  version "6.20.0"
-  resolved "https://registry.yarnpkg.com/babel-runtime/-/babel-runtime-6.20.0.tgz#87300bdcf4cd770f09bf0048c64204e17806d16f"
-  dependencies:
-    core-js "^2.4.0"
-    regenerator-runtime "^0.10.0"
-
-babel-template@^6.14.0, babel-template@^6.15.0, babel-template@^6.16.0, babel-template@^6.8.0:
-  version "6.16.0"
-  resolved "https://registry.yarnpkg.com/babel-template/-/babel-template-6.16.0.tgz#e149dd1a9f03a35f817ddbc4d0481988e7ebc8ca"
-  dependencies:
-    babel-runtime "^6.9.0"
-    babel-traverse "^6.16.0"
-    babel-types "^6.16.0"
-    babylon "^6.11.0"
-    lodash "^4.2.0"
-
-babel-traverse@^6.16.0, babel-traverse@^6.18.0, babel-traverse@^6.20.0:
-  version "6.20.0"
-  resolved "https://registry.yarnpkg.com/babel-traverse/-/babel-traverse-6.20.0.tgz#5378d1a743e3d856e6a52289994100bbdfd9872a"
-  dependencies:
-    babel-code-frame "^6.20.0"
-    babel-messages "^6.8.0"
-    babel-runtime "^6.20.0"
-    babel-types "^6.20.0"
-    babylon "^6.11.0"
-    debug "^2.2.0"
-    globals "^9.0.0"
-    invariant "^2.2.0"
-    lodash "^4.2.0"
+  resolved "https://registry.yarnpkg.com/babylon/-/babylon-6.18.0.tgz#af2f3b88fa6f5c1e4c634d1a0f8eac4f55b395e3"
+  integrity sha512-q/UEjfGJ2Cm3oKV71DJz9d25TPnq5rhBVL2Q4fA5wcC3jcrdn7+SssEybFIxwAvvP+YCsCYNKughoF33GxgycQ==
 
-babel-types@^6.16.0, babel-types@^6.18.0, babel-types@^6.19.0, babel-types@^6.20.0, babel-types@^6.8.0, babel-types@^6.9.0:
-  version "6.20.0"
-  resolved "https://registry.yarnpkg.com/babel-types/-/babel-types-6.20.0.tgz#3869ecb98459533b37df809886b3f7f3b08d2baa"
+bach@^1.0.0:
+  version "1.2.0"
+  resolved "https://registry.yarnpkg.com/bach/-/bach-1.2.0.tgz#4b3ce96bf27134f79a1b414a51c14e34c3bd9880"
+  integrity sha1-Szzpa/JxNPeaG0FKUcFONMO9mIA=
   dependencies:
-    babel-runtime "^6.20.0"
-    esutils "^2.0.2"
-    lodash "^4.2.0"
-    to-fast-properties "^1.0.1"
-
-babylon@^6.11.0:
-  version "6.14.1"
-  resolved "https://registry.yarnpkg.com/babylon/-/babylon-6.14.1.tgz#956275fab72753ad9b3435d7afe58f8bf0a29815"
+    arr-filter "^1.1.1"
+    arr-flatten "^1.0.1"
+    arr-map "^2.0.0"
+    array-each "^1.0.0"
+    array-initial "^1.0.0"
+    array-last "^1.1.1"
+    async-done "^1.2.2"
+    async-settle "^1.0.0"
+    now-and-later "^2.0.0"
 
 backo2@1.0.2:
   version "1.0.2"
   resolved "https://registry.yarnpkg.com/backo2/-/backo2-1.0.2.tgz#31ab1ac8b129363463e35b3ebb69f4dfcfba7947"
-
-balanced-match@0.1.0, balanced-match@^0.1.0, balanced-match@~0.1.0:
-  version "0.1.0"
-  resolved "https://registry.yarnpkg.com/balanced-match/-/balanced-match-0.1.0.tgz#b504bd05869b39259dd0c5efc35d843176dccc4a"
-
-balanced-match@^0.2.0:
-  version "0.2.1"
-  resolved "https://registry.yarnpkg.com/balanced-match/-/balanced-match-0.2.1.tgz#7bc658b4bed61eee424ad74f75f5c3e2c4df3cc7"
-
-balanced-match@^0.4.2:
-  version "0.4.2"
-  resolved "https://registry.yarnpkg.com/balanced-match/-/balanced-match-0.4.2.tgz#cb3f3e3c732dc0f01ee70b403f302e61d7709838"
+  integrity sha1-MasayLEpNjRj41s+u2n038+6eUc=
 
 balanced-match@^1.0.0:
   version "1.0.0"
-  resolved "http://registry.npm.taobao.org/balanced-match/download/balanced-match-1.0.0.tgz#89b4d199ab2bee49de164ea02b89ce462d71b767"
+  resolved "https://registry.yarnpkg.com/balanced-match/-/balanced-match-1.0.0.tgz#89b4d199ab2bee49de164ea02b89ce462d71b767"
+  integrity sha1-ibTRmasr7kneFk6gK4nORi1xt2c=
 
-base64-arraybuffer@0.1.2:
-  version "0.1.2"
-  resolved "https://registry.yarnpkg.com/base64-arraybuffer/-/base64-arraybuffer-0.1.2.tgz#474df4a9f2da24e05df3158c3b1db3c3cd46a154"
+base-64@^0.1.0:
+  version "0.1.0"
+  resolved "https://registry.npm.taobao.org/base-64/download/base-64-0.1.0.tgz#780a99c84e7d600260361511c4877613bf24f6bb"
+  integrity sha1-eAqZyE59YAJgNhURxId2E78k9rs=
+
+base64-arraybuffer@0.1.5:
+  version "0.1.5"
+  resolved "https://registry.yarnpkg.com/base64-arraybuffer/-/base64-arraybuffer-0.1.5.tgz#73926771923b5a19747ad666aa5cd4bf9c6e9ce8"
+  integrity sha1-c5JncZI7Whl0etZmqlzUv5xunOg=
 
 base64-js@^1.0.2:
-  version "1.2.0"
-  resolved "https://registry.yarnpkg.com/base64-js/-/base64-js-1.2.0.tgz#a39992d723584811982be5e290bb6a53d86700f1"
+  version "1.3.0"
+  resolved "https://registry.yarnpkg.com/base64-js/-/base64-js-1.3.0.tgz#cab1e6118f051095e58b5281aea8c1cd22bfc0e3"
+  integrity sha512-ccav/yGvoa80BQDljCxsmmQ3Xvx60/UpBIij5QN21W3wBi/hhIC9OoO+KLpu9IJTS9j4DRVJ3aDDF9cMSoa2lw==
 
-base64id@0.1.0:
-  version "0.1.0"
-  resolved "https://registry.yarnpkg.com/base64id/-/base64id-0.1.0.tgz#02ce0fdeee0cef4f40080e1e73e834f0b1bfce3f"
+base64id@1.0.0:
+  version "1.0.0"
+  resolved "https://registry.yarnpkg.com/base64id/-/base64id-1.0.0.tgz#47688cb99bb6804f0e06d3e763b1c32e57d8e6b6"
+  integrity sha1-R2iMuZu2gE8OBtPnY7HDLlfY5rY=
+
+base@^0.11.1:
+  version "0.11.2"
+  resolved "https://registry.yarnpkg.com/base/-/base-0.11.2.tgz#7bde5ced145b6d551a90db87f83c558b4eb48a8f"
+  integrity sha512-5T6P4xPgpp0YDFvSWwEZ4NoE3aM4QBQXDzmVbraCkFj8zHM+mba8SyqB5DbZWyR7mYHo6Y7BdQo3MoA4m0TeQg==
+  dependencies:
+    cache-base "^1.0.1"
+    class-utils "^0.3.5"
+    component-emitter "^1.2.1"
+    define-property "^1.0.0"
+    isobject "^3.0.1"
+    mixin-deep "^1.2.0"
+    pascalcase "^0.1.1"
 
-batch@0.5.3:
-  version "0.5.3"
-  resolved "https://registry.yarnpkg.com/batch/-/batch-0.5.3.tgz#3f3414f380321743bfc1042f9a83ff1d5824d464"
+batch@0.6.1:
+  version "0.6.1"
+  resolved "https://registry.yarnpkg.com/batch/-/batch-0.6.1.tgz#dc34314f4e679318093fc760272525f94bf25c16"
+  integrity sha1-3DQxT05nkxgJP8dgJyUl+UvyXBY=
 
 bcrypt-pbkdf@^1.0.0:
-  version "1.0.0"
-  resolved "https://registry.yarnpkg.com/bcrypt-pbkdf/-/bcrypt-pbkdf-1.0.0.tgz#3ca76b85241c7170bf7d9703e7b9aa74630040d4"
+  version "1.0.2"
+  resolved "https://registry.yarnpkg.com/bcrypt-pbkdf/-/bcrypt-pbkdf-1.0.2.tgz#a4301d389b6a43f9b67ff3ca11a3f6637e360e9e"
+  integrity sha1-pDAdOJtqQ/m2f/PKEaP2Y342Dp4=
   dependencies:
     tweetnacl "^0.14.3"
 
-beeper@^1.0.0:
-  version "1.1.1"
-  resolved "https://registry.yarnpkg.com/beeper/-/beeper-1.1.1.tgz#e6d5ea8c5dad001304a70b22638447f69cb2f809"
-
-benchmark@1.0.0:
-  version "1.0.0"
-  resolved "https://registry.yarnpkg.com/benchmark/-/benchmark-1.0.0.tgz#2f1e2fa4c359f11122aa183082218e957e390c73"
-
 better-assert@~1.0.0:
   version "1.0.2"
   resolved "https://registry.yarnpkg.com/better-assert/-/better-assert-1.0.2.tgz#40866b9e1b9e0b55b481894311e68faffaebc522"
+  integrity sha1-QIZrnhueC1W0gYlDEeaPr/rrxSI=
   dependencies:
     callsite "1.0.0"
 
 big.js@^3.1.3:
-  version "3.1.3"
-  resolved "https://registry.yarnpkg.com/big.js/-/big.js-3.1.3.tgz#4cada2193652eb3ca9ec8e55c9015669c9806978"
+  version "3.2.0"
+  resolved "https://registry.yarnpkg.com/big.js/-/big.js-3.2.0.tgz#a5fc298b81b9e0dca2e458824784b65c52ba588e"
+  integrity sha512-+hN/Zh2D08Mx65pZ/4g5bsmNiZUuChDiQfTUQ7qJr4/kuopCr88xZsAXv6mBoZEsUI4OuGHlX59qE94K2mMW8Q==
 
-binary-extensions@^1.0.0:
-  version "1.8.0"
-  resolved "https://registry.yarnpkg.com/binary-extensions/-/binary-extensions-1.8.0.tgz#48ec8d16df4377eae5fa5884682480af4d95c774"
+big.js@^5.2.2:
+  version "5.2.2"
+  resolved "https://registry.yarnpkg.com/big.js/-/big.js-5.2.2.tgz#65f0af382f578bcdc742bd9c281e9cb2d7768328"
+  integrity sha512-vyL2OymJxmarO8gxMr0mhChsO9QGwhynfuu4+MHTAW6czfq9humCB7rKpUjDd9YUiDPU4mzpyupFSvOClAwbmQ==
 
-bl@~1.1.2:
-  version "1.1.2"
-  resolved "https://registry.yarnpkg.com/bl/-/bl-1.1.2.tgz#fdca871a99713aa00d19e3bbba41c44787a65398"
+bin-links@^1.1.2, bin-links@^1.1.6:
+  version "1.1.6"
+  resolved "https://registry.npm.taobao.org/bin-links/download/bin-links-1.1.6.tgz#30d33e810829305e5e61b90cfcb9a3a4f65eb516"
+  integrity sha1-MNM+gQgpMF5eYbkM/LmjpPZetRY=
   dependencies:
-    readable-stream "~2.0.5"
+    bluebird "^3.5.3"
+    cmd-shim "^3.0.0"
+    gentle-fs "^2.3.0"
+    graceful-fs "^4.1.15"
+    npm-normalize-package-bin "^1.0.0"
+    write-file-atomic "^2.3.0"
 
-blob@0.0.4:
-  version "0.0.4"
-  resolved "https://registry.yarnpkg.com/blob/-/blob-0.0.4.tgz#bcf13052ca54463f30f9fc7e95b9a47630a94921"
+binary-extensions@^1.0.0:
+  version "1.12.0"
+  resolved "https://registry.yarnpkg.com/binary-extensions/-/binary-extensions-1.12.0.tgz#c2d780f53d45bba8317a8902d4ceeaf3a6385b14"
+  integrity sha512-DYWGk01lDcxeS/K9IHPGWfT8PsJmbXRtRd2Sx72Tnb8pcYZQFF1oSDb8hJtS1vhp212q1Rzi5dUf9+nq0o9UIg==
+
+blob@0.0.5:
+  version "0.0.5"
+  resolved "https://registry.npmjs.org/blob/-/blob-0.0.5.tgz#d680eeef25f8cd91ad533f5b01eed48e64caf683"
+  integrity sha512-gaqbzQPqOoamawKg0LGVd7SzLgXS+JH61oWprSLH+P+abTczqJbhTR8CmJ2u9/bUYNmHTGJx/UEmn6doAvvuig==
 
 block-stream@*:
   version "0.0.9"
-  resolved "https://registry.yarnpkg.com/block-stream/-/block-stream-0.0.9.tgz#13ebfe778a03205cfe03751481ebb4b3300c126a"
+  resolved "https://registry.npm.taobao.org/block-stream/download/block-stream-0.0.9.tgz#13ebfe778a03205cfe03751481ebb4b3300c126a"
+  integrity sha1-E+v+d4oDIFz+A3UUgeu0szAMEmo=
   dependencies:
     inherits "~2.0.0"
 
-bluebird@^3.1.1, bluebird@^3.3.0, bluebird@^3.4.7, bluebird@^3.5.1:
-  version "3.5.1"
-  resolved "https://registry.yarnpkg.com/bluebird/-/bluebird-3.5.1.tgz#d9551f9de98f1fcda1e683d17ee91a0602ee2eb9"
+bluebird@^3.1.1, bluebird@^3.3.0, bluebird@^3.5.3:
+  version "3.5.3"
+  resolved "https://registry.yarnpkg.com/bluebird/-/bluebird-3.5.3.tgz#7d01c6f9616c9a51ab0f8c549a79dfe6ec33efa7"
+  integrity sha512-/qKPUQlaW1OyR51WeCPBvRnAlnZFUJkCSG5HzGnuIqhgyJtF+T94lFnn33eiazjRm2LAHVy2guNnaq48X9SJuw==
+
+bluebird@^3.5.1, bluebird@^3.5.5:
+  version "3.7.2"
+  resolved "https://registry.npm.taobao.org/bluebird/download/bluebird-3.7.2.tgz#9f229c15be272454ffa973ace0dbee79a1b0c36f"
+  integrity sha1-nyKcFb4nJFT/qXOs4NvueaGww28=
 
 bn.js@^4.0.0, bn.js@^4.1.0, bn.js@^4.1.1, bn.js@^4.4.0:
   version "4.11.8"
   resolved "https://registry.yarnpkg.com/bn.js/-/bn.js-4.11.8.tgz#2cde09eb5ee341f484746bb0309b3253b1b1442f"
-
-body-parser@^1.12.4:
-  version "1.15.2"
-  resolved "https://registry.yarnpkg.com/body-parser/-/body-parser-1.15.2.tgz#d7578cf4f1d11d5f6ea804cef35dc7a7ff6dae67"
-  dependencies:
-    bytes "2.4.0"
-    content-type "~1.0.2"
-    debug "~2.2.0"
-    depd "~1.1.0"
-    http-errors "~1.5.0"
-    iconv-lite "0.4.13"
+  integrity sha512-ItfYfPLkWHUjckQCk8xC+LwxgK8NYcXywGigJgSwOP8Y2iyWT4f2vsZnoOXTTbo+o5yXmIUJ4gn5538SO5S3gA==
+
+body-parser@1.18.3, body-parser@^1.16.1:
+  version "1.18.3"
+  resolved "https://registry.yarnpkg.com/body-parser/-/body-parser-1.18.3.tgz#5b292198ffdd553b3a0f20ded0592b956955c8b4"
+  integrity sha1-WykhmP/dVTs6DyDe0FkrlWlVyLQ=
+  dependencies:
+    bytes "3.0.0"
+    content-type "~1.0.4"
+    debug "2.6.9"
+    depd "~1.1.2"
+    http-errors "~1.6.3"
+    iconv-lite "0.4.23"
     on-finished "~2.3.0"
-    qs "6.2.0"
-    raw-body "~2.1.7"
-    type-is "~1.6.13"
+    qs "6.5.2"
+    raw-body "2.3.3"
+    type-is "~1.6.16"
 
 bonjour@^3.5.0:
   version "3.5.0"
   resolved "https://registry.yarnpkg.com/bonjour/-/bonjour-3.5.0.tgz#8e890a183d8ee9a2393b3844c691a42bcf7bc9f5"
+  integrity sha1-jokKGD2O6aI5OzhExpGkK897yfU=
   dependencies:
     array-flatten "^2.1.0"
     deep-equal "^1.0.1"
@@ -967,48 +1829,71 @@ bonjour@^3.5.0:
     multicast-dns "^6.0.1"
     multicast-dns-service-types "^1.1.0"
 
-boolbase@~1.0.0:
+boolbase@^1.0.0, boolbase@~1.0.0:
   version "1.0.0"
   resolved "https://registry.yarnpkg.com/boolbase/-/boolbase-1.0.0.tgz#68dff5fbe60c51eb37725ea9e3ed310dcc1e776e"
+  integrity sha1-aN/1++YMUes3cl6p4+0xDcwed24=
 
-boom@2.x.x:
-  version "2.10.1"
-  resolved "https://registry.yarnpkg.com/boom/-/boom-2.10.1.tgz#39c8918ceff5799f83f9492a848f625add0c766f"
+boxen@^1.2.1:
+  version "1.3.0"
+  resolved "https://registry.npm.taobao.org/boxen/download/boxen-1.3.0.tgz?cache=0&sync_timestamp=1575618207409&other_urls=https%3A%2F%2Fregistry.npm.taobao.org%2Fboxen%2Fdownload%2Fboxen-1.3.0.tgz#55c6c39a8ba58d9c61ad22cd877532deb665a20b"
+  integrity sha1-VcbDmouljZxhrSLNh3Uy3rZlogs=
   dependencies:
-    hoek "2.x.x"
+    ansi-align "^2.0.0"
+    camelcase "^4.0.0"
+    chalk "^2.0.1"
+    cli-boxes "^1.0.0"
+    string-width "^2.0.0"
+    term-size "^1.2.0"
+    widest-line "^2.0.0"
 
-brace-expansion@^1.0.0, brace-expansion@^1.1.7:
-  version "1.1.8"
-  resolved "http://registry.npm.taobao.org/brace-expansion/download/brace-expansion-1.1.8.tgz#c07b211c7c952ec1f8efd51a77ef0d1d3990a292"
+brace-expansion@^1.1.7:
+  version "1.1.11"
+  resolved "https://registry.yarnpkg.com/brace-expansion/-/brace-expansion-1.1.11.tgz#3c7fcbf529d87226f3d2f52b966ff5271eb441dd"
+  integrity sha512-iCuPHDFgrHX7H2vEI/5xpz07zSHB00TpugqhmYtVmMO6518mCuRMoOYFldEBl0g187ufozdaHgWKcYFb61qGiA==
   dependencies:
     balanced-match "^1.0.0"
     concat-map "0.0.1"
 
-braces@^0.1.2:
-  version "0.1.5"
-  resolved "https://registry.yarnpkg.com/braces/-/braces-0.1.5.tgz#c085711085291d8b75fdd74eab0f8597280711e6"
-  dependencies:
-    expand-range "^0.1.0"
-
 braces@^1.8.2:
   version "1.8.5"
   resolved "https://registry.yarnpkg.com/braces/-/braces-1.8.5.tgz#ba77962e12dff969d6b76711e914b737857bf6a7"
+  integrity sha1-uneWLhLf+WnWt2cR6RS3N4V79qc=
   dependencies:
     expand-range "^1.8.1"
     preserve "^0.2.0"
     repeat-element "^1.1.2"
 
+braces@^2.3.0, braces@^2.3.1, braces@^2.3.2:
+  version "2.3.2"
+  resolved "https://registry.yarnpkg.com/braces/-/braces-2.3.2.tgz#5979fd3f14cd531565e5fa2df1abfff1dfaee729"
+  integrity sha512-aNdbnj9P8PjdXU4ybaWLK2IF3jc/EoDYbC7AazW6to3TRsfXxscC9UXOB5iDiEQrkyIbWp2SLQda4+QAa7nc3w==
+  dependencies:
+    arr-flatten "^1.1.0"
+    array-unique "^0.3.2"
+    extend-shallow "^2.0.1"
+    fill-range "^4.0.0"
+    isobject "^3.0.1"
+    repeat-element "^1.1.2"
+    snapdragon "^0.8.1"
+    snapdragon-node "^2.0.1"
+    split-string "^3.0.2"
+    to-regex "^3.0.1"
+
 brorand@^1.0.1:
   version "1.1.0"
   resolved "https://registry.yarnpkg.com/brorand/-/brorand-1.1.0.tgz#12c25efe40a45e3c323eb8675a0a0ce57b22371f"
+  integrity sha1-EsJe/kCkXjwyPrhnWgoM5XsiNx8=
 
-browser-stdout@1.3.0:
-  version "1.3.0"
-  resolved "https://registry.yarnpkg.com/browser-stdout/-/browser-stdout-1.3.0.tgz#f351d32969d32fa5d7a5567154263d928ae3bd1f"
+browser-stdout@1.3.1:
+  version "1.3.1"
+  resolved "https://registry.npmjs.org/browser-stdout/-/browser-stdout-1.3.1.tgz#baa559ee14ced73452229bad7326467c61fabd60"
+  integrity sha512-qhAVI1+Av2X7qelOfAIYwXONood6XlZE/fXaBSmW/T5SzLAmCgzi+eiWE7fUvbHaeNBQH13UftjpXxsfLkMpgw==
 
 browserify-aes@^1.0.0, browserify-aes@^1.0.4:
-  version "1.1.0"
-  resolved "https://registry.yarnpkg.com/browserify-aes/-/browserify-aes-1.1.0.tgz#1d2ad62a8b479f23f0ab631c1be86a82dbccbe48"
+  version "1.2.0"
+  resolved "https://registry.yarnpkg.com/browserify-aes/-/browserify-aes-1.2.0.tgz#326734642f403dabc3003209853bb70ad428ef48"
+  integrity sha512-+7CHXqGuspUn/Sl5aO7Ea0xWGAtETPXNSAjHo48JfLdPWcMng33Xe4znFvQweqc/uzk5zSOI3H52CYnjCfb5hA==
   dependencies:
     buffer-xor "^1.0.3"
     cipher-base "^1.0.0"
@@ -1018,24 +1903,28 @@ browserify-aes@^1.0.0, browserify-aes@^1.0.4:
     safe-buffer "^5.0.1"
 
 browserify-cipher@^1.0.0:
-  version "1.0.0"
-  resolved "https://registry.yarnpkg.com/browserify-cipher/-/browserify-cipher-1.0.0.tgz#9988244874bf5ed4e28da95666dcd66ac8fc363a"
+  version "1.0.1"
+  resolved "https://registry.yarnpkg.com/browserify-cipher/-/browserify-cipher-1.0.1.tgz#8d6474c1b870bfdabcd3bcfcc1934a10e94f15f0"
+  integrity sha512-sPhkz0ARKbf4rRQt2hTpAHqn47X3llLkUGn+xEJzLjwY8LRs2p0v7ljvI5EyoRO/mexrNunNECisZs+gw2zz1w==
   dependencies:
     browserify-aes "^1.0.4"
     browserify-des "^1.0.0"
     evp_bytestokey "^1.0.0"
 
 browserify-des@^1.0.0:
-  version "1.0.0"
-  resolved "https://registry.yarnpkg.com/browserify-des/-/browserify-des-1.0.0.tgz#daa277717470922ed2fe18594118a175439721dd"
+  version "1.0.2"
+  resolved "https://registry.yarnpkg.com/browserify-des/-/browserify-des-1.0.2.tgz#3af4f1f59839403572f1c66204375f7a7f703e9c"
+  integrity sha512-BioO1xf3hFwz4kc6iBhI3ieDFompMhrMlnDFC4/0/vd5MokpuAc3R+LYbwTA9A5Yc9pq9UYPqffKpW2ObuwX5A==
   dependencies:
     cipher-base "^1.0.1"
     des.js "^1.0.0"
     inherits "^2.0.1"
+    safe-buffer "^5.1.2"
 
 browserify-rsa@^4.0.0:
   version "4.0.1"
   resolved "https://registry.yarnpkg.com/browserify-rsa/-/browserify-rsa-4.0.1.tgz#21e0abfaf6f2029cf2fafb133567a701d4135524"
+  integrity sha1-IeCr+vbyApzy+vsTNWenAdQTVSQ=
   dependencies:
     bn.js "^4.1.0"
     randombytes "^2.0.1"
@@ -1043,6 +1932,7 @@ browserify-rsa@^4.0.0:
 browserify-sign@^4.0.0:
   version "4.0.4"
   resolved "https://registry.yarnpkg.com/browserify-sign/-/browserify-sign-4.0.4.tgz#aa4eb68e5d7b658baa6bf6a57e630cbd7a93d298"
+  integrity sha1-qk62jl17ZYuqa/alfmMMvXqT0pg=
   dependencies:
     bn.js "^4.1.1"
     browserify-rsa "^4.0.0"
@@ -1052,40 +1942,81 @@ browserify-sign@^4.0.0:
     inherits "^2.0.1"
     parse-asn1 "^5.0.0"
 
-browserify-zlib@^0.1.4:
-  version "0.1.4"
-  resolved "https://registry.yarnpkg.com/browserify-zlib/-/browserify-zlib-0.1.4.tgz#bb35f8a519f600e0fa6b8485241c979d0141fb2d"
+browserify-zlib@^0.2.0:
+  version "0.2.0"
+  resolved "https://registry.yarnpkg.com/browserify-zlib/-/browserify-zlib-0.2.0.tgz#2869459d9aa3be245fe8fe2ca1f46e2e7f54d73f"
+  integrity sha512-Z942RysHXmJrhqk88FmKBVq/v5tqmSkDz7p54G/MGyjMnCFFnC79XWNbg+Vta8W6Wb2qtSZTSxIGkJrRpCFEiA==
   dependencies:
-    pako "~0.2.0"
+    pako "~1.0.5"
 
-browserslist@^1.0.0, browserslist@^1.0.1, browserslist@~1.4.0:
-  version "1.4.0"
-  resolved "https://registry.yarnpkg.com/browserslist/-/browserslist-1.4.0.tgz#9cfdcf5384d9158f5b70da2aa00b30e8ff019049"
+browserslist@^3.2.6:
+  version "3.2.8"
+  resolved "https://registry.yarnpkg.com/browserslist/-/browserslist-3.2.8.tgz#b0005361d6471f0f5952797a76fc985f1f978fc6"
+  integrity sha512-WHVocJYavUwVgVViC0ORikPHQquXwVh939TaelZ4WDqpWgTX/FsGhl/+P4qBUAGcRvtOgDgC+xftNWWp2RUTAQ==
   dependencies:
-    caniuse-db "^1.0.30000539"
+    caniuse-lite "^1.0.30000844"
+    electron-to-chromium "^1.3.47"
 
-browserslist@^2.1.5:
-  version "2.3.3"
-  resolved "https://registry.yarnpkg.com/browserslist/-/browserslist-2.3.3.tgz#2b0cabc4d28489f682598605858a0782f14b154c"
+browserslist@^4.0.0:
+  version "4.4.1"
+  resolved "https://registry.yarnpkg.com/browserslist/-/browserslist-4.4.1.tgz#42e828954b6b29a7a53e352277be429478a69062"
+  integrity sha512-pEBxEXg7JwaakBXjATYw/D1YZh4QUSCX/Mnd/wnqSRPPSi1U39iDhDoKGoBUcraKdxDlrYqJxSI5nNvD+dWP2A==
+  dependencies:
+    caniuse-lite "^1.0.30000929"
+    electron-to-chromium "^1.3.103"
+    node-releases "^1.1.3"
+
+browserslist@^4.4.2:
+  version "4.5.1"
+  resolved "https://registry.yarnpkg.com/browserslist/-/browserslist-4.5.1.tgz#2226cada1947b33f4cfcf7b608dcb519b6128106"
+  integrity sha512-/pPw5IAUyqaQXGuD5vS8tcbudyPZ241jk1W5pQBsGDfcjNQt7p8qxZhgMNuygDShte1PibLFexecWUPgmVLfrg==
+  dependencies:
+    caniuse-lite "^1.0.30000949"
+    electron-to-chromium "^1.3.116"
+    node-releases "^1.1.11"
+
+buffer-alloc-unsafe@^1.1.0:
+  version "1.1.0"
+  resolved "https://registry.yarnpkg.com/buffer-alloc-unsafe/-/buffer-alloc-unsafe-1.1.0.tgz#bd7dc26ae2972d0eda253be061dba992349c19f0"
+  integrity sha512-TEM2iMIEQdJ2yjPJoSIsldnleVaAk1oW3DBVUykyOLsEsFmEc9kn+SFFPz+gl54KQNxlDnAwCXosOS9Okx2xAg==
+
+buffer-alloc@^1.2.0:
+  version "1.2.0"
+  resolved "https://registry.yarnpkg.com/buffer-alloc/-/buffer-alloc-1.2.0.tgz#890dd90d923a873e08e10e5fd51a57e5b7cce0ec"
+  integrity sha512-CFsHQgjtW1UChdXgbyJGtnm+O/uLQeZdtbDo8mfUgYXCHSM1wgrVxXm6bSyrUuErEb+4sYVGCzASBRot7zyrow==
   dependencies:
-    caniuse-lite "^1.0.30000715"
-    electron-to-chromium "^1.3.18"
+    buffer-alloc-unsafe "^1.1.0"
+    buffer-fill "^1.0.0"
+
+buffer-equal@^1.0.0:
+  version "1.0.0"
+  resolved "https://registry.yarnpkg.com/buffer-equal/-/buffer-equal-1.0.0.tgz#59616b498304d556abd466966b22eeda3eca5fbe"
+  integrity sha1-WWFrSYME1Var1GaWayLu2j7KX74=
+
+buffer-fill@^1.0.0:
+  version "1.0.0"
+  resolved "https://registry.yarnpkg.com/buffer-fill/-/buffer-fill-1.0.0.tgz#f8f78b76789888ef39f205cd637f68e702122b2c"
+  integrity sha1-+PeLdniYiO858gXNY39o5wISKyw=
+
+buffer-from@^1.0.0:
+  version "1.1.1"
+  resolved "https://registry.yarnpkg.com/buffer-from/-/buffer-from-1.1.1.tgz#32713bc028f75c02fdb710d7c7bcec1f2c6070ef"
+  integrity sha512-MQcXEUbCKtEo7bhqEs6560Hyd4XaovZlO/k9V3hjVUF/zwW7KBVdSK4gIt/bzwS9MbR5qob+F5jusZsb0YQK2A==
 
 buffer-indexof@^1.0.0:
   version "1.1.1"
   resolved "https://registry.yarnpkg.com/buffer-indexof/-/buffer-indexof-1.1.1.tgz#52fabcc6a606d1a00302802648ef68f639da268c"
-
-buffer-shims@^1.0.0:
-  version "1.0.0"
-  resolved "https://registry.yarnpkg.com/buffer-shims/-/buffer-shims-1.0.0.tgz#9978ce317388c649ad8793028c3477ef044a8b51"
+  integrity sha512-4/rOEg86jivtPTeOUUT61jJO1Ya1TrR/OkqCSZDyq84WJh3LuuiphBYJN+fm5xufIk4XAFcEwte/8WzC8If/1g==
 
 buffer-xor@^1.0.3:
   version "1.0.3"
   resolved "https://registry.yarnpkg.com/buffer-xor/-/buffer-xor-1.0.3.tgz#26e61ed1422fb70dd42e6e36729ed51d855fe8d9"
+  integrity sha1-JuYe0UIvtw3ULm42cp7VHYVf6Nk=
 
 buffer@^4.3.0:
   version "4.9.1"
   resolved "https://registry.yarnpkg.com/buffer/-/buffer-4.9.1.tgz#6d1bb601b07a4efced97094132093027c95bc298"
+  integrity sha1-bRu2AbB6TvztlwlBMgkwJ8lbwpg=
   dependencies:
     base64-js "^1.0.2"
     ieee754 "^1.1.4"
@@ -1094,36 +2025,139 @@ buffer@^4.3.0:
 builtin-modules@^1.0.0:
   version "1.1.1"
   resolved "https://registry.yarnpkg.com/builtin-modules/-/builtin-modules-1.1.1.tgz#270f076c5a72c02f5b65a47df94c5fe3a278892f"
+  integrity sha1-Jw8HbFpywC9bZaR9+Uxf46J4iS8=
 
-builtin-status-codes@^2.0.0:
-  version "2.0.0"
-  resolved "https://registry.yarnpkg.com/builtin-status-codes/-/builtin-status-codes-2.0.0.tgz#6f22003baacf003ccd287afe6872151fddc58579"
+builtin-status-codes@^3.0.0:
+  version "3.0.0"
+  resolved "https://registry.yarnpkg.com/builtin-status-codes/-/builtin-status-codes-3.0.0.tgz#85982878e21b98e1c66425e03d0174788f569ee8"
+  integrity sha1-hZgoeOIbmOHGZCXgPQF0eI9Wnug=
 
-bytes@2.3.0:
-  version "2.3.0"
-  resolved "https://registry.yarnpkg.com/bytes/-/bytes-2.3.0.tgz#d5b680a165b6201739acb611542aabc2d8ceb070"
+builtins@^1.0.3:
+  version "1.0.3"
+  resolved "https://registry.npm.taobao.org/builtins/download/builtins-1.0.3.tgz#cb94faeb61c8696451db36534e1422f94f0aee88"
+  integrity sha1-y5T662HIaWRR2zZTThQi+U8K7og=
 
-bytes@2.4.0:
-  version "2.4.0"
-  resolved "https://registry.yarnpkg.com/bytes/-/bytes-2.4.0.tgz#7d97196f9d5baf7f6935e25985549edd2a6c2339"
+byline@^5.0.0:
+  version "5.0.0"
+  resolved "https://registry.npm.taobao.org/byline/download/byline-5.0.0.tgz#741c5216468eadc457b03410118ad77de8c1ddb1"
+  integrity sha1-dBxSFkaOrcRXsDQQEYrXfejB3bE=
+
+byte-size@^5.0.1:
+  version "5.0.1"
+  resolved "https://registry.npm.taobao.org/byte-size/download/byte-size-5.0.1.tgz#4b651039a5ecd96767e71a3d7ed380e48bed4191"
+  integrity sha1-S2UQOaXs2Wdn5xo9ftOA5IvtQZE=
+
+bytes@3.0.0:
+  version "3.0.0"
+  resolved "https://registry.yarnpkg.com/bytes/-/bytes-3.0.0.tgz#d32815404d689699f85a4ea4fa8755dd13a96048"
+  integrity sha1-0ygVQE1olpn4Wk6k+odV3ROpYEg=
+
+cacache@^11.0.2, cacache@^11.2.0, cacache@^11.3.1:
+  version "11.3.2"
+  resolved "https://registry.yarnpkg.com/cacache/-/cacache-11.3.2.tgz#2d81e308e3d258ca38125b676b98b2ac9ce69bfa"
+  integrity sha512-E0zP4EPGDOaT2chM08Als91eYnf8Z+eH1awwwVsngUmgppfM5jjJ8l3z5vO5p5w/I3LsiXawb1sW0VY65pQABg==
+  dependencies:
+    bluebird "^3.5.3"
+    chownr "^1.1.1"
+    figgy-pudding "^3.5.1"
+    glob "^7.1.3"
+    graceful-fs "^4.1.15"
+    lru-cache "^5.1.1"
+    mississippi "^3.0.0"
+    mkdirp "^0.5.1"
+    move-concurrently "^1.0.1"
+    promise-inflight "^1.0.1"
+    rimraf "^2.6.2"
+    ssri "^6.0.1"
+    unique-filename "^1.1.1"
+    y18n "^4.0.0"
+
+cacache@^12.0.0, cacache@^12.0.2, cacache@^12.0.3:
+  version "12.0.3"
+  resolved "https://registry.npm.taobao.org/cacache/download/cacache-12.0.3.tgz#be99abba4e1bf5df461cd5a2c1071fc432573390"
+  integrity sha1-vpmruk4b9d9GHNWiwQcfxDJXM5A=
+  dependencies:
+    bluebird "^3.5.5"
+    chownr "^1.1.1"
+    figgy-pudding "^3.5.1"
+    glob "^7.1.4"
+    graceful-fs "^4.1.15"
+    infer-owner "^1.0.3"
+    lru-cache "^5.1.1"
+    mississippi "^3.0.0"
+    mkdirp "^0.5.1"
+    move-concurrently "^1.0.1"
+    promise-inflight "^1.0.1"
+    rimraf "^2.6.3"
+    ssri "^6.0.1"
+    unique-filename "^1.1.1"
+    y18n "^4.0.0"
+
+cache-base@^1.0.1:
+  version "1.0.1"
+  resolved "https://registry.yarnpkg.com/cache-base/-/cache-base-1.0.1.tgz#0a7f46416831c8b662ee36fe4e7c59d76f666ab2"
+  integrity sha512-AKcdTnFSWATd5/GCPRxr2ChwIJ85CeyrEyjRHlKxQ56d4XJMGym0uAiKn0xbLOGOl3+yRpOTi484dVCEc5AUzQ==
+  dependencies:
+    collection-visit "^1.0.0"
+    component-emitter "^1.2.1"
+    get-value "^2.0.6"
+    has-value "^1.0.0"
+    isobject "^3.0.1"
+    set-value "^2.0.0"
+    to-object-path "^0.3.0"
+    union-value "^1.0.0"
+    unset-value "^1.0.0"
+
+call-limit@^1.1.1:
+  version "1.1.1"
+  resolved "https://registry.npm.taobao.org/call-limit/download/call-limit-1.1.1.tgz#ef15f2670db3f1992557e2d965abc459e6e358d4"
+  integrity sha1-7xXyZw2z8ZklV+LZZavEWebjWNQ=
+
+caller-callsite@^2.0.0:
+  version "2.0.0"
+  resolved "https://registry.yarnpkg.com/caller-callsite/-/caller-callsite-2.0.0.tgz#847e0fce0a223750a9a027c54b33731ad3154134"
+  integrity sha1-hH4PzgoiN1CpoCfFSzNzGtMVQTQ=
+  dependencies:
+    callsites "^2.0.0"
 
 caller-path@^0.1.0:
   version "0.1.0"
-  resolved "http://registry.npm.taobao.org/caller-path/download/caller-path-0.1.0.tgz#94085ef63581ecd3daa92444a8fe94e82577751f"
+  resolved "https://registry.yarnpkg.com/caller-path/-/caller-path-0.1.0.tgz#94085ef63581ecd3daa92444a8fe94e82577751f"
+  integrity sha1-lAhe9jWB7NPaqSREqP6U6CV3dR8=
   dependencies:
     callsites "^0.2.0"
 
+caller-path@^2.0.0:
+  version "2.0.0"
+  resolved "https://registry.yarnpkg.com/caller-path/-/caller-path-2.0.0.tgz#468f83044e369ab2010fac5f06ceee15bb2cb1f4"
+  integrity sha1-Ro+DBE42mrIBD6xfBs7uFbsssfQ=
+  dependencies:
+    caller-callsite "^2.0.0"
+
 callsite@1.0.0:
   version "1.0.0"
   resolved "https://registry.yarnpkg.com/callsite/-/callsite-1.0.0.tgz#280398e5d664bd74038b6f0905153e6e8af1bc20"
+  integrity sha1-KAOY5dZkvXQDi28JBRU+borxvCA=
 
 callsites@^0.2.0:
   version "0.2.0"
-  resolved "http://registry.npm.taobao.org/callsites/download/callsites-0.2.0.tgz#afab96262910a7f33c19a5775825c69f34e350ca"
+  resolved "https://registry.yarnpkg.com/callsites/-/callsites-0.2.0.tgz#afab96262910a7f33c19a5775825c69f34e350ca"
+  integrity sha1-r6uWJikQp/M8GaV3WCXGnzTjUMo=
+
+callsites@^2.0.0:
+  version "2.0.0"
+  resolved "https://registry.yarnpkg.com/callsites/-/callsites-2.0.0.tgz#06eb84f00eea413da86affefacbffb36093b3c50"
+  integrity sha1-BuuE8A7qQT2oav/vrL/7Ngk7PFA=
+
+callsites@^3.0.0:
+  version "3.1.0"
+  resolved "https://registry.yarnpkg.com/callsites/-/callsites-3.1.0.tgz#b3630abd8943432f54b3f0519238e33cd7df2f73"
+  integrity sha512-P8BjAsXvZS+VIDUI11hHCQEv74YT67YUi5JJFNWIqL235sBmjX4+qx9Muvls5ivyNENctx46xQLQ3aTuE7ssaQ==
 
 camel-case@3.0.x:
   version "3.0.0"
   resolved "https://registry.yarnpkg.com/camel-case/-/camel-case-3.0.0.tgz#ca3c3688a4e9cf3a4cda777dc4dcbc713249cf73"
+  integrity sha1-yjw2iKTpzzpM2nd9xNy8cTJJz3M=
   dependencies:
     no-case "^2.2.0"
     upper-case "^1.1.1"
@@ -1131,66 +2165,105 @@ camel-case@3.0.x:
 camelcase-keys@^2.0.0:
   version "2.1.0"
   resolved "https://registry.yarnpkg.com/camelcase-keys/-/camelcase-keys-2.1.0.tgz#308beeaffdf28119051efa1d932213c91b8f92e7"
+  integrity sha1-MIvur/3ygRkFHvodkyITyRuPkuc=
   dependencies:
     camelcase "^2.0.0"
     map-obj "^1.0.0"
 
-camelcase@^1.0.2, camelcase@^1.2.1:
+camelcase-keys@^4.0.0:
+  version "4.2.0"
+  resolved "https://registry.npmjs.org/camelcase-keys/-/camelcase-keys-4.2.0.tgz#a2aa5fb1af688758259c32c141426d78923b9b77"
+  integrity sha1-oqpfsa9oh1glnDLBQUJteJI7m3c=
+  dependencies:
+    camelcase "^4.1.0"
+    map-obj "^2.0.0"
+    quick-lru "^1.0.0"
+
+camelcase@^1.2.1:
   version "1.2.1"
   resolved "https://registry.yarnpkg.com/camelcase/-/camelcase-1.2.1.tgz#9bb5304d2e0b56698b2c758b08a3eaa9daa58a39"
+  integrity sha1-m7UwTS4LVmmLLHWLCKPqqdqlijk=
 
 camelcase@^2.0.0:
   version "2.1.1"
   resolved "https://registry.yarnpkg.com/camelcase/-/camelcase-2.1.1.tgz#7c1d16d679a1bbe59ca02cacecfb011e201f5a1f"
+  integrity sha1-fB0W1nmhu+WcoCys7PsBHiAfWh8=
 
 camelcase@^3.0.0:
   version "3.0.0"
   resolved "https://registry.yarnpkg.com/camelcase/-/camelcase-3.0.0.tgz#32fc4b9fcdaf845fcdf7e73bb97cac2261f0ab0a"
+  integrity sha1-MvxLn82vhF/N9+c7uXysImHwqwo=
 
-camelcase@^4.1.0:
+camelcase@^4.0.0, camelcase@^4.1.0:
   version "4.1.0"
   resolved "https://registry.yarnpkg.com/camelcase/-/camelcase-4.1.0.tgz#d545635be1e33c542649c69173e5de6acfae34dd"
+  integrity sha1-1UVjW+HjPFQmScaRc+Xeas+uNN0=
 
-caniuse-api@^1.3.2:
-  version "1.5.2"
-  resolved "https://registry.yarnpkg.com/caniuse-api/-/caniuse-api-1.5.2.tgz#8f393c682f661c0a997b77bba6e826483fb3600e"
-  dependencies:
-    browserslist "^1.0.1"
-    caniuse-db "^1.0.30000346"
-    lodash.memoize "^4.1.0"
-    lodash.uniq "^4.3.0"
-    shelljs "^0.7.0"
-
-caniuse-db@^1.0.30000346, caniuse-db@^1.0.30000539, caniuse-db@^1.0.30000597:
-  version "1.0.30000597"
-  resolved "https://registry.yarnpkg.com/caniuse-db/-/caniuse-db-1.0.30000597.tgz#b52e6cbe9dc83669affb98501629feaee1af6588"
+camelcase@^5.0.0:
+  version "5.0.0"
+  resolved "https://registry.yarnpkg.com/camelcase/-/camelcase-5.0.0.tgz#03295527d58bd3cd4aa75363f35b2e8d97be2f42"
+  integrity sha512-faqwZqnWxbxn+F1d399ygeamQNy3lPp/H9H6rNrqYh4FSVCtcY+3cub1MxA8o9mDd55mM8Aghuu/kuyYA6VTsA==
 
-caniuse-lite@^1.0.30000697, caniuse-lite@^1.0.30000715:
-  version "1.0.30000716"
-  resolved "https://registry.yarnpkg.com/caniuse-lite/-/caniuse-lite-1.0.30000716.tgz#2b40dd4a7edb7f0c468643b899b832b315988e6a"
+caniuse-api@^3.0.0:
+  version "3.0.0"
+  resolved "https://registry.yarnpkg.com/caniuse-api/-/caniuse-api-3.0.0.tgz#5e4d90e2274961d46291997df599e3ed008ee4c0"
+  integrity sha512-bsTwuIg/BZZK/vreVTYYbSWoe2F+71P7K5QGEX+pT250DZbfU1MQ5prOKpPR+LL6uWKK3KMwMCAS74QB3Um1uw==
+  dependencies:
+    browserslist "^4.0.0"
+    caniuse-lite "^1.0.0"
+    lodash.memoize "^4.1.2"
+    lodash.uniq "^4.5.0"
+
+caniuse-lite@^1.0.0, caniuse-lite@^1.0.30000929:
+  version "1.0.30000938"
+  resolved "https://registry.yarnpkg.com/caniuse-lite/-/caniuse-lite-1.0.30000938.tgz#b64bf1427438df40183fce910fe24e34feda7a3f"
+  integrity sha512-ekW8NQ3/FvokviDxhdKLZZAx7PptXNwxKgXtnR5y+PR3hckwuP3yJ1Ir+4/c97dsHNqtAyfKUGdw8P4EYzBNgw==
+
+caniuse-lite@^1.0.30000844:
+  version "1.0.30000929"
+  resolved "https://registry.yarnpkg.com/caniuse-lite/-/caniuse-lite-1.0.30000929.tgz#7b391b781a9c3097ecc39ea053301aea8ea16317"
+  integrity sha512-n2w1gPQSsYyorSVYqPMqbSaz1w7o9ZC8VhOEGI9T5MfGDzp7sbopQxG6GaQmYsaq13Xfx/mkxJUWC1Dz3oZfzw==
+
+caniuse-lite@^1.0.30000947, caniuse-lite@^1.0.30000949:
+  version "1.0.30000950"
+  resolved "https://registry.yarnpkg.com/caniuse-lite/-/caniuse-lite-1.0.30000950.tgz#8c559d66e332b34e919d1086cc6d29c1948856ae"
+  integrity sha512-Cs+4U9T0okW2ftBsCIHuEYXXkki7mjXmjCh4c6PzYShk04qDEr76/iC7KwhLoWoY65wcra1XOsRD+S7BptEb5A==
+
+capture-stack-trace@^1.0.0:
+  version "1.0.1"
+  resolved "https://registry.npm.taobao.org/capture-stack-trace/download/capture-stack-trace-1.0.1.tgz#a6c0bbe1f38f3aa0b92238ecb6ff42c344d4135d"
+  integrity sha1-psC74fOPOqC5Ijjstv9Cw0TUE10=
 
-caseless@~0.11.0:
-  version "0.11.0"
-  resolved "https://registry.yarnpkg.com/caseless/-/caseless-0.11.0.tgz#715b96ea9841593cc33067923f5ec60ebda4f7d7"
+caseless@~0.12.0:
+  version "0.12.0"
+  resolved "https://registry.yarnpkg.com/caseless/-/caseless-0.12.0.tgz#1b681c21ff84033c826543090689420d187151dc"
+  integrity sha1-G2gcIf+EAzyCZUMJBolCDRhxUdw=
 
-center-align@^0.1.1:
-  version "0.1.3"
-  resolved "https://registry.yarnpkg.com/center-align/-/center-align-0.1.3.tgz#aa0d32629b6ee972200411cbd4461c907bc2b7ad"
+chai@^4.2.0:
+  version "4.2.0"
+  resolved "https://registry.npmjs.org/chai/-/chai-4.2.0.tgz#760aa72cf20e3795e84b12877ce0e83737aa29e5"
+  integrity sha512-XQU3bhBukrOsQCuwZndwGcCVQHyZi53fQ6Ys1Fym7E4olpIqqZZhhoFJoaKVvV17lWQoXYwgWN2nF5crA8J2jw==
   dependencies:
-    align-text "^0.1.3"
-    lazy-cache "^1.0.3"
+    assertion-error "^1.1.0"
+    check-error "^1.0.2"
+    deep-eql "^3.0.1"
+    get-func-name "^2.0.0"
+    pathval "^1.1.0"
+    type-detect "^4.0.5"
 
-chai@^3.5.0:
-  version "3.5.0"
-  resolved "https://registry.yarnpkg.com/chai/-/chai-3.5.0.tgz#4d02637b067fe958bdbfdd3a40ec56fef7373247"
+chalk@2.4.2, chalk@^2.0.0, chalk@^2.0.1, chalk@^2.1.0, chalk@^2.3.0, chalk@^2.4.1, chalk@^2.4.2:
+  version "2.4.2"
+  resolved "https://registry.yarnpkg.com/chalk/-/chalk-2.4.2.tgz#cd42541677a54333cf541a49108c1432b44c9424"
+  integrity sha512-Mti+f9lpJNcwF4tWV8/OrTTtF1gZi+f8FqlyAdouralcFWFQWF2+NgCHShjkCb+IFBLq9buZwE1xckQU4peSuQ==
   dependencies:
-    assertion-error "^1.0.1"
-    deep-eql "^0.1.3"
-    type-detect "^1.0.0"
+    ansi-styles "^3.2.1"
+    escape-string-regexp "^1.0.5"
+    supports-color "^5.3.0"
 
 chalk@^0.5.0:
   version "0.5.1"
   resolved "https://registry.yarnpkg.com/chalk/-/chalk-0.5.1.tgz#663b3a648b68b55d04690d49167aa837858f2174"
+  integrity sha1-Zjs6ZItotV0EaQ1JFnqoN4WPIXQ=
   dependencies:
     ansi-styles "^1.1.0"
     escape-string-regexp "^1.0.0"
@@ -1198,9 +2271,10 @@ chalk@^0.5.0:
     strip-ansi "^0.3.0"
     supports-color "^0.2.0"
 
-chalk@^1.0.0, chalk@^1.1.0, chalk@^1.1.1, chalk@^1.1.3:
+chalk@^1.1.1, chalk@^1.1.3:
   version "1.1.3"
   resolved "https://registry.yarnpkg.com/chalk/-/chalk-1.1.3.tgz#a8115c55e4a702fe4d150abd3872822a7e09fc98"
+  integrity sha1-qBFcVeSnAv5NFQq9OHKCKn4J/Jg=
   dependencies:
     ansi-styles "^2.2.1"
     escape-string-regexp "^1.0.2"
@@ -1208,59 +2282,25 @@ chalk@^1.0.0, chalk@^1.1.0, chalk@^1.1.1, chalk@^1.1.3:
     strip-ansi "^3.0.0"
     supports-color "^2.0.0"
 
-chalk@^2.0.0, chalk@^2.1.0:
-  version "2.3.0"
-  resolved "http://registry.npm.taobao.org/chalk/download/chalk-2.3.0.tgz#b5ea48efc9c1793dccc9b4767c93914d3f2d52ba"
-  dependencies:
-    ansi-styles "^3.1.0"
-    escape-string-regexp "^1.0.5"
-    supports-color "^4.0.0"
-
-chalk@^2.0.1:
-  version "2.4.1"
-  resolved "http://registry.npm.taobao.org/chalk/download/chalk-2.4.1.tgz#18c49ab16a037b6eb0152cc83e3471338215b66e"
-  dependencies:
-    ansi-styles "^3.2.1"
-    escape-string-regexp "^1.0.5"
-    supports-color "^5.3.0"
-
-chalk@~0.4.0:
-  version "0.4.0"
-  resolved "https://registry.yarnpkg.com/chalk/-/chalk-0.4.0.tgz#5199a3ddcd0c1efe23bc08c1b027b06176e0c64f"
-  dependencies:
-    ansi-styles "~1.0.0"
-    has-color "~0.1.0"
-    strip-ansi "~0.1.0"
-
 chardet@^0.4.0:
   version "0.4.2"
-  resolved "http://registry.npm.taobao.org/chardet/download/chardet-0.4.2.tgz#b5473b33dc97c424e5d98dc87d55d4d8a29c8bf2"
+  resolved "https://registry.yarnpkg.com/chardet/-/chardet-0.4.2.tgz#b5473b33dc97c424e5d98dc87d55d4d8a29c8bf2"
+  integrity sha1-tUc7M9yXxCTl2Y3IfVXU2KKci/I=
 
-cheerio@^0.18.0:
-  version "0.18.0"
-  resolved "https://registry.yarnpkg.com/cheerio/-/cheerio-0.18.0.tgz#4e1c06377e725b740e996e0dfec353863de677fa"
-  dependencies:
-    CSSselect "~0.4.0"
-    dom-serializer "~0.0.0"
-    entities "~1.1.1"
-    htmlparser2 "~3.8.1"
-    lodash "~2.4.1"
+chardet@^0.7.0:
+  version "0.7.0"
+  resolved "https://registry.yarnpkg.com/chardet/-/chardet-0.7.0.tgz#90094849f0937f2eedc2425d0d28a9e5f0cbad9e"
+  integrity sha512-mT8iDcrh03qDGRRmoA2hmBJnxpllMR+0/0qlzjqZES6NdiWDcZkCNAk4rPFZ9Q85r27unkiNNg8ZOiwZXBHwcA==
 
-cheerio@^0.20.0:
-  version "0.20.0"
-  resolved "https://registry.yarnpkg.com/cheerio/-/cheerio-0.20.0.tgz#5c710f2bab95653272842ba01c6ea61b3545ec35"
-  dependencies:
-    css-select "~1.2.0"
-    dom-serializer "~0.1.0"
-    entities "~1.1.1"
-    htmlparser2 "~3.8.1"
-    lodash "^4.1.0"
-  optionalDependencies:
-    jsdom "^7.0.2"
+check-error@^1.0.2:
+  version "1.0.2"
+  resolved "https://registry.npmjs.org/check-error/-/check-error-1.0.2.tgz#574d312edd88bb5dd8912e9286dd6c0aed4aac82"
+  integrity sha1-V00xLt2Iu13YkS6Sht1sCu1KrII=
 
-chokidar@^1.0.0, chokidar@^1.4.1, chokidar@^1.6.0, chokidar@^1.7.0:
+chokidar@^1.6.1, chokidar@^1.7.0:
   version "1.7.0"
   resolved "https://registry.yarnpkg.com/chokidar/-/chokidar-1.7.0.tgz#798e689778151c8076b4b360e5edd28cda2bb468"
+  integrity sha1-eY5ol3gVHIB2tLNg5e3SjNortGg=
   dependencies:
     anymatch "^1.3.0"
     async-each "^1.0.0"
@@ -1273,349 +2313,834 @@ chokidar@^1.0.0, chokidar@^1.4.1, chokidar@^1.6.0, chokidar@^1.7.0:
   optionalDependencies:
     fsevents "^1.0.0"
 
+chokidar@^2.0.0, chokidar@^2.0.2:
+  version "2.0.4"
+  resolved "https://registry.yarnpkg.com/chokidar/-/chokidar-2.0.4.tgz#356ff4e2b0e8e43e322d18a372460bbcf3accd26"
+  integrity sha512-z9n7yt9rOvIJrMhvDtDictKrkFHeihkNl6uWMmZlmL6tJtX9Cs+87oK+teBx+JIgzvbX3yZHT3eF8vpbDxHJXQ==
+  dependencies:
+    anymatch "^2.0.0"
+    async-each "^1.0.0"
+    braces "^2.3.0"
+    glob-parent "^3.1.0"
+    inherits "^2.0.1"
+    is-binary-path "^1.0.0"
+    is-glob "^4.0.0"
+    lodash.debounce "^4.0.8"
+    normalize-path "^2.1.1"
+    path-is-absolute "^1.0.0"
+    readdirp "^2.0.0"
+    upath "^1.0.5"
+  optionalDependencies:
+    fsevents "^1.2.2"
+
+chokidar@^2.0.3:
+  version "2.1.2"
+  resolved "https://registry.npmjs.org/chokidar/-/chokidar-2.1.2.tgz#9c23ea40b01638439e0513864d362aeacc5ad058"
+  integrity sha512-IwXUx0FXc5ibYmPC2XeEj5mpXoV66sR+t3jqu2NS2GYwCktt3KF1/Qqjws/NkegajBA4RbZ5+DDwlOiJsxDHEg==
+  dependencies:
+    anymatch "^2.0.0"
+    async-each "^1.0.1"
+    braces "^2.3.2"
+    glob-parent "^3.1.0"
+    inherits "^2.0.3"
+    is-binary-path "^1.0.0"
+    is-glob "^4.0.0"
+    normalize-path "^3.0.0"
+    path-is-absolute "^1.0.0"
+    readdirp "^2.2.1"
+    upath "^1.1.0"
+  optionalDependencies:
+    fsevents "^1.2.7"
+
+chownr@^1.1.1:
+  version "1.1.1"
+  resolved "https://registry.yarnpkg.com/chownr/-/chownr-1.1.1.tgz#54726b8b8fff4df053c42187e801fb4412df1494"
+  integrity sha512-j38EvO5+LHX84jlo6h4UzmOwi0UgW61WRyPtJz4qaadK5eY3BTS5TY/S1Stc3Uk2lIM6TPevAlULiEJwie860g==
+
+chownr@^1.1.2, chownr@^1.1.3:
+  version "1.1.3"
+  resolved "https://registry.npm.taobao.org/chownr/download/chownr-1.1.3.tgz#42d837d5239688d55f303003a508230fa6727142"
+  integrity sha1-Qtg31SOWiNVfMDADpQgjD6ZycUI=
+
+chrome-trace-event@^1.0.0:
+  version "1.0.0"
+  resolved "https://registry.yarnpkg.com/chrome-trace-event/-/chrome-trace-event-1.0.0.tgz#45a91bd2c20c9411f0963b5aaeb9a1b95e09cc48"
+  integrity sha512-xDbVgyfDTT2piup/h8dK/y4QZfJRSa73bw1WZ8b4XM1o7fsFubUVGYcE+1ANtOzJJELGpYoG2961z0Z6OAld9A==
+  dependencies:
+    tslib "^1.9.0"
+
+ci-info@^1.5.0:
+  version "1.6.0"
+  resolved "https://registry.npm.taobao.org/ci-info/download/ci-info-1.6.0.tgz#2ca20dbb9ceb32d4524a683303313f0304b1e497"
+  integrity sha1-LKINu5zrMtRSSmgzAzE/AwSx5Jc=
+
+ci-info@^2.0.0:
+  version "2.0.0"
+  resolved "https://registry.npmjs.org/ci-info/-/ci-info-2.0.0.tgz#67a9e964be31a51e15e5010d58e6f12834002f46"
+  integrity sha512-5tK7EtrZ0N+OLFMthtqOj4fI2Jeb88C4CAZPu25LDVUgXJ0A3Js4PMGqrn0JU1W0Mh1/Z8wZzYPxqUrXeBboCQ==
+
+cidr-regex@^2.0.10:
+  version "2.0.10"
+  resolved "https://registry.npm.taobao.org/cidr-regex/download/cidr-regex-2.0.10.tgz#af13878bd4ad704de77d6dc800799358b3afa70d"
+  integrity sha1-rxOHi9StcE3nfW3IAHmTWLOvpw0=
+  dependencies:
+    ip-regex "^2.1.0"
+
 cipher-base@^1.0.0, cipher-base@^1.0.1, cipher-base@^1.0.3:
   version "1.0.4"
   resolved "https://registry.yarnpkg.com/cipher-base/-/cipher-base-1.0.4.tgz#8760e4ecc272f4c363532f926d874aae2c1397de"
+  integrity sha512-Kkht5ye6ZGmwv40uUDZztayT2ThLQGfnj/T71N/XzeZeo3nf8foyW7zGTsPYkEya3m5f3cAypH+qe7YOrM1U2Q==
   dependencies:
     inherits "^2.0.1"
     safe-buffer "^5.0.1"
 
 circular-json@^0.3.1:
   version "0.3.3"
-  resolved "http://registry.npm.taobao.org/circular-json/download/circular-json-0.3.3.tgz#815c99ea84f6809529d2f45791bdf82711352d66"
+  resolved "https://registry.yarnpkg.com/circular-json/-/circular-json-0.3.3.tgz#815c99ea84f6809529d2f45791bdf82711352d66"
+  integrity sha512-UZK3NBx2Mca+b5LsG7bY183pHWt5Y1xts4P3Pz7ENTwGVnJOUWbRb3ocjvX7hx9tq/yTAdclXm9sZ38gNuem4A==
 
-clap@^1.0.9:
-  version "1.1.2"
-  resolved "https://registry.yarnpkg.com/clap/-/clap-1.1.2.tgz#316545bf22229225a2cecaa6824cd2f56a9709ed"
+class-utils@^0.3.5:
+  version "0.3.6"
+  resolved "https://registry.yarnpkg.com/class-utils/-/class-utils-0.3.6.tgz#f93369ae8b9a7ce02fd41faad0ca83033190c463"
+  integrity sha512-qOhPa/Fj7s6TY8H8esGu5QNpMMQxz79h+urzrNYN6mn+9BnxlDGf5QZ+XeCDsxSjPqsSR56XOZOJmpeurnLMeg==
   dependencies:
-    chalk "^1.1.3"
+    arr-union "^3.1.0"
+    define-property "^0.2.5"
+    isobject "^3.0.0"
+    static-extend "^0.1.1"
+
+classnames@^2.2.6:
+  version "2.2.6"
+  resolved "https://registry.yarnpkg.com/classnames/-/classnames-2.2.6.tgz#43935bffdd291f326dad0a205309b38d00f650ce"
+  integrity sha512-JR/iSQOSt+LQIWwrwEzJ9uk0xfN3mTVYMwt1Ir5mUcSN6pU+V4zQFFaJsclJbPuAUQH+yfWef6tm7l1quW3C8Q==
+
+clean-css@4.2.x:
+  version "4.2.1"
+  resolved "https://registry.yarnpkg.com/clean-css/-/clean-css-4.2.1.tgz#2d411ef76b8569b6d0c84068dabe85b0aa5e5c17"
+  integrity sha512-4ZxI6dy4lrY6FHzfiy1aEOXgu4LIsW2MhwG0VBKdcoGoH/XLFgaHSdLTGr4O8Be6A8r3MOphEiI8Gc1n0ecf3g==
+  dependencies:
+    source-map "~0.6.0"
 
-clean-css@3.4.x, clean-css@^3.1.9:
-  version "3.4.22"
-  resolved "https://registry.yarnpkg.com/clean-css/-/clean-css-3.4.22.tgz#db323064f752028778233b58c54cd8535f860892"
+clean-css@^3.1.9:
+  version "3.4.28"
+  resolved "https://registry.yarnpkg.com/clean-css/-/clean-css-3.4.28.tgz#bf1945e82fc808f55695e6ddeaec01400efd03ff"
+  integrity sha1-vxlF6C/ICPVWlebd6uwBQA79A/8=
   dependencies:
     commander "2.8.x"
     source-map "0.4.x"
 
+cli-boxes@^1.0.0:
+  version "1.0.0"
+  resolved "https://registry.npm.taobao.org/cli-boxes/download/cli-boxes-1.0.0.tgz#4fa917c3e59c94a004cd61f8ee509da651687143"
+  integrity sha1-T6kXw+WclKAEzWH47lCdplFocUM=
+
+cli-columns@^3.1.2:
+  version "3.1.2"
+  resolved "https://registry.npm.taobao.org/cli-columns/download/cli-columns-3.1.2.tgz#6732d972979efc2ae444a1f08e08fa139c96a18e"
+  integrity sha1-ZzLZcpee/CrkRKHwjgj6E5yWoY4=
+  dependencies:
+    string-width "^2.0.0"
+    strip-ansi "^3.0.1"
+
 cli-cursor@^2.1.0:
   version "2.1.0"
-  resolved "http://registry.npm.taobao.org/cli-cursor/download/cli-cursor-2.1.0.tgz#b35dac376479facc3e94747d41d0d0f5238ffcb5"
+  resolved "https://registry.yarnpkg.com/cli-cursor/-/cli-cursor-2.1.0.tgz#b35dac376479facc3e94747d41d0d0f5238ffcb5"
+  integrity sha1-s12sN2R5+sw+lHR9QdDQ9SOP/LU=
   dependencies:
     restore-cursor "^2.0.0"
 
-cli-width@^2.0.0:
-  version "2.2.0"
-  resolved "http://registry.npm.taobao.org/cli-width/download/cli-width-2.2.0.tgz#ff19ede8a9a5e579324147b0c11f0fbcbabed639"
+cli-spinners@^1.0.1:
+  version "1.3.1"
+  resolved "https://registry.npm.taobao.org/cli-spinners/download/cli-spinners-1.3.1.tgz#002c1990912d0d59580c93bd36c056de99e4259a"
+  integrity sha1-ACwZkJEtDVlYDJO9NsBW3pnkJZo=
 
-cli@~1.0.0:
-  version "1.0.1"
-  resolved "http://registry.npm.taobao.org/cli/download/cli-1.0.1.tgz#22817534f24bfa4950c34d532d48ecbc621b8c14"
+cli-table3@^0.5.0, cli-table3@^0.5.1:
+  version "0.5.1"
+  resolved "https://registry.npm.taobao.org/cli-table3/download/cli-table3-0.5.1.tgz#0252372d94dfc40dbd8df06005f48f31f656f202"
+  integrity sha1-AlI3LZTfxA29jfBgBfSPMfZW8gI=
   dependencies:
-    exit "0.1.2"
-    glob "^7.1.1"
+    object-assign "^4.1.0"
+    string-width "^2.1.1"
+  optionalDependencies:
+    colors "^1.1.2"
 
-cliui@^2.1.0:
-  version "2.1.0"
-  resolved "https://registry.yarnpkg.com/cliui/-/cliui-2.1.0.tgz#4b475760ff80264c762c3a1719032e91c7fea0d1"
-  dependencies:
-    center-align "^0.1.1"
-    right-align "^0.1.1"
-    wordwrap "0.0.2"
+cli-width@^2.0.0:
+  version "2.2.0"
+  resolved "https://registry.yarnpkg.com/cli-width/-/cli-width-2.2.0.tgz#ff19ede8a9a5e579324147b0c11f0fbcbabed639"
+  integrity sha1-/xnt6Kml5XkyQUewwR8PvLq+1jk=
 
 cliui@^3.2.0:
   version "3.2.0"
   resolved "https://registry.yarnpkg.com/cliui/-/cliui-3.2.0.tgz#120601537a916d29940f934da3b48d585a39213d"
+  integrity sha1-EgYBU3qRbSmUD5NNo7SNWFo5IT0=
   dependencies:
     string-width "^1.0.1"
     strip-ansi "^3.0.1"
     wrap-ansi "^2.0.0"
 
-clone-deep@^0.3.0:
-  version "0.3.0"
-  resolved "https://registry.yarnpkg.com/clone-deep/-/clone-deep-0.3.0.tgz#348c61ae9cdbe0edfe053d91ff4cc521d790ede8"
+cliui@^4.0.0:
+  version "4.1.0"
+  resolved "https://registry.yarnpkg.com/cliui/-/cliui-4.1.0.tgz#348422dbe82d800b3022eef4f6ac10bf2e4d1b49"
+  integrity sha512-4FG+RSG9DL7uEwRUZXZn3SS34DiDPfzP0VOiEwtUWlE+AR2EIg+hSyvrIgUUfhdgR/UkAeW2QHgeP+hWrXs7jQ==
+  dependencies:
+    string-width "^2.1.1"
+    strip-ansi "^4.0.0"
+    wrap-ansi "^2.0.0"
+
+cliui@^5.0.0:
+  version "5.0.0"
+  resolved "https://registry.npmjs.org/cliui/-/cliui-5.0.0.tgz#deefcfdb2e800784aa34f46fa08e06851c7bbbc5"
+  integrity sha512-PYeGSEmmHM6zvoef2w8TPzlrnNpXIjTipYK780YswmIP9vjxmd6Y2a3CB2Ks6/AU8NHjZugXvo8w3oWM2qnwXA==
+  dependencies:
+    string-width "^3.1.0"
+    strip-ansi "^5.2.0"
+    wrap-ansi "^5.1.0"
+
+clone-buffer@^1.0.0:
+  version "1.0.0"
+  resolved "https://registry.yarnpkg.com/clone-buffer/-/clone-buffer-1.0.0.tgz#e3e25b207ac4e701af721e2cb5a16792cac3dc58"
+  integrity sha1-4+JbIHrE5wGvch4staFnksrD3Fg=
+
+clone-deep@^2.0.1:
+  version "2.0.2"
+  resolved "https://registry.yarnpkg.com/clone-deep/-/clone-deep-2.0.2.tgz#00db3a1e173656730d1188c3d6aced6d7ea97713"
+  integrity sha512-SZegPTKjCgpQH63E+eN6mVEEPdQBOUzjyJm5Pora4lrwWRFS8I0QAxV/KD6vV/i0WuijHZWQC1fMsPEdxfdVCQ==
   dependencies:
     for-own "^1.0.0"
-    is-plain-object "^2.0.1"
-    kind-of "^3.2.2"
-    shallow-clone "^0.1.2"
+    is-plain-object "^2.0.4"
+    kind-of "^6.0.0"
+    shallow-clone "^1.0.0"
 
-clone-stats@^0.0.1, clone-stats@~0.0.1:
+clone-stats@^1.0.0:
+  version "1.0.0"
+  resolved "https://registry.yarnpkg.com/clone-stats/-/clone-stats-1.0.0.tgz#b3782dff8bb5474e18b9b6bf0fdfe782f8777680"
+  integrity sha1-s3gt/4u1R04Yuba/D9/ngvh3doA=
+
+clone-stats@~0.0.1:
   version "0.0.1"
   resolved "https://registry.yarnpkg.com/clone-stats/-/clone-stats-0.0.1.tgz#b88f94a82cf38b8791d58046ea4029ad88ca99d1"
+  integrity sha1-uI+UqCzzi4eR1YBG6kAprYjKmdE=
 
-clone@^0.2.0:
-  version "0.2.0"
-  resolved "https://registry.yarnpkg.com/clone/-/clone-0.2.0.tgz#c6126a90ad4f72dbf5acdb243cc37724fe93fc1f"
+clone@^1.0.2:
+  version "1.0.4"
+  resolved "https://registry.npm.taobao.org/clone/download/clone-1.0.4.tgz#da309cc263df15994c688ca902179ca3c7cd7c7e"
+  integrity sha1-2jCcwmPfFZlMaIypAheco8fNfH4=
 
-clone@^1.0.0, clone@^1.0.2:
-  version "1.0.2"
-  resolved "https://registry.yarnpkg.com/clone/-/clone-1.0.2.tgz#260b7a99ebb1edfe247538175f783243cb19d149"
+clone@^2.1.1:
+  version "2.1.2"
+  resolved "https://registry.yarnpkg.com/clone/-/clone-2.1.2.tgz#1b7f4b9f591f1e8f83670401600345a02887435f"
+  integrity sha1-G39Ln1kfHo+DZwQBYANFoCiHQ18=
+
+cloneable-readable@^1.0.0:
+  version "1.1.2"
+  resolved "https://registry.yarnpkg.com/cloneable-readable/-/cloneable-readable-1.1.2.tgz#d591dee4a8f8bc15da43ce97dceeba13d43e2a65"
+  integrity sha512-Bq6+4t+lbM8vhTs/Bef5c5AdEMtapp/iFb6+s4/Hh9MVTt8OLKH7ZOOZSCT+Ys7hsHvqv0GuMPJ1lnQJVHvxpg==
+  dependencies:
+    inherits "^2.0.1"
+    process-nextick-args "^2.0.0"
+    readable-stream "^2.3.5"
+
+cmd-shim@^3.0.0, cmd-shim@^3.0.3:
+  version "3.0.3"
+  resolved "https://registry.npm.taobao.org/cmd-shim/download/cmd-shim-3.0.3.tgz#2c35238d3df37d98ecdd7d5f6b8dc6b21cadc7cb"
+  integrity sha1-LDUjjT3zfZjs3X1fa43Gshytx8s=
+  dependencies:
+    graceful-fs "^4.1.2"
+    mkdirp "~0.5.0"
 
 co@^4.6.0:
   version "4.6.0"
-  resolved "http://registry.npm.taobao.org/co/download/co-4.6.0.tgz#6ea6bdf3d853ae54ccb8e47bfa0bf3f9031fb184"
+  resolved "https://registry.yarnpkg.com/co/-/co-4.6.0.tgz#6ea6bdf3d853ae54ccb8e47bfa0bf3f9031fb184"
+  integrity sha1-bqa989hTrlTMuOR7+gvz+QMfsYQ=
 
-coa@~1.0.1:
-  version "1.0.1"
-  resolved "https://registry.yarnpkg.com/coa/-/coa-1.0.1.tgz#7f959346cfc8719e3f7233cd6852854a7c67d8a3"
+coa@~2.0.1:
+  version "2.0.2"
+  resolved "https://registry.yarnpkg.com/coa/-/coa-2.0.2.tgz#43f6c21151b4ef2bf57187db0d73de229e3e7ec3"
+  integrity sha512-q5/jG+YQnSy4nRTV4F7lPepBJZ8qBNJJDBuJdoejDyLXgmL7IEo+Le2JDZudFTFt7mrCqIRaSjws4ygRCTCAXA==
   dependencies:
+    "@types/q" "^1.5.1"
+    chalk "^2.4.1"
     q "^1.1.2"
 
 code-point-at@^1.0.0:
   version "1.1.0"
   resolved "https://registry.yarnpkg.com/code-point-at/-/code-point-at-1.1.0.tgz#0d070b4d043a5bea33a2f1a40e2edb3d9a4ccf77"
+  integrity sha1-DQcLTQQ6W+ozovGkDi7bPZpMz3c=
 
-collections@^0.2.0:
-  version "0.2.2"
-  resolved "https://registry.yarnpkg.com/collections/-/collections-0.2.2.tgz#1f23026b2ef36f927eecc901e99c5f0d48fa334e"
+collection-map@^1.0.0:
+  version "1.0.0"
+  resolved "https://registry.yarnpkg.com/collection-map/-/collection-map-1.0.0.tgz#aea0f06f8d26c780c2b75494385544b2255af18c"
+  integrity sha1-rqDwb40mx4DCt1SUOFVEsiVa8Yw=
   dependencies:
-    weak-map "1.0.0"
+    arr-map "^2.0.2"
+    for-own "^1.0.0"
+    make-iterator "^1.0.0"
 
-color-convert@^1.3.0:
-  version "1.9.0"
-  resolved "https://registry.yarnpkg.com/color-convert/-/color-convert-1.9.0.tgz#1accf97dd739b983bf994d56fec8f95853641b7a"
+collection-visit@^1.0.0:
+  version "1.0.0"
+  resolved "https://registry.yarnpkg.com/collection-visit/-/collection-visit-1.0.0.tgz#4bc0373c164bc3291b4d368c829cf1a80a59dca0"
+  integrity sha1-S8A3PBZLwykbTTaMgpzxqApZ3KA=
   dependencies:
-    color-name "^1.1.1"
+    map-visit "^1.0.0"
+    object-visit "^1.0.0"
 
-color-convert@^1.9.0:
-  version "1.9.1"
-  resolved "http://registry.npm.taobao.org/color-convert/download/color-convert-1.9.1.tgz#c1261107aeb2f294ebffec9ed9ecad529a6097ed"
+color-convert@^1.9.0, color-convert@^1.9.1:
+  version "1.9.3"
+  resolved "https://registry.yarnpkg.com/color-convert/-/color-convert-1.9.3.tgz#bb71850690e1f136567de629d2d5471deda4c1e8"
+  integrity sha512-QfAUtd+vFdAtFQcC8CCyYt1fYWxSqAiK2cSD6zDB8N3cpsEBAvRxp9zOGg6G/SHHJYAT88/az/IuDGALsNVbGg==
   dependencies:
-    color-name "^1.1.1"
-
-color-name@^1.0.0:
-  version "1.1.1"
-  resolved "https://registry.yarnpkg.com/color-name/-/color-name-1.1.1.tgz#4b1415304cf50028ea81643643bd82ea05803689"
+    color-name "1.1.3"
 
-color-name@^1.1.1:
+color-name@1.1.3:
   version "1.1.3"
-  resolved "http://registry.npm.taobao.org/color-name/download/color-name-1.1.3.tgz#a7d0558bd89c42f795dd42328f740831ca53bc25"
+  resolved "https://registry.yarnpkg.com/color-name/-/color-name-1.1.3.tgz#a7d0558bd89c42f795dd42328f740831ca53bc25"
+  integrity sha1-p9BVi9icQveV3UIyj3QIMcpTvCU=
 
-color-string@^0.3.0:
-  version "0.3.0"
-  resolved "https://registry.yarnpkg.com/color-string/-/color-string-0.3.0.tgz#27d46fb67025c5c2fa25993bfbf579e47841b991"
+color-name@^1.0.0:
+  version "1.1.4"
+  resolved "https://registry.yarnpkg.com/color-name/-/color-name-1.1.4.tgz#c2a09a87acbde69543de6f63fa3995c826c536a2"
+  integrity sha512-dOy+3AuW3a2wNbZHIuMZpTcgjGuLU/uBL/ubcZF9OXbDo8ff4O8yVp5Bf0efS8uEoYo5q4Fx7dY9OgQGXgAsQA==
+
+color-string@^1.5.2:
+  version "1.5.3"
+  resolved "https://registry.yarnpkg.com/color-string/-/color-string-1.5.3.tgz#c9bbc5f01b58b5492f3d6857459cb6590ce204cc"
+  integrity sha512-dC2C5qeWoYkxki5UAXapdjqO672AM4vZuPGRQfO8b5HKuKGBbKWpITyDYN7TOFKvRW7kOgAn3746clDBMDJyQw==
   dependencies:
     color-name "^1.0.0"
+    simple-swizzle "^0.2.2"
 
-color@^0.11.0, color@^0.11.1:
-  version "0.11.4"
-  resolved "https://registry.yarnpkg.com/color/-/color-0.11.4.tgz#6d7b5c74fb65e841cd48792ad1ed5e07b904d764"
-  dependencies:
-    clone "^1.0.2"
-    color-convert "^1.3.0"
-    color-string "^0.3.0"
+color-support@^1.1.3:
+  version "1.1.3"
+  resolved "https://registry.yarnpkg.com/color-support/-/color-support-1.1.3.tgz#93834379a1cc9a0c61f82f52f0d04322251bd5a2"
+  integrity sha512-qiBjkpbMLO/HL68y+lh4q0/O1MZFj2RX6X/KmMa3+gJD3z+WwI1ZzDHysvqHGS3mP6mznPckpXmw1nI9cJjyRg==
 
-colormin@^1.0.5:
-  version "1.1.2"
-  resolved "https://registry.yarnpkg.com/colormin/-/colormin-1.1.2.tgz#ea2f7420a72b96881a38aae59ec124a6f7298133"
+color@^3.0.0:
+  version "3.1.0"
+  resolved "https://registry.yarnpkg.com/color/-/color-3.1.0.tgz#d8e9fb096732875774c84bf922815df0308d0ffc"
+  integrity sha512-CwyopLkuRYO5ei2EpzpIh6LqJMt6Mt+jZhO5VI5f/wJLZriXQE32/SSqzmrh+QB+AZT81Cj8yv+7zwToW8ahZg==
   dependencies:
-    color "^0.11.0"
-    css-color-names "0.0.4"
-    has "^1.0.1"
+    color-convert "^1.9.1"
+    color-string "^1.5.2"
+
+colors@^1.1.0, colors@^1.1.2:
+  version "1.3.3"
+  resolved "https://registry.yarnpkg.com/colors/-/colors-1.3.3.tgz#39e005d546afe01e01f9c4ca8fa50f686a01205d"
+  integrity sha512-mmGt/1pZqYRjMxB1axhTo16/snVZ5krrKkcmMeVKxzECMMXoCgnvTPp10QgHfcbQZw8Dq2jMNG6je4JlWU0gWg==
 
-colors@^1.1.0, colors@~1.1.2:
+colors@~1.1.2:
   version "1.1.2"
   resolved "https://registry.yarnpkg.com/colors/-/colors-1.1.2.tgz#168a4701756b6a7f51a12ce0c97bfa28c084ed63"
+  integrity sha1-FopHAXVran9RoSzgyXv6KMCE7WM=
 
-colors@~0.6.0:
-  version "0.6.2"
-  resolved "https://registry.yarnpkg.com/colors/-/colors-0.6.2.tgz#2423fe6678ac0c5dae8852e5d0e5be08c997abcc"
-
-combine-lists@^1.0.0:
-  version "1.0.1"
-  resolved "https://registry.yarnpkg.com/combine-lists/-/combine-lists-1.0.1.tgz#458c07e09e0d900fc28b70a3fec2dacd1d2cb7f6"
+columnify@~1.5.4:
+  version "1.5.4"
+  resolved "https://registry.npm.taobao.org/columnify/download/columnify-1.5.4.tgz#4737ddf1c7b69a8a7c340570782e947eec8e78bb"
+  integrity sha1-Rzfd8ce2mop8NAVweC6UfuyOeLs=
   dependencies:
-    lodash "^4.5.0"
+    strip-ansi "^3.0.0"
+    wcwidth "^1.0.0"
 
-combined-stream@^1.0.5, combined-stream@~1.0.5:
-  version "1.0.5"
-  resolved "https://registry.yarnpkg.com/combined-stream/-/combined-stream-1.0.5.tgz#938370a57b4a51dea2c77c15d5c5fdf895164009"
+combined-stream@^1.0.6, combined-stream@~1.0.6:
+  version "1.0.7"
+  resolved "https://registry.yarnpkg.com/combined-stream/-/combined-stream-1.0.7.tgz#2d1d24317afb8abe95d6d2c0b07b57813539d828"
+  integrity sha512-brWl9y6vOB1xYPZcpZde3N9zDByXTosAeMDo4p1wzo6UMOX4vumB+TP1RZ76sfE6Md68Q0NJSrE/gbezd4Ul+w==
   dependencies:
     delayed-stream "~1.0.0"
 
+commander@2.17.x, commander@~2.17.1:
+  version "2.17.1"
+  resolved "https://registry.yarnpkg.com/commander/-/commander-2.17.1.tgz#bd77ab7de6de94205ceacc72f1716d29f20a77bf"
+  integrity sha512-wPMUt6FnH2yzG95SA6mzjQOEKUU3aLaDEmzs1ti+1E9h+CsrZghRlqEM/EJ4KscsQVG8uNN4uVreUeT8+drlgg==
+
 commander@2.8.x:
   version "2.8.1"
   resolved "https://registry.yarnpkg.com/commander/-/commander-2.8.1.tgz#06be367febfda0c330aa1e2a072d3dc9762425d4"
+  integrity sha1-Br42f+v9oMMwqh4qBy09yXYkJdQ=
   dependencies:
     graceful-readlink ">= 1.0.0"
 
-commander@2.9.0, commander@2.9.x, commander@^2.8.1, commander@^2.9.0:
-  version "2.9.0"
-  resolved "https://registry.yarnpkg.com/commander/-/commander-2.9.0.tgz#9c99094176e12240cb22d6c5146098400fe0f7d4"
-  dependencies:
-    graceful-readlink ">= 1.0.0"
+commander@^2.11.0, commander@^2.19.0:
+  version "2.19.0"
+  resolved "https://registry.yarnpkg.com/commander/-/commander-2.19.0.tgz#f6198aa84e5b83c46054b94ddedbfed5ee9ff12a"
+  integrity sha512-6tvAOO+D6OENvRAh524Dh9jcfKTYDQAqvqezbCW82xj5X0pSrcpxtvRKHLG0yBY6SD7PSDrJaj+0AiOcKVd1Xg==
+
+commander@~2.20.0:
+  version "2.20.0"
+  resolved "https://registry.yarnpkg.com/commander/-/commander-2.20.0.tgz#d58bb2b5c1ee8f87b0d340027e9e94e222c5a422"
+  integrity sha512-7j2y+40w61zy6YC2iRNpUe/NwhNyoXrYpHMrSunaMG64nRnaf96zO/KMQR4OyN/UnE5KLyEBnKHd4aG3rskjpQ==
 
 commondir@^1.0.1:
   version "1.0.1"
   resolved "https://registry.yarnpkg.com/commondir/-/commondir-1.0.1.tgz#ddd800da0c66127393cca5950ea968a3aaf1253b"
+  integrity sha1-3dgA2gxmEnOTzKWVDqloo6rxJTs=
+
+compare-func@^1.3.1:
+  version "1.3.2"
+  resolved "https://registry.npmjs.org/compare-func/-/compare-func-1.3.2.tgz#99dd0ba457e1f9bc722b12c08ec33eeab31fa648"
+  integrity sha1-md0LpFfh+bxyKxLAjsM+6rMfpkg=
+  dependencies:
+    array-ify "^1.0.0"
+    dot-prop "^3.0.0"
 
 component-bind@1.0.0:
   version "1.0.0"
   resolved "https://registry.yarnpkg.com/component-bind/-/component-bind-1.0.0.tgz#00c608ab7dcd93897c0009651b1d3a8e1e73bbd1"
+  integrity sha1-AMYIq33Nk4l8AAllGx06jh5zu9E=
 
-component-emitter@1.1.2:
-  version "1.1.2"
-  resolved "https://registry.yarnpkg.com/component-emitter/-/component-emitter-1.1.2.tgz#296594f2753daa63996d2af08d15a95116c9aec3"
-
-component-emitter@1.2.0:
-  version "1.2.0"
-  resolved "https://registry.yarnpkg.com/component-emitter/-/component-emitter-1.2.0.tgz#ccd113a86388d06482d03de3fc7df98526ba8efe"
+component-emitter@1.2.1, component-emitter@^1.2.1:
+  version "1.2.1"
+  resolved "https://registry.yarnpkg.com/component-emitter/-/component-emitter-1.2.1.tgz#137918d6d78283f7df7a6b7c5a63e140e69425e6"
+  integrity sha1-E3kY1teCg/ffemt8WmPhQOaUJeY=
 
 component-inherit@0.0.3:
   version "0.0.3"
   resolved "https://registry.yarnpkg.com/component-inherit/-/component-inherit-0.0.3.tgz#645fc4adf58b72b649d5cae65135619db26ff143"
+  integrity sha1-ZF/ErfWLcrZJ1crmUTVhnbJv8UM=
 
-compressible@~2.0.8:
-  version "2.0.9"
-  resolved "https://registry.yarnpkg.com/compressible/-/compressible-2.0.9.tgz#6daab4e2b599c2770dd9e21e7a891b1c5a755425"
+compressible@~2.0.14:
+  version "2.0.15"
+  resolved "https://registry.yarnpkg.com/compressible/-/compressible-2.0.15.tgz#857a9ab0a7e5a07d8d837ed43fe2defff64fe212"
+  integrity sha512-4aE67DL33dSW9gw4CI2H/yTxqHLNcxp0yS6jB+4h+wr3e43+1z7vm0HU9qXOH8j+qjKuL8+UtkOxYQSMq60Ylw==
   dependencies:
-    mime-db ">= 1.24.0 < 2"
+    mime-db ">= 1.36.0 < 2"
 
 compression@^1.5.2:
-  version "1.6.2"
-  resolved "https://registry.yarnpkg.com/compression/-/compression-1.6.2.tgz#cceb121ecc9d09c52d7ad0c3350ea93ddd402bc3"
-  dependencies:
-    accepts "~1.3.3"
-    bytes "2.3.0"
-    compressible "~2.0.8"
-    debug "~2.2.0"
+  version "1.7.3"
+  resolved "https://registry.yarnpkg.com/compression/-/compression-1.7.3.tgz#27e0e176aaf260f7f2c2813c3e440adb9f1993db"
+  integrity sha512-HSjyBG5N1Nnz7tF2+O7A9XUhyjru71/fwgNb7oIsEVHR0WShfs2tIS/EySLgiTe98aOK18YDlMXpzjCXY/n9mg==
+  dependencies:
+    accepts "~1.3.5"
+    bytes "3.0.0"
+    compressible "~2.0.14"
+    debug "2.6.9"
     on-headers "~1.0.1"
-    vary "~1.1.0"
+    safe-buffer "5.1.2"
+    vary "~1.1.2"
 
 concat-map@0.0.1:
   version "0.0.1"
-  resolved "http://registry.npm.taobao.org/concat-map/download/concat-map-0.0.1.tgz#d8a96bd77fd68df7793a73036a3ba0d5405d477b"
+  resolved "https://registry.yarnpkg.com/concat-map/-/concat-map-0.0.1.tgz#d8a96bd77fd68df7793a73036a3ba0d5405d477b"
+  integrity sha1-2Klr13/Wjfd5OnMDajug1UBdR3s=
 
-concat-stream@^1.6.0:
-  version "1.6.0"
-  resolved "http://registry.npm.taobao.org/concat-stream/download/concat-stream-1.6.0.tgz#0aac662fd52be78964d5532f694784e70110acf7"
+concat-stream@^1.5.0, concat-stream@^1.6.0:
+  version "1.6.2"
+  resolved "https://registry.yarnpkg.com/concat-stream/-/concat-stream-1.6.2.tgz#904bdf194cd3122fc675c77fc4ac3d4ff0fd1a34"
+  integrity sha512-27HBghJxjiZtIk3Ycvn/4kbJk/1uZuJFfuPEns6LaEvpvG1f0hTea8lilrouyo9mVc2GWdcEZ8OLoGmSADlrCw==
   dependencies:
+    buffer-from "^1.0.0"
     inherits "^2.0.3"
     readable-stream "^2.2.2"
     typedarray "^0.0.6"
 
+concat-stream@^2.0.0:
+  version "2.0.0"
+  resolved "https://registry.npmjs.org/concat-stream/-/concat-stream-2.0.0.tgz#414cf5af790a48c60ab9be4527d56d5e41133cb1"
+  integrity sha512-MWufYdFw53ccGjCA+Ol7XJYpAlW6/prSMzuPOTRnJGcGzuhLn4Scrz7qf6o8bROZ514ltazcIFJZevcfbo0x7A==
+  dependencies:
+    buffer-from "^1.0.0"
+    inherits "^2.0.3"
+    readable-stream "^3.0.2"
+    typedarray "^0.0.6"
+
+config-chain@^1.1.12:
+  version "1.1.12"
+  resolved "https://registry.npm.taobao.org/config-chain/download/config-chain-1.1.12.tgz#0fde8d091200eb5e808caf25fe618c02f48e4efa"
+  integrity sha1-D96NCRIA616AjK8l/mGMAvSOTvo=
+  dependencies:
+    ini "^1.3.4"
+    proto-list "~1.2.1"
+
+configstore@^3.0.0:
+  version "3.1.2"
+  resolved "https://registry.npm.taobao.org/configstore/download/configstore-3.1.2.tgz#c6f25defaeef26df12dd33414b001fe81a543f8f"
+  integrity sha1-xvJd767vJt8S3TNBSwAf6BpUP48=
+  dependencies:
+    dot-prop "^4.1.0"
+    graceful-fs "^4.1.2"
+    make-dir "^1.0.0"
+    unique-string "^1.0.0"
+    write-file-atomic "^2.0.0"
+    xdg-basedir "^3.0.0"
+
 connect-history-api-fallback@^1.3.0:
-  version "1.3.0"
-  resolved "https://registry.yarnpkg.com/connect-history-api-fallback/-/connect-history-api-fallback-1.3.0.tgz#e51d17f8f0ef0db90a64fdb47de3051556e9f169"
+  version "1.6.0"
+  resolved "https://registry.yarnpkg.com/connect-history-api-fallback/-/connect-history-api-fallback-1.6.0.tgz#8b32089359308d111115d81cad3fceab888f97bc"
+  integrity sha512-e54B99q/OUoH64zYYRf3HBP5z24G38h5D3qXu23JGRoigpX5Ss4r9ZnDk3g0Z8uQC2x2lPaJ+UlWBc1ZWBWdLg==
 
-connect@^3.3.5:
-  version "3.5.0"
-  resolved "https://registry.yarnpkg.com/connect/-/connect-3.5.0.tgz#b357525a0b4c1f50599cd983e1d9efeea9677198"
+connect@^3.6.0:
+  version "3.6.6"
+  resolved "https://registry.yarnpkg.com/connect/-/connect-3.6.6.tgz#09eff6c55af7236e137135a72574858b6786f524"
+  integrity sha1-Ce/2xVr3I24TcTWnJXSFi2eG9SQ=
   dependencies:
-    debug "~2.2.0"
-    finalhandler "0.5.0"
-    parseurl "~1.3.1"
-    utils-merge "1.0.0"
+    debug "2.6.9"
+    finalhandler "1.1.0"
+    parseurl "~1.3.2"
+    utils-merge "1.0.1"
 
-console-browserify@1.1.x, console-browserify@^1.1.0:
+connectivity@^1.0.0:
+  version "1.0.2"
+  resolved "https://registry.npm.taobao.org/connectivity/download/connectivity-1.0.2.tgz#1816a4217b126a8fb331c5247f7e9c5c0a25ae96"
+  integrity sha1-GBakIXsSao+zMcUkf36cXAolrpY=
+  dependencies:
+    once "^1.3.0"
+
+console-browserify@^1.1.0:
   version "1.1.0"
   resolved "https://registry.yarnpkg.com/console-browserify/-/console-browserify-1.1.0.tgz#f0241c45730a9fc6323b206dbf38edc741d0bb10"
+  integrity sha1-8CQcRXMKn8YyOyBtvzjtx0HQuxA=
   dependencies:
     date-now "^0.1.4"
 
-console-control-strings@^1.0.0, console-control-strings@~1.1.0:
+console-control-strings@^1.0.0, console-control-strings@^1.1.0, console-control-strings@~1.1.0:
   version "1.1.0"
   resolved "https://registry.yarnpkg.com/console-control-strings/-/console-control-strings-1.1.0.tgz#3d7cf4464db6446ea644bf4b39507f9851008e8e"
+  integrity sha1-PXz0Rk22RG6mRL9LOVB/mFEAjo4=
 
-consolidate@^0.14.0:
-  version "0.14.5"
-  resolved "https://registry.yarnpkg.com/consolidate/-/consolidate-0.14.5.tgz#5a25047bc76f73072667c8cb52c989888f494c63"
+consolidate@^0.15.1:
+  version "0.15.1"
+  resolved "https://registry.yarnpkg.com/consolidate/-/consolidate-0.15.1.tgz#21ab043235c71a07d45d9aad98593b0dba56bab7"
+  integrity sha512-DW46nrsMJgy9kqAbPt5rKaCr7uFtpo4mSUvLHIUbJEjm0vo+aY5QLwBUq3FK4tRnJr/X0Psc0C4jf/h+HtXSMw==
   dependencies:
     bluebird "^3.1.1"
 
 constants-browserify@^1.0.0:
   version "1.0.0"
   resolved "https://registry.yarnpkg.com/constants-browserify/-/constants-browserify-1.0.0.tgz#c20b96d8c617748aaf1c16021760cd27fcb8cb75"
+  integrity sha1-wguW2MYXdIqvHBYCF2DNJ/y4y3U=
 
-content-disposition@0.5.1:
-  version "0.5.1"
-  resolved "https://registry.yarnpkg.com/content-disposition/-/content-disposition-0.5.1.tgz#87476c6a67c8daa87e32e87616df883ba7fb071b"
+content-disposition@0.5.2:
+  version "0.5.2"
+  resolved "https://registry.yarnpkg.com/content-disposition/-/content-disposition-0.5.2.tgz#0cf68bb9ddf5f2be7961c3a85178cb85dba78cb4"
+  integrity sha1-DPaLud318r55YcOoUXjLhdunjLQ=
 
-content-type@~1.0.2:
-  version "1.0.2"
-  resolved "https://registry.yarnpkg.com/content-type/-/content-type-1.0.2.tgz#b7d113aee7a8dd27bd21133c4dc2529df1721eed"
+content-type@~1.0.4:
+  version "1.0.4"
+  resolved "https://registry.yarnpkg.com/content-type/-/content-type-1.0.4.tgz#e138cc75e040c727b1966fe5e5f8c9aee256fe3b"
+  integrity sha512-hIP3EEPs8tB9AT1L+NUqtwOAps4mk2Zob89MWXMHjHWg9milF/j4osnnQLXBCBFBk/tvIG/tUc9mOUJiPBhPXA==
 
-convert-source-map@^1.1.0:
-  version "1.3.0"
-  resolved "https://registry.yarnpkg.com/convert-source-map/-/convert-source-map-1.3.0.tgz#e9f3e9c6e2728efc2676696a70eb382f73106a67"
+conventional-changelog-angular@^1.3.3:
+  version "1.6.6"
+  resolved "https://registry.yarnpkg.com/conventional-changelog-angular/-/conventional-changelog-angular-1.6.6.tgz#b27f2b315c16d0a1f23eb181309d0e6a4698ea0f"
+  integrity sha512-suQnFSqCxRwyBxY68pYTsFkG0taIdinHLNEAX5ivtw8bCRnIgnpvcHmlR/yjUyZIrNPYAoXlY1WiEKWgSE4BNg==
+  dependencies:
+    compare-func "^1.3.1"
+    q "^1.5.1"
+
+conventional-changelog-angular@^5.0.3:
+  version "5.0.3"
+  resolved "https://registry.npmjs.org/conventional-changelog-angular/-/conventional-changelog-angular-5.0.3.tgz#299fdd43df5a1f095283ac16aeedfb0a682ecab0"
+  integrity sha512-YD1xzH7r9yXQte/HF9JBuEDfvjxxwDGGwZU1+ndanbY0oFgA+Po1T9JDSpPLdP0pZT6MhCAsdvFKC4TJ4MTJTA==
+  dependencies:
+    compare-func "^1.3.1"
+    q "^1.5.1"
+
+conventional-changelog-atom@^2.0.1:
+  version "2.0.1"
+  resolved "https://registry.npmjs.org/conventional-changelog-atom/-/conventional-changelog-atom-2.0.1.tgz#dc88ce650ffa9ceace805cbe70f88bfd0cb2c13a"
+  integrity sha512-9BniJa4gLwL20Sm7HWSNXd0gd9c5qo49gCi8nylLFpqAHhkFTj7NQfROq3f1VpffRtzfTQp4VKU5nxbe2v+eZQ==
+  dependencies:
+    q "^1.5.1"
+
+conventional-changelog-codemirror@^2.0.1:
+  version "2.0.1"
+  resolved "https://registry.npmjs.org/conventional-changelog-codemirror/-/conventional-changelog-codemirror-2.0.1.tgz#acc046bc0971460939a0cc2d390e5eafc5eb30da"
+  integrity sha512-23kT5IZWa+oNoUaDUzVXMYn60MCdOygTA2I+UjnOMiYVhZgmVwNd6ri/yDlmQGXHqbKhNR5NoXdBzSOSGxsgIQ==
+  dependencies:
+    q "^1.5.1"
+
+conventional-changelog-config-spec@2.0.0:
+  version "2.0.0"
+  resolved "https://registry.npmjs.org/conventional-changelog-config-spec/-/conventional-changelog-config-spec-2.0.0.tgz#a9e8c9225d4a922d25f4ac501e454274ae4ad0b3"
+  integrity sha512-zQmcBP/pR8tN5MSv+nXG9hOmy+Z6rgEquBerpoEbOKTFPLoxBy/adeUUpshrMpqdZ/ycqbT2AgdTtiIu/9IHGg==
+
+conventional-changelog-conventionalcommits@^4.0.0:
+  version "4.1.0"
+  resolved "https://registry.npmjs.org/conventional-changelog-conventionalcommits/-/conventional-changelog-conventionalcommits-4.1.0.tgz#eb7d47a9c5f1a6f9846a649482294e4ac50d7683"
+  integrity sha512-J3xolGrH8PTxpCqueHOuZtv3Cp73SQOWiBQzlsaugZAZ+hZgcJBonmC+1bQbfGs2neC2S18p2L1Gx+nTEglJTQ==
+  dependencies:
+    compare-func "^1.3.1"
+    q "^1.5.1"
+
+conventional-changelog-core@^3.2.3:
+  version "3.2.3"
+  resolved "https://registry.npmjs.org/conventional-changelog-core/-/conventional-changelog-core-3.2.3.tgz#b31410856f431c847086a7dcb4d2ca184a7d88fb"
+  integrity sha512-LMMX1JlxPIq/Ez5aYAYS5CpuwbOk6QFp8O4HLAcZxe3vxoCtABkhfjetk8IYdRB9CDQGwJFLR3Dr55Za6XKgUQ==
+  dependencies:
+    conventional-changelog-writer "^4.0.6"
+    conventional-commits-parser "^3.0.3"
+    dateformat "^3.0.0"
+    get-pkg-repo "^1.0.0"
+    git-raw-commits "2.0.0"
+    git-remote-origin-url "^2.0.0"
+    git-semver-tags "^2.0.3"
+    lodash "^4.2.1"
+    normalize-package-data "^2.3.5"
+    q "^1.5.1"
+    read-pkg "^3.0.0"
+    read-pkg-up "^3.0.0"
+    through2 "^3.0.0"
+
+conventional-changelog-ember@^2.0.2:
+  version "2.0.2"
+  resolved "https://registry.npmjs.org/conventional-changelog-ember/-/conventional-changelog-ember-2.0.2.tgz#284ffdea8c83ea8c210b65c5b4eb3e5cc0f4f51a"
+  integrity sha512-qtZbA3XefO/n6DDmkYywDYi6wDKNNc98MMl2F9PKSaheJ25Trpi3336W8fDlBhq0X+EJRuseceAdKLEMmuX2tg==
+  dependencies:
+    q "^1.5.1"
+
+conventional-changelog-eslint@^3.0.2:
+  version "3.0.2"
+  resolved "https://registry.npmjs.org/conventional-changelog-eslint/-/conventional-changelog-eslint-3.0.2.tgz#e9eb088cda6be3e58b2de6a5aac63df0277f3cbe"
+  integrity sha512-Yi7tOnxjZLXlCYBHArbIAm8vZ68QUSygFS7PgumPRiEk+9NPUeucy5Wg9AAyKoBprSV3o6P7Oghh4IZSLtKCvQ==
+  dependencies:
+    q "^1.5.1"
+
+conventional-changelog-express@^2.0.1:
+  version "2.0.1"
+  resolved "https://registry.npmjs.org/conventional-changelog-express/-/conventional-changelog-express-2.0.1.tgz#fea2231d99a5381b4e6badb0c1c40a41fcacb755"
+  integrity sha512-G6uCuCaQhLxdb4eEfAIHpcfcJ2+ao3hJkbLrw/jSK/eROeNfnxCJasaWdDAfFkxsbpzvQT4W01iSynU3OoPLIw==
+  dependencies:
+    q "^1.5.1"
+
+conventional-changelog-jquery@^3.0.4:
+  version "3.0.4"
+  resolved "https://registry.npmjs.org/conventional-changelog-jquery/-/conventional-changelog-jquery-3.0.4.tgz#7eb598467b83db96742178e1e8d68598bffcd7ae"
+  integrity sha512-IVJGI3MseYoY6eybknnTf9WzeQIKZv7aNTm2KQsiFVJH21bfP2q7XVjfoMibdCg95GmgeFlaygMdeoDDa+ZbEQ==
+  dependencies:
+    q "^1.5.1"
+
+conventional-changelog-jshint@^2.0.1:
+  version "2.0.1"
+  resolved "https://registry.npmjs.org/conventional-changelog-jshint/-/conventional-changelog-jshint-2.0.1.tgz#11c0e8283abf156a4ff78e89be6fdedf9bd72202"
+  integrity sha512-kRFJsCOZzPFm2tzRHULWP4tauGMvccOlXYf3zGeuSW4U0mZhk5NsjnRZ7xFWrTFPlCLV+PNmHMuXp5atdoZmEg==
+  dependencies:
+    compare-func "^1.3.1"
+    q "^1.5.1"
+
+conventional-changelog-preset-loader@^2.1.1, conventional-changelog-preset-loader@^2.2.0:
+  version "2.2.0"
+  resolved "https://registry.npmjs.org/conventional-changelog-preset-loader/-/conventional-changelog-preset-loader-2.2.0.tgz#571e2b3d7b53d65587bea9eedf6e37faa5db4fcc"
+  integrity sha512-zXB+5vF7D5Y3Cb/rJfSyCCvFphCVmF8mFqOdncX3BmjZwAtGAPfYrBcT225udilCKvBbHgyzgxqz2GWDB5xShQ==
+
+conventional-changelog-writer@^4.0.6:
+  version "4.0.7"
+  resolved "https://registry.npmjs.org/conventional-changelog-writer/-/conventional-changelog-writer-4.0.7.tgz#e4b7d9cbea902394ad671f67108a71fa90c7095f"
+  integrity sha512-p/wzs9eYaxhFbrmX/mCJNwJuvvHR+j4Fd0SQa2xyAhYed6KBiZ780LvoqUUvsayP4R1DtC27czalGUhKV2oabw==
+  dependencies:
+    compare-func "^1.3.1"
+    conventional-commits-filter "^2.0.2"
+    dateformat "^3.0.0"
+    handlebars "^4.1.2"
+    json-stringify-safe "^5.0.1"
+    lodash "^4.2.1"
+    meow "^4.0.0"
+    semver "^6.0.0"
+    split "^1.0.0"
+    through2 "^3.0.0"
+
+conventional-changelog@3.1.9:
+  version "3.1.9"
+  resolved "https://registry.npmjs.org/conventional-changelog/-/conventional-changelog-3.1.9.tgz#5a6a19dadc1e4080c2db8dcddd00a6c0077c55a4"
+  integrity sha512-JbNVm1iGZ3aXxcFZjqKNDNfdgchQjSltWc8rvSniMrkHLsub9Wn20/JLdJNTBM74dt1IA2M+v/mzServ6N37YA==
+  dependencies:
+    conventional-changelog-angular "^5.0.3"
+    conventional-changelog-atom "^2.0.1"
+    conventional-changelog-codemirror "^2.0.1"
+    conventional-changelog-conventionalcommits "^4.0.0"
+    conventional-changelog-core "^3.2.3"
+    conventional-changelog-ember "^2.0.2"
+    conventional-changelog-eslint "^3.0.2"
+    conventional-changelog-express "^2.0.1"
+    conventional-changelog-jquery "^3.0.4"
+    conventional-changelog-jshint "^2.0.1"
+    conventional-changelog-preset-loader "^2.1.1"
+
+conventional-commits-filter@^2.0.2:
+  version "2.0.2"
+  resolved "https://registry.npmjs.org/conventional-commits-filter/-/conventional-commits-filter-2.0.2.tgz#f122f89fbcd5bb81e2af2fcac0254d062d1039c1"
+  integrity sha512-WpGKsMeXfs21m1zIw4s9H5sys2+9JccTzpN6toXtxhpw2VNF2JUXwIakthKBy+LN4DvJm+TzWhxOMWOs1OFCFQ==
+  dependencies:
+    lodash.ismatch "^4.4.0"
+    modify-values "^1.0.0"
+
+conventional-commits-parser@^2.1.0:
+  version "2.1.7"
+  resolved "https://registry.yarnpkg.com/conventional-commits-parser/-/conventional-commits-parser-2.1.7.tgz#eca45ed6140d72ba9722ee4132674d639e644e8e"
+  integrity sha512-BoMaddIEJ6B4QVMSDu9IkVImlGOSGA1I2BQyOZHeLQ6qVOJLcLKn97+fL6dGbzWEiqDzfH4OkcveULmeq2MHFQ==
+  dependencies:
+    JSONStream "^1.0.4"
+    is-text-path "^1.0.0"
+    lodash "^4.2.1"
+    meow "^4.0.0"
+    split2 "^2.0.0"
+    through2 "^2.0.0"
+    trim-off-newlines "^1.0.0"
+
+conventional-commits-parser@^3.0.3:
+  version "3.0.3"
+  resolved "https://registry.npmjs.org/conventional-commits-parser/-/conventional-commits-parser-3.0.3.tgz#c3f972fd4e056aa8b9b4f5f3d0e540da18bf396d"
+  integrity sha512-KaA/2EeUkO4bKjinNfGUyqPTX/6w9JGshuQRik4r/wJz7rUw3+D3fDG6sZSEqJvKILzKXFQuFkpPLclcsAuZcg==
+  dependencies:
+    JSONStream "^1.0.4"
+    is-text-path "^2.0.0"
+    lodash "^4.2.1"
+    meow "^4.0.0"
+    split2 "^2.0.0"
+    through2 "^3.0.0"
+    trim-off-newlines "^1.0.0"
+
+conventional-recommended-bump@6.0.0:
+  version "6.0.0"
+  resolved "https://registry.npmjs.org/conventional-recommended-bump/-/conventional-recommended-bump-6.0.0.tgz#bdafad56bc32bc04d58dbbd8bd6b750375500edc"
+  integrity sha512-iIHkDOuWCC49J/E4WXvXBCCrO2NoGqwjfhm2iUOHPPEik8TVHxczt/hFaWY+4MXeZ/nC53BNfjmlr8+EXOrlvA==
+  dependencies:
+    concat-stream "^2.0.0"
+    conventional-changelog-preset-loader "^2.2.0"
+    conventional-commits-filter "^2.0.2"
+    conventional-commits-parser "^3.0.3"
+    git-raw-commits "2.0.0"
+    git-semver-tags "^3.0.0"
+    meow "^4.0.0"
+    q "^1.5.1"
+
+convert-source-map@^1.5.0, convert-source-map@^1.5.1:
+  version "1.6.0"
+  resolved "https://registry.yarnpkg.com/convert-source-map/-/convert-source-map-1.6.0.tgz#51b537a8c43e0f04dec1993bffcdd504e758ac20"
+  integrity sha512-eFu7XigvxdZ1ETfbgPBohgyQ/Z++C0eEhTor0qRwBw9unw+L0/6V8wkSuGgzdThkiS5lSpdptOQPD8Ak40a+7A==
+  dependencies:
+    safe-buffer "~5.1.1"
 
 cookie-signature@1.0.6:
   version "1.0.6"
   resolved "https://registry.yarnpkg.com/cookie-signature/-/cookie-signature-1.0.6.tgz#e303a882b342cc3ee8ca513a79999734dab3ae2c"
+  integrity sha1-4wOogrNCzD7oylE6eZmXNNqzriw=
 
 cookie@0.3.1:
   version "0.3.1"
   resolved "https://registry.yarnpkg.com/cookie/-/cookie-0.3.1.tgz#e7e0a1f9ef43b4c8ba925c5c5a96e806d16873bb"
+  integrity sha1-5+Ch+e9DtMi6klxcWpboBtFoc7s=
 
-copy-webpack-plugin@^4.1.1:
-  version "4.1.1"
-  resolved "https://registry.yarnpkg.com/copy-webpack-plugin/-/copy-webpack-plugin-4.1.1.tgz#53ae69e04955ebfa9fda411f54cbb968531d71fd"
+copy-concurrently@^1.0.0:
+  version "1.0.5"
+  resolved "https://registry.yarnpkg.com/copy-concurrently/-/copy-concurrently-1.0.5.tgz#92297398cae34937fcafd6ec8139c18051f0b5e0"
+  integrity sha512-f2domd9fsVDFtaFcbaRZuYXwtdmnzqbADSwhSWYxYB/Q8zsdUUFMXVRwXGDMWmbEzAn1kdRrtI1T/KTFOL4X2A==
   dependencies:
-    bluebird "^3.5.1"
-    fs-extra "^4.0.2"
-    glob "^7.1.2"
+    aproba "^1.1.1"
+    fs-write-stream-atomic "^1.0.8"
+    iferr "^0.1.5"
+    mkdirp "^0.5.1"
+    rimraf "^2.5.4"
+    run-queue "^1.0.0"
+
+copy-descriptor@^0.1.0:
+  version "0.1.1"
+  resolved "https://registry.yarnpkg.com/copy-descriptor/-/copy-descriptor-0.1.1.tgz#676f6eb3c39997c2ee1ac3a924fd6124748f578d"
+  integrity sha1-Z29us8OZl8LuGsOpJP1hJHSPV40=
+
+copy-props@^2.0.1:
+  version "2.0.4"
+  resolved "https://registry.yarnpkg.com/copy-props/-/copy-props-2.0.4.tgz#93bb1cadfafd31da5bb8a9d4b41f471ec3a72dfe"
+  integrity sha512-7cjuUME+p+S3HZlbllgsn2CDwS+5eCCX16qBgNC4jgSTf49qR1VKy/Zhl400m0IQXl/bPGEVqncgUUMjrr4s8A==
+  dependencies:
+    each-props "^1.3.0"
+    is-plain-object "^2.0.1"
+
+copy-webpack-plugin@^5.0.0:
+  version "5.0.0"
+  resolved "https://registry.yarnpkg.com/copy-webpack-plugin/-/copy-webpack-plugin-5.0.0.tgz#db3269ab83e8a2c3316c1bc9cba54019bbcf5c17"
+  integrity sha512-iiDj+8nnZeW/i8vYJ3+ABSZkOefJnDYIGLojiZKKFDvf1wcEInABXH1+hN7axQMn04qvJxKjgVOee0e14XPtCg==
+  dependencies:
+    cacache "^11.3.1"
+    find-cache-dir "^2.0.0"
+    globby "^7.1.1"
     is-glob "^4.0.0"
-    loader-utils "^0.2.15"
-    lodash "^4.3.0"
+    loader-utils "^1.1.0"
     minimatch "^3.0.4"
-    node-dir "^0.1.10"
+    normalize-path "^3.0.0"
+    p-limit "^2.1.0"
+    serialize-javascript "^1.4.0"
+    webpack-log "^2.0.0"
 
-core-js@^2.2.0, core-js@^2.4.0:
-  version "2.4.1"
-  resolved "https://registry.yarnpkg.com/core-js/-/core-js-2.4.1.tgz#4de911e667b0eae9124e34254b53aea6fc618d3e"
+core-js@^2.2.0, core-js@^2.4.0, core-js@^2.5.0:
+  version "2.6.2"
+  resolved "https://registry.yarnpkg.com/core-js/-/core-js-2.6.2.tgz#267988d7268323b349e20b4588211655f0e83944"
+  integrity sha512-NdBPF/RVwPW6jr0NCILuyN9RiqLo2b1mddWHkUL+VnvcB7dzlnBJ1bXYntjpTGOgkZiiLWj2JxmOr7eGE3qK6g==
 
-core-util-is@~1.0.0:
+core-util-is@1.0.2, core-util-is@~1.0.0:
   version "1.0.2"
-  resolved "http://registry.npm.taobao.org/core-util-is/download/core-util-is-1.0.2.tgz#b5fd54220aa2bc5ab57aab7140c940754503c1a7"
+  resolved "https://registry.yarnpkg.com/core-util-is/-/core-util-is-1.0.2.tgz#b5fd54220aa2bc5ab57aab7140c940754503c1a7"
+  integrity sha1-tf1UIgqivFq1eqtxQMlAdUUDwac=
 
-cosmiconfig@^2.1.0, cosmiconfig@^2.1.1:
-  version "2.1.2"
-  resolved "https://registry.yarnpkg.com/cosmiconfig/-/cosmiconfig-2.1.2.tgz#c43ae86d238f08f1728a345ed60ceb0aef63c060"
+cosmiconfig@^5.0.0:
+  version "5.1.0"
+  resolved "https://registry.yarnpkg.com/cosmiconfig/-/cosmiconfig-5.1.0.tgz#6c5c35e97f37f985061cdf653f114784231185cf"
+  integrity sha512-kCNPvthka8gvLtzAxQXvWo4FxqRB+ftRZyPZNuab5ngvM9Y7yw7hbEysglptLgpkGX9nAOKTBVkHUAe8xtYR6Q==
   dependencies:
+    import-fresh "^2.0.0"
     is-directory "^0.3.1"
-    js-yaml "^3.4.3"
-    json-parse-helpfulerror "^1.0.3"
-    minimist "^1.2.0"
-    object-assign "^4.1.0"
-    os-homedir "^1.0.1"
-    require-from-string "^1.1.0"
+    js-yaml "^3.9.0"
+    lodash.get "^4.4.2"
+    parse-json "^4.0.0"
 
-coveralls@^2.11.14:
-  version "2.11.15"
-  resolved "https://registry.yarnpkg.com/coveralls/-/coveralls-2.11.15.tgz#37d3474369d66c14f33fa73a9d25cee6e099fca0"
+cosmiconfig@^5.0.7, cosmiconfig@^5.2.0:
+  version "5.2.1"
+  resolved "https://registry.yarnpkg.com/cosmiconfig/-/cosmiconfig-5.2.1.tgz#040f726809c591e77a17c0a3626ca45b4f168b1a"
+  integrity sha512-H65gsXo1SKjf8zmrJ67eJk8aIRKV5ff2D4uKZIBZShbhGSpEmsQOPW/SKMKYhSTrqR7ufy6RP69rPogdaPh/kA==
   dependencies:
-    js-yaml "3.6.1"
-    lcov-parse "0.0.10"
-    log-driver "1.2.5"
-    minimist "1.2.0"
-    request "2.75.0"
+    import-fresh "^2.0.0"
+    is-directory "^0.3.1"
+    js-yaml "^3.13.1"
+    parse-json "^4.0.0"
+
+coveralls@^3.0.3:
+  version "3.0.3"
+  resolved "https://registry.npmjs.org/coveralls/-/coveralls-3.0.3.tgz#83b1c64aea1c6afa69beaf50b55ac1bc4d13e2b8"
+  integrity sha512-viNfeGlda2zJr8Gj1zqXpDMRjw9uM54p7wzZdvLRyOgnAfCe974Dq4veZkjJdxQXbmdppu6flEajFYseHYaUhg==
+  dependencies:
+    growl "~> 1.10.0"
+    js-yaml "^3.11.0"
+    lcov-parse "^0.0.10"
+    log-driver "^1.2.7"
+    minimist "^1.2.0"
+    request "^2.86.0"
 
 cp-cli@^1.0.2:
-  version "1.0.2"
-  resolved "https://registry.yarnpkg.com/cp-cli/-/cp-cli-1.0.2.tgz#36f202a7a10ab6d455b6b2ab8c9d690d84572a42"
+  version "1.1.2"
+  resolved "https://registry.yarnpkg.com/cp-cli/-/cp-cli-1.1.2.tgz#b24e1fdb8b07a27ce3879995c8c0c6d67caa8b86"
+  integrity sha1-sk4f24sHonzjh5mVyMDG1nyqi4Y=
   dependencies:
-    fs-extra "^0.30.0"
-    yargs "^4.6.0"
+    fs-extra "5.0.0"
+    yargs "11.0.0"
 
 create-ecdh@^4.0.0:
-  version "4.0.0"
-  resolved "https://registry.yarnpkg.com/create-ecdh/-/create-ecdh-4.0.0.tgz#888c723596cdf7612f6498233eebd7a35301737d"
+  version "4.0.3"
+  resolved "https://registry.yarnpkg.com/create-ecdh/-/create-ecdh-4.0.3.tgz#c9111b6f33045c4697f144787f9254cdc77c45ff"
+  integrity sha512-GbEHQPMOswGpKXM9kCWVrremUcBmjteUaQ01T9rkKCPDXfUHX0IoP9LpHYo2NPFampa4e+/pFDc3jQdxrxQLaw==
   dependencies:
     bn.js "^4.1.0"
     elliptic "^6.0.0"
 
+create-error-class@^3.0.0:
+  version "3.0.2"
+  resolved "https://registry.npm.taobao.org/create-error-class/download/create-error-class-3.0.2.tgz#06be7abef947a3f14a30fd610671d401bca8b7b6"
+  integrity sha1-Br56vvlHo/FKMP1hBnHUAbyot7Y=
+  dependencies:
+    capture-stack-trace "^1.0.0"
+
 create-hash@^1.1.0, create-hash@^1.1.2:
-  version "1.1.3"
-  resolved "https://registry.yarnpkg.com/create-hash/-/create-hash-1.1.3.tgz#606042ac8b9262750f483caddab0f5819172d8fd"
+  version "1.2.0"
+  resolved "https://registry.yarnpkg.com/create-hash/-/create-hash-1.2.0.tgz#889078af11a63756bcfb59bd221996be3a9ef196"
+  integrity sha512-z00bCGNHDG8mHAkP7CtT1qVu+bFQUPjYq/4Iv3C3kWjTFV10zIjfSoeqXo9Asws8gwSHDGj/hl2u4OGIjapeCg==
   dependencies:
     cipher-base "^1.0.1"
     inherits "^2.0.1"
-    ripemd160 "^2.0.0"
+    md5.js "^1.3.4"
+    ripemd160 "^2.0.1"
     sha.js "^2.4.0"
 
 create-hmac@^1.1.0, create-hmac@^1.1.2, create-hmac@^1.1.4:
-  version "1.1.6"
-  resolved "https://registry.yarnpkg.com/create-hmac/-/create-hmac-1.1.6.tgz#acb9e221a4e17bdb076e90657c42b93e3726cf06"
+  version "1.1.7"
+  resolved "https://registry.yarnpkg.com/create-hmac/-/create-hmac-1.1.7.tgz#69170c78b3ab957147b2b8b04572e47ead2243ff"
+  integrity sha512-MJG9liiZ+ogc4TzUwuvbER1JRdgvUFSB5+VR/g5h82fGaIRWMWddtKBHi7/sVhfjQZ6SehlyhvQYrcYkaUIpLg==
   dependencies:
     cipher-base "^1.0.3"
     create-hash "^1.1.0"
@@ -1625,14 +3150,17 @@ create-hmac@^1.1.0, create-hmac@^1.1.2, create-hmac@^1.1.4:
     sha.js "^2.4.8"
 
 cross-env@^3.1.3:
-  version "3.1.3"
-  resolved "https://registry.yarnpkg.com/cross-env/-/cross-env-3.1.3.tgz#58cd8231808f50089708b091f7dd37275a8e8154"
+  version "3.2.4"
+  resolved "https://registry.yarnpkg.com/cross-env/-/cross-env-3.2.4.tgz#9e0585f277864ed421ce756f81a980ff0d698aba"
+  integrity sha1-ngWF8neGTtQhznVvgamA/w1piro=
   dependencies:
-    cross-spawn "^3.0.1"
+    cross-spawn "^5.1.0"
+    is-windows "^1.0.0"
 
-cross-spawn@^3.0.0, cross-spawn@^3.0.1:
+cross-spawn@^3.0.0:
   version "3.0.1"
-  resolved "https://registry.yarnpkg.com/cross-spawn/-/cross-spawn-3.0.1.tgz#1256037ecb9f0c5f79e3d6ef135e30770184b982"
+  resolved "https://registry.npm.taobao.org/cross-spawn/download/cross-spawn-3.0.1.tgz#1256037ecb9f0c5f79e3d6ef135e30770184b982"
+  integrity sha1-ElYDfsufDF9549bvE14wdwGEuYI=
   dependencies:
     lru-cache "^4.0.1"
     which "^1.2.9"
@@ -1640,20 +3168,27 @@ cross-spawn@^3.0.0, cross-spawn@^3.0.1:
 cross-spawn@^5.0.1, cross-spawn@^5.1.0:
   version "5.1.0"
   resolved "https://registry.yarnpkg.com/cross-spawn/-/cross-spawn-5.1.0.tgz#e8bd0efee58fcff6f8f94510a0a554bbfa235449"
+  integrity sha1-6L0O/uWPz/b4+UUQoKVUu/ojVEk=
   dependencies:
     lru-cache "^4.0.1"
     shebang-command "^1.2.0"
     which "^1.2.9"
 
-cryptiles@2.x.x:
-  version "2.0.5"
-  resolved "https://registry.yarnpkg.com/cryptiles/-/cryptiles-2.0.5.tgz#3bdfecdc608147c1c67202fa291e7dca59eaa3b8"
+cross-spawn@^6.0.0, cross-spawn@^6.0.5:
+  version "6.0.5"
+  resolved "https://registry.yarnpkg.com/cross-spawn/-/cross-spawn-6.0.5.tgz#4a5ec7c64dfae22c3a14124dbacdee846d80cbc4"
+  integrity sha512-eTVLrBSt7fjbDygz805pMnstIs2VTBNkRm0qxZd+M7A5XDdxVRWO5MxGBXZhjY4cqLYLdtrGqRf8mBPmzwSpWQ==
   dependencies:
-    boom "2.x.x"
+    nice-try "^1.0.4"
+    path-key "^2.0.1"
+    semver "^5.5.0"
+    shebang-command "^1.2.0"
+    which "^1.2.9"
 
 crypto-browserify@^3.11.0:
-  version "3.11.1"
-  resolved "https://registry.yarnpkg.com/crypto-browserify/-/crypto-browserify-3.11.1.tgz#948945efc6757a400d6e5e5af47194d10064279f"
+  version "3.12.0"
+  resolved "https://registry.yarnpkg.com/crypto-browserify/-/crypto-browserify-3.12.0.tgz#396cf9f3137f03e4b8e532c58f698254e00f80ec"
+  integrity sha512-fz4spIh+znjO2VjL+IdhEpRJ3YN6sMzITSBijk6FK2UvTqruSQW+/cCZTSNsMiZNvUeq0CqurF+dAbyiGOY6Wg==
   dependencies:
     browserify-cipher "^1.0.0"
     browserify-sign "^4.0.0"
@@ -1665,253 +3200,408 @@ crypto-browserify@^3.11.0:
     pbkdf2 "^3.0.3"
     public-encrypt "^4.0.0"
     randombytes "^2.0.0"
+    randomfill "^1.0.3"
 
-css-color-function@^1.2.0:
-  version "1.3.0"
-  resolved "https://registry.yarnpkg.com/css-color-function/-/css-color-function-1.3.0.tgz#72c767baf978f01b8a8a94f42f17ba5d22a776fc"
-  dependencies:
-    balanced-match "0.1.0"
-    color "^0.11.0"
-    debug "~0.7.4"
-    rgb "~0.1.0"
+crypto-random-string@^1.0.0:
+  version "1.0.0"
+  resolved "https://registry.npm.taobao.org/crypto-random-string/download/crypto-random-string-1.0.0.tgz#a230f64f568310e1498009940790ec99545bca7e"
+  integrity sha1-ojD2T1aDEOFJgAmUB5DsmVRbyn4=
 
-css-color-names@0.0.4:
+css-color-names@0.0.4, css-color-names@^0.0.4:
   version "0.0.4"
   resolved "https://registry.yarnpkg.com/css-color-names/-/css-color-names-0.0.4.tgz#808adc2e79cf84738069b646cb20ec27beb629e0"
+  integrity sha1-gIrcLnnPhHOAabZGyyDsJ762KeA=
 
-css-font-weight-names@^0.2.1:
-  version "0.2.1"
-  resolved "https://registry.yarnpkg.com/css-font-weight-names/-/css-font-weight-names-0.2.1.tgz#5710d485ad295f6b3f1ceec41f882e324a46b516"
-
-css-loader@^0.28.7:
-  version "0.28.7"
-  resolved "https://registry.yarnpkg.com/css-loader/-/css-loader-0.28.7.tgz#5f2ee989dd32edd907717f953317656160999c1b"
+css-declaration-sorter@^4.0.1:
+  version "4.0.1"
+  resolved "https://registry.yarnpkg.com/css-declaration-sorter/-/css-declaration-sorter-4.0.1.tgz#c198940f63a76d7e36c1e71018b001721054cb22"
+  integrity sha512-BcxQSKTSEEQUftYpBVnsH4SF05NTuBokb19/sBt6asXGKZ/6VP7PLG1CBCkFDYOnhXhPh0jMhO6xZ71oYHXHBA==
   dependencies:
-    babel-code-frame "^6.11.0"
-    css-selector-tokenizer "^0.7.0"
-    cssnano ">=2.6.1 <4"
-    icss-utils "^2.1.0"
-    loader-utils "^1.0.2"
-    lodash.camelcase "^4.3.0"
-    object-assign "^4.0.1"
-    postcss "^5.0.6"
-    postcss-modules-extract-imports "^1.0.0"
-    postcss-modules-local-by-default "^1.0.1"
-    postcss-modules-scope "^1.0.0"
-    postcss-modules-values "^1.1.0"
+    postcss "^7.0.1"
+    timsort "^0.3.0"
+
+css-loader@^2.1.0:
+  version "2.1.0"
+  resolved "https://registry.yarnpkg.com/css-loader/-/css-loader-2.1.0.tgz#42952ac22bca5d076978638e9813abce49b8f0cc"
+  integrity sha512-MoOu+CStsGrSt5K2OeZ89q3Snf+IkxRfAIt9aAKg4piioTrhtP1iEFPu+OVn3Ohz24FO6L+rw9UJxBILiSBw5Q==
+  dependencies:
+    icss-utils "^4.0.0"
+    loader-utils "^1.2.1"
+    lodash "^4.17.11"
+    postcss "^7.0.6"
+    postcss-modules-extract-imports "^2.0.0"
+    postcss-modules-local-by-default "^2.0.3"
+    postcss-modules-scope "^2.0.0"
+    postcss-modules-values "^2.0.0"
     postcss-value-parser "^3.3.0"
-    source-list-map "^2.0.0"
+    schema-utils "^1.0.0"
+
+css-select-base-adapter@~0.1.0:
+  version "0.1.1"
+  resolved "https://registry.yarnpkg.com/css-select-base-adapter/-/css-select-base-adapter-0.1.1.tgz#3b2ff4972cc362ab88561507a95408a1432135d7"
+  integrity sha512-jQVeeRG70QI08vSTwf1jHxp74JoZsr2XSgETae8/xC8ovSnL2WF87GTLO86Sbwdt2lK4Umg4HnnwMO4YF3Ce7w==
 
-css-select@^1.1.0, css-select@^1.2.0, css-select@~1.2.0:
+css-select@^1.1.0:
   version "1.2.0"
   resolved "https://registry.yarnpkg.com/css-select/-/css-select-1.2.0.tgz#2b3a110539c5355f1cd8d314623e870b121ec858"
+  integrity sha1-KzoRBTnFNV8c2NMUYj6HCxIeyFg=
   dependencies:
     boolbase "~1.0.0"
     css-what "2.1"
     domutils "1.5.1"
     nth-check "~1.0.1"
 
-css-selector-tokenizer@^0.6.0:
-  version "0.6.0"
-  resolved "https://registry.yarnpkg.com/css-selector-tokenizer/-/css-selector-tokenizer-0.6.0.tgz#6445f582c7930d241dcc5007a43d6fcb8f073152"
+css-select@^2.0.0:
+  version "2.0.2"
+  resolved "https://registry.yarnpkg.com/css-select/-/css-select-2.0.2.tgz#ab4386cec9e1f668855564b17c3733b43b2a5ede"
+  integrity sha512-dSpYaDVoWaELjvZ3mS6IKZM/y2PMPa/XYoEfYNZePL4U/XgyxZNroHEHReDx/d+VgXh9VbCTtFqLkFbmeqeaRQ==
   dependencies:
-    cssesc "^0.1.0"
-    fastparse "^1.1.1"
-    regexpu-core "^1.0.0"
+    boolbase "^1.0.0"
+    css-what "^2.1.2"
+    domutils "^1.7.0"
+    nth-check "^1.0.2"
 
 css-selector-tokenizer@^0.7.0:
-  version "0.7.0"
-  resolved "https://registry.yarnpkg.com/css-selector-tokenizer/-/css-selector-tokenizer-0.7.0.tgz#e6988474ae8c953477bf5e7efecfceccd9cf4c86"
+  version "0.7.1"
+  resolved "https://registry.yarnpkg.com/css-selector-tokenizer/-/css-selector-tokenizer-0.7.1.tgz#a177271a8bca5019172f4f891fc6eed9cbf68d5d"
+  integrity sha512-xYL0AMZJ4gFzJQsHUKa5jiWWi2vH77WVNg7JYRyewwj6oPh4yb/y6Y9ZCw9dsj/9UauMhtuxR+ogQd//EdEVNA==
   dependencies:
     cssesc "^0.1.0"
     fastparse "^1.1.1"
     regexpu-core "^1.0.0"
 
+css-tree@1.0.0-alpha.28:
+  version "1.0.0-alpha.28"
+  resolved "https://registry.yarnpkg.com/css-tree/-/css-tree-1.0.0-alpha.28.tgz#8e8968190d886c9477bc8d61e96f61af3f7ffa7f"
+  integrity sha512-joNNW1gCp3qFFzj4St6zk+Wh/NBv0vM5YbEreZk0SD4S23S+1xBKb6cLDg2uj4P4k/GUMlIm6cKIDqIG+vdt0w==
+  dependencies:
+    mdn-data "~1.1.0"
+    source-map "^0.5.3"
+
+css-tree@1.0.0-alpha.29:
+  version "1.0.0-alpha.29"
+  resolved "https://registry.yarnpkg.com/css-tree/-/css-tree-1.0.0-alpha.29.tgz#3fa9d4ef3142cbd1c301e7664c1f352bd82f5a39"
+  integrity sha512-sRNb1XydwkW9IOci6iB2xmy8IGCj6r/fr+JWitvJ2JxQRPzN3T4AGGVWCMlVmVwM1gtgALJRmGIlWv5ppnGGkg==
+  dependencies:
+    mdn-data "~1.1.0"
+    source-map "^0.5.3"
+
+css-unit-converter@^1.1.1:
+  version "1.1.1"
+  resolved "https://registry.yarnpkg.com/css-unit-converter/-/css-unit-converter-1.1.1.tgz#d9b9281adcfd8ced935bdbaba83786897f64e996"
+  integrity sha1-2bkoGtz9jO2TW9urqDeGiX9k6ZY=
+
+css-url-regex@^1.1.0:
+  version "1.1.0"
+  resolved "https://registry.yarnpkg.com/css-url-regex/-/css-url-regex-1.1.0.tgz#83834230cc9f74c457de59eebd1543feeb83b7ec"
+  integrity sha1-g4NCMMyfdMRX3lnuvRVD/uuDt+w=
+
 css-what@2.1:
-  version "2.1.0"
-  resolved "https://registry.yarnpkg.com/css-what/-/css-what-2.1.0.tgz#9467d032c38cfaefb9f2d79501253062f87fa1bd"
+  version "2.1.2"
+  resolved "https://registry.yarnpkg.com/css-what/-/css-what-2.1.2.tgz#c0876d9d0480927d7d4920dcd72af3595649554d"
+  integrity sha512-wan8dMWQ0GUeF7DGEPVjhHemVW/vy6xUYmFzRY8RYqgA0JtXC9rJmbScBjqSu6dg9q0lwPQy6ZAmJVr3PPTvqQ==
+
+css-what@^2.1.2:
+  version "2.1.3"
+  resolved "https://registry.yarnpkg.com/css-what/-/css-what-2.1.3.tgz#a6d7604573365fe74686c3f311c56513d88285f2"
+  integrity sha512-a+EPoD+uZiNfh+5fxw2nO9QwFa6nJe2Or35fGY6Ipw1R3R4AGz1d1TEZrCegvw2YTmZ0jXirGYlzxxpYSHwpEg==
 
 cssesc@^0.1.0:
   version "0.1.0"
   resolved "https://registry.yarnpkg.com/cssesc/-/cssesc-0.1.0.tgz#c814903e45623371a0477b40109aaafbeeaddbb4"
+  integrity sha1-yBSQPkViM3GgR3tAEJqq++6t27Q=
 
-"cssnano@>=2.6.1 <4":
-  version "3.9.1"
-  resolved "https://registry.yarnpkg.com/cssnano/-/cssnano-3.9.1.tgz#41422bb5390d85a94ad4db03cc1a188bf68744fe"
-  dependencies:
-    autoprefixer "^6.3.1"
-    decamelize "^1.1.2"
-    defined "^1.0.0"
-    has "^1.0.1"
-    object-assign "^4.0.1"
-    postcss "^5.0.14"
-    postcss-calc "^5.2.0"
-    postcss-colormin "^2.1.8"
-    postcss-convert-values "^2.3.4"
-    postcss-discard-comments "^2.0.4"
-    postcss-discard-duplicates "^2.0.1"
-    postcss-discard-empty "^2.0.1"
-    postcss-discard-overridden "^0.1.1"
-    postcss-discard-unused "^2.2.1"
-    postcss-filter-plugins "^2.0.0"
-    postcss-merge-idents "^2.1.5"
-    postcss-merge-longhand "^2.0.1"
-    postcss-merge-rules "^2.0.3"
-    postcss-minify-font-values "^1.0.2"
-    postcss-minify-gradients "^1.0.1"
-    postcss-minify-params "^1.0.4"
-    postcss-minify-selectors "^2.0.4"
-    postcss-normalize-charset "^1.1.0"
-    postcss-normalize-url "^3.0.7"
-    postcss-ordered-values "^2.1.0"
-    postcss-reduce-idents "^2.2.2"
-    postcss-reduce-initial "^1.0.0"
-    postcss-reduce-transforms "^1.0.3"
-    postcss-svgo "^2.1.1"
-    postcss-unique-selectors "^2.0.2"
-    postcss-value-parser "^3.2.3"
-    postcss-zindex "^2.0.1"
-
-csso@~2.2.1:
-  version "2.2.1"
-  resolved "https://registry.yarnpkg.com/csso/-/csso-2.2.1.tgz#51fbb5347e50e81e6ed51668a48490ae6fe2afe2"
+cssesc@^2.0.0:
+  version "2.0.0"
+  resolved "https://registry.yarnpkg.com/cssesc/-/cssesc-2.0.0.tgz#3b13bd1bb1cb36e1bcb5a4dcd27f54c5dcb35703"
+  integrity sha512-MsCAG1z9lPdoO/IUMLSBWBSVxVtJ1395VGIQ+Fc2gNdkQ1hNDnQdw3YhA71WJCBW1vdwA0cAnk/DnW6bqoEUYg==
+
+cssnano-preset-default@^4.0.7:
+  version "4.0.7"
+  resolved "https://registry.yarnpkg.com/cssnano-preset-default/-/cssnano-preset-default-4.0.7.tgz#51ec662ccfca0f88b396dcd9679cdb931be17f76"
+  integrity sha512-x0YHHx2h6p0fCl1zY9L9roD7rnlltugGu7zXSKQx6k2rYw0Hi3IqxcoAGF7u9Q5w1nt7vK0ulxV8Lo+EvllGsA==
+  dependencies:
+    css-declaration-sorter "^4.0.1"
+    cssnano-util-raw-cache "^4.0.1"
+    postcss "^7.0.0"
+    postcss-calc "^7.0.1"
+    postcss-colormin "^4.0.3"
+    postcss-convert-values "^4.0.1"
+    postcss-discard-comments "^4.0.2"
+    postcss-discard-duplicates "^4.0.2"
+    postcss-discard-empty "^4.0.1"
+    postcss-discard-overridden "^4.0.1"
+    postcss-merge-longhand "^4.0.11"
+    postcss-merge-rules "^4.0.3"
+    postcss-minify-font-values "^4.0.2"
+    postcss-minify-gradients "^4.0.2"
+    postcss-minify-params "^4.0.2"
+    postcss-minify-selectors "^4.0.2"
+    postcss-normalize-charset "^4.0.1"
+    postcss-normalize-display-values "^4.0.2"
+    postcss-normalize-positions "^4.0.2"
+    postcss-normalize-repeat-style "^4.0.2"
+    postcss-normalize-string "^4.0.2"
+    postcss-normalize-timing-functions "^4.0.2"
+    postcss-normalize-unicode "^4.0.1"
+    postcss-normalize-url "^4.0.1"
+    postcss-normalize-whitespace "^4.0.2"
+    postcss-ordered-values "^4.1.2"
+    postcss-reduce-initial "^4.0.3"
+    postcss-reduce-transforms "^4.0.2"
+    postcss-svgo "^4.0.2"
+    postcss-unique-selectors "^4.0.1"
+
+cssnano-util-get-arguments@^4.0.0:
+  version "4.0.0"
+  resolved "https://registry.yarnpkg.com/cssnano-util-get-arguments/-/cssnano-util-get-arguments-4.0.0.tgz#ed3a08299f21d75741b20f3b81f194ed49cc150f"
+  integrity sha1-7ToIKZ8h11dBsg87gfGU7UnMFQ8=
+
+cssnano-util-get-match@^4.0.0:
+  version "4.0.0"
+  resolved "https://registry.yarnpkg.com/cssnano-util-get-match/-/cssnano-util-get-match-4.0.0.tgz#c0e4ca07f5386bb17ec5e52250b4f5961365156d"
+  integrity sha1-wOTKB/U4a7F+xeUiULT1lhNlFW0=
+
+cssnano-util-raw-cache@^4.0.1:
+  version "4.0.1"
+  resolved "https://registry.yarnpkg.com/cssnano-util-raw-cache/-/cssnano-util-raw-cache-4.0.1.tgz#b26d5fd5f72a11dfe7a7846fb4c67260f96bf282"
+  integrity sha512-qLuYtWK2b2Dy55I8ZX3ky1Z16WYsx544Q0UWViebptpwn/xDBmog2TLg4f+DBMg1rJ6JDWtn96WHbOKDWt1WQA==
   dependencies:
-    clap "^1.0.9"
-    source-map "^0.5.3"
+    postcss "^7.0.0"
 
-cssom@0.3.x, "cssom@>= 0.3.0 < 0.4.0":
-  version "0.3.1"
-  resolved "https://registry.yarnpkg.com/cssom/-/cssom-0.3.1.tgz#c9e37ef2490e64f6d1baa10fda852257082c25d3"
+cssnano-util-same-parent@^4.0.0:
+  version "4.0.1"
+  resolved "https://registry.yarnpkg.com/cssnano-util-same-parent/-/cssnano-util-same-parent-4.0.1.tgz#574082fb2859d2db433855835d9a8456ea18bbf3"
+  integrity sha512-WcKx5OY+KoSIAxBW6UBBRay1U6vkYheCdjyVNDm85zt5K9mHoGOfsOsqIszfAqrQQFIIKgjh2+FDgIj/zsl21Q==
 
-"cssstyle@>= 0.2.29 < 0.3.0":
-  version "0.2.37"
-  resolved "https://registry.yarnpkg.com/cssstyle/-/cssstyle-0.2.37.tgz#541097234cb2513c83ceed3acddc27ff27987d54"
+cssnano@^4.1.0:
+  version "4.1.10"
+  resolved "https://registry.yarnpkg.com/cssnano/-/cssnano-4.1.10.tgz#0ac41f0b13d13d465487e111b778d42da631b8b2"
+  integrity sha512-5wny+F6H4/8RgNlaqab4ktc3e0/blKutmq8yNlBFXA//nSFFAqAngjNVRzUvCgYROULmZZUoosL/KSoZo5aUaQ==
   dependencies:
-    cssom "0.3.x"
+    cosmiconfig "^5.0.0"
+    cssnano-preset-default "^4.0.7"
+    is-resolvable "^1.0.0"
+    postcss "^7.0.0"
+
+csso@^3.5.0:
+  version "3.5.1"
+  resolved "https://registry.yarnpkg.com/csso/-/csso-3.5.1.tgz#7b9eb8be61628973c1b261e169d2f024008e758b"
+  integrity sha512-vrqULLffYU1Q2tLdJvaCYbONStnfkfimRxXNaGjxMldI0C7JPBC4rB1RyjhfdZ4m1frm8pM9uRPKH3d2knZ8gg==
+  dependencies:
+    css-tree "1.0.0-alpha.29"
 
 currently-unhandled@^0.4.1:
   version "0.4.1"
   resolved "https://registry.yarnpkg.com/currently-unhandled/-/currently-unhandled-0.4.1.tgz#988df33feab191ef799a61369dd76c17adf957ea"
+  integrity sha1-mI3zP+qxke95mmE2nddsF635V+o=
   dependencies:
     array-find-index "^1.0.1"
 
 custom-event@~1.0.0:
   version "1.0.1"
   resolved "https://registry.yarnpkg.com/custom-event/-/custom-event-1.0.1.tgz#5d02a46850adf1b4a317946a3928fccb5bfd0425"
+  integrity sha1-XQKkaFCt8bSjF5RqOSj8y1v9BCU=
+
+cyclist@~0.2.2:
+  version "0.2.2"
+  resolved "https://registry.yarnpkg.com/cyclist/-/cyclist-0.2.2.tgz#1b33792e11e914a2fd6d6ed6447464444e5fa640"
+  integrity sha1-GzN5LhHpFKL9bW7WRHRkRE5fpkA=
 
 d@1:
   version "1.0.0"
-  resolved "http://registry.npm.taobao.org/d/download/d-1.0.0.tgz#754bb5bfe55451da69a58b94d45f4c5b0462d58f"
+  resolved "https://registry.yarnpkg.com/d/-/d-1.0.0.tgz#754bb5bfe55451da69a58b94d45f4c5b0462d58f"
+  integrity sha1-dUu1v+VUUdpppYuU1F9MWwRi1Y8=
   dependencies:
     es5-ext "^0.10.9"
 
-d@^0.1.1, d@~0.1.1:
-  version "0.1.1"
-  resolved "https://registry.yarnpkg.com/d/-/d-0.1.1.tgz#da184c535d18d8ee7ba2aa229b914009fae11309"
+dargs@^4.0.1:
+  version "4.1.0"
+  resolved "https://registry.npmjs.org/dargs/-/dargs-4.1.0.tgz#03a9dbb4b5c2f139bf14ae53f0b8a2a6a86f4e17"
+  integrity sha1-A6nbtLXC8Tm/FK5T8LiipqhvThc=
   dependencies:
-    es5-ext "~0.10.2"
+    number-is-nan "^1.0.0"
 
 dashdash@^1.12.0:
   version "1.14.1"
   resolved "https://registry.yarnpkg.com/dashdash/-/dashdash-1.14.1.tgz#853cfa0f7cbe2fed5de20326b8dd581035f6e2f0"
+  integrity sha1-hTz6D3y+L+1d4gMmuN1YEDX24vA=
   dependencies:
     assert-plus "^1.0.0"
 
+date-format@^2.0.0:
+  version "2.0.0"
+  resolved "https://registry.npmjs.org/date-format/-/date-format-2.0.0.tgz#7cf7b172f1ec564f0003b39ea302c5498fb98c8f"
+  integrity sha512-M6UqVvZVgFYqZL1SfHsRGIQSz3ZL+qgbsV5Lp1Vj61LZVYuEwcMXYay7DRDtYs2HQQBK5hQtQ0fD9aEJ89V0LA==
+
 date-now@^0.1.4:
   version "0.1.4"
   resolved "https://registry.yarnpkg.com/date-now/-/date-now-0.1.4.tgz#eaf439fd4d4848ad74e5cc7dbef200672b9e345b"
+  integrity sha1-6vQ5/U1ISK105cx9vvIAZyueNFs=
 
-dateformat@^1.0.11, dateformat@^1.0.6, dateformat@^1.0.7-1.2.3:
+dateformat@^1.0.6, dateformat@^1.0.7-1.2.3:
   version "1.0.12"
   resolved "https://registry.yarnpkg.com/dateformat/-/dateformat-1.0.12.tgz#9f124b67594c937ff706932e4a642cca8dbbfee9"
+  integrity sha1-nxJLZ1lMk3/3BpMuSmQsyo27/uk=
   dependencies:
     get-stdin "^4.0.1"
     meow "^3.3.0"
 
+dateformat@^3.0.0:
+  version "3.0.3"
+  resolved "https://registry.npmjs.org/dateformat/-/dateformat-3.0.3.tgz#a6e37499a4d9a9cf85ef5872044d62901c9889ae"
+  integrity sha512-jyCETtSl3VMZMWeRo7iY1FL19ges1t55hMo5yaam4Jrsm5EPL89UQkoQRyiI+Yf4k8r2ZpdngkV8hr1lIdjb3Q==
+
 de-indent@^1.0.2:
   version "1.0.2"
   resolved "https://registry.yarnpkg.com/de-indent/-/de-indent-1.0.2.tgz#b2038e846dc33baa5796128d0804b455b8c1e21d"
+  integrity sha1-sgOOhG3DO6pXlhKNCAS0VbjB4h0=
 
-debug@0.7.4, debug@~0.7.4:
-  version "0.7.4"
-  resolved "https://registry.yarnpkg.com/debug/-/debug-0.7.4.tgz#06e1ea8082c2cb14e39806e22e2f6f757f92af39"
-
-debug@2.2.0, debug@~2.2.0:
-  version "2.2.0"
-  resolved "https://registry.yarnpkg.com/debug/-/debug-2.2.0.tgz#f87057e995b1a1f6ae6a4960664137bc56f039da"
-  dependencies:
-    ms "0.7.1"
-
-debug@^2.1.1, debug@^2.2.0, debug@^2.6.6, debug@^2.6.8:
+debug@2.6.9, debug@^2.1.2, debug@^2.2.0, debug@^2.3.3, debug@^2.6.8, debug@^2.6.9:
   version "2.6.9"
   resolved "https://registry.yarnpkg.com/debug/-/debug-2.6.9.tgz#5d128515df134ff327e90a4c93f4e077a536341f"
+  integrity sha512-bC7ElrdJaJnPbAP+1EotYvqZsb3ecl5wi6Bfi6BJTUcNowp6cvspg0jXznRTKDjm/E7AdgFBVeAPVMNcKGsHMA==
   dependencies:
     ms "2.0.0"
 
-debug@^3.1.0:
+debug@3.1.0, debug@=3.1.0, debug@~3.1.0:
   version "3.1.0"
-  resolved "http://registry.npm.taobao.org/debug/download/debug-3.1.0.tgz#5bb5a0672628b64149566ba16819e61518c67261"
+  resolved "https://registry.yarnpkg.com/debug/-/debug-3.1.0.tgz#5bb5a0672628b64149566ba16819e61518c67261"
+  integrity sha512-OX8XqP7/1a9cqkxYw2yXss15f26NKWBpDXQd0/uK/KPqdQhxbPa994hnzjcE2VqQpDslf55723cKPUOGSmMY3g==
   dependencies:
     ms "2.0.0"
 
-decamelize@^1.0.0, decamelize@^1.1.1, decamelize@^1.1.2:
+debug@3.2.6, debug@^3.1.0, debug@^3.2.5:
+  version "3.2.6"
+  resolved "https://registry.yarnpkg.com/debug/-/debug-3.2.6.tgz#e83d17de16d8a7efb7717edbe5fb10135eee629b"
+  integrity sha512-mel+jf7nrtEl5Pn1Qx46zARXKDpBbvzezse7p7LqINmdoIk8PYP5SySaxEmYv6TZ0JyEKA1hsCId6DIhgITtWQ==
+  dependencies:
+    ms "^2.1.1"
+
+debug@^4.1.0:
+  version "4.1.1"
+  resolved "https://registry.yarnpkg.com/debug/-/debug-4.1.1.tgz#3b72260255109c6b589cee050f1d516139664791"
+  integrity sha512-pYAIzeRo8J6KPEaJ0VWOh5Pzkbw/RetuzehGM7QRRX5he4fPHx2rdKMB256ehJCkX+XRQm16eZLqLNS8RSZXZw==
+  dependencies:
+    ms "^2.1.1"
+
+debuglog@^1.0.1:
+  version "1.0.1"
+  resolved "https://registry.npm.taobao.org/debuglog/download/debuglog-1.0.1.tgz#aa24ffb9ac3df9a2351837cfb2d279360cd78492"
+  integrity sha1-qiT/uaw9+aI1GDfPstJ5NgzXhJI=
+
+decamelize-keys@^1.0.0:
+  version "1.1.0"
+  resolved "https://registry.npmjs.org/decamelize-keys/-/decamelize-keys-1.1.0.tgz#d171a87933252807eb3cb61dc1c1445d078df2d9"
+  integrity sha1-0XGoeTMlKAfrPLYdwcFEXQeN8tk=
+  dependencies:
+    decamelize "^1.1.0"
+    map-obj "^1.0.0"
+
+decamelize@^1.1.0, decamelize@^1.1.1, decamelize@^1.1.2, decamelize@^1.2.0:
   version "1.2.0"
   resolved "https://registry.yarnpkg.com/decamelize/-/decamelize-1.2.0.tgz#f6534d15148269b20352e7bee26f501f9a191290"
+  integrity sha1-9lNNFRSCabIDUue+4m9QH5oZEpA=
 
-deep-eql@^0.1.3:
-  version "0.1.3"
-  resolved "https://registry.yarnpkg.com/deep-eql/-/deep-eql-0.1.3.tgz#ef558acab8de25206cd713906d74e56930eb69f2"
+decamelize@^2.0.0:
+  version "2.0.0"
+  resolved "https://registry.yarnpkg.com/decamelize/-/decamelize-2.0.0.tgz#656d7bbc8094c4c788ea53c5840908c9c7d063c7"
+  integrity sha512-Ikpp5scV3MSYxY39ymh45ZLEecsTdv/Xj2CaQfI8RLMuwi7XvjX9H/fhraiSuU+C5w5NTDu4ZU72xNiZnurBPg==
   dependencies:
-    type-detect "0.1.1"
+    xregexp "4.0.0"
+
+decode-uri-component@^0.2.0:
+  version "0.2.0"
+  resolved "https://registry.yarnpkg.com/decode-uri-component/-/decode-uri-component-0.2.0.tgz#eb3913333458775cb84cd1a1fae062106bb87545"
+  integrity sha1-6zkTMzRYd1y4TNGh+uBiEGu4dUU=
+
+deep-eql@^3.0.1:
+  version "3.0.1"
+  resolved "https://registry.npmjs.org/deep-eql/-/deep-eql-3.0.1.tgz#dfc9404400ad1c8fe023e7da1df1c147c4b444df"
+  integrity sha512-+QeIQyN5ZuO+3Uk5DYh6/1eKO0m0YmJFGNmFHGACpf1ClL1nmlV/p4gNgbl2pJGxgXb4faqo6UE+M5ACEMyVcw==
+  dependencies:
+    type-detect "^4.0.0"
 
 deep-equal@^1.0.1:
   version "1.0.1"
   resolved "https://registry.yarnpkg.com/deep-equal/-/deep-equal-1.0.1.tgz#f5d260292b660e084eff4cdbc9f08ad3247448b5"
+  integrity sha1-9dJgKStmDghO/0zbyfCK0yR0SLU=
 
-deep-extend@~0.4.0:
-  version "0.4.1"
-  resolved "https://registry.yarnpkg.com/deep-extend/-/deep-extend-0.4.1.tgz#efe4113d08085f4e6f9687759810f807469e2253"
+deep-extend@^0.6.0:
+  version "0.6.0"
+  resolved "https://registry.yarnpkg.com/deep-extend/-/deep-extend-0.6.0.tgz#c4fa7c95404a17a9c3e8ca7e1537312b736330ac"
+  integrity sha512-LOHxIOaPYdHlJRtCQfDIVZtfw/ufM8+rVj649RIHzcm/vGwQRXFt6OPqIFWsm2XEMrNIEtWR64sY1LEKD2vAOA==
 
 deep-is@~0.1.3:
   version "0.1.3"
-  resolved "http://registry.npm.taobao.org/deep-is/download/deep-is-0.1.3.tgz#b369d6fb5dbc13eecf524f91b070feedc357cf34"
+  resolved "https://registry.yarnpkg.com/deep-is/-/deep-is-0.1.3.tgz#b369d6fb5dbc13eecf524f91b070feedc357cf34"
+  integrity sha1-s2nW+128E+7PUk+RsHD+7cNXzzQ=
 
-deepmerge@^1.2.0:
-  version "1.3.1"
-  resolved "https://registry.yarnpkg.com/deepmerge/-/deepmerge-1.3.1.tgz#682ba92402574115b865edce525665814296a39b"
+deepmerge@^1.2.0, deepmerge@^1.5.2:
+  version "1.5.2"
+  resolved "https://registry.yarnpkg.com/deepmerge/-/deepmerge-1.5.2.tgz#10499d868844cdad4fee0842df8c7f6f0c95a753"
+  integrity sha512-95k0GDqvBjZavkuvzx/YqVLv/6YYa17fz6ILMSf7neqQITCPbnfEnQvEgMPNjH4kgobe7+WIL0yJEHku+H3qtQ==
+
+default-compare@^1.0.0:
+  version "1.0.0"
+  resolved "https://registry.yarnpkg.com/default-compare/-/default-compare-1.0.0.tgz#cb61131844ad84d84788fb68fd01681ca7781a2f"
+  integrity sha512-QWfXlM0EkAbqOCbD/6HjdwT19j7WCkMyiRhWilc4H9/5h/RzTF9gv5LYh1+CmDV5d1rki6KAWLtQale0xt20eQ==
+  dependencies:
+    kind-of "^5.0.2"
 
-defaults@^1.0.0:
+default-gateway@^2.6.0:
+  version "2.7.2"
+  resolved "https://registry.yarnpkg.com/default-gateway/-/default-gateway-2.7.2.tgz#b7ef339e5e024b045467af403d50348db4642d0f"
+  integrity sha512-lAc4i9QJR0YHSDFdzeBQKfZ1SRDG3hsJNEkrpcZa8QhBfidLAilT60BDEIVUUGqosFp425KOgB3uYqcnQrWafQ==
+  dependencies:
+    execa "^0.10.0"
+    ip-regex "^2.1.0"
+
+default-resolution@^2.0.0:
+  version "2.0.0"
+  resolved "https://registry.yarnpkg.com/default-resolution/-/default-resolution-2.0.0.tgz#bcb82baa72ad79b426a76732f1a81ad6df26d684"
+  integrity sha1-vLgrqnKtebQmp2cy8aga1t8m1oQ=
+
+defaults@^1.0.3:
   version "1.0.3"
-  resolved "https://registry.yarnpkg.com/defaults/-/defaults-1.0.3.tgz#c656051e9817d9ff08ed881477f3fe4019f3ef7d"
+  resolved "https://registry.npm.taobao.org/defaults/download/defaults-1.0.3.tgz#c656051e9817d9ff08ed881477f3fe4019f3ef7d"
+  integrity sha1-xlYFHpgX2f8I7YgUd/P+QBnz730=
   dependencies:
     clone "^1.0.2"
 
-define-properties@^1.1.2:
-  version "1.1.2"
-  resolved "https://registry.yarnpkg.com/define-properties/-/define-properties-1.1.2.tgz#83a73f2fea569898fb737193c8f873caf6d45c94"
+define-properties@^1.1.2, define-properties@^1.1.3:
+  version "1.1.3"
+  resolved "https://registry.yarnpkg.com/define-properties/-/define-properties-1.1.3.tgz#cf88da6cbee26fe6db7094f61d870cbd84cee9f1"
+  integrity sha512-3MqfYKj2lLzdMSf8ZIZE/V+Zuy+BgD6f164e8K2w7dgnpKArBDerGYpM46IYYcjnkdPNMjPk9A6VFB8+3SKlXQ==
   dependencies:
-    foreach "^2.0.5"
-    object-keys "^1.0.8"
+    object-keys "^1.0.12"
 
-defined@^1.0.0:
+define-property@^0.2.5:
+  version "0.2.5"
+  resolved "https://registry.yarnpkg.com/define-property/-/define-property-0.2.5.tgz#c35b1ef918ec3c990f9a5bc57be04aacec5c8116"
+  integrity sha1-w1se+RjsPJkPmlvFe+BKrOxcgRY=
+  dependencies:
+    is-descriptor "^0.1.0"
+
+define-property@^1.0.0:
   version "1.0.0"
-  resolved "https://registry.yarnpkg.com/defined/-/defined-1.0.0.tgz#c98d9bcef75674188e110969151199e39b1fa693"
+  resolved "https://registry.yarnpkg.com/define-property/-/define-property-1.0.0.tgz#769ebaaf3f4a63aad3af9e8d304c9bbe79bfb0e6"
+  integrity sha1-dp66rz9KY6rTr56NMEybvnm/sOY=
+  dependencies:
+    is-descriptor "^1.0.0"
 
-del@^2.0.2:
-  version "2.2.2"
-  resolved "http://registry.npm.taobao.org/del/download/del-2.2.2.tgz#c12c981d067846c84bcaf862cff930d907ffd1a8"
+define-property@^2.0.2:
+  version "2.0.2"
+  resolved "https://registry.yarnpkg.com/define-property/-/define-property-2.0.2.tgz#d459689e8d654ba77e02a817f8710d702cb16e9d"
+  integrity sha512-jwK2UV4cnPpbcG7+VRARKTZPUWowwXA8bzH5NP6ud0oeAxyYPuGZUAC7hMugpCdz4BeSZl2Dl9k66CHJ/46ZYQ==
   dependencies:
-    globby "^5.0.0"
-    is-path-cwd "^1.0.0"
-    is-path-in-cwd "^1.0.0"
-    object-assign "^4.0.1"
-    pify "^2.0.0"
-    pinkie-promise "^2.0.0"
-    rimraf "^2.2.8"
+    is-descriptor "^1.0.2"
+    isobject "^3.0.1"
 
 del@^3.0.0:
   version "3.0.0"
   resolved "https://registry.yarnpkg.com/del/-/del-3.0.0.tgz#53ecf699ffcbcb39637691ab13baf160819766e5"
+  integrity sha1-U+z2mf/LyzljdpGrE7rxYIGXZuU=
   dependencies:
     globby "^6.1.0"
     is-path-cwd "^1.0.0"
@@ -1923,22 +3613,22 @@ del@^3.0.0:
 delayed-stream@~1.0.0:
   version "1.0.0"
   resolved "https://registry.yarnpkg.com/delayed-stream/-/delayed-stream-1.0.0.tgz#df3ae199acadfb7d440aaae0b29e2272b24ec619"
+  integrity sha1-3zrhmayt+31ECqrgsp4icrJOxhk=
 
 delegates@^1.0.0:
   version "1.0.0"
   resolved "https://registry.yarnpkg.com/delegates/-/delegates-1.0.0.tgz#84c6e159b81904fdca59a0ef44cd870d31250f9a"
+  integrity sha1-hMbhWbgZBP3KWaDvRM2HDTElD5o=
 
-depd@~1.1.0:
-  version "1.1.0"
-  resolved "https://registry.yarnpkg.com/depd/-/depd-1.1.0.tgz#e1bd82c6aab6ced965b97b88b17ed3e528ca18c3"
-
-deprecated@^0.0.1:
-  version "0.0.1"
-  resolved "http://registry.npmjs.org/deprecated/-/deprecated-0.0.1.tgz#f9c9af5464afa1e7a971458a8bdef2aa94d5bb19"
+depd@~1.1.2:
+  version "1.1.2"
+  resolved "https://registry.yarnpkg.com/depd/-/depd-1.1.2.tgz#9bcd52e14c097763e749b274c4346ed2e560b5a9"
+  integrity sha1-m81S4UwJd2PnSbJ0xDRu0uVgtak=
 
 des.js@^1.0.0:
   version "1.0.0"
   resolved "https://registry.yarnpkg.com/des.js/-/des.js-1.0.0.tgz#c074d2e2aa6a8a9a07dbd61f9a15c2cd83ec8ecc"
+  integrity sha1-wHTS4qpqipoH29YfmhXCzYPsjsw=
   dependencies:
     inherits "^2.0.1"
     minimalistic-assert "^1.0.0"
@@ -1946,54 +3636,93 @@ des.js@^1.0.0:
 destroy@~1.0.4:
   version "1.0.4"
   resolved "https://registry.yarnpkg.com/destroy/-/destroy-1.0.4.tgz#978857442c44749e4206613e37946205826abd80"
+  integrity sha1-l4hXRCxEdJ5CBmE+N5RiBYJqvYA=
 
-detect-file@^0.1.0:
-  version "0.1.0"
-  resolved "https://registry.yarnpkg.com/detect-file/-/detect-file-0.1.0.tgz#4935dedfd9488648e006b0129566e9386711ea63"
-  dependencies:
-    fs-exists-sync "^0.1.0"
+detect-file@^1.0.0:
+  version "1.0.0"
+  resolved "https://registry.yarnpkg.com/detect-file/-/detect-file-1.0.0.tgz#f0d66d03672a825cb1b73bdb3fe62310c8e552b7"
+  integrity sha1-8NZtA2cqglyxtzvbP+YjEMjlUrc=
+
+detect-indent@6.0.0:
+  version "6.0.0"
+  resolved "https://registry.npmjs.org/detect-indent/-/detect-indent-6.0.0.tgz#0abd0f549f69fc6659a254fe96786186b6f528fd"
+  integrity sha512-oSyFlqaTHCItVRGK5RmrmjB+CmaMOW7IaNA/kdxqhoa6d17j/5ce9O9eWXmV/KEdRwqpQA+Vqe8a8Bsybu4YnA==
 
 detect-indent@^4.0.0:
   version "4.0.0"
   resolved "https://registry.yarnpkg.com/detect-indent/-/detect-indent-4.0.0.tgz#f76d064352cdf43a1cb6ce619c4ee3a9475de208"
+  integrity sha1-920GQ1LN9Docts5hnE7jqUdd4gg=
   dependencies:
     repeating "^2.0.0"
 
-detect-node@^2.0.3:
-  version "2.0.3"
-  resolved "https://registry.yarnpkg.com/detect-node/-/detect-node-2.0.3.tgz#a2033c09cc8e158d37748fbde7507832bd6ce127"
+detect-indent@~5.0.0:
+  version "5.0.0"
+  resolved "https://registry.npm.taobao.org/detect-indent/download/detect-indent-5.0.0.tgz#3871cc0a6a002e8c3e5b3cf7f336264675f06b9d"
+  integrity sha1-OHHMCmoALow+Wzz38zYmRnXwa50=
+
+detect-libc@^1.0.2:
+  version "1.0.3"
+  resolved "https://registry.yarnpkg.com/detect-libc/-/detect-libc-1.0.3.tgz#fa137c4bd698edf55cd5cd02ac559f91a4c4ba9b"
+  integrity sha1-+hN8S9aY7fVc1c0CrFWfkaTEups=
+
+detect-newline@3.0.0:
+  version "3.0.0"
+  resolved "https://registry.npmjs.org/detect-newline/-/detect-newline-3.0.0.tgz#8ae477c089e51872c264531cd6547719c0b86b2f"
+  integrity sha512-JAP22dVPAqvhdRFFxK1G5GViIokyUn0UWXRNW0ztK96fsqi9cuM8w8ESbSk+T2w5OVorcMcL6m7yUg1RrX+2CA==
+
+detect-newline@^2.1.0:
+  version "2.1.0"
+  resolved "https://registry.npm.taobao.org/detect-newline/download/detect-newline-2.1.0.tgz#f41f1c10be4b00e87b5f13da680759f2c5bfd3e2"
+  integrity sha1-9B8cEL5LAOh7XxPaaAdZ8sW/0+I=
+
+detect-node@^2.0.4:
+  version "2.0.4"
+  resolved "https://registry.yarnpkg.com/detect-node/-/detect-node-2.0.4.tgz#014ee8f8f669c5c58023da64b8179c083a28c46c"
+  integrity sha512-ZIzRpLJrOj7jjP2miAtgqIfmzbxa4ZOr5jJc601zklsfEx9oTzmmj2nVpIPRpNlRTIh8lc1kyViIY7BWSGNmKw==
+
+dezalgo@^1.0.0, dezalgo@~1.0.3:
+  version "1.0.3"
+  resolved "https://registry.npm.taobao.org/dezalgo/download/dezalgo-1.0.3.tgz#7f742de066fc748bc8db820569dddce49bf0d456"
+  integrity sha1-f3Qt4Gb8dIvI24IFad3c5Jvw1FY=
+  dependencies:
+    asap "^2.0.0"
+    wrappy "1"
 
 di@^0.0.1:
   version "0.0.1"
   resolved "https://registry.yarnpkg.com/di/-/di-0.0.1.tgz#806649326ceaa7caa3306d75d985ea2748ba913c"
+  integrity sha1-gGZJMmzqp8qjMG112YXqJ0i6kTw=
 
-diff@1.4.0:
-  version "1.4.0"
-  resolved "https://registry.yarnpkg.com/diff/-/diff-1.4.0.tgz#7f28d2eb9ee7b15a97efd89ce63dcfdaa3ccbabf"
+diff@3.5.0, diff@^3.5.0:
+  version "3.5.0"
+  resolved "https://registry.npmjs.org/diff/-/diff-3.5.0.tgz#800c0dd1e0a8bfbc95835c202ad220fe317e5a12"
+  integrity sha512-A46qtFgd+g7pDZinpnwiRJtxbC1hpgf0uzP3iG89scHk0AUC7A1TGxf5OiiOUv/JMZR8GOt8hL900hV0bOy5xA==
 
 diffie-hellman@^5.0.0:
-  version "5.0.2"
-  resolved "https://registry.yarnpkg.com/diffie-hellman/-/diffie-hellman-5.0.2.tgz#b5835739270cfe26acf632099fded2a07f209e5e"
+  version "5.0.3"
+  resolved "https://registry.yarnpkg.com/diffie-hellman/-/diffie-hellman-5.0.3.tgz#40e8ee98f55a2149607146921c63e1ae5f3d2875"
+  integrity sha512-kqag/Nl+f3GwyK25fhUMYj81BUOrZ9IuJsjIcDE5icNM9FJHAVm3VcUDxdLPoQtTuUylWm6ZIknYJwwaPxsUzg==
   dependencies:
     bn.js "^4.1.0"
     miller-rabin "^4.0.0"
     randombytes "^2.0.0"
 
-directory-encoder@^0.7.2:
-  version "0.7.2"
-  resolved "https://registry.yarnpkg.com/directory-encoder/-/directory-encoder-0.7.2.tgz#59b4e2aa4f25422f6c63b527b462f5e2d0dd2c58"
+dir-glob@^2.0.0:
+  version "2.2.2"
+  resolved "https://registry.yarnpkg.com/dir-glob/-/dir-glob-2.2.2.tgz#fa09f0694153c8918b18ba0deafae94769fc50c4"
+  integrity sha512-f9LBi5QWzIW3I6e//uxZoLBlUt9kcp66qo0sSCxL6YZKc75R1c4MFCoe/LaZiBGmgujvQdxc5Bn3QhfyvK5Hsw==
   dependencies:
-    fs-extra "^0.23.1"
-    handlebars "^1.3.0"
-    img-stats "^0.5.2"
+    path-type "^3.0.0"
 
 dns-equal@^1.0.0:
   version "1.0.0"
   resolved "https://registry.yarnpkg.com/dns-equal/-/dns-equal-1.0.0.tgz#b39e7f1da6eb0a75ba9c17324b34753c47e0654d"
+  integrity sha1-s55/HabrCnW6nBcySzR1PEfgZU0=
 
-dns-packet@^1.0.1:
-  version "1.2.2"
-  resolved "https://registry.yarnpkg.com/dns-packet/-/dns-packet-1.2.2.tgz#a8a26bec7646438963fc86e06f8f8b16d6c8bf7a"
+dns-packet@^1.3.1:
+  version "1.3.1"
+  resolved "https://registry.yarnpkg.com/dns-packet/-/dns-packet-1.3.1.tgz#12aa426981075be500b910eedcd0b47dd7deda5a"
+  integrity sha512-0UxfQkMhYAUaZI+xrNZOz/as5KgDU0M/fQ9b6SpkyLbk3GEswDi6PADJVaYJradtRVsRIlF1zLyOodbcTCDzUg==
   dependencies:
     ip "^1.1.0"
     safe-buffer "^5.0.1"
@@ -2001,114 +3730,203 @@ dns-packet@^1.0.1:
 dns-txt@^2.0.2:
   version "2.0.2"
   resolved "https://registry.yarnpkg.com/dns-txt/-/dns-txt-2.0.2.tgz#b91d806f5d27188e4ab3e7d107d881a1cc4642b6"
+  integrity sha1-uR2Ab10nGI5Ks+fRB9iBocxGQrY=
   dependencies:
     buffer-indexof "^1.0.0"
 
-doctrine@^2.0.2:
-  version "2.0.2"
-  resolved "http://registry.npm.taobao.org/doctrine/download/doctrine-2.0.2.tgz#68f96ce8efc56cc42651f1faadb4f175273b0075"
+doctrine@^2.1.0:
+  version "2.1.0"
+  resolved "https://registry.yarnpkg.com/doctrine/-/doctrine-2.1.0.tgz#5cd01fc101621b42c4cd7f5d1a66243716d3f39d"
+  integrity sha512-35mSku4ZXK0vfCuHEDAwt55dg2jNajHZ1odvF+8SSr82EsZY4QmXfuWso8oEd8zRhVObSN18aM0CjSdoBX7zIw==
   dependencies:
     esutils "^2.0.2"
 
-dom-converter@~0.1:
-  version "0.1.4"
-  resolved "https://registry.yarnpkg.com/dom-converter/-/dom-converter-0.1.4.tgz#a45ef5727b890c9bffe6d7c876e7b19cb0e17f3b"
+dom-converter@~0.2:
+  version "0.2.0"
+  resolved "https://registry.yarnpkg.com/dom-converter/-/dom-converter-0.2.0.tgz#6721a9daee2e293682955b6afe416771627bb768"
+  integrity sha512-gd3ypIPfOMr9h5jIKq8E3sHOTCjeirnl0WK5ZdS1AW0Odt0b1PaWaHdJ4Qk4klv+YB9aJBS7mESXjFoDQPu6DA==
   dependencies:
-    utila "~0.3"
+    utila "~0.4"
 
 dom-serialize@^2.2.0:
   version "2.2.1"
   resolved "https://registry.yarnpkg.com/dom-serialize/-/dom-serialize-2.2.1.tgz#562ae8999f44be5ea3076f5419dcd59eb43ac95b"
+  integrity sha1-ViromZ9Evl6jB29UGdzVnrQ6yVs=
   dependencies:
     custom-event "~1.0.0"
     ent "~2.2.0"
     extend "^3.0.0"
     void-elements "^2.0.0"
 
-dom-serializer@0, dom-serializer@^0.1.0, dom-serializer@~0.1.0:
+dom-serializer@0:
   version "0.1.0"
   resolved "https://registry.yarnpkg.com/dom-serializer/-/dom-serializer-0.1.0.tgz#073c697546ce0780ce23be4a28e293e40bc30c82"
+  integrity sha1-BzxpdUbOB4DOI75KKOKT5AvDDII=
   dependencies:
     domelementtype "~1.1.1"
     entities "~1.1.1"
 
-dom-serializer@~0.0.0:
-  version "0.0.1"
-  resolved "https://registry.yarnpkg.com/dom-serializer/-/dom-serializer-0.0.1.tgz#9589827f1e32d22c37c829adabd59b3247af8eaf"
-  dependencies:
-    domelementtype "~1.1.1"
-    entities "~1.1.1"
-
-dom-walk@^0.1.0, dom-walk@^0.1.1:
+dom-walk@^0.1.0:
   version "0.1.1"
   resolved "https://registry.yarnpkg.com/dom-walk/-/dom-walk-0.1.1.tgz#672226dc74c8f799ad35307df936aba11acd6018"
+  integrity sha1-ZyIm3HTI95mtNTB9+TaroRrNYBg=
 
 domain-browser@^1.1.1:
-  version "1.1.7"
-  resolved "https://registry.yarnpkg.com/domain-browser/-/domain-browser-1.1.7.tgz#867aa4b093faa05f1de08c06f4d7b21fdf8698bc"
+  version "1.2.0"
+  resolved "https://registry.yarnpkg.com/domain-browser/-/domain-browser-1.2.0.tgz#3d31f50191a6749dd1375a7f522e823d42e54eda"
+  integrity sha512-jnjyiM6eRyZl2H+W8Q/zLMA481hzi0eszAaBUzIVnmYVDBbnLxVNnfu1HgEBvCbL+71FrxMl3E6lpKH7Ge3OXA==
+
+domelementtype@1, domelementtype@^1.3.0:
+  version "1.3.1"
+  resolved "https://registry.yarnpkg.com/domelementtype/-/domelementtype-1.3.1.tgz#d048c44b37b0d10a7f2a3d5fee3f4333d790481f"
+  integrity sha512-BSKB+TSpMpFI/HOxCNr1O8aMOTZ8hT3pM3GQ0w/mWRmkhEDSFJkkyzz4XQsBV44BChwGkrDfMyjVD0eA2aFV3w==
 
-domelementtype@1, domelementtype@~1.1.1:
+domelementtype@~1.1.1:
   version "1.1.3"
   resolved "https://registry.yarnpkg.com/domelementtype/-/domelementtype-1.1.3.tgz#bd28773e2642881aec51544924299c5cd822185b"
-
-domelementtype@^1.3.0:
-  version "1.3.0"
-  resolved "https://registry.yarnpkg.com/domelementtype/-/domelementtype-1.3.0.tgz#b17aed82e8ab59e52dd9c19b1756e0fc187204c2"
+  integrity sha1-vSh3PiZCiBrsUVRJJCmcXNgiGFs=
 
 domhandler@2.1:
   version "2.1.0"
   resolved "https://registry.yarnpkg.com/domhandler/-/domhandler-2.1.0.tgz#d2646f5e57f6c3bab11cf6cb05d3c0acf7412594"
+  integrity sha1-0mRvXlf2w7qxHPbLBdPArPdBJZQ=
   dependencies:
     domelementtype "1"
 
-domhandler@2.3, domhandler@^2.3.0:
-  version "2.3.0"
-  resolved "https://registry.yarnpkg.com/domhandler/-/domhandler-2.3.0.tgz#2de59a0822d5027fabff6f032c2b25a2a8abe738"
+domhandler@^2.3.0:
+  version "2.4.2"
+  resolved "https://registry.yarnpkg.com/domhandler/-/domhandler-2.4.2.tgz#8805097e933d65e85546f726d60f5eb88b44f803"
+  integrity sha512-JiK04h0Ht5u/80fdLMCEmV4zkNh2BcoMFBmZ/91WtYZ8qVXSKjiw7fXMgFPnHcSZgOo3XdinHvmnDUeMf5R4wA==
   dependencies:
     domelementtype "1"
 
 domutils@1.1:
   version "1.1.6"
   resolved "https://registry.yarnpkg.com/domutils/-/domutils-1.1.6.tgz#bddc3de099b9a2efacc51c623f28f416ecc57485"
+  integrity sha1-vdw94Jm5ou+sxRxiPyj0FuzFdIU=
   dependencies:
     domelementtype "1"
 
-domutils@1.4:
-  version "1.4.3"
-  resolved "https://registry.yarnpkg.com/domutils/-/domutils-1.4.3.tgz#0865513796c6b306031850e175516baf80b72a6f"
+domutils@1.5.1:
+  version "1.5.1"
+  resolved "https://registry.yarnpkg.com/domutils/-/domutils-1.5.1.tgz#dcd8488a26f563d61079e48c9f7b7e32373682cf"
+  integrity sha1-3NhIiib1Y9YQeeSMn3t+Mjc2gs8=
   dependencies:
+    dom-serializer "0"
     domelementtype "1"
 
-domutils@1.5, domutils@1.5.1, domutils@^1.5.1:
-  version "1.5.1"
-  resolved "https://registry.yarnpkg.com/domutils/-/domutils-1.5.1.tgz#dcd8488a26f563d61079e48c9f7b7e32373682cf"
+domutils@^1.5.1, domutils@^1.7.0:
+  version "1.7.0"
+  resolved "https://registry.yarnpkg.com/domutils/-/domutils-1.7.0.tgz#56ea341e834e06e6748af7a1cb25da67ea9f8c2a"
+  integrity sha512-Lgd2XcJ/NjEw+7tFvfKxOzCYKZsdct5lczQ2ZaQY8Djz7pfAD3Gbp8ySJWtreII/vDlMVmxwa6pHmdxIYgttDg==
   dependencies:
     dom-serializer "0"
     domelementtype "1"
 
+dot-prop@^3.0.0:
+  version "3.0.0"
+  resolved "https://registry.npmjs.org/dot-prop/-/dot-prop-3.0.0.tgz#1b708af094a49c9a0e7dbcad790aba539dac1177"
+  integrity sha1-G3CK8JSknJoOfbyteQq6U52sEXc=
+  dependencies:
+    is-obj "^1.0.0"
+
+dot-prop@^4.1.0, dot-prop@^4.1.1:
+  version "4.2.0"
+  resolved "https://registry.yarnpkg.com/dot-prop/-/dot-prop-4.2.0.tgz#1f19e0c2e1aa0e32797c49799f2837ac6af69c57"
+  integrity sha512-tUMXrxlExSW6U2EXiiKGSBVdYgtV8qlHL+C10TsW4PURY/ic+eaysnSkwB4kA/mBlCyy/IKDJ+Lc3wbWeaXtuQ==
+  dependencies:
+    is-obj "^1.0.0"
+
+dotenv@^5.0.1:
+  version "5.0.1"
+  resolved "https://registry.npm.taobao.org/dotenv/download/dotenv-5.0.1.tgz?cache=0&sync_timestamp=1571190696472&other_urls=https%3A%2F%2Fregistry.npm.taobao.org%2Fdotenv%2Fdownload%2Fdotenv-5.0.1.tgz#a5317459bd3d79ab88cff6e44057a6a3fbb1fcef"
+  integrity sha1-pTF0Wb09eauIz/bkQFemo/ux/O8=
+
+dotgitignore@2.1.0:
+  version "2.1.0"
+  resolved "https://registry.npmjs.org/dotgitignore/-/dotgitignore-2.1.0.tgz#a4b15a4e4ef3cf383598aaf1dfa4a04bcc089b7b"
+  integrity sha512-sCm11ak2oY6DglEPpCB8TixLjWAxd3kJTs6UIcSasNYxXdFPV+YKlye92c8H4kKFqV5qYMIh7d+cYecEg0dIkA==
+  dependencies:
+    find-up "^3.0.0"
+    minimatch "^3.0.4"
+
 duplexer2@0.0.2:
   version "0.0.2"
   resolved "https://registry.yarnpkg.com/duplexer2/-/duplexer2-0.0.2.tgz#c614dcf67e2fb14995a91711e5a617e8a60a31db"
+  integrity sha1-xhTc9n4vsUmVqRcR5aYX6KYKMds=
   dependencies:
     readable-stream "~1.1.9"
 
+duplexer3@^0.1.4:
+  version "0.1.4"
+  resolved "https://registry.npm.taobao.org/duplexer3/download/duplexer3-0.1.4.tgz#ee01dd1cac0ed3cbc7fdbea37dc0a8f1ce002ce2"
+  integrity sha1-7gHdHKwO08vH/b6jfcCo8c4ALOI=
+
+duplexify@^3.4.2, duplexify@^3.6.0:
+  version "3.6.1"
+  resolved "https://registry.yarnpkg.com/duplexify/-/duplexify-3.6.1.tgz#b1a7a29c4abfd639585efaecce80d666b1e34125"
+  integrity sha512-vM58DwdnKmty+FSPzT14K9JXb90H+j5emaR4KYbr2KTIz00WHGbWOe5ghQTx233ZCLZtrGDALzKwcjEtSt35mA==
+  dependencies:
+    end-of-stream "^1.0.0"
+    inherits "^2.0.1"
+    readable-stream "^2.0.0"
+    stream-shift "^1.0.0"
+
+each-props@^1.3.0:
+  version "1.3.2"
+  resolved "https://registry.yarnpkg.com/each-props/-/each-props-1.3.2.tgz#ea45a414d16dd5cfa419b1a81720d5ca06892333"
+  integrity sha512-vV0Hem3zAGkJAyU7JSjixeU66rwdynTAa1vofCrSA5fEln+m67Az9CcnkVD776/fsN/UjIWmBDoNRS6t6G9RfA==
+  dependencies:
+    is-plain-object "^2.0.1"
+    object.defaults "^1.1.0"
+
 ecc-jsbn@~0.1.1:
-  version "0.1.1"
-  resolved "https://registry.yarnpkg.com/ecc-jsbn/-/ecc-jsbn-0.1.1.tgz#0fc73a9ed5f0d53c38193398523ef7e543777505"
+  version "0.1.2"
+  resolved "https://registry.yarnpkg.com/ecc-jsbn/-/ecc-jsbn-0.1.2.tgz#3a83a904e54353287874c564b7549386849a98c9"
+  integrity sha1-OoOpBOVDUyh4dMVkt1SThoSamMk=
   dependencies:
     jsbn "~0.1.0"
+    safer-buffer "^2.1.0"
+
+editor@~1.0.0:
+  version "1.0.0"
+  resolved "https://registry.npm.taobao.org/editor/download/editor-1.0.0.tgz#60c7f87bd62bcc6a894fa8ccd6afb7823a24f742"
+  integrity sha1-YMf4e9YrzGqJT6jM1q+3gjok90I=
+
+editorconfig@^0.15.3:
+  version "0.15.3"
+  resolved "https://registry.npm.taobao.org/editorconfig/download/editorconfig-0.15.3.tgz#bef84c4e75fb8dcb0ce5cee8efd51c15999befc5"
+  integrity sha1-vvhMTnX7jcsM5c7o79UcFZmb78U=
+  dependencies:
+    commander "^2.19.0"
+    lru-cache "^4.1.5"
+    semver "^5.6.0"
+    sigmund "^1.0.1"
 
 ee-first@1.1.1:
   version "1.1.1"
   resolved "https://registry.yarnpkg.com/ee-first/-/ee-first-1.1.1.tgz#590c61156b0ae2f4f0255732a158b266bc56b21d"
+  integrity sha1-WQxhFWsK4vTwJVcyoViyZrxWsh0=
+
+electron-to-chromium@^1.3.103:
+  version "1.3.113"
+  resolved "https://registry.yarnpkg.com/electron-to-chromium/-/electron-to-chromium-1.3.113.tgz#b1ccf619df7295aea17bc6951dc689632629e4a9"
+  integrity sha512-De+lPAxEcpxvqPTyZAXELNpRZXABRxf+uL/rSykstQhzj/B0l1150G/ExIIxKc16lI89Hgz81J0BHAcbTqK49g==
 
-electron-to-chromium@^1.3.18:
-  version "1.3.18"
-  resolved "https://registry.yarnpkg.com/electron-to-chromium/-/electron-to-chromium-1.3.18.tgz#3dcc99da3e6b665f6abbc71c28ad51a2cd731a9c"
+electron-to-chromium@^1.3.116:
+  version "1.3.116"
+  resolved "https://registry.yarnpkg.com/electron-to-chromium/-/electron-to-chromium-1.3.116.tgz#1dbfee6a592a0c14ade77dbdfe54fef86387d702"
+  integrity sha512-NKwKAXzur5vFCZYBHpdWjTMO8QptNLNP80nItkSIgUOapPAo9Uia+RvkCaZJtO7fhQaVElSvBPWEc2ku6cKsPA==
+
+electron-to-chromium@^1.3.47:
+  version "1.3.103"
+  resolved "https://registry.yarnpkg.com/electron-to-chromium/-/electron-to-chromium-1.3.103.tgz#a695777efdbc419cad6cbb0e58458251302cd52f"
+  integrity sha512-tObPqGmY9X8MUM8i3MEimYmbnLLf05/QV5gPlkR8MQ3Uj8G8B2govE1U4cQcBYtv3ymck9Y8cIOu4waoiykMZQ==
 
 elliptic@^6.0.0:
-  version "6.4.0"
-  resolved "https://registry.yarnpkg.com/elliptic/-/elliptic-6.4.0.tgz#cac9af8762c85836187003c8dfe193e5e2eae5df"
+  version "6.4.1"
+  resolved "https://registry.yarnpkg.com/elliptic/-/elliptic-6.4.1.tgz#c2d0b7776911b86722c632c3c06c60f2f819939a"
+  integrity sha512-BsXLz5sqX8OHcsh7CqBMztyXARmGQ3LWPtGjJi6DiJHq5C/qvi9P3OqgswKSDftbu8+IoI/QDTAm2fFnQ9SZSQ==
   dependencies:
     bn.js "^4.4.0"
     brorand "^1.0.1"
@@ -2118,217 +3936,223 @@ elliptic@^6.0.0:
     minimalistic-assert "^1.0.0"
     minimalistic-crypto-utils "^1.0.0"
 
+emoji-regex@^7.0.1:
+  version "7.0.3"
+  resolved "https://registry.npmjs.org/emoji-regex/-/emoji-regex-7.0.3.tgz#933a04052860c85e83c122479c4748a8e4c72156"
+  integrity sha512-CwBLREIQ7LvYFB0WyRvwhq5N5qPhc6PMjD6bYggFlI5YyDgl+0vxq5VHbMOFqLg7hfWzmu8T5Z1QofhmTIhItA==
+
 emojis-list@^2.0.0:
   version "2.1.0"
   resolved "https://registry.yarnpkg.com/emojis-list/-/emojis-list-2.1.0.tgz#4daa4d9db00f9819880c79fa457ae5b09a1fd389"
+  integrity sha1-TapNnbAPmBmIDHn6RXrlsJof04k=
 
-encodeurl@~1.0.1:
-  version "1.0.1"
-  resolved "https://registry.yarnpkg.com/encodeurl/-/encodeurl-1.0.1.tgz#79e3d58655346909fe6f0f45a5de68103b294d20"
+encodeurl@~1.0.1, encodeurl@~1.0.2:
+  version "1.0.2"
+  resolved "https://registry.yarnpkg.com/encodeurl/-/encodeurl-1.0.2.tgz#ad3ff4c86ec2d029322f5a02c3a9a606c95b3f59"
+  integrity sha1-rT/0yG7C0CkyL1oCw6mmBslbP1k=
 
-end-of-stream@~0.1.5:
-  version "0.1.5"
-  resolved "https://registry.yarnpkg.com/end-of-stream/-/end-of-stream-0.1.5.tgz#8e177206c3c80837d85632e8b9359dfe8b2f6eaf"
+encoding@^0.1.11:
+  version "0.1.12"
+  resolved "https://registry.npm.taobao.org/encoding/download/encoding-0.1.12.tgz#538b66f3ee62cd1ab51ec323829d1f9480c74beb"
+  integrity sha1-U4tm8+5izRq1HsMjgp0flIDHS+s=
+  dependencies:
+    iconv-lite "~0.4.13"
+
+end-of-stream@^1.0.0, end-of-stream@^1.1.0:
+  version "1.4.1"
+  resolved "https://registry.yarnpkg.com/end-of-stream/-/end-of-stream-1.4.1.tgz#ed29634d19baba463b6ce6b80a37213eab71ec43"
+  integrity sha512-1MkrZNvWTKCaigbn+W15elq2BB/L22nqrSY5DKlo3X6+vclJm8Bb5djXJBmEX6fS3+zCh/F4VBK5Z2KxJt4s2Q==
   dependencies:
-    once "~1.3.0"
+    once "^1.4.0"
 
-engine.io-client@1.6.9:
-  version "1.6.9"
-  resolved "https://registry.yarnpkg.com/engine.io-client/-/engine.io-client-1.6.9.tgz#1d6ad48048a5083c95096943b29d36efdb212401"
+engine.io-client@~3.2.0:
+  version "3.2.1"
+  resolved "https://registry.npmjs.org/engine.io-client/-/engine.io-client-3.2.1.tgz#6f54c0475de487158a1a7c77d10178708b6add36"
+  integrity sha512-y5AbkytWeM4jQr7m/koQLc5AxpRKC1hEVUb/s1FUAWEJq5AzJJ4NLvzuKPuxtDi5Mq755WuDvZ6Iv2rXj4PTzw==
   dependencies:
-    component-emitter "1.1.2"
+    component-emitter "1.2.1"
     component-inherit "0.0.3"
-    debug "2.2.0"
-    engine.io-parser "1.2.4"
+    debug "~3.1.0"
+    engine.io-parser "~2.1.1"
     has-cors "1.1.0"
     indexof "0.0.1"
-    parsejson "0.0.1"
-    parseqs "0.0.2"
-    parseuri "0.0.4"
-    ws "1.0.1"
-    xmlhttprequest-ssl "1.5.1"
+    parseqs "0.0.5"
+    parseuri "0.0.5"
+    ws "~3.3.1"
+    xmlhttprequest-ssl "~1.5.4"
     yeast "0.1.2"
 
-engine.io-parser@1.2.4:
-  version "1.2.4"
-  resolved "https://registry.yarnpkg.com/engine.io-parser/-/engine.io-parser-1.2.4.tgz#e0897b0bf14e792d4cd2a5950553919c56948c42"
-  dependencies:
-    after "0.8.1"
-    arraybuffer.slice "0.0.6"
-    base64-arraybuffer "0.1.2"
-    blob "0.0.4"
-    has-binary "0.1.6"
-    utf8 "2.1.0"
-
-engine.io@1.6.10:
-  version "1.6.10"
-  resolved "https://registry.yarnpkg.com/engine.io/-/engine.io-1.6.10.tgz#f87d84e1bd21d1a2ec7f8deef0c62054acdfb27a"
-  dependencies:
-    accepts "1.1.4"
-    base64id "0.1.0"
-    debug "2.2.0"
-    engine.io-parser "1.2.4"
-    ws "1.0.1"
-
-enhanced-resolve@^3.4.0:
-  version "3.4.1"
-  resolved "https://registry.yarnpkg.com/enhanced-resolve/-/enhanced-resolve-3.4.1.tgz#0421e339fd71419b3da13d129b3979040230476e"
+engine.io-parser@~2.1.0, engine.io-parser@~2.1.1:
+  version "2.1.3"
+  resolved "https://registry.npmjs.org/engine.io-parser/-/engine.io-parser-2.1.3.tgz#757ab970fbf2dfb32c7b74b033216d5739ef79a6"
+  integrity sha512-6HXPre2O4Houl7c4g7Ic/XzPnHBvaEmN90vtRO9uLmwtRqQmTOw0QMevL1TOfL2Cpu1VzsaTmMotQgMdkzGkVA==
+  dependencies:
+    after "0.8.2"
+    arraybuffer.slice "~0.0.7"
+    base64-arraybuffer "0.1.5"
+    blob "0.0.5"
+    has-binary2 "~1.0.2"
+
+engine.io@~3.2.0:
+  version "3.2.1"
+  resolved "https://registry.npmjs.org/engine.io/-/engine.io-3.2.1.tgz#b60281c35484a70ee0351ea0ebff83ec8c9522a2"
+  integrity sha512-+VlKzHzMhaU+GsCIg4AoXF1UdDFjHHwMmMKqMJNDNLlUlejz58FCy4LBqB2YVJskHGYl06BatYWKP2TVdVXE5w==
+  dependencies:
+    accepts "~1.3.4"
+    base64id "1.0.0"
+    cookie "0.3.1"
+    debug "~3.1.0"
+    engine.io-parser "~2.1.0"
+    ws "~3.3.1"
+
+enhanced-resolve@^4.1.0:
+  version "4.1.0"
+  resolved "https://registry.yarnpkg.com/enhanced-resolve/-/enhanced-resolve-4.1.0.tgz#41c7e0bfdfe74ac1ffe1e57ad6a5c6c9f3742a7f"
+  integrity sha512-F/7vkyTtyc/llOIn8oWclcB25KdRaiPBpZYDgJHgh/UHtpgT2p2eldQgtQnLtUvfMKPKxbRaQM/hHkvLHt1Vng==
   dependencies:
     graceful-fs "^4.1.2"
     memory-fs "^0.4.0"
-    object-assign "^4.0.1"
-    tapable "^0.2.7"
+    tapable "^1.0.0"
 
 ent@~2.2.0:
   version "2.2.0"
   resolved "https://registry.yarnpkg.com/ent/-/ent-2.2.0.tgz#e964219325a21d05f44466a2f686ed6ce5f5dd1d"
-
-entities@1.0:
-  version "1.0.0"
-  resolved "https://registry.yarnpkg.com/entities/-/entities-1.0.0.tgz#b2987aa3821347fcde642b24fdfc9e4fb712bf26"
+  integrity sha1-6WQhkyWiHQX0RGai9obtbOX13R0=
 
 entities@^1.1.1, entities@~1.1.1:
-  version "1.1.1"
-  resolved "https://registry.yarnpkg.com/entities/-/entities-1.1.1.tgz#6e5c2d0a5621b5dadaecef80b90edfb5cd7772f0"
+  version "1.1.2"
+  resolved "https://registry.yarnpkg.com/entities/-/entities-1.1.2.tgz#bdfa735299664dfafd34529ed4f8522a275fea56"
+  integrity sha512-f2LZMYl1Fzu7YSBKg+RoROelpOaNrcGmE9AZubeDfrCEia483oW4MI4VyFd5VNHIgQ/7qm1I0wUHK1eJnn2y2w==
+
+env-paths@^2.2.0:
+  version "2.2.0"
+  resolved "https://registry.npm.taobao.org/env-paths/download/env-paths-2.2.0.tgz#cdca557dc009152917d6166e2febe1f039685e43"
+  integrity sha1-zcpVfcAJFSkX1hZuL+vh8DloXkM=
 
 envify@^4.0.0:
   version "4.1.0"
   resolved "https://registry.yarnpkg.com/envify/-/envify-4.1.0.tgz#f39ad3db9d6801b4e6b478b61028d3f0b6819f7e"
+  integrity sha512-IKRVVoAYr4pIx4yIWNsz9mOsboxlNXiu7TNBnem/K/uTHdkyzXWDzHCK7UTolqBbgaBz0tQHsD3YNls0uIIjiw==
   dependencies:
     esprima "^4.0.0"
     through "~2.3.4"
 
-errno@^0.1.3:
-  version "0.1.4"
-  resolved "https://registry.yarnpkg.com/errno/-/errno-0.1.4.tgz#b896e23a9e5e8ba33871fc996abd3635fc9a1c7d"
+err-code@^1.0.0:
+  version "1.1.2"
+  resolved "https://registry.npm.taobao.org/err-code/download/err-code-1.1.2.tgz#06e0116d3028f6aef4806849eb0ea6a748ae6960"
+  integrity sha1-BuARbTAo9q70gGhJ6w6mp0iuaWA=
+
+errno@^0.1.3, errno@~0.1.7:
+  version "0.1.7"
+  resolved "https://registry.yarnpkg.com/errno/-/errno-0.1.7.tgz#4684d71779ad39af177e3f007996f7c67c852618"
+  integrity sha512-MfrRBDWzIWifgq6tJj60gkAwtLNb6sQPlcFrSOflcP1aFmmruKQ2wRnze/8V6kgyz7H3FF8Npzv78mZ7XLLflg==
   dependencies:
-    prr "~0.0.0"
+    prr "~1.0.1"
 
-error-ex@^1.2.0:
-  version "1.3.0"
-  resolved "https://registry.yarnpkg.com/error-ex/-/error-ex-1.3.0.tgz#e67b43f3e82c96ea3a584ffee0b9fc3325d802d9"
+error-ex@^1.2.0, error-ex@^1.3.1:
+  version "1.3.2"
+  resolved "https://registry.yarnpkg.com/error-ex/-/error-ex-1.3.2.tgz#b4ac40648107fdcdcfae242f428bea8a14d4f1bf"
+  integrity sha512-7dFHNmqeFSEt2ZBsCriorKnn3Z2pj+fd9kmI6QoWw4//DL+icEBfc0U7qJCisqrTsKTjw4fNFy2pW9OqStD84g==
   dependencies:
     is-arrayish "^0.2.1"
 
-es-abstract@^1.7.0:
-  version "1.9.0"
-  resolved "https://registry.yarnpkg.com/es-abstract/-/es-abstract-1.9.0.tgz#690829a07cae36b222e7fd9b75c0d0573eb25227"
+es-abstract@^1.12.0, es-abstract@^1.5.1:
+  version "1.13.0"
+  resolved "https://registry.yarnpkg.com/es-abstract/-/es-abstract-1.13.0.tgz#ac86145fdd5099d8dd49558ccba2eaf9b88e24e9"
+  integrity sha512-vDZfg/ykNxQVwup/8E1BZhVzFfBxs9NqMzGcvIJrqg5k2/5Za2bWo40dK2J1pgLngZ7c+Shh8lwYtLGyrwPutg==
   dependencies:
-    es-to-primitive "^1.1.1"
+    es-to-primitive "^1.2.0"
     function-bind "^1.1.1"
-    has "^1.0.1"
-    is-callable "^1.1.3"
+    has "^1.0.3"
+    is-callable "^1.1.4"
     is-regex "^1.0.4"
+    object-keys "^1.0.12"
 
-es-to-primitive@^1.1.1:
-  version "1.1.1"
-  resolved "https://registry.yarnpkg.com/es-to-primitive/-/es-to-primitive-1.1.1.tgz#45355248a88979034b6792e19bb81f2b7975dd0d"
+es-to-primitive@^1.2.0:
+  version "1.2.0"
+  resolved "https://registry.yarnpkg.com/es-to-primitive/-/es-to-primitive-1.2.0.tgz#edf72478033456e8dda8ef09e00ad9650707f377"
+  integrity sha512-qZryBOJjV//LaxLTV6UC//WewneB3LcXOL9NP++ozKVXsIIIpm/2c13UDiD9Jp2eThsecw9m3jPqDwTyobcdbg==
   dependencies:
-    is-callable "^1.1.1"
+    is-callable "^1.1.4"
     is-date-object "^1.0.1"
-    is-symbol "^1.0.1"
+    is-symbol "^1.0.2"
 
-es5-ext@^0.10.35, es5-ext@^0.10.9, es5-ext@~0.10.14:
-  version "0.10.42"
-  resolved "http://registry.npm.taobao.org/es5-ext/download/es5-ext-0.10.42.tgz#8c07dd33af04d5dcd1310b5cef13bea63a89ba8d"
+es5-ext@^0.10.14:
+  version "0.10.49"
+  resolved "https://registry.yarnpkg.com/es5-ext/-/es5-ext-0.10.49.tgz#059a239de862c94494fec28f8150c977028c6c5e"
+  integrity sha512-3NMEhi57E31qdzmYp2jwRArIUsj1HI/RxbQ4bgnSB+AIKIxsAmTiK83bYMifIcpWvEc3P1X30DhUKOqEtF/kvg==
   dependencies:
     es6-iterator "~2.0.3"
     es6-symbol "~3.1.1"
-    next-tick "1"
-
-es5-ext@^0.10.7, es5-ext@^0.10.8, es5-ext@~0.10.11, es5-ext@~0.10.2, es5-ext@~0.10.7:
-  version "0.10.12"
-  resolved "https://registry.yarnpkg.com/es5-ext/-/es5-ext-0.10.12.tgz#aa84641d4db76b62abba5e45fd805ecbab140047"
-  dependencies:
-    es6-iterator "2"
-    es6-symbol "~3.1"
+    next-tick "^1.0.0"
 
-es6-iterator@2:
-  version "2.0.0"
-  resolved "https://registry.yarnpkg.com/es6-iterator/-/es6-iterator-2.0.0.tgz#bd968567d61635e33c0b80727613c9cb4b096bac"
+es5-ext@^0.10.35, es5-ext@^0.10.9, es5-ext@~0.10.14:
+  version "0.10.47"
+  resolved "https://registry.yarnpkg.com/es5-ext/-/es5-ext-0.10.47.tgz#d24232e1380daad5449a817be19bde9729024a11"
+  integrity sha512-/1TItLfj+TTfWoeRcDn/0FbGV6SNo4R+On2GGVucPU/j3BWnXE2Co8h8CTo4Tu34gFJtnmwS9xiScKs4EjZhdw==
   dependencies:
-    d "^0.1.1"
-    es5-ext "^0.10.7"
-    es6-symbol "3"
+    es6-iterator "~2.0.3"
+    es6-symbol "~3.1.1"
+    next-tick "1"
 
-es6-iterator@~2.0.3:
+es6-iterator@^2.0.1, es6-iterator@~2.0.3:
   version "2.0.3"
-  resolved "http://registry.npm.taobao.org/es6-iterator/download/es6-iterator-2.0.3.tgz#a7de889141a05a94b0854403b2d0a0fbfa98f3b7"
+  resolved "https://registry.yarnpkg.com/es6-iterator/-/es6-iterator-2.0.3.tgz#a7de889141a05a94b0854403b2d0a0fbfa98f3b7"
+  integrity sha1-p96IkUGgWpSwhUQDstCg+/qY87c=
   dependencies:
     d "1"
     es5-ext "^0.10.35"
     es6-symbol "^3.1.1"
 
-es6-map@^0.1.3:
-  version "0.1.4"
-  resolved "https://registry.yarnpkg.com/es6-map/-/es6-map-0.1.4.tgz#a34b147be224773a4d7da8072794cefa3632b897"
-  dependencies:
-    d "~0.1.1"
-    es5-ext "~0.10.11"
-    es6-iterator "2"
-    es6-set "~0.1.3"
-    es6-symbol "~3.1.0"
-    event-emitter "~0.3.4"
-
-es6-promise@^4.0.5:
-  version "4.0.5"
-  resolved "https://registry.yarnpkg.com/es6-promise/-/es6-promise-4.0.5.tgz#7882f30adde5b240ccfa7f7d78c548330951ae42"
+es6-promise@^4.0.3:
+  version "4.2.8"
+  resolved "https://registry.npm.taobao.org/es6-promise/download/es6-promise-4.2.8.tgz?cache=0&other_urls=https%3A%2F%2Fregistry.npm.taobao.org%2Fes6-promise%2Fdownload%2Fes6-promise-4.2.8.tgz#4eb21594c972bc40553d276e510539143db53e0a"
+  integrity sha1-TrIVlMlyvEBVPSduUQU5FD21Pgo=
 
-es6-promise@^4.1.0:
-  version "4.1.1"
-  resolved "https://registry.yarnpkg.com/es6-promise/-/es6-promise-4.1.1.tgz#8811e90915d9a0dba36274f0b242dbda78f9c92a"
-
-es6-set@~0.1.3:
-  version "0.1.4"
-  resolved "https://registry.yarnpkg.com/es6-set/-/es6-set-0.1.4.tgz#9516b6761c2964b92ff479456233a247dc707ce8"
-  dependencies:
-    d "~0.1.1"
-    es5-ext "~0.10.11"
-    es6-iterator "2"
-    es6-symbol "3"
-    event-emitter "~0.3.4"
+es6-promise@^4.0.5, es6-promise@^4.1.0:
+  version "4.2.5"
+  resolved "https://registry.yarnpkg.com/es6-promise/-/es6-promise-4.2.5.tgz#da6d0d5692efb461e082c14817fe2427d8f5d054"
+  integrity sha512-n6wvpdE43VFtJq+lUDYDBFUwV8TZbuGXLV4D6wKafg13ldznKsyEvatubnmUe31zcvelSzOHF+XbaT+Bl9ObDg==
 
-es6-symbol@3, es6-symbol@~3.1, es6-symbol@~3.1.0:
-  version "3.1.0"
-  resolved "https://registry.yarnpkg.com/es6-symbol/-/es6-symbol-3.1.0.tgz#94481c655e7a7cad82eba832d97d5433496d7ffa"
+es6-promisify@^5.0.0:
+  version "5.0.0"
+  resolved "https://registry.npm.taobao.org/es6-promisify/download/es6-promisify-5.0.0.tgz?cache=0&sync_timestamp=1566902738584&other_urls=https%3A%2F%2Fregistry.npm.taobao.org%2Fes6-promisify%2Fdownload%2Fes6-promisify-5.0.0.tgz#5109d62f3e56ea967c4b63505aef08291c8a5203"
+  integrity sha1-UQnWLz5W6pZ8S2NQWu8IKRyKUgM=
   dependencies:
-    d "~0.1.1"
-    es5-ext "~0.10.11"
+    es6-promise "^4.0.3"
 
 es6-symbol@^3.1.1, es6-symbol@~3.1.1:
   version "3.1.1"
-  resolved "http://registry.npm.taobao.org/es6-symbol/download/es6-symbol-3.1.1.tgz#bf00ef4fdab6ba1b46ecb7b629b4c7ed5715cc77"
+  resolved "https://registry.yarnpkg.com/es6-symbol/-/es6-symbol-3.1.1.tgz#bf00ef4fdab6ba1b46ecb7b629b4c7ed5715cc77"
+  integrity sha1-vwDvT9q2uhtG7Le2KbTH7VcVzHc=
   dependencies:
     d "1"
     es5-ext "~0.10.14"
 
-es6-templates@^0.2.2:
-  version "0.2.3"
-  resolved "https://registry.yarnpkg.com/es6-templates/-/es6-templates-0.2.3.tgz#5cb9ac9fb1ded6eb1239342b81d792bbb4078ee4"
-  dependencies:
-    recast "~0.11.12"
-    through "~2.3.6"
-
 es6-weak-map@^2.0.1:
-  version "2.0.1"
-  resolved "https://registry.yarnpkg.com/es6-weak-map/-/es6-weak-map-2.0.1.tgz#0d2bbd8827eb5fb4ba8f97fbfea50d43db21ea81"
+  version "2.0.2"
+  resolved "https://registry.yarnpkg.com/es6-weak-map/-/es6-weak-map-2.0.2.tgz#5e3ab32251ffd1538a1f8e5ffa1357772f92d96f"
+  integrity sha1-XjqzIlH/0VOKH45f+hNXdy+S2W8=
   dependencies:
-    d "^0.1.1"
-    es5-ext "^0.10.8"
-    es6-iterator "2"
-    es6-symbol "3"
+    d "1"
+    es5-ext "^0.10.14"
+    es6-iterator "^2.0.1"
+    es6-symbol "^3.1.1"
 
 escape-html@~1.0.3:
   version "1.0.3"
   resolved "https://registry.yarnpkg.com/escape-html/-/escape-html-1.0.3.tgz#0258eae4d3d0c0974de1c169188ef0051d1d1988"
+  integrity sha1-Aljq5NPQwJdN4cFpGI7wBR0dGYg=
 
 escape-string-regexp@1.0.5, escape-string-regexp@^1.0.0, escape-string-regexp@^1.0.2, escape-string-regexp@^1.0.5:
   version "1.0.5"
-  resolved "http://registry.npm.taobao.org/escape-string-regexp/download/escape-string-regexp-1.0.5.tgz#1b61c0562190a8dff6ae3bb2cf0200ca130b86d4"
+  resolved "https://registry.yarnpkg.com/escape-string-regexp/-/escape-string-regexp-1.0.5.tgz#1b61c0562190a8dff6ae3bb2cf0200ca130b86d4"
+  integrity sha1-G2HAViGQqN/2rjuyzwIAyhMLhtQ=
 
-escodegen@1.8.x, escodegen@^1.6.1:
+escodegen@1.8.x:
   version "1.8.1"
   resolved "https://registry.yarnpkg.com/escodegen/-/escodegen-1.8.1.tgz#5a5b53af4693110bebb0867aa3430dd3b70a1018"
+  integrity sha1-WltTr0aTEQvrsIZ6o0MN07cKEBg=
   dependencies:
     esprima "^2.7.1"
     estraverse "^1.9.1"
@@ -2337,22 +4161,15 @@ escodegen@1.8.x, escodegen@^1.6.1:
   optionalDependencies:
     source-map "~0.2.0"
 
-escope@^3.6.0:
-  version "3.6.0"
-  resolved "https://registry.yarnpkg.com/escope/-/escope-3.6.0.tgz#e01975e812781a163a6dadfdd80398dc64c889c3"
-  dependencies:
-    es6-map "^0.1.3"
-    es6-weak-map "^2.0.1"
-    esrecurse "^4.1.0"
-    estraverse "^4.1.1"
-
 eslint-config-elemefe@0.1.1:
   version "0.1.1"
   resolved "https://registry.yarnpkg.com/eslint-config-elemefe/-/eslint-config-elemefe-0.1.1.tgz#5a1664ce3f7d91f68528b508d040044ae6c10aa3"
+  integrity sha1-WhZkzj99kfaFKLUI0EAESubBCqM=
 
-eslint-loader@^1.9.0:
-  version "1.9.0"
-  resolved "http://registry.npm.taobao.org/eslint-loader/download/eslint-loader-1.9.0.tgz#7e1be9feddca328d3dcfaef1ad49d5beffe83a13"
+eslint-loader@^2.0.0:
+  version "2.1.1"
+  resolved "https://registry.yarnpkg.com/eslint-loader/-/eslint-loader-2.1.1.tgz#2a9251523652430bfdd643efdb0afc1a2a89546a"
+  integrity sha512-1GrJFfSevQdYpoDzx8mEE2TDWsb/zmFuY09l6hURg1AeFIKQOvZ+vH0UPjzmd1CZIbfTV5HUkMeBmFiDBkgIsQ==
   dependencies:
     loader-fs-cache "^1.0.0"
     loader-utils "^1.0.2"
@@ -2361,31 +4178,44 @@ eslint-loader@^1.9.0:
     rimraf "^2.6.1"
 
 eslint-plugin-html@^4.0.1:
-  version "4.0.1"
-  resolved "http://registry.npm.taobao.org/eslint-plugin-html/download/eslint-plugin-html-4.0.1.tgz#fc70072263cc938496fbbc9cf648660e41fa269a"
+  version "4.0.6"
+  resolved "https://registry.yarnpkg.com/eslint-plugin-html/-/eslint-plugin-html-4.0.6.tgz#724bb9272efb4df007dfee8dfb269ed83577e5b4"
+  integrity sha512-nj6A9oK+7BKnMm0E7dMRH3r75BfpkXtcVIb3pFC4AcDdBTNyg2NGxHXyFNT1emW4VsR7P2SZvRXXQtUR+kY08w==
   dependencies:
     htmlparser2 "^3.8.2"
 
 eslint-plugin-json@^1.2.0:
-  version "1.2.0"
-  resolved "http://registry.npm.taobao.org/eslint-plugin-json/download/eslint-plugin-json-1.2.0.tgz#9ba73bb0be99d50093e889f5b968463d2a30efae"
+  version "1.3.2"
+  resolved "https://registry.yarnpkg.com/eslint-plugin-json/-/eslint-plugin-json-1.3.2.tgz#63fb1127b44864f2629b2571d7f10d52d81334ab"
+  integrity sha512-WPdA8ph8ptdlPPta7se9zhhVKd3qGmeiNJkCi6hQi5xPXPEXkXkoNGAUjVD6EXN2Df3ded1ww4jXSn6+JA65fQ==
   dependencies:
-    jshint "^2.8.0"
+    vscode-json-languageservice "^3.2.1"
 
 eslint-scope@^3.7.1:
-  version "3.7.1"
-  resolved "http://registry.npm.taobao.org/eslint-scope/download/eslint-scope-3.7.1.tgz#3d63c3edfda02e06e01a452ad88caacc7cdcb6e8"
+  version "3.7.3"
+  resolved "https://registry.yarnpkg.com/eslint-scope/-/eslint-scope-3.7.3.tgz#bb507200d3d17f60247636160b4826284b108535"
+  integrity sha512-W+B0SvF4gamyCTmUc+uITPY0989iXVfKvhwtmJocTaYoc/3khEHmEmvfY/Gn9HA9VV75jrQECsHizkNw1b68FA==
+  dependencies:
+    esrecurse "^4.1.0"
+    estraverse "^4.1.1"
+
+eslint-scope@^4.0.0:
+  version "4.0.0"
+  resolved "https://registry.yarnpkg.com/eslint-scope/-/eslint-scope-4.0.0.tgz#50bf3071e9338bcdc43331794a0cb533f0136172"
+  integrity sha512-1G6UTDi7Jc1ELFwnR58HV4fK9OQK4S6N985f166xqXxpjU6plxFISJa2Ba9KCQuFa8RCnj/lSFJbHo7UFDBnUA==
   dependencies:
     esrecurse "^4.1.0"
     estraverse "^4.1.1"
 
 eslint-visitor-keys@^1.0.0:
   version "1.0.0"
-  resolved "http://registry.npm.taobao.org/eslint-visitor-keys/download/eslint-visitor-keys-1.0.0.tgz#3f3180fb2e291017716acb4c9d6d5b5c34a6a81d"
+  resolved "https://registry.yarnpkg.com/eslint-visitor-keys/-/eslint-visitor-keys-1.0.0.tgz#3f3180fb2e291017716acb4c9d6d5b5c34a6a81d"
+  integrity sha512-qzm/XxIbxm/FHyH341ZrbnMUpe+5Bocte9xkmFMzPMjRaZMcXww+MpBptFvtU+79L362nqiLhekCxCxDPaUMBQ==
 
-eslint@4.14.0:
-  version "4.14.0"
-  resolved "http://registry.npm.taobao.org/eslint/download/eslint-4.14.0.tgz#96609768d1dd23304faba2d94b7fefe5a5447a82"
+eslint@4.18.2:
+  version "4.18.2"
+  resolved "https://registry.yarnpkg.com/eslint/-/eslint-4.18.2.tgz#0f81267ad1012e7d2051e186a9004cc2267b8d45"
+  integrity sha512-qy4i3wODqKMYfz9LUI8N2qYDkHkoieTbiHpMrYUI/WbjhXJQr7lI4VngixTgaG+yHX+NBCv7nW4hA0ShbvaNKw==
   dependencies:
     ajv "^5.3.0"
     babel-code-frame "^6.22.0"
@@ -2393,7 +4223,7 @@ eslint@4.14.0:
     concat-stream "^1.6.0"
     cross-spawn "^5.1.0"
     debug "^3.1.0"
-    doctrine "^2.0.2"
+    doctrine "^2.1.0"
     eslint-scope "^3.7.1"
     eslint-visitor-keys "^1.0.0"
     espree "^3.5.2"
@@ -2422,88 +4252,108 @@ eslint@4.14.0:
     semver "^5.3.0"
     strip-ansi "^4.0.0"
     strip-json-comments "~2.0.1"
-    table "^4.0.1"
+    table "4.0.2"
     text-table "~0.2.0"
 
 espree@^3.5.2:
-  version "3.5.2"
-  resolved "http://registry.npm.taobao.org/espree/download/espree-3.5.2.tgz#756ada8b979e9dcfcdb30aad8d1a9304a905e1ca"
+  version "3.5.4"
+  resolved "https://registry.yarnpkg.com/espree/-/espree-3.5.4.tgz#b0f447187c8a8bed944b815a660bddf5deb5d1a7"
+  integrity sha512-yAcIQxtmMiB/jL32dzEp2enBeidsB7xWPLNiw3IIkpVds1P+h7qF9YwJq1yUNzp2OKXgAprs4F61ih66UsoD1A==
   dependencies:
-    acorn "^5.2.1"
+    acorn "^5.5.0"
     acorn-jsx "^3.0.0"
 
-esprima@2.7.x, esprima@^2.1.0, esprima@^2.6.0, esprima@^2.7.1:
+esprima@2.7.x, esprima@^2.7.1:
   version "2.7.3"
   resolved "https://registry.yarnpkg.com/esprima/-/esprima-2.7.3.tgz#96e3b70d5779f6ad49cd032673d1c312767ba581"
+  integrity sha1-luO3DVd59q1JzQMmc9HDEnZ7pYE=
 
 esprima@^4.0.0:
-  version "4.0.0"
-  resolved "http://registry.npm.taobao.org/esprima/download/esprima-4.0.0.tgz#4499eddcd1110e0b218bacf2fa7f7f59f55ca804"
-
-esprima@~3.1.0:
-  version "3.1.2"
-  resolved "https://registry.yarnpkg.com/esprima/-/esprima-3.1.2.tgz#954b5d19321ca436092fa90f06d6798531fe8184"
+  version "4.0.1"
+  resolved "https://registry.yarnpkg.com/esprima/-/esprima-4.0.1.tgz#13b04cdb3e6c5d19df91ab6987a8695619b0aa71"
+  integrity sha512-eGuFFw7Upda+g4p+QHvnW0RyTX/SVeJBDM/gCtMARO0cLuT2HcEKnTPvhjV6aGeqrCB/sbNop0Kszm0jsaWU4A==
 
 esquery@^1.0.0:
-  version "1.0.0"
-  resolved "http://registry.npm.taobao.org/esquery/download/esquery-1.0.0.tgz#cfba8b57d7fba93f17298a8a006a04cda13d80fa"
+  version "1.0.1"
+  resolved "https://registry.yarnpkg.com/esquery/-/esquery-1.0.1.tgz#406c51658b1f5991a5f9b62b1dc25b00e3e5c708"
+  integrity sha512-SmiyZ5zIWH9VM+SRUReLS5Q8a7GxtRdxEBVZpm98rJM7Sb+A9DVCndXfkeFUd3byderg+EbDkfnevfCwynWaNA==
   dependencies:
     estraverse "^4.0.0"
 
 esrecurse@^4.1.0:
-  version "4.2.0"
-  resolved "http://registry.npm.taobao.org/esrecurse/download/esrecurse-4.2.0.tgz#fa9568d98d3823f9a41d91e902dcab9ea6e5b163"
+  version "4.2.1"
+  resolved "https://registry.yarnpkg.com/esrecurse/-/esrecurse-4.2.1.tgz#007a3b9fdbc2b3bb87e4879ea19c92fdbd3942cf"
+  integrity sha512-64RBB++fIOAXPw3P9cy89qfMlvZEXZkqqJkjqqXIvzP5ezRZjW+lPWjw35UX/3EhUPFYbg5ER4JYgDw4007/DQ==
   dependencies:
     estraverse "^4.1.0"
-    object-assign "^4.0.1"
 
 estraverse@^1.9.1:
   version "1.9.3"
   resolved "https://registry.yarnpkg.com/estraverse/-/estraverse-1.9.3.tgz#af67f2dc922582415950926091a4005d29c9bb44"
+  integrity sha1-r2fy3JIlgkFZUJJgkaQAXSnJu0Q=
 
 estraverse@^4.0.0, estraverse@^4.1.0, estraverse@^4.1.1:
   version "4.2.0"
   resolved "https://registry.yarnpkg.com/estraverse/-/estraverse-4.2.0.tgz#0dee3fed31fcd469618ce7342099fc1afa0bdb13"
+  integrity sha1-De4/7TH81GlhjOc0IJn8GvoL2xM=
 
 esutils@^2.0.2:
   version "2.0.2"
-  resolved "http://registry.npm.taobao.org/esutils/download/esutils-2.0.2.tgz#0abf4f1caa5bcb1f7a9d8acc6dea4faaa04bac9b"
+  resolved "https://registry.yarnpkg.com/esutils/-/esutils-2.0.2.tgz#0abf4f1caa5bcb1f7a9d8acc6dea4faaa04bac9b"
+  integrity sha1-Cr9PHKpbyx96nYrMbepPqqBLrJs=
 
-etag@~1.7.0:
-  version "1.7.0"
-  resolved "https://registry.yarnpkg.com/etag/-/etag-1.7.0.tgz#03d30b5f67dd6e632d2945d30d6652731a34d5d8"
-
-event-emitter@~0.3.4:
-  version "0.3.4"
-  resolved "https://registry.yarnpkg.com/event-emitter/-/event-emitter-0.3.4.tgz#8d63ddfb4cfe1fae3b32ca265c4c720222080bb5"
-  dependencies:
-    d "~0.1.1"
-    es5-ext "~0.10.7"
+etag@~1.8.1:
+  version "1.8.1"
+  resolved "https://registry.yarnpkg.com/etag/-/etag-1.8.1.tgz#41ae2eeb65efa62268aebfea83ac7d79299b0887"
+  integrity sha1-Qa4u62XvpiJorr/qg6x9eSmbCIc=
 
-eventemitter3@1.x.x:
-  version "1.2.0"
-  resolved "https://registry.yarnpkg.com/eventemitter3/-/eventemitter3-1.2.0.tgz#1c86991d816ad1e504750e73874224ecf3bec508"
+eventemitter3@^3.0.0:
+  version "3.1.0"
+  resolved "https://registry.yarnpkg.com/eventemitter3/-/eventemitter3-3.1.0.tgz#090b4d6cdbd645ed10bf750d4b5407942d7ba163"
+  integrity sha512-ivIvhpq/Y0uSjcHDcOIccjmYjGLcP09MFGE7ysAwkAvkXfpZlC985pH2/ui64DKazbTW/4kN3yqozUxlXzI6cA==
 
-events@^1.0.0, events@^1.1.0:
+events@^1.1.0:
   version "1.1.1"
   resolved "https://registry.yarnpkg.com/events/-/events-1.1.1.tgz#9ebdb7635ad099c70dcc4c2a1f5004288e8bd924"
+  integrity sha1-nr23Y1rQmccNzEwqH1AEKI6L2SQ=
 
-eventsource@0.1.6:
-  version "0.1.6"
-  resolved "https://registry.yarnpkg.com/eventsource/-/eventsource-0.1.6.tgz#0acede849ed7dd1ccc32c811bb11b944d4f29232"
+events@^3.0.0:
+  version "3.0.0"
+  resolved "https://registry.yarnpkg.com/events/-/events-3.0.0.tgz#9a0a0dfaf62893d92b875b8f2698ca4114973e88"
+  integrity sha512-Dc381HFWJzEOhQ+d8pkNon++bk9h6cdAoAj4iE6Q4y6xgTzySWXlKn05/TVNpjnfRqi/X0EpJEJohPjNI3zpVA==
+
+eventsource@^1.0.7:
+  version "1.0.7"
+  resolved "https://registry.yarnpkg.com/eventsource/-/eventsource-1.0.7.tgz#8fbc72c93fcd34088090bc0a4e64f4b5cee6d8d0"
+  integrity sha512-4Ln17+vVT0k8aWq+t/bF5arcS3EpT9gYtW66EPacdj/mAFevznsnyoHLPy2BA8gbIQeIHoPsvwmfBftfcG//BQ==
   dependencies:
-    original ">=0.0.5"
+    original "^1.0.0"
 
 evp_bytestokey@^1.0.0, evp_bytestokey@^1.0.3:
   version "1.0.3"
   resolved "https://registry.yarnpkg.com/evp_bytestokey/-/evp_bytestokey-1.0.3.tgz#7fcbdb198dc71959432efe13842684e0525acb02"
+  integrity sha512-/f2Go4TognH/KvCISP7OUsHn85hT9nUkxxA9BEWxFn+Oj9o8ZNLm/40hdlgSLyuOimsrTKLUMEorQexp/aPQeA==
   dependencies:
     md5.js "^1.3.4"
     safe-buffer "^5.1.1"
 
+execa@^0.10.0:
+  version "0.10.0"
+  resolved "https://registry.yarnpkg.com/execa/-/execa-0.10.0.tgz#ff456a8f53f90f8eccc71a96d11bdfc7f082cb50"
+  integrity sha512-7XOMnz8Ynx1gGo/3hyV9loYNPWM94jG3+3T3Y8tsfSstFmETmENCMU/A/zj8Lyaj1lkgEepKepvd6240tBRvlw==
+  dependencies:
+    cross-spawn "^6.0.0"
+    get-stream "^3.0.0"
+    is-stream "^1.1.0"
+    npm-run-path "^2.0.0"
+    p-finally "^1.0.0"
+    signal-exit "^3.0.0"
+    strip-eof "^1.0.0"
+
 execa@^0.7.0:
   version "0.7.0"
   resolved "https://registry.yarnpkg.com/execa/-/execa-0.7.0.tgz#944becd34cc41ee32a63a9faf27ad5a65fc59777"
+  integrity sha1-lEvs00zEHuMqY6n68nrVpl/Fl3c=
   dependencies:
     cross-spawn "^5.0.1"
     get-stream "^3.0.0"
@@ -2513,204 +4363,323 @@ execa@^0.7.0:
     signal-exit "^3.0.0"
     strip-eof "^1.0.0"
 
-exit@0.1.2, exit@0.1.x:
-  version "0.1.2"
-  resolved "http://registry.npm.taobao.org/exit/download/exit-0.1.2.tgz#0632638f8d877cc82107d30a0fff1a17cba1cd0c"
-
-expand-braces@^0.1.1:
-  version "0.1.2"
-  resolved "https://registry.yarnpkg.com/expand-braces/-/expand-braces-0.1.2.tgz#488b1d1d2451cb3d3a6b192cfc030f44c5855fea"
+execa@^1.0.0:
+  version "1.0.0"
+  resolved "https://registry.yarnpkg.com/execa/-/execa-1.0.0.tgz#c6236a5bb4df6d6f15e88e7f017798216749ddd8"
+  integrity sha512-adbxcyWV46qiHyvSp50TKt05tB4tK3HcmF7/nxfAdhnox83seTDbwnaqKO4sXRy7roHAIFqJP/Rw/AuEbX61LA==
   dependencies:
-    array-slice "^0.2.3"
-    array-unique "^0.2.1"
-    braces "^0.1.2"
+    cross-spawn "^6.0.0"
+    get-stream "^4.0.0"
+    is-stream "^1.1.0"
+    npm-run-path "^2.0.0"
+    p-finally "^1.0.0"
+    signal-exit "^3.0.0"
+    strip-eof "^1.0.0"
 
 expand-brackets@^0.1.4:
   version "0.1.5"
   resolved "https://registry.yarnpkg.com/expand-brackets/-/expand-brackets-0.1.5.tgz#df07284e342a807cd733ac5af72411e581d1177b"
+  integrity sha1-3wcoTjQqgHzXM6xa9yQR5YHRF3s=
   dependencies:
     is-posix-bracket "^0.1.0"
 
-expand-range@^0.1.0:
-  version "0.1.1"
-  resolved "https://registry.yarnpkg.com/expand-range/-/expand-range-0.1.1.tgz#4cb8eda0993ca56fa4f41fc42f3cbb4ccadff044"
+expand-brackets@^2.1.4:
+  version "2.1.4"
+  resolved "https://registry.yarnpkg.com/expand-brackets/-/expand-brackets-2.1.4.tgz#b77735e315ce30f6b6eff0f83b04151a22449622"
+  integrity sha1-t3c14xXOMPa27/D4OwQVGiJEliI=
   dependencies:
-    is-number "^0.1.1"
-    repeat-string "^0.2.2"
+    debug "^2.3.3"
+    define-property "^0.2.5"
+    extend-shallow "^2.0.1"
+    posix-character-classes "^0.1.0"
+    regex-not "^1.0.0"
+    snapdragon "^0.8.1"
+    to-regex "^3.0.1"
 
 expand-range@^1.8.1:
   version "1.8.2"
   resolved "https://registry.yarnpkg.com/expand-range/-/expand-range-1.8.2.tgz#a299effd335fe2721ebae8e257ec79644fc85337"
+  integrity sha1-opnv/TNf4nIeuujiV+x5ZE/IUzc=
   dependencies:
     fill-range "^2.1.0"
 
-expand-tilde@^1.2.1, expand-tilde@^1.2.2:
-  version "1.2.2"
-  resolved "https://registry.yarnpkg.com/expand-tilde/-/expand-tilde-1.2.2.tgz#0b81eba897e5a3d31d1c3d102f8f01441e559449"
+expand-tilde@^2.0.0, expand-tilde@^2.0.2:
+  version "2.0.2"
+  resolved "https://registry.yarnpkg.com/expand-tilde/-/expand-tilde-2.0.2.tgz#97e801aa052df02454de46b02bf621642cdc8502"
+  integrity sha1-l+gBqgUt8CRU3kawK/YhZCzchQI=
   dependencies:
-    os-homedir "^1.0.1"
+    homedir-polyfill "^1.0.1"
 
-express@^4.13.3:
-  version "4.14.0"
-  resolved "https://registry.yarnpkg.com/express/-/express-4.14.0.tgz#c1ee3f42cdc891fb3dc650a8922d51ec847d0d66"
+express@^4.16.2:
+  version "4.16.4"
+  resolved "https://registry.yarnpkg.com/express/-/express-4.16.4.tgz#fddef61926109e24c515ea97fd2f1bdbf62df12e"
+  integrity sha512-j12Uuyb4FMrd/qQAm6uCHAkPtO8FDTRJZBDd5D2KOL2eLaz1yUNdUB/NOIyq0iU4q4cFarsUCrnFDPBcnksuOg==
   dependencies:
-    accepts "~1.3.3"
+    accepts "~1.3.5"
     array-flatten "1.1.1"
-    content-disposition "0.5.1"
-    content-type "~1.0.2"
+    body-parser "1.18.3"
+    content-disposition "0.5.2"
+    content-type "~1.0.4"
     cookie "0.3.1"
     cookie-signature "1.0.6"
-    debug "~2.2.0"
-    depd "~1.1.0"
-    encodeurl "~1.0.1"
+    debug "2.6.9"
+    depd "~1.1.2"
+    encodeurl "~1.0.2"
     escape-html "~1.0.3"
-    etag "~1.7.0"
-    finalhandler "0.5.0"
-    fresh "0.3.0"
+    etag "~1.8.1"
+    finalhandler "1.1.1"
+    fresh "0.5.2"
     merge-descriptors "1.0.1"
     methods "~1.1.2"
     on-finished "~2.3.0"
-    parseurl "~1.3.1"
+    parseurl "~1.3.2"
     path-to-regexp "0.1.7"
-    proxy-addr "~1.1.2"
-    qs "6.2.0"
+    proxy-addr "~2.0.4"
+    qs "6.5.2"
     range-parser "~1.2.0"
-    send "0.14.1"
-    serve-static "~1.11.1"
-    type-is "~1.6.13"
-    utils-merge "1.0.0"
-    vary "~1.1.0"
+    safe-buffer "5.1.2"
+    send "0.16.2"
+    serve-static "1.13.2"
+    setprototypeof "1.1.0"
+    statuses "~1.4.0"
+    type-is "~1.6.16"
+    utils-merge "1.0.1"
+    vary "~1.1.2"
+
+extend-shallow@^2.0.1:
+  version "2.0.1"
+  resolved "https://registry.yarnpkg.com/extend-shallow/-/extend-shallow-2.0.1.tgz#51af7d614ad9a9f610ea1bafbb989d6b1c56890f"
+  integrity sha1-Ua99YUrZqfYQ6huvu5idaxxWiQ8=
+  dependencies:
+    is-extendable "^0.1.0"
 
-extend@^3.0.0, extend@~3.0.0:
-  version "3.0.0"
-  resolved "https://registry.yarnpkg.com/extend/-/extend-3.0.0.tgz#5a474353b9f3353ddd8176dfd37b91c83a46f1d4"
+extend-shallow@^3.0.0, extend-shallow@^3.0.2:
+  version "3.0.2"
+  resolved "https://registry.yarnpkg.com/extend-shallow/-/extend-shallow-3.0.2.tgz#26a71aaf073b39fb2127172746131c2704028db8"
+  integrity sha1-Jqcarwc7OfshJxcnRhMcJwQCjbg=
+  dependencies:
+    assign-symbols "^1.0.0"
+    is-extendable "^1.0.1"
+
+extend@^3.0.0, extend@~3.0.2:
+  version "3.0.2"
+  resolved "https://registry.yarnpkg.com/extend/-/extend-3.0.2.tgz#f8b1136b4071fbd8eb140aff858b1019ec2915fa"
+  integrity sha512-fjquC59cD7CyW6urNXK0FBufkZcoiGG80wTuPujX590cB5Ttln20E2UB4S/WARVqhXffZl2LNgS+gQdPIIim/g==
 
 external-editor@^2.0.4:
-  version "2.1.0"
-  resolved "http://registry.npm.taobao.org/external-editor/download/external-editor-2.1.0.tgz#3d026a21b7f95b5726387d4200ac160d372c3b48"
+  version "2.2.0"
+  resolved "https://registry.yarnpkg.com/external-editor/-/external-editor-2.2.0.tgz#045511cfd8d133f3846673d1047c154e214ad3d5"
+  integrity sha512-bSn6gvGxKt+b7+6TKEv1ZycHleA7aHhRHyAqJyp5pbUFuYYNIzpZnQDk7AsYckyWdEnTeAnay0aCy2aV6iTk9A==
   dependencies:
     chardet "^0.4.0"
     iconv-lite "^0.4.17"
     tmp "^0.0.33"
 
+external-editor@^3.0.3:
+  version "3.0.3"
+  resolved "https://registry.yarnpkg.com/external-editor/-/external-editor-3.0.3.tgz#5866db29a97826dbe4bf3afd24070ead9ea43a27"
+  integrity sha512-bn71H9+qWoOQKyZDo25mOMVpSmXROAsTJVVVYzrrtol3d4y+AsKjf4Iwl2Q+IuT0kFSQ1qo166UuIwqYq7mGnA==
+  dependencies:
+    chardet "^0.7.0"
+    iconv-lite "^0.4.24"
+    tmp "^0.0.33"
+
 extglob@^0.3.1:
   version "0.3.2"
   resolved "https://registry.yarnpkg.com/extglob/-/extglob-0.3.2.tgz#2e18ff3d2f49ab2765cec9023f011daa8d8349a1"
+  integrity sha1-Lhj/PS9JqydlzskCPwEdqo2DSaE=
   dependencies:
     is-extglob "^1.0.0"
 
-extract-text-webpack-plugin@^3.0.1:
-  version "3.0.1"
-  resolved "https://registry.yarnpkg.com/extract-text-webpack-plugin/-/extract-text-webpack-plugin-3.0.1.tgz#605a8893faca1dd49bb0d2ca87493f33fd43d102"
-  dependencies:
-    async "^2.4.1"
-    loader-utils "^1.1.0"
-    schema-utils "^0.3.0"
-    webpack-sources "^1.0.1"
+extglob@^2.0.4:
+  version "2.0.4"
+  resolved "https://registry.yarnpkg.com/extglob/-/extglob-2.0.4.tgz#ad00fe4dc612a9232e8718711dc5cb5ab0285543"
+  integrity sha512-Nmb6QXkELsuBr24CJSkilo6UHHgbekK5UiZgfE6UHD3Eb27YC6oD+bhcT+tJ6cl8dmsgdQxnWlcry8ksBIBLpw==
+  dependencies:
+    array-unique "^0.3.2"
+    define-property "^1.0.0"
+    expand-brackets "^2.1.4"
+    extend-shallow "^2.0.1"
+    fragment-cache "^0.2.1"
+    regex-not "^1.0.0"
+    snapdragon "^0.8.1"
+    to-regex "^3.0.1"
+
+extsprintf@1.3.0:
+  version "1.3.0"
+  resolved "https://registry.yarnpkg.com/extsprintf/-/extsprintf-1.3.0.tgz#96918440e3041a7a414f8c52e3c574eb3c3e1e05"
+  integrity sha1-lpGEQOMEGnpBT4xS48V06zw+HgU=
 
-extsprintf@1.0.2:
-  version "1.0.2"
-  resolved "https://registry.yarnpkg.com/extsprintf/-/extsprintf-1.0.2.tgz#e1080e0658e300b06294990cc70e1502235fd550"
+extsprintf@^1.2.0:
+  version "1.4.0"
+  resolved "https://registry.yarnpkg.com/extsprintf/-/extsprintf-1.4.0.tgz#e2689f8f356fad62cca65a3a91c5df5f9551692f"
+  integrity sha1-4mifjzVvrWLMplo6kcXfX5VRaS8=
 
-fancy-log@^1.1.0:
-  version "1.2.0"
-  resolved "https://registry.yarnpkg.com/fancy-log/-/fancy-log-1.2.0.tgz#d5a51b53e9ab22ca07d558f2b67ae55fdb5fcbd8"
+fancy-log@^1.3.2:
+  version "1.3.3"
+  resolved "https://registry.yarnpkg.com/fancy-log/-/fancy-log-1.3.3.tgz#dbc19154f558690150a23953a0adbd035be45fc7"
+  integrity sha512-k9oEhlyc0FrVh25qYuSELjr8oxsCoc4/LEZfg2iJJrfEk/tZL9bCoJE47gqAvI2m/AUjluCS4+3I0eTx8n3AEw==
   dependencies:
-    chalk "^1.1.1"
+    ansi-gray "^0.1.1"
+    color-support "^1.1.3"
+    parse-node-version "^1.0.0"
     time-stamp "^1.0.0"
 
 fast-deep-equal@^1.0.0:
-  version "1.0.0"
-  resolved "http://registry.npm.taobao.org/fast-deep-equal/download/fast-deep-equal-1.0.0.tgz#96256a3bc975595eb36d82e9929d060d893439ff"
+  version "1.1.0"
+  resolved "https://registry.yarnpkg.com/fast-deep-equal/-/fast-deep-equal-1.1.0.tgz#c053477817c86b51daa853c81e059b733d023614"
+  integrity sha1-wFNHeBfIa1HaqFPIHgWbcz0CNhQ=
+
+fast-deep-equal@^2.0.1:
+  version "2.0.1"
+  resolved "https://registry.yarnpkg.com/fast-deep-equal/-/fast-deep-equal-2.0.1.tgz#7b05218ddf9667bf7f370bf7fdb2cb15fdd0aa49"
+  integrity sha1-ewUhjd+WZ79/Nwv3/bLLFf3Qqkk=
+
+fast-deep-equal@^3.1.1:
+  version "3.1.3"
+  resolved "https://registry.npm.taobao.org/fast-deep-equal/download/fast-deep-equal-3.1.3.tgz#3a7d56b559d6cbc3eb512325244e619a65c6c525"
+  integrity sha1-On1WtVnWy8PrUSMlJE5hmmXGxSU=
 
 fast-json-stable-stringify@^2.0.0:
   version "2.0.0"
-  resolved "http://registry.npm.taobao.org/fast-json-stable-stringify/download/fast-json-stable-stringify-2.0.0.tgz#d5142c0caee6b1189f87d3a76111064f86c8bbf2"
+  resolved "https://registry.yarnpkg.com/fast-json-stable-stringify/-/fast-json-stable-stringify-2.0.0.tgz#d5142c0caee6b1189f87d3a76111064f86c8bbf2"
+  integrity sha1-1RQsDK7msRifh9OnYREGT4bIu/I=
 
 fast-levenshtein@~2.0.4:
   version "2.0.6"
-  resolved "http://registry.npm.taobao.org/fast-levenshtein/download/fast-levenshtein-2.0.6.tgz#3d8a5c66883a16a30ca8643e851f19baa7797917"
+  resolved "https://registry.yarnpkg.com/fast-levenshtein/-/fast-levenshtein-2.0.6.tgz#3d8a5c66883a16a30ca8643e851f19baa7797917"
+  integrity sha1-PYpcZog6FqMMqGQ+hR8Zuqd5eRc=
 
 fastparse@^1.1.1:
-  version "1.1.1"
-  resolved "https://registry.yarnpkg.com/fastparse/-/fastparse-1.1.1.tgz#d1e2643b38a94d7583b479060e6c4affc94071f8"
+  version "1.1.2"
+  resolved "https://registry.yarnpkg.com/fastparse/-/fastparse-1.1.2.tgz#91728c5a5942eced8531283c79441ee4122c35a9"
+  integrity sha512-483XLLxTVIwWK3QTrMGRqUfUpoOs/0hbQrl2oz4J0pAcm3A3bu84wxTFqGqkJzewCLdME38xJLJAxBABfQT8sQ==
 
 faye-websocket@^0.10.0:
   version "0.10.0"
   resolved "https://registry.yarnpkg.com/faye-websocket/-/faye-websocket-0.10.0.tgz#4e492f8d04dfb6f89003507f6edbf2d501e7c6f4"
+  integrity sha1-TkkvjQTftviQA1B/btvy1QHnxvQ=
   dependencies:
     websocket-driver ">=0.5.1"
 
-faye-websocket@~0.11.0:
-  version "0.11.0"
-  resolved "https://registry.yarnpkg.com/faye-websocket/-/faye-websocket-0.11.0.tgz#d9ccf0e789e7db725d74bc4877d23aa42972ac50"
+faye-websocket@~0.11.1:
+  version "0.11.1"
+  resolved "https://registry.yarnpkg.com/faye-websocket/-/faye-websocket-0.11.1.tgz#f0efe18c4f56e4f40afc7e06c719fd5ee6188f38"
+  integrity sha1-8O/hjE9W5PQK/H4Gxxn9XuYYjzg=
   dependencies:
     websocket-driver ">=0.5.1"
 
+figgy-pudding@^3.4.1, figgy-pudding@^3.5.1:
+  version "3.5.1"
+  resolved "https://registry.yarnpkg.com/figgy-pudding/-/figgy-pudding-3.5.1.tgz#862470112901c727a0e495a80744bd5baa1d6790"
+  integrity sha512-vNKxJHTEKNThjfrdJwHc7brvM6eVevuO5nTj6ez8ZQ1qbXTvGthucRF7S4vf2cr71QVnT70V34v0S1DyQsti0w==
+
+figures@3.0.0:
+  version "3.0.0"
+  resolved "https://registry.npmjs.org/figures/-/figures-3.0.0.tgz#756275c964646163cc6f9197c7a0295dbfd04de9"
+  integrity sha512-HKri+WoWoUgr83pehn/SIgLOMZ9nAWC6dcGj26RY2R4F50u4+RTUz0RCrUlOV3nKRAICW1UGzyb+kcX2qK1S/g==
+  dependencies:
+    escape-string-regexp "^1.0.5"
+
 figures@^2.0.0:
   version "2.0.0"
-  resolved "http://registry.npm.taobao.org/figures/download/figures-2.0.0.tgz#3ab1a2d2a62c8bfb431a0c94cb797a2fce27c962"
+  resolved "https://registry.yarnpkg.com/figures/-/figures-2.0.0.tgz#3ab1a2d2a62c8bfb431a0c94cb797a2fce27c962"
+  integrity sha1-OrGi0qYsi/tDGgyUy3l6L84nyWI=
   dependencies:
     escape-string-regexp "^1.0.5"
 
 file-entry-cache@^2.0.0:
   version "2.0.0"
-  resolved "http://registry.npm.taobao.org/file-entry-cache/download/file-entry-cache-2.0.0.tgz#c392990c3e684783d838b8c84a45d8a048458361"
+  resolved "https://registry.yarnpkg.com/file-entry-cache/-/file-entry-cache-2.0.0.tgz#c392990c3e684783d838b8c84a45d8a048458361"
+  integrity sha1-w5KZDD5oR4PYOLjISkXYoEhFg2E=
   dependencies:
     flat-cache "^1.2.1"
     object-assign "^4.0.1"
 
-file-loader@^1.1.5:
-  version "1.1.5"
-  resolved "https://registry.yarnpkg.com/file-loader/-/file-loader-1.1.5.tgz#91c25b6b6fbe56dae99f10a425fd64933b5c9daa"
+file-loader@^1.1.11:
+  version "1.1.11"
+  resolved "https://registry.yarnpkg.com/file-loader/-/file-loader-1.1.11.tgz#6fe886449b0f2a936e43cabaac0cdbfb369506f8"
+  integrity sha512-TGR4HU7HUsGg6GCOPJnFk06RhWgEWFLAGWiT6rcD+GRC2keU3s9RGJ+b3Z6/U73jwwNb2gKLJ7YCrp+jvU4ALg==
   dependencies:
     loader-utils "^1.0.2"
-    schema-utils "^0.3.0"
+    schema-utils "^0.4.5"
 
 file-save@^0.2.0:
   version "0.2.0"
   resolved "https://registry.yarnpkg.com/file-save/-/file-save-0.2.0.tgz#39b20d0214e656b1417faa3c32d317b678545db7"
+  integrity sha1-ObINAhTmVrFBf6o8MtMXtnhUXbc=
   dependencies:
     mkdirp "~0.5.0"
 
 filename-regex@^2.0.0:
-  version "2.0.0"
-  resolved "https://registry.yarnpkg.com/filename-regex/-/filename-regex-2.0.0.tgz#996e3e80479b98b9897f15a8a58b3d084e926775"
+  version "2.0.1"
+  resolved "https://registry.yarnpkg.com/filename-regex/-/filename-regex-2.0.1.tgz#c1c4b9bee3e09725ddb106b75c1e301fe2f18b26"
+  integrity sha1-wcS5vuPglyXdsQa3XB4wH+LxiyY=
 
 filesize@~2.0.0:
   version "2.0.4"
   resolved "https://registry.yarnpkg.com/filesize/-/filesize-2.0.4.tgz#7805941c60fcdfe63f46d7ea358c59ade11c1325"
+  integrity sha1-eAWUHGD83+Y/RtfqNYxZreEcEyU=
 
 fill-range@^2.1.0:
-  version "2.2.3"
-  resolved "https://registry.yarnpkg.com/fill-range/-/fill-range-2.2.3.tgz#50b77dfd7e469bc7492470963699fe7a8485a723"
+  version "2.2.4"
+  resolved "https://registry.yarnpkg.com/fill-range/-/fill-range-2.2.4.tgz#eb1e773abb056dcd8df2bfdf6af59b8b3a936565"
+  integrity sha512-cnrcCbj01+j2gTG921VZPnHbjmdAf8oQV/iGeV2kZxGSyfYjjTyY79ErsK1WJWMpw6DaApEX72binqJE+/d+5Q==
   dependencies:
     is-number "^2.1.0"
     isobject "^2.0.0"
-    randomatic "^1.1.3"
+    randomatic "^3.0.0"
     repeat-element "^1.1.2"
     repeat-string "^1.5.2"
 
-finalhandler@0.5.0:
-  version "0.5.0"
-  resolved "https://registry.yarnpkg.com/finalhandler/-/finalhandler-0.5.0.tgz#e9508abece9b6dba871a6942a1d7911b91911ac7"
+fill-range@^4.0.0:
+  version "4.0.0"
+  resolved "https://registry.yarnpkg.com/fill-range/-/fill-range-4.0.0.tgz#d544811d428f98eb06a63dc402d2403c328c38f7"
+  integrity sha1-1USBHUKPmOsGpj3EAtJAPDKMOPc=
+  dependencies:
+    extend-shallow "^2.0.1"
+    is-number "^3.0.0"
+    repeat-string "^1.6.1"
+    to-regex-range "^2.1.0"
+
+finalhandler@1.1.0:
+  version "1.1.0"
+  resolved "https://registry.yarnpkg.com/finalhandler/-/finalhandler-1.1.0.tgz#ce0b6855b45853e791b2fcc680046d88253dd7f5"
+  integrity sha1-zgtoVbRYU+eRsvzGgARtiCU91/U=
+  dependencies:
+    debug "2.6.9"
+    encodeurl "~1.0.1"
+    escape-html "~1.0.3"
+    on-finished "~2.3.0"
+    parseurl "~1.3.2"
+    statuses "~1.3.1"
+    unpipe "~1.0.0"
+
+finalhandler@1.1.1:
+  version "1.1.1"
+  resolved "https://registry.yarnpkg.com/finalhandler/-/finalhandler-1.1.1.tgz#eebf4ed840079c83f4249038c9d703008301b105"
+  integrity sha512-Y1GUDo39ez4aHAw7MysnUD5JzYX+WaIj8I57kO3aEPT1fFRL4sr7mjei97FgnwhAyyzRYmQZaTHb2+9uZ1dPtg==
   dependencies:
-    debug "~2.2.0"
+    debug "2.6.9"
+    encodeurl "~1.0.2"
     escape-html "~1.0.3"
     on-finished "~2.3.0"
-    statuses "~1.3.0"
+    parseurl "~1.3.2"
+    statuses "~1.4.0"
     unpipe "~1.0.0"
 
 find-babel-config@^1.0.1:
-  version "1.0.1"
-  resolved "https://registry.yarnpkg.com/find-babel-config/-/find-babel-config-1.0.1.tgz#179fa7b36bf3e94b487410855df448b6f853b9ec"
+  version "1.1.0"
+  resolved "https://registry.yarnpkg.com/find-babel-config/-/find-babel-config-1.1.0.tgz#acc01043a6749fec34429be6b64f542ebb5d6355"
+  integrity sha1-rMAQQ6Z0n+w0Qpvmtk9ULrtdY1U=
   dependencies:
-    json5 "^0.5.0"
+    json5 "^0.5.1"
     path-exists "^3.0.0"
 
 find-cache-dir@^0.1.1:
   version "0.1.1"
-  resolved "http://registry.npmjs.org/find-cache-dir/-/find-cache-dir-0.1.1.tgz#c8defae57c8a52a8a784f9e31c57c742e993a0b9"
+  resolved "https://registry.yarnpkg.com/find-cache-dir/-/find-cache-dir-0.1.1.tgz#c8defae57c8a52a8a784f9e31c57c742e993a0b9"
+  integrity sha1-yN765XyKUqinhPnjHFfHQumToLk=
   dependencies:
     commondir "^1.0.1"
     mkdirp "^0.5.1"
@@ -2718,243 +4687,312 @@ find-cache-dir@^0.1.1:
 
 find-cache-dir@^1.0.0:
   version "1.0.0"
-  resolved "http://registry.npm.taobao.org/find-cache-dir/download/find-cache-dir-1.0.0.tgz#9288e3e9e3cc3748717d39eade17cf71fc30ee6f"
+  resolved "https://registry.yarnpkg.com/find-cache-dir/-/find-cache-dir-1.0.0.tgz#9288e3e9e3cc3748717d39eade17cf71fc30ee6f"
+  integrity sha1-kojj6ePMN0hxfTnq3hfPcfww7m8=
   dependencies:
     commondir "^1.0.1"
     make-dir "^1.0.0"
     pkg-dir "^2.0.0"
 
-find-index@^0.1.1:
-  version "0.1.1"
-  resolved "https://registry.yarnpkg.com/find-index/-/find-index-0.1.1.tgz#675d358b2ca3892d795a1ab47232f8b6e2e0dde4"
+find-cache-dir@^2.0.0:
+  version "2.0.0"
+  resolved "https://registry.yarnpkg.com/find-cache-dir/-/find-cache-dir-2.0.0.tgz#4c1faed59f45184530fb9d7fa123a4d04a98472d"
+  integrity sha512-LDUY6V1Xs5eFskUVYtIwatojt6+9xC9Chnlk/jYOOvn3FAFfSaWddxahDGyNHh0b2dMXa6YW2m0tk8TdVaXHlA==
+  dependencies:
+    commondir "^1.0.1"
+    make-dir "^1.0.0"
+    pkg-dir "^3.0.0"
+
+find-npm-prefix@^1.0.2:
+  version "1.0.2"
+  resolved "https://registry.npm.taobao.org/find-npm-prefix/download/find-npm-prefix-1.0.2.tgz#8d8ce2c78b3b4b9e66c8acc6a37c231eb841cfdf"
+  integrity sha1-jYzix4s7S55myKzGo3wjHrhBz98=
+
+find-up@4.1.0, find-up@^4.0.0:
+  version "4.1.0"
+  resolved "https://registry.npmjs.org/find-up/-/find-up-4.1.0.tgz#97afe7d6cdc0bc5928584b7c8d7b16e8a9aa5d19"
+  integrity sha512-PpOwAdQ/YlXQ2vj8a3h8IipDuYRi3wceVQQGYWxNINccq40Anw7BlsEXCMbt1Zt+OLA6Fq9suIpIWD0OsnISlw==
+  dependencies:
+    locate-path "^5.0.0"
+    path-exists "^4.0.0"
 
 find-up@^1.0.0:
   version "1.1.2"
   resolved "https://registry.yarnpkg.com/find-up/-/find-up-1.1.2.tgz#6b2e9822b1a2ce0a60ab64d610eccad53cb24d0f"
+  integrity sha1-ay6YIrGizgpgq2TWEOzK1TyyTQ8=
   dependencies:
     path-exists "^2.0.0"
     pinkie-promise "^2.0.0"
 
 find-up@^2.0.0, find-up@^2.1.0:
   version "2.1.0"
-  resolved "http://registry.npm.taobao.org/find-up/download/find-up-2.1.0.tgz#45d1b7e506c717ddd482775a2b77920a3c0c57a7"
+  resolved "https://registry.yarnpkg.com/find-up/-/find-up-2.1.0.tgz#45d1b7e506c717ddd482775a2b77920a3c0c57a7"
+  integrity sha1-RdG35QbHF93UgndaK3eSCjwMV6c=
   dependencies:
     locate-path "^2.0.0"
 
-findup-sync@^0.4.2:
-  version "0.4.3"
-  resolved "https://registry.yarnpkg.com/findup-sync/-/findup-sync-0.4.3.tgz#40043929e7bc60adf0b7f4827c4c6e75a0deca12"
+find-up@^3.0.0:
+  version "3.0.0"
+  resolved "https://registry.yarnpkg.com/find-up/-/find-up-3.0.0.tgz#49169f1d7993430646da61ecc5ae355c21c97b73"
+  integrity sha512-1yD6RmLI1XBfxugvORwlck6f75tYL+iR0jqwsOrOxMZyGYqUuDhJ0l4AXdO1iX/FTs9cBAMEk1gWSEx1kSbylg==
   dependencies:
-    detect-file "^0.1.0"
-    is-glob "^2.0.1"
-    micromatch "^2.3.7"
-    resolve-dir "^0.1.0"
+    locate-path "^3.0.0"
+
+findup-sync@2.0.0, findup-sync@^2.0.0:
+  version "2.0.0"
+  resolved "https://registry.yarnpkg.com/findup-sync/-/findup-sync-2.0.0.tgz#9326b1488c22d1a6088650a86901b2d9a90a2cbc"
+  integrity sha1-kyaxSIwi0aYIhlCoaQGy2akKLLw=
+  dependencies:
+    detect-file "^1.0.0"
+    is-glob "^3.1.0"
+    micromatch "^3.0.4"
+    resolve-dir "^1.0.1"
 
 fined@^1.0.1:
-  version "1.0.2"
-  resolved "https://registry.yarnpkg.com/fined/-/fined-1.0.2.tgz#5b28424b760d7598960b7ef8480dff8ad3660e97"
-  dependencies:
-    expand-tilde "^1.2.1"
-    lodash.assignwith "^4.0.7"
-    lodash.isempty "^4.2.1"
-    lodash.isplainobject "^4.0.4"
-    lodash.isstring "^4.0.1"
-    lodash.pick "^4.2.1"
+  version "1.1.1"
+  resolved "https://registry.yarnpkg.com/fined/-/fined-1.1.1.tgz#95d88ff329123dd1a6950fdfcd321f746271e01f"
+  integrity sha512-jQp949ZmEbiYHk3gkbdtpJ0G1+kgtLQBNdP5edFP7Fh+WAYceLQz6yO1SBj72Xkg8GVyTB3bBzAYrHJVh5Xd5g==
+  dependencies:
+    expand-tilde "^2.0.2"
+    is-plain-object "^2.0.3"
+    object.defaults "^1.1.0"
+    object.pick "^1.2.0"
     parse-filepath "^1.0.1"
 
-first-chunk-stream@^1.0.0:
-  version "1.0.0"
-  resolved "https://registry.yarnpkg.com/first-chunk-stream/-/first-chunk-stream-1.0.0.tgz#59bfb50cd905f60d7c394cd3d9acaab4e6ad934e"
+flagged-respawn@^1.0.0:
+  version "1.0.1"
+  resolved "https://registry.yarnpkg.com/flagged-respawn/-/flagged-respawn-1.0.1.tgz#e7de6f1279ddd9ca9aac8a5971d618606b3aab41"
+  integrity sha512-lNaHNVymajmk0OJMBn8fVUAU1BtDeKIqKoVhk4xAALB57aALg6b4W0MfJ/cUE0g9YBXy5XhSlPIpYIJ7HaY/3Q==
 
-flagged-respawn@^0.3.2:
-  version "0.3.2"
-  resolved "https://registry.yarnpkg.com/flagged-respawn/-/flagged-respawn-0.3.2.tgz#ff191eddcd7088a675b2610fffc976be9b8074b5"
+flat-cache@^1.2.1:
+  version "1.3.4"
+  resolved "https://registry.yarnpkg.com/flat-cache/-/flat-cache-1.3.4.tgz#2c2ef77525cc2929007dfffa1dd314aa9c9dee6f"
+  integrity sha512-VwyB3Lkgacfik2vhqR4uv2rvebqmDvFu4jlN/C1RzWoJEo8I7z4Q404oiqYCkq41mni8EzQnm95emU9seckwtg==
+  dependencies:
+    circular-json "^0.3.1"
+    graceful-fs "^4.1.2"
+    rimraf "~2.6.2"
+    write "^0.2.1"
+
+flat@^4.1.0:
+  version "4.1.0"
+  resolved "https://registry.npmjs.org/flat/-/flat-4.1.0.tgz#090bec8b05e39cba309747f1d588f04dbaf98db2"
+  integrity sha512-Px/TiLIznH7gEDlPXcUD4KnBusa6kR6ayRUVcnEAbreRIuhkqow/mun59BuRXwoYk7ZQOLW1ZM05ilIvK38hFw==
+  dependencies:
+    is-buffer "~2.0.3"
+
+flatted@^2.0.0:
+  version "2.0.0"
+  resolved "https://registry.npmjs.org/flatted/-/flatted-2.0.0.tgz#55122b6536ea496b4b44893ee2608141d10d9916"
+  integrity sha512-R+H8IZclI8AAkSBRQJLVOsxwAoHd6WC40b4QTNWIjzAa6BXOBfQcM587MXDTVPeYaopFNWHUFLx7eNmHDSxMWg==
+
+flush-write-stream@^1.0.0:
+  version "1.0.3"
+  resolved "https://registry.yarnpkg.com/flush-write-stream/-/flush-write-stream-1.0.3.tgz#c5d586ef38af6097650b49bc41b55fabb19f35bd"
+  integrity sha512-calZMC10u0FMUqoiunI2AiGIIUtUIvifNwkHhNupZH4cbNnW1Itkoh/Nf5HFYmDrwWPjrUxpkZT0KhuCq0jmGw==
+  dependencies:
+    inherits "^2.0.1"
+    readable-stream "^2.0.4"
+
+flush-write-stream@^1.0.2:
+  version "1.1.1"
+  resolved "https://registry.yarnpkg.com/flush-write-stream/-/flush-write-stream-1.1.1.tgz#8dd7d873a1babc207d94ead0c2e0e44276ebf2e8"
+  integrity sha512-3Z4XhFZ3992uIq0XOqb9AreonueSYphE6oYbpt5+3u06JWklbsPkNv3ZKkP9Bz/r+1MWCaMoSQ28P85+1Yc77w==
+  dependencies:
+    inherits "^2.0.3"
+    readable-stream "^2.3.6"
 
-flat-cache@^1.2.1:
-  version "1.3.0"
-  resolved "http://registry.npm.taobao.org/flat-cache/download/flat-cache-1.3.0.tgz#d3030b32b38154f4e3b7e9c709f490f7ef97c481"
+follow-redirects@1.5.10:
+  version "1.5.10"
+  resolved "https://registry.npm.taobao.org/follow-redirects/download/follow-redirects-1.5.10.tgz?cache=0&other_urls=https%3A%2F%2Fregistry.npm.taobao.org%2Ffollow-redirects%2Fdownload%2Ffollow-redirects-1.5.10.tgz#7b7a9f9aea2fdff36786a94ff643ed07f4ff5e2a"
+  integrity sha1-e3qfmuov3/NnhqlP9kPtB/T/Xio=
   dependencies:
-    circular-json "^0.3.1"
-    del "^2.0.2"
-    graceful-fs "^4.1.2"
-    write "^0.2.1"
+    debug "=3.1.0"
 
-flatten@^1.0.2:
-  version "1.0.2"
-  resolved "https://registry.yarnpkg.com/flatten/-/flatten-1.0.2.tgz#dae46a9d78fbe25292258cc1e780a41d95c03782"
+follow-redirects@^1.0.0:
+  version "1.6.1"
+  resolved "https://registry.yarnpkg.com/follow-redirects/-/follow-redirects-1.6.1.tgz#514973c44b5757368bad8bddfe52f81f015c94cb"
+  integrity sha512-t2JCjbzxQpWvbhts3l6SH1DKzSrx8a+SsaVf4h6bG4kOXUuPYS/kg2Lr4gQSb7eemaHqJkOThF1BGyjlUkO1GQ==
+  dependencies:
+    debug "=3.1.0"
 
-for-in@^0.1.3, for-in@^0.1.5:
-  version "0.1.6"
-  resolved "https://registry.yarnpkg.com/for-in/-/for-in-0.1.6.tgz#c9f96e89bfad18a545af5ec3ed352a1d9e5b4dc8"
+for-in@^0.1.3:
+  version "0.1.8"
+  resolved "https://registry.yarnpkg.com/for-in/-/for-in-0.1.8.tgz#d8773908e31256109952b1fdb9b3fa867d2775e1"
+  integrity sha1-2Hc5COMSVhCZUrH9ubP6hn0ndeE=
 
-for-in@^1.0.1:
+for-in@^1.0.1, for-in@^1.0.2:
   version "1.0.2"
   resolved "https://registry.yarnpkg.com/for-in/-/for-in-1.0.2.tgz#81068d295a8142ec0ac726c6e2200c30fb6d5e80"
+  integrity sha1-gQaNKVqBQuwKxybG4iAMMPttXoA=
 
 for-own@^0.1.4:
-  version "0.1.4"
-  resolved "https://registry.yarnpkg.com/for-own/-/for-own-0.1.4.tgz#0149b41a39088c7515f51ebe1c1386d45f935072"
+  version "0.1.5"
+  resolved "https://registry.yarnpkg.com/for-own/-/for-own-0.1.5.tgz#5265c681a4f294dabbf17c9509b6763aa84510ce"
+  integrity sha1-UmXGgaTylNq78XyVCbZ2OqhFEM4=
   dependencies:
-    for-in "^0.1.5"
+    for-in "^1.0.1"
 
 for-own@^1.0.0:
   version "1.0.0"
   resolved "https://registry.yarnpkg.com/for-own/-/for-own-1.0.0.tgz#c63332f415cedc4b04dbfe70cf836494c53cb44b"
+  integrity sha1-xjMy9BXO3EsE2/5wz4NklMU8tEs=
   dependencies:
     for-in "^1.0.1"
 
 foreach@^2.0.5:
   version "2.0.5"
   resolved "https://registry.yarnpkg.com/foreach/-/foreach-2.0.5.tgz#0bee005018aeb260d0a3af3ae658dd0136ec1b99"
+  integrity sha1-C+4AUBiusmDQo6865ljdATbsG5k=
 
 forever-agent@~0.6.1:
   version "0.6.1"
   resolved "https://registry.yarnpkg.com/forever-agent/-/forever-agent-0.6.1.tgz#fbc71f0c41adeb37f96c577ad1ed42d8fdacca91"
+  integrity sha1-+8cfDEGt6zf5bFd60e1C2P2sypE=
 
-form-data@~2.0.0:
-  version "2.0.0"
-  resolved "https://registry.yarnpkg.com/form-data/-/form-data-2.0.0.tgz#6f0aebadcc5da16c13e1ecc11137d85f9b883b25"
-  dependencies:
-    asynckit "^0.4.0"
-    combined-stream "^1.0.5"
-    mime-types "^2.1.11"
-
-form-data@~2.1.1:
-  version "2.1.2"
-  resolved "https://registry.yarnpkg.com/form-data/-/form-data-2.1.2.tgz#89c3534008b97eada4cbb157d58f6f5df025eae4"
+form-data@~2.3.2:
+  version "2.3.3"
+  resolved "https://registry.yarnpkg.com/form-data/-/form-data-2.3.3.tgz#dcce52c05f644f298c6a7ab936bd724ceffbf3a6"
+  integrity sha512-1lLKB2Mu3aGP1Q/2eCOx0fNbRMe7XdwktwOruhfqqd0rIJWwN4Dh+E3hrPSlDCXnSR7UtZ1N38rVXm+6+MEhJQ==
   dependencies:
     asynckit "^0.4.0"
-    combined-stream "^1.0.5"
+    combined-stream "^1.0.6"
     mime-types "^2.1.12"
 
-formatio@1.1.1:
-  version "1.1.1"
-  resolved "https://registry.yarnpkg.com/formatio/-/formatio-1.1.1.tgz#5ed3ccd636551097383465d996199100e86161e9"
-  dependencies:
-    samsam "~1.1"
-
-forwarded@~0.1.0:
-  version "0.1.0"
-  resolved "https://registry.yarnpkg.com/forwarded/-/forwarded-0.1.0.tgz#19ef9874c4ae1c297bcf078fde63a09b66a84363"
-
-fresh@0.3.0:
-  version "0.3.0"
-  resolved "https://registry.yarnpkg.com/fresh/-/fresh-0.3.0.tgz#651f838e22424e7566de161d8358caa199f83d4f"
+forwarded@~0.1.2:
+  version "0.1.2"
+  resolved "https://registry.yarnpkg.com/forwarded/-/forwarded-0.1.2.tgz#98c23dab1175657b8c0573e8ceccd91b0ff18c84"
+  integrity sha1-mMI9qxF1ZXuMBXPozszZGw/xjIQ=
 
-fs-access@^1.0.0:
-  version "1.0.1"
-  resolved "https://registry.yarnpkg.com/fs-access/-/fs-access-1.0.1.tgz#d6a87f262271cefebec30c553407fb995da8777a"
+fragment-cache@^0.2.1:
+  version "0.2.1"
+  resolved "https://registry.yarnpkg.com/fragment-cache/-/fragment-cache-0.2.1.tgz#4290fad27f13e89be7f33799c6bc5a0abfff0d19"
+  integrity sha1-QpD60n8T6Jvn8zeZxrxaCr//DRk=
   dependencies:
-    null-check "^1.0.0"
+    map-cache "^0.2.2"
 
-fs-exists-sync@^0.1.0:
-  version "0.1.0"
-  resolved "http://registry.npmjs.org/fs-exists-sync/-/fs-exists-sync-0.1.0.tgz#982d6893af918e72d08dec9e8673ff2b5a8d6add"
+fresh@0.5.2:
+  version "0.5.2"
+  resolved "https://registry.yarnpkg.com/fresh/-/fresh-0.5.2.tgz#3d8cadd90d976569fa835ab1f8e4b23a105605a7"
+  integrity sha1-PYyt2Q2XZWn6g1qx+OSyOhBWBac=
 
-fs-extra@^0.23.1:
-  version "0.23.1"
-  resolved "https://registry.yarnpkg.com/fs-extra/-/fs-extra-0.23.1.tgz#6611dba6adf2ab8dc9c69fab37cddf8818157e3d"
+from2@^1.3.0:
+  version "1.3.0"
+  resolved "https://registry.npm.taobao.org/from2/download/from2-1.3.0.tgz#88413baaa5f9a597cfde9221d86986cd3c061dfd"
+  integrity sha1-iEE7qqX5pZfP3pIh2GmGzTwGHf0=
   dependencies:
-    graceful-fs "^4.1.2"
-    jsonfile "^2.1.0"
-    path-is-absolute "^1.0.0"
-    rimraf "^2.2.8"
+    inherits "~2.0.1"
+    readable-stream "~1.1.10"
 
-fs-extra@^0.24.0:
-  version "0.24.0"
-  resolved "https://registry.yarnpkg.com/fs-extra/-/fs-extra-0.24.0.tgz#d4e4342a96675cb7846633a6099249332b539952"
+from2@^2.1.0:
+  version "2.3.0"
+  resolved "https://registry.yarnpkg.com/from2/-/from2-2.3.0.tgz#8bfb5502bde4a4d36cfdeea007fcca21d7e382af"
+  integrity sha1-i/tVAr3kpNNs/e6gB/zKIdfjgq8=
   dependencies:
-    graceful-fs "^4.1.2"
-    jsonfile "^2.1.0"
-    path-is-absolute "^1.0.0"
-    rimraf "^2.2.8"
+    inherits "^2.0.1"
+    readable-stream "^2.0.0"
 
-fs-extra@^0.26.5:
-  version "0.26.7"
-  resolved "https://registry.yarnpkg.com/fs-extra/-/fs-extra-0.26.7.tgz#9ae1fdd94897798edab76d0918cf42d0c3184fa9"
+fs-access@1.0.1, fs-access@^1.0.0:
+  version "1.0.1"
+  resolved "https://registry.yarnpkg.com/fs-access/-/fs-access-1.0.1.tgz#d6a87f262271cefebec30c553407fb995da8777a"
+  integrity sha1-1qh/JiJxzv6+wwxVNAf7mV2od3o=
   dependencies:
-    graceful-fs "^4.1.2"
-    jsonfile "^2.1.0"
-    klaw "^1.0.0"
-    path-is-absolute "^1.0.0"
-    rimraf "^2.2.8"
+    null-check "^1.0.0"
 
-fs-extra@^0.30.0:
-  version "0.30.0"
-  resolved "https://registry.yarnpkg.com/fs-extra/-/fs-extra-0.30.0.tgz#f233ffcc08d4da7d432daa449776989db1df93f0"
+fs-extra@5.0.0:
+  version "5.0.0"
+  resolved "https://registry.yarnpkg.com/fs-extra/-/fs-extra-5.0.0.tgz#414d0110cdd06705734d055652c5411260c31abd"
+  integrity sha512-66Pm4RYbjzdyeuqudYqhFiNBbCIuI9kgRqLPSHIlXHidW8NIQtVdkM1yeZ4lXwuhbTETv3EUGMNHAAw6hiundQ==
   dependencies:
     graceful-fs "^4.1.2"
-    jsonfile "^2.1.0"
-    klaw "^1.0.0"
-    path-is-absolute "^1.0.0"
-    rimraf "^2.2.8"
+    jsonfile "^4.0.0"
+    universalify "^0.1.0"
 
-fs-extra@^4.0.2:
-  version "4.0.2"
-  resolved "https://registry.yarnpkg.com/fs-extra/-/fs-extra-4.0.2.tgz#f91704c53d1b461f893452b0c307d9997647ab6b"
+fs-extra@^7.0.0:
+  version "7.0.1"
+  resolved "https://registry.npmjs.org/fs-extra/-/fs-extra-7.0.1.tgz#4f189c44aa123b895f722804f55ea23eadc348e9"
+  integrity sha512-YJDaCJZEnBmcbw13fvdAM9AwNOJwOzrE4pqMqBq5nFiEqXUqHwlK4B+3pUw6JNvfSPtX05xFHtYy/1ni01eGCw==
   dependencies:
     graceful-fs "^4.1.2"
     jsonfile "^4.0.0"
     universalify "^0.1.0"
 
-fs-promise@^0.3.1:
-  version "0.3.1"
-  resolved "https://registry.yarnpkg.com/fs-promise/-/fs-promise-0.3.1.tgz#bf34050368f24d6dc9dfc6688ab5cead8f86842a"
+fs-minipass@^1.2.5:
+  version "1.2.5"
+  resolved "https://registry.yarnpkg.com/fs-minipass/-/fs-minipass-1.2.5.tgz#06c277218454ec288df77ada54a03b8702aacb9d"
+  integrity sha512-JhBl0skXjUPCFH7x6x61gQxrKyXsxB5gcgePLZCwfyCGGsTISMoIeObbrvVeP6Xmyaudw4TT43qV2Gz+iyd2oQ==
   dependencies:
-    any-promise "~0.1.0"
+    minipass "^2.2.1"
 
-fs-promise@^0.5.0:
-  version "0.5.0"
-  resolved "https://registry.yarnpkg.com/fs-promise/-/fs-promise-0.5.0.tgz#4347d6bf624655a7061a4319213c393276ad3ef3"
+fs-mkdirp-stream@^1.0.0:
+  version "1.0.0"
+  resolved "https://registry.yarnpkg.com/fs-mkdirp-stream/-/fs-mkdirp-stream-1.0.0.tgz#0b7815fc3201c6a69e14db98ce098c16935259eb"
+  integrity sha1-C3gV/DIBxqaeFNuYzgmMFpNSWes=
   dependencies:
-    any-promise "^1.0.0"
-    fs-extra "^0.26.5"
-    mz "^2.3.1"
-    thenify-all "^1.6.0"
+    graceful-fs "^4.1.11"
+    through2 "^2.0.3"
 
 fs-readdir-recursive@^1.0.0:
-  version "1.0.0"
-  resolved "https://registry.yarnpkg.com/fs-readdir-recursive/-/fs-readdir-recursive-1.0.0.tgz#8cd1745c8b4f8a29c8caec392476921ba195f560"
+  version "1.1.0"
+  resolved "https://registry.yarnpkg.com/fs-readdir-recursive/-/fs-readdir-recursive-1.1.0.tgz#e32fc030a2ccee44a6b5371308da54be0b397d27"
+  integrity sha512-GNanXlVr2pf02+sPN40XN8HG+ePaNcvM0q5mZBd668Obwb0yD5GiUbZOFgwn8kGMY6I3mdyDJzieUy3PTYyTRA==
 
-fs.realpath@^1.0.0:
-  version "1.0.0"
-  resolved "http://registry.npm.taobao.org/fs.realpath/download/fs.realpath-1.0.0.tgz#1504ad2523158caa40db4a2787cb01411994ea4f"
+fs-vacuum@^1.2.10, fs-vacuum@~1.2.10:
+  version "1.2.10"
+  resolved "https://registry.npm.taobao.org/fs-vacuum/download/fs-vacuum-1.2.10.tgz#b7629bec07a4031a2548fdf99f5ecf1cc8b31e36"
+  integrity sha1-t2Kb7AekAxolSP35n17PHMizHjY=
+  dependencies:
+    graceful-fs "^4.1.2"
+    path-is-inside "^1.0.1"
+    rimraf "^2.5.2"
 
-fsevents@^1.0.0:
-  version "1.0.15"
-  resolved "https://registry.yarnpkg.com/fsevents/-/fsevents-1.0.15.tgz#fa63f590f3c2ad91275e4972a6cea545fb0aae44"
+fs-write-stream-atomic@^1.0.8, fs-write-stream-atomic@~1.0.10:
+  version "1.0.10"
+  resolved "https://registry.yarnpkg.com/fs-write-stream-atomic/-/fs-write-stream-atomic-1.0.10.tgz#b47df53493ef911df75731e70a9ded0189db40c9"
+  integrity sha1-tH31NJPvkR33VzHnCp3tAYnbQMk=
   dependencies:
-    nan "^2.3.0"
-    node-pre-gyp "^0.6.29"
+    graceful-fs "^4.1.2"
+    iferr "^0.1.5"
+    imurmurhash "^0.1.4"
+    readable-stream "1 || 2"
 
-fstream-ignore@~1.0.5:
-  version "1.0.5"
-  resolved "https://registry.yarnpkg.com/fstream-ignore/-/fstream-ignore-1.0.5.tgz#9c31dae34767018fe1d249b24dada67d092da105"
+fs.realpath@^1.0.0:
+  version "1.0.0"
+  resolved "https://registry.yarnpkg.com/fs.realpath/-/fs.realpath-1.0.0.tgz#1504ad2523158caa40db4a2787cb01411994ea4f"
+  integrity sha1-FQStJSMVjKpA20onh8sBQRmU6k8=
+
+fsevents@^1.0.0, fsevents@^1.2.2, fsevents@^1.2.7:
+  version "1.2.7"
+  resolved "https://registry.yarnpkg.com/fsevents/-/fsevents-1.2.7.tgz#4851b664a3783e52003b3c66eb0eee1074933aa4"
+  integrity sha512-Pxm6sI2MeBD7RdD12RYsqaP0nMiwx8eZBXCa6z2L+mRHm2DYrOYwihmhjpkdjUHwQhslWQjRpEgNq4XvBmaAuw==
   dependencies:
-    fstream "^1.0.0"
-    inherits "2"
-    minimatch "^3.0.0"
+    nan "^2.9.2"
+    node-pre-gyp "^0.10.0"
 
-fstream@^1.0.0, fstream@^1.0.2, fstream@~1.0.10:
-  version "1.0.10"
-  resolved "https://registry.yarnpkg.com/fstream/-/fstream-1.0.10.tgz#604e8a92fe26ffd9f6fae30399d4984e1ab22822"
+fstream@^1.0.0, fstream@^1.0.12:
+  version "1.0.12"
+  resolved "https://registry.npm.taobao.org/fstream/download/fstream-1.0.12.tgz#4e8ba8ee2d48be4f7d0de505455548eae5932045"
+  integrity sha1-Touo7i1Ivk99DeUFRVVI6uWTIEU=
   dependencies:
     graceful-fs "^4.1.2"
     inherits "~2.0.0"
     mkdirp ">=0.5 0"
     rimraf "2"
 
-function-bind@^1.0.2, function-bind@^1.1.1:
+function-bind@^1.1.1:
   version "1.1.1"
   resolved "https://registry.yarnpkg.com/function-bind/-/function-bind-1.1.1.tgz#a56899d3ea3c9bab874bb9773b7c5ede92f4895d"
+  integrity sha512-yIovAzMX49sF8Yl58fSCWJ5svSLuaibPxXQJFLmBObTuCr0Mf1KiPopGM9NiFjiYBCbfaa2Fh6breQ6ANVTI0A==
 
 functional-red-black-tree@^1.0.1:
   version "1.0.1"
-  resolved "http://registry.npm.taobao.org/functional-red-black-tree/download/functional-red-black-tree-1.0.1.tgz#1b0ab3bd553b2a0d6399d29c0e3ea0b252078327"
+  resolved "https://registry.yarnpkg.com/functional-red-black-tree/-/functional-red-black-tree-1.0.1.tgz#1b0ab3bd553b2a0d6399d29c0e3ea0b252078327"
+  integrity sha1-GwqzvVU7Kg1jmdKcDj6gslIHgyc=
 
-gauge@~2.7.1:
-  version "2.7.2"
-  resolved "https://registry.yarnpkg.com/gauge/-/gauge-2.7.2.tgz#15cecc31b02d05345a5d6b0e171cdb3ad2307774"
+gauge@~2.7.3:
+  version "2.7.4"
+  resolved "https://registry.yarnpkg.com/gauge/-/gauge-2.7.4.tgz#2c03405c7538c39d7eb37b317022e325fb018bf7"
+  integrity sha1-LANAXHU4w51+s3sxcCLjJfsBi/c=
   dependencies:
     aproba "^1.0.3"
     console-control-strings "^1.0.0"
@@ -2963,64 +5001,169 @@ gauge@~2.7.1:
     signal-exit "^3.0.0"
     string-width "^1.0.1"
     strip-ansi "^3.0.1"
-    supports-color "^0.2.0"
     wide-align "^1.1.0"
 
-gaze@^0.5.1:
-  version "0.5.2"
-  resolved "https://registry.yarnpkg.com/gaze/-/gaze-0.5.2.tgz#40b709537d24d1d45767db5a908689dfe69ac44f"
-  dependencies:
-    globule "~0.1.0"
-
 gaze@^1.0.0:
-  version "1.1.2"
-  resolved "https://registry.yarnpkg.com/gaze/-/gaze-1.1.2.tgz#847224677adb8870d679257ed3388fdb61e40105"
+  version "1.1.3"
+  resolved "https://registry.npm.taobao.org/gaze/download/gaze-1.1.3.tgz#c441733e13b927ac8c0ff0b4c3b033f28812924a"
+  integrity sha1-xEFzPhO5J6yMD/C0w7Az8ogSkko=
   dependencies:
     globule "^1.0.0"
 
-generate-function@^2.0.0:
+genfun@^5.0.0:
+  version "5.0.0"
+  resolved "https://registry.npm.taobao.org/genfun/download/genfun-5.0.0.tgz#9dd9710a06900a5c4a5bf57aca5da4e52fe76537"
+  integrity sha1-ndlxCgaQClxKW/V6yl2k5S/nZTc=
+
+gentle-fs@^2.3.0:
+  version "2.3.0"
+  resolved "https://registry.npm.taobao.org/gentle-fs/download/gentle-fs-2.3.0.tgz#13538db5029400f98684be4894e8a7d8f0d1ea7f"
+  integrity sha1-E1ONtQKUAPmGhL5IlOin2PDR6n8=
+  dependencies:
+    aproba "^1.1.2"
+    chownr "^1.1.2"
+    cmd-shim "^3.0.3"
+    fs-vacuum "^1.2.10"
+    graceful-fs "^4.1.11"
+    iferr "^0.1.5"
+    infer-owner "^1.0.4"
+    mkdirp "^0.5.1"
+    path-is-inside "^1.0.2"
+    read-cmd-shim "^1.0.1"
+    slide "^1.1.6"
+
+get-caller-file@^1.0.1:
+  version "1.0.3"
+  resolved "https://registry.yarnpkg.com/get-caller-file/-/get-caller-file-1.0.3.tgz#f978fa4c90d1dfe7ff2d6beda2a515e713bdcf4a"
+  integrity sha512-3t6rVToeoZfYSGd8YoLFR2DJkiQrIiUrGcjvFX2mDw3bn6k2OtwHN0TNCLbBO+w8qTvimhDkv+LSscbJY1vE6w==
+
+get-caller-file@^2.0.1:
+  version "2.0.5"
+  resolved "https://registry.npmjs.org/get-caller-file/-/get-caller-file-2.0.5.tgz#4f94412a82db32f36e3b0b9741f8a97feb031f7e"
+  integrity sha512-DyFP3BM/3YHTQOCUL/w0OZHR0lpKeGrxotcHWcqNEdnltqFwXVfhEBQ94eIo34AfQpo0rGki4cyIiftY06h2Fg==
+
+get-func-name@^2.0.0:
   version "2.0.0"
-  resolved "https://registry.yarnpkg.com/generate-function/-/generate-function-2.0.0.tgz#6858fe7c0969b7d4e9093337647ac79f60dfbe74"
+  resolved "https://registry.npmjs.org/get-func-name/-/get-func-name-2.0.0.tgz#ead774abee72e20409433a066366023dd6887a41"
+  integrity sha1-6td0q+5y4gQJQzoGY2YCPdaIekE=
 
-generate-object-property@^1.1.0:
-  version "1.2.0"
-  resolved "https://registry.yarnpkg.com/generate-object-property/-/generate-object-property-1.2.0.tgz#9c0e1c40308ce804f4783618b937fa88f99d50d0"
+get-pkg-repo@^1.0.0:
+  version "1.4.0"
+  resolved "https://registry.npmjs.org/get-pkg-repo/-/get-pkg-repo-1.4.0.tgz#c73b489c06d80cc5536c2c853f9e05232056972d"
+  integrity sha1-xztInAbYDMVTbCyFP54FIyBWly0=
   dependencies:
-    is-property "^1.0.0"
+    hosted-git-info "^2.1.4"
+    meow "^3.3.0"
+    normalize-package-data "^2.3.0"
+    parse-github-repo-url "^1.3.0"
+    through2 "^2.0.0"
 
-get-caller-file@^1.0.1:
-  version "1.0.2"
-  resolved "https://registry.yarnpkg.com/get-caller-file/-/get-caller-file-1.0.2.tgz#f702e63127e7e231c160a80c1554acb70d5047e5"
+get-stdin@7.0.0:
+  version "7.0.0"
+  resolved "https://registry.yarnpkg.com/get-stdin/-/get-stdin-7.0.0.tgz#8d5de98f15171a125c5e516643c7a6d0ea8a96f6"
+  integrity sha512-zRKcywvrXlXsA0v0i9Io4KDRaAw7+a1ZpjRwl9Wox8PFlVCCHra7E9c4kqXCoCM9nR5tBkaTTZRBoCm60bFqTQ==
 
 get-stdin@^4.0.1:
   version "4.0.1"
   resolved "https://registry.yarnpkg.com/get-stdin/-/get-stdin-4.0.1.tgz#b968c6b0a04384324902e8bf1a5df32579a450fe"
+  integrity sha1-uWjGsKBDhDJJAui/Gl3zJXmkUP4=
+
+get-stdin@^6.0.0:
+  version "6.0.0"
+  resolved "https://registry.yarnpkg.com/get-stdin/-/get-stdin-6.0.0.tgz#9e09bf712b360ab9225e812048f71fde9c89657b"
+  integrity sha512-jp4tHawyV7+fkkSKyvjuLZswblUtz+SQKzSWnBbii16BuZksJlU1wuBYXY75r+duh/llF1ur6oNwi+2ZzjKZ7g==
 
 get-stream@^3.0.0:
   version "3.0.0"
   resolved "https://registry.yarnpkg.com/get-stream/-/get-stream-3.0.0.tgz#8e943d1358dc37555054ecbe2edb05aa174ede14"
+  integrity sha1-jpQ9E1jcN1VQVOy+LtsFqhdO3hQ=
+
+get-stream@^4.0.0, get-stream@^4.1.0:
+  version "4.1.0"
+  resolved "https://registry.yarnpkg.com/get-stream/-/get-stream-4.1.0.tgz#c1b255575f3dc21d59bfc79cd3d2b46b1c3a54b5"
+  integrity sha512-GMat4EJ5161kIy2HevLlr4luNjBgvmj413KaQA7jt4V8B4RDsfpHk7WQ9GVqfYyyx8OS/L66Kox+rJRNklLK7w==
+  dependencies:
+    pump "^3.0.0"
+
+get-value@^2.0.3, get-value@^2.0.6:
+  version "2.0.6"
+  resolved "https://registry.yarnpkg.com/get-value/-/get-value-2.0.6.tgz#dc15ca1c672387ca76bd37ac0a395ba2042a2c28"
+  integrity sha1-3BXKHGcjh8p2vTesCjlbogQqLCg=
 
 getpass@^0.1.1:
-  version "0.1.6"
-  resolved "https://registry.yarnpkg.com/getpass/-/getpass-0.1.6.tgz#283ffd9fc1256840875311c1b60e8c40187110e6"
+  version "0.1.7"
+  resolved "https://registry.yarnpkg.com/getpass/-/getpass-0.1.7.tgz#5eff8e3e684d569ae4cb2b1282604e8ba62149fa"
+  integrity sha1-Xv+OPmhNVprkyysSgmBOi6YhSfo=
   dependencies:
     assert-plus "^1.0.0"
 
-gh-pages@^0.11.0:
-  version "0.11.0"
-  resolved "https://registry.yarnpkg.com/gh-pages/-/gh-pages-0.11.0.tgz#93313c6dcbfc74d426bc89a29ebff6420acc3c1b"
+git-raw-commits@2.0.0:
+  version "2.0.0"
+  resolved "https://registry.npmjs.org/git-raw-commits/-/git-raw-commits-2.0.0.tgz#d92addf74440c14bcc5c83ecce3fb7f8a79118b5"
+  integrity sha512-w4jFEJFgKXMQJ0H0ikBk2S+4KP2VEjhCvLCNqbNRQC8BgGWgLKNCO7a9K9LI+TVT7Gfoloje502sEnctibffgg==
+  dependencies:
+    dargs "^4.0.1"
+    lodash.template "^4.0.2"
+    meow "^4.0.0"
+    split2 "^2.0.0"
+    through2 "^2.0.0"
+
+git-raw-commits@^1.3.0:
+  version "1.3.6"
+  resolved "https://registry.yarnpkg.com/git-raw-commits/-/git-raw-commits-1.3.6.tgz#27c35a32a67777c1ecd412a239a6c19d71b95aff"
+  integrity sha512-svsK26tQ8vEKnMshTDatSIQSMDdz8CxIIqKsvPqbtV23Etmw6VNaFAitu8zwZ0VrOne7FztwPyRLxK7/DIUTQg==
+  dependencies:
+    dargs "^4.0.1"
+    lodash.template "^4.0.2"
+    meow "^4.0.0"
+    split2 "^2.0.0"
+    through2 "^2.0.0"
+
+git-remote-origin-url@^2.0.0:
+  version "2.0.0"
+  resolved "https://registry.npmjs.org/git-remote-origin-url/-/git-remote-origin-url-2.0.0.tgz#5282659dae2107145a11126112ad3216ec5fa65f"
+  integrity sha1-UoJlna4hBxRaERJhEq0yFuxfpl8=
+  dependencies:
+    gitconfiglocal "^1.0.0"
+    pify "^2.3.0"
+
+git-semver-tags@3.0.0, git-semver-tags@^3.0.0:
+  version "3.0.0"
+  resolved "https://registry.npmjs.org/git-semver-tags/-/git-semver-tags-3.0.0.tgz#fe10147824657662c82efd9341f0fa59f74ddcba"
+  integrity sha512-T4C/gJ9k2Bnxz+PubtcyiMtUUKrC+Nh9Q4zaECcnmVMwJgPhrNyP/Rf+YpdRqsJbCV/+kYrCH24Xg+IeAmbOPg==
   dependencies:
-    async "1.5.2"
-    commander "2.9.0"
-    globby "^4.0.0"
-    graceful-fs "4.1.2"
-    q "1.4.1"
-    q-io "1.13.2"
-    wrench "1.5.8"
+    meow "^4.0.0"
+    semver "^6.0.0"
+
+git-semver-tags@^2.0.3:
+  version "2.0.3"
+  resolved "https://registry.npmjs.org/git-semver-tags/-/git-semver-tags-2.0.3.tgz#48988a718acf593800f99622a952a77c405bfa34"
+  integrity sha512-tj4FD4ww2RX2ae//jSrXZzrocla9db5h0V7ikPl1P/WwoZar9epdUhwR7XHXSgc+ZkNq72BEEerqQuicoEQfzA==
+  dependencies:
+    meow "^4.0.0"
+    semver "^6.0.0"
+
+gitconfiglocal@^1.0.0:
+  version "1.0.0"
+  resolved "https://registry.npmjs.org/gitconfiglocal/-/gitconfiglocal-1.0.0.tgz#41d045f3851a5ea88f03f24ca1c6178114464b9b"
+  integrity sha1-QdBF84UaXqiPA/JMocYXgRRGS5s=
+  dependencies:
+    ini "^1.3.2"
+
+github-api@^3.0.0:
+  version "3.3.0"
+  resolved "https://registry.npm.taobao.org/github-api/download/github-api-3.3.0.tgz#5aaa2cc6787ff5bc27b3d01cba8bddfa7a7f6aad"
+  integrity sha1-Wqosxnh/9bwns9Acuovd+np/aq0=
+  dependencies:
+    axios "^0.19.0"
+    debug "^2.2.0"
+    js-base64 "^2.1.9"
+    utf8 "^2.1.1"
 
 glob-base@^0.3.0:
   version "0.3.0"
   resolved "https://registry.yarnpkg.com/glob-base/-/glob-base-0.3.0.tgz#dbb164f6221b1c0b1ccf82aea328b497df0ea3c4"
+  integrity sha1-27Fk9iIbHAscz4Kuoyi0l98Oo8Q=
   dependencies:
     glob-parent "^2.0.0"
     is-glob "^2.0.0"
@@ -3028,55 +5171,62 @@ glob-base@^0.3.0:
 glob-parent@^2.0.0:
   version "2.0.0"
   resolved "https://registry.yarnpkg.com/glob-parent/-/glob-parent-2.0.0.tgz#81383d72db054fcccf5336daa902f182f6edbb28"
+  integrity sha1-gTg9ctsFT8zPUzbaqQLxgvbtuyg=
   dependencies:
     is-glob "^2.0.0"
 
-glob-stream@^3.1.5:
-  version "3.1.18"
-  resolved "https://registry.yarnpkg.com/glob-stream/-/glob-stream-3.1.18.tgz#9170a5f12b790306fdfe598f313f8f7954fd143b"
-  dependencies:
-    glob "^4.3.1"
-    glob2base "^0.0.12"
-    minimatch "^2.0.1"
-    ordered-read-streams "^0.1.0"
-    through2 "^0.6.1"
-    unique-stream "^1.0.0"
-
-glob-watcher@^0.0.6:
-  version "0.0.6"
-  resolved "https://registry.yarnpkg.com/glob-watcher/-/glob-watcher-0.0.6.tgz#b95b4a8df74b39c83298b0c05c978b4d9a3b710b"
+glob-parent@^3.1.0:
+  version "3.1.0"
+  resolved "https://registry.yarnpkg.com/glob-parent/-/glob-parent-3.1.0.tgz#9e6af6299d8d3bd2bd40430832bd113df906c5ae"
+  integrity sha1-nmr2KZ2NO9K9QEMIMr0RPfkGxa4=
   dependencies:
-    gaze "^0.5.1"
+    is-glob "^3.1.0"
+    path-dirname "^1.0.0"
 
-glob2base@^0.0.12:
-  version "0.0.12"
-  resolved "https://registry.yarnpkg.com/glob2base/-/glob2base-0.0.12.tgz#9d419b3e28f12e83a362164a277055922c9c0d56"
+glob-stream@^6.1.0:
+  version "6.1.0"
+  resolved "https://registry.yarnpkg.com/glob-stream/-/glob-stream-6.1.0.tgz#7045c99413b3eb94888d83ab46d0b404cc7bdde4"
+  integrity sha1-cEXJlBOz65SIjYOrRtC0BMx73eQ=
   dependencies:
-    find-index "^0.1.1"
-
-glob@7.0.5:
-  version "7.0.5"
-  resolved "https://registry.yarnpkg.com/glob/-/glob-7.0.5.tgz#b4202a69099bbb4d292a7c1b95b6682b67ebdc95"
+    extend "^3.0.0"
+    glob "^7.1.1"
+    glob-parent "^3.1.0"
+    is-negated-glob "^1.0.0"
+    ordered-read-streams "^1.0.0"
+    pumpify "^1.3.5"
+    readable-stream "^2.1.5"
+    remove-trailing-separator "^1.0.1"
+    to-absolute-glob "^2.0.0"
+    unique-stream "^2.0.2"
+
+glob-watcher@^5.0.0:
+  version "5.0.3"
+  resolved "https://registry.yarnpkg.com/glob-watcher/-/glob-watcher-5.0.3.tgz#88a8abf1c4d131eb93928994bc4a593c2e5dd626"
+  integrity sha512-8tWsULNEPHKQ2MR4zXuzSmqbdyV5PtwwCaWSGQ1WwHsJ07ilNeN1JB8ntxhckbnpSHaf9dXFUHzIWvm1I13dsg==
+  dependencies:
+    anymatch "^2.0.0"
+    async-done "^1.2.0"
+    chokidar "^2.0.0"
+    is-negated-glob "^1.0.0"
+    just-debounce "^1.0.0"
+    object.defaults "^1.1.0"
+
+glob@7.1.3, glob@^7.0.3, glob@^7.1.1, glob@^7.1.2:
+  version "7.1.3"
+  resolved "https://registry.yarnpkg.com/glob/-/glob-7.1.3.tgz#3960832d3f1574108342dafd3a67b332c0969df1"
+  integrity sha512-vcfuiIxogLV4DlGBHIUOwI0IbrJ8HWPc4MU7HzviGeNho/UJDfi6B5p3sHeWIQ0KGIU0Jpxi5ZHxemQfLkkAwQ==
   dependencies:
     fs.realpath "^1.0.0"
     inflight "^1.0.4"
     inherits "2"
-    minimatch "^3.0.2"
+    minimatch "^3.0.4"
     once "^1.3.0"
     path-is-absolute "^1.0.0"
 
-glob@^4.3.1:
-  version "4.5.3"
-  resolved "https://registry.yarnpkg.com/glob/-/glob-4.5.3.tgz#c6cb73d3226c1efef04de3c56d012f03377ee15f"
-  dependencies:
-    inflight "^1.0.4"
-    inherits "2"
-    minimatch "^2.0.1"
-    once "^1.3.0"
-
-glob@^5.0.15, glob@^5.0.3, glob@^5.0.5:
+glob@^5.0.15:
   version "5.0.15"
   resolved "https://registry.yarnpkg.com/glob/-/glob-5.0.15.tgz#1bc936b9e02f4a603fcc222ecf7633d30b8b93b1"
+  integrity sha1-G8k2ueAvSmA/zCIuz3Yz0wuLk7E=
   dependencies:
     inflight "^1.0.4"
     inherits "2"
@@ -3084,19 +5234,10 @@ glob@^5.0.15, glob@^5.0.3, glob@^5.0.5:
     once "^1.3.0"
     path-is-absolute "^1.0.0"
 
-glob@^6.0.1:
-  version "6.0.4"
-  resolved "https://registry.yarnpkg.com/glob/-/glob-6.0.4.tgz#0f08860f6a155127b2fadd4f9ce24b1aab6e4d22"
-  dependencies:
-    inflight "^1.0.4"
-    inherits "2"
-    minimatch "2 || 3"
-    once "^1.3.0"
-    path-is-absolute "^1.0.0"
-
-glob@^7.0.0, glob@^7.0.3, glob@^7.0.5, glob@^7.1.2, glob@~7.1.1:
-  version "7.1.2"
-  resolved "http://registry.npm.taobao.org/glob/download/glob-7.1.2.tgz#c19c9df9a028702d678612384a6552404c636d15"
+glob@^7.0.0, glob@^7.1.4, glob@~7.1.1:
+  version "7.1.6"
+  resolved "https://registry.npm.taobao.org/glob/download/glob-7.1.6.tgz?cache=0&sync_timestamp=1573078121947&other_urls=https%3A%2F%2Fregistry.npm.taobao.org%2Fglob%2Fdownload%2Fglob-7.1.6.tgz#141f33b81a7c2492e125594307480c46679278a6"
+  integrity sha1-FB8zuBp8JJLhJVlDB0gMRmeSeKY=
   dependencies:
     fs.realpath "^1.0.0"
     inflight "^1.0.4"
@@ -3105,92 +5246,72 @@ glob@^7.0.0, glob@^7.0.3, glob@^7.0.5, glob@^7.1.2, glob@~7.1.1:
     once "^1.3.0"
     path-is-absolute "^1.0.0"
 
-glob@^7.1.1:
-  version "7.1.1"
-  resolved "https://registry.yarnpkg.com/glob/-/glob-7.1.1.tgz#805211df04faaf1c63a3600306cdf5ade50b2ec8"
+glob@^7.1.3:
+  version "7.1.4"
+  resolved "https://registry.yarnpkg.com/glob/-/glob-7.1.4.tgz#aa608a2f6c577ad357e1ae5a5c26d9a8d1969255"
+  integrity sha512-hkLPepehmnKk41pUGm3sYxoFs/umurYfYJCerbXEyFIWcAzvpipAgVkBqqT9RBKMGjnq6kMuyYwha6csxbiM1A==
   dependencies:
     fs.realpath "^1.0.0"
     inflight "^1.0.4"
     inherits "2"
-    minimatch "^3.0.2"
+    minimatch "^3.0.4"
     once "^1.3.0"
     path-is-absolute "^1.0.0"
 
-glob@~3.1.21:
-  version "3.1.21"
-  resolved "https://registry.yarnpkg.com/glob/-/glob-3.1.21.tgz#d29e0a055dea5138f4d07ed40e8982e83c2066cd"
+global-dirs@^0.1.0, global-dirs@^0.1.1:
+  version "0.1.1"
+  resolved "https://registry.npmjs.org/global-dirs/-/global-dirs-0.1.1.tgz#b319c0dd4607f353f3be9cca4c72fc148c49f445"
+  integrity sha1-sxnA3UYH81PzvpzKTHL8FIxJ9EU=
   dependencies:
-    graceful-fs "~1.2.0"
-    inherits "1"
-    minimatch "~0.2.11"
+    ini "^1.3.4"
 
-global-modules@^0.2.3:
-  version "0.2.3"
-  resolved "https://registry.yarnpkg.com/global-modules/-/global-modules-0.2.3.tgz#ea5a3bed42c6d6ce995a4f8a1269b5dae223828d"
+global-modules-path@^2.3.0:
+  version "2.3.1"
+  resolved "https://registry.yarnpkg.com/global-modules-path/-/global-modules-path-2.3.1.tgz#e541f4c800a1a8514a990477b267ac67525b9931"
+  integrity sha512-y+shkf4InI7mPRHSo2b/k6ix6+NLDtyccYv86whhxrSGX9wjPX1VMITmrDbE1eh7zkzhiWtW2sHklJYoQ62Cxg==
+
+global-modules@^1.0.0:
+  version "1.0.0"
+  resolved "https://registry.yarnpkg.com/global-modules/-/global-modules-1.0.0.tgz#6d770f0eb523ac78164d72b5e71a8877265cc3ea"
+  integrity sha512-sKzpEkf11GpOFuw0Zzjzmt4B4UZwjOcG757PPvrfhxcLFbq0wpsgpOqxpxtxFiCG4DtG93M6XRVbF2oGdev7bg==
   dependencies:
-    global-prefix "^0.1.4"
-    is-windows "^0.2.0"
+    global-prefix "^1.0.1"
+    is-windows "^1.0.1"
+    resolve-dir "^1.0.0"
 
-global-prefix@^0.1.4:
-  version "0.1.5"
-  resolved "https://registry.yarnpkg.com/global-prefix/-/global-prefix-0.1.5.tgz#8d3bc6b8da3ca8112a160d8d496ff0462bfef78f"
+global-prefix@^1.0.1:
+  version "1.0.2"
+  resolved "https://registry.yarnpkg.com/global-prefix/-/global-prefix-1.0.2.tgz#dbf743c6c14992593c655568cb66ed32c0122ebe"
+  integrity sha1-2/dDxsFJklk8ZVVoy2btMsASLr4=
   dependencies:
-    homedir-polyfill "^1.0.0"
+    expand-tilde "^2.0.2"
+    homedir-polyfill "^1.0.1"
     ini "^1.3.4"
-    is-windows "^0.2.0"
-    which "^1.2.12"
+    is-windows "^1.0.1"
+    which "^1.2.14"
 
 global@^4.3.2:
   version "4.3.2"
   resolved "https://registry.yarnpkg.com/global/-/global-4.3.2.tgz#e76989268a6c74c38908b1305b10fc0e394e9d0f"
+  integrity sha1-52mJJopsdMOJCLEwWxD8DjlOnQ8=
   dependencies:
     min-document "^2.19.0"
     process "~0.5.1"
 
 globals@^11.0.1:
-  version "11.1.0"
-  resolved "http://registry.npm.taobao.org/globals/download/globals-11.1.0.tgz#632644457f5f0e3ae711807183700ebf2e4633e4"
-
-globals@^9.0.0:
-  version "9.14.0"
-  resolved "https://registry.yarnpkg.com/globals/-/globals-9.14.0.tgz#8859936af0038741263053b39d0e76ca241e4034"
+  version "11.10.0"
+  resolved "https://registry.yarnpkg.com/globals/-/globals-11.10.0.tgz#1e09776dffda5e01816b3bb4077c8b59c24eaa50"
+  integrity sha512-0GZF1RiPKU97IHUO5TORo9w1PwrH/NBPl+fS7oMLdaTRiYmYbwK4NWoZWrAdd0/abG9R2BU+OiwyQpTpE6pdfQ==
 
-globby@^3.0.1:
-  version "3.0.1"
-  resolved "https://registry.yarnpkg.com/globby/-/globby-3.0.1.tgz#2094af8421e19152150d5893eb6416b312d9a22f"
-  dependencies:
-    array-union "^1.0.1"
-    arrify "^1.0.0"
-    glob "^5.0.3"
-    object-assign "^4.0.1"
-    pify "^2.0.0"
-    pinkie-promise "^1.0.0"
-
-globby@^4.0.0:
-  version "4.1.0"
-  resolved "https://registry.yarnpkg.com/globby/-/globby-4.1.0.tgz#080f54549ec1b82a6c60e631fc82e1211dbe95f8"
-  dependencies:
-    array-union "^1.0.1"
-    arrify "^1.0.0"
-    glob "^6.0.1"
-    object-assign "^4.0.1"
-    pify "^2.0.0"
-    pinkie-promise "^2.0.0"
-
-globby@^5.0.0:
-  version "5.0.0"
-  resolved "http://registry.npm.taobao.org/globby/download/globby-5.0.0.tgz#ebd84667ca0dbb330b99bcfc68eac2bc54370e0d"
-  dependencies:
-    array-union "^1.0.1"
-    arrify "^1.0.0"
-    glob "^7.0.3"
-    object-assign "^4.0.1"
-    pify "^2.0.0"
-    pinkie-promise "^2.0.0"
+globals@^9.18.0:
+  version "9.18.0"
+  resolved "https://registry.yarnpkg.com/globals/-/globals-9.18.0.tgz#aa3896b3e69b487f17e31ed2143d69a8e30c2d8a"
+  integrity sha512-S0nG3CLEQiY/ILxqtztTWH/3iRRdyBLw6KMDxnKMchrtbj2OFmehVh0WUCfW3DUrIgx/qFrJPICrq4Z4sTR9UQ==
 
 globby@^6.1.0:
   version "6.1.0"
   resolved "https://registry.yarnpkg.com/globby/-/globby-6.1.0.tgz#f5a6d70e8395e21c858fb0489d64df02424d506c"
+  integrity sha1-9abXDoOV4hyFj7BInWTfAkJNUGw=
   dependencies:
     array-union "^1.0.1"
     glob "^7.0.3"
@@ -3198,130 +5319,150 @@ globby@^6.1.0:
     pify "^2.0.0"
     pinkie-promise "^2.0.0"
 
+globby@^7.1.1:
+  version "7.1.1"
+  resolved "https://registry.yarnpkg.com/globby/-/globby-7.1.1.tgz#fb2ccff9401f8600945dfada97440cca972b8680"
+  integrity sha1-+yzP+UAfhgCUXfral0QMypcrhoA=
+  dependencies:
+    array-union "^1.0.1"
+    dir-glob "^2.0.0"
+    glob "^7.1.2"
+    ignore "^3.3.5"
+    pify "^3.0.0"
+    slash "^1.0.0"
+
 globule@^1.0.0:
-  version "1.2.0"
-  resolved "https://registry.yarnpkg.com/globule/-/globule-1.2.0.tgz#1dc49c6822dd9e8a2fa00ba2a295006e8664bd09"
+  version "1.3.2"
+  resolved "https://registry.npm.taobao.org/globule/download/globule-1.3.2.tgz#d8bdd9e9e4eef8f96e245999a5dee7eb5d8529c4"
+  integrity sha1-2L3Z6eTu+PluJFmZpd7n612FKcQ=
   dependencies:
     glob "~7.1.1"
-    lodash "~4.17.4"
+    lodash "~4.17.10"
     minimatch "~3.0.2"
 
-globule@~0.1.0:
-  version "0.1.0"
-  resolved "https://registry.yarnpkg.com/globule/-/globule-0.1.0.tgz#d9c8edde1da79d125a151b79533b978676346ae5"
-  dependencies:
-    glob "~3.1.21"
-    lodash "~1.0.1"
-    minimatch "~0.2.11"
-
 glogg@^1.0.0:
-  version "1.0.0"
-  resolved "https://registry.yarnpkg.com/glogg/-/glogg-1.0.0.tgz#7fe0f199f57ac906cf512feead8f90ee4a284fc5"
+  version "1.0.2"
+  resolved "https://registry.yarnpkg.com/glogg/-/glogg-1.0.2.tgz#2d7dd702beda22eb3bffadf880696da6d846313f"
+  integrity sha512-5mwUoSuBk44Y4EshyiqcH95ZntbDdTQqA3QYSrxmzj28Ai0vXBGMH1ApSANH14j2sIRtqCEyg6PfsuP7ElOEDA==
   dependencies:
     sparkles "^1.0.0"
 
-graceful-fs@4.1.2:
-  version "4.1.2"
-  resolved "https://registry.yarnpkg.com/graceful-fs/-/graceful-fs-4.1.2.tgz#fe2239b7574972e67e41f808823f9bfa4a991e37"
-
-graceful-fs@^3.0.0:
-  version "3.0.11"
-  resolved "https://registry.yarnpkg.com/graceful-fs/-/graceful-fs-3.0.11.tgz#7613c778a1afea62f25c630a086d7f3acbbdd818"
+got@^6.7.1:
+  version "6.7.1"
+  resolved "https://registry.npm.taobao.org/got/download/got-6.7.1.tgz#240cd05785a9a18e561dc1b44b41c763ef1e8db0"
+  integrity sha1-JAzQV4WpoY5WHcG0S0HHY+8ejbA=
   dependencies:
-    natives "^1.1.0"
+    create-error-class "^3.0.0"
+    duplexer3 "^0.1.4"
+    get-stream "^3.0.0"
+    is-redirect "^1.0.0"
+    is-retry-allowed "^1.0.0"
+    is-stream "^1.0.0"
+    lowercase-keys "^1.0.0"
+    safe-buffer "^5.0.1"
+    timed-out "^4.0.0"
+    unzip-response "^2.0.1"
+    url-parse-lax "^1.0.0"
 
-graceful-fs@^4.1.2, graceful-fs@^4.1.4, graceful-fs@^4.1.6, graceful-fs@^4.1.9:
-  version "4.1.11"
-  resolved "https://registry.yarnpkg.com/graceful-fs/-/graceful-fs-4.1.11.tgz#0e8bdfe4d1ddb8854d64e04ea7c00e2a026e5658"
+graceful-fs@^4.0.0, graceful-fs@^4.1.11, graceful-fs@^4.1.15, graceful-fs@^4.1.2, graceful-fs@^4.1.4, graceful-fs@^4.1.6, graceful-fs@~4.1.4:
+  version "4.1.15"
+  resolved "https://registry.yarnpkg.com/graceful-fs/-/graceful-fs-4.1.15.tgz#ffb703e1066e8a0eeaa4c8b80ba9253eeefbfb00"
+  integrity sha512-6uHUhOPEBgQ24HM+r6b/QwWfZq+yiFcipKFrOFiBEnWdy5sdzYoi+pJeQaPI5qOLRFqWmAXUPQNsielzdLoecA==
 
-graceful-fs@~1.2.0:
-  version "1.2.3"
-  resolved "https://registry.yarnpkg.com/graceful-fs/-/graceful-fs-1.2.3.tgz#15a4806a57547cb2d2dbf27f42e89a8c3451b364"
+graceful-fs@^4.1.3, graceful-fs@^4.2.2, graceful-fs@^4.2.3:
+  version "4.2.3"
+  resolved "https://registry.yarnpkg.com/graceful-fs/-/graceful-fs-4.2.3.tgz#4a12ff1b60376ef09862c2093edd908328be8423"
+  integrity sha512-a30VEBm4PEdx1dRB7MFK7BejejvCvBronbLjht+sHuGYj8PHs7M/5Z+rt5lw551vZ7yfTCj4Vuyy3mSJytDWRQ==
 
 graceful-fs@~2.0.0:
   version "2.0.3"
   resolved "https://registry.yarnpkg.com/graceful-fs/-/graceful-fs-2.0.3.tgz#7cd2cdb228a4a3f36e95efa6cc142de7d1a136d0"
+  integrity sha1-fNLNsiiko/Nule+mzBQt59GhNtA=
 
 "graceful-readlink@>= 1.0.0":
   version "1.0.1"
   resolved "https://registry.yarnpkg.com/graceful-readlink/-/graceful-readlink-1.0.1.tgz#4cafad76bc62f02fa039b2f94e9a3dd3a391a725"
-
-growl@1.9.2:
-  version "1.9.2"
-  resolved "https://registry.yarnpkg.com/growl/-/growl-1.9.2.tgz#0ea7743715db8d8de2c5ede1775e1b45ac85c02f"
-
-gulp-autoprefixer@^4.0.0:
-  version "4.0.0"
-  resolved "https://registry.yarnpkg.com/gulp-autoprefixer/-/gulp-autoprefixer-4.0.0.tgz#e00a8c571b85d06516ac26341be90dfd9fc1eab0"
-  dependencies:
-    autoprefixer "^7.0.0"
-    gulp-util "^3.0.0"
-    postcss "^6.0.1"
+  integrity sha1-TK+tdrxi8C+gObL5Tpo906ORpyU=
+
+growl@1.10.5, "growl@~> 1.10.0":
+  version "1.10.5"
+  resolved "https://registry.npmjs.org/growl/-/growl-1.10.5.tgz#f2735dc2283674fa67478b10181059355c369e5e"
+  integrity sha512-qBr4OuELkhPenW6goKVXiv47US3clb3/IbuWF9KNKEijAy9oeHxU9IgzjvJhHkUzhaj7rOUD7+YGWqUjLp5oSA==
+
+gulp-autoprefixer@^6.0.0:
+  version "6.0.0"
+  resolved "https://registry.yarnpkg.com/gulp-autoprefixer/-/gulp-autoprefixer-6.0.0.tgz#7034ef12c24a92a5b20158d63623ebbd900faed8"
+  integrity sha512-MyLymXKVGTVBx/okQSBqmdhwhyqi3igBmZBwgpZp0GRbY1LY8VctOTLzwkQ18bZKJkSDnOKR5u32TMY9wSYdqQ==
+  dependencies:
+    autoprefixer "^9.1.3"
+    fancy-log "^1.3.2"
+    plugin-error "^1.0.1"
+    postcss "^7.0.2"
     through2 "^2.0.0"
     vinyl-sourcemaps-apply "^0.2.0"
 
-gulp-cssmin@^0.1.7:
-  version "0.1.7"
-  resolved "https://registry.yarnpkg.com/gulp-cssmin/-/gulp-cssmin-0.1.7.tgz#f576fe5211d107baa9401504249bf87aed1556bd"
+gulp-cli@^2.0.0:
+  version "2.0.1"
+  resolved "https://registry.yarnpkg.com/gulp-cli/-/gulp-cli-2.0.1.tgz#7847e220cb3662f2be8a6d572bf14e17be5a994b"
+  integrity sha512-RxujJJdN8/O6IW2nPugl7YazhmrIEjmiVfPKrWt68r71UCaLKS71Hp0gpKT+F6qOUFtr7KqtifDKaAJPRVvMYQ==
+  dependencies:
+    ansi-colors "^1.0.1"
+    archy "^1.0.0"
+    array-sort "^1.0.0"
+    color-support "^1.1.3"
+    concat-stream "^1.6.0"
+    copy-props "^2.0.1"
+    fancy-log "^1.3.2"
+    gulplog "^1.0.0"
+    interpret "^1.1.0"
+    isobject "^3.0.1"
+    liftoff "^2.5.0"
+    matchdep "^2.0.0"
+    mute-stdout "^1.0.0"
+    pretty-hrtime "^1.0.0"
+    replace-homedir "^1.0.0"
+    semver-greatest-satisfied-range "^1.1.0"
+    v8flags "^3.0.1"
+    yargs "^7.1.0"
+
+gulp-cssmin@^0.2.0:
+  version "0.2.0"
+  resolved "https://registry.yarnpkg.com/gulp-cssmin/-/gulp-cssmin-0.2.0.tgz#87ab3c69dd39b20d5d96355c6504ad6a447b1e72"
+  integrity sha1-h6s8ad05sg1dljVcZQStakR7HnI=
   dependencies:
     clean-css "^3.1.9"
     filesize "~2.0.0"
-    graceful-fs "~2.0.0"
+    graceful-fs "~4.1.4"
     gulp-rename "~1.1.0"
     gulp-util "~2.2.0"
     map-stream "0.0.4"
     temp-write "~0.1.0"
 
-gulp-postcss@^6.1.1:
-  version "6.2.0"
-  resolved "https://registry.yarnpkg.com/gulp-postcss/-/gulp-postcss-6.2.0.tgz#be0b7c3ab25aaa9a6ddef3fc65edf52d2be99640"
-  dependencies:
-    gulp-util "^3.0.7"
-    postcss "^5.2.0"
-    vinyl-sourcemaps-apply "^0.2.0"
-
 gulp-rename@~1.1.0:
   version "1.1.0"
   resolved "https://registry.yarnpkg.com/gulp-rename/-/gulp-rename-1.1.0.tgz#93090aaaf4d386c07f20538a6888f15efba727a1"
+  integrity sha1-kwkKqvTThsB/IFOKaIjxXvunJ6E=
   dependencies:
     map-stream ">=0.0.4"
 
-gulp-sass@^3.1.0:
-  version "3.1.0"
-  resolved "https://registry.yarnpkg.com/gulp-sass/-/gulp-sass-3.1.0.tgz#53dc4b68a1f5ddfe4424ab4c247655269a8b74b7"
-  dependencies:
-    gulp-util "^3.0"
-    lodash.clonedeep "^4.3.2"
-    node-sass "^4.2.0"
+gulp-sass@^4.1.0:
+  version "4.1.0"
+  resolved "https://registry.npm.taobao.org/gulp-sass/download/gulp-sass-4.1.0.tgz#486d7443c32d42bf31a6b1573ebbdaa361de7427"
+  integrity sha1-SG10Q8MtQr8xprFXPrvao2HedCc=
+  dependencies:
+    chalk "^2.3.0"
+    lodash "^4.17.11"
+    node-sass "^4.8.3"
+    plugin-error "^1.0.1"
+    replace-ext "^1.0.0"
+    strip-ansi "^4.0.0"
     through2 "^2.0.0"
     vinyl-sourcemaps-apply "^0.2.0"
 
-gulp-util@^3.0, gulp-util@^3.0.0, gulp-util@^3.0.7:
-  version "3.0.7"
-  resolved "https://registry.yarnpkg.com/gulp-util/-/gulp-util-3.0.7.tgz#78925c4b8f8b49005ac01a011c557e6218941cbb"
-  dependencies:
-    array-differ "^1.0.0"
-    array-uniq "^1.0.2"
-    beeper "^1.0.0"
-    chalk "^1.0.0"
-    dateformat "^1.0.11"
-    fancy-log "^1.1.0"
-    gulplog "^1.0.0"
-    has-gulplog "^0.1.0"
-    lodash._reescape "^3.0.0"
-    lodash._reevaluate "^3.0.0"
-    lodash._reinterpolate "^3.0.0"
-    lodash.template "^3.0.0"
-    minimist "^1.1.0"
-    multipipe "^0.1.2"
-    object-assign "^3.0.0"
-    replace-ext "0.0.1"
-    through2 "^2.0.0"
-    vinyl "^0.5.0"
-
 gulp-util@~2.2.0:
   version "2.2.20"
   resolved "https://registry.yarnpkg.com/gulp-util/-/gulp-util-2.2.20.tgz#d7146e5728910bd8f047a6b0b1e549bc22dbd64c"
+  integrity sha1-1xRuVyiRC9jwR6awseVJvCLb1kw=
   dependencies:
     chalk "^0.5.0"
     dateformat "^1.0.7-1.2.3"
@@ -3332,134 +5473,159 @@ gulp-util@~2.2.0:
     through2 "^0.5.0"
     vinyl "^0.2.1"
 
-gulp@^3.9.1:
-  version "3.9.1"
-  resolved "https://registry.yarnpkg.com/gulp/-/gulp-3.9.1.tgz#571ce45928dd40af6514fc4011866016c13845b4"
+gulp@^4.0.0:
+  version "4.0.0"
+  resolved "https://registry.yarnpkg.com/gulp/-/gulp-4.0.0.tgz#95766c601dade4a77ed3e7b2b6dc03881b596366"
+  integrity sha1-lXZsYB2t5Kd+0+eyttwDiBtZY2Y=
   dependencies:
-    archy "^1.0.0"
-    chalk "^1.0.0"
-    deprecated "^0.0.1"
-    gulp-util "^3.0.0"
-    interpret "^1.0.0"
-    liftoff "^2.1.0"
-    minimist "^1.1.0"
-    orchestrator "^0.3.0"
-    pretty-hrtime "^1.0.0"
-    semver "^4.1.0"
-    tildify "^1.0.0"
-    v8flags "^2.0.2"
-    vinyl-fs "^0.3.0"
+    glob-watcher "^5.0.0"
+    gulp-cli "^2.0.0"
+    undertaker "^1.0.0"
+    vinyl-fs "^3.0.0"
 
 gulplog@^1.0.0:
   version "1.0.0"
   resolved "https://registry.yarnpkg.com/gulplog/-/gulplog-1.0.0.tgz#e28c4d45d05ecbbed818363ce8f9c5926229ffe5"
+  integrity sha1-4oxNRdBey77YGDY86PnFkmIp/+U=
   dependencies:
     glogg "^1.0.0"
 
-handle-thing@^1.2.5:
-  version "1.2.5"
-  resolved "https://registry.yarnpkg.com/handle-thing/-/handle-thing-1.2.5.tgz#fd7aad726bf1a5fd16dfc29b2f7a6601d27139c4"
+handle-thing@^2.0.0:
+  version "2.0.0"
+  resolved "https://registry.yarnpkg.com/handle-thing/-/handle-thing-2.0.0.tgz#0e039695ff50c93fc288557d696f3c1dc6776754"
+  integrity sha512-d4sze1JNC454Wdo2fkuyzCr6aHcbL6PGGuFAz0Li/NcOm1tCHGnWDRmJP85dh9IhQErTc2svWFEX5xHIOo//kQ==
 
-handlebars@^1.3.0:
-  version "1.3.0"
-  resolved "https://registry.yarnpkg.com/handlebars/-/handlebars-1.3.0.tgz#9e9b130a93e389491322d975cf3ec1818c37ce34"
+handlebars@^4.0.1:
+  version "4.1.2"
+  resolved "https://registry.yarnpkg.com/handlebars/-/handlebars-4.1.2.tgz#b6b37c1ced0306b221e094fc7aca3ec23b131b67"
+  integrity sha512-nvfrjqvt9xQ8Z/w0ijewdD/vvWDTOweBUm96NTr66Wfvo1mJenBLwcYmPs3TIBP5ruzYGD7Hx/DaM9RmhroGPw==
   dependencies:
-    optimist "~0.3"
+    neo-async "^2.6.0"
+    optimist "^0.6.1"
+    source-map "^0.6.1"
   optionalDependencies:
-    uglify-js "~2.3"
+    uglify-js "^3.1.4"
 
-handlebars@^4.0.1:
-  version "4.0.6"
-  resolved "https://registry.yarnpkg.com/handlebars/-/handlebars-4.0.6.tgz#2ce4484850537f9c97a8026d5399b935c4ed4ed7"
+handlebars@^4.1.2:
+  version "4.2.0"
+  resolved "https://registry.npmjs.org/handlebars/-/handlebars-4.2.0.tgz#57ce8d2175b9bbb3d8b3cf3e4217b1aec8ddcb2e"
+  integrity sha512-Kb4xn5Qh1cxAKvQnzNWZ512DhABzyFNmsaJf3OAkWNa4NkaqWcNI8Tao8Tasi0/F4JD9oyG0YxuFyvyR57d+Gw==
   dependencies:
-    async "^1.4.0"
+    neo-async "^2.6.0"
     optimist "^0.6.1"
-    source-map "^0.4.4"
+    source-map "^0.6.1"
   optionalDependencies:
-    uglify-js "^2.6"
+    uglify-js "^3.1.4"
 
-har-validator@~2.0.6:
-  version "2.0.6"
-  resolved "https://registry.yarnpkg.com/har-validator/-/har-validator-2.0.6.tgz#cdcbc08188265ad119b6a5a7c8ab70eecfb5d27d"
+har-schema@^2.0.0:
+  version "2.0.0"
+  resolved "https://registry.yarnpkg.com/har-schema/-/har-schema-2.0.0.tgz#a94c2224ebcac04782a0d9035521f24735b7ec92"
+  integrity sha1-qUwiJOvKwEeCoNkDVSHyRzW37JI=
+
+har-validator@~5.1.0:
+  version "5.1.3"
+  resolved "https://registry.yarnpkg.com/har-validator/-/har-validator-5.1.3.tgz#1ef89ebd3e4996557675eed9893110dc350fa080"
+  integrity sha512-sNvOCzEQNr/qrvJgc3UG/kD4QtlHycrzwS+6mfTrrSq97BvaYcPZZI1ZSqGSPR73Cxn4LKTD4PttRwfU7jWq5g==
   dependencies:
-    chalk "^1.1.1"
-    commander "^2.9.0"
-    is-my-json-valid "^2.12.4"
-    pinkie-promise "^2.0.0"
+    ajv "^6.5.5"
+    har-schema "^2.0.0"
+
+har-validator@~5.1.3:
+  version "5.1.5"
+  resolved "https://registry.npm.taobao.org/har-validator/download/har-validator-5.1.5.tgz?cache=0&sync_timestamp=1596082584903&other_urls=https%3A%2F%2Fregistry.npm.taobao.org%2Fhar-validator%2Fdownload%2Fhar-validator-5.1.5.tgz#1f0803b9f8cb20c0fa13822df1ecddb36bde1efd"
+  integrity sha1-HwgDufjLIMD6E4It8ezds2veHv0=
+  dependencies:
+    ajv "^6.12.3"
+    har-schema "^2.0.0"
 
 has-ansi@^0.1.0:
   version "0.1.0"
   resolved "https://registry.yarnpkg.com/has-ansi/-/has-ansi-0.1.0.tgz#84f265aae8c0e6a88a12d7022894b7568894c62e"
+  integrity sha1-hPJlqujA5qiKEtcCKJS3VoiUxi4=
   dependencies:
     ansi-regex "^0.2.0"
 
 has-ansi@^2.0.0:
   version "2.0.0"
-  resolved "http://registry.npm.taobao.org/has-ansi/download/has-ansi-2.0.0.tgz#34f5049ce1ecdf2b0649af3ef24e45ed35416d91"
+  resolved "https://registry.yarnpkg.com/has-ansi/-/has-ansi-2.0.0.tgz#34f5049ce1ecdf2b0649af3ef24e45ed35416d91"
+  integrity sha1-NPUEnOHs3ysGSa8+8k5F7TVBbZE=
   dependencies:
     ansi-regex "^2.0.0"
 
-has-binary@0.1.6:
-  version "0.1.6"
-  resolved "https://registry.yarnpkg.com/has-binary/-/has-binary-0.1.6.tgz#25326f39cfa4f616ad8787894e3af2cfbc7b6e10"
-  dependencies:
-    isarray "0.0.1"
-
-has-binary@0.1.7:
-  version "0.1.7"
-  resolved "https://registry.yarnpkg.com/has-binary/-/has-binary-0.1.7.tgz#68e61eb16210c9545a0a5cce06a873912fe1e68c"
+has-binary2@~1.0.2:
+  version "1.0.3"
+  resolved "https://registry.npmjs.org/has-binary2/-/has-binary2-1.0.3.tgz#7776ac627f3ea77250cfc332dab7ddf5e4f5d11d"
+  integrity sha512-G1LWKhDSvhGeAQ8mPVQlqNcOB2sJdwATtZKl2pDKKHfpf/rYj24lkinxf69blJbnsvtqqNU+L3SL50vzZhXOnw==
   dependencies:
-    isarray "0.0.1"
-
-has-color@~0.1.0:
-  version "0.1.7"
-  resolved "https://registry.yarnpkg.com/has-color/-/has-color-0.1.7.tgz#67144a5260c34fc3cca677d041daf52fe7b78b2f"
+    isarray "2.0.1"
 
 has-cors@1.1.0:
   version "1.1.0"
   resolved "https://registry.yarnpkg.com/has-cors/-/has-cors-1.1.0.tgz#5e474793f7ea9843d1bb99c23eef49ff126fff39"
+  integrity sha1-XkdHk/fqmEPRu5nCPu9J/xJv/zk=
 
 has-flag@^1.0.0:
   version "1.0.0"
   resolved "https://registry.yarnpkg.com/has-flag/-/has-flag-1.0.0.tgz#9d9e793165ce017a00f00418c43f942a7b1d11fa"
-
-has-flag@^2.0.0:
-  version "2.0.0"
-  resolved "http://registry.npm.taobao.org/has-flag/download/has-flag-2.0.0.tgz#e8207af1cc7b30d446cc70b734b5e8be18f88d51"
+  integrity sha1-nZ55MWXOAXoA8AQYxD+UKnsdEfo=
 
 has-flag@^3.0.0:
   version "3.0.0"
-  resolved "http://registry.npm.taobao.org/has-flag/download/has-flag-3.0.0.tgz#b5d454dc2199ae225699f3467e5a07f3b955bafd"
-
-has-gulplog@^0.1.0:
-  version "0.1.0"
-  resolved "https://registry.yarnpkg.com/has-gulplog/-/has-gulplog-0.1.0.tgz#6414c82913697da51590397dafb12f22967811ce"
-  dependencies:
-    sparkles "^1.0.0"
+  resolved "https://registry.yarnpkg.com/has-flag/-/has-flag-3.0.0.tgz#b5d454dc2199ae225699f3467e5a07f3b955bafd"
+  integrity sha1-tdRU3CGZriJWmfNGfloH87lVuv0=
 
 has-symbols@^1.0.0:
   version "1.0.0"
-  resolved "http://registry.npm.taobao.org/has-symbols/download/has-symbols-1.0.0.tgz#ba1a8f1af2a0fc39650f5c850367704122063b44"
+  resolved "https://registry.yarnpkg.com/has-symbols/-/has-symbols-1.0.0.tgz#ba1a8f1af2a0fc39650f5c850367704122063b44"
+  integrity sha1-uhqPGvKg/DllD1yFA2dwQSIGO0Q=
 
-has-unicode@^2.0.0:
+has-unicode@^2.0.0, has-unicode@~2.0.1:
   version "2.0.1"
   resolved "https://registry.yarnpkg.com/has-unicode/-/has-unicode-2.0.1.tgz#e0e6fe6a28cf51138855e086d1691e771de2a8b9"
+  integrity sha1-4Ob+aijPUROIVeCG0Wkedx3iqLk=
 
-has@^1.0.1:
-  version "1.0.1"
-  resolved "https://registry.yarnpkg.com/has/-/has-1.0.1.tgz#8461733f538b0837c9361e39a9ab9e9704dc2f28"
+has-value@^0.3.1:
+  version "0.3.1"
+  resolved "https://registry.yarnpkg.com/has-value/-/has-value-0.3.1.tgz#7b1f58bada62ca827ec0a2078025654845995e1f"
+  integrity sha1-ex9YutpiyoJ+wKIHgCVlSEWZXh8=
   dependencies:
-    function-bind "^1.0.2"
+    get-value "^2.0.3"
+    has-values "^0.1.4"
+    isobject "^2.0.0"
 
-hash-base@^2.0.0:
-  version "2.0.2"
-  resolved "https://registry.yarnpkg.com/hash-base/-/hash-base-2.0.2.tgz#66ea1d856db4e8a5470cadf6fce23ae5244ef2e1"
+has-value@^1.0.0:
+  version "1.0.0"
+  resolved "https://registry.yarnpkg.com/has-value/-/has-value-1.0.0.tgz#18b281da585b1c5c51def24c930ed29a0be6b177"
+  integrity sha1-GLKB2lhbHFxR3vJMkw7SmgvmsXc=
   dependencies:
-    inherits "^2.0.1"
+    get-value "^2.0.6"
+    has-values "^1.0.0"
+    isobject "^3.0.0"
+
+has-values@^0.1.4:
+  version "0.1.4"
+  resolved "https://registry.yarnpkg.com/has-values/-/has-values-0.1.4.tgz#6d61de95d91dfca9b9a02089ad384bff8f62b771"
+  integrity sha1-bWHeldkd/Km5oCCJrThL/49it3E=
+
+has-values@^1.0.0:
+  version "1.0.0"
+  resolved "https://registry.yarnpkg.com/has-values/-/has-values-1.0.0.tgz#95b0b63fec2146619a6fe57fe75628d5a39efe4f"
+  integrity sha1-lbC2P+whRmGab+V/51Yo1aOe/k8=
+  dependencies:
+    is-number "^3.0.0"
+    kind-of "^4.0.0"
+
+has@^1.0.0, has@^1.0.1, has@^1.0.3:
+  version "1.0.3"
+  resolved "https://registry.yarnpkg.com/has/-/has-1.0.3.tgz#722d7cbfc1f6aa8241f16dd814e011e1f41e8796"
+  integrity sha512-f2dvO0VU6Oej7RkWJGrehjbzMAjFp5/VKPp5tTpWIV4JHHZK1/BxbFRtf/siA2SWTe09caDmVtYYzWEIbBS4zw==
+  dependencies:
+    function-bind "^1.1.1"
 
 hash-base@^3.0.0:
   version "3.0.4"
   resolved "https://registry.yarnpkg.com/hash-base/-/hash-base-3.0.4.tgz#5fc8686847ecd73499403319a6b0a3f3f6ae4918"
+  integrity sha1-X8hoaEfs1zSZQDMZprCj8/auSRg=
   dependencies:
     inherits "^2.0.1"
     safe-buffer "^5.0.1"
@@ -3467,271 +5633,405 @@ hash-base@^3.0.0:
 hash-sum@^1.0.2:
   version "1.0.2"
   resolved "https://registry.yarnpkg.com/hash-sum/-/hash-sum-1.0.2.tgz#33b40777754c6432573c120cc3808bbd10d47f04"
+  integrity sha1-M7QHd3VMZDJXPBIMw4CLvRDUfwQ=
 
 hash.js@^1.0.0, hash.js@^1.0.3:
-  version "1.1.3"
-  resolved "https://registry.yarnpkg.com/hash.js/-/hash.js-1.1.3.tgz#340dedbe6290187151c1ea1d777a3448935df846"
+  version "1.1.7"
+  resolved "https://registry.yarnpkg.com/hash.js/-/hash.js-1.1.7.tgz#0babca538e8d4ee4a0f8988d68866537a003cf42"
+  integrity sha512-taOaskGt4z4SOANNseOviYDvjEJinIkRgmp7LbKP2YTTmVxWBl87s/uzK9r+44BclBSp2X7K1hqeNfz9JbBeXA==
   dependencies:
     inherits "^2.0.3"
-    minimalistic-assert "^1.0.0"
+    minimalistic-assert "^1.0.1"
 
-hawk@~3.1.3:
-  version "3.1.3"
-  resolved "https://registry.yarnpkg.com/hawk/-/hawk-3.1.3.tgz#078444bd7c1640b0fe540d2c9b73d59678e8e1c4"
-  dependencies:
-    boom "2.x.x"
-    cryptiles "2.x.x"
-    hoek "2.x.x"
-    sntp "1.x.x"
+he@1.2.0, he@1.2.x, he@^1.1.0:
+  version "1.2.0"
+  resolved "https://registry.yarnpkg.com/he/-/he-1.2.0.tgz#84ae65fa7eafb165fddb61566ae14baf05664f0f"
+  integrity sha512-F/1DnUGPopORZi0ni+CvrCgHQ5FyEAHRLSApuYWMmrbSwoN2Mn/7k+Gl38gJnR7yyDZk6WLXwiGod1JOWNDKGw==
 
-he@1.1.x, he@^1.1.0:
+hex-color-regex@^1.1.0:
   version "1.1.0"
-  resolved "https://registry.yarnpkg.com/he/-/he-1.1.0.tgz#29319d49beec13a9b1f3c4f9b2a6dde4859bb2a7"
+  resolved "https://registry.yarnpkg.com/hex-color-regex/-/hex-color-regex-1.1.0.tgz#4c06fccb4602fe2602b3c93df82d7e7dbf1a8a8e"
+  integrity sha512-l9sfDFsuqtOqKDsQdqrMRk0U85RZc0RtOR9yPI7mRVOa4FsR/BVnZ0shmQRM96Ji99kYZP/7hn1cedc1+ApsTQ==
 
-highlight.js@^9.3.0, highlight.js@^9.4.0:
-  version "9.9.0"
-  resolved "https://registry.yarnpkg.com/highlight.js/-/highlight.js-9.9.0.tgz#b9995dcfdc2773e307a34f0460d92b9a474782c0"
+highlight.js@^9.3.0:
+  version "9.13.1"
+  resolved "https://registry.yarnpkg.com/highlight.js/-/highlight.js-9.13.1.tgz#054586d53a6863311168488a0f58d6c505ce641e"
+  integrity sha512-Sc28JNQNDzaH6PORtRLMvif9RSn1mYuOoX3omVjnb0+HbpPygU2ALBI0R/wsiqCb4/fcp07Gdo8g+fhtFrQl6A==
 
 hmac-drbg@^1.0.0:
   version "1.0.1"
   resolved "https://registry.yarnpkg.com/hmac-drbg/-/hmac-drbg-1.0.1.tgz#d2745701025a6c775a6c545793ed502fc0c649a1"
+  integrity sha1-0nRXAQJabHdabFRXk+1QL8DGSaE=
   dependencies:
     hash.js "^1.0.3"
     minimalistic-assert "^1.0.0"
     minimalistic-crypto-utils "^1.0.1"
 
-hoek@2.x.x:
-  version "2.16.3"
-  resolved "https://registry.yarnpkg.com/hoek/-/hoek-2.16.3.tgz#20bb7403d3cea398e91dc4710a8ff1b8274a25ed"
-
 home-or-tmp@^2.0.0:
   version "2.0.0"
   resolved "https://registry.yarnpkg.com/home-or-tmp/-/home-or-tmp-2.0.0.tgz#e36c3f2d2cae7d746a857e38d18d5f32a7882db8"
+  integrity sha1-42w/LSyufXRqhX440Y1fMqeILbg=
   dependencies:
     os-homedir "^1.0.0"
     os-tmpdir "^1.0.1"
 
-homedir-polyfill@^1.0.0:
+homedir-polyfill@^1.0.1:
   version "1.0.1"
   resolved "https://registry.yarnpkg.com/homedir-polyfill/-/homedir-polyfill-1.0.1.tgz#4c2bbc8a758998feebf5ed68580f76d46768b4bc"
+  integrity sha1-TCu8inWJmP7r9e1oWA921GdotLw=
   dependencies:
     parse-passwd "^1.0.0"
 
 hosted-git-info@^2.1.4:
-  version "2.1.5"
-  resolved "https://registry.yarnpkg.com/hosted-git-info/-/hosted-git-info-2.1.5.tgz#0ba81d90da2e25ab34a332e6ec77936e1598118b"
+  version "2.7.1"
+  resolved "https://registry.yarnpkg.com/hosted-git-info/-/hosted-git-info-2.7.1.tgz#97f236977bd6e125408930ff6de3eec6281ec047"
+  integrity sha512-7T/BxH19zbcCTa8XkMlbK5lTo1WtgkFi3GvdWEyNuc4Vex7/9Dqbnpsf4JMydcfj9HCg4zUWFTL3Za6lapg5/w==
+
+hosted-git-info@^2.7.1, hosted-git-info@^2.8.5:
+  version "2.8.5"
+  resolved "https://registry.npm.taobao.org/hosted-git-info/download/hosted-git-info-2.8.5.tgz?cache=0&sync_timestamp=1570493686863&other_urls=https%3A%2F%2Fregistry.npm.taobao.org%2Fhosted-git-info%2Fdownload%2Fhosted-git-info-2.8.5.tgz#759cfcf2c4d156ade59b0b2dfabddc42a6b9c70c"
+  integrity sha1-dZz88sTRVq3lmwst+r3cQqa5xww=
 
 hpack.js@^2.1.6:
   version "2.1.6"
   resolved "https://registry.yarnpkg.com/hpack.js/-/hpack.js-2.1.6.tgz#87774c0949e513f42e84575b3c45681fade2a0b2"
+  integrity sha1-h3dMCUnlE/QuhFdbPEVoH63ioLI=
   dependencies:
     inherits "^2.0.1"
     obuf "^1.0.0"
     readable-stream "^2.0.1"
     wbuf "^1.1.0"
 
+hsl-regex@^1.0.0:
+  version "1.0.0"
+  resolved "https://registry.yarnpkg.com/hsl-regex/-/hsl-regex-1.0.0.tgz#d49330c789ed819e276a4c0d272dffa30b18fe6e"
+  integrity sha1-1JMwx4ntgZ4nakwNJy3/owsY/m4=
+
+hsla-regex@^1.0.0:
+  version "1.0.0"
+  resolved "https://registry.yarnpkg.com/hsla-regex/-/hsla-regex-1.0.0.tgz#c1ce7a3168c8c6614033a4b5f7877f3b225f9c38"
+  integrity sha1-wc56MWjIxmFAM6S194d/OyJfnDg=
+
 html-comment-regex@^1.1.0:
-  version "1.1.1"
-  resolved "https://registry.yarnpkg.com/html-comment-regex/-/html-comment-regex-1.1.1.tgz#668b93776eaae55ebde8f3ad464b307a4963625e"
+  version "1.1.2"
+  resolved "https://registry.yarnpkg.com/html-comment-regex/-/html-comment-regex-1.1.2.tgz#97d4688aeb5c81886a364faa0cad1dda14d433a7"
+  integrity sha512-P+M65QY2JQ5Y0G9KKdlDpo0zK+/OHptU5AaBwUfAIDJZk1MYf32Frm84EcOytfJE0t5JvkAnKlmjsXDnWzCJmQ==
 
 html-entities@^1.2.0:
   version "1.2.1"
   resolved "https://registry.yarnpkg.com/html-entities/-/html-entities-1.2.1.tgz#0df29351f0721163515dfb9e5543e5f6eed5162f"
+  integrity sha1-DfKTUfByEWNRXfueVUPl9u7VFi8=
 
-html-loader@^0.5.1:
-  version "0.5.1"
-  resolved "https://registry.yarnpkg.com/html-loader/-/html-loader-0.5.1.tgz#4f1e8396a1ea6ab42bedc987dfac058070861ebe"
-  dependencies:
-    es6-templates "^0.2.2"
-    fastparse "^1.1.1"
-    html-minifier "^3.0.1"
-    loader-utils "^1.0.2"
-    object-assign "^4.1.0"
-
-html-minifier@^3.0.1, html-minifier@^3.2.3:
-  version "3.2.3"
-  resolved "https://registry.yarnpkg.com/html-minifier/-/html-minifier-3.2.3.tgz#d2ff536e24d95726c332493d8f77d84dbed85372"
+html-minifier@^3.2.3:
+  version "3.5.21"
+  resolved "https://registry.yarnpkg.com/html-minifier/-/html-minifier-3.5.21.tgz#d0040e054730e354db008463593194015212d20c"
+  integrity sha512-LKUKwuJDhxNa3uf/LPR/KVjm/l3rBqtYeCOAekvG8F1vItxMUpueGd94i/asDDr8/1u7InxzFA5EeGjhhG5mMA==
   dependencies:
     camel-case "3.0.x"
-    clean-css "3.4.x"
-    commander "2.9.x"
-    he "1.1.x"
-    ncname "1.0.x"
+    clean-css "4.2.x"
+    commander "2.17.x"
+    he "1.2.x"
     param-case "2.1.x"
     relateurl "0.2.x"
-    uglify-js "2.7.x"
+    uglify-js "3.4.x"
 
-html-webpack-plugin@^2.30.1:
-  version "2.30.1"
-  resolved "https://registry.yarnpkg.com/html-webpack-plugin/-/html-webpack-plugin-2.30.1.tgz#7f9c421b7ea91ec460f56527d78df484ee7537d5"
+html-webpack-plugin@^3.2.0:
+  version "3.2.0"
+  resolved "https://registry.yarnpkg.com/html-webpack-plugin/-/html-webpack-plugin-3.2.0.tgz#b01abbd723acaaa7b37b6af4492ebda03d9dd37b"
+  integrity sha1-sBq71yOsqqeze2r0SS69oD2d03s=
   dependencies:
-    bluebird "^3.4.7"
     html-minifier "^3.2.3"
     loader-utils "^0.2.16"
     lodash "^4.17.3"
     pretty-error "^2.0.2"
+    tapable "^1.0.0"
     toposort "^1.0.0"
+    util.promisify "1.0.0"
 
-htmlparser2@3.8.x, htmlparser2@^3.8.2, htmlparser2@~3.8.1:
-  version "3.8.3"
-  resolved "https://registry.yarnpkg.com/htmlparser2/-/htmlparser2-3.8.3.tgz#996c28b191516a8be86501a7d79757e5c70c1068"
-  dependencies:
-    domelementtype "1"
-    domhandler "2.3"
-    domutils "1.5"
-    entities "1.0"
-    readable-stream "1.1"
-
-htmlparser2@^3.9.0:
-  version "3.9.2"
-  resolved "https://registry.yarnpkg.com/htmlparser2/-/htmlparser2-3.9.2.tgz#1bdf87acca0f3f9e53fa4fcceb0f4b4cbb00b338"
+htmlparser2@^3.8.2:
+  version "3.10.0"
+  resolved "https://registry.yarnpkg.com/htmlparser2/-/htmlparser2-3.10.0.tgz#5f5e422dcf6119c0d983ed36260ce9ded0bee464"
+  integrity sha512-J1nEUGv+MkXS0weHNWVKJJ+UrLfePxRWpN3C9bEi9fLxL2+ggW94DQvgYVXsaT30PGwYRIZKNZXuyMhp3Di4bQ==
   dependencies:
     domelementtype "^1.3.0"
     domhandler "^2.3.0"
     domutils "^1.5.1"
     entities "^1.1.1"
     inherits "^2.0.1"
-    readable-stream "^2.0.2"
+    readable-stream "^3.0.6"
 
 htmlparser2@~3.3.0:
   version "3.3.0"
   resolved "https://registry.yarnpkg.com/htmlparser2/-/htmlparser2-3.3.0.tgz#cc70d05a59f6542e43f0e685c982e14c924a9efe"
+  integrity sha1-zHDQWln2VC5D8OaFyYLhTJJKnv4=
   dependencies:
     domelementtype "1"
     domhandler "2.1"
     domutils "1.1"
     readable-stream "1.0"
 
+http-cache-semantics@^3.8.1:
+  version "3.8.1"
+  resolved "https://registry.npm.taobao.org/http-cache-semantics/download/http-cache-semantics-3.8.1.tgz#39b0e16add9b605bf0a9ef3d9daaf4843b4cacd2"
+  integrity sha1-ObDhat2bYFvwqe89nar0hDtMrNI=
+
 http-deceiver@^1.2.7:
   version "1.2.7"
   resolved "https://registry.yarnpkg.com/http-deceiver/-/http-deceiver-1.2.7.tgz#fa7168944ab9a519d337cb0bec7284dc3e723d87"
+  integrity sha1-+nFolEq5pRnTN8sL7HKE3D5yPYc=
 
-http-errors@~1.5.0:
-  version "1.5.1"
-  resolved "https://registry.yarnpkg.com/http-errors/-/http-errors-1.5.1.tgz#788c0d2c1de2c81b9e6e8c01843b6b97eb920750"
+http-errors@1.6.3, http-errors@~1.6.2, http-errors@~1.6.3:
+  version "1.6.3"
+  resolved "https://registry.yarnpkg.com/http-errors/-/http-errors-1.6.3.tgz#8b55680bb4be283a0b5bf4ea2e38580be1d9320d"
+  integrity sha1-i1VoC7S+KDoLW/TqLjhYC+HZMg0=
   dependencies:
+    depd "~1.1.2"
     inherits "2.0.3"
-    setprototypeof "1.0.2"
-    statuses ">= 1.3.1 < 2"
+    setprototypeof "1.1.0"
+    statuses ">= 1.4.0 < 2"
+
+http-parser-js@>=0.4.0:
+  version "0.5.0"
+  resolved "https://registry.yarnpkg.com/http-parser-js/-/http-parser-js-0.5.0.tgz#d65edbede84349d0dc30320815a15d39cc3cbbd8"
+  integrity sha512-cZdEF7r4gfRIq7ezX9J0T+kQmJNOub71dWbgAXVHDct80TKP4MCETtZQ31xyv38UwgzkWPYF/Xc0ge55dW9Z9w==
+
+http-proxy-agent@^2.1.0:
+  version "2.1.0"
+  resolved "https://registry.npm.taobao.org/http-proxy-agent/download/http-proxy-agent-2.1.0.tgz#e4821beef5b2142a2026bd73926fe537631c5405"
+  integrity sha1-5IIb7vWyFCogJr1zkm/lN2McVAU=
+  dependencies:
+    agent-base "4"
+    debug "3.1.0"
 
-http-proxy-middleware@~0.17.4:
-  version "0.17.4"
-  resolved "https://registry.yarnpkg.com/http-proxy-middleware/-/http-proxy-middleware-0.17.4.tgz#642e8848851d66f09d4f124912846dbaeb41b833"
+http-proxy-middleware@~0.18.0:
+  version "0.18.0"
+  resolved "https://registry.yarnpkg.com/http-proxy-middleware/-/http-proxy-middleware-0.18.0.tgz#0987e6bb5a5606e5a69168d8f967a87f15dd8aab"
+  integrity sha512-Fs25KVMPAIIcgjMZkVHJoKg9VcXcC1C8yb9JUgeDvVXY0S/zgVIhMb+qVswDIgtJe2DfckMSY2d6TuTEutlk6Q==
   dependencies:
     http-proxy "^1.16.2"
-    is-glob "^3.1.0"
-    lodash "^4.17.2"
-    micromatch "^2.3.11"
+    is-glob "^4.0.0"
+    lodash "^4.17.5"
+    micromatch "^3.1.9"
 
 http-proxy@^1.13.0, http-proxy@^1.16.2:
-  version "1.16.2"
-  resolved "https://registry.yarnpkg.com/http-proxy/-/http-proxy-1.16.2.tgz#06dff292952bf64dbe8471fa9df73066d4f37742"
+  version "1.17.0"
+  resolved "https://registry.yarnpkg.com/http-proxy/-/http-proxy-1.17.0.tgz#7ad38494658f84605e2f6db4436df410f4e5be9a"
+  integrity sha512-Taqn+3nNvYRfJ3bGvKfBSRwy1v6eePlm3oc/aWVxZp57DQr5Eq3xhKJi7Z4hZpS8PC3H4qI+Yly5EmFacGuA/g==
   dependencies:
-    eventemitter3 "1.x.x"
-    requires-port "1.x.x"
+    eventemitter3 "^3.0.0"
+    follow-redirects "^1.0.0"
+    requires-port "^1.0.0"
 
-http-signature@~1.1.0:
-  version "1.1.1"
-  resolved "https://registry.yarnpkg.com/http-signature/-/http-signature-1.1.1.tgz#df72e267066cd0ac67fb76adf8e134a8fbcf91bf"
+http-signature@~1.2.0:
+  version "1.2.0"
+  resolved "https://registry.yarnpkg.com/http-signature/-/http-signature-1.2.0.tgz#9aecd925114772f3d95b65a60abb8f7c18fbace1"
+  integrity sha1-muzZJRFHcvPZW2WmCruPfBj7rOE=
   dependencies:
-    assert-plus "^0.2.0"
+    assert-plus "^1.0.0"
     jsprim "^1.2.2"
     sshpk "^1.7.0"
 
-https-browserify@0.0.1:
-  version "0.0.1"
-  resolved "https://registry.yarnpkg.com/https-browserify/-/https-browserify-0.0.1.tgz#3f91365cabe60b77ed0ebba24b454e3e09d95a82"
+https-browserify@^1.0.0:
+  version "1.0.0"
+  resolved "https://registry.yarnpkg.com/https-browserify/-/https-browserify-1.0.0.tgz#ec06c10e0a34c0f2faf199f7fd7fc78fffd03c73"
+  integrity sha1-7AbBDgo0wPL68Zn3/X/Hj//QPHM=
+
+https-proxy-agent@^2.2.3:
+  version "2.2.4"
+  resolved "https://registry.npm.taobao.org/https-proxy-agent/download/https-proxy-agent-2.2.4.tgz?cache=0&other_urls=https%3A%2F%2Fregistry.npm.taobao.org%2Fhttps-proxy-agent%2Fdownload%2Fhttps-proxy-agent-2.2.4.tgz#4ee7a737abd92678a293d9b34a1af4d0d08c787b"
+  integrity sha1-TuenN6vZJniik9mzShr00NCMeHs=
+  dependencies:
+    agent-base "^4.3.0"
+    debug "^3.1.0"
+
+humanize-ms@^1.2.1:
+  version "1.2.1"
+  resolved "https://registry.npm.taobao.org/humanize-ms/download/humanize-ms-1.2.1.tgz#c46e3159a293f6b896da29316d8b6fe8bb79bbed"
+  integrity sha1-xG4xWaKT9riW2ikxbYtv6Lt5u+0=
+  dependencies:
+    ms "^2.0.0"
 
-humps@^1.1.0:
+husky@1.3.1:
+  version "1.3.1"
+  resolved "https://registry.yarnpkg.com/husky/-/husky-1.3.1.tgz#26823e399300388ca2afff11cfa8a86b0033fae0"
+  integrity sha512-86U6sVVVf4b5NYSZ0yvv88dRgBSSXXmHaiq5pP4KDj5JVzdwKgBjEtUPOm8hcoytezFwbU+7gotXNhpHdystlg==
+  dependencies:
+    cosmiconfig "^5.0.7"
+    execa "^1.0.0"
+    find-up "^3.0.0"
+    get-stdin "^6.0.0"
+    is-ci "^2.0.0"
+    pkg-dir "^3.0.0"
+    please-upgrade-node "^3.1.1"
+    read-pkg "^4.0.1"
+    run-node "^1.0.0"
+    slash "^2.0.0"
+
+iconv-lite@0.4.23:
+  version "0.4.23"
+  resolved "https://registry.yarnpkg.com/iconv-lite/-/iconv-lite-0.4.23.tgz#297871f63be507adcfbfca715d0cd0eed84e9a63"
+  integrity sha512-neyTUVFtahjf0mB3dZT77u+8O0QB89jFdnBkd5P1JgYPbPaia3gXXOVL2fq8VyU2gMMD7SaN7QukTB/pmXYvDA==
+  dependencies:
+    safer-buffer ">= 2.1.2 < 3"
+
+iconv-lite@^0.4.17, iconv-lite@^0.4.24, iconv-lite@^0.4.4, iconv-lite@~0.4.13:
+  version "0.4.24"
+  resolved "https://registry.yarnpkg.com/iconv-lite/-/iconv-lite-0.4.24.tgz#2022b4b25fbddc21d2f524974a474aafe733908b"
+  integrity sha512-v3MXnZAcvnywkTUEZomIActle7RXXeedOR31wwl7VlyoXO4Qi9arvSenNQWne1TcRwhCL1HwLI21bEqdpj8/rA==
+  dependencies:
+    safer-buffer ">= 2.1.2 < 3"
+
+icss-replace-symbols@^1.1.0:
   version "1.1.0"
-  resolved "https://registry.yarnpkg.com/humps/-/humps-1.1.0.tgz#99a05cc80b13ae754a3d1e1a92182f271ef1d98f"
+  resolved "https://registry.yarnpkg.com/icss-replace-symbols/-/icss-replace-symbols-1.1.0.tgz#06ea6f83679a7749e386cfe1fe812ae5db223ded"
+  integrity sha1-Bupvg2ead0njhs/h/oEq5dsiPe0=
+
+icss-utils@^4.0.0:
+  version "4.0.0"
+  resolved "https://registry.yarnpkg.com/icss-utils/-/icss-utils-4.0.0.tgz#d52cf4bcdcfa1c45c2dbefb4ffdf6b00ef608098"
+  integrity sha512-bA/xGiwWM17qjllIs9X/y0EjsB7e0AV08F3OL8UPsoNkNRibIuu8f1eKTnQ8QO1DteKKTxTUAn+IEWUToIwGOA==
+  dependencies:
+    postcss "^7.0.5"
 
-iconv-lite@0.4.13:
-  version "0.4.13"
-  resolved "https://registry.yarnpkg.com/iconv-lite/-/iconv-lite-0.4.13.tgz#1f88aba4ab0b1508e8312acc39345f36e992e2f2"
+ieee754@^1.1.4:
+  version "1.1.12"
+  resolved "https://registry.yarnpkg.com/ieee754/-/ieee754-1.1.12.tgz#50bf24e5b9c8bb98af4964c941cdb0918da7b60b"
+  integrity sha512-GguP+DRY+pJ3soyIiGPTvdiVXjZ+DbXOxGpXn3eMvNW4x4irjqXm4wHKscC+TfxSJ0yw/S1F24tqdMNsMZTiLA==
 
-iconv-lite@^0.4.17:
-  version "0.4.19"
-  resolved "http://registry.npm.taobao.org/iconv-lite/download/iconv-lite-0.4.19.tgz#f7468f60135f5e5dad3399c0a81be9a1603a082b"
+iferr@^0.1.5:
+  version "0.1.5"
+  resolved "https://registry.yarnpkg.com/iferr/-/iferr-0.1.5.tgz#c60eed69e6d8fdb6b3104a1fcbca1c192dc5b501"
+  integrity sha1-xg7taebY/bazEEofy8ocGS3FtQE=
 
-icss-replace-symbols@^1.0.2:
+iferr@^1.0.2:
   version "1.0.2"
-  resolved "https://registry.yarnpkg.com/icss-replace-symbols/-/icss-replace-symbols-1.0.2.tgz#cb0b6054eb3af6edc9ab1d62d01933e2d4c8bfa5"
+  resolved "https://registry.npm.taobao.org/iferr/download/iferr-1.0.2.tgz#e9fde49a9da06dc4a4194c6c9ed6d08305037a6d"
+  integrity sha1-6f3kmp2gbcSkGUxsntbQgwUDem0=
 
-icss-utils@^2.1.0:
-  version "2.1.0"
-  resolved "https://registry.yarnpkg.com/icss-utils/-/icss-utils-2.1.0.tgz#83f0a0ec378bf3246178b6c2ad9136f135b1c962"
+ignore-walk@^3.0.1:
+  version "3.0.1"
+  resolved "https://registry.yarnpkg.com/ignore-walk/-/ignore-walk-3.0.1.tgz#a83e62e7d272ac0e3b551aaa82831a19b69f82f8"
+  integrity sha512-DTVlMx3IYPe0/JJcYP7Gxg7ttZZu3IInhuEhbchuqneY9wWe5Ojy2mXLBaQFUQmo0AW2r3qG7m1mg86js+gnlQ==
   dependencies:
-    postcss "^6.0.1"
+    minimatch "^3.0.4"
 
-ieee754@^1.1.4:
-  version "1.1.8"
-  resolved "https://registry.yarnpkg.com/ieee754/-/ieee754-1.1.8.tgz#be33d40ac10ef1926701f6f08a2d86fbfd1ad3e4"
+ignore@^3.3.3, ignore@^3.3.5:
+  version "3.3.10"
+  resolved "https://registry.yarnpkg.com/ignore/-/ignore-3.3.10.tgz#0a97fb876986e8081c631160f8f9f389157f0043"
+  integrity sha512-Pgs951kaMm5GXP7MOvxERINe3gsaVjUWFm+UZPSq9xYriQAksyhg0csnS0KXSNRD5NmNdapXEpjxG49+AKh/ug==
 
-ignore@^3.3.3:
-  version "3.3.7"
-  resolved "http://registry.npm.taobao.org/ignore/download/ignore-3.3.7.tgz#612289bfb3c220e186a58118618d5be8c1bab021"
+import-fresh@^2.0.0:
+  version "2.0.0"
+  resolved "https://registry.yarnpkg.com/import-fresh/-/import-fresh-2.0.0.tgz#d81355c15612d386c61f9ddd3922d4304822a546"
+  integrity sha1-2BNVwVYS04bGH53dOSLUMEgipUY=
+  dependencies:
+    caller-path "^2.0.0"
+    resolve-from "^3.0.0"
 
-img-stats@^0.5.2:
-  version "0.5.2"
-  resolved "http://registry.npmjs.org/img-stats/-/img-stats-0.5.2.tgz#c203496c42f2d9eb2e5ab8232fa756bab32c9e2b"
+import-fresh@^3.0.0:
+  version "3.2.1"
+  resolved "https://registry.yarnpkg.com/import-fresh/-/import-fresh-3.2.1.tgz#633ff618506e793af5ac91bf48b72677e15cbe66"
+  integrity sha512-6e1q1cnWP2RXD9/keSkxHScg508CdXqXWgWBaETNhyuBFz+kUZlKboh+ISK+bU++DmbHimVBrOz/zzPe0sZ3sQ==
   dependencies:
-    xmldom "^0.1.19"
+    parent-module "^1.0.0"
+    resolve-from "^4.0.0"
+
+import-lazy@^2.1.0:
+  version "2.1.0"
+  resolved "https://registry.npm.taobao.org/import-lazy/download/import-lazy-2.1.0.tgz#05698e3d45c88e8d7e9d92cb0584e77f096f3e43"
+  integrity sha1-BWmOPUXIjo1+nZLLBYTnfwlvPkM=
+
+import-local@^2.0.0:
+  version "2.0.0"
+  resolved "https://registry.yarnpkg.com/import-local/-/import-local-2.0.0.tgz#55070be38a5993cf18ef6db7e961f5bee5c5a09d"
+  integrity sha512-b6s04m3O+s3CGSbqDIyP4R6aAwAeYlVq9+WUWep6iHa8ETRf9yei1U48C5MmfJmV9AiLYYBKPMq/W+/WRpQmCQ==
+  dependencies:
+    pkg-dir "^3.0.0"
+    resolve-cwd "^2.0.0"
 
 imurmurhash@^0.1.4:
   version "0.1.4"
-  resolved "http://registry.npm.taobao.org/imurmurhash/download/imurmurhash-0.1.4.tgz#9218b9b2b928a238b13dc4fb6b6d576f231453ea"
+  resolved "https://registry.yarnpkg.com/imurmurhash/-/imurmurhash-0.1.4.tgz#9218b9b2b928a238b13dc4fb6b6d576f231453ea"
+  integrity sha1-khi5srkoojixPcT7a21XbyMUU+o=
 
 in-publish@^2.0.0:
-  version "2.0.0"
-  resolved "https://registry.yarnpkg.com/in-publish/-/in-publish-2.0.0.tgz#e20ff5e3a2afc2690320b6dc552682a9c7fadf51"
+  version "2.0.1"
+  resolved "https://registry.npm.taobao.org/in-publish/download/in-publish-2.0.1.tgz#948b1a535c8030561cea522f73f78f4be357e00c"
+  integrity sha1-lIsaU1yAMFYc6lIvc/ePS+NX4Aw=
 
 indent-string@^2.1.0:
   version "2.1.0"
   resolved "https://registry.yarnpkg.com/indent-string/-/indent-string-2.1.0.tgz#8e2d48348742121b4a8218b7a137e9a52049dc80"
+  integrity sha1-ji1INIdCEhtKghi3oTfppSBJ3IA=
   dependencies:
     repeating "^2.0.0"
 
+indent-string@^3.0.0:
+  version "3.2.0"
+  resolved "https://registry.npmjs.org/indent-string/-/indent-string-3.2.0.tgz#4a5fd6d27cc332f37e5419a504dbb837105c9289"
+  integrity sha1-Sl/W0nzDMvN+VBmlBNu4NxBckok=
+
 indexes-of@^1.0.1:
   version "1.0.1"
   resolved "https://registry.yarnpkg.com/indexes-of/-/indexes-of-1.0.1.tgz#f30f716c8e2bd346c7b67d3df3915566a7c05607"
+  integrity sha1-8w9xbI4r00bHtn0985FVZqfAVgc=
 
 indexof@0.0.1:
   version "0.0.1"
   resolved "https://registry.yarnpkg.com/indexof/-/indexof-0.0.1.tgz#82dc336d232b9062179d05ab3293a66059fd435d"
+  integrity sha1-gtwzbSMrkGIXnQWrMpOmYFn9Q10=
+
+infer-owner@^1.0.3, infer-owner@^1.0.4:
+  version "1.0.4"
+  resolved "https://registry.npm.taobao.org/infer-owner/download/infer-owner-1.0.4.tgz#c4cefcaa8e51051c2a40ba2ce8a3d27295af9467"
+  integrity sha1-xM78qo5RBRwqQLos6KPScpWvlGc=
 
-inflight@^1.0.4:
+inflight@^1.0.4, inflight@~1.0.6:
   version "1.0.6"
-  resolved "http://registry.npm.taobao.org/inflight/download/inflight-1.0.6.tgz#49bd6331d7d02d0c09bc910a1075ba8165b56df9"
+  resolved "https://registry.yarnpkg.com/inflight/-/inflight-1.0.6.tgz#49bd6331d7d02d0c09bc910a1075ba8165b56df9"
+  integrity sha1-Sb1jMdfQLQwJvJEKEHW6gWW1bfk=
   dependencies:
     once "^1.3.0"
     wrappy "1"
 
-inherits@1:
-  version "1.0.2"
-  resolved "https://registry.yarnpkg.com/inherits/-/inherits-1.0.2.tgz#ca4309dadee6b54cc0b8d247e8d7c7a0975bdc9b"
-
-inherits@2, inherits@2.0.3, inherits@^2.0.1, inherits@^2.0.3, inherits@~2.0.0, inherits@~2.0.1, inherits@~2.0.3:
+inherits@2, inherits@2.0.3, inherits@^2.0.1, inherits@^2.0.3, inherits@~2.0.1, inherits@~2.0.3:
   version "2.0.3"
   resolved "https://registry.yarnpkg.com/inherits/-/inherits-2.0.3.tgz#633c2c83e3da42a502f52466022480f4208261de"
+  integrity sha1-Yzwsg+PaQqUC9SRmAiSA9CCCYd4=
 
 inherits@2.0.1:
   version "2.0.1"
   resolved "https://registry.yarnpkg.com/inherits/-/inherits-2.0.1.tgz#b17d08d326b4423e568eff719f91b0b1cbdf69f1"
+  integrity sha1-sX0I0ya0Qj5Wjv9xn5GwscvfafE=
 
-ini@^1.3.4, ini@~1.3.0:
-  version "1.3.4"
-  resolved "https://registry.yarnpkg.com/ini/-/ini-1.3.4.tgz#0537cb79daf59b59a1a517dff706c86ec039162e"
+inherits@^2.0.4, inherits@~2.0.0:
+  version "2.0.4"
+  resolved "https://registry.npm.taobao.org/inherits/download/inherits-2.0.4.tgz#0fa2c64f932917c3433a0ded55363aae37416b7c"
+  integrity sha1-D6LGT5MpF8NDOg3tVTY6rjdBa3w=
 
-inject-loader@^3.0.1:
-  version "3.0.1"
-  resolved "https://registry.yarnpkg.com/inject-loader/-/inject-loader-3.0.1.tgz#844a4596150cf6b864c2f79806d40a2caee4c2c7"
+ini@^1.3.2, ini@^1.3.4, ini@^1.3.5, ini@~1.3.0:
+  version "1.3.5"
+  resolved "https://registry.yarnpkg.com/ini/-/ini-1.3.5.tgz#eee25f56db1c9ec6085e0c22778083f596abf927"
+  integrity sha512-RZY5huIKCMRWDUqZlEi72f/lmXKMvuszcMBduliQ3nnWbx9X/ZBQO7DijMEYS9EhHBb2qacRUMtC7svLwe0lcw==
+
+init-package-json@^1.10.3:
+  version "1.10.3"
+  resolved "https://registry.npm.taobao.org/init-package-json/download/init-package-json-1.10.3.tgz#45ffe2f610a8ca134f2bd1db5637b235070f6cbe"
+  integrity sha1-Rf/i9hCoyhNPK9HbVjeyNQcPbL4=
   dependencies:
-    babel-core "~6"
+    glob "^7.1.1"
+    npm-package-arg "^4.0.0 || ^5.0.0 || ^6.0.0"
+    promzard "^0.3.0"
+    read "~1.0.1"
+    read-package-json "1 || 2"
+    semver "2.x || 3.x || 4 || 5"
+    validate-npm-package-license "^3.0.1"
+    validate-npm-package-name "^3.0.0"
 
-inquirer@^3.0.6:
+inquirer@^3.0.6, inquirer@^3.3.0:
   version "3.3.0"
-  resolved "http://registry.npm.taobao.org/inquirer/download/inquirer-3.3.0.tgz#9dd2f2ad765dcab1ff0443b491442a20ba227dc9"
+  resolved "https://registry.yarnpkg.com/inquirer/-/inquirer-3.3.0.tgz#9dd2f2ad765dcab1ff0443b491442a20ba227dc9"
+  integrity sha512-h+xtnyk4EwKvFWHrUYsWErEVR+igKtLdchu+o0Z1RL7VU/jVMFbYir2bp6bAj8efFNxWqHX0dIss6fJQ+/+qeQ==
   dependencies:
     ansi-escapes "^3.0.0"
     chalk "^2.0.0"
@@ -3748,307 +6048,553 @@ inquirer@^3.0.6:
     strip-ansi "^4.0.0"
     through "^2.3.6"
 
-internal-ip@1.2.0:
-  version "1.2.0"
-  resolved "https://registry.yarnpkg.com/internal-ip/-/internal-ip-1.2.0.tgz#ae9fbf93b984878785d50a8de1b356956058cf5c"
+inquirer@^6.2.2:
+  version "6.2.2"
+  resolved "https://registry.yarnpkg.com/inquirer/-/inquirer-6.2.2.tgz#46941176f65c9eb20804627149b743a218f25406"
+  integrity sha512-Z2rREiXA6cHRR9KBOarR3WuLlFzlIfAEIiB45ll5SSadMg7WqOh1MKEjjndfuH5ewXdixWCxqnVfGOQzPeiztA==
   dependencies:
-    meow "^3.3.0"
+    ansi-escapes "^3.2.0"
+    chalk "^2.4.2"
+    cli-cursor "^2.1.0"
+    cli-width "^2.0.0"
+    external-editor "^3.0.3"
+    figures "^2.0.0"
+    lodash "^4.17.11"
+    mute-stream "0.0.7"
+    run-async "^2.2.0"
+    rxjs "^6.4.0"
+    string-width "^2.1.0"
+    strip-ansi "^5.0.0"
+    through "^2.3.6"
 
-interpret@^1.0.0:
-  version "1.0.1"
-  resolved "https://registry.yarnpkg.com/interpret/-/interpret-1.0.1.tgz#d579fb7f693b858004947af39fa0db49f795602c"
+install@^0.10.1:
+  version "0.10.4"
+  resolved "https://registry.npm.taobao.org/install/download/install-0.10.4.tgz#9cb09115768b93a582d1450a6ba3f275975b49aa"
+  integrity sha1-nLCRFXaLk6WC0UUKa6PydZdbSao=
 
-invariant@^2.2.0:
-  version "2.2.2"
-  resolved "https://registry.yarnpkg.com/invariant/-/invariant-2.2.2.tgz#9e1f56ac0acdb6bf303306f338be3b204ae60360"
+internal-ip@^3.0.1:
+  version "3.0.1"
+  resolved "https://registry.yarnpkg.com/internal-ip/-/internal-ip-3.0.1.tgz#df5c99876e1d2eb2ea2d74f520e3f669a00ece27"
+  integrity sha512-NXXgESC2nNVtU+pqmC9e6R8B1GpKxzsAQhffvh5AL79qKnodd+L7tnEQmTiUAVngqLalPbSqRA7XGIEL5nCd0Q==
+  dependencies:
+    default-gateway "^2.6.0"
+    ipaddr.js "^1.5.2"
+
+interpret@^1.1.0:
+  version "1.2.0"
+  resolved "https://registry.yarnpkg.com/interpret/-/interpret-1.2.0.tgz#d5061a6224be58e8083985f5014d844359576296"
+  integrity sha512-mT34yGKMNceBQUoVn7iCDKDntA7SC6gycMAWzGx1z/CMCTV7b2AAtXlo3nRyHZ1FelRkQbQjprHSYGwzLtkVbw==
+
+invariant@^2.2.2:
+  version "2.2.4"
+  resolved "https://registry.yarnpkg.com/invariant/-/invariant-2.2.4.tgz#610f3c92c9359ce1db616e538008d23ff35158e6"
+  integrity sha512-phJfQVBuaJM5raOpJjSfkiD6BpbCE4Ns//LaXl6wGYtUBY83nWS6Rf9tXm2e8VaK60JEjYldbPif/A2B1C2gNA==
   dependencies:
     loose-envify "^1.0.0"
 
 invert-kv@^1.0.0:
   version "1.0.0"
   resolved "https://registry.yarnpkg.com/invert-kv/-/invert-kv-1.0.0.tgz#104a8e4aaca6d3d8cd157a8ef8bfab2d7a3ffdb6"
+  integrity sha1-EEqOSqym09jNFXqO+L+rLXo//bY=
+
+invert-kv@^2.0.0:
+  version "2.0.0"
+  resolved "https://registry.yarnpkg.com/invert-kv/-/invert-kv-2.0.0.tgz#7393f5afa59ec9ff5f67a27620d11c226e3eec02"
+  integrity sha512-wPVv/y/QQ/Uiirj/vh3oP+1Ww+AWehmi1g5fFWGPF6IpCBCDVrhgHRMvrLfdYcwDh3QJbGXDW4JAuzxElLSqKA==
+
+ip-regex@^2.1.0:
+  version "2.1.0"
+  resolved "https://registry.yarnpkg.com/ip-regex/-/ip-regex-2.1.0.tgz#fa78bf5d2e6913c911ce9f819ee5146bb6d844e9"
+  integrity sha1-+ni/XS5pE8kRzp+BnuUUa7bYROk=
 
-ip@^1.1.0, ip@^1.1.5:
+ip@1.1.5, ip@^1.1.0, ip@^1.1.5:
   version "1.1.5"
   resolved "https://registry.yarnpkg.com/ip/-/ip-1.1.5.tgz#bdded70114290828c0a039e72ef25f5aaec4354a"
+  integrity sha1-vd7XARQpCCjAoDnnLvJfWq7ENUo=
 
-ipaddr.js@1.1.1:
-  version "1.1.1"
-  resolved "https://registry.yarnpkg.com/ipaddr.js/-/ipaddr.js-1.1.1.tgz#c791d95f52b29c1247d5df80ada39b8a73647230"
+ipaddr.js@1.8.0:
+  version "1.8.0"
+  resolved "https://registry.yarnpkg.com/ipaddr.js/-/ipaddr.js-1.8.0.tgz#eaa33d6ddd7ace8f7f6fe0c9ca0440e706738b1e"
+  integrity sha1-6qM9bd16zo9/b+DJygRA5wZzix4=
+
+ipaddr.js@^1.5.2:
+  version "1.8.1"
+  resolved "https://registry.yarnpkg.com/ipaddr.js/-/ipaddr.js-1.8.1.tgz#fa4b79fa47fd3def5e3b159825161c0a519c9427"
+  integrity sha1-+kt5+kf9Pe9eOxWYJRYcClGclCc=
 
 is-absolute-url@^2.0.0:
   version "2.1.0"
   resolved "https://registry.yarnpkg.com/is-absolute-url/-/is-absolute-url-2.1.0.tgz#50530dfb84fcc9aa7dbe7852e83a37b93b9f2aa6"
+  integrity sha1-UFMN+4T8yap9vnhS6Do3uTufKqY=
+
+is-absolute@^1.0.0:
+  version "1.0.0"
+  resolved "https://registry.yarnpkg.com/is-absolute/-/is-absolute-1.0.0.tgz#395e1ae84b11f26ad1795e73c17378e48a301576"
+  integrity sha512-dOWoqflvcydARa360Gvv18DZ/gRuHKi2NU/wU5X1ZFzdYfH29nkiNZsF3mp4OJ3H4yo9Mx8A/uAGNzpzPN3yBA==
+  dependencies:
+    is-relative "^1.0.0"
+    is-windows "^1.0.1"
+
+is-accessor-descriptor@^0.1.6:
+  version "0.1.6"
+  resolved "https://registry.yarnpkg.com/is-accessor-descriptor/-/is-accessor-descriptor-0.1.6.tgz#a9e12cb3ae8d876727eeef3843f8a0897b5c98d6"
+  integrity sha1-qeEss66Nh2cn7u84Q/igiXtcmNY=
+  dependencies:
+    kind-of "^3.0.2"
 
-is-absolute@^0.2.3:
-  version "0.2.6"
-  resolved "https://registry.yarnpkg.com/is-absolute/-/is-absolute-0.2.6.tgz#20de69f3db942ef2d87b9c2da36f172235b1b5eb"
+is-accessor-descriptor@^1.0.0:
+  version "1.0.0"
+  resolved "https://registry.yarnpkg.com/is-accessor-descriptor/-/is-accessor-descriptor-1.0.0.tgz#169c2f6d3df1f992618072365c9b0ea1f6878656"
+  integrity sha512-m5hnHTkcVsPfqx3AKlyttIPb7J+XykHvJP2B9bZDjlhLIoEq4XoK64Vg7boZlVWYK6LUY94dYPEE7Lh0ZkZKcQ==
   dependencies:
-    is-relative "^0.2.1"
-    is-windows "^0.2.0"
+    kind-of "^6.0.0"
 
 is-arrayish@^0.2.1:
   version "0.2.1"
   resolved "https://registry.yarnpkg.com/is-arrayish/-/is-arrayish-0.2.1.tgz#77c99840527aa8ecb1a8ba697b80645a7a926a9d"
+  integrity sha1-d8mYQFJ6qOyxqLppe4BkWnqSap0=
+
+is-arrayish@^0.3.1:
+  version "0.3.2"
+  resolved "https://registry.yarnpkg.com/is-arrayish/-/is-arrayish-0.3.2.tgz#4574a2ae56f7ab206896fb431eaeed066fdf8f03"
+  integrity sha512-eVRqCvVlZbuw3GrM63ovNSNAeA1K16kaR/LRY/92w0zxQ5/1YzwblUX652i4Xs9RwAGjW9d9y6X88t8OaAJfWQ==
 
 is-binary-path@^1.0.0:
   version "1.0.1"
   resolved "https://registry.yarnpkg.com/is-binary-path/-/is-binary-path-1.0.1.tgz#75f16642b480f187a711c814161fd3a4a7655898"
+  integrity sha1-dfFmQrSA8YenEcgUFh/TpKdlWJg=
   dependencies:
     binary-extensions "^1.0.0"
 
-is-buffer@^1.0.2, is-buffer@^1.1.5:
-  version "1.1.5"
-  resolved "https://registry.yarnpkg.com/is-buffer/-/is-buffer-1.1.5.tgz#1f3b26ef613b214b88cbca23cc6c01d87961eecc"
+is-buffer@^1.1.5:
+  version "1.1.6"
+  resolved "https://registry.yarnpkg.com/is-buffer/-/is-buffer-1.1.6.tgz#efaa2ea9daa0d7ab2ea13a97b2b8ad51fefbe8be"
+  integrity sha512-NcdALwpXkTm5Zvvbk7owOUSvVvBKDgKP5/ewfXEznmQFfs4ZRmanOeKBTjRVjka3QFoN6XJ+9F3USqfHqTaU5w==
+
+is-buffer@^2.0.2:
+  version "2.0.4"
+  resolved "https://registry.npm.taobao.org/is-buffer/download/is-buffer-2.0.4.tgz#3e572f23c8411a5cfd9557c849e3665e0b290623"
+  integrity sha1-PlcvI8hBGlz9lVfISeNmXgspBiM=
+
+is-buffer@~2.0.3:
+  version "2.0.3"
+  resolved "https://registry.npmjs.org/is-buffer/-/is-buffer-2.0.3.tgz#4ecf3fcf749cbd1e472689e109ac66261a25e725"
+  integrity sha512-U15Q7MXTuZlrbymiz95PJpZxu8IlipAp4dtS3wOdgPXx3mqBnslrWU14kxfHB+Py/+2PVKSr37dMAgM2A4uArw==
 
 is-builtin-module@^1.0.0:
   version "1.0.0"
   resolved "https://registry.yarnpkg.com/is-builtin-module/-/is-builtin-module-1.0.0.tgz#540572d34f7ac3119f8f76c30cbc1b1e037affbe"
+  integrity sha1-VAVy0096wxGfj3bDDLwbHgN6/74=
   dependencies:
     builtin-modules "^1.0.0"
 
-is-callable@^1.1.1, is-callable@^1.1.3:
-  version "1.1.3"
-  resolved "https://registry.yarnpkg.com/is-callable/-/is-callable-1.1.3.tgz#86eb75392805ddc33af71c92a0eedf74ee7604b2"
+is-callable@^1.1.4:
+  version "1.1.4"
+  resolved "https://registry.yarnpkg.com/is-callable/-/is-callable-1.1.4.tgz#1e1adf219e1eeb684d691f9d6a05ff0d30a24d75"
+  integrity sha512-r5p9sxJjYnArLjObpjA4xu5EKI3CuKHkJXMhT7kwbpUyIFD1n5PMAsoPvWnvtZiNz7LjkYDRZhd7FlI0eMijEA==
+
+is-ci@^1.0.10:
+  version "1.2.1"
+  resolved "https://registry.npm.taobao.org/is-ci/download/is-ci-1.2.1.tgz#e3779c8ee17fccf428488f6e281187f2e632841c"
+  integrity sha1-43ecjuF/zPQoSI9uKBGH8uYyhBw=
+  dependencies:
+    ci-info "^1.5.0"
+
+is-ci@^2.0.0:
+  version "2.0.0"
+  resolved "https://registry.yarnpkg.com/is-ci/-/is-ci-2.0.0.tgz#6bc6334181810e04b5c22b3d589fdca55026404c"
+  integrity sha512-YfJT7rkpQB0updsdHLGWrvhBJfcfzNNawYDNIyQXJz0IViGf75O8EBPKSdvw2rF+LGCsX4FZ8tcr3b19LcZq4w==
+  dependencies:
+    ci-info "^2.0.0"
+
+is-cidr@^3.0.0:
+  version "3.1.0"
+  resolved "https://registry.npm.taobao.org/is-cidr/download/is-cidr-3.1.0.tgz#72e233d8e1c4cd1d3f11713fcce3eba7b0e3476f"
+  integrity sha1-cuIz2OHEzR0/EXE/zOPrp7DjR28=
+  dependencies:
+    cidr-regex "^2.0.10"
+
+is-color-stop@^1.0.0:
+  version "1.1.0"
+  resolved "https://registry.yarnpkg.com/is-color-stop/-/is-color-stop-1.1.0.tgz#cfff471aee4dd5c9e158598fbe12967b5cdad345"
+  integrity sha1-z/9HGu5N1cnhWFmPvhKWe1za00U=
+  dependencies:
+    css-color-names "^0.0.4"
+    hex-color-regex "^1.1.0"
+    hsl-regex "^1.0.0"
+    hsla-regex "^1.0.0"
+    rgb-regex "^1.0.1"
+    rgba-regex "^1.0.0"
+
+is-data-descriptor@^0.1.4:
+  version "0.1.4"
+  resolved "https://registry.yarnpkg.com/is-data-descriptor/-/is-data-descriptor-0.1.4.tgz#0b5ee648388e2c860282e793f1856fec3f301b56"
+  integrity sha1-C17mSDiOLIYCgueT8YVv7D8wG1Y=
+  dependencies:
+    kind-of "^3.0.2"
+
+is-data-descriptor@^1.0.0:
+  version "1.0.0"
+  resolved "https://registry.yarnpkg.com/is-data-descriptor/-/is-data-descriptor-1.0.0.tgz#d84876321d0e7add03990406abbbbd36ba9268c7"
+  integrity sha512-jbRXy1FmtAoCjQkVmIVYwuuqDFUbaOeDjmed1tOGPrsMhtJA4rD9tkgA0F1qJ3gRFRXcHYVkdeaP50Q5rE/jLQ==
+  dependencies:
+    kind-of "^6.0.0"
 
 is-date-object@^1.0.1:
   version "1.0.1"
   resolved "https://registry.yarnpkg.com/is-date-object/-/is-date-object-1.0.1.tgz#9aa20eb6aeebbff77fbd33e74ca01b33581d3a16"
+  integrity sha1-mqIOtq7rv/d/vTPnTKAbM1gdOhY=
+
+is-descriptor@^0.1.0:
+  version "0.1.6"
+  resolved "https://registry.yarnpkg.com/is-descriptor/-/is-descriptor-0.1.6.tgz#366d8240dde487ca51823b1ab9f07a10a78251ca"
+  integrity sha512-avDYr0SB3DwO9zsMov0gKCESFYqCnE4hq/4z3TdUlukEy5t9C0YRq7HLrsN52NAcqXKaepeCD0n+B0arnVG3Hg==
+  dependencies:
+    is-accessor-descriptor "^0.1.6"
+    is-data-descriptor "^0.1.4"
+    kind-of "^5.0.0"
+
+is-descriptor@^1.0.0, is-descriptor@^1.0.2:
+  version "1.0.2"
+  resolved "https://registry.yarnpkg.com/is-descriptor/-/is-descriptor-1.0.2.tgz#3b159746a66604b04f8c81524ba365c5f14d86ec"
+  integrity sha512-2eis5WqQGV7peooDyLmNEPUrps9+SXX5c9pL3xEB+4e9HnGuDa7mB7kHxHw4CbqS9k1T2hOH3miL8n8WtiYVtg==
+  dependencies:
+    is-accessor-descriptor "^1.0.0"
+    is-data-descriptor "^1.0.0"
+    kind-of "^6.0.2"
 
 is-directory@^0.3.1:
   version "0.3.1"
   resolved "https://registry.yarnpkg.com/is-directory/-/is-directory-0.3.1.tgz#61339b6f2475fc772fd9c9d83f5c8575dc154ae1"
+  integrity sha1-YTObbyR1/Hcv2cnYP1yFddwVSuE=
 
 is-dotfile@^1.0.0:
-  version "1.0.2"
-  resolved "https://registry.yarnpkg.com/is-dotfile/-/is-dotfile-1.0.2.tgz#2c132383f39199f8edc268ca01b9b007d205cc4d"
+  version "1.0.3"
+  resolved "https://registry.yarnpkg.com/is-dotfile/-/is-dotfile-1.0.3.tgz#a6a2f32ffd2dfb04f5ca25ecd0f6b83cf798a1e1"
+  integrity sha1-pqLzL/0t+wT1yiXs0Pa4PPeYoeE=
 
 is-equal-shallow@^0.1.3:
   version "0.1.3"
   resolved "https://registry.yarnpkg.com/is-equal-shallow/-/is-equal-shallow-0.1.3.tgz#2238098fc221de0bcfa5d9eac4c45d638aa1c534"
+  integrity sha1-IjgJj8Ih3gvPpdnqxMRdY4qhxTQ=
   dependencies:
     is-primitive "^2.0.0"
 
-is-extendable@^0.1.1:
+is-extendable@^0.1.0, is-extendable@^0.1.1:
   version "0.1.1"
   resolved "https://registry.yarnpkg.com/is-extendable/-/is-extendable-0.1.1.tgz#62b110e289a471418e3ec36a617d472e301dfc89"
+  integrity sha1-YrEQ4omkcUGOPsNqYX1HLjAd/Ik=
+
+is-extendable@^1.0.1:
+  version "1.0.1"
+  resolved "https://registry.yarnpkg.com/is-extendable/-/is-extendable-1.0.1.tgz#a7470f9e426733d81bd81e1155264e3a3507cab4"
+  integrity sha512-arnXMxT1hhoKo9k1LZdmlNyJdDDfy2v0fXjFlmok4+i8ul/6WlbVge9bhM74OpNPQPMGUToDtz+KXa1PneJxOA==
+  dependencies:
+    is-plain-object "^2.0.4"
 
 is-extglob@^1.0.0:
   version "1.0.0"
   resolved "https://registry.yarnpkg.com/is-extglob/-/is-extglob-1.0.0.tgz#ac468177c4943405a092fc8f29760c6ffc6206c0"
+  integrity sha1-rEaBd8SUNAWgkvyPKXYMb/xiBsA=
 
 is-extglob@^2.1.0, is-extglob@^2.1.1:
   version "2.1.1"
   resolved "https://registry.yarnpkg.com/is-extglob/-/is-extglob-2.1.1.tgz#a88c02535791f02ed37c76a1b9ea9773c833f8c2"
+  integrity sha1-qIwCU1eR8C7TfHahueqXc8gz+MI=
 
 is-finite@^1.0.0:
   version "1.0.2"
   resolved "https://registry.yarnpkg.com/is-finite/-/is-finite-1.0.2.tgz#cc6677695602be550ef11e8b4aa6305342b6d0aa"
+  integrity sha1-zGZ3aVYCvlUO8R6LSqYwU0K20Ko=
   dependencies:
     number-is-nan "^1.0.0"
 
 is-fullwidth-code-point@^1.0.0:
   version "1.0.0"
   resolved "https://registry.yarnpkg.com/is-fullwidth-code-point/-/is-fullwidth-code-point-1.0.0.tgz#ef9e31386f031a7f0d643af82fde50c457ef00cb"
+  integrity sha1-754xOG8DGn8NZDr4L95QxFfvAMs=
   dependencies:
     number-is-nan "^1.0.0"
 
 is-fullwidth-code-point@^2.0.0:
   version "2.0.0"
-  resolved "http://registry.npm.taobao.org/is-fullwidth-code-point/download/is-fullwidth-code-point-2.0.0.tgz#a3b30a5c4f199183167aaab93beefae3ddfb654f"
+  resolved "https://registry.yarnpkg.com/is-fullwidth-code-point/-/is-fullwidth-code-point-2.0.0.tgz#a3b30a5c4f199183167aaab93beefae3ddfb654f"
+  integrity sha1-o7MKXE8ZkYMWeqq5O+764937ZU8=
 
 is-glob@^2.0.0, is-glob@^2.0.1:
   version "2.0.1"
   resolved "https://registry.yarnpkg.com/is-glob/-/is-glob-2.0.1.tgz#d096f926a3ded5600f3fdfd91198cb0888c2d863"
+  integrity sha1-0Jb5JqPe1WAPP9/ZEZjLCIjC2GM=
   dependencies:
     is-extglob "^1.0.0"
 
 is-glob@^3.1.0:
   version "3.1.0"
   resolved "https://registry.yarnpkg.com/is-glob/-/is-glob-3.1.0.tgz#7ba5ae24217804ac70707b96922567486cc3e84a"
+  integrity sha1-e6WuJCF4BKxwcHuWkiVnSGzD6Eo=
   dependencies:
     is-extglob "^2.1.0"
 
 is-glob@^4.0.0:
   version "4.0.0"
   resolved "https://registry.yarnpkg.com/is-glob/-/is-glob-4.0.0.tgz#9521c76845cc2610a85203ddf080a958c2ffabc0"
+  integrity sha1-lSHHaEXMJhCoUgPd8ICpWML/q8A=
   dependencies:
     is-extglob "^2.1.1"
 
-is-my-json-valid@^2.12.4:
-  version "2.15.0"
-  resolved "https://registry.yarnpkg.com/is-my-json-valid/-/is-my-json-valid-2.15.0.tgz#936edda3ca3c211fd98f3b2d3e08da43f7b2915b"
+is-installed-globally@^0.1.0:
+  version "0.1.0"
+  resolved "https://registry.npm.taobao.org/is-installed-globally/download/is-installed-globally-0.1.0.tgz#0dfd98f5a9111716dd535dda6492f67bf3d25a80"
+  integrity sha1-Df2Y9akRFxbdU13aZJL2e/PSWoA=
   dependencies:
-    generate-function "^2.0.0"
-    generate-object-property "^1.1.0"
-    jsonpointer "^4.0.0"
-    xtend "^4.0.0"
+    global-dirs "^0.1.0"
+    is-path-inside "^1.0.0"
 
-is-number@^0.1.1:
-  version "0.1.1"
-  resolved "https://registry.yarnpkg.com/is-number/-/is-number-0.1.1.tgz#69a7af116963d47206ec9bd9b48a14216f1e3806"
+is-negated-glob@^1.0.0:
+  version "1.0.0"
+  resolved "https://registry.yarnpkg.com/is-negated-glob/-/is-negated-glob-1.0.0.tgz#6910bca5da8c95e784b5751b976cf5a10fee36d2"
+  integrity sha1-aRC8pdqMleeEtXUbl2z1oQ/uNtI=
+
+is-npm@^1.0.0:
+  version "1.0.0"
+  resolved "https://registry.npm.taobao.org/is-npm/download/is-npm-1.0.0.tgz#f2fb63a65e4905b406c86072765a1a4dc793b9f4"
+  integrity sha1-8vtjpl5JBbQGyGBydloaTceTufQ=
 
-is-number@^2.0.2, is-number@^2.1.0:
+is-number@^2.1.0:
   version "2.1.0"
   resolved "https://registry.yarnpkg.com/is-number/-/is-number-2.1.0.tgz#01fcbbb393463a548f2f466cce16dece49db908f"
+  integrity sha1-Afy7s5NGOlSPL0ZszhbezknbkI8=
+  dependencies:
+    kind-of "^3.0.2"
+
+is-number@^3.0.0:
+  version "3.0.0"
+  resolved "https://registry.yarnpkg.com/is-number/-/is-number-3.0.0.tgz#24fd6201a4782cf50561c810276afc7d12d71195"
+  integrity sha1-JP1iAaR4LPUFYcgQJ2r8fRLXEZU=
   dependencies:
     kind-of "^3.0.2"
 
+is-number@^4.0.0:
+  version "4.0.0"
+  resolved "https://registry.yarnpkg.com/is-number/-/is-number-4.0.0.tgz#0026e37f5454d73e356dfe6564699867c6a7f0ff"
+  integrity sha512-rSklcAIlf1OmFdyAqbnWTLVelsQ58uvZ66S/ZyawjWqIviTWCjg2PzVGw8WUA+nNuPTqb4wgA+NszrJ+08LlgQ==
+
+is-obj@^1.0.0:
+  version "1.0.1"
+  resolved "https://registry.yarnpkg.com/is-obj/-/is-obj-1.0.1.tgz#3e4729ac1f5fde025cd7d83a896dab9f4f67db0f"
+  integrity sha1-PkcprB9f3gJc19g6iW2rn09n2w8=
+
 is-path-cwd@^1.0.0:
   version "1.0.0"
-  resolved "http://registry.npm.taobao.org/is-path-cwd/download/is-path-cwd-1.0.0.tgz#d225ec23132e89edd38fda767472e62e65f1106d"
+  resolved "https://registry.yarnpkg.com/is-path-cwd/-/is-path-cwd-1.0.0.tgz#d225ec23132e89edd38fda767472e62e65f1106d"
+  integrity sha1-0iXsIxMuie3Tj9p2dHLmLmXxEG0=
 
 is-path-in-cwd@^1.0.0:
-  version "1.0.0"
-  resolved "http://registry.npm.taobao.org/is-path-in-cwd/download/is-path-in-cwd-1.0.0.tgz#6477582b8214d602346094567003be8a9eac04dc"
+  version "1.0.1"
+  resolved "https://registry.yarnpkg.com/is-path-in-cwd/-/is-path-in-cwd-1.0.1.tgz#5ac48b345ef675339bd6c7a48a912110b241cf52"
+  integrity sha512-FjV1RTW48E7CWM7eE/J2NJvAEEVektecDBVBE5Hh3nM1Jd0kvhHtX68Pr3xsDf857xt3Y4AkwVULK1Vku62aaQ==
   dependencies:
     is-path-inside "^1.0.0"
 
 is-path-inside@^1.0.0:
   version "1.0.1"
-  resolved "http://registry.npm.taobao.org/is-path-inside/download/is-path-inside-1.0.1.tgz#8ef5b7de50437a3fdca6b4e865ef7aa55cb48036"
+  resolved "https://registry.yarnpkg.com/is-path-inside/-/is-path-inside-1.0.1.tgz#8ef5b7de50437a3fdca6b4e865ef7aa55cb48036"
+  integrity sha1-jvW33lBDej/cprToZe96pVy0gDY=
   dependencies:
     path-is-inside "^1.0.1"
 
-is-plain-obj@^1.0.0:
+is-plain-obj@^1.1.0:
   version "1.1.0"
-  resolved "https://registry.yarnpkg.com/is-plain-obj/-/is-plain-obj-1.1.0.tgz#71a50c8429dfca773c92a390a4a03b39fcd51d3e"
+  resolved "https://registry.npmjs.org/is-plain-obj/-/is-plain-obj-1.1.0.tgz#71a50c8429dfca773c92a390a4a03b39fcd51d3e"
+  integrity sha1-caUMhCnfync8kqOQpKA7OfzVHT4=
 
-is-plain-object@^2.0.1:
+is-plain-object@^2.0.1, is-plain-object@^2.0.3, is-plain-object@^2.0.4:
   version "2.0.4"
   resolved "https://registry.yarnpkg.com/is-plain-object/-/is-plain-object-2.0.4.tgz#2c163b3fafb1b606d9d17928f05c2a1c38e07677"
+  integrity sha512-h5PpgXkWitc38BBMYawTYMWJHFZJVnBquFE57xFpjB8pJFiF6gZ+bU+WyI/yqXiFR5mdLsgYNaPe8uao6Uv9Og==
   dependencies:
     isobject "^3.0.1"
 
 is-posix-bracket@^0.1.0:
   version "0.1.1"
   resolved "https://registry.yarnpkg.com/is-posix-bracket/-/is-posix-bracket-0.1.1.tgz#3334dc79774368e92f016e6fbc0a88f5cd6e6bc4"
+  integrity sha1-MzTceXdDaOkvAW5vvAqI9c1ua8Q=
 
 is-primitive@^2.0.0:
   version "2.0.0"
   resolved "https://registry.yarnpkg.com/is-primitive/-/is-primitive-2.0.0.tgz#207bab91638499c07b2adf240a41a87210034575"
+  integrity sha1-IHurkWOEmcB7Kt8kCkGochADRXU=
 
 is-promise@^2.1.0:
   version "2.1.0"
-  resolved "http://registry.npm.taobao.org/is-promise/download/is-promise-2.1.0.tgz#79a2a9ece7f096e80f36d2b2f3bc16c1ff4bf3fa"
+  resolved "https://registry.yarnpkg.com/is-promise/-/is-promise-2.1.0.tgz#79a2a9ece7f096e80f36d2b2f3bc16c1ff4bf3fa"
+  integrity sha1-eaKp7OfwlugPNtKy87wWwf9L8/o=
 
-is-property@^1.0.0:
-  version "1.0.2"
-  resolved "https://registry.yarnpkg.com/is-property/-/is-property-1.0.2.tgz#57fe1c4e48474edd65b09911f26b1cd4095dda84"
+is-redirect@^1.0.0:
+  version "1.0.0"
+  resolved "https://registry.npm.taobao.org/is-redirect/download/is-redirect-1.0.0.tgz#1d03dded53bd8db0f30c26e4f95d36fc7c87dc24"
+  integrity sha1-HQPd7VO9jbDzDCbk+V02/HyH3CQ=
 
 is-regex@^1.0.4:
   version "1.0.4"
   resolved "https://registry.yarnpkg.com/is-regex/-/is-regex-1.0.4.tgz#5517489b547091b0930e095654ced25ee97e9491"
+  integrity sha1-VRdIm1RwkbCTDglWVM7SXul+lJE=
   dependencies:
     has "^1.0.1"
 
-is-relative@^0.2.1:
-  version "0.2.1"
-  resolved "https://registry.yarnpkg.com/is-relative/-/is-relative-0.2.1.tgz#d27f4c7d516d175fb610db84bbeef23c3bc97aa5"
+is-relative@^1.0.0:
+  version "1.0.0"
+  resolved "https://registry.yarnpkg.com/is-relative/-/is-relative-1.0.0.tgz#a1bb6935ce8c5dba1e8b9754b9b2dcc020e2260d"
+  integrity sha512-Kw/ReK0iqwKeu0MITLFuj0jbPAmEiOsIwyIXvvbfa6QfmN9pkD1M+8pdk7Rl/dTKbH34/XBFMbgD4iMJhLQbGA==
   dependencies:
-    is-unc-path "^0.1.1"
+    is-unc-path "^1.0.0"
 
 is-resolvable@^1.0.0:
-  version "1.0.1"
-  resolved "http://registry.npm.taobao.org/is-resolvable/download/is-resolvable-1.0.1.tgz#acca1cd36dbe44b974b924321555a70ba03b1cf4"
+  version "1.1.0"
+  resolved "https://registry.yarnpkg.com/is-resolvable/-/is-resolvable-1.1.0.tgz#fb18f87ce1feb925169c9a407c19318a3206ed88"
+  integrity sha512-qgDYXFSR5WvEfuS5dMj6oTMEbrrSaM0CrFk2Yiq/gXnBvD9pMa2jGXxyhGLfvhZpuMZe18CJpFxAt3CRs42NMg==
+
+is-retry-allowed@^1.0.0:
+  version "1.2.0"
+  resolved "https://registry.npm.taobao.org/is-retry-allowed/download/is-retry-allowed-1.2.0.tgz?cache=0&other_urls=https%3A%2F%2Fregistry.npm.taobao.org%2Fis-retry-allowed%2Fdownload%2Fis-retry-allowed-1.2.0.tgz#d778488bd0a4666a3be8a1482b9f2baafedea8b4"
+  integrity sha1-13hIi9CkZmo76KFIK58rqv7eqLQ=
 
-is-stream@^1.1.0:
+is-stream@^1.0.0, is-stream@^1.0.1, is-stream@^1.1.0:
   version "1.1.0"
   resolved "https://registry.yarnpkg.com/is-stream/-/is-stream-1.1.0.tgz#12d4a3dd4e68e0b79ceb8dbc84173ae80d91ca44"
+  integrity sha1-EtSj3U5o4Lec6428hBc66A2RykQ=
 
-is-svg@^2.0.0:
-  version "2.1.0"
-  resolved "https://registry.yarnpkg.com/is-svg/-/is-svg-2.1.0.tgz#cf61090da0d9efbcab8722deba6f032208dbb0e9"
+is-svg@^3.0.0:
+  version "3.0.0"
+  resolved "https://registry.yarnpkg.com/is-svg/-/is-svg-3.0.0.tgz#9321dbd29c212e5ca99c4fa9794c714bcafa2f75"
+  integrity sha512-gi4iHK53LR2ujhLVVj+37Ykh9GLqYHX6JOVXbLAucaG/Cqw9xwdFOjDM2qeifLs1sF1npXXFvDu0r5HNgCMrzQ==
   dependencies:
     html-comment-regex "^1.1.0"
 
-is-symbol@^1.0.1:
+is-symbol@^1.0.2:
+  version "1.0.2"
+  resolved "https://registry.yarnpkg.com/is-symbol/-/is-symbol-1.0.2.tgz#a055f6ae57192caee329e7a860118b497a950f38"
+  integrity sha512-HS8bZ9ox60yCJLH9snBpIwv9pYUAkcuLhSA1oero1UB5y9aiQpRA8y2ex945AOtCZL1lJDeIk3G5LthswI46Lw==
+  dependencies:
+    has-symbols "^1.0.0"
+
+is-text-path@^1.0.0:
   version "1.0.1"
-  resolved "https://registry.yarnpkg.com/is-symbol/-/is-symbol-1.0.1.tgz#3cc59f00025194b6ab2e38dbae6689256b660572"
+  resolved "https://registry.yarnpkg.com/is-text-path/-/is-text-path-1.0.1.tgz#4e1aa0fb51bfbcb3e92688001397202c1775b66e"
+  integrity sha1-Thqg+1G/vLPpJogAE5cgLBd1tm4=
+  dependencies:
+    text-extensions "^1.0.0"
+
+is-text-path@^2.0.0:
+  version "2.0.0"
+  resolved "https://registry.npmjs.org/is-text-path/-/is-text-path-2.0.0.tgz#b2484e2b720a633feb2e85b67dc193ff72c75636"
+  integrity sha512-+oDTluR6WEjdXEJMnC2z6A4FRwFoYuvShVVEGsS7ewc0UTi2QtAKMDJuL4BDEVt+5T7MjFo12RP8ghOM75oKJw==
+  dependencies:
+    text-extensions "^2.0.0"
 
 is-typedarray@~1.0.0:
   version "1.0.0"
   resolved "https://registry.yarnpkg.com/is-typedarray/-/is-typedarray-1.0.0.tgz#e479c80858df0c1b11ddda6940f96011fcda4a9a"
+  integrity sha1-5HnICFjfDBsR3dppQPlgEfzaSpo=
 
-is-unc-path@^0.1.1:
-  version "0.1.2"
-  resolved "https://registry.yarnpkg.com/is-unc-path/-/is-unc-path-0.1.2.tgz#6ab053a72573c10250ff416a3814c35178af39b9"
+is-unc-path@^1.0.0:
+  version "1.0.0"
+  resolved "https://registry.yarnpkg.com/is-unc-path/-/is-unc-path-1.0.0.tgz#d731e8898ed090a12c352ad2eaed5095ad322c9d"
+  integrity sha512-mrGpVd0fs7WWLfVsStvgF6iEJnbjDFZh9/emhRDcGWTduTfNHd9CHeUwH3gYIjdbwo4On6hunkztwOaAw0yllQ==
   dependencies:
-    unc-path-regex "^0.1.0"
+    unc-path-regex "^0.1.2"
 
-is-utf8@^0.2.0:
+is-utf8@^0.2.0, is-utf8@^0.2.1:
   version "0.2.1"
   resolved "https://registry.yarnpkg.com/is-utf8/-/is-utf8-0.2.1.tgz#4b0da1442104d1b336340e80797e865cf39f7d72"
+  integrity sha1-Sw2hRCEE0bM2NA6AeX6GXPOffXI=
 
-is-windows@^0.2.0:
-  version "0.2.0"
-  resolved "https://registry.yarnpkg.com/is-windows/-/is-windows-0.2.0.tgz#de1aa6d63ea29dd248737b69f1ff8b8002d2108c"
+is-valid-glob@^1.0.0:
+  version "1.0.0"
+  resolved "https://registry.yarnpkg.com/is-valid-glob/-/is-valid-glob-1.0.0.tgz#29bf3eff701be2d4d315dbacc39bc39fe8f601aa"
+  integrity sha1-Kb8+/3Ab4tTTFdusw5vDn+j2Aao=
+
+is-windows@^1.0.0, is-windows@^1.0.1, is-windows@^1.0.2:
+  version "1.0.2"
+  resolved "https://registry.yarnpkg.com/is-windows/-/is-windows-1.0.2.tgz#d1850eb9791ecd18e6182ce12a30f396634bb19d"
+  integrity sha512-eXK1UInq2bPmjyX6e3VHIzMLobc4J94i4AWn+Hpq3OU5KkrRC96OAcR3PRJ/pGu6m8TRnBHP9dkXQVsT/COVIA==
 
 is-wsl@^1.1.0:
   version "1.1.0"
   resolved "https://registry.yarnpkg.com/is-wsl/-/is-wsl-1.1.0.tgz#1f16e4aa22b04d1336b66188a66af3c600c3a66d"
+  integrity sha1-HxbkqiKwTRM2tmGIpmrzxgDDpm0=
 
 isarray@0.0.1:
   version "0.0.1"
   resolved "https://registry.yarnpkg.com/isarray/-/isarray-0.0.1.tgz#8a18acfca9a8f4177e09abfc6038939b05d1eedf"
+  integrity sha1-ihis/Kmo9Bd+Cav8YDiTmwXR7t8=
 
 isarray@1.0.0, isarray@^1.0.0, isarray@~1.0.0:
   version "1.0.0"
   resolved "https://registry.yarnpkg.com/isarray/-/isarray-1.0.0.tgz#bb935d48582cba168c06834957a54a3e07124f11"
+  integrity sha1-u5NdSFgsuhaMBoNJV6VKPgcSTxE=
+
+isarray@2.0.1:
+  version "2.0.1"
+  resolved "https://registry.npmjs.org/isarray/-/isarray-2.0.1.tgz#a37d94ed9cda2d59865c9f76fe596ee1f338741e"
+  integrity sha1-o32U7ZzaLVmGXJ92/llu4fM4dB4=
 
 isarray@^2.0.1:
-  version "2.0.2"
-  resolved "https://registry.yarnpkg.com/isarray/-/isarray-2.0.2.tgz#5aa99638daf2248b10b9598b763a045688ece3ee"
+  version "2.0.4"
+  resolved "https://registry.yarnpkg.com/isarray/-/isarray-2.0.4.tgz#38e7bcbb0f3ba1b7933c86ba1894ddfc3781bbb7"
+  integrity sha512-GMxXOiUirWg1xTKRipM0Ek07rX+ubx4nNVElTJdNLYmNO/2YrDkgJGw9CljXn+r4EWiDQg/8lsRdHyg2PJuUaA==
 
 isbinaryfile@^3.0.0:
-  version "3.0.1"
-  resolved "https://registry.yarnpkg.com/isbinaryfile/-/isbinaryfile-3.0.1.tgz#6e99573675372e841a0520c036b41513d783e79e"
-
-isexe@^1.1.1:
-  version "1.1.2"
-  resolved "http://registry.npm.taobao.org/isexe/download/isexe-1.1.2.tgz#36f3e22e60750920f5e7241a476a8c6a42275ad0"
+  version "3.0.3"
+  resolved "https://registry.yarnpkg.com/isbinaryfile/-/isbinaryfile-3.0.3.tgz#5d6def3edebf6e8ca8cae9c30183a804b5f8be80"
+  integrity sha512-8cJBL5tTd2OS0dM4jz07wQd5g0dCCqIhUxPIGtZfa5L6hWlvV5MHTITy/DBAsF+Oe2LS1X3krBUhNwaGUWpWxw==
+  dependencies:
+    buffer-alloc "^1.2.0"
 
 isexe@^2.0.0:
   version "2.0.0"
-  resolved "http://registry.npm.taobao.org/isexe/download/isexe-2.0.0.tgz#e8fbf374dc556ff8947a10dcb0572d633f2cfa10"
+  resolved "https://registry.yarnpkg.com/isexe/-/isexe-2.0.0.tgz#e8fbf374dc556ff8947a10dcb0572d633f2cfa10"
+  integrity sha1-6PvzdNxVb/iUehDcsFctYz8s+hA=
 
 isobject@^2.0.0:
   version "2.1.0"
   resolved "https://registry.yarnpkg.com/isobject/-/isobject-2.1.0.tgz#f065561096a3f1da2ef46272f815c840d87e0c89"
+  integrity sha1-8GVWEJaj8dou9GJy+BXIQNh+DIk=
   dependencies:
-    isarray "1.0.0"
-
-isobject@^3.0.1:
-  version "3.0.1"
-  resolved "https://registry.yarnpkg.com/isobject/-/isobject-3.0.1.tgz#4e431e92b11a9731636aa1f9c8d1ccbcfdab78df"
-
-isparta-loader@^2.0.0:
-  version "2.0.0"
-  resolved "https://registry.yarnpkg.com/isparta-loader/-/isparta-loader-2.0.0.tgz#4425f496c93f765bbceb4dd938576da307566ed1"
-  dependencies:
-    isparta "4.x.x"
-
-isparta@4.x.x:
-  version "4.0.0"
-  resolved "https://registry.yarnpkg.com/isparta/-/isparta-4.0.0.tgz#1de91996f480b22dcb1aca8510255bae1574446e"
-  dependencies:
-    babel-core "^6.1.4"
-    escodegen "^1.6.1"
-    esprima "^2.1.0"
-    istanbul "^0.4.0"
-    mkdirp "^0.5.0"
-    nomnomnomnom "^2.0.0"
-    object-assign "^4.0.1"
-    source-map "^0.5.0"
-    which "^1.0.9"
+    isarray "1.0.0"
+
+isobject@^3.0.0, isobject@^3.0.1:
+  version "3.0.1"
+  resolved "https://registry.yarnpkg.com/isobject/-/isobject-3.0.1.tgz#4e431e92b11a9731636aa1f9c8d1ccbcfdab78df"
+  integrity sha1-TkMekrEalzFjaqH5yNHMvP2reN8=
 
 isstream@~0.1.2:
   version "0.1.2"
   resolved "https://registry.yarnpkg.com/isstream/-/isstream-0.1.2.tgz#47e63f7af55afa6f92e1500e690eb8b8529c099a"
+  integrity sha1-R+Y/evVa+m+S4VAOaQ64uFKcCZo=
+
+istanbul-lib-coverage@^1.2.1:
+  version "1.2.1"
+  resolved "https://registry.yarnpkg.com/istanbul-lib-coverage/-/istanbul-lib-coverage-1.2.1.tgz#ccf7edcd0a0bb9b8f729feeb0930470f9af664f0"
+  integrity sha512-PzITeunAgyGbtY1ibVIUiV679EFChHjoMNRibEIobvmrCRaIgwLxNucOSimtNWUhEib/oO7QY2imD75JVgCJWQ==
+
+istanbul-lib-instrument@^1.10.1:
+  version "1.10.2"
+  resolved "https://registry.yarnpkg.com/istanbul-lib-instrument/-/istanbul-lib-instrument-1.10.2.tgz#1f55ed10ac3c47f2bdddd5307935126754d0a9ca"
+  integrity sha512-aWHxfxDqvh/ZlxR8BBaEPVSWDPUkGD63VjGQn3jcw8jCp7sHEMKcrj4xfJn/ABzdMEHiQNyvDQhqm5o8+SQg7A==
+  dependencies:
+    babel-generator "^6.18.0"
+    babel-template "^6.16.0"
+    babel-traverse "^6.18.0"
+    babel-types "^6.18.0"
+    babylon "^6.18.0"
+    istanbul-lib-coverage "^1.2.1"
+    semver "^5.3.0"
 
 istanbul@^0.4.0:
   version "0.4.5"
   resolved "https://registry.yarnpkg.com/istanbul/-/istanbul-0.4.5.tgz#65c7d73d4c4da84d4f3ac310b918fb0b8033733b"
+  integrity sha1-ZcfXPUxNqE1POsMQuRj7C4Azczs=
   dependencies:
     abbrev "1.0.x"
     async "1.x"
@@ -4065,207 +6611,231 @@ istanbul@^0.4.0:
     which "^1.1.1"
     wordwrap "^1.0.0"
 
-jju@^1.1.0:
-  version "1.3.0"
-  resolved "https://registry.yarnpkg.com/jju/-/jju-1.3.0.tgz#dadd9ef01924bc728b03f2f7979bdbd62f7a2aaa"
-
-jodid25519@^1.0.0:
-  version "1.0.2"
-  resolved "https://registry.yarnpkg.com/jodid25519/-/jodid25519-1.0.2.tgz#06d4912255093419477d425633606e0e90782967"
-  dependencies:
-    jsbn "~0.1.0"
-
-js-base64@^2.1.5, js-base64@^2.1.8, js-base64@^2.1.9:
-  version "2.1.9"
-  resolved "https://registry.yarnpkg.com/js-base64/-/js-base64-2.1.9.tgz#f0e80ae039a4bd654b5f281fc93f04a914a7fcce"
+javascript-stringify@^1.6.0:
+  version "1.6.0"
+  resolved "https://registry.yarnpkg.com/javascript-stringify/-/javascript-stringify-1.6.0.tgz#142d111f3a6e3dae8f4a9afd77d45855b5a9cce3"
+  integrity sha1-FC0RHzpuPa6PSpr9d9RYVbWpzOM=
+
+js-base64@^2.1.8:
+  version "2.6.4"
+  resolved "https://registry.npm.taobao.org/js-base64/download/js-base64-2.6.4.tgz?cache=0&sync_timestamp=1596920559006&other_urls=https%3A%2F%2Fregistry.npm.taobao.org%2Fjs-base64%2Fdownload%2Fjs-base64-2.6.4.tgz#f4e686c5de1ea1f867dbcad3d46d969428df98c4"
+  integrity sha1-9OaGxd4eofhn28rT1G2WlCjfmMQ=
+
+js-base64@^2.1.9:
+  version "2.5.1"
+  resolved "https://registry.yarnpkg.com/js-base64/-/js-base64-2.5.1.tgz#1efa39ef2c5f7980bb1784ade4a8af2de3291121"
+  integrity sha512-M7kLczedRMYX4L8Mdh4MzyAMM9O5osx+4FcOQuTvr3A9F2D9S5JXheN0ewNbrvK2UatkTRhL5ejGmGSjNMiZuw==
+
+js-beautify@^1.7.4:
+  version "1.10.2"
+  resolved "https://registry.npm.taobao.org/js-beautify/download/js-beautify-1.10.2.tgz#88c9099cd6559402b124cfab18754936f8a7b178"
+  integrity sha1-iMkJnNZVlAKxJM+rGHVJNvinsXg=
+  dependencies:
+    config-chain "^1.1.12"
+    editorconfig "^0.15.3"
+    glob "^7.1.3"
+    mkdirp "~0.5.1"
+    nopt "~4.0.1"
 
-js-tokens@^2.0.0:
-  version "2.0.0"
-  resolved "https://registry.yarnpkg.com/js-tokens/-/js-tokens-2.0.0.tgz#79903f5563ee778cc1162e6dcf1a0027c97f9cb5"
+"js-tokens@^3.0.0 || ^4.0.0":
+  version "4.0.0"
+  resolved "https://registry.yarnpkg.com/js-tokens/-/js-tokens-4.0.0.tgz#19203fb59991df98e3a287050d4647cdeaf32499"
+  integrity sha512-RdJUflcE3cUzKiMqQgsCu06FPu9UdIJO0beYbPhHN4k6apgJtifcoCtT9bcxOpYBtpD2kCM6Sbzg4CausW/PKQ==
 
 js-tokens@^3.0.2:
   version "3.0.2"
-  resolved "http://registry.npm.taobao.org/js-tokens/download/js-tokens-3.0.2.tgz#9866df395102130e38f7f996bceb65443209c25b"
+  resolved "https://registry.yarnpkg.com/js-tokens/-/js-tokens-3.0.2.tgz#9866df395102130e38f7f996bceb65443209c25b"
+  integrity sha1-mGbfOVECEw449/mWvOtlRDIJwls=
 
-js-yaml@3.6.1, js-yaml@3.x, js-yaml@^3.4.3, js-yaml@~3.6.1:
-  version "3.6.1"
-  resolved "https://registry.yarnpkg.com/js-yaml/-/js-yaml-3.6.1.tgz#6e5fe67d8b205ce4d22fad05b7781e8dadcc4b30"
+js-yaml@, js-yaml@^3.13.1:
+  version "3.13.1"
+  resolved "https://registry.npmjs.org/js-yaml/-/js-yaml-3.13.1.tgz#aff151b30bfdfa8e49e05da22e7415e9dfa37847"
+  integrity sha512-YfbcO7jXDdyj0DGxYVSlSeQNHbD7XPWvrVWeVUujrQEoZzWJIRrCPoyk6kL6IAjAG2IolMK4T0hNUe0HOUs5Jw==
   dependencies:
     argparse "^1.0.7"
-    esprima "^2.6.0"
+    esprima "^4.0.0"
 
-js-yaml@^3.9.1:
-  version "3.10.0"
-  resolved "http://registry.npm.taobao.org/js-yaml/download/js-yaml-3.10.0.tgz#2e78441646bd4682e963f22b6e92823c309c62dc"
+js-yaml@3.12.0:
+  version "3.12.0"
+  resolved "https://registry.npmjs.org/js-yaml/-/js-yaml-3.12.0.tgz#eaed656ec8344f10f527c6bfa1b6e2244de167d1"
+  integrity sha512-PIt2cnwmPfL4hKNwqeiuz4bKfnzHTBv6HyVgjahA6mPLwPDzjDWrplJBMjHUFxku/N3FlmrbyPclad+I+4mJ3A==
+  dependencies:
+    argparse "^1.0.7"
+    esprima "^4.0.0"
+
+js-yaml@3.x, js-yaml@^3.11.0, js-yaml@^3.12.0, js-yaml@^3.9.0, js-yaml@^3.9.1:
+  version "3.12.2"
+  resolved "https://registry.npmjs.org/js-yaml/-/js-yaml-3.12.2.tgz#ef1d067c5a9d9cb65bd72f285b5d8105c77f14fc"
+  integrity sha512-QHn/Lh/7HhZ/Twc7vJYQTkjuCa0kaCcDcjK5Zlk2rvnUpy7DxMJ23+Jc2dcyvltwQVg1nygAVlB2oRDFHoRS5Q==
   dependencies:
     argparse "^1.0.7"
     esprima "^4.0.0"
 
 jsbn@~0.1.0:
-  version "0.1.0"
-  resolved "https://registry.yarnpkg.com/jsbn/-/jsbn-0.1.0.tgz#650987da0dd74f4ebf5a11377a2aa2d273e97dfd"
-
-jsdom@^7.0.2:
-  version "7.2.2"
-  resolved "https://registry.yarnpkg.com/jsdom/-/jsdom-7.2.2.tgz#40b402770c2bda23469096bee91ab675e3b1fc6e"
-  dependencies:
-    abab "^1.0.0"
-    acorn "^2.4.0"
-    acorn-globals "^1.0.4"
-    cssom ">= 0.3.0 < 0.4.0"
-    cssstyle ">= 0.2.29 < 0.3.0"
-    escodegen "^1.6.1"
-    nwmatcher ">= 1.3.7 < 2.0.0"
-    parse5 "^1.5.1"
-    request "^2.55.0"
-    sax "^1.1.4"
-    symbol-tree ">= 3.1.0 < 4.0.0"
-    tough-cookie "^2.2.0"
-    webidl-conversions "^2.0.0"
-    whatwg-url-compat "~0.6.5"
-    xml-name-validator ">= 2.0.1 < 3.0.0"
+  version "0.1.1"
+  resolved "https://registry.yarnpkg.com/jsbn/-/jsbn-0.1.1.tgz#a5e654c2e5a2deb5f201d96cefbca80c0ef2f513"
+  integrity sha1-peZUwuWi3rXyAdls77yoDA7y9RM=
 
 jsesc@^1.3.0:
   version "1.3.0"
   resolved "https://registry.yarnpkg.com/jsesc/-/jsesc-1.3.0.tgz#46c3fec8c1892b12b0833db9bc7622176dbab34b"
+  integrity sha1-RsP+yMGJKxKwgz25vHYiF226s0s=
 
 jsesc@~0.5.0:
   version "0.5.0"
   resolved "https://registry.yarnpkg.com/jsesc/-/jsesc-0.5.0.tgz#e7dee66e35d6fc16f710fe91d5cf69f70f08911d"
+  integrity sha1-597mbjXW/Bb3EP6R1c9p9w8IkR0=
 
-jshint@^2.8.0:
-  version "2.9.5"
-  resolved "http://registry.npm.taobao.org/jshint/download/jshint-2.9.5.tgz#1e7252915ce681b40827ee14248c46d34e9aa62c"
-  dependencies:
-    cli "~1.0.0"
-    console-browserify "1.1.x"
-    exit "0.1.x"
-    htmlparser2 "3.8.x"
-    lodash "3.7.x"
-    minimatch "~3.0.2"
-    shelljs "0.3.x"
-    strip-json-comments "1.0.x"
-
-json-loader@^0.5.4, json-loader@^0.5.7:
+json-loader@^0.5.7:
   version "0.5.7"
   resolved "https://registry.yarnpkg.com/json-loader/-/json-loader-0.5.7.tgz#dca14a70235ff82f0ac9a3abeb60d337a365185d"
+  integrity sha512-QLPs8Dj7lnf3e3QYS1zkCo+4ZwqOiF9d/nZnYozTISxXWCfNs9yuky5rJw4/W34s7POaNlbZmQGaB5NiXCbP4w==
 
-json-parse-helpfulerror@^1.0.3:
-  version "1.0.3"
-  resolved "https://registry.yarnpkg.com/json-parse-helpfulerror/-/json-parse-helpfulerror-1.0.3.tgz#13f14ce02eed4e981297b64eb9e3b932e2dd13dc"
-  dependencies:
-    jju "^1.1.0"
+json-parse-better-errors@^1.0.0, json-parse-better-errors@^1.0.1, json-parse-better-errors@^1.0.2:
+  version "1.0.2"
+  resolved "https://registry.yarnpkg.com/json-parse-better-errors/-/json-parse-better-errors-1.0.2.tgz#bb867cfb3450e69107c131d1c514bab3dc8bcaa9"
+  integrity sha512-mrqyZKfX5EhL7hvqcV6WG1yYjnjeuYDzDhhcAAUrq8Po85NBQBJP+ZDUT75qZQ98IkUoBqdkExkukOU7Ts2wrw==
 
 json-schema-traverse@^0.3.0:
   version "0.3.1"
-  resolved "http://registry.npm.taobao.org/json-schema-traverse/download/json-schema-traverse-0.3.1.tgz#349a6d44c53a51de89b40805c5d5e59b417d3340"
+  resolved "https://registry.yarnpkg.com/json-schema-traverse/-/json-schema-traverse-0.3.1.tgz#349a6d44c53a51de89b40805c5d5e59b417d3340"
+  integrity sha1-NJptRMU6Ud6JtAgFxdXlm0F9M0A=
+
+json-schema-traverse@^0.4.1:
+  version "0.4.1"
+  resolved "https://registry.yarnpkg.com/json-schema-traverse/-/json-schema-traverse-0.4.1.tgz#69f6a87d9513ab8bb8fe63bdb0979c448e684660"
+  integrity sha512-xbbCH5dCYU5T8LcEhhuh7HJ88HXuW3qsI3Y0zOZFKfZEHcpWiHU/Jxzk629Brsab/mMiHQti9wMP+845RPe3Vg==
 
 json-schema@0.2.3:
   version "0.2.3"
   resolved "https://registry.yarnpkg.com/json-schema/-/json-schema-0.2.3.tgz#b480c892e59a2f05954ce727bd3f2a4e882f9e13"
+  integrity sha1-tIDIkuWaLwWVTOcnvT8qTogvnhM=
 
 json-stable-stringify-without-jsonify@^1.0.1:
   version "1.0.1"
-  resolved "http://registry.npm.taobao.org/json-stable-stringify-without-jsonify/download/json-stable-stringify-without-jsonify-1.0.1.tgz#9db7b59496ad3f3cfef30a75142d2d930ad72651"
-
-json-stable-stringify@^1.0.1:
-  version "1.0.1"
-  resolved "https://registry.yarnpkg.com/json-stable-stringify/-/json-stable-stringify-1.0.1.tgz#9a759d39c5f2ff503fd5300646ed445f88c4f9af"
-  dependencies:
-    jsonify "~0.0.0"
+  resolved "https://registry.yarnpkg.com/json-stable-stringify-without-jsonify/-/json-stable-stringify-without-jsonify-1.0.1.tgz#9db7b59496ad3f3cfef30a75142d2d930ad72651"
+  integrity sha1-nbe1lJatPzz+8wp1FC0tkwrXJlE=
 
-json-stringify-safe@~5.0.1:
+json-stringify-safe@^5.0.1, json-stringify-safe@~5.0.1:
   version "5.0.1"
   resolved "https://registry.yarnpkg.com/json-stringify-safe/-/json-stringify-safe-5.0.1.tgz#1296a2d58fd45f19a0f6ce01d65701e2c735b6eb"
+  integrity sha1-Epai1Y/UXxmg9s4B1lcB4sc1tus=
 
 json-templater@^1.0.4:
-  version "1.0.4"
-  resolved "https://registry.yarnpkg.com/json-templater/-/json-templater-1.0.4.tgz#f240a01e8854b5853a9ba4f87e196eeeaeefba33"
+  version "1.2.0"
+  resolved "https://registry.yarnpkg.com/json-templater/-/json-templater-1.2.0.tgz#d12c96c7781d8451d623a8bee9b58f6901a8b15e"
+  integrity sha512-u2l5PGQuLs6eoeAW6z7LOgyk17d7v4LutnO630ZQt1Nw9XxzepU4vD1HDlYV45d0aR3tBek4AK6GYWbEI0nhOQ==
 
-json3@3.2.6:
-  version "3.2.6"
-  resolved "https://registry.yarnpkg.com/json3/-/json3-3.2.6.tgz#f6efc93c06a04de9aec53053df2559bb19e2038b"
+json2yaml@^1.1.0:
+  version "1.1.0"
+  resolved "https://registry.npm.taobao.org/json2yaml/download/json2yaml-1.1.0.tgz#5414d907f9816586b80c513ec2e3aeb2ab819a6c"
+  integrity sha1-VBTZB/mBZYa4DFE+wuOusquBmmw=
+  dependencies:
+    remedial "1.x"
 
-json3@3.3.2, json3@^3.3.2:
+json3@^3.3.2:
   version "3.3.2"
   resolved "https://registry.yarnpkg.com/json3/-/json3-3.3.2.tgz#3c0434743df93e2f5c42aee7b19bcb483575f4e1"
+  integrity sha1-PAQ0dD35Pi9cQq7nsZvLSDV19OE=
 
 json5@^0.5.0, json5@^0.5.1:
   version "0.5.1"
   resolved "https://registry.yarnpkg.com/json5/-/json5-0.5.1.tgz#1eade7acc012034ad84e2396767ead9fa5495821"
+  integrity sha1-Hq3nrMASA0rYTiOWdn6tn6VJWCE=
 
-jsonfile@^2.1.0:
-  version "2.4.0"
-  resolved "https://registry.yarnpkg.com/jsonfile/-/jsonfile-2.4.0.tgz#3736a2b428b87bbda0cc83b53fa3d633a35c2ae8"
-  optionalDependencies:
-    graceful-fs "^4.1.6"
+json5@^1.0.1:
+  version "1.0.1"
+  resolved "https://registry.yarnpkg.com/json5/-/json5-1.0.1.tgz#779fb0018604fa854eacbf6252180d83543e3dbe"
+  integrity sha512-aKS4WQjPenRxiQsC93MNfjx+nbF4PAdYzmd/1JIj8HYzqfbu86beTuNgXDzPknWk0n0uARlyewZo4s++ES36Ow==
+  dependencies:
+    minimist "^1.2.0"
+
+jsonc-parser@^2.0.2:
+  version "2.0.2"
+  resolved "https://registry.yarnpkg.com/jsonc-parser/-/jsonc-parser-2.0.2.tgz#42fcf56d70852a043fadafde51ddb4a85649978d"
+  integrity sha512-TSU435K5tEKh3g7bam1AFf+uZrISheoDsLlpmAo6wWZYqjsnd09lHYK1Qo+moK4Ikifev1Gdpa69g4NELKnCrQ==
 
 jsonfile@^4.0.0:
   version "4.0.0"
   resolved "https://registry.yarnpkg.com/jsonfile/-/jsonfile-4.0.0.tgz#8771aae0799b64076b76640fca058f9c10e33ecb"
+  integrity sha1-h3Gq4HmbZAdrdmQPygWPnBDjPss=
   optionalDependencies:
     graceful-fs "^4.1.6"
 
-jsonify@~0.0.0:
-  version "0.0.0"
-  resolved "https://registry.yarnpkg.com/jsonify/-/jsonify-0.0.0.tgz#2c74b6ee41d93ca51b7b5aaee8f503631d252a73"
-
-jsonpointer@^4.0.0:
-  version "4.0.0"
-  resolved "https://registry.yarnpkg.com/jsonpointer/-/jsonpointer-4.0.0.tgz#6661e161d2fc445f19f98430231343722e1fcbd5"
+jsonparse@^1.2.0:
+  version "1.3.1"
+  resolved "https://registry.npmjs.org/jsonparse/-/jsonparse-1.3.1.tgz#3f4dae4a91fac315f71062f8521cc239f1366280"
+  integrity sha1-P02uSpH6wxX3EGL4UhzCOfE2YoA=
 
 jsprim@^1.2.2:
-  version "1.3.1"
-  resolved "https://registry.yarnpkg.com/jsprim/-/jsprim-1.3.1.tgz#2a7256f70412a29ee3670aaca625994c4dcff252"
+  version "1.4.1"
+  resolved "https://registry.yarnpkg.com/jsprim/-/jsprim-1.4.1.tgz#313e66bc1e5cc06e438bc1b7499c2e5c56acb6a2"
+  integrity sha1-MT5mvB5cwG5Di8G3SZwuXFastqI=
   dependencies:
-    extsprintf "1.0.2"
+    assert-plus "1.0.0"
+    extsprintf "1.3.0"
     json-schema "0.2.3"
-    verror "1.3.6"
+    verror "1.10.0"
+
+just-debounce@^1.0.0:
+  version "1.0.0"
+  resolved "https://registry.yarnpkg.com/just-debounce/-/just-debounce-1.0.0.tgz#87fccfaeffc0b68cd19d55f6722943f929ea35ea"
+  integrity sha1-h/zPrv/AtozRnVX2cilD+SnqNeo=
+
+just-extend@^4.0.2:
+  version "4.0.2"
+  resolved "https://registry.npmjs.org/just-extend/-/just-extend-4.0.2.tgz#f3f47f7dfca0f989c55410a7ebc8854b07108afc"
+  integrity sha512-FrLwOgm+iXrPV+5zDU6Jqu4gCRXbWEQg2O3SKONsWE4w7AXFRkryS53bpWdaL9cNol+AmR3AEYz6kn+o0fCPnw==
 
 karma-chrome-launcher@^2.2.0:
   version "2.2.0"
-  resolved "https://registry.yarnpkg.com/karma-chrome-launcher/-/karma-chrome-launcher-2.2.0.tgz#cf1b9d07136cc18fe239327d24654c3dbc368acf"
+  resolved "https://registry.npmjs.org/karma-chrome-launcher/-/karma-chrome-launcher-2.2.0.tgz#cf1b9d07136cc18fe239327d24654c3dbc368acf"
+  integrity sha512-uf/ZVpAabDBPvdPdveyk1EPgbnloPvFFGgmRhYLTDH7gEB4nZdSBk8yTU47w1g/drLSx5uMOkjKk7IWKfWg/+w==
   dependencies:
     fs-access "^1.0.0"
     which "^1.2.1"
 
-karma-coverage@^1.1.1:
-  version "1.1.1"
-  resolved "https://registry.yarnpkg.com/karma-coverage/-/karma-coverage-1.1.1.tgz#5aff8b39cf6994dc22de4c84362c76001b637cf6"
+karma-coverage@^1.1.2:
+  version "1.1.2"
+  resolved "https://registry.npmjs.org/karma-coverage/-/karma-coverage-1.1.2.tgz#cc09dceb589a83101aca5fe70c287645ef387689"
+  integrity sha512-eQawj4Cl3z/CjxslYy9ariU4uDh7cCNFZHNWXWRpl0pNeblY/4wHR7M7boTYXWrn9bY0z2pZmr11eKje/S/hIw==
   dependencies:
     dateformat "^1.0.6"
     istanbul "^0.4.0"
-    lodash "^3.8.0"
+    lodash "^4.17.0"
     minimatch "^3.0.0"
     source-map "^0.5.1"
 
-karma-mocha@^1.2.0:
+karma-mocha@^1.3.0:
   version "1.3.0"
-  resolved "https://registry.yarnpkg.com/karma-mocha/-/karma-mocha-1.3.0.tgz#eeaac7ffc0e201eb63c467440d2b69c7cf3778bf"
+  resolved "https://registry.npmjs.org/karma-mocha/-/karma-mocha-1.3.0.tgz#eeaac7ffc0e201eb63c467440d2b69c7cf3778bf"
+  integrity sha1-7qrH/8DiAetjxGdEDStpx883eL8=
   dependencies:
     minimist "1.2.0"
 
-karma-sinon-chai@^1.2.4:
-  version "1.2.4"
-  resolved "https://registry.yarnpkg.com/karma-sinon-chai/-/karma-sinon-chai-1.2.4.tgz#fea935f62be3366cf0271c8d8be51c0c70e40abc"
-  dependencies:
-    lolex "^1.5.0"
+karma-sinon-chai@^2.0.2:
+  version "2.0.2"
+  resolved "https://registry.npmjs.org/karma-sinon-chai/-/karma-sinon-chai-2.0.2.tgz#e28c109b989973abafc28a7c9f09ef24a05e07c2"
+  integrity sha512-SDgh6V0CUd+7ruL1d3yG6lFzmJNGRNQuEuCYXLaorruNP9nwQfA7hpsp4clx4CbOo5Gsajh3qUOT7CrVStUKMw==
 
 karma-sourcemap-loader@^0.3.7:
   version "0.3.7"
-  resolved "https://registry.yarnpkg.com/karma-sourcemap-loader/-/karma-sourcemap-loader-0.3.7.tgz#91322c77f8f13d46fed062b042e1009d4c4505d8"
+  resolved "https://registry.npmjs.org/karma-sourcemap-loader/-/karma-sourcemap-loader-0.3.7.tgz#91322c77f8f13d46fed062b042e1009d4c4505d8"
+  integrity sha1-kTIsd/jxPUb+0GKwQuEAnUxFBdg=
   dependencies:
     graceful-fs "^4.1.2"
 
-karma-spec-reporter@0.0.26:
-  version "0.0.26"
-  resolved "https://registry.yarnpkg.com/karma-spec-reporter/-/karma-spec-reporter-0.0.26.tgz#bf5561377dce1b63cf2c975c1af3e35f199e2265"
+karma-spec-reporter@^0.0.32:
+  version "0.0.32"
+  resolved "https://registry.npmjs.org/karma-spec-reporter/-/karma-spec-reporter-0.0.32.tgz#2e9c7207ea726771260259f82becb543209e440a"
+  integrity sha1-LpxyB+pyZ3EmAln4K+y1QyCeRAo=
   dependencies:
-    colors "~0.6.0"
+    colors "^1.1.2"
 
-karma-webpack@^3.0.0:
-  version "3.0.0"
-  resolved "http://registry.npm.taobao.org/karma-webpack/download/karma-webpack-3.0.0.tgz#bf009c5b73c667c11c015717e9e520f581317c44"
+karma-webpack@^3.0.5:
+  version "3.0.5"
+  resolved "https://registry.npmjs.org/karma-webpack/-/karma-webpack-3.0.5.tgz#1ff1e3a690fb73ae95ee95f9ab58f341cfc7b40f"
+  integrity sha512-nRudGJWstvVuA6Tbju9tyGUfXTtI1UXMXoRHVmM2/78D0q6s/Ye2IC157PKNDC15PWFGR0mVIRtWLAdcfsRJoA==
   dependencies:
     async "^2.0.0"
     babel-runtime "^6.0.0"
@@ -4274,103 +6844,301 @@ karma-webpack@^3.0.0:
     source-map "^0.5.6"
     webpack-dev-middleware "^2.0.6"
 
-karma@^1.3.0:
-  version "1.3.0"
-  resolved "https://registry.yarnpkg.com/karma/-/karma-1.3.0.tgz#b2b94e8f499fadd0069d54f9aef4a4d48ec5cc1f"
+karma@^4.0.1:
+  version "4.0.1"
+  resolved "https://registry.npmjs.org/karma/-/karma-4.0.1.tgz#2581d6caa0d4cd28b65131561b47bad6d5478773"
+  integrity sha512-ind+4s03BqIXas7ZmraV3/kc5+mnqwCd+VDX1FndS6jxbt03kQKX2vXrWxNLuCjVYmhMwOZosAEKMM0a2q7w7A==
   dependencies:
     bluebird "^3.3.0"
-    body-parser "^1.12.4"
-    chokidar "^1.4.1"
+    body-parser "^1.16.1"
+    braces "^2.3.2"
+    chokidar "^2.0.3"
     colors "^1.1.0"
-    combine-lists "^1.0.0"
-    connect "^3.3.5"
+    connect "^3.6.0"
     core-js "^2.2.0"
     di "^0.0.1"
     dom-serialize "^2.2.0"
-    expand-braces "^0.1.1"
-    glob "^7.0.3"
+    flatted "^2.0.0"
+    glob "^7.1.1"
     graceful-fs "^4.1.2"
     http-proxy "^1.13.0"
     isbinaryfile "^3.0.0"
-    lodash "^3.8.0"
-    log4js "^0.6.31"
-    mime "^1.3.4"
-    minimatch "^3.0.0"
+    lodash "^4.17.11"
+    log4js "^4.0.0"
+    mime "^2.3.1"
+    minimatch "^3.0.2"
     optimist "^0.6.1"
     qjobs "^1.1.4"
     range-parser "^1.2.0"
-    rimraf "^2.3.3"
-    socket.io "1.4.7"
-    source-map "^0.5.3"
-    tmp "0.0.28"
-    useragent "^2.1.9"
+    rimraf "^2.6.0"
+    safe-buffer "^5.0.1"
+    socket.io "2.1.1"
+    source-map "^0.6.1"
+    tmp "0.0.33"
+    useragent "2.3.0"
 
-kind-of@^2.0.1:
-  version "2.0.1"
-  resolved "https://registry.yarnpkg.com/kind-of/-/kind-of-2.0.1.tgz#018ec7a4ce7e3a86cb9141be519d24c8faa981b5"
-  dependencies:
-    is-buffer "^1.0.2"
+killable@^1.0.0:
+  version "1.0.1"
+  resolved "https://registry.yarnpkg.com/killable/-/killable-1.0.1.tgz#4c8ce441187a061c7474fb87ca08e2a638194892"
+  integrity sha512-LzqtLKlUwirEUyl/nicirVmNiPvYs7l5n8wOPP7fyJVpUPkvCnW/vuiXGpylGUlnPDnB7311rARzAt3Mhswpjg==
 
-kind-of@^3.0.2, kind-of@^3.2.2:
+kind-of@^3.0.2, kind-of@^3.0.3, kind-of@^3.2.0:
   version "3.2.2"
   resolved "https://registry.yarnpkg.com/kind-of/-/kind-of-3.2.2.tgz#31ea21a734bab9bbb0f32466d893aea51e4a3c64"
+  integrity sha1-MeohpzS6ubuw8yRm2JOupR5KPGQ=
   dependencies:
     is-buffer "^1.1.5"
 
-klaw@^1.0.0:
-  version "1.3.1"
-  resolved "https://registry.yarnpkg.com/klaw/-/klaw-1.3.1.tgz#4088433b46b3b1ba259d78785d8e96f73ba02439"
-  optionalDependencies:
-    graceful-fs "^4.1.9"
+kind-of@^4.0.0:
+  version "4.0.0"
+  resolved "https://registry.yarnpkg.com/kind-of/-/kind-of-4.0.0.tgz#20813df3d712928b207378691a45066fae72dd57"
+  integrity sha1-IIE989cSkosgc3hpGkUGb65y3Vc=
+  dependencies:
+    is-buffer "^1.1.5"
 
-lazy-cache@^0.2.3:
-  version "0.2.7"
-  resolved "https://registry.yarnpkg.com/lazy-cache/-/lazy-cache-0.2.7.tgz#7feddf2dcb6edb77d11ef1d117ab5ffdf0ab1b65"
+kind-of@^5.0.0, kind-of@^5.0.2:
+  version "5.1.0"
+  resolved "https://registry.yarnpkg.com/kind-of/-/kind-of-5.1.0.tgz#729c91e2d857b7a419a1f9aa65685c4c33f5845d"
+  integrity sha512-NGEErnH6F2vUuXDh+OlbcKW7/wOcfdRHaZ7VWtqCztfHri/++YKmP51OdWeGPuqCOba6kk2OTe5d02VmTB80Pw==
 
-lazy-cache@^1.0.3:
-  version "1.0.4"
-  resolved "https://registry.yarnpkg.com/lazy-cache/-/lazy-cache-1.0.4.tgz#a1d78fc3a50474cb80845d3b3b6e1da49a446e8e"
+kind-of@^6.0.0, kind-of@^6.0.2:
+  version "6.0.2"
+  resolved "https://registry.yarnpkg.com/kind-of/-/kind-of-6.0.2.tgz#01146b36a6218e64e58f3a8d66de5d7fc6f6d051"
+  integrity sha512-s5kLOcnH0XqDO+FvuaLX8DDjZ18CGFk7VygH40QoKPUQhW4e2rvM0rwUq0t8IQDOwYSeLK01U90OjzBTme2QqA==
+
+last-call-webpack-plugin@^3.0.0:
+  version "3.0.0"
+  resolved "https://registry.yarnpkg.com/last-call-webpack-plugin/-/last-call-webpack-plugin-3.0.0.tgz#9742df0e10e3cf46e5c0381c2de90d3a7a2d7555"
+  integrity sha512-7KI2l2GIZa9p2spzPIVZBYyNKkN+e/SQPpnjlTiPhdbDW3F86tdKKELxKpzJ5sgU19wQWsACULZmpTPYHeWO5w==
+  dependencies:
+    lodash "^4.17.5"
+    webpack-sources "^1.1.0"
+
+last-run@^1.1.0:
+  version "1.1.1"
+  resolved "https://registry.yarnpkg.com/last-run/-/last-run-1.1.1.tgz#45b96942c17b1c79c772198259ba943bebf8ca5b"
+  integrity sha1-RblpQsF7HHnHchmCWbqUO+v4yls=
+  dependencies:
+    default-resolution "^2.0.0"
+    es6-weak-map "^2.0.1"
+
+latest-version@^3.0.0:
+  version "3.1.0"
+  resolved "https://registry.npm.taobao.org/latest-version/download/latest-version-3.1.0.tgz#a205383fea322b33b5ae3b18abee0dc2f356ee15"
+  integrity sha1-ogU4P+oyKzO1rjsYq+4NwvNW7hU=
+  dependencies:
+    package-json "^4.0.0"
+
+lazy-property@~1.0.0:
+  version "1.0.0"
+  resolved "https://registry.npm.taobao.org/lazy-property/download/lazy-property-1.0.0.tgz#84ddc4b370679ba8bd4cdcfa4c06b43d57111147"
+  integrity sha1-hN3Es3Bnm6i9TNz6TAa0PVcREUc=
+
+lazystream@^1.0.0:
+  version "1.0.0"
+  resolved "https://registry.yarnpkg.com/lazystream/-/lazystream-1.0.0.tgz#f6995fe0f820392f61396be89462407bb77168e4"
+  integrity sha1-9plf4PggOS9hOWvolGJAe7dxaOQ=
+  dependencies:
+    readable-stream "^2.0.5"
 
 lcid@^1.0.0:
   version "1.0.0"
   resolved "https://registry.yarnpkg.com/lcid/-/lcid-1.0.0.tgz#308accafa0bc483a3867b4b6f2b9506251d1b835"
+  integrity sha1-MIrMr6C8SDo4Z7S28rlQYlHRuDU=
   dependencies:
     invert-kv "^1.0.0"
 
-lcov-parse@0.0.10:
+lcid@^2.0.0:
+  version "2.0.0"
+  resolved "https://registry.yarnpkg.com/lcid/-/lcid-2.0.0.tgz#6ef5d2df60e52f82eb228a4c373e8d1f397253cf"
+  integrity sha512-avPEb8P8EGnwXKClwsNUgryVjllcRqtMYa49NTsbQagYuT1DcXnl1915oxWjoyGrXR6zH/Y0Zc96xWsPcoDKeA==
+  dependencies:
+    invert-kv "^2.0.0"
+
+lcov-parse@^0.0.10:
   version "0.0.10"
-  resolved "https://registry.yarnpkg.com/lcov-parse/-/lcov-parse-0.0.10.tgz#1b0b8ff9ac9c7889250582b70b71315d9da6d9a3"
+  resolved "https://registry.npmjs.org/lcov-parse/-/lcov-parse-0.0.10.tgz#1b0b8ff9ac9c7889250582b70b71315d9da6d9a3"
+  integrity sha1-GwuP+ayceIklBYK3C3ExXZ2m2aM=
+
+lead@^1.0.0:
+  version "1.0.0"
+  resolved "https://registry.yarnpkg.com/lead/-/lead-1.0.0.tgz#6f14f99a37be3a9dd784f5495690e5903466ee42"
+  integrity sha1-bxT5mje+Op3XhPVJVpDlkDRm7kI=
+  dependencies:
+    flush-write-stream "^1.0.2"
 
 levn@^0.3.0, levn@~0.3.0:
   version "0.3.0"
-  resolved "http://registry.npm.taobao.org/levn/download/levn-0.3.0.tgz#3b09924edf9f083c0490fdd4c0bc4421e04764ee"
+  resolved "https://registry.yarnpkg.com/levn/-/levn-0.3.0.tgz#3b09924edf9f083c0490fdd4c0bc4421e04764ee"
+  integrity sha1-OwmSTt+fCDwEkP3UwLxEIeBHZO4=
   dependencies:
     prelude-ls "~1.1.2"
     type-check "~0.3.2"
 
-liftoff@^2.1.0:
-  version "2.3.0"
-  resolved "https://registry.yarnpkg.com/liftoff/-/liftoff-2.3.0.tgz#a98f2ff67183d8ba7cfaca10548bd7ff0550b385"
+libcipm@^4.0.7:
+  version "4.0.7"
+  resolved "https://registry.npm.taobao.org/libcipm/download/libcipm-4.0.7.tgz?cache=0&sync_timestamp=1570651655072&other_urls=https%3A%2F%2Fregistry.npm.taobao.org%2Flibcipm%2Fdownload%2Flibcipm-4.0.7.tgz#76cd675c98bdaae64db88b782b01b804b6d02c8a"
+  integrity sha1-ds1nXJi9quZNuIt4KwG4BLbQLIo=
+  dependencies:
+    bin-links "^1.1.2"
+    bluebird "^3.5.1"
+    figgy-pudding "^3.5.1"
+    find-npm-prefix "^1.0.2"
+    graceful-fs "^4.1.11"
+    ini "^1.3.5"
+    lock-verify "^2.0.2"
+    mkdirp "^0.5.1"
+    npm-lifecycle "^3.0.0"
+    npm-logical-tree "^1.2.1"
+    npm-package-arg "^6.1.0"
+    pacote "^9.1.0"
+    read-package-json "^2.0.13"
+    rimraf "^2.6.2"
+    worker-farm "^1.6.0"
+
+libnpm@^3.0.1:
+  version "3.0.1"
+  resolved "https://registry.npm.taobao.org/libnpm/download/libnpm-3.0.1.tgz#0be11b4c9dd4d1ffd7d95c786e92e55d65be77a2"
+  integrity sha1-C+EbTJ3U0f/X2Vx4bpLlXWW+d6I=
+  dependencies:
+    bin-links "^1.1.2"
+    bluebird "^3.5.3"
+    find-npm-prefix "^1.0.2"
+    libnpmaccess "^3.0.2"
+    libnpmconfig "^1.2.1"
+    libnpmhook "^5.0.3"
+    libnpmorg "^1.0.1"
+    libnpmpublish "^1.1.2"
+    libnpmsearch "^2.0.2"
+    libnpmteam "^1.0.2"
+    lock-verify "^2.0.2"
+    npm-lifecycle "^3.0.0"
+    npm-logical-tree "^1.2.1"
+    npm-package-arg "^6.1.0"
+    npm-profile "^4.0.2"
+    npm-registry-fetch "^4.0.0"
+    npmlog "^4.1.2"
+    pacote "^9.5.3"
+    read-package-json "^2.0.13"
+    stringify-package "^1.0.0"
+
+libnpmaccess@^3.0.2:
+  version "3.0.2"
+  resolved "https://registry.npm.taobao.org/libnpmaccess/download/libnpmaccess-3.0.2.tgz#8b2d72345ba3bef90d3b4f694edd5c0417f58923"
+  integrity sha1-iy1yNFujvvkNO09pTt1cBBf1iSM=
+  dependencies:
+    aproba "^2.0.0"
+    get-stream "^4.0.0"
+    npm-package-arg "^6.1.0"
+    npm-registry-fetch "^4.0.0"
+
+libnpmconfig@^1.2.1:
+  version "1.2.1"
+  resolved "https://registry.npm.taobao.org/libnpmconfig/download/libnpmconfig-1.2.1.tgz#c0c2f793a74e67d4825e5039e7a02a0044dfcbc0"
+  integrity sha1-wML3k6dOZ9SCXlA556AqAETfy8A=
+  dependencies:
+    figgy-pudding "^3.5.1"
+    find-up "^3.0.0"
+    ini "^1.3.5"
+
+libnpmhook@^5.0.3:
+  version "5.0.3"
+  resolved "https://registry.npm.taobao.org/libnpmhook/download/libnpmhook-5.0.3.tgz#4020c0f5edbf08ebe395325caa5ea01885b928f7"
+  integrity sha1-QCDA9e2/COvjlTJcql6gGIW5KPc=
+  dependencies:
+    aproba "^2.0.0"
+    figgy-pudding "^3.4.1"
+    get-stream "^4.0.0"
+    npm-registry-fetch "^4.0.0"
+
+libnpmorg@^1.0.1:
+  version "1.0.1"
+  resolved "https://registry.npm.taobao.org/libnpmorg/download/libnpmorg-1.0.1.tgz#5d2503f6ceb57f33dbdcc718e6698fea6d5ad087"
+  integrity sha1-XSUD9s61fzPb3McY5mmP6m1a0Ic=
+  dependencies:
+    aproba "^2.0.0"
+    figgy-pudding "^3.4.1"
+    get-stream "^4.0.0"
+    npm-registry-fetch "^4.0.0"
+
+libnpmpublish@^1.1.2:
+  version "1.1.3"
+  resolved "https://registry.npm.taobao.org/libnpmpublish/download/libnpmpublish-1.1.3.tgz#e3782796722d79eef1a0a22944c117e0c4ca4280"
+  integrity sha1-43gnlnItee7xoKIpRMEX4MTKQoA=
+  dependencies:
+    aproba "^2.0.0"
+    figgy-pudding "^3.5.1"
+    get-stream "^4.0.0"
+    lodash.clonedeep "^4.5.0"
+    normalize-package-data "^2.4.0"
+    npm-package-arg "^6.1.0"
+    npm-registry-fetch "^4.0.0"
+    semver "^5.5.1"
+    ssri "^6.0.1"
+
+libnpmsearch@^2.0.2:
+  version "2.0.2"
+  resolved "https://registry.npm.taobao.org/libnpmsearch/download/libnpmsearch-2.0.2.tgz#9a4f059102d38e3dd44085bdbfe5095f2a5044cf"
+  integrity sha1-mk8FkQLTjj3UQIW9v+UJXypQRM8=
+  dependencies:
+    figgy-pudding "^3.5.1"
+    get-stream "^4.0.0"
+    npm-registry-fetch "^4.0.0"
+
+libnpmteam@^1.0.2:
+  version "1.0.2"
+  resolved "https://registry.npm.taobao.org/libnpmteam/download/libnpmteam-1.0.2.tgz#8b48bcbb6ce70dd8150c950fcbdbf3feb6eec820"
+  integrity sha1-i0i8u2znDdgVDJUPy9vz/rbuyCA=
+  dependencies:
+    aproba "^2.0.0"
+    figgy-pudding "^3.4.1"
+    get-stream "^4.0.0"
+    npm-registry-fetch "^4.0.0"
+
+libnpx@^10.2.0:
+  version "10.2.0"
+  resolved "https://registry.npm.taobao.org/libnpx/download/libnpx-10.2.0.tgz#1bf4a1c9f36081f64935eb014041da10855e3102"
+  integrity sha1-G/ShyfNggfZJNesBQEHaEIVeMQI=
+  dependencies:
+    dotenv "^5.0.1"
+    npm-package-arg "^6.0.0"
+    rimraf "^2.6.2"
+    safe-buffer "^5.1.0"
+    update-notifier "^2.3.0"
+    which "^1.3.0"
+    y18n "^4.0.0"
+    yargs "^11.0.0"
+
+liftoff@^2.5.0:
+  version "2.5.0"
+  resolved "https://registry.yarnpkg.com/liftoff/-/liftoff-2.5.0.tgz#2009291bb31cea861bbf10a7c15a28caf75c31ec"
+  integrity sha1-IAkpG7Mc6oYbvxCnwVooyvdcMew=
   dependencies:
     extend "^3.0.0"
-    findup-sync "^0.4.2"
+    findup-sync "^2.0.0"
     fined "^1.0.1"
-    flagged-respawn "^0.3.2"
-    lodash.isplainobject "^4.0.4"
-    lodash.isstring "^4.0.1"
-    lodash.mapvalues "^4.4.0"
+    flagged-respawn "^1.0.0"
+    is-plain-object "^2.0.4"
+    object.map "^1.0.0"
     rechoir "^0.6.2"
     resolve "^1.1.7"
 
-linkify-it@~1.2.2:
-  version "1.2.4"
-  resolved "https://registry.yarnpkg.com/linkify-it/-/linkify-it-1.2.4.tgz#0773526c317c8fd13bd534ee1d180ff88abf881a"
+lightercollective@^0.1.0:
+  version "0.1.0"
+  resolved "https://registry.yarnpkg.com/lightercollective/-/lightercollective-0.1.0.tgz#70df102c530dcb8d0ccabfe6175a8d00d5f61300"
+  integrity sha512-J9tg5uraYoQKaWbmrzDDexbG6hHnMcWS1qLYgJSWE+mpA3U5OCSeMUhb+K55otgZJ34oFdR0ECvdIb3xuO5JOQ==
+
+linkify-it@^2.0.0:
+  version "2.1.0"
+  resolved "https://registry.yarnpkg.com/linkify-it/-/linkify-it-2.1.0.tgz#c4caf38a6cd7ac2212ef3c7d2bde30a91561f9db"
+  integrity sha512-4REs8/062kV2DSHxNfq5183zrqXMl7WP0WzABH9IeJI+NLm429FgE1PDecltYfnOoFDFlZGh2T8PfZn0r+GTRg==
   dependencies:
     uc.micro "^1.0.1"
 
 load-json-file@^1.0.0:
   version "1.1.0"
   resolved "https://registry.yarnpkg.com/load-json-file/-/load-json-file-1.1.0.tgz#956905708d58b4bab4c2261b04f59f31c99374c0"
+  integrity sha1-lWkFcI1YtLq0wiYbBPWfMcmTdMA=
   dependencies:
     graceful-fs "^4.1.2"
     parse-json "^2.2.0"
@@ -4378,258 +7146,238 @@ load-json-file@^1.0.0:
     pinkie-promise "^2.0.0"
     strip-bom "^2.0.0"
 
-load-json-file@^2.0.0:
-  version "2.0.0"
-  resolved "https://registry.yarnpkg.com/load-json-file/-/load-json-file-2.0.0.tgz#7947e42149af80d696cbf797bcaabcfe1fe29ca8"
+load-json-file@^4.0.0:
+  version "4.0.0"
+  resolved "https://registry.npmjs.org/load-json-file/-/load-json-file-4.0.0.tgz#2f5f45ab91e33216234fd53adab668eb4ec0993b"
+  integrity sha1-L19Fq5HjMhYjT9U62rZo607AmTs=
   dependencies:
     graceful-fs "^4.1.2"
-    parse-json "^2.2.0"
-    pify "^2.0.0"
+    parse-json "^4.0.0"
+    pify "^3.0.0"
     strip-bom "^3.0.0"
 
 load-script@^1.0.0:
   version "1.0.0"
   resolved "https://registry.yarnpkg.com/load-script/-/load-script-1.0.0.tgz#0491939e0bee5643ee494a7e3da3d2bac70c6ca4"
+  integrity sha1-BJGTngvuVkPuSUp+PaPSuscMbKQ=
 
 loader-fs-cache@^1.0.0:
   version "1.0.1"
-  resolved "http://registry.npm.taobao.org/loader-fs-cache/download/loader-fs-cache-1.0.1.tgz#56e0bf08bd9708b26a765b68509840c8dec9fdbc"
+  resolved "https://registry.yarnpkg.com/loader-fs-cache/-/loader-fs-cache-1.0.1.tgz#56e0bf08bd9708b26a765b68509840c8dec9fdbc"
+  integrity sha1-VuC/CL2XCLJqdltoUJhAyN7J/bw=
   dependencies:
     find-cache-dir "^0.1.1"
     mkdirp "0.5.1"
 
 loader-runner@^2.3.0:
-  version "2.3.0"
-  resolved "https://registry.yarnpkg.com/loader-runner/-/loader-runner-2.3.0.tgz#f482aea82d543e07921700d5a46ef26fdac6b8a2"
+  version "2.4.0"
+  resolved "https://registry.yarnpkg.com/loader-runner/-/loader-runner-2.4.0.tgz#ed47066bfe534d7e84c4c7b9998c2a75607d9357"
+  integrity sha512-Jsmr89RcXGIwivFY21FcRrisYZfvLMTWx5kOLc+JTxtpBOG6xML0vzbc6SEQG2FO9/4Fc3wW4LVcB5DmGflaRw==
 
-loader-utils@^0.2.15, loader-utils@^0.2.16:
-  version "0.2.16"
-  resolved "https://registry.yarnpkg.com/loader-utils/-/loader-utils-0.2.16.tgz#f08632066ed8282835dff88dfb52704765adee6d"
+loader-utils@^0.2.11, loader-utils@^0.2.16:
+  version "0.2.17"
+  resolved "https://registry.yarnpkg.com/loader-utils/-/loader-utils-0.2.17.tgz#f86e6374d43205a6e6c60e9196f17c0299bfb348"
+  integrity sha1-+G5jdNQyBabmxg6RlvF8Apm/s0g=
   dependencies:
     big.js "^3.1.3"
     emojis-list "^2.0.0"
     json5 "^0.5.0"
     object-assign "^4.0.1"
 
-loader-utils@^1.0.0, loader-utils@^1.0.1, loader-utils@^1.0.2, loader-utils@^1.1.0:
-  version "1.1.0"
-  resolved "https://registry.yarnpkg.com/loader-utils/-/loader-utils-1.1.0.tgz#c98aef488bcceda2ffb5e2de646d6a754429f5cd"
+loader-utils@^1.0.0, loader-utils@^1.0.1, loader-utils@^1.0.2, loader-utils@^1.1.0, loader-utils@^1.2.1:
+  version "1.2.3"
+  resolved "https://registry.yarnpkg.com/loader-utils/-/loader-utils-1.2.3.tgz#1ff5dc6911c9f0a062531a4c04b609406108c2c7"
+  integrity sha512-fkpz8ejdnEMG3s37wGL07iSBDg99O9D5yflE9RGNH3hRdx9SOwYfnGYdZOUIZitN8E+E2vkq3MUMYMvPYl5ZZA==
   dependencies:
-    big.js "^3.1.3"
+    big.js "^5.2.2"
     emojis-list "^2.0.0"
-    json5 "^0.5.0"
+    json5 "^1.0.1"
 
 locate-path@^2.0.0:
   version "2.0.0"
   resolved "https://registry.yarnpkg.com/locate-path/-/locate-path-2.0.0.tgz#2b568b265eec944c6d9c0de9c3dbbbca0354cd8e"
+  integrity sha1-K1aLJl7slExtnA3pw9u7ygNUzY4=
   dependencies:
     p-locate "^2.0.0"
     path-exists "^3.0.0"
 
-lodash._baseassign@^3.0.0:
-  version "3.2.0"
-  resolved "https://registry.yarnpkg.com/lodash._baseassign/-/lodash._baseassign-3.2.0.tgz#8c38a099500f215ad09e59f1722fd0c52bfe0a4e"
+locate-path@^3.0.0:
+  version "3.0.0"
+  resolved "https://registry.yarnpkg.com/locate-path/-/locate-path-3.0.0.tgz#dbec3b3ab759758071b58fe59fc41871af21400e"
+  integrity sha512-7AO748wWnIhNqAuaty2ZWHkQHRSNfPVIsPIfwEOWO22AmaoVrWavlOcMR5nzTLNYvp36X220/maaRsrec1G65A==
   dependencies:
-    lodash._basecopy "^3.0.0"
-    lodash.keys "^3.0.0"
+    p-locate "^3.0.0"
+    path-exists "^3.0.0"
 
-lodash._basecopy@^3.0.0:
-  version "3.0.1"
-  resolved "https://registry.yarnpkg.com/lodash._basecopy/-/lodash._basecopy-3.0.1.tgz#8da0e6a876cf344c0ad8a54882111dd3c5c7ca36"
+locate-path@^5.0.0:
+  version "5.0.0"
+  resolved "https://registry.npmjs.org/locate-path/-/locate-path-5.0.0.tgz#1afba396afd676a6d42504d0a67a3a7eb9f62aa0"
+  integrity sha512-t7hw9pI+WvuwNJXwk5zVHpyhIqzg2qTlklJOf0mVxGSbe3Fp2VieZcduNYjaLDoy6p9uGpQEGWG87WpMKlNq8g==
+  dependencies:
+    p-locate "^4.1.0"
 
-lodash._basecreate@^3.0.0:
-  version "3.0.3"
-  resolved "https://registry.yarnpkg.com/lodash._basecreate/-/lodash._basecreate-3.0.3.tgz#1bc661614daa7fc311b7d03bf16806a0213cf821"
+lock-verify@^2.0.2, lock-verify@^2.1.0:
+  version "2.1.0"
+  resolved "https://registry.npm.taobao.org/lock-verify/download/lock-verify-2.1.0.tgz#fff4c918b8db9497af0c5fa7f6d71555de3ceb47"
+  integrity sha1-//TJGLjblJevDF+n9tcVVd4860c=
+  dependencies:
+    npm-package-arg "^6.1.0"
+    semver "^5.4.1"
 
-lodash._basetostring@^3.0.0:
-  version "3.0.1"
-  resolved "https://registry.yarnpkg.com/lodash._basetostring/-/lodash._basetostring-3.0.1.tgz#d1861d877f824a52f669832dcaf3ee15566a07d5"
+lockfile@^1.0.4:
+  version "1.0.4"
+  resolved "https://registry.npm.taobao.org/lockfile/download/lockfile-1.0.4.tgz#07f819d25ae48f87e538e6578b6964a4981a5609"
+  integrity sha1-B/gZ0lrkj4flOOZXi2lkpJgaVgk=
+  dependencies:
+    signal-exit "^3.0.2"
 
-lodash._basevalues@^3.0.0:
-  version "3.0.0"
-  resolved "https://registry.yarnpkg.com/lodash._basevalues/-/lodash._basevalues-3.0.0.tgz#5b775762802bde3d3297503e26300820fdf661b7"
+lodash._baseuniq@~4.6.0:
+  version "4.6.0"
+  resolved "https://registry.npm.taobao.org/lodash._baseuniq/download/lodash._baseuniq-4.6.0.tgz#0ebb44e456814af7905c6212fa2c9b2d51b841e8"
+  integrity sha1-DrtE5FaBSveQXGIS+iybLVG4Qeg=
+  dependencies:
+    lodash._createset "~4.0.0"
+    lodash._root "~3.0.0"
+
+lodash._createset@~4.0.0:
+  version "4.0.3"
+  resolved "https://registry.npm.taobao.org/lodash._createset/download/lodash._createset-4.0.3.tgz#0f4659fbb09d75194fa9e2b88a6644d363c9fe26"
+  integrity sha1-D0ZZ+7CddRlPqeK4imZE02PJ/iY=
 
 lodash._escapehtmlchar@~2.4.1:
   version "2.4.1"
   resolved "https://registry.yarnpkg.com/lodash._escapehtmlchar/-/lodash._escapehtmlchar-2.4.1.tgz#df67c3bb6b7e8e1e831ab48bfa0795b92afe899d"
+  integrity sha1-32fDu2t+jh6DGrSL+geVuSr+iZ0=
   dependencies:
     lodash._htmlescapes "~2.4.1"
 
 lodash._escapestringchar@~2.4.1:
   version "2.4.1"
   resolved "https://registry.yarnpkg.com/lodash._escapestringchar/-/lodash._escapestringchar-2.4.1.tgz#ecfe22618a2ade50bfeea43937e51df66f0edb72"
-
-lodash._getnative@^3.0.0:
-  version "3.9.1"
-  resolved "https://registry.yarnpkg.com/lodash._getnative/-/lodash._getnative-3.9.1.tgz#570bc7dede46d61cdcde687d65d3eecbaa3aaff5"
+  integrity sha1-7P4iYYoq3lC/7qQ5N+Ud9m8O23I=
 
 lodash._htmlescapes@~2.4.1:
   version "2.4.1"
   resolved "https://registry.yarnpkg.com/lodash._htmlescapes/-/lodash._htmlescapes-2.4.1.tgz#32d14bf0844b6de6f8b62a051b4f67c228b624cb"
-
-lodash._isiterateecall@^3.0.0:
-  version "3.0.9"
-  resolved "https://registry.yarnpkg.com/lodash._isiterateecall/-/lodash._isiterateecall-3.0.9.tgz#5203ad7ba425fae842460e696db9cf3e6aac057c"
+  integrity sha1-MtFL8IRLbeb4tioFG09nwii2JMs=
 
 lodash._isnative@~2.4.1:
   version "2.4.1"
   resolved "https://registry.yarnpkg.com/lodash._isnative/-/lodash._isnative-2.4.1.tgz#3ea6404b784a7be836c7b57580e1cdf79b14832c"
+  integrity sha1-PqZAS3hKe+g2x7V1gOHN95sUgyw=
 
 lodash._objecttypes@~2.4.1:
   version "2.4.1"
   resolved "https://registry.yarnpkg.com/lodash._objecttypes/-/lodash._objecttypes-2.4.1.tgz#7c0b7f69d98a1f76529f890b0cdb1b4dfec11c11"
-
-lodash._reescape@^3.0.0:
-  version "3.0.0"
-  resolved "https://registry.yarnpkg.com/lodash._reescape/-/lodash._reescape-3.0.0.tgz#2b1d6f5dfe07c8a355753e5f27fac7f1cde1616a"
-
-lodash._reevaluate@^3.0.0:
-  version "3.0.0"
-  resolved "https://registry.yarnpkg.com/lodash._reevaluate/-/lodash._reevaluate-3.0.0.tgz#58bc74c40664953ae0b124d806996daca431e2ed"
+  integrity sha1-fAt/admKH3ZSn4kLDNsbTf7BHBE=
 
 lodash._reinterpolate@^2.4.1, lodash._reinterpolate@~2.4.1:
   version "2.4.1"
   resolved "https://registry.yarnpkg.com/lodash._reinterpolate/-/lodash._reinterpolate-2.4.1.tgz#4f1227aa5a8711fc632f5b07a1f4607aab8b3222"
+  integrity sha1-TxInqlqHEfxjL1sHofRgequLMiI=
 
-lodash._reinterpolate@^3.0.0, lodash._reinterpolate@~3.0.0:
+lodash._reinterpolate@^3.0.0:
   version "3.0.0"
-  resolved "https://registry.yarnpkg.com/lodash._reinterpolate/-/lodash._reinterpolate-3.0.0.tgz#0ccf2d89166af03b3663c796538b75ac6e114d9d"
+  resolved "https://registry.npmjs.org/lodash._reinterpolate/-/lodash._reinterpolate-3.0.0.tgz#0ccf2d89166af03b3663c796538b75ac6e114d9d"
+  integrity sha1-DM8tiRZq8Ds2Y8eWU4t1rG4RTZ0=
 
 lodash._reunescapedhtml@~2.4.1:
   version "2.4.1"
   resolved "https://registry.yarnpkg.com/lodash._reunescapedhtml/-/lodash._reunescapedhtml-2.4.1.tgz#747c4fc40103eb3bb8a0976e571f7a2659e93ba7"
+  integrity sha1-dHxPxAED6zu4oJduVx96JlnpO6c=
   dependencies:
     lodash._htmlescapes "~2.4.1"
     lodash.keys "~2.4.1"
 
-lodash._root@^3.0.0:
+lodash._root@~3.0.0:
   version "3.0.1"
-  resolved "https://registry.yarnpkg.com/lodash._root/-/lodash._root-3.0.1.tgz#fba1c4524c19ee9a5f8136b4609f017cf4ded692"
+  resolved "https://registry.npm.taobao.org/lodash._root/download/lodash._root-3.0.1.tgz#fba1c4524c19ee9a5f8136b4609f017cf4ded692"
+  integrity sha1-+6HEUkwZ7ppfgTa0YJ8BfPTe1pI=
 
 lodash._shimkeys@~2.4.1:
   version "2.4.1"
   resolved "https://registry.yarnpkg.com/lodash._shimkeys/-/lodash._shimkeys-2.4.1.tgz#6e9cc9666ff081f0b5a6c978b83e242e6949d203"
+  integrity sha1-bpzJZm/wgfC1psl4uD4kLmlJ0gM=
   dependencies:
     lodash._objecttypes "~2.4.1"
 
-lodash.assign@^4.0.3, lodash.assign@^4.0.6, lodash.assign@^4.2.0:
-  version "4.2.0"
-  resolved "https://registry.yarnpkg.com/lodash.assign/-/lodash.assign-4.2.0.tgz#0d99f3ccd7a6d261d19bdaeb9245005d285808e7"
-
-lodash.assignwith@^4.0.7:
-  version "4.2.0"
-  resolved "https://registry.yarnpkg.com/lodash.assignwith/-/lodash.assignwith-4.2.0.tgz#127a97f02adc41751a954d24b0de17e100e038eb"
-
-lodash.camelcase@^4.3.0:
-  version "4.3.0"
-  resolved "https://registry.yarnpkg.com/lodash.camelcase/-/lodash.camelcase-4.3.0.tgz#b28aa6288a2b9fc651035c7711f65ab6190331a6"
-
-lodash.clonedeep@^4.3.2:
+lodash.clonedeep@^4.5.0, lodash.clonedeep@~4.5.0:
   version "4.5.0"
   resolved "https://registry.yarnpkg.com/lodash.clonedeep/-/lodash.clonedeep-4.5.0.tgz#e23f3f9c4f8fbdde872529c1071857a086e5ccef"
+  integrity sha1-4j8/nE+Pvd6HJSnBBxhXoIblzO8=
 
-lodash.create@3.1.1:
-  version "3.1.1"
-  resolved "https://registry.yarnpkg.com/lodash.create/-/lodash.create-3.1.1.tgz#d7f2849f0dbda7e04682bb8cd72ab022461debe7"
-  dependencies:
-    lodash._baseassign "^3.0.0"
-    lodash._basecreate "^3.0.0"
-    lodash._isiterateecall "^3.0.0"
+lodash.debounce@^4.0.8:
+  version "4.0.8"
+  resolved "https://registry.yarnpkg.com/lodash.debounce/-/lodash.debounce-4.0.8.tgz#82d79bff30a67c4005ffd5e2515300ad9ca4d7af"
+  integrity sha1-gteb/zCmfEAF/9XiUVMArZyk168=
 
 lodash.defaults@~2.4.1:
   version "2.4.1"
   resolved "https://registry.yarnpkg.com/lodash.defaults/-/lodash.defaults-2.4.1.tgz#a7e8885f05e68851144b6e12a8f3678026bc4c54"
+  integrity sha1-p+iIXwXmiFEUS24SqPNngCa8TFQ=
   dependencies:
     lodash._objecttypes "~2.4.1"
     lodash.keys "~2.4.1"
 
-lodash.escape@^3.0.0:
-  version "3.2.0"
-  resolved "https://registry.yarnpkg.com/lodash.escape/-/lodash.escape-3.2.0.tgz#995ee0dc18c1b48cc92effae71a10aab5b487698"
-  dependencies:
-    lodash._root "^3.0.0"
-
 lodash.escape@~2.4.1:
   version "2.4.1"
   resolved "https://registry.yarnpkg.com/lodash.escape/-/lodash.escape-2.4.1.tgz#2ce12c5e084db0a57dda5e5d1eeeb9f5d175a3b4"
+  integrity sha1-LOEsXghNsKV92l5dHu659dF1o7Q=
   dependencies:
     lodash._escapehtmlchar "~2.4.1"
     lodash._reunescapedhtml "~2.4.1"
     lodash.keys "~2.4.1"
 
-lodash.indexof@^4.0.5:
-  version "4.0.5"
-  resolved "https://registry.yarnpkg.com/lodash.indexof/-/lodash.indexof-4.0.5.tgz#53714adc2cddd6ed87638f893aa9b6c24e31ef3c"
-
-lodash.isarguments@^3.0.0:
-  version "3.1.0"
-  resolved "https://registry.yarnpkg.com/lodash.isarguments/-/lodash.isarguments-3.1.0.tgz#2f573d85c6a24289ff00663b491c1d338ff3458a"
+lodash.get@^4.4.2:
+  version "4.4.2"
+  resolved "https://registry.yarnpkg.com/lodash.get/-/lodash.get-4.4.2.tgz#2d177f652fa31e939b4438d5341499dfa3825e99"
+  integrity sha1-LRd/ZS+jHpObRDjVNBSZ36OCXpk=
 
-lodash.isarray@^3.0.0:
-  version "3.0.4"
-  resolved "https://registry.yarnpkg.com/lodash.isarray/-/lodash.isarray-3.0.4.tgz#79e4eb88c36a8122af86f844aa9bcd851b5fbb55"
+lodash.isequal@^4.5.0:
+  version "4.5.0"
+  resolved "https://registry.npm.taobao.org/lodash.isequal/download/lodash.isequal-4.5.0.tgz#415c4478f2bcc30120c22ce10ed3226f7d3e18e0"
+  integrity sha1-QVxEePK8wwEgwizhDtMib30+GOA=
 
-lodash.isempty@^4.2.1:
+lodash.ismatch@^4.4.0:
   version "4.4.0"
-  resolved "https://registry.yarnpkg.com/lodash.isempty/-/lodash.isempty-4.4.0.tgz#6f86cbedd8be4ec987be9aaf33c9684db1b31e7e"
+  resolved "https://registry.npmjs.org/lodash.ismatch/-/lodash.ismatch-4.4.0.tgz#756cb5150ca3ba6f11085a78849645f188f85f37"
+  integrity sha1-dWy1FQyjum8RCFp4hJZF8Yj4Xzc=
 
 lodash.isobject@~2.4.1:
   version "2.4.1"
   resolved "https://registry.yarnpkg.com/lodash.isobject/-/lodash.isobject-2.4.1.tgz#5a2e47fe69953f1ee631a7eba1fe64d2d06558f5"
+  integrity sha1-Wi5H/mmVPx7mMafrof5k0tBlWPU=
   dependencies:
     lodash._objecttypes "~2.4.1"
 
-lodash.isplainobject@^4.0.4:
-  version "4.0.6"
-  resolved "https://registry.yarnpkg.com/lodash.isplainobject/-/lodash.isplainobject-4.0.6.tgz#7c526a52d89b45c45cc690b88163be0497f550cb"
-
-lodash.isstring@^4.0.1:
-  version "4.0.1"
-  resolved "https://registry.yarnpkg.com/lodash.isstring/-/lodash.isstring-4.0.1.tgz#d527dfb5456eca7cc9bb95d5daeaf88ba54a5451"
-
-lodash.keys@^3.0.0:
-  version "3.1.2"
-  resolved "https://registry.yarnpkg.com/lodash.keys/-/lodash.keys-3.1.2.tgz#4dbc0472b156be50a0b286855d1bd0b0c656098a"
-  dependencies:
-    lodash._getnative "^3.0.0"
-    lodash.isarguments "^3.0.0"
-    lodash.isarray "^3.0.0"
-
 lodash.keys@~2.4.1:
   version "2.4.1"
   resolved "https://registry.yarnpkg.com/lodash.keys/-/lodash.keys-2.4.1.tgz#48dea46df8ff7632b10d706b8acb26591e2b3727"
+  integrity sha1-SN6kbfj/djKxDXBrissmWR4rNyc=
   dependencies:
     lodash._isnative "~2.4.1"
     lodash._shimkeys "~2.4.1"
     lodash.isobject "~2.4.1"
 
-lodash.mapvalues@^4.4.0:
-  version "4.6.0"
-  resolved "https://registry.yarnpkg.com/lodash.mapvalues/-/lodash.mapvalues-4.6.0.tgz#1bafa5005de9dd6f4f26668c30ca37230cc9689c"
-
-lodash.memoize@^4.1.0:
+lodash.memoize@^4.1.2:
   version "4.1.2"
   resolved "https://registry.yarnpkg.com/lodash.memoize/-/lodash.memoize-4.1.2.tgz#bcc6c49a42a2840ed997f323eada5ecd182e0bfe"
+  integrity sha1-vMbEmkKihA7Zl/Mj6tpezRguC/4=
 
-lodash.mergewith@^4.6.0:
-  version "4.6.0"
-  resolved "https://registry.yarnpkg.com/lodash.mergewith/-/lodash.mergewith-4.6.0.tgz#150cf0a16791f5903b8891eab154609274bdea55"
-
-lodash.pick@^4.2.1:
-  version "4.4.0"
-  resolved "https://registry.yarnpkg.com/lodash.pick/-/lodash.pick-4.4.0.tgz#52f05610fff9ded422611441ed1fc123a03001b3"
-
-lodash.restparam@^3.0.0:
-  version "3.6.1"
-  resolved "https://registry.yarnpkg.com/lodash.restparam/-/lodash.restparam-3.6.1.tgz#936a4e309ef330a7645ed4145986c85ae5b20805"
+lodash.set@^4.3.2:
+  version "4.3.2"
+  resolved "https://registry.yarnpkg.com/lodash.set/-/lodash.set-4.3.2.tgz#d8757b1da807dde24816b0d6a84bea1a76230b23"
+  integrity sha1-2HV7HagH3eJIFrDWqEvqGnYjCyM=
 
 lodash.tail@^4.1.1:
   version "4.1.1"
   resolved "https://registry.yarnpkg.com/lodash.tail/-/lodash.tail-4.1.1.tgz#d2333a36d9e7717c8ad2f7cacafec7c32b444664"
+  integrity sha1-0jM6NtnncXyK0vfKyv7HwytERmQ=
 
 lodash.template@^2.4.1:
   version "2.4.1"
   resolved "https://registry.yarnpkg.com/lodash.template/-/lodash.template-2.4.1.tgz#9e611007edf629129a974ab3c48b817b3e1cf20d"
+  integrity sha1-nmEQB+32KRKal0qzxIuBez4c8g0=
   dependencies:
     lodash._escapestringchar "~2.4.1"
     lodash._reinterpolate "~2.4.1"
@@ -4639,228 +7387,337 @@ lodash.template@^2.4.1:
     lodash.templatesettings "~2.4.1"
     lodash.values "~2.4.1"
 
-lodash.template@^3.0.0:
-  version "3.6.2"
-  resolved "https://registry.yarnpkg.com/lodash.template/-/lodash.template-3.6.2.tgz#f8cdecc6169a255be9098ae8b0c53d378931d14f"
+lodash.template@^4.0.2:
+  version "4.5.0"
+  resolved "https://registry.npmjs.org/lodash.template/-/lodash.template-4.5.0.tgz#f976195cf3f347d0d5f52483569fe8031ccce8ab"
+  integrity sha512-84vYFxIkmidUiFxidA/KjjH9pAycqW+h980j7Fuz5qxRtO9pgB7MDFTdys1N7A5mcucRiDyEq4fusljItR1T/A==
   dependencies:
-    lodash._basecopy "^3.0.0"
-    lodash._basetostring "^3.0.0"
-    lodash._basevalues "^3.0.0"
-    lodash._isiterateecall "^3.0.0"
     lodash._reinterpolate "^3.0.0"
-    lodash.escape "^3.0.0"
-    lodash.keys "^3.0.0"
-    lodash.restparam "^3.0.0"
-    lodash.templatesettings "^3.0.0"
-
-lodash.template@^4.2.4:
-  version "4.4.0"
-  resolved "https://registry.yarnpkg.com/lodash.template/-/lodash.template-4.4.0.tgz#e73a0385c8355591746e020b99679c690e68fba0"
-  dependencies:
-    lodash._reinterpolate "~3.0.0"
     lodash.templatesettings "^4.0.0"
 
-lodash.templatesettings@^3.0.0:
-  version "3.1.1"
-  resolved "https://registry.yarnpkg.com/lodash.templatesettings/-/lodash.templatesettings-3.1.1.tgz#fb307844753b66b9f1afa54e262c745307dba8e5"
-  dependencies:
-    lodash._reinterpolate "^3.0.0"
-    lodash.escape "^3.0.0"
-
 lodash.templatesettings@^4.0.0:
-  version "4.1.0"
-  resolved "https://registry.yarnpkg.com/lodash.templatesettings/-/lodash.templatesettings-4.1.0.tgz#2b4d4e95ba440d915ff08bc899e4553666713316"
+  version "4.2.0"
+  resolved "https://registry.npmjs.org/lodash.templatesettings/-/lodash.templatesettings-4.2.0.tgz#e481310f049d3cf6d47e912ad09313b154f0fb33"
+  integrity sha512-stgLz+i3Aa9mZgnjr/O+v9ruKZsPsndy7qPZOchbqk2cnTU1ZaldKK+v7m54WoKIyxiuMZTKT2H81F8BeAc3ZQ==
   dependencies:
-    lodash._reinterpolate "~3.0.0"
+    lodash._reinterpolate "^3.0.0"
 
 lodash.templatesettings@~2.4.1:
   version "2.4.1"
   resolved "https://registry.yarnpkg.com/lodash.templatesettings/-/lodash.templatesettings-2.4.1.tgz#ea76c75d11eb86d4dbe89a83893bb861929ac699"
+  integrity sha1-6nbHXRHrhtTb6JqDiTu4YZKaxpk=
   dependencies:
     lodash._reinterpolate "~2.4.1"
     lodash.escape "~2.4.1"
 
-lodash.uniq@^4.3.0:
+lodash.union@~4.6.0:
+  version "4.6.0"
+  resolved "https://registry.npm.taobao.org/lodash.union/download/lodash.union-4.6.0.tgz#48bb5088409f16f1821666641c44dd1aaae3cd88"
+  integrity sha1-SLtQiECfFvGCFmZkHETdGqrjzYg=
+
+lodash.uniq@^4.5.0, lodash.uniq@~4.5.0:
   version "4.5.0"
   resolved "https://registry.yarnpkg.com/lodash.uniq/-/lodash.uniq-4.5.0.tgz#d0225373aeb652adc1bc82e4945339a842754773"
+  integrity sha1-0CJTc662Uq3BvILklFM5qEJ1R3M=
 
 lodash.values@~2.4.1:
   version "2.4.1"
   resolved "https://registry.yarnpkg.com/lodash.values/-/lodash.values-2.4.1.tgz#abf514436b3cb705001627978cbcf30b1280eea4"
+  integrity sha1-q/UUQ2s8twUAFieXjLzzCxKA7qQ=
   dependencies:
     lodash.keys "~2.4.1"
 
-lodash@3.7.x:
-  version "3.7.0"
-  resolved "http://registry.npm.taobao.org/lodash/download/lodash-3.7.0.tgz#3678bd8ab995057c07ade836ed2ef087da811d45"
-
-lodash@^3.8.0:
-  version "3.10.1"
-  resolved "https://registry.yarnpkg.com/lodash/-/lodash-3.10.1.tgz#5bf45e8e49ba4189e17d482789dfd15bd140b7b6"
-
-lodash@^4.0.0, lodash@^4.2.0:
-  version "4.17.2"
-  resolved "https://registry.yarnpkg.com/lodash/-/lodash-4.17.2.tgz#34a3055babe04ce42467b607d700072c7ff6bf42"
+lodash.without@~4.4.0:
+  version "4.4.0"
+  resolved "https://registry.npm.taobao.org/lodash.without/download/lodash.without-4.4.0.tgz#3cd4574a00b67bae373a94b748772640507b7aac"
+  integrity sha1-PNRXSgC2e643OpS3SHcmQFB7eqw=
 
-lodash@^4.1.0, lodash@^4.14.0, lodash@^4.17.2, lodash@^4.17.3, lodash@^4.17.4, lodash@^4.3.0, lodash@^4.5.0, lodash@~4.17.4:
-  version "4.17.4"
-  resolved "http://registry.npm.taobao.org/lodash/download/lodash-4.17.4.tgz#78203a4d1c328ae1d86dca6460e369b57f4055ae"
+lodash@4.17.14, lodash@^4.0.0, lodash@^4.17.0, lodash@^4.17.10, lodash@^4.17.11, lodash@^4.17.3, lodash@^4.17.4, lodash@^4.17.5, lodash@^4.3.0:
+  version "4.17.14"
+  resolved "https://registry.yarnpkg.com/lodash/-/lodash-4.17.14.tgz#9ce487ae66c96254fe20b599f21b6816028078ba"
+  integrity sha512-mmKYbW3GLuJeX+iGP+Y7Gp1AiGHGbXHCOh/jZmrawMmsE7MS4znI3RL2FsjbqOyMayHInjOeykW7PEajUk1/xw==
 
-lodash@~1.0.1:
-  version "1.0.2"
-  resolved "https://registry.yarnpkg.com/lodash/-/lodash-1.0.2.tgz#8f57560c83b59fc270bd3d561b690043430e2551"
+lodash@^4.17.15, lodash@~4.17.10:
+  version "4.17.19"
+  resolved "https://registry.npm.taobao.org/lodash/download/lodash-4.17.19.tgz?cache=0&sync_timestamp=1594226931791&other_urls=https%3A%2F%2Fregistry.npm.taobao.org%2Flodash%2Fdownload%2Flodash-4.17.19.tgz#e48ddedbe30b3321783c5b4301fbd353bc1e4a4b"
+  integrity sha1-5I3e2+MLMyF4PFtDAfvTU7weSks=
 
-lodash@~2.4.1:
-  version "2.4.2"
-  resolved "https://registry.yarnpkg.com/lodash/-/lodash-2.4.2.tgz#fadd834b9683073da179b3eae6d9c0d15053f73e"
+lodash@^4.2.1:
+  version "4.17.15"
+  resolved "https://registry.npmjs.org/lodash/-/lodash-4.17.15.tgz#b447f6670a0455bbfeedd11392eff330ea097548"
+  integrity sha512-8xOcRHvCjnocdS5cpwXQXVzmmh5e5+saE2QGoeQmbKmRS6J3VQppPOIt0MnmE+4xlZoumy0GPG0D0MVIQbNA1A==
 
-log-driver@1.2.5:
-  version "1.2.5"
-  resolved "https://registry.yarnpkg.com/log-driver/-/log-driver-1.2.5.tgz#7ae4ec257302fd790d557cb10c97100d857b0056"
+log-driver@^1.2.7:
+  version "1.2.7"
+  resolved "https://registry.npmjs.org/log-driver/-/log-driver-1.2.7.tgz#63b95021f0702fedfa2c9bb0a24e7797d71871d8"
+  integrity sha512-U7KCmLdqsGHBLeWqYlFA0V0Sl6P08EE1ZrmA9cxjUE0WVqT9qnyVDPz1kzpFEP0jdJuFnasWIfSd7fsaNXkpbg==
 
-log-symbols@^2.1.0:
+log-symbols@2.2.0, log-symbols@^2.1.0:
   version "2.2.0"
-  resolved "http://registry.npm.taobao.org/log-symbols/download/log-symbols-2.2.0.tgz#5740e1c5d6f0dfda4ad9323b5332107ef6b4c40a"
+  resolved "https://registry.yarnpkg.com/log-symbols/-/log-symbols-2.2.0.tgz#5740e1c5d6f0dfda4ad9323b5332107ef6b4c40a"
+  integrity sha512-VeIAFslyIerEJLXHziedo2basKbMKtTw3vfn5IzG0XTjhAVEJyNHnL2p7vc+wBDSdQuUpNw3M2u6xb9QsAY5Eg==
   dependencies:
     chalk "^2.0.1"
 
-log4js@^0.6.31:
-  version "0.6.38"
-  resolved "https://registry.yarnpkg.com/log4js/-/log4js-0.6.38.tgz#2c494116695d6fb25480943d3fc872e662a522fd"
+log4js@^4.0.0:
+  version "4.0.2"
+  resolved "https://registry.npmjs.org/log4js/-/log4js-4.0.2.tgz#0c73e623ca4448669653eb0e9f629beacc7fbbe3"
+  integrity sha512-KE7HjiieVDPPdveA3bJZSuu0n8chMkFl8mIoisBFxwEJ9FmXe4YzNuiqSwYUiR1K8q8/5/8Yd6AClENY1RA9ww==
   dependencies:
-    readable-stream "~1.0.2"
-    semver "~4.3.3"
+    date-format "^2.0.0"
+    debug "^3.1.0"
+    flatted "^2.0.0"
+    rfdc "^1.1.2"
+    streamroller "^1.0.1"
 
 loglevel@^1.4.1:
-  version "1.5.1"
-  resolved "https://registry.yarnpkg.com/loglevel/-/loglevel-1.5.1.tgz#189078c94ab9053ee215a0acdbf24244ea0f6502"
+  version "1.6.1"
+  resolved "https://registry.yarnpkg.com/loglevel/-/loglevel-1.6.1.tgz#e0fc95133b6ef276cdc8887cdaf24aa6f156f8fa"
+  integrity sha1-4PyVEztu8nbNyIh82vJKpvFW+Po=
 
 loglevelnext@^1.0.1:
   version "1.0.5"
-  resolved "http://registry.npm.taobao.org/loglevelnext/download/loglevelnext-1.0.5.tgz#36fc4f5996d6640f539ff203ba819641680d75a2"
+  resolved "https://registry.yarnpkg.com/loglevelnext/-/loglevelnext-1.0.5.tgz#36fc4f5996d6640f539ff203ba819641680d75a2"
+  integrity sha512-V/73qkPuJmx4BcBF19xPBr+0ZRVBhc4POxvZTZdMeXpJ4NItXSJ/MSwuFT0kQJlCbXvdlZoQQ/418bS1y9Jh6A==
   dependencies:
     es6-symbol "^3.1.1"
     object.assign "^4.1.0"
 
-lolex@1.3.2:
-  version "1.3.2"
-  resolved "https://registry.yarnpkg.com/lolex/-/lolex-1.3.2.tgz#7c3da62ffcb30f0f5a80a2566ca24e45d8a01f31"
-
-lolex@^1.5.0, lolex@^1.5.1:
-  version "1.5.2"
-  resolved "https://registry.yarnpkg.com/lolex/-/lolex-1.5.2.tgz#94a4ce41c61185a05e98b8660dc509423ac1c416"
+lolex@^2.3.2:
+  version "2.7.5"
+  resolved "https://registry.npmjs.org/lolex/-/lolex-2.7.5.tgz#113001d56bfc7e02d56e36291cc5c413d1aa0733"
+  integrity sha512-l9x0+1offnKKIzYVjyXU2SiwhXDLekRzKyhnbyldPHvC7BvLPVpdNUNR2KeMAiCN2D/kLNttZgQD5WjSxuBx3Q==
 
-longest@^1.0.1:
-  version "1.0.1"
-  resolved "https://registry.yarnpkg.com/longest/-/longest-1.0.1.tgz#30a0b2da38f73770e8294a0d22e6625ed77d0097"
+lolex@^3.1.0:
+  version "3.1.0"
+  resolved "https://registry.npmjs.org/lolex/-/lolex-3.1.0.tgz#1a7feb2fefd75b3e3a7f79f0e110d9476e294434"
+  integrity sha512-zFo5MgCJ0rZ7gQg69S4pqBsLURbFw11X68C18OcJjJQbqaXm2NoTrGl1IMM3TIz0/BnN1tIs2tzmmqvCsOMMjw==
 
 loose-envify@^1.0.0:
-  version "1.3.0"
-  resolved "https://registry.yarnpkg.com/loose-envify/-/loose-envify-1.3.0.tgz#6b26248c42f6d4fa4b0d8542f78edfcde35642a8"
+  version "1.4.0"
+  resolved "https://registry.yarnpkg.com/loose-envify/-/loose-envify-1.4.0.tgz#71ee51fa7be4caec1a63839f7e682d8132d30caf"
+  integrity sha512-lyuxPGr/Wfhrlem2CL/UcnUc1zcqKAImBDzukY7Y5F/yQiNdko6+fRLevlw1HgMySw7f611UIY408EtxRSoK3Q==
   dependencies:
-    js-tokens "^2.0.0"
+    js-tokens "^3.0.0 || ^4.0.0"
 
 loud-rejection@^1.0.0, loud-rejection@^1.6.0:
   version "1.6.0"
   resolved "https://registry.yarnpkg.com/loud-rejection/-/loud-rejection-1.6.0.tgz#5b46f80147edee578870f086d04821cf998e551f"
+  integrity sha1-W0b4AUft7leIcPCG0Eghz5mOVR8=
   dependencies:
     currently-unhandled "^0.4.1"
     signal-exit "^3.0.0"
 
 lower-case@^1.1.1:
-  version "1.1.3"
-  resolved "https://registry.yarnpkg.com/lower-case/-/lower-case-1.1.3.tgz#c92393d976793eee5ba4edb583cf8eae35bd9bfb"
+  version "1.1.4"
+  resolved "https://registry.yarnpkg.com/lower-case/-/lower-case-1.1.4.tgz#9a2cabd1b9e8e0ae993a4bf7d5875c39c42e8eac"
+  integrity sha1-miyr0bno4K6ZOkv31YdcOcQujqw=
 
-lru-cache@2, lru-cache@2.2.x:
-  version "2.2.4"
-  resolved "https://registry.yarnpkg.com/lru-cache/-/lru-cache-2.2.4.tgz#6c658619becf14031d0d0b594b16042ce4dc063d"
+lowercase-keys@^1.0.0:
+  version "1.0.1"
+  resolved "https://registry.npm.taobao.org/lowercase-keys/download/lowercase-keys-1.0.1.tgz#6f9e30b47084d971a7c820ff15a6c5167b74c26f"
+  integrity sha1-b54wtHCE2XGnyCD/FabFFnt0wm8=
 
-lru-cache@^4.0.1, lru-cache@^4.1.1:
-  version "4.1.1"
-  resolved "https://registry.yarnpkg.com/lru-cache/-/lru-cache-4.1.1.tgz#622e32e82488b49279114a4f9ecf45e7cd6bba55"
+lru-cache@4.1.x, lru-cache@^4.0.1, lru-cache@^4.1.2, lru-cache@^4.1.5:
+  version "4.1.5"
+  resolved "https://registry.yarnpkg.com/lru-cache/-/lru-cache-4.1.5.tgz#8bbe50ea85bed59bc9e33dcab8235ee9bcf443cd"
+  integrity sha512-sWZlbEP2OsHNkXrMl5GYk/jKk70MBng6UU4YI/qGDYbgf6YbP4EvmqISbXCoJiRKs+1bSpFHVgQxvJ17F2li5g==
   dependencies:
     pseudomap "^1.0.2"
     yallist "^2.1.2"
 
-macaddress@^0.2.8:
-  version "0.2.8"
-  resolved "https://registry.yarnpkg.com/macaddress/-/macaddress-0.2.8.tgz#5904dc537c39ec6dbefeae902327135fa8511f12"
+lru-cache@^5.1.1:
+  version "5.1.1"
+  resolved "https://registry.yarnpkg.com/lru-cache/-/lru-cache-5.1.1.tgz#1da27e6710271947695daf6848e847f01d84b920"
+  integrity sha512-KpNARQA3Iwv+jTA0utUVVbrh+Jlrr1Fv0e56GGzAFOXN7dk/FviaDW8LHmK52DlcH4WP2n6gI8vN1aesBFgo9w==
+  dependencies:
+    yallist "^3.0.2"
 
 make-dir@^1.0.0:
   version "1.3.0"
-  resolved "http://registry.npm.taobao.org/make-dir/download/make-dir-1.3.0.tgz#79c1033b80515bd6d24ec9933e860ca75ee27f0c"
+  resolved "https://registry.yarnpkg.com/make-dir/-/make-dir-1.3.0.tgz#79c1033b80515bd6d24ec9933e860ca75ee27f0c"
+  integrity sha512-2w31R7SJtieJJnQtGc7RVL2StM2vGYVfqUOvUDxH6bC6aJTxPxTF0GnIgCyu7tjockiUWAYQRbxa7vKn34s5sQ==
+  dependencies:
+    pify "^3.0.0"
+
+make-fetch-happen@^5.0.0:
+  version "5.0.2"
+  resolved "https://registry.npm.taobao.org/make-fetch-happen/download/make-fetch-happen-5.0.2.tgz?cache=0&sync_timestamp=1576543157960&other_urls=https%3A%2F%2Fregistry.npm.taobao.org%2Fmake-fetch-happen%2Fdownload%2Fmake-fetch-happen-5.0.2.tgz#aa8387104f2687edca01c8687ee45013d02d19bd"
+  integrity sha1-qoOHEE8mh+3KAchofuRQE9AtGb0=
+  dependencies:
+    agentkeepalive "^3.4.1"
+    cacache "^12.0.0"
+    http-cache-semantics "^3.8.1"
+    http-proxy-agent "^2.1.0"
+    https-proxy-agent "^2.2.3"
+    lru-cache "^5.1.1"
+    mississippi "^3.0.0"
+    node-fetch-npm "^2.0.2"
+    promise-retry "^1.1.1"
+    socks-proxy-agent "^4.0.0"
+    ssri "^6.0.0"
+
+make-iterator@^1.0.0:
+  version "1.0.1"
+  resolved "https://registry.yarnpkg.com/make-iterator/-/make-iterator-1.0.1.tgz#29b33f312aa8f547c4a5e490f56afcec99133ad6"
+  integrity sha512-pxiuXh0iVEq7VM7KMIhs5gxsfxCux2URptUQaXo4iZZJxBAzTPOLE2BumO5dbfVYq/hBJFBR/a1mFDmOx5AGmw==
+  dependencies:
+    kind-of "^6.0.2"
+
+map-age-cleaner@^0.1.1:
+  version "0.1.3"
+  resolved "https://registry.yarnpkg.com/map-age-cleaner/-/map-age-cleaner-0.1.3.tgz#7d583a7306434c055fe474b0f45078e6e1b4b92a"
+  integrity sha512-bJzx6nMoP6PDLPBFmg7+xRKeFZvFboMrGlxmNj9ClvX53KrmvM5bXFXEWjbz4cz1AFn+jWJ9z/DJSz7hrs0w3w==
   dependencies:
-    pify "^3.0.0"
+    p-defer "^1.0.0"
 
-map-cache@^0.2.0:
+map-cache@^0.2.0, map-cache@^0.2.2:
   version "0.2.2"
   resolved "https://registry.yarnpkg.com/map-cache/-/map-cache-0.2.2.tgz#c32abd0bd6525d9b051645bb4f26ac5dc98a0dbf"
+  integrity sha1-wyq9C9ZSXZsFFkW7TyasXcmKDb8=
 
 map-obj@^1.0.0, map-obj@^1.0.1:
   version "1.0.1"
   resolved "https://registry.yarnpkg.com/map-obj/-/map-obj-1.0.1.tgz#d933ceb9205d82bdcf4886f6742bdc2b4dea146d"
+  integrity sha1-2TPOuSBdgr3PSIb2dCvcK03qFG0=
+
+map-obj@^2.0.0:
+  version "2.0.0"
+  resolved "https://registry.npmjs.org/map-obj/-/map-obj-2.0.0.tgz#a65cd29087a92598b8791257a523e021222ac1f9"
+  integrity sha1-plzSkIepJZi4eRJXpSPgISIqwfk=
 
-map-stream@0.0.4, map-stream@>=0.0.4:
+map-stream@0.0.4:
   version "0.0.4"
   resolved "https://registry.yarnpkg.com/map-stream/-/map-stream-0.0.4.tgz#5ec6de90213ef6c7b2eb9367e9ade8da4efdb68b"
+  integrity sha1-XsbekCE+9sey65Nn6a3o2k79tos=
 
-markdown-it-anchor@^2.5.0:
-  version "2.6.0"
-  resolved "https://registry.yarnpkg.com/markdown-it-anchor/-/markdown-it-anchor-2.6.0.tgz#875d364f75d26f194616b843eee0083a8cea40de"
+map-stream@>=0.0.4:
+  version "0.0.7"
+  resolved "https://registry.yarnpkg.com/map-stream/-/map-stream-0.0.7.tgz#8a1f07896d82b10926bd3744a2420009f88974a8"
+  integrity sha1-ih8HiW2CsQkmvTdEokIACfiJdKg=
+
+map-visit@^1.0.0:
+  version "1.0.0"
+  resolved "https://registry.yarnpkg.com/map-visit/-/map-visit-1.0.0.tgz#ecdca8f13144e660f1b5bd41f12f3479d98dfb8f"
+  integrity sha1-7Nyo8TFE5mDxtb1B8S80edmN+48=
+  dependencies:
+    object-visit "^1.0.0"
+
+markdown-it-anchor@^5.0.2:
+  version "5.0.2"
+  resolved "https://registry.yarnpkg.com/markdown-it-anchor/-/markdown-it-anchor-5.0.2.tgz#cdd917a05b7bf92fb736a6dae3385c6d0d0fa552"
+  integrity sha512-AFM/woBI8QDJMS/9+MmsBMT5/AR+ImfOsunQZTZhzcTmna3rIzAzbOh5E0l6mlFM/i9666BpUtkqQ9bS7WApCg==
+
+markdown-it-chain@^1.3.0:
+  version "1.3.0"
+  resolved "https://registry.yarnpkg.com/markdown-it-chain/-/markdown-it-chain-1.3.0.tgz#ccf6fe86c10266bafb4e547380dfd7f277cc17bc"
+  integrity sha512-XClV8I1TKy8L2qsT9iX3qiV+50ZtcInGXI80CA+DP62sMs7hXlyV/RM3hfwy5O3Ad0sJm9xIwQELgANfESo8mQ==
   dependencies:
-    string "^3.0.1"
+    webpack-chain "^4.9.0"
 
 markdown-it-container@^2.0.0:
   version "2.0.0"
   resolved "https://registry.yarnpkg.com/markdown-it-container/-/markdown-it-container-2.0.0.tgz#0019b43fd02eefece2f1960a2895fba81a404695"
+  integrity sha1-ABm0P9Au7+zi8ZYKKJX7qBpARpU=
 
-markdown-it@^6.0.5, markdown-it@^6.1.1:
-  version "6.1.1"
-  resolved "https://registry.yarnpkg.com/markdown-it/-/markdown-it-6.1.1.tgz#ced037f4473ee9f5153ac414f77dc83c91ba927c"
+markdown-it@^8.4.1:
+  version "8.4.2"
+  resolved "https://registry.yarnpkg.com/markdown-it/-/markdown-it-8.4.2.tgz#386f98998dc15a37722aa7722084f4020bdd9b54"
+  integrity sha512-GcRz3AWTqSUphY3vsUqQSFMbgR38a4Lh3GWlHRh/7MRwz8mcu9n2IO7HOh+bXHrR9kOPDl5RNCaEsrneb+xhHQ==
   dependencies:
     argparse "^1.0.7"
     entities "~1.1.1"
-    linkify-it "~1.2.2"
-    mdurl "~1.0.1"
-    uc.micro "^1.0.1"
+    linkify-it "^2.0.0"
+    mdurl "^1.0.1"
+    uc.micro "^1.0.5"
 
-math-expression-evaluator@^1.2.14:
-  version "1.2.14"
-  resolved "https://registry.yarnpkg.com/math-expression-evaluator/-/math-expression-evaluator-1.2.14.tgz#39511771ed9602405fba9affff17eb4d2a3843ab"
+matchdep@^2.0.0:
+  version "2.0.0"
+  resolved "https://registry.yarnpkg.com/matchdep/-/matchdep-2.0.0.tgz#c6f34834a0d8dbc3b37c27ee8bbcb27c7775582e"
+  integrity sha1-xvNINKDY28OzfCfui7yyfHd1WC4=
   dependencies:
-    lodash.indexof "^4.0.5"
+    findup-sync "^2.0.0"
+    micromatch "^3.0.4"
+    resolve "^1.4.0"
+    stack-trace "0.0.10"
+
+math-random@^1.0.1:
+  version "1.0.4"
+  resolved "https://registry.yarnpkg.com/math-random/-/math-random-1.0.4.tgz#5dd6943c938548267016d4e34f057583080c514c"
+  integrity sha512-rUxjysqif/BZQH2yhd5Aaq7vXMSx9NdEsQcyA07uEzIvxgI7zIr33gGsh+RU0/XjmQpCW7RsVof1vlkvQVCK5A==
 
 md5.js@^1.3.4:
-  version "1.3.4"
-  resolved "https://registry.yarnpkg.com/md5.js/-/md5.js-1.3.4.tgz#e9bdbde94a20a5ac18b04340fc5764d5b09d901d"
+  version "1.3.5"
+  resolved "https://registry.yarnpkg.com/md5.js/-/md5.js-1.3.5.tgz#b5d07b8e3216e3e27cd728d72f70d1e6a342005f"
+  integrity sha512-xitP+WxNPcTTOgnTJcrhM0xvdPepipPSf3I8EIpGKeFLjt3PlJLIDG3u8EX53ZIubkb+5U2+3rELYpEhHhzdkg==
   dependencies:
     hash-base "^3.0.0"
     inherits "^2.0.1"
+    safe-buffer "^5.1.2"
+
+mdn-data@~1.1.0:
+  version "1.1.4"
+  resolved "https://registry.yarnpkg.com/mdn-data/-/mdn-data-1.1.4.tgz#50b5d4ffc4575276573c4eedb8780812a8419f01"
+  integrity sha512-FSYbp3lyKjyj3E7fMl6rYvUdX0FBXaluGqlFoYESWQlyUTq8R+wp0rkFxoYFqZlHCvsUXGjyJmLQSnXToYhOSA==
 
-mdurl@~1.0.1:
+mdurl@^1.0.1:
   version "1.0.1"
   resolved "https://registry.yarnpkg.com/mdurl/-/mdurl-1.0.1.tgz#fe85b2ec75a59037f2adfec100fd6c601761152e"
+  integrity sha1-/oWy7HWlkDfyrf7BAP1sYBdhFS4=
+
+meant@~1.0.1:
+  version "1.0.1"
+  resolved "https://registry.npm.taobao.org/meant/download/meant-1.0.1.tgz#66044fea2f23230ec806fb515efea29c44d2115d"
+  integrity sha1-ZgRP6i8jIw7IBvtRXv6inETSEV0=
 
 media-typer@0.3.0:
   version "0.3.0"
   resolved "https://registry.yarnpkg.com/media-typer/-/media-typer-0.3.0.tgz#8710d7af0aa626f8fffa1ce00168545263255748"
+  integrity sha1-hxDXrwqmJvj/+hzgAWhUUmMlV0g=
 
 mem@^1.1.0:
   version "1.1.0"
   resolved "https://registry.yarnpkg.com/mem/-/mem-1.1.0.tgz#5edd52b485ca1d900fe64895505399a0dfa45f76"
+  integrity sha1-Xt1StIXKHZAP5kiVUFOZoN+kX3Y=
+  dependencies:
+    mimic-fn "^1.0.0"
+
+mem@^4.0.0:
+  version "4.0.0"
+  resolved "https://registry.yarnpkg.com/mem/-/mem-4.0.0.tgz#6437690d9471678f6cc83659c00cbafcd6b0cdaf"
+  integrity sha512-WQxG/5xYc3tMbYLXoXPm81ET2WDULiU5FxbuIoNbJqLOOI8zehXFdZuiUEgfdrU2mVB1pxBZUGlYORSrpuJreA==
   dependencies:
+    map-age-cleaner "^0.1.1"
     mimic-fn "^1.0.0"
+    p-is-promise "^1.1.0"
 
 memory-fs@^0.4.0, memory-fs@~0.4.1:
   version "0.4.1"
   resolved "https://registry.yarnpkg.com/memory-fs/-/memory-fs-0.4.1.tgz#3a9a20b8462523e447cfbc7e8bb80ed667bfc552"
+  integrity sha1-OpoguEYlI+RHz7x+i7gO1me/xVI=
   dependencies:
     errno "^0.1.3"
     readable-stream "^2.0.1"
 
+meow@5.0.0:
+  version "5.0.0"
+  resolved "https://registry.yarnpkg.com/meow/-/meow-5.0.0.tgz#dfc73d63a9afc714a5e371760eb5c88b91078aa4"
+  integrity sha512-CbTqYU17ABaLefO8vCU153ZZlprKYWDljcndKKDCFcYQITzWCXZAVk4QMFZPgvzrnUQ3uItnIE/LoUOwrT15Ig==
+  dependencies:
+    camelcase-keys "^4.0.0"
+    decamelize-keys "^1.0.0"
+    loud-rejection "^1.0.0"
+    minimist-options "^3.0.1"
+    normalize-package-data "^2.3.4"
+    read-pkg-up "^3.0.0"
+    redent "^2.0.0"
+    trim-newlines "^2.0.0"
+    yargs-parser "^10.0.0"
+
 meow@^3.3.0, meow@^3.7.0:
   version "3.7.0"
   resolved "https://registry.yarnpkg.com/meow/-/meow-3.7.0.tgz#72cb668b425228290abbfa856892587308a801fb"
+  integrity sha1-cstmi0JSKCkKu/qFaJJYcwioAfs=
   dependencies:
     camelcase-keys "^2.0.0"
     decamelize "^1.1.2"
@@ -4873,17 +7730,42 @@ meow@^3.3.0, meow@^3.7.0:
     redent "^1.0.0"
     trim-newlines "^1.0.0"
 
+meow@^4.0.0:
+  version "4.0.1"
+  resolved "https://registry.npmjs.org/meow/-/meow-4.0.1.tgz#d48598f6f4b1472f35bf6317a95945ace347f975"
+  integrity sha512-xcSBHD5Z86zaOc+781KrupuHAzeGXSLtiAOmBsiLDiPSaYSB6hdew2ng9EBAnZ62jagG9MHAOdxpDi/lWBFJ/A==
+  dependencies:
+    camelcase-keys "^4.0.0"
+    decamelize-keys "^1.0.0"
+    loud-rejection "^1.0.0"
+    minimist "^1.1.3"
+    minimist-options "^3.0.1"
+    normalize-package-data "^2.3.4"
+    read-pkg-up "^3.0.0"
+    redent "^2.0.0"
+    trim-newlines "^2.0.0"
+
 merge-descriptors@1.0.1:
   version "1.0.1"
   resolved "https://registry.yarnpkg.com/merge-descriptors/-/merge-descriptors-1.0.1.tgz#b00aaa556dd8b44568150ec9d1b953f3f90cbb61"
+  integrity sha1-sAqqVW3YtEVoFQ7J0blT8/kMu2E=
+
+merge-source-map@^1.1.0:
+  version "1.1.0"
+  resolved "https://registry.yarnpkg.com/merge-source-map/-/merge-source-map-1.1.0.tgz#2fdde7e6020939f70906a68f2d7ae685e4c8c646"
+  integrity sha512-Qkcp7P2ygktpMPh2mCQZaf3jhN6D3Z/qVZHSdWvQ+2Ef5HgRAPBO57A77+ENm0CPx2+1Ce/MYKi3ymqdfuqibw==
+  dependencies:
+    source-map "^0.6.1"
 
 methods@~1.1.2:
   version "1.1.2"
   resolved "https://registry.yarnpkg.com/methods/-/methods-1.1.2.tgz#5529a4d67654134edcc5266656835b0f851afcee"
+  integrity sha1-VSmk1nZUE07cxSZmVoNbD4Ua/O4=
 
-micromatch@^2.1.5, micromatch@^2.3.11, micromatch@^2.3.7:
+micromatch@^2.1.5, micromatch@^2.3.11:
   version "2.3.11"
   resolved "https://registry.yarnpkg.com/micromatch/-/micromatch-2.3.11.tgz#86677c97d1720b363431d04d0d15293bd38c1565"
+  integrity sha1-hmd8l9FyCzY0MdBNDRUpO9OMFWU=
   dependencies:
     arr-diff "^2.0.0"
     array-unique "^0.2.1"
@@ -4899,273 +7781,504 @@ micromatch@^2.1.5, micromatch@^2.3.11, micromatch@^2.3.7:
     parse-glob "^3.0.4"
     regex-cache "^0.4.2"
 
+micromatch@^3.0.4, micromatch@^3.1.10, micromatch@^3.1.4, micromatch@^3.1.8, micromatch@^3.1.9:
+  version "3.1.10"
+  resolved "https://registry.yarnpkg.com/micromatch/-/micromatch-3.1.10.tgz#70859bc95c9840952f359a068a3fc49f9ecfac23"
+  integrity sha512-MWikgl9n9M3w+bpsY3He8L+w9eF9338xRl8IAO5viDizwSzziFEyUzo2xrrloB64ADbTf8uA8vRqqttDTOmccg==
+  dependencies:
+    arr-diff "^4.0.0"
+    array-unique "^0.3.2"
+    braces "^2.3.1"
+    define-property "^2.0.2"
+    extend-shallow "^3.0.2"
+    extglob "^2.0.4"
+    fragment-cache "^0.2.1"
+    kind-of "^6.0.2"
+    nanomatch "^1.2.9"
+    object.pick "^1.3.0"
+    regex-not "^1.0.0"
+    snapdragon "^0.8.1"
+    to-regex "^3.0.2"
+
 miller-rabin@^4.0.0:
   version "4.0.1"
   resolved "https://registry.yarnpkg.com/miller-rabin/-/miller-rabin-4.0.1.tgz#f080351c865b0dc562a8462966daa53543c78a4d"
+  integrity sha512-115fLhvZVqWwHPbClyntxEVfVDfl9DLLTuJvq3g2O/Oxi8AiNouAHvDSzHS0viUJc+V5vm3eq91Xwqn9dp4jRA==
   dependencies:
     bn.js "^4.0.0"
     brorand "^1.0.1"
 
-"mime-db@>= 1.24.0 < 2", mime-db@~1.25.0:
-  version "1.25.0"
-  resolved "https://registry.yarnpkg.com/mime-db/-/mime-db-1.25.0.tgz#c18dbd7c73a5dbf6f44a024dc0d165a1e7b1c392"
-
-mime-db@~1.12.0:
-  version "1.12.0"
-  resolved "https://registry.yarnpkg.com/mime-db/-/mime-db-1.12.0.tgz#3d0c63180f458eb10d325aaa37d7c58ae312e9d7"
-
-mime-types@^2.1.11, mime-types@^2.1.12, mime-types@~2.1.11, mime-types@~2.1.13, mime-types@~2.1.7:
-  version "2.1.13"
-  resolved "https://registry.yarnpkg.com/mime-types/-/mime-types-2.1.13.tgz#e07aaa9c6c6b9a7ca3012c69003ad25a39e92a88"
-  dependencies:
-    mime-db "~1.25.0"
+"mime-db@>= 1.36.0 < 2", mime-db@~1.37.0:
+  version "1.37.0"
+  resolved "https://registry.yarnpkg.com/mime-db/-/mime-db-1.37.0.tgz#0b6a0ce6fdbe9576e25f1f2d2fde8830dc0ad0d8"
+  integrity sha512-R3C4db6bgQhlIhPU48fUtdVmKnflq+hRdad7IyKhtFj06VPNVdk2RhiYL3UjQIlso8L+YxAtFkobT0VK+S/ybg==
 
-mime-types@~2.0.4:
-  version "2.0.14"
-  resolved "https://registry.yarnpkg.com/mime-types/-/mime-types-2.0.14.tgz#310e159db23e077f8bb22b748dabfa4957140aa6"
+mime-types@^2.1.12, mime-types@~2.1.17, mime-types@~2.1.18, mime-types@~2.1.19:
+  version "2.1.21"
+  resolved "https://registry.yarnpkg.com/mime-types/-/mime-types-2.1.21.tgz#28995aa1ecb770742fe6ae7e58f9181c744b3f96"
+  integrity sha512-3iL6DbwpyLzjR3xHSFNFeb9Nz/M8WDkX33t1GFQnFOllWk8pOrh/LSrB5OXlnlW5P9LH73X6loW/eogc+F5lJg==
   dependencies:
-    mime-db "~1.12.0"
-
-mime@1.3.4, mime@^1.3.4:
-  version "1.3.4"
-  resolved "https://registry.yarnpkg.com/mime/-/mime-1.3.4.tgz#115f9e3b6b3daf2959983cb38f149a2d40eb5d53"
+    mime-db "~1.37.0"
 
-mime@^1.2.11, mime@^1.4.1:
+mime@1.4.1:
   version "1.4.1"
   resolved "https://registry.yarnpkg.com/mime/-/mime-1.4.1.tgz#121f9ebc49e3766f311a76e1fa1c8003c4b03aa6"
+  integrity sha512-KI1+qOZu5DcW6wayYHSzR/tXKCDC5Om4s1z2QJjDULzLcmf3DvzS7oluY4HCTrc+9FiKmWUgeNLg7W3uIQvxtQ==
 
-mime@^2.1.0:
-  version "2.3.1"
-  resolved "http://registry.npm.taobao.org/mime/download/mime-2.3.1.tgz#b1621c54d63b97c47d3cfe7f7215f7d64517c369"
-
-mimeparse@^0.1.4:
-  version "0.1.4"
-  resolved "https://registry.yarnpkg.com/mimeparse/-/mimeparse-0.1.4.tgz#dafb02752370fd226093ae3152c271af01ac254a"
+mime@^2.0.3, mime@^2.1.0, mime@^2.3.1:
+  version "2.4.0"
+  resolved "https://registry.yarnpkg.com/mime/-/mime-2.4.0.tgz#e051fd881358585f3279df333fe694da0bcffdd6"
+  integrity sha512-ikBcWwyqXQSHKtciCcctu9YfPbFYZ4+gbHEmE0Q8jzcTYQg5dHCr3g2wwAZjPoJfQVXZq6KXAjpXOTf5/cjT7w==
 
 mimic-fn@^1.0.0:
-  version "1.1.0"
-  resolved "http://registry.npm.taobao.org/mimic-fn/download/mimic-fn-1.1.0.tgz#e667783d92e89dbd342818b5230b9d62a672ad18"
+  version "1.2.0"
+  resolved "https://registry.yarnpkg.com/mimic-fn/-/mimic-fn-1.2.0.tgz#820c86a39334640e99516928bd03fca88057d022"
+  integrity sha512-jf84uxzwiuiIVKiOLpfYk7N46TSy8ubTonmneY9vrpHNAnp0QBt2BxWV9dO3/j+BoVAb+a5G6YDPW3M5HOdMWQ==
 
 min-document@^2.19.0:
   version "2.19.0"
   resolved "https://registry.yarnpkg.com/min-document/-/min-document-2.19.0.tgz#7bd282e3f5842ed295bb748cdd9f1ffa2c824685"
+  integrity sha1-e9KC4/WELtKVu3SM3Z8f+iyCRoU=
   dependencies:
     dom-walk "^0.1.0"
 
-minimalistic-assert@^1.0.0:
-  version "1.0.0"
-  resolved "https://registry.yarnpkg.com/minimalistic-assert/-/minimalistic-assert-1.0.0.tgz#702be2dda6b37f4836bcb3f5db56641b64a1d3d3"
+mini-css-extract-plugin@^0.4.1:
+  version "0.4.5"
+  resolved "https://registry.yarnpkg.com/mini-css-extract-plugin/-/mini-css-extract-plugin-0.4.5.tgz#c99e9e78d54f3fa775633aee5933aeaa4e80719a"
+  integrity sha512-dqBanNfktnp2hwL2YguV9Jh91PFX7gu7nRLs4TGsbAfAG6WOtlynFRYzwDwmmeSb5uIwHo9nx1ta0f7vAZVp2w==
+  dependencies:
+    loader-utils "^1.1.0"
+    schema-utils "^1.0.0"
+    webpack-sources "^1.1.0"
+
+minimalistic-assert@^1.0.0, minimalistic-assert@^1.0.1:
+  version "1.0.1"
+  resolved "https://registry.yarnpkg.com/minimalistic-assert/-/minimalistic-assert-1.0.1.tgz#2e194de044626d4a10e7f7fbc00ce73e83e4d5c7"
+  integrity sha512-UtJcAD4yEaGtjPezWuO9wC4nwUnVH/8/Im3yEHQP4b67cXlD/Qr9hdITCU1xDbSEXg2XKNaP8jsReV7vQd00/A==
 
 minimalistic-crypto-utils@^1.0.0, minimalistic-crypto-utils@^1.0.1:
   version "1.0.1"
   resolved "https://registry.yarnpkg.com/minimalistic-crypto-utils/-/minimalistic-crypto-utils-1.0.1.tgz#f6c00c1c0b082246e5c4d99dfb8c7c083b2b582a"
+  integrity sha1-9sAMHAsIIkblxNmd+4x8CDsrWCo=
 
-"minimatch@2 || 3", minimatch@^3.0.0, minimatch@^3.0.2, minimatch@^3.0.4, minimatch@~3.0.2:
+"minimatch@2 || 3", minimatch@3.0.4, minimatch@^3.0.0, minimatch@^3.0.2, minimatch@^3.0.4, minimatch@~3.0.2:
   version "3.0.4"
   resolved "https://registry.yarnpkg.com/minimatch/-/minimatch-3.0.4.tgz#5166e286457f03306064be5497e8dbb0c3d32083"
+  integrity sha512-yJHVQEhyqPLUTgt9B83PXu6W3rx4MvvHvSUvToogpwoGDOUQ+yDrR0HRot+yOCdCO7u4hX3pWft6kWBBcqh0UA==
   dependencies:
     brace-expansion "^1.1.7"
 
-minimatch@^2.0.1:
-  version "2.0.10"
-  resolved "https://registry.yarnpkg.com/minimatch/-/minimatch-2.0.10.tgz#8d087c39c6b38c001b97fca7ce6d0e1e80afbac7"
-  dependencies:
-    brace-expansion "^1.0.0"
-
-minimatch@~0.2.11:
-  version "0.2.14"
-  resolved "https://registry.yarnpkg.com/minimatch/-/minimatch-0.2.14.tgz#c74e780574f63c6f9a090e90efbe6ef53a6a756a"
+minimist-options@^3.0.1:
+  version "3.0.2"
+  resolved "https://registry.npmjs.org/minimist-options/-/minimist-options-3.0.2.tgz#fba4c8191339e13ecf4d61beb03f070103f3d954"
+  integrity sha512-FyBrT/d0d4+uiZRbqznPXqw3IpZZG3gl3wKWiX784FycUKVwBt0uLBFkQrtE4tZOrgo78nZp2jnKz3L65T5LdQ==
   dependencies:
-    lru-cache "2"
-    sigmund "~1.0.0"
+    arrify "^1.0.1"
+    is-plain-obj "^1.1.0"
 
-minimist@0.0.8, minimist@~0.0.1:
+minimist@0.0.8:
   version "0.0.8"
-  resolved "http://registry.npm.taobao.org/minimist/download/minimist-0.0.8.tgz#857fcabfc3397d2625b8228262e86aa7a011b05d"
+  resolved "https://registry.yarnpkg.com/minimist/-/minimist-0.0.8.tgz#857fcabfc3397d2625b8228262e86aa7a011b05d"
+  integrity sha1-hX/Kv8M5fSYluCKCYuhqp6ARsF0=
 
-minimist@1.2.0, minimist@^1.1.0, minimist@^1.1.3, minimist@^1.2.0:
+minimist@1.2.0, minimist@^1.1.3, minimist@^1.2.0:
   version "1.2.0"
   resolved "https://registry.yarnpkg.com/minimist/-/minimist-1.2.0.tgz#a35008b20f41383eec1fb914f4cd5df79a264284"
+  integrity sha1-o1AIsg9BOD7sH7kU9M1d95omQoQ=
 
 minimist@^0.2.0:
   version "0.2.0"
   resolved "https://registry.yarnpkg.com/minimist/-/minimist-0.2.0.tgz#4dffe525dae2b864c66c2e23c6271d7afdecefce"
+  integrity sha1-Tf/lJdriuGTGbC4jxicdev3s784=
+
+minimist@^1.2.5:
+  version "1.2.5"
+  resolved "https://registry.npm.taobao.org/minimist/download/minimist-1.2.5.tgz?cache=0&sync_timestamp=1589682820731&other_urls=https%3A%2F%2Fregistry.npm.taobao.org%2Fminimist%2Fdownload%2Fminimist-1.2.5.tgz#67d66014b66a6a8aaa0c083c5fd58df4e4e97602"
+  integrity sha1-Z9ZgFLZqaoqqDAg8X9WN9OTpdgI=
+
+minimist@~0.0.1:
+  version "0.0.10"
+  resolved "https://registry.yarnpkg.com/minimist/-/minimist-0.0.10.tgz#de3f98543dbf96082be48ad1a0c7cda836301dcf"
+  integrity sha1-3j+YVD2/lggr5IrRoMfNqDYwHc8=
+
+minipass@^2.2.1, minipass@^2.3.4:
+  version "2.3.5"
+  resolved "https://registry.yarnpkg.com/minipass/-/minipass-2.3.5.tgz#cacebe492022497f656b0f0f51e2682a9ed2d848"
+  integrity sha512-Gi1W4k059gyRbyVUZQ4mEqLm0YIUiGYfvxhF6SIlk3ui1WVxMTGfGdQ2SInh3PDrRTVvPKgULkpJtT4RH10+VA==
+  dependencies:
+    safe-buffer "^5.1.2"
+    yallist "^3.0.0"
+
+minipass@^2.3.5, minipass@^2.8.6, minipass@^2.9.0:
+  version "2.9.0"
+  resolved "https://registry.npm.taobao.org/minipass/download/minipass-2.9.0.tgz#e713762e7d3e32fed803115cf93e04bca9fcc9a6"
+  integrity sha1-5xN2Ln0+Mv7YAxFc+T4EvKn8yaY=
+  dependencies:
+    safe-buffer "^5.1.2"
+    yallist "^3.0.0"
+
+minizlib@^1.1.1:
+  version "1.2.1"
+  resolved "https://registry.yarnpkg.com/minizlib/-/minizlib-1.2.1.tgz#dd27ea6136243c7c880684e8672bb3a45fd9b614"
+  integrity sha512-7+4oTUOWKg7AuL3vloEWekXY2/D20cevzsrNT2kGWm+39J9hGTCBv8VI5Pm5lXZ/o3/mdR4f8rflAPhnQb8mPA==
+  dependencies:
+    minipass "^2.2.1"
+
+minizlib@^1.2.1:
+  version "1.3.3"
+  resolved "https://registry.npm.taobao.org/minizlib/download/minizlib-1.3.3.tgz?cache=0&other_urls=https%3A%2F%2Fregistry.npm.taobao.org%2Fminizlib%2Fdownload%2Fminizlib-1.3.3.tgz#2290de96818a34c29551c8a8d301216bd65a861d"
+  integrity sha1-IpDeloGKNMKVUcio0wEha9Zahh0=
+  dependencies:
+    minipass "^2.9.0"
+
+mississippi@^3.0.0:
+  version "3.0.0"
+  resolved "https://registry.yarnpkg.com/mississippi/-/mississippi-3.0.0.tgz#ea0a3291f97e0b5e8776b363d5f0a12d94c67022"
+  integrity sha512-x471SsVjUtBRtcvd4BzKE9kFC+/2TeWgKCgw0bZcw1b9l2X3QX5vCWgF+KaZaYm87Ss//rHnWryupDrgLvmSkA==
+  dependencies:
+    concat-stream "^1.5.0"
+    duplexify "^3.4.2"
+    end-of-stream "^1.1.0"
+    flush-write-stream "^1.0.0"
+    from2 "^2.1.0"
+    parallel-transform "^1.1.0"
+    pump "^3.0.0"
+    pumpify "^1.3.3"
+    stream-each "^1.1.0"
+    through2 "^2.0.0"
+
+mixin-deep@^1.2.0:
+  version "1.3.2"
+  resolved "https://registry.yarnpkg.com/mixin-deep/-/mixin-deep-1.3.2.tgz#1120b43dc359a785dce65b55b82e257ccf479566"
+  integrity sha512-WRoDn//mXBiJ1H40rqa3vH0toePwSsGb45iInWlTySa+Uu4k3tYUSxa2v1KqAiLtvlrSzaExqS1gtk96A9zvEA==
+  dependencies:
+    for-in "^1.0.2"
+    is-extendable "^1.0.1"
 
 mixin-object@^2.0.1:
   version "2.0.1"
   resolved "https://registry.yarnpkg.com/mixin-object/-/mixin-object-2.0.1.tgz#4fb949441dab182540f1fe035ba60e1947a5e57e"
+  integrity sha1-T7lJRB2rGCVA8f4DW6YOGUel5X4=
   dependencies:
     for-in "^0.1.3"
     is-extendable "^0.1.1"
 
-mkdirp@0.5.1, mkdirp@0.5.x, "mkdirp@>=0.5 0", mkdirp@^0.5.0, mkdirp@^0.5.1, mkdirp@~0.5.0, mkdirp@~0.5.1:
+mkdirp@0.5.1, mkdirp@0.5.x, mkdirp@^0.5.0, mkdirp@^0.5.1, mkdirp@~0.5.0, mkdirp@~0.5.1:
   version "0.5.1"
   resolved "https://registry.yarnpkg.com/mkdirp/-/mkdirp-0.5.1.tgz#30057438eac6cf7f8c4767f38648d6697d75c903"
+  integrity sha1-MAV0OOrGz3+MR2fzhkjWaX11yQM=
   dependencies:
     minimist "0.0.8"
 
-mocha@^3.1.1:
-  version "3.2.0"
-  resolved "https://registry.yarnpkg.com/mocha/-/mocha-3.2.0.tgz#7dc4f45e5088075171a68896814e6ae9eb7a85e3"
+"mkdirp@>=0.5 0":
+  version "0.5.5"
+  resolved "https://registry.npm.taobao.org/mkdirp/download/mkdirp-0.5.5.tgz?cache=0&sync_timestamp=1589682820707&other_urls=https%3A%2F%2Fregistry.npm.taobao.org%2Fmkdirp%2Fdownload%2Fmkdirp-0.5.5.tgz#d91cefd62d1436ca0f41620e251288d420099def"
+  integrity sha1-2Rzv1i0UNsoPQWIOJRKI1CAJne8=
+  dependencies:
+    minimist "^1.2.5"
+
+mocha@^6.0.2:
+  version "6.0.2"
+  resolved "https://registry.npmjs.org/mocha/-/mocha-6.0.2.tgz#cdc1a6fdf66472c079b5605bac59d29807702d2c"
+  integrity sha512-RtTJsmmToGyeTznSOMoM6TPEk1A84FQaHIciKrRqARZx+B5ccJ5tXlmJzEKGBxZdqk9UjpRsesZTUkZmR5YnuQ==
   dependencies:
-    browser-stdout "1.3.0"
-    commander "2.9.0"
-    debug "2.2.0"
-    diff "1.4.0"
+    ansi-colors "3.2.3"
+    browser-stdout "1.3.1"
+    debug "3.2.6"
+    diff "3.5.0"
     escape-string-regexp "1.0.5"
-    glob "7.0.5"
-    growl "1.9.2"
-    json3 "3.3.2"
-    lodash.create "3.1.1"
+    findup-sync "2.0.0"
+    glob "7.1.3"
+    growl "1.10.5"
+    he "1.2.0"
+    js-yaml "3.12.0"
+    log-symbols "2.2.0"
+    minimatch "3.0.4"
     mkdirp "0.5.1"
-    supports-color "3.1.2"
+    ms "2.1.1"
+    node-environment-flags "1.0.4"
+    object.assign "4.1.0"
+    strip-json-comments "2.0.1"
+    supports-color "6.0.0"
+    which "1.3.1"
+    wide-align "1.1.3"
+    yargs "12.0.5"
+    yargs-parser "11.1.1"
+    yargs-unparser "1.5.0"
+
+modify-values@^1.0.0:
+  version "1.0.1"
+  resolved "https://registry.npmjs.org/modify-values/-/modify-values-1.0.1.tgz#b3939fa605546474e3e3e3c63d64bd43b4ee6022"
+  integrity sha512-xV2bxeN6F7oYjZWTe/YPAy6MN2M+sL4u/Rlm2AHCIVGfo2p1yGmBHQ6vHehl4bRTZBdHu3TSkWdYgkwpYzAGSw==
 
-ms@0.7.1:
-  version "0.7.1"
-  resolved "https://registry.yarnpkg.com/ms/-/ms-0.7.1.tgz#9cd13c03adbff25b65effde7ce864ee952017098"
+move-concurrently@^1.0.1:
+  version "1.0.1"
+  resolved "https://registry.yarnpkg.com/move-concurrently/-/move-concurrently-1.0.1.tgz#be2c005fda32e0b29af1f05d7c4b33214c701f92"
+  integrity sha1-viwAX9oy4LKa8fBdfEszIUxwH5I=
+  dependencies:
+    aproba "^1.1.1"
+    copy-concurrently "^1.0.0"
+    fs-write-stream-atomic "^1.0.8"
+    mkdirp "^0.5.1"
+    rimraf "^2.5.4"
+    run-queue "^1.0.3"
 
 ms@2.0.0:
   version "2.0.0"
-  resolved "http://registry.npm.taobao.org/ms/download/ms-2.0.0.tgz#5608aeadfc00be6c2901df5f9861788de0d597c8"
+  resolved "https://registry.yarnpkg.com/ms/-/ms-2.0.0.tgz#5608aeadfc00be6c2901df5f9861788de0d597c8"
+  integrity sha1-VgiurfwAvmwpAd9fmGF4jeDVl8g=
+
+ms@2.1.1, ms@^2.1.1:
+  version "2.1.1"
+  resolved "https://registry.yarnpkg.com/ms/-/ms-2.1.1.tgz#30a5864eb3ebb0a66f2ebe6d727af06a09d86e0a"
+  integrity sha512-tgp+dl5cGk28utYktBsrFqA7HKgrhgPsg6Z/EfhWI4gl1Hwq8B/GmY/0oXZ6nF8hDVesS/FpnYaD/kOWhYQvyg==
+
+ms@^2.0.0:
+  version "2.1.2"
+  resolved "https://registry.npm.taobao.org/ms/download/ms-2.1.2.tgz?cache=0&other_urls=https%3A%2F%2Fregistry.npm.taobao.org%2Fms%2Fdownload%2Fms-2.1.2.tgz#d09d1f357b443f493382a8eb3ccd183872ae6009"
+  integrity sha1-0J0fNXtEP0kzgqjrPM0YOHKuYAk=
 
 multicast-dns-service-types@^1.1.0:
   version "1.1.0"
   resolved "https://registry.yarnpkg.com/multicast-dns-service-types/-/multicast-dns-service-types-1.1.0.tgz#899f11d9686e5e05cb91b35d5f0e63b773cfc901"
+  integrity sha1-iZ8R2WhuXgXLkbNdXw5jt3PPyQE=
 
 multicast-dns@^6.0.1:
-  version "6.1.1"
-  resolved "https://registry.yarnpkg.com/multicast-dns/-/multicast-dns-6.1.1.tgz#6e7de86a570872ab17058adea7160bbeca814dde"
+  version "6.2.3"
+  resolved "https://registry.yarnpkg.com/multicast-dns/-/multicast-dns-6.2.3.tgz#a0ec7bd9055c4282f790c3c82f4e28db3b31b229"
+  integrity sha512-ji6J5enbMyGRHIAkAOu3WdV8nggqviKCEKtXcOqfphZZtQrmHKycfynJ2V7eVPUA4NhJ6V7Wf4TmGbTwKE9B6g==
   dependencies:
-    dns-packet "^1.0.1"
-    thunky "^0.1.0"
+    dns-packet "^1.3.1"
+    thunky "^1.0.2"
 
-multipipe@^0.1.0, multipipe@^0.1.2:
+multipipe@^0.1.0:
   version "0.1.2"
   resolved "https://registry.yarnpkg.com/multipipe/-/multipipe-0.1.2.tgz#2a8f2ddf70eed564dff2d57f1e1a137d9f05078b"
+  integrity sha1-Ko8t33Du1WTf8tV/HhoTfZ8FB4s=
   dependencies:
     duplexer2 "0.0.2"
 
+mute-stdout@^1.0.0:
+  version "1.0.1"
+  resolved "https://registry.yarnpkg.com/mute-stdout/-/mute-stdout-1.0.1.tgz#acb0300eb4de23a7ddeec014e3e96044b3472331"
+  integrity sha512-kDcwXR4PS7caBpuRYYBUz9iVixUk3anO3f5OYFiIPwK/20vCzKCHyKoulbiDY1S53zD2bxUpxN/IJ+TnXjfvxg==
+
 mute-stream@0.0.7:
   version "0.0.7"
-  resolved "http://registry.npm.taobao.org/mute-stream/download/mute-stream-0.0.7.tgz#3075ce93bc21b8fab43e1bc4da7e8115ed1e7bab"
+  resolved "https://registry.yarnpkg.com/mute-stream/-/mute-stream-0.0.7.tgz#3075ce93bc21b8fab43e1bc4da7e8115ed1e7bab"
+  integrity sha1-MHXOk7whuPq0PhvE2n6BFe0ee6s=
 
-mz@^2.3.1:
-  version "2.6.0"
-  resolved "https://registry.yarnpkg.com/mz/-/mz-2.6.0.tgz#c8b8521d958df0a4f2768025db69c719ee4ef1ce"
-  dependencies:
-    any-promise "^1.0.0"
-    object-assign "^4.0.1"
-    thenify-all "^1.0.0"
-
-nan@^2.3.0, nan@^2.3.2:
-  version "2.4.0"
-  resolved "https://registry.yarnpkg.com/nan/-/nan-2.4.0.tgz#fb3c59d45fe4effe215f0b890f8adf6eb32d2232"
-
-natives@^1.1.0:
-  version "1.1.0"
-  resolved "https://registry.yarnpkg.com/natives/-/natives-1.1.0.tgz#e9ff841418a6b2ec7a495e939984f78f163e6e31"
+mute-stream@~0.0.4:
+  version "0.0.8"
+  resolved "https://registry.npm.taobao.org/mute-stream/download/mute-stream-0.0.8.tgz#1630c42b2251ff81e2a283de96a5497ea92e5e0d"
+  integrity sha1-FjDEKyJR/4HiooPelqVJfqkuXg0=
+
+nan@^2.13.2:
+  version "2.14.1"
+  resolved "https://registry.npm.taobao.org/nan/download/nan-2.14.1.tgz?cache=0&sync_timestamp=1589682780413&other_urls=https%3A%2F%2Fregistry.npm.taobao.org%2Fnan%2Fdownload%2Fnan-2.14.1.tgz#d7be34dfa3105b91494c3147089315eff8874b01"
+  integrity sha1-174036MQW5FJTDFHCJMV7/iHSwE=
+
+nan@^2.9.2:
+  version "2.12.1"
+  resolved "https://registry.yarnpkg.com/nan/-/nan-2.12.1.tgz#7b1aa193e9aa86057e3c7bbd0ac448e770925552"
+  integrity sha512-JY7V6lRkStKcKTvHO5NVSQRv+RV+FIL5pvDoLiAtSL9pKlC5x9PKQcZDsq7m4FO4d57mkhC6Z+QhAh3Jdk5JFw==
+
+nanomatch@^1.2.9:
+  version "1.2.13"
+  resolved "https://registry.yarnpkg.com/nanomatch/-/nanomatch-1.2.13.tgz#b87a8aa4fc0de8fe6be88895b38983ff265bd119"
+  integrity sha512-fpoe2T0RbHwBTBUOftAfBPaDEi06ufaUai0mE6Yn1kacc3SnTErfb/h+X94VXzI64rKFHYImXSvdwGGCmwOqCA==
+  dependencies:
+    arr-diff "^4.0.0"
+    array-unique "^0.3.2"
+    define-property "^2.0.2"
+    extend-shallow "^3.0.2"
+    fragment-cache "^0.2.1"
+    is-windows "^1.0.2"
+    kind-of "^6.0.2"
+    object.pick "^1.3.0"
+    regex-not "^1.0.0"
+    snapdragon "^0.8.1"
+    to-regex "^3.0.1"
 
 natural-compare@^1.4.0:
   version "1.4.0"
-  resolved "http://registry.npm.taobao.org/natural-compare/download/natural-compare-1.4.0.tgz#4abebfeed7541f2c27acfb29bdbbd15c8d5ba4f7"
+  resolved "https://registry.yarnpkg.com/natural-compare/-/natural-compare-1.4.0.tgz#4abebfeed7541f2c27acfb29bdbbd15c8d5ba4f7"
+  integrity sha1-Sr6/7tdUHywnrPspvbvRXI1bpPc=
 
-ncname@1.0.x:
-  version "1.0.0"
-  resolved "https://registry.yarnpkg.com/ncname/-/ncname-1.0.0.tgz#5b57ad18b1ca092864ef62b0b1ed8194f383b71c"
+needle@^2.2.1:
+  version "2.2.4"
+  resolved "https://registry.yarnpkg.com/needle/-/needle-2.2.4.tgz#51931bff82533b1928b7d1d69e01f1b00ffd2a4e"
+  integrity sha512-HyoqEb4wr/rsoaIDfTH2aVL9nWtQqba2/HvMv+++m8u0dz808MaagKILxtfeSN7QU7nvbQ79zk3vYOJp9zsNEA==
   dependencies:
-    xml-char-classes "^1.0.0"
-
-negotiator@0.4.9:
-  version "0.4.9"
-  resolved "https://registry.yarnpkg.com/negotiator/-/negotiator-0.4.9.tgz#92e46b6db53c7e421ed64a2bc94f08be7630df3f"
+    debug "^2.1.2"
+    iconv-lite "^0.4.4"
+    sax "^1.2.4"
 
 negotiator@0.6.1:
   version "0.6.1"
   resolved "https://registry.yarnpkg.com/negotiator/-/negotiator-0.6.1.tgz#2b327184e8992101177b28563fb5e7102acd0ca9"
+  integrity sha1-KzJxhOiZIQEXeyhWP7XnECrNDKk=
+
+neo-async@^2.5.0, neo-async@^2.6.0:
+  version "2.6.1"
+  resolved "https://registry.yarnpkg.com/neo-async/-/neo-async-2.6.1.tgz#ac27ada66167fa8849a6addd837f6b189ad2081c"
+  integrity sha512-iyam8fBuCUpWeKPGpaNMetEocMt364qkCsfL9JuhjXX6dRnguRVOfk2GZaDpPjcOKiiXCPINZC1GczQ7iTq3Zw==
 
-next-tick@1:
+next-tick@1, next-tick@^1.0.0:
   version "1.0.0"
-  resolved "http://registry.npm.taobao.org/next-tick/download/next-tick-1.0.0.tgz#ca86d1fe8828169b0120208e3dc8424b9db8342c"
+  resolved "https://registry.yarnpkg.com/next-tick/-/next-tick-1.0.0.tgz#ca86d1fe8828169b0120208e3dc8424b9db8342c"
+  integrity sha1-yobR/ogoFpsBICCOPchCS524NCw=
+
+nice-try@^1.0.4:
+  version "1.0.5"
+  resolved "https://registry.yarnpkg.com/nice-try/-/nice-try-1.0.5.tgz#a3378a7696ce7d223e88fc9b764bd7ef1089e366"
+  integrity sha512-1nh45deeb5olNY7eX82BkPO7SSxR5SSYJiPTrTdFUVYwAl8CKMA5N9PjTYkHiRjisVcxcQ1HXdLhx2qxxJzLNQ==
+
+nise@^1.4.10:
+  version "1.4.10"
+  resolved "https://registry.npmjs.org/nise/-/nise-1.4.10.tgz#ae46a09a26436fae91a38a60919356ae6db143b6"
+  integrity sha512-sa0RRbj53dovjc7wombHmVli9ZihXbXCQ2uH3TNm03DyvOSIQbxg+pbqDKrk2oxMK1rtLGVlKxcB9rrc6X5YjA==
+  dependencies:
+    "@sinonjs/formatio" "^3.1.0"
+    "@sinonjs/text-encoding" "^0.7.1"
+    just-extend "^4.0.2"
+    lolex "^2.3.2"
+    path-to-regexp "^1.7.0"
 
 no-case@^2.2.0:
-  version "2.3.0"
-  resolved "https://registry.yarnpkg.com/no-case/-/no-case-2.3.0.tgz#ca2825ccb76b18e6f79d573dcfbf1eace33dd164"
+  version "2.3.2"
+  resolved "https://registry.yarnpkg.com/no-case/-/no-case-2.3.2.tgz#60b813396be39b3f1288a4c1ed5d1e7d28b464ac"
+  integrity sha512-rmTZ9kz+f3rCvK2TD1Ue/oZlns7OGoIWP4fc3llxxRXlOkHKoWPPWJOfFYpITabSow43QJbRIoHQXtt10VldyQ==
   dependencies:
     lower-case "^1.1.1"
 
-node-dir@^0.1.10:
-  version "0.1.16"
-  resolved "https://registry.yarnpkg.com/node-dir/-/node-dir-0.1.16.tgz#d2ef583aa50b90d93db8cdd26fcea58353957fe4"
+node-environment-flags@1.0.4:
+  version "1.0.4"
+  resolved "https://registry.npmjs.org/node-environment-flags/-/node-environment-flags-1.0.4.tgz#0b784a6551426bfc16d3b2208424dcbc2b2ff038"
+  integrity sha512-M9rwCnWVLW7PX+NUWe3ejEdiLYinRpsEre9hMkU/6NS4h+EEulYaDH1gCEZ2gyXsmw+RXYDaV2JkkTNcsPDJ0Q==
   dependencies:
-    minimatch "^3.0.2"
+    object.getownpropertydescriptors "^2.0.3"
+
+node-fetch-npm@^2.0.2:
+  version "2.0.2"
+  resolved "https://registry.npm.taobao.org/node-fetch-npm/download/node-fetch-npm-2.0.2.tgz#7258c9046182dca345b4208eda918daf33697ff7"
+  integrity sha1-cljJBGGC3KNFtCCO2pGNrzNpf/c=
+  dependencies:
+    encoding "^0.1.11"
+    json-parse-better-errors "^1.0.0"
+    safe-buffer "^5.1.1"
 
-node-forge@0.6.33:
-  version "0.6.33"
-  resolved "https://registry.yarnpkg.com/node-forge/-/node-forge-0.6.33.tgz#463811879f573d45155ad6a9f43dc296e8e85ebc"
+node-fetch@^1.7.3:
+  version "1.7.3"
+  resolved "https://registry.npm.taobao.org/node-fetch/download/node-fetch-1.7.3.tgz#980f6f72d85211a5347c6b2bc18c5b84c3eb47ef"
+  integrity sha1-mA9vcthSEaU0fGsrwYxbhMPrR+8=
+  dependencies:
+    encoding "^0.1.11"
+    is-stream "^1.0.1"
+
+node-forge@0.7.5:
+  version "0.7.5"
+  resolved "https://registry.yarnpkg.com/node-forge/-/node-forge-0.7.5.tgz#6c152c345ce11c52f465c2abd957e8639cd674df"
+  integrity sha512-MmbQJ2MTESTjt3Gi/3yG1wGpIMhUfcIypUCGtTizFR9IiccFwxSpfp0vtIZlkFclEqERemxfnSdZEMR9VqqEFQ==
 
-node-gyp@^3.3.1:
-  version "3.6.2"
-  resolved "https://registry.yarnpkg.com/node-gyp/-/node-gyp-3.6.2.tgz#9bfbe54562286284838e750eac05295853fa1c60"
+node-gyp@^3.8.0:
+  version "3.8.0"
+  resolved "https://registry.npm.taobao.org/node-gyp/download/node-gyp-3.8.0.tgz?cache=0&sync_timestamp=1597202622998&other_urls=https%3A%2F%2Fregistry.npm.taobao.org%2Fnode-gyp%2Fdownload%2Fnode-gyp-3.8.0.tgz#540304261c330e80d0d5edce253a68cb3964218c"
+  integrity sha1-VAMEJhwzDoDQ1e3OJTpoyzlkIYw=
   dependencies:
     fstream "^1.0.0"
     glob "^7.0.3"
     graceful-fs "^4.1.2"
-    minimatch "^3.0.2"
     mkdirp "^0.5.0"
     nopt "2 || 3"
     npmlog "0 || 1 || 2 || 3 || 4"
     osenv "0"
-    request "2"
+    request "^2.87.0"
     rimraf "2"
     semver "~5.3.0"
     tar "^2.0.0"
     which "1"
 
+node-gyp@^5.0.2, node-gyp@^5.0.5:
+  version "5.0.6"
+  resolved "https://registry.npm.taobao.org/node-gyp/download/node-gyp-5.0.6.tgz#94d79206de985eb93a57ee1ee82d9df292edd7b5"
+  integrity sha1-lNeSBt6YXrk6V+4e6C2d8pLt17U=
+  dependencies:
+    env-paths "^2.2.0"
+    glob "^7.1.4"
+    graceful-fs "^4.2.2"
+    mkdirp "^0.5.1"
+    nopt "^4.0.1"
+    npmlog "^4.1.2"
+    request "^2.88.0"
+    rimraf "^2.6.3"
+    semver "^5.7.1"
+    tar "^4.4.12"
+    which "^1.3.1"
+
 node-libs-browser@^2.0.0:
-  version "2.0.0"
-  resolved "https://registry.yarnpkg.com/node-libs-browser/-/node-libs-browser-2.0.0.tgz#a3a59ec97024985b46e958379646f96c4b616646"
+  version "2.2.0"
+  resolved "https://registry.yarnpkg.com/node-libs-browser/-/node-libs-browser-2.2.0.tgz#c72f60d9d46de08a940dedbb25f3ffa2f9bbaa77"
+  integrity sha512-5MQunG/oyOaBdttrL40dA7bUfPORLRWMUJLQtMg7nluxUvk5XwnLdL9twQHFAjRx/y7mIMkLKT9++qPbbk6BZA==
   dependencies:
     assert "^1.1.1"
-    browserify-zlib "^0.1.4"
+    browserify-zlib "^0.2.0"
     buffer "^4.3.0"
     console-browserify "^1.1.0"
     constants-browserify "^1.0.0"
     crypto-browserify "^3.11.0"
     domain-browser "^1.1.1"
-    events "^1.0.0"
-    https-browserify "0.0.1"
-    os-browserify "^0.2.0"
+    events "^3.0.0"
+    https-browserify "^1.0.0"
+    os-browserify "^0.3.0"
     path-browserify "0.0.0"
-    process "^0.11.0"
+    process "^0.11.10"
     punycode "^1.2.4"
     querystring-es3 "^0.2.0"
-    readable-stream "^2.0.5"
+    readable-stream "^2.3.3"
     stream-browserify "^2.0.1"
-    stream-http "^2.3.1"
-    string_decoder "^0.10.25"
-    timers-browserify "^2.0.2"
+    stream-http "^2.7.2"
+    string_decoder "^1.0.0"
+    timers-browserify "^2.0.4"
     tty-browserify "0.0.0"
     url "^0.11.0"
-    util "^0.10.3"
+    util "^0.11.0"
     vm-browserify "0.0.4"
 
-node-pre-gyp@^0.6.29:
-  version "0.6.32"
-  resolved "https://registry.yarnpkg.com/node-pre-gyp/-/node-pre-gyp-0.6.32.tgz#fc452b376e7319b3d255f5f34853ef6fd8fe1fd5"
+node-pre-gyp@^0.10.0:
+  version "0.10.3"
+  resolved "https://registry.yarnpkg.com/node-pre-gyp/-/node-pre-gyp-0.10.3.tgz#3070040716afdc778747b61b6887bf78880b80fc"
+  integrity sha512-d1xFs+C/IPS8Id0qPTZ4bUT8wWryfR/OzzAFxweG+uLN85oPzyo2Iw6bVlLQ/JOdgNonXLCoRyqDzDWq4iw72A==
   dependencies:
-    mkdirp "~0.5.1"
-    nopt "~3.0.6"
-    npmlog "^4.0.1"
-    rc "~1.1.6"
-    request "^2.79.0"
-    rimraf "~2.5.4"
-    semver "~5.3.0"
-    tar "~2.2.1"
-    tar-pack "~3.3.0"
+    detect-libc "^1.0.2"
+    mkdirp "^0.5.1"
+    needle "^2.2.1"
+    nopt "^4.0.1"
+    npm-packlist "^1.1.6"
+    npmlog "^4.0.2"
+    rc "^1.2.7"
+    rimraf "^2.6.1"
+    semver "^5.3.0"
+    tar "^4"
 
-node-sass@^4.2.0, node-sass@^4.5.3:
-  version "4.5.3"
-  resolved "https://registry.yarnpkg.com/node-sass/-/node-sass-4.5.3.tgz#d09c9d1179641239d1b97ffc6231fdcec53e1568"
+node-releases@^1.1.11:
+  version "1.1.11"
+  resolved "https://registry.yarnpkg.com/node-releases/-/node-releases-1.1.11.tgz#9a0841a4b0d92b7d5141ed179e764f42ad22724a"
+  integrity sha512-8v1j5KfP+s5WOTa1spNUAOfreajQPN12JXbRR0oDE+YrJBQCXBnNqUDj27EKpPLOoSiU3tKi3xGPB+JaOdUEQQ==
+  dependencies:
+    semver "^5.3.0"
+
+node-releases@^1.1.3:
+  version "1.1.8"
+  resolved "https://registry.yarnpkg.com/node-releases/-/node-releases-1.1.8.tgz#32a63fff63c5e51b7e0f540ac95947d220fc6862"
+  integrity sha512-gQm+K9mGCiT/NXHy+V/ZZS1N/LOaGGqRAAJJs3X9Ah1g+CIbRcBgNyoNYQ+SEtcyAtB9KqDruu+fF7nWjsqRaA==
+  dependencies:
+    semver "^5.3.0"
+
+node-sass@^4.8.3:
+  version "4.14.1"
+  resolved "https://registry.npm.taobao.org/node-sass/download/node-sass-4.14.1.tgz#99c87ec2efb7047ed638fb4c9db7f3a42e2217b5"
+  integrity sha1-mch+wu+3BH7WOPtMnbfzpC4iF7U=
   dependencies:
     async-foreach "^0.1.3"
     chalk "^1.1.1"
@@ -5174,200 +8287,542 @@ node-sass@^4.2.0, node-sass@^4.5.3:
     get-stdin "^4.0.1"
     glob "^7.0.3"
     in-publish "^2.0.0"
-    lodash.assign "^4.2.0"
-    lodash.clonedeep "^4.3.2"
-    lodash.mergewith "^4.6.0"
+    lodash "^4.17.15"
     meow "^3.7.0"
     mkdirp "^0.5.1"
-    nan "^2.3.2"
-    node-gyp "^3.3.1"
+    nan "^2.13.2"
+    node-gyp "^3.8.0"
     npmlog "^4.0.0"
-    request "^2.79.0"
-    sass-graph "^2.1.1"
+    request "^2.88.0"
+    sass-graph "2.2.5"
     stdout-stream "^1.4.0"
+    "true-case-path" "^1.0.2"
 
-node-uuid@~1.4.7:
-  version "1.4.7"
-  resolved "https://registry.yarnpkg.com/node-uuid/-/node-uuid-1.4.7.tgz#6da5a17668c4b3dd59623bda11cf7fa4c1f60a6f"
-
-nomnomnomnom@^2.0.0:
-  version "2.0.1"
-  resolved "https://registry.yarnpkg.com/nomnomnomnom/-/nomnomnomnom-2.0.1.tgz#b2239f031c8d04da67e32836e1e3199e12f7a8e2"
-  dependencies:
-    chalk "~0.4.0"
-    underscore "~1.6.0"
-
-"nopt@2 || 3", nopt@3.x, nopt@~3.0.6:
+"nopt@2 || 3", nopt@3.x:
   version "3.0.6"
   resolved "https://registry.yarnpkg.com/nopt/-/nopt-3.0.6.tgz#c6465dbf08abcd4db359317f79ac68a646b28ff9"
+  integrity sha1-xkZdvwirzU2zWTF/eaxopkayj/k=
+  dependencies:
+    abbrev "1"
+
+nopt@^4.0.1, nopt@~4.0.1:
+  version "4.0.1"
+  resolved "https://registry.yarnpkg.com/nopt/-/nopt-4.0.1.tgz#d0d4685afd5415193c8c7505602d0d17cd64474d"
+  integrity sha1-0NRoWv1UFRk8jHUFYC0NF81kR00=
   dependencies:
     abbrev "1"
+    osenv "^0.1.4"
+
+normalize-package-data@^2.0.0, normalize-package-data@^2.3.0, normalize-package-data@^2.3.5, normalize-package-data@^2.4.0, normalize-package-data@^2.5.0:
+  version "2.5.0"
+  resolved "https://registry.npmjs.org/normalize-package-data/-/normalize-package-data-2.5.0.tgz#e66db1838b200c1dfc233225d12cb36520e234a8"
+  integrity sha512-/5CMN3T0R4XTj4DcGaexo+roZSdSFW/0AOOTROrjxzCG1wrWXEsGbRKevjlIL+ZDE4sZlJr5ED4YW0yqmkK+eA==
+  dependencies:
+    hosted-git-info "^2.1.4"
+    resolve "^1.10.0"
+    semver "2 || 3 || 4 || 5"
+    validate-npm-package-license "^3.0.1"
 
 normalize-package-data@^2.3.2, normalize-package-data@^2.3.4:
-  version "2.3.5"
-  resolved "https://registry.yarnpkg.com/normalize-package-data/-/normalize-package-data-2.3.5.tgz#8d924f142960e1777e7ffe170543631cc7cb02df"
+  version "2.4.0"
+  resolved "https://registry.yarnpkg.com/normalize-package-data/-/normalize-package-data-2.4.0.tgz#12f95a307d58352075a04907b84ac8be98ac012f"
+  integrity sha512-9jjUFbTPfEy3R/ad/2oNbKtW9Hgovl5O1FvFWKkKblNXoN/Oou6+9+KKohPK13Yc3/TyunyWhJp6gvRNR/PPAw==
   dependencies:
     hosted-git-info "^2.1.4"
     is-builtin-module "^1.0.0"
     semver "2 || 3 || 4 || 5"
     validate-npm-package-license "^3.0.1"
 
-normalize-path@^2.0.1:
-  version "2.0.1"
-  resolved "https://registry.yarnpkg.com/normalize-path/-/normalize-path-2.0.1.tgz#47886ac1662760d4261b7d979d241709d3ce3f7a"
+normalize-path@^2.0.0, normalize-path@^2.0.1, normalize-path@^2.1.1:
+  version "2.1.1"
+  resolved "https://registry.yarnpkg.com/normalize-path/-/normalize-path-2.1.1.tgz#1ab28b556e198363a8c1a6f7e6fa20137fe6aed9"
+  integrity sha1-GrKLVW4Zg2Oowab35vogE3/mrtk=
+  dependencies:
+    remove-trailing-separator "^1.0.1"
+
+normalize-path@^3.0.0:
+  version "3.0.0"
+  resolved "https://registry.yarnpkg.com/normalize-path/-/normalize-path-3.0.0.tgz#0dcd69ff23a1c9b11fd0978316644a0388216a65"
+  integrity sha512-6eZs5Ls3WtCisHWp9S2GUy8dqkpGi4BVSz3GaqiE6ezub0512ESztXUwUB6C6IKbQkY2Pnb/mD4WYojCRwcwLA==
 
 normalize-range@^0.1.2:
   version "0.1.2"
   resolved "https://registry.yarnpkg.com/normalize-range/-/normalize-range-0.1.2.tgz#2d10c06bdfd312ea9777695a4d28439456b75942"
+  integrity sha1-LRDAa9/TEuqXd2laTShDlFa3WUI=
 
-normalize-url@^1.4.0:
-  version "1.8.0"
-  resolved "https://registry.yarnpkg.com/normalize-url/-/normalize-url-1.8.0.tgz#a9550b079aa3523c85d78df24eef1959fce359ab"
-  dependencies:
-    object-assign "^4.0.1"
-    prepend-http "^1.0.0"
-    query-string "^4.1.0"
-    sort-keys "^1.0.0"
+normalize-url@^3.0.0:
+  version "3.3.0"
+  resolved "https://registry.yarnpkg.com/normalize-url/-/normalize-url-3.3.0.tgz#b2e1c4dc4f7c6d57743df733a4f5978d18650559"
+  integrity sha512-U+JJi7duF1o+u2pynbp2zXDW2/PADgC30f0GsHZtRh+HOcXHnw137TrNlyxxRvWW5fjKd3bcLHPxofWuCjaeZg==
 
 normalize-wheel@^1.0.1:
   version "1.0.1"
   resolved "https://registry.yarnpkg.com/normalize-wheel/-/normalize-wheel-1.0.1.tgz#aec886affdb045070d856447df62ecf86146ec45"
+  integrity sha1-rsiGr/2wRQcNhWRH32Ls+GFG7EU=
+
+now-and-later@^2.0.0:
+  version "2.0.0"
+  resolved "https://registry.yarnpkg.com/now-and-later/-/now-and-later-2.0.0.tgz#bc61cbb456d79cb32207ce47ca05136ff2e7d6ee"
+  integrity sha1-vGHLtFbXnLMiB85HygUTb/Ln1u4=
+  dependencies:
+    once "^1.3.2"
+
+npm-audit-report@^1.3.2:
+  version "1.3.2"
+  resolved "https://registry.npm.taobao.org/npm-audit-report/download/npm-audit-report-1.3.2.tgz#303bc78cd9e4c226415076a4f7e528c89fc77018"
+  integrity sha1-MDvHjNnkwiZBUHak9+UoyJ/HcBg=
+  dependencies:
+    cli-table3 "^0.5.0"
+    console-control-strings "^1.1.0"
+
+npm-bundled@^1.0.1:
+  version "1.0.5"
+  resolved "https://registry.yarnpkg.com/npm-bundled/-/npm-bundled-1.0.5.tgz#3c1732b7ba936b3a10325aef616467c0ccbcc979"
+  integrity sha512-m/e6jgWu8/v5niCUKQi9qQl8QdeEduFA96xHDDzFGqly0OOjI7c+60KM/2sppfnUU9JJagf+zs+yGhqSOFj71g==
+
+npm-cache-filename@~1.0.2:
+  version "1.0.2"
+  resolved "https://registry.npm.taobao.org/npm-cache-filename/download/npm-cache-filename-1.0.2.tgz#ded306c5b0bfc870a9e9faf823bc5f283e05ae11"
+  integrity sha1-3tMGxbC/yHCp6fr4I7xfKD4FrhE=
+
+npm-install-checks@^3.0.2:
+  version "3.0.2"
+  resolved "https://registry.npm.taobao.org/npm-install-checks/download/npm-install-checks-3.0.2.tgz#ab2e32ad27baa46720706908e5b14c1852de44d9"
+  integrity sha1-qy4yrSe6pGcgcGkI5bFMGFLeRNk=
+  dependencies:
+    semver "^2.3.0 || 3.x || 4 || 5"
+
+npm-lifecycle@^3.0.0, npm-lifecycle@^3.1.4:
+  version "3.1.4"
+  resolved "https://registry.npm.taobao.org/npm-lifecycle/download/npm-lifecycle-3.1.4.tgz#de6975c7d8df65f5150db110b57cce498b0b604c"
+  integrity sha1-3ml1x9jfZfUVDbEQtXzOSYsLYEw=
+  dependencies:
+    byline "^5.0.0"
+    graceful-fs "^4.1.15"
+    node-gyp "^5.0.2"
+    resolve-from "^4.0.0"
+    slide "^1.1.6"
+    uid-number "0.0.6"
+    umask "^1.1.0"
+    which "^1.3.1"
+
+npm-logical-tree@^1.2.1:
+  version "1.2.1"
+  resolved "https://registry.npm.taobao.org/npm-logical-tree/download/npm-logical-tree-1.2.1.tgz#44610141ca24664cad35d1e607176193fd8f5b88"
+  integrity sha1-RGEBQcokZkytNdHmBxdhk/2PW4g=
+
+npm-normalize-package-bin@^1.0.0:
+  version "1.0.1"
+  resolved "https://registry.npm.taobao.org/npm-normalize-package-bin/download/npm-normalize-package-bin-1.0.1.tgz?cache=0&sync_timestamp=1575936190670&other_urls=https%3A%2F%2Fregistry.npm.taobao.org%2Fnpm-normalize-package-bin%2Fdownload%2Fnpm-normalize-package-bin-1.0.1.tgz#6e79a41f23fd235c0623218228da7d9c23b8f6e2"
+  integrity sha1-bnmkHyP9I1wGIyGCKNp9nCO49uI=
+
+"npm-package-arg@^4.0.0 || ^5.0.0 || ^6.0.0", npm-package-arg@^6.0.0, npm-package-arg@^6.1.0, npm-package-arg@^6.1.1:
+  version "6.1.1"
+  resolved "https://registry.npm.taobao.org/npm-package-arg/download/npm-package-arg-6.1.1.tgz#02168cb0a49a2b75bf988a28698de7b529df5cb7"
+  integrity sha1-AhaMsKSaK3W/mIooaY3ntSnfXLc=
+  dependencies:
+    hosted-git-info "^2.7.1"
+    osenv "^0.1.5"
+    semver "^5.6.0"
+    validate-npm-package-name "^3.0.0"
+
+npm-packlist@^1.1.12, npm-packlist@^1.4.7:
+  version "1.4.7"
+  resolved "https://registry.npm.taobao.org/npm-packlist/download/npm-packlist-1.4.7.tgz#9e954365a06b80b18111ea900945af4f88ed4848"
+  integrity sha1-npVDZaBrgLGBEeqQCUWvT4jtSEg=
+  dependencies:
+    ignore-walk "^3.0.1"
+    npm-bundled "^1.0.1"
+
+npm-packlist@^1.1.6:
+  version "1.2.0"
+  resolved "https://registry.yarnpkg.com/npm-packlist/-/npm-packlist-1.2.0.tgz#55a60e793e272f00862c7089274439a4cc31fc7f"
+  integrity sha512-7Mni4Z8Xkx0/oegoqlcao/JpPCPEMtUvsmB0q7mgvlMinykJLSRTYuFqoQLYgGY8biuxIeiHO+QNJKbCfljewQ==
+  dependencies:
+    ignore-walk "^3.0.1"
+    npm-bundled "^1.0.1"
+
+npm-pick-manifest@^3.0.0, npm-pick-manifest@^3.0.2:
+  version "3.0.2"
+  resolved "https://registry.npm.taobao.org/npm-pick-manifest/download/npm-pick-manifest-3.0.2.tgz#f4d9e5fd4be2153e5f4e5f9b7be8dc419a99abb7"
+  integrity sha1-9Nnl/UviFT5fTl+be+jcQZqZq7c=
+  dependencies:
+    figgy-pudding "^3.5.1"
+    npm-package-arg "^6.0.0"
+    semver "^5.4.1"
+
+npm-profile@^4.0.2:
+  version "4.0.2"
+  resolved "https://registry.npm.taobao.org/npm-profile/download/npm-profile-4.0.2.tgz#8272a71c19634d0dce9c35a5daf8ee589cbb0f52"
+  integrity sha1-gnKnHBljTQ3OnDWl2vjuWJy7D1I=
+  dependencies:
+    aproba "^1.1.2 || 2"
+    figgy-pudding "^3.4.1"
+    npm-registry-fetch "^4.0.0"
+
+npm-registry-fetch@^4.0.0, npm-registry-fetch@^4.0.2:
+  version "4.0.2"
+  resolved "https://registry.npm.taobao.org/npm-registry-fetch/download/npm-registry-fetch-4.0.2.tgz?cache=0&other_urls=https%3A%2F%2Fregistry.npm.taobao.org%2Fnpm-registry-fetch%2Fdownload%2Fnpm-registry-fetch-4.0.2.tgz#2b1434f93ccbe6b6385f8e45f45db93e16921d7a"
+  integrity sha1-KxQ0+TzL5rY4X45F9F25PhaSHXo=
+  dependencies:
+    JSONStream "^1.3.4"
+    bluebird "^3.5.1"
+    figgy-pudding "^3.4.1"
+    lru-cache "^5.1.1"
+    make-fetch-happen "^5.0.0"
+    npm-package-arg "^6.1.0"
+    safe-buffer "^5.2.0"
 
 npm-run-path@^2.0.0:
   version "2.0.2"
   resolved "https://registry.yarnpkg.com/npm-run-path/-/npm-run-path-2.0.2.tgz#35a9232dfa35d7067b4cb2ddf2357b1871536c5f"
+  integrity sha1-NakjLfo11wZ7TLLd8jV7GHFTbF8=
   dependencies:
     path-key "^2.0.0"
 
-"npmlog@0 || 1 || 2 || 3 || 4", npmlog@^4.0.0, npmlog@^4.0.1:
-  version "4.0.2"
-  resolved "https://registry.yarnpkg.com/npmlog/-/npmlog-4.0.2.tgz#d03950e0e78ce1527ba26d2a7592e9348ac3e75f"
+npm-user-validate@~1.0.0:
+  version "1.0.0"
+  resolved "https://registry.npm.taobao.org/npm-user-validate/download/npm-user-validate-1.0.0.tgz#8ceca0f5cea04d4e93519ef72d0557a75122e951"
+  integrity sha1-jOyg9c6gTU6TUZ73LQVXp1Ei6VE=
+
+npm@^6.4.1:
+  version "6.13.4"
+  resolved "https://registry.npm.taobao.org/npm/download/npm-6.13.4.tgz?cache=0&sync_timestamp=1576091474746&other_urls=https%3A%2F%2Fregistry.npm.taobao.org%2Fnpm%2Fdownload%2Fnpm-6.13.4.tgz#1e95b0f311999cf682384c38865dfeb3127203bb"
+  integrity sha1-HpWw8xGZnPaCOEw4hl3+sxJyA7s=
+  dependencies:
+    JSONStream "^1.3.5"
+    abbrev "~1.1.1"
+    ansicolors "~0.3.2"
+    ansistyles "~0.1.3"
+    aproba "^2.0.0"
+    archy "~1.0.0"
+    bin-links "^1.1.6"
+    bluebird "^3.5.5"
+    byte-size "^5.0.1"
+    cacache "^12.0.3"
+    call-limit "^1.1.1"
+    chownr "^1.1.3"
+    ci-info "^2.0.0"
+    cli-columns "^3.1.2"
+    cli-table3 "^0.5.1"
+    cmd-shim "^3.0.3"
+    columnify "~1.5.4"
+    config-chain "^1.1.12"
+    detect-indent "~5.0.0"
+    detect-newline "^2.1.0"
+    dezalgo "~1.0.3"
+    editor "~1.0.0"
+    figgy-pudding "^3.5.1"
+    find-npm-prefix "^1.0.2"
+    fs-vacuum "~1.2.10"
+    fs-write-stream-atomic "~1.0.10"
+    gentle-fs "^2.3.0"
+    glob "^7.1.4"
+    graceful-fs "^4.2.3"
+    has-unicode "~2.0.1"
+    hosted-git-info "^2.8.5"
+    iferr "^1.0.2"
+    infer-owner "^1.0.4"
+    inflight "~1.0.6"
+    inherits "^2.0.4"
+    ini "^1.3.5"
+    init-package-json "^1.10.3"
+    is-cidr "^3.0.0"
+    json-parse-better-errors "^1.0.2"
+    lazy-property "~1.0.0"
+    libcipm "^4.0.7"
+    libnpm "^3.0.1"
+    libnpmaccess "^3.0.2"
+    libnpmhook "^5.0.3"
+    libnpmorg "^1.0.1"
+    libnpmsearch "^2.0.2"
+    libnpmteam "^1.0.2"
+    libnpx "^10.2.0"
+    lock-verify "^2.1.0"
+    lockfile "^1.0.4"
+    lodash._baseuniq "~4.6.0"
+    lodash.clonedeep "~4.5.0"
+    lodash.union "~4.6.0"
+    lodash.uniq "~4.5.0"
+    lodash.without "~4.4.0"
+    lru-cache "^5.1.1"
+    meant "~1.0.1"
+    mississippi "^3.0.0"
+    mkdirp "~0.5.1"
+    move-concurrently "^1.0.1"
+    node-gyp "^5.0.5"
+    nopt "~4.0.1"
+    normalize-package-data "^2.5.0"
+    npm-audit-report "^1.3.2"
+    npm-cache-filename "~1.0.2"
+    npm-install-checks "^3.0.2"
+    npm-lifecycle "^3.1.4"
+    npm-package-arg "^6.1.1"
+    npm-packlist "^1.4.7"
+    npm-pick-manifest "^3.0.2"
+    npm-profile "^4.0.2"
+    npm-registry-fetch "^4.0.2"
+    npm-user-validate "~1.0.0"
+    npmlog "~4.1.2"
+    once "~1.4.0"
+    opener "^1.5.1"
+    osenv "^0.1.5"
+    pacote "^9.5.11"
+    path-is-inside "~1.0.2"
+    promise-inflight "~1.0.1"
+    qrcode-terminal "^0.12.0"
+    query-string "^6.8.2"
+    qw "~1.0.1"
+    read "~1.0.7"
+    read-cmd-shim "^1.0.5"
+    read-installed "~4.0.3"
+    read-package-json "^2.1.1"
+    read-package-tree "^5.3.1"
+    readable-stream "^3.4.0"
+    readdir-scoped-modules "^1.1.0"
+    request "^2.88.0"
+    retry "^0.12.0"
+    rimraf "^2.6.3"
+    safe-buffer "^5.1.2"
+    semver "^5.7.1"
+    sha "^3.0.0"
+    slide "~1.1.6"
+    sorted-object "~2.0.1"
+    sorted-union-stream "~2.1.3"
+    ssri "^6.0.1"
+    stringify-package "^1.0.1"
+    tar "^4.4.13"
+    text-table "~0.2.0"
+    tiny-relative-date "^1.3.0"
+    uid-number "0.0.6"
+    umask "~1.1.0"
+    unique-filename "^1.1.1"
+    unpipe "~1.0.0"
+    update-notifier "^2.5.0"
+    uuid "^3.3.3"
+    validate-npm-package-license "^3.0.4"
+    validate-npm-package-name "~3.0.0"
+    which "^1.3.1"
+    worker-farm "^1.7.0"
+    write-file-atomic "^2.4.3"
+
+"npmlog@0 || 1 || 2 || 3 || 4", npmlog@^4.0.0, npmlog@^4.0.2, npmlog@^4.1.2, npmlog@~4.1.2:
+  version "4.1.2"
+  resolved "https://registry.yarnpkg.com/npmlog/-/npmlog-4.1.2.tgz#08a7f2a8bf734604779a9efa4ad5cc717abb954b"
+  integrity sha512-2uUqazuKlTaSI/dC8AzicUck7+IrEaOnN/e0jd3Xtt1KcGpwx30v50mL7oPyr/h9bL3E4aZccVwpwP+5W9Vjkg==
   dependencies:
     are-we-there-yet "~1.1.2"
     console-control-strings "~1.1.0"
-    gauge "~2.7.1"
+    gauge "~2.7.3"
     set-blocking "~2.0.0"
 
-nth-check@~1.0.1:
-  version "1.0.1"
-  resolved "https://registry.yarnpkg.com/nth-check/-/nth-check-1.0.1.tgz#9929acdf628fc2c41098deab82ac580cf149aae4"
+nth-check@^1.0.2, nth-check@~1.0.1:
+  version "1.0.2"
+  resolved "https://registry.yarnpkg.com/nth-check/-/nth-check-1.0.2.tgz#b2bd295c37e3dd58a3bf0700376663ba4d9cf05c"
+  integrity sha512-WeBOdju8SnzPN5vTUJYxYUxLeXpCaVP5i5e0LF8fg7WORF2Wd7wFX/pk0tYZk7s8T+J7VLy0Da6J1+wCT0AtHg==
   dependencies:
     boolbase "~1.0.0"
 
 null-check@^1.0.0:
   version "1.0.0"
   resolved "https://registry.yarnpkg.com/null-check/-/null-check-1.0.0.tgz#977dffd7176012b9ec30d2a39db5cf72a0439edd"
+  integrity sha1-l33/1xdgErnsMNKjnbXPcqBDnt0=
 
 num2fraction@^1.2.2:
   version "1.2.2"
   resolved "https://registry.yarnpkg.com/num2fraction/-/num2fraction-1.2.2.tgz#6f682b6a027a4e9ddfa4564cd2589d1d4e669ede"
+  integrity sha1-b2gragJ6Tp3fpFZM0lidHU5mnt4=
 
 number-is-nan@^1.0.0:
   version "1.0.1"
   resolved "https://registry.yarnpkg.com/number-is-nan/-/number-is-nan-1.0.1.tgz#097b602b53422a522c1afb8790318336941a011d"
+  integrity sha1-CXtgK1NCKlIsGvuHkDGDNpQaAR0=
 
-"nwmatcher@>= 1.3.7 < 2.0.0":
-  version "1.3.9"
-  resolved "https://registry.yarnpkg.com/nwmatcher/-/nwmatcher-1.3.9.tgz#8bab486ff7fa3dfd086656bbe8b17116d3692d2a"
-
-oauth-sign@~0.8.1:
-  version "0.8.2"
-  resolved "https://registry.yarnpkg.com/oauth-sign/-/oauth-sign-0.8.2.tgz#46a6ab7f0aead8deae9ec0565780b7d4efeb9d43"
+oauth-sign@~0.9.0:
+  version "0.9.0"
+  resolved "https://registry.yarnpkg.com/oauth-sign/-/oauth-sign-0.9.0.tgz#47a7b016baa68b5fa0ecf3dee08a85c679ac6455"
+  integrity sha512-fexhUFFPTGV8ybAtSIGbV6gOkSv8UtRbDBnAyLQw4QPKkgNlsH2ByPGtMUqdWkos6YCRmAqViwgZrJc/mRDzZQ==
 
-object-assign@^3.0.0:
-  version "3.0.0"
-  resolved "https://registry.yarnpkg.com/object-assign/-/object-assign-3.0.0.tgz#9bedd5ca0897949bca47e7ff408062d549f587f2"
+object-assign-deep@^0.3.1:
+  version "0.3.1"
+  resolved "https://registry.npm.taobao.org/object-assign-deep/download/object-assign-deep-0.3.1.tgz#b57b7572d9a328d6448a3f4b6c0fffc8b10c61a2"
+  integrity sha1-tXt1ctmjKNZEij9LbA//yLEMYaI=
 
-object-assign@^4.0.1:
+object-assign@^4.0.1, object-assign@^4.1.0:
   version "4.1.1"
-  resolved "http://registry.npm.taobao.org/object-assign/download/object-assign-4.1.1.tgz#2109adc7965887cfc05cbbd442cac8bfbb360863"
-
-object-assign@^4.1.0:
-  version "4.1.0"
-  resolved "https://registry.yarnpkg.com/object-assign/-/object-assign-4.1.0.tgz#7a3b3d0e98063d43f4c03f2e8ae6cd51a86883a0"
+  resolved "https://registry.yarnpkg.com/object-assign/-/object-assign-4.1.1.tgz#2109adc7965887cfc05cbbd442cac8bfbb360863"
+  integrity sha1-IQmtx5ZYh8/AXLvUQsrIv7s2CGM=
 
 object-component@0.0.3:
   version "0.0.3"
   resolved "https://registry.yarnpkg.com/object-component/-/object-component-0.0.3.tgz#f0c69aa50efc95b866c186f400a33769cb2f1291"
+  integrity sha1-8MaapQ78lbhmwYb0AKM3acsvEpE=
+
+object-copy@^0.1.0:
+  version "0.1.0"
+  resolved "https://registry.yarnpkg.com/object-copy/-/object-copy-0.1.0.tgz#7e7d858b781bd7c991a41ba975ed3812754e998c"
+  integrity sha1-fn2Fi3gb18mRpBupde04EnVOmYw=
+  dependencies:
+    copy-descriptor "^0.1.0"
+    define-property "^0.2.5"
+    kind-of "^3.0.3"
 
 object-hash@^1.1.4:
-  version "1.1.5"
-  resolved "https://registry.yarnpkg.com/object-hash/-/object-hash-1.1.5.tgz#bdd844e030d0861b692ca175c6cab6868ec233d7"
+  version "1.3.1"
+  resolved "https://registry.yarnpkg.com/object-hash/-/object-hash-1.3.1.tgz#fde452098a951cb145f039bb7d455449ddc126df"
+  integrity sha512-OSuu/pU4ENM9kmREg0BdNrUDIl1heYa4mBZacJc+vVWz4GtAwu7jO8s4AIt2aGRUTqxykpWzI3Oqnsm13tTMDA==
+
+object-keys@^1.0.11, object-keys@^1.0.12, object-keys@~1.0.0:
+  version "1.0.12"
+  resolved "https://registry.yarnpkg.com/object-keys/-/object-keys-1.0.12.tgz#09c53855377575310cca62f55bb334abff7b3ed2"
+  integrity sha512-FTMyFUm2wBcGHnH2eXmz7tC6IwlqQZ6mVZ+6dm6vZ4IQIHjs6FdNsQBuKGPuUUUY6NfJw2PshC08Tn6LzLDOag==
 
-object-keys@^1.0.11, object-keys@^1.0.8, object-keys@~1.0.0:
-  version "1.0.11"
-  resolved "https://registry.yarnpkg.com/object-keys/-/object-keys-1.0.11.tgz#c54601778ad560f1142ce0e01bcca8b56d13426d"
+object-visit@^1.0.0:
+  version "1.0.1"
+  resolved "https://registry.yarnpkg.com/object-visit/-/object-visit-1.0.1.tgz#f79c4493af0c5377b59fe39d395e41042dd045bb"
+  integrity sha1-95xEk68MU3e1n+OdOV5BBC3QRbs=
+  dependencies:
+    isobject "^3.0.0"
 
-object.assign@^4.0.1, object.assign@^4.1.0:
+object.assign@4.1.0, object.assign@^4.0.1, object.assign@^4.0.4, object.assign@^4.1.0:
   version "4.1.0"
-  resolved "http://registry.npm.taobao.org/object.assign/download/object.assign-4.1.0.tgz#968bf1100d7956bb3ca086f006f846b3bc4008da"
+  resolved "https://registry.yarnpkg.com/object.assign/-/object.assign-4.1.0.tgz#968bf1100d7956bb3ca086f006f846b3bc4008da"
+  integrity sha512-exHJeq6kBKj58mqGyTQ9DFvrZC/eR6OwxzoM9YRoGBqrXYonaFyGiFMuc9VZrXf7DarreEwMpurG3dd+CNyW5w==
   dependencies:
     define-properties "^1.1.2"
     function-bind "^1.1.1"
     has-symbols "^1.0.0"
     object-keys "^1.0.11"
 
+object.defaults@^1.0.0, object.defaults@^1.1.0:
+  version "1.1.0"
+  resolved "https://registry.yarnpkg.com/object.defaults/-/object.defaults-1.1.0.tgz#3a7f868334b407dea06da16d88d5cd29e435fecf"
+  integrity sha1-On+GgzS0B96gbaFtiNXNKeQ1/s8=
+  dependencies:
+    array-each "^1.0.1"
+    array-slice "^1.0.0"
+    for-own "^1.0.0"
+    isobject "^3.0.0"
+
+object.getownpropertydescriptors@^2.0.3:
+  version "2.0.3"
+  resolved "https://registry.yarnpkg.com/object.getownpropertydescriptors/-/object.getownpropertydescriptors-2.0.3.tgz#8758c846f5b407adab0f236e0986f14b051caa16"
+  integrity sha1-h1jIRvW0B62rDyNuCYbxSwUcqhY=
+  dependencies:
+    define-properties "^1.1.2"
+    es-abstract "^1.5.1"
+
+object.map@^1.0.0:
+  version "1.0.1"
+  resolved "https://registry.yarnpkg.com/object.map/-/object.map-1.0.1.tgz#cf83e59dc8fcc0ad5f4250e1f78b3b81bd801d37"
+  integrity sha1-z4Plncj8wK1fQlDh94s7gb2AHTc=
+  dependencies:
+    for-own "^1.0.0"
+    make-iterator "^1.0.0"
+
 object.omit@^2.0.0:
   version "2.0.1"
   resolved "https://registry.yarnpkg.com/object.omit/-/object.omit-2.0.1.tgz#1a9c744829f39dbb858c76ca3579ae2a54ebd1fa"
+  integrity sha1-Gpx0SCnznbuFjHbKNXmuKlTr0fo=
   dependencies:
     for-own "^0.1.4"
     is-extendable "^0.1.1"
 
-obuf@^1.0.0, obuf@^1.1.1:
-  version "1.1.1"
-  resolved "https://registry.yarnpkg.com/obuf/-/obuf-1.1.1.tgz#104124b6c602c6796881a042541d36db43a5264e"
+object.pick@^1.2.0, object.pick@^1.3.0:
+  version "1.3.0"
+  resolved "https://registry.yarnpkg.com/object.pick/-/object.pick-1.3.0.tgz#87a10ac4c1694bd2e1cbf53591a66141fb5dd747"
+  integrity sha1-h6EKxMFpS9Lhy/U1kaZhQftd10c=
+  dependencies:
+    isobject "^3.0.1"
+
+object.reduce@^1.0.0:
+  version "1.0.1"
+  resolved "https://registry.yarnpkg.com/object.reduce/-/object.reduce-1.0.1.tgz#6fe348f2ac7fa0f95ca621226599096825bb03ad"
+  integrity sha1-b+NI8qx/oPlcpiEiZZkJaCW7A60=
+  dependencies:
+    for-own "^1.0.0"
+    make-iterator "^1.0.0"
+
+object.values@^1.0.4:
+  version "1.1.0"
+  resolved "https://registry.yarnpkg.com/object.values/-/object.values-1.1.0.tgz#bf6810ef5da3e5325790eaaa2be213ea84624da9"
+  integrity sha512-8mf0nKLAoFX6VlNVdhGj31SVYpaNFtUnuoOXWyFEstsWRgU837AK+JYM0iAxwkSzGRbwn8cbFmgbyxj1j4VbXg==
+  dependencies:
+    define-properties "^1.1.3"
+    es-abstract "^1.12.0"
+    function-bind "^1.1.1"
+    has "^1.0.3"
+
+obuf@^1.0.0, obuf@^1.1.2:
+  version "1.1.2"
+  resolved "https://registry.yarnpkg.com/obuf/-/obuf-1.1.2.tgz#09bea3343d41859ebd446292d11c9d4db619084e"
+  integrity sha512-PX1wu0AmAdPqOL1mWhqmlOd8kOIZQwGZw6rh7uby9fTc5lhaOWFLX3I6R1hrF9k3zUY40e6igsLGkDXK92LJNg==
+
+omit.js@^1.0.2:
+  version "1.0.2"
+  resolved "https://registry.yarnpkg.com/omit.js/-/omit.js-1.0.2.tgz#91a14f0eba84066dfa015bf30e474c47f30bc858"
+  integrity sha512-/QPc6G2NS+8d4L/cQhbk6Yit1WTB6Us2g84A7A/1+w9d/eRGHyEqC5kkQtHVoHZ5NFWGG7tUGgrhVZwgZanKrQ==
+  dependencies:
+    babel-runtime "^6.23.0"
 
 on-finished@~2.3.0:
   version "2.3.0"
   resolved "https://registry.yarnpkg.com/on-finished/-/on-finished-2.3.0.tgz#20f1336481b083cd75337992a16971aa2d906947"
+  integrity sha1-IPEzZIGwg811M3mSoWlxqi2QaUc=
   dependencies:
     ee-first "1.1.1"
 
 on-headers@~1.0.1:
   version "1.0.1"
   resolved "https://registry.yarnpkg.com/on-headers/-/on-headers-1.0.1.tgz#928f5d0f470d49342651ea6794b0857c100693f7"
+  integrity sha1-ko9dD0cNSTQmUepnlLCFfBAGk/c=
 
-once@1.x, once@^1.3.0:
+once@1.x, once@^1.3.0, once@^1.3.1, once@^1.3.2, once@^1.4.0, once@~1.4.0:
   version "1.4.0"
-  resolved "http://registry.npm.taobao.org/once/download/once-1.4.0.tgz#583b1aa775961d4b113ac17d9c50baef9dd76bd1"
-  dependencies:
-    wrappy "1"
-
-once@~1.3.0, once@~1.3.3:
-  version "1.3.3"
-  resolved "https://registry.yarnpkg.com/once/-/once-1.3.3.tgz#b2e261557ce4c314ec8304f3fa82663e4297ca20"
+  resolved "https://registry.yarnpkg.com/once/-/once-1.4.0.tgz#583b1aa775961d4b113ac17d9c50baef9dd76bd1"
+  integrity sha1-WDsap3WWHUsROsF9nFC6753Xa9E=
   dependencies:
     wrappy "1"
 
 onetime@^2.0.0:
   version "2.0.1"
-  resolved "http://registry.npm.taobao.org/onetime/download/onetime-2.0.1.tgz#067428230fd67443b2794b22bba528b6867962d4"
+  resolved "https://registry.yarnpkg.com/onetime/-/onetime-2.0.1.tgz#067428230fd67443b2794b22bba528b6867962d4"
+  integrity sha1-BnQoIw/WdEOyeUsiu6UotoZ5YtQ=
   dependencies:
     mimic-fn "^1.0.0"
 
+opener@^1.5.1:
+  version "1.5.1"
+  resolved "https://registry.npm.taobao.org/opener/download/opener-1.5.1.tgz#6d2f0e77f1a0af0032aca716c2c1fbb8e7e8abed"
+  integrity sha1-bS8Od/GgrwAyrKcWwsH7uOfoq+0=
+
 opn@^5.1.0:
-  version "5.1.0"
-  resolved "https://registry.yarnpkg.com/opn/-/opn-5.1.0.tgz#72ce2306a17dbea58ff1041853352b4a8fc77519"
+  version "5.4.0"
+  resolved "https://registry.yarnpkg.com/opn/-/opn-5.4.0.tgz#cb545e7aab78562beb11aa3bfabc7042e1761035"
+  integrity sha512-YF9MNdVy/0qvJvDtunAOzFw9iasOQHpVthTCvGzxt61Il64AYSGdK+rYwld7NAfk9qJ7dt+hymBNSc9LNYS+Sw==
   dependencies:
     is-wsl "^1.1.0"
 
 optimist@^0.6.1:
   version "0.6.1"
   resolved "https://registry.yarnpkg.com/optimist/-/optimist-0.6.1.tgz#da3ea74686fa21a19a111c326e90eb15a0196686"
+  integrity sha1-2j6nRob6IaGaERwybpDrFaAZZoY=
   dependencies:
     minimist "~0.0.1"
     wordwrap "~0.0.2"
 
-optimist@~0.3, optimist@~0.3.5:
-  version "0.3.7"
-  resolved "https://registry.yarnpkg.com/optimist/-/optimist-0.3.7.tgz#c90941ad59e4273328923074d2cf2e7cbc6ec0d9"
+optimize-css-assets-webpack-plugin@^5.0.1:
+  version "5.0.1"
+  resolved "https://registry.yarnpkg.com/optimize-css-assets-webpack-plugin/-/optimize-css-assets-webpack-plugin-5.0.1.tgz#9eb500711d35165b45e7fd60ba2df40cb3eb9159"
+  integrity sha512-Rqm6sSjWtx9FchdP0uzTQDc7GXDKnwVEGoSxjezPkzMewx7gEWE9IMUYKmigTRC4U3RaNSwYVnUDLuIdtTpm0A==
   dependencies:
-    wordwrap "~0.0.2"
+    cssnano "^4.1.0"
+    last-call-webpack-plugin "^3.0.0"
 
 optionator@^0.8.1, optionator@^0.8.2:
   version "0.8.2"
-  resolved "http://registry.npm.taobao.org/optionator/download/optionator-0.8.2.tgz#364c5e409d3f4d6301d6c0b4c05bba50180aeb64"
+  resolved "https://registry.yarnpkg.com/optionator/-/optionator-0.8.2.tgz#364c5e409d3f4d6301d6c0b4c05bba50180aeb64"
+  integrity sha1-NkxeQJ0/TWMB1sC0wFu6UBgK62Q=
   dependencies:
     deep-is "~0.1.3"
     fast-levenshtein "~2.0.4"
@@ -5376,118 +8831,263 @@ optionator@^0.8.1, optionator@^0.8.2:
     type-check "~0.3.2"
     wordwrap "~1.0.0"
 
-options@>=0.0.5:
-  version "0.0.6"
-  resolved "https://registry.yarnpkg.com/options/-/options-0.0.6.tgz#ec22d312806bb53e731773e7cdaefcf1c643128f"
-
-orchestrator@^0.3.0:
-  version "0.3.8"
-  resolved "https://registry.yarnpkg.com/orchestrator/-/orchestrator-0.3.8.tgz#14e7e9e2764f7315fbac184e506c7aa6df94ad7e"
+ora@^1.3.0:
+  version "1.4.0"
+  resolved "https://registry.npm.taobao.org/ora/download/ora-1.4.0.tgz#884458215b3a5d4097592285f93321bb7a79e2e5"
+  integrity sha1-iERYIVs6XUCXWSKF+TMhu3p54uU=
   dependencies:
-    end-of-stream "~0.1.5"
-    sequencify "~0.0.7"
-    stream-consume "~0.1.0"
+    chalk "^2.1.0"
+    cli-cursor "^2.1.0"
+    cli-spinners "^1.0.1"
+    log-symbols "^2.1.0"
 
-ordered-read-streams@^0.1.0:
-  version "0.1.0"
-  resolved "https://registry.yarnpkg.com/ordered-read-streams/-/ordered-read-streams-0.1.0.tgz#fd565a9af8eb4473ba69b6ed8a34352cb552f126"
+ordered-read-streams@^1.0.0:
+  version "1.0.1"
+  resolved "https://registry.yarnpkg.com/ordered-read-streams/-/ordered-read-streams-1.0.1.tgz#77c0cb37c41525d64166d990ffad7ec6a0e1363e"
+  integrity sha1-d8DLN8QVJdZBZtmQ/61+xqDhNj4=
+  dependencies:
+    readable-stream "^2.0.1"
 
-original@>=0.0.5:
-  version "1.0.0"
-  resolved "https://registry.yarnpkg.com/original/-/original-1.0.0.tgz#9147f93fa1696d04be61e01bd50baeaca656bd3b"
+original@^1.0.0:
+  version "1.0.2"
+  resolved "https://registry.yarnpkg.com/original/-/original-1.0.2.tgz#e442a61cffe1c5fd20a65f3261c26663b303f25f"
+  integrity sha512-hyBVl6iqqUOJ8FqRe+l/gS8H+kKYjrEndd5Pm1MfBtsEKA038HkkdbAl/72EAXGyonD/PFsvmVG+EvcIpliMBg==
   dependencies:
-    url-parse "1.0.x"
+    url-parse "^1.4.3"
 
-os-browserify@^0.2.0:
-  version "0.2.1"
-  resolved "https://registry.yarnpkg.com/os-browserify/-/os-browserify-0.2.1.tgz#63fc4ccee5d2d7763d26bbf8601078e6c2e0044f"
+os-browserify@^0.3.0:
+  version "0.3.0"
+  resolved "https://registry.yarnpkg.com/os-browserify/-/os-browserify-0.3.0.tgz#854373c7f5c2315914fc9bfc6bd8238fdda1ec27"
+  integrity sha1-hUNzx/XCMVkU/Jv8a9gjj92h7Cc=
 
-os-homedir@^1.0.0, os-homedir@^1.0.1:
+os-homedir@^1.0.0:
   version "1.0.2"
   resolved "https://registry.yarnpkg.com/os-homedir/-/os-homedir-1.0.2.tgz#ffbc4988336e0e833de0c168c7ef152121aa7fb3"
+  integrity sha1-/7xJiDNuDoM94MFox+8VISGqf7M=
 
 os-locale@^1.4.0:
   version "1.4.0"
   resolved "https://registry.yarnpkg.com/os-locale/-/os-locale-1.4.0.tgz#20f9f17ae29ed345e8bde583b13d2009803c14d9"
+  integrity sha1-IPnxeuKe00XoveWDsT0gCYA8FNk=
   dependencies:
     lcid "^1.0.0"
 
 os-locale@^2.0.0:
   version "2.1.0"
   resolved "https://registry.yarnpkg.com/os-locale/-/os-locale-2.1.0.tgz#42bc2900a6b5b8bd17376c8e882b65afccf24bf2"
+  integrity sha512-3sslG3zJbEYcaC4YVAvDorjGxc7tv6KVATnLPZONiljsUncvihe9BQoVCEs0RZ1kmf4Hk9OBqlZfJZWI4GanKA==
   dependencies:
     execa "^0.7.0"
     lcid "^1.0.0"
     mem "^1.1.0"
 
-os-tmpdir@^1.0.0, os-tmpdir@^1.0.1, os-tmpdir@~1.0.1, os-tmpdir@~1.0.2:
+os-locale@^3.0.0, os-locale@^3.1.0:
+  version "3.1.0"
+  resolved "https://registry.yarnpkg.com/os-locale/-/os-locale-3.1.0.tgz#a802a6ee17f24c10483ab9935719cef4ed16bf1a"
+  integrity sha512-Z8l3R4wYWM40/52Z+S265okfFj8Kt2cC2MKY+xNi3kFs+XGI7WXu/I309QQQYbRW4ijiZ+yxs9pqEhJh0DqW3Q==
+  dependencies:
+    execa "^1.0.0"
+    lcid "^2.0.0"
+    mem "^4.0.0"
+
+os-tmpdir@^1.0.0, os-tmpdir@^1.0.1, os-tmpdir@~1.0.2:
   version "1.0.2"
   resolved "https://registry.yarnpkg.com/os-tmpdir/-/os-tmpdir-1.0.2.tgz#bbe67406c79aa85c5cfec766fe5734555dfa1274"
+  integrity sha1-u+Z0BseaqFxc/sdm/lc0VV36EnQ=
 
-osenv@0:
-  version "0.1.4"
-  resolved "https://registry.yarnpkg.com/osenv/-/osenv-0.1.4.tgz#42fe6d5953df06c8064be6f176c3d05aaaa34644"
+osenv@0, osenv@^0.1.4, osenv@^0.1.5:
+  version "0.1.5"
+  resolved "https://registry.yarnpkg.com/osenv/-/osenv-0.1.5.tgz#85cdfafaeb28e8677f416e287592b5f3f49ea410"
+  integrity sha512-0CWcCECdMVc2Rw3U5w9ZjqX6ga6ubk1xDVKxtBQPK7wis/0F2r9T6k4ydGYhecl7YUBxBVxhL5oisPsNxAPe2g==
   dependencies:
     os-homedir "^1.0.0"
     os-tmpdir "^1.0.0"
 
-output-file-sync@^1.1.0:
+output-file-sync@^1.1.2:
   version "1.1.2"
   resolved "https://registry.yarnpkg.com/output-file-sync/-/output-file-sync-1.1.2.tgz#d0a33eefe61a205facb90092e826598d5245ce76"
+  integrity sha1-0KM+7+YaIF+suQCS6CZZjVJFznY=
   dependencies:
     graceful-fs "^4.1.4"
     mkdirp "^0.5.1"
     object-assign "^4.1.0"
 
+p-defer@^1.0.0:
+  version "1.0.0"
+  resolved "https://registry.yarnpkg.com/p-defer/-/p-defer-1.0.0.tgz#9f6eb182f6c9aa8cd743004a7d4f96b196b0fb0c"
+  integrity sha1-n26xgvbJqozXQwBKfU+WsZaw+ww=
+
 p-finally@^1.0.0:
   version "1.0.0"
   resolved "https://registry.yarnpkg.com/p-finally/-/p-finally-1.0.0.tgz#3fbcfb15b899a44123b34b6dcc18b724336a2cae"
+  integrity sha1-P7z7FbiZpEEjs0ttzBi3JDNqLK4=
 
-p-limit@^1.1.0:
+p-is-promise@^1.1.0:
   version "1.1.0"
-  resolved "https://registry.yarnpkg.com/p-limit/-/p-limit-1.1.0.tgz#b07ff2d9a5d88bec806035895a2bab66a27988bc"
+  resolved "https://registry.yarnpkg.com/p-is-promise/-/p-is-promise-1.1.0.tgz#9c9456989e9f6588017b0434d56097675c3da05e"
+  integrity sha1-nJRWmJ6fZYgBewQ01WCXZ1w9oF4=
+
+p-limit@^1.1.0:
+  version "1.3.0"
+  resolved "https://registry.yarnpkg.com/p-limit/-/p-limit-1.3.0.tgz#b86bd5f0c25690911c7590fcbfc2010d54b3ccb8"
+  integrity sha512-vvcXsLAJ9Dr5rQOPk7toZQZJApBl2K4J6dANSsEuh6QI41JYcsS/qhTGa9ErIUUgK3WNQoJYvylxvjqmiqEA9Q==
+  dependencies:
+    p-try "^1.0.0"
+
+p-limit@^2.0.0, p-limit@^2.1.0:
+  version "2.1.0"
+  resolved "https://registry.yarnpkg.com/p-limit/-/p-limit-2.1.0.tgz#1d5a0d20fb12707c758a655f6bbc4386b5930d68"
+  integrity sha512-NhURkNcrVB+8hNfLuysU8enY5xn2KXphsHBaC2YmRNTZRc7RWusw6apSpdEj3jo4CMb6W9nrF6tTnsJsJeyu6g==
+  dependencies:
+    p-try "^2.0.0"
+
+p-limit@^2.2.0:
+  version "2.2.1"
+  resolved "https://registry.npmjs.org/p-limit/-/p-limit-2.2.1.tgz#aa07a788cc3151c939b5131f63570f0dd2009537"
+  integrity sha512-85Tk+90UCVWvbDavCLKPOLC9vvY8OwEX/RtKF+/1OADJMVlFfEHOiMTPVyxg7mk/dKa+ipdHm0OUkTvCpMTuwg==
+  dependencies:
+    p-try "^2.0.0"
 
 p-locate@^2.0.0:
   version "2.0.0"
   resolved "https://registry.yarnpkg.com/p-locate/-/p-locate-2.0.0.tgz#20a0103b222a70c8fd39cc2e580680f3dde5ec43"
+  integrity sha1-IKAQOyIqcMj9OcwuWAaA893l7EM=
   dependencies:
     p-limit "^1.1.0"
 
+p-locate@^3.0.0:
+  version "3.0.0"
+  resolved "https://registry.yarnpkg.com/p-locate/-/p-locate-3.0.0.tgz#322d69a05c0264b25997d9f40cd8a891ab0064a4"
+  integrity sha512-x+12w/To+4GFfgJhBEpiDcLozRJGegY+Ei7/z0tSLkMmxGZNybVMSfWj9aJn8Z5Fc7dBUNJOOVgPv2H7IwulSQ==
+  dependencies:
+    p-limit "^2.0.0"
+
+p-locate@^4.1.0:
+  version "4.1.0"
+  resolved "https://registry.npmjs.org/p-locate/-/p-locate-4.1.0.tgz#a3428bb7088b3a60292f66919278b7c297ad4f07"
+  integrity sha512-R79ZZ/0wAxKGu3oYMlz8jy/kbhsNrS7SKZ7PxEHBgJ5+F2mtFW2fK2cOtBh1cHYkQsbzFV7I+EoRKe6Yt0oK7A==
+  dependencies:
+    p-limit "^2.2.0"
+
 p-map@^1.1.1:
   version "1.2.0"
   resolved "https://registry.yarnpkg.com/p-map/-/p-map-1.2.0.tgz#e4e94f311eabbc8633a1e79908165fca26241b6b"
+  integrity sha512-r6zKACMNhjPJMTl8KcFH4li//gkrXWfbD6feV8l6doRHlzljFWGJ2AP6iKaCJXyZmAUMOPtvbW7EXkbWO/pLEA==
+
+p-try@^1.0.0:
+  version "1.0.0"
+  resolved "https://registry.yarnpkg.com/p-try/-/p-try-1.0.0.tgz#cbc79cdbaf8fd4228e13f621f2b1a237c1b207b3"
+  integrity sha1-y8ec26+P1CKOE/Yh8rGiN8GyB7M=
+
+p-try@^2.0.0:
+  version "2.0.0"
+  resolved "https://registry.yarnpkg.com/p-try/-/p-try-2.0.0.tgz#85080bb87c64688fa47996fe8f7dfbe8211760b1"
+  integrity sha512-hMp0onDKIajHfIkdRk3P4CdCmErkYAxxDtP3Wx/4nZ3aGlau2VKh3mZpcuFkH27WQkL/3WBCPOktzA9ZOAnMQQ==
+
+package-json@^4.0.0:
+  version "4.0.1"
+  resolved "https://registry.npm.taobao.org/package-json/download/package-json-4.0.1.tgz?cache=0&other_urls=https%3A%2F%2Fregistry.npm.taobao.org%2Fpackage-json%2Fdownload%2Fpackage-json-4.0.1.tgz#8869a0401253661c4c4ca3da6c2121ed555f5eed"
+  integrity sha1-iGmgQBJTZhxMTKPabCEh7VVfXu0=
+  dependencies:
+    got "^6.7.1"
+    registry-auth-token "^3.0.1"
+    registry-url "^3.0.3"
+    semver "^5.1.0"
 
-pako@~0.2.0:
-  version "0.2.9"
-  resolved "https://registry.yarnpkg.com/pako/-/pako-0.2.9.tgz#f3f7522f4ef782348da8161bad9ecfd51bf83a75"
+pacote@^9.1.0, pacote@^9.5.11, pacote@^9.5.3:
+  version "9.5.11"
+  resolved "https://registry.npm.taobao.org/pacote/download/pacote-9.5.11.tgz#524152077cb392c47b1fbe198aa28f778bef7ee1"
+  integrity sha1-UkFSB3yzksR7H74ZiqKPd4vvfuE=
+  dependencies:
+    bluebird "^3.5.3"
+    cacache "^12.0.2"
+    chownr "^1.1.2"
+    figgy-pudding "^3.5.1"
+    get-stream "^4.1.0"
+    glob "^7.1.3"
+    infer-owner "^1.0.4"
+    lru-cache "^5.1.1"
+    make-fetch-happen "^5.0.0"
+    minimatch "^3.0.4"
+    minipass "^2.3.5"
+    mississippi "^3.0.0"
+    mkdirp "^0.5.1"
+    normalize-package-data "^2.4.0"
+    npm-normalize-package-bin "^1.0.0"
+    npm-package-arg "^6.1.0"
+    npm-packlist "^1.1.12"
+    npm-pick-manifest "^3.0.0"
+    npm-registry-fetch "^4.0.0"
+    osenv "^0.1.5"
+    promise-inflight "^1.0.1"
+    promise-retry "^1.1.1"
+    protoduck "^5.0.1"
+    rimraf "^2.6.2"
+    safe-buffer "^5.1.2"
+    semver "^5.6.0"
+    ssri "^6.0.1"
+    tar "^4.4.10"
+    unique-filename "^1.1.1"
+    which "^1.3.1"
+
+pako@~1.0.5:
+  version "1.0.8"
+  resolved "https://registry.yarnpkg.com/pako/-/pako-1.0.8.tgz#6844890aab9c635af868ad5fecc62e8acbba3ea4"
+  integrity sha512-6i0HVbUfcKaTv+EG8ZTr75az7GFXcLYk9UyLEg7Notv/Ma+z/UG3TCoz6GiNeOrn1E/e63I0X/Hpw18jHOTUnA==
+
+parallel-transform@^1.1.0:
+  version "1.1.0"
+  resolved "https://registry.yarnpkg.com/parallel-transform/-/parallel-transform-1.1.0.tgz#d410f065b05da23081fcd10f28854c29bda33b06"
+  integrity sha1-1BDwZbBdojCB/NEPKIVMKb2jOwY=
+  dependencies:
+    cyclist "~0.2.2"
+    inherits "^2.0.3"
+    readable-stream "^2.1.5"
 
 param-case@2.1.x:
-  version "2.1.0"
-  resolved "https://registry.yarnpkg.com/param-case/-/param-case-2.1.0.tgz#2619f90fd6c829ed0b958f1c84ed03a745a6d70a"
+  version "2.1.1"
+  resolved "https://registry.yarnpkg.com/param-case/-/param-case-2.1.1.tgz#df94fd8cf6531ecf75e6bef9a0858fbc72be2247"
+  integrity sha1-35T9jPZTHs915r75oIWPvHK+Ikc=
   dependencies:
     no-case "^2.2.0"
 
+parent-module@^1.0.0:
+  version "1.0.1"
+  resolved "https://registry.yarnpkg.com/parent-module/-/parent-module-1.0.1.tgz#691d2709e78c79fae3a156622452d00762caaaa2"
+  integrity sha512-GQ2EWRpQV8/o+Aw8YqtfZZPfNRWZYkbidE9k5rpl/hC3vtHHBfGm2Ifi6qWV+coDGkrUKZAxE3Lot5kcsRlh+g==
+  dependencies:
+    callsites "^3.0.0"
+
 parse-asn1@^5.0.0:
-  version "5.1.0"
-  resolved "https://registry.yarnpkg.com/parse-asn1/-/parse-asn1-5.1.0.tgz#37c4f9b7ed3ab65c74817b5f2480937fbf97c712"
+  version "5.1.3"
+  resolved "https://registry.yarnpkg.com/parse-asn1/-/parse-asn1-5.1.3.tgz#1600c6cc0727365d68b97f3aa78939e735a75204"
+  integrity sha512-VrPoetlz7B/FqjBLD2f5wBVZvsZVLnRUrxVLfRYhGXCODa/NWE4p3Wp+6+aV3ZPL3KM7/OZmxDIwwijD7yuucg==
   dependencies:
     asn1.js "^4.0.0"
     browserify-aes "^1.0.0"
     create-hash "^1.1.0"
     evp_bytestokey "^1.0.0"
     pbkdf2 "^3.0.3"
+    safe-buffer "^5.1.1"
 
 parse-filepath@^1.0.1:
-  version "1.0.1"
-  resolved "https://registry.yarnpkg.com/parse-filepath/-/parse-filepath-1.0.1.tgz#159d6155d43904d16c10ef698911da1e91969b73"
+  version "1.0.2"
+  resolved "https://registry.yarnpkg.com/parse-filepath/-/parse-filepath-1.0.2.tgz#a632127f53aaf3d15876f5872f3ffac763d6c891"
+  integrity sha1-pjISf1Oq89FYdvWHLz/6x2PWyJE=
   dependencies:
-    is-absolute "^0.2.3"
+    is-absolute "^1.0.0"
     map-cache "^0.2.0"
     path-root "^0.1.1"
 
+parse-github-repo-url@^1.3.0:
+  version "1.4.1"
+  resolved "https://registry.npmjs.org/parse-github-repo-url/-/parse-github-repo-url-1.4.1.tgz#9e7d8bb252a6cb6ba42595060b7bf6df3dbc1f50"
+  integrity sha1-nn2LslKmy2ukJZUGC3v23z28H1A=
+
 parse-glob@^3.0.4:
   version "3.0.4"
   resolved "https://registry.yarnpkg.com/parse-glob/-/parse-glob-3.0.4.tgz#b2c376cfb11f35513badd173ef0bb6e3a388391c"
+  integrity sha1-ssN2z7EfNVE7rdFz7wu246OIORw=
   dependencies:
     glob-base "^0.3.0"
     is-dotfile "^1.0.0"
@@ -5497,100 +9097,148 @@ parse-glob@^3.0.4:
 parse-json@^2.2.0:
   version "2.2.0"
   resolved "https://registry.yarnpkg.com/parse-json/-/parse-json-2.2.0.tgz#f480f40434ef80741f8469099f8dea18f55a4dc9"
+  integrity sha1-9ID0BDTvgHQfhGkJn43qGPVaTck=
   dependencies:
     error-ex "^1.2.0"
 
+parse-json@^4.0.0:
+  version "4.0.0"
+  resolved "https://registry.yarnpkg.com/parse-json/-/parse-json-4.0.0.tgz#be35f5425be1f7f6c747184f98a788cb99477ee0"
+  integrity sha1-vjX1Qlvh9/bHRxhPmKeIy5lHfuA=
+  dependencies:
+    error-ex "^1.3.1"
+    json-parse-better-errors "^1.0.1"
+
+parse-node-version@^1.0.0:
+  version "1.0.0"
+  resolved "https://registry.yarnpkg.com/parse-node-version/-/parse-node-version-1.0.0.tgz#33d9aa8920dcc3c0d33658ec18ce237009a56d53"
+  integrity sha512-02GTVHD1u0nWc20n2G7WX/PgdhNFG04j5fi1OkaJzPWLTcf6vh6229Lta1wTmXG/7Dg42tCssgkccVt7qvd8Kg==
+
 parse-passwd@^1.0.0:
   version "1.0.0"
   resolved "https://registry.yarnpkg.com/parse-passwd/-/parse-passwd-1.0.0.tgz#6d5b934a456993b23d37f40a382d6f1666a8e5c6"
+  integrity sha1-bVuTSkVpk7I9N/QKOC1vFmao5cY=
 
-parse5@^1.5.1:
-  version "1.5.1"
-  resolved "https://registry.yarnpkg.com/parse5/-/parse5-1.5.1.tgz#9b7f3b0de32be78dc2401b17573ccaf0f6f59d94"
-
-parsejson@0.0.1:
-  version "0.0.1"
-  resolved "https://registry.yarnpkg.com/parsejson/-/parsejson-0.0.1.tgz#9b10c6c0d825ab589e685153826de0a3ba278bcc"
+parseqs@0.0.5:
+  version "0.0.5"
+  resolved "https://registry.yarnpkg.com/parseqs/-/parseqs-0.0.5.tgz#d5208a3738e46766e291ba2ea173684921a8b89d"
+  integrity sha1-1SCKNzjkZ2bikbouoXNoSSGouJ0=
   dependencies:
     better-assert "~1.0.0"
 
-parseqs@0.0.2:
-  version "0.0.2"
-  resolved "https://registry.yarnpkg.com/parseqs/-/parseqs-0.0.2.tgz#9dfe70b2cddac388bde4f35b1f240fa58adbe6c7"
+parseuri@0.0.5:
+  version "0.0.5"
+  resolved "https://registry.yarnpkg.com/parseuri/-/parseuri-0.0.5.tgz#80204a50d4dbb779bfdc6ebe2778d90e4bce320a"
+  integrity sha1-gCBKUNTbt3m/3G6+J3jZDkvOMgo=
   dependencies:
     better-assert "~1.0.0"
 
-parseuri@0.0.4:
-  version "0.0.4"
-  resolved "https://registry.yarnpkg.com/parseuri/-/parseuri-0.0.4.tgz#806582a39887e1ea18dd5e2fe0e01902268e9350"
-  dependencies:
-    better-assert "~1.0.0"
+parseurl@~1.3.2:
+  version "1.3.2"
+  resolved "https://registry.yarnpkg.com/parseurl/-/parseurl-1.3.2.tgz#fc289d4ed8993119460c156253262cdc8de65bf3"
+  integrity sha1-/CidTtiZMRlGDBViUyYs3I3mW/M=
 
-parseurl@~1.3.1:
-  version "1.3.1"
-  resolved "https://registry.yarnpkg.com/parseurl/-/parseurl-1.3.1.tgz#c8ab8c9223ba34888aa64a297b28853bec18da56"
+pascalcase@^0.1.1:
+  version "0.1.1"
+  resolved "https://registry.yarnpkg.com/pascalcase/-/pascalcase-0.1.1.tgz#b363e55e8006ca6fe21784d2db22bd15d7917f14"
+  integrity sha1-s2PlXoAGym/iF4TS2yK9FdeRfxQ=
 
 path-browserify@0.0.0:
   version "0.0.0"
   resolved "https://registry.yarnpkg.com/path-browserify/-/path-browserify-0.0.0.tgz#a0b870729aae214005b7d5032ec2cbbb0fb4451a"
+  integrity sha1-oLhwcpquIUAFt9UDLsLLuw+0RRo=
+
+path-dirname@^1.0.0:
+  version "1.0.2"
+  resolved "https://registry.yarnpkg.com/path-dirname/-/path-dirname-1.0.2.tgz#cc33d24d525e099a5388c0336c6e32b9160609e0"
+  integrity sha1-zDPSTVJeCZpTiMAzbG4yuRYGCeA=
 
 path-exists@^2.0.0:
   version "2.1.0"
   resolved "https://registry.yarnpkg.com/path-exists/-/path-exists-2.1.0.tgz#0feb6c64f0fc518d9a754dd5efb62c7022761f4b"
+  integrity sha1-D+tsZPD8UY2adU3V77YscCJ2H0s=
   dependencies:
     pinkie-promise "^2.0.0"
 
 path-exists@^3.0.0:
   version "3.0.0"
   resolved "https://registry.yarnpkg.com/path-exists/-/path-exists-3.0.0.tgz#ce0ebeaa5f78cb18925ea7d810d7b59b010fd515"
+  integrity sha1-zg6+ql94yxiSXqfYENe1mwEP1RU=
+
+path-exists@^4.0.0:
+  version "4.0.0"
+  resolved "https://registry.npmjs.org/path-exists/-/path-exists-4.0.0.tgz#513bdbe2d3b95d7762e8c1137efa195c6c61b5b3"
+  integrity sha512-ak9Qy5Q7jYb2Wwcey5Fpvg2KoAc/ZIhLSLOSBmRmygPsGwkVVt0fZa0qrtMz+m6tJTAHfZQ8FnmB4MG4LWy7/w==
 
-path-is-absolute@^1.0.0:
+path-is-absolute@^1.0.0, path-is-absolute@^1.0.1:
   version "1.0.1"
-  resolved "http://registry.npm.taobao.org/path-is-absolute/download/path-is-absolute-1.0.1.tgz#174b9268735534ffbc7ace6bf53a5a9e1b5c5f5f"
+  resolved "https://registry.yarnpkg.com/path-is-absolute/-/path-is-absolute-1.0.1.tgz#174b9268735534ffbc7ace6bf53a5a9e1b5c5f5f"
+  integrity sha1-F0uSaHNVNP+8es5r9TpanhtcX18=
 
-path-is-inside@^1.0.1, path-is-inside@^1.0.2:
+path-is-inside@^1.0.1, path-is-inside@^1.0.2, path-is-inside@~1.0.2:
   version "1.0.2"
-  resolved "http://registry.npm.taobao.org/path-is-inside/download/path-is-inside-1.0.2.tgz#365417dede44430d1c11af61027facf074bdfc53"
+  resolved "https://registry.yarnpkg.com/path-is-inside/-/path-is-inside-1.0.2.tgz#365417dede44430d1c11af61027facf074bdfc53"
+  integrity sha1-NlQX3t5EQw0cEa9hAn+s8HS9/FM=
 
-path-key@^2.0.0:
+path-key@^2.0.0, path-key@^2.0.1:
   version "2.0.1"
   resolved "https://registry.yarnpkg.com/path-key/-/path-key-2.0.1.tgz#411cadb574c5a140d3a4b1910d40d80cc9f40b40"
+  integrity sha1-QRyttXTFoUDTpLGRDUDYDMn0C0A=
 
-path-parse@^1.0.5:
-  version "1.0.5"
-  resolved "https://registry.yarnpkg.com/path-parse/-/path-parse-1.0.5.tgz#3c1adf871ea9cd6c9431b6ea2bd74a0ff055c4c1"
+path-parse@^1.0.6:
+  version "1.0.6"
+  resolved "https://registry.yarnpkg.com/path-parse/-/path-parse-1.0.6.tgz#d62dbb5679405d72c4737ec58600e9ddcf06d24c"
+  integrity sha512-GSmOT2EbHrINBf9SR7CDELwlJ8AENk3Qn7OikK4nFYAu3Ote2+JYNVvkpAEQm3/TLNEJFD/xZJjzyxg3KBWOzw==
 
 path-root-regex@^0.1.0:
   version "0.1.2"
   resolved "https://registry.yarnpkg.com/path-root-regex/-/path-root-regex-0.1.2.tgz#bfccdc8df5b12dc52c8b43ec38d18d72c04ba96d"
+  integrity sha1-v8zcjfWxLcUsi0PsONGNcsBLqW0=
 
 path-root@^0.1.1:
   version "0.1.1"
   resolved "https://registry.yarnpkg.com/path-root/-/path-root-0.1.1.tgz#9a4a6814cac1c0cd73360a95f32083c8ea4745b7"
+  integrity sha1-mkpoFMrBwM1zNgqV8yCDyOpHRbc=
   dependencies:
     path-root-regex "^0.1.0"
 
 path-to-regexp@0.1.7:
   version "0.1.7"
   resolved "https://registry.yarnpkg.com/path-to-regexp/-/path-to-regexp-0.1.7.tgz#df604178005f522f15eb4490e7247a1bfaa67f8c"
+  integrity sha1-32BBeABfUi8V60SQ5yR6G/qmf4w=
+
+path-to-regexp@^1.7.0:
+  version "1.7.0"
+  resolved "https://registry.npmjs.org/path-to-regexp/-/path-to-regexp-1.7.0.tgz#59fde0f435badacba103a84e9d3bc64e96b9937d"
+  integrity sha1-Wf3g9DW62suhA6hOnTvGTpa5k30=
+  dependencies:
+    isarray "0.0.1"
 
 path-type@^1.0.0:
   version "1.1.0"
   resolved "https://registry.yarnpkg.com/path-type/-/path-type-1.1.0.tgz#59c44f7ee491da704da415da5a4070ba4f8fe441"
+  integrity sha1-WcRPfuSR2nBNpBXaWkBwuk+P5EE=
   dependencies:
     graceful-fs "^4.1.2"
     pify "^2.0.0"
     pinkie-promise "^2.0.0"
 
-path-type@^2.0.0:
-  version "2.0.0"
-  resolved "https://registry.yarnpkg.com/path-type/-/path-type-2.0.0.tgz#f012ccb8415b7096fc2daa1054c3d72389594c73"
+path-type@^3.0.0:
+  version "3.0.0"
+  resolved "https://registry.yarnpkg.com/path-type/-/path-type-3.0.0.tgz#cef31dc8e0a1a3bb0d105c0cd97cf3bf47f4e36f"
+  integrity sha512-T2ZUsdZFHgA3u4e5PfPbjd7HDDpxPnQb5jN0SrDsjNSuVXHJqtwTnWqG0B1jZrgmJ/7lj1EmVIByWt1gxGkWvg==
   dependencies:
-    pify "^2.0.0"
+    pify "^3.0.0"
+
+pathval@^1.1.0:
+  version "1.1.0"
+  resolved "https://registry.npmjs.org/pathval/-/pathval-1.1.0.tgz#b942e6d4bde653005ef6b71361def8727d0645e0"
+  integrity sha1-uULm1L3mUwBe9rcTYd74cn0GReA=
 
 pbkdf2@^3.0.3:
-  version "3.0.14"
-  resolved "https://registry.yarnpkg.com/pbkdf2/-/pbkdf2-3.0.14.tgz#a35e13c64799b06ce15320f459c230e68e73bade"
+  version "3.0.17"
+  resolved "https://registry.yarnpkg.com/pbkdf2/-/pbkdf2-3.0.17.tgz#976c206530617b14ebb32114239f7b09336e93a6"
+  integrity sha512-U/il5MsrZp7mGg3mSQfn742na2T+1/vHDCG5/iTI3X9MKUuYUZVLQhyRsg06mCgDBTd57TxzgZt7P+fYfjRLtA==
   dependencies:
     create-hash "^1.1.2"
     create-hmac "^1.1.4"
@@ -5598,722 +9246,464 @@ pbkdf2@^3.0.3:
     safe-buffer "^5.0.1"
     sha.js "^2.4.8"
 
-perspective.js@^1.0.0:
-  version "1.0.0"
-  resolved "https://registry.yarnpkg.com/perspective.js/-/perspective.js-1.0.0.tgz#b14aca449043fcfd21297fabd2dfa184f42cb26c"
-  dependencies:
-    color-convert "^1.9.0"
-    dom-walk "^0.1.1"
-    throttle-debounce "^1.0.1"
+performance-now@^2.1.0:
+  version "2.1.0"
+  resolved "https://registry.yarnpkg.com/performance-now/-/performance-now-2.1.0.tgz#6309f4e0e5fa913ec1c69307ae364b4b377c9e7b"
+  integrity sha1-Ywn04OX6kT7BxpMHrjZLSzd8nns=
 
 pify@^2.0.0, pify@^2.3.0:
   version "2.3.0"
-  resolved "http://registry.npm.taobao.org/pify/download/pify-2.3.0.tgz#ed141a6ac043a849ea588498e7dca8b15330e90c"
+  resolved "https://registry.yarnpkg.com/pify/-/pify-2.3.0.tgz#ed141a6ac043a849ea588498e7dca8b15330e90c"
+  integrity sha1-7RQaasBDqEnqWISY59yosVMw6Qw=
 
 pify@^3.0.0:
   version "3.0.0"
   resolved "https://registry.yarnpkg.com/pify/-/pify-3.0.0.tgz#e5a4acd2c101fdf3d9a4d07f0dbc4db49dd28176"
-
-pinkie-promise@^1.0.0:
-  version "1.0.0"
-  resolved "https://registry.yarnpkg.com/pinkie-promise/-/pinkie-promise-1.0.0.tgz#d1da67f5482563bb7cf57f286ae2822ecfbf3670"
-  dependencies:
-    pinkie "^1.0.0"
+  integrity sha1-5aSs0sEB/fPZpNB/DbxNtJ3SgXY=
 
 pinkie-promise@^2.0.0:
   version "2.0.1"
-  resolved "http://registry.npm.taobao.org/pinkie-promise/download/pinkie-promise-2.0.1.tgz#2135d6dfa7a358c069ac9b178776288228450ffa"
+  resolved "https://registry.yarnpkg.com/pinkie-promise/-/pinkie-promise-2.0.1.tgz#2135d6dfa7a358c069ac9b178776288228450ffa"
+  integrity sha1-ITXW36ejWMBprJsXh3YogihFD/o=
   dependencies:
     pinkie "^2.0.0"
 
-pinkie@^1.0.0:
-  version "1.0.0"
-  resolved "https://registry.yarnpkg.com/pinkie/-/pinkie-1.0.0.tgz#5a47f28ba1015d0201bda7bf0f358e47bec8c7e4"
-
 pinkie@^2.0.0:
   version "2.0.4"
-  resolved "http://registry.npm.taobao.org/pinkie/download/pinkie-2.0.4.tgz#72556b80cfa0d48a974e80e77248e80ed4f7f870"
-
-pixrem@^3.0.0:
-  version "3.0.2"
-  resolved "https://registry.yarnpkg.com/pixrem/-/pixrem-3.0.2.tgz#30d1bafb4c3bdce8e9bb4bd56a13985619320c34"
-  dependencies:
-    browserslist "^1.0.0"
-    postcss "^5.0.0"
-    reduce-css-calc "^1.2.7"
+  resolved "https://registry.yarnpkg.com/pinkie/-/pinkie-2.0.4.tgz#72556b80cfa0d48a974e80e77248e80ed4f7f870"
+  integrity sha1-clVrgM+g1IqXToDnckjoDtT3+HA=
 
 pkg-dir@^1.0.0:
   version "1.0.0"
   resolved "https://registry.yarnpkg.com/pkg-dir/-/pkg-dir-1.0.0.tgz#7a4b508a8d5bb2d629d447056ff4e9c9314cf3d4"
+  integrity sha1-ektQio1bstYp1EcFb/TpyTFM89Q=
   dependencies:
     find-up "^1.0.0"
 
 pkg-dir@^2.0.0:
   version "2.0.0"
-  resolved "http://registry.npm.taobao.org/pkg-dir/download/pkg-dir-2.0.0.tgz#f6d5d1109e19d63edf428e0bd57e12777615334b"
+  resolved "https://registry.yarnpkg.com/pkg-dir/-/pkg-dir-2.0.0.tgz#f6d5d1109e19d63edf428e0bd57e12777615334b"
+  integrity sha1-9tXREJ4Z1j7fQo4L1X4Sd3YVM0s=
   dependencies:
     find-up "^2.1.0"
 
-pluralize@^7.0.0:
-  version "7.0.0"
-  resolved "http://registry.npm.taobao.org/pluralize/download/pluralize-7.0.0.tgz#298b89df8b93b0221dbf421ad2b1b1ea23fc6777"
-
-portfinder@^1.0.9:
-  version "1.0.13"
-  resolved "https://registry.yarnpkg.com/portfinder/-/portfinder-1.0.13.tgz#bb32ecd87c27104ae6ee44b5a3ccbf0ebb1aede9"
-  dependencies:
-    async "^1.5.2"
-    debug "^2.2.0"
-    mkdirp "0.5.x"
-
-postcss-advanced-variables@1.2.2:
-  version "1.2.2"
-  resolved "https://registry.yarnpkg.com/postcss-advanced-variables/-/postcss-advanced-variables-1.2.2.tgz#90a6213262e66a050a368b4a9c5d4778d72dbd74"
-  dependencies:
-    postcss "^5.0.10"
-
-postcss-atroot@^0.1.2:
-  version "0.1.3"
-  resolved "https://registry.yarnpkg.com/postcss-atroot/-/postcss-atroot-0.1.3.tgz#6752c0230c745140549345b2b0e30ebeda01a405"
-  dependencies:
-    postcss "^5.0.5"
-
-postcss-calc@^5.0.0, postcss-calc@^5.2.0:
-  version "5.3.1"
-  resolved "https://registry.yarnpkg.com/postcss-calc/-/postcss-calc-5.3.1.tgz#77bae7ca928ad85716e2fda42f261bf7c1d65b5e"
-  dependencies:
-    postcss "^5.0.2"
-    postcss-message-helpers "^2.0.0"
-    reduce-css-calc "^1.2.6"
-
-postcss-color-function@^2.0.0, postcss-color-function@^2.0.1:
-  version "2.0.1"
-  resolved "https://registry.yarnpkg.com/postcss-color-function/-/postcss-color-function-2.0.1.tgz#9ad226f550e8a7c7f8b8a77860545b6dd7f55241"
-  dependencies:
-    css-color-function "^1.2.0"
-    postcss "^5.0.4"
-    postcss-message-helpers "^2.0.0"
-    postcss-value-parser "^3.3.0"
-
-postcss-colormin@^2.1.8:
-  version "2.2.1"
-  resolved "https://registry.yarnpkg.com/postcss-colormin/-/postcss-colormin-2.2.1.tgz#dc5421b6ae6f779ef6bfd47352b94abe59d0316b"
-  dependencies:
-    colormin "^1.0.5"
-    postcss "^5.0.13"
-    postcss-value-parser "^3.2.3"
-
-postcss-convert-values@^2.3.4:
-  version "2.5.0"
-  resolved "https://registry.yarnpkg.com/postcss-convert-values/-/postcss-convert-values-2.5.0.tgz#570aceb04b3061fb25f6f46bd0329e7ab6263c0b"
-  dependencies:
-    postcss "^5.0.11"
-    postcss-value-parser "^3.1.2"
-
-postcss-css-reset@^1.0.2:
-  version "1.0.2"
-  resolved "https://registry.yarnpkg.com/postcss-css-reset/-/postcss-css-reset-1.0.2.tgz#769f2d62d3f1f76e2600fb4f79066399bebe2bd8"
-  dependencies:
-    postcss "^5.0.19"
-
-postcss-custom-media@^5.0.0:
-  version "5.0.1"
-  resolved "https://registry.yarnpkg.com/postcss-custom-media/-/postcss-custom-media-5.0.1.tgz#138d25a184bf2eb54de12d55a6c01c30a9d8bd81"
-  dependencies:
-    postcss "^5.0.0"
-
-postcss-custom-properties@^5.0.0:
-  version "5.0.1"
-  resolved "https://registry.yarnpkg.com/postcss-custom-properties/-/postcss-custom-properties-5.0.1.tgz#e07d4f6c78e547cf04274f120f490d236e33ea19"
-  dependencies:
-    balanced-match "~0.1.0"
-    postcss "^5.0.0"
-
-postcss-custom-selectors@^3.0.0:
+pkg-dir@^3.0.0:
   version "3.0.0"
-  resolved "https://registry.yarnpkg.com/postcss-custom-selectors/-/postcss-custom-selectors-3.0.0.tgz#8f81249f5ed07a8d0917cf6a39fe5b056b7f96ac"
-  dependencies:
-    balanced-match "^0.2.0"
-    postcss "^5.0.0"
-    postcss-selector-matches "^2.0.0"
-
-postcss-discard-comments@^2.0.4:
-  version "2.0.4"
-  resolved "https://registry.yarnpkg.com/postcss-discard-comments/-/postcss-discard-comments-2.0.4.tgz#befe89fafd5b3dace5ccce51b76b81514be00e3d"
-  dependencies:
-    postcss "^5.0.14"
-
-postcss-discard-duplicates@^2.0.1:
-  version "2.0.2"
-  resolved "https://registry.yarnpkg.com/postcss-discard-duplicates/-/postcss-discard-duplicates-2.0.2.tgz#02be520e91571ffb10738766a981d5770989bb32"
-  dependencies:
-    postcss "^5.0.4"
-
-postcss-discard-empty@^2.0.1:
-  version "2.1.0"
-  resolved "https://registry.yarnpkg.com/postcss-discard-empty/-/postcss-discard-empty-2.1.0.tgz#d2b4bd9d5ced5ebd8dcade7640c7d7cd7f4f92b5"
-  dependencies:
-    postcss "^5.0.14"
-
-postcss-discard-overridden@^0.1.1:
-  version "0.1.1"
-  resolved "https://registry.yarnpkg.com/postcss-discard-overridden/-/postcss-discard-overridden-0.1.1.tgz#8b1eaf554f686fb288cd874c55667b0aa3668d58"
-  dependencies:
-    postcss "^5.0.16"
-
-postcss-discard-unused@^2.2.1:
-  version "2.2.3"
-  resolved "https://registry.yarnpkg.com/postcss-discard-unused/-/postcss-discard-unused-2.2.3.tgz#bce30b2cc591ffc634322b5fb3464b6d934f4433"
-  dependencies:
-    postcss "^5.0.14"
-    uniqs "^2.0.0"
-
-postcss-extend@^1.0.1:
-  version "1.0.5"
-  resolved "https://registry.yarnpkg.com/postcss-extend/-/postcss-extend-1.0.5.tgz#5ea98bf787ba3cacf4df4609743f80a833b1d0e7"
-  dependencies:
-    postcss "^5.0.4"
-
-postcss-filter-plugins@^2.0.0:
-  version "2.0.2"
-  resolved "https://registry.yarnpkg.com/postcss-filter-plugins/-/postcss-filter-plugins-2.0.2.tgz#6d85862534d735ac420e4a85806e1f5d4286d84c"
-  dependencies:
-    postcss "^5.0.4"
-    uniqid "^4.0.0"
-
-postcss-font-weights@^2.0.1:
-  version "2.0.1"
-  resolved "https://registry.yarnpkg.com/postcss-font-weights/-/postcss-font-weights-2.0.1.tgz#a85dd7b51aa7691b95c9bc0269f412756c91931d"
-  dependencies:
-    css-font-weight-names "^0.2.1"
-    postcss "^5.0.12"
-
-postcss-initial@^1.3.1:
-  version "1.5.3"
-  resolved "https://registry.yarnpkg.com/postcss-initial/-/postcss-initial-1.5.3.tgz#20c3e91c96822ddb1bed49508db96d56bac377d0"
+  resolved "https://registry.yarnpkg.com/pkg-dir/-/pkg-dir-3.0.0.tgz#2749020f239ed990881b1f71210d51eb6523bea3"
+  integrity sha512-/E57AYkoeQ25qkxMj5PBOVgF8Kiu/h7cYS30Z5+R7WaiCCBfLq58ZI/dSeaEKb9WVJV5n/03QwrN3IeWIFllvw==
   dependencies:
-    lodash.template "^4.2.4"
-    postcss "^5.0.19"
+    find-up "^3.0.0"
 
-postcss-inline-svg@^1.4.0:
-  version "1.4.0"
-  resolved "https://registry.yarnpkg.com/postcss-inline-svg/-/postcss-inline-svg-1.4.0.tgz#514651f84ea9aba8526d5d1cf3d89aa43696c274"
-  dependencies:
-    css-select "^1.2.0"
-    dom-serializer "^0.1.0"
-    htmlparser2 "^3.9.0"
-    object-assign "^4.0.1"
-    postcss "^5.0.14"
-    postcss-value-parser "^3.2.3"
-    read-cache "^1.0.0"
-
-postcss-load-config@^1.1.0:
-  version "1.2.0"
-  resolved "https://registry.yarnpkg.com/postcss-load-config/-/postcss-load-config-1.2.0.tgz#539e9afc9ddc8620121ebf9d8c3673e0ce50d28a"
-  dependencies:
-    cosmiconfig "^2.1.0"
-    object-assign "^4.1.0"
-    postcss-load-options "^1.2.0"
-    postcss-load-plugins "^2.3.0"
-
-postcss-load-options@^1.2.0:
-  version "1.2.0"
-  resolved "https://registry.yarnpkg.com/postcss-load-options/-/postcss-load-options-1.2.0.tgz#b098b1559ddac2df04bc0bb375f99a5cfe2b6d8c"
-  dependencies:
-    cosmiconfig "^2.1.0"
-    object-assign "^4.1.0"
-
-postcss-load-plugins@^2.3.0:
-  version "2.3.0"
-  resolved "https://registry.yarnpkg.com/postcss-load-plugins/-/postcss-load-plugins-2.3.0.tgz#745768116599aca2f009fad426b00175049d8d92"
-  dependencies:
-    cosmiconfig "^2.1.1"
-    object-assign "^4.1.0"
-
-postcss-loader@0.11.1:
-  version "0.11.1"
-  resolved "https://registry.yarnpkg.com/postcss-loader/-/postcss-loader-0.11.1.tgz#c4eb0054269ec32695fd5682fbd7e654cdcac636"
-  dependencies:
-    babel-code-frame "^6.11.0"
-    loader-utils "^0.2.15"
-    postcss "^5.1.2"
-
-postcss-media-minmax@^2.1.0:
-  version "2.1.2"
-  resolved "http://registry.npmjs.org/postcss-media-minmax/-/postcss-media-minmax-2.1.2.tgz#444c5cf8926ab5e4fd8a2509e9297e751649cdf8"
-  dependencies:
-    postcss "^5.0.4"
-
-postcss-merge-idents@^2.1.5:
-  version "2.1.7"
-  resolved "https://registry.yarnpkg.com/postcss-merge-idents/-/postcss-merge-idents-2.1.7.tgz#4c5530313c08e1d5b3bbf3d2bbc747e278eea270"
-  dependencies:
-    has "^1.0.1"
-    postcss "^5.0.10"
-    postcss-value-parser "^3.1.1"
-
-postcss-merge-longhand@^2.0.1:
-  version "2.0.1"
-  resolved "https://registry.yarnpkg.com/postcss-merge-longhand/-/postcss-merge-longhand-2.0.1.tgz#ff59b5dec6d586ce2cea183138f55c5876fa9cdc"
-  dependencies:
-    postcss "^5.0.4"
-
-postcss-merge-rules@^2.0.3:
-  version "2.0.11"
-  resolved "https://registry.yarnpkg.com/postcss-merge-rules/-/postcss-merge-rules-2.0.11.tgz#c5d7c8de5056a7377aea0dff2fd83f92cafb9b8a"
-  dependencies:
-    postcss "^5.0.4"
-    vendors "^1.0.0"
-
-postcss-message-helpers@^2.0.0:
-  version "2.0.0"
-  resolved "https://registry.yarnpkg.com/postcss-message-helpers/-/postcss-message-helpers-2.0.0.tgz#a4f2f4fab6e4fe002f0aed000478cdf52f9ba60e"
-
-postcss-minify-font-values@^1.0.2:
-  version "1.0.5"
-  resolved "https://registry.yarnpkg.com/postcss-minify-font-values/-/postcss-minify-font-values-1.0.5.tgz#4b58edb56641eba7c8474ab3526cafd7bbdecb69"
-  dependencies:
-    object-assign "^4.0.1"
-    postcss "^5.0.4"
-    postcss-value-parser "^3.0.2"
-
-postcss-minify-gradients@^1.0.1:
-  version "1.0.5"
-  resolved "https://registry.yarnpkg.com/postcss-minify-gradients/-/postcss-minify-gradients-1.0.5.tgz#5dbda11373703f83cfb4a3ea3881d8d75ff5e6e1"
-  dependencies:
-    postcss "^5.0.12"
-    postcss-value-parser "^3.3.0"
-
-postcss-minify-params@^1.0.4:
-  version "1.0.5"
-  resolved "https://registry.yarnpkg.com/postcss-minify-params/-/postcss-minify-params-1.0.5.tgz#82d602643b8616a61fb3634d7ede0289836d67f9"
-  dependencies:
-    alphanum-sort "^1.0.1"
-    postcss "^5.0.2"
-    postcss-value-parser "^3.0.2"
-    uniqs "^2.0.0"
-
-postcss-minify-selectors@^2.0.4:
-  version "2.0.7"
-  resolved "https://registry.yarnpkg.com/postcss-minify-selectors/-/postcss-minify-selectors-2.0.7.tgz#bfb9248fe14db33770f036572de6b4897c48d81c"
-  dependencies:
-    alphanum-sort "^1.0.2"
-    has "^1.0.1"
-    postcss "^5.0.14"
-    postcss-selector-parser "^2.0.0"
-
-postcss-mixins@^2.1.0:
-  version "2.1.1"
-  resolved "https://registry.yarnpkg.com/postcss-mixins/-/postcss-mixins-2.1.1.tgz#b141a0803efa8e2d744867f8d91596890cf9241b"
+please-upgrade-node@^3.1.1:
+  version "3.2.0"
+  resolved "https://registry.yarnpkg.com/please-upgrade-node/-/please-upgrade-node-3.2.0.tgz#aeddd3f994c933e4ad98b99d9a556efa0e2fe942"
+  integrity sha512-gQR3WpIgNIKwBMVLkpMUeR3e1/E1y42bqDQZfql+kDeXd8COYfM8PQA4X6y7a8u9Ua9FHmsrrmirW2vHs45hWg==
   dependencies:
-    globby "^3.0.1"
-    postcss "^5.0.10"
-    postcss-simple-vars "^1.0.1"
+    semver-compare "^1.0.0"
 
-postcss-modules-extract-imports@^1.0.0:
+plugin-error@^1.0.1:
   version "1.0.1"
-  resolved "https://registry.yarnpkg.com/postcss-modules-extract-imports/-/postcss-modules-extract-imports-1.0.1.tgz#8fb3fef9a6dd0420d3f6d4353cf1ff73f2b2a341"
-  dependencies:
-    postcss "^5.0.4"
-
-postcss-modules-local-by-default@^1.0.1:
-  version "1.1.1"
-  resolved "https://registry.yarnpkg.com/postcss-modules-local-by-default/-/postcss-modules-local-by-default-1.1.1.tgz#29a10673fa37d19251265ca2ba3150d9040eb4ce"
+  resolved "https://registry.yarnpkg.com/plugin-error/-/plugin-error-1.0.1.tgz#77016bd8919d0ac377fdcdd0322328953ca5781c"
+  integrity sha512-L1zP0dk7vGweZME2i+EeakvUNqSrdiI3F91TwEoYiGrAfUXmVv6fJIq4g82PAXxNsWOp0J7ZqQy/3Szz0ajTxA==
   dependencies:
-    css-selector-tokenizer "^0.6.0"
-    postcss "^5.0.4"
+    ansi-colors "^1.0.1"
+    arr-diff "^4.0.0"
+    arr-union "^3.1.0"
+    extend-shallow "^3.0.2"
 
-postcss-modules-scope@^1.0.0:
-  version "1.0.2"
-  resolved "https://registry.yarnpkg.com/postcss-modules-scope/-/postcss-modules-scope-1.0.2.tgz#ff977395e5e06202d7362290b88b1e8cd049de29"
-  dependencies:
-    css-selector-tokenizer "^0.6.0"
-    postcss "^5.0.4"
+pluralize@^7.0.0:
+  version "7.0.0"
+  resolved "https://registry.yarnpkg.com/pluralize/-/pluralize-7.0.0.tgz#298b89df8b93b0221dbf421ad2b1b1ea23fc6777"
+  integrity sha512-ARhBOdzS3e41FbkW/XWrTEtukqqLoK5+Z/4UeDaLuSW+39JPeFgs4gCGqsrJHVZX0fUrx//4OF0K1CUGwlIFow==
 
-postcss-modules-values@^1.1.0:
-  version "1.2.2"
-  resolved "https://registry.yarnpkg.com/postcss-modules-values/-/postcss-modules-values-1.2.2.tgz#f0e7d476fe1ed88c5e4c7f97533a3e772ad94ca1"
+portfinder@^1.0.9:
+  version "1.0.20"
+  resolved "https://registry.yarnpkg.com/portfinder/-/portfinder-1.0.20.tgz#bea68632e54b2e13ab7b0c4775e9b41bf270e44a"
+  integrity sha512-Yxe4mTyDzTd59PZJY4ojZR8F+E5e97iq2ZOHPz3HDgSvYC5siNad2tLooQ5y5QHyQhc3xVqvyk/eNA3wuoa7Sw==
   dependencies:
-    icss-replace-symbols "^1.0.2"
-    postcss "^5.0.14"
+    async "^1.5.2"
+    debug "^2.2.0"
+    mkdirp "0.5.x"
 
-postcss-neat@^2.5.2:
-  version "2.5.2"
-  resolved "https://registry.yarnpkg.com/postcss-neat/-/postcss-neat-2.5.2.tgz#3943f2dcf5f4182d2fcb33fd6be2fcbee8e6e158"
-  dependencies:
-    babel-polyfill "^6.7.4"
-    postcss "^5.0.19"
+posix-character-classes@^0.1.0:
+  version "0.1.1"
+  resolved "https://registry.yarnpkg.com/posix-character-classes/-/posix-character-classes-0.1.1.tgz#01eac0fe3b5af71a2a6c02feabb8c1fef7e00eab"
+  integrity sha1-AerA/jta9xoqbAL+q7jB/vfgDqs=
 
-postcss-nested@^1.0.0:
-  version "1.0.0"
-  resolved "https://registry.yarnpkg.com/postcss-nested/-/postcss-nested-1.0.0.tgz#d136bd4b576bd5632df142c12b2198a9ccf794df"
+postcss-calc@^7.0.1:
+  version "7.0.1"
+  resolved "https://registry.yarnpkg.com/postcss-calc/-/postcss-calc-7.0.1.tgz#36d77bab023b0ecbb9789d84dcb23c4941145436"
+  integrity sha512-oXqx0m6tb4N3JGdmeMSc/i91KppbYsFZKdH0xMOqK8V1rJlzrKlTdokz8ozUXLVejydRN6u2IddxpcijRj2FqQ==
   dependencies:
-    postcss "^5.0.2"
+    css-unit-converter "^1.1.1"
+    postcss "^7.0.5"
+    postcss-selector-parser "^5.0.0-rc.4"
+    postcss-value-parser "^3.3.1"
 
-postcss-nesting@^2.0.6:
-  version "2.3.1"
-  resolved "https://registry.yarnpkg.com/postcss-nesting/-/postcss-nesting-2.3.1.tgz#94a6b6a4ef707fbec20a87fee5c957759b4e01cf"
+postcss-colormin@^4.0.3:
+  version "4.0.3"
+  resolved "https://registry.yarnpkg.com/postcss-colormin/-/postcss-colormin-4.0.3.tgz#ae060bce93ed794ac71264f08132d550956bd381"
+  integrity sha512-WyQFAdDZpExQh32j0U0feWisZ0dmOtPl44qYmJKkq9xFWY3p+4qnRzCHeNrkeRhwPHz9bQ3mo0/yVkaply0MNw==
   dependencies:
-    postcss "^5.0.19"
+    browserslist "^4.0.0"
+    color "^3.0.0"
+    has "^1.0.0"
+    postcss "^7.0.0"
+    postcss-value-parser "^3.0.0"
 
-postcss-normalize-charset@^1.1.0:
-  version "1.1.1"
-  resolved "https://registry.yarnpkg.com/postcss-normalize-charset/-/postcss-normalize-charset-1.1.1.tgz#ef9ee71212d7fe759c78ed162f61ed62b5cb93f1"
+postcss-convert-values@^4.0.1:
+  version "4.0.1"
+  resolved "https://registry.yarnpkg.com/postcss-convert-values/-/postcss-convert-values-4.0.1.tgz#ca3813ed4da0f812f9d43703584e449ebe189a7f"
+  integrity sha512-Kisdo1y77KUC0Jmn0OXU/COOJbzM8cImvw1ZFsBgBgMgb1iL23Zs/LXRe3r+EZqM3vGYKdQ2YJVQ5VkJI+zEJQ==
   dependencies:
-    postcss "^5.0.5"
+    postcss "^7.0.0"
+    postcss-value-parser "^3.0.0"
 
-postcss-normalize-url@^3.0.7:
-  version "3.0.7"
-  resolved "https://registry.yarnpkg.com/postcss-normalize-url/-/postcss-normalize-url-3.0.7.tgz#6bd90d0a4bc5a1df22c26ea65c53257dc3829f4e"
+postcss-discard-comments@^4.0.2:
+  version "4.0.2"
+  resolved "https://registry.yarnpkg.com/postcss-discard-comments/-/postcss-discard-comments-4.0.2.tgz#1fbabd2c246bff6aaad7997b2b0918f4d7af4033"
+  integrity sha512-RJutN259iuRf3IW7GZyLM5Sw4GLTOH8FmsXBnv8Ab/Tc2k4SR4qbV4DNbyyY4+Sjo362SyDmW2DQ7lBSChrpkg==
   dependencies:
-    is-absolute-url "^2.0.0"
-    normalize-url "^1.4.0"
-    postcss "^5.0.14"
-    postcss-value-parser "^3.2.3"
+    postcss "^7.0.0"
 
-postcss-ordered-values@^2.1.0:
-  version "2.2.2"
-  resolved "https://registry.yarnpkg.com/postcss-ordered-values/-/postcss-ordered-values-2.2.2.tgz#be8b511741fab2dac8e614a2302e9d10267b0771"
+postcss-discard-duplicates@^4.0.2:
+  version "4.0.2"
+  resolved "https://registry.yarnpkg.com/postcss-discard-duplicates/-/postcss-discard-duplicates-4.0.2.tgz#3fe133cd3c82282e550fc9b239176a9207b784eb"
+  integrity sha512-ZNQfR1gPNAiXZhgENFfEglF93pciw0WxMkJeVmw8eF+JZBbMD7jp6C67GqJAXVZP2BWbOztKfbsdmMp/k8c6oQ==
   dependencies:
-    postcss "^5.0.4"
-    postcss-value-parser "^3.0.1"
+    postcss "^7.0.0"
 
-postcss-partial-import@^1.3.0:
-  version "1.3.0"
-  resolved "https://registry.yarnpkg.com/postcss-partial-import/-/postcss-partial-import-1.3.0.tgz#2f4b773a76c7b0a69b389dcf475c4d362d0d2576"
+postcss-discard-empty@^4.0.1:
+  version "4.0.1"
+  resolved "https://registry.yarnpkg.com/postcss-discard-empty/-/postcss-discard-empty-4.0.1.tgz#c8c951e9f73ed9428019458444a02ad90bb9f765"
+  integrity sha512-B9miTzbznhDjTfjvipfHoqbWKwd0Mj+/fL5s1QOz06wufguil+Xheo4XpOnc4NqKYBCNqqEzgPv2aPBIJLox0w==
   dependencies:
-    fs-extra "^0.24.0"
-    fs-promise "^0.3.1"
-    object-assign "^4.0.1"
-    postcss "^5.0.5"
-    string-hash "^1.1.0"
+    postcss "^7.0.0"
 
-postcss-partial-import@^2.1.0:
-  version "2.1.0"
-  resolved "https://registry.yarnpkg.com/postcss-partial-import/-/postcss-partial-import-2.1.0.tgz#09edaf13d78f39ee4f2a62e0fef6193b003853f3"
+postcss-discard-overridden@^4.0.1:
+  version "4.0.1"
+  resolved "https://registry.yarnpkg.com/postcss-discard-overridden/-/postcss-discard-overridden-4.0.1.tgz#652aef8a96726f029f5e3e00146ee7a4e755ff57"
+  integrity sha512-IYY2bEDD7g1XM1IDEsUT4//iEYCxAmP5oDSFMVU/JVvT7gh+l4fmjciLqGgwjdWpQIdb0Che2VX00QObS5+cTg==
   dependencies:
-    fs-extra "^0.30.0"
-    fs-promise "^0.5.0"
-    object-assign "^4.1.0"
-    postcss "^5.0.21"
-    resolve "^1.1.7"
+    postcss "^7.0.0"
 
-postcss-property-lookup@^1.1.3:
-  version "1.2.1"
-  resolved "https://registry.yarnpkg.com/postcss-property-lookup/-/postcss-property-lookup-1.2.1.tgz#30450a1361b7aae758bbedd5201fbe057bb8270b"
+postcss-merge-longhand@^4.0.11:
+  version "4.0.11"
+  resolved "https://registry.yarnpkg.com/postcss-merge-longhand/-/postcss-merge-longhand-4.0.11.tgz#62f49a13e4a0ee04e7b98f42bb16062ca2549e24"
+  integrity sha512-alx/zmoeXvJjp7L4mxEMjh8lxVlDFX1gqWHzaaQewwMZiVhLo42TEClKaeHbRf6J7j82ZOdTJ808RtN0ZOZwvw==
   dependencies:
-    object-assign "^4.0.1"
-    postcss "^5.0.4"
-    tcomb "^2.5.1"
+    css-color-names "0.0.4"
+    postcss "^7.0.0"
+    postcss-value-parser "^3.0.0"
+    stylehacks "^4.0.0"
 
-postcss-pseudo-class-any-link@^1.0.0:
-  version "1.0.0"
-  resolved "https://registry.yarnpkg.com/postcss-pseudo-class-any-link/-/postcss-pseudo-class-any-link-1.0.0.tgz#903239196401d335fe73ac756186fa62e693af26"
-  dependencies:
-    postcss "^5.0.3"
-    postcss-selector-parser "^1.1.4"
+postcss-merge-rules@^4.0.3:
+  version "4.0.3"
+  resolved "https://registry.yarnpkg.com/postcss-merge-rules/-/postcss-merge-rules-4.0.3.tgz#362bea4ff5a1f98e4075a713c6cb25aefef9a650"
+  integrity sha512-U7e3r1SbvYzO0Jr3UT/zKBVgYYyhAz0aitvGIYOYK5CPmkNih+WDSsS5tvPrJ8YMQYlEMvsZIiqmn7HdFUaeEQ==
+  dependencies:
+    browserslist "^4.0.0"
+    caniuse-api "^3.0.0"
+    cssnano-util-same-parent "^4.0.0"
+    postcss "^7.0.0"
+    postcss-selector-parser "^3.0.0"
+    vendors "^1.0.0"
 
-postcss-reduce-idents@^2.2.2:
-  version "2.3.1"
-  resolved "https://registry.yarnpkg.com/postcss-reduce-idents/-/postcss-reduce-idents-2.3.1.tgz#024e8e219f52773313408573db9645ba62d2d2fe"
+postcss-minify-font-values@^4.0.2:
+  version "4.0.2"
+  resolved "https://registry.yarnpkg.com/postcss-minify-font-values/-/postcss-minify-font-values-4.0.2.tgz#cd4c344cce474343fac5d82206ab2cbcb8afd5a6"
+  integrity sha512-j85oO6OnRU9zPf04+PZv1LYIYOprWm6IA6zkXkrJXyRveDEuQggG6tvoy8ir8ZwjLxLuGfNkCZEQG7zan+Hbtg==
   dependencies:
-    postcss "^5.0.4"
-    postcss-value-parser "^3.0.2"
+    postcss "^7.0.0"
+    postcss-value-parser "^3.0.0"
 
-postcss-reduce-initial@^1.0.0:
-  version "1.0.0"
-  resolved "https://registry.yarnpkg.com/postcss-reduce-initial/-/postcss-reduce-initial-1.0.0.tgz#8f739b938289ef2e48936d7101783e4741ca9bbb"
+postcss-minify-gradients@^4.0.2:
+  version "4.0.2"
+  resolved "https://registry.yarnpkg.com/postcss-minify-gradients/-/postcss-minify-gradients-4.0.2.tgz#93b29c2ff5099c535eecda56c4aa6e665a663471"
+  integrity sha512-qKPfwlONdcf/AndP1U8SJ/uzIJtowHlMaSioKzebAXSG4iJthlWC9iSWznQcX4f66gIWX44RSA841HTHj3wK+Q==
   dependencies:
-    postcss "^5.0.4"
+    cssnano-util-get-arguments "^4.0.0"
+    is-color-stop "^1.0.0"
+    postcss "^7.0.0"
+    postcss-value-parser "^3.0.0"
 
-postcss-reduce-transforms@^1.0.3:
-  version "1.0.4"
-  resolved "https://registry.yarnpkg.com/postcss-reduce-transforms/-/postcss-reduce-transforms-1.0.4.tgz#ff76f4d8212437b31c298a42d2e1444025771ae1"
-  dependencies:
-    has "^1.0.1"
-    postcss "^5.0.8"
-    postcss-value-parser "^3.0.1"
+postcss-minify-params@^4.0.2:
+  version "4.0.2"
+  resolved "https://registry.yarnpkg.com/postcss-minify-params/-/postcss-minify-params-4.0.2.tgz#6b9cef030c11e35261f95f618c90036d680db874"
+  integrity sha512-G7eWyzEx0xL4/wiBBJxJOz48zAKV2WG3iZOqVhPet/9geefm/Px5uo1fzlHu+DOjT+m0Mmiz3jkQzVHe6wxAWg==
+  dependencies:
+    alphanum-sort "^1.0.0"
+    browserslist "^4.0.0"
+    cssnano-util-get-arguments "^4.0.0"
+    postcss "^7.0.0"
+    postcss-value-parser "^3.0.0"
+    uniqs "^2.0.0"
 
-postcss-salad@^1.0.8:
-  version "1.0.8"
-  resolved "https://registry.yarnpkg.com/postcss-salad/-/postcss-salad-1.0.8.tgz#ffa87b5fa394821d9608f68da5a14d13ea4c5059"
-  dependencies:
-    autoprefixer "^6.0.2"
-    caniuse-api "^1.3.2"
-    chalk "^1.1.1"
-    pixrem "^3.0.0"
-    postcss "^5.0.5"
-    postcss-calc "^5.0.0"
-    postcss-color-function "^2.0.1"
-    postcss-css-reset "^1.0.2"
-    postcss-initial "^1.3.1"
-    postcss-inline-svg "^1.4.0"
-    postcss-neat "^2.5.2"
-    postcss-partial-import "^2.1.0"
-    postcss-pseudo-class-any-link "^1.0.0"
-    postcss-sass-color-functions "^1.1.0"
-    postcss-scss "^0.1.7"
-    postcss-shape "^0.0.1"
-    postcss-short "^1.4.0"
-    postcss-url "^5.1.2"
-    postcss-utils "^1.0.1"
-    precss "^1.4.0"
-    saladcss-bem "^0.0.1"
-
-postcss-sass-color-functions@^1.1.0:
-  version "1.1.0"
-  resolved "https://registry.yarnpkg.com/postcss-sass-color-functions/-/postcss-sass-color-functions-1.1.0.tgz#6ed267fd9ffe8008332d3ad6ccb7f0a9e9e8f1e9"
+postcss-minify-selectors@^4.0.2:
+  version "4.0.2"
+  resolved "https://registry.yarnpkg.com/postcss-minify-selectors/-/postcss-minify-selectors-4.0.2.tgz#e2e5eb40bfee500d0cd9243500f5f8ea4262fbd8"
+  integrity sha512-D5S1iViljXBj9kflQo4YutWnJmwm8VvIsU1GeXJGiG9j8CIg9zs4voPMdQDUmIxetUOh60VilsNzCiAFTOqu3g==
   dependencies:
-    balanced-match "^0.1.0"
-    color "^0.11.1"
-    postcss "^5.0.4"
-    postcss-message-helpers "^2.0.0"
+    alphanum-sort "^1.0.0"
+    has "^1.0.0"
+    postcss "^7.0.0"
+    postcss-selector-parser "^3.0.0"
 
-postcss-scss@^0.1.7:
-  version "0.1.9"
-  resolved "https://registry.yarnpkg.com/postcss-scss/-/postcss-scss-0.1.9.tgz#7606caff64bb4b34b7605ab749574cf78d886b08"
+postcss-modules-extract-imports@^2.0.0:
+  version "2.0.0"
+  resolved "https://registry.yarnpkg.com/postcss-modules-extract-imports/-/postcss-modules-extract-imports-2.0.0.tgz#818719a1ae1da325f9832446b01136eeb493cd7e"
+  integrity sha512-LaYLDNS4SG8Q5WAWqIJgdHPJrDDr/Lv775rMBFUbgjTz6j34lUznACHcdRWroPvXANP2Vj7yNK57vp9eFqzLWQ==
   dependencies:
-    postcss "^5.1.0"
+    postcss "^7.0.5"
 
-postcss-selector-matches@^2.0.0:
+postcss-modules-local-by-default@^2.0.3:
   version "2.0.5"
-  resolved "https://registry.yarnpkg.com/postcss-selector-matches/-/postcss-selector-matches-2.0.5.tgz#fa0f43be57b68e77aa4cd11807023492a131027f"
+  resolved "https://registry.yarnpkg.com/postcss-modules-local-by-default/-/postcss-modules-local-by-default-2.0.5.tgz#7f387f68f5555598068e4d6d1ea0b7d6fa984272"
+  integrity sha512-iFgxlCAVLno5wIJq+4hyuOmc4VjZEZxzpdeuZcBytLNWEK5Bx2oRF9PPcAz5TALbaFvrZm8sJYtJ3hV+tMSEIg==
   dependencies:
-    balanced-match "^0.4.2"
-    postcss "^5.0.0"
+    css-selector-tokenizer "^0.7.0"
+    postcss "^7.0.6"
+    postcss-value-parser "^3.3.1"
 
-postcss-selector-not@^2.0.0:
-  version "2.0.0"
-  resolved "https://registry.yarnpkg.com/postcss-selector-not/-/postcss-selector-not-2.0.0.tgz#c73ad21a3f75234bee7fee269e154fd6a869798d"
+postcss-modules-scope@^2.0.0:
+  version "2.0.1"
+  resolved "https://registry.yarnpkg.com/postcss-modules-scope/-/postcss-modules-scope-2.0.1.tgz#2c0f2394cde4cd09147db054c68917e38f6d43a4"
+  integrity sha512-7+6k9c3/AuZ5c596LJx9n923A/j3nF3ormewYBF1RrIQvjvjXe1xE8V8A1KFyFwXbvnshT6FBZFX0k/F1igneg==
   dependencies:
-    balanced-match "^0.2.0"
-    postcss "^5.0.0"
+    css-selector-tokenizer "^0.7.0"
+    postcss "^7.0.6"
 
-postcss-selector-parser@^1.1.4:
-  version "1.3.3"
-  resolved "https://registry.yarnpkg.com/postcss-selector-parser/-/postcss-selector-parser-1.3.3.tgz#d2ee19df7a64f8ef21c1a71c86f7d4835c88c281"
+postcss-modules-values@^2.0.0:
+  version "2.0.0"
+  resolved "https://registry.yarnpkg.com/postcss-modules-values/-/postcss-modules-values-2.0.0.tgz#479b46dc0c5ca3dc7fa5270851836b9ec7152f64"
+  integrity sha512-Ki7JZa7ff1N3EIMlPnGTZfUMe69FFwiQPnVSXC9mnn3jozCRBYIxiZd44yJOV2AmabOo4qFf8s0dC/+lweG7+w==
   dependencies:
-    flatten "^1.0.2"
-    indexes-of "^1.0.1"
-    uniq "^1.0.1"
+    icss-replace-symbols "^1.1.0"
+    postcss "^7.0.6"
 
-postcss-selector-parser@^2.0.0:
-  version "2.2.2"
-  resolved "https://registry.yarnpkg.com/postcss-selector-parser/-/postcss-selector-parser-2.2.2.tgz#3d70f5adda130da51c7c0c2fc023f56b1374fe08"
+postcss-normalize-charset@^4.0.1:
+  version "4.0.1"
+  resolved "https://registry.yarnpkg.com/postcss-normalize-charset/-/postcss-normalize-charset-4.0.1.tgz#8b35add3aee83a136b0471e0d59be58a50285dd4"
+  integrity sha512-gMXCrrlWh6G27U0hF3vNvR3w8I1s2wOBILvA87iNXaPvSNo5uZAMYsZG7XjCUf1eVxuPfyL4TJ7++SGZLc9A3g==
   dependencies:
-    flatten "^1.0.2"
-    indexes-of "^1.0.1"
-    uniq "^1.0.1"
+    postcss "^7.0.0"
 
-postcss-shape@^0.0.1:
-  version "0.0.1"
-  resolved "https://registry.yarnpkg.com/postcss-shape/-/postcss-shape-0.0.1.tgz#a3747b1c1e006a1b18c071ff0e980632e8a0be85"
+postcss-normalize-display-values@^4.0.2:
+  version "4.0.2"
+  resolved "https://registry.yarnpkg.com/postcss-normalize-display-values/-/postcss-normalize-display-values-4.0.2.tgz#0dbe04a4ce9063d4667ed2be476bb830c825935a"
+  integrity sha512-3F2jcsaMW7+VtRMAqf/3m4cPFhPD3EFRgNs18u+k3lTJJlVe7d0YPO+bnwqo2xg8YiRpDXJI2u8A0wqJxMsQuQ==
   dependencies:
-    postcss "^5.0.19"
+    cssnano-util-get-match "^4.0.0"
+    postcss "^7.0.0"
+    postcss-value-parser "^3.0.0"
 
-postcss-short-border@^1.0.0:
-  version "1.0.0"
-  resolved "https://registry.yarnpkg.com/postcss-short-border/-/postcss-short-border-1.0.0.tgz#7519868e9863ccd69ad5af4b986e1d99f1f5bee4"
+postcss-normalize-positions@^4.0.2:
+  version "4.0.2"
+  resolved "https://registry.yarnpkg.com/postcss-normalize-positions/-/postcss-normalize-positions-4.0.2.tgz#05f757f84f260437378368a91f8932d4b102917f"
+  integrity sha512-Dlf3/9AxpxE+NF1fJxYDeggi5WwV35MXGFnnoccP/9qDtFrTArZ0D0R+iKcg5WsUd8nUYMIl8yXDCtcrT8JrdA==
   dependencies:
-    postcss "^5.0.8"
+    cssnano-util-get-arguments "^4.0.0"
+    has "^1.0.0"
+    postcss "^7.0.0"
+    postcss-value-parser "^3.0.0"
 
-postcss-short-color@^1.0.0:
-  version "1.0.0"
-  resolved "https://registry.yarnpkg.com/postcss-short-color/-/postcss-short-color-1.0.0.tgz#c7b79c9b4b66120dde5f648091ae7d4ba86e3a76"
+postcss-normalize-repeat-style@^4.0.2:
+  version "4.0.2"
+  resolved "https://registry.yarnpkg.com/postcss-normalize-repeat-style/-/postcss-normalize-repeat-style-4.0.2.tgz#c4ebbc289f3991a028d44751cbdd11918b17910c"
+  integrity sha512-qvigdYYMpSuoFs3Is/f5nHdRLJN/ITA7huIoCyqqENJe9PvPmLhNLMu7QTjPdtnVf6OcYYO5SHonx4+fbJE1+Q==
   dependencies:
-    postcss "^5.0.4"
+    cssnano-util-get-arguments "^4.0.0"
+    cssnano-util-get-match "^4.0.0"
+    postcss "^7.0.0"
+    postcss-value-parser "^3.0.0"
 
-postcss-short-data@^1.1.0:
-  version "1.1.0"
-  resolved "https://registry.yarnpkg.com/postcss-short-data/-/postcss-short-data-1.1.0.tgz#4e7ac80a173b6ec4dde0acd8205cd282cb4f8330"
+postcss-normalize-string@^4.0.2:
+  version "4.0.2"
+  resolved "https://registry.yarnpkg.com/postcss-normalize-string/-/postcss-normalize-string-4.0.2.tgz#cd44c40ab07a0c7a36dc5e99aace1eca4ec2690c"
+  integrity sha512-RrERod97Dnwqq49WNz8qo66ps0swYZDSb6rM57kN2J+aoyEAJfZ6bMx0sx/F9TIEX0xthPGCmeyiam/jXif0eA==
   dependencies:
-    postcss "^5.0.12"
+    has "^1.0.0"
+    postcss "^7.0.0"
+    postcss-value-parser "^3.0.0"
 
-postcss-short-font-size@^1.0.1:
-  version "1.0.1"
-  resolved "https://registry.yarnpkg.com/postcss-short-font-size/-/postcss-short-font-size-1.0.1.tgz#7adc71eccfd1d2a8171113a108b95214256c3dd6"
+postcss-normalize-timing-functions@^4.0.2:
+  version "4.0.2"
+  resolved "https://registry.yarnpkg.com/postcss-normalize-timing-functions/-/postcss-normalize-timing-functions-4.0.2.tgz#8e009ca2a3949cdaf8ad23e6b6ab99cb5e7d28d9"
+  integrity sha512-acwJY95edP762e++00Ehq9L4sZCEcOPyaHwoaFOhIwWCDfik6YvqsYNxckee65JHLKzuNSSmAdxwD2Cud1Z54A==
   dependencies:
-    postcss "^5.0.4"
+    cssnano-util-get-match "^4.0.0"
+    postcss "^7.0.0"
+    postcss-value-parser "^3.0.0"
 
-postcss-short-position@^1.0.0:
-  version "1.0.0"
-  resolved "https://registry.yarnpkg.com/postcss-short-position/-/postcss-short-position-1.0.0.tgz#32bf54df3597ed56fe4e1bab216d4759cb2f75de"
+postcss-normalize-unicode@^4.0.1:
+  version "4.0.1"
+  resolved "https://registry.yarnpkg.com/postcss-normalize-unicode/-/postcss-normalize-unicode-4.0.1.tgz#841bd48fdcf3019ad4baa7493a3d363b52ae1cfb"
+  integrity sha512-od18Uq2wCYn+vZ/qCOeutvHjB5jm57ToxRaMeNuf0nWVHaP9Hua56QyMF6fs/4FSUnVIw0CBPsU0K4LnBPwYwg==
   dependencies:
-    postcss "^5.0.5"
+    browserslist "^4.0.0"
+    postcss "^7.0.0"
+    postcss-value-parser "^3.0.0"
 
-postcss-short-size@^1.0.0:
-  version "1.1.0"
-  resolved "https://registry.yarnpkg.com/postcss-short-size/-/postcss-short-size-1.1.0.tgz#4a7c9c5bd9b21f5f68457521b0cfaddb9e1727b1"
+postcss-normalize-url@^4.0.1:
+  version "4.0.1"
+  resolved "https://registry.yarnpkg.com/postcss-normalize-url/-/postcss-normalize-url-4.0.1.tgz#10e437f86bc7c7e58f7b9652ed878daaa95faae1"
+  integrity sha512-p5oVaF4+IHwu7VpMan/SSpmpYxcJMtkGppYf0VbdH5B6hN8YNmVyJLuY9FmLQTzY3fag5ESUUHDqM+heid0UVA==
   dependencies:
-    postcss "^5.0.19"
+    is-absolute-url "^2.0.0"
+    normalize-url "^3.0.0"
+    postcss "^7.0.0"
+    postcss-value-parser "^3.0.0"
 
-postcss-short-spacing@^1.0.0:
-  version "1.0.0"
-  resolved "https://registry.yarnpkg.com/postcss-short-spacing/-/postcss-short-spacing-1.0.0.tgz#cb19037e61213d0c872b486fdb5c601a4ea9571d"
+postcss-normalize-whitespace@^4.0.2:
+  version "4.0.2"
+  resolved "https://registry.yarnpkg.com/postcss-normalize-whitespace/-/postcss-normalize-whitespace-4.0.2.tgz#bf1d4070fe4fcea87d1348e825d8cc0c5faa7d82"
+  integrity sha512-tO8QIgrsI3p95r8fyqKV+ufKlSHh9hMJqACqbv2XknufqEDhDvbguXGBBqxw9nsQoXWf0qOqppziKJKHMD4GtA==
   dependencies:
-    postcss "^5.0.4"
+    postcss "^7.0.0"
+    postcss-value-parser "^3.0.0"
 
-postcss-short-text@^1.1.0:
-  version "1.1.0"
-  resolved "https://registry.yarnpkg.com/postcss-short-text/-/postcss-short-text-1.1.0.tgz#93c4ee645a09262df45c1a7f53421184f0ecb14b"
+postcss-ordered-values@^4.1.2:
+  version "4.1.2"
+  resolved "https://registry.yarnpkg.com/postcss-ordered-values/-/postcss-ordered-values-4.1.2.tgz#0cf75c820ec7d5c4d280189559e0b571ebac0eee"
+  integrity sha512-2fCObh5UanxvSxeXrtLtlwVThBvHn6MQcu4ksNT2tsaV2Fg76R2CV98W7wNSlX+5/pFwEyaDwKLLoEV7uRybAw==
   dependencies:
-    object-assign "^4.0.1"
-    postcss "^5.0.4"
+    cssnano-util-get-arguments "^4.0.0"
+    postcss "^7.0.0"
+    postcss-value-parser "^3.0.0"
 
-postcss-short@^1.4.0:
-  version "1.4.0"
-  resolved "https://registry.yarnpkg.com/postcss-short/-/postcss-short-1.4.0.tgz#20d16ed87d1d6a2ca04ec5eb949ed100dc3c1a2a"
-  dependencies:
-    object-assign "^4.0.1"
-    postcss "^5.0.12"
-    postcss-font-weights "^2.0.1"
-    postcss-short-border "^1.0.0"
-    postcss-short-color "^1.0.0"
-    postcss-short-data "^1.1.0"
-    postcss-short-font-size "^1.0.1"
-    postcss-short-position "^1.0.0"
-    postcss-short-size "^1.0.0"
-    postcss-short-spacing "^1.0.0"
-    postcss-short-text "^1.1.0"
-
-postcss-simple-vars@^1.0.1:
-  version "1.2.0"
-  resolved "https://registry.yarnpkg.com/postcss-simple-vars/-/postcss-simple-vars-1.2.0.tgz#2e6689921144b74114e765353275a3c32143f150"
+postcss-reduce-initial@^4.0.3:
+  version "4.0.3"
+  resolved "https://registry.yarnpkg.com/postcss-reduce-initial/-/postcss-reduce-initial-4.0.3.tgz#7fd42ebea5e9c814609639e2c2e84ae270ba48df"
+  integrity sha512-gKWmR5aUulSjbzOfD9AlJiHCGH6AEVLaM0AV+aSioxUDd16qXP1PCh8d1/BGVvpdWn8k/HiK7n6TjeoXN1F7DA==
   dependencies:
-    postcss "^5.0.13"
+    browserslist "^4.0.0"
+    caniuse-api "^3.0.0"
+    has "^1.0.0"
+    postcss "^7.0.0"
 
-postcss-svgo@^2.1.1:
-  version "2.1.5"
-  resolved "https://registry.yarnpkg.com/postcss-svgo/-/postcss-svgo-2.1.5.tgz#46fc0363f01bab6a36a9abb01c229fcc45363094"
+postcss-reduce-transforms@^4.0.2:
+  version "4.0.2"
+  resolved "https://registry.yarnpkg.com/postcss-reduce-transforms/-/postcss-reduce-transforms-4.0.2.tgz#17efa405eacc6e07be3414a5ca2d1074681d4e29"
+  integrity sha512-EEVig1Q2QJ4ELpJXMZR8Vt5DQx8/mo+dGWSR7vWXqcob2gQLyQGsionYcGKATXvQzMPn6DSN1vTN7yFximdIAg==
   dependencies:
-    is-svg "^2.0.0"
-    postcss "^5.0.14"
-    postcss-value-parser "^3.2.3"
-    svgo "^0.7.0"
+    cssnano-util-get-match "^4.0.0"
+    has "^1.0.0"
+    postcss "^7.0.0"
+    postcss-value-parser "^3.0.0"
 
-postcss-unique-selectors@^2.0.2:
-  version "2.0.2"
-  resolved "https://registry.yarnpkg.com/postcss-unique-selectors/-/postcss-unique-selectors-2.0.2.tgz#981d57d29ddcb33e7b1dfe1fd43b8649f933ca1d"
+postcss-selector-parser@^3.0.0:
+  version "3.1.1"
+  resolved "https://registry.yarnpkg.com/postcss-selector-parser/-/postcss-selector-parser-3.1.1.tgz#4f875f4afb0c96573d5cf4d74011aee250a7e865"
+  integrity sha1-T4dfSvsMllc9XPTXQBGu4lCn6GU=
   dependencies:
-    alphanum-sort "^1.0.1"
-    postcss "^5.0.4"
-    uniqs "^2.0.0"
+    dot-prop "^4.1.1"
+    indexes-of "^1.0.1"
+    uniq "^1.0.1"
 
-postcss-url@^5.1.2:
-  version "5.1.2"
-  resolved "https://registry.yarnpkg.com/postcss-url/-/postcss-url-5.1.2.tgz#98b3165be8d592471cb0caadde2c0d1f832f133e"
+postcss-selector-parser@^5.0.0, postcss-selector-parser@^5.0.0-rc.4:
+  version "5.0.0"
+  resolved "https://registry.yarnpkg.com/postcss-selector-parser/-/postcss-selector-parser-5.0.0.tgz#249044356697b33b64f1a8f7c80922dddee7195c"
+  integrity sha512-w+zLE5Jhg6Liz8+rQOWEAwtwkyqpfnmsinXjXg6cY7YIONZZtgvE0v2O0uhQBs0peNomOJwWRKt6JBfTdTd3OQ==
   dependencies:
-    directory-encoder "^0.7.2"
-    js-base64 "^2.1.5"
-    mime "^1.2.11"
-    minimatch "^3.0.0"
-    mkdirp "^0.5.0"
-    path-is-absolute "^1.0.0"
-    postcss "^5.0.0"
+    cssesc "^2.0.0"
+    indexes-of "^1.0.1"
+    uniq "^1.0.1"
 
-postcss-utils@^1.0.1:
-  version "1.0.2"
-  resolved "https://registry.yarnpkg.com/postcss-utils/-/postcss-utils-1.0.2.tgz#36ca83b78279b5a7aa01d87f7e81f71f4b22ca2a"
+postcss-svgo@^4.0.2:
+  version "4.0.2"
+  resolved "https://registry.yarnpkg.com/postcss-svgo/-/postcss-svgo-4.0.2.tgz#17b997bc711b333bab143aaed3b8d3d6e3d38258"
+  integrity sha512-C6wyjo3VwFm0QgBy+Fu7gCYOkCmgmClghO+pjcxvrcBKtiKt0uCF+hvbMO1fyv5BMImRK90SMb+dwUnfbGd+jw==
   dependencies:
-    humps "^1.1.0"
-    postcss "^5.0.19"
-
-postcss-value-parser@^3.0.1, postcss-value-parser@^3.0.2, postcss-value-parser@^3.1.1, postcss-value-parser@^3.1.2, postcss-value-parser@^3.2.3, postcss-value-parser@^3.3.0:
-  version "3.3.0"
-  resolved "https://registry.yarnpkg.com/postcss-value-parser/-/postcss-value-parser-3.3.0.tgz#87f38f9f18f774a4ab4c8a232f5c5ce8872a9d15"
+    is-svg "^3.0.0"
+    postcss "^7.0.0"
+    postcss-value-parser "^3.0.0"
+    svgo "^1.0.0"
 
-postcss-zindex@^2.0.1:
-  version "2.2.0"
-  resolved "https://registry.yarnpkg.com/postcss-zindex/-/postcss-zindex-2.2.0.tgz#d2109ddc055b91af67fc4cb3b025946639d2af22"
+postcss-unique-selectors@^4.0.1:
+  version "4.0.1"
+  resolved "https://registry.yarnpkg.com/postcss-unique-selectors/-/postcss-unique-selectors-4.0.1.tgz#9446911f3289bfd64c6d680f073c03b1f9ee4bac"
+  integrity sha512-+JanVaryLo9QwZjKrmJgkI4Fn8SBgRO6WXQBJi7KiAVPlmxikB5Jzc4EvXMT2H0/m0RjrVVm9rGNhZddm/8Spg==
   dependencies:
-    has "^1.0.1"
-    postcss "^5.0.4"
+    alphanum-sort "^1.0.0"
+    postcss "^7.0.0"
     uniqs "^2.0.0"
 
-postcss@^5.0.0, postcss@^5.0.10, postcss@^5.0.11, postcss@^5.0.12, postcss@^5.0.13, postcss@^5.0.14, postcss@^5.0.16, postcss@^5.0.19, postcss@^5.0.2, postcss@^5.0.21, postcss@^5.0.3, postcss@^5.0.4, postcss@^5.0.5, postcss@^5.0.6, postcss@^5.0.8, postcss@^5.1.0, postcss@^5.1.2, postcss@^5.2.0, postcss@^5.2.6:
-  version "5.2.6"
-  resolved "https://registry.yarnpkg.com/postcss/-/postcss-5.2.6.tgz#a252cd67cd52585035f17e9ad12b35137a7bdd9e"
-  dependencies:
-    chalk "^1.1.3"
-    js-base64 "^2.1.9"
-    source-map "^0.5.6"
-    supports-color "^3.1.2"
+postcss-value-parser@^3.0.0, postcss-value-parser@^3.3.0, postcss-value-parser@^3.3.1:
+  version "3.3.1"
+  resolved "https://registry.yarnpkg.com/postcss-value-parser/-/postcss-value-parser-3.3.1.tgz#9ff822547e2893213cf1c30efa51ac5fd1ba8281"
+  integrity sha512-pISE66AbVkp4fDQ7VHBwRNXzAAKJjw4Vw7nWI/+Q3vuly7SNfgYXvm6i5IgFylHGK5sP/xHAbB7N49OS4gWNyQ==
 
-postcss@^6.0.1, postcss@^6.0.6, postcss@^6.0.8:
-  version "6.0.9"
-  resolved "https://registry.yarnpkg.com/postcss/-/postcss-6.0.9.tgz#54819766784a51c65b1ec4d54c2f93765438c35a"
+postcss@^7.0.0, postcss@^7.0.1, postcss@^7.0.14, postcss@^7.0.2, postcss@^7.0.5, postcss@^7.0.6:
+  version "7.0.14"
+  resolved "https://registry.yarnpkg.com/postcss/-/postcss-7.0.14.tgz#4527ed6b1ca0d82c53ce5ec1a2041c2346bbd6e5"
+  integrity sha512-NsbD6XUUMZvBxtQAJuWDJeeC4QFsmWsfozWxCJPWf3M55K9iu2iMDaKqyoOdTJ1R4usBXuxlVFAIo8rZPQD4Bg==
   dependencies:
-    chalk "^2.1.0"
-    source-map "^0.5.6"
-    supports-color "^4.2.1"
-
-precss@^1.4.0:
-  version "1.4.0"
-  resolved "https://registry.yarnpkg.com/precss/-/precss-1.4.0.tgz#8d7c3ae70f10a00a3955287f85a66e0f8b31cda3"
-  dependencies:
-    postcss "^5.0.10"
-    postcss-advanced-variables "1.2.2"
-    postcss-atroot "^0.1.2"
-    postcss-color-function "^2.0.0"
-    postcss-custom-media "^5.0.0"
-    postcss-custom-properties "^5.0.0"
-    postcss-custom-selectors "^3.0.0"
-    postcss-extend "^1.0.1"
-    postcss-media-minmax "^2.1.0"
-    postcss-mixins "^2.1.0"
-    postcss-nested "^1.0.0"
-    postcss-nesting "^2.0.6"
-    postcss-partial-import "^1.3.0"
-    postcss-property-lookup "^1.1.3"
-    postcss-selector-matches "^2.0.0"
-    postcss-selector-not "^2.0.0"
+    chalk "^2.4.2"
+    source-map "^0.6.1"
+    supports-color "^6.1.0"
 
 prelude-ls@~1.1.2:
   version "1.1.2"
-  resolved "http://registry.npm.taobao.org/prelude-ls/download/prelude-ls-1.1.2.tgz#21932a549f5e52ffd9a827f570e04be62a97da54"
+  resolved "https://registry.yarnpkg.com/prelude-ls/-/prelude-ls-1.1.2.tgz#21932a549f5e52ffd9a827f570e04be62a97da54"
+  integrity sha1-IZMqVJ9eUv/ZqCf1cOBL5iqX2lQ=
 
-prepend-http@^1.0.0:
+prepend-http@^1.0.1:
   version "1.0.4"
-  resolved "https://registry.yarnpkg.com/prepend-http/-/prepend-http-1.0.4.tgz#d4f4562b0ce3696e41ac52d0e002e57a635dc6dc"
+  resolved "https://registry.npm.taobao.org/prepend-http/download/prepend-http-1.0.4.tgz#d4f4562b0ce3696e41ac52d0e002e57a635dc6dc"
+  integrity sha1-1PRWKwzjaW5BrFLQ4ALlemNdxtw=
 
 preserve@^0.2.0:
   version "0.2.0"
   resolved "https://registry.yarnpkg.com/preserve/-/preserve-0.2.0.tgz#815ed1f6ebc65926f865b310c0713bcb3315ce4b"
+  integrity sha1-gV7R9uvGWSb4ZbMQwHE7yzMVzks=
 
-prettier@^1.7.0:
-  version "1.7.4"
-  resolved "https://registry.yarnpkg.com/prettier/-/prettier-1.7.4.tgz#5e8624ae9363c80f95ec644584ecdf55d74f93fa"
+prettier@1.16.3:
+  version "1.16.3"
+  resolved "https://registry.yarnpkg.com/prettier/-/prettier-1.16.3.tgz#8c62168453badef702f34b45b6ee899574a6a65d"
+  integrity sha512-kn/GU6SMRYPxUakNXhpP0EedT/KmaPzr0H5lIsDogrykbaxOpOfAFfk5XA7DZrJyMAv1wlMV3CPcZruGXVVUZw==
 
 pretty-error@^2.0.2:
-  version "2.0.2"
-  resolved "https://registry.yarnpkg.com/pretty-error/-/pretty-error-2.0.2.tgz#a7db19cbb529ca9f0af3d3a2f77d5caf8e5dec23"
+  version "2.1.1"
+  resolved "https://registry.yarnpkg.com/pretty-error/-/pretty-error-2.1.1.tgz#5f4f87c8f91e5ae3f3ba87ab4cf5e03b1a17f1a3"
+  integrity sha1-X0+HyPkeWuPzuoerTPXgOxoX8aM=
   dependencies:
-    renderkid "~2.0.0"
+    renderkid "^2.0.1"
     utila "~0.4"
 
 pretty-hrtime@^1.0.0:
   version "1.0.3"
   resolved "https://registry.yarnpkg.com/pretty-hrtime/-/pretty-hrtime-1.0.3.tgz#b7e3ea42435a4c9b2759d99e0f201eb195802ee1"
+  integrity sha1-t+PqQkNaTJsnWdmeDyAesZWALuE=
 
-private@^0.1.6, private@~0.1.5:
-  version "0.1.6"
-  resolved "https://registry.yarnpkg.com/private/-/private-0.1.6.tgz#55c6a976d0f9bafb9924851350fe47b9b5fbb7c1"
+private@^0.1.6, private@^0.1.8:
+  version "0.1.8"
+  resolved "https://registry.yarnpkg.com/private/-/private-0.1.8.tgz#2381edb3689f7a53d653190060fcf822d2f368ff"
+  integrity sha512-VvivMrbvd2nKkiG38qjULzlc+4Vx4wm/whI9pQD35YrARNnhxeiRktSOhSukRLFNlzg6Br/cJPet5J/u19r/mg==
 
-process-nextick-args@~1.0.6:
+process-nextick-args@^1.0.7:
   version "1.0.7"
-  resolved "http://registry.npm.taobao.org/process-nextick-args/download/process-nextick-args-1.0.7.tgz#150e20b756590ad3f91093f25a4f2ad8bff30ba3"
+  resolved "https://registry.yarnpkg.com/process-nextick-args/-/process-nextick-args-1.0.7.tgz#150e20b756590ad3f91093f25a4f2ad8bff30ba3"
+  integrity sha1-FQ4gt1ZZCtP5EJPyWk8q2L/zC6M=
 
-process@^0.11.0:
-  version "0.11.9"
-  resolved "https://registry.yarnpkg.com/process/-/process-0.11.9.tgz#7bd5ad21aa6253e7da8682264f1e11d11c0318c1"
+process-nextick-args@^2.0.0, process-nextick-args@~2.0.0:
+  version "2.0.0"
+  resolved "https://registry.yarnpkg.com/process-nextick-args/-/process-nextick-args-2.0.0.tgz#a37d732f4271b4ab1ad070d35508e8290788ffaa"
+  integrity sha512-MtEC1TqN0EU5nephaJ4rAtThHtC86dNN9qCuEhtshvpVBkAW5ZO7BASN9REnF9eoXGcRub+pFuKEpOHE+HbEMw==
+
+process@^0.11.10:
+  version "0.11.10"
+  resolved "https://registry.yarnpkg.com/process/-/process-0.11.10.tgz#7332300e840161bda3e69a1d1d91a7d4bc16f182"
+  integrity sha1-czIwDoQBYb2j5podHZGn1LwW8YI=
 
 process@~0.5.1:
   version "0.5.2"
   resolved "https://registry.yarnpkg.com/process/-/process-0.5.2.tgz#1638d8a8e34c2f440a91db95ab9aeb677fc185cf"
+  integrity sha1-FjjYqONML0QKkduVq5rrZ3/Bhc8=
 
 progress-bar-webpack-plugin@^1.11.0:
   version "1.11.0"
-  resolved "http://registry.npm.taobao.org/progress-bar-webpack-plugin/download/progress-bar-webpack-plugin-1.11.0.tgz#4f801288443c55ec029b20cbfdcbf3e1dc17f852"
+  resolved "https://registry.yarnpkg.com/progress-bar-webpack-plugin/-/progress-bar-webpack-plugin-1.11.0.tgz#4f801288443c55ec029b20cbfdcbf3e1dc17f852"
+  integrity sha512-XT6r8strD6toU0ZVip25baJINo7uE4BD4H8d4vhOV4GIK5PvNNky8GYJ2wMmVoYP8eo/sSmtNWn0Vw7zWDDE3A==
   dependencies:
     chalk "^1.1.1"
     object.assign "^4.0.1"
@@ -6322,314 +9712,480 @@ progress-bar-webpack-plugin@^1.11.0:
 progress@^1.1.8:
   version "1.1.8"
   resolved "https://registry.yarnpkg.com/progress/-/progress-1.1.8.tgz#e260c78f6161cdd9b0e56cc3e0a85de17c7a57be"
+  integrity sha1-4mDHj2Fhzdmw5WzD4Khd4Xx6V74=
 
 progress@^2.0.0:
-  version "2.0.0"
-  resolved "http://registry.npm.taobao.org/progress/download/progress-2.0.0.tgz#8a1be366bf8fc23db2bd23f10c6fe920b4389d1f"
+  version "2.0.3"
+  resolved "https://registry.yarnpkg.com/progress/-/progress-2.0.3.tgz#7e8cf8d8f5b8f239c1bc68beb4eb78567d572ef8"
+  integrity sha512-7PiHtLll5LdnKIMw100I+8xJXR5gW2QwWYkT6iJva0bXitZKa/XMrSbdmg3r2Xnaidz9Qumd0VPaMrZlF9V9sA==
 
-proxy-addr@~1.1.2:
-  version "1.1.2"
-  resolved "https://registry.yarnpkg.com/proxy-addr/-/proxy-addr-1.1.2.tgz#b4cc5f22610d9535824c123aef9d3cf73c40ba37"
+promise-inflight@^1.0.1, promise-inflight@~1.0.1:
+  version "1.0.1"
+  resolved "https://registry.yarnpkg.com/promise-inflight/-/promise-inflight-1.0.1.tgz#98472870bf228132fcbdd868129bad12c3c029e3"
+  integrity sha1-mEcocL8igTL8vdhoEputEsPAKeM=
+
+promise-retry@^1.1.1:
+  version "1.1.1"
+  resolved "https://registry.npm.taobao.org/promise-retry/download/promise-retry-1.1.1.tgz#6739e968e3051da20ce6497fb2b50f6911df3d6d"
+  integrity sha1-ZznpaOMFHaIM5kl/srUPaRHfPW0=
   dependencies:
-    forwarded "~0.1.0"
-    ipaddr.js "1.1.1"
+    err-code "^1.0.0"
+    retry "^0.10.0"
 
-prr@~0.0.0:
-  version "0.0.0"
-  resolved "https://registry.yarnpkg.com/prr/-/prr-0.0.0.tgz#1a84b85908325501411853d0081ee3fa86e2926a"
+promzard@^0.3.0:
+  version "0.3.0"
+  resolved "https://registry.npm.taobao.org/promzard/download/promzard-0.3.0.tgz#26a5d6ee8c7dee4cb12208305acfb93ba382a9ee"
+  integrity sha1-JqXW7ox97kyxIggwWs+5O6OCqe4=
+  dependencies:
+    read "1"
+
+proto-list@~1.2.1:
+  version "1.2.4"
+  resolved "https://registry.npm.taobao.org/proto-list/download/proto-list-1.2.4.tgz#212d5bfe1318306a420f6402b8e26ff39647a849"
+  integrity sha1-IS1b/hMYMGpCD2QCuOJv85ZHqEk=
+
+protoduck@^5.0.1:
+  version "5.0.1"
+  resolved "https://registry.npm.taobao.org/protoduck/download/protoduck-5.0.1.tgz#03c3659ca18007b69a50fd82a7ebcc516261151f"
+  integrity sha1-A8NlnKGAB7aaUP2Cp+vMUWJhFR8=
+  dependencies:
+    genfun "^5.0.0"
+
+proxy-addr@~2.0.4:
+  version "2.0.4"
+  resolved "https://registry.yarnpkg.com/proxy-addr/-/proxy-addr-2.0.4.tgz#ecfc733bf22ff8c6f407fa275327b9ab67e48b93"
+  integrity sha512-5erio2h9jp5CHGwcybmxmVqHmnCBZeewlfJ0pex+UW7Qny7OOZXTtH56TGNyBizkgiOwhJtMKrVzDTeKcySZwA==
+  dependencies:
+    forwarded "~0.1.2"
+    ipaddr.js "1.8.0"
+
+prr@~1.0.1:
+  version "1.0.1"
+  resolved "https://registry.yarnpkg.com/prr/-/prr-1.0.1.tgz#d3fc114ba06995a45ec6893f484ceb1d78f5f476"
+  integrity sha1-0/wRS6BplaRexok/SEzrHXj19HY=
 
 pseudomap@^1.0.2:
   version "1.0.2"
-  resolved "http://registry.npm.taobao.org/pseudomap/download/pseudomap-1.0.2.tgz#f052a28da70e618917ef0a8ac34c1ae5a68286b3"
+  resolved "https://registry.yarnpkg.com/pseudomap/-/pseudomap-1.0.2.tgz#f052a28da70e618917ef0a8ac34c1ae5a68286b3"
+  integrity sha1-8FKijacOYYkX7wqKw0wa5aaChrM=
+
+psl@^1.1.24:
+  version "1.1.31"
+  resolved "https://registry.yarnpkg.com/psl/-/psl-1.1.31.tgz#e9aa86d0101b5b105cbe93ac6b784cd547276184"
+  integrity sha512-/6pt4+C+T+wZUieKR620OpzN/LlnNKuWjy1iFLQ/UG35JqHlR/89MP1d96dUfkf6Dne3TuLQzOYEYshJ+Hx8mw==
+
+psl@^1.1.28:
+  version "1.8.0"
+  resolved "https://registry.npm.taobao.org/psl/download/psl-1.8.0.tgz#9326f8bcfb013adcc005fdff056acce020e51c24"
+  integrity sha1-kyb4vPsBOtzABf3/BWrM4CDlHCQ=
 
 public-encrypt@^4.0.0:
-  version "4.0.0"
-  resolved "https://registry.yarnpkg.com/public-encrypt/-/public-encrypt-4.0.0.tgz#39f699f3a46560dd5ebacbca693caf7c65c18cc6"
+  version "4.0.3"
+  resolved "https://registry.yarnpkg.com/public-encrypt/-/public-encrypt-4.0.3.tgz#4fcc9d77a07e48ba7527e7cbe0de33d0701331e0"
+  integrity sha512-zVpa8oKZSz5bTMTFClc1fQOnyyEzpl5ozpi1B5YcvBrdohMjH2rfsBtyXcuNuwjsDIXmBYlF2N5FlJYhR29t8Q==
   dependencies:
     bn.js "^4.1.0"
     browserify-rsa "^4.0.0"
     create-hash "^1.1.0"
     parse-asn1 "^5.0.0"
     randombytes "^2.0.1"
+    safe-buffer "^5.1.2"
+
+pump@^2.0.0:
+  version "2.0.1"
+  resolved "https://registry.yarnpkg.com/pump/-/pump-2.0.1.tgz#12399add6e4cf7526d973cbc8b5ce2e2908b3909"
+  integrity sha512-ruPMNRkN3MHP1cWJc9OWr+T/xDP0jhXYCLfJcBuX54hhfIBnaQmAUMfDcG4DM5UMWByBbJY69QSphm3jtDKIkA==
+  dependencies:
+    end-of-stream "^1.1.0"
+    once "^1.3.1"
+
+pump@^3.0.0:
+  version "3.0.0"
+  resolved "https://registry.yarnpkg.com/pump/-/pump-3.0.0.tgz#b4a2116815bde2f4e1ea602354e8c75565107a64"
+  integrity sha512-LwZy+p3SFs1Pytd/jYct4wpv49HiYCqd9Rlc5ZVdk0V+8Yzv6jR5Blk3TRmPL1ft69TxP0IMZGJ+WPFU2BFhww==
+  dependencies:
+    end-of-stream "^1.1.0"
+    once "^1.3.1"
+
+pumpify@^1.3.3, pumpify@^1.3.5:
+  version "1.5.1"
+  resolved "https://registry.yarnpkg.com/pumpify/-/pumpify-1.5.1.tgz#36513be246ab27570b1a374a5ce278bfd74370ce"
+  integrity sha512-oClZI37HvuUJJxSKKrC17bZ9Cu0ZYhEAGPsPUy9KlMUmv9dKX2o77RUmq7f3XjIxbwyGwYzbzQ1L2Ks8sIradQ==
+  dependencies:
+    duplexify "^3.6.0"
+    inherits "^2.0.3"
+    pump "^2.0.0"
 
 punycode@1.3.2:
   version "1.3.2"
   resolved "https://registry.yarnpkg.com/punycode/-/punycode-1.3.2.tgz#9653a036fb7c1ee42342f2325cceefea3926c48d"
+  integrity sha1-llOgNvt8HuQjQvIyXM7v6jkmxI0=
 
 punycode@^1.2.4, punycode@^1.4.1:
   version "1.4.1"
   resolved "https://registry.yarnpkg.com/punycode/-/punycode-1.4.1.tgz#c0d5a63b2718800ad8e1eb0fa5269c84dd41845e"
+  integrity sha1-wNWmOycYgArY4esPpSachN1BhF4=
 
-q-io@1.13.2:
-  version "1.13.2"
-  resolved "https://registry.yarnpkg.com/q-io/-/q-io-1.13.2.tgz#eea130d481ddb5e1aa1bc5a66855f7391d06f003"
-  dependencies:
-    collections "^0.2.0"
-    mime "^1.2.11"
-    mimeparse "^0.1.4"
-    q "^1.0.1"
-    qs "^1.2.1"
-    url2 "^0.0.0"
+punycode@^2.1.0, punycode@^2.1.1:
+  version "2.1.1"
+  resolved "https://registry.yarnpkg.com/punycode/-/punycode-2.1.1.tgz#b58b010ac40c22c5657616c8d2c2c02c7bf479ec"
+  integrity sha512-XRsRjdf+j5ml+y/6GKHPZbrF/8p2Yga0JPtdqTIY2Xe5ohJPD9saDJJLPvp9+NSBprVvevdXZybnj2cv8OEd0A==
 
-q@1.4.1, q@^1.0.1, q@^1.1.2:
-  version "1.4.1"
-  resolved "https://registry.yarnpkg.com/q/-/q-1.4.1.tgz#55705bcd93c5f3673530c2c2cbc0c2b3addc286e"
+q@^1.1.2, q@^1.5.1:
+  version "1.5.1"
+  resolved "https://registry.yarnpkg.com/q/-/q-1.5.1.tgz#7e32f75b41381291d04611f1bf14109ac00651d7"
+  integrity sha1-fjL3W0E4EpHQRhHxvxQQmsAGUdc=
 
 qjobs@^1.1.4:
-  version "1.1.5"
-  resolved "https://registry.yarnpkg.com/qjobs/-/qjobs-1.1.5.tgz#659de9f2cf8dcc27a1481276f205377272382e73"
-
-qs@6.2.0:
-  version "6.2.0"
-  resolved "https://registry.yarnpkg.com/qs/-/qs-6.2.0.tgz#3b7848c03c2dece69a9522b0fae8c4126d745f3b"
-
-qs@^1.2.1:
-  version "1.2.2"
-  resolved "https://registry.yarnpkg.com/qs/-/qs-1.2.2.tgz#19b57ff24dc2a99ce1f8bdf6afcda59f8ef61f88"
+  version "1.2.0"
+  resolved "https://registry.yarnpkg.com/qjobs/-/qjobs-1.2.0.tgz#c45e9c61800bd087ef88d7e256423bdd49e5d071"
+  integrity sha512-8YOJEHtxpySA3fFDyCRxA+UUV+fA+rTWnuWvylOK/NCjhY+b4ocCtmu8TtsWb+mYeU+GCHf/S66KZF/AsteKHg==
 
-qs@~6.2.0:
-  version "6.2.1"
-  resolved "https://registry.yarnpkg.com/qs/-/qs-6.2.1.tgz#ce03c5ff0935bc1d9d69a9f14cbd18e568d67625"
+qrcode-terminal@^0.12.0:
+  version "0.12.0"
+  resolved "https://registry.npm.taobao.org/qrcode-terminal/download/qrcode-terminal-0.12.0.tgz#bb5b699ef7f9f0505092a3748be4464fe71b5819"
+  integrity sha1-u1tpnvf58FBQkqN0i+RGT+cbWBk=
 
-qs@~6.3.0:
-  version "6.3.0"
-  resolved "https://registry.yarnpkg.com/qs/-/qs-6.3.0.tgz#f403b264f23bc01228c74131b407f18d5ea5d442"
+qs@6.5.2, qs@~6.5.2:
+  version "6.5.2"
+  resolved "https://registry.yarnpkg.com/qs/-/qs-6.5.2.tgz#cb3ae806e8740444584ef154ce8ee98d403f3e36"
+  integrity sha512-N5ZAX4/LxJmF+7wN74pUD6qAh9/wnvdQcjq9TZjevvXzSUo7bfmw91saqMjzGS2xq91/odN2dW/WOl7qQHNDGA==
 
-query-string@^4.1.0:
-  version "4.2.3"
-  resolved "https://registry.yarnpkg.com/query-string/-/query-string-4.2.3.tgz#9f27273d207a25a8ee4c7b8c74dcd45d556db822"
+query-string@^6.8.2:
+  version "6.9.0"
+  resolved "https://registry.npm.taobao.org/query-string/download/query-string-6.9.0.tgz#1c3b727c370cf00f177c99f328fda2108f8fa3dd"
+  integrity sha1-HDtyfDcM8A8XfJnzKP2iEI+Po90=
   dependencies:
-    object-assign "^4.1.0"
-    strict-uri-encode "^1.0.0"
+    decode-uri-component "^0.2.0"
+    split-on-first "^1.0.0"
+    strict-uri-encode "^2.0.0"
 
 querystring-es3@^0.2.0, querystring-es3@^0.2.1:
   version "0.2.1"
   resolved "https://registry.yarnpkg.com/querystring-es3/-/querystring-es3-0.2.1.tgz#9ec61f79049875707d69414596fd907a4d711e73"
+  integrity sha1-nsYfeQSYdXB9aUFFlv2Qek1xHnM=
 
 querystring@0.2.0:
   version "0.2.0"
   resolved "https://registry.yarnpkg.com/querystring/-/querystring-0.2.0.tgz#b209849203bb25df820da756e747005878521620"
+  integrity sha1-sgmEkgO7Jd+CDadW50cAWHhSFiA=
 
-querystringify@0.0.x:
-  version "0.0.4"
-  resolved "https://registry.yarnpkg.com/querystringify/-/querystringify-0.0.4.tgz#0cf7f84f9463ff0ae51c4c4b142d95be37724d9c"
+querystringify@^2.0.0:
+  version "2.1.0"
+  resolved "https://registry.yarnpkg.com/querystringify/-/querystringify-2.1.0.tgz#7ded8dfbf7879dcc60d0a644ac6754b283ad17ef"
+  integrity sha512-sluvZZ1YiTLD5jsqZcDmFyV2EwToyXZBfpoVOmktMmW+VEnhgakFHnasVph65fOjGPTWN0Nw3+XQaSeMayr0kg==
 
-querystringify@~1.0.0:
-  version "1.0.0"
-  resolved "https://registry.yarnpkg.com/querystringify/-/querystringify-1.0.0.tgz#6286242112c5b712fa654e526652bf6a13ff05cb"
+quick-lru@^1.0.0:
+  version "1.1.0"
+  resolved "https://registry.npmjs.org/quick-lru/-/quick-lru-1.1.0.tgz#4360b17c61136ad38078397ff11416e186dcfbb8"
+  integrity sha1-Q2CxfGETatOAeDl/8RQW4Ybc+7g=
 
-randomatic@^1.1.3:
-  version "1.1.6"
-  resolved "https://registry.yarnpkg.com/randomatic/-/randomatic-1.1.6.tgz#110dcabff397e9dcff7c0789ccc0a49adf1ec5bb"
+qw@~1.0.1:
+  version "1.0.1"
+  resolved "https://registry.npm.taobao.org/qw/download/qw-1.0.1.tgz#efbfdc740f9ad054304426acb183412cc8b996d4"
+  integrity sha1-77/cdA+a0FQwRCassYNBLMi5ltQ=
+
+raf@^3.4.1:
+  version "3.4.1"
+  resolved "https://registry.yarnpkg.com/raf/-/raf-3.4.1.tgz#0742e99a4a6552f445d73e3ee0328af0ff1ede39"
+  integrity sha512-Sq4CW4QhwOHE8ucn6J34MqtZCeWFP2aQSmrlroYgqAV1PjStIhJXxYuTgUIfkEk7zTLjmIjLmU5q+fbD1NnOJA==
   dependencies:
-    is-number "^2.0.2"
-    kind-of "^3.0.2"
+    performance-now "^2.1.0"
 
-randombytes@^2.0.0, randombytes@^2.0.1:
-  version "2.0.5"
-  resolved "https://registry.yarnpkg.com/randombytes/-/randombytes-2.0.5.tgz#dc009a246b8d09a177b4b7a0ae77bc570f4b1b79"
+randomatic@^3.0.0:
+  version "3.1.1"
+  resolved "https://registry.yarnpkg.com/randomatic/-/randomatic-3.1.1.tgz#b776efc59375984e36c537b2f51a1f0aff0da1ed"
+  integrity sha512-TuDE5KxZ0J461RVjrJZCJc+J+zCkTb1MbH9AQUq68sMhOMcy9jLcb3BrZKgp9q9Ncltdg4QVqWrH02W2EFFVYw==
+  dependencies:
+    is-number "^4.0.0"
+    kind-of "^6.0.0"
+    math-random "^1.0.1"
+
+randombytes@^2.0.0, randombytes@^2.0.1, randombytes@^2.0.5:
+  version "2.0.6"
+  resolved "https://registry.yarnpkg.com/randombytes/-/randombytes-2.0.6.tgz#d302c522948588848a8d300c932b44c24231da80"
+  integrity sha512-CIQ5OFxf4Jou6uOKe9t1AOgqpeU5fd70A8NPdHSGeYXqXsPe6peOwI0cUl88RWZ6sP1vPMV3avd/R6cZ5/sP1A==
+  dependencies:
+    safe-buffer "^5.1.0"
+
+randomfill@^1.0.3:
+  version "1.0.4"
+  resolved "https://registry.yarnpkg.com/randomfill/-/randomfill-1.0.4.tgz#c92196fc86ab42be983f1bf31778224931d61458"
+  integrity sha512-87lcbR8+MhcWcUiQ+9e+Rwx8MyR2P7qnt15ynUlbm3TU/fjbgz4GsvfSUDTemtCCtVCqb4ZcEFlyPNTh9bBTLw==
   dependencies:
+    randombytes "^2.0.5"
     safe-buffer "^5.1.0"
 
 range-parser@^1.0.3, range-parser@^1.2.0, range-parser@~1.2.0:
   version "1.2.0"
   resolved "https://registry.yarnpkg.com/range-parser/-/range-parser-1.2.0.tgz#f49be6b487894ddc40dcc94a322f611092e00d5e"
+  integrity sha1-9JvmtIeJTdxA3MlKMi9hEJLgDV4=
 
-raw-body@~2.1.7:
-  version "2.1.7"
-  resolved "https://registry.yarnpkg.com/raw-body/-/raw-body-2.1.7.tgz#adfeace2e4fb3098058014d08c072dcc59758774"
+raw-body@2.3.3:
+  version "2.3.3"
+  resolved "https://registry.yarnpkg.com/raw-body/-/raw-body-2.3.3.tgz#1b324ece6b5706e153855bc1148c65bb7f6ea0c3"
+  integrity sha512-9esiElv1BrZoI3rCDuOuKCBRbuApGGaDPQfjSflGxdy4oyzqghxu6klEkkVIvBje+FF0BX9coEv8KqW6X/7njw==
   dependencies:
-    bytes "2.4.0"
-    iconv-lite "0.4.13"
+    bytes "3.0.0"
+    http-errors "1.6.3"
+    iconv-lite "0.4.23"
     unpipe "1.0.0"
 
-rc@~1.1.6:
-  version "1.1.6"
-  resolved "https://registry.yarnpkg.com/rc/-/rc-1.1.6.tgz#43651b76b6ae53b5c802f1151fa3fc3b059969c9"
+rc@^1.0.1, rc@^1.1.6, rc@^1.2.7:
+  version "1.2.8"
+  resolved "https://registry.yarnpkg.com/rc/-/rc-1.2.8.tgz#cd924bf5200a075b83c188cd6b9e211b7fc0d3ed"
+  integrity sha512-y3bGgqKj3QBdxLbLkomlohkvsA8gdAiUQlSBJnBhfn+BPxg4bc62d8TcBW15wavDfgexCgccckhcZvywyQYPOw==
   dependencies:
-    deep-extend "~0.4.0"
+    deep-extend "^0.6.0"
     ini "~1.3.0"
     minimist "^1.2.0"
-    strip-json-comments "~1.0.4"
+    strip-json-comments "~2.0.1"
 
-read-cache@^1.0.0:
-  version "1.0.0"
-  resolved "https://registry.yarnpkg.com/read-cache/-/read-cache-1.0.0.tgz#e664ef31161166c9751cdbe8dbcf86b5fb58f774"
+read-cmd-shim@^1.0.1, read-cmd-shim@^1.0.5:
+  version "1.0.5"
+  resolved "https://registry.npm.taobao.org/read-cmd-shim/download/read-cmd-shim-1.0.5.tgz?cache=0&other_urls=https%3A%2F%2Fregistry.npm.taobao.org%2Fread-cmd-shim%2Fdownload%2Fread-cmd-shim-1.0.5.tgz#87e43eba50098ba5a32d0ceb583ab8e43b961c16"
+  integrity sha1-h+Q+ulAJi6WjLQzrWDq45DuWHBY=
   dependencies:
-    pify "^2.3.0"
+    graceful-fs "^4.1.2"
+
+read-installed@~4.0.3:
+  version "4.0.3"
+  resolved "https://registry.npm.taobao.org/read-installed/download/read-installed-4.0.3.tgz#ff9b8b67f187d1e4c29b9feb31f6b223acd19067"
+  integrity sha1-/5uLZ/GH0eTCm5/rMfayI6zRkGc=
+  dependencies:
+    debuglog "^1.0.1"
+    read-package-json "^2.0.0"
+    readdir-scoped-modules "^1.0.0"
+    semver "2 || 3 || 4 || 5"
+    slide "~1.1.3"
+    util-extend "^1.0.1"
+  optionalDependencies:
+    graceful-fs "^4.1.2"
+
+"read-package-json@1 || 2", read-package-json@^2.0.0, read-package-json@^2.0.13, read-package-json@^2.1.1:
+  version "2.1.1"
+  resolved "https://registry.npm.taobao.org/read-package-json/download/read-package-json-2.1.1.tgz#16aa66c59e7d4dad6288f179dd9295fd59bb98f1"
+  integrity sha1-FqpmxZ59Ta1iiPF53ZKV/Vm7mPE=
+  dependencies:
+    glob "^7.1.1"
+    json-parse-better-errors "^1.0.1"
+    normalize-package-data "^2.0.0"
+    npm-normalize-package-bin "^1.0.0"
+  optionalDependencies:
+    graceful-fs "^4.1.2"
+
+read-package-tree@^5.3.1:
+  version "5.3.1"
+  resolved "https://registry.npm.taobao.org/read-package-tree/download/read-package-tree-5.3.1.tgz#a32cb64c7f31eb8a6f31ef06f9cedf74068fe636"
+  integrity sha1-oyy2TH8x64pvMe8G+c7fdAaP5jY=
+  dependencies:
+    read-package-json "^2.0.0"
+    readdir-scoped-modules "^1.0.0"
+    util-promisify "^2.1.0"
 
 read-pkg-up@^1.0.1:
   version "1.0.1"
   resolved "https://registry.yarnpkg.com/read-pkg-up/-/read-pkg-up-1.0.1.tgz#9d63c13276c065918d57f002a57f40a1b643fb02"
+  integrity sha1-nWPBMnbAZZGNV/ACpX9AobZD+wI=
   dependencies:
     find-up "^1.0.0"
     read-pkg "^1.0.0"
 
-read-pkg-up@^2.0.0:
-  version "2.0.0"
-  resolved "https://registry.yarnpkg.com/read-pkg-up/-/read-pkg-up-2.0.0.tgz#6b72a8048984e0c41e79510fd5e9fa99b3b549be"
+read-pkg-up@^3.0.0:
+  version "3.0.0"
+  resolved "https://registry.npmjs.org/read-pkg-up/-/read-pkg-up-3.0.0.tgz#3ed496685dba0f8fe118d0691dc51f4a1ff96f07"
+  integrity sha1-PtSWaF26D4/hGNBpHcUfSh/5bwc=
   dependencies:
     find-up "^2.0.0"
-    read-pkg "^2.0.0"
+    read-pkg "^3.0.0"
 
 read-pkg@^1.0.0:
   version "1.1.0"
   resolved "https://registry.yarnpkg.com/read-pkg/-/read-pkg-1.1.0.tgz#f5ffaa5ecd29cb31c0474bca7d756b6bb29e3f28"
+  integrity sha1-9f+qXs0pyzHAR0vKfXVra7KePyg=
   dependencies:
     load-json-file "^1.0.0"
     normalize-package-data "^2.3.2"
     path-type "^1.0.0"
 
-read-pkg@^2.0.0:
-  version "2.0.0"
-  resolved "https://registry.yarnpkg.com/read-pkg/-/read-pkg-2.0.0.tgz#8ef1c0623c6a6db0dc6713c4bfac46332b2368f8"
+read-pkg@^3.0.0:
+  version "3.0.0"
+  resolved "https://registry.npmjs.org/read-pkg/-/read-pkg-3.0.0.tgz#9cbc686978fee65d16c00e2b19c237fcf6e38389"
+  integrity sha1-nLxoaXj+5l0WwA4rGcI3/Pbjg4k=
   dependencies:
-    load-json-file "^2.0.0"
+    load-json-file "^4.0.0"
     normalize-package-data "^2.3.2"
-    path-type "^2.0.0"
-
-readable-stream@1.0, "readable-stream@>=1.0.33-1 <1.1.0-0", readable-stream@~1.0.17, readable-stream@~1.0.2:
-  version "1.0.34"
-  resolved "https://registry.yarnpkg.com/readable-stream/-/readable-stream-1.0.34.tgz#125820e34bc842d2f2aaafafe4c2916ee32c157c"
-  dependencies:
-    core-util-is "~1.0.0"
-    inherits "~2.0.1"
-    isarray "0.0.1"
-    string_decoder "~0.10.x"
+    path-type "^3.0.0"
 
-readable-stream@1.1, readable-stream@~1.1.9:
-  version "1.1.13"
-  resolved "https://registry.yarnpkg.com/readable-stream/-/readable-stream-1.1.13.tgz#f6eef764f514c89e2b9e23146a75ba106756d23e"
+read-pkg@^4.0.1:
+  version "4.0.1"
+  resolved "https://registry.yarnpkg.com/read-pkg/-/read-pkg-4.0.1.tgz#963625378f3e1c4d48c85872b5a6ec7d5d093237"
+  integrity sha1-ljYlN48+HE1IyFhytabsfV0JMjc=
   dependencies:
-    core-util-is "~1.0.0"
-    inherits "~2.0.1"
-    isarray "0.0.1"
-    string_decoder "~0.10.x"
+    normalize-package-data "^2.3.2"
+    parse-json "^4.0.0"
+    pify "^3.0.0"
 
-"readable-stream@^2.0.0 || ^1.1.13", readable-stream@^2.0.1, readable-stream@^2.0.2, readable-stream@^2.0.5, readable-stream@^2.1.0, readable-stream@^2.1.5:
-  version "2.2.2"
-  resolved "https://registry.yarnpkg.com/readable-stream/-/readable-stream-2.2.2.tgz#a9e6fec3c7dda85f8bb1b3ba7028604556fc825e"
+read@1, read@~1.0.1, read@~1.0.7:
+  version "1.0.7"
+  resolved "https://registry.npm.taobao.org/read/download/read-1.0.7.tgz?cache=0&other_urls=https%3A%2F%2Fregistry.npm.taobao.org%2Fread%2Fdownload%2Fread-1.0.7.tgz#b3da19bd052431a97671d44a42634adf710b40c4"
+  integrity sha1-s9oZvQUkMal2cdRKQmNK33ELQMQ=
   dependencies:
-    buffer-shims "^1.0.0"
-    core-util-is "~1.0.0"
-    inherits "~2.0.1"
-    isarray "~1.0.0"
-    process-nextick-args "~1.0.6"
-    string_decoder "~0.10.x"
-    util-deprecate "~1.0.1"
+    mute-stream "~0.0.4"
 
-readable-stream@^2.2.2, readable-stream@^2.2.9:
-  version "2.3.3"
-  resolved "https://registry.yarnpkg.com/readable-stream/-/readable-stream-2.3.3.tgz#368f2512d79f9d46fdfc71349ae7878bbc1eb95c"
+"readable-stream@1 || 2", readable-stream@^2.0.0, readable-stream@^2.0.1, readable-stream@^2.0.2, readable-stream@^2.0.4, readable-stream@^2.0.5, readable-stream@^2.0.6, readable-stream@^2.1.5, readable-stream@^2.2.2, readable-stream@^2.3.3, readable-stream@^2.3.5, readable-stream@^2.3.6, readable-stream@~2.3.6:
+  version "2.3.6"
+  resolved "https://registry.yarnpkg.com/readable-stream/-/readable-stream-2.3.6.tgz#b11c27d88b8ff1fbe070643cf94b0c79ae1b0aaf"
+  integrity sha512-tQtKA9WIAhBF3+VLAseyMqZeBjW0AHJoxOtYqSUZNJxauErmLbVm2FW1y+J/YA9dUrAC39ITejlZWhVIwawkKw==
   dependencies:
     core-util-is "~1.0.0"
     inherits "~2.0.3"
     isarray "~1.0.0"
-    process-nextick-args "~1.0.6"
+    process-nextick-args "~2.0.0"
     safe-buffer "~5.1.1"
-    string_decoder "~1.0.3"
+    string_decoder "~1.1.1"
     util-deprecate "~1.0.1"
 
-readable-stream@~2.0.5:
-  version "2.0.6"
-  resolved "https://registry.yarnpkg.com/readable-stream/-/readable-stream-2.0.6.tgz#8f90341e68a53ccc928788dacfcd11b36eb9b78e"
+readable-stream@1.0, readable-stream@~1.0.17:
+  version "1.0.34"
+  resolved "https://registry.yarnpkg.com/readable-stream/-/readable-stream-1.0.34.tgz#125820e34bc842d2f2aaafafe4c2916ee32c157c"
+  integrity sha1-Elgg40vIQtLyqq+v5MKRbuMsFXw=
   dependencies:
     core-util-is "~1.0.0"
     inherits "~2.0.1"
-    isarray "~1.0.0"
-    process-nextick-args "~1.0.6"
+    isarray "0.0.1"
     string_decoder "~0.10.x"
-    util-deprecate "~1.0.1"
 
-readable-stream@~2.1.4:
-  version "2.1.5"
-  resolved "https://registry.yarnpkg.com/readable-stream/-/readable-stream-2.1.5.tgz#66fa8b720e1438b364681f2ad1a63c618448c9d0"
+"readable-stream@2 || 3", readable-stream@^3.0.2, readable-stream@^3.4.0:
+  version "3.4.0"
+  resolved "https://registry.npmjs.org/readable-stream/-/readable-stream-3.4.0.tgz#a51c26754658e0a3c21dbf59163bd45ba6f447fc"
+  integrity sha512-jItXPLmrSR8jmTRmRWJXCnGJsfy85mB3Wd/uINMXA65yrnFo0cPClFIUWzo2najVNSl+mx7/4W8ttlLWJe99pQ==
+  dependencies:
+    inherits "^2.0.3"
+    string_decoder "^1.1.1"
+    util-deprecate "^1.0.1"
+
+readable-stream@^3.0.6:
+  version "3.1.1"
+  resolved "https://registry.yarnpkg.com/readable-stream/-/readable-stream-3.1.1.tgz#ed6bbc6c5ba58b090039ff18ce670515795aeb06"
+  integrity sha512-DkN66hPyqDhnIQ6Jcsvx9bFjhw214O4poMBcIMgPVpQvNy9a0e0Uhg5SqySyDKAmUlwt8LonTBz1ezOnM8pUdA==
+  dependencies:
+    inherits "^2.0.3"
+    string_decoder "^1.1.1"
+    util-deprecate "^1.0.1"
+
+readable-stream@~1.1.10, readable-stream@~1.1.9:
+  version "1.1.14"
+  resolved "https://registry.yarnpkg.com/readable-stream/-/readable-stream-1.1.14.tgz#7cf4c54ef648e3813084c636dd2079e166c081d9"
+  integrity sha1-fPTFTvZI44EwhMY23SB54WbAgdk=
   dependencies:
-    buffer-shims "^1.0.0"
     core-util-is "~1.0.0"
     inherits "~2.0.1"
-    isarray "~1.0.0"
-    process-nextick-args "~1.0.6"
+    isarray "0.0.1"
     string_decoder "~0.10.x"
-    util-deprecate "~1.0.1"
 
-readdirp@^2.0.0:
-  version "2.1.0"
-  resolved "https://registry.yarnpkg.com/readdirp/-/readdirp-2.1.0.tgz#4ed0ad060df3073300c48440373f72d1cc642d78"
+readdir-scoped-modules@^1.0.0, readdir-scoped-modules@^1.1.0:
+  version "1.1.0"
+  resolved "https://registry.npm.taobao.org/readdir-scoped-modules/download/readdir-scoped-modules-1.1.0.tgz#8d45407b4f870a0dcaebc0e28670d18e74514309"
+  integrity sha1-jUVAe0+HCg3K68DihnDRjnRRQwk=
   dependencies:
+    debuglog "^1.0.1"
+    dezalgo "^1.0.0"
     graceful-fs "^4.1.2"
-    minimatch "^3.0.2"
-    readable-stream "^2.0.2"
-    set-immediate-shim "^1.0.1"
+    once "^1.3.0"
 
-recast@~0.11.12:
-  version "0.11.18"
-  resolved "https://registry.yarnpkg.com/recast/-/recast-0.11.18.tgz#07af6257ca769868815209401d4d60eef1b5b947"
+readdirp@^2.0.0, readdirp@^2.2.1:
+  version "2.2.1"
+  resolved "https://registry.yarnpkg.com/readdirp/-/readdirp-2.2.1.tgz#0e87622a3325aa33e892285caf8b4e846529a525"
+  integrity sha512-1JU/8q+VgFZyxwrJ+SVIOsh+KywWGpds3NTqikiKpDMZWScmAYyKIgqkO+ARvNWJfXeXR1zxz7aHF4u4CyH6vQ==
   dependencies:
-    ast-types "0.9.2"
-    esprima "~3.1.0"
-    private "~0.1.5"
-    source-map "~0.5.0"
+    graceful-fs "^4.1.11"
+    micromatch "^3.1.10"
+    readable-stream "^2.0.2"
 
 rechoir@^0.6.2:
   version "0.6.2"
   resolved "https://registry.yarnpkg.com/rechoir/-/rechoir-0.6.2.tgz#85204b54dba82d5742e28c96756ef43af50e3384"
+  integrity sha1-hSBLVNuoLVdC4oyWdW70OvUOM4Q=
   dependencies:
     resolve "^1.1.6"
 
 redent@^1.0.0:
   version "1.0.0"
   resolved "https://registry.yarnpkg.com/redent/-/redent-1.0.0.tgz#cf916ab1fd5f1f16dfb20822dd6ec7f730c2afde"
+  integrity sha1-z5Fqsf1fHxbfsggi3W7H9zDCr94=
   dependencies:
-    indent-string "^2.1.0"
-    strip-indent "^1.0.1"
-
-reduce-css-calc@^1.2.6, reduce-css-calc@^1.2.7:
-  version "1.3.0"
-  resolved "https://registry.yarnpkg.com/reduce-css-calc/-/reduce-css-calc-1.3.0.tgz#747c914e049614a4c9cfbba629871ad1d2927716"
-  dependencies:
-    balanced-match "^0.4.2"
-    math-expression-evaluator "^1.2.14"
-    reduce-function-call "^1.0.1"
+    indent-string "^2.1.0"
+    strip-indent "^1.0.1"
 
-reduce-function-call@^1.0.1:
-  version "1.0.2"
-  resolved "https://registry.yarnpkg.com/reduce-function-call/-/reduce-function-call-1.0.2.tgz#5a200bf92e0e37751752fe45b0ab330fd4b6be99"
+redent@^2.0.0:
+  version "2.0.0"
+  resolved "https://registry.npmjs.org/redent/-/redent-2.0.0.tgz#c1b2007b42d57eb1389079b3c8333639d5e1ccaa"
+  integrity sha1-wbIAe0LVfrE4kHmzyDM2OdXhzKo=
   dependencies:
-    balanced-match "^0.4.2"
+    indent-string "^3.0.0"
+    strip-indent "^2.0.0"
 
 reduce@^1.0.1:
   version "1.0.1"
   resolved "https://registry.yarnpkg.com/reduce/-/reduce-1.0.1.tgz#14fa2e5ff1fc560703a020cbb5fbaab691565804"
+  integrity sha1-FPouX/H8VgcDoCDLtfuqtpFWWAQ=
   dependencies:
     object-keys "~1.0.0"
 
 regenerate@^1.2.1:
-  version "1.3.2"
-  resolved "https://registry.yarnpkg.com/regenerate/-/regenerate-1.3.2.tgz#d1941c67bad437e1be76433add5b385f95b19260"
+  version "1.4.0"
+  resolved "https://registry.yarnpkg.com/regenerate/-/regenerate-1.4.0.tgz#4a856ec4b56e4077c557589cae85e7a4c8869a11"
+  integrity sha512-1G6jJVDWrt0rK99kBjvEtziZNCICAuvIPkSiUFIQxVP06RCVpq3dmDo2oi6ABpYaDYaTRr67BEhL8r1wgEZZKg==
 
-regenerator-runtime@^0.10.0:
-  version "0.10.1"
-  resolved "https://registry.yarnpkg.com/regenerator-runtime/-/regenerator-runtime-0.10.1.tgz#257f41961ce44558b18f7814af48c17559f9faeb"
+regenerator-runtime@^0.10.5:
+  version "0.10.5"
+  resolved "https://registry.yarnpkg.com/regenerator-runtime/-/regenerator-runtime-0.10.5.tgz#336c3efc1220adcedda2c9fab67b5a7955a33658"
+  integrity sha1-M2w+/BIgrc7dosn6tntaeVWjNlg=
+
+regenerator-runtime@^0.11.0:
+  version "0.11.1"
+  resolved "https://registry.yarnpkg.com/regenerator-runtime/-/regenerator-runtime-0.11.1.tgz#be05ad7f9bf7d22e056f9726cee5017fbf19e2e9"
+  integrity sha512-MguG95oij0fC3QV3URf4V2SDYGJhJnJGqvIIgdECeODCT98wSWDAJ94SSuVpYQUoTcGUIL6L4yNB7j1DFFHSBg==
+
+regenerator-runtime@^0.13.2:
+  version "0.13.3"
+  resolved "https://registry.yarnpkg.com/regenerator-runtime/-/regenerator-runtime-0.13.3.tgz#7cf6a77d8f5c6f60eb73c5fc1955b2ceb01e6bf5"
+  integrity sha512-naKIZz2GQ8JWh///G7L3X6LaQUAMp2lvb1rvwwsURe/VXwD6VMfr+/1NuNw3ag8v2kY1aQ/go5SNn79O9JU7yw==
 
-regenerator-transform@0.9.8:
-  version "0.9.8"
-  resolved "https://registry.yarnpkg.com/regenerator-transform/-/regenerator-transform-0.9.8.tgz#0f88bb2bc03932ddb7b6b7312e68078f01026d6c"
+regenerator-transform@^0.10.0:
+  version "0.10.1"
+  resolved "https://registry.yarnpkg.com/regenerator-transform/-/regenerator-transform-0.10.1.tgz#1e4996837231da8b7f3cf4114d71b5691a0680dd"
+  integrity sha512-PJepbvDbuK1xgIgnau7Y90cwaAmO/LCLMI2mPvaXq2heGMR3aWW5/BQvYrhJ8jgmQjXewXvBjzfqKcVOmhjZ6Q==
   dependencies:
     babel-runtime "^6.18.0"
     babel-types "^6.19.0"
     private "^0.1.6"
 
 regex-cache@^0.4.2:
-  version "0.4.3"
-  resolved "https://registry.yarnpkg.com/regex-cache/-/regex-cache-0.4.3.tgz#9b1a6c35d4d0dfcef5711ae651e8e9d3d7114145"
+  version "0.4.4"
+  resolved "https://registry.yarnpkg.com/regex-cache/-/regex-cache-0.4.4.tgz#75bdc58a2a1496cec48a12835bc54c8d562336dd"
+  integrity sha512-nVIZwtCjkC9YgvWkpM55B5rBhBYRZhAaJbgcFYXXsHnbZ9UZI9nnVWYZpBlCqv9ho2eZryPnWrZGsOdPwVWXWQ==
   dependencies:
     is-equal-shallow "^0.1.3"
-    is-primitive "^2.0.0"
+
+regex-match-all@^1.0.2:
+  version "1.0.2"
+  resolved "https://registry.npm.taobao.org/regex-match-all/download/regex-match-all-1.0.2.tgz#f9cf3fb49694b417314d18336d204091427b4af3"
+  integrity sha1-+c8/tJaUtBcxTRgzbSBAkUJ7SvM=
+
+regex-not@^1.0.0, regex-not@^1.0.2:
+  version "1.0.2"
+  resolved "https://registry.yarnpkg.com/regex-not/-/regex-not-1.0.2.tgz#1f4ece27e00b0b65e0247a6810e6a85d83a5752c"
+  integrity sha512-J6SDjUgDxQj5NusnOtdFxDwN/+HWykR8GELwctJ7mdqhcyy1xEc4SRFHUXvxTp661YaVKAjfRLZ9cCqS6tn32A==
+  dependencies:
+    extend-shallow "^3.0.2"
+    safe-regex "^1.1.0"
 
 regexpu-core@^1.0.0:
   version "1.0.0"
   resolved "https://registry.yarnpkg.com/regexpu-core/-/regexpu-core-1.0.0.tgz#86a763f58ee4d7c2f6b102e4764050de7ed90c6b"
+  integrity sha1-hqdj9Y7k18L2sQLkdkBQ3n7ZDGs=
   dependencies:
     regenerate "^1.2.1"
     regjsgen "^0.2.0"
@@ -6638,258 +10194,451 @@ regexpu-core@^1.0.0:
 regexpu-core@^2.0.0:
   version "2.0.0"
   resolved "https://registry.yarnpkg.com/regexpu-core/-/regexpu-core-2.0.0.tgz#49d038837b8dcf8bfa5b9a42139938e6ea2ae240"
+  integrity sha1-SdA4g3uNz4v6W5pCE5k45uoq4kA=
   dependencies:
     regenerate "^1.2.1"
     regjsgen "^0.2.0"
     regjsparser "^0.1.4"
 
+registry-auth-token@^3.0.1:
+  version "3.4.0"
+  resolved "https://registry.npm.taobao.org/registry-auth-token/download/registry-auth-token-3.4.0.tgz#d7446815433f5d5ed6431cd5dca21048f66b397e"
+  integrity sha1-10RoFUM/XV7WQxzV3KIQSPZrOX4=
+  dependencies:
+    rc "^1.1.6"
+    safe-buffer "^5.0.1"
+
+registry-url@^3.0.3:
+  version "3.1.0"
+  resolved "https://registry.npm.taobao.org/registry-url/download/registry-url-3.1.0.tgz#3d4ef870f73dde1d77f0cf9a381432444e174942"
+  integrity sha1-PU74cPc93h138M+aOBQyRE4XSUI=
+  dependencies:
+    rc "^1.0.1"
+
 regjsgen@^0.2.0:
   version "0.2.0"
   resolved "https://registry.yarnpkg.com/regjsgen/-/regjsgen-0.2.0.tgz#6c016adeac554f75823fe37ac05b92d5a4edb1f7"
+  integrity sha1-bAFq3qxVT3WCP+N6wFuS1aTtsfc=
 
 regjsparser@^0.1.4:
   version "0.1.5"
   resolved "https://registry.yarnpkg.com/regjsparser/-/regjsparser-0.1.5.tgz#7ee8f84dc6fa792d3fd0ae228d24bd949ead205c"
+  integrity sha1-fuj4Tcb6eS0/0K4ijSS9lJ6tIFw=
   dependencies:
     jsesc "~0.5.0"
 
 relateurl@0.2.x:
   version "0.2.7"
   resolved "https://registry.yarnpkg.com/relateurl/-/relateurl-0.2.7.tgz#54dbf377e51440aca90a4cd274600d3ff2d888a9"
+  integrity sha1-VNvzd+UUQKypCkzSdGANP/LYiKk=
 
-renderkid@~2.0.0:
-  version "2.0.0"
-  resolved "https://registry.yarnpkg.com/renderkid/-/renderkid-2.0.0.tgz#1859753e7a5adbf35443aba0d4e4579e78abee85"
+remedial@1.x:
+  version "1.0.8"
+  resolved "https://registry.npm.taobao.org/remedial/download/remedial-1.0.8.tgz#a5e4fd52a0e4956adbaf62da63a5a46a78c578a0"
+  integrity sha1-peT9UqDklWrbr2LaY6WkanjFeKA=
+
+remove-bom-buffer@^3.0.0:
+  version "3.0.0"
+  resolved "https://registry.yarnpkg.com/remove-bom-buffer/-/remove-bom-buffer-3.0.0.tgz#c2bf1e377520d324f623892e33c10cac2c252b53"
+  integrity sha512-8v2rWhaakv18qcvNeli2mZ/TMTL2nEyAKRvzo1WtnZBl15SHyEhrCu2/xKlJyUFKHiHgfXIyuY6g2dObJJycXQ==
+  dependencies:
+    is-buffer "^1.1.5"
+    is-utf8 "^0.2.1"
+
+remove-bom-stream@^1.2.0:
+  version "1.2.0"
+  resolved "https://registry.yarnpkg.com/remove-bom-stream/-/remove-bom-stream-1.2.0.tgz#05f1a593f16e42e1fb90ebf59de8e569525f9523"
+  integrity sha1-BfGlk/FuQuH7kOv1nejlaVJflSM=
+  dependencies:
+    remove-bom-buffer "^3.0.0"
+    safe-buffer "^5.1.0"
+    through2 "^2.0.3"
+
+remove-trailing-separator@^1.0.1, remove-trailing-separator@^1.1.0:
+  version "1.1.0"
+  resolved "https://registry.yarnpkg.com/remove-trailing-separator/-/remove-trailing-separator-1.1.0.tgz#c24bce2a283adad5bc3f58e0d48249b92379d8ef"
+  integrity sha1-wkvOKig62tW8P1jg1IJJuSN52O8=
+
+renderkid@^2.0.1:
+  version "2.0.2"
+  resolved "https://registry.yarnpkg.com/renderkid/-/renderkid-2.0.2.tgz#12d310f255360c07ad8fde253f6c9e9de372d2aa"
+  integrity sha512-FsygIxevi1jSiPY9h7vZmBFUbAOcbYm9UwyiLNdVsLRs/5We9Ob5NMPbGYUTWiLq5L+ezlVdE0A8bbME5CWTpg==
   dependencies:
     css-select "^1.1.0"
-    dom-converter "~0.1"
+    dom-converter "~0.2"
     htmlparser2 "~3.3.0"
     strip-ansi "^3.0.0"
-    utila "~0.3"
+    utila "^0.4.0"
 
 repeat-element@^1.1.2:
-  version "1.1.2"
-  resolved "https://registry.yarnpkg.com/repeat-element/-/repeat-element-1.1.2.tgz#ef089a178d1483baae4d93eb98b4f9e4e11d990a"
-
-repeat-string@^0.2.2:
-  version "0.2.2"
-  resolved "https://registry.yarnpkg.com/repeat-string/-/repeat-string-0.2.2.tgz#c7a8d3236068362059a7e4651fc6884e8b1fb4ae"
+  version "1.1.3"
+  resolved "https://registry.yarnpkg.com/repeat-element/-/repeat-element-1.1.3.tgz#782e0d825c0c5a3bb39731f84efee6b742e6b1ce"
+  integrity sha512-ahGq0ZnV5m5XtZLMb+vP76kcAM5nkLqk0lpqAuojSKGgQtn4eRi4ZZGm2olo2zKFH+sMsWaqOCW1dqAnOru72g==
 
-repeat-string@^1.5.2:
+repeat-string@^1.5.2, repeat-string@^1.6.1:
   version "1.6.1"
   resolved "https://registry.yarnpkg.com/repeat-string/-/repeat-string-1.6.1.tgz#8dcae470e1c88abc2d600fff4a776286da75e637"
+  integrity sha1-jcrkcOHIirwtYA//Sndihtp15jc=
 
 repeating@^2.0.0:
   version "2.0.1"
   resolved "https://registry.yarnpkg.com/repeating/-/repeating-2.0.1.tgz#5214c53a926d3552707527fbab415dbc08d06dda"
+  integrity sha1-UhTFOpJtNVJwdSf7q0FdvAjQbdo=
   dependencies:
     is-finite "^1.0.0"
 
-replace-ext@0.0.1:
-  version "0.0.1"
-  resolved "https://registry.yarnpkg.com/replace-ext/-/replace-ext-0.0.1.tgz#29bbd92078a739f0bcce2b4ee41e837953522924"
+replace-ext@^1.0.0:
+  version "1.0.0"
+  resolved "https://registry.yarnpkg.com/replace-ext/-/replace-ext-1.0.0.tgz#de63128373fcbf7c3ccfa4de5a480c45a67958eb"
+  integrity sha1-3mMSg3P8v3w8z6TeWkgMRaZ5WOs=
 
-request@2, request@^2.55.0, request@^2.79.0:
-  version "2.79.0"
-  resolved "https://registry.yarnpkg.com/request/-/request-2.79.0.tgz#4dfe5bf6be8b8cdc37fcf93e04b65577722710de"
-  dependencies:
-    aws-sign2 "~0.6.0"
-    aws4 "^1.2.1"
-    caseless "~0.11.0"
-    combined-stream "~1.0.5"
-    extend "~3.0.0"
+replace-homedir@^1.0.0:
+  version "1.0.0"
+  resolved "https://registry.yarnpkg.com/replace-homedir/-/replace-homedir-1.0.0.tgz#e87f6d513b928dde808260c12be7fec6ff6e798c"
+  integrity sha1-6H9tUTuSjd6AgmDBK+f+xv9ueYw=
+  dependencies:
+    homedir-polyfill "^1.0.1"
+    is-absolute "^1.0.0"
+    remove-trailing-separator "^1.1.0"
+
+request@^2.86.0, request@^2.88.0:
+  version "2.88.0"
+  resolved "https://registry.yarnpkg.com/request/-/request-2.88.0.tgz#9c2fca4f7d35b592efe57c7f0a55e81052124fef"
+  integrity sha512-NAqBSrijGLZdM0WZNsInLJpkJokL72XYjUpnB0iwsRgxh7dB6COrHnTBNwN0E+lHDAJzu7kLAkDeY08z2/A0hg==
+  dependencies:
+    aws-sign2 "~0.7.0"
+    aws4 "^1.8.0"
+    caseless "~0.12.0"
+    combined-stream "~1.0.6"
+    extend "~3.0.2"
     forever-agent "~0.6.1"
-    form-data "~2.1.1"
-    har-validator "~2.0.6"
-    hawk "~3.1.3"
-    http-signature "~1.1.0"
+    form-data "~2.3.2"
+    har-validator "~5.1.0"
+    http-signature "~1.2.0"
     is-typedarray "~1.0.0"
     isstream "~0.1.2"
     json-stringify-safe "~5.0.1"
-    mime-types "~2.1.7"
-    oauth-sign "~0.8.1"
-    qs "~6.3.0"
-    stringstream "~0.0.4"
-    tough-cookie "~2.3.0"
-    tunnel-agent "~0.4.1"
-    uuid "^3.0.0"
-
-request@2.75.0:
-  version "2.75.0"
-  resolved "https://registry.yarnpkg.com/request/-/request-2.75.0.tgz#d2b8268a286da13eaa5d01adf5d18cc90f657d93"
-  dependencies:
-    aws-sign2 "~0.6.0"
-    aws4 "^1.2.1"
-    bl "~1.1.2"
-    caseless "~0.11.0"
-    combined-stream "~1.0.5"
-    extend "~3.0.0"
+    mime-types "~2.1.19"
+    oauth-sign "~0.9.0"
+    performance-now "^2.1.0"
+    qs "~6.5.2"
+    safe-buffer "^5.1.2"
+    tough-cookie "~2.4.3"
+    tunnel-agent "^0.6.0"
+    uuid "^3.3.2"
+
+request@^2.87.0:
+  version "2.88.2"
+  resolved "https://registry.npm.taobao.org/request/download/request-2.88.2.tgz?cache=0&sync_timestamp=1589682741998&other_urls=https%3A%2F%2Fregistry.npm.taobao.org%2Frequest%2Fdownload%2Frequest-2.88.2.tgz#d73c918731cb5a87da047e207234146f664d12b3"
+  integrity sha1-1zyRhzHLWofaBH4gcjQUb2ZNErM=
+  dependencies:
+    aws-sign2 "~0.7.0"
+    aws4 "^1.8.0"
+    caseless "~0.12.0"
+    combined-stream "~1.0.6"
+    extend "~3.0.2"
     forever-agent "~0.6.1"
-    form-data "~2.0.0"
-    har-validator "~2.0.6"
-    hawk "~3.1.3"
-    http-signature "~1.1.0"
+    form-data "~2.3.2"
+    har-validator "~5.1.3"
+    http-signature "~1.2.0"
     is-typedarray "~1.0.0"
     isstream "~0.1.2"
     json-stringify-safe "~5.0.1"
-    mime-types "~2.1.7"
-    node-uuid "~1.4.7"
-    oauth-sign "~0.8.1"
-    qs "~6.2.0"
-    stringstream "~0.0.4"
-    tough-cookie "~2.3.0"
-    tunnel-agent "~0.4.1"
+    mime-types "~2.1.19"
+    oauth-sign "~0.9.0"
+    performance-now "^2.1.0"
+    qs "~6.5.2"
+    safe-buffer "^5.1.2"
+    tough-cookie "~2.5.0"
+    tunnel-agent "^0.6.0"
+    uuid "^3.3.2"
 
 require-directory@^2.1.1:
   version "2.1.1"
   resolved "https://registry.yarnpkg.com/require-directory/-/require-directory-2.1.1.tgz#8c64ad5fd30dab1c976e2344ffe7f792a6a6df42"
+  integrity sha1-jGStX9MNqxyXbiNE/+f3kqam30I=
 
-require-from-string@^1.1.0:
-  version "1.2.1"
-  resolved "https://registry.yarnpkg.com/require-from-string/-/require-from-string-1.2.1.tgz#529c9ccef27380adfec9a2f965b649bbee636418"
+require-from-url@^3.1.3:
+  version "3.1.3"
+  resolved "https://registry.npm.taobao.org/require-from-url/download/require-from-url-3.1.3.tgz#e732912b557163229e47ed4c4db0a9631d7196d5"
+  integrity sha1-5zKRK1VxYyKeR+1MTbCpYx1xltU=
 
 require-main-filename@^1.0.1:
   version "1.0.1"
   resolved "https://registry.yarnpkg.com/require-main-filename/-/require-main-filename-1.0.1.tgz#97f717b69d48784f5f526a6c5aa8ffdda055a4d1"
+  integrity sha1-l/cXtp1IeE9fUmpsWqj/3aBVpNE=
+
+require-main-filename@^2.0.0:
+  version "2.0.0"
+  resolved "https://registry.npmjs.org/require-main-filename/-/require-main-filename-2.0.0.tgz#d0b329ecc7cc0f61649f62215be69af54aa8989b"
+  integrity sha512-NKN5kMDylKuldxYLSUfrbo5Tuzh4hd+2E8NPPX02mZtn1VuREQToYe/ZdlJy+J3uCpfaiGF05e7B8W0iXbQHmg==
 
 require-uncached@^1.0.3:
   version "1.0.3"
   resolved "https://registry.yarnpkg.com/require-uncached/-/require-uncached-1.0.3.tgz#4e0d56d6c9662fd31e43011c4b95aa49955421d3"
+  integrity sha1-Tg1W1slmL9MeQwEcS5WqSZVUIdM=
   dependencies:
     caller-path "^0.1.0"
     resolve-from "^1.0.0"
 
-requires-port@1.0.x, requires-port@1.x.x:
+require-yaml@0.0.1:
+  version "0.0.1"
+  resolved "https://registry.npm.taobao.org/require-yaml/download/require-yaml-0.0.1.tgz#2e1b18d913c3baa72a5a4d373b6f138ddd2c32bd"
+  integrity sha1-LhsY2RPDuqcqWk03O28Tjd0sMr0=
+  dependencies:
+    js-yaml ""
+
+requires-port@^1.0.0:
   version "1.0.0"
   resolved "https://registry.yarnpkg.com/requires-port/-/requires-port-1.0.0.tgz#925d2601d39ac485e091cf0da5c6e694dc3dcaff"
+  integrity sha1-kl0mAdOaxIXgkc8NpcbmlNw9yv8=
 
 resize-observer-polyfill@^1.5.0:
-  version "1.5.0"
-  resolved "https://registry.yarnpkg.com/resize-observer-polyfill/-/resize-observer-polyfill-1.5.0.tgz#660ff1d9712a2382baa2cad450a4716209f9ca69"
+  version "1.5.1"
+  resolved "https://registry.yarnpkg.com/resize-observer-polyfill/-/resize-observer-polyfill-1.5.1.tgz#0e9020dd3d21024458d4ebd27e23e40269810464"
+  integrity sha512-LwZrotdHOo12nQuZlHEmtuXdqGoOD0OhaxopaNFxWzInpEgaLWoVuAMbTzixuosCx2nEG58ngzW3vxdWoxIgdg==
 
-resolve-dir@^0.1.0:
-  version "0.1.1"
-  resolved "https://registry.yarnpkg.com/resolve-dir/-/resolve-dir-0.1.1.tgz#b219259a5602fac5c5c496ad894a6e8cc430261e"
+resolve-cwd@^2.0.0:
+  version "2.0.0"
+  resolved "https://registry.yarnpkg.com/resolve-cwd/-/resolve-cwd-2.0.0.tgz#00a9f7387556e27038eae232caa372a6a59b665a"
+  integrity sha1-AKn3OHVW4nA46uIyyqNypqWbZlo=
   dependencies:
-    expand-tilde "^1.2.2"
-    global-modules "^0.2.3"
+    resolve-from "^3.0.0"
+
+resolve-dir@^1.0.0, resolve-dir@^1.0.1:
+  version "1.0.1"
+  resolved "https://registry.yarnpkg.com/resolve-dir/-/resolve-dir-1.0.1.tgz#79a40644c362be82f26effe739c9bb5382046f43"
+  integrity sha1-eaQGRMNivoLybv/nOcm7U4IEb0M=
+  dependencies:
+    expand-tilde "^2.0.0"
+    global-modules "^1.0.0"
+
+resolve-from@5.0.0, resolve-from@^5.0.0:
+  version "5.0.0"
+  resolved "https://registry.yarnpkg.com/resolve-from/-/resolve-from-5.0.0.tgz#c35225843df8f776df21c57557bc087e9dfdfc69"
+  integrity sha512-qYg9KP24dD5qka9J47d0aVky0N+b4fTU89LN9iDnjB5waksiC49rvMB0PrUJQGoTmH50XPiqOvAjDfaijGxYZw==
 
 resolve-from@^1.0.0:
   version "1.0.1"
-  resolved "http://registry.npm.taobao.org/resolve-from/download/resolve-from-1.0.1.tgz#26cbfe935d1aeeeabb29bc3fe5aeb01e93d44226"
+  resolved "https://registry.yarnpkg.com/resolve-from/-/resolve-from-1.0.1.tgz#26cbfe935d1aeeeabb29bc3fe5aeb01e93d44226"
+  integrity sha1-Jsv+k10a7uq7Kbw/5a6wHpPUQiY=
+
+resolve-from@^3.0.0:
+  version "3.0.0"
+  resolved "https://registry.yarnpkg.com/resolve-from/-/resolve-from-3.0.0.tgz#b22c7af7d9d6881bc8b6e653335eebcb0a188748"
+  integrity sha1-six699nWiBvItuZTM17rywoYh0g=
+
+resolve-from@^4.0.0:
+  version "4.0.0"
+  resolved "https://registry.npmjs.org/resolve-from/-/resolve-from-4.0.0.tgz#4abcd852ad32dd7baabfe9b40e00a36db5f392e6"
+  integrity sha512-pb/MYmXstAkysRFx8piNI1tGFNQIFA3vkE3Gq4EuA1dF6gHp/+vgZqsCGJapvy8N3Q+4o7FwvquPJcnZ7RYy4g==
+
+resolve-global@1.0.0, resolve-global@^1.0.0:
+  version "1.0.0"
+  resolved "https://registry.yarnpkg.com/resolve-global/-/resolve-global-1.0.0.tgz#a2a79df4af2ca3f49bf77ef9ddacd322dad19255"
+  integrity sha512-zFa12V4OLtT5XUX/Q4VLvTfBf+Ok0SPc1FNGM/z9ctUdiU618qwKpWnd0CHs3+RqROfyEg/DhuHbMWYqcgljEw==
+  dependencies:
+    global-dirs "^0.1.1"
+
+resolve-options@^1.1.0:
+  version "1.1.0"
+  resolved "https://registry.yarnpkg.com/resolve-options/-/resolve-options-1.1.0.tgz#32bb9e39c06d67338dc9378c0d6d6074566ad131"
+  integrity sha1-MrueOcBtZzONyTeMDW1gdFZq0TE=
+  dependencies:
+    value-or-function "^3.0.0"
+
+resolve-url@^0.2.1:
+  version "0.2.1"
+  resolved "https://registry.yarnpkg.com/resolve-url/-/resolve-url-0.2.1.tgz#2c637fe77c893afd2a663fe21aa9080068e2052a"
+  integrity sha1-LGN/53yJOv0qZj/iGqkIAGjiBSo=
 
 resolve@1.1.x:
   version "1.1.7"
   resolved "https://registry.yarnpkg.com/resolve/-/resolve-1.1.7.tgz#203114d82ad2c5ed9e8e0411b3932875e889e97b"
+  integrity sha1-IDEU2CrSxe2ejgQRs5ModeiJ6Xs=
 
-resolve@^1.1.6, resolve@^1.4.0:
-  version "1.4.0"
-  resolved "https://registry.yarnpkg.com/resolve/-/resolve-1.4.0.tgz#a75be01c53da25d934a98ebd0e4c4a7312f92a86"
+resolve@^1.1.6, resolve@^1.1.7, resolve@^1.2.0, resolve@^1.4.0:
+  version "1.10.0"
+  resolved "https://registry.yarnpkg.com/resolve/-/resolve-1.10.0.tgz#3bdaaeaf45cc07f375656dfd2e54ed0810b101ba"
+  integrity sha512-3sUr9aq5OfSg2S9pNtPA9hL1FVEAjvfOC4leW0SNf/mpnaakz2a9femSd6LqAww2RaFctwyf1lCqnTHuF1rxDg==
   dependencies:
-    path-parse "^1.0.5"
+    path-parse "^1.0.6"
 
-resolve@^1.1.7:
-  version "1.2.0"
-  resolved "https://registry.yarnpkg.com/resolve/-/resolve-1.2.0.tgz#9589c3f2f6149d1417a40becc1663db6ec6bc26c"
+resolve@^1.10.0:
+  version "1.12.0"
+  resolved "https://registry.npmjs.org/resolve/-/resolve-1.12.0.tgz#3fc644a35c84a48554609ff26ec52b66fa577df6"
+  integrity sha512-B/dOmuoAik5bKcD6s6nXDCjzUKnaDvdkRyAk6rsmsKLipWj4797iothd7jmmUhWTfinVMU+wc56rYKsit2Qy4w==
+  dependencies:
+    path-parse "^1.0.6"
 
 restore-cursor@^2.0.0:
   version "2.0.0"
-  resolved "http://registry.npm.taobao.org/restore-cursor/download/restore-cursor-2.0.0.tgz#9f7ee287f82fd326d4fd162923d62129eee0dfaf"
+  resolved "https://registry.yarnpkg.com/restore-cursor/-/restore-cursor-2.0.0.tgz#9f7ee287f82fd326d4fd162923d62129eee0dfaf"
+  integrity sha1-n37ih/gv0ybU/RYpI9YhKe7g368=
   dependencies:
     onetime "^2.0.0"
     signal-exit "^3.0.2"
 
-rgb@~0.1.0:
-  version "0.1.0"
-  resolved "https://registry.yarnpkg.com/rgb/-/rgb-0.1.0.tgz#be27b291e8feffeac1bd99729721bfa40fc037b5"
+ret@~0.1.10:
+  version "0.1.15"
+  resolved "https://registry.yarnpkg.com/ret/-/ret-0.1.15.tgz#b8a4825d5bdb1fc3f6f53c2bc33f81388681c7bc"
+  integrity sha512-TTlYpa+OL+vMMNG24xSlQGEJ3B/RzEfUlLct7b5G/ytav+wPrplCpVMFuwzXbkecJrb6IYo1iFb0S9v37754mg==
 
-right-align@^0.1.1:
-  version "0.1.3"
-  resolved "https://registry.yarnpkg.com/right-align/-/right-align-0.1.3.tgz#61339b722fe6a3515689210d24e14c96148613ef"
-  dependencies:
-    align-text "^0.1.1"
+retry@^0.10.0:
+  version "0.10.1"
+  resolved "https://registry.npm.taobao.org/retry/download/retry-0.10.1.tgz#e76388d217992c252750241d3d3956fed98d8ff4"
+  integrity sha1-52OI0heZLCUnUCQdPTlW/tmNj/Q=
+
+retry@^0.12.0:
+  version "0.12.0"
+  resolved "https://registry.npm.taobao.org/retry/download/retry-0.12.0.tgz#1b42a6266a21f07421d1b0b54b7dc167b01c013b"
+  integrity sha1-G0KmJmoh8HQh0bC1S33BZ7AcATs=
+
+rfdc@^1.1.2:
+  version "1.1.2"
+  resolved "https://registry.npmjs.org/rfdc/-/rfdc-1.1.2.tgz#e6e72d74f5dc39de8f538f65e00c36c18018e349"
+  integrity sha512-92ktAgvZhBzYTIK0Mja9uen5q5J3NRVMoDkJL2VMwq6SXjVCgqvQeVP2XAaUY6HT+XpQYeLSjb3UoitBryKmdA==
 
-rimraf@2, rimraf@^2.3.3, rimraf@^2.5.4, rimraf@~2.5.1, rimraf@~2.5.4:
-  version "2.5.4"
-  resolved "https://registry.yarnpkg.com/rimraf/-/rimraf-2.5.4.tgz#96800093cbf1a0c86bd95b4625467535c29dfa04"
+rgb-regex@^1.0.1:
+  version "1.0.1"
+  resolved "https://registry.yarnpkg.com/rgb-regex/-/rgb-regex-1.0.1.tgz#c0e0d6882df0e23be254a475e8edd41915feaeb1"
+  integrity sha1-wODWiC3w4jviVKR16O3UGRX+rrE=
+
+rgba-regex@^1.0.0:
+  version "1.0.0"
+  resolved "https://registry.yarnpkg.com/rgba-regex/-/rgba-regex-1.0.0.tgz#43374e2e2ca0968b0ef1523460b7d730ff22eeb3"
+  integrity sha1-QzdOLiyglosO8VI0YLfXMP8i7rM=
+
+rimraf@2, rimraf@^2.5.2, rimraf@^2.6.3:
+  version "2.7.1"
+  resolved "https://registry.npmjs.org/rimraf/-/rimraf-2.7.1.tgz#35797f13a7fdadc566142c29d4f07ccad483e3ec"
+  integrity sha512-uWjbaKIK3T1OSVptzX7Nl6PvQ3qAGtKEtVRjRuazjfL3Bx5eI409VZSqgND+4UNnmzLVdPj9FqFJNPqBZFve4w==
   dependencies:
-    glob "^7.0.5"
+    glob "^7.1.3"
 
-rimraf@^2.2.8, rimraf@^2.6.1:
-  version "2.6.2"
-  resolved "http://registry.npm.taobao.org/rimraf/download/rimraf-2.6.2.tgz#2ed8150d24a16ea8651e6d6ef0f47c4158ce7a36"
+rimraf@^2.2.8, rimraf@^2.5.4, rimraf@^2.6.0, rimraf@^2.6.1, rimraf@^2.6.2, rimraf@~2.6.2:
+  version "2.6.3"
+  resolved "https://registry.yarnpkg.com/rimraf/-/rimraf-2.6.3.tgz#b2d104fe0d8fb27cf9e0a1cda8262dd3833c6cab"
+  integrity sha512-mwqeW5XsA2qAejG46gYdENaxXjx9onRNCfn7L0duuP4hCuTIi/QO7PDK07KJfp1d+izWPrzEJDcSqBa0OZQriA==
   dependencies:
-    glob "^7.0.5"
+    glob "^7.1.3"
 
 ripemd160@^2.0.0, ripemd160@^2.0.1:
-  version "2.0.1"
-  resolved "https://registry.yarnpkg.com/ripemd160/-/ripemd160-2.0.1.tgz#0f4584295c53a3628af7e6d79aca21ce57d1c6e7"
+  version "2.0.2"
+  resolved "https://registry.yarnpkg.com/ripemd160/-/ripemd160-2.0.2.tgz#a1c1a6f624751577ba5d07914cbc92850585890c"
+  integrity sha512-ii4iagi25WusVoiC4B4lq7pbXfAp3D9v5CwfkY33vffw2+pkDjY1D8GaN7spsxvCSx8dkPqOZCEZyfxcmJG2IA==
   dependencies:
-    hash-base "^2.0.0"
+    hash-base "^3.0.0"
     inherits "^2.0.1"
 
 run-async@^2.2.0:
   version "2.3.0"
-  resolved "http://registry.npm.taobao.org/run-async/download/run-async-2.3.0.tgz#0371ab4ae0bdd720d4166d7dfda64ff7a445a6c0"
+  resolved "https://registry.yarnpkg.com/run-async/-/run-async-2.3.0.tgz#0371ab4ae0bdd720d4166d7dfda64ff7a445a6c0"
+  integrity sha1-A3GrSuC91yDUFm19/aZP96RFpsA=
   dependencies:
     is-promise "^2.1.0"
 
+run-node@^1.0.0:
+  version "1.0.0"
+  resolved "https://registry.yarnpkg.com/run-node/-/run-node-1.0.0.tgz#46b50b946a2aa2d4947ae1d886e9856fd9cabe5e"
+  integrity sha512-kc120TBlQ3mih1LSzdAJXo4xn/GWS2ec0l3S+syHDXP9uRr0JAT8Qd3mdMuyjqCzeZktgP3try92cEgf9Nks8A==
+
+run-queue@^1.0.0, run-queue@^1.0.3:
+  version "1.0.3"
+  resolved "https://registry.yarnpkg.com/run-queue/-/run-queue-1.0.3.tgz#e848396f057d223f24386924618e25694161ec47"
+  integrity sha1-6Eg5bwV9Ij8kOGkkYY4laUFh7Ec=
+  dependencies:
+    aproba "^1.1.1"
+
 rx-lite-aggregates@^4.0.8:
   version "4.0.8"
-  resolved "http://registry.npm.taobao.org/rx-lite-aggregates/download/rx-lite-aggregates-4.0.8.tgz#753b87a89a11c95467c4ac1626c4efc4e05c67be"
+  resolved "https://registry.yarnpkg.com/rx-lite-aggregates/-/rx-lite-aggregates-4.0.8.tgz#753b87a89a11c95467c4ac1626c4efc4e05c67be"
+  integrity sha1-dTuHqJoRyVRnxKwWJsTvxOBcZ74=
   dependencies:
     rx-lite "*"
 
 rx-lite@*, rx-lite@^4.0.8:
   version "4.0.8"
-  resolved "http://registry.npm.taobao.org/rx-lite/download/rx-lite-4.0.8.tgz#0b1e11af8bc44836f04a6407e92da42467b79444"
+  resolved "https://registry.yarnpkg.com/rx-lite/-/rx-lite-4.0.8.tgz#0b1e11af8bc44836f04a6407e92da42467b79444"
+  integrity sha1-Cx4Rr4vESDbwSmQH6S2kJGe3lEQ=
 
-safe-buffer@^5.0.1, safe-buffer@^5.1.0, safe-buffer@^5.1.1, safe-buffer@~5.1.0, safe-buffer@~5.1.1:
-  version "5.1.1"
-  resolved "https://registry.yarnpkg.com/safe-buffer/-/safe-buffer-5.1.1.tgz#893312af69b2123def71f57889001671eeb2c853"
+rxjs@^6.4.0:
+  version "6.4.0"
+  resolved "https://registry.yarnpkg.com/rxjs/-/rxjs-6.4.0.tgz#f3bb0fe7bda7fb69deac0c16f17b50b0b8790504"
+  integrity sha512-Z9Yfa11F6B9Sg/BK9MnqnQ+aQYicPLtilXBp2yUtDt2JRCE0h26d33EnfO3ZxoNxG0T92OUucP3Ct7cpfkdFfw==
+  dependencies:
+    tslib "^1.9.0"
 
-saladcss-bem@^0.0.1:
-  version "0.0.1"
-  resolved "https://registry.yarnpkg.com/saladcss-bem/-/saladcss-bem-0.0.1.tgz#72070014ff3f6a49a6872cfcb3946c7758f40fc2"
+safe-buffer@5.1.2, safe-buffer@^5.0.1, safe-buffer@^5.1.0, safe-buffer@^5.1.1, safe-buffer@^5.1.2, safe-buffer@~5.1.0, safe-buffer@~5.1.1:
+  version "5.1.2"
+  resolved "https://registry.yarnpkg.com/safe-buffer/-/safe-buffer-5.1.2.tgz#991ec69d296e0313747d59bdfd2b745c35f8828d"
+  integrity sha512-Gd2UZBJDkXlY7GbJxfsE8/nvKkUEU1G38c1siN6QP6a9PT9MmHB8GnpscSmMJSoF8LOIrt8ud/wPtojys4G6+g==
+
+safe-buffer@^5.2.0:
+  version "5.2.0"
+  resolved "https://registry.npm.taobao.org/safe-buffer/download/safe-buffer-5.2.0.tgz#b74daec49b1148f88c64b68d49b1e815c1f2f519"
+  integrity sha1-t02uxJsRSPiMZLaNSbHoFcHy9Rk=
+
+safe-regex@^1.1.0:
+  version "1.1.0"
+  resolved "https://registry.yarnpkg.com/safe-regex/-/safe-regex-1.1.0.tgz#40a3669f3b077d1e943d44629e157dd48023bf2e"
+  integrity sha1-QKNmnzsHfR6UPURinhV91IAjvy4=
   dependencies:
-    postcss "^5.0.8"
+    ret "~0.1.10"
 
-samsam@1.1.2, samsam@~1.1:
-  version "1.1.2"
-  resolved "https://registry.yarnpkg.com/samsam/-/samsam-1.1.2.tgz#bec11fdc83a9fda063401210e40176c3024d1567"
+"safer-buffer@>= 2.1.2 < 3", safer-buffer@^2.0.2, safer-buffer@^2.1.0, safer-buffer@~2.1.0:
+  version "2.1.2"
+  resolved "https://registry.yarnpkg.com/safer-buffer/-/safer-buffer-2.1.2.tgz#44fa161b0187b9549dd84bb91802f9bd8385cd6a"
+  integrity sha512-YZo3K82SD7Riyi0E1EQPojLz7kpepnSQI9IyPbHHg1XXXevb5dJI7tpyN2ADxGcQbHG7vcyRHk0cbwqcQriUtg==
 
-sass-graph@^2.1.1:
-  version "2.2.4"
-  resolved "https://registry.yarnpkg.com/sass-graph/-/sass-graph-2.2.4.tgz#13fbd63cd1caf0908b9fd93476ad43a51d1e0b49"
+sass-graph@2.2.5:
+  version "2.2.5"
+  resolved "https://registry.npm.taobao.org/sass-graph/download/sass-graph-2.2.5.tgz#a981c87446b8319d96dce0671e487879bd24c2e8"
+  integrity sha1-qYHIdEa4MZ2W3OBnHkh4eb0kwug=
   dependencies:
     glob "^7.0.0"
     lodash "^4.0.0"
     scss-tokenizer "^0.2.3"
-    yargs "^7.0.0"
+    yargs "^13.3.2"
 
-sass-loader@^6.0.6:
-  version "6.0.6"
-  resolved "https://registry.yarnpkg.com/sass-loader/-/sass-loader-6.0.6.tgz#e9d5e6c1f155faa32a4b26d7a9b7107c225e40f9"
+sass-loader@^7.1.0:
+  version "7.1.0"
+  resolved "https://registry.yarnpkg.com/sass-loader/-/sass-loader-7.1.0.tgz#16fd5138cb8b424bf8a759528a1972d72aad069d"
+  integrity sha512-+G+BKGglmZM2GUSfT9TLuEp6tzehHPjAMoRRItOojWIqIGPloVCMhNIQuG639eJ+y033PaGTSjLaTHts8Kw79w==
   dependencies:
-    async "^2.1.5"
-    clone-deep "^0.3.0"
+    clone-deep "^2.0.1"
     loader-utils "^1.0.1"
     lodash.tail "^4.1.1"
+    neo-async "^2.5.0"
     pify "^3.0.0"
+    semver "^5.5.0"
 
-sax@^1.1.4, sax@~1.2.1:
-  version "1.2.1"
-  resolved "https://registry.yarnpkg.com/sax/-/sax-1.2.1.tgz#7b8e656190b228e81a66aea748480d828cd2d37a"
+sax@^1.2.4, sax@~1.2.4:
+  version "1.2.4"
+  resolved "https://registry.yarnpkg.com/sax/-/sax-1.2.4.tgz#2816234e2378bddc4e5354fab5caa895df7100d9"
+  integrity sha512-NqVDv9TpANUjFm0N8uM5GxL36UgKi9/atZw+x7YFnQ8ckwFGKrl4xX4yWtrey3UJm5nP1kUbnYgLopqWNSRhWw==
 
-schema-utils@^0.3.0:
-  version "0.3.0"
-  resolved "https://registry.yarnpkg.com/schema-utils/-/schema-utils-0.3.0.tgz#f5877222ce3e931edae039f17eb3716e7137f8cf"
+schema-utils@^0.4.4, schema-utils@^0.4.5:
+  version "0.4.7"
+  resolved "https://registry.yarnpkg.com/schema-utils/-/schema-utils-0.4.7.tgz#ba74f597d2be2ea880131746ee17d0a093c68187"
+  integrity sha512-v/iwU6wvwGK8HbU9yi3/nhGzP0yGSuhQMzL6ySiec1FSrZZDkhm4noOSWzrNFo/jEc+SJY6jRTwuwbSXJPDUnQ==
+  dependencies:
+    ajv "^6.1.0"
+    ajv-keywords "^3.1.0"
+
+schema-utils@^1.0.0:
+  version "1.0.0"
+  resolved "https://registry.yarnpkg.com/schema-utils/-/schema-utils-1.0.0.tgz#0b79a93204d7b600d4b2850d1f66c2a34951c770"
+  integrity sha512-i27Mic4KovM/lnGsy8whRCHhc7VicJajAjTrYg11K9zfZXnYIt4k5F+kZkwjnrhKzLic/HLU4j11mjsz2G/75g==
   dependencies:
-    ajv "^5.0.0"
+    ajv "^6.1.0"
+    ajv-errors "^1.0.0"
+    ajv-keywords "^3.1.0"
 
 scss-tokenizer@^0.2.3:
   version "0.2.3"
-  resolved "https://registry.yarnpkg.com/scss-tokenizer/-/scss-tokenizer-0.2.3.tgz#8eb06db9a9723333824d3f5530641149847ce5d1"
+  resolved "https://registry.npm.taobao.org/scss-tokenizer/download/scss-tokenizer-0.2.3.tgz#8eb06db9a9723333824d3f5530641149847ce5d1"
+  integrity sha1-jrBtualyMzOCTT9VMGQRSYR85dE=
   dependencies:
     js-base64 "^2.1.8"
     source-map "^0.4.2"
@@ -6897,527 +10646,891 @@ scss-tokenizer@^0.2.3:
 select-hose@^2.0.0:
   version "2.0.0"
   resolved "https://registry.yarnpkg.com/select-hose/-/select-hose-2.0.0.tgz#625d8658f865af43ec962bfc376a37359a4994ca"
+  integrity sha1-Yl2GWPhlr0Psliv8N2o3NZpJlMo=
+
+select-version-cli@^0.0.2:
+  version "0.0.2"
+  resolved "https://registry.yarnpkg.com/select-version-cli/-/select-version-cli-0.0.2.tgz#11f626f95cf7a4e2ddd59d66f51f6a5aedac87c0"
+  integrity sha512-1eKBU5kDoXmmkMAhZUa2L7fVb+lH4wfDKONSsfc9cQuVYmCzXtO14wijuHlFrx+2+/igmxlv5tt439726gfPaA==
+  dependencies:
+    commander "^2.19.0"
+    inquirer "^6.2.2"
+    semver "^5.6.0"
 
 selfsigned@^1.9.1:
-  version "1.10.1"
-  resolved "https://registry.yarnpkg.com/selfsigned/-/selfsigned-1.10.1.tgz#bf8cb7b83256c4551e31347c6311778db99eec52"
+  version "1.10.4"
+  resolved "https://registry.yarnpkg.com/selfsigned/-/selfsigned-1.10.4.tgz#cdd7eccfca4ed7635d47a08bf2d5d3074092e2cd"
+  integrity sha512-9AukTiDmHXGXWtWjembZ5NDmVvP2695EtpgbCsxCa68w3c88B+alqbmZ4O3hZ4VWGXeGWzEVdvqgAJD8DQPCDw==
   dependencies:
-    node-forge "0.6.33"
+    node-forge "0.7.5"
 
-"semver@2 || 3 || 4 || 5", semver@^5.1.0, semver@~5.3.0:
-  version "5.3.0"
-  resolved "https://registry.yarnpkg.com/semver/-/semver-5.3.0.tgz#9b2ce5d3de02d17c6012ad326aa6b4d0cf54f94f"
+semver-compare@^1.0.0:
+  version "1.0.0"
+  resolved "https://registry.yarnpkg.com/semver-compare/-/semver-compare-1.0.0.tgz#0dee216a1c941ab37e9efb1788f6afc5ff5537fc"
+  integrity sha1-De4hahyUGrN+nvsXiPavxf9VN/w=
+
+semver-diff@^2.0.0:
+  version "2.1.0"
+  resolved "https://registry.npm.taobao.org/semver-diff/download/semver-diff-2.1.0.tgz?cache=0&sync_timestamp=1571064277579&other_urls=https%3A%2F%2Fregistry.npm.taobao.org%2Fsemver-diff%2Fdownload%2Fsemver-diff-2.1.0.tgz#4bbb8437c8d37e4b0cf1a68fd726ec6d645d6d36"
+  integrity sha1-S7uEN8jTfksM8aaP1ybsbWRdbTY=
+  dependencies:
+    semver "^5.0.3"
 
-semver@^4.1.0, semver@~4.3.3:
-  version "4.3.6"
-  resolved "https://registry.yarnpkg.com/semver/-/semver-4.3.6.tgz#300bc6e0e86374f7ba61068b5b1ecd57fc6532da"
+semver-greatest-satisfied-range@^1.1.0:
+  version "1.1.0"
+  resolved "https://registry.yarnpkg.com/semver-greatest-satisfied-range/-/semver-greatest-satisfied-range-1.1.0.tgz#13e8c2658ab9691cb0cd71093240280d36f77a5b"
+  integrity sha1-E+jCZYq5aRywzXEJMkAoDTb3els=
+  dependencies:
+    sver-compat "^1.5.0"
+
+"semver@2 || 3 || 4 || 5", semver@^5.1.0, semver@^5.3.0, semver@^5.5.0, semver@^5.6.0:
+  version "5.6.0"
+  resolved "https://registry.yarnpkg.com/semver/-/semver-5.6.0.tgz#7e74256fbaa49c75aa7c7a205cc22799cac80004"
+  integrity sha512-RS9R6R35NYgQn++fkDWaOmqGoj4Ek9gGs+DPxNUZKuwE183xjJroKvyo1IzVFeXvUrvmALy6FWD5xrdJT25gMg==
+
+"semver@2.x || 3.x || 4 || 5", "semver@^2.3.0 || 3.x || 4 || 5", semver@^5.0.3, semver@^5.4.1, semver@^5.5.1, semver@^5.7.1:
+  version "5.7.1"
+  resolved "https://registry.npm.taobao.org/semver/download/semver-5.7.1.tgz#a954f931aeba508d307bbf069eff0c01c96116f7"
+  integrity sha1-qVT5Ma66UI0we78Gnv8MAclhFvc=
+
+semver@6.2.0:
+  version "6.2.0"
+  resolved "https://registry.yarnpkg.com/semver/-/semver-6.2.0.tgz#4d813d9590aaf8a9192693d6c85b9344de5901db"
+  integrity sha512-jdFC1VdUGT/2Scgbimf7FSx9iJLXoqfglSF+gJeuNWVpiE37OIbc1jywR/GJyFdz3mnkz2/id0L0J/cr0izR5A==
+
+semver@6.3.0, semver@^6.0.0:
+  version "6.3.0"
+  resolved "https://registry.npmjs.org/semver/-/semver-6.3.0.tgz#ee0a64c8af5e8ceea67687b133761e1becbd1d3d"
+  integrity sha512-b39TBaTSfV6yBrapU89p5fKekE2m/NwnDocOVruQFS1/veMgdzuPcnOM34M6CwxW8jH/lxEa5rBoDeUwu5HHTw==
 
-semver@^5.3.0:
-  version "5.4.1"
-  resolved "http://registry.npm.taobao.org/semver/download/semver-5.4.1.tgz#e059c09d8571f0540823733433505d3a2f00b18e"
+semver@~5.3.0:
+  version "5.3.0"
+  resolved "https://registry.npm.taobao.org/semver/download/semver-5.3.0.tgz?cache=0&sync_timestamp=1589682805026&other_urls=https%3A%2F%2Fregistry.npm.taobao.org%2Fsemver%2Fdownload%2Fsemver-5.3.0.tgz#9b2ce5d3de02d17c6012ad326aa6b4d0cf54f94f"
+  integrity sha1-myzl094C0XxgEq0yaqa00M9U+U8=
 
-send@0.14.1:
-  version "0.14.1"
-  resolved "https://registry.yarnpkg.com/send/-/send-0.14.1.tgz#a954984325392f51532a7760760e459598c89f7a"
+send@0.16.2:
+  version "0.16.2"
+  resolved "https://registry.yarnpkg.com/send/-/send-0.16.2.tgz#6ecca1e0f8c156d141597559848df64730a6bbc1"
+  integrity sha512-E64YFPUssFHEFBvpbbjr44NCLtI1AohxQ8ZSiJjQLskAdKuriYEP6VyGEsRDH8ScozGpkaX1BGvhanqCwkcEZw==
   dependencies:
-    debug "~2.2.0"
-    depd "~1.1.0"
+    debug "2.6.9"
+    depd "~1.1.2"
     destroy "~1.0.4"
-    encodeurl "~1.0.1"
+    encodeurl "~1.0.2"
     escape-html "~1.0.3"
-    etag "~1.7.0"
-    fresh "0.3.0"
-    http-errors "~1.5.0"
-    mime "1.3.4"
-    ms "0.7.1"
+    etag "~1.8.1"
+    fresh "0.5.2"
+    http-errors "~1.6.2"
+    mime "1.4.1"
+    ms "2.0.0"
     on-finished "~2.3.0"
     range-parser "~1.2.0"
-    statuses "~1.3.0"
+    statuses "~1.4.0"
 
-sequencify@~0.0.7:
-  version "0.0.7"
-  resolved "https://registry.yarnpkg.com/sequencify/-/sequencify-0.0.7.tgz#90cff19d02e07027fd767f5ead3e7b95d1e7380c"
+serialize-javascript@^1.4.0:
+  version "1.6.1"
+  resolved "https://registry.yarnpkg.com/serialize-javascript/-/serialize-javascript-1.6.1.tgz#4d1f697ec49429a847ca6f442a2a755126c4d879"
+  integrity sha512-A5MOagrPFga4YaKQSWHryl7AXvbQkEqpw4NNYMTNYUNV51bA8ABHgYFpqKx+YFFrw59xMV1qGH1R4AgoNIVgCw==
 
 serve-index@^1.7.2:
-  version "1.8.0"
-  resolved "https://registry.yarnpkg.com/serve-index/-/serve-index-1.8.0.tgz#7c5d96c13fb131101f93c1c5774f8516a1e78d3b"
+  version "1.9.1"
+  resolved "https://registry.yarnpkg.com/serve-index/-/serve-index-1.9.1.tgz#d3768d69b1e7d82e5ce050fff5b453bea12a9239"
+  integrity sha1-03aNabHn2C5c4FD/9bRTvqEqkjk=
   dependencies:
-    accepts "~1.3.3"
-    batch "0.5.3"
-    debug "~2.2.0"
+    accepts "~1.3.4"
+    batch "0.6.1"
+    debug "2.6.9"
     escape-html "~1.0.3"
-    http-errors "~1.5.0"
-    mime-types "~2.1.11"
-    parseurl "~1.3.1"
+    http-errors "~1.6.2"
+    mime-types "~2.1.17"
+    parseurl "~1.3.2"
 
-serve-static@~1.11.1:
-  version "1.11.1"
-  resolved "https://registry.yarnpkg.com/serve-static/-/serve-static-1.11.1.tgz#d6cce7693505f733c759de57befc1af76c0f0805"
+serve-static@1.13.2:
+  version "1.13.2"
+  resolved "https://registry.yarnpkg.com/serve-static/-/serve-static-1.13.2.tgz#095e8472fd5b46237db50ce486a43f4b86c6cec1"
+  integrity sha512-p/tdJrO4U387R9oMjb1oj7qSMaMfmOyd4j9hOFoxZe2baQszgHcSWjuya/CiT5kgZZKRudHNOA0pYXOl8rQ5nw==
   dependencies:
-    encodeurl "~1.0.1"
+    encodeurl "~1.0.2"
     escape-html "~1.0.3"
-    parseurl "~1.3.1"
-    send "0.14.1"
+    parseurl "~1.3.2"
+    send "0.16.2"
 
 set-blocking@^2.0.0, set-blocking@~2.0.0:
   version "2.0.0"
   resolved "https://registry.yarnpkg.com/set-blocking/-/set-blocking-2.0.0.tgz#045f9782d011ae9a6803ddd382b24392b3d890f7"
+  integrity sha1-BF+XgtARrppoA93TgrJDkrPYkPc=
 
-set-immediate-shim@^1.0.1:
-  version "1.0.1"
-  resolved "https://registry.yarnpkg.com/set-immediate-shim/-/set-immediate-shim-1.0.1.tgz#4b2b1b27eb808a9f8dcc481a58e5e56f599f3f61"
+set-value@^0.4.3:
+  version "0.4.3"
+  resolved "https://registry.yarnpkg.com/set-value/-/set-value-0.4.3.tgz#7db08f9d3d22dc7f78e53af3c3bf4666ecdfccf1"
+  integrity sha1-fbCPnT0i3H945Trzw79GZuzfzPE=
+  dependencies:
+    extend-shallow "^2.0.1"
+    is-extendable "^0.1.1"
+    is-plain-object "^2.0.1"
+    to-object-path "^0.3.0"
+
+set-value@^2.0.0:
+  version "2.0.0"
+  resolved "https://registry.yarnpkg.com/set-value/-/set-value-2.0.0.tgz#71ae4a88f0feefbbf52d1ea604f3fb315ebb6274"
+  integrity sha512-hw0yxk9GT/Hr5yJEYnHNKYXkIA8mVJgd9ditYZCe16ZczcaELYYcfvaXesNACk2O8O0nTiPQcQhGUQj8JLzeeg==
+  dependencies:
+    extend-shallow "^2.0.1"
+    is-extendable "^0.1.1"
+    is-plain-object "^2.0.3"
+    split-string "^3.0.1"
 
 setimmediate@^1.0.4:
   version "1.0.5"
   resolved "https://registry.yarnpkg.com/setimmediate/-/setimmediate-1.0.5.tgz#290cbb232e306942d7d7ea9b83732ab7856f8285"
+  integrity sha1-KQy7Iy4waULX1+qbg3Mqt4VvgoU=
 
-setprototypeof@1.0.2:
-  version "1.0.2"
-  resolved "https://registry.yarnpkg.com/setprototypeof/-/setprototypeof-1.0.2.tgz#81a552141ec104b88e89ce383103ad5c66564d08"
+setprototypeof@1.1.0:
+  version "1.1.0"
+  resolved "https://registry.yarnpkg.com/setprototypeof/-/setprototypeof-1.1.0.tgz#d0bd85536887b6fe7c0d818cb962d9d91c54e656"
+  integrity sha512-BvE/TwpZX4FXExxOxZyRGQQv651MSwmWKZGqvmPcRIjDqWub67kTKuIMx43cZZrS/cBBzwBcNDWoFxt2XEFIpQ==
 
 sha.js@^2.4.0, sha.js@^2.4.8:
-  version "2.4.9"
-  resolved "https://registry.yarnpkg.com/sha.js/-/sha.js-2.4.9.tgz#98f64880474b74f4a38b8da9d3c0f2d104633e7d"
+  version "2.4.11"
+  resolved "https://registry.yarnpkg.com/sha.js/-/sha.js-2.4.11.tgz#37a5cf0b81ecbc6943de109ba2960d1b26584ae7"
+  integrity sha512-QMEp5B7cftE7APOjk5Y6xgrbWu+WkLVQwk8JNjZ8nKRciZaByEW6MubieAiToS7+dwvrjGhH8jRXz3MVd0AYqQ==
   dependencies:
     inherits "^2.0.1"
     safe-buffer "^5.0.1"
 
-shallow-clone@^0.1.2:
-  version "0.1.2"
-  resolved "https://registry.yarnpkg.com/shallow-clone/-/shallow-clone-0.1.2.tgz#5909e874ba77106d73ac414cfec1ffca87d97060"
+sha@^3.0.0:
+  version "3.0.0"
+  resolved "https://registry.npm.taobao.org/sha/download/sha-3.0.0.tgz?cache=0&other_urls=https%3A%2F%2Fregistry.npm.taobao.org%2Fsha%2Fdownload%2Fsha-3.0.0.tgz#b2f2f90af690c16a3a839a6a6c680ea51fedd1ae"
+  integrity sha1-svL5CvaQwWo6g5pqbGgOpR/t0a4=
+  dependencies:
+    graceful-fs "^4.1.2"
+
+shallow-clone@^1.0.0:
+  version "1.0.0"
+  resolved "https://registry.yarnpkg.com/shallow-clone/-/shallow-clone-1.0.0.tgz#4480cd06e882ef68b2ad88a3ea54832e2c48b571"
+  integrity sha512-oeXreoKR/SyNJtRJMAKPDSvd28OqEwG4eR/xc856cRGBII7gX9lvAqDxusPm0846z/w/hWYjI1NpKwJ00NHzRA==
   dependencies:
     is-extendable "^0.1.1"
-    kind-of "^2.0.1"
-    lazy-cache "^0.2.3"
+    kind-of "^5.0.0"
     mixin-object "^2.0.1"
 
+shallowequal@^1.1.0:
+  version "1.1.0"
+  resolved "https://registry.yarnpkg.com/shallowequal/-/shallowequal-1.1.0.tgz#188d521de95b9087404fd4dcb68b13df0ae4e7f8"
+  integrity sha512-y0m1JoUZSlPAjXVtPPW70aZWfIL/dSP7AFkRnniLCrK/8MDKog3TySTBmckD+RObVxH0v4Tox67+F14PdED2oQ==
+
 shebang-command@^1.2.0:
   version "1.2.0"
-  resolved "http://registry.npm.taobao.org/shebang-command/download/shebang-command-1.2.0.tgz#44aac65b695b03398968c39f363fee5deafdf1ea"
+  resolved "https://registry.yarnpkg.com/shebang-command/-/shebang-command-1.2.0.tgz#44aac65b695b03398968c39f363fee5deafdf1ea"
+  integrity sha1-RKrGW2lbAzmJaMOfNj/uXer98eo=
   dependencies:
     shebang-regex "^1.0.0"
 
 shebang-regex@^1.0.0:
   version "1.0.0"
-  resolved "http://registry.npm.taobao.org/shebang-regex/download/shebang-regex-1.0.0.tgz#da42f49740c0b42db2ca9728571cb190c98efea3"
-
-shelljs@0.3.x:
-  version "0.3.0"
-  resolved "http://registry.npm.taobao.org/shelljs/download/shelljs-0.3.0.tgz#3596e6307a781544f591f37da618360f31db57b1"
-
-shelljs@^0.7.0:
-  version "0.7.5"
-  resolved "https://registry.yarnpkg.com/shelljs/-/shelljs-0.7.5.tgz#2eef7a50a21e1ccf37da00df767ec69e30ad0675"
-  dependencies:
-    glob "^7.0.0"
-    interpret "^1.0.0"
-    rechoir "^0.6.2"
+  resolved "https://registry.yarnpkg.com/shebang-regex/-/shebang-regex-1.0.0.tgz#da42f49740c0b42db2ca9728571cb190c98efea3"
+  integrity sha1-2kL0l0DAtC2yypcoVxyxkMmO/qM=
 
-sigmund@~1.0.0:
+sigmund@^1.0.1:
   version "1.0.1"
-  resolved "https://registry.yarnpkg.com/sigmund/-/sigmund-1.0.1.tgz#3ff21f198cad2175f9f3b781853fd94d0d19b590"
+  resolved "https://registry.npm.taobao.org/sigmund/download/sigmund-1.0.1.tgz#3ff21f198cad2175f9f3b781853fd94d0d19b590"
+  integrity sha1-P/IfGYytIXX587eBhT/ZTQ0ZtZA=
 
 signal-exit@^3.0.0, signal-exit@^3.0.2:
   version "3.0.2"
   resolved "https://registry.yarnpkg.com/signal-exit/-/signal-exit-3.0.2.tgz#b5fdc08f1287ea1178628e415e25132b73646c6d"
+  integrity sha1-tf3AjxKH6hF4Yo5BXiUTK3NkbG0=
 
-sinon-chai@^2.8.0:
-  version "2.8.0"
-  resolved "https://registry.yarnpkg.com/sinon-chai/-/sinon-chai-2.8.0.tgz#432a9bbfd51a6fc00798f4d2526a829c060687ac"
+simple-html-tokenizer@^0.1.1:
+  version "0.1.1"
+  resolved "https://registry.yarnpkg.com/simple-html-tokenizer/-/simple-html-tokenizer-0.1.1.tgz#05c2eec579ffffe145a030ac26cfea61b980fabe"
+  integrity sha1-BcLuxXn//+FFoDCsJs/qYbmA+r4=
 
-sinon@^1.17.6:
-  version "1.17.6"
-  resolved "https://registry.yarnpkg.com/sinon/-/sinon-1.17.6.tgz#a43116db59577c8296356afee13fafc2332e58e1"
+simple-swizzle@^0.2.2:
+  version "0.2.2"
+  resolved "https://registry.yarnpkg.com/simple-swizzle/-/simple-swizzle-0.2.2.tgz#a4da6b635ffcccca33f70d17cb92592de95e557a"
+  integrity sha1-pNprY1/8zMoz9w0Xy5JZLeleVXo=
   dependencies:
-    formatio "1.1.1"
-    lolex "1.3.2"
-    samsam "1.1.2"
-    util ">=0.10.3 <1"
+    is-arrayish "^0.3.1"
+
+sinon-chai@^3.3.0:
+  version "3.3.0"
+  resolved "https://registry.npmjs.org/sinon-chai/-/sinon-chai-3.3.0.tgz#8084ff99451064910fbe2c2cb8ab540c00b740ea"
+  integrity sha512-r2JhDY7gbbmh5z3Q62pNbrjxZdOAjpsqW/8yxAZRSqLZqowmfGZPGUZPFf3UX36NLis0cv8VEM5IJh9HgkSOAA==
+
+sinon@^7.2.7:
+  version "7.2.7"
+  resolved "https://registry.npmjs.org/sinon/-/sinon-7.2.7.tgz#ee90f83ce87d9a6bac42cf32a3103d8c8b1bfb68"
+  integrity sha512-rlrre9F80pIQr3M36gOdoCEWzFAMDgHYD8+tocqOw+Zw9OZ8F84a80Ds69eZfcjnzDqqG88ulFld0oin/6rG/g==
+  dependencies:
+    "@sinonjs/commons" "^1.3.1"
+    "@sinonjs/formatio" "^3.2.1"
+    "@sinonjs/samsam" "^3.2.0"
+    diff "^3.5.0"
+    lolex "^3.1.0"
+    nise "^1.4.10"
+    supports-color "^5.5.0"
 
 slash@^1.0.0:
   version "1.0.0"
   resolved "https://registry.yarnpkg.com/slash/-/slash-1.0.0.tgz#c41f2f6c39fc16d1cd17ad4b5d896114ae470d55"
+  integrity sha1-xB8vbDn8FtHNF61LXYlhFK5HDVU=
+
+slash@^2.0.0:
+  version "2.0.0"
+  resolved "https://registry.yarnpkg.com/slash/-/slash-2.0.0.tgz#de552851a1759df3a8f206535442f5ec4ddeab44"
+  integrity sha512-ZYKh3Wh2z1PpEXWr0MpSBZ0V6mZHAQfYevttO11c51CaWjGTaadiKZ+wVt1PbMlDV5qhMFslpZCemhwOK7C89A==
 
 slice-ansi@1.0.0:
   version "1.0.0"
-  resolved "http://registry.npm.taobao.org/slice-ansi/download/slice-ansi-1.0.0.tgz#044f1a49d8842ff307aad6b505ed178bd950134d"
+  resolved "https://registry.yarnpkg.com/slice-ansi/-/slice-ansi-1.0.0.tgz#044f1a49d8842ff307aad6b505ed178bd950134d"
+  integrity sha512-POqxBK6Lb3q6s047D/XsDVNPnF9Dl8JSaqe9h9lURl0OdNqy/ujDrOiIHtsqXMGbWWTIomRzAMaTyawAU//Reg==
   dependencies:
     is-fullwidth-code-point "^2.0.0"
 
-sntp@1.x.x:
-  version "1.0.9"
-  resolved "https://registry.yarnpkg.com/sntp/-/sntp-1.0.9.tgz#6541184cc90aeea6c6e7b35e2659082443c66198"
+slide@^1.1.6, slide@~1.1.3, slide@~1.1.6:
+  version "1.1.6"
+  resolved "https://registry.npm.taobao.org/slide/download/slide-1.1.6.tgz#56eb027d65b4d2dce6cb2e2d32c4d4afc9e1d707"
+  integrity sha1-VusCfWW00tzmyy4tMsTUr8nh1wc=
+
+smart-buffer@^4.1.0:
+  version "4.1.0"
+  resolved "https://registry.npm.taobao.org/smart-buffer/download/smart-buffer-4.1.0.tgz#91605c25d91652f4661ea69ccf45f1b331ca21ba"
+  integrity sha1-kWBcJdkWUvRmHqacz0XxszHKIbo=
+
+snapdragon-node@^2.0.1:
+  version "2.1.1"
+  resolved "https://registry.yarnpkg.com/snapdragon-node/-/snapdragon-node-2.1.1.tgz#6c175f86ff14bdb0724563e8f3c1b021a286853b"
+  integrity sha512-O27l4xaMYt/RSQ5TR3vpWCAB5Kb/czIcqUFOM/C4fYcLnbZUc1PkjTAMjof2pBWaSTwOUd6qUHcFGVGj7aIwnw==
   dependencies:
-    hoek "2.x.x"
+    define-property "^1.0.0"
+    isobject "^3.0.0"
+    snapdragon-util "^3.0.1"
 
-socket.io-adapter@0.4.0:
-  version "0.4.0"
-  resolved "https://registry.yarnpkg.com/socket.io-adapter/-/socket.io-adapter-0.4.0.tgz#fb9f82ab1aa65290bf72c3657955b930a991a24f"
+snapdragon-util@^3.0.1:
+  version "3.0.1"
+  resolved "https://registry.yarnpkg.com/snapdragon-util/-/snapdragon-util-3.0.1.tgz#f956479486f2acd79700693f6f7b805e45ab56e2"
+  integrity sha512-mbKkMdQKsjX4BAL4bRYTj21edOf8cN7XHdYUJEe+Zn99hVEYcMvKPct1IqNe7+AZPirn8BCDOQBHQZknqmKlZQ==
+  dependencies:
+    kind-of "^3.2.0"
+
+snapdragon@^0.8.1:
+  version "0.8.2"
+  resolved "https://registry.yarnpkg.com/snapdragon/-/snapdragon-0.8.2.tgz#64922e7c565b0e14204ba1aa7d6964278d25182d"
+  integrity sha512-FtyOnWN/wCHTVXOMwvSv26d+ko5vWlIDD6zoUJ7LW8vh+ZBC8QdljveRP+crNrtBwioEUWy/4dMtbBjA4ioNlg==
   dependencies:
-    debug "2.2.0"
-    socket.io-parser "2.2.2"
+    base "^0.11.1"
+    debug "^2.2.0"
+    define-property "^0.2.5"
+    extend-shallow "^2.0.1"
+    map-cache "^0.2.2"
+    source-map "^0.5.6"
+    source-map-resolve "^0.5.0"
+    use "^3.1.0"
+
+socket.io-adapter@~1.1.0:
+  version "1.1.1"
+  resolved "https://registry.npmjs.org/socket.io-adapter/-/socket.io-adapter-1.1.1.tgz#2a805e8a14d6372124dd9159ad4502f8cb07f06b"
+  integrity sha1-KoBeihTWNyEk3ZFZrUUC+MsH8Gs=
 
-socket.io-client@1.4.6:
-  version "1.4.6"
-  resolved "https://registry.yarnpkg.com/socket.io-client/-/socket.io-client-1.4.6.tgz#49b0ba537efd15b8297c84016e642e1c7c752c3d"
+socket.io-client@2.1.1:
+  version "2.1.1"
+  resolved "https://registry.npmjs.org/socket.io-client/-/socket.io-client-2.1.1.tgz#dcb38103436ab4578ddb026638ae2f21b623671f"
+  integrity sha512-jxnFyhAuFxYfjqIgduQlhzqTcOEQSn+OHKVfAxWaNWa7ecP7xSNk2Dx/3UEsDcY7NcFafxvNvKPmmO7HTwTxGQ==
   dependencies:
     backo2 "1.0.2"
+    base64-arraybuffer "0.1.5"
     component-bind "1.0.0"
-    component-emitter "1.2.0"
-    debug "2.2.0"
-    engine.io-client "1.6.9"
-    has-binary "0.1.7"
+    component-emitter "1.2.1"
+    debug "~3.1.0"
+    engine.io-client "~3.2.0"
+    has-binary2 "~1.0.2"
+    has-cors "1.1.0"
     indexof "0.0.1"
     object-component "0.0.3"
-    parseuri "0.0.4"
-    socket.io-parser "2.2.6"
+    parseqs "0.0.5"
+    parseuri "0.0.5"
+    socket.io-parser "~3.2.0"
     to-array "0.1.4"
 
-socket.io-parser@2.2.2:
-  version "2.2.2"
-  resolved "https://registry.yarnpkg.com/socket.io-parser/-/socket.io-parser-2.2.2.tgz#3d7af6b64497e956b7d9fe775f999716027f9417"
-  dependencies:
-    benchmark "1.0.0"
-    component-emitter "1.1.2"
-    debug "0.7.4"
-    isarray "0.0.1"
-    json3 "3.2.6"
-
-socket.io-parser@2.2.6:
-  version "2.2.6"
-  resolved "https://registry.yarnpkg.com/socket.io-parser/-/socket.io-parser-2.2.6.tgz#38dfd61df50dcf8ab1d9e2091322bf902ba28b99"
+socket.io-parser@~3.2.0:
+  version "3.2.0"
+  resolved "https://registry.npmjs.org/socket.io-parser/-/socket.io-parser-3.2.0.tgz#e7c6228b6aa1f814e6148aea325b51aa9499e077"
+  integrity sha512-FYiBx7rc/KORMJlgsXysflWx/RIvtqZbyGLlHZvjfmPTPeuD/I8MaW7cfFrj5tRltICJdgwflhfZ3NVVbVLFQA==
   dependencies:
-    benchmark "1.0.0"
-    component-emitter "1.1.2"
-    debug "2.2.0"
-    isarray "0.0.1"
-    json3 "3.3.2"
+    component-emitter "1.2.1"
+    debug "~3.1.0"
+    isarray "2.0.1"
 
-socket.io@1.4.7:
-  version "1.4.7"
-  resolved "https://registry.yarnpkg.com/socket.io/-/socket.io-1.4.7.tgz#92b7f7cb88c5797d4daee279fe8075dbe6d3fa1c"
+socket.io@2.1.1:
+  version "2.1.1"
+  resolved "https://registry.npmjs.org/socket.io/-/socket.io-2.1.1.tgz#a069c5feabee3e6b214a75b40ce0652e1cfb9980"
+  integrity sha512-rORqq9c+7W0DAK3cleWNSyfv/qKXV99hV4tZe+gGLfBECw3XEhBy7x85F3wypA9688LKjtwO9pX9L33/xQI8yA==
   dependencies:
-    debug "2.2.0"
-    engine.io "1.6.10"
-    has-binary "0.1.7"
-    socket.io-adapter "0.4.0"
-    socket.io-client "1.4.6"
-    socket.io-parser "2.2.6"
+    debug "~3.1.0"
+    engine.io "~3.2.0"
+    has-binary2 "~1.0.2"
+    socket.io-adapter "~1.1.0"
+    socket.io-client "2.1.1"
+    socket.io-parser "~3.2.0"
 
-sockjs-client@1.1.4:
-  version "1.1.4"
-  resolved "https://registry.yarnpkg.com/sockjs-client/-/sockjs-client-1.1.4.tgz#5babe386b775e4cf14e7520911452654016c8b12"
+sockjs-client@1.3.0:
+  version "1.3.0"
+  resolved "https://registry.yarnpkg.com/sockjs-client/-/sockjs-client-1.3.0.tgz#12fc9d6cb663da5739d3dc5fb6e8687da95cb177"
+  integrity sha512-R9jxEzhnnrdxLCNln0xg5uGHqMnkhPSTzUZH2eXcR03S/On9Yvoq2wyUZILRUhZCNVu2PmwWVoyuiPz8th8zbg==
   dependencies:
-    debug "^2.6.6"
-    eventsource "0.1.6"
-    faye-websocket "~0.11.0"
-    inherits "^2.0.1"
+    debug "^3.2.5"
+    eventsource "^1.0.7"
+    faye-websocket "~0.11.1"
+    inherits "^2.0.3"
     json3 "^3.3.2"
-    url-parse "^1.1.8"
+    url-parse "^1.4.3"
 
-sockjs@0.3.18:
-  version "0.3.18"
-  resolved "https://registry.yarnpkg.com/sockjs/-/sockjs-0.3.18.tgz#d9b289316ca7df77595ef299e075f0f937eb4207"
+sockjs@0.3.19:
+  version "0.3.19"
+  resolved "https://registry.yarnpkg.com/sockjs/-/sockjs-0.3.19.tgz#d976bbe800af7bd20ae08598d582393508993c0d"
+  integrity sha512-V48klKZl8T6MzatbLlzzRNhMepEys9Y4oGFpypBFFn1gLI/QQ9HtLLyWJNbPlwGLelOVOEijUbTTJeLLI59jLw==
   dependencies:
     faye-websocket "^0.10.0"
-    uuid "^2.0.2"
+    uuid "^3.0.1"
 
-sort-keys@^1.0.0:
-  version "1.1.2"
-  resolved "https://registry.yarnpkg.com/sort-keys/-/sort-keys-1.1.2.tgz#441b6d4d346798f1b4e49e8920adfba0e543f9ad"
+socks-proxy-agent@^4.0.0:
+  version "4.0.2"
+  resolved "https://registry.npm.taobao.org/socks-proxy-agent/download/socks-proxy-agent-4.0.2.tgz#3c8991f3145b2799e70e11bd5fbc8b1963116386"
+  integrity sha1-PImR8xRbJ5nnDhG9X7yLGWMRY4Y=
+  dependencies:
+    agent-base "~4.2.1"
+    socks "~2.3.2"
+
+socks@~2.3.2:
+  version "2.3.3"
+  resolved "https://registry.npm.taobao.org/socks/download/socks-2.3.3.tgz?cache=0&other_urls=https%3A%2F%2Fregistry.npm.taobao.org%2Fsocks%2Fdownload%2Fsocks-2.3.3.tgz#01129f0a5d534d2b897712ed8aceab7ee65d78e3"
+  integrity sha1-ARKfCl1TTSuJdxLtis6rfuZdeOM=
+  dependencies:
+    ip "1.1.5"
+    smart-buffer "^4.1.0"
+
+sorted-object@~2.0.1:
+  version "2.0.1"
+  resolved "https://registry.npm.taobao.org/sorted-object/download/sorted-object-2.0.1.tgz#7d631f4bd3a798a24af1dffcfbfe83337a5df5fc"
+  integrity sha1-fWMfS9OnmKJK8d/8+/6DM3pd9fw=
+
+sorted-union-stream@~2.1.3:
+  version "2.1.3"
+  resolved "https://registry.npm.taobao.org/sorted-union-stream/download/sorted-union-stream-2.1.3.tgz#c7794c7e077880052ff71a8d4a2dbb4a9a638ac7"
+  integrity sha1-x3lMfgd4gAUv9xqNSi27Sppjisc=
   dependencies:
-    is-plain-obj "^1.0.0"
+    from2 "^1.3.0"
+    stream-iterate "^1.1.0"
 
 source-list-map@^2.0.0:
-  version "2.0.0"
-  resolved "https://registry.yarnpkg.com/source-list-map/-/source-list-map-2.0.0.tgz#aaa47403f7b245a92fbc97ea08f250d6087ed085"
+  version "2.0.1"
+  resolved "https://registry.yarnpkg.com/source-list-map/-/source-list-map-2.0.1.tgz#3993bd873bfc48479cca9ea3a547835c7c154b34"
+  integrity sha512-qnQ7gVMxGNxsiL4lEuJwe/To8UnK7fAnmbGEEH8RpLouuKbeEm0lhbQVFIrNSuB+G7tVrAlVsZgETT5nljf+Iw==
 
-source-map-support@^0.4.2:
-  version "0.4.6"
-  resolved "https://registry.yarnpkg.com/source-map-support/-/source-map-support-0.4.6.tgz#32552aa64b458392a85eab3b0b5ee61527167aeb"
+source-map-resolve@^0.5.0:
+  version "0.5.2"
+  resolved "https://registry.yarnpkg.com/source-map-resolve/-/source-map-resolve-0.5.2.tgz#72e2cc34095543e43b2c62b2c4c10d4a9054f259"
+  integrity sha512-MjqsvNwyz1s0k81Goz/9vRBe9SZdB09Bdw+/zYyO+3CuPk6fouTaxscHkgtE8jKvf01kVfl8riHzERQ/kefaSA==
   dependencies:
-    source-map "^0.5.3"
+    atob "^2.1.1"
+    decode-uri-component "^0.2.0"
+    resolve-url "^0.2.1"
+    source-map-url "^0.4.0"
+    urix "^0.1.0"
+
+source-map-support@^0.4.15:
+  version "0.4.18"
+  resolved "https://registry.yarnpkg.com/source-map-support/-/source-map-support-0.4.18.tgz#0286a6de8be42641338594e97ccea75f0a2c585f"
+  integrity sha512-try0/JqxPLF9nOjvSta7tVondkP5dwgyLDjVoyMDlmjugT2lRZ1OfsrYTkCd2hkDnJTKRbO/Rl3orm8vlsUzbA==
+  dependencies:
+    source-map "^0.5.6"
+
+source-map-support@~0.5.6:
+  version "0.5.10"
+  resolved "https://registry.yarnpkg.com/source-map-support/-/source-map-support-0.5.10.tgz#2214080bc9d51832511ee2bab96e3c2f9353120c"
+  integrity sha512-YfQ3tQFTK/yzlGJuX8pTwa4tifQj4QS2Mj7UegOu8jAz59MqIiMGPXxQhVQiIMNzayuUSF/jEuVnfFF5JqybmQ==
+  dependencies:
+    buffer-from "^1.0.0"
+    source-map "^0.6.0"
+
+source-map-url@^0.4.0:
+  version "0.4.0"
+  resolved "https://registry.yarnpkg.com/source-map-url/-/source-map-url-0.4.0.tgz#3e935d7ddd73631b97659956d55128e87b5084a3"
+  integrity sha1-PpNdfd1zYxuXZZlW1VEo6HtQhKM=
 
-source-map@0.4.x, source-map@^0.4.2, source-map@^0.4.4:
+source-map@0.4.x, source-map@^0.4.2:
   version "0.4.4"
   resolved "https://registry.yarnpkg.com/source-map/-/source-map-0.4.4.tgz#eba4f5da9c0dc999de68032d8b4f76173652036b"
+  integrity sha1-66T12pwNyZneaAMti092FzZSA2s=
   dependencies:
     amdefine ">=0.0.4"
 
-source-map@^0.5.0, source-map@^0.5.1, source-map@^0.5.3, source-map@^0.5.6, source-map@~0.5.0, source-map@~0.5.1, source-map@~0.5.3:
-  version "0.5.6"
-  resolved "https://registry.yarnpkg.com/source-map/-/source-map-0.5.6.tgz#75ce38f52bf0733c5a7f0c118d81334a2bb5f412"
+source-map@^0.5.1, source-map@^0.5.3, source-map@^0.5.6, source-map@^0.5.7:
+  version "0.5.7"
+  resolved "https://registry.yarnpkg.com/source-map/-/source-map-0.5.7.tgz#8a039d2d1021d22d1ea14c80d8ea468ba2ef3fcc"
+  integrity sha1-igOdLRAh0i0eoUyA2OpGi6LvP8w=
 
-source-map@^0.6.1:
+source-map@^0.6.0, source-map@^0.6.1, source-map@~0.6.0, source-map@~0.6.1:
   version "0.6.1"
   resolved "https://registry.yarnpkg.com/source-map/-/source-map-0.6.1.tgz#74722af32e9614e9c287a8d0bbde48b5e2f1a263"
-
-source-map@~0.1.7:
-  version "0.1.43"
-  resolved "https://registry.yarnpkg.com/source-map/-/source-map-0.1.43.tgz#c24bc146ca517c1471f5dacbe2571b2b7f9e3346"
-  dependencies:
-    amdefine ">=0.0.4"
+  integrity sha512-UjgapumWlbMhkBgzT7Ykc5YXUT46F0iKu8SGXq0bcwP5dz/h0Plj6enJqjz1Zbq2l5WaqYnrVbwWOWMyF3F47g==
 
 source-map@~0.2.0:
   version "0.2.0"
   resolved "https://registry.yarnpkg.com/source-map/-/source-map-0.2.0.tgz#dab73fbcfc2ba819b4de03bd6f6eaa48164b3f9d"
+  integrity sha1-2rc/vPwrqBm03gO9b26qSBZLP50=
   dependencies:
     amdefine ">=0.0.4"
 
 sparkles@^1.0.0:
-  version "1.0.0"
-  resolved "https://registry.yarnpkg.com/sparkles/-/sparkles-1.0.0.tgz#1acbbfb592436d10bbe8f785b7cc6f82815012c3"
+  version "1.0.1"
+  resolved "https://registry.yarnpkg.com/sparkles/-/sparkles-1.0.1.tgz#008db65edce6c50eec0c5e228e1945061dd0437c"
+  integrity sha512-dSO0DDYUahUt/0/pD/Is3VIm5TGJjludZ0HVymmhYF6eNA53PVLhnUk0znSYbH8IYBuJdCE+1luR22jNLMaQdw==
 
-spdx-correct@~1.0.0:
-  version "1.0.2"
-  resolved "https://registry.yarnpkg.com/spdx-correct/-/spdx-correct-1.0.2.tgz#4b3073d933ff51f3912f03ac5519498a4150db40"
+spdx-correct@^3.0.0:
+  version "3.1.0"
+  resolved "https://registry.yarnpkg.com/spdx-correct/-/spdx-correct-3.1.0.tgz#fb83e504445268f154b074e218c87c003cd31df4"
+  integrity sha512-lr2EZCctC2BNR7j7WzJ2FpDznxky1sjfxvvYEyzxNyb6lZXHODmEoJeFu4JupYlkfha1KZpJyoqiJ7pgA1qq8Q==
   dependencies:
-    spdx-license-ids "^1.0.2"
+    spdx-expression-parse "^3.0.0"
+    spdx-license-ids "^3.0.0"
 
-spdx-expression-parse@~1.0.0:
-  version "1.0.4"
-  resolved "https://registry.yarnpkg.com/spdx-expression-parse/-/spdx-expression-parse-1.0.4.tgz#9bdf2f20e1f40ed447fbe273266191fced51626c"
+spdx-exceptions@^2.1.0:
+  version "2.2.0"
+  resolved "https://registry.yarnpkg.com/spdx-exceptions/-/spdx-exceptions-2.2.0.tgz#2ea450aee74f2a89bfb94519c07fcd6f41322977"
+  integrity sha512-2XQACfElKi9SlVb1CYadKDXvoajPgBVPn/gOQLrTvHdElaVhr7ZEbqJaRnJLVNeaI4cMEAgVCeBMKF6MWRDCRA==
 
-spdx-license-ids@^1.0.2:
-  version "1.2.2"
-  resolved "https://registry.yarnpkg.com/spdx-license-ids/-/spdx-license-ids-1.2.2.tgz#c9df7a3424594ade6bd11900d596696dc06bac57"
+spdx-expression-parse@^3.0.0:
+  version "3.0.0"
+  resolved "https://registry.yarnpkg.com/spdx-expression-parse/-/spdx-expression-parse-3.0.0.tgz#99e119b7a5da00e05491c9fa338b7904823b41d0"
+  integrity sha512-Yg6D3XpRD4kkOmTpdgbUiEJFKghJH03fiC1OPll5h/0sO6neh2jqRDVHOQ4o/LMea0tgCkbMgea5ip/e+MkWyg==
+  dependencies:
+    spdx-exceptions "^2.1.0"
+    spdx-license-ids "^3.0.0"
 
-spdy-transport@^2.0.18:
-  version "2.0.20"
-  resolved "https://registry.yarnpkg.com/spdy-transport/-/spdy-transport-2.0.20.tgz#735e72054c486b2354fe89e702256004a39ace4d"
+spdx-license-ids@^3.0.0:
+  version "3.0.3"
+  resolved "https://registry.yarnpkg.com/spdx-license-ids/-/spdx-license-ids-3.0.3.tgz#81c0ce8f21474756148bbb5f3bfc0f36bf15d76e"
+  integrity sha512-uBIcIl3Ih6Phe3XHK1NqboJLdGfwr1UN3k6wSD1dZpmPsIkb8AGNbZYJ1fOBk834+Gxy8rpfDxrS6XLEMZMY2g==
+
+spdy-transport@^3.0.0:
+  version "3.0.0"
+  resolved "https://registry.yarnpkg.com/spdy-transport/-/spdy-transport-3.0.0.tgz#00d4863a6400ad75df93361a1608605e5dcdcf31"
+  integrity sha512-hsLVFE5SjA6TCisWeJXFKniGGOpBgMLmerfO2aCyCU5s7nJ/rpAepqmFifv/GCbSbueEeAJJnmSQ2rKC/g8Fcw==
   dependencies:
-    debug "^2.6.8"
-    detect-node "^2.0.3"
+    debug "^4.1.0"
+    detect-node "^2.0.4"
     hpack.js "^2.1.6"
-    obuf "^1.1.1"
-    readable-stream "^2.2.9"
-    safe-buffer "^5.0.1"
-    wbuf "^1.7.2"
+    obuf "^1.1.2"
+    readable-stream "^3.0.6"
+    wbuf "^1.7.3"
+
+spdy@^4.0.0:
+  version "4.0.0"
+  resolved "https://registry.yarnpkg.com/spdy/-/spdy-4.0.0.tgz#81f222b5a743a329aa12cea6a390e60e9b613c52"
+  integrity sha512-ot0oEGT/PGUpzf/6uk4AWLqkq+irlqHXkrdbk51oWONh3bxQmBuljxPNl66zlRRcIJStWq0QkLUCPOPjgjvU0Q==
+  dependencies:
+    debug "^4.1.0"
+    handle-thing "^2.0.0"
+    http-deceiver "^1.2.7"
+    select-hose "^2.0.0"
+    spdy-transport "^3.0.0"
+
+split-on-first@^1.0.0:
+  version "1.1.0"
+  resolved "https://registry.npm.taobao.org/split-on-first/download/split-on-first-1.1.0.tgz?cache=0&sync_timestamp=1573659333652&other_urls=https%3A%2F%2Fregistry.npm.taobao.org%2Fsplit-on-first%2Fdownload%2Fsplit-on-first-1.1.0.tgz#f610afeee3b12bce1d0c30425e76398b78249a5f"
+  integrity sha1-9hCv7uOxK84dDDBCXnY5i3gkml8=
+
+split-string@^3.0.1, split-string@^3.0.2:
+  version "3.1.0"
+  resolved "https://registry.yarnpkg.com/split-string/-/split-string-3.1.0.tgz#7cb09dda3a86585705c64b39a6466038682e8fe2"
+  integrity sha512-NzNVhJDYpwceVVii8/Hu6DKfD2G+NrQHlS/V/qgv763EYudVwEcMQNxd2lh+0VrUByXN/oJkl5grOhYWvQUYiw==
+  dependencies:
+    extend-shallow "^3.0.0"
+
+split2@^2.0.0:
+  version "2.2.0"
+  resolved "https://registry.npmjs.org/split2/-/split2-2.2.0.tgz#186b2575bcf83e85b7d18465756238ee4ee42493"
+  integrity sha512-RAb22TG39LhI31MbreBgIuKiIKhVsawfTgEGqKHTK87aG+ul/PB8Sqoi3I7kVdRWiCfrKxK3uo4/YUkpNvhPbw==
+  dependencies:
+    through2 "^2.0.2"
 
-spdy@^3.4.1:
-  version "3.4.7"
-  resolved "https://registry.yarnpkg.com/spdy/-/spdy-3.4.7.tgz#42ff41ece5cc0f99a3a6c28aabb73f5c3b03acbc"
+split@^1.0.0:
+  version "1.0.1"
+  resolved "https://registry.npmjs.org/split/-/split-1.0.1.tgz#605bd9be303aa59fb35f9229fbea0ddec9ea07d9"
+  integrity sha512-mTyOoPbrivtXnwnIxZRFYRrPNtEFKlpB2fvjSnCQUiAA6qAZzqwna5envK4uk6OIeP17CsdF3rSBGYVBsU0Tkg==
   dependencies:
-    debug "^2.6.8"
-    handle-thing "^1.2.5"
-    http-deceiver "^1.2.7"
-    safe-buffer "^5.0.1"
-    select-hose "^2.0.0"
-    spdy-transport "^2.0.18"
+    through "2"
 
 sprintf-js@~1.0.2:
   version "1.0.3"
-  resolved "http://registry.npm.taobao.org/sprintf-js/download/sprintf-js-1.0.3.tgz#04e6926f662895354f3dd015203633b857297e2c"
+  resolved "https://registry.yarnpkg.com/sprintf-js/-/sprintf-js-1.0.3.tgz#04e6926f662895354f3dd015203633b857297e2c"
+  integrity sha1-BOaSb2YolTVPPdAVIDYzuFcpfiw=
 
 sshpk@^1.7.0:
-  version "1.10.1"
-  resolved "https://registry.yarnpkg.com/sshpk/-/sshpk-1.10.1.tgz#30e1a5d329244974a1af61511339d595af6638b0"
+  version "1.16.0"
+  resolved "https://registry.yarnpkg.com/sshpk/-/sshpk-1.16.0.tgz#1d4963a2fbffe58050aa9084ca20be81741c07de"
+  integrity sha512-Zhev35/y7hRMcID/upReIvRse+I9SVhyVre/KTJSJQWMz3C3+G+HpO7m1wK/yckEtujKZ7dS4hkVxAnmHaIGVQ==
   dependencies:
     asn1 "~0.2.3"
     assert-plus "^1.0.0"
-    dashdash "^1.12.0"
-    getpass "^0.1.1"
-  optionalDependencies:
     bcrypt-pbkdf "^1.0.0"
+    dashdash "^1.12.0"
     ecc-jsbn "~0.1.1"
-    jodid25519 "^1.0.0"
+    getpass "^0.1.1"
     jsbn "~0.1.0"
+    safer-buffer "^2.0.2"
     tweetnacl "~0.14.0"
 
-"statuses@>= 1.3.1 < 2", statuses@~1.3.0:
+ssri@^6.0.0, ssri@^6.0.1:
+  version "6.0.1"
+  resolved "https://registry.yarnpkg.com/ssri/-/ssri-6.0.1.tgz#2a3c41b28dd45b62b63676ecb74001265ae9edd8"
+  integrity sha512-3Wge10hNcT1Kur4PDFwEieXSCMCJs/7WvSACcrMYrNp+b8kDL1/0wJch5Ni2WrtwEa2IO8OsVfeKIciKCDx/QA==
+  dependencies:
+    figgy-pudding "^3.5.1"
+
+stable@~0.1.6:
+  version "0.1.8"
+  resolved "https://registry.yarnpkg.com/stable/-/stable-0.1.8.tgz#836eb3c8382fe2936feaf544631017ce7d47a3cf"
+  integrity sha512-ji9qxRnOVfcuLDySj9qzhGSEFVobyt1kIOSkj1qZzYLzq7Tos/oUUWvotUPQLlrsidqsK6tBH89Bc9kL5zHA6w==
+
+stack-trace@0.0.10:
+  version "0.0.10"
+  resolved "https://registry.yarnpkg.com/stack-trace/-/stack-trace-0.0.10.tgz#547c70b347e8d32b4e108ea1a2a159e5fdde19c0"
+  integrity sha1-VHxws0fo0ytOEI6hoqFZ5f3eGcA=
+
+standard-version@^7.0.0:
+  version "7.0.0"
+  resolved "https://registry.yarnpkg.com/standard-version/-/standard-version-7.0.0.tgz#4ce10ea5d20270ed4a32b22d15cce5fd1f1a5bbb"
+  integrity sha512-pbFXM9vutnxTkSGkqSWQeYCMYqWmFBaLUNdEc/sJDQnMgwB0Csw3CZeeDhi62VoVS3P8mQiYbvXGZWyOBWxUbw==
+  dependencies:
+    chalk "2.4.2"
+    conventional-changelog "3.1.9"
+    conventional-changelog-config-spec "2.0.0"
+    conventional-recommended-bump "6.0.0"
+    detect-indent "6.0.0"
+    detect-newline "3.0.0"
+    dotgitignore "2.1.0"
+    figures "3.0.0"
+    find-up "4.1.0"
+    fs-access "1.0.1"
+    git-semver-tags "3.0.0"
+    semver "6.3.0"
+    stringify-package "1.0.0"
+    yargs "13.3.0"
+
+static-extend@^0.1.1:
+  version "0.1.2"
+  resolved "https://registry.yarnpkg.com/static-extend/-/static-extend-0.1.2.tgz#60809c39cbff55337226fd5e0b520f341f1fb5c6"
+  integrity sha1-YICcOcv/VTNyJv1eC1IPNB8ftcY=
+  dependencies:
+    define-property "^0.2.5"
+    object-copy "^0.1.0"
+
+"statuses@>= 1.4.0 < 2":
+  version "1.5.0"
+  resolved "https://registry.yarnpkg.com/statuses/-/statuses-1.5.0.tgz#161c7dac177659fd9811f43771fa99381478628c"
+  integrity sha1-Fhx9rBd2Wf2YEfQ3cfqZOBR4Yow=
+
+statuses@~1.3.1:
   version "1.3.1"
   resolved "https://registry.yarnpkg.com/statuses/-/statuses-1.3.1.tgz#faf51b9eb74aaef3b3acf4ad5f61abf24cb7b93e"
+  integrity sha1-+vUbnrdKrvOzrPStX2Gr8ky3uT4=
 
-stdout-stream@^1.4.0:
+statuses@~1.4.0:
   version "1.4.0"
-  resolved "https://registry.yarnpkg.com/stdout-stream/-/stdout-stream-1.4.0.tgz#a2c7c8587e54d9427ea9edb3ac3f2cd522df378b"
+  resolved "https://registry.yarnpkg.com/statuses/-/statuses-1.4.0.tgz#bb73d446da2796106efcc1b601a253d6c46bd087"
+  integrity sha512-zhSCtt8v2NDrRlPQpCNtw/heZLtfUDqxBM1udqikb/Hbk52LK4nQSwr10u77iopCW5LsyHpuXS0GnEc48mLeew==
+
+stdout-stream@^1.4.0:
+  version "1.4.1"
+  resolved "https://registry.npm.taobao.org/stdout-stream/download/stdout-stream-1.4.1.tgz#5ac174cdd5cd726104aa0c0b2bd83815d8d535de"
+  integrity sha1-WsF0zdXNcmEEqgwLK9g4FdjVNd4=
   dependencies:
     readable-stream "^2.0.1"
 
 stream-browserify@^2.0.1:
   version "2.0.1"
   resolved "https://registry.yarnpkg.com/stream-browserify/-/stream-browserify-2.0.1.tgz#66266ee5f9bdb9940a4e4514cafb43bb71e5c9db"
+  integrity sha1-ZiZu5fm9uZQKTkUUyvtDu3Hlyds=
   dependencies:
     inherits "~2.0.1"
     readable-stream "^2.0.2"
 
-stream-consume@~0.1.0:
-  version "0.1.0"
-  resolved "https://registry.yarnpkg.com/stream-consume/-/stream-consume-0.1.0.tgz#a41ead1a6d6081ceb79f65b061901b6d8f3d1d0f"
+stream-each@^1.1.0:
+  version "1.2.3"
+  resolved "https://registry.yarnpkg.com/stream-each/-/stream-each-1.2.3.tgz#ebe27a0c389b04fbcc233642952e10731afa9bae"
+  integrity sha512-vlMC2f8I2u/bZGqkdfLQW/13Zihpej/7PmSiMQsbYddxuTsJp8vRe2x2FvVExZg7FaOds43ROAuFJwPR4MTZLw==
+  dependencies:
+    end-of-stream "^1.1.0"
+    stream-shift "^1.0.0"
 
-stream-http@^2.3.1:
-  version "2.5.0"
-  resolved "https://registry.yarnpkg.com/stream-http/-/stream-http-2.5.0.tgz#585eee513217ed98fe199817e7313b6f772a6802"
+stream-exhaust@^1.0.1:
+  version "1.0.2"
+  resolved "https://registry.yarnpkg.com/stream-exhaust/-/stream-exhaust-1.0.2.tgz#acdac8da59ef2bc1e17a2c0ccf6c320d120e555d"
+  integrity sha512-b/qaq/GlBK5xaq1yrK9/zFcyRSTNxmcZwFLGSTG0mXgZl/4Z6GgiyYOXOvY7N3eEvFRAG1bkDRz5EPGSvPYQlw==
+
+stream-http@^2.7.2:
+  version "2.8.3"
+  resolved "https://registry.yarnpkg.com/stream-http/-/stream-http-2.8.3.tgz#b2d242469288a5a27ec4fe8933acf623de6514fc"
+  integrity sha512-+TSkfINHDo4J+ZobQLWiMouQYB+UVYFttRA94FpEzzJ7ZdqcL4uUUQ7WkdkI4DSozGmgBUE/a47L+38PenXhUw==
   dependencies:
-    builtin-status-codes "^2.0.0"
+    builtin-status-codes "^3.0.0"
     inherits "^2.0.1"
-    readable-stream "^2.1.0"
+    readable-stream "^2.3.6"
     to-arraybuffer "^1.0.0"
     xtend "^4.0.0"
 
-strict-uri-encode@^1.0.0:
-  version "1.1.0"
-  resolved "https://registry.yarnpkg.com/strict-uri-encode/-/strict-uri-encode-1.1.0.tgz#279b225df1d582b1f54e65addd4352e18faa0713"
+stream-iterate@^1.1.0:
+  version "1.2.0"
+  resolved "https://registry.npm.taobao.org/stream-iterate/download/stream-iterate-1.2.0.tgz#2bd7c77296c1702a46488b8ad41f79865eecd4e1"
+  integrity sha1-K9fHcpbBcCpGSIuK1B95hl7s1OE=
+  dependencies:
+    readable-stream "^2.1.5"
+    stream-shift "^1.0.0"
 
-string-hash@^1.1.0:
-  version "1.1.1"
-  resolved "https://registry.yarnpkg.com/string-hash/-/string-hash-1.1.1.tgz#8e85bed291e0763b8f6809d9c3368fea048db3dc"
+stream-shift@^1.0.0:
+  version "1.0.0"
+  resolved "https://registry.yarnpkg.com/stream-shift/-/stream-shift-1.0.0.tgz#d5c752825e5367e786f78e18e445ea223a155952"
+  integrity sha1-1cdSgl5TZ+eG944Y5EXqIjoVWVI=
+
+streamroller@^1.0.1:
+  version "1.0.3"
+  resolved "https://registry.npmjs.org/streamroller/-/streamroller-1.0.3.tgz#cb51e7e382f799a9381a5d7490ce3053b325fba3"
+  integrity sha512-P7z9NwP51EltdZ81otaGAN3ob+/F88USJE546joNq7bqRNTe6jc74fTBDyynxP4qpIfKlt/CesEYicuMzI0yJg==
+  dependencies:
+    async "^2.6.1"
+    date-format "^2.0.0"
+    debug "^3.1.0"
+    fs-extra "^7.0.0"
+    lodash "^4.17.10"
+
+strict-uri-encode@^2.0.0:
+  version "2.0.0"
+  resolved "https://registry.npm.taobao.org/strict-uri-encode/download/strict-uri-encode-2.0.0.tgz#b9c7330c7042862f6b142dc274bbcc5866ce3546"
+  integrity sha1-ucczDHBChi9rFC3CdLvMWGbONUY=
 
 string-width@^1.0.1, string-width@^1.0.2:
   version "1.0.2"
   resolved "https://registry.yarnpkg.com/string-width/-/string-width-1.0.2.tgz#118bdf5b8cdc51a2a7e70d211e07e2b0b9b107d3"
+  integrity sha1-EYvfW4zcUaKn5w0hHgfisLmxB9M=
   dependencies:
     code-point-at "^1.0.0"
     is-fullwidth-code-point "^1.0.0"
     strip-ansi "^3.0.0"
 
-string-width@^2.0.0:
-  version "2.0.0"
-  resolved "https://registry.yarnpkg.com/string-width/-/string-width-2.0.0.tgz#635c5436cc72a6e0c387ceca278d4e2eec52687e"
+"string-width@^1.0.2 || 2", string-width@^2.0.0, string-width@^2.1.0, string-width@^2.1.1:
+  version "2.1.1"
+  resolved "https://registry.yarnpkg.com/string-width/-/string-width-2.1.1.tgz#ab93f27a8dc13d28cac815c462143a6d9012ae9e"
+  integrity sha512-nOqH59deCq9SRHlxq1Aw85Jnt4w6KvLKqWVik6oA9ZklXLNIOlqg4F2yrT1MVaTjAqvVwdfeZ7w7aCvJD7ugkw==
   dependencies:
     is-fullwidth-code-point "^2.0.0"
-    strip-ansi "^3.0.0"
+    strip-ansi "^4.0.0"
 
-string-width@^2.1.0, string-width@^2.1.1:
-  version "2.1.1"
-  resolved "http://registry.npm.taobao.org/string-width/download/string-width-2.1.1.tgz#ab93f27a8dc13d28cac815c462143a6d9012ae9e"
+string-width@^3.0.0, string-width@^3.1.0:
+  version "3.1.0"
+  resolved "https://registry.npmjs.org/string-width/-/string-width-3.1.0.tgz#22767be21b62af1081574306f69ac51b62203961"
+  integrity sha512-vafcv6KjVZKSgz06oM/H6GDBrAtz8vdhQakGjFIvNrHA6y3HCF1CInLy+QLq8dTJPQ1b+KDUqDFctkdRW44e1w==
   dependencies:
+    emoji-regex "^7.0.1"
     is-fullwidth-code-point "^2.0.0"
-    strip-ansi "^4.0.0"
+    strip-ansi "^5.1.0"
 
-string@^3.0.1:
-  version "3.3.3"
-  resolved "https://registry.yarnpkg.com/string/-/string-3.3.3.tgz#5ea211cd92d228e184294990a6cc97b366a77cb0"
+string_decoder@^1.0.0, string_decoder@^1.1.1:
+  version "1.2.0"
+  resolved "https://registry.yarnpkg.com/string_decoder/-/string_decoder-1.2.0.tgz#fe86e738b19544afe70469243b2a1ee9240eae8d"
+  integrity sha512-6YqyX6ZWEYguAxgZzHGL7SsCeGx3V2TtOTqZz1xSTSWnqsbWwbptafNyvf/ACquZUXV3DANr5BDIwNYe1mN42w==
+  dependencies:
+    safe-buffer "~5.1.0"
 
-string_decoder@^0.10.25, string_decoder@~0.10.x:
+string_decoder@~0.10.x:
   version "0.10.31"
   resolved "https://registry.yarnpkg.com/string_decoder/-/string_decoder-0.10.31.tgz#62e203bc41766c6c28c9fc84301dab1c5310fa94"
+  integrity sha1-YuIDvEF2bGwoyfyEMB2rHFMQ+pQ=
 
-string_decoder@~1.0.3:
-  version "1.0.3"
-  resolved "http://registry.npm.taobao.org/string_decoder/download/string_decoder-1.0.3.tgz#0fc67d7c141825de94282dd536bec6b9bce860ab"
+string_decoder@~1.1.1:
+  version "1.1.1"
+  resolved "https://registry.yarnpkg.com/string_decoder/-/string_decoder-1.1.1.tgz#9cf1611ba62685d7030ae9e4ba34149c3af03fc8"
+  integrity sha512-n/ShnvDi6FHbbVfviro+WojiFzv+s8MPMHBczVePfUpDJLwoLT0ht1l4YwBCbi8pJAveEEdnkHyPyTP/mzRfwg==
   dependencies:
     safe-buffer "~5.1.0"
 
-stringstream@~0.0.4:
-  version "0.0.5"
-  resolved "https://registry.yarnpkg.com/stringstream/-/stringstream-0.0.5.tgz#4e484cd4de5a0bbbee18e46307710a8a81621878"
+stringify-package@1.0.0:
+  version "1.0.0"
+  resolved "https://registry.npmjs.org/stringify-package/-/stringify-package-1.0.0.tgz#e02828089333d7d45cd8c287c30aa9a13375081b"
+  integrity sha512-JIQqiWmLiEozOC0b0BtxZ/AOUtdUZHCBPgqIZ2kSJJqGwgb9neo44XdTHUC4HZSGqi03hOeB7W/E8rAlKnGe9g==
+
+stringify-package@^1.0.0, stringify-package@^1.0.1:
+  version "1.0.1"
+  resolved "https://registry.npm.taobao.org/stringify-package/download/stringify-package-1.0.1.tgz#e5aa3643e7f74d0f28628b72f3dad5cecfc3ba85"
+  integrity sha1-5ao2Q+f3TQ8oYoty89rVzs/DuoU=
 
 strip-ansi@^0.3.0:
   version "0.3.0"
   resolved "https://registry.yarnpkg.com/strip-ansi/-/strip-ansi-0.3.0.tgz#25f48ea22ca79187f3174a4db8759347bb126220"
+  integrity sha1-JfSOoiynkYfzF0pNuHWTR7sSYiA=
   dependencies:
     ansi-regex "^0.2.1"
 
 strip-ansi@^3.0.0, strip-ansi@^3.0.1:
   version "3.0.1"
   resolved "https://registry.yarnpkg.com/strip-ansi/-/strip-ansi-3.0.1.tgz#6a385fb8853d952d5ff05d0e8aaf94278dc63dcf"
+  integrity sha1-ajhfuIU9lS1f8F0Oiq+UJ43GPc8=
   dependencies:
     ansi-regex "^2.0.0"
 
 strip-ansi@^4.0.0:
   version "4.0.0"
-  resolved "http://registry.npm.taobao.org/strip-ansi/download/strip-ansi-4.0.0.tgz#a8479022eb1ac368a871389b635262c505ee368f"
+  resolved "https://registry.yarnpkg.com/strip-ansi/-/strip-ansi-4.0.0.tgz#a8479022eb1ac368a871389b635262c505ee368f"
+  integrity sha1-qEeQIusaw2iocTibY1JixQXuNo8=
   dependencies:
     ansi-regex "^3.0.0"
 
-strip-ansi@~0.1.0:
-  version "0.1.1"
-  resolved "https://registry.yarnpkg.com/strip-ansi/-/strip-ansi-0.1.1.tgz#39e8a98d044d150660abe4a6808acf70bb7bc991"
+strip-ansi@^5.0.0:
+  version "5.0.0"
+  resolved "https://registry.yarnpkg.com/strip-ansi/-/strip-ansi-5.0.0.tgz#f78f68b5d0866c20b2c9b8c61b5298508dc8756f"
+  integrity sha512-Uu7gQyZI7J7gn5qLn1Np3G9vcYGTVqB+lFTytnDJv83dd8T22aGH451P3jueT2/QemInJDfxHB5Tde5OzgG1Ow==
+  dependencies:
+    ansi-regex "^4.0.0"
 
-strip-bom@^1.0.0:
-  version "1.0.0"
-  resolved "https://registry.yarnpkg.com/strip-bom/-/strip-bom-1.0.0.tgz#85b8862f3844b5a6d5ec8467a93598173a36f794"
+strip-ansi@^5.1.0, strip-ansi@^5.2.0:
+  version "5.2.0"
+  resolved "https://registry.npmjs.org/strip-ansi/-/strip-ansi-5.2.0.tgz#8c9a536feb6afc962bdfa5b104a5091c1ad9c0ae"
+  integrity sha512-DuRs1gKbBqsMKIZlrffwlug8MHkcnpjs5VPmL1PAh+mA30U0DTotfDZ0d2UUsXpPmPmMMJ6W773MaA3J+lbiWA==
   dependencies:
-    first-chunk-stream "^1.0.0"
-    is-utf8 "^0.2.0"
+    ansi-regex "^4.1.0"
 
 strip-bom@^2.0.0:
   version "2.0.0"
   resolved "https://registry.yarnpkg.com/strip-bom/-/strip-bom-2.0.0.tgz#6219a85616520491f35788bdbf1447a99c7e6b0e"
+  integrity sha1-YhmoVhZSBJHzV4i9vxRHqZx+aw4=
   dependencies:
     is-utf8 "^0.2.0"
 
 strip-bom@^3.0.0:
   version "3.0.0"
-  resolved "https://registry.yarnpkg.com/strip-bom/-/strip-bom-3.0.0.tgz#2334c18e9c759f7bdd56fdef7e9ae3d588e68ed3"
+  resolved "https://registry.npmjs.org/strip-bom/-/strip-bom-3.0.0.tgz#2334c18e9c759f7bdd56fdef7e9ae3d588e68ed3"
+  integrity sha1-IzTBjpx1n3vdVv3vfprj1YjmjtM=
 
 strip-eof@^1.0.0:
   version "1.0.0"
   resolved "https://registry.yarnpkg.com/strip-eof/-/strip-eof-1.0.0.tgz#bb43ff5598a6eb05d89b59fcd129c983313606bf"
+  integrity sha1-u0P/VZim6wXYm1n80SnJgzE2Br8=
 
 strip-indent@^1.0.1:
   version "1.0.1"
   resolved "https://registry.yarnpkg.com/strip-indent/-/strip-indent-1.0.1.tgz#0c7962a6adefa7bbd4ac366460a638552ae1a0a2"
+  integrity sha1-DHlipq3vp7vUrDZkYKY4VSrhoKI=
   dependencies:
     get-stdin "^4.0.1"
 
-strip-json-comments@1.0.x, strip-json-comments@~1.0.4:
-  version "1.0.4"
-  resolved "https://registry.yarnpkg.com/strip-json-comments/-/strip-json-comments-1.0.4.tgz#1e15fbcac97d3ee99bf2d73b4c656b082bbafb91"
+strip-indent@^2.0.0:
+  version "2.0.0"
+  resolved "https://registry.npmjs.org/strip-indent/-/strip-indent-2.0.0.tgz#5ef8db295d01e6ed6cbf7aab96998d7822527b68"
+  integrity sha1-XvjbKV0B5u1sv3qrlpmNeCJSe2g=
 
-strip-json-comments@~2.0.1:
+strip-json-comments@2.0.1, strip-json-comments@~2.0.1:
   version "2.0.1"
-  resolved "http://registry.npm.taobao.org/strip-json-comments/download/strip-json-comments-2.0.1.tgz#3c531942e908c2697c0ec344858c286c7ca0a60a"
+  resolved "https://registry.yarnpkg.com/strip-json-comments/-/strip-json-comments-2.0.1.tgz#3c531942e908c2697c0ec344858c286c7ca0a60a"
+  integrity sha1-PFMZQukIwml8DsNEhYwobHygpgo=
 
-style-loader@^0.19.0:
-  version "0.19.0"
-  resolved "https://registry.yarnpkg.com/style-loader/-/style-loader-0.19.0.tgz#7258e788f0fee6a42d710eaf7d6c2412a4c50759"
+style-loader@^0.23.1:
+  version "0.23.1"
+  resolved "https://registry.yarnpkg.com/style-loader/-/style-loader-0.23.1.tgz#cb9154606f3e771ab6c4ab637026a1049174d925"
+  integrity sha512-XK+uv9kWwhZMZ1y7mysB+zoihsEj4wneFWAS5qoiLwzW0WzSqMrrsIy+a3zkQJq0ipFtBpX5W3MqyRIBF/WFGg==
   dependencies:
-    loader-utils "^1.0.2"
-    schema-utils "^0.3.0"
+    loader-utils "^1.1.0"
+    schema-utils "^1.0.0"
 
-supports-color@3.1.2, supports-color@^3.1.0, supports-color@^3.1.2:
-  version "3.1.2"
-  resolved "https://registry.yarnpkg.com/supports-color/-/supports-color-3.1.2.tgz#72a262894d9d408b956ca05ff37b2ed8a6e2a2d5"
+stylehacks@^4.0.0:
+  version "4.0.3"
+  resolved "https://registry.yarnpkg.com/stylehacks/-/stylehacks-4.0.3.tgz#6718fcaf4d1e07d8a1318690881e8d96726a71d5"
+  integrity sha512-7GlLk9JwlElY4Y6a/rmbH2MhVlTyVmiJd1PfTCqFaIBEGMYNsrO/v3SeGTdhBThLg4Z+NbOk/qFMwCa+J+3p/g==
   dependencies:
-    has-flag "^1.0.0"
+    browserslist "^4.0.0"
+    postcss "^7.0.0"
+    postcss-selector-parser "^3.0.0"
+
+supports-color@6.0.0:
+  version "6.0.0"
+  resolved "https://registry.npmjs.org/supports-color/-/supports-color-6.0.0.tgz#76cfe742cf1f41bb9b1c29ad03068c05b4c0e40a"
+  integrity sha512-on9Kwidc1IUQo+bQdhi8+Tijpo0e1SS6RoGo2guUwn5vdaxw8RXOF9Vb2ws+ihWOmh4JnCJOvaziZWP1VABaLg==
+  dependencies:
+    has-flag "^3.0.0"
 
 supports-color@^0.2.0:
   version "0.2.0"
   resolved "https://registry.yarnpkg.com/supports-color/-/supports-color-0.2.0.tgz#d92de2694eb3f67323973d7ae3d8b55b4c22190a"
+  integrity sha1-2S3iaU6z9nMjlz1649i1W0wiGQo=
 
 supports-color@^2.0.0:
   version "2.0.0"
-  resolved "http://registry.npm.taobao.org/supports-color/download/supports-color-2.0.0.tgz#535d045ce6b6363fa40117084629995e9df324c7"
+  resolved "https://registry.yarnpkg.com/supports-color/-/supports-color-2.0.0.tgz#535d045ce6b6363fa40117084629995e9df324c7"
+  integrity sha1-U10EXOa2Nj+kARcIRimZXp3zJMc=
 
-supports-color@^4.0.0:
-  version "4.5.0"
-  resolved "http://registry.npm.taobao.org/supports-color/download/supports-color-4.5.0.tgz#be7a0de484dec5c5cddf8b3d59125044912f635b"
+supports-color@^3.1.0:
+  version "3.2.3"
+  resolved "https://registry.yarnpkg.com/supports-color/-/supports-color-3.2.3.tgz#65ac0504b3954171d8a64946b2ae3cbb8a5f54f6"
+  integrity sha1-ZawFBLOVQXHYpklGsq48u4pfVPY=
   dependencies:
-    has-flag "^2.0.0"
+    has-flag "^1.0.0"
 
-supports-color@^4.2.1:
-  version "4.2.1"
-  resolved "https://registry.yarnpkg.com/supports-color/-/supports-color-4.2.1.tgz#65a4bb2631e90e02420dba5554c375a4754bb836"
+supports-color@^5.1.0, supports-color@^5.3.0, supports-color@^5.5.0:
+  version "5.5.0"
+  resolved "https://registry.yarnpkg.com/supports-color/-/supports-color-5.5.0.tgz#e2e69a44ac8772f78a1ec0b35b689df6530efc8f"
+  integrity sha512-QjVjwdXIt408MIiAqCX4oUKsgU2EqAGzs2Ppkm4aQYbjm+ZEWEcW4SfFNTr4uMNZma0ey4f5lgLrkB0aX0QMow==
   dependencies:
-    has-flag "^2.0.0"
+    has-flag "^3.0.0"
 
-supports-color@^5.3.0:
-  version "5.4.0"
-  resolved "http://registry.npm.taobao.org/supports-color/download/supports-color-5.4.0.tgz#1c6b337402c2137605efe19f10fec390f6faab54"
+supports-color@^6.1.0:
+  version "6.1.0"
+  resolved "https://registry.yarnpkg.com/supports-color/-/supports-color-6.1.0.tgz#0764abc69c63d5ac842dd4867e8d025e880df8f3"
+  integrity sha512-qe1jfm1Mg7Nq/NSh6XE24gPXROEVsWHxC1LIx//XNlD9iw7YZQGjZNjYN7xGaEG6iKdA8EtNFW6R0gjnVXp+wQ==
   dependencies:
     has-flag "^3.0.0"
 
-svgo@^0.7.0:
-  version "0.7.1"
-  resolved "https://registry.yarnpkg.com/svgo/-/svgo-0.7.1.tgz#287320fed972cb097e72c2bb1685f96fe08f8034"
+sver-compat@^1.5.0:
+  version "1.5.0"
+  resolved "https://registry.yarnpkg.com/sver-compat/-/sver-compat-1.5.0.tgz#3cf87dfeb4d07b4a3f14827bc186b3fd0c645cd8"
+  integrity sha1-PPh9/rTQe0o/FIJ7wYaz/QxkXNg=
   dependencies:
-    coa "~1.0.1"
+    es6-iterator "^2.0.1"
+    es6-symbol "^3.1.1"
+
+svg-inline-loader@^0.8.0:
+  version "0.8.0"
+  resolved "https://registry.yarnpkg.com/svg-inline-loader/-/svg-inline-loader-0.8.0.tgz#7e9d905d80d0b4e68d2df21afcd08ee9e9a3ea6e"
+  integrity sha512-rynplY2eXFrdNomL1FvyTFQlP+dx0WqbzHglmNtA9M4IHRC3no2aPAl3ny9lUpJzFzFMZfWRK5YIclNU+FRePA==
+  dependencies:
+    loader-utils "^0.2.11"
+    object-assign "^4.0.1"
+    simple-html-tokenizer "^0.1.1"
+
+svgo@^1.0.0:
+  version "1.1.1"
+  resolved "https://registry.yarnpkg.com/svgo/-/svgo-1.1.1.tgz#12384b03335bcecd85cfa5f4e3375fed671cb985"
+  integrity sha512-GBkJbnTuFpM4jFbiERHDWhZc/S/kpHToqmZag3aEBjPYK44JAN2QBjvrGIxLOoCyMZjuFQIfTO2eJd8uwLY/9g==
+  dependencies:
+    coa "~2.0.1"
     colors "~1.1.2"
-    csso "~2.2.1"
-    js-yaml "~3.6.1"
+    css-select "^2.0.0"
+    css-select-base-adapter "~0.1.0"
+    css-tree "1.0.0-alpha.28"
+    css-url-regex "^1.1.0"
+    csso "^3.5.0"
+    js-yaml "^3.12.0"
     mkdirp "~0.5.1"
-    sax "~1.2.1"
-    whet.extend "~0.9.9"
-
-"symbol-tree@>= 3.1.0 < 4.0.0":
-  version "3.2.0"
-  resolved "https://registry.yarnpkg.com/symbol-tree/-/symbol-tree-3.2.0.tgz#2183fcd165fc30048b3421aad29ada7a339ea566"
+    object.values "^1.0.4"
+    sax "~1.2.4"
+    stable "~0.1.6"
+    unquote "~1.1.1"
+    util.promisify "~1.0.0"
 
-table@^4.0.1:
+table@4.0.2:
   version "4.0.2"
-  resolved "http://registry.npm.taobao.org/table/download/table-4.0.2.tgz#a33447375391e766ad34d3486e6e2aedc84d2e36"
+  resolved "https://registry.yarnpkg.com/table/-/table-4.0.2.tgz#a33447375391e766ad34d3486e6e2aedc84d2e36"
+  integrity sha512-UUkEAPdSGxtRpiV9ozJ5cMTtYiqz7Ni1OGqLXRCynrvzdtR1p+cfOWe2RJLwvUG8hNanaSRjecIqwOjqeatDsA==
   dependencies:
     ajv "^5.2.3"
     ajv-keywords "^2.1.0"
@@ -7426,38 +11539,50 @@ table@^4.0.1:
     slice-ansi "1.0.0"
     string-width "^2.1.1"
 
-tapable@^0.2.7:
-  version "0.2.8"
-  resolved "https://registry.yarnpkg.com/tapable/-/tapable-0.2.8.tgz#99372a5c999bf2df160afc0d74bed4f47948cd22"
+tapable@^1.0.0, tapable@^1.1.0:
+  version "1.1.1"
+  resolved "https://registry.yarnpkg.com/tapable/-/tapable-1.1.1.tgz#4d297923c5a72a42360de2ab52dadfaaec00018e"
+  integrity sha512-9I2ydhj8Z9veORCw5PRm4u9uebCn0mcCa6scWoNcbZ6dAtoo2618u9UUzxgmsCOreJpqDDuv61LvwofW7hLcBA==
 
-tar-pack@~3.3.0:
-  version "3.3.0"
-  resolved "https://registry.yarnpkg.com/tar-pack/-/tar-pack-3.3.0.tgz#30931816418f55afc4d21775afdd6720cee45dae"
-  dependencies:
-    debug "~2.2.0"
-    fstream "~1.0.10"
-    fstream-ignore "~1.0.5"
-    once "~1.3.3"
-    readable-stream "~2.1.4"
-    rimraf "~2.5.1"
-    tar "~2.2.1"
-    uid-number "~0.0.6"
-
-tar@^2.0.0, tar@~2.2.1:
-  version "2.2.1"
-  resolved "https://registry.yarnpkg.com/tar/-/tar-2.2.1.tgz#8e4d2a256c0e2185c6b18ad694aec968b83cb1d1"
+tar@^2.0.0:
+  version "2.2.2"
+  resolved "https://registry.npm.taobao.org/tar/download/tar-2.2.2.tgz#0ca8848562c7299b8b446ff6a4d60cdbb23edc40"
+  integrity sha1-DKiEhWLHKZuLRG/2pNYM27I+3EA=
   dependencies:
     block-stream "*"
-    fstream "^1.0.2"
+    fstream "^1.0.12"
     inherits "2"
 
-tcomb@^2.5.1:
-  version "2.7.0"
-  resolved "https://registry.yarnpkg.com/tcomb/-/tcomb-2.7.0.tgz#10d62958041669a5d53567b9a4ee8cde22b1c2b0"
+tar@^4:
+  version "4.4.8"
+  resolved "https://registry.yarnpkg.com/tar/-/tar-4.4.8.tgz#b19eec3fde2a96e64666df9fdb40c5ca1bc3747d"
+  integrity sha512-LzHF64s5chPQQS0IYBn9IN5h3i98c12bo4NCO7e0sGM2llXQ3p2FGC5sdENN4cTW48O915Sh+x+EXx7XW96xYQ==
+  dependencies:
+    chownr "^1.1.1"
+    fs-minipass "^1.2.5"
+    minipass "^2.3.4"
+    minizlib "^1.1.1"
+    mkdirp "^0.5.0"
+    safe-buffer "^5.1.2"
+    yallist "^3.0.2"
+
+tar@^4.4.10, tar@^4.4.12, tar@^4.4.13:
+  version "4.4.13"
+  resolved "https://registry.npm.taobao.org/tar/download/tar-4.4.13.tgz?cache=0&sync_timestamp=1570258601713&other_urls=https%3A%2F%2Fregistry.npm.taobao.org%2Ftar%2Fdownload%2Ftar-4.4.13.tgz#43b364bc52888d555298637b10d60790254ab525"
+  integrity sha1-Q7NkvFKIjVVSmGN7ENYHkCVKtSU=
+  dependencies:
+    chownr "^1.1.1"
+    fs-minipass "^1.2.5"
+    minipass "^2.8.6"
+    minizlib "^1.2.1"
+    mkdirp "^0.5.0"
+    safe-buffer "^5.1.2"
+    yallist "^3.0.3"
 
 temp-write@~0.1.0:
   version "0.1.1"
   resolved "https://registry.yarnpkg.com/temp-write/-/temp-write-0.1.1.tgz#0b6467838dd77fbf7f62a0c93da879732ffda932"
+  integrity sha1-C2Rng43Xf79/YqDJPah5cy/9qTI=
   dependencies:
     graceful-fs "~2.0.0"
     tempfile "~0.1.2"
@@ -7465,521 +11590,912 @@ temp-write@~0.1.0:
 tempfile@~0.1.2:
   version "0.1.3"
   resolved "https://registry.yarnpkg.com/tempfile/-/tempfile-0.1.3.tgz#7d6b710047339d39f847327a056dadf183103010"
+  integrity sha1-fWtxAEcznTn4RzJ6BW2t8YMQMBA=
   dependencies:
     uuid "~1.4.0"
 
-text-table@~0.2.0:
-  version "0.2.0"
-  resolved "https://registry.yarnpkg.com/text-table/-/text-table-0.2.0.tgz#7f5ee823ae805207c00af2df4a84ec3fcfa570b4"
+term-size@^1.2.0:
+  version "1.2.0"
+  resolved "https://registry.npm.taobao.org/term-size/download/term-size-1.2.0.tgz#458b83887f288fc56d6fffbfad262e26638efa69"
+  integrity sha1-RYuDiH8oj8Vtb/+/rSYuJmOO+mk=
+  dependencies:
+    execa "^0.7.0"
 
-thenify-all@^1.0.0, thenify-all@^1.6.0:
-  version "1.6.0"
-  resolved "https://registry.yarnpkg.com/thenify-all/-/thenify-all-1.6.0.tgz#1a1918d402d8fc3f98fbf234db0bcc8cc10e9726"
+terser-webpack-plugin@^1.1.0:
+  version "1.2.1"
+  resolved "https://registry.yarnpkg.com/terser-webpack-plugin/-/terser-webpack-plugin-1.2.1.tgz#7545da9ae5f4f9ae6a0ac961eb46f5e7c845cc26"
+  integrity sha512-GGSt+gbT0oKcMDmPx4SRSfJPE1XaN3kQRWG4ghxKQw9cn5G9x6aCKSsgYdvyM0na9NJ4Drv0RG6jbBByZ5CMjw==
   dependencies:
-    thenify ">= 3.1.0 < 4"
+    cacache "^11.0.2"
+    find-cache-dir "^2.0.0"
+    schema-utils "^1.0.0"
+    serialize-javascript "^1.4.0"
+    source-map "^0.6.1"
+    terser "^3.8.1"
+    webpack-sources "^1.1.0"
+    worker-farm "^1.5.2"
 
-"thenify@>= 3.1.0 < 4":
-  version "3.2.1"
-  resolved "https://registry.yarnpkg.com/thenify/-/thenify-3.2.1.tgz#251fd1c80aff6e5cf57cb179ab1fcb724269bd11"
+terser@^3.8.1:
+  version "3.14.1"
+  resolved "https://registry.yarnpkg.com/terser/-/terser-3.14.1.tgz#cc4764014af570bc79c79742358bd46926018a32"
+  integrity sha512-NSo3E99QDbYSMeJaEk9YW2lTg3qS9V0aKGlb+PlOrei1X02r1wSBHCNX/O+yeTRFSWPKPIGj6MqvvdqV4rnVGw==
+  dependencies:
+    commander "~2.17.1"
+    source-map "~0.6.1"
+    source-map-support "~0.5.6"
+
+test-exclude@^4.2.1:
+  version "4.2.3"
+  resolved "https://registry.yarnpkg.com/test-exclude/-/test-exclude-4.2.3.tgz#a9a5e64474e4398339245a0a769ad7c2f4a97c20"
+  integrity sha512-SYbXgY64PT+4GAL2ocI3HwPa4Q4TBKm0cwAVeKOt/Aoc0gSpNRjJX8w0pA1LMKZ3LBmd8pYBqApFNQLII9kavA==
   dependencies:
-    any-promise "^1.0.0"
+    arrify "^1.0.1"
+    micromatch "^2.3.11"
+    object-assign "^4.1.0"
+    read-pkg-up "^1.0.1"
+    require-main-filename "^1.0.1"
+
+text-extensions@^1.0.0:
+  version "1.9.0"
+  resolved "https://registry.yarnpkg.com/text-extensions/-/text-extensions-1.9.0.tgz#1853e45fee39c945ce6f6c36b2d659b5aabc2a26"
+  integrity sha512-wiBrwC1EhBelW12Zy26JeOUkQ5mRu+5o8rpsJk5+2t+Y5vE7e842qtZDQ2g1NpX/29HdyFeJ4nSIhI47ENSxlQ==
+
+text-extensions@^2.0.0:
+  version "2.0.0"
+  resolved "https://registry.npmjs.org/text-extensions/-/text-extensions-2.0.0.tgz#43eabd1b495482fae4a2bf65e5f56c29f69220f6"
+  integrity sha512-F91ZqLgvi1E0PdvmxMgp+gcf6q8fMH7mhdwWfzXnl1k+GbpQDmi8l7DzLC5JTASKbwpY3TfxajAUzAXcv2NmsQ==
+
+text-table@~0.2.0:
+  version "0.2.0"
+  resolved "https://registry.yarnpkg.com/text-table/-/text-table-0.2.0.tgz#7f5ee823ae805207c00af2df4a84ec3fcfa570b4"
+  integrity sha1-f17oI66AUgfACvLfSoTsP8+lcLQ=
 
 throttle-debounce@^1.0.1:
-  version "1.0.1"
-  resolved "https://registry.yarnpkg.com/throttle-debounce/-/throttle-debounce-1.0.1.tgz#dad0fe130f9daf3719fdea33dc36a8e6ba7f30b5"
+  version "1.1.0"
+  resolved "https://registry.yarnpkg.com/throttle-debounce/-/throttle-debounce-1.1.0.tgz#51853da37be68a155cb6e827b3514a3c422e89cd"
+  integrity sha512-XH8UiPCQcWNuk2LYePibW/4qL97+ZQ1AN3FNXwZRBNPPowo/NRU5fAlDCSNBJIYCKbioZfuYtMhG4quqoJhVzg==
+
+through2-filter@^3.0.0:
+  version "3.0.0"
+  resolved "https://registry.yarnpkg.com/through2-filter/-/through2-filter-3.0.0.tgz#700e786df2367c2c88cd8aa5be4cf9c1e7831254"
+  integrity sha512-jaRjI2WxN3W1V8/FMZ9HKIBXixtiqs3SQSX4/YGIiP3gL6djW48VoZq9tDqeCWs3MT8YY5wb/zli8VW8snY1CA==
+  dependencies:
+    through2 "~2.0.0"
+    xtend "~4.0.0"
 
 through2@^0.5.0:
   version "0.5.1"
   resolved "https://registry.yarnpkg.com/through2/-/through2-0.5.1.tgz#dfdd012eb9c700e2323fd334f38ac622ab372da7"
+  integrity sha1-390BLrnHAOIyP9M084rGIqs3Lac=
   dependencies:
     readable-stream "~1.0.17"
     xtend "~3.0.0"
 
-through2@^0.6.1:
-  version "0.6.5"
-  resolved "https://registry.yarnpkg.com/through2/-/through2-0.6.5.tgz#41ab9c67b29d57209071410e1d7a7a968cd3ad48"
+through2@^2.0.0, through2@^2.0.2, through2@^2.0.3, through2@~2.0.0:
+  version "2.0.5"
+  resolved "https://registry.yarnpkg.com/through2/-/through2-2.0.5.tgz#01c1e39eb31d07cb7d03a96a70823260b23132cd"
+  integrity sha512-/mrRod8xqpA+IHSLyGCQ2s8SPHiCDEeQJSep1jqLYeEUClOFG2Qsh+4FU6G9VeqpZnGW/Su8LQGc4YKni5rYSQ==
   dependencies:
-    readable-stream ">=1.0.33-1 <1.1.0-0"
-    xtend ">=4.0.0 <4.1.0-0"
+    readable-stream "~2.3.6"
+    xtend "~4.0.1"
 
-through2@^2.0.0:
-  version "2.0.3"
-  resolved "https://registry.yarnpkg.com/through2/-/through2-2.0.3.tgz#0004569b37c7c74ba39c43f3ced78d1ad94140be"
+through2@^3.0.0:
+  version "3.0.1"
+  resolved "https://registry.npmjs.org/through2/-/through2-3.0.1.tgz#39276e713c3302edf9e388dd9c812dd3b825bd5a"
+  integrity sha512-M96dvTalPT3YbYLaKaCuwu+j06D/8Jfib0o/PxbVt6Amhv3dUAtW6rTV1jPgJSBG83I/e04Y6xkVdVhSRhi0ww==
   dependencies:
-    readable-stream "^2.1.5"
-    xtend "~4.0.1"
+    readable-stream "2 || 3"
 
-through@^2.3.6, through@~2.3.4, through@~2.3.6:
+through@2, "through@>=2.2.7 <3", through@^2.3.6, through@~2.3.4:
   version "2.3.8"
   resolved "https://registry.yarnpkg.com/through/-/through-2.3.8.tgz#0dd4c9ffaabc357960b1b724115d7e0e86a2e1f5"
+  integrity sha1-DdTJ/6q8NXlgsbckEV1+Doai4fU=
 
-thunky@^0.1.0:
-  version "0.1.0"
-  resolved "https://registry.yarnpkg.com/thunky/-/thunky-0.1.0.tgz#bf30146824e2b6e67b0f2d7a4ac8beb26908684e"
-
-tildify@^1.0.0:
-  version "1.2.0"
-  resolved "https://registry.yarnpkg.com/tildify/-/tildify-1.2.0.tgz#dcec03f55dca9b7aa3e5b04f21817eb56e63588a"
-  dependencies:
-    os-homedir "^1.0.0"
+thunky@^1.0.2:
+  version "1.0.3"
+  resolved "https://registry.yarnpkg.com/thunky/-/thunky-1.0.3.tgz#f5df732453407b09191dae73e2a8cc73f381a826"
+  integrity sha512-YwT8pjmNcAXBZqrubu22P4FYsh2D4dxRmnWBOL8Jk8bUcRUtc5326kx32tuTmFDAZtLOGEVNl8POAR8j896Iow==
 
 time-stamp@^1.0.0:
-  version "1.0.1"
-  resolved "https://registry.yarnpkg.com/time-stamp/-/time-stamp-1.0.1.tgz#9f4bd23559c9365966f3302dbba2b07c6b99b151"
+  version "1.1.0"
+  resolved "https://registry.yarnpkg.com/time-stamp/-/time-stamp-1.1.0.tgz#764a5a11af50561921b133f3b44e618687e0f5c3"
+  integrity sha1-dkpaEa9QVhkhsTPztE5hhofg9cM=
 
-time-stamp@^2.0.0:
-  version "2.0.0"
-  resolved "https://registry.yarnpkg.com/time-stamp/-/time-stamp-2.0.0.tgz#95c6a44530e15ba8d6f4a3ecb8c3a3fac46da357"
+timed-out@^4.0.0:
+  version "4.0.1"
+  resolved "https://registry.npm.taobao.org/timed-out/download/timed-out-4.0.1.tgz#f32eacac5a175bea25d7fab565ab3ed8741ef56f"
+  integrity sha1-8y6srFoXW+ol1/q1Zas+2HQe9W8=
 
-timers-browserify@^2.0.2:
-  version "2.0.2"
-  resolved "https://registry.yarnpkg.com/timers-browserify/-/timers-browserify-2.0.2.tgz#ab4883cf597dcd50af211349a00fbca56ac86b86"
+timers-browserify@^2.0.4:
+  version "2.0.10"
+  resolved "https://registry.yarnpkg.com/timers-browserify/-/timers-browserify-2.0.10.tgz#1d28e3d2aadf1d5a5996c4e9f95601cd053480ae"
+  integrity sha512-YvC1SV1XdOUaL6gx5CoGroT3Gu49pK9+TZ38ErPldOWW4j49GI1HKs9DV+KGq/w6y+LZ72W1c8cKz2vzY+qpzg==
   dependencies:
     setimmediate "^1.0.4"
 
-tmp@0.0.28:
-  version "0.0.28"
-  resolved "https://registry.yarnpkg.com/tmp/-/tmp-0.0.28.tgz#172735b7f614ea7af39664fa84cf0de4e515d120"
-  dependencies:
-    os-tmpdir "~1.0.1"
+timsort@^0.3.0:
+  version "0.3.0"
+  resolved "https://registry.yarnpkg.com/timsort/-/timsort-0.3.0.tgz#405411a8e7e6339fe64db9a234de11dc31e02bd4"
+  integrity sha1-QFQRqOfmM5/mTbmiNN4R3DHgK9Q=
+
+tiny-relative-date@^1.3.0:
+  version "1.3.0"
+  resolved "https://registry.npm.taobao.org/tiny-relative-date/download/tiny-relative-date-1.3.0.tgz#fa08aad501ed730f31cc043181d995c39a935e07"
+  integrity sha1-+giq1QHtcw8xzAQxgdmVw5qTXgc=
 
-tmp@^0.0.33:
+tmp@0.0.33, tmp@0.0.x, tmp@^0.0.33:
   version "0.0.33"
-  resolved "http://registry.npm.taobao.org/tmp/download/tmp-0.0.33.tgz#6d34335889768d21b2bcda0aa277ced3b1bfadf9"
+  resolved "https://registry.yarnpkg.com/tmp/-/tmp-0.0.33.tgz#6d34335889768d21b2bcda0aa277ced3b1bfadf9"
+  integrity sha512-jRCJlojKnZ3addtTOjdIqoRuPEKBvNXcGYqzO6zWZX8KfKEpnGY5jfggJQ3EjKuu8D4bJRr0y+cYJFmYbImXGw==
   dependencies:
     os-tmpdir "~1.0.2"
 
+to-absolute-glob@^2.0.0:
+  version "2.0.2"
+  resolved "https://registry.yarnpkg.com/to-absolute-glob/-/to-absolute-glob-2.0.2.tgz#1865f43d9e74b0822db9f145b78cff7d0f7c849b"
+  integrity sha1-GGX0PZ50sIItufFFt4z/fQ98hJs=
+  dependencies:
+    is-absolute "^1.0.0"
+    is-negated-glob "^1.0.0"
+
 to-array@0.1.4:
   version "0.1.4"
   resolved "https://registry.yarnpkg.com/to-array/-/to-array-0.1.4.tgz#17e6c11f73dd4f3d74cda7a4ff3238e9ad9bf890"
+  integrity sha1-F+bBH3PdTz10zaek/zI46a2b+JA=
 
 to-arraybuffer@^1.0.0:
   version "1.0.1"
   resolved "https://registry.yarnpkg.com/to-arraybuffer/-/to-arraybuffer-1.0.1.tgz#7d229b1fcc637e466ca081180836a7aabff83f43"
+  integrity sha1-fSKbH8xjfkZsoIEYCDanqr/4P0M=
 
-to-fast-properties@^1.0.1:
-  version "1.0.2"
-  resolved "https://registry.yarnpkg.com/to-fast-properties/-/to-fast-properties-1.0.2.tgz#f3f5c0c3ba7299a7ef99427e44633257ade43320"
+to-fast-properties@^1.0.3:
+  version "1.0.3"
+  resolved "https://registry.yarnpkg.com/to-fast-properties/-/to-fast-properties-1.0.3.tgz#b83571fa4d8c25b82e231b06e3a3055de4ca1a47"
+  integrity sha1-uDVx+k2MJbguIxsG46MFXeTKGkc=
+
+to-object-path@^0.3.0:
+  version "0.3.0"
+  resolved "https://registry.yarnpkg.com/to-object-path/-/to-object-path-0.3.0.tgz#297588b7b0e7e0ac08e04e672f85c1f4999e17af"
+  integrity sha1-KXWIt7Dn4KwI4E5nL4XB9JmeF68=
+  dependencies:
+    kind-of "^3.0.2"
+
+to-regex-range@^2.1.0:
+  version "2.1.1"
+  resolved "https://registry.yarnpkg.com/to-regex-range/-/to-regex-range-2.1.1.tgz#7c80c17b9dfebe599e27367e0d4dd5590141db38"
+  integrity sha1-fIDBe53+vlmeJzZ+DU3VWQFB2zg=
+  dependencies:
+    is-number "^3.0.0"
+    repeat-string "^1.6.1"
+
+to-regex@^3.0.1, to-regex@^3.0.2:
+  version "3.0.2"
+  resolved "https://registry.yarnpkg.com/to-regex/-/to-regex-3.0.2.tgz#13cfdd9b336552f30b51f33a8ae1b42a7a7599ce"
+  integrity sha512-FWtleNAtZ/Ki2qtqej2CXTOayOH9bHDQF+Q48VpWyDXjbYxA4Yz8iDB31zXOBUlOHHKidDbqGVrTUvQMPmBGBw==
+  dependencies:
+    define-property "^2.0.2"
+    extend-shallow "^3.0.2"
+    regex-not "^1.0.2"
+    safe-regex "^1.1.0"
+
+to-through@^2.0.0:
+  version "2.0.0"
+  resolved "https://registry.yarnpkg.com/to-through/-/to-through-2.0.0.tgz#fc92adaba072647bc0b67d6b03664aa195093af6"
+  integrity sha1-/JKtq6ByZHvAtn1rA2ZKoZUJOvY=
+  dependencies:
+    through2 "^2.0.3"
 
 toposort@^1.0.0:
-  version "1.0.0"
-  resolved "https://registry.yarnpkg.com/toposort/-/toposort-1.0.0.tgz#b66cf385a1a8a8e68e45b8259e7f55875e8b06ef"
+  version "1.0.7"
+  resolved "https://registry.yarnpkg.com/toposort/-/toposort-1.0.7.tgz#2e68442d9f64ec720b8cc89e6443ac6caa950029"
+  integrity sha1-LmhELZ9k7HILjMieZEOsbKqVACk=
 
-tough-cookie@^2.2.0, tough-cookie@~2.3.0:
-  version "2.3.2"
-  resolved "https://registry.yarnpkg.com/tough-cookie/-/tough-cookie-2.3.2.tgz#f081f76e4c85720e6c37a5faced737150d84072a"
+tough-cookie@~2.4.3:
+  version "2.4.3"
+  resolved "https://registry.yarnpkg.com/tough-cookie/-/tough-cookie-2.4.3.tgz#53f36da3f47783b0925afa06ff9f3b165280f781"
+  integrity sha512-Q5srk/4vDM54WJsJio3XNn6K2sCG+CQ8G5Wz6bZhRZoAe/+TxjWB/GlFAnYEbkYVlON9FMk/fE3h2RLpPXo4lQ==
   dependencies:
+    psl "^1.1.24"
     punycode "^1.4.1"
 
-tr46@~0.0.1:
-  version "0.0.3"
-  resolved "https://registry.yarnpkg.com/tr46/-/tr46-0.0.3.tgz#8184fd347dac9cdc185992f3a6622e14b9d9ab6a"
+tough-cookie@~2.5.0:
+  version "2.5.0"
+  resolved "https://registry.npm.taobao.org/tough-cookie/download/tough-cookie-2.5.0.tgz?cache=0&sync_timestamp=1589682815640&other_urls=https%3A%2F%2Fregistry.npm.taobao.org%2Ftough-cookie%2Fdownload%2Ftough-cookie-2.5.0.tgz#cd9fb2a0aa1d5a12b473bd9fb96fa3dcff65ade2"
+  integrity sha1-zZ+yoKodWhK0c72fuW+j3P9lreI=
+  dependencies:
+    psl "^1.1.28"
+    punycode "^2.1.1"
 
 transliteration@^1.1.11:
-  version "1.1.16"
-  resolved "https://registry.yarnpkg.com/transliteration/-/transliteration-1.1.16.tgz#5df7596306f3129cee82e341dc8a6b8ecaef77e0"
+  version "1.6.6"
+  resolved "https://registry.yarnpkg.com/transliteration/-/transliteration-1.6.6.tgz#8a7e8ab3044ad19f233f50c15894cbf69e5d205e"
+  integrity sha1-in6KswRK0Z8jP1DBWJTL9p5dIF4=
   dependencies:
-    yargs "^6.4.0"
+    yargs "^12.0.1"
 
 trim-newlines@^1.0.0:
   version "1.0.0"
   resolved "https://registry.yarnpkg.com/trim-newlines/-/trim-newlines-1.0.0.tgz#5887966bb582a4503a41eb524f7d35011815a613"
+  integrity sha1-WIeWa7WCpFA6QetST301ARgVphM=
+
+trim-newlines@^2.0.0:
+  version "2.0.0"
+  resolved "https://registry.npmjs.org/trim-newlines/-/trim-newlines-2.0.0.tgz#b403d0b91be50c331dfc4b82eeceb22c3de16d20"
+  integrity sha1-tAPQuRvlDDMd/EuC7s6yLD3hbSA=
+
+trim-off-newlines@^1.0.0:
+  version "1.0.1"
+  resolved "https://registry.npmjs.org/trim-off-newlines/-/trim-off-newlines-1.0.1.tgz#9f9ba9d9efa8764c387698bcbfeb2c848f11adb3"
+  integrity sha1-n5up2e+odkw4dpi8v+sshI8RrbM=
+
+trim-right@^1.0.1:
+  version "1.0.1"
+  resolved "https://registry.yarnpkg.com/trim-right/-/trim-right-1.0.1.tgz#cb2e1203067e0c8de1f614094b9fe45704ea6003"
+  integrity sha1-yy4SAwZ+DI3h9hQJS5/kVwTqYAM=
+
+"true-case-path@^1.0.2":
+  version "1.0.3"
+  resolved "https://registry.npm.taobao.org/true-case-path/download/true-case-path-1.0.3.tgz#f813b5a8c86b40da59606722b144e3225799f47d"
+  integrity sha1-+BO1qMhrQNpZYGcisUTjIleZ9H0=
+  dependencies:
+    glob "^7.1.2"
+
+tslib@^1.9.0:
+  version "1.9.3"
+  resolved "https://registry.yarnpkg.com/tslib/-/tslib-1.9.3.tgz#d7e4dd79245d85428c4d7e4822a79917954ca286"
+  integrity sha512-4krF8scpejhaOgqzBEcGM7yDIEfi0/8+8zDRZhNZZ2kjmHJ4hv3zCbQWxoJGz1iw5U0Jl0nma13xzHXcncMavQ==
 
 tty-browserify@0.0.0:
   version "0.0.0"
   resolved "https://registry.yarnpkg.com/tty-browserify/-/tty-browserify-0.0.0.tgz#a157ba402da24e9bf957f9aa69d524eed42901a6"
+  integrity sha1-oVe6QC2iTpv5V/mqadUk7tQpAaY=
 
 tunnel-agent@^0.6.0:
   version "0.6.0"
   resolved "https://registry.yarnpkg.com/tunnel-agent/-/tunnel-agent-0.6.0.tgz#27a5dea06b36b04a0a9966774b290868f0fc40fd"
+  integrity sha1-J6XeoGs2sEoKmWZ3SykIaPD8QP0=
   dependencies:
     safe-buffer "^5.0.1"
 
-tunnel-agent@~0.4.1:
-  version "0.4.3"
-  resolved "https://registry.yarnpkg.com/tunnel-agent/-/tunnel-agent-0.4.3.tgz#6373db76909fe570e08d73583365ed828a74eeeb"
-
 tweetnacl@^0.14.3, tweetnacl@~0.14.0:
   version "0.14.5"
   resolved "https://registry.yarnpkg.com/tweetnacl/-/tweetnacl-0.14.5.tgz#5ae68177f192d4456269d108afa93ff8743f4f64"
+  integrity sha1-WuaBd/GS1EViadEIr6k/+HQ/T2Q=
 
 type-check@~0.3.2:
   version "0.3.2"
-  resolved "http://registry.npm.taobao.org/type-check/download/type-check-0.3.2.tgz#5884cab512cf1d355e3fb784f30804b2b520db72"
+  resolved "https://registry.yarnpkg.com/type-check/-/type-check-0.3.2.tgz#5884cab512cf1d355e3fb784f30804b2b520db72"
+  integrity sha1-WITKtRLPHTVeP7eE8wgEsrUg23I=
   dependencies:
     prelude-ls "~1.1.2"
 
-type-detect@0.1.1:
-  version "0.1.1"
-  resolved "https://registry.yarnpkg.com/type-detect/-/type-detect-0.1.1.tgz#0ba5ec2a885640e470ea4e8505971900dac58822"
-
-type-detect@^1.0.0:
-  version "1.0.0"
-  resolved "https://registry.yarnpkg.com/type-detect/-/type-detect-1.0.0.tgz#762217cc06db258ec48908a1298e8b95121e8ea2"
+type-detect@4.0.8, type-detect@^4.0.0, type-detect@^4.0.5:
+  version "4.0.8"
+  resolved "https://registry.npmjs.org/type-detect/-/type-detect-4.0.8.tgz#7646fb5f18871cfbb7749e69bd39a6388eb7450c"
+  integrity sha512-0fr/mIH1dlO+x7TlcMy+bIDqKPsw/70tVyeHW787goQjhmqaZe10uwLujubK9q9Lg6Fiho1KUKDYz0Z7k7g5/g==
 
-type-is@~1.6.13:
-  version "1.6.14"
-  resolved "https://registry.yarnpkg.com/type-is/-/type-is-1.6.14.tgz#e219639c17ded1ca0789092dd54a03826b817cb2"
+type-is@~1.6.16:
+  version "1.6.16"
+  resolved "https://registry.yarnpkg.com/type-is/-/type-is-1.6.16.tgz#f89ce341541c672b25ee7ae3c73dee3b2be50194"
+  integrity sha512-HRkVv/5qY2G6I8iab9cI7v1bOIdhm94dVjQCPFElW9W+3GeDOSHmy2EBYe4VTApuzolPcmgFTN3ftVJRKR2J9Q==
   dependencies:
     media-typer "0.3.0"
-    mime-types "~2.1.13"
+    mime-types "~2.1.18"
 
 typedarray@^0.0.6:
   version "0.0.6"
   resolved "https://registry.yarnpkg.com/typedarray/-/typedarray-0.0.6.tgz#867ac74e3864187b1d3d47d996a78ec5c8830777"
+  integrity sha1-hnrHTjhkGHsdPUfZlqeOxciDB3c=
 
-uc.micro@^1.0.1:
-  version "1.0.3"
-  resolved "https://registry.yarnpkg.com/uc.micro/-/uc.micro-1.0.3.tgz#7ed50d5e0f9a9fb0a573379259f2a77458d50192"
-
-uglify-js@2.7.x:
-  version "2.7.5"
-  resolved "https://registry.yarnpkg.com/uglify-js/-/uglify-js-2.7.5.tgz#4612c0c7baaee2ba7c487de4904ae122079f2ca8"
-  dependencies:
-    async "~0.2.6"
-    source-map "~0.5.1"
-    uglify-to-browserify "~1.0.0"
-    yargs "~3.10.0"
+uc.micro@^1.0.1, uc.micro@^1.0.5:
+  version "1.0.5"
+  resolved "https://registry.yarnpkg.com/uc.micro/-/uc.micro-1.0.5.tgz#0c65f15f815aa08b560a61ce8b4db7ffc3f45376"
+  integrity sha512-JoLI4g5zv5qNyT09f4YAvEZIIV1oOjqnewYg5D38dkQljIzpPT296dbIGvKro3digYI1bkb7W6EP1y4uDlmzLg==
 
-uglify-js@^2.6, uglify-js@^2.8.29:
-  version "2.8.29"
-  resolved "https://registry.yarnpkg.com/uglify-js/-/uglify-js-2.8.29.tgz#29c5733148057bb4e1f75df35b7a9cb72e6a59dd"
+uglify-js@3.4.x, uglify-js@^3.0.0:
+  version "3.4.9"
+  resolved "https://registry.yarnpkg.com/uglify-js/-/uglify-js-3.4.9.tgz#af02f180c1207d76432e473ed24a28f4a782bae3"
+  integrity sha512-8CJsbKOtEbnJsTyv6LE6m6ZKniqMiFWmm9sRbopbkGs3gMPPfd3Fh8iIA4Ykv5MgaTbqHr4BaoGLJLZNhsrW1Q==
   dependencies:
-    source-map "~0.5.1"
-    yargs "~3.10.0"
-  optionalDependencies:
-    uglify-to-browserify "~1.0.0"
+    commander "~2.17.1"
+    source-map "~0.6.1"
 
-uglify-js@~2.3:
-  version "2.3.6"
-  resolved "https://registry.yarnpkg.com/uglify-js/-/uglify-js-2.3.6.tgz#fa0984770b428b7a9b2a8058f46355d14fef211a"
+uglify-js@^3.1.4:
+  version "3.6.0"
+  resolved "https://registry.yarnpkg.com/uglify-js/-/uglify-js-3.6.0.tgz#704681345c53a8b2079fb6cec294b05ead242ff5"
+  integrity sha512-W+jrUHJr3DXKhrsS7NUVxn3zqMOFn0hL/Ei6v0anCIMoKC93TjcflTagwIHLW7SfMFfiQuktQyFVCFHGUE0+yg==
   dependencies:
-    async "~0.2.6"
-    optimist "~0.3.5"
-    source-map "~0.1.7"
-
-uglify-to-browserify@~1.0.0:
-  version "1.0.2"
-  resolved "https://registry.yarnpkg.com/uglify-to-browserify/-/uglify-to-browserify-1.0.2.tgz#6e0924d6bda6b5afe349e39a6d632850a0f882b7"
+    commander "~2.20.0"
+    source-map "~0.6.1"
 
-uglifyjs-webpack-plugin@^0.4.6:
-  version "0.4.6"
-  resolved "https://registry.yarnpkg.com/uglifyjs-webpack-plugin/-/uglifyjs-webpack-plugin-0.4.6.tgz#b951f4abb6bd617e66f63eb891498e391763e309"
+uglifyjs-webpack-plugin@^2.1.1:
+  version "2.1.1"
+  resolved "https://registry.yarnpkg.com/uglifyjs-webpack-plugin/-/uglifyjs-webpack-plugin-2.1.1.tgz#6937d7513a37280d4792f1fb536bef35e08e420a"
+  integrity sha512-TQEcyMNkObX/H+FfcKjiDgs5RcXX8vW2UUUrDTOfQgg3lrafztfeM5WAwXo+AzqozJK6NP9w98xNpG/dutzSsg==
   dependencies:
-    source-map "^0.5.6"
-    uglify-js "^2.8.29"
-    webpack-sources "^1.0.1"
+    cacache "^11.2.0"
+    find-cache-dir "^2.0.0"
+    schema-utils "^1.0.0"
+    serialize-javascript "^1.4.0"
+    source-map "^0.6.1"
+    uglify-js "^3.0.0"
+    webpack-sources "^1.1.0"
+    worker-farm "^1.5.2"
 
-uid-number@~0.0.6:
+uid-number@0.0.6:
   version "0.0.6"
-  resolved "https://registry.yarnpkg.com/uid-number/-/uid-number-0.0.6.tgz#0ea10e8035e8eb5b8e4449f06da1c730663baa81"
+  resolved "https://registry.npm.taobao.org/uid-number/download/uid-number-0.0.6.tgz#0ea10e8035e8eb5b8e4449f06da1c730663baa81"
+  integrity sha1-DqEOgDXo61uOREnwbaHHMGY7qoE=
 
-ultron@1.0.x:
-  version "1.0.2"
-  resolved "https://registry.yarnpkg.com/ultron/-/ultron-1.0.2.tgz#ace116ab557cd197386a4e88f4685378c8b2e4fa"
+ultron@~1.1.0:
+  version "1.1.1"
+  resolved "https://registry.npmjs.org/ultron/-/ultron-1.1.1.tgz#9fe1536a10a664a65266a1e3ccf85fd36302bc9c"
+  integrity sha512-UIEXBNeYmKptWH6z8ZnqTeS8fV74zG0/eRU9VGkpzz+LIJNs8W/zM/L+7ctCkRrgbNnnR0xxw4bKOr0cW0N0Og==
+
+umask@^1.1.0, umask@~1.1.0:
+  version "1.1.0"
+  resolved "https://registry.npm.taobao.org/umask/download/umask-1.1.0.tgz#f29cebf01df517912bb58ff9c4e50fde8e33320d"
+  integrity sha1-8pzr8B31F5ErtY/5xOUP3o4zMg0=
 
-unc-path-regex@^0.1.0:
+unc-path-regex@^0.1.2:
   version "0.1.2"
-  resolved "http://registry.npmjs.org/unc-path-regex/-/unc-path-regex-0.1.2.tgz#e73dd3d7b0d7c5ed86fbac6b0ae7d8c6a69d50fa"
+  resolved "https://registry.yarnpkg.com/unc-path-regex/-/unc-path-regex-0.1.2.tgz#e73dd3d7b0d7c5ed86fbac6b0ae7d8c6a69d50fa"
+  integrity sha1-5z3T17DXxe2G+6xrCufYxqadUPo=
 
-underscore@~1.6.0:
-  version "1.6.0"
-  resolved "https://registry.yarnpkg.com/underscore/-/underscore-1.6.0.tgz#8b38b10cacdef63337b8b24e4ff86d45aea529a8"
+undertaker-registry@^1.0.0:
+  version "1.0.1"
+  resolved "https://registry.yarnpkg.com/undertaker-registry/-/undertaker-registry-1.0.1.tgz#5e4bda308e4a8a2ae584f9b9a4359a499825cc50"
+  integrity sha1-XkvaMI5KiirlhPm5pDWaSZglzFA=
+
+undertaker@^1.0.0:
+  version "1.2.0"
+  resolved "https://registry.yarnpkg.com/undertaker/-/undertaker-1.2.0.tgz#339da4646252d082dc378e708067299750e11b49"
+  integrity sha1-M52kZGJS0ILcN45wgGcpl1DhG0k=
+  dependencies:
+    arr-flatten "^1.0.1"
+    arr-map "^2.0.0"
+    bach "^1.0.0"
+    collection-map "^1.0.0"
+    es6-weak-map "^2.0.1"
+    last-run "^1.1.0"
+    object.defaults "^1.0.0"
+    object.reduce "^1.0.0"
+    undertaker-registry "^1.0.0"
+
+union-value@^1.0.0:
+  version "1.0.0"
+  resolved "https://registry.yarnpkg.com/union-value/-/union-value-1.0.0.tgz#5c71c34cb5bad5dcebe3ea0cd08207ba5aa1aea4"
+  integrity sha1-XHHDTLW61dzr4+oM0IIHulqhrqQ=
+  dependencies:
+    arr-union "^3.1.0"
+    get-value "^2.0.6"
+    is-extendable "^0.1.1"
+    set-value "^0.4.3"
 
 uniq@^1.0.1:
   version "1.0.1"
   resolved "https://registry.yarnpkg.com/uniq/-/uniq-1.0.1.tgz#b31c5ae8254844a3a8281541ce2b04b865a734ff"
-
-uniqid@^4.0.0:
-  version "4.1.0"
-  resolved "https://registry.yarnpkg.com/uniqid/-/uniqid-4.1.0.tgz#33d9679f65022f48988a03fd24e7dcaf8f109eca"
-  dependencies:
-    macaddress "^0.2.8"
+  integrity sha1-sxxa6CVIRKOoKBVBzisEuGWnNP8=
 
 uniqs@^2.0.0:
   version "2.0.0"
   resolved "https://registry.yarnpkg.com/uniqs/-/uniqs-2.0.0.tgz#ffede4b36b25290696e6e165d4a59edb998e6b02"
+  integrity sha1-/+3ks2slKQaW5uFl1KWe25mOawI=
+
+unique-filename@^1.1.1:
+  version "1.1.1"
+  resolved "https://registry.yarnpkg.com/unique-filename/-/unique-filename-1.1.1.tgz#1d69769369ada0583103a1e6ae87681b56573230"
+  integrity sha512-Vmp0jIp2ln35UTXuryvjzkjGdRyf9b2lTXuSYUiPmzRcl3FDtYqAwOnTJkAngD9SWhnoJzDbTKwaOrZ+STtxNQ==
+  dependencies:
+    unique-slug "^2.0.0"
+
+unique-slug@^2.0.0:
+  version "2.0.1"
+  resolved "https://registry.yarnpkg.com/unique-slug/-/unique-slug-2.0.1.tgz#5e9edc6d1ce8fb264db18a507ef9bd8544451ca6"
+  integrity sha512-n9cU6+gITaVu7VGj1Z8feKMmfAjEAQGhwD9fE3zvpRRa0wEIx8ODYkVGfSc94M2OX00tUFV8wH3zYbm1I8mxFg==
+  dependencies:
+    imurmurhash "^0.1.4"
+
+unique-stream@^2.0.2:
+  version "2.3.1"
+  resolved "https://registry.yarnpkg.com/unique-stream/-/unique-stream-2.3.1.tgz#c65d110e9a4adf9a6c5948b28053d9a8d04cbeac"
+  integrity sha512-2nY4TnBE70yoxHkDli7DMazpWiP7xMdCYqU2nBRO0UB+ZpEkGsSija7MvmvnZFUeC+mrgiUfcHSr3LmRFIg4+A==
+  dependencies:
+    json-stable-stringify-without-jsonify "^1.0.1"
+    through2-filter "^3.0.0"
+
+unique-string@^1.0.0:
+  version "1.0.0"
+  resolved "https://registry.npm.taobao.org/unique-string/download/unique-string-1.0.0.tgz#9e1057cca851abb93398f8b33ae187b99caec11a"
+  integrity sha1-nhBXzKhRq7kzmPizOuGHuZyuwRo=
+  dependencies:
+    crypto-random-string "^1.0.0"
+
+universalify@^0.1.0:
+  version "0.1.2"
+  resolved "https://registry.yarnpkg.com/universalify/-/universalify-0.1.2.tgz#b646f69be3942dabcecc9d6639c80dc105efaa66"
+  integrity sha512-rBJeI5CXAlmy1pV+617WB9J63U6XcazHHF2f2dbJix4XzpUF0RS3Zbj0FGIOCAva5P/d/GBOYaACQ1w+0azUkg==
+
+unpipe@1.0.0, unpipe@~1.0.0:
+  version "1.0.0"
+  resolved "https://registry.yarnpkg.com/unpipe/-/unpipe-1.0.0.tgz#b2bf4ee8514aae6165b4817829d21b2ef49904ec"
+  integrity sha1-sr9O6FFKrmFltIF4KdIbLvSZBOw=
+
+unquote@~1.1.1:
+  version "1.1.1"
+  resolved "https://registry.yarnpkg.com/unquote/-/unquote-1.1.1.tgz#8fded7324ec6e88a0ff8b905e7c098cdc086d544"
+  integrity sha1-j97XMk7G6IoP+LkF58CYzcCG1UQ=
+
+unset-value@^1.0.0:
+  version "1.0.0"
+  resolved "https://registry.yarnpkg.com/unset-value/-/unset-value-1.0.0.tgz#8376873f7d2335179ffb1e6fc3a8ed0dfc8ab559"
+  integrity sha1-g3aHP30jNRef+x5vw6jtDfyKtVk=
+  dependencies:
+    has-value "^0.3.1"
+    isobject "^3.0.0"
+
+unzip-response@^2.0.1:
+  version "2.0.1"
+  resolved "https://registry.npm.taobao.org/unzip-response/download/unzip-response-2.0.1.tgz#d2f0f737d16b0615e72a6935ed04214572d56f97"
+  integrity sha1-0vD3N9FrBhXnKmk17QQhRXLVb5c=
 
-unique-stream@^1.0.0:
-  version "1.0.0"
-  resolved "https://registry.yarnpkg.com/unique-stream/-/unique-stream-1.0.0.tgz#d59a4a75427447d9aa6c91e70263f8d26a4b104b"
+upath@^1.0.5:
+  version "1.1.0"
+  resolved "https://registry.yarnpkg.com/upath/-/upath-1.1.0.tgz#35256597e46a581db4793d0ce47fa9aebfc9fabd"
+  integrity sha512-bzpH/oBhoS/QI/YtbkqCg6VEiPYjSZtrHQM6/QnJS6OL9pKUFLqb3aFh4Scvwm45+7iAgiMkLhSbaZxUqmrprw==
 
-universalify@^0.1.0:
-  version "0.1.1"
-  resolved "https://registry.yarnpkg.com/universalify/-/universalify-0.1.1.tgz#fa71badd4437af4c148841e3b3b165f9e9e590b7"
+upath@^1.1.0:
+  version "1.1.2"
+  resolved "https://registry.npmjs.org/upath/-/upath-1.1.2.tgz#3db658600edaeeccbe6db5e684d67ee8c2acd068"
+  integrity sha512-kXpym8nmDmlCBr7nKdIx8P2jNBa+pBpIUFRnKJ4dr8htyYGJFokkr2ZvERRtUN+9SY+JqXouNgUPtv6JQva/2Q==
 
-unpipe@1.0.0, unpipe@~1.0.0:
-  version "1.0.0"
-  resolved "https://registry.yarnpkg.com/unpipe/-/unpipe-1.0.0.tgz#b2bf4ee8514aae6165b4817829d21b2ef49904ec"
+update-notifier@^2.3.0, update-notifier@^2.5.0:
+  version "2.5.0"
+  resolved "https://registry.npm.taobao.org/update-notifier/download/update-notifier-2.5.0.tgz#d0744593e13f161e406acb1d9408b72cad08aff6"
+  integrity sha1-0HRFk+E/Fh5AassdlAi3LK0Ir/Y=
+  dependencies:
+    boxen "^1.2.1"
+    chalk "^2.0.1"
+    configstore "^3.0.0"
+    import-lazy "^2.1.0"
+    is-ci "^1.0.10"
+    is-installed-globally "^0.1.0"
+    is-npm "^1.0.0"
+    latest-version "^3.0.0"
+    semver-diff "^2.0.0"
+    xdg-basedir "^3.0.0"
 
 upper-case@^1.1.1:
   version "1.1.3"
   resolved "https://registry.yarnpkg.com/upper-case/-/upper-case-1.1.3.tgz#f6b4501c2ec4cdd26ba78be7222961de77621598"
+  integrity sha1-9rRQHC7EzdJrp4vnIilh3ndiFZg=
 
 uppercamelcase@^1.1.0:
   version "1.1.0"
   resolved "https://registry.yarnpkg.com/uppercamelcase/-/uppercamelcase-1.1.0.tgz#324d98a6b3afc7e8a8953e10641509b0e4e23f97"
+  integrity sha1-Mk2YprOvx+iolT4QZBUJsOTiP5c=
   dependencies:
     camelcase "^1.2.1"
 
+uri-js@^4.2.2:
+  version "4.2.2"
+  resolved "https://registry.yarnpkg.com/uri-js/-/uri-js-4.2.2.tgz#94c540e1ff772956e2299507c010aea6c8838eb0"
+  integrity sha512-KY9Frmirql91X2Qgjry0Wd4Y+YTdrdZheS8TFwvkbLWf/G5KNJDCh6pKL5OZctEW4+0Baa5idK2ZQuELRwPznQ==
+  dependencies:
+    punycode "^2.1.0"
+
+urix@^0.1.0:
+  version "0.1.0"
+  resolved "https://registry.yarnpkg.com/urix/-/urix-0.1.0.tgz#da937f7a62e21fec1fd18d49b35c2935067a6c72"
+  integrity sha1-2pN/emLiH+wf0Y1Js1wpNQZ6bHI=
+
 url-join@^2.0.2:
   version "2.0.5"
-  resolved "http://registry.npm.taobao.org/url-join/download/url-join-2.0.5.tgz#5af22f18c052a000a48d7b82c5e9c2e2feeda728"
+  resolved "https://registry.yarnpkg.com/url-join/-/url-join-2.0.5.tgz#5af22f18c052a000a48d7b82c5e9c2e2feeda728"
+  integrity sha1-WvIvGMBSoACkjXuCxenC4v7tpyg=
 
-url-loader@^0.6.2:
-  version "0.6.2"
-  resolved "https://registry.yarnpkg.com/url-loader/-/url-loader-0.6.2.tgz#a007a7109620e9d988d14bce677a1decb9a993f7"
+url-loader@^1.0.1:
+  version "1.1.2"
+  resolved "https://registry.yarnpkg.com/url-loader/-/url-loader-1.1.2.tgz#b971d191b83af693c5e3fea4064be9e1f2d7f8d8"
+  integrity sha512-dXHkKmw8FhPqu8asTc1puBfe3TehOCo2+RmOOev5suNCIYBcT626kxiWg1NBVkwc4rO8BGa7gP70W7VXuqHrjg==
   dependencies:
-    loader-utils "^1.0.2"
-    mime "^1.4.1"
-    schema-utils "^0.3.0"
+    loader-utils "^1.1.0"
+    mime "^2.0.3"
+    schema-utils "^1.0.0"
 
-url-parse@1.0.x:
-  version "1.0.5"
-  resolved "https://registry.yarnpkg.com/url-parse/-/url-parse-1.0.5.tgz#0854860422afdcfefeb6c965c662d4800169927b"
+url-parse-lax@^1.0.0:
+  version "1.0.0"
+  resolved "https://registry.npm.taobao.org/url-parse-lax/download/url-parse-lax-1.0.0.tgz#7af8f303645e9bd79a272e7a14ac68bc0609da73"
+  integrity sha1-evjzA2Rem9eaJy56FKxovAYJ2nM=
   dependencies:
-    querystringify "0.0.x"
-    requires-port "1.0.x"
+    prepend-http "^1.0.1"
 
-url-parse@^1.1.8:
-  version "1.1.9"
-  resolved "https://registry.yarnpkg.com/url-parse/-/url-parse-1.1.9.tgz#c67f1d775d51f0a18911dd7b3ffad27bb9e5bd19"
+url-parse@^1.4.3:
+  version "1.4.4"
+  resolved "https://registry.yarnpkg.com/url-parse/-/url-parse-1.4.4.tgz#cac1556e95faa0303691fec5cf9d5a1bc34648f8"
+  integrity sha512-/92DTTorg4JjktLNLe6GPS2/RvAd/RGr6LuktmWSMLEOa6rjnlrFXNgSbSmkNvCoL2T028A0a1JaJLzRMlFoHg==
   dependencies:
-    querystringify "~1.0.0"
-    requires-port "1.0.x"
-
-url2@^0.0.0:
-  version "0.0.0"
-  resolved "https://registry.yarnpkg.com/url2/-/url2-0.0.0.tgz#4eaabd1d5c3ac90d62ab4485c998422865a04b1a"
+    querystringify "^2.0.0"
+    requires-port "^1.0.0"
 
 url@^0.11.0:
   version "0.11.0"
   resolved "https://registry.yarnpkg.com/url/-/url-0.11.0.tgz#3838e97cfc60521eb73c525a8e55bfdd9e2e28f1"
+  integrity sha1-ODjpfPxgUh63PFJajlW/3Z4uKPE=
   dependencies:
     punycode "1.3.2"
     querystring "0.2.0"
 
+use@^3.1.0:
+  version "3.1.1"
+  resolved "https://registry.yarnpkg.com/use/-/use-3.1.1.tgz#d50c8cac79a19fbc20f2911f56eb973f4e10070f"
+  integrity sha512-cwESVXlO3url9YWlFW/TA9cshCEhtu7IKJ/p5soJ/gGpj7vbvFrAY/eIioQ6Dw23KjZhYgiIo8HOs1nQ2vr/oQ==
+
 user-home@^1.1.1:
   version "1.1.1"
   resolved "https://registry.yarnpkg.com/user-home/-/user-home-1.1.1.tgz#2b5be23a32b63a7c9deb8d0f28d485724a3df190"
+  integrity sha1-K1viOjK2Onyd640PKNSFcko98ZA=
 
-useragent@^2.1.9:
-  version "2.1.9"
-  resolved "https://registry.yarnpkg.com/useragent/-/useragent-2.1.9.tgz#4dba2bc4dad1875777ab15de3ff8098b475000b7"
+useragent@2.3.0:
+  version "2.3.0"
+  resolved "https://registry.npmjs.org/useragent/-/useragent-2.3.0.tgz#217f943ad540cb2128658ab23fc960f6a88c9972"
+  integrity sha512-4AoH4pxuSvHCjqLO04sU6U/uE65BYza8l/KKBS0b0hnUPWi+cQ2BpeTEwejCSx9SPV5/U03nniDTrWx5NrmKdw==
   dependencies:
-    lru-cache "2.2.x"
+    lru-cache "4.1.x"
+    tmp "0.0.x"
 
-utf8@2.1.0:
-  version "2.1.0"
-  resolved "https://registry.yarnpkg.com/utf8/-/utf8-2.1.0.tgz#0cfec5c8052d44a23e3aaa908104e8075f95dfd5"
+utf8@^2.1.1:
+  version "2.1.2"
+  resolved "https://registry.npm.taobao.org/utf8/download/utf8-2.1.2.tgz#1fa0d9270e9be850d9b05027f63519bf46457d96"
+  integrity sha1-H6DZJw6b6FDZsFAn9jUZv0ZFfZY=
 
-util-deprecate@~1.0.1:
+util-deprecate@^1.0.1, util-deprecate@~1.0.1:
   version "1.0.2"
-  resolved "http://registry.npm.taobao.org/util-deprecate/download/util-deprecate-1.0.2.tgz#450d4dc9fa70de732762fbd2d4a28981419a0ccf"
+  resolved "https://registry.yarnpkg.com/util-deprecate/-/util-deprecate-1.0.2.tgz#450d4dc9fa70de732762fbd2d4a28981419a0ccf"
+  integrity sha1-RQ1Nyfpw3nMnYvvS1KKJgUGaDM8=
+
+util-extend@^1.0.1:
+  version "1.0.3"
+  resolved "https://registry.npm.taobao.org/util-extend/download/util-extend-1.0.3.tgz#a7c216d267545169637b3b6edc6ca9119e2ff93f"
+  integrity sha1-p8IW0mdUUWljeztu3GypEZ4v+T8=
+
+util-promisify@^2.1.0:
+  version "2.1.0"
+  resolved "https://registry.npm.taobao.org/util-promisify/download/util-promisify-2.1.0.tgz#3c2236476c4d32c5ff3c47002add7c13b9a82a53"
+  integrity sha1-PCI2R2xNMsX/PEcAKt18E7moKlM=
+  dependencies:
+    object.getownpropertydescriptors "^2.0.3"
+
+util.promisify@1.0.0, util.promisify@~1.0.0:
+  version "1.0.0"
+  resolved "https://registry.yarnpkg.com/util.promisify/-/util.promisify-1.0.0.tgz#440f7165a459c9a16dc145eb8e72f35687097030"
+  integrity sha512-i+6qA2MPhvoKLuxnJNpXAGhg7HphQOSUq2LKMZD0m15EiskXUkMvKdF4Uui0WYeCUGea+o2cw/ZuwehtfsrNkA==
+  dependencies:
+    define-properties "^1.1.2"
+    object.getownpropertydescriptors "^2.0.3"
 
-util@0.10.3, "util@>=0.10.3 <1", util@^0.10.3:
+util@0.10.3:
   version "0.10.3"
   resolved "https://registry.yarnpkg.com/util/-/util-0.10.3.tgz#7afb1afe50805246489e3db7fe0ed379336ac0f9"
+  integrity sha1-evsa/lCAUkZInj23/g7TeTNqwPk=
   dependencies:
     inherits "2.0.1"
 
-utila@~0.3:
-  version "0.3.3"
-  resolved "https://registry.yarnpkg.com/utila/-/utila-0.3.3.tgz#d7e8e7d7e309107092b05f8d9688824d633a4226"
+util@^0.11.0:
+  version "0.11.1"
+  resolved "https://registry.yarnpkg.com/util/-/util-0.11.1.tgz#3236733720ec64bb27f6e26f421aaa2e1b588d61"
+  integrity sha512-HShAsny+zS2TZfaXxD9tYj4HQGlBezXZMZuM/S5PKLLoZkShZiGk9o5CzukI1LVHZvjdvZ2Sj1aW/Ndn2NB/HQ==
+  dependencies:
+    inherits "2.0.3"
 
-utila@~0.4:
+utila@^0.4.0, utila@~0.4:
   version "0.4.0"
   resolved "https://registry.yarnpkg.com/utila/-/utila-0.4.0.tgz#8a16a05d445657a3aea5eecc5b12a4fa5379772c"
+  integrity sha1-ihagXURWV6Oupe7MWxKk+lN5dyw=
 
-utils-merge@1.0.0:
-  version "1.0.0"
-  resolved "https://registry.yarnpkg.com/utils-merge/-/utils-merge-1.0.0.tgz#0294fb922bb9375153541c4f7096231f287c8af8"
-
-uuid@^2.0.2:
-  version "2.0.3"
-  resolved "https://registry.yarnpkg.com/uuid/-/uuid-2.0.3.tgz#67e2e863797215530dff318e5bf9dcebfd47b21a"
+utils-merge@1.0.1:
+  version "1.0.1"
+  resolved "https://registry.yarnpkg.com/utils-merge/-/utils-merge-1.0.1.tgz#9f95710f50a267947b2ccc124741c1028427e713"
+  integrity sha1-n5VxD1CiZ5R7LMwSR0HBAoQn5xM=
 
-uuid@^3.0.0:
-  version "3.0.1"
-  resolved "https://registry.yarnpkg.com/uuid/-/uuid-3.0.1.tgz#6544bba2dfda8c1cf17e629a3a305e2bb1fee6c1"
+uuid@^3.0.1, uuid@^3.1.0, uuid@^3.3.2:
+  version "3.3.2"
+  resolved "https://registry.yarnpkg.com/uuid/-/uuid-3.3.2.tgz#1b4af4955eb3077c501c23872fc6513811587131"
+  integrity sha512-yXJmeNaw3DnnKAOKJE51sL/ZaYfWJRl1pK9dr19YFCu0ObS231AB1/LbqTKRAQ5kw8A90rA6fr4riOUpTZvQZA==
 
-uuid@^3.1.0:
-  version "3.2.1"
-  resolved "http://registry.npm.taobao.org/uuid/download/uuid-3.2.1.tgz#12c528bb9d58d0b9265d9a2f6f0fe8be17ff1f14"
+uuid@^3.3.3:
+  version "3.3.3"
+  resolved "https://registry.npm.taobao.org/uuid/download/uuid-3.3.3.tgz?cache=0&sync_timestamp=1566221202613&other_urls=https%3A%2F%2Fregistry.npm.taobao.org%2Fuuid%2Fdownload%2Fuuid-3.3.3.tgz#4568f0216e78760ee1dbf3a4d2cf53e224112866"
+  integrity sha1-RWjwIW54dg7h2/Ok0s9T4iQRKGY=
 
 uuid@~1.4.0:
   version "1.4.2"
   resolved "https://registry.yarnpkg.com/uuid/-/uuid-1.4.2.tgz#453019f686966a6df83cdc5244e7c990ecc332fc"
+  integrity sha1-RTAZ9oaWam34PNxSROfJkOzDMvw=
+
+v8-compile-cache@^2.0.2:
+  version "2.0.2"
+  resolved "https://registry.yarnpkg.com/v8-compile-cache/-/v8-compile-cache-2.0.2.tgz#a428b28bb26790734c4fc8bc9fa106fccebf6a6c"
+  integrity sha512-1wFuMUIM16MDJRCrpbpuEPTUGmM5QMUg0cr3KFwra2XgOgFcPGDQHDh3CszSCD2Zewc/dh/pamNEW8CbfDebUw==
 
-v8flags@^2.0.10, v8flags@^2.0.2:
-  version "2.0.11"
-  resolved "https://registry.yarnpkg.com/v8flags/-/v8flags-2.0.11.tgz#bca8f30f0d6d60612cc2c00641e6962d42ae6881"
+v8flags@^2.1.1:
+  version "2.1.1"
+  resolved "https://registry.yarnpkg.com/v8flags/-/v8flags-2.1.1.tgz#aab1a1fa30d45f88dd321148875ac02c0b55e5b4"
+  integrity sha1-qrGh+jDUX4jdMhFIh1rALAtV5bQ=
   dependencies:
     user-home "^1.1.1"
 
-validate-npm-package-license@^3.0.1:
-  version "3.0.1"
-  resolved "https://registry.yarnpkg.com/validate-npm-package-license/-/validate-npm-package-license-3.0.1.tgz#2804babe712ad3379459acfbe24746ab2c303fbc"
+v8flags@^3.0.1:
+  version "3.1.2"
+  resolved "https://registry.yarnpkg.com/v8flags/-/v8flags-3.1.2.tgz#fc5cd0c227428181e6c29b2992e4f8f1da5e0c9f"
+  integrity sha512-MtivA7GF24yMPte9Rp/BWGCYQNaUj86zeYxV/x2RRJMKagImbbv3u8iJC57lNhWLPcGLJmHcHmFWkNsplbbLWw==
   dependencies:
-    spdx-correct "~1.0.0"
-    spdx-expression-parse "~1.0.0"
+    homedir-polyfill "^1.0.1"
 
-vary@~1.1.0:
-  version "1.1.0"
-  resolved "https://registry.yarnpkg.com/vary/-/vary-1.1.0.tgz#e1e5affbbd16ae768dd2674394b9ad3022653140"
+valid-url@^1.0.9:
+  version "1.0.9"
+  resolved "https://registry.npm.taobao.org/valid-url/download/valid-url-1.0.9.tgz#1c14479b40f1397a75782f115e4086447433a200"
+  integrity sha1-HBRHm0DxOXp1eC8RXkCGRHQzogA=
+
+validate-npm-package-license@^3.0.1, validate-npm-package-license@^3.0.4:
+  version "3.0.4"
+  resolved "https://registry.yarnpkg.com/validate-npm-package-license/-/validate-npm-package-license-3.0.4.tgz#fc91f6b9c7ba15c857f4cb2c5defeec39d4f410a"
+  integrity sha512-DpKm2Ui/xN7/HQKCtpZxoRWBhZ9Z0kqtygG8XCgNQ8ZlDnxuQmWhj566j8fN4Cu3/JmbhsDo7fcAJq4s9h27Ew==
+  dependencies:
+    spdx-correct "^3.0.0"
+    spdx-expression-parse "^3.0.0"
+
+validate-npm-package-name@^3.0.0, validate-npm-package-name@~3.0.0:
+  version "3.0.0"
+  resolved "https://registry.npm.taobao.org/validate-npm-package-name/download/validate-npm-package-name-3.0.0.tgz#5fa912d81eb7d0c74afc140de7317f0ca7df437e"
+  integrity sha1-X6kS2B630MdK/BQN5zF/DKffQ34=
+  dependencies:
+    builtins "^1.0.3"
+
+value-or-function@^3.0.0:
+  version "3.0.0"
+  resolved "https://registry.yarnpkg.com/value-or-function/-/value-or-function-3.0.0.tgz#1c243a50b595c1be54a754bfece8563b9ff8d813"
+  integrity sha1-HCQ6ULWVwb5Up1S/7OhWO5/42BM=
+
+vary@~1.1.2:
+  version "1.1.2"
+  resolved "https://registry.yarnpkg.com/vary/-/vary-1.1.2.tgz#2299f02c6ded30d4a5961b0b9f74524a18f634fc"
+  integrity sha1-IpnwLG3tMNSllhsLn3RSShj2NPw=
 
 vendors@^1.0.0:
-  version "1.0.1"
-  resolved "https://registry.yarnpkg.com/vendors/-/vendors-1.0.1.tgz#37ad73c8ee417fb3d580e785312307d274847f22"
+  version "1.0.2"
+  resolved "https://registry.yarnpkg.com/vendors/-/vendors-1.0.2.tgz#7fcb5eef9f5623b156bcea89ec37d63676f21801"
+  integrity sha512-w/hry/368nO21AN9QljsaIhb9ZiZtZARoVH5f3CsFbawdLdayCgKRPup7CggujvySMxx0I91NOyxdVENohprLQ==
 
-verror@1.3.6:
-  version "1.3.6"
-  resolved "https://registry.yarnpkg.com/verror/-/verror-1.3.6.tgz#cff5df12946d297d2baaefaa2689e25be01c005c"
+verror@1.10.0:
+  version "1.10.0"
+  resolved "https://registry.yarnpkg.com/verror/-/verror-1.10.0.tgz#3a105ca17053af55d6e270c1f8288682e18da400"
+  integrity sha1-OhBcoXBTr1XW4nDB+CiGguGNpAA=
   dependencies:
-    extsprintf "1.0.2"
+    assert-plus "^1.0.0"
+    core-util-is "1.0.2"
+    extsprintf "^1.2.0"
+
+vinyl-fs@^3.0.0:
+  version "3.0.3"
+  resolved "https://registry.yarnpkg.com/vinyl-fs/-/vinyl-fs-3.0.3.tgz#c85849405f67428feabbbd5c5dbdd64f47d31bc7"
+  integrity sha512-vIu34EkyNyJxmP0jscNzWBSygh7VWhqun6RmqVfXePrOwi9lhvRs//dOaGOTRUQr4tx7/zd26Tk5WeSVZitgng==
+  dependencies:
+    fs-mkdirp-stream "^1.0.0"
+    glob-stream "^6.1.0"
+    graceful-fs "^4.0.0"
+    is-valid-glob "^1.0.0"
+    lazystream "^1.0.0"
+    lead "^1.0.0"
+    object.assign "^4.0.4"
+    pumpify "^1.3.5"
+    readable-stream "^2.3.3"
+    remove-bom-buffer "^3.0.0"
+    remove-bom-stream "^1.2.0"
+    resolve-options "^1.1.0"
+    through2 "^2.0.0"
+    to-through "^2.0.0"
+    value-or-function "^3.0.0"
+    vinyl "^2.0.0"
+    vinyl-sourcemap "^1.1.0"
 
-vinyl-fs@^0.3.0:
-  version "0.3.14"
-  resolved "https://registry.yarnpkg.com/vinyl-fs/-/vinyl-fs-0.3.14.tgz#9a6851ce1cac1c1cea5fe86c0931d620c2cfa9e6"
+vinyl-sourcemap@^1.1.0:
+  version "1.1.0"
+  resolved "https://registry.yarnpkg.com/vinyl-sourcemap/-/vinyl-sourcemap-1.1.0.tgz#92a800593a38703a8cdb11d8b300ad4be63b3e16"
+  integrity sha1-kqgAWTo4cDqM2xHYswCtS+Y7PhY=
   dependencies:
-    defaults "^1.0.0"
-    glob-stream "^3.1.5"
-    glob-watcher "^0.0.6"
-    graceful-fs "^3.0.0"
-    mkdirp "^0.5.0"
-    strip-bom "^1.0.0"
-    through2 "^0.6.1"
-    vinyl "^0.4.0"
+    append-buffer "^1.0.2"
+    convert-source-map "^1.5.0"
+    graceful-fs "^4.1.6"
+    normalize-path "^2.1.1"
+    now-and-later "^2.0.0"
+    remove-bom-buffer "^3.0.0"
+    vinyl "^2.0.0"
 
 vinyl-sourcemaps-apply@^0.2.0:
   version "0.2.1"
   resolved "https://registry.yarnpkg.com/vinyl-sourcemaps-apply/-/vinyl-sourcemaps-apply-0.2.1.tgz#ab6549d61d172c2b1b87be5c508d239c8ef87705"
+  integrity sha1-q2VJ1h0XLCsbh75cUI0jnI74dwU=
   dependencies:
     source-map "^0.5.1"
 
 vinyl@^0.2.1:
   version "0.2.3"
   resolved "https://registry.yarnpkg.com/vinyl/-/vinyl-0.2.3.tgz#bca938209582ec5a49ad538a00fa1f125e513252"
+  integrity sha1-vKk4IJWC7FpJrVOKAPofEl5RMlI=
   dependencies:
     clone-stats "~0.0.1"
 
-vinyl@^0.4.0:
-  version "0.4.6"
-  resolved "https://registry.yarnpkg.com/vinyl/-/vinyl-0.4.6.tgz#2f356c87a550a255461f36bbeb2a5ba8bf784847"
-  dependencies:
-    clone "^0.2.0"
-    clone-stats "^0.0.1"
-
-vinyl@^0.5.0:
-  version "0.5.3"
-  resolved "https://registry.yarnpkg.com/vinyl/-/vinyl-0.5.3.tgz#b0455b38fc5e0cf30d4325132e461970c2091cde"
+vinyl@^2.0.0:
+  version "2.2.0"
+  resolved "https://registry.yarnpkg.com/vinyl/-/vinyl-2.2.0.tgz#d85b07da96e458d25b2ffe19fece9f2caa13ed86"
+  integrity sha512-MBH+yP0kC/GQ5GwBqrTPTzEfiiLjta7hTtvQtbxBgTeSXsmKQRQecjibMbxIXzVT3Y9KJK+drOz1/k+vsu8Nkg==
   dependencies:
-    clone "^1.0.0"
-    clone-stats "^0.0.1"
-    replace-ext "0.0.1"
+    clone "^2.1.1"
+    clone-buffer "^1.0.0"
+    clone-stats "^1.0.0"
+    cloneable-readable "^1.0.0"
+    remove-trailing-separator "^1.0.1"
+    replace-ext "^1.0.0"
 
 vm-browserify@0.0.4:
   version "0.0.4"
   resolved "https://registry.yarnpkg.com/vm-browserify/-/vm-browserify-0.0.4.tgz#5d7ea45bbef9e4a6ff65f95438e0a87c357d5a73"
+  integrity sha1-XX6kW7755Kb/ZflUOOCofDV9WnM=
   dependencies:
     indexof "0.0.1"
 
 void-elements@^2.0.0:
   version "2.0.1"
   resolved "https://registry.yarnpkg.com/void-elements/-/void-elements-2.0.1.tgz#c066afb582bb1cb4128d60ea92392e94d5e9dbec"
+  integrity sha1-wGavtYK7HLQSjWDqkjkulNXp2+w=
 
-vue-hot-reload-api@^2.2.0:
-  version "2.2.0"
-  resolved "https://registry.yarnpkg.com/vue-hot-reload-api/-/vue-hot-reload-api-2.2.0.tgz#9a21b35ced3634434a43ee80efb7350ea8fb206d"
+vscode-json-languageservice@^3.2.1:
+  version "3.2.1"
+  resolved "https://registry.yarnpkg.com/vscode-json-languageservice/-/vscode-json-languageservice-3.2.1.tgz#991d51128ebd81c5525d0578cabfa5b03e3cba2a"
+  integrity sha512-ee9MJ70/xR55ywvm0bZsDLhA800HCRE27AYgMNTU14RSg20Y+ngHdQnUt6OmiTXrQDI/7sne6QUOtHIN0hPQYA==
+  dependencies:
+    jsonc-parser "^2.0.2"
+    vscode-languageserver-types "^3.13.0"
+    vscode-nls "^4.0.0"
+    vscode-uri "^1.0.6"
 
-vue-loader@^13.3.0:
-  version "13.3.0"
-  resolved "https://registry.yarnpkg.com/vue-loader/-/vue-loader-13.3.0.tgz#3bf837d490ba5dea6fc07e0835ffa6c688c8af33"
+vscode-languageserver-types@^3.13.0:
+  version "3.14.0"
+  resolved "https://registry.yarnpkg.com/vscode-languageserver-types/-/vscode-languageserver-types-3.14.0.tgz#d3b5952246d30e5241592b6dde8280e03942e743"
+  integrity sha512-lTmS6AlAlMHOvPQemVwo3CezxBp0sNB95KNPkqp3Nxd5VFEnuG1ByM0zlRWos0zjO3ZWtkvhal0COgiV1xIA4A==
+
+vscode-nls@^4.0.0:
+  version "4.0.0"
+  resolved "https://registry.yarnpkg.com/vscode-nls/-/vscode-nls-4.0.0.tgz#4001c8a6caba5cedb23a9c5ce1090395c0e44002"
+  integrity sha512-qCfdzcH+0LgQnBpZA53bA32kzp9rpq/f66Som577ObeuDlFIrtbEJ+A/+CCxjIh4G8dpJYNCKIsxpRAHIfsbNw==
+
+vscode-uri@^1.0.6:
+  version "1.0.6"
+  resolved "https://registry.yarnpkg.com/vscode-uri/-/vscode-uri-1.0.6.tgz#6b8f141b0bbc44ad7b07e94f82f168ac7608ad4d"
+  integrity sha512-sLI2L0uGov3wKVb9EB+vIQBl9tVP90nqRvxSoJ35vI3NjxE8jfsE5DSOhWgSunHSZmKS4OCi2jrtfxK7uyp2ww==
+
+vue-hot-reload-api@^2.3.0:
+  version "2.3.1"
+  resolved "https://registry.yarnpkg.com/vue-hot-reload-api/-/vue-hot-reload-api-2.3.1.tgz#b2d3d95402a811602380783ea4f566eb875569a2"
+  integrity sha512-AA86yKZ5uOKz87/q1UpngEXhbRkaYg1b7HMMVRobNV1IVKqZe8oLIzo6iMocVwZXnYitlGwf2k4ZRLOZlS8oPQ==
+
+vue-loader@^15.7.0:
+  version "15.7.0"
+  resolved "https://registry.yarnpkg.com/vue-loader/-/vue-loader-15.7.0.tgz#27275aa5a3ef4958c5379c006dd1436ad04b25b3"
+  integrity sha512-x+NZ4RIthQOxcFclEcs8sXGEWqnZHodL2J9Vq+hUz+TDZzBaDIh1j3d9M2IUlTjtrHTZy4uMuRdTi8BGws7jLA==
   dependencies:
-    consolidate "^0.14.0"
+    "@vue/component-compiler-utils" "^2.5.1"
     hash-sum "^1.0.2"
     loader-utils "^1.1.0"
-    lru-cache "^4.1.1"
-    postcss "^6.0.8"
-    postcss-load-config "^1.1.0"
-    postcss-selector-parser "^2.0.0"
-    prettier "^1.7.0"
-    resolve "^1.4.0"
-    source-map "^0.6.1"
-    vue-hot-reload-api "^2.2.0"
-    vue-style-loader "^3.0.0"
-    vue-template-es2015-compiler "^1.6.0"
-
-vue-markdown-loader@1:
-  version "1.0.0"
-  resolved "https://registry.yarnpkg.com/vue-markdown-loader/-/vue-markdown-loader-1.0.0.tgz#255a2608e388991faa354618e4f4b642ebb7e0db"
-  dependencies:
-    cheerio "^0.20.0"
-    highlight.js "^9.4.0"
-    loader-utils "^0.2.15"
-    markdown-it "^6.0.5"
+    vue-hot-reload-api "^2.3.0"
+    vue-style-loader "^4.1.0"
 
-vue-router@2.7.0:
-  version "2.7.0"
-  resolved "https://registry.yarnpkg.com/vue-router/-/vue-router-2.7.0.tgz#16d424493aa51c3c8cce8b7c7210ea4c3a89aff1"
+vue-router@^3.0.1:
+  version "3.0.2"
+  resolved "https://registry.yarnpkg.com/vue-router/-/vue-router-3.0.2.tgz#dedc67afe6c4e2bc25682c8b1c2a8c0d7c7e56be"
+  integrity sha512-opKtsxjp9eOcFWdp6xLQPLmRGgfM932Tl56U9chYTnoWqKxQ8M20N7AkdEbM5beUh6wICoFGYugAX9vQjyJLFg==
 
-vue-style-loader@^3.0.0:
-  version "3.0.1"
-  resolved "https://registry.yarnpkg.com/vue-style-loader/-/vue-style-loader-3.0.1.tgz#c8b639bb2f24baf9d78274dc17e4f264c1deda08"
+vue-style-loader@^4.1.0:
+  version "4.1.2"
+  resolved "https://registry.yarnpkg.com/vue-style-loader/-/vue-style-loader-4.1.2.tgz#dedf349806f25ceb4e64f3ad7c0a44fba735fcf8"
+  integrity sha512-0ip8ge6Gzz/Bk0iHovU9XAUQaFt/G2B61bnWa2tCcqqdgfHs1lF9xXorFbE55Gmy92okFT+8bfmySuUOu13vxQ==
   dependencies:
     hash-sum "^1.0.2"
     loader-utils "^1.0.2"
 
-vue-template-compiler@^2.5.2:
-  version "2.5.2"
-  resolved "https://registry.yarnpkg.com/vue-template-compiler/-/vue-template-compiler-2.5.2.tgz#6f198ebc677b8f804315cd33b91e849315ae7177"
+vue-template-compiler@2.5.21:
+  version "2.5.21"
+  resolved "https://registry.yarnpkg.com/vue-template-compiler/-/vue-template-compiler-2.5.21.tgz#a57ceb903177e8f643560a8d639a0f8db647054a"
+  integrity sha512-Vmk5Cv7UcmI99B9nXJEkaK262IQNnHp5rJYo+EwYpe2epTAXqcVyExhV6pk8jTkxQK2vRc8v8KmZBAwdmUZvvw==
   dependencies:
     de-indent "^1.0.2"
     he "^1.1.0"
 
 vue-template-es2015-compiler@^1.6.0:
-  version "1.6.0"
-  resolved "https://registry.yarnpkg.com/vue-template-es2015-compiler/-/vue-template-es2015-compiler-1.6.0.tgz#dc42697133302ce3017524356a6c61b7b69b4a18"
+  version "1.8.1"
+  resolved "https://registry.yarnpkg.com/vue-template-es2015-compiler/-/vue-template-es2015-compiler-1.8.1.tgz#e2ec4f42d16b6c712e61899c6b20bcdb1df128ca"
+  integrity sha512-mxBBMuSaPG9+NkVMbh28r8gvWQJ8UXxqDxVNeLy2KBUZiSNxZsagjYwLL8gjROb4oaaYtwRv3K8gAmw76I/U7Q==
 
-vue@^2.5.2:
-  version "2.5.2"
-  resolved "https://registry.yarnpkg.com/vue/-/vue-2.5.2.tgz#fd367a87bae7535e47f9dc5c9ec3b496e5feb5a4"
+vue-template-es2015-compiler@^1.9.0:
+  version "1.9.1"
+  resolved "https://registry.yarnpkg.com/vue-template-es2015-compiler/-/vue-template-es2015-compiler-1.9.1.tgz#1ee3bc9a16ecbf5118be334bb15f9c46f82f5825"
+  integrity sha512-4gDntzrifFnCEvyoO8PqyJDmguXgVPxKiIxrBKjIowvL9l+N66196+72XVYR8BBf1Uv1Fgt3bGevJ+sEmxfZzw==
 
-watchpack@^1.4.0:
-  version "1.4.0"
-  resolved "https://registry.yarnpkg.com/watchpack/-/watchpack-1.4.0.tgz#4a1472bcbb952bd0a9bb4036801f954dfb39faac"
+vue-virtual-scroll-list@^2.3.1:
+  version "2.3.1"
+  resolved "https://registry.npm.taobao.org/vue-virtual-scroll-list/download/vue-virtual-scroll-list-2.3.1.tgz#c2f3de022054626c13feb64f0d80154db9dbb22f"
+  integrity sha1-wvPeAiBUYmwT/rZPDYAVTbnbsi8=
+
+vue@2.5.21:
+  version "2.5.21"
+  resolved "https://registry.yarnpkg.com/vue/-/vue-2.5.21.tgz#3d33dcd03bb813912ce894a8303ab553699c4a85"
+  integrity sha512-Aejvyyfhn0zjVeLvXd70h4hrE4zZDx1wfZqia6ekkobLmUZ+vNFQer53B4fu0EjWBSiqApxPejzkO1Znt3joxQ==
+
+watchpack@^1.5.0:
+  version "1.6.0"
+  resolved "https://registry.yarnpkg.com/watchpack/-/watchpack-1.6.0.tgz#4bc12c2ebe8aa277a71f1d3f14d685c7b446cd00"
+  integrity sha512-i6dHe3EyLjMmDlU1/bGQpEw25XSjkJULPuAVKCbNRefQVq48yXKUpwg538F7AZTf9kyr57zj++pQFltUa5H7yA==
   dependencies:
-    async "^2.1.2"
-    chokidar "^1.7.0"
+    chokidar "^2.0.2"
     graceful-fs "^4.1.2"
+    neo-async "^2.5.0"
 
-wbuf@^1.1.0, wbuf@^1.7.2:
-  version "1.7.2"
-  resolved "https://registry.yarnpkg.com/wbuf/-/wbuf-1.7.2.tgz#d697b99f1f59512df2751be42769c1580b5801fe"
+wbuf@^1.1.0, wbuf@^1.7.3:
+  version "1.7.3"
+  resolved "https://registry.yarnpkg.com/wbuf/-/wbuf-1.7.3.tgz#c1d8d149316d3ea852848895cb6a0bfe887b87df"
+  integrity sha512-O84QOnr0icsbFGLS0O3bI5FswxzRr8/gHwWkDlQFskhSPryQXvrTMxjxGP4+iWYoauLoBvfDpkrOauZ+0iZpDA==
   dependencies:
     minimalistic-assert "^1.0.0"
 
-weak-map@1.0.0:
-  version "1.0.0"
-  resolved "https://registry.yarnpkg.com/weak-map/-/weak-map-1.0.0.tgz#b66e56a9df0bd25a76bbf1b514db129080614a37"
+wcwidth@^1.0.0:
+  version "1.0.1"
+  resolved "https://registry.npm.taobao.org/wcwidth/download/wcwidth-1.0.1.tgz#f0b0dcf915bc5ff1528afadb2c0e17b532da2fe8"
+  integrity sha1-8LDc+RW8X/FSivrbLA4XtTLaL+g=
+  dependencies:
+    defaults "^1.0.3"
 
-webidl-conversions@^2.0.0:
-  version "2.0.1"
-  resolved "https://registry.yarnpkg.com/webidl-conversions/-/webidl-conversions-2.0.1.tgz#3bf8258f7d318c7443c36f2e169402a1a6703506"
+webpack-chain@^4.9.0:
+  version "4.12.1"
+  resolved "https://registry.yarnpkg.com/webpack-chain/-/webpack-chain-4.12.1.tgz#6c8439bbb2ab550952d60e1ea9319141906c02a6"
+  integrity sha512-BCfKo2YkDe2ByqkEWe1Rw+zko4LsyS75LVr29C6xIrxAg9JHJ4pl8kaIZ396SUSNp6b4815dRZPSTAS8LlURRQ==
+  dependencies:
+    deepmerge "^1.5.2"
+    javascript-stringify "^1.6.0"
 
-webpack-dev-middleware@^1.11.0:
-  version "1.12.0"
-  resolved "https://registry.yarnpkg.com/webpack-dev-middleware/-/webpack-dev-middleware-1.12.0.tgz#d34efefb2edda7e1d3b5dbe07289513219651709"
+webpack-cli@^3.0.8:
+  version "3.2.1"
+  resolved "https://registry.yarnpkg.com/webpack-cli/-/webpack-cli-3.2.1.tgz#779c696c82482491f0803907508db2e276ed3b61"
+  integrity sha512-jeJveHwz/vwpJ3B8bxEL5a/rVKIpRNJDsKggfKnxuYeohNDW4Y/wB9N/XHJA093qZyS0r6mYL+/crLsIol4WKA==
+  dependencies:
+    chalk "^2.4.1"
+    cross-spawn "^6.0.5"
+    enhanced-resolve "^4.1.0"
+    findup-sync "^2.0.0"
+    global-modules "^1.0.0"
+    global-modules-path "^2.3.0"
+    import-local "^2.0.0"
+    interpret "^1.1.0"
+    lightercollective "^0.1.0"
+    loader-utils "^1.1.0"
+    supports-color "^5.5.0"
+    v8-compile-cache "^2.0.2"
+    yargs "^12.0.4"
+
+webpack-dev-middleware@3.4.0:
+  version "3.4.0"
+  resolved "https://registry.yarnpkg.com/webpack-dev-middleware/-/webpack-dev-middleware-3.4.0.tgz#1132fecc9026fd90f0ecedac5cbff75d1fb45890"
+  integrity sha512-Q9Iyc0X9dP9bAsYskAVJ/hmIZZQwf/3Sy4xCAZgL5cUkjZmUZLt4l5HpbST/Pdgjn3u6pE7u5OdGd1apgzRujA==
   dependencies:
     memory-fs "~0.4.1"
-    mime "^1.3.4"
-    path-is-absolute "^1.0.0"
+    mime "^2.3.1"
     range-parser "^1.0.3"
-    time-stamp "^2.0.0"
+    webpack-log "^2.0.0"
 
 webpack-dev-middleware@^2.0.6:
   version "2.0.6"
-  resolved "http://registry.npm.taobao.org/webpack-dev-middleware/download/webpack-dev-middleware-2.0.6.tgz#a51692801e8310844ef3e3790e1eacfe52326fd4"
+  resolved "https://registry.yarnpkg.com/webpack-dev-middleware/-/webpack-dev-middleware-2.0.6.tgz#a51692801e8310844ef3e3790e1eacfe52326fd4"
+  integrity sha512-tj5LLD9r4tDuRIDa5Mu9lnY2qBBehAITv6A9irqXhw/HQquZgTx3BCd57zYbU2gMDnncA49ufK2qVQSbaKJwOw==
   dependencies:
     loud-rejection "^1.6.0"
     memory-fs "~0.4.1"
@@ -7989,292 +12505,430 @@ webpack-dev-middleware@^2.0.6:
     url-join "^2.0.2"
     webpack-log "^1.0.1"
 
-webpack-dev-server@^2.9.1:
-  version "2.9.1"
-  resolved "https://registry.yarnpkg.com/webpack-dev-server/-/webpack-dev-server-2.9.1.tgz#7ac9320b61b00eb65b2109f15c82747fc5b93585"
+webpack-dev-server@^3.1.11:
+  version "3.1.14"
+  resolved "https://registry.yarnpkg.com/webpack-dev-server/-/webpack-dev-server-3.1.14.tgz#60fb229b997fc5a0a1fc6237421030180959d469"
+  integrity sha512-mGXDgz5SlTxcF3hUpfC8hrQ11yhAttuUQWf1Wmb+6zo3x6rb7b9mIfuQvAPLdfDRCGRGvakBWHdHOa0I9p/EVQ==
   dependencies:
     ansi-html "0.0.7"
-    array-includes "^3.0.3"
     bonjour "^3.5.0"
-    chokidar "^1.6.0"
+    chokidar "^2.0.0"
     compression "^1.5.2"
     connect-history-api-fallback "^1.3.0"
+    debug "^3.1.0"
     del "^3.0.0"
-    express "^4.13.3"
+    express "^4.16.2"
     html-entities "^1.2.0"
-    http-proxy-middleware "~0.17.4"
-    internal-ip "1.2.0"
+    http-proxy-middleware "~0.18.0"
+    import-local "^2.0.0"
+    internal-ip "^3.0.1"
     ip "^1.1.5"
+    killable "^1.0.0"
     loglevel "^1.4.1"
     opn "^5.1.0"
     portfinder "^1.0.9"
+    schema-utils "^1.0.0"
     selfsigned "^1.9.1"
+    semver "^5.6.0"
     serve-index "^1.7.2"
-    sockjs "0.3.18"
-    sockjs-client "1.1.4"
-    spdy "^3.4.1"
-    strip-ansi "^3.0.1"
-    supports-color "^4.2.1"
-    webpack-dev-middleware "^1.11.0"
-    yargs "^6.6.0"
+    sockjs "0.3.19"
+    sockjs-client "1.3.0"
+    spdy "^4.0.0"
+    strip-ansi "^3.0.0"
+    supports-color "^5.1.0"
+    url "^0.11.0"
+    webpack-dev-middleware "3.4.0"
+    webpack-log "^2.0.0"
+    yargs "12.0.2"
 
 webpack-log@^1.0.1:
   version "1.2.0"
-  resolved "http://registry.npm.taobao.org/webpack-log/download/webpack-log-1.2.0.tgz#a4b34cda6b22b518dbb0ab32e567962d5c72a43d"
+  resolved "https://registry.yarnpkg.com/webpack-log/-/webpack-log-1.2.0.tgz#a4b34cda6b22b518dbb0ab32e567962d5c72a43d"
+  integrity sha512-U9AnICnu50HXtiqiDxuli5gLB5PGBo7VvcHx36jRZHwK4vzOYLbImqT4lwWwoMHdQWwEKw736fCHEekokTEKHA==
   dependencies:
     chalk "^2.1.0"
     log-symbols "^2.1.0"
     loglevelnext "^1.0.1"
     uuid "^3.1.0"
 
-webpack-node-externals@^1.6.0:
-  version "1.6.0"
-  resolved "https://registry.yarnpkg.com/webpack-node-externals/-/webpack-node-externals-1.6.0.tgz#232c62ec6092b100635a3d29d83c1747128df9bd"
+webpack-log@^2.0.0:
+  version "2.0.0"
+  resolved "https://registry.yarnpkg.com/webpack-log/-/webpack-log-2.0.0.tgz#5b7928e0637593f119d32f6227c1e0ac31e1b47f"
+  integrity sha512-cX8G2vR/85UYG59FgkoMamwHUIkSSlV3bBMRsbxVXVUk2j6NleCKjQ/WE9eYg9WY4w25O9w8wKP4rzNZFmUcUg==
+  dependencies:
+    ansi-colors "^3.0.0"
+    uuid "^3.3.2"
 
-webpack-sources@^1.0.1:
-  version "1.0.1"
-  resolved "https://registry.yarnpkg.com/webpack-sources/-/webpack-sources-1.0.1.tgz#c7356436a4d13123be2e2426a05d1dad9cbe65cf"
+webpack-node-externals@^1.7.2:
+  version "1.7.2"
+  resolved "https://registry.yarnpkg.com/webpack-node-externals/-/webpack-node-externals-1.7.2.tgz#6e1ee79ac67c070402ba700ef033a9b8d52ac4e3"
+  integrity sha512-ajerHZ+BJKeCLviLUUmnyd5B4RavLF76uv3cs6KNuO8W+HuQaEs0y0L7o40NQxdPy5w0pcv8Ew7yPUAQG0UdCg==
+
+webpack-sources@^1.1.0, webpack-sources@^1.3.0:
+  version "1.3.0"
+  resolved "https://registry.yarnpkg.com/webpack-sources/-/webpack-sources-1.3.0.tgz#2a28dcb9f1f45fe960d8f1493252b5ee6530fa85"
+  integrity sha512-OiVgSrbGu7NEnEvQJJgdSFPl2qWKkWq5lHMhgiToIiN9w34EBnjYzSYs+VbL5KoYiLNtFFa7BZIKxRED3I32pA==
   dependencies:
     source-list-map "^2.0.0"
-    source-map "~0.5.3"
-
-webpack@^3.7.1:
-  version "3.7.1"
-  resolved "https://registry.yarnpkg.com/webpack/-/webpack-3.7.1.tgz#6046b5c415ff7df7a0dc54c5b6b86098e8b952da"
-  dependencies:
-    acorn "^5.0.0"
-    acorn-dynamic-import "^2.0.0"
-    ajv "^5.1.5"
-    ajv-keywords "^2.0.0"
-    async "^2.1.2"
-    enhanced-resolve "^3.4.0"
-    escope "^3.6.0"
-    interpret "^1.0.0"
-    json-loader "^0.5.4"
-    json5 "^0.5.1"
+    source-map "~0.6.1"
+
+webpack@^4.14.0:
+  version "4.29.0"
+  resolved "https://registry.yarnpkg.com/webpack/-/webpack-4.29.0.tgz#f2cfef83f7ae404ba889ff5d43efd285ca26e750"
+  integrity sha512-pxdGG0keDBtamE1mNvT5zyBdx+7wkh6mh7uzMOo/uRQ/fhsdj5FXkh/j5mapzs060forql1oXqXN9HJGju+y7w==
+  dependencies:
+    "@webassemblyjs/ast" "1.7.11"
+    "@webassemblyjs/helper-module-context" "1.7.11"
+    "@webassemblyjs/wasm-edit" "1.7.11"
+    "@webassemblyjs/wasm-parser" "1.7.11"
+    acorn "^6.0.5"
+    acorn-dynamic-import "^4.0.0"
+    ajv "^6.1.0"
+    ajv-keywords "^3.1.0"
+    chrome-trace-event "^1.0.0"
+    enhanced-resolve "^4.1.0"
+    eslint-scope "^4.0.0"
+    json-parse-better-errors "^1.0.2"
     loader-runner "^2.3.0"
     loader-utils "^1.1.0"
     memory-fs "~0.4.1"
+    micromatch "^3.1.8"
     mkdirp "~0.5.0"
+    neo-async "^2.5.0"
     node-libs-browser "^2.0.0"
-    source-map "^0.5.3"
-    supports-color "^4.2.1"
-    tapable "^0.2.7"
-    uglifyjs-webpack-plugin "^0.4.6"
-    watchpack "^1.4.0"
-    webpack-sources "^1.0.1"
-    yargs "^8.0.2"
+    schema-utils "^0.4.4"
+    tapable "^1.1.0"
+    terser-webpack-plugin "^1.1.0"
+    watchpack "^1.5.0"
+    webpack-sources "^1.3.0"
 
 websocket-driver@>=0.5.1:
-  version "0.6.5"
-  resolved "https://registry.yarnpkg.com/websocket-driver/-/websocket-driver-0.6.5.tgz#5cb2556ceb85f4373c6d8238aa691c8454e13a36"
+  version "0.7.0"
+  resolved "https://registry.yarnpkg.com/websocket-driver/-/websocket-driver-0.7.0.tgz#0caf9d2d755d93aee049d4bdd0d3fe2cca2a24eb"
+  integrity sha1-DK+dLXVdk67gSdS90NP+LMoqJOs=
   dependencies:
+    http-parser-js ">=0.4.0"
     websocket-extensions ">=0.1.1"
 
 websocket-extensions@>=0.1.1:
-  version "0.1.1"
-  resolved "https://registry.yarnpkg.com/websocket-extensions/-/websocket-extensions-0.1.1.tgz#76899499c184b6ef754377c2dbb0cd6cb55d29e7"
-
-whatwg-url-compat@~0.6.5:
-  version "0.6.5"
-  resolved "https://registry.yarnpkg.com/whatwg-url-compat/-/whatwg-url-compat-0.6.5.tgz#00898111af689bb097541cd5a45ca6c8798445bf"
-  dependencies:
-    tr46 "~0.0.1"
-
-whet.extend@~0.9.9:
-  version "0.9.9"
-  resolved "https://registry.yarnpkg.com/whet.extend/-/whet.extend-0.9.9.tgz#f877d5bf648c97e5aa542fadc16d6a259b9c11a1"
+  version "0.1.3"
+  resolved "https://registry.yarnpkg.com/websocket-extensions/-/websocket-extensions-0.1.3.tgz#5d2ff22977003ec687a4b87073dfbbac146ccf29"
+  integrity sha512-nqHUnMXmBzT0w570r2JpJxfiSD1IzoI+HGVdd3aZ0yNi3ngvQ4jv1dtHt5VGxfI2yj5yqImPhOK4vmIh2xMbGg==
 
 which-module@^1.0.0:
   version "1.0.0"
   resolved "https://registry.yarnpkg.com/which-module/-/which-module-1.0.0.tgz#bba63ca861948994ff307736089e3b96026c2a4f"
+  integrity sha1-u6Y8qGGUiZT/MHc2CJ47lgJsKk8=
 
 which-module@^2.0.0:
   version "2.0.0"
   resolved "https://registry.yarnpkg.com/which-module/-/which-module-2.0.0.tgz#d9ef07dce77b9902b8a3a8fa4b31c3e3f7e6e87a"
+  integrity sha1-2e8H3Od7mQK4o6j6SzHD4/fm6Ho=
 
-which@1, which@^1.0.9, which@^1.1.1, which@^1.2.1, which@^1.2.12:
-  version "1.2.12"
-  resolved "https://registry.yarnpkg.com/which/-/which-1.2.12.tgz#de67b5e450269f194909ef23ece4ebe416fa1192"
-  dependencies:
-    isexe "^1.1.1"
-
-which@^1.2.9:
-  version "1.3.0"
-  resolved "http://registry.npm.taobao.org/which/download/which-1.3.0.tgz#ff04bdfc010ee547d780bec38e1ac1c2777d253a"
+which@1, which@1.3.1, which@^1.1.1, which@^1.2.1, which@^1.2.14, which@^1.2.9, which@^1.3.0, which@^1.3.1:
+  version "1.3.1"
+  resolved "https://registry.yarnpkg.com/which/-/which-1.3.1.tgz#a45043d54f5805316da8d62f9f50918d3da70b0a"
+  integrity sha512-HxJdYWq1MTIQbJ3nw0cqssHoTNU267KlrDuGZ1WYlxDStUtKUhOaJmh112/TZmHxxUfuJqPXSOm7tDyas0OSIQ==
   dependencies:
     isexe "^2.0.0"
 
-wide-align@^1.1.0:
-  version "1.1.0"
-  resolved "https://registry.yarnpkg.com/wide-align/-/wide-align-1.1.0.tgz#40edde802a71fea1f070da3e62dcda2e7add96ad"
+wide-align@1.1.3, wide-align@^1.1.0:
+  version "1.1.3"
+  resolved "https://registry.yarnpkg.com/wide-align/-/wide-align-1.1.3.tgz#ae074e6bdc0c14a431e804e624549c633b000457"
+  integrity sha512-QGkOQc8XL6Bt5PwnsExKBPuMKBxnGxWWW3fU55Xt4feHozMUhdUMaBCk290qpm/wG5u/RSKzwdAC4i51YigihA==
   dependencies:
-    string-width "^1.0.1"
+    string-width "^1.0.2 || 2"
 
-window-size@0.1.0:
-  version "0.1.0"
-  resolved "https://registry.yarnpkg.com/window-size/-/window-size-0.1.0.tgz#5438cd2ea93b202efa3a19fe8887aee7c94f9c9d"
-
-window-size@^0.2.0:
-  version "0.2.0"
-  resolved "https://registry.yarnpkg.com/window-size/-/window-size-0.2.0.tgz#b4315bb4214a3d7058ebeee892e13fa24d98b075"
-
-wordwrap@0.0.2:
-  version "0.0.2"
-  resolved "https://registry.yarnpkg.com/wordwrap/-/wordwrap-0.0.2.tgz#b79669bb42ecb409f83d583cad52ca17eaa1643f"
+widest-line@^2.0.0:
+  version "2.0.1"
+  resolved "https://registry.npm.taobao.org/widest-line/download/widest-line-2.0.1.tgz#7438764730ec7ef4381ce4df82fb98a53142a3fc"
+  integrity sha1-dDh2RzDsfvQ4HOTfgvuYpTFCo/w=
+  dependencies:
+    string-width "^2.1.1"
 
 wordwrap@^1.0.0, wordwrap@~1.0.0:
   version "1.0.0"
-  resolved "http://registry.npm.taobao.org/wordwrap/download/wordwrap-1.0.0.tgz#27584810891456a4171c8d0226441ade90cbcaeb"
+  resolved "https://registry.yarnpkg.com/wordwrap/-/wordwrap-1.0.0.tgz#27584810891456a4171c8d0226441ade90cbcaeb"
+  integrity sha1-J1hIEIkUVqQXHI0CJkQa3pDLyus=
 
 wordwrap@~0.0.2:
   version "0.0.3"
   resolved "https://registry.yarnpkg.com/wordwrap/-/wordwrap-0.0.3.tgz#a3d5da6cd5c0bc0008d37234bbaf1bed63059107"
+  integrity sha1-o9XabNXAvAAI03I0u68b7WMFkQc=
+
+worker-farm@^1.5.2:
+  version "1.6.0"
+  resolved "https://registry.yarnpkg.com/worker-farm/-/worker-farm-1.6.0.tgz#aecc405976fab5a95526180846f0dba288f3a4a0"
+  integrity sha512-6w+3tHbM87WnSWnENBUvA2pxJPLhQUg5LKwUQHq3r+XPhIM+Gh2R5ycbwPCyuGbNg+lPgdcnQUhuC02kJCvffQ==
+  dependencies:
+    errno "~0.1.7"
+
+worker-farm@^1.6.0, worker-farm@^1.7.0:
+  version "1.7.0"
+  resolved "https://registry.npm.taobao.org/worker-farm/download/worker-farm-1.7.0.tgz#26a94c5391bbca926152002f69b84a4bf772e5a8"
+  integrity sha1-JqlMU5G7ypJhUgAvabhKS/dy5ag=
+  dependencies:
+    errno "~0.1.7"
 
 wrap-ansi@^2.0.0:
   version "2.1.0"
   resolved "https://registry.yarnpkg.com/wrap-ansi/-/wrap-ansi-2.1.0.tgz#d8fc3d284dd05794fe84973caecdd1cf824fdd85"
+  integrity sha1-2Pw9KE3QV5T+hJc8rs3Rz4JP3YU=
   dependencies:
     string-width "^1.0.1"
     strip-ansi "^3.0.1"
 
+wrap-ansi@^5.1.0:
+  version "5.1.0"
+  resolved "https://registry.npmjs.org/wrap-ansi/-/wrap-ansi-5.1.0.tgz#1fd1f67235d5b6d0fee781056001bfb694c03b09"
+  integrity sha512-QC1/iN/2/RPVJ5jYK8BGttj5z83LmSKmvbvrXPNCLZSEb32KKVDJDl/MOt2N01qU2H/FkzEa9PKto1BqDjtd7Q==
+  dependencies:
+    ansi-styles "^3.2.0"
+    string-width "^3.0.0"
+    strip-ansi "^5.0.0"
+
 wrappy@1:
   version "1.0.2"
-  resolved "http://registry.npm.taobao.org/wrappy/download/wrappy-1.0.2.tgz#b5243d8f3ec1aa35f1364605bc0d1036e30ab69f"
+  resolved "https://registry.yarnpkg.com/wrappy/-/wrappy-1.0.2.tgz#b5243d8f3ec1aa35f1364605bc0d1036e30ab69f"
+  integrity sha1-tSQ9jz7BqjXxNkYFvA0QNuMKtp8=
 
-wrench@1.5.8:
-  version "1.5.8"
-  resolved "https://registry.yarnpkg.com/wrench/-/wrench-1.5.8.tgz#7a31c97f7869246d76c5cf2f5c977a1c4c8e5ab5"
+write-file-atomic@^2.0.0, write-file-atomic@^2.3.0, write-file-atomic@^2.4.3:
+  version "2.4.3"
+  resolved "https://registry.npm.taobao.org/write-file-atomic/download/write-file-atomic-2.4.3.tgz#1fd2e9ae1df3e75b8d8c367443c692d4ca81f481"
+  integrity sha1-H9Lprh3z51uNjDZ0Q8aS1MqB9IE=
+  dependencies:
+    graceful-fs "^4.1.11"
+    imurmurhash "^0.1.4"
+    signal-exit "^3.0.2"
 
 write@^0.2.1:
   version "0.2.1"
-  resolved "http://registry.npm.taobao.org/write/download/write-0.2.1.tgz#5fc03828e264cea3fe91455476f7a3c566cb0757"
+  resolved "https://registry.yarnpkg.com/write/-/write-0.2.1.tgz#5fc03828e264cea3fe91455476f7a3c566cb0757"
+  integrity sha1-X8A4KOJkzqP+kUVUdvejxWbLB1c=
   dependencies:
     mkdirp "^0.5.1"
 
-ws@1.0.1:
-  version "1.0.1"
-  resolved "https://registry.yarnpkg.com/ws/-/ws-1.0.1.tgz#7d0b2a2e58cddd819039c29c9de65045e1b310e9"
+ws@~3.3.1:
+  version "3.3.3"
+  resolved "https://registry.npmjs.org/ws/-/ws-3.3.3.tgz#f1cf84fe2d5e901ebce94efaece785f187a228f2"
+  integrity sha512-nnWLa/NwZSt4KQJu51MYlCcSQ5g7INpOrOMt4XV8j4dqTXdmlUmSHQ8/oLC069ckre0fRsgfvsKwbTdtKLCDkA==
   dependencies:
-    options ">=0.0.5"
-    ultron "1.0.x"
-
-xml-char-classes@^1.0.0:
-  version "1.0.0"
-  resolved "https://registry.yarnpkg.com/xml-char-classes/-/xml-char-classes-1.0.0.tgz#64657848a20ffc5df583a42ad8a277b4512bbc4d"
+    async-limiter "~1.0.0"
+    safe-buffer "~5.1.0"
+    ultron "~1.1.0"
 
-"xml-name-validator@>= 2.0.1 < 3.0.0":
-  version "2.0.1"
-  resolved "https://registry.yarnpkg.com/xml-name-validator/-/xml-name-validator-2.0.1.tgz#4d8b8f1eccd3419aa362061becef515e1e559635"
+xdg-basedir@^3.0.0:
+  version "3.0.0"
+  resolved "https://registry.npm.taobao.org/xdg-basedir/download/xdg-basedir-3.0.0.tgz#496b2cc109eca8dbacfe2dc72b603c17c5870ad4"
+  integrity sha1-SWsswQnsqNus/i3HK2A8F8WHCtQ=
 
-xmldom@^0.1.19:
-  version "0.1.27"
-  resolved "https://registry.yarnpkg.com/xmldom/-/xmldom-0.1.27.tgz#d501f97b3bdb403af8ef9ecc20573187aadac0e9"
+xmlhttprequest-ssl@~1.5.4:
+  version "1.5.5"
+  resolved "https://registry.npmjs.org/xmlhttprequest-ssl/-/xmlhttprequest-ssl-1.5.5.tgz#c2876b06168aadc40e57d97e81191ac8f4398b3e"
+  integrity sha1-wodrBhaKrcQOV9l+gRkayPQ5iz4=
 
-xmlhttprequest-ssl@1.5.1:
-  version "1.5.1"
-  resolved "https://registry.yarnpkg.com/xmlhttprequest-ssl/-/xmlhttprequest-ssl-1.5.1.tgz#3b7741fea4a86675976e908d296d4445961faa67"
+xregexp@4.0.0:
+  version "4.0.0"
+  resolved "https://registry.yarnpkg.com/xregexp/-/xregexp-4.0.0.tgz#e698189de49dd2a18cc5687b05e17c8e43943020"
+  integrity sha512-PHyM+sQouu7xspQQwELlGwwd05mXUFqwFYfqPO0cC7x4fxyHnnuetmQr6CjJiafIDoH4MogHb9dOoJzR/Y4rFg==
 
-"xtend@>=4.0.0 <4.1.0-0", xtend@^4.0.0, xtend@~4.0.1:
+xtend@^4.0.0, xtend@~4.0.0, xtend@~4.0.1:
   version "4.0.1"
   resolved "https://registry.yarnpkg.com/xtend/-/xtend-4.0.1.tgz#a5c6d532be656e23db820efb943a1f04998d63af"
+  integrity sha1-pcbVMr5lbiPbgg77lDofBJmNY68=
 
 xtend@~3.0.0:
   version "3.0.0"
   resolved "https://registry.yarnpkg.com/xtend/-/xtend-3.0.0.tgz#5cce7407baf642cba7becda568111c493f59665a"
+  integrity sha1-XM50B7r2Qsunvs2laBEcST9ZZlo=
 
 y18n@^3.2.1:
   version "3.2.1"
   resolved "https://registry.yarnpkg.com/y18n/-/y18n-3.2.1.tgz#6d15fba884c08679c0d77e88e7759e811e07fa41"
+  integrity sha1-bRX7qITAhnnA136I53WegR4H+kE=
+
+"y18n@^3.2.1 || ^4.0.0", y18n@^4.0.0:
+  version "4.0.0"
+  resolved "https://registry.yarnpkg.com/y18n/-/y18n-4.0.0.tgz#95ef94f85ecc81d007c264e190a120f0a3c8566b"
+  integrity sha512-r9S/ZyXu/Xu9q1tYlpsLIsa3EeLXXk0VwlxqTcFRfg9EhMW+17kbt9G0NrgCmhGb5vT2hyhJZLfDGx+7+5Uj/w==
 
 yallist@^2.1.2:
   version "2.1.2"
-  resolved "http://registry.npm.taobao.org/yallist/download/yallist-2.1.2.tgz#1c11f9218f076089a47dd512f93c6699a6a81d52"
+  resolved "https://registry.yarnpkg.com/yallist/-/yallist-2.1.2.tgz#1c11f9218f076089a47dd512f93c6699a6a81d52"
+  integrity sha1-HBH5IY8HYImkfdUS+TxmmaaoHVI=
 
-yargs-parser@^2.4.1:
-  version "2.4.1"
-  resolved "https://registry.yarnpkg.com/yargs-parser/-/yargs-parser-2.4.1.tgz#85568de3cf150ff49fa51825f03a8c880ddcc5c4"
+yallist@^3.0.0, yallist@^3.0.2:
+  version "3.0.3"
+  resolved "https://registry.yarnpkg.com/yallist/-/yallist-3.0.3.tgz#b4b049e314be545e3ce802236d6cd22cd91c3de9"
+  integrity sha512-S+Zk8DEWE6oKpV+vI3qWkaK+jSbIK86pCwe2IF/xwIpQ8jEuxpw9NyaGjmp9+BoJv5FV2piqCDcoCtStppiq2A==
+
+yallist@^3.0.3:
+  version "3.1.1"
+  resolved "https://registry.npm.taobao.org/yallist/download/yallist-3.1.1.tgz#dbb7daf9bfd8bac9ab45ebf602b8cbad0d5d08fd"
+  integrity sha1-27fa+b/YusmrRev2ArjLrQ1dCP0=
+
+yargs-parser@11.1.1, yargs-parser@^11.1.1:
+  version "11.1.1"
+  resolved "https://registry.yarnpkg.com/yargs-parser/-/yargs-parser-11.1.1.tgz#879a0865973bca9f6bab5cbdf3b1c67ec7d3bcf4"
+  integrity sha512-C6kB/WJDiaxONLJQnF8ccx9SEeoTTLek8RVbaOIsrAUS8VrBEXfmeSnCZxygc+XC2sNMBIwOOnfcxiynjHsVSQ==
   dependencies:
-    camelcase "^3.0.0"
-    lodash.assign "^4.0.6"
+    camelcase "^5.0.0"
+    decamelize "^1.2.0"
 
-yargs-parser@^4.2.0:
-  version "4.2.0"
-  resolved "https://registry.yarnpkg.com/yargs-parser/-/yargs-parser-4.2.0.tgz#6ced869cd05a3dca6a1eaee38b68aeed4b0b4101"
+yargs-parser@^10.0.0, yargs-parser@^10.1.0:
+  version "10.1.0"
+  resolved "https://registry.yarnpkg.com/yargs-parser/-/yargs-parser-10.1.0.tgz#7202265b89f7e9e9f2e5765e0fe735a905edbaa8"
+  integrity sha512-VCIyR1wJoEBZUqk5PA+oOBF6ypbwh5aNB3I50guxAL/quggdfs4TtNHQrSazFA3fYZ+tEqfs0zIGlv0c/rgjbQ==
   dependencies:
-    camelcase "^3.0.0"
+    camelcase "^4.1.0"
+
+yargs-parser@^13.1.1:
+  version "13.1.1"
+  resolved "https://registry.npmjs.org/yargs-parser/-/yargs-parser-13.1.1.tgz#d26058532aa06d365fe091f6a1fc06b2f7e5eca0"
+  integrity sha512-oVAVsHz6uFrg3XQheFII8ESO2ssAf9luWuAd6Wexsu4F3OtIW0o8IribPXYrD4WC24LWtPrJlGy87y5udK+dxQ==
+  dependencies:
+    camelcase "^5.0.0"
+    decamelize "^1.2.0"
+
+yargs-parser@^13.1.2:
+  version "13.1.2"
+  resolved "https://registry.npm.taobao.org/yargs-parser/download/yargs-parser-13.1.2.tgz?cache=0&sync_timestamp=1596945681098&other_urls=https%3A%2F%2Fregistry.npm.taobao.org%2Fyargs-parser%2Fdownload%2Fyargs-parser-13.1.2.tgz#130f09702ebaeef2650d54ce6e3e5706f7a4fb38"
+  integrity sha1-Ew8JcC667vJlDVTObj5XBvek+zg=
+  dependencies:
+    camelcase "^5.0.0"
+    decamelize "^1.2.0"
 
 yargs-parser@^5.0.0:
   version "5.0.0"
   resolved "https://registry.yarnpkg.com/yargs-parser/-/yargs-parser-5.0.0.tgz#275ecf0d7ffe05c77e64e7c86e4cd94bf0e1228a"
+  integrity sha1-J17PDX/+Bcd+ZOfIbkzZS/DhIoo=
   dependencies:
     camelcase "^3.0.0"
 
-yargs-parser@^7.0.0:
-  version "7.0.0"
-  resolved "https://registry.yarnpkg.com/yargs-parser/-/yargs-parser-7.0.0.tgz#8d0ac42f16ea55debd332caf4c4038b3e3f5dfd9"
+yargs-parser@^9.0.2:
+  version "9.0.2"
+  resolved "https://registry.yarnpkg.com/yargs-parser/-/yargs-parser-9.0.2.tgz#9ccf6a43460fe4ed40a9bb68f48d43b8a68cc077"
+  integrity sha1-nM9qQ0YP5O1Aqbto9I1DuKaMwHc=
   dependencies:
     camelcase "^4.1.0"
 
-yargs@^4.6.0:
-  version "4.8.1"
-  resolved "https://registry.yarnpkg.com/yargs/-/yargs-4.8.1.tgz#c0c42924ca4aaa6b0e6da1739dfb216439f9ddc0"
+yargs-unparser@1.5.0:
+  version "1.5.0"
+  resolved "https://registry.npmjs.org/yargs-unparser/-/yargs-unparser-1.5.0.tgz#f2bb2a7e83cbc87bb95c8e572828a06c9add6e0d"
+  integrity sha512-HK25qidFTCVuj/D1VfNiEndpLIeJN78aqgR23nL3y4N0U/91cOAzqfHlF8n2BvoNDcZmJKin3ddNSvOxSr8flw==
   dependencies:
-    cliui "^3.2.0"
+    flat "^4.1.0"
+    lodash "^4.17.11"
+    yargs "^12.0.5"
+
+yargs@11.0.0:
+  version "11.0.0"
+  resolved "https://registry.yarnpkg.com/yargs/-/yargs-11.0.0.tgz#c052931006c5eee74610e5fc0354bedfd08a201b"
+  integrity sha512-Rjp+lMYQOWtgqojx1dEWorjCofi1YN7AoFvYV7b1gx/7dAAeuI4kN5SZiEvr0ZmsZTOpDRcCqrpI10L31tFkBw==
+  dependencies:
+    cliui "^4.0.0"
     decamelize "^1.1.1"
+    find-up "^2.1.0"
     get-caller-file "^1.0.1"
-    lodash.assign "^4.0.3"
-    os-locale "^1.4.0"
-    read-pkg-up "^1.0.1"
+    os-locale "^2.0.0"
     require-directory "^2.1.1"
     require-main-filename "^1.0.1"
     set-blocking "^2.0.0"
-    string-width "^1.0.1"
-    which-module "^1.0.0"
-    window-size "^0.2.0"
+    string-width "^2.0.0"
+    which-module "^2.0.0"
     y18n "^3.2.1"
-    yargs-parser "^2.4.1"
+    yargs-parser "^9.0.2"
 
-yargs@^6.4.0:
-  version "6.5.0"
-  resolved "https://registry.yarnpkg.com/yargs/-/yargs-6.5.0.tgz#a902e23a1f0fe912b2a03f6131b7ed740c9718ff"
+yargs@12.0.2:
+  version "12.0.2"
+  resolved "https://registry.yarnpkg.com/yargs/-/yargs-12.0.2.tgz#fe58234369392af33ecbef53819171eff0f5aadc"
+  integrity sha512-e7SkEx6N6SIZ5c5H22RTZae61qtn3PYUE8JYbBFlK9sYmh3DMQ6E5ygtaG/2BW0JZi4WGgTR2IV5ChqlqrDGVQ==
   dependencies:
-    camelcase "^3.0.0"
-    cliui "^3.2.0"
-    decamelize "^1.1.1"
+    cliui "^4.0.0"
+    decamelize "^2.0.0"
+    find-up "^3.0.0"
     get-caller-file "^1.0.1"
-    os-locale "^1.4.0"
-    read-pkg-up "^1.0.1"
+    os-locale "^3.0.0"
     require-directory "^2.1.1"
     require-main-filename "^1.0.1"
     set-blocking "^2.0.0"
-    string-width "^1.0.2"
-    which-module "^1.0.0"
-    window-size "^0.2.0"
-    y18n "^3.2.1"
-    yargs-parser "^4.2.0"
+    string-width "^2.0.0"
+    which-module "^2.0.0"
+    y18n "^3.2.1 || ^4.0.0"
+    yargs-parser "^10.1.0"
 
-yargs@^6.6.0:
-  version "6.6.0"
-  resolved "https://registry.yarnpkg.com/yargs/-/yargs-6.6.0.tgz#782ec21ef403345f830a808ca3d513af56065208"
+yargs@12.0.5, yargs@^12.0.1, yargs@^12.0.4, yargs@^12.0.5:
+  version "12.0.5"
+  resolved "https://registry.yarnpkg.com/yargs/-/yargs-12.0.5.tgz#05f5997b609647b64f66b81e3b4b10a368e7ad13"
+  integrity sha512-Lhz8TLaYnxq/2ObqHDql8dX8CJi97oHxrjUcYtzKbbykPtVW9WB+poxI+NM2UIzsMgNCZTIf0AQwsjK5yMAqZw==
   dependencies:
-    camelcase "^3.0.0"
-    cliui "^3.2.0"
+    cliui "^4.0.0"
+    decamelize "^1.2.0"
+    find-up "^3.0.0"
+    get-caller-file "^1.0.1"
+    os-locale "^3.0.0"
+    require-directory "^2.1.1"
+    require-main-filename "^1.0.1"
+    set-blocking "^2.0.0"
+    string-width "^2.0.0"
+    which-module "^2.0.0"
+    y18n "^3.2.1 || ^4.0.0"
+    yargs-parser "^11.1.1"
+
+yargs@13.3.0:
+  version "13.3.0"
+  resolved "https://registry.npmjs.org/yargs/-/yargs-13.3.0.tgz#4c657a55e07e5f2cf947f8a366567c04a0dedc83"
+  integrity sha512-2eehun/8ALW8TLoIl7MVaRUrg+yCnenu8B4kBlRxj3GJGDKU1Og7sMXPNm1BYyM1DOJmTZ4YeN/Nwxv+8XJsUA==
+  dependencies:
+    cliui "^5.0.0"
+    find-up "^3.0.0"
+    get-caller-file "^2.0.1"
+    require-directory "^2.1.1"
+    require-main-filename "^2.0.0"
+    set-blocking "^2.0.0"
+    string-width "^3.0.0"
+    which-module "^2.0.0"
+    y18n "^4.0.0"
+    yargs-parser "^13.1.1"
+
+yargs@^11.0.0:
+  version "11.1.1"
+  resolved "https://registry.npm.taobao.org/yargs/download/yargs-11.1.1.tgz#5052efe3446a4df5ed669c995886cc0f13702766"
+  integrity sha1-UFLv40RqTfXtZpyZWIbMDxNwJ2Y=
+  dependencies:
+    cliui "^4.0.0"
     decamelize "^1.1.1"
+    find-up "^2.1.0"
     get-caller-file "^1.0.1"
-    os-locale "^1.4.0"
-    read-pkg-up "^1.0.1"
+    os-locale "^3.1.0"
     require-directory "^2.1.1"
     require-main-filename "^1.0.1"
     set-blocking "^2.0.0"
-    string-width "^1.0.2"
-    which-module "^1.0.0"
+    string-width "^2.0.0"
+    which-module "^2.0.0"
     y18n "^3.2.1"
-    yargs-parser "^4.2.0"
+    yargs-parser "^9.0.2"
+
+yargs@^13.3.2:
+  version "13.3.2"
+  resolved "https://registry.npm.taobao.org/yargs/download/yargs-13.3.2.tgz?cache=0&sync_timestamp=1594421142336&other_urls=https%3A%2F%2Fregistry.npm.taobao.org%2Fyargs%2Fdownload%2Fyargs-13.3.2.tgz#ad7ffefec1aa59565ac915f82dccb38a9c31a2dd"
+  integrity sha1-rX/+/sGqWVZayRX4Lcyzipwxot0=
+  dependencies:
+    cliui "^5.0.0"
+    find-up "^3.0.0"
+    get-caller-file "^2.0.1"
+    require-directory "^2.1.1"
+    require-main-filename "^2.0.0"
+    set-blocking "^2.0.0"
+    string-width "^3.0.0"
+    which-module "^2.0.0"
+    y18n "^4.0.0"
+    yargs-parser "^13.1.2"
 
-yargs@^7.0.0:
+yargs@^7.1.0:
   version "7.1.0"
   resolved "https://registry.yarnpkg.com/yargs/-/yargs-7.1.0.tgz#6ba318eb16961727f5d284f8ea003e8d6154d0c8"
+  integrity sha1-a6MY6xaWFyf10oT46gA+jWFU0Mg=
   dependencies:
     camelcase "^3.0.0"
     cliui "^3.2.0"
@@ -8290,33 +12944,7 @@ yargs@^7.0.0:
     y18n "^3.2.1"
     yargs-parser "^5.0.0"
 
-yargs@^8.0.2:
-  version "8.0.2"
-  resolved "https://registry.yarnpkg.com/yargs/-/yargs-8.0.2.tgz#6299a9055b1cefc969ff7e79c1d918dceb22c360"
-  dependencies:
-    camelcase "^4.1.0"
-    cliui "^3.2.0"
-    decamelize "^1.1.1"
-    get-caller-file "^1.0.1"
-    os-locale "^2.0.0"
-    read-pkg-up "^2.0.0"
-    require-directory "^2.1.1"
-    require-main-filename "^1.0.1"
-    set-blocking "^2.0.0"
-    string-width "^2.0.0"
-    which-module "^2.0.0"
-    y18n "^3.2.1"
-    yargs-parser "^7.0.0"
-
-yargs@~3.10.0:
-  version "3.10.0"
-  resolved "https://registry.yarnpkg.com/yargs/-/yargs-3.10.0.tgz#f7ee7bd857dd7c1d2d38c0e74efbd681d1431fd1"
-  dependencies:
-    camelcase "^1.0.2"
-    cliui "^2.1.0"
-    decamelize "^1.0.0"
-    window-size "0.1.0"
-
 yeast@0.1.2:
   version "0.1.2"
   resolved "https://registry.yarnpkg.com/yeast/-/yeast-0.1.2.tgz#008e06d8094320c372dbc2f8ed76a0ca6c8ac419"
+  integrity sha1-AI4G2AlDIMNy28L47XagymyKxBk=