@daltonr/pathwrite-vue 0.1.3 → 0.1.5
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 +9 -1
- package/dist/index.css +4 -2
- package/dist/index.d.ts +2 -2
- package/dist/index.js +1 -1
- package/dist/index.js.map +1 -1
- package/package.json +6 -3
- package/src/index.ts +285 -0
package/README.md
CHANGED
|
@@ -53,7 +53,7 @@ const currentStep = computed(() => snapshot.value?.stepId ?? null);
|
|
|
53
53
|
| `previous()` | `function` | Go back one step. Cancels the path from the first step. |
|
|
54
54
|
| `cancel()` | `function` | Cancel the active path (or sub-path). |
|
|
55
55
|
| `goToStep(stepId)` | `function` | Jump directly to a step by ID. Calls `onLeave` / `onEnter` but bypasses guards and `shouldSkip`. |
|
|
56
|
-
| `setData(key, value)` | `function` | Update a single data value; triggers re-render via `stateChanged`. |
|
|
56
|
+
| `setData(key, value)` | `function` | Update a single data value; triggers re-render via `stateChanged`. When `TData` is specified, `key` and `value` are type-checked against your data shape. |
|
|
57
57
|
|
|
58
58
|
### Typed snapshot data
|
|
59
59
|
|
|
@@ -74,6 +74,14 @@ snapshot.value?.data.age; // number
|
|
|
74
74
|
|
|
75
75
|
The generic is a **type-level assertion** — it narrows `snapshot.data` for convenience but is not enforced at runtime. Define your data shape once in a `PathDefinition<FormData>` and the types will stay consistent throughout.
|
|
76
76
|
|
|
77
|
+
`setData` is also typed against `TData` — passing a wrong key or mismatched value type is a compile-time error:
|
|
78
|
+
|
|
79
|
+
```ts
|
|
80
|
+
setData("name", 42); // ✗ TS error: number is not assignable to string
|
|
81
|
+
setData("typo", "x"); // ✗ TS error: "typo" is not a key of FormData
|
|
82
|
+
setData("name", "Alice"); // ✓
|
|
83
|
+
```
|
|
84
|
+
|
|
77
85
|
## Design notes
|
|
78
86
|
|
|
79
87
|
- **`shallowRef`** — the snapshot is stored in a `shallowRef` for performance. The engine produces a new snapshot object on every change, so shallow reactivity is sufficient.
|
package/dist/index.css
CHANGED
|
@@ -7,8 +7,10 @@
|
|
|
7
7
|
* theme the shell without overriding selectors.
|
|
8
8
|
*
|
|
9
9
|
* Usage:
|
|
10
|
-
* import "@daltonr/pathwrite-
|
|
11
|
-
*
|
|
10
|
+
* import "@daltonr/pathwrite-react/styles.css"; // React
|
|
11
|
+
* import "@daltonr/pathwrite-vue/styles.css"; // Vue
|
|
12
|
+
* // Angular: add "node_modules/@daltonr/pathwrite-angular/dist/index.css"
|
|
13
|
+
* // to the styles array in angular.json
|
|
12
14
|
*/
|
|
13
15
|
|
|
14
16
|
/* ------------------------------------------------------------------ */
|
package/dist/index.d.ts
CHANGED
|
@@ -19,8 +19,8 @@ export interface UsePathReturn<TData extends PathData = PathData> {
|
|
|
19
19
|
cancel: () => Promise<void>;
|
|
20
20
|
/** Jump directly to a step by ID. Calls onLeave / onEnter but bypasses guards and shouldSkip. */
|
|
21
21
|
goToStep: (stepId: string) => Promise<void>;
|
|
22
|
-
/** Update a single data value; triggers a re-render via stateChanged. */
|
|
23
|
-
setData: (key:
|
|
22
|
+
/** Update a single data value; triggers a re-render via stateChanged. When `TData` is specified, `key` and `value` are type-checked against your data shape. */
|
|
23
|
+
setData: <K extends string & keyof TData>(key: K, value: TData[K]) => Promise<void>;
|
|
24
24
|
}
|
|
25
25
|
export declare function usePath<TData extends PathData = PathData>(options?: UsePathOptions): UsePathReturn<TData>;
|
|
26
26
|
/**
|
package/dist/index.js
CHANGED
|
@@ -23,7 +23,7 @@ export function usePath(options) {
|
|
|
23
23
|
const previous = () => engine.previous();
|
|
24
24
|
const cancel = () => engine.cancel();
|
|
25
25
|
const goToStep = (stepId) => engine.goToStep(stepId);
|
|
26
|
-
const setData = (key, value) => engine.setData(key, value);
|
|
26
|
+
const setData = ((key, value) => engine.setData(key, value));
|
|
27
27
|
return { snapshot, start, startSubPath, next, previous, cancel, goToStep, setData };
|
|
28
28
|
}
|
|
29
29
|
// ---------------------------------------------------------------------------
|
package/dist/index.js.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"index.js","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"AAAA,OAAO,EACL,GAAG,EACH,UAAU,EACV,QAAQ,EACR,cAAc,EACd,eAAe,EACf,CAAC,EAED,SAAS,EACT,OAAO,EACP,MAAM,EAMP,MAAM,KAAK,CAAC;AACb,OAAO,EAGL,UAAU,EAGX,MAAM,yBAAyB,CAAC;AA8BjC,8EAA8E;AAC9E,qBAAqB;AACrB,8EAA8E;AAE9E,MAAM,UAAU,OAAO,CAAoC,OAAwB;IACjF,MAAM,MAAM,GAAG,IAAI,UAAU,EAAE,CAAC;IAChC,MAAM,SAAS,GAAG,UAAU,CAA6B,IAAI,CAAC,CAAC;IAE/D,MAAM,WAAW,GAAG,MAAM,CAAC,SAAS,CAAC,CAAC,KAAgB,EAAE,EAAE;QACxD,IAAI,KAAK,CAAC,IAAI,KAAK,cAAc,IAAI,KAAK,CAAC,IAAI,KAAK,SAAS,EAAE,CAAC;YAC9D,SAAS,CAAC,KAAK,GAAG,KAAK,CAAC,QAA+B,CAAC;QAC1D,CAAC;aAAM,IAAI,KAAK,CAAC,IAAI,KAAK,WAAW,IAAI,KAAK,CAAC,IAAI,KAAK,WAAW,EAAE,CAAC;YACpE,SAAS,CAAC,KAAK,GAAG,IAAI,CAAC;QACzB,CAAC;QACD,OAAO,EAAE,OAAO,EAAE,CAAC,KAAK,CAAC,CAAC;IAC5B,CAAC,CAAC,CAAC;IAEH,cAAc,CAAC,WAAW,CAAC,CAAC;IAE5B,MAAM,QAAQ,GAAG,QAAQ,CAAC,SAAS,CAAkD,CAAC;IAEtF,MAAM,KAAK,GAAG,CAAC,IAAoB,EAAE,cAAwB,EAAE,EAAiB,EAAE,CAChF,MAAM,CAAC,KAAK,CAAC,IAAI,EAAE,WAAW,CAAC,CAAC;IAElC,MAAM,YAAY,GAAG,CAAC,IAAoB,EAAE,cAAwB,EAAE,EAAiB,EAAE,CACvF,MAAM,CAAC,YAAY,CAAC,IAAI,EAAE,WAAW,CAAC,CAAC;IAEzC,MAAM,IAAI,GAAG,GAAkB,EAAE,CAAC,MAAM,CAAC,IAAI,EAAE,CAAC;IAChD,MAAM,QAAQ,GAAG,GAAkB,EAAE,CAAC,MAAM,CAAC,QAAQ,EAAE,CAAC;IACxD,MAAM,MAAM,GAAG,GAAkB,EAAE,CAAC,MAAM,CAAC,MAAM,EAAE,CAAC;IAEpD,MAAM,QAAQ,GAAG,CAAC,MAAc,EAAiB,EAAE,CAAC,MAAM,CAAC,QAAQ,CAAC,MAAM,CAAC,CAAC;IAE5E,MAAM,OAAO,GAAG,CAAC,
|
|
1
|
+
{"version":3,"file":"index.js","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"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"}
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@daltonr/pathwrite-vue",
|
|
3
|
-
"version": "0.1.
|
|
3
|
+
"version": "0.1.5",
|
|
4
4
|
"type": "module",
|
|
5
5
|
"license": "MIT",
|
|
6
6
|
"description": "Vue 3 adapter for @daltonr/pathwrite-core — composables with reactive refs, and optional <PathShell> default UI.",
|
|
@@ -19,7 +19,9 @@
|
|
|
19
19
|
"multi-step",
|
|
20
20
|
"workflow"
|
|
21
21
|
],
|
|
22
|
-
"sideEffects": [
|
|
22
|
+
"sideEffects": [
|
|
23
|
+
"**/*.css"
|
|
24
|
+
],
|
|
23
25
|
"exports": {
|
|
24
26
|
".": {
|
|
25
27
|
"types": "./dist/index.d.ts",
|
|
@@ -31,6 +33,7 @@
|
|
|
31
33
|
"types": "dist/index.d.ts",
|
|
32
34
|
"files": [
|
|
33
35
|
"dist",
|
|
36
|
+
"src",
|
|
34
37
|
"README.md",
|
|
35
38
|
"LICENSE"
|
|
36
39
|
],
|
|
@@ -43,7 +46,7 @@
|
|
|
43
46
|
"vue": ">=3.3.0"
|
|
44
47
|
},
|
|
45
48
|
"dependencies": {
|
|
46
|
-
"@daltonr/pathwrite-core": "^0.1.
|
|
49
|
+
"@daltonr/pathwrite-core": "^0.1.5"
|
|
47
50
|
},
|
|
48
51
|
"devDependencies": {
|
|
49
52
|
"@vue/test-utils": "^2.4.6",
|
package/src/index.ts
ADDED
|
@@ -0,0 +1,285 @@
|
|
|
1
|
+
import {
|
|
2
|
+
ref,
|
|
3
|
+
shallowRef,
|
|
4
|
+
readonly,
|
|
5
|
+
onScopeDispose,
|
|
6
|
+
defineComponent,
|
|
7
|
+
h,
|
|
8
|
+
computed,
|
|
9
|
+
onMounted,
|
|
10
|
+
provide,
|
|
11
|
+
inject,
|
|
12
|
+
type Ref,
|
|
13
|
+
type DeepReadonly,
|
|
14
|
+
type PropType,
|
|
15
|
+
type InjectionKey,
|
|
16
|
+
type VNode
|
|
17
|
+
} from "vue";
|
|
18
|
+
import {
|
|
19
|
+
PathData,
|
|
20
|
+
PathDefinition,
|
|
21
|
+
PathEngine,
|
|
22
|
+
PathEvent,
|
|
23
|
+
PathSnapshot
|
|
24
|
+
} from "@daltonr/pathwrite-core";
|
|
25
|
+
|
|
26
|
+
// ---------------------------------------------------------------------------
|
|
27
|
+
// Types
|
|
28
|
+
// ---------------------------------------------------------------------------
|
|
29
|
+
|
|
30
|
+
export interface UsePathOptions {
|
|
31
|
+
/** Called for every engine event (stateChanged, completed, cancelled, resumed). */
|
|
32
|
+
onEvent?: (event: PathEvent) => void;
|
|
33
|
+
}
|
|
34
|
+
|
|
35
|
+
export interface UsePathReturn<TData extends PathData = PathData> {
|
|
36
|
+
/** Current path snapshot, or `null` when no path is active. Reactive — triggers Vue re-renders on change. */
|
|
37
|
+
snapshot: DeepReadonly<Ref<PathSnapshot<TData> | null>>;
|
|
38
|
+
/** Start (or restart) a path. */
|
|
39
|
+
start: (path: PathDefinition, initialData?: PathData) => Promise<void>;
|
|
40
|
+
/** Push a sub-path onto the stack. Requires an active path. */
|
|
41
|
+
startSubPath: (path: PathDefinition, initialData?: PathData) => Promise<void>;
|
|
42
|
+
/** Advance one step. Completes the path on the last step. */
|
|
43
|
+
next: () => Promise<void>;
|
|
44
|
+
/** Go back one step. Cancels the path from the first step. */
|
|
45
|
+
previous: () => Promise<void>;
|
|
46
|
+
/** Cancel the active path (or sub-path). */
|
|
47
|
+
cancel: () => Promise<void>;
|
|
48
|
+
/** Jump directly to a step by ID. Calls onLeave / onEnter but bypasses guards and shouldSkip. */
|
|
49
|
+
goToStep: (stepId: string) => Promise<void>;
|
|
50
|
+
/** Update a single data value; triggers a re-render via stateChanged. When `TData` is specified, `key` and `value` are type-checked against your data shape. */
|
|
51
|
+
setData: <K extends string & keyof TData>(key: K, value: TData[K]) => Promise<void>;
|
|
52
|
+
}
|
|
53
|
+
|
|
54
|
+
// ---------------------------------------------------------------------------
|
|
55
|
+
// usePath composable
|
|
56
|
+
// ---------------------------------------------------------------------------
|
|
57
|
+
|
|
58
|
+
export function usePath<TData extends PathData = PathData>(options?: UsePathOptions): UsePathReturn<TData> {
|
|
59
|
+
const engine = new PathEngine();
|
|
60
|
+
const _snapshot = shallowRef<PathSnapshot<TData> | null>(null);
|
|
61
|
+
|
|
62
|
+
const unsubscribe = engine.subscribe((event: PathEvent) => {
|
|
63
|
+
if (event.type === "stateChanged" || event.type === "resumed") {
|
|
64
|
+
_snapshot.value = event.snapshot as PathSnapshot<TData>;
|
|
65
|
+
} else if (event.type === "completed" || event.type === "cancelled") {
|
|
66
|
+
_snapshot.value = null;
|
|
67
|
+
}
|
|
68
|
+
options?.onEvent?.(event);
|
|
69
|
+
});
|
|
70
|
+
|
|
71
|
+
onScopeDispose(unsubscribe);
|
|
72
|
+
|
|
73
|
+
const snapshot = readonly(_snapshot) as DeepReadonly<Ref<PathSnapshot<TData> | null>>;
|
|
74
|
+
|
|
75
|
+
const start = (path: PathDefinition, initialData: PathData = {}): Promise<void> =>
|
|
76
|
+
engine.start(path, initialData);
|
|
77
|
+
|
|
78
|
+
const startSubPath = (path: PathDefinition, initialData: PathData = {}): Promise<void> =>
|
|
79
|
+
engine.startSubPath(path, initialData);
|
|
80
|
+
|
|
81
|
+
const next = (): Promise<void> => engine.next();
|
|
82
|
+
const previous = (): Promise<void> => engine.previous();
|
|
83
|
+
const cancel = (): Promise<void> => engine.cancel();
|
|
84
|
+
|
|
85
|
+
const goToStep = (stepId: string): Promise<void> => engine.goToStep(stepId);
|
|
86
|
+
|
|
87
|
+
const setData = (<K extends string & keyof TData>(key: K, value: TData[K]): Promise<void> =>
|
|
88
|
+
engine.setData(key, value as unknown)) as UsePathReturn<TData>["setData"];
|
|
89
|
+
|
|
90
|
+
return { snapshot, start, startSubPath, next, previous, cancel, goToStep, setData };
|
|
91
|
+
}
|
|
92
|
+
|
|
93
|
+
// ---------------------------------------------------------------------------
|
|
94
|
+
// Context — provide / inject
|
|
95
|
+
// ---------------------------------------------------------------------------
|
|
96
|
+
|
|
97
|
+
/** Injection key used by PathShell and usePathContext. */
|
|
98
|
+
const PathInjectionKey: InjectionKey<UsePathReturn> = Symbol("PathContext");
|
|
99
|
+
|
|
100
|
+
/**
|
|
101
|
+
* Access the nearest `PathShell`'s path instance via Vue `inject`.
|
|
102
|
+
* Throws if used outside of a `<PathShell>`.
|
|
103
|
+
*
|
|
104
|
+
* The optional generic narrows `snapshot.data` for convenience — it is a
|
|
105
|
+
* **type-level assertion**, not a runtime guarantee.
|
|
106
|
+
*/
|
|
107
|
+
export function usePathContext<TData extends PathData = PathData>(): UsePathReturn<TData> {
|
|
108
|
+
const ctx = inject(PathInjectionKey, null);
|
|
109
|
+
if (ctx === null) {
|
|
110
|
+
throw new Error("usePathContext must be used within a <PathShell>.");
|
|
111
|
+
}
|
|
112
|
+
return ctx as UsePathReturn<TData>;
|
|
113
|
+
}
|
|
114
|
+
|
|
115
|
+
// ---------------------------------------------------------------------------
|
|
116
|
+
// Default UI — PathShell
|
|
117
|
+
// ---------------------------------------------------------------------------
|
|
118
|
+
|
|
119
|
+
export interface PathShellActions {
|
|
120
|
+
next: () => Promise<void>;
|
|
121
|
+
previous: () => Promise<void>;
|
|
122
|
+
cancel: () => Promise<void>;
|
|
123
|
+
goToStep: (stepId: string) => Promise<void>;
|
|
124
|
+
setData: (key: string, value: unknown) => Promise<void>;
|
|
125
|
+
}
|
|
126
|
+
|
|
127
|
+
/**
|
|
128
|
+
* `<PathShell>` — default UI shell that renders a progress indicator,
|
|
129
|
+
* step content, and navigation buttons. Step content is provided via
|
|
130
|
+
* **named slots** matching each step's `id`.
|
|
131
|
+
*
|
|
132
|
+
* ```vue
|
|
133
|
+
* <PathShell :path="myPath" :initial-data="{ name: '' }" @complete="handleDone">
|
|
134
|
+
* <template #details><DetailsForm /></template>
|
|
135
|
+
* <template #review><ReviewPanel /></template>
|
|
136
|
+
* </PathShell>
|
|
137
|
+
* ```
|
|
138
|
+
*/
|
|
139
|
+
export const PathShell = defineComponent({
|
|
140
|
+
name: "PathShell",
|
|
141
|
+
props: {
|
|
142
|
+
path: { type: Object as PropType<PathDefinition>, required: true },
|
|
143
|
+
initialData: { type: Object as PropType<PathData>, default: () => ({}) },
|
|
144
|
+
autoStart: { type: Boolean, default: true },
|
|
145
|
+
backLabel: { type: String, default: "Back" },
|
|
146
|
+
nextLabel: { type: String, default: "Next" },
|
|
147
|
+
finishLabel: { type: String, default: "Finish" },
|
|
148
|
+
cancelLabel: { type: String, default: "Cancel" },
|
|
149
|
+
hideCancel: { type: Boolean, default: false },
|
|
150
|
+
hideProgress: { type: Boolean, default: false }
|
|
151
|
+
},
|
|
152
|
+
emits: ["complete", "cancel", "event"],
|
|
153
|
+
setup(props, { slots, emit }) {
|
|
154
|
+
const pathReturn = usePath({
|
|
155
|
+
onEvent(event) {
|
|
156
|
+
emit("event", event);
|
|
157
|
+
if (event.type === "completed") emit("complete", event.data);
|
|
158
|
+
if (event.type === "cancelled") emit("cancel", event.data);
|
|
159
|
+
}
|
|
160
|
+
});
|
|
161
|
+
|
|
162
|
+
const { snapshot, start, next, previous, cancel, goToStep, setData } = pathReturn;
|
|
163
|
+
|
|
164
|
+
// Provide context so child components can use usePathContext()
|
|
165
|
+
provide(PathInjectionKey, pathReturn);
|
|
166
|
+
|
|
167
|
+
const started = ref(false);
|
|
168
|
+
onMounted(() => {
|
|
169
|
+
if (props.autoStart && !started.value) {
|
|
170
|
+
started.value = true;
|
|
171
|
+
start(props.path, props.initialData);
|
|
172
|
+
}
|
|
173
|
+
});
|
|
174
|
+
|
|
175
|
+
const actions: PathShellActions = { next, previous, cancel, goToStep, setData };
|
|
176
|
+
|
|
177
|
+
return () => {
|
|
178
|
+
const snap = snapshot.value as PathSnapshot | null;
|
|
179
|
+
|
|
180
|
+
if (!snap) {
|
|
181
|
+
return h("div", { class: "pw-shell" },
|
|
182
|
+
h("div", { class: "pw-shell__empty" }, [
|
|
183
|
+
h("p", "No active path."),
|
|
184
|
+
!props.autoStart
|
|
185
|
+
? h("button", {
|
|
186
|
+
type: "button",
|
|
187
|
+
class: "pw-shell__start-btn",
|
|
188
|
+
onClick: () => start(props.path, props.initialData)
|
|
189
|
+
}, "Start")
|
|
190
|
+
: null
|
|
191
|
+
])
|
|
192
|
+
);
|
|
193
|
+
}
|
|
194
|
+
|
|
195
|
+
// Resolve step content from named slot matching the current step ID
|
|
196
|
+
const stepSlot = slots[snap.stepId];
|
|
197
|
+
const stepContent = stepSlot ? stepSlot({ snapshot: snap }) : null;
|
|
198
|
+
|
|
199
|
+
return h("div", { class: "pw-shell" }, [
|
|
200
|
+
// Header — progress
|
|
201
|
+
!props.hideProgress && (
|
|
202
|
+
slots.header
|
|
203
|
+
? slots.header({ snapshot: snap })
|
|
204
|
+
: renderVueHeader(snap)
|
|
205
|
+
),
|
|
206
|
+
// Body — step content
|
|
207
|
+
h("div", { class: "pw-shell__body" }, stepContent ?? []),
|
|
208
|
+
// Footer — navigation
|
|
209
|
+
slots.footer
|
|
210
|
+
? slots.footer({ snapshot: snap, actions })
|
|
211
|
+
: renderVueFooter(snap, actions, props)
|
|
212
|
+
]);
|
|
213
|
+
};
|
|
214
|
+
}
|
|
215
|
+
});
|
|
216
|
+
|
|
217
|
+
// ---------------------------------------------------------------------------
|
|
218
|
+
// Default header (progress indicator)
|
|
219
|
+
// ---------------------------------------------------------------------------
|
|
220
|
+
|
|
221
|
+
function renderVueHeader(snapshot: PathSnapshot): VNode {
|
|
222
|
+
return h("div", { class: "pw-shell__header" }, [
|
|
223
|
+
h("div", { class: "pw-shell__steps" },
|
|
224
|
+
snapshot.steps.map((step, i) =>
|
|
225
|
+
h("div", {
|
|
226
|
+
key: step.id,
|
|
227
|
+
class: ["pw-shell__step", `pw-shell__step--${step.status}`]
|
|
228
|
+
}, [
|
|
229
|
+
h("span", { class: "pw-shell__step-dot" },
|
|
230
|
+
step.status === "completed" ? "✓" : String(i + 1)
|
|
231
|
+
),
|
|
232
|
+
h("span", { class: "pw-shell__step-label" },
|
|
233
|
+
step.title ?? step.id
|
|
234
|
+
)
|
|
235
|
+
])
|
|
236
|
+
)
|
|
237
|
+
),
|
|
238
|
+
h("div", { class: "pw-shell__track" },
|
|
239
|
+
h("div", {
|
|
240
|
+
class: "pw-shell__track-fill",
|
|
241
|
+
style: { width: `${snapshot.progress * 100}%` }
|
|
242
|
+
})
|
|
243
|
+
)
|
|
244
|
+
]);
|
|
245
|
+
}
|
|
246
|
+
|
|
247
|
+
// ---------------------------------------------------------------------------
|
|
248
|
+
// Default footer (navigation buttons)
|
|
249
|
+
// ---------------------------------------------------------------------------
|
|
250
|
+
|
|
251
|
+
function renderVueFooter(
|
|
252
|
+
snapshot: PathSnapshot,
|
|
253
|
+
actions: PathShellActions,
|
|
254
|
+
props: { backLabel: string; nextLabel: string; finishLabel: string; cancelLabel: string; hideCancel: boolean }
|
|
255
|
+
): VNode {
|
|
256
|
+
return h("div", { class: "pw-shell__footer" }, [
|
|
257
|
+
h("div", { class: "pw-shell__footer-left" }, [
|
|
258
|
+
!snapshot.isFirstStep
|
|
259
|
+
? h("button", {
|
|
260
|
+
type: "button",
|
|
261
|
+
class: "pw-shell__btn pw-shell__btn--back",
|
|
262
|
+
disabled: snapshot.isNavigating || !snapshot.canMovePrevious,
|
|
263
|
+
onClick: actions.previous
|
|
264
|
+
}, props.backLabel)
|
|
265
|
+
: null
|
|
266
|
+
]),
|
|
267
|
+
h("div", { class: "pw-shell__footer-right" }, [
|
|
268
|
+
!props.hideCancel
|
|
269
|
+
? h("button", {
|
|
270
|
+
type: "button",
|
|
271
|
+
class: "pw-shell__btn pw-shell__btn--cancel",
|
|
272
|
+
disabled: snapshot.isNavigating,
|
|
273
|
+
onClick: actions.cancel
|
|
274
|
+
}, props.cancelLabel)
|
|
275
|
+
: null,
|
|
276
|
+
h("button", {
|
|
277
|
+
type: "button",
|
|
278
|
+
class: "pw-shell__btn pw-shell__btn--next",
|
|
279
|
+
disabled: snapshot.isNavigating || !snapshot.canMoveNext,
|
|
280
|
+
onClick: actions.next
|
|
281
|
+
}, snapshot.isLastStep ? props.finishLabel : props.nextLabel)
|
|
282
|
+
])
|
|
283
|
+
]);
|
|
284
|
+
}
|
|
285
|
+
|