@gitlab/ui 126.3.4 → 126.4.0

package/dist/vendor/bootstrap-vue/src/utils/get-instance-from-directive.js

@@ -1,5 +1,3 @@
-import { isVue3 } from '../vue';
-
-const getInstanceFromDirective = (vnode, bindings) => isVue3 ? bindings.instance : vnode.context;
+const getInstanceFromDirective = (vnode, bindings) => bindings.instance || vnode.context;
 
 export { getInstanceFromDirective };

package/dist/vendor/bootstrap-vue/src/utils/on-instance-destroy.js

@@ -0,0 +1,22 @@
+import { isVue3 } from '../vue';
+
+/**
+ * Register a callback to be called when a Vue instance is destroyed/unmounted.
+ *
+ * For Vue 2: Uses $once with 'hook:destroyed' event
+ * For Vue 3: Uses scope.cleanups for proper effect scope cleanup
+ *
+ * @param {Object} instance - The Vue instance to watch for destruction
+ * @param {Function} callback - The callback to run when the instance is destroyed
+ */
+const onInstanceDestroy = (instance, callback) => {
+  if (isVue3(instance)) {
+    // onScopeDispose is not available on instance and we do
+    // not want to import 'vue' in this file
+    instance.$.scope.cleanups.push(callback);
+    return;
+  }
+  instance.$once('hook:destroyed', callback);
+};
+
+export { onInstanceDestroy };

package/dist/vendor/bootstrap-vue/src/utils/plugins.js

@@ -1,23 +1,5 @@
-import { Vue } from '../vue';
-import { IS_JSDOM, HAS_WINDOW_SUPPORT } from '../constants/env';
+import { HAS_WINDOW_SUPPORT } from '../constants/env';
 import { setConfig } from './config-set';
