@gitlab/ui 132.0.1 → 132.0.3

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

@@ -0,0 +1,328 @@
+import { extend } from '../../../vue';
+import { EVENT_NAME_SORT_CHANGED, MODEL_EVENT_NAME_PREFIX } from '../../../constants/events';
+import { PROP_TYPE_STRING, PROP_TYPE_BOOLEAN, PROP_TYPE_FUNCTION, PROP_TYPE_ARRAY, PROP_TYPE_OBJECT } from '../../../constants/props';
+import { isFunction, isUndefinedOrNull } from '../../../utils/inspect';
+import { safeVueInstance } from '../../../utils/safe-vue-instance';
+import { stableSort } from '../../../utils/stable-sort';
+import { trim } from '../../../utils/string';
+import { defaultSortCompare } from './default-sort-compare';
+
+// --- Constants ---
+
+const MODEL_PROP_NAME_SORT_BY = 'sortBy';
+const MODEL_EVENT_NAME_SORT_BY = MODEL_EVENT_NAME_PREFIX + MODEL_PROP_NAME_SORT_BY;
+const MODEL_PROP_NAME_SORT_DESC = 'sortDesc';
+const MODEL_EVENT_NAME_SORT_DESC = MODEL_EVENT_NAME_PREFIX + MODEL_PROP_NAME_SORT_DESC;
+const SORT_DIRECTION_ASC = 'asc';
+const SORT_DIRECTION_DESC = 'desc';
+const SORT_DIRECTION_LAST = 'last';
+const SORT_DIRECTIONS = [SORT_DIRECTION_ASC, SORT_DIRECTION_DESC, SORT_DIRECTION_LAST];
+
+// --- Props ---
+
+const props = {
+  labelSortAsc: {
+    type: PROP_TYPE_STRING,
+    required: false,
+    default: 'Click to sort ascending'
+  },
+  labelSortClear: {
+    type: PROP_TYPE_STRING,
+    required: false,
+    default: 'Click to clear sorting'
+  },
+  labelSortDesc: {
+    type: PROP_TYPE_STRING,
+    required: false,
+    default: 'Click to sort descending'
+  },
+  noFooterSorting: {
+    type: PROP_TYPE_BOOLEAN,
+    required: false,
+    default: false
+  },
+  noLocalSorting: {
+    type: PROP_TYPE_BOOLEAN,
+    required: false,
+    default: false
+  },
+  // Another prop that should have had a better name
+  // It should be `noSortClear` (on non-sortable headers)
+  // We will need to make sure the documentation is clear on what
+  // this prop does (as well as in the code for future reference)
+  noSortReset: {
+    type: PROP_TYPE_BOOLEAN,
+    required: false,
+    default: false
+  },
+  [MODEL_PROP_NAME_SORT_BY]: {
+    type: PROP_TYPE_STRING,
+    required: false,
+    default: undefined
+  },
+  sortCompare: {
+    type: PROP_TYPE_FUNCTION,
+    required: false,
+    default: undefined
+  },
+  // String: locale code
+  // Array: array of Locale strings
+  sortCompareLocale: {
+    type: [PROP_TYPE_ARRAY, PROP_TYPE_STRING],
+    required: false,
+    default: undefined
+  },
+  // Supported localCompare options, see `options` section of:
+  // https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/String/localeCompare
+  sortCompareOptions: {
+    type: PROP_TYPE_OBJECT,
+    required: false,
+    default: () => ({
+      numeric: true
+    })
+  },
+  // TODO: Make this tri-state: `true`, `false`, `null`
+  [MODEL_PROP_NAME_SORT_DESC]: {
+    type: PROP_TYPE_BOOLEAN,
+    required: false,
+    default: false
+  },
+  // This prop is named incorrectly
+  // It should be `initialSortDirection` as it is a bit misleading
+  // (not to mention it screws up the ARIA label on the headers)
+  sortDirection: {
+    type: PROP_TYPE_STRING,
+    required: false,
+    default: SORT_DIRECTION_ASC,
+    validator: value => SORT_DIRECTIONS.includes(value)
+  },
+  // Place the sorting icon on the left of the header cells
+  sortIconLeft: {
+    type: PROP_TYPE_BOOLEAN,
+    required: false,
+    default: false
+  },
+  // Sort null and undefined to appear last
+  sortNullLast: {
+    type: PROP_TYPE_BOOLEAN,
+    required: false,
+    default: false
+  }
+};
+
+// --- Mixin ---
+
+// @vue/component
+const sortingMixin = extend({
+  props,
+  data() {
+    return {
+      localSortBy: this[MODEL_PROP_NAME_SORT_BY] || '',
+      localSortDesc: this[MODEL_PROP_NAME_SORT_DESC] || false
+    };
+  },
+  computed: {
+    localSorting() {
+      return this.hasProvider ? !!this.noProviderSorting : !this.noLocalSorting;
+    },
+    isSortable() {
+      return this.computedFields.some(f => f.sortable);
+    },
+    // Sorts the filtered items and returns a new array of the sorted items
+    // When not sorted, the original items array will be returned
+    sortedItems() {
+      const {
+        localSortBy: sortBy,
+        localSortDesc: sortDesc,
+        sortCompareLocale: locale,
+        sortNullLast: nullLast,
+        sortCompare,
+        localSorting,
+        filteredItems,
+        localItems
+      } = safeVueInstance(this);
+      const items = (filteredItems || localItems || []).slice();
+      const localeOptions = {
+        ...this.sortCompareOptions,
+        usage: 'sort'
+      };
+      if (sortBy && localSorting) {
+        const field = this.computedFieldsObj[sortBy] || {};
+        const sortByFormatted = field.sortByFormatted;
+        const formatter = isFunction(sortByFormatted) ? /* istanbul ignore next */sortByFormatted : sortByFormatted ? this.getFieldFormatter(sortBy) : undefined;
+
+        // `stableSort` returns a new array, and leaves the original array intact
+        return stableSort(items, (a, b) => {
+          let result = null;
+          // Call user provided `sortCompare` routine first
+          if (isFunction(sortCompare)) {
+            // TODO:
+            //   Change the `sortCompare` signature to the one of `defaultSortCompare`
+            //   with the next major version bump
+            result = sortCompare(a, b, sortBy, sortDesc, formatter, localeOptions, locale);
+          }
+          // Fallback to built-in `defaultSortCompare` if `sortCompare`
+          // is not defined or returns `null`/`false`
+          if (isUndefinedOrNull(result) || result === false) {
+            result = defaultSortCompare(a, b, {
+              sortBy,
+              formatter,
+              locale,
+              localeOptions,
+              nullLast
+            });
+          }
+          // Negate result if sorting in descending order
+          return (result || 0) * (sortDesc ? -1 : 1);
+        });
+      }
+      return items;
+    }
+  },
+  watch: {
+    [MODEL_PROP_NAME_SORT_DESC](newValue) {
+      /* istanbul ignore next */
+      if (newValue === this.localSortDesc) {
+        return;
+      }
+      this.localSortDesc = newValue || false;
+    },
+    [MODEL_PROP_NAME_SORT_BY](newValue) {
+      /* istanbul ignore next */
+      if (newValue === this.localSortBy) {
+        return;
+      }
+      this.localSortBy = newValue || '';
+    },
+    // Update .sync props
+    localSortDesc(newValue, oldValue) {
+      // Emit update to sort-desc.sync
+      if (newValue !== oldValue) {
+        this.$emit(MODEL_EVENT_NAME_SORT_DESC, newValue);
+      }
+    },
+    localSortBy(newValue, oldValue) {
+      if (newValue !== oldValue) {
+        this.$emit(MODEL_EVENT_NAME_SORT_BY, newValue);
+      }
+    }
+  },
+  methods: {
+    // Handlers
+    // Need to move from thead-mixin
+    handleSort(key, field, event, isFoot) {
+      if (!this.isSortable) {
+        /* istanbul ignore next */
+        return;
+      }
+      if (isFoot && this.noFooterSorting) {
+        return;
+      }
+      // TODO: make this tri-state sorting
+      // cycle desc => asc => none => desc => ...
+      let sortChanged = false;
+      const toggleLocalSortDesc = () => {
+        const sortDirection = field.sortDirection || this.sortDirection;
+        if (sortDirection === SORT_DIRECTION_ASC) {
+          this.localSortDesc = false;
+        } else if (sortDirection === SORT_DIRECTION_DESC) {
+          this.localSortDesc = true;
+        } else ;
+      };
+      if (field.sortable) {
+        const sortKey = !this.localSorting && field.sortKey ? field.sortKey : key;
+        if (this.localSortBy === sortKey) {
+          // Change sorting direction on current column
+          this.localSortDesc = !this.localSortDesc;
+        } else {
+          // Start sorting this column ascending
+          this.localSortBy = sortKey;
+          // this.localSortDesc = false
+          toggleLocalSortDesc();
+        }
+        sortChanged = true;
+      } else if (this.localSortBy && !this.noSortReset) {
+        this.localSortBy = '';
+        toggleLocalSortDesc();
+        sortChanged = true;
+      }
+      if (sortChanged) {
+        // Sorting parameters changed
+        this.$emit(EVENT_NAME_SORT_CHANGED, this.context);
+      }
+    },
+    // methods to compute classes and attrs for thead>th cells
+    sortTheadThClasses(key, field, isFoot) {
+      return {
+        // If sortable and sortIconLeft are true, then place sort icon on the left
+        'b-table-sort-icon-left': field.sortable && this.sortIconLeft && !(isFoot && this.noFooterSorting)
+      };
+    },
+    sortTheadThAttrs(key, field, isFoot) {
+      var _field$sortKey;
+      const {
+        isSortable,
+        noFooterSorting,
+        localSortDesc,
+        localSortBy,
+        localSorting
+      } = this;
+      if (!isSortable || isFoot && noFooterSorting) {
+        // No attributes if not a sortable table
+        return {};
+      }
+      const sortable = field.sortable;
+      const sortKey = !localSorting ? (_field$sortKey = field.sortKey) !== null && _field$sortKey !== void 0 ? _field$sortKey : key : key;
+
+      // Assemble the aria-sort attribute value
+      const ariaSort = sortable && localSortBy === sortKey ? localSortDesc ? 'descending' : 'ascending' : sortable ? 'none' : null;
+      // Return the attribute
+      return {
+        'aria-sort': ariaSort
+      };
+    },
+    // A label to be placed in an `.gl-sr-only` element in the header cell
+    sortTheadThLabel(key, field, isFoot) {
+      // No label if not a sortable table
+      if (!this.isSortable || isFoot && this.noFooterSorting) {
+        return null;
+      }
+      const {
+        localSortBy,
+        localSortDesc,
+        labelSortAsc,
+        labelSortDesc
+      } = this;
+      const {
+        sortable
+      } = field;
+      // The correctness of these labels is very important for screen reader users
+      let labelSorting = '';
+      if (sortable) {
+        if (localSortBy === key) {
+          // Currently sorted sortable column
+          labelSorting = localSortDesc ? labelSortAsc : labelSortDesc;
+        } else {
+          // Not currently sorted sortable column
+          // Not using nested ternary's here for clarity/readability
+          // Default for `aria-label`
+          labelSorting = localSortDesc ? labelSortDesc : labelSortAsc;
+          // Handle `sortDirection` setting
+          const sortDirection = this.sortDirection || field.sortDirection;
+          if (sortDirection === SORT_DIRECTION_ASC) {
+            labelSorting = labelSortAsc;
+          } else if (sortDirection === SORT_DIRECTION_DESC) {
+            labelSorting = labelSortDesc;
+          }
+        }
+      } else if (!this.noSortReset) {
+        // Non sortable column
+        labelSorting = localSortBy ? this.labelSortClear : '';
+      }
+      // Return the `.gl-sr-only` sort label or `null` if no label
+      return trim(labelSorting) || null;
+    }
+  }
+});
+
+export { props, sortingMixin };

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

