flowbite-svelte 0.14.16 → 0.15.0
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/CHANGELOG.md +14 -0
- package/README.md +78 -81
- package/buttongroups/ButtonGroup.svelte +4 -4
- package/buttongroups/ButtonGroupOutline.svelte +4 -4
- package/footer/SitemapFooter.svelte +1 -3
- package/footer/SocialMediaFooter.svelte +1 -1
- package/forms/Iconinput.svelte +3 -2
- package/forms/Iconinput.svelte.d.ts +1 -0
- package/list-group/List.svelte +4 -4
- package/package.json +2 -2
- package/ratings/Rating.svelte +2 -2
- package/sidebars/Sidebar.svelte +4 -13
- package/sidebars/SidebarDropdown.svelte +4 -26
- package/tabs/IconTabs.svelte +2 -2
- package/timelines/TimelineItemHorizontal.svelte +5 -19
- package/timelines/TimelineItemVertical.svelte +7 -33
- package/types.d.ts +11 -0
package/CHANGELOG.md
CHANGED
|
@@ -2,6 +2,20 @@
|
|
|
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.0](https://github.com/themesberg/flowbite-svelte/compare/v0.14.17...v0.15.0) (2022-04-25)
|
|
6
|
+
|
|
7
|
+
|
|
8
|
+
### Bug Fixes
|
|
9
|
+
|
|
10
|
+
* update props dir files ([e52cfcb](https://github.com/themesberg/flowbite-svelte/commit/e52cfcbba6ce7fae124803f670ba280e95c96e85))
|
|
11
|
+
|
|
12
|
+
### [0.14.17](https://github.com/themesberg/flowbite-svelte/compare/v0.14.16...v0.14.17) (2022-04-25)
|
|
13
|
+
|
|
14
|
+
|
|
15
|
+
### Features
|
|
16
|
+
|
|
17
|
+
* update heroicons ([9a96fca](https://github.com/themesberg/flowbite-svelte/commit/9a96fca12b1e3adc61088a56ae2c3d3ad65ceb67))
|
|
18
|
+
|
|
5
19
|
### [0.14.16](https://github.com/themesberg/flowbite-svelte/compare/v0.14.15...v0.14.16) (2022-04-24)
|
|
6
20
|
|
|
7
21
|
|
package/README.md
CHANGED
|
@@ -3,171 +3,168 @@
|
|
|
3
3
|
[](https://www.npmjs.com/package/flowbite-svelte)
|
|
4
4
|
[](https://www.npmjs.com/package/flowbite-svelte)
|
|
5
5
|
[](https://github.com/themesberg/flowbite-svelte/releases)
|
|
6
|
-
[](https://github.com/shinokada/svelte-feathericons/blob/main/LICENSE)
|
|
8
|
-
|
|
9
|
-
|
|
10
|
-
|
|
6
|
+
[](https://github.com/themesberg/flowbite-svelte/blob/main/LICENSE)
|
|
11
7
|
|
|
12
8
|
|
|
13
9
|
|
|
14
|
-
[Flowbite-Svelte](https://flowbite-svelte.
|
|
10
|
+
[Flowbite-Svelte](https://flowbite-svelte.com/) is an official Flowbite component library for Svelte. All interactivities are handled by Svelte.
|
|
15
11
|
|
|
16
12
|
## Installation
|
|
17
13
|
|
|
18
|
-
- [Getting started](https://flowbite-svelte.
|
|
19
|
-
- [About](https://flowbite-svelte.
|
|
20
|
-
- [Type list](https://flowbite-svelte.
|
|
21
|
-
- [CLI](https://flowbite-svelte.
|
|
14
|
+
- [Getting started](https://flowbite-svelte.com/getting-started)
|
|
15
|
+
- [About](https://flowbite-svelte.com/about)
|
|
16
|
+
- [Type list](https://flowbite-svelte.com/type-list)
|
|
17
|
+
- [CLI](https://flowbite-svelte.com/cli)
|
|
22
18
|
|
|
23
19
|
## Accordion components
|
|
24
20
|
|
|
25
|
-
- [Default accordion](https://flowbite-svelte.
|
|
26
|
-
- [Icon accordion](https://flowbite-svelte.
|
|
21
|
+
- [Default accordion](https://flowbite-svelte.com/accordions/default)
|
|
22
|
+
- [Icon accordion](https://flowbite-svelte.com/accordions/icon-accordion)
|
|
27
23
|
|
|
28
24
|
## Alert components
|
|
29
25
|
|
|
30
|
-
- [Default alert](https://flowbite-svelte.
|
|
31
|
-
- [Border alert](https://flowbite-svelte.
|
|
32
|
-
- [Information alert](https://flowbite-svelte.
|
|
33
|
-
- [Animation alert](https://flowbite-svelte.
|
|
26
|
+
- [Default alert](https://flowbite-svelte.com/alerts/default-alert)
|
|
27
|
+
- [Border alert](https://flowbite-svelte.com/alerts/border-alert)
|
|
28
|
+
- [Information alert](https://flowbite-svelte.com/alerts/information-alert)
|
|
29
|
+
- [Animation alert](https://flowbite-svelte.com/alerts/animation)
|
|
34
30
|
|
|
35
31
|
## Avatar components
|
|
36
32
|
|
|
37
|
-
- [Avatar](https://flowbite-svelte.
|
|
33
|
+
- [Avatar](https://flowbite-svelte.com/avatar)
|
|
38
34
|
|
|
39
35
|
## Badges components
|
|
40
36
|
|
|
41
|
-
- [Default badge](https://flowbite-svelte.
|
|
42
|
-
- [Icon badge](https://flowbite-svelte.
|
|
43
|
-
- [Link badge](https://flowbite-svelte.
|
|
37
|
+
- [Default badge](https://flowbite-svelte.com/badges/default)
|
|
38
|
+
- [Icon badge](https://flowbite-svelte.com/badges/badge-icon)
|
|
39
|
+
- [Link badge](https://flowbite-svelte.com/badges/badge-link)
|
|
44
40
|
|
|
45
41
|
## Breadcrumb components
|
|
46
42
|
|
|
47
|
-
- [Breadcrumb](https://flowbite-svelte.
|
|
43
|
+
- [Breadcrumb](https://flowbite-svelte.com/breadcrumbs)
|
|
48
44
|
|
|
49
45
|
## Button group compnents
|
|
50
46
|
|
|
51
|
-
- [Default button group](https://flowbite-svelte.
|
|
52
|
-
- [Outline button group](https://flowbite-svelte.
|
|
47
|
+
- [Default button group](https://flowbite-svelte.com/button-groups/default)
|
|
48
|
+
- [Outline button group](https://flowbite-svelte.com/button-groups/outline)
|
|
53
49
|
|
|
54
50
|
## Button components
|
|
55
51
|
|
|
56
|
-
- [Setup](https://flowbite-svelte.
|
|
57
|
-
- [Default Button](https://flowbite-svelte.
|
|
58
|
-
- [Colored Shadow Button](https://flowbite-svelte.
|
|
59
|
-
- [Gradient Duotone Button](https://flowbite-svelte.
|
|
60
|
-
- [Gradient Monochrome Button](https://flowbite-svelte.
|
|
61
|
-
- [Gradietn Outline Button](https://flowbite-svelte.
|
|
62
|
-
- [Outlined Button](https://flowbite-svelte.
|
|
63
|
-
- [Rounded Button](https://flowbite-svelte.
|
|
52
|
+
- [Setup](https://flowbite-svelte.com/buttons/setup)
|
|
53
|
+
- [Default Button](https://flowbite-svelte.com/buttons/default)
|
|
54
|
+
- [Colored Shadow Button](https://flowbite-svelte.com/buttons/colored-shadow)
|
|
55
|
+
- [Gradient Duotone Button](https://flowbite-svelte.com/buttons/gradient-duotone)
|
|
56
|
+
- [Gradient Monochrome Button](https://flowbite-svelte.com/buttons/gradient-monochrome)
|
|
57
|
+
- [Gradietn Outline Button](https://flowbite-svelte.com/buttons/gradient-outline)
|
|
58
|
+
- [Outlined Button](https://flowbite-svelte.com/buttons/outlined)
|
|
59
|
+
- [Rounded Button](https://flowbite-svelte.com/buttons/rounded)
|
|
64
60
|
|
|
65
61
|
## Card components
|
|
66
62
|
|
|
67
|
-
- [Default Card](https://flowbite-svelte.
|
|
68
|
-
- [CTA Card](https://flowbite-svelte.
|
|
69
|
-
- [Ecommerce Card](https://flowbite-svelte.
|
|
70
|
-
- [Horizontal Card](https://flowbite-svelte.
|
|
71
|
-
- [Interactive Card](https://flowbite-svelte.
|
|
72
|
-
- [List Card](https://flowbite-svelte.
|
|
73
|
-
- [Signin Card](https://flowbite-svelte.
|
|
63
|
+
- [Default Card](https://flowbite-svelte.com/cards/card)
|
|
64
|
+
- [CTA Card](https://flowbite-svelte.com/cards/cta)
|
|
65
|
+
- [Ecommerce Card](https://flowbite-svelte.com/cards/ecommerce)
|
|
66
|
+
- [Horizontal Card](https://flowbite-svelte.com/cards/horizontal)
|
|
67
|
+
- [Interactive Card](https://flowbite-svelte.com/cards/interactive)
|
|
68
|
+
- [List Card](https://flowbite-svelte.com/cards/list)
|
|
69
|
+
- [Signin Card](https://flowbite-svelte.com/cards/signin)
|
|
74
70
|
|
|
75
71
|
## Carousel components
|
|
76
72
|
|
|
77
|
-
- [Carousel](https://flowbite-svelte.
|
|
78
|
-
- [Carousel with transition](https://flowbite-svelte.
|
|
73
|
+
- [Carousel](https://flowbite-svelte.com/carousels/default)
|
|
74
|
+
- [Carousel with transition](https://flowbite-svelte.com/carousels/transition)
|
|
79
75
|
|
|
80
76
|
## Dark mode components
|
|
81
77
|
|
|
82
|
-
- [Dark mode](https://flowbite-svelte.
|
|
78
|
+
- [Dark mode](https://flowbite-svelte.com/darkmode)
|
|
83
79
|
|
|
84
80
|
## Dropdown components
|
|
85
81
|
|
|
86
|
-
- [Dropdown](https://flowbite-svelte.
|
|
87
|
-
- [Dropdown with Image](https://flowbite-svelte.
|
|
82
|
+
- [Dropdown](https://flowbite-svelte.com/dropdowns/default)
|
|
83
|
+
- [Dropdown with Image](https://flowbite-svelte.com/dropdowns/image)
|
|
88
84
|
|
|
89
85
|
## Form components
|
|
90
86
|
|
|
91
|
-
- [Forms](https://flowbite-svelte.
|
|
87
|
+
- [Forms](https://flowbite-svelte.com/forms)
|
|
92
88
|
|
|
93
89
|
## Footer components
|
|
94
90
|
|
|
95
|
-
- [Default Footer](https://flowbite-svelte.
|
|
96
|
-
- [Footer with Logo](https://flowbite-svelte.
|
|
97
|
-
- [Footer with Sitemap](https://flowbite-svelte.
|
|
98
|
-
- [Footer with Socialmedia](https://flowbite-svelte.
|
|
91
|
+
- [Default Footer](https://flowbite-svelte.com/footer/default)
|
|
92
|
+
- [Footer with Logo](https://flowbite-svelte.com/footer/logo)
|
|
93
|
+
- [Footer with Sitemap](https://flowbite-svelte.com/footer/sitemap)
|
|
94
|
+
- [Footer with Socialmedia](https://flowbite-svelte.com/footer/socialmedia)
|
|
99
95
|
|
|
100
96
|
## Icons components
|
|
101
97
|
|
|
102
|
-
- [Heroicons](https://flowbite-svelte.
|
|
103
|
-
- [Simpleicons](https://flowbite-svelte.
|
|
98
|
+
- [Heroicons](https://flowbite-svelte.com/icons/heroicons)
|
|
99
|
+
- [Simpleicons](https://flowbite-svelte.com/icons/simple-icons)
|
|
100
|
+
- [Feathericons](https://flowbite-svelte.com/icons/feathericons)
|
|
104
101
|
|
|
105
102
|
## List group components
|
|
106
103
|
|
|
107
|
-
- [List group](https://flowbite-svelte.
|
|
104
|
+
- [List group](https://flowbite-svelte.com/list-group)
|
|
108
105
|
|
|
109
106
|
## Modal components
|
|
110
107
|
|
|
111
|
-
- [Small Modal](https://flowbite-svelte.
|
|
112
|
-
- [Medium Modal](https://flowbite-svelte.
|
|
113
|
-
- [Large Modal](https://flowbite-svelte.
|
|
114
|
-
- [Extra Large Modal](https://flowbite-svelte.
|
|
115
|
-
- [Signin Modal](https://flowbite-svelte.
|
|
116
|
-
- [All Modals](https://flowbite-svelte.
|
|
108
|
+
- [Small Modal](https://flowbite-svelte.com/modals/small)
|
|
109
|
+
- [Medium Modal](https://flowbite-svelte.com/modals/medium)
|
|
110
|
+
- [Large Modal](https://flowbite-svelte.com/modals/large)
|
|
111
|
+
- [Extra Large Modal](https://flowbite-svelte.com/modals/extra-large)
|
|
112
|
+
- [Signin Modal](https://flowbite-svelte.com/modals/signin)
|
|
113
|
+
- [All Modals](https://flowbite-svelte.com/modals/all-modals)
|
|
117
114
|
|
|
118
115
|
## Navbar components
|
|
119
116
|
|
|
120
|
-
- [Default Navbar](https://flowbite-svelte.
|
|
121
|
-
- [Dropdown Navbar](https://flowbite-svelte.
|
|
117
|
+
- [Default Navbar](https://flowbite-svelte.com/navbars/default)
|
|
118
|
+
- [Dropdown Navbar](https://flowbite-svelte.com/navbars/dropdown)
|
|
122
119
|
|
|
123
120
|
## Pagination components
|
|
124
121
|
|
|
125
|
-
- [Pagination](https://flowbite-svelte.
|
|
122
|
+
- [Pagination](https://flowbite-svelte.com/paginations)
|
|
126
123
|
|
|
127
124
|
## Progress bar
|
|
128
125
|
|
|
129
|
-
- [Probress bar](https://flowbite-svelte.
|
|
126
|
+
- [Probress bar](https://flowbite-svelte.com/progressbars)
|
|
130
127
|
|
|
131
128
|
## Sidebar components
|
|
132
129
|
|
|
133
|
-
- [Sidebar](https://flowbite-svelte.
|
|
130
|
+
- [Sidebar](https://flowbite-svelte.com/sidebars)
|
|
134
131
|
|
|
135
132
|
## Spinner components
|
|
136
133
|
|
|
137
|
-
- [Default Spinner](https://flowbite-svelte.
|
|
138
|
-
- [Button Spinner](https://flowbite-svelte.
|
|
134
|
+
- [Default Spinner](https://flowbite-svelte.com/spinners/default)
|
|
135
|
+
- [Button Spinner](https://flowbite-svelte.com/spinners/button-spinner)
|
|
139
136
|
|
|
140
137
|
## Tab components
|
|
141
138
|
|
|
142
|
-
- [Default Tabs](https://flowbite-svelte.
|
|
143
|
-
- [Underline Tabs](https://flowbite-svelte.
|
|
144
|
-
- [Icon Tabs](https://flowbite-svelte.
|
|
145
|
-
- [Full width Tabs](https://flowbite-svelte.
|
|
146
|
-
- [Interactive Tabs](https://flowbite-svelte.
|
|
147
|
-
- [Interactive Tabs 2](https://flowbite-svelte.
|
|
148
|
-
- [Multiple Interactive Tabs](https://flowbite-svelte.
|
|
149
|
-
- [Pill Tabs](https://flowbite-svelte.
|
|
139
|
+
- [Default Tabs](https://flowbite-svelte.com/tabs/default-tabs)
|
|
140
|
+
- [Underline Tabs](https://flowbite-svelte.com/tabs/underline-tabs)
|
|
141
|
+
- [Icon Tabs](https://flowbite-svelte.com/tabs/icon-tabs)
|
|
142
|
+
- [Full width Tabs](https://flowbite-svelte.com/tabs/full-width-tabs)
|
|
143
|
+
- [Interactive Tabs](https://flowbite-svelte.com/tabs/interactive-tabs)
|
|
144
|
+
- [Interactive Tabs 2](https://flowbite-svelte.com/tabs/interactive-tabs-2)
|
|
145
|
+
- [Multiple Interactive Tabs](https://flowbite-svelte.com/tabs/multiple-interactive-tabs)
|
|
146
|
+
- [Pill Tabs](https://flowbite-svelte.com/tabs/pilltabs)
|
|
150
147
|
|
|
151
148
|
## Table components
|
|
152
149
|
|
|
153
|
-
- [Tables](https://flowbite-svelte.
|
|
150
|
+
- [Tables](https://flowbite-svelte.com/tables)
|
|
154
151
|
|
|
155
152
|
## Timeline components
|
|
156
153
|
|
|
157
|
-
- [Default timeline](https://flowbite-svelte.
|
|
158
|
-
- [Vetical timeline](https://flowbite-svelte.
|
|
159
|
-
- [Horizontal timeline](https://flowbite-svelte.
|
|
160
|
-
- [Activity log](https://flowbite-svelte.
|
|
161
|
-
- [Grouped timeline](https://flowbite-svelte.
|
|
154
|
+
- [Default timeline](https://flowbite-svelte.com/timelines/default)
|
|
155
|
+
- [Vetical timeline](https://flowbite-svelte.com/timelines/vertical)
|
|
156
|
+
- [Horizontal timeline](https://flowbite-svelte.com/timelines/horizontal)
|
|
157
|
+
- [Activity log](https://flowbite-svelte.com/timelines/activity)
|
|
158
|
+
- [Grouped timeline](https://flowbite-svelte.com/timelines/group)
|
|
162
159
|
|
|
163
160
|
## Toast components
|
|
164
161
|
|
|
165
|
-
- [Toast](https://flowbite-svelte.
|
|
162
|
+
- [Toast](https://flowbite-svelte.com/toasts)
|
|
166
163
|
|
|
167
164
|
## Tooltip components
|
|
168
165
|
|
|
169
|
-
- [Default Tooltip](https://flowbite-svelte.
|
|
170
|
-
- [Light Tooltip](https://flowbite-svelte.
|
|
166
|
+
- [Default Tooltip](https://flowbite-svelte.com/tooltips/default)
|
|
167
|
+
- [Light Tooltip](https://flowbite-svelte.com/tooltips/light)
|
|
171
168
|
|
|
172
169
|
## Tests
|
|
173
170
|
|
|
@@ -6,11 +6,11 @@ let classLast = 'inline-flex relative items-center py-2 px-4 text-sm font-medium
|
|
|
6
6
|
</script>
|
|
7
7
|
|
|
8
8
|
<div class="inline-flex rounded-md shadow-sm" role="group">
|
|
9
|
-
{#each buttons as { name, icon, href, rel }, i}
|
|
9
|
+
{#each buttons as { name, icon, href, rel, iconClass, iconSize }, i}
|
|
10
10
|
{#if i === 0}
|
|
11
11
|
<button type="button" class={classFirst}>
|
|
12
12
|
{#if icon}
|
|
13
|
-
<svelte:component this={icon}
|
|
13
|
+
<svelte:component this={icon} size={iconSize} class="mr-2 {iconClass}" />
|
|
14
14
|
{/if}
|
|
15
15
|
{#if href}
|
|
16
16
|
<a {href} {rel}>{name}</a>
|
|
@@ -21,7 +21,7 @@ let classLast = 'inline-flex relative items-center py-2 px-4 text-sm font-medium
|
|
|
21
21
|
{:else if i === btnLength - 1}
|
|
22
22
|
<button type="button" class={classLast}>
|
|
23
23
|
{#if icon}
|
|
24
|
-
<svelte:component this={icon}
|
|
24
|
+
<svelte:component this={icon} size={iconSize} class="mr-2 {iconClass}" />
|
|
25
25
|
{/if}
|
|
26
26
|
{#if href}
|
|
27
27
|
<a {href} {rel}>{name}</a>
|
|
@@ -32,7 +32,7 @@ let classLast = 'inline-flex relative items-center py-2 px-4 text-sm font-medium
|
|
|
32
32
|
{:else}
|
|
33
33
|
<button type="button" class={classMiddle}>
|
|
34
34
|
{#if icon}
|
|
35
|
-
<svelte:component this={icon}
|
|
35
|
+
<svelte:component this={icon} size={iconSize} class="mr-2 {iconClass}" />
|
|
36
36
|
{/if}
|
|
37
37
|
{#if href}
|
|
38
38
|
<a {href} {rel}>{name}</a>
|
|
@@ -6,11 +6,11 @@ let classLast = 'inline-flex items-center py-2 px-4 text-sm font-medium text-gra
|
|
|
6
6
|
</script>
|
|
7
7
|
|
|
8
8
|
<div class="inline-flex rounded-md shadow-sm">
|
|
9
|
-
{#each buttons as { href, name, rel, icon }, i}
|
|
9
|
+
{#each buttons as { href, name, rel, icon, iconClass, iconSize }, i}
|
|
10
10
|
{#if i === 0}
|
|
11
11
|
<button type="button" class={classFirst}>
|
|
12
12
|
{#if icon}
|
|
13
|
-
<svelte:component this={icon}
|
|
13
|
+
<svelte:component this={icon} size={iconSize} class="mr-2 {iconClass}" />
|
|
14
14
|
{/if}
|
|
15
15
|
{#if href}
|
|
16
16
|
<a {href} {rel}>{name}</a>
|
|
@@ -21,7 +21,7 @@ let classLast = 'inline-flex items-center py-2 px-4 text-sm font-medium text-gra
|
|
|
21
21
|
{:else if i === btnLength - 1}
|
|
22
22
|
<button type="button" class={classLast}>
|
|
23
23
|
{#if icon}
|
|
24
|
-
<svelte:component this={icon}
|
|
24
|
+
<svelte:component this={icon} size={iconSize} class="mr-2 {iconClass}" />
|
|
25
25
|
{/if}
|
|
26
26
|
{#if href}
|
|
27
27
|
<a {href} {rel}>{name}</a>
|
|
@@ -32,7 +32,7 @@ let classLast = 'inline-flex items-center py-2 px-4 text-sm font-medium text-gra
|
|
|
32
32
|
{:else}
|
|
33
33
|
<button type="button" class={classMiddle}>
|
|
34
34
|
{#if icon}
|
|
35
|
-
<svelte:component this={icon}
|
|
35
|
+
<svelte:component this={icon} size={iconSize} class="mr-2 {iconClass}" />
|
|
36
36
|
{/if}
|
|
37
37
|
{#if href}
|
|
38
38
|
<a {href} {rel}>{name}</a>
|
|
@@ -34,9 +34,7 @@ export let allRightsReserved = 'All Rights Reserved.';
|
|
|
34
34
|
{/each}
|
|
35
35
|
</div>
|
|
36
36
|
<div class={copyrightDivClass}>
|
|
37
|
-
<span class={copyrightClass}
|
|
38
|
-
>{copyrightYear} <a href={site.href}>{site.name}</a>. {allRightsReserved}
|
|
39
|
-
</span>
|
|
37
|
+
<span class={copyrightClass}>{copyrightYear} <a href={site.href}>{site.name}</a>. {allRightsReserved} </span>
|
|
40
38
|
<div class={socialMediaDivClass}>
|
|
41
39
|
{#each socialMedia as { href, icon }}
|
|
42
40
|
<a {href} class={socialMediaLinkClass}>
|
|
@@ -56,7 +56,7 @@ export let allRightsReserved = 'All Rights Reserved.';
|
|
|
56
56
|
<div class={socialMediaDivClass}>
|
|
57
57
|
{#each socialMedia as { href, icon }}
|
|
58
58
|
<a {href} class={socialMediaLinkClass}>
|
|
59
|
-
<svelte:component this={icon}
|
|
59
|
+
<svelte:component this={icon} class={iconClass} />
|
|
60
60
|
</a>
|
|
61
61
|
{/each}
|
|
62
62
|
</div>
|
package/forms/Iconinput.svelte
CHANGED
|
@@ -14,6 +14,7 @@ export let helperClass = 'mt-2 text-sm text-gray-500 dark:text-gray-400';
|
|
|
14
14
|
export let noBorderInputClass = 'bg-gray-50 border border-gray-300 text-gray-900 text-sm rounded-lg focus:ring-blue-500 focus:border-blue-500 block w-full pl-10 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';
|
|
15
15
|
export let noBorderDivClass = 'flex absolute inset-y-0 left-0 items-center pl-3 pointer-events-none';
|
|
16
16
|
export let iconClass = 'h-4 w-4 mr-2';
|
|
17
|
+
export let iconSize = 18;
|
|
17
18
|
function setType(node) {
|
|
18
19
|
node.type = type;
|
|
19
20
|
}
|
|
@@ -24,14 +25,14 @@ function setType(node) {
|
|
|
24
25
|
{#if noBorder}
|
|
25
26
|
<div class="relative">
|
|
26
27
|
<div class={noBorderDivClass}>
|
|
27
|
-
<svelte:component this={icon}
|
|
28
|
+
<svelte:component this={icon} size={iconSize} class={iconClass} />
|
|
28
29
|
</div>
|
|
29
30
|
<input bind:value use:setType {id} class={noBorderInputClass} {placeholder} />
|
|
30
31
|
</div>
|
|
31
32
|
{:else}
|
|
32
33
|
<div class="flex">
|
|
33
34
|
<span class={spanClass}>
|
|
34
|
-
<svelte:component this={icon}
|
|
35
|
+
<svelte:component this={icon} size={iconSize} class={iconClass} />
|
|
35
36
|
</span>
|
|
36
37
|
<input {type} {id} class={inputClass} {placeholder} />
|
|
37
38
|
</div>
|
package/list-group/List.svelte
CHANGED
|
@@ -6,11 +6,11 @@ const middleClass = `${common} border-b border-gray-200`;
|
|
|
6
6
|
</script>
|
|
7
7
|
|
|
8
8
|
<div class="w-48 text-gray-900 bg-white rounded-lg border border-gray-200 dark:bg-gray-700 dark:border-gray-600 dark:text-white">
|
|
9
|
-
{#each lists as { name, icon, href, rel }, i}
|
|
9
|
+
{#each lists as { name, icon, href, rel, iconClass, iconSize }, i}
|
|
10
10
|
{#if i === 0}
|
|
11
11
|
<button type="button" class={topClass}>
|
|
12
12
|
{#if icon}
|
|
13
|
-
<svelte:component this={icon}
|
|
13
|
+
<svelte:component this={icon} class="mr-2 {iconClass}" size={iconSize} />
|
|
14
14
|
{/if}
|
|
15
15
|
{#if href}
|
|
16
16
|
<a {href} {rel}>{name}</a>
|
|
@@ -21,7 +21,7 @@ const middleClass = `${common} border-b border-gray-200`;
|
|
|
21
21
|
{:else if i === lists.length - 1}
|
|
22
22
|
<button type="button" class={bottomClass}>
|
|
23
23
|
{#if icon}
|
|
24
|
-
<svelte:component this={icon}
|
|
24
|
+
<svelte:component this={icon} class="mr-2 {iconClass}" size={iconSize} />
|
|
25
25
|
{/if}
|
|
26
26
|
{#if href}
|
|
27
27
|
<a {href} {rel}>{name}</a>
|
|
@@ -32,7 +32,7 @@ const middleClass = `${common} border-b border-gray-200`;
|
|
|
32
32
|
{:else}
|
|
33
33
|
<button type="button" class={middleClass}>
|
|
34
34
|
{#if icon}
|
|
35
|
-
<svelte:component this={icon}
|
|
35
|
+
<svelte:component this={icon} class="mr-2 {iconClass}" size={iconSize} />
|
|
36
36
|
{/if}
|
|
37
37
|
{#if href}
|
|
38
38
|
<a {href} {rel}>{name}</a>
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "flowbite-svelte",
|
|
3
|
-
"version": "0.
|
|
3
|
+
"version": "0.15.0",
|
|
4
4
|
"description": "Flowbite components for Svelte",
|
|
5
5
|
"main": "./package/index.js",
|
|
6
6
|
"author": {
|
|
@@ -78,7 +78,7 @@
|
|
|
78
78
|
"url": "https://github.com/themesberg/flowbite-svelte"
|
|
79
79
|
},
|
|
80
80
|
"dependencies": {
|
|
81
|
-
"@codewithshin/svelte-heroicons": "^1.
|
|
81
|
+
"@codewithshin/svelte-heroicons": "^1.2.0",
|
|
82
82
|
"flowbite": "^1.4.2",
|
|
83
83
|
"svelte-collapse": "^0.0.4"
|
|
84
84
|
},
|
package/ratings/Rating.svelte
CHANGED
|
@@ -11,12 +11,12 @@ let grayStars = total - roundedRating;
|
|
|
11
11
|
<div class={divClass}>
|
|
12
12
|
{#each Array(roundedRating) as _, star}
|
|
13
13
|
<slot name="ratingUp">
|
|
14
|
-
<StarIconSolid
|
|
14
|
+
<StarIconSolid class="text-yellow-300 dark:text-yellow-200" />
|
|
15
15
|
</slot>
|
|
16
16
|
{/each}
|
|
17
17
|
{#each Array(grayStars) as _, star}
|
|
18
18
|
<slot name="ratingDown">
|
|
19
|
-
<StarIconSolid
|
|
19
|
+
<StarIconSolid class="text-gray-300 dark:text-gray-500" />
|
|
20
20
|
</slot>
|
|
21
21
|
{/each}
|
|
22
22
|
{#if $$slots.text}
|
package/sidebars/Sidebar.svelte
CHANGED
|
@@ -9,9 +9,7 @@ export let cta;
|
|
|
9
9
|
{#if site}
|
|
10
10
|
<a href={site.href} class="flex items-center pl-2.5 mb-5">
|
|
11
11
|
<img src={site.img} class="h-6 mr-3 sm:h-7" alt={site.name} />
|
|
12
|
-
<span class="self-center text-xl font-semibold whitespace-nowrap dark:text-white"
|
|
13
|
-
>{site.name}</span
|
|
14
|
-
>
|
|
12
|
+
<span class="self-center text-xl font-semibold whitespace-nowrap dark:text-white">{site.name}</span>
|
|
15
13
|
</a>
|
|
16
14
|
{/if}
|
|
17
15
|
<ul class="space-y-2">
|
|
@@ -20,13 +18,9 @@ export let cta;
|
|
|
20
18
|
<SidebarDropdown {link} />
|
|
21
19
|
{:else}
|
|
22
20
|
<li>
|
|
23
|
-
<a
|
|
24
|
-
href={link.href}
|
|
25
|
-
rel={link.rel}
|
|
26
|
-
class="flex items-center p-2 text-base font-normal text-gray-900 rounded-lg dark:text-white hover:bg-gray-100 dark:hover:bg-gray-700"
|
|
27
|
-
>
|
|
21
|
+
<a href={link.href} rel={link.rel} class="flex items-center p-2 text-base font-normal text-gray-900 rounded-lg dark:text-white hover:bg-gray-100 dark:hover:bg-gray-700">
|
|
28
22
|
{#if link.icon}
|
|
29
|
-
<svelte:component this={link.icon}
|
|
23
|
+
<svelte:component this={link.icon} size={link.iconSize} class="mr-2 {link.iconClass}" />
|
|
30
24
|
{/if}
|
|
31
25
|
<span class="ml-3">{link.name}</span>
|
|
32
26
|
{#if link.subtext}
|
|
@@ -40,10 +34,7 @@ export let cta;
|
|
|
40
34
|
{#if cta}
|
|
41
35
|
<div id="dropdown-cta" class="p-4 mt-6 bg-blue-50 rounded-lg dark:bg-blue-900" role="alert">
|
|
42
36
|
<div class="flex items-center mb-3">
|
|
43
|
-
<span
|
|
44
|
-
class="bg-orange-100 text-orange-800 text-sm font-semibold mr-2 px-2.5 py-0.5 rounded dark:bg-orange-200 dark:text-orange-900"
|
|
45
|
-
>{cta.label}</span
|
|
46
|
-
>
|
|
37
|
+
<span class="bg-orange-100 text-orange-800 text-sm font-semibold mr-2 px-2.5 py-0.5 rounded dark:bg-orange-200 dark:text-orange-900">{cta.label}</span>
|
|
47
38
|
</div>
|
|
48
39
|
<p class="mb-3 text-sm text-blue-900 dark:text-blue-400">
|
|
49
40
|
{cta.text}
|
|
@@ -9,40 +9,18 @@ const handleDropdown = (id) => {
|
|
|
9
9
|
</script>
|
|
10
10
|
|
|
11
11
|
<li>
|
|
12
|
-
<button
|
|
13
|
-
type="button"
|
|
14
|
-
on:click={() => handleDropdown(link.id)}
|
|
15
|
-
class="flex items-center p-2 w-full text-base font-normal text-gray-900 rounded-lg transition duration-75 group hover:bg-gray-100 dark:text-white dark:hover:bg-gray-700"
|
|
16
|
-
aria-controls="dropdown"
|
|
17
|
-
data-collapse-toggle="dropdown"
|
|
18
|
-
>
|
|
12
|
+
<button type="button" on:click={() => handleDropdown(link.id)} class="flex items-center p-2 w-full text-base font-normal text-gray-900 rounded-lg transition duration-75 group hover:bg-gray-100 dark:text-white dark:hover:bg-gray-700" aria-controls="dropdown" data-collapse-toggle="dropdown">
|
|
19
13
|
{#if link.icon}
|
|
20
|
-
<svelte:component this={link.icon}
|
|
14
|
+
<svelte:component this={link.icon} class="mr-4 {link.iconClass}" size={link.iconSize} />
|
|
21
15
|
{/if}
|
|
22
16
|
<span class="flex-1 ml-3 text-left whitespace-nowrap" sidebar-toggle-item="">{link.name}</span>
|
|
23
|
-
<svg
|
|
24
|
-
sidebar-toggle-item=""
|
|
25
|
-
class="w-6 h-6"
|
|
26
|
-
fill="currentColor"
|
|
27
|
-
viewBox="0 0 20 20"
|
|
28
|
-
xmlns="http://www.w3.org/2000/svg"
|
|
29
|
-
><path
|
|
30
|
-
fill-rule="evenodd"
|
|
31
|
-
d="M5.293 7.293a1 1 0 011.414 0L10 10.586l3.293-3.293a1 1 0 111.414 1.414l-4 4a1 1 0 01-1.414 0l-4-4a1 1 0 010-1.414z"
|
|
32
|
-
clip-rule="evenodd"
|
|
33
|
-
/></svg
|
|
34
|
-
>
|
|
17
|
+
<svg sidebar-toggle-item="" class="w-6 h-6" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><path fill-rule="evenodd" d="M5.293 7.293a1 1 0 011.414 0L10 10.586l3.293-3.293a1 1 0 111.414 1.414l-4 4a1 1 0 01-1.414 0l-4-4a1 1 0 010-1.414z" clip-rule="evenodd" /></svg>
|
|
35
18
|
</button>
|
|
36
19
|
{#if isOpen && link.id == activeDropdown}
|
|
37
20
|
<ul id="dropdown" class="py-2 space-y-2" transition:slide={{ duration: 500 }}>
|
|
38
21
|
{#each link.children as child}
|
|
39
22
|
<li>
|
|
40
|
-
<a
|
|
41
|
-
href={child.href}
|
|
42
|
-
rel={child.rel}
|
|
43
|
-
class="flex items-center p-2 pl-11 w-full text-base font-normal text-gray-900 rounded-lg transition duration-75 group hover:bg-gray-100 dark:text-white dark:hover:bg-gray-700"
|
|
44
|
-
>{child.name}</a
|
|
45
|
-
>
|
|
23
|
+
<a href={child.href} rel={child.rel} class="flex items-center p-2 pl-11 w-full text-base font-normal text-gray-900 rounded-lg transition duration-75 group hover:bg-gray-100 dark:text-white dark:hover:bg-gray-700">{child.name}</a>
|
|
46
24
|
</li>
|
|
47
25
|
{/each}
|
|
48
26
|
</ul>
|
package/tabs/IconTabs.svelte
CHANGED
|
@@ -4,10 +4,10 @@ export let iconClass = 'mr-2 w-5 h-5 text-gray-400 group-hover:text-gray-500 dar
|
|
|
4
4
|
|
|
5
5
|
<div class="border-b border-gray-200 dark:border-gray-700">
|
|
6
6
|
<ul class="flex flex-wrap -mb-px text-sm font-medium text-center text-gray-500 dark:text-gray-400">
|
|
7
|
-
{#each tabs as { name, active, href, rel, icon }}
|
|
7
|
+
{#each tabs as { name, active, href, rel, icon, iconSize }}
|
|
8
8
|
<li class="mr-2">
|
|
9
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 '}>
|
|
10
|
-
<svelte:component this={icon}
|
|
10
|
+
<svelte:component this={icon} size={iconSize} class={iconClass} />
|
|
11
11
|
{name}
|
|
12
12
|
</a>
|
|
13
13
|
</li>
|
|
@@ -1,35 +1,21 @@
|
|
|
1
1
|
<script>export let timelineItems;
|
|
2
2
|
</script>
|
|
3
3
|
|
|
4
|
-
{#each timelineItems as { date, title, text, icon }}
|
|
4
|
+
{#each timelineItems as { date, title, text, icon, iconClass, iconSize }}
|
|
5
5
|
<li class="relative mb-6 sm:mb-0">
|
|
6
6
|
<div class="flex items-center">
|
|
7
|
-
<div
|
|
8
|
-
class="flex z-10 justify-center items-center w-6 h-6 bg-blue-200 rounded-full ring-0 ring-white dark:bg-blue-900 sm:ring-8 dark:ring-gray-900 shrink-0"
|
|
9
|
-
>
|
|
7
|
+
<div class="flex z-10 justify-center items-center w-6 h-6 bg-blue-200 rounded-full ring-0 ring-white dark:bg-blue-900 sm:ring-8 dark:ring-gray-900 shrink-0">
|
|
10
8
|
{#if icon}
|
|
11
|
-
<svelte:component this={icon}
|
|
9
|
+
<svelte:component this={icon} size={iconSize} class={iconClass} />
|
|
12
10
|
{:else}
|
|
13
|
-
<svg
|
|
14
|
-
class="w-3 h-3 text-blue-600 dark:text-blue-300"
|
|
15
|
-
fill="currentColor"
|
|
16
|
-
viewBox="0 0 20 20"
|
|
17
|
-
xmlns="http://www.w3.org/2000/svg"
|
|
18
|
-
><path
|
|
19
|
-
fill-rule="evenodd"
|
|
20
|
-
d="M6 2a1 1 0 00-1 1v1H4a2 2 0 00-2 2v10a2 2 0 002 2h12a2 2 0 002-2V6a2 2 0 00-2-2h-1V3a1 1 0 10-2 0v1H7V3a1 1 0 00-1-1zm0 5a1 1 0 000 2h8a1 1 0 100-2H6z"
|
|
21
|
-
clip-rule="evenodd"
|
|
22
|
-
/></svg
|
|
23
|
-
>
|
|
11
|
+
<svg class="w-3 h-3 text-blue-600 dark:text-blue-300" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><path fill-rule="evenodd" d="M6 2a1 1 0 00-1 1v1H4a2 2 0 00-2 2v10a2 2 0 002 2h12a2 2 0 002-2V6a2 2 0 00-2-2h-1V3a1 1 0 10-2 0v1H7V3a1 1 0 00-1-1zm0 5a1 1 0 000 2h8a1 1 0 100-2H6z" clip-rule="evenodd" /></svg>
|
|
24
12
|
{/if}
|
|
25
13
|
</div>
|
|
26
14
|
<div class="hidden sm:flex w-full bg-gray-200 h-0.5 dark:bg-gray-700" />
|
|
27
15
|
</div>
|
|
28
16
|
<div class="mt-3 sm:pr-8">
|
|
29
17
|
<h3 class="text-lg font-semibold text-gray-900 dark:text-white">{title}</h3>
|
|
30
|
-
<time class="block mb-2 text-sm font-normal leading-none text-gray-400 dark:text-gray-500"
|
|
31
|
-
>{date}</time
|
|
32
|
-
>
|
|
18
|
+
<time class="block mb-2 text-sm font-normal leading-none text-gray-400 dark:text-gray-500">{date}</time>
|
|
33
19
|
<p class="text-base font-normal text-gray-500 dark:text-gray-400">
|
|
34
20
|
{text}
|
|
35
21
|
</p>
|
|
@@ -1,53 +1,27 @@
|
|
|
1
1
|
<script>export let timelineItems;
|
|
2
2
|
</script>
|
|
3
3
|
|
|
4
|
-
{#each timelineItems as { date, title, text, href, linkname, icon }}
|
|
4
|
+
{#each timelineItems as { date, title, text, href, linkname, icon, iconClass, iconSize }}
|
|
5
5
|
<li class="mb-10 ml-6">
|
|
6
|
-
<span
|
|
7
|
-
class="flex absolute -left-3 justify-center items-center w-6 h-6 bg-blue-200 rounded-full ring-8 ring-white dark:ring-gray-900 dark:bg-blue-900"
|
|
8
|
-
>
|
|
6
|
+
<span class="flex absolute -left-3 justify-center items-center w-6 h-6 bg-blue-200 rounded-full ring-8 ring-white dark:ring-gray-900 dark:bg-blue-900">
|
|
9
7
|
{#if icon}
|
|
10
|
-
<svelte:component this={icon}
|
|
8
|
+
<svelte:component this={icon} size={iconSize} class={iconClass} />
|
|
11
9
|
{:else}
|
|
12
|
-
<svg
|
|
13
|
-
class="w-3 h-3 text-blue-600 dark:text-blue-300"
|
|
14
|
-
fill="currentColor"
|
|
15
|
-
viewBox="0 0 20 20"
|
|
16
|
-
xmlns="http://www.w3.org/2000/svg"
|
|
17
|
-
><path
|
|
18
|
-
fill-rule="evenodd"
|
|
19
|
-
d="M6 2a1 1 0 00-1 1v1H4a2 2 0 00-2 2v10a2 2 0 002 2h12a2 2 0 002-2V6a2 2 0 00-2-2h-1V3a1 1 0 10-2 0v1H7V3a1 1 0 00-1-1zm0 5a1 1 0 000 2h8a1 1 0 100-2H6z"
|
|
20
|
-
clip-rule="evenodd"
|
|
21
|
-
/></svg
|
|
22
|
-
>
|
|
10
|
+
<svg width="20" height="20" class="text-blue-600 dark:text-blue-300" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><path fill-rule="evenodd" d="M6 2a1 1 0 00-1 1v1H4a2 2 0 00-2 2v10a2 2 0 002 2h12a2 2 0 002-2V6a2 2 0 00-2-2h-1V3a1 1 0 10-2 0v1H7V3a1 1 0 00-1-1zm0 5a1 1 0 000 2h8a1 1 0 100-2H6z" clip-rule="evenodd" /></svg>
|
|
23
11
|
{/if}
|
|
24
12
|
</span>
|
|
25
13
|
|
|
26
14
|
<h3 class="flex items-center mb-1 text-lg font-semibold text-gray-900 dark:text-white">
|
|
27
15
|
{title}
|
|
28
16
|
</h3>
|
|
29
|
-
<time class="block mb-2 text-sm font-normal leading-none text-gray-400 dark:text-gray-500"
|
|
30
|
-
>{date}</time
|
|
31
|
-
>
|
|
17
|
+
<time class="block mb-2 text-sm font-normal leading-none text-gray-400 dark:text-gray-500">{date}</time>
|
|
32
18
|
<p class="mb-4 text-base font-normal text-gray-500 dark:text-gray-400">
|
|
33
19
|
{text}
|
|
34
20
|
</p>
|
|
35
21
|
{#if href}
|
|
36
|
-
<a
|
|
37
|
-
{href}
|
|
38
|
-
class="inline-flex items-center py-2 px-4 text-sm font-medium text-gray-900 bg-white rounded-lg border border-gray-200 hover:bg-gray-100 hover:text-blue-700 focus:z-10 focus:ring-4 focus:outline-none focus:ring-gray-200 focus:text-blue-700 dark:bg-gray-800 dark:text-gray-400 dark:border-gray-600 dark:hover:text-white dark:hover:bg-gray-700 dark:focus:ring-gray-700"
|
|
22
|
+
<a {href} class="inline-flex items-center py-2 px-4 text-sm font-medium text-gray-900 bg-white rounded-lg border border-gray-200 hover:bg-gray-100 hover:text-blue-700 focus:z-10 focus:ring-4 focus:outline-none focus:ring-gray-200 focus:text-blue-700 dark:bg-gray-800 dark:text-gray-400 dark:border-gray-600 dark:hover:text-white dark:hover:bg-gray-700 dark:focus:ring-gray-700"
|
|
39
23
|
>{linkname}
|
|
40
|
-
<svg
|
|
41
|
-
class="ml-2 w-3 h-3"
|
|
42
|
-
fill="currentColor"
|
|
43
|
-
viewBox="0 0 20 20"
|
|
44
|
-
xmlns="http://www.w3.org/2000/svg"
|
|
45
|
-
><path
|
|
46
|
-
fill-rule="evenodd"
|
|
47
|
-
d="M12.293 5.293a1 1 0 011.414 0l4 4a1 1 0 010 1.414l-4 4a1 1 0 01-1.414-1.414L14.586 11H3a1 1 0 110-2h11.586l-2.293-2.293a1 1 0 010-1.414z"
|
|
48
|
-
clip-rule="evenodd"
|
|
49
|
-
/></svg
|
|
50
|
-
></a
|
|
24
|
+
<svg class="ml-2 w-3 h-3" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><path fill-rule="evenodd" d="M12.293 5.293a1 1 0 011.414 0l4 4a1 1 0 010 1.414l-4 4a1 1 0 01-1.414-1.414L14.586 11H3a1 1 0 110-2h11.586l-2.293-2.293a1 1 0 010-1.414z" clip-rule="evenodd" /></svg></a
|
|
51
25
|
>
|
|
52
26
|
{/if}
|
|
53
27
|
</li>
|
package/types.d.ts
CHANGED
|
@@ -28,6 +28,8 @@ export interface ButtonGroupType {
|
|
|
28
28
|
href?: string;
|
|
29
29
|
rel?: string;
|
|
30
30
|
icon?: typeof SvelteComponent;
|
|
31
|
+
iconSize?: number;
|
|
32
|
+
iconClass?: string;
|
|
31
33
|
}
|
|
32
34
|
export declare type ButtonType = 'button' | 'submit' | 'reset';
|
|
33
35
|
export declare type Buttontypes = 'blue' | 'blue-outline' | 'dark' | 'dark-outline' | 'light' | 'green' | 'green-outline' | 'red' | 'red-outline' | 'yellow' | 'yellow-outline' | 'purple' | 'purple-outline';
|
|
@@ -73,6 +75,7 @@ export interface IconTabType {
|
|
|
73
75
|
href: string;
|
|
74
76
|
rel?: string;
|
|
75
77
|
icon?: typeof SvelteComponent;
|
|
78
|
+
iconSize?: number;
|
|
76
79
|
}
|
|
77
80
|
export declare type ImgType = {
|
|
78
81
|
src: string;
|
|
@@ -126,6 +129,8 @@ export declare type SidebarType = {
|
|
|
126
129
|
name: string;
|
|
127
130
|
href?: string;
|
|
128
131
|
icon?: typeof SvelteComponent;
|
|
132
|
+
iconSize?: number;
|
|
133
|
+
iconClass?: string;
|
|
129
134
|
rel?: string;
|
|
130
135
|
children?: SidebarType[];
|
|
131
136
|
subtext?: HTMLElement;
|
|
@@ -146,6 +151,8 @@ export interface SocialMediaLinkType {
|
|
|
146
151
|
export interface SocialMediaType {
|
|
147
152
|
href: string;
|
|
148
153
|
icon: typeof SvelteComponent;
|
|
154
|
+
iconSize?: number;
|
|
155
|
+
iconClass?: string;
|
|
149
156
|
}
|
|
150
157
|
export interface TabHeadType {
|
|
151
158
|
name: string;
|
|
@@ -170,6 +177,8 @@ export interface TimelineItemVerticalType {
|
|
|
170
177
|
date: Date | string;
|
|
171
178
|
title: string;
|
|
172
179
|
icon?: typeof SvelteComponent;
|
|
180
|
+
iconSize?: number;
|
|
181
|
+
iconClass?: string;
|
|
173
182
|
href?: string;
|
|
174
183
|
linkname?: string;
|
|
175
184
|
text?: HTMLElement | string;
|
|
@@ -178,6 +187,8 @@ export interface TimelineItemHorizontalType {
|
|
|
178
187
|
date: Date | string;
|
|
179
188
|
title: string;
|
|
180
189
|
icon?: typeof SvelteComponent;
|
|
190
|
+
iconSize?: number;
|
|
191
|
+
iconClass?: string;
|
|
181
192
|
text?: HTMLElement | string;
|
|
182
193
|
}
|
|
183
194
|
export interface TransitionParamTypes {
|