-import { warn } from './warn';
-
-/**
- * Checks if there are multiple instances of Vue, and warns (once) about possible issues.
- * @param {object} Vue
- */
-const checkMultipleVue = (() => {
-  let checkMultipleVueWarned = false;
-  const MULTIPLE_VUE_WARNING = ['Multiple instances of Vue detected!', 'You may need to set up an alias for Vue in your bundler config.', 'See: https://bootstrap-vue.org/docs#using-module-bundlers'].join('\n');
-  return Vue$1 => {
-    /* istanbul ignore next */
-    if (!checkMultipleVueWarned && Vue !== Vue$1 && !IS_JSDOM) {
-      warn(MULTIPLE_VUE_WARNING);
-    }
-    checkMultipleVueWarned = true;
-  };
-})();
 
 /**
  * Plugin install factory function.
@@ -37,7 +19,6 @@ const installFactory = function () {
       return;
     }
     install.installed = true;
-    checkMultipleVue(Vue);
     setConfig(config, Vue);
     registerComponents(Vue, components);
     registerDirectives(Vue, directives);
@@ -140,4 +121,4 @@ const vueUse = VuePlugin => {
   }
 };
 
-export { checkMultipleVue, installFactory, pluginFactory, registerComponent, registerComponents, registerDirective, registerDirectives, registerPlugins, vueUse };
+export { installFactory, pluginFactory, registerComponent, registerComponents, registerDirective, registerDirectives, registerPlugins, vueUse };

package/dist/vendor/bootstrap-vue/src/utils/router.js

@@ -1,4 +1,5 @@
 import { RX_QUERY_START, RX_PLUS, RX_ENCODE_REVERSE, RX_ENCODED_COMMA } from '../constants/regex';
+import { isVue3 } from '../vue';
 import { isTag } from './dom';
 import { isPlainObject, isUndefined, isNull, isArray, isString } from './inspect';
 import { keys } from './object';
@@ -66,6 +67,18 @@ const parseQuery = query => {
   return parsed;
 };
 const isLink = props => !!(props.href || props.to);
+const routerLink = {
+  functional: true,
+  _name: 'router-link',
+  render(h, ctx) {
+    // $hasNormal is Vue.js 2 legacy way to check if default slot is scoped or not
+    // in bootstrap-vue codebase we never use scoped slots router-link rendering
+    return h('router-link', ctx.data, {
+      ...ctx.children,
+      $hasNormal: true
+    });
+  }
+};
 const isRouterLink = tag => !!(tag && !isTag(tag, 'a'));
 const computeTag = (_ref, thisOrParent) => {
   let {
@@ -87,7 +100,8 @@ const computeTag = (_ref, thisOrParent) => {
   //   exists = names.some(name => !!thisOrParent.$options.components[name])
   //   And may want to cache the result for performance or we just let the render fail
   //   if the component is not registered
-  return routerComponentName || (hasNuxt ? 'nuxt-link' : 'router-link');
+  const actualRouterLink = isVue3(thisOrParent) ? routerLink : 'router-link';
+  return routerComponentName || (hasNuxt ? 'nuxt-link' : actualRouterLink);
 };
 const computeRel = function () {
   let {

package/dist/vendor/bootstrap-vue/src/utils/safe-vue-instance.js

@@ -1,7 +1,7 @@
 import { isVue3 } from '../vue';
 
 function safeVueInstance(target) {
-  if (!isVue3) {
+  if (!isVue3(target)) {
     return target;
   }
   return new Proxy(target, {

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

@@ -1,18 +1,11 @@
 import Vue from 'vue';
-export { default as Vue } from 'vue';
-export { mergeData } from 'vue-functional-data-merge';
+import { mergeData as mergeData$1 } from 'vue-functional-data-merge';
 
 // --- Constants ---
 const COMPONENT_UID_KEY = '_uid';
-const isVue3 = Vue.version.startsWith('3');
-const REF_FOR_KEY = isVue3 ? 'ref_for' : 'refInFor';
-const ALLOWED_FIELDS_IN_DATA = ['class', 'staticClass', 'style', 'attrs', 'props', 'domProps', 'on', 'nativeOn', 'directives', 'scopedSlots', 'slot', 'key', 'ref', 'refInFor'];
-let extend = Vue.extend.bind(Vue);
-if (isVue3) {
-  const {
-    extend: originalExtend
-  } = Vue;
-  const KNOWN_COMPONENTS = ['router-link', 'transition', 'transition-group'];
+const isGlobalVue3 = Vue.version.startsWith('3');
+const REF_FOR_KEY = isGlobalVue3 ? 'ref_for' : 'refInFor';
+if (isGlobalVue3) {
   const originalVModelDynamicCreated = Vue.vModelDynamic.created;
   const originalVModelDynamicBeforeUpdate = Vue.vModelDynamic.beforeUpdate;
   let assignSymbol;
@@ -46,75 +39,17 @@ if (isVue3) {
       el[assignSymbol] = function () {};
     }
   };
-  extend = function patchedBootstrapVueExtend(definition) {
-    if (typeof definition === 'object' && definition.render && !definition.__alreadyPatched) {
-      const originalRender = definition.render;
-      definition.__alreadyPatched = true;
-      definition.render = function (h) {
-        const patchedH = function (tag, dataObjOrChildren, rawSlots) {
-          const slots = rawSlots === undefined ? [] : [Array.isArray(rawSlots) ? rawSlots.filter(Boolean) : rawSlots];
-          const isTag = typeof tag === 'string' && !KNOWN_COMPONENTS.includes(tag);
-          const isSecondArgumentDataObject = dataObjOrChildren && typeof dataObjOrChildren === 'object' && !Array.isArray(dataObjOrChildren);
-          if (!isSecondArgumentDataObject) {
-            return h(tag, dataObjOrChildren, ...slots);
-          }
-          const {
-            attrs,
-            props,
-            ...restData
-          } = dataObjOrChildren;
-          const normalizedData = {
-            ...restData,
-            attrs,
-            props: isTag ? {} : props
-          };
-          if (tag === 'router-link' && !normalizedData.slots && !normalizedData.scopedSlots) {
-            // terrible workaround to fix router-link rendering with compat vue-router
-            normalizedData.scopedSlots = {
-              $hasNormal: () => {}
-            };
-          }
-          return h(tag, normalizedData, ...slots);
-        };
-        if (definition.functional) {
-          var _ctx$children, _ctx$children$default;
-          const ctx = arguments[1];
-          const patchedCtx = {
-            ...ctx
-          };
-          patchedCtx.data = {
-            attrs: {
-              ...(ctx.data.attrs || {})
-            },
-            props: {
-              ...(ctx.data.props || {})
-            }
-          };
-          Object.keys(ctx.data || {}).forEach(key => {
-            if (ALLOWED_FIELDS_IN_DATA.includes(key)) {
-              patchedCtx.data[key] = ctx.data[key];
-            } else if (key in ctx.props) {
-              patchedCtx.data.props[key] = ctx.data[key];
-            } else if (!key.startsWith('on')) {
-              patchedCtx.data.attrs[key] = ctx.data[key];
-            }
-          });
-          const IGNORED_CHILDREN_KEYS = ['_ctx'];
-          const children = ((_ctx$children = ctx.children) === null || _ctx$children === void 0 ? void 0 : (_ctx$children$default = _ctx$children.default) === null || _ctx$children$default === void 0 ? void 0 : _ctx$children$default.call(_ctx$children)) || ctx.children;
-          if (children && Object.keys(patchedCtx.children).filter(k => !IGNORED_CHILDREN_KEYS.includes(k)).length === 0) {
-            delete patchedCtx.children;
-          } else {
-            patchedCtx.children = children;
-          }
-          patchedCtx.data.on = ctx.listeners;
-          return originalRender.call(this, patchedH, patchedCtx);
-        }
-        return originalRender.call(this, patchedH);
-      };
-    }
-    return originalExtend.call(this, definition);
-  }.bind(Vue);
 }
-const nextTick = Vue.nextTick;
+const isVue3 = instance => Boolean(instance.$);
+const extend = Vue.extend.bind(Vue);
+function mergeData() {
+  var _result$attrs, _result$props;
+  const result = mergeData$1(...arguments);
+  return {
+    ...result,
+    ...((_result$attrs = result.attrs) !== null && _result$attrs !== void 0 ? _result$attrs : {}),
+    ...((_result$props = result.props) !== null && _result$props !== void 0 ? _result$props : {})
+  };
+}
 
-export { COMPONENT_UID_KEY, REF_FOR_KEY, extend, isVue3, nextTick };
+export { COMPONENT_UID_KEY, REF_FOR_KEY, extend, isGlobalVue3, isVue3, mergeData };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@gitlab/ui",
-  "version": "126.3.4",
+  "version": "126.4.0",
   "description": "GitLab UI Components",
   "license": "MIT",
   "main": "dist/index.js",
@@ -67,7 +67,7 @@
   "dependencies": {
     "@floating-ui/dom": "1.7.4",
     "echarts": "^5.6.0",
-    "gridstack": "^12.3.3",
+    "gridstack": "^12.4.2",
     "iframe-resizer": "^4.4.5",
     "lodash": "^4.17.21",
     "popper.js": "^1.16.1",
@@ -128,10 +128,10 @@
     "@yarnpkg/lockfile": "^1.1.0",
     "acorn": "^8.15.0",
     "acorn-walk": "^8.3.4",
-    "autoprefixer": "10.4.22",
+    "autoprefixer": "10.4.23",
     "axe-playwright": "^2.2.2",
     "babel-loader": "^9.2.1",
-    "cypress": "15.7.1",
+    "cypress": "15.8.1",
     "cypress-real-events": "^1.15.0",
     "dompurify": "^3.1.2",
     "emoji-regex": "^10.6.0",
@@ -159,7 +159,7 @@
     "rollup-plugin-string": "^3.0.0",
     "rollup-plugin-svg": "^2.0.0",
     "rollup-plugin-vue": "^5.1.9",
-    "sass": "^1.95.0",
+    "sass": "^1.97.2",
     "sass-loader": "^10.5.2",
     "sass-true": "^9",
     "start-server-and-test": "^2.1.3",
@@ -167,7 +167,7 @@
     "storybook-dark-mode": "4.0.2",
     "style-dictionary": "^5.1.1",
     "style-loader": "^4",
-    "tailwindcss": "3.4.18",
+    "tailwindcss": "3.4.19",
     "vue": "2.7.16",
     "vue-docgen-loader": "1.5.1",
     "vue-loader": "^15.11.1",

package/src/components/base/alert/alert.vue

@@ -18,6 +18,9 @@ export default {
     GlButton,
   },
   props: {
+    /**
+     * The title text to display in the alert header.
+     */
     title: {
       type: String,
       required: false,
@@ -39,6 +42,9 @@ export default {
       required: false,
       default: () => translate('GlAlert.closeButtonTitle', 'Dismiss'),
     },
+    /**
+     * The variant of the alert.
+     */
     variant: {
       type: String,
       required: false,
@@ -77,6 +83,9 @@ export default {
       required: false,
       default: '',
     },
+    /**
+     * When true, the alert stays fixed at the top of its container.
+     */
     sticky: {
       type: Boolean,
       required: false,

package/src/components/base/breadcrumb/breadcrumb.vue

@@ -36,6 +36,9 @@ export default {
         });
       },
     },
