@softwareone/spi-sv5-library 0.1.2 → 0.1.3
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.
|
@@ -1,5 +1,4 @@
|
|
|
1
1
|
<script lang="ts">
|
|
2
|
-
import { Menu, CircleHelp, Bell } from 'lucide-svelte';
|
|
3
2
|
import HeaderLogo from './HeaderLogo.svelte';
|
|
4
3
|
import HeaderAccount from './HeaderAccount.svelte';
|
|
5
4
|
import HeaderLoader from './HeaderLoader.svelte';
|
|
@@ -7,14 +6,18 @@
|
|
|
7
6
|
interface HeaderProps {
|
|
8
7
|
title?: string;
|
|
9
8
|
homeUrl?: string;
|
|
9
|
+
disableMenuButton?: boolean;
|
|
10
10
|
menuButton?: () => void;
|
|
11
|
+
hideAccount?: boolean;
|
|
12
|
+
hideHelp?: boolean;
|
|
13
|
+
hideNotification?: boolean;
|
|
11
14
|
accountName?: string;
|
|
12
15
|
userName?: string;
|
|
13
16
|
profileUrl?: string;
|
|
14
|
-
|
|
17
|
+
hideLoader?: boolean;
|
|
15
18
|
}
|
|
16
19
|
|
|
17
|
-
let { title, homeUrl, menuButton, accountName, userName, profileUrl,
|
|
20
|
+
let { title, homeUrl, disableMenuButton, menuButton, hideAccount, hideHelp, hideNotification, accountName, userName, profileUrl, hideLoader }: HeaderProps =
|
|
18
21
|
$props();
|
|
19
22
|
|
|
20
23
|
title = title || 'Default Title';
|
|
@@ -22,7 +25,6 @@
|
|
|
22
25
|
accountName = accountName || 'Company Name';
|
|
23
26
|
userName = userName || 'User Name';
|
|
24
27
|
profileUrl = profileUrl || '/profile';
|
|
25
|
-
loader = loader || true;
|
|
26
28
|
|
|
27
29
|
if (!menuButton) {
|
|
28
30
|
menuButton = () => {
|
|
@@ -35,8 +37,15 @@
|
|
|
35
37
|
<div class="header">
|
|
36
38
|
<div class="header-left">
|
|
37
39
|
<div class="header-hamburger">
|
|
38
|
-
<button class=
|
|
39
|
-
<
|
|
40
|
+
<button class={`header-hamburger ${disableMenuButton ? "cursor-default" : "cursor-pointer"}`} onclick={menuButton} aria-labelledby="menu-button">
|
|
41
|
+
<svg
|
|
42
|
+
xmlns="http://www.w3.org/2000/svg"
|
|
43
|
+
height="24px"
|
|
44
|
+
viewBox="0 -960 960 960"
|
|
45
|
+
width="24px"
|
|
46
|
+
fill="#6b7180"
|
|
47
|
+
><path d="M120-240v-80h720v80H120Zm0-200v-80h720v80H120Zm0-200v-80h720v80H120Z" /></svg
|
|
48
|
+
>
|
|
40
49
|
</button>
|
|
41
50
|
</div>
|
|
42
51
|
<div class="header-logo">
|
|
@@ -49,18 +58,46 @@
|
|
|
49
58
|
</div>
|
|
50
59
|
</div>
|
|
51
60
|
<div class="header-right">
|
|
52
|
-
|
|
53
|
-
<button class="header-btn"
|
|
54
|
-
|
|
55
|
-
|
|
56
|
-
|
|
57
|
-
|
|
58
|
-
|
|
61
|
+
{#if !hideHelp}
|
|
62
|
+
<button class="header-btn" aria-labelledby="help-button">
|
|
63
|
+
<svg
|
|
64
|
+
xmlns="http://www.w3.org/2000/svg"
|
|
65
|
+
height="24px"
|
|
66
|
+
viewBox="0 -960 960 960"
|
|
67
|
+
width="24px"
|
|
68
|
+
fill="#6b7180"
|
|
69
|
+
><path
|
|
70
|
+
d="M478-240q21 0 35.5-14.5T528-290q0-21-14.5-35.5T478-340q-21 0-35.5 14.5T428-290q0 21 14.5 35.5T478-240Zm-36-154h74q0-33 7.5-52t42.5-52q26-26 41-49.5t15-56.5q0-56-41-86t-97-30q-57 0-92.5 30T342-618l66 26q5-18 22.5-39t53.5-21q32 0 48 17.5t16 38.5q0 20-12 37.5T506-526q-44 39-54 59t-10 73Zm38 314q-83 0-156-31.5T197-197q-54-54-85.5-127T80-480q0-83 31.5-156T197-763q54-54 127-85.5T480-880q83 0 156 31.5T763-763q54 54 85.5 127T880-480q0 83-31.5 156T763-197q-54 54-127 85.5T480-80Zm0-80q134 0 227-93t93-227q0-134-93-227t-227-93q-134 0-227 93t-93 227q0 134 93 227t227 93Zm0-320Z"
|
|
71
|
+
/></svg
|
|
72
|
+
>
|
|
73
|
+
</button>
|
|
74
|
+
{/if}
|
|
75
|
+
{#if !hideNotification}
|
|
76
|
+
<button class="header-btn" aria-labelledby="notification-button">
|
|
77
|
+
<svg
|
|
78
|
+
xmlns="http://www.w3.org/2000/svg"
|
|
79
|
+
height="24px"
|
|
80
|
+
viewBox="0 -960 960 960"
|
|
81
|
+
width="24px"
|
|
82
|
+
fill="#6b7180"
|
|
83
|
+
><path
|
|
84
|
+
d="M160-200v-80h80v-280q0-83 50-147.5T420-792v-28q0-25 17.5-42.5T480-880q25 0 42.5 17.5T540-820v28q80 20 130 84.5T720-560v280h80v80H160Zm320-300Zm0 420q-33 0-56.5-23.5T400-160h160q0 33-23.5 56.5T480-80ZM320-280h320v-280q0-66-47-113t-113-47q-66 0-113 47t-47 113v280Z"
|
|
85
|
+
/></svg
|
|
86
|
+
>
|
|
87
|
+
</button>
|
|
88
|
+
{/if}
|
|
89
|
+
{#if !hideAccount}
|
|
90
|
+
<div>
|
|
91
|
+
<a class="header-btn" href={profileUrl}>
|
|
92
|
+
<HeaderAccount {accountName} {userName} />
|
|
93
|
+
</a>
|
|
94
|
+
</div>
|
|
95
|
+
{/if}
|
|
59
96
|
</div>
|
|
60
97
|
</div>
|
|
61
98
|
</div>
|
|
62
99
|
|
|
63
|
-
{#if
|
|
100
|
+
{#if !hideLoader}
|
|
64
101
|
<HeaderLoader />
|
|
65
102
|
{/if}
|
|
66
103
|
|
|
@@ -103,7 +140,6 @@
|
|
|
103
140
|
align-items: center;
|
|
104
141
|
gap: 10px;
|
|
105
142
|
border: none;
|
|
106
|
-
cursor: pointer;
|
|
107
143
|
background-color: transparent;
|
|
108
144
|
color: #6b7180;
|
|
109
145
|
}
|
|
@@ -133,4 +169,11 @@
|
|
|
133
169
|
.header-btn:hover {
|
|
134
170
|
cursor: pointer;
|
|
135
171
|
}
|
|
172
|
+
|
|
173
|
+
.cursor-default {
|
|
174
|
+
cursor: default;
|
|
175
|
+
}
|
|
176
|
+
.cursor-pointer {
|
|
177
|
+
cursor: pointer;
|
|
178
|
+
}
|
|
136
179
|
</style>
|
|
@@ -1,11 +1,15 @@
|
|
|
1
1
|
interface HeaderProps {
|
|
2
2
|
title?: string;
|
|
3
3
|
homeUrl?: string;
|
|
4
|
+
disableMenuButton?: boolean;
|
|
4
5
|
menuButton?: () => void;
|
|
6
|
+
hideAccount?: boolean;
|
|
7
|
+
hideHelp?: boolean;
|
|
8
|
+
hideNotification?: boolean;
|
|
5
9
|
accountName?: string;
|
|
6
10
|
userName?: string;
|
|
7
11
|
profileUrl?: string;
|
|
8
|
-
|
|
12
|
+
hideLoader?: boolean;
|
|
9
13
|
}
|
|
10
14
|
declare const Header: import("svelte").Component<HeaderProps, {}, "">;
|
|
11
15
|
type Header = ReturnType<typeof Header>;
|
|
@@ -0,0 +1,370 @@
|
|
|
1
|
+
<script lang="ts">
|
|
2
|
+
import { addToast } from '../Toast/toastState.svelte';
|
|
3
|
+
|
|
4
|
+
interface Step {
|
|
5
|
+
title: string;
|
|
6
|
+
description: string;
|
|
7
|
+
isValid?: boolean;
|
|
8
|
+
}
|
|
9
|
+
|
|
10
|
+
interface StepProps {
|
|
11
|
+
steps: Step[];
|
|
12
|
+
currentStep?: number;
|
|
13
|
+
isFormValid?: boolean;
|
|
14
|
+
onFinalStepAction?: () => void;
|
|
15
|
+
useAsPopUp?: boolean;
|
|
16
|
+
children?: () => any;
|
|
17
|
+
}
|
|
18
|
+
|
|
19
|
+
let {
|
|
20
|
+
steps = $bindable(),
|
|
21
|
+
currentStep = $bindable(1),
|
|
22
|
+
isFormValid = $bindable(),
|
|
23
|
+
onFinalStepAction,
|
|
24
|
+
useAsPopUp = false,
|
|
25
|
+
children
|
|
26
|
+
}: StepProps = $props();
|
|
27
|
+
|
|
28
|
+
steps = steps.map((step) => ({
|
|
29
|
+
...step,
|
|
30
|
+
isValid: step.isValid ?? true
|
|
31
|
+
}));
|
|
32
|
+
|
|
33
|
+
let completedSteps = $state<Set<number>>(new Set());
|
|
34
|
+
let stepsFormInstance: any;
|
|
35
|
+
|
|
36
|
+
const goToStep = (step: number) => {
|
|
37
|
+
if (step <= steps.length) {
|
|
38
|
+
for (let i = 1; i <= step; i++) {
|
|
39
|
+
completedSteps.add(i);
|
|
40
|
+
}
|
|
41
|
+
currentStep = step;
|
|
42
|
+
}
|
|
43
|
+
};
|
|
44
|
+
|
|
45
|
+
const nextStep = () => {
|
|
46
|
+
if (stepsFormInstance && !stepsFormInstance.validateCurrentStep()) {
|
|
47
|
+
isFormValid = false;
|
|
48
|
+
return;
|
|
49
|
+
}
|
|
50
|
+
if (currentStep < steps.length) {
|
|
51
|
+
goToStep(currentStep + 1);
|
|
52
|
+
} else {
|
|
53
|
+
addToast({
|
|
54
|
+
type: 'success',
|
|
55
|
+
message: 'Form submitted successfully!'
|
|
56
|
+
});
|
|
57
|
+
}
|
|
58
|
+
};
|
|
59
|
+
|
|
60
|
+
const previousStep = () => {
|
|
61
|
+
if (currentStep > 1) goToStep(currentStep - 1);
|
|
62
|
+
};
|
|
63
|
+
|
|
64
|
+
const onClose = () => {
|
|
65
|
+
if (useAsPopUp) {
|
|
66
|
+
// Logic to close the pop-up
|
|
67
|
+
}
|
|
68
|
+
};
|
|
69
|
+
</script>
|
|
70
|
+
|
|
71
|
+
<div class="progress-wizard">
|
|
72
|
+
<!-- Header -->
|
|
73
|
+
<div class="progress-header">
|
|
74
|
+
<div class="title">Create workspace</div>
|
|
75
|
+
<div class="header-actions">
|
|
76
|
+
{#if useAsPopUp}
|
|
77
|
+
<button class="link close" onclick={onClose}>
|
|
78
|
+
<span class="material-icons-outlined">close</span>
|
|
79
|
+
</button>
|
|
80
|
+
{/if}
|
|
81
|
+
</div>
|
|
82
|
+
</div>
|
|
83
|
+
|
|
84
|
+
<!-- Sidebar + Content -->
|
|
85
|
+
<div class="progress-body">
|
|
86
|
+
<!-- Sidebar -->
|
|
87
|
+
<div class="progress-sidebar">
|
|
88
|
+
<ol>
|
|
89
|
+
{#each steps as step, index}
|
|
90
|
+
<li
|
|
91
|
+
class:completed={completedSteps.has(index + 1)}
|
|
92
|
+
class:active={currentStep === index + 1}
|
|
93
|
+
>
|
|
94
|
+
<button
|
|
95
|
+
type="button"
|
|
96
|
+
onclick={() => goToStep(index + 1)}
|
|
97
|
+
class="step-button"
|
|
98
|
+
class:done={index + 1 < currentStep}
|
|
99
|
+
>
|
|
100
|
+
<div class="step-line-wrapper">
|
|
101
|
+
{#if index < steps.length - 1}
|
|
102
|
+
<div class="step-line"></div>
|
|
103
|
+
{/if}
|
|
104
|
+
<span class="step-icon" class:error={!step.isValid && index + 1 < currentStep}>
|
|
105
|
+
{#if index + 1 < currentStep && step.isValid}
|
|
106
|
+
✔
|
|
107
|
+
{:else if !step.isValid && index + 1 < currentStep}
|
|
108
|
+
x
|
|
109
|
+
{:else}
|
|
110
|
+
{index + 1}
|
|
111
|
+
{/if}
|
|
112
|
+
</span>
|
|
113
|
+
</div>
|
|
114
|
+
<div class="step-details">
|
|
115
|
+
<strong>{step.title}</strong>
|
|
116
|
+
<small>{step.description}</small>
|
|
117
|
+
</div>
|
|
118
|
+
</button>
|
|
119
|
+
</li>
|
|
120
|
+
{/each}
|
|
121
|
+
</ol>
|
|
122
|
+
</div>
|
|
123
|
+
|
|
124
|
+
<!-- Main Content -->
|
|
125
|
+
<div class="progress-content">
|
|
126
|
+
<div class="step-content">
|
|
127
|
+
{@render children?.()}
|
|
128
|
+
</div>
|
|
129
|
+
</div>
|
|
130
|
+
</div>
|
|
131
|
+
|
|
132
|
+
<!-- Footer -->
|
|
133
|
+
<div class="progress-footer">
|
|
134
|
+
<button class="btn link">Cancel</button>
|
|
135
|
+
<div class="action-buttons">
|
|
136
|
+
<button class="btn secondary" onclick={previousStep} disabled={currentStep === 1}>Back</button
|
|
137
|
+
>
|
|
138
|
+
<button
|
|
139
|
+
class="btn primary"
|
|
140
|
+
onclick={nextStep}
|
|
141
|
+
disabled={currentStep === steps.length && !isFormValid}
|
|
142
|
+
>
|
|
143
|
+
{currentStep === steps.length ? 'Create' : 'Next'}
|
|
144
|
+
</button>
|
|
145
|
+
</div>
|
|
146
|
+
</div>
|
|
147
|
+
</div>
|
|
148
|
+
|
|
149
|
+
<style>
|
|
150
|
+
/* Layout */
|
|
151
|
+
.progress-wizard {
|
|
152
|
+
display: flex;
|
|
153
|
+
flex-direction: column;
|
|
154
|
+
width: 100%;
|
|
155
|
+
max-width: 97vw;
|
|
156
|
+
margin: 0 auto;
|
|
157
|
+
background: #fff;
|
|
158
|
+
border-radius: 8px;
|
|
159
|
+
box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
|
|
160
|
+
overflow: hidden;
|
|
161
|
+
font-family: 'Haas Grotesk Display Pro', sans-serif;
|
|
162
|
+
font-size: 14px;
|
|
163
|
+
}
|
|
164
|
+
|
|
165
|
+
.progress-body {
|
|
166
|
+
display: flex;
|
|
167
|
+
width: 100%;
|
|
168
|
+
}
|
|
169
|
+
|
|
170
|
+
.progress-sidebar {
|
|
171
|
+
width: 100%;
|
|
172
|
+
min-width: 226px;
|
|
173
|
+
max-width: 226px;
|
|
174
|
+
min-height: 50vh;
|
|
175
|
+
border-right: 1px solid #e6e6e6;
|
|
176
|
+
}
|
|
177
|
+
|
|
178
|
+
.progress-content {
|
|
179
|
+
flex-grow: 1;
|
|
180
|
+
padding: 24px;
|
|
181
|
+
margin-bottom: -20px;
|
|
182
|
+
}
|
|
183
|
+
|
|
184
|
+
/* Header */
|
|
185
|
+
.progress-header {
|
|
186
|
+
display: flex;
|
|
187
|
+
align-items: center;
|
|
188
|
+
justify-content: space-between;
|
|
189
|
+
padding: 24px;
|
|
190
|
+
gap: var(--spacing-2, 16px);
|
|
191
|
+
border-bottom: 2px solid transparent;
|
|
192
|
+
border-image: linear-gradient(259deg, #00c9cd 16.32%, #472aff 59.03%, #392d9c 99.99%);
|
|
193
|
+
border-image-slice: 1;
|
|
194
|
+
}
|
|
195
|
+
|
|
196
|
+
.progress-header .title {
|
|
197
|
+
color: var(--brand-type, #000);
|
|
198
|
+
font-size: 18px;
|
|
199
|
+
font-weight: 600;
|
|
200
|
+
line-height: 26px;
|
|
201
|
+
flex: 1 0 0;
|
|
202
|
+
}
|
|
203
|
+
|
|
204
|
+
.progress-header .header-actions button span {
|
|
205
|
+
font-size: 24px;
|
|
206
|
+
}
|
|
207
|
+
|
|
208
|
+
/* Sidebar Steps */
|
|
209
|
+
.progress-sidebar ol {
|
|
210
|
+
list-style: none;
|
|
211
|
+
padding: 0;
|
|
212
|
+
margin: 0;
|
|
213
|
+
}
|
|
214
|
+
|
|
215
|
+
.progress-sidebar li {
|
|
216
|
+
display: flex;
|
|
217
|
+
position: relative;
|
|
218
|
+
cursor: default;
|
|
219
|
+
padding: 16px 24px;
|
|
220
|
+
gap: 8px;
|
|
221
|
+
color: inherit;
|
|
222
|
+
}
|
|
223
|
+
|
|
224
|
+
.progress-sidebar li.completed {
|
|
225
|
+
color: #4caf50;
|
|
226
|
+
}
|
|
227
|
+
|
|
228
|
+
.progress-sidebar li.active {
|
|
229
|
+
color: var(--brand-primary, #472aff);
|
|
230
|
+
}
|
|
231
|
+
|
|
232
|
+
/* Step Button */
|
|
233
|
+
.step-button {
|
|
234
|
+
all: unset;
|
|
235
|
+
width: 100%;
|
|
236
|
+
display: flex;
|
|
237
|
+
align-items: flex-start;
|
|
238
|
+
border-radius: 4px;
|
|
239
|
+
cursor: pointer;
|
|
240
|
+
transition: background 0.3s;
|
|
241
|
+
}
|
|
242
|
+
|
|
243
|
+
.step-button:hover .step-icon,
|
|
244
|
+
li.active .step-icon {
|
|
245
|
+
border-color: var(--brand-primary, #472aff);
|
|
246
|
+
}
|
|
247
|
+
|
|
248
|
+
.step-button:hover .step-details,
|
|
249
|
+
.step-button:hover .step-details small,
|
|
250
|
+
li.active .step-button .step-details small {
|
|
251
|
+
color: var(--brand-primary, #472aff);
|
|
252
|
+
}
|
|
253
|
+
|
|
254
|
+
/* Step Icon & Line */
|
|
255
|
+
.step-icon {
|
|
256
|
+
width: 24px;
|
|
257
|
+
height: 24px;
|
|
258
|
+
display: flex;
|
|
259
|
+
align-items: center;
|
|
260
|
+
justify-content: center;
|
|
261
|
+
background: var(--brand-alert-1, #eaecff);
|
|
262
|
+
border: 2px solid var(--brand-alert-1, #eaecff);
|
|
263
|
+
border-radius: 50%;
|
|
264
|
+
margin-right: 10px;
|
|
265
|
+
font-size: 0.9rem;
|
|
266
|
+
color: var(--brand-primary, #472aff);
|
|
267
|
+
}
|
|
268
|
+
|
|
269
|
+
li .done .step-icon {
|
|
270
|
+
background: var(--brand-primary, #472aff);
|
|
271
|
+
color: white;
|
|
272
|
+
border-color: var(--brand-primary, #472aff);
|
|
273
|
+
}
|
|
274
|
+
|
|
275
|
+
.step-button .step-icon.error {
|
|
276
|
+
background: var(--alerts-danger-3, #fce8ea);
|
|
277
|
+
color: #bb1425;
|
|
278
|
+
border-color: var(--alerts-danger-3, #bb1425);
|
|
279
|
+
}
|
|
280
|
+
|
|
281
|
+
.step-line-wrapper {
|
|
282
|
+
position: relative;
|
|
283
|
+
display: flex;
|
|
284
|
+
flex-direction: column;
|
|
285
|
+
align-items: center;
|
|
286
|
+
justify-content: flex-start;
|
|
287
|
+
margin-right: 10px;
|
|
288
|
+
}
|
|
289
|
+
|
|
290
|
+
.step-line {
|
|
291
|
+
width: 1px;
|
|
292
|
+
height: 40px;
|
|
293
|
+
background: #e6e6e6;
|
|
294
|
+
position: absolute;
|
|
295
|
+
top: 100%;
|
|
296
|
+
left: 37%;
|
|
297
|
+
transform: translateX(-50%);
|
|
298
|
+
z-index: 0;
|
|
299
|
+
transition: background 0.3s ease;
|
|
300
|
+
}
|
|
301
|
+
|
|
302
|
+
li.completed .step-line,
|
|
303
|
+
li .done .step-line {
|
|
304
|
+
background: var(--brand-primary, #472aff);
|
|
305
|
+
}
|
|
306
|
+
|
|
307
|
+
/* Step Details */
|
|
308
|
+
.step-details {
|
|
309
|
+
display: flex;
|
|
310
|
+
flex-direction: column;
|
|
311
|
+
}
|
|
312
|
+
|
|
313
|
+
.step-details strong {
|
|
314
|
+
font-size: 16px;
|
|
315
|
+
}
|
|
316
|
+
|
|
317
|
+
.step-details small {
|
|
318
|
+
font-size: 12px;
|
|
319
|
+
color: #999;
|
|
320
|
+
}
|
|
321
|
+
|
|
322
|
+
.step-content {
|
|
323
|
+
margin-bottom: 20px;
|
|
324
|
+
}
|
|
325
|
+
|
|
326
|
+
/* Footer */
|
|
327
|
+
.progress-footer {
|
|
328
|
+
display: flex;
|
|
329
|
+
justify-content: space-between;
|
|
330
|
+
align-items: center;
|
|
331
|
+
padding: 10px 20px;
|
|
332
|
+
border-top: 1px solid #e6e6e6;
|
|
333
|
+
}
|
|
334
|
+
|
|
335
|
+
/* Buttons */
|
|
336
|
+
.btn {
|
|
337
|
+
padding: 10px 20px;
|
|
338
|
+
border-radius: 4px;
|
|
339
|
+
border: none;
|
|
340
|
+
cursor: pointer;
|
|
341
|
+
font-size: 0.9rem;
|
|
342
|
+
}
|
|
343
|
+
|
|
344
|
+
.btn.primary {
|
|
345
|
+
background: var(--brand-primary, #472aff);
|
|
346
|
+
color: white;
|
|
347
|
+
}
|
|
348
|
+
|
|
349
|
+
.btn.secondary {
|
|
350
|
+
background: var(--alerts-info-1, #eaecff);
|
|
351
|
+
color: var(--brand-primary, #472aff);
|
|
352
|
+
margin-right: 10px;
|
|
353
|
+
}
|
|
354
|
+
|
|
355
|
+
.btn:disabled {
|
|
356
|
+
cursor: not-allowed;
|
|
357
|
+
opacity: 0.5;
|
|
358
|
+
}
|
|
359
|
+
|
|
360
|
+
.link {
|
|
361
|
+
background: transparent;
|
|
362
|
+
color: var(--brand-primary, #472aff);
|
|
363
|
+
font-size: 0.9rem;
|
|
364
|
+
}
|
|
365
|
+
|
|
366
|
+
.close {
|
|
367
|
+
color: #25282d;
|
|
368
|
+
border: none;
|
|
369
|
+
}
|
|
370
|
+
</style>
|
|
@@ -0,0 +1,16 @@
|
|
|
1
|
+
interface Step {
|
|
2
|
+
title: string;
|
|
3
|
+
description: string;
|
|
4
|
+
isValid?: boolean;
|
|
5
|
+
}
|
|
6
|
+
interface StepProps {
|
|
7
|
+
steps: Step[];
|
|
8
|
+
currentStep?: number;
|
|
9
|
+
isFormValid?: boolean;
|
|
10
|
+
onFinalStepAction?: () => void;
|
|
11
|
+
useAsPopUp?: boolean;
|
|
12
|
+
children?: () => any;
|
|
13
|
+
}
|
|
14
|
+
declare const ProgressWizard: import("svelte").Component<StepProps, {}, "steps" | "currentStep" | "isFormValid">;
|
|
15
|
+
type ProgressWizard = ReturnType<typeof ProgressWizard>;
|
|
16
|
+
export default ProgressWizard;
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@softwareone/spi-sv5-library",
|
|
3
|
-
"version": "0.1.
|
|
3
|
+
"version": "0.1.3",
|
|
4
4
|
"description": "Svelte components",
|
|
5
5
|
"keywords": [
|
|
6
6
|
"svelte",
|
|
@@ -59,6 +59,7 @@
|
|
|
59
59
|
},
|
|
60
60
|
"dependencies": {
|
|
61
61
|
"@sveltejs/kit": "^2.16.0",
|
|
62
|
-
"lucide-svelte": "^0.475.0"
|
|
62
|
+
"lucide-svelte": "^0.475.0",
|
|
63
|
+
"zod": "^3.24.4"
|
|
63
64
|
}
|
|
64
65
|
}
|