flowbite-svelte 0.15.7 → 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 +28 -0
- package/README.md +311 -158
- 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/forms/Toggle.svelte +34 -3
- package/forms/Toggle.svelte.d.ts +6 -0
- package/index.js +0 -7
- package/package.json +2 -8
- package/types.d.ts +2 -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,34 @@
|
|
|
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
|
+
|
|
18
|
+
### [0.15.9](https://github.com/themesberg/flowbite-svelte/compare/v0.15.8...v0.15.9) (2022-04-30)
|
|
19
|
+
|
|
20
|
+
|
|
21
|
+
### Features
|
|
22
|
+
|
|
23
|
+
* add color and size to Toggle component ([6595bb3](https://github.com/themesberg/flowbite-svelte/commit/6595bb38d95ae42862d134fee979ae97b66ab911))
|
|
24
|
+
|
|
25
|
+
### [0.15.8](https://github.com/themesberg/flowbite-svelte/compare/v0.15.7...v0.15.8) (2022-04-29)
|
|
26
|
+
|
|
27
|
+
|
|
28
|
+
### Bug Fixes
|
|
29
|
+
|
|
30
|
+
* update for lighthouse ([e81850d](https://github.com/themesberg/flowbite-svelte/commit/e81850db1d00851f2f8b3a1320ef7658f0654674))
|
|
31
|
+
* update links, flowbite svelte link, sitemap links, white for dark mode ([024b079](https://github.com/themesberg/flowbite-svelte/commit/024b079c161678f2a683736a97d4431f8d8a5279))
|
|
32
|
+
|
|
5
33
|
### [0.15.7](https://github.com/themesberg/flowbite-svelte/compare/v0.15.6...v0.15.7) (2022-04-28)
|
|
6
34
|
|
|
7
35
|
|
package/README.md
CHANGED
|
@@ -5,165 +5,311 @@
|
|
|
5
5
|
[](https://github.com/themesberg/flowbite-svelte/releases)
|
|
6
6
|
[](https://github.com/themesberg/flowbite-svelte/blob/main/LICENSE)
|
|
7
7
|
|
|
8
|
-
|
|
9
|
-
|
|
10
8
|
[Flowbite-Svelte](https://flowbite-svelte.com/) is an official Flowbite component library for Svelte. All interactivities are handled by Svelte.
|
|
11
9
|
|
|
12
10
|
## Installation
|
|
13
11
|
|
|
14
|
-
- [Getting started](https://flowbite-svelte.com/getting-started)
|
|
15
|
-
- [About](https://flowbite-svelte.com/about)
|
|
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
|
-
|
|
12
|
+
- [Getting started](https://flowbite-svelte.com/pages/getting-started)
|
|
13
|
+
- [About](https://flowbite-svelte.com/pages/about)
|
|
14
|
+
- [Types](https://flowbite-svelte.com/pages/types)
|
|
15
|
+
- [How to contribute](https://flowbite-svelte.com/pages/how-to-contribute)
|
|
16
|
+
- [CLI](https://flowbite-svelte.com/pages/cli)
|
|
17
|
+
- [License](https://flowbite-svelte.com/pages/license)
|
|
18
|
+
|
|
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)
|
|
167
313
|
|
|
168
314
|
## Tests
|
|
169
315
|
|
|
@@ -176,8 +322,15 @@ npm run test
|
|
|
176
322
|
## Create props
|
|
177
323
|
|
|
178
324
|
```sh
|
|
179
|
-
|
|
180
|
-
node createProps.js
|
|
325
|
+
npm run gen:props
|
|
181
326
|
```
|
|
182
327
|
|
|
183
|
-
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}
|