@gitlab/duo-ui 0.1.0

package/src/vendor/bootstrap-vue/src/components/table/helpers/default-sort-compare.js

@@ -0,0 +1,60 @@
+import { get } from '../../../utils/get'
+import { isDate, isFunction, isNumber, isNumeric, isUndefinedOrNull } from '../../../utils/inspect'
+import { toFloat } from '../../../utils/number'
+import { stringifyObjectValues } from '../../../utils/stringify-object-values'
+
+const normalizeValue = value => {
+  if (isUndefinedOrNull(value)) {
+    return ''
+  }
+  if (isNumeric(value)) {
+    return toFloat(value, value)
+  }
+  return value
+}
+
+// Default sort compare routine
+//
+// TODO:
+//   Add option to sort by multiple columns (tri-state per column,
+//   plus order of columns in sort) where `sortBy` could be an array
+//   of objects `[ {key: 'foo', sortDir: 'asc'}, {key:'bar', sortDir: 'desc'} ...]`
+//   or an array of arrays `[ ['foo','asc'], ['bar','desc'] ]`
+//   Multisort will most likely be handled in `mixin-sort.js` by
+//   calling this method for each sortBy
+export const defaultSortCompare = (
+  a,
+  b,
+  { sortBy = null, formatter = null, locale = undefined, localeOptions = {}, nullLast = false } = {}
+) => {
+  // Get the value by `sortBy`
+  let aa = get(a, sortBy, null)
+  let bb = get(b, sortBy, null)
+
+  // Apply user-provided formatter
+  if (isFunction(formatter)) {
+    aa = formatter(aa, sortBy, a)
+    bb = formatter(bb, sortBy, b)
+  }
+
+  // Internally normalize value
+  // `null` / `undefined` => ''
+  // `'0'` => `0`
+  aa = normalizeValue(aa)
+  bb = normalizeValue(bb)
+
+  if ((isDate(aa) && isDate(bb)) || (isNumber(aa) && isNumber(bb))) {
+    // Special case for comparing dates and numbers
+    // Internally dates are compared via their epoch number values
+    return aa < bb ? -1 : aa > bb ? 1 : 0
+  } else if (nullLast && aa === '' && bb !== '') {
+    // Special case when sorting `null` / `undefined` / '' last
+    return 1
+  } else if (nullLast && aa !== '' && bb === '') {
+    // Special case when sorting `null` / `undefined` / '' last
+    return -1
+  }
+
+  // Do localized string comparison
+  return stringifyObjectValues(aa).localeCompare(stringifyObjectValues(bb), locale, localeOptions)
+}

package/src/vendor/bootstrap-vue/src/components/table/helpers/filter-event.js

@@ -0,0 +1,38 @@
+import { closest, getAttr, getById, matches, select } from '../../../utils/dom'
+import { EVENT_FILTER } from './constants'
+
+const TABLE_TAG_NAMES = ['TD', 'TH', 'TR']
+
+// Returns `true` if we should ignore the click/double-click/keypress event
+// Avoids having the user need to use `@click.stop` on the form control
+export const filterEvent = event => {
+  // Exit early when we don't have a target element
+  if (!event || !event.target) {
+    /* istanbul ignore next */
+    return false
+  }
+  const el = event.target
+  // Exit early when element is disabled or a table element
+  if (el.disabled || TABLE_TAG_NAMES.indexOf(el.tagName) !== -1) {
+    return false
+  }
+  // Ignore the click when it was inside a dropdown menu
+  if (closest('.dropdown-menu', el)) {
+    return true
+  }
+  const label = el.tagName === 'LABEL' ? el : closest('label', el)
+  // If the label's form control is not disabled then we don't propagate event
+  // Modern browsers have `label.control` that references the associated input, but IE 11
+  // does not have this property on the label element, so we resort to DOM lookups
+  if (label) {
+    const labelFor = getAttr(label, 'for')
+    const input = labelFor ? getById(labelFor) : select('input, select, textarea', label)
+    if (input && !input.disabled) {
+      return true
+    }
+  }
+  // Otherwise check if the event target matches one of the selectors in the
+  // event filter (i.e. anchors, non disabled inputs, etc.)
+  // Return `true` if we should ignore the event
+  return matches(el, EVENT_FILTER)
+}

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

