[release] 1.1.2

TimePicker: fix range timepicker

.github/ISSUE_TEMPLATE.md

@@ -1,16 +1,14 @@
 <!--
 提交 issue 前请务必查看 FAQ：https://github.com/ElemeFE/element/blob/master/FAQ.md。如果你的问题可以在 FAQ 中找到解决方案，我们会直接关闭 issue。
- -->
 
-<!--
 issue 仅用于提交 bug 或 feature 以及设计相关的内容，其它疑问请到 gitter 聊天室找社区里面的小伙伴聊一聊：https://gitter.im/ElemeFE/element
- -->
- 
-<!--
-Issues are exclusively for bug reports and feature requests. For other questions, please visit gitter: https://gitter.im/ElemeFE/element
+
+有问题请提供 Demo 或者 GitHub 仓库地址，节省大家时间
 -->
 
 <!--
+Issues are exclusively for bug reports and feature requests. For other questions, please visit gitter: https://gitter.im/ElemeFE/element
+
 Thank you for contributing! Please carefully read the following before opening your issue.
  -->
 

.github/PULL_REQUEST_TEMPLATE.md

@@ -2,5 +2,4 @@ Please makes sure these boxes are checked before submitting your PR, thank you!
 
 * [ ] Make sure you follow Element's [Contributing Guide](https://github.com/ElemeFE/element/blob/master/.github/CONTRIBUTING.md).
 * [ ] Make sure you are merging your commits to `dev` branch.
-* [ ] Rebase before creating a PR to keep commit history clear.
 * [ ] Add some descriptions and refer relative issues for you PR.

CHANGELOG.en-US.md

@@ -1,5 +1,23 @@
 ## Changelog
 
+### 1.1.2
+
+*2016-12-30*
+
+- Fixed `sortable` and `fixed` attribute of Table not working in Vue 2.1.7+
+- Fixed Input Number not resetting on blur when input with illegal values, #2098
+- Removed `title` scoped slot of Collapse, and added `title` named slot, #2100
+- Fixed range selection in TimePicker not working issue
+- Fixed Tabs' active tab switching when a non-active tab is removed, #2106
+- Fixed console error reporting when navigating Select with arrow keys, #2120
+- Fixed incorrect validation timing of filterable Select in Form, #2120
+
+### 1.1.1
+
+*2016-12-29*
+
+- Fixed compatibility issue with latest Vue due to compilation
+
 ### 1.1.0 Helium
 
 *2016-12-29*

CHANGELOG.zh-CN.md

@@ -1,5 +1,21 @@
 ## 更新日志
 
+### 1.1.2
+*2016-12-30*
+
+- 修复 Vue 2.1.7 升级导致的 Table `sortable` 和 `fixed` 无法使用的问题
+- 修正 Input Number 在手动输入越界值时，blur 触发时没有重置为原来的值的问题，#2098
+- 移除 Collapse 的 `title` scoped slot, 并新增 `title` named slot，#2100
+- 修复 TimePicker 范围选择无法使用的问题
+- 修复 Tabs 删除非当前激活的 tab 后，当前激活的 tab 变化的问题，#2106
+- 修复 Select 在使用方向键导航时控制台报错的问题，#2120
+- 修复 Form 中可搜索的 Select 验证时机错误的问题，#2120
+
+### 1.1.1
+*2016-12-29*
+
+- 修复由于编译而出现的不兼容新版 Vue 的问题
+
 ### 1.1.0 Helium
 *2016-12-29*
 

examples/docs/en-US/collapse.md

@@ -94,14 +94,14 @@ In accordion mode, only one panel can be expanded at once
 
 ### Custom title
 
