@gitlab/ui 132.0.0 → 132.0.2

package/dist/utils/utils.js

@@ -0,0 +1,205 @@
+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/vue_utils.js

@@ -0,0 +1,57 @@
+import Vue from 'vue';
+
+/**
+ * Checks whether the global Vue version is Vue 3 (or the Vue 3 compat build).
+ *
+ * Use this for module-level checks where no component instance is available,
+ * such as conditional test logic or static configuration.
+ *
+ * @type {boolean}
+ */
+const isGlobalVue3 = Boolean(Vue.Fragment);
+
+/**
+ * Checks whether a component instance is running under Vue 3 (or compat mode).
+ *
+ * In Vue 3, component instances expose an internal `$` property that holds
+ * the component's internal instance. This property does not exist in Vue 2.
+ *
+ * Prefer this over {@link isGlobalVue3} when you have access to a component
+ * instance, as it checks at the instance level rather than the global level.
+ *
+ * @param {object} instance - The Vue component instance (`this`).
+ * @returns {boolean} `true` if the instance is a Vue 3 component.
+ */
+const isVue3 = instance => Boolean(instance.$);
+
+/**
+ * Wraps a Vue component instance to safely access properties without
+ * triggering Vue 3 development warnings.
+ *
+ * In Vue 3 (and compat mode), component instances are Proxies. Accessing a
+ * property that doesn't exist on the instance (e.g. `this.$router` when no
+ * router is installed) triggers a development warning from Vue's `get` trap:
+ * "Property X was accessed during render but is not defined on instance."
+ *
+ * This utility returns a Proxy that uses the `in` operator (which hits Vue's
+ * `has` trap, which is silent) to check for property existence before accessing
+ * it. If the property doesn't exist, `undefined` is returned without ever
+ * hitting Vue's `get` trap.
+ *
+ * In Vue 2, the instance is returned as-is since there are no Proxy warnings.
+ *
+ * @param {object} target - The Vue component instance (`this`).
+ * @returns {object} The original instance (Vue 2) or a safe Proxy wrapper (Vue 3).
+ */
+function safeVueInstance(target) {
+  if (!isVue3(target)) {
+    return target;
+  }
+  return new Proxy(target, {
+    get(obj, prop) {
+      return prop in obj ? obj[prop] : undefined;
+    }
+  });
+}
+
+export { isGlobalVue3, isVue3, safeVueInstance };

package/dist/utils.js

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

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

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

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

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

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

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

@@ -0,0 +1,52 @@
+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 };