Skip to content
Permalink
Browse files
fix(b-table, b-table-lite, b-table-simple): handle header variant for…
… sticky columns (fixes #5278) (#5279)

Co-authored-by: Jacob Müller
  • Loading branch information
tmorehouse committed Apr 30, 2020
1 parent bc199de commit 53e309e947b4710fcf8d989cc9ef0f31c58487ae
Showing 6 changed files with 25 additions and 7 deletions.
@@ -12,6 +12,9 @@ export const props = {
}
}

// TODO:
// In Bootstrap v5, we won't need "sniffing" as table element variants properly inherit
// to the child elements, so this can be converted to a functional component
// @vue/component
export const BTbody = /*#__PURE__*/ Vue.extend({
name: 'BTbody',
@@ -60,7 +63,7 @@ export const BTbody = /*#__PURE__*/ Vue.extend({
// background color inheritance with Bootstrap v4 table CSS
return !this.isStacked && this.bvTable.stickyHeader
},
tableVariant() /* istanbul ignore next: Not currently sniffed in tests */ {
tableVariant() {
// Sniffed by <b-tr> / <b-td> / <b-th>
return this.bvTable.tableVariant
},
@@ -38,6 +38,9 @@ export const props = {
}
}

// TODO:
// In Bootstrap v5, we won't need "sniffing" as table element variants properly inherit
// to the child elements, so this can be converted to a functional component
// @vue/component
export const BTd = /*#__PURE__*/ Vue.extend({
name: 'BTableCell',
@@ -104,8 +107,7 @@ export const BTd = /*#__PURE__*/ Vue.extend({
headVariant() {
return this.bvTableTr.headVariant
},
/* istanbul ignore next: need to add in tests for footer variant */
footVariant() /* istanbul ignore next: need to add in tests for footer variant */ {
footVariant() {
return this.bvTableTr.footVariant
},
tableVariant() {
@@ -120,11 +122,12 @@ export const BTd = /*#__PURE__*/ Vue.extend({
cellClasses() {
// We use computed props here for improved performance by caching
// the results of the string interpolation
// TODO: need to add handling for footVariant
let variant = this.variant
if (
(!variant && this.isStickyHeader && !this.headVariant) ||
(!variant && this.isStickyColumn)
(!variant && this.isStickyColumn && this.inTfoot && !this.footVariant) ||
(!variant && this.isStickyColumn && this.inThead && !this.headVariant) ||
(!variant && this.isStickyColumn && this.inTbody)
) {
// Needed for sticky-header mode as Bootstrap v4 table cells do
// not inherit parent's background-color. Boo!
@@ -8,6 +8,9 @@ export const props = {
}
}

// TODO:
// In Bootstrap v5, we won't need "sniffing" as table element variants properly inherit
// to the child elements, so this can be converted to a functional component
// @vue/component
export const BTfoot = /*#__PURE__*/ Vue.extend({
name: 'BTfoot',
@@ -33,7 +36,7 @@ export const BTfoot = /*#__PURE__*/ Vue.extend({
// Sniffed by <b-tr> / <b-td> / <b-th>
return true
},
isDark() /* istanbul ignore next: Not currently sniffed in tests */ {
isDark() {
// Sniffed by <b-tr> / <b-td> / <b-th>
return this.bvTable.dark
},
@@ -56,7 +59,7 @@ export const BTfoot = /*#__PURE__*/ Vue.extend({
// background color inheritance with Bootstrap v4 table CSS
return !this.isStacked && this.bvTable.stickyHeader
},
tableVariant() /* istanbul ignore next: Not currently sniffed in tests */ {
tableVariant() {
// Sniffed by <b-tr> / <b-td> / <b-th>
return this.bvTable.tableVariant
},
@@ -1,6 +1,9 @@
import Vue from '../../utils/vue'
import { BTd } from './td'

// TODO:
// In Bootstrap v5, we won't need "sniffing" as table element variants properly inherit
// to the child elements, so this can be converted to a functional component
// @vue/component
export const BTh = /*#__PURE__*/ Vue.extend({
name: 'BTh',
@@ -9,6 +9,9 @@ export const props = {
}
}

// TODO:
// In Bootstrap v5, we won't need "sniffing" as table element variants properly inherit
// to the child elements, so this can be converted to a functional component
// @vue/component
export const BThead = /*#__PURE__*/ Vue.extend({
name: 'BThead',
@@ -11,6 +11,9 @@ export const props = {
const LIGHT = 'light'
const DARK = 'dark'

// TODO:
// In Bootstrap v5, we won't need "sniffing" as table element variants properly inherit
// to the child elements, so this can be converted to a functional component
// @vue/component
export const BTr = /*#__PURE__*/ Vue.extend({
name: 'BTr',

0 comments on commit 53e309e

Please sign in to comment.