-Besides using the `title` attribute, you can customize panel title with scoped slots, which makes adding custom content, e.g. icons, possible.
+Besides using the `title` attribute, you can customize panel title with named slots, which makes adding custom content, e.g. icons, possible.
 
 :::demo
 ```html
 <el-collapse accordion>
-  <el-collapse-item title="Consistency" name="1">
-    <template slot="title" scope="props">
-      {{props.title}}<i class="header-icon el-icon-information"></i>
+  <el-collapse-item name="1">
+    <template slot="title">
+      Consistency<i class="header-icon el-icon-information"></i>
     </template>
     <div>Consistent with real life: in line with the process and logic of real life, and comply with languages and habits that the users are used to;</div>
     <div>Consistent within interface: all elements should be consistent, such as: design style, icons and texts, position of elements, etc.</div>

examples/docs/en-US/form.md

@@ -120,24 +120,27 @@
             { validator: checkAge, trigger: 'blur' }
           ]
         },
-        dynamicForm: {
+        dynamicValidateForm: {
           domains: [{
             key: Date.now(),
             value: ''
           }],
           email: ''
         },
-        dynamicRule: {
-          email: [
-            { required: true, message: 'Please input email address', trigger: 'blur' },
-            { type: 'email', message: 'Please input correct email address', trigger: 'blur,change' }
-          ]
+        numberValidateForm: {
+          age: ''
         }
       };
     },
     methods: {
-      handleSubmit(ev) {
-        this.$refs.ruleForm.validate((valid) => {
+      onSubmit() {
+        console.log('submit!');
+      },
+      onRuleFormSubmit() {
+        console.log('onRuleFormSubmit');
+      },
+      submitForm(formName) {
+        this.$refs[formName].validate((valid) => {
           if (valid) {
             alert('submit!');
           } else {
@@ -146,52 +149,17 @@
           }
         });
       },
-      handleSubmit2(ev) {
-        this.$refs.ruleForm2.validate(valid => {
-          if (valid) {
-            alert('Submit');
-          } else {
-            console.log('error submit!!');
-            return false;
-          }
-        });
-      },
-      handleSubmit3(ev) {
-        this.$refs.dynamicForm.validate(valid => {
-          if (valid) {
-            alert('Submit');
-          } else {
-            console.log('error submit!!');
-            return false;
-          }
-        });
-      },
-      handleReset() {
-        this.$refs.ruleForm.resetFields();
-      },
-      handleReset2() {
-        this.$refs.ruleForm2.resetFields();
-      },
-      handleReset3() {
-        this.$refs.dynamicForm.resetFields();
-      },
-      handleValidate(prop, errorMsg) {
-        console.log(prop, errorMsg);
-      },
-      onSubmit() {
-        console.log('submit!');
-      },
-      onRuleFormSubmit() {
-        console.log('onRuleFormSubmit');
+      resetForm(formName) {
+        this.$refs[formName].resetFields();
       },
       removeDomain(item) {
-        var index = this.dynamicForm.domains.indexOf(item)
+        var index = this.dynamicValidateForm.domains.indexOf(item)
         if (index !== -1) {
-          this.dynamicForm.domains.splice(index, 1)
+          this.dynamicValidateForm.domains.splice(index, 1)
         }
       },
       addDomain() {
-        this.dynamicForm.domains.push({
+        this.dynamicValidateForm.domains.push({
           key: Date.now(),
           value: ''
         });
@@ -552,8 +520,8 @@ Form component allows you to verify your data, helping you find and correct erro
     <el-input type="textarea" v-model="ruleForm.desc"></el-input>
   </el-form-item>
   <el-form-item>
-    <el-button type="primary" @click="handleSubmit">Create</el-button>
-    <el-button @click="handleReset">Reset</el-button>
+    <el-button type="primary" @click="submitForm('ruleForm')">Create</el-button>
+    <el-button @click="resetForm('ruleForm')">Reset</el-button>
   </el-form-item>
 </el-form>
 <script>
@@ -597,11 +565,8 @@ Form component allows you to verify your data, helping you find and correct erro
       };
     },
     methods: {
-      handleReset() {
-        this.$refs.ruleForm.resetFields();
-      },
-      handleSubmit(ev) {
-        this.$refs.ruleForm.validate((valid) => {
+      submitForm(formName) {
+        this.$refs[formName].validate((valid) => {
           if (valid) {
             alert('submit!');
           } else {
@@ -609,6 +574,9 @@ Form component allows you to verify your data, helping you find and correct erro
             return false;
           }
         });
+      },
+      resetForm(formName) {
+        this.$refs[formName].resetFields();
       }
     }
   }
@@ -632,8 +600,8 @@ Form component allows you to verify your data, helping you find and correct erro
     <el-input v-model.number="ruleForm2.age"></el-input>
   </el-form-item>
   <el-form-item>
-    <el-button type="primary" @click="handleSubmit2">Submit</el-button>
-    <el-button @click="handleReset2">Reset</el-button>
+    <el-button type="primary" @click="submitForm('ruleForm2')">Submit</el-button>
+    <el-button @click="resetForm('ruleForm2')">Reset</el-button>
   </el-form-item>
 </el-form>
 <script>
@@ -694,11 +662,8 @@ Form component allows you to verify your data, helping you find and correct erro
       };
     },
     methods: {
-      handleReset2() {
-        this.$refs.ruleForm2.resetFields();
-      },
-      handleSubmit2(ev) {
-        this.$refs.ruleForm2.validate((valid) => {
+      submitForm(formName) {
+        this.$refs[formName].validate((valid) => {
           if (valid) {
             alert('submit!');
           } else {
@@ -706,6 +671,9 @@ Form component allows you to verify your data, helping you find and correct erro
             return false;
           }
         });
+      },
+      resetForm(formName) {
+        this.$refs[formName].resetFields();
       }
     }
   }
@@ -718,12 +686,19 @@ Form component allows you to verify your data, helping you find and correct erro
 :::demo In addition to passing all validation rules at once on the form component, you can also pass the validation rules or delete rules on a single form field dynamically.
 
 ```html
-<el-form :model="dynamicForm" :rules="dynamicRule" ref="dynamicForm" label-width="120px" class="demo-dynamic">
-  <el-form-item prop="email" label="Email">
-    <el-input v-model="dynamicForm.email"></el-input>
+<el-form :model="dynamicValidateForm" ref="dynamicValidateForm" label-width="120px" class="demo-dynamic">
+  <el-form-item
+    prop="email"
+    label="Email"
+    :rules="[
+      { required: true, message: 'Please input email address', trigger: 'blur' },
+      { type: 'email', message: 'Please input correct email address', trigger: 'blur,change' }
+    ]"
+  >
+    <el-input v-model="dynamicValidateForm.email"></el-input>
   </el-form-item>
   <el-form-item
