@gitlab/ui 128.17.0 → 129.0.0

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

@@ -2,4 +2,10 @@ const NAME = 'BvConfig';
 const PROP_NAME = '$bvConfig';
 const DEFAULT_BREAKPOINT = ['xs', 'sm', 'md', 'lg', 'xl'];
 
-export { DEFAULT_BREAKPOINT, NAME, PROP_NAME };
+// in milliseconds
+const TOOLTIP_DELAY = {
+  show: 500,
+  hide: 0
+};
+
+export { DEFAULT_BREAKPOINT, NAME, PROP_NAME, TOOLTIP_DELAY };

package/dist/vendor/bootstrap-vue/src/directives/tooltip/tooltip.js

@@ -1,10 +1,9 @@
-import { NAME_TOOLTIP } from '../../constants/components';
 import { IS_BROWSER } from '../../constants/env';
 import { EVENT_NAME_SHOW } from '../../constants/events';
 import { concat } from '../../utils/array';
 import { isVue3 } from '../../vue';
-import { getComponentConfig } from '../../utils/config';
 import { getScopeId } from '../../utils/get-scope-id';
+import { TOOLTIP_DELAY } from '../../constants/config';
 import { identity } from '../../utils/identity';
 import { getInstanceFromDirective } from '../../utils/get-instance-from-directive';
 import { isFunction, isString, isNumber, isPlainObject, isUndefined, isUndefinedOrNull } from '../../utils/inspect';
