@gitlab/ui 84.1.0 → 85.0.0

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

@@ -0,0 +1,237 @@
+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_OBJECT_STRING } from '../../../constants/props';
+import { from, arrayIncludes } 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 { makeProp, 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: makeProp(PROP_TYPE_ARRAY_OBJECT_STRING)
+});
+
+// --- 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 => 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(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,50 @@
+import { extend } from '../../../vue';
+import { PROP_TYPE_BOOLEAN, PROP_TYPE_STRING, PROP_TYPE_ARRAY_OBJECT_STRING } from '../../../constants/props';
+import { SLOT_NAME_CUSTOM_FOOT } from '../../../constants/slots';
+import { makeProp } from '../../../utils/props';
+import { BTfoot } from '../tfoot';
+
+// --- Props ---
+
+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
+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 };

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

@@ -0,0 +1,214 @@
+import { extend } from '../../../vue';
+import { EVENT_NAME_HEAD_CLICKED } from '../../../constants/events';
+import { CODE_ENTER, CODE_SPACE } from '../../../constants/key-codes';
+import { PROP_TYPE_STRING, PROP_TYPE_ARRAY_OBJECT_STRING } from '../../../constants/props';
+import { SLOT_NAME_THEAD_TOP } from '../../../constants/slots';
+import { stopEvent } from '../../../utils/events';
+import { htmlOrText } from '../../../utils/html';
+import { identity } from '../../../utils/identity';
+import { isUndefinedOrNull } from '../../../utils/inspect';
+import { noop } from '../../../utils/noop';
+import { makeProp } from '../../../utils/props';
+import { safeVueInstance } from '../../../utils/safe-vue-instance';
+import { startCase } from '../../../utils/string';
+import { BThead } from '../thead';
+import { BTfoot } from '../tfoot';
+import { BTr } from '../tr';
+import { BTh } from '../th';
+import { filterEvent } from './filter-event';
+import { textSelectionActive } from './text-selection-active';
+
+// --- Helper methods ---
+
+const getHeadSlotName = value => `head(${value || ''})`;
+const getFootSlotName = value => `foot(${value || ''})`;
+
+// --- Props ---
+
+const props = {
+  // Any Bootstrap theme variant (or custom)
+  headRowVariant: makeProp(PROP_TYPE_STRING),
+  // 'light', 'dark' or `null` (or custom)
+  headVariant: makeProp(PROP_TYPE_STRING),
+  theadClass: makeProp(PROP_TYPE_ARRAY_OBJECT_STRING),
+  theadTrClass: makeProp(PROP_TYPE_ARRAY_OBJECT_STRING)
+};
+
+// --- Mixin ---
+
+// @vue/component
+const theadMixin = extend({
+  props,
+  methods: {
+    fieldClasses(field) {
+      // Header field (<th>) classes
+      return [field.class ? field.class : '', field.thClass ? field.thClass : ''];
+    },
+    headClicked(event, field, isFoot) {
+      if (this.stopIfBusy && this.stopIfBusy(event)) {
+        // If table is busy (via provider) then don't propagate
+        return;
+      } else if (filterEvent(event)) {
+        // Clicked on a non-disabled control so ignore
+        return;
+      } else if (textSelectionActive(this.$el)) {
+        // User is selecting text, so ignore
+        /* istanbul ignore next: JSDOM doesn't support getSelection() */
+        return;
+      }
+      stopEvent(event);
+      this.$emit(EVENT_NAME_HEAD_CLICKED, field.key, field, event, isFoot);
+    },
+    renderThead() {
+      let isFoot = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : false;
+      const {
+        computedFields: fields,
+        isSortable,
+        isSelectable,
+        headVariant,
+        footVariant,
+        headRowVariant,
+        footRowVariant
+      } = safeVueInstance(this);
+      const h = this.$createElement;
+
+      // In always stacked mode, we don't bother rendering the head/foot
+      // Or if no field headings (empty table)
+      if (this.isStackedAlways || fields.length === 0) {
+        return h();
+      }
+      const hasHeadClickListener = isSortable || this.hasListener(EVENT_NAME_HEAD_CLICKED);
+
+      // Reference to `selectAllRows` and `clearSelected()`, if table is selectable
+      const selectAllRows = isSelectable ? this.selectAllRows : noop;
+      const clearSelected = isSelectable ? this.clearSelected : noop;
+
+      // Helper function to generate a field <th> cell
+      const makeCell = (field, colIndex) => {
+        const {
+          label,
+          labelHtml,
+          variant,
+          stickyColumn,
+          key
+        } = field;
+        let ariaLabel = null;
+        if (!field.label.trim() && !field.headerTitle) {
+          // In case field's label and title are empty/blank
+          // We need to add a hint about what the column is about for non-sighted users
+          /* istanbul ignore next */
+          ariaLabel = startCase(field.key);
+        }
+        const on = {};
+        if (hasHeadClickListener) {
+          on.click = event => {
+            this.headClicked(event, field, isFoot);
+          };
+          on.keydown = event => {
+            const keyCode = event.keyCode;
+            if (keyCode === CODE_ENTER || keyCode === CODE_SPACE) {
+              this.headClicked(event, field, isFoot);
+            }
+          };
+        }
+        const sortAttrs = isSortable ? this.sortTheadThAttrs(key, field, isFoot) : {};
+        const sortClass = isSortable ? this.sortTheadThClasses(key, field, isFoot) : null;
+        const sortLabel = isSortable ? this.sortTheadThLabel(key, field, isFoot) : null;
+        const data = {
+          class: [{
+            // We need to make the header cell relative when we have
+            // a `.sr-only` sort label to work around overflow issues
+            'position-relative': sortLabel
+          }, this.fieldClasses(field), sortClass],
+          props: {
+            variant,
+            stickyColumn
+          },
+          style: field.thStyle || {},
+          attrs: {
+            // We only add a `tabindex` of `0` if there is a head-clicked listener
+            // and the current field is sortable
+            tabindex: hasHeadClickListener && field.sortable ? '0' : null,
+            abbr: field.headerAbbr || null,
+            title: field.headerTitle || null,
+            'aria-colindex': colIndex + 1,
+            'aria-label': ariaLabel,
+            ...this.getThValues(null, key, field.thAttr, isFoot ? 'foot' : 'head', {}),
+            ...sortAttrs
+          },
+          on,
+          key
+        };
+
+        // Handle edge case where in-document templates are used with new
+        // `v-slot:name` syntax where the browser lower-cases the v-slot's
+        // name (attributes become lower cased when parsed by the browser)
+        // We have replaced the square bracket syntax with round brackets
+        // to prevent confusion with dynamic slot names
+        let slotNames = [getHeadSlotName(key), getHeadSlotName(key.toLowerCase()), getHeadSlotName()];
+        // Footer will fallback to header slot names
+        if (isFoot) {
+          slotNames = [getFootSlotName(key), getFootSlotName(key.toLowerCase()), getFootSlotName(), ...slotNames];
+        }
+        const scope = {
+          label,
+          column: key,
+          field,
+          isFoot,
+          // Add in row select methods
+          selectAllRows,
+          clearSelected
+        };
+        const $content = this.normalizeSlot(slotNames, scope) || h('div', {
+          domProps: htmlOrText(labelHtml, label)
+        });
+        const $srLabel = sortLabel ? h('span', {
+          staticClass: 'sr-only'
+        }, ` (${sortLabel})`) : null;
+
+        // Return the header cell
+        return h(BTh, data, [$content, $srLabel].filter(identity));
+      };
+
+      // Generate the array of <th> cells
+      const $cells = fields.map(makeCell).filter(identity);
+
+      // Generate the row(s)
+      const $trs = [];
+      if (isFoot) {
+        $trs.push(h(BTr, {
+          class: this.tfootTrClass,
+          props: {
+            variant: isUndefinedOrNull(footRowVariant) ? headRowVariant : /* istanbul ignore next */footRowVariant
+          }
+        }, $cells));
+      } else {
+        const scope = {
+          columns: fields.length,
+          fields,
+          // Add in row select methods
+          selectAllRows,
+          clearSelected
+        };
+        $trs.push(this.normalizeSlot(SLOT_NAME_THEAD_TOP, scope) || h());
+        $trs.push(h(BTr, {
+          class: this.theadTrClass,
+          props: {
+            variant: headRowVariant
+          }
+        }, $cells));
+      }
+      return h(isFoot ? BTfoot : BThead, {
+        class: (isFoot ? this.tfootClass : this.theadClass) || null,
+        props: isFoot ? {
+          footVariant: footVariant || headVariant || null
+        } : {
+          headVariant: headVariant || null
+        },
+        key: isFoot ? 'bv-tfoot' : 'bv-thead'
+      }, $trs);
+    }
+  }
+});
+
+export { props, theadMixin };

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

