@gitlab/ui 132.0.1 → 132.0.2

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

@@ -0,0 +1,292 @@
+import { extend } from '../../../vue';
+import { NAME_TABLE } from '../../../constants/components';
+import { EVENT_NAME_FILTERED } from '../../../constants/events';
+import { PROP_TYPE_ARRAY, PROP_TYPE_OBJECT, PROP_TYPE_STRING, PROP_TYPE_REG_EXP, PROP_TYPE_NUMBER, PROP_TYPE_FUNCTION } from '../../../constants/props';
+import { RX_SPACES, RX_DIGITS } from '../../../constants/regex';
+import { concat } from '../../../utils/array';
+import { cloneDeep } from '../../../utils/clone-deep';
+import { identity } from '../../../utils/identity';
+import { isFunction, isString, isRegExp } from '../../../utils/inspect';
+import { looseEqual } from '../../../utils/loose-equal';
+import { toInteger } from '../../../utils/number';
+import { escapeRegExp } from '../../../utils/string';
+import { warn } from '../../../utils/warn';
+import { stringifyRecordValues } from './stringify-record-values';
+
+// --- Constants ---
+
+const DEBOUNCE_DEPRECATED_MSG = 'Prop "filter-debounce" is deprecated. Use the debounce feature of "<b-form-input>" instead.';
+
+// --- Props ---
+
+const props = {
+  filter: {
+    type: [PROP_TYPE_ARRAY, PROP_TYPE_OBJECT, PROP_TYPE_STRING, PROP_TYPE_REG_EXP],
+    required: false,
+    default: undefined
+  },
+  filterDebounce: {
+    type: [PROP_TYPE_NUMBER, PROP_TYPE_STRING],
+    required: false,
+    default: 0,
+    validator: value => RX_DIGITS.test(String(value))
+  },
+  filterFunction: {
+    type: PROP_TYPE_FUNCTION,
+    required: false,
+    default: undefined
+  },
+  filterIgnoredFields: {
+    type: PROP_TYPE_ARRAY,
+    required: false,
+    default: () => []
+  },
+  filterIncludedFields: {
+    type: PROP_TYPE_ARRAY,
+    required: false,
+    default: () => []
+  }
+};
+
+// --- Mixin ---
+
+// @vue/component
+const filteringMixin = extend({
+  props,
+  data() {
+    return {
+      // Flag for displaying which empty slot to show and some event triggering
+      isFiltered: false,
+      // Where we store the copy of the filter criteria after debouncing
+      // We pre-set it with the sanitized filter value
+      localFilter: this.filterSanitize(this.filter)
+    };
+  },
+  computed: {
+    computedFilterIgnored() {
+      return concat(this.filterIgnoredFields || []).filter(identity);
+    },
+    computedFilterIncluded() {
+      return concat(this.filterIncludedFields || []).filter(identity);
+    },
+    computedFilterDebounce() {
+      const ms = toInteger(this.filterDebounce, 0);
+      /* istanbul ignore next */
+      if (ms > 0) {
+        warn(DEBOUNCE_DEPRECATED_MSG, NAME_TABLE);
+      }
+      return ms;
+    },
+    localFiltering() {
+      return this.hasProvider ? !!this.noProviderFiltering : true;
+    },
+    // For watching changes to `filteredItems` vs `localItems`
+    filteredCheck() {
+      const {
+        filteredItems,
+        localItems,
+        localFilter
+      } = this;
+      return {
+        filteredItems,
+        localItems,
+        localFilter
+      };
+    },
+    // Sanitized/normalize filter-function prop
+    localFilterFn() {
+      // Return `null` to signal to use internal filter function
+      const {
+        filterFunction
+      } = this;
+      // `filterFunction` is an optional Function prop with no default
+      return isFunction(filterFunction) ? filterFunction : null;
+    },
+    // Returns the records in `localItems` that match the filter criteria
+    // Returns the original `localItems` array if not sorting
+    filteredItems() {
+      // Note the criteria is debounced and sanitized
+      const {
+        localItems: items,
+        localFilter: criteria
+      } = this;
+
+      // Resolve the filtering function, when requested
+      // We prefer the provided filtering function and fallback to the internal one
+      // When no filtering criteria is specified the filtering factories will return `null`
+      const filterFn = this.localFiltering ? this.filterFnFactory(this.localFilterFn, criteria) || this.defaultFilterFnFactory(criteria) : null;
+
+      // We only do local filtering when requested and there are records to filter
+      return filterFn && items.length > 0 ? items.filter(filterFn) : items;
+    }
+  },
+  watch: {
+    // Watch for debounce being set to 0
+    computedFilterDebounce(newValue) {
+      if (!newValue && this.$_filterTimer) {
+        this.clearFilterTimer();
+        this.localFilter = this.filterSanitize(this.filter);
+      }
+    },
+    // Watch for changes to the filter criteria, and debounce if necessary
+    filter: {
+      // We need a deep watcher in case the user passes
+      // an object when using `filter-function`
+      deep: true,
+      handler(newCriteria) {
+        const timeout = this.computedFilterDebounce;
+        this.clearFilterTimer();
+        if (timeout && timeout > 0) {
+          // If we have a debounce time, delay the update of `localFilter`
+          this.$_filterTimer = setTimeout(() => {
+            this.localFilter = this.filterSanitize(newCriteria);
+          }, timeout);
+        } else {
+          // Otherwise, immediately update `localFilter` with `newFilter` value
+          this.localFilter = this.filterSanitize(newCriteria);
+        }
+      }
+    },
+    // Watch for changes to the filter criteria and filtered items vs `localItems`
+    // Set visual state and emit events as required
+    filteredCheck(_ref) {
+      let {
+        filteredItems,
+        localFilter
+      } = _ref;
+      // Determine if the dataset is filtered or not
+      let isFiltered = false;
+      if (!localFilter) {
+        // If filter criteria is falsey
+        isFiltered = false;
+      } else if (looseEqual(localFilter, []) || looseEqual(localFilter, {})) {
+        // If filter criteria is an empty array or object
+        isFiltered = false;
+      } else if (localFilter) {
+        // If filter criteria is truthy
+        isFiltered = true;
+      }
+      if (isFiltered) {
+        this.$emit(EVENT_NAME_FILTERED, filteredItems, filteredItems.length);
+        // Clear selection on filter change if selectable (defined in mixin-selectable.js)
+        if (this.hasSelectableRowClick) {
+          this.clearSelected();
+        }
+      }
+      this.isFiltered = isFiltered;
+    },
+    isFiltered(newValue, oldValue) {
+      if (newValue === false && oldValue === true) {
+        // We need to emit a filtered event if `isFiltered` transitions from `true` to
+        // `false` so that users can update their pagination controls
+        const {
+          localItems
+        } = this;
+        this.$emit(EVENT_NAME_FILTERED, localItems, localItems.length);
+        // Clear selection on filter change if selectable (defined in mixin-selectable.js)
+        if (this.hasSelectableRowClick) {
+          this.clearSelected();
+        }
+      }
+    }
+  },
+  created() {
+    // Create private non-reactive props
+    this.$_filterTimer = null;
+    // If filter is "pre-set", set the criteria
+    // This will trigger any watchers/dependents
+    // this.localFilter = this.filterSanitize(this.filter)
+    // Set the initial filtered state in a `$nextTick()` so that
+    // we trigger a filtered event if needed
+    this.$nextTick(() => {
+      this.isFiltered = Boolean(this.localFilter);
+    });
+  },
+  beforeDestroy() {
+    this.clearFilterTimer();
+  },
+  methods: {
+    clearFilterTimer() {
+      clearTimeout(this.$_filterTimer);
+      this.$_filterTimer = null;
+    },
+    filterSanitize(criteria) {
+      // Sanitizes filter criteria based on internal or external filtering
+      if (this.localFiltering && !this.localFilterFn && !(isString(criteria) || isRegExp(criteria))) {
+        // If using internal filter function, which only accepts string or RegExp,
+        // return '' to signify no filter
+        return '';
+      }
+
+      // Could be a string, object or array, as needed by external filter function
+      // We use `cloneDeep` to ensure we have a new copy of an object or array
+      // without Vue's reactive observers
+      return cloneDeep(criteria);
+    },
+    // Filter Function factories
+    filterFnFactory(filterFn, criteria) {
+      // Wrapper factory for external filter functions
+      // Wrap the provided filter-function and return a new function
+      // Returns `null` if no filter-function defined or if criteria is falsey
+      // Rather than directly grabbing `this.computedLocalFilterFn` or `this.filterFunction`
+      // we have it passed, so that the caller computed prop will be reactive to changes
+      // in the original filter-function (as this routine is a method)
+      if (!filterFn || !isFunction(filterFn) || !criteria || looseEqual(criteria, []) || looseEqual(criteria, {})) {
+        return null;
+      }
+
+      // Build the wrapped filter test function, passing the criteria to the provided function
+      const fn = item => {
+        // Generated function returns true if the criteria matches part
+        // of the serialized data, otherwise false
+        return filterFn(item, criteria);
+      };
+
+      // Return the wrapped function
+      return fn;
+    },
+    defaultFilterFnFactory(criteria) {
+      // Generates the default filter function, using the given filter criteria
+      // Returns `null` if no criteria or criteria format not supported
+      if (!criteria || !(isString(criteria) || isRegExp(criteria))) {
+        // Built in filter can only support strings or RegExp criteria (at the moment)
+        return null;
+      }
+
+      // Build the RegExp needed for filtering
+      let regExp = criteria;
+      if (isString(regExp)) {
+        // Escape special RegExp characters in the string and convert contiguous
+        // whitespace to \s+ matches
+        const pattern = escapeRegExp(criteria).replace(RX_SPACES, '\\s+');
+        // Build the RegExp (no need for global flag, as we only need
+        // to find the value once in the string)
+        regExp = new RegExp(`.*${pattern}.*`, 'i');
+      }
+
+      // Generate the wrapped filter test function to use
+      const fn = item => {
+        // This searches all row values (and sub property values) in the entire (excluding
+        // special `_` prefixed keys), because we convert the record to a space-separated
+        // string containing all the value properties (recursively), even ones that are
+        // not visible (not specified in this.fields)
+        // Users can ignore filtering on specific fields, or on only certain fields,
+        // and can optionall specify searching results of fields with formatter
+        //
+        // TODO: Enable searching on scoped slots (optional, as it will be SLOW)
+        //
+        // Generated function returns true if the criteria matches part of
+        // the serialized data, otherwise false
+        //
+        // We set `lastIndex = 0` on the `RegExp` in case someone specifies the `/g` global flag
+        regExp.lastIndex = 0;
+        return regExp.test(stringifyRecordValues(item, this.computedFilterIgnored, this.computedFilterIncluded, this.computedFieldsObj));
+      };
+
+      // Return the generated function
+      return fn;
+    }
+  }
+});
+
+export { filteringMixin, props };

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

