update dependencies

examples/components/side-nav.vue

@@ -118,6 +118,7 @@
         @input="handleDropdownToggle">
         <el-dropdown-item
           v-for="item in Object.keys(versions)"
+          :key="item"
           @click.native="switchVersion(item)">
           {{ item }}
         </el-dropdown-item>

examples/docs/en-US/card.md

@@ -60,7 +60,7 @@ Card includes title, content and operations.
     <span style="line-height: 36px;">Card name</span>
     <el-button style="float: right;" type="primary">Operation button</el-button>
   </div>
-  <div v-for="o in 4" class="text item">
+  <div v-for="o in 4" :key="o" class="text item">
     {{'List item ' + o }}
   </div>
 </el-card>
@@ -97,7 +97,7 @@ The header part can be omitted.
 :::demo
 ```html
 <el-card class="box-card">
-  <div v-for="o in 4" class="text item">
+  <div v-for="o in 4" :key="o" class="text item">
     {{'List item ' + o }}
   </div>
 </el-card>
@@ -125,7 +125,7 @@ Display richer content by adding some configs.
 :::demo The `body-style` attribute defines CSS style of custom `body`. This example also uses `el-col` for layout.
 ```html
 <el-row>
-  <el-col :span="8" v-for="(o, index) in 2" :offset="index > 0 ? 2 : 0">
+  <el-col :span="8" v-for="(o, index) in 2" :key="o" :offset="index > 0 ? 2 : 0">
     <el-card :body-style="{ padding: '0px' }">
       <img src="~examples/assets/images/hamburger.png" class="image">
       <div style="padding: 14px;">

examples/docs/en-US/carousel.md

@@ -22,7 +22,7 @@ Loop a series of images or texts in a limited space
   <div class="block">
     <span class="demonstration">Switch when indicator is hovered (default)</span>
     <el-carousel height="150px">
-      <el-carousel-item v-for="item in 4">
+      <el-carousel-item v-for="item in 4" :key="item">
         <h3>{{ item }}</h3>
       </el-carousel-item>
     </el-carousel>
@@ -30,7 +30,7 @@ Loop a series of images or texts in a limited space
   <div class="block">
     <span class="demonstration">Switch when indicator is clicked</span>
     <el-carousel trigger="click" height="150px">
-      <el-carousel-item v-for="item in 4">
+      <el-carousel-item v-for="item in 4" :key="item">
         <h3>{{ item }}</h3>
       </el-carousel-item>
     </el-carousel>
@@ -65,7 +65,7 @@ Indicators can be displayed outside the carousel
 ```html
 <template>
   <el-carousel indicator-position="outside">
-    <el-carousel-item v-for="item in 4">
+    <el-carousel-item v-for="item in 4" :key="item">
       <h3>{{ item }}</h3>
     </el-carousel-item>
   </el-carousel>
@@ -99,7 +99,7 @@ You can define when arrows are displayed
 ```html
 <template>
   <el-carousel :interval="5000" arrow="always">
-    <el-carousel-item v-for="item in 4">
+    <el-carousel-item v-for="item in 4" :key="item">
       <h3>{{ item }}</h3>
     </el-carousel-item>
   </el-carousel>
