vue3-step-wizard 0.5.5 → 0.5.7

package/README.md

@@ -8,6 +8,12 @@ A Vue 3 + TypeScript wizard component.
 npm install vue3-step-wizard
 ```
 
+Then import the stylesheet once in your app entry:
+
+```ts
+import "vue3-step-wizard/wizard-style.css";
+```
+
 ## Usage
 
 ```vue
@@ -22,7 +28,16 @@ import StepFinish from "./steps/StepFinish.vue";
 
 const steps: WizardStep[] = [
   { name: "domain", title: "Domain", component: StepDomain },
-  { name: "business", title: "Business info", component: StepBusiness },
+  {
+    name: "business",
+    title: "Business info",
+    component: StepBusiness,
+    backVisible: true,
+    nextVisible: true,
+    nextDisabled: false,
+    backDisabled: false,
+    stepViewItemClickable: true,
+  },
   { name: "finish", title: "Finish", component: StepFinish },
 ];
 
@@ -78,6 +93,18 @@ Wizard emits:
 - `step-changed` with `{ from, to }` step names.
 - `custom-event` forwarded from the active step component.
 
+Each step can optionally control the wizard buttons when `show-controls` is true:
+
+- `nextVisible` (boolean, default `true`)
+- `nextDisabled` (boolean, default `false`)
+- `backVisible` (boolean, default `currentStep > 0`)
+- `backDisabled` (boolean, default `false`)
+
+Each step can also control whether it is clickable in the left step list when
+`allow-step-click` is true:
+
+- `stepViewItemClickable` (boolean, default `true`)
+
 Example step component:
 
 ```vue

package/dist/vue3-step-wizard.es.js

@@ -1,11 +1,11 @@
-import { defineComponent as D, ref as y, watch as b, computed as w, createElementBlock as i, openBlock as l, createElementVNode as c, createCommentVNode as f, toDisplayString as S, Fragment as F, renderList as I, normalizeClass as L, createBlock as M, resolveDynamicComponent as W, mergeProps as H } from "vue";
-const P = { class: "__wizard-page" }, $ = { class: "__wizard" }, j = {
+import { defineComponent as W, ref as g, watch as y, computed as c, createElementBlock as u, openBlock as o, createElementVNode as r, createCommentVNode as _, toDisplayString as k, Fragment as H, renderList as P, normalizeClass as $, createBlock as j, resolveDynamicComponent as q, mergeProps as A } from "vue";
+const G = { class: "__wizard-page" }, J = { class: "__wizard" }, K = {
   key: 0,
   class: "__wizard-sidebar"
-}, q = { class: "__eyebrow" }, A = { class: "__step-list" }, G = ["onClick"], J = { class: "__step-index" }, K = { class: "__step-title" }, O = { class: "__wizard-panel" }, Q = {
+}, O = { class: "__eyebrow" }, Q = { class: "__step-list" }, R = ["onClick"], U = { class: "__step-index" }, X = { class: "__step-title" }, Y = { class: "__wizard-panel" }, Z = {
   key: 1,
   class: "__wizard-controls"
-}, ee = /* @__PURE__ */ D({
+}, ee = ["disabled"], te = ["disabled"], ie = /* @__PURE__ */ W({
   __name: "Wizard",
   props: {
     steps: {},
@@ -16,105 +16,120 @@ const P = { class: "__wizard-page" }, $ = { class: "__wizard" }, j = {
     showControls: { type: Boolean, default: !0 }
   },
   emits: ["update:modelValue", "change", "custom-event", "step-changed"],
-  setup(u, { expose: V, emit: z }) {
-    const s = u, p = z, k = (e) => s.steps.length ? Math.max(0, Math.min(e, s.steps.length - 1)) : 0, n = y(k(s.modelValue ?? 0));
-    b(
+  setup(v, { expose: z, emit: B }) {
+    const s = v, m = B, S = (e) => s.steps.length ? Math.max(0, Math.min(e, s.steps.length - 1)) : 0, n = g(S(s.modelValue ?? 0));
+    y(
       () => s.modelValue,
       (e) => {
-        const t = k(e ?? 0);
+        const t = S(e ?? 0);
         t !== n.value && (n.value = t);
       }
     );
-    const _ = w(() => s.steps[n.value]), o = y(new Set(s.hiddenSteps));
-    b(
+    const l = c(() => s.steps[n.value]), i = g(new Set(s.hiddenSteps));
+    y(
       () => s.hiddenSteps,
       (e) => {
-        o.value = new Set(e ?? []), x();
+        i.value = new Set(e ?? []), V();
       }
     );
-    const m = (e) => o.value.has(e), B = w(
-      () => s.steps.map((e, t) => ({ step: e, index: t })).filter(({ step: e }) => !m(e.name))
-    ), r = (e) => {
-      var h, d;
-      const t = k(e);
+    const h = (e) => i.value.has(e), D = c(
+      () => s.steps.map((e, t) => ({ step: e, index: t })).filter(({ step: e }) => !h(e.name))
+    ), d = (e) => {
+      var f, p;
+      const t = S(e);
       if (t === n.value)
         return;
-      const a = ((h = s.steps[n.value]) == null ? void 0 : h.name) ?? null, v = (d = s.steps[t]) == null ? void 0 : d.name;
-      n.value = t, p("update:modelValue", t), p("change", t), v && p("step-changed", { from: a, to: v });
-    }, N = w(() => n.value >= s.steps.length - 1), C = () => {
-      n.value >= s.steps.length - 1 || r(n.value + 1);
-    }, g = () => {
-      n.value <= 0 || r(n.value - 1);
-    }, E = (e) => {
-      p("custom-event", e);
-    }, T = (e) => {
-      s.allowStepClick && (s.steps[e], r(e));
+      const a = ((f = s.steps[n.value]) == null ? void 0 : f.name) ?? null, b = (p = s.steps[t]) == null ? void 0 : p.name;
+      n.value = t, m("update:modelValue", t), m("change", t), b && m("step-changed", { from: a, to: b });
+    }, N = c(() => n.value >= s.steps.length - 1), E = c(() => {
+      const e = l.value;
+      return !e || e.backVisible === void 0 ? n.value > 0 : e.backVisible;
+    }), T = c(() => {
+      const e = l.value;
+      return (e == null ? void 0 : e.backDisabled) ?? !1;
+    }), I = c(() => {
+      const e = l.value;
+      return !e || e.nextVisible === void 0 ? !0 : e.nextVisible;
+    }), F = c(() => {
+      const e = l.value;
+      return (e == null ? void 0 : e.nextDisabled) ?? !1;
+    }), w = () => {
+      n.value >= s.steps.length - 1 || d(n.value + 1);
     }, x = () => {
+      n.value <= 0 || d(n.value - 1);
+    }, L = (e) => {
+      m("custom-event", e);
+    }, C = (e) => s.allowStepClick && (e.stepViewItemClickable ?? !0), M = (e, t) => {
+      C(t) && d(e);
+    }, V = () => {
       const e = s.steps[n.value];
-      if (e && !m(e.name))
+      if (e && !h(e.name))
         return;
-      const t = s.steps.findIndex((a) => !m(a.name));
-      t >= 0 && r(t);
+      const t = s.steps.findIndex((a) => !h(a.name));
+      t >= 0 && d(t);
     };
-    return V({
+    return z({
       moveTo: (e) => {
         const t = s.steps.findIndex((a) => a.name === e);
-        t !== -1 && (m(e) || r(t));
+        t !== -1 && (h(e) || d(t));
       },
       hideStep: (e) => {
-        o.value = new Set(o.value).add(e), x();
+        i.value = new Set(i.value).add(e), V();
       },
       showStep: (e) => {
-        if (!o.value.has(e))
+        if (!i.value.has(e))
           return;
-        const t = new Set(o.value);
-        t.delete(e), o.value = t;
+        const t = new Set(i.value);
+        t.delete(e), i.value = t;
       }
-    }), (e, t) => (l(), i("main", P, [
-      c("section", $, [
-        u.steps.length ? (l(), i("aside", j, [
-          c("p", q, S(u.sidebarTitle), 1),
-          c("div", A, [
-            (l(!0), i(F, null, I(B.value, ({ step: a, index: v }, h) => {
-              var d;
-              return l(), i("div", {
+    }), (e, t) => (o(), u("main", G, [
+      r("section", J, [
+        v.steps.length ? (o(), u("aside", K, [
+          r("p", O, k(v.sidebarTitle), 1),
+          r("div", Q, [
+            (o(!0), u(H, null, P(D.value, ({ step: a, index: b }, f) => {
+              var p;
+              return o(), u("div", {
                 key: a.name,
-                class: L(["__step-item", {
-                  __active: a.name === ((d = _.value) == null ? void 0 : d.name),
-                  __clickable: u.allowStepClick
+                class: $(["__step-item", {
+                  __active: a.name === ((p = l.value) == null ? void 0 : p.name),
+                  __clickable: C(a)
                 }]),
-                onClick: (Y) => T(v)
+                onClick: (le) => M(b, a)
               }, [
-                c("span", J, S(h + 1), 1),
-                c("span", K, S(a.title), 1)
-              ], 10, G);
+                r("span", U, k(f + 1), 1),
+                r("span", X, k(a.title), 1)
+              ], 10, R);
             }), 128))
           ])
-        ])) : f("", !0),
-        c("div", O, [
-          _.value ? (l(), M(W(_.value.component), H({ key: 0 }, _.value.props, {
-            onNext: C,
-            onBack: g,
-            onCustomEvent: E
-          }), null, 16)) : f("", !0),
-          u.showControls ? (l(), i("div", Q, [
-            n.value > 0 ? (l(), i("button", {
+        ])) : _("", !0),
+        r("div", Y, [
+          l.value ? (o(), j(q(l.value.component), A({ key: 0 }, l.value.props, {
+            onNext: w,
+            onBack: x,
+            onCustomEvent: L
+          }), null, 16)) : _("", !0),
+          v.showControls ? (o(), u("div", Z, [
+            E.value ? (o(), u("button", {
               key: 0,
               class: "__cta __ghost",
               type: "button",
-              onClick: g
-            }, " Back ")) : f("", !0),
-            c("button", {
+              disabled: T.value,
+              onClick: x
+            }, " Back ", 8, ee)) : _("", !0),
+            I.value ? (o(), u("button", {
+              key: 1,
               class: "__cta __primary",
               type: "button",
-              onClick: C
-            }, S(N.value ? "Finish" : "Next"), 1)
-          ])) : f("", !0)
+              disabled: F.value,
+              onClick: w
+            }, k(N.value ? "Finish" : "Next"), 9, te)) : _("", !0)
+          ])) : _("", !0)
         ])
       ])
     ]));
   }
 });
 export {
-  ee as Wizard
+  ie as Wizard
 };

package/dist/vue3-step-wizard.umd.cjs

@@ -1 +1 @@
-(function(l,e){typeof exports=="object"&&typeof module<"u"?e(exports,require("vue")):typeof define=="function"&&define.amd?define(["exports","vue"],e):(l=typeof globalThis<"u"?globalThis:l||self,e(l.Vue3StepWizard={},l.Vue))})(this,function(l,e){"use strict";const g={class:"__wizard-page"},w={class:"__wizard"},y={key:0,class:"__wizard-sidebar"},C={class:"__eyebrow"},B={class:"__step-list"},E=["onClick"],b={class:"__step-index"},x={class:"__step-title"},N={class:"__wizard-panel"},z={key:1,class:"__wizard-controls"},T=e.defineComponent({__name:"Wizard",props:{steps:{},modelValue:{default:0},sidebarTitle:{default:"Setup steps"},allowStepClick:{type:Boolean,default:!0},hiddenSteps:{default:()=>[]},showControls:{type:Boolean,default:!0}},emits:["update:modelValue","change","custom-event","step-changed"],setup(i,{expose:D,emit:v}){const o=i,p=v,f=t=>o.steps.length?Math.max(0,Math.min(t,o.steps.length-1)):0,s=e.ref(f(o.modelValue??0));e.watch(()=>o.modelValue,t=>{const n=f(t??0);n!==s.value&&(s.value=n)});const m=e.computed(()=>o.steps[s.value]),c=e.ref(new Set(o.hiddenSteps));e.watch(()=>o.hiddenSteps,t=>{c.value=new Set(t??[]),V()});const u=t=>c.value.has(t),M=e.computed(()=>o.steps.map((t,n)=>({step:t,index:n})).filter(({step:t})=>!u(t.name))),r=t=>{var h,d;const n=f(t);if(n===s.value)return;const a=((h=o.steps[s.value])==null?void 0:h.name)??null,_=(d=o.steps[n])==null?void 0:d.name;s.value=n,p("update:modelValue",n),p("change",n),_&&p("step-changed",{from:a,to:_})},W=e.computed(()=>s.value>=o.steps.length-1),S=()=>{s.value>=o.steps.length-1||r(s.value+1)},k=()=>{s.value<=0||r(s.value-1)},j=t=>{p("custom-event",t)},F=t=>{o.allowStepClick&&(o.steps[t],r(t))},V=()=>{const t=o.steps[s.value];if(t&&!u(t.name))return;const n=o.steps.findIndex(a=>!u(a.name));n>=0&&r(n)};return D({moveTo:t=>{const n=o.steps.findIndex(a=>a.name===t);n!==-1&&(u(t)||r(n))},hideStep:t=>{c.value=new Set(c.value).add(t),V()},showStep:t=>{if(!c.value.has(t))return;const n=new Set(c.value);n.delete(t),c.value=n}}),(t,n)=>(e.openBlock(),e.createElementBlock("main",g,[e.createElementVNode("section",w,[i.steps.length?(e.openBlock(),e.createElementBlock("aside",y,[e.createElementVNode("p",C,e.toDisplayString(i.sidebarTitle),1),e.createElementVNode("div",B,[(e.openBlock(!0),e.createElementBlock(e.Fragment,null,e.renderList(M.value,({step:a,index:_},h)=>{var d;return e.openBlock(),e.createElementBlock("div",{key:a.name,class:e.normalizeClass(["__step-item",{__active:a.name===((d=m.value)==null?void 0:d.name),__clickable:i.allowStepClick}]),onClick:q=>F(_)},[e.createElementVNode("span",b,e.toDisplayString(h+1),1),e.createElementVNode("span",x,e.toDisplayString(a.title),1)],10,E)}),128))])])):e.createCommentVNode("",!0),e.createElementVNode("div",N,[m.value?(e.openBlock(),e.createBlock(e.resolveDynamicComponent(m.value.component),e.mergeProps({key:0},m.value.props,{onNext:S,onBack:k,onCustomEvent:j}),null,16)):e.createCommentVNode("",!0),i.showControls?(e.openBlock(),e.createElementBlock("div",z,[s.value>0?(e.openBlock(),e.createElementBlock("button",{key:0,class:"__cta __ghost",type:"button",onClick:k}," Back ")):e.createCommentVNode("",!0),e.createElementVNode("button",{class:"__cta __primary",type:"button",onClick:S},e.toDisplayString(W.value?"Finish":"Next"),1)])):e.createCommentVNode("",!0)])])]))}});l.Wizard=T,Object.defineProperty(l,Symbol.toStringTag,{value:"Module"})});
+(function(c,e){typeof exports=="object"&&typeof module<"u"?e(exports,require("vue")):typeof define=="function"&&define.amd?define(["exports","vue"],e):(c=typeof globalThis<"u"?globalThis:c||self,e(c.Vue3StepWizard={},c.Vue))})(this,function(c,e){"use strict";const C={class:"__wizard-page"},y={class:"__wizard"},B={key:0,class:"__wizard-sidebar"},g={class:"__eyebrow"},w={class:"__step-list"},x=["onClick"],E={class:"__step-index"},N={class:"__step-title"},z={class:"__wizard-panel"},D={key:1,class:"__wizard-controls"},v=["disabled"],T=["disabled"],I=e.defineComponent({__name:"Wizard",props:{steps:{},modelValue:{default:0},sidebarTitle:{default:"Setup steps"},allowStepClick:{type:Boolean,default:!0},hiddenSteps:{default:()=>[]},showControls:{type:Boolean,default:!0}},emits:["update:modelValue","change","custom-event","step-changed"],setup(p,{expose:M,emit:W}){const s=p,m=W,h=t=>s.steps.length?Math.max(0,Math.min(t,s.steps.length-1)):0,o=e.ref(h(s.modelValue??0));e.watch(()=>s.modelValue,t=>{const n=h(t??0);n!==o.value&&(o.value=n)});const l=e.computed(()=>s.steps[o.value]),i=e.ref(new Set(s.hiddenSteps));e.watch(()=>s.hiddenSteps,t=>{i.value=new Set(t??[]),V()});const u=t=>i.value.has(t),j=e.computed(()=>s.steps.map((t,n)=>({step:t,index:n})).filter(({step:t})=>!u(t.name))),r=t=>{var f,d;const n=h(t);if(n===o.value)return;const a=((f=s.steps[o.value])==null?void 0:f.name)??null,_=(d=s.steps[n])==null?void 0:d.name;o.value=n,m("update:modelValue",n),m("change",n),_&&m("step-changed",{from:a,to:_})},F=e.computed(()=>o.value>=s.steps.length-1),L=e.computed(()=>{const t=l.value;return!t||t.backVisible===void 0?o.value>0:t.backVisible}),P=e.computed(()=>{const t=l.value;return(t==null?void 0:t.backDisabled)??!1}),q=e.computed(()=>{const t=l.value;return!t||t.nextVisible===void 0?!0:t.nextVisible}),H=e.computed(()=>{const t=l.value;return(t==null?void 0:t.nextDisabled)??!1}),k=()=>{o.value>=s.steps.length-1||r(o.value+1)},b=()=>{o.value<=0||r(o.value-1)},O=t=>{m("custom-event",t)},S=t=>s.allowStepClick&&(t.stepViewItemClickable??!0),$=(t,n)=>{S(n)&&r(t)},V=()=>{const t=s.steps[o.value];if(t&&!u(t.name))return;const n=s.steps.findIndex(a=>!u(a.name));n>=0&&r(n)};return M({moveTo:t=>{const n=s.steps.findIndex(a=>a.name===t);n!==-1&&(u(t)||r(n))},hideStep:t=>{i.value=new Set(i.value).add(t),V()},showStep:t=>{if(!i.value.has(t))return;const n=new Set(i.value);n.delete(t),i.value=n}}),(t,n)=>(e.openBlock(),e.createElementBlock("main",C,[e.createElementVNode("section",y,[p.steps.length?(e.openBlock(),e.createElementBlock("aside",B,[e.createElementVNode("p",g,e.toDisplayString(p.sidebarTitle),1),e.createElementVNode("div",w,[(e.openBlock(!0),e.createElementBlock(e.Fragment,null,e.renderList(j.value,({step:a,index:_},f)=>{var d;return e.openBlock(),e.createElementBlock("div",{key:a.name,class:e.normalizeClass(["__step-item",{__active:a.name===((d=l.value)==null?void 0:d.name),__clickable:S(a)}]),onClick:K=>$(_,a)},[e.createElementVNode("span",E,e.toDisplayString(f+1),1),e.createElementVNode("span",N,e.toDisplayString(a.title),1)],10,x)}),128))])])):e.createCommentVNode("",!0),e.createElementVNode("div",z,[l.value?(e.openBlock(),e.createBlock(e.resolveDynamicComponent(l.value.component),e.mergeProps({key:0},l.value.props,{onNext:k,onBack:b,onCustomEvent:O}),null,16)):e.createCommentVNode("",!0),p.showControls?(e.openBlock(),e.createElementBlock("div",D,[L.value?(e.openBlock(),e.createElementBlock("button",{key:0,class:"__cta __ghost",type:"button",disabled:P.value,onClick:b}," Back ",8,v)):e.createCommentVNode("",!0),q.value?(e.openBlock(),e.createElementBlock("button",{key:1,class:"__cta __primary",type:"button",disabled:H.value,onClick:k},e.toDisplayString(F.value?"Finish":"Next"),9,T)):e.createCommentVNode("",!0)])):e.createCommentVNode("",!0)])])]))}});c.Wizard=I,Object.defineProperty(c,Symbol.toStringTag,{value:"Module"})});

package/index.d.ts

@@ -5,6 +5,11 @@ export type WizardStep = {
   title: string;
   component: Component;
   props?: Record<string, unknown>;
+  nextVisible?: boolean;
+  nextDisabled?: boolean;
+  backVisible?: boolean;
+  backDisabled?: boolean;
+  stepViewItemClickable?: boolean;
 };
 
 export type WizardExpose = {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "vue3-step-wizard",
-  "version": "0.5.5",
+  "version": "0.5.7",
   "type": "module",
   "description": "A Vue 3 step-wizard component, with no dependencies",
   "main": "./dist/vue3-step-wizard.umd.cjs",