@gitlab/ui 131.3.0 → 131.3.1

package/dist/utils/constants.js

@@ -1,333 +0,0 @@
-import Vue from 'vue';
-import { POSITION } from '../components/utilities/truncate/constants';
-
-const COMMA = ',';
-const CONTRAST_LEVELS = [{
-  grade: 'F',
-  min: 0,
-  max: 3
-}, {
-  grade: 'AA+',
-  min: 3,
-  max: 4.5
-}, {
-  grade: 'AA',
-  min: 4.5,
-  max: 7
-}, {
-  grade: 'AAA',
-  min: 7,
-  max: 22
-}];
-const HEX_REGEX = /^#([0-9a-fA-F]{3}|[0-9a-fA-F]{6})$/;
-const LEFT_MOUSE_BUTTON = 0;
-const progressBarVariantOptions = {
-  primary: 'primary',
-  success: 'success',
-  warning: 'warning',
-  danger: 'danger'
-};
-const badgeSizeOptions = {
-  sm: 'sm',
-  md: 'md',
-  lg: 'lg'
-};
-const badgeVariantOptions = {
-  neutral: 'neutral',
-  info: 'info',
-  success: 'success',
-  warning: 'warning',
-  danger: 'danger',
-  tier: 'tier'
-};
-const badgeIconSizeOptions = {
-  sm: 12,
-  md: 16
-};
-const variantCssColorMap = {
-  muted: 'gl-text-gray-500',
-  neutral: 'gl-text-blue-100',
-  info: 'gl-text-blue-500',
-  success: 'gl-text-green-500',
-  warning: 'gl-text-orange-500',
-  danger: 'gl-text-red-500'
-};
-const targetOptions = ['_self', '_blank', '_parent', '_top', null];
-const viewModeOptions = {
-  dark: 'dark',
-  light: 'light'
-};
-const labelColorOptions = {
-  ...viewModeOptions
-};
-const avatarSizeOptions = [96, 64, 48, 32, 24, 16];
-const avatarsInlineSizeOptions = [32, 24, 16];
-const avatarShapeOptions = {
-  circle: 'circle',
-  rect: 'rect'
-};
-const formStateOptions = {
-  default: null,
-  valid: true,
-  invalid: false
-};
-const breadCrumbSizeOptions = {
-  sm: 'sm',
-  md: 'md'
-};
-const buttonCategoryOptions = {
-  primary: 'primary',
-  secondary: 'secondary',
-  tertiary: 'tertiary'
-};
-const buttonVariantOptions = {
-  default: 'default',
-  confirm: 'confirm',
-  danger: 'danger',
-  link: 'link',
-  /**
-   * The "reset" variant can be used when customization of GlButton styles is required
-   * (e.g. for the "close" button in GlLabel).
-   * It should be used sparingly and only when other approaches fail.
-   * Prefer supported variants where ever possible.
-   */
-  reset: 'gl-reset'
-};
-const badgeForButtonOptions = {
-  [buttonVariantOptions.default]: badgeVariantOptions.neutral,
-  [buttonVariantOptions.confirm]: badgeVariantOptions.info,
-  [buttonVariantOptions.danger]: badgeVariantOptions.danger
-};
-const dropdownVariantOptions = {
-  default: 'default',
-  confirm: 'confirm',
-  info: 'info (deprecated)',
-  danger: 'danger',
-  link: 'link'
-};
-const dropdownItemVariantOptions = {
-  default: 'default',
-  danger: 'danger'
-};
-const dropdownPlacements = {
-  'right-start': 'right-start',
-  'bottom-start': 'bottom-start',
-  'bottom-end': 'bottom-end',
-  bottom: 'bottom',
-  left: 'bottom-start',
-  // deprecated, should be replaced with "bottom-start"
-  center: 'bottom',
-  // deprecated, should be replaced with "bottom"
-  right: 'bottom-end' // deprecated, should be replaced with "bottom-end"
-};
-const dropdownHorizontalCornerPlacement = ['right-start', 'right-end', 'left-start', 'left-end'];
-const dropdownVerticalCornerPlacement = ['bottom-start', 'top-start', 'bottom-end', 'top-end'];
-const dropdownAllowedAutoPlacements = {
-  'right-start': dropdownHorizontalCornerPlacement,
-  'bottom-start': dropdownVerticalCornerPlacement,
-  'bottom-end': dropdownVerticalCornerPlacement,
-  bottom: ['bottom', 'top'],
-  left: dropdownVerticalCornerPlacement,
-  // deprecated, should be replaced with "bottom-start"
-  center: ['bottom', 'top'],
-  // deprecated, should be replaced with "bottom"
-  right: dropdownVerticalCornerPlacement // deprecated, should be replaced with "bottom-end"
-};
-const buttonSizeOptions = {
-  small: 'sm',
-  medium: 'md'
-};
-const datepickerWidthOptionsMap = {
-  sm: 'sm',
-  md: 'md',
-  lg: 'lg',
-  xl: 'xl'
-};
-
-// size options all have corresponding styles (e.g. .s12 defined in icon.scss)
-const iconSizeOptions = [8, 12, 14, 16, 24, 32, 48, 72];
-const iconVariantOptions = {
-  current: 'gl-fill-current',
-  default: 'gl-fill-icon-default',
-  subtle: 'gl-fill-icon-subtle',
-  strong: 'gl-fill-icon-strong',
-  disabled: 'gl-fill-icon-disabled',
-  link: 'gl-fill-icon-link',
-  info: 'gl-fill-icon-info',
-  warning: 'gl-fill-icon-warning',
-  danger: 'gl-fill-icon-danger',
-  success: 'gl-fill-icon-success'
-};
-const animatedIconVariantOptions = {
-  current: 'gl-animated-icon-current',
-  default: 'gl-animated-icon-default',
-  subtle: 'gl-animated-icon-subtle',
-  strong: 'gl-animated-icon-strong',
-  disabled: 'gl-animated-icon-disabled',
-  link: 'gl-animated-icon-link',
-  info: 'gl-animated-icon-info',
-  warning: 'gl-animated-icon-warning',
-  danger: 'gl-animated-icon-danger',
-  success: 'gl-animated-icon-success'
-};
-
-/**
- * Maps badge variants to their corresponding icon variants.
- * Used by GlSingleStat to ensure icons match the semantic meaning of their badge variant.
- */
-const badgeVariantToIconVariantMap = {
-  neutral: 'default',
-  info: 'info',
-  success: 'success',
-  warning: 'warning',
-  danger: 'danger',
-  tier: 'default'
-};
-const linkVariantInline = 'inline';
-const linkVariantMeta = 'meta';
-const linkVariantMention = 'mention';
-const linkVariantMentionCurrent = 'mentionCurrent';
-const linkVariantUnstyled = 'unstyled';
-const linkVariantOptions = {
-  [linkVariantInline]: 'gl-link-inline',
-  [linkVariantMeta]: 'gl-link-meta',
-  [linkVariantMention]: 'gl-link-mention',
-  [linkVariantMentionCurrent]: 'gl-link-mention-current',
-  [linkVariantUnstyled]: ''
-};
-const triggerVariantOptions = {
-  click: 'click',
-  hover: 'hover',
-  focus: 'focus'
-};
-const tooltipPlacements = {
-  top: 'top',
-  left: 'left',
-  right: 'right',
-  bottom: 'bottom'
-};
-const popoverPlacements = {
-  top: 'top',
-  right: 'right',
-  bottom: 'bottom',
-  left: 'left'
-};
-const stackedPresentationOptions = {
-  stacked: 'stacked',
-  tiled: 'tiled'
-};
-const alignOptions = {
-  left: 'left',
-  center: 'center',
-  right: 'right',
-  fill: 'fill'
-};
-const alertVariantOptions = {
-  success: 'success',
-  warning: 'warning',
-  danger: 'danger',
-  info: 'info',
-  tip: 'tip'
-};
-const alertVariantIconMap = {
-  success: 'check-circle',
-  warning: 'warning',
-  danger: 'error',
-  info: 'information-o',
-  tip: 'bulb'
-};
-const colorThemes = {
-  indigo: 'theme-indigo-900',
-  'light-indigo': 'theme-indigo-700',
-  blue: 'theme-blue-900',
-  'light-blue': 'theme-blue-700',
-  green: 'theme-green-900',
-  'light-green': 'theme-green-700',
-  red: 'theme-red-900',
-  'light-red': 'theme-red-700',
-  dark: 'gray-900',
-  light: 'gray-700'
-};
-const modalButtonDefaults = {
-  actionPrimary: {
-    variant: 'confirm',
-    category: 'primary'
-  },
-  actionSecondary: {
-    variant: 'confirm',
-    category: 'secondary'
-  },
-  actionCancel: {
-    variant: 'default'
-  }
-};
-const tabsButtonDefaults = {
-  actionPrimary: {
-    variant: 'confirm',
-    category: 'primary'
-  },
-  actionSecondary: {
-    variant: 'default',
-    category: 'secondary'
-  },
-  actionTertiary: {
-    variant: 'default'
-  }
-};
-const tokenVariants = ['default', 'search-type', 'search-value'];
-const resizeDebounceTime = 200;
-
-// Datetime constants
-const defaultDateFormat = 'YYYY-MM-DD';
-const bannerVariants = ['promotion', 'introduction'];
-const maxZIndex = 10;
-const modalSizeOptions = {
-  sm: 'sm',
-  md: 'md',
-  lg: 'lg'
-};
-const focusableTags = ['INPUT', 'TEXTAREA', 'A', 'BUTTON', 'SELECT'];
-const keyboard = {
-  escape: 'Escape',
-  backspace: 'Backspace',
-  delete: 'Delete',
-  left: 'Left',
-  arrowLeft: 'ArrowLeft',
-  right: 'Right',
-  arrowRight: 'ArrowRight',
-  home: 'Home',
-  end: 'End',
-  tab: 'Tab'
-};
-const truncateOptions = POSITION;
-const formInputWidths = {
-  xs: 'xs',
-  sm: 'sm',
-  md: 'md',
-  lg: 'lg',
-  xl: 'xl',
-  '(unset or null)': null
-};
-const toggleLabelPosition = {
-  hidden: 'hidden',
-  left: 'left',
-  top: 'top'
-};
-const tooltipActionEvents = ['open', 'close', 'enable', 'disable'];
-const drawerVariants = {
-  default: 'default',
-  sidebar: 'sidebar'
-};
-const loadingIconSizes = {
-  'sm (16x16)': 'sm',
-  'md (24x24)': 'md',
-  'lg (32x32)': 'lg',
-  'xl (64x64)': 'xl'
-};
-const loadingIconVariants = {
-  spinner: 'spinner',
-  dots: 'dots'
-};
-const isVue3 = Boolean(Vue.Fragment);
-
-export { COMMA, CONTRAST_LEVELS, HEX_REGEX, LEFT_MOUSE_BUTTON, alertVariantIconMap, alertVariantOptions, alignOptions, animatedIconVariantOptions, avatarShapeOptions, avatarSizeOptions, avatarsInlineSizeOptions, badgeForButtonOptions, badgeIconSizeOptions, badgeSizeOptions, badgeVariantOptions, badgeVariantToIconVariantMap, bannerVariants, breadCrumbSizeOptions, buttonCategoryOptions, buttonSizeOptions, buttonVariantOptions, colorThemes, datepickerWidthOptionsMap, defaultDateFormat, drawerVariants, dropdownAllowedAutoPlacements, dropdownItemVariantOptions, dropdownPlacements, dropdownVariantOptions, focusableTags, formInputWidths, formStateOptions, iconSizeOptions, iconVariantOptions, isVue3, keyboard, labelColorOptions, linkVariantInline, linkVariantMention, linkVariantMentionCurrent, linkVariantMeta, linkVariantOptions, linkVariantUnstyled, loadingIconSizes, loadingIconVariants, maxZIndex, modalButtonDefaults, modalSizeOptions, popoverPlacements, progressBarVariantOptions, resizeDebounceTime, stackedPresentationOptions, tabsButtonDefaults, targetOptions, toggleLabelPosition, tokenVariants, tooltipActionEvents, tooltipPlacements, triggerVariantOptions, truncateOptions, variantCssColorMap, viewModeOptions };