+    /**
+     * Accessible label for the breadcrumb navigation.
+     */
     ariaLabel: {
       type: String,
       required: false,

package/src/components/base/breadcrumb/breadcrumb_item.vue

@@ -9,21 +9,33 @@ export default {
   },
   inheritAttrs: false,
   props: {
+    /**
+     * The text content to display in the breadcrumb item.
+     */
     text: {
       type: String,
       required: false,
       default: null,
     },
+    /**
+     * Vue Router location object or path string for navigation.
+     */
     to: {
       type: [String, Object],
       required: false,
       default: null,
     },
+    /**
+     * URL for the breadcrumb link when not using Vue Router.
+     */
     href: {
       type: String,
       required: false,
       default: null,
     },
+    /**
+     * Indicates the current page within the breadcrumb trail for accessibility.
+     */
     ariaCurrent: {
       type: [String, Boolean],
       required: false,
@@ -32,6 +44,9 @@ export default {
         return [false, 'page'].indexOf(value) !== -1;
       },
     },
+    /**
+     * The size variant of the breadcrumb item.
+     */
     size: {
       type: String,
       required: false,

package/src/components/base/datepicker/datepicker.vue

@@ -85,26 +85,41 @@ export default {
       required: false,
       default: '',
     },
+    /**
+     * The currently selected date.
+     */
     value: {
       type: Date,
       required: false,
       default: null,
     },
+    /**
+     * The earliest selectable date.
+     */
     minDate: {
       type: Date,
       required: false,
       default: null,
     },
+    /**
+     * The latest selectable date.
+     */
     maxDate: {
       type: Date,
       required: false,
       default: null,
     },
+    /**
+     * Start date for range selection highlighting.
+     */
     startRange: {
       type: Date,
       required: false,
       default: null,
     },
+    /**
+     * End date for range selection highlighting.
+     */
     endRange: {
       type: Date,
       required: false,
@@ -118,16 +133,25 @@ export default {
       required: false,
       default: null,
     },
+    /**
+     * First day of the week (0 = Sunday, 1 = Monday, etc.).
+     */
     firstDay: {
       type: Number,
       required: false,
       default: () => defaultConfig.firstDayOfWeek || 0, // Defaults to 0 (Sunday)
     },
+    /**
+     * Accessible label for the datepicker.
+     */
     ariaLabel: {
       type: String,
       required: false,
       default: '',
     },
+    /**
+     * Placeholder text for the input field.
+     */
     placeholder: {
       type: String,
       required: false,
@@ -141,16 +165,25 @@ export default {
       required: false,
       default: '',
     },
+    /**
+     * Whether the datepicker is disabled.
+     */
     disabled: {
       type: Boolean,
       required: false,
       default: false,
     },
+    /**
+     * Whether to display the default input field.
+     */
     displayField: {
       type: Boolean,
       required: false,
       default: true,
     },
+    /**
+     * Whether the datepicker should be open on mount.
+     */
     startOpened: {
       type: Boolean,
       required: false,
@@ -164,31 +197,49 @@ export default {
       required: false,
       default: null,
     },
+    /**
+     * Internationalization object for Pikaday labels and month/day names.
+     */
     i18n: {
       type: Object,
       required: false,
       default: null,
     },
+    /**
+     * Additional CSS class for the Pikaday calendar theme.
+     */
     theme: {
       type: String,
       required: false,
       default: '',
     },
+    /**
+     * Whether to show a clear button when a date is selected.
+     */
     showClearButton: {
       type: Boolean,
       required: false,
       default: false,
     },
+    /**
+     * The id attribute for the input element.
+     */
     inputId: {
       type: String,
       required: false,
       default: null,
     },
+    /**
+     * Accessible label for the input element.
+     */
     inputLabel: {
       type: String,
       required: false,
       default: 'Enter date',
     },
+    /**
+     * The name attribute for the input element.
+     */
     inputName: {
       type: String,
       required: false,
@@ -203,6 +254,9 @@ export default {
       default: null,
       validator: (value) => Object.keys(datepickerWidthOptionsMap).includes(value),
     },
+    /**
+     * Validation state of the input. `true` for valid, `false` for invalid, `null` for no validation styling.
+     */
     state: {
       type: Boolean,
       required: false,