vue3-step-wizard 0.5.6 → 0.5.7
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/README.md +6 -0
- package/dist/vue3-step-wizard.es.js +54 -54
- package/dist/vue3-step-wizard.umd.cjs +1 -1
- package/index.d.ts +5 -0
- package/package.json +1 -1
package/README.md
CHANGED
|
@@ -36,6 +36,7 @@ const steps: WizardStep[] = [
|
|
|
36
36
|
nextVisible: true,
|
|
37
37
|
nextDisabled: false,
|
|
38
38
|
backDisabled: false,
|
|
39
|
+
stepViewItemClickable: true,
|
|
39
40
|
},
|
|
40
41
|
{ name: "finish", title: "Finish", component: StepFinish },
|
|
41
42
|
];
|
|
@@ -99,6 +100,11 @@ Each step can optionally control the wizard buttons when `show-controls` is true
|
|
|
99
100
|
- `backVisible` (boolean, default `currentStep > 0`)
|
|
100
101
|
- `backDisabled` (boolean, default `false`)
|
|
101
102
|
|
|
103
|
+
Each step can also control whether it is clickable in the left step list when
|
|
104
|
+
`allow-step-click` is true:
|
|
105
|
+
|
|
106
|
+
- `stepViewItemClickable` (boolean, default `true`)
|
|
107
|
+
|
|
102
108
|
Example step component:
|
|
103
109
|
|
|
104
110
|
```vue
|
|
@@ -1,11 +1,11 @@
|
|
|
1
|
-
import { defineComponent as
|
|
2
|
-
const
|
|
1
|
+
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";
|
|
2
|
+
const G = { class: "__wizard-page" }, J = { class: "__wizard" }, K = {
|
|
3
3
|
key: 0,
|
|
4
4
|
class: "__wizard-sidebar"
|
|
5
|
-
},
|
|
5
|
+
}, O = { class: "__eyebrow" }, Q = { class: "__step-list" }, R = ["onClick"], U = { class: "__step-index" }, X = { class: "__step-title" }, Y = { class: "__wizard-panel" }, Z = {
|
|
6
6
|
key: 1,
|
|
7
7
|
class: "__wizard-controls"
|
|
8
|
-
},
|
|
8
|
+
}, ee = ["disabled"], te = ["disabled"], ie = /* @__PURE__ */ W({
|
|
9
9
|
__name: "Wizard",
|
|
10
10
|
props: {
|
|
11
11
|
steps: {},
|
|
@@ -16,9 +16,9 @@ const A = { class: "__wizard-page" }, G = { class: "__wizard" }, J = {
|
|
|
16
16
|
showControls: { type: Boolean, default: !0 }
|
|
17
17
|
},
|
|
18
18
|
emits: ["update:modelValue", "change", "custom-event", "step-changed"],
|
|
19
|
-
setup(
|
|
20
|
-
const s =
|
|
21
|
-
|
|
19
|
+
setup(v, { expose: z, emit: B }) {
|
|
20
|
+
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));
|
|
21
|
+
y(
|
|
22
22
|
() => s.modelValue,
|
|
23
23
|
(e) => {
|
|
24
24
|
const t = S(e ?? 0);
|
|
@@ -26,55 +26,55 @@ const A = { class: "__wizard-page" }, G = { class: "__wizard" }, J = {
|
|
|
26
26
|
}
|
|
27
27
|
);
|
|
28
28
|
const l = c(() => s.steps[n.value]), i = g(new Set(s.hiddenSteps));
|
|
29
|
-
|
|
29
|
+
y(
|
|
30
30
|
() => s.hiddenSteps,
|
|
31
31
|
(e) => {
|
|
32
|
-
i.value = new Set(e ?? []),
|
|
32
|
+
i.value = new Set(e ?? []), V();
|
|
33
33
|
}
|
|
34
34
|
);
|
|
35
|
-
const h = (e) => i.value.has(e),
|
|
35
|
+
const h = (e) => i.value.has(e), D = c(
|
|
36
36
|
() => s.steps.map((e, t) => ({ step: e, index: t })).filter(({ step: e }) => !h(e.name))
|
|
37
|
-
),
|
|
38
|
-
var
|
|
37
|
+
), d = (e) => {
|
|
38
|
+
var f, p;
|
|
39
39
|
const t = S(e);
|
|
40
40
|
if (t === n.value)
|
|
41
41
|
return;
|
|
42
|
-
const a = ((
|
|
43
|
-
n.value = t, m("update:modelValue", t), m("change", t),
|
|
44
|
-
},
|
|
42
|
+
const a = ((f = s.steps[n.value]) == null ? void 0 : f.name) ?? null, b = (p = s.steps[t]) == null ? void 0 : p.name;
|
|
43
|
+
n.value = t, m("update:modelValue", t), m("change", t), b && m("step-changed", { from: a, to: b });
|
|
44
|
+
}, N = c(() => n.value >= s.steps.length - 1), E = c(() => {
|
|
45
45
|
const e = l.value;
|
|
46
46
|
return !e || e.backVisible === void 0 ? n.value > 0 : e.backVisible;
|
|
47
|
-
}),
|
|
47
|
+
}), T = c(() => {
|
|
48
48
|
const e = l.value;
|
|
49
49
|
return (e == null ? void 0 : e.backDisabled) ?? !1;
|
|
50
|
-
}),
|
|
50
|
+
}), I = c(() => {
|
|
51
51
|
const e = l.value;
|
|
52
52
|
return !e || e.nextVisible === void 0 ? !0 : e.nextVisible;
|
|
53
53
|
}), F = c(() => {
|
|
54
54
|
const e = l.value;
|
|
55
55
|
return (e == null ? void 0 : e.nextDisabled) ?? !1;
|
|
56
56
|
}), w = () => {
|
|
57
|
-
n.value >= s.steps.length - 1 ||
|
|
57
|
+
n.value >= s.steps.length - 1 || d(n.value + 1);
|
|
58
58
|
}, x = () => {
|
|
59
|
-
n.value <= 0 ||
|
|
60
|
-
}, I = (e) => {
|
|
61
|
-
m("custom-event", e);
|
|
59
|
+
n.value <= 0 || d(n.value - 1);
|
|
62
60
|
}, L = (e) => {
|
|
63
|
-
|
|
64
|
-
}, C = () => {
|
|
61
|
+
m("custom-event", e);
|
|
62
|
+
}, C = (e) => s.allowStepClick && (e.stepViewItemClickable ?? !0), M = (e, t) => {
|
|
63
|
+
C(t) && d(e);
|
|
64
|
+
}, V = () => {
|
|
65
65
|
const e = s.steps[n.value];
|
|
66
66
|
if (e && !h(e.name))
|
|
67
67
|
return;
|
|
68
68
|
const t = s.steps.findIndex((a) => !h(a.name));
|
|
69
|
-
t >= 0 &&
|
|
69
|
+
t >= 0 && d(t);
|
|
70
70
|
};
|
|
71
|
-
return
|
|
71
|
+
return z({
|
|
72
72
|
moveTo: (e) => {
|
|
73
73
|
const t = s.steps.findIndex((a) => a.name === e);
|
|
74
|
-
t !== -1 && (h(e) ||
|
|
74
|
+
t !== -1 && (h(e) || d(t));
|
|
75
75
|
},
|
|
76
76
|
hideStep: (e) => {
|
|
77
|
-
i.value = new Set(i.value).add(e),
|
|
77
|
+
i.value = new Set(i.value).add(e), V();
|
|
78
78
|
},
|
|
79
79
|
showStep: (e) => {
|
|
80
80
|
if (!i.value.has(e))
|
|
@@ -82,54 +82,54 @@ const A = { class: "__wizard-page" }, G = { class: "__wizard" }, J = {
|
|
|
82
82
|
const t = new Set(i.value);
|
|
83
83
|
t.delete(e), i.value = t;
|
|
84
84
|
}
|
|
85
|
-
}), (e, t) => (o(), u("main",
|
|
86
|
-
r("section",
|
|
87
|
-
|
|
88
|
-
r("p",
|
|
89
|
-
r("div",
|
|
90
|
-
(o(!0), u(
|
|
91
|
-
var
|
|
85
|
+
}), (e, t) => (o(), u("main", G, [
|
|
86
|
+
r("section", J, [
|
|
87
|
+
v.steps.length ? (o(), u("aside", K, [
|
|
88
|
+
r("p", O, k(v.sidebarTitle), 1),
|
|
89
|
+
r("div", Q, [
|
|
90
|
+
(o(!0), u(H, null, P(D.value, ({ step: a, index: b }, f) => {
|
|
91
|
+
var p;
|
|
92
92
|
return o(), u("div", {
|
|
93
93
|
key: a.name,
|
|
94
|
-
class:
|
|
95
|
-
__active: a.name === ((
|
|
96
|
-
__clickable:
|
|
94
|
+
class: $(["__step-item", {
|
|
95
|
+
__active: a.name === ((p = l.value) == null ? void 0 : p.name),
|
|
96
|
+
__clickable: C(a)
|
|
97
97
|
}]),
|
|
98
|
-
onClick: (
|
|
98
|
+
onClick: (le) => M(b, a)
|
|
99
99
|
}, [
|
|
100
|
-
r("span",
|
|
101
|
-
r("span",
|
|
102
|
-
], 10,
|
|
100
|
+
r("span", U, k(f + 1), 1),
|
|
101
|
+
r("span", X, k(a.title), 1)
|
|
102
|
+
], 10, R);
|
|
103
103
|
}), 128))
|
|
104
104
|
])
|
|
105
|
-
])) :
|
|
106
|
-
r("div",
|
|
107
|
-
l.value ? (o(),
|
|
105
|
+
])) : _("", !0),
|
|
106
|
+
r("div", Y, [
|
|
107
|
+
l.value ? (o(), j(q(l.value.component), A({ key: 0 }, l.value.props, {
|
|
108
108
|
onNext: w,
|
|
109
109
|
onBack: x,
|
|
110
|
-
onCustomEvent:
|
|
111
|
-
}), null, 16)) :
|
|
112
|
-
|
|
113
|
-
|
|
110
|
+
onCustomEvent: L
|
|
111
|
+
}), null, 16)) : _("", !0),
|
|
112
|
+
v.showControls ? (o(), u("div", Z, [
|
|
113
|
+
E.value ? (o(), u("button", {
|
|
114
114
|
key: 0,
|
|
115
115
|
class: "__cta __ghost",
|
|
116
116
|
type: "button",
|
|
117
|
-
disabled:
|
|
117
|
+
disabled: T.value,
|
|
118
118
|
onClick: x
|
|
119
|
-
}, " Back ", 8,
|
|
120
|
-
|
|
119
|
+
}, " Back ", 8, ee)) : _("", !0),
|
|
120
|
+
I.value ? (o(), u("button", {
|
|
121
121
|
key: 1,
|
|
122
122
|
class: "__cta __primary",
|
|
123
123
|
type: "button",
|
|
124
124
|
disabled: F.value,
|
|
125
125
|
onClick: w
|
|
126
|
-
}, k(
|
|
127
|
-
])) :
|
|
126
|
+
}, k(N.value ? "Finish" : "Next"), 9, te)) : _("", !0)
|
|
127
|
+
])) : _("", !0)
|
|
128
128
|
])
|
|
129
129
|
])
|
|
130
130
|
]));
|
|
131
131
|
}
|
|
132
132
|
});
|
|
133
133
|
export {
|
|
134
|
-
|
|
134
|
+
ie as Wizard
|
|
135
135
|
};
|
|
@@ -1 +1 @@
|
|
|
1
|
-
(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
|
|
1
|
+
(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
CHANGED
|
@@ -5,6 +5,11 @@ export type WizardStep = {
|
|
|
5
5
|
title: string;
|
|
6
6
|
component: Component;
|
|
7
7
|
props?: Record<string, unknown>;
|
|
8
|
+
nextVisible?: boolean;
|
|
9
|
+
nextDisabled?: boolean;
|
|
10
|
+
backVisible?: boolean;
|
|
11
|
+
backDisabled?: boolean;
|
|
12
|
+
stepViewItemClickable?: boolean;
|
|
8
13
|
};
|
|
9
14
|
|
|
10
15
|
export type WizardExpose = {
|