@@ -0,0 +1,42 @@
+import { extend } from '../../../vue';
+import { PROP_TYPE_BOOLEAN, PROP_TYPE_STRING } from '../../../constants/props';
+
+// --- Props ---
+
+const props = {
+  stacked: {
+    type: [PROP_TYPE_BOOLEAN, PROP_TYPE_STRING],
+    required: false,
+    default: false
+  }
+};
+
+// --- Mixin ---
+
+// @vue/component
+const stackedMixin = extend({
+  props,
+  computed: {
+    isStacked() {
+      const {
+        stacked
+      } = this;
+      // `true` when always stacked, or returns breakpoint specified
+      return stacked === '' ? true : stacked;
+    },
+    isStackedAlways() {
+      return this.isStacked === true;
+    },
+    stackedTableClasses() {
+      const {
+        isStackedAlways
+      } = this;
+      return {
+        'b-table-stacked': isStackedAlways,
+        [`b-table-stacked-${this.stacked}`]: !isStackedAlways && this.isStacked
+      };
+    }
+  }
+});
+
+export { props, stackedMixin };

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

@@ -0,0 +1,241 @@
+import { extend } from '../../../vue';
+import { PROP_TYPE_BOOLEAN, PROP_TYPE_STRING, PROP_TYPE_ARRAY, PROP_TYPE_OBJECT } from '../../../constants/props';
+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: PROP_TYPE_BOOLEAN,
+    required: false,
+    default: false
+  },
+  borderless: {
+    type: PROP_TYPE_BOOLEAN,
+    required: false,
+    default: false
+  },
+  captionTop: {
+    type: PROP_TYPE_BOOLEAN,
+    required: false,
+    default: false
+  },
+  dark: {
+    type: PROP_TYPE_BOOLEAN,
+    required: false,
+    default: false
+  },
+  fixed: {
+    type: PROP_TYPE_BOOLEAN,
+    required: false,
+    default: false
+  },
+  hover: {
+    type: PROP_TYPE_BOOLEAN,
+    required: false,
+    default: false
+  },
+  noBorderCollapse: {
+    type: PROP_TYPE_BOOLEAN,
+    required: false,
+    default: false
+  },
+  outlined: {
+    type: PROP_TYPE_BOOLEAN,
+    required: false,
+    default: false
+  },
+  responsive: {
+    type: [PROP_TYPE_BOOLEAN, PROP_TYPE_STRING],
+    required: false,
+    default: false
+  },
+  small: {
+    type: PROP_TYPE_BOOLEAN,
+    required: false,
+    default: false
+  },
+  // If a string, it is assumed to be the table `max-height` value
+  stickyHeader: {
+    type: [PROP_TYPE_BOOLEAN, PROP_TYPE_STRING],
+    required: false,
+    default: false
+  },
+  striped: {
+    type: PROP_TYPE_BOOLEAN,
+    required: false,
+    default: false
+  },
+  tableClass: {
+    type: [PROP_TYPE_ARRAY, PROP_TYPE_OBJECT, PROP_TYPE_STRING],
+    required: false,
+    default: undefined
+  },
+  tableVariant: {
+    type: PROP_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;
+      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 };