diff --git a/CHANGELOG.en-US.md b/CHANGELOG.en-US.md index 358eb8584..6fc97f3e8 100644 --- a/CHANGELOG.en-US.md +++ b/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* diff --git a/CHANGELOG.zh-CN.md b/CHANGELOG.zh-CN.md index f89e790ca..e95e8aee2 100644 --- a/CHANGELOG.zh-CN.md +++ b/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* diff --git a/examples/docs/en-US/form.md b/examples/docs/en-US/form.md index 781ebe858..655be57e5 100644 --- a/examples/docs/en-US/form.md +++ b/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 | — | diff --git a/examples/docs/en-US/quickstart.md b/examples/docs/en-US/quickstart.md index 6ad4e447e..f003e1e4f 100644 --- a/examples/docs/en-US/quickstart.md +++ b/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: diff --git a/examples/docs/zh-CN/form.md b/examples/docs/zh-CN/form.md index 9043a79f4..4abc107bd 100644 --- a/examples/docs/zh-CN/form.md +++ b/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 | 对整个表单进行重置，将所有字段值重置为初始值并移除校验结果 | - diff --git a/examples/docs/zh-CN/quickstart.md b/examples/docs/zh-CN/quickstart.md index 3dcf99168..d716f2fe9 100644 --- a/examples/docs/zh-CN/quickstart.md +++ b/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 的开发环境已经搭建完毕，现在就可以编写代码了。启动开发模式： diff --git a/examples/pages/template/changelog.tpl b/examples/pages/template/changelog.tpl index 90a489361..8c72f7a91 100644 --- a/examples/pages/template/changelog.tpl +++ b/examples/pages/template/changelog.tpl @@ -57,6 +57,7 @@ li { padding-left: 0; color: #555; + word-break: normal; } li::before { diff --git a/packages/autocomplete/src/autocomplete.vue b/packages/autocomplete/src/autocomplete.vue index 7e5c38b01..afea35000 100644 --- a/packages/autocomplete/src/autocomplete.vue +++ b/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; } diff --git a/test/unit/specs/menu.spec.js b/test/unit/specs/menu.spec.js index 4b5cb1463..42120ff02 100644 --- a/test/unit/specs/menu.spec.js +++ b/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: ` @@ -329,6 +328,5 @@ describe('Menu', () => { ` }, true); expect(vm.$refs.group1.$el.querySelector('.el-menu-item-group__title').innerText).to.be.equal('分组一'); - done(); }); });