From 8648ab84dc03df37461d5b40c51bda2c22e9600c Mon Sep 17 00:00:00 2001 From: kingwl Date: Wed, 21 Dec 2016 11:03:22 +0800 Subject: [PATCH 01/35] Table: add header-align --- examples/docs/zh-CN/table.md | 1 + packages/table/src/table-column.js | 8 +++++++ packages/table/src/table-header.js | 2 +- test/unit/specs/table.spec.js | 37 ++++++++++++++++++++++++++++++ 4 files changed, 47 insertions(+), 1 deletion(-) diff --git a/examples/docs/zh-CN/table.md b/examples/docs/zh-CN/table.md index 6c9799c9811..c959edb5435 100644 --- a/examples/docs/zh-CN/table.md +++ b/examples/docs/zh-CN/table.md @@ -1421,6 +1421,7 @@ | context | 设置上下文环境，例如设置当前上下文就是 `_self`，父级就是 `$parent`，根组件 `$root` | Object | - | Table 所处上下文 | | inline-template | 指定该属性后可以自定义 column 模板，参考多选的时间列，通过 row 获取行信息。总共可以获取到 `{ row(当前行), column(当前列), $index(行数), store(table store) }` 以及 Table 所处的上下文环境。 | — | — | | align | 对齐方式 | String | left, center, right | left | +| header_align | 表头对齐方式,若不设置该项，则使用表格的对齐方式 | String | left, center, right | — | | class-name | 列的 className | string | — | — | | selectable | 仅对 type=selection 的列有效，类型为 Function，Function 的返回值用来决定这一行的 CheckBox 是否可以勾选 | Function(row, index) | — | — | | reserve-selection | 仅对 type=selection 的列有效，类型为 Boolean，为 true 则代表会保留之前数据的选项，需要配合 Table 的 clearSelection 方法使用。 | Boolean | — | false | diff --git a/packages/table/src/table-column.js b/packages/table/src/table-column.js index b2db006d766..de25ebfef1d 100644 --- a/packages/table/src/table-column.js +++ b/packages/table/src/table-column.js @@ -114,6 +114,7 @@ export default { context: {}, columnKey: String, align: String, + headerAlign: String, showTooltipWhenOverflow: Boolean, showOverflowTooltip: Boolean, fixed: [Boolean, String], @@ -205,6 +206,7 @@ export default { isColumnGroup, 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, sortMethod: this.sortMethod, resizable: this.resizable, @@ -305,6 +307,12 @@ export default { } }, + headerAlign(newVal) { + if (this.columnConfig) { + this.columnConfig.headerAlign = newVal ? 'is-' + newVal : this.align; + } + }, + width(newVal) { if (this.columnConfig) { this.columnConfig.width = newVal; diff --git a/packages/table/src/table-header.js b/packages/table/src/table-header.js index b64200559b9..918cc30a616 100644 --- a/packages/table/src/table-header.js +++ b/packages/table/src/table-header.js @@ -103,7 +103,7 @@ export default { on-mouseout={ this.handleMouseOut } on-mousedown={ ($event) => this.handleMouseDown($event, column) } on-click={ ($event) => this.handleClick($event, column) } - class={ [column.id, column.order, column.align, column.className || '', rowIndex === 0 && this.isCellHidden(cellIndex) ? 'is-hidden' : '', !column.children ? 'is-leaf' : ''] }> + class={ [column.id, column.order, column.headerAlign, column.className || '', rowIndex === 0 && this.isCellHidden(cellIndex) ? 'is-hidden' : '', !column.children ? 'is-leaf' : ''] }>
0 ? 'highlight' : ''] }> { column.renderHeader diff --git a/test/unit/specs/table.spec.js b/test/unit/specs/table.spec.js index ef0355d59dc..a1d36efd0d6 100644 --- a/test/unit/specs/table.spec.js +++ b/test/unit/specs/table.spec.js @@ -1215,6 +1215,43 @@ describe('Table', () => { }, DELAY); }); + it('header-align', (done) => { + const vm = createVue({ + template: ` + + + + `, + + data() { + return { + align: 'left', + headerAlign: null + }; + }, + + created() { + this.testData = getTestData(); + } + }, true); + + setTimeout(() => { + expect(vm.$el.querySelectorAll('.el-table__header th.is-left').length > 0).to.be.true; + expect(vm.$el.querySelectorAll('.el-table__header td.is-center').length === 0).to.be.true; + vm.align = 'right'; + vm.$nextTick(() => { + expect(vm.$el.querySelectorAll('.el-table__header th.is-right').length > 0).to.be.true; + expect(vm.$el.querySelectorAll('.el-table__header td.is-center').length === 0).to.be.true; + vm.headerAlign = 'center'; + vm.$nextTick(() => { + expect(vm.$el.querySelectorAll('.el-table__header th.is-right').length === 0).to.be.true; + expect(vm.$el.querySelectorAll('.el-table__header td.is-center').length > 0).to.be.true; + }); + }); + done(); + }, DELAY); + }); + it('width', (done) => { const vm = createVue({ template: ` From f409d02f3eda94090389e71c522208063641eb81 Mon Sep 17 00:00:00 2001 From: njleonzhang Date: Thu, 22 Dec 2016 13:55:44 +0800 Subject: [PATCH 02/35] =?UTF-8?q?=E4=BF=AE=E6=94=B9form=20readme?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- examples/docs/en-US/form.md | 2 +- examples/docs/zh-CN/form.md | 2 +- packages/form/README.md | 2 +- 3 files changed, 3 insertions(+), 3 deletions(-) diff --git a/examples/docs/en-US/form.md b/examples/docs/en-US/form.md index 834cf7193f9..1ab4bc00dac 100644 --- a/examples/docs/en-US/form.md +++ b/examples/docs/en-US/form.md @@ -813,7 +813,7 @@ Form component allows you to verify your data, helping you find and correct erro | ---- | ---- | | validate(cb) | the method to validate the whole form | | validateField(prop, cb) | the method to validate a certain form item | -| resetFields | reset all the fields and remove validation result | +| resetFields | reset all the fields to initial value and remove validation result | ### Form-Item Attributes diff --git a/examples/docs/zh-CN/form.md b/examples/docs/zh-CN/form.md index 152c0157ef9..ebf7f04f91a 100644 --- a/examples/docs/zh-CN/form.md +++ b/examples/docs/zh-CN/form.md @@ -803,7 +803,7 @@ |---------- |-------------- | | validate(cb) | 对整个表单进行校验的方法 | | validateField(prop, cb) | 对部分表单字段进行校验的方法 | -| resetFields | 对整个表单进行重置，将所有字段值重置为空并移除校验结果 | +| resetFields | 对整个表单进行重置，将所有字段值重置为初始值并移除校验结果 | ### Form-Item Attributes diff --git a/packages/form/README.md b/packages/form/README.md index dd1fb165a1c..34ca8537bed 100644 --- a/packages/form/README.md +++ b/packages/form/README.md @@ -45,7 +45,7 @@ Vue.component('el-form-item', ElForm) |---------- |-------------- | | validate(cb) | 对整个表单进行校验的方法 | | validateField(prop, cb) | 对部分表单字段进行校验的方法 | -| resetFields | 对整个表单进行重置，将所有字段值重置为空并移除校验结果 | +| resetFields | 对整个表单进行重置，将所有字段值重置为初始值并移除校验结果 | ### Form-Item Attributes From 886b249a6305406fcb0e5149e54a4f502f5ce512 Mon Sep 17 00:00:00 2001 From: Leopoldthecoder Date: Thu, 22 Dec 2016 17:29:26 +0800 Subject: [PATCH 03/35] Table: update header-align docs --- examples/docs/en-US/table.md | 1 + examples/docs/zh-CN/table.md | 4 ++-- 2 files changed, 3 insertions(+), 2 deletions(-) diff --git a/examples/docs/en-US/table.md b/examples/docs/en-US/table.md index d645bd26f7b..5e41dba62f7 100644 --- a/examples/docs/en-US/table.md +++ b/examples/docs/en-US/table.md @@ -1413,6 +1413,7 @@ Customize table column so it can be integrated with other components. | context | context of Table-column, e.g. `_self` refers to the current context, `$parent` parent context, `$root` root context | Object | - | current context where Table lies | | inline-template | by using this attribute, you can customize column template. Row data can be accessed by `row` object. In your template, you have access to the following: `{ row (current row), column (current column), $index (row index), store (table store) }` | — | — | | align | alignment | string | left/center/right | left | +| header-align | alignment of the table header. If omitted, the value of the above `align` attribute will be applied | String | left/center/right | — | | class-name | class name of cells in the column | string | — | — | | selectable | function that determines if a certain row can be selected, works when `type` is 'selection' | Function(row, index) | — | — | | reserve-selection | whether to reserve selection after data refreshing, works when `type` is 'selection' | boolean | — | false | diff --git a/examples/docs/zh-CN/table.md b/examples/docs/zh-CN/table.md index c959edb5435..43731a8a9c5 100644 --- a/examples/docs/zh-CN/table.md +++ b/examples/docs/zh-CN/table.md @@ -1420,8 +1420,8 @@ | show-overflow-tooltip | 当内容过长被隐藏时显示 tooltip | Boolean | — | false | | context | 设置上下文环境，例如设置当前上下文就是 `_self`，父级就是 `$parent`，根组件 `$root` | Object | - | Table 所处上下文 | | inline-template | 指定该属性后可以自定义 column 模板，参考多选的时间列，通过 row 获取行信息。总共可以获取到 `{ row(当前行), column(当前列), $index(行数), store(table store) }` 以及 Table 所处的上下文环境。 | — | — | -| align | 对齐方式 | String | left, center, right | left | -| header_align | 表头对齐方式,若不设置该项，则使用表格的对齐方式 | String | left, center, right | — | +| align | 对齐方式 | String | left/center/right | left | +| header-align | 表头对齐方式，若不设置该项，则使用表格的对齐方式 | String | left/center/right | — | | class-name | 列的 className | string | — | — | | selectable | 仅对 type=selection 的列有效，类型为 Function，Function 的返回值用来决定这一行的 CheckBox 是否可以勾选 | Function(row, index) | — | — | | reserve-selection | 仅对 type=selection 的列有效，类型为 Boolean，为 true 则代表会保留之前数据的选项，需要配合 Table 的 clearSelection 方法使用。 | Boolean | — | false | From 17ce1a328333a5224d62ecc425e9be780c4c0d5b Mon Sep 17 00:00:00 2001 From: baiyaaaaa Date: Thu, 22 Dec 2016 14:03:03 +0800 Subject: [PATCH 04/35] imrpove dropdown & tabs docs --- examples/docs/en-US/dropdown.md | 33 +++++++++++++++++++++++++++++++++ examples/docs/en-US/tabs.md | 27 +++++++++++++++++++++++++++ examples/docs/zh-CN/dropdown.md | 32 ++++++++++++++++++++++++++++++++ examples/docs/zh-CN/tabs.md | 27 +++++++++++++++++++++++++++ 4 files changed, 119 insertions(+) diff --git a/examples/docs/en-US/dropdown.md b/examples/docs/en-US/dropdown.md index eb426c43308..ad30c5a9894 100644 --- a/examples/docs/en-US/dropdown.md +++ b/examples/docs/en-US/dropdown.md @@ -3,6 +3,9 @@ methods: { handleClick() { alert('button click'); + }, + handleCommand(command) { + this.$message('click on item ' + command); } } } @@ -126,6 +129,36 @@ Use `hide-on-click` to define if menu closes on clicking. ``` ::: +### Command event + +Clicking each dropdown item fires an event whose parameter is assigned by each item. + +:::demo +```html + + + Dropdown List + + + Action 1 + Action 2 + Action 3 + Action 4 + Action 5 + + + +``` +::: + ### Dropdown Attributes | Attribute | Description | Type | Accepted Values | Default | diff --git a/examples/docs/en-US/tabs.md b/examples/docs/en-US/tabs.md index 36009b1f742..5573907585a 100644 --- a/examples/docs/en-US/tabs.md +++ b/examples/docs/en-US/tabs.md @@ -11,6 +11,9 @@ }, handleClick(tab, event) { console.log(tab, event); + }, + renderTab(h, tab) { + return {tab.label}; } } } @@ -125,6 +128,30 @@ Border card tabs. ::: +### Custom Tab + +You can use `label-content` property to customize the tab + +:::demo `label-content` is a render function,which return the vnode of the tab. +```html + + Route + Config + Role + Task + + +``` +::: + ### Tabs Attributes | Attribute | Description | Type | Accepted Values | Default | |---------- |-------- |---------- |------------- |-------- | diff --git a/examples/docs/zh-CN/dropdown.md b/examples/docs/zh-CN/dropdown.md index ad8863fa273..26f6b8c45ba 100644 --- a/examples/docs/zh-CN/dropdown.md +++ b/examples/docs/zh-CN/dropdown.md @@ -43,6 +43,9 @@ methods: { handleClick() { alert('button click'); + }, + handleCommand(command) { + this.$message('click on item ' + command); } } } @@ -168,6 +171,35 @@ ``` ::: +### 指令事件 + +点击菜单项后会触发事件，用户可以通过相应的菜单项 key 进行不同的操作 + +:::demo +```html + + + 下拉菜单 + + + 黄金糕 + 狮子头 + 螺蛳粉 + 双皮奶 + 蚵仔煎 + + + +``` +::: ### Dropdown Attributes | 参数 | 说明 | 类型 | 可选值 | 默认值 | diff --git a/examples/docs/zh-CN/tabs.md b/examples/docs/zh-CN/tabs.md index e77a31ed79f..d885a4e6317 100644 --- a/examples/docs/zh-CN/tabs.md +++ b/examples/docs/zh-CN/tabs.md @@ -11,6 +11,9 @@ }, handleClick(tab, event) { console.log(tab, event); + }, + renderTab(h, tab) { + return {tab.label}; } } } @@ -120,6 +123,30 @@ ``` ::: +### 自定义标签页 + +可以通过 `label-content` 属性来实现自定义标签页的内容 + +:::demo `label-content` 是一个 render function，在这个方法里返回的 vnode 会被渲染到标签页中。 +```html + + 我的行程 + 消息中心 + 角色管理 + 定时任务补偿 + + +``` +::: + ### Tabs Attributes | 参数 | 说明 | 类型 | 可选值 | 默认值 | |---------- |-------- |---------- |------------- |-------- | From 12e4b02e31aaa6287c8f6c109ae2692dadf48f95 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=E6=9D=A8=E5=A5=95?= Date: Fri, 23 Dec 2016 00:48:54 +0800 Subject: [PATCH 05/35] Select: optimize filterable, fixed #1933 (#1935) --- packages/select/src/option.vue | 5 ----- packages/select/src/select.vue | 4 +++- 2 files changed, 3 insertions(+), 6 deletions(-) diff --git a/packages/select/src/option.vue b/packages/select/src/option.vue index 15f953e15ae..df95e896a12 100644 --- a/packages/select/src/option.vue +++ b/packages/select/src/option.vue @@ -92,11 +92,6 @@ }, value() { this.dispatch('ElSelect', 'setSelected'); - }, - visible() { - this.$nextTick(() => { - this.dispatch('ElSelectDropdown', 'updatePopper'); - }); } }, diff --git a/packages/select/src/select.vue b/packages/select/src/select.vue index 0bc0ed3ebd7..2eba2856e61 100644 --- a/packages/select/src/select.vue +++ b/packages/select/src/select.vue @@ -229,7 +229,9 @@ }, query(val) { - this.broadcast('ElSelectDropdown', 'updatePopper'); + this.$nextTick(() => { + this.broadcast('ElSelectDropdown', 'updatePopper'); + }); this.hoverIndex = -1; if (this.multiple && this.filterable) { this.resetInputHeight(); From f41404931107cecc59696b3fac40667f69aef4df Mon Sep 17 00:00:00 2001 From: baiyaaaaa Date: Fri, 23 Dec 2016 00:49:45 +0800 Subject: [PATCH 06/35] fix form async validate bug (#1936) --- packages/form/src/form.vue | 3 ++- 1 file changed, 2 insertions(+), 1 deletion(-) diff --git a/packages/form/src/form.vue b/packages/form/src/form.vue index b00634e44d0..b3f75605d66 100644 --- a/packages/form/src/form.vue +++ b/packages/form/src/form.vue @@ -54,12 +54,13 @@ }, validate(callback) { let valid = true; + let count = 0; this.fields.forEach((field, index) => { field.validate('', errors => { if (errors) { valid = false; } - if (typeof callback === 'function' && index === this.fields.length - 1) { + if (typeof callback === 'function' && ++count === this.fields.length) { callback(valid); } }); From 631afa92ca1fcbff2f607e9ab1df728a9e8eaf40 Mon Sep 17 00:00:00 2001 From: baiyaaaaa Date: Fri, 23 Dec 2016 00:55:24 +0800 Subject: [PATCH 07/35] fix checkbox radio status class && disable style (#1930) --- packages/checkbox/src/checkbox.vue | 18 +-- packages/radio/src/radio.vue | 9 +- packages/theme-default/src/checkbox.css | 145 +++++++++++++----------- packages/theme-default/src/radio.css | 87 +++++++------- test/unit/specs/table.spec.js | 8 +- 5 files changed, 145 insertions(+), 122 deletions(-) diff --git a/packages/checkbox/src/checkbox.vue b/packages/checkbox/src/checkbox.vue index 0c3dd611a20..2d256a4d422 100644 --- a/packages/checkbox/src/checkbox.vue +++ b/packages/checkbox/src/checkbox.vue @@ -1,14 +1,14 @@ @@ -58,7 +74,7 @@ Tabs styled as cards. ```html + ## Tabs 标签页 + 分隔内容上有关联但属于不同类别的数据集合。 ### 基础用法 基础的、简洁的标签页。 -:::demo Tabs 组件提供了选项卡功能，只需要使用`el-tabs`和子元素`el-tab-pane`即可，在两个元素中，我们分别提供了一系列的属性来方便使用，`el-tab-pane`中`label`决定了选项卡标题，标签内部写入内容即可。在下例中我们在`el-tabs`中设置了`active-name`属性，接受一个`String`值，表明选中的选项卡，在`el-tab-pane`中可以设置对应的`name`属性，如果没有设置`name`，则默认值为顺序的`1`/`2`/`3`/`4`。例子选中选项卡2，如果不设置`name`，将`active-name`设为`2`，可以达成相同效果。 +:::demo Tabs 组件提供了选项卡功能，默认选中第一个标签页，你也可以通过 `value` 属性来指定当前选中的标签页。 ```html