@@ -0,0 +1,44 @@
+import { extend } from '../../../vue'
+import { SLOT_NAME_BOTTOM_ROW } from '../../../constants/slots'
+import { isFunction } from '../../../utils/inspect'
+import { BTr } from '../tr'
+
+// --- Props ---
+
+export const props = {}
+
+// --- Mixin ---
+
+// @vue/component
+export const bottomRowMixin = extend({
+  props,
+  methods: {
+    renderBottomRow() {
+      const { computedFields: fields, stacked, tbodyTrClass, tbodyTrAttr } = this
+      const h = this.$createElement
+
+      // Static bottom row slot (hidden in visibly stacked mode as we can't control the data-label)
+      // If in *always* stacked mode, we don't bother rendering the row
+      if (!this.hasNormalizedSlot(SLOT_NAME_BOTTOM_ROW) || stacked === true || stacked === '') {
+        return h()
+      }
+
+      return h(
+        BTr,
+        {
+          staticClass: 'b-table-bottom-row',
+          class: [
+            isFunction(tbodyTrClass)
+              ? /* istanbul ignore next */ tbodyTrClass(null, 'row-bottom')
+              : tbodyTrClass
+          ],
+          attrs: isFunction(tbodyTrAttr)
+            ? /* istanbul ignore next */ tbodyTrAttr(null, 'row-bottom')
+            : tbodyTrAttr,
+          key: 'b-bottom-row'
+        },
+        this.normalizeSlot(SLOT_NAME_BOTTOM_ROW, { columns: fields.length, fields })
+      )
+    }
+  }
+})

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

@@ -0,0 +1,88 @@
+import { extend } from '../../../vue'
+import { MODEL_EVENT_NAME_PREFIX } from '../../../constants/events'
+import { PROP_TYPE_BOOLEAN } from '../../../constants/props'
+import { SLOT_NAME_TABLE_BUSY } from '../../../constants/slots'
+import { stopEvent } from '../../../utils/events'
+import { isFunction } from '../../../utils/inspect'
+import { makeProp } from '../../../utils/props'
+import { BTr } from '../tr'
+import { BTd } from '../td'
+
+// --- Constants ---
+
+const MODEL_PROP_NAME_BUSY = 'busy'
+const MODEL_EVENT_NAME_BUSY = MODEL_EVENT_NAME_PREFIX + MODEL_PROP_NAME_BUSY
+
+// --- Props ---
+
+export const props = {
+  [MODEL_PROP_NAME_BUSY]: makeProp(PROP_TYPE_BOOLEAN, false)
+}
+
+// --- Mixin ---
+
+// @vue/component
+export const busyMixin = extend({
+  props,
+  data() {
+    return {
+      localBusy: false
+    }
+  },
+  computed: {
+    computedBusy() {
+      return this[MODEL_PROP_NAME_BUSY] || this.localBusy
+    }
+  },
+  watch: {
+    localBusy(newValue, oldValue) {
+      if (newValue !== oldValue) {
+        this.$emit(MODEL_EVENT_NAME_BUSY, newValue)
+      }
+    }
+  },
+  methods: {
+    // Event handler helper
+    stopIfBusy(event) {
+      // If table is busy (via provider) then don't propagate
+      if (this.computedBusy) {
+        stopEvent(event)
+        return true
+      }
+      return false
+    },
+    // Render the busy indicator or return `null` if not busy
+    renderBusy() {
+      const { tbodyTrClass, tbodyTrAttr } = this
+      const h = this.$createElement
+
+      // Return a busy indicator row, or `null` if not busy
+      if (this.computedBusy && this.hasNormalizedSlot(SLOT_NAME_TABLE_BUSY)) {
+        return h(
+          BTr,
+          {
+            staticClass: 'b-table-busy-slot',
+            class: [
+              isFunction(tbodyTrClass)
+                ? /* istanbul ignore next */ tbodyTrClass(null, SLOT_NAME_TABLE_BUSY)
+                : tbodyTrClass
+            ],
+            attrs: isFunction(tbodyTrAttr)
+              ? /* istanbul ignore next */ tbodyTrAttr(null, SLOT_NAME_TABLE_BUSY)
+              : tbodyTrAttr,
+            key: 'table-busy-slot'
+          },
+          [
+            h(BTd, { props: { colspan: this.computedFields.length || null } }, [
+              this.normalizeSlot(SLOT_NAME_TABLE_BUSY)
+            ])
+          ]
+        )
+      }
+
+      // We return `null` here so that we can determine if we need to
+      // render the table items rows or not
+      return null
+    }
+  }
+})

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

