@gitlab/duo-ui 3.0.0 → 4.0.0

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

@@ -1,474 +0,0 @@
-// --- 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

@@ -1,30 +0,0 @@
-// 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

@@ -1,60 +0,0 @@
-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

@@ -1,112 +0,0 @@
-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)
-  })
-})