-    v-for="(domain, index) in dynamicForm.domains"
+    v-for="(domain, index) in dynamicValidateForm.domains"
     :label="'Domain' + index"
     :key="domain.key"
     :prop="'domains.' + index + '.value'"
@@ -734,33 +709,27 @@ Form component allows you to verify your data, helping you find and correct erro
     <el-input v-model="domain.value"></el-input><el-button @click.prevent="removeDomain(domain)">Delete</el-button>
   </el-form-item>
   <el-form-item>
-    <el-button type="primary" @click="handleSubmit3">Submit</el-button>
+    <el-button type="primary" @click="submitForm('dynamicValidateForm')">Submit</el-button>
     <el-button @click="addDomain">New domain</el-button>
-    <el-button @click="handleReset3">Reset</el-button>
+    <el-button @click="resetForm('dynamicValidateForm')">Reset</el-button>
   </el-form-item>
 </el-form>
 <script>
   export default {
     data() {
       return {
-        dynamicForm: {
+        dynamicValidateForm: {
           domains: [{
             key: 1,
             value: ''
           }],
           email: ''
-        },
-        dynamicRule: {
-          email: [
-            { required: true, message: 'Please input email address', trigger: 'blur' },
-            { type: 'email', message: 'Please input correct email address', trigger: 'blur,change' }
-          ]
         }
       };
     },
     methods: {
-      handleSubmit3(ev) {
-        this.$refs.dynamicForm.validate((valid) => {
+      submitForm(formName) {
+        this.$refs[formName].validate((valid) => {
           if (valid) {
             alert('submit!');
           } else {
@@ -769,17 +738,17 @@ Form component allows you to verify your data, helping you find and correct erro
           }
         });
       },
-      handleReset3() {
-        this.$refs.dynamicForm.resetFields();
+      resetForm(formName) {
+        this.$refs[formName].resetFields();
       },
       removeDomain(item) {
-        var index = this.dynamicForm.domains.indexOf(item);
+        var index = this.dynamicValidateForm.domains.indexOf(item);
         if (index !== -1) {
-          this.dynamicForm.domains.splice(index, 1);
+          this.dynamicValidateForm.domains.splice(index, 1);
         }
       },
       addDomain() {
-        this.dynamicForm.domains.push({
+        this.dynamicValidateForm.domains.push({
           key: Date.now(),
           value: ''
         });
@@ -788,7 +757,56 @@ Form component allows you to verify your data, helping you find and correct erro
   }
 </script>
 ```
-::: 
+:::
+
+### Number Validate
+
+::: demo Number Validate need a `.number` modifier added on the input `v-model` binding，it's used to transform the string value to the number which is provided by Vuejs.
+```html
+<el-form :model="numberValidateForm" ref="numberValidateForm" label-width="100px" class="demo-ruleForm">
+  <el-form-item
+    label="age"
+    prop="age"
+    :rules="[
+      { required: true, message: 'age is required'},
+      { type: 'number', message: 'age must be a number'}
+    ]"
+  >
+    <el-input type="age" v-model.number="numberValidateForm.age" auto-complete="off"></el-input>
+  </el-form-item>
+  <el-form-item>
+    <el-button type="primary" @click="submitForm('numberValidateForm')">Submit</el-button>
+    <el-button @click="resetForm('numberValidateForm')">Reset</el-button>
+  </el-form-item>
+</el-form>
+<script>
+  export default {
+    data() {
+      return {
+        numberValidateForm: {
+          age: ''
+        }
+      };
+    },
+    methods: {
+      submitForm(formName) {
+        this.$refs[formName].validate((valid) => {
+          if (valid) {
+            alert('submit!');
+          } else {
+            console.log('error submit!!');
+            return false;
+          }
+        });
+      },
+      resetForm(formName) {
+        this.$refs[formName].resetFields();
+      }
+    }
+  }
+</script>
+```
+:::
 
 ### Form Attributes
 

examples/docs/en-US/layout.md

@@ -215,7 +215,7 @@ You can specify column offsets.
 
 ### Alignment
 
-Flexible alignment of columns.
+Use the flex layout to make flexible alignment of columns.
 
 ::: demo You can enable flex layout by setting `type` attribute to 'flex', and define the layout of child elements by setting `justify` attribute with start, center, end, space-between or space-around.
 ```html
@@ -276,6 +276,40 @@ Flexible alignment of columns.
 ```
 :::
 
+### Responsive Layout
+
+Taking example by Bootstrap's responsive design, four breakpoints are preset: xs, sm, md and lg.
+
+::: demo
+```html
+<el-row :gutter="10">
+  <el-col :xs="8" :sm="6" :md="4" :lg="3"><div class="grid-content bg-purple"></div></el-col>
+  <el-col :xs="4" :sm="6" :md="8" :lg="9"><div class="grid-content bg-purple-light"></div></el-col>
+  <el-col :xs="4" :sm="6" :md="8" :lg="9"><div class="grid-content bg-purple"></div></el-col>
+  <el-col :xs="8" :sm="6" :md="4" :lg="3"><div class="grid-content bg-purple-light"></div></el-col>
+</el-row>
+
+<style>
+  .el-col {
+    border-radius: 4px;
+  }
+  .bg-purple-dark {
+    background: #99a9bf;
+  }
+  .bg-purple {
+    background: #d3dce6;
+  }
+  .bg-purple-light {
+    background: #e5e9f2;
+  }
+  .grid-content {
+    border-radius: 4px;
+    min-height: 36px;
+  }
+</style>
+```
+:::
+
 ### Row Attributes
 | Attribute      | Description          | Type      | Accepted Values       | Default  |
 |---------- |-------------- |---------- |--------------------------------  |-------- |

examples/docs/en-US/table.md

@@ -1453,7 +1453,6 @@ When the row content is too long and you do not want to display the horizontal s
 | empty-text | Displayed text when data is empty. You can customize this area with `slot="empty"` | String | — | No Data |
 | default-expand-all | whether expand all rows by default, only works when the table has a column type="expand" | Boolean | — | false |
 | expand-row-keys | set expanded rows by this prop, prop's value is the keys of expand rows, you should set row-key before using this prop | Array | — | |
-| virtual-scrollbar | Enable virtual scrollbar | Boolean | — | false |
 
 ### Table Events
 | Event Name | Description | Parameters |

examples/docs/zh-CN/collapse.md

@@ -103,14 +103,14 @@
 
 ### 自定义面板标题
 
-除了可以通过 `title` 属性以外，还可以通过作用域插槽来实现自定义面板的标题内容，以实现增加图标等效果。
+除了可以通过 `title` 属性以外，还可以通过具名 `slot` 来实现自定义面板的标题内容，以实现增加图标等效果。
 
 :::demo
 ```html
 <el-collapse accordion>
-  <el-collapse-item title="一致性 Consistency">
-    <template slot="title" scope="props">
-      {{props.title}}<i class="header-icon el-icon-information"></i>
+  <el-collapse-item>
+    <template slot="title">
+      一致性 Consistency<i class="header-icon el-icon-information"></i>
     </template>
     <div>与现实生活一致：与现实生活的流程、逻辑保持一致，遵循用户习惯的语言和概念；</div>
     <div>在界面中一致：所有的元素和结构需保持一致，比如：设计样式、图标和文本、元素的位置等。</div>

examples/docs/zh-CN/form.md

@@ -83,8 +83,6 @@
           age: ''
         },
         formLabelWidth: '80px',
-        options: [
-        ],
         rules: {
           name: [
             { required: true, message: '请输入活动名称', trigger: 'blur' },
@@ -120,24 +118,24 @@
             { validator: checkAge, trigger: 'blur' }
           ]
         },
-        dynamicForm: {
+        dynamicValidateForm: {
           domains: [{
             value: '',
             key: Date.now()
           }],
           email: ''
         },
-        dynamicRule: {
-          email: [
-            { required: true, message: '请输入邮箱地址', trigger: 'blur' },
-            { type: 'email', message: '请输入正确的邮箱地址', trigger: 'blur,change' }
-          ]
+        numberValidateForm: {
+          age: ''
         }
       };
     },
     methods: {
-      handleSubmit(ev) {
-        this.$refs.ruleForm.validate((valid) => {
+      onSubmit() {
+        console.log('submit!');
+      },
+      submitForm(formName) {
+        this.$refs[formName].validate((valid) => {
           if (valid) {
             alert('submit!');
           } else {
@@ -146,52 +144,17 @@
           }
         });
       },
-      handleSubmit2(ev) {
-        this.$refs.ruleForm2.validate(valid => {
-          if (valid) {
-            alert('申请已提交');
-          } else {
-            console.log('error submit!!');
-            return false;
-          }
-        });
-      },
-      handleSubmit3(ev) {
-        this.$refs.dynamicForm.validate(valid => {
-          if (valid) {
-            alert('申请已提交');
-          } else {
-            console.log('error submit!!');
-            return false;
-          }
-        });
-      },
-      handleReset() {
-        this.$refs.ruleForm.resetFields();
-      },
-      handleReset2() {
-        this.$refs.ruleForm2.resetFields();
-      },
-      handleReset3() {
-        this.$refs.dynamicForm.resetFields();
-      },
-      handleValidate(prop, errorMsg) {
-        console.log(prop, errorMsg);
-      },
-      onSubmit() {
-        console.log('submit!');
-      },
-      onRuleFormSubmit() {
-        console.log('onRuleFormSubmit');
+      resetForm(formName) {
+        this.$refs[formName].resetFields();
       },
       removeDomain(item) {
-        var index = this.dynamicForm.domains.indexOf(item)
+        var index = this.dynamicValidateForm.domains.indexOf(item)
         if (index !== -1) {
-          this.dynamicForm.domains.splice(index, 1)
+          this.dynamicValidateForm.domains.splice(index, 1)
         }
       },
       addDomain() {
-        this.dynamicForm.domains.push({
+        this.dynamicValidateForm.domains.push({
           value: '',
           key: Date.now()
         });
@@ -545,8 +508,8 @@
     <el-input type="textarea" v-model="ruleForm.desc"></el-input>
   </el-form-item>
   <el-form-item>
-    <el-button type="primary" @click="handleSubmit">立即创建</el-button>
-    <el-button @click="handleReset">重置</el-button>
+    <el-button type="primary" @click="submitForm('ruleForm')">立即创建</el-button>
+    <el-button @click="resetForm('ruleForm')">重置</el-button>
   </el-form-item>
 </el-form>
 <script>
@@ -590,11 +553,8 @@
       };
     },
     methods: {
-      handleReset() {
-        this.$refs.ruleForm.resetFields();
-      },
-      handleSubmit(ev) {
-        this.$refs.ruleForm.validate((valid) => {
+      submitForm(formName) {
+        this.$refs[formName].validate((valid) => {
           if (valid) {
             alert('submit!');
           } else {
@@ -602,6 +562,9 @@
             return false;
           }
         });
+      },
+      resetForm(formName) {
+        this.$refs[formName].resetFields();
       }
     }
   }
@@ -624,8 +587,8 @@
     <el-input v-model.number="ruleForm2.age"></el-input>
   </el-form-item>
   <el-form-item>
-    <el-button type="primary" @click="handleSubmit2">提交</el-button>
-    <el-button @click="handleReset2">重置</el-button>
+    <el-button type="primary" @click="submitForm('ruleForm2')">提交</el-button>
+    <el-button @click="resetForm('ruleForm2')">重置</el-button>
   </el-form-item>
 </el-form>
 <script>
@@ -686,11 +649,8 @@
       };
     },
     methods: {
-      handleReset2() {
-        this.$refs.ruleForm2.resetFields();
-      },
-      handleSubmit2(ev) {
-        this.$refs.ruleForm2.validate((valid) => {
+      submitForm(formName) {
+        this.$refs[formName].validate((valid) => {
           if (valid) {
             alert('submit!');
           } else {
@@ -698,6 +658,9 @@
             return false;
           }
         });
+      },
+      resetForm(formName) {
+        this.$refs[formName].resetFields();
       }
     }
   }
@@ -709,12 +672,19 @@
 
 ::: demo 除了在 Form 组件上一次性传递所有的验证规则外还可以在单个的表单域上传递属性的验证规则
 ```html
-<el-form :model="dynamicForm" :rules="dynamicRule" ref="dynamicForm" label-width="100px" class="demo-dynamic">
-  <el-form-item prop="email" label="邮箱">
-    <el-input v-model="dynamicForm.email"></el-input>
+<el-form :model="dynamicValidateForm" ref="dynamicValidateForm" label-width="100px" class="demo-dynamic">
+  <el-form-item
+    prop="email"
+    label="邮箱"
+    :rules="[
+      { required: true, message: '请输入邮箱地址', trigger: 'blur' },
+      { type: 'email', message: '请输入正确的邮箱地址', trigger: 'blur,change' }
+    ]"
+  >
+    <el-input v-model="dynamicValidateForm.email"></el-input>
   </el-form-item>
   <el-form-item
-    v-for="(domain, index) in dynamicForm.domains"
+    v-for="(domain, index) in dynamicValidateForm.domains"
     :label="'域名' + index"
     :key="domain.key"
     :prop="'domains.' + index + '.value'"
@@ -725,32 +695,26 @@
     <el-input v-model="domain.value"></el-input><el-button @click.prevent="removeDomain(domain)">删除</el-button>
   </el-form-item>
   <el-form-item>
-    <el-button type="primary" @click="handleSubmit3">提交</el-button>
+    <el-button type="primary" @click="submitForm('dynamicValidateForm')">提交</el-button>
     <el-button @click="addDomain">新增域名</el-button>
-    <el-button @click="handleReset3">重置</el-button>
+    <el-button @click="resetForm('dynamicValidateForm')">重置</el-button>
   </el-form-item>
 </el-form>
 <script>
   export default {
     data() {
       return {
-        dynamicForm: {
+        dynamicValidateForm: {
           domains: [{
             value: ''
           }],
           email: ''
-        },
-        dynamicRule: {
-          email: [
-            { required: true, message: '请输入邮箱地址', trigger: 'blur' },
-            { type: 'email', message: '请输入正确的邮箱地址', trigger: 'blur,change' }
-          ]
         }
       };
     },
     methods: {
-      handleSubmit3(ev) {
-        this.$refs.dynamicForm.validate((valid) => {
+      submitForm(formName) {
+        this.$refs[formName].validate((valid) => {
           if (valid) {
             alert('submit!');
           } else {
@@ -759,17 +723,17 @@
           }
         });
       },
-      handleReset3() {
-        this.$refs.dynamicForm.resetFields();
+      resetForm(formName) {
+        this.$refs[formName].resetFields();
       },
       removeDomain(item) {
-        var index = this.dynamicForm.domains.indexOf(item)
+        var index = this.dynamicValidateForm.domains.indexOf(item)
         if (index !== -1) {
-          this.dynamicForm.domains.splice(index, 1)
+          this.dynamicValidateForm.domains.splice(index, 1)
         }
       },
       addDomain() {
-        this.dynamicForm.domains.push({
+        this.dynamicValidateForm.domains.push({
           value: '',
           key: Date.now()
         });
@@ -780,6 +744,55 @@
 ```
 :::
 
+### 数字类型验证
+
+::: demo 数字类型的验证需要在 `v-model` 处加上 `.number` 的修饰符，这是 `Vue` 自身提供的用于将绑定值转化为 `number` 类型的修饰符。
+```html
+<el-form :model="numberValidateForm" ref="numberValidateForm" label-width="100px" class="demo-ruleForm">
+  <el-form-item
+    label="年龄"
+    prop="age"
+    :rules="[
+      { required: true, message: '年龄不能为空'},
+      { type: 'number', message: '年龄必须为数字值'}
+    ]"
+  >
+    <el-input type="age" v-model.number="numberValidateForm.age" auto-complete="off"></el-input>
+  </el-form-item>
+  <el-form-item>
+    <el-button type="primary" @click="submitForm('numberValidateForm')">提交</el-button>
+    <el-button @click="resetForm('numberValidateForm')">重置</el-button>
+  </el-form-item>
+</el-form>
+<script>
+  export default {
+    data() {
+      return {
+        numberValidateForm: {
+          age: ''
+        }
+      };
+    },
+    methods: {
+      submitForm(formName) {
+        this.$refs[formName].validate((valid) => {
+          if (valid) {
+            alert('submit!');
+          } else {
+            console.log('error submit!!');
+            return false;
+          }
+        });
+      },
+      resetForm(formName) {
+        this.$refs[formName].resetFields();
+      }
+    }
+  }
+</script>
+```
+:::
+
 ### Form Attributes
 
 | 参数      | 说明          | 类型      | 可选值                           | 默认值  |

examples/docs/zh-CN/layout.md

@@ -245,7 +245,7 @@
 
 ### 对齐方式
 
-对分栏进行灵活的对齐。
+通过 `flex` 布局来对分栏进行灵活的对齐。
 
 ::: demo 将 `type` 属性赋值为 'flex'，可以启用 flex 布局，并可通过 `justify` 属性来指定 start, center, end, space-between, space-around 其中的值来定义子元素的排版方式。
 ```html
@@ -306,6 +306,40 @@
 ```
 :::
 
+### 响应式布局
+
+参照了 Bootstrap 的 响应式设计，预设了四个响应尺寸：`xs` `sm` `md` `lg`。
+
+::: demo
+```html
+<el-row :gutter="10">
+  <el-col :xs="8" :sm="6" :md="4" :lg="3"><div class="grid-content bg-purple"></div></el-col>
+  <el-col :xs="4" :sm="6" :md="8" :lg="9"><div class="grid-content bg-purple-light"></div></el-col>
+  <el-col :xs="4" :sm="6" :md="8" :lg="9"><div class="grid-content bg-purple"></div></el-col>
+  <el-col :xs="8" :sm="6" :md="4" :lg="3"><div class="grid-content bg-purple-light"></div></el-col>
+</el-row>
+
+<style>
+  .el-col {
+    border-radius: 4px;
+  }
+  .bg-purple-dark {
+    background: #99a9bf;
+  }
+  .bg-purple {
+    background: #d3dce6;
+  }
+  .bg-purple-light {
+    background: #e5e9f2;
+  }
+  .grid-content {
+    border-radius: 4px;
+    min-height: 36px;
+  }
+</style>
+```
+:::
+
 ### Row Attributes
 | 参数      | 说明          | 类型      | 可选值                           | 默认值  |
 |---------- |-------------- |---------- |--------------------------------  |-------- |

examples/docs/zh-CN/table.md

@@ -1475,7 +1475,6 @@
 | empty-text | 空数据时显示的文本内容，也可以通过 `slot="empty"` 设置 | String | — | 暂无数据 |
 | default-expand-all | 是否默认展开所有行，当 Table 中存在 type="expand" 的 Column 的时候有效 | Boolean | — | false |
 | expand-row-keys | 可以通过该属性设置 Table 目前的展开行，需要设置 row-key 属性才能使用，该属性为展开行的 keys 数组。| Array | — | |
-| virtual-scrollbar | 启用虚拟滚动条 | Boolean | — | false |
 
 
 ### Table Events

examples/versions.json

@@ -1,4 +1,4 @@
 {
   "1.0.9": "1.0",
-  "1.1.0": "1.1"
+  "1.1.2": "1.1"
 }

package.json

@@ -1,6 +1,6 @@
 {
   "name": "element-ui",
-  "version": "1.1.1",
+  "version": "1.1.2",
   "description": "A Component Library for Vue.js.",
   "main": "lib/element-ui.common.js",
   "files": [

packages/autocomplete/src/autocomplete-suggestions.vue

@@ -55,7 +55,7 @@
 
     mounted() {
       this.popperElm = this.$el;
-      this.referenceElm = this.$parent.$el;
+      this.referenceElm = this.$parent.$refs.input.$refs.input;
     },
 
     created() {

packages/autocomplete/src/autocomplete.vue

@@ -1,6 +1,7 @@
 <template>
   <div class="el-autocomplete" v-clickoutside="handleBlur">
     <el-input
+      ref="input"
       :value="value"
       :disabled="disabled"
       :placeholder="placeholder"
@@ -69,7 +70,7 @@
     },
     watch: {
       suggestionVisible(val) {
-        this.broadcast('ElAutocompleteSuggestions', 'visible', [val, this.$el.offsetWidth]);
+        this.broadcast('ElAutocompleteSuggestions', 'visible', [val, this.$refs.input.$refs.input.offsetWidth]);
       }
     },
     methods: {

packages/collapse/src/collapse-item.vue

@@ -2,7 +2,7 @@
   <div class="el-collapse-item" :class="{'is-active': isActive}">
     <div class="el-collapse-item__header" @click="handleHeaderClick">
       <i class="el-collapse-item__header__arrow el-icon-arrow-right"></i>
-      <slot name="title" :title="title">{{title}}</slot>
+      <slot name="title">{{title}}</slot>
     </div>
     <div class="el-collapse-item__wrap" ref="contentWrap">
       <div class="el-collapse-item__content" ref="content">

packages/date-picker/src/picker.vue

@@ -352,11 +352,11 @@ export default {
       if (Array.isArray(date)) {
         if (equalDate(cache.cacheDateMin, date[0]) &&
           equalDate(cache.cacheDateMax, date[1])) updated = false;
-        cache.cacheDateMin = date[0];
-        cache.cacheDateMax = date[1];
+        cache.cacheDateMin = new Date(date[0]);
+        cache.cacheDateMax = new Date(date[1]);
       } else {
         if (equalDate(cache.cacheDate, date)) updated = false;
-        cache.cacheDate = date;
+        cache.cacheDate = new Date(date);
       }
 
       return updated;

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

@@ -117,6 +117,8 @@
         if (newVal <= this.max && newVal >= this.min) {
           this.$emit('change', newVal, oldVal);
           this.$emit('input', newVal);
+        } else {
+          this.currentValue = oldVal;
         }
       }
     },

packages/input/src/input.vue

@@ -113,7 +113,11 @@
       maxlength: Number,
       minlength: Number,
       max: {},
-      min: {}
+      min: {},
+      validateEvent: {
+        type: Boolean,
+        default: true
+      }
     },
 
     computed: {
@@ -131,7 +135,9 @@
     methods: {
       handleBlur(event) {
         this.$emit('blur', event);
-        this.dispatch('ElFormItem', 'el.form.blur', [this.currentValue]);
+        if (this.validateEvent) {
+          this.dispatch('ElFormItem', 'el.form.blur', [this.currentValue]);
+        }
       },
       inputSelect() {
         this.$refs.input.select();
@@ -162,7 +168,9 @@
         this.currentValue = value;
         this.$emit('input', value);
         this.$emit('change', value);
-        this.dispatch('ElFormItem', 'el.form.change', [value]);
+        if (this.validateEvent) {
+          this.dispatch('ElFormItem', 'el.form.change', [value]);
+        }
       }
     },
 

packages/scrollbar/src/bar.js

@@ -1,6 +1,7 @@
 import { on, off } from 'element-ui/src/utils/dom';
 import { renderThumbStyle, BAR_MAP } from './util';
 
+/* istanbul ignore next */
 export default {
   name: 'Bar',
 

packages/scrollbar/src/main.js

@@ -5,6 +5,7 @@ import scrollbarWidth from 'element-ui/src/utils/scrollbar-width';
 import * as util from './util';
 import Bar from './bar';
 
+/* istanbul ignore next */
 export default {
   name: 'ElScrollbar',
 

packages/select/src/select.vue

@@ -48,6 +48,7 @@
       :size="size"
       :disabled="disabled"
       :readonly="!filterable || multiple"
+      :validate-event="false"
       @focus="toggleMenu"
       @click="handleIconClick"
       @mousedown.native="handleMouseDown"
@@ -223,13 +224,13 @@
           } else {
             this.currentPlaceholder = this.cachedPlaceHolder;
           }
-          this.dispatch('ElFormItem', 'el.form.change', val);
         }
         this.setSelected();
         if (this.filterable && !this.multiple) {
           this.inputLength = 20;
         }
         this.$emit('change', val);
+        this.dispatch('ElFormItem', 'el.form.change', val);
       },
 
       query(val) {
@@ -294,8 +295,7 @@
             }
           }
           if (!this.dropdownUl) {
-            let dropdownChildNodes = this.$refs.popper.$el.childNodes;
-            this.dropdownUl = [].filter.call(dropdownChildNodes, item => item.tagName === 'UL')[0];
+            this.dropdownUl = this.$refs.popper.$el.querySelector('.el-select-dropdown__wrap');
           }
           if (!this.multiple && this.dropdownUl) {
             this.setOverflow();

packages/table/src/table-column.js

@@ -124,7 +124,7 @@ export default {
     minWidth: {},
     renderHeader: Function,
     sortable: {
-      type: [Boolean, String],
+      type: [String, Boolean],
       default: false
     },
     sortMethod: Function,
@@ -222,14 +222,14 @@ export default {
       context: this.context,
       align: this.align ? 'is-' + this.align : null,
       headerAlign: this.headerAlign ? 'is-' + this.headerAlign : (this.align ? 'is-' + this.align : null),
-      sortable: this.sortable,
+      sortable: this.sortable === '' ? true : this.sortable,
       sortMethod: this.sortMethod,
       resizable: this.resizable,
       showOverflowTooltip: this.showOverflowTooltip || this.showTooltipWhenOverflow,
       formatter: this.formatter,
       selectable: this.selectable,
       reserveSelection: this.reserveSelection,
-      fixed: this.fixed,
+      fixed: this.fixed === '' ? true : this.fixed,
       filterMethod: this.filterMethod,
       filters: this.filters,
       filterable: this.filters || this.filterMethod,

packages/table/src/table.vue

@@ -18,11 +18,10 @@
         :style="{ width: layout.bodyWidth ? layout.bodyWidth + 'px' : '' }">
       </table-header>
     </div>
-    <el-scrollbar
+    <div
       class="el-table__body-wrapper"
       ref="bodyWrapper"
-      :native="!virtualScrollbar"
-      :wrap-style="[bodyHeight]">
+      :style="[bodyHeight]">
       <table-body
         :context="context"
         :store="store"
@@ -35,7 +34,7 @@
       <div class="el-table__empty-block" v-if="!data || data.length === 0">
         <span class="el-table__empty-text"><slot name="empty">{{ emptyText || t('el.table.emptyText') }}</slot></span>
       </div>
-    </el-scrollbar>
+    </div>
     <div class="el-table__fixed" ref="fixedWrapper"
       v-if="fixedColumns.length > 0"
       :style="[
@@ -133,8 +132,6 @@
 
       width: [String, Number],
 
-      virtualScrollbar: Boolean,
-
       height: [String, Number],
 
       maxHeight: [String, Number],
@@ -249,7 +246,7 @@
 
     computed: {
       bodyWrapper() {
-        return this.$refs.bodyWrapper.wrap;
+        return this.$refs.bodyWrapper;
       },
 
       shouldUpdateHeight() {

packages/tabs/src/tabs.vue

@@ -20,14 +20,24 @@
     },
 
     watch: {
-      activeName(val) {
-        this.currentName = val;
+      activeName(value) {
+        this.setCurrentName(value);
       },
-      value(val) {
-        this.currentName = val;
-      },
-      currentName(val) {
-        this.$emit('input', val);
+      value(value) {
+        this.setCurrentName(value);
+      }
+    },
+
+    computed: {
+      currentTab() {
+        if (!this.$children) return;
+        let result;
+        this.$children.forEach(tab => {
+          if (this.currentName === (tab.name || tab.index)) {
+            result = tab;
+          }
+        });
+        return result;
       }
     },
 
@@ -35,6 +45,7 @@
       handleTabRemove(tab, event) {
         event.stopPropagation();
         const tabs = this.$children;
+        const currentTab = this.currentTab;
 
         let index = tabs.indexOf(tab);
         tab.$destroy();
@@ -49,15 +60,22 @@
             let nextActiveTab = nextChild || prevChild || null;
 
             if (nextActiveTab) {
-              this.currentName = nextActiveTab.name || nextActiveTab.index;
+              this.setCurrentName(nextActiveTab.name || nextActiveTab.index);
             }
+            return;
+          } else {
+            this.setCurrentName(currentTab.name || currentTab.index);
           }
         });
       },
       handleTabClick(tab, tabName, event) {
         if (tab.disabled) return;
-        this.currentName = tabName;
+        this.setCurrentName(tabName);
         this.$emit('tab-click', tab, event);
+      },
+      setCurrentName(value) {
+        this.currentName = value;
+        this.$emit('input', value);
       }
     },
     mounted() {
@@ -99,7 +117,7 @@
       const tabs = this.$children.map((tab, index) => {
         let tabName = tab.name || tab.index || index;
         if (currentName === undefined && index === 0) {
-          this.currentName = tabName;
+          this.setCurrentName(tabName);
         }
 
         tab.index = index;

packages/theme-default/package.json

@@ -1,6 +1,6 @@
 {
   "name": "element-theme-default",
-  "version": "1.1.1",
+  "version": "1.1.2",
   "description": "Element component default theme.",
   "main": "lib/index.css",
   "style": "lib/index.css",

packages/theme-default/src/select-dropdown.css

@@ -33,6 +33,10 @@
         }
       }
     }
+
+    .el-scrollbar.is-empty .el-select-dropdown__list{
+      padding: 0;
+    }
   }
 
   @b select-dropdown__empty {
@@ -53,9 +57,5 @@
     padding: var(--select-dropdown-padding);
     margin: 0;
     box-sizing: border-box;
-
-    @when empty {
-      padding: 0;
-    }
   }
 }

src/index.js

@@ -141,7 +141,7 @@ if (typeof window !== 'undefined' && window.Vue) {
 };
 
 module.exports = {
-  version: '1.1.1',
+  version: '1.1.2',
   locale: locale.use,
   install,
   Loading,

test/unit/specs/input-number.spec.js

@@ -234,6 +234,35 @@ describe('InputNumber', () => {
     expect(vm.$el.querySelector('.el-input-number__decrease')).to.not.exist;
     expect(vm.$el.querySelector('.el-input-number__increase')).to.not.exist;
   });
+  it('invalid value reset', done => {
+    vm = createVue({
+      template: `
+        <el-input-number v-model="value" :min="5" :max="10">
+        </el-input-number>
+      `,
+      data() {
+        return {
+          value: 5
+        };
+      }
+    }, true);
+
+    vm.value = 100;
+    vm.$nextTick(_ => {
+      expect(vm.value).to.be.equal(5);
+      vm.value = 4;
+
+      vm.$nextTick(_ => {
+        expect(vm.value).to.be.equal(5);
+        vm.value = 'dsajkhd';
+
+        vm.$nextTick(_ => {
+          expect(vm.value).to.be.equal(5);
+          done();
+        });
+      });
+    });
+  });
   it('event:change', done => {
     vm = createVue({
       template: `