package/dist/utils/data_utils.js

@@ -1,19 +0,0 @@
-const getRepeatingValue = index => {
-  const values = [100, 500, 400, 200, 100, 800, 400, 500, 600, 300, 800, 900, 110, 700, 400, 300, 500, 300, 400, 600, 700];
-  return index < values.length ? values[index] : values[index % values.length];
-};
-const generateTimeSeries = () => new Array(100).fill(0).map((el, i) => [new Date(2018, 0, i), getRepeatingValue(i)]);
-
-// takes an element and a list and `intersperses' that element between the elements of the list.
-// (',' ['a', 'b', 'c']) -> ['a', ',', 'b', ',', 'c']
-const intersperse = (separator, items) => {
-  const [head, ...rest] = items;
-  const separatorFactory = typeof separator === 'function' ? separator : () => separator;
-  return [head, ...rest.flatMap(item => [separatorFactory(), item], rest)];
-};
-
-// inserts a value at a given index into an array
-// (1, 2, [1, 3, 4]) -> [1, 2, 3, 4]
-const insert = (index, newItem, items) => [...items.slice(0, index), newItem, ...items.slice(index)];
-
-export { generateTimeSeries, insert, intersperse };

package/dist/utils/datetime_utility.js

@@ -1,61 +0,0 @@
-// These utility methods come from the Gitlab repo; app/assets/javascripts/lib/utils/datetime_utility.js
-
-/**
- * This method allows you to create new Date instance from existing
- * date instance without keeping the reference.
- *
- * @param {Date} date
- */
-const newDate = date => date instanceof Date ? new Date(date.getTime()) : new Date();
-
-/**
- * Computes the difference between 2 date objects.
- *
- * @param {Date} a the start date
- * @param {Date} b the end date
- * @example
- * // returns 5
- * getDayDifference(new Date('2020-08-10'), new Date('2020-08-15'));
- * @returns {Number} Number of days between the 2 dates
- */
-const getDayDifference = (a, b) => {
-  const millisecondsPerDay = 1000 * 60 * 60 * 24;
-  const date1 = Date.UTC(a.getFullYear(), a.getMonth(), a.getDate());
-  const date2 = Date.UTC(b.getFullYear(), b.getMonth(), b.getDate());
-  return Math.floor((date2 - date1) / millisecondsPerDay);
-};
-
-/**
- * Subtracts a given number of days from a given date and returns the new date.
- *
- * @param {Date} date the date that we will substract days from
- * @param {Number} daysInPast number of days that are subtracted from a given date
- * @example
- * // returns Mon Aug 10 2020 00:00:00
- * getDateInPast(new Date('2020-08-15'), 5);
- * @returns {Date} Date in past as Date object
- */
-const getDateInPast = (date, daysInPast) => new Date(newDate(date).setDate(date.getDate() - daysInPast));
-
-/**
- * Adds a given number of days to a given date and returns the new date.
- *
- * @param {Date} date the date that we will add days to
- * @param {Number} daysInFuture number of days that are added to a given date
- * @example
- * // returns Mon Aug 15 2020 00:00:00
- * getDateInFuture(new Date('2020-08-10'), 5);
- * @returns {Date} Date in future as Date object
- */
-const getDateInFuture = (date, daysInFuture) => new Date(newDate(date).setDate(date.getDate() + daysInFuture));
-
-/**
- * Are the given two dates equal
- *
- * @param {Date} date1
- * @param {Date} date2
- * @returns {Boolean}
- */
-const areDatesEqual = (date1, date2) => Boolean(date1 && date2 && new Date(date1).getTime() === new Date(date2).getTime());
-
-export { areDatesEqual, getDateInFuture, getDateInPast, getDayDifference, newDate };

