@gitlab/ui 84.1.0 → 85.0.0

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

@@ -0,0 +1,146 @@
+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, isFunction, isString } 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 { clone, sortKeys } 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: []
+})
+
+export { MODEL_PROP_NAME, MODEL_EVENT_NAME }
+
+// --- Props ---
+
+export 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
+export 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)
+      }
+    }
+  },
+  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
+    }
+  }
+})

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

@@ -0,0 +1,38 @@
+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 ---
+
+export const props = {
+  currentPage: makeProp(PROP_TYPE_NUMBER_STRING, 1),
+  perPage: makeProp(PROP_TYPE_NUMBER_STRING, 0)
+}
+
+// --- Mixin ---
+
+// @vue/component
+export 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
+    }
+  }
+})

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

@@ -0,0 +1,188 @@
+import { extend } from '../../../vue'
+import { NAME_TABLE } from '../../../constants/components'
+import { EVENT_NAME_REFRESH, EVENT_NAME_REFRESHED } from '../../../constants/events'
+import {
+  PROP_TYPE_ARRAY_FUNCTION,
+  PROP_TYPE_BOOLEAN,
+  PROP_TYPE_STRING
+} from '../../../constants/props'
+import { getRootActionEventName, getRootEventName } from '../../../utils/events'
+import { isArray, isFunction, 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 ---
+
+export 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
+export 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, refresh, computedBusy } = safeVueInstance(this)
+
+      // Public Method: Force a refresh of the provider function
+      this.$off(EVENT_NAME_REFRESHED, refresh)
+      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.$on(EVENT_NAME_REFRESHED, refresh)
+        }
+      } 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)
+      }
+    },
+    _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.$off(EVENT_NAME_REFRESHED, this.refresh)
+        }
+      })
+    }
+  }
+})

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

@@ -0,0 +1,241 @@
+import { extend } from '../../../vue'
+import {
+  EVENT_NAME_CONTEXT_CHANGED,
+  EVENT_NAME_FILTERED,
+  EVENT_NAME_ROW_CLICKED,
+  EVENT_NAME_ROW_SELECTED
+} from '../../../constants/events'
+import { PROP_TYPE_BOOLEAN, PROP_TYPE_STRING } from '../../../constants/props'
+import { arrayIncludes, createArray } from '../../../utils/array'
+import { identity } from '../../../utils/identity'
+import { isArray, isNumber } from '../../../utils/inspect'
+import { looseEqual } from '../../../utils/loose-equal'
+import { mathMax, mathMin } from '../../../utils/math'
+import { makeProp } from '../../../utils/props'
+import { toString } from '../../../utils/string'
+import { sanitizeRow } from './sanitize-row'
+
+// --- Constants ---
+
+const SELECT_MODES = ['range', 'multi', 'single']
+
+const ROLE_GRID = 'grid'
+
+// --- Props ---
+
+export const props = {
+  // Disable use of click handlers for row selection
+  noSelectOnClick: makeProp(PROP_TYPE_BOOLEAN, false),
+  selectMode: makeProp(PROP_TYPE_STRING, 'multi', value => {
+    return arrayIncludes(SELECT_MODES, value)
+  }),
+  selectable: makeProp(PROP_TYPE_BOOLEAN, false),
+  selectedVariant: makeProp(PROP_TYPE_STRING, 'active')
+}
+
+// --- Mixin ---
+
+// @vue/component
+export 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 && arrayIncludes(['range', 'multi'], 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(newValue) {
+      this.clearSelected()
+      this.setSelectionHandlers(newValue)
+    },
+    selectMode() {
+      this.clearSelected()
+    },
+    hasSelectableRowClick(newValue) {
+      this.clearSelected()
+      this.setSelectionHandlers(!newValue)
+    },
+    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)
+      }
+    }
+  },
+  beforeMount() {
+    // Set up handlers if needed
+    if (this.isSelectable) {
+      this.setSelectionHandlers(true)
+    }
+  },
+  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'
+      }
+    },
+    setSelectionHandlers(on) {
+      const method = on && !this.noSelectOnClick ? '$on' : '$off'
+      // Handle row-clicked event
+      this[method](EVENT_NAME_ROW_CLICKED, this.selectionHandler)
+      // Clear selection on filter, pagination, and sort changes
+      this[method](EVENT_NAME_FILTERED, this.clearSelected)
+      this[method](EVENT_NAME_CONTEXT_CHANGED, this.clearSelected)
+    },
+    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
+    }
+  }
+})