@daltonr/pathwrite-vue 0.1.5 → 0.2.1
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 +2 -1
- package/dist/index.d.ts +6 -4
- package/dist/index.js +6 -1
- package/dist/index.js.map +1 -1
- package/package.json +3 -3
- package/src/index.ts +17 -6
- package/dist/index.css +0 -228
package/README.md
CHANGED
|
@@ -50,9 +50,10 @@ const currentStep = computed(() => snapshot.value?.stepId ?? null);
|
|
|
50
50
|
| `start(definition, data?)` | `function` | Start or re-start a path. |
|
|
51
51
|
| `startSubPath(definition, data?)` | `function` | Push a sub-path. Requires an active path. |
|
|
52
52
|
| `next()` | `function` | Advance one step. Completes the path on the last step. |
|
|
53
|
-
| `previous()` | `function` | Go back one step.
|
|
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). |
|
|
55
55
|
| `goToStep(stepId)` | `function` | Jump directly to a step by ID. Calls `onLeave` / `onEnter` but bypasses guards and `shouldSkip`. |
|
|
56
|
+
| `goToStepChecked(stepId)` | `function` | Jump to a step by ID, checking `canMoveNext` (forward) or `canMovePrevious` (backward) first. Navigation is blocked if the guard returns false. |
|
|
56
57
|
| `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
58
|
|
|
58
59
|
### Typed snapshot data
|
package/dist/index.d.ts
CHANGED
|
@@ -8,9 +8,9 @@ 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
|
|
11
|
+
start: (path: PathDefinition<any>, initialData?: PathData) => Promise<void>;
|
|
12
12
|
/** Push a sub-path onto the stack. Requires an active path. */
|
|
13
|
-
startSubPath: (path: PathDefinition
|
|
13
|
+
startSubPath: (path: PathDefinition<any>, initialData?: PathData) => Promise<void>;
|
|
14
14
|
/** Advance one step. Completes the path on the last step. */
|
|
15
15
|
next: () => Promise<void>;
|
|
16
16
|
/** Go back one step. Cancels the path from the first step. */
|
|
@@ -19,6 +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
|
+
/** Jump directly to a step by ID, checking the current step's canMoveNext (forward) or canMovePrevious (backward) guard first. Navigation is blocked if the guard returns false. */
|
|
23
|
+
goToStepChecked: (stepId: string) => Promise<void>;
|
|
22
24
|
/** 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
25
|
setData: <K extends string & keyof TData>(key: K, value: TData[K]) => Promise<void>;
|
|
24
26
|
}
|
|
@@ -52,7 +54,7 @@ export interface PathShellActions {
|
|
|
52
54
|
*/
|
|
53
55
|
export declare const PathShell: import("vue").DefineComponent<import("vue").ExtractPropTypes<{
|
|
54
56
|
path: {
|
|
55
|
-
type: PropType<PathDefinition
|
|
57
|
+
type: PropType<PathDefinition<any>>;
|
|
56
58
|
required: true;
|
|
57
59
|
};
|
|
58
60
|
initialData: {
|
|
@@ -91,7 +93,7 @@ export declare const PathShell: import("vue").DefineComponent<import("vue").Extr
|
|
|
91
93
|
[key: string]: any;
|
|
92
94
|
}>, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, ("complete" | "cancel" | "event")[], "complete" | "cancel" | "event", import("vue").PublicProps, Readonly<import("vue").ExtractPropTypes<{
|
|
93
95
|
path: {
|
|
94
|
-
type: PropType<PathDefinition
|
|
96
|
+
type: PropType<PathDefinition<any>>;
|
|
95
97
|
required: true;
|
|
96
98
|
};
|
|
97
99
|
initialData: {
|
package/dist/index.js
CHANGED
|
@@ -23,8 +23,9 @@ 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 goToStepChecked = (stepId) => engine.goToStepChecked(stepId);
|
|
26
27
|
const setData = ((key, value) => engine.setData(key, value));
|
|
27
|
-
return { snapshot, start, startSubPath, next, previous, cancel, goToStep, setData };
|
|
28
|
+
return { snapshot, start, startSubPath, next, previous, cancel, goToStep, goToStepChecked, setData };
|
|
28
29
|
}
|
|
29
30
|
// ---------------------------------------------------------------------------
|
|
30
31
|
// Context — provide / inject
|
|
@@ -116,6 +117,10 @@ export const PathShell = defineComponent({
|
|
|
116
117
|
: renderVueHeader(snap)),
|
|
117
118
|
// Body — step content
|
|
118
119
|
h("div", { class: "pw-shell__body" }, stepContent ?? []),
|
|
120
|
+
// Validation messages
|
|
121
|
+
snap.validationMessages.length > 0
|
|
122
|
+
? h("ul", { class: "pw-shell__validation" }, snap.validationMessages.map((msg, i) => h("li", { key: i, class: "pw-shell__validation-item" }, msg)))
|
|
123
|
+
: null,
|
|
119
124
|
// Footer — navigation
|
|
120
125
|
slots.footer
|
|
121
126
|
? slots.footer({ snapshot: snap, actions })
|
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;
|
|
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,CAC5F,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;IAC5E,MAAM,eAAe,GAAG,CAAC,MAAc,EAAiB,EAAE,CAAC,MAAM,CAAC,eAAe,CAAC,MAAM,CAAC,CAAC;IAE1F,MAAM,OAAO,GAAG,CAAC,CAAiC,GAAM,EAAE,KAAe,EAAiB,EAAE,CAC1F,MAAM,CAAC,OAAO,CAAC,GAAG,EAAE,KAAgB,CAAC,CAAoC,CAAC;IAE5E,OAAO,EAAE,QAAQ,EAAE,KAAK,EAAE,YAAY,EAAE,IAAI,EAAE,QAAQ,EAAE,MAAM,EAAE,QAAQ,EAAE,eAAe,EAAE,OAAO,EAAE,CAAC;AACvG,CAAC;AAED,8EAA8E;AAC9E,6BAA6B;AAC7B,8EAA8E;AAE9E,0DAA0D;AAC1D,MAAM,gBAAgB,GAAgC,MAAM,CAAC,aAAa,CAAC,CAAC;AAE5E;;;;;;GAMG;AACH,MAAM,UAAU,cAAc;IAC5B,MAAM,GAAG,GAAG,MAAM,CAAC,gBAAgB,EAAE,IAAI,CAAC,CAAC;IAC3C,IAAI,GAAG,KAAK,IAAI,EAAE,CAAC;QACjB,MAAM,IAAI,KAAK,CAAC,mDAAmD,CAAC,CAAC;IACvE,CAAC;IACD,OAAO,GAA2B,CAAC;AACrC,CAAC;AAcD;;;;;;;;;;;GAWG;AACH,MAAM,CAAC,MAAM,SAAS,GAAG,eAAe,CAAC;IACvC,IAAI,EAAE,WAAW;IACjB,KAAK,EAAE;QACL,IAAI,EAAE,EAAE,IAAI,EAAE,MAAuC,EAAE,QAAQ,EAAE,IAAI,EAAE;QACvE,WAAW,EAAE,EAAE,IAAI,EAAE,MAA4B,EAAE,OAAO,EAAE,GAAG,EAAE,CAAC,CAAC,EAAE,CAAC,EAAE;QACxE,SAAS,EAAE,EAAE,IAAI,EAAE,OAAO,EAAE,OAAO,EAAE,IAAI,EAAE;QAC3C,SAAS,EAAE,EAAE,IAAI,EAAE,MAAM,EAAE,OAAO,EAAE,MAAM,EAAE;QAC5C,SAAS,EAAE,EAAE,IAAI,EAAE,MAAM,EAAE,OAAO,EAAE,MAAM,EAAE;QAC5C,WAAW,EAAE,EAAE,IAAI,EAAE,MAAM,EAAE,OAAO,EAAE,QAAQ,EAAE;QAChD,WAAW,EAAE,EAAE,IAAI,EAAE,MAAM,EAAE,OAAO,EAAE,QAAQ,EAAE;QAChD,UAAU,EAAE,EAAE,IAAI,EAAE,OAAO,EAAE,OAAO,EAAE,KAAK,EAAE;QAC7C,YAAY,EAAE,EAAE,IAAI,EAAE,OAAO,EAAE,OAAO,EAAE,KAAK,EAAE;KAChD;IACD,KAAK,EAAE,CAAC,UAAU,EAAE,QAAQ,EAAE,OAAO,CAAC;IACtC,KAAK,CAAC,KAAK,EAAE,EAAE,KAAK,EAAE,IAAI,EAAE;QAC1B,MAAM,UAAU,GAAG,OAAO,CAAC;YACzB,OAAO,CAAC,KAAK;gBACX,IAAI,CAAC,OAAO,EAAE,KAAK,CAAC,CAAC;gBACrB,IAAI,KAAK,CAAC,IAAI,KAAK,WAAW;oBAAE,IAAI,CAAC,UAAU,EAAE,KAAK,CAAC,IAAI,CAAC,CAAC;gBAC7D,IAAI,KAAK,CAAC,IAAI,KAAK,WAAW;oBAAE,IAAI,CAAC,QAAQ,EAAE,KAAK,CAAC,IAAI,CAAC,CAAC;YAC7D,CAAC;SACF,CAAC,CAAC;QAEH,MAAM,EAAE,QAAQ,EAAE,KAAK,EAAE,IAAI,EAAE,QAAQ,EAAE,MAAM,EAAE,QAAQ,EAAE,OAAO,EAAE,GAAG,UAAU,CAAC;QAElF,+DAA+D;QAC/D,OAAO,CAAC,gBAAgB,EAAE,UAAU,CAAC,CAAC;QAEtC,MAAM,OAAO,GAAG,GAAG,CAAC,KAAK,CAAC,CAAC;QAC3B,SAAS,CAAC,GAAG,EAAE;YACb,IAAI,KAAK,CAAC,SAAS,IAAI,CAAC,OAAO,CAAC,KAAK,EAAE,CAAC;gBACtC,OAAO,CAAC,KAAK,GAAG,IAAI,CAAC;gBACrB,KAAK,CAAC,KAAK,CAAC,IAAI,EAAE,KAAK,CAAC,WAAW,CAAC,CAAC;YACvC,CAAC;QACH,CAAC,CAAC,CAAC;QAEH,MAAM,OAAO,GAAqB,EAAE,IAAI,EAAE,QAAQ,EAAE,MAAM,EAAE,QAAQ,EAAE,OAAO,EAAE,CAAC;QAEhF,OAAO,GAAG,EAAE;YACV,MAAM,IAAI,GAAG,QAAQ,CAAC,KAA4B,CAAC;YAEnD,IAAI,CAAC,IAAI,EAAE,CAAC;gBACV,OAAO,CAAC,CAAC,KAAK,EAAE,EAAE,KAAK,EAAE,UAAU,EAAE,EACnC,CAAC,CAAC,KAAK,EAAE,EAAE,KAAK,EAAE,iBAAiB,EAAE,EAAE;oBACrC,CAAC,CAAC,GAAG,EAAE,iBAAiB,CAAC;oBACzB,CAAC,KAAK,CAAC,SAAS;wBACd,CAAC,CAAC,CAAC,CAAC,QAAQ,EAAE;4BACV,IAAI,EAAE,QAAQ;4BACd,KAAK,EAAE,qBAAqB;4BAC5B,OAAO,EAAE,GAAG,EAAE,CAAC,KAAK,CAAC,KAAK,CAAC,IAAI,EAAE,KAAK,CAAC,WAAW,CAAC;yBACpD,EAAE,OAAO,CAAC;wBACb,CAAC,CAAC,IAAI;iBACT,CAAC,CACH,CAAC;YACJ,CAAC;YAED,oEAAoE;YACpE,MAAM,QAAQ,GAAG,KAAK,CAAC,IAAI,CAAC,MAAM,CAAC,CAAC;YACpC,MAAM,WAAW,GAAG,QAAQ,CAAC,CAAC,CAAC,QAAQ,CAAC,EAAE,QAAQ,EAAE,IAAI,EAAE,CAAC,CAAC,CAAC,CAAC,IAAI,CAAC;YAEnE,OAAO,CAAC,CAAC,KAAK,EAAE,EAAE,KAAK,EAAE,UAAU,EAAE,EAAE;gBACrC,oBAAoB;gBACpB,CAAC,KAAK,CAAC,YAAY,IAAI,CACrB,KAAK,CAAC,MAAM;oBACV,CAAC,CAAC,KAAK,CAAC,MAAM,CAAC,EAAE,QAAQ,EAAE,IAAI,EAAE,CAAC;oBAClC,CAAC,CAAC,eAAe,CAAC,IAAI,CAAC,CAC1B;gBACD,sBAAsB;gBACtB,CAAC,CAAC,KAAK,EAAE,EAAE,KAAK,EAAE,gBAAgB,EAAE,EAAE,WAAW,IAAI,EAAE,CAAC;gBACxD,sBAAsB;gBACtB,IAAI,CAAC,kBAAkB,CAAC,MAAM,GAAG,CAAC;oBAChC,CAAC,CAAC,CAAC,CAAC,IAAI,EAAE,EAAE,KAAK,EAAE,sBAAsB,EAAE,EACvC,IAAI,CAAC,kBAAkB,CAAC,GAAG,CAAC,CAAC,GAAG,EAAE,CAAC,EAAE,EAAE,CACrC,CAAC,CAAC,IAAI,EAAE,EAAE,GAAG,EAAE,CAAC,EAAE,KAAK,EAAE,2BAA2B,EAAE,EAAE,GAAG,CAAC,CAC7D,CACF;oBACH,CAAC,CAAC,IAAI;gBACR,sBAAsB;gBACtB,KAAK,CAAC,MAAM;oBACV,CAAC,CAAC,KAAK,CAAC,MAAM,CAAC,EAAE,QAAQ,EAAE,IAAI,EAAE,OAAO,EAAE,CAAC;oBAC3C,CAAC,CAAC,eAAe,CAAC,IAAI,EAAE,OAAO,EAAE,KAAK,CAAC;aAC1C,CAAC,CAAC;QACL,CAAC,CAAC;IACJ,CAAC;CACF,CAAC,CAAC;AAEH,8EAA8E;AAC9E,sCAAsC;AACtC,8EAA8E;AAE9E,SAAS,eAAe,CAAC,QAAsB;IAC7C,OAAO,CAAC,CAAC,KAAK,EAAE,EAAE,KAAK,EAAE,kBAAkB,EAAE,EAAE;QAC7C,CAAC,CAAC,KAAK,EAAE,EAAE,KAAK,EAAE,iBAAiB,EAAE,EACnC,QAAQ,CAAC,KAAK,CAAC,GAAG,CAAC,CAAC,IAAI,EAAE,CAAC,EAAE,EAAE,CAC7B,CAAC,CAAC,KAAK,EAAE;YACP,GAAG,EAAE,IAAI,CAAC,EAAE;YACZ,KAAK,EAAE,CAAC,gBAAgB,EAAE,mBAAmB,IAAI,CAAC,MAAM,EAAE,CAAC;SAC5D,EAAE;YACD,CAAC,CAAC,MAAM,EAAE,EAAE,KAAK,EAAE,oBAAoB,EAAE,EACvC,IAAI,CAAC,MAAM,KAAK,WAAW,CAAC,CAAC,CAAC,GAAG,CAAC,CAAC,CAAC,MAAM,CAAC,CAAC,GAAG,CAAC,CAAC,CAClD;YACD,CAAC,CAAC,MAAM,EAAE,EAAE,KAAK,EAAE,sBAAsB,EAAE,EACzC,IAAI,CAAC,KAAK,IAAI,IAAI,CAAC,EAAE,CACtB;SACF,CAAC,CACH,CACF;QACD,CAAC,CAAC,KAAK,EAAE,EAAE,KAAK,EAAE,iBAAiB,EAAE,EACnC,CAAC,CAAC,KAAK,EAAE;YACP,KAAK,EAAE,sBAAsB;YAC7B,KAAK,EAAE,EAAE,KAAK,EAAE,GAAG,QAAQ,CAAC,QAAQ,GAAG,GAAG,GAAG,EAAE;SAChD,CAAC,CACH;KACF,CAAC,CAAC;AACL,CAAC;AAED,8EAA8E;AAC9E,sCAAsC;AACtC,8EAA8E;AAE9E,SAAS,eAAe,CACtB,QAAsB,EACtB,OAAyB,EACzB,KAA8G;IAE9G,OAAO,CAAC,CAAC,KAAK,EAAE,EAAE,KAAK,EAAE,kBAAkB,EAAE,EAAE;QAC7C,CAAC,CAAC,KAAK,EAAE,EAAE,KAAK,EAAE,uBAAuB,EAAE,EAAE;YAC3C,CAAC,QAAQ,CAAC,WAAW;gBACnB,CAAC,CAAC,CAAC,CAAC,QAAQ,EAAE;oBACV,IAAI,EAAE,QAAQ;oBACd,KAAK,EAAE,mCAAmC;oBAC1C,QAAQ,EAAE,QAAQ,CAAC,YAAY,IAAI,CAAC,QAAQ,CAAC,eAAe;oBAC5D,OAAO,EAAE,OAAO,CAAC,QAAQ;iBAC1B,EAAE,KAAK,CAAC,SAAS,CAAC;gBACrB,CAAC,CAAC,IAAI;SACT,CAAC;QACF,CAAC,CAAC,KAAK,EAAE,EAAE,KAAK,EAAE,wBAAwB,EAAE,EAAE;YAC5C,CAAC,KAAK,CAAC,UAAU;gBACf,CAAC,CAAC,CAAC,CAAC,QAAQ,EAAE;oBACV,IAAI,EAAE,QAAQ;oBACd,KAAK,EAAE,qCAAqC;oBAC5C,QAAQ,EAAE,QAAQ,CAAC,YAAY;oBAC/B,OAAO,EAAE,OAAO,CAAC,MAAM;iBACxB,EAAE,KAAK,CAAC,WAAW,CAAC;gBACvB,CAAC,CAAC,IAAI;YACR,CAAC,CAAC,QAAQ,EAAE;gBACV,IAAI,EAAE,QAAQ;gBACd,KAAK,EAAE,mCAAmC;gBAC1C,QAAQ,EAAE,QAAQ,CAAC,YAAY,IAAI,CAAC,QAAQ,CAAC,WAAW;gBACxD,OAAO,EAAE,OAAO,CAAC,IAAI;aACtB,EAAE,QAAQ,CAAC,UAAU,CAAC,CAAC,CAAC,KAAK,CAAC,WAAW,CAAC,CAAC,CAAC,KAAK,CAAC,SAAS,CAAC;SAC9D,CAAC;KACH,CAAC,CAAC;AACL,CAAC"}
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@daltonr/pathwrite-vue",
|
|
3
|
-
"version": "0.1
|
|
3
|
+
"version": "0.2.1",
|
|
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.1
|
|
49
|
+
"@daltonr/pathwrite-core": "^0.2.1"
|
|
50
50
|
},
|
|
51
51
|
"devDependencies": {
|
|
52
52
|
"@vue/test-utils": "^2.4.6",
|
package/src/index.ts
CHANGED
|
@@ -36,9 +36,9 @@ 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
|
|
39
|
+
start: (path: PathDefinition<any>, initialData?: PathData) => Promise<void>;
|
|
40
40
|
/** Push a sub-path onto the stack. Requires an active path. */
|
|
41
|
-
startSubPath: (path: PathDefinition
|
|
41
|
+
startSubPath: (path: PathDefinition<any>, initialData?: PathData) => Promise<void>;
|
|
42
42
|
/** Advance one step. Completes the path on the last step. */
|
|
43
43
|
next: () => Promise<void>;
|
|
44
44
|
/** Go back one step. Cancels the path from the first step. */
|
|
@@ -47,6 +47,8 @@ export interface UsePathReturn<TData extends PathData = PathData> {
|
|
|
47
47
|
cancel: () => Promise<void>;
|
|
48
48
|
/** Jump directly to a step by ID. Calls onLeave / onEnter but bypasses guards and shouldSkip. */
|
|
49
49
|
goToStep: (stepId: string) => Promise<void>;
|
|
50
|
+
/** Jump directly to a step by ID, checking the current step's canMoveNext (forward) or canMovePrevious (backward) guard first. Navigation is blocked if the guard returns false. */
|
|
51
|
+
goToStepChecked: (stepId: string) => Promise<void>;
|
|
50
52
|
/** 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
53
|
setData: <K extends string & keyof TData>(key: K, value: TData[K]) => Promise<void>;
|
|
52
54
|
}
|
|
@@ -72,10 +74,10 @@ export function usePath<TData extends PathData = PathData>(options?: UsePathOpti
|
|
|
72
74
|
|
|
73
75
|
const snapshot = readonly(_snapshot) as DeepReadonly<Ref<PathSnapshot<TData> | null>>;
|
|
74
76
|
|
|
75
|
-
const start = (path: PathDefinition
|
|
77
|
+
const start = (path: PathDefinition<any>, initialData: PathData = {}): Promise<void> =>
|
|
76
78
|
engine.start(path, initialData);
|
|
77
79
|
|
|
78
|
-
const startSubPath = (path: PathDefinition
|
|
80
|
+
const startSubPath = (path: PathDefinition<any>, initialData: PathData = {}): Promise<void> =>
|
|
79
81
|
engine.startSubPath(path, initialData);
|
|
80
82
|
|
|
81
83
|
const next = (): Promise<void> => engine.next();
|
|
@@ -83,11 +85,12 @@ export function usePath<TData extends PathData = PathData>(options?: UsePathOpti
|
|
|
83
85
|
const cancel = (): Promise<void> => engine.cancel();
|
|
84
86
|
|
|
85
87
|
const goToStep = (stepId: string): Promise<void> => engine.goToStep(stepId);
|
|
88
|
+
const goToStepChecked = (stepId: string): Promise<void> => engine.goToStepChecked(stepId);
|
|
86
89
|
|
|
87
90
|
const setData = (<K extends string & keyof TData>(key: K, value: TData[K]): Promise<void> =>
|
|
88
91
|
engine.setData(key, value as unknown)) as UsePathReturn<TData>["setData"];
|
|
89
92
|
|
|
90
|
-
return { snapshot, start, startSubPath, next, previous, cancel, goToStep, setData };
|
|
93
|
+
return { snapshot, start, startSubPath, next, previous, cancel, goToStep, goToStepChecked, setData };
|
|
91
94
|
}
|
|
92
95
|
|
|
93
96
|
// ---------------------------------------------------------------------------
|
|
@@ -139,7 +142,7 @@ export interface PathShellActions {
|
|
|
139
142
|
export const PathShell = defineComponent({
|
|
140
143
|
name: "PathShell",
|
|
141
144
|
props: {
|
|
142
|
-
path: { type: Object as PropType<PathDefinition
|
|
145
|
+
path: { type: Object as PropType<PathDefinition<any>>, required: true },
|
|
143
146
|
initialData: { type: Object as PropType<PathData>, default: () => ({}) },
|
|
144
147
|
autoStart: { type: Boolean, default: true },
|
|
145
148
|
backLabel: { type: String, default: "Back" },
|
|
@@ -205,6 +208,14 @@ export const PathShell = defineComponent({
|
|
|
205
208
|
),
|
|
206
209
|
// Body — step content
|
|
207
210
|
h("div", { class: "pw-shell__body" }, stepContent ?? []),
|
|
211
|
+
// Validation messages
|
|
212
|
+
snap.validationMessages.length > 0
|
|
213
|
+
? h("ul", { class: "pw-shell__validation" },
|
|
214
|
+
snap.validationMessages.map((msg, i) =>
|
|
215
|
+
h("li", { key: i, class: "pw-shell__validation-item" }, msg)
|
|
216
|
+
)
|
|
217
|
+
)
|
|
218
|
+
: null,
|
|
208
219
|
// Footer — navigation
|
|
209
220
|
slots.footer
|
|
210
221
|
? slots.footer({ snapshot: snap, actions })
|
package/dist/index.css
DELETED
|
@@ -1,228 +0,0 @@
|
|
|
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:
|
|
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
|
|
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
|
-
/* Footer — navigation buttons */
|
|
175
|
-
/* ------------------------------------------------------------------ */
|
|
176
|
-
.pw-shell__footer {
|
|
177
|
-
display: flex;
|
|
178
|
-
justify-content: space-between;
|
|
179
|
-
align-items: center;
|
|
180
|
-
}
|
|
181
|
-
|
|
182
|
-
.pw-shell__footer-left,
|
|
183
|
-
.pw-shell__footer-right {
|
|
184
|
-
display: flex;
|
|
185
|
-
gap: 8px;
|
|
186
|
-
}
|
|
187
|
-
|
|
188
|
-
.pw-shell__btn {
|
|
189
|
-
border: 1px solid var(--pw-color-btn-border);
|
|
190
|
-
background: var(--pw-color-btn-bg);
|
|
191
|
-
color: var(--pw-color-text);
|
|
192
|
-
padding: var(--pw-btn-padding);
|
|
193
|
-
border-radius: var(--pw-btn-radius);
|
|
194
|
-
cursor: pointer;
|
|
195
|
-
font-size: 14px;
|
|
196
|
-
transition: background 0.15s ease, border-color 0.15s ease;
|
|
197
|
-
}
|
|
198
|
-
|
|
199
|
-
.pw-shell__btn:hover:not(:disabled) {
|
|
200
|
-
background: var(--pw-color-border);
|
|
201
|
-
}
|
|
202
|
-
|
|
203
|
-
.pw-shell__btn:disabled {
|
|
204
|
-
opacity: 0.5;
|
|
205
|
-
cursor: not-allowed;
|
|
206
|
-
}
|
|
207
|
-
|
|
208
|
-
.pw-shell__btn--next {
|
|
209
|
-
background: var(--pw-color-primary);
|
|
210
|
-
border-color: var(--pw-color-primary);
|
|
211
|
-
color: #fff;
|
|
212
|
-
}
|
|
213
|
-
|
|
214
|
-
.pw-shell__btn--next:hover:not(:disabled) {
|
|
215
|
-
background: #1d4ed8;
|
|
216
|
-
border-color: #1d4ed8;
|
|
217
|
-
}
|
|
218
|
-
|
|
219
|
-
.pw-shell__btn--cancel {
|
|
220
|
-
color: var(--pw-color-muted);
|
|
221
|
-
border-color: transparent;
|
|
222
|
-
background: transparent;
|
|
223
|
-
}
|
|
224
|
-
|
|
225
|
-
.pw-shell__btn--cancel:hover:not(:disabled) {
|
|
226
|
-
background: var(--pw-color-primary-light);
|
|
227
|
-
}
|
|
228
|
-
|