From f1223ca523a9dfdfe6ae6c246464fa591bcd7e9f Mon Sep 17 00:00:00 2001 From: renanhangai Date: Fri, 4 May 2018 19:55:27 -0300 Subject: [PATCH 1/6] feat(table): Added tbodyTrClass support for functions --- src/components/table/table.js | 12 ++++++------ 1 file changed, 6 insertions(+), 6 deletions(-) diff --git a/src/components/table/table.js b/src/components/table/table.js index 906fb031cb6..a79676400d2 100644 --- a/src/components/table/table.js +++ b/src/components/table/table.js @@ -167,7 +167,7 @@ export default { rows.push( h( 'tr', - { key: 'top-row', class: ['b-table-top-row', this.tbodyTrClass] }, + { key: 'top-row', class: ['b-table-top-row', typeof(this.tbodyTrClass) === 'function' ? this.tbodyTrClass( null, 'row-top' ) : this.tbodyTrClass] }, [$scoped['top-row']({ columns: fields.length, fields: fields })] ) ) @@ -281,7 +281,7 @@ export default { 'tr', { key: `details-${rowIndex}`, - class: ['b-table-details', this.tbodyTrClass], + class: ['b-table-details', typeof(this.tbodyTrClass) === 'function' ? this.tbodyTrClass(item, 'row-details') : this.tbodyTrClass], attrs: trAttrs }, [details] @@ -317,7 +317,7 @@ export default { 'tr', { key: 'empty-row', - class: ['b-table-empty-row', this.tbodyTrClass], + class: ['b-table-empty-row', typeof(this.tbodyTrClass) === 'function' ? this.tbodyTrClass(null, 'row-empty') : this.tbodyTrClass], attrs: this.isStacked ? { role: 'row' } : {} }, [empty] @@ -333,7 +333,7 @@ export default { rows.push( h( 'tr', - { key: 'bottom-row', class: ['b-table-bottom-row', this.tbodyTrClass] }, + { key: 'bottom-row', class: ['b-table-bottom-row', typeof(this.tbodyTrClass) === 'function' ? this.tbodyTrClass(null, 'row-bottom') : this.tbodyTrClass] }, [$scoped['bottom-row']({ columns: fields.length, fields: fields })] ) ) @@ -484,7 +484,7 @@ export default { default: null }, tbodyTrClass: { - type: [String, Array], + type: [String, Array, Function], default: null }, tfootClass: { @@ -892,7 +892,7 @@ export default { item._rowVariant ? `${this.dark ? 'bg' : 'table'}-${item._rowVariant}` : '', - this.tbodyTrClass + typeof(this.tbodyTrClass) === 'function' ? this.tbodyTrClass(item, 'row') : this.tbodyTrClass, ] }, rowClicked (e, item, index) { From 6f2646e3c77730915ba2e47d980408d7e7b75f98 Mon Sep 17 00:00:00 2001 From: renanhangai Date: Fri, 4 May 2018 20:26:13 -0300 Subject: [PATCH 2/6] feat(table): Created docs for row styling --- src/components/table/README.md | 44 ++++++++++++++++++++++++++++++++++ 1 file changed, 44 insertions(+) diff --git a/src/components/table/README.md b/src/components/table/README.md index 73e07f0e33e..4598db046c2 100755 --- a/src/components/table/README.md +++ b/src/components/table/README.md @@ -306,6 +306,8 @@ fields: [ ``` ## Table style options + +### Table Styling ### `` provides several props to alter the style of the table: | prop | Type | Description @@ -375,7 +377,49 @@ export default { ``` +### Row Styling ### + +You can also style every row using the `tbdoy-tr-class` prop + +| Property | Type | Description +| ---------| ---- | ----------- +| `tbodyTrClass` | String, Array or Function | Classes to be applied to every row on the table. If a function is given, it will be called as `tbodyTrClass( item, type )` and it may return an `Array`, `Object` or `String`. + + +**Example: Basic row styles** +```html + + + + +``` ## Responsive tables Responsive tables allow tables to be scrolled horizontally with ease. Make any table From 5cb52c3317cc9b4a55d6f6f35698252d27e91543 Mon Sep 17 00:00:00 2001 From: renanhangai Date: Fri, 4 May 2018 20:52:57 -0300 Subject: [PATCH 3/6] feat(table): Added tests for tbody-tr-class --- src/components/table/fixtures/table.html | 2 ++ src/components/table/fixtures/table.js | 5 +++++ src/components/table/table.spec.js | 24 ++++++++++++++++++++++++ 3 files changed, 31 insertions(+) diff --git a/src/components/table/fixtures/table.html b/src/components/table/fixtures/table.html index 9b25295fb87..7f788610966 100755 --- a/src/components/table/fixtures/table.html +++ b/src/components/table/fixtures/table.html @@ -135,4 +135,6 @@

Provider Test Table

Details + + diff --git a/src/components/table/fixtures/table.js b/src/components/table/fixtures/table.js index 3d7e3d31f3e..e980c02c009 100755 --- a/src/components/table/fixtures/table.js +++ b/src/components/table/fixtures/table.js @@ -144,6 +144,11 @@ window.app = new Vue({ }, formatCellAttrs (value, key, item) { return {title: 'Actions'} + }, + styleRow( item ) { + if ( !item ) + return; + return { 'tr-start-with-l': item.name.first.charAt(0) === 'L', 'tr-last-name-macdonald': item.name.last === 'Macdonald' }; } } }) diff --git a/src/components/table/table.spec.js b/src/components/table/table.spec.js index aa8f106ac62..24116363492 100755 --- a/src/components/table/table.spec.js +++ b/src/components/table/table.spec.js @@ -780,4 +780,28 @@ describe('table', async () => { } }) }) + + it('should set row classes', async () => { + // Classes that children rows must contain + const classesTest = { + 'tr-start-with-l': [1, 7], + 'tr-last-name-macdonald': [0, 6], + }; + + const { app } = window + const vm = app.$refs.table_style_row + const tbody = [...vm.$el.children].find(el => el && el.tagName === 'TBODY') + expect(tbody).toBeDefined() + for ( const className in classesTest ) { + const children = classesTest[className]; + for ( let childIndex = 0, len = tbody.children.length-1; childIndex= 0; + expect(Boolean(tbody.children[childIndex]) && + Boolean(tbody.children[childIndex].classList) && + tbody.children[childIndex].classList.contains(className)) + .toBe(hasClass) + } + } + }) + }) From dc6e917aed87b8a7b438052a6f40873953d64139 Mon Sep 17 00:00:00 2001 From: renanhangai Date: Fri, 4 May 2018 21:11:27 -0300 Subject: [PATCH 4/6] fix(table): Lint for new tbody-tr-class prop --- src/components/table/table.js | 10 +++++----- 1 file changed, 5 insertions(+), 5 deletions(-) diff --git a/src/components/table/table.js b/src/components/table/table.js index a79676400d2..b6ca6ba45bb 100644 --- a/src/components/table/table.js +++ b/src/components/table/table.js @@ -167,7 +167,7 @@ export default { rows.push( h( 'tr', - { key: 'top-row', class: ['b-table-top-row', typeof(this.tbodyTrClass) === 'function' ? this.tbodyTrClass( null, 'row-top' ) : this.tbodyTrClass] }, + { key: 'top-row', class: ['b-table-top-row', typeof this.tbodyTrClass === 'function' ? this.tbodyTrClass(null, 'row-top') : this.tbodyTrClass] }, [$scoped['top-row']({ columns: fields.length, fields: fields })] ) ) @@ -281,7 +281,7 @@ export default { 'tr', { key: `details-${rowIndex}`, - class: ['b-table-details', typeof(this.tbodyTrClass) === 'function' ? this.tbodyTrClass(item, 'row-details') : this.tbodyTrClass], + class: ['b-table-details', typeof this.tbodyTrClass === 'function' ? this.tbodyTrClass(item, 'row-details') : this.tbodyTrClass], attrs: trAttrs }, [details] @@ -317,7 +317,7 @@ export default { 'tr', { key: 'empty-row', - class: ['b-table-empty-row', typeof(this.tbodyTrClass) === 'function' ? this.tbodyTrClass(null, 'row-empty') : this.tbodyTrClass], + class: ['b-table-empty-row', typeof this.tbodyTrClass === 'function' ? this.tbodyTrClass(null, 'row-empty') : this.tbodyTrClass], attrs: this.isStacked ? { role: 'row' } : {} }, [empty] @@ -333,7 +333,7 @@ export default { rows.push( h( 'tr', - { key: 'bottom-row', class: ['b-table-bottom-row', typeof(this.tbodyTrClass) === 'function' ? this.tbodyTrClass(null, 'row-bottom') : this.tbodyTrClass] }, + { key: 'bottom-row', class: ['b-table-bottom-row', typeof this.tbodyTrClass === 'function' ? this.tbodyTrClass(null, 'row-bottom') : this.tbodyTrClass] }, [$scoped['bottom-row']({ columns: fields.length, fields: fields })] ) ) @@ -892,7 +892,7 @@ export default { item._rowVariant ? `${this.dark ? 'bg' : 'table'}-${item._rowVariant}` : '', - typeof(this.tbodyTrClass) === 'function' ? this.tbodyTrClass(item, 'row') : this.tbodyTrClass, + typeof this.tbodyTrClass === 'function' ? this.tbodyTrClass(item, 'row') : this.tbodyTrClass ] }, rowClicked (e, item, index) { From 5a3a7ab40ba415f497bfae7b9663c171f128b871 Mon Sep 17 00:00:00 2001 From: renanhangai Date: Fri, 4 May 2018 21:11:56 -0300 Subject: [PATCH 5/6] fix(table): Lint for new tbody-tr-class test fixture --- src/components/table/fixtures/table.js | 9 +++++---- 1 file changed, 5 insertions(+), 4 deletions(-) diff --git a/src/components/table/fixtures/table.js b/src/components/table/fixtures/table.js index e980c02c009..ec8b2fa6d9b 100755 --- a/src/components/table/fixtures/table.js +++ b/src/components/table/fixtures/table.js @@ -145,10 +145,11 @@ window.app = new Vue({ formatCellAttrs (value, key, item) { return {title: 'Actions'} }, - styleRow( item ) { - if ( !item ) - return; - return { 'tr-start-with-l': item.name.first.charAt(0) === 'L', 'tr-last-name-macdonald': item.name.last === 'Macdonald' }; + styleRow (item) { + if (!item) { + return + } + return { 'tr-start-with-l': item.name.first.charAt(0) === 'L', 'tr-last-name-macdonald': item.name.last === 'Macdonald' } } } }) From 70417dd4e808eee302f6cc8e62745dcc68d77213 Mon Sep 17 00:00:00 2001 From: renanhangai Date: Fri, 4 May 2018 21:14:03 -0300 Subject: [PATCH 6/6] fix(table): Fixed lint for table.spec on tbody-tr-class test --- src/components/table/table.spec.js | 14 ++++++-------- 1 file changed, 6 insertions(+), 8 deletions(-) diff --git a/src/components/table/table.spec.js b/src/components/table/table.spec.js index 24116363492..d690e1fd303 100755 --- a/src/components/table/table.spec.js +++ b/src/components/table/table.spec.js @@ -785,17 +785,16 @@ describe('table', async () => { // Classes that children rows must contain const classesTest = { 'tr-start-with-l': [1, 7], - 'tr-last-name-macdonald': [0, 6], - }; - + 'tr-last-name-macdonald': [0, 6] + } const { app } = window const vm = app.$refs.table_style_row const tbody = [...vm.$el.children].find(el => el && el.tagName === 'TBODY') expect(tbody).toBeDefined() - for ( const className in classesTest ) { - const children = classesTest[className]; - for ( let childIndex = 0, len = tbody.children.length-1; childIndex= 0; + for (const className in classesTest) { + const children = classesTest[className] + for (let childIndex = 0, len = tbody.children.length - 1; childIndex < len; ++childIndex) { + const hasClass = children.indexOf(childIndex) >= 0 expect(Boolean(tbody.children[childIndex]) && Boolean(tbody.children[childIndex].classList) && tbody.children[childIndex].classList.contains(className)) @@ -803,5 +802,4 @@ describe('table', async () => { } } }) - })