From 839dda529e205c35db741a22a64fd092a6d7688f Mon Sep 17 00:00:00 2001
From: Mathieu TUDISCO <dev@mathieutu.ovh>
Date: Mon, 6 Nov 2017 14:39:38 +0100
Subject: [PATCH 01/48] =?UTF-8?q?Complete=20french=20translation=20?=
 =?UTF-8?q?=F0=9F=87=AB=F0=9F=87=B7?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/locale/lang/fr.js | 22 +++++++++++-----------
 1 file changed, 11 insertions(+), 11 deletions(-)

diff --git a/src/locale/lang/fr.js b/src/locale/lang/fr.js
index af6e4c56c..808c557b4 100644
--- a/src/locale/lang/fr.js
+++ b/src/locale/lang/fr.js
@@ -16,11 +16,11 @@ export default {
       startTime: 'Horaire début',
       endDate: 'Date fin',
       endTime: 'Horaire fin',
-      prevYear: 'Previous Year', // to be translated
-      nextYear: 'Next Year', // to be translated
-      prevMonth: 'Previous Month', // to be translated
-      nextMonth: 'Next Month', // to be translated
-      year: '',
+      prevYear: 'Année précédente',
+      nextYear: 'Année suivante',
+      prevMonth: 'Mois précédent',
+      nextMonth: 'Mois suivant',
+      year: 'Année',
       month1: 'Janvier',
       month2: 'Février',
       month3: 'Mars',
@@ -81,7 +81,7 @@ export default {
       error: 'Erreur'
     },
     upload: {
-      deleteTip: 'press delete to remove', // to be translated
+      deleteTip: 'Cliquer sur supprimer pour retirer le fichier',
       delete: 'Supprimer',
       preview: 'Aperçu',
       continue: 'Continuer'
@@ -91,7 +91,7 @@ export default {
       confirmFilter: 'Confirmer',
       resetFilter: 'Réinitialiser',
       clearFilter: 'Tous',
-      sumText: 'Sum' // to be translated
+      sumText: 'Somme'
     },
     tree: {
       emptyText: 'Aucune donnée'
@@ -99,10 +99,10 @@ export default {
     transfer: {
       noMatch: 'Aucune correspondance',
       noData: 'Aucune donnée',
-      titles: ['List 1', 'List 2'], // to be translated
-      filterPlaceholder: 'Enter keyword', // to be translated
-      noCheckedFormat: '{total} items', // to be translated
-      hasCheckedFormat: '{checked}/{total} checked' // to be translated
+      titles: ['Liste 1', 'Liste 2'],
+      filterPlaceholder: 'Entrer un mot clef',
+      noCheckedFormat: '{total} elements',
+      hasCheckedFormat: '{checked}/{total} coché(s)'
     }
   }
 };

From 651b517fd09d03538a78e5780e5ef03912269cb7 Mon Sep 17 00:00:00 2001
From: alexdee2007 <alexdee2007@bk.ru>
Date: Wed, 8 Nov 2017 06:20:52 +0200
Subject: [PATCH 02/48] Core: Add plugin eslint-plugin-json (#7869)

* Add plugin eslint-plugin-json

Add plugin eslint-plugin-json for parse build/salad.config.json

* Add plugin eslint-plugin-json

Add plugin eslint-plugin-json for parse build/salad.config.json
---
 .eslintrc    | 2 +-
 package.json | 1 +
 2 files changed, 2 insertions(+), 1 deletion(-)

diff --git a/.eslintrc b/.eslintrc
index ba8a1b188..efb7c4f79 100644
--- a/.eslintrc
+++ b/.eslintrc
@@ -6,7 +6,7 @@
     "expect": true,
     "sinon": true
   },
-  "plugins": ['vue'],
+  "plugins": ['vue','json'],
   "extends": 'elemefe',
   "parserOptions": {
     "ecmaFeatures": {
diff --git a/package.json b/package.json
index 33bbfd39b..d6fae6758 100644
--- a/package.json
+++ b/package.json
@@ -82,6 +82,7 @@
     "css-loader": "^0.28.7",
     "es6-promise": "^4.0.5",
     "eslint": "^3.10.2",
+    "eslint-plugin-json": "^1.2.0",
     "extract-text-webpack-plugin": "^3.0.1",
     "file-loader": "^1.1.5",
     "file-save": "^0.2.0",

From 4ea53ab89608e376cad3ac71e2977ae517aeffd1 Mon Sep 17 00:00:00 2001
From: Joe Wong <dzinlife@me.com>
Date: Wed, 8 Nov 2017 12:24:29 +0800
Subject: [PATCH 03/48] Cascader: optimize hover to expand experience (#8010)

* Cascader: optimize hover to expand experience

pass eslint

* Cascader: hoverThreshold configuable
---
 packages/cascader/src/main.vue |  5 +++
 packages/cascader/src/menu.vue | 78 +++++++++++++++++++++++++++++++++-
 2 files changed, 81 insertions(+), 2 deletions(-)

diff --git a/packages/cascader/src/main.vue b/packages/cascader/src/main.vue
index 8165be79a..a5bdc4ffa 100644
--- a/packages/cascader/src/main.vue
+++ b/packages/cascader/src/main.vue
@@ -149,6 +149,10 @@ export default {
     beforeFilter: {
       type: Function,
       default: () => (() => {})
+    },
+    hoverThreshold: {
+      type: Number,
+      default: 500
     }
   },
 
@@ -224,6 +228,7 @@ export default {
       this.menu.expandTrigger = this.expandTrigger;
       this.menu.changeOnSelect = this.changeOnSelect;
       this.menu.popperClass = this.popperClass;
+      this.menu.hoverThreshold = this.hoverThreshold;
       this.popperElm = this.menu.$el;
       this.menu.$on('pick', this.handlePick);
       this.menu.$on('activeItemChange', this.handleActiveItemChange);
diff --git a/packages/cascader/src/menu.vue b/packages/cascader/src/menu.vue
index 6785b78ae..07dff214a 100644
--- a/packages/cascader/src/menu.vue
+++ b/packages/cascader/src/menu.vue
@@ -39,7 +39,8 @@
         value: [],
         expandTrigger: 'click',
         changeOnSelect: false,
-        popperClass: ''
+        popperClass: '',
+        hoverTimer: 0
       };
     },
 
@@ -135,9 +136,35 @@
         activeOptions,
         visible,
         expandTrigger,
-        popperClass
+        popperClass,
+        hoverThreshold
       } = this;
 
+      let hoverMenuRefs = {};
+      const hoverMenuHandler = e => {
+        const offsetX = e.offsetX;
+        const width = hoverMenuRefs.activeMenu.offsetWidth;
+        const height = hoverMenuRefs.activeMenu.offsetHeight;
+
+        if (e.target === hoverMenuRefs.activeItem) {
+          clearTimeout(this.hoverTimer);
+          const {activeItem} = hoverMenuRefs;
+          const offsetY_top = activeItem.offsetTop;
+          const offsetY_Bottom = offsetY_top + activeItem.offsetHeight;
+
+          hoverMenuRefs.hoverZone.innerHTML = `
+            <path style="pointer-events: auto;" fill="transparent" d="M${offsetX} ${offsetY_top} L${width} 0 V${offsetY_top} Z" />
+            <path style="pointer-events: auto;" fill="transparent" d="M${offsetX} ${offsetY_Bottom} L${width} ${height} V${offsetY_Bottom} Z" />
+          `;
+        } else {
+          if (!this.hoverTimer) {
+            this.hoverTimer = setTimeout(() => {
+              hoverMenuRefs.hoverZone.innerHTML = '';
+            }, hoverThreshold);
+          }
+        }
+      };
+
       const menus = this._l(activeOptions, (menu, menuIndex) => {
         let isFlat = false;
         const items = this._l(menu, item => {
@@ -177,6 +204,7 @@
                 'is-active': item.value === activeValue[menuIndex],
                 'is-disabled': item.disabled
               }}
+              ref={item.value === activeValue[menuIndex] ? 'activeItem' : null}
               {...events}
             >
               {item.label}
@@ -188,19 +216,65 @@
           menuStyle.minWidth = this.inputWidth + 'px';
         }
 
+        const isHoveredMenu = expandTrigger === 'hover' && activeValue.length - 1 === menuIndex;
+        const hoverMenuEvent = {
+          on: {
+          }
+        };
+
+        if (isHoveredMenu) {
+          hoverMenuEvent.on.mousemove = hoverMenuHandler;
+          menuStyle.position = 'relative';
+        }
+
         return (
           <ul
             class={{
               'el-cascader-menu': true,
               'el-cascader-menu--flexible': isFlat
             }}
+            {...hoverMenuEvent}
             style={menuStyle}
             refInFor
             ref="menus">
             {items}
+            {
+              isHoveredMenu
+              ? (<svg
+                ref="hoverZone"
+                style={{
+                  position: 'absolute',
+                  top: 0,
+                  height: '100%',
+                  width: '100%',
+                  left: 0,
+                  pointerEvents: 'none'
+                }}
+              ></svg>) : null
+            }
           </ul>
         );
       });
+
+      if (expandTrigger === 'hover') {
+        this.$nextTick(() => {
+          const activeItem = this.$refs.activeItem;
+
+          if (activeItem) {
+            const activeMenu = activeItem.parentElement;
+            const hoverZone = this.$refs.hoverZone;
+
+            hoverMenuRefs = {
+              activeMenu,
+              activeItem,
+              hoverZone
+            };
+          } else {
+            hoverMenuRefs = {};
+          }
+        });
+      }
+
       return (
         <transition name="el-zoom-in-top" on-before-enter={this.handleMenuEnter} on-after-leave={this.handleMenuLeave}>
           <div

From 81011d1c489a822aa1cc9effaaaeb52d372fcb01 Mon Sep 17 00:00:00 2001
From: maranran <ran.ma@ele.me>
Date: Wed, 8 Nov 2017 20:21:27 -0600
Subject: [PATCH 04/48] Accessibility for Cascader & Dropdown (#7973)

---
 packages/cascader/src/main.vue          |  32 +++++++
 packages/cascader/src/menu.vue          |  66 +++++++++++++-
 packages/dropdown/src/dropdown-item.vue |   2 +
 packages/dropdown/src/dropdown.vue      | 111 ++++++++++++++++++++++--
 packages/theme-chalk/src/cascader.scss  |   4 +-
 packages/theme-chalk/src/dropdown.scss  |  10 ++-
 6 files changed, 213 insertions(+), 12 deletions(-)

diff --git a/packages/cascader/src/main.vue b/packages/cascader/src/main.vue
index a5bdc4ffa..c02b70799 100644
--- a/packages/cascader/src/main.vue
+++ b/packages/cascader/src/main.vue
@@ -10,9 +10,12 @@
     ]"
     @click="handleClick"
     @mouseenter="inputHover = true"
+    @focus="inputHover = true"
     @mouseleave="inputHover = false"
+    @blur="inputHover = false"
     ref="reference"
     v-clickoutside="handleClickoutside"
+    @keydown="handleKeydown"
   >
     <el-input
       ref="input"
@@ -63,6 +66,7 @@ import emitter from 'element-ui/src/mixins/emitter';
 import Locale from 'element-ui/src/mixins/locale';
 import { t } from 'element-ui/src/locale';
 import debounce from 'throttle-debounce/debounce';
+import { generateId } from 'element-ui/src/utils/util';
 
 const popperMixin = {
   props: {
@@ -195,11 +199,15 @@ export default {
     },
     cascaderSize() {
       return this.size || this._elFormItemSize || (this.$ELEMENT || {}).size;
+    },
+    id() {
+      return generateId();
     }
   },
 
   watch: {
     menuVisible(value) {
+      this.$refs.input.$refs.input.setAttribute('aria-expanded', value);
       value ? this.showMenu() : this.hideMenu();
     },
     value(value) {
@@ -208,6 +216,10 @@ export default {
     currentValue(value) {
       this.dispatch('ElFormItem', 'el.form.change', [value]);
     },
+    currentLabels(value) {
+      const inputLabel = this.showAllLevels ? value.join('/') : value[value.length - 1] ;
+      this.$refs.input.$refs.input.setAttribute('value', inputLabel);
+    },
     options: {
       deep: true,
       handler(value) {
@@ -230,9 +242,11 @@ export default {
       this.menu.popperClass = this.popperClass;
       this.menu.hoverThreshold = this.hoverThreshold;
       this.popperElm = this.menu.$el;
+      this.menu.$refs.menus[0].setAttribute('id', `cascader-menu-${this.id}`);
       this.menu.$on('pick', this.handlePick);
       this.menu.$on('activeItemChange', this.handleActiveItemChange);
       this.menu.$on('menuLeave', this.doDestroy);
+      this.menu.$on('closeInside', this.handleClickoutside);
     },
     showMenu() {
       if (!this.menu) {
@@ -250,6 +264,7 @@ export default {
     hideMenu() {
       this.inputValue = '';
       this.menu.visible = false;
+      this.$refs.input.focus();
     },
     handleActiveItemChange(value) {
       this.$nextTick(_ => {
@@ -257,6 +272,23 @@ export default {
       });
       this.$emit('active-item-change', value);
     },
+    handleKeydown(e) {
+      const keyCode = e.keyCode;
+      if (keyCode === 13) {
+        this.handleClick();
+      } else if (keyCode === 40) { // down
+        this.menuVisible = true; // 打开
+        setTimeout(() => {
+          const firstMenu = this.popperElm.querySelectorAll('.el-cascader-menu')[0];
+          firstMenu.querySelectorAll("[tabindex='-1']")[0].focus();
+        });
+        e.stopPropagation();
+        e.preventDefault();
+      } else if (keyCode === 27 || keyCode === 9) { // esc  tab
+        this.inputValue = '';
+        if (this.menu) this.menu.visible = false;
+      }
+    },
     handlePick(value, close = true) {
       this.currentValue = value;
       this.$emit('input', value);
diff --git a/packages/cascader/src/menu.vue b/packages/cascader/src/menu.vue
index 07dff214a..09aeb0076 100644
--- a/packages/cascader/src/menu.vue
+++ b/packages/cascader/src/menu.vue
@@ -1,6 +1,7 @@
 <script>
   import { isDef } from 'element-ui/src/utils/shared';
   import scrollIntoView from 'element-ui/src/utils/scroll-into-view';
+  import { generateId } from 'element-ui/src/utils/util';
 
   const copyArray = (arr, props) => {
     if (!arr || !Array.isArray(arr) || !props) return arr;
@@ -95,6 +96,9 @@
           formatOptions(optionsCopy);
           return loadActiveOptions(optionsCopy);
         }
+      },
+      id() {
+        return generateId();
       }
     },
 
@@ -139,6 +143,8 @@
         popperClass,
         hoverThreshold
       } = this;
+      let itemId = null;
+      let itemIndex = 0;
 
       let hoverMenuRefs = {};
       const hoverMenuHandler = e => {
@@ -167,6 +173,8 @@
 
       const menus = this._l(activeOptions, (menu, menuIndex) => {
         let isFlat = false;
+        const menuId = `menu-${this.id}-${ menuIndex}`;
+        const ownsId = `menu-${this.id}-${ menuIndex + 1 }`;
         const items = this._l(menu, item => {
           const events = {
             on: {}
@@ -175,12 +183,52 @@
           if (item.__IS__FLAT__OPTIONS) isFlat = true;
 
           if (!item.disabled) {
+            // keydown up/down/left/right/enter
+            events.on.keydown = (ev) => {
+              const keyCode = ev.keyCode;
+              if (![37, 38, 39, 40, 13, 9, 27].includes(keyCode)) {
+                return;
+              }
+              const currentEle = ev.target;
+              const parentEle = this.$refs.menus[menuIndex];
+              const menuItemList = parentEle.querySelectorAll("[tabindex='-1']");
+              const currentIndex = Array.prototype.indexOf.call(menuItemList, currentEle); // 当前索引
+              let nextIndex, nextMenu;
+              if ([38, 40].includes(keyCode)) {
+                if (keyCode === 38) { // up键
+                  nextIndex = currentIndex !== 0 ? (currentIndex - 1) : currentIndex;
+                } else if (keyCode === 40) { // down
+                  nextIndex = currentIndex !== (menuItemList.length - 1) ? currentIndex + 1 : currentIndex;
+                }
+                menuItemList[nextIndex].focus();
+              } else if (keyCode === 37) { // left键
+                if (menuIndex !== 0) {
+                  const previousMenu = this.$refs.menus[menuIndex - 1];
+                  previousMenu.querySelector('[aria-expanded=true]').focus();
+                }
+              } else if (keyCode === 39) { // right
+                if (item.children) {
+                  // 有子menu 选择子menu的第一个menuitem
+                  nextMenu = this.$refs.menus[menuIndex + 1];
+                  nextMenu.querySelectorAll("[tabindex='-1']")[0].focus();
+                }
+              } else if (keyCode === 13) {
+                if (!item.children) {
+                  const id = currentEle.getAttribute('id');
+                  parentEle.setAttribute('aria-activedescendant', id);
+                  this.select(item, menuIndex);
+                  this.$nextTick(() => this.scrollMenu(this.$refs.menus[menuIndex]));
+                }
+              } else if (keyCode === 9 || keyCode === 27) { // esc tab
+                this.$emit('closeInside');
+              }
+            };
             if (item.children) {
               let triggerEvent = {
                 click: 'click',
                 hover: 'mouseenter'
               }[expandTrigger];
-              events.on[triggerEvent] = () => {
+              events.on[triggerEvent] = events.on['focus'] = () => { // focus 选中
                 this.activeItem(item, menuIndex);
                 this.$nextTick(() => {
                   // adjust self and next level
@@ -195,7 +243,10 @@
               };
             }
           }
-
+          if (!item.disabled && !item.children) { // no children set id
+            itemId = `${menuId}-${itemIndex}`;
+            itemIndex++;
+          }
           return (
             <li
               class={{
@@ -206,6 +257,12 @@
               }}
               ref={item.value === activeValue[menuIndex] ? 'activeItem' : null}
               {...events}
+              tabindex= { item.disabled ? null : -1 }
+              role="menuitem"
+              aria-haspopup={ !!item.children }
+              aria-expanded={ item.value === activeValue[menuIndex] }
+              id = { itemId }
+              aria-owns = { !item.children ? null : ownsId }
             >
               {item.label}
             </li>
@@ -236,7 +293,10 @@
             {...hoverMenuEvent}
             style={menuStyle}
             refInFor
-            ref="menus">
+            ref="menus"
+            role="menu"
+            id = { menuId }
+          >
             {items}
             {
               isHoveredMenu
diff --git a/packages/dropdown/src/dropdown-item.vue b/packages/dropdown/src/dropdown-item.vue
index 60411aac9..9af930a68 100644
--- a/packages/dropdown/src/dropdown-item.vue
+++ b/packages/dropdown/src/dropdown-item.vue
@@ -6,6 +6,8 @@
       'el-dropdown-menu__item--divided': divided
     }"
     @click="handleClick"
+    :aria-disabled="disabled"
+    :tabindex="disabled ? null : -1"
   >
     <slot></slot>
   </li>
diff --git a/packages/dropdown/src/dropdown.vue b/packages/dropdown/src/dropdown.vue
index 4099fe6df..aceee1b62 100644
--- a/packages/dropdown/src/dropdown.vue
+++ b/packages/dropdown/src/dropdown.vue
@@ -4,6 +4,7 @@
   import Migrating from 'element-ui/src/mixins/migrating';
   import ElButton from 'element-ui/packages/button';
   import ElButtonGroup from 'element-ui/packages/button-group';
+  import { generateId } from 'element-ui/src/utils/util';
 
   export default {
     name: 'ElDropdown',
@@ -61,25 +62,43 @@
       return {
         timeout: null,
         visible: false,
-        triggerElm: null
+        triggerElm: null,
+        menuItems: null,
+        menuItemsArray: null,
+        dropdownElm: null,
+        focusing: false
       };
     },
 
     computed: {
       dropdownSize() {
         return this.size || (this.$ELEMENT || {}).size;
+      },
+      listId() {
+        return `dropdown-menu-${generateId()}`;
       }
     },
 
     mounted() {
       this.$on('menu-item-click', this.handleMenuItemClick);
       this.initEvent();
+      this.initAria();
     },
 
     watch: {
       visible(val) {
         this.broadcast('ElDropdownMenu', 'visible', val);
         this.$emit('visible-change', val);
+      },
+      focusing(val) {
+        const selfDefine = this.$el.querySelector('.el-dropdown-selfdefine');
+        if (selfDefine) { // 自定义
+          if (val) {
+            selfDefine.className += ' focusing';
+          } else {
+            selfDefine.className = selfDefine.className.replace('focusing', '');
+          }
+        }
       }
     },
 
@@ -100,6 +119,8 @@
       },
       hide() {
         if (this.triggerElm.disabled) return;
+        this.removeTabindex();
+        this.resetTabindex(this.triggerElm);
         clearTimeout(this.timeout);
         this.timeout = setTimeout(() => {
           this.visible = false;
@@ -109,18 +130,98 @@
         if (this.triggerElm.disabled) return;
         this.visible = !this.visible;
       },
+      handleTriggerKeyDown(ev) {
+        const keyCode = ev.keyCode;
+        if ([38, 40].includes(keyCode)) { // up/down
+          this.removeTabindex();
+          this.resetTabindex(this.menuItems[0]);
+          this.menuItems[0].focus();
+          ev.preventDefault();
+          ev.stopPropagation();
+        } else if (keyCode === 13) { // space enter选中
+          this.handleClick();
+        } else if ([9, 27].includes(keyCode)) { // tab || esc
+          this.hide();
+        }
+        return;
+      },
+      handleItemKeyDown(ev) {
+        const keyCode = ev.keyCode;
+        const target = ev.target;
+        const currentIndex = this.menuItemsArray.indexOf(target);
+        const max = this.menuItemsArray.length - 1;
+        let nextIndex;
+        if ([38, 40].includes(keyCode)) { // up/down
+          if (keyCode === 38) { // up
+            nextIndex = currentIndex !== 0 ? currentIndex - 1 : 0;
+          } else { // down
+            nextIndex = currentIndex < max ? currentIndex + 1 : max;
+          }
+          this.removeTabindex();
+          this.resetTabindex(this.menuItems[nextIndex]);
+          this.menuItems[nextIndex].focus();
+          ev.preventDefault();
+          ev.stopPropagation();
+        } else if (keyCode === 13) { // enter选中
+          this.triggerElm.focus();
+          target.click();
+          if (!this.hideOnClick) { // click关闭
+            this.visible = false;
+          }
+        } else if ([9, 27].includes(keyCode)) { // tab // esc
+          this.hide();
+          this.triggerElm.focus();
+        }
+        return;
+      },
+      resetTabindex(ele) { // 下次tab时组件聚焦元素
+        this.removeTabindex();
+        ele.setAttribute('tabindex', '0'); // 下次期望的聚焦元素
+      },
+      removeTabindex() {
+        this.triggerElm.setAttribute('tabindex', '-1');
+        this.menuItemsArray.forEach((item) => {
+          item.setAttribute('tabindex', '-1');
+        });
+      },
+      initAria() {
+        this.dropdownElm.setAttribute('id', this.listId);
+        this.triggerElm.setAttribute('aria-haspopup', 'list');
+        this.triggerElm.setAttribute('aria-controls', this.listId);
+        this.menuItems = this.dropdownElm.querySelectorAll("[tabindex='-1']");
+        this.menuItemsArray = Array.prototype.slice.call(this.menuItems);
+
+        if (!this.splitButton) { // 自定义
+          this.triggerElm.setAttribute('role', 'button');
+          this.triggerElm.setAttribute('tabindex', '0');
+          this.triggerElm.className += ' el-dropdown-selfdefine'; // 控制
+        }
+      },
       initEvent() {
-        let { trigger, show, hide, handleClick, splitButton } = this;
+        let { trigger, show, hide, handleClick, splitButton, handleTriggerKeyDown, handleItemKeyDown } = this;
         this.triggerElm = splitButton
           ? this.$refs.trigger.$el
           : this.$slots.default[0].elm;
 
+        let dropdownElm = this.dropdownElm = this.$slots.dropdown[0].elm;
+
+        this.triggerElm.addEventListener('keydown', handleTriggerKeyDown); // triggerElm keydown
+        dropdownElm.addEventListener('keydown', handleItemKeyDown, true); // item keydown
+        // 控制自定义元素的样式
+        if (!splitButton) {
+          this.triggerElm.addEventListener('focus', () => {
+            this.focusing = true;
+          });
+          this.triggerElm.addEventListener('blur', () => {
+            this.focusing = false;
+          });
+          this.triggerElm.addEventListener('click', () => {
+            this.focusing = false;
+          });
+        }
         if (trigger === 'hover') {
           this.triggerElm.addEventListener('mouseenter', show);
           this.triggerElm.addEventListener('mouseleave', hide);
-
-          let dropdownElm = this.$slots.dropdown[0].elm;
-
           dropdownElm.addEventListener('mouseenter', show);
           dropdownElm.addEventListener('mouseleave', hide);
         } else if (trigger === 'click') {
diff --git a/packages/theme-chalk/src/cascader.scss b/packages/theme-chalk/src/cascader.scss
index e23551f14..fed5414f7 100644
--- a/packages/theme-chalk/src/cascader.scss
+++ b/packages/theme-chalk/src/cascader.scss
@@ -128,7 +128,7 @@
     line-height: 1.5;
     box-sizing: border-box;
     cursor: pointer;
-
+    outline: none;
     @include m(extensible) {
       &:after {
         font-family: 'element-icons';
@@ -154,7 +154,7 @@
       color: $--select-option-selected;
     }
 
-    &:hover {
+    &:hover, &:focus:not(:active) {
       background-color: $--select-option-hover-background;
     }
 
diff --git a/packages/theme-chalk/src/dropdown.scss b/packages/theme-chalk/src/dropdown.scss
index 4800e6b6c..5871f83d1 100644
--- a/packages/theme-chalk/src/dropdown.scss
+++ b/packages/theme-chalk/src/dropdown.scss
@@ -50,6 +50,12 @@
     font-size: 12px;
     margin: 0 3px;
   }
+
+  .el-dropdown-selfdefine { // 自定义
+    &:focus:active, &:focus:not(.focusing) {
+      outline-width: 0;
+    }
+  }
 }
 
 @include b(dropdown-menu) {
@@ -72,8 +78,8 @@
     font-size: $--font-size-base;
     color: $--color-text-regular;
     cursor: pointer;
-
-    &:not(.is-disabled):hover {
+    outline: none;
+    &:not(.is-disabled):hover, &:focus {
       background-color: $--dropdown-menuItem-hover-fill;
       color: $--dropdown-menuItem-hover-color;
     }

From 6c77cd97163ebe934b1834d5d054014fc9f07fee Mon Sep 17 00:00:00 2001
From: maranran <ran.ma@ele.me>
Date: Wed, 8 Nov 2017 21:19:52 -0600
Subject: [PATCH 05/48] Accessibility for Tree (#8049)

* tree

* Update yarn.lock
---
 packages/theme-chalk/src/tree.scss |  7 +++-
 packages/tree/src/tree-node.vue    | 23 ++++++++---
 packages/tree/src/tree.vue         | 62 +++++++++++++++++++++++++++++-
 3 files changed, 84 insertions(+), 8 deletions(-)

diff --git a/packages/theme-chalk/src/tree.scss b/packages/theme-chalk/src/tree.scss
index 4018ea441..e8639656b 100644
--- a/packages/theme-chalk/src/tree.scss
+++ b/packages/theme-chalk/src/tree.scss
@@ -25,7 +25,12 @@
 
 @include b(tree-node) {
   white-space: nowrap;
-
+  outline: none;
+  &:focus { /* focus */
+    > .el-tree-node__content {
+      background-color: $--tree-node-hover-color;
+    }
+  }
   @include e(content) {
     display: flex;
     align-items: center;
diff --git a/packages/tree/src/tree-node.vue b/packages/tree/src/tree-node.vue
index b068c304e..726344e18 100644
--- a/packages/tree/src/tree-node.vue
+++ b/packages/tree/src/tree-node.vue
@@ -1,12 +1,21 @@
 <template>
-  <div class="el-tree-node"
+  <div
+    class="el-tree-node"
     @click.stop="handleClick"
     v-show="node.visible"
     :class="{
       'is-expanded': expanded,
       'is-current': tree.store.currentNode === node,
-      'is-hidden': !node.visible
-    }">
+      'is-hidden': !node.visible,
+      'is-focusable': !node.disabled,
+      'is-checked': !node.disabled && node.checked
+    }"
+    role="treeitem"
+    tabindex="-1"
+    :aria-expanded="expanded"
+    :aria-disabled="node.disabled"
+    :aria-checked="node.checked"
+  >
     <div class="el-tree-node__content"
       :style="{ 'padding-left': (node.level - 1) * tree.indent + 'px' }">
       <span
@@ -20,7 +29,8 @@
         :indeterminate="node.indeterminate"
         :disabled="!!node.disabled"
         @click.native.stop
-        @change="handleCheckChange">
+        @change="handleCheckChange"
+      >
       </el-checkbox>
       <span
         v-if="node.loading"
@@ -32,7 +42,10 @@
       <div
         class="el-tree-node__children"
         v-if="childNodeRendered"
-        v-show="expanded">
+        v-show="expanded"
+        role="group"
+        :aria-expanded="expanded"
+      >
         <el-tree-node
           :render-content="renderContent"
           v-for="child in node.childNodes"
diff --git a/packages/tree/src/tree.vue b/packages/tree/src/tree.vue
index b8cc1085a..32dce3e73 100644
--- a/packages/tree/src/tree.vue
+++ b/packages/tree/src/tree.vue
@@ -1,5 +1,9 @@
 <template>
-  <div class="el-tree" :class="{ 'el-tree--highlight-current': highlightCurrent }">
+  <div
+    class="el-tree"
+    :class="{ 'el-tree--highlight-current': highlightCurrent }"
+    role="tree"
+  >
     <el-tree-node
       v-for="child in root.childNodes"
       :node="child"
@@ -33,7 +37,9 @@
       return {
         store: null,
         root: null,
-        currentNode: null
+        currentNode: null,
+        treeItems: null,
+        checkboxItems: []
       };
     },
 
@@ -101,6 +107,9 @@
         get() {
           return this.data;
         }
+      },
+      treeItemArray() {
+        return Array.prototype.slice.call(this.treeItems);
       }
     },
 
@@ -115,6 +124,11 @@
       },
       data(newVal) {
         this.store.setData(newVal);
+      },
+      checkboxItems(val) {
+        Array.prototype.forEach.call(val, (checkbox) => {
+          checkbox.setAttribute('tabindex', -1);
+        });
       }
     },
 
@@ -171,6 +185,42 @@
       updateKeyChildren(key, data) {
         if (!this.nodeKey) throw new Error('[Tree] nodeKey is required in updateKeyChild');
         this.store.updateChildren(key, data);
+      },
+      initTabindex() {
+        this.treeItems = this.$el.querySelectorAll('.is-focusable[role=treeitem]');
+        this.checkboxItems = this.$el.querySelectorAll('input[type=checkbox]');
+        const checkedItem = this.$el.querySelectorAll('.is-checked[role=treeitem]');
+        if (checkedItem.length) {
+          checkedItem[0].setAttribute('tabindex', 0);
+          return;
+        }
+        this.treeItems[0].setAttribute('tabindex', 0);
+      },
+      handelKeydown(ev) {
+        const currentItem = ev.target;
+        const keyCode = ev.keyCode;
+        this.treeItems = this.$el.querySelectorAll('.is-focusable[role=treeitem]');
+        const currentIndex = this.treeItemArray.indexOf(currentItem);
+        let nextIndex;
+        if ([38, 40].includes(keyCode)) { // up、down
+          if (keyCode === 38) { // up
+            nextIndex = currentIndex !== 0 ? currentIndex - 1 : 0;
+          } else {
+            nextIndex = (currentIndex < this.treeItemArray.length - 1) ? currentIndex + 1 : 0;
+          }
+          this.treeItemArray[nextIndex].focus(); // 选中
+        }
+        const hasInput = currentItem.querySelector('[type="checkbox"]');
+        if ([37, 39].includes(keyCode)) { // left、right 展开
+          currentItem.click(); // 选中
+        }
+        if ([13, 32].includes(keyCode)) { // space enter选中checkbox
+          if (hasInput) {
+            hasInput.click();
+          }
+          ev.stopPropagation();
+          ev.preventDefault();
+        }
       }
     },
 
@@ -194,6 +244,14 @@
       });
 
       this.root = this.store.root;
+    },
+    mounted() {
+      this.initTabindex();
+      this.$el.addEventListener('keydown', this.handelKeydown);
+    },
+    updated() {
+      this.treeItems = this.$el.querySelectorAll('[role=treeitem]');
+      this.checkboxItems = this.$el.querySelectorAll('input[type=checkbox]');
     }
   };
 </script>

From 363a80b18430aed6ce02b696d984ae9e2305b2ed Mon Sep 17 00:00:00 2001
From: maranran <ran.ma@ele.me>
Date: Wed, 8 Nov 2017 21:21:20 -0600
Subject: [PATCH 06/48] Accessibility for Popover, Tooltip, Message &
 Notification (#8009)

* Accessibility for Tooltip & Popover

* Accessibility for message & notification

* fixbug for popover with nodeType
---
 examples/docs/zh-CN/popover.md        |  2 +-
 examples/docs/zh-CN/tooltip.md        |  2 +-
 packages/message/src/main.vue         | 47 ++++++++++----------------
 packages/notification/src/main.vue    | 21 ++++++++++--
 packages/popover/src/main.vue         | 45 +++++++++++++++++++++++--
 packages/theme-chalk/src/tooltip.scss |  3 ++
 packages/tooltip/src/main.js          | 48 ++++++++++++++++++++++-----
 7 files changed, 123 insertions(+), 45 deletions(-)

diff --git a/examples/docs/zh-CN/popover.md b/examples/docs/zh-CN/popover.md
index 449874882..b3c52c3fa 100644
--- a/examples/docs/zh-CN/popover.md
+++ b/examples/docs/zh-CN/popover.md
@@ -146,7 +146,7 @@ Popover 的属性与 Tooltip 很类似，它们都是基于`Vue-popper`开发的
   width="200"
   trigger="focus"
   content="这是一段内容,这是一段内容,这是一段内容,这是一段内容。">
-  <el-button slot="reference">focus 激活</el-button>
+  <span slot="reference" style="margin-left: 10px; font-size: 14px; color: #5a5e66">focus 激活</span>
 </el-popover>
 ```
 :::
diff --git a/examples/docs/zh-CN/tooltip.md b/examples/docs/zh-CN/tooltip.md
index 07eb8d03f..83aeeba5b 100644
--- a/examples/docs/zh-CN/tooltip.md
+++ b/examples/docs/zh-CN/tooltip.md
@@ -63,7 +63,7 @@
 <div class="box">
   <div class="top">
     <el-tooltip class="item" effect="dark" content="Top Left 提示文字" placement="top-start">
-      <el-button>上左</el-button>
+      <span>上左</span>
     </el-tooltip>
     <el-tooltip class="item" effect="dark" content="Top Center 提示文字" placement="top">
       <el-button>上边</el-button>
diff --git a/packages/message/src/main.vue b/packages/message/src/main.vue
index 882b76f4d..c6f9956d8 100644
--- a/packages/message/src/main.vue
+++ b/packages/message/src/main.vue
@@ -9,15 +9,15 @@
       v-show="visible"
       @mouseenter="clearTimer"
       @mouseleave="startTimer"
-      role="alertdialog"
+      role="alert"
     >
       <i :class="iconClass" v-if="iconClass"></i>
       <i :class="typeClass" v-else></i>
       <slot>
-        <p v-if="!dangerouslyUseHTMLString" class="el-message__content"  tabindex="0">{{ message }}</p>
-        <p v-else v-html="message" class="el-message__content"  tabindex="0"></p>
+        <p v-if="!dangerouslyUseHTMLString" class="el-message__content">{{ message }}</p>
+        <p v-else v-html="message" class="el-message__content"></p>
       </slot>
-      <i v-if="showClose" class="el-message__closeBtn el-icon-close" @click="close" tabindex="0" role="button" aria-label="close" @keydown.enter.stop="close"></i>
+      <i v-if="showClose" class="el-message__closeBtn el-icon-close" @click="close"></i>
     </div>
   </transition>
 </template>
@@ -44,9 +44,7 @@
         closed: false,
         timer: null,
         dangerouslyUseHTMLString: false,
-        center: false,
-        initFocus: null,
-        originFocus: null
+        center: false
       };
     },
 
@@ -87,18 +85,18 @@
         if (typeof this.onClose === 'function') {
           this.onClose(this);
         }
-        if (!this.originFocus || !this.originFocus.getBoundingClientRect) return;
-
-        // restore keyboard focus
-        const { top, left, bottom, right } = this.originFocus.getBoundingClientRect();
-        const viewportHeight = window.innerHeight || document.documentElement.clientHeight;
-        const viewportWidth = window.innerWidth || document.documentElement.clientWidth;
-        if (top >= 0 &&
-          left >= 0 &&
-          bottom <= viewportHeight &&
-          right <= viewportWidth) {
-          this.originFocus.focus();
-        }
+//        if (!this.originFocus || !this.originFocus.getBoundingClientRect) return;
+//
+//        // restore keyboard focus
+//        const { top, left, bottom, right } = this.originFocus.getBoundingClientRect();
+//        const viewportHeight = window.innerHeight || document.documentElement.clientHeight;
+//        const viewportWidth = window.innerWidth || document.documentElement.clientWidth;
+//        if (top >= 0 &&
+//          left >= 0 &&
+//          bottom <= viewportHeight &&
+//          right <= viewportWidth) {
+//          this.originFocus.focus();
+//        }
       },
 
       clearTimer() {
@@ -115,24 +113,15 @@
         }
       },
       keydown(e) {
-        if (e.keyCode === 46 || e.keyCode === 8) {
-          this.clearTimer(); // detele 取消倒计时
-        } else if (e.keyCode === 27) { // esc关闭消息
+        if (e.keyCode === 27) { // esc关闭消息
           if (!this.closed) {
             this.close();
           }
-        } else {
-          this.startTimer(); // 恢复倒计时
         }
       }
     },
     mounted() {
       this.startTimer();
-      this.originFocus = document.activeElement;
-      this.initFocus = this.showClose ? this.$el.querySelector('.el-icon-close') : this.$el.querySelector('.el-message__content');
-      setTimeout(() => {
-        this.initFocus && this.initFocus.focus();
-      });
       document.addEventListener('keydown', this.keydown);
     },
     beforeDestroy() {
diff --git a/packages/notification/src/main.vue b/packages/notification/src/main.vue
index 4b98c1244..ee47e46be 100644
--- a/packages/notification/src/main.vue
+++ b/packages/notification/src/main.vue
@@ -6,7 +6,9 @@
       :style="positionStyle"
       @mouseenter="clearTimer()"
       @mouseleave="startTimer()"
-      @click="click">
+      @click="click"
+      role="alert"
+    >
       <i
         class="el-notification__icon"
         :class="[ typeClass, iconClass ]"
@@ -119,9 +121,19 @@
             }
           }, this.duration);
         }
+      },
+      keydown(e) {
+        if (e.keyCode === 46 || e.keyCode === 8) {
+          this.clearTimer(); // detele 取消倒计时
+        } else if (e.keyCode === 27) { // esc关闭消息
+          if (!this.closed) {
+            this.close();
+          }
+        } else {
+          this.startTimer(); // 恢复倒计时
+        }
       }
     },
-
     mounted() {
       if (this.duration > 0) {
         this.timer = setTimeout(() => {
@@ -130,6 +142,11 @@
           }
         }, this.duration);
       }
+      document.addEventListener('keydown', this.keydown);
+    },
+    beforeDestroy() {
+      document.removeEventListener('keydown', this.keydown);
     }
   };
 </script>
+
diff --git a/packages/popover/src/main.vue b/packages/popover/src/main.vue
index 88ff571a3..3e498336d 100644
--- a/packages/popover/src/main.vue
+++ b/packages/popover/src/main.vue
@@ -6,7 +6,11 @@
         :class="[popperClass, content && 'el-popover--plain']"
         ref="popper"
         v-show="!disabled && showPopper"
-        :style="{ width: width + 'px' }">
+        :style="{ width: width + 'px' }"
+        role="tooltip"
+        :id="tooltipId"
+        :aria-hidden="(disabled || !showPopper) ? 'true' : 'false'"
+      >
         <div class="el-popover__title" v-if="title" v-text="title"></div>
         <slot>{{ content }}</slot>
       </div>
@@ -14,10 +18,10 @@
     <slot name="reference"></slot>
   </span>
 </template>
-
 <script>
 import Popper from 'element-ui/src/utils/vue-popper';
 import { on, off } from 'element-ui/src/utils/dom';
+import { generateId } from 'element-ui/src/utils/util';
 
 export default {
   name: 'ElPopover',
@@ -49,6 +53,11 @@ export default {
     }
   },
 
+  computed: {
+    tooltipId() {
+      return `el-popover-${generateId()}`;
+    }
+  },
   watch: {
     showPopper(newVal, oldVal) {
       newVal ? this.$emit('show') : this.$emit('hide');
@@ -62,12 +71,23 @@ export default {
   },
 
   mounted() {
-    let reference = this.reference || this.$refs.reference;
+    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) {
+      reference.className += ' el-tooltip';
+      reference.setAttribute('aria-describedby', this.tooltipId);
+      reference.setAttribute('tabindex', 0); // tab序列
+
+      on(reference, 'focus', this.handleFocus);
+      on(reference, 'blur', this.handleBlur);
+      on(reference, 'keydown', this.handleKeydown);
+      on(reference, 'click', this.handleClick);
+    }
     if (this.trigger === 'click') {
       on(reference, 'click', this.doToggle);
       on(document, 'click', this.handleDocumentClick);
@@ -114,6 +134,20 @@ export default {
     doClose() {
       this.showPopper = false;
     },
+    handleFocus() {
+      const reference = this.referenceElm;
+      reference.className += ' focusing';
+      this.showPopper = true;
+    },
+    handleClick() {
+      const reference = this.referenceElm;
+      reference.className = reference.className.replace(/\s*focusing\s*/, ' ');
+    },
+    handleBlur() {
+      const reference = this.referenceElm;
+      reference.className = reference.className.replace(/\s*focusing\s*/, ' ');
+      this.showPopper = false;
+    },
     handleMouseEnter() {
       clearTimeout(this._timer);
       if (this.openDelay) {
@@ -124,6 +158,11 @@ export default {
         this.showPopper = true;
       }
     },
+    handleKeydown(ev) {
+      if (ev.keyCode === 27) { // esc
+        this.doClose();
+      }
+    },
     handleMouseLeave() {
       clearTimeout(this._timer);
       this._timer = setTimeout(() => {
diff --git a/packages/theme-chalk/src/tooltip.scss b/packages/theme-chalk/src/tooltip.scss
index 6679440fd..33c4067f4 100644
--- a/packages/theme-chalk/src/tooltip.scss
+++ b/packages/theme-chalk/src/tooltip.scss
@@ -2,6 +2,9 @@
 @import "common/var";
 
 @include b(tooltip) {
+  &:focus:not(.focusing), &:focus:hover {
+    outline-width: 0;
+  }
   @include e(popper) {
     position: absolute;
     border-radius: 4px;
diff --git a/packages/tooltip/src/main.js b/packages/tooltip/src/main.js
index 2d9b942c1..d59b3da2c 100644
--- a/packages/tooltip/src/main.js
+++ b/packages/tooltip/src/main.js
@@ -1,6 +1,7 @@
 import Popper from 'element-ui/src/utils/vue-popper';
 import debounce from 'throttle-debounce/debounce';
 import { getFirstComponentChild } from 'element-ui/src/utils/vdom';
+import { generateId } from 'element-ui/src/utils/util';
 import Vue from 'vue';
 
 export default {
@@ -48,10 +49,15 @@ export default {
 
   data() {
     return {
-      timeoutPending: null
+      timeoutPending: null,
+      focusing: false
     };
   },
-
+  computed: {
+    tooltipId() {
+      return `el-tooltip-${generateId()}`;
+    }
+  },
   beforeCreate() {
     if (this.$isServer) return;
 
@@ -75,6 +81,9 @@ export default {
             onMouseleave={ () => { this.setExpectedState(false); this.debounceClose(); } }
             onMouseenter= { () => { this.setExpectedState(true); } }
             ref="popper"
+            role="tooltip"
+            id={this.tooltipId}
+            aria-hidden={ (this.disabled || !this.showPopper) ? 'true' : 'false' }
             v-show={!this.disabled && this.showPopper}
             class={
               ['el-tooltip__popper', 'is-' + this.effect, this.popperClass]
@@ -87,24 +96,38 @@ export default {
     if (!this.$slots.default || !this.$slots.default.length) return this.$slots.default;
 
     const vnode = getFirstComponentChild(this.$slots.default);
+
     if (!vnode) return vnode;
+
     const data = vnode.data = vnode.data || {};
     const on = vnode.data.on = vnode.data.on || {};
     const nativeOn = vnode.data.nativeOn = vnode.data.nativeOn || {};
 
     data.staticClass = this.concatClass(data.staticClass, 'el-tooltip');
-    on.mouseenter = this.addEventHandle(on.mouseenter, this.show);
-    on.mouseleave = this.addEventHandle(on.mouseleave, this.hide);
-    nativeOn.mouseenter = this.addEventHandle(nativeOn.mouseenter, this.show);
-    nativeOn.mouseleave = this.addEventHandle(nativeOn.mouseleave, this.hide);
-
+    nativeOn.mouseenter = on.mouseenter = this.addEventHandle(on.mouseenter, this.show);
+    nativeOn.mouseleave = on.mouseleave = this.addEventHandle(on.mouseleave, this.hide);
+    nativeOn.focus = on.focus = this.addEventHandle(on.focus, this.handleFocus);
+    nativeOn.blur = on.blur = this.addEventHandle(on.blur, this.handleBlur);
+    nativeOn.click = on.click = this.addEventHandle(on.click, () => { this.focusing = false; });
     return vnode;
   },
 
   mounted() {
     this.referenceElm = this.$el;
+    if (this.$el.nodeType === 1) {
+      this.$el.setAttribute('aria-describedby', this.tooltipId);
+      this.$el.setAttribute('tabindex', 0);
+    }
+  },
+  watch: {
+    focusing(val) {
+      if (val) {
+        this.referenceElm.className += ' focusing';
+      } else {
+        this.referenceElm.className = this.referenceElm.className.replace('focusing', '');
+      }
+    }
   },
-
   methods: {
     show() {
       this.setExpectedState(true);
@@ -115,7 +138,14 @@ export default {
       this.setExpectedState(false);
       this.debounceClose();
     },
-
+    handleFocus() {
+      this.focusing = true;
+      this.show();
+    },
+    handleBlur() {
+      this.focusing = false;
+      this.hide();
+    },
     addEventHandle(old, fn) {
       if (!old) {
         return fn;

From 7f8991a664fc5c45dac98b4f769b3d070609989d Mon Sep 17 00:00:00 2001
From: Leopoldthecoder <Leopoldthecuber@gmail.com>
Date: Wed, 8 Nov 2017 14:09:44 +0800
Subject: [PATCH 07/48] Tree: fix updateChildren

---
 examples/app.vue                      | 10 +++++-----
 examples/nav.config.json              |  4 ++--
 packages/tree/src/model/tree-store.js |  5 +++--
 3 files changed, 10 insertions(+), 9 deletions(-)

diff --git a/examples/app.vue b/examples/app.vue
index 02bc19dc4..fa72ee15d 100644
--- a/examples/app.vue
+++ b/examples/app.vue
@@ -236,12 +236,12 @@
         this.suggestJump();
       }
       setTimeout(() => {
-        const notified = localStorage.getItem('RELEASE_NOTIFIED');
+        const notified = localStorage.getItem('ES_NOTIFIED');
         if (!notified) {
           const h = this.$createElement;
           const title = this.lang === 'zh-CN'
-            ? '2.0 正式发布'
-            : '2.0 available now';
+            ? '帮助我们完成西班牙语文档'
+            : 'Help us with Spanish docs';
           const messages = this.lang === 'zh-CN'
             ? ['点击', '这里', '查看详情']
             : ['Click ', 'here', ' to learn more'];
@@ -253,13 +253,13 @@
               h('a', {
                 attrs: {
                   target: '_blank',
-                  href: `https://github.com/ElemeFE/element/issues/${ this.lang === 'zh-CN' ? '7755' : '7756' }`
+                  href: 'https://github.com/ElemeFE/element/issues/8074'
                 }
               }, messages[1]),
               messages[2]
             ]),
             onClose() {
-              localStorage.setItem('RELEASE_NOTIFIED', 1);
+              localStorage.setItem('ES_NOTIFIED', 1);
             }
           });
         }
diff --git a/examples/nav.config.json b/examples/nav.config.json
index 27d128288..487595f2d 100644
--- a/examples/nav.config.json
+++ b/examples/nav.config.json
@@ -10,7 +10,7 @@
     },
     {
       "name": "Element Angular",
-      "href": "https://eleme.github.io/element-angular/"
+      "href": "https://element-angular.faas.ele.me/"
     },
     {
       "name": "开发指南",
@@ -260,7 +260,7 @@
     },
     {
       "name": "Element Angular",
-      "href": "https://eleme.github.io/element-angular/"
+      "href": "https://element-angular.faas.ele.me/"
     },
     {
       "name": "Development",
diff --git a/packages/tree/src/model/tree-store.js b/packages/tree/src/model/tree-store.js
index 8afe20e9b..efc08e88b 100644
--- a/packages/tree/src/model/tree-store.js
+++ b/packages/tree/src/model/tree-store.js
@@ -198,9 +198,10 @@ export default class TreeStore {
     const node = this.nodesMap[key];
     if (!node) return;
     const childNodes = node.childNodes;
-    childNodes.forEach(child => {
+    for (let i = childNodes.length - 1; i >= 0; i--) {
+      const child = childNodes[i];
       this.remove(child.data);
-    });
+    }
     for (let i = 0, j = data.length; i < j; i++) {
       const child = data[i];
       this.append(child, node.data);

From 73184399edcb43f6a53d79cdcdab06b996b424fe Mon Sep 17 00:00:00 2001
From: Leopoldthecoder <Leopoldthecuber@gmail.com>
Date: Thu, 9 Nov 2017 15:11:45 +0800
Subject: [PATCH 08/48] fix bordered checkbox and radio height

---
 packages/theme-chalk/src/checkbox.scss   |  6 ++++++
 packages/theme-chalk/src/common/var.scss | 20 ++++++++++++++------
 packages/theme-chalk/src/radio.scss      |  5 +++++
 3 files changed, 25 insertions(+), 6 deletions(-)

diff --git a/packages/theme-chalk/src/checkbox.scss b/packages/theme-chalk/src/checkbox.scss
index e2d174bdf..ead1218dc 100644
--- a/packages/theme-chalk/src/checkbox.scss
+++ b/packages/theme-chalk/src/checkbox.scss
@@ -17,6 +17,9 @@
     padding: $--checkbox-bordered-padding;
     border-radius: $--border-radius-base;
     border: $--border-base;
+    box-sizing: border-box;
+    line-height: normal;
+    height: $--checkbox-bordered-height;
 
     &.is-checked {
       border-color: $--color-primary;
@@ -34,6 +37,7 @@
     &.el-checkbox--medium {
       padding: $--checkbox-bordered-medium-padding;
       border-radius: $--button-medium-border-radius;
+      height: $--checkbox-bordered-medium-height;
 
       .el-checkbox__label {
         line-height: 17px;
@@ -49,6 +53,7 @@
     &.el-checkbox--small {
       padding: $--checkbox-bordered-small-padding;
       border-radius: $--button-small-border-radius;
+      height: $--checkbox-bordered-small-height;
 
       .el-checkbox__label {
         line-height: 15px;
@@ -69,6 +74,7 @@
     &.el-checkbox--mini {
       padding: $--checkbox-bordered-mini-padding;
       border-radius: $--button-mini-border-radius;
+      height: $--checkbox-bordered-mini-height;
 
       .el-checkbox__label {
         line-height: 12px;
diff --git a/packages/theme-chalk/src/common/var.scss b/packages/theme-chalk/src/common/var.scss
index f6b550228..0bcc38131 100644
--- a/packages/theme-chalk/src/common/var.scss
+++ b/packages/theme-chalk/src/common/var.scss
@@ -137,16 +137,20 @@ $--checkbox-checked-icon-color: $--fill-base !default;
 
 $--checkbox-input-border-color-hover: $--color-primary !default;
 
+$--checkbox-bordered-height: 40px !default;
 $--checkbox-bordered-padding: 9px 20px 9px 10px !default;
 $--checkbox-bordered-medium-padding: 7px 20px 7px 10px !default;
-$--checkbox-bordered-small-padding: 3px 15px 7px 10px !default;
-$--checkbox-bordered-mini-padding: 1px 15px 5px 10px !default;
+$--checkbox-bordered-small-padding: 5px 15px 5px 10px !default;
+$--checkbox-bordered-mini-padding: 3px 15px 3px 10px !default;
 $--checkbox-bordered-medium-input-height: 14px !default;
 $--checkbox-bordered-medium-input-width: 14px !default;
+$--checkbox-bordered-medium-height: 36px !default;
 $--checkbox-bordered-small-input-height: 12px !default;
 $--checkbox-bordered-small-input-width: 12px !default;
+$--checkbox-bordered-small-height: 32px !default;
 $--checkbox-bordered-mini-input-height: 12px !default;
 $--checkbox-bordered-mini-input-width: 12px !default;
+$--checkbox-bordered-mini-height: 28px !default;
 
 $--checkbox-button-font-size: $--font-size-base !default;
 $--checkbox-button-checked-fill: $--color-primary !default;
@@ -183,16 +187,20 @@ $--radio-checked-icon-color: $--color-primary !default;
 
 $--radio-input-border-color-hover: $--color-primary !default;
 
-$--radio-bordered-padding: 10px 20px 10px 10px !default;
-$--radio-bordered-medium-padding: 8px 20px 8px 10px !default;
-$--radio-bordered-small-padding: 6px 15px 6px 10px !default;
-$--radio-bordered-mini-padding: 4px 15px 4px 10px !default;
+$--radio-bordered-height: 40px !default;
+$--radio-bordered-padding: 12px 20px 0 10px !default;
+$--radio-bordered-medium-padding: 10px 20px 0 10px !default;
+$--radio-bordered-small-padding: 8px 15px 0 10px !default;
+$--radio-bordered-mini-padding: 6px 15px 0 10px !default;
 $--radio-bordered-medium-input-height: 14px !default;
 $--radio-bordered-medium-input-width: 14px !default;
+$--radio-bordered-medium-height: 36px !default;
 $--radio-bordered-small-input-height: 12px !default;
 $--radio-bordered-small-input-width: 12px !default;
+$--radio-bordered-small-height: 32px !default;
 $--radio-bordered-mini-input-height: 12px !default;
 $--radio-bordered-mini-input-width: 12px !default;
+$--radio-bordered-mini-height: 28px !default;
 
 $--radio-button-font-size: $--font-size-base !default;
 $--radio-button-checked-fill: $--color-primary !default;
diff --git a/packages/theme-chalk/src/radio.scss b/packages/theme-chalk/src/radio.scss
index a3d0791da..6332e9c06 100644
--- a/packages/theme-chalk/src/radio.scss
+++ b/packages/theme-chalk/src/radio.scss
@@ -19,6 +19,8 @@
     padding: $--radio-bordered-padding;
     border-radius: $--border-radius-base;
     border: $--border-base;
+    box-sizing: border-box;
+    height: $--radio-bordered-height;
 
     &.is-checked {
       border-color: $--color-primary;
@@ -38,6 +40,7 @@
     &.is-bordered {
       padding: $--radio-bordered-medium-padding;
       border-radius: $--button-medium-border-radius;
+      height: $--radio-bordered-medium-height;
       .el-radio__label {
         font-size: $--button-medium-font-size;
       }
@@ -51,6 +54,7 @@
     &.is-bordered {
       padding: $--radio-bordered-small-padding;
       border-radius: $--button-small-border-radius;
+      height: $--radio-bordered-small-height;
       .el-radio__label {
         font-size: $--button-small-font-size;
       }
@@ -64,6 +68,7 @@
     &.is-bordered {
       padding: $--radio-bordered-mini-padding;
       border-radius: $--button-mini-border-radius;
+      height: $--radio-bordered-mini-height;
       .el-radio__label {
         font-size: $--button-mini-font-size;
       }

From cbfd9cfab358cbd10146ec8238da4b11aabfe594 Mon Sep 17 00:00:00 2001
From: Leopoldthecoder <Leopoldthecuber@gmail.com>
Date: Thu, 9 Nov 2017 15:12:16 +0800
Subject: [PATCH 09/48] Menu: fix console error

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

diff --git a/packages/menu/src/submenu.vue b/packages/menu/src/submenu.vue
index b4adc7fcc..8cf59b572 100644
--- a/packages/menu/src/submenu.vue
+++ b/packages/menu/src/submenu.vue
@@ -173,11 +173,13 @@
       },
       handleTitleMouseenter() {
         if (this.mode === 'horizontal' && !this.rootMenu.backgroundColor) return;
-        this.$refs['submenu-title'].style.backgroundColor = this.rootMenu.hoverBackground;
+        const title = this.$refs['submenu-title'];
+        title && (title.style.backgroundColor = this.rootMenu.hoverBackground);
       },
       handleTitleMouseleave() {
         if (this.mode === 'horizontal' && !this.rootMenu.backgroundColor) return;
-        this.$refs['submenu-title'].style.backgroundColor = this.rootMenu.backgroundColor || '';
+        const title = this.$refs['submenu-title'];
+        title && (title.style.backgroundColor = this.rootMenu.backgroundColor || '');
       }
     },
     created() {

From aa02b42022134cacf920d9ffc4e3425a74394137 Mon Sep 17 00:00:00 2001
From: Leopoldthecoder <Leopoldthecuber@gmail.com>
Date: Thu, 9 Nov 2017 15:12:37 +0800
Subject: [PATCH 10/48] Radio: fix console error of RadioGroup

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

diff --git a/packages/radio/src/radio-group.vue b/packages/radio/src/radio-group.vue
index b5694cd88..fdb0f0bea 100644
--- a/packages/radio/src/radio-group.vue
+++ b/packages/radio/src/radio-group.vue
@@ -53,9 +53,10 @@
     },
     mounted() {
       // 当radioGroup没有默认选项时，第一个可以选中Tab导航
-      let radios = this.$el.querySelectorAll('[type=radio]');
-      if (![].some.call(radios, radio => radio.checked)) {
-        this.$el.querySelectorAll('[role=radio]')[0].tabIndex = 0;
+      const radios = this.$el.querySelectorAll('[type=radio]');
+      const firstLabel = this.$el.querySelectorAll('[role=radio]')[0];
+      if (![].some.call(radios, radio => radio.checked) && firstLabel) {
+        firstLabel.tabIndex = 0;
       }
     },
     methods: {

From 9f2ea7eab04ca2448bb8b145c6e4bb1189da9691 Mon Sep 17 00:00:00 2001
From: Leopoldthecoder <Leopoldthecuber@gmail.com>
Date: Thu, 9 Nov 2017 15:12:55 +0800
Subject: [PATCH 11/48] Chore: doc updates

---
 examples/app.vue               |  7 +++----
 examples/docs/zh-CN/popover.md |  2 +-
 examples/docs/zh-CN/tooltip.md |  2 +-
 packages/message/src/main.vue  | 12 ------------
 4 files changed, 5 insertions(+), 18 deletions(-)

diff --git a/examples/app.vue b/examples/app.vue
index fa72ee15d..251988d38 100644
--- a/examples/app.vue
+++ b/examples/app.vue
@@ -219,6 +219,7 @@
         const preferGithub = localStorage.getItem('PREFER_GITHUB');
         if (href.indexOf('element-cn') > -1 || preferGithub) return;
         setTimeout(() => {
+          if (this.lang !== 'zh-CN') return;
           this.$confirm('建议大陆用户访问部署在国内的站点，是否跳转？', '提示')
             .then(() => {
               location.href = location.href.replace('element.', 'element-cn.');
@@ -232,12 +233,10 @@
 
     mounted() {
       this.localize();
-      if (this.lang === 'zh-CN') {
-        this.suggestJump();
-      }
+      this.suggestJump();
       setTimeout(() => {
         const notified = localStorage.getItem('ES_NOTIFIED');
-        if (!notified) {
+        if (!notified && this.lang !== 'zh-CN') {
           const h = this.$createElement;
           const title = this.lang === 'zh-CN'
             ? '帮助我们完成西班牙语文档'
diff --git a/examples/docs/zh-CN/popover.md b/examples/docs/zh-CN/popover.md
index b3c52c3fa..449874882 100644
--- a/examples/docs/zh-CN/popover.md
+++ b/examples/docs/zh-CN/popover.md
@@ -146,7 +146,7 @@ Popover 的属性与 Tooltip 很类似，它们都是基于`Vue-popper`开发的
   width="200"
   trigger="focus"
   content="这是一段内容,这是一段内容,这是一段内容,这是一段内容。">
-  <span slot="reference" style="margin-left: 10px; font-size: 14px; color: #5a5e66">focus 激活</span>
+  <el-button slot="reference">focus 激活</el-button>
 </el-popover>
 ```
 :::
diff --git a/examples/docs/zh-CN/tooltip.md b/examples/docs/zh-CN/tooltip.md
index 83aeeba5b..07eb8d03f 100644
--- a/examples/docs/zh-CN/tooltip.md
+++ b/examples/docs/zh-CN/tooltip.md
@@ -63,7 +63,7 @@
 <div class="box">
   <div class="top">
     <el-tooltip class="item" effect="dark" content="Top Left 提示文字" placement="top-start">
-      <span>上左</span>
+      <el-button>上左</el-button>
     </el-tooltip>
     <el-tooltip class="item" effect="dark" content="Top Center 提示文字" placement="top">
       <el-button>上边</el-button>
diff --git a/packages/message/src/main.vue b/packages/message/src/main.vue
index c6f9956d8..ed58c2c69 100644
--- a/packages/message/src/main.vue
+++ b/packages/message/src/main.vue
@@ -85,18 +85,6 @@
         if (typeof this.onClose === 'function') {
           this.onClose(this);
         }
-//        if (!this.originFocus || !this.originFocus.getBoundingClientRect) return;
-//
-//        // restore keyboard focus
-//        const { top, left, bottom, right } = this.originFocus.getBoundingClientRect();
-//        const viewportHeight = window.innerHeight || document.documentElement.clientHeight;
-//        const viewportWidth = window.innerWidth || document.documentElement.clientWidth;
-//        if (top >= 0 &&
-//          left >= 0 &&
-//          bottom <= viewportHeight &&
-//          right <= viewportWidth) {
-//          this.originFocus.focus();
-//        }
       },
 
       clearTimer() {

From 010b09891abc7765518c6fcea1b9e5f511466104 Mon Sep 17 00:00:00 2001
From: carl <zhouyxamp@gmail.com>
Date: Fri, 10 Nov 2017 12:07:50 +0800
Subject: [PATCH 12/48] fix invalid hover color of nav menu when background
 color contains 0

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

diff --git a/packages/menu/src/menu.vue b/packages/menu/src/menu.vue
index abb9506b1..978ea22d0 100644
--- a/packages/menu/src/menu.vue
+++ b/packages/menu/src/menu.vue
@@ -157,14 +157,14 @@
       },
       getColorChannels(color) {
         color = color.replace('#', '');
-        if (/^[1-9a-fA-F]{3}$/.test(color)) {
+        if (/^[0-9a-fA-F]{3}$/.test(color)) {
           color = color.split('');
           for (let i = 2; i >= 0; i--) {
             color.splice(i, 0, color[i]);
           }
           color = color.join('');
         }
-        if (/^[1-9a-fA-F]{6}$/.test(color)) {
+        if (/^[0-9a-fA-F]{6}$/.test(color)) {
           return {
             red: parseInt(color.slice(0, 2), 16),
             green: parseInt(color.slice(2, 4), 16),

From 2260a3bab3a48a6d363e7fea037d7b3b183f2998 Mon Sep 17 00:00:00 2001
From: Bunker13 <mario.senechal@gmail.com>
Date: Thu, 9 Nov 2017 17:23:11 -0500
Subject: [PATCH 13/48] Update package.json

missing devDependencies gulp-autoprefixer
---
 packages/theme-chalk/package.json | 3 ++-
 1 file changed, 2 insertions(+), 1 deletion(-)

diff --git a/packages/theme-chalk/package.json b/packages/theme-chalk/package.json
index 41442dde6..c040d9ead 100644
--- a/packages/theme-chalk/package.json
+++ b/packages/theme-chalk/package.json
@@ -28,7 +28,8 @@
   "devDependencies": {
     "gulp": "^3.9.1",
     "gulp-cssmin": "^0.1.7",
-    "gulp-sass": "^3.1.0"
+    "gulp-sass": "^3.1.0",
+    "gulp-autoprefixer": "^4.0.0"
   },
   "dependencies": {}
 }

From a23fbb70015051438968164336d549d70b550ba4 Mon Sep 17 00:00:00 2001
From: Javier Diaz <coderdiaz@gmail.com>
Date: Thu, 9 Nov 2017 15:46:49 -0600
Subject: [PATCH 14/48] [Container] Spanish translation

---
 examples/docs/es/container.md | 90 ++++++++++++++++++-----------------
 1 file changed, 46 insertions(+), 44 deletions(-)

diff --git a/examples/docs/es/container.md b/examples/docs/es/container.md
index 8b1514349..0d605e71d 100644
--- a/examples/docs/es/container.md
+++ b/examples/docs/es/container.md
@@ -9,7 +9,7 @@
     color: #333;
   }
   
-  #common-layouts + .demo-container {
+  #disenos-comunes + .demo-container {
     .el-header, .el-footer {
       text-align: center;
     }
@@ -57,76 +57,78 @@
   };
 </script>
 
-## Container
-Container components for scaffolding basic structure of the page:
+## Contenedor
+Componentes contenedores para iniciar una estructura básica de un sitio:
 
-`<el-container>`: wrapper container. When nested with a `<el-header>` or `<el-footer>`, all its child elements will be vertically arranged. Otherwise horizontally.
+`<el-container>`: Contenedor. Cuando este elemento se anida con un `<el-header>` o `<el-footer>`, todos los elementos secundarios se organizan verticalmente.
+De lo contrario, de forma horizontal. 
 
-`<el-header>`: container for headers.
+`<el-header>`: Contenedor para cabeceras.
 
-`<el-aside>`: container for side sections (usually a side nav).
+`<el-aside>`: Contenedor para secciones laterales (generalmente, una barra lateral).
 
-`<el-main>`: container for main sections.
+`<el-main>`: Contenedor para sección principal.
 
-`<el-footer>`: container for footers.
+`<el-footer>`: Contenedor para pie de página.
 
 :::tip
-These components use flex for layout, so please make sure your browser supports it. Besides, `<el-container>`'s direct child elements have to be one or more of the latter four components. And father element of the latter four components must be a `<el-container>`.
+Estos componentes utilizan flex para el diseño, así que asegúrate que el navegador lo soporte. Además, los elementos directos de `<el-container>` tienen que
+ser uno o más de los últimos cuatro componentes. Y el elemento padre de los últimos cuatro componentes debe ser un `<el-container>`.
 :::
 
-### Common layouts
+### Diseños comunes
 
 ::: demo
 ```html
 <el-container>
-  <el-header>Header</el-header>
-  <el-main>Main</el-main>
+  <el-header>Cabecera</el-header>
+  <el-main>Principal</el-main>
 </el-container>
 
 <el-container>
-  <el-header>Header</el-header>
-  <el-main>Main</el-main>
-  <el-footer>Footer</el-footer>
+  <el-header>Cabecera</el-header>
+  <el-main>Principal</el-main>
+  <el-footer>Pie de página</el-footer>
 </el-container>
 
 <el-container>
-  <el-aside width="200px">Aside</el-aside>
-  <el-main>Main</el-main>
+  <el-aside width="200px">Barra lateral</el-aside>
+  <el-main>Principal</el-main>
 </el-container>
 
 <el-container>
-  <el-header>Header</el-header>
+  <el-header>Cabecera</el-header>
   <el-container>
-    <el-aside width="200px">Aside</el-aside>
-    <el-main>Main</el-main>
+    <el-aside width="200px">Barra lateral</el-aside>
+    <el-main>Principal</el-main>
   </el-container>
 </el-container>
 
 <el-container>
-  <el-header>Header</el-header>
+  <el-header>Cabecera</el-header>
   <el-container>
-    <el-aside width="200px">Aside</el-aside>
+    <el-aside width="200px">Barra lateral</el-aside>
     <el-container>
-      <el-main>Main</el-main>
-      <el-footer>Footer</el-footer>
+      <el-main>Principal</el-main>
+      <el-footer>Pie de página</el-footer>
     </el-container>
   </el-container>
 </el-container>
 
 <el-container>
-  <el-aside width="200px">Aside</el-aside>
+  <el-aside width="200px">Barra lateral</el-aside>
   <el-container>
-    <el-header>Header</el-header>
-    <el-main>Main</el-main>
+    <el-header>Cabecera</el-header>
+    <el-main>Principal</el-main>
   </el-container>
 </el-container>
 
 <el-container>
-  <el-aside width="200px">Aside</el-aside>
+  <el-aside width="200px">Barra lateral</el-aside>
   <el-container>
-    <el-header>Header</el-header>
-    <el-main>Main</el-main>
-    <el-footer>Footer</el-footer>
+    <el-header>Cabecera</el-header>
+    <el-main>Principal</el-main>
+    <el-footer>Pie de página</el-footer>
   </el-container>
 </el-container>
 
@@ -168,7 +170,7 @@ These components use flex for layout, so please make sure your browser supports
 ```
 :::
 
-### Example
+### Ejemplo
 
 ::: demo
 ```html
@@ -278,22 +280,22 @@ These components use flex for layout, so please make sure your browser supports
 ```
 :::
 
-### Container Attributes
-| Attribute      | Description          | Type      | Accepted Values       | Default  |
+### Atributos de contenedor
+| Atributo      | Descripción          | Tipo      | Valores aceptados       | Por defecto  |
 |---------- |-------------- |---------- |--------------------------------  |-------- |
-| direction | layout direction for child elements | string | horizontal / vertical | vertical when nested with `el-header` or `el-footer`; horizontal otherwise |
+| direction | dirección de diseño para elementos secundarios | string | horizontal / vertical | vertical cuando el elemento está anidado con `el-header`, de lo contrario, horizontal |
 
-### Header Attributes
-| Attribute      | Description          | Type      | Accepted Values       | Default  |
+### Atributos de cabecera
+| Atributo      | Descripción          | Tipo      | Valores aceptados       | Por defecto  |
 |---------- |-------------- |---------- |--------------------------------  |-------- |
-| height | height of the header | string | — | 60px |
+| height | altura de la cabecera | string | — | 60px |
 
-### Aside Attributes
-| Attribute      | Description          | Type      | Accepted Values       | Default  |
+### Atributos de barra lateral
+| Atributo      | Descripción          | Tipo      | Valores aceptados       | Por defecto  |
 |---------- |-------------- |---------- |--------------------------------  |-------- |
-| width | width of the side section | string | — | 300px |
+| width | ancho de la barra lateral | string | — | 300px |
 
-### Footer Attributes
-| Attribute      | Description          | Type      | Accepted Values       | Default  |
+### Atributos de pie de página
+| Atributo      | Descripción          | Tipo      | Valores aceptados       | Por defecto  |
 |---------- |-------------- |---------- |--------------------------------  |-------- |
-| height | height of the footer | string | — | 60px |
\ No newline at end of file
+| height | altura del pie de página | string | — | 60px |
\ No newline at end of file

From 122fd84c577082e1d7f6bdfe32056285261a0530 Mon Sep 17 00:00:00 2001
From: Javier Diaz <coderdiaz@gmail.com>
Date: Thu, 9 Nov 2017 18:03:37 -0600
Subject: [PATCH 15/48] [custom-theme] Spanish translation

---
 examples/docs/es/custom-theme.md | 60 ++++++++++++++++----------------
 1 file changed, 30 insertions(+), 30 deletions(-)

diff --git a/examples/docs/es/custom-theme.md b/examples/docs/es/custom-theme.md
index 5fb6bdd59..07b918480 100644
--- a/examples/docs/es/custom-theme.md
+++ b/examples/docs/es/custom-theme.md
@@ -1,25 +1,25 @@
-## Custom theme
-Element uses BEM-styled CSS so that you can override styles easily. But if you need to replace styles at a large scale, e.g. change the theme color from blue to orange or green, maybe overriding them one by one is not a good idea. We provide three ways to change the style variables.
+## Tema personalizado
+Element utiliza la metodología BEM en CSS con la finalidad de que puedas sobrescribir los estilos fácilmente. Pero, si necesitas 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, por ello, te proporcionamos 3 maneras de modificar los estilos.
 
-### Changing theme color
-If you just want to change the theme color of Element, the [theme preview website](https://elementui.github.io/theme-chalk-preview/#/en-US) is recommended. The theme color of Element is bright and friendly blue. By changing it, you can make Element more visually connected to specific projects.
+### Cambiando el color del tema
+Si lo que buscas 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.
 
-The above website enables you to preview theme of a new theme color in real-time, and it can generate a complete style package based on the new theme color for you to download directly (to import new style files in your project, please refer to the 'Import custom theme' or 'Import component theme on demand' part of this section).
+Este sitio, te permitirá obtener una vista previa del tema con un nuevo color en tiempo real, y, además, obtener un paquete de estilos completo basado en el nuevo color para su descarga (para importar estos nuevos estilos, consulta la sección ‘Importar un tema personalizado’ o ‘Importar un tema de componente bajo demanda' que se encuentran dentro de esta sección).
 
-### Update SCSS variables in your project
-`theme-chalk` is written in SCSS. If your project also uses SCSS, you can directly change Element style variables. Create a new style file, e.g. `element-variables.scss`:
+### Actualizando variables SCSS en tu proyecto
+`theme-chalk` esta escrito en SCSS. Si tu proyecto también utiliza SCSS, puedes cambiar las variables de estilos de Element. Para ello, solo necesitas crear un nuevo archivo de estilos, por ejemplo, `element-variables.scss`:
 
 ```html
-/* theme color */
+/* Color del tema */
 $--color-primary: teal;
 
-/* icon font path, required */
+/* Ubicación de la fuente, obligatoria */
 $--font-path: '../node_modules/element-ui/lib/theme-chalk/fonts';
 
 @import "../node_modules/element-ui/packages/theme-chalk/src/index";
 ```
 
-Then in the entry file of your project, import this style file instead of Element's built CSS:
+Entonces, en el archivo principal del proyecto, importa este archivo de estilos en lugar de los estilos de Element:
 ```JS
 import Vue from 'vue'
 import Element from 'element-ui'
@@ -29,29 +29,29 @@ Vue.use(Element)
 ```
 
 :::tip
-Note that it is required to override icon font path to the relative path of Element's font files.
+Nota es necesario sobreescribir la ruta de la fuente por una ruta relativa de las fuentes de Element.
 :::
 
-### CLI theme tool
-If you project doesn't use SCSS, you can customize themes with our CLI theme tool:
+### CLI para generar temas
+Si tu proyecto no utiliza SCSS, puedes personalizar el tema a través de esta herramienta:
 
-#### <strong>Install</strong>
-First install the theme generator globally or locally. Local install is recommended because in this way, when others clone your project, npm will automatically install it for them.
+#### <strong>Instalación</strong>
+Primero, debes instalar el generador de temas ya sea de forma global o local. Se recomienda instalarlo de forma local, ya que de esta manera, cuando otros clonen tu proyecto, npm automáticamente los instalará para ellos.
 ```shell
 npm i element-theme -g
 ```
 
-Then install the chalk theme from npm or GitHub.
+Ahora, instala el tema `chalk` desde npm o Github.
 ```shell
-# from npm
+# desde npm
 npm i element-theme-chalk -D
 
-# from GitHub
+# desde GitHub
 npm i https://github.com/ElementUI/theme-chalk -D
 ```
 
-#### <strong>Initialize variable file</strong>
-After successfully installing the above packages, a command named `et` is available in CLI (if the packages are installed locally, use `node_modules/.bin/et` instead). Run `-i` to initialize the variable file which outputs to `element-variables.scss` by default. And you can specify its output directory as you will.
+#### <strong>Inicializar archivo de variables</strong>
+Después de haber instalado correctamente los paquetes, el comando `et` estará disponible en tu CLI (si instalaste el paquete de manera local, utilizá `node_modules/.bin/et` en su lugar). Ejecuta `-i` para inicializar un archivo de variables, puedes especificar un nombre distinto, pero por defecto, el archivo se llama `element-variables.scss`. También puedes especificar un directorio distinto.
 
 ```shell
 et -i [custom output file]
@@ -59,7 +59,7 @@ et -i [custom output file]
 > ✔ Generator variables file
 ```
 
-In `element-variables.scss` you can find all the variables we used to style Element and they are defined in SCSS format. Here's a snippet:
+En el archivo `element-variables.scss` podrás encontrar todas las variables que utiliza Element para definir los estilos y estos están definidos en SCSS. Aquí un ejemplo:
 ```css
 $--color-primary: #409EFF !default;
 $--color-primary-light-1: mix($--color-white, $--color-primary, 10%) !default; /* 53a8ff */
@@ -80,14 +80,14 @@ $--color-info: #878d99 !default;
 ...
 ```
 
-#### <strong>Modify variables</strong>
-Just edit `element-variables.scss`, e.g. changing the theme color to red:
+#### <strong>Modificando variables</strong>
+Solo debes modificar el archivo `element-variables.scss`, por ejemplo, para cambiar el color del tema a rojo:
 ```CSS
 $--color-primary: red;
 ```
 
-#### <strong>Build theme</strong>
-After saving the variable file, use `et` to build your theme. You can activate `watch` mode by adding a parameter `-w`. And if you customized the variable file's output, you need to add a parameter `-c` and variable file's name:
+#### <strong>Construyendo el tema</strong>
+Después de haber modificado el archivo de variables, utilizaremos el comando `et` para construir nuestro tema. Puedes activar el modo `watch` agregando el parámetro `-w`. Y, si deseas personalizar el nombre del archivo, debes agregar el parámetro `-c` seguido del nombre.
 ```shell
 et
 
@@ -95,8 +95,8 @@ et
 > ✔ build element theme
 ```
 
-#### <strong>Import custom theme</strong>
-By default the build theme file is placed inside `./theme`. You can specify its output directory with parameter `-o`. Importing your own theme is just like importing the default theme, only this time you import the file you just built:
+#### <strong>Importar un tema personalizado</strong>
+Por defecto, el archivo de tema construido es colocado dentro de `./theme`. Tu puedes especificar un directorio distinto utilizando el parámetro `-o`. Importar tu propio tema es igual a como si importarás el tema por defecto, únicamente tienes que importar el archivo que se construyó:
 
 ```javascript
 import '../theme/index.css'
@@ -106,8 +106,8 @@ import Vue from 'vue'
 Vue.use(ElementUI)
 ```
 
-#### <strong>Import component theme on demand</strong>
-If you are using `babel-plugin-component` for on-demand import, just modify `.babelrc` and specify `styleLibraryName` to the path where your custom theme is located relative to `.babelrc`. Note that `~` is required:
+#### <strong>Importar un tema de componente bajo demanda</strong>
+Si estas utilizando `babel-plugin-component` para importar bajo demanda, solo debes modificar el archivo `.babelrc` y especificar en la propiedad `styleLibraryName` la ruta en donde se encuentra localizado tu tema personalizado relativo a `.babelrc`. Nota el carácter `~` es obligatorio:
 ```json
 {
   "plugins": [["component", [
@@ -119,4 +119,4 @@ If you are using `babel-plugin-component` for on-demand import, just modify `.ba
 }
 ```
 
-If you are unfamiliar with `babel-plugin-component`, please refer to <a href="./#/en-US/component/quickstart">Quick Start</a>. For more details, check out the [project repository](https://github.com/ElementUI/element-theme) of `element-theme`.
\ No newline at end of file
+Si no estas familiarizado con `babel-plugin-component`, por favor dirígete a la documentación sobre <a href="./#/en-US/component/quickstart">Como Iniciar</a>. Para más detalles, consulta el [repositorio del proyecto](https://github.com/ElementUI/element-theme) de `element-theme`.
\ No newline at end of file

From 3764f1a373b2e13a42f4fbd8e78b1999755ef1e0 Mon Sep 17 00:00:00 2001
From: Federico Garcia <federico_garcia@transcanada.com>
Date: Wed, 8 Nov 2017 13:29:51 -0300
Subject: [PATCH 16/48] Translated to spanish - checkbox, collapse and
 color-picker

---
 examples/docs/es/checkbox.md     | 144 +++++++++++++++----------------
 examples/docs/es/collapse.md     |  39 +++++----
 examples/docs/es/color-picker.md |  34 ++++----
 3 files changed, 109 insertions(+), 108 deletions(-)

diff --git a/examples/docs/es/checkbox.md b/examples/docs/es/checkbox.md
index 8405e7050..557d9daed 100644
--- a/examples/docs/es/checkbox.md
+++ b/examples/docs/es/checkbox.md
@@ -3,8 +3,8 @@
   module.exports = {
     data() {
       return {
-        checkList: ['selected and disabled','Option A'],
-        // checkList2: ['Option A'],
+        checkList: ['seleccionado y deshabilitado','Opción A'],
+        // checkList2: ['Opción A'],
         checked: true,
         checked1: false,
         checked2: true,
@@ -45,18 +45,18 @@
 
 ## Checkbox
 
-A group of options for multiple choices.
+Un grupo de opciones para manejar múltiples elecciones.
 
-### Basic usage
+### Uso básico
 
-Checkbox can be used alone to switch between two states.
+Checkbox puede ser usado para alternar entre dos estados.
 
-:::demo Define `v-model`(bind variable) in `el-checkbox`. The default value is a `Boolean` for single `checkbox`, and it becomes `true` when selected. Content inside the `el-checkbox` tag will become the description following the button of the checkbox.
+:::demo Define `v-model`(enlaza la variable) en `el-checkbox`. El valor por defecto es un `Boolean` para un `checkbox`, y se convierte en `true` cuando este es seleccionado. El contenido dentro del tag `el-checkbox` se convierte en la descripción al costado del botón del checkbox. 
 
 ```html
 <template>
-  <!-- `checked` should be true or false -->
-  <el-checkbox v-model="checked">Option</el-checkbox>
+  <!-- `checked` debe ser true o false -->
+  <el-checkbox v-model="checked">Opción</el-checkbox>
 </template>
 <script>
   export default {
@@ -70,16 +70,16 @@ Checkbox can be used alone to switch between two states.
 ```
 :::
 
-### Disabled State
+### Estado Deshabilitado
 
-Disabled state for checkbox.
+Estado deshabilitado para el checkbox.
 
-::: demo Set the `disabled` attribute.
+::: demo Setear el atributo `disabled`.
 
 ```html
 <template>
-  <el-checkbox v-model="checked1" disabled>Option</el-checkbox>
-  <el-checkbox v-model="checked2" disabled>Option</el-checkbox>
+  <el-checkbox v-model="checked1" disabled>Opción</el-checkbox>
+  <el-checkbox v-model="checked2" disabled>Opción</el-checkbox>
 </template>
 <script>
   export default {
@@ -94,20 +94,20 @@ Disabled state for checkbox.
 ```
 :::
 
-### Checkbox group
+### Grupo de Checkboxes
 
-It is used for multiple checkboxes which are bound in one group, and indicates whether one option is selected by checking if it is checked.
+Es usado por multiples checkboxes los cuales están enlazados a un grupo, indica si una opción está seleccionada verificando si esta está marcada.
 
-:::demo `checkbox-group` element can manage multiple checkboxes in one group by using `v-model` which is bound as an `Array`. Inside the `el-checkbox` element, `label` is the value of the checkbox. If no content is nested in that tag, `label` will be rendered as the description following the button of the checkbox. `label` also corresponds with the element values in the array. It is selected if the specified value exists in the array, and vice versa.
+:::demo El elemento `checkbox-group` puede manejar multiples checkboxes en un grupo usando `v-model` el cuál está enlazado a un `Array`. Dentro del elemento `el-checkbox`, `label` es el valor del checkbox. Si en ese tag no hay contenido anidado, `label` va a ser mostrado como la descripción al lado del botón del checkbox. `label` también se corresponde con los valores del array. Es seleccionado si el valor especificado existe en el array y viceversa.
 
 ```html
 <template>
   <el-checkbox-group v-model="checkList">
-    <el-checkbox label="Option A"></el-checkbox>
-    <el-checkbox label="Option B"></el-checkbox>
-    <el-checkbox label="Option C"></el-checkbox>
+    <el-checkbox label="Opción A"></el-checkbox>
+    <el-checkbox label="Opción B"></el-checkbox>
+    <el-checkbox label="Opción C"></el-checkbox>
     <el-checkbox label="disabled" disabled></el-checkbox>
-    <el-checkbox label="selected and disabled" disabled></el-checkbox>
+    <el-checkbox label="Seleccionado y deshabilitado" disabled></el-checkbox>
   </el-checkbox-group>
 </template>
 
@@ -115,7 +115,7 @@ It is used for multiple checkboxes which are bound in one group, and indicates w
   export default {
     data () {
       return {
-        checkList: ['selected and disabled','Option A']
+        checkList: ['Seleccionado y deshabilitado','Opción A']
       };
     }
   };
@@ -123,15 +123,15 @@ It is used for multiple checkboxes which are bound in one group, and indicates w
 ```
 :::
 
-### Indeterminate
+### Indeterminado
 
-The `indeterminate` property can help you to achieve a 'check all' effect.
+La propiedad `indeterminate` puede ser usada para generar el efecto de marcar todos (check all).
 
 :::demo
 
 ```html
 <template>
-  <el-checkbox :indeterminate="isIndeterminate" v-model="checkAll" @change="handleCheckAllChange">Check all</el-checkbox>
+  <el-checkbox :indeterminate="isIndeterminate" v-model="checkAll" @change="handleCheckAllChange">Marcar todos</el-checkbox>
   <div style="margin: 15px 0;"></div>
   <el-checkbox-group v-model="checkedCities" @change="handleCheckedCitiesChange">
     <el-checkbox v-for="city in cities" :label="city" :key="city">{{city}}</el-checkbox>
@@ -164,9 +164,9 @@ The `indeterminate` property can help you to achieve a 'check all' effect.
 ```
 :::
 
-### Minimum / Maximum items checked
+### Cantidad Mínima / Máxima de elementos seleccionados
 
-The `min` and `max` properties can help you to limit the number of checked items.
+Las propiedades `min` y `max` pueden limitar la cantidad de elementos seleccionados.
 
 :::demo
 
@@ -193,11 +193,11 @@ The `min` and `max` properties can help you to limit the number of checked items
 ```
 :::
 
-### Button style
+### Estilo tipo Botón
 
-Checkbox with button styles.
+Checkbox con estilo tipo Botón.
 
-:::demo You just need to change `el-checkbox` element into `el-checkbox-button` element. We also provide `size` attribute.
+:::demo Sólo debes cambiar el elemento `el-checkbox` por el elemento `el-checkbox-button`. También proveemos el atributo `size`.
 ```html
 <template>
   <div>
@@ -239,29 +239,29 @@ Checkbox with button styles.
 ```
 :::
 
-### With borders
+### Con bordes
 
-:::demo The `border` attribute adds a border to Checkboxes.
+:::demo El atributo `border` agrega un borde a los Checkboxes.
 ```html
 <template>
   <div>
-    <el-checkbox v-model="checked3" label="Option1" border></el-checkbox>
-    <el-checkbox v-model="checked4" label="Option2" border></el-checkbox>
+    <el-checkbox v-model="checked3" label="Opción1" border></el-checkbox>
+    <el-checkbox v-model="checked4" label="Opción2" border></el-checkbox>
   </div>
   <div style="margin-top: 20px">
-    <el-checkbox v-model="checked5" label="Option1" border size="medium"></el-checkbox>
-    <el-checkbox v-model="checked6" label="Option2" border size="medium"></el-checkbox>
+    <el-checkbox v-model="checked5" label="Opción1" border size="medium"></el-checkbox>
+    <el-checkbox v-model="checked6" label="Opción2" border size="medium"></el-checkbox>
   </div>
   <div style="margin-top: 20px">
     <el-checkbox-group v-model="checkboxGroup5" size="small">
-      <el-checkbox label="Option1" border></el-checkbox>
-      <el-checkbox label="Option2" border disabled></el-checkbox>
+      <el-checkbox label="Opción1" border></el-checkbox>
+      <el-checkbox label="Opción2" border disabled></el-checkbox>
     </el-checkbox-group>
   </div>
   <div style="margin-top: 20px">
     <el-checkbox-group v-model="checkboxGroup6" size="mini" disabled>
-      <el-checkbox label="Option1" border></el-checkbox>
-      <el-checkbox label="Option2" border></el-checkbox>
+      <el-checkbox label="Opción1" border></el-checkbox>
+      <el-checkbox label="Opción2" border></el-checkbox>
     </el-checkbox-group>
   </div>
 </template>
@@ -283,45 +283,45 @@ Checkbox with button styles.
 ```
 :::
 
-### Checkbox Attributes
-| Attribute      | Description         | Type    | Options                         | Default|
+### Atributos de Checkbox
+| Atributo      | Descripción         | Tipo    | Opciones                         | Por defecto|
 |---------- |-------- |---------- |-------------  |-------- |
-| label     | value of the Checkbox when used inside a `checkbox-group`   | string / number / boolean   |       —        |     —    |
-| true-label | value of the Checkbox if it's checked   | string / number    |       —        |     —    |
-| false-label | value of the Checkbox if it's not checked   | string / number    |      —         |     —    |
-| disabled  | whether the Checkbox is disabled   | boolean   |  — | false   |
-| border  | whether to add a border around Checkbox  | boolean   | — | false   |
-| size  | size of the Checkbox, only works when `border` is true  | string  | medium / small / mini | — |
-| name | native 'name' attribute | string    |      —         |     —    |
-| checked  | if the Checkbox is checked   | boolean   |  — | false   |
-| indeterminate  | same as `indeterminate` in native checkbox | boolean   |  — | false   |
+| label     | valor del Checkbox si es usado dentro de un tag `checkbox-group`   | string / number / boolean   |       —        |     —    |
+| true-label | valor del Checkbox si está marcado   | string / number    |       —        |     —    |
+| false-label | valor del Checkbox si no está marcado   | string / number    |      —         |     —    |
+| disabled  | especifica si el Checkbox está deshabilitado   | boolean   |  — | false   |
+| border  | especifica si agrega un borde alrededor del Checkbox  | boolean   | — | false   |
+| size  | tamaño del Checkbox, sólo funciona si `border` es true  | string  | medium / small / mini | — |
+| name | atributo 'name' nativo | string    |      —         |     —    |
+| checked  | especifica si el Checkbox está marcado   | boolean   |  — | false   |
+| indeterminate  | similar a `indeterminate` en el checkbox nativo | boolean   |  — | false   |
 
-### Checkbox Events
-| Event Name | Description | Parameters |
+### Eventos de Checkbox
+| Nombre | Descripción | Parametros |
 |---------- |-------- |---------- |
-| change  | triggers when the binding value changes | the updated value |
+| change  | se ejecuta cuando el valor enlazado cambia | el valor actualizado |
 
-### Checkbox-group Attributes
-| Attribute      | Description         | Type    | Options                         | Default|
+### Atributos de Checkbox-group
+| Atributo      | Descripción         | Tipo    | Opciones                         | Por Defecto|
 |---------- |-------- |---------- |-------------  |-------- |
-|size | size of checkbox buttons or bordered checkboxes | string | medium / small / mini | — |
-| disabled  | whether the nesting checkboxes are disabled | boolean   | — | false   |
-| min     | minimum number of checkbox checked   | number    |       —        |     —    |
-| max     | maximum number of checkbox checked   | number    |       —        |     —    |
-|text-color | font color when button is active | string   | — | #ffffff   |
-|fill  | border and background color when button is active | string   | — | #409EFF   |
+|size | tamaño de los checkboxes de tipo botón o los checkboxes con border | string | medium / small / mini | — |
+| disabled  | especifica si los checkboxes anidados están deshabilitados | boolean   | — | false   |
+| min     | cantidad mínima de checkboxes que deben ser marcados   | number    |       —        |     —    |
+| max     | cantidad máxima de checkboxes que pueden ser marcados   | number    |       —        |     —    |
+|text-color | color de fuente cuando el botón está activo | string   | — | #ffffff   |
+|fill  | color de border y de fondo cuando el botón está activo | string   | — | #409EFF   |
 
-### Checkbox-group Events
-| Event Name | Description | Parameters |
+### Eventos de Checkbox-group
+| Nombre de Evento | Descripción | Parametros |
 |---------- |-------- |---------- |
-| change  | triggers when the binding value changes | the updated value |
+| change  | se ejecuta cuando el valor enlazado cambia | el valor actualizado |
 
-### Checkbox-button Attributes
-| Attribute      | Description         | Type    | Options                         | Default|
+### Atributos de Checkbox-button
+| Atributo      | Descripción         | Tipo    | Opciones                         | Por defecto|
 |---------- |-------- |---------- |-------------  |-------- |
-| label     | value of the checkbox when used inside a `checkbox-group` | string / number / boolean  |       —        |     —    |
-| true-label | value of the checkbox if it's checked | string / number | — |     —    |
-| false-label | value of the checkbox if it's not checked | string / number    |      —         |     —    |
-| disabled  | whether the checkbox is disabled | boolean   |  — | false   |
-| name | native 'name' attribute | string    |      —         |     —    |
-| checked  | if the checkbox is checked | boolean   |  — | false   |
+| label     | valor del checkbox cuando es usado dentro de un `checkbox-group` | string / number / boolean  |       —        |     —    |
+| true-label | valor del checkbox si este está marcado | string / number | — |     —    |
+| false-label | valor del checkbox si este no está marcado | string / number    |      —         |     —    |
+| disabled  | especifica si el checkbox está deshabilitado | boolean   |  — | false   |
+| name | atributo 'name' del checbox nativo | string    |      —         |     —    |
+| checked  | si el checkbox está marcado | boolean   |  — | false   |
diff --git a/examples/docs/es/collapse.md b/examples/docs/es/collapse.md
index c09bd4912..83e01fae2 100644
--- a/examples/docs/es/collapse.md
+++ b/examples/docs/es/collapse.md
@@ -26,11 +26,11 @@
 
 ## Collapse
 
-Use Collapse to store contents.
+Use Collapse para almacenar contenidos.
 
-### Basic usage
+### Uso básico
 
-You can expand multiple panels
+Puedes expandir varios paneles
 
 :::demo
 ```html
@@ -65,11 +65,11 @@ You can expand multiple panels
 ```
 :::
 
-### Accordion
+### Acordeón
 
-In accordion mode, only one panel can be expanded at once
+En modo acordeón sólo un panel puede ser expandido a la vez
 
-:::demo Activate accordion mode using the `accordion` attribute.
+:::demo Activa el modo acordeón usado el atributo `accordion`.
 ```html
 <el-collapse v-model="activeName" accordion>
   <el-collapse-item title="Consistency" name="1">
@@ -102,9 +102,9 @@ In accordion mode, only one panel can be expanded at once
 ```
 :::
 
-### Custom title
+### Título personalizado
 
-Besides using the `title` attribute, you can customize panel title with named slots, which makes adding custom content, e.g. icons, possible.
+Además de usar el atributo `title`, se puede personalizar el título del panel con named slots, esto hace posible agregar contenido personalizado, por ejemplo: iconos.
 
 :::demo
 ```html
@@ -133,19 +133,20 @@ Besides using the `title` attribute, you can customize panel title with named sl
 ```
 :::
 
-### Collapse Attributes
-| Attribute      | Description          | Type      | Accepted Values       | Default  |
+### Atributos de Collapse
+| Atributo      | Descripción          | Tipo      | Valores aceptados       | Por Defecto  |
 |---------- |-------------- |---------- |--------------------------------  |-------- |
-| accordion | whether to activate accordion mode | boolean | — | false |
-| value | currently active panel | string (accordion mode)/array (non-accordion mode) | — | — |
+| accordion | especifica si activa el modo acordeón | boolean | — | false |
+| value | panel activo | string (modo acordeón)/array (No modo acordeón) | — | — |
 
-### Collapse Events
-| Event Name | Description | Parameters |
+### Eventos de Collapse
+| Nombre de Evento | Descripción | Parametros |
 |---------|---------|---------|
-| change | triggers when active panels change | activeNames: array (non-accordion mode)/string (accordion mode) |
+| change | se dispara cuando los paneles activos cambian | activeNames: array (No modo acordeón)/string (modo acordeón) |
 
-### Collapse Item Attributes
-| Attribute      | Description          | Type      | Accepted Values       | Default  |
+
+### Atributos de Collapse Item
+| Atributo      | Descripción          | Tipo      | Valores aceptados       | Por Defecto  |
 |---------- |-------------- |---------- |--------------------------------  |-------- |
-| name | unique identification of the panel | string/number | — | — |
-| title | title of the panel | string | — | — |
\ No newline at end of file
+| name | identificador único del panel | string/number | — | — |
+| title | título del panel | string | — | — |
\ No newline at end of file
diff --git a/examples/docs/es/color-picker.md b/examples/docs/es/color-picker.md
index 1709b51d3..8b887fa55 100644
--- a/examples/docs/es/color-picker.md
+++ b/examples/docs/es/color-picker.md
@@ -42,18 +42,18 @@
 
 ## ColorPicker
 
-ColorPicker is a color selector supporting multiple color formats.
+ColorPicker es un selector de color que soporta varios formatos de color.
 
-### Basic usage
+### Uso básico
 
-:::demo ColorPicker requires a string typed variable to be bound to v-model.
+:::demo ColorPicker requiere una variable de tipo string para ser enlazada a v-model.
 ```html
 <div class="block">
-  <span class="demonstration">With default value</span>
+  <span class="demonstration">Especifica valor por defecto</span>
   <el-color-picker v-model="color1"></el-color-picker>
 </div>
 <div class="block">
-  <span class="demonstration">With no default value</span>
+  <span class="demonstration">No especifica valor por defecto</span>
   <el-color-picker v-model="color2"></el-color-picker>
 </div>
 
@@ -72,7 +72,7 @@ ColorPicker is a color selector supporting multiple color formats.
 
 ### Alpha
 
-:::demo ColorPicker supports alpha channel selecting. To activate alpha selecting, just add the `show-alpha` attribute.
+:::demo ColorPicker soporta selección de canales alpha. Para activarlo sólo agrega el atributo `show-alpha`.
 ```html
 <el-color-picker v-model="color3" show-alpha></el-color-picker>
 
@@ -109,17 +109,17 @@ ColorPicker is a color selector supporting multiple color formats.
 ```
 :::
 
-### Attributes
-| Attribute | Description | Type | Accepted Values | Default |
+### Atributos
+| Atributo | Descripción | Tipo | Valores aceptados | Por defecto |
 |---------- |-------- |---------- |-------------  |-------- |
-| disabled | whether to disable the ColorPicker | boolean | — | false |
-| size | size of ColorPicker | string | — | medium / small / mini |
-| show-alpha | whether to display the alpha slider | boolean | — | false |
-| color-format | color format of v-model | string | hsl / hsv / hex / rgb | hex (when show-alpha is false)/ rgb (when show-alpha is true) |
-| popper-class | custom class name for ColorPicker's dropdown | string | — | — |
+| disabled | especifica si se deshabilita el ColorPicker | boolean | — | false |
+| size | tamaño del ColorPicker | string | — | medium / small / mini |
+| show-alpha | especifica si se muestra el control deslizante para el valor alpha | boolean | — | false |
+| color-format | formato de color del v-model | string | hsl / hsv / hex / rgb | hex (si show-alpha es false)/ rgb (si show-alpha es true) |
+| popper-class | nombre de clase para el dropdown del ColorPicker | string | — | — |
 
-### Events
-| Event Name | Description | Parameters |
+### Eventos
+| Nombre de Evento | Descripción | Parametros |
 |---------|--------|---------|
-| change | triggers when input value changes | color value |
-| active-change | triggers when the current active color changes | active color value |
\ No newline at end of file
+| 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 |
\ No newline at end of file

From c0c0e728ca05c57bb0557d2d7680a8c2c54947c2 Mon Sep 17 00:00:00 2001
From: Leopoldthecoder <Leopoldthecuber@gmail.com>
Date: Fri, 10 Nov 2017 16:21:22 +0800
Subject: [PATCH 17/48] Changelog: update for 2.0.4

---
 CHANGELOG.en-US.md             | 10 ++++++++++
 CHANGELOG.zh-CN.md             | 10 ++++++++++
 packages/upload/src/ajax.js    |  4 ++--
 test/unit/specs/upload.spec.js |  2 +-
 4 files changed, 23 insertions(+), 3 deletions(-)

diff --git a/CHANGELOG.en-US.md b/CHANGELOG.en-US.md
index df777aff6..497b52d20 100644
--- a/CHANGELOG.en-US.md
+++ b/CHANGELOG.en-US.md
@@ -1,5 +1,15 @@
 ## Changelog
 
+### 2.0.4
+
+*2017-11-10*
+
+- Improved accessibility for Cascader, Dropdown, Message, Notification, Popover, Tooltip and Tree
+- Fixed Container resize when the width of viewport decreases, #8042
+- Fixed Tree's `updateKeyChildren` incorrectly deleting child nodes, #8100
+- Fixed bordered CheckboxButton's height when nested in a Form, #8100
+- Fixed Menu's parsing error for custom colors, #8153 (by @zhouyixiang)
+
 ### 2.0.3
 
 *2017-11-03*
diff --git a/CHANGELOG.zh-CN.md b/CHANGELOG.zh-CN.md
index d713059db..1e21c98a4 100644
--- a/CHANGELOG.zh-CN.md
+++ b/CHANGELOG.zh-CN.md
@@ -1,5 +1,15 @@
 ## 更新日志
 
+### 2.0.4
+
+*2017-11-10*
+
+- 提升 Cascader、Dropdown、Message、Notification、Popover、Tooltip、Tree 的可访问性
+- 修复当视口变窄时 Container 无法同步更新其宽度的问题，#8042
+- 修复 Tree 的 `updateKeyChildren` 在删除子节点时的行为错误，#8100
+- 修复带有边框的 CheckboxButton 在 Form 中高度错误的问题，#8100
+- 修复 Menu 在解析自定义颜色时的错误，#8153（by @zhouyixiang）
+
 ### 2.0.3
 
 *2017-11-03*
diff --git a/packages/upload/src/ajax.js b/packages/upload/src/ajax.js
index 0d62e0855..470505ae4 100644
--- a/packages/upload/src/ajax.js
+++ b/packages/upload/src/ajax.js
@@ -1,9 +1,9 @@
 function getError(action, option, xhr) {
   let msg;
   if (xhr.response) {
-    msg = `${xhr.status} ${xhr.response.error || xhr.response}`;
+    msg = `${xhr.response.error || xhr.response}`;
   } else if (xhr.responseText) {
-    msg = `${xhr.status} ${xhr.responseText}`;
+    msg = `${xhr.responseText}`;
   } else {
     msg = `fail to post ${action} ${xhr.status}`;
   }
diff --git a/test/unit/specs/upload.spec.js b/test/unit/specs/upload.spec.js
index 5d191a18b..a1c6134b1 100644
--- a/test/unit/specs/upload.spec.js
+++ b/test/unit/specs/upload.spec.js
@@ -41,7 +41,7 @@ describe('ajax', () => {
   });
   it('40x code should be error', done => {
     option.onError = e => {
-      expect(e.toString()).to.contain('404 Not found');
+      expect(e.toString()).to.contain('Not found');
       done();
     };
 

From 33bf6f9cd9ba27f644ef0e37af17533bb34693bd Mon Sep 17 00:00:00 2001
From: Leopoldthecoder <Leopoldthecuber@gmail.com>
Date: Fri, 10 Nov 2017 16:39:45 +0800
Subject: [PATCH 18/48] [build] 2.0.4

---
 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 dd9c28277..285b329a5 100644
--- a/examples/versions.json
+++ b/examples/versions.json
@@ -1 +1 @@
-{"1.0.9":"1.0","1.1.6":"1.1","1.2.9":"1.2","1.3.7":"1.3","1.4.9":"1.4","2.0.3":"2.0"}
\ No newline at end of file
+{"1.0.9":"1.0","1.1.6":"1.1","1.2.9":"1.2","1.3.7":"1.3","1.4.9":"1.4","2.0.4":"2.0"}
\ No newline at end of file
diff --git a/packages/theme-chalk/package.json b/packages/theme-chalk/package.json
index c040d9ead..985119365 100644
--- a/packages/theme-chalk/package.json
+++ b/packages/theme-chalk/package.json
@@ -1,6 +1,6 @@
 {
   "name": "element-theme-chalk",
-  "version": "2.0.3",
+  "version": "2.0.4",
   "description": "Element component chalk theme.",
   "main": "lib/index.css",
   "style": "lib/index.css",
diff --git a/src/index.js b/src/index.js
index 0a07d6841..956f6b3a6 100644
--- a/src/index.js
+++ b/src/index.js
@@ -173,7 +173,7 @@ if (typeof window !== 'undefined' && window.Vue) {
 };
 
 module.exports = {
-  version: '2.0.3',
+  version: '2.0.4',
   locale: locale.use,
   i18n: locale.i18n,
   install,

From c3ee5fc0df1fbbfabbc0b2f182809a77cc3f5a20 Mon Sep 17 00:00:00 2001
From: Leopoldthecoder <Leopoldthecuber@gmail.com>
Date: Fri, 10 Nov 2017 16:39:46 +0800
Subject: [PATCH 19/48] [release] 2.0.4

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

diff --git a/package.json b/package.json
index d6fae6758..91b960155 100644
--- a/package.json
+++ b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "element-ui",
-  "version": "2.0.3",
+  "version": "2.0.4",
   "description": "A Component Library for Vue.js.",
   "main": "lib/element-ui.common.js",
   "files": [

From 02f67dd309f79f55fe77912de7be386922bb46dc Mon Sep 17 00:00:00 2001
From: ProgramerGuy <ProgramerGuy@users.noreply.github.com>
Date: Fri, 10 Nov 2017 17:27:10 -0600
Subject: [PATCH 20/48] Update switch.md

---
 examples/docs/es/switch.md | 54 ++++++++++++++++++++------------------
 1 file changed, 28 insertions(+), 26 deletions(-)

diff --git a/examples/docs/es/switch.md b/examples/docs/es/switch.md
index d07939640..12ae360a9 100644
--- a/examples/docs/es/switch.md
+++ b/examples/docs/es/switch.md
@@ -24,10 +24,11 @@
 
 ## Switch
 
-Switch is used for switching between two opposing states.
+Switch es utilizdo para realizar cambios entre dos estados opuestos.
 
-### Basic usage
-:::demo Bind `v-model` to a `Boolean` typed variable. The `active-color` and `inactive-color` attribute decides the background color in two states.
+### Uso básico
+
+:::demo Enlaza `v-model` a una variable de tipo `Boolean`. Los atributos `active-color` y `inactive-color` deciden el color de fondo en cada estado.
 
 ```html
 <el-switch v-model="value1">
@@ -51,8 +52,8 @@ Switch is used for switching between two opposing states.
 ```
 :::
 
-### Text description
-:::demo You can add `active-text` and `inactive-text` attribute to show texts.
+### Texto de descripción
+:::demo Puedes agregar los atributos `active-text` y `inactive-text` para mostrar los textos.
 
 ```html
 <el-switch
@@ -82,9 +83,9 @@ Switch is used for switching between two opposing states.
 ```
 :::
 
-### Extended value types
+### Tipos de valores extendidos
 
-:::demo You can set `active-value` and `inactive-value` attributes. They both receive a `Boolean`, `String` or `Number` typed value.
+:::demo Puedes establecer los atributos `active-value` y `inactive-value`. Ambos reciben valores de tipo `Boolean`, `String` o `Number`.
 
 ```html
 <el-tooltip :content="'Switch value: ' + value5" placement="top">
@@ -112,7 +113,7 @@ Switch is used for switching between two opposing states.
 
 ### Disabled
 
-:::demo Adding the `disabled` attribute disables Switch.
+:::demo Agregar el atributo `disabled` desactiva el componente Switch.
 
 ```html
 <el-switch
@@ -137,29 +138,30 @@ Switch is used for switching between two opposing states.
 ```
 :::
 
-### Attributes
+### Atributos
 
- Attribute      | Description          | Type      | Accepted Values       | Default
+ Atributo      | Descripción          | Tipo      | Valores aceptados       | Por defecto
 ----| ----| ----| ----|----
 disabled | whether Switch is disabled | boolean | — | false
-width | width of Switch | number | — | 40
-active-icon-class | class name of the icon displayed when in `on` state, overrides `active-text` | string | — | —
-inactive-icon-class |class name of the icon displayed when in `off` state, overrides `inactive-text`| string | — | —
-active-text | text displayed when in `on` state | string | — | —
-inactive-text | text displayed when in `off` state | string | — | —
-active-value  | switch value when in `on` state | boolean / string / number | — | true
-inactive-value  | switch value when in `off` state | boolean / string / number | — | false
-active-color | background color when in `on` state | string | — | #409EFF
-inactive-color | background color when in `off` state | string | — | #C0CCDA
-name| input name of Switch | string | — | —
+width | ancho del componente Switch | number | — | 40
+active-icon-class | nombre de la clase del icono mostrado en el estado `on`, sobreescribe `active-text` | string | — | —
+inactive-icon-class |nombre de la clase del icono mostrado en el estado `off`, sobreescribe `inactive-text`| string | — | —
+active-text | texto mostrado en el estado `on` | string | — | —
+inactive-text | texto mostrado en el estado `off` | string | — | —
+active-value  | cambia su valor cuando se encuentra en el estado `on` | boolean / string / number | — | true
+inactive-value  | cambia su valor cuando se encuentra en el estado `off` | boolean / string / number | — | false
+active-color | color de fondo cuando se encuentra en el estado `on` | string | — | #409EFF
+inactive-color | color de fondo cuando se encuentra en el estado `off` | string | — | #C0CCDA
+name| nombre de entrada del componente Switch | string | — | —
 
-### Events
+### Eventos
 
- Event Name | Description | Parameters
+ Nombre del evento | Descripción | Parametro
 ---- | ----| ----
-change | triggers when value changes | value after changing
+change | se dispara cuando el valor cambia | valor 
+después de cambiar
 
-### Methods
-Method | Description | Parameters
+### Metodos
+Metodo | Descripción | Parametro
 ------|--------|-------
-focus | focus the Switch component | —
+focus | foco al componente Switch | —

From ac39df84c06e41d7fed06048cda848120e8c9490 Mon Sep 17 00:00:00 2001
From: medice <toni.nisumaa@gmail.com>
Date: Fri, 10 Nov 2017 19:38:48 +0200
Subject: [PATCH 21/48] clickoutside: fix memory leak

---
 src/utils/clickoutside.js | 1 +
 1 file changed, 1 insertion(+)

diff --git a/src/utils/clickoutside.js b/src/utils/clickoutside.js
index a3d32b009..e0e69b16e 100644
--- a/src/utils/clickoutside.js
+++ b/src/utils/clickoutside.js
@@ -65,5 +65,6 @@ export default {
         break;
       }
     }
+    delete el[ctx];
   }
 };

From 380bb55fb20325c666cc7d48371e33719d732551 Mon Sep 17 00:00:00 2001
From: Javier Diaz <coderdiaz@gmail.com>
Date: Fri, 10 Nov 2017 23:40:09 -0600
Subject: [PATCH 22/48] [upload] Spanish Translation

---
 examples/docs/es/upload.md | 116 ++++++++++++++++++-------------------
 1 file changed, 58 insertions(+), 58 deletions(-)

diff --git a/examples/docs/es/upload.md b/examples/docs/es/upload.md
index 267e889af..875e854e8 100644
--- a/examples/docs/es/upload.md
+++ b/examples/docs/es/upload.md
@@ -120,13 +120,13 @@
     }
   }
 </script>
-## Upload
+## Carga de archivos
 
-Upload files by clicking or drag-and-drop
+Carga archivos haciendo clic o arrastrándolos.
 
-### Click to upload files
+### Clic para cargar archivos
 
-:::demo Customize upload button type and text using `slot`. Set `limit` and `on-exceed` to limit the maximum number of uploads allowed and specify method when the limit is exceeded.
+:::demo Personaliza el tipo y texto del botón utilizando la propiedad `slot`. Define las propiedades `limit` y `on-exceed` para limitar el número máximo de archivos a subir y especifica un método para cuando el límite ha sido excedido.
 ```html
 <el-upload
   class="upload-demo"
@@ -137,8 +137,8 @@ Upload files by clicking or drag-and-drop
   :limit="3"
   :on-exceed="handleExceed"
   :file-list="fileList">
-  <el-button size="small" type="primary">Click to upload</el-button>
-  <div slot="tip" class="el-upload__tip">jpg/png files with a size less than 500kb</div>
+  <el-button size="small" type="primary">Clic para subir archivo</el-button>
+  <div slot="tip" class="el-upload__tip">Solo archivos jpg/png con un tamaño menor de 500kb</div>
 </el-upload>
 <script>
   export default {
@@ -155,7 +155,7 @@ Upload files by clicking or drag-and-drop
         console.log(file);
       },
       handleExceed(files, fileList) {
-        this.$message.warning(`The limit is 3, you selected ${files.length} files this time, add up to ${files.length + fileList.length} totally`);
+        this.$message.warning(`El límite es 3, haz seleccionado ${files.length} archivos esta vez, añade hasta ${files.length + fileList.length}`);
       }
     }
   }
@@ -163,9 +163,9 @@ Upload files by clicking or drag-and-drop
 ```
 :::
 
-### User avatar upload
+### Cargar avatar de usuario
 
-Use `before-upload` hook to limit the upload file format and size.
+Utiliza el _hook_ `before-upload` para limitar el formato de archivo y su tamaño.
 
 ::: demo
 ```html
@@ -221,10 +221,10 @@ Use `before-upload` hook to limit the upload file format and size.
         const isLt2M = file.size / 1024 / 1024 < 2;
 
         if (!isJPG) {
-          this.$message.error('Avatar picture must be JPG format!');
+          this.$message.error('La imagen debe estar en formato JPG!');
         }
         if (!isLt2M) {
-          this.$message.error('Avatar picture size can not exceed 2MB!');
+          this.$message.error('La imagen excede los 2MB!');
         }
         return isJPG && isLt2M;
       }
@@ -234,9 +234,9 @@ Use `before-upload` hook to limit the upload file format and size.
 ```
 :::
 
-### Photo Wall
+### Pared de fotografías
 
-Use `list-type` to change the fileList style.
+Utiliza la propiedad `list-type` para cambiar el estilo a un listado de archivos.
 
 ::: demo
 ```html
@@ -272,7 +272,7 @@ Use `list-type` to change the fileList style.
 ```
 :::
 
-### FileList with thumbnail
+### Lista de archivos con miniatura
 
 ::: demo
 ```html
@@ -283,8 +283,8 @@ Use `list-type` to change the fileList style.
   :on-remove="handleRemove"
   :file-list="fileList2"
   list-type="picture">
-  <el-button size="small" type="primary">Click to upload</el-button>
-  <div slot="tip" class="el-upload__tip">jpg/png files with a size less than 500kb</div>
+  <el-button size="small" type="primary">Clic para subir archivo</el-button>
+  <div slot="tip" class="el-upload__tip">Solo archivos jpg/png con un tamaño menor de 500kb</div>
 </el-upload>
 <script>
   export default {
@@ -306,9 +306,9 @@ Use `list-type` to change the fileList style.
 ```
 :::
 
-### File list control
+### Control de lista de archivos
 
-Use `on-change` hook function to control upload file list
+Utiliza el _hook_ `on-change` para controlar la funcionalidad de la lista de archivos subidos.
 
 ::: demo
 ```html
@@ -317,8 +317,8 @@ Use `on-change` hook function to control upload file list
   action="https://jsonplaceholder.typicode.com/posts/"
   :on-change="handleChange"
   :file-list="fileList3">
-  <el-button size="small" type="primary">Click to upload</el-button>
-  <div slot="tip" class="el-upload__tip">jpg/png files with a size less than 500kb</div>
+  <el-button size="small" type="primary">Clic para subir archivo</el-button>
+  <div slot="tip" class="el-upload__tip">Solo archivos jpg/png con un tamaño menor de 500kb</div>
 </el-upload>
 <script>
   export default {
@@ -345,9 +345,9 @@ Use `on-change` hook function to control upload file list
 ```
 :::
 
-### Drag to upload
+### Arrastrar para cargar archivo
 
-You can drag your file to a certain area to upload it.
+Puedes arrastrar el archivo dentro de un área en especifico para cargar el archivo.
 
 ::: demo
 ```html
@@ -360,13 +360,13 @@ You can drag your file to a certain area to upload it.
   :file-list="fileList"
   multiple>
   <i class="el-icon-upload"></i>
-  <div class="el-upload__text">Drop file here or <em>click to upload</em></div>
-  <div class="el-upload__tip" slot="tip">jpg/png files with a size less than 500kb</div>
+  <div class="el-upload__text">Suelta tu archivo aquí o <em>haz clic para cargar</em></div>
+  <div slot="tip" class="el-upload__tip">Solo archivos jpg/png con un tamaño menor de 500kb</div>
 </el-upload>
 ```
 :::
 
-### Manual upload
+### Carga normal
 
 ::: demo
 ```html
@@ -375,9 +375,9 @@ You can drag your file to a certain area to upload it.
   ref="upload"
   action="https://jsonplaceholder.typicode.com/posts/"
   :auto-upload="false">
-  <el-button slot="trigger" size="small" type="primary">select file</el-button>
-  <el-button style="margin-left: 10px;" size="small" type="success" @click="submitUpload">upload to server</el-button>
-  <div class="el-upload__tip" slot="tip">jpg/png files with a size less than 500kb</div>
+  <el-button slot="trigger" size="small" type="primary">Selecciona un archivo</el-button>
+  <el-button style="margin-left: 10px;" size="small" type="success" @click="submitUpload">Cargar al servidor</el-button>
+  <div slot="tip" class="el-upload__tip">Solo archivos jpg/png con un tamaño menor de 500kb</div>
 </el-upload>
 <script>
   export default {
@@ -391,36 +391,36 @@ You can drag your file to a certain area to upload it.
 ```
 :::
 
-### Attributes
-Attribute      | Description          | Type      | Accepted Values       | Default
+### Atributos
+Atributo      | Descripción          | Tipo      | Valores aceptados       | Por defecto
 ----| ----| ----| ----| ----
-action | required, request URL | string | — | —
-headers | request headers | object | — | —
-multiple | whether uploading multiple files is permitted | boolean | — | —
-data | additions options of request | object | — | —
-name | key name for uploaded file | string | — | file
-with-credentials | whether cookies are sent | boolean | — |false
-show-file-list | whether to show the uploaded file list | boolean | — | true
- drag | whether to activate drag and drop mode | boolean | — | false
-accept | accepted [file types](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input#attr-accept), will not work when `thumbnail-mode` is `true` | string | — | —
-on-preview | hook function when clicking the uploaded files | function(file) | — | —
-on-remove | hook function when files are removed | function(file, fileList) | — | —
-on-success | hook function when uploaded successfully | function(response, file, fileList) | — | —
-on-error | hook function when some errors occurs | function(err, file, fileList) | — | —
-on-progress | hook function when some progress occurs | function(event, file, fileList) | — | — |
-on-change | hook function when select file or upload file success or upload file fail | function(file, fileList) | — | — |
-before-upload | hook function before uploading with the file to be uploaded as its parameter. If `false` is returned or a `Promise` is returned and then is rejected, uploading will be aborted | function(file) | — | —
-thumbnail-mode | whether thumbnail is displayed | boolean | — | false
-file-list | default uploaded files, e.g. [{name: 'food.jpg', url: 'https://xxx.cdn.com/xxx.jpg'}] | array | — | []
-list-type | type of fileList | string | text/picture/picture-card | text |
-auto-upload | whether to auto upload file | boolean | — | true |
-http-request | override default xhr behavior, allowing you to implement your own upload-file's request | function | — | — |
-disabled | whether to disable upload | boolean | — | false |
-limit | maximum number of uploads allowed | number | — | — |
-on-exceed | hook function when limit is exceeded | function(files, fileList) | — | - |
+action | obligatorio, URL de la petición | string | — | —
+headers | cabeceras de la petición | object | — | —
+multiple | permite subir múltiples archivos | boolean | — | —
+data | opciones adicionales de la petición | object | — | —
+name | nombre clave del archivo | string | — | file
+with-credentials | permite enviar cookies | boolean | — |false
+show-file-list | permite mostrar la lista de archivos cargados | boolean | — | true
+ drag | se permite activar el modo arrastrar y soltar | boolean | — | false
+accept | acepta [tipos de archvios](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input#attr-accept), puede no funcionar cuando `thumbnail-mode` esta en `true` | string | — | —
+on-preview | _hook_ lanzado al hacer clic en los archivos subidos | function(file) | — | —
+on-remove | _hook_ lanzado cuando los archivos son eliminados | function(file, fileList) | — | —
+on-success | _hook_ lanzado cuando los archivos fueron cargados correctamente | function(response, file, fileList) | — | —
+on-error | _hook_ lanzado cuando han ocurrido algunos errores | function(err, file, fileList) | — | —
+on-progress | _hook_ lanzado cuando se produce algún progreso | function(event, file, fileList) | — | — |
+on-change | _hook_ lanzado cuando el archivo seleccionado se carga correctamente o falla | function(file, fileList) | — | — |
+before-upload | _hook_ lanzado antes de que el archivo sea cargado. Si este devuelve `true` o `Promise` entonces será rechazado, la carga puede ser cancelada | function(file) | — | —
+thumbnail-mode | permite 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 permite autocargar archivos | boolean | — | true |
+http-request | sobreescribe el comportamiento por defecto de xhr, permitiendo implementar tu propia petición de carga de archivos | function | — | — |
+disabled | permite deshabilitar 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) | — | - |
 
-### Methods
-| Methods Name | Description | Parameters |
+### Métodos
+| Nombre del método | Descripción | Parametros |
 |---------- |-------- |---------- |
-| clearFiles | clear the uploaded file list (this method is not supported in the `before-upload` hook) | — |
-| abort | cancel upload request | （ file: fileList's item ） |
+| 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 cbbe63efcfcbaa55fea00da621ef4903e3e385ad Mon Sep 17 00:00:00 2001
From: Javier Diaz <coderdiaz@gmail.com>
Date: Fri, 10 Nov 2017 23:47:21 -0600
Subject: [PATCH 23/48] Fixed typos and translation

---
 examples/docs/es/upload.md | 14 +++++++-------
 1 file changed, 7 insertions(+), 7 deletions(-)

diff --git a/examples/docs/es/upload.md b/examples/docs/es/upload.md
index 875e854e8..5e5dfa00d 100644
--- a/examples/docs/es/upload.md
+++ b/examples/docs/es/upload.md
@@ -396,12 +396,12 @@ Atributo      | Descripción          | Tipo      | Valores aceptados       | Po
 ----| ----| ----| ----| ----
 action | obligatorio, URL de la petición | string | — | —
 headers | cabeceras de la petición | object | — | —
-multiple | permite subir múltiples archivos | boolean | — | —
+multiple | especifica si se permite subir múltiples archivos | boolean | — | —
 data | opciones adicionales de la petición | object | — | —
 name | nombre clave del archivo | string | — | file
-with-credentials | permite enviar cookies | boolean | — |false
-show-file-list | permite mostrar la lista de archivos cargados | boolean | — | true
- drag | se permite activar el modo arrastrar y soltar | boolean | — | false
+with-credentials | especifica si enviará cookies | boolean | — |false
+show-file-list | especifica si se debe mostrar la lista de archivos cargados | boolean | — | true
+ drag | se especifica si se activará el modo arrastrar y soltar | boolean | — | false
 accept | acepta [tipos de archvios](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input#attr-accept), puede no funcionar cuando `thumbnail-mode` esta en `true` | string | — | —
 on-preview | _hook_ lanzado al hacer clic en los archivos subidos | function(file) | — | —
 on-remove | _hook_ lanzado cuando los archivos son eliminados | function(file, fileList) | — | —
@@ -410,12 +410,12 @@ on-error | _hook_ lanzado cuando han ocurrido algunos errores | function(err, fi
 on-progress | _hook_ lanzado cuando se produce algún progreso | function(event, file, fileList) | — | — |
 on-change | _hook_ lanzado cuando el archivo seleccionado se carga correctamente o falla | function(file, fileList) | — | — |
 before-upload | _hook_ lanzado antes de que el archivo sea cargado. Si este devuelve `true` o `Promise` entonces será rechazado, la carga puede ser cancelada | function(file) | — | —
-thumbnail-mode | permite mostrar la miniatura | boolean | — | false
+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 permite autocargar archivos | boolean | — | true |
+auto-upload | se especifica si se autocargan archivos | boolean | — | true |
 http-request | sobreescribe el comportamiento por defecto de xhr, permitiendo implementar tu propia petición de carga de archivos | function | — | — |
-disabled | permite deshabilitar la carga de archivos | boolean | — | false |
+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) | — | - |
 

From 38130bd3856e1de4114f63a86957d6724c3207c4 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Rub=C3=A9n=20Salvador=20Garc=C3=ADa=20San=20Juan?=
 <rssanjuan2704@gmail.com>
Date: Sat, 11 Nov 2017 02:32:35 -0500
Subject: [PATCH 24/48] Finished translations.

---
 examples/docs/es/installation.md | 17 +++---
 examples/docs/es/layout.md       | 98 ++++++++++++++++----------------
 examples/docs/es/menu.md         | 82 +++++++++++++-------------
 3 files changed, 100 insertions(+), 97 deletions(-)

diff --git a/examples/docs/es/installation.md b/examples/docs/es/installation.md
index a381d3972..99b54b545 100644
--- a/examples/docs/es/installation.md
+++ b/examples/docs/es/installation.md
@@ -1,14 +1,14 @@
-## Installation
+## Instalación
 
 ### npm
-Installing with npm is recommended and it works seamlessly with [webpack](https://webpack.js.org/).
+Instalar mediante npm es la forma recomendada ya que se integra facilmente con [webpack](https://webpack.js.org/).
 
 ```shell
 npm i element-ui -S
 ```
 
 ### CDN
-Get the latest version from [unpkg.com/element-ui](https://unpkg.com/element-ui/) , and import JavaScript and CSS file in your page.
+Obten la última versión desde [unpkg.com/element-ui](https://unpkg.com/element-ui/) , e importa el JavaScript y los archivos CSS en tu página.
 
 ```html
 <!-- import CSS -->
@@ -17,12 +17,12 @@ Get the latest version from [unpkg.com/element-ui](https://unpkg.com/element-ui/
 <script src="https://unpkg.com/element-ui/lib/index.js"></script>
 ```
 
-:::tip
-We recommend our users to lock Element's version when using CDN. Please refer to [unpkg.com](https://unpkg.com) for more information.
-:::
+##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.
+
 
 ### Hello world
-If you are using CDN, a hello-world page is easy with Element. [Online Demo](https://jsfiddle.net/hzfpyvg6/14/)
+Si estás usando un CDN, una página con Hello-World es fácil con Element. [Online Demo](https://jsfiddle.net/hzfpyvg6/14/)
 
 ```html
 <!DOCTYPE html>
@@ -54,4 +54,5 @@ If you are using CDN, a hello-world page is easy with Element. [Online Demo](htt
   </script>
 </html>
 ```
-If you are using npm and wish to apply webpack, please continue to the next page: Quick Start.
+Si estás usando npm y deseas combinarlo con webpack, por favor continúa a la siguiente página: Quick Start
+
diff --git a/examples/docs/es/layout.md b/examples/docs/es/layout.md
index e234c6061..f537e8542 100644
--- a/examples/docs/es/layout.md
+++ b/examples/docs/es/layout.md
@@ -31,13 +31,13 @@
 
 ## Layout
 
-Quickly and easily create layouts with the basic 24-column.
+Rápido y facilmente crea un layout básico con 24 columnas.
 
-### Basic layout
+### Layout básico
 
-Create basic grid layout using columns.
+Crea un layout básico usando columnas.
 
-::: demo With `row` and `col`, we can easily manipulate the layout using the `span` attribute.
+:::**Demo** Con `row` y `col`, podemos facilmente manipular el layout usando el atributo `span`.
 ```html
 <el-row>
   <el-col :span="24"><div class="grid-content bg-purple-dark"></div></el-col>
@@ -97,11 +97,11 @@ Create basic grid layout using columns.
 ```
 :::
 
-### Column spacing
+### Espaciado de columnas
 
-Column spacing is supported.
+El espaciado de columnas está soportado.
 
-::: demo Row provides `gutter` attribute to specify spacings between columns, and its default value is 0.
+:::**Demo** Row provee el atributo `gutter` para especificar el espacio entre columnas y su valor por defecto es 0.
 ```html
 <el-row :gutter="20">
   <el-col :span="6"><div class="grid-content bg-purple"></div></el-col>
@@ -141,11 +141,11 @@ Column spacing is supported.
 ```
 :::
 
-### Hybrid layout
+### Layout híbrido
 
-Form a more complex hybrid layout by combining the basic 1/24 columns.
+Crea un complejo layout híbrido combinando el básico de 1/24 columnas.
 
-::: demo
+:::**Demo**
 ```html
 <el-row :gutter="20">
   <el-col :span="16"><div class="grid-content bg-purple"></div></el-col>
@@ -194,11 +194,11 @@ Form a more complex hybrid layout by combining the basic 1/24 columns.
 ```
 :::
 
-### Column offset
+### Offset de columnas
 
-You can specify column offsets.
+Puedes especificar offsets para las columnas.
 
-::: demo You can specify the number of column offset by setting the value of `offset` attribute of Col.
+:::**Demo** Puedes especificar el offset para una columna mediante el atributo `offset` de Col.
 
 ```html
 <el-row :gutter="20">
@@ -244,11 +244,11 @@ You can specify column offsets.
 ```
 :::
 
-### Alignment
+### Alineación
 
-Use the flex layout to make flexible alignment of columns.
+Usa flex layout para un alineamiento flexible de columnas.
 
-::: demo You can enable flex layout by setting `type` attribute to 'flex', and define the layout of child elements by setting `justify` attribute with start, center, end, space-between or space-around.
+:::**Demo** Puedes habilitar flex layout asignando el atributo `type` a 'flex', y definir el layout de elementos hijos asignando el atributo `justify` con los valores start, center, end, space-between o space-around.
 ```html
 <el-row type="flex" class="row-bg">
   <el-col :span="6"><div class="grid-content bg-purple"></div></el-col>
@@ -309,9 +309,9 @@ Use the flex layout to make flexible alignment of columns.
 
 ### Responsive Layout
 
-Taking example by Bootstrap's responsive design, five breakpoints are preset: xs, sm, md, lg and xl.
+Tomando el ejemplo de Bootstrap responsive design, existen 5 breakpoints: xs, sm, md, lg y xl.
 
-::: demo
+:::**Demo**
 ```html
 <el-row :gutter="10">
   <el-col :xs="8" :sm="6" :md="4" :lg="3" :xl="1"><div class="grid-content bg-purple"></div></el-col>
@@ -341,48 +341,48 @@ Taking example by Bootstrap's responsive design, five breakpoints are preset: xs
 ```
 :::
 
-### Utility classes for hiding elements
+### Clases útiles para ocultar elementos
 
-Additionally, Element provides a series of classes for hiding elements under certain conditions. These classes can be added to any DOM elements or custom components. You need to import the following CSS file to use these classes:
+Adicionalmente, Element provee una serie de clases para ocultar elementos dadas ciertas condiciones. Estas clases pueden se agregadas a cualquier elemento del DOM o un elemento propio. Necesitas importar el siguiente archivo CSS para usar estas clases:
 
 ```js
 import 'element-ui/lib/theme-chalk/display.css';
 ```
 
-The classes are:
-- `hidden-xs-only` - hide when on extra small viewports only
-- `hidden-sm-only` - hide when on small viewports and down
-- `hidden-sm-and-down` - hide when on small viewports and down
-- `hidden-sm-and-up` - hide when on small viewports and up
-- `hidden-md-only` - hide when on medium viewports only
-- `hidden-md-and-down` - hide when on medium viewports and down
-- `hidden-md-and-up` - hide when on medium viewports and up
-- `hidden-lg-only` - hide when on large viewports only
-- `hidden-lg-and-down` - hide when on large viewports and down
-- `hidden-lg-and-up` - hide when on large viewports and up
-- `hidden-xl-only` - hide when on extra large viewports only
+Las clases son:
+- `hidden-xs-only` - oculto en viewports extra pequenhos solamente
+- `hidden-sm-only` - oculto en viewports pequenhos solamente
+- `hidden-sm-and-down` - oculto en viewports pequenhos y menores
+- `hidden-sm-and-up` - oculto en viewports pequenhos y superiores 
+- `hidden-md-only` - oculto en viewports medios solamente
+- `hidden-md-and-down` - oculto en viewports medios y menores
+- `hidden-md-and-up` - oculto en viewports medios y mayores
+- `hidden-lg-only` - ocultos en viewports grandes solamente 
+- `hidden-lg-and-down` - ocultos en viewports grandes y menores
+- `hidden-lg-and-up` - ocultos en viewports grandes y superiores
+- `hidden-xl-only` - oculto en viewports extra grandes solamente
 
-### Row Attributes
+### Atributos Row 
 | Attribute      | Description          | Type      | Accepted Values       | Default  |
 |---------- |-------------- |---------- |--------------------------------  |-------- |
-| 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 |
-| tag | custom element tag | string | * | div |
+| 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 |
+| tag | tag de elemento propio | string | * | div |
 
-### Col Attributes
+### Atributos Col 
 | Attribute      | Description          | Type      | Accepted Values       | Default  |
 |---------- |-------------- |---------- |--------------------------------  |-------- |
-| span | number of column the grid spans | number | — | 24 |
-| offset | number of spacing on the left side of the grid | number | — | 0 |
-| push |  number of columns that grid moves to the right | number | — | 0 |
-| pull |  number of columns that grid moves to the left | number | — | 0 |
-| xs | `<768px` Responsive columns or column props object | number/object (e.g. {span: 4, offset: 4}) | — | — |
-| sm | `≥768px` Responsive columns or column props object | number/object (e.g. {span: 4, offset: 4}) | — | — |
-| md | `≥992px` Responsive columns or column props object | number/object (e.g. {span: 4, offset: 4}) | — | — |
-| lg | `≥1200px` Responsive columns or column props object | number/object (e.g. {span: 4, offset: 4}) | — | — |
-| xl | `≥1920px` Responsive columns or column props object | number/object (e.g. {span: 4, offset: 4}) | — | — |
-| tag | custom element tag | string | * | div |
+| 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 |
+| 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 |
 
 
diff --git a/examples/docs/es/menu.md b/examples/docs/es/menu.md
index 7768a2e56..e9891f51e 100644
--- a/examples/docs/es/menu.md
+++ b/examples/docs/es/menu.md
@@ -53,13 +53,14 @@
 
 ## NavMenu
 
-Menu that provides navigation for your website.
+Menú que provee la navegación para tu sitio.
 
 ### Top bar
 
-Top bar NavMenu can be used in a variety of scenarios.
+Top bar NavMenu puede ser usado en distinto escenarios.
+
+:::**Demo** Por defecto el menú es vertical, pero puedes hacerlo horizontal asignando a la propiedad `mode` el valor 'horizontal'. Además, puedes utilizar el componente de submenú para crear un menú de segundo nivel. Menú provee `background-color`, `text-color` y `active-text-color` para customizar los colores.
 
-::: demo By default Menu is vertical, but you can change it to horizontal by setting the mode prop to 'horizontal'. In addition, you can use the submenu component to create a second level menu. Menu provides `background-color`, `text-color` and `active-text-color` to customize the colors.
 ```html
 <el-menu :default-active="activeIndex" class="el-menu-demo" mode="horizontal" @select="handleSelect">
   <el-menu-item index="1">Processing Center</el-menu-item>
@@ -110,9 +111,10 @@ Top bar NavMenu can be used in a variety of scenarios.
 
 ### Side bar
 
-Vertical NavMenu with sub-menus.
+NavMenu vertical con sub-menús.
+
+:::**Demo** Puedes utilizar el componente el-menu-item-group para crear un grupo de menú, y el nombre del grupo estará determinado por la propiedad `title` o la propiedad `slot`.
 
-::: demo You can use the el-menu-item-group component to create a menu group, and the name of the group is determined by the title prop or a named slot.
 ```html
 <el-row class="tac">
   <el-col :span="12">
@@ -205,9 +207,9 @@ Vertical NavMenu with sub-menus.
 
 ### Collapse
 
-Vertical NavMenu could be collapsed.
+NavMenu vertical puede ser colapsado.
 
-::: demo 
+:::**Demo**
 ```html
 <el-radio-group v-model="isCollapse" style="margin-bottom: 20px;">
   <el-radio-button :label="false">expand</el-radio-button>
@@ -269,50 +271,50 @@ Vertical NavMenu could be collapsed.
 ```
 :::
 
-### Menu Attribute
-| Attribute      | Description          | Type      | Accepted Values       | Default  |
+### Atributos Menu
+| Atributo      | Descripción          | Tipo      | Valores aceptados       | Valores por defecto  |
 |---------- |-------- |---------- |-------------  |-------- |
-| mode     | menu display mode   | string  |   horizontal / vertical   | vertical |
-| collapse  | whether the menu is collapsed (available only in vertical mode) | boolean  |   —   | false |
-| background-color  | background color of Menu (hex format) | string |   —   | #ffffff |
-| text-color  | text color of Menu (hex format) | string |   —   | #2d2f33 |
-| active-text-color  | text color of currently active menu item (hex format) | string |   —   | #409EFF |
-| default-active | index of currently active menu | string    | — | — |
-| default-openeds | array that contains keys of currently active sub-menus  | Array    | — | — |
+| 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 |   —   | #2d2f33 |
+| active-text-color  | color de text 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  |  whether only one sub-menu can be active  | boolean   | — | false   |
-| menu-trigger | how sub-menus are triggered, only works when `mode` is 'horizontal' | string    | — | hover |
-| router  | whether `vue-router` mode is activated. If true, index will be used as 'path' to activate the route action | boolean   | — | false   |
+| menu-trigger | como dispara eventos sub-menus, solo funciona cuando `mode` es 'horizontal' | string    | — | hover |
+| router  | si el modo `vue-router` está activado. Si es verdader, índice será usado como 'path' para activar la ruta | boolean   | — | false   |
 
-### Menu Methods
-| Event Name | Description | Parameters |
+### Métodos Menu 
+| Nombre de evento | Descripción | Parámetros |
 |---------- |-------- |---------- |
-| open  | open a specific sub-menu | index: index of the sub-menu to open |
-| close  | close a specific sub-menu | index: index of the sub-menu to close |
+| open  | abre un sub-menu específico | index: índice del sub-menu para abrir |
+| close  | cierra un sub-menu específico  | index: índice del sub-menu para cerrar |
 
-### Menu Events
-| Event Name | Description | Parameters |
+### Eventos Menu 
+| Nombre de evento | Descripción | Parámetros |
 |---------- |-------- |---------- |
-| select  | callback function when menu is activated | index: index of activated menu, indexPath: index path of activated menu  |
-| open  | callback function when sub-menu expands | index: index of expanded sub-menu, indexPath: index path of expanded sub-menu |
-| close  | callback function when sub-menu collapses | index: index of collapsed sub-menu, indexPath: index path of collapsed sub-menu |
+| select  | callback ejecutado cuando el menú es activado | index: índice del menú activado, indexPath: index path del menú activado  |
+| open  | callback ejecutado cuando sub-menu se expande | index: índice del sub-menu expandido, indexPath: index path del sub-menu expandido |
+| close  | callback ejecutado cuando sub-menu colapsa | index: índice del sub-menu colapsado, indexPath: index path del menú colapsado |
 
-### Menu-Item Events
-| Event Name | Description | Parameters |
+### Eventos Menu-Item 
+| Nombre de evento | Descripción | Parámetros |
 |---------- |-------- |---------- |
-| click  | callback function when menu-item is clicked | el: menu-item instance  |
+| click  | callback ejecutado cuando se hace click sobre menu-item  | el: instancia de menu-item   |
 
-### SubMenu Attribute
-| Attribute      | Description          | Type      | Accepted Values       | Default  |
+### Atributos SubMenu 
+| Atributo      | Descripción          | Tipo      | Valores aceptados       | Valores por defecto  |
 |---------- |-------- |---------- |-------------  |-------- |
-| index     | unique identification   | string  | — | — |
+| index     | identificador único   | string  | — | — |
 
-### Menu-Item Attribute
-| Attribute      | Description          | Type      | Accepted Values       | Default  |
+### Atributos Menu-Item 
+| Atributo      | Descripción          | Tipo      | Valores aceptados       | Valores por defecto  |
 |---------- |-------- |---------- |-------------  |-------- |
-| index     | unique identification   | string  | — | — |
-| route     | Vue Router object   | object | — | — |
+| index     | identificador único   | string  | — | — |
+| route     | Object Vue Router   | object | — | — |
 
-### Menu-Group Attribute
-| Attribute      | Description          | Type      | Accepted Values       | Default  |
+### Atributos Menu-Group 
+| Atributo      | Descripción          | Tipo      | Valores aceptados       | Valores por defecto  |
 |---------- |-------- |---------- |-------------  |-------- |
-| title     | group title   | string  | — | — |
+| title     | título del grupo   | string  | — | — |

From c0a4fb741aac8572beaf02346bdc9b82f2c58266 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Rub=C3=A9n=20Salvador=20Garc=C3=ADa=20San=20Juan?=
 <rssanjuan2704@gmail.com>
Date: Sat, 11 Nov 2017 02:40:06 -0500
Subject: [PATCH 25/48] [FIX] Unsaved translations.

---
 examples/docs/es/installation.md | 2 +-
 examples/docs/es/layout.md       | 6 ++++--
 2 files changed, 5 insertions(+), 3 deletions(-)

diff --git a/examples/docs/es/installation.md b/examples/docs/es/installation.md
index 99b54b545..bc96d89c9 100644
--- a/examples/docs/es/installation.md
+++ b/examples/docs/es/installation.md
@@ -7,7 +7,7 @@ Instalar mediante npm es la forma recomendada ya que se integra facilmente con [
 npm i element-ui -S
 ```
 
-### CDN
+### CDN 
 Obten la última versión desde [unpkg.com/element-ui](https://unpkg.com/element-ui/) , e importa el JavaScript y los archivos CSS en tu página.
 
 ```html
diff --git a/examples/docs/es/layout.md b/examples/docs/es/layout.md
index f537e8542..02c1c9081 100644
--- a/examples/docs/es/layout.md
+++ b/examples/docs/es/layout.md
@@ -363,7 +363,8 @@ Las clases son:
 - `hidden-xl-only` - oculto en viewports extra grandes solamente
 
 ### Atributos Row 
-| Attribute      | Description          | Type      | Accepted Values       | Default  |
+
+| Atributos      | Descripción          | Tipo      | Valores aceptados       | Valor por defecto  |
 |---------- |-------------- |---------- |--------------------------------  |-------- |
 | gutter | espaciado de la grilla | number | — | 0 |
 | type | modo del layout , puedes usar flex, funciona en navegadores modernos| string | — | — |
@@ -372,7 +373,8 @@ Las clases son:
 | tag | tag de elemento propio | string | * | div |
 
 ### Atributos Col 
-| Attribute      | Description          | Type      | Accepted Values       | Default  |
+
+| 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 |

From e4bef2f494903d384ded026baef388c4fcba3964 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Rub=C3=A9n=20Salvador=20Garc=C3=ADa=20San=20Juan?=
 <rssanjuan2704@gmail.com>
Date: Sat, 11 Nov 2017 16:06:29 -0500
Subject: [PATCH 26/48] [ADD] Pagination, popover & progress spanish
 translations.

---
 examples/docs/es/pagination.md | 57 ++++++++++++++++---------------
 examples/docs/es/popover.md    | 61 +++++++++++++++++-----------------
 examples/docs/es/progress.md   | 36 ++++++++++----------
 3 files changed, 75 insertions(+), 79 deletions(-)

diff --git a/examples/docs/es/pagination.md b/examples/docs/es/pagination.md
index 714b32735..6ea24753e 100644
--- a/examples/docs/es/pagination.md
+++ b/examples/docs/es/pagination.md
@@ -48,13 +48,12 @@
   }
 </style>
 
-## Pagination
+## Paginación
+Si tiene que mostrar muchos datos en una página, utiliza la paginación.
 
-If you have too much data to display in one page, use pagination.
+### Uso básico
 
-### Basic usage
-
-:::demo Set `layout` with different pagination elements you wish to display separated with a comma. Pagination elements are: `prev` (a button navigating to the previous page), `next` (a button navigating to the next page), `pager` (page list), `jumper` (a jump-to input), `total` (total item count), `size` (a select to determine page size) and `->`(every element after this symbol will be pulled to the right).
+:::**Demo** Asigna en el atributo `layout` los diferentes elementos que quieres utilizar separados por coma. Los elementos de paginación son: `prev` (un botón para navegar a la página anterior), `next` (un botón para navegar a la siguiente página), `pager` (lista de página), `jumper` (un `input` para saltar a una página determinada), `total` (total de elementos), `size` (un `select` para seleccionar el tamanho de la página ) y `->`(todo elemento situado luego de este símbolo será halado a la derecha).
 ```html
 <div class="block">
   <span class="demonstration">When you have few pages</span>
@@ -73,11 +72,11 @@ If you have too much data to display in one page, use pagination.
 ```
 :::
 
-### Small Pagination
+### Paginación pequenha
 
-Use small pagination in the case of limited space.
+Usa una paginación pequenha en caso de espacio limitado.
 
-:::demo Just set the `small` attribute to `true` and the Pagination becomes smaller.
+:::**Demo** Solo pon el atributo `small` como `true` y la Paginación se volverá pequenha.
 ```html
 <el-pagination
   small
@@ -87,11 +86,11 @@ Use small pagination in the case of limited space.
 ```
 :::
 
-### More elements
+### Más elementos
 
-Add more modules based on your scenario.
+Agrega más modulos basados en tu escenario.
 
-:::demo This example is a complete use case. It uses `size-change` and `current-change` event to handle page size changes and current page changes. `page-sizes` accepts an array of integers, each of which represents a different page size in the `sizes` select options, e.g. `[100, 200, 300, 400]` indicates that the select will have four options: 100, 200, 300 or 400 items per page.
+:::**Demo** Este ejemplo es un completo caso de uso. Este utiliza los eventos `size-change` y `current-change` para manejar el tamanho de página y el cambio de página. El atributo `page-sizes` acepta un arrelgo de enteros, cada uno representa un diferente valor del atributo `sizes` que es un `select`, ejemplo `[100, 200, 300, 400]` indicará que el `select` tendrá las opciones: 100, 200, 300 o 400 elementos por página.
 
 ```html
 <template>
@@ -195,27 +194,27 @@ Add more modules based on your scenario.
   }
 </script>
 
-### Attributes
-| Attribute      | Description          | Type      | Accepted Values       | Default  |
+### Atributos
+| Atributo      | Descripción          | Tipo      | Valores aceptados       | Valores por defecto  |
 |--------------------|----------------------------------------------------------|-------------------|-------------|--------|
-| small              |   whether to use small pagination    | boolean |      —       | false |
-| page-size              | item count of each page  | number |      —       | 10 |
-| total | total item count | number | — | — |
-| page-count | total page count. Set either `total` or `page-count` and pages will be displayed; if you need `page-sizes`, `total` is required | number | — | — |
-| current-page | current page number, supports the .sync modifier | number | — | 1 |
-| layout | layout of Pagination, elements separated with a comma | string | `sizes`, `prev`, `pager`, `next`, `jumper`, `->`, `total`, `slot` | 'prev, pager, next, jumper, ->, total'  |
-| page-sizes | options of item count per page | number[] | — |  [10, 20, 30, 40, 50, 100] |
-| popper-class | custom class name for the page size Select's dropdown | string | — | — |
-| prev-text | text for the prev button | string | — | — |
-| next-text | text for the next button | string | — | — |
+| small              |   usar paginación pequenha    | boolean |      —       | false |
+| page-size              | cantidad de elementos por página  | number |      —       | 10 |
+| total | total de elementos | number | — | — |
+| page-count | total de páginas. Asigna `total` o `page-count` y las páginas serán mostradas; si necesitas `page-sizes`, `total` es **requerido** | number | — | — |
+| current-page | número actual de la página, soporta el modificador .sync | number | — | 1 |
+| layout | layout de la paginación, elementos separados por coma | string | `sizes`, `prev`, `pager`, `next`, `jumper`, `->`, `total`, `slot` | 'prev, pager, next, jumper, ->, total'  |
+| page-sizes | opciones para la cantidad de elementos por página | number[] | — |  [10, 20, 30, 40, 50, 100] |
+| popper-class | clase propia para el `dropdown` del `select` del número de páginas | string | — | — |
+| prev-text | texto para el botón `prev` | string | — | — |
+| next-text | texto para el botón `next` | string | — | — |
 
-### Events
-| Event Name | Description | Parameters |
+### Eventos
+| Nombre del evento | Descripción | Parámetros |
 |---------|--------|---------|
-| size-change | triggers when `page-size` changes | the new `page-size` |
-| current-change | triggers when `current-page` changes | the new `current-page` |
+| size-change | se dispara cuando `page-size` cambia | nuevo valor de `page-size` |
+| current-change | se dispara cuando `current-page` cambia | nuevo valor de `current-page` |
 
 ### Slot
-| Name | Description |
+| Nombre | Descripción |
 | --- | --- |
-| — | custom content. To use this, you need to declare `slot` in `layout` |
+| — | Elemento propio. Para utilizar esto necesitas declarar `slot` en el `layout` |
diff --git a/examples/docs/es/popover.md b/examples/docs/es/popover.md
index 49f030fa3..d36ef6d4d 100644
--- a/examples/docs/es/popover.md
+++ b/examples/docs/es/popover.md
@@ -99,11 +99,11 @@
 
 ## Popover
 
-### Basic usage
+### Uso básico
 
-Similar to Tooltip, Popover is also built with `Vue-popper`. So for some duplicated attributes, please refer to the documentation of Tooltip.
+Similar a un Tooltip, Popover está construido con `Vue-popper`. Así que para atributos duplicados, por favor refiérase a la documentación de Tooltip.
 
-:::demo Add `ref` in your popover, then in your button, use `v-popover` directive to link the button and the popover. The attribute `trigger` is used to define how popover is triggered: `hover`, `click` or `focus`. Alternatively, you can specify reference using a named `slot`.
+:::**Demo** Agrega `ref` al popover, luego en el botón usa la directiva `v-popover` para asociar el botón y el popover. El atributo `trigger` es usado para definir como el popover se dispara: `hover`, `click` o `focus`. De manera alternatica puedes especificar la referencia utilizando un `[named slot](https://vuejs.org/v2/guide/components.html#Named-Slots).
 
 ```html
 <el-popover
@@ -137,11 +137,10 @@ Similar to Tooltip, Popover is also built with `Vue-popper`. So for some duplica
 ```
 :::
 
-### Nested information
+### Información anidada
+Otros componentes pueden anidarse dentro de popover. A continuación un ejemplo de una tabla anidada.
 
-Other components can be nested in popover. Following is an example of nested table.
-
-:::demo replace the `content` attribute with a default `slot`.
+:::**Demo** Reemplaza el atributo `content` con un `slot`.
 
 ```html
 <el-popover
@@ -186,11 +185,11 @@ Other components can be nested in popover. Following is an example of nested tab
 ```
 :::
 
-### Nested operation
+### Operación anidada
 
-Of course, you can nest other operations. It's more light-weight than using a dialog.
+Por supuesto, puedes anidar otras operaciones. Es más ligero que utilizar un `dialog`.
 
-:::demo
+:::**Demo**
 ```html
 <el-popover
   ref="popover5"
@@ -216,33 +215,33 @@ Of course, you can nest other operations. It's more light-weight than using a di
   }
 </script>
 ```
-:::
 
-### Attributes
-| Attribute      | Description          | Type      | Accepted Values       | Default  |
+
+### Atributos
+| Atributo      | Descripción          | Tipo      | Valores aceptados       | Valores por defecto  |
 |--------------------|----------------------------------------------------------|-------------------|-------------|--------|
-| trigger | how the popover is triggered | string  | click/focus/hover/manual |    click    |
-|  title              | popover title | string | — | — |
-|  content        |  popover content, can be replaced with a default `slot`    | string            | — | — |
-|  width        |  popover width  | string, number            | — | Min width 150px |
-|  placement        |  popover placement  | string | top/top-start/top-end/bottom/bottom-start/bottom-end/left/left-start/left-end/right/right-start/right-end |  bottom |
-|  disabled       |  whether Popover is disabled  | boolean    | — |  false |
-|  value(v-model)        |  whether popover is visible  | Boolean           | — |  false |
+| trigger | cómo se dispara el popover | string  | click/focus/hover/manual |    click    |
+|  title              | título del popover  | string | — | — |
+|  content        |  contenido del popover, puede ser sustituido por un `slot`  | string            | — | — |
+|  width        |  ancho del popover   | string, number            | — | Min width 150px |
+|  placement        |  posición del popover en la pantalla   | string | top/top-start/top-end/bottom/bottom-start/bottom-end/left/left-start/left-end/right/right-start/right-end |  bottom |
+|  disabled       |  si el popover está deshabilitado  | boolean    | — |  false |
+|  value(v-model)        |  si el popover está visible  | Boolean           | — |  false |
 |  offset        |  popover offset  | number           | — |  0 |
 |  transition     |  popover transition animation      | string             | — | el-fade-in-linear |
-|  visible-arrow   |  whether a tooltip arrow is displayed or not. For more info, please refer to [Vue-popper](https://github.com/element-component/vue-popper) | boolean | — | true |
-|  popper-options        | parameters for [popper.js](https://popper.js.org/documentation.html) | object            | please refer to [popper.js](https://popper.js.org/documentation.html) | `{ boundariesElement: 'body', gpuAcceleration: false }` |
-|  popper-class        |  custom class name for popover | string | — | — |
-|  open-delay        | delay of appearance when `trigger` is hover, in milliseconds | number | — | — |
+|  visible-arrow   |  si una flecha del tooltip is 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 | — | — |
 
 ### Slot
-| Name | Description |
+| Nombre | Descripción |
 | --- | --- |
-| — | text content of popover |
-| reference | HTML element that triggers popover |
+| — | texto contenido en popover |
+| reference | elemento HTML que dispara el popover |
 
-### Events
-| Event Name | Description | 回调参数 |
+### Eventos
+| Nombre del evento | Descripción | Parámetros |
 |---------|--------|---------|
-| show | triggers when popover shows | — |
-| hide | triggers when popover hides | — |
+| show | se dispara cuando se muestra el popover | — |
+| hide | se dispara cuando se oculta el popover | — |
diff --git a/examples/docs/es/progress.md b/examples/docs/es/progress.md
index 275009e6f..385ad833c 100644
--- a/examples/docs/es/progress.md
+++ b/examples/docs/es/progress.md
@@ -9,13 +9,12 @@
     }
   }
 </style>
-## Progress
+## Progreso
+Progreso es usado para mostrar el estado de la operación actual e informar al usuario acerca de ésta.
 
-Progress is used to show the progress of current operation, and inform the user the current status.
+### Barra de progreso lineal (porcentage externo)
 
-### Linear progress bar (external percentage)
-
-:::demo Use `percentage` attribute to set the percentage. It's **required** and must be between `0-100`.
+:::**Demo** Usa el atributo `percentage` para asignar el porcentage. Este es **requerido** y tiene que ser un valor entre `0-100`.
 ```html
 <el-progress :percentage="0"></el-progress>
 <el-progress :percentage="70"></el-progress>
@@ -24,11 +23,10 @@ Progress is used to show the progress of current operation, and inform the user
 ```
 :::
 
-### Linear progress bar (internal percentage)
+### Barra de progreso lineal (porcentage interno)
+En este caso el porcentage no toma espacio adicional.
 
-In this case the percentage takes no additional space.
-
-:::demo `stroke-width` attribute decides the `width` of progress bar, and use `text-inside` attribute to put description inside the progress bar.
+:::**Demo** El atributo `stroke-width` decide el ancho de la barra de progreso, y usa el atributo `text-inside` para poner la descripción dentro de la misma.
 ```html
 <el-progress :text-inside="true" :stroke-width="18" :percentage="0"></el-progress>
 <el-progress :text-inside="true" :stroke-width="18" :percentage="70"></el-progress>
@@ -37,9 +35,9 @@ In this case the percentage takes no additional space.
 ```
 :::
 
-### Circular progress bar
+### Barra de progreso circular
 
-:::demo You can specify `type` attribute to `circle` to use circular progress bar, and use `width` attribute to change the size of circle.
+:::**Demo** Puedes asignar el atributo `type` como `circle` para usar la barra circular de progreso, y usar el atributo `width` para cambiar el tamanho del círculo.
 ```html
 <el-progress type="circle" :percentage="0"></el-progress>
 <el-progress type="circle" :percentage="25"></el-progress>
@@ -49,13 +47,13 @@ In this case the percentage takes no additional space.
 :::
 
 ### Attributes
-| Attribute      | Description          | Type      | Accepted Values       | Default  |
+| Atributo      | Descripción          | Tipo      | Valores aceptado       | Valores por defecto  |
 | --- | ---- | ---- | ---- | ---- |
-| **percentage** | percentage, **required** | number | 0-100 | 0 |
-| type | the type of progress bar | string | line/circle | line |
-| stroke-width | the width of progress bar | number | — | 6 |
-| text-inside | whether to place the percentage inside progress bar, only works when `type` is 'line' | boolean | — | false |
-| status | the current status of progress bar | string | success/exception | — |
-| width | the canvas width of circle progress bar | number | — | 126 |
-| show-text | whether to show percentage | boolean | — | true |
+| **percentage** | porcenteage, **requerido** | number | 0-100 | 0 |
+| type | tipo de barra de progreso | string | line/circle | line |
+| stroke-width | ancho de la barra de progreso | number | — | 6 |
+| text-inside | mostrar el porcentage 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 | — |
+| width | ancho del canvas que contiene la barra de progreso circula | number | — | 126 |
+| show-text | mostrar porcentage | boolean | — | true |
 

From 1833db26d8acc13b85ab9797a5afad352071ed67 Mon Sep 17 00:00:00 2001
From: Leopoldthecoder <Leopoldthecuber@gmail.com>
Date: Sun, 12 Nov 2017 11:56:21 +0800
Subject: [PATCH 27/48] Select: fix divider and focus issue

---
 packages/select/src/option-group.vue | 4 ++--
 packages/select/src/select.vue       | 1 +
 2 files changed, 3 insertions(+), 2 deletions(-)

diff --git a/packages/select/src/option-group.vue b/packages/select/src/option-group.vue
index a28b6b542..50cddd3f5 100644
--- a/packages/select/src/option-group.vue
+++ b/packages/select/src/option-group.vue
@@ -1,6 +1,6 @@
 <template>
-  <ul class="el-select-group__wrap">
-    <li class="el-select-group__title" v-show="visible">{{ label }}</li>
+  <ul class="el-select-group__wrap" v-show="visible">
+    <li class="el-select-group__title">{{ label }}</li>
     <li>
       <ul class="el-select-group">
         <slot></slot>
diff --git a/packages/select/src/select.vue b/packages/select/src/select.vue
index 83d47007c..2651088a6 100644
--- a/packages/select/src/select.vue
+++ b/packages/select/src/select.vue
@@ -29,6 +29,7 @@
         :class="[selectSize ? `is-${ selectSize }` : '']"
         :disabled="disabled"
         @focus="handleFocus"
+        @click.stop
         @keyup="managePlaceholder"
         @keydown="resetInputState"
         @keydown.down.prevent="navigateOptions('next')"

From 64f154839cc716b0bf6db91e2a03bb83b641936d Mon Sep 17 00:00:00 2001
From: Leopoldthecoder <Leopoldthecuber@gmail.com>
Date: Sun, 12 Nov 2017 11:56:41 +0800
Subject: [PATCH 28/48] Chore: replace includes with indexOf

---
 packages/cascader/src/menu.vue     | 4 ++--
 packages/dropdown/src/dropdown.vue | 8 ++++----
 packages/tree/src/tree.vue         | 6 +++---
 3 files changed, 9 insertions(+), 9 deletions(-)

diff --git a/packages/cascader/src/menu.vue b/packages/cascader/src/menu.vue
index 09aeb0076..70a4bd3c3 100644
--- a/packages/cascader/src/menu.vue
+++ b/packages/cascader/src/menu.vue
@@ -186,7 +186,7 @@
             // keydown up/down/left/right/enter
             events.on.keydown = (ev) => {
               const keyCode = ev.keyCode;
-              if (![37, 38, 39, 40, 13, 9, 27].includes(keyCode)) {
+              if (![37, 38, 39, 40, 13, 9, 27].indexOf(keyCode) > -1) {
                 return;
               }
               const currentEle = ev.target;
@@ -194,7 +194,7 @@
               const menuItemList = parentEle.querySelectorAll("[tabindex='-1']");
               const currentIndex = Array.prototype.indexOf.call(menuItemList, currentEle); // 当前索引
               let nextIndex, nextMenu;
-              if ([38, 40].includes(keyCode)) {
+              if ([38, 40].indexOf(keyCode) > -1) {
                 if (keyCode === 38) { // up键
                   nextIndex = currentIndex !== 0 ? (currentIndex - 1) : currentIndex;
                 } else if (keyCode === 40) { // down
diff --git a/packages/dropdown/src/dropdown.vue b/packages/dropdown/src/dropdown.vue
index aceee1b62..9125c2964 100644
--- a/packages/dropdown/src/dropdown.vue
+++ b/packages/dropdown/src/dropdown.vue
@@ -132,7 +132,7 @@
       },
       handleTriggerKeyDown(ev) {
         const keyCode = ev.keyCode;
-        if ([38, 40].includes(keyCode)) { // up/down
+        if ([38, 40].indexOf(keyCode) > -1) { // up/down
           this.removeTabindex();
           this.resetTabindex(this.menuItems[0]);
           this.menuItems[0].focus();
@@ -140,7 +140,7 @@
           ev.stopPropagation();
         } else if (keyCode === 13) { // space enter选中
           this.handleClick();
-        } else if ([9, 27].includes(keyCode)) { // tab || esc
+        } else if ([9, 27].indexOf(keyCode) > -1) { // tab || esc
           this.hide();
         }
         return;
@@ -151,7 +151,7 @@
         const currentIndex = this.menuItemsArray.indexOf(target);
         const max = this.menuItemsArray.length - 1;
         let nextIndex;
-        if ([38, 40].includes(keyCode)) { // up/down
+        if ([38, 40].indexOf(keyCode) > -1) { // up/down
           if (keyCode === 38) { // up
             nextIndex = currentIndex !== 0 ? currentIndex - 1 : 0;
           } else { // down
@@ -168,7 +168,7 @@
           if (!this.hideOnClick) { // click关闭
             this.visible = false;
           }
-        } else if ([9, 27].includes(keyCode)) { // tab // esc
+        } else if ([9, 27].indexOf(keyCode) > -1) { // tab // esc
           this.hide();
           this.triggerElm.focus();
         }
diff --git a/packages/tree/src/tree.vue b/packages/tree/src/tree.vue
index 32dce3e73..43ad448c9 100644
--- a/packages/tree/src/tree.vue
+++ b/packages/tree/src/tree.vue
@@ -202,7 +202,7 @@
         this.treeItems = this.$el.querySelectorAll('.is-focusable[role=treeitem]');
         const currentIndex = this.treeItemArray.indexOf(currentItem);
         let nextIndex;
-        if ([38, 40].includes(keyCode)) { // up、down
+        if ([38, 40].indexOf(keyCode) > -1) { // up、down
           if (keyCode === 38) { // up
             nextIndex = currentIndex !== 0 ? currentIndex - 1 : 0;
           } else {
@@ -211,10 +211,10 @@
           this.treeItemArray[nextIndex].focus(); // 选中
         }
         const hasInput = currentItem.querySelector('[type="checkbox"]');
-        if ([37, 39].includes(keyCode)) { // left、right 展开
+        if ([37, 39].indexOf(keyCode) > -1) { // left、right 展开
           currentItem.click(); // 选中
         }
-        if ([13, 32].includes(keyCode)) { // space enter选中checkbox
+        if ([13, 32].indexOf(keyCode) > -1) { // space enter选中checkbox
           if (hasInput) {
             hasInput.click();
           }

From 8fa549894b08c2bb208ee1721b39fc55640dc3b4 Mon Sep 17 00:00:00 2001
From: Leopoldthecoder <Leopoldthecuber@gmail.com>
Date: Sun, 12 Nov 2017 19:52:36 +0800
Subject: [PATCH 29/48] Popover: fix click trigger

---
 packages/popover/src/main.vue         | 26 +++++++++-----------------
 packages/theme-chalk/src/popover.scss |  6 ++++++
 2 files changed, 15 insertions(+), 17 deletions(-)

diff --git a/packages/popover/src/main.vue b/packages/popover/src/main.vue
index 3e498336d..e2f05a869 100644
--- a/packages/popover/src/main.vue
+++ b/packages/popover/src/main.vue
@@ -21,6 +21,7 @@
 <script>
 import Popper from 'element-ui/src/utils/vue-popper';
 import { on, off } from 'element-ui/src/utils/dom';
+import { addClass, removeClass } from 'element-ui/src/utils/dom';
 import { generateId } from 'element-ui/src/utils/util';
 
 export default {
@@ -59,14 +60,8 @@ export default {
     }
   },
   watch: {
-    showPopper(newVal, oldVal) {
-      newVal ? this.$emit('show') : this.$emit('hide');
-    },
-    '$refs.reference': {
-      deep: true,
-      handler(val) {
-        console.log(val);
-      }
+    showPopper(val) {
+      val ? this.$emit('show') : this.$emit('hide');
     }
   },
 
@@ -79,12 +74,12 @@ export default {
     }
     // 可访问性
     if (reference) {
-      reference.className += ' el-tooltip';
+      addClass(reference, 'el-popover__reference');
       reference.setAttribute('aria-describedby', this.tooltipId);
       reference.setAttribute('tabindex', 0); // tab序列
 
-      on(reference, 'focus', this.handleFocus);
-      on(reference, 'blur', this.handleBlur);
+      this.trigger !== 'click' && on(reference, 'focus', this.handleFocus);
+      this.trigger !== 'click' && on(reference, 'blur', this.handleBlur);
       on(reference, 'keydown', this.handleKeydown);
       on(reference, 'click', this.handleClick);
     }
@@ -135,17 +130,14 @@ export default {
       this.showPopper = false;
     },
     handleFocus() {
-      const reference = this.referenceElm;
-      reference.className += ' focusing';
+      addClass(this.referenceElm, 'focusing');
       this.showPopper = true;
     },
     handleClick() {
-      const reference = this.referenceElm;
-      reference.className = reference.className.replace(/\s*focusing\s*/, ' ');
+      removeClass(this.referenceElm, 'focusing');
     },
     handleBlur() {
-      const reference = this.referenceElm;
-      reference.className = reference.className.replace(/\s*focusing\s*/, ' ');
+      removeClass(this.referenceElm, 'focusing');
       this.showPopper = false;
     },
     handleMouseEnter() {
diff --git a/packages/theme-chalk/src/popover.scss b/packages/theme-chalk/src/popover.scss
index a88fc09ea..65cafc098 100644
--- a/packages/theme-chalk/src/popover.scss
+++ b/packages/theme-chalk/src/popover.scss
@@ -27,4 +27,10 @@
     line-height: 1;
     margin-bottom: 12px;
   }
+
+  @include e(reference) {
+    &:focus:not(.focusing), &:focus:hover {
+      outline-width: 0;
+    }
+  }
 }

From 9611079d4d27fdce5dabfe9efce713490442213d Mon Sep 17 00:00:00 2001
From: Leopoldthecoder <Leopoldthecuber@gmail.com>
Date: Sun, 12 Nov 2017 20:14:26 +0800
Subject: [PATCH 30/48] Table: sort arrow nostalgia

---
 packages/table/src/table-header.js  | 10 ++++------
 packages/theme-chalk/src/table.scss | 23 ++++++++++++++++-------
 2 files changed, 20 insertions(+), 13 deletions(-)

diff --git a/packages/table/src/table-header.js b/packages/table/src/table-header.js
index 84955c0be..6a745bce5 100644
--- a/packages/table/src/table-header.js
+++ b/packages/table/src/table-header.js
@@ -119,12 +119,10 @@ export default {
                     {
                       column.sortable
                         ? <span class="caret-wrapper" on-click={ ($event) => this.handleSortClick($event, column) }>
-                            <span class="sort-caret ascending" on-click={ ($event) => this.handleSortClick($event, column, 'ascending') }>
-                              <i class="el-icon-sort-up"></i>
-                            </span>
-                            <span class="sort-caret descending" on-click={ ($event) => this.handleSortClick($event, column, 'descending') }>
-                              <i class="el-icon-sort-down"></i>
-                            </span>
+                            <i class="sort-caret ascending el-icon-caret-top" on-click={ ($event) => this.handleSortClick($event, column, 'ascending') }>
+                            </i>
+                            <i class="sort-caret descending el-icon-caret-bottom" on-click={ ($event) => this.handleSortClick($event, column, 'descending') }>
+                            </i>
                           </span>
                         : ''
                     }
diff --git a/packages/theme-chalk/src/table.scss b/packages/theme-chalk/src/table.scss
index eeb5cbca8..b61b451ee 100644
--- a/packages/theme-chalk/src/table.scss
+++ b/packages/theme-chalk/src/table.scss
@@ -426,20 +426,29 @@
   }
 
   .caret-wrapper {
-    position: relative;
-    display: inline-flex;
-    align-items: center;
-    height: 13px;
-    width: 24px;
+    position: absolute;
+    display: inline-block;
+    height: 100%;
+    vertical-align: middle;
     cursor: pointer;
     overflow: initial;
   }
 
   .sort-caret {
-    color: $--icon-color-base;
+    color: $--color-text-placeholder;
     width: 14px;
     overflow: hidden;
-    font-size: 13px;
+    font-size: 15px;
+    position: absolute;
+    left: 4px;
+
+    &.ascending {
+      top: 1px;
+    }
+
+    &.descending {
+      bottom: 1px;
+    }
   }
 
   .ascending .sort-caret.ascending {

From f24aeeca00f679a7bb8f8f4d4cee164506ac6910 Mon Sep 17 00:00:00 2001
From: Leopoldthecoder <Leopoldthecuber@gmail.com>
Date: Sun, 12 Nov 2017 20:56:18 +0800
Subject: [PATCH 31/48] Select: add collapse-tags

---
 examples/docs/en-US/select.md        | 18 +++++++++++++++++-
 examples/docs/zh-CN/select.md        | 18 +++++++++++++++++-
 packages/select/src/select.vue       | 19 +++++++++++++++++--
 packages/theme-chalk/src/select.scss |  9 +++++++++
 4 files changed, 60 insertions(+), 4 deletions(-)

diff --git a/examples/docs/en-US/select.md b/examples/docs/en-US/select.md
index 79e85c45b..abff1c601 100644
--- a/examples/docs/en-US/select.md
+++ b/examples/docs/en-US/select.md
@@ -101,6 +101,7 @@
         value8: '',
         value9: [],
         value10: [],
+        value11: [],
         loading: false,
         states: ["Alabama", "Alaska", "Arizona", "Arkansas", "California", "Colorado", "Connecticut", "Delaware", "Florida", "Georgia", "Hawaii", "Idaho", "Illinois", "Indiana", "Iowa", "Kansas", "Kentucky", "Louisiana", "Maine", "Maryland", "Massachusetts", "Michigan", "Minnesota", "Mississippi", "Missouri", "Montana", "Nebraska", "Nevada", "New Hampshire", "New Jersey", "New Mexico", "New York", "North Carolina", "North Dakota", "Ohio", "Oklahoma", "Oregon", "Pennsylvania", "Rhode Island", "South Carolina", "South Dakota", "Tennessee", "Texas", "Utah", "Vermont", "Virginia", "Washington", "West Virginia", "Wisconsin", "Wyoming"]
       };
@@ -320,7 +321,7 @@ You can clear Select using a clear icon.
 
 Multiple select uses tags to display selected options.
 
-:::demo Set `multiple` attribute for `el-select` to enable multiple mode. In this case, the value of `v-model` will be an array of selected options.
+:::demo Set `multiple` attribute for `el-select` to enable multiple mode. In this case, the value of `v-model` will be an array of selected options. By default the selected options will be displayed as Tags. You can collapse them to a text by using `collapse-tags` attribute.
 ```html
 <template>
   <el-select v-model="value5" multiple placeholder="Select">
@@ -331,6 +332,20 @@ Multiple select uses tags to display selected options.
       :value="item.value">
     </el-option>
   </el-select>
+  
+  <el-select
+    v-model="value11"
+    multiple
+    collapse-tags
+    style="margin-left: 20px;"
+    placeholder="Select">
+    <el-option
+      v-for="item in options"
+      :key="item.value"
+      :label="item.label"
+      :value="item.value">
+    </el-option>
+  </el-select>
 </template>
 
 <script>
@@ -650,6 +665,7 @@ If the binding value of Select is an object, make sure to assign `value-key` as
 | value-key | unique identity key name for value, required when value is an object | string | — | value |
 | size | size of Input | string | large/small/mini | — |
 | clearable | whether single select can be cleared | boolean | — | false |
+| collapse-tags | whether to collapse tags to a text when multiple selecting | boolean | — | false |
 | multiple-limit | maximum number of options user can select when `multiple` is `true`. No limit when set to 0 | number | — | 0 |
 | name | the name attribute of select input | string | — | — |
 | placeholder | placeholder | string | — | Select |
diff --git a/examples/docs/zh-CN/select.md b/examples/docs/zh-CN/select.md
index e87951105..d2492ef01 100644
--- a/examples/docs/zh-CN/select.md
+++ b/examples/docs/zh-CN/select.md
@@ -101,6 +101,7 @@
         value8: '',
         value9: '',
         value10: [],
+        value11: [],
         loading: false,
         states: ["Alabama", "Alaska", "Arizona", "Arkansas", "California", "Colorado", "Connecticut", "Delaware", "Florida", "Georgia", "Hawaii", "Idaho", "Illinois", "Indiana", "Iowa", "Kansas", "Kentucky", "Louisiana", "Maine", "Maryland", "Massachusetts", "Michigan", "Minnesota", "Mississippi", "Missouri", "Montana", "Nebraska", "Nevada", "New Hampshire", "New Jersey", "New Mexico", "New York", "North Carolina", "North Dakota", "Ohio", "Oklahoma", "Oregon", "Pennsylvania", "Rhode Island", "South Carolina", "South Dakota", "Tennessee", "Texas", "Utah", "Vermont", "Virginia", "Washington", "West Virginia", "Wisconsin", "Wyoming"]
       };
@@ -319,7 +320,7 @@
 
 适用性较广的基础多选，用 Tag 展示已选项
 
-:::demo 为`el-select`设置`multiple`属性即可启用多选，此时`v-model`的值为当前选中值所组成的数组
+:::demo 为`el-select`设置`multiple`属性即可启用多选，此时`v-model`的值为当前选中值所组成的数组。默认情况下选中值会以 Tag 的形式展现，你也可以设置`collapse-tags`属性将它们合并为一段文字。
 ```html
 <template>
   <el-select v-model="value5" multiple placeholder="请选择">
@@ -330,6 +331,20 @@
       :value="item.value">
     </el-option>
   </el-select>
+
+  <el-select
+    v-model="value11"
+    multiple
+    collapse-tags
+    style="margin-left: 20px;"
+    placeholder="请选择">
+    <el-option
+        v-for="item in options"
+        :key="item.value"
+        :label="item.label"
+        :value="item.value">
+    </el-option>
+  </el-select>
 </template>
 
 <script>
@@ -645,6 +660,7 @@
 | value-key | 作为 value 唯一标识的键名，绑定值为对象类型时必填 | string | — | value |
 | size | 输入框尺寸 | string | large/small/mini | — |
 | clearable | 单选时是否可以清空选项 | boolean | — | false |
+| collapse-tags | 多选时是否将选中值按文字的形式展示 | boolean | — | false |
 | multiple-limit | 多选时用户最多可以选择的项目数，为 0 则不限制 | number | — | 0 |
 | name | select input 的 name 属性 | string | — | — |
 | placeholder | 占位符 | string | — | 请选择 |
diff --git a/packages/select/src/select.vue b/packages/select/src/select.vue
index 2651088a6..3a239e878 100644
--- a/packages/select/src/select.vue
+++ b/packages/select/src/select.vue
@@ -9,7 +9,12 @@
       @click.stop="toggleMenu"
       ref="tags"
       :style="{ 'max-width': inputWidth - 32 + 'px' }">
-      <transition-group @after-leave="resetInputHeight">
+      <span
+        class="el-select__multiple-text"
+        v-if="collapseTags">
+        {{ multipleText }}
+      </span>
+      <transition-group @after-leave="resetInputHeight" v-if="!collapseTags">
         <el-tag
           v-for="item in selected"
           :key="getValueKey(item)"
@@ -184,6 +189,14 @@
 
       selectSize() {
         return this.size || this._elFormItemSize || (this.$ELEMENT || {}).size;
+      },
+
+      multipleText() {
+        const selected = this.selected;
+        if (!selected || !selected.length) return '';
+        const length = selected.length;
+        const countText = length > 1 ? `(+${ selected.length - 1 })` : '';
+        return `${ selected[0].currentLabel } ${ countText }`;
       }
     },
 
@@ -232,7 +245,8 @@
       valueKey: {
         type: String,
         default: 'value'
-      }
+      },
+      collapseTags: Boolean
     },
 
     data() {
@@ -535,6 +549,7 @@
       },
 
       resetInputHeight() {
+        if (this.collapseTags) return;
         this.$nextTick(() => {
           if (!this.$refs.reference) return;
           let inputChildNodes = this.$refs.reference.$el.childNodes;
diff --git a/packages/theme-chalk/src/select.scss b/packages/theme-chalk/src/select.scss
index 1865be21f..a585a7dad 100644
--- a/packages/theme-chalk/src/select.scss
+++ b/packages/theme-chalk/src/select.scss
@@ -1,4 +1,5 @@
 @import "mixins/mixins";
+@import "mixins/utils";
 @import "common/var";
 @import "select-dropdown";
 @import "input";
@@ -88,6 +89,14 @@
     }
   }
 
+  @include e(multiple-text) {
+    margin-left: 15px;
+    color: $--input-color;
+    font-size: $--font-size-base;
+    display: block;
+    @include utils-ellipsis;
+  }
+
   @include e(close) {
     cursor: pointer;
     position: absolute;

From 8f515002db07cfec36147854ce6b3c29c4f0af2d Mon Sep 17 00:00:00 2001
From: Javier Diaz <coderdiaz@gmail.com>
Date: Sun, 12 Nov 2017 22:40:57 -0600
Subject: [PATCH 32/48] [loading] Spanish translation

---
 examples/docs/es/loading.md | 72 +++++++++++++++++++------------------
 1 file changed, 37 insertions(+), 35 deletions(-)

diff --git a/examples/docs/es/loading.md b/examples/docs/es/loading.md
index 7fc3d8539..6b84f5bb2 100644
--- a/examples/docs/es/loading.md
+++ b/examples/docs/es/loading.md
@@ -49,15 +49,15 @@
   }
 </script>
 
-## Loading
+## Cargando
 
-Show animation while loading data.
+Se muestra la animación mientras se cargan los datos.
 
-### Loading inside a container
+### Cargando dentro de un contenedor
 
-Displays animation in a container (such as a table) while loading data.
+Muestra una animación en un contenedor (como en una tabla) mientras se cargan los datos.
 
-:::demo Element provides two ways to invoke Loading: directive and service. For the custom directive `v-loading`, you just need to bind a `boolean` value to it. By default, the loading mask will append to the element where the directive is used. Adding the `body` modifier makes the mask append to the body element.
+:::demo Element provee dos maneras para invocar el componente de Cargando: por directiva y por servicio. Para la directiva personalizada `v-loading`, solo necesitas enlazarlo a un valor `Boolean`. Por defecto, la máscara de carga se agregará al elemento donde se usa la directiva. Al agregar el modificador `body`, la máscara se agrega al elemento body.
 
 ```html
 <template>
@@ -67,17 +67,17 @@ Displays animation in a container (such as a table) while loading data.
     style="width: 100%">
     <el-table-column
       prop="date"
-      label="Date"
+      label="Fecha"
       width="180">
     </el-table-column>
     <el-table-column
       prop="name"
-      label="Name"
+      label="Nombre"
       width="180">
     </el-table-column>
     <el-table-column
       prop="address"
-      label="Address">
+      label="Dirección">
     </el-table-column>
   </el-table>
 </template>
@@ -113,11 +113,11 @@ Displays animation in a container (such as a table) while loading data.
 ```
 :::
 
-### Customization
+### Personalización
 
-You can customize loading text, loading spinner and background color.
+Puedes personalizar el texto de carga, spinner de carga y color de fondo.
 
-:::demo Add attribute `element-loading-text` to the element on which `v-loading` is bound, and its value will be displayed under the spinner. Similarly, `element-loading-spinner` and `element-loading-background` are for customizing loading spinner class name and background color.
+:::demo Agrega el atributo `element-loading-text` al elemento en el que `v-loading` está vinculado, y su valor se mostrará debajo del spinner. Del mismo modo, `element-loading-spinner` y `element-loading-background` son para personalizar el nombre de la clase del spinner y el color de fondo.
 ```html
 <template>
   <el-table
@@ -129,17 +129,17 @@ You can customize loading text, loading spinner and background color.
     style="width: 100%">
     <el-table-column
       prop="date"
-      label="Date"
+      label="Fecha"
       width="180">
     </el-table-column>
     <el-table-column
       prop="name"
-      label="Name"
+      label="Nombre"
       width="180">
     </el-table-column>
     <el-table-column
       prop="address"
-      label="Address">
+      label="Dirección">
     </el-table-column>
   </el-table>
 </template>
@@ -169,11 +169,11 @@ You can customize loading text, loading spinner and background color.
 ```
 :::
 
-### Full screen loading
+### Cargando a pantalla completa
 
-Show a full screen animation while loading data.
+Muestra una animación de pantalla completa mientras se cargan los datos
 
-:::demo When used as a directive, a full screen Loading requires the `fullscreen` modifier, and it will be appended to body. In this case, if you wish to disable scrolling on body, you can add another modifier `lock`. When used as a service, Loading will be full screen by default.
+:::demo Cuando se utiliza como una directiva, la carga a pantalla completa requiere el modificador `fullscreen`, y este puede ser agregado al `body`. En este caso, si deseas deshabilitas el desplazamiento en `body`, puedes agregar otro modificador `lock`. Cuando se utiliza como un servicio, el componente puede ser mostrado a pantalla completa por defecto.
 
 ```html
 <template>
@@ -181,12 +181,12 @@ Show a full screen animation while loading data.
     type="primary"
     @click="openFullScreen"
     v-loading.fullscreen.lock="fullscreenLoading">
-    As a directive
+    Como una directiva
   </el-button>
   <el-button
     type="primary"
     @click="openFullScreen2">
-    As a service
+    Como un servicio
   </el-button>
 </template>
 
@@ -221,38 +221,40 @@ Show a full screen animation while loading data.
 ```
 :::
 
-### Service
-You can also invoke Loading with a service. Import Loading service:
+### Servicio
+
+Puedes invocar el componente con un servicio. Importa el servicio:
+
 ```javascript
 import { Loading } from 'element-ui';
 ```
-Invoke it:
+Invocar:
 ```javascript
 Loading.service(options);
 ```
-The parameter `options` is the configuration of Loading, and its details can be found in the following table. `LoadingService` returns a Loading instance, and you can close it by invoking its `close` method:
+El parámetro `options` es la configuración del componente, y estos detalles pueden ser encontrados en la siguiente table. `LoadingService` devuelve una instancia del componente, y tú puedes cerrarlo invocando el método `close`:
 ```javascript
 let loadingInstance = Loading.service(options);
 loadingInstance.close();
 ```
-Note that in this case the full screen Loading is singleton. If a new full screen Loading is invoked before an existing one is closed, the existing full screen Loading instance will be returned instead of actually creating another Loading instance:
+Tenga en cuenta que, en este caso, el componente a pantalla completa es una instancia única. Si un nuevo componente de pantalla completa es invocado antes de que se cierre la existente, se devolverá la instancia existente en lugar de crear la otra instancia:
 ```javascript
 let loadingInstance1 = Loading.service({ fullscreen: true });
 let loadingInstance2 = Loading.service({ fullscreen: true });
 console.log(loadingInstance1 === loadingInstance2); // true
 ```
-Calling the `close` method on any one of them can close this full screen Loading.
+Llamar al método `close` en cualquiera de estas puede cerrarlo.
 
-If Element is imported entirely, a globally method `$loading` will be registered to Vue.prototype. You can invoke it like this: `this.$loading(options)`, and it also returns a Loading instance.
+Si Element es importado completamente, un método global `$loading` puede ser registrado a Vue.prototype. Puedes invocarlo como esto: `this.$loading(options)`, y también devuelve una instancia del componente.
 
 ### Options
-| Attribute      | Description          | Type      | Accepted Values       | Default  |
+| Atributo      | Descripción          | Tipo      | Valores aceptados       | Por defecto  |
 |---------- |-------------- |---------- |--------------------------------  |-------- |
-| target | the DOM node Loading needs to cover. Accepts a DOM object or a string. If it's a string, it will be passed to `document.querySelector` to get the corresponding DOM node | object/string | — | document.body |
-| body | same as the `body` modifier of `v-loading` | boolean | — | false |
-| fullscreen | same as the `fullscreen` modifier of `v-loading` | boolean | — | true |
-| lock | same as the `lock` modifier of `v-loading` | boolean | — | false |
-| text | loading text that displays under the spinner | string | — | — |
-| spinner | class name of the custom spinner | string | — | — |
-| background | background color of the mask | string | — | — |
-| customClass | custom class name for Loading | string | — | — |
\ No newline at end of file
+| 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 |
+| body | igual que el modificador `body` de `v-loading` | boolean | — | false |
+| fullscreen | igual que el modificador `fullscreen` de `v-loading` | boolean | — | true |
+| lock | igual que el modificador `lock` de `v-loading` | boolean | — | false |
+| text | texto de cargando que se muestra debajo del spinner | string | — | — |
+| spinner | nombre de clase del spinner personalizado | string | — | — |
+| background | color de fondo de la máscara | string | — | — |
+| customClass | nombre de clase personalizada para el componente | string | — | — |
\ No newline at end of file

From cefc1b2904efac240ea6177f59c796090322b079 Mon Sep 17 00:00:00 2001
From: Javier Diaz <coderdiaz@gmail.com>
Date: Sun, 12 Nov 2017 22:42:42 -0600
Subject: [PATCH 33/48] Fixed typos

---
 examples/docs/es/loading.md | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/examples/docs/es/loading.md b/examples/docs/es/loading.md
index 6b84f5bb2..7ffb01311 100644
--- a/examples/docs/es/loading.md
+++ b/examples/docs/es/loading.md
@@ -181,12 +181,12 @@ Muestra una animación de pantalla completa mientras se cargan los datos
     type="primary"
     @click="openFullScreen"
     v-loading.fullscreen.lock="fullscreenLoading">
-    Como una directiva
+    Como directiva
   </el-button>
   <el-button
     type="primary"
     @click="openFullScreen2">
-    Como un servicio
+    Como servicio
   </el-button>
 </template>
 

From 496ad686a2a3cb0f2514425769dfe5acf6552892 Mon Sep 17 00:00:00 2001
From: Leopoldthecoder <Leopoldthecuber@gmail.com>
Date: Mon, 13 Nov 2017 17:19:50 +0800
Subject: [PATCH 34/48] update es Select doc

---
 examples/docs/es/select.md | 18 +++++++++++++++++-
 1 file changed, 17 insertions(+), 1 deletion(-)

diff --git a/examples/docs/es/select.md b/examples/docs/es/select.md
index 79e85c45b..22b6fa135 100644
--- a/examples/docs/es/select.md
+++ b/examples/docs/es/select.md
@@ -101,6 +101,7 @@
         value8: '',
         value9: [],
         value10: [],
+        value11: [],
         loading: false,
         states: ["Alabama", "Alaska", "Arizona", "Arkansas", "California", "Colorado", "Connecticut", "Delaware", "Florida", "Georgia", "Hawaii", "Idaho", "Illinois", "Indiana", "Iowa", "Kansas", "Kentucky", "Louisiana", "Maine", "Maryland", "Massachusetts", "Michigan", "Minnesota", "Mississippi", "Missouri", "Montana", "Nebraska", "Nevada", "New Hampshire", "New Jersey", "New Mexico", "New York", "North Carolina", "North Dakota", "Ohio", "Oklahoma", "Oregon", "Pennsylvania", "Rhode Island", "South Carolina", "South Dakota", "Tennessee", "Texas", "Utah", "Vermont", "Virginia", "Washington", "West Virginia", "Wisconsin", "Wyoming"]
       };
@@ -320,7 +321,7 @@ You can clear Select using a clear icon.
 
 Multiple select uses tags to display selected options.
 
-:::demo Set `multiple` attribute for `el-select` to enable multiple mode. In this case, the value of `v-model` will be an array of selected options.
+:::demo Set `multiple` attribute for `el-select` to enable multiple mode. In this case, the value of `v-model` will be an array of selected options. By default the selected options will be displayed as Tags. You can collapse them to a text by using `collapse-tags` attribute.
 ```html
 <template>
   <el-select v-model="value5" multiple placeholder="Select">
@@ -331,6 +332,20 @@ Multiple select uses tags to display selected options.
       :value="item.value">
     </el-option>
   </el-select>
+
+  <el-select
+    v-model="value11"
+    multiple
+    collapse-tags
+    style="margin-left: 20px;"
+    placeholder="Select">
+    <el-option
+        v-for="item in options"
+        :key="item.value"
+        :label="item.label"
+        :value="item.value">
+    </el-option>
+  </el-select>
 </template>
 
 <script>
@@ -650,6 +665,7 @@ If the binding value of Select is an object, make sure to assign `value-key` as
 | value-key | unique identity key name for value, required when value is an object | string | — | value |
 | size | size of Input | string | large/small/mini | — |
 | clearable | whether single select can be cleared | boolean | — | false |
+| collapse-tags | whether to collapse tags to a text when multiple selecting | boolean | — | false |
 | multiple-limit | maximum number of options user can select when `multiple` is `true`. No limit when set to 0 | number | — | 0 |
 | name | the name attribute of select input | string | — | — |
 | placeholder | placeholder | string | — | Select |

From bcf42717ceaf4ebff5b4d587459fcd4be4cf737a Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Rub=C3=A9n=20Salvador?= <rssanjuan2704@gmail.com>
Date: Mon, 13 Nov 2017 04:37:15 -0500
Subject: [PATCH 35/48] add Quickstart, Radio & Rate docs (#8187)

* Finished translations.

* [FIX] Unsaved translations.

* [ADD] Pagination, popover & progress spanish translations.

* [ADD] Quickstart, radio & rate.

* Update switch.md

* [upload] Spanish Translation

* Fixed typos and translation

* [FIX] Workflow.
---
 examples/docs/es/quickstart.md | 51 ++++++++++---------
 examples/docs/es/radio.md      | 90 +++++++++++++++++-----------------
 examples/docs/es/rate.md       | 67 ++++++++++++-------------
 3 files changed, 104 insertions(+), 104 deletions(-)

diff --git a/examples/docs/es/quickstart.md b/examples/docs/es/quickstart.md
index 892f6f856..ecb6569cc 100644
--- a/examples/docs/es/quickstart.md
+++ b/examples/docs/es/quickstart.md
@@ -1,16 +1,16 @@
-## Quick start
+## Inicio rápido
 
-This part walks you through the process of using Element in a webpack project.
+Esta sección te guía en el proceso de usar Element con webpack en un proyecto.
 
-### Use Starter Kit
+### Usa la plantilla de Kit de inicio
 
-We provide a general [project template](https://github.com/ElementUI/element-starter) for you. For Laravel users, we also have a [template](https://github.com/ElementUI/element-in-laravel-starter). You can download and use them directly.
+Proveemos una plantilla general [project template](https://github.com/ElementUI/element-starter) para ti. Para los usuarios de Laravel, también tenemos [template](https://github.com/ElementUI/element-in-laravel-starter). Puedes descargarlas y agregarlas directamente también.
 
-If you prefer not to use them, please read the following.
+Si prefieres no utilizarlas, lee las siguientes secciones de este documento.
 
-### Use vue-cli
+### Usando vue-cli
 
-We can also start a project using [vue-cli](https://github.com/vuejs/vue-cli):
+Podemos empezar un proyecto utilizando [vue-cli](https://github.com/vuejs/vue-cli):
 
 ```shell
 > npm i -g vue-cli
@@ -19,11 +19,11 @@ We can also start a project using [vue-cli](https://github.com/vuejs/vue-cli):
 > npm i && npm i element-ui
 ```
 
-### Import Element
+### Importando Element
 
-You can import Element entirely, or just import what you need. Let's start with fully import.
+Puedes importar Element completamente o solamente importar lo que necesites. Comencemos importando todo.
 
-#### Fully import
+#### Importando todo
 
 In main.js:
 ```javascript
@@ -39,19 +39,19 @@ new Vue({
   render: h => h(App)
 })
 ```
-The above imports Element entirely. Note that CSS file needs to be imported separately.
+El código anterior importa Element completamente. Nótese que el archivo CSS necesita ser incluido por separado.
 
-#### On demand
+#### En demanda
 
-With the help of [babel-plugin-component](https://github.com/QingWei-Li/babel-plugin-component), we can import components we actually need, making the project smaller than otherwise.
+Con la ayuda de [babel-plugin-component](https://github.com/QingWei-Li/babel-plugin-component), podemos importar los componentes que necesitamos, haciendo nuestro proyecto más pequenho que de la otra manera.
 
-First, install babel-plugin-component:
+Primero, instala babel-plugin-component:
 
 ```bash
 npm install babel-plugin-component -D
 ```
 
-Then edit .babelrc:
+Luego edita .babelrc:
 ```json
 {
   "presets": [
@@ -66,7 +66,7 @@ Then edit .babelrc:
 }
 ```
 
-Next, if you need Button and Select, edit main.js:
+Luego, si necesitas Button y Select, edita main.js:
 
 ```javascript
 import Vue from 'vue'
@@ -86,7 +86,7 @@ new Vue({
 })
 ```
 
-Full example (Component list reference [components.json](https://github.com/ElemeFE/element/blob/master/components.json))
+Ejemplo completo (Referencia completa de componentes [components.json](https://github.com/ElemeFE/element/blob/master/components.json))
 
 ```javascript
 import Vue from 'vue'
@@ -233,17 +233,17 @@ Vue.prototype.$notify = Notification
 Vue.prototype.$message = Message
 ```
 
-### Global config
-When importing Element, you can define a global config object. For now this object has only one property: `size`, which sets the default size for all components:
+### Configuración global
+Cuando importas Element, puedes definir un objeto global de configuración. Por ahora este elemento solo contiene una propiedad: `size`, que define el tamanho por defecto de todos los componentes:
 
-Fully import Element：
+Importando Element completamente：
 ```JS
 import Vue from 'vue'
 import Element from 'element-ui'
 Vue.use(Element, { size: 'small' })
 ```
 
-Partial import Element：
+Importando Element parcialmente：
 ```JS
 import Vue from 'vue'
 import { Button } from 'element-ui'
@@ -251,11 +251,10 @@ import { Button } from 'element-ui'
 Vue.prototype.$ELEMENT = { size: 'small' }
 Vue.use(Button)
 ```
-With the above config, the default size of all components that have size attribute will be 'small'.
+Con la anterior configuración, el tamanho por defecto de todos los componentes que tienen el atributo `size` será `small`.
 
-### Start coding
-
-Now you have implemented Vue and Element to your project, and it's time to write your code. Start development mode:
+### Empieza ya!
+Ahora haz incorporado Vue y Element a tu proyecto es tiempo para comenzar a programar. Inicia el modo de desarrollo:
 
 ```bash
 # visit localhost:8086
@@ -267,4 +266,4 @@ Build:
 ```bash
 npm run build
 ```
-Please refer to each component's documentation to learn how to use them.
+Por favor, refiérase a la documentación de cada componente para aprender cómo usarlos.
\ No newline at end of file
diff --git a/examples/docs/es/radio.md b/examples/docs/es/radio.md
index 5807b6cec..8cd98be40 100644
--- a/examples/docs/es/radio.md
+++ b/examples/docs/es/radio.md
@@ -19,14 +19,12 @@
 </script>
 
 ## Radio
+Selección única entre múltiples opciones.
 
-Single selection among multiple options.
+### Uso básico
+El elemento Radio no debe tener muchas opciones. De otra manera, utilice el componente Select.
 
-### Basic usage
-
-Radio should not have too many options. Otherwise, use the Select component instead.
-
-:::demo Creating a radio component is easy, you just need to bind a variable to Radio's `v-model`. It equals to the value of `label` of the chosen radio. The type of `label` is `String`, `Number` or `Boolean`.
+:::**Demo** Crear un elemento Radio es fácil, solo necesitas enlazar(`bind`) una variable a la directiva `v-model` del Radio. Va a ser igual al valor `label` del Radio seleccionado. El tipo de dato de `label` es `String`, `Number` o `Boolean`.
 ```html
 <template>
   <el-radio v-model="radio" label="1">Option A</el-radio>
@@ -45,11 +43,11 @@ Radio should not have too many options. Otherwise, use the Select component inst
 ```
 :::
 
-### Disabled
+### Deshabilitado
 
-`disabled` attribute is used to disable the radio.
+El atributo `disabled` es utilizado para deshabilitar un Radio.
 
-:::demo You just need to add the `disabled` attribute.
+:::**Demo** Solo necesitas agregar el atributo `disabled`.
 ```html
 <template>
   <el-radio disabled v-model="radio1" label="disabled">Option A</el-radio>
@@ -68,11 +66,11 @@ Radio should not have too many options. Otherwise, use the Select component inst
 ```
 :::
 
-### Radio button group
+### Grupo de elementos Radio
 
-Suitable for choosing from some mutually exclusive options.
+Recomendado para seleccionar opciones que se excluyen mutuamente.
 
-:::demo Combine `el-radio-group` with `el-radio` to display a radio group. Bind a variable with `v-model` of `el-radio-group` element and set label value in `el-radio`. It also provides `change` event with the current value as its parameter.
+:::**Demo** Combina `el-radio-group` con `el-radio` para mostrar un grupo de Radios. Enlaza la variable con `v-model` del elemento `el-radio-group` y asigna el valor del `label` en `el-radio`. También provee el evento `change` con el valor actual como parámetro.
 
 ```html
 <el-radio-group v-model="radio2">
@@ -93,11 +91,11 @@ Suitable for choosing from some mutually exclusive options.
 ```
 :::
 
-### Button style
+### Estilo Button
 
-Radio with button styles.
+Radio con estilo de botón.
 
-:::demo You just need to change `el-radio` element into `el-radio-button` element. We also provide `size` attribute.
+:::**Demo** Solo necesitas cambiar el elemento `el-radio` a `el-radio-button`. También proveemos el atributo `size`.
 ```html
 <template>
   <div>
@@ -149,9 +147,9 @@ Radio with button styles.
 ```
 :::
 
-### With borders
+### Con bordes
 
-:::demo The `border` attribute adds a border to Radios.
+:::**Demo** El atributo `border` agrega un borde al elemento Radios.
 ```html
 <template>
   <div>
@@ -191,41 +189,43 @@ Radio with button styles.
 ```
 :::
 
-### Radio Attributes
+### Atributos de Radio
 
- Attribute      | Description          | Type      | Accepted Values       | Default
+ Atributo      | Descripción| Tipo      |Valores Aceptado| Valores por defecto
 ---- | ---- | ---- | ---- | ----
-label | the value of Radio | string / number / boolean | — | —
-disabled | whether Radio is disabled | boolean | — | false
-border  | whether to add a border around Radio  | boolean   | — | false
-size  | size of the Radio, only works when `border` is true  | string  | medium / small / mini | —
-name | native 'name' attribute | string    |      —         |     —
+label | el valor del Radio | string / number / boolean | — | —
+disabled | si el Radio está deshabilitado| boolean | — | false
+border  | agregar borde alrededor del elemento Radio  | boolean   | — | false
+size  | tamanho del elemento Radio, solo funciona si `border` es verdadero  | string  | medium / small / mini | —
+name | atributo nativo 'name'| string    |      —         |     —
 
-### Radio Events
+### Atributos de Radio-button
 
-| Event Name | Description | Parameters |
+ Atributo      | Descripción| Tipo      |Valores Aceptado| Valores por defecto
+---- | ---- | ---- | ---- | ----
+label | el valor del Radio | string / number | — | —
+disabled | si el Radio está deshabilitado | boolean | — | false
+name | atributo nativo 'name' | string    |      —         |     —
+
+### Atributos de Radio-group
+
+ Atributo      | Descripción| Tipo      |Valores Aceptado| Valores por defecto
+---- | ---- | ---- | ---- | ----
+size | tamanho de los `radio buttons` o `bordered radios` | string | medium / small / mini | —
+disabled  | si la anidación de radios está desahabilitada| boolean   | — | false
+text-color | color de las letras cuando el botón está activo | string   | — | #ffffff   |
+fill  | color del borde y fondo cuando el botón está activo | string   | — | #409EFF   |
+
+### Eventos de Radio 
+
+| Nombre de evento| Descripción| Parámetros |
 | --- | --- | --- |
-| change | triggers when the bound value changes | the label value of the chosen radio |
+| change | se dispara cuando el valor cambia | el valor del `label` del Radio seleccionado |
 
-### Radio-group Attributes
 
- Attribute      | Description          | Type      | Accepted Values       | Default
----- | ---- | ---- | ---- | ----
-size | the size of radio buttons or bordered radios | string | medium / small / mini | —
-disabled  | whether the nesting radios are disabled | boolean   | — | false
-text-color | font color when button is active | string   | — | #ffffff   |
-fill  | border and background color when button is active | string   | — | #409EFF   |
+### Eventos de Radio-group 
 
-### Radio-group Events
-
-| Event Name | Description | Parameters |
+| Nombre de evento| Descripción| Parámetros |
 | --- | --- | --- |
-| change | triggers when the bound value changes | the label value of the chosen radio |
+| change | se dispara cuando el valor cambia | el valor del `label` del Radio seleccionado |
 
-### Radio-button Attributes
-
- Attribute      | Description          | Type      | Accepted Values       | Default
----- | ---- | ---- | ---- | ----
-label | the value of radio | string / number | — | —
-disabled | whether radio is disabled | boolean | — | false
-name | native 'name' attribute | string    |      —         |     —
diff --git a/examples/docs/es/rate.md b/examples/docs/es/rate.md
index f1f579561..5e2e7c8dd 100644
--- a/examples/docs/es/rate.md
+++ b/examples/docs/es/rate.md
@@ -39,13 +39,14 @@
   }
 </script>
 
-## Rate
+## Calificación
 
-Used for rating
+Usado para la calificación
 
-### Basic usage
+### Uso básico
+
+:::**Demo** Clasificación divide las puntuaciones en tres niveles y estos niveles pueden distinguirse usando diferentes colores de fondo. Por defecto los colores de fondo son iguales, pero puedes asignarlos para reflejar los tres niveles usando el atributo `colors` y sus dos umbrales pueden ser definidos con `low-treshold` y `high-treshold`.
 
-:::demo Rate divides rating scores into three levels and these levels can be distinguished by using different background colors. By default background colors are the same, but you can assign them to reflect three levels using the `colors` attribute, and their two thresholds can be defined by `low-threshold` and `high-threshold`.
 
 ``` html
 <div class="block">
@@ -73,11 +74,11 @@ Used for rating
 ```
 :::
 
-### With text
+### Con texto
 
-Using text to indicate rating score
+Usa texto para indicar la puntuación
 
-:::demo Add attribute `show-text` to display text at the right of Rate. You can assign texts for different scores using `texts`. `texts` is an array whose length should be equal to the max score `max`.
+:::**Demo** Agrega el atributo `show-text` para mostrar texto a la derecha del componente. Puedes asignar textos para las distintas puntuaciones usando `texts`. `texts` es un arreglo cuya longitud debe ser igual a la máxima puntuación `max`.
 
 ``` html
 <el-rate
@@ -98,11 +99,11 @@ Using text to indicate rating score
 ```
 :::
 
-### More icons
+### Más iconos
 
-You can use different icons to distinguish different rate components.
+Puedes utilizar iconos para diferenciar cada componente.
 
-:::demo You can customize icons for three different levels using `icon-classes`. In this example, we also use `void-icon-class` to set the icon if it is unselected.
+:::**Demo** Puedes customizar iconos para tres niveles diferentes usando `icon-classes`. En este ejemplo también usamos `void-icon-class` para asignar un icono si no está seleccionado.
 
 ``` html
 <el-rate
@@ -124,11 +125,11 @@ You can use different icons to distinguish different rate components.
 ```
 :::
 
-### Read-only
+### Solo lectura
 
-Read-only Rate is for displaying rating score. Half star is supported.
+La calificación de solo lectura is para mostrar la puntuación. Soporta media estrella.
 
-:::demo Use attribute `disabled` to make the component read-only. Add `show-score` to display the rating score at the right side. Additionally, you can use attribute `score-template` to provide a score template. It must contain `{value}`, and `{value}` will be replaced with the rating score.
+:::**Demo** Usa el atributo `disabled` para hacer el componente de solo lectura. Agrega `show-score` para mostrar la puntuación en el lado derecho. Además, puedes usar el atributo `score-template` para proveer una plantilla. Tiene que contener `{value}`, y `{value}` será sustituido por la puntuación.
 
 ``` html
 <el-rate
@@ -151,27 +152,27 @@ Read-only Rate is for displaying rating score. Half star is supported.
 ```
 :::
 
-### Attributes
-| Attribute      | Description          | Type      | Accepted Values       | Default  |
+### Atributos
+| Atributo     | Descripción| Tipo| Valores aceptado| Valores por defecto|
 |---------- |-------- |---------- |-------------  |-------- |
-| max | max rating score | number | — | 5 |
-| disabled | whether Rate is read-only | boolean | — | false |
-| allow-half | whether picking half start is allowed | boolean | — | false |
-| low-threshold | threshold value between low and medium level. The value itself will be included in low level | number | — | 2 |
-| high-threshold | threshold value between medium and high level. The value itself will be included in high level | number | — | 4 |
-| colors | color array for icons. It should have 3 elements, each of which corresponds with a score level  | array | — | ['#F7BA2A', '#F7BA2A', '#F7BA2A'] |
-| void-color | color of unselected icons | string | — | #C6D1DE |
-| disabled-void-color | color of unselected read-only icons | string | — | #EFF2F7 |
-| icon-classes |  array of class names of icons. It should have 3 elements, each of which corresponds with a score level | array | — | ['el-icon-star-on', 'el-icon-star-on','el-icon-star-on'] |
-| void-icon-class | class name of unselected icons | string | — | el-icon-star-off |
-| disabled-void-icon-class | class name of unselected read-only icons | string | — | el-icon-star-on |
-| show-text | whether to display texts | boolean | — | false |
-| show-score | whether to display current score. show-score and show-text cannot be true at the same time | boolean | — | false |
-| text-color | color of texts | string | — | #1F2D3D |
-| texts | text array | array | — | ['极差', '失望', '一般', '满意', '惊喜'] |
-| score-template | score template | string | — | {value} |
+| max | puntuación máxima | number | — | 5 |
+| disabled | si la calificación es de solo lectura | boolean | — | false |
+| allow-half | si escoger media estrella está permitido | boolean | — | false |
+| low-threshold | valor del umbral entre nivel bajo y medio. El valor será incluido en el nivel bajo | number | — | 2 |
+| high-threshold | valor del umbral entre nivel bajo y medio. El valor será incluido en el nivel alto | number | — | 4 |
+| colors | arreglo de colores para iconos. Debe tener 3 elementos, cada uno corresponde a un nivel de puntuación | array | — | ['#F7BA2A', '#F7BA2A', '#F7BA2A'] |
+| void-color | color para iconos no seleccionados | string | — | #C6D1DE |
+| disabled-void-color | color para las iconos no seleccionados de solo lectura | string | — | #EFF2F7 |
+| icon-classes |  arreglo de nombres para clases de iconos. Debe tener 3 elementos, cada uno corresponde a un nivel de puntuación | array | — | ['el-icon-star-on', 'el-icon-star-on','el-icon-star-on'] |
+| void-icon-class | nombre de clase para iconos no seleccionados | string | — | el-icon-star-off |
+| disabled-void-icon-class | nombre de clase para elementos no seleccionados de solo lectura | string | — | el-icon-star-on |
+| show-text | muestra el texto | boolean | — | false |
+| show-score | muestra puntuación actual. `show-score` y `show-text` no pueden ser verdaderos al mismo tiempo | boolean | — | false |
+| text-color | color del texto | string | — | #1F2D3D |
+| texts | arreglo de textos | array | — | ['极差', '失望', '一般', '满意', '惊喜'] |
+| score-template | plantilla de puntuación | string | — | {value} |
 
 ### Events
-| Event Name | Description | Parameters |
+| Nombre del evento | Descripción | Parámetros |
 |---------- |-------- |---------- |
-| change | Triggers when rate value is changed | value after changing |
+| change | Se dispara cuando la puntuación es cambiada | valor luego del cambio |

From 8d63f688338e142dd50590e6e40a6a4130e8b4ce Mon Sep 17 00:00:00 2001
From: ProgramerGuy <ProgramerGuy@users.noreply.github.com>
Date: Mon, 13 Nov 2017 13:18:12 -0600
Subject: [PATCH 36/48] Documentation message Spanish

translate message to spanish
---
 examples/docs/es/message.md | 68 ++++++++++++++++++-------------------
 1 file changed, 34 insertions(+), 34 deletions(-)

diff --git a/examples/docs/es/message.md b/examples/docs/es/message.md
index 5fb0acaa4..bf1dad8d5 100644
--- a/examples/docs/es/message.md
+++ b/examples/docs/es/message.md
@@ -83,13 +83,13 @@
 
 ## Message
 
-Used to show feedback after an activity. The difference with Notification is that the latter is often used to show a system level passive notification.
+Utilizado para mostrar retroalimentacion despues de una actividad. La diferencia con el componente Notification es que este ultimo es utilizado para mostrar una notificacion pasiva a nivel de sistema.
 
-### Basic usage
+### Uso basico
 
-Displays at the top, and disappears after 3 seconds.
+Se muestra en la parte superior de la pagina y desaparece despues de 3 segundos.
 
-:::demo The setup of Message is very similar to notification, so parts of the options won't be explained in detail here. You can check the options table below combined with notification doc to understand it. Element has registered a `$message` method for invoking. Message can take a string or a VNode as parameter, and it will be shown as the main body.
+:::demo La configuracion del componente Message es muy similar al del componente notification, asi que parte de las opciones no seran explicadas a detalle aqui. Puedes consultar la tabla de opciones en la parte inferior conbinada con la documentacion del componente notification para comprenderla. Element a registrado un metodo `$message` para poder invocarlo. Message puede tomar una cadena o un Vnode como parametro, y lo mostrara como el cuerpo principal.
 
 ```html
 <template>
@@ -119,11 +119,11 @@ Displays at the top, and disappears after 3 seconds.
 ```
 :::
 
-### Types
+### Tipos
 
-Used to show the feedback of Success, Warning, Message and Error activities.
+Utilizados para mostrar retroalimentacion de Success, Warning, Message y Error activities.
 
-:::demo When you need more customizations, Message component can also take an object as parameter. For example, setting value of `type` can define different types, and its default is `info`. In such cases the main body is passed in as the value of `message`. Also, we have registered methods for different types, so you can directly call it without passing a type like `open4`.
+:::demo Cuando necesitas mas personalizacion, el componente Message tambien puede tomar un objeto como parametro. Por ejemplo, Estableciendo el valor de `type` puedes definir diferentes tipos, el predeterminado es `info`. En tales casos el cuerpo principal se pasa como el valor de `message`. Tambien, tenemos registrados metodos para los diferentes tipos, asi que, puedes llamarlos sin necesidad de pasar un tipo como `open4`.
 ```html
 <template>
   <el-button :plain="true" @click="open2">success</el-button>
@@ -163,9 +163,9 @@ Used to show the feedback of Success, Warning, Message and Error activities.
 
 ### Closable
 
-A close button can be added.
+Un boton para cerrar que puede ser agregado.
 
-:::demo A default Message cannot be closed manually. If you need a closable message, you can set `showClose` field. Besides, same as notification, message has a controllable `duration`. Default duration is 3000 ms, and it won't disappear when set to `0`.
+:::demo Un componente Message predeterminado no se puede cerrar manualmente. Si necesitas un componente message que pueda cerrarse, puedes establecer el campo `showClose`. Ademas, al igual que las notificaciones, message tiene un atriubuto `duration` que puede ser controlado. Por defecto la duracion es de 3000 ms, y no desaparecera al llegar a `0`.
 ```html
 <template>
   <el-button :plain="true" @click="open5">message</el-button>
@@ -214,7 +214,7 @@ A close button can be added.
 :::
 
 ### Centered text
-Use the `center` attribute to center the text.
+Utiliza el atributo `center` para centrar el texto.
 
 :::demo
 
@@ -238,10 +238,10 @@ Use the `center` attribute to center the text.
 ```
 :::
 
-### Use HTML string
-`message` supports HTML string.
+### Utiliza cadenas HTML
+`message` soporta cadenas HTML.
 
-:::demo Set `dangerouslyUseHTMLString` to true and `message` will be treated as an HTML string.
+:::demo Establece la propiedad `dangerouslyUseHTMLString` en true y `message` sera tratado como una cadena HTML.
 
 ```html
 <template>
@@ -263,15 +263,15 @@ Use the `center` attribute to center the text.
 ```
 :::
 
-:::warning
-Although `message` property supports HTML strings, dynamically rendering arbitrary HTML on your website can be very dangerous because it can easily lead to [XSS attacks](https://en.wikipedia.org/wiki/Cross-site_scripting). So when `dangerouslyUseHTMLString` is on, please make sure the content of `message` is trusted, and **never** assign `message` to user-provided content.
+:::advertencia
+Aunque la propiedad `message` soporta cadenas HTML, realizar arbitrariamente render dinamico de HTML en nuestro sitio web puede ser muy peligroso ya que puede conducir facilmente a [XSS attacks](https://en.wikipedia.org/wiki/Cross-site_scripting). Entonces cuando `dangerouslyUseHTMLString` esta activada, asegurece que el contendio de `message` sea de confianza, y **nunca** asignar `message` a contenido generado por el usuario.
 :::
 
-### Global method
+### Metodos Globales
 
-Element has added a global method `$message` for Vue.prototype. So in a vue instance you can call `Message` like what we did in this page.
+Element ha agregado un método global llamado `$message` para Vue.prototype. Entonces en una instancia de vue puedes llamar a `Message` como lo hicimos en esta pagina.
 
-### Local import
+### Importación local
 
 Import `Message`:
 
@@ -279,24 +279,24 @@ Import `Message`:
 import { Message } from 'element-ui';
 ```
 
-In this case you should call `Message(options)`. We have also registered methods for different types, e.g. `Message.success(options)`.
-You can call `Message.closeAll()` to manually close all the instances.
+En este caso deberias llamar al metodo `Message(options)`. Tambien hemos registrado metodos para los diferentes tipos, e.g. `Message.success(options)`.
+Puedes llamar al metodo `Message.closeAll()` para cerrar manualmente todas las instancias.
 
 ### Options
-| Attribute      | Description          | Type      | Accepted Values       | Default  |
+| Atributo      | Descripcion          | Tipo      | Valores permitidos       | Default  |
 |---------- |-------------- |---------- |--------------------------------  |-------- |
-| message | message text | string / VNode | — | — |
-| type | message type | string | success/warning/info/error | info |
-| iconClass | custom icon's class, overrides `type` | string | — | — |
-| dangerouslyUseHTMLString | whether `message` is treated as HTML string | boolean | — | false |
-| customClass | custom class name for Message | string | — | — |
-| duration | display duration, millisecond. If set to 0, it will not turn off automatically | number | — | 3000 |
-| showClose | whether to show a close button | boolean | — | false |
-| center | whether to center the text | boolean | — | false |
-| onClose | callback function when closed with the message instance as the parameter | function | — | — |
+| 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 | — | — |
+| dangerouslyUseHTMLString | utilizado para que `message` sea tratado como cadena HTML | boolean | — | false |
+| customClass | nombre de clase personalizado para el componente Message | string | — | — |
+| duration | muestra la duracion,en milisegundos. si se establece en 0, este no se apagara automaticamente | number | — | 3000 |
+| showClose | utilizado para mostrar un boton para cerrar | boolean | — | false |
+| center | utilizado para centrar el texto | boolean | — | false |
+| onClose | funcion callback ejecutada cuando se cierra con una instancia de mensaje como parametro | function | — | — |
 
-### Methods
-`Message` and `this.$message` returns the current Message instance. To manually close the instance, you can call `close` on it.
-| Method | Description |
+### Metodos
+`Message` y `this.$message` regresan una instancia del componente Message. Para cerrar manualmente la instancia, puedes llamas al metodo `close`.
+| Metodo | Descripcion |
 | ---- | ---- |
-| close | close the Message |
+| close | cierra el componente Message |

From efb81da80f8bf82302af082461c3586e9a70d7dd Mon Sep 17 00:00:00 2001
From: ProgramerGuy <ProgramerGuy@users.noreply.github.com>
Date: Mon, 13 Nov 2017 11:11:05 -0600
Subject: [PATCH 37/48] Documentation message-box Spanish

translate for the message-box documentation
---
 examples/docs/es/message-box.md | 103 ++++++++++++++++----------------
 1 file changed, 53 insertions(+), 50 deletions(-)

diff --git a/examples/docs/es/message-box.md b/examples/docs/es/message-box.md
index 6b3aeca0d..8069a17c3 100644
--- a/examples/docs/es/message-box.md
+++ b/examples/docs/es/message-box.md
@@ -123,16 +123,16 @@
 
 ## MessageBox
 
-A set of modal boxes simulating system message box, mainly for alerting information, confirm operations and prompting messages.
+Un conjunto de cajas modales simulando un sistema de message box, principalmente para alertar informacion, confirmar operaciones y  mostrar mensajes de aviso.
 :::tip
-By design MessageBox provides simulations of system's `alert`, `confirm` and `prompt`，so it's content should be simple. For more complicated contents, please use Dialog.
+Por diseño los message box nos proveen de simulaciones de sistemas como los componentes `alert`, `confirm` y `prompt`，entonces su contenido debería ser simple. para contenido mas complejo, por favor utilize el componente Dialog.
 :::
 
 ### Alert
 
-Alert interrupts user operation until the user confirms.
+Alert interrumpe las operaciones realizadas hasta que el usuario confirme la alerta.
 
-:::demo Open an alert by calling the `$alert` method. It simulates the system's `alert`, and cannot be closed by pressing ESC or clicking outside the box. In this example, two parameters `message` and `title` are received. It is worth mentioning that when the box is closed, it returns a `Promise` object for further processing. If you are not sure if your target browsers support `Promise`, you should import a third party polyfill or use callbacks instead like this example.
+:::demo Desplegar una alerta utilizando el metodo `$alert`. Simula el sistema `alert`, y no puede ser cerrado al presionar la tecla ESC o al dar click fuera de la caja. En este ejemplo, dos parametros son recibidos `message` y `title`. Vale la pena mencionar que cuando la caja es cerrada, regresa un objeto `Promise` para su procesaimiento posteriormente. Si no estas seguro si el navegador soporta `Promise`, deberias importar una libreria de terceros de polyfill o utilizar callbacks.
 
 ```html
 <template>
@@ -161,9 +161,10 @@ Alert interrupts user operation until the user confirms.
 
 ### Confirm
 
-Confirm is used to ask users' confirmation.
+Confirm es utilizado para preguntar al usuario y recibir una confirmacion.
 
-:::demo Call `$confirm` method to open a confirm, and it simulates the system's `confirm`. We can also highly customize Message Box by passing a third attribute `options` which is a literal object. The attribute `type` indicates the message type, and it's value can be `success`, `error`, `info` and `warning`. Note that the second attribute `title` must be a `string`, and if it is an `object`, it will be handled as the attribute `options`. Here we use `Promise` to handle further processing. 
+
+:::demo llamando al metodo `$confirm` para abrir el componente confirm, y simula el sistema `confirm`.Tambien podemos perzonalizar a gran medida el componente Message Box al mandar un tercer atributo llamado `options` que es literalmente un objeto . El atributo `type` indica el tipo de mensaje, y su valor puede ser `success`, `error`, `info` y `warning`. Se debe tener en cuenta que el segundo atributo `title` debe ser de tipo `string`, y si es de tipo `object`, sera manejado como el atributo `options`. Aqui utilizamos `Promise` para manejar posteriormente el proceso. 
 
 ```html
 <template>
@@ -199,9 +200,9 @@ Confirm is used to ask users' confirmation.
 
 ### Prompt
 
-Prompt is used when user input is required.
+Prompt es utilizado cuando se requiere entrada de informacion del usuario.
 
-:::demo Call `$prompt` method to open a prompt, and it simulates the system's `prompt`. You can use `inputPattern` parameter to specify your own RegExp pattern. Use `inputValidator` to specify validation method, and it should return `Boolean` or `String`. Returning `false` or `String` means the validation has failed, and the string returned will be used as the `inputErrorMessage`. In addition, you can customize the placeholder of the input box with `inputPlaceholder` parameter.
+:::demo LLamando al metodo `$prompt` desplegamos el componente prompt, y simula el sistema `prompt`.Puedes utilizar el parametro `inputPattern` para especificar tu propio patron RegExp. Utiliza el parametro `inputValidator` para especificar el metodo de validacion, y debería regresar un valor de tipo `Boolean` o `String`. Al regresar `false` o `String` significa que la validacion a fallado, y la cadena regresada se usara como `inputErrorMessage`.Ademas, puedes perzonalizar el atributo placeholder del input box con el parametro `inputPlaceholder`.
 
 ```html
 <template>
@@ -235,12 +236,14 @@ Prompt is used when user input is required.
 ```
 :::
 
-### Customization
+### Personalización
 
-Can be customized to show various content.
+Puede ser personalizado para mostrar diversos contenidos.
 
 :::demo The three methods mentioned above are repackagings of the `$msgbox` method. This example calls `$msgbox` method directly using the `showCancelButton` attribute, which is used to indicate if a cancel button is displayed. Besides we can use `cancelButtonClass` to add a custom style and `cancelButtonText` to customize the button text (the confirm button also has these fields, and a complete list of fields can be found at the end of this documentation). This example also uses the `beforeClose` attribute. It is a method and will be triggered when the MessageBox instance will be closed, and its execution will stop the instance from closing. It has three parameters: `action`, `instance` and `done`. Using it enables you to manipulate the instance before it closes, e.g. activating `loading` for confirm button; you can invoke the `done` method to close the MessageBox instance (if `done` is not called inside `beforeClose`, the instance will not be closed).
 
+:::demo Los tres metodos mencionados anteriormente son un rempaquetado del metodo `$msgbox`. En este ejemplo se realiza una llamada al metodo `$msgbox` directamente utilizando el atributo `showCancelButton`, el cual es utilizado para indicar si el boton cancelar es mostrado en pantalla. Ademas podemos utilizar el atributo `cancelButtonClass` para agregar un estilo personalizado y el atributo `cancelButtonText` para personalizar el texto del boton (el boton de confirmacion tambien cuenta con estos campos, y podras encontrar una lista completa de estos atributos al final de esta documentacion). Este ejemplo tambien utiliza el atributo `beforeClose`.Es un metodo que es disparado cuando una instancia del componente MessageBox es cerrada, y su ejecucion detendra el cierre de la instancia. Tiene tres parametros: `action`, `instance` y `done`. Al utilizarla te permite maniluplar la instancia antes de que sea cerrada, e.g. activando `loading` para el boton de confirmacion; puedes invocar el metodo `done` para cerrar la instancia del componente MessageBox  (si el metodo `done` no es llamado dentro del atributo `beforeClose`, la instancia no podra cerrarse).
+
 ```html
 <template>
   <el-button type="text" @click="open4">Click to open Message Box</el-button>
@@ -287,10 +290,10 @@ Can be customized to show various content.
 ```
 :::
 
-### Use HTML String
-`message` supports HTML string.
+### Utiliza cadenas HTML
+`message` soporta cadenas HTML.
 
-:::demo Set `dangerouslyUseHTMLString` to true and `message` will be treated as an HTML string.
+:::demo Establece el valor de `dangerouslyUseHTMLString` a true y `message` sera tratado como una cadena HTML.
 
 ```html
 <template>
@@ -311,14 +314,14 @@ Can be customized to show various content.
 ```
 :::
 
-:::warning
-Although `message` property supports HTML strings, dynamically rendering arbitrary HTML on your website can be very dangerous because it can easily lead to [XSS attacks](https://en.wikipedia.org/wiki/Cross-site_scripting). So when `dangerouslyUseHTMLString` is on, please make sure the content of `message` is trusted, and **never** assign `message` to user-provided content.
+:::advertencia
+Aunque la propiedad `message` soporta cadenas HTML, realizar arbitrariamente render dinamico de HTML en nuestro sitio web puede ser muy peligroso ya que puede conducir facilmente a [XSS attacks](https://en.wikipedia.org/wiki/Cross-site_scripting). Entonces cuando `dangerouslyUseHTMLString` esta activada, asegurece que el contendio de `message` sea de confianza, y **nunca** asignar `message` a contenido generado por el usuario.
 :::
 
 ### Centered content
-Content of MessageBox can be centered.
+El contenido del componente MessageBox puede ser centrado.
 
-:::demo Setting `center` to `true` will center the content
+:::demo Establecer `center` a `true` centrara el contenido
 
 ```html
 <template>
@@ -352,51 +355,51 @@ Content of MessageBox can be centered.
 ```
 :::
 
-### Global method
+### Metodos Globales
 
-If Element is fully imported, it will add the following global methods for Vue.prototype: `$msgbox`, `$alert`, `$confirm` and `$prompt`. So in a Vue instance you can call `MessageBox` like what we did in this page. The parameters are:
+Si Element fue importado completamente, agregara los siguientes metodos globales para Vue.prototype: `$msgbox`, `$alert`, `$confirm` y `$prompt`. Asi que en una instancia de Vue puedes llamar el metodo `MessageBox` como lo que hicimos en esta pagina. Los parametros son:
 - `$msgbox(options)`
 - `$alert(message, title, options)` or `$alert(message, options)`
 - `$confirm(message, title, options)` or `$confirm(message, options)`
 - `$prompt(message, title, options)` or `$prompt(message, options)`
 
-### Local import
+### Importación local
 
-If you prefer importing `MessageBox` on demand:
+Si prefieres importar `MessageBox` cuando lo necesites (on demand):
 
 ```javascript
 import { MessageBox } from 'element-ui';
 ```
 
-The corresponding methods are: `MessageBox`, `MessageBox.alert`, `MessageBox.confirm` and `MessageBox.prompt`. The parameters are the same as above.
+Los metodos correspondientes: `MessageBox`, `MessageBox.alert`, `MessageBox.confirm` y `MessageBox.prompt`. Los parametros son los mismos que los anteriores.
 
-### Options
+### Opciones
 
-| Attribute      | Description          | Type      | Accepted Values       | Default  |
+| Atributo      | Descripción          | Tipo      | Valores Permitidos      | Default  |
 |---------- |-------------- |---------- |--------------------------------  |-------- |
-| title | title of the MessageBox | string | — | — |
-| message | content of the MessageBox | string | — | — |
-| dangerouslyUseHTMLString | whether `message` is treated as HTML string | boolean | — | false |
-| type | message type, used for icon display | string | success / info / warning / error | — |
-| customClass | custom class name for MessageBox | string | — | — |
-| callback | MessageBox closing callback if you don't prefer Promise | function(action), where action can be 'confirm' or 'cancel', and `instance` is the MessageBox instance. You can access to that instance's attributes and methods | — | — |
-| beforeClose | callback before MessageBox closes, and it will prevent MessageBox from closing | function(action, instance, done), where `action` can be 'confirm' or 'cancel'; `instance` is the MessageBox instance, and you can access to that instance's attributes and methods; `done` is for closing the instance | — | — |
-| lockScroll | whether to lock body scroll when MessageBox prompts | boolean | — | true |
-| showCancelButton | whether to show a cancel button | boolean | — | false (true when called with confirm and prompt) |
-| showConfirmButton | whether to show a confirm button | boolean | — | true |
-| cancelButtonText | text content of cancel button | string | — | Cancel |
-| confirmButtonText | text content of confirm button | string | — | OK |
-| cancelButtonClass | custom class name of cancel button | string | — | — |
-| confirmButtonClass | custom class name of confirm button | string | — | — |
-| closeOnClickModal | whether MessageBox can be closed by clicking the mask | boolean | — | true (false when called with alert) |
-| closeOnPressEscape | whether MessageBox can be closed by pressing the ESC | boolean | — | true (false when called with alert) |
-| closeOnHashChange | whether to close MessageBox when hash changes | boolean | — | true |
-| showInput | whether to show an input | boolean | — | false (true when called with prompt) |
-| inputPlaceholder | placeholder of input | string | — | — |
-| inputType | type of input | string | — | text |
-| inputValue | initial value of input | string | — | — |
-| inputPattern | regexp for the input | regexp | — | — |
-| inputValidator | validation function for the input. Should returns a boolean or string. If a string is returned, it will be assigned to inputErrorMessage | function | — | — |
-| inputErrorMessage | error message when validation fails | string | — | Illegal input |
-| center | whether to align the content in center | boolean | — | false |
-| roundButton | whether to use round button | boolean | — | false |
\ No newline at end of file
+| title | titulo del componente MessageBox | string | — | — |
+| 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 | — |
+| customClass | nombre de la clase personzalida para el componente MessageBox | string | — | — |
+| callback | MessageBox callback al cerrar si no deseas utilizar Promise | function(action), donde la accion puede ser 'confirm' o 'cancel', 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' o 'cancel'; `instance` es la instancia del componente MessageBox, Puedes acceder a los metodos y atributos de esa instancia; `done` es para cerrar la instancia | — | — |
+| lockScroll | utilizado para bloquear el desplazamiento del contenido del MessageBox prompts | boolean | — | true |
+| showCancelButton | utlizado para mostrar un boton cancelar | boolean | — | false (true cuando es llamado con confirm y prompt) |
+| showConfirmButton |utlizado para mostrar un boton confirmar | boolean | — | true |
+| cancelButtonText | contenido de texto del boton cancelar | string | — | Cancel |
+| confirmButtonText | contenido de texto del boton confirmar | string | — | OK |
+| cancelButtonClass | nombre de la clase personalizada del boton cancelar | string | — | — |
+| confirmButtonClass | nombre de la clase personalizada del boton confirmar | string | — | — |
+| closeOnClickModal | utilizado para que que el componenteMessageBox pueda ser cerrado al dar click en la mascara | boolean | — | true (false cuando es llamado con alert) |
+| closeOnPressEscape | utilizado para que que el componenteMessageBox pueda ser cerrado al presionar la tecla ESC | boolean | — | true (false cuando es llamado con alert) |
+| closeOnHashChange | utilizado para cerra el componente MessageBox cuando hash cambie | boolean | — | true |
+| showInput | utilizado para mostrar el componente input| boolean | — | false (true cuando es llamado con prompt) |
+| inputPlaceholder | placeholder para el componente input | string | — | — |
+| inputType | tipo del componente input | string | — | text |
+| inputValue | valor inicial del componente input | string | — | — |
+| inputPattern | regexp del componente input | regexp | — | — |
+| inputValidator | funcion de validacion del componente input. Debe regresar un valor de tipo boolean o string. Si regresa un valor tipo string, sera asignado a inputErrorMessage | function | — | — |
+| inputErrorMessage | mensaje de error cuando la validacion falla | string | — | Illegal input |
+| center | utilizado para alinear el contenido al centro | boolean | — | false |
+| roundButton | utilizado para redondear el boton | boolean | — | false |

From 8e66ceb7a4969da40bea4ef8c23d0027d9071339 Mon Sep 17 00:00:00 2001
From: ProgramerGuy <ProgramerGuy@users.noreply.github.com>
Date: Mon, 13 Nov 2017 21:38:16 -0600
Subject: [PATCH 38/48] Update message-box.md

---
 examples/docs/es/message-box.md | 2 --
 1 file changed, 2 deletions(-)

diff --git a/examples/docs/es/message-box.md b/examples/docs/es/message-box.md
index 8069a17c3..82565c4e2 100644
--- a/examples/docs/es/message-box.md
+++ b/examples/docs/es/message-box.md
@@ -240,8 +240,6 @@ Prompt es utilizado cuando se requiere entrada de informacion del usuario.
 
 Puede ser personalizado para mostrar diversos contenidos.
 
-:::demo The three methods mentioned above are repackagings of the `$msgbox` method. This example calls `$msgbox` method directly using the `showCancelButton` attribute, which is used to indicate if a cancel button is displayed. Besides we can use `cancelButtonClass` to add a custom style and `cancelButtonText` to customize the button text (the confirm button also has these fields, and a complete list of fields can be found at the end of this documentation). This example also uses the `beforeClose` attribute. It is a method and will be triggered when the MessageBox instance will be closed, and its execution will stop the instance from closing. It has three parameters: `action`, `instance` and `done`. Using it enables you to manipulate the instance before it closes, e.g. activating `loading` for confirm button; you can invoke the `done` method to close the MessageBox instance (if `done` is not called inside `beforeClose`, the instance will not be closed).
-
 :::demo Los tres metodos mencionados anteriormente son un rempaquetado del metodo `$msgbox`. En este ejemplo se realiza una llamada al metodo `$msgbox` directamente utilizando el atributo `showCancelButton`, el cual es utilizado para indicar si el boton cancelar es mostrado en pantalla. Ademas podemos utilizar el atributo `cancelButtonClass` para agregar un estilo personalizado y el atributo `cancelButtonText` para personalizar el texto del boton (el boton de confirmacion tambien cuenta con estos campos, y podras encontrar una lista completa de estos atributos al final de esta documentacion). Este ejemplo tambien utiliza el atributo `beforeClose`.Es un metodo que es disparado cuando una instancia del componente MessageBox es cerrada, y su ejecucion detendra el cierre de la instancia. Tiene tres parametros: `action`, `instance` y `done`. Al utilizarla te permite maniluplar la instancia antes de que sea cerrada, e.g. activando `loading` para el boton de confirmacion; puedes invocar el metodo `done` para cerrar la instancia del componente MessageBox  (si el metodo `done` no es llamado dentro del atributo `beforeClose`, la instancia no podra cerrarse).
 
 ```html

From a82018fca332947810ff8abbceaeae1ad93803a7 Mon Sep 17 00:00:00 2001
From: Juan Flores <juan.flores@base22.com>
Date: Tue, 14 Nov 2017 16:38:17 -0600
Subject: [PATCH 39/48] Docs translation (tabs, time-picker, tooltip)

---
 examples/docs/es/tabs.md        | 76 ++++++++++++-------------
 examples/docs/es/time-picker.md | 98 ++++++++++++++++-----------------
 examples/docs/es/tooltip.md     | 67 +++++++++++-----------
 3 files changed, 121 insertions(+), 120 deletions(-)

diff --git a/examples/docs/es/tabs.md b/examples/docs/es/tabs.md
index d078be7d9..c00445826 100644
--- a/examples/docs/es/tabs.md
+++ b/examples/docs/es/tabs.md
@@ -90,15 +90,15 @@
   }
 </script>
 
-## Tabs
+## Tabulación
 
-Divide data collections which are related yet belong to different types.
+Divide collecciones de datos que están relacionados pero pertenecen a diferentes tipos.
 
-### Basic usage
+### Uso básico
 
-Basic and concise tabs.
+Tabulación básica y concisa
 
-:::demo Tabs provide a selective card functionality. By default the first tab is selected as active, and you can activate any tab by setting the `value` attribute.
+:::demo de Tabulación provee funcionalidad de tarjeta selectiva. Por defecto, la primer pestaña es seleccionada como activa, y es posible activar cualquier pestaña estableciendo el atributo de `value`.
 
 ```html
 <template>
@@ -126,11 +126,11 @@ Basic and concise tabs.
 ```
 :::
 
-### Card Style
+### Estilo de Tarjeta
 
-Tabs styled as cards.
+Pestañas diseñadas como tarjetas.
 
-:::demo Set `type` to `card` can get a card-styled tab.
+:::demo Establecer `type` a `card` para obtener una pestaña diseñada como tarjeta.
 
 ```html
 <template>
@@ -158,11 +158,11 @@ Tabs styled as cards.
 ```
 :::
 
-### Border card
+### Tarjeta con Bordes
 
-Border card tabs.
+Pestañas de tarjeta con bordes.
 
-:::demo Set `type` to `border-card`.
+:::demo Establecer `type` a `border-card`.
 
 ```html
 <el-tabs type="border-card">
@@ -175,11 +175,11 @@ Border card tabs.
 
 :::
 
-### Tab position
+### Posición de tabulación
 
-You can use `tab-position` attribute to set the tab's position.
+Es posible usar el atributo `tab-position` para establecer la posición de la tabulación.
 
-:::demo You can choose from four directions: `tabPosition="left|right|top|bottom"`
+:::demo Es posible escoger entre cuatro direcciones: `tabPosition="left|right|top|bottom"`
 
 ```html
 <template>
@@ -209,9 +209,9 @@ You can use `tab-position` attribute to set the tab's position.
 ```
 :::
 
-### Custom Tab
+### Pestaña Personalizada
 
-You can use named slot to customize the tab label content.
+Es posible usar slots nombrados para personalizar el contenido de la etiqueta de la pestaña.
 
 :::demo
 ```html
@@ -227,9 +227,9 @@ You can use named slot to customize the tab label content.
 ```
 :::
 
-### Add & close tab
+### Agregar y cerrar pestaña
 
-Only card type Tabs support addable & closeable.
+Solo las pestañas de tipo tarjeta soportan adición y cierre.
 
 :::demo
 ```html
@@ -295,7 +295,7 @@ Only card type Tabs support addable & closeable.
 ```
 :::
 
-### Customized trigger button of new tab
+### Botón disparador personalizado de la nueva pestaña
 
 :::demo
 ```html
@@ -367,28 +367,28 @@ Only card type Tabs support addable & closeable.
 ```
 :::
 
-### Tabs Attributes
-| Attribute      | Description          | Type      | Accepted Values       | Default  |
+### Atributos de Pestañas
+| Atributo      | Descripción          | Tipo      | Valores Aceptados      | Default  |
 |---------- |-------- |---------- |-------------  |-------- |
-| type     | type of Tab | string   | card/border-card  |     —    |
-| closable  | whether Tab is closable | boolean   | — |  false  |
-| addable  | whether Tab is addable   | boolean   | — |  false  |
-| editable  | whether Tab is addable and closable | boolean   | — |  false  |
-| value  | name of the selected tab  | string   |  —  |  name of first tab |
-| tab-position  | position of tabs | string   |  top/right/bottom/left  |  top |
+| type     | tipo de Pestaña | string   | card/border-card  |     —    |
+| closable  | si la Pestaña es cerrable | boolean   | — |  false  |
+| addable  | si la Pestaña es añadible   | boolean   | — |  false  |
+| editable  | si la Pestaña es añadible y cerrable | boolean   | — |  false  |
+| value  | nombre de la pestaña seleccionada  | string   |  —  |  nombre de la primer pestaña |
+| tab-position  | posición de tabulación | string   |  top/right/bottom/left  |  top |
 
-### Tabs Events
-| Event Name | Description | Parameters |
+### Eventos de Pestañas
+| Nombre de Evento | Descripción | Parámetros |
 |---------- |-------- |---------- |
-| tab-click  | triggers when a tab is clicked | clicked tab |
-| tab-remove  | triggers when tab-remove button is clicked | name of the removed tab |
-| tab-add  | triggers when tab-add button is clicked  | — |
-| edit  | triggers when tab-add button or tab-remove is clicked | (targetName, action) |
+| tab-click  | se lanza cuando se hace click a una pestaña | pestaña clickeada |
+| tab-remove  | se lanza cuando se hace click al botón tab-remove | nombre de la pestaña removida |
+| tab-add  | se lanza cuando se hace click al botón tab-add | — |
+| edit  | se lanza cuando los botones de tab-add y/o tab-remove son clickeados | (targetName, action) |
 
-### Tab-pane Attributes
-| Attribute      | Description          | Type      | Accepted Values       | Default  |
+### Attributos del Tab-pane
+| Atributo      | Descripción          | Tipo      | Valores Aceptados      | Default  |
 |---------- |-------- |---------- |-------------  |-------- |
-| label     | title of the tab   | string   | — |    —     |
-| disabled | whether Tab is disabled | boolean | — | false |
-| name      | identifier corresponding to the activeName of Tabs, representing the alias of the tab-pane | string | — | ordinal number of the tab-pane in the sequence, e.g. the first tab-pane is '1' |
+| label     | título de la pestaña   | string   | — |    —     |
+| disabled  | si la Tabulación está deshabilitada | boolean | — | false |
+| name      | identificador correspondiente al activeName de la Tabulación, representando el alias del tab-pane | string | — | número ordinal del tab-pane en la secuencia, p.ej el primer tab-pane de pestañas es '1' |
 | closable  | whether Tab is closable | boolean   | — |  false  |
diff --git a/examples/docs/es/time-picker.md b/examples/docs/es/time-picker.md
index 7ea7106fa..4f5aa1b51 100644
--- a/examples/docs/es/time-picker.md
+++ b/examples/docs/es/time-picker.md
@@ -6,15 +6,15 @@
   }
 </style>
 
-## TimePicker
+## Selector de Tiempo
 
-Use Time Picker for time input.
+Usar el Selector de Tiempo para entradas de tiempo.
 
-### Fixed time picker
+### Selector de tiempo fijo
 
-Provide a list of fixed time for users to choose.
+Provee una lista de tiempo fijo para que los usuarios escogan.
 
-:::demo Use `el-time-select` label, then assign start time, end time and time step with `start`, `end` and `step`.
+:::demo Usar el tag `el-time-select`, se pueden asignar tiempo de inicio, tiempo de finalización y salto de tiempo con `start`, `end` y `step`.
 ```html
 <el-time-select
   v-model="value1"
@@ -38,11 +38,11 @@ Provide a list of fixed time for users to choose.
 ```
 :::
 
-### Arbitrary time picker
+### Selector de tiempo arbitrario
 
-Can pick an arbitrary time.
+Un tiempo arbitrario puede ser escogido.
 
-:::demo Use `el-time-picker` label, and you can limit the time range by specifying `selectableRange`. By default, you can scroll the mouse wheel to pick time, alternatively you can use the control arrows when the `arrow-control` attribute is set.
+:::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.
 
 ```html
 <template>
@@ -76,9 +76,9 @@ Can pick an arbitrary time.
 ```
 :::
 
-### Fixed time range
+### Rango de tiempo fijo
 
-If start time is picked at first, then the end time will change accordingly.
+Si se escoge el tiempo de inicio al principio, el tiempo de finalización cambiará respectivamente.
 
 :::demo
 ```html
@@ -117,11 +117,11 @@ If start time is picked at first, then the end time will change accordingly.
 ```
 :::
 
-### Arbitrary time range
+### Rango de tiempo arbitrario
 
-Can pick an arbitrary time range.
+Es posible escoger un rango de tiempo arbitrario.
 
-:::demo We can pick a time range by adding an `is-range` attribute. Also, `arrow-control` is supported in range mode.
+:::demo Es posible seleccionar un rango de tiempo al añadir el atributo `is-range`. También, `arrow-control` es soportado en modo de rango.
 ```html
 <template>
   <el-time-picker
@@ -170,47 +170,47 @@ Can pick an arbitrary time range.
   }
 </script>
 
-### Attributes
-| Attribute      | Description          | Type      | Accepted Values       | Default  |
+### Atributos
+| Atributo      | Descripción          | Tipo      | Valores Aceptados      | Default  |
 |---------- |-------------- |---------- |--------------------------------  |-------- |
-| readonly | whether DatePicker is read only | boolean | — | false |
-| disabled | whether DatePicker is disabled | boolean | — | false |
-| editable | whether the input is editable | boolean | — | true |
-| clearable | whether to show clear button | boolean | — | true |
-| size | size of Input | string | medium / small / mini | — |
-| placeholder | placeholder in non-range mode | string | — | — |
-| start-placeholder | placeholder for the start time in range mode | string | — | — |
-| end-placeholder | placeholder for the end time in range mode | string | — | — |
-| is-range | whether to pick a time range, only works with `<el-time-picker>` | boolean | — | false |
-| arrow-control | whether to pick time using arrow buttons, only works with `<el-time-picker>` | boolean | — | false |
-| value | value of the picker | Date for Time Picker, and string for Time Select | hour `HH`, minute `mm`, second `ss` | HH:mm:ss |
-| align | alignment | left / center / right | left |
-| popper-class | custom class name for TimePicker's dropdown | string | — | — |
-| picker-options | additional options, check the table below | object | — | {} |
-| range-separator | range separator | string | - | '-' |
-| default-value | optional, default date of the calendar | Date for TimePicker, string for TimeSelect | anything accepted by `new Date()` for TimePicker, selectable value for TimeSelect | — |
-| value-format | optional, only for TimePicker, format of bounded value | string | hour `HH`, minute `mm`, second `ss` | — |
-| name | same as `name` in native input | string | — | — |
+| readonly | saber si el Selector de Fecha está en modo de sólo lectura | boolean | — | false |
+| disabled | saber si el Selector de Fecha se encuentra deshabilitado | boolean | — | false |
+| editable | saber si el input puede ser editado | boolean | — | true |
+| clearable | saber si mostrar el botón de borrado | boolean | — | true |
+| size | tamaño del input | string | medium / small / mini | — |
+| placeholder | placeholder en un modo fuera de rango | string | — | — |
+| start-placeholder | placeholder para el tiempo de inicio en modo de rango | string | — | — |
+| end-placeholder | placeholder para el tiempo de finalización en modo de rango | string | — | — |
+| is-range | saber si es posible escoger un rango de tiempo, solo funciona con `<el-time-picker>` | boolean | — | false |
+| arrow-control | saber si es posible escoger el tiempo usando los botones de flecha, solo funciona con `<el-time-picker>` | boolean | — | false |
+| value | valor del selector  | Fecha para Selector de Tiempo, string para el Seleccionador de Tiempo | hour `HH`, minute `mm`, second `ss` | HH:mm:ss |
+| align | alineación | left / center / right | left |
+| popper-class | nombre de clase personalizada para el dropdown del Selector de Tiempo | string | — | — |
+| picker-options | opciones adicionales, revisar la tabla posterior | object | — | {} |
+| range-separator | separador de rango | string | - | '-' |
+| default-value | opcional, fecha por defecto del calendario | Fecha para Selector de Tiempo, string para el Seleccionador de Tiempo | cualquier cosa aceptada por `new Date()` para el Selector de Tiempo,  Selector de Tiempo, valor seleccionable para el Seleccionador de Tiempo | — |
+| value-format | opcional, solo para Selector de Tiempo, formato de valor limitado | string | hour `HH`, minute `mm`, second `ss` | — |
+| name | así como `name` en input nativo | string | — | — |
 
-### Time Select Options
-| Attribute      | Description          | Type      | Accepted Values       | Default  |
+### Opciones para Seleccionador de Tiempo
+| Atributo      | Descripción          | Tipo      | Valores Aceptados       | Default  |
 |---------- |-------------- |---------- |--------------------------------  |-------- |
-| start | start time | string | — | 09:00 |
-| end | end time | string | — | 18:00 |
-| step | time step | string | — | 00:30 |
-| minTime | minimum time, any time before this time will be disabled | string | — | 00:00 |
-| maxTime | maximum time, any time after this time will be disabled | string | — | — |
+| start | tiempo de inicio | string | — | 09:00 |
+| end | tiempo de finalización | string | — | 18:00 |
+| step | salto de tiempo | string | — | 00:30 |
+| minTime | tiempo mínimo, cualquier tiempo antes de éste será deshabilitado | string | — | 00:00 |
+| maxTime | tiempo máximo, cualquier tiempo después de éste será deshabilitado | string | — | — |
 
-### Time Picker Options
-| Attribute      | Description          | Type      | Accepted Values       | Default  |
+### Opciones para Selector de Tiempo
+| Atributo      | Descripción          | Tipo      | Valores Aceptados       | Default  |
 |---------- |-------------- |---------- |--------------------------------  |-------- |
-| selectableRange | available time range, e.g.`'18:30:00 - 20:30:00'`or`['09:30:00 - 12:00:00', '14:30:00 - 18:30:00']` | string / array | — | — |
-| format | format of the picker | string | hour `HH`, minute `mm`, second `ss` | HH:mm:ss |
+| selectableRange | rango de tiempo disponible p.ej. `'18:30:00 - 20:30:00'`ó`['09:30:00 - 12:00:00', '14:30:00 - 18:30:00']` | string / array | — | — |
+| format | formato para el selector | string | hour `HH`, minute `mm`, second `ss` | HH:mm:ss |
 
 
-### Events
-| Event Name | Description | Parameters |
+### Eventos
+| Nombre de Evento | Descripción | Parámetros |
 |---------|--------|---------|
-| change | triggers when user confirms the value | component's bounded value |
-| blur | triggers when Input blurs | (event: Event) |
-| focus | triggers when Input focuses | (event: Event) |
+| change | se lanza cuando el usuario confirma el valor | valor limitado del componente |
+| blur | se lanza cuando el input se difumina | (event: Event) |
+| focus | se lanza cuando el input se enfoca | (event: Event) |
diff --git a/examples/docs/es/tooltip.md b/examples/docs/es/tooltip.md
index 272e57c0e..a8a80e3e3 100644
--- a/examples/docs/es/tooltip.md
+++ b/examples/docs/es/tooltip.md
@@ -57,13 +57,13 @@
 
 ## Tooltip
 
-Display prompt information for mouse hover.
+Mostrar aviso de información para el hover del mouse.
 
-### Basic usage
+### Uso básico
 
-Tooltip has 9 placements.
+Tooltip tiene 9 colocaciones.
 
-:::demo Use attribute `content` to set the display content when hover. The attribute `placement` determines the position of the tooltip. Its value is `[orientation]-[alignment]` with four orientations `top`, `left`, `right`, `bottom` and three alignments `start`, `end`, `null`, and the default alignment is null. Take `placement="left-end"` for example, Tooltip will display on the left of the element which you are hovering and the bottom of the tooltip aligns with the bottom of the element.
+:::demo Usar 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.
 ```html
 <div class="box">
   <div class="top">
@@ -154,11 +154,11 @@ Tooltip has 9 placements.
 :::
 
 
-### Theme
+### Tema
 
-Tooltip has two themes: `dark` and `light`。
+Tooltip tiene dos temas: `dark` and `light`.
 
-:::demo Set `effect` to modify theme, and the default value is `dark`.
+:::demo Establecer `effect` para modificar el tema, el valor por defecto es `dark`.
 ```html
 <el-tooltip content="Top center" placement="top">
   <el-button>Dark</el-button>
@@ -169,11 +169,11 @@ Tooltip has two themes: `dark` and `light`。
 ```
 :::
 
-### More Content
+### Más Contenido
 
-Display multiple lines of text and set their format.
+Despliegue múltiples líneas de texto y establezca su formato.
 
-:::demo Override attribute `content` of `el-tooltip` by adding a slot named `content`.
+:::demo Sobre-escribir el atributo `content` del `el-tooltip` al añadir un slot llamado `content`.
 ```html
 <el-tooltip placement="top">
   <div slot="content">multiple lines<br/>second line</div>
@@ -182,15 +182,15 @@ Display multiple lines of text and set their format.
 ```
 :::
 
-### Advanced usage
+### Uso Avanzado
 
-In addition to basic usages, there are some attributes that allow you to customize your own:
+Adicional a los usos básicos, existen algunos atributos que permiten la personalización: 
 
-`transition` attribute allows you to customize the animation in which the tooltip shows or hides, and the default value is el-fade-in-linear.
+el atributo `transition` permite personalizar la animación con la que el Tooltip se muestra o se esconda, el valor por defecto es `is el-fade-in-linear`.
 
-`disabled` attribute allows you to disable `tooltip`. You just need set it to `true`.
+el atributo `disabled` permite deshabilitar `tooltip`. Solo es necesario definirlo como `true`.
 
-In fact, Tooltip is an extension based on [Vue-popper](https://github.com/element-component/vue-popper), you can use any attribute that are allowed in Vue-popper.
+De hecho, Tooltip es una extension basada en [Vue-popper](https://github.com/element-component/vue-popper), es posible utilizar cualquier atributo permitido en Vue-popper.
 
 :::demo
 ```html
@@ -217,26 +217,27 @@ In fact, Tooltip is an extension based on [Vue-popper](https://github.com/elemen
 
 
 :::tip
-The `router-link` component is not supported in tooltip, please use `vm.$router.push`.
+El componente `router-link` no es soportado por Tooltip, favor de usar `vm.$router.push`.
 
-Disabled form elements are not supported for Tooltip, more information can be found at [MDN](https://developer.mozilla.org/en-US/docs/Web/Events/mouseenter). You need to wrap the disabled form element with a container element for Tooltip to work.
+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.
 :::
 
 
-### Attributes
-| Attribute      | Description          | Type      | Accepted Values       | Default  |
+### Atributos
+| Atributo      | Descripción          | Tipo      | Valores Aceptados      | Default  |
 |----------------|---------|-----------|-------------|--------|
-|  effect   |  Tooltip theme  | string   | dark/light  | dark  |
-|  content  | display content, can be overridden by `slot#content` | String   | — | — |
-|  placement | position of Tooltip   | string    |  top/top-start/top-end/bottom/bottom-start/bottom-end/left/left-start/left-end/right/right-start/right-end |  bottom |
-|  value(v-model) | visibility of Tooltip | boolean           | — |  false |
-|  disabled       |  whether Tooltip is disabled  | boolean    | — |  false |
-|  offset        |  offset of the Tooltip   | number    | — |  0 |
-|  transition     |  animation name | string             | — | el-fade-in-linear |
-|  visible-arrow   |  whether an arrow is displayed. For more information, check [Vue-popper](https://github.com/element-component/vue-popper) page | boolean | — | true |
-|  popper-options        | [popper.js](https://popper.js.org/documentation.html) parameters | Object            | refer to [popper.js](https://popper.js.org/documentation.html) doc | `{ boundariesElement: 'body', gpuAcceleration: false }` |
-| open-delay | delay of appearance, in millisecond | number | — | 0 |
-| manual | whether to control Tooltip manually. `mouseenter` and `mouseleave` won't have effects if set to `true` | boolean | — | false |
-|  popper-class  |  custom class name for Tooltip's popper | string | — | — |
-| enterable | whether the mouse can enter the tooltip | Boolean | — | true |
-| hide-after | timeout in milliseconds to hide tooltip | number | — | 0 |
+|  effect   |  tema del Tooltip  | string   | dark/light  | dark  |
+|  content  | contenido a mostrar, puede ser sobre-escrito por `slot#content` | string   | — | — |
+|  placement | posición del Tooltip  | string    |  top/top-start/top-end/bottom/bottom-start/bottom-end/left/left-start/left-end/right/right-start/right-end |  bottom |
+|  value(v-model) | visibilidad del Tooltip | boolean           | — |  false |
+|  disabled       |  saber si el Tooltip se encuentra deshabilitado | boolean    | — |  false |
+|  offset        |  offset del Tooltip   | number    | — |  0 |
+|  transition     |  nombre de animación | string             | — | el-fade-in-linear |
+|  visible-arrow   |  saber 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 |
+| manual | saber 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 | saber si el mouse puede entrar al Tooltip | Boolean | — | true |
+| hide-after | tiempo a esperar en milisegundos para esconder el Tooltip | number | — | 0 |

From 403e575c62fe84cbb218c67761cc25eabcc9b659 Mon Sep 17 00:00:00 2001
From: Javier Diaz <coderdiaz@gmail.com>
Date: Sun, 12 Nov 2017 21:59:14 -0600
Subject: [PATCH 40/48] [table] Spanish translation

---
 examples/docs/es/table.md | 475 +++++++++++++++++++-------------------
 1 file changed, 240 insertions(+), 235 deletions(-)

diff --git a/examples/docs/es/table.md b/examples/docs/es/table.md
index b2bfd2031..d26d1fdb4 100644
--- a/examples/docs/es/table.md
+++ b/examples/docs/es/table.md
@@ -334,15 +334,15 @@
   }
 </style>
 
-## Table
+## Tablas
 
-Display multiple data with similar format. You can sort, filter, compare your data in a table.
+Visualiza múltiples datos con un formato en particular. Podrás ordenar, filtrar y comparar datos en una tabla.
 
-### Basic table
+### Tabla básica
 
-Basic table is just for data display.
+La tabla básica es solo para mostrar datos.
 
-:::demo After setting attribute `data` of `el-table` with an object array, you can use `prop` (corresponding to a key of the object in `data` array) in `el-table-column` to insert data to table columns, and set the attribute `label` to define the column name. You can also use the attribute `width` to define the width of columns.
+:::demo Después de haber establecido el atributo `data` de `el-table` con un arreglo de objetos, puedes usar la propiedad `prop` (el correspondiente a la clave de un objeto dentro del arreglo `data`) en `el-table-column` para insertar datos a las columnas de la tabla, y establece el atributo `label` para definir el nombre de la columna. También puedes usar el atributo `width` para establecer el ancho de las columnas.
 
 ```html
   <template>
@@ -351,17 +351,17 @@ Basic table is just for data display.
       style="width: 100%">
       <el-table-column
         prop="date"
-        label="Date"
+        label="Fecha"
         width="180">
       </el-table-column>
       <el-table-column
         prop="name"
-        label="Name"
+        label="Nombre"
         width="180">
       </el-table-column>
       <el-table-column
         prop="address"
-        label="Address">
+        label="Dirección">
       </el-table-column>
     </el-table>
   </template>
@@ -394,11 +394,11 @@ Basic table is just for data display.
 ```
 :::
 
-### Striped Table
+### Tabla con rayas
 
-Striped table makes it easier to distinguish different rows.
+La tabla con rayas hace más fácil distinguir filas diferentes.
 
-:::demo Attribute `stripe` accepts a `Boolean`. If `true`, table will be striped.
+:::demo El atributo `stripe` también acepta un `Boolean`. Si se encuentra `true`, la tabla será rayada.
 ```html
 <template>
   <el-table
@@ -407,17 +407,17 @@ Striped table makes it easier to distinguish different rows.
     style="width: 100%">
     <el-table-column
       prop="date"
-      label="Date"
+      label="Fecha"
       width="180">
     </el-table-column>
     <el-table-column
       prop="name"
-      label="Name"
+      label="Nombre"
       width="180">
     </el-table-column>
     <el-table-column
       prop="address"
-      label="Address">
+      label="Dirección">
     </el-table-column>
   </el-table>
 </template>
@@ -450,9 +450,9 @@ Striped table makes it easier to distinguish different rows.
 ```
 :::
 
-### Table with border
+### Tabla con bordes
 
-:::demo By default, Table has no vertical border. If you need it, you can set attribute `border` to `true`.
+:::demo Por defecto, la tabla no tiene bordes verticales. Si lo necesitas, puedes establecer el atributo `border` a `true`.
 
 ```html
 <template>
@@ -462,17 +462,17 @@ Striped table makes it easier to distinguish different rows.
     style="width: 100%">
     <el-table-column
       prop="date"
-      label="Date"
+      label="Fecha"
       width="180">
     </el-table-column>
     <el-table-column
       prop="name"
-      label="Name"
+      label="Nombre"
       width="180">
     </el-table-column>
     <el-table-column
       prop="address"
-      label="Address">
+      label="Dirección">
     </el-table-column>
   </el-table>
 </template>
@@ -505,11 +505,11 @@ Striped table makes it easier to distinguish different rows.
 ```
 :::
 
-### Table with status
+### Tabla con estados
 
-You can highlight your table content to distinguish between "success, information, warning, danger" and other states.
+Tu puedes destacar el contenido de la tabla para distinguir entre "success, information, warning, danger" y otros estados.
 
-:::demo Use `row-class-name` in `el-table` to add custom classes to a certain row. Then you can style it with custom classes.
+:::demo Utiliza `row-class-name` en `el-table` para agregar clases personalizadas a una fila en específico. Y entonces, podrás darle diseño con estas clases.
 ```html
 <template>
   <el-table
@@ -518,17 +518,17 @@ You can highlight your table content to distinguish between "success, informatio
     :row-class-name="tableRowClassName">
     <el-table-column
       prop="date"
-      label="Date"
+      label="Fecha"
       width="180">
     </el-table-column>
     <el-table-column
       prop="name"
-      label="Name"
+      label="Nombre"
       width="180">
     </el-table-column>
     <el-table-column
       prop="address"
-      label="Address">
+      label="Dirección">
     </el-table-column>
   </el-table>
 </template>
@@ -581,11 +581,11 @@ You can highlight your table content to distinguish between "success, informatio
 ```
 :::
 
-### Table with fixed header
+### Tabla con cabecera fija
 
-When there are too many rows, you can use a fixed header.
+Cuando esta tiene demasiadas filas, puedes utilizar una cabecera fija.
 
-:::demo By setting the attribute `height` of `el-table`, you can fix the table header without any other codes.
+:::demo Al configurar el atributo `height` de `el-table`, puedes fijar la cabecera de la tabla sin agregar otro código.
 ```html
 <template>
   <el-table
@@ -594,17 +594,17 @@ When there are too many rows, you can use a fixed header.
     style="width: 100%">
     <el-table-column
       prop="date"
-      label="Date"
+      label="Fecha"
       width="180">
     </el-table-column>
     <el-table-column
       prop="name"
-      label="Name"
+      label="Nombre"
       width="180">
     </el-table-column>
     <el-table-column
       prop="address"
-      label="Address">
+      label="Dirección">
     </el-table-column>
   </el-table>
 </template>
@@ -649,11 +649,11 @@ When there are too many rows, you can use a fixed header.
 ```
 :::
 
-### Table with fixed column
+### Tabla con columnas fijas
 
-When there are too many columns, you can fix some of them.
+Cuando se tienen demasiadas columnas, puedes fijar alguna de estas.
 
-:::demo Attribute `fixed` is used in `el-table-column`, it accepts a `Boolean`. If `true`, the column will be fixed at left. It also accepts two string literals: 'left' and 'right', both indicating that the column will be fixed at corresponding direction.
+:::demo El atributo `fixed` es utilizado en `el-table-column`, este acepta un `Boolean`. Si es `true`, la columna será fijada a la izquierda. También acepta dos tipos: `left` y `right`, ambos indican donde debe ser fijada la columna.
 ```html
 <template>
   <el-table
@@ -662,41 +662,41 @@ When there are too many columns, you can fix some of them.
     <el-table-column
       fixed
       prop="date"
-      label="Date"
+      label="Fecha"
       width="150">
     </el-table-column>
     <el-table-column
       prop="name"
-      label="Name"
+      label="Nombre"
       width="120">
     </el-table-column>
     <el-table-column
       prop="state"
-      label="State"
+      label="Estado"
       width="120">
     </el-table-column>
     <el-table-column
       prop="city"
-      label="City"
+      label="Ciudad"
       width="120">
     </el-table-column>
     <el-table-column
       prop="address"
-      label="Address"
+      label="Dirección"
       width="300">
     </el-table-column>
     <el-table-column
       prop="zip"
-      label="Zip"
+      label="Código postal"
       width="120">
     </el-table-column>
     <el-table-column
       fixed="right"
-      label="Operations"
+      label="Operaciones"
       width="120">
       <template slot-scope="scope">
-        <el-button @click="handleClick" type="text" size="small">Detail</el-button>
-        <el-button type="text" size="small">Edit</el-button>
+        <el-button @click="handleClick" type="text" size="small">Detalle</el-button>
+        <el-button type="text" size="small">Editar</el-button>
       </template>
     </el-table-column>
   </el-table>
@@ -751,11 +751,11 @@ When there are too many columns, you can fix some of them.
 ```
 :::
 
-### Table with fixed columns and header
+### Tabla con columnas y cabecera fija.
 
-When you have huge chunks of data to put in a table, you can fix the header and columns at the same time.
+Cuando tienes grandes cantidades de datos para colocar en una tabla, tu puedes fijar la cabecera y columnas al mismo tiempo.
 
-:::demo  Fix columns and header at the same time by combining the above two examples.
+:::demo  Fije las columnas y cabecera al mismo tiempo combinando los dos ejemeplo anteriores.
 ```html
 <template>
   <el-table
@@ -765,32 +765,32 @@ When you have huge chunks of data to put in a table, you can fix the header and
     <el-table-column
       fixed
       prop="date"
-      label="Date"
+      label="Fecha"
       width="150">
     </el-table-column>
     <el-table-column
       prop="name"
-      label="Name"
+      label="Nombre"
       width="120">
     </el-table-column>
     <el-table-column
       prop="state"
-      label="State"
+      label="Estado"
       width="120">
     </el-table-column>
     <el-table-column
       prop="city"
-      label="City"
+      label="Ciudad"
       width="120">
     </el-table-column>
     <el-table-column
       prop="address"
-      label="Address"
+      label="Dirección"
       width="300">
     </el-table-column>
     <el-table-column
       prop="zip"
-      label="Zip"
+      label="Código postal"
       width="120">
     </el-table-column>
   </el-table>
@@ -857,11 +857,11 @@ When you have huge chunks of data to put in a table, you can fix the header and
 ```
 :::
 
-### Fluid-height Table with fixed header (and columns)
+### Altura de tabla con cabecera fija (y columnas
 
-When the the data is dynamically changed, you might want the table to have a maximum height rather than a fixed height and to show the scroll bar if needed.
+Cuando los datos se modifican dinámicamente, es posible que necesites que la tabla tenga una altura máxima en lugar de una altura fija, y además, que se muestre la barra de desplazamiento si es necesario.
 
-:::demo  By setting the attribute `max-height` of `el-table`, you can fix the table header. The table body scrolls only if the height of the rows exceeds the max height value.
+:::demo Al configurar el atributo `max-height` de `el-table`, tu puedes fijar la cabecera de la tabla. La barra de desplazamiento únicamente se mostrará si la altura sobrepasa el valor de la altura máxima.
 ```html
 <template>
   <el-table
@@ -871,44 +871,44 @@ When the the data is dynamically changed, you might want the table to have a max
     <el-table-column
       fixed
       prop="date"
-      label="Date"
+      label="Fecha"
       width="150">
     </el-table-column>
     <el-table-column
       prop="name"
-      label="Name"
+      label="Nombre"
       width="120">
     </el-table-column>
     <el-table-column
       prop="state"
-      label="State"
+      label="Estado"
       width="120">
     </el-table-column>
     <el-table-column
       prop="city"
-      label="City"
+      label="Ciudad"
       width="120">
     </el-table-column>
     <el-table-column
       prop="address"
-      label="Address"
+      label="Dirección"
       width="300">
     </el-table-column>
     <el-table-column
       prop="zip"
-      label="Zip"
+      label="Código postal"
       width="120">
     </el-table-column>
     <el-table-column
       fixed="right"
-      label="Operations"
+      label="Operaciones"
       width="120">
       <template slot-scope="scope">
         <el-button
           @click.native.prevent="deleteRow(scope.$index, tableData4)"
           type="text"
           size="small">
-          Remove
+          Eliminar
         </el-button>
       </template>
     </el-table-column>
@@ -981,11 +981,11 @@ When the the data is dynamically changed, you might want the table to have a max
 ```
 :::
 
-### Grouping table head
+### Agrupando cabeceras de la tabla
 
-When the data structure is complex, you can use group header to show the data hierarchy.
+Cuando la estructura de datos es compleja, tu puedes hacer uso de cabeceras agrupadas para mostrar datos por jerarquía.
 
-:::demo Only need to place el-table-column inside a el-table-column, you can achieve group header.
+:::demo Solo necesitas colocar `el-table-column` dentro de un `el-table-column`, de esta forma lograrás agruparlas.
 ```html
 <template>
   <el-table
@@ -993,34 +993,34 @@ When the data structure is complex, you can use group header to show the data hi
     style="width: 100%">
     <el-table-column
       prop="date"
-      label="Date"
+      label="Fecha"
       width="150">
     </el-table-column>
-    <el-table-column label="Delivery Info">
+    <el-table-column label="Información de entrega">
       <el-table-column
         prop="name"
-        label="Name"
+        label="Nombre"
         width="120">
       </el-table-column>
-      <el-table-column label="Address Info">
+      <el-table-column label="Información de dirección">
         <el-table-column
           prop="state"
-          label="State"
+          label="Estado"
           width="120">
         </el-table-column>
         <el-table-column
           prop="city"
-          label="City"
+          label="Ciudad"
           width="120">
         </el-table-column>
         <el-table-column
           prop="address"
-          label="Address"
+          label="Dirección"
           width="300">
         </el-table-column>
         <el-table-column
           prop="zip"
-          label="Zip"
+          label="Código postal"
           width="120">
         </el-table-column>
       </el-table-column>
@@ -1089,11 +1089,11 @@ When the data structure is complex, you can use group header to show the data hi
 ```
 :::
 
-### Single select
+### Selección única
 
-Single row selection is supported.
+La selección de una fila esta soportada.
 
-:::demo Table supports single row selection. You can activate it by adding the `highlight-current-row` attribute. An event called `current-change` will be triggered when row selection changes, and its parameters are the rows after and before this change: `currentRow` and `oldCurrentRow`. If you need to display row index, you can add a new `el-table-column` with its `type` attribute assigned to `index`, and you will see the index starting from 1.
+:::demo La tabla permite la selección de una sola fila. Puede activarlo agregando el atributo `highlight-current-row`. Un evento llamado `current-change` será disparado cuando la selección de la fila cambie, sus parámetros son la fila antes y después de que ocurre el cambio: `currentRow` y `oldCurrentRow`. Si necesitas mostrar el índice de la fila, puedes agregar un nuevo `el-table-column` con el atributo `type` asignado al `index` y podrás ver el índice iniciando desde 1.
 ```html
 <template>
   <el-table
@@ -1108,22 +1108,22 @@ Single row selection is supported.
     </el-table-column>
     <el-table-column
       property="date"
-      label="Date"
+      label="Fecha"
       width="120">
     </el-table-column>
     <el-table-column
       property="name"
-      label="Name"
+      label="Nombre"
       width="120">
     </el-table-column>
     <el-table-column
       property="address"
-      label="Address">
+      label="Dirección">
     </el-table-column>
   </el-table>
   <div style="margin-top: 20px">
-    <el-button @click="setCurrent(tableData[1])">Select second row</el-button>
-    <el-button @click="setCurrent()">Clear selection</el-button>
+    <el-button @click="setCurrent(tableData[1])">Seleccionar segunda fila</el-button>
+    <el-button @click="setCurrent()">Limpiar selección</el-button>
   </div>
 </template>
 
@@ -1165,11 +1165,11 @@ Single row selection is supported.
 ```
 :::
 
-### Multiple select
+### Selección multiple
 
-You can also select multiple rows.
+También puedes seleccionar múltiples filas.
 
-:::demo Activating multiple selection is easy: simply add an `el-table-column` with its `type` set to `selection`. Apart from multiple selection, this example also uses `show-overflow-tooltip`: by default, if the content is too long, it will break into multiple lines. If you want to keep it in one line, use attribute `show-overflow-tooltip`, which accepts a `Boolean` value. When set `true`, the extra content will show in tooltip when hover on the cell.
+:::demo Activar la selección múltiple es sencillo: Solo debes agregar a `el-table-column` con su `type` establecido en `selection`. Además de la selección múltiple, este ejemplo también utiliza `show-overflow-tooltip`: por defecto, si el contenido es demasiado largo, este permite córtalo dentro de múltiples líneas. Si lo que buscas es mantenerte en una línea, utiliza el atributo `show-overflow-tooltip`, que acepta un valor `Boolean`. Cuando este está establecido en `true`, el contenido extra puede mostrar un _tooltip_ cuando se hace _hover_ sobre la celda.
 ```html
 <template>
   <el-table
@@ -1182,24 +1182,24 @@ You can also select multiple rows.
       width="55">
     </el-table-column>
     <el-table-column
-      label="Date"
+      label="Fecha"
       width="120">
       <template slot-scope="scope">{{ scope.row.date }}</template>
     </el-table-column>
     <el-table-column
       property="name"
-      label="Name"
+      label="Nombre"
       width="120">
     </el-table-column>
     <el-table-column
       property="address"
-      label="Address"
+      label="Dirección"
       show-overflow-tooltip>
     </el-table-column>
   </el-table>
   <div style="margin-top: 20px">
-    <el-button @click="toggleSelection([tableData3[1], tableData3[2]])">Toggle selection status of second and third rows</el-button>
-    <el-button @click="toggleSelection()">Clear selection</el-button>
+    <el-button @click="toggleSelection([tableData3[1], tableData3[2]])">Cambia el estado de selección de la segunda y tercera fila.</el-button>
+    <el-button @click="toggleSelection()">Limpiar selección</el-button>
   </div>
 </template>
 
@@ -1259,11 +1259,11 @@ You can also select multiple rows.
 ```
 :::
 
-### Sorting
+### Ordenamiento
 
-Sort the data to find or compare data quickly.
+Ordena los datos para encontrar o comparar información rápidamente.
 
-:::demo Set attribute `sortable` in a certain column to sort the data based on this column. It accepts `Boolean` with a default value `false`. Set table attribute `default-sort` to determine default sort column and order. To apply your own sorting rules, use `sort-method` or `sort-by`. If you need remote sorting from backend, set `sortable` to `custom`, and listen to the `sort-change` event on Table. In the event handler, you have access to the sorting column and sorting order so that you can fetch sorted table data from API. In this example we use another attribute named `formatter` to format the value of certain columns. It accepts a function which has two parameters: `row` and `column`. You can handle it according to your own needs.
+:::demo Establece el atributo `sortable` para ordenar los datos de una columna. Este acepta un `Boolean` con un valor por defecto `false`. Establece el atributo `default-sort` para determinar la columna y orden por defecto. Para aplicar tus propias reglas de ordenamiento, utiliza `sort-method` o `sort-by`. Si lo que necesitas es ordenar de forma remota desde backend, establece `sortable` a `custom`, y escucha el evento `sort-change` de la tabla. Al dispararse el evento, tendrás acceso a la columna ordenada y orden para que puedas obtener los datos de la tabla ordenada desde tu API. En este ejemplo utilizamos otro atributo llamado `formatter` para darle un formato al valor de ciertas columnas. Este acepta una función que tiene dos parámetros: `row` y `column`. Puedes disparar este de acuerdo a tus propias necesidades.
 ```html
 <template>
   <el-table
@@ -1272,18 +1272,18 @@ Sort the data to find or compare data quickly.
     style="width: 100%">
     <el-table-column
       prop="date"
-      label="Date"
+      label="Fecha"
       sortable
       width="180">
     </el-table-column>
     <el-table-column
       prop="name"
-      label="Name"
+      label="Nombre"
       width="180">
     </el-table-column>
     <el-table-column
       prop="address"
-      label="Address"
+      label="Dirección"
       :formatter="formatter">
     </el-table-column>
   </el-table>
@@ -1322,11 +1322,11 @@ Sort the data to find or compare data quickly.
 ```
 :::
 
-### Filter
+### Filtros
 
-Filter the table to find desired data.
+Filtra la tabla para encontrar la información que necesitas.
 
-:::demo Set attribute `filters` and `filter-method` in `el-table-column` makes this column filterable. `filters` is an array, and `filter-method` is a function deciding which rows are displayed. It has two parameters: `value` and `row`.
+:::demo Establece el atributo `filters` y `filter-method` en `el-table-column` haciendo esta columna filtrable. `filters` es un arreglo, y `filter-method` es una función que decide que filas se muestra. Esta tiene dos parámetros: `value` y `row`.
 ```html
 <template>
   <el-table
@@ -1334,23 +1334,23 @@ Filter the table to find desired data.
     style="width: 100%">
     <el-table-column
       prop="date"
-      label="Date"
+      label="Fecha"
       sortable
       width="180">
     </el-table-column>
     <el-table-column
       prop="name"
-      label="Name"
+      label="Nombre"
       width="180">
     </el-table-column>
     <el-table-column
       prop="address"
-      label="Address"
+      label="Dirección"
       :formatter="formatter">
     </el-table-column>
     <el-table-column
       prop="tag"
-      label="Tag"
+      label="Etiqueta"
       width="100"
       :filters="[{ text: 'Home', value: 'Home' }, { text: 'Office', value: 'Office' }]"
       :filter-method="filterTag"
@@ -1404,17 +1404,18 @@ Filter the table to find desired data.
 ```
 :::
 
-### Custom column template
+### Plantilla de columna personalizada
 
-Customize table column so it can be integrated with other components.
-:::demo You have access to the following data: row, column, $index and store (state management of Table) by [Scoped slot](https://vuejs.org/v2/guide/components.html#Scoped-Slots). (Scoped slots is supported from `1.1`, `inline-template` still works, but it's not recommended).
+Personaliza la columna de la tabla para que pueda integrarse con otros componentes.
+
+:::demo Tienes acceso a la siguiente informacion: row, column, $index, store (gestor de estados de la tabla) por [Scoped slots](https://vuejs.org/v2/guide/components.html#Scoped-Slots). (Los Scoped Slots son soportados desde `1.1`, `inline-template` todavía funciona, pero no es recomendado).
 ```html
 <template>
   <el-table
     :data="tableData"
     style="width: 100%">
     <el-table-column
-      label="Date"
+      label="Fecha"
       width="180">
       <template slot-scope="scope">
         <i class="el-icon-time"></i>
@@ -1422,7 +1423,7 @@ Customize table column so it can be integrated with other components.
       </template>
     </el-table-column>
     <el-table-column
-      label="Name"
+      label="Nombre"
       width="180">
       <template slot-scope="scope">
         <el-popover trigger="hover" placement="top">
@@ -1435,15 +1436,15 @@ Customize table column so it can be integrated with other components.
       </template>
     </el-table-column>
     <el-table-column
-      label="Operations">
+      label="Operaciones">
       <template slot-scope="scope">
         <el-button
           size="mini"
-          @click="handleEdit(scope.$index, scope.row)">Edit</el-button>
+          @click="handleEdit(scope.$index, scope.row)">Editar</el-button>
         <el-button
           size="mini"
           type="danger"
-          @click="handleDelete(scope.$index, scope.row)">Delete</el-button>
+          @click="handleDelete(scope.$index, scope.row)">Eliminar</el-button>
       </template>
     </el-table-column>
   </el-table>
@@ -1485,10 +1486,11 @@ Customize table column so it can be integrated with other components.
 ```
 :::
 
-### Expandable row
+### Fila expandible
 
-When the row content is too long and you do not want to display the horizontal scroll bar, you can use the expandable row feature.
-:::demo Activate expandable row by adding type="expand" and scoped slot. The template for el-table-column will be rendered as the contents of the expanded row, and you can access the same attributes as when you are using `Scoped slot` in custom column templates.
+Cuando el contenido de la fila es demasiado largo y buscas no mostrar la barra de desplazamiento horizontal, puedes utilizar la caracteristica de fila expandible.
+
+:::demo Puedes activar la fila expandible estableciendo la propiedad `type` a `expand` y Scoped Slots. La plantilla para `el-table-column` se representará como el contenido de la fila expandible, y puedes acceder a algunos atributos cuando estás usando `Scoped Slots` en plantillas de columna personalizadas.
 ```html
 <template>
   <el-table
@@ -1496,18 +1498,18 @@ When the row content is too long and you do not want to display the horizontal s
     style="width: 100%">
     <el-table-column type="expand">
       <template slot-scope="props">
-        <p>State: {{ props.row.state }}</p>
-        <p>City: {{ props.row.city }}</p>
-        <p>Address: {{ props.row.address }}</p>
-        <p>Zip: {{ props.row.zip }}</p>
+        <p>Estado: {{ props.row.state }}</p>
+        <p>Ciudad: {{ props.row.city }}</p>
+        <p>Dirección: {{ props.row.address }}</p>
+        <p>Código postal: {{ props.row.zip }}</p>
       </template>
     </el-table-column>
     <el-table-column
-      label="Date"
+      label="Fecha"
       prop="date">
     </el-table-column>
     <el-table-column
-      label="Name"
+      label="Nombre"
       prop="name">
     </el-table-column>
   </el-table>
@@ -1574,10 +1576,11 @@ When the row content is too long and you do not want to display the horizontal s
 ```
 :::
 
-### Summary row
+### Fila de resumen
 
-For table of numbers, you can add an extra row at the table footer displaying each column's sum.
-:::demo You can add the summary row by setting `show-summary` to `true`. By default, for the summary row, the first column does not sum anything up but always displays 'Sum' (you can configure the displayed text using `sum-text`), while other columns sum every number in that column up and display them. You can of course define your own sum behaviour. To do so, pass a method to `summary-method`, which returns an array, and each element of the returned array will be displayed in the columns of the summary row. The second table of this example is a detailed demo.
+Para una tabla de números, tu puedes agregar una fila extra en el pie de página de la tabla que muestra la suma de cada columna.
+
+:::demo Puedes agregar la fila de resumen configurando `show-summary` a `true`. Por defecto, para la fila de resumen, la primera columna no resume nada, pero siempre muestra la suma (puedes configurar el texto mostrado usando `sum-text`), mientras que otras columnas suman todos los números en esa columna y los muestran. Por supuesto, puedes definir tu propio comportamiento de suma. Para hacerlo, utiliza un método `summary-method`, que devuelve un array, y cada elemento que fue retornado desde el arreglo puede ser mostrado en las columnas del resumen de fila. La segunda tabla de este ejemplo es una demostración detallada.
 ```html
 <template>
   <el-table
@@ -1592,22 +1595,22 @@ For table of numbers, you can add an extra row at the table footer displaying ea
     </el-table-column>
     <el-table-column
       prop="name"
-      label="Name">
+      label="Nombre">
     </el-table-column>
     <el-table-column
       prop="amount1"
       sortable
-      label="Amount 1">
+      label="Monto 1">
     </el-table-column>
     <el-table-column
       prop="amount2"
       sortable
-      label="Amount 2">
+      label="Monto 2">
     </el-table-column>
     <el-table-column
       prop="amount3"
       sortable
-      label="Amount 3">
+      label="Monto 3">
     </el-table-column>
   </el-table>
 
@@ -1625,19 +1628,19 @@ For table of numbers, you can add an extra row at the table footer displaying ea
     </el-table-column>
     <el-table-column
       prop="name"
-      label="Name">
+      label="Nombre">
     </el-table-column>
     <el-table-column
       prop="amount1"
-      label="Cost 1 ($)">
+      label="Costo 1 ($)">
     </el-table-column>
     <el-table-column
       prop="amount2"
-      label="Cost 2 ($)">
+      label="Costo 2 ($)">
     </el-table-column>
     <el-table-column
       prop="amount3"
-      label="Cost 3 ($)">
+      label="Costo 3 ($)">
     </el-table-column>
   </el-table>
 </template>
@@ -1685,7 +1688,7 @@ For table of numbers, you can add an extra row at the table footer displaying ea
         const sums = [];
         columns.forEach((column, index) => {
           if (index === 0) {
-            sums[index] = 'Total Cost';
+            sums[index] = 'Costo total';
             return;
           }
           const values = data.map(item => Number(item[column.property]));
@@ -1711,10 +1714,11 @@ For table of numbers, you can add an extra row at the table footer displaying ea
 ```
 :::
 
-### Rowspan and colspan
+### Fusión de filas y columnas
 
-Configuring rowspan and colspan allows you to merge cells
-:::demo Use the `span-method` attribute to configure rowspan and colspan. It accepts a method, and passes an object to that method including current row `row`, current column `column`, current row index `rowIndex` and current column index `columnIndex`. The method should return an array of two numbers, the first number being `rowspan` and second `colspan`. It can also return an object with `rowsapn` and `colspan` props.
+El configurar _rowspan_ y _colspan_ te permite fusionar celdas.
+
+:::demo Utiliza el atributo `span-method` para configurar rowspan y colspan. Este acepta un método, y pasa un objeto a ese método incluyedo la fila actual `row`, columna actual `column`, índice de fila actual `rowIndex` y índice de columna actual `columnIndex`. El método debe devolver un arreglo de dos números, el primer número siendo `rowspan` y el segundo `colspan`. También puede devolver un objeto con las propiedades `rowspan` y `colspan`.
 
 ```html
 <template>
@@ -1731,22 +1735,22 @@ Configuring rowspan and colspan allows you to merge cells
       </el-table-column>
       <el-table-column
         prop="name"
-        label="Name">
+        label="Nombre">
       </el-table-column>
       <el-table-column
         prop="amount1"
         sortable
-        label="Amount 1">
+        label="Monto 1">
       </el-table-column>
       <el-table-column
         prop="amount2"
         sortable
-        label="Amount 2">
+        label="Monto 2">
       </el-table-column>
       <el-table-column
         prop="amount3"
         sortable
-        label="Amount 3">
+        label="Monto 3">
       </el-table-column>
     </el-table>
 
@@ -1762,19 +1766,19 @@ Configuring rowspan and colspan allows you to merge cells
       </el-table-column>
       <el-table-column
         prop="name"
-        label="Name">
+        label="Nombre">
       </el-table-column>
       <el-table-column
         prop="amount1"
-        label="Amount 1">
+        label="Monto 1">
       </el-table-column>
       <el-table-column
         prop="amount2"
-        label="Amount 2">
+        label="Monto 2">
       </el-table-column>
       <el-table-column
         prop="amount3"
-        label="Amount 3">
+        label="Monto 3">
       </el-table-column>
     </el-table>
   </div>
@@ -1849,10 +1853,11 @@ Configuring rowspan and colspan allows you to merge cells
 ```
 :::
 
-### Custom index
+### Índice personalizado
 
-You can customize row index in `type=index` columns.
-:::demo To customize row indices, use `index` attribute on <el-table-column> with `type=index`. If it is assigned to a number, all indices will have an offset of that number. It also accepts a method with each index (starting from `0`) as parameter, and the returned value will be displayed as index.
+Puedes personalizar el índice de la fila con la propiedad `type=index` de las columnas.
+
+:::demo Para personalizar el índice de la fila, utiliza el atributo `index` en `<el-table-column>` con `type=index`. Si este es asignado a un número, todos los índices tendrá un desplazamiento de ese número. Este también acepta un método con cada índice (iniciando desde 0) como un parámetro, y este devuelve un valor que puedes ser mostrado como índice.
 
 ```html
 <template>
@@ -1865,17 +1870,17 @@ You can customize row index in `type=index` columns.
     </el-table-column>
     <el-table-column
       prop="date"
-      label="Date"
+      label="Fecha"
       width="180">
     </el-table-column>
     <el-table-column
       prop="name"
-      label="Name"
+      label="Nombre"
       width="180">
     </el-table-column>
     <el-table-column
       prop="address"
-      label="Address">
+      label="Dirección">
     </el-table-column>
   </el-table>
 </template>
@@ -1929,99 +1934,99 @@ You can customize row index in `type=index` columns.
 ```
 :::
 
-### Table Attributes
-| Attribute      | Description          | Type      | Accepted Values       | Default  |
+### Atributos de la tabla
+| Atributo      | Descripción          | Tipo      | Valores aceptados       | Por defecto  |
 |---------- |-------------- |---------- |--------------------------------  |-------- |
-| data | Table data | array | — | — |
-| height | Table's height. By default it has an `auto` height. If its value is a number, the height is measured in pixels; if its value is a string, the height is affected by external styles | string/number | — | — |
-| max-height | Table's max-height. The height of the table starts from `auto` until it reaches the maxHeight limit. The `maxHeight` is measured in pixels, same as `height` | string/number | — | — |
-| stripe | whether Table is striped | boolean | — | false |
-| border | whether Table has vertical border | boolean | — | false |
-| size | size of Table | string | medium / small / mini | — |
-| fit | whether width of column automatically fits its container | boolean | — | true |
-| show-header | whether Table header is visible | boolean | — | true |
-| highlight-current-row | whether current row is highlighted | boolean | — | false |
-| current-row-key | key of current row, a set only prop | string,number | — | — |
-| row-class-name | function that returns custom class names for a row, or a string assigning class names for every row | Function({row, rowIndex})/String | — | — |
-| row-style | function that returns custom style for a row, or an object assigning custom style for every row | Function({row, rowIndex})/Object | — | — |
-| cell-class-name | function that returns custom class names for a cell, or a string assigning class names for every cell | Function({row, rowIndex})/String | — | — |
-| cell-style | function that returns custom style for a cell, or an object assigning custom style for every cell | Function({row, rowIndex})/Object | — | — |
-| header-row-class-name | function that returns custom class names for a row in table header, or a string assigning class names for every row in table header | Function({row, rowIndex})/String | — | — |
-| header-row-style | function that returns custom style for a row in table header, or an object assigning custom style for every row in table header | Function({row, rowIndex})/Object | — | — |
-| header-cell-class-name | function that returns custom class names for a cell in table header, or a string assigning class names for every cell in table header | Function({row, rowIndex})/String | — | — |
-| header-cell-style | function that returns custom style for a cell in table header, or an object assigning custom style for every cell in table header | Function({row, rowIndex})/Object | — | — |
-| row-key | key of row data, used for optimizing rendering. Required if `reserve-selection` is on. When its type is String, multi-level access is supported, e.g. `user.info.id`, but `user.info[0].id` is not supported, in which case `Function` should be used. | Function(row)/String | — | — |
-| empty-text | Displayed text when data is empty. You can customize this area with `slot="empty"` | String | — | No Data |
-| default-expand-all | whether expand all rows by default, only works when the table has a column type="expand" | Boolean | — | false |
-| expand-row-keys | set expanded rows by this prop, prop's value is the keys of expand rows, you should set row-key before using this prop | Array | — | |
-| default-sort | set the default sort column and order. property `prop` is used to set default sort column, property `order` is used to set default sort order | Object | `order`: ascending, descending | if `prop` is set, and `order` is not set, then `order` is default to ascending |
-| tooltip-effect | tooltip `effect` property | String | dark/light | | dark |
-| show-summary | whether to display a summary row | Boolean | — | false |
-| sum-text | displayed text for the first column of summary row | String | — | Sum |
-| summary-method | custom summary method | Function({ columns, data }) | — | — |
-| span-method | method that returns rowspan and colspan | Function({ row, column, rowIndex, columnIndex }) | — | — |
+| data | Datos de la tabla | array | — | — |
+| height | Altura de la tabla. Por defecto esta tiene un tamaño `auto`. Si este valor es un número, la altura es medido en pixeles; si este valor es una cadena, la altura es afectada por estilos externos | string/number | — | — |
+| max-height | Altura máxima de la tabla. La altura de la tabla comienza desde `auto` hasta que alcanza la altura máxima. El `max-height` es medido en pixeles, lo mismo que `height` | string/number | — | — |
+| stripe | especifica si la tabla será rayada | boolean | — | false |
+| border | especifica si la tabla tiene bordes verticales | boolean | — | false |
+| size | tamaño de la tabla | string | medium / small / mini | — |
+| fit | especifica si el ancho de la columna se adapta automáticamente a su contenedor | boolean | — | true |
+| show-header | especifica si la cabecera de la tabla es visible | boolean | — | true |
+| highlight-current-row | especifica si la fila actual es resaltado | boolean | — | false |
+| current-row-key | clave de la fila actual, un ajuste de propiedad única | string,number | — | — |
+| row-class-name | función que devuelve nombres de clases personalizadas para una fila, o una cadena asignando nombres de clases para cada fila | Function({row, rowIndex})/String | — | — |
+| row-style | función que devuelve el estilo personalizado para una fila, o un objeto asignando estilos personalizado para cada fila | Function({row, rowIndex})/Object | — | — |
+| cell-class-name | función que devuelve nombres de clases personalizadas para una celda, o una cadena asignando nombres de clases para cada celda | Function({row, rowIndex})/String | — | — |
+| cell-style | función que devuelve estilos personalizados para una celda, o un objeto asignado a estilos personalizados para cada celda | Function({row, rowIndex})/Object | — | — |
+| header-row-class-name | función que devuelve nombre de clases personalizadas para una fila en la cabecera de la tabla, o una cadena asignando nombres de clases para cada fila en la cabecera de la tabla | Function({row, rowIndex})/String | — | — |
+| header-row-style | función que devuelve estilos personalizados para una fila en la cabecera de la tabla, o un objeto asignando estilos personalizados para cada fila en la cabecera de la tabla | Function({row, rowIndex})/Object | — | — |
+| header-cell-class-name | función que devuelve nombre de clases personalizadas para una celda en la cabecera de la tabla, o una cadena asignando nombres de clases para cada celda en la cabecera de la tabla | Function({row, rowIndex})/String | — | — |
+| header-cell-style | función que devuelve estilos personalizados para una celda en la cabecera de la tabla, o un objeto asignando estilos personalizados para cada celda en la cabecera de la tabla | Function({row, rowIndex})/Object | — | — |
+| row-key | clave de datos de la fila, utilizada para optimizar la representación de los datos. Es obligatorio `reserve-selection` esta habilitado. Cuando su tipo es string, se permite el acceso multinivel, por ejemplo, `user.info.id`, pero `user.info[0].id` no es permitido, en cuyo caso se debe usar una `function` | Function(row)/String | — | — |
+| empty-text | Texto mostrado cuando no existen datos. Puedes personalizar esta área con `slot="empty"` | String | — | No Data |
+| default-expand-all | especifica si todas las filas se expanden por defeto, solo funciona cuando la tabla tiene una columna `type="expand"` | Boolean | — | false |
+| expand-row-keys | establece las filas expandidas a través de esta propiedad, este valor es la clave de rilas expandidas, tu deberías establecer `row-key` antes de usar esta propiedad | Array | — | |
+| default-sort | establece la columna y orden por defecto. La propiedad `prop` es utilizada para establecer la columna de ordenamiento por defecto, la propiedad `order` es utilizada para definir el tipo de orden por defecto | Object | `order`: ascending, descending | if `prop` is set, and `order` is not set, then `order` is default to ascending |
+| tooltip-effect | propiedad `effect` para efectos en tooltip | String | dark/light | | dark |
+| show-summary | especifica si debe mostrar la fila de resumen | Boolean | — | false |
+| sum-text | texto a mostrar para la primer columna de la fila de resumen | String | — | Sum |
+| summary-method | método personaliza para resumen | Function({ columns, data }) | — | — |
+| span-method | método que devuelve _rowspan_ y _colspan_ | Function({ row, column, rowIndex, columnIndex }) | — | — |
 
-### Table Events
-| Event Name | Description | Parameters |
+### Eventos de la tabla
+| Nombre del evento| Descripción | Parámetros |
 | ---- | ---- | ---- |
-| select | triggers when user clicks the checkbox in a row | selection, row |
-| select-all | triggers when user clicks the checkbox in table header | selection |
-| selection-change | triggers when selection changes | selection |
-| cell-mouse-enter | triggers when hovering into a cell| row, column, cell, event |
-| cell-mouse-leave | triggers when hovering out of a cell | row, column, cell, event |
-| cell-click | triggers when clicking a cell | row, column, cell, event |
-| cell-dblclick | triggers when double clicking a cell | row, column, cell, event |
-| row-click | triggers when clicking a row | row, event, column |
-| row-contextmenu | triggers when user right clicks on a row | row, event |
-| row-dblclick | triggers when double clicking a row | row, event |
-| header-click | triggers when clicking a column header | column, event |
-| sort-change | triggers when Table's sorting changes | { column, prop, order } |
-| filter-change | column's key. If you need to use the filter-change event, this attribute is mandatory to identify which column is being filtered | filters |
-| current-change | triggers when current row changes | currentRow, oldCurrentRow |
-| header-dragend | triggers when finish dragging header | newWidth, oldWidth, column, event |
-| expand-change | triggers when user expands or collapses a row | row, expandedRows |
+| select | se dispara cuando el usuario hace clic al _checkbox_ (caja de selección) en una fila | selection, row |
+| select-all | se dispara cando el usuario hace clic al _checkbox_ (caja de selección) en una cabecera de la tabla | selection |
+| selection-change | se dispara cuando selección cambia | selection |
+| cell-mouse-enter | se dispara cuando se desplaza dentro de una celda | row, column, cell, event |
+| cell-mouse-leave | se dispara cuando se desplaza fuera de una celda | row, column, cell, event |
+| cell-click | se dispara cuando se hace clic en una celda | row, column, cell, event |
+| cell-dblclick | se dispara cuando se hace doble clic en una celda | row, column, cell, event |
+| row-click | se dispara cuando se hace clic en una fila | row, event, column |
+| row-contextmenu | se dispara cuando el usuario hace clic derecho en una fila | row, event |
+| row-dblclick | se dispara cuando se hace doble clic en una fila | row, event |
+| header-click | se dispara cuando se hace click en una cabecera de columna | column, event |
+| sort-change | se dispara cuando el ordenamiento de la tabla cambia | { column, prop, order } |
+| filter-change | clave de la columna. Si necesitas utilizar el evento filter-change, este atributo es obligatorio para identificar cuál columna está siendo filtrada | filters |
+| current-change | se dispara cuando la fila actual cambia | currentRow, oldCurrentRow |
+| header-dragend | se dispara cuando se deja de arrastrar la cabecera | newWidth, oldWidth, column, event |
+| expand-change | se dispara cuando el usuario expande o colapsa una fila | row, expandedRows |
 
-### Table Methods
+### Métodos de la tabla
 | Method | Description | Parameters |
 |------|--------|-------|
-| clearSelection | used in multiple selection Table, clear selection, might be useful when `reserve-selection` is on | selection |
-| toggleRowSelection | used in multiple selection Table, toggle if a certain row is selected. With the second parameter, you can directly set if this row is selected | row, selected |
-| toggleRowExpansion | used in expandable Table, toggle if a certain row is expanded. With the second parameter, you can directly set if this row is expanded or collapsed | row, expanded |
-| setCurrentRow | used in single selection Table, set a certain row selected. If called without any parameter, it will clear selection. | row |
-| clearSort | clear sorting, restore data to the original order | — |
-| clearFilter | clear filter | — |
+| clearSelection | utilizado en selección múltiple de la tabla, limpiar selección, puede ser poco útil cuando `reserve-selection` está habilitado | selection |
+| toggleRowSelection | utilizado en selección múltiple de la tabla, alterna si una cierta fila es seleccionada. Con el segundo parámetro, puedes directamente establecer si la fila es seleccionada | row, selected |
+| toggleRowExpansion | utilizado en tabla expandible, alterna si una cierta fila es expandida. Con el segundo parámetro, puedes directamente establecer si esta fila es expandida o colapsada | row, expanded |
+| setCurrentRow | utilizado en tabla con selección sencilla, establece una cierta fila seleccionada. Si es llamado sin ningún parámetro, este puede limpiar la selección | row |
+| clearSort | limpiar ordenamiento, restaurar datos a orden original | — |
+| clearFilter | limpiar filtros | — |
 
-### Table Slot
-| Name | Description |
+### Slots de la tabla
+| Nombre | Descripción |
 |------|--------|
-| append | Contents to be inserted after the last row. You may need this slot if you want to implement infinite scroll for the table. This slot will be displayed above the summary row if there is one. |
+| append | El contenido será insertado después de la última fila. Es posible que necesites este espacio si deseas implementar _scroll_ infinito para la tabla. Este espacio se mostrará sobre la fila de resumen si hay uno. |
 
-### Table-column Attributes
-| Attribute      | Description          | Type      | Accepted Values       | Default  |
+### Atributos para las columnas de la tabla
+| Atributo      | Descripción          | Tipo      | Valores aceptados       | Por defecto  |
 |---------- |-------------- |---------- |--------------------------------  |-------- |
-| type | type of the column. If set to `selection`, the column will display checkbox. If set to `index`, the column will display index of the row (staring from 1). If set to `expand`, the column will display expand icon.  | string | selection/index/expand | — |
-| index | customize indices for each row, works on columns with `type=index` | string, Function(index) | - | - |
-| label | column label | string | — | — |
-| column-key | column's key. If you need to use the filter-change event, you need this attribute to identify which column is being filtered | string | string | — | — |
-| prop |  field name. You can also use its alias: `property` | string | — | — |
-| width | column width | string | — | — |
-| min-width | column minimum width. Columns with `width` has a fixed width, while columns with `min-width` has a width that is distributed in proportion | string | — | — |
-| fixed | whether column is fixed at left/right. Will be fixed at left if `true` | string/boolean | true/left/right | — |
-| render-header | render function for table header of this column | Function(h, { column, $index }) | — | — |
-| sortable | whether column can be sorted. Remote sorting can be done by setting this attribute to 'custom' and listening to the `sort-change` event of Table | boolean, string | true, false, custom | false |
-| sort-method | sorting method, works when `sortable` is `true`. Should return a number, just like Array.sort | Function(a, b) | — | — |
-| sort-by | specify which property to sort by, works when `sortable` is `true` and `sort-method` is `undefined`. If set to an Array, the column will sequentially sort by the next property if the previous one is equal | Function(row, index)/String/Array | — | — |
-| resizable | whether column width can be resized, works when `border` of `el-table` is `true` | boolean | — | false |
-| formatter | function that formats cell content | Function(row, column, cellValue) | — | — |
-| show-overflow-tooltip | whether to hide extra content and show them in a tooltip when hovering on the cell | boolean | — | false |
-| align | alignment | string | left/center/right | left |
-| header-align | alignment of the table header. If omitted, the value of the above `align` attribute will be applied | String | left/center/right | — |
-| class-name | class name of cells in the column | string | — | — |
-| label-class-name | class name of the label of this column | string | — | — |
-| selectable | function that determines if a certain row can be selected, works when `type` is 'selection' | Function(row, index) | — | — |
-| reserve-selection | whether to reserve selection after data refreshing, works when `type` is 'selection' | boolean | — | false |
-| filters | an array of data filtering options. For each element in this array, `text` and `value` are required | Array[{ text, value }] | — | — |
-| filter-placement | placement for the filter dropdown | String | same as Tooltip's `placement` | — |
-| filter-multiple | whether data filtering supports multiple options | Boolean | — | true |
-| filter-method | data filtering method. If `filter-multiple` is on, this method will be called multiple times for each row, and a row will display if one of the calls returns `true` | Function(value, row) | — | — |
-| filtered-value | filter value for selected data, might be useful when table header is rendered with `render-header` | Array | — | — |
+| type | tipo de la columna. Si se establece a `selection`, la columna puede mostrar un _checkbox_. Si se establece a `index`, la columna puede mostrar el índice de la fila (iniciando desde 1). Si se establece a `expand`, la columna puede mostrar un ícono para expandir. | string | selection/index/expand | — |
+| index | personaliza los índices para cada fila, funciona en columnas con `type=index` | string, Function(index) | - | - |
+| label | etiqueta de la columna | string | — | — |
+| column-key | clave de la columna. Si necesitas utilizar el evento `filter-change`, necesitas el atributo para identificar cual columna está siendo filtrada | string | string | — | — |
+| prop | nombre del campo. También puedes usar su alias: `property` | string | — | — |
+| width | ancho de la columna | string | — | — |
+| min-width | ancho mínimo de la columna. Columnas con `width` tienen un ancho fijo, mientras que las columnas con `min-width` tienen un ancho que se distribuye en proporción. | string | — | — |
+| fixed | especifica si la columna se fija a la izquierda o a la derecha. Se fijará a la izquierda si es `true` | string/boolean | true/left/right | — |
+| render-header | Función de renderizado para la cabecera de la tabla de esta columna | Function(h, { column, $index }) | — | — |
+| sortable | especifica que columna puede ser ordenado. El ordenamiento remoto puede ser hecho configurando el atributo `custom` y escucha al evento de tabla `sort-change` | boolean, string | true, false, custom | false |
+| sort-method | método de ordenamiento, funciona cuando `sortable` está en `true`. Debería devolver un número, al igual que Array.sort | Function(a, b) | — | — |
+| sort-by | especifica por cual propiedad de va a ordenar, funciona cuando `sortable` es `true` y `sort-method` es `undefined`. Si se establece a un arreglo, la columna ordenara secuencialmente por la siguiente propiedad si la anterior es igual | Function(row, index)/String/Array | — | — |
+| resizable | especifica si el ancho de la columna puede ser redimensionado, funciona cuando `border` de `el-table` está en `true` | boolean | — | false |
+| formatter | función que formatea el contenido de la celda | Function(row, column, cellValue) | — | — |
+| show-overflow-tooltip | especifica si el _tooltip_ debe ocultarse o mostrarse al hacer _hover_ en la celda | boolean | — | false |
+| align | alineación | string | left/center/right | left |
+| header-align | alineación de la cabecera de la tabla. Si se omite, se aplicará el valor del atributo anterior. | String | left/center/right | — |
+| class-name | nombre de clase de la celda en la columna | string | — | — |
+| label-class-name | nombre de clase de la etiqueta de esta columna class name of the label of this column | string | — | — |
+| selectable | función que determina si una cierta fila puede ser seleccionada, funciona cuando `type` esta en `selection` | Function(row, index) | — | — |
+| reserve-selection | especifica si se reserva la selección después de actualizar los datos, funciona cuando `type` está en `selection` | boolean | — | false |
+| filters | un arreglo de opciones para filtrado de datos. Para cada elemento en este arreglo, `text` y `value` son obligatorios | Array[{ text, value }] | — | — |
+| filter-placement | colocación para el menu desplegable del filtro | String | same as Tooltip's `placement` | — |
+| filter-multiple | especifica si el filtrado de datos soporta múltiples opciones | Boolean | — | true |
+| filter-method | método para filtrado de datos. Si `filter-multiple` está habilitado, este método se invocará varias veces para cada fila, y una fila puede mostrar si una de las llamadas devuelve `true`  | Function(value, row) | — | — |
+| filtered-value | el valor del filtro para los datos seleccionados, puede ser útil cuando el encabezado de la tabla se representará con `render-header` | Array | — | — |

From c6b51c6dae3aa9d64663c7edfca8005c0bb8fa65 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E6=9D=A8=E5=A5=95?=
 <Leopoldthecoder@users.noreply.github.com>
Date: Thu, 16 Nov 2017 11:02:44 +0800
Subject: [PATCH 41/48] Update CONTRIBUTING.en-US.md

---
 .github/CONTRIBUTING.en-US.md | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/.github/CONTRIBUTING.en-US.md b/.github/CONTRIBUTING.en-US.md
index e527744db..080f03954 100644
--- a/.github/CONTRIBUTING.en-US.md
+++ b/.github/CONTRIBUTING.en-US.md
@@ -8,7 +8,7 @@ We are excited that you are interested in contributing to Element. Before submit
 
 ## Issue Guidelines
 
-- Issues are exclusively for bug reports, feature requests and design-related topics. Other questions may be closed directly. If any questions come up when you are using Element, please hit [Gitter](https://gitter.im/ElemeFE/element) for help.
+- Issues are exclusively for bug reports, feature requests and design-related topics. Other questions may be closed directly. If any questions come up when you are using Element, please hit [Gitter](https://gitter.im/element-en/Lobby) for help.
 
 - Before submitting an issue, please check if similar problems have already been issued.
 

From 67869b3cd12961d0c8972ada87feee36949c47a5 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E6=9D=A8=E5=A5=95?=
 <Leopoldthecoder@users.noreply.github.com>
Date: Thu, 16 Nov 2017 11:07:01 +0800
Subject: [PATCH 42/48] Update FAQ.md

---
 FAQ.md | 42 ------------------------------------------
 1 file changed, 42 deletions(-)

diff --git a/FAQ.md b/FAQ.md
index 3f1bbfb8c..ab54450a8 100644
--- a/FAQ.md
+++ b/FAQ.md
@@ -36,27 +36,6 @@
 请阅读 Vue 文档 [Render Function](http://vuejs.org/v2/guide/render-function.html) 的相关内容。注意，使用 JSX 来写 Render Function 的话，需要安装 `babel-plugin-transform-vue-jsx`，并参照其[文档](https://github.com/vuejs/babel-plugin-transform-vue-jsx)进行配置。
 </details>
 
-<details>
-<summary>如何使用第三方图标库？</summary>
-
-只要修改第三方图标库的前缀（具体方法参阅第三方库的文档），并编写相应的 CSS，即可在 Element 中像使用内置图标一样使用第三方图标。例如，将第三方库的前缀改为 `el-icon-my`，然后在其 CSS 文件中添加：
-```css
-[class^="el-icon-my"], [class*=" el-icon-my"] {
-  font-family:"your-font-family" !important;
-
-  /* 以下内容参照第三方图标库本身的规则 */
-  font-size: inherit;
-  font-style:normal;
-  -webkit-font-smoothing: antialiased;
-  -moz-osx-font-smoothing: grayscale;
-}
-```
-具体使用时，和 Element 内置的图标用法一样。比如在 `el-input` 中：
-```html
-<el-input icon="my-xxx" />
-```
-</details>
-
 <details>
 <summary>所有组件的任意属性都支持 `.sync` 修饰符吗？</summary>
   
@@ -129,27 +108,6 @@ The parameter `row` is the data object of corresponding row.
 Please refer to [Render Function](http://vuejs.org/v2/guide/render-function.html) in Vue's documentation. In addition, if you are writing render functions with JSX, `babel-plugin-transform-vue-jsx` is required. See [here](https://github.com/vuejs/babel-plugin-transform-vue-jsx) for its configurations.
 </details>
 
-<details>
-<summary>How do I use third-party icon font library with Element?</summary>
-
-You just need to modify the class name prefix of the third-party library (see their docs for how to do it), and write some CSS, then you can use them just like you use Element built-in icons. For example, change the prefix to `el-icon-my`, and then add the following to its CSS:
-```css
-[class^="el-icon-my"], [class*=" el-icon-my"] {
-  font-family:"your-font-family" !important;
-
-  /* The following is based on original CSS rules of third-party library */
-  font-size: inherit;
-  font-style:normal;
-  -webkit-font-smoothing: antialiased;
-  -moz-osx-font-smoothing: grayscale;
-}
-```
-Now you can use them as you do with built-in icons. For example, in `el-input`:
-```html
-<el-input icon="my-xxx" />
-```
-</details>
-
 <details>
 <summary>Can I use `.sync` modifier on every attribute?</summary>
   

From 8898108a5aafdeae91648bae89079aec59315743 Mon Sep 17 00:00:00 2001
From: lesterbx <prz.lester@gmail.com>
Date: Wed, 15 Nov 2017 23:38:38 +0100
Subject: [PATCH 43/48] Added spanish documentation for Transfer, Transition
 and Tree

---
 examples/docs/es/transfer.md   |  59 +++++++-------
 examples/docs/es/transition.md |  20 ++---
 examples/docs/es/tree.md       | 145 ++++++++++++++++-----------------
 3 files changed, 112 insertions(+), 112 deletions(-)

diff --git a/examples/docs/es/transfer.md b/examples/docs/es/transfer.md
index be22b6330..510299b33 100644
--- a/examples/docs/es/transfer.md
+++ b/examples/docs/es/transfer.md
@@ -72,8 +72,8 @@
 
 ## Transfer
 
-### Basic usage
-:::demo Data is passed to Transfer via the `data` attribute. The data needs to be an object array, and each object should have these attributes: `key` being the identification of the data item, `label` being the displayed text, and `disabled` indicating if the data item is disabled. Items inside the target list are in sync with the variable binding to `v-model`, and the value of that variable is an array of target item keys. So, if you don't want the target list be initially empty, you can initialize the `v-model` with an array.
+### Uso básico
+:::demo Los datos se pasan a Transfer a través del atributo `data`. Los datos tienen que ser un array de objetos, y cada objeto debe tener estos atributos: `key` que será el identificador del item, `label` que será el texto a mostrar, y `disabled` que indicará si el elemento esta desactivado. Los items dentro de la lista destino están sincronizados con la variable asociada a `v-model`, y el valor de esa variable es un array de claves de los elementos de la lista destino. Así que si no quieres que la lista destino esté vacía inicialmente puedes inicializar el `v-model` con un array.
 ```html
 <template>
   <el-transfer
@@ -106,11 +106,12 @@
 ```
 :::
 
-### Filterable
+### Filtrar
 
-You can search and filter data items.
+Puedes buscar y filtrar los items.
 
-:::demo Set the `filterable` attribute to `true` to enable filter mode. By default, if the data item `label` contains the search keyword, it will be included in the search result. Also, you can implement you own filter method with the `filter-method` attribute. It takes a method and passes search keyword and each data item to it whenever the keyword changes. For a certain data item, if the method returns true, it will be included in the result list.
+::demo Pon el atributo `filterable` a true para permitir el filtrado.
+Por defecto si el `label` del item contiene el término buscado será incluido en el resultado. También puedes implementar tu propio método de filtrado con el atributo `filter-method`, que recibe un método y le pasa la búsqueda y cada item. Los items para los que devuelva true serán incluidos en el resultado de la búsqueda.
 ```html
 <template>
   <el-transfer
@@ -153,9 +154,9 @@ You can search and filter data items.
 
 ### Customizable
 
-You can customize list titles, button texts, render function for data items, checking status texts in list footer and list footer contents.
+Puedes customizar los títulos, botones, la función de renderizado de los items, el texto de status de la cabecera y el contenido del pie.
 
-:::demo Use `titles`, `button-texts`, `render-content` and `format` to respectively customize list titles, button texts, render function for data items, checking status texts in list header. For list footer contents, two named slots are provided: `left-footer` and `right-footer`. Plus, if you want some items initially checked, you can use `left-default-checked` and `right-default-checked`. Finally, this example demonstrate the `change` event. Note that this demo can't run in jsfiddle because it doesn't support JSX syntax. In a real project, `render-content` will work if relevant dependencies are correctly configured.
+:::demo Usa `titles`, `button-texts`, `render-content` y `format` respectivamente para customizar los títulos de las listas, el texto de los botones, la función de renderizado para los items y el texto de la cabecera que muestra el estado de los items. Para el pie de la lista hay dos slots: `left-footer` y `right-footer`. Además, si quieres algunos items marcados inicialmente pudes usar `left-default-checked` y `right-default-checked`. Finalmente este ejemplo muestra el evento `change`. Ten en cuenta que este ejemplo no se puede ejecutar en jsfiddle porque no soporta sintaxis JSX. En un proyecto real `render-content` funcionará si las dependencias son configuradas correctamente.
 ```html
 <template>
   <el-transfer
@@ -219,8 +220,9 @@ You can customize list titles, button texts, render function for data items, che
 
 ### Prop aliases
 
-By default, Transfer looks for `key`, `label` and `disabled` in a data item. If your data items have different key names, you can use the `props` attribute to define aliases.
-:::demo The data items in this example do not have `key`s or `label`s, instead they have `value`s and `desc`s. So you need to set aliases for `key` and `label`.
+Por defecto Transfer busca los atributos `key`, `label`, y `disabled` en cada elemento. Si tus datos tienen un nombre diferente para la clave puedes usar el atributo `props` para añadir alias.
+
+::: En este ejemplo los elementos no tienen `key`y `label`, en vez de eso tienen `value` y `desc`. Así que tienes que añadir alias para `key` y `label`.
 ```html
 <template>
   <el-transfer
@@ -257,28 +259,29 @@ By default, Transfer looks for `key`, `label` and `disabled` in a data item. If
 ```
 :::
 
-### Attributes
-| Attribute | Description | Type  | Accepted Values | Default |
+### Atributos
+| Atriburo | Descripcion | Tipo  | Valores aceptados | Por defecto |
 |---------- |-------- |---------- |-------------  |-------- |
-| data | data source | array[{ key, label, disabled }] | — | [ ] |
-| filterable | whether Transfer is filterable | boolean | — | false |
-| filter-placeholder | placeholder for the filter input | string | — | Enter keyword |
-| filter-method | custom filter method | function | — | — |
-| titles | custom list titles | array | — | ['List 1', 'List 2'] |
-| button-texts | custom button texts | array | — | [ ] |
-| render-content | custom render function for data items | function(h, option) | — | — |
-| format | texts for checking status in list header | object{noChecked, hasChecked} | — | { noChecked: '${checked}/${total}', hasChecked: '${checked}/${total}' } |
-| props | prop aliases for data source | object{key, label, disabled} | — | — |
-| left-default-checked | key array of initially checked data items of the left list | array | — | [ ] |
-| right-default-checked | key array of initially checked data items of the right list | array | — | [ ] |
+| data | Origen de datos | array[{ key, label, disabled }] | — | [ ] |
+| filterable | Si se puede filtrar | boolean | — | false |
+| filter-placeholder | Placeholder para el input del filtro| string | — | Enter keyword |
+| filter-method | Método de filtrado | function | — | — |
+| titles | Títulos de las listas | array | — | ['List 1', 'List 2'] |
+| button-texts | Texto de los botones | array | — | [ ] |
+| render-content | Función de renderizado | function(h, option) | — | — |
+| format | Texto para el status en el header| object{noChecked, hasChecked} | — | { noChecked: '${checked}/${total}', hasChecked: '${checked}/${total}' } |
+| props | prop alias para el origen de datos | object{key, label, disabled} | — | — |
+| left-default-checked | Array de claves de los elementos marcados inicialmente en la lista de la izquierda | array | — | [ ] |
+| right-default-checked | Array de claves de los elementos marcados inicialmente en la lista de la derecha | array | — | [ ] |
 
 ### Slot
-| Name | Description |
+| Nombre | Descripcion |
 |------|--------|
-| left-footer | content of left list footer |
-| right-footer | content of right list footer |
+| left-footer | Contenido del footer de la lista de la izquierda |
+| right-footer | Contenido del footer de la lista de la derecha |
 
-### Events
-| Event Name | Description | Parameters |
+### Eventos
+| Nombre | Descripcion | Parametros |
 |---------- |-------- |---------- |
-| change | triggers when data items change in the right list | key array of current data items in the right list, transfer direction (left or right), moved item keys |
+| change | se lanzá cuando los elementos cambian en la lista de la derecha | array con las claves de los elementos de la lista de la derecha |
+
diff --git a/examples/docs/es/transition.md b/examples/docs/es/transition.md
index 2658239d0..aa4cfe243 100644
--- a/examples/docs/es/transition.md
+++ b/examples/docs/es/transition.md
@@ -1,10 +1,10 @@
-## Built-in transition
+## Transiciones incorporadas
 
-You can use Element's built-in transitions directly. Before that, please read the [transition docs](https://vuejs.org/v2/api/#transition).
+Puedes usar directamente las transiciones incorporadas en Element. Antes de hacerlo, por favor lea la [documentación](https://vuejs.org/v2/api/#transition).
 
-### fade
+### Fade
 
-:::demo We have two fading effects: `el-fade-in-linear` and `el-fade-in`.
+:::demo Tenemos dos efectos de fading: `el-fade-in-linear` y `el-fade-in`.
 ```html
 <template>
   <div>
@@ -46,9 +46,9 @@ You can use Element's built-in transitions directly. Before that, please read th
 ```
 :::
 
-### zoom
+### Zoom
 
-:::demo `el-zoom-in-center`, `el-zoom-in-top` and `el-zoom-in-bottom` are provided.
+:::demo También tenemos zoom: `el-zoom-in-center`, `el-zoom-in-top` y `el-zoom-in-bottom`.
 ```html
 <template>
   <div>
@@ -96,10 +96,8 @@ You can use Element's built-in transitions directly. Before that, please read th
 :::
 
 
-### collapse
-
-For collapse effect, use the `el-collapse-transition` component.
-
+### Colapsado
+Para efectos de colapsado usar el componente `el-collapse-transition`.
 :::demo
 ```html
 <template>
@@ -147,7 +145,7 @@ For collapse effect, use the `el-collapse-transition` component.
 ```js
 // fade/zoom
 import 'element-ui/lib/theme-chalk/base.css';
-// collapse
+// colapsar
 import CollapseTransition from 'element-ui/lib/transitions/collapse-transition';
 import Vue from 'vue'
 
diff --git a/examples/docs/es/tree.md b/examples/docs/es/tree.md
index 835cfaa8c..8b98f40b0 100644
--- a/examples/docs/es/tree.md
+++ b/examples/docs/es/tree.md
@@ -286,11 +286,11 @@
 
 ## Tree
 
-Display a set of data with hierarchies.
+Muestra un conjunto de datos jerárquicos.
 
-### Basic usage
+### Uso básico
 
-Basic tree structure.
+Estructura básica de árbol.
 
 ::: demo
 ```html
@@ -351,11 +351,11 @@ Basic tree structure.
 ```
 :::
 
-### Selectable
+### Seleccionable
 
-Used for node selection.
+Usado para la selección de nodos.
 
-::: demo This example also shows how to load node data asynchronously.
+::: demo Este ejemplo también muestra como cargar los datos de forma asíncrona.
 ```html
 <el-tree
   :props="props"
@@ -419,9 +419,9 @@ Used for node selection.
 ```
 :::
 
-### Custom leaf node in lazy mode
+### Nodos hoja en modo perezoso
 
-::: demo A node's data is not fetched until it is clicked, so the Tree cannot predict whether a node is a leaf node. That's why a drop-down button is added to each node, and if it is a leaf node, the drop-down button will disappear when clicked. That being said, you can also tell the Tree in advance whether the node is a leaf node, avoiding the render of the drop-down button before a leaf node.
+:::demo Los datos de un nodo no son cargados hasta que no es pinchado, así que el árbol no puede predecir si es una hoja. Por eso a cada nodo se le añade el botón de desplegar, y si el nodo es una hoja el botón desaparecerá al pinchar en él. También puedes decirle al árbol que el nodo es una hoja de antemano, y así evitas que muestre el botón de desplegar.
 ```html
 <el-tree
   :props="props1"
@@ -465,11 +465,11 @@ Used for node selection.
 ```
 :::
 
-### Disabled checkbox
+### Checkbox desactivados
 
-The checkbox of a node can be set as disabled.
+El checkbox de un nodo se puede poner como desactivado.
 
-::: demo In the example, 'disabled' property is declared in defaultProps, and some nodes are set as 'disabled:true'. The corresponding checkboxes are disabled and can't be clicked.
+::: demo En el ejemplo, la propiedad 'disabled' se declara en defaultProps, y algunos nodos se ponen como 'disabled:true'. Los checkboxes correspondientes son desactivados y no se pueden pinchar.
 ```html
 <el-tree
   :data="data3"
@@ -522,10 +522,10 @@ The checkbox of a node can be set as disabled.
 ```
 :::
 
-### Default expanded and default checked
-Tree nodes can be initially expanded or checked
+### Desplegado o seleccionado por defecto
+Los nodos pueden estar desplegados o seleccionados por defecto.
 
-::: demo Use `default-expanded-keys` and `default-checked-keys` to set initially expanded and initially checked nodes respectively. Note that for them to work, `node-key` is required. Its value is the name of a key in the data object, and the value of that key should be unique across the whole tree.
+:::demo Utiliza `default-expanded-keys` y `default-checked-keys` para establecer los nodos desplegados y seleccionados respectivamente. Ten en cuenta que para que funcione es necesario que tengan `node-key`. Su valor es el nombre de una clave en el objeto data, y el valor de la clave debe ser único en todo el árbol.
 ```html
 <el-tree
   :data="data2"
@@ -586,9 +586,9 @@ Tree nodes can be initially expanded or checked
 ```
 :::
 
-### Checking tree nodes
+### Seleccionando nodos
 
-::: demo This example shows how to get and set checked nodes. They both can be done in two approaches: node and key. If you are taking the key approach, `node-key` is required.
+::: demo Este ejemplo muestra como establecer y leer nodos seleccionados. Esto se puede hacer por nodos o por claves. Si lo haces por claves el atributo `node-key` es necesario.
 ```html
 <el-tree
   :data="data2"
@@ -682,10 +682,10 @@ Tree nodes can be initially expanded or checked
 ```
 :::
 
-### Custom node content
-The content of tree nodes can be customized, so you can add icons or buttons as you will
+### Contenido personalzado en los nodos
+El contenido de los nodos puede ser personalizado, así que puedes añadir iconos y botones a tu gusto.
 
-::: demo Use `render-content` to assign a render function that returns the content of tree nodes. See Vue's documentation for a detailed introduction of render functions. Note that this demo can't run in jsfiddle because it doesn't support JSX syntax. In a real project, `render-content` will work if relevant dependencies are correctly configured.
+::: demo Utiliza `render-content` para asignar una función de renderizado que devuelve el contenido del árbol de nodos. Mira la documentación de node para una introducción detallada a las funciondes de renderizado. Ten en cuenta que este ejemplo no puede ejecutarse en jsfiddle ya que no soporta la sintaxis JSX. En un proyecto real `render-content` funcionará si las dependencias relevantes están configuradas correctamente.
 ```html
 <el-tree
   :data="data4"
@@ -779,10 +779,10 @@ The content of tree nodes can be customized, so you can add icons or buttons as
 ```
 :::
 
-### Tree node filtering
-Tree nodes can be filtered
+### Filtrado de nodos
+Los nodos del árbol se pueden filtrar.
 
-::: demo Invoke the `filter` method of the Tree instance to filter tree nodes. Its parameter is the filtering keyword. Note that for it to work, `filter-node-method` is required, and its value is the filtering method.
+:::demo Invoca el método `filter` de la instancia de Tree para filtrar los nodos. Su parametro es la palabra de filtrado. Ten en cuenta que para que funcione es necesario `filter-node-method`, y su valor el método de filtrado.
 ```html
 <el-input
   placeholder="Filter keyword"
@@ -862,9 +862,9 @@ Tree nodes can be filtered
 ```
 :::
 
-### Accordion
+### Acordeón
 
-Only one node among the same level can be expanded at one time.
+Solo puede ser expandido un nodo del mismo nivel a la vez.
 
 ::: demo
 ```html
@@ -930,56 +930,55 @@ Only one node among the same level can be expanded at one time.
 ```
 :::
 
-### Attributes
-| Attribute             | Description                              | Type                        | Accepted Values | Default |
-| --------------------- | ---------------------------------------- | --------------------------- | --------------- | ------- |
-| data                  | tree data                                | array                       | —               | —       |
-| empty-text            | text displayed when data is void         | string                      | —               | —       |
-| node-key              | unique identity key name for nodes, its value should be unique across the whole tree | string                      | —               | —       |
-| props                 | configuration options, see the following table | object                      | —               | —       |
-| load                  | method for loading subtree data          | function(node, resolve)     | —               | —       |
-| render-content        | render function for tree node            | Function(h, { node, data, store }        | —               | —       |
-| highlight-current     | whether current node is highlighted      | boolean                     | —               | false   |
-| default-expand-all    | whether to expand all nodes by default   | boolean                     | —               | false   |
-| expand-on-click-node  | whether to expand or collapse node when clicking on the node, if false, then expand or collapse node only when clicking on the arrow icon. | —                           | true            |         |
-| auto-expand-parent    | whether to expand father node when a child node is expanded | boolean                     | —               | true    |
-| default-expanded-keys | array of keys of initially expanded nodes | array                       | —               | —       |
-| show-checkbox         | whether node is selectable               | boolean                     | —               | false   |
-| check-strictly        | whether checked state of a node not affects its father and child nodes when `show-checkbox` is `true` | boolean                     | —               | false   |
-| default-checked-keys  | array of keys of initially checked nodes | array                       | —               | —       |
-| filter-node-method    | this function will be executed on each node when use filter method. if return `false`, tree node will be hidden. | Function(value, data, node) | —               | —       |
-| accordion             | whether only one node among the same level can be expanded at one time | boolean                     | —               | false   |
-| indent                | horizontal indentation of nodes in adjacent levels in pixels | number                     | —    | 16 |
+### Atributos
+| Atributo | Descripción | Tipo | Valores aceptados | Default |
+| - | - | - | - | -|
+| data | Datos del árbol | array | — | — |
+| empty-text | Texto a mostrar cuando data es void | string | — | — |
+| node-key | Identificador único en todo el árbol para los nodos | string | — | — |
+| props | Opciones de configuración | object | — | — |
+| load | Método para cargar los datos de subárboles | function(node, resolve) | — | — |
+| render-content | Función de renderizado para los nodos | Function(h, { node, data, store }| — | — |
+| highlight-current | Si el nodo actual está resaltado | boolean | — | false |
+| default-expand-all | Expandir todos los nodos por defecto | boolean | —  | false |
+| expand-on-click-node | Si expandir o contraer un nodo al pincharlo, si es false solo se hará al pinchar en la flecha | — | true | - |
+| auto-expand-parent | Expandir un nodo padre si el hijo está seleccionado | boolean | — | true |
+| default-expanded-keys | Array de claves de los nodos expandidos inicialmente | array | — | — |
+| show-checkbox | Si un nodo es seleccionable | boolean  | —  | false |
+| check-strictly | El estado de seleccion de un nodo no afecta a sus padres o hijos, cuando `show-checkbox` es `true` | boolean | — | false |
+| default-checked-keys | Array con claves de los nodos seleccionados inicialmente | array | — | — |
+| filter-node-method | Esta función se ejecutará en cada nodo cuando se use el método filtrtar, si devuelve `false` el nodo se oculta | Function(value, data, node) | — | — |
+| accordion | Dice si solo un nodo de cada nivel puede expandirse a la vez | boolean | — | false |
+| indent | Indentación horizontal de los nodos en niveles adyacentes, en pixeles | number | — | 16 |
 
 ### props
-| Attribute | Description                              | Type   | Accepted Values | Default |
-| --------- | ---------------------------------------- | ------ | --------------- | ------- |
-| label     | specify which key of node object is used as the node's label | string, function(data, node) | —               | —       |
-| children | specify which node object is used as the node's subtree | string, function(data, node) | —               | —       |
-| disabled | specify which key of node object represents if node's checkbox is disabled | boolean, function(data, node) | —    | —    |
-| isLeaf | specify whether the node is a leaf node | boolean, function(data, node) | —    | —    |
+| Atributo | Descripción | Tipo   | Valores aceptados | Default |
+| - | -| - | - | - |
+| label | Especifica que clave del objecto nodo se utilizará como label | string, function(data, node) | — | — |
+| children | Especifica que objeto del nodo se utiliza como subárbol | string, function(data, node) | — | — |
+| isLeaf | Especifica si el nodo es una hoja | boolean, function(data, node) | — | — |
 
-### Method
-`Tree` has the following method, which returns the currently selected array of nodes.
-| Method          | Description                              | Parameters                               |
-| --------------- | ---------------------------------------- | ---------------------------------------- |
-| filter          | filter all tree nodes, filtered nodes will be hidden | Accept a parameter which will be used as first parameter for filter-node-method |
-| updateKeyChildren | set new data to node, only works when `node-key` is assigned  | (key, data) Accept two parameters: 1. key of node 2. new data |
-| getCheckedNodes | If the node can be selected (`show-checkbox` is `true`), it returns the currently selected array of nodes | Accept a boolean type parameter whose default value is `false`. If the parameter is `true`, it only returns the currently selected array of sub-nodes. |
-| setCheckedNodes | set certain nodes to be checked, only works when `node-key` is assigned | an array of nodes to be checked          |
-| getCheckedKeys  | If the node can be selected (`show-checkbox` is `true`), it returns the currently selected array of node's keys | (leafOnly) Accept a boolean type parameter whose default value is `false`. If the parameter is `true`, it only returns the currently selected array of sub-nodes. |
-| setCheckedKeys  | set certain nodes to be checked, only works when `node-key` is assigned | (keys, leafOnly) Accept two parameters: 1. an array of node's keys to be checked 2. a boolean type parameter whose default value is `false`. If the parameter is `true`, it only returns the currently selected array of sub-nodes. |
-| setChecked      | set node to be checked or not, only works when `node-key` is assigned | (key/data, checked, deep) Accept three parameters: 1. node's key or data to be checked 2. a boolean typed parameter indicating checked or not. 3. a boolean typed parameter indicating deep or not. |
-| getCurrentKey   | return the highlight node's key (null if no node is highlighted) | — |
-| getCurrentNode  | return the highlight node (null if no node is highlighted) | — |
-| setCurrentKey   | set highlighted node by key, only works when `node-key` is assigned | (key) the node's key to be highlighted |
-| setCurrentNode  | set highlighted node, only works when `node-key` is assigned | (node) the node to be highlighted |
+### Métodos
+`Tree` tiene los siguientes métodos, que devuelven el array de nodos seleccionados.
+| Método | Descripción | Parámetros |
+| - | - | - |
+| filter | Filtra los nodos del árbol, los nodos filtrados estarán ocultos | Acepta un parámetro que será usado como primer parámetro para filter-node-method |
+| updateKeyChildren | Asocia un nuevo dato al nodo, solo funciona si `node-key` está asignado | (key, data)Acepta dos parámetros: 1. clave del nodo 2. nuevo dato |
+| getCheckedNodes | Si los nodos puede ser seleccionado (`show-checkbox` es `true`), devuelve el array de nodos seleccionados | Acepta un booleano cuyo valor por defecto es `false`|
+| setCheckedNodes | Establece algunos nodos como seleccionados, solo funciona cuando `node-key` está asignado | Un array de nodos a seleccionar  |
+| getCheckedKeys  | Si los nodos pueden ser seleccionados (`show-checkbox` es `true`), devuelve un array con las claves de los nodos seleccionados | (leafOnly) Acepta un booleano que por defecto es `false`. |
+| setCheckedKeys  | Establece algunos nodos como seleccionados, solo si `node-key` está asignado| (keys, leafOnly) Acepta dos parametros: 1. un array de claves 2. un booleano cuyo valor por defecto es `false`. Si el parámetro es `true`, solo devuelve los nodos seleccionados |
+| setChecked | Establece si un nodo está seleccionado, solo funciona si `node-key` esta asignado | (key/data, checked, deep) Acepta tres parámetros: 1. la clave o dato del nodo a ser seleccionado 2. un booleano que indica si un nodo el nodo estará seleccionado 3. un booleanoque indica si se hará en profundidad |
+| getCurrentKey | devuelve la clave del nodo resaltado actualmente (null si no hay ninguno) | — |
+| getCurrentNode | devuelve el nodo resaltado (null si no hay ninguno) | — |
+| setCurrentKey | establece el nodo resaltado por la clave, solo funciona si `node-key` está asignado | (key) la clave del nodo a ser resaltado|
+| setCurrentNode | establece el nodo resaltado, solo funciona si `node-key` está asignado  | (node) nodo a ser resaltado |
 
-### Events
-| Event Name     | Description                              | Parameters                               |
-| -------------- | ---------------------------------------- | ---------------------------------------- |
-| node-click     | triggers when a node is clicked          | three parameters: node object corresponding to the node clicked, `node` property of TreeNode, TreeNode itself |
-| check-change   | triggers when the selected state of the node changes | three parameters: node object corresponding to the node whose selected state is changed, whether the node is selected, whether node's subtree has selected nodes |
-| current-change | triggers when current node changes       | two parameters: node object corresponding to the current node, `node` property of TreeNode |
-| node-expand    | triggers when current node open          | three parameters: node object corresponding to the node opened, `node` property of TreeNode, TreeNode itself |
-| node-collapse  | triggers when current node close         | three parameters: node object corresponding to the node closed, `node` property of TreeNode, TreeNode itself |
+### Eventos
+| Nombre del evento | Descripción | Parámetros |
+| - | - | - |
+| node-click | se lanza cuando un nodo es pinchado | tres parámetros: el objeto del nodo seleccionado, propiedad `node` de TreeNode y el TreeNode en si |
+| check-change | se lanza cuando el estado de selección del nodo cambia | tres parámetros: objeto nodo que se corresponde con el que ha cambiado, booleano que dice si esta seleccionado, booleano que dice si el nodo tiene hijos seleccionados |
+| current-change | cambia cuando el nodo actual cambia | dos parámetros: objeto nodo que se corresponde al nodo actual y propiedad `node` del TreeNode |
+| node-expand | se lanza cuando el nodo actual se abre | tres parámetros: el objeto del nodo abierto, propiedad `node` de TreeNode y el TreeNode en si |
+| node-collapse | se lanza cuando el nodo actual se cierra | tres parámetros: el objeto del nodo cerrado, propiedad `node` de TreeNode y el TreeNode en si |

From 987876d38f26d68ae1d4060a176d9252bd0fce18 Mon Sep 17 00:00:00 2001
From: lesterbx <prz.lester@gmail.com>
Date: Thu, 16 Nov 2017 06:54:44 +0100
Subject: [PATCH 44/48] Transfer documentation, demos in one line

---
 examples/docs/es/transfer.md | 5 ++---
 1 file changed, 2 insertions(+), 3 deletions(-)

diff --git a/examples/docs/es/transfer.md b/examples/docs/es/transfer.md
index 510299b33..16b80399b 100644
--- a/examples/docs/es/transfer.md
+++ b/examples/docs/es/transfer.md
@@ -110,8 +110,7 @@
 
 Puedes buscar y filtrar los items.
 
-::demo Pon el atributo `filterable` a true para permitir el filtrado.
-Por defecto si el `label` del item contiene el término buscado será incluido en el resultado. También puedes implementar tu propio método de filtrado con el atributo `filter-method`, que recibe un método y le pasa la búsqueda y cada item. Los items para los que devuelva true serán incluidos en el resultado de la búsqueda.
+::demo Pon el atributo `filterable` a true para permitir el filtrado.Por defecto si el `label` del item contiene el término buscado será incluido en el resultado. También puedes implementar tu propio método de filtrado con el atributo `filter-method`, que recibe un método y le pasa la búsqueda y cada item. Los items para los que devuelva true serán incluidos en el resultado de la búsqueda.
 ```html
 <template>
   <el-transfer
@@ -222,7 +221,7 @@ Puedes customizar los títulos, botones, la función de renderizado de los items
 
 Por defecto Transfer busca los atributos `key`, `label`, y `disabled` en cada elemento. Si tus datos tienen un nombre diferente para la clave puedes usar el atributo `props` para añadir alias.
 
-::: En este ejemplo los elementos no tienen `key`y `label`, en vez de eso tienen `value` y `desc`. Así que tienes que añadir alias para `key` y `label`.
+:::demo En este ejemplo los elementos no tienen `key`y `label`, en vez de eso tienen `value` y `desc`. Así que tienes que añadir alias para `key` y `label`.
 ```html
 <template>
   <el-transfer

From bcbdf51cfb532a7e9029e26b7cb89c70cb95a121 Mon Sep 17 00:00:00 2001
From: Javier Diaz <coderdiaz@gmail.com>
Date: Thu, 16 Nov 2017 00:11:40 -0600
Subject: [PATCH 45/48] [componente] Spanish translation

---
 examples/i18n/component.json | 32 ++++++++++++++++----------------
 1 file changed, 16 insertions(+), 16 deletions(-)

diff --git a/examples/i18n/component.json b/examples/i18n/component.json
index 752999935..0563c8a38 100644
--- a/examples/i18n/component.json
+++ b/examples/i18n/component.json
@@ -64,32 +64,32 @@
   {
     "lang": "es",
     "demo-block": {
-      "hide-text": "Hide",
-      "show-text": "Expand",
-      "button-text": "Try it!",
-      "tooltip-text": "Run this demo on jsfiddle.net"
+      "hide-text": "Ocultar",
+      "show-text": "Mostrar",
+      "button-text": "Probar",
+      "tooltip-text": "Prueba este ejemplo en jsfiddle.net"
     },
     "footer": {
-      "links": "Links",
+      "links": "Enlaces",
       "repo": "GitHub",
-      "community": "Community",
-      "changelog": "Changelog",
-      "theme": "Theme CLI tool",
-      "preview": "Online theme generator",
+      "community": "Comunidad",
+      "changelog": "Lista de cambios",
+      "theme": "Generador de temas por CLI",
+      "preview": "Generador de temas en línea",
       "faq": "FAQ",
       "gitter": "Gitter",
-      "starter": "Starter kit",
-      "feedback": "Feedback",
-      "contribution": "Contribution",
+      "starter": "Kit de inicio",
+      "feedback": "Comentarios",
+      "contribution": "Contribución",
       "eleme": "Eleme"
     },
     "header": {
-      "guide": "Guide",
-      "components": "Component",
-      "resource": "Resource"
+      "guide": "Guía",
+      "components": "Componentes",
+      "resource": "Recursos"
     },
     "nav": {
-      "dropdown": "Version: "
+      "dropdown": "Versión: "
     }
   }
 ]

From 98655cb24d11aef9792a28431ffc3f4aab44d089 Mon Sep 17 00:00:00 2001
From: Javier Diaz <coderdiaz@gmail.com>
Date: Thu, 16 Nov 2017 00:11:52 -0600
Subject: [PATCH 46/48] [page] Spanish translation

---
 examples/i18n/page.json | 134 ++++++++++++++++++++--------------------
 1 file changed, 67 insertions(+), 67 deletions(-)

diff --git a/examples/i18n/page.json b/examples/i18n/page.json
index 59f8efd7c..3379cc9e4 100644
--- a/examples/i18n/page.json
+++ b/examples/i18n/page.json
@@ -190,16 +190,16 @@
     "lang": "es",
     "pages": {
       "index": {
-        "1": "A Desktop UI Library",
-        "2": "Element, a Vue 2.0 based component library for developers, designers and product managers",
-        "3": "Guide",
-        "4": "Understand the design guidelines, helping designers build product that's logically sound, reasonably structured and easy to use.",
-        "5": "View Detail",
-        "6": "Component",
-        "7": "Experience interaction details by strolling through component demos. Use encapsulated code to improve developing efficiency.",
-        "8": "Resource",
-        "9": "Download relevant design resources for shaping page prototype or visual draft, increasing design efficiency.",
-        "lang": "en-US",
+        "1": "Un kit de interfaz de usuario para la web",
+        "2": "Element, una librería de componentes basada en Vue 2.0 para desarrolladores, diseñadores y jefes de producto",
+        "3": "Guía",
+        "4": "Entender los líneamientos de diseño, ayudando a diseñadores a crear productos que sean lógicos, razonablemente estructurados y fáciles de usar.",
+        "5": "Ver detalle",
+        "6": "Componentes",
+        "7": "Experimenta la interacción al pasear con los ejemplos de los componentes. Utiliza el código encapsulado para mejorar la eficiencia en el desarrollo.",
+        "8": "Recursos",
+        "9": "Descarga los recursos de diseño relevantes para dar forma a un prototipo o borrador, aumentando la eficiencia del diseño.",
+        "lang": "es",
         "titleSize": "34",
         "paraSize": "18",
         "theatreParam": "{ maxSpeed: 100 }",
@@ -208,76 +208,76 @@
       },
       "component": {},
       "changelog": {
-        "1": "Changelog",
-        "2": "en-US"
+        "1": "Lista de cambios",
+        "2": "es"
       },
       "design": {
-        "1": "Design Disciplines",
-        "2": "Consistency",
+        "1": "Disciplinas de diseño",
+        "2": "Consistencia",
         "3": "",
-        "4": "Feedback",
+        "4": "Comentario",
         "5": "",
-        "6": "Efficiency",
+        "6": "Eficiencia",
         "7": "",
-        "8": "Controllability",
+        "8": "Control",
         "9": "",
-        "10": "Consistency",
-        "11": "Consistent with real life: ",
-        "12": "in line with the process and logic of real life, and comply with languages and habits that the users are used to.",
-        "13": "Consistent within interface: ",
-        "14": "all elements should be consistent, such as: design style, icons and texts, position of elements, etc.",
-        "15": "Feedback",
-        "16": "Operation feedback: ",
-        "17": "enable the users to clearly perceive their operations by style updates and interactive effects.",
-        "18": "Visual feedback: ",
-        "19": "reflect current state by updating or rearranging elements of the page.",
-        "20": "Efficiency",
-        "21": "Simplify the process: ",
-        "22": "keep operating process simple and intuitive.",
-        "23": "Definite and clear: ",
-        "24": "enunciate your intentions clearly so that the users can quickly understand and make decisions.",
-        "25": "Easy to identify: ",
-        "26": "the interface should be straightforward, which helps the users to identify and frees them from memorizing and recalling.",
-        "27": "Controllability",
-        "28": "Decision making: ",
-        "29": "giving advices about operations is acceptable, but do not make decisions for the users.",
-        "30": "Controlled consequences: ",
-        "31": "users should be granted the freedom to operate, including canceling, aborting or terminating current operation."
+        "10": "Consistencia",
+        "11": "Consistente con la vida real: ",
+        "12": "en línea con el proceso y la vida real, y cumple con los idiomas y hábitos a los que los usuarios están acostumbrados.",
+        "13": "Consistente dentro de la interfaz: ",
+        "14": "todos los elementos deben ser consistentes, como: estilo de diseño, iconos y texto, posición de los elementos, etc.",
+        "15": "Comentarios",
+        "16": "Comentarios sobre la operación: ",
+        "17": "Permite a los usuarios percibir claramente las operaciones mediante actualizaciones de estilo y efectos interactivos.",
+        "18": "Comentarios visuales: ",
+        "19": "Refleja el estado actual al actualizar o reorganizar los elementos de la página.",
+        "20": "Eficiencia",
+        "21": "Simplifica el proceso: ",
+        "22": "Mantiene el proceso operativo simple e intuitivo.",
+        "23": "Bien definido y claro: ",
+        "24": "Expresa las intenciones claramente para que los usuarios puedan comprender y tomar decisiones rápidamente.",
+        "25": "Fácil de identificar: ",
+        "26": "La interfaz debe ser sencilla, lo que permitirá a los usuarios a identificar y liberarlos de la memorización y recuerdos.",
+        "27": "Control",
+        "28": "Toma de decisiones: ",
+        "29": "Brindar consejos sobres las operaciones es aceptable, pero no tomar desiciones para los usuarios.",
+        "30": "Consecuencias controladas: ",
+        "31": "Los usuarios deben tener la libertad de operar, incluida la cancelación, el aborto o la terminación de las operaciones actuales."
       },
       "guide": {
-        "1": "Design Disciplines",
-        "2": "Navigation"
+        "1": "Disciplinas de diseño",
+        "2": "Navegación"
       },
       "nav": {
-        "1": "Navigation",
-        "2": "Navigation focuses on solving the users' problems of where to go and how to get there. Generally it can be categorized into 'sidebar navigation' and 'top navigation'.",
-        "3": "Choose the right navigation",
-        "4": "An appropriate navigation gives users a smooth experience, while an inappropriate one leads to confusion. Here are the differences between sidebar navigation and top navigation",
-        "5": "Side Navigation",
-        "6": "Fix the navigation at the left edge, thus improves its visibility, making it easier to switch between pages. In this case, the top area of the page holds commonly used tools, e.g. search bar, help button, notice button, etc. Suitable for background management or utility websites.",
-        "7": "Level 1 categories",
-        "8": "Suitable for simply structured sites with only one level of pages. No breadcrumb is needed.",
-        "9": "Level 2 categories",
-        "10": "Sidebar displays up to two levels of navigation. Breadcrumbs are recommended in combination of second level navigation, making it easier for the users to locate and navigate.",
-        "11": "Level 3 categories",
-        "12": "Suitable for complicated utility websites. The left sidebar holds first level navigation, and the middle column displays second level navigation or other utility options.",
-        "13": "Top Navigation",
-        "14": "Conforms to the normal browsing order from top to bottom, which makes things more natural. The navigation amount and text length are limited to the width of the top.",
-        "15": "Suitable for sites with few navigations and large chunks."
+        "1": "Navegación",
+        "2": "La navegación se centra en resolver los problemas de los usuarios sobre donde ir y como llegar ahí. En general, se puede categorizar en 'navegación de barra lateral' y 'navegación superior'.",
+        "3": "Elige la navegación correcta",
+        "4": "Una navegación apropiada provee a los usuarios una mejor experiencia, mientras que una inapropiada genera confusión. Esta es la diferencia entre la navegación de la barra lateral y la navegación superior.",
+        "5": "Navegación lateral",
+        "6": "Fija la navegación del lado izquierdo, esto permitirá una mejor visibilidad, lo que facilitará el cambio de pagina. En este caso, el área superior de la pagina contiene herramientas comúnmente utilizadas, por ejemplo, barra de búsqueda, botón de ayuda, botón de aviso, etc. Adecuado para sitios web de gestión.",
+        "7": "Categorías de Nivel 1",
+        "8": "Adecuado para sitios con una estructura simple con un solo nivel de páginas. No se necesita un 'breadcrumb'.",
+        "9": "Categorías de Nivel 2",
+        "10": "La barra lateral muestra hasta dos niveles de navegación. Se recomienda utilizar un 'breadcrumb' en combinación con la navegación de segundo nivel, lo que facilita la localización y navegación de los usuarios.",
+        "11": "Categorías de Nivel 3",
+        "12": "Adecuado para sitios web bastante complejos. La barra lateral izquierda contiene navegación de primer nivel, y la columna central muestra navegación de segundo nivel u otras opciones de utilidad.",
+        "13": "Navegación superior",
+        "14": "Se ajusta de acuerdo a la exploración normal de arriba a abajo, lo que hace que las cosas sean más naturales. La cantidad de navegación y la longitud del texto están limitadas al ancho de la parte superior.",
+        "15": "Adecuado para sitios con pocas navegaciones y grandes trozos."
       },
       "resource": {
-        "1": "Resource",
-        "2": "Under construction.",
-        "3": "Axure Components",
-        "4": "By importing Element UI in Axure, you can easily apply all the components we provide during interaction design.",
-        "5": "Download",
-        "6": "Sketch Template",
-        "7": "Apply components from Element template, so you can improve design efficiency while keeping a unified visual style.",
-        "8": "Interaction Design Documentation",
-        "9": "Take a closer look at the interaction design documentation. Learn more details of each component from a microcosmic perspective.",
+        "1": "Recursos",
+        "2": "En construcción",
+        "3": "Componetes de Axure",
+        "4": "Mediante la importación de elementos de interfaz de usuario en Axure, se puede aplicar fácilmente a todos los componentes que proporcionamos durante el diseño de interacción.",
+        "5": "Descarga",
+        "6": "Plantilla de Sketch",
+        "7": "Aplica componentes de la plantilla Element para que pueda mejorarla eficiencia del diseño manteniendo un estilo visual unificado.",
+        "8": "Documentación de diseño de interacción",
+        "9": "Eche un vistazo más de cerca a la documentación de diseño de interacción. Conoce más detalles de cada componente desde una perspectiva microcósmica.",
         "paraHeight": "1.6",
-        "placeholder1": "Under construction",
-        "placeholder2": "Please wait while we prepare the design resources"
+        "placeholder1": "En construcción",
+        "placeholder2": "Por favor espere mientras preparamos los recursos de diseño"
       }
     }
   }

From 201fd45f892347c52f8ae1bf4d634dc575838a01 Mon Sep 17 00:00:00 2001
From: Javier Diaz <coderdiaz@gmail.com>
Date: Thu, 16 Nov 2017 00:12:01 -0600
Subject: [PATCH 47/48] [title] Spanish translation

---
 examples/i18n/title.json | 8 ++++----
 1 file changed, 4 insertions(+), 4 deletions(-)

diff --git a/examples/i18n/title.json b/examples/i18n/title.json
index 64e382637..91e57f36e 100644
--- a/examples/i18n/title.json
+++ b/examples/i18n/title.json
@@ -12,9 +12,9 @@
     "resource": "Resource | Element"
   },
   "es": {
-    "home": "Element - A Desktop UI Toolkit for Web",
-    "guide": "Guide | Element",
-    "component": "Component | Element",
-    "resource": "Resource | Element"
+    "home": "Element - Un kit de interfaz de usuario para la web",
+    "guide": "Guía | Element",
+    "component": "Componentes | Element",
+    "resource": "Recursos | Element"
   }
 }

From cb9a1cb3054051d5c754c36adadd0bcb3f2d0ca4 Mon Sep 17 00:00:00 2001
From: Javier Diaz <coderdiaz@gmail.com>
Date: Thu, 16 Nov 2017 00:20:40 -0600
Subject: [PATCH 48/48] Fix for changelog file and comments title

---
 examples/i18n/page.json | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/examples/i18n/page.json b/examples/i18n/page.json
index 3379cc9e4..888a99189 100644
--- a/examples/i18n/page.json
+++ b/examples/i18n/page.json
@@ -209,13 +209,13 @@
       "component": {},
       "changelog": {
         "1": "Lista de cambios",
-        "2": "es"
+        "2": "en-US"
       },
       "design": {
         "1": "Disciplinas de diseño",
         "2": "Consistencia",
         "3": "",
-        "4": "Comentario",
+        "4": "Comentarios",
         "5": "",
         "6": "Eficiencia",
         "7": "",