+62
-12
lines changedFilter options
+62
-12
lines changed Original file line number Diff line number Diff line change
@@ -8,9 +8,13 @@ export default {
8 8
default: false
9 9
},
10 10
footVariant: {
11 -
type: String,
11 +
type: String, // 'dark', 'light', or `null` (or custom)
12 12
default: () => getComponentConfig('BTable', 'footVariant')
13 13
},
14 +
footRowVariant: {
15 +
type: String, // Any Bootstrap theme variant (or custom). Falls back to `headRowVariant`
16 +
default: null
17 +
},
14 18
tfootClass: {
15 19
type: [String, Array, Object],
16 20
default: null
@@ -2,6 +2,7 @@ import KeyCodes from '../../../utils/key-codes'
2 2
import startCase from '../../../utils/startcase'
3 3
import { getComponentConfig } from '../../../utils/config'
4 4
import { htmlOrText } from '../../../utils/html'
5 +
import { isUndefinedOrNull } from '../../../utils/inspect'
5 6
import filterEvent from './filter-event'
6 7
import textSelectionActive from './text-selection-active'
7 8
import { BThead } from '../thead'
@@ -12,9 +13,13 @@ import { BTh } from '../th'
12 13
export default {
13 14
props: {
14 15
headVariant: {
15 -
type: String, // 'light', 'dark' or null (or custom)
16 +
type: String, // 'light', 'dark' or `null` (or custom)
16 17
default: () => getComponentConfig('BTable', 'headVariant')
17 18
},
19 +
headRowVariant: {
20 +
type: String, // Any Bootstrap theme variant (or custom)
21 +
default: null
22 +
},
18 23
theadClass: {
19 24
type: [String, Array, Object]
20 25
// default: undefined
@@ -50,12 +55,12 @@ export default {
50 55
const fields = this.computedFields || []
51 56 52 57
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
54 59
// Or if no field headings (empty table)
55 60
return h()
56 61
}
57 62 58 -
// Refernce to `selectAllRows` and `clearSelected()`, if table is Selectable
63 +
// Reference to `selectAllRows` and `clearSelected()`, if table is selectable
59 64
const selectAllRows = this.isSelectable ? this.selectAllRows : () => {}
60 65
const clearSelected = this.isSelectable ? this.clearSelected : () => {}
61 66
@@ -142,7 +147,12 @@ export default {
142 147
// Genrate the row(s)
143 148
const $trs = []
144 149
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))
146 156
} else {
147 157
const scope = {
148 158
columns: fields.length,
@@ -152,7 +162,9 @@ export default {
152 162
clearSelected
153 163
}
154 164
$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 +
)
156 168
}
157 169 158 170
return h(
@@ -75,11 +75,21 @@
75 75
},
76 76
{
77 77
"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"
79 84
},
80 85
{
81 86
"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"
83 93
},
84 94
{
85 95
"prop": "tbodyTransitionProps",
@@ -989,11 +999,21 @@
989 999
},
990 1000
{
991 1001
"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"
993 1008
},
994 1009
{
995 1010
"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"
997 1017
},
998 1018
{
999 1019
"prop": "tbodyTransitionProps",
@@ -8,6 +8,9 @@ export const props = {
8 8
}
9 9
}
10 10 11 +
const LIGHT = 'light'
12 +
const DARK = 'dark'
13 + 11 14
// @vue/component
12 15
export const BTr = /*#__PURE__*/ Vue.extend({
13 16
name: 'BTr',
@@ -62,10 +65,21 @@ export const BTr = /*#__PURE__*/ Vue.extend({
62 65
},
63 66
headVariant() {
64 67
// 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
66 80
},
67 81
trClasses() {
68 -
return [this.variant ? `${this.isDark ? 'bg' : 'table'}-${this.variant}` : null]
82 +
return [this.variant ? `${this.isRowDark ? 'bg' : 'table'}-${this.variant}` : null]
69 83
},
70 84
trAttrs() {
71 85
return { role: 'row', ...this.$attrs }
You can’t perform that action at this time.
RetroSearch is an open source project built by @garambo | Open a GitHub Issue
Search and Browse the WWW like it's 1997 | Search results from DuckDuckGo
HTML:
3.2
| Encoding:
UTF-8
| Version:
0.7.4