@ulu/frontend-vue 0.6.32 → 0.6.34

package/dist/plugins/tour/UluTourDisplay.vue.d.ts

@@ -1,100 +1,5 @@
-import { nextTick } from 'vue';
 declare const _default: import('vue').DefineComponent<{}, {}, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {}, string, import('vue').PublicProps, Readonly<{}> & Readonly<{}>, {}, {}, {}, {}, string, import('vue').ComponentProvideOptions, true, {
-    popoverBase: ({
-        $: import('vue').ComponentInternalInstance;
-        $data: {};
-        $props: Partial<{}> & Omit<{} & import('vue').VNodeProps & import('vue').AllowedComponentProps & import('vue').ComponentCustomProps, never>;
-        $attrs: {
-            [x: string]: unknown;
-        };
-        $refs: {
-            [x: string]: unknown;
-        } & {
-            contentEl: HTMLSpanElement;
-            contentArrow: HTMLSpanElement;
-        };
-        $slots: Readonly<{
-            [name: string]: import('vue').Slot<any> | undefined;
-        }>;
-        $root: import('vue').ComponentPublicInstance | null;
-        $parent: import('vue').ComponentPublicInstance | null;
-        $host: Element | null;
-        $emit: (event: string, ...args: any[]) => void;
-        $el: HTMLSpanElement;
-        $options: import('vue').ComponentOptionsBase<Readonly<{}> & Readonly<{}>, {
-            close: () => void;
-            update: Function;
-            content: import('vue').Ref<null, null>;
-            $emit: (event: "close" | "update:isOpen", ...args: any[]) => void;
-            isOpen: boolean;
-            clickOutsideCloses: boolean;
-            escapeCloses: boolean;
-            directFocus: Function;
-            trigger: Record<string, any>;
-            config: Record<string, any>;
-            modifiers?: string | Record<string, any> | unknown[] | undefined;
-            $props: {
-                readonly isOpen?: boolean | undefined;
-                readonly clickOutsideCloses?: boolean | undefined;
-                readonly escapeCloses?: boolean | undefined;
-                readonly directFocus?: Function | undefined;
-                readonly trigger?: Record<string, any> | undefined;
-                readonly config?: Record<string, any> | undefined;
-                readonly modifiers?: string | Record<string, any> | unknown[] | undefined;
-            };
-        }, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {}, string, {}, {}, string, {}, import('vue').GlobalComponents, import('vue').GlobalDirectives, string, import('vue').ComponentProvideOptions> & {
-            beforeCreate?: (() => void) | (() => void)[];
-            created?: (() => void) | (() => void)[];
-            beforeMount?: (() => void) | (() => void)[];
-            mounted?: (() => void) | (() => void)[];
-            beforeUpdate?: (() => void) | (() => void)[];
-            updated?: (() => void) | (() => void)[];
-            activated?: (() => void) | (() => void)[];
-            deactivated?: (() => void) | (() => void)[];
-            beforeDestroy?: (() => void) | (() => void)[];
-            beforeUnmount?: (() => void) | (() => void)[];
-            destroyed?: (() => void) | (() => void)[];
-            unmounted?: (() => void) | (() => void)[];
-            renderTracked?: ((e: import('vue').DebuggerEvent) => void) | ((e: import('vue').DebuggerEvent) => void)[];
-            renderTriggered?: ((e: import('vue').DebuggerEvent) => void) | ((e: import('vue').DebuggerEvent) => void)[];
-            errorCaptured?: ((err: unknown, instance: import('vue').ComponentPublicInstance | null, info: string) => boolean | void) | ((err: unknown, instance: import('vue').ComponentPublicInstance | null, info: string) => boolean | void)[];
-        };
-        $forceUpdate: () => void;
-        $nextTick: typeof nextTick;
-        $watch<T extends string | ((...args: any) => any)>(source: T, cb: T extends (...args: any) => infer R ? (...args: [R, R, import('@vue/reactivity').OnCleanup]) => any : (...args: [any, any, import('@vue/reactivity').OnCleanup]) => any, options?: import('vue').WatchOptions): import('vue').WatchStopHandle;
-    } & Readonly<{}> & Omit<Readonly<{}> & Readonly<{}>, "$props" | "$emit" | "isOpen" | "clickOutsideCloses" | "escapeCloses" | "directFocus" | "trigger" | "config" | "modifiers" | "content" | "close" | "update"> & import('vue').ShallowUnwrapRef<{
-        close: () => void;
-        update: Function;
-        content: import('vue').Ref<null, null>;
-        $emit: (event: "close" | "update:isOpen", ...args: any[]) => void;
-        isOpen: boolean;
-        clickOutsideCloses: boolean;
-        escapeCloses: boolean;
-        directFocus: Function;
-        trigger: Record<string, any>;
-        config: Record<string, any>;
-        modifiers?: string | Record<string, any> | unknown[] | undefined;
-        $props: {
-            readonly isOpen?: boolean | undefined;
-            readonly clickOutsideCloses?: boolean | undefined;
-            readonly escapeCloses?: boolean | undefined;
-            readonly directFocus?: Function | undefined;
-            readonly trigger?: Record<string, any> | undefined;
-            readonly config?: Record<string, any> | undefined;
-            readonly modifiers?: string | Record<string, any> | unknown[] | undefined;
-        };
-    }> & {} & import('vue').ComponentCustomProperties & {} & {
-        $slots: {
-            default?(_: {
-                isOpen: boolean;
-                close: () => void;
-            }): any;
-            footer?(_: {
-                isOpen: boolean;
-                close: () => void;
-            }): any;
-        };
-    }) | null;
+    popoverBase: any;
 }, any>;
 export default _default;
 //# sourceMappingURL=UluTourDisplay.vue.d.ts.map

