@gitlab/ui 84.2.0 → 85.0.0

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

@@ -0,0 +1,360 @@
+import { extend, REF_FOR_KEY } from '../../../vue'
+import {
+  EVENT_NAME_ROW_CLICKED,
+  EVENT_NAME_ROW_HOVERED,
+  EVENT_NAME_ROW_UNHOVERED
+} from '../../../constants/events'
+import {
+  PROP_TYPE_ARRAY_OBJECT_STRING,
+  PROP_TYPE_FUNCTION,
+  PROP_TYPE_OBJECT_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 { makeProp } from '../../../utils/props'
+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_CELL_VARIANT, FIELD_KEY_ROW_VARIANT, FIELD_KEY_SHOW_DETAILS } from './constants'
+
+// --- Props ---
+
+export const props = {
+  detailsTdClass: makeProp(PROP_TYPE_ARRAY_OBJECT_STRING),
+  tbodyTrAttr: makeProp(PROP_TYPE_OBJECT_FUNCTION),
+  tbodyTrClass: makeProp([...PROP_TYPE_ARRAY_OBJECT_STRING, PROP_TYPE_FUNCTION])
+}
+
+// --- Mixin ---
+
+// @vue/component
+export 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
+    }
+  }
+})

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

@@ -0,0 +1,258 @@
+import { extend } from '../../../vue'
+import {
+  EVENT_NAME_ROW_CLICKED,
+  EVENT_NAME_ROW_CONTEXTMENU,
+  EVENT_NAME_ROW_DBLCLICKED,
+  EVENT_NAME_ROW_MIDDLE_CLICKED
+} from '../../../constants/events'
+import {
+  CODE_DOWN,
+  CODE_END,
+  CODE_ENTER,
+  CODE_HOME,
+  CODE_SPACE,
+  CODE_UP
+} from '../../../constants/key-codes'
+import { PROP_TYPE_ARRAY_OBJECT_STRING } from '../../../constants/props'
+import { arrayIncludes, from as arrayFrom } from '../../../utils/array'
+import { attemptFocus, closest, isActiveElement, isElement } from '../../../utils/dom'
+import { safeVueInstance } from '../../../utils/safe-vue-instance'
+import { stopEvent } from '../../../utils/events'
+import { sortKeys } from '../../../utils/object'
+import { makeProp, pluckProps } from '../../../utils/props'
+import { BTbody, props as BTbodyProps } from '../tbody'
+import { filterEvent } from './filter-event'
+import { textSelectionActive } from './text-selection-active'
+import { tbodyRowMixin, props as tbodyRowProps } from './mixin-tbody-row'
+
+// --- Helper methods ---
+
+const getCellSlotName = value => `cell(${value || ''})`
+
+// --- Props ---
+
+export const props = sortKeys({
+  ...BTbodyProps,
+  ...tbodyRowProps,
+  tbodyClass: makeProp(PROP_TYPE_ARRAY_OBJECT_STRING)
+})
+
+// --- Mixin ---
+
+// @vue/component
+export 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
+        ? arrayFrom(tbody.children).filter(tr => arrayIncludes(trs, 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 && this.hasListener(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]
+          this.$emit(type, 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 (arrayIncludes([CODE_ENTER, CODE_SPACE], keyCode)) {
+        // Emulated click for keyboard users, transfer to click handler
+        stopEvent(event)
+        this.onTBodyRowClicked(event)
+      } else if (arrayIncludes([CODE_UP, CODE_DOWN, CODE_HOME, CODE_END], 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(BTbodyProps, 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
+    }
+  }
+})

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

@@ -0,0 +1,55 @@
+import { extend } from '../../../vue'
+import {
+  PROP_TYPE_ARRAY_OBJECT_STRING,
+  PROP_TYPE_BOOLEAN,
+  PROP_TYPE_STRING
+} from '../../../constants/props'
+import { SLOT_NAME_CUSTOM_FOOT } from '../../../constants/slots'
+import { makeProp } from '../../../utils/props'
+import { BTfoot } from '../tfoot'
+
+// --- Props ---
+
+export const props = {
+  footClone: makeProp(PROP_TYPE_BOOLEAN, false),
+  // Any Bootstrap theme variant (or custom)
+  // Falls back to `headRowVariant`
+  footRowVariant: makeProp(PROP_TYPE_STRING),
+  // 'dark', 'light', or `null` (or custom)
+  footVariant: makeProp(PROP_TYPE_STRING),
+  tfootClass: makeProp(PROP_TYPE_ARRAY_OBJECT_STRING),
+  tfootTrClass: makeProp(PROP_TYPE_ARRAY_OBJECT_STRING)
+}
+
+// --- Mixin ---
+
+// @vue/component
+export 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()
+    }
+  }
+})