@gitlab/ui 132.0.1 → 132.0.3

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

@@ -0,0 +1,210 @@
+import { extend } from '../../../vue';
+import { NAME_TABLE } from '../../../constants/components';
+import { EVENT_NAME_REFRESHED, EVENT_NAME_REFRESH } from '../../../constants/events';
+import { PROP_TYPE_STRING, PROP_TYPE_ARRAY, PROP_TYPE_FUNCTION, PROP_TYPE_BOOLEAN } from '../../../constants/props';
+import { getRootEventName, getRootActionEventName } from '../../../utils/events';
+import { isFunction, isArray, isPromise } from '../../../utils/inspect';
+import { looseEqual } from '../../../utils/loose-equal';
+import { clone } from '../../../utils/object';
+import { safeVueInstance } from '../../../utils/safe-vue-instance';
+import { warn } from '../../../utils/warn';
+import { listenOnRootMixin } from '../../../mixins/listen-on-root';
+
+// --- Constants ---
+
+const ROOT_EVENT_NAME_REFRESHED = getRootEventName(NAME_TABLE, EVENT_NAME_REFRESHED);
+const ROOT_ACTION_EVENT_NAME_REFRESH = getRootActionEventName(NAME_TABLE, EVENT_NAME_REFRESH);
+
+// --- Props ---
+
+const props = {
+  // Passed to the context object
+  // Not used by `<b-table>` directly
+  apiUrl: {
+    type: PROP_TYPE_STRING,
+    required: false,
+    default: undefined
+  },
+  // Adds in 'Function' support
+  items: {
+    type: [PROP_TYPE_ARRAY, PROP_TYPE_FUNCTION],
+    required: false,
+    default: () => []
+  },
+  noProviderFiltering: {
+    type: PROP_TYPE_BOOLEAN,
+    required: false,
+    default: false
+  },
+  noProviderPaging: {
+    type: PROP_TYPE_BOOLEAN,
+    required: false,
+    default: false
+  },
+  noProviderSorting: {
+    type: PROP_TYPE_BOOLEAN,
+    required: false,
+    default: false
+  }
+};
+
+// --- Mixin ---
+
+// @vue/component
+const providerMixin = extend({
+  mixins: [listenOnRootMixin],
+  props,
+  computed: {
+    hasProvider() {
+      return isFunction(this.items);
+    },
+    providerTriggerContext() {
+      // Used to trigger the provider function via a watcher. Only the fields that
+      // are needed for triggering a provider update are included. Note that the
+      // regular this.context is sent to the provider during fetches though, as they
+      // may need all the prop info.
+      const ctx = {
+        apiUrl: this.apiUrl,
+        filter: null,
+        sortBy: null,
+        sortDesc: null,
+        perPage: null,
+        currentPage: null
+      };
+      if (!this.noProviderFiltering) {
+        // Either a string, or could be an object or array.
+        ctx.filter = this.localFilter;
+      }
+      if (!this.noProviderSorting) {
+        ctx.sortBy = this.localSortBy;
+        ctx.sortDesc = this.localSortDesc;
+      }
+      if (!this.noProviderPaging) {
+        ctx.perPage = this.perPage;
+        ctx.currentPage = this.currentPage;
+      }
+      return clone(ctx);
+    }
+  },
+  watch: {
+    // Provider update triggering
+    items(newValue) {
+      // If a new provider has been specified, trigger an update
+      if (this.hasProvider || isFunction(newValue)) {
+        this.$nextTick(this._providerUpdate);
+      }
+    },
+    providerTriggerContext(newValue, oldValue) {
+      // Trigger the provider to update as the relevant context values have changed.
+      if (!looseEqual(newValue, oldValue)) {
+        this.$nextTick(this._providerUpdate);
+      }
+    }
+  },
+  mounted() {
+    // Call the items provider if necessary
+    if (this.hasProvider && (!this.localItems || this.localItems.length === 0)) {
+      // Fetch on mount if localItems is empty
+      this._providerUpdate();
+    }
+    // Listen for global messages to tell us to force refresh the table
+    this.listenOnRoot(ROOT_ACTION_EVENT_NAME_REFRESH, id => {
+      if (id === this.id || id === this) {
+        this.refresh();
+      }
+    });
+  },
+  methods: {
+    refresh() {
+      const {
+        items,
+        computedBusy
+      } = safeVueInstance(this);
+
+      // Public Method: Force a refresh of the provider function
+      this.$_pendingRefresh = false;
+      if (computedBusy) {
+        // Can't force an update when forced busy by user (busy prop === true)
+        if (this.localBusy && this.hasProvider) {
+          // But if provider running (localBusy), re-schedule refresh once `refreshed` emitted
+          this.$_pendingRefresh = true;
+        }
+      } else {
+        this.clearSelected();
+        if (this.hasProvider) {
+          this.$nextTick(this._providerUpdate);
+        } else {
+          /* istanbul ignore next */
+          this.localItems = isArray(items) ? items.slice() : [];
+        }
+      }
+    },
+    // Provider related methods
+    _providerSetLocal(items) {
+      this.localItems = isArray(items) ? items.slice() : [];
+      this.localBusy = false;
+      this.$emit(EVENT_NAME_REFRESHED);
+      // New root emit
+      if (this.id) {
+        this.emitOnRoot(ROOT_EVENT_NAME_REFRESHED, this.id);
+      }
+      // Handle pending refresh request
+      if (this.$_pendingRefresh) {
+        this.$_pendingRefresh = false;
+        this.refresh();
+      }
+    },
+    _providerUpdate() {
+      // Refresh the provider function items.
+      if (!this.hasProvider) {
+        // Do nothing if no provider
+        return;
+      }
+      // If table is busy, wait until refreshed before calling again
+      if (safeVueInstance(this).computedBusy) {
+        // Schedule a new refresh once `refreshed` is emitted
+        this.$nextTick(this.refresh);
+        return;
+      }
+
+      // Set internal busy state
+      this.localBusy = true;
+
+      // Call provider function with context and optional callback after DOM is fully updated
+      this.$nextTick(() => {
+        try {
+          // Call provider function passing it the context and optional callback
+          const data = this.items(this.context, this._providerSetLocal);
+          if (isPromise(data)) {
+            // Provider returned Promise
+            data.then(items => {
+              // Provider resolved with items
+              this._providerSetLocal(items);
+            });
+          } else if (isArray(data)) {
+            // Provider returned Array data
+            this._providerSetLocal(data);
+          } else {
+            /* istanbul ignore if */
+            if (this.items.length !== 2) {
+              // Check number of arguments provider function requested
+              // Provider not using callback (didn't request second argument), so we clear
+              // busy state as most likely there was an error in the provider function
+              /* istanbul ignore next */
+              warn("Provider function didn't request callback and did not return a promise or data.", NAME_TABLE);
+              this.localBusy = false;
+            }
+          }
+        } catch (e) /* istanbul ignore next */{
+          // Provider function borked on us, so we spew out a warning
+          // and clear the busy state
+          warn(`Provider function error [${e.name}] ${e.message}.`, NAME_TABLE);
+          this.localBusy = false;
+          this.$_pendingRefresh = false;
+        }
+      });
+    }
+  }
+});
+
+export { props, providerMixin };

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