package/dist/utils/equality_utils.js

@@ -1,84 +0,0 @@
-/**
- * Performs a deep, type-coercing equality check between two values.
- *
- * Unlike strict equality (`===`) or lodash's `isEqual`, this function:
- * - Compares objects and arrays by structure, not reference
- * - Coerces types before comparing primitives (e.g. `123` equals `'123'`)
- * - Compares Date objects by timestamp
- * - Compares File objects by inherited properties (name, size, type, lastModified)
- *
- * Used in form components (radio, checkbox) to detect meaningful value changes
- * in watchers, avoiding redundant event emissions when values are loosely equivalent.
- *
- * @param {*} a - First value to compare
- * @param {*} b - Second value to compare
- * @returns {boolean} Whether the two values are loosely equal
- */
-function looseEqual(a, b) {
-  if (a === b) {
-    return true;
-  }
-  let aValidType = a instanceof Date;
-  let bValidType = b instanceof Date;
-  if (aValidType || bValidType) {
-    return aValidType && bValidType ? a.getTime() === b.getTime() : false;
-  }
-  aValidType = Array.isArray(a);
-  bValidType = Array.isArray(b);
-  if (aValidType || bValidType) {
-    if (!aValidType || !bValidType || a.length !== b.length) {
-      return false;
-    }
-    // Compare arrays element by element
-    // Uses a for loop to handle sparse arrays (array.every doesn't handle sparse)
-    let equal = true;
-    for (let i = 0; equal && i < a.length; i += 1) {
-      equal = looseEqual(a[i], b[i]);
-    }
-    return equal;
-  }
-  aValidType = a !== null && typeof a === 'object';
-  bValidType = b !== null && typeof b === 'object';
-  if (aValidType || bValidType) {
-    if (!aValidType || !bValidType) {
-      return false;
-    }
-    const aKeysCount = Object.keys(a).length;
-    const bKeysCount = Object.keys(b).length;
-    if (aKeysCount !== bKeysCount) {
-      return false;
-    }
-    // Intentionally iterates inherited properties to compare complex types
-    // like File objects where properties are on the prototype
-    // eslint-disable-next-line guard-for-in
-    for (const key in a) {
-      const aHasKey = Object.prototype.hasOwnProperty.call(a, key);
-      const bHasKey = Object.prototype.hasOwnProperty.call(b, key);
-      if (aHasKey && !bHasKey || !aHasKey && bHasKey || !looseEqual(a[key], b[key])) {
-        return false;
-      }
-    }
-  }
-  return String(a) === String(b);
-}
-
-/**
- * Finds the first index in an array where the element is loosely equal to the given value.
- *
- * Works like `Array.prototype.indexOf`, but uses {@link looseEqual} for comparison
- * instead of strict equality.
- *
- * @param {Array} array - The array to search
- * @param {*} value - The value to find
- * @returns {number} The index of the first loosely matching element, or -1 if not found
- */
-function looseIndexOf(array, value) {
-  for (let i = 0; i < array.length; i += 1) {
-    if (looseEqual(array[i], value)) {
-      return i;
-    }
-  }
-  return -1;
-}
-
-export { looseEqual, looseIndexOf };