@@ -0,0 +1,49 @@
+import { extend } from '../../../vue'
+import { PROP_TYPE_STRING } from '../../../constants/props'
+import { SLOT_NAME_TABLE_CAPTION } from '../../../constants/slots'
+import { htmlOrText } from '../../../utils/html'
+import { makeProp } from '../../../utils/props'
+
+// --- Props ---
+
+export const props = {
+  caption: makeProp(PROP_TYPE_STRING),
+  captionHtml: makeProp(PROP_TYPE_STRING)
+  // `caption-top` is part of table-render mixin (styling)
+  // captionTop: makeProp(PROP_TYPE_BOOLEAN, false)
+}
+
+// --- Mixin ---
+
+// @vue/component
+export const captionMixin = extend({
+  props,
+  computed: {
+    captionId() {
+      return this.isStacked ? this.safeId('_caption_') : null
+    }
+  },
+  methods: {
+    renderCaption() {
+      const { caption, captionHtml } = this
+      const h = this.$createElement
+
+      let $caption = h()
+      const hasCaptionSlot = this.hasNormalizedSlot(SLOT_NAME_TABLE_CAPTION)
+      if (hasCaptionSlot || caption || captionHtml) {
+        $caption = h(
+          'caption',
+          {
+            attrs: { id: this.captionId },
+            domProps: hasCaptionSlot ? {} : htmlOrText(captionHtml, caption),
+            key: 'caption',
+            ref: 'caption'
+          },
+          this.normalizeSlot(SLOT_NAME_TABLE_CAPTION)
+        )
+      }
+
+      return $caption
+    }
+  }
+})

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

@@ -0,0 +1,27 @@
+import { extend } from '../../../vue'
+import { SLOT_NAME_TABLE_COLGROUP } from '../../../constants/slots'
+
+// --- Props ---
+
+export const props = {}
+
+// --- Mixin ---
+
+// @vue/component
+export const colgroupMixin = extend({
+  methods: {
+    renderColgroup() {
+      const { computedFields: fields } = this
+      const h = this.$createElement
+
+      let $colgroup = h()
+      if (this.hasNormalizedSlot(SLOT_NAME_TABLE_COLGROUP)) {
+        $colgroup = h('colgroup', { key: 'colgroup' }, [
+          this.normalizeSlot(SLOT_NAME_TABLE_COLGROUP, { columns: fields.length, fields })
+        ])
+      }
+
+      return $colgroup
+    }
+  }
+})

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

