update dependencies (#7476)

* update el-input change event

* upgrade to vue 2.5.0

* upgrade webpack to 3.7

* upgrade vue to 2.5.2

* minor style updates

CHANGELOG.en-US.md

@@ -77,6 +77,8 @@ in `lazy` mode #6235
   - Added `separator-class` attribute to support icons as item separators #7203
 - Steps
   - Added `simple` attribute to activate simple-styled Steps #7274
+- Pagination
+  - Added `prev-text` and `next-text` attributes to customize texts of prev page and next page #7005
 
 #### Bug fixes
 - DatePicker

CHANGELOG.zh-CN.md

@@ -74,6 +74,8 @@
   - 新增 `separator-class` 属性，可使用图标作为分隔符 #7203
 - Steps
   - 新增 `simple` 属性，用于开启简洁风格的步骤条 #7274
+- Pagination
+  - 新增 `prev-text` 和 `next-text` 属性，用于自定义上一页和下一页的文本 #7005
 
 #### 修复
 - DatePicker

build/cooking.demo.js

@@ -116,7 +116,7 @@ cooking.add('vueMarkdown', {
 var wrap = function(render) {
   return function() {
     return render.apply(this, arguments)
-      .replace('<code class="', '<code class="hljs ')
+      .replace('<code v-pre class="', '<code class="hljs ')
       .replace('<code>', '<code class="hljs">');
   };
 };

examples/app.vue

@@ -84,7 +84,7 @@
   .container,
   .page-container {
     width: 1140px;
-    padding: 0 30px;
+    padding: 0;
     margin: 0 auto;
   }
 

examples/components/header.vue

@@ -92,6 +92,10 @@
       position: relative;
       cursor: pointer;
     
+      &.nav-algolia-search {
+        cursor: default;
+      }
+    
       &.lang-item,
       &:last-child {
         cursor: default;
@@ -255,6 +259,9 @@
           padding: 0 5px;
         }
       }
+      .nav-theme-switch, .nav-algolia-search {
+        display: none;
+      }
     }
   }
 
@@ -284,37 +291,37 @@
       :style="headerStyle"
       :class="{
         'header-home': isHome,
-        'header-light': isComponentPage
+        'header-light': !isHome
       }">
       <div class="container">
         <h1><router-link :to="`/${ lang }`">
           <!-- logo -->
-          <slot v-if="isComponentPage">
+          <slot v-if="!isHome">
             <img
-                src="../assets/images/element-logo.svg"
-                alt="element-logo"
-                class="nav-logo">
+              src="../assets/images/element-logo.svg"
+              alt="element-logo"
+              class="nav-logo">
             <img
-                src="../assets/images/element-logo-small.svg"
-                alt="element-logo"
-                class="nav-logo-small">
+              src="../assets/images/element-logo-small.svg"
+              alt="element-logo"
+              class="nav-logo-small">
           </slot>
-          <slot v-else>
+          <slot v-if="isHome">
             <img
-                src="../assets/images/element-logo-white.svg"
-                alt="element-logo"
-                class="nav-logo">
+              src="../assets/images/element-logo-white.svg"
+              alt="element-logo"
+              class="nav-logo">
             <img
-                src="../assets/images/element-logo-small-white.svg"
-                alt="element-logo"
-                class="nav-logo-small">
+              src="../assets/images/element-logo-small-white.svg"
+              alt="element-logo"
+              class="nav-logo-small">
           </slot>
 
         </router-link></h1>
 
         <!-- nav -->
         <ul class="nav">
-          <li class="nav-item">
+          <li class="nav-item nav-algolia-search" v-show="isComponentPage">
             <algolia-search></algolia-search>
           </li>
           <li class="nav-item">
@@ -384,7 +391,7 @@
           </li>
           
           <!--theme picker-->
-          <li  class="nav-item" v-show="isComponentPage">
+          <li class="nav-item nav-theme-switch" v-show="isComponentPage">
             <theme-picker></theme-picker>
           </li>
         </ul>
@@ -395,7 +402,6 @@
 <script>
   import ThemePicker from './theme-picker.vue';
   import AlgoliaSearch from './search.vue';
-  import bus from '../bus';
   import compoLang from '../i18n/component.json';
   import { version } from 'main/index.js';
 
@@ -405,11 +411,9 @@
         active: '',
         isHome: true,
         headerStyle: {},
-        visible: true,
         versions: [],
         version,
-        dropdownVisible: true,
-        isComponentPage: true
+        dropdownVisible: true
       };
     },
 
@@ -433,6 +437,9 @@
       },
       langConfig() {
         return compoLang.filter(config => config.lang === this.lang)[0]['header'];
+      },
+      isComponentPage() {
+        return /^component/.test(this.$route.name);
       }
     },
 
