@daltonr/pathwrite-vue 0.2.1 → 0.3.0
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 +73 -2
- package/dist/index.css +262 -0
- package/dist/index.d.ts +4 -3
- package/dist/index.js +3 -3
- package/dist/index.js.map +1 -1
- package/package.json +2 -2
- package/src/index.ts +8 -7
package/README.md
CHANGED
|
@@ -48,7 +48,7 @@ const currentStep = computed(() => snapshot.value?.stepId ?? null);
|
|
|
48
48
|
|----------|------|-------------|
|
|
49
49
|
| `snapshot` | `DeepReadonly<Ref<PathSnapshot \| null>>` | Current snapshot. `null` when no path is active. Triggers Vue re-renders on change. |
|
|
50
50
|
| `start(definition, data?)` | `function` | Start or re-start a path. |
|
|
51
|
-
| `startSubPath(definition, data?)` | `function` | Push a sub-path. Requires an active path. |
|
|
51
|
+
| `startSubPath(definition, data?, meta?)` | `function` | Push a sub-path. Requires an active path. `meta` is returned unchanged to `onSubPathComplete` / `onSubPathCancel`. |
|
|
52
52
|
| `next()` | `function` | Advance one step. Completes the path on the last step. |
|
|
53
53
|
| `previous()` | `function` | Go back one step. No-op when already on the first step of a top-level path. |
|
|
54
54
|
| `cancel()` | `function` | Cancel the active path (or sub-path). |
|
|
@@ -94,7 +94,76 @@ setData("name", "Alice"); // ✓
|
|
|
94
94
|
|
|
95
95
|
The snapshot includes `canMoveNext` and `canMovePrevious` — the evaluated results of the current step's navigation guards. Use them to proactively disable buttons. These update automatically when data changes (e.g. after `setData`). Async guards default to `true` optimistically.
|
|
96
96
|
|
|
97
|
-
##
|
|
97
|
+
## Default UI — `PathShell`
|
|
98
|
+
|
|
99
|
+
`<PathShell>` is a ready-made shell component that renders a progress indicator, step content, and navigation buttons. Step content is provided via **named slots** matching each step's `id`.
|
|
100
|
+
|
|
101
|
+
```vue
|
|
102
|
+
<PathShell
|
|
103
|
+
:path="myPath"
|
|
104
|
+
:initial-data="{ name: '' }"
|
|
105
|
+
@complete="handleDone"
|
|
106
|
+
>
|
|
107
|
+
<template #details><DetailsForm /></template>
|
|
108
|
+
<template #review><ReviewPanel /></template>
|
|
109
|
+
</PathShell>
|
|
110
|
+
```
|
|
111
|
+
|
|
112
|
+
### Props
|
|
113
|
+
|
|
114
|
+
| Prop | Type | Default | Description |
|
|
115
|
+
|------|------|---------|-------------|
|
|
116
|
+
| `path` | `PathDefinition` | *required* | The path to run. |
|
|
117
|
+
| `initialData` | `PathData` | `{}` | Initial data passed to `engine.start()`. |
|
|
118
|
+
| `autoStart` | `boolean` | `true` | Start the path automatically on mount. |
|
|
119
|
+
| `backLabel` | `string` | `"Back"` | Back button label. |
|
|
120
|
+
| `nextLabel` | `string` | `"Next"` | Next button label. |
|
|
121
|
+
| `finishLabel` | `string` | `"Finish"` | Finish button label (last step). |
|
|
122
|
+
| `cancelLabel` | `string` | `"Cancel"` | Cancel button label. |
|
|
123
|
+
| `hideCancel` | `boolean` | `false` | Hide the Cancel button. |
|
|
124
|
+
| `hideProgress` | `boolean` | `false` | Hide the progress indicator. |
|
|
125
|
+
|
|
126
|
+
### Emits
|
|
127
|
+
|
|
128
|
+
| Event | Payload | Description |
|
|
129
|
+
|-------|---------|-------------|
|
|
130
|
+
| `@complete` | `PathData` | Emitted when the path completes. |
|
|
131
|
+
| `@cancel` | `PathData` | Emitted when the path is cancelled. |
|
|
132
|
+
| `@event` | `PathEvent` | Emitted for every engine event. |
|
|
133
|
+
|
|
134
|
+
### Slots
|
|
135
|
+
|
|
136
|
+
| Slot | Scope | Description |
|
|
137
|
+
|------|-------|-------------|
|
|
138
|
+
| `#[stepId]` | `{ snapshot }` | Named slot rendered when the active step matches `stepId`. |
|
|
139
|
+
| `#header` | `{ snapshot }` | Replaces the default progress header. |
|
|
140
|
+
| `#footer` | `{ snapshot, actions }` | Replaces the default navigation footer. |
|
|
141
|
+
|
|
142
|
+
### Customising the header and footer
|
|
143
|
+
|
|
144
|
+
Use the `#header` and `#footer` slots to replace the built-in progress bar or navigation buttons with your own UI. The slot scope gives you the current `PathSnapshot`; `#footer` also provides an `actions` object with all navigation callbacks.
|
|
145
|
+
|
|
146
|
+
```vue
|
|
147
|
+
<PathShell :path="myPath">
|
|
148
|
+
<template #header="{ snapshot }">
|
|
149
|
+
<p>Step {{ snapshot.stepIndex + 1 }} of {{ snapshot.stepCount }}</p>
|
|
150
|
+
</template>
|
|
151
|
+
|
|
152
|
+
<template #footer="{ snapshot, actions }">
|
|
153
|
+
<button @click="actions.previous" :disabled="snapshot.isFirstStep">Back</button>
|
|
154
|
+
<button @click="actions.next" :disabled="!snapshot.canMoveNext">
|
|
155
|
+
{{ snapshot.isLastStep ? 'Finish' : 'Next' }}
|
|
156
|
+
</button>
|
|
157
|
+
</template>
|
|
158
|
+
|
|
159
|
+
<template #details><DetailsForm /></template>
|
|
160
|
+
<template #review><ReviewPanel /></template>
|
|
161
|
+
</PathShell>
|
|
162
|
+
```
|
|
163
|
+
|
|
164
|
+
`actions` contains: `next`, `previous`, `cancel`, `goToStep`, `goToStepChecked`, `setData`.
|
|
165
|
+
|
|
166
|
+
### Context sharing
|
|
98
167
|
|
|
99
168
|
`<PathShell>` automatically provides its engine instance to child components via Vue's `provide` / `inject`. Step children can call `usePathContext()` to access the snapshot and actions without prop drilling:
|
|
100
169
|
|
|
@@ -108,6 +177,8 @@ const { snapshot, setData } = usePathContext();
|
|
|
108
177
|
|
|
109
178
|
`usePathContext()` throws if called outside a `<PathShell>`.
|
|
110
179
|
|
|
180
|
+
---
|
|
181
|
+
|
|
111
182
|
## Styling
|
|
112
183
|
|
|
113
184
|
`<PathShell>` renders structural HTML with BEM-style `pw-shell__*` CSS classes but ships with no embedded styles. Import the optional stylesheet for sensible defaults:
|
package/dist/index.css
ADDED
|
@@ -0,0 +1,262 @@
|
|
|
1
|
+
/*
|
|
2
|
+
* Pathwrite — Default Shell Stylesheet
|
|
3
|
+
*
|
|
4
|
+
* Optional CSS for the <PathShell> / <pw-shell> default UI components.
|
|
5
|
+
* Import this file if you want sensible out-of-the-box styling.
|
|
6
|
+
* Every visual value is a CSS custom property (--pw-*) so you can
|
|
7
|
+
* theme the shell without overriding selectors.
|
|
8
|
+
*
|
|
9
|
+
* Usage (React / Vue):
|
|
10
|
+
* import "adapter-package/styles.css";
|
|
11
|
+
*
|
|
12
|
+
* Usage (Angular) — add to the styles array in angular.json:
|
|
13
|
+
* "node_modules/@daltonr/pathwrite-angular/dist/index.css"
|
|
14
|
+
*/
|
|
15
|
+
|
|
16
|
+
/* ------------------------------------------------------------------ */
|
|
17
|
+
/* Custom property defaults */
|
|
18
|
+
/* ------------------------------------------------------------------ */
|
|
19
|
+
:root {
|
|
20
|
+
/* Layout */
|
|
21
|
+
--pw-shell-max-width: 720px;
|
|
22
|
+
--pw-shell-padding: 24px;
|
|
23
|
+
--pw-shell-gap: 20px;
|
|
24
|
+
--pw-shell-radius: 10px;
|
|
25
|
+
|
|
26
|
+
/* Colours */
|
|
27
|
+
--pw-color-bg: #ffffff;
|
|
28
|
+
--pw-color-border: #dbe4f0;
|
|
29
|
+
--pw-color-text: #1f2937;
|
|
30
|
+
--pw-color-muted: #5b677a;
|
|
31
|
+
--pw-color-primary: #2563eb;
|
|
32
|
+
--pw-color-primary-light: rgba(37, 99, 235, 0.12);
|
|
33
|
+
--pw-color-btn-bg: #f8fbff;
|
|
34
|
+
--pw-color-btn-border: #c2d0e5;
|
|
35
|
+
|
|
36
|
+
/* Progress */
|
|
37
|
+
--pw-dot-size: 32px;
|
|
38
|
+
--pw-dot-font-size: 13px;
|
|
39
|
+
--pw-track-height: 4px;
|
|
40
|
+
|
|
41
|
+
/* Buttons */
|
|
42
|
+
--pw-btn-padding: 8px 16px;
|
|
43
|
+
--pw-btn-radius: 6px;
|
|
44
|
+
}
|
|
45
|
+
|
|
46
|
+
/* ------------------------------------------------------------------ */
|
|
47
|
+
/* Shell root */
|
|
48
|
+
/* ------------------------------------------------------------------ */
|
|
49
|
+
.pw-shell {
|
|
50
|
+
max-width: var(--pw-shell-max-width);
|
|
51
|
+
margin: 0 auto;
|
|
52
|
+
display: flex;
|
|
53
|
+
flex-direction: column;
|
|
54
|
+
gap: var(--pw-shell-gap);
|
|
55
|
+
padding: var(--pw-shell-padding);
|
|
56
|
+
font-family: system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
|
|
57
|
+
color: var(--pw-color-text);
|
|
58
|
+
}
|
|
59
|
+
|
|
60
|
+
/* ------------------------------------------------------------------ */
|
|
61
|
+
/* Empty state */
|
|
62
|
+
/* ------------------------------------------------------------------ */
|
|
63
|
+
.pw-shell__empty {
|
|
64
|
+
text-align: center;
|
|
65
|
+
padding: 32px 16px;
|
|
66
|
+
color: var(--pw-color-muted);
|
|
67
|
+
}
|
|
68
|
+
|
|
69
|
+
.pw-shell__start-btn {
|
|
70
|
+
margin-top: 12px;
|
|
71
|
+
border: 1px solid var(--pw-color-btn-border);
|
|
72
|
+
background: var(--pw-color-btn-bg);
|
|
73
|
+
color: var(--pw-color-text);
|
|
74
|
+
padding: var(--pw-btn-padding);
|
|
75
|
+
border-radius: var(--pw-btn-radius);
|
|
76
|
+
cursor: pointer;
|
|
77
|
+
font-size: 14px;
|
|
78
|
+
}
|
|
79
|
+
|
|
80
|
+
/* ------------------------------------------------------------------ */
|
|
81
|
+
/* Header — progress indicator */
|
|
82
|
+
/* ------------------------------------------------------------------ */
|
|
83
|
+
.pw-shell__header {
|
|
84
|
+
background: var(--pw-color-bg);
|
|
85
|
+
border: 1px solid var(--pw-color-border);
|
|
86
|
+
border-radius: var(--pw-shell-radius);
|
|
87
|
+
padding: 20px 24px 16px;
|
|
88
|
+
}
|
|
89
|
+
|
|
90
|
+
.pw-shell__steps {
|
|
91
|
+
display: flex;
|
|
92
|
+
justify-content: space-between;
|
|
93
|
+
margin-bottom: 12px;
|
|
94
|
+
}
|
|
95
|
+
|
|
96
|
+
.pw-shell__step {
|
|
97
|
+
display: flex;
|
|
98
|
+
flex-direction: column;
|
|
99
|
+
align-items: center;
|
|
100
|
+
gap: 6px;
|
|
101
|
+
flex: 1;
|
|
102
|
+
}
|
|
103
|
+
|
|
104
|
+
.pw-shell__step-dot {
|
|
105
|
+
width: var(--pw-dot-size);
|
|
106
|
+
height: var(--pw-dot-size);
|
|
107
|
+
border-radius: 50%;
|
|
108
|
+
display: flex;
|
|
109
|
+
align-items: center;
|
|
110
|
+
justify-content: center;
|
|
111
|
+
font-size: var(--pw-dot-font-size);
|
|
112
|
+
font-weight: 600;
|
|
113
|
+
border: 2px solid var(--pw-color-border);
|
|
114
|
+
background: var(--pw-color-bg);
|
|
115
|
+
color: var(--pw-color-muted);
|
|
116
|
+
transition: all 0.25s ease;
|
|
117
|
+
}
|
|
118
|
+
|
|
119
|
+
.pw-shell__step--completed .pw-shell__step-dot {
|
|
120
|
+
background: var(--pw-color-primary);
|
|
121
|
+
border-color: var(--pw-color-primary);
|
|
122
|
+
color: #fff;
|
|
123
|
+
}
|
|
124
|
+
|
|
125
|
+
.pw-shell__step--current .pw-shell__step-dot {
|
|
126
|
+
border-color: var(--pw-color-primary);
|
|
127
|
+
color: var(--pw-color-primary);
|
|
128
|
+
box-shadow: 0 0 0 3px var(--pw-color-primary-light);
|
|
129
|
+
}
|
|
130
|
+
|
|
131
|
+
.pw-shell__step-label {
|
|
132
|
+
font-size: 12px;
|
|
133
|
+
color: var(--pw-color-muted);
|
|
134
|
+
text-align: center;
|
|
135
|
+
white-space: nowrap;
|
|
136
|
+
}
|
|
137
|
+
|
|
138
|
+
.pw-shell__step--current .pw-shell__step-label {
|
|
139
|
+
color: var(--pw-color-primary);
|
|
140
|
+
font-weight: 600;
|
|
141
|
+
}
|
|
142
|
+
|
|
143
|
+
.pw-shell__step--completed .pw-shell__step-label {
|
|
144
|
+
color: var(--pw-color-text);
|
|
145
|
+
}
|
|
146
|
+
|
|
147
|
+
/* Track / fill */
|
|
148
|
+
.pw-shell__track {
|
|
149
|
+
height: var(--pw-track-height);
|
|
150
|
+
background: var(--pw-color-border);
|
|
151
|
+
border-radius: calc(var(--pw-track-height) / 2);
|
|
152
|
+
overflow: hidden;
|
|
153
|
+
}
|
|
154
|
+
|
|
155
|
+
.pw-shell__track-fill {
|
|
156
|
+
height: 100%;
|
|
157
|
+
background: var(--pw-color-primary);
|
|
158
|
+
border-radius: calc(var(--pw-track-height) / 2);
|
|
159
|
+
transition: width 0.3s ease;
|
|
160
|
+
}
|
|
161
|
+
|
|
162
|
+
/* ------------------------------------------------------------------ */
|
|
163
|
+
/* Body — step content */
|
|
164
|
+
/* ------------------------------------------------------------------ */
|
|
165
|
+
.pw-shell__body {
|
|
166
|
+
background: var(--pw-color-bg);
|
|
167
|
+
border: 1px solid var(--pw-color-border);
|
|
168
|
+
border-radius: var(--pw-shell-radius);
|
|
169
|
+
padding: var(--pw-shell-padding);
|
|
170
|
+
min-height: 120px;
|
|
171
|
+
}
|
|
172
|
+
|
|
173
|
+
/* ------------------------------------------------------------------ */
|
|
174
|
+
/* Validation messages */
|
|
175
|
+
/* ------------------------------------------------------------------ */
|
|
176
|
+
:root {
|
|
177
|
+
--pw-color-error: #dc2626;
|
|
178
|
+
--pw-color-error-bg: #fef2f2;
|
|
179
|
+
--pw-color-error-border: #fecaca;
|
|
180
|
+
}
|
|
181
|
+
|
|
182
|
+
.pw-shell__validation {
|
|
183
|
+
list-style: none;
|
|
184
|
+
margin: 0;
|
|
185
|
+
padding: 12px 16px;
|
|
186
|
+
background: var(--pw-color-error-bg);
|
|
187
|
+
border: 1px solid var(--pw-color-error-border);
|
|
188
|
+
border-radius: var(--pw-shell-radius);
|
|
189
|
+
display: flex;
|
|
190
|
+
flex-direction: column;
|
|
191
|
+
gap: 4px;
|
|
192
|
+
}
|
|
193
|
+
|
|
194
|
+
.pw-shell__validation-item {
|
|
195
|
+
font-size: 13px;
|
|
196
|
+
color: var(--pw-color-error);
|
|
197
|
+
padding-left: 16px;
|
|
198
|
+
position: relative;
|
|
199
|
+
}
|
|
200
|
+
|
|
201
|
+
.pw-shell__validation-item::before {
|
|
202
|
+
content: "•";
|
|
203
|
+
position: absolute;
|
|
204
|
+
left: 4px;
|
|
205
|
+
}
|
|
206
|
+
|
|
207
|
+
/* ------------------------------------------------------------------ */
|
|
208
|
+
/* Footer — navigation buttons */
|
|
209
|
+
/* ------------------------------------------------------------------ */
|
|
210
|
+
.pw-shell__footer {
|
|
211
|
+
display: flex;
|
|
212
|
+
justify-content: space-between;
|
|
213
|
+
align-items: center;
|
|
214
|
+
}
|
|
215
|
+
|
|
216
|
+
.pw-shell__footer-left,
|
|
217
|
+
.pw-shell__footer-right {
|
|
218
|
+
display: flex;
|
|
219
|
+
gap: 8px;
|
|
220
|
+
}
|
|
221
|
+
|
|
222
|
+
.pw-shell__btn {
|
|
223
|
+
border: 1px solid var(--pw-color-btn-border);
|
|
224
|
+
background: var(--pw-color-btn-bg);
|
|
225
|
+
color: var(--pw-color-text);
|
|
226
|
+
padding: var(--pw-btn-padding);
|
|
227
|
+
border-radius: var(--pw-btn-radius);
|
|
228
|
+
cursor: pointer;
|
|
229
|
+
font-size: 14px;
|
|
230
|
+
transition: background 0.15s ease, border-color 0.15s ease;
|
|
231
|
+
}
|
|
232
|
+
|
|
233
|
+
.pw-shell__btn:hover:not(:disabled) {
|
|
234
|
+
background: var(--pw-color-border);
|
|
235
|
+
}
|
|
236
|
+
|
|
237
|
+
.pw-shell__btn:disabled {
|
|
238
|
+
opacity: 0.5;
|
|
239
|
+
cursor: not-allowed;
|
|
240
|
+
}
|
|
241
|
+
|
|
242
|
+
.pw-shell__btn--next {
|
|
243
|
+
background: var(--pw-color-primary);
|
|
244
|
+
border-color: var(--pw-color-primary);
|
|
245
|
+
color: #fff;
|
|
246
|
+
}
|
|
247
|
+
|
|
248
|
+
.pw-shell__btn--next:hover:not(:disabled) {
|
|
249
|
+
background: #1d4ed8;
|
|
250
|
+
border-color: #1d4ed8;
|
|
251
|
+
}
|
|
252
|
+
|
|
253
|
+
.pw-shell__btn--cancel {
|
|
254
|
+
color: var(--pw-color-muted);
|
|
255
|
+
border-color: transparent;
|
|
256
|
+
background: transparent;
|
|
257
|
+
}
|
|
258
|
+
|
|
259
|
+
.pw-shell__btn--cancel:hover:not(:disabled) {
|
|
260
|
+
background: var(--pw-color-primary-light);
|
|
261
|
+
}
|
|
262
|
+
|
package/dist/index.d.ts
CHANGED
|
@@ -9,11 +9,11 @@ export interface UsePathReturn<TData extends PathData = PathData> {
|
|
|
9
9
|
snapshot: DeepReadonly<Ref<PathSnapshot<TData> | null>>;
|
|
10
10
|
/** Start (or restart) a path. */
|
|
11
11
|
start: (path: PathDefinition<any>, initialData?: PathData) => Promise<void>;
|
|
12
|
-
/** Push a sub-path onto the stack. Requires an active path. */
|
|
13
|
-
startSubPath: (path: PathDefinition<any>, initialData?: PathData) => Promise<void>;
|
|
12
|
+
/** Push a sub-path onto the stack. Requires an active path. Pass an optional `meta` object for correlation — it is returned unchanged to the parent step's `onSubPathComplete` / `onSubPathCancel` hooks. */
|
|
13
|
+
startSubPath: (path: PathDefinition<any>, initialData?: PathData, meta?: Record<string, unknown>) => Promise<void>;
|
|
14
14
|
/** Advance one step. Completes the path on the last step. */
|
|
15
15
|
next: () => Promise<void>;
|
|
16
|
-
/** Go back one step.
|
|
16
|
+
/** Go back one step. No-op when already on the first step of a top-level path. Pops back to the parent path when on the first step of a sub-path. */
|
|
17
17
|
previous: () => Promise<void>;
|
|
18
18
|
/** Cancel the active path (or sub-path). */
|
|
19
19
|
cancel: () => Promise<void>;
|
|
@@ -38,6 +38,7 @@ export interface PathShellActions {
|
|
|
38
38
|
previous: () => Promise<void>;
|
|
39
39
|
cancel: () => Promise<void>;
|
|
40
40
|
goToStep: (stepId: string) => Promise<void>;
|
|
41
|
+
goToStepChecked: (stepId: string) => Promise<void>;
|
|
41
42
|
setData: (key: string, value: unknown) => Promise<void>;
|
|
42
43
|
}
|
|
43
44
|
/**
|
package/dist/index.js
CHANGED
|
@@ -18,7 +18,7 @@ export function usePath(options) {
|
|
|
18
18
|
onScopeDispose(unsubscribe);
|
|
19
19
|
const snapshot = readonly(_snapshot);
|
|
20
20
|
const start = (path, initialData = {}) => engine.start(path, initialData);
|
|
21
|
-
const startSubPath = (path, initialData = {}) => engine.startSubPath(path, initialData);
|
|
21
|
+
const startSubPath = (path, initialData = {}, meta) => engine.startSubPath(path, initialData, meta);
|
|
22
22
|
const next = () => engine.next();
|
|
23
23
|
const previous = () => engine.previous();
|
|
24
24
|
const cancel = () => engine.cancel();
|
|
@@ -82,7 +82,7 @@ export const PathShell = defineComponent({
|
|
|
82
82
|
emit("cancel", event.data);
|
|
83
83
|
}
|
|
84
84
|
});
|
|
85
|
-
const { snapshot, start, next, previous, cancel, goToStep, setData } = pathReturn;
|
|
85
|
+
const { snapshot, start, next, previous, cancel, goToStep, goToStepChecked, setData } = pathReturn;
|
|
86
86
|
// Provide context so child components can use usePathContext()
|
|
87
87
|
provide(PathInjectionKey, pathReturn);
|
|
88
88
|
const started = ref(false);
|
|
@@ -92,7 +92,7 @@ export const PathShell = defineComponent({
|
|
|
92
92
|
start(props.path, props.initialData);
|
|
93
93
|
}
|
|
94
94
|
});
|
|
95
|
-
const actions = { next, previous, cancel, goToStep, setData };
|
|
95
|
+
const actions = { next, previous, cancel, goToStep, goToStepChecked, setData };
|
|
96
96
|
return () => {
|
|
97
97
|
const snap = snapshot.value;
|
|
98
98
|
if (!snap) {
|
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;AAgCjC,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,IAAyB,EAAE,cAAwB,EAAE,EAAiB,EAAE,CACrF,MAAM,CAAC,KAAK,CAAC,IAAI,EAAE,WAAW,CAAC,CAAC;IAElC,MAAM,YAAY,GAAG,CAAC,IAAyB,EAAE,cAAwB,EAAE,EAAiB,EAAE,
|
|
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.
|
|
3
|
+
"version": "0.3.0",
|
|
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.",
|
|
@@ -46,7 +46,7 @@
|
|
|
46
46
|
"vue": ">=3.3.0"
|
|
47
47
|
},
|
|
48
48
|
"dependencies": {
|
|
49
|
-
"@daltonr/pathwrite-core": "^0.
|
|
49
|
+
"@daltonr/pathwrite-core": "^0.3.0"
|
|
50
50
|
},
|
|
51
51
|
"devDependencies": {
|
|
52
52
|
"@vue/test-utils": "^2.4.6",
|
package/src/index.ts
CHANGED
|
@@ -37,11 +37,11 @@ export interface UsePathReturn<TData extends PathData = PathData> {
|
|
|
37
37
|
snapshot: DeepReadonly<Ref<PathSnapshot<TData> | null>>;
|
|
38
38
|
/** Start (or restart) a path. */
|
|
39
39
|
start: (path: PathDefinition<any>, initialData?: PathData) => Promise<void>;
|
|
40
|
-
/** Push a sub-path onto the stack. Requires an active path. */
|
|
41
|
-
startSubPath: (path: PathDefinition<any>, initialData?: PathData) => Promise<void>;
|
|
40
|
+
/** Push a sub-path onto the stack. Requires an active path. Pass an optional `meta` object for correlation — it is returned unchanged to the parent step's `onSubPathComplete` / `onSubPathCancel` hooks. */
|
|
41
|
+
startSubPath: (path: PathDefinition<any>, initialData?: PathData, meta?: Record<string, unknown>) => Promise<void>;
|
|
42
42
|
/** Advance one step. Completes the path on the last step. */
|
|
43
43
|
next: () => Promise<void>;
|
|
44
|
-
/** Go back one step.
|
|
44
|
+
/** Go back one step. No-op when already on the first step of a top-level path. Pops back to the parent path when on the first step of a sub-path. */
|
|
45
45
|
previous: () => Promise<void>;
|
|
46
46
|
/** Cancel the active path (or sub-path). */
|
|
47
47
|
cancel: () => Promise<void>;
|
|
@@ -77,8 +77,8 @@ export function usePath<TData extends PathData = PathData>(options?: UsePathOpti
|
|
|
77
77
|
const start = (path: PathDefinition<any>, initialData: PathData = {}): Promise<void> =>
|
|
78
78
|
engine.start(path, initialData);
|
|
79
79
|
|
|
80
|
-
const startSubPath = (path: PathDefinition<any>, initialData: PathData = {}): Promise<void> =>
|
|
81
|
-
engine.startSubPath(path, initialData);
|
|
80
|
+
const startSubPath = (path: PathDefinition<any>, initialData: PathData = {}, meta?: Record<string, unknown>): Promise<void> =>
|
|
81
|
+
engine.startSubPath(path, initialData, meta);
|
|
82
82
|
|
|
83
83
|
const next = (): Promise<void> => engine.next();
|
|
84
84
|
const previous = (): Promise<void> => engine.previous();
|
|
@@ -124,6 +124,7 @@ export interface PathShellActions {
|
|
|
124
124
|
previous: () => Promise<void>;
|
|
125
125
|
cancel: () => Promise<void>;
|
|
126
126
|
goToStep: (stepId: string) => Promise<void>;
|
|
127
|
+
goToStepChecked: (stepId: string) => Promise<void>;
|
|
127
128
|
setData: (key: string, value: unknown) => Promise<void>;
|
|
128
129
|
}
|
|
129
130
|
|
|
@@ -162,7 +163,7 @@ export const PathShell = defineComponent({
|
|
|
162
163
|
}
|
|
163
164
|
});
|
|
164
165
|
|
|
165
|
-
const { snapshot, start, next, previous, cancel, goToStep, setData } = pathReturn;
|
|
166
|
+
const { snapshot, start, next, previous, cancel, goToStep, goToStepChecked, setData } = pathReturn;
|
|
166
167
|
|
|
167
168
|
// Provide context so child components can use usePathContext()
|
|
168
169
|
provide(PathInjectionKey, pathReturn);
|
|
@@ -175,7 +176,7 @@ export const PathShell = defineComponent({
|
|
|
175
176
|
}
|
|
176
177
|
});
|
|
177
178
|
|
|
178
|
-
const actions: PathShellActions = { next, previous, cancel, goToStep, setData };
|
|
179
|
+
const actions: PathShellActions = { next, previous, cancel, goToStep, goToStepChecked, setData };
|
|
179
180
|
|
|
180
181
|
return () => {
|
|
181
182
|
const snap = snapshot.value as PathSnapshot | null;
|