package/dist/plugins/tour/UluTourDisplay.vue.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"UluTourDisplay.vue.d.ts","sourceRoot":"","sources":["../../../lib/plugins/tour/UluTourDisplay.vue"],"names":[],"mappings":"AA2EA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;oCAqjBs3Q,GAAG,8CAA8C,GAAG,yBAAyB,GAAG,6DAAmC,GAAG;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;yBAjXn6Q,KAAK"}
+{"version":3,"file":"UluTourDisplay.vue.d.ts","sourceRoot":"","sources":["../../../lib/plugins/tour/UluTourDisplay.vue"],"names":[],"mappings":"AAgFA;"}

package/dist/plugins/tour/UluTourDisplay.vue.js

@@ -1,37 +1,37 @@
-import { computed as s, ref as f, watch as B, nextTick as T, onMounted as b, onUnmounted as z, createBlock as r, openBlock as o, Teleport as L, createElementBlock as y, createCommentVNode as x, unref as u, Fragment as F, resolveDynamicComponent as g, mergeProps as v, createSlots as $, withCtx as d, createVNode as k, normalizeStyle as I } from "vue";
-import R from "../../components/collapsible/UluModal.vue.js";
+import { computed as l, ref as h, watch as z, nextTick as L, onMounted as F, onUnmounted as I, createBlock as a, openBlock as n, Teleport as M, createElementBlock as $, createCommentVNode as k, unref as r, Fragment as R, resolveDynamicComponent as p, mergeProps as d, createSlots as w, withCtx as f, normalizeStyle as D } from "vue";
+import U from "../../components/collapsible/UluModal.vue.js";
 import V from "../popovers/UluPopoverBase.vue.js";
