@gitlab/ui/dist/vendor/bootstrap-vue/src/components/table/helpers/mixin-table-renderer.js

GitLab UI Components

import { extend } from '../../../vue';
import { identity } from '../../../utils/identity';
import { isBoolean } from '../../../utils/inspect';
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: {
    type: Boolean,
    required: false,
    default: false
  },
  borderless: {
    type: Boolean,
    required: false,
    default: false
  },
  captionTop: {
    type: Boolean,
    required: false,
    default: false
  },
  dark: {
    type: Boolean,
    required: false,
    default: false
  },
  fixed: {
    type: Boolean,
    required: false,
    default: false
  },
  hover: {
    type: Boolean,
    required: false,
    default: false
  },
  noBorderCollapse: {
    type: Boolean,
    required: false,
    default: false
  },
  outlined: {
    type: Boolean,
    required: false,
    default: false
  },
  responsive: {
    type: [Boolean, String],
    required: false,
    default: false
  },
  small: {
    type: Boolean,
    required: false,
    default: false
  },
  // If a string, it is assumed to be the table `max-height` value
  stickyHeader: {
    type: [Boolean, String],
    required: false,
    default: false
  },
  striped: {
    type: Boolean,
    required: false,
    default: false
  },
  tableClass: {
    type: [Array, Object, String],
    required: false,
    default: undefined
  },
  tableVariant: {
    type: String,
    required: false,
    default: undefined
  }
};

// --- 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.responsive;
      return responsive === '' ? true : responsive;
    },
    isStickyHeader() {
      let stickyHeader = this.stickyHeader;
      stickyHeader = stickyHeader === '' ? true : stickyHeader;
      return this.isStacked ? false : stickyHeader;
    },
    wrapperClasses() {
      const isResponsive = this.isResponsive;
      return [this.isStickyHeader ? 'b-table-sticky-header' : '', isResponsive === true ? 'table-responsive' : isResponsive ? `table-responsive table-responsive-${this.responsive}` : ''].filter(identity);
    },
    wrapperStyles() {
      const isStickyHeader = this.isStickyHeader;
      return isStickyHeader && !isBoolean(isStickyHeader) ? {
        maxHeight: isStickyHeader
      } : {};
    },
    tableClasses() {
      let _safeVueInstance = safeVueInstance(this),
        hover = _safeVueInstance.hover,
        tableVariant = _safeVueInstance.tableVariant,
        selectableTableClasses = _safeVueInstance.selectableTableClasses,
        stackedTableClasses = _safeVueInstance.stackedTableClasses,
        tableClass = _safeVueInstance.tableClass,
        computedBusy = _safeVueInstance.computedBusy;
      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 _safeVueInstance2 = safeVueInstance(this),
        items = _safeVueInstance2.computedItems,
        filteredItems = _safeVueInstance2.filteredItems,
        fields = _safeVueInstance2.computedFields,
        selectableTableAttrs = _safeVueInstance2.selectableTableAttrs,
        computedBusy = _safeVueInstance2.computedBusy;
      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 _safeVueInstance3 = safeVueInstance(this),
      wrapperClasses = _safeVueInstance3.wrapperClasses,
      renderCaption = _safeVueInstance3.renderCaption,
      renderColgroup = _safeVueInstance3.renderColgroup,
      renderThead = _safeVueInstance3.renderThead,
      renderTbody = _safeVueInstance3.renderTbody,
      renderTfoot = _safeVueInstance3.renderTfoot;
    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 };