From 7122ddb9e53d440b824a8d1dee12ec57e64d3d5d Mon Sep 17 00:00:00 2001
From: Hanx <xuanxinhan@vip.qq.com>
Date: Fri, 10 Apr 2020 16:17:10 +0800
Subject: [PATCH 01/94] Transfer: fix incorrect line-height of el-transfer's
 first list item when it was used with  el-form-item (#18917)

---
 packages/theme-chalk/src/transfer.scss | 3 +--
 1 file changed, 1 insertion(+), 2 deletions(-)

diff --git a/packages/theme-chalk/src/transfer.scss b/packages/theme-chalk/src/transfer.scss
index 7334cdf6c..fea7d7bad 100644
--- a/packages/theme-chalk/src/transfer.scss
+++ b/packages/theme-chalk/src/transfer.scss
@@ -96,11 +96,10 @@
     height: $--transfer-item-height;
     line-height: $--transfer-item-height;
     padding-left: 15px;
-    display: block;
+    display: block !important;
 
     & + .el-transfer-panel__item {
       margin-left: 0;
-      display: block!important;
     }
 
     &.el-checkbox {

From 091f63ad78cbe1f3ba35e36b767c78aab4bc3e1b Mon Sep 17 00:00:00 2001
From: ashuser-pendo <ashuser@Pendo.io>
Date: Fri, 10 Apr 2020 04:29:50 -0400
Subject: [PATCH 02/94] [Input Number] Correctly compute inputNumberDisabled
 (#18439)

---
 packages/input-number/src/input-number.vue | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/packages/input-number/src/input-number.vue b/packages/input-number/src/input-number.vue
index 1d2294ca7..71aebd7a4 100644
--- a/packages/input-number/src/input-number.vue
+++ b/packages/input-number/src/input-number.vue
@@ -168,7 +168,7 @@
         return this.size || this._elFormItemSize || (this.$ELEMENT || {}).size;
       },
       inputNumberDisabled() {
-        return this.disabled || (this.elForm || {}).disabled;
+        return this.disabled || !!(this.elForm || {}).disabled;
       },
       displayValue() {
         if (this.userInput !== null) {

From 590d7b8356b3cf5c95e3b1c498009ba6aca60b54 Mon Sep 17 00:00:00 2001
From: iamkun <kunhello@outlook.com>
Date: Fri, 10 Apr 2020 16:32:59 +0800
Subject: [PATCH 03/94] doc: Popconfirm doc update (#18324)

---
 examples/docs/en-US/popconfirm.md | 6 ++++++
 examples/docs/es/popconfirm.md    | 6 ++++++
 examples/docs/fr-FR/popconfirm.md | 6 ++++++
 examples/docs/zh-CN/popconfirm.md | 6 ++++++
 4 files changed, 24 insertions(+)

diff --git a/examples/docs/en-US/popconfirm.md b/examples/docs/en-US/popconfirm.md
index 72033bfc0..199627e22 100644
--- a/examples/docs/en-US/popconfirm.md
+++ b/examples/docs/en-US/popconfirm.md
@@ -52,3 +52,9 @@ You can customise Popconfirm like:
 | Name | Description |
 |--- | ---|
 | reference | HTML element that triggers Popconfirm |
+
+### Events
+| Event Name | Description | Parameters |
+|---------|--------|---------|
+| onConfirm | triggers when click confirm button | — |
+| onCancel | triggers when click cancel button | — |
\ No newline at end of file
diff --git a/examples/docs/es/popconfirm.md b/examples/docs/es/popconfirm.md
index 72033bfc0..199627e22 100644
--- a/examples/docs/es/popconfirm.md
+++ b/examples/docs/es/popconfirm.md
@@ -52,3 +52,9 @@ You can customise Popconfirm like:
 | Name | Description |
 |--- | ---|
 | reference | HTML element that triggers Popconfirm |
+
+### Events
+| Event Name | Description | Parameters |
+|---------|--------|---------|
+| onConfirm | triggers when click confirm button | — |
+| onCancel | triggers when click cancel button | — |
\ No newline at end of file
diff --git a/examples/docs/fr-FR/popconfirm.md b/examples/docs/fr-FR/popconfirm.md
index 72033bfc0..199627e22 100644
--- a/examples/docs/fr-FR/popconfirm.md
+++ b/examples/docs/fr-FR/popconfirm.md
@@ -52,3 +52,9 @@ You can customise Popconfirm like:
 | Name | Description |
 |--- | ---|
 | reference | HTML element that triggers Popconfirm |
+
+### Events
+| Event Name | Description | Parameters |
+|---------|--------|---------|
+| onConfirm | triggers when click confirm button | — |
+| onCancel | triggers when click cancel button | — |
\ No newline at end of file
diff --git a/examples/docs/zh-CN/popconfirm.md b/examples/docs/zh-CN/popconfirm.md
index e3eb86e1c..852a1faf5 100644
--- a/examples/docs/zh-CN/popconfirm.md
+++ b/examples/docs/zh-CN/popconfirm.md
@@ -52,3 +52,9 @@ Popconfirm 的属性与 Popover 很类似，因此对于重复属性，请参考
 | 参数 | 说明 |
 |--- | ---|
 | reference | 触发 Popconfirm 显示的 HTML 元素 |
+
+### Events
+| 事件名称 | 说明 | 回调参数 |
+|---------|--------|---------|
+| onConfirm | 点击确认按钮时触发 | — |
+| onCancel | 点击取消按钮时触发 | — |
\ No newline at end of file

From b903a87ce94d0496671e3c7f513d8faa8f70c736 Mon Sep 17 00:00:00 2001
From: IceFox <zengxinhai007@gmail.com>
Date: Fri, 10 Apr 2020 16:34:45 +0800
Subject: [PATCH 04/94] Carousel: fix console typo bug (#18264)

---
 packages/carousel/src/item.vue | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/packages/carousel/src/item.vue b/packages/carousel/src/item.vue
index 907574e96..0474bc469 100644
--- a/packages/carousel/src/item.vue
+++ b/packages/carousel/src/item.vue
@@ -88,7 +88,7 @@
         }
         if (parentType === 'card') {
           if (parentDirection === 'vertical') {
-            console.warn('[Element Warn][Carousel]vertical directionis not supported in card mode');
+            console.warn('[Element Warn][Carousel]vertical direction is not supported in card mode');
           }
           this.inStage = Math.round(Math.abs(index - activeIndex)) <= 1;
           this.active = index === activeIndex;

From 73de4b655df77af2a2c0c78c25a1af1c666eef69 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E5=BC=A0=E8=B6=85=E6=9D=B0?= <1098626505@qq.com>
Date: Fri, 10 Apr 2020 16:39:34 +0800
Subject: [PATCH 05/94] doc: fix step-strictly docs typo (#18705)

---
 examples/docs/en-US/input-number.md | 2 +-
 examples/docs/es/input-number.md    | 2 +-
 examples/docs/fr-FR/input-number.md | 2 +-
 examples/docs/zh-CN/input-number.md | 2 +-
 4 files changed, 4 insertions(+), 4 deletions(-)

diff --git a/examples/docs/en-US/input-number.md b/examples/docs/en-US/input-number.md
index 369829d12..688cc302e 100644
--- a/examples/docs/en-US/input-number.md
+++ b/examples/docs/en-US/input-number.md
@@ -174,7 +174,7 @@ Use attribute `size` to set additional sizes with `medium`, `small` or `mini`.
 |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 |
+|step-strictly | whether input value can only be multiple of step | boolean | — | false |
 |precision | precision of input value | number | — | — |
 |size | size of the component | string | large/small| — |
 |disabled| whether the component is disabled | boolean | — | false |
diff --git a/examples/docs/es/input-number.md b/examples/docs/es/input-number.md
index 6bdca96e1..b49abc93f 100644
--- a/examples/docs/es/input-number.md
+++ b/examples/docs/es/input-number.md
@@ -176,7 +176,7 @@ Utilice el atributo `size` para establecer tamaños adicionales con `medium`, `s
 | 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       |
+| step-strictly  | si el valor del input puede ser solo un multiplo de step | boolean  | —                 | 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       |
diff --git a/examples/docs/fr-FR/input-number.md b/examples/docs/fr-FR/input-number.md
index 031735981..abd4a5eb1 100644
--- a/examples/docs/fr-FR/input-number.md
+++ b/examples/docs/fr-FR/input-number.md
@@ -174,7 +174,7 @@ Utilisez l'attribut `size` pour régler la taille avec `medium`, `small` ou `min
 | 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 |
+| step-strictly | Si la valeur ne peut être qu'un multiple du pas. | boolean   | — | 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 |
diff --git a/examples/docs/zh-CN/input-number.md b/examples/docs/zh-CN/input-number.md
index e5fce4862..f2cf68c35 100644
--- a/examples/docs/zh-CN/input-number.md
+++ b/examples/docs/zh-CN/input-number.md
@@ -172,7 +172,7 @@
 | min      | 设置计数器允许的最小值 | number | — | -Infinity |
 | max      | 设置计数器允许的最大值 | number | — | Infinity |
 | step     | 计数器步长           | number   | — | 1 |
-| step-strictly | 是否只能输入 step 的倍数 | number   | — | false |
+| step-strictly | 是否只能输入 step 的倍数 | boolean   | — | false |
 | precision| 数值精度             | number   | — | — |
 | size     | 计数器尺寸           | string   | large, small | — |
 | disabled | 是否禁用计数器        | boolean | — | false |

From 3b7f95a308f5fa5709c4acbab3ae51d26bef35d1 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E4=B8=89=E5=92=B2=E6=99=BA=E5=AD=90?= <sxzz@sxzz.moe>
Date: Fri, 10 Apr 2020 16:43:53 +0800
Subject: [PATCH 06/94] Autocomplete: add change event (#17913)

---
 examples/docs/en-US/input.md               | 1 +
 examples/docs/es/input.md                  | 1 +
 examples/docs/fr-FR/input.md               | 1 +
 examples/docs/zh-CN/input.md               | 1 +
 packages/autocomplete/src/autocomplete.vue | 8 ++++++--
 5 files changed, 10 insertions(+), 2 deletions(-)

diff --git a/examples/docs/en-US/input.md b/examples/docs/en-US/input.md
index 9569f0199..0a57f01a0 100644
--- a/examples/docs/en-US/input.md
+++ b/examples/docs/en-US/input.md
@@ -659,6 +659,7 @@ Attribute | Description | Type | Options | Default
 | Event Name | Description | Parameters |
 |----| ----| ----|
 |select | triggers when a suggestion is clicked | suggestion being clicked |
+| change | triggers when the icon inside Input value change | (value: string \| number) |
 
 ### Autocomplete Methods
 
diff --git a/examples/docs/es/input.md b/examples/docs/es/input.md
index 3835a4f73..94cb72e52 100644
--- a/examples/docs/es/input.md
+++ b/examples/docs/es/input.md
@@ -674,6 +674,7 @@ export default {
 | Nombre | Descripción                                     | Parametros                                 |
 | ------ | ----------------------------------------------- | ------------------------------------------ |
 | select | se dispara cuando se hace clic a una sugerencia | sugerencia en la que se está haciendo clic |
+| change | se activa cuando cambia el valor de entrada                  | (value: string \| number) |
 
 ### Autocomplete Metodo
 
diff --git a/examples/docs/fr-FR/input.md b/examples/docs/fr-FR/input.md
index cb215d9c4..c9266aab9 100644
--- a/examples/docs/fr-FR/input.md
+++ b/examples/docs/fr-FR/input.md
@@ -660,6 +660,7 @@ export default {
 | Nom | Description | Paramètres |
 |----| ----| ----|
 | select | Se déclenche quand une suggestion est cliquée. | La suggestion sélectionnée. |
+| change | Se déclenche quand la valeur change. | (value: string \ number) |
 
 ### Méthodes de l'autocomplétion
 
diff --git a/examples/docs/zh-CN/input.md b/examples/docs/zh-CN/input.md
index 7c4783179..03f394b66 100644
--- a/examples/docs/zh-CN/input.md
+++ b/examples/docs/zh-CN/input.md
@@ -769,6 +769,7 @@ export default {
 | 事件名称 | 说明 | 回调参数 |
 |---------|--------|---------|
 | select | 点击选中建议项时触发 | 选中建议项 |
+| change | 在 Input 值改变时触发 | (value: string \| number) |
 
 ### Autocomplete Methods
 | 方法名 | 说明 | 参数 |
diff --git a/packages/autocomplete/src/autocomplete.vue b/packages/autocomplete/src/autocomplete.vue
index 2ce802b05..ee32e60a1 100644
--- a/packages/autocomplete/src/autocomplete.vue
+++ b/packages/autocomplete/src/autocomplete.vue
@@ -10,7 +10,8 @@
     <el-input
       ref="input"
       v-bind="[$props, $attrs]"
-      @input="handleChange"
+      @input="handleInput"
+      @change="handleChange"
       @focus="handleFocus"
       @blur="handleBlur"
       @clear="handleClear"
@@ -186,7 +187,7 @@
           }
         });
       },
-      handleChange(value) {
+      handleInput(value) {
         this.$emit('input', value);
         this.suggestionDisabled = false;
         if (!this.triggerOnFocus && !value) {
@@ -196,6 +197,9 @@
         }
         this.debouncedGetData(value);
       },
+      handleChange(event) {
+        this.$emit('change', event.target.value);
+      },
       handleFocus(event) {
         this.activated = true;
         this.$emit('focus', event);

From 624c1e90ff225df141e9dcbec486784ab5f72957 Mon Sep 17 00:00:00 2001
From: Roojay <roojay520@users.noreply.github.com>
Date: Fri, 10 Apr 2020 16:46:06 +0800
Subject: [PATCH 07/94] Autocomplete:  fix suggestion error when textarea
 (#18478)

---
 packages/autocomplete/src/autocomplete-suggestions.vue | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/packages/autocomplete/src/autocomplete-suggestions.vue b/packages/autocomplete/src/autocomplete-suggestions.vue
index f492b2ed5..26a1bdac6 100644
--- a/packages/autocomplete/src/autocomplete-suggestions.vue
+++ b/packages/autocomplete/src/autocomplete-suggestions.vue
@@ -60,7 +60,7 @@
 
     mounted() {
       this.$parent.popperElm = this.popperElm = this.$el;
-      this.referenceElm = this.$parent.$refs.input.$refs.input;
+      this.referenceElm = this.$parent.$refs.input.$refs.input || this.$parent.$refs.input.$refs.textarea;
       this.referenceList = this.$el.querySelector('.el-autocomplete-suggestion__list');
       this.referenceList.setAttribute('role', 'listbox');
       this.referenceList.setAttribute('id', this.id);

From bc7dcc628165b9e05d224f0717590d249025c482 Mon Sep 17 00:00:00 2001
From: inooNgt <inoongt@gmail.com>
Date: Fri, 10 Apr 2020 17:19:07 +0800
Subject: [PATCH 08/94] Image: don't show image-viewer when preview is false
 (#18967)

---
 packages/image/src/main.vue | 4 ++++
 1 file changed, 4 insertions(+)

diff --git a/packages/image/src/main.vue b/packages/image/src/main.vue
index d1494aae2..4ff52d085 100644
--- a/packages/image/src/main.vue
+++ b/packages/image/src/main.vue
@@ -217,6 +217,10 @@
         }
       },
       clickHandler() {
+        // don't show viewer when preview is false
+        if (!this.preview) {
+          return;
+        }
         // prevent body scroll
         prevOverflow = document.body.style.overflow;
         document.body.style.overflow = 'hidden';

From 7259a83852802eace35dc8cedcaa17340c9aab0c Mon Sep 17 00:00:00 2001
From: luckyCao <cao.lei1031@163.com>
Date: Fri, 10 Apr 2020 17:25:18 +0800
Subject: [PATCH 09/94] Image: Fix preview dose not show when preview list not
 contain src issue (#18975) (#19130)

---
 packages/image/src/main.vue | 7 ++++++-
 1 file changed, 6 insertions(+), 1 deletion(-)

diff --git a/packages/image/src/main.vue b/packages/image/src/main.vue
index 4ff52d085..211fb086b 100644
--- a/packages/image/src/main.vue
+++ b/packages/image/src/main.vue
@@ -94,7 +94,12 @@
         return Array.isArray(previewSrcList) && previewSrcList.length > 0;
       },
       imageIndex() {
-        return this.previewSrcList.indexOf(this.src);
+        let previewIndex = 0;
+        const srcIndex = this.previewSrcList.indexOf(this.src);
+        if (srcIndex >= 0) {
+          previewIndex = srcIndex;
+        }
+        return previewIndex;
       }
     },
 

From 3235daa363ad2ad34ea139c7c74d2fc2da4b1cfa Mon Sep 17 00:00:00 2001
From: iamkun <kunhello@outlook.com>
Date: Fri, 10 Apr 2020 17:40:35 +0800
Subject: [PATCH 10/94] chore: remove index intro (#19155)

---
 examples/pages/template/index.tpl | 51 +------------------------------
 1 file changed, 1 insertion(+), 50 deletions(-)

diff --git a/examples/pages/template/index.tpl b/examples/pages/template/index.tpl
index 3e610a719..4d488464e 100644
--- a/examples/pages/template/index.tpl
+++ b/examples/pages/template/index.tpl
@@ -366,40 +366,10 @@
         </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 throttle from 'throttle-debounce/throttle';
-  import { addClass, removeClass } from 'element-ui/src/utils/dom';
   
   export default {
     created() {
@@ -416,28 +386,12 @@
         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,
-        mainImgOffset: 0,
-        showIntroA: false,
-        showIntroB: false,
-        introBY: 0,
-        introBX: 0
+        mainImgOffset: 0
       };
     },
     beforeDestroy() {
@@ -445,9 +399,6 @@
     },
     mounted() {
       window.addEventListener('scroll', this.throttledHandleScroll);
-      if (localStorage.getItem('KNOW_THEME')) return;
-      this.showIntroA = true;
-      addClass(document.body, 'el-loading-parent--hidden');
     }
   };
 </script>

From f3c76ee0ad340f866aa94b786ea92e48e9469d63 Mon Sep 17 00:00:00 2001
From: luckyCao <cao.lei1031@163.com>
Date: Mon, 13 Apr 2020 10:15:17 +0800
Subject: [PATCH 11/94] Image: Fix shortcut key not work at second time issue
 (#18983) (#19156)

* Image: fix shortcut key not work at second time issue (#18983)

* fix test case

* fix test case

Co-authored-by: cl199793 <cl199793@alibaba-inc.com>
---
 packages/image/src/main.vue   | 2 +-
 test/unit/specs/image.spec.js | 5 ++---
 2 files changed, 3 insertions(+), 4 deletions(-)

diff --git a/packages/image/src/main.vue b/packages/image/src/main.vue
index 211fb086b..fa4028dc7 100644
--- a/packages/image/src/main.vue
+++ b/packages/image/src/main.vue
@@ -16,7 +16,7 @@
       :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"/>
+      <image-viewer :z-index="zIndex" :initial-index="imageIndex" v-if="showViewer" :on-close="closeViewer" :url-list="previewSrcList"/>
     </template>
   </div>
 </template>
diff --git a/test/unit/specs/image.spec.js b/test/unit/specs/image.spec.js
index 9ae43b391..cb5f362f9 100644
--- a/test/unit/specs/image.spec.js
+++ b/test/unit/specs/image.spec.js
@@ -128,11 +128,10 @@ describe('Image', () => {
     vm.$el.querySelector('.el-image__inner').click();
     await wait();
 
-    const $wrapper = vm.$el.querySelector('.el-image-viewer__wrapper');
-    expect($wrapper).to.exist;
+    expect(vm.$el.querySelector('.el-image-viewer__wrapper')).to.exist;
     vm.$el.querySelector('.el-image-viewer__close').click();
     await wait(1000);
-    expect($wrapper.style.display).to.equal('none');
+    expect(vm.$el.querySelector('.el-image-viewer__wrapper')).to.not.exist;
   });
 });
 

From 4b869fbe4137c8222d7e985fc5df7580d11ae8d7 Mon Sep 17 00:00:00 2001
From: Haoran Yu <haoran_yu@hotmail.com>
Date: Mon, 13 Apr 2020 10:49:33 +0800
Subject: [PATCH 12/94] Docs: fix a type error in document of steps component.
 (#17555)

---
 examples/docs/en-US/steps.md | 4 ++--
 examples/docs/es/steps.md    | 4 ++--
 examples/docs/fr-FR/steps.md | 2 +-
 examples/docs/zh-CN/steps.md | 2 +-
 4 files changed, 6 insertions(+), 6 deletions(-)

diff --git a/examples/docs/en-US/steps.md b/examples/docs/en-US/steps.md
index 34a03f18a..3d8dbdee5 100644
--- a/examples/docs/en-US/steps.md
+++ b/examples/docs/en-US/steps.md
@@ -6,7 +6,7 @@ Guide the user to complete tasks in accordance with the process. Its steps can b
 
 Simple step bar.
 
-:::demo Set `active` attribute with `Number` type, which indicates the index of steps and starts from 0. You can set `space` attribute when the width of the step needs to be fixed which accepts `Boolean` type. The unit of the `space` attribute is `px`. If not set, it is responsive. Setting the `finish-status` attribute can change the state of the steps that have been completed.
+:::demo Set `active` attribute with `Number` type, which indicates the index of steps and starts from 0. You can set `space` attribute when the width of the step needs to be fixed which accepts `Number` type. The unit of the `space` attribute is `px`. If not set, it is responsive. Setting the `finish-status` attribute can change the state of the steps that have been completed.
 
 ```html
 <el-steps :active="active" finish-status="success">
@@ -50,7 +50,7 @@ Shows the status of the step for each step.
 ```
 :::
 
-### Center 
+### Center
 
 Title and desription can be centered.
 
diff --git a/examples/docs/es/steps.md b/examples/docs/es/steps.md
index 8c3f8a94b..f6404212e 100644
--- a/examples/docs/es/steps.md
+++ b/examples/docs/es/steps.md
@@ -6,7 +6,7 @@ Guía al usuario para completar tareas de acuerdo con el proceso. Sus pasos pued
 
 Barra de pasos simple.
 
-:::demo Defina el atributo `active` con un valor de tipo `Number`, que indica el índice de pasos y comienza desde 0. Puede definir el atributo `space` cuando es necesario fijar el ancho del paso que acepta el tipo `Boolean`. La unidad del atributo `space` es px. Si no está configurado, es responsive. La configuración del atributo `finish-status` puede cambiar el estado de los pasos completados.
+:::demo Defina el atributo `active` con un valor de tipo `Number`, que indica el índice de pasos y comienza desde 0. Puede definir el atributo `space` cuando es necesario fijar el ancho del paso que acepta el tipo `Number`. La unidad del atributo `space` es px. Si no está configurado, es responsive. La configuración del atributo `finish-status` puede cambiar el estado de los pasos completados.
 
 ```html
 <el-steps :active="active" finish-status="success">
@@ -50,7 +50,7 @@ Muestra el estado del step para cada paso.
 ```
 :::
 
-### Centrado 
+### Centrado
 
 El título y la descripción pueden estar centrados.
 
diff --git a/examples/docs/fr-FR/steps.md b/examples/docs/fr-FR/steps.md
index 33af263a0..2cb9d5b40 100644
--- a/examples/docs/fr-FR/steps.md
+++ b/examples/docs/fr-FR/steps.md
@@ -6,7 +6,7 @@ Permet de guider l'utilisateur dans l'accomplissement de toutes les taches d'un
 
 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.
+:::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 `Number`. 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">
diff --git a/examples/docs/zh-CN/steps.md b/examples/docs/zh-CN/steps.md
index 533053c2b..a371cc199 100644
--- a/examples/docs/zh-CN/steps.md
+++ b/examples/docs/zh-CN/steps.md
@@ -5,7 +5,7 @@
 
 简单的步骤条。
 
-:::demo 设置`active`属性，接受一个`Number`，表明步骤的 index，从 0 开始。需要定宽的步骤条时，设置`space`属性即可，它接受`Boolean`，单位为`px`，如果不设置，则为自适应。设置`finish-status`属性可以改变已经完成的步骤的状态。
+:::demo 设置`active`属性，接受一个`Number`，表明步骤的 index，从 0 开始。需要定宽的步骤条时，设置`space`属性即可，它接受`Number`，单位为`px`，如果不设置，则为自适应。设置`finish-status`属性可以改变已经完成的步骤的状态。
 ```html
 <el-steps :active="active" finish-status="success">
   <el-step title="步骤 1"></el-step>

From d9f71dcd57aefe82fd2f485f90adca4895bcace5 Mon Sep 17 00:00:00 2001
From: luckyCao <cao.lei1031@163.com>
Date: Mon, 13 Apr 2020 14:07:47 +0800
Subject: [PATCH 13/94] Chore: Update Changelog (#19162)

---
 CHANGELOG.en-US.md                    | 29 +++++++++++++++++++++++++++
 CHANGELOG.es.md                       | 29 +++++++++++++++++++++++++++
 CHANGELOG.fr-FR.md                    | 29 +++++++++++++++++++++++++++
 CHANGELOG.zh-CN.md                    | 29 +++++++++++++++++++++++++++
 examples/pages/template/changelog.tpl |  2 +-
 5 files changed, 117 insertions(+), 1 deletion(-)

diff --git a/CHANGELOG.en-US.md b/CHANGELOG.en-US.md
index 1bc6382d2..2646186ed 100644
--- a/CHANGELOG.en-US.md
+++ b/CHANGELOG.en-US.md
@@ -1,5 +1,34 @@
 ## Changelog
 
+### 2.13.1
+
+*2020-04-13*
+
+#### New features
+- Autocomplete
+  - Add change event (#17913 by @sxzz)
+
+#### Bug fixes
+
+- Autocomplete
+  - Fix suggestion error when textarea (#18478 by @Roojay)
+- Carousel
+  - Fix console typo bug (#18264 by @IceFox)
+- Image
+  - Fix preview dose not show when preview list not contain src issue (#18975) (#19130 by @luckyCao)
+  - Fix shortcut key not work at second time issue (#18983) (#19156 by @luckyCao)
+  - Don't show image-viewer when preview is false (#18967 by @inooNgt)
+- Transfer
+  - Fix incorrect line-height of el-transfer's first list item when it was used with  el-form-item (#18917 by @Hanx)
+- InputNumber
+  - Correctly compute inputNumberDisabled (#18439 by @ashuser-pendo)
+- Chore
+  - Remove index intro (#19155 by @iamkun)
+- Doc
+  - Popconfirm doc update (#18324 by @iamkun)
+  - Fix step-strictly docs typo (#18705 by @dream2023)
+  - Fix a type error in document of steps component (#17555 by @haoranyu)
+
 ### 2.13.0
 
 *2019-11-26*
diff --git a/CHANGELOG.es.md b/CHANGELOG.es.md
index db7fcd6e6..db3055be4 100644
--- a/CHANGELOG.es.md
+++ b/CHANGELOG.es.md
@@ -1,5 +1,34 @@
 ## Changelog
 
+### 2.13.1
+
+*2020-04-13*
+
+#### New features
+- Autocomplete
+  - Add change event (#17913 by @sxzz)
+
+#### Bug fixes
+
+- Autocomplete
+  - Fix suggestion error when textarea (#18478 by @Roojay)
+- Carousel
+  - Fix console typo bug (#18264 by @IceFox)
+- Image
+  - Fix preview dose not show when preview list not contain src issue (#18975) (#19130 by @luckyCao)
+  - Fix shortcut key not work at second time issue (#18983) (#19156 by @luckyCao)
+  - Don't show image-viewer when preview is false (#18967 by @inooNgt)
+- Transfer
+  - Fix incorrect line-height of el-transfer's first list item when it was used with  el-form-item (#18917 by @Hanx)
+- InputNumber
+  - Correctly compute inputNumberDisabled (#18439 by @ashuser-pendo)
+- Chore
+  - Remove index intro (#19155 by @iamkun)
+- Doc
+  - Popconfirm doc update (#18324 by @iamkun)
+  - Fix step-strictly docs typo (#18705 by @dream2023)
+  - Fix a type error in document of steps component (#17555 by @haoranyu)
+
 ### 2.13.0
 
 *2019-11-26*
diff --git a/CHANGELOG.fr-FR.md b/CHANGELOG.fr-FR.md
index d1e570f9b..06df6bcbf 100644
--- a/CHANGELOG.fr-FR.md
+++ b/CHANGELOG.fr-FR.md
@@ -1,5 +1,34 @@
 ## Changelog
 
+### 2.13.1
+
+*2020-04-13*
+
+#### New features
+- Autocomplete
+  - Add change event (#17913 by @sxzz)
+
+#### Bug fixes
+
+- Autocomplete
+  - Fix suggestion error when textarea (#18478 by @Roojay)
+- Carousel
+  - Fix console typo bug (#18264 by @IceFox)
+- Image
+  - Fix preview dose not show when preview list not contain src issue (#18975) (#19130 by @luckyCao)
+  - Fix shortcut key not work at second time issue (#18983) (#19156 by @luckyCao)
+  - Don't show image-viewer when preview is false (#18967 by @inooNgt)
+- Transfer
+  - Fix incorrect line-height of el-transfer's first list item when it was used with  el-form-item (#18917 by @Hanx)
+- InputNumber
+  - Correctly compute inputNumberDisabled (#18439 by @ashuser-pendo)
+- Chore
+  - Remove index intro (#19155 by @iamkun)
+- Doc
+  - Popconfirm doc update (#18324 by @iamkun)
+  - Fix step-strictly docs typo (#18705 by @dream2023)
+  - Fix a type error in document of steps component (#17555 by @haoranyu)
+
 ### 2.13.0
 
 *2019-11-26*
diff --git a/CHANGELOG.zh-CN.md b/CHANGELOG.zh-CN.md
index 5b801c2b1..7abe39259 100644
--- a/CHANGELOG.zh-CN.md
+++ b/CHANGELOG.zh-CN.md
@@ -1,5 +1,34 @@
 ## 更新日志
 
+### 2.13.1
+
+*2020-04-13*
+
+#### 新特性
+- Autocomplete
+  - 添加 change 事件 (#17913 by @sxzz)
+
+#### Bug 修复
+
+- Autocomplete
+  - 修复类型为 textarea 时建议错误问题 (#18478 by @Roojay)
+- Carousel
+  - 修复 console.warn 文案拼写错误 (#18264 by @IceFox)
+- Image
+  - 修复当 preview-src-list 属性不包含 src 时图片预览大图展示为空的问题 (#18975) (#19130 by @luckyCao)
+  - 修复第二次图片预览时快捷键失效问题 (#18983) (#19156 by @luckyCao)
+  - 修复 preview-src-list 为空时点击图片会给 body 添加 overflow: scroll 的问题 (#18967 by @inooNgt)
+- Transfer
+  - 修复和 Form 组件一起使用时错误的行高问题 (#18917 by @Hanx)
+- InputNumber
+  - 正确计算 inputNumberDisabled (#18439 by @ashuser-pendo)
+- Chore
+  - 更新首页文案 (#19155 by @iamkun)
+- Doc
+  - 更新 Popconfirm 文档 (#18324 by @iamkun)
+  - 修复 step-strictly 文档拼写问题 (#18705 by @dream2023)
+  - 修复 Steps 组件文档问题 (#17555 by @haoranyu)
+
 ### 2.13.0
 
 *2019-11-26*
diff --git a/examples/pages/template/changelog.tpl b/examples/pages/template/changelog.tpl
index 35bb18b7f..6a97c6192 100644
--- a/examples/pages/template/changelog.tpl
+++ b/examples/pages/template/changelog.tpl
@@ -179,7 +179,7 @@
         }
       }
       fragments = fragments.replace(/#(\d+)/g, '<a href="https://github.com/ElemeFE/element/issues/$1" target="_blank">#$1</a>');
-      fragments = fragments.replace(/@(\w+)/g, '<a href="https://github.com/$1" target="_blank">@$1</a>');
+      fragments = fragments.replace(/@([\w-]+)/g, '<a href="https://github.com/$1" target="_blank">@$1</a>');
       this.$refs.timeline.innerHTML = `${fragments}</li>`;
 
       changeLog.$el.remove();

From 2b6111338b8bce8c3b8551849ec17d3a73ef0cee Mon Sep 17 00:00:00 2001
From: iamkun <kunhello@outlook.com>
Date: Mon, 13 Apr 2020 14:53:31 +0800
Subject: [PATCH 14/94] [build] 2.13.1

---
 examples/versions.json            | 2 +-
 packages/theme-chalk/package.json | 2 +-
 src/index.js                      | 2 +-
 3 files changed, 3 insertions(+), 3 deletions(-)

diff --git a/examples/versions.json b/examples/versions.json
index c78226c1d..ab2827e32 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","2.5.4":"2.5","2.6.3":"2.6","2.7.2":"2.7","2.8.2":"2.8","2.9.2":"2.9","2.10.1":"2.10","2.11.1":"2.11","2.12.0":"2.12","2.13.0":"2.13"}
\ No newline at end of file
+{"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","2.5.4":"2.5","2.6.3":"2.6","2.7.2":"2.7","2.8.2":"2.8","2.9.2":"2.9","2.10.1":"2.10","2.11.1":"2.11","2.12.0":"2.12","2.13.1":"2.13"}
\ No newline at end of file
diff --git a/packages/theme-chalk/package.json b/packages/theme-chalk/package.json
index f803c606f..7df929e2a 100644
--- a/packages/theme-chalk/package.json
+++ b/packages/theme-chalk/package.json
@@ -1,6 +1,6 @@
 {
   "name": "element-theme-chalk",
-  "version": "2.13.0",
+  "version": "2.13.1",
   "description": "Element component chalk theme.",
   "main": "lib/index.css",
   "style": "lib/index.css",
diff --git a/src/index.js b/src/index.js
index d6787f956..bb00383fc 100644
--- a/src/index.js
+++ b/src/index.js
@@ -198,7 +198,7 @@ if (typeof window !== 'undefined' && window.Vue) {
 }
 
 export default {
-  version: '2.13.0',
+  version: '2.13.1',
   locale: locale.use,
   i18n: locale.i18n,
   install,

From d578b018b9f64e5a324444b594de2f810577ac20 Mon Sep 17 00:00:00 2001
From: iamkun <kunhello@outlook.com>
Date: Mon, 13 Apr 2020 14:53:32 +0800
Subject: [PATCH 15/94] [release] 2.13.1

---
 package.json | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/package.json b/package.json
index c896c9c01..893c8b412 100644
--- a/package.json
+++ b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "element-ui",
-  "version": "2.13.0",
+  "version": "2.13.1",
   "description": "A Component Library for Vue.js.",
   "main": "lib/element-ui.common.js",
   "files": [

From 49d367e993a593510be5e6362f177e53318c268e Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E4=B8=89=E5=92=B2=E6=99=BA=E5=AD=90?= <sxzz@sxzz.moe>
Date: Thu, 23 Apr 2020 16:49:06 +0800
Subject: [PATCH 16/94] Autocomplete: fix change event bug (#19200)

---
 packages/autocomplete/src/autocomplete.vue | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/packages/autocomplete/src/autocomplete.vue b/packages/autocomplete/src/autocomplete.vue
index ee32e60a1..af8d1195c 100644
--- a/packages/autocomplete/src/autocomplete.vue
+++ b/packages/autocomplete/src/autocomplete.vue
@@ -197,8 +197,8 @@
         }
         this.debouncedGetData(value);
       },
-      handleChange(event) {
-        this.$emit('change', event.target.value);
+      handleChange(value) {
+        this.$emit('change', value);
       },
       handleFocus(event) {
         this.activated = true;

From f89fa654426b5d4656c0dc09fff6d2dc743635de Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E5=88=98=E5=AE=8F=E7=8E=BA?= <liuhongxi0000@163.com>
Date: Mon, 18 May 2020 16:52:40 +0800
Subject: [PATCH 17/94] fix: Image update error status

---
 packages/image/src/main.vue | 1 +
 1 file changed, 1 insertion(+)

diff --git a/packages/image/src/main.vue b/packages/image/src/main.vue
index fa4028dc7..0cad4e0ac 100644
--- a/packages/image/src/main.vue
+++ b/packages/image/src/main.vue
@@ -149,6 +149,7 @@
         this.imageWidth = img.width;
         this.imageHeight = img.height;
         this.loading = false;
+        this.error = false;
       },
       handleError(e) {
         this.loading = false;

From abb16771a52f708b18f5a04486f3b3abc16d4b7e Mon Sep 17 00:00:00 2001
From: Philip Solovyev <philvv@mail.ru>
Date: Mon, 18 May 2020 11:54:19 +0300
Subject: [PATCH 18/94] locale: Fix ru-RU popconfirm translation (#19220)

---
 src/locale/lang/ru-RU.js | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/src/locale/lang/ru-RU.js b/src/locale/lang/ru-RU.js
index d58dec838..ac79beb9e 100644
--- a/src/locale/lang/ru-RU.js
+++ b/src/locale/lang/ru-RU.js
@@ -113,8 +113,8 @@ export default {
       title: 'Back' // to be translated
     },
     popconfirm: {
-      confirmButtonText: 'Yes', // to be translated
-      cancelButtonText: 'No' // to be translated
+      confirmButtonText: 'OK',
+      cancelButtonText: 'Отмена'
     }
   }
 };

From 3bc2d2b4dbaf776ba9a6b3d87ae31b6ffba1bebd Mon Sep 17 00:00:00 2001
From: Quang LN <nhatquang2810@hotmail.com>
Date: Mon, 18 May 2020 15:57:10 +0700
Subject: [PATCH 19/94] locale: Fix  vi translation (#19244)

---
 src/locale/lang/vi.js | 8 ++++----
 1 file changed, 4 insertions(+), 4 deletions(-)

diff --git a/src/locale/lang/vi.js b/src/locale/lang/vi.js
index ad03d056a..337816437 100644
--- a/src/locale/lang/vi.js
+++ b/src/locale/lang/vi.js
@@ -107,14 +107,14 @@ export default {
       hasCheckedFormat: '{checked}/{total} đã chọn '
     },
     image: {
-      error: 'FAILED' // to be translated
+      error: 'LỖI'
     },
     pageHeader: {
-      title: 'Back' // to be translated
+      title: 'Quay lại'
     },
     popconfirm: {
-      confirmButtonText: 'Yes', // to be translated
-      cancelButtonText: 'No' // to be translated
+      confirmButtonText: 'Ok',
+      cancelButtonText: 'Huỷ'
     }
   }
 };

From a4c3ec847d55ab9d7d3e0d37b0916699bbb00372 Mon Sep 17 00:00:00 2001
From: Ismail D <didouhismael@gmail.com>
Date: Mon, 18 May 2020 10:58:06 +0200
Subject: [PATCH 20/94] locale: Update Catalan and Spanish translations
 (#19296)

---
 src/locale/lang/ca.js | 8 ++++----
 src/locale/lang/es.js | 4 ++--
 2 files changed, 6 insertions(+), 6 deletions(-)

diff --git a/src/locale/lang/ca.js b/src/locale/lang/ca.js
index d50361ed9..9b82bc631 100644
--- a/src/locale/lang/ca.js
+++ b/src/locale/lang/ca.js
@@ -106,14 +106,14 @@ export default {
       hasCheckedFormat: '{checked}/{total} seleccionats'
     },
     image: {
-      error: 'FAILED' // to be translated
+      error: 'HA FALLAT'
     },
     pageHeader: {
-      title: 'Back' // to be translated
+      title: 'Tornar'
     },
     popconfirm: {
-      confirmButtonText: 'Yes', // to be translated
-      cancelButtonText: 'No' // to be translated
+      confirmButtonText: 'Si',
+      cancelButtonText: 'No'
     }
   }
 };
diff --git a/src/locale/lang/es.js b/src/locale/lang/es.js
index 348a319af..8a19eef82 100644
--- a/src/locale/lang/es.js
+++ b/src/locale/lang/es.js
@@ -112,8 +112,8 @@ export default {
       title: 'Volver'
     },
     popconfirm: {
-      confirmButtonText: 'Yes', // to be translated
-      cancelButtonText: 'No' // to be translated
+      confirmButtonText: 'Si',
+      cancelButtonText: 'No'
     }
   }
 };

From e6785d6e3deb16763a3c3d919bfe6c38d74e5e72 Mon Sep 17 00:00:00 2001
From: therour <nizomsidiq@gmail.com>
Date: Mon, 18 May 2020 15:59:46 +0700
Subject: [PATCH 21/94] locale: Update locale Indonesia (id.js) (#19320)

---
 src/locale/lang/id.js | 18 +++++++++---------
 1 file changed, 9 insertions(+), 9 deletions(-)

diff --git a/src/locale/lang/id.js b/src/locale/lang/id.js
index f52494998..3a83858f0 100644
--- a/src/locale/lang/id.js
+++ b/src/locale/lang/id.js
@@ -16,10 +16,10 @@ export default {
       startTime: 'Waktu Mulai',
       endDate: 'Tanggal Selesai',
       endTime: 'Waktu Selesai',
-      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: 'Tahun Sebelumnya',
+      nextYear: 'Tahun Selanjutnya',
+      prevMonth: 'Bulan Sebelumnya',
+      nextMonth: 'Bulan Selanjutnya',
       year: 'Tahun',
       month1: 'Januari',
       month2: 'Februari',
@@ -83,7 +83,7 @@ export default {
       error: 'Masukan ilegal'
     },
     upload: {
-      deleteTip: 'press delete to remove', // to be translated
+      deleteTip: 'Tekan hapus untuk melanjutkan',
       delete: 'Hapus',
       preview: 'Pratinjau',
       continue: 'Lanjutkan'
@@ -107,14 +107,14 @@ export default {
       hasCheckedFormat: '{checked}/{total} terpilih'
     },
     image: {
-      error: 'FAILED' // to be translated
+      error: 'GAGAL'
     },
     pageHeader: {
-      title: 'Back' // to be translated
+      title: 'Kembali'
     },
     popconfirm: {
-      confirmButtonText: 'Yes', // to be translated
-      cancelButtonText: 'No' // to be translated
+      confirmButtonText: 'Ya',
+      cancelButtonText: 'Tidak'
     }
   }
 };

From 6d6df13e5682dcc550266e2d2c0404ca6159617b Mon Sep 17 00:00:00 2001
From: Diego Mengarda <diegormengarda@gmail.com>
Date: Mon, 18 May 2020 06:00:41 -0300
Subject: [PATCH 22/94] locale: Update Brazilian Portuguese translation 
 (#19374)

---
 src/locale/lang/pt-br.js | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/src/locale/lang/pt-br.js b/src/locale/lang/pt-br.js
index 6bc2860c9..42ae6aa2d 100644
--- a/src/locale/lang/pt-br.js
+++ b/src/locale/lang/pt-br.js
@@ -113,8 +113,8 @@ export default {
       title: 'Voltar'
     },
     popconfirm: {
-      confirmButtonText: 'Yes', // to be translated
-      cancelButtonText: 'No' // to be translated
+      confirmButtonText: 'Sim',
+      cancelButtonText: 'Não'
     }
   }
 };

From d6f9adf5f7e57746001170401bf913351283b26c Mon Sep 17 00:00:00 2001
From: iamkun <kunhello@outlook.com>
Date: Mon, 18 May 2020 17:40:53 +0800
Subject: [PATCH 23/94] chore: update changelog (#19442)

* chore: update changelog

* chore: update changelog style
---
 CHANGELOG.en-US.md | 20 ++++++++++++++++++++
 CHANGELOG.es.md    | 21 +++++++++++++++++++++
 CHANGELOG.fr-FR.md | 21 +++++++++++++++++++++
 CHANGELOG.zh-CN.md | 21 +++++++++++++++++++++
 4 files changed, 83 insertions(+)

diff --git a/CHANGELOG.en-US.md b/CHANGELOG.en-US.md
index 2646186ed..3da0fdde8 100644
--- a/CHANGELOG.en-US.md
+++ b/CHANGELOG.en-US.md
@@ -1,5 +1,25 @@
 ## Changelog
 
+### 2.13.2
+
+*2020-05-18*
+
+#### Bug fixes
+
+- Autocomplete
+  - Fix change event bug (#19200 by @sxzz)
+- Image
+  - Update error status (#19194 by @lhx6538665)
+
+#### Optimization
+
+- I18n
+  - Update ru-RU popconfirm translation (#19220 by @Opppex)
+  - Update vi translation (#19244 by @quangln2810)
+  - Update Catalan and Spanish translations (#19296 by @Ismaaa)
+  - Update Indonesia translation (#19320) by @therour)
+  - Update Brazilian Portuguese translation (#19374 by @diegomengarda)
+
 ### 2.13.1
 
 *2020-04-13*
diff --git a/CHANGELOG.es.md b/CHANGELOG.es.md
index db3055be4..ef56eb8de 100644
--- a/CHANGELOG.es.md
+++ b/CHANGELOG.es.md
@@ -1,5 +1,26 @@
 ## Changelog
 
+### 2.13.2
+
+*2020-05-18*
+
+#### Bug fixes
+
+- Autocomplete
+  - Fix change event bug (#19200 by @sxzz)
+- Image
+  - Update error status (#19194 by @lhx6538665)
+
+#### Optimization
+
+- I18n
+  - Update ru-RU popconfirm translation (#19220 by @Opppex)
+  - Update vi translation (#19244 by @quangln2810)
+  - Update Catalan and Spanish translations (#19296 by @Ismaaa)
+  - Update Indonesia translation (#19320) by @therour)
+  - Update Brazilian Portuguese translation (#19374 by @diegomengarda)
+
+
 ### 2.13.1
 
 *2020-04-13*
diff --git a/CHANGELOG.fr-FR.md b/CHANGELOG.fr-FR.md
index 06df6bcbf..ad0778971 100644
--- a/CHANGELOG.fr-FR.md
+++ b/CHANGELOG.fr-FR.md
@@ -1,5 +1,26 @@
 ## Changelog
 
+### 2.13.2
+
+*2020-05-18*
+
+#### Bug fixes
+
+- Autocomplete
+  - Fix change event bug (#19200 by @sxzz)
+- Image
+  - Update error status (#19194 by @lhx6538665)
+
+#### Optimization
+
+- I18n
+  - Update ru-RU popconfirm translation (#19220 by @Opppex)
+  - Update vi translation (#19244 by @quangln2810)
+  - Update Catalan and Spanish translations (#19296 by @Ismaaa)
+  - Update Indonesia translation (#19320) by @therour)
+  - Update Brazilian Portuguese translation (#19374 by @diegomengarda)
+
+
 ### 2.13.1
 
 *2020-04-13*
diff --git a/CHANGELOG.zh-CN.md b/CHANGELOG.zh-CN.md
index 7abe39259..bc684a5ba 100644
--- a/CHANGELOG.zh-CN.md
+++ b/CHANGELOG.zh-CN.md
@@ -1,5 +1,26 @@
 ## 更新日志
 
+### 2.13.2
+
+*2020-05-18*
+
+#### Bug 修复
+
+- Autocomplete
+  - 修复 'change event' 错误 (#19200 by @sxzz)
+- Image
+  - 更新错误状态 (#19194 by @lhx6538665)
+
+#### Optimization
+
+- I18n
+  - 更新 ru-RU popconfirm 翻译 (#19220 by @Opppex)
+  - 更新 vi 翻译 (#19244 by @quangln2810)
+  - 更新 Catalan 和 Spanish 翻译 (#19296 by @Ismaaa)
+  - 更新 Indonesia 翻译 (#19320) by @therour)
+  - 更新 Brazilian Portuguese 翻译 (#19374 by @diegomengarda)
+
+
 ### 2.13.1
 
 *2020-04-13*

From d6107fe33f6277e490842b0a807ec8d63e47fd57 Mon Sep 17 00:00:00 2001
From: iamkun <kunhello@outlook.com>
Date: Mon, 18 May 2020 17:45:08 +0800
Subject: [PATCH 24/94] [build] 2.13.2

---
 examples/versions.json            | 2 +-
 packages/theme-chalk/package.json | 2 +-
 src/index.js                      | 2 +-
 3 files changed, 3 insertions(+), 3 deletions(-)

diff --git a/examples/versions.json b/examples/versions.json
index ab2827e32..e1dab782f 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","2.5.4":"2.5","2.6.3":"2.6","2.7.2":"2.7","2.8.2":"2.8","2.9.2":"2.9","2.10.1":"2.10","2.11.1":"2.11","2.12.0":"2.12","2.13.1":"2.13"}
\ No newline at end of file
+{"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","2.5.4":"2.5","2.6.3":"2.6","2.7.2":"2.7","2.8.2":"2.8","2.9.2":"2.9","2.10.1":"2.10","2.11.1":"2.11","2.12.0":"2.12","2.13.2":"2.13"}
\ No newline at end of file
diff --git a/packages/theme-chalk/package.json b/packages/theme-chalk/package.json
index 7df929e2a..979517208 100644
--- a/packages/theme-chalk/package.json
+++ b/packages/theme-chalk/package.json
@@ -1,6 +1,6 @@
 {
   "name": "element-theme-chalk",
-  "version": "2.13.1",
+  "version": "2.13.2",
   "description": "Element component chalk theme.",
   "main": "lib/index.css",
   "style": "lib/index.css",
diff --git a/src/index.js b/src/index.js
index bb00383fc..40f8a36cc 100644
--- a/src/index.js
+++ b/src/index.js
@@ -198,7 +198,7 @@ if (typeof window !== 'undefined' && window.Vue) {
 }
 
 export default {
-  version: '2.13.1',
+  version: '2.13.2',
   locale: locale.use,
   i18n: locale.i18n,
   install,

From bf534d977eeecfe0de82397f2598f96f45b7885a Mon Sep 17 00:00:00 2001
From: iamkun <kunhello@outlook.com>
Date: Mon, 18 May 2020 17:45:09 +0800
Subject: [PATCH 25/94] [release] 2.13.2

---
 package.json | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/package.json b/package.json
index 893c8b412..19e0f233b 100644
--- a/package.json
+++ b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "element-ui",
-  "version": "2.13.1",
+  "version": "2.13.2",
   "description": "A Component Library for Vue.js.",
   "main": "lib/element-ui.common.js",
   "files": [

From 04b5f0d2c042fb1efabaebe40749287761c14a21 Mon Sep 17 00:00:00 2001
From: Gonzalo Nandez <godan2310@yahoo.es>
Date: Tue, 18 Aug 2020 04:22:19 +0200
Subject: [PATCH 26/94] doc: Update Spanish Changelog 2.13.2 (#19944)

---
 CHANGELOG.es.md                     | 126 ++++++++++++++--------------
 examples/docs/es/alert.md           |   4 +-
 examples/docs/es/calendar.md        |   4 +-
 examples/docs/es/card.md            |   2 +-
 examples/docs/es/carousel.md        |  12 +--
 examples/docs/es/cascader.md        |  26 +++---
 examples/docs/es/checkbox.md        |   8 +-
 examples/docs/es/collapse.md        |   4 +-
 examples/docs/es/color-picker.md    |   6 +-
 examples/docs/es/custom-theme.md    |  10 +--
 examples/docs/es/date-picker.md     |  28 +++----
 examples/docs/es/datetime-picker.md |   2 +-
 examples/docs/es/dialog.md          |   4 +-
 examples/docs/es/drawer.md          |   8 +-
 examples/docs/es/dropdown.md        |  14 ++--
 examples/docs/es/form.md            |  16 ++--
 examples/docs/es/infiniteScroll.md  |   2 +-
 examples/docs/es/input-number.md    |   8 +-
 examples/docs/es/input.md           |  22 ++---
 examples/docs/es/installation.md    |   2 +-
 examples/docs/es/layout.md          |  18 ++--
 examples/docs/es/link.md            |  14 ++--
 examples/docs/es/loading.md         |   2 +-
 examples/docs/es/menu.md            |   4 +-
 examples/docs/es/message-box.md     |   2 +-
 examples/docs/es/message.md         |  10 +--
 examples/docs/es/notification.md    |   4 +-
 examples/docs/es/popconfirm.md      |  45 +++++-----
 examples/docs/es/popover.md         |   4 +-
 examples/docs/es/progress.md        |   4 +-
 examples/docs/es/select.md          |  12 +--
 examples/docs/es/slider.md          |   8 +-
 examples/docs/es/steps.md           |   4 +-
 examples/docs/es/switch.md          |   6 +-
 examples/docs/es/table.md           |   2 +-
 examples/docs/es/tabs.md            |   2 +-
 examples/docs/es/tag.md             |   4 +-
 examples/docs/es/time-picker.md     |   2 +-
 examples/docs/es/timeline.md        |   2 +-
 examples/docs/es/tooltip.md         |  14 ++--
 examples/docs/es/transfer.md        |  18 ++--
 examples/docs/es/upload.md          |  10 +--
 42 files changed, 249 insertions(+), 250 deletions(-)

diff --git a/CHANGELOG.es.md b/CHANGELOG.es.md
index ef56eb8de..94c8c3b33 100644
--- a/CHANGELOG.es.md
+++ b/CHANGELOG.es.md
@@ -4,120 +4,120 @@
 
 *2020-05-18*
 
-#### Bug fixes
+#### Corrección de errores
 
 - Autocomplete
-  - Fix change event bug (#19200 by @sxzz)
+  - Arreglado el error cuando se daba el evento change (#19200 by @sxzz)
 - Image
-  - Update error status (#19194 by @lhx6538665)
+  - Actualizado el estado de error  (#19194 by @lhx6538665)
 
-#### Optimization
+#### Optimización
 
 - I18n
-  - Update ru-RU popconfirm translation (#19220 by @Opppex)
-  - Update vi translation (#19244 by @quangln2810)
-  - Update Catalan and Spanish translations (#19296 by @Ismaaa)
-  - Update Indonesia translation (#19320) by @therour)
-  - Update Brazilian Portuguese translation (#19374 by @diegomengarda)
+  - Actualización de la traducción del popconfirm al Ruso (#19220 by @Opppex)
+  - Actualización  de la traducción al vi (#19244 by @quangln2810)
+  - Actualización de la traducción al Catalán y al Español (#19296 by @Ismaaa)
+  - Actualización de la traducción al Indonesio (#19320) by @therour)
+  - Actualización de la traducción al Portugués Brasileño (#19374 by @diegomengarda)
 
 
 ### 2.13.1
 
 *2020-04-13*
 
-#### New features
+#### Nuevas características
 - Autocomplete
-  - Add change event (#17913 by @sxzz)
+  - Agregado el evento change (#17913 by @sxzz)
 
-#### Bug fixes
+#### Corrección de errores
 
 - Autocomplete
-  - Fix suggestion error when textarea (#18478 by @Roojay)
+  - Solucionado el error de la sugerencia en textarea (#18478 by @Roojay)
 - Carousel
-  - Fix console typo bug (#18264 by @IceFox)
+  - Arreglado el error de escritura de la consola (#18264 by @IceFox)
 - Image
-  - Fix preview dose not show when preview list not contain src issue (#18975) (#19130 by @luckyCao)
-  - Fix shortcut key not work at second time issue (#18983) (#19156 by @luckyCao)
-  - Don't show image-viewer when preview is false (#18967 by @inooNgt)
+  - Solucionado el error de que no se mostraba el preview si no existía el src  (#18975) (#19130 by @luckyCao)
+  - Arreglado el problema de que el shortcut key no funcionaba la segunda vez (#18983) (#19156 by @luckyCao)
+  - No muestra la imagen cuando preview es falso (#18967 by @inooNgt)
 - Transfer
-  - Fix incorrect line-height of el-transfer's first list item when it was used with  el-form-item (#18917 by @Hanx)
+  - Corregida la altura (line-height) incorrecta del primer elemento del el-transfer cuando era usado con el-form-item (#18917 by @Hanx)
 - InputNumber
-  - Correctly compute inputNumberDisabled (#18439 by @ashuser-pendo)
-- Chore
-  - Remove index intro (#19155 by @iamkun)
-- Doc
-  - Popconfirm doc update (#18324 by @iamkun)
-  - Fix step-strictly docs typo (#18705 by @dream2023)
-  - Fix a type error in document of steps component (#17555 by @haoranyu)
+  - Calculo correcto de inputNumberDisabled (#18439 by @ashuser-pendo)
+- Tarea
+  - Se quito la introducción del index (#19155 by @iamkun)
+- Documentación
+  - Actualización de la documentación de Popconfirm (#18324 by @iamkun)
+  - Arreglado el error tipográfico de la documentación de Fix step-strictly (#18705 by @dream2023)
+  - Corregido un type error en la documentación de steps component (#17555 by @haoranyu)
 
 ### 2.13.0
 
 *2019-11-26*
 
-#### New features
+#### Nuevas características
 
 - Popconfirm
-  - Add popconfirm component (#17548 by @iamkun)
+  - Agregado componente popconfirm (#17548 by @iamkun)
 
-#### Bug fixes
+#### Corrección de errores
 
 - BackTop
-  - Use cubic bezier scrolling (by @lon)
+  - Se usa cubic bezier para el scroll (by @lon)
 - DatePicker
-  - Fix bug of only select min date of date range problem (#17191 by @smk0621)
+  - Arreglado el fallo cuando solo se elegía fecha mínima en un rango de fechas (#17191 by @smk0621)
 - Select
-  - Fix select test cases by (@msidolphin)
+  - Arreglado los casos de test del select (by @msidolphin)
 - Tree
-  - Add font-size for the style of tree empty-text (#17094 by @spengjie)
+  - Agregado font-size para el estilo del texto cuando esta vacío el tree (#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)
+  - La cabecera de la columna puede modificarse (#17291 by @ziyoung)
+  - Se actualizo el estilo de la cabecera de la tabla de la celda  (#17284 by @ziyoung)
+  - Se soluciono el problema de height de la cabecera de la tabla después de un filtro (#17348 by @ziyoung)
+  - Corregido el estilo de la fila que con display no funcionaba (#17002 by @a631807682)
+  - Arreglado que la cabecera de la tabla no se mostraba (#17341 by @ziyoung)
 - Calendar
-  - Import el-button and el-button-group (#17376 by @masongzhi)
+  - La importación de el-button y el-button-group (#17376 by @masongzhi)
 - MessageBox
-  - Fix icon position error (#17410 by @nullptru)
+  - Corregido el error de posición del icono (#17410 by @nullptru)
 - TimePicker
-  - Set the selection range after scrolling up or down (#16868 by @mattheyan)
+  - Establecido el rango de selección después de hacer scroll (#16868 by @mattheyan)
 - Message
-  - Fix close instace offsetHeight（#17564） (#17852 by @gzwgq222)
+  - Corregido el offsetHeight al cerrar la instancia（#17564） (#17852 by @gzwgq222)
 - Form
-  - Callback of validateField should be optional (#17314 by @CarterLi)
+  - La función de llamada de validateField es opcional (#17314 by @CarterLi)
 - Cascader
-  - Fix TypeScript 3.7 compatibility (#17881 by @CarterLi)
+  - Corregida la compatibilidad con TypeScript 3.7 (#17881 by @CarterLi)
 - Menu
-  - Fix router NavigationDuplicated error when using vue-router@^3.1.0 (#17269 by @iamkun)
+  - Corregido el error de la ruta de navegación duplicada cuando se usaba vue-router@^3.1.0 (#17269 by @iamkun)
 - Dropdown
-  - Update type file (#17550 by @iamkun)
+  - Actualización del tipo de archivo (#17550 by @iamkun)
 - Progress
-  - Add strokeLinecap prop (#17552 by @iamkun)
+  - Agregada la prop strokeLinecap (#17552 by @iamkun)
 - InfiniteScroll
-  - Skip trigger event on invisible element (#17553 by @iamkun)
+  - Salto del disparo de evento en elementos invisibles (#17553 by @iamkun)
 - Image
-  - Perfect picture preview behavior (#16985 by @luckyCao)
-  - Fix shield the page when preview big image (#16796 by @luckyCao)
+  - Comportamiento perfecto de personalización de imágenes (#16985 by @luckyCao)
+  - Corregida la pagina cuando se hace preview de imágenes grandes (#16796 by @luckyCao)
 - Drawer 
-  - Bugfix drawer-append-to-body-not-working (#16953 by @JeremyWuuuuu)
+  - Corregido el fallo del append-to-body del drawer que no funcionaba (#16953 by @JeremyWuuuuu)
 - Select
-  - Fix tag show value or empty issue (17199 by @luckyCao)
+  - Corregido:  ahora muestra el tag o el valor vacío (17199 by @luckyCao)
 - Scrollbar
-  - Fix FireFox scroll bar width (#18091 by @iamkun)
+  - Arreglado el ancho del scroll en FireFox  (#18091 by @iamkun)
   
-#### Optimization
+#### Optimización
 
 - I18n
-  - Update sv-SE.js (#17926 by @FOLLGAD)
-  - Update avatar component fr doc (#17762 by @blombard)
+  - Actualizado sv-SE.js (#17926 by @FOLLGAD)
+  - Actualizada la documentación para francés para el componente avatar (#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)
+  - Arreglada la typografia de time-select (#17250 by @wacky6)
+  - Arreglado en Drawer, ahora el atributo value acepta tipografías en español (#17122 by @haoranyu)
+  - Actualización del Changelog 2.12.0 al español (#17364 by @Gonzalo2310)
+  - Arreglo de la tipografía del Changelog (#17874 by @renlixin)
+  - Arreglada la demo de Loading (#17862 by @MBearo)
+  - Agregado el evento input en los inputs de Table (#18061 by @zhouxinyong)
+  - Eliminado el evento repetitivo change de los input (#18085 by @zhouxinyong)
 
 ### 2.12.0
 
@@ -1701,4 +1701,4 @@
 
 # #
 
-<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>``
\ No newline at end of file
diff --git a/examples/docs/es/alert.md b/examples/docs/es/alert.md
index 6ab0fa51d..f5155e6d7 100644
--- a/examples/docs/es/alert.md
+++ b/examples/docs/es/alert.md
@@ -229,11 +229,11 @@ 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 |
+| effect | selecciona tema | string | light/dark | light |
 
 ### Slot
 
-| Name | Description |
+| Nombre | Descripción |
 |------|--------|
 | — | descripción |
 | title | El contenido del título de alerta. |
diff --git a/examples/docs/es/calendar.md b/examples/docs/es/calendar.md
index 717861461..69e7a1c5b 100644
--- a/examples/docs/es/calendar.md
+++ b/examples/docs/es/calendar.md
@@ -57,8 +57,8 @@ Muestra fechas.
 | 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          |
+| range           | rango de tiempo, incluyendo el tiempo de inicio y el tiempo final. Start time debe ser el primer dia de la semana, end time debe ser el ultimo día de la semana, el time entre las fechas no puede exceder dos meses | Array     | —           | —      |
+| first-day-of-week | primer día de la semana | Number    | 1 to 7                |  1          |
 
 ### dateCell scoped slot
 | Atributo      | Descripción | Tipo   | Valores aceptados | Por defecto |
diff --git a/examples/docs/es/card.md b/examples/docs/es/card.md
index 05d8104fe..67722d5f5 100644
--- a/examples/docs/es/card.md
+++ b/examples/docs/es/card.md
@@ -169,4 +169,4 @@ Puede definir cuándo mostrar las sombras.
 | ---------- | ---------------------------------------- | ------ | -----------------  | ------------------- |
 | header     | Titulo del card. También acepta DOM pasado por `slot#header` | string  | —                 | —                   |
 | body-style | Estilo CSS del cuerpo                    | object | —                  | { padding: '20px' } |
-| shadow     | cuando mostrar la sombra del Card | string | always / hover / never | always          |
+| shadow     | Cuando mostrar la sombra del Card | string | always / hover / never | always          |
diff --git a/examples/docs/es/carousel.md b/examples/docs/es/carousel.md
index 163ec447d..fc7923ac6 100644
--- a/examples/docs/es/carousel.md
+++ b/examples/docs/es/carousel.md
@@ -190,12 +190,12 @@ Por defecto, `direction` es `horizontal`. El carousel puede ser mostrado de form
 | 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        |
+| interval           | Intervalo del auto loop, en mili segundos          | 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  |
+| direction          | dirección en la que se muestra el contenido        | string  | horizontal/vertical | horizontal  |
 
 ### Eventos de Carousel
 | Nombre evento | Descripción                               | Parámetros                                                   |
@@ -210,8 +210,8 @@ Por defecto, `direction` es `horizontal`. El carousel puede ser mostrado de form
 | next          | Cambia al slider siguiente | —                                                            |
 
 ### Atributos de Carousel-Item
-| Atributo | Descripción                              | Tipo   | Valores aceptados | Por defecto |
-| -------- | ---------------------------------------- | ------ | ----------------- | ----------- |
-| name     | Nombre del item que puede ser usado en `setActiveItem` | string | —                 | —           |
-| label    | Texto que se mostrara en el indicador de paginacion correspondiente | string | —                 | —           |
+| Atributo | Descripción                                                  | Tipo   | Valores aceptados | Por defecto |
+| -------- | ------------------------------------------------------------ | ------ | ----------------- | ----------- |
+| name     | Nombre del ítem que puede ser usado en `setActiveItem`       | string | —                 | —           |
+| label    | Texto que se mostrara en el indicador de paginación correspondiente | string | —                 | —           |
 
diff --git a/examples/docs/es/cascader.md b/examples/docs/es/cascader.md
index f842d7666..6f5013262 100644
--- a/examples/docs/es/cascader.md
+++ b/examples/docs/es/cascader.md
@@ -1923,14 +1923,14 @@ Puede personalizar el contenido del nodo de cascada.
 | 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 | — | — |
+| filterable | si las opciones pueden ser usadas para la búsqueda | boolean | — | — |
 | 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 |
+| debounce | retraso en mili segundos 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 |
+| Nombre | 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 |
@@ -1939,13 +1939,13 @@ Puede personalizar el contenido del nodo de cascada.
 | 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 |
+### Cascader Métodos
+| Método | Descripción | Parámetros |
 | ---- | ---- | ---- |
-| getCheckedNodes | get an array of currently selected node | (leafOnly) whether only return the leaf checked nodes, default is `false` |
+| getCheckedNodes | Obtiene el array de los nodos seleccionados actualmente | (leafOnly) Si solo devuelve los nodos chequeados, por defecto es `false` |
 
 ### Slots de Cascader
-| Nombre del slot | Descripción |
+| Nombre | 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. |
@@ -1958,19 +1958,19 @@ Puede personalizar el contenido del nodo de cascada.
 | props | opciones de configuración, consulte la siguiente tabla. | object | — | — |
 
 ### Eventos de CascaderPanel
-| Nombre de los evetos | Descripción | Parámetros |
+| 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 |
 
-### CascaderPanel Methods
-| Method Name | Description | Parameters |
+### CascaderPanel Métodos
+| Método | Descripción | Parámetros |
 | ---- | ---- | ---- |
-| getCheckedNodes | get an array of currently selected node | (leafOnly) whether only return the leaf checked nodes, default is `false` |
-| clearCheckedNodes | clear checked nodes | - |
+| getCheckedNodes | Obtiene el array de los nodos seleccionados actualmente | (leafOnly) Si solo devuelve los nodos chequeados, por defecto es `false` |
+| clearCheckedNodes | Limpia de nodos chequeados | - |
 
 ### Slots de CascaderPanel
-| Nombre del slot | Descripción |
+| Nombre | 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. |
 
diff --git a/examples/docs/es/checkbox.md b/examples/docs/es/checkbox.md
index 7d9aea3bf..3dd37ad0d 100644
--- a/examples/docs/es/checkbox.md
+++ b/examples/docs/es/checkbox.md
@@ -253,8 +253,8 @@ Checkbox con estilo tipo Botón.
 | indeterminate | similar a `indeterminate` en el checkbox nativo | boolean                   | —                     | false       |
 
 ### Eventos de Checkbox
-| Nombre | Descripción                              | Parametros           |
-| ------ | ---------------------------------------- | -------------------- |
+| Nombre | Descripción                                | Parámetros           |
+| ------ | ------------------------------------------ | -------------------- |
 | change | se ejecuta cuando el valor enlazado cambia | el valor actualizado |
 
 ### Atributos de Checkbox-group
@@ -269,8 +269,8 @@ Checkbox con estilo tipo Botón.
 | fill       | color de border y de fondo cuando el botón está activo | string  | —                     | #409EFF     |
 
 ### Eventos de Checkbox-group
-| Nombre de Evento | Descripción                              | Parametros           |
-| ---------------- | ---------------------------------------- | -------------------- |
+| Nombre de Evento | Descripción                                | Parámetros           |
+| ---------------- | ------------------------------------------ | -------------------- |
 | change           | se ejecuta cuando el valor enlazado cambia | el valor actualizado |
 
 ### Atributos de Checkbox-button
diff --git a/examples/docs/es/collapse.md b/examples/docs/es/collapse.md
index ea9d50d1e..a365ff8cd 100644
--- a/examples/docs/es/collapse.md
+++ b/examples/docs/es/collapse.md
@@ -119,8 +119,8 @@ Además de usar el atributo `title`, se puede personalizar el título del panel
 | accordion | especifica si activa el modo acordeón | boolean                                  | —                 | false       |
 
 ### Eventos de Collapse
-| Nombre de Evento | Descripción                              | Parametros                               |
-| ---------------- | ---------------------------------------- | ---------------------------------------- |
+| Nombre de Evento | Descripción                                   | Parámetros                                                   |
+| ---------------- | --------------------------------------------- | ------------------------------------------------------------ |
 | change           | se dispara cuando los paneles activos cambian | (activeNames: array (No modo acordeón) / string (modo acordeón)) |
 
 
diff --git a/examples/docs/es/color-picker.md b/examples/docs/es/color-picker.md
index ac3c199b3..278727c44 100644
--- a/examples/docs/es/color-picker.md
+++ b/examples/docs/es/color-picker.md
@@ -117,8 +117,8 @@ ColorPicker es un selector de color que soporta varios formatos de color.
 | predefine      | opciones de colores predefinidas | array | — | — |
 
 ### Eventos
-| Nombre de Evento | Descripción                              | Parametros             |
-| ---------------- | ---------------------------------------- | ---------------------- |
-| change           | se dispara cuando el valor del input cambia | valor del color        |
+| Nombre de Evento | Descripción                                     | Parámetros             |
+| ---------------- | ----------------------------------------------- | ---------------------- |
+| change           | se dispara cuando el valor del input cambia     | valor del color        |
 | active-change    | se dispara cuando el actual color activo cambia | valor del color activo |
 
diff --git a/examples/docs/es/custom-theme.md b/examples/docs/es/custom-theme.md
index 1c83920cb..13bc23017 100644
--- a/examples/docs/es/custom-theme.md
+++ b/examples/docs/es/custom-theme.md
@@ -2,11 +2,9 @@
 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).
+Use [Online Theme Roller](./#/es/theme) para personalizar el diseño de las  variables globales y componentes, y vea el resultado en tiempo real. Puede generar un completo paquete de estilos basado en un nuevo tema que puede bajar directamente (para importar los archivos del nuevo estilo al proyecto por favor vea la sección 'Importar un tema personalizado').
 
-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;">
+También puede usar [Theme Roller Chrome Extension](https://chrome.google.com/webstore/detail/element-theme-roller/lifkjlojflekabbmlddfccdkphlelmim), para personalizar un tema y ver el resultado en tiempo real en cualquier sitio desarrollado con 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.
@@ -102,9 +100,9 @@ et
 > ✔ build element theme
 ```
 
-### Use custom theme
+### Uso de los temas personalizados
 #### <strong>Importar un tema personalizado</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":
+Importar su propio tema es igual que importar el tema por defecto, sol que esta vez se deben importar los archivos construidos con "Online Theme Roller" o "CLI tool":
 
 ```javascript
 import '../theme/index.css'
diff --git a/examples/docs/es/date-picker.md b/examples/docs/es/date-picker.md
index dd9b86bea..f32377a43 100644
--- a/examples/docs/es/date-picker.md
+++ b/examples/docs/es/date-picker.md
@@ -333,17 +333,17 @@ Preste atención a la capitalización
 | `MM`        | mes          |                                          | 01            |
 | `W`         | semana       | solamente para semanas en picker's `format`; no acepta 0 | 1             |
 | `WW`        | semana       | solamente para semanas en  picker's `format` | 01            |
-| `d`         | dia          | no acepta 0                              | 2             |
-| `dd`        | dia          |                                          | 02            |
+| `d`         | día       | no acepta 0                              | 2             |
+| `dd`        | día       |                                          | 02            |
 | `H`         | hora         | 24-hora reloj; no acepta 0               | 3             |
 | `HH`        | hora         | 24-hora reloj                            | 03            |
 | `h`         | hora         | 12-hora reloj;  debe usarse con `A` o `a`; no acepta 0 | 3             |
-| `hh`        | hour         | 12-hora reloj;  debe usarse con `A` o `a` | 03            |
+| `hh`        | hora      | 12-hora reloj;  debe usarse con `A` o `a` | 03            |
 | `m`         | minuto       | no acepta 0                              | 4             |
 | `mm`        | minuto       |                                          | 04            |
 | `s`         | segundo      | no acepta 0                              | 5             |
 | `ss`        | segundo      |                                          | 05            |
-| `A`         | AM/PM        | solamente para `format`, mayusculas      | AM            |
+| `A`         | AM/PM        | solamente para `format`, mayúsculas | 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 |
@@ -450,7 +450,7 @@ Al seleccionar un intervalo de fechas, puede asignar la hora para la fecha de in
 | picker-options    | opciones adicionales, chequee la tabla debajo | object            | —                                        | {}                   |
 | range-separator   | separador de rangos                      | string            | —                                        | '-'                  |
 | default-value     | opcional, valor por defecto para el calendario | Date              | cualquiera aceptado por `new Date()`     | —                    |
-| default-time      | opcional, los valores para las horas que se deben usar en la seleccion de fechas cuando se usa el modo rango | string[]          | Array de dos valores, cada uno es un string del estilo `12:00:00`. El primer elemento es para la fecha de inicio y el segundo es para la fecha final. | —                    |
+| default-time      | opcional, los valores para las horas que se deben usar en la selección de fechas cuando se usa el modo rango | string[]          | Array de dos valores, cada uno es un string del estilo `12:00:00`. El primer elemento es para la fecha de inicio y el segundo es para la fecha final. | —                    |
 | value-format      | opcional, formato del valor enlazado. Si no esta especificado, el valor enlazado será un objeto Date. | string            | ver [date formats](#/es/component/date-picker#date-formats) | —                    |
 | name              | igual que `name` en el input nativo      | string            | —                                        | —                    |
 | unlink-panels     | desvincular los dos paneles de fecha en el range-picker | boolean           | —                                        | false                |
@@ -474,18 +474,18 @@ Al seleccionar un intervalo de fechas, puede asignar la hora para la fecha de in
 
 
 ### Eventos
-| Nombre | Descripción                              | Parametros                   |
-| ------ | ---------------------------------------- | ---------------------------- |
+| Nombre | Descripción                                    | Parámetros                   |
+| ------ | ---------------------------------------------- | ---------------------------- |
 | change | se dispara cuando el usuario confirma el valor | valor enlazado al componente |
-| blur   | se dispara cuando el input pierde el foco | instancia del componente     |
-| focus  | se dispara cuando el input obtiene el foco | instancia del componente     |
+| blur   | se dispara cuando el input pierde el foco      | instancia del componente     |
+| focus  | se dispara cuando el input obtiene el foco     | instancia del componente     |
 
-### Metodos
-| Metodo | Descripción                | Parameteros |
-| ------ | -------------------------- | ----------- |
-| focus  | coloca el foco en el input | —           |
+### Métodos
+| Método | Descripción                | Parámetros |
+| ------ | -------------------------- | ---------- |
+| focus  | coloca el foco en el input | —          |
 
 ### Slots
-| Name            | Description                           |
+| Nombre          | Descripción                           |
 | --------------- | ------------------------------------- |
 | range-separator | Separador de los rangos personalizado |
diff --git a/examples/docs/es/datetime-picker.md b/examples/docs/es/datetime-picker.md
index 020983889..f5986d63f 100644
--- a/examples/docs/es/datetime-picker.md
+++ b/examples/docs/es/datetime-picker.md
@@ -214,7 +214,7 @@ DateTimePicker se deriva de DatePicker y TimePicker. Por una explicación más d
 | 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 |
-| validate-event     | si se debe disparar la validacion | boolean             | -                                        | true                 |
+| validate-event     | si se debe disparar la validación | boolean             | -                                        | true                 |
 
 ### Picker Options
 | Atributo       | Descripción                              | Tipo     | Valores aceptados | Por defecto |
diff --git a/examples/docs/es/dialog.md b/examples/docs/es/dialog.md
index 280607e7f..f74a20890 100644
--- a/examples/docs/es/dialog.md
+++ b/examples/docs/es/dialog.md
@@ -233,14 +233,14 @@ Si la variable ligada a `visible` se gestiona en el Vuex store, el `.sync` no pu
 
 ### Slots
 
-| Nombre | Descripcíon                            |
+| Nombre | Descripción                            |
 | ------ | -------------------------------------- |
 | —      | contenido de Diálogo                   |
 | title  | contenido del título de Diálogo        |
 | footer | contenido del pie de página de Diálogo |
 
 ### Eventos
-| Nombre de Evento | Descripcíon                              | Parámetros |
+| Nombre de Evento | Descripción                   | Parámetros |
 | ---------------- | ---------------------------------------- | ---------- |
 | open             | se activa cuando se abre el cuadro de Diálogo | —          |
 | opened           | se activa cuando la animación de apertura del Dialog termina. | — |
diff --git a/examples/docs/es/drawer.md b/examples/docs/es/drawer.md
index cd4b0ff56..17bba4ec2 100644
--- a/examples/docs/es/drawer.md
+++ b/examples/docs/es/drawer.md
@@ -50,11 +50,11 @@ Llamada de un drawer temporal, desde varias direcciones
 ```
 :::
 
-### No Title
+### Sin titulo
 
-When you no longer need a title, you can remove title from drawer.
+Si no necesitas el titulo lo puedes eliminar del 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.
+:::demo Asigne **false** al atributo `withHeader`, se puede eliminar el atributo title del drawer, de esa manera el drawer tendrá mas espacio para el contenido. Por razones de accesibilidad se recomienda asignar siempre un contenido valido al atributo `title`.
 
 ```html
 <el-button @click="drawer = true" type="primary" style="margin-left: 16px;">
@@ -280,7 +280,7 @@ Si la variable `visible` se gestiona en el almacén de Vuex, el `.sync` no puede
 | 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 |
+| withHeader | Indica si la sección header existirá, por defecto es true, cuando es false no tienen efecto, ambos, `title attribute` y `title slot` | boolean | - | true |
 
 ### Drawer Slot's
 
diff --git a/examples/docs/es/dropdown.md b/examples/docs/es/dropdown.md
index b56eefdc9..66001c96f 100644
--- a/examples/docs/es/dropdown.md
+++ b/examples/docs/es/dropdown.md
@@ -38,7 +38,7 @@ Pase el ratón por el menú desplegable para desplegarlo y obtener más acciones
 
 Utilizando un botón para activar la lista desplegable.
 
-:::demo Utilice `split-button` para dividir el elemento detonante en un grupo de botones, siendo el botón izquierdo un botón normal y el botón derecho el objetivo real de la detonacion. Si desea insertar una línea de separación entre la posición tres y la posición cuatro, sólo añada un divisor de clase a la posición cuatro.
+:::demo Utilice `split-button` para dividir el elemento detonante en un grupo de botones, siendo el botón izquierdo un botón normal y el botón derecho el objetivo real de la detonación. Si desea insertar una línea de separación entre la posición tres y la posición cuatro, sólo añada un divisor de clase a la posición cuatro.
 
 ```html
 <el-dropdown>
@@ -290,13 +290,13 @@ Además del tamaño predeterminado, el componente Dropdown proporciona tres tama
 | dropdown | contenido del menu Dropdown, normalmente es un elemento `<el-dropdown-menu>` |
 
 ### Dropdown Eventos
-| Nombre         | Descripción                              | Parametros                               |
-| -------------- | ---------------------------------------- | ---------------------------------------- |
-| click          | si `split-button` es `true`, se activa al hacer clic en el botón izquierdo | —                                        |
-| command        | activa cuando se hace clic en un elemento desplegable | el comando enviado desde el elemento desplegable |
-| visible-change | se activa cuando aparece/desaparece el desplegable | true cuando aparece, y false de otro modo |
+| Nombre         | Descripción                                                  | Parámetros                                       |
+| -------------- | ------------------------------------------------------------ | ------------------------------------------------ |
+| click          | si `split-button` es `true`, se activa al hacer clic en el botón izquierdo | —                                                |
+| command        | activa cuando se hace clic en un elemento desplegable        | el comando enviado desde el elemento desplegable |
+| visible-change | se activa cuando aparece/desaparece el desplegable           | true cuando aparece, y false de otro modo        |
 
-### Dropdown Menu Item Atributos
+### Dropdown Menú Ítem Atributos
 | Atributo | Descripción                              | Tipo                 | Valores aceptados | Por defecto |
 | -------- | ---------------------------------------- | -------------------- | ----------------- | ----------- |
 | command  | un comando que se enviará al `command` callback del Dropdown | string/number/object | —                 | —           |
diff --git a/examples/docs/es/form.md b/examples/docs/es/form.md
index d98729a22..1f00233d7 100644
--- a/examples/docs/es/form.md
+++ b/examples/docs/es/form.md
@@ -392,7 +392,7 @@ Este ejemplo muestra cómo personalizar sus propias reglas de validación para f
 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
+### Eliminar o agregar validaciones dinámicamente
 
 :::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.
 
@@ -471,7 +471,7 @@ Se debe llamar a la función de validación de llamada de retorno personalizada.
 
 :::
 
-### Validación numerica
+### Validación numérica
 
 :::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.
 
@@ -617,9 +617,9 @@ Todos los componentes de un formulario heredan su atributo `size`. De manera sim
 | 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
+### Form Métodos
 
-| Metodo        | Descripción                                                  | Parametros                                                   |
+| Método        | Descripción                                                  | Parámetros                                                   |
 | ------------- | ------------------------------------------------------------ | ------------------------------------------------------------ |
 | 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)) |
@@ -627,9 +627,9 @@ Todos los componentes de un formulario heredan su atributo `size`. De manera sim
 | 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
+### Eventos Form
 
-| Nombre   | Descripción                                          | Parametros                                                   |
+| Nombre   | Descripción                                          | Parámetros                                                   |
 | -------- | ---------------------------------------------------- | ------------------------------------------------------------ |
 | 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. |
 
@@ -660,9 +660,9 @@ Todos los componentes de un formulario heredan su atributo `size`. De manera sim
 | ----- | ------------------------------------------------------------ |
 | error | Contenido personalizado para mostrar el mensaje de validación. El parámetro del scope es { error } |
 
-### Form-Item Metodo
+### Form-Item Método
 
-| Metodo        | Descripción                                                 | Parametros |
+| Método        | Descripción                                                 | Parámetros |
 | ------------- | ----------------------------------------------------------- | ---------- |
 | resetField    | restablecer campo actual y eliminar resultado de validación | —          |
 | clearValidate | elimina el estado de la validación de un campo              | -          |
diff --git a/examples/docs/es/infiniteScroll.md b/examples/docs/es/infiniteScroll.md
index 8b121c8fc..8c454484f 100644
--- a/examples/docs/es/infiniteScroll.md
+++ b/examples/docs/es/infiniteScroll.md
@@ -83,6 +83,6 @@ Añada `v-infinite-scroll` a la lista para ejecutar automáticamente el método
 | 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-delay   | retraso en mili segundos | 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-number.md b/examples/docs/es/input-number.md
index b49abc93f..0604cec62 100644
--- a/examples/docs/es/input-number.md
+++ b/examples/docs/es/input-number.md
@@ -91,7 +91,7 @@ Le permite definir el nivel de incremento de los saltos.
 
 ### Precisión
 
-:::demo El atributo `precision` aplica presicion al valor del value.
+:::demo El atributo `precision` aplica presición al valor del value.
 
 ```html
 <template>
@@ -174,9 +174,9 @@ Utilice el atributo `size` para establecer tamaños adicionales con `medium`, `s
 | ----------------- | ---------------------------------------- | ------- | ----------------- | ----------- |
 | value / v-model    | valor vinculado                          | number  | —                 | 0           |
 | min               | el valor mínimo permitido                | number  | —                 | `-Infinity`  |
-| max               | el valor maximo permitido                | number  | —                 | `Infinity`  |
+| max               | el valor máximo permitido          | number  | —                 | `Infinity`  |
 | step              | incremento (salto)                       | number  | —                 | 1           |
-| step-strictly  | si el valor del input puede ser solo un multiplo de step | boolean  | —                 | false       |
+| step-strictly  | si el valor del input puede ser solo un múltiplo de step | boolean  | —                 | 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       |
@@ -184,7 +184,7 @@ Utilice el atributo `size` para establecer tamaños adicionales con `medium`, `s
 | controls-position | posición de los botones de control       | string  | right             | -           |
 | name              | lo mismo que `name` en un input nativo   | string  | —                 | —           |
 | label             | texto de la etiqueta                     | string  | —                 | —           |
-| placeholder | placeholder in input | string | - | - |
+| placeholder | placeholder en el input | string | - | - |
 
 ### Eventos
 
diff --git a/examples/docs/es/input.md b/examples/docs/es/input.md
index 94cb72e52..0533ea242 100644
--- a/examples/docs/es/input.md
+++ b/examples/docs/es/input.md
@@ -155,7 +155,7 @@ export default {
 
 ### 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`.
+Re dimensiona 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`.
 
@@ -613,7 +613,7 @@ export default {
 
 ### Input eventos
 
-| Nombre | Descripción                                                  | Parametros                |
+| Nombre | Descripción                                                  | Parámetros                |
 | ------ | ------------------------------------------------------------ | ------------------------- |
 | blur   | Se dispara cuando se pierde el foco                          | (event: Event)            |
 | focus  | Se dispara cuando se obtiene el foco                         | (event: Event)            |
@@ -622,9 +622,9 @@ export default {
 | input  | 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
+### Input Métodos
 
-| Metodo | Descripción                   | Parametros |
+| Método | Descripción                   | Parámetros |
 | ------ | ----------------------------- | ---------- |
 | focus  | coloca el foco en el elemento | —          |
 | blur   | quita el foco del elemento    | —          |
@@ -665,19 +665,19 @@ export default {
 
 ### Autocomplete Scoped Slot
 
-| Name | Description                                                  |
-| ---- | ------------------------------------------------------------ |
-| —    | Contenido personalizado para el input de sugerencias. El parámetro del scope es { ítem } |
+| Nombre | Descripción                                                  |
+| ------ | ------------------------------------------------------------ |
+| —      | Contenido personalizado para el input de sugerencias. El parámetro del scope es { ítem } |
 
 ### Autocomplete Eventos
 
-| Nombre | Descripción                                     | Parametros                                 |
+| Nombre | Descripción                                     | Parámetros                                 |
 | ------ | ----------------------------------------------- | ------------------------------------------ |
 | select | se dispara cuando se hace clic a una sugerencia | sugerencia en la que se está haciendo clic |
-| change | se activa cuando cambia el valor de entrada                  | (value: string \| number) |
+| change | se activa cuando cambia el valor de entrada     | (value: string \| number)                  |
 
-### Autocomplete Metodo
+### Autocomplete Método
 
-| Metodo | Descripción                   | Parametros |
+| Método | Descripción                   | Parámetros |
 | ------ | ----------------------------- | ---------- |
 | focus  | coloca el foco en el elemento | —          |
diff --git a/examples/docs/es/installation.md b/examples/docs/es/installation.md
index efbdb559c..1a252aa62 100644
--- a/examples/docs/es/installation.md
+++ b/examples/docs/es/installation.md
@@ -20,7 +20,7 @@ Obtenga la última versión desde [unpkg.com/element-ui](https://unpkg.com/eleme
 ```
 
 ##Tip
-Recomendamos a nuestros usuarios congelar la versión de Elemet cuando usas un CDN. Por favor, refiérase a [unpkg.com](https://unpkg.com) para más información.
+Recomendamos a nuestros usuarios congelar la versión de Element cuando usas un CDN. Por favor, refiérase a [unpkg.com](https://unpkg.com) para más información.
 
 ### Hello world
 
diff --git a/examples/docs/es/layout.md b/examples/docs/es/layout.md
index d8721fa7b..3a7ab0b1b 100644
--- a/examples/docs/es/layout.md
+++ b/examples/docs/es/layout.md
@@ -1,12 +1,12 @@
 ## Layout
 
-Rápido y facilmente crea un layout básico con 24 columnas.
+Rápido y fácilmente crea un layout básico con 24 columnas.
 
 ### Layout básico
 
 Crea un layout básico usando columnas.
 
-:::demo Con `row` y `col`, puede facilmente manipular el layout usando el atributo `span`.
+:::demo Con `row` y `col`, puede fácilmente manipular el layout usando el atributo `span`.
 ```html
 <el-row>
   <el-col :span="24"><div class="grid-content bg-purple-dark"></div></el-col>
@@ -343,17 +343,17 @@ Las clases son:
 
 ### Atributos Col 
 
-| Atributos | Descripción                              | Tipo                                     | Valores aceptados | Valor por defecto |
-| --------- | ---------------------------------------- | ---------------------------------------- | ----------------- | ----------------- |
-| span      | número de columnas que abarca la cuadrícula | number                                   | —                 | 24                |
-| offset    | especific espacio en el lado izquierdo de la grill | number                                   | —                 | 0                 |
-| push      | número de columnas que la grilla se mueve hacia la derecha | number                                   | —                 | 0                 |
-| pull      | número de columnas que la grilla se mueve hacia la izquierda | number                                   | —                 | 0                 |
+| Atributos | Descripción                                                  | Tipo                                      | Valores aceptados | Valor por defecto |
+| --------- | ------------------------------------------------------------ | ----------------------------------------- | ----------------- | ----------------- |
+| span      | número de columnas que abarca la cuadrícula                  | number                                    | —                 | 24                |
+| offset    | especifica el espacio en el lado izquierdo del grill         | number                                    | —                 | 0                 |
+| push      | número de columnas que la grilla se mueve hacia la derecha   | number                                    | —                 | 0                 |
+| pull      | número de columnas que la grilla se mueve hacia la izquierda | number                                    | —                 | 0                 |
 | xs        | `<768px` Columnas responsive u objeto con propiedades de la columna | number/object (e.g. {span: 4, offset: 4}) | —                 | —                 |
 | sm        | `≥768px` Columnas responsive u objeto con propiedades de la columna | number/object (e.g. {span: 4, offset: 4}) | —                 | —                 |
 | md        | `≥992px` Columnas responsive u objeto con propiedades de la columna | number/object (e.g. {span: 4, offset: 4}) | —                 | —                 |
 | lg        | `≥1200px` Columnas responsive u objeto con propiedades de la columna | number/object (e.g. {span: 4, offset: 4}) | —                 | —                 |
 | xl        | `≥1920px` Columnas responsive u objeto con propiedades de la columna | number/object (e.g. {span: 4, offset: 4}) | —                 | —                 |
-| tag       | tag de elemento propio                   | string                                   | *                 | div               |
+| tag       | tag de elemento propio                                       | string                                    | *                 | div               |
 
 
diff --git a/examples/docs/es/link.md b/examples/docs/es/link.md
index 7eca3f9a7..24b148db3 100644
--- a/examples/docs/es/link.md
+++ b/examples/docs/es/link.md
@@ -1,10 +1,10 @@
 ## Link
 
-Texto con hipervinculo
+Texto con hipervínculo
 
 ### Básico
 
-Texto con hipervinculo básico
+Texto con hipervínculo básico
 :::demo
 
 ```html
@@ -22,7 +22,7 @@ Texto con hipervinculo básico
 
 ### Deshabilitar
 
-Deshabilita el hipervinculo
+Deshabilita el hipervínculo
 :::demo
 
 ```html
@@ -40,7 +40,7 @@ Deshabilita el hipervinculo
 
 ### Subrayado
 
-Subrayado del hipervinculo
+Subrayado del hipervínculo
 :::demo
 
 ```html
@@ -54,7 +54,7 @@ Subrayado del hipervinculo
 
 ### Icono
 
-Hipervinculo con icono
+Hipervínculo con icono
 :::demo
 
 ```html
@@ -71,7 +71,7 @@ Hipervinculo con icono
 | Atributo  | Descripción                                          | Tipo    | Opciones                                    | Por defecto |
 | --------- | ---------------------------------------------------- | ------- | ------------------------------------------- | ----------- |
 | type      | tipo                                                 | string  | primary / success / warning / danger / info | default     |
-| underline | si el hipervinculo estara subrayado                  | boolean | —                                           | true        |
+| underline | si el hipervínculo estará subrayado                  | boolean | —                                           | true        |
 | disabled  | si el componente esta deshabilitado                  | boolean | —                                           | false       |
-| href      | lo mismo que el valor nativo del hipervinculo `href` | string  | —                                           | -           |
+| href      | lo mismo que el valor nativo del hipervínculo `href` | string  | —                                           | -           |
 | icon      | nombre de clase del icono                            | string  | —                                           | -           |
diff --git a/examples/docs/es/loading.md b/examples/docs/es/loading.md
index c45a2a5e1..d5fa49317 100644
--- a/examples/docs/es/loading.md
+++ b/examples/docs/es/loading.md
@@ -196,7 +196,7 @@ Llamar al método `close` en cualquiera de estas puede cerrarlo.
 
 Si Element es importado completamente, un método global `$loading` puede ser registrado a Vue.prototype. Puede invocarlo como esto: `this.$loading(options)`, y también devuelve una instancia del componente.
 
-### Options
+### Opciones
 | Atributo    | Descripción                              | Tipo          | Valores aceptados | Por defecto   |
 | ----------- | ---------------------------------------- | ------------- | ----------------- | ------------- |
 | target      | el nodo del DOM que el componente debe cubrir. Acepta un objecto DOM o una cadena. Si está es una cadena, este será pasado a `document.querySelector` para obtener el correspondiente nodo del DOM | object/string | —                 | document.body |
diff --git a/examples/docs/es/menu.md b/examples/docs/es/menu.md
index bc4aca0a9..c9722a80d 100644
--- a/examples/docs/es/menu.md
+++ b/examples/docs/es/menu.md
@@ -244,14 +244,14 @@ NavMenu vertical puede ser colapsado.
 ```
 :::
 
-### Atributos Menu
+### Atributos Menú
 | Atributo          | Descripción                              | Tipo    | Valores aceptados     | Por defecto |
 | ----------------- | ---------------------------------------- | ------- | --------------------- | ----------- |
 | mode              | modo de presentación del menú            | string  | horizontal / vertical | vertical    |
 | 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 del texto del menu-item activo (formato hexadecimal) | string  | —                     | #409EFF     |
 | 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       |
diff --git a/examples/docs/es/message-box.md b/examples/docs/es/message-box.md
index aaca3e9e1..b3cdd9d07 100644
--- a/examples/docs/es/message-box.md
+++ b/examples/docs/es/message-box.md
@@ -305,7 +305,7 @@ Los métodos correspondientes: `MessageBox`, `MessageBox.alert`, `MessageBox.con
 | message                  | contenido del componente MessageBox      | string                                   | —                                | —                                        |
 | 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         | —                          | —           |
+| iconClass                | clase personalizada para el icono, sobrescribe `type` | 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 | —                                | —                                        |
diff --git a/examples/docs/es/message.md b/examples/docs/es/message.md
index 61c5c609e..8015532ad 100644
--- a/examples/docs/es/message.md
+++ b/examples/docs/es/message.md
@@ -181,7 +181,7 @@ Utiliza el atributo `center` para centrar el texto.
 :::
 
 :::warning
-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.
+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.
 :::
 
 ### Métodos Globales
@@ -198,15 +198,15 @@ import { Message } from 'element-ui';
 
 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 |
+### Opciones
+| Atributo                 | Descripción                   | Tipo           | Valores permitidos         | Por defecto |
 | ------------------------ | ---------------------------------------- | -------------- | -------------------------- | ----------- |
 | message                  | texto del mensaje                        | string / VNode | —                          | —           |
 | type                     | tipo del mensaje                         | string         | success/warning/info/error | info        |
-| iconClass                | clase personalizada para el icono, sobreescribe `type` | string         | —                          | —           |
+| iconClass                | clase personalizada para el icono, sobrescribe `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 duración,en milisegundos. si se establece en 0, este no se apagara automáticamente | number         | —                          | 3000        |
+| duration                 | muestra la duración,en mili segundos. 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                  | función callback ejecutada cuando se cierra con una instancia de mensaje como parámetro | function       | —                          | —           |
diff --git a/examples/docs/es/notification.md b/examples/docs/es/notification.md
index 010ce03e5..7d92a692c 100644
--- a/examples/docs/es/notification.md
+++ b/examples/docs/es/notification.md
@@ -4,7 +4,7 @@ Muestra un mensaje de notificación global en una esquina de la página.
 
 ### Uso básico
 
-:::demo Element ha registrado el método`$notify` y recibe un objeto como parámetro. En el caso más sencillo, puede establecer el campo de `title` y el campo de ` message` para el título y el cuerpo de la notificación. De forma predeterminada, la notificación se cierra automáticamente después de 4500ms, pero configurando `duration`  se puede controlar su duración. Específicamente, si está configurado en `0`, no se cerrará automáticamente. Tenga en cuenta que `duration` recibe un `Number` en milisegundos.
+:::demo Element ha registrado el método`$notify` y recibe un objeto como parámetro. En el caso más sencillo, puede establecer el campo de `title` y el campo de ` message` para el título y el cuerpo de la notificación. De forma predeterminada, la notificación se cierra automáticamente después de 4500ms, pero configurando `duration`  se puede controlar su duración. Específicamente, si está configurado en `0`, no se cerrará automáticamente. Tenga en cuenta que `duration` recibe un `Number` en mili segundos.
 
 ```html
 <template>
@@ -313,6 +313,6 @@ En este caso, debe llamar a `Notification(options)`. También se han registrado
 ### 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            |
+| Método | Descripción            |
 | ------ | ---------------------- |
 | close  | cierra la notificación |
diff --git a/examples/docs/es/popconfirm.md b/examples/docs/es/popconfirm.md
index 199627e22..e79b08206 100644
--- a/examples/docs/es/popconfirm.md
+++ b/examples/docs/es/popconfirm.md
@@ -1,12 +1,12 @@
 ## Popconfirm 
 
-A simple confirmation dialog of an element click action.
+Un dialogo de confirmación simple asociado al evento click de un elemento.
 
-### Basic usage
+### Uso básico
 
-Popconfirm is similar to Popover. So for some duplicated attributes, please refer to the documentation of Popover.
+Popconfirm es parecido a Popover. Para algunos atributos duplicados, por favor consulte la documentación de Popover.
 
-:::demo Only `title` attribute is avaliable in Popconfirm, `content` will be ignored.
+:::demo Solo el atributo  `title`  esta disponible en Popconfirm, `content` sera ignorado.
 ```html
 <template>
 <el-popconfirm
@@ -18,9 +18,10 @@ Popconfirm is similar to Popover. So for some duplicated attributes, please refe
 ````
 :::
 
-### Customise
-You can customise Popconfirm like:
+### Personalización
+Se puede personalizar Popconfirm así:
 :::demo
+
 ```html
 <template>
 <el-popconfirm
@@ -36,25 +37,25 @@ You can customise Popconfirm like:
 ```
 :::
 
-### Attributes
-| Attribute      | Description          | Type      | Accepted Values       | Default  |
+### Atributos
+| Atributo     | Descripción | Tipo    | Valores aceptados | Por defecto |
 |--------------------|----------------------------------------------------------|-------------------|-------------|--------|
-|  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 |
+|  title              | Titulo | String | — | — |
+|  confirmButtonText              | Texto del botón de confirmación | String | — | — |
+|  cancelButtonText              | Texto del botón de cancelación | String | — | — |
+|  confirmButtonType              | Tipo del botón de confirmación | String | — | Primary |
+|  cancelButtonType              | Tipo del botón de cancelación | String | — | Text |
+|  icon              | Icono | String | — | el-icon-question |
+|  iconColor              | Color icono | String | — | #f90 |
+|  hideIcon              | ¿Es un icono oculto? | Boolean | — | false |
 
 ### Slot
-| Name | Description |
+| Nombre | Descripción |
 |--- | ---|
-| reference | HTML element that triggers Popconfirm |
+| reference | Elemento HTML que activa el Popconfirm |
 
-### Events
-| Event Name | Description | Parameters |
+### Eventos
+| Nombre Evento | Descripción | Parámetros |
 |---------|--------|---------|
-| onConfirm | triggers when click confirm button | — |
-| onCancel | triggers when click cancel button | — |
\ No newline at end of file
+| onConfirm | Se activa cuando se pulsa el botón de confirmación | — |
+| onCancel | Se activa cuando se pulsa el botón de cancelación | — |
\ No newline at end of file
diff --git a/examples/docs/es/popover.md b/examples/docs/es/popover.md
index f51bb81b1..640585fbe 100644
--- a/examples/docs/es/popover.md
+++ b/examples/docs/es/popover.md
@@ -150,8 +150,8 @@ Por supuesto, puedes anidar otras operaciones. Es más ligero que utilizar un `d
 | 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 |
+| open-delay     | retraso de la aparición cuando `trigger` es hover, en mili segundos | number         | —                                        | —                                        |
+| close-delay    | Retraso antes de desaparecer cuando el `trigger` es hover, en mili segundos. | number | — | 200 |
 | tabindex       | [tabindex](https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/tabindex) de Popover |   number           |      —      |  0    |
 
 ### Slot
diff --git a/examples/docs/es/progress.md b/examples/docs/es/progress.md
index 7b7c2f312..bd7e23d89 100644
--- a/examples/docs/es/progress.md
+++ b/examples/docs/es/progress.md
@@ -165,7 +165,7 @@ Puede utilizar el atributo `color` para establecer el color de la barra de progr
 | 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/warning | —   |
-| color        | color de fondo de la barra de progreso. Sobreescribe la propiedad `status` | string/function/array | — | '' |
+| color        | color de fondo de la barra de progreso. Sobrescribe 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
+| stroke-linecap  | circle/dashboard tipo de diseño al final del camino | string | butt/round/square | round |
\ No newline at end of file
diff --git a/examples/docs/es/select.md b/examples/docs/es/select.md
index 77cc383fb..291d5096f 100644
--- a/examples/docs/es/select.md
+++ b/examples/docs/es/select.md
@@ -186,7 +186,7 @@ Puede limpiar un Select con un icono.
 
 ### Selección múltiple básica
 
-Selección multiple utiliza tags para mostrar las opciones seleccionadas.
+Selección múltiple utiliza tags para mostrar las opciones seleccionadas.
 
 :::demo Configure el atributo `multiple` para `el-select` para habilitar el modo múltiple. En este caso, el valor del `v-model` será un array de opciones seleccionadas. De forma predeterminada, las opciones seleccionadas se mostrarán como tags. Se pueden contraer a un texto utilizando el atributo  `collapse-tags`.
 
@@ -562,7 +562,7 @@ 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                                |
+| Nombre         | Descripción                                                  | Parámetros                                |
 | -------------- | ------------------------------------------------------------ | ----------------------------------------- |
 | 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 |
@@ -571,8 +571,8 @@ Si el valor de encuadernación de Select es un objeto, asegúrese de asignar `va
 | 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 |
+### Slots Select 
+| Nombre | Descripción |
 |---------|-------------|
 |    —    | lista de los componentes Option |
 | prefix  | contenido prefix de un  Select |
@@ -591,8 +591,8 @@ Si el valor de encuadernación de Select es un objeto, asegúrese de asignar `va
 | label    | etiqueta de option, es igual a  `value` si se omite | string/number        | —                 | —           |
 | disabled | si  option esta deshabilitado            | boolean              | —                 | false       |
 
-### Metodos
-| Metodo | Descripción                 | Parametros |
+### Métodos
+| Método | Descripción                 | Parámetros |
 | ------ | --------------------------- | ---------- |
 | focus  | Foco en el componente input | -          |
 | blur   | Quita el focus del componente y oculta el dropdown | - |
diff --git a/examples/docs/es/slider.md b/examples/docs/es/slider.md
index 58ceaf263..f28cf7f09 100644
--- a/examples/docs/es/slider.md
+++ b/examples/docs/es/slider.md
@@ -231,13 +231,13 @@ Se soporta la selección de un rango de valores.
 | vertical            | modo vertical                            | boolean         | —                 | false       |
 | height              | alto del Slider, requerido en modo vertical | string          | —                 | —           |
 | label               | etiqueta para screen reader              | string          | —                 | —           |
-| debounce            | retardo al escribir, en milisegundos, funciona cuando`show-input` es true. | number          | —                 | 300         |
+| debounce            | retardo al escribir, en mili segundos, 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               |
+| Nombre | Descripción                              | Parámetros     |
 | ------ | ---------------------------------------- | ------------------------ |
-| 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 |
+| 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 después del cambio |
+| input | Se dispara cuando los datos cambian (funciona en tiempo real) | valor después del cambio |
 
diff --git a/examples/docs/es/steps.md b/examples/docs/es/steps.md
index f6404212e..19d3beb41 100644
--- a/examples/docs/es/steps.md
+++ b/examples/docs/es/steps.md
@@ -151,8 +151,8 @@ Step bar simple, donde se ignorará `align-center`, `description`, `direction` y
 | icon        | icono del paso                           | nombre de la clase del icono del paso. Los iconos también se pueden pasar a través del slot con nombre | string            | —           |
 | status      | estado actual. Se configurará automáticamente mediante Steps si no está configurado. | wait / process / finish / error / success | -                 |             |
 
-### Step Slot
-| Name        | Description          |
+### Slot Step
+| Nombre      | Descripción          |
 | ----------- | -------------------- |
 | icon        | Icono personalizado  |
 | title       | Titulo del paso      |
diff --git a/examples/docs/es/switch.md b/examples/docs/es/switch.md
index 30ce08ace..c76ca7219 100644
--- a/examples/docs/es/switch.md
+++ b/examples/docs/es/switch.md
@@ -134,12 +134,12 @@ Switch es utilizado para realizar cambios entre dos estados opuestos.
 
 ### Eventos
 
-| Nombre del evento | Descripción                       | Parametro |
+| Nombre del evento | Descripción                       | Parámetro |
 | ----------------- | --------------------------------- | --------- |
 | change            | se dispara cuando el valor cambia | valor     |
 después de cambiar
 
-### Metodos
-| Metodo | Descripción               | Parametro |
+### Métodos
+| Método | Descripción               | Parámetro |
 | ------ | ------------------------- | --------- |
 | focus  | foco al componente Switch | —         |
diff --git a/examples/docs/es/table.md b/examples/docs/es/table.md
index 9cc89711b..36f32ffd8 100644
--- a/examples/docs/es/table.md
+++ b/examples/docs/es/table.md
@@ -1815,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             | Table's max-height. The legal value is a number or the height in px.                | string/number                            | —                              | —                                        |
+| max-height             | El max-height de la tabla. El valor puede ser un numero o el alto en 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          | —                                        |
diff --git a/examples/docs/es/tabs.md b/examples/docs/es/tabs.md
index 8c3c7bc52..88d4a7765 100644
--- a/examples/docs/es/tabs.md
+++ b/examples/docs/es/tabs.md
@@ -293,7 +293,7 @@ Solo las pestañas de tipo tarjeta soportan adición y cierre.
 | 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)          |
+| edit             | se lanza cuando los botones de tab-add y/o tab-remove son cliqueados | (targetName, action)          |
 
 ### Atributos del Tab-pane
 | Atributo | Descripción                                                  | Tipo    | Valores Aceptados | Default                                                      |
diff --git a/examples/docs/es/tag.md b/examples/docs/es/tag.md
index f87faa25a..a70241e25 100644
--- a/examples/docs/es/tag.md
+++ b/examples/docs/es/tag.md
@@ -141,9 +141,9 @@ Además del tamaño predeterminado, el componente Tag proporciona tres tamaños
 
 ### Theme
 
-Tag provide three different themes: `dark`、`light` and `plain`
+Tag tiene tres diferentes temas: `dark`、`light` y `plain`
 
-:::demo Using `effect` to change, default is `light`
+:::demo Use  `effect` para cambiarlo, por defecto es `light`
 ```html
 <div class="tag-group">
   <span class="tag-group__title">Dark</span>
diff --git a/examples/docs/es/time-picker.md b/examples/docs/es/time-picker.md
index 36e20f8fa..69623d645 100644
--- a/examples/docs/es/time-picker.md
+++ b/examples/docs/es/time-picker.md
@@ -34,7 +34,7 @@ Provee una lista de tiempo fijo para que los usuarios escojan.
 
 Un tiempo arbitrario puede ser escogido.
 
-:::demo Al usar el tag `el-time-picker`, es posible limitar el rango de tiempo al especificar `selectableRange`. Por defecto, es posible hacer scroll con la rueda del mouse para escoger el tiempo, alternativamente se pueden utilizar las flechas de control cuando el atributo `arrow-control` esté establecido.
+:::demo Al usar el tag `el-time-picker`, es posible limitar el rango de tiempo al especificar `selectableRange`. Por defecto, es posible hacer scroll con la rueda del ratón para escoger el tiempo, alternativamente se pueden utilizar las flechas de control cuando el atributo `arrow-control` esté establecido.
 
 ```html
 <template>
diff --git a/examples/docs/es/timeline.md b/examples/docs/es/timeline.md
index 1c76ca6ed..0990f9f9e 100644
--- a/examples/docs/es/timeline.md
+++ b/examples/docs/es/timeline.md
@@ -147,7 +147,7 @@ Las marcas de tiempo ( timestamp )  puede colocarse encima del contenido cuando
 | icon | nombre de la clase del icono | string | — | - |
 
 ### Timeline-Item Slot
-| name | Description |
+| Nombre | Descripción |
 |------|--------|
 | — | 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 b1be34b4e..15ed6c518 100644
--- a/examples/docs/es/tooltip.md
+++ b/examples/docs/es/tooltip.md
@@ -6,7 +6,7 @@ Mostrar aviso de información con el hover del mouse.
 
 Tooltip tiene 9 colocaciones.
 
-:::demo Use el atributo `content` para establecer el contenido que se mostrará al hacer hover. El atributo `placement` determina la posición del tooltip. Su valor es `[orientation]-[alignment]` con cuatro orientaciones `top`, `left`, `right`, `bottom` y tres alineaciones `start`, `end`, `null`, la alineación default es null. Tome `placement="left-end"` como ejemplo, Tooltip será mostrado en la izquierda del elemento en que se esté haciendo hover y el fondo del tooltip se alineará con el fondo del elemento.
+:::demo Use el atributo `content` para establecer el contenido que se mostrará al hacer hover. El atributo `placement` determina la posición del tooltip. Su valor es `[orientation]-[alignment]` con cuatro orientaciones `top`, `left`, `right`, `bottom` y tres alineaciones `start`, `end`, `null`, la alineación por defecto es null. Tome `placement="left-end"` como ejemplo, Tooltip será mostrado en la izquierda del elemento en que se esté haciendo hover y el fondo del tooltip se alineará con el fondo del elemento.
 ```html
 <div class="box">
   <div class="top">
@@ -116,7 +116,7 @@ Tooltip tiene dos temas: `dark` y `light`.
 
 Despliegue múltiples líneas de texto y establezca su formato.
 
-:::demo Sobrecriba el atributo `content` del `el-tooltip` añadiendo un slot llamado `content`.
+:::demo Sobrescriba 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>
@@ -172,7 +172,7 @@ De hecho, Tooltip es una extensión basada en [Vue-popper](https://github.com/el
 El componente `router-link` no es soportado por Tooltip, favor de usar `vm.$router.push`.
 
 Elementos de forma deshabilitados no son soportados por Tooltip, más información puede ser encontrada en [MDN](https://developer.mozilla.org/en-US/docs/Web/Events/mouseenter).
-Es necesario envolver los elementos de forma deshabilitados en un elemento contenedor para que Tooltipo funcione.
+Es necesario envolver los elementos de forma deshabilitados en un elemento contenedor para que Tooltip funcione.
 :::
 
 
@@ -188,9 +188,9 @@ Es necesario envolver los elementos de forma deshabilitados en un elemento conte
 | transition     | nombre de animación                      | string  | —                                        | el-fade-in-linear                        |
 | visible-arrow  | si una flecha es mostrada. Para mayor información, revisar la página de [Vue-popper](https://github.com/element-component/vue-popper) | boolean | —                                        | true                                     |
 | popper-options | parámetros de [popper.js](https://popper.js.org/documentation.html) | Object  | referirse a la documentación de [popper.js](https://popper.js.org/documentation.html) | `{ boundariesElement: 'body', gpuAcceleration: false }` |
-| open-delay     | retraso de la apariencia, en milisegundos | number  | —                                        | 0                                        |
+| open-delay     | retraso de la apariencia, en mili segundos | number  | —                                        | 0                                        |
 | manual         | si el Tooltipo será controlado de forma manual. `mouseenter` y `mouseleave` no tendrán efecto si fue establecido como `true` | boolean | —                                        | false                                    |
 | 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              |
+| enterable      | si el ratón puede entrar al Tooltip | Boolean | —                                        | true                                     |
+| hide-after     | tiempo a esperar en mili segundos para esconder el Tooltip | number  | —                                        | 0                                        |
+| tabindex       | [tabindex](https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/tabindex) de Tooltip | number   | —                      | 0              |
diff --git a/examples/docs/es/transfer.md b/examples/docs/es/transfer.md
index d617a563b..84defb6e1 100644
--- a/examples/docs/es/transfer.md
+++ b/examples/docs/es/transfer.md
@@ -38,7 +38,7 @@
 
 Puede buscar y filtrar los items.
 
-:::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.
+:::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
@@ -213,7 +213,7 @@ Por defecto Transfer busca los atributos `key`, `label`, y `disabled` en cada el
 :::
 
 ### Atributos
-| Atriburo              | Descripcion                              | Tipo                            | Valores aceptados | Por defecto                              |
+| Atributo             | Descripción                   | Tipo                            | Valores aceptados | Por defecto                              |
 | --------------------- | ---------------------------------------- | ------------------------------- | ----------------- | ---------------------------------------- |
 | value / v-model        | valor enlazado                           | array                           | —                 | —                                        |
 | data                  | Origen de datos                          | array[{ key, label, disabled }] | —                 | [ ]                                      |
@@ -230,23 +230,23 @@ Por defecto Transfer busca los atributos `key`, `label`, y `disabled` en cada el
 | right-default-checked | Array de claves de los elementos marcados inicialmente en la lista de la derecha | array                           | —                 | [ ]                                      |
 
 ### Slot
-| Nombre       | Descripcion                              |
-| ------------ | ---------------------------------------- |
+| Nombre       | Descripción                                      |
+| ------------ | ------------------------------------------------ |
 | left-footer  | Contenido del footer de la lista de la izquierda |
-| right-footer | Contenido del footer de la lista de la derecha |
+| right-footer | Contenido del footer de la lista de la derecha   |
 
 ### Scoped Slot
-| Name | Description |
+| Name | Descripción |
 |------|--------|
 | — | Contenido personalizado para los datos de los items. El parámetro del scope es { option } |
 
-### Methods
-| Method | Description | Parameters |
+### Métodos
+| Método | Descripción | Parámetros |
 | ---- | ---- | ---- |
 | clearQuery | borra la palabra clave del filtro de un determinado panel | 'left' / 'right' |
 
 ### Eventos
-| Nombre | Descripcion                              | Parametros                               |
+| Nombre | Descripción                   | Parámetros                     |
 | ------ | ---------------------------------------- | ---------------------------------------- |
 | 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 |
diff --git a/examples/docs/es/upload.md b/examples/docs/es/upload.md
index 57a2d96d3..6e571e9ad 100644
--- a/examples/docs/es/upload.md
+++ b/examples/docs/es/upload.md
@@ -150,9 +150,9 @@ Utilice la propiedad `list-type` para cambiar el estilo a un listado de archivos
 ```
 :::
 
-### Custom file thumbnail
+### Personalizar el template thumbnail
 
-Use `scoped-slot` to change default thumbnail template.
+Use el `scoped-slot`  para cambiar el template por defecto del thumbnail.
 
 :::demo
 ```html
@@ -359,20 +359,20 @@ Puede arrastrar el archivo dentro de un área en especifico para cargar el archi
 | 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        |
+| auto-upload      | se especifica si se auto cargan 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                              |
+| Nombre       | Descripción                   |
 | ------------ | ---------------------------------------- |
 | trigger | contenido que desencadena el diálogo de archivo |
 | tip | contenido de los tips |
 
 ### Métodos
-| Nombre del método | Descripción                              | Parametros                |
+| Nombre del método | Descripción                              | Parámetros      |
 | ----------------- | ---------------------------------------- | ------------------------- |
 | clearFiles        | limpia la lista de archivos cargados (este método no esta soportado en el _hook_ `before-upload`) | —                         |
 | abort             | cancela la petición de carga             | （ file: fileList's item ） |

From 649670c55a45c7343eb7148565e2d873bc3d52dd Mon Sep 17 00:00:00 2001
From: iamkun <kunhello@outlook.com>
Date: Tue, 15 Sep 2020 15:16:14 +0800
Subject: [PATCH 27/94] chore: Update Discussion Group Link (#20175)

---
 README.md | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/README.md b/README.md
index c9f072a0c..d137ccad9 100644
--- a/README.md
+++ b/README.md
@@ -237,7 +237,7 @@ Become a sponsor and get your logo on our README on Github with a link to your s
 
 Scan the QR code using [Dingtalk App](https://www.dingtalk.com/) to join in discussion group :
 
-<img alt="Join Discusion Group" src="https://user-images.githubusercontent.com/17680888/66537329-9a4b9100-eb52-11e9-9d99-65469cfdae58.jpeg" width="300">
+<img alt="Join Discusion Group" src="https://user-images.githubusercontent.com/17680888/93177882-0ae92d80-f766-11ea-870d-3fa2d7f06454.png" width="300">
 
 
 ## LICENSE

From 8bac0dad5bd904f86772331dd2b2de904e0df4cf Mon Sep 17 00:00:00 2001
From: Bryce Barbara <BryceBarbara@users.noreply.github.com>
Date: Tue, 27 Oct 2020 00:57:42 -0700
Subject: [PATCH 28/94] doc: Correct calendar English docs (#19912)

---
 examples/docs/en-US/calendar.md | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/examples/docs/en-US/calendar.md b/examples/docs/en-US/calendar.md
index 4516c59ee..46302f4c1 100644
--- a/examples/docs/en-US/calendar.md
+++ b/examples/docs/en-US/calendar.md
@@ -59,8 +59,8 @@ Display date.
 | 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 参数
+### dateCell Scoped Slot Parameters
 | 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      | —           | —      |
+| data            | { type, isSelected, day}. The `type` property indicates which month the date belongs, optional values are `prev-month`, `current-month`, `next-month`. The `isSelected` property indicates whether the date is selected. The `day` property is the formatted date in the format yyyy-MM-dd    | Object      | —           | —      |

From d300b8c10e027616f9cab5cfb7e4bb6112fb0be2 Mon Sep 17 00:00:00 2001
From: vc3nt <keansovay@gmail.com>
Date: Tue, 27 Oct 2020 15:00:46 +0700
Subject: [PATCH 29/94] fix: Update km.js (#20077)

Update Khmer translate
---
 src/locale/lang/km.js | 14 +++++++-------
 1 file changed, 7 insertions(+), 7 deletions(-)

diff --git a/src/locale/lang/km.js b/src/locale/lang/km.js
index dfef469c8..6819c42e1 100644
--- a/src/locale/lang/km.js
+++ b/src/locale/lang/km.js
@@ -5,7 +5,7 @@ export default {
       clear: 'លុប'
     },
     datepicker: {
-      now: 'ឥឡូវ​នេះ',
+      now: 'ឥឡូវនេះ',
       today: 'ថ្ងៃនេះ',
       cancel: 'បោះបង់',
       clear: 'លុប',
@@ -33,10 +33,10 @@ export default {
       month10: 'តុលា',
       month11: 'វិច្ឆកា',
       month12: 'ធ្នូ',
-      // week: 'week',
+      week: 'សប្តាហ៍',
       weeks: {
         sun: 'អាទិត្យ',
-        mon: 'Mon',
+        mon: 'ច័ន្ទ',
         tue: 'អង្គារ',
         wed: 'ពុធ',
         thu: 'ព្រ.ហ',
@@ -107,14 +107,14 @@ export default {
       hasCheckedFormat: '{checked}/{total} បានគូសធីក'
     },
     image: {
-      error: 'FAILED' // to be translated
+      error: 'បរាជ័យ'
     },
     pageHeader: {
-      title: 'Back' // to be translated
+      title: 'Back'
     },
     popconfirm: {
-      confirmButtonText: 'Yes', // to be translated
-      cancelButtonText: 'No' // to be translated
+      confirmButtonText: 'ព្រម',
+      cancelButtonText: 'មិនព្រម'
     }
   }
 };

From b4aa2637d0132506d6f0c5ea654e808dd15ffb69 Mon Sep 17 00:00:00 2001
From: Caaalabash <1121062986@qq.com>
Date: Tue, 27 Oct 2020 16:05:32 +0800
Subject: [PATCH 30/94] fix(progress): fix attribute error (#19985)

---
 packages/progress/src/progress.vue | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/packages/progress/src/progress.vue b/packages/progress/src/progress.vue
index 103dff62a..182f310a8 100644
--- a/packages/progress/src/progress.vue
+++ b/packages/progress/src/progress.vue
@@ -216,7 +216,7 @@
           if (typeof seriesColor === 'string') {
             return {
               color: seriesColor,
-              progress: (index + 1) * span
+              percentage: (index + 1) * span
             };
           }
           return seriesColor;

From 90edfcc039610cd3025ed63aab5eb824b44b96d2 Mon Sep 17 00:00:00 2001
From: Emil Yangirov <32175431+yangirov@users.noreply.github.com>
Date: Tue, 27 Oct 2020 11:08:59 +0300
Subject: [PATCH 31/94] fix: Update Russian locale (ru-RU.js)  (#19451)

---
 src/locale/lang/ru-RU.js | 6 +++---
 1 file changed, 3 insertions(+), 3 deletions(-)

diff --git a/src/locale/lang/ru-RU.js b/src/locale/lang/ru-RU.js
index ac79beb9e..af9501857 100644
--- a/src/locale/lang/ru-RU.js
+++ b/src/locale/lang/ru-RU.js
@@ -85,7 +85,7 @@ export default {
     upload: {
       deleteTip: 'Нажмите [Удалить] для удаления',
       delete: 'Удалить',
-      preview: 'Превью',
+      preview: 'Предпросмотр',
       continue: 'Продолжить'
     },
     table: {
@@ -107,10 +107,10 @@ export default {
       hasCheckedFormat: '{checked}/{total} выбрано'
     },
     image: {
-      error: 'FAILED' // to be translated
+      error: 'Произошла ошибка'
     },
     pageHeader: {
-      title: 'Back' // to be translated
+      title: 'Назад'
     },
     popconfirm: {
       confirmButtonText: 'OK',

From eb1c2c57704a726f93ef2943d6a31d8e3aa9006a Mon Sep 17 00:00:00 2001
From: iamkun <kunhello@outlook.com>
Date: Thu, 29 Oct 2020 10:10:12 +0800
Subject: [PATCH 32/94] chore: update README (Vue 3.0) (#20345)

add migration guide to Vue 3.0
---
 README.md | 8 ++++++--
 1 file changed, 6 insertions(+), 2 deletions(-)

diff --git a/README.md b/README.md
index d137ccad9..ce4b3d6c1 100644
--- a/README.md
+++ b/README.md
@@ -36,6 +36,12 @@
   </a>
 </p>
 
+> A Vue.js 2.0 UI Toolkit for Web.
+
+Element will stay with Vue 2.x 
+
+For Vue 3.0, we recommend using [Element Plus](https://github.com/element-plus/element-plus) from the same team
+
 <p align="center">
   <b>Special thanks to the generous sponsorship by:</b>
 </p>
@@ -61,8 +67,6 @@
   </tbody>
 </table>
 
-> A Vue.js 2.0 UI Toolkit for Web.
-
 ## Links
 - Homepage and documentation
   - [International users](http://element.eleme.io/#/en-US)

From 3ba2ca9c06a6f4eaf2e0d62e19c06f5014d5b25b Mon Sep 17 00:00:00 2001
From: Alex <alexk.mammut@gmail.com>
Date: Thu, 29 Oct 2020 04:45:10 +0200
Subject: [PATCH 33/94] fix: Update ua locale (#20344)

---
 src/locale/lang/ua.js | 10 +++++-----
 1 file changed, 5 insertions(+), 5 deletions(-)

diff --git a/src/locale/lang/ua.js b/src/locale/lang/ua.js
index f952fefa3..974066556 100644
--- a/src/locale/lang/ua.js
+++ b/src/locale/lang/ua.js
@@ -1,7 +1,7 @@
 export default {
   el: {
     colorpicker: {
-      confirm: 'OK',
+      confirm: 'Обрати',
       clear: 'Очистити'
     },
     datepicker: {
@@ -107,14 +107,14 @@ export default {
       hasCheckedFormat: '{checked}/{total} вибрано'
     },
     image: {
-      error: 'FAILED' // to be translated
+      error: 'ПОМИЛКА'
     },
     pageHeader: {
-      title: 'Back' // to be translated
+      title: 'Назад'
     },
     popconfirm: {
-      confirmButtonText: 'Yes', // to be translated
-      cancelButtonText: 'No' // to be translated
+      confirmButtonText: 'Так',
+      cancelButtonText: 'Ні'
     }
   }
 };

From 2acff774488d8336ae49d8e29f6bbbca53d213e1 Mon Sep 17 00:00:00 2001
From: Zhwt <greatzhwt@gmail.com>
Date: Thu, 29 Oct 2020 11:45:58 +0800
Subject: [PATCH 34/94] docs: fix color picker default value typo (#20212)

---
 examples/docs/zh-CN/color-picker.md | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/examples/docs/zh-CN/color-picker.md b/examples/docs/zh-CN/color-picker.md
index 7608399a0..9984e855f 100644
--- a/examples/docs/zh-CN/color-picker.md
+++ b/examples/docs/zh-CN/color-picker.md
@@ -110,7 +110,7 @@
 |---------- |-------- |---------- |-------------  |-------- |
 | value / v-model | 绑定值 | string | — | — |
 | disabled | 是否禁用 | boolean | — | false |
-| size | 尺寸 | string | — | medium / small / mini |
+| size | 尺寸 | string | medium / small / mini | — |
 | show-alpha | 是否支持透明度选择 | boolean | — | false |
 | color-format | 写入 v-model 的颜色的格式 | string | hsl / hsv / hex / rgb | hex（show-alpha 为 false）/ rgb（show-alpha 为 true） |
 | popper-class | ColorPicker 下拉框的类名 | string | — | — |
@@ -120,4 +120,4 @@
 | 事件名称      | 说明    | 回调参数      |
 |---------- |-------- |---------- |
 | change | 当绑定值变化时触发 | 当前值 |
-| active-change | 面板中当前显示的颜色发生改变时触发 | 当前显示的颜色值 |
\ No newline at end of file
+| active-change | 面板中当前显示的颜色发生改变时触发 | 当前显示的颜色值 |

From bcc36ebc6dfeba9c9ed6a0ef9313a3934a3cb533 Mon Sep 17 00:00:00 2001
From: Vladislav Bakaev <vladislav-bakaev@mail.ru>
Date: Thu, 29 Oct 2020 06:58:04 +0300
Subject: [PATCH 35/94] fix: re-name error popconfirm event name (#20240)

---
 examples/docs/en-US/popconfirm.md | 22 +++++++++++-----------
 examples/docs/es/popconfirm.md    | 22 +++++++++++-----------
 examples/docs/fr-FR/popconfirm.md | 22 +++++++++++-----------
 examples/docs/zh-CN/popconfirm.md | 22 +++++++++++-----------
 packages/popconfirm/src/main.vue  |  4 ++--
 5 files changed, 46 insertions(+), 46 deletions(-)

diff --git a/examples/docs/en-US/popconfirm.md b/examples/docs/en-US/popconfirm.md
index 199627e22..321bce63c 100644
--- a/examples/docs/en-US/popconfirm.md
+++ b/examples/docs/en-US/popconfirm.md
@@ -24,10 +24,10 @@ You can customise Popconfirm like:
 ```html
 <template>
 <el-popconfirm
-  confirmButtonText='OK'
-  cancelButtonText='No, Thanks'
+  confirm-button-text='OK'
+  cancel-button-text='No, Thanks'
   icon="el-icon-info"
-  iconColor="red"
+  icon-color="red"
   title="Are you sure to delete this?"
 >
   <el-button slot="reference">Delete</el-button>
@@ -40,13 +40,13 @@ You can customise Popconfirm like:
 | 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 |
+|  confirm-button-text              | Confirm button text | String | — | — |
+|  cancel-button-text              | Cancel button text | String | — | — |
+|  confirm-button-type              | Confirm button type | String | — | Primary |
+|  cancel-button-type              | Cancel button type | String | — | Text |
 |  icon              | Icon | String | — | el-icon-question |
-|  iconColor              | Icon color | String | — | #f90 |
-|  hideIcon              | is hide Icon | Boolean | — | false |
+|  icon-color              | Icon color | String | — | #f90 |
+|  hide-icon              | is hide Icon | Boolean | — | false |
 
 ### Slot
 | Name | Description |
@@ -56,5 +56,5 @@ You can customise Popconfirm like:
 ### Events
 | Event Name | Description | Parameters |
 |---------|--------|---------|
-| onConfirm | triggers when click confirm button | — |
-| onCancel | triggers when click cancel button | — |
\ No newline at end of file
+| confirm | triggers when click confirm button | — |
+| cancel | triggers when click cancel button | — |
\ No newline at end of file
diff --git a/examples/docs/es/popconfirm.md b/examples/docs/es/popconfirm.md
index e79b08206..46a3788ef 100644
--- a/examples/docs/es/popconfirm.md
+++ b/examples/docs/es/popconfirm.md
@@ -25,10 +25,10 @@ Se puede personalizar Popconfirm así:
 ```html
 <template>
 <el-popconfirm
-  confirmButtonText='OK'
-  cancelButtonText='No, Thanks'
+  confirm-button-text='OK'
+  cancel-button-text='No, Thanks'
   icon="el-icon-info"
-  iconColor="red"
+  icon-color="red"
   title="Are you sure to delete this?"
 >
   <el-button slot="reference">Delete</el-button>
@@ -41,13 +41,13 @@ Se puede personalizar Popconfirm así:
 | Atributo     | Descripción | Tipo    | Valores aceptados | Por defecto |
 |--------------------|----------------------------------------------------------|-------------------|-------------|--------|
 |  title              | Titulo | String | — | — |
-|  confirmButtonText              | Texto del botón de confirmación | String | — | — |
-|  cancelButtonText              | Texto del botón de cancelación | String | — | — |
-|  confirmButtonType              | Tipo del botón de confirmación | String | — | Primary |
-|  cancelButtonType              | Tipo del botón de cancelación | String | — | Text |
+|  confirm-button-text              | Texto del botón de confirmación | String | — | — |
+|  cancel-button-text              | Texto del botón de cancelación | String | — | — |
+|  confirm-button-type              | Tipo del botón de confirmación | String | — | Primary |
+|  cancel-button-type              | Tipo del botón de cancelación | String | — | Text |
 |  icon              | Icono | String | — | el-icon-question |
-|  iconColor              | Color icono | String | — | #f90 |
-|  hideIcon              | ¿Es un icono oculto? | Boolean | — | false |
+|  icon-color              | Color icono | String | — | #f90 |
+|  hide-icon              | ¿Es un icono oculto? | Boolean | — | false |
 
 ### Slot
 | Nombre | Descripción |
@@ -57,5 +57,5 @@ Se puede personalizar Popconfirm así:
 ### Eventos
 | Nombre Evento | Descripción | Parámetros |
 |---------|--------|---------|
-| onConfirm | Se activa cuando se pulsa el botón de confirmación | — |
-| onCancel | Se activa cuando se pulsa el botón de cancelación | — |
\ No newline at end of file
+| confirm | Se activa cuando se pulsa el botón de confirmación | — |
+| cancel | Se activa cuando se pulsa el botón de cancelación | — |
\ No newline at end of file
diff --git a/examples/docs/fr-FR/popconfirm.md b/examples/docs/fr-FR/popconfirm.md
index 199627e22..321bce63c 100644
--- a/examples/docs/fr-FR/popconfirm.md
+++ b/examples/docs/fr-FR/popconfirm.md
@@ -24,10 +24,10 @@ You can customise Popconfirm like:
 ```html
 <template>
 <el-popconfirm
-  confirmButtonText='OK'
-  cancelButtonText='No, Thanks'
+  confirm-button-text='OK'
+  cancel-button-text='No, Thanks'
   icon="el-icon-info"
-  iconColor="red"
+  icon-color="red"
   title="Are you sure to delete this?"
 >
   <el-button slot="reference">Delete</el-button>
@@ -40,13 +40,13 @@ You can customise Popconfirm like:
 | 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 |
+|  confirm-button-text              | Confirm button text | String | — | — |
+|  cancel-button-text              | Cancel button text | String | — | — |
+|  confirm-button-type              | Confirm button type | String | — | Primary |
+|  cancel-button-type              | Cancel button type | String | — | Text |
 |  icon              | Icon | String | — | el-icon-question |
-|  iconColor              | Icon color | String | — | #f90 |
-|  hideIcon              | is hide Icon | Boolean | — | false |
+|  icon-color              | Icon color | String | — | #f90 |
+|  hide-icon              | is hide Icon | Boolean | — | false |
 
 ### Slot
 | Name | Description |
@@ -56,5 +56,5 @@ You can customise Popconfirm like:
 ### Events
 | Event Name | Description | Parameters |
 |---------|--------|---------|
-| onConfirm | triggers when click confirm button | — |
-| onCancel | triggers when click cancel button | — |
\ No newline at end of file
+| confirm | triggers when click confirm button | — |
+| cancel | triggers when click cancel button | — |
\ No newline at end of file
diff --git a/examples/docs/zh-CN/popconfirm.md b/examples/docs/zh-CN/popconfirm.md
index 852a1faf5..6dde3ce95 100644
--- a/examples/docs/zh-CN/popconfirm.md
+++ b/examples/docs/zh-CN/popconfirm.md
@@ -24,10 +24,10 @@ Popconfirm 的属性与 Popover 很类似，因此对于重复属性，请参考
 ```html
 <template>
 <el-popconfirm
-  confirmButtonText='好的'
-  cancelButtonText='不用了'
+  confirm-button-text='好的'
+  cancel-button-text='不用了'
   icon="el-icon-info"
-  iconColor="red"
+  icon-color="red"
   title="这是一段内容确定删除吗？"
 >
   <el-button slot="reference">删除</el-button>
@@ -40,13 +40,13 @@ Popconfirm 的属性与 Popover 很类似，因此对于重复属性，请参考
 | 参数               | 说明                                                     | 类型              | 可选值      | 默认值 |
 |--------------------|----------------------------------------------------------|-------------------|-------------|--------|
 |  title              | 标题 | String | — | — |
-|  confirmButtonText              | 确认按钮文字 | String | — | — |
-|  cancelButtonText              | 取消按钮文字 | String | — | — |
-|  confirmButtonType              | 确认按钮类型 | String | — | Primary |
-|  cancelButtonType              | 取消按钮类型 | String | — | Text |
+|  confirm-button-text              | 确认按钮文字 | String | — | — |
+|  cancel-button-text              | 取消按钮文字 | String | — | — |
+|  confirm-button-type              | 确认按钮类型 | String | — | Primary |
+|  cancel-button-type              | 取消按钮类型 | String | — | Text |
 |  icon              | Icon | String | — | el-icon-question |
-|  iconColor              | Icon 颜色 | String | — | #f90 |
-|  hideIcon              | 是否隐藏 Icon | Boolean | — | false |
+|  icon-color              | Icon 颜色 | String | — | #f90 |
+|  hide-icon              | 是否隐藏 Icon | Boolean | — | false |
 
 ### Slot
 | 参数 | 说明 |
@@ -56,5 +56,5 @@ Popconfirm 的属性与 Popover 很类似，因此对于重复属性，请参考
 ### Events
 | 事件名称 | 说明 | 回调参数 |
 |---------|--------|---------|
-| onConfirm | 点击确认按钮时触发 | — |
-| onCancel | 点击取消按钮时触发 | — |
\ No newline at end of file
+| confirm | 点击确认按钮时触发 | — |
+| cancel | 点击取消按钮时触发 | — |
\ No newline at end of file
diff --git a/packages/popconfirm/src/main.vue b/packages/popconfirm/src/main.vue
index 8e158e021..574362ec5 100644
--- a/packages/popconfirm/src/main.vue
+++ b/packages/popconfirm/src/main.vue
@@ -87,11 +87,11 @@ export default {
   methods: {
     confirm() {
       this.visible = false;
-      this.$emit('onConfirm');
+      this.$emit('confirm');
     },
     cancel() {
       this.visible = false;
-      this.$emit('onCancel');
+      this.$emit('cancel');
     }
   }
 };

From 1044d930bd6eafa5c331f18647a2a13a29e91f35 Mon Sep 17 00:00:00 2001
From: iamkun <kunhello@outlook.com>
Date: Thu, 29 Oct 2020 14:52:54 +0800
Subject: [PATCH 36/94] chore: update changelog (#20347)

---
 CHANGELOG.en-US.md   | 21 +++++++++++++++++++++
 CHANGELOG.es.md      | 21 +++++++++++++++++++++
 CHANGELOG.fr-FR.md   | 21 +++++++++++++++++++++
 CHANGELOG.zh-CN.md   | 23 ++++++++++++++++++++++-
 build/bin/version.js |  2 +-
 build/deploy-ci.sh   |  2 +-
 build/deploy-faas.sh |  2 +-
 7 files changed, 88 insertions(+), 4 deletions(-)

diff --git a/CHANGELOG.en-US.md b/CHANGELOG.en-US.md
index 3da0fdde8..b0b741b1e 100644
--- a/CHANGELOG.en-US.md
+++ b/CHANGELOG.en-US.md
@@ -1,5 +1,26 @@
 ## Changelog
 
+### 2.14.0
+
+*2020-10-29*
+
+#### Breaking changes
+
+- Popconfirm
+  - Rename event name to `confirm`, `cancel` (#20240 by @hugiron)"
+
+#### Bug fixes
+
+- Progress
+  - Fix attribute error (#19985 by @Caaalabash)
+
+#### Optimization
+
+- I18n
+  - Update Russian translation (#19451 by @yangirov)
+  - Update Khmer translation (#20077 by @Sovai)
+  - Update Ukrainian translation (#20344 by @MammutAlex)
+
 ### 2.13.2
 
 *2020-05-18*
diff --git a/CHANGELOG.es.md b/CHANGELOG.es.md
index 94c8c3b33..697efd57b 100644
--- a/CHANGELOG.es.md
+++ b/CHANGELOG.es.md
@@ -1,5 +1,26 @@
 ## Changelog
 
+### 2.14.0
+
+*2020-10-29*
+
+#### Breaking changes
+
+- Popconfirm
+  - Rename event name to `confirm`, `cancel` (#20240 by @hugiron)"
+
+#### Bug fixes
+
+- Progress
+  - Fix attribute error (#19985 by @Caaalabash)
+
+#### Optimization
+
+- I18n
+  - Update Russian translation (#19451 by @yangirov)
+  - Update Khmer translation (#20077 by @Sovai)
+  - Update Ukrainian translation (#20344 by @MammutAlex)
+
 ### 2.13.2
 
 *2020-05-18*
diff --git a/CHANGELOG.fr-FR.md b/CHANGELOG.fr-FR.md
index ad0778971..d2cda59bd 100644
--- a/CHANGELOG.fr-FR.md
+++ b/CHANGELOG.fr-FR.md
@@ -1,5 +1,26 @@
 ## Changelog
 
+### 2.14.0
+
+*2020-10-29*
+
+#### Breaking changes
+
+- Popconfirm
+  - Rename event name to `confirm`, `cancel` (#20240 by @hugiron)"
+
+#### Bug fixes
+
+- Progress
+  - Fix attribute error (#19985 by @Caaalabash)
+
+#### Optimization
+
+- I18n
+  - Update Russian translation (#19451 by @yangirov)
+  - Update Khmer translation (#20077 by @Sovai)
+  - Update Ukrainian translation (#20344 by @MammutAlex)
+
 ### 2.13.2
 
 *2020-05-18*
diff --git a/CHANGELOG.zh-CN.md b/CHANGELOG.zh-CN.md
index bc684a5ba..c29880c55 100644
--- a/CHANGELOG.zh-CN.md
+++ b/CHANGELOG.zh-CN.md
@@ -1,5 +1,26 @@
 ## 更新日志
 
+### 2.14.0
+
+*2020-10-29*
+
+#### 非兼容性更新
+
+- Popconfirm
+  - 事件名称修改为 `confirm`, `cancel` (#20240 by @hugiron)"
+
+#### Bug 修复
+
+- Progress
+  - 修复参数错误的问题 (#19985 by @Caaalabash)
+
+#### 优化
+
+- I18n
+  - 更新俄语翻译 (#19451 by @yangirov)
+  - 更新高棉语翻译 (#20077 by @Sovai)
+  - 更新乌克兰语翻译 (#20344 by @MammutAlex)
+
 ### 2.13.2
 
 *2020-05-18*
@@ -11,7 +32,7 @@
 - Image
   - 更新错误状态 (#19194 by @lhx6538665)
 
-#### Optimization
+#### 优化
 
 - I18n
   - 更新 ru-RU popconfirm 翻译 (#19220 by @Opppex)
diff --git a/build/bin/version.js b/build/bin/version.js
index 696e3fbfd..118d98157 100644
--- a/build/bin/version.js
+++ b/build/bin/version.js
@@ -2,5 +2,5 @@ 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', '2.4.11': '2.4', '2.5.4': '2.5', '2.6.3': '2.6', '2.7.2': '2.7', '2.8.2': '2.8', '2.9.2': '2.9', '2.10.1': '2.10', '2.11.1': '2.11', '2.12.0': '2.12' };
-if (!content[version]) content[version] = '2.13';
+if (!content[version]) content[version] = '2.14';
 fs.writeFileSync(path.resolve(__dirname, '../../examples/versions.json'), JSON.stringify(content));
diff --git a/build/deploy-ci.sh b/build/deploy-ci.sh
index 76117e366..34549b11d 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.13'
+  SUB_FOLDER='2.14'
   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 708fd18d9..753415859 100644
--- a/build/deploy-faas.sh
+++ b/build/deploy-faas.sh
@@ -6,7 +6,7 @@ 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.13'
+SUB_FOLDER='2.14'
 mkdir -p $SUB_FOLDER
 rm -rf *.js *.css *.map static
 rm -rf $SUB_FOLDER/**

From f06236532ac9d99fcdd02ba7a0f8dd3dc2bca807 Mon Sep 17 00:00:00 2001
From: iamkun <kunhello@outlook.com>
Date: Thu, 29 Oct 2020 15:01:55 +0800
Subject: [PATCH 37/94] chore: update version.js

---
 build/bin/version.js | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/build/bin/version.js b/build/bin/version.js
index 118d98157..e11970b84 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', '2.4.11': '2.4', '2.5.4': '2.5', '2.6.3': '2.6', '2.7.2': '2.7', '2.8.2': '2.8', '2.9.2': '2.9', '2.10.1': '2.10', '2.11.1': '2.11', '2.12.0': '2.12' };
+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', '2.4.11': '2.4', '2.5.4': '2.5', '2.6.3': '2.6', '2.7.2': '2.7', '2.8.2': '2.8', '2.9.2': '2.9', '2.10.1': '2.10', '2.11.1': '2.11', '2.12.0': '2.12', '2.13.2': '2.13' };
 if (!content[version]) content[version] = '2.14';
 fs.writeFileSync(path.resolve(__dirname, '../../examples/versions.json'), JSON.stringify(content));

From 193ca02bc689555b3ff7d06d0cca03decaf05fbe Mon Sep 17 00:00:00 2001
From: iamkun <kunhello@outlook.com>
Date: Thu, 29 Oct 2020 16:25:31 +0800
Subject: [PATCH 38/94] [build] 2.14.0

---
 examples/versions.json            | 2 +-
 packages/theme-chalk/package.json | 2 +-
 src/index.js                      | 2 +-
 3 files changed, 3 insertions(+), 3 deletions(-)

diff --git a/examples/versions.json b/examples/versions.json
index e1dab782f..0ee0ed995 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","2.5.4":"2.5","2.6.3":"2.6","2.7.2":"2.7","2.8.2":"2.8","2.9.2":"2.9","2.10.1":"2.10","2.11.1":"2.11","2.12.0":"2.12","2.13.2":"2.13"}
\ No newline at end of file
+{"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","2.5.4":"2.5","2.6.3":"2.6","2.7.2":"2.7","2.8.2":"2.8","2.9.2":"2.9","2.10.1":"2.10","2.11.1":"2.11","2.12.0":"2.12","2.13.2":"2.13","2.14.0":"2.14"}
\ No newline at end of file
diff --git a/packages/theme-chalk/package.json b/packages/theme-chalk/package.json
index 979517208..fa76542ba 100644
--- a/packages/theme-chalk/package.json
+++ b/packages/theme-chalk/package.json
@@ -1,6 +1,6 @@
 {
   "name": "element-theme-chalk",
-  "version": "2.13.2",
+  "version": "2.14.0",
   "description": "Element component chalk theme.",
   "main": "lib/index.css",
   "style": "lib/index.css",
diff --git a/src/index.js b/src/index.js
index 40f8a36cc..f58dfaed8 100644
--- a/src/index.js
+++ b/src/index.js
@@ -198,7 +198,7 @@ if (typeof window !== 'undefined' && window.Vue) {
 }
 
 export default {
-  version: '2.13.2',
+  version: '2.14.0',
   locale: locale.use,
   i18n: locale.i18n,
   install,

From 50e55199be9ccee9fd86065f5cf1d62ba561bd78 Mon Sep 17 00:00:00 2001
From: iamkun <kunhello@outlook.com>
Date: Thu, 29 Oct 2020 16:25:32 +0800
Subject: [PATCH 39/94] [release] 2.14.0

---
 package.json | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/package.json b/package.json
index 19e0f233b..e0fabc51d 100644
--- a/package.json
+++ b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "element-ui",
-  "version": "2.13.2",
+  "version": "2.14.0",
   "description": "A Component Library for Vue.js.",
   "main": "lib/element-ui.common.js",
   "files": [

From ea5b4dbc25d879eb29ca641c81900fa6fb331b43 Mon Sep 17 00:00:00 2001
From: iamkun <kunhello@outlook.com>
Date: Mon, 9 Nov 2020 19:07:44 +0800
Subject: [PATCH 40/94] chore: remove donation section

---
 README.md | 5 -----
 1 file changed, 5 deletions(-)

diff --git a/README.md b/README.md
index ce4b3d6c1..8d3ee3234 100644
--- a/README.md
+++ b/README.md
@@ -161,11 +161,6 @@ French documentation is made possible by these community developers:
 - [smalesys](https://github.com/smalesys)
 - [blombard](https://github.com/blombard)
 
-## 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)]

From 4448fab89ce7f2377e2993cd17f49ae624efe64d Mon Sep 17 00:00:00 2001
From: Ahmed Elkattan <58733479+elkattan@users.noreply.github.com>
Date: Wed, 11 Nov 2020 10:45:37 +0200
Subject: [PATCH 41/94] i18n: Update Arabic translation (#20202)

---
 src/locale/lang/ar.js | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/src/locale/lang/ar.js b/src/locale/lang/ar.js
index bec1800d0..401913fda 100644
--- a/src/locale/lang/ar.js
+++ b/src/locale/lang/ar.js
@@ -112,8 +112,8 @@ export default {
       title: 'عودة'
     },
     popconfirm: {
-      confirmButtonText: 'Yes', // to be translated
-      cancelButtonText: 'No' // to be translated
+      confirmButtonText: 'تأكيد',
+      cancelButtonText: 'إلغاء'
     }
   }
 };

From 1f7a591d184b7f14ec37750f4ac89fc189ebc934 Mon Sep 17 00:00:00 2001
From: Enguerrand des Vaux <enguerrand@des-vaux.fr>
Date: Wed, 11 Nov 2020 09:46:22 +0100
Subject: [PATCH 42/94] chore: readme add link to Vue.js 3.0 Migration
 repository (#20199)

Now that Vue.js 3.0 has been release, it'll be nice to let users/developers know that we are working on the migration there.
---
 README.md | 1 +
 1 file changed, 1 insertion(+)

diff --git a/README.md b/README.md
index 8d3ee3234..9c5f4d48b 100644
--- a/README.md
+++ b/README.md
@@ -75,6 +75,7 @@ For Vue 3.0, we recommend using [Element Plus](https://github.com/element-plus/e
   - [French users](http://element.eleme.io/#/fr-FR)
 - [awesome-element](https://github.com/ElementUI/awesome-element)
 - [FAQ](./FAQ.md)
+- [Vue.js 3.0 migration](https://github.com/element-plus/element-plus)
 - [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)

From c71ab0a127d10283682074b2904cc98b21feac1c Mon Sep 17 00:00:00 2001
From: iamkun <kunhello@outlook.com>
Date: Wed, 11 Nov 2020 16:47:28 +0800
Subject: [PATCH 43/94] chore: update sponsor (#20425)

---
 README.md                         |  98 -----------------
 examples/assets/images/duohui.svg |  24 ----
 examples/assets/images/tipe.svg   | 175 ------------------------------
 examples/components/side-nav.vue  |  15 ---
 examples/pages/template/index.tpl |  16 ---
 5 files changed, 328 deletions(-)
 delete mode 100644 examples/assets/images/duohui.svg
 delete mode 100644 examples/assets/images/tipe.svg

diff --git a/README.md b/README.md
index 9c5f4d48b..c42986591 100644
--- a/README.md
+++ b/README.md
@@ -42,31 +42,6 @@ Element will stay with Vue 2.x
 
 For Vue 3.0, we recommend using [Element Plus](https://github.com/element-plus/element-plus) from the same team
 
-<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.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>
-
 ## Links
 - Homepage and documentation
   - [International users](http://element.eleme.io/#/en-US)
@@ -131,8 +106,6 @@ We have collected some [frequently asked questions](https://github.com/ElemeFE/e
 ## Contribution
 Please make sure to read the contributing guide ([中文](https://github.com/ElemeFE/element/blob/master/.github/CONTRIBUTING.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) | [Français](https://github.com/ElemeFE/element/blob/master/.github/CONTRIBUTING.fr-FR.md)) before making a pull request.
 
-[![Let's fund issues in this repository](https://issuehunt.io/static/embed/issuehunt-button-v1.svg)](https://issuehunt.io/repos/67274736)
-
 ## Special Thanks
 English documentation is brought to you by SwiftGG Translation Team:
 - [raychenfj](https://github.com/raychenfj)
@@ -162,77 +135,6 @@ French documentation is made possible by these community developers:
 - [smalesys](https://github.com/smalesys)
 - [blombard](https://github.com/blombard)
 
-## 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>
-
 ## Join Discussion Group
 
 Scan the QR code using [Dingtalk App](https://www.dingtalk.com/) to join in discussion group :
diff --git a/examples/assets/images/duohui.svg b/examples/assets/images/duohui.svg
deleted file mode 100644
index f395bfa96..000000000
--- a/examples/assets/images/duohui.svg
+++ /dev/null
@@ -1,24 +0,0 @@
-<svg width="98" height="150" viewBox="0 0 98 150" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
-<title>duohui-element</title>
-<desc>Created using Figma</desc>
-<g id="Canvas" transform="translate(-2216 140)">
-<clipPath id="clip-0" clip-rule="evenodd">
-<path d="M 2216 -140L 2314 -140L 2314 10L 2216 10L 2216 -140Z" fill="#FFFFFF"/>
-</clipPath>
-<g id="duohui-element" clip-path="url(#clip-0)">
-<path d="M 2216 -140L 2314 -140L 2314 10L 2216 10L 2216 -140Z" fill="#FFFFFF"/>
-<g id="Duohui Icon 2">
-<g id="Vector">
-<use xlink:href="#path0_fill" transform="matrix(1.26636 0 0 1.21929 2230 -75.7038)" fill="#3A88FD"/>
-</g>
-<g id="Vector">
-<use xlink:href="#path1_fill" transform="matrix(1.41534 0 0 1.21834 2226 -112)" fill="#35AFFB"/>
-</g>
-</g>
-</g>
-</g>
-<defs>
-<path id="path0_fill" fill-rule="evenodd" d="M 25.7722 1.00635C 26.2 0.374983 26.8949 -2.6613e-07 27.6349 -2.6613e-07C 28.3755 -2.6613e-07 29.0699 0.374983 29.4983 1.00635C 34.409 8.24964 47.798 27.9964 54.5986 38.0262C 55.3878 39.1901 55.4896 40.7162 54.8623 41.983C 54.235 43.2498 52.9833 44.0452 51.6178 44.0452C 39.6694 44.0452 15.601 44.0452 3.6521 44.0452C 2.28712 44.0452 1.03545 43.2498 0.408173 41.983C -0.219106 40.7162 -0.117353 39.1901 0.671804 38.0262C 7.47242 27.9964 20.8609 8.24964 25.7722 1.00635Z"/>
-<path id="path1_fill" fill-rule="evenodd" d="M 24.9939 1.44703C 25.6137 0.533117 26.5572 -3.01614e-07 27.5551 -3.01614e-07C 28.5535 -3.01614e-07 29.497 0.533117 30.1168 1.44703C 35.4674 9.33854 47.8725 27.6342 54.4043 37.2681C 55.1825 38.4157 55.3299 39.982 54.7847 41.2999C 54.2389 42.6185 53.096 43.4556 51.8426 43.4556C 39.9023 43.4556 15.2084 43.4556 3.26811 43.4556C 2.01471 43.4556 0.871739 42.6185 0.325978 41.2999C -0.219783 39.982 -0.0717813 38.4157 0.70639 37.2681C 7.23818 27.6342 19.6433 9.33854 24.9939 1.44703Z"/>
-</defs>
-</svg>
diff --git a/examples/assets/images/tipe.svg b/examples/assets/images/tipe.svg
deleted file mode 100644
index e4026a1c5..000000000
--- a/examples/assets/images/tipe.svg
+++ /dev/null
@@ -1,175 +0,0 @@
-<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 148.32 226.69">
-  <defs>
-    <style>
-      .cls-1 {
-        isolation: isolate;
-      }
-
-      .cls-2 {
-        fill: url(#radial-gradient);
-      }
-
-      .cls-3 {
-        fill: url(#linear-gradient);
-      }
-
-      .cls-4 {
-        fill: url(#linear-gradient-2);
-      }
-
-      .cls-5 {
-        fill: url(#linear-gradient-3);
-      }
-
-      .cls-6 {
-        fill: url(#linear-gradient-4);
-      }
-
-      .cls-7 {
-        fill: url(#linear-gradient-5);
-      }
-
-      .cls-8 {
-        fill: url(#linear-gradient-6);
-      }
-
-      .cls-9 {
-        opacity: 0.7;
-      }
-
-      .cls-11, .cls-9 {
-        mix-blend-mode: multiply;
-      }
-
-      .cls-10 {
-        fill: url(#linear-gradient-7);
-      }
-
-      .cls-12 {
-        fill: url(#linear-gradient-8);
-      }
-
-      .cls-13 {
-        fill: url(#linear-gradient-9);
-      }
-
-      .cls-14 {
-        fill: #3c2e36;
-      }
-
-      .cls-15 {
-        fill: url(#linear-gradient-10);
-      }
-
-      .cls-16 {
-        fill: url(#radial-gradient-2);
-      }
-    </style>
-    <radialGradient id="radial-gradient" cx="74.93" cy="117.87" r="86.39" gradientTransform="translate(0 22.72) scale(1 1.07)" gradientUnits="userSpaceOnUse">
-      <stop offset="0.32" stop-color="#e4dce1"/>
-      <stop offset="0.48" stop-color="#e1dadf"/>
-      <stop offset="0.59" stop-color="#d9d3da"/>
-      <stop offset="0.68" stop-color="#cac7d2"/>
-      <stop offset="0.76" stop-color="#b5b6c6"/>
-      <stop offset="0.79" stop-color="#aaadc0"/>
-      <stop offset="1" stop-color="#6f6f85"/>
-    </radialGradient>
-    <linearGradient id="linear-gradient" x1="38.85" y1="122.53" x2="108.18" y2="108.38" gradientUnits="userSpaceOnUse">
-      <stop offset="0" stop-color="#e4dce1"/>
-      <stop offset="0.19" stop-color="#d7d0d7"/>
-      <stop offset="0.53" stop-color="#b5b2be"/>
-      <stop offset="0.97" stop-color="#808296"/>
-    </linearGradient>
-    <linearGradient id="linear-gradient-2" x1="32.25" y1="64.7" x2="148.44" y2="64.7" gradientUnits="userSpaceOnUse">
-      <stop offset="0.32" stop-color="#e4dce1"/>
-      <stop offset="0.49" stop-color="#e1dadf"/>
-      <stop offset="0.6" stop-color="#d9d3da"/>
-      <stop offset="0.69" stop-color="#cac7d2"/>
-      <stop offset="0.78" stop-color="#b5b6c6"/>
-      <stop offset="0.81" stop-color="#aaadc0"/>
-      <stop offset="1" stop-color="#6f6f85"/>
-    </linearGradient>
-    <linearGradient id="linear-gradient-3" x1="139.11" y1="68.34" x2="139.11" y2="1.17" gradientUnits="userSpaceOnUse">
-      <stop offset="0.12" stop-color="#888aa0"/>
-      <stop offset="0.54" stop-color="#716f8a"/>
-      <stop offset="0.89" stop-color="#635d7c"/>
-    </linearGradient>
-    <linearGradient id="linear-gradient-4" x1="111.94" y1="16.05" x2="135.36" y2="16.05" gradientUnits="userSpaceOnUse">
-      <stop offset="0" stop-color="#3c314b"/>
-      <stop offset="0.54" stop-color="#534a67"/>
-      <stop offset="0.89" stop-color="#635d7c"/>
-    </linearGradient>
-    <linearGradient id="linear-gradient-5" x1="6752.04" y1="68.34" x2="6752.04" y2="-3.45" gradientTransform="matrix(-1, 0, 0, 1, 6787.68, 0)" gradientUnits="userSpaceOnUse">
-      <stop offset="0.19" stop-color="#e4dce1"/>
-      <stop offset="0.42" stop-color="#c2bac6"/>
-      <stop offset="0.92" stop-color="#6b6582"/>
-      <stop offset="0.97" stop-color="#635d7c"/>
-    </linearGradient>
-    <linearGradient id="linear-gradient-6" x1="39.39" y1="16.05" x2="62.82" y2="16.05" gradientUnits="userSpaceOnUse">
-      <stop offset="0" stop-color="#3c314b"/>
-      <stop offset="0.02" stop-color="#3d324c"/>
-      <stop offset="0.35" stop-color="#524a66"/>
-      <stop offset="0.65" stop-color="#5f5876"/>
-      <stop offset="0.89" stop-color="#635d7c"/>
-    </linearGradient>
-    <linearGradient id="linear-gradient-7" x1="79.66" y1="229.05" x2="79.66" y2="194.82" gradientUnits="userSpaceOnUse">
-      <stop offset="0.03" stop-color="#808296"/>
-      <stop offset="0.31" stop-color="#b7b8c3" stop-opacity="0.78"/>
-      <stop offset="0.79" stop-color="#fff" stop-opacity="0.5"/>
-    </linearGradient>
-    <linearGradient id="linear-gradient-8" x1="87.38" y1="117.84" x2="87.38" y2="41.77" gradientUnits="userSpaceOnUse">
-      <stop offset="0" stop-color="#e3dddf" stop-opacity="0"/>
-      <stop offset="0.04" stop-color="#cbc5cd" stop-opacity="0.12"/>
-      <stop offset="0.15" stop-color="#9d97a9" stop-opacity="0.37"/>
-      <stop offset="0.25" stop-color="#7b758f" stop-opacity="0.54"/>
-      <stop offset="0.35" stop-color="#67617f" stop-opacity="0.65"/>
-      <stop offset="0.45" stop-color="#605a7a" stop-opacity="0.68"/>
-      <stop offset="0.54" stop-color="#575070" stop-opacity="0.75"/>
-      <stop offset="1" stop-color="#382e4a"/>
-    </linearGradient>
-    <linearGradient id="linear-gradient-9" x1="11357.22" y1="78.8" x2="11361.46" y2="58.49" gradientTransform="matrix(-1, 0, 0, 1, 11419.34, 0)" gradientUnits="userSpaceOnUse">
-      <stop offset="0.07" stop-color="#28ffff"/>
-      <stop offset="0.41" stop-color="#51d2ff"/>
-      <stop offset="0.8" stop-color="#7ba3ff"/>
-      <stop offset="1" stop-color="#8b91ff"/>
-    </linearGradient>
-    <linearGradient id="linear-gradient-10" x1="113" y1="78.8" x2="117.24" y2="58.49" gradientTransform="matrix(1, 0, 0, 1, 0, 0)" xlink:href="#linear-gradient-9"/>
-    <radialGradient id="radial-gradient-2" cx="36.09" cy="124.71" r="36.13" gradientUnits="userSpaceOnUse">
-      <stop offset="0.11" stop-color="#635d7c"/>
-      <stop offset="0.35" stop-color="#5f5876"/>
-      <stop offset="0.65" stop-color="#524a66"/>
-      <stop offset="0.98" stop-color="#3d324c"/>
-      <stop offset="1" stop-color="#3c314b"/>
-    </radialGradient>
-  </defs>
-  <title>Asset 3</title>
-  <g class="cls-1">
-    <g id="Layer_2" data-name="Layer 2">
-      <g id="Layer_1-2" data-name="Layer 1">
-        <g>
-          <path class="cls-2" d="M138.13,128.27c-4.7-9.78-11.29-21.28-9.75-33.55a15.83,15.83,0,0,1,3.26-8.26A65.12,65.12,0,0,1,114.75,99a64.1,64.1,0,0,1-6.11,2.76,66.61,66.61,0,0,0-14.35,9.42c-13.43,11.7-26.21,44.39-48.51,50.6h0a23.9,23.9,0,0,1-9.81,2c-9.41-.07-20.4-6.21-26.26-15.43C1,134.68,3.58,115.85,9.49,103.81c-.18.37-.37.74-.55,1.13a102.51,102.51,0,0,0-4.2,10.42v0A86.37,86.37,0,0,0,0,143.69c0,45.84,35.49,83,79.27,83,11.19,0,29-3.38,43.66-13.61a57.75,57.75,0,0,0,22.57-32C151.54,158.58,144.94,142.45,138.13,128.27Z"/>
-          <path class="cls-3" d="M51.46,158.37a27,27,0,0,1-5.67,3.38h0c22.3-6.21,35.07-38.9,48.51-50.6a66.61,66.61,0,0,1,14.35-9.42,58.67,58.67,0,0,1-21.26,4.09c-19.75,0-37.75-10.49-48.31-24,1,1.39,13,15.46,22.29,43.72A30,30,0,0,1,51.46,158.37Z"/>
-          <path class="cls-4" d="M145.33,59.56c-2.08,22.29-28.26,46.26-58,46.26-29.95,0-55.88-24.12-58-46.26-1.45-15.6,7.34-36,58-36S146.78,44,145.33,59.56Z"/>
-          <path class="cls-5" d="M135.36,0h0a51.59,51.59,0,0,0-4.68,32.1A37.21,37.21,0,0,1,134,34.24c10,7.23,12.12,17,11.34,25.32a35.2,35.2,0,0,1-1.6,7.61A73.45,73.45,0,0,0,142.08,12,71.18,71.18,0,0,0,135.36,0Z"/>
-          <path class="cls-6" d="M130.68,32.1A51.59,51.59,0,0,1,135.36,0h0a57.92,57.92,0,0,0-9.41,6.87,59.8,59.8,0,0,0-14,18.75q3.35.64,6.29,1.45A53.09,53.09,0,0,1,130.68,32.1Z"/>
-          <path class="cls-7" d="M39.39,0h0a51.59,51.59,0,0,1,4.68,32.1,37.21,37.21,0,0,0-3.31,2.14c-10,7.23-12.12,17-11.34,25.32A35.2,35.2,0,0,0,31,67.17,73.45,73.45,0,0,1,32.67,12,71.18,71.18,0,0,1,39.39,0Z"/>
-          <path class="cls-8" d="M48.81,6.87A57.92,57.92,0,0,0,39.39,0h0a51.59,51.59,0,0,1,4.68,32.1,53.09,53.09,0,0,1,12.45-5q2.94-.82,6.29-1.45A59.8,59.8,0,0,0,48.81,6.87Z"/>
-          <g class="cls-9">
-            <path class="cls-10" d="M84.24,182.6c-26.08,0-49.56,5.42-66,14.08,14.54,18.33,36.47,30,61,30,11.19,0,29-3.38,43.66-13.61A58.81,58.81,0,0,0,141,192.47C125.56,186.3,105.79,182.6,84.24,182.6Z"/>
-          </g>
-          <g>
-            <g class="cls-11">
-              <path class="cls-12" d="M138.51,52.94c-.56-2.94-2-5.19-5-5.88-7.88-1.85-27,9.84-37.8,15.34-4,2.06-6.16,3.05-8.34,3s-4.31-.94-8.34-3c-10.77-5.5-29.92-17.18-37.8-15.34-3,.7-4.44,2.94-5,5.88-1,5.16.35,18,9.89,27.49,7.14,7.11,16.68,10.46,24.69,12.71l.18.08a4.2,4.2,0,0,0-.09.88c0,3.28,3.83,5.94,8.56,5.94,2.34,0,6.35-.65,7.9-1.71h0c1.55,1.06,5.56,1.71,7.9,1.71,4.73,0,8.56-2.66,8.56-5.94a4.2,4.2,0,0,0-.09-.88l.18-.08c8-2.25,17.56-5.6,24.69-12.71C138.16,70.92,139.49,58.1,138.51,52.94Z"/>
-            </g>
-            <path class="cls-13" d="M75.26,75.35C64.56,86.85,47.81,77.09,45,63.28c-1.83-9.07,3.63-7.73,8.71-5.67C60.14,60.2,68.84,66.27,75.26,75.35Z"/>
-            <path class="cls-14" d="M60.43,68.26a15.16,15.16,0,0,1-2.19,8,15.56,15.56,0,0,1,0-15.92A15.16,15.16,0,0,1,60.43,68.26Z"/>
-            <path d="M87.36,86.64a8.15,8.15,0,0,0-6.27,2.49c8.25,5.17,4.31,5.17,12.55,0A8.15,8.15,0,0,0,87.36,86.64Z"/>
-            <path class="cls-15" d="M99.86,75.35c10.69,11.5,27.45,1.74,30.23-12.07,1.83-9.07-3.63-7.73-8.71-5.67C115,60.2,106.28,66.27,99.86,75.35Z"/>
-            <path class="cls-14" d="M114.69,68.26a15.16,15.16,0,0,0,2.19,8,15.56,15.56,0,0,0,0-15.92A15.16,15.16,0,0,0,114.69,68.26Z"/>
-          </g>
-          <path class="cls-16" d="M9.71,148.35c5.86,9.22,16.85,15.37,26.26,15.43a23.7,23.7,0,0,0,8.21-1.41l0,0c-15,4.18-19.32-25.16-10.92-43.06v0c1.09-3.38,2.35-6.34,3.42-8.83.37-.86,2.53-5.15,2.09-9.8-.84-9-14-17.33-24-5.37A44.52,44.52,0,0,0,9.39,104C3.55,116.06,1.08,134.76,9.71,148.35Z"/>
-        </g>
-      </g>
-    </g>
-  </g>
-</svg>
diff --git a/examples/components/side-nav.vue b/examples/components/side-nav.vue
index f25b98502..76ffa7a84 100644
--- a/examples/components/side-nav.vue
+++ b/examples/components/side-nav.vue
@@ -122,21 +122,6 @@
     :class="{ 'is-fade': isFade }"
     :style="navStyle">
     <ul>
-      <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'">
-            <a href="https://tipe.io/?ref=element" target="_blank">
-              <img src="~examples/assets/images/tipe.svg" alt="tipe.io">
-            </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
         class="nav-item"
         v-for="(item, key) in data"
diff --git a/examples/pages/template/index.tpl b/examples/pages/template/index.tpl
index 4d488464e..bacfa90cc 100644
--- a/examples/pages/template/index.tpl
+++ b/examples/pages/template/index.tpl
@@ -298,22 +298,6 @@
         <img src="~examples/assets/images/theme-index-red.png" alt="">
       </div>
     </div>
-    <div class="sponsors">
-      <a class="sponsor" href="https://tipe.io/?ref=element" target="_blank" v-show="lang !== 'zh-CN'">
-        <img width="35px" src="~examples/assets/images/tipe.svg" alt="tipe.io">
-        <div>
-          <p>Sponsored by Tipe.io</p>
-          <p>Next Generation API-first CMS</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>
-          <p>Sponsored by 多会</p>
-          <p>炫酷的新一代活动票务系统</p>
-        </div>
-      </a>
-    </div>
     <div class="cards">
       <ul class="container">
         <li>

From 985bd49fef40287203bc3d1a1154b7e086f79bab Mon Sep 17 00:00:00 2001
From: iamkun <kunhello@outlook.com>
Date: Wed, 11 Nov 2020 16:48:10 +0800
Subject: [PATCH 44/94] Popover: compatible with 2.6 new v-slot syntax (#20424)

---
 packages/popover/src/main.vue | 12 +++++++-----
 1 file changed, 7 insertions(+), 5 deletions(-)

diff --git a/packages/popover/src/main.vue b/packages/popover/src/main.vue
index 67e1e5360..ab5d06018 100644
--- a/packages/popover/src/main.vue
+++ b/packages/popover/src/main.vue
@@ -18,7 +18,9 @@
         <slot>{{ content }}</slot>
       </div>
     </transition>
-    <slot name="reference"></slot>
+    <span class="el-popover__reference-wrapper" ref="wrapper" >
+      <slot name="reference"></slot>
+    </span>
   </span>
 </template>
 <script>
@@ -87,8 +89,8 @@ export default {
     let reference = this.referenceElm = this.reference || this.$refs.reference;
     const popper = this.popper || this.$refs.popper;
 
-    if (!reference && this.$slots.reference && this.$slots.reference[0]) {
-      reference = this.referenceElm = this.$slots.reference[0].elm;
+    if (!reference && this.$refs.wrapper.children) {
+      reference = this.referenceElm = this.$refs.wrapper.children[0];
     }
     // 可访问性
     if (reference) {
@@ -192,8 +194,8 @@ export default {
       let reference = this.reference || this.$refs.reference;
       const popper = this.popper || this.$refs.popper;
 
-      if (!reference && this.$slots.reference && this.$slots.reference[0]) {
-        reference = this.referenceElm = this.$slots.reference[0].elm;
+      if (!reference && this.$refs.wrapper.children) {
+        reference = this.referenceElm = this.$refs.wrapper.children[0];
       }
       if (!this.$el ||
         !reference ||

From 5ce89b8e00642f58f0e1942c20782d9b17276673 Mon Sep 17 00:00:00 2001
From: IlhamTahir <yili@howzhi.com>
Date: Wed, 11 Nov 2020 16:49:13 +0800
Subject: [PATCH 45/94] i18n: Update Uighur locale (#20177)

---
 src/locale/lang/ug-CN.js | 8 ++++----
 1 file changed, 4 insertions(+), 4 deletions(-)

diff --git a/src/locale/lang/ug-CN.js b/src/locale/lang/ug-CN.js
index f76a64a64..e12f181f9 100644
--- a/src/locale/lang/ug-CN.js
+++ b/src/locale/lang/ug-CN.js
@@ -107,14 +107,14 @@ export default {
       hasCheckedFormat: 'تاللانغىنى {checked}/{total} تۈر'
     },
     image: {
-      error: 'FAILED' // to be translated
+      error: 'مەغلۇب بولدى'
     },
     pageHeader: {
-      title: 'Back' // to be translated
+      title: 'قايتىش'
     },
     popconfirm: {
-      confirmButtonText: 'Yes', // to be translated
-      cancelButtonText: 'No' // to be translated
+      confirmButtonText: 'ھەئە',
+      cancelButtonText: 'ياق'
     }
   }
 };

From 31286d724b33f5e429b7366037fa6f49b741bdb3 Mon Sep 17 00:00:00 2001
From: iamkun <kunhello@outlook.com>
Date: Wed, 11 Nov 2020 17:34:02 +0800
Subject: [PATCH 46/94] chore: update changelog (#20427)

---
 CHANGELOG.en-US.md | 17 ++++++++++++++++-
 CHANGELOG.es.md    | 17 ++++++++++++++++-
 CHANGELOG.fr-FR.md | 17 ++++++++++++++++-
 CHANGELOG.zh-CN.md | 17 ++++++++++++++++-
 4 files changed, 64 insertions(+), 4 deletions(-)

diff --git a/CHANGELOG.en-US.md b/CHANGELOG.en-US.md
index b0b741b1e..efef2f07e 100644
--- a/CHANGELOG.en-US.md
+++ b/CHANGELOG.en-US.md
@@ -1,5 +1,20 @@
 ## Changelog
 
+### 2.14.1
+
+*2020-11-11*
+
+#### Bug fixes
+
+- Popover
+  - Compatible with Vue 2.6 new v-slot syntax (#20424 by @iamkun)
+
+#### Optimization
+
+- I18n
+  - Update Arabic translation (#20202 by @elkattan)
+  - Update Uighur translation (#20177 by @IlhamTahir)
+
 ### 2.14.0
 
 *2020-10-29*
@@ -7,7 +22,7 @@
 #### Breaking changes
 
 - Popconfirm
-  - Rename event name to `confirm`, `cancel` (#20240 by @hugiron)"
+  - Rename event name to `confirm`, `cancel` (#20240 by @hugiron)
 
 #### Bug fixes
 
diff --git a/CHANGELOG.es.md b/CHANGELOG.es.md
index 697efd57b..cfc25dc98 100644
--- a/CHANGELOG.es.md
+++ b/CHANGELOG.es.md
@@ -1,5 +1,20 @@
 ## Changelog
 
+### 2.14.1
+
+*2020-11-11*
+
+#### Bug fixes
+
+- Popover
+  - Compatible with Vue 2.6 new v-slot syntax (#20424 by @iamkun)
+
+#### Optimization
+
+- I18n
+  - Update Arabic translation (#20202 by @elkattan)
+  - Update Uighur translation (#20177 by @IlhamTahir)
+
 ### 2.14.0
 
 *2020-10-29*
@@ -7,7 +22,7 @@
 #### Breaking changes
 
 - Popconfirm
-  - Rename event name to `confirm`, `cancel` (#20240 by @hugiron)"
+  - Rename event name to `confirm`, `cancel` (#20240 by @hugiron)
 
 #### Bug fixes
 
diff --git a/CHANGELOG.fr-FR.md b/CHANGELOG.fr-FR.md
index d2cda59bd..1d42848db 100644
--- a/CHANGELOG.fr-FR.md
+++ b/CHANGELOG.fr-FR.md
@@ -1,5 +1,20 @@
 ## Changelog
 
+### 2.14.1
+
+*2020-11-11*
+
+#### Bug fixes
+
+- Popover
+  - Compatible with Vue 2.6 new v-slot syntax (#20424 by @iamkun)
+
+#### Optimization
+
+- I18n
+  - Update Arabic translation (#20202 by @elkattan)
+  - Update Uighur translation (#20177 by @IlhamTahir)
+
 ### 2.14.0
 
 *2020-10-29*
@@ -7,7 +22,7 @@
 #### Breaking changes
 
 - Popconfirm
-  - Rename event name to `confirm`, `cancel` (#20240 by @hugiron)"
+  - Rename event name to `confirm`, `cancel` (#20240 by @hugiron)
 
 #### Bug fixes
 
diff --git a/CHANGELOG.zh-CN.md b/CHANGELOG.zh-CN.md
index c29880c55..89b19e446 100644
--- a/CHANGELOG.zh-CN.md
+++ b/CHANGELOG.zh-CN.md
@@ -1,5 +1,20 @@
 ## 更新日志
 
+### 2.14.1
+
+*2020-11-11*
+
+#### Bug 修复
+
+- Popover
+  - 兼容 Vue 2.6 新 v-slot 语法 (#20424 by @iamkun)
+
+#### 优化
+
+- I18n
+  - 更新阿拉伯语翻译 (#20202 by @elkattan)
+  - 更新维吾尔语翻译 (#20177 by @IlhamTahir)
+
 ### 2.14.0
 
 *2020-10-29*
@@ -7,7 +22,7 @@
 #### 非兼容性更新
 
 - Popconfirm
-  - 事件名称修改为 `confirm`, `cancel` (#20240 by @hugiron)"
+  - 事件名称修改为 `confirm`, `cancel` (#20240 by @hugiron)
 
 #### Bug 修复
 

From deb41057d1fce7aa6391b1240aebd1ac5a0bcc8e Mon Sep 17 00:00:00 2001
From: iamkun <kunhello@outlook.com>
Date: Wed, 11 Nov 2020 18:05:39 +0800
Subject: [PATCH 47/94] [build] 2.14.1

---
 examples/versions.json            | 2 +-
 packages/theme-chalk/package.json | 2 +-
 src/index.js                      | 2 +-
 3 files changed, 3 insertions(+), 3 deletions(-)

diff --git a/examples/versions.json b/examples/versions.json
index 0ee0ed995..05fb9b684 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","2.5.4":"2.5","2.6.3":"2.6","2.7.2":"2.7","2.8.2":"2.8","2.9.2":"2.9","2.10.1":"2.10","2.11.1":"2.11","2.12.0":"2.12","2.13.2":"2.13","2.14.0":"2.14"}
\ No newline at end of file
+{"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","2.5.4":"2.5","2.6.3":"2.6","2.7.2":"2.7","2.8.2":"2.8","2.9.2":"2.9","2.10.1":"2.10","2.11.1":"2.11","2.12.0":"2.12","2.13.2":"2.13","2.14.1":"2.14"}
\ No newline at end of file
diff --git a/packages/theme-chalk/package.json b/packages/theme-chalk/package.json
index fa76542ba..2da31c3a3 100644
--- a/packages/theme-chalk/package.json
+++ b/packages/theme-chalk/package.json
@@ -1,6 +1,6 @@
 {
   "name": "element-theme-chalk",
-  "version": "2.14.0",
+  "version": "2.14.1",
   "description": "Element component chalk theme.",
   "main": "lib/index.css",
   "style": "lib/index.css",
diff --git a/src/index.js b/src/index.js
index f58dfaed8..3dac27586 100644
--- a/src/index.js
+++ b/src/index.js
@@ -198,7 +198,7 @@ if (typeof window !== 'undefined' && window.Vue) {
 }
 
 export default {
-  version: '2.14.0',
+  version: '2.14.1',
   locale: locale.use,
   i18n: locale.i18n,
   install,

From 04981518db014dfb5eff04063f420bf6ef94cc95 Mon Sep 17 00:00:00 2001
From: iamkun <kunhello@outlook.com>
Date: Wed, 11 Nov 2020 18:05:40 +0800
Subject: [PATCH 48/94] [release] 2.14.1

---
 package.json | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/package.json b/package.json
index e0fabc51d..7390afa88 100644
--- a/package.json
+++ b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "element-ui",
-  "version": "2.14.0",
+  "version": "2.14.1",
   "description": "A Component Library for Vue.js.",
   "main": "lib/element-ui.common.js",
   "files": [

From a2683e975e705b2c1adf1e5d3b52d2fa679c13ee Mon Sep 17 00:00:00 2001
From: iamkun <kunhello@outlook.com>
Date: Thu, 12 Nov 2020 15:08:16 +0800
Subject: [PATCH 49/94] Update faas config

---
 build/deploy-faas.sh | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/build/deploy-faas.sh b/build/deploy-faas.sh
index 753415859..fe17136d0 100644
--- a/build/deploy-faas.sh
+++ b/build/deploy-faas.sh
@@ -15,5 +15,5 @@ cp -rf ../../examples/element-ui/** $SUB_FOLDER/
 cd ../..
 
 # deploy domestic site
-faas deploy alpha -P element
+faas deploy daily -P element
 rm -rf temp_web

From 3ceec7aa6a7ab46e61dbafa4c68b77ba09384b40 Mon Sep 17 00:00:00 2001
From: iamkun <kunhello@outlook.com>
Date: Sat, 19 Dec 2020 01:40:41 +0800
Subject: [PATCH 50/94] chore: update issue template (#20588)

---
 .github/ISSUE_TEMPLATE/config.yml | 5 +++++
 1 file changed, 5 insertions(+)
 create mode 100644 .github/ISSUE_TEMPLATE/config.yml

diff --git a/.github/ISSUE_TEMPLATE/config.yml b/.github/ISSUE_TEMPLATE/config.yml
new file mode 100644
index 000000000..149bb4e4c
--- /dev/null
+++ b/.github/ISSUE_TEMPLATE/config.yml
@@ -0,0 +1,5 @@
+blank_issues_enabled: true
+contact_links:
+  - name: Create new issue
+    url: https://elementui.github.io/issue-generator
+    about: The issue which is not created via https://elementui.github.io/issue-generator will be closed immediately.

From 7e22785a5861450d968024916c284f4a445543bf Mon Sep 17 00:00:00 2001
From: nzh63 <nzh21@outlook.com>
Date: Sun, 27 Dec 2020 19:39:28 +0800
Subject: [PATCH 51/94] Select: fix placeholder i18n bug (#17644)

---
 packages/select/src/select.vue | 12 ++++++------
 1 file changed, 6 insertions(+), 6 deletions(-)

diff --git a/packages/select/src/select.vue b/packages/select/src/select.vue
index 5365991c8..af8be3584 100644
--- a/packages/select/src/select.vue
+++ b/packages/select/src/select.vue
@@ -145,7 +145,6 @@
   import debounce from 'throttle-debounce/debounce';
   import Clickoutside from 'element-ui/src/utils/clickoutside';
   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, valueEquals, isIE, isEdge } from 'element-ui/src/utils/util';
   import NavigationMixin from './navigation-mixin';
@@ -235,6 +234,9 @@
         return ['small', 'mini'].indexOf(this.selectSize) > -1
           ? 'mini'
           : 'small';
+      },
+      propPlaceholder() {
+        return typeof this.placeholder !== 'undefined' ? this.placeholder : this.t('el.select.placeholder');
       }
     },
 
@@ -288,9 +290,7 @@
       },
       placeholder: {
         type: String,
-        default() {
-          return t('el.select.placeholder');
-        }
+        required: false
       },
       defaultFirstOption: Boolean,
       reserveKeyword: Boolean,
@@ -339,7 +339,7 @@
         });
       },
 
-      placeholder(val) {
+      propPlaceholder(val) {
         this.cachedPlaceHolder = this.currentPlaceholder = val;
       },
 
@@ -838,7 +838,7 @@
     },
 
     created() {
-      this.cachedPlaceHolder = this.currentPlaceholder = this.placeholder;
+      this.cachedPlaceHolder = this.currentPlaceholder = this.propPlaceholder;
       if (this.multiple && !Array.isArray(this.value)) {
         this.$emit('input', []);
       }

From e2e63e698f8ceae3795aa25a41756414a8feb7a8 Mon Sep 17 00:00:00 2001
From: iamkun <kunhello@outlook.com>
Date: Sun, 27 Dec 2020 19:40:01 +0800
Subject: [PATCH 52/94] fix: fix Popconfirm i18n bug

---
 packages/popconfirm/src/main.vue | 18 ++++++++++++------
 1 file changed, 12 insertions(+), 6 deletions(-)

diff --git a/packages/popconfirm/src/main.vue b/packages/popconfirm/src/main.vue
index 574362ec5..8e2c991bf 100644
--- a/packages/popconfirm/src/main.vue
+++ b/packages/popconfirm/src/main.vue
@@ -20,14 +20,14 @@
         :type="cancelButtonType" 
         @click="cancel"
       >
-        {{cancelButtonText}}
+        {{ displayCancelButtonText }}
       </el-button>
       <el-button 
         size="mini" 
         :type="confirmButtonType" 
         @click="confirm"
       >
-        {{confirmButtonText}}
+        {{ displayConfirmButtonText }}
       </el-button>
     </div>
   </div>
@@ -47,12 +47,10 @@ export default {
       type: String
     },
     confirmButtonText: {
-      type: String,
-      default: t('el.popconfirm.confirmButtonText')
+      type: String
     },
     cancelButtonText: {
-      type: String,
-      default: t('el.popconfirm.cancelButtonText')
+      type: String
     },
     confirmButtonType: {
       type: String,
@@ -84,6 +82,14 @@ export default {
       visible: false
     };
   },
+  computed: {
+    displayConfirmButtonText() {
+      return this.confirmButtonText || t('el.popconfirm.confirmButtonText')
+    },
+    displayCancelButtonText() {
+      return this.cancelButtonText || t('el.popconfirm.cancelButtonText')
+    }
+  },
   methods: {
     confirm() {
       this.visible = false;

From 127dfadb6aeeb5b1d24a3c5128e0aa74afd3b575 Mon Sep 17 00:00:00 2001
From: Lucas Soulier <lucas@buckless.com>
Date: Tue, 29 Dec 2020 04:13:23 +0100
Subject: [PATCH 53/94] docs: fix typo in french translation of
 datetime-picker.md (#20543)

---
 examples/docs/fr-FR/datetime-picker.md | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/examples/docs/fr-FR/datetime-picker.md b/examples/docs/fr-FR/datetime-picker.md
index 64609219e..cae6139ad 100644
--- a/examples/docs/fr-FR/datetime-picker.md
+++ b/examples/docs/fr-FR/datetime-picker.md
@@ -46,7 +46,7 @@ DateTimePicker est dérivé de DatePicker et TimePicker. Pour plus d'information
       return {
         pickerOptions: {
           shortcuts: [{
-            text: 'Aujourdh\'ui',
+            text: 'Aujourd\'hui',
             onClick(picker) {
               picker.$emit('pick', new Date());
             }

From 3d7c3d71df74505e1cc8aa538fdf21217863be14 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E5=A5=BD=E5=A4=9A=E5=A4=A7=E7=B1=B3?= <lost1q84@gmail.com>
Date: Wed, 30 Dec 2020 13:25:23 +0800
Subject: [PATCH 54/94] Drawer: fix focus bug (#20626)

Co-authored-by: wp178491 <wp178491@alibaba-inc.com>
---
 packages/drawer/src/main.vue         | 6 +-----
 packages/theme-chalk/src/drawer.scss | 1 +
 2 files changed, 2 insertions(+), 5 deletions(-)

diff --git a/packages/drawer/src/main.vue b/packages/drawer/src/main.vue
index a378194df..275a390b5 100644
--- a/packages/drawer/src/main.vue
+++ b/packages/drawer/src/main.vue
@@ -26,7 +26,7 @@
           >
           <header class="el-drawer__header" id="el-drawer__title" v-if="withHeader">
             <slot name="title">
-              <span role="heading" tabindex="0" :title="title">{{ title }}</span>
+              <span role="heading" :title="title">{{ title }}</span>
             </slot>
             <button
               :aria-label="`close ${title || 'drawer'}`"
@@ -49,7 +49,6 @@
 <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',
@@ -133,9 +132,6 @@ export default {
           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(() => {
diff --git a/packages/theme-chalk/src/drawer.scss b/packages/theme-chalk/src/drawer.scss
index 9e03a1d66..8e13f35b8 100644
--- a/packages/theme-chalk/src/drawer.scss
+++ b/packages/theme-chalk/src/drawer.scss
@@ -119,6 +119,7 @@ $directions: rtl, ltr, ttb, btt;
   0 16px 24px 2px rgba(0, 0, 0, 0.14),
   0 6px 30px 5px rgba(0, 0, 0, 0.12);
   overflow: hidden;
+  outline: 0;
 
   @each $direction in $directions {
     @include animation-out($direction);

From d216a252f3c2b71f2e968c00e6e4fcc31c5bddee Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E5=A5=BD=E5=A4=9A=E5=A4=A7=E7=B1=B3?= <lost1q84@gmail.com>
Date: Mon, 4 Jan 2021 14:20:42 +0800
Subject: [PATCH 55/94] Docs: add format attribute description to the progress
 component (#20641)

---
 examples/docs/en-US/progress.md | 3 ++-
 examples/docs/es/progress.md    | 3 ++-
 examples/docs/fr-FR/progress.md | 5 +++--
 examples/docs/zh-CN/progress.md | 3 ++-
 4 files changed, 9 insertions(+), 5 deletions(-)

diff --git a/examples/docs/en-US/progress.md b/examples/docs/en-US/progress.md
index c8b552ee6..bba04431d 100644
--- a/examples/docs/en-US/progress.md
+++ b/examples/docs/en-US/progress.md
@@ -170,4 +170,5 @@ You also can specify `type` attribute to `dashboard` to use dashboard progress b
 | 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
+| stroke-linecap  | circle/dashboard type shape at the end path | string | butt/round/square | round |
+| format  | custom text format  | function(percentage) | — | — |
\ No newline at end of file
diff --git a/examples/docs/es/progress.md b/examples/docs/es/progress.md
index bd7e23d89..8ecc119c6 100644
--- a/examples/docs/es/progress.md
+++ b/examples/docs/es/progress.md
@@ -168,4 +168,5 @@ Puede utilizar el atributo `color` para establecer el color de la barra de progr
 | color        | color de fondo de la barra de progreso. Sobrescribe 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 tipo de diseño al final del camino | string | butt/round/square | round |
\ No newline at end of file
+| stroke-linecap  | circle/dashboard tipo de diseño al final del camino | string | butt/round/square | round |
+| format  | personalizar el formato de texto estableciendo format  | function(percentage) | — | — |
\ No newline at end of file
diff --git a/examples/docs/fr-FR/progress.md b/examples/docs/fr-FR/progress.md
index b7bf96ecb..347eb44d9 100644
--- a/examples/docs/fr-FR/progress.md
+++ b/examples/docs/fr-FR/progress.md
@@ -4,7 +4,7 @@ Progress est utilisé pour afficher la progression d'une opération et informer
 
 ### 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`.
+:::demo Utilisez l'attribut `percentage` pour indiquer le pourcentage. Cet attribut est **requis** et doit être compris entre 0 et 100. Vous pouvez personnaliser le format du texte en définissant le `format`.
 ```html
 <el-progress :percentage="50"></el-progress>
 <el-progress :percentage="100" :format="format"></el-progress>
@@ -171,4 +171,5 @@ Vous pouvez également spécifier l'attribut `type` de `dashboard` pour utiliser
 | 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
+| stroke-linecap  | circle/dashboard type shape at the end path | string | butt/round/square | round |
+| format  | Vous pouvez personnaliser le format du texte en définissant le format  | function(percentage) | — | — |
\ No newline at end of file
diff --git a/examples/docs/zh-CN/progress.md b/examples/docs/zh-CN/progress.md
index b2ac24897..c3e916d13 100644
--- a/examples/docs/zh-CN/progress.md
+++ b/examples/docs/zh-CN/progress.md
@@ -174,4 +174,5 @@ Progress 组件可通过 `type` 属性来指定使用环形进度条，在环形
 | 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
+| stroke-linecap  | circle/dashboard 类型路径两端的形状 | string | butt/round/square | round |
+| format  | 指定进度条文字内容 | function(percentage) | — | — |
\ No newline at end of file

From 188605c383638909caf7e5975448de51d86c20c9 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E5=A5=BD=E5=A4=9A=E5=A4=A7=E7=B1=B3?= <lost1q84@gmail.com>
Date: Fri, 15 Jan 2021 16:49:44 +0800
Subject: [PATCH 56/94] Image: preview optimization (#20652)

---
 packages/image/src/image-viewer.vue | 26 ++++++++++++++++++++++++--
 packages/popconfirm/src/main.vue    |  4 ++--
 packages/theme-chalk/src/image.scss |  4 +++-
 test/unit/specs/image.spec.js       |  6 +++---
 4 files changed, 32 insertions(+), 8 deletions(-)

diff --git a/packages/image/src/image-viewer.vue b/packages/image/src/image-viewer.vue
index c3fc33c08..dc5d13867 100644
--- a/packages/image/src/image-viewer.vue
+++ b/packages/image/src/image-viewer.vue
@@ -1,10 +1,10 @@
 <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>
+      <div class="el-image-viewer__mask" @click.self="handleMaskClick"></div>
       <!-- CLOSE -->
       <span class="el-image-viewer__btn el-image-viewer__close" @click="hide">
-        <i class="el-icon-circle-close"></i>
+        <i class="el-icon-close"></i>
       </span>
       <!-- ARROW -->
       <template v-if="!isSingle">
@@ -91,6 +91,14 @@ export default {
     initialIndex: {
       type: Number,
       default: 0
+    },
+    appendToBody: {
+      type: Boolean,
+      default: true
+    },
+    maskClosable: {
+      type: Boolean,
+      default: true
     }
   },
 
@@ -235,6 +243,11 @@ export default {
 
       e.preventDefault();
     },
+    handleMaskClick() {
+      if (this.maskClosable) {
+        this.hide();
+      }
+    },
     reset() {
       this.transform = {
         scale: 1,
@@ -294,9 +307,18 @@ export default {
   },
   mounted() {
     this.deviceSupportInstall();
+    if (this.appendToBody) {
+      document.body.appendChild(this.$el);
+    }
     // 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();
+  },
+  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/popconfirm/src/main.vue b/packages/popconfirm/src/main.vue
index 8e2c991bf..aabb6a200 100644
--- a/packages/popconfirm/src/main.vue
+++ b/packages/popconfirm/src/main.vue
@@ -84,10 +84,10 @@ export default {
   },
   computed: {
     displayConfirmButtonText() {
-      return this.confirmButtonText || t('el.popconfirm.confirmButtonText')
+      return this.confirmButtonText || t('el.popconfirm.confirmButtonText');
     },
     displayCancelButtonText() {
-      return this.cancelButtonText || t('el.popconfirm.cancelButtonText')
+      return this.cancelButtonText || t('el.popconfirm.cancelButtonText');
     }
   },
   methods: {
diff --git a/packages/theme-chalk/src/image.scss b/packages/theme-chalk/src/image.scss
index 96fd66091..39358e6b2 100644
--- a/packages/theme-chalk/src/image.scss
+++ b/packages/theme-chalk/src/image.scss
@@ -75,7 +75,9 @@
     right: 40px;
     width: 40px;
     height: 40px;
-    font-size: 40px;
+    font-size: 24px;
+    color: #fff;
+    background-color: #606266;
   }
 
   @include e(canvas) {
diff --git a/test/unit/specs/image.spec.js b/test/unit/specs/image.spec.js
index cb5f362f9..77624df09 100644
--- a/test/unit/specs/image.spec.js
+++ b/test/unit/specs/image.spec.js
@@ -128,10 +128,10 @@ describe('Image', () => {
     vm.$el.querySelector('.el-image__inner').click();
     await wait();
 
-    expect(vm.$el.querySelector('.el-image-viewer__wrapper')).to.exist;
-    vm.$el.querySelector('.el-image-viewer__close').click();
+    expect(document.querySelector('.el-image-viewer__wrapper')).to.exist;
+    document.querySelector('.el-image-viewer__close').click();
     await wait(1000);
-    expect(vm.$el.querySelector('.el-image-viewer__wrapper')).to.not.exist;
+    expect(document.querySelector('.el-image-viewer__wrapper')).to.not.exist;
   });
 });
 

From 9eb0a3d55a6f17378b1c33655e2ad5568fd4e9c1 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E5=A5=BD=E5=A4=9A=E5=A4=A7=E7=B1=B3?= <lost1q84@gmail.com>
Date: Fri, 15 Jan 2021 19:58:14 +0800
Subject: [PATCH 57/94] feat: add change log 2.15.0 (#20692)

---
 CHANGELOG.en-US.md   | 21 +++++++++++++++++++++
 CHANGELOG.es.md      | 20 ++++++++++++++++++++
 CHANGELOG.fr-FR.md   | 21 +++++++++++++++++++++
 CHANGELOG.zh-CN.md   | 21 +++++++++++++++++++++
 build/bin/version.js |  4 ++--
 build/deploy-ci.sh   |  2 +-
 build/deploy-faas.sh |  2 +-
 package.json         |  2 +-
 8 files changed, 88 insertions(+), 5 deletions(-)

diff --git a/CHANGELOG.en-US.md b/CHANGELOG.en-US.md
index efef2f07e..d6c17429b 100644
--- a/CHANGELOG.en-US.md
+++ b/CHANGELOG.en-US.md
@@ -1,5 +1,26 @@
 ## Changelog
 
+### 2.15.0
+
+*2021-01-15*
+
+#### Bug fixes
+
+- Select
+  - Fix placeholder i18n bug (#17644 by @nzh63)
+- Popconfirm
+  - Popconfirm i18n bug by @iamkun)
+- Drawer
+  - Fix focus bug (#20626 by @cs1707)
+- Image
+  - Preview optimization (#20652 by @cs1707)
+
+#### Optimization
+
+- Doc
+  - Fix typo in french translation of datetime-picker.md (#20543 by @lonk)
+  - Add format attribute description to the progress component (#20641 by @cs1707)
+
 ### 2.14.1
 
 *2020-11-11*
diff --git a/CHANGELOG.es.md b/CHANGELOG.es.md
index cfc25dc98..8915a2c54 100644
--- a/CHANGELOG.es.md
+++ b/CHANGELOG.es.md
@@ -1,4 +1,24 @@
 ## Changelog
+### 2.15.0
+
+*2021-01-15*
+
+#### Bug fixes
+
+- Select
+  - Fix placeholder i18n bug (#17644 by @nzh63)
+- Popconfirm
+  - Popconfirm i18n bug by @iamkun
+- Drawer
+  - Fix focus bug (#20626 by @cs1707)
+- Image
+  - Preview optimization (#20652 by @cs1707)
+
+#### Optimization
+
+- Doc
+  - Fix typo in french translation of datetime-picker.md (#20543 by @lonk)
+  - Add format attribute description to the progress component (#20641 by @cs1707)
 
 ### 2.14.1
 
diff --git a/CHANGELOG.fr-FR.md b/CHANGELOG.fr-FR.md
index 1d42848db..de4eec251 100644
--- a/CHANGELOG.fr-FR.md
+++ b/CHANGELOG.fr-FR.md
@@ -1,5 +1,26 @@
 ## Changelog
 
+### 2.15.0
+
+*2021-01-15*
+
+#### Bug fixes
+
+- Select
+  - Fix placeholder i18n bug (#17644 by @nzh63)
+- Popconfirm
+  - Popconfirm i18n bug by @iamkun
+- Drawer
+  - Fix focus bug (#20626 by @cs1707)
+- Image
+  - Preview optimization (#20652 by @cs1707)
+
+#### Optimization
+
+- Doc
+  - Fix typo in french translation of datetime-picker.md (#20543 by @lonk)
+  - Add format attribute description to the progress component (#20641 by @cs1707)
+
 ### 2.14.1
 
 *2020-11-11*
diff --git a/CHANGELOG.zh-CN.md b/CHANGELOG.zh-CN.md
index 89b19e446..811fe8713 100644
--- a/CHANGELOG.zh-CN.md
+++ b/CHANGELOG.zh-CN.md
@@ -1,5 +1,26 @@
 ## 更新日志
 
+### 2.15.0
+
+*2021-01-15*
+
+#### Bug 修复
+
+- Select
+  - 修复 placeholder 国际化 bug (#17644 by @nzh63)
+- Popconfirm
+  - 修复 Popconfirm 国际化 bug by @iamkun
+- Drawer
+  - 修复 focus bug (#20626 by @cs1707)
+- Image
+  - 图片预览优化 (#20652 by @cs1707)
+
+#### 优化
+
+- Doc
+  - 更新法语文档 datetime-picker.md (#20543 by @lonk)
+  - 更新 Progress 组件文档 (#20641 by @cs1707)
+
 ### 2.14.1
 
 *2020-11-11*
diff --git a/build/bin/version.js b/build/bin/version.js
index e11970b84..94584b78e 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', '2.4.11': '2.4', '2.5.4': '2.5', '2.6.3': '2.6', '2.7.2': '2.7', '2.8.2': '2.8', '2.9.2': '2.9', '2.10.1': '2.10', '2.11.1': '2.11', '2.12.0': '2.12', '2.13.2': '2.13' };
-if (!content[version]) content[version] = '2.14';
+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', '2.4.11': '2.4', '2.5.4': '2.5', '2.6.3': '2.6', '2.7.2': '2.7', '2.8.2': '2.8', '2.9.2': '2.9', '2.10.1': '2.10', '2.11.1': '2.11', '2.12.0': '2.12', '2.13.2': '2.13', '2.14.1': '2.14' };
+if (!content[version]) content[version] = '2.15';
 fs.writeFileSync(path.resolve(__dirname, '../../examples/versions.json'), JSON.stringify(content));
diff --git a/build/deploy-ci.sh b/build/deploy-ci.sh
index 34549b11d..cf76f0df5 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.14'
+  SUB_FOLDER='2.15'
   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 fe17136d0..699bcf8d4 100644
--- a/build/deploy-faas.sh
+++ b/build/deploy-faas.sh
@@ -6,7 +6,7 @@ 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.14'
+SUB_FOLDER='2.15'
 mkdir -p $SUB_FOLDER
 rm -rf *.js *.css *.map static
 rm -rf $SUB_FOLDER/**
diff --git a/package.json b/package.json
index 7390afa88..ca261266f 100644
--- a/package.json
+++ b/package.json
@@ -25,7 +25,7 @@
     "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",
     "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",
+    "pub": "npm run bootstrap && sh build/git-release.sh && sh build/release.sh && node build/bin/gen-indices.js",
     "test": "npm run lint && 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"
   },

From 6569ae273895ceea6e13c8a80ad7d8bba0989a64 Mon Sep 17 00:00:00 2001
From: cs1707 <lost1q84@gmail.com>
Date: Fri, 15 Jan 2021 20:03:42 +0800
Subject: [PATCH 58/94] [build] 2.15.0

---
 examples/versions.json            | 2 +-
 packages/theme-chalk/package.json | 2 +-
 src/index.js                      | 2 +-
 3 files changed, 3 insertions(+), 3 deletions(-)

diff --git a/examples/versions.json b/examples/versions.json
index 05fb9b684..a9dad046f 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","2.5.4":"2.5","2.6.3":"2.6","2.7.2":"2.7","2.8.2":"2.8","2.9.2":"2.9","2.10.1":"2.10","2.11.1":"2.11","2.12.0":"2.12","2.13.2":"2.13","2.14.1":"2.14"}
\ No newline at end of file
+{"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","2.5.4":"2.5","2.6.3":"2.6","2.7.2":"2.7","2.8.2":"2.8","2.9.2":"2.9","2.10.1":"2.10","2.11.1":"2.11","2.12.0":"2.12","2.13.2":"2.13","2.14.1":"2.14","2.15.0":"2.15"}
\ No newline at end of file
diff --git a/packages/theme-chalk/package.json b/packages/theme-chalk/package.json
index 2da31c3a3..eaf26e07d 100644
--- a/packages/theme-chalk/package.json
+++ b/packages/theme-chalk/package.json
@@ -1,6 +1,6 @@
 {
   "name": "element-theme-chalk",
-  "version": "2.14.1",
+  "version": "2.15.0",
   "description": "Element component chalk theme.",
   "main": "lib/index.css",
   "style": "lib/index.css",
diff --git a/src/index.js b/src/index.js
index 3dac27586..e20375b86 100644
--- a/src/index.js
+++ b/src/index.js
@@ -198,7 +198,7 @@ if (typeof window !== 'undefined' && window.Vue) {
 }
 
 export default {
-  version: '2.14.1',
+  version: '2.15.0',
   locale: locale.use,
   i18n: locale.i18n,
   install,

From b4efaa3d87049ca2ee38daa06a740359a7e35d5e Mon Sep 17 00:00:00 2001
From: cs1707 <lost1q84@gmail.com>
Date: Fri, 15 Jan 2021 20:03:43 +0800
Subject: [PATCH 59/94] [release] 2.15.0

---
 package.json | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/package.json b/package.json
index ca261266f..fd659c27b 100644
--- a/package.json
+++ b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "element-ui",
-  "version": "2.14.1",
+  "version": "2.15.0",
   "description": "A Component Library for Vue.js.",
   "main": "lib/element-ui.common.js",
   "files": [

From 18cf34f7b5692292c69ab6fbb7201fec528f0e5e Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E5=A5=BD=E5=A4=9A=E5=A4=A7=E7=B1=B3?= <lost1q84@gmail.com>
Date: Fri, 22 Jan 2021 18:01:34 +0800
Subject: [PATCH 60/94] fix(Drawer): fix size number bug (#20718)

---
 packages/drawer/src/main.vue | 7 +++++--
 1 file changed, 5 insertions(+), 2 deletions(-)

diff --git a/packages/drawer/src/main.vue b/packages/drawer/src/main.vue
index 275a390b5..87874f2c7 100644
--- a/packages/drawer/src/main.vue
+++ b/packages/drawer/src/main.vue
@@ -19,7 +19,7 @@
           :aria-label="title"
           class="el-drawer"
           :class="[direction, customClass]"
-          :style="isHorizontal ? `width: ${size}` : `height: ${size}`"
+          :style="isHorizontal ? `width: ${drawerSize}` : `height: ${drawerSize}`"
           ref="drawer"
           role="dialog"
           tabindex="-1"
@@ -93,7 +93,7 @@ export default {
       default: true
     },
     size: {
-      type: String,
+      type: [Number, String],
       default: '30%'
     },
     title: {
@@ -115,6 +115,9 @@ export default {
   computed: {
     isHorizontal() {
       return this.direction === 'rtl' || this.direction === 'ltr';
+    },
+    drawerSize() {
+      return typeof this.size === 'number' ? `${this.size}px` : this.size;
     }
   },
   data() {

From 493e18877add7be49ce2c02683a3a4ec7e7d2c3b Mon Sep 17 00:00:00 2001
From: charlie0228 <charlie800228@gmail.com>
Date: Mon, 25 Jan 2021 13:16:05 +0800
Subject: [PATCH 61/94] fix: fix incorrect image object fit ratio in IE
 (#19583)

---
 packages/image/src/main.vue | 7 ++++---
 1 file changed, 4 insertions(+), 3 deletions(-)

diff --git a/packages/image/src/main.vue b/packages/image/src/main.vue
index 0cad4e0ac..5598bde8a 100644
--- a/packages/image/src/main.vue
+++ b/packages/image/src/main.vue
@@ -204,7 +204,8 @@
 
         if (!imageWidth || !imageHeight || !containerWidth || !containerHeight) return {};
 
-        const vertical = imageWidth / imageHeight < 1;
+        const imageAspectRatio = imageWidth / imageHeight;
+        const containerAspectRatio = containerWidth / containerHeight;
 
         if (fit === ObjectFit.SCALE_DOWN) {
           const isSmaller = imageWidth < containerWidth && imageHeight < containerHeight;
@@ -215,9 +216,9 @@
           case ObjectFit.NONE:
             return { width: 'auto', height: 'auto' };
           case ObjectFit.CONTAIN:
-            return vertical ? { width: 'auto' } : { height: 'auto' };
+            return (imageAspectRatio < containerAspectRatio) ? { width: 'auto' } : { height: 'auto' };
           case ObjectFit.COVER:
-            return vertical ? { height: 'auto' } : { width: 'auto' };
+            return (imageAspectRatio < containerAspectRatio) ? { height: 'auto' } : { width: 'auto' };
           default:
             return {};
         }

From c323890ba44cde08df983167e9cd9d3de09339a2 Mon Sep 17 00:00:00 2001
From: iamkun <kunhello@outlook.com>
Date: Sun, 31 Jan 2021 12:27:44 +0800
Subject: [PATCH 62/94] chore: update Axure resource v2.1.0

---
 examples/pages/template/resource.tpl | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/examples/pages/template/resource.tpl b/examples/pages/template/resource.tpl
index 2b1cbaea8..8999f6435 100644
--- a/examples/pages/template/resource.tpl
+++ b/examples/pages/template/resource.tpl
@@ -144,7 +144,7 @@
             <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"
+              href="https://github.com/ElementUI/Resources/raw/master/Element_Components_v2.1.0.rplib"
             ><%= 5 ></a>
           </div>
         </li>

From cea8c8c79247dfa3ddd520e6c221492e8a692c0a Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E5=A5=BD=E5=A4=9A=E5=A4=A7=E7=B1=B3?= <lost1q84@gmail.com>
Date: Tue, 2 Feb 2021 21:15:32 +0800
Subject: [PATCH 63/94] Cascader: fix cascader panel active path (#20730)

---
 packages/cascader-panel/src/cascader-panel.vue | 1 +
 1 file changed, 1 insertion(+)

diff --git a/packages/cascader-panel/src/cascader-panel.vue b/packages/cascader-panel/src/cascader-panel.vue
index 1d8041667..d3fe6fb81 100644
--- a/packages/cascader-panel/src/cascader-panel.vue
+++ b/packages/cascader-panel/src/cascader-panel.vue
@@ -176,6 +176,7 @@ export default {
     syncCheckedValue() {
       const { value, checkedValue } = this;
       if (!isEqual(value, checkedValue)) {
+        this.activePath = [];
         this.checkedValue = value;
         this.syncMenuState();
       }

From 8d1d5c57c97921dacaf0c965a2cba6a3a38c6491 Mon Sep 17 00:00:00 2001
From: iamkun <kunhello@outlook.com>
Date: Sat, 6 Feb 2021 16:00:22 +0800
Subject: [PATCH 64/94] fix: fix calendar component i18n bug

fix #20524
---
 packages/calendar/src/date-table.vue | 9 +++------
 1 file changed, 3 insertions(+), 6 deletions(-)

diff --git a/packages/calendar/src/date-table.vue b/packages/calendar/src/date-table.vue
index 6e78cf267..715cc3463 100644
--- a/packages/calendar/src/date-table.vue
+++ b/packages/calendar/src/date-table.vue
@@ -20,12 +20,6 @@ export default {
 
   inject: ['elCalendar'],
 
-  data() {
-    return {
-      WEEK_DAYS: getI18nSettings().dayNames
-    };
-  },
-
   methods: {
     toNestedArr(days) {
       return rangeArr(days.length / 7).map((_, index) => {
@@ -83,6 +77,9 @@ export default {
   },
 
   computed: {
+    WEEK_DAYS() {
+      return getI18nSettings().dayNames;
+    },
     prevMonthDatePrefix() {
       const temp = new Date(this.date.getTime());
       temp.setDate(0);

From 061dfa3deb4c649007d9e0ab09f5cab84fb20f9c Mon Sep 17 00:00:00 2001
From: UxieKong <1351117103@qq.com>
Date: Sat, 6 Feb 2021 16:12:24 +0800
Subject: [PATCH 65/94] fix(color-picker): fix color-picker can't select
 8-digit hex color (#20710)

---
 packages/color-picker/src/color.js | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/packages/color-picker/src/color.js b/packages/color-picker/src/color.js
index b7242a43a..a392eeba8 100644
--- a/packages/color-picker/src/color.js
+++ b/packages/color-picker/src/color.js
@@ -249,7 +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;
+      if (!/^(?:[0-9a-fA-F]{3}){1,2}|[0-9a-fA-F]{8}$/.test(hex)) return;
       let r, g, b;
 
       if (hex.length === 3) {

From 53f842aa4fb7d9ec8a3cd8a73e5099998e091d82 Mon Sep 17 00:00:00 2001
From: iamkun <kunhello@outlook.com>
Date: Tue, 23 Feb 2021 14:38:35 +0800
Subject: [PATCH 66/94] chore: update header banner

---
 examples/components/header.vue    | 28 ++++++++++++++++++++++++++++
 examples/pages/template/index.tpl |  2 +-
 2 files changed, 29 insertions(+), 1 deletion(-)

diff --git a/examples/components/header.vue b/examples/components/header.vue
index 47c3348cc..6a210830f 100644
--- a/examples/components/header.vue
+++ b/examples/components/header.vue
@@ -3,6 +3,21 @@
     height: 80px;
   }
 
+  #v3-banner {
+    background-color: #409EFF;
+    min-height: 30px;
+    padding: 5px 60px;
+    z-index: 19;
+    box-sizing: border-box;
+    text-align: center;
+    color: #eee;
+  }
+
+  #v3-banner a {
+    color: #FFF;
+    font-weight: bold;
+  }
+
   .header {
     height: 80px;
     background-color: #fff;
@@ -267,6 +282,16 @@
 </style>
 <template>
   <div class="headerWrapper">
+    <div id="v3-banner" v-if="isHome">
+      <template v-if="lang === 'zh-CN'">
+        您正在浏览基于 Vue 2.x 的 Element UI 文档;
+        <a href="https://element-plus.org/#/zh-CN">点击这里</a> 查看 Vue 3.x 的升级版本
+      </template>
+      <template v-else>
+        You’re browsing the documentation of Element UI for Vue 2.x version.
+        <a href="https://element-plus.org">Click here</a> for Vue 3.x version
+      </template>
+    </div>
     <header class="header" ref="header">
       <div class="container">
         <h1><router-link :to="`/${ lang }`">
@@ -422,6 +447,9 @@
       },
       isComponentPage() {
         return /^component/.test(this.$route.name);
+      },
+      isHome() {
+        return /^home/.test(this.$route.name);
       }
     },
     mounted() {
diff --git a/examples/pages/template/index.tpl b/examples/pages/template/index.tpl
index bacfa90cc..eff30eb63 100644
--- a/examples/pages/template/index.tpl
+++ b/examples/pages/template/index.tpl
@@ -3,7 +3,7 @@
     text-align: center;
   }
   .banner-desc {
-    padding-top: 20px;
+    padding-top: 50px;
 
     h1 {
       font-size: <%= titleSize >px;

From de0bf4f274627924587576c852a69716c224111d Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E5=A5=BD=E5=A4=9A=E5=A4=A7=E7=B1=B3?= <lost1q84@gmail.com>
Date: Tue, 23 Feb 2021 20:06:58 +0800
Subject: [PATCH 67/94] docs: add change log (#20798)

---
 CHANGELOG.en-US.md | 22 ++++++++++++++++++++++
 CHANGELOG.es.md    | 22 ++++++++++++++++++++++
 CHANGELOG.fr-FR.md | 22 ++++++++++++++++++++++
 CHANGELOG.zh-CN.md | 22 ++++++++++++++++++++++
 4 files changed, 88 insertions(+)

diff --git a/CHANGELOG.en-US.md b/CHANGELOG.en-US.md
index d6c17429b..ddd1c39e4 100644
--- a/CHANGELOG.en-US.md
+++ b/CHANGELOG.en-US.md
@@ -1,5 +1,27 @@
 ## Changelog
 
+### 2.15.1
+
+*2021-02-23*
+
+#### Bug fixes
+
+- Drawer
+  - bugfix (by @cs1707)
+- Image
+  - fix incorrect image object fit ratio in IE (#19583 by @charlie0228)
+- Cascader
+  - fix cascader panel active path (#20730 by @cs1707)
+- Calendar 
+  - fix calendar component i18n bug (#20758 by @iamkun)
+- ColorPicker
+  - fix bugs (by @UxieVerity)
+
+#### Optimization
+
+- Doc
+  - update Axure resource v2.1.0 (by @iamkun)
+
 ### 2.15.0
 
 *2021-01-15*
diff --git a/CHANGELOG.es.md b/CHANGELOG.es.md
index 8915a2c54..f88f2a172 100644
--- a/CHANGELOG.es.md
+++ b/CHANGELOG.es.md
@@ -1,4 +1,26 @@
 ## Changelog
+
+### 2.15.1
+
+*2021-02-23*
+
+#### Bug fixes
+
+- Drawer
+  - bugfix (by @cs1707)
+- Image
+  - fix incorrect image object fit ratio in IE (#19583 by @charlie0228)
+- Cascader
+  - fix cascader panel active path (#20730 by @cs1707)
+- Calendar 
+  - fix calendar component i18n bug (#20758 by @iamkun)
+- ColorPicker
+  - fix bugs (by @UxieVerity)
+
+#### Optimization
+
+- Doc
+  - update Axure resource v2.1.0 (by @iamkun)
 ### 2.15.0
 
 *2021-01-15*
diff --git a/CHANGELOG.fr-FR.md b/CHANGELOG.fr-FR.md
index de4eec251..91779202e 100644
--- a/CHANGELOG.fr-FR.md
+++ b/CHANGELOG.fr-FR.md
@@ -1,5 +1,27 @@
 ## Changelog
 
+### 2.15.1
+
+*2021-02-23*
+
+#### Bug fixes
+
+- Drawer
+  - bugfix (by @cs1707)
+- Image
+  - fix incorrect image object fit ratio in IE (#19583 by @charlie0228)
+- Cascader
+  - fix cascader panel active path (#20730 by @cs1707)
+- Calendar 
+  - fix calendar component i18n bug (#20758 by @iamkun)
+- ColorPicker
+  - fix bugs (by @UxieVerity)
+
+#### Optimization
+
+- Doc
+  - update Axure resource v2.1.0 (by @iamkun)
+
 ### 2.15.0
 
 *2021-01-15*
diff --git a/CHANGELOG.zh-CN.md b/CHANGELOG.zh-CN.md
index 811fe8713..827ed28db 100644
--- a/CHANGELOG.zh-CN.md
+++ b/CHANGELOG.zh-CN.md
@@ -1,5 +1,27 @@
 ## 更新日志
 
+### 2.15.1
+
+*2021-02-23*
+
+#### Bug fixes
+
+- Drawer
+  - 修复 Drawer bug (by @cs1707)
+- Image
+  - 修复 image object fit ratio 在 IE 下的 bug  (#19583 by @charlie0228)
+- Cascader
+  - 修复 cascader panel active path (#20730 by @cs1707)
+- Calendar 
+  - 修复 calendar 国际化 bug (#20758 by @iamkun)
+- ColorPicker
+  - 修复 bugs (by @UxieVerity)
+
+#### Optimization
+
+- Doc
+  - 更新 Axure 设计资源 v2.1.0 (by @iamkun)
+
 ### 2.15.0
 
 *2021-01-15*

From 9bbf070a7335def7bf3ab4dab55a1d88735bbe7d Mon Sep 17 00:00:00 2001
From: cs1707 <lost1q84@gmail.com>
Date: Tue, 23 Feb 2021 20:13:54 +0800
Subject: [PATCH 68/94] [build] 2.15.1

---
 examples/versions.json            | 2 +-
 packages/theme-chalk/package.json | 2 +-
 src/index.js                      | 2 +-
 3 files changed, 3 insertions(+), 3 deletions(-)

diff --git a/examples/versions.json b/examples/versions.json
index a9dad046f..a0291cbc5 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","2.5.4":"2.5","2.6.3":"2.6","2.7.2":"2.7","2.8.2":"2.8","2.9.2":"2.9","2.10.1":"2.10","2.11.1":"2.11","2.12.0":"2.12","2.13.2":"2.13","2.14.1":"2.14","2.15.0":"2.15"}
\ No newline at end of file
+{"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","2.5.4":"2.5","2.6.3":"2.6","2.7.2":"2.7","2.8.2":"2.8","2.9.2":"2.9","2.10.1":"2.10","2.11.1":"2.11","2.12.0":"2.12","2.13.2":"2.13","2.14.1":"2.14","2.15.1":"2.15"}
\ No newline at end of file
diff --git a/packages/theme-chalk/package.json b/packages/theme-chalk/package.json
index eaf26e07d..c448166ad 100644
--- a/packages/theme-chalk/package.json
+++ b/packages/theme-chalk/package.json
@@ -1,6 +1,6 @@
 {
   "name": "element-theme-chalk",
-  "version": "2.15.0",
+  "version": "2.15.1",
   "description": "Element component chalk theme.",
   "main": "lib/index.css",
   "style": "lib/index.css",
diff --git a/src/index.js b/src/index.js
index e20375b86..e2fa5169e 100644
--- a/src/index.js
+++ b/src/index.js
@@ -198,7 +198,7 @@ if (typeof window !== 'undefined' && window.Vue) {
 }
 
 export default {
-  version: '2.15.0',
+  version: '2.15.1',
   locale: locale.use,
   i18n: locale.i18n,
   install,

From 29956b5de9d66bfc65176be7bf537b9410755dfe Mon Sep 17 00:00:00 2001
From: cs1707 <lost1q84@gmail.com>
Date: Tue, 23 Feb 2021 20:13:54 +0800
Subject: [PATCH 69/94] [release] 2.15.1

---
 package.json | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/package.json b/package.json
index fd659c27b..fa55deced 100644
--- a/package.json
+++ b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "element-ui",
-  "version": "2.15.0",
+  "version": "2.15.1",
   "description": "A Component Library for Vue.js.",
   "main": "lib/element-ui.common.js",
   "files": [

From 06ddc105716d9cb9adcdd12b1e7f8393956912d5 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E5=A5=BD=E5=A4=9A=E5=A4=A7=E7=B1=B3?= <lost1q84@gmail.com>
Date: Fri, 19 Mar 2021 16:32:20 +0800
Subject: [PATCH 70/94] chore: remove getTestEle (#20811)

---
 examples/components/header.vue          | 11 -----------
 examples/components/theme/loader/api.js |  5 -----
 2 files changed, 16 deletions(-)

diff --git a/examples/components/header.vue b/examples/components/header.vue
index 6a210830f..a64f44551 100644
--- a/examples/components/header.vue
+++ b/examples/components/header.vue
@@ -405,7 +405,6 @@
   import compoLang from '../i18n/component.json';
   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';
 
@@ -453,16 +452,6 @@
       }
     },
     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;
diff --git a/examples/components/theme/loader/api.js b/examples/components/theme/loader/api.js
index 450786d3c..fd8c65994 100644
--- a/examples/components/theme/loader/api.js
+++ b/examples/components/theme/loader/api.js
@@ -5,7 +5,6 @@ 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/'
 };
 
@@ -15,10 +14,6 @@ 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);
 };

From fa64999032f20ab75be632646664619400851946 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E5=A5=BD=E5=A4=9A=E5=A4=A7=E7=B1=B3?= <lost1q84@gmail.com>
Date: Fri, 19 Mar 2021 16:32:36 +0800
Subject: [PATCH 71/94] Image: fix z-index and keydown event add
 stopPropagation (#20859)

---
 packages/image/src/image-viewer.vue | 12 +++++++++---
 1 file changed, 9 insertions(+), 3 deletions(-)

diff --git a/packages/image/src/image-viewer.vue b/packages/image/src/image-viewer.vue
index dc5d13867..63c85dade 100644
--- a/packages/image/src/image-viewer.vue
+++ b/packages/image/src/image-viewer.vue
@@ -1,6 +1,6 @@
 <template>
   <transition name="viewer-fade">
-    <div tabindex="-1" ref="el-image-viewer__wrapper" class="el-image-viewer__wrapper" :style="{ 'z-index': zIndex }">
+    <div tabindex="-1" ref="el-image-viewer__wrapper" class="el-image-viewer__wrapper" :style="{ 'z-index': viewerZIndex }">
       <div class="el-image-viewer__mask" @click.self="handleMaskClick"></div>
       <!-- CLOSE -->
       <span class="el-image-viewer__btn el-image-viewer__close" @click="hide">
@@ -54,6 +54,7 @@
 <script>
 import { on, off } from 'element-ui/src/utils/dom';
 import { rafThrottle, isFirefox } from 'element-ui/src/utils/util';
+import { PopupManager } from 'element-ui/src/utils/popup';
 
 const Mode = {
   CONTAIN: {
@@ -143,6 +144,10 @@ export default {
         style.maxWidth = style.maxHeight = '100%';
       }
       return style;
+    },
+    viewerZIndex() {
+      const nextZIndex = PopupManager.nextZIndex();
+      return this.zIndex > nextZIndex ? this.zIndex : nextZIndex;
     }
   },
   watch: {
@@ -167,7 +172,8 @@ export default {
       this.onClose();
     },
     deviceSupportInstall() {
-      this._keyDownHandler = rafThrottle(e => {
+      this._keyDownHandler = e => {
+        e.stopPropagation();
         const keyCode = e.keyCode;
         switch (keyCode) {
           // ESC
@@ -195,7 +201,7 @@ export default {
             this.handleActions('zoomOut');
             break;
         }
-      });
+      };
       this._mouseWheelHandler = rafThrottle(e => {
         const delta = e.wheelDelta ? e.wheelDelta : -e.detail;
         if (delta > 0) {

From 04858017fb82754357d4a7d5907f32350ca21bc1 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E5=A5=BD=E5=A4=9A=E5=A4=A7=E7=B1=B3?= <lost1q84@gmail.com>
Date: Fri, 26 Mar 2021 16:57:45 +0800
Subject: [PATCH 72/94] Input: fix show password cursor (#20870)

---
 packages/input/src/input.vue | 4 +++-
 1 file changed, 3 insertions(+), 1 deletion(-)

diff --git a/packages/input/src/input.vue b/packages/input/src/input.vue
index b4b35926c..1a66d6a96 100644
--- a/packages/input/src/input.vue
+++ b/packages/input/src/input.vue
@@ -403,7 +403,9 @@
       },
       handlePasswordVisible() {
         this.passwordVisible = !this.passwordVisible;
-        this.focus();
+        this.$nextTick(() => {
+          this.focus();
+        });
       },
       getInput() {
         return this.$refs.input || this.$refs.textarea;

From 0606cb8f960418487e45b22f3e2a67a792903eaf Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E5=A5=BD=E5=A4=9A=E5=A4=A7=E7=B1=B3?= <lost1q84@gmail.com>
Date: Tue, 6 Apr 2021 11:37:14 +0800
Subject: [PATCH 73/94] Input: fix show password icon in edge (#20902)

---
 packages/theme-chalk/src/input.scss | 4 ++++
 1 file changed, 4 insertions(+)

diff --git a/packages/theme-chalk/src/input.scss b/packages/theme-chalk/src/input.scss
index 80df98222..99641eb92 100644
--- a/packages/theme-chalk/src/input.scss
+++ b/packages/theme-chalk/src/input.scss
@@ -120,6 +120,10 @@
     transition: $--border-transition-base;
     width: 100%;
 
+    &::-ms-reveal {
+      display: none;
+    }
+
     &::placeholder {
       color: $--input-placeholder-color;
     }

From 0418a47148f4f2562099cc6eb55ca7040ecaad27 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E5=A5=BD=E5=A4=9A=E5=A4=A7=E7=B1=B3?= <lost1q84@gmail.com>
Date: Thu, 8 Apr 2021 17:13:39 +0800
Subject: [PATCH 74/94] fix: update isFunction (#20912)

---
 src/utils/types.js | 18 +++++++++++++++++-
 1 file changed, 17 insertions(+), 1 deletion(-)

diff --git a/src/utils/types.js b/src/utils/types.js
index bfcceed5f..7f6bdeb56 100644
--- a/src/utils/types.js
+++ b/src/utils/types.js
@@ -1,3 +1,5 @@
+import Vue from 'vue';
+
 export function isString(obj) {
   return Object.prototype.toString.call(obj) === '[object String]';
 }
@@ -10,11 +12,25 @@ export function isHtmlElement(node) {
   return node && node.nodeType === Node.ELEMENT_NODE;
 }
 
-export const isFunction = (functionToCheck) => {
+/**
+ *  - Inspired:
+ *    https://github.com/jashkenas/underscore/blob/master/modules/isFunction.js
+ */
+let isFunction = (functionToCheck) => {
   var getType = {};
   return functionToCheck && getType.toString.call(functionToCheck) === '[object Function]';
 };
 
+if (typeof /./ !== 'function' && typeof Int8Array !== 'object' && (Vue.prototype.$isServer || typeof document.childNodes !== 'function')) {
+  isFunction = function(obj) {
+    return typeof obj === 'function' || false;
+  };
+}
+
+export {
+  isFunction
+};
+
 export const isUndefined = (val)=> {
   return val === void 0;
 };

From 655d89fe0e0d9c4c7c4ca2541f5cf90437690a76 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E5=A5=BD=E5=A4=9A=E5=A4=A7=E7=B1=B3?= <lost1q84@gmail.com>
Date: Thu, 15 Apr 2021 14:10:56 +0800
Subject: [PATCH 75/94] Carousel: fix interval and scale bug (#20931)

---
 packages/carousel/src/item.vue | 1 +
 packages/carousel/src/main.vue | 5 +++++
 2 files changed, 6 insertions(+)

diff --git a/packages/carousel/src/item.vue b/packages/carousel/src/item.vue
index 0474bc469..88b5a8ed9 100644
--- a/packages/carousel/src/item.vue
+++ b/packages/carousel/src/item.vue
@@ -98,6 +98,7 @@
           this.active = index === activeIndex;
           const isVertical = parentDirection === 'vertical';
           this.translate = this.calcTranslate(index, activeIndex, isVertical);
+          this.scale = 1;
         }
         this.ready = true;
       },
diff --git a/packages/carousel/src/main.vue b/packages/carousel/src/main.vue
index 9a3f85694..b5d90e4a0 100644
--- a/packages/carousel/src/main.vue
+++ b/packages/carousel/src/main.vue
@@ -159,6 +159,11 @@ export default {
 
     loop() {
       this.setActiveItem(this.activeIndex);
+    },
+
+    interval() {
+      this.pauseTimer();
+      this.startTimer();
     }
   },
 

From 486219a7525b4fa0ec5a68fe9a3a1238e1d12af4 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E5=A5=BD=E5=A4=9A=E5=A4=A7=E7=B1=B3?= <lost1q84@gmail.com>
Date: Fri, 16 Apr 2021 16:16:23 +0800
Subject: [PATCH 76/94] Cascader: fix delete tag bug (#20939)

---
 packages/cascader/src/cascader.vue | 13 +++++++------
 1 file changed, 7 insertions(+), 6 deletions(-)

diff --git a/packages/cascader/src/cascader.vue b/packages/cascader/src/cascader.vue
index e0b9a965c..0546fc4ab 100644
--- a/packages/cascader/src/cascader.vue
+++ b/packages/cascader/src/cascader.vue
@@ -44,14 +44,14 @@
 
     <div v-if="multiple" class="el-cascader__tags">
       <el-tag
-        v-for="(tag, index) in presentTags"
+        v-for="tag in presentTags"
         :key="tag.key"
         type="info"
         :size="tagSize"
         :hit="tag.hitState"
         :closable="tag.closable"
         disable-transitions
-        @close="deleteTag(index)">
+        @close="deleteTag(tag)">
         <span>{{ tag.text }}</span>
       </el-tag>
       <input
@@ -588,7 +588,7 @@ export default {
 
       if (this.pressDeleteCount) {
         if (lastTag.hitState) {
-          this.deleteTag(lastIndex);
+          this.deleteTag(lastTag);
         } else {
           lastTag.hitState = true;
         }
@@ -607,10 +607,11 @@ export default {
         this.toggleDropDownVisible(false);
       }
     },
-    deleteTag(index) {
+    deleteTag(tag) {
       const { checkedValue } = this;
-      const val = checkedValue[index];
-      this.checkedValue = checkedValue.filter((n, i) => i !== index);
+      const current = tag.node.getValueByOption();
+      const val = checkedValue.find(n => isEqual(n, current));
+      this.checkedValue = checkedValue.filter(n => !isEqual(n, current));
       this.$emit('remove-tag', val);
     },
     updateStyle() {

From 17de41f3e2eb97508c8e85afac7bc10a22a7cf7b Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E5=A5=BD=E5=A4=9A=E5=A4=A7=E7=B1=B3?= <lost1q84@gmail.com>
Date: Wed, 21 Apr 2021 11:44:35 +0800
Subject: [PATCH 77/94] Drawer: add overflow auto (#20948)

---
 packages/theme-chalk/src/drawer.scss | 1 +
 1 file changed, 1 insertion(+)

diff --git a/packages/theme-chalk/src/drawer.scss b/packages/theme-chalk/src/drawer.scss
index 8e13f35b8..78fa9bda8 100644
--- a/packages/theme-chalk/src/drawer.scss
+++ b/packages/theme-chalk/src/drawer.scss
@@ -165,6 +165,7 @@ $directions: rtl, ltr, ttb, btt;
 
   &__body {
     flex: 1;
+    overflow: auto;
     & > * {
       box-sizing: border-box;
     }

From d0194e1e2f81ec0d4dce0c7611faa4079df42b99 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E5=A5=BD=E5=A4=9A=E5=A4=A7=E7=B1=B3?= <lost1q84@gmail.com>
Date: Fri, 28 May 2021 15:24:32 +0800
Subject: [PATCH 78/94] feat: add change log (#21032)

---
 CHANGELOG.en-US.md | 20 ++++++++++++++++++++
 CHANGELOG.es.md    | 20 ++++++++++++++++++++
 CHANGELOG.fr-FR.md | 20 ++++++++++++++++++++
 CHANGELOG.zh-CN.md | 24 ++++++++++++++++++++++--
 4 files changed, 82 insertions(+), 2 deletions(-)

diff --git a/CHANGELOG.en-US.md b/CHANGELOG.en-US.md
index ddd1c39e4..724664855 100644
--- a/CHANGELOG.en-US.md
+++ b/CHANGELOG.en-US.md
@@ -1,5 +1,25 @@
 ## Changelog
 
+### 2.15.2
+
+*2021-05-28*
+
+#### Bug fixes
+
+- Image
+  - fix z-index and keydown event add stopPropagation (#20859 by @cs1707)
+- Input
+  - fix show password cursor (#20870 by @cs1707)
+  - fix show password icon in edge (#20902 by @cs1707)
+- Carousel
+  - fix interval and scale bug (#20931 by @cs1707)
+- Cascader
+  - fix delete tag bug (#20939 by @cs1707)
+- Drawer
+  - add overflow auto (#20948 by @cs1707)
+- Others
+  - fix isFunction (#20912 by @cs1707)
+
 ### 2.15.1
 
 *2021-02-23*
diff --git a/CHANGELOG.es.md b/CHANGELOG.es.md
index f88f2a172..cc98c2d07 100644
--- a/CHANGELOG.es.md
+++ b/CHANGELOG.es.md
@@ -1,5 +1,25 @@
 ## Changelog
 
+### 2.15.2
+
+*2021-05-28*
+
+#### Bug fixes
+
+- Image
+  - fix z-index and keydown event add stopPropagation (#20859 by @cs1707)
+- Input
+  - fix show password cursor (#20870 by @cs1707)
+  - fix show password icon in edge (#20902 by @cs1707)
+- Carousel
+  - fix interval and scale bug (#20931 by @cs1707)
+- Cascader
+  - fix delete tag bug (#20939 by @cs1707)
+- Drawer
+  - add overflow auto (#20948 by @cs1707)
+- Others
+  - fix isFunction (#20912 by @cs1707)
+
 ### 2.15.1
 
 *2021-02-23*
diff --git a/CHANGELOG.fr-FR.md b/CHANGELOG.fr-FR.md
index 91779202e..098452290 100644
--- a/CHANGELOG.fr-FR.md
+++ b/CHANGELOG.fr-FR.md
@@ -1,5 +1,25 @@
 ## Changelog
 
+### 2.15.2
+
+*2021-05-28*
+
+#### Bug fixes
+
+- Image
+  - fix z-index and keydown event add stopPropagation (#20859 by @cs1707)
+- Input
+  - fix show password cursor (#20870 by @cs1707)
+  - fix show password icon in edge (#20902 by @cs1707)
+- Carousel
+  - fix interval and scale bug (#20931 by @cs1707)
+- Cascader
+  - fix delete tag bug (#20939 by @cs1707)
+- Drawer
+  - add overflow auto (#20948 by @cs1707)
+- Others
+  - fix isFunction (#20912 by @cs1707)
+
 ### 2.15.1
 
 *2021-02-23*
diff --git a/CHANGELOG.zh-CN.md b/CHANGELOG.zh-CN.md
index 827ed28db..bed7e41d2 100644
--- a/CHANGELOG.zh-CN.md
+++ b/CHANGELOG.zh-CN.md
@@ -1,10 +1,30 @@
 ## 更新日志
 
+### 2.15.2
+
+*2021-05-28*
+
+#### Bug 修复
+
+- Image
+  - 修复 z-index 增加 keydown 事件 添加 stopPropagation (#20859 by @cs1707)
+- Input
+  - 修复 password cursor 展示 (#20870 by @cs1707)
+  - 修复 password icon 在 edge 下的展示 (#20902 by @cs1707)
+- Carousel
+  - 修复 interval 和 scale bug (#20931 by @cs1707)
+- Cascader
+  - 修复 delete tag bug (#20939 by @cs1707)
+- Drawer
+  - 支持 overflow auto (#20948 by @cs1707)
+- 其他
+  - 修复 isFunction (#20912 by @cs1707)
+
 ### 2.15.1
 
 *2021-02-23*
 
-#### Bug fixes
+#### Bug 修复
 
 - Drawer
   - 修复 Drawer bug (by @cs1707)
@@ -17,7 +37,7 @@
 - ColorPicker
   - 修复 bugs (by @UxieVerity)
 
-#### Optimization
+#### 优化
 
 - Doc
   - 更新 Axure 设计资源 v2.1.0 (by @iamkun)

From f1ef52e19470a02c0d6b12e134bb518171aa26cd Mon Sep 17 00:00:00 2001
From: cs1707 <lost1q84@gmail.com>
Date: Fri, 28 May 2021 15:29:22 +0800
Subject: [PATCH 79/94] [build] 2.15.2

---
 examples/versions.json            | 2 +-
 packages/theme-chalk/package.json | 2 +-
 src/index.js                      | 2 +-
 3 files changed, 3 insertions(+), 3 deletions(-)

diff --git a/examples/versions.json b/examples/versions.json
index a0291cbc5..c8e879094 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","2.5.4":"2.5","2.6.3":"2.6","2.7.2":"2.7","2.8.2":"2.8","2.9.2":"2.9","2.10.1":"2.10","2.11.1":"2.11","2.12.0":"2.12","2.13.2":"2.13","2.14.1":"2.14","2.15.1":"2.15"}
\ No newline at end of file
+{"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","2.5.4":"2.5","2.6.3":"2.6","2.7.2":"2.7","2.8.2":"2.8","2.9.2":"2.9","2.10.1":"2.10","2.11.1":"2.11","2.12.0":"2.12","2.13.2":"2.13","2.14.1":"2.14","2.15.2":"2.15"}
\ No newline at end of file
diff --git a/packages/theme-chalk/package.json b/packages/theme-chalk/package.json
index c448166ad..27d7107a5 100644
--- a/packages/theme-chalk/package.json
+++ b/packages/theme-chalk/package.json
@@ -1,6 +1,6 @@
 {
   "name": "element-theme-chalk",
-  "version": "2.15.1",
+  "version": "2.15.2",
   "description": "Element component chalk theme.",
   "main": "lib/index.css",
   "style": "lib/index.css",
diff --git a/src/index.js b/src/index.js
index e2fa5169e..47f43aeb3 100644
--- a/src/index.js
+++ b/src/index.js
@@ -198,7 +198,7 @@ if (typeof window !== 'undefined' && window.Vue) {
 }
 
 export default {
-  version: '2.15.1',
+  version: '2.15.2',
   locale: locale.use,
   i18n: locale.i18n,
   install,

From 29268a3d4a60603a3f405f40d87b1cc70bb00305 Mon Sep 17 00:00:00 2001
From: cs1707 <lost1q84@gmail.com>
Date: Fri, 28 May 2021 15:29:22 +0800
Subject: [PATCH 80/94] [release] 2.15.2

---
 package.json | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/package.json b/package.json
index fa55deced..0e01d8b43 100644
--- a/package.json
+++ b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "element-ui",
-  "version": "2.15.1",
+  "version": "2.15.2",
   "description": "A Component Library for Vue.js.",
   "main": "lib/element-ui.common.js",
   "files": [

From df6965f875db78e59b4b58009ec9bb9e72d49829 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E5=A5=BD=E5=A4=9A=E5=A4=A7=E7=B1=B3?= <lost1q84@gmail.com>
Date: Tue, 1 Jun 2021 17:23:13 +0800
Subject: [PATCH 81/94] Skeleton: add skeleton component (#21038)

---
 components.json                             |   4 +-
 examples/demo-styles/index.scss             |   1 +
 examples/demo-styles/skeleton.scss          |  46 +++
 examples/docs/en-US/skeleton.md             | 315 +++++++++++++++++++
 examples/docs/es/skeleton.md                | 315 +++++++++++++++++++
 examples/docs/fr-FR/skeleton.md             | 315 +++++++++++++++++++
 examples/docs/zh-CN/skeleton.md             | 316 ++++++++++++++++++++
 examples/nav.config.json                    |  16 +
 packages/skeleton-item/index.js             |   8 +
 packages/skeleton/index.js                  |   8 +
 packages/skeleton/src/img-placeholder.vue   |  16 +
 packages/skeleton/src/index.vue             |  76 +++++
 packages/skeleton/src/item.vue              |  22 ++
 packages/theme-chalk/src/common/var.scss    |  10 +
 packages/theme-chalk/src/index.scss         |   2 +
 packages/theme-chalk/src/skeleton-item.scss |  84 ++++++
 packages/theme-chalk/src/skeleton.scss      |  40 +++
 src/index.js                                |   8 +-
 test/unit/specs/skeleton.spec.js            | 106 +++++++
 types/element-ui.d.ts                       |   8 +
 types/skeleton-item.d.ts                    |   7 +
 types/skeleton.d.ts                         |  33 ++
 22 files changed, 1754 insertions(+), 2 deletions(-)
 create mode 100644 examples/demo-styles/skeleton.scss
 create mode 100644 examples/docs/en-US/skeleton.md
 create mode 100644 examples/docs/es/skeleton.md
 create mode 100644 examples/docs/fr-FR/skeleton.md
 create mode 100644 examples/docs/zh-CN/skeleton.md
 create mode 100644 packages/skeleton-item/index.js
 create mode 100644 packages/skeleton/index.js
 create mode 100644 packages/skeleton/src/img-placeholder.vue
 create mode 100644 packages/skeleton/src/index.vue
 create mode 100644 packages/skeleton/src/item.vue
 create mode 100644 packages/theme-chalk/src/skeleton-item.scss
 create mode 100644 packages/theme-chalk/src/skeleton.scss
 create mode 100644 test/unit/specs/skeleton.spec.js
 create mode 100644 types/skeleton-item.d.ts
 create mode 100644 types/skeleton.d.ts

diff --git a/components.json b/components.json
index 754da2b61..2abbcbb4e 100644
--- a/components.json
+++ b/components.json
@@ -80,5 +80,7 @@
   "cascader-panel": "./packages/cascader-panel/index.js",
   "avatar": "./packages/avatar/index.js",
   "drawer": "./packages/drawer/index.js",
-  "popconfirm": "./packages/popconfirm/index.js"
+  "popconfirm": "./packages/popconfirm/index.js",
+  "skeleton": "./packages/skeleton/index.js",
+  "skeleton-item": "./packages/skeleton-item/index.js"
 }
diff --git a/examples/demo-styles/index.scss b/examples/demo-styles/index.scss
index 2186b96d2..1638bd094 100644
--- a/examples/demo-styles/index.scss
+++ b/examples/demo-styles/index.scss
@@ -44,4 +44,5 @@
 @import "./infinite-scroll.scss";
 @import "./avatar.scss";
 @import "./drawer.scss";
+@import "./skeleton.scss";
 
diff --git a/examples/demo-styles/skeleton.scss b/examples/demo-styles/skeleton.scss
new file mode 100644
index 000000000..c349db827
--- /dev/null
+++ b/examples/demo-styles/skeleton.scss
@@ -0,0 +1,46 @@
+.demo-block.demo-skeleton {
+  .el-card {
+    margin-bottom: 16px;
+  }
+
+  .card-header {
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+  }
+
+  .time {
+    font-size: 13px;
+    color: #999;
+  }
+
+  .bottom {
+    margin-top: 13px;
+    line-height: 12px;
+  }
+
+  .button {
+    padding: 0;
+    min-height: auto;
+  }
+
+  .image {
+    &.multi-content {
+      width: 400px;
+      height: 267px;
+    }
+
+    width: 100%;
+    display: block;
+  }
+
+  .clearfix:before,
+  .clearfix:after {
+    display: table;
+    content: '';
+  }
+
+  .clearfix:after {
+    clear: both;
+  }
+}
diff --git a/examples/docs/en-US/skeleton.md b/examples/docs/en-US/skeleton.md
new file mode 100644
index 000000000..edf77d092
--- /dev/null
+++ b/examples/docs/en-US/skeleton.md
@@ -0,0 +1,315 @@
+## Skeleton
+
+When loading data, and you need a rich experience for visual and interactions for your end users, you can choose `skeleton`.
+
+### Basic usage
+
+The basic skeleton.
+
+:::demo
+
+```html
+<template>
+  <el-skeleton />
+</template>
+```
+
+:::
+
+### Configurable Rows
+
+You can configure the row numbers yourself, we are rendering a title row with 33% width of the others.
+
+:::demo
+
+```html
+<el-skeleton :rows="6" />
+```
+
+:::
+
+### Animation
+We have provided a switch flag indicating whether showing the loading animation, called `animated` when this is true, all children of `el-skeleton` will show animation
+
+:::demo
+
+```html
+<el-skeleton :rows="6" animated />
+```
+
+:::
+
+### Customized Template
+ElementPlus only provides the most common template, sometimes that could be a problem, so you have a slot named `template` to do that work.
+
+Also we have provided different types skeleton unit that you can choose, for more detailed info, please scroll down to the bottom of this page to see the API description. Also, when building your own customized skeleton structure, you should be structuring them as closer to the real DOM as possible, which avoiding the DOM bouncing caused by the height difference.
+
+:::demo
+
+```html
+<template>
+  <el-skeleton style="width: 240px">
+    <template slot="template">
+      <el-skeleton-item variant="image" style="width: 240px; height: 240px;" />
+      <div style="padding: 14px;">
+        <el-skeleton-item variant="p" style="width: 50%" />
+        <div
+          style="display: flex; align-items: center; justify-items: space-between;"
+        >
+          <el-skeleton-item variant="text" style="margin-right: 16px;" />
+          <el-skeleton-item variant="text" style="width: 30%;" />
+        </div>
+      </div>
+    </template>
+  </el-skeleton>
+</template>
+```
+
+:::
+
+### Loading state
+
+When `Loading` ends, we always need to show the real UI with data to our end users. with the attribtue `loading` we can control whether showing the DOM. You can also use slot `default` to structure the real DOM element.
+
+:::demo
+
+```html
+<template>
+  <div style="width: 240px">
+    <p>
+      <label style="margin-right: 16px;">Switch Loading</label>
+      <el-switch v-model="loading" />
+    </p>
+    <el-skeleton style="width: 240px" :loading="loading" animated>
+      <template slot="template">
+        <el-skeleton-item
+          variant="image"
+          style="width: 240px; height: 240px;"
+        />
+        <div style="padding: 14px;">
+          <el-skeleton-item variant="h3" style="width: 50%;" />
+          <div
+            style="display: flex; align-items: center; justify-items: space-between; margin-top: 16px; height: 16px;"
+          >
+            <el-skeleton-item variant="text" style="margin-right: 16px;" />
+            <el-skeleton-item variant="text" style="width: 30%;" />
+          </div>
+        </div>
+      </template>
+      <template>
+        <el-card :body-style="{ padding: '0px', marginBottom: '1px' }">
+          <img
+            src="https://shadow.elemecdn.com/app/element/hamburger.9cf7b091-55e9-11e9-a976-7f4d0b07eef6.png"
+            class="image"
+          />
+          <div style="padding: 14px;">
+            <span>Delicious hamberger</span>
+            <div class="bottom card-header">
+              <span class="time">{{ currentDate }}</span>
+              <el-button type="text" class="button">Operation button</el-button>
+            </div>
+          </div>
+        </el-card>
+      </template>
+    </el-skeleton>
+  </div>
+</template>
+
+<script>
+  export default {
+    data () {
+      return {
+        loading: true,
+        currentDate: '2021-06-01'
+      }
+    },
+  }
+</script>
+```
+
+:::
+
+
+### Rendering a list of data
+
+Most of the time, skeleton is used as indicators of rendering a list of data which haven't been fetched from server yet, then we need to create a list of skeleton out of no where to make it look like it is loading, with `count` attribute, you can control how many these templates you need to render to the browser.
+
+
+:::tip
+We do not recommend rendering lots of fake UI to the browser, it will still cause the performance issue, it also costs longer to destroy the skeleton. Keep `count` as small as it can be to make better user experience.
+:::
+
+:::demo
+
+```html
+<template>
+  <div style="width: 400px">
+    <p>
+      <el-button @click="setLoading">Click me to reload</el-button>
+    </p>
+    <el-skeleton style="width:400px" :loading="loading" animated :count="3">
+      <template slot="template">
+        <el-skeleton-item
+          variant="image"
+          style="width: 400px; height: 267px;"
+        />
+        <div style="padding: 14px;">
+          <el-skeleton-item variant="h3" style="width: 50%;" />
+          <div
+            style="display: flex; align-items: center; justify-items: space-between; margin-top: 16px; height: 16px;"
+          >
+            <el-skeleton-item variant="text" style="margin-right: 16px;" />
+            <el-skeleton-item variant="text" style="width: 30%;" />
+          </div>
+        </div>
+      </template>
+      <template>
+        <el-card
+          :body-style="{ padding: '0px', marginBottom: '1px' }"
+          v-for="item in lists"
+          :key="item.name"
+        >
+          <img :src="item.imgUrl" class="image multi-content" />
+          <div style="padding: 14px;">
+            <span>Delicious hamberger</span>
+            <div class="bottom card-header">
+              <span class="time">{{ currentDate }}</span>
+              <el-button type="text" class="button">Operation button</el-button>
+            </div>
+          </div>
+        </el-card>
+      </template>
+    </el-skeleton>
+  </div>
+</template>
+
+<script>
+  export default {
+    data() {
+      return {
+        loading: true,
+        currentDate: '2021-06-01',
+        lists: [],
+      }
+    },
+    mounted() {
+      this.loading = false
+      this.lists = [
+        {
+          imgUrl:
+            'https://fuss10.elemecdn.com/a/3f/3302e58f9a181d2509f3dc0fa68b0jpeg.jpeg',
+          name: 'Deer',
+        },
+        {
+          imgUrl:
+            'https://fuss10.elemecdn.com/1/34/19aa98b1fcb2781c4fba33d850549jpeg.jpeg',
+          name: 'Horse',
+        },
+        {
+          imgUrl:
+            'https://fuss10.elemecdn.com/0/6f/e35ff375812e6b0020b6b4e8f9583jpeg.jpeg',
+          name: 'Mountain Lion',
+        },
+      ]
+    },
+    methods: {
+      setLoading() {
+        this.loading = true
+        setTimeout(() => (this.loading = false), 2000)
+      },
+    },
+  }
+</script>
+```
+
+:::
+
+### Avoiding rendering bouncing.
+Sometimes API responds very quickly, when that happens, the skeleton just gets rendered to the DOM then it needs to switch back to real DOM, that causes the sudden flashy. To avoid such thing, you can use the `throttle` attribute.
+
+
+:::demo
+
+```html
+<template>
+  <div style="width: 240px">
+    <p>
+      <label style="margin-right: 16px;">Switch Loading</label>
+      <el-switch v-model="loading" />
+    </p>
+    <el-skeleton
+      style="width: 240px"
+      :loading="loading"
+      animated
+      :throttle="500"
+    >
+      <template slot="template">
+        <el-skeleton-item
+          variant="image"
+          style="width: 240px; height: 240px;"
+        />
+        <div style="padding: 14px;">
+          <el-skeleton-item variant="h3" style="width: 50%;" />
+          <div
+            style="display: flex; align-items: center; justify-items: space-between; margin-top: 16px; height: 16px;"
+          >
+            <el-skeleton-item variant="text" style="margin-right: 16px;" />
+            <el-skeleton-item variant="text" style="width: 30%;" />
+          </div>
+        </div>
+      </template>
+      <template>
+        <el-card :body-style="{ padding: '0px', marginBottom: '1px'}">
+          <img
+            src="https://shadow.elemecdn.com/app/element/hamburger.9cf7b091-55e9-11e9-a976-7f4d0b07eef6.png"
+            class="image"
+          />
+          <div style="padding: 14px;">
+            <span>Delicious hamberger</span>
+            <div class="bottom card-header">
+              <span class="time">{{ currentDate }}</span>
+              <el-button type="text" class="button">operation button</el-button>
+            </div>
+          </div>
+        </el-card>
+      </template>
+    </el-skeleton>
+  </div>
+</template>
+
+<script>
+  export default {
+    data() {
+      return {
+        loading: false,
+        currentDate: '2021-06-01'
+      }
+    },
+  }
+</script>
+```
+:::
+
+### Skeleton Attributes
+
+| Attribute    | Description  | Type    | Acceptable Value | Default |
+| ------- | ---------------- | ------- | ------------ | ------ |
+| animated | whether showing the animation | boolean | true / false | false |
+| count   | how many fake items to render to the DOM | number | integer | 1 |
+| loading | whether showing the skeleton | boolean | true / false | true  |
+| rows    | numbers of the row, only useful when no template slot were given | number  | integer  | 4      |
+| throttle | Rendering delay in millseconds | number | integer | 0 |
+
+
+### Skeleton Item Attributes
+| Attribute    | Description             | Type    | Acceptable Value       | Default  |
+| ------- | ---------------- | ------- | ------------ | ------ |
+| variant | The current rendering skeleton type | Enum(string) | p / text / h1 / h3 / text / caption / button / image / circle / rect | text |
+
+
+### Skeleton Slots
+
+| Name | Description |
+| ---- | ----------- |
+| default | Real rendering DOM |
+| template | Custom rendering skeleton template |
diff --git a/examples/docs/es/skeleton.md b/examples/docs/es/skeleton.md
new file mode 100644
index 000000000..edf77d092
--- /dev/null
+++ b/examples/docs/es/skeleton.md
@@ -0,0 +1,315 @@
+## Skeleton
+
+When loading data, and you need a rich experience for visual and interactions for your end users, you can choose `skeleton`.
+
+### Basic usage
+
+The basic skeleton.
+
+:::demo
+
+```html
+<template>
+  <el-skeleton />
+</template>
+```
+
+:::
+
+### Configurable Rows
+
+You can configure the row numbers yourself, we are rendering a title row with 33% width of the others.
+
+:::demo
+
+```html
+<el-skeleton :rows="6" />
+```
+
+:::
+
+### Animation
+We have provided a switch flag indicating whether showing the loading animation, called `animated` when this is true, all children of `el-skeleton` will show animation
+
+:::demo
+
+```html
+<el-skeleton :rows="6" animated />
+```
+
+:::
+
+### Customized Template
+ElementPlus only provides the most common template, sometimes that could be a problem, so you have a slot named `template` to do that work.
+
+Also we have provided different types skeleton unit that you can choose, for more detailed info, please scroll down to the bottom of this page to see the API description. Also, when building your own customized skeleton structure, you should be structuring them as closer to the real DOM as possible, which avoiding the DOM bouncing caused by the height difference.
+
+:::demo
+
+```html
+<template>
+  <el-skeleton style="width: 240px">
+    <template slot="template">
+      <el-skeleton-item variant="image" style="width: 240px; height: 240px;" />
+      <div style="padding: 14px;">
+        <el-skeleton-item variant="p" style="width: 50%" />
+        <div
+          style="display: flex; align-items: center; justify-items: space-between;"
+        >
+          <el-skeleton-item variant="text" style="margin-right: 16px;" />
+          <el-skeleton-item variant="text" style="width: 30%;" />
+        </div>
+      </div>
+    </template>
+  </el-skeleton>
+</template>
+```
+
+:::
+
+### Loading state
+
+When `Loading` ends, we always need to show the real UI with data to our end users. with the attribtue `loading` we can control whether showing the DOM. You can also use slot `default` to structure the real DOM element.
+
+:::demo
+
+```html
+<template>
+  <div style="width: 240px">
+    <p>
+      <label style="margin-right: 16px;">Switch Loading</label>
+      <el-switch v-model="loading" />
+    </p>
+    <el-skeleton style="width: 240px" :loading="loading" animated>
+      <template slot="template">
+        <el-skeleton-item
+          variant="image"
+          style="width: 240px; height: 240px;"
+        />
+        <div style="padding: 14px;">
+          <el-skeleton-item variant="h3" style="width: 50%;" />
+          <div
+            style="display: flex; align-items: center; justify-items: space-between; margin-top: 16px; height: 16px;"
+          >
+            <el-skeleton-item variant="text" style="margin-right: 16px;" />
+            <el-skeleton-item variant="text" style="width: 30%;" />
+          </div>
+        </div>
+      </template>
+      <template>
+        <el-card :body-style="{ padding: '0px', marginBottom: '1px' }">
+          <img
+            src="https://shadow.elemecdn.com/app/element/hamburger.9cf7b091-55e9-11e9-a976-7f4d0b07eef6.png"
+            class="image"
+          />
+          <div style="padding: 14px;">
+            <span>Delicious hamberger</span>
+            <div class="bottom card-header">
+              <span class="time">{{ currentDate }}</span>
+              <el-button type="text" class="button">Operation button</el-button>
+            </div>
+          </div>
+        </el-card>
+      </template>
+    </el-skeleton>
+  </div>
+</template>
+
+<script>
+  export default {
+    data () {
+      return {
+        loading: true,
+        currentDate: '2021-06-01'
+      }
+    },
+  }
+</script>
+```
+
+:::
+
+
+### Rendering a list of data
+
+Most of the time, skeleton is used as indicators of rendering a list of data which haven't been fetched from server yet, then we need to create a list of skeleton out of no where to make it look like it is loading, with `count` attribute, you can control how many these templates you need to render to the browser.
+
+
+:::tip
+We do not recommend rendering lots of fake UI to the browser, it will still cause the performance issue, it also costs longer to destroy the skeleton. Keep `count` as small as it can be to make better user experience.
+:::
+
+:::demo
+
+```html
+<template>
+  <div style="width: 400px">
+    <p>
+      <el-button @click="setLoading">Click me to reload</el-button>
+    </p>
+    <el-skeleton style="width:400px" :loading="loading" animated :count="3">
+      <template slot="template">
+        <el-skeleton-item
+          variant="image"
+          style="width: 400px; height: 267px;"
+        />
+        <div style="padding: 14px;">
+          <el-skeleton-item variant="h3" style="width: 50%;" />
+          <div
+            style="display: flex; align-items: center; justify-items: space-between; margin-top: 16px; height: 16px;"
+          >
+            <el-skeleton-item variant="text" style="margin-right: 16px;" />
+            <el-skeleton-item variant="text" style="width: 30%;" />
+          </div>
+        </div>
+      </template>
+      <template>
+        <el-card
+          :body-style="{ padding: '0px', marginBottom: '1px' }"
+          v-for="item in lists"
+          :key="item.name"
+        >
+          <img :src="item.imgUrl" class="image multi-content" />
+          <div style="padding: 14px;">
+            <span>Delicious hamberger</span>
+            <div class="bottom card-header">
+              <span class="time">{{ currentDate }}</span>
+              <el-button type="text" class="button">Operation button</el-button>
+            </div>
+          </div>
+        </el-card>
+      </template>
+    </el-skeleton>
+  </div>
+</template>
+
+<script>
+  export default {
+    data() {
+      return {
+        loading: true,
+        currentDate: '2021-06-01',
+        lists: [],
+      }
+    },
+    mounted() {
+      this.loading = false
+      this.lists = [
+        {
+          imgUrl:
+            'https://fuss10.elemecdn.com/a/3f/3302e58f9a181d2509f3dc0fa68b0jpeg.jpeg',
+          name: 'Deer',
+        },
+        {
+          imgUrl:
+            'https://fuss10.elemecdn.com/1/34/19aa98b1fcb2781c4fba33d850549jpeg.jpeg',
+          name: 'Horse',
+        },
+        {
+          imgUrl:
+            'https://fuss10.elemecdn.com/0/6f/e35ff375812e6b0020b6b4e8f9583jpeg.jpeg',
+          name: 'Mountain Lion',
+        },
+      ]
+    },
+    methods: {
+      setLoading() {
+        this.loading = true
+        setTimeout(() => (this.loading = false), 2000)
+      },
+    },
+  }
+</script>
+```
+
+:::
+
+### Avoiding rendering bouncing.
+Sometimes API responds very quickly, when that happens, the skeleton just gets rendered to the DOM then it needs to switch back to real DOM, that causes the sudden flashy. To avoid such thing, you can use the `throttle` attribute.
+
+
+:::demo
+
+```html
+<template>
+  <div style="width: 240px">
+    <p>
+      <label style="margin-right: 16px;">Switch Loading</label>
+      <el-switch v-model="loading" />
+    </p>
+    <el-skeleton
+      style="width: 240px"
+      :loading="loading"
+      animated
+      :throttle="500"
+    >
+      <template slot="template">
+        <el-skeleton-item
+          variant="image"
+          style="width: 240px; height: 240px;"
+        />
+        <div style="padding: 14px;">
+          <el-skeleton-item variant="h3" style="width: 50%;" />
+          <div
+            style="display: flex; align-items: center; justify-items: space-between; margin-top: 16px; height: 16px;"
+          >
+            <el-skeleton-item variant="text" style="margin-right: 16px;" />
+            <el-skeleton-item variant="text" style="width: 30%;" />
+          </div>
+        </div>
+      </template>
+      <template>
+        <el-card :body-style="{ padding: '0px', marginBottom: '1px'}">
+          <img
+            src="https://shadow.elemecdn.com/app/element/hamburger.9cf7b091-55e9-11e9-a976-7f4d0b07eef6.png"
+            class="image"
+          />
+          <div style="padding: 14px;">
+            <span>Delicious hamberger</span>
+            <div class="bottom card-header">
+              <span class="time">{{ currentDate }}</span>
+              <el-button type="text" class="button">operation button</el-button>
+            </div>
+          </div>
+        </el-card>
+      </template>
+    </el-skeleton>
+  </div>
+</template>
+
+<script>
+  export default {
+    data() {
+      return {
+        loading: false,
+        currentDate: '2021-06-01'
+      }
+    },
+  }
+</script>
+```
+:::
+
+### Skeleton Attributes
+
+| Attribute    | Description  | Type    | Acceptable Value | Default |
+| ------- | ---------------- | ------- | ------------ | ------ |
+| animated | whether showing the animation | boolean | true / false | false |
+| count   | how many fake items to render to the DOM | number | integer | 1 |
+| loading | whether showing the skeleton | boolean | true / false | true  |
+| rows    | numbers of the row, only useful when no template slot were given | number  | integer  | 4      |
+| throttle | Rendering delay in millseconds | number | integer | 0 |
+
+
+### Skeleton Item Attributes
+| Attribute    | Description             | Type    | Acceptable Value       | Default  |
+| ------- | ---------------- | ------- | ------------ | ------ |
+| variant | The current rendering skeleton type | Enum(string) | p / text / h1 / h3 / text / caption / button / image / circle / rect | text |
+
+
+### Skeleton Slots
+
+| Name | Description |
+| ---- | ----------- |
+| default | Real rendering DOM |
+| template | Custom rendering skeleton template |
diff --git a/examples/docs/fr-FR/skeleton.md b/examples/docs/fr-FR/skeleton.md
new file mode 100644
index 000000000..edf77d092
--- /dev/null
+++ b/examples/docs/fr-FR/skeleton.md
@@ -0,0 +1,315 @@
+## Skeleton
+
+When loading data, and you need a rich experience for visual and interactions for your end users, you can choose `skeleton`.
+
+### Basic usage
+
+The basic skeleton.
+
+:::demo
+
+```html
+<template>
+  <el-skeleton />
+</template>
+```
+
+:::
+
+### Configurable Rows
+
+You can configure the row numbers yourself, we are rendering a title row with 33% width of the others.
+
+:::demo
+
+```html
+<el-skeleton :rows="6" />
+```
+
+:::
+
+### Animation
+We have provided a switch flag indicating whether showing the loading animation, called `animated` when this is true, all children of `el-skeleton` will show animation
+
+:::demo
+
+```html
+<el-skeleton :rows="6" animated />
+```
+
+:::
+
+### Customized Template
+ElementPlus only provides the most common template, sometimes that could be a problem, so you have a slot named `template` to do that work.
+
+Also we have provided different types skeleton unit that you can choose, for more detailed info, please scroll down to the bottom of this page to see the API description. Also, when building your own customized skeleton structure, you should be structuring them as closer to the real DOM as possible, which avoiding the DOM bouncing caused by the height difference.
+
+:::demo
+
+```html
+<template>
+  <el-skeleton style="width: 240px">
+    <template slot="template">
+      <el-skeleton-item variant="image" style="width: 240px; height: 240px;" />
+      <div style="padding: 14px;">
+        <el-skeleton-item variant="p" style="width: 50%" />
+        <div
+          style="display: flex; align-items: center; justify-items: space-between;"
+        >
+          <el-skeleton-item variant="text" style="margin-right: 16px;" />
+          <el-skeleton-item variant="text" style="width: 30%;" />
+        </div>
+      </div>
+    </template>
+  </el-skeleton>
+</template>
+```
+
+:::
+
+### Loading state
+
+When `Loading` ends, we always need to show the real UI with data to our end users. with the attribtue `loading` we can control whether showing the DOM. You can also use slot `default` to structure the real DOM element.
+
+:::demo
+
+```html
+<template>
+  <div style="width: 240px">
+    <p>
+      <label style="margin-right: 16px;">Switch Loading</label>
+      <el-switch v-model="loading" />
+    </p>
+    <el-skeleton style="width: 240px" :loading="loading" animated>
+      <template slot="template">
+        <el-skeleton-item
+          variant="image"
+          style="width: 240px; height: 240px;"
+        />
+        <div style="padding: 14px;">
+          <el-skeleton-item variant="h3" style="width: 50%;" />
+          <div
+            style="display: flex; align-items: center; justify-items: space-between; margin-top: 16px; height: 16px;"
+          >
+            <el-skeleton-item variant="text" style="margin-right: 16px;" />
+            <el-skeleton-item variant="text" style="width: 30%;" />
+          </div>
+        </div>
+      </template>
+      <template>
+        <el-card :body-style="{ padding: '0px', marginBottom: '1px' }">
+          <img
+            src="https://shadow.elemecdn.com/app/element/hamburger.9cf7b091-55e9-11e9-a976-7f4d0b07eef6.png"
+            class="image"
+          />
+          <div style="padding: 14px;">
+            <span>Delicious hamberger</span>
+            <div class="bottom card-header">
+              <span class="time">{{ currentDate }}</span>
+              <el-button type="text" class="button">Operation button</el-button>
+            </div>
+          </div>
+        </el-card>
+      </template>
+    </el-skeleton>
+  </div>
+</template>
+
+<script>
+  export default {
+    data () {
+      return {
+        loading: true,
+        currentDate: '2021-06-01'
+      }
+    },
+  }
+</script>
+```
+
+:::
+
+
+### Rendering a list of data
+
+Most of the time, skeleton is used as indicators of rendering a list of data which haven't been fetched from server yet, then we need to create a list of skeleton out of no where to make it look like it is loading, with `count` attribute, you can control how many these templates you need to render to the browser.
+
+
+:::tip
+We do not recommend rendering lots of fake UI to the browser, it will still cause the performance issue, it also costs longer to destroy the skeleton. Keep `count` as small as it can be to make better user experience.
+:::
+
+:::demo
+
+```html
+<template>
+  <div style="width: 400px">
+    <p>
+      <el-button @click="setLoading">Click me to reload</el-button>
+    </p>
+    <el-skeleton style="width:400px" :loading="loading" animated :count="3">
+      <template slot="template">
+        <el-skeleton-item
+          variant="image"
+          style="width: 400px; height: 267px;"
+        />
+        <div style="padding: 14px;">
+          <el-skeleton-item variant="h3" style="width: 50%;" />
+          <div
+            style="display: flex; align-items: center; justify-items: space-between; margin-top: 16px; height: 16px;"
+          >
+            <el-skeleton-item variant="text" style="margin-right: 16px;" />
+            <el-skeleton-item variant="text" style="width: 30%;" />
+          </div>
+        </div>
+      </template>
+      <template>
+        <el-card
+          :body-style="{ padding: '0px', marginBottom: '1px' }"
+          v-for="item in lists"
+          :key="item.name"
+        >
+          <img :src="item.imgUrl" class="image multi-content" />
+          <div style="padding: 14px;">
+            <span>Delicious hamberger</span>
+            <div class="bottom card-header">
+              <span class="time">{{ currentDate }}</span>
+              <el-button type="text" class="button">Operation button</el-button>
+            </div>
+          </div>
+        </el-card>
+      </template>
+    </el-skeleton>
+  </div>
+</template>
+
+<script>
+  export default {
+    data() {
+      return {
+        loading: true,
+        currentDate: '2021-06-01',
+        lists: [],
+      }
+    },
+    mounted() {
+      this.loading = false
+      this.lists = [
+        {
+          imgUrl:
+            'https://fuss10.elemecdn.com/a/3f/3302e58f9a181d2509f3dc0fa68b0jpeg.jpeg',
+          name: 'Deer',
+        },
+        {
+          imgUrl:
+            'https://fuss10.elemecdn.com/1/34/19aa98b1fcb2781c4fba33d850549jpeg.jpeg',
+          name: 'Horse',
+        },
+        {
+          imgUrl:
+            'https://fuss10.elemecdn.com/0/6f/e35ff375812e6b0020b6b4e8f9583jpeg.jpeg',
+          name: 'Mountain Lion',
+        },
+      ]
+    },
+    methods: {
+      setLoading() {
+        this.loading = true
+        setTimeout(() => (this.loading = false), 2000)
+      },
+    },
+  }
+</script>
+```
+
+:::
+
+### Avoiding rendering bouncing.
+Sometimes API responds very quickly, when that happens, the skeleton just gets rendered to the DOM then it needs to switch back to real DOM, that causes the sudden flashy. To avoid such thing, you can use the `throttle` attribute.
+
+
+:::demo
+
+```html
+<template>
+  <div style="width: 240px">
+    <p>
+      <label style="margin-right: 16px;">Switch Loading</label>
+      <el-switch v-model="loading" />
+    </p>
+    <el-skeleton
+      style="width: 240px"
+      :loading="loading"
+      animated
+      :throttle="500"
+    >
+      <template slot="template">
+        <el-skeleton-item
+          variant="image"
+          style="width: 240px; height: 240px;"
+        />
+        <div style="padding: 14px;">
+          <el-skeleton-item variant="h3" style="width: 50%;" />
+          <div
+            style="display: flex; align-items: center; justify-items: space-between; margin-top: 16px; height: 16px;"
+          >
+            <el-skeleton-item variant="text" style="margin-right: 16px;" />
+            <el-skeleton-item variant="text" style="width: 30%;" />
+          </div>
+        </div>
+      </template>
+      <template>
+        <el-card :body-style="{ padding: '0px', marginBottom: '1px'}">
+          <img
+            src="https://shadow.elemecdn.com/app/element/hamburger.9cf7b091-55e9-11e9-a976-7f4d0b07eef6.png"
+            class="image"
+          />
+          <div style="padding: 14px;">
+            <span>Delicious hamberger</span>
+            <div class="bottom card-header">
+              <span class="time">{{ currentDate }}</span>
+              <el-button type="text" class="button">operation button</el-button>
+            </div>
+          </div>
+        </el-card>
+      </template>
+    </el-skeleton>
+  </div>
+</template>
+
+<script>
+  export default {
+    data() {
+      return {
+        loading: false,
+        currentDate: '2021-06-01'
+      }
+    },
+  }
+</script>
+```
+:::
+
+### Skeleton Attributes
+
+| Attribute    | Description  | Type    | Acceptable Value | Default |
+| ------- | ---------------- | ------- | ------------ | ------ |
+| animated | whether showing the animation | boolean | true / false | false |
+| count   | how many fake items to render to the DOM | number | integer | 1 |
+| loading | whether showing the skeleton | boolean | true / false | true  |
+| rows    | numbers of the row, only useful when no template slot were given | number  | integer  | 4      |
+| throttle | Rendering delay in millseconds | number | integer | 0 |
+
+
+### Skeleton Item Attributes
+| Attribute    | Description             | Type    | Acceptable Value       | Default  |
+| ------- | ---------------- | ------- | ------------ | ------ |
+| variant | The current rendering skeleton type | Enum(string) | p / text / h1 / h3 / text / caption / button / image / circle / rect | text |
+
+
+### Skeleton Slots
+
+| Name | Description |
+| ---- | ----------- |
+| default | Real rendering DOM |
+| template | Custom rendering skeleton template |
diff --git a/examples/docs/zh-CN/skeleton.md b/examples/docs/zh-CN/skeleton.md
new file mode 100644
index 000000000..a65831408
--- /dev/null
+++ b/examples/docs/zh-CN/skeleton.md
@@ -0,0 +1,316 @@
+## Skeleton 骨架屏
+
+在需要等待加载内容的位置设置一个骨架屏，某些场景下比 Loading 的视觉效果更好。
+
+### 基础用法
+
+基础的骨架效果。
+
+:::demo
+
+```html
+<template>
+  <el-skeleton />
+</template>
+```
+
+:::
+
+### 更多参数
+
+可以配置骨架屏段落数量，以便更接近真实渲染效果。首行会被渲染一个长度 33% 的段首。
+
+:::demo
+
+```html
+<el-skeleton :rows="6" />
+```
+
+:::
+
+### 动画效果
+
+显示动画效果。
+
+:::demo
+
+```html
+<el-skeleton :rows="6" animated />
+```
+
+:::
+
+### 自定义样式
+
+ElementPlus 提供的排版模式有时候并不满足要求，当您想要用自己定义的模板时，可以通过一个具名 Slot 来自己设定模板。
+
+我们提供了不同的模板单元可供使用，具体可选值请看 API 详细描述。 建议在描述模板的时候，尽量靠近真实的 DOM 结构，这样可以避免 DOM 高度差距引起的抖动。
+:::demo
+
+```html
+<template>
+  <el-skeleton style="width: 240px">
+    <template slot="template">
+      <el-skeleton-item variant="image" style="width: 240px; height: 240px;" />
+      <div style="padding: 14px;">
+        <el-skeleton-item variant="p" style="width: 50%" />
+        <div
+          style="display: flex; align-items: center; justify-items: space-between;"
+        >
+          <el-skeleton-item variant="text" style="margin-right: 16px;" />
+          <el-skeleton-item variant="text" style="width: 30%;" />
+        </div>
+      </div>
+    </template>
+  </el-skeleton>
+</template>
+```
+
+:::
+
+### Loading 状态
+
+当 Loading 结束之后，我们往往需要显示真实的 UI，可以通过 `loading` 的值来控制是否显示真实的 DOM。然后通过
+具名 Slot 来设置当 loading 结束之后需要展示的 UI。
+
+:::demo
+
+```html
+<template>
+  <div style="width: 240px">
+    <p>
+      <label style="margin-right: 16px;">切换 Loading</label>
+      <el-switch v-model="loading" />
+    </p>
+    <el-skeleton style="width: 240px" :loading="loading" animated>
+      <template slot="template">
+        <el-skeleton-item
+          variant="image"
+          style="width: 240px; height: 240px;"
+        />
+        <div style="padding: 14px;">
+          <el-skeleton-item variant="h3" style="width: 50%;" />
+          <div
+            style="display: flex; align-items: center; justify-items: space-between; margin-top: 16px; height: 16px;"
+          >
+            <el-skeleton-item variant="text" style="margin-right: 16px;" />
+            <el-skeleton-item variant="text" style="width: 30%;" />
+          </div>
+        </div>
+      </template>
+      <template>
+        <el-card :body-style="{ padding: '0px', marginBottom: '1px' }">
+          <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 card-header">
+              <span class="time">{{ currentDate }}</span>
+              <el-button type="text" class="button">操作按钮</el-button>
+            </div>
+          </div>
+        </el-card>
+      </template>
+    </el-skeleton>
+  </div>
+</template>
+
+<script>
+  export default {
+    data () {
+      return {
+        loading: true,
+        currentDate: '2021-06-01'
+      }
+    },
+  }
+</script>
+```
+
+:::
+
+### 渲染多条数据
+
+大多时候, 骨架屏都被用来渲染列表, 当我们需要在从服务器获取数据的时候来渲染一个假的 UI。利用 `count` 这个属性就能控制渲染多少条假的数据在页面上
+
+:::tip
+请注意, 请尽可能的将 `count` 的大小保持在最小状态, 即使是假的 UI, DOM 元素多了之后, 照样会引起性能问题, 并且在骨架屏销毁时所消耗的时间也会更长(相对的)。
+:::
+
+:::demo
+
+
+```html
+<template>
+  <div style="width: 400px">
+    <p>
+      <el-button @click="setLoading">点我重新加载</el-button>
+    </p>
+    <el-skeleton style="width:400px" :loading="loading" animated :count="3">
+      <template slot="template">
+        <el-skeleton-item
+          variant="image"
+          style="width: 400px; height: 267px;"
+        />
+        <div style="padding: 14px;">
+          <el-skeleton-item variant="h3" style="width: 50%;" />
+          <div
+            style="display: flex; align-items: center; justify-items: space-between; margin-top: 16px; height: 16px;"
+          >
+            <el-skeleton-item variant="text" style="margin-right: 16px;" />
+            <el-skeleton-item variant="text" style="width: 30%;" />
+          </div>
+        </div>
+      </template>
+      <template>
+        <el-card
+          :body-style="{ padding: '0px', marginBottom: '1px' }"
+          v-for="item in lists"
+          :key="item.name"
+        >
+          <img :src="item.imgUrl" class="image multi-content" />
+          <div style="padding: 14px;">
+            <span>{{ item.name }}</span>
+            <div class="bottom card-header">
+              <span class="time">{{ currentDate }}</span>
+              <el-button type="text" class="button">操作按钮</el-button>
+            </div>
+          </div>
+        </el-card>
+      </template>
+    </el-skeleton>
+  </div>
+</template>
+
+<script>
+  export default {
+    data() {
+      return {
+        loading: true,
+        currentDate: '2021-06-01',
+        lists: [],
+      }
+    },
+    mounted() {
+      this.loading = false
+      this.lists = [
+        {
+          imgUrl:
+            'https://fuss10.elemecdn.com/a/3f/3302e58f9a181d2509f3dc0fa68b0jpeg.jpeg',
+          name: '鹿',
+        },
+        {
+          imgUrl:
+            'https://fuss10.elemecdn.com/1/34/19aa98b1fcb2781c4fba33d850549jpeg.jpeg',
+          name: '马',
+        },
+        {
+          imgUrl:
+            'https://fuss10.elemecdn.com/0/6f/e35ff375812e6b0020b6b4e8f9583jpeg.jpeg',
+          name: '山狮',
+        },
+      ]
+    },
+    methods: {
+      setLoading() {
+        this.loading = true
+        setTimeout(() => (this.loading = false), 2000)
+      },
+    },
+  }
+</script>
+```
+
+:::
+
+### 防止渲染抖动
+
+有的时候，API 的请求回来的特别快，往往骨架占位刚刚被渲染，真实的数据就已经回来了，用户的界面会突然一闪，此时为了避免这种情况，就需要通过 `throttle` 属性来避免这个问题。
+
+:::demo
+
+```html
+<template>
+  <div style="width: 240px">
+    <p>
+      <label style="margin-right: 16px;">切换 Loading</label>
+      <el-switch v-model="loading" />
+    </p>
+    <el-skeleton
+      style="width: 240px"
+      :loading="loading"
+      animated
+      :throttle="500"
+    >
+      <template slot="template">
+        <el-skeleton-item
+          variant="image"
+          style="width: 240px; height: 240px;"
+        />
+        <div style="padding: 14px;">
+          <el-skeleton-item variant="h3" style="width: 50%;" />
+          <div
+            style="display: flex; align-items: center; justify-items: space-between; margin-top: 16px; height: 16px;"
+          >
+            <el-skeleton-item variant="text" style="margin-right: 16px;" />
+            <el-skeleton-item variant="text" style="width: 30%;" />
+          </div>
+        </div>
+      </template>
+      <template>
+        <el-card :body-style="{ padding: '0px', marginBottom: '1px'}">
+          <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 card-header">
+              <span class="time">{{ currentDate }}</span>
+              <el-button type="text" class="button">操作按钮</el-button>
+            </div>
+          </div>
+        </el-card>
+      </template>
+    </el-skeleton>
+  </div>
+</template>
+
+<script>
+  export default {
+    data() {
+      return {
+        loading: false,
+        currentDate: '2021-06-01'
+      }
+    },
+  }
+</script>
+```
+
+:::
+
+### Skeleton Attributes
+
+| 参数     | 说明                                        | 类型    | 可选值       | 默认值 |
+| -------- | ------------------------------------------- | ------- | ------------ | ------ |
+| animated | 是否使用动画                                | boolean | true / false | false  |
+| count    | 渲染多少个 template, 建议使用尽可能小的数字 | number  | integer      | 1      |
+| loading  | 是否显示 skeleton 骨架屏                    | boolean | true / false | true |
+| rows     | 骨架屏段落数量                              | number  | 正整数       | 4      |
+| throttle | 延迟占位 DOM 渲染的时间, 单位是毫秒         | number  | 正整数       | 0      |
+
+### Skeleton Item Attributes
+
+| 参数    | 说明                     | 类型         | 可选值                                                               | 默认值 |
+| ------- | ------------------------ | ------------ | -------------------------------------------------------------------- | ------ |
+| variant | 当前显示的占位元素的样式 | Enum(string) | p / text / h1 / h3 / text / caption / button / image / circle / rect | text   |
+
+### Skeleton Slots
+
+| name     | description          |
+| -------- | -------------------- |
+| default  | 用来展示真实 UI     |
+| template | 用来展示自定义占位符 |
diff --git a/examples/nav.config.json b/examples/nav.config.json
index f16534423..39f202eee 100644
--- a/examples/nav.config.json
+++ b/examples/nav.config.json
@@ -176,6 +176,10 @@
             {
               "path": "/avatar",
               "title": "Avatar 头像"
+            },
+            {
+              "path": "/skeleton",
+              "title": "Skeleton 骨架屏"
             }
           ]
         },
@@ -470,6 +474,10 @@
             {
               "path": "/badge",
               "title": "Badge"
+            },
+            {
+              "path": "/skeleton",
+              "title": "Skeleton"
             }
           ]
         },
@@ -768,6 +776,10 @@
             {
               "path": "/badge",
               "title": "Badge"
+            },
+            {
+              "path": "/skeleton",
+              "title": "Skeleton"
             }
           ]
         },
@@ -1066,6 +1078,10 @@
             {
               "path": "/badge",
               "title": "Badge"
+            },
+            {
+              "path": "/skeleton",
+              "title": "Skeleton"
             }
           ]
         },
diff --git a/packages/skeleton-item/index.js b/packages/skeleton-item/index.js
new file mode 100644
index 000000000..e921e1c71
--- /dev/null
+++ b/packages/skeleton-item/index.js
@@ -0,0 +1,8 @@
+import SkeletonItem from '../skeleton/src/item';
+
+/* istanbul ignore next */
+SkeletonItem.install = function(Vue) {
+  Vue.component(SkeletonItem.name, SkeletonItem);
+};
+
+export default SkeletonItem;
diff --git a/packages/skeleton/index.js b/packages/skeleton/index.js
new file mode 100644
index 000000000..9487e2149
--- /dev/null
+++ b/packages/skeleton/index.js
@@ -0,0 +1,8 @@
+import Skeleton from './src/index.vue';
+
+/* istanbul ignore next */
+Skeleton.install = function(Vue) {
+  Vue.component(Skeleton.name, Skeleton);
+};
+
+export default Skeleton;
diff --git a/packages/skeleton/src/img-placeholder.vue b/packages/skeleton/src/img-placeholder.vue
new file mode 100644
index 000000000..ef88a3b30
--- /dev/null
+++ b/packages/skeleton/src/img-placeholder.vue
@@ -0,0 +1,16 @@
+<template>
+  <svg
+    viewBox="0 0 1024 1024"
+    xmlns="http://www.w3.org/2000/svg"
+  >
+    <path
+      d="M64 896V128h896v768H64z m64-128l192-192 116.352 116.352L640 448l256 307.2V192H128v576z m224-480a96 96 0 1 1-0.064 192.064A96 96 0 0 1 352 288z"
+    />
+  </svg>
+</template>
+
+<script>
+export default {
+  name: 'ImgPlaceholder'
+};
+</script>
diff --git a/packages/skeleton/src/index.vue b/packages/skeleton/src/index.vue
new file mode 100644
index 000000000..150c200e6
--- /dev/null
+++ b/packages/skeleton/src/index.vue
@@ -0,0 +1,76 @@
+<template>
+  <div>
+    <template v-if="uiLoading">
+      <div :class="['el-skeleton', animated ? 'is-animated' : '', ]" v-bind="$attrs">
+        <template v-for="i in count">
+          <slot v-if="loading" name="template">
+            <el-skeleton-item
+              v-for="item in rows"
+              :key="item"
+              :class="{
+                'el-skeleton__paragraph': item !== 1,
+                'is-first': item === 1,
+                'is-last': item === rows && rows > 1,
+              }"
+              variant="p"
+            />
+          </slot>
+        </template>
+      </div>
+    </template>
+    <template v-else>
+      <slot v-bind="$attrs"></slot>
+    </template>
+  </div>
+</template>
+<script>
+export default {
+  name: 'ElSkeleton',
+  props: {
+    animated: {
+      type: Boolean,
+      default: false
+    },
+    count: {
+      type: Number,
+      default: 1
+    },
+    rows: {
+      type: Number,
+      default: 4
+    },
+    loading: {
+      type: Boolean,
+      default: true
+    },
+    throttle: {
+      type: Number,
+      default: 0
+    }
+  },
+  watch: {
+    loading: {
+      handler(loading) {
+        if (this.throttle <= 0) {
+          this.uiLoading = loading;
+          return;
+        }
+        if (loading) {
+          clearTimeout(this.timeoutHandle);
+          this.timeoutHandle = setTimeout(() => {
+            this.uiLoading = this.loading;
+          }, this.throttle);
+        } else {
+          this.uiLoading = loading;
+        }
+      },
+      immediate: true
+    }
+  },
+  data() {
+    return {
+      uiLoading: this.throttle <= 0 ? this.loading : false
+    };
+  }
+};
+</script>
diff --git a/packages/skeleton/src/item.vue b/packages/skeleton/src/item.vue
new file mode 100644
index 000000000..cf4280c37
--- /dev/null
+++ b/packages/skeleton/src/item.vue
@@ -0,0 +1,22 @@
+<template>
+  <div :class="['el-skeleton__item', `el-skeleton__${variant}`]">
+    <img-placeholder v-if="variant === 'image'" />
+  </div>
+</template>
+
+<script>
+  import ImgPlaceholder from './img-placeholder';
+
+  export default {
+    name: 'ElSkeletonItem',
+    props: {
+      variant: {
+        type: String,
+        default: 'text'
+      }
+    },
+    components: {
+      [ImgPlaceholder.name]: ImgPlaceholder
+    }
+  };
+</script>
\ No newline at end of file
diff --git a/packages/theme-chalk/src/common/var.scss b/packages/theme-chalk/src/common/var.scss
index 551dbe667..6db3e1314 100644
--- a/packages/theme-chalk/src/common/var.scss
+++ b/packages/theme-chalk/src/common/var.scss
@@ -964,6 +964,16 @@ $--avatar-medium-size: 36px !default;
 /// size|1|Avatar Size|3
 $--avatar-small-size: 28px !default;
 
+
+/* Skeleton 
+--------------------------*/
+$--skeleton-color: #f2f2f2 !default;
+$--skeleton-to-color: #e6e6e6 !default;
+
+/* Svg
+--------------- */
+$--svg-monochrome-grey: #DCDDE0 !default;
+
 /* Break-point
 --------------------------*/
 $--sm: 768px !default;
diff --git a/packages/theme-chalk/src/index.scss b/packages/theme-chalk/src/index.scss
index 3572c9962..b3ca6d942 100644
--- a/packages/theme-chalk/src/index.scss
+++ b/packages/theme-chalk/src/index.scss
@@ -78,3 +78,5 @@
 @import "./avatar.scss";
 @import "./drawer.scss";
 @import "./popconfirm.scss";
+@import "./skeleton.scss";
+@import "./skeleton-item.scss";
diff --git a/packages/theme-chalk/src/skeleton-item.scss b/packages/theme-chalk/src/skeleton-item.scss
new file mode 100644
index 000000000..687c3c4ea
--- /dev/null
+++ b/packages/theme-chalk/src/skeleton-item.scss
@@ -0,0 +1,84 @@
+@import 'mixins/mixins';
+@import 'common/var';
+
+@mixin circle-size($size) {
+  width: $size;
+  height: $size;
+  line-height: $size;
+}
+
+@include b(skeleton) {
+  @include e(item) {
+    background: $--skeleton-color;
+    display: inline-block;
+    height: 16px;
+    border-radius: $--border-radius-base;
+    width: 100%;
+  }
+
+  @include e(circle) {
+    border-radius: 50%;
+    @include circle-size($--avatar-medium-size);
+
+    @include m(lg) {
+      @include circle-size($--avatar-large-size);
+    }
+
+    @include m(md) {
+      @include circle-size($--avatar-small-size);
+    }
+  }
+
+  @include e(button) {
+    height: 40px;
+    width: 64px;
+    border-radius: 4px;
+  }
+
+  @include e(p) {
+    width: 100%;
+    @include when(last) {
+      width: 61%;
+    }
+
+    @include when(first) {
+      width: 33%;
+    }
+  }
+
+  @include e(text) {
+    width: 100%;
+    height: $--font-size-small;
+  }
+
+  @include e(caption) {
+    height: $--font-size-extra-small;
+  }
+
+  @include e(h1) {
+    height: $--font-size-extra-large;
+  }
+
+  @include e(h3) {
+    height: $--font-size-large;
+  }
+
+  @include e(h5) {
+    height: $--font-size-medium;
+  }
+
+  @include e(image) {
+    width: unset;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    border-radius: 0;
+
+    svg {
+      fill: $--svg-monochrome-grey;
+      width: 22%;
+      height: 22%;
+    }
+  }
+
+}
diff --git a/packages/theme-chalk/src/skeleton.scss b/packages/theme-chalk/src/skeleton.scss
new file mode 100644
index 000000000..5bbfa08f3
--- /dev/null
+++ b/packages/theme-chalk/src/skeleton.scss
@@ -0,0 +1,40 @@
+@import 'mixins/mixins';
+@import 'common/var';
+@import "./skeleton-item.scss";
+
+@mixin skeleton-color() {
+  background: linear-gradient(
+    90deg,
+    $--skeleton-color 25%,
+    $--skeleton-to-color 37%,
+    $--skeleton-color 63%
+  );
+  background-size: 400% 100%;
+  animation: #{$namespace}-skeleton-loading 1.4s ease infinite;
+}
+
+@keyframes #{$namespace}-skeleton-loading {
+  0% {
+    background-position: 100% 50%;
+  }
+  100% {
+    background-position: 0 50%;
+  }
+}
+
+@include b(skeleton) {
+  width: 100%;
+  @each $unit in (first-line, paragraph) {
+    @include e($unit) {
+      height: 16px;
+      margin-top: 16px;
+      background: $--skeleton-color;
+    }
+  }
+
+  @include when(animated) {
+    .#{$namespace}-skeleton__item {
+      @include skeleton-color();
+    }
+  }
+}
diff --git a/src/index.js b/src/index.js
index 47f43aeb3..0dbd3a5b4 100644
--- a/src/index.js
+++ b/src/index.js
@@ -82,6 +82,8 @@ 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 Skeleton from '../packages/skeleton/index.js';
+import SkeletonItem from '../packages/skeleton-item/index.js';
 import locale from 'element-ui/src/locale';
 import CollapseTransition from 'element-ui/src/transitions/collapse-transition';
 
@@ -163,6 +165,8 @@ const components = [
   Avatar,
   Drawer,
   Popconfirm,
+  Skeleton,
+  SkeletonItem,
   CollapseTransition
 ];
 
@@ -284,5 +288,7 @@ export default {
   CascaderPanel,
   Avatar,
   Drawer,
-  Popconfirm
+  Popconfirm,
+  Skeleton,
+  SkeletonItem
 };
diff --git a/test/unit/specs/skeleton.spec.js b/test/unit/specs/skeleton.spec.js
new file mode 100644
index 000000000..14ecd226d
--- /dev/null
+++ b/test/unit/specs/skeleton.spec.js
@@ -0,0 +1,106 @@
+import Skeleton from 'packages/skeleton';
+import { createTest, destroyVM, createVue, waitImmediate, wait} from '../util';
+
+const content = 'content';
+
+describe('Skeleton.vue', () => {
+  let vm;
+
+  afterEach(() => {
+    destroyVM(vm);
+  });
+
+  it('render test', () => {
+    vm = createTest(Skeleton, true);
+    const el = vm.$el;
+    expect(el.querySelectorAll('.el-skeleton__p').length).to.equal(4);
+    expect(Array.from(el.children[0].classList)).to.contain('el-skeleton');
+
+  });
+
+  it('should render with animation', () => {
+    vm = createTest(Skeleton, {
+      animated: true
+    }, true);
+
+    const el = vm.$el;
+
+    expect(Array.from(el.children[0].classList)).to.contain('is-animated');
+  });
+
+  it('should render x times', async() => {
+    vm = createVue(
+      {
+        template: `
+        <el-skeleton :count="count"></el-skeleton>
+      `,
+        data() {
+          return {
+            count: 1
+          };
+        }
+      },
+      true
+    );
+
+    const wrapper = vm.$el;
+    expect(wrapper.querySelectorAll('.el-skeleton__p').length).to.equal(4);
+
+    vm.count = 2;
+
+    await waitImmediate();
+    expect(wrapper.querySelectorAll('.el-skeleton__p').length).to.equal(8);
+  });
+
+  it('should render x rows', () => {
+    vm = createTest(Skeleton, {
+      rows: 5
+    }, true);
+
+    expect(vm.$el.querySelectorAll('.el-skeleton__p').length).to.equal(5);
+  });
+
+  it('should render default slots', () => {
+    vm = createVue(
+      {
+        template: `
+        <el-skeleton :loading="loading">{{content}}</el-skeleton>
+      `,
+        data() {
+          return {
+            loading: false,
+            content
+          };
+        }
+      }, true);
+    expect(vm.$el.textContent).to.be.equal(content);
+  });
+
+  it('should render template slots', () => {
+    vm = createVue(
+      {
+        template: `
+        <el-skeleton :loading="loading"><template slot="template">{{content}}</template></el-skeleton>
+      `,
+        data() {
+          return {
+            loading: true,
+            content
+          };
+        }
+      }, true);
+    expect(vm.$el.querySelector('.el-skeleton').textContent).to.be.equal(content);
+  });
+
+  it('should throttle rendering', async() => {
+    vm = createTest(Skeleton, {
+      throttle: 500
+    }, true);
+
+    expect((vm).uiLoading).to.be.equal(false);
+    await wait(600);
+
+    expect(vm.uiLoading).to.be.equal(true);
+  });
+
+});
diff --git a/types/element-ui.d.ts b/types/element-ui.d.ts
index ea819dbb7..5db59b2f2 100644
--- a/types/element-ui.d.ts
+++ b/types/element-ui.d.ts
@@ -80,6 +80,8 @@ import { ElPageHeader } from './page-header'
 import { ElAvatar } from './avatar'
 import { ElDrawer } from './drawer'
 import { ElPopconfirm } from './popconfirm'
+import { ElSkeleton } from './skeleton'
+import { ElSkeletonItem } from './skeleton-item'
 
 export interface InstallationOptions {
   locale: any,
@@ -344,3 +346,9 @@ export class Drawer extends ElDrawer {}
 
 /** Popconfirm Component */
 export class Popconfirm extends ElPopconfirm {}
+
+/** Skeleton Component */
+export class Skeleton extends ElSkeleton {}
+
+/** Skeleton Item Component */
+export class SkeletonItem extends ElSkeletonItem {}
diff --git a/types/skeleton-item.d.ts b/types/skeleton-item.d.ts
new file mode 100644
index 000000000..68db50c27
--- /dev/null
+++ b/types/skeleton-item.d.ts
@@ -0,0 +1,7 @@
+import { ElementUIComponent } from './component'
+
+/** Skeleton Item Component */
+export declare class ElSkeletonItem extends ElementUIComponent {
+  /** The current rendering skeleton type; default: text */ 
+  variant: 'p' | 'text' |  'h1' | 'h3' |  'text' | 'caption' | 'button' | 'image' | 'circle' | 'rect'
+}
diff --git a/types/skeleton.d.ts b/types/skeleton.d.ts
new file mode 100644
index 000000000..65e4a3e9b
--- /dev/null
+++ b/types/skeleton.d.ts
@@ -0,0 +1,33 @@
+import { ElementUIComponent } from './component'
+
+
+interface ElSkeletonSlots {
+  /* default slot:  Real rendering DOM */
+  default: VNode[];
+
+  /* template slot: Custom rendering skeleton template */
+  template: VNode[];
+
+  [key: string]: VNode[]
+}
+
+/** When loading data, and you need a rich experience for visual and interactions for your end users */
+export declare class ElSkeleton extends ElementUIComponent {
+  /** whether showing the animation; default: false */
+  animated: boolean
+
+  /** how many fake items to render to the DOM; default: 1 */
+  count: number
+
+  /** whether showing the skeleton; default true */
+  loading: boolean
+
+  /** numbers of the row, only useful when no template slot were given; default: 4 */
+  rows: boolean
+
+  /** Rendering delay in millseconds; default: 0 */
+  throttle: number
+
+  $slots: ElSkeletonSlots 
+
+}

From e1e65b318299baa22863edff2f9303c98c694605 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E5=A5=BD=E5=A4=9A=E5=A4=A7=E7=B1=B3?= <lost1q84@gmail.com>
Date: Wed, 2 Jun 2021 14:57:55 +0800
Subject: [PATCH 82/94] Local: fix week translations for hr locale (#21040)

---
 src/locale/lang/hr.js | 14 +++++++-------
 1 file changed, 7 insertions(+), 7 deletions(-)

diff --git a/src/locale/lang/hr.js b/src/locale/lang/hr.js
index 9b3801685..a4c0c1545 100644
--- a/src/locale/lang/hr.js
+++ b/src/locale/lang/hr.js
@@ -35,13 +35,13 @@ export default {
       month12: 'Prosinac',
       week: 'tjedan',
       weeks: {
-        sun: 'Pon',
-        mon: 'Uto',
-        tue: 'Sri',
-        wed: 'Čet',
-        thu: 'Pet',
-        fri: 'Sub',
-        sat: 'Ned'
+        sun: 'Ned',
+        mon: 'Pon',
+        tue: 'Uto',
+        wed: 'Sri',
+        thu: 'Čet',
+        fri: 'Pet',
+        sat: 'Sub'
       },
       months: {
         jan: 'Jan',

From 47158e96cbc4614dc01f495a7e433a8da0dc41d3 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E5=A5=BD=E5=A4=9A=E5=A4=A7=E7=B1=B3?= <lost1q84@gmail.com>
Date: Thu, 3 Jun 2021 15:34:00 +0800
Subject: [PATCH 83/94] Table: fix lazy load data (#21041)

---
 packages/table/src/store/tree.js | 7 ++++---
 1 file changed, 4 insertions(+), 3 deletions(-)

diff --git a/packages/table/src/store/tree.js b/packages/table/src/store/tree.js
index 7558588f8..1856fa2c4 100644
--- a/packages/table/src/store/tree.js
+++ b/packages/table/src/store/tree.js
@@ -187,13 +187,14 @@ export default {
 
     loadData(row, key, treeNode) {
       const { load } = this.table;
-      const { lazyTreeNodeMap, treeData } = this.states;
-      if (load && !treeData[key].loaded) {
-        treeData[key].loading = true;
+      const { treeData: rawTreeData } = this.states;
+      if (load && !rawTreeData[key].loaded) {
+        rawTreeData[key].loading = true;
         load(row, treeNode, data => {
           if (!Array.isArray(data)) {
             throw new Error('[ElTable] data must be an array');
           }
+          const { lazyTreeNodeMap, treeData } = this.states;
           treeData[key].loading = false;
           treeData[key].loaded = true;
           treeData[key].expanded = true;

From 4ed7ac67199e5863edfe7859cf8b64fef5099c89 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E5=A5=BD=E5=A4=9A=E5=A4=A7=E7=B1=B3?= <lost1q84@gmail.com>
Date: Fri, 4 Jun 2021 14:49:00 +0800
Subject: [PATCH 84/94] Docs: fix form hide-required-asterisk description
 (#21045)

---
 examples/docs/en-US/form.md | 2 +-
 examples/docs/zh-CN/form.md | 2 +-
 2 files changed, 2 insertions(+), 2 deletions(-)

diff --git a/examples/docs/en-US/form.md b/examples/docs/en-US/form.md
index 08f3fe02b..7eeb7c8ab 100644
--- a/examples/docs/en-US/form.md
+++ b/examples/docs/en-US/form.md
@@ -595,7 +595,7 @@ All components in a Form inherit their `size` attribute from that Form. Similarl
 | 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, 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 |
+| hide-required-asterisk | whether to hide a red asterisk (star) next to the required field label. | boolean | — | false |
 | show-message  | whether to show the error message | boolean | — | true |
 | inline-message  | whether to display the error message inline with the form item | boolean | — | false |
 | status-icon  | whether to display an icon indicating the validation result | boolean | — | false |
diff --git a/examples/docs/zh-CN/form.md b/examples/docs/zh-CN/form.md
index 6bb86ee38..27e05e649 100644
--- a/examples/docs/zh-CN/form.md
+++ b/examples/docs/zh-CN/form.md
@@ -590,7 +590,7 @@ W3C 标准中有如下[规定](https://www.w3.org/MarkUp/html-spec/html-spec_8.h
 | label-position | 表单域标签的位置，如果值为 left 或者 right 时，则需要设置 `label-width` | string |  right/left/top            | right |
 | label-width | 表单域标签的宽度，例如 '50px'。作为 Form 直接子元素的 form-item 会继承该值。支持 `auto`。 | string | — | — |
 | label-suffix | 表单域标签的后缀 | string | — | — |
-| hide-required-asterisk | 是否显示必填字段的标签旁边的红色星号 | boolean | — | false |
+| hide-required-asterisk | 是否隐藏必填字段的标签旁边的红色星号 | boolean | — | false |
 | show-message  | 是否显示校验错误信息 | boolean | — | true |
 | inline-message  | 是否以行内形式展示校验信息 | boolean | — | false |
 | status-icon  | 是否在输入框中显示校验结果反馈图标 | boolean | — | false |

From e1990a70d3cc0285a292b56c393fef24b175fa69 Mon Sep 17 00:00:00 2001
From: zj9495 <zj9495@gmail.com>
Date: Mon, 7 Jun 2021 15:33:46 +0800
Subject: [PATCH 85/94] Fix drawer destroy (#20715)

* Drawer: fix destroyOnClose bug
---
 packages/drawer/src/main.vue   |  7 ++++++-
 test/unit/specs/drawer.spec.js | 24 ++++++++++++++++++++++++
 2 files changed, 30 insertions(+), 1 deletion(-)

diff --git a/packages/drawer/src/main.vue b/packages/drawer/src/main.vue
index 87874f2c7..b4b31764e 100644
--- a/packages/drawer/src/main.vue
+++ b/packages/drawer/src/main.vue
@@ -136,7 +136,12 @@ export default {
         }
         this.prevActiveElement = document.activeElement;
       } else {
-        if (!this.closed) this.$emit('close');
+        if (!this.closed) {
+          this.$emit('close');
+          if (this.destroyOnClose === true) {
+            this.rendered = false;
+          }
+        }
         this.$nextTick(() => {
           if (this.prevActiveElement) {
             this.prevActiveElement.focus();
diff --git a/test/unit/specs/drawer.spec.js b/test/unit/specs/drawer.spec.js
index c8d1c3caf..cb16178c8 100644
--- a/test/unit/specs/drawer.spec.js
+++ b/test/unit/specs/drawer.spec.js
@@ -132,6 +132,30 @@ describe('Drawer', () => {
     expect(vm.$el.querySelector('.el-drawer__body')).not.to.exist;
   });
 
+  it('should destroy every child by visible change 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.visible = false;
+    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: `

From 5ba0f1c2194196a6440d5a631e7d421b97eb34e2 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E5=A5=BD=E5=A4=9A=E5=A4=A7=E7=B1=B3?= <lost1q84@gmail.com>
Date: Mon, 7 Jun 2021 19:05:03 +0800
Subject: [PATCH 86/94] Row: fix align top (#20963)

---
 examples/docs/en-US/layout.md     | 2 +-
 examples/docs/es/layout.md        | 2 +-
 examples/docs/fr-FR/layout.md     | 2 +-
 examples/docs/zh-CN/layout.md     | 2 +-
 packages/row/src/row.js           | 7 ++-----
 packages/theme-chalk/src/row.scss | 4 ++++
 6 files changed, 10 insertions(+), 9 deletions(-)

diff --git a/examples/docs/en-US/layout.md b/examples/docs/en-US/layout.md
index ac516e8bc..1a2603c7a 100644
--- a/examples/docs/en-US/layout.md
+++ b/examples/docs/en-US/layout.md
@@ -337,7 +337,7 @@ The classes are:
 | gutter | grid spacing | number | — | 0 |
 | type | layout mode, you can use flex, works in modern browsers | string | — | — |
 | justify | horizontal alignment of flex layout | string | start/end/center/space-around/space-between | start |
-| align | vertical alignment of flex layout | string | top/middle/bottom | top |
+| align | vertical alignment of flex layout | string | top/middle/bottom | — |
 | tag | custom element tag | string | * | div |
 
 ### Col Attributes
diff --git a/examples/docs/es/layout.md b/examples/docs/es/layout.md
index 3a7ab0b1b..8d0ff8842 100644
--- a/examples/docs/es/layout.md
+++ b/examples/docs/es/layout.md
@@ -338,7 +338,7 @@ Las clases son:
 | gutter    | espaciado de la grilla                   | number | —                                        | 0                 |
 | type      | modo del layout , puedes usar flex, funciona en navegadores modernos | string | —                                        | —                 |
 | justify   | alineación horizontal del layout flex    | string | start/end/center/space-around/space-between | start             |
-| align     | alineación vertical del layout flex      | string | top/middle/bottom                        | top               |
+| align     | alineación vertical del layout flex      | string | top/middle/bottom                        | —                |
 | tag       | tag de elemento propio                   | string | *                                        | div               |
 
 ### Atributos Col 
diff --git a/examples/docs/fr-FR/layout.md b/examples/docs/fr-FR/layout.md
index 81ee4428b..1198e7758 100644
--- a/examples/docs/fr-FR/layout.md
+++ b/examples/docs/fr-FR/layout.md
@@ -338,7 +338,7 @@ Ces classes sont:
 | 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 |
+| align | Alignement vertical pour la mise en page flex. | string | top/middle/bottom | — |
 | tag | Élément de tag personnalisé. | string | * | div |
 
 ### Attributs des colonnes
diff --git a/examples/docs/zh-CN/layout.md b/examples/docs/zh-CN/layout.md
index f6ef59c95..5a8530c41 100644
--- a/examples/docs/zh-CN/layout.md
+++ b/examples/docs/zh-CN/layout.md
@@ -336,7 +336,7 @@ import 'element-ui/lib/theme-chalk/display.css';
 | gutter | 栅格间隔 | number | — | 0 |
 | type | 布局模式，可选 flex，现代浏览器下有效 | string | — | — |
 | justify | flex 布局下的水平排列方式 | string | start/end/center/space-around/space-between | start |
-| align | flex 布局下的垂直排列方式 | string | top/middle/bottom | top |
+| align | flex 布局下的垂直排列方式 | string | top/middle/bottom | — |
 | tag | 自定义元素标签 | string | * | div |
 
 ### Col Attributes
diff --git a/packages/row/src/row.js b/packages/row/src/row.js
index 5611d7ce9..0fb072da5 100644
--- a/packages/row/src/row.js
+++ b/packages/row/src/row.js
@@ -14,10 +14,7 @@ export default {
       type: String,
       default: 'start'
     },
-    align: {
-      type: String,
-      default: 'top'
-    }
+    align: String
   },
 
   computed: {
@@ -38,7 +35,7 @@ export default {
       class: [
         'el-row',
         this.justify !== 'start' ? `is-justify-${this.justify}` : '',
-        this.align !== 'top' ? `is-align-${this.align}` : '',
+        this.align ? `is-align-${this.align}` : '',
         { 'el-row--flex': this.type === 'flex' }
       ],
       style: this.style
diff --git a/packages/theme-chalk/src/row.scss b/packages/theme-chalk/src/row.scss
index cec45c88b..0f435ae15 100644
--- a/packages/theme-chalk/src/row.scss
+++ b/packages/theme-chalk/src/row.scss
@@ -27,6 +27,10 @@
       justify-content: space-around;
     }
 
+    @include when(align-top) {
+      align-items: flex-start;
+    }
+
     @include when(align-middle) {
       align-items: center;
     }

From 9a4b758b77ea713001169d78b90706c3bd701b7e Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E5=A5=BD=E5=A4=9A=E5=A4=A7=E7=B1=B3?= <lost1q84@gmail.com>
Date: Tue, 8 Jun 2021 15:10:07 +0800
Subject: [PATCH 87/94] Select: fix the bug when the value is Boolean (#21052)

---
 packages/select/src/select.vue | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/packages/select/src/select.vue b/packages/select/src/select.vue
index af8be3584..9bca678ef 100644
--- a/packages/select/src/select.vue
+++ b/packages/select/src/select.vue
@@ -526,7 +526,7 @@
         }
         if (option) return option;
         const label = (!isObject && !isNull && !isUndefined)
-          ? value : '';
+          ? String(value) : '';
         let newOption = {
           value: value,
           currentLabel: label

From 8168d14e67b4982d5afebb82170c7eb2cfb421e6 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E5=A5=BD=E5=A4=9A=E5=A4=A7=E7=B1=B3?= <lost1q84@gmail.com>
Date: Wed, 9 Jun 2021 17:45:35 +0800
Subject: [PATCH 88/94] Calendar: fix first-day-of-week (#21057)

---
 packages/calendar/src/date-table.vue | 3 ++-
 1 file changed, 2 insertions(+), 1 deletion(-)

diff --git a/packages/calendar/src/date-table.vue b/packages/calendar/src/date-table.vue
index 715cc3463..aea24e64d 100644
--- a/packages/calendar/src/date-table.vue
+++ b/packages/calendar/src/date-table.vue
@@ -124,7 +124,8 @@ export default {
         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 => ({
+        const offset = (7 + firstDay - firstDayOfWeek) % 7;
+        const prevMonthDays = getPrevMonthLastDays(date, offset).map(day => ({
           text: day,
           type: 'prev'
         }));

From 2c39cce649e73b4e5cca8e9494fd8d9917eb2ca8 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E5=A5=BD=E5=A4=9A=E5=A4=A7=E7=B1=B3?= <lost1q84@gmail.com>
Date: Fri, 11 Jun 2021 16:19:03 +0800
Subject: [PATCH 89/94] Utils: fix isScroll (#21065)

---
 src/utils/dom.js | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/utils/dom.js b/src/utils/dom.js
index 8d2c66807..bb4c05c80 100644
--- a/src/utils/dom.js
+++ b/src/utils/dom.js
@@ -176,7 +176,7 @@ export function setStyle(element, styleName, value) {
 export const isScroll = (el, vertical) => {
   if (isServer) return;
 
-  const determinedDirection = vertical !== null || vertical !== undefined;
+  const determinedDirection = vertical !== null && vertical !== undefined;
   const overflow = determinedDirection
     ? vertical
       ? getStyle(el, 'overflow-y')

From 75290629aec56e685692296bdb9fe8d957a2e832 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E5=A5=BD=E5=A4=9A=E5=A4=A7=E7=B1=B3?= <lost1q84@gmail.com>
Date: Tue, 15 Jun 2021 17:04:59 +0800
Subject: [PATCH 90/94] Skeleton: fix skeleton.d.ts (#21074)

---
 types/skeleton.d.ts | 8 ++++----
 1 file changed, 4 insertions(+), 4 deletions(-)

diff --git a/types/skeleton.d.ts b/types/skeleton.d.ts
index 65e4a3e9b..6550566fc 100644
--- a/types/skeleton.d.ts
+++ b/types/skeleton.d.ts
@@ -1,12 +1,12 @@
 import { ElementUIComponent } from './component'
-
+import { VNode } from 'vue'
 
 interface ElSkeletonSlots {
   /* default slot:  Real rendering DOM */
-  default: VNode[];
+  default: VNode[]
 
   /* template slot: Custom rendering skeleton template */
-  template: VNode[];
+  template: VNode[]
 
   [key: string]: VNode[]
 }
@@ -28,6 +28,6 @@ export declare class ElSkeleton extends ElementUIComponent {
   /** Rendering delay in millseconds; default: 0 */
   throttle: number
 
-  $slots: ElSkeletonSlots 
+  $slots: ElSkeletonSlots
 
 }

From d0b345403219e0a6bf53a36dabc9e1e1d951c306 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E5=A5=BD=E5=A4=9A=E5=A4=A7=E7=B1=B3?= <lost1q84@gmail.com>
Date: Thu, 17 Jun 2021 15:18:15 +0800
Subject: [PATCH 91/94] Empty: add empty component (#21080)

---
 components.json                          |   3 +-
 examples/docs/en-US/empty.md             |  61 +++++++++++
 examples/docs/es/empty.md                |  61 +++++++++++
 examples/docs/fr-FR/empty.md             |  61 +++++++++++
 examples/docs/zh-CN/empty.md             |  61 +++++++++++
 examples/nav.config.json                 |  16 +++
 packages/empty/index.js                  |   7 ++
 packages/empty/src/img-empty.vue         | 132 +++++++++++++++++++++++
 packages/empty/src/index.vue             |  50 +++++++++
 packages/theme-chalk/src/common/var.scss |   6 ++
 packages/theme-chalk/src/empty.scss      |  45 ++++++++
 packages/theme-chalk/src/index.scss      |   1 +
 src/index.js                             |   5 +-
 src/locale/lang/af-ZA.js                 |   3 +
 src/locale/lang/ar.js                    |   3 +
 src/locale/lang/bg.js                    |   3 +
 src/locale/lang/ca.js                    |   3 +
 src/locale/lang/cs-CZ.js                 |   3 +
 src/locale/lang/da.js                    |   3 +
 src/locale/lang/de.js                    |   3 +
 src/locale/lang/ee.js                    |   3 +
 src/locale/lang/el.js                    |   3 +
 src/locale/lang/en.js                    |   3 +
 src/locale/lang/eo.js                    |   3 +
 src/locale/lang/es.js                    |   3 +
 src/locale/lang/eu.js                    |   3 +
 src/locale/lang/fa.js                    |   3 +
 src/locale/lang/fi.js                    |   3 +
 src/locale/lang/fr.js                    |   3 +
 src/locale/lang/he.js                    |   3 +
 src/locale/lang/hr.js                    |   3 +
 src/locale/lang/hu.js                    |   3 +
 src/locale/lang/hy-AM.js                 |   3 +
 src/locale/lang/id.js                    |   3 +
 src/locale/lang/it.js                    |   3 +
 src/locale/lang/ja.js                    |   3 +
 src/locale/lang/kg.js                    |   3 +
 src/locale/lang/km.js                    |   3 +
 src/locale/lang/ko.js                    |   3 +
 src/locale/lang/ku.js                    |   3 +
 src/locale/lang/kz.js                    |   3 +
 src/locale/lang/lt.js                    |   3 +
 src/locale/lang/lv.js                    |   3 +
 src/locale/lang/mn.js                    |   3 +
 src/locale/lang/nb-NO.js                 |   3 +
 src/locale/lang/nl.js                    |   3 +
 src/locale/lang/pl.js                    |   3 +
 src/locale/lang/pt-br.js                 |   3 +
 src/locale/lang/pt.js                    |   3 +
 src/locale/lang/ro.js                    |   3 +
 src/locale/lang/ru-RU.js                 |   3 +
 src/locale/lang/sk.js                    |   3 +
 src/locale/lang/sl.js                    |   3 +
 src/locale/lang/sr.js                    |   3 +
 src/locale/lang/sv-SE.js                 |   3 +
 src/locale/lang/ta.js                    |   3 +
 src/locale/lang/th.js                    |   3 +
 src/locale/lang/tk.js                    |   3 +
 src/locale/lang/tr-TR.js                 |   3 +
 src/locale/lang/ua.js                    |   3 +
 src/locale/lang/ug-CN.js                 |   3 +
 src/locale/lang/uz-UZ.js                 |   3 +
 src/locale/lang/vi.js                    |   3 +
 src/locale/lang/zh-CN.js                 |   3 +
 src/locale/lang/zh-TW.js                 |   3 +
 test/unit/specs/empty.spec.js            |  89 +++++++++++++++
 types/element-ui.d.ts                    |   4 +
 types/empty.d.ts                         |  31 ++++++
 68 files changed, 787 insertions(+), 2 deletions(-)
 create mode 100644 examples/docs/en-US/empty.md
 create mode 100644 examples/docs/es/empty.md
 create mode 100644 examples/docs/fr-FR/empty.md
 create mode 100644 examples/docs/zh-CN/empty.md
 create mode 100644 packages/empty/index.js
 create mode 100644 packages/empty/src/img-empty.vue
 create mode 100644 packages/empty/src/index.vue
 create mode 100644 packages/theme-chalk/src/empty.scss
 create mode 100644 test/unit/specs/empty.spec.js
 create mode 100644 types/empty.d.ts

diff --git a/components.json b/components.json
index 2abbcbb4e..ce0595f02 100644
--- a/components.json
+++ b/components.json
@@ -82,5 +82,6 @@
   "drawer": "./packages/drawer/index.js",
   "popconfirm": "./packages/popconfirm/index.js",
   "skeleton": "./packages/skeleton/index.js",
-  "skeleton-item": "./packages/skeleton-item/index.js"
+  "skeleton-item": "./packages/skeleton-item/index.js",
+  "empty": "./packages/empty/index.js"
 }
diff --git a/examples/docs/en-US/empty.md b/examples/docs/en-US/empty.md
new file mode 100644
index 000000000..ae375bd2d
--- /dev/null
+++ b/examples/docs/en-US/empty.md
@@ -0,0 +1,61 @@
+## Empty
+
+Placeholder hints for empty states.
+
+### Basic usage
+
+:::demo
+
+```html
+<el-empty description="description"></el-empty>
+```
+:::
+
+### Custom image
+
+Use `image` prop to set image URL.
+
+:::demo
+
+```html
+<el-empty image="https://shadow.elemecdn.com/app/element/hamburger.9cf7b091-55e9-11e9-a976-7f4d0b07eef6.png"></el-empty>
+```
+:::
+
+### Image size
+
+Use `image-size` prop to control image size.
+
+:::demo
+
+```html
+<el-empty :image-size="200"></el-empty>
+```
+:::
+
+### Bottom content
+
+Use the default slot to insert content at the bottom.
+
+:::demo
+```html
+<el-empty>
+  <el-button type="primary">Button</el-button>
+</el-empty>
+```
+:::
+
+### Empty Attributes
+| Attribute       | Description      | Type         | Acceptable Value    | Default   |
+|-------------  |---------------- |---------------- |---------------------- |-------- |
+| image          | image URL       | string  |          —             |    —     |
+| image-size    | image size (width)  | number | — |    —  |
+| description  | description    | string  |    —  |  — |
+
+### Empty Slots
+
+| Name | Description |
+|------|--------|
+| default | Custom bottom content  |
+| image | Custom image     |
+| description | Custom description     |
diff --git a/examples/docs/es/empty.md b/examples/docs/es/empty.md
new file mode 100644
index 000000000..e027e6132
--- /dev/null
+++ b/examples/docs/es/empty.md
@@ -0,0 +1,61 @@
+## Empty
+
+Placeholder hints for empty states.
+
+### Basic usage
+
+:::demo
+
+```html
+<el-empty description="descrição"></el-empty>
+```
+:::
+
+### Custom image
+
+Use `image` prop to set image URL.
+
+:::demo
+
+```html
+<el-empty image="https://shadow.elemecdn.com/app/element/hamburger.9cf7b091-55e9-11e9-a976-7f4d0b07eef6.png"></el-empty>
+```
+:::
+
+### Image size
+
+Use `image-size` prop to control image size.
+
+:::demo
+
+```html
+<el-empty :image-size="200"></el-empty>
+```
+:::
+
+### Bottom content
+
+Use the default slot to insert content at the bottom.
+
+:::demo
+```html
+<el-empty>
+  <el-button type="primary">Button</el-button>
+</el-empty>
+```
+:::
+
+### Empty Attributes
+| Attribute       | Description      | Type         | Acceptable Value    | Default Value   |
+|-------------  |---------------- |---------------- |---------------------- |-------- |
+| image          | image URL       | string  |          —             |    —     |
+| image-size    | image size (width)  | number | — |    —  |
+| description  | description    | string  |    —  |  — |
+
+### Empty Slots
+
+| Name | Description |
+|------|--------|
+| default | Custom bottom content  |
+| image | Custom image     |
+| description | Custom description     |
diff --git a/examples/docs/fr-FR/empty.md b/examples/docs/fr-FR/empty.md
new file mode 100644
index 000000000..af5b66108
--- /dev/null
+++ b/examples/docs/fr-FR/empty.md
@@ -0,0 +1,61 @@
+## Empty
+
+Placeholder hints for empty states.
+
+### Basic usage
+
+:::demo
+
+```html
+<el-empty description="description"></el-empty>
+```
+:::
+
+### Custom image
+
+Use `image` prop to set image URL.
+
+:::demo
+
+```html
+<el-empty image="https://shadow.elemecdn.com/app/element/hamburger.9cf7b091-55e9-11e9-a976-7f4d0b07eef6.png"></el-empty>
+```
+:::
+
+### Image size
+
+Use `image-size` prop to control image size.
+
+:::demo
+
+```html
+<el-empty :image-size="200"></el-empty>
+```
+:::
+
+### Bottom content
+
+Use the default slot to insert content at the bottom.
+
+:::demo
+```html
+<el-empty>
+  <el-button type="primary">Button</el-button>
+</el-empty>
+```
+:::
+
+### Empty Attributes
+| Attribute       | Description      | Type         | Acceptable Value    | Default Value   |
+|-------------  |---------------- |---------------- |---------------------- |-------- |
+| image          | image URL       | string  |          —             |    —     |
+| image-size    | image size (width)  | number | — |    —  |
+| description  | description    | string  |    —  |  — |
+
+### Empty Slots
+
+| Name | Description |
+|------|--------|
+| default | Custom bottom content  |
+| image | Custom image     |
+| description | Custom description     |
diff --git a/examples/docs/zh-CN/empty.md b/examples/docs/zh-CN/empty.md
new file mode 100644
index 000000000..5718d0a4d
--- /dev/null
+++ b/examples/docs/zh-CN/empty.md
@@ -0,0 +1,61 @@
+## Empty 空状态
+
+空状态时的占位提示。
+
+### 基础用法
+
+:::demo
+
+```html
+<el-empty description="描述文字"></el-empty>
+```
+:::
+
+### 自定义图片
+
+通过设置 `image` 属性传入图片 URL。
+
+:::demo
+
+```html
+<el-empty image="https://shadow.elemecdn.com/app/element/hamburger.9cf7b091-55e9-11e9-a976-7f4d0b07eef6.png"></el-empty>
+```
+:::
+
+### 图片尺寸
+
+通过设置 `image-size` 属性来控制图片大小。
+
+:::demo
+
+```html
+<el-empty :image-size="200"></el-empty>
+```
+:::
+
+### 底部内容
+
+使用默认插槽可在底部插入内容。
+
+:::demo
+```html
+<el-empty>
+  <el-button type="primary">按钮</el-button>
+</el-empty>
+```
+:::
+
+### Empty Attributes
+| 参数          | 说明            | 类型            | 可选值                 | 默认值   |
+|-------------  |---------------- |---------------- |---------------------- |-------- |
+| image          | 图片地址         | string  |          —             |    —     |
+| image-size    | 图片大小（宽度）  | number | — |    —  |
+| description  | 文本描述    | string  |    —  |  — |
+
+### Empty Slots
+
+| Name | 说明 |
+|------|--------|
+| default | 自定义底部内容  |
+| image | 自定义图片     |
+| description | 自定义描述文字     |
diff --git a/examples/nav.config.json b/examples/nav.config.json
index 39f202eee..d3532e47a 100644
--- a/examples/nav.config.json
+++ b/examples/nav.config.json
@@ -180,6 +180,10 @@
             {
               "path": "/skeleton",
               "title": "Skeleton 骨架屏"
+            },
+            {
+              "path": "/empty",
+              "title": "Empty 空状态"
             }
           ]
         },
@@ -478,6 +482,10 @@
             {
               "path": "/skeleton",
               "title": "Skeleton"
+            },
+            {
+              "path": "/empty",
+              "title": "Empty"
             }
           ]
         },
@@ -780,6 +788,10 @@
             {
               "path": "/skeleton",
               "title": "Skeleton"
+            },
+            {
+              "path": "/empty",
+              "title": "Empty"
             }
           ]
         },
@@ -1082,6 +1094,10 @@
             {
               "path": "/skeleton",
               "title": "Skeleton"
+            },
+            {
+              "path": "/empty",
+              "title": "Empty"
             }
           ]
         },
diff --git a/packages/empty/index.js b/packages/empty/index.js
new file mode 100644
index 000000000..c675514f0
--- /dev/null
+++ b/packages/empty/index.js
@@ -0,0 +1,7 @@
+import Empty from './src/index.vue';
+
+Empty.install = (Vue) => {
+  Vue.component(Empty.name, Empty);
+};
+
+export default Empty;
diff --git a/packages/empty/src/img-empty.vue b/packages/empty/src/img-empty.vue
new file mode 100644
index 000000000..f730d0f70
--- /dev/null
+++ b/packages/empty/src/img-empty.vue
@@ -0,0 +1,132 @@
+<template>
+  <svg
+    viewBox="0 0 79 86"
+    version="1.1"
+    xmlns="http://www.w3.org/2000/svg"
+    xmlns:xlink="http://www.w3.org/1999/xlink"
+  >
+    <defs>
+      <linearGradient
+        :id="`linearGradient-1-${id}`"
+        x1="38.8503086%"
+        y1="0%"
+        x2="61.1496914%"
+        y2="100%"
+      >
+        <stop stop-color="#FCFCFD" offset="0%" />
+        <stop stop-color="#EEEFF3" offset="100%" />
+      </linearGradient>
+      <linearGradient
+        :id="`linearGradient-2-${id}`"
+        x1="0%"
+        y1="9.5%"
+        x2="100%"
+        y2="90.5%"
+      >
+        <stop stop-color="#FCFCFD" offset="0%" />
+        <stop stop-color="#E9EBEF" offset="100%" />
+      </linearGradient>
+      <rect
+        :id="`path-3-${id}`"
+        x="0"
+        y="0"
+        width="17"
+        height="36"
+      />
+    </defs>
+    <g
+      id="Illustrations"
+      stroke="none"
+      stroke-width="1"
+      fill="none"
+      fill-rule="evenodd"
+    >
+      <g id="B-type" transform="translate(-1268.000000, -535.000000)">
+        <g id="Group-2" transform="translate(1268.000000, 535.000000)">
+          <path
+            id="Oval-Copy-2"
+            d="M39.5,86 C61.3152476,86 79,83.9106622 79,81.3333333 C79,78.7560045 57.3152476,78 35.5,78 C13.6847524,78 0,78.7560045 0,81.3333333 C0,83.9106622 17.6847524,86 39.5,86 Z"
+            fill="#F7F8FC"
+          />
+          <polygon
+            id="Rectangle-Copy-14"
+            fill="#E5E7E9"
+            transform="translate(27.500000, 51.500000) scale(1, -1) translate(-27.500000, -51.500000) "
+            points="13 58 53 58 42 45 2 45"
+          />
+          <g
+            id="Group-Copy"
+            transform="translate(34.500000, 31.500000) scale(-1, 1) rotate(-25.000000) translate(-34.500000, -31.500000) translate(7.000000, 10.000000)"
+          >
+            <polygon
+              id="Rectangle-Copy-10"
+              fill="#E5E7E9"
+              transform="translate(11.500000, 5.000000) scale(1, -1) translate(-11.500000, -5.000000) "
+              points="2.84078316e-14 3 18 3 23 7 5 7"
+            />
+            <polygon id="Rectangle-Copy-11" fill="#EDEEF2" points="-3.69149156e-15 7 38 7 38 43 -3.69149156e-15 43" />
+            <rect
+              id="Rectangle-Copy-12"
+              :fill="`url(#linearGradient-1-${id})`"
+              transform="translate(46.500000, 25.000000) scale(-1, 1) translate(-46.500000, -25.000000) "
+              x="38"
+              y="7"
+              width="17"
+              height="36"
+            />
+            <polygon
+              id="Rectangle-Copy-13"
+              fill="#F8F9FB"
+              transform="translate(39.500000, 3.500000) scale(-1, 1) translate(-39.500000, -3.500000) "
+              points="24 7 41 7 55 -3.63806207e-12 38 -3.63806207e-12"
+            />
+          </g>
+          <rect
+            id="Rectangle-Copy-15"
+            :fill="`url(#linearGradient-2-${id})`"
+            x="13"
+            y="45"
+            width="40"
+            height="36"
+          />
+          <g id="Rectangle-Copy-17" transform="translate(53.000000, 45.000000)">
+            <mask :id="`mask-4-${id}`" fill="white">
+              <use :xlink:href="`#path-3-${id}`" />
+            </mask>
+            <use
+              id="Mask"
+              fill="#E0E3E9"
+              transform="translate(8.500000, 18.000000) scale(-1, 1) translate(-8.500000, -18.000000) "
+              :xlink:href="`#path-3-${id}`"
+            />
+            <polygon
+              id="Rectangle-Copy"
+              fill="#D5D7DE"
+              :mask="`url(#mask-4-${id})`"
+              transform="translate(12.000000, 9.000000) scale(-1, 1) translate(-12.000000, -9.000000) "
+              points="7 0 24 0 20 18 -1.70530257e-13 16"
+            />
+          </g>
+          <polygon
+            id="Rectangle-Copy-18"
+            fill="#F8F9FB"
+            transform="translate(66.000000, 51.500000) scale(-1, 1) translate(-66.000000, -51.500000) "
+            points="62 45 79 45 70 58 53 58"
+          />
+        </g>
+      </g>
+    </g>
+  </svg>
+</template>
+
+<script>
+let id = 0;
+export default {
+  name: 'ImgEmpty',
+  data() {
+    return {
+      id: ++id
+    };
+  }
+};
+</script>
diff --git a/packages/empty/src/index.vue b/packages/empty/src/index.vue
new file mode 100644
index 000000000..3ace09c42
--- /dev/null
+++ b/packages/empty/src/index.vue
@@ -0,0 +1,50 @@
+<template>
+  <div class="el-empty">
+    <div class="el-empty__image" :style="imageStyle">
+      <img v-if="image" :src="image" ondragstart="return false">
+      <slot v-else name="image">
+        <img-empty />
+      </slot>
+    </div>
+    <div class="el-empty__description">
+      <slot v-if="$slots.description" name="description"></slot>
+      <p v-else>{{ emptyDescription }}</p>
+    </div>
+    <div v-if="$slots.default" class="el-empty__bottom">
+      <slot></slot>
+    </div>
+  </div>
+</template>
+
+<script>
+import ImgEmpty from './img-empty.vue';
+import { t } from 'element-ui/src/locale';
+
+export default {
+  name: 'ElEmpty',
+  components: {
+    [ImgEmpty.name]: ImgEmpty
+  },
+  props: {
+    image: {
+      type: String,
+      default: ''
+    },
+    imageSize: Number,
+    description: {
+      type: String,
+      default: ''
+    }
+  },
+  computed: {
+    emptyDescription() {
+      return this.description || t('el.empty.description');
+    },
+    imageStyle() {
+      return {
+        width: this.imageSize ? `${this.imageSize}px` : ''
+      };
+    }
+  }
+};
+</script>
diff --git a/packages/theme-chalk/src/common/var.scss b/packages/theme-chalk/src/common/var.scss
index 6db3e1314..79c91397a 100644
--- a/packages/theme-chalk/src/common/var.scss
+++ b/packages/theme-chalk/src/common/var.scss
@@ -964,6 +964,12 @@ $--avatar-medium-size: 36px !default;
 /// size|1|Avatar Size|3
 $--avatar-small-size: 28px !default;
 
+/* Empty
+-------------------------- */
+$--empty-padding: 40px 0 !default;
+$--empty-image-width: 160px !default;
+$--empty-description-margin-top: 20px !default;
+$--empty-bottom-margin-top: 20px !default;
 
 /* Skeleton 
 --------------------------*/
diff --git a/packages/theme-chalk/src/empty.scss b/packages/theme-chalk/src/empty.scss
new file mode 100644
index 000000000..76a384f0e
--- /dev/null
+++ b/packages/theme-chalk/src/empty.scss
@@ -0,0 +1,45 @@
+@import "mixins/mixins";
+@import "common/var";
+
+@include b(empty) {
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  flex-direction: column;
+  text-align: center;
+  box-sizing: border-box;
+  padding: $--empty-padding;
+
+  @include e(image) {
+    width: $--empty-image-width;
+
+    img {
+      user-select: none;
+      width: 100%;
+      height: 100%;
+      vertical-align: top;
+      object-fit: contain;
+    }
+
+    svg {
+      fill: $--svg-monochrome-grey;
+      width: 100%;
+      height: 100%;
+      vertical-align: top;
+    }
+  }
+
+  @include e(description) {
+    margin-top: $--empty-description-margin-top;
+
+    p {
+      margin: 0;
+      font-size: $--font-size-base;
+      color: $--color-text-secondary;
+    }
+  }
+
+  @include e(bottom) {
+    margin-top: $--empty-bottom-margin-top;
+  }
+}
diff --git a/packages/theme-chalk/src/index.scss b/packages/theme-chalk/src/index.scss
index b3ca6d942..276b1a5c2 100644
--- a/packages/theme-chalk/src/index.scss
+++ b/packages/theme-chalk/src/index.scss
@@ -80,3 +80,4 @@
 @import "./popconfirm.scss";
 @import "./skeleton.scss";
 @import "./skeleton-item.scss";
+@import "./empty.scss";
diff --git a/src/index.js b/src/index.js
index 0dbd3a5b4..6a4678af5 100644
--- a/src/index.js
+++ b/src/index.js
@@ -84,6 +84,7 @@ import Drawer from '../packages/drawer/index.js';
 import Popconfirm from '../packages/popconfirm/index.js';
 import Skeleton from '../packages/skeleton/index.js';
 import SkeletonItem from '../packages/skeleton-item/index.js';
+import Empty from '../packages/empty/index.js';
 import locale from 'element-ui/src/locale';
 import CollapseTransition from 'element-ui/src/transitions/collapse-transition';
 
@@ -167,6 +168,7 @@ const components = [
   Popconfirm,
   Skeleton,
   SkeletonItem,
+  Empty,
   CollapseTransition
 ];
 
@@ -290,5 +292,6 @@ export default {
   Drawer,
   Popconfirm,
   Skeleton,
-  SkeletonItem
+  SkeletonItem,
+  Empty
 };
diff --git a/src/locale/lang/af-ZA.js b/src/locale/lang/af-ZA.js
index 391be2e32..8707d3aa6 100644
--- a/src/locale/lang/af-ZA.js
+++ b/src/locale/lang/af-ZA.js
@@ -115,6 +115,9 @@ export default {
     popconfirm: {
       confirmButtonText: 'Yes', // to be translated
       cancelButtonText: 'No' // to be translated
+    },
+    empty: {
+      description: 'Geen Data'
     }
   }
 };
diff --git a/src/locale/lang/ar.js b/src/locale/lang/ar.js
index 401913fda..c27b92b0e 100644
--- a/src/locale/lang/ar.js
+++ b/src/locale/lang/ar.js
@@ -114,6 +114,9 @@ export default {
     popconfirm: {
       confirmButtonText: 'تأكيد',
       cancelButtonText: 'إلغاء'
+    },
+    empty: {
+      description: 'لايوجد بيانات'
     }
   }
 };
diff --git a/src/locale/lang/bg.js b/src/locale/lang/bg.js
index fb5b7bf6f..271c48525 100644
--- a/src/locale/lang/bg.js
+++ b/src/locale/lang/bg.js
@@ -115,6 +115,9 @@ export default {
     popconfirm: {
       confirmButtonText: 'Yes', // to be translated
       cancelButtonText: 'No' // to be translated
+    },
+    empty: {
+      description: 'Няма данни'
     }
   }
 };
diff --git a/src/locale/lang/ca.js b/src/locale/lang/ca.js
index 9b82bc631..d734dc8bc 100644
--- a/src/locale/lang/ca.js
+++ b/src/locale/lang/ca.js
@@ -114,6 +114,9 @@ export default {
     popconfirm: {
       confirmButtonText: 'Si',
       cancelButtonText: 'No'
+    },
+    empty: {
+      description: 'Sense Dades'
     }
   }
 };
diff --git a/src/locale/lang/cs-CZ.js b/src/locale/lang/cs-CZ.js
index a2e19ba1c..d439e1921 100644
--- a/src/locale/lang/cs-CZ.js
+++ b/src/locale/lang/cs-CZ.js
@@ -117,6 +117,9 @@ export default {
     popconfirm: {
       confirmButtonText: 'Yes', // to be translated
       cancelButtonText: 'No' // to be translated
+    },
+    empty: {
+      description: 'Žádná data'
     }
   }
 };
diff --git a/src/locale/lang/da.js b/src/locale/lang/da.js
index 35a25d7f8..d2b90d52c 100644
--- a/src/locale/lang/da.js
+++ b/src/locale/lang/da.js
@@ -114,6 +114,9 @@ export default {
     popconfirm: {
       confirmButtonText: 'Yes', // to be translated
       cancelButtonText: 'No' // to be translated
+    },
+    empty: {
+      description: 'Ingen data'
     }
   }
 };
diff --git a/src/locale/lang/de.js b/src/locale/lang/de.js
index a3ad3d576..319cc6643 100644
--- a/src/locale/lang/de.js
+++ b/src/locale/lang/de.js
@@ -116,6 +116,9 @@ export default {
     popconfirm: {
       confirmButtonText: 'Yes', // to be translated
       cancelButtonText: 'No' // to be translated
+    },
+    empty: {
+      description: 'Keine Daten'
     }
   }
 };
diff --git a/src/locale/lang/ee.js b/src/locale/lang/ee.js
index d9d4914e7..7b79e5875 100644
--- a/src/locale/lang/ee.js
+++ b/src/locale/lang/ee.js
@@ -115,6 +115,9 @@ export default {
     popconfirm: {
       confirmButtonText: 'Yes', // to be translated
       cancelButtonText: 'No' // to be translated
+    },
+    empty: {
+      description: 'Andmed puuduvad'
     }
   }
 };
diff --git a/src/locale/lang/el.js b/src/locale/lang/el.js
index 8722a69d4..5358fdc04 100644
--- a/src/locale/lang/el.js
+++ b/src/locale/lang/el.js
@@ -115,6 +115,9 @@ export default {
     popconfirm: {
       confirmButtonText: 'Yes', // to be translated
       cancelButtonText: 'No' // to be translated
+    },
+    empty: {
+      description: 'Χωρίς Δεδομένα'
     }
   }
 };
diff --git a/src/locale/lang/en.js b/src/locale/lang/en.js
index b096f421d..6c7b68940 100644
--- a/src/locale/lang/en.js
+++ b/src/locale/lang/en.js
@@ -115,6 +115,9 @@ export default {
     popconfirm: {
       confirmButtonText: 'Yes',
       cancelButtonText: 'No'
+    },
+    empty: {
+      description: 'No Data'
     }
   }
 };
diff --git a/src/locale/lang/eo.js b/src/locale/lang/eo.js
index da1d8decd..467bb2058 100644
--- a/src/locale/lang/eo.js
+++ b/src/locale/lang/eo.js
@@ -115,6 +115,9 @@ export default {
     popconfirm: {
       confirmButtonText: 'Yes', // to be translated
       cancelButtonText: 'No' // to be translated
+    },
+    empty: {
+      description: 'Neniuj datumoj'
     }
   }
 };
diff --git a/src/locale/lang/es.js b/src/locale/lang/es.js
index 8a19eef82..25cda252f 100644
--- a/src/locale/lang/es.js
+++ b/src/locale/lang/es.js
@@ -114,6 +114,9 @@ export default {
     popconfirm: {
       confirmButtonText: 'Si',
       cancelButtonText: 'No'
+    },
+    empty: {
+      description: 'Sin Datos'
     }
   }
 };
diff --git a/src/locale/lang/eu.js b/src/locale/lang/eu.js
index 7da9aa427..2b144983b 100644
--- a/src/locale/lang/eu.js
+++ b/src/locale/lang/eu.js
@@ -115,6 +115,9 @@ export default {
     popconfirm: {
       confirmButtonText: 'Yes', // to be translated
       cancelButtonText: 'No' // to be translated
+    },
+    empty: {
+      description: 'Daturik ez'
     }
   }
 };
diff --git a/src/locale/lang/fa.js b/src/locale/lang/fa.js
index 3e00457f1..f3b9ede06 100644
--- a/src/locale/lang/fa.js
+++ b/src/locale/lang/fa.js
@@ -115,6 +115,9 @@ export default {
     popconfirm: {
       confirmButtonText: 'Yes', // to be translated
       cancelButtonText: 'No' // to be translated
+    },
+    empty: {
+      description: 'اطلاعاتی وجود ندارد'
     }
   }
 };
diff --git a/src/locale/lang/fi.js b/src/locale/lang/fi.js
index 9f1e7c720..c92a38cc3 100644
--- a/src/locale/lang/fi.js
+++ b/src/locale/lang/fi.js
@@ -115,6 +115,9 @@ export default {
     popconfirm: {
       confirmButtonText: 'Yes', // to be translated
       cancelButtonText: 'No' // to be translated
+    },
+    empty: {
+      description: 'Ei tietoja'
     }
   }
 };
diff --git a/src/locale/lang/fr.js b/src/locale/lang/fr.js
index 13a31a2e5..2918584fe 100644
--- a/src/locale/lang/fr.js
+++ b/src/locale/lang/fr.js
@@ -114,6 +114,9 @@ export default {
     popconfirm: {
       confirmButtonText: 'Yes', // to be translated
       cancelButtonText: 'No' // to be translated
+    },
+    empty: {
+      description: 'Aucune donnée'
     }
   }
 };
diff --git a/src/locale/lang/he.js b/src/locale/lang/he.js
index c63163cb6..232e7590e 100644
--- a/src/locale/lang/he.js
+++ b/src/locale/lang/he.js
@@ -115,6 +115,9 @@ export default {
     popconfirm: {
       confirmButtonText: 'Yes', // to be translated
       cancelButtonText: 'No' // to be translated
+    },
+    empty: {
+      description: 'אין נתונים'
     }
   }
 };
diff --git a/src/locale/lang/hr.js b/src/locale/lang/hr.js
index a4c0c1545..0b718a2ff 100644
--- a/src/locale/lang/hr.js
+++ b/src/locale/lang/hr.js
@@ -115,6 +115,9 @@ export default {
     popconfirm: {
       confirmButtonText: 'Yes', // to be translated
       cancelButtonText: 'No' // to be translated
+    },
+    empty: {
+      description: 'Nema podataka'
     }
   }
 };
diff --git a/src/locale/lang/hu.js b/src/locale/lang/hu.js
index d4c5e7666..750b6742f 100644
--- a/src/locale/lang/hu.js
+++ b/src/locale/lang/hu.js
@@ -114,6 +114,9 @@ export default {
     popconfirm: {
       confirmButtonText: 'Yes', // to be translated
       cancelButtonText: 'No' // to be translated
+    },
+    empty: {
+      description: 'Nincs adat'
     }
   }
 };
diff --git a/src/locale/lang/hy-AM.js b/src/locale/lang/hy-AM.js
index f8d55f8da..eb43c6548 100644
--- a/src/locale/lang/hy-AM.js
+++ b/src/locale/lang/hy-AM.js
@@ -115,6 +115,9 @@ export default {
     popconfirm: {
       confirmButtonText: 'Yes', // to be translated
       cancelButtonText: 'No' // to be translated
+    },
+    empty: {
+      description: 'Տուեալներ չկան'
     }
   }
 };
diff --git a/src/locale/lang/id.js b/src/locale/lang/id.js
index 3a83858f0..1ac83087c 100644
--- a/src/locale/lang/id.js
+++ b/src/locale/lang/id.js
@@ -115,6 +115,9 @@ export default {
     popconfirm: {
       confirmButtonText: 'Ya',
       cancelButtonText: 'Tidak'
+    },
+    empty: {
+      description: 'Tidak ada data'
     }
   }
 };
diff --git a/src/locale/lang/it.js b/src/locale/lang/it.js
index 40bc974ee..42f8505d4 100644
--- a/src/locale/lang/it.js
+++ b/src/locale/lang/it.js
@@ -114,6 +114,9 @@ export default {
     popconfirm: {
       confirmButtonText: 'Yes', // to be translated
       cancelButtonText: 'No' // to be translated
+    },
+    empty: {
+      description: 'Nessun dato'
     }
   }
 };
diff --git a/src/locale/lang/ja.js b/src/locale/lang/ja.js
index a6b62bef6..fc54e379a 100644
--- a/src/locale/lang/ja.js
+++ b/src/locale/lang/ja.js
@@ -115,6 +115,9 @@ export default {
     popconfirm: {
       confirmButtonText: 'Yes', // to be translated
       cancelButtonText: 'No' // to be translated
+    },
+    empty: {
+      description: 'データなし'
     }
   }
 };
diff --git a/src/locale/lang/kg.js b/src/locale/lang/kg.js
index 8c8526f6e..8dce6e5c0 100644
--- a/src/locale/lang/kg.js
+++ b/src/locale/lang/kg.js
@@ -115,6 +115,9 @@ export default {
     popconfirm: {
       confirmButtonText: 'Yes', // to be translated
       cancelButtonText: 'No' // to be translated
+    },
+    empty: {
+      description: 'маалымат жок'
     }
   }
 };
diff --git a/src/locale/lang/km.js b/src/locale/lang/km.js
index 6819c42e1..4a08e45f1 100644
--- a/src/locale/lang/km.js
+++ b/src/locale/lang/km.js
@@ -115,6 +115,9 @@ export default {
     popconfirm: {
       confirmButtonText: 'ព្រម',
       cancelButtonText: 'មិនព្រម'
+    },
+    empty: {
+      description: 'គ្មានទិន្ន័យ'
     }
   }
 };
diff --git a/src/locale/lang/ko.js b/src/locale/lang/ko.js
index b5b4c5ee4..8ab8bc9f6 100644
--- a/src/locale/lang/ko.js
+++ b/src/locale/lang/ko.js
@@ -115,6 +115,9 @@ export default {
     popconfirm: {
       confirmButtonText: 'Yes', // to be translated
       cancelButtonText: 'No' // to be translated
+    },
+    empty: {
+      description: '데이터 없음'
     }
   }
 };
diff --git a/src/locale/lang/ku.js b/src/locale/lang/ku.js
index 5188ba704..f9bb81293 100644
--- a/src/locale/lang/ku.js
+++ b/src/locale/lang/ku.js
@@ -115,6 +115,9 @@ export default {
     popconfirm: {
       confirmButtonText: 'Yes', // to be translated
       cancelButtonText: 'No' // to be translated
+    },
+    empty: {
+      description: 'Agahî tune'
     }
   }
 };
diff --git a/src/locale/lang/kz.js b/src/locale/lang/kz.js
index acfc8e27e..664ae38a0 100644
--- a/src/locale/lang/kz.js
+++ b/src/locale/lang/kz.js
@@ -115,6 +115,9 @@ export default {
     popconfirm: {
       confirmButtonText: 'Yes', // to be translated
       cancelButtonText: 'No' // to be translated
+    },
+    empty: {
+      description: 'Деректер жоқ'
     }
   }
 };
diff --git a/src/locale/lang/lt.js b/src/locale/lang/lt.js
index 988de6b95..696a52f4f 100644
--- a/src/locale/lang/lt.js
+++ b/src/locale/lang/lt.js
@@ -115,6 +115,9 @@ export default {
     popconfirm: {
       confirmButtonText: 'Yes', // to be translated
       cancelButtonText: 'No' // to be translated
+    },
+    empty: {
+      description: 'Duomenų nerasta'
     }
   }
 };
diff --git a/src/locale/lang/lv.js b/src/locale/lang/lv.js
index b9497ea18..824480c5c 100644
--- a/src/locale/lang/lv.js
+++ b/src/locale/lang/lv.js
@@ -115,6 +115,9 @@ export default {
     popconfirm: {
       confirmButtonText: 'Yes', // to be translated
       cancelButtonText: 'No' // to be translated
+    },
+    empty: {
+      description: 'Nav datu'
     }
   }
 };
diff --git a/src/locale/lang/mn.js b/src/locale/lang/mn.js
index a0e3f6d65..634351958 100644
--- a/src/locale/lang/mn.js
+++ b/src/locale/lang/mn.js
@@ -115,6 +115,9 @@ export default {
     popconfirm: {
       confirmButtonText: 'Yes', // to be translated
       cancelButtonText: 'No' // to be translated
+    },
+    empty: {
+      description: 'Өгөгдөл байхгүй'
     }
   }
 };
diff --git a/src/locale/lang/nb-NO.js b/src/locale/lang/nb-NO.js
index 843a67e0d..cd5d205a4 100644
--- a/src/locale/lang/nb-NO.js
+++ b/src/locale/lang/nb-NO.js
@@ -114,6 +114,9 @@ export default {
     popconfirm: {
       confirmButtonText: 'Yes', // to be translated
       cancelButtonText: 'No' // to be translated
+    },
+    empty: {
+      description: 'Ingen Data'
     }
   }
 };
diff --git a/src/locale/lang/nl.js b/src/locale/lang/nl.js
index 6d084318b..1fb7cb2b1 100644
--- a/src/locale/lang/nl.js
+++ b/src/locale/lang/nl.js
@@ -115,6 +115,9 @@ export default {
     popconfirm: {
       confirmButtonText: 'Yes', // to be translated
       cancelButtonText: 'No' // to be translated
+    },
+    empty: {
+      description: 'Geen data'
     }
   }
 };
diff --git a/src/locale/lang/pl.js b/src/locale/lang/pl.js
index 72af96397..9be5b99e6 100644
--- a/src/locale/lang/pl.js
+++ b/src/locale/lang/pl.js
@@ -115,6 +115,9 @@ export default {
     popconfirm: {
       confirmButtonText: 'Yes', // to be translated
       cancelButtonText: 'No' // to be translated
+    },
+    empty: {
+      description: 'Brak danych'
     }
   }
 };
diff --git a/src/locale/lang/pt-br.js b/src/locale/lang/pt-br.js
index 42ae6aa2d..8516c9ed3 100644
--- a/src/locale/lang/pt-br.js
+++ b/src/locale/lang/pt-br.js
@@ -115,6 +115,9 @@ export default {
     popconfirm: {
       confirmButtonText: 'Sim',
       cancelButtonText: 'Não'
+    },
+    empty: {
+      description: 'Sem dados'
     }
   }
 };
diff --git a/src/locale/lang/pt.js b/src/locale/lang/pt.js
index 722e0a7a8..23155be06 100644
--- a/src/locale/lang/pt.js
+++ b/src/locale/lang/pt.js
@@ -115,6 +115,9 @@ export default {
     popconfirm: {
       confirmButtonText: 'Yes', // to be translated
       cancelButtonText: 'No' // to be translated
+    },
+    empty: {
+      description: 'Sem dados'
     }
   }
 };
diff --git a/src/locale/lang/ro.js b/src/locale/lang/ro.js
index 3f5646b96..0362394a1 100644
--- a/src/locale/lang/ro.js
+++ b/src/locale/lang/ro.js
@@ -115,6 +115,9 @@ export default {
     popconfirm: {
       confirmButtonText: 'Yes', // to be translated
       cancelButtonText: 'No' // to be translated
+    },
+    empty: {
+      description: 'Nu există date'
     }
   }
 };
diff --git a/src/locale/lang/ru-RU.js b/src/locale/lang/ru-RU.js
index af9501857..d7bcf8ec2 100644
--- a/src/locale/lang/ru-RU.js
+++ b/src/locale/lang/ru-RU.js
@@ -115,6 +115,9 @@ export default {
     popconfirm: {
       confirmButtonText: 'OK',
       cancelButtonText: 'Отмена'
+    },
+    empty: {
+      description: 'Нет данных'
     }
   }
 };
diff --git a/src/locale/lang/sk.js b/src/locale/lang/sk.js
index 7c7103cb8..7893e934c 100644
--- a/src/locale/lang/sk.js
+++ b/src/locale/lang/sk.js
@@ -117,6 +117,9 @@ export default {
     popconfirm: {
       confirmButtonText: 'Yes', // to be translated
       cancelButtonText: 'No' // to be translated
+    },
+    empty: {
+      description: 'Žiadne dáta'
     }
   }
 };
diff --git a/src/locale/lang/sl.js b/src/locale/lang/sl.js
index 8c64be817..8542d33cb 100644
--- a/src/locale/lang/sl.js
+++ b/src/locale/lang/sl.js
@@ -115,6 +115,9 @@ export default {
     popconfirm: {
       confirmButtonText: 'Yes', // to be translated
       cancelButtonText: 'No' // to be translated
+    },
+    empty: {
+      description: 'Ni podatkov'
     }
   }
 };
diff --git a/src/locale/lang/sr.js b/src/locale/lang/sr.js
index a64b8aaeb..915be08ec 100644
--- a/src/locale/lang/sr.js
+++ b/src/locale/lang/sr.js
@@ -115,6 +115,9 @@ export default {
     popconfirm: {
       confirmButtonText: 'Yes', // to be translated
       cancelButtonText: 'No' // to be translated
+    },
+    empty: {
+      description: 'Нема података'
     }
   }
 };
diff --git a/src/locale/lang/sv-SE.js b/src/locale/lang/sv-SE.js
index 2f0ae4e7b..c2fd7af94 100644
--- a/src/locale/lang/sv-SE.js
+++ b/src/locale/lang/sv-SE.js
@@ -115,6 +115,9 @@ export default {
     popconfirm: {
       confirmButtonText: 'Ja',
       cancelButtonText: 'Nej'
+    },
+    empty: {
+      description: 'Inga Data'
     }
   }
 };
diff --git a/src/locale/lang/ta.js b/src/locale/lang/ta.js
index 2f2892981..5b04f8f66 100644
--- a/src/locale/lang/ta.js
+++ b/src/locale/lang/ta.js
@@ -114,6 +114,9 @@ export default {
     popconfirm: {
       confirmButtonText: 'Yes', // to be translated
       cancelButtonText: 'No' // to be translated
+    },
+    empty: {
+      description: 'தரவு இல்லை'
     }
   }
 };
diff --git a/src/locale/lang/th.js b/src/locale/lang/th.js
index a175e7a40..a5484a09e 100644
--- a/src/locale/lang/th.js
+++ b/src/locale/lang/th.js
@@ -115,6 +115,9 @@ export default {
     popconfirm: {
       confirmButtonText: 'Yes', // to be translated
       cancelButtonText: 'No' // to be translated
+    },
+    empty: {
+      description: 'ไม่พบข้อมูล'
     }
   }
 };
diff --git a/src/locale/lang/tk.js b/src/locale/lang/tk.js
index 86dc9a664..f510cc85c 100644
--- a/src/locale/lang/tk.js
+++ b/src/locale/lang/tk.js
@@ -115,6 +115,9 @@ export default {
     popconfirm: {
       confirmButtonText: 'Yes', // to be translated
       cancelButtonText: 'No' // to be translated
+    },
+    empty: {
+      description: 'Maglumat ýok'
     }
   }
 };
diff --git a/src/locale/lang/tr-TR.js b/src/locale/lang/tr-TR.js
index 1984dbc87..547b60ea9 100644
--- a/src/locale/lang/tr-TR.js
+++ b/src/locale/lang/tr-TR.js
@@ -115,6 +115,9 @@ export default {
     popconfirm: {
       confirmButtonText: 'Yes', // to be translated
       cancelButtonText: 'No' // to be translated
+    },
+    empty: {
+      description: 'Veri yok'
     }
   }
 };
diff --git a/src/locale/lang/ua.js b/src/locale/lang/ua.js
index 974066556..7327a9b74 100644
--- a/src/locale/lang/ua.js
+++ b/src/locale/lang/ua.js
@@ -115,6 +115,9 @@ export default {
     popconfirm: {
       confirmButtonText: 'Так',
       cancelButtonText: 'Ні'
+    },
+    empty: {
+      description: 'Немає даних'
     }
   }
 };
diff --git a/src/locale/lang/ug-CN.js b/src/locale/lang/ug-CN.js
index e12f181f9..20e125ea4 100644
--- a/src/locale/lang/ug-CN.js
+++ b/src/locale/lang/ug-CN.js
@@ -115,6 +115,9 @@ export default {
     popconfirm: {
       confirmButtonText: 'ھەئە',
       cancelButtonText: 'ياق'
+    },
+    empty: {
+      description: 'ئۇچۇر يوق'
     }
   }
 };
diff --git a/src/locale/lang/uz-UZ.js b/src/locale/lang/uz-UZ.js
index 39ac99f1a..de06bf1ef 100644
--- a/src/locale/lang/uz-UZ.js
+++ b/src/locale/lang/uz-UZ.js
@@ -115,6 +115,9 @@ export default {
     popconfirm: {
       confirmButtonText: 'Yes', // to be translated
       cancelButtonText: 'No' // to be translated
+    },
+    empty: {
+      description: 'Boʻsh'
     }
   }
 };
diff --git a/src/locale/lang/vi.js b/src/locale/lang/vi.js
index 337816437..58f2d2b0a 100644
--- a/src/locale/lang/vi.js
+++ b/src/locale/lang/vi.js
@@ -115,6 +115,9 @@ export default {
     popconfirm: {
       confirmButtonText: 'Ok',
       cancelButtonText: 'Huỷ'
+    },
+    empty: {
+      description: 'Không có dữ liệu'
     }
   }
 };
diff --git a/src/locale/lang/zh-CN.js b/src/locale/lang/zh-CN.js
index cef54779d..d0f70e92a 100644
--- a/src/locale/lang/zh-CN.js
+++ b/src/locale/lang/zh-CN.js
@@ -115,6 +115,9 @@ export default {
     popconfirm: {
       confirmButtonText: '确定',
       cancelButtonText: '取消'
+    },
+    empty: {
+      description: '暂无数据'
     }
   }
 };
diff --git a/src/locale/lang/zh-TW.js b/src/locale/lang/zh-TW.js
index 43312be7e..3e37dc840 100644
--- a/src/locale/lang/zh-TW.js
+++ b/src/locale/lang/zh-TW.js
@@ -115,6 +115,9 @@ export default {
     popconfirm: {
       confirmButtonText: 'Yes', // to be translated
       cancelButtonText: 'No' // to be translated
+    },
+    empty: {
+      description: '暫無資料'
     }
   }
 };
diff --git a/test/unit/specs/empty.spec.js b/test/unit/specs/empty.spec.js
new file mode 100644
index 000000000..428cfb030
--- /dev/null
+++ b/test/unit/specs/empty.spec.js
@@ -0,0 +1,89 @@
+import { createVue, createTest, destroyVM, waitImmediate } from '../util';
+import Empty from 'packages/empty';
+
+const AXIOM = 'Rem is the best girl';
+
+describe('Empty', () => {
+  let vm;
+  afterEach(() => {
+    destroyVM(vm);
+  });
+  it('render test', () => {
+    vm = createVue({
+      template: '<el-empty>{{ AXIOM }}</el-empty>',
+      data() {
+        return {
+          AXIOM
+        };
+      }
+    }, true);
+    expect(vm.$el.querySelector('.el-empty__image')).to.exist;
+    expect(vm.$el.querySelector('.el-empty__description')).to.exist;
+    expect(vm.$el.querySelector('.el-empty__bottom')).to.exist;
+  });
+
+  it('should render image props', () => {
+    vm = createTest(Empty, {
+      image: AXIOM
+    }, true);
+    expect(vm.$el.querySelector('.el-empty__image img')).to.exist;
+  });
+
+  it('should render imageSize props', async() => {
+    vm = createVue({
+      template: '<el-empty :image-size="imageSize"></el-empty>',
+      data() {
+        return {
+          imageSize: 500
+        };
+      }
+    }, true);
+    expect(vm.$el.querySelector('.el-empty__image').getAttribute('style')).to.contain('width: 500px');
+    vm.imageSize = 200;
+    await waitImmediate();
+    expect(vm.$el.querySelector('.el-empty__image').getAttribute('style')).to.contain('width: 200px');
+  });
+
+  it('should render description props', () => {
+    vm = createTest(Empty, {
+      description: AXIOM
+    }, true);
+    expect(vm.$el.querySelector('.el-empty__description').innerText).to.equal(AXIOM);
+  });
+
+  it('should render image slots', () => {
+    vm = createVue({
+      template: '<el-empty><template slot="image">{{AXIOM}}</template></el-empty>',
+      data() {
+        return {
+          AXIOM
+        };
+      }
+    }, true);
+    expect(vm.$el.querySelector('.el-empty__image').innerText).to.equal(AXIOM);
+  });
+
+  it('should render description slots', () => {
+    vm = createVue({
+      template: '<el-empty><template slot="description">{{AXIOM}}</template></el-empty>',
+      data() {
+        return {
+          AXIOM
+        };
+      }
+    }, true);
+    expect(vm.$el.querySelector('.el-empty__description').innerText).to.equal(AXIOM);
+  });
+
+  it('should render default slots', () => {
+    vm = createVue({
+      template: '<el-empty>{{AXIOM}}</el-empty>',
+      data() {
+        return {
+          AXIOM
+        };
+      }
+    }, true);
+    expect(vm.$el.querySelector('.el-empty__bottom').innerText).to.equal(AXIOM);
+  });
+});
diff --git a/types/element-ui.d.ts b/types/element-ui.d.ts
index 5db59b2f2..4c81d2243 100644
--- a/types/element-ui.d.ts
+++ b/types/element-ui.d.ts
@@ -82,6 +82,7 @@ import { ElDrawer } from './drawer'
 import { ElPopconfirm } from './popconfirm'
 import { ElSkeleton } from './skeleton'
 import { ElSkeletonItem } from './skeleton-item'
+import { ElEmpty } from './empty'
 
 export interface InstallationOptions {
   locale: any,
@@ -352,3 +353,6 @@ export class Skeleton extends ElSkeleton {}
 
 /** Skeleton Item Component */
 export class SkeletonItem extends ElSkeletonItem {}
+
+/** Empty Component */
+export class Empty extends ElEmpty {}
diff --git a/types/empty.d.ts b/types/empty.d.ts
new file mode 100644
index 000000000..bdabbe63a
--- /dev/null
+++ b/types/empty.d.ts
@@ -0,0 +1,31 @@
+import { ElementUIComponent } from './component'
+import { VNode } from 'vue'
+
+interface ELEmptySlots {
+  /* default slot:  Custom bottom content */
+  default: VNode[]
+
+  /* image slot: Custom image */
+  image: VNode[]
+
+  /* description slot: Custom description */
+  description: VNode[]
+
+
+  [key: string]: VNode[]
+}
+
+/** Placeholder hints for empty states. */
+export declare class ElEmpty extends ElementUIComponent {
+  /* image URL */
+  image: string
+  	
+  /* image size (width) */
+  imageSize: number
+  
+  /* description */
+  description: string
+
+  $slots: ELEmptySlots
+
+}

From 1b7ff34b9f9c26fd368fec6fe28cb00c2a2a29c3 Mon Sep 17 00:00:00 2001
From: qige2016 <286882998@qq.com>
Date: Fri, 18 Jun 2021 03:56:02 -0500
Subject: [PATCH 92/94] CascaderPanel: export type (#21070)

---
 types/element-ui.d.ts | 4 ++++
 1 file changed, 4 insertions(+)

diff --git a/types/element-ui.d.ts b/types/element-ui.d.ts
index 4c81d2243..115a0315e 100644
--- a/types/element-ui.d.ts
+++ b/types/element-ui.d.ts
@@ -82,6 +82,7 @@ import { ElDrawer } from './drawer'
 import { ElPopconfirm } from './popconfirm'
 import { ElSkeleton } from './skeleton'
 import { ElSkeletonItem } from './skeleton-item'
+import { ElCascaderPanel } from './cascader-panel'
 import { ElEmpty } from './empty'
 
 export interface InstallationOptions {
@@ -354,5 +355,8 @@ export class Skeleton extends ElSkeleton {}
 /** Skeleton Item Component */
 export class SkeletonItem extends ElSkeletonItem {}
 
+/** CascaderPanel Component */
+export class CascaderPanel extends ElCascaderPanel {}
+
 /** Empty Component */
 export class Empty extends ElEmpty {}

From 318e89b40a891c39d36d1c27845c0d7d9ca8e77d Mon Sep 17 00:00:00 2001
From: qige2016 <286882998@qq.com>
Date: Mon, 21 Jun 2021 02:36:56 -0500
Subject: [PATCH 93/94] Spinner: add spinner.d.ts (#21090)

---
 types/element-ui.d.ts |  4 ++++
 types/spinner.d.ts    | 16 ++++++++++++++++
 2 files changed, 20 insertions(+)
 create mode 100644 types/spinner.d.ts

diff --git a/types/element-ui.d.ts b/types/element-ui.d.ts
index 115a0315e..d0983c1c6 100644
--- a/types/element-ui.d.ts
+++ b/types/element-ui.d.ts
@@ -84,6 +84,7 @@ import { ElSkeleton } from './skeleton'
 import { ElSkeletonItem } from './skeleton-item'
 import { ElCascaderPanel } from './cascader-panel'
 import { ElEmpty } from './empty'
+import { ElSpinner } from './spinner'
 
 export interface InstallationOptions {
   locale: any,
@@ -360,3 +361,6 @@ export class CascaderPanel extends ElCascaderPanel {}
 
 /** Empty Component */
 export class Empty extends ElEmpty {}
+
+/** Spinner Component */
+export class Spinner extends ElSpinner {}
diff --git a/types/spinner.d.ts b/types/spinner.d.ts
new file mode 100644
index 000000000..b8e079827
--- /dev/null
+++ b/types/spinner.d.ts
@@ -0,0 +1,16 @@
+import { ElementUIComponent } from './component'
+
+/** Spinner Component */
+export declare class ElSpinner extends ElementUIComponent {
+  /** The type of spinner */
+  type: string
+  	
+  /** The radius of spinner */
+  radius: number
+  
+  /** The width of spinner */
+  strokeWidth: number
+
+  /** The color of spinner */
+  strokeColor: string
+}

From cde441fb79b0789cf851659c9dbe3a85942d36d4 Mon Sep 17 00:00:00 2001
From: fw6 <45113594+fw6@users.noreply.github.com>
Date: Thu, 24 Jun 2021 15:51:35 +0800
Subject: [PATCH 94/94] fix(utils.dom): fix utils.dom error (#21049)

In IE browser, If the reference element(slot="reference") under the popover component is a SVG element, an error will be reported.

[#21048](https://github.com/ElemeFE/element/issues/21048)
---
 src/utils/dom.js | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/src/utils/dom.js b/src/utils/dom.js
index bb4c05c80..a88df3242 100644
--- a/src/utils/dom.js
+++ b/src/utils/dom.js
@@ -91,7 +91,7 @@ export function addClass(el, cls) {
     }
   }
   if (!el.classList) {
-    el.className = curClass;
+    el.setAttribute('class', curClass);
   }
 };
 
@@ -112,7 +112,7 @@ export function removeClass(el, cls) {
     }
   }
   if (!el.classList) {
-    el.className = trim(curClass);
+    el.setAttribute('class', trim(curClass));
   }
 };