@gitlab/ui 131.3.0 → 131.3.2

package/dist/utils/utils.js

@@ -1,205 +0,0 @@
-import { isVisible } from '../vendor/bootstrap-vue/src/utils/dom';
-export { isVisible } from '../vendor/bootstrap-vue/src/utils/dom';
-import { COMMA, labelColorOptions, CONTRAST_LEVELS, focusableTags } from './constants';
-
-function debounceByAnimationFrame(fn) {
-  let requestId;
-  return function debounced() {
-    for (var _len = arguments.length, args = new Array(_len), _key = 0; _key < _len; _key++) {
-      args[_key] = arguments[_key];
-    }
-    if (requestId) {
-      window.cancelAnimationFrame(requestId);
-    }
-    requestId = window.requestAnimationFrame(() => fn.apply(this, args));
-  };
-}
-function throttle(fn) {
-  let frameId = null;
-  return function () {
-    for (var _len2 = arguments.length, args = new Array(_len2), _key2 = 0; _key2 < _len2; _key2++) {
-      args[_key2] = arguments[_key2];
-    }
-    if (frameId) {
-      return;
-    }
-    frameId = window.requestAnimationFrame(() => {
-      fn(...args);
-      frameId = null;
-    });
-  };
-}
-function rgbFromHex(hex) {
-  const cleanHex = hex.replace('#', '');
-  const rgb = cleanHex.length === 3 ? cleanHex.split('').map(val => val + val) : cleanHex.match(/[\da-f]{2}/gi);
-  const [r, g, b] = rgb.map(val => parseInt(val, 16));
-  return [r, g, b];
-}
-function rgbFromString(color, sub) {
-  const rgb = color.substring(sub, color.length - 1).split(COMMA);
-  const [r, g, b] = rgb.map(i => parseInt(i, 10));
-  return [r, g, b];
-}
-function hexToRgba(hex) {
-  let opacity = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : 1;
-  const [r, g, b] = rgbFromHex(hex);
-  return `rgba(${r}, ${g}, ${b}, ${opacity})`;
-}
-function toSrgb(value) {
-  const normalized = value / 255;
-  return normalized <= 0.03928 ? normalized / 12.92 : ((normalized + 0.055) / 1.055) ** 2.4;
-}
-function relativeLuminance(rgb) {
-  // WCAG 2.1 formula: https://www.w3.org/TR/WCAG21/#dfn-relative-luminance
-  // -
-  // WCAG 3.0 will use APAC
-  // Using APAC would be the ultimate goal, but was dismissed by engineering as of now
-  // See https://gitlab.com/gitlab-org/gitlab-ui/-/merge_requests/3418#note_1370107090
-  return 0.2126 * toSrgb(rgb[0]) + 0.7152 * toSrgb(rgb[1]) + 0.0722 * toSrgb(rgb[2]);
-}
-function colorFromBackground(backgroundColor) {
-  let contrastRatio = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : 2.4;
-  let color;
-  const lightColor = rgbFromHex('#FFFFFF');
-  const darkColor = rgbFromHex('#18171d');
-  if (backgroundColor.startsWith('#')) {
-    color = rgbFromHex(backgroundColor);
-  } else if (backgroundColor.startsWith('rgba(')) {
-    color = rgbFromString(backgroundColor, 5);
-  } else if (backgroundColor.startsWith('rgb(')) {
-    color = rgbFromString(backgroundColor, 4);
-  }
-  const luminance = relativeLuminance(color);
-  const lightLuminance = relativeLuminance(lightColor);
-  const darkLuminance = relativeLuminance(darkColor);
-  const contrastLight = (lightLuminance + 0.05) / (luminance + 0.05);
-  const contrastDark = (luminance + 0.05) / (darkLuminance + 0.05);
-
-  // Using a default threshold contrast of 2.4 instead of 3
-  // as this will solve weird color combinations in the mid tones
-  return contrastLight >= contrastRatio || contrastLight > contrastDark ? labelColorOptions.light : labelColorOptions.dark;
-}
-function getColorContrast(foreground, background) {
-  // Formula: http://www.w3.org/TR/2008/REC-WCAG20-20081211/#contrast-ratiodef
-  const backgroundLuminance = relativeLuminance(rgbFromHex(background)) + 0.05;
-  const foregroundLuminance = relativeLuminance(rgbFromHex(foreground)) + 0.05;
-  let score = backgroundLuminance / foregroundLuminance;
-  if (foregroundLuminance > backgroundLuminance) {
-    score = 1 / score;
-  }
-  const level = CONTRAST_LEVELS.find(_ref => {
-    let {
-      min,
-      max
-    } = _ref;
-    return score >= min && score < max;
-  });
-  return {
-    score: (Math.round(score * 10) / 10).toFixed(1),
-    level
-  };
-}
-function uid() {
-  return Math.random().toString(36).substring(2);
-}
-
-/**
- * Receives an element and validates that it can be focused
- * @param { HTMLElement } The element we want to validate
- * @return { boolean } Is the element focusable
- */
-
-function isElementFocusable(elt) {
-  if (!elt) return false;
-  const {
-    tagName
-  } = elt;
-  const isValidTag = focusableTags.includes(tagName);
-  const hasValidType = elt.getAttribute('type') !== 'hidden';
-  const isDisabled = elt.getAttribute('disabled') === '' || elt.getAttribute('disabled');
-  const hasValidZIndex = elt.getAttribute('z-index') !== '-1';
-  const isInvalidAnchorTag = tagName === 'A' && !elt.getAttribute('href');
-  return isValidTag && hasValidType && !isDisabled && hasValidZIndex && !isInvalidAnchorTag;
-}
-
-/**
- * Receives an element and validates that it is reachable via sequential keyboard navigation
- * @param { HTMLElement } The element to validate
- * @return { boolean } Is the element focusable in a sequential tab order
- */
-
-function isElementTabbable(el) {
-  if (!el) return false;
-  const tabindex = parseInt(el.getAttribute('tabindex'), 10);
-  return tabindex > -1;
-}
-
-/**
- * Receives an array of HTML elements and focus the first one possible
- * @param { Array.<HTMLElement> } An array of element to potentially focus
- * @return { undefined }
- */
-
-function focusFirstFocusableElement(elts) {
-  const focusableElt = elts.find(el => isElementFocusable(el));
-  if (focusableElt) focusableElt.focus();
-}
-
-/**
- * Returns true if the current environment is considered a development environment (it's not
- * production or test).
- *
- * @returns {boolean}
- */
-function isDev() {
-  return !['test', 'production'].includes(process.env.NODE_ENV);
-}
-
-/**
- * Prints a warning message to the console in non-test and non-production environments.
- * @param {string} message Message to print to the console.
- * @param {Object} [context] Optional object with additional context.
- * @param {string} [context.name] The name of the context of the message. Usually the component's name.
- * @param {HTMLElement} [context.element] The element relevant to the message.
- */
-function logWarning(message) {
-  let context = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : {};
-  if (isDev()) {
-    const {
-      name,
-      element
-    } = context;
-    const formattedMessage = name ? `[${name}] ${message}` : message;
-    const args = element ? [formattedMessage, element] : [formattedMessage];
-    console.warn(...args); // eslint-disable-line no-console
-  }
-}
-
-/**
- * Stop default event handling and propagation
- */
-function stopEvent(event) {
-  let {
-    preventDefault = true,
-    stopPropagation = true,
-    stopImmediatePropagation = false
-  } = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : {};
-  if (preventDefault) {
-    event.preventDefault();
-  }
-  if (stopPropagation) {
-    event.stopPropagation();
-  }
-  if (stopImmediatePropagation) {
-    event.stopImmediatePropagation();
-  }
-}
-
-/**
- * Return an Array of visible items
- */
-function filterVisible(els) {
-  return (els || []).filter(el => isVisible(el));
-}
-
-export { colorFromBackground, debounceByAnimationFrame, filterVisible, focusFirstFocusableElement, getColorContrast, hexToRgba, isDev, isElementFocusable, isElementTabbable, logWarning, relativeLuminance, rgbFromHex, rgbFromString, stopEvent, throttle, toSrgb, uid };

