@ulu/frontend-vue 0.6.34 → 0.6.36

package/lib/plugins/tour/api.js

@@ -2,17 +2,21 @@ 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|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.
  * @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.
@@ -35,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.
    */
@@ -46,9 +52,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 +83,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 +112,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.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": [