@gitlab/duo-ui 0.1.0

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

@@ -0,0 +1,299 @@
+import { extend } from '../../../vue'
+import {
+  EVENT_NAME_HEAD_CLICKED,
+  EVENT_NAME_SORT_CHANGED,
+  MODEL_EVENT_NAME_PREFIX
+} from '../../../constants/events'
+import {
+  PROP_TYPE_ARRAY_STRING,
+  PROP_TYPE_BOOLEAN,
+  PROP_TYPE_FUNCTION,
+  PROP_TYPE_OBJECT,
+  PROP_TYPE_STRING
+} from '../../../constants/props'
+import { arrayIncludes } from '../../../utils/array'
+import { isFunction, isUndefinedOrNull } from '../../../utils/inspect'
+import { makeProp } from '../../../utils/props'
+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 ---
+
+export const props = {
+  labelSortAsc: makeProp(PROP_TYPE_STRING, 'Click to sort ascending'),
+  labelSortClear: makeProp(PROP_TYPE_STRING, 'Click to clear sorting'),
+  labelSortDesc: makeProp(PROP_TYPE_STRING, 'Click to sort descending'),
+  noFooterSorting: makeProp(PROP_TYPE_BOOLEAN, false),
+  noLocalSorting: makeProp(PROP_TYPE_BOOLEAN, 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: makeProp(PROP_TYPE_BOOLEAN, false),
+  [MODEL_PROP_NAME_SORT_BY]: makeProp(PROP_TYPE_STRING),
+  sortCompare: makeProp(PROP_TYPE_FUNCTION),
+  // String: locale code
+  // Array: array of Locale strings
+  sortCompareLocale: makeProp(PROP_TYPE_ARRAY_STRING),
+  // Supported localCompare options, see `options` section of:
+  // https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/String/localeCompare
+  sortCompareOptions: makeProp(PROP_TYPE_OBJECT, { numeric: true }),
+  // TODO: Make this tri-state: `true`, `false`, `null`
+  [MODEL_PROP_NAME_SORT_DESC]: makeProp(PROP_TYPE_BOOLEAN, 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: makeProp(PROP_TYPE_STRING, SORT_DIRECTION_ASC, value => {
+    return arrayIncludes(SORT_DIRECTIONS, value)
+  }),
+  // Place the sorting icon on the left of the header cells
+  sortIconLeft: makeProp(PROP_TYPE_BOOLEAN, false),
+  // Sort null and undefined to appear last
+  sortNullLast: makeProp(PROP_TYPE_BOOLEAN, false)
+}
+
+// --- Mixin ---
+
+// @vue/component
+export 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: {
+    /* istanbul ignore next: pain in the butt to test */
+    isSortable(newValue) {
+      if (newValue) {
+        if (this.isSortable) {
+          this.$on(EVENT_NAME_HEAD_CLICKED, this.handleSort)
+        }
+      } else {
+        this.$off(EVENT_NAME_HEAD_CLICKED, this.handleSort)
+      }
+    },
+    [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)
+      }
+    }
+  },
+  created() {
+    if (this.isSortable) {
+      this.$on(EVENT_NAME_HEAD_CLICKED, this.handleSort)
+    }
+  },
+  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 {
+          // sortDirection === 'last'
+          // Leave at last sort direction from previous column
+        }
+      }
+      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) {
+      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 ?? 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 `.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 `.sr-only` sort label or `null` if no label
+      return trim(labelSorting) || null
+    }
+  }
+})

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

@@ -0,0 +1,33 @@
+import { extend } from '../../../vue'
+import { PROP_TYPE_BOOLEAN_STRING } from '../../../constants/props'
+import { makeProp } from '../../../utils/props'
+
+// --- Props ---
+
+export const props = {
+  stacked: makeProp(PROP_TYPE_BOOLEAN_STRING, false)
+}
+
+// --- Mixin ---
+
+// @vue/component
+export 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
+      }
+    }
+  }
+})

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

@@ -0,0 +1,209 @@
+import { extend } from '../../../vue'
+import {
+  PROP_TYPE_ARRAY_OBJECT_STRING,
+  PROP_TYPE_BOOLEAN,
+  PROP_TYPE_BOOLEAN_STRING,
+  PROP_TYPE_STRING
+} from '../../../constants/props'
+import { identity } from '../../../utils/identity'
+import { isBoolean } from '../../../utils/inspect'
+import { makeProp } from '../../../utils/props'
+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 ---
+
+export const props = {
+  bordered: makeProp(PROP_TYPE_BOOLEAN, false),
+  borderless: makeProp(PROP_TYPE_BOOLEAN, false),
+  captionTop: makeProp(PROP_TYPE_BOOLEAN, false),
+  dark: makeProp(PROP_TYPE_BOOLEAN, false),
+  fixed: makeProp(PROP_TYPE_BOOLEAN, false),
+  hover: makeProp(PROP_TYPE_BOOLEAN, false),
+  noBorderCollapse: makeProp(PROP_TYPE_BOOLEAN, false),
+  outlined: makeProp(PROP_TYPE_BOOLEAN, false),
+  responsive: makeProp(PROP_TYPE_BOOLEAN_STRING, false),
+  small: makeProp(PROP_TYPE_BOOLEAN, false),
+  // If a string, it is assumed to be the table `max-height` value
+  stickyHeader: makeProp(PROP_TYPE_BOOLEAN_STRING, false),
+  striped: makeProp(PROP_TYPE_BOOLEAN, false),
+  tableClass: makeProp(PROP_TYPE_ARRAY_OBJECT_STRING),
+  tableVariant: makeProp(PROP_TYPE_STRING)
+}
+
+// --- Mixin ---
+
+// @vue/component
+export 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-${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
+          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
+  }
+})