package/dist/utils.js

@@ -1,5 +0,0 @@
-export { GlBreakpointInstance, breakpoints } from './utils/breakpoints';
-import * as validators from './components/base/form/form_fields/validators';
-export { validators as formValidators };
-import * as mappers from './components/base/form/form_fields/mappers';
-export { mappers as formMappers };

package/dist/vendor/bootstrap-vue/src/bv-config.js

@@ -1,8 +0,0 @@
-import { pluginFactory } from './utils/plugins';
-
-//
-// Utility Plugin for setting the configuration
-//
-const BVConfigPlugin = /*#__PURE__*/pluginFactory();
-
-export { BVConfigPlugin };

package/dist/vendor/bootstrap-vue/src/components/button/button-close.js

@@ -1,81 +0,0 @@
-import { extend, mergeData } from '../../vue';
-import { NAME_BUTTON_CLOSE } from '../../constants/components';
-import { PROP_TYPE_STRING, PROP_TYPE_BOOLEAN } from '../../constants/props';
-import { SLOT_NAME_DEFAULT } from '../../constants/slots';
-import { stopEvent } from '../../utils/events';
-import { isEvent } from '../../utils/inspect';
-import { hasNormalizedSlot, normalizeSlot } from '../../utils/normalize-slot';
-
-// --- Props ---
-
-const props = {
-  ariaLabel: {
-    type: PROP_TYPE_STRING,
-    required: false,
-    default: 'Close'
-  },
-  content: {
-    type: PROP_TYPE_STRING,
-    required: false,
-    default: '×'
-  },
-  disabled: {
-    type: PROP_TYPE_BOOLEAN,
-    required: false,
-    default: false
-  },
-  textVariant: {
-    type: PROP_TYPE_STRING,
-    required: false,
-    default: undefined
-  }
-};
-
-// --- Main component ---
-
-// @vue/component
-const BButtonClose = /*#__PURE__*/extend({
-  name: NAME_BUTTON_CLOSE,
-  functional: true,
-  props,
-  render(h, _ref) {
-    let {
-      props,
-      data,
-      slots,
-      scopedSlots
-    } = _ref;
-    const $slots = slots();
-    const $scopedSlots = scopedSlots || {};
-    const componentData = {
-      staticClass: 'close',
-      class: {
-        [`text-${props.textVariant}`]: props.textVariant
-      },
-      attrs: {
-        type: 'button',
-        disabled: props.disabled,
-        'aria-label': props.ariaLabel ? String(props.ariaLabel) : null
-      },
-      on: {
-        click(event) {
-          // Ensure click on button HTML content is also disabled
-          /* istanbul ignore if: bug in JSDOM still emits click on inner element */
-          if (props.disabled && isEvent(event)) {
-            stopEvent(event);
-          }
-        }
-      }
-    };
-
-    // Careful not to override the default slot with innerHTML
-    if (!hasNormalizedSlot(SLOT_NAME_DEFAULT, $scopedSlots, $slots)) {
-      componentData.domProps = {
-        innerHTML: props.content
-      };
-    }
-    return h('button', mergeData(data, componentData), normalizeSlot(SLOT_NAME_DEFAULT, {}, $scopedSlots, $slots));
-  }
-});
-
-export { BButtonClose, props };