@@ -0,0 +1,154 @@
+import { extend } from '../../../vue';
+import { EVENT_NAME_CONTEXT_CHANGED } from '../../../constants/events';
+import { PROP_TYPE_ARRAY, PROP_TYPE_STRING } from '../../../constants/props';
+import { useParentMixin } from '../../../mixins/use-parent';
+import { isArray, isString, isFunction } from '../../../utils/inspect';
+import { looseEqual } from '../../../utils/loose-equal';
+import { mathMax } from '../../../utils/math';
+import { makeModelMixin } from '../../../utils/model';
+import { toInteger } from '../../../utils/number';
+import { sortKeys, clone } from '../../../utils/object';
+import { makeProp } from '../../../utils/props';
+import { safeVueInstance } from '../../../utils/safe-vue-instance';
+import { normalizeFields } from './normalize-fields';
+
+// --- Constants ---
+
+const {
+  mixin: modelMixin,
+  props: modelProps,
+  prop: MODEL_PROP_NAME,
+  event: MODEL_EVENT_NAME
+} = makeModelMixin('value', {
+  type: PROP_TYPE_ARRAY,
+  defaultValue: []
+});
+
+// --- Props ---
+
+const props = sortKeys({
+  ...modelProps,
+  fields: makeProp(PROP_TYPE_ARRAY, null),
+  // Provider mixin adds in `Function` type
+  items: makeProp(PROP_TYPE_ARRAY, []),
+  // Primary key for record
+  // If provided the value in each row must be unique!
+  primaryKey: makeProp(PROP_TYPE_STRING),
+  // `v-model` for retrieving the current displayed rows
+  [MODEL_PROP_NAME]: makeProp(PROP_TYPE_ARRAY, [])
+});
+
+// --- Mixin ---
+
+// @vue/component
+const itemsMixin = extend({
+  mixins: [modelMixin, useParentMixin],
+  props,
+  data() {
+    const {
+      items
+    } = this;
+    return {
+      // Our local copy of the items
+      // Must be an array
+      localItems: isArray(items) ? items.slice() : []
+    };
+  },
+  computed: {
+    computedFields() {
+      // We normalize fields into an array of objects
+      // `[ { key:..., label:..., ...}, {...}, ..., {..}]`
+      return normalizeFields(this.fields, this.localItems);
+    },
+    computedFieldsObj() {
+      // Fields as a simple lookup hash object
+      // Mainly for formatter lookup and use in `scopedSlots` for convenience
+      // If the field has a formatter, it normalizes formatter to a
+      // function ref or `undefined` if no formatter
+      const {
+        bvParent
+      } = this;
+      return this.computedFields.reduce((obj, f) => {
+        // We use object spread here so we don't mutate the original field object
+        obj[f.key] = clone(f);
+        if (f.formatter) {
+          // Normalize formatter to a function ref or `undefined`
+          let formatter = f.formatter;
+          if (isString(formatter) && isFunction(bvParent[formatter])) {
+            formatter = bvParent[formatter];
+          } else if (!isFunction(formatter)) {
+            /* istanbul ignore next */
+            formatter = undefined;
+          }
+          // Return formatter function or `undefined` if none
+          obj[f.key].formatter = formatter;
+        }
+        return obj;
+      }, {});
+    },
+    computedItems() {
+      const {
+        paginatedItems,
+        sortedItems,
+        filteredItems,
+        localItems
+      } = safeVueInstance(this);
+      // Fallback if various mixins not provided
+      return (paginatedItems || sortedItems || filteredItems || localItems || /* istanbul ignore next */
+      []).slice();
+    },
+    context() {
+      const {
+        perPage,
+        currentPage
+      } = safeVueInstance(this);
+      // Current state of sorting, filtering and pagination props/values
+      return {
+        filter: this.localFilter,
+        sortBy: this.localSortBy,
+        sortDesc: this.localSortDesc,
+        perPage: mathMax(toInteger(perPage, 0), 0),
+        currentPage: mathMax(toInteger(currentPage, 0), 1),
+        apiUrl: this.apiUrl
+      };
+    }
+  },
+  watch: {
+    items(newValue) {
+      // Set `localItems`/`filteredItems` to a copy of the provided array
+      this.localItems = isArray(newValue) ? newValue.slice() : [];
+    },
+    // Watch for changes on `computedItems` and update the `v-model`
+    computedItems(newValue, oldValue) {
+      if (!looseEqual(newValue, oldValue)) {
+        this.$emit(MODEL_EVENT_NAME, newValue);
+      }
+    },
+    // Watch for context changes
+    context(newValue, oldValue) {
+      // Emit context information for external paging/filtering/sorting handling
+      if (!looseEqual(newValue, oldValue)) {
+        this.$emit(EVENT_NAME_CONTEXT_CHANGED, newValue);
+        // Clear selection on context change if selectable (defined in mixin-selectable.js)
+        if (this.hasSelectableRowClick) {
+          this.clearSelected();
+        }
+      }
+    }
+  },
+  mounted() {
+    // Initially update the `v-model` of displayed items
+    this.$emit(MODEL_EVENT_NAME, this.computedItems);
+  },
+  methods: {
+    // Method to get the formatter method for a given field key
+    getFieldFormatter(key) {
+      const field = this.computedFieldsObj[key];
+      // `this.computedFieldsObj` has pre-normalized the formatter to a
+      // function ref if present, otherwise `undefined`
+      return field ? field.formatter : undefined;
+    }
+  }
+});
+
+export { MODEL_EVENT_NAME, MODEL_PROP_NAME, itemsMixin, props };

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

