@ulu/frontend-vue 0.6.35 → 0.6.36

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

@@ -1 +1 @@
-{"version":3,"file":"UluTourContent.vue.d.ts","sourceRoot":"","sources":["../../../lib/plugins/tour/UluTourContent.vue"],"names":[],"mappings":"AAeA;"}
+{"version":3,"file":"UluTourContent.vue.d.ts","sourceRoot":"","sources":["../../../lib/plugins/tour/UluTourContent.vue"],"names":[],"mappings":"AA2BA;"}

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

@@ -1,7 +1,10 @@
-import { computed as c, createElementBlock as a, openBlock as o, createBlock as i, createCommentVNode as l, createVNode as u, resolveDynamicComponent as m, normalizeClass as d, withCtx as p, createTextVNode as f, toDisplayString as r } from "vue";
-import C from "../../components/elements/UluRule.vue.js";
-import { useTour as h } from "./useTour.js";
-const v = { class: "tour-content crop-margins" }, y = { key: 1 }, M = {
+import { computed as r, createElementBlock as a, openBlock as o, createBlock as f, createCommentVNode as l, createVNode as h, resolveDynamicComponent as C, normalizeClass as c, withCtx as _, createElementVNode as u, toDisplayString as n } from "vue";
+import y from "../../components/elements/UluRule.vue.js";
+import { useTour as P } from "./useTour.js";
+const k = { class: "tour-content crop-margins" }, x = { class: "tour-content__title-text" }, T = {
+  key: 1,
+  class: "tour-content__body"
+}, V = {
   __name: "UluTourContent",
   props: {
     /**
@@ -19,23 +22,28 @@ const v = { class: "tour-content crop-margins" }, y = { key: 1 }, M = {
       default: !1
     }
   },
-  setup(e) {
-    const { state: s } = h(), t = e, n = c(() => t.step.titleClass ? t.step.titleClass : t.isModal ? s.active?.modalTitleClass || ["h3", "no-margin"] : s.active?.popoverTitleClass || ["h4", "display-block", "no-margin"]);
-    return (k, T) => (o(), a("div", v, [
-      e.step?.title ? (o(), i(m(e.isModal ? "h2" : "strong"), {
+  setup(t) {
+    const { state: e } = P(), s = t, d = r(() => s.step.titleClass ? s.step.titleClass : s.isModal ? e.active?.modalTitleClass || ["h3", "no-margin"] : e.active?.popoverTitleClass || ["h4", "display-block", "no-margin"]), p = r(() => s.step.progressClass || e.active?.progressClass || "headline-label"), m = r(() => e.stepIndex + 1), g = r(() => e.active?.steps?.length || 0), v = r(() => s.step.hideProgress !== void 0 ? !s.step.hideProgress : e.active?.hideProgress !== void 0 ? !e.active.hideProgress : !0);
+    return (b, i) => (o(), a("div", k, [
+      t.step?.title ? (o(), f(C(t.isModal ? "h2" : "strong"), {
         key: 0,
-        class: d(n.value)
+        class: c(["tour-content__title", d.value])
       }, {
-        default: p(() => [
-          f(r(e.step.title), 1)
+        default: _(() => [
+          v.value ? (o(), a("span", {
+            key: 0,
+            class: c(["tour-content__title-progress", p.value])
+          }, " Part " + n(m.value) + " / " + n(g.value), 3)) : l("", !0),
+          i[0] || (i[0] = u("span", { class: "hidden-visually" }, ":", -1)),
+          u("span", x, n(t.step.title), 1)
         ]),
         _: 1
       }, 8, ["class"])) : l("", !0),
-      u(C),
-      e.step?.content ? (o(), a("p", y, r(e.step.content), 1)) : l("", !0)
+      h(y),
+      t.step?.content ? (o(), a("p", T, n(t.step.content), 1)) : l("", !0)
     ]));
   }
 };
 export {
-  M as default
+  V as default
 };

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

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

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

@@ -4,6 +4,10 @@ export type TourStep = {
      * - 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 | Function | HTMLElement | undefined;
+    /**
+     * - Element to highlight if different from target. Falls back to target if not provided.
+     */
+    highlightElement?: string | Function | HTMLElement | undefined;
     /**
      * - The title text for the step.
      */
@@ -16,6 +20,10 @@ export type TourStep = {
      * - Class to apply to the pager footer.
      */
     pagerClass?: string | Object | any[] | undefined;
+    /**
+     * - Class to apply to the progress indicator.
+     */
+    progressClass?: string | Object | any[] | undefined;
     /**
      * - The content text for the step.
      */
@@ -36,6 +44,10 @@ export type TourStep = {
      * - If true, hides the default tour footer (Next/Back buttons).
      */
     hideFooter?: boolean | undefined;
+    /**
+     * - If true, hides the "Part X / Y" progress indicator for this step.
+     */
+    hideProgress?: boolean | undefined;
     /**
      * - Floating UI placement string (e.g. 'bottom', 'right').
      */

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":"AA2BO,iCAHI,MAAM,GACJ,MAAM,CA8IjB"}
+{"version":3,"file":"api.d.ts","sourceRoot":"","sources":["../../../lib/plugins/tour/api.js"],"names":[],"mappings":"AA8BO,iCAHI,MAAM,GACJ,MAAM,CAgJjB"}

package/dist/plugins/tour/api.js

@@ -10,6 +10,8 @@ const a = (n) => ({
    * @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 {String|Array|Object} [tour.progressClass] - Global class applied to the progress indicator.
+   * @param {Boolean} [tour.hideProgress] - Globally hides the progress indicator for all steps unless overridden.
    * @param {Function} [tour.onStart] - Async hook called before the tour starts.
    * @param {Function} [tour.onStop] - Async hook called when the tour is closed/finished.
    */

package/lib/plugins/tour/UluTourContent.vue

@@ -2,13 +2,25 @@
   <div class="tour-content crop-margins">
     <component 
       v-if="step?.title"
+      class="tour-content__title"
       :is="isModal ? 'h2' : 'strong'" 
       :class="resolvedTitleClass"
     >
-      {{ step.title }}
+      <span 
+        v-if="showProgress" 
+        class="tour-content__title-progress"
+        :class="resolvedProgressClass"
+      >
+        Part {{ currentProgress }} / {{ totalProgress }}
+      </span>
+      <span class="hidden-visually">:</span>
+      <span class="tour-content__title-text">{{ step.title }}</span>
     </component>
     <UluRule />
-    <p v-if="step?.content">
+    <p 
+      class="tour-content__body"
+      v-if="step?.content"
+    >
       {{ step.content }}
     </p>
   </div>
@@ -47,4 +59,22 @@
       return tourState.active?.popoverTitleClass || ['h4', 'display-block', 'no-margin'];
     }
   });
+
+  const resolvedProgressClass = computed(() => {
+    return props.step.progressClass || tourState.active?.progressClass || 'headline-label';
+  });
+
+  const currentProgress = computed(() => tourState.stepIndex + 1);
+  
+  const totalProgress = computed(() => tourState.active?.steps?.length || 0);
+  
+  const showProgress = computed(() => {
+    if (props.step.hideProgress !== undefined) {
+      return !props.step.hideProgress;
+    }
+    if (tourState.active?.hideProgress !== undefined) {
+      return !tourState.active.hideProgress;
+    }
+    return true;
+  });
 </script>

package/lib/plugins/tour/UluTourDisplay.vue

@@ -80,7 +80,7 @@
 </template>
 
 <script setup>
-  import { ref, computed, watch, nextTick, onMounted, onUnmounted } from 'vue';
+  import { ref, computed, watch, nextTick, onMounted, onUnmounted, unref } from 'vue';
   import UluModal from '../../components/collapsible/UluModal.vue';
   import UluPopoverBase from '../popovers/UluPopoverBase.vue';
   import UluTourPager from './UluTourPager.vue';
@@ -100,14 +100,21 @@
 
   // Floating UI Setup for Popovers
   const targetEl = ref(null);
+  const highlightEl = ref(null);
   const popoverBase = ref(null);
 
   const resolvedTargetDescriptor = computed(() => {
-    const t = currentStep.value?.target;
-    if (typeof t === 'function') return t();
+    const t = unref(currentStep.value?.target);
+    if (typeof t === 'function') return unref(t());
     return t;
   });
 
+  const resolvedHighlightDescriptor = computed(() => {
+    const h = unref(currentStep.value?.highlightElement);
+    if (typeof h === 'function') return unref(h());
+    return h;
+  });
+
   const resolvedConfig = computed(() => ({
     placement: currentStep.value?.placement || 'bottom',
     arrow: true,
@@ -134,8 +141,9 @@
   const targetRect = ref(null);
   
   const updateTargetRect = () => {
-    if (targetEl.value) {
-      const rect = targetEl.value.getBoundingClientRect();
+    const el = highlightEl.value || targetEl.value;
+    if (el) {
+      const rect = el.getBoundingClientRect();
       targetRect.value = {
         top: rect.top,
         left: rect.left,
@@ -175,11 +183,11 @@
     };
   });
 
-  // Watch for step changes to update floating UI target
-  watch(resolvedTargetDescriptor, async (descriptor) => {
-    if (descriptor) {
+  // Watch for step changes to update floating UI target and highlight target
+  watch([resolvedTargetDescriptor, resolvedHighlightDescriptor], async ([targetDesc, highlightDesc]) => {
+    if (targetDesc) {
       await nextTick();
-      const el = typeof descriptor === 'string' ? document.querySelector(descriptor) : descriptor;
+      const el = typeof targetDesc === 'string' ? document.querySelector(targetDesc) : unref(targetDesc);
       if (el) {
         targetEl.value = el;
         // UluPopoverBase's isOpen watcher automatically calls update(), 
@@ -188,16 +196,29 @@
         if (popoverBase.value) {
           popoverBase.value.update();
         }
-        if (currentStep.value?.highlight) {
-          updateTargetRect();
-        }
       } else {
-        console.warn(`Tour target not found:`, descriptor);
+        console.warn(`Tour target not found:`, targetDesc);
         targetEl.value = null;
       }
     } else {
       targetEl.value = null;
-      targetRect.value = null;
+    }
+
+    if (highlightDesc) {
+      await nextTick();
+      const hEl = typeof highlightDesc === 'string' ? document.querySelector(highlightDesc) : unref(highlightDesc);
+      if (hEl) {
+        highlightEl.value = hEl;
+      } else {
+        console.warn(`Tour highlight element not found:`, highlightDesc);
+        highlightEl.value = null;
+      }
+    } else {
+      highlightEl.value = null;
+    }
+
+    if (currentStep.value?.highlight) {
+      updateTargetRect();
     }
   }, { immediate: true });
 

package/lib/plugins/tour/api.js

@@ -3,14 +3,17 @@ import { markRaw } from "vue";
 /**
  * @typedef {Object} TourStep
  * @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|Function|HTMLElement} [highlightElement] - Element to highlight if different from target. Falls back to target if not provided.
  * @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.
+ * @property {String|Array|Object} [progressClass] - Class to apply to the progress indicator.
  * @property {String} [content] - The content text for the step.
  * @property {Object} [component] - A Vue component to completely replace the modal/popover wrapper and layout.
  * @property {Object} [contentComponent] - A Vue component to replace the step text content, keeping the modal/popover wrappers and default footer.
  * @property {Object} [componentProps] - Props to bind to the custom component.
  * @property {Boolean} [hideFooter] - If true, hides the default tour footer (Next/Back buttons).
+ * @property {Boolean} [hideProgress] - If true, hides the "Part X / Y" progress indicator for this step.
  * @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.
@@ -36,6 +39,8 @@ export const createApi = (state) => ({
    * @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 {String|Array|Object} [tour.progressClass] - Global class applied to the progress indicator.
+   * @param {Boolean} [tour.hideProgress] - Globally hides the progress indicator for all steps unless overridden.
    * @param {Function} [tour.onStart] - Async hook called before the tour starts.
    * @param {Function} [tour.onStop] - Async hook called when the tour is closed/finished.
    */

package/package.json

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