@gitlab/ui 132.0.1 → 132.0.2

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

@@ -0,0 +1,186 @@
+import { extend } from '../../../vue';
+import { PROP_TYPE_BOOLEAN, PROP_TYPE_BOOLEAN_STRING, PROP_TYPE_ARRAY_OBJECT_STRING, PROP_TYPE_STRING } from '../../../constants/props';
+import { identity } from '../../../utils/identity';
+import { isBoolean } from '../../../utils/inspect';
+import { makeProp } from '../../../utils/props';
+import { safeVueInstance } from '../../../utils/safe-vue-instance';
+import { toString } from '../../../utils/string';
+import { attrsMixin } from '../../../mixins/attrs';
+
+// Main `<table>` render mixin
+// Includes all main table styling options
+
+// --- Props ---
+
+const props = {
+  bordered: makeProp(PROP_TYPE_BOOLEAN, false),
+  borderless: makeProp(PROP_TYPE_BOOLEAN, false),
+  captionTop: makeProp(PROP_TYPE_BOOLEAN, false),
+  dark: makeProp(PROP_TYPE_BOOLEAN, false),
+  fixed: makeProp(PROP_TYPE_BOOLEAN, false),
+  hover: makeProp(PROP_TYPE_BOOLEAN, false),
+  noBorderCollapse: makeProp(PROP_TYPE_BOOLEAN, false),
+  outlined: makeProp(PROP_TYPE_BOOLEAN, false),
+  responsive: makeProp(PROP_TYPE_BOOLEAN_STRING, false),
+  small: makeProp(PROP_TYPE_BOOLEAN, false),
+  // If a string, it is assumed to be the table `max-height` value
+  stickyHeader: makeProp(PROP_TYPE_BOOLEAN_STRING, false),
+  striped: makeProp(PROP_TYPE_BOOLEAN, false),
+  tableClass: makeProp(PROP_TYPE_ARRAY_OBJECT_STRING),
+  tableVariant: makeProp(PROP_TYPE_STRING)
+};
+
+// --- Mixin ---
+
+// @vue/component
+const tableRendererMixin = extend({
+  mixins: [attrsMixin],
+  provide() {
+    return {
+      getBvTable: () => this
+    };
+  },
+  // Don't place attributes on root element automatically,
+  // as table could be wrapped in responsive `<div>`
+  inheritAttrs: false,
+  props,
+  computed: {
+    isTableSimple() {
+      return false;
+    },
+    // Layout related computed props
+    isResponsive() {
+      const {
+        responsive
+      } = this;
+      return responsive === '' ? true : responsive;
+    },
+    isStickyHeader() {
+      let {
+        stickyHeader
+      } = this;
+      stickyHeader = stickyHeader === '' ? true : stickyHeader;
+      return this.isStacked ? false : stickyHeader;
+    },
+    wrapperClasses() {
+      const {
+        isResponsive
+      } = this;
+      return [this.isStickyHeader ? 'b-table-sticky-header' : '', isResponsive === true ? 'table-responsive' : isResponsive ? `table-responsive table-responsive-${this.responsive}` : ''].filter(identity);
+    },
+    wrapperStyles() {
+      const {
+        isStickyHeader
+      } = this;
+      return isStickyHeader && !isBoolean(isStickyHeader) ? {
+        maxHeight: isStickyHeader
+      } : {};
+    },
+    tableClasses() {
+      let {
+        hover,
+        tableVariant,
+        selectableTableClasses,
+        stackedTableClasses,
+        tableClass,
+        computedBusy
+      } = safeVueInstance(this);
+      hover = this.isTableSimple ? hover : hover && this.computedItems.length > 0 && !computedBusy;
+      return [
+      // User supplied classes
+      tableClass,
+      // Styling classes
+      {
+        'table-striped': this.striped,
+        'table-hover': hover,
+        'table-dark': this.dark,
+        'table-bordered': this.bordered,
+        'table-borderless': this.borderless,
+        'table-sm': this.small,
+        // The following are b-table custom styles
+        'gl-border': this.outlined,
+        'b-table-fixed': this.fixed,
+        'b-table-caption-top': this.captionTop,
+        'b-table-no-border-collapse': this.noBorderCollapse
+      }, tableVariant ? `${this.dark ? 'bg' : 'table'}-${tableVariant}` : '',
+      // Stacked table classes
+      stackedTableClasses,
+      // Selectable classes
+      selectableTableClasses];
+    },
+    tableAttrs() {
+      const {
+        computedItems: items,
+        filteredItems,
+        computedFields: fields,
+        selectableTableAttrs,
+        computedBusy
+      } = safeVueInstance(this);
+      const ariaAttrs = this.isTableSimple ? {} : {
+        'aria-busy': toString(computedBusy),
+        'aria-colcount': toString(fields.length),
+        // Preserve user supplied `aria-describedby`, if provided
+        'aria-describedby': this.bvAttrs['aria-describedby'] || this.$refs.caption ? this.captionId : null
+      };
+      const rowCount = items && filteredItems && filteredItems.length > items.length ? toString(filteredItems.length) : null;
+      return {
+        // We set `aria-rowcount` before merging in `$attrs`,
+        // in case user has supplied their own
+        'aria-rowcount': rowCount,
+        // Merge in user supplied `$attrs` if any
+        ...this.bvAttrs,
+        // Now we can override any `$attrs` here
+        id: this.safeId(),
+        role: this.bvAttrs.role || 'table',
+        ...ariaAttrs,
+        ...selectableTableAttrs
+      };
+    }
+  },
+  render(h) {
+    const {
+      wrapperClasses,
+      renderCaption,
+      renderColgroup,
+      renderThead,
+      renderTbody,
+      renderTfoot
+    } = safeVueInstance(this);
+    const $content = [];
+    if (this.isTableSimple) {
+      $content.push(this.normalizeSlot());
+    } else {
+      // Build the `<caption>` (from caption mixin)
+      $content.push(renderCaption ? renderCaption() : null);
+
+      // Build the `<colgroup>`
+      $content.push(renderColgroup ? renderColgroup() : null);
+
+      // Build the `<thead>`
+      $content.push(renderThead ? renderThead() : null);
+
+      // Build the `<tbody>`
+      $content.push(renderTbody ? renderTbody() : null);
+
+      // Build the `<tfoot>`
+      $content.push(renderTfoot ? renderTfoot() : null);
+    }
+
+    // Assemble `<table>`
+    const $table = h('table', {
+      staticClass: 'table b-table',
+      class: this.tableClasses,
+      attrs: this.tableAttrs,
+      key: 'b-table'
+    }, $content.filter(identity));
+
+    // Add responsive/sticky wrapper if needed and return table
+    return wrapperClasses.length > 0 ? h('div', {
+      class: wrapperClasses,
+      style: this.wrapperStyles,
+      key: 'wrap'
+    }, [$table]) : $table;
+  }
+});
+
+export { props, tableRendererMixin };

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

@@ -0,0 +1,338 @@
+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_OBJECT_STRING, PROP_TYPE_OBJECT_FUNCTION, 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 { 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_SHOW_DETAILS, FIELD_KEY_CELL_VARIANT, FIELD_KEY_ROW_VARIANT } from './constants';
+
+// --- Props ---
+
+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
+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 };