[release] 2.0.9

[build] 2.0.9
Changelog: update for 2.0.9
2025-12-16 11:44:01 +08:00 · 2017-12-24 19:35:11 +08:00 · 2017-12-24 19:35:10 +08:00 · 2017-12-24 19:32:41 +08:00 · 2017-12-24 19:13:17 +08:00 · 2017-12-24 18:58:37 +08:00
61 changed files with 511 additions and 1401 deletions
--- a/.gitignore
+++ b/.gitignore
@@ -9,6 +9,7 @@ lib
 examples/element-ui
 examples/pages/en-US
 examples/pages/zh-CN
+examples/pages/es
 fe.element/element-ui
 .npmrc
 coverage
--- a/CHANGELOG.en-US.md
+++ b/CHANGELOG.en-US.md
@@ -1,5 +1,15 @@
 ## Changelog

+### 2.0.9🎄
+
+*2017-12-24*
+
+- Added `before-remove` hook function for Upload, #8788 (by @firesh)
+- Fixed initial value of `error` not working for FormItem, #8840
+- Now Loading directive supports custom class name by assigning `element-loading-custom-class` attribute, #8826 (by @earlymeme)
+- Fixed CarouselItem becoming invisible when data is asynchronously updated, #8921
+- Added `renderAfterExpand` attribute for Tree, #8972
+
 ### 2.0.8

 *2017-12-12*
--- a/CHANGELOG.es.md
+++ b/CHANGELOG.es.md
@@ -1,14 +1,24 @@
 ## Changelog

+### 2.0.9🎄
+
+*2017-12-24*
+
+- Added `before-remove` hook function for Upload, #8788 (by @firesh)
+- Fixed initial value of `error` not working for FormItem, #8840
+- Now Loading directive supports custom class name by assigning `element-loading-custom-class` attribute, #8826 (by @earlymeme)
+- Fixed CarouselItem becoming invisible when data is asynchronously updated, #8921
+- Added `renderAfterExpand` attribute for Tree, #8972
+
 ### 2.0.8

 *2017-12-12*

- Added Spanish documentation
- Fixed `show-timeout` of Dropdown not working when trigger is click, #8734 (por @presidenten)
- Fixed Form validation timing for rules whose trigger is blur, #8776
- Fixed blur event of ranged DatePicker, #8784
- `format` of TimePicker now supports AM/PM, #8620 (por @firesh)
+- Agregada la documentacion en español
+- Arreglado `show-timeout` de Dropdown que no funcionaba cuando se disparaba el click, #8734 (por @presidenten)
+- Arreglado el tiempo de validacion del Form cuando se disparaba el blur, #8776
+- Arreglado el evento de perdida de foco (blur) del DatePicker por rangos, #8784
+- `format` de TimePicker ahora soporta AM/PM, #8620 (por @firesh)

 ### 2.0.7

@@ -75,9 +85,6 @@

 *2017-10-28*

- Fixed style error of RadioButton and CheckboxButton, #7793
- Fixed TimePicker not respond to mouse scroll in some conditions, #7811
- Fixed incomplete styles of some components when imported on demand, #7811
 - Corregido error de estilo de RadioButton y CheckboxButton, #7793
 - Corregido TimePicker no responde al desplazamiento del ratón en algunas condiciones, #7811
 - Corregido estilos incompletos de algunos componentes cuando se importan bajo demanda, #7811
@@ -103,10 +110,10 @@
 - TimePicker
  - Ahora puede ser navegado por  `Up` y `Down`, y presionando `Enter` selecciona la hora #6050
  - Añadido `start-placeholder` y `end-placeholder`. Son placeholder's para las dos casillas de input en modo range #7169
-  -  Añadido el atributo `arrow-control` para hacer girar el tiempo con las flechas #7438
+  - Añadido el atributo `arrow-control` para hacer girar el tiempo con las flechas #7438
 - Tree
  - Ahora los nodos hijo no se renderizan antes de la primera expansión #6257
-  -  Añadido el atributo `check-descendants`. Determina si los nodos hijo se seleccionan al seleccionar su nodo padre en modo `lazy` #6235
+  - Añadido el atributo `check-descendants`. Determina si los nodos hijo se seleccionan al seleccionar su nodo padre en modo `lazy` #6235
 - Tag
  - Atributo `size` añadido #7203
 - Datepicker
@@ -123,7 +130,7 @@
 - Dialog
  - Añadidos los atributos `width`, `fullscreen`, `append-to-body`. Ahora Dialog puede ser anidado
  - Atributo `center` agregado para que el contenido pueda ser centrado #7042
-  -  Añadidos  `focus-after-closed`, `focus-after-open`  para mejorar la accesibilidad #6511
+  - Añadidos  `focus-after-closed`, `focus-after-open`  para mejorar la accesibilidad #6511
 - ColorPicker
  - Ahora puede escribir colores en el input #6167
  - Añadidos atributos `size` y `disabled` #7026
@@ -195,7 +202,7 @@

 - DatePicker
  -  Arreglado  `v-model`  que devolvia el segundo día de la semana seleccionada en modo week #6038
-  - Arreglado el primer input comenzaba borrado con el type `daterange`  #6021
+  -  Arreglado el primer input comenzaba borrado con el type `daterange`  #6021
 - DateTimePicker
  - Arreglado DateTimePicker y TimePicker que se afectaban entre sí cuando se seleccionaban #6090
  - Arreglado la hora y el segundo podian estar más allá del límite al seleccionar el tiempo #6076
@@ -225,7 +232,7 @@
  - Para facilitar el uso de iconos de terceros, los atributos `icon` de Button y Steps y los atributos  `prefix-icon` y `suffix-icon`  del input ahora requieren un nombre de clase completo.
 - Dialog
  - Atributo `size` eliminado. Ahora el tamaño de Dialog se puede configurar con  `width` y `fullscreen`
-  -  Ahora la visibilidad del Diálogo no puede ser controlada por `v-model`
+  - Ahora la visibilidad del Diálogo no puede ser controlada por `v-model`
 - Rate
  - `text-template` a sido renombrado a `score-template`
 - Dropdown
--- a/CHANGELOG.zh-CN.md
+++ b/CHANGELOG.zh-CN.md
@@ -1,5 +1,15 @@
 ## 更新日志

+### 2.0.9🎄
+
+*2017-12-24*
+
+- 新增 Upload 的 `before-remove` 钩子方法，#8788（by @firesh）
+- 修复 FormItem 的 `error` 属性初始值无效的问题，#8840
+- 通过指令调用的 Loading 现在支持以 `element-loading-custom-class` 属性的方式设置自定义类名，#8826（by @earlymeme）
+- 修复 CarouselItem 为异步获取时被隐藏的问题，#8921
+- 新增 Tree 的 `renderAfterExpand` 属性，#8972
+
 ### 2.0.8

 *2017-12-12*
--- a/README.md
+++ b/README.md
@@ -18,6 +18,18 @@

 > A Vue.js 2.0 UI Toolkit for Web.

+<p align="center">
+  <b>Special thanks to the generous sponsorship by:</b>
+</p>
+<p align="center">
+  <a href="https://tipe.io/?ref=element" target="_blank">Tipe.io</a>
+</p>
+<p align="center">
+  <a href="https://tipe.io/?ref=element" target="_blank">
+    <img style="vertical-align: middle" height="150px" alt="Tipe CMS" src="https://user-images.githubusercontent.com/1016365/34124854-48fafa06-e3e9-11e7-8c04-251055feebee.png">
+  </a>
+</p>
+
 ## Links
 - Homepage and documentation
  - International users: http://element.eleme.io/
