flowbite-svelte 0.23.0 → 0.23.1

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 (44) hide show
  1. package/CHANGELOG.md +8 -0
  2. package/README.md +59 -37
  3. package/buttongroups/ButtonGroupItem.svelte +26 -2
  4. package/buttongroups/ButtonGroupItem.svelte.d.ts +7 -0
  5. package/buttons/Button.svelte +6 -0
  6. package/buttons/Button.svelte.d.ts +5 -0
  7. package/dropdowns/DropdownItem.svelte +8 -0
  8. package/dropdowns/DropdownItem.svelte.d.ts +7 -0
  9. package/forms/Checkbox.svelte +9 -1
  10. package/forms/Checkbox.svelte.d.ts +9 -1
  11. package/forms/Fileupload.svelte +11 -0
  12. package/forms/Fileupload.svelte.d.ts +12 -0
  13. package/forms/FloatingLabelInput.svelte +9 -0
  14. package/forms/FloatingLabelInput.svelte.d.ts +9 -0
  15. package/forms/Input.svelte +10 -0
  16. package/forms/Input.svelte.d.ts +10 -0
  17. package/forms/Radio.svelte +10 -1
  18. package/forms/Radio.svelte.d.ts +10 -1
  19. package/forms/Range.svelte +5 -0
  20. package/forms/Range.svelte.d.ts +6 -0
  21. package/forms/Search.svelte +18 -1
  22. package/forms/Search.svelte.d.ts +11 -0
  23. package/forms/Textarea.svelte +20 -1
  24. package/forms/Textarea.svelte.d.ts +12 -0
  25. package/forms/Toggle.svelte.d.ts +1 -1
  26. package/package.json +1 -1
  27. package/sidebars/SidebarDropdownItem.svelte +14 -1
  28. package/sidebars/SidebarDropdownItem.svelte.d.ts +9 -0
  29. package/sidebars/SidebarItem.svelte +14 -1
  30. package/sidebars/SidebarItem.svelte.d.ts +9 -0
  31. package/tabs/DefaultTabs.svelte +9 -0
  32. package/tabs/DefaultTabs.svelte.d.ts +9 -0
  33. package/tabs/FullWidthTabs.svelte +26 -3
  34. package/tabs/FullWidthTabs.svelte.d.ts +9 -0
  35. package/tabs/IconTabs.svelte +19 -2
  36. package/tabs/IconTabs.svelte.d.ts +9 -0
  37. package/tabs/InteractiveTabHead.svelte +10 -1
  38. package/tabs/InteractiveTabHead.svelte.d.ts +9 -0
  39. package/tabs/InteractiveTabs.svelte +9 -0
  40. package/tabs/InteractiveTabs.svelte.d.ts +9 -0
  41. package/tabs/PillTabs.svelte +10 -1
  42. package/tabs/PillTabs.svelte.d.ts +9 -0
  43. package/tabs/UnderlineTabs.svelte +9 -0
  44. package/tabs/UnderlineTabs.svelte.d.ts +9 -0