-import w from "./UluTourPager.vue.js";
-import _ from "./UluTourContent.vue.js";
-import { useTour as D } from "./useTour.js";
-const G = {
+import q from "./UluTourPager.vue.js";
+import P from "./UluTourContent.vue.js";
+import { useTour as N } from "./useTour.js";
+const Q = {
   __name: "UluTourDisplay",
-  setup(M) {
-    const { api: c, state: n } = D(), t = s(() => n.active?.steps[n.stepIndex]), p = f(null), m = f(null), C = s(() => ({
+  setup(O) {
+    const { api: i, state: o } = N(), t = l(() => o.active?.steps[o.stepIndex]), y = l(() => t.value?.component || o.active?.component), c = l(() => t.value?.contentComponent || o.active?.contentComponent), C = l(() => t.value?.pagerComponent || o.active?.pagerComponent || q), _ = l(() => t.value?.modalComponent || o.active?.modalComponent || U), S = l(() => t.value?.popoverComponent || o.active?.popoverComponent || V), v = h(null), g = h(null), E = l(() => ({
       placement: t.value?.placement || "bottom",
       arrow: !0,
       offset: 8
-    })), P = s(() => ({
-      ...n.active?.modalProps || {},
+    })), B = l(() => ({
+      ...o.active?.modalProps || {},
       ...t.value?.modalProps || {}
-    })), S = s(() => ({
+    })), T = l(() => ({
       modifiers: "large",
-      ...n.active?.popoverProps || {},
+      ...o.active?.popoverProps || {},
       ...t.value?.popoverProps || {}
-    })), a = f(null), i = () => {
-      if (p.value) {
-        const e = p.value.getBoundingClientRect();
-        a.value = {
+    })), s = h(null), m = () => {
+      if (v.value) {
+        const e = v.value.getBoundingClientRect();
+        s.value = {
           top: e.top,
           left: e.left,
           width: e.width,
           height: e.height
         };
       } else
-        a.value = null;
-    }, E = s(() => {
-      if (!a.value) return {};
-      const e = a.value;
+        s.value = null;
+    }, b = l(() => {
+      if (!s.value) return {};
+      const e = s.value;
       return {
         position: "fixed",
         top: 0,
@@ -56,42 +56,44 @@ const G = {
       )`
       };
     });
-    return B(t, async (e) => {
+    return z(t, async (e) => {
       if (e?.target) {
-        await T();
-        const l = document.querySelector(e.target);
-        l ? (p.value = l, m.value && m.value.update(), e.highlight && i()) : console.warn(`Tour target not found: ${e.target}`);
+        await L();
+        const u = document.querySelector(e.target);
+        u ? (v.value = u, g.value && g.value.update(), e.highlight && m()) : console.warn(`Tour target not found: ${e.target}`);
       } else
-        p.value = null, a.value = null;
-    }, { immediate: !0 }), b(() => {
-      window.addEventListener("resize", i), window.addEventListener("scroll", i);
-    }), z(() => {
-      window.removeEventListener("resize", i), window.removeEventListener("scroll", i);
-    }), (e, l) => (o(), r(L, { to: "body" }, [
-      u(n).active ? (o(), y(F, { key: 0 }, [
-        t.value?.component ? (o(), r(g(t.value.component), v({
+        v.value = null, s.value = null;
+    }, { immediate: !0 }), F(() => {
+      window.addEventListener("resize", m), window.addEventListener("scroll", m);
+    }), I(() => {
+      window.removeEventListener("resize", m), window.removeEventListener("scroll", m);
+    }), (e, u) => (n(), a(M, { to: "body" }, [
+      r(o).active ? (n(), $(R, { key: 0 }, [
+        y.value ? (n(), a(p(y.value), d({
           key: 0,
           "data-ulu-tour-ui": "true",
           step: t.value,
-          tourState: u(n)
-        }, t.value.componentProps), null, 16, ["step", "tourState"])) : t.value?.target ? (o(), r(V, v({
+          tourState: r(o),
+          api: r(i)
+        }, t.value.componentProps), null, 16, ["step", "tourState", "api"])) : t.value?.target ? (n(), a(p(S.value), d({
           key: 2,
           ref_key: "popoverBase",
-          ref: m,
-          trigger: p.value,
-          config: C.value,
+          ref: g,
+          trigger: v.value,
+          config: E.value,
           style: { zIndex: 9999 },
           isOpen: !0,
           "data-ulu-tour-ui": "true",
-          onClose: l[1] || (l[1] = (h) => u(c).stop())
-        }, S.value), $({
-          default: d(() => [
-            t.value?.contentComponent ? (o(), r(g(t.value.contentComponent), v({
+          onClose: u[1] || (u[1] = (x) => r(i).stop())
+        }, T.value), w({
+          default: f(() => [
+            c.value ? (n(), a(p(c.value), d({
               key: 0,
               step: t.value,
-              tourState: u(n),
+              tourState: r(o),
+              api: r(i),
               "is-modal": !1
-            }, t.value.componentProps), null, 16, ["step", "tourState"])) : (o(), r(_, {
+            }, t.value.componentProps), null, 16, ["step", "tourState", "api"])) : (n(), a(P, {
               key: 1,
               step: t.value,
               "is-modal": !1
@@ -101,25 +103,26 @@ const G = {
         }, [
           t.value?.hideFooter ? void 0 : {
             name: "footer",
-            fn: d(() => [
-              k(w)
+            fn: f(() => [
+              (n(), a(p(C.value)))
             ]),
             key: "0"
           }
-        ]), 1040, ["trigger", "config"])) : (o(), r(R, v({
+        ]), 1040, ["trigger", "config"])) : (n(), a(p(_.value), d({
           key: 1,
           modelValue: !0,
           "data-ulu-tour-ui": "true"
-        }, P.value, {
-          onClose: l[0] || (l[0] = (h) => u(c).stop())
-        }), $({
-          default: d(() => [
-            t.value?.contentComponent ? (o(), r(g(t.value.contentComponent), v({
+        }, B.value, {
+          onClose: u[0] || (u[0] = (x) => r(i).stop())
+        }), w({
+          default: f(() => [
+            c.value ? (n(), a(p(c.value), d({
               key: 0,
               step: t.value,
-              tourState: u(n),
+              tourState: r(o),
+              api: r(i),
               "is-modal": !0
-            }, t.value.componentProps), null, 16, ["step", "tourState"])) : (o(), r(_, {
+            }, t.value.componentProps), null, 16, ["step", "tourState", "api"])) : (n(), a(P, {
               key: 1,
               step: t.value,
               "is-modal": !0
@@ -129,23 +132,23 @@ const G = {
         }, [
           t.value?.hideFooter ? void 0 : {
             name: "footer",
-            fn: d(() => [
-              k(w)
+            fn: f(() => [
+              (n(), a(p(C.value)))
             ]),
             key: "0"
           }
         ]), 1040)),
-        t.value?.target && t.value?.highlight && a.value ? (o(), y("div", {
+        t.value?.target && t.value?.highlight && s.value ? (n(), $("div", {
           key: 3,
           class: "tour-highlight-backdrop",
-          style: I(E.value),
+          style: D(b.value),
           "data-ulu-tour-ui": "true",
-          onClick: l[2] || (l[2] = (h) => u(c).stop())
-        }, null, 4)) : x("", !0)
-      ], 64)) : x("", !0)
+          onClick: u[2] || (u[2] = (x) => r(i).stop())
+        }, null, 4)) : k("", !0)
+      ], 64)) : k("", !0)
     ]));
   }
 };
 export {
-  G as default
+  Q as default
 };

package/dist/plugins/tour/api.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"api.d.ts","sourceRoot":"","sources":["../../../lib/plugins/tour/api.js"],"names":[],"mappings":"AA0BO,iCAHI,MAAM,GACJ,MAAM,CAqFjB"}
+{"version":3,"file":"api.d.ts","sourceRoot":"","sources":["../../../lib/plugins/tour/api.js"],"names":[],"mappings":"AA0BO,iCAHI,MAAM,GACJ,MAAM,CAkHjB"}

package/dist/plugins/tour/api.js

@@ -1,5 +1,5 @@
-import { markRaw as o } from "vue";
-const s = (e) => ({
+import { markRaw as s } from "vue";
+const r = (n) => ({
   /**
    * Starts a new tour
    * @param {Object} tour - The tour configuration object
@@ -10,57 +10,89 @@ const s = (e) => ({
    * @param {String|Array|Object} [tour.modalTitleClass] - Global class applied to the title of modal steps.
    * @param {String|Array|Object} [tour.popoverTitleClass] - Global class applied to the title of popover steps.
    * @param {String|Array|Object} [tour.pagerClass] - Global class applied to the pager.
+   * @param {Function} [tour.onStart] - Async hook called before the tour starts.
    * @param {Function} [tour.onStop] - Async hook called when the tour is closed/finished.
    */
-  async start(n) {
-    n?.steps?.length && (await this._runHooks(n.steps[0]), e.active = o(n), e.stepIndex = 0);
+  async start(i) {
+    if (!n.isTransitioning) {
+      n.isTransitioning = !0;
+      try {
+        if (!i?.steps?.length) return;
+        typeof i.onStart == "function" && await i.onStart(), await this._runHooks(i.steps[0]), n.active = s(i), n.stepIndex = 0;
+      } finally {
+        n.isTransitioning = !1;
+      }
+    }
   },
   /**
    * Advances the tour to the next step, or stops if it is the last step
    */
   async next() {
-    const n = e.active;
-    if (n)
-      if (e.stepIndex < n.steps.length - 1) {
-        await this._runLeaveHook(n.steps[e.stepIndex]);
-        const i = e.stepIndex + 1;
-        await this._runHooks(n.steps[i]), e.stepIndex = i;
-      } else
-        await this.stop();
+    if (n.isTransitioning) return;
+    const i = n.active;
+    if (i) {
+      n.isTransitioning = !0;
+      try {
+        if (n.stepIndex < i.steps.length - 1) {
+          await this._runLeaveHook(i.steps[n.stepIndex]);
+          const e = n.stepIndex + 1;
+          await this._runHooks(i.steps[e]), n.stepIndex = e;
+        } else
+          await this.stop(!0);
+      } finally {
+        n.isTransitioning = !1;
+      }
+    }
   },
   /**
    * Returns the tour to the previous step
    */
   async prev() {
-    const n = e.active;
-    if (n && e.stepIndex > 0) {
-      await this._runLeaveHook(n.steps[e.stepIndex]);
-      const i = e.stepIndex - 1;
-      await this._runHooks(n.steps[i]), e.stepIndex = i;
+    if (n.isTransitioning) return;
+    const i = n.active;
+    if (i) {
+      n.isTransitioning = !0;
+      try {
+        if (n.stepIndex > 0) {
+          await this._runLeaveHook(i.steps[n.stepIndex]);
+          const e = n.stepIndex - 1;
+          await this._runHooks(i.steps[e]), n.stepIndex = e;
+        }
+      } finally {
+        n.isTransitioning = !1;
+      }
     }
   },
   /**
    * Stops and closes the current tour
+   * @param {Boolean} [internalBypass=false] - Used internally to bypass transition check
    */
-  async stop() {
-    const n = e.active;
-    n && (n.steps[e.stepIndex] && await this._runLeaveHook(n.steps[e.stepIndex]), typeof n.onStop == "function" && await n.onStop()), e.active = null, e.stepIndex = 0;
+  async stop(i = !1) {
+    if (!(!i && n.isTransitioning)) {
+      n.isTransitioning = !0;
+      try {
+        const e = n.active;
+        e && (e.steps[n.stepIndex] && await this._runLeaveHook(e.steps[n.stepIndex]), typeof e.onStop == "function" && await e.onStop()), n.active = null, n.stepIndex = 0;
+      } finally {
+        n.isTransitioning = !1;
+      }
+    }
   },
   /**
    * Internal method to run asynchronous enter hooks on a step
    * @param {Object} step - The tour step configuration
    */
-  async _runHooks(n) {
-    n && typeof n.onEnter == "function" && await n.onEnter();
+  async _runHooks(i) {
+    i && typeof i.onEnter == "function" && await i.onEnter();
   },
   /**
    * Internal method to run asynchronous leave hooks on a step
    * @param {Object} step - The tour step configuration
    */
-  async _runLeaveHook(n) {
-    n && typeof n.onLeave == "function" && await n.onLeave();
+  async _runLeaveHook(i) {
+    i && typeof i.onLeave == "function" && await i.onLeave();
   }
 });
 export {
-  s as createApi
+  r as createApi
 };

package/dist/plugins/tour/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../lib/plugins/tour/index.js"],"names":[],"mappings":"AAQA,gDAeC;;;;;wBAjBuB,cAAc"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../lib/plugins/tour/index.js"],"names":[],"mappings":"AAQA,gDAgBC;;;;;wBAlBuB,cAAc"}

package/dist/plugins/tour/index.js

@@ -1,14 +1,15 @@
-import { reactive as e } from "vue";
-import u from "./UluTourDisplay.vue.js";
-import { createApi as i } from "./api.js";
-function s(o) {
-  const t = e({
+import { reactive as r } from "vue";
+import e from "./UluTourDisplay.vue.js";
+import { createApi as u } from "./api.js";
+function a(o) {
+  const t = r({
     active: null,
-    stepIndex: 0
-  }), r = i(t);
-  o.component("UluTourDisplay", u), o.config.globalProperties.$uluTour = r, o.config.globalProperties.$uluTourState = t, o.provide("uluTour", r), o.provide("uluTourState", t);
+    stepIndex: 0,
+    isTransitioning: !1
+  }), i = u(t);
+  o.component("UluTourDisplay", e), o.config.globalProperties.$uluTour = i, o.config.globalProperties.$uluTourState = t, o.provide("uluTour", i), o.provide("uluTourState", t);
 }
 export {
-  u as UluTourDisplay,
-  s as default
+  e as UluTourDisplay,
+  a as default
 };

package/lib/plugins/tour/UluTourDisplay.vue

@@ -4,40 +4,44 @@
       
       <!-- 1. FULL COMPONENT TAKEOVER -->
       <component 
-        v-if="currentStep?.component" 
-        :is="currentStep.component" 
+        v-if="resolvedComponent" 
+        :is="resolvedComponent" 
         data-ulu-tour-ui="true"
         :step="currentStep"
         :tourState="tourState"
+        :api="api"
         v-bind="currentStep.componentProps" 
       />
 
       <!-- 2. RENDER MODAL STEP -->
-      <UluModal 
+      <component 
         v-else-if="!currentStep?.target" 
+        :is="resolvedModalComponent"
         :modelValue="true"
         data-ulu-tour-ui="true"
         v-bind="resolvedModalProps"
         @close="api.stop()"
       >
         <component 
-          v-if="currentStep?.contentComponent" 
-          :is="currentStep.contentComponent" 
+          v-if="resolvedContentComponent" 
+          :is="resolvedContentComponent" 
           :step="currentStep"
           :tourState="tourState"
+          :api="api"
           :is-modal="true"
           v-bind="currentStep.componentProps"
         />
         <UluTourContent v-else :step="currentStep" :is-modal="true" />
         
         <template #footer v-if="!currentStep?.hideFooter">
-          <UluTourPager />
+          <component :is="resolvedPagerComponent" />
         </template>
-      </UluModal>
+      </component>
 
       <!-- 3. RENDER POPOVER STEP -->
-      <UluPopoverBase 
+      <component 
         v-else
+        :is="resolvedPopoverComponent"
         ref="popoverBase"
         :trigger="targetEl"
         :config="resolvedConfig"
@@ -48,19 +52,20 @@
         v-bind="resolvedPopoverProps"
       >
         <component 
-          v-if="currentStep?.contentComponent" 
-          :is="currentStep.contentComponent" 
+          v-if="resolvedContentComponent" 
+          :is="resolvedContentComponent" 
           :step="currentStep"
           :tourState="tourState"
+          :api="api"
           :is-modal="false"
           v-bind="currentStep.componentProps"
         />
         <UluTourContent v-else :step="currentStep" :is-modal="false" />
         
         <template #footer v-if="!currentStep?.hideFooter">
-          <UluTourPager />
+          <component :is="resolvedPagerComponent" />
         </template>
-      </UluPopoverBase>
+      </component>
 
       <!-- OPTIONAL HIGHLIGHT BACKDROP -->
       <div 
@@ -86,6 +91,13 @@
   
   const currentStep = computed(() => tourState.active?.steps[tourState.stepIndex]);
 
+  // Component Resolution
+  const resolvedComponent = computed(() => currentStep.value?.component || tourState.active?.component);
+  const resolvedContentComponent = computed(() => currentStep.value?.contentComponent || tourState.active?.contentComponent);
+  const resolvedPagerComponent = computed(() => currentStep.value?.pagerComponent || tourState.active?.pagerComponent || UluTourPager);
+  const resolvedModalComponent = computed(() => currentStep.value?.modalComponent || tourState.active?.modalComponent || UluModal);
+  const resolvedPopoverComponent = computed(() => currentStep.value?.popoverComponent || tourState.active?.popoverComponent || UluPopoverBase);
+
   // Floating UI Setup for Popovers
   const targetEl = ref(null);
   const popoverBase = ref(null);