From 971ee0183d78ed9f7b8d7d31eada0c979a1184a4 Mon Sep 17 00:00:00 2001 From: Troy Morehouse Date: Mon, 11 Nov 2019 14:36:07 -0400 Subject: [PATCH 1/6] chore(b-table, b-table-lite): minor adjustment to row `key` generation --- src/components/table/helpers/mixin-tbody-row.js | 9 ++++----- 1 file changed, 4 insertions(+), 5 deletions(-) diff --git a/src/components/table/helpers/mixin-tbody-row.js b/src/components/table/helpers/mixin-tbody-row.js index ac5200c6a92..f74d624ece2 100644 --- a/src/components/table/helpers/mixin-tbody-row.js +++ b/src/components/table/helpers/mixin-tbody-row.js @@ -205,12 +205,12 @@ export default { // rows index within the tbody. // See: https://github.com/bootstrap-vue/bootstrap-vue/issues/2410 const primaryKey = this.primaryKey - const hasPkValue = primaryKey && !isUndefinedOrNull(item[primaryKey]) - const rowKey = hasPkValue ? toString(item[primaryKey]) : String(rowIndex) + const primaryKeyValue = toString(get(item, primaryKey)) || null + const rowKey = primaryKeyValue || String(rowIndex) // If primary key is provided, use it to generate a unique ID on each tbody > tr // In the format of '{tableId}__row_{primaryKeyValue}' - const rowId = hasPkValue ? this.safeId(`_row_${item[primaryKey]}`) : null + const rowId = primaryKeyValue ? this.safeId(`_row_${primaryKeyValue}`) : null // Selectable classes and attributes const selectableClasses = this.selectableRowClasses ? this.selectableRowClasses(rowIndex) : {} @@ -233,8 +233,7 @@ export default { attrs: { id: rowId, tabindex: hasRowClickHandler ? '0' : null, - 'data-pk': rowId ? String(item[primaryKey]) : null, - // Should this be `aria-details` instead? + 'data-pk': rowId || null, 'aria-details': detailsId, 'aria-owns': detailsId, 'aria-rowindex': ariaRowIndex, From 963808aa8fedc07e38cb587153c143ac12c75f72 Mon Sep 17 00:00:00 2001 From: Troy Morehouse Date: Mon, 11 Nov 2019 16:04:58 -0400 Subject: [PATCH 2/6] Update mixin-tbody-row.js --- src/components/table/helpers/mixin-tbody-row.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/components/table/helpers/mixin-tbody-row.js b/src/components/table/helpers/mixin-tbody-row.js index f74d624ece2..2a7c77b96f4 100644 --- a/src/components/table/helpers/mixin-tbody-row.js +++ b/src/components/table/helpers/mixin-tbody-row.js @@ -233,7 +233,7 @@ export default { attrs: { id: rowId, tabindex: hasRowClickHandler ? '0' : null, - 'data-pk': rowId || null, + 'data-pk': primaryKeyValue || null, 'aria-details': detailsId, 'aria-owns': detailsId, 'aria-rowindex': ariaRowIndex, From 59dfd65570ad932cde69a10e62f1bc7041859357 Mon Sep 17 00:00:00 2001 From: Troy Morehouse Date: Mon, 11 Nov 2019 16:23:34 -0400 Subject: [PATCH 3/6] Update tbody.js --- src/components/table/tbody.js | 29 ++++++++++++++++++++++------- 1 file changed, 22 insertions(+), 7 deletions(-) diff --git a/src/components/table/tbody.js b/src/components/table/tbody.js index dded142de67..8153cbfb364 100644 --- a/src/components/table/tbody.js +++ b/src/components/table/tbody.js @@ -74,18 +74,33 @@ export const BTbody = /*#__PURE__*/ Vue.extend({ }, tbodyListeners() { const handlers = this.tbodyTransitionHandlers || {} - return { ...this.$listeners, ...handlers } + return this.isTransitionGroup ? handlers : this.$listeners + }, + tbodyNativeListeners() { + return this.isTransitionGroup ? this.$listeners : {} } }, render(h) { + const data = { + props: this.tbodyProps, + attrs: this.tbodyAttrs, + // Pass down any listeners + on: this.tbodyListeners, + + nativeOn: this.tbodyNativeListeners + } + if (this.isTransitionGroup) { + // We use native listeners if a transition group + // for any delegated events + data.on = this.tbodyTransitionHandlers || {} + data.nativeOn = this.$listeners || {} + } else { + // Otherwise we place any listeners on the tbody element + data.on: this.$listeners || {} + } return h( this.isTransitionGroup ? 'transition-group' : 'tbody', - { - props: this.tbodyProps, - attrs: this.tbodyAttrs, - // Pass down any listeners - on: this.tbodyListeners - }, + data, this.normalizeSlot('default', {}) ) } From 002b7ae720c2ef5bcf895813533272f028894577 Mon Sep 17 00:00:00 2001 From: Troy Morehouse Date: Mon, 11 Nov 2019 16:28:32 -0400 Subject: [PATCH 4/6] Update tbody.js --- src/components/table/tbody.js | 15 ++------------- 1 file changed, 2 insertions(+), 13 deletions(-) diff --git a/src/components/table/tbody.js b/src/components/table/tbody.js index 8153cbfb364..7b1033ead86 100644 --- a/src/components/table/tbody.js +++ b/src/components/table/tbody.js @@ -71,23 +71,12 @@ export const BTbody = /*#__PURE__*/ Vue.extend({ }, tbodyProps() { return this.tbodyTransitionProps ? { ...this.tbodyTransitionProps, tag: 'tbody' } : {} - }, - tbodyListeners() { - const handlers = this.tbodyTransitionHandlers || {} - return this.isTransitionGroup ? handlers : this.$listeners - }, - tbodyNativeListeners() { - return this.isTransitionGroup ? this.$listeners : {} } }, render(h) { const data = { props: this.tbodyProps, - attrs: this.tbodyAttrs, - // Pass down any listeners - on: this.tbodyListeners, - - nativeOn: this.tbodyNativeListeners + attrs: this.tbodyAttrs } if (this.isTransitionGroup) { // We use native listeners if a transition group @@ -96,7 +85,7 @@ export const BTbody = /*#__PURE__*/ Vue.extend({ data.nativeOn = this.$listeners || {} } else { // Otherwise we place any listeners on the tbody element - data.on: this.$listeners || {} + data.on = this.$listeners || {} } return h( this.isTransitionGroup ? 'transition-group' : 'tbody', From ea03469fef020852dab0685c87704dd8323a6750 Mon Sep 17 00:00:00 2001 From: Troy Morehouse Date: Mon, 11 Nov 2019 16:57:34 -0400 Subject: [PATCH 5/6] Update mixin-tbody.js --- src/components/table/helpers/mixin-tbody.js | 7 +++++-- 1 file changed, 5 insertions(+), 2 deletions(-) diff --git a/src/components/table/helpers/mixin-tbody.js b/src/components/table/helpers/mixin-tbody.js index 322ada1b189..3a4fb25bed1 100644 --- a/src/components/table/helpers/mixin-tbody.js +++ b/src/components/table/helpers/mixin-tbody.js @@ -1,5 +1,5 @@ import KeyCodes from '../../../utils/key-codes' -import { arrayIncludes } from '../../../utils/array' +import { arrayIncludes, from as arrayFrom } from '../../../utils/array' import { closest, isElement } from '../../../utils/dom' import { props as tbodyProps, BTbody } from '../tbody' import filterEvent from './filter-event' @@ -23,11 +23,14 @@ export default { // Returns all the item TR elements (excludes detail and spacer rows) // `this.$refs.itemRows` is an array of item TR components/elements // Rows should all be B-TR components, but we map to TR elements + // Also note that `this.$refs.itemRows` may not always be in document order + const tbody = this.$refs.tbody.$el || this.$refs.tbody + const btrs = (this.$refs.itemRows || []).map(tr => tr.$el || tr) // TODO: This may take time for tables many rows, so we may want to cache // the result of this during each render cycle on a non-reactive // property. We clear out the cache as each render starts, and // populate it on first access of this method if null - return (this.$refs.itemRows || []).map(tr => tr.$el || tr) + return arrayFrom(tbody.children).filter(tr => arrayIncludes(btrs, tr)) }, getTbodyTrIndex(el) { // Returns index of a particular TBODY item TR From d85380b6dc4c76dd6e13fa694973e70ba86ceff0 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Jacob=20M=C3=BCller?= Date: Mon, 11 Nov 2019 22:40:13 +0100 Subject: [PATCH 6/6] Update mixin-tbody.js --- src/components/table/helpers/mixin-tbody.js | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/src/components/table/helpers/mixin-tbody.js b/src/components/table/helpers/mixin-tbody.js index 3a4fb25bed1..ae27c17dc61 100644 --- a/src/components/table/helpers/mixin-tbody.js +++ b/src/components/table/helpers/mixin-tbody.js @@ -25,12 +25,12 @@ export default { // Rows should all be B-TR components, but we map to TR elements // Also note that `this.$refs.itemRows` may not always be in document order const tbody = this.$refs.tbody.$el || this.$refs.tbody - const btrs = (this.$refs.itemRows || []).map(tr => tr.$el || tr) + const trs = (this.$refs.itemRows || []).map(tr => tr.$el || tr) // TODO: This may take time for tables many rows, so we may want to cache // the result of this during each render cycle on a non-reactive // property. We clear out the cache as each render starts, and // populate it on first access of this method if null - return arrayFrom(tbody.children).filter(tr => arrayIncludes(btrs, tr)) + return arrayFrom(tbody.children).filter(tr => arrayIncludes(trs, tr)) }, getTbodyTrIndex(el) { // Returns index of a particular TBODY item TR