@@ -133,7 +133,7 @@ When a page is wide enough but has limited height, you can activate card mode fo
 ```html
 <template>
   <el-carousel :interval="4000" type="card" height="200px">
-    <el-carousel-item v-for="item in 6">
+    <el-carousel-item v-for="item in 6" :key="item">
       <h3>{{ item }}</h3>
     </el-carousel-item>
   </el-carousel>

examples/docs/en-US/checkbox.md

@@ -127,7 +127,7 @@ The `indeterminate` property can help you to achieve a 'check all' effect.
   <el-checkbox :indeterminate="isIndeterminate" v-model="checkAll" @change="handleCheckAllChange">Check all</el-checkbox>
   <div style="margin: 15px 0;"></div>
   <el-checkbox-group v-model="checkedCities" @change="handleCheckedCitiesChange">
-    <el-checkbox v-for="city in cities" :label="city">{{city}}</el-checkbox>
+    <el-checkbox v-for="city in cities" :label="city" :key="city">{{city}}</el-checkbox>
   </el-checkbox-group>
 </template>
 <script>
@@ -169,7 +169,7 @@ The `min` and `max` properties can help you to limit the number of checked items
     v-model="checkedCities1"
     :min="1"
     :max="2">
-    <el-checkbox v-for="city in cities" :label="city">{{city}}</el-checkbox>
+    <el-checkbox v-for="city in cities" :label="city" :key="city">{{city}}</el-checkbox>
   </el-checkbox-group>
 </template>
 <script>
@@ -195,15 +195,15 @@ Checkbox with button styles.
 <template>
   <div style="margin: 15px 0;"></div>
   <el-checkbox-group v-model="checkboxGroup1">
-    <el-checkbox-button v-for="city in cities" :label="city">{{city}}</el-checkbox-button>
+    <el-checkbox-button v-for="city in cities" :label="city" :key="city">{{city}}</el-checkbox-button>
   </el-checkbox-group>
   <div style="margin: 15px 0;"></div>
   <el-checkbox-group v-model="checkboxGroup2" size="small">
-    <el-checkbox-button v-for="city in cities" :label="city" :disabled="city === 'Shenzhen'">{{city}}</el-checkbox-button>
+    <el-checkbox-button v-for="city in cities" :label="city" :disabled="city === 'Shenzhen'" :key="city">{{city}}</el-checkbox-button>
   </el-checkbox-group>
   <div style="margin: 15px 0;"></div>
   <el-checkbox-group v-model="checkboxGroup3" size="large" fill="#324057" text-color="#a4aebd" :min="1" :max="3">
-    <el-checkbox-button v-for="city in cities" :label="city">{{city}}</el-checkbox-button>
+    <el-checkbox-button v-for="city in cities" :label="city" :key="city">{{city}}</el-checkbox-button>
   </el-checkbox-group>
 </template>
 <script>

examples/docs/en-US/icon.md

@@ -32,7 +32,7 @@ Just assign the class name to `el-icon-iconName`.
 ### Icons
 
 <ul class="icon-list">
-  <li v-for="name in icons">
+  <li v-for="name in icons" :key="name">
     <span>
       <i :class="'el-icon-' + name"></i>
       {{'el-icon-' + name}}

examples/docs/en-US/select.md

@@ -139,6 +139,7 @@ When there are plenty of options, use a drop-down menu to display and select des
   <el-select v-model="value" placeholder="Select">
     <el-option
       v-for="item in options"
+      :key="item.value"
       :label="item.label"
       :value="item.value">
     </el-option>
@@ -182,6 +183,7 @@ When there are plenty of options, use a drop-down menu to display and select des
   <el-select v-model="value2" placeholder="Select">
     <el-option
       v-for="item in options2"
+      :key="item.value"
       :label="item.label"
       :value="item.value"
       :disabled="item.disabled">
@@ -228,6 +230,7 @@ Disable the whole component.
   <el-select v-model="value3" disabled placeholder="Select">
     <el-option
       v-for="item in options"
+      :key="item.value"
       :label="item.label"
       :value="item.value">
     </el-option>
@@ -272,6 +275,7 @@ You can clear Select using a clear icon.
   <el-select v-model="value4" clearable placeholder="Select">
     <el-option
       v-for="item in options"
+      :key="item.value"
       :label="item.label"
       :value="item.value">
     </el-option>
@@ -316,6 +320,7 @@ Multiple select uses tags to display selected options.
   <el-select v-model="value5" multiple placeholder="Select">
     <el-option
       v-for="item in options"
+      :key="item.value"
       :label="item.label"
       :value="item.value">
     </el-option>
@@ -361,6 +366,7 @@ You can customize HTML templates for options.
   <el-select v-model="value6" placeholder="Select">
     <el-option
       v-for="item in cities"
+      :key="item.value"
       :label="item.label"
       :value="item.value">
       <span style="float: left">{{ item.label }}</span>
@@ -411,9 +417,11 @@ Display options in groups.
   <el-select v-model="value7" placeholder="Select">
     <el-option-group
       v-for="group in options3"
+      :key="group.label"
       :label="group.label">
       <el-option
         v-for="item in group.options"
+        :key="item.value"
         :label="item.label"
         :value="item.value">
       </el-option>
@@ -468,6 +476,7 @@ You can filter options for your desired ones.
   <el-select v-model="value8" filterable placeholder="Select">
     <el-option
       v-for="item in options"
+      :key="item.value"
       :label="item.label"
       :value="item.value">
     </el-option>
@@ -593,6 +602,7 @@ Create and select new items that are not included in select options
     placeholder="Choose tags for your article">
     <el-option
       v-for="item in options5"
+      :key="item.value"
       :label="item.label"
       :value="item.value">
     </el-option>

examples/docs/en-US/switch.md

@@ -44,12 +44,12 @@ Switch is used for switching between two opposing states.
 ```
 :::
 
