Changelog: update for 2.0.0-alpha.3 (#7502)

* Changelog: update for 2.0.0-alpha.3

* fix test

CHANGELOG.en-US.md

@@ -1,5 +1,52 @@
 ## Changelog
 
+### 2.0.0-alpha.3
+
+*2017-10-16*
+
+#### New features
+- General
+  - Configure component sizes globally. Now when you import Element, you can add a global config object with a `size` prop to configure default sizes for all components. For fully import:
+  ```JS
+  import Vue from 'vue'
+  import Element from 'element-ui'
+  Vue.use(Element, { size: 'small' })
+  ```
+  For partial import:
+  ```JS
+  import Vue from 'vue'
+  import { Button } from 'element-ui'
+  
+  Vue.prototype.$ELEMENT = { size: 'small' }
+  Vue.use(Button)
+  ```
+  With the above config, the default size of all components that have `size` attribute will be 'small'.
+- Loading
+  - Now you can customize spinner icon and background color with `spinner` and `background` prop, #7390
+- Autocomplete
+  - Added `debounce` attribute, #7413
+- Upload
+  - Added `limit` and `on-exceed` attributes to limit the amount of files, #7405
+- Menu
+  - Added `open` and `close` methods to open and close SubMenu programmatically, #7412
+- DatePicker
+  - Added `value-format` attribute to customize the format of the binding value, #7367
+- TimePicker
+  - Added `arrow-control` attribute to spin the time with arrows #7438
+- DateTimePicker
+  - Added `time-arrow-control` attribute to activate `arrow-control` of the nesting TimePicker, #7438
+- Form
+  - Form and Form-item now have a `size` attribute. Inner components will inherit this size if not specified on themselves, #7428
+  - `validate` method will now return a promise if the callback is omitted, #7405
+
+#### Fixes
+- Fixed the console warning `Injection "elFormItem" not found` of some components
+
+#### Breaking changes
+- The params of DatePicker's `change` event is now the binding value itself. Its format is controlled by `value-format`
+- Input's `change` event now behaves like the native input element, which triggers only on blur or pressing enter. If you need to respond to user input in real time, you can use `input` event.
+- Only compatible with Vue 2.5.2 and beyond
+
 ### 2.0.0-alpha.2
 
 *2017-10-05*

CHANGELOG.zh-CN.md

@@ -1,5 +1,50 @@
 ## 更新日志
 
+### 2.0.0-alpha.3
+*2017-10-16*
+
+#### 新特性
+- 综合
+  - 新增全局配置组件尺寸的功能：在引入 Element 时，配置 `size` 字段可以改变所有组件的默认尺寸。当完整引入 Element 时：
+  ```JS
+  import Vue from 'vue'
+  import Element from 'element-ui'
+  Vue.use(Element, { size: 'small' })
+  ```
+  当按需引入 Element 时：
+  ```JS
+  import Vue from 'vue'
+  import { Button } from 'element-ui'
+  Vue.prototype.$ELEMENT = { size: 'small' }
+  Vue.use(Button)
+  ```
+  按照以上设置，项目中所有拥有 `size` 属性的组件的默认尺寸均为 'small'。
+- Loading
+  - 配置对象新增 `spinner` 和 `background` 字段，支持自定义加载图标和背景色，#7390
+- Autocomplete
+  - 新增 `debounce` 属性，#7413
+- Upload
+  - 新增 `limit` 和 `on-exceed` 属性，支持对上传文件的个数进行限制，#7405
+- Menu
+  - 新增 `open` 和 `close` 方法，支持手动打开和关闭 SubMenu，#7412
+- DatePicker
+  - 新增 `value-format` 属性，支持对绑定值的格式进行自定义，#7367
+- TimePicker
+  - 新增 `arrow-control` 属性，提供另一种交互形式，#7438
+- DateTimePicker
+  - 新增 `time-arrow-control` 属性，用于开启时间选择器的 `arrow-control`，#7438
+- Form
+  - Form 和 Form-item 新增 `size` 属性，用于控制表单内组件的尺寸，#7428
+  - `validate` 方法在不传入 callback 的情况下返回 promise，#7405
+
+#### 修复
+  - 修复部分组件的 `Injection "elFormItem" not found` 报错
+
+#### 非兼容性更新
+  - DatePicker 的 `change` 事件参数现在为组件的绑定值，格式由 `value-format` 控制
+  - Input 组件的 `change` 事件现在仅在输入框失去焦点或用户按下回车时触发，与原生 input 元素一致。如果需要实时响应用户的输入，可以使用 `input` 事件
+  - 最低兼容 Vue 2.5.2 版本
+
 ### 2.0.0-alpha.2
 *2017-10-05*
 

examples/docs/en-US/form.md

@@ -803,7 +803,7 @@ All components in a Form inherit their `size` attribute from that Form. Similarl
 
 | Method | Description | Parameters |
 | ---- | ---- | ---- |
-| validate | the method to validate the whole form | Function(callback: Function(boolean)) |
+| validate | the method to validate the whole form. Returns a promise if callback is omitted | Function(callback: Function(boolean)) |
 | validateField | the method to validate a certain form item | Function(prop: string, callback: Function(errorMessage: string)) |
 | resetFields | reset all the fields and remove validation result | — |
 

examples/docs/en-US/quickstart.md

@@ -339,6 +339,26 @@ Vue.prototype.$notify = Notification
 Vue.prototype.$message = Message
 ```
 
+### Global config
+When importing Element, you can define a global config object. For now this object has only one property: `size`, which sets the default size for all components:
+
+Fully import Element：
+```JS
+import Vue from 'vue'
+import Element from 'element-ui'
+Vue.use(Element, { size: 'small' })
+```
+
+Partial import Element：
+```JS
+import Vue from 'vue'
+import { Button } from 'element-ui'
+
+Vue.prototype.$ELEMENT = { size: 'small' }
+Vue.use(Button)
+```
+With the above config, the default size of all components that have size attribute will be 'small'.
+
 ### Start coding
 
 Now you have implemented Vue and Element to your project, and it's time to write your code. Start development mode:

examples/docs/zh-CN/form.md

@@ -793,7 +793,7 @@
 
 | 方法名      | 说明          | 参数
 |---------- |-------------- | --------------
-| validate | 对整个表单进行校验的方法 | Function(callback: Function(boolean))
+| validate | 对整个表单进行校验的方法。若不传入回调函数，则会返回一个 promise | Function(callback: Function(boolean))
 | validateField | 对部分表单字段进行校验的方法 | Function(prop: string, callback: Function(errorMessage: string))
 | resetFields | 对整个表单进行重置，将所有字段值重置为初始值并移除校验结果 | -
 

examples/docs/zh-CN/quickstart.md

@@ -339,6 +339,26 @@ Vue.prototype.$notify = Notification
 Vue.prototype.$message = Message
 ```
 
+### 全局配置
+在引入 Element 时，可以传入一个全局配置对象。该对象目前仅支持 `size` 字段，用于改变组件的默认尺寸。按照引入 Element 的方式，具体操作如下：
+
+完整引入 Element：
+```JS
+import Vue from 'vue'
+import Element from 'element-ui'
+Vue.use(Element, { size: 'small' })
+```
+
+按需引入 Element：
+```JS
+import Vue from 'vue'
+import { Button } from 'element-ui'
+
+Vue.prototype.$ELEMENT = { size: 'small' }
+Vue.use(Button)
+```
+按照以上设置，项目中所有拥有 `size` 属性的组件的默认尺寸均为 'small'。
+
 ### 开始使用
 
 至此，一个基于 Vue 和 Element 的开发环境已经搭建完毕，现在就可以编写代码了。启动开发模式：

examples/pages/template/changelog.tpl

@@ -57,6 +57,7 @@
           li {
             padding-left: 0;
             color: #555;
+            word-break: normal;
           }
 
           li::before {

packages/autocomplete/src/autocomplete.vue

@@ -147,9 +147,7 @@
       handleComposition(event) {
         if (event.type === 'compositionend') {
           this.isOnComposition = false;
-          this.$nextTick(() => {
-            this.handleChange(this.value);
-          });
+          this.handleChange(event.target.value);
         } else {
           this.isOnComposition = true;
         }

test/unit/specs/menu.spec.js

@@ -18,14 +18,14 @@ describe('Menu', () => {
     var item1 = vm.$refs.item1;
     var item2 = vm.$refs.item2;
     item1.$el.click();
-    vm.$nextTick(_ => {
+    setTimeout(_ => {
       expect(item1.$el.classList.contains('is-active')).to.be.true;
       item2.$el.click();
-      vm.$nextTick(_ => {
+      setTimeout(_ => {
         expect(item2.$el.classList.contains('is-active')).to.be.true;
         done();
-      });
-    });
+      }, 20);
+    }, 20);
   });
   it('menu-item click', done => {
     vm = createVue({
@@ -50,10 +50,10 @@ describe('Menu', () => {
     var item1 = vm.$refs.item1;
     item1.$el.click();
 
-    vm.$nextTick(_ => {
+    setTimeout(_ => {
       expect(vm.clicksCount).to.be.equal(1);
       done();
-    });
+    }, 20);
 
   });
   describe('default active', () => {
@@ -68,10 +68,10 @@ describe('Menu', () => {
       }, true);
       expect(vm.$refs.item2.$el.classList.contains('is-active')).to.be.true;
       vm.$refs.item1.$el.click();
-      vm.$nextTick(_ => {
+      setTimeout(_ => {
         expect(vm.$refs.item1.$el.classList.contains('is-active')).to.be.true;
         done();
-      });
+      }, 20);
     });
     it('dynamic active', done => {
       vm = createVue({
@@ -89,10 +89,10 @@ describe('Menu', () => {
       }, true);
       setTimeout(_ => {
         vm.active = '1';
-        vm.$nextTick(_ => {
+        setTimeout(_ => {
           expect(vm.$refs.item1.$el.classList.contains('is-active')).to.be.true;
           done();
-        });
+        }, 20);
       }, 100);
     });
     it('vertical submenu item active', done => {
@@ -114,11 +114,11 @@ describe('Menu', () => {
       }, true);
       expect(vm.$refs.submenuItem2.$el.classList.contains('is-active')).to.be.true;
 
-      vm.$nextTick(_ => {
+      setTimeout(_ => {
         expect(vm.$refs.submenu.$el.classList.contains('is-opened')).to.be.true;
         expect(vm.$refs.submenu.$el.classList.contains('is-active')).to.be.true;
         done();
-      });
+      }, 20);
     });
     it('horizontal submenu item active', done => {
       vm = createVue({
@@ -139,11 +139,11 @@ describe('Menu', () => {
       }, true);
       expect(vm.$refs.submenuItem2.$el.classList.contains('is-active')).to.be.true;
 
-      vm.$nextTick(_ => {
+      setTimeout(_ => {
         expect(vm.$refs.submenu.$el.classList.contains('is-opened')).to.be.true;
         expect(vm.$refs.submenu.$el.classList.contains('is-active')).to.be.true;
         done();
-      });
+      }, 20);
     });
   });
   describe('submenu', function() {
@@ -169,18 +169,18 @@ describe('Menu', () => {
       var submenuItem2 = vm.$refs.submenuItem2;
       var submenu = vm.$refs.submenu;
       submenu.$el.querySelector('.el-submenu__title').click();
-      vm.$nextTick(_ => {
+      setTimeout(_ => {
         expect(submenu.$el.classList.contains('is-opened')).to.be.true;
         submenuItem2.$el.click();
-        vm.$nextTick(_ => {
+        setTimeout(_ => {
           expect(submenuItem2.$el.classList.contains('is-active')).to.be.true;
           submenu.$el.querySelector('.el-submenu__title').click();
-          vm.$nextTick(_ => {
+          setTimeout(_ => {
             expect(submenu.$el.classList.contains('is-opened')).to.not.true;
             done();
-          });
-        });
-      });
+          }, 20);
+        }, 20);
+      }, 20);
     });
     it('default opened', done => {
       vm = createVue({
@@ -210,11 +210,11 @@ describe('Menu', () => {
       expect(vm.$refs.submenu1.$el.classList.contains('is-opened')).to.be.true;
       expect(vm.$refs.submenu2.$el.classList.contains('is-opened')).to.be.true;
       vm.defaultOpeneds = ['2'];
-      vm.$nextTick(_ => {
+      setTimeout(_ => {
         expect(vm.$refs.submenu1.$el.classList.contains('is-opened')).to.be.true;
         expect(vm.$refs.submenu2.$el.classList.contains('is-opened')).to.not.true;
         done();
-      });
+      }, 20);
     });
   });
   it('unique-opened', done => {
@@ -242,10 +242,10 @@ describe('Menu', () => {
       }
     }, true);
     vm.$refs.submenu2.$el.querySelector('.el-submenu__title').click();
-    vm.$nextTick(_ => {
+    setTimeout(_ => {
       expect(vm.$refs.submenu1.$el.classList.contains('is-opened')).to.not.true;
       done();
-    });
+    }, 20);
   });
   it('horizontal mode', done => {
     vm = createVue({
@@ -271,7 +271,6 @@ describe('Menu', () => {
     triggerEvent(submenu.$el, 'mouseenter');
     setTimeout(_ => {
       expect(submenu.$el.querySelector('.el-menu').style.display).to.not.ok;
-      triggerEvent(submenu.$el, 'mouseleave');
       done();
     }, 500);
   });
@@ -310,7 +309,7 @@ describe('Menu', () => {
       }, 1000);
     }, 500);
   });
-  it('menu group', done => {
+  it('menu group', () => {
     vm = createVue({
       template: `
         <el-menu mode="vertical" default-active="1">
@@ -329,6 +328,5 @@ describe('Menu', () => {
       `
     }, true);
     expect(vm.$refs.group1.$el.querySelector('.el-menu-item-group__title').innerText).to.be.equal('分组一');
-    done();
   });
 });