@@ -0,0 +1,44 @@
+import { extend } from '../../../vue';
+import { PROP_TYPE_NUMBER_STRING } from '../../../constants/props';
+import { mathMax } from '../../../utils/math';
+import { toInteger } from '../../../utils/number';
+import { makeProp } from '../../../utils/props';
+import { safeVueInstance } from '../../../utils/safe-vue-instance';
+
+// --- Props ---
+
+const props = {
+  currentPage: makeProp(PROP_TYPE_NUMBER_STRING, 1),
+  perPage: makeProp(PROP_TYPE_NUMBER_STRING, 0)
+};
+
+// --- Mixin ---
+
+// @vue/component
+const paginationMixin = extend({
+  props,
+  computed: {
+    localPaging() {
+      return this.hasProvider ? !!this.noProviderPaging : true;
+    },
+    paginatedItems() {
+      const {
+        sortedItems,
+        filteredItems,
+        localItems
+      } = safeVueInstance(this);
+      let items = sortedItems || filteredItems || localItems || [];
+      const currentPage = mathMax(toInteger(this.currentPage, 1), 1);
+      const perPage = mathMax(toInteger(this.perPage, 0), 0);
+      // Apply local pagination
+      if (this.localPaging && perPage) {
+        // Grab the current page of data (which may be past filtered items limit)
+        items = items.slice((currentPage - 1) * perPage, currentPage * perPage);
+      }
+      // Return the items to display in the table
+      return items;
+    }
+  }
+});
+
+export { paginationMixin, props };

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

@@ -0,0 +1,191 @@
+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_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 { makeProp } from '../../../utils/props';
+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: makeProp(PROP_TYPE_STRING),
+  // Adds in 'Function' support
+  items: makeProp(PROP_TYPE_ARRAY_FUNCTION, []),
+  noProviderFiltering: makeProp(PROP_TYPE_BOOLEAN, false),
+  noProviderPaging: makeProp(PROP_TYPE_BOOLEAN, false),
+  noProviderSorting: makeProp(PROP_TYPE_BOOLEAN, 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 };