@gitlab/ui 131.3.1 → 132.0.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@gitlab/ui",
-  "version": "131.3.1",
+  "version": "132.0.0",
   "description": "GitLab UI Components",
   "license": "MIT",
   "main": "dist/index.js",
@@ -103,6 +103,7 @@
     "@cypress/grep": "^4.1.1",
     "@figma/code-connect": "^1.4.3",
     "@gitlab/fonts": "^1.3.1",
+    "@gitlab/hybrid-vue": "npm:@vue/compat@3.5.30",
     "@gitlab/svgs": "*",
     "@jest/test-sequencer": "30.3.0",
     "@rollup/plugin-commonjs": "^28.0.9",

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

@@ -1,8 +1,8 @@
 <script>
 import { uniqueId, isBoolean, omit, pick } from 'lodash-es';
 import { looseEqual } from '../../../../utils/equality_utils';
-import { formOptionsMixin } from '../../../../vendor/bootstrap-vue/src/mixins/form-options';
 import { SafeHtmlDirective as SafeHtml } from '../../../../directives/safe_html/safe_html';
+import { normalizeOptions } from '../../../../utils/form_options_utils';
 import GlFormCheckbox from './form_checkbox.vue';
 
 // Attributes to pass down to checks/radios instead of applying them to the group
@@ -14,7 +14,6 @@ export default {
   directives: {
     SafeHtml,
   },
-  mixins: [formOptionsMixin],
   provide() {
     return {
       getCheckboxGroup: () => this,
@@ -98,6 +97,9 @@ export default {
     };
   },
   computed: {
+    formOptions() {
+      return normalizeOptions(this.options);
+    },
     computedState() {
       return isBoolean(this.state) ? this.state : null;
     },

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

@@ -1,8 +1,8 @@
 <script>
 import { uniqueId, isBoolean, omit, pick } from 'lodash-es';
 import { looseEqual } from '../../../../utils/equality_utils';
-import { formOptionsMixin } from '../../../../vendor/bootstrap-vue/src/mixins/form-options';
 import { SafeHtmlDirective as SafeHtml } from '../../../../directives/safe_html/safe_html';
+import { normalizeOptions } from '../../../../utils/form_options_utils';
 import GlFormRadio from '../form_radio/form_radio.vue';
 
 // Attributes to pass down to checks/radios instead of applying them to the group
@@ -16,7 +16,6 @@ export default {
   directives: {
     SafeHtml,
   },
-  mixins: [formOptionsMixin],
   provide() {
     return {
       getRadioGroup: () => this,
@@ -101,6 +100,9 @@ export default {
     };
   },
   computed: {
+    formOptions() {
+      return normalizeOptions(this.options);
+    },
     computedState() {
       return isBoolean(this.state) ? this.state : null;
     },

package/src/utils/form_options_utils.js

@@ -0,0 +1,39 @@
+/**
+ * Normalizes a single option into a standard { value, text, html, disabled } shape.
+ */
+function normalizeOption(option) {
+  if (option !== null && typeof option === 'object') {
+    const { value, text, html, disabled } = option;
+    return {
+      value: value === undefined ? text : value,
+      text: String(text),
+      html,
+      disabled: Boolean(disabled),
+    };
+  }
+  return {
+    value: option,
+    text: String(option),
+    disabled: false,
+  };
+}
+
+/**
+ * Normalizes an options array into a consistent format for rendering.
+ *
+ * Each option can be a primitive (string, number) or an object with
+ * `{ value, text, html, disabled }` properties. Primitives are converted
+ * to `{ value, text, disabled: false }`. For objects, `value` defaults to
+ * `text` when omitted and `disabled` defaults to `false`.
+ *
+ * @param {Array<string|number|{value?: *, text: string, html?: string, disabled?: boolean}>} options
+ *   The raw options array to normalize.
+ * @returns {Array<{value: *, text: string, html?: string, disabled: boolean}>}
+ *   The normalized options, or an empty array if the input is not an array.
+ */
+export function normalizeOptions(options) {
+  if (Array.isArray(options)) {
+    return options.map((option) => normalizeOption(option));
+  }
+  return [];
+}

package/src/vendor/bootstrap-vue/src/components/tabs/tabs.js

@@ -20,9 +20,10 @@ import {
   CODE_UP
 } from '../../constants/key-codes'
 import {
-  PROP_TYPE_ARRAY_OBJECT_STRING,
+  PROP_TYPE_ARRAY,
   PROP_TYPE_BOOLEAN,
   PROP_TYPE_NUMBER,
+  PROP_TYPE_OBJECT,
   PROP_TYPE_STRING
 } from '../../constants/props'
 import {
@@ -45,7 +46,6 @@ import { makeModelMixin } from '../../utils/model'
 import { toInteger } from '../../utils/number'
 import { sortKeys } from '../../utils/object'
 import { observeDom } from '../../utils/observe-dom'
-import { makeProp } from '../../utils/props'
 import { stableSort } from '../../utils/stable-sort'
 import { idMixin, props as idProps } from '../../mixins/id'
 import { normalizeSlotMixin } from '../../mixins/normalize-slot'
@@ -76,14 +76,41 @@ const BVTabButton = /*#__PURE__*/ extend({
     }
   },
   props: {
-    controls: makeProp(PROP_TYPE_STRING),
-    id: makeProp(PROP_TYPE_STRING),
-    noKeyNav: makeProp(PROP_TYPE_BOOLEAN, false),
-    posInSet: makeProp(PROP_TYPE_NUMBER),
-    setSize: makeProp(PROP_TYPE_NUMBER),
+    controls: {
+      type: PROP_TYPE_STRING,
+      required: false,
+      default: undefined
+    },
+    id: {
+      type: PROP_TYPE_STRING,
+      required: false,
+      default: undefined
+    },
+    noKeyNav: {
+      type: PROP_TYPE_BOOLEAN,
+      required: false,
+      default: false
+    },
+    posInSet: {
+      type: PROP_TYPE_NUMBER,
+      required: false,
+      default: undefined
+    },
+    setSize: {
+      type: PROP_TYPE_NUMBER,
+      required: false,
+      default: undefined
+    },
     // Reference to the child <b-tab> instance
-    tab: makeProp(),
-    tabIndex: makeProp(PROP_TYPE_NUMBER)
+    tab: {
+      required: false,
+      default: undefined
+    },
+    tabIndex: {
+      type: PROP_TYPE_NUMBER,
+      required: false,
+      default: undefined
+    }
   },
   computed: {
     bvTabs() {
@@ -188,11 +215,31 @@ const BVTabButton = /*#__PURE__*/ extend({
 
 // --- Props ---
 const navProps = {
-  align: makeProp(PROP_TYPE_STRING),
-  fill: makeProp(PROP_TYPE_BOOLEAN, false),
-  justified: makeProp(PROP_TYPE_BOOLEAN, false),
-  pills: makeProp(PROP_TYPE_BOOLEAN, false),
-  small: makeProp(PROP_TYPE_BOOLEAN, false)
+  align: {
+    type: PROP_TYPE_STRING,
+    required: false,
+    default: undefined
+  },
+  fill: {
+    type: PROP_TYPE_BOOLEAN,
+    required: false,
+    default: false
+  },
+  justified: {
+    type: PROP_TYPE_BOOLEAN,
+    required: false,
+    default: false
+  },
+  pills: {
+    type: PROP_TYPE_BOOLEAN,
+    required: false,
+    default: false
+  },
+  small: {
+    type: PROP_TYPE_BOOLEAN,
+    required: false,
+    default: false
+  }
 }
 
 export const props = sortKeys({
@@ -200,21 +247,65 @@ export const props = sortKeys({
   ...modelProps,
   ...navProps,
   // Only applied to the currently active `li`
-  activeNavItemClass: makeProp(PROP_TYPE_ARRAY_OBJECT_STRING),
+  activeNavItemClass: {
+    type: [PROP_TYPE_ARRAY, PROP_TYPE_OBJECT, PROP_TYPE_STRING],
+    required: false,
+    default: undefined
+  },
   // Only applied to the currently active `<b-tab>`
   // This prop is sniffed by the `<b-tab>` child
-  activeTabClass: makeProp(PROP_TYPE_ARRAY_OBJECT_STRING),
-  contentClass: makeProp(PROP_TYPE_ARRAY_OBJECT_STRING),
+  activeTabClass: {
+    type: [PROP_TYPE_ARRAY, PROP_TYPE_OBJECT, PROP_TYPE_STRING],
+    required: false,
+    default: undefined
+  },
+  contentClass: {
+    type: [PROP_TYPE_ARRAY, PROP_TYPE_OBJECT, PROP_TYPE_STRING],
+    required: false,
+    default: undefined
+  },
   // Synonym for 'bottom'
-  end: makeProp(PROP_TYPE_BOOLEAN, false),
+  end: {
+    type: PROP_TYPE_BOOLEAN,
+    required: false,
+    default: false
+  },
   // This prop is sniffed by the `<b-tab>` child
-  lazy: makeProp(PROP_TYPE_BOOLEAN, false),
-  navClass: makeProp(PROP_TYPE_ARRAY_OBJECT_STRING),
-  navWrapperClass: makeProp(PROP_TYPE_ARRAY_OBJECT_STRING),
-  noFade: makeProp(PROP_TYPE_BOOLEAN, false),
-  noKeyNav: makeProp(PROP_TYPE_BOOLEAN, false),
-  noNavStyle: makeProp(PROP_TYPE_BOOLEAN, false),
-  tag: makeProp(PROP_TYPE_STRING, 'div')
+  lazy: {
+    type: PROP_TYPE_BOOLEAN,
+    required: false,
+    default: false
+  },
+  navClass: {
+    type: [PROP_TYPE_ARRAY, PROP_TYPE_OBJECT, PROP_TYPE_STRING],
+    required: false,
+    default: undefined
+  },
+  navWrapperClass: {
+    type: [PROP_TYPE_ARRAY, PROP_TYPE_OBJECT, PROP_TYPE_STRING],
+    required: false,
+    default: undefined
+  },
+  noFade: {
+    type: PROP_TYPE_BOOLEAN,
+    required: false,
+    default: false
+  },
+  noKeyNav: {
+    type: PROP_TYPE_BOOLEAN,
+    required: false,
+    default: false
+  },
+  noNavStyle: {
+    type: PROP_TYPE_BOOLEAN,
+    required: false,
+    default: false
+  },
+  tag: {
+    type: PROP_TYPE_STRING,
+    required: false,
+    default: 'div'
+  }
 })
 
 // --- Main component ---

package/src/vendor/bootstrap-vue/src/components/tooltip/tooltip.js

@@ -14,11 +14,10 @@ import {
   MODEL_EVENT_NAME_PREFIX
 } from '../../constants/events'
 import {
-  PROP_TYPE_ARRAY_STRING,
+  PROP_TYPE_ARRAY,
   PROP_TYPE_BOOLEAN,
   PROP_TYPE_FUNCTION,
-  PROP_TYPE_NUMBER_OBJECT_STRING,
-  PROP_TYPE_NUMBER_STRING,
+  PROP_TYPE_NUMBER,
   PROP_TYPE_OBJECT,
   PROP_TYPE_STRING
 } from '../../constants/props'
@@ -28,7 +27,6 @@ import { getScopeId } from '../../utils/get-scope-id'
 import { isUndefinedOrNull } from '../../utils/inspect'
 import { pick } from '../../utils/object'
 import { TOOLTIP_DELAY } from '../../constants/config'
-import { makeProp } from '../../utils/props'
 import { createNewChildComponent, eventProp } from '../../utils/create-new-child-component'
 import { normalizeSlotMixin } from '../../mixins/normalize-slot'
 import { BVTooltip } from './helpers/bv-tooltip'
@@ -47,35 +45,98 @@ export const props = {
   // String: scrollParent, window, or viewport
   // Element: element reference
   // Object: Vue component
-  boundary: makeProp([HTMLElement, PROP_TYPE_OBJECT, PROP_TYPE_STRING], 'scrollParent'),
-  boundaryPadding: makeProp(PROP_TYPE_NUMBER_STRING, 5),
+  boundary: {
+    type: [HTMLElement, PROP_TYPE_OBJECT, PROP_TYPE_STRING],
+    required: false,
+    default: 'scrollParent'
+  },
+  boundaryPadding: {
+    type: [PROP_TYPE_NUMBER, PROP_TYPE_STRING],
+    required: false,
+    default: 5
+  },
   // String: HTML ID of container, if null body is used (default)
   // HTMLElement: element reference reference
   // Object: Vue Component
-  container: makeProp([HTMLElement, PROP_TYPE_OBJECT, PROP_TYPE_STRING]),
-  customClass: makeProp(PROP_TYPE_STRING, 'gl-tooltip'),
-  delay: makeProp(PROP_TYPE_NUMBER_OBJECT_STRING, TOOLTIP_DELAY),
-  [MODEL_PROP_NAME_ENABLED]: makeProp(PROP_TYPE_BOOLEAN, false),
-  fallbackPlacement: makeProp(PROP_TYPE_ARRAY_STRING, 'flip'),
+  container: {
+    type: [HTMLElement, PROP_TYPE_OBJECT, PROP_TYPE_STRING],
+    required: false,
+    default: undefined
+  },
+  customClass: {
+    type: PROP_TYPE_STRING,
+    required: false,
+    default: 'gl-tooltip'
+  },
+  delay: {
+    type: [PROP_TYPE_NUMBER, PROP_TYPE_OBJECT, PROP_TYPE_STRING],
+    required: false,
+    default: () => ({ ...TOOLTIP_DELAY })
+  },
+  [MODEL_PROP_NAME_ENABLED]: {
+    type: PROP_TYPE_BOOLEAN,
+    required: false,
+    default: false
+  },
+  fallbackPlacement: {
+    type: [PROP_TYPE_ARRAY, PROP_TYPE_STRING],
+    required: false,
+    default: 'flip'
+  },
   // ID to use for tooltip element
   // If not provided on will automatically be generated
-  id: makeProp(PROP_TYPE_STRING),
-  noFade: makeProp(PROP_TYPE_BOOLEAN, false),
-  noninteractive: makeProp(PROP_TYPE_BOOLEAN, false),
-  offset: makeProp(PROP_TYPE_NUMBER_STRING, 0),
-  placement: makeProp(PROP_TYPE_STRING, 'top'),
-  [MODEL_PROP_NAME_SHOW]: makeProp(PROP_TYPE_BOOLEAN, false),
+  id: {
+    type: PROP_TYPE_STRING,
+    required: false,
+    default: undefined
+  },
+  noFade: {
+    type: PROP_TYPE_BOOLEAN,
+    required: false,
+    default: false
+  },
+  noninteractive: {
+    type: PROP_TYPE_BOOLEAN,
+    required: false,
+    default: false
+  },
+  offset: {
+    type: [PROP_TYPE_NUMBER, PROP_TYPE_STRING],
+    required: false,
+    default: 0
+  },
+  placement: {
+    type: PROP_TYPE_STRING,
+    required: false,
+    default: 'top'
+  },
+  [MODEL_PROP_NAME_SHOW]: {
+    type: PROP_TYPE_BOOLEAN,
+    required: false,
+    default: false
+  },
   // String ID of element, or element/component reference
   // Or function that returns one of the above
   // Required
-  target: makeProp(
-    [HTMLElement, SVGElement, PROP_TYPE_FUNCTION, PROP_TYPE_OBJECT, PROP_TYPE_STRING],
-    undefined,
-    true
-  ),
-  title: makeProp(PROP_TYPE_STRING),
-  triggers: makeProp(PROP_TYPE_ARRAY_STRING, 'hover focus'),
-  variant: makeProp(PROP_TYPE_STRING)
+  target: {
+    type: [HTMLElement, SVGElement, PROP_TYPE_FUNCTION, PROP_TYPE_OBJECT, PROP_TYPE_STRING],
+    required: true
+  },
+  title: {
+    type: PROP_TYPE_STRING,
+    required: false,
+    default: undefined
+  },
+  triggers: {
+    type: [PROP_TYPE_ARRAY, PROP_TYPE_STRING],
+    required: false,
+    default: 'hover focus'
+  },
+  variant: {
+    type: PROP_TYPE_STRING,
+    required: false,
+    default: undefined
+  }
 }
 
 // --- Main component ---