@@ -60,11 +59,11 @@ const parseBindings = (bindings, vnode) => /* istanbul ignore next: not easy to
     html: false,
     interactive: true,
     disabled: false,
-    delay: getComponentConfig(NAME_TOOLTIP, 'delay', 50),
-    boundary: String(getComponentConfig(NAME_TOOLTIP, 'boundary', 'scrollParent')),
-    boundaryPadding: toInteger(getComponentConfig(NAME_TOOLTIP, 'boundaryPadding', 5), 0),
-    variant: getComponentConfig(NAME_TOOLTIP, 'variant'),
-    customClass: getComponentConfig(NAME_TOOLTIP, 'customClass')
+    delay: TOOLTIP_DELAY,
+    boundary: 'scrollParent',
+    boundaryPadding: 5,
+    variant: undefined,
+    customClass: 'gl-tooltip'
   };
   // Process `bindings.value`
   if (isString(bindings.value) || isNumber(bindings.value)) {

package/dist/vendor/bootstrap-vue/src/mixins/dropdown.js

@@ -10,7 +10,7 @@ import { BvEvent } from '../utils/bv-event.class';
 import { requestAF, contains, closest, attemptFocus, selectAll, isVisible } from '../utils/dom';
 import { getRootEventName, stopEvent } from '../utils/events';
 import { sortKeys, mergeDeep } from '../utils/object';
-import { makePropsConfigurable, makeProp } from '../utils/props';
+import { makeProp } from '../utils/props';
 import { warn } from '../utils/warn';
 import { clickOutMixin } from './click-out';
 import { focusInMixin } from './focus-in';
@@ -34,7 +34,7 @@ const filterVisibles = els => (els || []).filter(isVisible);
 
 // --- Props ---
 
-const props = makePropsConfigurable(sortKeys({
+const props = sortKeys({
   ...props$1,
   // String: `scrollParent`, `window` or `viewport`
   // HTMLElement: HTML Element reference
@@ -54,7 +54,7 @@ const props = makePropsConfigurable(sortKeys({
   popperOpts: makeProp(PROP_TYPE_OBJECT, {}),
   // Right align menu (default is left align)
   right: makeProp(PROP_TYPE_BOOLEAN, false)
-}), NAME_DROPDOWN);
+});
 
 // --- Mixin ---
 

package/dist/vendor/bootstrap-vue/src/mixins/form-control.js

@@ -1,7 +1,7 @@
 import { extend } from '../vue';
 import { PROP_TYPE_BOOLEAN, PROP_TYPE_STRING } from '../constants/props';
 import { requestAF, isVisible, matches, select, attemptFocus } from '../utils/dom';
-import { makePropsConfigurable, makeProp } from '../utils/props';
+import { makeProp } from '../utils/props';
 
 // --- Constants ---
 
@@ -9,14 +9,14 @@ const SELECTOR = 'input, textarea, select';
 
 // --- Props ---
 
-const props = makePropsConfigurable({
+const props = {
   autofocus: makeProp(PROP_TYPE_BOOLEAN, false),
   disabled: makeProp(PROP_TYPE_BOOLEAN, false),
   form: makeProp(PROP_TYPE_STRING),
   id: makeProp(PROP_TYPE_STRING),
   name: makeProp(PROP_TYPE_STRING),
   required: makeProp(PROP_TYPE_BOOLEAN, false)
-}, 'formControls');
+};
 
 // --- Mixin ---
 

package/dist/vendor/bootstrap-vue/src/mixins/form-custom.js

@@ -1,12 +1,12 @@
 import { extend } from '../vue';
 import { PROP_TYPE_BOOLEAN } from '../constants/props';
-import { makePropsConfigurable, makeProp } from '../utils/props';
+import { makeProp } from '../utils/props';
 
 // --- Props ---
 
-const props = makePropsConfigurable({
+const props = {
   plain: makeProp(PROP_TYPE_BOOLEAN, false)
-}, 'formControls');
+};
 
 // --- Mixin ---
 

package/dist/vendor/bootstrap-vue/src/mixins/form-options.js

@@ -4,7 +4,7 @@ import { get } from '../utils/get';
 import { stripTags } from '../utils/html';
 import { isPlainObject, isUndefined, isArray } from '../utils/inspect';
 import { keys } from '../utils/object';
-import { makePropsConfigurable, makeProp } from '../utils/props';
+import { makeProp } from '../utils/props';
 import { warn } from '../utils/warn';
 
 // --- Constants ---
@@ -13,13 +13,13 @@ const OPTIONS_OBJECT_DEPRECATED_MSG = 'Setting prop "options" to an object is de
 
 // --- Props ---
 
-const props = makePropsConfigurable({
+const props = {
   disabledField: makeProp(PROP_TYPE_STRING, 'disabled'),
   htmlField: makeProp(PROP_TYPE_STRING, 'html'),
   options: makeProp(PROP_TYPE_ARRAY_OBJECT, []),
   textField: makeProp(PROP_TYPE_STRING, 'text'),
   valueField: makeProp(PROP_TYPE_STRING, 'value')
-}, 'formOptionControls');
+};
 
 // --- Mixin ---
 

package/dist/vendor/bootstrap-vue/src/mixins/form-radio-check-group.js

@@ -5,7 +5,7 @@ import { htmlOrText } from '../utils/html';
 import { looseEqual } from '../utils/loose-equal';
 import { makeModelMixin } from '../utils/model';
 import { sortKeys, pick, omit } from '../utils/object';
-import { makePropsConfigurable, makeProp } from '../utils/props';
+import { makeProp } from '../utils/props';
 import { BFormRadio } from '../components/form-radio/form-radio';
 import { props as props$2, formControlMixin } from './form-control';
 import { props as props$6, formCustomMixin } from './form-custom';
@@ -28,7 +28,7 @@ const {
 
 // --- Props ---
 
-const props = makePropsConfigurable(sortKeys({
+const props = sortKeys({
   ...props$1,
   ...modelProps,
   ...props$2,
@@ -39,7 +39,7 @@ const props = makePropsConfigurable(sortKeys({
   ariaInvalid: makeProp(PROP_TYPE_BOOLEAN_STRING, false),
   stacked: makeProp(PROP_TYPE_BOOLEAN, false),
   validated: makeProp(PROP_TYPE_BOOLEAN, false)
-}), 'formRadioCheckGroups');
+});
 
 // --- Mixin ---
 

package/dist/vendor/bootstrap-vue/src/mixins/form-radio-check.js

@@ -6,7 +6,7 @@ import { isBoolean } from '../utils/inspect';
 import { looseEqual } from '../utils/loose-equal';
 import { makeModelMixin } from '../utils/model';
 import { sortKeys } from '../utils/object';
-import { makePropsConfigurable, makeProp } from '../utils/props';
+import { makeProp } from '../utils/props';
 import { attrsMixin } from './attrs';
 import { props as props$2, formControlMixin } from './form-control';
 import { props as props$5, formCustomMixin } from './form-custom';
@@ -28,7 +28,7 @@ const {
 
 // --- Props ---
 
-const props = makePropsConfigurable(sortKeys({
+const props = sortKeys({
   ...props$1,
   ...modelProps,
   ...props$2,
@@ -39,7 +39,7 @@ const props = makePropsConfigurable(sortKeys({
   ariaLabelledby: makeProp(PROP_TYPE_STRING),
   inline: makeProp(PROP_TYPE_BOOLEAN, false),
   value: makeProp(PROP_TYPE_ANY)
-}), 'formRadioCheckControls');
+});
 
 // --- Mixin ---
 

package/dist/vendor/bootstrap-vue/src/mixins/form-size.js

@@ -1,12 +1,12 @@
 import { extend } from '../vue';
 import { PROP_TYPE_STRING } from '../constants/props';
-import { makePropsConfigurable, makeProp } from '../utils/props';
+import { makeProp } from '../utils/props';
 
 // --- Props ---
 
-const props = makePropsConfigurable({
+const props = {
   size: makeProp(PROP_TYPE_STRING)
-}, 'formControls');
+};
 
 // --- Mixin ---
 

package/dist/vendor/bootstrap-vue/src/mixins/form-state.js

@@ -1,7 +1,7 @@
 import { extend } from '../vue';
 import { PROP_TYPE_BOOLEAN } from '../constants/props';
 import { isBoolean } from '../utils/inspect';
-import { makePropsConfigurable, makeProp } from '../utils/props';
+import { makeProp } from '../utils/props';
 import { safeVueInstance } from '../utils/safe-vue-instance';
 
 /* Form control contextual state class computation
@@ -15,10 +15,10 @@ import { safeVueInstance } from '../utils/safe-vue-instance';
 
 // --- Props ---
 
-const props = makePropsConfigurable({
+const props = {
   // Tri-state prop: true, false, null (or undefined)
   state: makeProp(PROP_TYPE_BOOLEAN, null)
-}, 'formState');
+};
 
 // --- Mixin ---
 

package/dist/vendor/bootstrap-vue/src/mixins/form-text.js

@@ -7,7 +7,7 @@ import { mathMax } from '../utils/math';
 import { makeModelMixin } from '../utils/model';
 import { toInteger, toFloat } from '../utils/number';
 import { sortKeys } from '../utils/object';
-import { makePropsConfigurable, makeProp, hasPropFunction } from '../utils/props';
+import { makeProp, hasPropFunction } from '../utils/props';
 import { toString } from '../utils/string';
 
 // --- Constants ---
@@ -25,7 +25,7 @@ const {
 
 // --- Props ---
 
-const props = makePropsConfigurable(sortKeys({
+const props = sortKeys({
   ...modelProps,
   ariaInvalid: makeProp(PROP_TYPE_BOOLEAN_STRING, false),
   autocomplete: makeProp(PROP_TYPE_STRING),
@@ -40,7 +40,7 @@ const props = makePropsConfigurable(sortKeys({
   plaintext: makeProp(PROP_TYPE_BOOLEAN, false),
   readonly: makeProp(PROP_TYPE_BOOLEAN, false),
   trim: makeProp(PROP_TYPE_BOOLEAN, false)
-}), 'formTextControls');
+});
 
 // --- Mixin ---
 

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@gitlab/ui",
-  "version": "128.17.0",
+  "version": "129.0.0",
   "description": "GitLab UI Components",
   "license": "MIT",
   "main": "dist/index.js",

package/src/components/base/form/form_checkbox/form_checkbox.vue

@@ -93,7 +93,8 @@ export default {
      * Value returned when this checkbox is checked.
      */
     value: {
-      type: [Array, Boolean, String],
+      // `value` prop can be any type
+      type: undefined,
       required: false,
       default: true,
     },
