@gitlab/ui 126.3.4 → 126.4.0

package/src/vendor/bootstrap-vue/src/utils/create-new-child-component.js

@@ -1,10 +1,93 @@
+import { isVue3 } from '../vue'
+
+// Regex to detect event handler props: onSomething or onSomethingOnce
+const EVENT_HANDLER_RE = /^on([A-Z][a-zA-Z]*)$/
+const ONCE_SUFFIX = 'Once'
+
+/**
+ * Converts an event name to a handler prop name.
+ * Use as computed property key with event constants: [eventProp(EVENT_NAME_HIDDEN)]
+ * @param {string} eventName - The event name (e.g., 'hidden', 'show', 'mouseenter')
+ * @param {Object} options - Options object
+ * @param {boolean} options.once - If true, returns the "once" variant (e.g., 'onHiddenOnce')
+ * @returns {string} The handler prop name (e.g., 'onHidden', 'onHiddenOnce')
+ */
+export const eventProp = (eventName, { once = false } = {}) => {
+  const capitalized = eventName.charAt(0).toUpperCase() + eventName.slice(1)
+  return `on${capitalized}${once ? ONCE_SUFFIX : ''}`
+}
+
+/**
+ * Parses a handler prop name to extract event name and once flag.
+ * Examples:
+ *   onShow -> { eventName: 'show', once: false }
+ *   onShowOnce -> { eventName: 'show', once: true }
+ *   onMouseenter -> { eventName: 'mouseenter', once: false }
+ */
+const parseEventHandlerProp = propName => {
+  const match = propName.match(EVENT_HANDLER_RE)
+  if (!match) return null
+
+  let eventPart = match[1]
+  const once = eventPart.endsWith(ONCE_SUFFIX)
+  if (once) eventPart = eventPart.slice(0, -ONCE_SUFFIX.length)
+
+  const eventName = eventPart.charAt(0).toLowerCase() + eventPart.slice(1)
+  return { eventName, once }
+}
+
+/**
+ * Extracts event handlers from config and separates them from other props.
+ * @param {Object} config - The config object with potential event handler props
+ * @returns {{ handlers: Array<{eventName: string, handler: Function, once: boolean}>, cleanConfig: Object }}
+ */
+const extractEventHandlers = config => {
+  const handlers = []
+  const cleanConfig = { ...config }
+
+  if (cleanConfig.propsData) {
+    const cleanPropsData = {}
+    Object.keys(cleanConfig.propsData).forEach(propName => {
+      const parsed = parseEventHandlerProp(propName)
+      if (parsed && typeof cleanConfig.propsData[propName] === 'function') {
+        handlers.push({ ...parsed, handler: cleanConfig.propsData[propName] })
+      } else {
+        cleanPropsData[propName] = cleanConfig.propsData[propName]
+      }
+    })
+    cleanConfig.propsData = cleanPropsData
+  }
+
+  return { handlers, cleanConfig }
+}
+
 export const createNewChildComponent = (parent, Component, config = {}) => {
   const bvEventRoot = parent.$root ? parent.$root.$options.bvEventRoot || parent.$root : null
 
-  return new Component({
-    ...config,
+  // Vue 3: pass handlers as props directly (Vue 3 converts onXxx props to listeners)
+  if (isVue3(parent)) {
+    return new Component({
+      ...config,
+      parent,
+      bvParent: parent,
+      bvEventRoot
+    })
+  }
+
+  // Vue 2: extract handlers and subscribe manually after creation
+  const { handlers, cleanConfig } = extractEventHandlers(config)
+
+  const instance = new Component({
+    ...cleanConfig,
     parent,
     bvParent: parent,
     bvEventRoot
   })
+
+  // Subscribe to events using $on/$once
+  handlers.forEach(({ eventName, handler, once }) => {
+    instance[once ? '$once' : '$on'](eventName, handler)
+  })
+
+  return instance
 }

package/src/vendor/bootstrap-vue/src/utils/element-to-vue-instance-registry.js

@@ -1,12 +1,9 @@
 import { isVue3 } from '../vue'
 
-let registry = null
-if (isVue3) {
-  registry = new WeakMap()
-}
+const registry = new WeakMap()
 
 export const registerElementToInstance = (element, instance) => {
-  if (!isVue3) {
+  if (!isVue3(instance)) {
     return
   }
 
@@ -14,15 +11,11 @@ export const registerElementToInstance = (element, instance) => {
 }
 
 export const removeElementToInstance = element => {
-  if (!isVue3) {
-    return
-  }
-
   registry.delete(element)
 }
 
 export const getInstanceFromElement = element => {
-  if (!isVue3) {
+  if (element.__vue__) {
     return element.__vue__
   }
 

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

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

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

@@ -0,0 +1,21 @@
+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
+ */
+export 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)
+}

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

@@ -1,29 +1,5 @@
-import { Vue as OurVue } from '../vue'
-import { HAS_WINDOW_SUPPORT, IS_JSDOM } 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
- */
-export 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 => {
-    /* istanbul ignore next */
-    if (!checkMultipleVueWarned && OurVue !== Vue && !IS_JSDOM) {
-      warn(MULTIPLE_VUE_WARNING)
-    }
-    checkMultipleVueWarned = true
-  }
-})()
 
 /**
  * Plugin install factory function.
@@ -37,7 +13,6 @@ export const installFactory = ({ components, directives, plugins } = {}) => {
       return
     }
     install.installed = true
-    checkMultipleVue(Vue)
     setConfig(config, Vue)
     registerComponents(Vue, components)
     registerDirectives(Vue, directives)

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

@@ -1,4 +1,5 @@
 import { RX_ENCODED_COMMA, RX_ENCODE_REVERSE, RX_PLUS, RX_QUERY_START } from '../constants/regex'
+import { isVue3 } from '../vue'
 import { isTag } from './dom'
 import { isArray, isNull, isPlainObject, isString, isUndefined } from './inspect'
 import { keys } from './object'
@@ -86,6 +87,16 @@ export const parseQuery = query => {
 
 export 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 })
+  }
+}
+
 export const isRouterLink = tag => !!(tag && !isTag(tag, 'a'))
 
 export const computeTag = ({ to, disabled, routerComponentName }, thisOrParent) => {
@@ -103,7 +114,8 @@ export const computeTag = ({ to, disabled, routerComponentName }, 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)
 }
 
 export const computeRel = ({ target, rel } = {}) =>

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

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

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

@@ -1,35 +1,14 @@
 import Vue from 'vue'
-import { mergeData } from 'vue-functional-data-merge'
+import { mergeData as originalMergeData } from 'vue-functional-data-merge'
 
 // --- Constants ---
 const COMPONENT_UID_KEY = '_uid'
 
-const isVue3 = Vue.version.startsWith('3')
+const isGlobalVue3 = Vue.version.startsWith('3')
 
-export const REF_FOR_KEY = isVue3 ? 'ref_for' : 'refInFor'
+export const REF_FOR_KEY = isGlobalVue3 ? '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']
+if (isGlobalVue3) {
   const originalVModelDynamicCreated = Vue.vModelDynamic.created
   const originalVModelDynamicBeforeUpdate = Vue.vModelDynamic.beforeUpdate
 
@@ -64,81 +43,15 @@ 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) {
-          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?.default?.() || ctx.children
+}
 
-          if (
-            children &&
-            Object.keys(patchedCtx.children).filter(k => !IGNORED_CHILDREN_KEYS.includes(k))
-              .length === 0
-          ) {
-            delete patchedCtx.children
-          } else {
-            patchedCtx.children = children
-          }
+const isVue3 = instance => Boolean(instance.$)
 
-          patchedCtx.data.on = ctx.listeners
-          return originalRender.call(this, patchedH, patchedCtx)
-        }
+const extend = Vue.extend.bind(Vue)
 
-        return originalRender.call(this, patchedH)
-      }
-    }
-    return originalExtend.call(this, definition)
-  }.bind(Vue)
+function mergeData(...data) {
+  const result = originalMergeData(...data)
+  return { ...result, ...(result.attrs ?? {}), ...(result.props ?? {}) }
 }
 
-const nextTick = Vue.nextTick
-
-export { COMPONENT_UID_KEY, Vue, mergeData, isVue3, nextTick, extend }
+export { COMPONENT_UID_KEY, mergeData, isGlobalVue3, isVue3, extend }