svelte-toggle-switch 1.0.0 → 2.0.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/CLAUDE.md +165 -0
- package/README.md +377 -32
- package/package.json +17 -6
- package/src/App.svelte +399 -12
- package/src/lib/Switch.svelte +682 -249
- package/svelte-toggle-switch-2.0.0.tgz +0 -0
- package/tsconfig.json +14 -0
- package/tsconfig.node.json +9 -0
- package/vite.config.js +7 -1
package/src/App.svelte
CHANGED
|
@@ -1,22 +1,409 @@
|
|
|
1
|
-
<script>
|
|
2
|
-
|
|
1
|
+
<script lang="ts">
|
|
2
|
+
import Switch from './lib/Switch.svelte';
|
|
3
3
|
|
|
4
|
+
// State variables for different examples
|
|
5
|
+
let basicSwitch = false;
|
|
6
|
+
let colorSwitch = false;
|
|
7
|
+
let sizeSwitch = false;
|
|
8
|
+
let disabledSwitch = false;
|
|
9
|
+
let loadingSwitch = false;
|
|
10
|
+
let iconSwitch = false;
|
|
11
|
+
let multiSwitch = 'Option 1';
|
|
12
|
+
let labelPositionSwitch = true;
|
|
13
|
+
let animationSwitch = false;
|
|
14
|
+
let innerSwitch = false;
|
|
15
|
+
let modernSwitch = false;
|
|
16
|
+
let materialSwitch = false;
|
|
17
|
+
|
|
18
|
+
// Color schemes
|
|
19
|
+
let greenSwitch = false;
|
|
20
|
+
let redSwitch = false;
|
|
21
|
+
let purpleSwitch = false;
|
|
22
|
+
let orangeSwitch = false;
|
|
23
|
+
let pinkSwitch = false;
|
|
24
|
+
|
|
25
|
+
// Sizes
|
|
26
|
+
let xsSwitch = false;
|
|
27
|
+
let smSwitch = false;
|
|
28
|
+
let mdSwitch = false;
|
|
29
|
+
let lgSwitch = false;
|
|
30
|
+
let xlSwitch = false;
|
|
4
31
|
</script>
|
|
5
32
|
|
|
6
33
|
<main>
|
|
7
|
-
|
|
34
|
+
<header>
|
|
35
|
+
<h1>Svelte Toggle Switch</h1>
|
|
36
|
+
<p class="subtitle">A comprehensive, accessible toggle switch component for Svelte</p>
|
|
37
|
+
</header>
|
|
38
|
+
|
|
39
|
+
<section>
|
|
40
|
+
<h2>Design Variants</h2>
|
|
41
|
+
<div class="grid">
|
|
42
|
+
<div class="card">
|
|
43
|
+
<h3>Slider (iOS Style)</h3>
|
|
44
|
+
<Switch bind:value={basicSwitch} label="Enable notifications" design="slider" />
|
|
45
|
+
<p class="state">State: {basicSwitch}</p>
|
|
46
|
+
</div>
|
|
47
|
+
|
|
48
|
+
<div class="card">
|
|
49
|
+
<h3>Inner</h3>
|
|
50
|
+
<Switch bind:value={innerSwitch} label="Dark mode" design="inner" />
|
|
51
|
+
<p class="state">State: {innerSwitch}</p>
|
|
52
|
+
</div>
|
|
53
|
+
|
|
54
|
+
<div class="card">
|
|
55
|
+
<h3>Modern</h3>
|
|
56
|
+
<Switch bind:value={modernSwitch} label="Auto-save" design="modern" />
|
|
57
|
+
<p class="state">State: {modernSwitch}</p>
|
|
58
|
+
</div>
|
|
59
|
+
|
|
60
|
+
<div class="card">
|
|
61
|
+
<h3>Material</h3>
|
|
62
|
+
<Switch bind:value={materialSwitch} label="Bluetooth" design="material" />
|
|
63
|
+
<p class="state">State: {materialSwitch}</p>
|
|
64
|
+
</div>
|
|
65
|
+
</div>
|
|
66
|
+
</section>
|
|
67
|
+
|
|
68
|
+
<section>
|
|
69
|
+
<h2>Color Schemes</h2>
|
|
70
|
+
<div class="grid">
|
|
71
|
+
<div class="card">
|
|
72
|
+
<h3>Blue (Default)</h3>
|
|
73
|
+
<Switch bind:value={colorSwitch} label="Blue theme" colorScheme="blue" />
|
|
74
|
+
</div>
|
|
75
|
+
|
|
76
|
+
<div class="card">
|
|
77
|
+
<h3>Green</h3>
|
|
78
|
+
<Switch bind:value={greenSwitch} label="Green theme" colorScheme="green" />
|
|
79
|
+
</div>
|
|
80
|
+
|
|
81
|
+
<div class="card">
|
|
82
|
+
<h3>Red</h3>
|
|
83
|
+
<Switch bind:value={redSwitch} label="Red theme" colorScheme="red" />
|
|
84
|
+
</div>
|
|
85
|
+
|
|
86
|
+
<div class="card">
|
|
87
|
+
<h3>Purple</h3>
|
|
88
|
+
<Switch bind:value={purpleSwitch} label="Purple theme" colorScheme="purple" />
|
|
89
|
+
</div>
|
|
90
|
+
|
|
91
|
+
<div class="card">
|
|
92
|
+
<h3>Orange</h3>
|
|
93
|
+
<Switch bind:value={orangeSwitch} label="Orange theme" colorScheme="orange" />
|
|
94
|
+
</div>
|
|
95
|
+
|
|
96
|
+
<div class="card">
|
|
97
|
+
<h3>Pink</h3>
|
|
98
|
+
<Switch bind:value={pinkSwitch} label="Pink theme" colorScheme="pink" />
|
|
99
|
+
</div>
|
|
100
|
+
</div>
|
|
101
|
+
</section>
|
|
102
|
+
|
|
103
|
+
<section>
|
|
104
|
+
<h2>Size Variants</h2>
|
|
105
|
+
<div class="grid">
|
|
106
|
+
<div class="card">
|
|
107
|
+
<h3>Extra Small</h3>
|
|
108
|
+
<Switch bind:value={xsSwitch} label="XS Size" size="xs" />
|
|
109
|
+
</div>
|
|
110
|
+
|
|
111
|
+
<div class="card">
|
|
112
|
+
<h3>Small</h3>
|
|
113
|
+
<Switch bind:value={smSwitch} label="Small Size" size="sm" />
|
|
114
|
+
</div>
|
|
115
|
+
|
|
116
|
+
<div class="card">
|
|
117
|
+
<h3>Medium (Default)</h3>
|
|
118
|
+
<Switch bind:value={mdSwitch} label="Medium Size" size="md" />
|
|
119
|
+
</div>
|
|
120
|
+
|
|
121
|
+
<div class="card">
|
|
122
|
+
<h3>Large</h3>
|
|
123
|
+
<Switch bind:value={lgSwitch} label="Large Size" size="lg" />
|
|
124
|
+
</div>
|
|
125
|
+
|
|
126
|
+
<div class="card">
|
|
127
|
+
<h3>Extra Large</h3>
|
|
128
|
+
<Switch bind:value={xlSwitch} label="XL Size" size="xl" />
|
|
129
|
+
</div>
|
|
130
|
+
</div>
|
|
131
|
+
</section>
|
|
132
|
+
|
|
133
|
+
<section>
|
|
134
|
+
<h2>States</h2>
|
|
135
|
+
<div class="grid">
|
|
136
|
+
<div class="card">
|
|
137
|
+
<h3>Disabled</h3>
|
|
138
|
+
<Switch bind:value={disabledSwitch} label="Disabled switch" disabled />
|
|
139
|
+
</div>
|
|
140
|
+
|
|
141
|
+
<div class="card">
|
|
142
|
+
<h3>Loading</h3>
|
|
143
|
+
<Switch bind:value={loadingSwitch} label="Loading state" loading />
|
|
144
|
+
</div>
|
|
145
|
+
|
|
146
|
+
<div class="card">
|
|
147
|
+
<h3>Read-only</h3>
|
|
148
|
+
<Switch bind:value={disabledSwitch} label="Read-only switch" readonly />
|
|
149
|
+
</div>
|
|
150
|
+
</div>
|
|
151
|
+
</section>
|
|
152
|
+
|
|
153
|
+
<section>
|
|
154
|
+
<h2>Icon Support</h2>
|
|
155
|
+
<div class="grid">
|
|
156
|
+
<div class="card">
|
|
157
|
+
<h3>Slider with Icons</h3>
|
|
158
|
+
<Switch
|
|
159
|
+
bind:value={iconSwitch}
|
|
160
|
+
label="Wi-Fi"
|
|
161
|
+
design="slider"
|
|
162
|
+
showIcons={true}
|
|
163
|
+
onIcon="✓"
|
|
164
|
+
offIcon="✕"
|
|
165
|
+
/>
|
|
166
|
+
</div>
|
|
167
|
+
|
|
168
|
+
<div class="card">
|
|
169
|
+
<h3>Modern with Custom Icons</h3>
|
|
170
|
+
<Switch
|
|
171
|
+
bind:value={iconSwitch}
|
|
172
|
+
label="Airplane Mode"
|
|
173
|
+
design="modern"
|
|
174
|
+
showIcons={true}
|
|
175
|
+
onIcon="✈"
|
|
176
|
+
offIcon="✕"
|
|
177
|
+
colorScheme="purple"
|
|
178
|
+
/>
|
|
179
|
+
</div>
|
|
180
|
+
|
|
181
|
+
<div class="card">
|
|
182
|
+
<h3>Custom Emoji Icons</h3>
|
|
183
|
+
<Switch
|
|
184
|
+
bind:value={iconSwitch}
|
|
185
|
+
label="Theme"
|
|
186
|
+
design="slider"
|
|
187
|
+
showIcons={true}
|
|
188
|
+
onIcon="🌙"
|
|
189
|
+
offIcon="☀"
|
|
190
|
+
colorScheme="orange"
|
|
191
|
+
size="lg"
|
|
192
|
+
/>
|
|
193
|
+
</div>
|
|
194
|
+
</div>
|
|
195
|
+
</section>
|
|
196
|
+
|
|
197
|
+
<section>
|
|
198
|
+
<h2>Multi-option Switch</h2>
|
|
199
|
+
<div class="card">
|
|
200
|
+
<h3>Toggle Group</h3>
|
|
201
|
+
<Switch
|
|
202
|
+
bind:value={multiSwitch}
|
|
203
|
+
label="Select an option"
|
|
204
|
+
design="multi"
|
|
205
|
+
options={['Option 1', 'Option 2', 'Option 3']}
|
|
206
|
+
/>
|
|
207
|
+
<p class="state">Selected: {multiSwitch}</p>
|
|
208
|
+
</div>
|
|
209
|
+
|
|
210
|
+
<div class="card">
|
|
211
|
+
<h3>View Mode Selector</h3>
|
|
212
|
+
<Switch
|
|
213
|
+
bind:value={multiSwitch}
|
|
214
|
+
label="View"
|
|
215
|
+
design="multi"
|
|
216
|
+
options={['Grid', 'List']}
|
|
217
|
+
size="sm"
|
|
218
|
+
colorScheme="green"
|
|
219
|
+
/>
|
|
220
|
+
</div>
|
|
221
|
+
</section>
|
|
222
|
+
|
|
223
|
+
<section>
|
|
224
|
+
<h2>Advanced Features</h2>
|
|
225
|
+
<div class="grid">
|
|
226
|
+
<div class="card">
|
|
227
|
+
<h3>Label Position</h3>
|
|
228
|
+
<Switch
|
|
229
|
+
bind:value={labelPositionSwitch}
|
|
230
|
+
label="Label on left"
|
|
231
|
+
labelPosition="left"
|
|
232
|
+
/>
|
|
233
|
+
</div>
|
|
234
|
+
|
|
235
|
+
<div class="card">
|
|
236
|
+
<h3>With Shadow</h3>
|
|
237
|
+
<Switch bind:value={sizeSwitch} label="Shadow effect" shadow />
|
|
238
|
+
</div>
|
|
239
|
+
|
|
240
|
+
<div class="card">
|
|
241
|
+
<h3>With Outline</h3>
|
|
242
|
+
<Switch bind:value={sizeSwitch} label="Outline style" outline />
|
|
243
|
+
</div>
|
|
244
|
+
|
|
245
|
+
<div class="card">
|
|
246
|
+
<h3>Custom Animation</h3>
|
|
247
|
+
<Switch
|
|
248
|
+
bind:value={animationSwitch}
|
|
249
|
+
label="Slow animation"
|
|
250
|
+
animationDuration={800}
|
|
251
|
+
animationEasing="cubic-bezier(0.68, -0.55, 0.265, 1.55)"
|
|
252
|
+
colorScheme="pink"
|
|
253
|
+
/>
|
|
254
|
+
</div>
|
|
255
|
+
|
|
256
|
+
<div class="card">
|
|
257
|
+
<h3>Custom Colors</h3>
|
|
258
|
+
<Switch
|
|
259
|
+
bind:value={animationSwitch}
|
|
260
|
+
label="Custom palette"
|
|
261
|
+
colorScheme="custom"
|
|
262
|
+
color="#FF6B6B"
|
|
263
|
+
offColor="#F0F0F0"
|
|
264
|
+
/>
|
|
265
|
+
</div>
|
|
266
|
+
</div>
|
|
267
|
+
</section>
|
|
268
|
+
|
|
269
|
+
<footer>
|
|
270
|
+
<p>Built with Svelte • TypeScript • Vite</p>
|
|
271
|
+
<p>
|
|
272
|
+
<a href="https://github.com/ishansasika/svelte-toggle-switch" target="_blank" rel="noopener">
|
|
273
|
+
View on GitHub
|
|
274
|
+
</a>
|
|
275
|
+
</p>
|
|
276
|
+
</footer>
|
|
8
277
|
</main>
|
|
9
278
|
|
|
10
279
|
<style>
|
|
11
|
-
|
|
12
|
-
|
|
13
|
-
|
|
14
|
-
|
|
280
|
+
:root {
|
|
281
|
+
font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen,
|
|
282
|
+
Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
|
|
283
|
+
line-height: 1.6;
|
|
284
|
+
}
|
|
285
|
+
|
|
286
|
+
main {
|
|
287
|
+
max-width: 1200px;
|
|
288
|
+
margin: 0 auto;
|
|
289
|
+
padding: 2rem;
|
|
290
|
+
background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
|
|
291
|
+
min-height: 100vh;
|
|
292
|
+
}
|
|
293
|
+
|
|
294
|
+
header {
|
|
295
|
+
text-align: center;
|
|
296
|
+
margin-bottom: 3rem;
|
|
297
|
+
color: white;
|
|
298
|
+
}
|
|
299
|
+
|
|
300
|
+
h1 {
|
|
301
|
+
font-size: 3rem;
|
|
302
|
+
margin: 0;
|
|
303
|
+
font-weight: 700;
|
|
304
|
+
letter-spacing: -0.02em;
|
|
305
|
+
}
|
|
306
|
+
|
|
307
|
+
.subtitle {
|
|
308
|
+
font-size: 1.25rem;
|
|
309
|
+
opacity: 0.9;
|
|
310
|
+
margin-top: 0.5rem;
|
|
311
|
+
}
|
|
312
|
+
|
|
313
|
+
section {
|
|
314
|
+
background: white;
|
|
315
|
+
border-radius: 1rem;
|
|
316
|
+
padding: 2rem;
|
|
317
|
+
margin-bottom: 2rem;
|
|
318
|
+
box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1);
|
|
319
|
+
}
|
|
320
|
+
|
|
321
|
+
h2 {
|
|
322
|
+
margin-top: 0;
|
|
323
|
+
color: #1f2937;
|
|
324
|
+
font-size: 1.75rem;
|
|
325
|
+
margin-bottom: 1.5rem;
|
|
326
|
+
border-bottom: 2px solid #e5e7eb;
|
|
327
|
+
padding-bottom: 0.5rem;
|
|
328
|
+
}
|
|
329
|
+
|
|
330
|
+
h3 {
|
|
331
|
+
color: #4b5563;
|
|
332
|
+
font-size: 1rem;
|
|
333
|
+
margin-top: 0;
|
|
334
|
+
margin-bottom: 1rem;
|
|
335
|
+
font-weight: 600;
|
|
336
|
+
}
|
|
337
|
+
|
|
338
|
+
.grid {
|
|
339
|
+
display: grid;
|
|
340
|
+
grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
|
|
341
|
+
gap: 1.5rem;
|
|
342
|
+
}
|
|
343
|
+
|
|
344
|
+
.card {
|
|
345
|
+
background: #f9fafb;
|
|
346
|
+
padding: 1.5rem;
|
|
347
|
+
border-radius: 0.75rem;
|
|
348
|
+
border: 1px solid #e5e7eb;
|
|
349
|
+
transition: all 0.3s ease;
|
|
350
|
+
}
|
|
351
|
+
|
|
352
|
+
.card:hover {
|
|
353
|
+
border-color: #d1d5db;
|
|
354
|
+
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.05);
|
|
355
|
+
transform: translateY(-2px);
|
|
356
|
+
}
|
|
357
|
+
|
|
358
|
+
.state {
|
|
359
|
+
margin-top: 1rem;
|
|
360
|
+
padding: 0.5rem;
|
|
361
|
+
background: white;
|
|
362
|
+
border-radius: 0.375rem;
|
|
363
|
+
font-size: 0.875rem;
|
|
364
|
+
color: #6b7280;
|
|
365
|
+
font-family: 'Courier New', monospace;
|
|
366
|
+
}
|
|
367
|
+
|
|
368
|
+
footer {
|
|
369
|
+
text-align: center;
|
|
370
|
+
color: white;
|
|
371
|
+
padding: 2rem 0;
|
|
372
|
+
margin-top: 2rem;
|
|
373
|
+
}
|
|
374
|
+
|
|
375
|
+
footer p {
|
|
376
|
+
margin: 0.5rem 0;
|
|
377
|
+
}
|
|
378
|
+
|
|
379
|
+
footer a {
|
|
380
|
+
color: white;
|
|
381
|
+
text-decoration: underline;
|
|
382
|
+
}
|
|
383
|
+
|
|
384
|
+
footer a:hover {
|
|
385
|
+
opacity: 0.8;
|
|
386
|
+
}
|
|
387
|
+
|
|
388
|
+
@media (max-width: 768px) {
|
|
389
|
+
main {
|
|
390
|
+
padding: 1rem;
|
|
391
|
+
}
|
|
392
|
+
|
|
393
|
+
h1 {
|
|
394
|
+
font-size: 2rem;
|
|
395
|
+
}
|
|
396
|
+
|
|
397
|
+
.subtitle {
|
|
398
|
+
font-size: 1rem;
|
|
399
|
+
}
|
|
15
400
|
|
|
16
|
-
|
|
17
|
-
|
|
18
|
-
|
|
19
|
-
margin: 0 auto;
|
|
20
|
-
}
|
|
401
|
+
section {
|
|
402
|
+
padding: 1.5rem;
|
|
403
|
+
}
|
|
21
404
|
|
|
405
|
+
.grid {
|
|
406
|
+
grid-template-columns: 1fr;
|
|
407
|
+
}
|
|
408
|
+
}
|
|
22
409
|
</style>
|