package/CHANGELOG.md CHANGED
@@ -2,6 +2,14 @@
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.23.1](https://github.com/themesberg/flowbite-svelte/compare/v0.23.0...v0.23.1) (2022-08-04)
6
+
7
+
8
+ ### Features
9
+
10
+ * add events to components ([d24e023](https://github.com/themesberg/flowbite-svelte/commit/d24e023ba671b9976e2c0df3529a66b15e251cea))
11
+ * add typography page ([52923fb](https://github.com/themesberg/flowbite-svelte/commit/52923fb66b55fed20c876ef7b9348fccadde04a3))
12
+
5
13
  ## [0.23.0](https://github.com/themesberg/flowbite-svelte/compare/v0.22.30...v0.23.0) (2022-08-04)
6
14
 
7
15
 
package/README.md CHANGED
@@ -42,17 +42,17 @@ For full documentation, visit [flowbite-svelte.com](https://flowbite-svelte.com/
42
42
  <tr>
43
43
  <td width="33.3333%">
44
44
  <a href="https://flowbite-svelte.com/accordions/">
45
- <img alt="Tailwind CSS Accordion" src="https://flowbite.s3.amazonaws.com/github/accordion.jpg">
45
+ <img alt="Accordion" src="https://flowbite.s3.amazonaws.com/github/accordion.jpg">
46
46
  </a>
47
47
  </td>
48
48
  <td width="33.3333%">
49
49
  <a href="https://flowbite-svelte.com/alerts/">
50
- <img alt="Tailwind CSS Alerts" src="https://flowbite.s3.amazonaws.com/github/alerts.jpg">
50
+ <img alt="Alerts" src="https://flowbite.s3.amazonaws.com/github/alerts.jpg">
51
51
  </a>
52
52
  </td>
53
53
  <td width="33.3333%">
54
54
  <a href="https://flowbite-svelte.com/avatar/">
55
- <img alt="Tailwind CSS Avatar" src="https://flowbite.s3.amazonaws.com/github/avatar.jpg">
55
+ <img alt="Avatar" src="https://flowbite.s3.amazonaws.com/github/avatar.jpg">
56
56
  </a>
57
57
  </td>
58
58
  </tr>
@@ -65,17 +65,17 @@ For full documentation, visit [flowbite-svelte.com](https://flowbite-svelte.com/
65
65
  <tr>
66
66
  <td width="33.3333%">
67
67
  <a href="https://flowbite-svelte.com/badges/">
68
- <img alt="Tailwind CSS Badge" src="https://flowbite.s3.amazonaws.com/github/badge.jpg">
68
+ <img alt="Badge" src="https://flowbite.s3.amazonaws.com/github/badge.jpg">
69
69
  </a>
70
70
  </td>
71
71
  <td width="33.3333%">
72
72
  <a href="https://flowbite-svelte.com/breadcrumbs/">
73
- <img alt="Tailwind CSS Breadcrumbs" src="https://flowbite.s3.amazonaws.com/github/breadcrumbs.jpg">
73
+ <img alt="Breadcrumbs" src="https://flowbite.s3.amazonaws.com/github/breadcrumbs.jpg">
74
74
  </a>
75
75
  </td>
76
76
  <td width="33.3333%">
77
77
  <a href="https://flowbite-svelte.com/button-groups/">
78
- <img alt="Tailwind CSS Button Group" src="https://flowbite.s3.amazonaws.com/github/button-group.jpg">
78
+ <img alt="Button Group" src="https://flowbite.s3.amazonaws.com/github/button-group.jpg">
79
79
  </a>
80
80
  </td>
81
81
  </tr>
@@ -88,17 +88,17 @@ For full documentation, visit [flowbite-svelte.com](https://flowbite-svelte.com/
88
88
  <tr>
89
89
  <td width="33.3333%">
90
90
  <a href="https://flowbite-svelte.com/buttons/">
91
- <img alt="Tailwind CSS Buttons" src="https://flowbite.s3.amazonaws.com/github/buttons.jpg">
91
+ <img alt="Buttons" src="https://flowbite.s3.amazonaws.com/github/buttons.jpg">
92
92
  </a>
93
93
  </td>
94
94
  <td width="33.3333%">
95
95
  <a href="https://flowbite-svelte.com/cards/">
96
- <img alt="Tailwind CSS Cards" src="https://flowbite.s3.amazonaws.com/github/cards.jpg">
96
+ <img alt="Cards" src="https://flowbite.s3.amazonaws.com/github/cards.jpg">
97
97
  </a>
98
98
  </td>
99
99
  <td width="33.3333%">
100
100
  <a href="https://flowbite-svelte.com/carousels/">
101
- <img alt="Tailwind CSS Carousel" src="https://flowbite.s3.amazonaws.com/github/carousel.jpg">
101
+ <img alt="Carousel" src="https://flowbite.s3.amazonaws.com/github/carousel.jpg">
102
102
  </a>
103
103
  </td>
104
104
  </tr>
@@ -110,17 +110,17 @@ For full documentation, visit [flowbite-svelte.com](https://flowbite-svelte.com/
110
110
  <tr>
111
111
  <td width="33.3333%">
112
112
  <a href="https://flowbite-svelte.com/darkmode/">
113
- <img alt="Tailwind CSS Forms" src="https://flowbite.s3.amazonaws.com/github/forms.jpg">
113
+ <img alt="Forms" src="https://flowbite.s3.amazonaws.com/github/forms.jpg">
114
114
  </a>
115
115
  </td>
116
116
  <td width="33.3333%">
117
117
  <a href="https://flowbite-svelte.com/dropdowns/">
118
- <img alt="Tailwind CSS Dropdown" src="https://flowbite.s3.amazonaws.com/github/dropdown.jpg">
118
+ <img alt="Dropdown" src="https://flowbite.s3.amazonaws.com/github/dropdown.jpg">
119
119
  </a>
120
120
  </td>
121
121
  <td width="33.3333%">
122
122
  <a href="https://flowbite-svelte.com/footer/">
123
- <img alt="Tailwind CSS Footer" src="https://flowbite.s3.amazonaws.com/github/footer.jpg">
123
+ <img alt="Footer" src="https://flowbite.s3.amazonaws.com/github/footer.jpg">
124
124
  </a>
125
125
  </td>
126
126
  </tr>
@@ -132,7 +132,7 @@ For full documentation, visit [flowbite-svelte.com](https://flowbite-svelte.com/
132
132
  <tr>
133
133
  <td width="33.3333%">
134
134
  <a href="https://flowbite-svelte.com/forms/">
135
- <img alt="Tailwind CSS Forms" src="https://flowbite.s3.amazonaws.com/github/forms.jpg">
135
+ <img alt="Forms" src="https://flowbite.s3.amazonaws.com/github/forms.jpg">
136
136
  </a>
137
137
  </td>
138
138
  <td width="33.3333%">
@@ -142,7 +142,7 @@ For full documentation, visit [flowbite-svelte.com](https://flowbite-svelte.com/
142
142
  </td>
143
143
  <td width="33.3333%">
144
144
  <a href="https://flowbite-svelte.com/list-group/">
145
- <img alt="Tailwind CSS List group" src="https://flowbite.s3.amazonaws.com/github/list-group.jpg">
145
+ <img alt="List group" src="https://flowbite.s3.amazonaws.com/github/list-group.jpg">
146
146
  </a>
147
147
  </td>
148
148
  </tr>
@@ -154,17 +154,17 @@ For full documentation, visit [flowbite-svelte.com](https://flowbite-svelte.com/
154
154
  <tr>
155
155
  <td width="33.3333%">
156
156
  <a href="https://flowbite-svelte.com/modals/">
157
- <img alt="Tailwind CSS Modal" src="https://flowbite.s3.amazonaws.com/github/modal.jpg">
157
+ <img alt="Modal" src="https://flowbite.s3.amazonaws.com/github/modal.jpg">
158
158
  </a>
159
159
  </td>
160
160
  <td width="33.3333%">
161
161
  <a href="https://flowbite-svelte.com/navbar/">
162
- <img alt="Tailwind CSS Navbar" src="https://flowbite.s3.amazonaws.com/github/navbar.jpg">
162
+ <img alt="Navbar" src="https://flowbite.s3.amazonaws.com/github/navbar.jpg">
163
163
  </a>
164
164
  </td>
165
165
  <td width="33.3333%">
166
166
  <a href="https://flowbite-svelte.com/paginations/">
167
- <img alt="Tailwind CSS Pagination" src="https://flowbite.s3.amazonaws.com/github/pagination.jpg">
167
+ <img alt="Pagination" src="https://flowbite.s3.amazonaws.com/github/pagination.jpg">
168
168
  </a>
169
169
  </td>
170
170
  </tr>
@@ -176,17 +176,17 @@ For full documentation, visit [flowbite-svelte.com](https://flowbite-svelte.com/
176
176
  <tr>
177
177
  <td width="33.3333%">
178
178
  <a href="https://flowbite-svelte.com/progressbars/">
179
- <img alt="Tailwind CSS Progress Bar" src="https://flowbite.s3.amazonaws.com/github/progress.jpg">
179
+ <img alt="Progress Bar" src="https://flowbite.s3.amazonaws.com/github/progress.jpg">
180
180
  </a>
181
181
  </td>
182
182
  <td width="33.3333%">
183
183
  <a href="https://flowbite-svelte.com/ratings/">
184
- <img alt="Tailwind CSS Rating" src="https://flowbite.s3.amazonaws.com/github/rating.jpg">
184
+ <img alt="Rating" src="https://flowbite.s3.amazonaws.com/github/rating.jpg">
185
185
  </a>
186
186
  </td>
187
187
  <td width="33.3333%">
188
188
  <a href="https://flowbite-svelte.com/sidebars/">
189
- <img alt="Tailwind CSS Sidebar" src="https://flowbite.s3.amazonaws.com/github/sidebar.jpg">
189
+ <img alt="Sidebar" src="https://flowbite.s3.amazonaws.com/github/sidebar.jpg">
190
190
  </a>
191
191
  </td>
192
192
  </tr>
@@ -198,17 +198,17 @@ For full documentation, visit [flowbite-svelte.com](https://flowbite-svelte.com/
198
198
  <tr>
199
199
  <td width="33.3333%">
200
200
  <a href="https://flowbite-svelte.com/spinners/">
201
- <img alt="Tailwind CSS Spinner" src="https://flowbite.s3.amazonaws.com/github/spinner.jpg">
201
+ <img alt="Spinner" src="https://flowbite.s3.amazonaws.com/github/spinner.jpg">
202
202
  </a>
203
203
  </td>
204
204
  <td width="33.3333%">
205
205
  <a href="https://flowbite-svelte.com/tables/">
206
- <img alt="Tailwind CSS Tables" src="https://flowbite.s3.amazonaws.com/github/tables.jpg">
206
+ <img alt="Tables" src="https://flowbite.s3.amazonaws.com/github/tables.jpg">
207
207
  </a>
208
208
  </td>
209
209
  <td width="33.3333%">
210
210
  <a href="https://flowbite-svelte.com/tabs/">
211
- <img alt="Tailwind CSS Tabs" src="https://flowbite.s3.amazonaws.com/github/tabs.jpg">
211
+ <img alt="Tabs" src="https://flowbite.s3.amazonaws.com/github/tabs.jpg">
212
212
  </a>
213
213
  </td>
214
214
  </tr>
@@ -220,17 +220,17 @@ For full documentation, visit [flowbite-svelte.com](https://flowbite-svelte.com/
220
220
  <tr>
221
221
  <td width="33.3333%">
222
222
  <a href="https://flowbite-svelte.com/timelines/">
223
- <img alt="Tailwind CSS Timeline" src="https://flowbite.s3.amazonaws.com/github/timeline.jpg">
223
+ <img alt="Timeline" src="https://flowbite.s3.amazonaws.com/github/timeline.jpg">
224
224
  </a>
225
225
  </td>
226
226
  <td width="33.3333%">
227
227
  <a href="https://flowbite-svelte.com/toasts/">
228
- <img alt="Tailwind CSS Toast" src="https://flowbite.s3.amazonaws.com/github/toast.jpg">
228
+ <img alt="Toast" src="https://flowbite.s3.amazonaws.com/github/toast.jpg">
229
229
  </a>
230
230
  </td>
231
231
  <td width="33.3333%">
232
232
  <a href="https://flowbite-svelte.com/tooltips/">
233
- <img alt="Tailwind CSS Tooltips" src="https://flowbite.s3.amazonaws.com/github/tooltips.jpg">
233
+ <img alt="Tooltips" src="https://flowbite.s3.amazonaws.com/github/tooltips.jpg">
234
234
  </a>
235
235
  </td>
236
236
  </tr>
@@ -242,17 +242,17 @@ For full documentation, visit [flowbite-svelte.com](https://flowbite-svelte.com/
242
242
  <tr>
243
243
  <td width="33.3333%">
244
244
  <a href="https://flowbite-svelte.com/forms/input/">
245
- <img alt="Tailwind CSS Input Field" src="https://flowbite.s3.amazonaws.com/github/input-field.jpg">
245
+ <img alt="Input Field" src="https://flowbite.s3.amazonaws.com/github/input-field.jpg">
246
246
  </a>
247
247
  </td>
248
248
  <td width="33.3333%">
249
249
  <a href="https://flowbite-svelte.com/forms/file-input/">
250
- <img alt="Tailwind CSS File Input" src="https://flowbite.s3.amazonaws.com/github/file-input.jpg">
250
+ <img alt="File Input" src="https://flowbite.s3.amazonaws.com/github/file-input.jpg">
251
251
  </a>
252
252
  </td>
253
253
  <td width="33.3333%">
254
254
  <a href="https://flowbite-svelte.com/forms/search/">
255
- <img alt="Tailwind CSS Search Input" src="https://flowbite.s3.amazonaws.com/github/search-input.jpg">
255
+ <img alt="Search Input" src="https://flowbite.s3.amazonaws.com/github/search-input.jpg">
256
256
  </a>
257
257
  </td>
258
258
  </tr>
@@ -264,17 +264,17 @@ For full documentation, visit [flowbite-svelte.com](https://flowbite-svelte.com/
264
264
  <tr>
265
265
  <td width="33.3333%">
266
266
  <a href="https://flowbite-svelte.com/forms/select/">
267
- <img alt="Tailwind CSS Select" src="https://flowbite.s3.amazonaws.com/github/select.jpg">
267
+ <img alt="Select" src="https://flowbite.s3.amazonaws.com/github/select.jpg">
268
268
  </a>
269
269
  </td>
270
270
  <td width="33.3333%">
271
271
  <a href="https://flowbite-svelte.com/forms/textarea/">
272
- <img alt="Tailwind CSS Textarea" src="https://flowbite.s3.amazonaws.com/github/textarea.jpg">
272
+ <img alt="Textarea" src="https://flowbite.s3.amazonaws.com/github/textarea.jpg">
273
273
  </a>
274
274
  </td>
275
275
  <td width="33.3333%">
276
276
  <a href="https://flowbite-svelte.com/forms/checkbox/">
277
- <img alt="Tailwind CSS Checkbox" src="https://flowbite.s3.amazonaws.com/github/checkbox.jpg">
277
+ <img alt="Checkbox" src="https://flowbite.s3.amazonaws.com/github/checkbox.jpg">
278
278
  </a>
279
279
  </td>
280
280
  </tr>
@@ -286,33 +286,55 @@ For full documentation, visit [flowbite-svelte.com](https://flowbite-svelte.com/
286
286
  <tr>
287
287
  <td width="33.3333%">
288
288
  <a href="https://flowbite-svelte.com/forms/radio/">
289
- <img alt="Tailwind CSS Radio" src="https://flowbite.s3.amazonaws.com/github/radio.jpg">
289
+ <img alt="Radio" src="https://flowbite.s3.amazonaws.com/github/radio.jpg">
290
290
  </a>
291
291
  </td>
292
292
  <td width="33.3333%">
293
293
  <a href="https://flowbite-svelte.com/forms/toggle/">
294
- <img alt="Tailwind CSS Toggle" src="https://flowbite.s3.amazonaws.com/github/toggle.jpg">
294
+ <img alt="Toggle" src="https://flowbite.s3.amazonaws.com/github/toggle.jpg">
295
295
  </a>
296
296
  </td>
297
297
  <td width="33.3333%">
298
298
  <a href="https://flowbite-svelte.com/forms/range/">
299
- <img alt="Tailwind CSS Range Slider" src="https://flowbite.s3.amazonaws.com/github/range-slider.jpg">
299
+ <img alt="Range Slider" src="https://flowbite.s3.amazonaws.com/github/range-slider.jpg">
300
300
  </a>
301
301
  </td>
302
302
  </tr>
303
303
  <tr>
304
304
  <td width="33.3333%">Floating Label</td>
305
305
  <td width="33.3333%">Datepicker</td>
306
+ <td width="33.3333%">Typography</td>
306
307
  </tr>
307
308
  <tr>
308
309
  <td width="33.3333%">
309
310
  <a href="https://flowbite-svelte.com/forms/floating-label/">
310
- <img alt="Tailwind CSS Floating Label" src="https://flowbite.s3.amazonaws.com/github/floating-label.jpg">
311
+ <img alt="Floating Label" src="https://flowbite.s3.amazonaws.com/github/floating-label.jpg">
311
312
  </a>
312
313
  </td>
313
314
  <td width="33.3333%">
314
315
  <a href="https://flowbite-svelte.com/datepicker/">
315
- <img alt="Tailwind CSS Datepicker" src="https://flowbite.s3.amazonaws.com/github/datepicker.jpg">
316
+ <img alt="Datepicker" src="https://flowbite.s3.amazonaws.com/github/datepicker.jpg">
317
+ </a>
318
+ </td>
319
+ <td width="33.3333%">
320
+ <a href="https://flowbite-svelte.com/typography/">
321
+ <img alt="Typography" src="https://flowbite.s3.amazonaws.com/github/typography.jpg">
322
+ </a>
323
+ </td>
324
+ </tr>
325
+ <tr>
326
+ <td width="33.3333%">Skeleton</td>
327
+ <td width="33.3333%">KBD(Keyboard)</td>
328
+ </tr>
329
+ <tr>
330
+ <td width="33.3333%">
331
+ <a href="https://flowbite-svelte.com/skeleton/">
332
+ <img alt="Skeleton" src="https://flowbite.s3.amazonaws.com/github/skeleton.jpg">
333
+ </a>
334
+ </td>
335
+ <td width="33.3333%">
336
+ <a href="https://flowbite-svelte.com/kbd/">
337
+ <img alt="Kbd, Keyboard" src="https://flowbite.s3.amazonaws.com/github/kbd.jpg">
316
338
  </a>
317
339
  </td>
318
340
  </tr>
package/buttongroups/ButtonGroupItem.svelte CHANGED
@@ -10,9 +10,33 @@ if (outline) {
10
10
  </script>
11
11
 
12
12
  {#if href}
13
- <a {href} {...$$restProps} class={classNames(btnClass, $$props.class)} on:click><slot /></a>
13
+ <a
14
+ {href}
15
+ {...$$restProps}
16
+ class={classNames(btnClass, $$props.class)}
17
+ on:click
18
+ on:change
19
+ on:keydown
20
+ on:keyup
21
+ on:mouseenter
22
+ on:mouseleave
23
+ on:mouseenter><slot /></a
24
+ >
14
25
  {:else}
15
- <button {type} {...$$restProps} class={classNames(btnClass, $$props.class)} on:click>
26
+ <button
27
+ {type}
28
+ {...$$restProps}
29
+ class={classNames(btnClass, $$props.class)}
30
+ on:click
31
+ on:change
32
+ on:keydown
33
+ on:keyup
34
+ on:focus
35
+ on:blur
36
+ on:mouseenter
37
+ on:mouseleave
38
+ on:mouseenter
39
+ >
16
40
  <slot />
17
41
  </button>
18
42
  {/if}
package/buttongroups/ButtonGroupItem.svelte.d.ts CHANGED
@@ -11,6 +11,13 @@ declare const __propDef: {
11
11
  };
12
12
  events: {
13
13
  click: MouseEvent;
14
+ change: Event;
15
+ keydown: KeyboardEvent;
16
+ keyup: KeyboardEvent;
17
+ mouseenter: MouseEvent;
18
+ mouseleave: MouseEvent;
19
+ focus: FocusEvent;
20
+ blur: FocusEvent;
14
21
  } & {
15
22
  [evt: string]: CustomEvent<any>;
16
23
  };
package/buttons/Button.svelte CHANGED
@@ -76,6 +76,12 @@ $: gradientOutlineClass = classNames('inline-flex items-center justify-center',
76
76
  {...$$restProps}
77
77
  class={buttonClass}
78
78
  on:click
79
+ on:change
80
+ on:keydown
81
+ on:keyup
82
+ on:mouseenter
83
+ on:mouseleave
84
+ on:mouseenter
79
85
  >
80
86
  {#if outline && gradient}
81
87
  <!-- Trick to prentend outline without using border
package/buttons/Button.svelte.d.ts CHANGED
@@ -12,6 +12,11 @@ declare const __propDef: {
12
12
  };
13
13
  events: {
14
14
  click: MouseEvent;
15
+ change: Event;
16
+ keydown: KeyboardEvent;
17
+ keyup: KeyboardEvent;
18
+ mouseenter: MouseEvent;
19
+ mouseleave: MouseEvent;
15
20
  } & {
16
21
  [evt: string]: CustomEvent<any>;
17
22
  };
package/dropdowns/DropdownItem.svelte CHANGED
@@ -11,6 +11,14 @@ const colors = {
11
11
  {...$$restProps}
12
12
  class={classNames(liClass, colors[color] ?? colors.default, $$props.class)}
13
13
  on:click|stopPropagation
14
+ on:change
15
+ on:keydown
16
+ on:keyup
17
+ on:focus
18
+ on:blur
19
+ on:mouseenter
20
+ on:mouseleave
21
+ on:mouseenter
14
22
  >
15
23
  <slot />
16
24
  </li>
package/dropdowns/DropdownItem.svelte.d.ts CHANGED
@@ -7,6 +7,13 @@ declare const __propDef: {
7
7
  };
8
8
  events: {
9
9
  click: MouseEvent;
10
+ change: Event;
11
+ keydown: KeyboardEvent;
12
+ keyup: KeyboardEvent;
13
+ focus: FocusEvent;
14
+ blur: FocusEvent;
15
+ mouseenter: MouseEvent;
16
+ mouseleave: MouseEvent;
10
17
  } & {
11
18
  [evt: string]: CustomEvent<any>;
12
19
  };
package/forms/Checkbox.svelte CHANGED
@@ -36,8 +36,16 @@ $: {
36
36
  <input
37
37
  type="checkbox"
38
38
  bind:checked
39
+ on:keyup
40
+ on:keydown
41
+ on:keypress
42
+ on:focus
43
+ on:blur
39
44
  on:click
40
- on:change
45
+ on:mouseover
46
+ on:mouseenter
47
+ on:mouseleave
48
+ on:paste
41
49
  {value}
42
50
  {...$$restProps}
43
51
  class={inputClass(custom, color, true, background, $$slots.default || $$props.class)}
package/forms/Checkbox.svelte.d.ts CHANGED
@@ -11,8 +11,16 @@ declare const __propDef: {
11
11
  checked?: boolean;
12
12
  };
13
13
  events: {
14
+ keyup: KeyboardEvent;
15
+ keydown: KeyboardEvent;
16
+ keypress: KeyboardEvent;
17
+ focus: FocusEvent;
18
+ blur: FocusEvent;
14
19
  click: MouseEvent;
15
- change: Event;
20
+ mouseover: MouseEvent;
21
+ mouseenter: MouseEvent;
22
+ mouseleave: MouseEvent;
23
+ paste: ClipboardEvent;
16
24
  } & {
17
25
  [evt: string]: CustomEvent<any>;
18
26
  };
package/forms/Fileupload.svelte CHANGED
@@ -6,6 +6,17 @@ export let inputClass = 'block w-full text-gray-900 bg-gray-50 rounded-lg border
6
6
 
7
7
  <input
8
8
  {...$$restProps}
9
+ on:change
10
+ on:keyup
11
+ on:keydown
12
+ on:keypress
13
+ on:focus
14
+ on:blur
15
+ on:click
16
+ on:mouseover
17
+ on:mouseenter
18
+ on:mouseleave
19
+ on:paste
9
20
  bind:value
10
21
  class={classNames(inputClass, {
11
22
  'mb-5 text-xs': size === 'xs',
package/forms/Fileupload.svelte.d.ts CHANGED
@@ -7,6 +7,18 @@ declare const __propDef: {
7
7
  inputClass?: string;
8
8
  };
9
9
  events: {
10
+ change: Event;
11
+ keyup: KeyboardEvent;
12
+ keydown: KeyboardEvent;
13
+ keypress: KeyboardEvent;
14
+ focus: FocusEvent;
15
+ blur: FocusEvent;
16
+ click: MouseEvent;
17
+ mouseover: MouseEvent;
18
+ mouseenter: MouseEvent;
19
+ mouseleave: MouseEvent;
20
+ paste: ClipboardEvent;
21
+ } & {
10
22
  [evt: string]: CustomEvent<any>;
11
23
  };
12
24
  slots: {};
package/forms/FloatingLabelInput.svelte CHANGED
@@ -74,6 +74,15 @@ function setType(node) {
74
74
  bind:value
75
75
  on:change
76
76
  on:blur
77
+ on:keyup
78
+ on:keydown
79
+ on:keypress
80
+ on:focus
81
+ on:click
82
+ on:mouseover
83
+ on:mouseenter
84
+ on:mouseleave
85
+ on:paste
77
86
  bind:this={ref}
78
87
  use:setType
79
88
  placeholder=" "
package/forms/FloatingLabelInput.svelte.d.ts CHANGED
@@ -15,6 +15,15 @@ declare const __propDef: {
15
15
  events: {
16
16
  change: Event;
17
17
  blur: FocusEvent;
18
+ keyup: KeyboardEvent;
19
+ keydown: KeyboardEvent;
20
+ keypress: KeyboardEvent;
21
+ focus: FocusEvent;
22
+ click: MouseEvent;
23
+ mouseover: MouseEvent;
24
+ mouseenter: MouseEvent;
25
+ mouseleave: MouseEvent;
26
+ paste: ClipboardEvent;
18
27
  } & {
19
28
  [evt: string]: CustomEvent<any>;
20
29
  };
package/forms/Input.svelte CHANGED
@@ -24,6 +24,16 @@ function setType(node) {
24
24
  bind:value
25
25
  bind:this={ref}
26
26
  on:change
27
+ on:keyup
28
+ on:keydown
29
+ on:keypress
30
+ on:focus
31
+ on:blur
32
+ on:click
33
+ on:mouseover
34
+ on:mouseenter
35
+ on:mouseleave
36
+ on:paste
27
37
  use:setType
28
38
  class={classNames(
29
39
  inputClass,
package/forms/Input.svelte.d.ts CHANGED
@@ -12,6 +12,16 @@ declare const __propDef: {
12
12
  };
13
13
  events: {
14
14
  change: Event;
15
+ keyup: KeyboardEvent;
16
+ keydown: KeyboardEvent;
17
+ keypress: KeyboardEvent;
18
+ focus: FocusEvent;
19
+ blur: FocusEvent;
20
+ click: MouseEvent;
21
+ mouseover: MouseEvent;
22
+ mouseenter: MouseEvent;
23
+ mouseleave: MouseEvent;
24
+ paste: ClipboardEvent;
15
25
  } & {
16
26
  [evt: string]: CustomEvent<any>;
17
27
  };
package/forms/Radio.svelte CHANGED
@@ -41,8 +41,17 @@ let background = getContext('background');
41
41
  <input
42
42
  type="radio"
43
43
  bind:group
44
- on:click
45
44
  on:change
45
+ on:keyup
46
+ on:keydown
47
+ on:keypress
48
+ on:focus
49
+ on:blur
50
+ on:click
51
+ on:mouseover
52
+ on:mouseenter
53
+ on:mouseleave
54
+ on:paste
46
55
  {value}
47
56
  {...$$restProps}
48
57
  class={inputClass(custom, color, false, background, $$slots.default || $$props.class)}
package/forms/Radio.svelte.d.ts CHANGED
@@ -12,8 +12,17 @@ declare const __propDef: {
12
12
  value?: string;
13
13
  };
14
14
  events: {
15
- click: MouseEvent;
16
15
  change: Event;
16
+ keyup: KeyboardEvent;
17
+ keydown: KeyboardEvent;
18
+ keypress: KeyboardEvent;
19
+ focus: FocusEvent;
20
+ blur: FocusEvent;
21
+ click: MouseEvent;
22
+ mouseover: MouseEvent;
23
+ mouseenter: MouseEvent;
24
+ mouseleave: MouseEvent;
25
+ paste: ClipboardEvent;
17
26
  } & {
18
27
  [evt: string]: CustomEvent<any>;
19
28
  };
package/forms/Range.svelte CHANGED
@@ -26,4 +26,9 @@ else {
26
26
  bind:value
27
27
  {step}
28
28
  class={inputClass}
29
+ on:change
30
+ on:keyup
31
+ on:keydown
32
+ on:keypress
33
+ on:click
29
34
  />
package/forms/Range.svelte.d.ts CHANGED
@@ -10,6 +10,12 @@ declare const __propDef: {
10
10
  size: 'small' | 'large';
11
11
  };
12
12
  events: {
13
+ change: Event;
14
+ keyup: KeyboardEvent;
15
+ keydown: KeyboardEvent;
16
+ keypress: KeyboardEvent;
17
+ click: MouseEvent;
18
+ } & {
13
19
  [evt: string]: CustomEvent<any>;
14
20
  };
15
21
  slots: {};
package/forms/Search.svelte CHANGED
@@ -23,7 +23,24 @@ export let placeholder = 'Search';
23
23
  /></svg
24
24
  >
25
25
  </div>
26
- <input {...$$restProps} type="search" {id} class={inputClass} {placeholder} />
26
+ <input
27
+ {...$$restProps}
28
+ on:change
29
+ on:keyup
30
+ on:keydown
31
+ on:keypress
32
+ on:focus
33
+ on:blur
34
+ on:click
35
+ on:mouseover
36
+ on:mouseenter
37
+ on:mouseleave
38
+ on:paste
39
+ type="search"
40
+ {id}
41
+ class={inputClass}
42
+ {placeholder}
43
+ />
27
44
  <button type="submit" class={btnClass}>Search</button>
28
45
  </div>
29
46
  </form>
package/forms/Search.svelte.d.ts CHANGED
@@ -10,6 +10,17 @@ declare const __propDef: {
10
10
  };
11
11
  events: {
12
12
  submit: SubmitEvent;
13
+ change: Event;
14
+ keyup: KeyboardEvent;
15
+ keydown: KeyboardEvent;
16
+ keypress: KeyboardEvent;
17
+ focus: FocusEvent;
18
+ blur: FocusEvent;
19
+ click: MouseEvent;
20
+ mouseover: MouseEvent;
21
+ mouseenter: MouseEvent;
22
+ mouseleave: MouseEvent;
23
+ paste: ClipboardEvent;
13
24
  } & {
14
25
  [evt: string]: CustomEvent<any>;
15
26
  };
package/forms/Textarea.svelte CHANGED
@@ -13,7 +13,26 @@ export let helperClass = 'mt-2 text-sm text-gray-500 dark:text-gray-400';
13
13
  </script>
14
14
 
15
15
  <label for={id} class={labelClass}>{label}</label>
16
- <textarea bind:value bind:this={ref} {id} {name} {rows} class={textareaClass} {placeholder} />
16
+ <textarea
17
+ bind:value
18
+ bind:this={ref}
19
+ on:change
20
+ on:keyup
21
+ on:keydown
22
+ on:keypress
23
+ on:focus
24
+ on:blur
25
+ on:click
26
+ on:mouseover
27
+ on:mouseenter
28
+ on:mouseleave
29
+ on:paste
30
+ {id}
31
+ {name}
32
+ {rows}
33
+ class={textareaClass}
34
+ {placeholder}
35
+ />
17
36
  {#if helper}
18
37
  <p class={helperClass}>{@html helper}</p>
19
38
  {/if}
package/forms/Textarea.svelte.d.ts CHANGED
@@ -14,6 +14,18 @@ declare const __propDef: {
14
14
  helperClass?: string;
15
15
  };
16
16
  events: {
17
+ change: Event;
18
+ keyup: KeyboardEvent;
19
+ keydown: KeyboardEvent;
20
+ keypress: KeyboardEvent;
21
+ focus: FocusEvent;
22
+ blur: FocusEvent;
23
+ click: MouseEvent;
24
+ mouseover: MouseEvent;
25
+ mouseenter: MouseEvent;
26
+ mouseleave: MouseEvent;
27
+ paste: ClipboardEvent;
28
+ } & {
17
29
  [evt: string]: CustomEvent<any>;
18
30
  };
19
31
  slots: {};
package/forms/Toggle.svelte.d.ts CHANGED
@@ -9,7 +9,7 @@ declare const __propDef: {
9
9
  };
10
10
  events: {
11
11
  click: MouseEvent;
12
- change: Event;
12
+ change: CustomEvent<any>;
13
13
  } & {
14
14
  [evt: string]: CustomEvent<any>;
15
15
  };
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "flowbite-svelte",
3
- "version": "0.23.0",
3
+ "version": "0.23.1",
4
4
  "description": "Flowbite components for Svelte",
5
5
  "main": "index.js",
6
6
  "author": {
package/sidebars/SidebarDropdownItem.svelte CHANGED
@@ -5,5 +5,18 @@ export let label = '';
5
5
  </script>
6
6
 
7
7
  <li>
8
- <a {...$$restProps} {href} class={classNames(aClass, $$props.class)}>{label}</a>
8
+ <a
9
+ {...$$restProps}
10
+ {href}
11
+ on:click
12
+ on:change
13
+ on:keydown
14
+ on:keyup
15
+ on:focus
16
+ on:blur
17
+ on:mouseenter
18
+ on:mouseleave
19
+ on:mouseenter
20
+ class={classNames(aClass, $$props.class)}>{label}</a
21
+ >
9
22
  </li>
package/sidebars/SidebarDropdownItem.svelte.d.ts CHANGED
@@ -7,6 +7,15 @@ declare const __propDef: {
7
7
  label?: string;
8
8
  };
9
9
  events: {
10
+ click: MouseEvent;
11
+ change: Event;
12
+ keydown: KeyboardEvent;
13
+ keyup: KeyboardEvent;
14
+ focus: FocusEvent;
15
+ blur: FocusEvent;
16
+ mouseenter: MouseEvent;
17
+ mouseleave: MouseEvent;
18
+ } & {
10
19
  [evt: string]: CustomEvent<any>;
11
20
  };
12
21
  slots: {};
package/sidebars/SidebarItem.svelte CHANGED
@@ -7,7 +7,20 @@ export let icon;
7
7
  </script>
8
8
 
9
9
  <li>
10
- <a {...$$restProps} {href} class={classNames(aClass, $$props.class)}>
10
+ <a
11
+ {...$$restProps}
12
+ {href}
13
+ on:click
14
+ on:change
15
+ on:keydown
16
+ on:keyup
17
+ on:focus
18
+ on:blur
19
+ on:mouseenter
20
+ on:mouseleave
21
+ on:mouseenter
22
+ class={classNames(aClass, $$props.class)}
23
+ >
11
24
  <svelte:component
12
25
  this={icon.name}
13
26
  size={icon.size}
package/sidebars/SidebarItem.svelte.d.ts CHANGED
@@ -10,6 +10,15 @@ declare const __propDef: {
10
10
  icon: IconType;
11
11
  };
12
12
  events: {
13
+ click: MouseEvent;
14
+ change: Event;
15
+ keydown: KeyboardEvent;
16
+ keyup: KeyboardEvent;
17
+ focus: FocusEvent;
18
+ blur: FocusEvent;
19
+ mouseenter: MouseEvent;
20
+ mouseleave: MouseEvent;
21
+ } & {
13
22
  [evt: string]: CustomEvent<any>;
14
23
  };
15
24
  slots: {
package/tabs/DefaultTabs.svelte CHANGED
@@ -8,6 +8,15 @@
8
8
  {href}
9
9
  {rel}
10
10
  aria-current="page"
11
+ on:click
12
+ on:change
13
+ on:keydown
14
+ on:keyup
15
+ on:focus
16
+ on:blur
17
+ on:mouseenter
18
+ on:mouseleave
19
+ on:mouseenter
11
20
  class={active
12
21
  ? 'inline-block py-4 px-4 text-sm font-medium text-center text-blue-600 bg-gray-100 rounded-t-lg active dark:bg-gray-800 dark:text-blue-500'
13
22
  : ' inline-block py-4 px-4 text-sm font-medium text-center text-gray-500 rounded-t-lg hover:text-gray-600 hover:bg-gray-50 dark:text-gray-400 dark:hover:bg-gray-800 dark:hover:text-gray-300 '}
package/tabs/DefaultTabs.svelte.d.ts CHANGED
@@ -5,6 +5,15 @@ declare const __propDef: {
5
5
  tabs: TabType[];
6
6
  };
7
7
  events: {
8
+ click: MouseEvent;
9
+ change: Event;
10
+ keydown: KeyboardEvent;
11
+ keyup: KeyboardEvent;
12
+ focus: FocusEvent;
13
+ blur: FocusEvent;
14
+ mouseenter: MouseEvent;
15
+ mouseleave: MouseEvent;
16
+ } & {
8
17
  [evt: string]: CustomEvent<any>;
9
18
  };
10
19
  slots: {};
package/tabs/FullWidthTabs.svelte CHANGED
@@ -4,16 +4,39 @@ export let tabLabel;
4
4
 
5
5
  <div class="sm:hidden">
6
6
  <label for="tabs" class="sr-only">{tabLabel}</label>
7
- <select id="tabs" class="bg-gray-50 border border-gray-300 text-gray-900 sm:text-sm rounded-lg focus:ring-blue-500 focus:border-blue-500 block w-full p-2.5 dark:bg-gray-700 dark:border-gray-600 dark:placeholder-gray-400 dark:text-white dark:focus:ring-blue-500 dark:focus:border-blue-500">
7
+ <select
8
+ id="tabs"
9
+ class="bg-gray-50 border border-gray-300 text-gray-900 sm:text-sm rounded-lg focus:ring-blue-500 focus:border-blue-500 block w-full p-2.5 dark:bg-gray-700 dark:border-gray-600 dark:placeholder-gray-400 dark:text-white dark:focus:ring-blue-500 dark:focus:border-blue-500"
10
+ >
8
11
  {#each tabs as { name }}
9
12
  <option>{name}</option>
10
13
  {/each}
11
14
  </select>
12
15
  </div>
13
- <ul class="hidden text-sm font-medium text-center text-gray-500 rounded-lg divide-x divide-gray-200 shadow sm:flex dark:divide-gray-700 dark:text-gray-400">
16
+ <ul
17
+ class="hidden text-sm font-medium text-center text-gray-500 rounded-lg divide-x divide-gray-200 shadow sm:flex dark:divide-gray-700 dark:text-gray-400"
18
+ >
14
19
  {#each tabs as { name, href, rel, active }, i}
15
20
  <li class="w-full" data-id={i}>
16
- <a {href} {rel} class:rounded-l-lg={i === 0} class:rounded-r-lg={i === tabs.length - 1} class={active ? 'inline-block p-4 w-full text-gray-900 bg-gray-100 focus:ring-4 focus:ring-blue-300 active focus:outline-none dark:bg-gray-700 dark:text-white' : 'inline-block p-4 w-full bg-white hover:text-gray-700 hover:bg-gray-50 focus:ring-4 focus:ring-blue-300 focus:outline-none dark:hover:text-white dark:bg-gray-800 dark:hover:bg-gray-700'} aria-current="page">{name}</a>
21
+ <a
22
+ {href}
23
+ {rel}
24
+ class:rounded-l-lg={i === 0}
25
+ class:rounded-r-lg={i === tabs.length - 1}
26
+ class={active
27
+ ? 'inline-block p-4 w-full text-gray-900 bg-gray-100 focus:ring-4 focus:ring-blue-300 active focus:outline-none dark:bg-gray-700 dark:text-white'
28
+ : 'inline-block p-4 w-full bg-white hover:text-gray-700 hover:bg-gray-50 focus:ring-4 focus:ring-blue-300 focus:outline-none dark:hover:text-white dark:bg-gray-800 dark:hover:bg-gray-700'}
29
+ aria-current="page"
30
+ on:click
31
+ on:change
32
+ on:keydown
33
+ on:keyup
34
+ on:focus
35
+ on:blur
36
+ on:mouseenter
37
+ on:mouseleave
38
+ on:mouseenter>{name}</a
39
+ >
17
40
  </li>
18
41
  {/each}
19
42
  </ul>
package/tabs/FullWidthTabs.svelte.d.ts CHANGED
@@ -6,6 +6,15 @@ declare const __propDef: {
6
6
  tabLabel: string;
7
7
  };
8
8
  events: {
9
+ click: MouseEvent;
10
+ change: Event;
11
+ keydown: KeyboardEvent;
12
+ keyup: KeyboardEvent;
13
+ focus: FocusEvent;
14
+ blur: FocusEvent;
15
+ mouseenter: MouseEvent;
16
+ mouseleave: MouseEvent;
17
+ } & {
9
18
  [evt: string]: CustomEvent<any>;
10
19
  };
11
20
  slots: {};
package/tabs/IconTabs.svelte CHANGED
@@ -3,10 +3,27 @@ export let iconClass = 'mr-2 w-5 h-5 text-gray-400 group-hover:text-gray-500 dar
3
3
  </script>
4
4
 
5
5
  <div class="border-b border-gray-200 dark:border-gray-700">
6
- <ul class="flex flex-wrap -mb-px text-sm font-medium text-center text-gray-500 dark:text-gray-400">
6
+ <ul
7
+ class="flex flex-wrap -mb-px text-sm font-medium text-center text-gray-500 dark:text-gray-400"
8
+ >
7
9
  {#each tabs as { name, active, href, rel, icon, iconSize }}
8
10
  <li class="mr-2">
9
- <a {href} {rel} class={active ? 'inline-flex p-4 text-blue-600 rounded-t-lg border-b-2 border-blue-600 active dark:text-blue-500 dark:border-blue-500 group' : ' inline-flex p-4 rounded-t-lg border-b-2 border-transparent hover:text-gray-600 hover:border-gray-300 dark:hover:text-gray-300 group '}>
11
+ <a
12
+ {href}
13
+ {rel}
14
+ class={active
15
+ ? 'inline-flex p-4 text-blue-600 rounded-t-lg border-b-2 border-blue-600 active dark:text-blue-500 dark:border-blue-500 group'
16
+ : ' inline-flex p-4 rounded-t-lg border-b-2 border-transparent hover:text-gray-600 hover:border-gray-300 dark:hover:text-gray-300 group '}
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
+ on:mouseenter
26
+ >
10
27
  <svelte:component this={icon} size={iconSize} class={iconClass} />
11
28
  {name}
12
29
  </a>
package/tabs/IconTabs.svelte.d.ts CHANGED
@@ -6,6 +6,15 @@ declare const __propDef: {
6
6
  iconClass?: string;
7
7
  };
8
8
  events: {
9
+ click: MouseEvent;
10
+ change: Event;
11
+ keydown: KeyboardEvent;
12
+ keyup: KeyboardEvent;
13
+ focus: FocusEvent;
14
+ blur: FocusEvent;
15
+ mouseenter: MouseEvent;
16
+ mouseleave: MouseEvent;
17
+ } & {
9
18
  [evt: string]: CustomEvent<any>;
10
19
  };
11
20
  slots: {};
package/tabs/InteractiveTabHead.svelte CHANGED
@@ -43,7 +43,16 @@ Header part of Interactive tab component. Use with TabContent.
43
43
  role="tab"
44
44
  class:active={activeTabValue === id}
45
45
  aria-controls={name}
46
- aria-selected="false">{name}</button
46
+ aria-selected="false"
47
+ on:click
48
+ on:change
49
+ on:keydown
50
+ on:keyup
51
+ on:focus
52
+ on:blur
53
+ on:mouseenter
54
+ on:mouseleave
55
+ on:mouseenter>{name}</button
47
56
  >
48
57
  </li>
49
58
  {/each}
package/tabs/InteractiveTabHead.svelte.d.ts CHANGED
@@ -7,6 +7,15 @@ declare const __propDef: {
7
7
  activeTabValue?: number;
8
8
  };
9
9
  events: {
10
+ click: MouseEvent;
11
+ change: Event;
12
+ keydown: KeyboardEvent;
13
+ keyup: KeyboardEvent;
14
+ focus: FocusEvent;
15
+ blur: FocusEvent;
16
+ mouseenter: MouseEvent;
17
+ mouseleave: MouseEvent;
18
+ } & {
10
19
  [evt: string]: CustomEvent<any>;
11
20
  };
12
21
  slots: {
package/tabs/InteractiveTabs.svelte CHANGED
@@ -10,6 +10,15 @@ const handleClick = (tabValue) => () => (activeTabValue = tabValue);
10
10
  <li class="mr-2" role="presentation">
11
11
  <button
12
12
  on:click={handleClick(id)}
13
+ on:click
14
+ on:change
15
+ on:keydown
16
+ on:keyup
17
+ on:focus
18
+ on:blur
19
+ on:mouseenter
20
+ on:mouseleave
21
+ on:mouseenter
13
22
  class="inline-block py-4 px-4 text-sm font-medium text-center text-gray-500 rounded-t-lg border-b-2 border-transparent hover:text-gray-600 hover:border-gray-300 dark:text-gray-400 dark:hover:text-gray-300"
14
23
  id="{name}-tab"
15
24
  type="button"
package/tabs/InteractiveTabs.svelte.d.ts CHANGED
@@ -7,6 +7,15 @@ declare const __propDef: {
7
7
  tabs: InteractiveTabType[];
8
8
  };
9
9
  events: {
10
+ click: MouseEvent;
11
+ change: Event;
12
+ keydown: KeyboardEvent;
13
+ keyup: KeyboardEvent;
14
+ focus: FocusEvent;
15
+ blur: FocusEvent;
16
+ mouseenter: MouseEvent;
17
+ mouseleave: MouseEvent;
18
+ } & {
10
19
  [evt: string]: CustomEvent<any>;
11
20
  };
12
21
  slots: {};
package/tabs/PillTabs.svelte CHANGED
@@ -9,7 +9,16 @@
9
9
  ? 'active inline-block py-3 px-4 text-sm font-medium text-center text-white bg-blue-600 rounded-lg'
10
10
  : 'inline-block py-3 px-4 text-sm font-medium text-center text-gray-500 rounded-lg hover:text-gray-900 hover:bg-gray-100 dark:text-gray-400 dark:hover:bg-gray-800 dark:hover:text-white'} "
11
11
  {href}
12
- rel="external">{name}</a
12
+ rel="external"
13
+ on:click
14
+ on:change
15
+ on:keydown
16
+ on:keyup
17
+ on:focus
18
+ on:blur
19
+ on:mouseenter
20
+ on:mouseleave
21
+ on:mouseenter>{name}</a
13
22
  >
14
23
  </li>
15
24
  {/each}
package/tabs/PillTabs.svelte.d.ts CHANGED
@@ -5,6 +5,15 @@ declare const __propDef: {
5
5
  tabs: PillTabType[];
6
6
  };
7
7
  events: {
8
+ click: MouseEvent;
9
+ change: Event;
10
+ keydown: KeyboardEvent;
11
+ keyup: KeyboardEvent;
12
+ focus: FocusEvent;
13
+ blur: FocusEvent;
14
+ mouseenter: MouseEvent;
15
+ mouseleave: MouseEvent;
16
+ } & {
8
17
  [evt: string]: CustomEvent<any>;
9
18
  };
10
19
  slots: {};
package/tabs/UnderlineTabs.svelte CHANGED
@@ -9,6 +9,15 @@ export let tabs;
9
9
  <a
10
10
  {href}
11
11
  {rel}
12
+ on:click
13
+ on:change
14
+ on:keydown
15
+ on:keyup
16
+ on:focus
17
+ on:blur
18
+ on:mouseenter
19
+ on:mouseleave
20
+ on:mouseenter
12
21
  class={active
13
22
  ? 'inline-block p-4 text-blue-600 rounded-t-lg border-b-2 border-blue-600 active dark:text-blue-500 dark:border-blue-500'
14
23
  : ' inline-block p-4 rounded-t-lg border-b-2 border-transparent hover:text-gray-600 hover:border-gray-300 dark:hover:text-gray-300 '}
package/tabs/UnderlineTabs.svelte.d.ts CHANGED
@@ -6,6 +6,15 @@ declare const __propDef: {
6
6
  tabs: TabType[];
7
7
  };
8
8
  events: {
9
+ click: MouseEvent;
10
+ change: Event;
11
+ keydown: KeyboardEvent;
12
+ keyup: KeyboardEvent;
13
+ focus: FocusEvent;
14
+ blur: FocusEvent;
15
+ mouseenter: MouseEvent;
16
+ mouseleave: MouseEvent;
17
+ } & {
9
18
  [evt: string]: CustomEvent<any>;
10
19
  };
11
20
  slots: {};