@@ -454,23 +461,18 @@
 
       handlePathChange() {
         const routerName = this.$route.name;
-        this.isComponentPage = /^component-/.test(routerName);
         this.isHome = /^home/.test(routerName);
-        if (this.isComponentPage) {
+        if (!this.isHome) {
           this.headerStyle.backgroundColor = '#fff';
           return;
         }
-        this.headerStyle.backgroundColor = `rgba(32, 160, 255, ${ this.isHome ? '0' : '1' })`;
+        this.headerStyle.backgroundColor = 'rgba(32, 160, 255, 0)';
       }
     },
 
     created() {
       this.handlePathChange();
 
-      bus.$on('toggleHeader', visible => {
-        this.visible = visible;
-      });
-
       const xhr = new XMLHttpRequest();
       xhr.onreadystatechange = _ => {
         if (xhr.readyState === 4 && xhr.status === 200) {

examples/components/search.vue

@@ -2,12 +2,12 @@
   <el-autocomplete
     v-model="query"
     size="small"
-    popper-class="algolia-search"
+    :popper-class="`algolia-search${ isEmpty ? ' is-empty' : '' }`"
     :fetch-suggestions="querySearch"
     :placeholder="placeholder"
     :trigger-on-focus="false"
     @select="handleSelect">
-    <template scope="props">
+    <template slot-scope="props">
       <p class="algolia-search-title" v-if="props.item.title">
         <span v-html="props.item.highlightedCompo"></span>
         <span class="algolia-search-separator">></span>
@@ -17,11 +17,19 @@
         class="algolia-search-content"
         v-if="props.item.content"
         v-html="props.item.content"></p>
-      <img
-        class="algolia-search-logo"
-        src="../assets/images/search-by-algolia.svg"
-        alt="algolia-logo"
-        v-if="props.item.img">
+      <a
+        class="algolia-search-link"
+        v-if="props.item.img"
+        target="_blank"
+        href="https://www.algolia.com/docsearch">
+        <img
+          class="algolia-search-logo"
+          src="../assets/images/search-by-algolia.svg"
+          alt="algolia-logo">
+      </a>
+      <p
+        class="algolia-search-empty"
+        v-if="props.item.isEmpty">{{ emptyText }}</p>
     </template>
   </el-autocomplete>
 </template>
@@ -29,6 +37,12 @@
 <style>
   .algolia-search {
     width: 450px !important;
+  
+    &.is-empty {
+      .el-autocomplete-suggestion__list {
+        padding-bottom: 0;
+      }
+    }
 
     .el-autocomplete-suggestion__list {
       position: static !important;
@@ -39,27 +53,8 @@
       border-bottom: solid 1px #ebebeb;
       
       &:last-child {
-        border-bottom: none;
-        position: absolute;
-        bottom: 0;
-        left: 0;
-        width: 100%;
-        background-color: #dfe4ed;
-        border-bottom-left-radius: 4px;
-        border-bottom-right-radius: 4px;
-        box-sizing: border-box;
-        text-align: right;
-       
-        &:hover {
-          background-color: #dfe4ed;
-        }
-        
-        img {
-          display: inline-block;
-          height: 17px;
-          margin-top: 10px;
-        }
-      }
+         border-bottom: none;
+       }
     }
     
     .algolia-highlight {
@@ -85,6 +80,35 @@
       text-overflow: ellipsis;
       white-space: nowrap;
     }
+    
+    .algolia-search-link {
+      position: absolute;
+      bottom: 0;
+      left: 0;
+      width: 100%;
+      padding-right: 20px;
+      background-color: #dfe4ed;
+      border-bottom-left-radius: 4px;
+      border-bottom-right-radius: 4px;
+      box-sizing: border-box;
+      text-align: right;
+
+      &:hover {
+         background-color: #dfe4ed;
+       }
+    
+      img {
+        display: inline-block;
+        height: 17px;
+        margin-top: 10px;
+      }
+    }
+  
+    .algolia-search-empty {
+      margin: 5px 0;
+      text-align: center;
+      color: #999;
+    }
   }
 </style>
 
@@ -95,7 +119,8 @@
     data() {
       return {
         index: null,
-        query: ''
+        query: '',
+        isEmpty: false
       };
     },
 
@@ -106,6 +131,10 @@
 
       placeholder() {
         return this.lang === 'zh-CN' ? '搜索文档' : 'Search';
+      },
+
+      emptyText() {
+        return this.lang === 'zh-CN' ? '无匹配结果' : 'No results';
       }
     },
 
@@ -129,6 +158,7 @@
             return;
           }
           if (res.hits.length > 0) {
+            this.isEmpty = false;
             cb(res.hits.map(hit => {
               let content = hit._highlightResult.content.value.replace(/\s+/g, ' ');
               const highlightStart = content.indexOf('<span class="algolia-highlight">');
@@ -146,17 +176,16 @@
                 title: hit._highlightResult.title.value,
                 content
               };
-            }).concat({
-              img: true
-            }));
+            }).concat({ img: true }));
           } else {
-            cb([]);
+            this.isEmpty = true;
+            cb([{ isEmpty: true }]);
           }
         });
       },
 
       handleSelect(val) {
-        if (val.img) return;
+        if (val.img || val.isEmpty) return;
         const component = val.component || '';
         const anchor = val.anchor;
         this.$router.push(`/${ this.lang }/component/${ component }${ anchor ? `#${ anchor }` : '' }`);

examples/components/side-nav.vue

@@ -22,6 +22,10 @@
       margin-top: 15px;
     }
 
+    > ul > .nav-item:nth-child(-n + 3) > a {
+      margin-top: 0;
+    }
+
     .nav-item {
       a {
         font-size: 16px;
@@ -45,7 +49,7 @@
         a {
           display: block;
           height: 40px;
-          color: #666;
+          color: #444;
           line-height: 40px;
           font-size: 14px;
           overflow: hidden;
@@ -126,7 +130,7 @@
         </template>
       </li>
     </ul>
-    <div id="code-sponsor-widget"></div>
+    <!--<div id="code-sponsor-widget"></div>-->
   </div>
 </template>
 <script>

examples/docs/en-US/dropdown.md

@@ -11,7 +11,7 @@
       cursor: pointer;
       color: #409EFF;
     }
-    .el-icon-caret-bottom {
+    .el-icon-arrow-down {
       font-size: 12px;
     }
   }
@@ -61,7 +61,7 @@ Hover on the dropdown menu to unfold it for more actions.
 ```html
 <el-dropdown>
   <span class="el-dropdown-link">
-    Dropdown List<i class="el-icon-caret-bottom el-icon--right"></i>
+    Dropdown List<i class="el-icon-arrow-down el-icon--right"></i>
   </span>
   <el-dropdown-menu slot="dropdown">
     <el-dropdown-item>Action 1</el-dropdown-item>
@@ -77,7 +77,7 @@ Hover on the dropdown menu to unfold it for more actions.
     cursor: pointer;
     color: #409EFF;
   }
-  .el-icon-caret-bottom {
+  .el-icon-arrow-down {
     font-size: 12px;
   }
 </style>
@@ -94,7 +94,7 @@ Use the button to trigger the dropdown list.
 ```html
 <el-dropdown>
   <el-button type="primary">
-    Dropdown List<i class="el-icon-caret-bottom el-icon--right"></i>
+    Dropdown List<i class="el-icon-arrow-down el-icon--right"></i>
   </el-button>
   <el-dropdown-menu slot="dropdown">
     <el-dropdown-item>Action 1</el-dropdown-item>
@@ -122,7 +122,7 @@ Use the button to trigger the dropdown list.
   .el-dropdown + .el-dropdown {
     margin-left: 15px;
   }
-  .el-icon-caret-bottom {
+  .el-icon-arrow-down {
     font-size: 12px;
   }
 </style>
@@ -151,7 +151,7 @@ Click the triggering element or hover on it.
     <span class="demonstration">hover to trigger</span>
     <el-dropdown>
       <span class="el-dropdown-link">
-        Dropdown List<i class="el-icon-caret-bottom el-icon--right"></i>
+        Dropdown List<i class="el-icon-arrow-down el-icon--right"></i>
       </span>
       <el-dropdown-menu slot="dropdown">
         <el-dropdown-item>Action 1</el-dropdown-item>
@@ -166,7 +166,7 @@ Click the triggering element or hover on it.
     <span class="demonstration">click to trigger</span>
     <el-dropdown trigger="click">
       <span class="el-dropdown-link">
-        Dropdown List<i class="el-icon-caret-bottom el-icon--right"></i>
+        Dropdown List<i class="el-icon-arrow-down el-icon--right"></i>
       </span>
       <el-dropdown-menu slot="dropdown">
         <el-dropdown-item>Action 1</el-dropdown-item>
@@ -184,7 +184,7 @@ Click the triggering element or hover on it.
     cursor: pointer;
     color: #409EFF;
   }
-  .el-icon-caret-bottom {
+  .el-icon-arrow-down {
     font-size: 12px;
   }
   .demonstration {
@@ -205,7 +205,7 @@ Use `hide-on-click` to define if menu closes on clicking.
 ```html
 <el-dropdown :hide-on-click="false">
   <span class="el-dropdown-link">
-    Dropdown List<i class="el-icon-caret-bottom el-icon--right"></i>
+    Dropdown List<i class="el-icon-arrow-down el-icon--right"></i>
   </span>
   <el-dropdown-menu slot="dropdown">
     <el-dropdown-item>Action 1</el-dropdown-item>
@@ -221,7 +221,7 @@ Use `hide-on-click` to define if menu closes on clicking.
     cursor: pointer;
     color: #409EFF;
   }
-  .el-icon-caret-bottom {
+  .el-icon-arrow-down {
     font-size: 12px;
   }
 </style>
@@ -236,7 +236,7 @@ Clicking each dropdown item fires an event whose parameter is assigned by each i
 ```html
 <el-dropdown @command="handleCommand">
   <span class="el-dropdown-link">
-    Dropdown List<i class="el-icon-caret-bottom el-icon--right"></i>
+    Dropdown List<i class="el-icon-arrow-down el-icon--right"></i>
   </span>
   <el-dropdown-menu slot="dropdown">
     <el-dropdown-item command="a">Action 1</el-dropdown-item>
@@ -252,7 +252,7 @@ Clicking each dropdown item fires an event whose parameter is assigned by each i
     cursor: pointer;
     color: #409EFF;
   }
-  .el-icon-caret-bottom {
+  .el-icon-arrow-down {
     font-size: 12px;
   }
 </style>

examples/docs/en-US/icon.md

@@ -94,34 +94,3 @@ Just assign the class name to `el-icon-iconName`.
     </span>
   </li>
 </ul>
-
-### Third-party icons
-
-Some of Element's components has an `icon` attribute, e.g. Input. If you want to use a third-party icon in the `icon` attribute, here's what you need to do:
-<p>
-  <span>1.</span> Modify the class name prefix of the third-party library
-</p>
-
-Please read third-party icon library documentation on how to do it. For example, if you're using [iconfont.cn](http://iconfont.cn/), you can find prefix editor in the "Edit Project" dialog. If you're using [Font Awesome](http://fontawesome.io/), you can refer to [this demo](https://github.com/ElementUI/element-font-awesome).
-
-<p>
-  <span>2.</span> Add some CSS:
-</p>
-
-```CSS
-[class^="el-icon-my"], [class*=" el-icon-my"] {
-font-family:"your-font-family" !important;
-
-/* The following is based on original CSS rules of third-party library */
-font-size: inherit;
-font-style:normal;
--webkit-font-smoothing: antialiased;
--moz-osx-font-smoothing: grayscale;
-}
-```
-
-Now you can use them as you do with Element built-in icons. For example, in el-input:
-
-```html
-<el-input icon="my-xxx" />
-```
\ No newline at end of file

examples/docs/en-US/input.md

@@ -476,7 +476,7 @@ Customize how suggestions are displayed.
   @select="handleSelect"
   icon="edit"
   :on-icon-click="handleIconClick">
-  <template scope="props">
+  <template slot-scope="props">
     <div class="value">{{ props.item.value }}</div>
     <span class="link">{{ props.item.link }}</span>
   </template>
@@ -680,4 +680,4 @@ Attribute | Description | Type | Options | Default
 ### Methods
 | Method | Description | Parameters |
 |------|--------|-------|
-| focus | focus the Input component | - |
+| focus | focus the Input component | — |

examples/docs/en-US/switch.md

@@ -158,3 +158,8 @@ name| input name of Switch | string | — | —
  Event Name | Description | Parameters
 ---- | ----| ----
 change | triggers when value changes | value after changing
+
+### Methods
+Method | Description | Parameters
+------|--------|-------
+focus | focus the Switch component | —

examples/docs/en-US/table.md

@@ -664,7 +664,7 @@ When there are too many columns, you can fix some of them.
       fixed="right"
       label="Operations"
       width="120">
-      <template scope="scope">
+      <template slot-scope="scope">
         <el-button @click="handleClick" type="text" size="small">Detail</el-button>
         <el-button type="text" size="small">Edit</el-button>
       </template>
@@ -873,7 +873,7 @@ When the the data is dynamically changed, you might want the table to have a max
       fixed="right"
       label="Operations"
       width="120">
-      <template scope="scope">
+      <template slot-scope="scope">
         <el-button
           @click.native.prevent="deleteRow(scope.$index, tableData4)"
           type="text"
@@ -1154,7 +1154,7 @@ You can also select multiple rows.
     <el-table-column
       label="Date"
       width="120">
-      <template scope="scope">{{ scope.row.date }}</template>
+      <template slot-scope="scope">{{ scope.row.date }}</template>
     </el-table-column>
     <el-table-column
       property="name"
@@ -1325,7 +1325,7 @@ Filter the table to find desired data.
       :filters="[{ text: 'Home', value: 'Home' }, { text: 'Office', value: 'Office' }]"
       :filter-method="filterTag"
       filter-placement="bottom-end">
-      <template scope="scope">
+      <template slot-scope="scope">
         <el-tag
           :type="scope.row.tag === 'Home' ? 'primary' : 'success'"
           close-transition>{{scope.row.tag}}</el-tag>
@@ -1386,7 +1386,7 @@ Customize table column so it can be integrated with other components.
     <el-table-column
       label="Date"
       width="180">
-      <template scope="scope">
+      <template slot-scope="scope">
         <el-icon name="time"></el-icon>
         <span style="margin-left: 10px">{{ scope.row.date }}</span>
       </template>
@@ -1394,7 +1394,7 @@ Customize table column so it can be integrated with other components.
     <el-table-column
       label="Name"
       width="180">
-      <template scope="scope">
+      <template slot-scope="scope">
         <el-popover trigger="hover" placement="top">
           <p>Name: {{ scope.row.name }}</p>
           <p>Addr: {{ scope.row.address }}</p>
@@ -1406,7 +1406,7 @@ Customize table column so it can be integrated with other components.
     </el-table-column>
     <el-table-column
       label="Operations">
-      <template scope="scope">
+      <template slot-scope="scope">
         <el-button
           size="small"
           @click="handleEdit(scope.$index, scope.row)">Edit</el-button>
@@ -1465,7 +1465,7 @@ When the row content is too long and you do not want to display the horizontal s
     :data="tableData3"
     style="width: 100%">
     <el-table-column type="expand">
-      <template scope="props">
+      <template slot-scope="props">
         <p>State: {{ props.row.state }}</p>
         <p>City: {{ props.row.city }}</p>
         <p>Address: {{ props.row.address }}</p>

examples/docs/en-US/upload.md

@@ -411,7 +411,7 @@ on-progress | hook function when some progress occurs | function(event, file, fi
 on-change | hook function when select file or upload file success or upload file fail | function(file, fileList) | — | — |
 before-upload | hook function before uploading with the file to be uploaded as its parameter. If `false` is returned or a `Promise` is returned and then is rejected, uploading will be aborted | function(file) | — | —
 thumbnail-mode | whether thumbnail is displayed | boolean | — | false
-file-list | default uploaded files, e.g. [{name: 'food.jpeg', url: 'https://fuss10.elemecdn.com/3/63/4e7f3a15429bfda99bce42a18cdd1jpeg.jpeg?imageMogr2/thumbnail/360x360/format/webp/quality/100'}] | array | — | []
+file-list | default uploaded files, e.g. [{name: 'food.jpg', url: 'https://xxx.cdn.com/xxx.jpg'}] | array | — | []
 list-type | type of fileList | string | text/picture/picture-card | text |
 auto-upload | whether to auto upload file | boolean | — | true |
 http-request | override default xhr behavior, allowing you to implement your own upload-file's request | function | — | — |

examples/docs/zh-CN/dropdown.md

@@ -11,7 +11,7 @@
       cursor: pointer;
       color: #409EFF;
     }
-    .el-icon-caret-bottom {
+    .el-icon-arrow-down {
       font-size: 12px;
     }
   }
@@ -63,7 +63,7 @@
 ```html
 <el-dropdown>
   <span class="el-dropdown-link">
-    下拉菜单<i class="el-icon-caret-bottom el-icon--right"></i>
+    下拉菜单<i class="el-icon-arrow-down el-icon--right"></i>
   </span>
   <el-dropdown-menu slot="dropdown">
     <el-dropdown-item>黄金糕</el-dropdown-item>
@@ -80,7 +80,7 @@
     cursor: pointer;
     color: #409EFF;
   }
-  .el-icon-caret-bottom {
+  .el-icon-arrow-down {
     font-size: 12px;
   }
 </style>
@@ -96,7 +96,7 @@
 ```html
 <el-dropdown>
   <el-button type="primary">
-    更多菜单<i class="el-icon-caret-bottom el-icon--right"></i>
+    更多菜单<i class="el-icon-arrow-down el-icon--right"></i>
   </el-button>
   <el-dropdown-menu slot="dropdown">
     <el-dropdown-item>黄金糕</el-dropdown-item>
@@ -124,7 +124,7 @@
   .el-dropdown + .el-dropdown {
     margin-left: 15px;
   }
-  .el-icon-caret-bottom {
+  .el-icon-arrow-down {
     font-size: 12px;
   }
 </style>
@@ -153,7 +153,7 @@
     <span class="demonstration">hover 激活</span>
     <el-dropdown>
       <span class="el-dropdown-link">
-        下拉菜单<i class="el-icon-caret-bottom el-icon--right"></i>
+        下拉菜单<i class="el-icon-arrow-down el-icon--right"></i>
       </span>
       <el-dropdown-menu slot="dropdown">
         <el-dropdown-item>黄金糕</el-dropdown-item>
@@ -168,7 +168,7 @@
     <span class="demonstration">click 激活</span>
     <el-dropdown trigger="click">
       <span class="el-dropdown-link">
-        下拉菜单<i class="el-icon-caret-bottom el-icon--right"></i>
+        下拉菜单<i class="el-icon-arrow-down el-icon--right"></i>
       </span>
       <el-dropdown-menu slot="dropdown">
         <el-dropdown-item>黄金糕</el-dropdown-item>
@@ -187,7 +187,7 @@
     cursor: pointer;
     color: #409EFF;
   }
-  .el-icon-caret-bottom {
+  .el-icon-arrow-down {
     font-size: 12px;
   }
   .demonstration {
@@ -208,7 +208,7 @@
 ```html
 <el-dropdown :hide-on-click="false">
   <span class="el-dropdown-link">
-    下拉菜单<i class="el-icon-caret-bottom el-icon--right"></i>
+    下拉菜单<i class="el-icon-arrow-down el-icon--right"></i>
   </span>
   <el-dropdown-menu slot="dropdown">
     <el-dropdown-item>黄金糕</el-dropdown-item>
@@ -224,7 +224,7 @@
     cursor: pointer;
     color: #409EFF;
   }
-  .el-icon-caret-bottom {
+  .el-icon-arrow-down {
     font-size: 12px;
   }
 </style>
@@ -239,7 +239,7 @@
 ```html
 <el-dropdown @command="handleCommand">
   <span class="el-dropdown-link">
-    下拉菜单<i class="el-icon-caret-bottom el-icon--right"></i>
+    下拉菜单<i class="el-icon-arrow-down el-icon--right"></i>
   </span>
   <el-dropdown-menu slot="dropdown">
     <el-dropdown-item command="a">黄金糕</el-dropdown-item>
@@ -255,7 +255,7 @@
     cursor: pointer;
     color: #409EFF;
   }
-  .el-icon-caret-bottom {
+  .el-icon-arrow-down {
     font-size: 12px;
   }
 </style>

examples/docs/zh-CN/form.md

@@ -156,10 +156,10 @@
 <style>
   .demo-form.demo-zh-CN {
     .el-select .el-input {
-      width: 360px;
+      width: 380px;
     }
     .el-form {
-      width: 440px;
+      width: 460px;
     }
 
     .line {
@@ -196,7 +196,7 @@
       }
     }
     .demo-form-normal {
-      width: 440px;
+      width: 460px;
     }
     .demo-form-inline {
       width: auto;

examples/docs/zh-CN/icon.md

@@ -91,33 +91,3 @@
     </span>
   </li>
 </ul>
-
-### 第三方图标库
-
-Element 的一些组件提供了 `icon` 属性（如 Input），如果希望传入第三方图标库中的图标，需要进行如下操作：
-<p>
-  <span>1.</span> 修改第三方图标库的前缀（见下方说明）
-</p>
-<p>
-  <span>2.</span> 添加以下 CSS：
-</p>
-
-```CSS
-[class^="el-icon-my"], [class*=" el-icon-my"] {
-  font-family:"your-font-family" !important;
-  
-  /* 以下内容参照第三方图标库本身的规则 */
-  font-size: inherit;
-  font-style:normal;
-  -webkit-font-smoothing: antialiased;
-  -moz-osx-font-smoothing: grayscale;
-}
-```
-
-之后就可以像使用 Element 内置图标一样使用第三方图标。比如在 el-input 中：
-
-```html
-<el-input icon="my-xxx" />
-```
-
-关于如何修改第三方图标库的前缀，请参阅第三方图标库的文档。比如，如果使用 [iconfont.cn](http://iconfont.cn/)，则可以在「编辑项目」弹框中修改；如果使用 [Font Awesome](http://fontawesome.io/)，可以参考[这个示例](https://github.com/ElementUI/element-font-awesome)。
\ No newline at end of file

examples/docs/zh-CN/input.md

@@ -546,7 +546,7 @@ export default {
   @select="handleSelect"
   icon="edit"
   :on-icon-click="handleIconClick">
-  <template scope="props">
+  <template slot-scope="props">
     <div class="name">{{ props.item.value }}</div>
     <span class="addr">{{ props.item.address }}</span>
   </template>

examples/docs/zh-CN/switch.md

@@ -160,3 +160,8 @@
 | 事件名称      | 说明    | 回调参数      |
 |---------- |-------- |---------- |
 | change  | switch 状态发生变化时的回调函数    | 新状态的值 |
+
+### Methods
+| 方法名 | 说明 | 参数 |
+| ---- | ---- | ---- |
+| focus | 使 Switch 获取焦点 | - |
\ No newline at end of file

examples/docs/zh-CN/table.md

@@ -706,7 +706,7 @@
       fixed="right"
       label="操作"
       width="100">
-      <template scope="scope">
+      <template slot-scope="scope">
         <el-button @click="handleClick(scope.row)" type="text" size="small">查看</el-button>
         <el-button type="text" size="small">编辑</el-button>
       </template>
@@ -912,7 +912,7 @@
       fixed="right"
       label="操作"
       width="120">
-      <template scope="scope">
+      <template slot-scope="scope">
         <el-button
           @click.native.prevent="deleteRow(scope.$index, tableData4)"
           type="text"
@@ -1194,7 +1194,7 @@
     <el-table-column
       label="日期"
       width="120">
-      <template scope="scope">{{ scope.row.date }}</template>
+      <template slot-scope="scope">{{ scope.row.date }}</template>
     </el-table-column>
     <el-table-column
       prop="name"
@@ -1367,7 +1367,7 @@
       :filters="[{ text: '家', value: '家' }, { text: '公司', value: '公司' }]"
       :filter-method="filterTag"
       filter-placement="bottom-end">
-      <template scope="scope">
+      <template slot-scope="scope">
         <el-tag
           :type="scope.row.tag === '家' ? 'primary' : 'success'"
           close-transition>{{scope.row.tag}}</el-tag>
@@ -1428,7 +1428,7 @@
     <el-table-column
       label="日期"
       width="180">
-      <template scope="scope">
+      <template slot-scope="scope">
         <el-icon name="time"></el-icon>
         <span style="margin-left: 10px">{{ scope.row.date }}</span>
       </template>
@@ -1436,7 +1436,7 @@
     <el-table-column
       label="姓名"
       width="180">
-      <template scope="scope">
+      <template slot-scope="scope">
         <el-popover trigger="hover" placement="top">
           <p>姓名: {{ scope.row.name }}</p>
           <p>住址: {{ scope.row.address }}</p>
@@ -1447,7 +1447,7 @@
       </template>
     </el-table-column>
     <el-table-column label="操作">
-      <template scope="scope">
+      <template slot-scope="scope">
         <el-button
           size="small"
           @click="handleEdit(scope.$index, scope.row)">编辑</el-button>
@@ -1506,7 +1506,7 @@
     :data="tableData5"
     style="width: 100%">
     <el-table-column type="expand">
-      <template scope="props">
+      <template slot-scope="props">
         <el-form label-position="left" inline class="demo-table-expand">
           <el-form-item label="商品名称">
             <span>{{ props.row.name }}</span>

examples/docs/zh-CN/upload.md

@@ -421,7 +421,7 @@
 | before-upload | 上传文件之前的钩子，参数为上传的文件，若返回 false 或者返回 Promise 且被 reject，则停止上传。 | function(file) | — | — |
 | list-type | 文件列表的类型 | string | text/picture/picture-card | text |
 | auto-upload | 是否在选取文件后立即进行上传 | boolean | — | true |
-| file-list | 上传的文件列表, 例如: [{name: 'food.jpeg', url: 'https://fuss10.elemecdn.com/3/63/4e7f3a15429bfda99bce42a18cdd1jpeg.jpeg?imageMogr2/thumbnail/360x360/format/webp/quality/100'}] | array | — | [] |
+| file-list | 上传的文件列表, 例如: [{name: 'food.jpg', url: 'https://xxx.cdn.com/xxx.jpg'}] | array | — | [] |
 | http-request | 覆盖默认的上传行为，可以自定义上传的实现 | function | — | — |
 | disabled | 是否禁用 | boolean | — | false |
 | limit | 最大允许上传个数 |  number | — | — |

examples/index.tpl

@@ -9,7 +9,7 @@
   </head>
   <body>
     <div id="app"></div><% if (process.env.NODE_ENV === 'production') { %>
-    <script src="https://app.codesponsor.io/scripts/qFcVkt4f3DQEg4zrwINGVg?theme=light&height=250&width=240"></script>
+    <!--<script src="https://app.codesponsor.io/scripts/qFcVkt4f3DQEg4zrwINGVg?theme=light&height=250&width=240"></script>-->
     <script src="//cdn.jsdelivr.net/npm/vue@2.3.0/dist/vue.runtime.min.js"></script>
     <script src="//cdn.jsdelivr.net/npm/vue-router@2.1.1/dist/vue-router.min.js"></script><% } %>
   </body>

examples/nav.config.json

@@ -34,7 +34,7 @@
       ]
     },
     {
-      "name": "基础组件",
+      "name": "组件",
       "groups": [
         {
           "groupName": "Basic",

examples/pages/template/component.tpl

@@ -154,6 +154,9 @@
         overflow: auto;
         display: block;
       }
+      .page-component-up {
+        display: none;
+      }
     }
   }
 </style>
@@ -243,11 +246,9 @@
         this.showBackToTop = scrollTop >= 0.5 * document.body.clientHeight;
         if (this.showHeader !== this.scrollTop > scrollTop) {
           this.showHeader = this.scrollTop > scrollTop;
-          bus.$emit('toggleHeader', this.showHeader);
         }
         if (scrollTop === 0) {
           this.showHeader = true;
-          bus.$emit('toggleHeader', this.showHeader);
         }
         if (!this.navFaded) {
           bus.$emit('fadeNav');

package.json

@@ -73,15 +73,15 @@
     "cooking": "^1.2.0",
     "cooking-lint": "^0.1.3",
     "cooking-vue2": "^0.3.0",
-    "copy-webpack-plugin": "^4.0.1",
+    "copy-webpack-plugin": "^4.1.1",
     "coveralls": "^2.11.14",
     "cp-cli": "^1.0.2",
     "cross-env": "^3.1.3",
-    "css-loader": "^0.24.0",
+    "css-loader": "^0.28.7",
     "es6-promise": "^4.0.5",
     "eslint": "^3.10.2",
-    "extract-text-webpack-plugin": "^1.0.1",
-    "file-loader": "^0.9.0",
+    "extract-text-webpack-plugin": "^3.0.1",
+    "file-loader": "^1.1.5",
     "file-save": "^0.2.0",
     "gh-pages": "^0.11.0",
     "gulp": "^3.9.1",
@@ -90,11 +90,11 @@
     "gulp-postcss": "^6.1.1",
     "gulp-sass": "^3.1.0",
     "highlight.js": "^9.3.0",
-    "html-loader": "^0.4.3",
-    "html-webpack-plugin": "^2.22.0",
-    "inject-loader": "^3.0.0-beta2",
+    "html-loader": "^0.5.1",
+    "html-webpack-plugin": "^2.30.1",
+    "inject-loader": "^3.0.1",
     "isparta-loader": "^2.0.0",
-    "json-loader": "^0.5.4",
+    "json-loader": "^0.5.7",
     "json-templater": "^1.0.4",
     "karma": "^1.3.0",
     "karma-coverage": "^1.1.1",
@@ -113,25 +113,25 @@
     "node-sass": "^4.5.3",
     "phantomjs-prebuilt": "^2.1.13",
     "postcss": "^5.1.2",
-    "postcss-loader": "^0.11.1",
+    "postcss-loader": "0.11.1",
     "postcss-salad": "^1.0.8",
     "rimraf": "^2.5.4",
     "sass-loader": "^6.0.6",
     "sinon": "^1.17.6",
     "sinon-chai": "^2.8.0",
-    "style-loader": "^0.13.1",
+    "style-loader": "^0.19.0",
     "theaterjs": "^3.0.0",
     "transliteration": "^1.1.11",
     "uppercamelcase": "^1.1.0",
-    "url-loader": "^0.5.7",
-    "vue": "^2.3.0",
-    "vue-loader": "^12.0.2",
-    "vue-markdown-loader": "^0.5.1",
-    "vue-router": "^2.0.0",
-    "vue-template-compiler": "^2.3.0",
-    "vue-template-es2015-compiler": "^1.5.2",
-    "webpack": "^1.13.2",
-    "webpack-dev-server": "^1.15.1",
-    "webpack-node-externals": "^1.5.4"
+    "url-loader": "^0.6.2",
+    "vue": "^2.5.2",
+    "vue-loader": "^13.3.0",
+    "vue-markdown-loader": "1",
+    "vue-router": "2.7.0",
+    "vue-template-compiler": "^2.5.2",
+    "vue-template-es2015-compiler": "^1.6.0",
+    "webpack": "^3.7.1",
+    "webpack-dev-server": "^2.9.1",
+    "webpack-node-externals": "^1.6.0"
   }
 }

packages/autocomplete/src/autocomplete.vue

@@ -13,7 +13,7 @@
       @compositionstart.native="handleComposition"
       @compositionupdate.native="handleComposition"
       @compositionend.native="handleComposition"
-      @change="handleChange"
+      @input="handleChange"
       @focus="handleFocus"
       @blur="handleBlur"
       @keydown.up.native.prevent="highlight(highlightedIndex - 1)"
@@ -147,7 +147,9 @@
       handleComposition(event) {
         if (event.type === 'compositionend') {
           this.isOnComposition = false;
-          this.handleChange(this.value);
+          this.$nextTick(() => {
+            this.handleChange(this.value);
+          });
         } else {
           this.isOnComposition = true;
         }

packages/button/src/button.vue

@@ -25,7 +25,11 @@
   export default {
     name: 'ElButton',
 
-    inject: ['elFormItem'],
+    inject: {
+      elFormItem: {
+        default: ''
+      }
+    },
 
     props: {
       type: {

packages/cascader/src/main.vue

@@ -19,7 +19,7 @@
       :readonly="!filterable"
       :placeholder="currentLabels.length ? undefined : placeholder"
       v-model="inputValue"
-      @change="debouncedInputChange"
+      @input="debouncedInputChange"
       :validate-event="false"
       :size="size"
       :disabled="disabled"
@@ -87,7 +87,11 @@ export default {
 
   mixins: [popperMixin, emitter, Locale],
 
-  inject: ['elFormItem'],
+  inject: {
+    elFormItem: {
+      default: ''
+    }
+  },
 
   components: {
     ElInput

packages/checkbox/src/checkbox-button.vue

@@ -51,7 +51,11 @@
 
     mixins: [Emitter],
 
-    inject: ['elFormItem'],
+    inject: {
+      elFormItem: {
+        default: ''
+      }
+    },
 
     data() {
       return {

packages/checkbox/src/checkbox-group.vue

@@ -8,7 +8,11 @@
 
     mixins: [Emitter],
 
-    inject: ['elFormItem'],
+    inject: {
+      elFormItem: {
+        default: ''
+      }
+    },
 
     props: {
       value: {},

packages/checkbox/src/checkbox.vue

@@ -60,7 +60,11 @@
 
     mixins: [Emitter],
 
-    inject: ['elFormItem'],
+    inject: {
+      elFormItem: {
+        default: ''
+      }
+    },
 
     componentName: 'ElCheckbox',
 

packages/color-picker/src/main.vue

@@ -46,7 +46,11 @@
       popperClass: String
     },
 
-    inject: ['elFormItem'],
+    inject: {
+      elFormItem: {
+        default: ''
+      }
+    },
 
     directives: { Clickoutside },
 

packages/date-picker/src/panel/date.vue

@@ -192,8 +192,6 @@
           if (this.currentView !== 'year' || this.currentView !== 'month') {
             this.currentView = 'month';
           }
-        } else if (newVal === 'week') {
-          this.week = getWeekNumber(this.date);
         }
       }
     },

packages/date-picker/src/picker.vue

@@ -266,7 +266,11 @@ const valueEquals = function(a, b) {
 export default {
   mixins: [Emitter, NewPopper, Focus('reference')],
 
-  inject: ['elFormItem'],
+  inject: {
+    elFormItem: {
+      default: ''
+    }
+  },
 
   props: {
     size: String,

packages/dropdown/src/dropdown.vue

@@ -134,7 +134,7 @@
               {this.$slots.default}
             </el-button>
             <el-button ref="trigger" type={type} size={dropdownSize} class="el-dropdown__caret-button">
-              <i class="el-dropdown__icon el-icon-caret-bottom"></i>
+              <i class="el-dropdown__icon el-icon-arrow-down"></i>
             </el-button>
           </el-button-group>);
 

packages/form/src/form-item.vue

 <template>
-  <div class="el-form-item" :class="{
-    'el-form-item--feedback': elForm && elForm.statusIcon,
-    'is-error': validateState === 'error',
-    'is-validating': validateState === 'validating',
-    'is-success': validateState === 'success',
-    'is-required': isRequired || required
-  }">
+  <div class="el-form-item" :class="[{
+      'el-form-item--feedback': elForm && elForm.statusIcon,
+      'is-error': validateState === 'error',
+      'is-validating': validateState === 'validating',
+      'is-success': validateState === 'success',
+      'is-required': isRequired || required
+    },
+    sizeClass ? 'el-form-item--' + sizeClass : ''
+  ]">
     <label :for="prop" class="el-form-item__label" v-bind:style="labelStyle" v-if="label || $slots.label">
       <slot name="label">{{label + form.labelSuffix}}</slot>
     </label>
@@ -165,6 +167,9 @@
       },
       elFormItemSize() {
         return this.size || this._formSize;
+      },
+      sizeClass() {
+        return (this.$ELEMENT || {}).size || this.elFormItemSize;
       }
     },
     data() {

packages/input-number/src/input-number.vue

@@ -60,7 +60,11 @@
   export default {
     name: 'ElInputNumber',
     mixins: [Focus('input')],
-    inject: ['elFormItem'],
+    inject: {
+      elFormItem: {
+        default: ''
+      }
+    },
     directives: {
       repeatClick: RepeatClick
     },

packages/input/src/input.vue

@@ -85,7 +85,11 @@
 
     mixins: [emitter, Focus('input')],
 
-    inject: ['elFormItem'],
+    inject: {
+      elFormItem: {
+        default: ''
+      }
+    },
 
     data() {
       return {

packages/loading/src/directive.js

@@ -105,13 +105,9 @@ exports.install = Vue => {
 
     unbind: function(el, binding) {
       if (el.domInserted) {
-        if (binding.modifiers.fullscreen || binding.modifiers.body) {
-          document.body.removeChild(el.mask);
-        } else {
-          el.mask &&
-          el.mask.parentNode &&
-          el.mask.parentNode.removeChild(el.mask);
-        }
+        el.mask &&
+        el.mask.parentNode &&
+        el.mask.parentNode.removeChild(el.mask);
       }
     }
   });

packages/pagination/src/pagination.js

@@ -214,7 +214,7 @@ export default {
           const keyCode = event.keyCode || '';
           if ((key && key === 'Enter') || (keyCode && keyCode === 13)) {
             this.reassignMaxValue(event.target);
-            this.handleChange({ target: event.target });
+            this.handleChange(event.target.value);
           }
         },
         handleChange(value) {
@@ -239,7 +239,7 @@ export default {
               value={ this.$parent.internalCurrentPage }
               domPropsValue={ this.$parent.internalCurrentPage }
               type="number"
-              onChange={ this.handleChange }
+              onInput={ this.handleChange }
               onFocus={ this.handleFocus }
               onBlur={ this.handleBlur }
               nativeOnKeyup={ this.handleKeyUp }/>

packages/radio/src/radio-button.vue

@@ -39,7 +39,11 @@
 
     mixins: [Emitter],
 
-    inject: ['elFormItem'],
+    inject: {
+      elFormItem: {
+        default: ''
+      }
+    },
 
     props: {
       label: {},

packages/radio/src/radio-group.vue

@@ -21,7 +21,11 @@
 
     componentName: 'ElRadioGroup',
 
-    inject: ['elFormItem'],
+    inject: {
+      elFormItem: {
+        default: ''
+      }
+    },
 
     mixins: [Emitter],
 

packages/radio/src/radio.vue

@@ -48,7 +48,11 @@
 
     mixins: [Emitter],
 
-    inject: ['elFormItem'],
+    inject: {
+      elFormItem: {
+        default: ''
+      }
+    },
 
     componentName: 'ElRadio',
 

packages/rate/src/main.vue

 <template>
-  <div class="el-rate"
-       @keydown="handelKey"
-       role="slider"
-       :aria-valuenow="currentValue"
-       :aria-valuetext="text"
-       aria-valuemin="0"
-       :aria-valuemin="max"
-       tabindex="0"
-       @focus="focusing = true"
-       @blur="focusing = false"
-       :class="{'focusing': focusing}"
-  >
+  <div
+    class="el-rate"
+    @keydown="handelKey"
+    role="slider"
+    :aria-valuenow="currentValue"
+    :aria-valuetext="text"
+    aria-valuemin="0"
+    :aria-valuemax="max"
+    tabindex="0">
     <span
       v-for="item in max"
       class="el-rate__item"
       @mousemove="setCurrentValue(item, $event)"
       @mouseleave="resetCurrentValue"
       @click="selectValue(item)"
-      :style="{ cursor: disabled ? 'auto' : 'pointer' }"
-    >
+      :style="{ cursor: disabled ? 'auto' : 'pointer' }">
       <i
         :class="[classes[item - 1], { 'hover': hoverIndex === item }]"
         class="el-rate__icon"
@@ -35,7 +31,7 @@
   </div>
 </template>
 
-<script type="text/babel">
+<script>
   import { hasClass } from 'element-ui/src/utils/dom';
 
   export default {
@@ -46,8 +42,7 @@
         classMap: {},
         pointerAtLeftHalf: true,
         currentValue: this.value,
-        hoverIndex: -1,
-        focusing: false
+        hoverIndex: -1
       };
     },
 
@@ -250,7 +245,6 @@
           this.$emit('input', value);
           this.$emit('change', value);
         }
-        this.focusing = false;
       },
 
       handelKey(e) {

packages/select/src/select.vue

@@ -140,7 +140,11 @@
 
     componentName: 'ElSelect',
 
-    inject: ['elFormItem'],
+    inject: {
+      elFormItem: {
+        default: ''
+      }
+    },
 
     provide() {
       return {

packages/switch/src/component.vue

@@ -36,8 +36,11 @@
   </div>
 </template>
 <script>
+  import Focus from 'element-ui/src/mixins/focus';
+
   export default {
     name: 'ElSwitch',
+    mixins: [Focus('input')],
     props: {
       value: {
         type: [Boolean, String, Number],

packages/theme-chalk/src/common/var.scss

@@ -407,7 +407,7 @@ $--button-mini-border-radius: #{$--border-radius-base - 1};
 $--button-mini-padding-vertical: 7px;
 $--button-mini-padding-horizontal: 15px;
 
-$--button-default-color: $--color-text-primary;
+$--button-default-color: $--color-text-regular;
 $--button-default-fill: $--color-white;
 $--button-default-border: $--border-color-base;
 

packages/theme-chalk/src/form.scss

@@ -47,18 +47,55 @@
     display: none;
   }
 
+  @include m(medium) {
+    .el-form-item__label {
+      line-height: 36px;
+    }
+    .el-form-item__content {
+      line-height: 36px;
+    }
+  }
+  @include m(small) {
+    .el-form-item__label {
+      line-height: 32px;
+    }
+    .el-form-item__content {
+      line-height: 32px;
+    }
+    &.el-form-item {
+      margin-bottom: 18px;
+    }
+    .el-form-item__error {
+      padding-top: 2px;
+    }
+  }
+  @include m(mini) {
+    .el-form-item__label {
+      line-height: 28px;
+    }
+    .el-form-item__content {
+      line-height: 28px;
+    }
+    &.el-form-item {
+      margin-bottom: 18px;
+    }
+    .el-form-item__error {
+      padding-top: 1px;
+    }
+  }
+
   @include e(label) {
     text-align: right;
     vertical-align: middle;
     float: left;
     font-size: 14px;
-    color: $--color-black;
-    line-height: 1;
-    padding: 11px 12px 11px 0;
+    color: $--color-text-regular;
+    line-height: 40px;
+    padding: 0 12px 0 0;
     box-sizing: border-box;
   }
   @include e(content) {
-    line-height: 36px;
+    line-height: 40px;
     position: relative;
     font-size: 14px;
     @include utils-clearfix;

packages/theme-chalk/src/pagination.scss

@@ -22,7 +22,6 @@
   }
 
   .el-input__inner {
-    font-weight: bold;
     text-align: center;
   }
 
@@ -108,6 +107,8 @@
 
   @include e(sizes) {
     margin: 0 10px 0 0;
+    font-weight: normal;
+    color: $--color-text-regular;
 
     .el-input .el-input__inner {
       font-size: $--pagination-font-size;
@@ -121,10 +122,18 @@
 
   @include e(total) {
     margin-right: 10px;
+    font-weight: normal;
+    color: $--color-text-regular;
   }
 
   @include e(jump) {
     margin-left: 24px;
+    font-weight: normal;
+    color: $--color-text-regular;
+
+    .el-input__inner {
+      padding: 0 3px;
+    }
   }
 
   @include e(rightwrapper) {

packages/theme-chalk/src/rate.scss

@@ -5,7 +5,7 @@
   height: $--rate-height;
   line-height: 1;
 
-  &:focus:not(.focusing), &:active {
+  &:focus, &:active {
     outline-width: 0;
   }
 

packages/theme-chalk/src/switch.scss

@@ -47,8 +47,9 @@
     width: 0;
     height: 0;
     opacity: 0;
+    margin: 0;
     &:focus ~ .el-switch__core {
-      outline: 1px solid #f00;
+      outline: 1px solid $--color-primary;
     }
   }
 

packages/theme-chalk/src/table.scss

@@ -138,6 +138,10 @@
     border-bottom: $--table-border;
   }
 
+  th.is-sortable {
+    cursor: pointer;
+  }
+
   th {
     white-space: nowrap;
     overflow: hidden;

packages/upload/src/upload-list.vue

@@ -34,7 +34,7 @@
         }"></i>
       </label>
       <i class="el-icon-close" v-if="!disabled" @click="$emit('remove', file)"></i>
-      <i class="el-icon-close-tip" v-if="!disabled">按delete键可删除</i> <!--因为close按钮只在li:focus的时候 display, li blur后就不存在了，所以键盘导航时永远无法 focus到 close按钮上-->
+      <i class="el-icon-close-tip" v-if="!disabled">{{ t('el.upload.deleteTip') }}</i> <!--因为close按钮只在li:focus的时候 display, li blur后就不存在了，所以键盘导航时永远无法 focus到 close按钮上-->
       <el-progress
         v-if="file.status === 'uploading'"
         :type="listType === 'picture-card' ? 'circle' : 'line'"

src/locale/lang/af-ZA.js

@@ -78,6 +78,7 @@ export default {
       error: 'Ongeldige invoer'
     },
     upload: {
+      deleteTip: 'press delete to remove', // to be translated
       delete: 'Verwyder',
       preview: 'Voorskou',
       continue: 'Gaan voort'

src/locale/lang/ar.js

@@ -95,10 +95,10 @@ export default {
     transfer: {
       noMatch: 'لايوجد بيانات مطابقة',
       noData: 'لايوجد بيانات',
-      titles: ['قائمة 1', 'قائمة 2'], // to be translated
-      filterPlaceholder: 'ادخل كلمة', // to be translated
-      noCheckedFormat: '{total} عناصر', // to be translated
-      hasCheckedFormat: '{checked}/{total} مختار' // to be translated
+      titles: ['قائمة 1', 'قائمة 2'],
+      filterPlaceholder: 'ادخل كلمة',
+      noCheckedFormat: '{total} عناصر',
+      hasCheckedFormat: '{checked}/{total} مختار'
     }
   }
 };

src/locale/lang/bg.js

@@ -78,6 +78,7 @@ export default {
       error: 'Невалидни данни'
     },
     upload: {
+      deleteTip: 'press delete to remove', // to be translated
       delete: 'Изтрий',
       preview: 'Прегледай',
       continue: 'Продължи'

src/locale/lang/ca.js

@@ -77,6 +77,7 @@ export default {
       error: 'Entrada invàlida'
     },
     upload: {
+      deleteTip: 'press delete to remove', // to be translated
       delete: 'Eliminar',
       preview: 'Vista Prèvia',
       continue: 'Continuar'

src/locale/lang/cz.js

@@ -80,6 +80,7 @@ export default {
       error: 'Neplatný vstup'
     },
     upload: {
+      deleteTip: 'press delete to remove', // to be translated
       delete: 'Vymazat',
       preview: 'Náhled',
       continue: 'Pokračovat'

src/locale/lang/da.js

@@ -77,6 +77,7 @@ export default {
       error: 'Ugyldig input'
     },
     upload: {
+      deleteTip: 'press delete to remove', // to be translated
       delete: 'Slet',
       preview: 'Forhåndsvisning',
       continue: 'Fortsæt'

src/locale/lang/de.js

@@ -79,6 +79,7 @@ export default {
       error: 'Fehler'
     },
     upload: {
+      deleteTip: 'press delete to remove', // to be translated
       delete: 'Löschen',
       preview: 'Vorschau',
       continue: 'Fortsetzen'

src/locale/lang/ee.js

@@ -78,6 +78,7 @@ export default {
       error: 'Vigane sisend'
     },
     upload: {
+      deleteTip: 'press delete to remove', // to be translated
       delete: 'Kustuta',
       preview: 'Eelvaate',
       continue: 'Jätka'

src/locale/lang/el.js

@@ -78,6 +78,7 @@ export default {
       error: 'Άκυρη εισαγωγή'
     },
     upload: {
+      deleteTip: 'press delete to remove', // to be translated
       delete: 'Διαγραφή',
       preview: 'Προεπισκόπηση',
       continue: 'Συνέχεια'

src/locale/lang/en.js

@@ -78,6 +78,7 @@ export default {
       error: 'Illegal input'
     },
     upload: {
+      deleteTip: 'press delete to remove',
       delete: 'Delete',
       preview: 'Preview',
       continue: 'Continue'

src/locale/lang/es.js

@@ -77,6 +77,7 @@ export default {
       error: 'Entrada inválida'
     },
     upload: {
+      deleteTip: 'press delete to remove', // to be translated
       delete: 'Eliminar',
       preview: 'Vista Previa',
       continue: 'Continuar'

src/locale/lang/fa.js

@@ -78,6 +78,7 @@ export default {
       error: 'ورودی غیر مجاز'
     },
     upload: {
+      deleteTip: 'press delete to remove', // to be translated
       delete: 'حذف',
       preview: 'پیش‌نمایش',
       continue: 'ادهمه'

src/locale/lang/fi.js

@@ -78,6 +78,7 @@ export default {
       error: 'Virheellinen syöte'
     },
     upload: {
+      deleteTip: 'press delete to remove', // to be translated
       delete: 'Poista',
       preview: 'Esikatsele',
       continue: 'Jatka'

src/locale/lang/fr.js

@@ -77,6 +77,7 @@ export default {
       error: 'Erreur'
     },
     upload: {
+      deleteTip: 'press delete to remove', // to be translated
       delete: 'Supprimer',
       preview: 'Aperçu',
       continue: 'Continuer'

src/locale/lang/he.js

@@ -78,6 +78,7 @@ export default {
       error: 'קלט לא תקין'
     },
     upload: {
+      deleteTip: 'press delete to remove', // to be translated
       delete: 'מחק',
       preview: 'תצוגה מקדימה',
       continue: 'המשך'

src/locale/lang/id.js

@@ -78,6 +78,7 @@ export default {
       error: 'Masukan ilegal'
     },
     upload: {
+      deleteTip: 'press delete to remove', // to be translated
       delete: 'Hapus',
       preview: 'Pratinjau',
       continue: 'Lanjutkan'

src/locale/lang/it.js

@@ -77,6 +77,7 @@ export default {
       error: 'Input non valido'
     },
     upload: {
+      deleteTip: 'press delete to remove', // to be translated
       delete: 'Cancella',
       preview: 'Anteprima',
       continue: 'Continua'

src/locale/lang/ja.js

@@ -78,6 +78,7 @@ export default {
       error: '正しくない入力'
     },
     upload: {
+      deleteTip: 'press delete to remove', // to be translated
       delete: '削除する',
       preview: 'プレビュー',
       continue: '続行する'

src/locale/lang/ko.js

@@ -78,6 +78,7 @@ export default {
       error: '올바르지 않은 입력'
     },
     upload: {
+      deleteTip: 'press delete to remove', // to be translated
       delete: '삭제',
       preview: '미리보기',
       continue: '계속하기'

src/locale/lang/lv.js

@@ -78,6 +78,7 @@ export default {
       error: 'Nederīga ievade'
     },
     upload: {
+      deleteTip: 'press delete to remove', // to be translated
       delete: 'Dzēst',
       preview: 'Priekšskatīt',
       continue: 'Turpināt'

src/locale/lang/nb-NO.js

@@ -77,6 +77,7 @@ export default {
       error: 'Ugyldig input'
     },
     upload: {
+      deleteTip: 'press delete to remove', // to be translated
       delete: 'Slett',
       preview: 'Forhåndsvisning',
       continue: 'Fortsett'

src/locale/lang/nl.js

@@ -78,6 +78,7 @@ export default {
       error: 'Ongeldige invoer'
     },
     upload: {
+      deleteTip: 'press delete to remove', // to be translated
       delete: 'Verwijder',
       preview: 'Voorbeeld',
       continue: 'Doorgaan'

src/locale/lang/pl.js

@@ -78,6 +78,7 @@ export default {
       error: 'Wiadomość zawiera niedozwolone znaki'
     },
     upload: {
+      deleteTip: 'press delete to remove', // to be translated
       delete: 'Kasuj',
       preview: 'Podgląd',
       continue: 'Kontynuuj'

src/locale/lang/pt-br.js

@@ -78,6 +78,7 @@ export default {
       error: 'Erro!'
     },
     upload: {
+      deleteTip: 'press delete to remove', // to be translated
       delete: 'Apagar',
       preview: 'Pré-visualizar',
       continue: 'Continuar'

src/locale/lang/pt.js

@@ -78,6 +78,7 @@ export default {
       error: 'Erro!'
     },
     upload: {
+      deleteTip: 'press delete to remove', // to be translated
       delete: 'Apagar',
       preview: 'Previsualizar',
       continue: 'Continuar'

src/locale/lang/ru-RU.js

@@ -78,6 +78,7 @@ export default {
       error: 'Недопустимый ввод данных'
     },
     upload: {
+      deleteTip: 'press delete to remove', // to be translated
       delete: 'Удалить',
       preview: 'Превью',
       continue: 'Продолжить'

src/locale/lang/sk.js

@@ -80,6 +80,7 @@ export default {
       error: 'Neplatný vstup'
     },
     upload: {
+      deleteTip: 'press delete to remove', // to be translated
       delete: 'Vymazať',
       preview: 'Prehliadať',
       continue: 'Pokračovať'

src/locale/lang/sl.js

@@ -78,6 +78,7 @@ export default {
       error: 'Nedovoljen vnos'
     },
     upload: {
+      deleteTip: 'press delete to remove', // to be translated
       delete: 'Izbriši',
       preview: 'Predogled',
       continue: 'Nadaljuj'

src/locale/lang/sv-SE.js

@@ -78,6 +78,7 @@ export default {
       error: 'Felaktig inmatning'
     },
     upload: {
+      deleteTip: 'press delete to remove', // to be translated
       delete: 'Radera',
       preview: 'Förhandsvisa',
       continue: 'Fortsätt'

src/locale/lang/ta.js

@@ -77,6 +77,7 @@ export default {
       error: 'பொருத்தாமில்லாத உள்ளீடு'
     },
     upload: {
+      deleteTip: 'press delete to remove', // to be translated
       delete: 'நீக்கு',
       preview: 'முன்னோட்டம் பார்',
       continue: 'தொடரு'
@@ -96,8 +97,8 @@ export default {
       noData: 'தரவு இல்லை',
       titles: ['பட்டியல் 1', 'பட்டியல் 2'],
       filterPlaceholder: 'சொல்லை உள்ளீடு செய்',
-      noCheckedFormat: '{மொத்தம்} items',
-      hasCheckedFormat: '{தேர்வு செய்யப்பட்டவைகள்}/{மொத்தம்} தேர்வு செய்யப்பட்டவைகள்'
+      noCheckedFormat: '{total} items', // to be translated
+      hasCheckedFormat: '{checked}/{total} தேர்வு செய்யப்பட்டவைகள்'
     }
   }
 };

src/locale/lang/th.js

@@ -78,6 +78,7 @@ export default {
       error: 'คุณป้อนข้อมูลไม่ถูกต้อง'
     },
     upload: {
+      deleteTip: 'press delete to remove', // to be translated
       delete: 'ลบ',
       preview: 'ตัวอย่าง',
       continue: 'ทำต่อ'

src/locale/lang/tk.js

@@ -78,6 +78,7 @@ export default {
       error: 'Ýalňyş girizme'
     },
     upload: {
+      deleteTip: 'press delete to remove', // to be translated
       delete: 'Poz',
       preview: 'Gör',
       continue: 'Dowam et'

src/locale/lang/tr-TR.js

@@ -78,6 +78,7 @@ export default {
       error: 'İllegal giriş'
     },
     upload: {
+      deleteTip: 'press delete to remove', // to be translated
       delete: 'Sil',
       preview: 'Görüntüle',
       continue: 'Devam'

src/locale/lang/ua.js

@@ -78,6 +78,7 @@ export default {
       error: 'Неприпустимий ввід даних'
     },
     upload: {
+      deleteTip: 'press delete to remove', // to be translated
       delete: 'Видалити',
       preview: 'Перегляд',
       continue: 'Продовжити'

src/locale/lang/vi.js

@@ -78,6 +78,7 @@ export default {
       error: 'Dữ liệu không hợp lệ'
     },
     upload: {
+      deleteTip: 'press delete to remove', // to be translated
       delete: 'Xóa',
       preview: 'Xem trước',
       continue: 'Tiếp tục'

src/locale/lang/zh-CN.js

@@ -78,6 +78,7 @@ export default {
       error: '输入的数据不合法!'
     },
     upload: {
+      deleteTip: '按delete键可删除',
       delete: '删除',
       preview: '查看图片',
       continue: '继续上传'

src/locale/lang/zh-TW.js

@@ -78,6 +78,7 @@ export default {
       error: '輸入的資料不符規定!'
     },
     upload: {
+      deleteTip: '按delete鍵可刪除',
       delete: '刪除',
       preview: '查看圖片',
       continue: '繼續上傳'

src/utils/resize-event.js

@@ -177,6 +177,7 @@ export const addResizeListener = function(element, fn) {
 
 /* istanbul ignore next */
 export const removeResizeListener = function(element, fn) {
+  if (!element || !element.__resizeListeners__) return;
   if (attachEvent) {
     element.detachEvent('onresize', fn);
   } else {

test/unit/karma.conf.js

 var webpackConfig = require('../../build/cooking.test');
 
 // no need for app entry during tests
-delete webpackConfig.entry;
+// delete webpackConfig.entry;
 
 module.exports = function(config) {
   config.set({

test/unit/specs/carousel.spec.js

@@ -11,7 +11,7 @@ describe('Carousel', () => {
       template: `
         <div>
           <el-carousel>
-            <el-carousel-item v-for="item in 3"></el-carousel-item>
+            <el-carousel-item v-for="item in 3" :key="item"></el-carousel-item>
           </el-carousel>
         </div>
       `
@@ -24,7 +24,7 @@ describe('Carousel', () => {
       template: `
         <div>
           <el-carousel :interval="50">
-            <el-carousel-item v-for="item in 3"></el-carousel-item>
+            <el-carousel-item v-for="item in 3" :key="item"></el-carousel-item>
           </el-carousel>
         </div>
       `
@@ -45,7 +45,7 @@ describe('Carousel', () => {
       template: `
         <div>
           <el-carousel :autoplay="false" :initial-index="1">
-            <el-carousel-item v-for="item in 3"></el-carousel-item>
+            <el-carousel-item v-for="item in 3" :key="item"></el-carousel-item>
           </el-carousel>
         </div>
       `
@@ -62,7 +62,7 @@ describe('Carousel', () => {
       template: `
         <div>
           <el-carousel :interval="20">
-            <el-carousel-item v-for="item in 3"></el-carousel-item>
+            <el-carousel-item v-for="item in 3" :key="item"></el-carousel-item>
           </el-carousel>
         </div>
       `
@@ -88,7 +88,7 @@ describe('Carousel', () => {
       template: `
         <div>
           <el-carousel :interval="50" @change="handleChange">
-            <el-carousel-item v-for="item in 3"></el-carousel-item>
+            <el-carousel-item v-for="item in 3" :key="item"></el-carousel-item>
           </el-carousel>
         </div>
       `,
@@ -135,7 +135,7 @@ describe('Carousel', () => {
         template: `
         <div>
           <el-carousel :autoplay="false">
-            <el-carousel-item v-for="item in 3"></el-carousel-item>
+            <el-carousel-item v-for="item in 3" :key="item"></el-carousel-item>
           </el-carousel>
         </div>
       `
@@ -155,7 +155,7 @@ describe('Carousel', () => {
         template: `
         <div>
           <el-carousel :autoplay="false" trigger="click" ref="carousel">
-            <el-carousel-item v-for="item in 3"></el-carousel-item>
+            <el-carousel-item v-for="item in 3" :key="item"></el-carousel-item>
           </el-carousel>
         </div>
       `
@@ -184,7 +184,7 @@ describe('Carousel', () => {
         template: `
         <div>
           <el-carousel :autoplay="false">
-            <el-carousel-item v-for="item in 3"></el-carousel-item>
+            <el-carousel-item v-for="item in 3" :key="item"></el-carousel-item>
           </el-carousel>
         </div>
       `
@@ -204,7 +204,7 @@ describe('Carousel', () => {
         template: `
         <div>
           <el-carousel :autoplay="false">
-            <el-carousel-item v-for="item in 3"></el-carousel-item>
+            <el-carousel-item v-for="item in 3" :key="item"></el-carousel-item>
           </el-carousel>
         </div>
       `
@@ -230,7 +230,7 @@ describe('Carousel', () => {
       template: `
         <div>
           <el-carousel :autoplay="false" type="card">
-            <el-carousel-item v-for="item in 7"></el-carousel-item>
+            <el-carousel-item v-for="item in 7" :key="item"></el-carousel-item>
           </el-carousel>
         </div>
       `

test/unit/specs/radio.spec.js

@@ -21,10 +21,10 @@ describe('Radio', () => {
     let radioElm = vm.$el;
     expect(radioElm.classList.contains('el-radio')).to.be.true;
     radioElm.click();
-    vm.$nextTick(_ => {
+    setTimeout(_ => {
       expect(radioElm.querySelector('.is-checked')).to.be.ok;
       done();
-    });
+    }, 10);
   });
   it('disabled', done => {
     vm = createVue({
@@ -44,11 +44,11 @@ describe('Radio', () => {
     }, true);
     let radioElm = vm.$el;
     radioElm.click();
-    vm.$nextTick(_ => {
+    setTimeout(_ => {
       expect(vm.radio === '').to.be.true;
       expect(radioElm.querySelector('.is-disabled')).to.be.ok;
       done();
-    });
+    }, 10);
   });
   it('change event', done => {
     vm = createVue({
@@ -127,11 +127,11 @@ describe('Radio', () => {
         expect(vm.$refs.radio1.$el.querySelector('.is-checked')).to.be.ok;
         let radioElm = vm.$refs.radio2.$el;
         radioElm.click();
-        vm.$nextTick(_ => {
+        setTimeout(_ => {
           expect(radioElm.querySelector('.is-checked')).to.be.ok;
           expect(vm.radio === 6).to.be.true;
           done();
-        });
+        }, 10);
       }, 50);
     });
     it('disabled', done => {
@@ -153,11 +153,11 @@ describe('Radio', () => {
       expect(vm.$el.querySelectorAll('label.is-disabled').length).to.be.equal(3);
       expect(vm.$refs.radio1.$el.querySelector('.is-checked')).to.be.exist;
       radio2.$el.click();
-      vm.$nextTick(_ => {
+      setTimeout(_ => {
         expect(vm.radio === 3).to.be.true;
         expect(vm.$refs.radio1.$el.querySelector('.is-checked')).to.be.exist;
         done();
-      });
+      }, 10);
     });
     it('change event', done => {
       vm = createVue({
@@ -233,11 +233,11 @@ describe('Radio', () => {
       expect(vm.$el.querySelectorAll('.is-disabled').length).to.be.equal(3);
       expect(vm.$refs.radio1.$el.classList.contains('is-active')).to.be.true;
       radio2.$el.click();
-      vm.$nextTick(_ => {
+      setTimeout(_ => {
         expect(vm.radio === 3).to.be.true;
         expect(vm.$refs.radio1.$el.classList.contains('is-active')).to.be.true;
         done();
-      });
+      }, 10);
     });
     describe('Radio Button', () => {
       it('create', done => {
@@ -258,11 +258,11 @@ describe('Radio', () => {
         expect(vm.$refs.radio1.$el.classList.contains('is-active')).to.be.true;
         let radio = vm.$refs.radio2;
         radio.$el.click();
-        vm.$nextTick(_ => {
+        setTimeout(_ => {
           expect(radio.$el.classList.contains('is-active')).to.be.true;
           expect(vm.radio === 6).to.be.true;
           done();
-        });
+        }, 10);
       });
       it('custom color', done => {
         vm = createVue({
@@ -279,12 +279,12 @@ describe('Radio', () => {
             };
           }
         }, true);
-        vm.$nextTick(_ => {
+        setTimeout(_ => {
           expect(vm.$refs.radio1.activeStyle.backgroundColor).to.equal('#000');
           expect(vm.$refs.radio1.activeStyle.borderColor).to.equal('#000');
           expect(vm.$refs.radio1.activeStyle.color).to.equal('#ff0');
           done();
-        });
+        }, 10);
       });
       it('change event', done => {
         vm = createVue({
@@ -356,10 +356,10 @@ describe('Radio', () => {
             };
           }
         }, true);
-        vm.$nextTick(_ => {
+        setTimeout(_ => {
           expect(vm.$el.querySelectorAll('.el-radio-button--large').length).to.be.equal(3);
           done();
-        });
+        }, 10);
       });
     });
   });

test/unit/specs/table.spec.js

@@ -977,7 +977,7 @@ describe('Table', () => {
             template: `
             <el-table row-key="id" :data="testData" @expand="handleExpand" ${extra}>
               <el-table-column type="expand">
-                <template scope="props">
+                <template slot-scope="props">
                   <div>{{props.row.name}}</div>
                 </template>
               </el-table-column>

test/unit/specs/tabs.spec.js

@@ -106,7 +106,7 @@ describe('Tabs', () => {
     vm = createVue({
       template: `
         <el-tabs type="card" ref="tabs">
-          <el-tab-pane :label="tab.label" :name="tab.name" v-for="tab in tabs">Test Content</el-tab-pane>
+          <el-tab-pane :label="tab.label" :name="tab.name" v-for="tab in tabs" :key="tab.name">Test Content</el-tab-pane>
         </el-tabs>
       `,
       data() {
@@ -146,6 +146,7 @@ describe('Tabs', () => {
         <el-tabs ref="tabs" v-model="editableTabsValue" type="card" editable @edit="handleTabsEdit">
           <el-tab-pane
             v-for="(item, index) in editableTabs"
+            :key="item.name"
             :label="item.title"
             :name="item.name"
           >
@@ -238,6 +239,7 @@ describe('Tabs', () => {
           <el-tab-pane
             v-for="(item, index) in editableTabs"
             :label="item.title"
+            :key="item.name"
             :name="item.name"
           >
             {{item.content}}