@ulu/frontend-vue 0.6.26 → 0.6.28

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":"AAgBA;"}
+{"version":3,"file":"UluTourContent.vue.d.ts","sourceRoot":"","sources":["../../../lib/plugins/tour/UluTourContent.vue"],"names":[],"mappings":"AAeA;"}

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

@@ -1,6 +1,7 @@
-import { createElementBlock as o, openBlock as t, createBlock as s, createCommentVNode as n, createVNode as c, resolveDynamicComponent as l, normalizeClass as r, withCtx as i, createTextVNode as m, toDisplayString as a } from "vue";
-import d from "../../components/elements/UluRule.vue.js";
-const u = { class: "tour-content crop-margins" }, p = { key: 1 }, C = {
+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 = {
   __name: "UluTourContent",
   props: {
     /**
@@ -19,21 +20,22 @@ const u = { class: "tour-content crop-margins" }, p = { key: 1 }, C = {
     }
   },
   setup(e) {
-    return (f, h) => (t(), o("div", u, [
-      e.step?.title ? (t(), s(l(e.isModal ? "h2" : "strong"), {
+    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"), {
         key: 0,
-        class: r([e.isModal ? "h3" : "h4", "display-block no-margin"])
+        class: d(n.value)
       }, {
-        default: i(() => [
-          m(a(e.step.title), 1)
+        default: p(() => [
+          f(r(e.step.title), 1)
         ]),
         _: 1
-      }, 8, ["class"])) : n("", !0),
-      c(d),
-      e.step?.content ? (t(), o("p", p, a(e.step.content), 1)) : n("", !0)
+      }, 8, ["class"])) : l("", !0),
+      u(C),
+      e.step?.content ? (o(), a("p", y, r(e.step.content), 1)) : l("", !0)
     ]));
   }
 };
 export {
-  C as default
+  M as default
 };

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

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

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

@@ -1,29 +1,35 @@
-import { computed as s, createElementBlock as p, openBlock as u, createVNode as i, unref as n } from "vue";
-import { useTour as c } from "./useTour.js";
+import { computed as a, createElementBlock as u, openBlock as c, normalizeClass as m, unref as s, createVNode as o } from "vue";
+import { useTour as d } from "./useTour.js";
 import l from "../../components/elements/UluButton.vue.js";
-const d = { class: "tour-pager layout-flex-justified" }, y = {
+const y = {
   __name: "UluTourPager",
-  setup(m) {
-    const { api: r, state: e } = c(), o = s(() => e.active && e.stepIndex === e.active.steps.length - 1);
-    return s(() => e.active && e.stepIndex === 0), (x, t) => (u(), p("div", d, [
-      i(l, {
-        onClick: t[0] || (t[0] = (a) => n(r).prev()),
+  setup(v) {
+    const { api: n, state: e } = d(), i = a(() => e.active?.steps[e.stepIndex]), r = a(() => e.active && e.stepIndex === e.active.steps.length - 1);
+    return (x, t) => (c(), u("div", {
+      class: m([
+        "tour-pager layout-flex-justified",
+        s(e).active?.pagerClass,
+        i.value?.pagerClass
+      ])
+    }, [
+      o(l, {
+        onClick: t[0] || (t[0] = (p) => s(n).prev()),
         text: "Previous",
-        disabled: n(e).stepIndex === 0,
+        disabled: s(e).stepIndex === 0,
         icon: "type:previous",
         iconBefore: "",
         small: "",
         secondary: "",
         transparent: ""
       }, null, 8, ["disabled"]),
-      i(l, {
+      o(l, {
         primary: "",
-        icon: o.value ? null : "type:next",
-        onClick: t[1] || (t[1] = (a) => n(r).next()),
-        text: o.value ? "Finish" : "Next",
+        icon: r.value ? null : "type:next",
+        onClick: t[1] || (t[1] = (p) => s(n).next()),
+        text: r.value ? "Finish" : "Next",
         small: ""
       }, null, 8, ["icon", "text"])
-    ]));
+    ], 2));
   }
 };
 export {

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

@@ -8,6 +8,14 @@ export type TourStep = {
      * - The title text for the step.
      */
     title?: string | undefined;
+    /**
+     * - Class to apply to the title.
+     */
+    titleClass?: string | Object | any[] | undefined;
+    /**
+     * - Class to apply to the pager footer.
+     */
+    pagerClass?: string | Object | any[] | undefined;
     /**
      * - The content text for the step.
      */

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

package/dist/plugins/tour/api.js

@@ -7,6 +7,9 @@ const o = (e) => ({
    * @param {String} [tour.name] - Optional name for the tour
    * @param {Object} [tour.modalProps] - Global props applied to all modal steps in this tour (can be overridden by step)
    * @param {Object} [tour.popoverProps] - Global props applied to all popover steps in this tour (can be overridden by step)
+   * @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.
    */
   async start(n) {
     n?.steps?.length && (await this._runHooks(n.steps[0]), e.active = t(n), e.stepIndex = 0);

package/lib/plugins/tour/UluTourContent.vue

@@ -3,8 +3,7 @@
     <component 
       v-if="step?.title"
       :is="isModal ? 'h2' : 'strong'" 
-      :class="isModal ? 'h3' : 'h4'" 
-      class="display-block no-margin"
+      :class="resolvedTitleClass"
     >
       {{ step.title }}
     </component>
@@ -16,9 +15,13 @@
 </template>
 
 <script setup>
+  import { computed } from "vue";
   import UluRule from "../../components/elements/UluRule.vue";
+  import { useTour } from "./useTour.js";
 
-  defineProps({
+  const { state: tourState } = useTour();
+
+  const props = defineProps({
     /**
      * The tour step configuration object
      */
@@ -34,4 +37,14 @@
       default: false
     }
   });
+
+  const resolvedTitleClass = computed(() => {
+    if (props.step.titleClass) return props.step.titleClass;
+    
+    if (props.isModal) {
+      return tourState.active?.modalTitleClass || ['h3', 'no-margin'];
+    } else {
+      return tourState.active?.popoverTitleClass || ['h4', 'display-block', 'no-margin'];
+    }
+  });
 </script>

package/lib/plugins/tour/UluTourPager.vue

@@ -1,5 +1,9 @@
 <template>
-  <div class="tour-pager layout-flex-justified">
+  <div :class="[
+    'tour-pager layout-flex-justified', 
+    state.active?.pagerClass,
+    currentStep?.pagerClass
+  ]">
     <UluButton 
       @click="api.prev()"
       text="Previous"
@@ -27,10 +31,9 @@
 
   const { api, state } = useTour();
 
+  const currentStep = computed(() => state.active?.steps[state.stepIndex]);
+
   const isLastStep = computed(() => {
     return state.active && state.stepIndex === state.active.steps.length - 1;
   });
-  const isFirstStep = computed(() => {
-    return state.active && state.stepIndex === 0;
-  });
 </script>

package/lib/plugins/tour/api.js

@@ -4,6 +4,8 @@ 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} [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} [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.
@@ -29,6 +31,9 @@ export const createApi = (state) => ({
    * @param {String} [tour.name] - Optional name for the tour
    * @param {Object} [tour.modalProps] - Global props applied to all modal steps in this tour (can be overridden by step)
    * @param {Object} [tour.popoverProps] - Global props applied to all popover steps in this tour (can be overridden by step)
+   * @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.
    */
   async start(tour) {
     if (!tour?.steps?.length) return;

package/package.json

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