package/dist/vendor/bootstrap-vue/src/components/button/button.js

@@ -1,204 +0,0 @@
-import { extend, mergeData } from '../../vue';
-import { NAME_BUTTON } from '../../constants/components';
-import { CODE_SPACE, CODE_ENTER } from '../../constants/key-codes';
-import { PROP_TYPE_BOOLEAN, PROP_TYPE_STRING } from '../../constants/props';
-import { concat } from '../../utils/array';
-import { isTag, addClass, removeClass } from '../../utils/dom';
-import { stopEvent } from '../../utils/events';
-import { isBoolean, isEvent, isFunction } from '../../utils/inspect';
-import { omit, sortKeys } from '../../utils/object';
-import { pluckProps } from '../../utils/props';
-import { isLink as isLink$1 } from '../../utils/router';
-import { props as props$1, BLink } from '../link/link';
-
-// --- Props ---
-
-const linkProps = omit(props$1, ['event', 'routerTag']);
-delete linkProps.href.default;
-delete linkProps.to.default;
-const props = sortKeys({
-  ...linkProps,
-  block: {
-    type: PROP_TYPE_BOOLEAN,
-    required: false,
-    default: false
-  },
-  disabled: {
-    type: PROP_TYPE_BOOLEAN,
-    required: false,
-    default: false
-  },
-  // Tri-state: `true`, `false` or `null`
-  // => On, off, not a toggle
-  pressed: {
-    type: PROP_TYPE_BOOLEAN,
-    required: false,
-    default: null
-  },
-  size: {
-    type: PROP_TYPE_STRING,
-    required: false,
-    default: undefined
-  },
-  tag: {
-    type: PROP_TYPE_STRING,
-    required: false,
-    default: 'button'
-  },
-  type: {
-    type: PROP_TYPE_STRING,
-    required: false,
-    default: 'button'
-  },
-  variant: {
-    type: PROP_TYPE_STRING,
-    required: false,
-    default: 'secondary'
-  }
-});
-
-// --- Helper methods ---
-
-// Focus handler for toggle buttons
-// Needs class of 'focus' when focused
-const handleFocus = event => {
-  if (event.type === 'focusin') {
-    addClass(event.target, 'focus');
-  } else if (event.type === 'focusout') {
-    removeClass(event.target, 'focus');
-  }
-};
-
-// Is the requested button a link?
-// If tag prop is set to `a`, we use a <b-link> to get proper disabled handling
-const isLink = props => isLink$1(props) || isTag(props.tag, 'a');
-
-// Is the button to be a toggle button?
-const isToggle = props => isBoolean(props.pressed);
-
-// Is the button "really" a button?
-const isButton = props => !(isLink(props) || props.tag && !isTag(props.tag, 'button'));
-
-// Is the requested tag not a button or link?
-const isNonStandardTag = props => !isLink(props) && !isButton(props);
-
-// Compute required classes (non static classes)
-const computeClass = props => [`btn-${props.variant || 'secondary'}`, {
-  [`btn-${props.size}`]: props.size,
-  'btn-block': props.block,
-  disabled: props.disabled,
-  active: props.pressed
-}];
-
-// Compute the link props to pass to b-link (if required)
-const computeLinkProps = props => isLink(props) ? pluckProps(linkProps, props) : {};
-
-// Compute the attributes for a button
-const computeAttrs = (props, data) => {
-  const button = isButton(props);
-  const link = isLink(props);
-  const toggle = isToggle(props);
-  const nonStandardTag = isNonStandardTag(props);
-  const hashLink = link && props.href === '#';
-  const role = data.attrs && data.attrs.role ? data.attrs.role : null;
-  let tabindex = data.attrs ? data.attrs.tabindex : null;
-  if (nonStandardTag || hashLink) {
-    tabindex = '0';
-  }
-  return {
-    // Type only used for "real" buttons
-    type: button && !link ? props.type : null,
-    // Disabled only set on "real" buttons
-    disabled: button ? props.disabled : null,
-    // We add a role of button when the tag is not a link or button for ARIA
-    // Don't bork any role provided in `data.attrs` when `isLink` or `isButton`
-    // Except when link has `href` of `#`
-    role: nonStandardTag || hashLink ? 'button' : role,
-    // We set the `aria-disabled` state for non-standard tags
-    'aria-disabled': nonStandardTag ? String(props.disabled) : null,
-    // For toggles, we need to set the pressed state for ARIA
-    'aria-pressed': toggle ? String(props.pressed) : null,
-    // `autocomplete="off"` is needed in toggle mode to prevent some browsers
-    // from remembering the previous setting when using the back button
-    autocomplete: toggle ? 'off' : null,
-    // `tabindex` is used when the component is not a button
-    // Links are tabbable, but don't allow disabled, while non buttons or links
-    // are not tabbable, so we mimic that functionality by disabling tabbing
-    // when disabled, and adding a `tabindex="0"` to non buttons or non links
-    tabindex: props.disabled && !button ? '-1' : tabindex
-  };
-};
-
-// --- Main component ---
-
-// @vue/component
-const BButton = /*#__PURE__*/extend({
-  name: NAME_BUTTON,
-  functional: true,
-  props,
-  render(h, _ref) {
-    let {
-      props,
-      data,
-      listeners,
-      children
-    } = _ref;
-    const toggle = isToggle(props);
-    const link = isLink(props);
-    const nonStandardTag = isNonStandardTag(props);
-    const hashLink = link && props.href === '#';
-    const on = {
-      keydown(event) {
-        // When the link is a `href="#"` or a non-standard tag (has `role="button"`),
-        // we add a keydown handlers for CODE_SPACE/CODE_ENTER
-        /* istanbul ignore next */
-        if (props.disabled || !(nonStandardTag || hashLink)) {
-          return;
-        }
-        const {
-          keyCode
-        } = event;
-        // Add CODE_SPACE handler for `href="#"` and CODE_ENTER handler for non-standard tags
-        if (keyCode === CODE_SPACE || keyCode === CODE_ENTER && nonStandardTag) {
-          const target = event.currentTarget || event.target;
-          stopEvent(event, {
-            propagation: false
-          });
-          target.click();
-        }
-      },
-      click(event) {
-        /* istanbul ignore if: blink/button disabled should handle this */
-        if (props.disabled && isEvent(event)) {
-          stopEvent(event);
-        } else if (toggle && listeners && listeners['update:pressed']) {
-          // Send `.sync` updates to any "pressed" prop (if `.sync` listeners)
-          // `concat()` will normalize the value to an array without
-          // double wrapping an array value in an array
-          concat(listeners['update:pressed']).forEach(fn => {
-            if (isFunction(fn)) {
-              fn(!props.pressed);
-            }
-          });
-        }
-      }
-    };
-    if (toggle) {
-      on.focusin = handleFocus;
-      on.focusout = handleFocus;
-    }
-    const componentData = {
-      staticClass: 'btn',
-      class: computeClass(props),
-      props: computeLinkProps(props),
-      attrs: computeAttrs(props, data),
-      on
-    };
-    return h(link ? BLink : props.tag, mergeData({
-      ...data,
-      props: undefined
-    }, componentData), children);
-  }
-});
-
-export { BButton, props };

