-
-
Notifications
You must be signed in to change notification settings - Fork 300
/
+page.svelte
233 lines (228 loc) · 9.13 KB
/
+page.svelte
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
<script lang="ts">
import DocsShell from '$lib/layouts/DocsShell/DocsShell.svelte';
import { DocsFeature, type DocsShellSettings } from '$lib/layouts/DocsShell/types';
import DocsPreview from '$lib/components/DocsPreview/DocsPreview.svelte';
// Components
import { Stepper, Step, SlideToggle, CodeBlock } from '@skeletonlabs/skeleton';
// Sveld
import sveldStepper from '@skeletonlabs/skeleton/components/Stepper/Stepper.svelte?raw&sveld';
import sveldStep from '@skeletonlabs/skeleton/components/Stepper/Step.svelte?raw&sveld';
// Docs Shell
const settings: DocsShellSettings = {
feature: DocsFeature.Component,
name: 'Steppers',
description: 'Divide and present content in sequenced steps.',
imports: ['Stepper', 'Step'],
source: 'packages/skeleton/src/lib/components/Stepper',
components: [
{ label: 'Stepper', sveld: sveldStepper },
{
label: 'Step',
sveld: sveldStep,
overrideProps: [
'gap',
'stepTerm',
'justify',
'buttonBack',
'buttonBackLabel',
'buttonNext',
'buttonNextLabel',
'buttonComplete',
'buttonCompleteLabel'
]
}
],
transitionIn: 'fade',
transitionOut: 'fade'
};
// Local
let locked = true;
function onNextHandler(e: CustomEvent): void {
console.log('event:next', e.detail);
}
function onBackHandler(e: CustomEvent): void {
console.log('event:prev', e.detail);
}
function onStepHandler(e: CustomEvent): void {
console.log('event:step', e.detail);
}
function onCompleteHandler(e: CustomEvent): void {
console.log('event:complete', e.detail);
alert('Complete!');
}
</script>
<DocsShell {settings}>
<!-- Slot: Sandbox -->
<svelte:fragment slot="sandbox">
<!-- Alert -->
<aside class="alert variant-ghost-error">
<i class="fa-solid fa-triangle-exclamation text-4xl"></i>
<div class="alert-message" data-toc-ignore>
<h3 class="h3" data-toc-ignore>Deprecated</h3>
<!-- prettier-ignore -->
<p>
This feature is being phased out as we transition to <a class="underline" href="https://github.com/skeletonlabs/skeleton/discussions/2375" target="_blank">Skeleton v3</a>. This will remain functional for all 2.x releases. Expect a dedicated v3 alternative as soon as possible.
</p>
</div>
<div class="alert-actions">
<a class="btn variant-filled" href="https://github.com/skeletonlabs/skeleton/issues/1780" target="_blank"> Learn More </a>
</div>
</aside>
<!-- Preview -->
<DocsPreview>
<svelte:fragment slot="preview">
<div class="w-full card p-4 text-token">
<Stepper on:next={onNextHandler} on:back={onBackHandler} on:step={onStepHandler} on:complete={onCompleteHandler}>
<Step>
<svelte:fragment slot="header">Get Started!</svelte:fragment>
<p>This example Stepper will teach you how to use this component. Tap <u>next</u> to proceed to the next step.</p>
<!-- <svelte:fragment slot="navigation"><button class="btn variant-ghost-error">Abort</button></svelte:fragment> -->
</Step>
<Step>
<svelte:fragment slot="header">Going Back.</svelte:fragment>
<p>
The current step progress will be tracked at the top. Tap <u>back</u> to return to the previous step.
</p>
</Step>
<Step {locked}>
<svelte:fragment slot="header">A Locked Step.</svelte:fragment>
<p>
This Step component uses the <code class="code">locked</code> property to prevent progress. This is ideal for multi-step forms,
such as registration. For now we'll simulate a successful validation condition using the toggle below.
</p>
<aside class="alert variant-ghost-warning">
<div class="alert-message">
<p>This step is <u>{locked ? 'Locked' : 'Unlocked'}</u></p>
</div>
<div class="alert-actions">
<SlideToggle name="locked-state" bind:checked={locked} active="bg-warning-500" />
</div>
</aside>
</Step>
<Step>
<svelte:fragment slot="header">Long Form Content.</svelte:fragment>
<p>The steps will expand to fit content of any length.</p>
<p>
<!-- cspell:disable -->
Lorem ipsum dolor sit amet consectetur adipisicing elit. Itaque vel expedita porro vero, saepe dicta repellendus facilis ab accusamus
unde, tempora ut nobis eum. Veniam, architecto corrupti. Lorem ipsum dolor sit amet consectetur adipisicing elit. Itaque vel
expedita porro vero, saepe dicta repellendus facilis ab accusamus unde, tempora ut nobis eum. Veniam, architecto corrupti. Lorem
ipsum dolor sit amet consectetur adipisicing elit. Itaque vel expedita porro vero, saepe dicta repellendus facilis ab accusamus
unde, tempora ut nobis eum. Veniam, architecto corrupti. Lorem ipsum dolor sit amet consectetur adipisicing elit. Itaque vel
expedita porro vero, saepe dicta repellendus facilis ab accusamus unde, tempora ut nobis eum. Veniam, architecto corrupti. Lorem
ipsum dolor sit amet consectetur adipisicing elit. Itaque vel expedita porro vero, saepe dicta repellendus facilis ab accusamus
unde, tempora ut nobis eum. Veniam, architecto corrupti.
<!-- cspell:enable -->
</p>
</Step>
<Step>
<svelte:fragment slot="header">Almost Done.</svelte:fragment>
<p>
A Complete button will appear on the last step. When the step is unlocked and the button pressed, an <code class="code"
>on:complete</code
> event will be fired. You can use this trigger to submit form data to a server.
</p>
</Step>
</Stepper>
</div>
</svelte:fragment>
<svelte:fragment slot="source">
<CodeBlock
language="html"
code={`
<Stepper>
<Step>
<svelte:fragment slot="header">(header)</svelte:fragment>
(content)
</Step>
<Step>
<svelte:fragment slot="header">(header)</svelte:fragment>
(content)
</Step>
<!-- ... -->
</Stepper>
`}
/>
</svelte:fragment>
</DocsPreview>
</svelte:fragment>
<!-- Slot: Usage -->
<svelte:fragment slot="usage">
<p>
Create a set of Steps within the Stepper, then use the <code class="code">on:complete</code> event to detect when all steps are
complete. Since horizontal space may be limited on small screens, we recommend no more than <em>five</em> steps at max.
</p>
<!-- Event Handlers -->
<section class="space-y-4">
<h2 class="h2">Event Handlers</h2>
<h3 class="h3">Complete Event</h3>
<CodeBlock language="ts" code={`function onCompleteHandler(e: Event): void { console.log('event:complete', e); }`} />
<CodeBlock language="html" code={`<Stepper on:complete={onCompleteHandler}>...</Stepper>`} />
<h3 class="h3">Next, Step and Previous</h3>
<p>Events are fired when the next or previous steps are pressed, step fires for both cases.</p>
<CodeBlock
language="ts"
code={`function onStepHandler(e: {detail: {state: {current: number, total: number}, step: number}}): void {
console.log('event:step', e);
}`}
/>
<CodeBlock language="html" code={`<Stepper on:next={onNextHandler} on:step={onStepHandler} on:back={onBackHandler}>...</Stepper>`} />
<blockquote class="blockquote">
TIP: <code class="code">e.detail.state.current</code> contains the step shown to the user after navigation,
<code class="code">e.detail.step</code> contains the step where navigation occurred.
</blockquote>
</section>
<!-- Locked State -->
<section class="space-y-4">
<h2 class="h2">Locked State</h2>
<p>
Each Step can have a <code class="code">locked</code> property set, when set to <em>TRUE</em> this locks progression for that step. For
example, you can lock a step until a form within it becomes valid.
</p>
<CodeBlock language="ts" code={`let lockedState: boolean = true;`} />
<CodeBlock language="html" code={`<Step locked={lockedState}>...</Step>`} />
</section>
<!-- Step Term -->
<section class="space-y-4">
<h2 class="h2">Step Term</h2>
<p>
Use the <code class="code">stepTerm</code> property to override text shown in the animated section at the top of the Stepper, which is
useful if you need i18n support for other languages.
</p>
<CodeBlock
language="html"
code={`
<!-- German: Schritt 1, Schritt 2, ... This will override the stepTerm in the Step Counter -->
<Stepper stepTerm="Schritt">
<!-- French: Étape 1, Étape 2, ... -->
<Step stepTerm='Étape'>...</Step>
<!-- Spanish: Paso 1, Paso 2, ... -->
<Step stepTerm='Paso'>...</Step>
</Stepper>
`}
/>
<p>
This can be overwritten per each Step as well, which updates the <em>default</em> and <em>header</em> slot placeholder text.
</p>
</section>
<!-- Navigation Slot -->
<section class="space-y-4">
<h2 class="h2">Navigation Slot</h2>
<!-- prettier-ignore -->
<p>
You may override the contents of the disabled Back button in the <u>first step</u> by supplying a <code class="code">navigation</code> slot. Use this to supply a message or implement a custom action. This is not supported for step two and forward.
</p>
<CodeBlock
language="html"
code={`
<Step>
<p>(content)</p>
<svelte:fragment slot="navigation">
<button class="btn variant-ghost-error" on:click={triggerAbort}>Abort</button>
</svelte:fragment>
</Step>
`}
/>
</section>
</svelte:fragment>
</DocsShell>