@@ -0,0 +1,42 @@
+import { extend } from '../../../vue';
+import { SLOT_NAME_TOP_ROW } from '../../../constants/slots';
+import { isFunction } from '../../../utils/inspect';
+import { BTr } from '../tr';
+
+// --- Props ---
+
+const props = {};
+
+// --- Mixin ---
+
+// @vue/component
+const topRowMixin = extend({
+  methods: {
+    renderTopRow() {
+      const {
+        computedFields: fields,
+        stacked,
+        tbodyTrClass,
+        tbodyTrAttr
+      } = this;
+      const h = this.$createElement;
+
+      // Add static Top Row slot (hidden in visibly stacked mode as we can't control the data-label)
+      // If in *always* stacked mode, we don't bother rendering the row
+      if (!this.hasNormalizedSlot(SLOT_NAME_TOP_ROW) || stacked === true || stacked === '') {
+        return h();
+      }
+      return h(BTr, {
+        staticClass: 'b-table-top-row',
+        class: [isFunction(tbodyTrClass) ? tbodyTrClass(null, 'row-top') : tbodyTrClass],
+        attrs: isFunction(tbodyTrAttr) ? tbodyTrAttr(null, 'row-top') : tbodyTrAttr,
+        key: 'b-top-row'
+      }, [this.normalizeSlot(SLOT_NAME_TOP_ROW, {
+        columns: fields.length,
+        fields
+      })]);
+    }
+  }
+});
+
+export { props, topRowMixin };

