flowbite-svelte 0.15.9 → 0.15.10
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/CHANGELOG.md +13 -0
- package/README.md +303 -162
- package/cards/Card.svelte +10 -29
- package/dropdowns/DropdownDefault.svelte +1 -1
- package/forms/Radio.svelte +10 -13
- package/forms/Radio.svelte.d.ts +3 -2
- package/package.json +2 -8
- package/types.d.ts +1 -1
- package/auth/Confirm.svelte +0 -23
- package/auth/Confirm.svelte.d.ts +0 -19
- package/auth/ForgotPassword.svelte +0 -57
- package/auth/ForgotPassword.svelte.d.ts +0 -21
- package/auth/Input.svelte +0 -0
- package/auth/Input.svelte.d.ts +0 -19
- package/auth/Login.svelte +0 -116
- package/auth/Login.svelte.d.ts +0 -25
- package/auth/Register.svelte +0 -118
- package/auth/Register.svelte.d.ts +0 -23
- package/auth/Reset.svelte +0 -57
- package/auth/Reset.svelte.d.ts +0 -22
package/CHANGELOG.md
CHANGED
|
@@ -2,6 +2,19 @@
|
|
|
2
2
|
|
|
3
3
|
All notable changes to this project will be documented in this file. See [standard-version](https://github.com/conventional-changelog/standard-version) for commit guidelines.
|
|
4
4
|
|
|
5
|
+
### [0.15.10](https://github.com/themesberg/flowbite-svelte/compare/v0.15.9...v0.15.10) (2022-05-03)
|
|
6
|
+
|
|
7
|
+
|
|
8
|
+
### Features
|
|
9
|
+
|
|
10
|
+
* add radio label with a link to radio form ([2c3fe6f](https://github.com/themesberg/flowbite-svelte/commit/2c3fe6f9b24a7364a61fc534163c87a157afff12))
|
|
11
|
+
|
|
12
|
+
|
|
13
|
+
### Bug Fixes
|
|
14
|
+
|
|
15
|
+
* add Input to form index ([00ec469](https://github.com/themesberg/flowbite-svelte/commit/00ec46911c2748fb9224cf91ae68b3dca1c02dd7))
|
|
16
|
+
* position update for dropdown and imgdropdown components ([1aef255](https://github.com/themesberg/flowbite-svelte/commit/1aef2559e187458c89f4ad40acbbc8c94719b7ae))
|
|
17
|
+
|
|
5
18
|
### [0.15.9](https://github.com/themesberg/flowbite-svelte/compare/v0.15.8...v0.15.9) (2022-04-30)
|
|
6
19
|
|
|
7
20
|
|
package/README.md
CHANGED
|
@@ -16,167 +16,300 @@
|
|
|
16
16
|
- [CLI](https://flowbite-svelte.com/pages/cli)
|
|
17
17
|
- [License](https://flowbite-svelte.com/pages/license)
|
|
18
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
|
-
|
|
19
|
+
## Documentation
|
|
20
|
+
|
|
21
|
+
For full documentation, visit [flowbite-svelte.com](https://flowbite-svelte.com/).
|
|
22
|
+
|
|
23
|
+
## Components
|
|
24
|
+
|
|
25
|
+
<table>
|
|
26
|
+
<tr>
|
|
27
|
+
<td width="33.3333%">Accordion</td>
|
|
28
|
+
<td width="33.3333%">Alerts</td>
|
|
29
|
+
<td width="33.3333%">Avatar</td>
|
|
30
|
+
</tr>
|
|
31
|
+
<tr>
|
|
32
|
+
<td width="33.3333%">
|
|
33
|
+
<a href="https://flowbite-svelte.com/accordions/">
|
|
34
|
+
<img alt="Tailwind CSS Accordion" src="https://flowbite.s3.amazonaws.com/github/accordion.jpg">
|
|
35
|
+
</a>
|
|
36
|
+
</td>
|
|
37
|
+
<td width="33.3333%">
|
|
38
|
+
<a href="https://flowbite-svelte.com/alerts/">
|
|
39
|
+
<img alt="Tailwind CSS Alerts" src="https://flowbite.s3.amazonaws.com/github/alerts.jpg">
|
|
40
|
+
</a>
|
|
41
|
+
</td>
|
|
42
|
+
<td width="33.3333%">
|
|
43
|
+
<a href="https://flowbite-svelte.com/avatar/">
|
|
44
|
+
<img alt="Tailwind CSS Avatar" src="https://flowbite.s3.amazonaws.com/github/avatar.jpg">
|
|
45
|
+
</a>
|
|
46
|
+
</td>
|
|
47
|
+
</tr>
|
|
48
|
+
<tr>
|
|
49
|
+
<td width="33.3333%">Badges</td>
|
|
50
|
+
<td width="33.3333%">Breadcrumbs</td>
|
|
51
|
+
<td width="33.3333%">Button group</td>
|
|
52
|
+
|
|
53
|
+
</tr>
|
|
54
|
+
<tr>
|
|
55
|
+
<td width="33.3333%">
|
|
56
|
+
<a href="https://flowbite-svelte.com/badges/">
|
|
57
|
+
<img alt="Tailwind CSS Badge" src="https://flowbite.s3.amazonaws.com/github/badge.jpg">
|
|
58
|
+
</a>
|
|
59
|
+
</td>
|
|
60
|
+
<td width="33.3333%">
|
|
61
|
+
<a href="https://flowbite-svelte.com/breadcrumbs/">
|
|
62
|
+
<img alt="Tailwind CSS Breadcrumbs" src="https://flowbite.s3.amazonaws.com/github/breadcrumbs.jpg">
|
|
63
|
+
</a>
|
|
64
|
+
</td>
|
|
65
|
+
<td width="33.3333%">
|
|
66
|
+
<a href="https://flowbite-svelte.com/button-groups/">
|
|
67
|
+
<img alt="Tailwind CSS Button Group" src="https://flowbite.s3.amazonaws.com/github/button-group.jpg">
|
|
68
|
+
</a>
|
|
69
|
+
</td>
|
|
70
|
+
</tr>
|
|
71
|
+
<tr>
|
|
72
|
+
<td width="33.3333%">Buttons</td>
|
|
73
|
+
<td width="33.3333%">Cards</td>
|
|
74
|
+
<td width="33.3333%">Carousel</td>
|
|
75
|
+
|
|
76
|
+
</tr>
|
|
77
|
+
<tr>
|
|
78
|
+
<td width="33.3333%">
|
|
79
|
+
<a href="https://flowbite-svelte.com/buttons/">
|
|
80
|
+
<img alt="Tailwind CSS Buttons" src="https://flowbite.s3.amazonaws.com/github/buttons.jpg">
|
|
81
|
+
</a>
|
|
82
|
+
</td>
|
|
83
|
+
<td width="33.3333%">
|
|
84
|
+
<a href="https://flowbite-svelte.com/cards/">
|
|
85
|
+
<img alt="Tailwind CSS Cards" src="https://flowbite.s3.amazonaws.com/github/cards.jpg">
|
|
86
|
+
</a>
|
|
87
|
+
</td>
|
|
88
|
+
<td width="33.3333%">
|
|
89
|
+
<a href="https://flowbite-svelte.com/carousels/">
|
|
90
|
+
<img alt="Tailwind CSS Carousel" src="https://flowbite.s3.amazonaws.com/github/carousel.jpg">
|
|
91
|
+
</a>
|
|
92
|
+
</td>
|
|
93
|
+
</tr>
|
|
94
|
+
<tr>
|
|
95
|
+
<td width="33.3333%">Dark mode</td>
|
|
96
|
+
<td width="33.3333%">Dropdown</td>
|
|
97
|
+
<td width="33.3333%">Footer</td>
|
|
98
|
+
</tr>
|
|
99
|
+
<tr>
|
|
100
|
+
<td width="33.3333%">
|
|
101
|
+
<a href="https://flowbite-svelte.com/darkmode/">
|
|
102
|
+
<img alt="Tailwind CSS Forms" src="https://flowbite.s3.amazonaws.com/github/forms.jpg">
|
|
103
|
+
</a>
|
|
104
|
+
</td>
|
|
105
|
+
<td width="33.3333%">
|
|
106
|
+
<a href="https://flowbite-svelte.com/dropdowns/">
|
|
107
|
+
<img alt="Tailwind CSS Dropdown" src="https://flowbite.s3.amazonaws.com/github/dropdown.jpg">
|
|
108
|
+
</a>
|
|
109
|
+
</td>
|
|
110
|
+
<td width="33.3333%">
|
|
111
|
+
<a href="https://flowbite-svelte.com/footer/">
|
|
112
|
+
<img alt="Tailwind CSS Footer" src="https://flowbite.s3.amazonaws.com/github/footer.jpg">
|
|
113
|
+
</a>
|
|
114
|
+
</td>
|
|
115
|
+
</tr>
|
|
116
|
+
<tr>
|
|
117
|
+
<td width="33.3333%">Forms</td>
|
|
118
|
+
<td width="33.3333%">Icons</td>
|
|
119
|
+
<td width="33.3333%">List group</td>
|
|
120
|
+
</tr>
|
|
121
|
+
<tr>
|
|
122
|
+
<td width="33.3333%">
|
|
123
|
+
<a href="https://flowbite-svelte.com/forms/">
|
|
124
|
+
<img alt="Tailwind CSS Forms" src="https://flowbite.s3.amazonaws.com/github/forms.jpg">
|
|
125
|
+
</a>
|
|
126
|
+
</td>
|
|
127
|
+
<td width="33.3333%">
|
|
128
|
+
<a href="https://flowbite-svelte.com/icons/">
|
|
129
|
+
<img alt="Icons" src="https://flowbite.s3.amazonaws.com/github/navbar.jpg">
|
|
130
|
+
</a>
|
|
131
|
+
</td>
|
|
132
|
+
<td width="33.3333%">
|
|
133
|
+
<a href="https://flowbite-svelte.com/list-group/">
|
|
134
|
+
<img alt="Tailwind CSS List group" src="https://flowbite.s3.amazonaws.com/github/list-group.jpg">
|
|
135
|
+
</a>
|
|
136
|
+
</td>
|
|
137
|
+
</tr>
|
|
138
|
+
<tr>
|
|
139
|
+
<td width="33.3333%">Modals</td>
|
|
140
|
+
<td width="33.3333%">Navbars</td>
|
|
141
|
+
<td width="33.3333%">Pagination</td>
|
|
142
|
+
</tr>
|
|
143
|
+
<tr>
|
|
144
|
+
<td width="33.3333%">
|
|
145
|
+
<a href="https://flowbite-svelte.com/modals/">
|
|
146
|
+
<img alt="Tailwind CSS Modal" src="https://flowbite.s3.amazonaws.com/github/modal.jpg">
|
|
147
|
+
</a>
|
|
148
|
+
</td>
|
|
149
|
+
<td width="33.3333%">
|
|
150
|
+
<a href="https://flowbite-svelte.com/navbars/">
|
|
151
|
+
<img alt="Tailwind CSS Navbar" src="https://flowbite.s3.amazonaws.com/github/navbar.jpg">
|
|
152
|
+
</a>
|
|
153
|
+
</td>
|
|
154
|
+
<td width="33.3333%">
|
|
155
|
+
<a href="https://flowbite-svelte.com/paginations/">
|
|
156
|
+
<img alt="Tailwind CSS Pagination" src="https://flowbite.s3.amazonaws.com/github/pagination.jpg">
|
|
157
|
+
</a>
|
|
158
|
+
</td>
|
|
159
|
+
</tr>
|
|
160
|
+
<tr>
|
|
161
|
+
<td width="33.3333%">Progress bar</td>
|
|
162
|
+
<td width="33.3333%">Ratings</td>
|
|
163
|
+
<td width="33.3333%">Sidebars</td>
|
|
164
|
+
</tr>
|
|
165
|
+
<tr>
|
|
166
|
+
<td width="33.3333%">
|
|
167
|
+
<a href="https://flowbite-svelte.com/progressbars/">
|
|
168
|
+
<img alt="Tailwind CSS Progress Bar" src="https://flowbite.s3.amazonaws.com/github/progress.jpg">
|
|
169
|
+
</a>
|
|
170
|
+
</td>
|
|
171
|
+
<td width="33.3333%">
|
|
172
|
+
<a href="https://flowbite-svelte.com/ratings/">
|
|
173
|
+
<img alt="Tailwind CSS Rating" src="https://flowbite.s3.amazonaws.com/github/rating.jpg">
|
|
174
|
+
</a>
|
|
175
|
+
</td>
|
|
176
|
+
<td width="33.3333%">
|
|
177
|
+
<a href="https://flowbite-svelte.com/sidebars/">
|
|
178
|
+
<img alt="Tailwind CSS Sidebar" src="https://flowbite.s3.amazonaws.com/github/sidebar.jpg">
|
|
179
|
+
</a>
|
|
180
|
+
</td>
|
|
181
|
+
</tr>
|
|
182
|
+
<tr>
|
|
183
|
+
<td width="33.3333%">Spinners</td>
|
|
184
|
+
<td width="33.3333%">Tables</td>
|
|
185
|
+
<td width="33.3333%">Tabs</td>
|
|
186
|
+
</tr>
|
|
187
|
+
<tr>
|
|
188
|
+
<td width="33.3333%">
|
|
189
|
+
<a href="https://flowbite-svelte.com/spinners/">
|
|
190
|
+
<img alt="Tailwind CSS Spinner" src="https://flowbite.s3.amazonaws.com/github/spinner.jpg">
|
|
191
|
+
</a>
|
|
192
|
+
</td>
|
|
193
|
+
<td width="33.3333%">
|
|
194
|
+
<a href="https://flowbite-svelte.com/tables/">
|
|
195
|
+
<img alt="Tailwind CSS Tables" src="https://flowbite.s3.amazonaws.com/github/tables.jpg">
|
|
196
|
+
</a>
|
|
197
|
+
</td>
|
|
198
|
+
<td width="33.3333%">
|
|
199
|
+
<a href="https://flowbite-svelte.com/tabs/">
|
|
200
|
+
<img alt="Tailwind CSS Tabs" src="https://flowbite.s3.amazonaws.com/github/tabs.jpg">
|
|
201
|
+
</a>
|
|
202
|
+
</td>
|
|
203
|
+
</tr>
|
|
204
|
+
<tr>
|
|
205
|
+
<td width="33.3333%">Timelines</td>
|
|
206
|
+
<td width="33.3333%">Toast</td>
|
|
207
|
+
<td width="33.3333%">Tooltips</td>
|
|
208
|
+
</tr>
|
|
209
|
+
<tr>
|
|
210
|
+
<td width="33.3333%">
|
|
211
|
+
<a href="https://flowbite-svelte.com/timelines/">
|
|
212
|
+
<img alt="Tailwind CSS Timeline" src="https://flowbite.s3.amazonaws.com/github/timeline.jpg">
|
|
213
|
+
</a>
|
|
214
|
+
</td>
|
|
215
|
+
<td width="33.3333%">
|
|
216
|
+
<a href="https://flowbite-svelte.com/toasts/">
|
|
217
|
+
<img alt="Tailwind CSS Toast" src="https://flowbite.s3.amazonaws.com/github/toast.jpg">
|
|
218
|
+
</a>
|
|
219
|
+
</td>
|
|
220
|
+
<td width="33.3333%">
|
|
221
|
+
<a href="https://flowbite-svelte.com/tooltips/">
|
|
222
|
+
<img alt="Tailwind CSS Tooltips" src="https://flowbite.s3.amazonaws.com/github/tooltips.jpg">
|
|
223
|
+
</a>
|
|
224
|
+
</td>
|
|
225
|
+
</tr>
|
|
226
|
+
<tr>
|
|
227
|
+
<td width="33.3333%">Input Field</td>
|
|
228
|
+
<td width="33.3333%">File Input</td>
|
|
229
|
+
<td width="33.3333%">Search Input</td>
|
|
230
|
+
</tr>
|
|
231
|
+
<tr>
|
|
232
|
+
<td width="33.3333%">
|
|
233
|
+
<a href="https://flowbite-svelte.com/forms/input/">
|
|
234
|
+
<img alt="Tailwind CSS Input Field" src="https://flowbite.s3.amazonaws.com/github/input-field.jpg">
|
|
235
|
+
</a>
|
|
236
|
+
</td>
|
|
237
|
+
<td width="33.3333%">
|
|
238
|
+
<a href="https://flowbite-svelte.com/forms/file-input/">
|
|
239
|
+
<img alt="Tailwind CSS File Input" src="https://flowbite.s3.amazonaws.com/github/file-input.jpg">
|
|
240
|
+
</a>
|
|
241
|
+
</td>
|
|
242
|
+
<td width="33.3333%">
|
|
243
|
+
<a href="https://flowbite-svelte.com/forms/search/">
|
|
244
|
+
<img alt="Tailwind CSS Search Input" src="https://flowbite.s3.amazonaws.com/github/search-input.jpg">
|
|
245
|
+
</a>
|
|
246
|
+
</td>
|
|
247
|
+
</tr>
|
|
248
|
+
<tr>
|
|
249
|
+
<td width="33.3333%">Select</td>
|
|
250
|
+
<td width="33.3333%">Textarea</td>
|
|
251
|
+
<td width="33.3333%">Checkbox</td>
|
|
252
|
+
</tr>
|
|
253
|
+
<tr>
|
|
254
|
+
<td width="33.3333%">
|
|
255
|
+
<a href="https://flowbite-svelte.com/forms/select/">
|
|
256
|
+
<img alt="Tailwind CSS Select" src="https://flowbite.s3.amazonaws.com/github/select.jpg">
|
|
257
|
+
</a>
|
|
258
|
+
</td>
|
|
259
|
+
<td width="33.3333%">
|
|
260
|
+
<a href="https://flowbite-svelte.com/forms/textarea/">
|
|
261
|
+
<img alt="Tailwind CSS Textarea" src="https://flowbite.s3.amazonaws.com/github/textarea.jpg">
|
|
262
|
+
</a>
|
|
263
|
+
</td>
|
|
264
|
+
<td width="33.3333%">
|
|
265
|
+
<a href="https://flowbite-svelte.com/forms/checkbox/">
|
|
266
|
+
<img alt="Tailwind CSS Checkbox" src="https://flowbite.s3.amazonaws.com/github/checkbox.jpg">
|
|
267
|
+
</a>
|
|
268
|
+
</td>
|
|
269
|
+
</tr>
|
|
270
|
+
<tr>
|
|
271
|
+
<td width="33.3333%">Radio</td>
|
|
272
|
+
<td width="33.3333%">Toggle</td>
|
|
273
|
+
<td width="33.3333%">Range Slider</td>
|
|
274
|
+
</tr>
|
|
275
|
+
<tr>
|
|
276
|
+
<td width="33.3333%">
|
|
277
|
+
<a href="https://flowbite-svelte.com/forms/radio/">
|
|
278
|
+
<img alt="Tailwind CSS Radio" src="https://flowbite.s3.amazonaws.com/github/radio.jpg">
|
|
279
|
+
</a>
|
|
280
|
+
</td>
|
|
281
|
+
<td width="33.3333%">
|
|
282
|
+
<a href="https://flowbite-svelte.com/forms/toggle/">
|
|
283
|
+
<img alt="Tailwind CSS Toggle" src="https://flowbite.s3.amazonaws.com/github/toggle.jpg">
|
|
284
|
+
</a>
|
|
285
|
+
</td>
|
|
286
|
+
<td width="33.3333%">
|
|
287
|
+
<a href="https://flowbite-svelte.com/forms/range/">
|
|
288
|
+
<img alt="Tailwind CSS Range Slider" src="https://flowbite.s3.amazonaws.com/github/range-slider.jpg">
|
|
289
|
+
</a>
|
|
290
|
+
</td>
|
|
291
|
+
</tr>
|
|
292
|
+
<tr>
|
|
293
|
+
<td width="33.3333%">Floating Label</td>
|
|
294
|
+
</tr>
|
|
295
|
+
<tr>
|
|
296
|
+
<td width="33.3333%">
|
|
297
|
+
<a href="https://flowbite-svelte.com/forms/floating-label/">
|
|
298
|
+
<img alt="Tailwind CSS Floating Label" src="https://flowbite.s3.amazonaws.com/github/floating-label.jpg">
|
|
299
|
+
</a>
|
|
300
|
+
</td>
|
|
301
|
+
</tr>
|
|
302
|
+
</table>
|
|
303
|
+
|
|
304
|
+
## Community
|
|
305
|
+
|
|
306
|
+
If you need help or just want to discuss about the library join the community on Github:
|
|
307
|
+
|
|
308
|
+
⌨️ [Discuss about Flowbite on GitHub](https://github.com/themesberg/flowbite/discussions)
|
|
309
|
+
|
|
310
|
+
For casual chatting with others using the library:
|
|
311
|
+
|
|
312
|
+
💬 [Join the Flowbite Discord Server](https://discord.gg/4eeurUVvTy)
|
|
180
313
|
|
|
181
314
|
## Tests
|
|
182
315
|
|
|
@@ -192,4 +325,12 @@ npm run test
|
|
|
192
325
|
npm run gen:props
|
|
193
326
|
```
|
|
194
327
|
|
|
195
|
-
This will pull all props from components and replace files in `/src/routes/props` directory.
|
|
328
|
+
This will pull all props from components and replace files in `/src/routes/props` directory.
|
|
329
|
+
|
|
330
|
+
## Contribute
|
|
331
|
+
|
|
332
|
+
Please read [How to contribute](https://github.com/themesberg/flowbite-svelte/blob/main/CONTRIBUTING.md).
|
|
333
|
+
|
|
334
|
+
## Changelog
|
|
335
|
+
|
|
336
|
+
[Changelog](https://github.com/themesberg/flowbite-svelte/blob/main/CHANGELOG.md)
|
package/cards/Card.svelte
CHANGED
|
@@ -10,40 +10,31 @@ export let header = '';
|
|
|
10
10
|
export let divClass = 'max-w-sm bg-white rounded-lg border border-gray-200 shadow-md dark:bg-gray-800 dark:border-gray-700';
|
|
11
11
|
let buttonClass;
|
|
12
12
|
if (btnColor === 'blue') {
|
|
13
|
-
buttonClass =
|
|
14
|
-
'inline-flex items-center py-2 px-3 text-sm font-medium text-center text-white bg-blue-700 rounded-lg hover:bg-blue-800 focus:ring-4 focus:ring-blue-300 dark:bg-blue-600 dark:hover:bg-blue-700 dark:focus:ring-blue-800';
|
|
13
|
+
buttonClass = 'inline-flex items-center py-2 px-3 text-sm font-medium text-center text-white bg-blue-700 rounded-lg hover:bg-blue-800 focus:ring-4 focus:ring-blue-300 dark:bg-blue-600 dark:hover:bg-blue-700 dark:focus:ring-blue-800';
|
|
15
14
|
}
|
|
16
15
|
else if (btnColor === 'gray') {
|
|
17
|
-
buttonClass =
|
|
18
|
-
'inline-flex items-center py-2 px-3 text-sm font-medium text-center text-white bg-gray-700 rounded-lg hover:bg-gray-800 focus:ring-4 focus:ring-gray-300 dark:bg-gray-600 dark:hover:bg-gray-700 dark:focus:ring-gray-800';
|
|
16
|
+
buttonClass = 'inline-flex items-center py-2 px-3 text-sm font-medium text-center text-white bg-gray-700 rounded-lg hover:bg-gray-800 focus:ring-4 focus:ring-gray-300 dark:bg-gray-600 dark:hover:bg-gray-700 dark:focus:ring-gray-800';
|
|
19
17
|
}
|
|
20
18
|
else if (btnColor === 'red') {
|
|
21
|
-
buttonClass =
|
|
22
|
-
'inline-flex items-center py-2 px-3 text-sm font-medium text-center text-white bg-red-700 rounded-lg hover:bg-red-800 focus:ring-4 focus:ring-red-300 dark:bg-red-600 dark:hover:bg-red-700 dark:focus:ring-red-800';
|
|
19
|
+
buttonClass = 'inline-flex items-center py-2 px-3 text-sm font-medium text-center text-white bg-red-700 rounded-lg hover:bg-red-800 focus:ring-4 focus:ring-red-300 dark:bg-red-600 dark:hover:bg-red-700 dark:focus:ring-red-800';
|
|
23
20
|
}
|
|
24
21
|
else if (btnColor === 'yellow') {
|
|
25
|
-
buttonClass =
|
|
26
|
-
'inline-flex items-center py-2 px-3 text-sm font-medium text-center text-white bg-yellow-700 rounded-lg hover:bg-yellow-800 focus:ring-4 focus:ring-yellow-300 dark:bg-yellow-600 dark:hover:bg-yellow-700 dark:focus:ring-yellow-800';
|
|
22
|
+
buttonClass = 'inline-flex items-center py-2 px-3 text-sm font-medium text-center text-white bg-yellow-700 rounded-lg hover:bg-yellow-800 focus:ring-4 focus:ring-yellow-300 dark:bg-yellow-600 dark:hover:bg-yellow-700 dark:focus:ring-yellow-800';
|
|
27
23
|
}
|
|
28
24
|
else if (btnColor === 'green') {
|
|
29
|
-
buttonClass =
|
|
30
|
-
'inline-flex items-center py-2 px-3 text-sm font-medium text-center text-white bg-green-700 rounded-lg hover:bg-green-800 focus:ring-4 focus:ring-green-300 dark:bg-green-600 dark:hover:bg-green-700 dark:focus:ring-green-800';
|
|
25
|
+
buttonClass = 'inline-flex items-center py-2 px-3 text-sm font-medium text-center text-white bg-green-700 rounded-lg hover:bg-green-800 focus:ring-4 focus:ring-green-300 dark:bg-green-600 dark:hover:bg-green-700 dark:focus:ring-green-800';
|
|
31
26
|
}
|
|
32
27
|
else if (btnColor === 'indigo') {
|
|
33
|
-
buttonClass =
|
|
34
|
-
'inline-flex items-center py-2 px-3 text-sm font-medium text-center text-white bg-indigo-700 rounded-lg hover:bg-indigo-800 focus:ring-4 focus:ring-indigo-300 dark:bg-indigo-600 dark:hover:bg-indigo-700 dark:focus:ring-indigo-800';
|
|
28
|
+
buttonClass = 'inline-flex items-center py-2 px-3 text-sm font-medium text-center text-white bg-indigo-700 rounded-lg hover:bg-indigo-800 focus:ring-4 focus:ring-indigo-300 dark:bg-indigo-600 dark:hover:bg-indigo-700 dark:focus:ring-indigo-800';
|
|
35
29
|
}
|
|
36
30
|
else if (btnColor === 'purple') {
|
|
37
|
-
buttonClass =
|
|
38
|
-
'inline-flex items-center py-2 px-3 text-sm font-medium text-center text-white bg-purple-700 rounded-lg hover:bg-purple-800 focus:ring-4 focus:ring-purple-300 dark:bg-purple-600 dark:hover:bg-purple-700 dark:focus:ring-purple-800';
|
|
31
|
+
buttonClass = 'inline-flex items-center py-2 px-3 text-sm font-medium text-center text-white bg-purple-700 rounded-lg hover:bg-purple-800 focus:ring-4 focus:ring-purple-300 dark:bg-purple-600 dark:hover:bg-purple-700 dark:focus:ring-purple-800';
|
|
39
32
|
}
|
|
40
33
|
else if (btnColor === 'pink') {
|
|
41
|
-
buttonClass =
|
|
42
|
-
'inline-flex items-center py-2 px-3 text-sm font-medium text-center text-white bg-pink-700 rounded-lg hover:bg-pink-800 focus:ring-4 focus:ring-pink-300 dark:bg-pink-600 dark:hover:bg-pink-700 dark:focus:ring-pink-800';
|
|
34
|
+
buttonClass = 'inline-flex items-center py-2 px-3 text-sm font-medium text-center text-white bg-pink-700 rounded-lg hover:bg-pink-800 focus:ring-4 focus:ring-pink-300 dark:bg-pink-600 dark:hover:bg-pink-700 dark:focus:ring-pink-800';
|
|
43
35
|
}
|
|
44
36
|
else {
|
|
45
|
-
buttonClass =
|
|
46
|
-
'inline-flex items-center py-2 px-3 text-sm font-medium text-center text-white bg-blue-700 rounded-lg hover:bg-blue-800 focus:ring-4 focus:ring-blue-300 dark:bg-blue-600 dark:hover:bg-blue-700 dark:focus:ring-blue-800';
|
|
37
|
+
buttonClass = 'inline-flex items-center py-2 px-3 text-sm font-medium text-center text-white bg-blue-700 rounded-lg hover:bg-blue-800 focus:ring-4 focus:ring-blue-300 dark:bg-blue-600 dark:hover:bg-blue-700 dark:focus:ring-blue-800';
|
|
47
38
|
}
|
|
48
39
|
</script>
|
|
49
40
|
|
|
@@ -77,17 +68,7 @@ else {
|
|
|
77
68
|
{#if link && btnLabel}
|
|
78
69
|
<a href={link} {rel} class={buttonClass}>
|
|
79
70
|
{btnLabel}
|
|
80
|
-
<svg
|
|
81
|
-
class="ml-2 -mr-1 w-4 h-4"
|
|
82
|
-
fill="currentColor"
|
|
83
|
-
viewBox="0 0 20 20"
|
|
84
|
-
xmlns="http://www.w3.org/2000/svg"
|
|
85
|
-
><path
|
|
86
|
-
fill-rule="evenodd"
|
|
87
|
-
d="M10.293 3.293a1 1 0 011.414 0l6 6a1 1 0 010 1.414l-6 6a1 1 0 01-1.414-1.414L14.586 11H3a1 1 0 110-2h11.586l-4.293-4.293a1 1 0 010-1.414z"
|
|
88
|
-
clip-rule="evenodd"
|
|
89
|
-
/></svg
|
|
90
|
-
>
|
|
71
|
+
<svg class="ml-2 -mr-1 w-4 h-4" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><path fill-rule="evenodd" d="M10.293 3.293a1 1 0 011.414 0l6 6a1 1 0 010 1.414l-6 6a1 1 0 01-1.414-1.414L14.586 11H3a1 1 0 110-2h11.586l-4.293-4.293a1 1 0 010-1.414z" clip-rule="evenodd" /></svg>
|
|
91
72
|
</a>
|
|
92
73
|
{/if}
|
|
93
74
|
</div>
|
|
@@ -36,7 +36,7 @@ const closeDropdown = () => {
|
|
|
36
36
|
dropdownIdStore.update((n) => (n = null));
|
|
37
37
|
};
|
|
38
38
|
export let items;
|
|
39
|
-
export let dropdownClass = 'absolute
|
|
39
|
+
export let dropdownClass = 'absolute left-0 top-1 z-10 w-44 text-base list-none bg-white rounded divide-y divide-gray-100 shadow dark:bg-gray-700';
|
|
40
40
|
export let headerClass = 'py-3 px-4 text-gray-900 dark:text-white';
|
|
41
41
|
export let linkClass = 'block py-2 px-4 text-sm text-gray-700 hover:bg-gray-100 dark:hover:bg-gray-600 dark:text-gray-200 dark:hover:text-white';
|
|
42
42
|
if (color === 'blue') {
|
package/forms/Radio.svelte
CHANGED
|
@@ -1,19 +1,16 @@
|
|
|
1
|
-
<script>export let
|
|
2
|
-
export let divClass = 'flex items-center mb-4';
|
|
1
|
+
<script>export let divClass = 'flex items-center mb-4';
|
|
3
2
|
export let inputClass = 'w-4 h-4 border-gray-300 focus:ring-2 focus:ring-blue-300 dark:focus:ring-blue-600 dark:focus:bg-blue-600 dark:bg-gray-700 dark:border-gray-600';
|
|
4
3
|
export let labelClass = 'block ml-2 text-sm font-medium text-gray-900 dark:text-gray-300';
|
|
5
4
|
export let name = 'countries';
|
|
6
5
|
export let options;
|
|
7
6
|
</script>
|
|
8
7
|
|
|
9
|
-
|
|
10
|
-
<
|
|
11
|
-
|
|
12
|
-
<
|
|
13
|
-
|
|
14
|
-
|
|
15
|
-
|
|
16
|
-
|
|
17
|
-
|
|
18
|
-
{/each}
|
|
19
|
-
</fieldset>
|
|
8
|
+
{#each options as option}
|
|
9
|
+
<div class={divClass}>
|
|
10
|
+
<input id={option.id} type="radio" {name} value={option.value} class={inputClass} aria-labelledby={option.id} aria-describedby={option.id} checked={option.checked} disabled={option.disabled} />
|
|
11
|
+
<label for={option.id} class={labelClass}>
|
|
12
|
+
{@html option.label}
|
|
13
|
+
</label>
|
|
14
|
+
<slot name="helper" />
|
|
15
|
+
</div>
|
|
16
|
+
{/each}
|
package/forms/Radio.svelte.d.ts
CHANGED
|
@@ -2,7 +2,6 @@ import { SvelteComponentTyped } from "svelte";
|
|
|
2
2
|
import type { RadioType } from '../types';
|
|
3
3
|
declare const __propDef: {
|
|
4
4
|
props: {
|
|
5
|
-
legend?: string;
|
|
6
5
|
divClass?: string;
|
|
7
6
|
inputClass?: string;
|
|
8
7
|
labelClass?: string;
|
|
@@ -12,7 +11,9 @@ declare const __propDef: {
|
|
|
12
11
|
events: {
|
|
13
12
|
[evt: string]: CustomEvent<any>;
|
|
14
13
|
};
|
|
15
|
-
slots: {
|
|
14
|
+
slots: {
|
|
15
|
+
helper: {};
|
|
16
|
+
};
|
|
16
17
|
};
|
|
17
18
|
export declare type RadioProps = typeof __propDef.props;
|
|
18
19
|
export declare type RadioEvents = typeof __propDef.events;
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "flowbite-svelte",
|
|
3
|
-
"version": "0.15.
|
|
3
|
+
"version": "0.15.10",
|
|
4
4
|
"description": "Flowbite components for Svelte",
|
|
5
5
|
"main": "./package/index.js",
|
|
6
6
|
"author": {
|
|
@@ -13,7 +13,7 @@
|
|
|
13
13
|
"license": "MIT",
|
|
14
14
|
"devDependencies": {
|
|
15
15
|
"@codewithshin/svelte-feathericons": "^0.1.9",
|
|
16
|
-
"@codewithshin/svelte-sidebar": "^0.
|
|
16
|
+
"@codewithshin/svelte-sidebar": "^0.5.7",
|
|
17
17
|
"@codewithshin/svelte-utterances": "^0.2.2",
|
|
18
18
|
"@playwright/test": "^1.21.0",
|
|
19
19
|
"@sveltejs/adapter-auto": "next",
|
|
@@ -90,12 +90,6 @@
|
|
|
90
90
|
"./alerts/Alert.svelte": "./alerts/Alert.svelte",
|
|
91
91
|
"./alerts/BorderAlert.svelte": "./alerts/BorderAlert.svelte",
|
|
92
92
|
"./alerts/InfoAlert.svelte": "./alerts/InfoAlert.svelte",
|
|
93
|
-
"./auth/Confirm.svelte": "./auth/Confirm.svelte",
|
|
94
|
-
"./auth/ForgotPassword.svelte": "./auth/ForgotPassword.svelte",
|
|
95
|
-
"./auth/Input.svelte": "./auth/Input.svelte",
|
|
96
|
-
"./auth/Login.svelte": "./auth/Login.svelte",
|
|
97
|
-
"./auth/Register.svelte": "./auth/Register.svelte",
|
|
98
|
-
"./auth/Reset.svelte": "./auth/Reset.svelte",
|
|
99
93
|
"./avatar/Avatar.svelte": "./avatar/Avatar.svelte",
|
|
100
94
|
"./badges/Badge.svelte": "./badges/Badge.svelte",
|
|
101
95
|
"./badges/BadgeIcon.svelte": "./badges/BadgeIcon.svelte",
|
package/types.d.ts
CHANGED
package/auth/Confirm.svelte
DELETED
|
@@ -1,23 +0,0 @@
|
|
|
1
|
-
<script>import { Button, Alert, Spinner } from '../index';
|
|
2
|
-
export let loginLink;
|
|
3
|
-
export let success;
|
|
4
|
-
export let error;
|
|
5
|
-
</script>
|
|
6
|
-
|
|
7
|
-
<div
|
|
8
|
-
class="p-4 max-w-sm bg-white rounded-lg border border-gray-200 shadow-md sm:p-6 lg:p-8 dark:bg-gray-800 dark:border-gray-700 w-full"
|
|
9
|
-
>
|
|
10
|
-
{#if success}
|
|
11
|
-
<h1 class="text-xl w-full mb-4 font-medium text-gray-900 dark:text-white">
|
|
12
|
-
Your email is confirmed.
|
|
13
|
-
</h1>
|
|
14
|
-
<a href={loginLink.href} class="py-4">
|
|
15
|
-
<Button textSize="text-sm" >{loginLink.name}</Button>
|
|
16
|
-
</a>
|
|
17
|
-
{:else}
|
|
18
|
-
<Spinner />
|
|
19
|
-
{/if}
|
|
20
|
-
{#if error}
|
|
21
|
-
<Alert alertId="alert-red" color="red" closeBtn>{error}</Alert>
|
|
22
|
-
{/if}
|
|
23
|
-
</div>
|
package/auth/Confirm.svelte.d.ts
DELETED
|
@@ -1,19 +0,0 @@
|
|
|
1
|
-
import { SvelteComponentTyped } from "svelte";
|
|
2
|
-
import type { LinkType } from '../types';
|
|
3
|
-
declare const __propDef: {
|
|
4
|
-
props: {
|
|
5
|
-
loginLink: LinkType;
|
|
6
|
-
success: string;
|
|
7
|
-
error: string;
|
|
8
|
-
};
|
|
9
|
-
events: {
|
|
10
|
-
[evt: string]: CustomEvent<any>;
|
|
11
|
-
};
|
|
12
|
-
slots: {};
|
|
13
|
-
};
|
|
14
|
-
export declare type ConfirmProps = typeof __propDef.props;
|
|
15
|
-
export declare type ConfirmEvents = typeof __propDef.events;
|
|
16
|
-
export declare type ConfirmSlots = typeof __propDef.slots;
|
|
17
|
-
export default class Confirm extends SvelteComponentTyped<ConfirmProps, ConfirmEvents, ConfirmSlots> {
|
|
18
|
-
}
|
|
19
|
-
export {};
|
|
@@ -1,57 +0,0 @@
|
|
|
1
|
-
<script>import { Alert } from '../index';
|
|
2
|
-
export let forgot = undefined;
|
|
3
|
-
export let email = '';
|
|
4
|
-
export let error = '';
|
|
5
|
-
export let message = '';
|
|
6
|
-
export let data = '';
|
|
7
|
-
</script>
|
|
8
|
-
|
|
9
|
-
<div
|
|
10
|
-
class="p-4 max-w-sm bg-white rounded-lg border border-gray-200 shadow-md sm:p-6 lg:p-8 dark:bg-gray-800 dark:border-gray-700 w-full"
|
|
11
|
-
>
|
|
12
|
-
<form class="space-y-6" on:submit|preventDefault={forgot}>
|
|
13
|
-
<div class="heading">
|
|
14
|
-
<a class="back" href="/"><i class="bi bi-arrow-left dark:text-white" /></a>
|
|
15
|
-
<h2 class="text-xl font-medium text-gray-900 dark:text-white">Forgot password</h2>
|
|
16
|
-
</div>
|
|
17
|
-
<div>
|
|
18
|
-
<label for="email" class="block mb-2 text-sm font-medium text-gray-900 dark:text-gray-300"
|
|
19
|
-
>Email</label
|
|
20
|
-
>
|
|
21
|
-
<input
|
|
22
|
-
type="email"
|
|
23
|
-
required
|
|
24
|
-
name="email"
|
|
25
|
-
placeholder="Enter your email"
|
|
26
|
-
class="bg-gray-50 border border-gray-300 text-gray-900 text-sm rounded-lg focus:ring-blue-500 focus:border-blue-500 block w-full p-2.5 dark:bg-gray-600 dark:border-gray-500 dark:placeholder-gray-400 dark:text-white"
|
|
27
|
-
bind:value={email}
|
|
28
|
-
/>
|
|
29
|
-
{#if data}
|
|
30
|
-
<div class="mt-6">
|
|
31
|
-
<Alert alertId="alert-green" color="yellow" closeBtn>
|
|
32
|
-
{data}
|
|
33
|
-
</Alert>
|
|
34
|
-
</div>
|
|
35
|
-
{/if}
|
|
36
|
-
{#if message}
|
|
37
|
-
<div class="mt-6">
|
|
38
|
-
<Alert alertId="alert-green" color="green" closeBtn>
|
|
39
|
-
{message}
|
|
40
|
-
</Alert>
|
|
41
|
-
</div>
|
|
42
|
-
{/if}
|
|
43
|
-
{#if error}
|
|
44
|
-
<div class="mt-6">
|
|
45
|
-
<Alert alertId="alert-green" color="red" closeBtn>
|
|
46
|
-
{error}
|
|
47
|
-
</Alert>
|
|
48
|
-
</div>
|
|
49
|
-
{/if}
|
|
50
|
-
</div>
|
|
51
|
-
<button
|
|
52
|
-
type="submit"
|
|
53
|
-
class="w-full text-white bg-blue-700 hover:bg-blue-800 focus:ring-4 focus:ring-blue-300 font-medium rounded-lg text-sm px-5 py-2.5 text-center dark:bg-blue-600 dark:hover:bg-blue-700 dark:focus:ring-blue-800"
|
|
54
|
-
>Send recovery email</button
|
|
55
|
-
>
|
|
56
|
-
</form>
|
|
57
|
-
</div>
|
|
@@ -1,21 +0,0 @@
|
|
|
1
|
-
import { SvelteComponentTyped } from "svelte";
|
|
2
|
-
import type { AuthFunctionType } from '../types';
|
|
3
|
-
declare const __propDef: {
|
|
4
|
-
props: {
|
|
5
|
-
forgot?: AuthFunctionType;
|
|
6
|
-
email?: string;
|
|
7
|
-
error?: string;
|
|
8
|
-
message?: string;
|
|
9
|
-
data?: string;
|
|
10
|
-
};
|
|
11
|
-
events: {
|
|
12
|
-
[evt: string]: CustomEvent<any>;
|
|
13
|
-
};
|
|
14
|
-
slots: {};
|
|
15
|
-
};
|
|
16
|
-
export declare type ForgotPasswordProps = typeof __propDef.props;
|
|
17
|
-
export declare type ForgotPasswordEvents = typeof __propDef.events;
|
|
18
|
-
export declare type ForgotPasswordSlots = typeof __propDef.slots;
|
|
19
|
-
export default class ForgotPassword extends SvelteComponentTyped<ForgotPasswordProps, ForgotPasswordEvents, ForgotPasswordSlots> {
|
|
20
|
-
}
|
|
21
|
-
export {};
|
package/auth/Input.svelte
DELETED
|
File without changes
|
package/auth/Input.svelte.d.ts
DELETED
|
@@ -1,19 +0,0 @@
|
|
|
1
|
-
/** @typedef {typeof __propDef.props} InputProps */
|
|
2
|
-
/** @typedef {typeof __propDef.events} InputEvents */
|
|
3
|
-
/** @typedef {typeof __propDef.slots} InputSlots */
|
|
4
|
-
export default class Input extends SvelteComponentTyped<{}, {
|
|
5
|
-
[evt: string]: CustomEvent<any>;
|
|
6
|
-
}, {}> {
|
|
7
|
-
}
|
|
8
|
-
export type InputProps = typeof __propDef.props;
|
|
9
|
-
export type InputEvents = typeof __propDef.events;
|
|
10
|
-
export type InputSlots = typeof __propDef.slots;
|
|
11
|
-
import { SvelteComponentTyped } from "svelte";
|
|
12
|
-
declare const __propDef: {
|
|
13
|
-
props: {};
|
|
14
|
-
events: {
|
|
15
|
-
[evt: string]: CustomEvent<any>;
|
|
16
|
-
};
|
|
17
|
-
slots: {};
|
|
18
|
-
};
|
|
19
|
-
export {};
|
package/auth/Login.svelte
DELETED
|
@@ -1,116 +0,0 @@
|
|
|
1
|
-
<script>import { Alert } from '../index';
|
|
2
|
-
export let login = undefined;
|
|
3
|
-
export let title = 'Sign in';
|
|
4
|
-
export let btnSignInColor = 'blue';
|
|
5
|
-
export let rememberMe = false;
|
|
6
|
-
export let signup = undefined;
|
|
7
|
-
export let lostPassword = undefined;
|
|
8
|
-
export let error = '';
|
|
9
|
-
export let submitText = 'Login to your account';
|
|
10
|
-
let submitClass;
|
|
11
|
-
export let fields;
|
|
12
|
-
if (btnSignInColor === 'blue') {
|
|
13
|
-
submitClass =
|
|
14
|
-
'w-full text-white bg-blue-700 hover:bg-blue-800 focus:ring-4 focus:ring-blue-300 font-medium rounded-lg text-sm px-5 py-2.5 text-center dark:bg-blue-600 dark:hover:bg-blue-700 dark:focus:ring-blue-800';
|
|
15
|
-
}
|
|
16
|
-
else if (btnSignInColor === 'gray') {
|
|
17
|
-
submitClass =
|
|
18
|
-
'w-full text-white bg-gray-700 hover:bg-gray-800 focus:ring-4 focus:ring-gray-300 font-medium rounded-lg text-sm px-5 py-2.5 text-center dark:bg-gray-600 dark:hover:bg-gray-700 dark:focus:ring-gray-800';
|
|
19
|
-
}
|
|
20
|
-
else if (btnSignInColor === 'red') {
|
|
21
|
-
submitClass =
|
|
22
|
-
'w-full text-white bg-red-700 hover:bg-red-800 focus:ring-4 focus:ring-red-300 font-medium rounded-lg text-sm px-5 py-2.5 text-center dark:bg-red-600 dark:hover:bg-red-700 dark:focus:ring-red-800';
|
|
23
|
-
}
|
|
24
|
-
else if (btnSignInColor === 'yellow') {
|
|
25
|
-
submitClass =
|
|
26
|
-
'w-full text-white bg-yellow-700 hover:bg-yellow-800 focus:ring-4 focus:ring-yellow-300 font-medium rounded-lg text-sm px-5 py-2.5 text-center dark:bg-yellow-600 dark:hover:bg-yellow-700 dark:focus:ring-yellow-800';
|
|
27
|
-
}
|
|
28
|
-
else if (btnSignInColor === 'green') {
|
|
29
|
-
submitClass =
|
|
30
|
-
'w-full text-white bg-green-700 hover:bg-green-800 focus:ring-4 focus:ring-green-300 font-medium rounded-lg text-sm px-5 py-2.5 text-center dark:bg-green-600 dark:hover:bg-green-700 dark:focus:ring-green-800';
|
|
31
|
-
}
|
|
32
|
-
else if (btnSignInColor === 'indigo') {
|
|
33
|
-
submitClass =
|
|
34
|
-
'w-full text-white bg-indigo-700 hover:bg-indigo-800 focus:ring-4 focus:ring-indigo-300 font-medium rounded-lg text-sm px-5 py-2.5 text-center dark:bg-indigo-600 dark:hover:bg-indigo-700 dark:focus:ring-indigo-800';
|
|
35
|
-
}
|
|
36
|
-
else if (btnSignInColor === 'purple') {
|
|
37
|
-
submitClass =
|
|
38
|
-
'w-full text-white bg-purple-700 hover:bg-purple-800 focus:ring-4 focus:ring-purple-300 font-medium rounded-lg text-sm px-5 py-2.5 text-center dark:bg-purple-600 dark:hover:bg-purple-700 dark:focus:ring-purple-800';
|
|
39
|
-
}
|
|
40
|
-
else if (btnSignInColor === 'pink') {
|
|
41
|
-
submitClass =
|
|
42
|
-
'w-full text-white bg-pink-700 hover:bg-pink-800 focus:ring-4 focus:ring-pink-300 font-medium rounded-lg text-sm px-5 py-2.5 text-center dark:bg-pink-600 dark:hover:bg-pink-700 dark:focus:ring-pink-800';
|
|
43
|
-
}
|
|
44
|
-
else {
|
|
45
|
-
submitClass =
|
|
46
|
-
'w-full text-white bg-blue-700 hover:bg-blue-800 focus:ring-4 focus:ring-blue-300 font-medium rounded-lg text-sm px-5 py-2.5 text-center dark:bg-blue-600 dark:hover:bg-blue-700 dark:focus:ring-blue-800';
|
|
47
|
-
}
|
|
48
|
-
</script>
|
|
49
|
-
|
|
50
|
-
<div
|
|
51
|
-
class="p-4 max-w-sm w-full bg-white rounded-lg border border-gray-200 shadow-md sm:p-6 lg:p-8 dark:bg-gray-800 dark:border-gray-700"
|
|
52
|
-
>
|
|
53
|
-
<form class="space-y-6" on:submit|preventDefault={login}>
|
|
54
|
-
<h3 class="text-xl font-medium text-gray-900 dark:text-white">{title}</h3>
|
|
55
|
-
{#each fields as field}
|
|
56
|
-
<div>
|
|
57
|
-
<label
|
|
58
|
-
for={field.label}
|
|
59
|
-
class="block mb-2 text-sm font-medium text-gray-900 dark:text-gray-300"
|
|
60
|
-
>{field.label}</label
|
|
61
|
-
>
|
|
62
|
-
<input
|
|
63
|
-
type={field.fieldtype}
|
|
64
|
-
name={field.label}
|
|
65
|
-
id={field.label}
|
|
66
|
-
class="bg-gray-50 border border-gray-300 text-gray-900 text-sm rounded-lg focus:ring-blue-500 focus:border-blue-500 block w-full p-2.5 dark:bg-gray-600 dark:border-gray-500 dark:placeholder-gray-400 dark:text-white"
|
|
67
|
-
placeholder={field.placeholder}
|
|
68
|
-
required={field.required}
|
|
69
|
-
/>
|
|
70
|
-
</div>
|
|
71
|
-
{/each}
|
|
72
|
-
<div class="flex items-start">
|
|
73
|
-
{#if rememberMe}
|
|
74
|
-
<div class="flex items-start">
|
|
75
|
-
<div class="flex items-center h-5">
|
|
76
|
-
<input
|
|
77
|
-
id="remember"
|
|
78
|
-
type="checkbox"
|
|
79
|
-
class="w-4 h-4 bg-gray-50 rounded border border-gray-300 focus:ring-3 focus:ring-blue-300 dark:bg-gray-700 dark:border-gray-600 dark:focus:ring-blue-600 dark:ring-offset-gray-800"
|
|
80
|
-
/>
|
|
81
|
-
</div>
|
|
82
|
-
<div class="ml-3 text-sm">
|
|
83
|
-
<label for="remember" class="font-medium text-gray-900 dark:text-gray-300"
|
|
84
|
-
>Remember me</label
|
|
85
|
-
>
|
|
86
|
-
</div>
|
|
87
|
-
</div>
|
|
88
|
-
{/if}
|
|
89
|
-
{#if lostPassword}
|
|
90
|
-
<a
|
|
91
|
-
href={lostPassword.href}
|
|
92
|
-
rel={lostPassword.rel}
|
|
93
|
-
class="ml-auto text-sm text-blue-700 hover:underline dark:text-blue-500"
|
|
94
|
-
>{lostPassword.name}</a
|
|
95
|
-
>
|
|
96
|
-
{/if}
|
|
97
|
-
</div>
|
|
98
|
-
{#if error}
|
|
99
|
-
<div class="mt-6">
|
|
100
|
-
<Alert alertId="alert-red" color="red" closeBtn>
|
|
101
|
-
{error}
|
|
102
|
-
</Alert>
|
|
103
|
-
</div>
|
|
104
|
-
{/if}
|
|
105
|
-
<button type="submit" class={submitClass}>{submitText}</button>
|
|
106
|
-
{#if signup}
|
|
107
|
-
<div class="text-sm font-medium text-gray-500 dark:text-gray-300">
|
|
108
|
-
Not registered? <a
|
|
109
|
-
href={signup.href}
|
|
110
|
-
rel={signup.rel}
|
|
111
|
-
class="text-blue-700 hover:underline dark:text-blue-500">{signup.name}</a
|
|
112
|
-
>
|
|
113
|
-
</div>
|
|
114
|
-
{/if}
|
|
115
|
-
</form>
|
|
116
|
-
</div>
|
package/auth/Login.svelte.d.ts
DELETED
|
@@ -1,25 +0,0 @@
|
|
|
1
|
-
import { SvelteComponentTyped } from "svelte";
|
|
2
|
-
import type { AuthFunctionType, LinkType, AuthFieldType } from '../types';
|
|
3
|
-
declare const __propDef: {
|
|
4
|
-
props: {
|
|
5
|
-
login?: AuthFunctionType;
|
|
6
|
-
title?: string;
|
|
7
|
-
btnSignInColor?: string;
|
|
8
|
-
rememberMe?: boolean;
|
|
9
|
-
signup?: LinkType;
|
|
10
|
-
lostPassword?: LinkType;
|
|
11
|
-
error?: string;
|
|
12
|
-
submitText?: string;
|
|
13
|
-
fields: AuthFieldType[];
|
|
14
|
-
};
|
|
15
|
-
events: {
|
|
16
|
-
[evt: string]: CustomEvent<any>;
|
|
17
|
-
};
|
|
18
|
-
slots: {};
|
|
19
|
-
};
|
|
20
|
-
export declare type LoginProps = typeof __propDef.props;
|
|
21
|
-
export declare type LoginEvents = typeof __propDef.events;
|
|
22
|
-
export declare type LoginSlots = typeof __propDef.slots;
|
|
23
|
-
export default class Login extends SvelteComponentTyped<LoginProps, LoginEvents, LoginSlots> {
|
|
24
|
-
}
|
|
25
|
-
export {};
|
package/auth/Register.svelte
DELETED
|
@@ -1,118 +0,0 @@
|
|
|
1
|
-
<script>import { Alert } from '../index';
|
|
2
|
-
import { createEventDispatcher } from 'svelte';
|
|
3
|
-
const dispatch = createEventDispatcher();
|
|
4
|
-
export let register = undefined;
|
|
5
|
-
export let error = '';
|
|
6
|
-
export let login = undefined;
|
|
7
|
-
export let rememberMe = false;
|
|
8
|
-
export let lostPassword = undefined;
|
|
9
|
-
export let message = '';
|
|
10
|
-
// Variables bound to respective inputs via bind:value
|
|
11
|
-
// export let email: string = 'email';
|
|
12
|
-
// export let password: string = '';
|
|
13
|
-
// export let name: string = '';
|
|
14
|
-
//
|
|
15
|
-
// export let nameField: string = 'username';
|
|
16
|
-
// field names password, name, email
|
|
17
|
-
export let fields = [
|
|
18
|
-
{
|
|
19
|
-
label: 'name',
|
|
20
|
-
fieldtype: 'text',
|
|
21
|
-
required: true,
|
|
22
|
-
placeholder: 'Your name'
|
|
23
|
-
},
|
|
24
|
-
{
|
|
25
|
-
label: 'email',
|
|
26
|
-
fieldtype: 'email',
|
|
27
|
-
required: true,
|
|
28
|
-
placeholder: 'Your email'
|
|
29
|
-
},
|
|
30
|
-
{
|
|
31
|
-
label: 'password',
|
|
32
|
-
fieldtype: 'password',
|
|
33
|
-
required: true,
|
|
34
|
-
placeholder: 'Your password'
|
|
35
|
-
}
|
|
36
|
-
];
|
|
37
|
-
</script>
|
|
38
|
-
|
|
39
|
-
<div
|
|
40
|
-
class="p-4 max-w-sm bg-white rounded-lg border border-gray-200 shadow-md sm:p-6 lg:p-8 dark:bg-gray-800 dark:border-gray-700 w-full"
|
|
41
|
-
>
|
|
42
|
-
<form class="space-y-6" on:submit|preventDefault={register}>
|
|
43
|
-
{#if message}
|
|
44
|
-
<div class="mt-6">
|
|
45
|
-
<Alert alertId="alert-green" color="green" closeBtn>
|
|
46
|
-
{message}
|
|
47
|
-
</Alert>
|
|
48
|
-
</div>
|
|
49
|
-
{/if}
|
|
50
|
-
<div class="heading">
|
|
51
|
-
<a class="back" href="/"><i class="bi bi-arrow-left dark:text-white" /></a>
|
|
52
|
-
<h3 class="text-xl font-medium text-gray-900 dark:text-white">Register</h3>
|
|
53
|
-
</div>
|
|
54
|
-
{#each fields as field}
|
|
55
|
-
<div>
|
|
56
|
-
<label
|
|
57
|
-
for={field.label}
|
|
58
|
-
class="block mb-2 text-sm font-medium text-gray-900 dark:text-gray-300"
|
|
59
|
-
>{field.label}</label
|
|
60
|
-
>
|
|
61
|
-
<input
|
|
62
|
-
type={field.fieldtype}
|
|
63
|
-
required={field.required}
|
|
64
|
-
name={field.label}
|
|
65
|
-
placeholder={field.placeholder}
|
|
66
|
-
class="bg-gray-50 border border-gray-300 text-gray-900 text-sm rounded-lg focus:ring-blue-500 focus:border-blue-500 block w-full p-2.5 dark:bg-gray-600 dark:border-gray-500 dark:placeholder-gray-400 dark:text-white"
|
|
67
|
-
/>
|
|
68
|
-
</div>
|
|
69
|
-
{/each}
|
|
70
|
-
{#if error}
|
|
71
|
-
<div class="mt-6">
|
|
72
|
-
<Alert alertId="alert-green" color="red" closeBtn>
|
|
73
|
-
{error}
|
|
74
|
-
</Alert>
|
|
75
|
-
</div>
|
|
76
|
-
{/if}
|
|
77
|
-
<div class="flex items-start">
|
|
78
|
-
{#if rememberMe}
|
|
79
|
-
<div class="flex items-start">
|
|
80
|
-
<div class="flex items-center h-5">
|
|
81
|
-
<input
|
|
82
|
-
id="remember"
|
|
83
|
-
aria-describedby="remember"
|
|
84
|
-
type="checkbox"
|
|
85
|
-
class="w-4 h-4 bg-gray-50 rounded border border-gray-300 focus:ring-3 focus:ring-blue-300 dark:bg-gray-700 dark:border-gray-600 dark:focus:ring-blue-600 dark:ring-offset-gray-800"
|
|
86
|
-
required
|
|
87
|
-
/>
|
|
88
|
-
</div>
|
|
89
|
-
<div class="ml-3 text-sm">
|
|
90
|
-
<label for="remember" class="font-medium text-gray-900 dark:text-gray-300"
|
|
91
|
-
>Remember me</label
|
|
92
|
-
>
|
|
93
|
-
</div>
|
|
94
|
-
</div>
|
|
95
|
-
{/if}
|
|
96
|
-
{#if lostPassword}
|
|
97
|
-
<a
|
|
98
|
-
href={lostPassword.href}
|
|
99
|
-
rel={lostPassword.rel}
|
|
100
|
-
class="ml-auto text-sm text-blue-700 hover:underline dark:text-blue-500"
|
|
101
|
-
>{lostPassword.name}</a
|
|
102
|
-
>
|
|
103
|
-
{/if}
|
|
104
|
-
</div>
|
|
105
|
-
<button
|
|
106
|
-
type="submit"
|
|
107
|
-
class="w-full text-white bg-blue-700 hover:bg-blue-800 focus:ring-4 focus:ring-blue-300 font-medium rounded-lg text-sm px-5 py-2.5 text-center dark:bg-blue-600 dark:hover:bg-blue-700 dark:focus:ring-blue-800"
|
|
108
|
-
>Register</button
|
|
109
|
-
>
|
|
110
|
-
{#if login}
|
|
111
|
-
<a
|
|
112
|
-
href={login.href}
|
|
113
|
-
rel={login.rel}
|
|
114
|
-
class="ml-auto text-sm text-blue-700 hover:underline dark:text-blue-500">{login.name}</a
|
|
115
|
-
>
|
|
116
|
-
{/if}
|
|
117
|
-
</form>
|
|
118
|
-
</div>
|
|
@@ -1,23 +0,0 @@
|
|
|
1
|
-
import { SvelteComponentTyped } from "svelte";
|
|
2
|
-
import type { AuthFunctionType, LinkType, AuthFieldType } from '../types';
|
|
3
|
-
declare const __propDef: {
|
|
4
|
-
props: {
|
|
5
|
-
register?: AuthFunctionType;
|
|
6
|
-
error?: string;
|
|
7
|
-
login?: LinkType;
|
|
8
|
-
rememberMe?: boolean;
|
|
9
|
-
lostPassword?: LinkType;
|
|
10
|
-
message?: string;
|
|
11
|
-
fields?: AuthFieldType[];
|
|
12
|
-
};
|
|
13
|
-
events: {
|
|
14
|
-
[evt: string]: CustomEvent<any>;
|
|
15
|
-
};
|
|
16
|
-
slots: {};
|
|
17
|
-
};
|
|
18
|
-
export declare type RegisterProps = typeof __propDef.props;
|
|
19
|
-
export declare type RegisterEvents = typeof __propDef.events;
|
|
20
|
-
export declare type RegisterSlots = typeof __propDef.slots;
|
|
21
|
-
export default class Register extends SvelteComponentTyped<RegisterProps, RegisterEvents, RegisterSlots> {
|
|
22
|
-
}
|
|
23
|
-
export {};
|
package/auth/Reset.svelte
DELETED
|
@@ -1,57 +0,0 @@
|
|
|
1
|
-
<script>import { Alert } from '../index';
|
|
2
|
-
export let resetpw = undefined;
|
|
3
|
-
export let password = '';
|
|
4
|
-
export let email = '';
|
|
5
|
-
export let confirmpw = '';
|
|
6
|
-
export let error = '';
|
|
7
|
-
export let message = '';
|
|
8
|
-
</script>
|
|
9
|
-
|
|
10
|
-
<div
|
|
11
|
-
class="p-4 max-w-sm bg-white rounded-lg border border-gray-200 shadow-md sm:p-6 lg:p-8 dark:bg-gray-800 dark:border-gray-700 w-full"
|
|
12
|
-
>
|
|
13
|
-
<form class="space-y-6" on:submit|preventDefault={resetpw}>
|
|
14
|
-
<div class="heading">
|
|
15
|
-
<h2 class="text-xl font-medium text-gray-900 dark:text-white">Reset password</h2>
|
|
16
|
-
</div>
|
|
17
|
-
<input
|
|
18
|
-
type="password"
|
|
19
|
-
required
|
|
20
|
-
name="password"
|
|
21
|
-
placeholder="Enter your password."
|
|
22
|
-
bind:value={password}
|
|
23
|
-
class="bg-gray-50 border border-gray-300 text-gray-900 text-sm rounded-lg focus:ring-blue-500 focus:border-blue-500 block w-full p-2.5 dark:bg-gray-600 dark:border-gray-500 dark:placeholder-gray-400 dark:text-white"
|
|
24
|
-
/>
|
|
25
|
-
<input
|
|
26
|
-
type="password"
|
|
27
|
-
required
|
|
28
|
-
name="confirmpw"
|
|
29
|
-
placeholder="Confirm your password."
|
|
30
|
-
bind:value={confirmpw}
|
|
31
|
-
class="bg-gray-50 border border-gray-300 text-gray-900 text-sm rounded-lg focus:ring-blue-500 focus:border-blue-500 block w-full p-2.5 dark:bg-gray-600 dark:border-gray-500 dark:placeholder-gray-400 dark:text-white"
|
|
32
|
-
/>
|
|
33
|
-
<input type="hidden" required name="email" bind:value={email} />
|
|
34
|
-
{#if error}
|
|
35
|
-
<div class="mt-6">
|
|
36
|
-
<Alert alertId="alert-green" color="red" closeBtn>
|
|
37
|
-
{error}
|
|
38
|
-
</Alert>
|
|
39
|
-
</div>
|
|
40
|
-
{/if}
|
|
41
|
-
{#if message}
|
|
42
|
-
<div class="mt-6">
|
|
43
|
-
<Alert alertId="alert-green" color="green" closeBtn>
|
|
44
|
-
{message}
|
|
45
|
-
</Alert>
|
|
46
|
-
<a
|
|
47
|
-
href="/auth/login"
|
|
48
|
-
class="ml-auto text-sm text-blue-700 hover:underline dark:text-blue-500">Go to Login</a
|
|
49
|
-
>
|
|
50
|
-
</div>
|
|
51
|
-
{/if}
|
|
52
|
-
<button
|
|
53
|
-
class="w-full text-white bg-blue-700 hover:bg-blue-800 focus:ring-4 focus:ring-blue-300 font-medium rounded-lg text-sm px-5 py-2.5 text-center dark:bg-blue-600 dark:hover:bg-blue-700 dark:focus:ring-blue-800"
|
|
54
|
-
type="submit">Reset</button
|
|
55
|
-
>
|
|
56
|
-
</form>
|
|
57
|
-
</div>
|
package/auth/Reset.svelte.d.ts
DELETED
|
@@ -1,22 +0,0 @@
|
|
|
1
|
-
import { SvelteComponentTyped } from "svelte";
|
|
2
|
-
import type { AuthFunctionType } from '../types';
|
|
3
|
-
declare const __propDef: {
|
|
4
|
-
props: {
|
|
5
|
-
resetpw?: AuthFunctionType;
|
|
6
|
-
password?: string;
|
|
7
|
-
email?: string;
|
|
8
|
-
confirmpw?: string;
|
|
9
|
-
error?: string;
|
|
10
|
-
message?: string;
|
|
11
|
-
};
|
|
12
|
-
events: {
|
|
13
|
-
[evt: string]: CustomEvent<any>;
|
|
14
|
-
};
|
|
15
|
-
slots: {};
|
|
16
|
-
};
|
|
17
|
-
export declare type ResetProps = typeof __propDef.props;
|
|
18
|
-
export declare type ResetEvents = typeof __propDef.events;
|
|
19
|
-
export declare type ResetSlots = typeof __propDef.slots;
|
|
20
|
-
export default class Reset extends SvelteComponentTyped<ResetProps, ResetEvents, ResetSlots> {
|
|
21
|
-
}
|
|
22
|
-
export {};
|