@gitlab/ui 84.2.0 → 85.0.1

package/src/vendor/bootstrap-vue/src/components/table/_table.scss

@@ -0,0 +1,474 @@
+// --- General styling ---
+
+.table.b-table {
+  // Table fixed header width layout
+  &.b-table-fixed {
+    // Fixed width columns
+    table-layout: fixed;
+  }
+
+  // Disabled border-collapse
+  // Mainly for use with sticky headers and columns
+  &.b-table-no-border-collapse {
+    border-collapse: separate;
+    border-spacing: 0;
+  }
+
+  // Table busy styling
+  &[aria-busy="true"] {
+    opacity: $b-table-busy-opacity;
+  }
+
+  // Details row styling
+  > tbody > tr.b-table-details > td {
+    border-top: none !important;
+  }
+
+  // Caption positioning
+  > caption {
+    caption-side: bottom;
+  }
+
+  &.b-table-caption-top {
+    > caption {
+      caption-side: top !important;
+    }
+  }
+
+  // Re-declare `table-active` class here so that it can take
+  // precedence over row variants when used on selectable rows
+  // Class can only be applied to rows and not individual cells
+  > tbody > .table-active {
+    &,
+    > th,
+    > td {
+      background-color: $table-active-bg;
+    }
+  }
+
+  // Add special hover styling for `table-active` row variant
+  &.table-hover > tbody > tr.table-active:hover {
+    td,
+    th {
+      color: $table-hover-color;
+      // `$table-hover-bg` default is a very transparent black
+      // We overlay it over the background color to achieve the
+      // same color effect while keeping the background solid
+      background-image: linear-gradient($table-hover-bg, $table-hover-bg);
+      background-repeat: no-repeat;
+    }
+  }
+
+  // Add in missing `bg-active` class for table tbody rows
+  // Bootstrap v4.3 is missing this for dark tables
+  // `bg-active` class cannot be applied to individual cells
+  > tbody > .bg-active {
+    &,
+    > th,
+    > td {
+      // Important is needed to override the standard `bg-variants`
+      // as the also use `!important`
+      background-color: $table-dark-active-bg !important;
+    }
+  }
+
+  // Add special hover styling for `bg-active` row variant (dark tables)
+  &.table-hover.table-dark > tbody > tr.bg-active:hover {
+    td,
+    th {
+      color: $table-dark-hover-color;
+      // `$table-dark-hover-bg` default is a very transparent white
+      // We overlay it over the background color to achieve the
+      // same color effect while keeping the background solid
+      background-image: linear-gradient($table-dark-hover-bg, $table-dark-hover-bg);
+      background-repeat: no-repeat;
+    }
+  }
+}
+
+// --- Table sticky header styling ---
+
+@if $bv-enable-table-sticky {
+  .b-table-sticky-header,
+  .table-responsive,
+  [class*="table-responsive-"] {
+    // Move the table bottom margin to the wrapper
+    margin-bottom: $spacer;
+
+    > .table {
+      // Reset `margin-bottom` to we don't get a space after
+      // the table inside the scroll area
+      margin-bottom: 0;
+    }
+  }
+
+  .b-table-sticky-header {
+    overflow-y: auto;
+    // Annoyingly, when overflow-y is set, browsers convert
+    // 'overflow-x: visible' to 'overflow-x: auto' - so it becomes
+    // responsive in the x axis automatically
+    // Default `max-height` before a scrollbar will show
+    // We don't use `height` as table could be shorter than this value
+    max-height: $b-table-sticky-header-max-height;
+  }
+
+  @media print {
+    // Override any styles (including inline styles)
+    // when printing
+    .b-table-sticky-header {
+      overflow-y: visible !important;
+      max-height: none !important;
+    }
+  }
+
+  @supports (position: sticky) {
+    // Positioning of sticky headers
+    .b-table-sticky-header > .table.b-table > thead > tr > th {
+      // Header cells need to be sticky on top
+      position: sticky;
+      top: 0;
+      z-index: 2;
+    }
+
+    // Positioning of sticky columns
+    // Sticky columns only work when table has sticky
+    // headers and/or is responsive
+    .b-table-sticky-header,
+    .table-responsive,
+    [class*="table-responsive-"] {
+      > .table.b-table {
+        > thead,
+        > tbody,
+        > tfoot {
+          > tr > .b-table-sticky-column {
+            position: sticky;
+            left: 0;
+          }
+        }
+
+        > thead {
+          > tr > .b-table-sticky-column {
+            // z-index needs to be higher than sticky columns and
+            // sticky headers for correct layering
+            z-index: 5;
+          }
+        }
+
+        > tbody,
+        > tfoot {
+          > tr > .b-table-sticky-column {
+            // z-index needs to be lower than sticky header that
+            // is also a sticky column
+            z-index: 2;
+          }
+        }
+      }
+    }
+
+    // Default theme color background for table cells that are sticky
+    // Applied only when no variant is applied to the rows, or no head-variant
+    // Needed because Bootstrap v4 does not have table child elements set up
+    // to inherit their background color from parent element by default
+    //
+    // An issue made at twbs/bootstrap repo for table
+    // background color inheritance:
+    //   https://github.com/twbs/bootstrap/issues/29244
+    // If implemented, would negate the need for all the below SCSS
+    .table.b-table {
+      > thead,
+      > tbody,
+      > tfoot {
+        > tr > .table-b-table-default {
+          // Default cell color
+          color: $table-color;
+          // `$table-bg` is null by default in Bootstrap v4 variables
+          // but could have a value set by the consumer
+          background-color: if($table-bg, $table-bg, $body-bg);
+        }
+      }
+
+      &.table-dark {
+        > thead,
+        > tbody,
+        > tfoot {
+          > tr > .bg-b-table-default {
+            // Default cell color in table dark mode
+            color: $table-dark-color;
+            // Default cell background color in table dark mode
+            background-color: $table-dark-bg;
+          }
+        }
+      }
+
+      // Handle case of zebra striping
+      &.table-striped {
+        // "fake" zebra striping via use of a transparent background image
+        > tbody > tr:nth-of-type(#{$table-striped-order}) > .table-b-table-default {
+          // `$table-accent-bg` (used for striping) default is a very transparent black
+          // We overlay it over the background color to achieve the same color
+          // effect while keeping the background solid.
+          background-image: linear-gradient($table-accent-bg, $table-accent-bg);
+          background-repeat: no-repeat;
+        }
+
+        &.table-dark {
+          > tbody > tr:nth-of-type(#{$table-striped-order}) > .bg-b-table-default {
+            // `$table-dark-accent-bg` (used for striping) default is a very transparent white
+            // We overlay it over the background color to achieve the same color
+            // effect while keeping the background solid.
+            background-image: linear-gradient($table-dark-accent-bg, $table-dark-accent-bg);
+            background-repeat: no-repeat;
+          }
+        }
+      }
+
+      // Handle case of hover
+      &.table-hover {
+        // "fake" hover via use of a transparent background image
+        > tbody > tr:hover > .table-b-table-default {
+          color: $table-hover-color;
+          // `$table-hover-bg` default is a very transparent black
+          // We overlay it over the background color to achieve the same color
+          // effect while keeping the background solid.
+          background-image: linear-gradient($table-hover-bg, $table-hover-bg);
+          background-repeat: no-repeat;
+        }
+
+        &.table-dark {
+          > tbody > tr:hover > .bg-b-table-default {
+            color: $table-dark-hover-color;
+            // `$table-dark-hover-bg` default is a very transparent white
+            // We overlay it over the background color to achieve the same color
+            // effect while keeping the background solid.
+            background-image: linear-gradient($table-dark-hover-bg, $table-dark-hover-bg);
+            background-repeat: no-repeat;
+          }
+        }
+      }
+    }
+  }
+}
+
+// --- Header sort styling ---
+
+// Bootstrap v4.4 will include this variable as `$escaped-characters`
+// But if we want to preserve backwards compatibility with v4.3, we leave this in
+$bv-escaped-characters: (("<", "%3c"), (">", "%3e"), ("#", "%23"));
+
+// Bootstrap v4.4 will include this method as `escape-svg`
+// But if we want to preserve backwards compatibility with v4.3, we leave this in
+// See https://codepen.io/kevinweber/pen/dXWoRw
+@function bv-escape-svg($string) {
+  @if str-index($string, "data:image/svg+xml") {
+    @each $char, $encoded in $bv-escaped-characters {
+      $string: str-replace($string, $char, $encoded);
+    }
+  }
+
+  @return $string;
+}
+
+.table.b-table {
+  > thead,
+  > tfoot {
+    > tr {
+      > [aria-sort] {
+        cursor: pointer;
+        background-image: none;
+        background-repeat: no-repeat;
+        background-size: $b-table-sort-icon-bg-width $b-table-sort-icon-bg-height;
+
+        &:not(.b-table-sort-icon-left) {
+          // Default is icon on the right
+          background-position: right calc(#{$table-cell-padding} / 2) center;
+          padding-right: calc(#{$table-cell-padding} + #{$b-table-sort-icon-bg-width});
+        }
+
+        &.b-table-sort-icon-left {
+          // Left aligned sort icon
+          background-position: left calc(#{$table-cell-padding} / 2) center;
+          padding-left: calc(#{$table-cell-padding} + #{$b-table-sort-icon-bg-width});
+        }
+      }
+
+      > [aria-sort="none"] {
+        background-image: bv-escape-svg($b-table-sort-icon-bg-not-sorted);
+      }
+
+      > [aria-sort="ascending"] {
+        background-image: bv-escape-svg($b-table-sort-icon-bg-ascending);
+      }
+
+      > [aria-sort="descending"] {
+        background-image: bv-escape-svg($b-table-sort-icon-bg-descending);
+      }
+    }
+  }
+
+  // Sort icons for dark tables, headers, footers
+  &.table-dark > thead > tr,
+  &.table-dark > tfoot > tr,
+  > .thead-dark > tr {
+    > [aria-sort="none"] {
+      background-image: bv-escape-svg($b-table-sort-icon-bg-dark-not-sorted);
+    }
+
+    > [aria-sort="ascending"] {
+      background-image: bv-escape-svg($b-table-sort-icon-bg-dark-ascending);
+    }
+
+    > [aria-sort="descending"] {
+      background-image: bv-escape-svg($b-table-sort-icon-bg-dark-descending);
+    }
+  }
+
+  // Sort icons when header cell has `table-dark` class
+  > thead > tr > .table-dark,
+  > tfoot > tr > .table-dark {
+    &[aria-sort="none"] {
+      background-image: bv-escape-svg($b-table-sort-icon-bg-dark-not-sorted);
+    }
+
+    &[aria-sort="ascending"] {
+      background-image: bv-escape-svg($b-table-sort-icon-bg-dark-ascending);
+    }
+
+    &[aria-sort="descending"] {
+      background-image: bv-escape-svg($b-table-sort-icon-bg-dark-descending);
+    }
+  }
+
+  // Padding and position adjustment for small tables
+  &.table-sm {
+    > thead,
+    > tfoot {
+      > tr > [aria-sort] {
+        &:not(.b-table-sort-icon-left) {
+          // Default is icon on the right
+          background-position: right calc(#{$table-cell-padding-sm} / 2) center;
+          padding-right: calc(#{$table-cell-padding-sm} + #{$b-table-sort-icon-bg-width});
+        }
+
+        &.b-table-sort-icon-left {
+          // Left aligned sort icon
+          background-position: left calc(#{$table-cell-padding-sm} / 2) center;
+          padding-left: calc(#{$table-cell-padding-sm} + #{$b-table-sort-icon-bg-width});
+        }
+      }
+    }
+  }
+}
+
+// --- Selectable rows ---
+.table.b-table {
+  &.b-table-selectable:not(.b-table-selectable-no-click) {
+    & > tbody > tr {
+      cursor: pointer;
+    }
+
+    &.b-table-selecting {
+      // Disabled text-selection when in range mode when
+      // at least one row selected
+      &.b-table-select-range > tbody > tr {
+        user-select: none;
+      }
+    }
+  }
+}
+
+// --- Stacked tables ---
+@if $bv-enable-table-stacked {
+  .table.b-table {
+    &.b-table-stacked {
+      @each $breakpoint in map-keys($grid-breakpoints) {
+        $next: breakpoint-next($breakpoint, $grid-breakpoints);
+        $infix: breakpoint-infix($next, $grid-breakpoints);
+
+        &#{$infix} {
+          @include media-breakpoint-down($breakpoint) {
+            display: block;
+            width: 100%;
+
+            // Convert to blocks when stacked
+            > caption,
+            > tbody,
+            > tbody > tr,
+            > tbody > tr > td,
+            > tbody > tr > th {
+              display: block;
+            }
+
+            // Hide when stacked
+            > thead,
+            > tfoot {
+              display: none;
+
+              > tr.b-table-top-row,
+              > tr.b-table-bottom-row {
+                display: none;
+              }
+            }
+
+            // Caption positioning
+            > caption {
+              caption-side: top !important;
+            }
+
+            > tbody {
+              > tr {
+                // Turn cells with labels into micro-grids
+                > [data-label] {
+                  // Cell header label pseudo element
+                  &::before {
+                    content: attr(data-label);
+                    width: $b-table-stacked-heading-width;
+                    float: left;
+                    text-align: right;
+                    overflow-wrap: break-word;
+                    font-weight: bold;
+                    font-style: normal;
+                    padding: 0 calc(#{$b-table-stacked-gap} / 2) 0 0;
+                    margin: 0;
+                  }
+
+                  // Add clearfix in-case field label wraps
+                  &::after {
+                    display: block;
+                    clear: both;
+                    content: "";
+                  }
+
+                  // Cell value (we wrap the cell value in a div when stacked)
+                  > div {
+                    display: inline-block;
+                    width: calc(100% - #{$b-table-stacked-heading-width});
+                    // Add "gap" between "cells"
+                    padding: 0 0 0 calc(#{$b-table-stacked-gap} / 2);
+                    margin: 0;
+                  }
+                }
+
+                // Dont show the fixed top/bottom rows
+                &.top-row,
+                &.bottom-row {
+                  display: none;
+                }
+
+                // Give the top cell of each "row" a heavy border
+                > :first-child {
+                  border-top-width: (3 * $table-border-width);
+                }
+
+                // Give any cell after a rowspan'ed cell a heavy top border
+                > [rowspan] + td,
+                > [rowspan] + th {
+                  border-top-width: (3 * $table-border-width);
+                }
+              }
+            }
+          }
+        }
+      }
+    }
+  }
+}

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

@@ -0,0 +1,30 @@
+// Constants used by table helpers
+
+export const FIELD_KEY_CELL_VARIANT = '_cellVariants'
+export const FIELD_KEY_ROW_VARIANT = '_rowVariant'
+export const FIELD_KEY_SHOW_DETAILS = '_showDetails'
+
+// Object of item keys that should be ignored for headers and
+// stringification and filter events
+export const IGNORED_FIELD_KEYS = [
+  FIELD_KEY_CELL_VARIANT,
+  FIELD_KEY_ROW_VARIANT,
+  FIELD_KEY_SHOW_DETAILS
+].reduce((result, key) => ({ ...result, [key]: true }), {})
+
+// Filter CSS selector for click/dblclick/etc. events
+// If any of these selectors match the clicked element, we ignore the event
+export const EVENT_FILTER = [
+  'a',
+  'a *', // Include content inside links
+  'button',
+  'button *', // Include content inside buttons
+  'input:not(.disabled):not([disabled])',
+  'select:not(.disabled):not([disabled])',
+  'textarea:not(.disabled):not([disabled])',
+  '[role="link"]',
+  '[role="link"] *',
+  '[role="button"]',
+  '[role="button"] *',
+  '[tabindex]:not(.disabled):not([disabled])'
+].join(',')

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/default-sort-compare.spec.js

@@ -0,0 +1,112 @@
+import { defaultSortCompare } from './default-sort-compare'
+
+describe('table/helpers/default-sort-compare', () => {
+  it('sorts numbers correctly', async () => {
+    const options = { sortBy: 'a' }
+    expect(defaultSortCompare({ a: 1 }, { a: 2 }, options)).toBe(-1)
+    expect(defaultSortCompare({ a: 2 }, { a: 1 }, options)).toBe(1)
+    expect(defaultSortCompare({ a: 1 }, { a: 1 }, options)).toBe(0)
+    expect(defaultSortCompare({ a: -1 }, { a: 1 }, options)).toBe(-1)
+    expect(defaultSortCompare({ a: 1 }, { a: -1 }, options)).toBe(1)
+    expect(defaultSortCompare({ a: 0 }, { a: 0 }, options)).toBe(0)
+    expect(defaultSortCompare({ a: 1.234 }, { a: 1.567 }, options)).toBe(-1)
+    expect(defaultSortCompare({ a: 1.561 }, { a: 1.234 }, options)).toBe(1)
+  })
+
+  it('sorts dates correctly', async () => {
+    const date1 = { a: new Date(2020, 1, 1) }
+    const date2 = { a: new Date(1999, 11, 31) }
+    const date3 = { a: new Date(1999, 1, 1) }
+    const date4 = { a: new Date(1999, 1, 1, 12, 12, 12, 12) }
+    const options = { sortBy: 'a' }
+
+    expect(defaultSortCompare(date1, date2, options)).toBe(1)
+    expect(defaultSortCompare(date1, date1, options)).toBe(0)
+    expect(defaultSortCompare(date2, date1, options)).toBe(-1)
+    expect(defaultSortCompare(date2, date3, options)).toBe(1)
+    expect(defaultSortCompare(date3, date2, options)).toBe(-1)
+    expect(defaultSortCompare(date3, date4, options)).toBe(-1)
+    expect(defaultSortCompare(date4, date3, options)).toBe(1)
+    expect(defaultSortCompare(date4, date4, options)).toBe(0)
+  })
+
+  it('sorts date strings correctly', async () => {
+    const date1 = { a: new Date(2020, 1, 1).toISOString() }
+    const date2 = { a: new Date(1999, 11, 31).toISOString() }
+    const date3 = { a: new Date(1999, 1, 1).toISOString() }
+    const date4 = { a: new Date(1999, 1, 1, 12, 12, 12, 12).toISOString() }
+    const options = { sortBy: 'a' }
+
+    expect(defaultSortCompare(date1, date2, options)).toBe(1)
+    expect(defaultSortCompare(date1, date1, options)).toBe(0)
+    expect(defaultSortCompare(date2, date1, options)).toBe(-1)
+    expect(defaultSortCompare(date2, date3, options)).toBe(1)
+    expect(defaultSortCompare(date3, date2, options)).toBe(-1)
+    expect(defaultSortCompare(date3, date4, options)).toBe(-1)
+    expect(defaultSortCompare(date4, date3, options)).toBe(1)
+    expect(defaultSortCompare(date4, date4, options)).toBe(0)
+  })
+
+  it('sorts strings correctly', async () => {
+    const options = { sortBy: 'a' }
+
+    // Note: string comparisons are locale based
+    expect(defaultSortCompare({ a: 'a' }, { a: 'b' }, options)).toBe(-1)
+    expect(defaultSortCompare({ a: 'b' }, { a: 'a' }, options)).toBe(1)
+    expect(defaultSortCompare({ a: 'a' }, { a: 'a' }, options)).toBe(0)
+    expect(defaultSortCompare({ a: 'a' }, { a: 'aaa' }, options)).toBe(-1)
+    expect(defaultSortCompare({ a: 'aaa' }, { a: 'a' }, options)).toBe(1)
+  })
+
+  it('sorts by nested key correctly', async () => {
+    const options = { sortBy: 'a.b' }
+
+    // Note: string comparisons are locale based
+    expect(defaultSortCompare({ a: { b: 'a' } }, { a: { b: 'b' } }, options)).toBe(-1)
+    expect(defaultSortCompare({ a: { b: 'b' } }, { a: { b: 'a' } }, options)).toBe(1)
+    expect(defaultSortCompare({ a: { b: 'a' } }, { a: { b: 'a' } }, options)).toBe(0)
+    expect(defaultSortCompare({ a: { b: 'a' } }, { a: { b: 'aaa' } }, options)).toBe(-1)
+  })
+
+  it('sorts using provided formatter correctly', async () => {
+    const formatter = value => {
+      // Reverse the string
+      return value
+        .split('')
+        .reverse()
+        .join('')
+    }
+
+    expect(defaultSortCompare({ a: 'ab' }, { a: 'b' }, { sortBy: 'a' })).toBe(-1)
+    expect(defaultSortCompare({ a: 'ab' }, { a: 'b' }, { sortBy: 'a', formatter })).toBe(1)
+  })
+
+  it('sorts nulls always last when sor-null-lasst is set', async () => {
+    const x = { a: 'ab' }
+    const y = { a: null }
+    const z = {}
+    const w = { a: '' }
+    const options = { sortBy: 'a', localeOptions: { numeric: true } }
+    const optionsNullLast = { ...options, nullLast: true }
+
+    // Without nullLast set (false)
+    expect(defaultSortCompare(x, y, options)).toBe(1)
+    expect(defaultSortCompare(y, x, options)).toBe(-1)
+    expect(defaultSortCompare(x, z, options)).toBe(1)
+    expect(defaultSortCompare(z, x, options)).toBe(-1)
+    expect(defaultSortCompare(y, z, options)).toBe(0)
+    expect(defaultSortCompare(z, y, options)).toBe(0)
+    expect(defaultSortCompare(x, w, options)).toBe(1)
+    expect(defaultSortCompare(w, x, options)).toBe(-1)
+
+    // With nullLast set
+    expect(defaultSortCompare(x, y, optionsNullLast)).toBe(-1)
+    expect(defaultSortCompare(y, x, optionsNullLast)).toBe(1)
+    expect(defaultSortCompare(x, z, optionsNullLast)).toBe(-1)
+    expect(defaultSortCompare(z, x, optionsNullLast)).toBe(1)
+    expect(defaultSortCompare(y, z, optionsNullLast)).toBe(0)
+    expect(defaultSortCompare(z, y, optionsNullLast)).toBe(0)
+    expect(defaultSortCompare(x, w, optionsNullLast)).toBe(-1)
+    expect(defaultSortCompare(w, x, optionsNullLast)).toBe(1)
+  })
+})