package/dist/utils/i18n.js

@@ -1,65 +0,0 @@
-import { escape } from 'lodash-es';
-import { i18n } from '../config';
-
-const defaultPluralHandler = (n, singleValue, pluralValue) => {
-  const value = n === 1 ? singleValue : pluralValue;
-  return value.replace(/%d/g, n);
-};
-
-/**
- * Marks a label as translatable and pluralized.
- *
- * @param {*} key Translation key to be leveraged by the consumer to provide a generic translation at configuration time.
- * @param {*} singularValue The singular value to be relied on if the consumer doesn't have translation capabilities.
- * @param {*} pluralValue The plural value to be relied on if the consumer doesn't have translation capabilities.
- * @returns {function} A function that takes a number and returns the pluralized translated label.
- */
-const translatePlural = (key, singularValue, pluralValue) => {
-  if (i18n[key]) {
-    return i18n[key];
-  }
-  return x => defaultPluralHandler(x, singularValue, pluralValue);
-};
-
-/**
- * Very limited implementation of sprintf supporting only named parameters.
- * Copied from the GitLab repo: https://gitlab.com/gitlab-org/gitlab/-/blob/0dff8b02accb3dccbf6cd31236834c37013aad59/app/assets/javascripts/locale/sprintf.js.
- * @param {string} input - (translated) text with parameters (e.g. '%{num_users} users use us')
- * @param {Object.<string, string|number>} [parameters] - object mapping parameter names to values (e.g. { num_users: 5 })
- * @param {boolean} [escapeParameters=true] - whether parameter values should be escaped (see https://lodash.com/docs/4.17.15#escape)
- * @returns {string} the text with parameters replaces (e.g. '5 users use us')
- * @see https://ruby-doc.org/core-2.3.3/Kernel.html#method-i-sprintf
- * @see https://gitlab.com/gitlab-org/gitlab-foss/issues/37992
- */
-function sprintf(input, parameters) {
-  let escapeParameters = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : true;
-  let output = input;
-  output = output.replace(/%+/g, '%');
-  if (parameters) {
-    const mappedParameters = new Map(Object.entries(parameters));
-    mappedParameters.forEach((key, parameterName) => {
-      const parameterValue = mappedParameters.get(parameterName);
-      const escapedParameterValue = escapeParameters ? escape(parameterValue) : parameterValue;
-      // Pass the param value as a function to ignore special replacement patterns like $` and $'.
-      // https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/String/replace#syntax
-      output = output.replace(new RegExp(`%{${parameterName}}`, 'g'), () => escapedParameterValue);
-    });
-  }
-  return output;
-}
-
-/**
- * Mark a label as translatable.
- *
- * @param {string} key Translation key to be leveraged by the consumer to provide a generic translation at configuration time.
- * @param {string} defaultValue A fallback value to be relied on if the consumer doesn't have translation capabilities.
- * @param {Object.<string, string|number>} [parameters] - Optional object mapping parameter names to values for sprintf substitution.
- * @returns {string} The translated label.
- */
-const translate = (key, defaultValue, parameters) => {
-  var _i18n$key;
-  const translatedValue = (_i18n$key = i18n[key]) !== null && _i18n$key !== void 0 ? _i18n$key : defaultValue;
-  return parameters ? sprintf(translatedValue, parameters) : translatedValue;
-};
-
-export { sprintf, translate, translatePlural };

