diff --git a/src/components/table/helpers/mixin-tfoot.js b/src/components/table/helpers/mixin-tfoot.js index e8555d14842..c5e53f01b4c 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 diff --git a/src/components/table/helpers/mixin-thead.js b/src/components/table/helpers/mixin-thead.js index beade432335..6b09047a2fd 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' @@ -12,9 +13,13 @@ 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) + default: null + }, theadClass: { type: [String, Array, Object] // default: undefined @@ -50,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 : () => {} @@ -142,7 +147,12 @@ 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 +162,9 @@ 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( diff --git a/src/components/table/package.json b/src/components/table/package.json index 2f13112f5d4..0075b3d75a8 100644 --- a/src/components/table/package.json +++ b/src/components/table/package.json @@ -75,11 +75,21 @@ }, { "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", + "version": "2.1.0", + "description": "Apply a Bootstrap theme color variant to the tr element in the thead" }, { "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", + "version": "2.1.0", + "description": "Apply a Bootstrap theme color variant to the tr element in the tfoot. Falls back to head-row-variant" }, { "prop": "tbodyTransitionProps", @@ -989,11 +999,21 @@ }, { "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", + "version": "2.1.0", + "description": "Apply a Bootstrap theme color variant to the tr element in the thead" }, { "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", + "version": "2.1.0", + "description": "Apply a Bootstrap theme color variant to the tr element in the tfoot. Falls back to head-row-variant" }, { "prop": "tbodyTransitionProps", diff --git a/src/components/table/tr.js b/src/components/table/tr.js index 4fe6ede0fb0..d044393de7d 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', @@ -62,10 +65,21 @@ 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.inTfoot ? this.bvTableRowGroup.footVariant : null + }, + 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 }