Skip to content
Permalink
Browse files

perf(table): improve provide/inject performance (addresses #4155) (#4164

)
  • Loading branch information...
tmorehouse committed Sep 30, 2019
1 parent 119ceb3 commit 152fefc8638008e9d0b43c80fb512ceb8e822b78
@@ -19,16 +19,44 @@ export const BTbody = /*#__PURE__*/ Vue.extend({
inheritAttrs: false,
provide() {
return {
bvTableTbody: this
bvTableRowGroup: this
}
},
inject: {
bvTable: {
default: null
// Sniffed by <b-tr> / <b-td> / <b-th>
default() /* istanbul ignore next */ {
return {}
}
}
},
props,
computed: {
isTbody() {
// Sniffed by <b-tr> / <b-td> / <b-th>
return true
},
isDark() {
// Sniffed by <b-tr> / <b-td> / <b-th>
return this.bvTable.dark
},
isStacked() {
// Sniffed by <b-tr> / <b-td> / <b-th>
return this.bvTable.isStacked
},
isResponsive() {
// Sniffed by <b-tr> / <b-td> / <b-th>
return this.bvTable.isResponsive
},
isStickyHeader() {
// Sniffed by <b-tr> / <b-td> / <b-th>
// Sticky headers are only supported in thead
return false
},
tableVariant() /* istanbul ignore next: Not currently sniffed in tests */ {
// Sniffed by <b-tr> / <b-td> / <b-th>
return this.bvTable.tableVariant
},
isTransitionGroup() {
return this.tbodyTransitionProps || this.tbodyTransitionHandlers
},
@@ -45,21 +45,10 @@ export const BTd = /*#__PURE__*/ Vue.extend({
mixins: [normalizeSlotMixin],
inheritAttrs: false,
inject: {
// Injections for feature / attribute detection
bvTable: {
default: null
},
bvTableTbody: {
default: null
},
bvTableThead: {
default: null
},
bvTableTfoot: {
default: null
},
bvTableTr: {
default: null
default() /* istanbul ignore next */ {
return {}
}
}
},
props,
@@ -68,72 +57,82 @@ export const BTd = /*#__PURE__*/ Vue.extend({
// Overridden by <b-th>
return 'td'
},
inTbody() {
return this.bvTableTr.inTbody
},
inThead() {
return this.bvTableTr.inThead
},
inTfoot() {
return this.bvTableTr.inTfoot
},
isDark() {
return this.bvTable && this.bvTable.dark
return this.bvTableTr.isDark
},
isStacked() {
return this.bvTable && this.bvTable.isStacked
return this.bvTableTr.isStacked
},
isStackedCell() {
// We only support stacked-heading in tbody in stacked mode
return this.bvTableTbody && this.isStacked
return this.inTbody && this.isStacked
},
isResponsive() {
return this.bvTable && this.bvTable.isResponsive && !this.isStacked
return this.bvTableTr.isResponsive
},
isStickyHeader() {
// Needed to handle header background classes, due to lack of
// background color inheritance with Bootstrap v4 table CSS
// Sticky headers only apply to cells in table `thead`
return (
!this.isStacked &&
this.bvTable &&
this.bvTableThead &&
this.bvTableTr &&
this.bvTable.stickyHeader
)
return this.bvTableTr.isStickyHeader
},
isStickyColumn() {
// Needed to handle header background classes, due to lack of
// background color inheritance with Bootstrap v4 table CSS
// Sticky column cells are only available in responsive
// mode (horizontal scrolling) or when sticky header mode
// Applies to cells in `thead`, `tbody` and `tfoot`
return (
(this.isResponsive || this.isStickyHeader) &&
this.stickyColumn &&
!this.isStacked &&
this.bvTable &&
this.bvTableTr
)
return !this.isStacked && (this.isResponsive || this.isStickyHeader) && this.stickyColumn
},
rowVariant() {
return this.bvTableTr.variant
},
headVariant() {
return this.bvTableTr.headVariant
},
footVariant() /* istanbul ignore next: need to add in tests for footer variant */ {
return this.bvTableTr.footVariant
},
tableVariant() {
return this.bvTableTr.tableVariant
},
computedColspan() {
return parseSpan(this.colspan)
},
computedRowspan() {
return parseSpan(this.rowspan)
},
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.bvTableThead.headVariant) ||
(!variant && this.isStickyHeader && !this.headVariant) ||
(!variant && this.isStickyColumn)
) {
// Needed for sticky-header mode as Bootstrap v4 table cells do
// not inherit parent's background-color. Boo!
variant = this.bvTableTr.variant || this.bvTable.tableVariant || 'b-table-default'
variant = this.rowVariant || this.tableVariant || 'b-table-default'
}
return [
variant ? `${this.isDark ? 'bg' : 'table'}-${variant}` : null,
this.isStickyColumn ? 'b-table-sticky-column' : null
]
},
computedColspan() {
return parseSpan(this.colspan)
},
computedRowspan() {
return parseSpan(this.rowspan)
},
cellAttrs() {
// We use computed props here for improved performance by caching
// the results of the object spread (Object.assign)
const headOrFoot = this.bvTableThead || this.bvTableTfoot
const headOrFoot = this.inThead || this.inTfoot
// Make sure col/rowspan's are > 0 or null
const colspan = this.computedColspan
const rowspan = this.computedRowspan
@@ -15,16 +15,44 @@ export const BTfoot = /*#__PURE__*/ Vue.extend({
inheritAttrs: false,
provide() {
return {
bvTableTfoot: this
bvTableRowGroup: this
}
},
inject: {
bvTable: {
default: null
// Sniffed by <b-tr> / <b-td> / <b-th>
default() /* istanbul ignore next */ {
return {}
}
}
},
props,
computed: {
isTfoot() {
// Sniffed by <b-tr> / <b-td> / <b-th>
return true
},
isDark() /* istanbul ignore next: Not currently sniffed in tests */ {
// Sniffed by <b-tr> / <b-td> / <b-th>
return this.bvTable.dark
},
isStacked() {
// Sniffed by <b-tr> / <b-td> / <b-th>
return this.bvTable.isStacked
},
isResponsive() {
// Sniffed by <b-tr> / <b-td> / <b-th>
return this.bvTable.isResponsive
},
isStickyHeader() {
// Sniffed by <b-tr> / <b-td> / <b-th>
// Sticky headers are only supported in thead
return false
},
tableVariant() /* istanbul ignore next: Not currently sniffed in tests */ {
// Sniffed by <b-tr> / <b-td> / <b-th>
return this.bvTable.tableVariant
},
tfootClasses() {
return [this.footVariant ? `thead-${this.footVariant}` : null]
},
@@ -3,6 +3,7 @@ import normalizeSlotMixin from '../../mixins/normalize-slot'

export const props = {
headVariant: {
// Also sniffed by <b-tr> / <b-td> / <b-th>
type: String, // supported values: 'lite', 'dark', or null
default: null
}
@@ -15,16 +16,46 @@ export const BThead = /*#__PURE__*/ Vue.extend({
inheritAttrs: false,
provide() {
return {
bvTableThead: this
bvTableRowGroup: this
}
},
inject: {
bvTable: {
default: null
// Sniffed by <b-tr> / <b-td> / <b-th>
default() /* istanbul ignore next */ {
return {}
}
}
},
props,
computed: {
isThead() {
// Sniffed by <b-tr> / <b-td> / <b-th>
return true
},
isDark() {
// Sniffed by <b-tr> / <b-td> / <b-th>
return this.bvTable.dark
},
isStacked() {
// Sniffed by <b-tr> / <b-td> / <b-th>
return this.bvTable.isStacked
},
isResponsive() {
// Sniffed by <b-tr> / <b-td> / <b-th>
return this.bvTable.isResponsive
},
isStickyHeader() {
// Sniffed by <b-tr> / <b-td> / <b-th>
// Needed to handle header background classes, due to lack of
// background color inheritance with Bootstrap v4 table CSS
// Sticky headers only apply to cells in table `thead`
return !this.isStacked && this.bvTable.stickyHeader
},
tableVariant() {
// Sniffed by <b-tr> / <b-td> / <b-th>
return this.bvTable.tableVariant
},
theadClasses() {
return [this.headVariant ? `thead-${this.headVariant}` : null]
},
@@ -19,14 +19,50 @@ export const BTr = /*#__PURE__*/ Vue.extend({
}
},
inject: {
bvTable: {
default: null
bvTableRowGroup: {
defaut() /* istanbul ignore next */ {
return {}
}
}
},
props,
computed: {
inTbody() {
// Sniffed by <b-td> / <b-th>
return this.bvTableRowGroup.isTbody
},
inThead() {
// Sniffed by <b-td> / <b-th>
return this.bvTableRowGroup.isThead
},
inTfoot() {
// Sniffed by <b-td> / <b-th>
return this.bvTableRowGroup.isTfoot
},
isDark() {
return this.bvTable && this.bvTable.dark
// Sniffed by <b-td> / <b-th>
return this.bvTableRowGroup.isDark
},
isStacked() {
// Sniffed by <b-td> / <b-th>
return this.bvTableRowGroup.isStacked
},
isResponsive() {
// Sniffed by <b-td> / <b-th>
return this.bvTableRowGroup.isResponsive
},
isStickyHeader() {
// Sniffed by <b-td> / <b-th>
// Sticky headers are only supported in thead
return this.bvTableRowGroup.isStickyHeader
},
tableVariant() {
// Sniffed by <b-td> / <b-th>
return this.bvTableRowGroup.tableVariant
},
headVariant() {
// Sniffed by <b-td> / <b-th>
return this.bvTableRowGroup.headVariant
},
trClasses() {
return [this.variant ? `${this.isDark ? 'bg' : 'table'}-${this.variant}` : null]

0 comments on commit 152fefc

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