Skip to content

Commit b222c7c

Browse files
tmorehousetmorehouse
authored
feat(b-table, b-table-lite): add in head/foot row variant prop (addresses #4215) (#4216)
1 parent 1a3e6a5 commit b222c7c

File tree

4 files changed

+62
-12
lines changed

4 files changed

+62
-12
lines changed

‎src/components/table/helpers/mixin-tfoot.js

Lines changed: 5 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -8,9 +8,13 @@ export default {
88
default: false
99
},
1010
footVariant: {
11-
type: String,
11+
type: String, // 'dark', 'light', or `null` (or custom)
1212
default: () => getComponentConfig('BTable', 'footVariant')
1313
},
14+
footRowVariant: {
15+
type: String, // Any Bootstrap theme variant (or custom). Falls back to `headRowVariant`
16+
default: null
17+
},
1418
tfootClass: {
1519
type: [String, Array, Object],
1620
default: null

‎src/components/table/helpers/mixin-thead.js

Lines changed: 17 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -2,6 +2,7 @@ import KeyCodes from '../../../utils/key-codes'
22
import startCase from '../../../utils/startcase'
33
import { getComponentConfig } from '../../../utils/config'
44
import { htmlOrText } from '../../../utils/html'
5+
import { isUndefinedOrNull } from '../../../utils/inspect'
56
import filterEvent from './filter-event'
67
import textSelectionActive from './text-selection-active'
78
import { BThead } from '../thead'
@@ -12,9 +13,13 @@ import { BTh } from '../th'
1213
export default {
1314
props: {
1415
headVariant: {
15-
type: String, // 'light', 'dark' or null (or custom)
16+
type: String, // 'light', 'dark' or `null` (or custom)
1617
default: () => getComponentConfig('BTable', 'headVariant')
1718
},
19+
headRowVariant: {
20+
type: String, // Any Bootstrap theme variant (or custom)
21+
default: null
22+
},
1823
theadClass: {
1924
type: [String, Array, Object]
2025
// default: undefined
@@ -50,12 +55,12 @@ export default {
5055
const fields = this.computedFields || []
5156

5257
if (this.isStackedAlways || fields.length === 0) {
53-
// In always stacked mode, we don't bother rendering the head/foot.
58+
// In always stacked mode, we don't bother rendering the head/foot
5459
// Or if no field headings (empty table)
5560
return h()
5661
}
5762

58-
// Refernce to `selectAllRows` and `clearSelected()`, if table is Selectable
63+
// Reference to `selectAllRows` and `clearSelected()`, if table is selectable
5964
const selectAllRows = this.isSelectable ? this.selectAllRows : () => {}
6065
const clearSelected = this.isSelectable ? this.clearSelected : () => {}
6166

@@ -142,7 +147,12 @@ export default {
142147
// Genrate the row(s)
143148
const $trs = []
144149
if (isFoot) {
145-
$trs.push(h(BTr, { class: this.tfootTrClass }, $cells))
150+
const trProps = {
151+
variant: isUndefinedOrNull(this.footRowVariant)
152+
? this.headRowVariant
153+
: this.footRowVariant
154+
}
155+
$trs.push(h(BTr, { class: this.tfootTrClass, props: trProps }, $cells))
146156
} else {
147157
const scope = {
148158
columns: fields.length,
@@ -152,7 +162,9 @@ export default {
152162
clearSelected
153163
}
154164
$trs.push(this.normalizeSlot('thead-top', scope) || h())
155-
$trs.push(h(BTr, { class: this.theadTrClass }, $cells))
165+
$trs.push(
166+
h(BTr, { class: this.theadTrClass, props: { variant: this.headRowVariant } }, $cells)
167+
)
156168
}
157169

158170
return h(

‎src/components/table/package.json

Lines changed: 24 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -75,11 +75,21 @@
7575
},
7676
{
7777
"prop": "headVariant",
78-
"description": "Header variant: 'light' or 'dark', or unset"
78+
"description": "Header variant: 'light' or 'dark', or unset. May take precedence over head-row-variant"
79+
},
80+
{
81+
"prop": "headRowVariant",
82+
"version": "2.1.0",
83+
"description": "Apply a Bootstrap theme color variant to the tr element in the thead"
7984
},
8085
{
8186
"prop": "footVariant",
82-
"description": "Footer variant: 'light' or 'dark', or unset"
87+
"description": "Footer variant: 'light' or 'dark', or unset. May take precedence over foot-row-variant"
88+
},
89+
{
90+
"prop": "footRowVariant",
91+
"version": "2.1.0",
92+
"description": "Apply a Bootstrap theme color variant to the tr element in the tfoot. Falls back to head-row-variant"
8393
},
8494
{
8595
"prop": "tbodyTransitionProps",
@@ -989,11 +999,21 @@
989999
},
9901000
{
9911001
"prop": "headVariant",
992-
"description": "Header variant: 'light' or 'dark', or unset"
1002+
"description": "Header variant: 'light' or 'dark', or unset. May take precedence over head-row-variant"
1003+
},
1004+
{
1005+
"prop": "headRowVariant",
1006+
"version": "2.1.0",
1007+
"description": "Apply a Bootstrap theme color variant to the tr element in the thead"
9931008
},
9941009
{
9951010
"prop": "footVariant",
996-
"description": "Footer variant: 'light' or 'dark', or unset"
1011+
"description": "Footer variant: 'light' or 'dark', or unset. May take precedence over foot-row-variant"
1012+
},
1013+
{
1014+
"prop": "footRowVariant",
1015+
"version": "2.1.0",
1016+
"description": "Apply a Bootstrap theme color variant to the tr element in the tfoot. Falls back to head-row-variant"
9971017
},
9981018
{
9991019
"prop": "tbodyTransitionProps",

‎src/components/table/tr.js

Lines changed: 16 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -8,6 +8,9 @@ export const props = {
88
}
99
}
1010

11+
const LIGHT = 'light'
12+
const DARK = 'dark'
13+
1114
// @vue/component
1215
export const BTr = /*#__PURE__*/ Vue.extend({
1316
name: 'BTr',
@@ -62,10 +65,21 @@ export const BTr = /*#__PURE__*/ Vue.extend({
6265
},
6366
headVariant() {
6467
// Sniffed by <b-td> / <b-th>
65-
return this.bvTableRowGroup.headVariant
68+
return this.inThead ? this.bvTableRowGroup.headVariant : null
69+
},
70+
footVariant() {
71+
// Sniffed by <b-td> / <b-th>
72+
return this.inTfoot ? this.bvTableRowGroup.footVariant : null
73+
},
74+
isRowDark() {
75+
return this.headVariant === LIGHT || this.footVariant === LIGHT
76+
? false
77+
: this.headVariant === DARK || this.footVariant === DARK
78+
? true
79+
: this.isDark
6680
},
6781
trClasses() {
68-
return [this.variant ? `${this.isDark ? 'bg' : 'table'}-${this.variant}` : null]
82+
return [this.variant ? `${this.isRowDark ? 'bg' : 'table'}-${this.variant}` : null]
6983
},
7084
trAttrs() {
7185
return { role: 'row', ...this.$attrs }

0 commit comments

Comments
 (0)