@@ -0,0 +1,105 @@
+import { extend } from '../../../vue'
+import { PROP_TYPE_BOOLEAN, PROP_TYPE_STRING } from '../../../constants/props'
+import {
+  SLOT_NAME_EMPTY,
+  SLOT_NAME_EMPTYFILTERED,
+  SLOT_NAME_TABLE_BUSY
+} from '../../../constants/slots'
+import { htmlOrText } from '../../../utils/html'
+import { isFunction } from '../../../utils/inspect'
+import { makeProp } from '../../../utils/props'
+import { safeVueInstance } from '../../../utils/safe-vue-instance'
+import { BTr } from '../tr'
+import { BTd } from '../td'
+
+// --- Props ---
+
+export const props = {
+  emptyFilteredHtml: makeProp(PROP_TYPE_STRING),
+  emptyFilteredText: makeProp(PROP_TYPE_STRING, 'There are no records matching your request'),
+  emptyHtml: makeProp(PROP_TYPE_STRING),
+  emptyText: makeProp(PROP_TYPE_STRING, 'There are no records to show'),
+  showEmpty: makeProp(PROP_TYPE_BOOLEAN, false)
+}
+
+// --- Mixin ---
+
+// @vue/component
+export const emptyMixin = extend({
+  props,
+  methods: {
+    renderEmpty() {
+      const { computedItems: items, computedBusy } = safeVueInstance(this)
+      const h = this.$createElement
+
+      let $empty = h()
+      if (
+        this.showEmpty &&
+        (!items || items.length === 0) &&
+        !(computedBusy && this.hasNormalizedSlot(SLOT_NAME_TABLE_BUSY))
+      ) {
+        const {
+          computedFields: fields,
+          isFiltered,
+          emptyText,
+          emptyHtml,
+          emptyFilteredText,
+          emptyFilteredHtml,
+          tbodyTrClass,
+          tbodyTrAttr
+        } = this
+
+        $empty = this.normalizeSlot(isFiltered ? SLOT_NAME_EMPTYFILTERED : SLOT_NAME_EMPTY, {
+          emptyFilteredHtml,
+          emptyFilteredText,
+          emptyHtml,
+          emptyText,
+          fields,
+          // Not sure why this is included, as it will always be an empty array
+          items
+        })
+
+        if (!$empty) {
+          $empty = h('div', {
+            class: ['text-center', 'my-2'],
+            domProps: isFiltered
+              ? htmlOrText(emptyFilteredHtml, emptyFilteredText)
+              : htmlOrText(emptyHtml, emptyText)
+          })
+        }
+
+        $empty = h(BTd, { props: { colspan: fields.length || null } }, [
+          h(
+            'div',
+            {
+              attrs: {
+                role: 'alert',
+                'aria-live': 'polite'
+              }
+            },
+            [$empty]
+          )
+        ])
+
+        $empty = h(
+          BTr,
+          {
+            staticClass: 'b-table-empty-row',
+            class: [
+              isFunction(tbodyTrClass)
+                ? /* istanbul ignore next */ tbodyTrClass(null, 'row-empty')
+                : tbodyTrClass
+            ],
+            attrs: isFunction(tbodyTrAttr)
+              ? /* istanbul ignore next */ tbodyTrAttr(null, 'row-empty')
+              : tbodyTrAttr,
+            key: isFiltered ? 'b-empty-filtered-row' : 'b-empty-row'
+          },
+          [$empty]
+        )
+      }
+
+      return $empty
+    }
+  }
+})

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

@@ -0,0 +1,271 @@
+import { extend } from '../../../vue'
+import { NAME_TABLE } from '../../../constants/components'
+import { EVENT_NAME_FILTERED } from '../../../constants/events'
+import {
+  PROP_TYPE_REG_EXP,
+  PROP_TYPE_ARRAY_OBJECT_STRING,
+  PROP_TYPE_FUNCTION,
+  PROP_TYPE_ARRAY,
+  PROP_TYPE_NUMBER_STRING
+} from '../../../constants/props'
+import { RX_DIGITS, RX_SPACES } 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 { hasPropFunction, makeProp } from '../../../utils/props'
+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 ---
+
+export const props = {
+  filter: makeProp([...PROP_TYPE_ARRAY_OBJECT_STRING, PROP_TYPE_REG_EXP]),
+  filterDebounce: makeProp(PROP_TYPE_NUMBER_STRING, 0, value => {
+    return RX_DIGITS.test(String(value))
+  }),
+  filterFunction: makeProp(PROP_TYPE_FUNCTION),
+  filterIgnoredFields: makeProp(PROP_TYPE_ARRAY, []),
+  filterIncludedFields: makeProp(PROP_TYPE_ARRAY, [])
+}
+
+// --- Mixin ---
+
+// @vue/component
+export 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
+      return hasPropFunction(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({ filteredItems, localFilter }) {
+      // 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)
+      }
+      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)
+      }
+    }
+  },
+  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
+    }
+  }
+})