@ulu/frontend-vue 0.6.33 → 0.6.35

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

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

@@ -1,9 +1,9 @@
 export function createApi(state: Object): Object;
 export type TourStep = {
     /**
-     * - The CSS selector for the target element. If omitted, step renders as a modal.
+     * - The CSS selector, DOM element, or function returning either, for the target element. If omitted or resolves to falsy, step renders as a modal.
      */
-    target?: string | undefined;
+    target?: string | Function | HTMLElement | undefined;
     /**
      * - The title text for the step.
      */
@@ -44,6 +44,10 @@ export type TourStep = {
      * - If true, darkens the backdrop around the target element.
      */
     highlight?: boolean | undefined;
+    /**
+     * - If true or returns true, this step will be skipped when navigating the tour.
+     */
+    skip?: boolean | Function | undefined;
     /**
      * - Props to pass to the modal (if target is omitted).
      */

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":"AA2BO,iCAHI,MAAM,GACJ,MAAM,CA8IjB"}

package/dist/plugins/tour/api.js

@@ -1,5 +1,5 @@
 import { markRaw as o } from "vue";
-const s = (e) => ({
+const a = (n) => ({
   /**
    * Starts a new tour
    * @param {Object} tour - The tour configuration object
@@ -10,57 +10,103 @@ 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();
+        let s = 0;
+        for (; s < i.steps.length; ) {
+          const e = i.steps[s];
+          if (!(typeof e.skip == "function" ? await e.skip() : e.skip)) break;
+          s++;
+        }
+        if (s >= i.steps.length) {
+          typeof i.onStop == "function" && await i.onStop();
+          return;
+        }
+        await this._runHooks(i.steps[s]), n.active = o(i), n.stepIndex = s;
+      } 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 {
+        let s = n.stepIndex + 1;
+        for (; s < i.steps.length; ) {
+          const e = i.steps[s];
+          if (!(typeof e.skip == "function" ? await e.skip() : e.skip)) break;
+          s++;
+        }
+        s < i.steps.length ? (await this._runLeaveHook(i.steps[n.stepIndex]), await this._runHooks(i.steps[s]), n.stepIndex = s) : 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 {
+        let s = n.stepIndex - 1;
+        for (; s >= 0; ) {
+          const e = i.steps[s];
+          if (!(typeof e.skip == "function" ? await e.skip() : e.skip)) break;
+          s--;
+        }
+        s >= 0 && (await this._runLeaveHook(i.steps[n.stepIndex]), await this._runHooks(i.steps[s]), n.stepIndex = s);
+      } 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 s = n.active;
+        s && (s.steps[n.stepIndex] && await this._runLeaveHook(s.steps[n.stepIndex]), typeof s.onStop == "function" && await s.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
+  a 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,8 +4,8 @@
       
       <!-- 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"
@@ -14,16 +14,17 @@
       />
 
       <!-- 2. RENDER MODAL STEP -->
-      <UluModal 
-        v-else-if="!currentStep?.target" 
+      <component 
+        v-else-if="!resolvedTargetDescriptor" 
+        :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"
@@ -33,13 +34,14 @@
         <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"
@@ -50,8 +52,8 @@
         v-bind="resolvedPopoverProps"
       >
         <component 
-          v-if="currentStep?.contentComponent" 
-          :is="currentStep.contentComponent" 
+          v-if="resolvedContentComponent" 
+          :is="resolvedContentComponent" 
           :step="currentStep"
           :tourState="tourState"
           :api="api"
@@ -61,9 +63,9 @@
         <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 
@@ -89,10 +91,23 @@
   
   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);
 
+  const resolvedTargetDescriptor = computed(() => {
+    const t = currentStep.value?.target;
+    if (typeof t === 'function') return t();
+    return t;
+  });
+
   const resolvedConfig = computed(() => ({
     placement: currentStep.value?.placement || 'bottom',
     arrow: true,
@@ -161,10 +176,10 @@
   });
 
   // Watch for step changes to update floating UI target
-  watch(currentStep, async (step) => {
-    if (step?.target) {
+  watch(resolvedTargetDescriptor, async (descriptor) => {
+    if (descriptor) {
       await nextTick();
-      const el = document.querySelector(step.target);
+      const el = typeof descriptor === 'string' ? document.querySelector(descriptor) : descriptor;
       if (el) {
         targetEl.value = el;
         // UluPopoverBase's isOpen watcher automatically calls update(), 
@@ -173,11 +188,12 @@
         if (popoverBase.value) {
           popoverBase.value.update();
         }
-        if (step.highlight) {
+        if (currentStep.value?.highlight) {
           updateTargetRect();
         }
       } else {
-        console.warn(`Tour target not found: ${step.target}`);
+        console.warn(`Tour target not found:`, descriptor);
+        targetEl.value = null;
       }
     } else {
       targetEl.value = null;