--- a/examples/assets/images/tipe.svg
+++ b/examples/assets/images/tipe.svg
@@ -0,0 +1,175 @@
+<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 148.32 226.69">
+  <defs>
+    <style>
+      .cls-1 {
+        isolation: isolate;
+      }
+
+      .cls-2 {
+        fill: url(#radial-gradient);
+      }
+
+      .cls-3 {
+        fill: url(#linear-gradient);
+      }
+
+      .cls-4 {
+        fill: url(#linear-gradient-2);
+      }
+
+      .cls-5 {
+        fill: url(#linear-gradient-3);
+      }
+
+      .cls-6 {
+        fill: url(#linear-gradient-4);
+      }
+
+      .cls-7 {
+        fill: url(#linear-gradient-5);
+      }
+
+      .cls-8 {
+        fill: url(#linear-gradient-6);
+      }
+
+      .cls-9 {
+        opacity: 0.7;
+      }
+
+      .cls-11, .cls-9 {
+        mix-blend-mode: multiply;
+      }
+
+      .cls-10 {
+        fill: url(#linear-gradient-7);
+      }
+
+      .cls-12 {
+        fill: url(#linear-gradient-8);
+      }
+
+      .cls-13 {
+        fill: url(#linear-gradient-9);
+      }
+
+      .cls-14 {
+        fill: #3c2e36;
+      }
+
+      .cls-15 {
+        fill: url(#linear-gradient-10);
+      }
+
+      .cls-16 {
+        fill: url(#radial-gradient-2);
+      }
+    </style>
+    <radialGradient id="radial-gradient" cx="74.93" cy="117.87" r="86.39" gradientTransform="translate(0 22.72) scale(1 1.07)" gradientUnits="userSpaceOnUse">
+      <stop offset="0.32" stop-color="#e4dce1"/>
+      <stop offset="0.48" stop-color="#e1dadf"/>
+      <stop offset="0.59" stop-color="#d9d3da"/>
+      <stop offset="0.68" stop-color="#cac7d2"/>
+      <stop offset="0.76" stop-color="#b5b6c6"/>
+      <stop offset="0.79" stop-color="#aaadc0"/>
+      <stop offset="1" stop-color="#6f6f85"/>
+    </radialGradient>
+    <linearGradient id="linear-gradient" x1="38.85" y1="122.53" x2="108.18" y2="108.38" gradientUnits="userSpaceOnUse">
+      <stop offset="0" stop-color="#e4dce1"/>
+      <stop offset="0.19" stop-color="#d7d0d7"/>
+      <stop offset="0.53" stop-color="#b5b2be"/>
+      <stop offset="0.97" stop-color="#808296"/>
+    </linearGradient>
+    <linearGradient id="linear-gradient-2" x1="32.25" y1="64.7" x2="148.44" y2="64.7" gradientUnits="userSpaceOnUse">
+      <stop offset="0.32" stop-color="#e4dce1"/>
+      <stop offset="0.49" stop-color="#e1dadf"/>
+      <stop offset="0.6" stop-color="#d9d3da"/>
+      <stop offset="0.69" stop-color="#cac7d2"/>
+      <stop offset="0.78" stop-color="#b5b6c6"/>
+      <stop offset="0.81" stop-color="#aaadc0"/>
+      <stop offset="1" stop-color="#6f6f85"/>
+    </linearGradient>
+    <linearGradient id="linear-gradient-3" x1="139.11" y1="68.34" x2="139.11" y2="1.17" gradientUnits="userSpaceOnUse">
+      <stop offset="0.12" stop-color="#888aa0"/>
+      <stop offset="0.54" stop-color="#716f8a"/>
+      <stop offset="0.89" stop-color="#635d7c"/>
+    </linearGradient>
+    <linearGradient id="linear-gradient-4" x1="111.94" y1="16.05" x2="135.36" y2="16.05" gradientUnits="userSpaceOnUse">
+      <stop offset="0" stop-color="#3c314b"/>
+      <stop offset="0.54" stop-color="#534a67"/>
+      <stop offset="0.89" stop-color="#635d7c"/>
+    </linearGradient>
+    <linearGradient id="linear-gradient-5" x1="6752.04" y1="68.34" x2="6752.04" y2="-3.45" gradientTransform="matrix(-1, 0, 0, 1, 6787.68, 0)" gradientUnits="userSpaceOnUse">
+      <stop offset="0.19" stop-color="#e4dce1"/>
+      <stop offset="0.42" stop-color="#c2bac6"/>
+      <stop offset="0.92" stop-color="#6b6582"/>
+      <stop offset="0.97" stop-color="#635d7c"/>
+    </linearGradient>
+    <linearGradient id="linear-gradient-6" x1="39.39" y1="16.05" x2="62.82" y2="16.05" gradientUnits="userSpaceOnUse">
+      <stop offset="0" stop-color="#3c314b"/>
+      <stop offset="0.02" stop-color="#3d324c"/>
+      <stop offset="0.35" stop-color="#524a66"/>
+      <stop offset="0.65" stop-color="#5f5876"/>
+      <stop offset="0.89" stop-color="#635d7c"/>
+    </linearGradient>
+    <linearGradient id="linear-gradient-7" x1="79.66" y1="229.05" x2="79.66" y2="194.82" gradientUnits="userSpaceOnUse">
+      <stop offset="0.03" stop-color="#808296"/>
+      <stop offset="0.31" stop-color="#b7b8c3" stop-opacity="0.78"/>
+      <stop offset="0.79" stop-color="#fff" stop-opacity="0.5"/>
+    </linearGradient>
+    <linearGradient id="linear-gradient-8" x1="87.38" y1="117.84" x2="87.38" y2="41.77" gradientUnits="userSpaceOnUse">
+      <stop offset="0" stop-color="#e3dddf" stop-opacity="0"/>
+      <stop offset="0.04" stop-color="#cbc5cd" stop-opacity="0.12"/>
+      <stop offset="0.15" stop-color="#9d97a9" stop-opacity="0.37"/>
+      <stop offset="0.25" stop-color="#7b758f" stop-opacity="0.54"/>
+      <stop offset="0.35" stop-color="#67617f" stop-opacity="0.65"/>
+      <stop offset="0.45" stop-color="#605a7a" stop-opacity="0.68"/>
+      <stop offset="0.54" stop-color="#575070" stop-opacity="0.75"/>
+      <stop offset="1" stop-color="#382e4a"/>
+    </linearGradient>
+    <linearGradient id="linear-gradient-9" x1="11357.22" y1="78.8" x2="11361.46" y2="58.49" gradientTransform="matrix(-1, 0, 0, 1, 11419.34, 0)" gradientUnits="userSpaceOnUse">
+      <stop offset="0.07" stop-color="#28ffff"/>
+      <stop offset="0.41" stop-color="#51d2ff"/>
+      <stop offset="0.8" stop-color="#7ba3ff"/>
+      <stop offset="1" stop-color="#8b91ff"/>
+    </linearGradient>
+    <linearGradient id="linear-gradient-10" x1="113" y1="78.8" x2="117.24" y2="58.49" gradientTransform="matrix(1, 0, 0, 1, 0, 0)" xlink:href="#linear-gradient-9"/>
+    <radialGradient id="radial-gradient-2" cx="36.09" cy="124.71" r="36.13" gradientUnits="userSpaceOnUse">
+      <stop offset="0.11" stop-color="#635d7c"/>
+      <stop offset="0.35" stop-color="#5f5876"/>
+      <stop offset="0.65" stop-color="#524a66"/>
+      <stop offset="0.98" stop-color="#3d324c"/>
+      <stop offset="1" stop-color="#3c314b"/>
+    </radialGradient>
+  </defs>
+  <title>Asset 3</title>
+  <g class="cls-1">
+    <g id="Layer_2" data-name="Layer 2">
+      <g id="Layer_1-2" data-name="Layer 1">
+        <g>
+          <path class="cls-2" d="M138.13,128.27c-4.7-9.78-11.29-21.28-9.75-33.55a15.83,15.83,0,0,1,3.26-8.26A65.12,65.12,0,0,1,114.75,99a64.1,64.1,0,0,1-6.11,2.76,66.61,66.61,0,0,0-14.35,9.42c-13.43,11.7-26.21,44.39-48.51,50.6h0a23.9,23.9,0,0,1-9.81,2c-9.41-.07-20.4-6.21-26.26-15.43C1,134.68,3.58,115.85,9.49,103.81c-.18.37-.37.74-.55,1.13a102.51,102.51,0,0,0-4.2,10.42v0A86.37,86.37,0,0,0,0,143.69c0,45.84,35.49,83,79.27,83,11.19,0,29-3.38,43.66-13.61a57.75,57.75,0,0,0,22.57-32C151.54,158.58,144.94,142.45,138.13,128.27Z"/>
+          <path class="cls-3" d="M51.46,158.37a27,27,0,0,1-5.67,3.38h0c22.3-6.21,35.07-38.9,48.51-50.6a66.61,66.61,0,0,1,14.35-9.42,58.67,58.67,0,0,1-21.26,4.09c-19.75,0-37.75-10.49-48.31-24,1,1.39,13,15.46,22.29,43.72A30,30,0,0,1,51.46,158.37Z"/>
+          <path class="cls-4" d="M145.33,59.56c-2.08,22.29-28.26,46.26-58,46.26-29.95,0-55.88-24.12-58-46.26-1.45-15.6,7.34-36,58-36S146.78,44,145.33,59.56Z"/>
+          <path class="cls-5" d="M135.36,0h0a51.59,51.59,0,0,0-4.68,32.1A37.21,37.21,0,0,1,134,34.24c10,7.23,12.12,17,11.34,25.32a35.2,35.2,0,0,1-1.6,7.61A73.45,73.45,0,0,0,142.08,12,71.18,71.18,0,0,0,135.36,0Z"/>
+          <path class="cls-6" d="M130.68,32.1A51.59,51.59,0,0,1,135.36,0h0a57.92,57.92,0,0,0-9.41,6.87,59.8,59.8,0,0,0-14,18.75q3.35.64,6.29,1.45A53.09,53.09,0,0,1,130.68,32.1Z"/>
+          <path class="cls-7" d="M39.39,0h0a51.59,51.59,0,0,1,4.68,32.1,37.21,37.21,0,0,0-3.31,2.14c-10,7.23-12.12,17-11.34,25.32A35.2,35.2,0,0,0,31,67.17,73.45,73.45,0,0,1,32.67,12,71.18,71.18,0,0,1,39.39,0Z"/>
+          <path class="cls-8" d="M48.81,6.87A57.92,57.92,0,0,0,39.39,0h0a51.59,51.59,0,0,1,4.68,32.1,53.09,53.09,0,0,1,12.45-5q2.94-.82,6.29-1.45A59.8,59.8,0,0,0,48.81,6.87Z"/>
+          <g class="cls-9">
+            <path class="cls-10" d="M84.24,182.6c-26.08,0-49.56,5.42-66,14.08,14.54,18.33,36.47,30,61,30,11.19,0,29-3.38,43.66-13.61A58.81,58.81,0,0,0,141,192.47C125.56,186.3,105.79,182.6,84.24,182.6Z"/>
+          </g>
+          <g>
+            <g class="cls-11">
+              <path class="cls-12" d="M138.51,52.94c-.56-2.94-2-5.19-5-5.88-7.88-1.85-27,9.84-37.8,15.34-4,2.06-6.16,3.05-8.34,3s-4.31-.94-8.34-3c-10.77-5.5-29.92-17.18-37.8-15.34-3,.7-4.44,2.94-5,5.88-1,5.16.35,18,9.89,27.49,7.14,7.11,16.68,10.46,24.69,12.71l.18.08a4.2,4.2,0,0,0-.09.88c0,3.28,3.83,5.94,8.56,5.94,2.34,0,6.35-.65,7.9-1.71h0c1.55,1.06,5.56,1.71,7.9,1.71,4.73,0,8.56-2.66,8.56-5.94a4.2,4.2,0,0,0-.09-.88l.18-.08c8-2.25,17.56-5.6,24.69-12.71C138.16,70.92,139.49,58.1,138.51,52.94Z"/>
+            </g>
+            <path class="cls-13" d="M75.26,75.35C64.56,86.85,47.81,77.09,45,63.28c-1.83-9.07,3.63-7.73,8.71-5.67C60.14,60.2,68.84,66.27,75.26,75.35Z"/>
+            <path class="cls-14" d="M60.43,68.26a15.16,15.16,0,0,1-2.19,8,15.56,15.56,0,0,1,0-15.92A15.16,15.16,0,0,1,60.43,68.26Z"/>
+            <path d="M87.36,86.64a8.15,8.15,0,0,0-6.27,2.49c8.25,5.17,4.31,5.17,12.55,0A8.15,8.15,0,0,0,87.36,86.64Z"/>
+            <path class="cls-15" d="M99.86,75.35c10.69,11.5,27.45,1.74,30.23-12.07,1.83-9.07-3.63-7.73-8.71-5.67C115,60.2,106.28,66.27,99.86,75.35Z"/>
+            <path class="cls-14" d="M114.69,68.26a15.16,15.16,0,0,0,2.19,8,15.56,15.56,0,0,0,0-15.92A15.16,15.16,0,0,0,114.69,68.26Z"/>
+          </g>
+          <path class="cls-16" d="M9.71,148.35c5.86,9.22,16.85,15.37,26.26,15.43a23.7,23.7,0,0,0,8.21-1.41l0,0c-15,4.18-19.32-25.16-10.92-43.06v0c1.09-3.38,2.35-6.34,3.42-8.83.37-.86,2.53-5.15,2.09-9.8-.84-9-14-17.33-24-5.37A44.52,44.52,0,0,0,9.39,104C3.55,116.06,1.08,134.76,9.71,148.35Z"/>
+        </g>
+      </g>
+    </g>
+  </g>
+</svg>
--- a/examples/components/footer.vue
+++ b/examples/components/footer.vue
@@ -139,10 +139,22 @@
      margin: 10px;
    }
  }
+  @media (max-width: 1140px) {
+    .footer {
+      height: auto;
+    }
+  }
+  
+  @media (max-width: 1000px) {
+    .footer-social {
+      display: none;
+    }
+  }
+  
  @media (max-width: 768px) {
    .footer {
-      .footer-social {
-        display: none;
+      .footer-main {
+        margin-bottom: 30px;
      }
    }
  }
--- a/examples/docs/en-US/color.md
+++ b/examples/docs/en-US/color.md
@@ -45,7 +45,7 @@
    background-color: #303133;
  }
  .bg-text-regular {
-    background-color: #303133;
+    background-color: #606266;
  }
  .bg-text-secondary {
    background-color: #909399;
@@ -112,7 +112,7 @@ Neutral colors are for text, background and border colors. You can use different
  <el-col :span="6">
    <div class="demo-color-box-group">
      <div class="demo-color-box bg-text-primary">Primary Text<div class="value">#303133</div></div>
-      <div class="demo-color-box bg-text-regular">Regular Text<div class="value">#303133</div></div>
+      <div class="demo-color-box bg-text-regular">Regular Text<div class="value">#606266</div></div>
      <div class="demo-color-box bg-text-secondary">Secondary Text<div class="value">#909399</div></div>
      <div class="demo-color-box bg-text-placeholder">Placeholder Text<div class="value">#C0C4CC</div></div>
    </div>
--- a/examples/docs/en-US/i18n.md
+++ b/examples/docs/en-US/i18n.md
@@ -213,4 +213,4 @@ Currently Element ships with the following languages:
  <li>Hungarian (hu)</li>
 </ul>

-If your target language is not included, you are more than welcome to contribute: just add another language config [here](https://github.com/ElemeFE/element/tree/master/src/locale/lang) and create a pull request.
+If your target language is not included, you are more than welcome to contribute: just add another language config [here](https://github.com/ElemeFE/element/tree/dev/src/locale/lang) and create a pull request.
--- a/examples/docs/en-US/select.md
+++ b/examples/docs/en-US/select.md
@@ -614,7 +614,7 @@ Enter keywords and search data from server.

 ### Create new items
 Create and select new items that are not included in select options
-:::demo By using the `allow-create` attribute, users can create new items by typing in the input box. Note that for `allow-create` to work, `filterable` must be `true`.
+:::demo By using the `allow-create` attribute, users can create new items by typing in the input box. Note that for `allow-create` to work, `filterable` must be `true`. This example also demonstrates `default-first-option`. When this attribute is set to `true`, you can select the first option in the current option list by hitting enter without having to navigate with mouse or arrow keys.
 ```html
 <template>
  <el-select
@@ -622,6 +622,7 @@ Create and select new items that are not included in select options
    multiple
    filterable
    allow-create
+    default-first-option
    placeholder="Choose tags for your article">
    <el-option
      v-for="item in options5"
--- a/examples/docs/en-US/table.md
+++ b/examples/docs/en-US/table.md
@@ -1407,7 +1407,7 @@ Filter the table to find desired data.
 ### Custom column template

 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).
+:::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).
 ```html
 <template>
  <el-table
@@ -1944,8 +1944,8 @@ You can customize row index in `type=index` columns.
 | 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 | — | — |
+| cell-class-name | function that returns custom class names for a cell, or a string assigning class names for every cell | Function({row, column, rowIndex, columnIndex})/String | — | — |
+| cell-style | function that returns custom style for a cell, or an object assigning custom style for every cell | Function({row, column, rowIndex, columnIndex})/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 | — | — |
--- a/examples/docs/en-US/tree.md
+++ b/examples/docs/en-US/tree.md
@@ -937,6 +937,7 @@ Only one node among the same level can be expanded at one time.
 | 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                      | —               | —       |
+| render-after-expand   | whether to render child nodes only after a parent node is expanded for the first time | boolean | — | true |
 | 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   |
--- a/examples/docs/en-US/upload.md
+++ b/examples/docs/en-US/upload.md
@@ -116,6 +116,9 @@
      },
      handleExceed(files, fileList) {
        this.$message.warning(`You can upload up to 3 files. You selected ${files.length} files this time, and ${files.length + fileList.length} files totally`);
+      },
+      beforeRemove(file, fileList) {
+        return this.$confirm(`确定移除 ${ file.name }？`);
      }
    }
  }
@@ -126,13 +129,14 @@ Upload files by clicking or drag-and-drop

 ### Click to upload files

-:::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 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. Plus, you can abort removing a file in the `before-remove` hook.
 ```html
 <el-upload
  class="upload-demo"
  action="https://jsonplaceholder.typicode.com/posts/"
  :on-preview="handlePreview"
  :on-remove="handleRemove"
+  :before-remove="beforeRemove"
  multiple
  :limit="3"
  :on-exceed="handleExceed"
@@ -156,6 +160,9 @@ Upload files by clicking or drag-and-drop
      },
      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`);
+      },
+      beforeRemove(file, fileList) {
+        return this.$confirm(`确定移除 ${ file.name }？`);
      }
    }
  }
@@ -410,6 +417,7 @@ 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) | — | —
+before-remove | hook function before removing a file with the file and file list as its parameters. If `false` is returned or a `Promise` is returned and then is rejected, removing will be aborted. | function(file, fileList) | — | — |
 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 |
--- a/examples/docs/es/color.md
+++ b/examples/docs/es/color.md
@@ -45,7 +45,7 @@
    background-color: #303133;
  }
  .bg-text-regular {
-    background-color: #303133;
+    background-color: #606266;
  }
  .bg-text-secondary {
    background-color: #909399;
@@ -112,7 +112,7 @@ Los colores neutrales son para texto, fondos y bordes. Puede usar diferentes col
  <el-col :span="6">
    <div class="demo-color-box-group">
      <div class="demo-color-box bg-text-primary">Texto primario<div class="value">#303133</div></div>
-      <div class="demo-color-box bg-text-regular">Texto regular<div class="value">#303133</div></div>
+      <div class="demo-color-box bg-text-regular">Texto regular<div class="value">#606266</div></div>
      <div class="demo-color-box bg-text-secondary">Texto secundario<div class="value">#909399</div></div>
      <div class="demo-color-box bg-text-placeholder">Texto de placeholder<div class="value">#C0C4CC</div></div>
    </div>
--- a/examples/docs/es/i18n.md
+++ b/examples/docs/es/i18n.md
@@ -213,4 +213,4 @@ Actualmente Element está disponible en los siguientes idiomas:
  <li>Hungarian (hu)</li>
 </ul>

-Si su idioma de destino no está incluido, puede contribuir: simplemente añada  [aqui](https://github.com/ElemeFE/element/tree/master/src/locale/lang) otra configuración de idioma y cree un pull request.
+Si su idioma de destino no está incluido, puede contribuir: simplemente añada  [aqui](https://github.com/ElemeFE/element/tree/dev/src/locale/lang) otra configuración de idioma y cree un pull request.
--- a/examples/docs/es/table.md
+++ b/examples/docs/es/table.md
@@ -1408,7 +1408,7 @@ Filtra la tabla para encontrar la información que necesita.

 Personalice la columna de la tabla para que pueda integrarse con otros componentes.

-:::demo Tiene acceso a la siguiente informacion: row, column, $index, store (gestor de estados de la tabla) por [Scoped slots](https://vuejs.org/v2/guide/components.html#Scoped-Slots). (Los Scoped Slots son soportados desde `1.1`, `inline-template` todavía funciona, pero no es recomendado).
+:::demo Tiene acceso a la siguiente informacion: row, column, $index, store (gestor de estados de la tabla) por [Scoped slots](https://vuejs.org/v2/guide/components.html#Scoped-Slots).
 ```html
 <template>
  <el-table
@@ -1949,8 +1949,8 @@ Puede personalizar el índice de la fila con la propiedad `type=index` de las co
 | 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         | —                              | —                                        |
+| 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, column, rowIndex, columnIndex})/String         | —                              | —                                        |
+| cell-style             | función que devuelve estilos personalizados para una celda, o un objeto asignado a estilos personalizados para cada celda | Function({row, column, rowIndex, columnIndex})/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         | —                              | —                                        |
--- a/examples/docs/zh-CN/i18n.md
+++ b/examples/docs/zh-CN/i18n.md
@@ -114,7 +114,7 @@ const i18n = new VueI18n({
 })

 Vue.use(Element, {
-  i18n: (key, value) => i18n._t(key, value)
+  i18n: (key, value) => i18n.t(key, value)
 })

 new Vue({ i18n }).$mount('#app')
@@ -225,4 +225,4 @@ ElementLocale.i18n((key, value) => i18n.t(key, value))
  <li>匈牙利语（hu）</li>
 </ul>

-如果你需要使用其他的语言，欢迎贡献 PR：只需在 [这里](https://github.com/ElemeFE/element/tree/master/src/locale/lang) 添加一个语言配置文件即可。
+如果你需要使用其他的语言，欢迎贡献 PR：只需在 [这里](https://github.com/ElemeFE/element/tree/dev/src/locale/lang) 添加一个语言配置文件即可。
--- a/examples/docs/zh-CN/menu.md
+++ b/examples/docs/zh-CN/menu.md
@@ -293,7 +293,7 @@
 ### Menu Events
 | 事件名称      | 说明    | 回调参数      |
 |---------- |-------- |---------- |
-| select  | 菜单激活回调 | index: 选中菜单项的 indexPath: 选中菜单项的 index path  |
+| select  | 菜单激活回调 | index: 选中菜单项的 index, indexPath: 选中菜单项的 index path  |
 | open  | sub-menu 展开的回调 | index: 打开的 sub-menu 的 index， indexPath: 打开的 sub-menu 的 index path  |
 | close  | sub-menu 收起的回调 | index: 收起的 sub-menu 的 index， indexPath: 收起的 sub-menu 的 index path  |

--- a/examples/docs/zh-CN/select.md
+++ b/examples/docs/zh-CN/select.md
@@ -609,7 +609,7 @@

 ### 创建条目
 可以创建并选中选项中不存在的条目
-:::demo 使用`allow-create`属性即可通过在输入框中输入文字来创建新的条目。注意此时`filterable`必须为真。
+:::demo 使用`allow-create`属性即可通过在输入框中输入文字来创建新的条目。注意此时`filterable`必须为真。本例还使用了`default-first-option`属性，在该属性打开的情况下，按下回车就可以选中当前选项列表中的第一个选项，无需使用鼠标或键盘方向键进行定位。
 ```html
 <template>
  <el-select
@@ -617,6 +617,7 @@
    multiple
    filterable
    allow-create
+    default-first-option
    placeholder="请选择文章标签">
    <el-option
      v-for="item in options5"
--- a/examples/docs/zh-CN/table.md
+++ b/examples/docs/zh-CN/table.md
@@ -1449,7 +1449,7 @@
 ### 自定义列模板

 自定义列的显示内容，可组合其他组件使用。
-:::demo 通过 `Scoped slot` 可以获取到 row, column, $index 和 store（table 内部的状态管理）的数据，用法参考 demo。(`1.1` 后支持通过 [Scoped slot](https://vuejs.org/v2/guide/components.html#Scoped-Slots) 自定义模板。之前的 `inline-template` 同样适用，但不推荐。)
+:::demo 通过 `Scoped slot` 可以获取到 row, column, $index 和 store（table 内部的状态管理）的数据，用法参考 demo。
 ```html
 <template>
  <el-table
@@ -2008,7 +2008,7 @@
 | row-class-name | 行的 className 的回调方法，也可以使用字符串为所有行设置一个固定的 className。 | Function({row, rowIndex})/String | — | — |
 | row-style | 行的 style 的回调方法，也可以使用一个固定的 Object 为所有行设置一样的 Style。 | Function({row, rowIndex})/Object | — | — |
 | cell-class-name | 单元格的 className 的回调方法，也可以使用字符串为所有单元格设置一个固定的 className。 | Function({row, column, rowIndex, columnIndex})/String | — | — |
-| cell-style | 单元格的 style 的回调方法，也可以使用一个固定的 Object 为所有单元格设置一样的 Style。 | Function({row, rowIndex, rowIndex, columnIndex})/Object | — | — |
+| cell-style | 单元格的 style 的回调方法，也可以使用一个固定的 Object 为所有单元格设置一样的 Style。 | Function({row, column, rowIndex, columnIndex})/Object | — | — |
 | header-row-class-name | 表头行的 className 的回调方法，也可以使用字符串为所有表头行设置一个固定的 className。 | Function({row, rowIndex})/String | — | — |
 | header-row-style | 表头行的 style 的回调方法，也可以使用一个固定的 Object 为所有表头行设置一样的 Style。 | Function({row, rowIndex})/Object | — | — |
 | header-cell-class-name | 表头单元格的 className 的回调方法，也可以使用字符串为所有表头单元格设置一个固定的 className。 | Function({row, column, rowIndex, columnIndex})/String | — | — |
--- a/examples/docs/zh-CN/tree.md
+++ b/examples/docs/zh-CN/tree.md
@@ -936,6 +936,7 @@
 | empty-text            | 内容为空的时候展示的文本                             | String                      | —    | —     |
 | node-key              | 每个树节点用来作为唯一标识的属性，整棵树应该是唯一的               | String                      | —    | —     |
 | props                 | 配置选项，具体看下表                               | object                      | —    | —     |
+| render-after-expand   | 是否在第一次展开某个树节点后才渲染其子节点         | boolean                      | —    | true |
 | load                  | 加载子树数据的方法                                | function(node, resolve)     | —    | —     |
 | render-content        | 树节点的内容区的渲染 Function                      | Function(h, { node, data, store }        | —    | —     |
 | highlight-current     | 是否高亮当前选中节点，默认值是 false。                   | boolean                     | —    | false |
--- a/examples/docs/zh-CN/upload.md
+++ b/examples/docs/zh-CN/upload.md
@@ -115,6 +115,9 @@
      },
      handleExceed(files, fileList) {
        this.$message.warning(`当前限制选择 3 个文件，本次选择了 ${files.length} 个文件，共选择了 ${files.length + fileList.length} 个文件`);
+      },
+      beforeRemove(file, fileList) {
+        return this.$confirm(`确定移除 ${ file.name }？`);
      }
    }
  }
@@ -126,13 +129,14 @@

 ### 点击上传

-:::demo 通过 slot 你可以传入自定义的上传按钮类型和文字提示。可通过设置 `limit` 和 `on-exceed` 来限制上传文件的个数和定义超出限制时的行为。
+:::demo 通过 slot 你可以传入自定义的上传按钮类型和文字提示。可通过设置`limit`和`on-exceed`来限制上传文件的个数和定义超出限制时的行为。可通过设置`before-remove`来阻止文件移除操作。
 ```html
 <el-upload
  class="upload-demo"
  action="https://jsonplaceholder.typicode.com/posts/"
  :on-preview="handlePreview"
  :on-remove="handleRemove"
+  :before-remove="beforeRemove"
  multiple
  :limit="3"
  :on-exceed="handleExceed"
@@ -156,6 +160,9 @@
      },
      handleExceed(files, fileList) {
        this.$message.warning(`当前限制选择 3 个文件，本次选择了 ${files.length} 个文件，共选择了 ${files.length + fileList.length} 个文件`);
+      },
+      beforeRemove(file, fileList) {
+        return this.$confirm(`确定移除 ${ file.name }？`);
      }
    }
  }
@@ -419,6 +426,7 @@
 | on-progress | 文件上传时的钩子 | function(event, file, fileList) | — | — |
 | on-change | 文件状态改变时的钩子，添加文件、上传成功和上传失败时都会被调用 | function(file, fileList) | — | — |
 | before-upload | 上传文件之前的钩子，参数为上传的文件，若返回 false 或者返回 Promise 且被 reject，则停止上传。 | function(file) | — | — |
+| before-remove | 删除文件之前的钩子，参数为上传的文件和文件列表，若返回 false 或者返回 Promise 且被 reject，则停止上传。| function(file, fileList) | — | — |
 | list-type | 文件列表的类型 | string | text/picture/picture-card | text |
 | auto-upload | 是否在选取文件后立即进行上传 | boolean | — | true |
 | file-list | 上传的文件列表, 例如: [{name: 'food.jpg', url: 'https://xxx.cdn.com/xxx.jpg'}] | array | — | [] |
--- a/examples/pages/es/changelog.vue
+++ b/examples/pages/es/changelog.vue
@@ -1,188 +0,0 @@
-<style>
-  .page-changelog {
-    padding-bottom: 100px;
-
-    .fr {
-      float: right;
-      padding: 0;
-
-      &.el-button {
-        transform: translateY(-3px);
-      }
-
-      a {
-        display: block;
-        padding: 10px 15px;
-        color: #333;
-      }
-
-      &:hover a {
-        color: #409EFF;
-      }
-    }
-
-    .heading {
-      font-size: 24px;
-      margin-bottom: 60px;
-      color: #333;
-    }
-
-    .timeline {
-      padding: 0;
-      padding-bottom: 10px;
-      position: relative;
-      color: #5e6d82;
-
-      > li {
-        position: relative;
-        padding-bottom: 15px;
-        list-style: none;
-        line-height: 1.8;
-        border: 1px solid #ddd;
-        border-radius: 4px;
-
-        &:not(:last-child) {
-          margin-bottom: 50px;
-        }
-      }
-
-      ul {
-        padding: 30px 30px 15px;
-
-        ul {
-          padding: 0;
-          padding-top: 5px;
-          padding-left: 27px;
-
-          li {
-            padding-left: 0;
-            color: #555;
-            word-break: normal;
-          }
-
-          li::before {
-            content: '';
-            circle: 4px #fff;
-            border: solid 1px #333;
-            margin-right: -12px;
-            display: inline-block;
-            vertical-align: middle;
-          }
-        }
-      }
-
-      li li {
-        font-size: 16px;
-        list-style: none;
-        padding-left: 20px;
-        padding-bottom: 5px;
-        color: #333;
-        word-break: break-all;
-
-        &:before {
-          content: '';
-          circle: 6px #333;
-          transform: translateX(-20px);
-          display: inline-block;
-          vertical-align: middle;
-        }
-      }
-  
-      i {
-        padding: 0 20px;
-        display: inline-block;
-      }
-
-      h3 {
-        margin:0;
-        padding: 15px 30px;
-        border-bottom: 1px solid #ddd;
-        font-size: 20px;
-        color: #333;
-        font-weight: bold;
-
-        a {
-          opacity: 1;
-          font-size: 20px;
-          float: none;
-          margin-left: 0;
-          color: #333;
-        }
-      }
-
-      h4 {
-        margin: 0;
-        margin-bottom: -10px;
-        font-size: 18px;
-        padding-left: 54px;
-        padding-top: 30px;
-        font-weight: bold;
-      }
-
-      p {
-        margin: 0;
-      }
-
-      em {
-        position: absolute;
-        right: 30px;
-        font-style: normal;
-        top: 23px;
-        font-size: 16px;
-        color: #666;
-      }
-    }
-  }
-</style>
-<template>
-  <div class="page-changelog">
-    <div class="heading">
-      <el-button class="fr">
-        <a href="https://github.com/ElemeFE/element/releases" target="_blank">GitHub Releases</a>
-      </el-button>
-      Lista de cambios
-    </div>
-    <ul class="timeline" ref="timeline">
-    </ul>
-    <change-log ref="changeLog"></change-log>
-  </div>
-</template>
-<script>
-  import ChangeLog from '../../../CHANGELOG.es.md';
-
-  export default {
-    components: {
-      ChangeLog
-    },
-    data() {
-      return {
-        count: 3
-      };
-    },
-    mounted() {
-      const changeLog = this.$refs.changeLog;
-      const changeLogNodes = changeLog.$el.children;
-      let a = changeLogNodes[1].querySelector('a');
-      a && a.remove();
-      let release = changeLogNodes[1].textContent.trim();
-      let fragments = `<li><h3><a href="https://github.com/ElemeFE/element/releases/tag/v${release}" target="_blank">${release}</a></h3>`;
-
-      for (let len = changeLogNodes.length, i = 2; i < len; i++) {
-        let node = changeLogNodes[i];
-        a = changeLogNodes[i].querySelector('a');
-        a && a.getAttribute('class') === 'header-anchor' && a.remove();
-        if (node.tagName !== 'H3') {
-          fragments += changeLogNodes[i].outerHTML;
-        } else {
-          release = changeLogNodes[i].textContent.trim();
-          fragments += `</li><li><h3><a href="https://github.com/ElemeFE/element/releases/tag/v${release}" target="_blank">${release}</a></h3>`;
-        }
-      }
-      fragments = fragments.replace(/#(\d+)/g, '<a href="https://github.com/ElemeFE/element/issues/$1" target="_blank">#$1</a>');
-      fragments = fragments.replace(/@(\w+)/g, '<a href="https://github.com/$1" target="_blank">@$1</a>');
-      this.$refs.timeline.innerHTML = `${fragments}</li>`;
-
-      changeLog.$el.remove();
-    }
-  };
-</script>
--- a/examples/pages/es/component.vue
+++ b/examples/pages/es/component.vue
@@ -1,288 +0,0 @@
-<style>
-  .page-component__scroll {
-    height: calc(100% - 80px);
-    margin-top: 80px;
-
-    .el-scrollbar__wrap {
-      overflow-x: auto;
-    }
-  }
-
-  .page-component {
-    box-sizing: border-box;
-    height: 100%;
-  
-    &.page-container {
-      padding: 0;
-    }
-
-    .page-component__nav {
-      width: 240px;
-      position: fixed;
-      top: 0;
-      bottom: 0;
-      margin-top: 80px;
-      transition: padding-top .3s;
-
-      .el-scrollbar__wrap {
-        height: 100%;
-      }
-
-      &.is-extended {
-        padding-top: 0;
-      }
-    }
-
-    .side-nav {
-      height: 100%;
-      padding-top: 50px;
-      padding-bottom: 50px;
-      padding-right: 0;
-
-      & > ul {
-        padding-bottom: 50px;
-      }
-    }
-
-    .page-component__content {
-      padding-left: 270px;
-      padding-bottom: 100px;
-      box-sizing: border-box;
-    }
-
-    .content {
-      padding-top: 50px;
-
-      > {
-        h3 {
-          margin: 55px 0 20px;
-        }
-
-        table {
-          border-collapse: collapse;
-          width: 100%;
-          background-color: #fff;
-          font-size: 14px;
-          margin-bottom: 45px;
-          line-height: 1.5em;
-
-          strong {
-            font-weight: normal;
-          }
-
-          td, th {
-            border-bottom: 1px solid #d8d8d8;
-            padding: 15px;
-            max-width: 250px;
-          }
-
-          th {
-            text-align: left;
-            white-space: nowrap;
-            color: #666;
-            font-weight: normal;
-          }
-
-          td {
-            color: #333;
-          }
-
-          th:first-child, td:first-child {
-            padding-left: 10px;
-          }
-        }
-
-        ul:not(.timeline) {
-          margin: 10px 0;
-          padding: 0 0 0 20px;
-          font-size: 14px;
-          color: #5e6d82;
-          line-height: 2em;
-        }
-      }
-    }
-
-    .page-component-up {
-      background-color: #fff;
-      position: fixed;
-      right: 100px;
-      bottom: 150px;
-      size: 40px;
-      border-radius: 20px;
-      cursor: pointer;
-      transition: .3s;
-      box-shadow: 0 0 6px rgba(0,0,0, .12);
-
-      i {
-        color: #409EFF;
-        display: block;
-        line-height: 40px;
-        text-align: center;
-        font-size: 18px;
-      }
-
-      &.hover {
-        opacity: 1;
-      }
-    }
-    .back-top-fade-enter,
-    .back-top-fade-leave-active {
-      transform: translateY(-30px);
-      opacity: 0;
-    }
-  }
-
-  @media (max-width: 768px) {
-    .page-component {
-      .page-component__nav {
-        width: 100%;
-        position: static;
-        margin-top: 0;
-      }
-      .side-nav {
-        padding-top: 0;
-        padding-left: 50px;
-      }
-      .page-component__content {
-        padding-left: 10px;
-        padding-right: 10px;
-      }
-      .content {
-        padding-top: 0;
-      }
-      .content > table {
-        overflow: auto;
-        display: block;
-      }
-      .page-component-up {
-        display: none;
-      }
-    }
-  }
-</style>
-<template>
-  <el-scrollbar class="page-component__scroll" ref="componentScrollBar">
-  <div class="page-container page-component">
-    <el-scrollbar class="page-component__nav">
-      <side-nav :data="navsData[lang]" :base="`/${ lang }/component`"></side-nav>
-    </el-scrollbar>
-    <div class="page-component__content">
-      <router-view class="content"></router-view>
-      <footer-nav></footer-nav>
-    </div>
-    <transition name="back-top-fade">
-      <div
-        class="page-component-up"
-        :class="{ 'hover': hover }"
-        v-show="showBackToTop"
-        @mouseenter="hover = true"
-        @mouseleave="hover = false"
-        @click="toTop">
-        <i class="el-icon-caret-top"></i>
-      </div>
-    </transition>
-  </div>
-  </el-scrollbar>
-</template>
-<script>
-  import bus from '../../bus';
-  import navsData from '../../nav.config.json';
-  import throttle from 'throttle-debounce/throttle';
-
-  export default {
-    data() {
-      return {
-        lang: this.$route.meta.lang,
-        navsData,
-        hover: false,
-        showBackToTop: false,
-        scrollTop: 0,
-        showHeader: true,
-        componentScrollBar: null,
-        componentScrollBoxElement: null
-      };
-    },
-    watch: {
-      '$route.path'() {
-        // 触发伪滚动条更新
-        this.componentScrollBox.scrollTop = 0;
-        this.$nextTick(() => {
-          this.componentScrollBar.update();
-        });
-      }
-    },
-    methods: {
-      renderAnchorHref() {
-        if (/changelog/g.test(location.href)) return;
-        const anchors = document.querySelectorAll('h2 a,h3 a');
-        const basePath = location.href.split('#').splice(0, 2).join('#');
-
-        [].slice.call(anchors).forEach(a => {
-          const href = a.getAttribute('href');
-          a.href = basePath + href;
-        });
-      },
-
-      goAnchor() {
-        if (location.href.match(/#/g).length > 1) {
-          const anchor = location.href.match(/#[^#]+$/g);
-          if (!anchor) return;
-          const elm = document.querySelector(anchor[0]);
-          if (!elm) return;
-
-          setTimeout(_ => {
-            this.componentScrollBox.scrollTop = elm.offsetTop;
-          }, 50);
-        }
-      },
-      toTop() {
-        this.hover = false;
-        this.showBackToTop = false;
-        this.componentScrollBox.scrollTop = 0;
-      },
-
-      handleScroll() {
-        const scrollTop = this.componentScrollBox.scrollTop;
-        this.showBackToTop = scrollTop >= 0.5 * document.body.clientHeight;
-        if (this.showHeader !== this.scrollTop > scrollTop) {
-          this.showHeader = this.scrollTop > scrollTop;
-        }
-        if (scrollTop === 0) {
-          this.showHeader = true;
-        }
-        if (!this.navFaded) {
-          bus.$emit('fadeNav');
-        }
-        this.scrollTop = scrollTop;
-      }
-    },
-    created() {
-      bus.$on('navFade', val => {
-        this.navFaded = val;
-      });
-      window.addEventListener('hashchange', () => {
-        if (location.href.match(/#/g).length < 2) {
-          document.documentElement.scrollTop = document.body.scrollTop = 0;
-          this.renderAnchorHref();
-        } else {
-          this.goAnchor();
-        }
-      });
-    },
-    mounted() {
-      this.componentScrollBar = this.$refs.componentScrollBar;
-      this.componentScrollBox = this.componentScrollBar.$el.querySelector('.el-scrollbar__wrap');
-      this.throttledScrollHandler = throttle(300, this.handleScroll);
-      this.componentScrollBox.addEventListener('scroll', this.throttledScrollHandler);
-      this.renderAnchorHref();
-      this.goAnchor();
-      document.body.classList.add('is-component');
-    },
-    destroyed() {
-      document.body.classList.remove('is-component');
-    },
-    beforeDestroy() {
-      this.componentScrollBox.removeEventListener('scroll', this.throttledScrollHandler);
-    }
-  };
-</script>
--- a/examples/pages/es/design.vue
+++ b/examples/pages/es/design.vue
@@ -1,82 +0,0 @@
-<style scoped>
-  .cards {
-    margin: 30px 0 70px;
-  }
-  .card {
-    background: #fbfcfd;
-    height: 204px;
-    text-align: center;
-    
-    img {
-      margin: 40px auto 25px;
-      width: 80px;
-      height: 80px;
-    }
-    h4 {
-      font-size: 18px;
-      color: #1f2d3d;
-      font-weight: normal;
-      margin: 0;
-    }
-    span {
-      font-size: 14px;
-      color: #99a9bf;
-    }
-  }
-</style>
-<template>
-  <div>
-    <h2>Disciplinas de diseño</h2>
-    <el-row :gutter="14" class="cards">
-      <el-col :xs="12" :sm="6">
-        <div class="card">
-          <img src="~examples/assets/images/consistency.png" alt="Consistency">
-          <h4>Consistencia</h4>
-          <span></span>
-        </div>
-      </el-col>
-      <el-col :xs="12" :sm="6">
-        <div class="card">
-          <img src="~examples/assets/images/feedback.png" alt="Feedback">
-          <h4>Comentarios</h4>
-          <span></span>
-        </div>
-      </el-col>
-      <el-col :xs="12" :sm="6">
-        <div class="card">
-          <img src="~examples/assets/images/efficiency.png" alt="Efficiency">
-          <h4>Eficiencia</h4>
-          <span></span>
-        </div>
-      </el-col>
-      <el-col :xs="12" :sm="6">
-        <div class="card">
-          <img src="~examples/assets/images/controllability.png" alt="Controllability">
-          <h4>Control</h4>
-          <span></span>
-        </div>
-      </el-col>
-    </el-row>
-    <h3>Consistencia</h3>
-    <ul>
-      <li><strong>Consistente con la vida real: </strong>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.</li>
-      <li><strong>Consistente dentro de la interfaz: </strong>todos los elementos deben ser consistentes, como: estilo de diseño, iconos y texto, posición de los elementos, etc.</li>
-    </ul>
-    <h3>Comentarios</h3>
-    <ul>
-      <li><strong>Comentarios sobre la operación: </strong>Permite a los usuarios percibir claramente las operaciones mediante actualizaciones de estilo y efectos interactivos.</li>
-      <li><strong>Comentarios visuales: </strong>Refleja el estado actual al actualizar o reorganizar los elementos de la página.</li>
-    </ul>
-    <h3>Eficiencia</h3>
-    <ul>
-      <li><strong>Simplifica el proceso: </strong>Mantiene el proceso operativo simple e intuitivo.</li>
-      <li><strong>Bien definido y claro: </strong>Expresa las intenciones claramente para que los usuarios puedan comprender y tomar decisiones rápidamente.</li>
-      <li><strong>Fácil de identificar: </strong>La interfaz debe ser sencilla, lo que permitirá a los usuarios a identificar y liberarlos de la memorización y recuerdos.</li>
-    </ul>
-    <h3>Control</h3>
-    <ul>
-      <li><strong>Toma de decisiones: </strong>Brindar consejos sobres las operaciones es aceptable, pero no tomar desiciones para los usuarios.</li>
-      <li><strong>Consecuencias controladas: </strong>Los usuarios deben tener la libertad de operar, incluida la cancelación, el aborto o la terminación de las operaciones actuales.</li>
-    </ul>
-  </div>
-</template>
--- a/examples/pages/es/guide.vue
+++ b/examples/pages/es/guide.vue
@@ -1,91 +0,0 @@
-<style>
-  .page-guide {
-    padding: 55px 30px 95px;
-    box-sizing: border-box;
-
-    .content {
-      padding-left: 25px;
-      margin-left: -1px;
-      h2 {
-        margin-bottom: 10px;
-      }
-
-      h3 {
-        font-size: 22px;
-        font-weight: normal;
-        margin: 0 0 30px;
-        color: #1f2d3d;
-      }
-      p {
-        line-height: 1.6;
-        font-size: 14px;
-        color: #5e6d82;
-      }
-      ul {
-        margin-bottom: 50px;
-        padding-left: 0;
-      }
-      li {
-        font-size: 14px;
-        margin-bottom: 10px;
-        color: #99a9bf;
-        list-style: none;
-
-        &:before {
-          content: '';
-          display: inline-block;
-          width: 4px;
-          height: @width;
-          border-radius: 50%;
-          vertical-align: middle;
-          background-color: #5e6d82;
-          margin-right: 5px;
-        }
-
-        strong {
-          color: #5e6d82;
-          font-weight: 400;
-        }
-      }
-    }
-  }
-
-  @media (max-width: 768px) {
-    .page-guide {
-      .content {
-        padding-left: 0;
-      }
-    }
-  }
-</style>
-<template>
-  <div class="page-container page-guide">
-    <el-row>
-      <el-col :xs="24" :sm="5">
-        <side-nav :data="navsData" :base="`/${ lang }/guide`"></side-nav>
-      </el-col>
-      <el-col :xs="24" :sm="19">
-        <router-view class="content"></router-view>
-      </el-col>
-    </el-row>
-  </div>
-</template>
-<script>
-  export default {
-    data() {
-      return {
-        lang: this.$route.meta.lang,
-        navsData: [
-          {
-            path: '/design',
-            name: 'Disciplinas de diseño'
-          },
-          {
-            path: '/nav',
-            name: 'Navegación'
-          }
-        ]
-      };
-    }
-  };
-</script>
--- a/examples/pages/es/index.vue
+++ b/examples/pages/es/index.vue
@@ -1,323 +0,0 @@
-<style scoped>
-  .banner {
-    text-align: center;
-  }
-  .banner-desc {
-    padding-top: 20px;
-
-    h1 {
-      font-size: 34px;
-      margin: 0;
-      line-height: 48px;
-      color: #555;
-    }
-
-    p {
-      font-size: 18px;
-      line-height: 28px;
-      color: #888;
-      margin: 10px 0 5px;
-    }
-  }
-  .jumbotron {
-    width: 890px;
-    height: 465px;
-    margin: 30px auto 100px;
-    position: relative;
-
-    div {
-      width: 100%;
-      height: 100%;
-      background-color: transparent;
-      position: absolute;
-      top: 0;
-      left: 0;
-    }
-    
-    img {
-      position: absolute;
-    }
-    
-    .jumbotron-cloud-1 {
-      right: 0;
-      top: 0;
-      height: 55px;
-    }
-
-    .jumbotron-plant-2 {
-      left: 60px;
-      top: 200px;
-    }
-    
-    .jumbotron-web {
-      height: 385px;
-      top: 35px;
-      left: 110px;
-    }
-    
-    .jumbotron-cloud-2 {
-      left: 0;
-      top: 50px;
-      height: 55px;
-    }
-    
-    .jumbotron-compo-1 {
-      left: 94px;
-      height: 90px;
-      top: 220px;
-    }
-
-    .jumbotron-compo-2 {
-      right: 73px;
-      top: 60px;
-      height: 124px;
-    }
-  
-    .jumbotron-compo-3 {
-      right: 42px;
-      top: 200px;
-      height: 120px;
-    }
-
-    .jumbotron-plant-1 {
-      bottom: 0;
-      left: 30px;
-      height: 185px;
-    }
-
-    .jumbotron-figure-1 {
-      bottom: 0;
-      right: 180px;
-      height: 140px;
-    }
-  
-    .jumbotron-figure-2 {
-      bottom: 0;
-      right: 10px;
-      height: 68px;
-    }
-  }
-  .cards {
-    margin: 0 auto 110px;
-    width: 1140px;
-
-    .container {
-      @utils-clearfix;
-      padding: 0;
-      margin: 0 -11px;
-      width: auto;
-    }
-
-    li {
-      width: 33.33333%;
-      padding: 0 19px;
-      box-sizing: border-box;
-      float: left;
-      list-style: none;
-    }
-
-    img {
-      width: 160px;
-      height: 120px;
-    }
-  }
-  .card {
-    height: 430px;
-    width: 100%;
-    background:#ffffff;
-    border:1px solid #eaeefb;
-    border-radius:5px;
-    box-sizing: border-box;
-    text-align: center;
-    position: relative;
-    transition: all .3s ease-in-out;
-    bottom: 0;
-
-    img {
-      margin: 66px auto 60px;
-    }
-    h3 {
-      margin: 0;
-      font-size: 18px;
-      color: #1f2f3d;
-      font-weight: normal;
-    }
-    p {
-      font-size: 14px;
-      color: #99a9bf;
-      padding: 0 25px;
-      line-height: 20px;
-    }
-    a {
-      height: 53px;
-      line-height: 52px;
-      font-size: 14px;
-      color: #409EFF;
-      text-align: center;
-      border: 0;
-      border-top: 1px solid #eaeefb;
-      padding: 0;
-      cursor: pointer;
-      width: 100%;
-      position: absolute;
-      bottom: 0;
-      left: 0;
-      background-color: #fff;
-      border-radius: 0 0 5px 5px;
-      transition: all .3s;
-      text-decoration: none;
-      display: block;
-
-      &:hover {
-        color: #fff;
-        background: #409EFF;
-      }
-    }
-    &:hover {
-      bottom: 6px;
-      box-shadow: 0 6px 18px 0 rgba(232,237,250,0.50);
-    }
-  }
-  @media (max-width: 1140px) {
-    .cards {
-      width: 100%;
-      .container {
-        width: 100%;
-      }
-    }
-    .banner .container {
-      width: 100%;
-      box-sizing: border-box;
-    }
-    .banner img {
-      right: 0;
-    }
-  }
-
-  @media (max-width: 1000px) {
-    .banner .container {
-      img {
-        display: none;
-      }
-    }
-    .jumbotron {
-      display: none;
-    }
-  }
-
-  @media (max-width: 768px) {
-    .cards {
-      li {
-        width: 80%;
-        margin: 0 auto 20px;
-        float: none;
-      }
-      .card {
-        height: auto;
-        padding-bottom: 54px;
-      }
-    }
-    .banner-stars {
-      display: none;
-    }
-    .banner-desc {
-      #line2 {
-        display: none;
-      }
-      h2 {
-        font-size: 32px;
-      }
-      p {
-        width: auto;
-      }
-    }
-  }
-</style>
-<template>
-  <div>
-    <div class="banner">
-      <div class="banner-desc">
-        <h1>Un kit de interfaz de usuario para la web</h1>
-        <p>Element, una librería de componentes basada en Vue 2.0 para desarrolladores, diseñadores y jefes de producto</p>
-      </div>
-    </div>
-    <div class="jumbotron">
-      <div>
-        <img class="jumbotron-plant-2" src="~examples/assets/images/plant-2.png" alt="">
-        <img class="jumbotron-web" src="~examples/assets/images/web.png" alt="">
-        <img class="jumbotron-plant-1" src="~examples/assets/images/plant-1.png" alt="">
-        <img class="jumbotron-figure-1" src="~examples/assets/images/figure-1.png" alt="">
-        <img class="jumbotron-figure-2" src="~examples/assets/images/figure-2.png" alt="">
-      </div>
-      <div data-hover-layer="0">
-        <img class="jumbotron-cloud-1" src="~examples/assets/images/cloud-1.png" alt="">
-        <img class="jumbotron-cloud-2" src="~examples/assets/images/cloud-2.png" alt="">
-      </div>
-      <div data-hover-layer="1">
-        <img class="jumbotron-compo-1" src="~examples/assets/images/compo-1.png" alt="">
-        <img class="jumbotron-compo-2" src="~examples/assets/images/compo-2.png" alt="">
-        <img class="jumbotron-compo-3" src="~examples/assets/images/compo-3.png" alt="">
-      </div>
-    </div>
-    <div class="cards">
-      <ul class="container">
-        <li>
-          <div class="card">
-            <img src="~examples/assets/images/guide.png" alt="">
-            <h3>Guía</h3>
-            <p>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.</p>
-            <router-link
-              active-class="active"
-              to="/es/guide/design"
-              exact>Ver detalle
-            </router-link>
-          </div>
-        </li>
-        <li>
-          <div class="card">
-            <img src="~examples/assets/images/component.png" alt="">
-            <h3>Componentes</h3>
-            <p>Experimenta la interacción al pasear con los ejemplos de los componentes. Utiliza el código encapsulado para mejorar la eficiencia en el desarrollo.</p>
-            <router-link
-              active-class="active"
-              to="/es/component/layout"
-              exact>Ver detalle
-            </router-link>
-          </div>
-        </li>
-        <li>
-          <div class="card">
-            <img src="~examples/assets/images/resource.png" alt="">
-            <h3>Recursos</h3>
-            <p>Descarga los recursos de diseño relevantes para dar forma a un prototipo o borrador, aumentando la eficiencia del diseño.</p>
-            <router-link
-              active-class="active"
-              to="/es/resource"
-              exact>Ver detalle
-            </router-link>
-          </div>
-        </li>
-      </ul>
-    </div>
-  </div>
-</template>
-<script>
-  import { Hover } from 'perspective.js';
-
-  export default {
-    mounted() {
-      new Hover('.jumbotron', { // eslint-disable-line
-        max: 3,
-        scale: 1,
-        perspective: 700,
-        layers: [{
-          multiple: 0.01,
-          reverseTranslate: true
-        }, {
-          multiple: 0.02,
-          reverseTranslate: true
-        }]
-      });
-    }
-  };
-</script>
--- a/examples/pages/es/nav.vue
+++ b/examples/pages/es/nav.vue
@@ -1,166 +0,0 @@
-<style scoped>
-  h3 {
-    margin-bottom: 15px;
-  }
-  .block {
-    margin-bottom: 55px;
-  }
-  p {
-    margin: 0 0 15px;
-  }
-  .nav-demos {
-    p {
-      margin-bottom: 50px;
-    }
-    h5 {
-      margin: 0;
-    }
-    img {
-      padding: 15px;
-      background-color: #F9FAFC;
-      width: 100%;
-      margin-bottom: 15px;
-      cursor: pointer;
-    }
-  }
-  .dialog-img {
-    position: fixed;
-    overflow: auto;
-    top: 0;
-    right: 0;
-    bottom: 0;
-    left: 0;
-    z-index: 1000;
-    -webkit-overflow-scrolling: touch;
-    outline: 0;
-  
-    .imgWrap {
-      margin: 0 auto;
-      position: relative;
-      top: 100px;
-      padding-bottom: 50px;
-    }
-    img {
-      display: block;
-      width: 100%;
-    }
-  }
-  .mask {
-    position: fixed;
-    top: 0;
-    right: 0;
-    left: 0;
-    bottom: 0;
-    background-color: #373737;
-    background-color: rgba(55, 55, 55, 0.6);
-    height: 100%;
-    z-index: 1000;
-  }
-  .zoom-enter-active,
-  .zoom-leave-active {
-    transition: transform .3s cubic-bezier(0.78, 0.14, 0.15, 0.86), opacity .3s cubic-bezier(0.78, 0.14, 0.15, 0.86);
-  }
-  .zoom-enter,
-  .zoom-leave-active {
-    transform: scale(0.3);
-    opacity: 0;
-  }
-  .fade-enter-active,
-  .fade-leave-active {
-    transition: opacity .3s cubic-bezier(0.78, 0.14, 0.15, 0.86);
-  }
-  .fade-enter,
-  .fade-leave-active {
-    opacity: 0;
-  }
-</style>
-<template>
-  <div>
-    <h2>Navegación</h2>
-    <div class="block">
-      <p>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'.</p>
-    </div>
-    <div class="block">
-      <h3>Elige la navegación correcta</h3>
-      <p>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.</p>
-    </div>
-    <div class="block">
-      <h3>Navegación lateral</h3>
-      <el-row :gutter="20">
-        <el-col :span="9">
-          <p>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.</p>
-        </el-col>
-        <el-col :span="15" class="nav-demos">
-          <img src="~examples/assets/images/navbar_1.png" alt="Categorías de Nivel 1" @click="enlarge(846, $event)">
-          <h5>Categorías de Nivel 1</h5>
-          <p>Adecuado para sitios con una estructura simple con un solo nivel de páginas. No se necesita un 'breadcrumb'.</p>
-          <img src="~examples/assets/images/navbar_2.png" alt="Categorías de Nivel 2" @click="enlarge(846, $event)">
-          <h5>Categorías de Nivel 2</h5>
-          <p>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.</p>
-          <img src="~examples/assets/images/navbar_3.png" alt="Categorías de Nivel 3" @click="enlarge(846, $event)">
-          <h5>Categorías de Nivel 3</h5>
-          <p>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.</p>
-        </el-col>
-      </el-row>
-    </div>
-    <div class="block">
-      <h3>Navegación superior</h3>
-      <el-row>
-        <el-col :span="10">
-          <p>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.</p>
-        </el-col>
-        <el-col :span="14" class="nav-demos">
-          <img src="~examples/assets/images/navbar_0.png" alt="" @click="enlarge(846, $event)">
-          <p>Adecuado para sitios con pocas navegaciones y grandes trozos.</p>
-        </el-col>
-      </el-row>
-    </div>
-    <transition name="fade">
-      <div class="mask" v-show="showDialog" @click="showDialog = false"></div>
-    </transition>
-    <transition name="zoom">
-      <div class="dialog-img" :style='imgWrapStyle' v-show="showDialog" @click="showDialog = false">
-        <div class="imgWrap" :style="imgStyle">
-          <img :src="imgUrl" alt="">
-        </div>
-      </div>
-    </transition>
-  </div>
-</template>
-<script>
-  export default {
-    data() {
-      return {
-        imgUrl: '',
-        imgBound: {},
-        showDialog: false,
-        imgStyle: {},
-        imgWrapStyle: {}
-      };
-    },
-    watch: {
-      showDialog(val) {
-        document.body.style.overflow = val ? 'hidden' : '';
-      }
-    },
-    methods: {
-      enlarge(imgWidth, ev) {
-        var imgNode = ev.target;
-        // var bound = imgNode.getBoundingClientRect();
-        var offset = {};
-        var doc = document;
-
-        offset.left = (doc.body.scrollWidth - imgWidth) / 2;
-        offset.top = 100;
-
-        this.imgUrl = imgNode.src;
-        this.imgBound = imgNode.getBoundingClientRect();
-
-        this.imgWrapStyle.transformOrigin = `${ev.clientX}px ${ev.clientY}px`;
-        // this.imgStyle.transformOrigin = `${ev.clientX}px ${ev.clientY}px`;
-        this.imgStyle.width = imgWidth + 'px';
-        this.showDialog = true;
-      }
-    }
-  };
-</script>
--- a/examples/pages/es/resource.vue
+++ b/examples/pages/es/resource.vue
@@ -1,160 +0,0 @@
-<style scoped>
-  .page-resource {
-    padding-top: 55px;
-    box-sizing: border-box;
-    
-    .resource-placeholder {
-      margin: 50px auto 100px;
-      text-align: center;
-      
-      img {
-        width: 150px;
-      }
-      
-      h4 {
-        margin: 20px 0 16px;
-        font-size: 16px;
-        color: #1f2f3d;
-        line-height: 1;
-      }
-      
-      p {
-        margin: 0;
-        font-size: 14px;
-        color: #99a9bf;
-        line-height: 1;
-      }
-    }
-  }
-  .cards {
-    margin: 35px auto 110px;
-
-    .container {
-      @utils-clearfix;
-      padding: 0;
-      margin: 0 -11px;
-      width: auto;
-    }
-
-    li {
-      width: 33.33333%;
-      padding: 0 11px;
-      box-sizing: border-box;
-      float: left;
-      list-style: none;
-    }
-  }
-  h2 {
-    font-size: 28px;
-    margin: 0;
-  }
-  p {
-    font-size: 14px;
-    color: #5e6d82;
-  }
-  .card {
-    height: 394px;
-    width: 100%;
-    background:#ffffff;
-    border:1px solid #eaeefb;
-    border-radius:5px;
-    box-sizing: border-box;
-    text-align: center;
-    position: relative;
-    transition: bottom .3s;
-    bottom: 0;
-
-    img {
-      margin: 75px auto 35px;
-      height: 87px;
-    }
-    h3 {
-      margin: 0 0 10px;
-      font-size: 18px;
-      color: #1f2f3d;
-      font-weight: normal;
-      height: 22px;
-    }
-    p {
-      font-size: 14px;
-      color: #99a9bf;
-      padding: 0 30px;
-      margin: 0;
-      line-height: 1.6;
-    }
-    a {
-      height: 42px;
-      width: 190px;
-      display: inline-block;
-      line-height: @height;
-      font-size: 14px;
-      background-color: #409EFF;
-      color: #fff;
-      text-align: center;
-      border: 0;
-      padding: 0;
-      cursor: pointer;
-      border-radius: 2px;
-      transition: all .3s;
-      text-decoration: none;
-      margin-top: 20px;
-    }
-  }
-  @media (max-width: 850px) {
-    .cards {
-      li {
-        max-width: 500px;
-        float: none;
-        margin: 10px auto 30px;
-        width: 80%;
-        .card {
-          height: auto;
-          padding-bottom: 20px;
-        }
-      }
-      h3 {
-        height: auto;
-      }
-    }
-  }
-</style>
-<template>
-  <div class="page-container page-resource">
-    <h2>Recursos</h2>
-    <!--<div class="resource-placeholder">-->
-      <!--<img src="~examples/assets/images/resource-placeholder.svg" alt="">-->
-      <!--<h4>En construcción</h4>-->
-      <!--<p>Se están desarrollando más recursos</p>-->
-    <!--</div>-->
-    
-    <p>Se están desarrollando más recursos</p>
-    <div class="cards">
-      <ul class="container">
-        <!--<li>-->
-          <!--<div class="card">-->
-            <!--<img src="~examples/assets/images/Axure-Components.svg" alt="">-->
-            <!--<h3>Componetes de Axure</h3>-->
-            <!--<p>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.</p>-->
-            <!--<a href="https://github.com/ElementUI/Resources/raw/master/Element_Components_v1.1.0.rplib">Descarga</a>-->
-          <!--</div>-->
-        <!--</li>-->
-        <li>
-          <div class="card">
-            <img src="~examples/assets/images/Sketch-Template.svg" alt="">
-            <h3>Plantilla de Sketch</h3>
-            <p>Aplica componentes de la plantilla Element para que pueda mejorarla eficiencia del diseño manteniendo un estilo visual unificado.</p>
-            <a href="https://github.com/ElementUI/Resources/raw/master/Element%20UI%20Kit_v2.0.sketch">Descarga</a>
-          </div>
-        </li>
-        <!--<li>-->
-          <!--<div class="card">-->
-            <!--<img src="~examples/assets/images/Module.svg" alt="">-->
-            <!--<h3>Documentación de diseño de interacción</h3>-->
-            <!--<p>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.</p>-->
-            <!--<a href="https://github.com/ElementUI/Resources/raw/master/Element%20Components%20Documentation.zip">Descarga</a>-->
-          <!--</div>-->
-        <!--</li>-->
-      </ul>
-    </div>
-  </div>
-</template>
--- a/examples/pages/template/index.tpl
+++ b/examples/pages/template/index.tpl
@@ -19,10 +19,34 @@
      margin: 10px 0 5px;
    }
  }
+  .sponsor {
+    margin: 0 auto 50px;
+    display: flex;
+    width: 400px;
+    height: 100px;
+    justify-content: center;
+
+    img {
+      margin-right: 20px;
+    }
+
+    div {
+      display: flex;
+      flex-direction: column;
+      justify-content: center;
+    }
+
+    p {
+      margin: 0;
+      line-height: 1.8;
+      color: #999;
+      font-size: 14px;
+    }
+  }
  .jumbotron {
    width: 890px;
    height: 465px;
-    margin: 30px auto 100px;
+    margin: 30px auto;
    position: relative;

    div {
@@ -33,11 +57,11 @@
      top: 0;
      left: 0;
    }
-    
+
    img {
      position: absolute;
    }
-    
+
    .jumbotron-cloud-1 {
      right: 0;
      top: 0;
@@ -48,19 +72,19 @@
      left: 60px;
      top: 200px;
    }
-    
+
    .jumbotron-web {
      height: 385px;
      top: 35px;
      left: 110px;
    }
-    
+
    .jumbotron-cloud-2 {
      left: 0;
      top: 50px;
      height: 55px;
    }
-    
+
    .jumbotron-compo-1 {
      left: 94px;
      height: 90px;
@@ -72,7 +96,7 @@
      top: 60px;
      height: 124px;
    }
-  
+
    .jumbotron-compo-3 {
      right: 42px;
      top: 200px;
@@ -90,7 +114,7 @@
      right: 180px;
      height: 140px;
    }
-  
+
    .jumbotron-figure-2 {
      bottom: 0;
      right: 10px;
@@ -183,6 +207,7 @@
      width: 100%;
      .container {
        width: 100%;
+        margin: 0;
      }
    }
    .banner .container {
@@ -259,6 +284,13 @@
        <img class="jumbotron-compo-3" src="~examples/assets/images/compo-3.png" alt="">
      </div>
    </div>
+    <a class="sponsor" href="https://tipe.io/?ref=element" target="_blank">
+      <img width="35px" src="~examples/assets/images/tipe.svg" alt="tipe.io">
+      <div>
+        <p>Sponsored by Tipe.io</p>
+        <p>Next Generation API-first CMS</p>
+      </div>
+    </a>
    <div class="cards">
      <ul class="container">
        <li>
--- a/examples/versions.json
+++ b/examples/versions.json
@@ -1 +1 @@
-{"1.4.12":"1.4","2.0.8":"2.0"}
+{"1.4.12":"1.4","2.0.9":"2.0"}
--- a/package.json
+++ b/package.json
@@ -1,6 +1,6 @@
 {
  "name": "element-ui",
-  "version": "2.0.8",
+  "version": "2.0.9",
  "description": "A Component Library for Vue.js.",
  "main": "lib/element-ui.common.js",
  "files": [
--- a/packages/autocomplete/src/autocomplete.vue
+++ b/packages/autocomplete/src/autocomplete.vue
@@ -92,6 +92,8 @@
      name: String,
      size: String,
      value: String,
+      maxlength: Number,
+      minlength: Number,
      autofocus: Boolean,
      fetchSuggestions: Function,
      triggerOnFocus: {
--- a/packages/carousel/package.json
+++ b/packages/carousel/package.json
@@ -1,6 +1,6 @@
 {
  "name": "element-carousel",
-  "version": "1.0.0",
+  "version": "2.0.0",
  "description": "A carousel component for Vue.js.",
  "main": "lib/index.js",
  "keywords": [
--- a/packages/carousel/src/main.vue
+++ b/packages/carousel/src/main.vue
@@ -9,6 +9,7 @@
      :style="{ height: height }">
      <transition name="carousel-arrow-left">
        <button
+          type="button"
          v-if="arrow !== 'never'"
          v-show="arrow === 'always' || hover"
          @mouseenter="handleButtonEnter('left')"
@@ -20,6 +21,7 @@
      </transition>
      <transition name="carousel-arrow-right">
        <button
+          type="button"
          v-if="arrow !== 'never'"
          v-show="arrow === 'always' || hover"
          @mouseenter="handleButtonEnter('right')"
@@ -193,6 +195,7 @@ export default {
        return;
      }
      let length = this.items.length;
+      const oldIndex = this.activeIndex;
      if (index < 0) {
        this.activeIndex = length - 1;
      } else if (index >= length) {
@@ -200,6 +203,9 @@ export default {
      } else {
        this.activeIndex = index;
      }
+      if (oldIndex === this.activeIndex) {
+        this.resetItemPosition(oldIndex);
+      }
    },

    prev() {
--- a/packages/date-picker/package.json
+++ b/packages/date-picker/package.json
@@ -1,6 +1,6 @@
 {
  "name": "element-datepicker",
-  "version": "1.2.0",
+  "version": "2.0.0",
  "description": "A datepicker component for Vue.",
  "keywords": [
    "element",
--- a/packages/form/src/form-item.vue
+++ b/packages/form/src/form-item.vue
@@ -73,9 +73,12 @@
      size: String
    },
    watch: {
-      error(value) {
-        this.validateMessage = value;
-        this.validateState = value ? 'error' : '';
+      error: {
+        immediate: true,
+        handler(value) {
+          this.validateMessage = value;
+          this.validateState = value ? 'error' : '';
+        }
      },
      validateStatus(value) {
        this.validateState = value;
@@ -227,7 +230,7 @@
        var selfRules = this.rules;
        var requiredRule = this.required !== undefined ? { required: !!this.required } : [];

-        formRules = formRules ? getPropByPath(formRules, this.prop || '').v : [];
+        formRules = formRules ? getPropByPath(formRules, this.prop || '').o[this.prop || ''] : [];

        return [].concat(selfRules || formRules || []).concat(requiredRule);
      },
--- a/packages/loading/package.json
+++ b/packages/loading/package.json
@@ -1,6 +1,6 @@
 {
  "name": "element-loading",
-  "version": "1.0.0",
+  "version": "2.0.0",
  "description": "A loading component for Vue.js.",
  "keywords": [
    "element",
--- a/packages/loading/src/directive.js
+++ b/packages/loading/src/directive.js
@@ -76,6 +76,7 @@ exports.install = Vue => {
      const textExr = el.getAttribute('element-loading-text');
      const spinnerExr = el.getAttribute('element-loading-spinner');
      const backgroundExr = el.getAttribute('element-loading-background');
+      const customClassExr = el.getAttribute('element-loading-custom-class');
      const vm = vnode.context;
      const mask = new Mask({
        el: document.createElement('div'),
@@ -83,6 +84,7 @@ exports.install = Vue => {
          text: vm && vm[textExr] || textExr,
          spinner: vm && vm[spinnerExr] || spinnerExr,
          background: vm && vm[backgroundExr] || backgroundExr,
+          customClass: vm && vm[customClassExr] || customClassExr,
          fullscreen: !!binding.modifiers.fullscreen
        }
      });
@@ -105,6 +107,7 @@ exports.install = Vue => {
        el.mask &&
        el.mask.parentNode &&
        el.mask.parentNode.removeChild(el.mask);
+        toggleLoading(el, { value: false, modifiers: binding.modifiers });
      }
    }
  });
--- a/packages/pagination/package.json
+++ b/packages/pagination/package.json
@@ -1,6 +1,6 @@
 {
  "name": "element-pagination",
-  "version": "1.1.0",
+  "version": "2.0.0",
  "description": "A pagination component for Vue.js.",
  "keywords": [
    "element",
--- a/packages/select/src/select.vue
+++ b/packages/select/src/select.vue
@@ -691,16 +691,26 @@

      checkDefaultFirstOption() {
        this.hoverIndex = -1;
+        // highlight the created option
+        let hasCreated = false;
+        for (let i = this.options.length - 1; i >= 0; i--) {
+          if (this.options[i].created) {
+            hasCreated = true;
+            this.hoverIndex = i;
+            break;
+          }
+        }
+        if (hasCreated) return;
        for (let i = 0; i !== this.options.length; ++i) {
          const option = this.options[i];
          if (this.query) {
-            // pick first options that passes the filter
+            // highlight first options that passes the filter
            if (!option.disabled && !option.groupDisabled && option.visible) {
              this.hoverIndex = i;
              break;
            }
          } else {
-            // pick currently selected option
+            // highlight currently selected option
            if (option.itemSelected) {
              this.hoverIndex = i;
              break;
--- a/packages/table/package.json
+++ b/packages/table/package.json
@@ -1,6 +1,6 @@
 {
  "name": "element-table",
-  "version": "1.0.0",
+  "version": "2.0.0",
  "description": "A table component for Vue.",
  "keywords": [
    "element",
--- a/packages/table/src/table-column.js
+++ b/packages/table/src/table-column.js
@@ -99,7 +99,7 @@ const getDefaultColumn = function(type, options) {
    column.minWidth = 80;
  }

-  column.realWidth = column.width || column.minWidth;
+  column.realWidth = column.width === undefined ? column.minWidth : column.width;

  return column;
 };
--- a/packages/table/src/table-header.js
+++ b/packages/table/src/table-header.js
@@ -119,9 +119,9 @@ export default {
                    {
                      column.sortable
                        ? <span class="caret-wrapper" on-click={ ($event) => this.handleSortClick($event, column) }>
-                            <i class="sort-caret ascending el-icon-caret-top" on-click={ ($event) => this.handleSortClick($event, column, 'ascending') }>
+                            <i class="sort-caret ascending" 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 class="sort-caret descending" on-click={ ($event) => this.handleSortClick($event, column, 'descending') }>
                            </i>
                          </span>
                        : ''
--- a/packages/table/src/util.js
+++ b/packages/table/src/util.js
@@ -96,7 +96,7 @@ const isFirefox = typeof navigator !== 'undefined' && navigator.userAgent.toLowe

 export const mousewheel = function(element, callback) {
  if (element && element.addEventListener) {
-    element.addEventListener(isFirefox ? 'DOMMouseScroll' : 'mousewheel', callback);
+    element.addEventListener(isFirefox ? 'DOMMouseScroll' : 'mousewheel', callback, { passive: true });
  }
 };

--- a/packages/theme-chalk/package.json
+++ b/packages/theme-chalk/package.json
@@ -1,6 +1,6 @@
 {
  "name": "element-theme-chalk",
-  "version": "2.0.8",
+  "version": "2.0.9",
  "description": "Element component chalk theme.",
  "main": "lib/index.css",
  "style": "lib/index.css",
--- a/packages/theme-chalk/src/common/var.scss
+++ b/packages/theme-chalk/src/common/var.scss
@@ -480,7 +480,7 @@ $--table-text-color: $--color-text-regular !default;
 $--table-header-color: $--color-text-secondary !default;
 $--table-row-hover-background: $--background-color-base !default;
 $--table-current-row-background: $--color-primary-light-9 !default;
-$--table-header-background: $--color-text-secondary !default;
+$--table-header-background: $--color-white !default;
 $--table-footer-background: $--color-text-placeholder !default;
 $--table-fixed-box-shadow: 0 0 10px rgba(0, 0, 0, .12) !default;

--- a/packages/theme-chalk/src/date-picker/picker.scss
+++ b/packages/theme-chalk/src/date-picker/picker.scss
@@ -26,6 +26,10 @@
    }
  }

+  .el-icon-circle-close {
+    cursor: pointer;
+  }
+
  .el-range__icon {
    font-size: 14px;
    margin-left: -5px;
--- a/packages/theme-chalk/src/popover.scss
+++ b/packages/theme-chalk/src/popover.scss
@@ -13,7 +13,6 @@
  color: $--color-text-regular;
  line-height: 1.4;
  text-align: justify;
-  word-break: break-all;
  font-size: $--popover-font-size;
  box-shadow: $--box-shadow-light;

--- a/packages/theme-chalk/src/switch.scss
+++ b/packages/theme-chalk/src/switch.scss
@@ -2,7 +2,8 @@
@import "common/var";

@include b(switch) {
-  display: inline-block;
+  display: inline-flex;
+  align-items: center;
  position: relative;
  font-size: $--switch-font-size;
  line-height: $--switch-height;
--- a/packages/theme-chalk/src/table.scss
+++ b/packages/theme-chalk/src/table.scss
@@ -168,6 +168,7 @@
    overflow: hidden;
    user-select: none;
    text-align: left;
+    background-color: $--table-header-background;

    div {
      display: inline-block;
@@ -438,27 +439,28 @@
  }

  .sort-caret {
-    color: $--color-text-placeholder;
-    width: 14px;
-    overflow: hidden;
-    font-size: 15px;
+    width: 0;
+    height: 0;
+    border: solid 5px transparent;
    position: absolute;

    &.ascending {
+      border-bottom-color: $--color-text-placeholder;
      top: 5px;
    }

    &.descending {
+      border-top-color: $--color-text-placeholder;
      bottom: 7px;
    }
  }

  .ascending .sort-caret.ascending {
-    color: $--color-primary;
+    border-bottom-color: $--color-primary;
  }

  .descending .sort-caret.descending {
-    color: $--color-primary;
+    border-top-color: $--color-primary;
  }

  .hidden-columns {
--- a/packages/tree/src/tree-node.vue
+++ b/packages/tree/src/tree-node.vue
@@ -41,7 +41,7 @@
    <el-collapse-transition>
      <div
        class="el-tree-node__children"
-        v-if="childNodeRendered"
+        v-if="!renderAfterExpand || childNodeRendered"
        v-show="expanded"
        role="group"
        :aria-expanded="expanded"
@@ -49,6 +49,7 @@
        <el-tree-node
          :render-content="renderContent"
          v-for="child in node.childNodes"
+          :render-after-expand="renderAfterExpand"
          :key="getNodeKey(child)"
          :node="child"
          @node-expand="handleChildNodeExpand">
@@ -77,7 +78,11 @@
        }
      },
      props: {},
-      renderContent: Function
+      renderContent: Function,
+      renderAfterExpand: {
+        type: Boolean,
+        default: true
+      }
    },

    components: {
--- a/packages/tree/src/tree.vue
+++ b/packages/tree/src/tree.vue
@@ -8,6 +8,7 @@
      v-for="child in root.childNodes"
      :node="child"
      :props="props"
+      :render-after-expand="renderAfterExpand"
      :key="getNodeKey(child)"
      :render-content="renderContent"
      @node-expand="handleNodeExpand">
@@ -53,6 +54,10 @@
          return t('el.tree.emptyText');
        }
      },
+      renderAfterExpand: {
+        type: Boolean,
+        default: true
+      },
      nodeKey: String,
      checkStrictly: Boolean,
      defaultExpandAll: Boolean,
@@ -144,6 +149,18 @@
        }
        return index;
      },
+      getNodePath(data) {
+        if (!this.nodeKey) throw new Error('[Tree] nodeKey is required in getNodePath');
+        const node = this.store.getNode(data);
+        if (!node) return [];
+        const path = [node.data];
+        let parent = node.parent;
+        while (parent && parent !== this.root) {
+          path.push(parent.data);
+          parent = parent.parent;
+        }
+        return path.reverse();
+      },
      getCheckedNodes(leafOnly) {
        return this.store.getCheckedNodes(leafOnly);
      },
--- a/packages/upload/package.json
+++ b/packages/upload/package.json
@@ -1,6 +1,6 @@
 {
  "name": "element-upload",
-  "version": "1.0.0",
+  "version": "2.0.0",
  "description": "A upload component for Vue.js.",
  "keywords": [
    "element",
--- a/packages/upload/src/index.vue
+++ b/packages/upload/src/index.vue
@@ -53,6 +53,7 @@ export default {
      default: 'select'
    },
    beforeUpload: Function,
+    beforeRemove: Function,
    onRemove: {
      type: Function,
      default: noop
@@ -175,10 +176,25 @@ export default {
      if (raw) {
        file = this.getFile(raw);
      }
-      this.abort(file);
-      let fileList = this.uploadFiles;
-      fileList.splice(fileList.indexOf(file), 1);
-      this.onRemove(file, fileList);
+      let doRemove = () => {
+        this.abort(file);
+        let fileList = this.uploadFiles;
+        fileList.splice(fileList.indexOf(file), 1);
+        this.onRemove(file, fileList);
+      };
+
+      if (!this.beforeRemove) {
+        doRemove();
+      } else if (typeof this.beforeRemove === 'function') {
+        const before = this.beforeRemove(file, this.uploadFiles);
+        if (before && before.then) {
+          before.then(() => {
+            doRemove();
+          }, noop);
+        } else if (before !== false) {
+          doRemove();
+        }
+      }
    },
    getFile(rawFile) {
      let fileList = this.uploadFiles;
--- a/src/index.js
+++ b/src/index.js
@@ -171,7 +171,7 @@ if (typeof window !== 'undefined' && window.Vue) {
 };

 module.exports = {
-  version: '2.0.8',
+  version: '2.0.9',
  locale: locale.use,
  i18n: locale.i18n,
  install,
--- a/src/utils/dom.js
+++ b/src/utils/dom.js
@@ -86,7 +86,7 @@ export function addClass(el, cls) {

    if (el.classList) {
      el.classList.add(clsName);
-    } else if (hasClass(el, clsName)) {
+    } else if (!hasClass(el, clsName)) {
      curClass += ' ' + clsName;
    }
  }
--- a/test/unit/specs/loading.spec.js
+++ b/test/unit/specs/loading.spec.js
@@ -171,6 +171,25 @@ describe('Loading', () => {
        done();
      });
    });
+
+    it('customClass', done => {
+      vm = createVue({
+        template: `
+        <div v-loading="loading" element-loading-custom-class="loading-custom-class"></div>
+      `,
+
+        data() {
+          return {
+            loading: true
+          };
+        }
+      }, true);
+      Vue.nextTick(() => {
+        const mask = document.querySelector('.el-loading-mask');
+        expect(mask.classList.contains('loading-custom-class')).to.true;
+        done();
+      });
+    });
  });

  describe('as a service', () => {
@@ -253,5 +272,11 @@ describe('Loading', () => {
      expect(text).to.exist;
      expect(text.textContent).to.equal('Loading...');
    });
+
+    it('customClass', () => {
+      loadingInstance = Loading({ customClass: 'el-loading-custom-class' });
+      const customClass = document.querySelector('.el-loading-custom-class');
+      expect(customClass).to.exist;
+    });
  });
 });
--- a/types/element-ui.d.ts
+++ b/types/element-ui.d.ts
@@ -61,6 +61,7 @@ import { ElTag } from './tag'
 import { ElTabs } from './tabs'
 import { ElTabPane } from './tab-pane'
 import { ElTimePicker } from './time-picker'
+import { ElTimeSelect } from './time-select'
 import { ElTooltip } from './tooltip'
 import { ElTransfer } from './transfer'
 import { ElTree } from './tree'
@@ -270,9 +271,12 @@ export class TabPane extends ElTabPane {}
 /** Tag Component */
 export class Tag extends ElTag {}

-/** Time Picker and Time Select Component */
+/** TimePicker Component */
 export class TimePicker extends ElTimePicker {}

+/** TimeSelect Component */
+export class TimeSelect extends ElTimeSelect {}
+
 /** Tooltip Component */
 export class Tooltip extends ElTooltip {}

--- a/types/time-picker.d.ts
+++ b/types/time-picker.d.ts
@@ -1,6 +1,5 @@
 import { ElementUIComponent, ElementUIComponentSize, ElementUIHorizontalAlignment } from './component'

-/** Options when el-time-picker acts like a Time Picker */
 export interface TimePickerOptions {
  /**
   * Available time range.
@@ -13,25 +12,7 @@ export interface TimePickerOptions {
  format?: string
 }

-/** Options when el-time-picker acts like a Time Select */
-export interface TimeSelectOptions {
-  /** Start time */
-  start?: string,
-
-  /** End time */
-  end?: string,
-
-  /** Time step */
-  step?: string,
-
-  /** Minimum time, any time before this time will be disabled */
-  minTime?: string,
-
-  /** Maximum time, any time after this time will be disabled */
-  maxTime?: string
-}
-
-/** TimePicker and Time Select Component */
+/** TimePicker Component */
 export declare class ElTimePicker extends ElementUIComponent {
  /** Whether DatePicker is read only */
  readonly: boolean
@@ -57,7 +38,7 @@ export declare class ElTimePicker extends ElementUIComponent {
  /** Placeholder for the end time in range mode */
  endPlaceholder: string

-  /** Whether to pick a time range, only works with <el-time-picker> */
+  /** Whether to pick a time range */
  isRange: boolean

  /** Value of the picker */
@@ -70,7 +51,7 @@ export declare class ElTimePicker extends ElementUIComponent {
  popperClass: string

  /** Additional options, check the table below */
-  pickerOptions: object
+  pickerOptions: TimePickerOptions

  /** Range separator */
  rangeSeparator: string
--- a/types/time-select.d.ts
+++ b/types/time-select.d.ts
@@ -0,0 +1,51 @@
+import { ElementUIComponent, ElementUIComponentSize, ElementUIHorizontalAlignment } from './component'
+
+export interface TimeSelectOptions {
+  /** Start time */
+  start?: string,
+
+  /** End time */
+  end?: string,
+
+  /** Time step */
+  step?: string,
+
+  /** Minimum time, any time before this time will be disabled */
+  minTime?: string,
+
+  /** Maximum time, any time after this time will be disabled */
+  maxTime?: string
+}
+
+/** TimeSelect Component */
+export declare class ElTimeSelect extends ElementUIComponent {
+  /** Whether DatePicker is read only */
+  readonly: boolean
+
+  /** Whether DatePicker is disabled */
+  disabled: boolean
+
+  /** Whether the input is editable */
+  editable: boolean
+
+  /** Whether to show clear button */
+  clearable: boolean
+
+  /** Size of Input */
+  size: ElementUIComponentSize
+
+  /** Placeholder */
+  placeholder: string
+
+  /** Value of the picker */
+  value: string | Date
+
+  /** Alignment */
+  align: ElementUIHorizontalAlignment
+
+  /** Custom class name for TimePicker's dropdown */
+  popperClass: string
+
+  /** Additional options, check the table below */
+  pickerOptions: TimeSelectOptions
+}
Author	SHA1	Message	Date
Leopoldthecoder	80d2f4e45e	[release] 2.0.9	2017-12-24 19:35:11 +08:00
Leopoldthecoder	8d49e17303	[build] 2.0.9	2017-12-24 19:35:10 +08:00
Leopoldthecoder	26a02ab3b2	Changelog: update for 2.0.9	2017-12-24 19:32:41 +08:00
Leopoldthecoder	351f900df6	Tree: add renderAfterExpand	2017-12-24 19:13:17 +08:00
liyl	bfa9f4ed0f	docs: update menu.md 根据英文文档，以及上下文描述，修正文档内容	2017-12-24 18:58:37 +08:00
Akiho Nagao	8d15a86df2	Table: Add eventListener option passive	2017-12-23 21:35:28 +08:00
Leopoldthecoder	0d952b7917	Switch: fix style	2017-12-21 10:35:56 +08:00
Leopoldthecoder	bc893b5051	Carousel: fix items hides up when data is asynchronously updated	2017-12-20 21:11:21 +08:00
Leopoldthecoder	42849a89fe	Loading: remove parent class when directive is unbound	2017-12-20 17:05:37 +08:00
Leopoldthecoder	c69adb0458	publish independent packages	2017-12-20 11:52:49 +08:00
花裤衩	24b15776de	Table: use $--table-header-background to define header background(#8871 ) $--table-header-background is defined but never used	2017-12-19 18:03:01 +08:00
Leopoldthecoder	b3a5981461	Types: add missing definition for TimeSelect	2017-12-19 18:00:08 +08:00
Pan	f7c63d993e	Picker: perf el-icon-circle-close hover effect	2017-12-19 10:33:58 +08:00
Leopoldthecoder	4392a036d1	Form: fix support for dot-separated rule key	2017-12-19 10:33:27 +08:00
PatrickJS	0024a413eb	refactor(index): headless cms -> api-first cms	2017-12-19 10:18:59 +08:00
PatrickJS [tipe.io]	5fec5cc969	fix(readme): tipe typo and text next to logo	2017-12-19 10:18:59 +08:00
Leopoldthecoder	f08f435d43	add sponsor logo	2017-12-18 18:13:05 +08:00
Gonzalo Nandez	dd58f8c145	Changelog: update for 2.0.8	2017-12-18 17:47:44 +08:00
xifeiwu	13855f6c65	fix: the width prop of el-table-column is invalid when it is 0 (#8861 ) * fix: the width prop of el-table-column is invalid when it is 0 * Update table-column.js	2017-12-17 18:20:00 +08:00
Leopoldthecoder	4af54f5a93	Popover: remove word-break style	2017-12-17 18:14:55 +08:00
Leopoldthecoder	fac4bdf2f3	Autocomplete: support maxlength and minlength	2017-12-17 18:14:55 +08:00
earlymeme	735a834566	loading directive customClass	2017-12-17 18:12:44 +08:00
Leopoldthecoder	81ff11ad41	Form: fix initial error message	2017-12-16 21:23:05 +08:00
佘小马	b05462a6cc	fixed utils.dom.addClass	2017-12-15 16:49:09 +08:00
Leopoldthecoder	4a7f3c82ad	Chore: misc updates	2017-12-15 16:45:15 +08:00
Leopoldthecoder	6497e8c1c1	Carousel: add type="button" to navigation buttons	2017-12-15 13:43:05 +08:00
Pan	227508ae26	Doc:fix use vue-i18n@6.x typo	2017-12-13 15:36:14 +08:00
wangshaobo	79b4cb42d2	Revise with review comments.	2017-12-13 11:17:00 +08:00
wangshaobo	4fe557b5e8	upload: add before-remove hook function	2017-12-13 11:17:00 +08:00
Gonzalo Nandez	ff430b8d2e	AcUpdate changelog spanish	2017-12-13 10:49:27 +08:00
Leopoldthecoder	66dd670a53	Table: replace sorting arrow icons with borders to avoid overlap	2017-12-12 19:27:46 +08:00
Leopoldthecoder	e64ba965d6	Select: fix default-first-option on created options	2017-12-12 19:03:52 +08:00