@@ -0,0 +1,227 @@
+import { extend } from '../../../vue';
+import { EVENT_NAME_ROW_SELECTED } from '../../../constants/events';
+import { PROP_TYPE_BOOLEAN, PROP_TYPE_STRING } from '../../../constants/props';
+import { createArray } from '../../../utils/array';
+import { identity } from '../../../utils/identity';
+import { isArray, isNumber } from '../../../utils/inspect';
+import { looseEqual } from '../../../utils/loose-equal';
+import { mathMin, mathMax } from '../../../utils/math';
+import { toString } from '../../../utils/string';
+import { sanitizeRow } from './sanitize-row';
+
+// --- Constants ---
+
+const SELECT_MODES = ['range', 'multi', 'single'];
+const ROLE_GRID = 'grid';
+
+// --- Props ---
+
+const props = {
+  // Disable use of click handlers for row selection
+  noSelectOnClick: {
+    type: PROP_TYPE_BOOLEAN,
+    required: false,
+    default: false
+  },
+  selectMode: {
+    type: PROP_TYPE_STRING,
+    required: false,
+    default: 'multi',
+    validator: value => SELECT_MODES.includes(value)
+  },
+  selectable: {
+    type: PROP_TYPE_BOOLEAN,
+    required: false,
+    default: false
+  },
+  selectedVariant: {
+    type: PROP_TYPE_STRING,
+    required: false,
+    default: 'active'
+  }
+};
+
+// --- Mixin ---
+
+// @vue/component
+const selectableMixin = extend({
+  props,
+  data() {
+    return {
+      selectedRows: [],
+      selectedLastRow: -1
+    };
+  },
+  computed: {
+    isSelectable() {
+      return this.selectable && this.selectMode;
+    },
+    hasSelectableRowClick() {
+      return this.isSelectable && !this.noSelectOnClick;
+    },
+    supportsSelectableRows() {
+      return true;
+    },
+    selectableHasSelection() {
+      const {
+        selectedRows
+      } = this;
+      return this.isSelectable && selectedRows && selectedRows.length > 0 && selectedRows.some(identity);
+    },
+    selectableIsMultiSelect() {
+      return this.isSelectable && ['range', 'multi'].includes(this.selectMode);
+    },
+    selectableTableClasses() {
+      const {
+        isSelectable
+      } = this;
+      return {
+        'b-table-selectable': isSelectable,
+        [`b-table-select-${this.selectMode}`]: isSelectable,
+        'b-table-selecting': this.selectableHasSelection,
+        'b-table-selectable-no-click': isSelectable && !this.hasSelectableRowClick
+      };
+    },
+    selectableTableAttrs() {
+      if (!this.isSelectable) {
+        return {};
+      }
+      const role = this.bvAttrs.role || ROLE_GRID;
+      return {
+        role,
+        // TODO:
+        //   Should this attribute not be included when `no-select-on-click` is set
+        //   since this attribute implies keyboard navigation?
+        'aria-multiselectable': role === ROLE_GRID ? toString(this.selectableIsMultiSelect) : null
+      };
+    }
+  },
+  watch: {
+    computedItems(newValue, oldValue) {
+      // Reset for selectable
+      let equal = false;
+      if (this.isSelectable && this.selectedRows.length > 0) {
+        // Quick check against array length
+        equal = isArray(newValue) && isArray(oldValue) && newValue.length === oldValue.length;
+        for (let i = 0; equal && i < newValue.length; i++) {
+          // Look for the first non-loosely equal row, after ignoring reserved fields
+          equal = looseEqual(sanitizeRow(newValue[i]), sanitizeRow(oldValue[i]));
+        }
+      }
+      if (!equal) {
+        this.clearSelected();
+      }
+    },
+    selectable() {
+      this.clearSelected();
+    },
+    selectMode() {
+      this.clearSelected();
+    },
+    hasSelectableRowClick() {
+      this.clearSelected();
+    },
+    selectedRows(selectedRows, oldValue) {
+      if (this.isSelectable && !looseEqual(selectedRows, oldValue)) {
+        const items = [];
+        // `.forEach()` skips over non-existent indices (on sparse arrays)
+        selectedRows.forEach((v, idx) => {
+          if (v) {
+            items.push(this.computedItems[idx]);
+          }
+        });
+        this.$emit(EVENT_NAME_ROW_SELECTED, items);
+      }
+    }
+  },
+  methods: {
+    // Public methods
+    selectRow(index) {
+      // Select a particular row (indexed based on computedItems)
+      if (this.isSelectable && isNumber(index) && index >= 0 && index < this.computedItems.length && !this.isRowSelected(index)) {
+        const selectedRows = this.selectableIsMultiSelect ? this.selectedRows.slice() : [];
+        selectedRows[index] = true;
+        this.selectedLastClicked = -1;
+        this.selectedRows = selectedRows;
+      }
+    },
+    unselectRow(index) {
+      // Un-select a particular row (indexed based on `computedItems`)
+      if (this.isSelectable && isNumber(index) && this.isRowSelected(index)) {
+        const selectedRows = this.selectedRows.slice();
+        selectedRows[index] = false;
+        this.selectedLastClicked = -1;
+        this.selectedRows = selectedRows;
+      }
+    },
+    selectAllRows() {
+      const length = this.computedItems.length;
+      if (this.isSelectable && length > 0) {
+        this.selectedLastClicked = -1;
+        this.selectedRows = this.selectableIsMultiSelect ? createArray(length, true) : [true];
+      }
+    },
+    isRowSelected(index) {
+      // Determine if a row is selected (indexed based on `computedItems`)
+      return !!(isNumber(index) && this.selectedRows[index]);
+    },
+    clearSelected() {
+      // Clear any active selected row(s)
+      this.selectedLastClicked = -1;
+      this.selectedRows = [];
+    },
+    // Internal private methods
+    selectableRowClasses(index) {
+      if (this.isSelectable && this.isRowSelected(index)) {
+        const variant = this.selectedVariant;
+        return {
+          'b-table-row-selected': true,
+          [`${this.dark ? 'bg' : 'table'}-${variant}`]: variant
+        };
+      }
+      return {};
+    },
+    selectableRowAttrs(index) {
+      return {
+        'aria-selected': !this.isSelectable ? null : this.isRowSelected(index) ? 'true' : 'false'
+      };
+    },
+    selectionHandler(item, index, event) {
+      /* istanbul ignore if: should never happen */
+      if (!this.isSelectable || this.noSelectOnClick) {
+        // Don't do anything if table is not in selectable mode
+        this.clearSelected();
+        return;
+      }
+      const {
+        selectMode,
+        selectedLastRow
+      } = this;
+      let selectedRows = this.selectedRows.slice();
+      let selected = !selectedRows[index];
+      // Note 'multi' mode needs no special event handling
+      if (selectMode === 'single') {
+        selectedRows = [];
+      } else if (selectMode === 'range') {
+        if (selectedLastRow > -1 && event.shiftKey) {
+          // range
+          for (let idx = mathMin(selectedLastRow, index); idx <= mathMax(selectedLastRow, index); idx++) {
+            selectedRows[idx] = true;
+          }
+          selected = true;
+        } else {
+          if (!(event.ctrlKey || event.metaKey)) {
+            // Clear range selection if any
+            selectedRows = [];
+            selected = true;
+          }
+          if (selected) this.selectedLastRow = index;
+        }
+      }
+      selectedRows[index] = selected;
+      this.selectedRows = selectedRows;
+    }
+  }
+});
+
+export { props, selectableMixin };