@ulu/frontend-vue 0.6.34 → 0.6.35

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

@@ -1,37 +1,40 @@
-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 q from "./UluTourPager.vue.js";
-import P from "./UluTourContent.vue.js";
-import { useTour as N } from "./useTour.js";
-const Q = {
+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 O } from "./useTour.js";
+const W = {
   __name: "UluTourDisplay",
-  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(() => ({
+  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
     })), B = l(() => ({
       ...o.active?.modalProps || {},
       ...t.value?.modalProps || {}
-    })), T = l(() => ({
+    })), b = l(() => ({
       modifiers: "large",
       ...o.active?.popoverProps || {},
       ...t.value?.popoverProps || {}
-    })), s = h(null), m = () => {
-      if (v.value) {
-        const e = v.value.getBoundingClientRect();
-        s.value = {
+    })), v = h(null), m = () => {
+      if (i.value) {
+        const e = i.value.getBoundingClientRect();
+        v.value = {
           top: e.top,
           left: e.left,
           width: e.width,
           height: e.height
         };
       } else
-        s.value = null;
-    }, b = l(() => {
-      if (!s.value) return {};
-      const e = s.value;
+        v.value = null;
+    }, z = l(() => {
+      if (!v.value) return {};
+      const e = v.value;
       return {
         position: "fixed",
         top: 0,
@@ -56,44 +59,44 @@ const Q = {
       )`
       };
     });
-    return z(t, async (e) => {
-      if (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}`);
+    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
-        v.value = null, s.value = null;
+        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(), $(R, { key: 0 }, [
-        y.value ? (n(), a(p(y.value), d({
+      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: r(o),
-          api: r(i)
-        }, t.value.componentProps), null, 16, ["step", "tourState", "api"])) : t.value?.target ? (n(), a(p(S.value), d({
+          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: g,
-          trigger: v.value,
-          config: E.value,
+          trigger: i.value,
+          config: T.value,
           style: { zIndex: 9999 },
           isOpen: !0,
           "data-ulu-tour-ui": "true",
-          onClose: u[1] || (u[1] = (x) => r(i).stop())
-        }, T.value), w({
+          onClose: u[1] || (u[1] = (k) => r(s).stop())
+        }, b.value), P({
           default: f(() => [
-            c.value ? (n(), a(p(c.value), d({
+            d.value ? (n(), a(p(d.value), c({
               key: 0,
               step: t.value,
               tourState: r(o),
-              api: r(i),
+              api: r(s),
               "is-modal": !1
-            }, t.value.componentProps), null, 16, ["step", "tourState", "api"])) : (n(), a(P, {
+            }, t.value.componentProps), null, 16, ["step", "tourState", "api"])) : (n(), a(_, {
               key: 1,
               step: t.value,
               "is-modal": !1
@@ -108,21 +111,21 @@ const Q = {
             ]),
             key: "0"
           }
-        ]), 1040, ["trigger", "config"])) : (n(), a(p(_.value), d({
+        ]), 1040, ["trigger", "config"])) : (n(), a(p(S.value), c({
           key: 1,
           modelValue: !0,
           "data-ulu-tour-ui": "true"
         }, B.value, {
-          onClose: u[0] || (u[0] = (x) => r(i).stop())
-        }), w({
+          onClose: u[0] || (u[0] = (k) => r(s).stop())
+        }), P({
           default: f(() => [
-            c.value ? (n(), a(p(c.value), d({
+            d.value ? (n(), a(p(d.value), c({
               key: 0,
               step: t.value,
               tourState: r(o),
-              api: r(i),
+              api: r(s),
               "is-modal": !0
-            }, t.value.componentProps), null, 16, ["step", "tourState", "api"])) : (n(), a(P, {
+            }, t.value.componentProps), null, 16, ["step", "tourState", "api"])) : (n(), a(_, {
               key: 1,
               step: t.value,
               "is-modal": !0
@@ -138,17 +141,17 @@ const Q = {
             key: "0"
           }
         ]), 1040)),
-        t.value?.target && t.value?.highlight && s.value ? (n(), $("div", {
+        t.value?.target && t.value?.highlight && v.value ? (n(), w("div", {
           key: 3,
           class: "tour-highlight-backdrop",
-          style: D(b.value),
+          style: U(z.value),
           "data-ulu-tour-ui": "true",
-          onClick: u[2] || (u[2] = (x) => r(i).stop())
-        }, null, 4)) : k("", !0)
-      ], 64)) : k("", !0)
+          onClick: u[2] || (u[2] = (k) => r(s).stop())
+        }, null, 4)) : $("", !0)
+      ], 64)) : $("", !0)
     ]));
   }
 };
 export {
-  Q 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,CAkHjB"}
+{"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 s } from "vue";
-const r = (n) => ({
+import { markRaw as o } from "vue";
+const a = (n) => ({
   /**
    * Starts a new tour
    * @param {Object} tour - The tour configuration object
@@ -18,7 +18,18 @@ const r = (n) => ({
       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;
+        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;
       }
@@ -33,12 +44,13 @@ const r = (n) => ({
     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);
+        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;
       }
@@ -53,11 +65,13 @@ const r = (n) => ({
     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;
+        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;
       }
@@ -71,8 +85,8 @@ const r = (n) => ({
     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;
+        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;
       }
@@ -94,5 +108,5 @@ const r = (n) => ({
   }
 });
 export {
-  r as createApi
+  a as createApi
 };

package/lib/plugins/tour/UluTourDisplay.vue

@@ -15,7 +15,7 @@
 
       <!-- 2. RENDER MODAL STEP -->
       <component 
-        v-else-if="!currentStep?.target" 
+        v-else-if="!resolvedTargetDescriptor" 
         :is="resolvedModalComponent"
         :modelValue="true"
         data-ulu-tour-ui="true"
@@ -102,6 +102,12 @@
   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,
@@ -170,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(), 
@@ -182,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;

package/lib/plugins/tour/api.js

@@ -2,7 +2,7 @@ import { markRaw } from "vue";
 
 /**
  * @typedef {Object} TourStep
- * @property {String} [target] - The CSS selector for the target element. If omitted, step renders as a modal.
+ * @property {String|Function|HTMLElement} [target] - The CSS selector, DOM element, or function returning either, for the target element. If omitted or resolves to falsy, step renders as a modal.
  * @property {String} [title] - The title text for the step.
  * @property {String|Array|Object} [titleClass] - Class to apply to the title.
  * @property {String|Array|Object} [pagerClass] - Class to apply to the pager footer.
@@ -13,6 +13,7 @@ import { markRaw } from "vue";
  * @property {Boolean} [hideFooter] - If true, hides the default tour footer (Next/Back buttons).
  * @property {String} [placement] - Floating UI placement string (e.g. 'bottom', 'right').
  * @property {Boolean} [highlight] - If true, darkens the backdrop around the target element.
+ * @property {Boolean|Function} [skip] - If true or returns true, this step will be skipped when navigating the tour.
  * @property {Object} [modalProps] - Props to pass to the modal (if target is omitted).
  * @property {Object} [popoverProps] - Props to pass to the popover (if target is present).
  * @property {Function} [onEnter] - Async hook called before the step is rendered.
@@ -46,9 +47,23 @@ export const createApi = (state) => ({
       if (typeof tour.onStart === 'function') {
         await tour.onStart();
       }
-      await this._runHooks(tour.steps[0]);
+
+      let startIndex = 0;
+      while (startIndex < tour.steps.length) {
+        const step = tour.steps[startIndex];
+        const shouldSkip = typeof step.skip === 'function' ? await step.skip() : step.skip;
+        if (!shouldSkip) break;
+        startIndex++;
+      }
+
+      if (startIndex >= tour.steps.length) {
+        if (typeof tour.onStop === 'function') await tour.onStop();
+        return;
+      }
+
+      await this._runHooks(tour.steps[startIndex]);
       state.active = markRaw(tour);
-      state.stepIndex = 0;
+      state.stepIndex = startIndex;
     } finally {
       state.isTransitioning = false;
     }
@@ -63,9 +78,16 @@ export const createApi = (state) => ({
     
     state.isTransitioning = true;
     try {
-      if (state.stepIndex < active.steps.length - 1) {
+      let nextIndex = state.stepIndex + 1;
+      while (nextIndex < active.steps.length) {
+        const step = active.steps[nextIndex];
+        const shouldSkip = typeof step.skip === 'function' ? await step.skip() : step.skip;
+        if (!shouldSkip) break;
+        nextIndex++;
+      }
+
+      if (nextIndex < active.steps.length) {
         await this._runLeaveHook(active.steps[state.stepIndex]);
-        const nextIndex = state.stepIndex + 1;
         await this._runHooks(active.steps[nextIndex]);
         state.stepIndex = nextIndex;
       } else {
@@ -85,9 +107,16 @@ export const createApi = (state) => ({
     
     state.isTransitioning = true;
     try {
-      if (state.stepIndex > 0) {
+      let prevIndex = state.stepIndex - 1;
+      while (prevIndex >= 0) {
+        const step = active.steps[prevIndex];
+        const shouldSkip = typeof step.skip === 'function' ? await step.skip() : step.skip;
+        if (!shouldSkip) break;
+        prevIndex--;
+      }
+
+      if (prevIndex >= 0) {
         await this._runLeaveHook(active.steps[state.stepIndex]);
-        const prevIndex = state.stepIndex - 1;
         await this._runHooks(active.steps[prevIndex]);
         state.stepIndex = prevIndex;
       }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@ulu/frontend-vue",
-  "version": "0.6.34",
+  "version": "0.6.35",
   "description": "A modular, tree-shakeable Vue 3 component library for the Ulu Frontend theming system, plus general utilities for Vue development",
   "type": "module",
   "files": [