flowbite-svelte 0.26.28 → 0.26.29

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.
Files changed (17) hide show
  1. package/CHANGELOG.md +13 -0
  2. package/README.md +186 -117
  3. package/dropdowns/Dropdown.svelte +25 -48
  4. package/dropdowns/Dropdown.svelte.d.ts +3 -10
  5. package/dropdowns/DropdownItem.svelte +26 -24
  6. package/dropdowns/DropdownItem.svelte.d.ts +1 -2
  7. package/navbar/Navbar.svelte +1 -1
  8. package/package.json +1 -2
  9. package/tabs/TabWrapper.svelte +2 -2
  10. package/tabs/TabWrapper.svelte.d.ts +1 -0
  11. package/tooltips/Tooltip.svelte +13 -13
  12. package/tooltips/Tooltip.svelte.d.ts +1 -1
  13. package/utils/Chevron.svelte +7 -8
  14. package/utils/Frame.svelte +2 -2
  15. package/utils/Popper.svelte +1 -1
  16. package/utils/Wrapper.svelte +5 -3
  17. package/utils/Wrapper.svelte.d.ts +3 -0
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.26.29](https://github.com/themesberg/flowbite-svelte/compare/v0.26.28...v0.26.29) (2022-09-22)
6
+
7
+
8
+ ### Features
9
+
10
+ * dropdown new version ([f17dbff](https://github.com/themesberg/flowbite-svelte/commit/f17dbff9139a80d0629913315fd4e594e99c9f40))
11
+
12
+
13
+ ### Bug Fixes
14
+
15
+ * DropdownItem as li only when childe of ul ([add2f16](https://github.com/themesberg/flowbite-svelte/commit/add2f166883df2c237197f3327ad331dd0a1617d))
16
+ * navbar in mobile view width ([7f283f3](https://github.com/themesberg/flowbite-svelte/commit/7f283f363ff5fc70430db83bddde3af24e94aa9a))
17
+
5
18
  ### [0.26.28](https://github.com/themesberg/flowbite-svelte/compare/v0.26.27...v0.26.28) (2022-09-20)
6
19
 
7
20
  ### [0.26.27](https://github.com/themesberg/flowbite-svelte/compare/v0.26.26...v0.26.27) (2022-09-20)
package/README.md CHANGED
@@ -27,7 +27,6 @@ You can use [Flowbite-Svelte Starter](https://github.com/shinokada/flowbite-svel
27
27
  - [About](https://flowbite-svelte.com/pages/about)
28
28
  - [Types](https://flowbite-svelte.com/pages/types)
29
29
  - [How to contribute](https://flowbite-svelte.com/pages/how-to-contribute)
30
- - [CLI](https://flowbite-svelte.com/pages/cli)
31
30
  - [License](https://flowbite-svelte.com/pages/license)
32
31
 
33
32
  ## Documentation
@@ -38,202 +37,200 @@ For full documentation, visit [flowbite-svelte.com](https://flowbite-svelte.com/
38
37
 
39
38
  <table>
40
39
  <tr>
41
- <td width="33.3333%">Accordion</td>
42
- <td width="33.3333%">Alerts</td>
43
- <td width="33.3333%">Avatar</td>
40
+ <td width="33.3333%">Alert</td>
41
+ <td width="33.3333%">Badge</td>
42
+ <td width="33.3333%">Breadcrumb</td>
44
43
  </tr>
45
44
  <tr>
46
- <td width="33.3333%">
47
- <a href="https://flowbite-svelte.com/accordions/">
48
- <img alt="Accordion" src="https://flowbite.s3.amazonaws.com/github/accordion.jpg">
45
+ <td width="33.3333%">
46
+ <a href="https://flowbite-svelte.com/components/alert/">
47
+ <img alt="Tailwind CSS Alerts" src="https://flowbite.s3.amazonaws.com/github/alerts.jpg">
49
48
  </a>
50
49
  </td>
51
50
  <td width="33.3333%">
52
- <a href="https://flowbite-svelte.com/alerts/">
53
- <img alt="Alerts" src="https://flowbite.s3.amazonaws.com/github/alerts.jpg">
51
+ <a href="https://flowbite-svelte.com/components/badge/">
52
+ <img alt="Tailwind CSS Badge" src="https://flowbite.s3.amazonaws.com/github/badge.jpg">
54
53
  </a>
55
54
  </td>
56
55
  <td width="33.3333%">
57
- <a href="https://flowbite-svelte.com/avatar/">
58
- <img alt="Avatar" src="https://flowbite.s3.amazonaws.com/github/avatar.jpg">
56
+ <a href="https://flowbite-svelte.com/components/breadcrumb/">
57
+ <img alt="Tailwind CSS Breadcrumbs" src="https://flowbite.s3.amazonaws.com/github/breadcrumbs.jpg">
59
58
  </a>
60
59
  </td>
61
60
  </tr>
62
61
  <tr>
63
- <td width="33.3333%">Badges</td>
64
- <td width="33.3333%">Breadcrumbs</td>
62
+ <td width="33.3333%">Button</td>
65
63
  <td width="33.3333%">Button group</td>
66
-
64
+ <td width="33.3333%">Card</td>
67
65
  </tr>
68
66
  <tr>
69
- <td width="33.3333%">
70
- <a href="https://flowbite-svelte.com/badges/">
71
- <img alt="Badge" src="https://flowbite.s3.amazonaws.com/github/badge.jpg">
67
+ <td width="33.3333%">
68
+ <a href="https://flowbite-svelte.com/components/button/">
69
+ <img alt="Tailwind CSS Buttons" src="https://flowbite.s3.amazonaws.com/github/buttons.jpg">
72
70
  </a>
73
71
  </td>
74
72
  <td width="33.3333%">
75
- <a href="https://flowbite-svelte.com/breadcrumbs/">
76
- <img alt="Breadcrumbs" src="https://flowbite.s3.amazonaws.com/github/breadcrumbs.jpg">
73
+ <a href="https://flowbite-svelte.com/components/button-group/">
74
+ <img alt="Tailwind CSS Button Group" src="https://flowbite.s3.amazonaws.com/github/button-group.jpg">
77
75
  </a>
78
76
  </td>
79
77
  <td width="33.3333%">
80
- <a href="https://flowbite-svelte.com/button-groups/">
81
- <img alt="Button Group" src="https://flowbite.s3.amazonaws.com/github/button-group.jpg">
78
+ <a href="https://flowbite-svelte.com/components/card/">
79
+ <img alt="Tailwind CSS Cards" src="https://flowbite.s3.amazonaws.com/github/cards.jpg">
82
80
  </a>
83
81
  </td>
84
82
  </tr>
85
83
  <tr>
86
- <td width="33.3333%">Buttons</td>
87
- <td width="33.3333%">Cards</td>
88
- <td width="33.3333%">Carousel</td>
89
-
84
+ <td width="33.3333%">Dropdown</td>
85
+ <td width="33.3333%">Forms</td>
86
+ <td width="33.3333%">List group</td>
90
87
  </tr>
91
88
  <tr>
92
- <td width="33.3333%">
93
- <a href="https://flowbite-svelte.com/buttons/">
94
- <img alt="Buttons" src="https://flowbite.s3.amazonaws.com/github/buttons.jpg">
89
+ <td width="33.3333%">
90
+ <a href="https://flowbite-svelte.com/components/dropdown/">
91
+ <img alt="Tailwind CSS Dropdown" src="https://flowbite.s3.amazonaws.com/github/dropdown.jpg">
95
92
  </a>
96
93
  </td>
97
94
  <td width="33.3333%">
98
- <a href="https://flowbite-svelte.com/cards/">
99
- <img alt="Cards" src="https://flowbite.s3.amazonaws.com/github/cards.jpg">
95
+ <a href="https://flowbite-svelte.com/components/forms/">
96
+ <img alt="Tailwind CSS Forms" src="https://flowbite.s3.amazonaws.com/github/forms.jpg">
100
97
  </a>
101
98
  </td>
102
99
  <td width="33.3333%">
103
- <a href="https://flowbite-svelte.com/carousels/">
104
- <img alt="Carousel" src="https://flowbite.s3.amazonaws.com/github/carousel.jpg">
100
+ <a href="https://flowbite-svelte.com/components/list-group/">
101
+ <img alt="Tailwind CSS List group" src="https://flowbite.s3.amazonaws.com/github/list-group.jpg">
105
102
  </a>
106
103
  </td>
107
104
  </tr>
108
105
  <tr>
109
- <td width="33.3333%">Dark mode</td>
110
- <td width="33.3333%">Dropdown</td>
111
- <td width="33.3333%">Footer</td>
106
+ <td width="33.3333%">Typography</td>
107
+ <td width="33.3333%">Modal</td>
108
+ <td width="33.3333%">Tab</td>
112
109
  </tr>
113
110
  <tr>
114
111
  <td width="33.3333%">
115
- <a href="https://flowbite-svelte.com/darkmode/">
116
- <img alt="Forms" src="https://flowbite.s3.amazonaws.com/github/forms.jpg">
112
+ <a href="https://flowbite-svelte.com/components/typography/">
113
+ <img alt="Tailwind CSS Typography" src="https://flowbite.s3.amazonaws.com/github/typography.jpg">
117
114
  </a>
118
115
  </td>
119
116
  <td width="33.3333%">
120
- <a href="https://flowbite-svelte.com/dropdowns/">
121
- <img alt="Dropdown" src="https://flowbite.s3.amazonaws.com/github/dropdown.jpg">
117
+ <a href="https://flowbite-svelte.com/components/modal/">
118
+ <img alt="Tailwind CSS Modal" src="https://flowbite.s3.amazonaws.com/github/modal.jpg">
122
119
  </a>
123
120
  </td>
124
- <td width="33.3333%">
125
- <a href="https://flowbite-svelte.com/footer/">
126
- <img alt="Footer" src="https://flowbite.s3.amazonaws.com/github/footer.jpg">
121
+ <td width="33.3333%">
122
+ <a href="https://flowbite-svelte.com/components/tab/">
123
+ <img alt="Tailwind CSS Tabs" src="https://flowbite.s3.amazonaws.com/github/tabs.jpg">
127
124
  </a>
128
125
  </td>
129
126
  </tr>
130
127
  <tr>
131
- <td width="33.3333%">Forms</td>
132
- <td width="33.3333%">Icons</td>
133
- <td width="33.3333%">List group</td>
128
+ <td width="33.3333%">Navbar</td>
129
+ <td width="33.3333%">Pagination</td>
130
+ <td width="33.3333%">Timeline</td>
134
131
  </tr>
135
132
  <tr>
136
- <td width="33.3333%">
137
- <a href="https://flowbite-svelte.com/forms/">
138
- <img alt="Forms" src="https://flowbite.s3.amazonaws.com/github/forms.jpg">
133
+ <td width="33.3333%">
134
+ <a href="https://flowbite-svelte.com/components/navbar/">
135
+ <img alt="Tailwind CSS Navbar" src="https://flowbite.s3.amazonaws.com/github/navbar.jpg">
139
136
  </a>
140
137
  </td>
141
138
  <td width="33.3333%">
142
- <a href="https://flowbite-svelte.com/icons/">
143
- <img alt="Icons" src="https://flowbite.s3.amazonaws.com/github/navbar.jpg">
139
+ <a href="https://flowbite-svelte.com/components/pagination/">
140
+ <img alt="Tailwind CSS Pagination" src="https://flowbite.s3.amazonaws.com/github/pagination.jpg">
144
141
  </a>
145
142
  </td>
146
- <td width="33.3333%">
147
- <a href="https://flowbite-svelte.com/list-group/">
148
- <img alt="List group" src="https://flowbite.s3.amazonaws.com/github/list-group.jpg">
143
+ <td width="33.3333%">
144
+ <a href="https://flowbite-svelte.com/components/timeline/">
145
+ <img alt="Tailwind CSS Timeline" src="https://flowbite.s3.amazonaws.com/github/timeline.jpg">
149
146
  </a>
150
147
  </td>
151
148
  </tr>
152
149
  <tr>
153
- <td width="33.3333%">Modals</td>
154
- <td width="33.3333%">Navbar</td>
155
- <td width="33.3333%">Pagination</td>
150
+ <td width="33.3333%">Progress bar</td>
151
+ <td width="33.3333%">Table</td>
152
+ <td width="33.3333%">Toast</td>
156
153
  </tr>
157
154
  <tr>
158
- <td width="33.3333%">
159
- <a href="https://flowbite-svelte.com/modals/">
160
- <img alt="Modal" src="https://flowbite.s3.amazonaws.com/github/modal.jpg">
155
+ <td width="33.3333%">
156
+ <a href="https://flowbite-svelte.com/components/progress/">
157
+ <img alt="Tailwind CSS Progress Bar" src="https://flowbite.s3.amazonaws.com/github/progress.jpg">
161
158
  </a>
162
159
  </td>
163
- <td width="33.3333%">
164
- <a href="https://flowbite-svelte.com/navbar/">
165
- <img alt="Navbar" src="https://flowbite.s3.amazonaws.com/github/navbar.jpg">
160
+ <td width="33.3333%">
161
+ <a href="https://flowbite-svelte.com/components/table/">
162
+ <img alt="Tailwind CSS Tables" src="https://flowbite.s3.amazonaws.com/github/tables.jpg">
166
163
  </a>
167
164
  </td>
168
165
  <td width="33.3333%">
169
- <a href="https://flowbite-svelte.com/paginations/">
170
- <img alt="Pagination" src="https://flowbite.s3.amazonaws.com/github/pagination.jpg">
166
+ <a href="https://flowbite-svelte.com/components/toast/">
167
+ <img alt="Tailwind CSS Toast" src="https://flowbite.s3.amazonaws.com/github/toast.jpg">
171
168
  </a>
172
169
  </td>
173
170
  </tr>
174
171
  <tr>
175
- <td width="33.3333%">Progress bar</td>
176
- <td width="33.3333%">Ratings</td>
177
- <td width="33.3333%">Sidebars</td>
172
+ <td width="33.3333%">Tooltip</td>
173
+ <td width="33.3333%">Datepicker</td>
174
+ <td width="33.3333%">Spinner</td>
178
175
  </tr>
179
176
  <tr>
180
- <td width="33.3333%">
181
- <a href="https://flowbite-svelte.com/progressbars/">
182
- <img alt="Progress Bar" src="https://flowbite.s3.amazonaws.com/github/progress.jpg">
177
+ <td width="33.3333%">
178
+ <a href="https://flowbite-svelte.com/components/tooltip/">
179
+ <img alt="Tailwind CSS Tooltips" src="https://flowbite.s3.amazonaws.com/github/tooltips.jpg">
183
180
  </a>
184
181
  </td>
185
182
  <td width="33.3333%">
186
- <a href="https://flowbite-svelte.com/ratings/">
187
- <img alt="Rating" src="https://flowbite.s3.amazonaws.com/github/rating.jpg">
183
+ <a href="https://flowbite-svelte.com/plugins/datepicker/">
184
+ <img alt="Tailwind CSS Datepicker" src="https://flowbite.s3.amazonaws.com/github/datepicker.jpg">
188
185
  </a>
189
186
  </td>
190
187
  <td width="33.3333%">
191
- <a href="https://flowbite-svelte.com/sidebars/">
192
- <img alt="Sidebar" src="https://flowbite.s3.amazonaws.com/github/sidebar.jpg">
188
+ <a href="https://flowbite-svelte.com/components/spinner/">
189
+ <img alt="Tailwind CSS Spinner" src="https://flowbite.s3.amazonaws.com/github/spinner.jpg">
193
190
  </a>
194
191
  </td>
195
192
  </tr>
196
193
  <tr>
197
- <td width="33.3333%">Spinners</td>
198
- <td width="33.3333%">Tables</td>
199
- <td width="33.3333%">Tabs</td>
194
+ <td width="33.3333%">Footer</td>
195
+ <td width="33.3333%">Accordion</td>
196
+ <td width="33.3333%">Sidebar</td>
200
197
  </tr>
201
198
  <tr>
202
199
  <td width="33.3333%">
203
- <a href="https://flowbite-svelte.com/spinners/">
204
- <img alt="Spinner" src="https://flowbite.s3.amazonaws.com/github/spinner.jpg">
200
+ <a href="https://flowbite-svelte.com/components/footer/">
201
+ <img alt="Tailwind CSS Footer" src="https://flowbite.s3.amazonaws.com/github/footer.jpg">
205
202
  </a>
206
203
  </td>
207
204
  <td width="33.3333%">
208
- <a href="https://flowbite-svelte.com/tables/">
209
- <img alt="Tables" src="https://flowbite.s3.amazonaws.com/github/tables.jpg">
205
+ <a href="https://flowbite-svelte.com/components/accordion/">
206
+ <img alt="Tailwind CSS Accordion" src="https://flowbite.s3.amazonaws.com/github/accordion.jpg">
210
207
  </a>
211
208
  </td>
212
209
  <td width="33.3333%">
213
- <a href="https://flowbite-svelte.com/tabs/">
214
- <img alt="Tabs" src="https://flowbite.s3.amazonaws.com/github/tabs.jpg">
210
+ <a href="https://flowbite-svelte.com/components/sidebar/">
211
+ <img alt="Tailwind CSS Sidebar" src="https://flowbite.s3.amazonaws.com/github/sidebar.jpg">
215
212
  </a>
216
213
  </td>
217
214
  </tr>
218
215
  <tr>
219
- <td width="33.3333%">Timelines</td>
220
- <td width="33.3333%">Toast</td>
221
- <td width="33.3333%">Tooltips</td>
216
+ <td width="33.3333%">Carousel</td>
217
+ <td width="33.3333%">Avatar</td>
218
+ <td width="33.3333%">Rating</td>
222
219
  </tr>
223
220
  <tr>
224
221
  <td width="33.3333%">
225
- <a href="https://flowbite-svelte.com/timelines/">
226
- <img alt="Timeline" src="https://flowbite.s3.amazonaws.com/github/timeline.jpg">
222
+ <a href="https://flowbite-svelte.com/components/carousel/">
223
+ <img alt="Tailwind CSS Carousel" src="https://flowbite.s3.amazonaws.com/github/carousel.jpg">
227
224
  </a>
228
225
  </td>
229
226
  <td width="33.3333%">
230
- <a href="https://flowbite-svelte.com/toasts/">
231
- <img alt="Toast" src="https://flowbite.s3.amazonaws.com/github/toast.jpg">
227
+ <a href="https://flowbite-svelte.com/components/avatar/">
228
+ <img alt="Tailwind CSS Avatar" src="https://flowbite.s3.amazonaws.com/github/avatar.jpg">
232
229
  </a>
233
230
  </td>
234
- <td width="33.3333%">
235
- <a href="https://flowbite-svelte.com/tooltips/">
236
- <img alt="Tooltips" src="https://flowbite.s3.amazonaws.com/github/tooltips.jpg">
231
+ <td width="33.3333%">
232
+ <a href="https://flowbite-svelte.com/components/rating/">
233
+ <img alt="Tailwind CSS Rating" src="https://flowbite.s3.amazonaws.com/github/rating.jpg">
237
234
  </a>
238
235
  </td>
239
236
  </tr>
@@ -244,18 +241,18 @@ For full documentation, visit [flowbite-svelte.com](https://flowbite-svelte.com/
244
241
  </tr>
245
242
  <tr>
246
243
  <td width="33.3333%">
247
- <a href="https://flowbite-svelte.com/forms/input/">
248
- <img alt="Input Field" src="https://flowbite.s3.amazonaws.com/github/input-field.jpg">
244
+ <a href="https://flowbite-svelte.com/forms/input-field/">
245
+ <img alt="Tailwind CSS Input Field" src="https://flowbite.s3.amazonaws.com/github/input-field.jpg">
249
246
  </a>
250
247
  </td>
251
248
  <td width="33.3333%">
252
249
  <a href="https://flowbite-svelte.com/forms/file-input/">
253
- <img alt="File Input" src="https://flowbite.s3.amazonaws.com/github/file-input.jpg">
250
+ <img alt="Tailwind CSS File Input" src="https://flowbite.s3.amazonaws.com/github/file-input.jpg">
254
251
  </a>
255
252
  </td>
256
253
  <td width="33.3333%">
257
- <a href="https://flowbite-svelte.com/forms/search/">
258
- <img alt="Search Input" src="https://flowbite.s3.amazonaws.com/github/search-input.jpg">
254
+ <a href="https://flowbite-svelte.com/forms/search-input/">
255
+ <img alt="Tailwind CSS Search Input" src="https://flowbite.s3.amazonaws.com/github/search-input.jpg">
259
256
  </a>
260
257
  </td>
261
258
  </tr>
@@ -267,17 +264,17 @@ For full documentation, visit [flowbite-svelte.com](https://flowbite-svelte.com/
267
264
  <tr>
268
265
  <td width="33.3333%">
269
266
  <a href="https://flowbite-svelte.com/forms/select/">
270
- <img alt="Select" src="https://flowbite.s3.amazonaws.com/github/select.jpg">
267
+ <img alt="Tailwind CSS Select" src="https://flowbite.s3.amazonaws.com/github/select.jpg">
271
268
  </a>
272
269
  </td>
273
270
  <td width="33.3333%">
274
271
  <a href="https://flowbite-svelte.com/forms/textarea/">
275
- <img alt="Textarea" src="https://flowbite.s3.amazonaws.com/github/textarea.jpg">
272
+ <img alt="Tailwind CSS Textarea" src="https://flowbite.s3.amazonaws.com/github/textarea.jpg">
276
273
  </a>
277
274
  </td>
278
275
  <td width="33.3333%">
279
276
  <a href="https://flowbite-svelte.com/forms/checkbox/">
280
- <img alt="Checkbox" src="https://flowbite.s3.amazonaws.com/github/checkbox.jpg">
277
+ <img alt="Tailwind CSS Checkbox" src="https://flowbite.s3.amazonaws.com/github/checkbox.jpg">
281
278
  </a>
282
279
  </td>
283
280
  </tr>
@@ -289,55 +286,127 @@ For full documentation, visit [flowbite-svelte.com](https://flowbite-svelte.com/
289
286
  <tr>
290
287
  <td width="33.3333%">
291
288
  <a href="https://flowbite-svelte.com/forms/radio/">
292
- <img alt="Radio" src="https://flowbite.s3.amazonaws.com/github/radio.jpg">
289
+ <img alt="Tailwind CSS Radio" src="https://flowbite.s3.amazonaws.com/github/radio.jpg">
293
290
  </a>
294
291
  </td>
295
292
  <td width="33.3333%">
296
293
  <a href="https://flowbite-svelte.com/forms/toggle/">
297
- <img alt="Toggle" src="https://flowbite.s3.amazonaws.com/github/toggle.jpg">
294
+ <img alt="Tailwind CSS Toggle" src="https://flowbite.s3.amazonaws.com/github/toggle.jpg">
298
295
  </a>
299
296
  </td>
300
297
  <td width="33.3333%">
301
298
  <a href="https://flowbite-svelte.com/forms/range/">
302
- <img alt="Range Slider" src="https://flowbite.s3.amazonaws.com/github/range-slider.jpg">
299
+ <img alt="Tailwind CSS Range Slider" src="https://flowbite.s3.amazonaws.com/github/range-slider.jpg">
303
300
  </a>
304
301
  </td>
305
302
  </tr>
306
303
  <tr>
307
304
  <td width="33.3333%">Floating Label</td>
308
- <td width="33.3333%">Datepicker</td>
309
- <td width="33.3333%">Typography</td>
305
+ <td width="33.3333%">Mega Menu</td>
306
+ <td width="33.3333%">Skeleton</td>
310
307
  </tr>
311
308
  <tr>
312
309
  <td width="33.3333%">
313
310
  <a href="https://flowbite-svelte.com/forms/floating-label/">
314
- <img alt="Floating Label" src="https://flowbite.s3.amazonaws.com/github/floating-label.jpg">
311
+ <img alt="Tailwind CSS Floating Label" src="https://flowbite.s3.amazonaws.com/github/floating-label.jpg">
315
312
  </a>
316
313
  </td>
317
314
  <td width="33.3333%">
318
- <a href="https://flowbite-svelte.com/datepicker/">
319
- <img alt="Datepicker" src="https://flowbite.s3.amazonaws.com/github/datepicker.jpg">
315
+ <a href="https://flowbite-svelte.com/components/mega-menu/">
316
+ <img alt="Tailwind CSS Mega Menu" src="https://flowbite.s3.amazonaws.com/github/mega-menu.jpg">
320
317
  </a>
321
318
  </td>
322
319
  <td width="33.3333%">
323
- <a href="https://flowbite-svelte.com/typography/">
324
- <img alt="Typography" src="https://flowbite.s3.amazonaws.com/github/typography.jpg">
320
+ <a href="https://flowbite-svelte.com/components/skeleton/">
321
+ <img alt="Tailwind CSS Skeleton" src="https://flowbite.s3.amazonaws.com/github/skeleton.jpg">
325
322
  </a>
326
323
  </td>
327
324
  </tr>
328
325
  <tr>
329
- <td width="33.3333%">Skeleton</td>
330
- <td width="33.3333%">KBD(Keyboard)</td>
326
+ <td width="33.3333%">KBD (keyboard)</td>
327
+ <td width="33.3333%">Drawer (offcanvas)</td>
328
+ <td width="33.3333%">Popover</td>
329
+ </tr>
330
+ <tr>
331
+ <td width="33.3333%">
332
+ <a href="https://flowbite-svelte.com/components/kbd/">
333
+ <img alt="Tailwind CSS KBD (Keyboard)" src="https://flowbite.s3.amazonaws.com/github/kbd.jpg">
334
+ </a>
335
+ </td>
336
+ <td width="33.3333%">
337
+ <a href="https://flowbite-svelte.com/components/drawer/">
338
+ <img alt="Tailwind CSS Drawer (offcanvas)" src="https://flowbite.s3.amazonaws.com/github/drawer.jpg">
339
+ </a>
340
+ </td>
341
+ <td width="33.3333%">
342
+ <a href="https://flowbite-svelte.com/components/popover/">
343
+ <img alt="Tailwind CSS Popover" src="https://flowbite.s3.amazonaws.com/github/popover.jpg">
344
+ </a>
345
+ </td>
346
+ </tr>
347
+ <tr>
348
+ <td width="33.3333%">Video</td>
349
+ <td width="33.3333%">Heading</td>
350
+ <td width="33.3333%">Paragraph</td>
351
+ </tr>
352
+ <tr>
353
+ <td width="33.3333%">
354
+ <a href="https://flowbite-svelte.com/components/video/">
355
+ <img alt="Tailwind CSS Video" src="https://flowbite.s3.amazonaws.com/github/video.jpg">
356
+ </a>
357
+ </td>
358
+ <td width="33.3333%">
359
+ <a href="https://flowbite-svelte.com/typography/heading/">
360
+ <img alt="Tailwind CSS Heading" src="https://flowbite.s3.amazonaws.com/github/heading.jpg">
361
+ </a>
362
+ </td>
363
+ <td width="33.3333%">
364
+ <a href="https://flowbite-svelte.com/typography/paragraph/">
365
+ <img alt="Tailwind CSS Paragraph" src="https://flowbite.s3.amazonaws.com/github/paragraph.jpg">
366
+ </a>
367
+ </td>
368
+ </tr>
369
+ <tr>
370
+ <td width="33.3333%">Blockquote</td>
371
+ <td width="33.3333%">Image</td>
372
+ <td width="33.3333%">List</td>
331
373
  </tr>
332
374
  <tr>
333
375
  <td width="33.3333%">
334
- <a href="https://flowbite-svelte.com/skeleton/">
335
- <img alt="Skeleton" src="https://flowbite.s3.amazonaws.com/github/skeleton.jpg">
376
+ <a href="https://flowbite-svelte.com/typography/blockquote/">
377
+ <img alt="Tailwind CSS Blockquote" src="https://flowbite.s3.amazonaws.com/github/blockquote.jpg">
378
+ </a>
379
+ </td>
380
+ <td width="33.3333%">
381
+ <a href="https://flowbite-svelte.com/typography/image/">
382
+ <img alt="Tailwind CSS Image" src="https://flowbite.s3.amazonaws.com/github/image.jpg">
383
+ </a>
384
+ </td>
385
+ <td width="33.3333%">
386
+ <a href="https://flowbite-svelte.com/typography/list/">
387
+ <img alt="Tailwind CSS List" src="https://flowbite.s3.amazonaws.com/github/list.jpg">
388
+ </a>
389
+ </td>
390
+ </tr>
391
+ <tr>
392
+ <td width="33.3333%">Link</td>
393
+ <td width="33.3333%">Text</td>
394
+ <td width="33.3333%">Horizontal line (HR)</td>
395
+ </tr>
396
+ <tr>
397
+ <td width="33.3333%">
398
+ <a href="https://flowbite-svelte.com/typography/link/">
399
+ <img alt="Tailwind CSS Link" src="https://flowbite.s3.amazonaws.com/github/link.jpg">
400
+ </a>
401
+ </td>
402
+ <td width="33.3333%">
403
+ <a href="https://flowbite-svelte.com/typography/text/">
404
+ <img alt="Tailwind CSS Text" src="https://flowbite.s3.amazonaws.com/github/text.jpg">
336
405
  </a>
337
406
  </td>
338
407
  <td width="33.3333%">
339
- <a href="https://flowbite-svelte.com/kbd/">
340
- <img alt="Kbd, Keyboard" src="https://flowbite.s3.amazonaws.com/github/kbd.jpg">
408
+ <a href="https://flowbite-svelte.com/typography/hr/">
409
+ <img alt="Tailwind CSS HR" src="https://flowbite.s3.amazonaws.com/github/hr.jpg">
341
410
  </a>
342
411
  </td>
343
412
  </tr>
package/dropdowns/Dropdown.svelte CHANGED
@@ -1,55 +1,32 @@
1
1
  <script>import classNames from 'classnames';
2
- import Button from '../buttons/Button.svelte';
3
2
  import Popper from '../utils/Popper.svelte';
4
- import Chevron from '../utils/Chevron.svelte';
5
- export let label = '';
6
- export let inline = false;
7
- export let arrowIcon = true;
8
- export let labelClass = 'flex items-center justify-between w-full py-2 pl-3 pr-4 font-medium text-gray-700 border-b border-gray-100 hover:bg-gray-50 md:hover:bg-transparent md:border-0 md:hover:text-blue-700 md:p-0 md:w-auto dark:text-gray-400 dark:hover:text-white dark:focus:text-white dark:border-gray-700 dark:hover:bg-gray-700 md:dark:hover:bg-transparent';
9
- export let placement = 'bottom';
10
3
  export let open = false;
11
- export let color = 'dropdown';
4
+ export let frameClass = '';
5
+ $: {
6
+ // set default values
7
+ $$restProps.arrow = $$restProps.arrow ?? false;
8
+ $$restProps.trigger = $$restProps.trigger ?? 'click';
9
+ $$restProps.placement = $$restProps.placement ?? 'bottom';
10
+ $$restProps.color = $$restProps.color ?? 'dropdown';
11
+ $$restProps.shadow = $$restProps.shadow ?? true;
12
+ $$restProps.rounded = $$restProps.rounded ?? true;
13
+ }
12
14
  let popoverClass;
13
- $: popoverClass = classNames('outline-none', $$props.class);
15
+ $: popoverClass = classNames('divide-y divide-gray-100 dark:divide-gray-600', frameClass);
14
16
  </script>
15
17
 
16
- {#if label}
17
- <slot name="trigger">
18
- {#if inline}
19
- <button class={labelClass}>
20
- {#if arrowIcon}
21
- <Chevron {placement}><slot name="label">{label}</slot></Chevron>
22
- {:else}
23
- <slot name="label">{label}</slot>
24
- {/if}
25
- </button>
26
- {:else}
27
- <Button>
28
- {#if arrowIcon}
29
- <Chevron {placement}><slot name="label">{label}</slot></Chevron>
30
- {:else}
31
- <slot name="label">{label}</slot>
32
- {/if}
33
- </Button>
34
- {/if}
35
- </slot>
36
- {/if}
37
-
38
- <Popper
39
- rounded
40
- shadow
41
- activeContent
42
- {color}
43
- arrow={false}
44
- {placement}
45
- trigger="click"
46
- {...$$restProps}
47
- class={popoverClass}
48
- on:show
49
- bind:open>
50
- <slot name="content">
51
- <ul class="py-1">
52
- <slot />
53
- </ul>
54
- </slot>
18
+ <Popper activeContent {...$$restProps} class={popoverClass} on:show bind:open>
19
+ {#if $$slots.header}
20
+ <div class="py-1 overflow-hidden rounded-t">
21
+ <slot name="header" />
22
+ </div>
23
+ {/if}
24
+ <ul class={$$props.class ?? 'py-1 w-44'}>
25
+ <slot />
26
+ </ul>
27
+ {#if $$slots.footer}
28
+ <div class="py-1 overflow-hidden rounded-b">
29
+ <slot name="footer" />
30
+ </div>
31
+ {/if}
55
32
  </Popper>
package/dropdowns/Dropdown.svelte.d.ts CHANGED
@@ -1,15 +1,9 @@
1
1
  import { SvelteComponentTyped } from "svelte";
2
- import type { Placement } from '@popperjs/core';
3
2
  declare const __propDef: {
4
3
  props: {
5
4
  [x: string]: any;
6
- label?: string | undefined;
7
- inline?: boolean | undefined;
8
- arrowIcon?: boolean | undefined;
9
- labelClass?: string | undefined;
10
- placement?: Placement | undefined;
11
5
  open?: boolean | undefined;
12
- color?: string | undefined;
6
+ frameClass?: string | undefined;
13
7
  };
14
8
  events: {
15
9
  show: CustomEvent<any>;
@@ -17,10 +11,9 @@ declare const __propDef: {
17
11
  [evt: string]: CustomEvent<any>;
18
12
  };
19
13
  slots: {
20
- trigger: {};
21
- label: {};
22
- content: {};
14
+ header: {};
23
15
  default: {};
16
+ footer: {};
24
17
  };
25
18
  };
26
19
  export declare type DropdownProps = typeof __propDef.props;
package/dropdowns/DropdownItem.svelte CHANGED
@@ -1,27 +1,29 @@
1
- <script>import classNames from 'classnames';
2
- export let liClass = 'block font-medium cursor-pointer py-2 px-4 text-sm hover:bg-gray-100 dark:hover:bg-gray-600';
3
- export let color = 'default';
1
+ <script>import Wrapper from '../utils/Wrapper.svelte';
2
+ import classNames from 'classnames';
3
+ export let defaultClass = 'font-medium py-2 px-4 text-sm hover:bg-gray-100 dark:hover:bg-gray-600';
4
4
  export let href = undefined;
5
- const colors = {
6
- default: 'text-gray-700 dark:text-gray-200 dark:hover:text-white',
7
- red: 'text-red-600 dark:text-red-500'
8
- };
5
+ let liClass;
6
+ $: liClass = classNames(defaultClass, href ? 'block' : 'w-full text-left', $$props.class);
7
+ let wrap = true;
8
+ function init(node) {
9
+ wrap = node.parentElement?.tagName === 'UL';
10
+ }
9
11
  </script>
10
12
 
11
- <li>
12
- <svelte:element
13
- this={href ? 'a' : 'div'}
14
- {href}
15
- {...$$restProps}
16
- class={classNames(liClass, colors[color] ?? colors.default, $$props.class)}
17
- on:click
18
- on:change
19
- on:keydown
20
- on:keyup
21
- on:focus
22
- on:blur
23
- on:mouseenter
24
- on:mouseleave>
25
- <slot />
26
- </svelte:element>
27
- </li>
13
+ <Wrapper tag="li" show={wrap} use={init}>
14
+ <svelte:element
15
+ this={href ? 'a' : 'button'}
16
+ {href}
17
+ {...$$restProps}
18
+ class={liClass}
19
+ on:click
20
+ on:change
21
+ on:keydown
22
+ on:keyup
23
+ on:focus
24
+ on:blur
25
+ on:mouseenter
26
+ on:mouseleave>
27
+ <slot />
28
+ </svelte:element>
29
+ </Wrapper>
package/dropdowns/DropdownItem.svelte.d.ts CHANGED
@@ -2,8 +2,7 @@ import { SvelteComponentTyped } from "svelte";
2
2
  declare const __propDef: {
3
3
  props: {
4
4
  [x: string]: any;
5
- liClass?: string | undefined;
6
- color?: string | undefined;
5
+ defaultClass?: string | undefined;
7
6
  href?: string | undefined;
8
7
  };
9
8
  events: {
package/navbar/Navbar.svelte CHANGED
@@ -1,6 +1,6 @@
1
1
  <script>import Frame from '../utils/Frame.svelte';
2
2
  import classNames from 'classnames';
3
- export let navClass = 'px-2 sm:px-4 py-2.5';
3
+ export let navClass = 'px-2 sm:px-4 py-2.5 w-full';
4
4
  export let navDivClass = 'mx-auto flex flex-wrap justify-between items-center ';
5
5
  export let fluid = true;
6
6
  export let color = 'navbar';
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "flowbite-svelte",
3
- "version": "0.26.28",
3
+ "version": "0.26.29",
4
4
  "description": "Flowbite components for Svelte",
5
5
  "main": "index.js",
6
6
  "author": {
@@ -101,7 +101,6 @@
101
101
  ],
102
102
  "exports": {
103
103
  "./package.json": "./package.json",
104
- "./.DS_Store": "./.DS_Store",
105
104
  "./accordions/AccordionItem.svelte": "./accordions/AccordionItem.svelte",
106
105
  "./alerts/Alert.svelte": "./alerts/Alert.svelte",
107
106
  "./avatar/Avatar.svelte": "./avatar/Avatar.svelte",
package/tabs/TabWrapper.svelte CHANGED
@@ -1,10 +1,10 @@
1
1
  <script>import classNames from 'classnames';
2
2
  export let divClass = 'w-full';
3
3
  export let tabStyle = 'default';
4
- let tabId;
4
+ export let tabId;
5
5
  export let activeTabValue;
6
6
  </script>
7
7
 
8
8
  <div class={classNames(divClass, $$props.class)}>
9
- <slot {tabStyle} {tabId} {activeTabValue} />
9
+ <slot {tabStyle} {tabId} {activeTabValue} />
10
10
  </div>
package/tabs/TabWrapper.svelte.d.ts CHANGED
@@ -4,6 +4,7 @@ declare const __propDef: {
4
4
  [x: string]: any;
5
5
  divClass?: string | undefined;
6
6
  tabStyle?: "default" | "icon" | "custom" | "pill" | "underline" | "full" | undefined;
7
+ tabId: number;
7
8
  activeTabValue: number;
8
9
  };
9
10
  events: {
package/tooltips/Tooltip.svelte CHANGED
@@ -1,26 +1,26 @@
1
1
  <script>import Popper from '../utils/Popper.svelte';
2
2
  import classNames from 'classnames';
3
- export let color = 'custom';
3
+ export let customColor = '';
4
4
  export let style = 'auto';
5
5
  export let tipClass = 'py-2 px-3 text-sm font-medium';
6
6
  const colors = {
7
7
  dark: 'border-gray-800 bg-gray-900 text-white dark:bg-gray-700 dark:border-gray-600',
8
8
  light: 'border-gray-200 bg-white text-gray-900',
9
- auto: 'border-gray-200 bg-white text-gray-900 dark:bg-gray-700 dark:text-white dark:border-gray-600 '
9
+ auto: 'border-gray-200 bg-white text-gray-900 dark:bg-gray-700 dark:text-white dark:border-gray-600',
10
+ custom: customColor
10
11
  };
11
12
  let toolTipClass;
12
- $: toolTipClass = classNames("tooltip", tipClass, colors[style], $$props.class);
13
+ $: toolTipClass = classNames('tooltip', tipClass, colors[style], $$props.class);
13
14
  </script>
14
15
 
15
16
  <Popper
16
- data-tooltip
17
- activeContent
18
- rounded
19
- border
20
- shadow
21
- color={style === 'custom' ? color : 'none'}
22
- {...$$restProps}
23
- class={toolTipClass}
24
- on:show>
25
- <slot />
17
+ data-tooltip
18
+ rounded
19
+ border
20
+ shadow
21
+ customColor
22
+ {...$$restProps}
23
+ class={toolTipClass}
24
+ on:show>
25
+ <slot />
26
26
  </Popper>
package/tooltips/Tooltip.svelte.d.ts CHANGED
@@ -2,7 +2,7 @@ import { SvelteComponentTyped } from "svelte";
2
2
  declare const __propDef: {
3
3
  props: {
4
4
  [x: string]: any;
5
- color?: string | undefined;
5
+ customColor?: string | undefined;
6
6
  style?: "dark" | "light" | "custom" | "auto" | undefined;
7
7
  tipClass?: string | undefined;
8
8
  };
package/utils/Chevron.svelte CHANGED
@@ -11,17 +11,16 @@ const icons = {
11
11
  bottom: ChevronDown,
12
12
  left: ChevronLeft
13
13
  };
14
- // @ts-ignore
15
14
  let icon;
16
15
  $: icon = icons[placement.split('-')[0]] ?? ChevronDown;
17
16
  </script>
18
17
 
19
18
  <Wrapper class="flex items-center justify-between" show={aligned}>
20
- {#if placement.split('-')[0] === 'left'}
21
- <ChevronLeft class="h-4 w-4 mr-2" />
22
- <slot />
23
- {:else}
24
- <slot />
25
- <svelte:component this={icon} class="h-4 w-4 ml-2" />
26
- {/if}
19
+ {#if placement.split('-')[0] === 'left'}
20
+ <ChevronLeft class="h-4 w-4 mr-2" />
21
+ <slot />
22
+ {:else}
23
+ <slot />
24
+ <svelte:component this={icon} class="h-4 w-4 ml-2" />
25
+ {/if}
27
26
  </Wrapper>
package/utils/Frame.svelte CHANGED
@@ -47,7 +47,7 @@ const textColors = {
47
47
  light: 'text-gray-700 dark:text-gray-300',
48
48
  dark: 'text-gray-700 dark:text-gray-300',
49
49
  default: 'text-gray-500 dark:text-gray-400',
50
- dropdown: 'text-gray-500 dark:text-gray-400',
50
+ dropdown: 'text-gray-700 dark:text-gray-200',
51
51
  navbar: 'text-gray-700 dark:text-gray-200',
52
52
  navbarUl: 'text-gray-700 dark:text-gray-400',
53
53
  form: 'text-gray-900 dark:text-white',
@@ -75,7 +75,7 @@ const borderColors = {
75
75
  let transitionFunc;
76
76
  $: transitionFunc = transition ?? (() => ({}));
77
77
  let divClass;
78
- $: divClass = classNames(bgColors[color], textColors[color], rounded && 'rounded-lg ', border && 'border', borderColors[color], shadow && 'shadow-md', $$props.class);
78
+ $: divClass = classNames(bgColors[color], textColors[color], rounded && (color === 'dropdown' ? 'rounded' : 'rounded-lg'), border && 'border', borderColors[color], shadow && 'shadow-md', $$props.class);
79
79
  </script>
80
80
 
81
81
  <svelte:element
package/utils/Popper.svelte CHANGED
@@ -129,7 +129,7 @@ onMount(() => {
129
129
  on:mouseenter={activeContent && !clickable ? showHandler : undefined}
130
130
  on:mouseleave={activeContent && !clickable ? hideHandler : undefined}
131
131
  {...$$restProps}
132
- class={classNames('z-10', $$props.class)}>
132
+ class={classNames('z-10 outline-none', $$props.class)}>
133
133
  <slot />
134
134
  {#if arrow}<div data-popper-arrow class="tooltip-arrow"/>{/if}
135
135
  </Frame>
package/utils/Wrapper.svelte CHANGED
@@ -1,8 +1,10 @@
1
- <script>export let show;
1
+ <script>export let tag = 'div';
2
+ export let show;
3
+ export let use = () => { };
2
4
  </script>
3
5
 
4
6
  {#if show}
5
- <div {...$$restProps}><slot /></div>
7
+ <svelte:element this={tag} use:use {...$$restProps}><slot /></svelte:element>
6
8
  {:else}
7
- <slot />
9
+ <slot />
8
10
  {/if}
package/utils/Wrapper.svelte.d.ts CHANGED
@@ -1,8 +1,11 @@
1
1
  import { SvelteComponentTyped } from "svelte";
2
+ import type { Action } from 'svelte/action';
2
3
  declare const __propDef: {
3
4
  props: {
4
5
  [x: string]: any;
6
+ tag?: string | undefined;
5
7
  show: boolean;
8
+ use?: Action<HTMLElement, any, Record<never, any>> | undefined;
6
9
  };
7
10
  events: {
8
11
  [evt: string]: CustomEvent<any>;