diff --git a/.github/CONTRIBUTING.md b/.github/CONTRIBUTING.md index 492e44a9fb6..bfb41275f97 100644 --- a/.github/CONTRIBUTING.md +++ b/.github/CONTRIBUTING.md @@ -38,10 +38,11 @@ npm run dev # open http://localhost:8085 ``` -如果国内用户觉得安装慢可以使用 [npminstall](https://github.com/cnpm/npminstall) +如果国内用户觉得安装慢可以使用 [yarn](https://github.com/yarnpkg/yarn) 搭配 taobao registry ```shell -npm i npminstall -g -npminstall +npm i yarn -g +yarn config set registry https://registry.npm.taobao.org +yarn npm run dev # open http://localhost:8085 diff --git a/examples/docs/zh-cn/table.md b/examples/docs/zh-cn/table.md index 387b829fc4b..e8bdd8fe450 100644 --- a/examples/docs/zh-cn/table.md +++ b/examples/docs/zh-cn/table.md @@ -814,17 +814,17 @@ | 参数 | 说明 | 类型 | 可选值 | 默认值 | |---------- |-------------- |---------- |-------------------------------- |-------- | | data | 显示的数据 | array | — | — | -| height | table 的高度，默认高度为空，即自动高度 | string | — | — | +| height | table 的高度，默认高度为空，即自动高度，单位 px | string, number | — | — | | stripe | 是否为斑马纹 table | boolean | — | false | | border | 是否带有纵向边框 | boolean | — | false | | fit | 列的宽度是否自撑开 | boolean | — | true | -| row-class-name | 行的 className 的回调，会传入 row, index。 | Function | - | - | -| row-key | 行数据的 Key，用来优化 Table 的渲染；在使用 reserve-selection 功能的情况下，该属性是必填的 | Function, String | - | | +| row-class-name | 行的 className 的回调。 | Function(row, index) | - | - | +| row-key | 行数据的 Key，用来优化 Table 的渲染；在使用 reserve-selection 功能的情况下，该属性是必填的 | Function(row), String | - | - | ### Table Events | 事件名 | 说明 | 参数 | | ---- | ---- | ---- | -| select | 当用户手动勾选数据行的 Checkbox 时触发的事件 | selection | +| select | 当用户手动勾选数据行的 Checkbox 时触发的事件 | selection, row | | select-all | 当用户手动勾选全选 Checkbox 时触发的事件 | selection | | selection-change | 当选择项发生变化时会触发该事件 | selection | | cell-mouse-enter | 当单元格 hover 进入时会触发该事件 | row, column, cell, event | @@ -843,13 +843,13 @@ | label | 显示的标题 | string | — | — | | prop | 对应列内容的字段名，也可以使用 property 属性 | string | — | — | | width | 对应列的宽度 | string | — | — | -| fixed | 列是否固定在左侧或者右侧 | string, boolean | true, left, right | - | +| fixed | 列是否固定在左侧或者右侧，true 表示固定在左侧 | string, boolean | true, left, right | - | | sortable | 对应列是否可以排序 | boolean | — | false | -| resizable | 对应列是否可以通过拖动改变宽度（如果需要，需在 el-table 上设置 border 属性为真） | boolean | — | false | +| resizable | 对应列是否可以通过拖动改变宽度（如果需要在 el-table 上设置 border 属性为真） | boolean | — | true | | type | 对应列的类型。如果设置了 `selection` 则显示多选框，如果设置了 `index` 则显示该行的索引（从 1 开始计算） | string | selection/index | — | -| formatter | 用来格式化内容，在 formatter 执行的时候，会传入 row 和 column | function | — | — | +| formatter | 用来格式化内容 | Function(row, column) | — | — | | show-tooltip-when-overflow | 当过长被隐藏时显示 tooltip | Boolean | — | false | | inline-template | 指定该属性后可以自定义 column 模板，参考多选的时间列，通过 row 获取行信息，JSX 里通过 _self 获取当前上下文。此时不需要配置 prop 属性 | — | — | | align | 对齐方式 | String | left, center, right | left | -| selectable | 仅对 type=selection 的列有效，类型为 Function，Function 的返回值用来决定这一行的 CheckBox 是否可以勾选 | Function | - | - | +| selectable | 仅对 type=selection 的列有效，类型为 Function，Function 的返回值用来决定这一行的 CheckBox 是否可以勾选 | Function(row, index) | - | - | | reserve-selection | 仅对 type=selection 的列有效，类型为 Boolean，为 true 则代表会保留之前数据的选项，需要配合 Table 的 clearSelection 方法使用。 | Boolean | - | false | \ No newline at end of file diff --git a/packages/table/src/table-body.js b/packages/table/src/table-body.js index 50ad463570b..d9079bd51ea 100644 --- a/packages/table/src/table-body.js +++ b/packages/table/src/table-body.js @@ -11,7 +11,7 @@ const getColumnById = function(table, columnId) { }; const getColumnByCell = function(table, cell) { - const matches = (cell.className || '').match(/table_[^\s]+/gm); + const matches = (cell.className || '').match(/el-table_[^\s]+/gm); if (matches) { return getColumnById(table, matches[0]); } diff --git a/packages/table/src/table-column.js b/packages/table/src/table-column.js index c592bc14895..6a7cdcc8b31 100644 --- a/packages/table/src/table-column.js +++ b/packages/table/src/table-column.js @@ -192,7 +192,7 @@ export default { let column = getDefaultColumn(type, { id: columnId, label: this.label, - property: this.property, + property, type, template, minWidth, diff --git a/src/index.js b/src/index.js index 2190e273679..24b2d527ec7 100644 --- a/src/index.js +++ b/src/index.js @@ -1,4 +1,3 @@ -import Sync from './utils/sync'; import Pagination from '../packages/pagination/index.js'; import Dialog from '../packages/dialog/index.js'; import Autocomplete from '../packages/autocomplete/index.js'; @@ -59,7 +58,6 @@ const install = function(Vue) { /* istanbul ignore if */ if (install.installed) return; - Vue.directive('sync', Sync); Vue.component(Pagination.name, Pagination); Vue.component(Dialog.name, Dialog); Vue.component(Autocomplete.name, Autocomplete); @@ -130,7 +128,6 @@ if (typeof window !== 'undefined' && window.Vue) { module.exports = { version: '1.0.0-rc.7', install, - Sync, Pagination, Dialog, Autocomplete, diff --git a/test/unit/specs/table.spec.js b/test/unit/specs/table.spec.js new file mode 100644 index 00000000000..470e2887d27 --- /dev/null +++ b/test/unit/specs/table.spec.js @@ -0,0 +1,617 @@ +import { createVue, triggerEvent, destroyVM } from '../util'; + +const DELAY = 10; +const testDataArr = []; +const toArray = function(obj) { + return [].slice.call(obj); +}; + +const getTestData = function() { + return [ + { name: 'Toy Story', release: '1995-11-22', director: 'John Lasseter', runtime: 80 }, + { name: 'A Bug\'s Life', release: '1998-11-25', director: 'John Lasseter', runtime: 95 }, + { name: 'Toy Story 2', release: '1999-11-24', director: 'John Lasseter', runtime: 92 }, + { name: 'Monsters, Inc.', release: '2001-11-2', director: 'Peter Docter', runtime: 92 }, + { name: 'Finding Nemo', release: '2003-5-30', director: 'Andrew Stanton', runtime: 100 } + ]; +}; + +getTestData().forEach(cur => { + Object.keys(cur).forEach(prop => { + testDataArr.push(cur[prop].toString()); + }); +}); + +describe('Table', () => { + describe('rendering data is correct', () => { + const vm = createVue({ + template: ` + + + + + + + `, + + created() { + this.testData = getTestData(); + } + }); + + it('head', done => { + setTimeout(_ => { + const ths = toArray(vm.$el.querySelectorAll('thead th')); + + expect(ths.map(node => node.textContent).filter(o => o)) + .to.eql(['片名', '发行日期', '导演', '时长（分）']); + done(); + }, DELAY); + }); + + it('row length', () => { + expect(vm.$el.querySelectorAll('.el-table__body-wrapper tbody tr')).to.length(getTestData().length); + }); + + it('row data', () => { + const cells = toArray(vm.$el.querySelectorAll('.cell')) + .map(node => node.textContent); + + expect(cells).to.eql(testDataArr); + destroyVM(vm); + }); + }); + + describe('attributes', () => { + const createTable = function(props, opts) { + return createVue(Object.assign({ + template: ` + + + + + + + `, + + created() { + this.testData = getTestData(); + } + }, opts)); + }; + + it('height', done => { + const vm = createTable('height="134"'); + setTimeout(_ => { + expect(vm.$el.style.height).to.equal('134px'); + destroyVM(vm); + done(); + }, DELAY); + }); + + it('stripe', done => { + const vm = createTable('stripe'); + setTimeout(_ => { + expect(vm.$el.classList.contains('el-table--striped')).to.true; + destroyVM(vm); + done(); + }, DELAY); + }); + + it('border', done => { + const vm = createTable('border'); + setTimeout(_ => { + expect(vm.$el.classList.contains('el-table--border')).to.true; + destroyVM(vm); + done(); + }, DELAY); + }); + + it('fit', done => { + const vm = createTable(':fit="false"'); + setTimeout(_ => { + expect(vm.$el.classList.contains('el-table--fit')).to.false; + destroyVM(vm); + done(); + }, DELAY); + }); + + it('tableRowClassName', done => { + const vm = createTable(':row-class-name="tableRowClassName"', { + methods: { + tableRowClassName(row, index) { + if (index === 1) { + return 'info-row'; + } else if (index === 3) { + return 'positive-row'; + } + + return ''; + } + } + }); + + setTimeout(_ => { + expect(vm.$el.querySelectorAll('.info-row')).to.length(1); + expect(vm.$el.querySelectorAll('.positive-row')).to.length(1); + destroyVM(vm); + done(); + }, DELAY); + }); + + // TODO: row-key + }); + + describe('events', () => { + const createTable = function(prop = '', opts) { + return createVue({ + template: ` + + + + + + + + `, + + methods: { + handleEvent(...args) { + this.result = args; + } + }, + + created() { + this.testData = getTestData(); + }, + + data() { + return { result: '' }; + } + }, true); + }; + + it('select', done => { + const vm = createTable('select'); + + setTimeout(_ => { + vm.$el.querySelectorAll('.el-checkbox')[1].click(); + expect(vm.result).to.length(2); + expect(vm.result[1]).to.have.property('name').to.equal(getTestData()[0].name); + destroyVM(vm); + done(); + }, DELAY); + }); + + it('select-all', done => { + const vm = createTable('select-all'); + + setTimeout(_ => { + vm.$el.querySelector('.el-checkbox').click(); + setTimeout(_ => { + expect(vm.result).to.length(1); + expect(vm.result[0]).to.length(getTestData().length); + destroyVM(vm); + done(); + }, DELAY); + }, DELAY); + }); + + it('selection-change', done => { + const vm = createTable('selection-change'); + setTimeout(_ => { + vm.$el.querySelectorAll('.el-checkbox')[1].click(); + expect(vm.result).to.length(1); + destroyVM(vm); + done(); + }, DELAY); + }); + + it('cell-mouse-enter', done => { + const vm = createTable('cell-mouse-enter'); + + setTimeout(_ => { + const cell = vm.$el.querySelectorAll('.el-table__body .cell')[2]; // first row + triggerEvent(cell.parentNode, 'mouseenter'); + expect(vm.result).to.length(4); // row, column, cell, event + expect(vm.result[0]).to.have.property('name').to.equal(getTestData()[0].name); + destroyVM(vm); + done(); + }, DELAY); + }); + + it('cell-mouse-leave', done => { + const vm = createTable('cell-mouse-leave'); + + setTimeout(_ => { + const cell = vm.$el.querySelectorAll('.el-table__body .cell')[7]; // second row + const cell2 = vm.$el.querySelectorAll('.el-table__body .cell')[2]; // first row + + triggerEvent(cell2.parentNode, 'mouseenter'); + triggerEvent(cell.parentNode, 'mouseleave'); + expect(vm.result).to.length(4); // row, column, cell, event + expect(vm.result[0]).to.have.property('name').to.equal(getTestData()[0].name); + destroyVM(vm); + done(); + }, DELAY); + }); + + it('cell-click', done => { + const vm = createTable('cell-click'); + + setTimeout(_ => { + const cell = vm.$el.querySelectorAll('.el-table__body .cell')[2]; // first row + + cell.parentNode.click(); + expect(vm.result).to.length(4); // row, column, cell, event + expect(vm.result[0]).to.have.property('name').to.equal(getTestData()[0].name); + destroyVM(vm); + done(); + }, DELAY); + }); + + it('row-click', done => { + const vm = createTable('row-click'); + + setTimeout(_ => { + const cell = vm.$el.querySelectorAll('.el-table__body .cell')[2]; // first row + + triggerEvent(cell.parentNode.parentNode, 'click'); + expect(vm.result).to.length(2); // row, event + expect(vm.result[0]).to.have.property('name').to.equal(getTestData()[0].name); + destroyVM(vm); + done(); + }, DELAY); + }); + }); + + describe('methods', () => {}); + + describe('column attributes', () => { + const createTable = function(props1, props2, props3, props4, opts, tableProps) { + return createVue(Object.assign({ + template: ` + + + + + + + `, + + created() { + this.testData = getTestData(); + } + }, opts)); + }; + + it('label', done => { + const vm = createTable('label="啊哈哈哈"', 'label="啊啦啦啦"'); + setTimeout(_ => { + const ths = toArray(vm.$el.querySelectorAll('thead th')) + .map(node => node.textContent).filter(o => o); + + expect(ths).to.eql(['啊哈哈哈', '啊啦啦啦']); + destroyVM(vm); + done(); + }, DELAY); + }); + + it('width', done => { + const vm = createTable('width="123px"', ':width="102"', 'width="39"'); + setTimeout(_ => { + const ths = toArray(vm.$el.querySelectorAll('.el-table__header-wrapper colgroup')) + .map(node => node.width).filter(o => o); + + expect(ths).to.include('123').include('102').include('39'); + destroyVM(vm); + done(); + }, DELAY); + }); + + it('fixed', done => { + const vm = createTable( + 'fixed label="test1"', + 'fixed="right" label="test2"', + 'fixed="left" label="test3"'); + setTimeout(_ => { + expect(toArray(vm.$el.querySelectorAll('.el-table__fixed th:not(.hidden)')) + .map(node => node.textContent)) + .to.eql(['test1', 'test3']); + + expect(toArray(vm.$el.querySelectorAll('.el-table__fixed-right th:not(.hidden)')) + .map(node => node.textContent)) + .to.eql(['test2']); + destroyVM(vm); + done(); + }, DELAY); + }); + + // TODO + it('resizable', done => { + const vm = createTable( + 'resizable', + ':resizable="false"', + '', + '', + {}, + 'border'); + + setTimeout(_ => { + const firstCol = vm.$el.querySelector('thead th'); + triggerEvent(firstCol, 'mousemove'); + triggerEvent(firstCol, 'mousedown'); + destroyVM(vm); + done(); + }, DELAY); + }); + + it('formatter', done => { + const vm = createTable( + ':formatter="renderCell"', '', '', '', { + methods: { + renderCell(row, column) { + return `[${row.name}]`; + } + } + }); + + setTimeout(_ => { + const cells = toArray(vm.$el.querySelectorAll('.el-table__body-wrapper tbody tr td:first-child')); + expect(cells.map(n => n.textContent)).to.eql(getTestData().map(o => `[${o.name}]`)); + destroyVM(vm); + done(); + }, DELAY); + }); + + it('show-tooltip-when-overflow', done => { + const vm = createTable('show-tooltip-when-overflow'); + setTimeout(_ => { + expect(vm.$el.querySelectorAll('.el-tooltip')).to.length(5); + destroyVM(vm); + done(); + }, DELAY); + }); + + it('inline-template', done => { + const vm = createVue({ + template: ` + + + [{{ row.name }}] + + + + + + `, + + created() { + this.testData = getTestData(); + } + }); + + setTimeout(_ => { + const cells = toArray(vm.$el.querySelectorAll('.el-table__body-wrapper tbody tr td:first-child')); + expect(cells.map(n => n.textContent)).to.eql(getTestData().map(o => `[${o.name}]`)); + destroyVM(vm); + done(); + }, DELAY); + }); + + it('align', done => { + const vm = createTable('align="left"', 'align="right"', 'align="center"'); + setTimeout(_ => { + var len = getTestData().length + 1; + expect(vm.$el.querySelectorAll('.is-left')).to.length(len); + expect(vm.$el.querySelectorAll('.is-right')).to.length(len); + expect(vm.$el.querySelectorAll('.is-center')).to.length(len); + destroyVM(vm); + done(); + }, DELAY); + }); + + it('selectable', done => { + const vm = createVue({ + template: ` + + + + + + + + `, + + created() { + this.testData = getTestData(); + }, + + data() { + return { selected: [] }; + }, + + methods: { + change(rows) { + this.selected = rows; + }, + + filterSelect(row, index) { + return index > 2; + } + } + }, true); + + setTimeout(_ => { + vm.$el.querySelector('.el-checkbox').click(); + setTimeout(_ => { + expect(vm.selected).to.length(2); + destroyVM(vm); + done(); + }, DELAY); + }, DELAY); + }); + + // TODO + // it('reserve-selection', done => { + // const vm = createVue({ + // template: ` + // + // + // + // + // + // + // + // `, + + // created() { + // this.testData = getTestData(); + // }, + + // data() { + // return { selected: [] }; + // }, + + // methods: { + // change(rows) { + // this.selected = rows; + // } + // } + // }, true); + + // setTimeout(_ => { + + // done(); + // }, DELAY); + // }); + + describe('type', () => { + const createTable = function(type) { + return createVue({ + template: ` + + + + + + + + `, + + created() { + this.testData = getTestData(); + }, + + data() { + return { selected: [] }; + }, + + methods: { + change(rows) { + this.selected = rows; + } + } + }, true); + }; + + describe('= selection', () => { + const vm = createTable('selection'); + + it('render', done => { + setTimeout(_ => { + expect(vm.$el.querySelectorAll('.el-checkbox')).to.length(getTestData().length + 1); + done(); + }, DELAY); + }); + + it('select all', done => { + vm.$el.querySelector('.el-checkbox').click(); + + setTimeout(_ => { + expect(vm.selected).to.length(getTestData().length); + done(); + }, DELAY); + }); + + it('cancel all', done => { + vm.$el.querySelector('.el-checkbox').click(); + + setTimeout(_ => { + expect(vm.selected).to.length(0); + destroyVM(vm); + done(); + }, DELAY); + }); + + it('select one', done => { + const vm2 = createTable('selection'); + + setTimeout(_ => { + vm2.$el.querySelectorAll('.el-checkbox')[1].click(); + + setTimeout(_ => { + expect(vm2.selected).to.length(1); + expect(vm2.selected[0].name).to.equal(getTestData()[0].name); + destroyVM(vm2); + done(); + }, DELAY); + }, DELAY); + }); + }); + + describe('= index', () => { + const vm = createTable('index'); + + it('render', done => { + setTimeout(_ => { + expect(toArray(vm.$el.querySelectorAll('.el-table__body-wrapper tbody tr td:first-child')) + .map(node => node.textContent)).to.eql(['1', '2', '3', '4', '5']); + destroyVM(vm); + done(); + }, DELAY); + }); + }); + }); + + describe('sortable', () => { + const vm = createTable('', '', '', 'sortable'); + + it('render', done => { + setTimeout(_ => { + expect(vm.$el.querySelectorAll('.caret-wrapper')).to.length(1); + done(); + }, DELAY); + }); + }); + + describe('click sortable column', () => { + const vm = createTable('', '', '', 'sortable'); + + it('ascending', done => { + const elm = vm.$el.querySelector('.caret-wrapper'); + + elm.parentNode.click(); + setTimeout(_ => { + const lastCells = vm.$el.querySelectorAll('.el-table__body-wrapper tbody tr td:last-child'); + expect(toArray(lastCells).map(node => node.textContent)) + .to.eql(['80', '92', '92', '95', '100']); + done(); + }, DELAY); + }); + + it('descending', done => { + const elm = vm.$el.querySelector('.caret-wrapper'); + + elm.parentNode.click(); + setTimeout(_ => { + const lastCells = vm.$el.querySelectorAll('.el-table__body-wrapper tbody tr td:last-child'); + expect(toArray(lastCells).map(node => node.textContent)) + .to.eql(['100', '95', '92', '92', '80']); + destroyVM(vm); + done(); + }, DELAY); + }); + }); + }); +}); diff --git a/test/unit/util.js b/test/unit/util.js index 42920e80a42..fac3e3a7bd7 100644 --- a/test/unit/util.js +++ b/test/unit/util.js @@ -14,6 +14,17 @@ const createElm = function() { return elm; }; +/** + * 回收 vm + * @param {Object} vm + */ +exports.destroyVM = function(vm) { + vm.$el && + vm.$el.parentNode && + vm.$el.parentNode.removeChild(vm.$el); + vm.$destroy && vm.$destroy(); +}; + /** * 创建一个 Vue 的实例对象 * @param {Object|String} Compo 组件配置，可直接传 template @@ -51,10 +62,10 @@ exports.createTest = function(Compo, propsData = {}, mounted = false) { * 触发一个事件 * mouseenter, mouseleave, mouseover, keyup, change, click 等 * @param {Element} elm - * @param {EventName} name - * @param {options} opts + * @param {String} name + * @param {*} opts */ -exports.triggerEvent = function(elm, name, opts) { +exports.triggerEvent = function(elm, name, ...opts) { let eventName; if (/^mouse|click/.test(name)) { @@ -70,4 +81,6 @@ exports.triggerEvent = function(elm, name, opts) { elm.dispatchEvent ? elm.dispatchEvent(evt) : elm.fireEvent('on' + name, evt); + + return elm; };