@gitlab/ui 126.3.4 → 126.4.0

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

@@ -1,4 +1,4 @@
-import { extend, isVue3, Vue } from '../../vue';
+import { extend, isVue3 } from '../../vue';
 import { NAME_TRANSPORTER_TARGET, NAME_TRANSPORTER } from '../../constants/components';
 import { IS_BROWSER } from '../../constants/env';
 import { PROP_TYPE_ARRAY_FUNCTION, PROP_TYPE_STRING, PROP_TYPE_BOOLEAN } from '../../constants/props';
@@ -76,7 +76,7 @@ const props = {
 // --- Main component ---
 
 // @vue/component
-const BVTransporterVue2 = /*#__PURE__*/extend({
+const BVTransporter = /*#__PURE__*/extend({
   name: NAME_TRANSPORTER,
   mixins: [normalizeSlotMixin],
   props,
@@ -84,28 +84,37 @@ const BVTransporterVue2 = /*#__PURE__*/extend({
     disabled: {
       immediate: true,
       handler(disabled) {
+        // Vue 2 only: manage manual portaling
+        if (isVue3(this)) return;
         disabled ? this.unmountTarget() : this.$nextTick(this.mountTarget);
       }
     }
   },
   created() {
-    // Create private non-reactive props
+    // Vue 2 only: create private non-reactive props
+    if (isVue3(this)) return;
     this.$_defaultFn = null;
     this.$_target = null;
   },
   beforeMount() {
+    // Vue 2 only
+    if (isVue3(this)) return;
     this.mountTarget();
   },
   updated() {
+    // Vue 2 only
     // We need to make sure that all children have completed updating
     // before rendering in the target
     // `vue-simple-portal` has the this in a `$nextTick()`,
     // while `portal-vue` doesn't
     // Just trying to see if the `$nextTick()` delay is required or not
     // Since all slots in Vue 2.6.x are always functions
+    if (isVue3(this)) return;
     this.updateTarget();
   },
   beforeDestroy() {
+    // Vue 2 only
+    if (isVue3(this)) return;
     this.unmountTarget();
     this.$_defaultFn = null;
   },
@@ -166,32 +175,31 @@ const BVTransporterVue2 = /*#__PURE__*/extend({
     }
   },
   render(h) {
-    // This component has no root element, so only a single VNode is allowed
-    if (this.disabled) {
-      const $nodes = concat(this.normalizeSlot()).filter(identity);
-      if ($nodes.length > 0 && !$nodes[0].text) {
-        return $nodes[0];
+    if (isVue3(this)) {
+      // Vue 3: use native Teleport
+      if (this.disabled) {
+        const $nodes = concat(this.normalizeSlot()).filter(identity);
+        if ($nodes.length > 0) {
+          return $nodes[0];
+        }
       }
+      const {
+        Teleport
+      } = this.$.appContext.config.globalProperties.constructor;
+      return h(Teleport, {
+        to: this.container
+      }, this.normalizeSlot());
     }
-    return h();
-  }
-});
-const BVTransporterVue3 = /*#__PURE__*/extend({
-  name: NAME_TRANSPORTER,
-  mixins: [normalizeSlotMixin],
-  props,
-  render(h) {
+
+    // Vue 2: this component has no root element, so only a single VNode is allowed
     if (this.disabled) {
       const $nodes = concat(this.normalizeSlot()).filter(identity);
-      if ($nodes.length > 0) {
+      if ($nodes.length > 0 && !$nodes[0].text) {
         return $nodes[0];
       }
     }
-    return h(Vue.Teleport, {
-      to: this.container
-    }, this.normalizeSlot());
+    return h();
   }
 });
-const BVTransporter = isVue3 ? BVTransporterVue3 : BVTransporterVue2;
 
 export { BVTransporter, props };

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

@@ -1,5 +1,3 @@
-import { isVue3 } from '../vue';
-
 const EVENT_NAME_ACTIVATE_TAB = 'activate-tab';
 const EVENT_NAME_BLUR = 'blur';
 const EVENT_NAME_CANCEL = 'cancel';
@@ -44,8 +42,6 @@ const EVENT_NAME_SHOWN = 'shown';
 const EVENT_NAME_SORT_CHANGED = 'sort-changed';
 const EVENT_NAME_TOGGLE = 'toggle';
 const EVENT_NAME_UPDATE = 'update';
-const HOOK_EVENT_NAME_BEFORE_DESTROY = isVue3 ? 'vnodeBeforeUnmount' : 'hook:beforeDestroy';
-const HOOK_EVENT_NAME_DESTROYED = isVue3 ? 'vNodeUnmounted' : 'hook:destroyed';
 const MODEL_EVENT_NAME_PREFIX = 'update:';
 const ROOT_EVENT_NAME_PREFIX = 'bv';
 const ROOT_EVENT_NAME_SEPARATOR = '::';
@@ -57,4 +53,4 @@ const EVENT_OPTIONS_NO_CAPTURE = {
   capture: false
 };
 
-export { EVENT_NAME_ACTIVATE_TAB, EVENT_NAME_BLUR, EVENT_NAME_CANCEL, EVENT_NAME_CHANGE, EVENT_NAME_CHANGED, EVENT_NAME_CLICK, EVENT_NAME_CLOSE, EVENT_NAME_CONTEXT, EVENT_NAME_CONTEXT_CHANGED, EVENT_NAME_DESTROYED, EVENT_NAME_DISABLE, EVENT_NAME_DISABLED, EVENT_NAME_ENABLE, EVENT_NAME_ENABLED, EVENT_NAME_FILTERED, EVENT_NAME_FIRST, EVENT_NAME_FOCUS, EVENT_NAME_FOCUSIN, EVENT_NAME_FOCUSOUT, EVENT_NAME_HEAD_CLICKED, EVENT_NAME_HIDDEN, EVENT_NAME_HIDE, EVENT_NAME_INPUT, EVENT_NAME_LAST, EVENT_NAME_MOUSEENTER, EVENT_NAME_MOUSELEAVE, EVENT_NAME_NEXT, EVENT_NAME_OK, EVENT_NAME_OPEN, EVENT_NAME_PREV, EVENT_NAME_REFRESH, EVENT_NAME_REFRESHED, EVENT_NAME_ROW_CLICKED, EVENT_NAME_ROW_CONTEXTMENU, EVENT_NAME_ROW_DBLCLICKED, EVENT_NAME_ROW_HOVERED, EVENT_NAME_ROW_MIDDLE_CLICKED, EVENT_NAME_ROW_SELECTED, EVENT_NAME_ROW_UNHOVERED, EVENT_NAME_SHOW, EVENT_NAME_SHOWN, EVENT_NAME_SORT_CHANGED, EVENT_NAME_TOGGLE, EVENT_NAME_UPDATE, EVENT_OPTIONS_NO_CAPTURE, EVENT_OPTIONS_PASSIVE, HOOK_EVENT_NAME_BEFORE_DESTROY, HOOK_EVENT_NAME_DESTROYED, MODEL_EVENT_NAME_PREFIX, ROOT_EVENT_NAME_PREFIX, ROOT_EVENT_NAME_SEPARATOR };
+export { EVENT_NAME_ACTIVATE_TAB, EVENT_NAME_BLUR, EVENT_NAME_CANCEL, EVENT_NAME_CHANGE, EVENT_NAME_CHANGED, EVENT_NAME_CLICK, EVENT_NAME_CLOSE, EVENT_NAME_CONTEXT, EVENT_NAME_CONTEXT_CHANGED, EVENT_NAME_DESTROYED, EVENT_NAME_DISABLE, EVENT_NAME_DISABLED, EVENT_NAME_ENABLE, EVENT_NAME_ENABLED, EVENT_NAME_FILTERED, EVENT_NAME_FIRST, EVENT_NAME_FOCUS, EVENT_NAME_FOCUSIN, EVENT_NAME_FOCUSOUT, EVENT_NAME_HEAD_CLICKED, EVENT_NAME_HIDDEN, EVENT_NAME_HIDE, EVENT_NAME_INPUT, EVENT_NAME_LAST, EVENT_NAME_MOUSEENTER, EVENT_NAME_MOUSELEAVE, EVENT_NAME_NEXT, EVENT_NAME_OK, EVENT_NAME_OPEN, EVENT_NAME_PREV, EVENT_NAME_REFRESH, EVENT_NAME_REFRESHED, EVENT_NAME_ROW_CLICKED, EVENT_NAME_ROW_CONTEXTMENU, EVENT_NAME_ROW_DBLCLICKED, EVENT_NAME_ROW_HOVERED, EVENT_NAME_ROW_MIDDLE_CLICKED, EVENT_NAME_ROW_SELECTED, EVENT_NAME_ROW_UNHOVERED, EVENT_NAME_SHOW, EVENT_NAME_SHOWN, EVENT_NAME_SORT_CHANGED, EVENT_NAME_TOGGLE, EVENT_NAME_UPDATE, EVENT_OPTIONS_NO_CAPTURE, EVENT_OPTIONS_PASSIVE, MODEL_EVENT_NAME_PREFIX, ROOT_EVENT_NAME_PREFIX, ROOT_EVENT_NAME_SEPARATOR };

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

@@ -2,7 +2,7 @@ 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 { nextTick, isVue3 } from '../../vue';
+import { isVue3 } from '../../vue';
 import { getComponentConfig } from '../../utils/config';
 import { getScopeId } from '../../utils/get-scope-id';
 import { identity } from '../../utils/identity';
@@ -11,7 +11,7 @@ import { isFunction, isString, isNumber, isPlainObject, isUndefined, isUndefined
 import { looseEqual } from '../../utils/loose-equal';
 import { toInteger } from '../../utils/number';
 import { keys } from '../../utils/object';
-import { createNewChildComponent } from '../../utils/create-new-child-component';
+import { createNewChildComponent, eventProp } from '../../utils/create-new-child-component';
 import { BVTooltip } from '../../components/tooltip/helpers/bv-tooltip';
 
 // Key which we use to store tooltip object on element
@@ -84,7 +84,7 @@ const parseBindings = (bindings, vnode) => /* istanbul ignore next: not easy to
   // If title is not provided, try title attribute
   if (isUndefined(config.title)) {
     // Try attribute
-    const attrs = isVue3 ? vnode.props : (vnode.data || {}).attrs;
+    const attrs = isVue3(getInstanceFromDirective(vnode, bindings)) ? vnode.props : (vnode.data || {}).attrs;
     config.title = attrs && !isUndefinedOrNull(attrs.title) ? attrs.title : undefined;
   }
 
@@ -187,17 +187,19 @@ const applyTooltip = (el, bindings, vnode) => {
     const parent = getInstanceFromDirective(vnode, bindings);
     el[BV_TOOLTIP] = createNewChildComponent(parent, BVTooltip, {
       // Add the parent's scoped style attribute data
-      _scopeId: getScopeId(parent, undefined)
-    });
-    el[BV_TOOLTIP].__bv_prev_data__ = {};
-    el[BV_TOOLTIP].$on(EVENT_NAME_SHOW, () => /* istanbul ignore next: for now */{
-      // Before showing the tooltip, we update the title if it is a function
-      if (isFunction(config.title)) {
-        el[BV_TOOLTIP].updateData({
-          title: config.title(el)
-        });
+      _scopeId: getScopeId(parent, undefined),
+      propsData: {
+        [eventProp(EVENT_NAME_SHOW)]: () => /* istanbul ignore next: for now */{
+          // Before showing the tooltip, we update the title if it is a function
+          if (isFunction(config.title)) {
+            el[BV_TOOLTIP].updateData({
+              title: config.title(el)
+            });
+          }
+        }
       }
     });
+    el[BV_TOOLTIP].__bv_prev_data__ = {};
   }
   const data = {
     title: config.title,
@@ -252,7 +254,7 @@ const VBTooltip = {
   // waits until the containing component and children have finished updating
   componentUpdated(el, bindings, vnode) {
     // Performed in a `$nextTick()` to prevent render update loops
-    nextTick(() => {
+    getInstanceFromDirective(vnode, bindings).$nextTick(() => {
       applyTooltip(el, bindings, vnode);
     });
   },

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

@@ -3,7 +3,7 @@ import { requestAF } from '../../utils/dom';
 import { isFunction } from '../../utils/inspect';
 import { looseEqual } from '../../utils/loose-equal';
 import { keys, clone } from '../../utils/object';
-import { nextTick } from '../../vue';
+import { getInstanceFromDirective } from '../../utils/get-instance-from-directive';
 
 // v-b-visible
 // Private visibility check directive
@@ -40,7 +40,7 @@ import { nextTick } from '../../vue';
 
 const OBSERVER_PROP_NAME = '__bv__visibility_observer';
 class VisibilityObserver {
-  constructor(el, options) {
+  constructor(el, options, instance) {
     this.el = el;
     this.callback = options.callback;
     this.margin = options.margin || 0;
@@ -48,6 +48,7 @@ class VisibilityObserver {
     this.observer = null;
     this.visible = undefined;
     this.doneOnce = false;
+    this.instance = instance;
     // Create the observer instance (if possible)
     this.createObserver();
   }
@@ -86,7 +87,7 @@ class VisibilityObserver {
 
     // Start observing in a `$nextTick()` (to allow DOM to complete rendering)
     /* istanbul ignore next: IntersectionObserver not supported in JSDOM */
-    nextTick(() => {
+    this.instance.$nextTick(() => {
       requestAF(() => {
         // Placed in an `if` just in case we were destroyed before
         // this `requestAnimationFrame` runs
@@ -123,11 +124,11 @@ const destroy = el => {
   }
   delete el[OBSERVER_PROP_NAME];
 };
-const bind = (el, _ref) => {
-  let {
+const bind = (el, bindings, vnode) => {
+  const {
     value,
     modifiers
-  } = _ref;
+  } = bindings;
   // `value` is the callback function
   const options = {
     margin: '0px',
@@ -146,29 +147,27 @@ const bind = (el, _ref) => {
   // Destroy any previous observer
   destroy(el);
   // Create new observer
-  el[OBSERVER_PROP_NAME] = new VisibilityObserver(el, options);
+  const instance = getInstanceFromDirective(vnode, bindings);
+  el[OBSERVER_PROP_NAME] = new VisibilityObserver(el, options, instance);
   // Store the current modifiers on the object (cloned)
   el[OBSERVER_PROP_NAME]._prevModifiers = clone(modifiers);
 };
 
 // When the directive options may have been updated (or element)
-const componentUpdated = (el, _ref2, vnode) => {
-  let {
+const componentUpdated = (el, bindings, vnode) => {
+  const {
     value,
     oldValue,
     modifiers
-  } = _ref2;
+  } = bindings;
   // Compare value/oldValue and modifiers to see if anything has changed
   // and if so, destroy old observer and create new observer
   /* istanbul ignore next */
-  modifiers = clone(modifiers);
+  const clonedModifiers = clone(modifiers);
   /* istanbul ignore next */
-  if (el && (value !== oldValue || !el[OBSERVER_PROP_NAME] || !looseEqual(modifiers, el[OBSERVER_PROP_NAME]._prevModifiers))) {
+  if (el && (value !== oldValue || !el[OBSERVER_PROP_NAME] || !looseEqual(clonedModifiers, el[OBSERVER_PROP_NAME]._prevModifiers))) {
     // Re-bind on element
-    bind(el, {
-      value,
-      modifiers
-    });
+    bind(el, bindings, vnode);
   }
 };
 

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

@@ -1,22 +1,5 @@
 import { makePropCacheMixin } from '../utils/cache';
-import { extend, isVue3 } from '../vue';
 
-const attrsMixinVue2 = makePropCacheMixin('$attrs', 'bvAttrs');
-const attrsMixinVue3 = extend({
-  computed: {
-    bvAttrs() {
-      const bvAttrs = {
-        ...this.$attrs
-      };
-      Object.keys(bvAttrs).forEach(key => {
-        if (bvAttrs[key] === undefined) {
-          delete bvAttrs[key];
-        }
-      });
-      return bvAttrs;
-    }
-  }
-});
-const attrsMixin = isVue3 ? attrsMixinVue3 : attrsMixinVue2;
+const attrsMixin = makePropCacheMixin('$attrs', 'bvAttrs');
 
 export { attrsMixin };

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

@@ -118,7 +118,7 @@ const dropdownMixin = extend({
           this.visibleChangePrevented = true;
           this.visible = oldValue;
           // Just in case a child element triggered `this.hide(true)`
-          this.$off(EVENT_NAME_HIDDEN, this.focusToggler);
+          this.$_focusOnHidden = false;
           return;
         }
         if (newValue) {
@@ -200,6 +200,11 @@ const dropdownMixin = extend({
       this.emitOnRoot(ROOT_EVENT_NAME_HIDDEN, this);
       this.$emit(EVENT_NAME_HIDDEN);
       this.destroyPopper();
+      // Handle pending focus request
+      if (this.$_focusOnHidden) {
+        this.$_focusOnHidden = false;
+        this.focusToggler();
+      }
     },
     createPopper(element) {
       this.destroyPopper();
@@ -283,7 +288,7 @@ const dropdownMixin = extend({
       this.visible = false;
       if (refocus) {
         // Child element is closing the dropdown on click
-        this.$once(EVENT_NAME_HIDDEN, this.focusToggler);
+        this.$_focusOnHidden = true;
       }
     },
     // Called only by a button that toggles the menu
@@ -349,7 +354,7 @@ const dropdownMixin = extend({
         this.visible = false;
         stopEvent(event);
         // Return focus to original trigger button
-        this.$once(EVENT_NAME_HIDDEN, this.focusToggler);
+        this.$_focusOnHidden = true;
       }
     },
     // Called only in split button mode, for the split button

package/dist/vendor/bootstrap-vue/src/mixins/has-listener.js

@@ -10,7 +10,7 @@ import { isUndefined, isArray } from '../utils/inspect';
 const hasListenerMixin = extend({
   methods: {
     hasListener(name) {
-      if (isVue3) {
+      if (isVue3(this)) {
         return true;
       }
       // Only includes listeners registered via `v-on:name`

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

@@ -1,24 +1,25 @@
-import { makePropCacheMixin } from '../utils/cache';
-import { extend, isVue3 } from '../vue';
+import { isVue3 } from '../vue';
+import { getInternalPropName, makePropCacheMixin } from '../utils/cache';
 
-const listenersMixinVue2 = makePropCacheMixin('$listeners', 'bvListeners');
-const listenersMixinVue3 = extend({
-  data() {
-    return {
-      bvListeners: {}
-    };
-  },
+const internalPropName = getInternalPropName('bvListeners');
+const listenersMixin = makePropCacheMixin('$listeners', 'bvListeners').extend({
   created() {
-    this.bvListeners = {
+    if (!isVue3(this)) {
+      return;
+    }
+    this[internalPropName] = {
+      // bug: this.$listeners is non-reactive in Vue.js 3 compat
       ...this.$listeners
     };
   },
   beforeUpdate() {
-    this.bvListeners = {
+    if (!isVue3(this)) {
+      return;
+    }
+    this[internalPropName] = {
       ...this.$listeners
     };
   }
 });
-const listenersMixin = isVue3 ? listenersMixinVue3 : listenersMixinVue2;
 
 export { listenersMixin };

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

@@ -1,4 +1,4 @@
-import { extend } from '../vue';
+import { extend, isVue3 } from '../vue';
 import { cloneDeep } from './clone-deep';
 import { looseEqual } from './loose-equal';
 import { hasOwnProperty, keys } from './object';
@@ -23,16 +23,38 @@ const makePropWatcher = propName => ({
     }
   }
 });
-const makePropCacheMixin = (propName, proxyPropName) => extend({
-  data() {
-    return {
-      [proxyPropName]: cloneDeep(this[propName])
-    };
-  },
-  watch: {
-    // Work around unwanted re-renders: https://github.com/vuejs/vue/issues/10115
-    [propName]: makePropWatcher(proxyPropName)
-  }
-});
+const getInternalPropName = proxyPropName => `bv_internal__${proxyPropName}`;
+const makePropCacheMixin = (propName, proxyPropName) => {
+  const internalPropName = getInternalPropName(proxyPropName);
+  return extend({
+    data() {
+      return {
+        [internalPropName]: isVue3(this) ? null : cloneDeep(this[propName] || {})
+      };
+    },
+    computed: {
+      [proxyPropName]() {
+        if (internalPropName in this && this[internalPropName]) {
+          return this[internalPropName];
+        }
+        const result = {
+          ...this[propName]
+        };
+        Object.keys(result).forEach(key => {
+          if (result[key] === undefined) {
+            delete result[key];
+          }
+        });
+        return result;
+      }
+    },
+    created() {
+      if (!isVue3(this)) {
+        // Work around unwanted re-renders: https://github.com/vuejs/vue/issues/10115
+        this.$watch(propName, makePropWatcher(internalPropName).handler);
+      }
+    }
+  });
+};
 
-export { makePropCacheMixin, makePropWatcher };
+export { getInternalPropName, makePropCacheMixin, makePropWatcher };

package/dist/vendor/bootstrap-vue/src/utils/config-set.js

@@ -1,5 +1,4 @@
-import { Vue } from '../vue';
-import { PROP_NAME, NAME } from '../constants/config';
+import { NAME } from '../constants/config';
 import { cloneDeep } from './clone-deep';
 import { getRaw } from './get';
 import { isPlainObject, isArray, isString, isUndefined } from './inspect';
@@ -59,23 +58,29 @@ class BvConfig {
   }
 }
 
+// Module-level singleton instance
+let bvConfig = null;
+
+// Get or create the config instance
+const getConfigInstance = () => {
+  if (!bvConfig) {
+    bvConfig = new BvConfig();
+  }
+  return bvConfig;
+};
+
 // Method for applying a global config
 const setConfig = function () {
   let config = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {};
-  let Vue$1 = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : Vue;
-  // Ensure we have a `$bvConfig` Object on the Vue prototype
-  // We set on Vue and OurVue just in case consumer has not set an alias of `vue`
-  Vue$1.prototype[PROP_NAME] = Vue.prototype[PROP_NAME] = Vue$1.prototype[PROP_NAME] || Vue.prototype[PROP_NAME] || new BvConfig();
-  // Apply the config values
-  Vue$1.prototype[PROP_NAME].setConfig(config);
+  getConfigInstance().setConfig(config);
 };
 
 // Method for resetting the user config
 // Exported for testing purposes only
 const resetConfig = () => {
-  if (Vue.prototype[PROP_NAME] && Vue.prototype[PROP_NAME].resetConfig) {
-    Vue.prototype[PROP_NAME].resetConfig();
+  if (bvConfig) {
+    bvConfig.resetConfig();
   }
 };
 
-export { resetConfig, setConfig };
+export { getConfigInstance, resetConfig, setConfig };

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

@@ -1,27 +1,21 @@
-import { Vue } from '../vue';
-import { PROP_NAME, DEFAULT_BREAKPOINT } from '../constants/config';
+import { DEFAULT_BREAKPOINT } from '../constants/config';
 import { cloneDeep } from './clone-deep';
+import { getConfigInstance } from './config-set';
 import { memoize } from './memoize';
 
-// --- Constants ---
-
-const VueProto = Vue.prototype;
-
 // --- Getter methods ---
 // All methods return a deep clone (immutable) copy of the config value,
 // to prevent mutation of the user config object
 
 // Get the current config
 const getConfig = () => {
-  const bvConfig = VueProto[PROP_NAME];
-  return bvConfig ? bvConfig.getConfig() : {};
+  return getConfigInstance().getConfig();
 };
 
 // Method to grab a config value based on a dotted/array notation key
 const getConfigValue = function (key) {
   let defaultValue = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : undefined;
-  const bvConfig = VueProto[PROP_NAME];
-  return bvConfig ? bvConfig.getConfigValue(key, defaultValue) : cloneDeep(defaultValue);
+  return getConfigInstance().getConfigValue(key, defaultValue);
 };
 
 // Method to grab a config value for a particular component

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

@@ -1,12 +1,111 @@
+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')
+ */
+const eventProp = function (eventName) {
+  let {
+    once = false
+  } = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : {};
+  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
+  };
+};
 const createNewChildComponent = function (parent, Component) {
   let config = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : {};
   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(_ref => {
+    let {
+      eventName,
+      handler,
+      once
+    } = _ref;
+    instance[once ? '$once' : '$on'](eventName, handler);
+  });
+  return instance;
 };
 
-export { createNewChildComponent };
+export { createNewChildComponent, eventProp };

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

@@ -1,23 +1,17 @@
 import { isVue3 } from '../vue';
 
-let registry = null;
-if (isVue3) {
-  registry = new WeakMap();
-}
+const registry = new WeakMap();
 const registerElementToInstance = (element, instance) => {
-  if (!isVue3) {
+  if (!isVue3(instance)) {
     return;
   }
   registry.set(element, instance);
 };
 const removeElementToInstance = element => {
-  if (!isVue3) {
-    return;
-  }
   registry.delete(element);
 };
 const getInstanceFromElement = element => {
-  if (!isVue3) {
+  if (element.__vue__) {
     return element.__vue__;
   }
   let currentElement = element;