From b02a6ee376681a16f898170d387c99d0af1291b3 Mon Sep 17 00:00:00 2001 From: syffs Date: Mon, 21 May 2018 22:35:32 +0200 Subject: [PATCH 001/389] fix(form-input): allow readonly to be forced to false when plaintext is enabled (#1841) --- src/components/form-input/form-input.js | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/src/components/form-input/form-input.js b/src/components/form-input/form-input.js index 192e69756bc..8357e35ed7e 100644 --- a/src/components/form-input/form-input.js +++ b/src/components/form-input/form-input.js @@ -38,7 +38,7 @@ export default { type: this.localType, disabled: this.disabled, required: this.required, - readonly: this.readonly || this.plaintext, + readonly: this.readonly || (this.plaintext && this.readonly === null), placeholder: this.placeholder, autocomplete: this.autocomplete || null, 'aria-required': this.required ? 'true' : null, @@ -66,7 +66,7 @@ export default { }, readonly: { type: Boolean, - default: false + default: null }, plaintext: { type: Boolean, From d8f5d694b64761120f3b4b230b1d3541bf4b0753 Mon Sep 17 00:00:00 2001 From: Alexander von Studnitz Date: Wed, 23 May 2018 06:37:48 +0200 Subject: [PATCH 002/389] fix(docs): fix typo in collapse events doc --- src/components/collapse/package.json | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/components/collapse/package.json b/src/components/collapse/package.json index 2df243d8b28..175d21e2d2c 100755 --- a/src/components/collapse/package.json +++ b/src/components/collapse/package.json @@ -14,7 +14,7 @@ }, { "event": "shown", - "description": "emitted when collaspe has finised opening" + "description": "emitted when collaspe has finished opening" }, { "event": "hide", From 8e360614995a099d0ae1af885d499dd868013785 Mon Sep 17 00:00:00 2001 From: Renan Hangai Date: Wed, 23 May 2018 01:46:46 -0300 Subject: [PATCH 003/389] Table row arbitrary classes. (#1797) * feat(table): Added tbodyTrClass support for functions * feat(table): Created docs for row styling * feat(table): Added tests for tbody-tr-class * fix(table): Lint for new tbody-tr-class prop * fix(table): Lint for new tbody-tr-class test fixture * fix(table): Fixed lint for table.spec on tbody-tr-class test --- src/components/table/README.md | 44 ++++++++++++++++++++++++ src/components/table/fixtures/table.html | 2 ++ src/components/table/fixtures/table.js | 6 ++++ src/components/table/table.js | 12 +++---- src/components/table/table.spec.js | 22 ++++++++++++ 5 files changed, 80 insertions(+), 6 deletions(-) diff --git a/src/components/table/README.md b/src/components/table/README.md index 60394a3b438..aad5456f8c5 100755 --- a/src/components/table/README.md +++ b/src/components/table/README.md @@ -307,6 +307,8 @@ fields: [ ``` ## Table style options + +### Table Styling ### `` provides several props to alter the style of the table: | prop | Type | Description @@ -376,7 +378,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 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..ec8b2fa6d9b 100755 --- a/src/components/table/fixtures/table.js +++ b/src/components/table/fixtures/table.js @@ -144,6 +144,12 @@ 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.js b/src/components/table/table.js index e85bd81a6db..57e2383a8b8 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 })] ) ) @@ -487,7 +487,7 @@ export default { default: null }, tbodyTrClass: { - type: [String, Array], + type: [String, Array, Function], default: null }, tfootClass: { @@ -895,7 +895,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) { diff --git a/src/components/table/table.spec.js b/src/components/table/table.spec.js index aa8f106ac62..d690e1fd303 100755 --- a/src/components/table/table.spec.js +++ b/src/components/table/table.spec.js @@ -780,4 +780,26 @@ 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 < len; ++childIndex) { + const hasClass = children.indexOf(childIndex) >= 0 + expect(Boolean(tbody.children[childIndex]) && + Boolean(tbody.children[childIndex].classList) && + tbody.children[childIndex].classList.contains(className)) + .toBe(hasClass) + } + } + }) }) From 7b5fde8ea1a00373465f0d587ec834fbeaf61724 Mon Sep 17 00:00:00 2001 From: Peter Thaleikis Date: Wed, 23 May 2018 21:02:47 +0700 Subject: [PATCH 004/389] fix(docs): missing dash and typo (#1850) --- src/components/form-checkbox/README.md | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/src/components/form-checkbox/README.md b/src/components/form-checkbox/README.md index b0b37a64f53..bd64a13f2aa 100755 --- a/src/components/form-checkbox/README.md +++ b/src/components/form-checkbox/README.md @@ -137,7 +137,7 @@ checkbox's `value` prop. ### Multiple checkboxes and accessibility When binding multiple checkboxes together, you should set the `name` prop to the same -value for all ``s in the group individually or via the `name` prop +value for all ``s in the group individually or via the `name` prop of ``. This will inform users of assitive technologies that the checkboxes are related. @@ -158,7 +158,7 @@ when they are in the _checked_ state.