@ulu/frontend-vue 0.6.30 → 0.6.31

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/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.31",
   "description": "A modular, tree-shakeable Vue 3 component library for the Ulu Frontend theming system, plus general utilities for Vue development",
   "type": "module",
   "files": [