Skip to content
Permalink
Browse files

feat(b-table, b-table-lite): add in head/foot row variant prop (addre…

…sses #4215) (#4216)
  • Loading branch information
tmorehouse committed Oct 15, 2019
1 parent 1a3e6a5 commit b222c7c01434ef073c54c55f7044c7ce0b9e4325
@@ -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
@@ -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(
@@ -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",
@@ -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 <b-td> / <b-th>
return this.bvTableRowGroup.headVariant
return this.inThead ? this.bvTableRowGroup.headVariant : null
},
footVariant() {
// Sniffed by <b-td> / <b-th>
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 }

0 comments on commit b222c7c

Please sign in to comment.
You can’t perform that action at this time.