From 214a30c6e1efb431ee269dd6e7b5064ceae71c1c Mon Sep 17 00:00:00 2001 From: Troy Morehouse Date: Mon, 7 Oct 2019 15:29:46 -0300 Subject: [PATCH 01/12] feat(b-table, b-table-lite): add in head/foot row variant prop Two new props `head-row-variant` and `foot-row-variant` for applying a theme color variant to the head/foot built in `` elements --- src/components/table/helpers/mixin-thead.js | 12 ++++++++++-- 1 file changed, 10 insertions(+), 2 deletions(-) diff --git a/src/components/table/helpers/mixin-thead.js b/src/components/table/helpers/mixin-thead.js index beade432335..11a321587bc 100644 --- a/src/components/table/helpers/mixin-thead.js +++ b/src/components/table/helpers/mixin-thead.js @@ -2,6 +2,7 @@ import KeyCodes from '../../../utils/key-codes' import startCase from '../../../utils/startcase' import { getComponentConfig } from '../../../utils/config' import { htmlOrText } from '../../../utils/html' +import { isUndefinedOrNull } from '../../../utils/inspect' import filterEvent from './filter-event' import textSelectionActive from './text-selection-active' import { BThead } from '../thead' @@ -15,6 +16,10 @@ export default { type: String, // 'light', 'dark' or null (or custom) default: () => getComponentConfig('BTable', 'headVariant') }, + headRowVariant: { + type: String, // Any Bootstrap theme variant (or custom) + default: null + }, theadClass: { type: [String, Array, Object] // default: undefined @@ -142,7 +147,10 @@ export default { // Genrate the row(s) const $trs = [] if (isFoot) { - $trs.push(h(BTr, { class: this.tfootTrClass }, $cells)) + const trProps = { + variant: isUndefinedOrNull(this.footRowVariant) ? this.headRowVariant : this.footRowVariant + } + $trs.push(h(BTr, { class: this.tfootTrClass, props: trProps}, $cells)) } else { const scope = { columns: fields.length, @@ -152,7 +160,7 @@ export default { clearSelected } $trs.push(this.normalizeSlot('thead-top', scope) || h()) - $trs.push(h(BTr, { class: this.theadTrClass }, $cells)) + $trs.push(h(BTr, { class: this.theadTrClass, props: { variant: this.headRowVariant } }, $cells)) } return h( From d2982771fc291151c86251f1442ebb7806bc45d0 Mon Sep 17 00:00:00 2001 From: Troy Morehouse Date: Mon, 7 Oct 2019 15:32:30 -0300 Subject: [PATCH 02/12] Update mixin-tfoot.js --- src/components/table/helpers/mixin-tfoot.js | 6 +++++- 1 file changed, 5 insertions(+), 1 deletion(-) diff --git a/src/components/table/helpers/mixin-tfoot.js b/src/components/table/helpers/mixin-tfoot.js index e8555d14842..e9cd898cccb 100644 --- a/src/components/table/helpers/mixin-tfoot.js +++ b/src/components/table/helpers/mixin-tfoot.js @@ -8,9 +8,13 @@ export default { default: false }, footVariant: { - type: String, + type: String, // 'dark', 'light', or null (or custom) default: () => getComponentConfig('BTable', 'footVariant') }, + footRowVariant: { + type: String, // Any Bootstrap theme variant (or custom). Falls back to headRowVariant + default: null + }, tfootClass: { type: [String, Array, Object], default: null From ca95dcd83f70df0407ea37b6f92f13652071f9cb Mon Sep 17 00:00:00 2001 From: Troy Morehouse Date: Mon, 7 Oct 2019 15:37:23 -0300 Subject: [PATCH 03/12] Update mixin-thead.js --- src/components/table/helpers/mixin-thead.js | 10 +++++++--- 1 file changed, 7 insertions(+), 3 deletions(-) diff --git a/src/components/table/helpers/mixin-thead.js b/src/components/table/helpers/mixin-thead.js index 11a321587bc..f932e505870 100644 --- a/src/components/table/helpers/mixin-thead.js +++ b/src/components/table/helpers/mixin-thead.js @@ -148,9 +148,11 @@ export default { const $trs = [] if (isFoot) { const trProps = { - variant: isUndefinedOrNull(this.footRowVariant) ? this.headRowVariant : this.footRowVariant + variant: isUndefinedOrNull(this.footRowVariant) + ? this.headRowVariant + : this.footRowVariant } - $trs.push(h(BTr, { class: this.tfootTrClass, props: trProps}, $cells)) + $trs.push(h(BTr, { class: this.tfootTrClass, props: trProps }, $cells)) } else { const scope = { columns: fields.length, @@ -160,7 +162,9 @@ export default { clearSelected } $trs.push(this.normalizeSlot('thead-top', scope) || h()) - $trs.push(h(BTr, { class: this.theadTrClass, props: { variant: this.headRowVariant } }, $cells)) + $trs.push( + h(BTr, { class: this.theadTrClass, props: { variant: this.headRowVariant } }, $cells) + ) } return h( From ca836a916183a123c92bdae9d4e1118c4cad71db Mon Sep 17 00:00:00 2001 From: Troy Morehouse Date: Mon, 7 Oct 2019 15:58:00 -0300 Subject: [PATCH 04/12] Update tr.js --- src/components/table/tr.js | 16 +++++++++++++++- 1 file changed, 15 insertions(+), 1 deletion(-) diff --git a/src/components/table/tr.js b/src/components/table/tr.js index 4fe6ede0fb0..98f1ec79dba 100644 --- a/src/components/table/tr.js +++ b/src/components/table/tr.js @@ -8,6 +8,9 @@ export const props = { } } +const LIGHT = 'light' +const DARK = 'dark' + // @vue/component export const BTr = /*#__PURE__*/ Vue.extend({ name: 'BTr', @@ -64,8 +67,19 @@ export const BTr = /*#__PURE__*/ Vue.extend({ // Sniffed by / return this.bvTableRowGroup.headVariant }, + footVariant() { + // Sniffed by / + return this.bvTableRowGroup.footVariant + }, + isRowDark() { + return this.headVariant === LIGHT || this.footVariant === LIGHT + ? false + : this.headVariant === DARK || this.footVariant === DARK + ? true + : this.isDark + }, trClasses() { - return [this.variant ? `${this.isDark ? 'bg' : 'table'}-${this.variant}` : null] + return [this.variant ? `${this.isRowDark ? 'bg' : 'table'}-${this.variant}` : null] }, trAttrs() { return { role: 'row', ...this.$attrs } From c663c51a79c9e6d0a615efb5eb81873bb820809c Mon Sep 17 00:00:00 2001 From: Troy Morehouse Date: Mon, 7 Oct 2019 16:14:13 -0300 Subject: [PATCH 05/12] Update package.json --- src/components/table/package.json | 16 ++++++++++++++++ 1 file changed, 16 insertions(+) diff --git a/src/components/table/package.json b/src/components/table/package.json index 3e4313a8801..cef2279b57d 100644 --- a/src/components/table/package.json +++ b/src/components/table/package.json @@ -77,10 +77,18 @@ "prop": "headVariant", "description": "Header variant: 'light' or 'dark', or unset" }, + { + "prop": "headRowVariant", + "description": "Apply a Bootstrap theme color variant to the tr element in the thead" + }, { "prop": "footVariant", "description": "Footer variant: 'light' or 'dark', or unset" }, + { + "prop": "footRowVariant", + "description": "Apply a Bootstrap theme color variant to the tr element in the tfoot. Falls back to head-row-variant" + }, { "prop": "tbodyTransitionProps", "description": "Vue 'transition-list' properties. When provided will make the tbody a Vue 'transition-list' component" @@ -981,10 +989,18 @@ "prop": "headVariant", "description": "Header variant: 'light' or 'dark', or unset" }, + { + "prop": "headRowVariant", + "description": "Apply a Bootstrap theme color variant to the tr element in the thead" + }, { "prop": "footVariant", "description": "Footer variant: 'light' or 'dark', or unset" }, + { + "prop": "footRowVariant", + "description": "Apply a Bootstrap theme color variant to the tr element in the tfoot. Falls back to head-row-variant" + }, { "prop": "tbodyTransitionProps", "description": "Vue 'transition-list' properties. When provided will make the tbody a Vue 'transition-list' component" From bb53031f6e79072c000cef4d51c9fb3481667884 Mon Sep 17 00:00:00 2001 From: Troy Morehouse Date: Mon, 7 Oct 2019 16:15:22 -0300 Subject: [PATCH 06/12] Update mixin-tfoot.js --- src/components/table/helpers/mixin-tfoot.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/components/table/helpers/mixin-tfoot.js b/src/components/table/helpers/mixin-tfoot.js index e9cd898cccb..5d3e2d7137f 100644 --- a/src/components/table/helpers/mixin-tfoot.js +++ b/src/components/table/helpers/mixin-tfoot.js @@ -12,7 +12,7 @@ export default { default: () => getComponentConfig('BTable', 'footVariant') }, footRowVariant: { - type: String, // Any Bootstrap theme variant (or custom). Falls back to headRowVariant + type: String, // Any Bootstrap theme variant (or custom). Falls back to headRowVariant default: null }, tfootClass: { From fb17bc755a152400477bcfd2580b3f6c40ee1dd2 Mon Sep 17 00:00:00 2001 From: Troy Morehouse Date: Mon, 7 Oct 2019 16:21:41 -0300 Subject: [PATCH 07/12] Update package.json --- src/components/table/package.json | 4 ++++ 1 file changed, 4 insertions(+) diff --git a/src/components/table/package.json b/src/components/table/package.json index cef2279b57d..425e6558f0e 100644 --- a/src/components/table/package.json +++ b/src/components/table/package.json @@ -79,6 +79,7 @@ }, { "prop": "headRowVariant", + "version": "2.1.0", "description": "Apply a Bootstrap theme color variant to the tr element in the thead" }, { @@ -87,6 +88,7 @@ }, { "prop": "footRowVariant", + "version": "2.1.0", "description": "Apply a Bootstrap theme color variant to the tr element in the tfoot. Falls back to head-row-variant" }, { @@ -991,6 +993,7 @@ }, { "prop": "headRowVariant", + "version": "2.1.0", "description": "Apply a Bootstrap theme color variant to the tr element in the thead" }, { @@ -999,6 +1002,7 @@ }, { "prop": "footRowVariant", + "version": "2.1.0", "description": "Apply a Bootstrap theme color variant to the tr element in the tfoot. Falls back to head-row-variant" }, { From 847b519042278f963bac2a2b1309ccdce1561c83 Mon Sep 17 00:00:00 2001 From: Troy Morehouse Date: Mon, 7 Oct 2019 16:47:35 -0300 Subject: [PATCH 08/12] Update package.json --- src/components/table/package.json | 8 ++++---- 1 file changed, 4 insertions(+), 4 deletions(-) diff --git a/src/components/table/package.json b/src/components/table/package.json index 425e6558f0e..daa966b43f9 100644 --- a/src/components/table/package.json +++ b/src/components/table/package.json @@ -75,7 +75,7 @@ }, { "prop": "headVariant", - "description": "Header variant: 'light' or 'dark', or unset" + "description": "Header variant: 'light' or 'dark', or unset. May take precedence over head-row-variant" }, { "prop": "headRowVariant", @@ -84,7 +84,7 @@ }, { "prop": "footVariant", - "description": "Footer variant: 'light' or 'dark', or unset" + "description": "Footer variant: 'light' or 'dark', or unset. May take precedence over foot-row-variant" }, { "prop": "footRowVariant", @@ -989,7 +989,7 @@ }, { "prop": "headVariant", - "description": "Header variant: 'light' or 'dark', or unset" + "description": "Header variant: 'light' or 'dark', or unset. May take precedence over head-row-variant" }, { "prop": "headRowVariant", @@ -998,7 +998,7 @@ }, { "prop": "footVariant", - "description": "Footer variant: 'light' or 'dark', or unset" + "description": "Footer variant: 'light' or 'dark', or unset. May take precedence over foot-row-variant" }, { "prop": "footRowVariant", From bc9d4d7c3fccda308109be713c15500e5907336d Mon Sep 17 00:00:00 2001 From: Troy Morehouse Date: Tue, 15 Oct 2019 13:27:20 -0300 Subject: [PATCH 09/12] Update tr.js --- src/components/table/tr.js | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/src/components/table/tr.js b/src/components/table/tr.js index 98f1ec79dba..d044393de7d 100644 --- a/src/components/table/tr.js +++ b/src/components/table/tr.js @@ -65,11 +65,11 @@ export const BTr = /*#__PURE__*/ Vue.extend({ }, headVariant() { // Sniffed by / - return this.bvTableRowGroup.headVariant + return this.inThead ? this.bvTableRowGroup.headVariant : null }, footVariant() { // Sniffed by / - return this.bvTableRowGroup.footVariant + return this.inTfoot ? this.bvTableRowGroup.footVariant : null }, isRowDark() { return this.headVariant === LIGHT || this.footVariant === LIGHT From 550ddfa8dc5236ecdd7858fd6e87856ead44a839 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Jacob=20M=C3=BCller?= Date: Tue, 15 Oct 2019 21:15:47 +0200 Subject: [PATCH 10/12] Update mixin-tfoot.js --- src/components/table/helpers/mixin-tfoot.js | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/src/components/table/helpers/mixin-tfoot.js b/src/components/table/helpers/mixin-tfoot.js index 5d3e2d7137f..c5e53f01b4c 100644 --- a/src/components/table/helpers/mixin-tfoot.js +++ b/src/components/table/helpers/mixin-tfoot.js @@ -8,11 +8,11 @@ export default { default: false }, footVariant: { - type: String, // 'dark', 'light', or null (or custom) + type: String, // 'dark', 'light', or `null` (or custom) default: () => getComponentConfig('BTable', 'footVariant') }, footRowVariant: { - type: String, // Any Bootstrap theme variant (or custom). Falls back to headRowVariant + type: String, // Any Bootstrap theme variant (or custom). Falls back to `headRowVariant` default: null }, tfootClass: { From 23512c134980cdf96360bbfda8f0e76872cdeecf Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Jacob=20M=C3=BCller?= Date: Tue, 15 Oct 2019 21:16:55 +0200 Subject: [PATCH 11/12] Update mixin-thead.js --- src/components/table/helpers/mixin-thead.js | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/src/components/table/helpers/mixin-thead.js b/src/components/table/helpers/mixin-thead.js index f932e505870..f40527a93c6 100644 --- a/src/components/table/helpers/mixin-thead.js +++ b/src/components/table/helpers/mixin-thead.js @@ -13,11 +13,11 @@ import { BTh } from '../th' export default { props: { headVariant: { - type: String, // 'light', 'dark' or null (or custom) + type: String, // 'light', 'dark' or `null` (or custom) default: () => getComponentConfig('BTable', 'headVariant') }, headRowVariant: { - type: String, // Any Bootstrap theme variant (or custom) + type: String, // Any Bootstrap theme variant (or custom) default: null }, theadClass: { From 3fd44692d55557beb56c5d32e388a2a42a6d3a1b Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Jacob=20M=C3=BCller?= Date: Tue, 15 Oct 2019 21:17:54 +0200 Subject: [PATCH 12/12] Update mixin-thead.js --- src/components/table/helpers/mixin-thead.js | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/src/components/table/helpers/mixin-thead.js b/src/components/table/helpers/mixin-thead.js index f40527a93c6..6b09047a2fd 100644 --- a/src/components/table/helpers/mixin-thead.js +++ b/src/components/table/helpers/mixin-thead.js @@ -55,12 +55,12 @@ export default { const fields = this.computedFields || [] if (this.isStackedAlways || fields.length === 0) { - // In always stacked mode, we don't bother rendering the head/foot. + // In always stacked mode, we don't bother rendering the head/foot // Or if no field headings (empty table) return h() } - // Refernce to `selectAllRows` and `clearSelected()`, if table is Selectable + // Reference to `selectAllRows` and `clearSelected()`, if table is selectable const selectAllRows = this.isSelectable ? this.selectAllRows : () => {} const clearSelected = this.isSelectable ? this.clearSelected : () => {}