package/dist/vendor/bootstrap-vue/src/components/button/index.js

@@ -1,2 +0,0 @@
-export { BButton } from './button';
-export { BButtonClose } from './button-close';

package/dist/vendor/bootstrap-vue/src/components/dropdown/dropdown-divider.js

@@ -1,41 +0,0 @@
-import { extend, mergeData } from '../../vue';
-import { NAME_DROPDOWN_DIVIDER } from '../../constants/components';
-import { PROP_TYPE_STRING } from '../../constants/props';
-import { makeProp } from '../../utils/props';
-import { omit } from '../../utils/object';
-
-// --- Props ---
-
-const props = {
-  tag: makeProp(PROP_TYPE_STRING, 'hr')
-};
-
-// --- Main component ---
-
-// @vue/component
-const BDropdownDivider = /*#__PURE__*/extend({
-  name: NAME_DROPDOWN_DIVIDER,
-  functional: true,
-  props,
-  render(h, _ref) {
-    let {
-      props,
-      data
-    } = _ref;
-    return h('li', mergeData(omit(data, ['attrs']), {
-      attrs: {
-        role: 'presentation'
-      }
-    }), [h(props.tag, {
-      staticClass: 'dropdown-divider',
-      attrs: {
-        ...(data.attrs || {}),
-        role: 'separator',
-        'aria-orientation': 'horizontal'
-      },
-      ref: 'divider'
-    })]);
-  }
-});
-
-export { BDropdownDivider, props };