-### Expand value
+### Extended value types
 
-:::demo Set `on-value` and `off-value` attribute. It's receive `Boolean`, `String` or `Number` type.
+:::demo You can set `on-value` and `off-value` attributes. They both receive a `Boolean`, `String` or `Number` typed value.
 
 ```html
- <el-tooltip class="item" effect="dark" :content="'switch value is ' + value3" placement="top-end">
+ <el-tooltip :content="'Switch value: ' + value3" placement="top">
     <el-switch
       v-model="value3"
       on-color="#13ce66"
@@ -110,8 +110,8 @@ on-close-icon | class name of the icon displayed when in `on` state, overrides `
 off-close-icon |class name of the icon displayed when in `off` state, overrides `off-text`| string | — | —
 on-text | text displayed when in `on` state | string | — | ON
 off-text | text displayed when in `off` state | string | — | OFF
-on-value  | switch value when in `on` state | boolean \| string \| number | — | true
-off-value  | switch value when in `off` state | boolean \| string \| number | — | false
+on-value  | switch value when in `on` state | boolean / string / number | — | true
+off-value  | switch value when in `off` state | boolean / string / number | — | false
 on-color | background color when in `on` state | string | — | #20A0FF
 off-color | background color when in `off` state | string | — | #C0CCDA
 name| input name of Switch | string | — | —

examples/docs/en-US/tabs.md

@@ -201,6 +201,7 @@ Only card type Tabs support addable & closeable.
 <el-tabs v-model="editableTabsValue" type="card" editable @edit="handleTabsEdit">
   <el-tab-pane
     v-for="(item, index) in editableTabs"
+    :key="item.name"
     :label="item.title"
     :name="item.name"
   >
@@ -274,6 +275,7 @@ Only card type Tabs support addable & closeable.
 <el-tabs v-model="editableTabsValue2" type="card" closable @tab-remove="removeTab">
   <el-tab-pane
     v-for="(item, index) in editableTabs2"
+    :key="item.name"
     :label="item.title"
     :name="item.name"
   >

examples/docs/en-US/tag.md

@@ -64,6 +64,7 @@ Used for marking and selection.
 ```html
 <el-tag
   v-for="tag in tags"
+  :key="tag.name"
   :closable="true"
   :type="tag.type"
 >

examples/docs/zh-CN/card.md

@@ -61,7 +61,7 @@
     <span style="line-height: 36px;">卡片名称</span>
     <el-button style="float: right;" type="primary">操作按钮</el-button>
   </div>
-  <div v-for="o in 4" class="text item">
+  <div v-for="o in 4" :key="o" class="text item">
     {{'列表内容 ' + o }}
   </div>
 </el-card>
@@ -98,7 +98,7 @@
 :::demo
 ```html
 <el-card class="box-card">
-  <div v-for="o in 4" class="text item">
+  <div v-for="o in 4" :key="o" class="text item">
     {{'列表内容 ' + o }}
   </div>
 </el-card>
