@ulu/frontend-vue 0.6.30 → 0.6.32

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":"AAmEA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;oCA6hBklS,GAAG,8CAA8C,GAAG,yBAAyB,GAAG,6DAAmC,GAAG;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;yBAjW/nS,KAAK"}
+{"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"}

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

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

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

@@ -56,5 +56,9 @@ export type TourStep = {
      * - Async hook called before the step is rendered.
      */
     onEnter?: Function | undefined;
+    /**
+     * - Async hook called after the step is exited.
+     */
+    onLeave?: Function | undefined;
 };
 //# sourceMappingURL=api.d.ts.map

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

package/dist/plugins/tour/api.js

@@ -1,5 +1,5 @@
-import { markRaw as t } from "vue";
-const o = (e) => ({
+import { markRaw as o } from "vue";
+const s = (e) => ({
   /**
    * Starts a new tour
    * @param {Object} tour - The tour configuration object
@@ -10,9 +10,10 @@ const o = (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.onStop] - Async hook called when the tour is closed/finished.
    */
   async start(n) {
-    n?.steps?.length && (await this._runHooks(n.steps[0]), e.active = t(n), e.stepIndex = 0);
+    n?.steps?.length && (await this._runHooks(n.steps[0]), e.active = o(n), e.stepIndex = 0);
   },
   /**
    * Advances the tour to the next step, or stops if it is the last step
@@ -21,10 +22,11 @@ const o = (e) => ({
     const n = e.active;
     if (n)
       if (e.stepIndex < n.steps.length - 1) {
-        const s = e.stepIndex + 1;
-        await this._runHooks(n.steps[s]), e.stepIndex = s;
+        await this._runLeaveHook(n.steps[e.stepIndex]);
+        const i = e.stepIndex + 1;
+        await this._runHooks(n.steps[i]), e.stepIndex = i;
       } else
-        this.stop();
+        await this.stop();
   },
   /**
    * Returns the tour to the previous step
@@ -32,24 +34,33 @@ const o = (e) => ({
   async prev() {
     const n = e.active;
     if (n && e.stepIndex > 0) {
-      const s = e.stepIndex - 1;
-      await this._runHooks(n.steps[s]), e.stepIndex = s;
+      await this._runLeaveHook(n.steps[e.stepIndex]);
+      const i = e.stepIndex - 1;
+      await this._runHooks(n.steps[i]), e.stepIndex = i;
     }
   },
   /**
    * Stops and closes the current tour
    */
-  stop() {
-    e.active = null, e.stepIndex = 0;
+  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;
   },
   /**
-   * Internal method to run asynchronous lifecycle hooks on a step
+   * 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();
+  },
+  /**
+   * 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();
   }
 });
 export {
-  o as createApi
+  s as createApi
 };

package/lib/plugins/tour/UluTourDisplay.vue

@@ -7,6 +7,8 @@
         v-if="currentStep?.component" 
         :is="currentStep.component" 
         data-ulu-tour-ui="true"
+        :step="currentStep"
+        :tourState="tourState"
         v-bind="currentStep.componentProps" 
       />
 
@@ -21,6 +23,9 @@
         <component 
           v-if="currentStep?.contentComponent" 
           :is="currentStep.contentComponent" 
+          :step="currentStep"
+          :tourState="tourState"
+          :is-modal="true"
           v-bind="currentStep.componentProps"
         />
         <UluTourContent v-else :step="currentStep" :is-modal="true" />
@@ -45,6 +50,9 @@
         <component 
           v-if="currentStep?.contentComponent" 
           :is="currentStep.contentComponent" 
+          :step="currentStep"
+          :tourState="tourState"
+          :is-modal="false"
           v-bind="currentStep.componentProps"
         />
         <UluTourContent v-else :step="currentStep" :is-modal="false" />

package/lib/plugins/tour/api.js

@@ -16,6 +16,7 @@ import { markRaw } from "vue";
  * @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.
+ * @property {Function} [onLeave] - Async hook called after the step is exited.
  */
 
 /**
@@ -34,6 +35,7 @@ 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 {Function} [tour.onStop] - Async hook called when the tour is closed/finished.
    */
   async start(tour) {
     if (!tour?.steps?.length) return;
@@ -49,11 +51,12 @@ export const createApi = (state) => ({
     if (!active) return;
     
     if (state.stepIndex < active.steps.length - 1) {
+      await this._runLeaveHook(active.steps[state.stepIndex]);
       const nextIndex = state.stepIndex + 1;
       await this._runHooks(active.steps[nextIndex]);
       state.stepIndex = nextIndex;
     } else {
-      this.stop();
+      await this.stop();
     }
   },
   /**
@@ -64,6 +67,7 @@ export const createApi = (state) => ({
     if (!active) return;
     
     if (state.stepIndex > 0) {
+      await this._runLeaveHook(active.steps[state.stepIndex]);
       const prevIndex = state.stepIndex - 1;
       await this._runHooks(active.steps[prevIndex]);
       state.stepIndex = prevIndex;
@@ -72,17 +76,35 @@ export const createApi = (state) => ({
   /**
    * Stops and closes the current tour
    */
-  stop() {
+  async stop() {
+    const active = state.active;
+    if (active) {
+      if (active.steps[state.stepIndex]) {
+        await this._runLeaveHook(active.steps[state.stepIndex]);
+      }
+      if (typeof active.onStop === 'function') {
+        await active.onStop();
+      }
+    }
     state.active = null;
     state.stepIndex = 0;
   },
   /**
-   * Internal method to run asynchronous lifecycle hooks on a step
+   * Internal method to run asynchronous enter hooks on a step
    * @param {Object} step - The tour step configuration
    */
   async _runHooks(step) {
     if (step && typeof step.onEnter === 'function') {
       await step.onEnter();
     }
+  },
+  /**
+   * Internal method to run asynchronous leave hooks on a step
+   * @param {Object} step - The tour step configuration
+   */
+  async _runLeaveHook(step) {
+    if (step && typeof step.onLeave === 'function') {
+      await step.onLeave();
+    }
   }
 });

package/package.json

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