vue3-step-wizard 0.5.2 → 0.5.3
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 +25 -22
- package/package.json +1 -1
package/README.md
CHANGED
|
@@ -12,42 +12,42 @@ npm install vue3-step-wizard
|
|
|
12
12
|
|
|
13
13
|
```vue
|
|
14
14
|
<script setup lang="ts">
|
|
15
|
-
import { ref } from
|
|
16
|
-
import { Wizard, type WizardStep, type WizardExpose } from
|
|
17
|
-
import
|
|
15
|
+
import { ref } from "vue";
|
|
16
|
+
import { Wizard, type WizardStep, type WizardExpose } from "vue3-step-wizard";
|
|
17
|
+
import "vue3-step-wizard/wizard-style.css";
|
|
18
18
|
|
|
19
|
-
import StepDomain from
|
|
20
|
-
import StepBusiness from
|
|
21
|
-
import StepFinish from
|
|
19
|
+
import StepDomain from "./steps/StepDomain.vue";
|
|
20
|
+
import StepBusiness from "./steps/StepBusiness.vue";
|
|
21
|
+
import StepFinish from "./steps/StepFinish.vue";
|
|
22
22
|
|
|
23
23
|
const steps: WizardStep[] = [
|
|
24
|
-
{ name:
|
|
25
|
-
{ name:
|
|
26
|
-
{ name:
|
|
24
|
+
{ name: "domain", title: "Domain", component: StepDomain },
|
|
25
|
+
{ name: "business", title: "Business info", component: StepBusiness },
|
|
26
|
+
{ name: "finish", title: "Finish", component: StepFinish },
|
|
27
27
|
];
|
|
28
28
|
|
|
29
29
|
const current = ref(0);
|
|
30
30
|
|
|
31
31
|
const handleCustomEvent = (payload?: unknown) => {
|
|
32
|
-
console.log(
|
|
32
|
+
console.log("Custom event payload", payload);
|
|
33
33
|
};
|
|
34
34
|
|
|
35
35
|
const handleStepChanged = (payload: { from: string | null; to: string }) => {
|
|
36
|
-
console.log(
|
|
36
|
+
console.log("Step changed", payload);
|
|
37
37
|
};
|
|
38
38
|
|
|
39
39
|
const wizardRef = ref<WizardExpose | null>(null);
|
|
40
40
|
|
|
41
41
|
const goToFinish = () => {
|
|
42
|
-
wizardRef.value?.moveTo(
|
|
42
|
+
wizardRef.value?.moveTo("finish");
|
|
43
43
|
};
|
|
44
44
|
|
|
45
45
|
const hideBusiness = () => {
|
|
46
|
-
wizardRef.value?.hideStep(
|
|
46
|
+
wizardRef.value?.hideStep("business");
|
|
47
47
|
};
|
|
48
48
|
|
|
49
49
|
const showBusiness = () => {
|
|
50
|
-
wizardRef.value?.showStep(
|
|
50
|
+
wizardRef.value?.showStep("business");
|
|
51
51
|
};
|
|
52
52
|
</script>
|
|
53
53
|
|
|
@@ -68,13 +68,13 @@ Each step component should emit `next` and `back` to move through the wizard.
|
|
|
68
68
|
If you use `custom-event`, include the step name in the payload so the parent can identify the source.
|
|
69
69
|
|
|
70
70
|
Wizard instance methods (via `ref`) let you move or toggle steps at runtime:
|
|
71
|
+
|
|
71
72
|
- `moveTo(stepName)`
|
|
72
73
|
- `hideStep(stepName)`
|
|
73
74
|
- `showStep(stepName)`
|
|
74
75
|
|
|
75
|
-
You can also pass `hidden-steps` to control visibility by step name.
|
|
76
|
-
|
|
77
76
|
Wizard emits:
|
|
77
|
+
|
|
78
78
|
- `step-changed` with `{ from, to }` step names.
|
|
79
79
|
- `custom-event` forwarded from the active step component.
|
|
80
80
|
|
|
@@ -83,9 +83,9 @@ Example step component:
|
|
|
83
83
|
```vue
|
|
84
84
|
<script setup lang="ts">
|
|
85
85
|
const emit = defineEmits<{
|
|
86
|
-
(event:
|
|
87
|
-
(event:
|
|
88
|
-
(event:
|
|
86
|
+
(event: "next"): void;
|
|
87
|
+
(event: "back"): void;
|
|
88
|
+
(event: "custom-event", payload?: unknown): void;
|
|
89
89
|
}>();
|
|
90
90
|
</script>
|
|
91
91
|
|
|
@@ -93,7 +93,10 @@ const emit = defineEmits<{
|
|
|
93
93
|
<div>
|
|
94
94
|
<button type="button" @click="emit('back')">Back</button>
|
|
95
95
|
<button type="button" @click="emit('next')">Next</button>
|
|
96
|
-
<button
|
|
96
|
+
<button
|
|
97
|
+
type="button"
|
|
98
|
+
@click="emit('custom-event', { step: 'domain', source: 'step-domain' })"
|
|
99
|
+
>
|
|
97
100
|
Fire custom event
|
|
98
101
|
</button>
|
|
99
102
|
</div>
|
|
@@ -124,10 +127,10 @@ To override fonts, set them on the relevant classes in your app stylesheet:
|
|
|
124
127
|
|
|
125
128
|
```css
|
|
126
129
|
.__wizard-panel h1 {
|
|
127
|
-
font-family:
|
|
130
|
+
font-family: "Your Display Font", sans-serif;
|
|
128
131
|
}
|
|
129
132
|
|
|
130
133
|
.__wizard-page {
|
|
131
|
-
font-family:
|
|
134
|
+
font-family: "Your UI Font", sans-serif;
|
|
132
135
|
}
|
|
133
136
|
```
|