@@ -126,7 +126,7 @@
 :::demo 配置`body-style`属性来自定义`body`部分的`style`，我们还使用了布局组件。
 ```html
 <el-row>
-  <el-col :span="8" v-for="(o, index) in 2" :offset="index > 0 ? 2 : 0">
+  <el-col :span="8" v-for="(o, index) in 2" :key="o" :offset="index > 0 ? 2 : 0">
     <el-card :body-style="{ padding: '0px' }">
       <img src="~examples/assets/images/hamburger.png" class="image">
       <div style="padding: 14px;">

examples/docs/zh-CN/carousel.md

@@ -73,7 +73,7 @@
   <div class="block">
     <span class="demonstration">默认 Hover 指示器触发</span>
     <el-carousel height="150px">
-      <el-carousel-item v-for="item in 4">
+      <el-carousel-item v-for="item in 4" :key="item">
         <h3>{{ item }}</h3>
       </el-carousel-item>
     </el-carousel>
@@ -81,7 +81,7 @@
   <div class="block">
     <span class="demonstration">Click 指示器触发</span>
     <el-carousel trigger="click" height="150px">
-      <el-carousel-item v-for="item in 4">
+      <el-carousel-item v-for="item in 4" :key="item">
         <h3>{{ item }}</h3>
       </el-carousel-item>
     </el-carousel>
@@ -116,7 +116,7 @@
 ```html
 <template>
   <el-carousel indicator-position="outside">
-    <el-carousel-item v-for="item in 4">
+    <el-carousel-item v-for="item in 4" :key="item">
       <h3>{{ item }}</h3>
     </el-carousel-item>
   </el-carousel>
@@ -149,7 +149,7 @@
 ```html
 <template>
   <el-carousel :interval="5000" arrow="always">
-    <el-carousel-item v-for="item in 4">
+    <el-carousel-item v-for="item in 4" :key="item">
       <h3>{{ item }}</h3>
     </el-carousel-item>
   </el-carousel>
@@ -182,7 +182,7 @@
 ```html
 <template>
   <el-carousel :interval="4000" type="card" height="200px">
-    <el-carousel-item v-for="item in 6">
+    <el-carousel-item v-for="item in 6" :key="item">
       <h3>{{ item }}</h3>
     </el-carousel-item>
   </el-carousel>

examples/docs/zh-CN/checkbox.md

@@ -137,7 +137,7 @@
   <el-checkbox :indeterminate="isIndeterminate" v-model="checkAll" @change="handleCheckAllChange">全选</el-checkbox>
   <div style="margin: 15px 0;"></div>
   <el-checkbox-group v-model="checkedCities" @change="handleCheckedCitiesChange">
-    <el-checkbox v-for="city in cities" :label="city">{{city}}</el-checkbox>
+    <el-checkbox v-for="city in cities" :label="city" :key="city">{{city}}</el-checkbox>
   </el-checkbox-group>
 </template>
 <script>
@@ -179,7 +179,7 @@
     v-model="checkedCities1"
     :min="1"
     :max="2">
-    <el-checkbox v-for="city in cities" :label="city">{{city}}</el-checkbox>
+    <el-checkbox v-for="city in cities" :label="city" :key="city">{{city}}</el-checkbox>
   </el-checkbox-group>
 </template>
 <script>
@@ -206,15 +206,15 @@
 <template>
   <div style="margin: 15px 0;"></div>
   <el-checkbox-group v-model="checkboxGroup1">
-    <el-checkbox-button v-for="city in cities" :label="city">{{city}}</el-checkbox-button>
+    <el-checkbox-button v-for="city in cities" :label="city" :key="city">{{city}}</el-checkbox-button>
   </el-checkbox-group>
   <div style="margin: 15px 0;"></div>
   <el-checkbox-group v-model="checkboxGroup2" size="small">
-    <el-checkbox-button v-for="city in cities" :label="city" :disabled="city === '深圳'">{{city}}</el-checkbox-button>
+    <el-checkbox-button v-for="city in cities" :label="city" :disabled="city === '深圳'" :key="city">{{city}}</el-checkbox-button>
   </el-checkbox-group>
   <div style="margin: 15px 0;"></div>
   <el-checkbox-group v-model="checkboxGroup3" size="large" fill="#324057" text-color="#a4aebd" :min="1" :max="3">
-    <el-checkbox-button v-for="city in cities" :label="city">{{city}}</el-checkbox-button>
+    <el-checkbox-button v-for="city in cities" :label="city" :key="city">{{city}}</el-checkbox-button>
   </el-checkbox-group>
 </template>
 <script>

