@gitlab/ui 132.0.1 → 132.0.3

package/dist/vendor/bootstrap-vue/src/components/table/helpers/mixin-tbody-row.js

@@ -0,0 +1,349 @@
+import { extend, REF_FOR_KEY } from '../../../vue';
+import { EVENT_NAME_ROW_HOVERED, EVENT_NAME_ROW_UNHOVERED, EVENT_NAME_ROW_CLICKED } from '../../../constants/events';
+import { PROP_TYPE_ARRAY, PROP_TYPE_OBJECT, PROP_TYPE_STRING, PROP_TYPE_FUNCTION } from '../../../constants/props';
+import { SLOT_NAME_ROW_DETAILS } from '../../../constants/slots';
+import { useParentMixin } from '../../../mixins/use-parent';
+import { get } from '../../../utils/get';
+import { isFunction, isString, isUndefinedOrNull } from '../../../utils/inspect';
+import { safeVueInstance } from '../../../utils/safe-vue-instance';
+import { toString } from '../../../utils/string';
+import { BTr } from '../tr';
+import { BTd } from '../td';
+import { BTh } from '../th';
+import { FIELD_KEY_SHOW_DETAILS, FIELD_KEY_CELL_VARIANT, FIELD_KEY_ROW_VARIANT } from './constants';
+
+// --- Props ---
+
+const props = {
+  detailsTdClass: {
+    type: [PROP_TYPE_ARRAY, PROP_TYPE_OBJECT, PROP_TYPE_STRING],
+    required: false,
+    default: undefined
+  },
+  tbodyTrAttr: {
+    type: [PROP_TYPE_OBJECT, PROP_TYPE_FUNCTION],
+    required: false,
+    default: undefined
+  },
+  tbodyTrClass: {
+    type: [PROP_TYPE_ARRAY, PROP_TYPE_OBJECT, PROP_TYPE_STRING, PROP_TYPE_FUNCTION],
+    required: false,
+    default: undefined
+  }
+};
+
+// --- Mixin ---
+
+// @vue/component
+const tbodyRowMixin = extend({
+  mixins: [useParentMixin],
+  props,
+  methods: {
+    // Methods for computing classes, attributes and styles for table cells
+    getTdValues(item, key, tdValue, defaultValue) {
+      const {
+        bvParent
+      } = this;
+      if (tdValue) {
+        const value = get(item, key, '');
+        if (isFunction(tdValue)) {
+          return tdValue(value, key, item);
+        } else if (isString(tdValue) && isFunction(bvParent[tdValue])) {
+          return bvParent[tdValue](value, key, item);
+        }
+        return tdValue;
+      }
+      return defaultValue;
+    },
+    getThValues(item, key, thValue, type, defaultValue) {
+      const {
+        bvParent
+      } = this;
+      if (thValue) {
+        const value = get(item, key, '');
+        if (isFunction(thValue)) {
+          return thValue(value, key, item, type);
+        } else if (isString(thValue) && isFunction(bvParent[thValue])) {
+          return bvParent[thValue](value, key, item, type);
+        }
+        return thValue;
+      }
+      return defaultValue;
+    },
+    // Method to get the value for a field
+    getFormattedValue(item, field) {
+      const {
+        key
+      } = field;
+      const formatter = this.getFieldFormatter(key);
+      let value = get(item, key, null);
+      if (isFunction(formatter)) {
+        value = formatter(value, key, item);
+      }
+      return isUndefinedOrNull(value) ? '' : value;
+    },
+    // Factory function methods
+    toggleDetailsFactory(hasDetailsSlot, item) {
+      // Returns a function to toggle a row's details slot
+      return () => {
+        if (hasDetailsSlot) {
+          this.$set(item, FIELD_KEY_SHOW_DETAILS, !item[FIELD_KEY_SHOW_DETAILS]);
+        }
+      };
+    },
+    // Row event handlers
+    rowHovered(event) {
+      // `mouseenter` handler (non-bubbling)
+      // `this.tbodyRowEventStopped` from tbody mixin
+      if (!this.tbodyRowEventStopped(event)) {
+        // `this.emitTbodyRowEvent` from tbody mixin
+        this.emitTbodyRowEvent(EVENT_NAME_ROW_HOVERED, event);
+      }
+    },
+    rowUnhovered(event) {
+      // `mouseleave` handler (non-bubbling)
+      // `this.tbodyRowEventStopped` from tbody mixin
+      if (!this.tbodyRowEventStopped(event)) {
+        // `this.emitTbodyRowEvent` from tbody mixin
+        this.emitTbodyRowEvent(EVENT_NAME_ROW_UNHOVERED, event);
+      }
+    },
+    // Renders a TD or TH for a row's field
+    renderTbodyRowCell(field, colIndex, item, rowIndex) {
+      const {
+        isStacked
+      } = this;
+      const {
+        key,
+        label,
+        isRowHeader
+      } = field;
+      const h = this.$createElement;
+      const hasDetailsSlot = this.hasNormalizedSlot(SLOT_NAME_ROW_DETAILS);
+      const formatted = this.getFormattedValue(item, field);
+      const stickyColumn = !isStacked && (this.isResponsive || this.stickyHeader) && field.stickyColumn;
+      // We only uses the helper components for sticky columns to
+      // improve performance of BTable/BTableLite by reducing the
+      // total number of vue instances created during render
+      const cellTag = stickyColumn ? isRowHeader ? BTh : BTd : isRowHeader ? 'th' : 'td';
+      const cellVariant = item[FIELD_KEY_CELL_VARIANT] && item[FIELD_KEY_CELL_VARIANT][key] ? item[FIELD_KEY_CELL_VARIANT][key] : field.variant || null;
+      const data = {
+        // For the Vue key, we concatenate the column index and
+        // field key (as field keys could be duplicated)
+        // TODO: Although we do prevent duplicate field keys...
+        //   So we could change this to: `row-${rowIndex}-cell-${key}`
+        class: [field.class ? field.class : '', this.getTdValues(item, key, field.tdClass, '')],
+        props: {},
+        attrs: {
+          'aria-colindex': String(colIndex + 1),
+          ...(isRowHeader ? this.getThValues(item, key, field.thAttr, 'row', {}) : this.getTdValues(item, key, field.tdAttr, {}))
+        },
+        key: `row-${rowIndex}-cell-${colIndex}-${key}`
+      };
+      if (stickyColumn) {
+        // We are using the helper BTd or BTh
+        data.props = {
+          stackedHeading: isStacked ? label : null,
+          stickyColumn: true,
+          variant: cellVariant
+        };
+      } else {
+        // Using native TD or TH element, so we need to
+        // add in the attributes and variant class
+        data.attrs['data-label'] = isStacked && !isUndefinedOrNull(label) ? toString(label) : null;
+        data.attrs.role = isRowHeader ? 'rowheader' : 'cell';
+        data.attrs.scope = isRowHeader ? 'row' : null;
+        // Add in the variant class
+        if (cellVariant) {
+          data.class.push(`${this.dark ? 'bg' : 'table'}-${cellVariant}`);
+        }
+      }
+      const slotScope = {
+        item,
+        index: rowIndex,
+        field,
+        unformatted: get(item, key, ''),
+        value: formatted,
+        toggleDetails: this.toggleDetailsFactory(hasDetailsSlot, item),
+        detailsShowing: Boolean(item[FIELD_KEY_SHOW_DETAILS])
+      };
+      // If table supports selectable mode, then add in the following scope
+      // this.supportsSelectableRows will be undefined if mixin isn't loaded
+      if (safeVueInstance(this).supportsSelectableRows) {
+        slotScope.rowSelected = this.isRowSelected(rowIndex);
+        slotScope.selectRow = () => this.selectRow(rowIndex);
+        slotScope.unselectRow = () => this.unselectRow(rowIndex);
+      }
+
+      // The new `v-slot` syntax doesn't like a slot name starting with
+      // a square bracket and if using in-document HTML templates, the
+      // v-slot attributes are lower-cased by the browser.
+      // Switched to round bracket syntax to prevent confusion with
+      // dynamic slot name syntax.
+      // We look for slots in this order: `cell(${key})`, `cell(${key.toLowerCase()})`, 'cell()'
+      // Slot names are now cached by mixin tbody in `this.$_bodyFieldSlotNameCache`
+      // Will be `null` if no slot (or fallback slot) exists
+      const slotName = this.$_bodyFieldSlotNameCache[key];
+      let $childNodes = slotName ? this.normalizeSlot(slotName, slotScope) : toString(formatted);
+      if (this.isStacked) {
+        // We wrap in a DIV to ensure rendered as a single cell when visually stacked!
+        $childNodes = [h('div', [$childNodes])];
+      }
+
+      // Render either a td or th cell
+      return h(cellTag, data, [$childNodes]);
+    },
+    // Renders an item's row (or rows if details supported)
+    renderTbodyRow(item, rowIndex) {
+      const {
+        computedFields: fields,
+        striped,
+        primaryKey,
+        currentPage,
+        perPage,
+        tbodyTrClass,
+        tbodyTrAttr,
+        hasSelectableRowClick
+      } = safeVueInstance(this);
+      const h = this.$createElement;
+      const hasDetailsSlot = this.hasNormalizedSlot(SLOT_NAME_ROW_DETAILS);
+      const rowShowDetails = item[FIELD_KEY_SHOW_DETAILS] && hasDetailsSlot;
+      const hasRowClickHandler = this.$listeners[EVENT_NAME_ROW_CLICKED] || hasSelectableRowClick;
+
+      // We can return more than one TR if rowDetails enabled
+      const $rows = [];
+
+      // Details ID needed for `aria-details` when details showing
+      // We set it to `null` when not showing so that attribute
+      // does not appear on the element
+      const detailsId = rowShowDetails ? this.safeId(`_details_${rowIndex}_`) : null;
+
+      // For each item data field in row
+      const $tds = fields.map((field, colIndex) => {
+        return this.renderTbodyRowCell(field, colIndex, item, rowIndex);
+      });
+
+      // Calculate the row number in the dataset (indexed from 1)
+      let ariaRowIndex = null;
+      if (currentPage && perPage && perPage > 0) {
+        ariaRowIndex = String((currentPage - 1) * perPage + rowIndex + 1);
+      }
+
+      // Create a unique :key to help ensure that sub components are re-rendered rather than
+      // re-used, which can cause issues. If a primary key is not provided we use the rendered
+      // rows index within the tbody.
+      // See: https://github.com/bootstrap-vue/bootstrap-vue/issues/2410
+      const primaryKeyValue = toString(get(item, primaryKey)) || null;
+      const rowKey = primaryKeyValue || toString(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 = primaryKeyValue ? this.safeId(`_row_${primaryKeyValue}`) : null;
+
+      // Selectable classes and attributes
+      const selectableClasses = safeVueInstance(this).selectableRowClasses ? this.selectableRowClasses(rowIndex) : {};
+      const selectableAttrs = safeVueInstance(this).selectableRowAttrs ? this.selectableRowAttrs(rowIndex) : {};
+
+      // Additional classes and attributes
+      const userTrClasses = isFunction(tbodyTrClass) ? tbodyTrClass(item, 'row') : tbodyTrClass;
+      const userTrAttrs = isFunction(tbodyTrAttr) ? /* istanbul ignore next */tbodyTrAttr(item, 'row') : tbodyTrAttr;
+
+      // Add the item row
+      $rows.push(h(BTr, {
+        class: [userTrClasses, selectableClasses, rowShowDetails ? 'b-table-has-details' : ''],
+        props: {
+          variant: item[FIELD_KEY_ROW_VARIANT] || null
+        },
+        attrs: {
+          id: rowId,
+          ...userTrAttrs,
+          // Users cannot override the following attributes
+          tabindex: hasRowClickHandler ? '0' : null,
+          'data-pk': primaryKeyValue || null,
+          'aria-details': detailsId,
+          'aria-owns': detailsId,
+          'aria-rowindex': ariaRowIndex,
+          ...selectableAttrs
+        },
+        on: {
+          // Note: These events are not A11Y friendly!
+          mouseenter: this.rowHovered,
+          mouseleave: this.rowUnhovered
+        },
+        key: `__b-table-row-${rowKey}__`,
+        ref: 'item-rows',
+        [REF_FOR_KEY]: true
+      }, $tds));
+
+      // Row Details slot
+      if (rowShowDetails) {
+        const detailsScope = {
+          item,
+          index: rowIndex,
+          fields,
+          toggleDetails: this.toggleDetailsFactory(hasDetailsSlot, item)
+        };
+        // If table supports selectable mode, then add in the following scope
+        // this.supportsSelectableRows will be undefined if mixin isn't loaded
+        if (safeVueInstance(this).supportsSelectableRows) {
+          detailsScope.rowSelected = this.isRowSelected(rowIndex);
+          detailsScope.selectRow = () => this.selectRow(rowIndex);
+          detailsScope.unselectRow = () => this.unselectRow(rowIndex);
+        }
+
+        // Render the details slot in a TD
+        const $details = h(BTd, {
+          props: {
+            colspan: fields.length
+          },
+          class: this.detailsTdClass
+        }, [this.normalizeSlot(SLOT_NAME_ROW_DETAILS, detailsScope)]);
+
+        // Add a hidden row to keep table row striping consistent when details showing
+        // Only added if the table is striped
+        if (striped) {
+          $rows.push(
+          // We don't use `BTr` here as we don't need the extra functionality
+          h('tr', {
+            staticClass: 'd-none',
+            attrs: {
+              'aria-hidden': 'true',
+              role: 'presentation'
+            },
+            key: `__b-table-details-stripe__${rowKey}`
+          }));
+        }
+
+        // Add the actual details row
+        const userDetailsTrClasses = isFunction(this.tbodyTrClass) ? /* istanbul ignore next */this.tbodyTrClass(item, SLOT_NAME_ROW_DETAILS) : this.tbodyTrClass;
+        const userDetailsTrAttrs = isFunction(this.tbodyTrAttr) ? /* istanbul ignore next */this.tbodyTrAttr(item, SLOT_NAME_ROW_DETAILS) : this.tbodyTrAttr;
+        $rows.push(h(BTr, {
+          staticClass: 'b-table-details',
+          class: [userDetailsTrClasses],
+          props: {
+            variant: item[FIELD_KEY_ROW_VARIANT] || null
+          },
+          attrs: {
+            ...userDetailsTrAttrs,
+            // Users cannot override the following attributes
+            id: detailsId,
+            tabindex: '-1'
+          },
+          key: `__b-table-details__${rowKey}`
+        }, [$details]));
+      } else if (hasDetailsSlot) {
+        // Only add the placeholder if a the table has a row-details slot defined (but not shown)
+        $rows.push(h());
+        if (striped) {
+          // Add extra placeholder if table is striped
+          $rows.push(h());
+        }
+      }
+
+      // Return the row(s)
+      return $rows;
+    }
+  }
+});
+
+export { props, tbodyRowMixin };

package/dist/vendor/bootstrap-vue/src/components/table/helpers/mixin-tbody.js

@@ -0,0 +1,247 @@
+import { extend } from '../../../vue';
+import { EVENT_NAME_ROW_CLICKED, EVENT_NAME_ROW_MIDDLE_CLICKED, EVENT_NAME_ROW_CONTEXTMENU, EVENT_NAME_ROW_DBLCLICKED } from '../../../constants/events';
+import { CODE_ENTER, CODE_SPACE, CODE_UP, CODE_DOWN, CODE_HOME, CODE_END } from '../../../constants/key-codes';
+import { PROP_TYPE_ARRAY, PROP_TYPE_OBJECT, PROP_TYPE_STRING } from '../../../constants/props';
+import { from } from '../../../utils/array';
+import { isElement, closest, isActiveElement, attemptFocus } from '../../../utils/dom';
+import { safeVueInstance } from '../../../utils/safe-vue-instance';
+import { stopEvent } from '../../../utils/events';
+import { sortKeys } from '../../../utils/object';
+import { pluckProps } from '../../../utils/props';
+import { props as props$1, BTbody } from '../tbody';
+import { filterEvent } from './filter-event';
+import { textSelectionActive } from './text-selection-active';
+import { props as props$2, tbodyRowMixin } from './mixin-tbody-row';
+
+// --- Helper methods ---
+
+const getCellSlotName = value => `cell(${value || ''})`;
+
+// --- Props ---
+
+const props = sortKeys({
+  ...props$1,
+  ...props$2,
+  tbodyClass: {
+    type: [PROP_TYPE_ARRAY, PROP_TYPE_OBJECT, PROP_TYPE_STRING],
+    required: false,
+    default: undefined
+  }
+});
+
+// --- Mixin ---
+
+// @vue/component
+const tbodyMixin = extend({
+  mixins: [tbodyRowMixin],
+  props,
+  beforeDestroy() {
+    this.$_bodyFieldSlotNameCache = null;
+  },
+  methods: {
+    // Returns all the item TR elements (excludes detail and spacer rows)
+    // `this.$refs['item-rows']` 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['item-rows']` may not always be in document order
+    getTbodyTrs() {
+      const {
+        $refs
+      } = this;
+      const tbody = $refs.tbody ? $refs.tbody.$el || $refs.tbody : null;
+      const trs = ($refs['item-rows'] || []).map(tr => tr.$el || tr);
+      return tbody && tbody.children && tbody.children.length > 0 && trs && trs.length > 0 ? from(tbody.children).filter(tr => trs.includes(tr)) : /* istanbul ignore next */[];
+    },
+    // Returns index of a particular TBODY item TR
+    // We set `true` on closest to include self in result
+    getTbodyTrIndex(el) {
+      /* istanbul ignore next: should not normally happen */
+      if (!isElement(el)) {
+        return -1;
+      }
+      const tr = el.tagName === 'TR' ? el : closest('tr', el, true);
+      return tr ? this.getTbodyTrs().indexOf(tr) : -1;
+    },
+    // Emits a row event, with the item object, row index and original event
+    emitTbodyRowEvent(type, event) {
+      if (type && event && event.target) {
+        const rowIndex = this.getTbodyTrIndex(event.target);
+        if (rowIndex > -1) {
+          // The array of TRs correlate to the `computedItems` array
+          const item = this.computedItems[rowIndex];
+          if (this.hasListener(type)) {
+            this.$emit(type, item, rowIndex, event);
+          }
+          // Call selectionHandler directly if selectable (defined in mixin-selectable.js)
+          if (type === EVENT_NAME_ROW_CLICKED && this.hasSelectableRowClick) {
+            this.selectionHandler(item, rowIndex, event);
+          }
+        }
+      }
+    },
+    tbodyRowEventStopped(event) {
+      return this.stopIfBusy && this.stopIfBusy(event);
+    },
+    // Delegated row event handlers
+    onTbodyRowKeydown(event) {
+      // Keyboard navigation and row click emulation
+      const {
+        target,
+        keyCode
+      } = event;
+      if (this.tbodyRowEventStopped(event) || target.tagName !== 'TR' || !isActiveElement(target) || target.tabIndex !== 0) {
+        // Early exit if not an item row TR
+        return;
+      }
+      if ([CODE_ENTER, CODE_SPACE].includes(keyCode)) {
+        // Emulated click for keyboard users, transfer to click handler
+        stopEvent(event);
+        this.onTBodyRowClicked(event);
+      } else if ([CODE_UP, CODE_DOWN, CODE_HOME, CODE_END].includes(keyCode)) {
+        // Keyboard navigation
+        const rowIndex = this.getTbodyTrIndex(target);
+        if (rowIndex > -1) {
+          stopEvent(event);
+          const trs = this.getTbodyTrs();
+          const shift = event.shiftKey;
+          if (keyCode === CODE_HOME || shift && keyCode === CODE_UP) {
+            // Focus first row
+            attemptFocus(trs[0]);
+          } else if (keyCode === CODE_END || shift && keyCode === CODE_DOWN) {
+            // Focus last row
+            attemptFocus(trs[trs.length - 1]);
+          } else if (keyCode === CODE_UP && rowIndex > 0) {
+            // Focus previous row
+            attemptFocus(trs[rowIndex - 1]);
+          } else if (keyCode === CODE_DOWN && rowIndex < trs.length - 1) {
+            // Focus next row
+            attemptFocus(trs[rowIndex + 1]);
+          }
+        }
+      }
+    },
+    onTBodyRowClicked(event) {
+      const {
+        $refs
+      } = this;
+      const tbody = $refs.tbody ? $refs.tbody.$el || $refs.tbody : null;
+      // Don't emit event when the table is busy, the user clicked
+      // on a non-disabled control or is selecting text
+      if (this.tbodyRowEventStopped(event) || filterEvent(event) || textSelectionActive(tbody || this.$el)) {
+        return;
+      }
+      this.emitTbodyRowEvent(EVENT_NAME_ROW_CLICKED, event);
+    },
+    onTbodyRowMiddleMouseRowClicked(event) {
+      if (!this.tbodyRowEventStopped(event) && event.which === 2) {
+        this.emitTbodyRowEvent(EVENT_NAME_ROW_MIDDLE_CLICKED, event);
+      }
+    },
+    onTbodyRowContextmenu(event) {
+      if (!this.tbodyRowEventStopped(event)) {
+        this.emitTbodyRowEvent(EVENT_NAME_ROW_CONTEXTMENU, event);
+      }
+    },
+    onTbodyRowDblClicked(event) {
+      if (!this.tbodyRowEventStopped(event) && !filterEvent(event)) {
+        this.emitTbodyRowEvent(EVENT_NAME_ROW_DBLCLICKED, event);
+      }
+    },
+    // Render the tbody element and children
+    // Note:
+    //   Row hover handlers are handled by the tbody-row mixin
+    //   As mouseenter/mouseleave events do not bubble
+    renderTbody() {
+      const {
+        computedItems: items,
+        renderBusy,
+        renderTopRow,
+        renderEmpty,
+        renderBottomRow,
+        hasSelectableRowClick
+      } = safeVueInstance(this);
+      const h = this.$createElement;
+      const hasRowClickHandler = this.hasListener(EVENT_NAME_ROW_CLICKED) || hasSelectableRowClick;
+
+      // Prepare the tbody rows
+      const $rows = [];
+
+      // Add the item data rows or the busy slot
+      const $busy = renderBusy ? renderBusy() : null;
+      if ($busy) {
+        // If table is busy and a busy slot, then return only the busy "row" indicator
+        $rows.push($busy);
+      } else {
+        // Table isn't busy, or we don't have a busy slot
+
+        // Create a slot cache for improved performance when looking up cell slot names
+        // Values will be keyed by the field's `key` and will store the slot's name
+        // Slots could be dynamic (i.e. `v-if`), so we must compute on each render
+        // Used by tbody-row mixin render helper
+        const cache = {};
+        let defaultSlotName = getCellSlotName();
+        defaultSlotName = this.hasNormalizedSlot(defaultSlotName) ? defaultSlotName : null;
+        this.computedFields.forEach(field => {
+          const {
+            key
+          } = field;
+          const slotName = getCellSlotName(key);
+          const lowercaseSlotName = getCellSlotName(key.toLowerCase());
+          cache[key] = this.hasNormalizedSlot(slotName) ? slotName : this.hasNormalizedSlot(lowercaseSlotName) ? /* istanbul ignore next */lowercaseSlotName : defaultSlotName;
+        });
+        // Created as a non-reactive property so to not trigger component updates
+        // Must be a fresh object each render
+        this.$_bodyFieldSlotNameCache = cache;
+
+        // Add static top row slot (hidden in visibly stacked mode
+        // as we can't control `data-label` attr)
+        $rows.push(renderTopRow ? renderTopRow() : h());
+
+        // Render the rows
+        items.forEach((item, rowIndex) => {
+          // Render the individual item row (rows if details slot)
+          $rows.push(this.renderTbodyRow(item, rowIndex));
+        });
+
+        // Empty items / empty filtered row slot (only shows if `items.length < 1`)
+        $rows.push(renderEmpty ? renderEmpty() : h());
+
+        // Static bottom row slot (hidden in visibly stacked mode
+        // as we can't control `data-label` attr)
+        $rows.push(renderBottomRow ? renderBottomRow() : h());
+      }
+
+      // Note: these events will only emit if a listener is registered
+      const handlers = {
+        auxclick: this.onTbodyRowMiddleMouseRowClicked,
+        // TODO:
+        //   Perhaps we do want to automatically prevent the
+        //   default context menu from showing if there is a
+        //   `row-contextmenu` listener registered
+        contextmenu: this.onTbodyRowContextmenu,
+        // The following event(s) is not considered A11Y friendly
+        dblclick: this.onTbodyRowDblClicked
+        // Hover events (`mouseenter`/`mouseleave`) are handled by `tbody-row` mixin
+      };
+      // Add in click/keydown listeners if needed
+      if (hasRowClickHandler) {
+        handlers.click = this.onTBodyRowClicked;
+        handlers.keydown = this.onTbodyRowKeydown;
+      }
+
+      // Assemble rows into the tbody
+      const $tbody = h(BTbody, {
+        class: this.tbodyClass || null,
+        props: pluckProps(props$1, this.$props),
+        // BTbody transfers all native event listeners to the root element
+        // TODO: Only set the handlers if the table is not busy
+        on: handlers,
+        ref: 'tbody'
+      }, $rows);
+
+      // Return the assembled tbody
+      return $tbody;
+    }
+  }
+});
+
+export { props, tbodyMixin };

package/dist/vendor/bootstrap-vue/src/components/table/helpers/mixin-tfoot.js

@@ -0,0 +1,69 @@
+import { extend } from '../../../vue';
+import { PROP_TYPE_BOOLEAN, PROP_TYPE_STRING, PROP_TYPE_ARRAY, PROP_TYPE_OBJECT } from '../../../constants/props';
+import { SLOT_NAME_CUSTOM_FOOT } from '../../../constants/slots';
+import { BTfoot } from '../tfoot';
+
+// --- Props ---
+
+const props = {
+  footClone: {
+    type: PROP_TYPE_BOOLEAN,
+    required: false,
+    default: false
+  },
+  // Any Bootstrap theme variant (or custom)
+  // Falls back to `headRowVariant`
+  footRowVariant: {
+    type: PROP_TYPE_STRING,
+    required: false,
+    default: undefined
+  },
+  // 'dark', 'light', or `null` (or custom)
+  footVariant: {
+    type: PROP_TYPE_STRING,
+    required: false,
+    default: undefined
+  },
+  tfootClass: {
+    type: [PROP_TYPE_ARRAY, PROP_TYPE_OBJECT, PROP_TYPE_STRING],
+    required: false,
+    default: undefined
+  },
+  tfootTrClass: {
+    type: [PROP_TYPE_ARRAY, PROP_TYPE_OBJECT, PROP_TYPE_STRING],
+    required: false,
+    default: undefined
+  }
+};
+
+// --- Mixin ---
+
+// @vue/component
+const tfootMixin = extend({
+  props,
+  methods: {
+    renderTFootCustom() {
+      const h = this.$createElement;
+      if (this.hasNormalizedSlot(SLOT_NAME_CUSTOM_FOOT)) {
+        return h(BTfoot, {
+          class: this.tfootClass || null,
+          props: {
+            footVariant: this.footVariant || this.headVariant || null
+          },
+          key: 'bv-tfoot-custom'
+        }, this.normalizeSlot(SLOT_NAME_CUSTOM_FOOT, {
+          items: this.computedItems.slice(),
+          fields: this.computedFields.slice(),
+          columns: this.computedFields.length
+        }));
+      }
+      return h();
+    },
+    renderTfoot() {
+      // Passing true to renderThead will make it render a tfoot
+      return this.footClone ? this.renderThead(true) : this.renderTFootCustom();
+    }
+  }
+});
+
+export { props, tfootMixin };