package/dist/vendor/bootstrap-vue/src/components/dropdown/dropdown-form.js

@@ -1,52 +0,0 @@
-import { extend, mergeData } from '../../vue';
-import { NAME_DROPDOWN_FORM } from '../../constants/components';
-import { PROP_TYPE_BOOLEAN, PROP_TYPE_ARRAY_OBJECT_STRING } from '../../constants/props';
-import { sortKeys, omit } from '../../utils/object';
-import { makeProp } from '../../utils/props';
-import { props as props$1, BForm } from '../form/form';
-
-// --- Props ---
-
-const props = sortKeys({
-  ...props$1,
-  disabled: makeProp(PROP_TYPE_BOOLEAN, false),
-  formClass: makeProp(PROP_TYPE_ARRAY_OBJECT_STRING)
-});
-
-// --- Main component ---
-
-// @vue/component
-const BDropdownForm = /*#__PURE__*/extend({
-  name: NAME_DROPDOWN_FORM,
-  functional: true,
-  props,
-  render(h, _ref) {
-    let {
-      props,
-      data,
-      listeners,
-      children
-    } = _ref;
-    return h('li', mergeData(omit(data, ['attrs', 'on']), {
-      attrs: {
-        role: 'presentation'
-      }
-    }), [h(BForm, {
-      staticClass: 'b-dropdown-form',
-      class: [props.formClass, {
-        disabled: props.disabled
-      }],
-      props,
-      attrs: {
-        ...(data.attrs || {}),
-        disabled: props.disabled,
-        // Tab index of -1 for keyboard navigation
-        tabindex: props.disabled ? null : '-1'
-      },
-      on: listeners,
-      ref: 'form'
-    }, children)]);
-  }
-});
-
-export { BDropdownForm, props };