examples/docs/zh-CN/icon.md

@@ -85,7 +85,7 @@
 ### 图标集合
 
 <ul class="icon-list">
-  <li v-for="name in icons">
+  <li v-for="name in icons" :key="name">
     <span>
       <i :class="'el-icon-' + name"></i>
       {{'el-icon-' + name}}

examples/docs/zh-CN/select.md

@@ -145,6 +145,7 @@
   <el-select v-model="value" placeholder="请选择">
     <el-option
       v-for="item in options"
+      :key="item.value"
       :label="item.label"
       :value="item.value">
     </el-option>
@@ -187,6 +188,7 @@
   <el-select v-model="value2" placeholder="请选择">
     <el-option
       v-for="item in options2"
+      :key="item.value"
       :label="item.label"
       :value="item.value"
       :disabled="item.disabled">
@@ -233,6 +235,7 @@
   <el-select v-model="value3" disabled placeholder="请选择">
     <el-option
       v-for="item in options"
+      :key="item.value"
       :label="item.label"
       :value="item.value">
     </el-option>
@@ -277,6 +280,7 @@
   <el-select v-model="value4" clearable placeholder="请选择">
     <el-option
       v-for="item in options"
+      :key="item.value"
       :label="item.label"
       :value="item.value">
     </el-option>
@@ -321,6 +325,7 @@
   <el-select v-model="value5" multiple placeholder="请选择">
     <el-option
       v-for="item in options"
+      :key="item.value"
       :label="item.label"
       :value="item.value">
     </el-option>
@@ -365,6 +370,7 @@
   <el-select v-model="value6" placeholder="请选择">
     <el-option
       v-for="item in cities"
+      :key="item.value"
       :label="item.label"
       :value="item.value">
       <span style="float: left">{{ item.label }}</span>
@@ -414,9 +420,11 @@
   <el-select v-model="value7" placeholder="请选择">
     <el-option-group
       v-for="group in options3"
+      :key="group.label"
       :label="group.label">
       <el-option
         v-for="item in group.options"
+        :key="item.value"
         :label="item.label"
         :value="item.value">
       </el-option>
@@ -471,6 +479,7 @@
   <el-select v-model="value8" filterable placeholder="请选择">
     <el-option
       v-for="item in options"
+      :key="item.value"
       :label="item.label"
       :value="item.value">
     </el-option>
@@ -594,6 +603,7 @@
     placeholder="请选择文章标签">
     <el-option
       v-for="item in options5"
+      :key="item.value"
       :label="item.label"
       :value="item.value">
     </el-option>

examples/docs/zh-CN/switch.md

@@ -52,12 +52,12 @@
 ```
 :::
 
-### 扩展 value
+### 扩展的 value 类型
 
-:::demo 设置`on-value` 和 `off-value`属性，接受`Boolean`, `String` 或 `Number` 类型的值。
+:::demo 设置`on-value`和`off-value`属性，接受`Boolean`, `String`或`Number`类型的值。
 
 ```html
- <el-tooltip class="item" effect="dark" :content="'switch value is ' + value3" placement="top-end">
+ <el-tooltip :content="'Switch value: ' + value3" placement="top">
     <el-switch
       v-model="value3"
       on-color="#13ce66"
@@ -119,8 +119,8 @@
 | off-icon-class  | switch 关闭时所显示图标的类名，设置此项会忽略 `off-text`    | string   | — | — |
 | on-text  | switch 打开时的文字    | string   | — | ON |
 | off-text  | switch 关闭时的文字    | string   | — | OFF |
-| on-value  | switch 打开时的值    | boolean \| string \| number | — | true |
-| off-value  | switch 关闭时的值    | boolean \| string \| number | — | false |
+| on-value  | switch 打开时的值    | boolean / string / number | — | true |
+| off-value  | switch 关闭时的值    | boolean / string / number | — | false |
 | on-color  | switch 打开时的背景色    | string   | — | #20A0FF |
 | off-color  | switch 关闭时的背景色    | string   | — | #C0CCDA |
 | name  | switch 对应的 name 属性    | string   | — | — |