package/dist/vendor/bootstrap-vue/src/components/table/helpers/normalize-fields.js

@@ -0,0 +1,86 @@
+import { identity } from '../../../utils/identity';
+import { isArray, isString, isObject, isFunction } from '../../../utils/inspect';
+import { clone, keys } from '../../../utils/object';
+import { startCase } from '../../../utils/string';
+import { IGNORED_FIELD_KEYS } from './constants';
+
+// Private function to massage field entry into common object format
+const processField = (key, value) => {
+  let field = null;
+  if (isString(value)) {
+    // Label shortcut
+    field = {
+      key,
+      label: value
+    };
+  } else if (isFunction(value)) {
+    // Formatter shortcut
+    field = {
+      key,
+      formatter: value
+    };
+  } else if (isObject(value)) {
+    field = clone(value);
+    field.key = field.key || key;
+  } else if (value !== false) {
+    // Fallback to just key
+    /* istanbul ignore next */
+    field = {
+      key
+    };
+  }
+  return field;
+};
+
+// We normalize fields into an array of objects
+// [ { key:..., label:..., ...}, {...}, ..., {..}]
+const normalizeFields = (origFields, items) => {
+  const fields = [];
+  if (isArray(origFields)) {
+    // Normalize array Form
+    origFields.filter(identity).forEach(f => {
+      if (isString(f)) {
+        fields.push({
+          key: f,
+          label: startCase(f)
+        });
+      } else if (isObject(f) && f.key && isString(f.key)) {
+        // Full object definition. We use assign so that we don't mutate the original
+        fields.push(clone(f));
+      } else if (isObject(f) && keys(f).length === 1) {
+        // Shortcut object (i.e. { 'foo_bar': 'This is Foo Bar' }
+        const key = keys(f)[0];
+        const field = processField(key, f[key]);
+        if (field) {
+          fields.push(field);
+        }
+      }
+    });
+  }
+
+  // If no field provided, take a sample from first record (if exits)
+  if (fields.length === 0 && isArray(items) && items.length > 0) {
+    const sample = items[0];
+    keys(sample).forEach(k => {
+      if (!IGNORED_FIELD_KEYS[k]) {
+        fields.push({
+          key: k,
+          label: startCase(k)
+        });
+      }
+    });
+  }
+
+  // Ensure we have a unique array of fields and that they have String labels
+  const memo = {};
+  return fields.filter(f => {
+    if (!memo[f.key]) {
+      memo[f.key] = true;
+      f.label = isString(f.label) ? f.label : startCase(f.key);
+      return true;
+    }
+    return false;
+  });
+};
+
+export { normalizeFields };

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

