Skip to content

Commit 152fefc

Browse files
tmorehousetmorehouse
authored
perf(table): improve provide/inject performance (addresses #4155) (#4164)
1 parent 119ceb3 commit 152fefc

File tree

5 files changed

+172
-50
lines changed

5 files changed

+172
-50
lines changed

‎src/components/table/tbody.js

Lines changed: 30 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -19,16 +19,44 @@ export const BTbody = /*#__PURE__*/ Vue.extend({
1919
inheritAttrs: false,
2020
provide() {
2121
return {
22-
bvTableTbody: this
22+
bvTableRowGroup: this
2323
}
2424
},
2525
inject: {
2626
bvTable: {
27-
default: null
27+
// Sniffed by <b-tr> / <b-td> / <b-th>
28+
default() /* istanbul ignore next */ {
29+
return {}
30+
}
2831
}
2932
},
3033
props,
3134
computed: {
35+
isTbody() {
36+
// Sniffed by <b-tr> / <b-td> / <b-th>
37+
return true
38+
},
39+
isDark() {
40+
// Sniffed by <b-tr> / <b-td> / <b-th>
41+
return this.bvTable.dark
42+
},
43+
isStacked() {
44+
// Sniffed by <b-tr> / <b-td> / <b-th>
45+
return this.bvTable.isStacked
46+
},
47+
isResponsive() {
48+
// Sniffed by <b-tr> / <b-td> / <b-th>
49+
return this.bvTable.isResponsive
50+
},
51+
isStickyHeader() {
52+
// Sniffed by <b-tr> / <b-td> / <b-th>
53+
// Sticky headers are only supported in thead
54+
return false
55+
},
56+
tableVariant() /* istanbul ignore next: Not currently sniffed in tests */ {
57+
// Sniffed by <b-tr> / <b-td> / <b-th>
58+
return this.bvTable.tableVariant
59+
},
3260
isTransitionGroup() {
3361
return this.tbodyTransitionProps || this.tbodyTransitionHandlers
3462
},

‎src/components/table/td.js

Lines changed: 40 additions & 41 deletions
Original file line numberDiff line numberDiff line change
@@ -45,21 +45,10 @@ export const BTd = /*#__PURE__*/ Vue.extend({
4545
mixins: [normalizeSlotMixin],
4646
inheritAttrs: false,
4747
inject: {
48-
// Injections for feature / attribute detection
49-
bvTable: {
50-
default: null
51-
},
52-
bvTableTbody: {
53-
default: null
54-
},
55-
bvTableThead: {
56-
default: null
57-
},
58-
bvTableTfoot: {
59-
default: null
60-
},
6148
bvTableTr: {
62-
default: null
49+
default() /* istanbul ignore next */ {
50+
return {}
51+
}
6352
}
6453
},
6554
props,
@@ -68,72 +57,82 @@ export const BTd = /*#__PURE__*/ Vue.extend({
6857
// Overridden by <b-th>
6958
return 'td'
7059
},
60+
inTbody() {
61+
return this.bvTableTr.inTbody
62+
},
63+
inThead() {
64+
return this.bvTableTr.inThead
65+
},
66+
inTfoot() {
67+
return this.bvTableTr.inTfoot
68+
},
7169
isDark() {
72-
return this.bvTable && this.bvTable.dark
70+
return this.bvTableTr.isDark
7371
},
7472
isStacked() {
75-
return this.bvTable && this.bvTable.isStacked
73+
return this.bvTableTr.isStacked
7674
},
7775
isStackedCell() {
7876
// We only support stacked-heading in tbody in stacked mode
79-
return this.bvTableTbody && this.isStacked
77+
return this.inTbody && this.isStacked
8078
},
8179
isResponsive() {
82-
return this.bvTable && this.bvTable.isResponsive && !this.isStacked
80+
return this.bvTableTr.isResponsive
8381
},
8482
isStickyHeader() {
8583
// Needed to handle header background classes, due to lack of
8684
// background color inheritance with Bootstrap v4 table CSS
8785
// Sticky headers only apply to cells in table `thead`
88-
return (
89-
!this.isStacked &&
90-
this.bvTable &&
91-
this.bvTableThead &&
92-
this.bvTableTr &&
93-
this.bvTable.stickyHeader
94-
)
86+
return this.bvTableTr.isStickyHeader
9587
},
9688
isStickyColumn() {
9789
// Needed to handle header background classes, due to lack of
9890
// background color inheritance with Bootstrap v4 table CSS
9991
// Sticky column cells are only available in responsive
10092
// mode (horizontal scrolling) or when sticky header mode
10193
// Applies to cells in `thead`, `tbody` and `tfoot`
102-
return (
103-
(this.isResponsive || this.isStickyHeader) &&
104-
this.stickyColumn &&
105-
!this.isStacked &&
106-
this.bvTable &&
107-
this.bvTableTr
108-
)
94+
return !this.isStacked && (this.isResponsive || this.isStickyHeader) && this.stickyColumn
95+
},
96+
rowVariant() {
97+
return this.bvTableTr.variant
98+
},
99+
headVariant() {
100+
return this.bvTableTr.headVariant
101+
},
102+
footVariant() /* istanbul ignore next: need to add in tests for footer variant */ {
103+
return this.bvTableTr.footVariant
104+
},
105+
tableVariant() {
106+
return this.bvTableTr.tableVariant
107+
},
108+
computedColspan() {
109+
return parseSpan(this.colspan)
110+
},
111+
computedRowspan() {
112+
return parseSpan(this.rowspan)
109113
},
110114
cellClasses() {
111115
// We use computed props here for improved performance by caching
112116
// the results of the string interpolation
117+
// TODO: need to add handling for footVariant
113118
let variant = this.variant
114119
if (
115-
(!variant && this.isStickyHeader && !this.bvTableThead.headVariant) ||
120+
(!variant && this.isStickyHeader && !this.headVariant) ||
116121
(!variant && this.isStickyColumn)
117122
) {
118123
// Needed for sticky-header mode as Bootstrap v4 table cells do
119124
// not inherit parent's background-color. Boo!
120-
variant = this.bvTableTr.variant || this.bvTable.tableVariant || 'b-table-default'
125+
variant = this.rowVariant || this.tableVariant || 'b-table-default'
121126
}
122127
return [
123128
variant ? `${this.isDark ? 'bg' : 'table'}-${variant}` : null,
124129
this.isStickyColumn ? 'b-table-sticky-column' : null
125130
]
126131
},
127-
computedColspan() {
128-
return parseSpan(this.colspan)
129-
},
130-
computedRowspan() {
131-
return parseSpan(this.rowspan)
132-
},
133132
cellAttrs() {
134133
// We use computed props here for improved performance by caching
135134
// the results of the object spread (Object.assign)
136-
const headOrFoot = this.bvTableThead || this.bvTableTfoot
135+
const headOrFoot = this.inThead || this.inTfoot
137136
// Make sure col/rowspan's are > 0 or null
138137
const colspan = this.computedColspan
139138
const rowspan = this.computedRowspan

‎src/components/table/tfoot.js

Lines changed: 30 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -15,16 +15,44 @@ export const BTfoot = /*#__PURE__*/ Vue.extend({
1515
inheritAttrs: false,
1616
provide() {
1717
return {
18-
bvTableTfoot: this
18+
bvTableRowGroup: this
1919
}
2020
},
2121
inject: {
2222
bvTable: {
23-
default: null
23+
// Sniffed by <b-tr> / <b-td> / <b-th>
24+
default() /* istanbul ignore next */ {
25+
return {}
26+
}
2427
}
2528
},
2629
props,
2730
computed: {
31+
isTfoot() {
32+
// Sniffed by <b-tr> / <b-td> / <b-th>
33+
return true
34+
},
35+
isDark() /* istanbul ignore next: Not currently sniffed in tests */ {
36+
// Sniffed by <b-tr> / <b-td> / <b-th>
37+
return this.bvTable.dark
38+
},
39+
isStacked() {
40+
// Sniffed by <b-tr> / <b-td> / <b-th>
41+
return this.bvTable.isStacked
42+
},
43+
isResponsive() {
44+
// Sniffed by <b-tr> / <b-td> / <b-th>
45+
return this.bvTable.isResponsive
46+
},
47+
isStickyHeader() {
48+
// Sniffed by <b-tr> / <b-td> / <b-th>
49+
// Sticky headers are only supported in thead
50+
return false
51+
},
52+
tableVariant() /* istanbul ignore next: Not currently sniffed in tests */ {
53+
// Sniffed by <b-tr> / <b-td> / <b-th>
54+
return this.bvTable.tableVariant
55+
},
2856
tfootClasses() {
2957
return [this.footVariant ? `thead-${this.footVariant}` : null]
3058
},

‎src/components/table/thead.js

Lines changed: 33 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -3,6 +3,7 @@ import normalizeSlotMixin from '../../mixins/normalize-slot'
33

44
export const props = {
55
headVariant: {
6+
// Also sniffed by <b-tr> / <b-td> / <b-th>
67
type: String, // supported values: 'lite', 'dark', or null
78
default: null
89
}
@@ -15,16 +16,46 @@ export const BThead = /*#__PURE__*/ Vue.extend({
1516
inheritAttrs: false,
1617
provide() {
1718
return {
18-
bvTableThead: this
19+
bvTableRowGroup: this
1920
}
2021
},
2122
inject: {
2223
bvTable: {
23-
default: null
24+
// Sniffed by <b-tr> / <b-td> / <b-th>
25+
default() /* istanbul ignore next */ {
26+
return {}
27+
}
2428
}
2529
},
2630
props,
2731
computed: {
32+
isThead() {
33+
// Sniffed by <b-tr> / <b-td> / <b-th>
34+
return true
35+
},
36+
isDark() {
37+
// Sniffed by <b-tr> / <b-td> / <b-th>
38+
return this.bvTable.dark
39+
},
40+
isStacked() {
41+
// Sniffed by <b-tr> / <b-td> / <b-th>
42+
return this.bvTable.isStacked
43+
},
44+
isResponsive() {
45+
// Sniffed by <b-tr> / <b-td> / <b-th>
46+
return this.bvTable.isResponsive
47+
},
48+
isStickyHeader() {
49+
// Sniffed by <b-tr> / <b-td> / <b-th>
50+
// Needed to handle header background classes, due to lack of
51+
// background color inheritance with Bootstrap v4 table CSS
52+
// Sticky headers only apply to cells in table `thead`
53+
return !this.isStacked && this.bvTable.stickyHeader
54+
},
55+
tableVariant() {
56+
// Sniffed by <b-tr> / <b-td> / <b-th>
57+
return this.bvTable.tableVariant
58+
},
2859
theadClasses() {
2960
return [this.headVariant ? `thead-${this.headVariant}` : null]
3061
},

‎src/components/table/tr.js

Lines changed: 39 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -19,14 +19,50 @@ export const BTr = /*#__PURE__*/ Vue.extend({
1919
}
2020
},
2121
inject: {
22-
bvTable: {
23-
default: null
22+
bvTableRowGroup: {
23+
defaut() /* istanbul ignore next */ {
24+
return {}
25+
}
2426
}
2527
},
2628
props,
2729
computed: {
30+
inTbody() {
31+
// Sniffed by <b-td> / <b-th>
32+
return this.bvTableRowGroup.isTbody
33+
},
34+
inThead() {
35+
// Sniffed by <b-td> / <b-th>
36+
return this.bvTableRowGroup.isThead
37+
},
38+
inTfoot() {
39+
// Sniffed by <b-td> / <b-th>
40+
return this.bvTableRowGroup.isTfoot
41+
},
2842
isDark() {
29-
return this.bvTable && this.bvTable.dark
43+
// Sniffed by <b-td> / <b-th>
44+
return this.bvTableRowGroup.isDark
45+
},
46+
isStacked() {
47+
// Sniffed by <b-td> / <b-th>
48+
return this.bvTableRowGroup.isStacked
49+
},
50+
isResponsive() {
51+
// Sniffed by <b-td> / <b-th>
52+
return this.bvTableRowGroup.isResponsive
53+
},
54+
isStickyHeader() {
55+
// Sniffed by <b-td> / <b-th>
56+
// Sticky headers are only supported in thead
57+
return this.bvTableRowGroup.isStickyHeader
58+
},
59+
tableVariant() {
60+
// Sniffed by <b-td> / <b-th>
61+
return this.bvTableRowGroup.tableVariant
62+
},
63+
headVariant() {
64+
// Sniffed by <b-td> / <b-th>
65+
return this.bvTableRowGroup.headVariant
3066
},
3167
trClasses() {
3268
return [this.variant ? `${this.isDark ? 'bg' : 'table'}-${this.variant}` : null]

0 commit comments

Comments
 (0)