@daltonr/pathwrite-svelte 0.6.3 → 0.7.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/LICENSE +1 -1
- package/README.md +6 -1
- package/dist/PathShell.svelte +31 -3
- package/dist/PathShell.svelte.d.ts +9 -1
- package/dist/PathShell.svelte.d.ts.map +1 -1
- package/dist/index.css +69 -0
- package/dist/index.svelte.d.ts +1 -1
- package/dist/index.svelte.d.ts.map +1 -1
- package/package.json +2 -2
- package/src/PathShell.svelte +31 -3
- package/src/index.svelte.ts +2 -0
package/LICENSE
CHANGED
package/README.md
CHANGED
|
@@ -532,7 +532,7 @@ setData('invalid', 'value');
|
|
|
532
532
|
|
|
533
533
|
## License
|
|
534
534
|
|
|
535
|
-
MIT
|
|
535
|
+
MIT — © 2026 Devjoy Ltd.
|
|
536
536
|
|
|
537
537
|
## See Also
|
|
538
538
|
|
|
@@ -540,3 +540,8 @@ MIT
|
|
|
540
540
|
- [@daltonr/pathwrite-store-http](../store-http) - HTTP persistence
|
|
541
541
|
- [Documentation](../../docs/guides/DEVELOPER_GUIDE.md)
|
|
542
542
|
|
|
543
|
+
|
|
544
|
+
---
|
|
545
|
+
|
|
546
|
+
© 2026 Devjoy Ltd. MIT License.
|
|
547
|
+
|
package/dist/PathShell.svelte
CHANGED
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
<script lang="ts">
|
|
2
2
|
import { onMount } from 'svelte';
|
|
3
3
|
import { usePath, setPathContext } from './index.svelte.js';
|
|
4
|
-
import type { PathDefinition, PathData, PathEngine, PathSnapshot } from './index.svelte.js';
|
|
4
|
+
import type { PathDefinition, PathData, PathEngine, PathSnapshot, ProgressLayout } from './index.svelte.js';
|
|
5
5
|
import type { Snippet } from 'svelte';
|
|
6
6
|
|
|
7
7
|
/** Converts a camelCase or lowercase field key to a display label. */
|
|
@@ -34,6 +34,14 @@
|
|
|
34
34
|
* - `"both"`: Render the shell summary AND whatever the step template renders.
|
|
35
35
|
*/
|
|
36
36
|
validationDisplay?: "summary" | "inline" | "both";
|
|
37
|
+
/**
|
|
38
|
+
* Controls how progress bars are arranged when a sub-path is active.
|
|
39
|
+
* - "merged" (default): Root and sub-path bars in one card.
|
|
40
|
+
* - "split": Root and sub-path bars as separate cards.
|
|
41
|
+
* - "rootOnly": Only the root bar — sub-path bar hidden.
|
|
42
|
+
* - "activeOnly": Only the active (sub-path) bar — root bar hidden.
|
|
43
|
+
*/
|
|
44
|
+
progressLayout?: ProgressLayout;
|
|
37
45
|
// Callback props replace event dispatching in Svelte 5
|
|
38
46
|
oncomplete?: (data: PathData) => void;
|
|
39
47
|
oncancel?: (data: PathData) => void;
|
|
@@ -58,6 +66,7 @@
|
|
|
58
66
|
hideProgress = false,
|
|
59
67
|
footerLayout = 'auto',
|
|
60
68
|
validationDisplay = 'inline',
|
|
69
|
+
progressLayout = 'merged',
|
|
61
70
|
oncomplete,
|
|
62
71
|
oncancel,
|
|
63
72
|
onevent,
|
|
@@ -123,7 +132,7 @@
|
|
|
123
132
|
}
|
|
124
133
|
</script>
|
|
125
134
|
|
|
126
|
-
<div class="pw-shell">
|
|
135
|
+
<div class="pw-shell {progressLayout !== 'merged' ? `pw-shell--progress-${progressLayout}` : ''}">
|
|
127
136
|
{#if !snap}
|
|
128
137
|
<div class="pw-shell__empty">
|
|
129
138
|
<p>No active path.</p>
|
|
@@ -134,8 +143,27 @@
|
|
|
134
143
|
{/if}
|
|
135
144
|
</div>
|
|
136
145
|
{:else}
|
|
146
|
+
<!-- Root progress: persistent top-level bar visible during sub-paths -->
|
|
147
|
+
{#if !hideProgress && snap.rootProgress && progressLayout !== 'activeOnly'}
|
|
148
|
+
<div class="pw-shell__root-progress">
|
|
149
|
+
<div class="pw-shell__steps">
|
|
150
|
+
{#each snap.rootProgress.steps as step, i}
|
|
151
|
+
<div class="pw-shell__step pw-shell__step--{step.status}">
|
|
152
|
+
<span class="pw-shell__step-dot">
|
|
153
|
+
{step.status === 'completed' ? '✓' : i + 1}
|
|
154
|
+
</span>
|
|
155
|
+
<span class="pw-shell__step-label">{step.title ?? step.id}</span>
|
|
156
|
+
</div>
|
|
157
|
+
{/each}
|
|
158
|
+
</div>
|
|
159
|
+
<div class="pw-shell__track">
|
|
160
|
+
<div class="pw-shell__track-fill" style="width: {snap.rootProgress.progress * 100}%"></div>
|
|
161
|
+
</div>
|
|
162
|
+
</div>
|
|
163
|
+
{/if}
|
|
164
|
+
|
|
137
165
|
<!-- Header: progress indicator (overridable via header snippet) -->
|
|
138
|
-
{#if !hideProgress}
|
|
166
|
+
{#if !hideProgress && progressLayout !== 'rootOnly'}
|
|
139
167
|
{#if header}
|
|
140
168
|
{@render header(snap)}
|
|
141
169
|
{:else if snap.stepCount > 1 || snap.nestingLevel > 0}
|
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
import type { PathDefinition, PathData, PathEngine, PathSnapshot } from './index.svelte.js';
|
|
1
|
+
import type { PathDefinition, PathData, PathEngine, PathSnapshot, ProgressLayout } from './index.svelte.js';
|
|
2
2
|
import type { Snippet } from 'svelte';
|
|
3
3
|
interface Props {
|
|
4
4
|
path?: PathDefinition<any>;
|
|
@@ -25,6 +25,14 @@ interface Props {
|
|
|
25
25
|
* - `"both"`: Render the shell summary AND whatever the step template renders.
|
|
26
26
|
*/
|
|
27
27
|
validationDisplay?: "summary" | "inline" | "both";
|
|
28
|
+
/**
|
|
29
|
+
* Controls how progress bars are arranged when a sub-path is active.
|
|
30
|
+
* - "merged" (default): Root and sub-path bars in one card.
|
|
31
|
+
* - "split": Root and sub-path bars as separate cards.
|
|
32
|
+
* - "rootOnly": Only the root bar — sub-path bar hidden.
|
|
33
|
+
* - "activeOnly": Only the active (sub-path) bar — root bar hidden.
|
|
34
|
+
*/
|
|
35
|
+
progressLayout?: ProgressLayout;
|
|
28
36
|
oncomplete?: (data: PathData) => void;
|
|
29
37
|
oncancel?: (data: PathData) => void;
|
|
30
38
|
onevent?: (event: any) => void;
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"PathShell.svelte.d.ts","sourceRoot":"","sources":["../src/PathShell.svelte.ts"],"names":[],"mappings":"AAKA,OAAO,KAAK,EAAE,cAAc,EAAE,QAAQ,EAAE,UAAU,EAAE,YAAY,EAAE,MAAM,mBAAmB,CAAC;
|
|
1
|
+
{"version":3,"file":"PathShell.svelte.d.ts","sourceRoot":"","sources":["../src/PathShell.svelte.ts"],"names":[],"mappings":"AAKA,OAAO,KAAK,EAAE,cAAc,EAAE,QAAQ,EAAE,UAAU,EAAE,YAAY,EAAE,cAAc,EAAE,MAAM,mBAAmB,CAAC;AAC5G,OAAO,KAAK,EAAE,OAAO,EAAE,MAAM,QAAQ,CAAC;AAGpC,UAAU,KAAK;IACb,IAAI,CAAC,EAAE,cAAc,CAAC,GAAG,CAAC,CAAC;IAC3B,MAAM,CAAC,EAAE,UAAU,CAAC;IACpB,WAAW,CAAC,EAAE,QAAQ,CAAC;IACvB,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,aAAa,CAAC,EAAE,MAAM,CAAC;IACvB,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB,YAAY,CAAC,EAAE,OAAO,CAAC;IACvB;;;;;OAKG;IACH,YAAY,CAAC,EAAE,QAAQ,GAAG,MAAM,GAAG,MAAM,CAAC;IAC1C;;;;;OAKG;IACH,iBAAiB,CAAC,EAAE,SAAS,GAAG,QAAQ,GAAG,MAAM,CAAC;IAClD;;;;;;OAMG;IACH,cAAc,CAAC,EAAE,cAAc,CAAC;IAEhC,UAAU,CAAC,EAAE,CAAC,IAAI,EAAE,QAAQ,KAAK,IAAI,CAAC;IACtC,QAAQ,CAAC,EAAE,CAAC,IAAI,EAAE,QAAQ,KAAK,IAAI,CAAC;IACpC,OAAO,CAAC,EAAE,CAAC,KAAK,EAAE,GAAG,KAAK,IAAI,CAAC;IAE/B,MAAM,CAAC,EAAE,OAAO,CAAC,CAAC,YAAY,CAAC,GAAG,CAAC,CAAC,CAAC,CAAC;IACtC,MAAM,CAAC,EAAE,OAAO,CAAC,CAAC,YAAY,CAAC,GAAG,CAAC,EAAE,MAAM,CAAC,CAAC,CAAC;IAE9C,CAAC,GAAG,EAAE,MAAM,GAAG,OAAO,GAAG,GAAG,CAAC;CAC9B;AA4MH,QAAA,MAAM,SAAS;mBArHQ,QAAQ,IAAI,CAAC;MAqHmB,CAAC;AACxD,KAAK,SAAS,GAAG,UAAU,CAAC,OAAO,SAAS,CAAC,CAAC;AAC9C,eAAe,SAAS,CAAC"}
|
package/dist/index.css
CHANGED
|
@@ -77,6 +77,75 @@
|
|
|
77
77
|
font-size: 14px;
|
|
78
78
|
}
|
|
79
79
|
|
|
80
|
+
/* ------------------------------------------------------------------ */
|
|
81
|
+
/* Root progress — persistent top-level bar visible during sub-paths */
|
|
82
|
+
/* ------------------------------------------------------------------ */
|
|
83
|
+
.pw-shell__root-progress {
|
|
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__root-progress .pw-shell__steps {
|
|
91
|
+
display: flex;
|
|
92
|
+
justify-content: space-between;
|
|
93
|
+
margin-bottom: 12px;
|
|
94
|
+
}
|
|
95
|
+
|
|
96
|
+
.pw-shell__root-progress .pw-shell__step {
|
|
97
|
+
display: flex;
|
|
98
|
+
flex-direction: column;
|
|
99
|
+
align-items: center;
|
|
100
|
+
gap: 6px;
|
|
101
|
+
flex: 1;
|
|
102
|
+
}
|
|
103
|
+
|
|
104
|
+
/* Merge root progress + sub-path header into a single card */
|
|
105
|
+
.pw-shell__root-progress + .pw-shell__header {
|
|
106
|
+
margin-top: calc(-1 * var(--pw-shell-gap));
|
|
107
|
+
border-top: 1px solid var(--pw-color-border);
|
|
108
|
+
border-top-left-radius: 0;
|
|
109
|
+
border-top-right-radius: 0;
|
|
110
|
+
padding: 12px 24px 12px;
|
|
111
|
+
opacity: 0.6;
|
|
112
|
+
}
|
|
113
|
+
|
|
114
|
+
.pw-shell__root-progress:has(+ .pw-shell__header) {
|
|
115
|
+
border-bottom-left-radius: 0;
|
|
116
|
+
border-bottom-right-radius: 0;
|
|
117
|
+
padding-bottom: 12px;
|
|
118
|
+
}
|
|
119
|
+
|
|
120
|
+
.pw-shell__root-progress + .pw-shell__header .pw-shell__steps {
|
|
121
|
+
margin-bottom: 6px;
|
|
122
|
+
}
|
|
123
|
+
|
|
124
|
+
.pw-shell__root-progress + .pw-shell__header .pw-shell__step-dot {
|
|
125
|
+
width: 22px;
|
|
126
|
+
height: 22px;
|
|
127
|
+
font-size: 10px;
|
|
128
|
+
}
|
|
129
|
+
|
|
130
|
+
.pw-shell__root-progress + .pw-shell__header .pw-shell__step-label {
|
|
131
|
+
font-size: 10px;
|
|
132
|
+
}
|
|
133
|
+
|
|
134
|
+
.pw-shell__root-progress + .pw-shell__header .pw-shell__track {
|
|
135
|
+
height: 3px;
|
|
136
|
+
}
|
|
137
|
+
|
|
138
|
+
/* Split layout — disable the merged-card effect */
|
|
139
|
+
.pw-shell--progress-split .pw-shell__root-progress + .pw-shell__header {
|
|
140
|
+
margin-top: 0;
|
|
141
|
+
border-top: 1px solid var(--pw-color-border);
|
|
142
|
+
border-radius: var(--pw-shell-radius);
|
|
143
|
+
}
|
|
144
|
+
.pw-shell--progress-split .pw-shell__root-progress:has(+ .pw-shell__header) {
|
|
145
|
+
border-radius: var(--pw-shell-radius);
|
|
146
|
+
padding-bottom: 16px;
|
|
147
|
+
}
|
|
148
|
+
|
|
80
149
|
/* ------------------------------------------------------------------ */
|
|
81
150
|
/* Header — progress indicator */
|
|
82
151
|
/* ------------------------------------------------------------------ */
|
package/dist/index.svelte.d.ts
CHANGED
|
@@ -1,5 +1,5 @@
|
|
|
1
1
|
import type { PathData, PathDefinition, PathEngine, PathEvent, PathSnapshot } from "@daltonr/pathwrite-core";
|
|
2
|
-
export type { PathData, FieldErrors, PathDefinition, PathEngine, PathEvent, PathSnapshot, PathStep, PathStepContext, SerializedPathState } from "@daltonr/pathwrite-core";
|
|
2
|
+
export type { PathData, FieldErrors, PathDefinition, PathEngine, PathEvent, PathSnapshot, PathStep, PathStepContext, ProgressLayout, RootProgress, SerializedPathState } from "@daltonr/pathwrite-core";
|
|
3
3
|
export interface UsePathOptions {
|
|
4
4
|
/**
|
|
5
5
|
* An externally-managed `PathEngine` to subscribe to — for example, the engine
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"index.svelte.d.ts","sourceRoot":"","sources":["../src/index.svelte.ts"],"names":[],"mappings":"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"}
|
|
1
|
+
{"version":3,"file":"index.svelte.d.ts","sourceRoot":"","sources":["../src/index.svelte.ts"],"names":[],"mappings":"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"}
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@daltonr/pathwrite-svelte",
|
|
3
|
-
"version": "0.
|
|
3
|
+
"version": "0.7.0",
|
|
4
4
|
"type": "module",
|
|
5
5
|
"license": "MIT",
|
|
6
6
|
"description": "Svelte 5 adapter for @daltonr/pathwrite-core — runes-based reactive bindings and optional PathShell component.",
|
|
@@ -52,7 +52,7 @@
|
|
|
52
52
|
"svelte": ">=5.0.0"
|
|
53
53
|
},
|
|
54
54
|
"dependencies": {
|
|
55
|
-
"@daltonr/pathwrite-core": "^0.
|
|
55
|
+
"@daltonr/pathwrite-core": "^0.7.0"
|
|
56
56
|
},
|
|
57
57
|
"devDependencies": {
|
|
58
58
|
"@sveltejs/package": "^2.5.7",
|
package/src/PathShell.svelte
CHANGED
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
<script lang="ts">
|
|
2
2
|
import { onMount } from 'svelte';
|
|
3
3
|
import { usePath, setPathContext } from './index.svelte.js';
|
|
4
|
-
import type { PathDefinition, PathData, PathEngine, PathSnapshot } from './index.svelte.js';
|
|
4
|
+
import type { PathDefinition, PathData, PathEngine, PathSnapshot, ProgressLayout } from './index.svelte.js';
|
|
5
5
|
import type { Snippet } from 'svelte';
|
|
6
6
|
|
|
7
7
|
/** Converts a camelCase or lowercase field key to a display label. */
|
|
@@ -34,6 +34,14 @@
|
|
|
34
34
|
* - `"both"`: Render the shell summary AND whatever the step template renders.
|
|
35
35
|
*/
|
|
36
36
|
validationDisplay?: "summary" | "inline" | "both";
|
|
37
|
+
/**
|
|
38
|
+
* Controls how progress bars are arranged when a sub-path is active.
|
|
39
|
+
* - "merged" (default): Root and sub-path bars in one card.
|
|
40
|
+
* - "split": Root and sub-path bars as separate cards.
|
|
41
|
+
* - "rootOnly": Only the root bar — sub-path bar hidden.
|
|
42
|
+
* - "activeOnly": Only the active (sub-path) bar — root bar hidden.
|
|
43
|
+
*/
|
|
44
|
+
progressLayout?: ProgressLayout;
|
|
37
45
|
// Callback props replace event dispatching in Svelte 5
|
|
38
46
|
oncomplete?: (data: PathData) => void;
|
|
39
47
|
oncancel?: (data: PathData) => void;
|
|
@@ -58,6 +66,7 @@
|
|
|
58
66
|
hideProgress = false,
|
|
59
67
|
footerLayout = 'auto',
|
|
60
68
|
validationDisplay = 'inline',
|
|
69
|
+
progressLayout = 'merged',
|
|
61
70
|
oncomplete,
|
|
62
71
|
oncancel,
|
|
63
72
|
onevent,
|
|
@@ -123,7 +132,7 @@
|
|
|
123
132
|
}
|
|
124
133
|
</script>
|
|
125
134
|
|
|
126
|
-
<div class="pw-shell">
|
|
135
|
+
<div class="pw-shell {progressLayout !== 'merged' ? `pw-shell--progress-${progressLayout}` : ''}">
|
|
127
136
|
{#if !snap}
|
|
128
137
|
<div class="pw-shell__empty">
|
|
129
138
|
<p>No active path.</p>
|
|
@@ -134,8 +143,27 @@
|
|
|
134
143
|
{/if}
|
|
135
144
|
</div>
|
|
136
145
|
{:else}
|
|
146
|
+
<!-- Root progress: persistent top-level bar visible during sub-paths -->
|
|
147
|
+
{#if !hideProgress && snap.rootProgress && progressLayout !== 'activeOnly'}
|
|
148
|
+
<div class="pw-shell__root-progress">
|
|
149
|
+
<div class="pw-shell__steps">
|
|
150
|
+
{#each snap.rootProgress.steps as step, i}
|
|
151
|
+
<div class="pw-shell__step pw-shell__step--{step.status}">
|
|
152
|
+
<span class="pw-shell__step-dot">
|
|
153
|
+
{step.status === 'completed' ? '✓' : i + 1}
|
|
154
|
+
</span>
|
|
155
|
+
<span class="pw-shell__step-label">{step.title ?? step.id}</span>
|
|
156
|
+
</div>
|
|
157
|
+
{/each}
|
|
158
|
+
</div>
|
|
159
|
+
<div class="pw-shell__track">
|
|
160
|
+
<div class="pw-shell__track-fill" style="width: {snap.rootProgress.progress * 100}%"></div>
|
|
161
|
+
</div>
|
|
162
|
+
</div>
|
|
163
|
+
{/if}
|
|
164
|
+
|
|
137
165
|
<!-- Header: progress indicator (overridable via header snippet) -->
|
|
138
|
-
{#if !hideProgress}
|
|
166
|
+
{#if !hideProgress && progressLayout !== 'rootOnly'}
|
|
139
167
|
{#if header}
|
|
140
168
|
{@render header(snap)}
|
|
141
169
|
{:else if snap.stepCount > 1 || snap.nestingLevel > 0}
|