@@ -0,0 +1,32 @@
+import { arrayIncludes } from '../../../utils/array';
+import { isFunction, isArray } from '../../../utils/inspect';
+import { keys, clone, pick } from '../../../utils/object';
+import { IGNORED_FIELD_KEYS } from './constants';
+
+// Return a copy of a row after all reserved fields have been filtered out
+const sanitizeRow = function (row, ignoreFields, includeFields) {
+  let fieldsObj = arguments.length > 3 && arguments[3] !== undefined ? arguments[3] : {};
+  // We first need to format the row based on the field configurations
+  // This ensures that we add formatted values for keys that may not
+  // exist in the row itself
+  const formattedRow = keys(fieldsObj).reduce((result, key) => {
+    const field = fieldsObj[key];
+    const {
+      filterByFormatted
+    } = field;
+    const formatter = isFunction(filterByFormatted) ? /* istanbul ignore next */filterByFormatted : filterByFormatted ? /* istanbul ignore next */field.formatter : null;
+    if (isFunction(formatter)) {
+      result[key] = formatter(row[key], key, row);
+    }
+    return result;
+  }, clone(row));
+
+  // Determine the allowed keys:
+  //   - Ignore special fields that start with `_`
+  //   - Ignore fields in the `ignoreFields` array
+  //   - Include only fields in the `includeFields` array
+  const allowedKeys = keys(formattedRow).filter(key => !IGNORED_FIELD_KEYS[key] && !(isArray(ignoreFields) && ignoreFields.length > 0 && arrayIncludes(ignoreFields, key)) && !(isArray(includeFields) && includeFields.length > 0 && !arrayIncludes(includeFields, key)));
+  return pick(formattedRow, allowedKeys);
+};
+
+export { sanitizeRow };

package/dist/vendor/bootstrap-vue/src/components/table/helpers/stringify-record-values.js

@@ -0,0 +1,11 @@
+import { isObject } from '../../../utils/inspect';
+import { stringifyObjectValues } from '../../../utils/stringify-object-values';
+import { sanitizeRow } from './sanitize-row';
+
+// Stringifies the values of a record, ignoring any special top level field keys
+// TODO: Add option to stringify `scopedSlot` items
+const stringifyRecordValues = (row, ignoreFields, includeFields, fieldsObj) => {
+  return isObject(row) ? stringifyObjectValues(sanitizeRow(row, ignoreFields, includeFields, fieldsObj)) : /* istanbul ignore next */'';
+};
+
+export { stringifyRecordValues };