@@ -101,7 +102,8 @@ export default {
      * Value returned when this checkbox is unchecked. Note not applicable when multiple checkboxes bound to the same v-model array.
      */
     uncheckedValue: {
-      type: [Array, Boolean, String],
+      // `uncheckedValue` prop can be any type
+      type: undefined,
       required: false,
       default: false,
     },

package/src/components/base/form/form_radio/form_radio.vue

@@ -1,51 +1,240 @@
 <script>
-import { BFormRadio } from '../../../../vendor/bootstrap-vue/src/components/form-radio/form-radio';
-
-const { model } = BFormRadio.options;
+import uniqueId from 'lodash/uniqueId';
+import isBoolean from 'lodash/isBoolean';
+import { looseEqual } from '../../../../vendor/bootstrap-vue/src/utils/loose-equal';
 
 export default {
   name: 'GlFormRadio',
-  components: { BFormRadio },
+  inject: {
+    getGroup: {
+      // When we remove BFormRadioGroup from GlFormRadioGroup, we can rename
+      // the `getBvRadioGroup` provide to `getRadioGroup`.
+      from: 'getBvRadioGroup',
+      default: () => () => null,
+    },
+  },
   inheritAttrs: false,
   model: {
-    prop: model.prop,
-    event: model.event,
+    prop: 'checked',
+    event: 'input',
   },
   props: {
     /**
-     * Whether the radio is checked
+     * Used to set the `id` attribute on the rendered content, and used as the base to generate any additional element IDs as needed.
+     */
+    id: {
+      type: String,
+      required: false,
+      default: undefined,
+    },
+    /**
+     * The current value of the radio. When bound to multiple radios, this is the value of the currently selected radio.
      */
     checked: {
-      type: [String, Number, Boolean, Object],
+      // `checked` prop can be any type
+      type: undefined,
+      required: false,
+      default: null,
+    },
+    /**
+     * When set to `true`, disables the component's functionality and places it in a disabled state.
+     */
+    disabled: {
+      type: Boolean,
+      required: false,
+      default: false,
+    },
+    /**
+     * Sets the value of the `name` attribute on the form control.
+     */
+    name: {
+      type: String,
+      required: false,
+      default: undefined,
+    },
+    /**
+     * Adds the `required` attribute to the form control.
+     */
+    required: {
+      type: Boolean,
       required: false,
       default: false,
     },
+    /**
+     * Controls the validation state appearance of the component. `true` for valid, `false` for invalid, or `null` for no validation state.
+     */
+    state: {
+      type: Boolean,
+      required: false,
+      default: null,
+    },
+    /**
+     * Value returned when this radio is selected.
+     */
+    value: {
+      // `value` prop can be any type
+      type: undefined,
+      required: false,
+      default: true,
+    },
+  },
+  data() {
+    const group = this.getGroup();
+    return {
+      internalId: this.id ? this.id : uniqueId('gitlab_ui_radio_'),
+      localChecked: group ? group.checked : this.checked,
+    };
+  },
+  computed: {
+    computedLocalChecked: {
+      get() {
+        return this.isGroup ? this.group.localChecked : this.localChecked;
+      },
+      set(value) {
+        if (this.isGroup) {
+          this.group.localChecked = value;
+        } else {
+          this.localChecked = value;
+        }
+      },
+    },
+    group() {
+      return this.getGroup();
+    },
+    isGroup() {
+      // Is this radio a child of radio-group?
+      return Boolean(this.group);
+    },
+    computedState() {
+      if (this.isGroup) return this.group.computedState;
+      return isBoolean(this.state) ? this.state : null;
+    },
+    stateClass() {
+      if (this.computedState === true) return 'is-valid';
+      if (this.computedState === false) return 'is-invalid';
+      return null;
+    },
+    computedAriaInvalid() {
+      return this.computedState === false ? 'true' : null;
+    },
+    isChecked() {
+      return looseEqual(this.computedLocalChecked, this.value);
+    },
+    isDisabled() {
+      // Child can be disabled while parent isn't, but is always disabled if group is
+      return this.isGroup ? this.group.disabled || this.disabled : this.disabled;
+    },
+    isRequired() {
+      // Required only works when a name is provided for the input(s)
+      // Child can only be required when parent is
+      // Groups will always have a name (either user supplied or auto generated)
+      return this.computedName && (this.isGroup ? this.group.required : this.required);
+    },
+    computedName() {
+      // Group name preferred over local name
+      return (this.isGroup ? this.group.groupName : this.name) || null;
+    },
+    computedAttrs() {
+      const { isDisabled: disabled, isRequired: required, value, isChecked: checked } = this;
+
+      return {
+        ...this.$attrs,
+        id: this.internalId,
+        name: this.computedName,
+        disabled,
+        required,
+        value,
+        checked,
+        'aria-required': required || null,
+        'aria-invalid': this.computedAriaInvalid,
+      };
+    },
+  },
+  watch: {
+    checked(...args) {
+      this.checkedWatcher(...args);
+    },
+    computedLocalChecked(...args) {
+      this.computedLocalCheckedWatcher(...args);
+    },
+  },
+  methods: {
+    checkedWatcher(newValue) {
+      if (!looseEqual(newValue, this.computedLocalChecked)) {
+        this.computedLocalChecked = newValue;
+      }
+    },
+    computedLocalCheckedWatcher(newValue, oldValue) {
+      if (!looseEqual(newValue, oldValue)) {
+        /**
+         * Emitted when the selected value is changed
+         *
+         * @event input
+         * @type {boolean} current selected value of radio group
+         */
+        this.$emit('input', newValue);
+      }
+    },
+    handleChange() {
+      const { value } = this;
+
+      // Update `computedLocalChecked`
+      this.computedLocalChecked = value;
+
+      // Fire events in a `$nextTick()` to ensure the `v-model` is updated
+      this.$nextTick(() => {
+        /**
+         * Emitted when the selected value is changed due to user interaction
+         *
+         * @event change
+         * @type {boolean} current selected value of radio group
+         */
+        this.$emit('change', value);
+
+        // If this is a child of a group, we emit a change event on it as well
+        if (this.isGroup) {
+          /**
+           * Emitted when the selected value is changed due to user interaction
+           *
+           * @event change
+           * @type {boolean} current selected value of radio group
+           */
+          this.group.$emit('change', value);
+        }
+      });
+    },
+    focus() {
+      if (!this.disabled) {
+        this.$refs.input?.focus();
+      }
+    },
+    blur() {
+      if (!this.disabled) {
+        this.$refs.input?.blur();
+      }
+    },
   },
 };
 </script>
 
 <template>
-  <!--
-  Emitted when the selected value is changed
-  @event input
-  @type {boolean} current selected value of radio group
-
-  Emitted when the selected value is changed due to user interaction
-  @event change
-  @type {boolean} current selected value of radio group
-  -->
-  <b-form-radio
-    class="gl-form-radio"
-    :checked="checked"
-    v-bind="$attrs"
-    @input="$emit('input', $event)"
-    @change="$emit('change', $event)"
-  >
-    <!-- @slot Content to use for the label -->
-    <slot></slot>
-    <p v-if="$scopedSlots.help" class="help-text">
-      <!-- @slot Content provided here will be shown beneath the radio. Typically used for help or descriptive text. -->
-      <slot name="help"></slot>
-    </p>
-  </b-form-radio>
+  <div class="gl-form-radio custom-radio custom-control">
+    <input
+      ref="input"
+      key="input"
+      v-bind="computedAttrs"
+      type="radio"
+      class="custom-control-input"
+      :class="stateClass"
+      @change="handleChange"
+    />
+    <label :for="internalId" class="custom-control-label">
+      <!-- @slot Content to use for the label -->
+      <slot></slot>
+      <p v-if="Boolean($scopedSlots.help)" class="help-text">
+        <!-- @slot Content provided here will be shown beneath the radio. Typically used for help or descriptive text. -->
+        <slot name="help"></slot>
+      </p>
+    </label>
+  </div>
 </template>

package/src/components/base/tooltip/tooltip.vue

@@ -1,6 +1,5 @@
 <script>
 import { BTooltip } from '../../../vendor/bootstrap-vue/src/components/tooltip/tooltip';
-import { tooltipDelay } from '../../../utils/constants';
 import tooltipMixin from '../../mixins/tooltip_mixin';
 import { getGlTooltipDefaultContainer } from '../../../directives/tooltip/container';
 
@@ -8,7 +7,6 @@ const tooltipRefName = 'bvTooltip';
 
 export default {
   name: 'GlTooltip',
-  tooltipDelay,
   components: {
     BTooltip,
   },
@@ -24,7 +22,6 @@ export default {
     :ref="$options.tooltipRefName"
     v-bind="$attrs"
     :container="$attrs.container || $options.getGlTooltipDefaultContainer()"
-    :delay="$options.tooltipDelay"
     v-on="$listeners"
   >
     <!-- @slot Tooltip content -->

package/src/config.js

@@ -1,37 +1,4 @@
-import Vue from 'vue';
 import translationKeys from '../translations';
-import { BVConfigPlugin } from './vendor/bootstrap-vue/src/bv-config';
-import { tooltipDelay } from './utils/constants';
-
-const tooltipGlobalConfig = {
-  // Work around for https://github.com/bootstrap-vue/bootstrap-vue/issues/6507
-  boundaryPadding: 5,
-  customClass: 'gl-tooltip',
-  delay: tooltipDelay,
-};
-
-const popoverDelayConfig = {
-  show: 50, // BootstrapVue's default delay on show.
-  hide: 150, // Increased hide delay so that it doesn't disappear to quickly when user attempts to interact with the content.
-};
-
-/**
- * Guard against nonexistent localStorage,
- * or corrupted localStorage
- *
- * localStorage access is not possible in certain environments like
- * - in iframe usage in Chrome if embedded on another domain
- * - tests / node
- */
-try {
-  const glTooltipDelay = localStorage.getItem('gl-tooltip-delay');
-
-  if (glTooltipDelay) {
-    tooltipGlobalConfig.delay = JSON.parse(glTooltipDelay);
-  }
-} catch {
-  // localStorage doesn't exist (or the value is not properly formatted)
-}
 
 export const i18n = translationKeys;
 
@@ -61,13 +28,6 @@ const setConfigs = ({ translations, firstDayOfWeek } = {}) => {
   }
   configured = true;
 
-  Vue.use(BVConfigPlugin, {
-    BTooltip: tooltipGlobalConfig,
-    BPopover: {
-      delay: popoverDelayConfig,
-    },
-  });
-
   if (typeof firstDayOfWeek === 'number' && firstDayOfWeek >= 0 && firstDayOfWeek <= 6) {
     defaultConfig.firstDayOfWeek = firstDayOfWeek;
   }

package/src/utils/constants.js

@@ -242,12 +242,6 @@ export const tooltipPlacements = {
   bottom: 'bottom',
 };
 
-// in milliseconds
-export const tooltipDelay = {
-  show: 500,
-  hide: 0,
-};
-
 export const popoverPlacements = {
   top: 'top',
   right: 'right',