package/dist/utils/is_slot_empty.js

@@ -1,34 +0,0 @@
-import Vue from 'vue';
-
-// Fragment will be available only in Vue.js 3
-const {
-  Fragment,
-  Comment,
-  Text
-} = Vue;
-function isVnodeEmpty(vnode) {
-  if (!vnode || Comment && vnode.type === Comment) {
-    return true;
-  }
-  if (Text && vnode.type === Text && !vnode.children.trim()) {
-    // Vue.js 3 text string is located in the children
-    return true;
-  }
-  if (Array.isArray(vnode)) {
-    // eslint-disable-next-line unicorn/no-array-callback-reference
-    return vnode.every(isVnodeEmpty);
-  }
-  if (Fragment && vnode.type === Fragment) {
-    // Vue.js 3 fragment, check children
-    // eslint-disable-next-line unicorn/no-array-callback-reference
-    return vnode.children.every(isVnodeEmpty);
-  }
-  return false;
-}
-function isSlotEmpty(vueInstance, slot, slotArgs) {
-  var _vueInstance$$scopedS, _vueInstance$$scopedS2;
-  const slotContent = (_vueInstance$$scopedS = (_vueInstance$$scopedS2 = vueInstance.$scopedSlots)[slot]) === null || _vueInstance$$scopedS === void 0 ? void 0 : _vueInstance$$scopedS.call(_vueInstance$$scopedS2, slotArgs);
-  return isVnodeEmpty(slotContent);
-}
-
-export { isSlotEmpty, isVnodeEmpty };