@@ -128,4 +128,4 @@
 ### Events
 | 事件名称      | 说明    | 回调参数      |
 |---------- |-------- |---------- |
-| change  | switch 状态发生变化时的回调函数    | 新状态的布尔值 |
+| change  | switch 状态发生变化时的回调函数    | 新状态的值 |

examples/docs/zh-CN/tabs.md

@@ -198,6 +198,7 @@
 ```html
 <el-tabs v-model="editableTabsValue" type="card" editable @edit="handleTabsEdit">
   <el-tab-pane
+    :key="item.name"
     v-for="(item, index) in editableTabs"
     :label="item.title"
     :name="item.name"
@@ -272,6 +273,7 @@
 <el-tabs v-model="editableTabsValue2" type="card" closable @tab-remove="removeTab">
   <el-tab-pane
     v-for="(item, index) in editableTabs2"
+    :key="item.name"
     :label="item.title"
     :name="item.name"
   >

examples/docs/zh-CN/tag.md

@@ -87,6 +87,7 @@
 ```html
 <el-tag
   v-for="tag in tags"
+  :key="item.name"
   :closable="true"
   :type="tag.type"
 >

package.json

@@ -45,7 +45,7 @@
   "unpkg": "lib/index.js",
   "style": "lib/theme-default/index.css",
   "dependencies": {
-    "async-validator": "^1.6.6",
+    "async-validator": "^1.6.9",
     "babel-helper-vue-jsx-merge-props": "^2.0.0",
     "deepmerge": "^1.2.0",
     "throttle-debounce": "^1.0.1"
@@ -114,12 +114,12 @@
     "transliteration": "^1.1.11",
     "uppercamelcase": "^1.1.0",
     "url-loader": "^0.5.7",
-    "vue": "^2.1.8",
-    "vue-loader": "^10.3.0",
+    "vue": "^2.3.0",
+    "vue-loader": "^12.0.2",
     "vue-markdown-loader": "^0.5.1",
     "vue-router": "^2.0.0",
-    "vue-template-compiler": "^2.1.8",
-    "vue-template-es2015-compiler": "^1.4.2",
+    "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"

packages/pagination/src/pagination.js

@@ -205,7 +205,7 @@ export default {
               type="number"
               min={ 1 }
               max={ this.internalPageCount }
-              domProps-value={ this.$parent.internalCurrentPage }
+              value={ this.$parent.internalCurrentPage }
               on-change={ this.handleChange }
               on-focus={ this.handleFocus }
               style={{ width: '30px' }}

packages/table/src/filter-panel.vue

@@ -5,6 +5,7 @@
         <el-checkbox-group class="el-table-filter__checkbox-group" v-model="filteredValue">
           <el-checkbox
             v-for="filter in filters"
+            :key="filter.value"
             :label="filter.value">{{ filter.text }}</el-checkbox>
         </el-checkbox-group>
       </div>
@@ -23,6 +24,7 @@
         <li class="el-table-filter__list-item"
             v-for="filter in filters"
             :label="filter.value"
+            :key="filter.value"
             :class="{ 'is-active': isActive(filter) }"
             @click="handleSelect(filter.value)" >{{ filter.text }}</li>
       </ul>

packages/table/src/table-column.js

@@ -35,11 +35,11 @@ const forced = {
     renderHeader: function(h) {
       return <el-checkbox
         nativeOn-click={ this.toggleAllSelection }
-        domProps-value={ this.isAllSelected } />;
+        value={ this.isAllSelected } />;
     },
     renderCell: function(h, { row, column, store, $index }) {
       return <el-checkbox
-        domProps-value={ store.isSelected(row) }
+        value={ store.isSelected(row) }
         disabled={ column.selectable ? !column.selectable.call(null, row, $index) : false }
         on-input={ () => { store.commit('rowSelectedChanged', row); } } />;
     },

packages/theme-default/src/index.css

@@ -15,6 +15,7 @@
 @import "./radio-group.css";
 @import "./radio-button.css";
 @import "./checkbox.css";
+@import "./checkbox-button.css";
 @import "./checkbox-group.css";
 @import "./switch.css";
 @import "./select.css";