package/dist/vendor/bootstrap-vue/src/components/dropdown/dropdown-group.js

@@ -1,75 +0,0 @@
-import { extend, mergeData } from '../../vue';
-import { NAME_DROPDOWN_GROUP } from '../../constants/components';
-import { PROP_TYPE_STRING, PROP_TYPE_ARRAY_OBJECT_STRING } from '../../constants/props';
-import { SLOT_NAME_HEADER, SLOT_NAME_DEFAULT } from '../../constants/slots';
-import { isTag } from '../../utils/dom';
-import { identity } from '../../utils/identity';
-import { hasNormalizedSlot, normalizeSlot } from '../../utils/normalize-slot';
-import { omit } from '../../utils/object';
-import { makeProp } from '../../utils/props';
-
-// --- Props ---
-
-const props = {
-  ariaDescribedby: makeProp(PROP_TYPE_STRING),
-  header: makeProp(PROP_TYPE_STRING),
-  headerClasses: makeProp(PROP_TYPE_ARRAY_OBJECT_STRING),
-  headerTag: makeProp(PROP_TYPE_STRING, 'header'),
-  headerVariant: makeProp(PROP_TYPE_STRING),
-  id: makeProp(PROP_TYPE_STRING)
-};
-
-// --- Main component ---
-
-// @vue/component
-const BDropdownGroup = /*#__PURE__*/extend({
-  name: NAME_DROPDOWN_GROUP,
-  functional: true,
-  props,
-  render(h, _ref) {
-    let {
-      props,
-      data,
-      slots,
-      scopedSlots
-    } = _ref;
-    const {
-      id,
-      variant,
-      header,
-      headerTag
-    } = props;
-    const $slots = slots();
-    const $scopedSlots = scopedSlots || {};
-    const slotScope = {};
-    const headerId = id ? `_bv_${id}_group_dd_header` : null;
-    let $header = h();
-    if (hasNormalizedSlot(SLOT_NAME_HEADER, $scopedSlots, $slots) || header) {
-      $header = h(headerTag, {
-        staticClass: 'dropdown-header',
-        class: [props.headerClasses, {
-          [`text-${variant}`]: variant
-        }],
-        attrs: {
-          id: headerId,
-          role: isTag(headerTag, 'header') ? null : 'heading'
-        }
-      }, normalizeSlot(SLOT_NAME_HEADER, slotScope, $scopedSlots, $slots) || header);
-    }
-    return h('li', mergeData(omit(data, ['attrs']), {
-      attrs: {
-        role: 'presentation'
-      }
-    }), [$header, h('ul', {
-      staticClass: 'list-unstyled',
-      attrs: {
-        ...(data.attrs || {}),
-        id,
-        role: 'group',
-        'aria-describedby': [headerId, props.ariaDescribedBy].filter(identity).join(' ').trim() || null
-      }
-    }, normalizeSlot(SLOT_NAME_DEFAULT, slotScope, $scopedSlots, $slots))]);
-  }
-});
-
-export { BDropdownGroup, props };