@daltonr/pathwrite-vue 0.2.0 → 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.d.ts +7 -6
- package/dist/index.js +3 -3
- package/dist/index.js.map +1 -1
- package/package.json +3 -3
- package/src/index.ts +11 -10
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.d.ts
CHANGED
|
@@ -8,12 +8,12 @@ export interface UsePathReturn<TData extends PathData = PathData> {
|
|
|
8
8
|
/** Current path snapshot, or `null` when no path is active. Reactive — triggers Vue re-renders on change. */
|
|
9
9
|
snapshot: DeepReadonly<Ref<PathSnapshot<TData> | null>>;
|
|
10
10
|
/** Start (or restart) a path. */
|
|
11
|
-
start: (path: PathDefinition
|
|
12
|
-
/** Push a sub-path onto the stack. Requires an active path. */
|
|
13
|
-
startSubPath: (path: PathDefinition
|
|
11
|
+
start: (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
|
/**
|
|
@@ -54,7 +55,7 @@ export interface PathShellActions {
|
|
|
54
55
|
*/
|
|
55
56
|
export declare const PathShell: import("vue").DefineComponent<import("vue").ExtractPropTypes<{
|
|
56
57
|
path: {
|
|
57
|
-
type: PropType<PathDefinition
|
|
58
|
+
type: PropType<PathDefinition<any>>;
|
|
58
59
|
required: true;
|
|
59
60
|
};
|
|
60
61
|
initialData: {
|
|
@@ -93,7 +94,7 @@ export declare const PathShell: import("vue").DefineComponent<import("vue").Extr
|
|
|
93
94
|
[key: string]: any;
|
|
94
95
|
}>, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, ("complete" | "cancel" | "event")[], "complete" | "cancel" | "event", import("vue").PublicProps, Readonly<import("vue").ExtractPropTypes<{
|
|
95
96
|
path: {
|
|
96
|
-
type: PropType<PathDefinition
|
|
97
|
+
type: PropType<PathDefinition<any>>;
|
|
97
98
|
required: true;
|
|
98
99
|
};
|
|
99
100
|
initialData: {
|
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,
|
|
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.",
|
|
@@ -40,13 +40,13 @@
|
|
|
40
40
|
"scripts": {
|
|
41
41
|
"build": "tsc -p tsconfig.json && cp ../shell.css dist/index.css",
|
|
42
42
|
"clean": "rm -rf dist tsconfig.tsbuildinfo",
|
|
43
|
-
"prepublishOnly": "npm run clean && npm run build"
|
|
43
|
+
"prepublishOnly": "test -d dist && echo 'dist already built, skipping' || (npm run clean && npm run build)"
|
|
44
44
|
},
|
|
45
45
|
"peerDependencies": {
|
|
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
|
@@ -36,12 +36,12 @@ export interface UsePathReturn<TData extends PathData = PathData> {
|
|
|
36
36
|
/** Current path snapshot, or `null` when no path is active. Reactive — triggers Vue re-renders on change. */
|
|
37
37
|
snapshot: DeepReadonly<Ref<PathSnapshot<TData> | null>>;
|
|
38
38
|
/** Start (or restart) a path. */
|
|
39
|
-
start: (path: PathDefinition
|
|
40
|
-
/** Push a sub-path onto the stack. Requires an active path. */
|
|
41
|
-
startSubPath: (path: PathDefinition
|
|
39
|
+
start: (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>;
|
|
@@ -74,11 +74,11 @@ export function usePath<TData extends PathData = PathData>(options?: UsePathOpti
|
|
|
74
74
|
|
|
75
75
|
const snapshot = readonly(_snapshot) as DeepReadonly<Ref<PathSnapshot<TData> | null>>;
|
|
76
76
|
|
|
77
|
-
const start = (path: PathDefinition
|
|
77
|
+
const start = (path: PathDefinition<any>, initialData: PathData = {}): Promise<void> =>
|
|
78
78
|
engine.start(path, initialData);
|
|
79
79
|
|
|
80
|
-
const startSubPath = (path: PathDefinition
|
|
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
|
|
|
@@ -142,7 +143,7 @@ export interface PathShellActions {
|
|
|
142
143
|
export const PathShell = defineComponent({
|
|
143
144
|
name: "PathShell",
|
|
144
145
|
props: {
|
|
145
|
-
path: { type: Object as PropType<PathDefinition
|
|
146
|
+
path: { type: Object as PropType<PathDefinition<any>>, required: true },
|
|
146
147
|
initialData: { type: Object as PropType<PathData>, default: () => ({}) },
|
|
147
148
|
autoStart: { type: Boolean, default: true },
|
|
148
149
|
backLabel: { type: String, default: "Back" },
|
|
@@ -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;
|