flowbite-svelte 0.25.19 → 0.25.20
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
CHANGED
|
@@ -2,6 +2,15 @@
|
|
|
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.25.20](https://github.com/themesberg/flowbite-svelte/compare/v0.25.19...v0.25.20) (2022-08-27)
|
|
6
|
+
|
|
7
|
+
|
|
8
|
+
### Bug Fixes
|
|
9
|
+
|
|
10
|
+
* index page space ([6ab9a19](https://github.com/themesberg/flowbite-svelte/commit/6ab9a19e004fc19ba3bd696acedbc5bbc0ced966))
|
|
11
|
+
* remove heros from: ([7055f4c](https://github.com/themesberg/flowbite-svelte/commit/7055f4c5ddaa91e15cabaf7d1112a149cf81374d))
|
|
12
|
+
* remove heros icon from Carousel ([2c7d4c9](https://github.com/themesberg/flowbite-svelte/commit/2c7d4c9a6edc1a4dd4005e5dcf46fec8b5dc0a52))
|
|
13
|
+
|
|
5
14
|
### [0.25.19](https://github.com/themesberg/flowbite-svelte/compare/v0.25.18...v0.25.19) (2022-08-27)
|
|
6
15
|
|
|
7
16
|
|
|
@@ -1,5 +1,4 @@
|
|
|
1
|
-
<script>import
|
|
2
|
-
import Slide from './Slide.svelte';
|
|
1
|
+
<script>import Slide from './Slide.svelte';
|
|
3
2
|
import Thumbnail from './Thumbnail.svelte';
|
|
4
3
|
import Caption from './Caption.svelte';
|
|
5
4
|
import Indicator from './Indicator.svelte';
|
|
@@ -10,12 +9,6 @@ export let images;
|
|
|
10
9
|
export let slideControls = true;
|
|
11
10
|
export let loop = false;
|
|
12
11
|
export let duration = 2000;
|
|
13
|
-
export let icons = {
|
|
14
|
-
next: ChevronRight,
|
|
15
|
-
prev: ChevronLeft
|
|
16
|
-
};
|
|
17
|
-
export let iconSize = 24;
|
|
18
|
-
export let iconClass = 'text-white sm:w-6 sm:h-6 dark:text-gray-300';
|
|
19
12
|
// Carousel
|
|
20
13
|
export let divClass = 'overflow-hidden relative h-56 rounded-lg sm:h-64 xl:h-80 2xl:h-96';
|
|
21
14
|
export let indicatorDivClass = 'flex absolute bottom-5 left-1/2 z-30 space-x-3 -translate-x-1/2';
|
|
@@ -64,8 +57,7 @@ if (loop) {
|
|
|
64
57
|
{name}
|
|
65
58
|
selected={imageShowingIndex === id}
|
|
66
59
|
on:click={() => goToSlide(id)}
|
|
67
|
-
{indicatorClass}
|
|
68
|
-
/>
|
|
60
|
+
{indicatorClass} />
|
|
69
61
|
{/each}
|
|
70
62
|
</div>
|
|
71
63
|
{/if}
|
|
@@ -75,12 +67,25 @@ if (loop) {
|
|
|
75
67
|
on:click={prevSlide}
|
|
76
68
|
type="button"
|
|
77
69
|
class="flex absolute top-0 left-0 z-30 justify-center items-center px-4 h-full cursor-pointer group focus:outline-none"
|
|
78
|
-
data-carousel-prev
|
|
79
|
-
>
|
|
70
|
+
data-carousel-prev>
|
|
80
71
|
<span
|
|
81
|
-
class="inline-flex justify-center items-center w-8 h-8 rounded-full sm:w-10 sm:h-10 bg-white/30 dark:bg-gray-800/30 group-hover:bg-white/50 dark:group-hover:bg-gray-800/60 group-focus:ring-4 group-focus:ring-white dark:group-focus:ring-gray-800/70 group-focus:outline-none"
|
|
82
|
-
|
|
83
|
-
|
|
72
|
+
class="inline-flex justify-center items-center w-8 h-8 rounded-full sm:w-10 sm:h-10 bg-white/30 dark:bg-gray-800/30 group-hover:bg-white/50 dark:group-hover:bg-gray-800/60 group-focus:ring-4 group-focus:ring-white dark:group-focus:ring-gray-800/70 group-focus:outline-none">
|
|
73
|
+
{#if $$slots.previous}
|
|
74
|
+
<slot name="previous" />
|
|
75
|
+
{:else}
|
|
76
|
+
<svg
|
|
77
|
+
aria-hidden="true"
|
|
78
|
+
class="w-5 h-5 text-white sm:w-6 sm:h-6 dark:text-gray-300"
|
|
79
|
+
fill="none"
|
|
80
|
+
stroke="currentColor"
|
|
81
|
+
viewBox="0 0 24 24"
|
|
82
|
+
xmlns="http://www.w3.org/2000/svg"
|
|
83
|
+
><path
|
|
84
|
+
stroke-linecap="round"
|
|
85
|
+
stroke-linejoin="round"
|
|
86
|
+
stroke-width="2"
|
|
87
|
+
d="M15 19l-7-7 7-7" /></svg>
|
|
88
|
+
{/if}
|
|
84
89
|
<span class="hidden">Previous</span>
|
|
85
90
|
</span>
|
|
86
91
|
</button>
|
|
@@ -88,12 +93,25 @@ if (loop) {
|
|
|
88
93
|
on:click={nextSlide}
|
|
89
94
|
type="button"
|
|
90
95
|
class="flex absolute top-0 right-0 z-30 justify-center items-center px-4 h-full cursor-pointer group focus:outline-none"
|
|
91
|
-
data-carousel-next
|
|
92
|
-
>
|
|
96
|
+
data-carousel-next>
|
|
93
97
|
<span
|
|
94
|
-
class="inline-flex justify-center items-center w-8 h-8 rounded-full sm:w-10 sm:h-10 bg-white/30 dark:bg-gray-800/30 group-hover:bg-white/50 dark:group-hover:bg-gray-800/60 group-focus:ring-4 group-focus:ring-white dark:group-focus:ring-gray-800/70 group-focus:outline-none"
|
|
95
|
-
|
|
96
|
-
|
|
98
|
+
class="inline-flex justify-center items-center w-8 h-8 rounded-full sm:w-10 sm:h-10 bg-white/30 dark:bg-gray-800/30 group-hover:bg-white/50 dark:group-hover:bg-gray-800/60 group-focus:ring-4 group-focus:ring-white dark:group-focus:ring-gray-800/70 group-focus:outline-none">
|
|
99
|
+
{#if $$slots.next}
|
|
100
|
+
<slot name="next" />
|
|
101
|
+
{:else}
|
|
102
|
+
<svg
|
|
103
|
+
aria-hidden="true"
|
|
104
|
+
class="w-5 h-5 text-white sm:w-6 sm:h-6 dark:text-gray-300"
|
|
105
|
+
fill="none"
|
|
106
|
+
stroke="currentColor"
|
|
107
|
+
viewBox="0 0 24 24"
|
|
108
|
+
xmlns="http://www.w3.org/2000/svg"
|
|
109
|
+
><path
|
|
110
|
+
stroke-linecap="round"
|
|
111
|
+
stroke-linejoin="round"
|
|
112
|
+
stroke-width="2"
|
|
113
|
+
d="M9 5l7 7-7 7" /></svg>
|
|
114
|
+
{/if}
|
|
97
115
|
<span class="hidden">Next</span>
|
|
98
116
|
</span>
|
|
99
117
|
</button>
|
|
@@ -114,8 +132,7 @@ if (loop) {
|
|
|
114
132
|
titleLink={attribution}
|
|
115
133
|
{id}
|
|
116
134
|
selected={imageShowingIndex === id}
|
|
117
|
-
on:click={() => goToSlide(id)}
|
|
118
|
-
/>
|
|
135
|
+
on:click={() => goToSlide(id)} />
|
|
119
136
|
{/each}
|
|
120
137
|
</div>
|
|
121
138
|
{/if}
|
|
@@ -1,5 +1,4 @@
|
|
|
1
1
|
import { SvelteComponentTyped } from "svelte";
|
|
2
|
-
import type { CarouselIconType } from '../types';
|
|
3
2
|
declare const __propDef: {
|
|
4
3
|
props: {
|
|
5
4
|
showIndicators?: boolean;
|
|
@@ -9,9 +8,6 @@ declare const __propDef: {
|
|
|
9
8
|
slideControls?: boolean;
|
|
10
9
|
loop?: boolean;
|
|
11
10
|
duration?: number;
|
|
12
|
-
icons?: CarouselIconType;
|
|
13
|
-
iconSize?: number;
|
|
14
|
-
iconClass?: string;
|
|
15
11
|
divClass?: string;
|
|
16
12
|
indicatorDivClass?: string;
|
|
17
13
|
captionClass?: string;
|
|
@@ -21,7 +17,10 @@ declare const __propDef: {
|
|
|
21
17
|
events: {
|
|
22
18
|
[evt: string]: CustomEvent<any>;
|
|
23
19
|
};
|
|
24
|
-
slots: {
|
|
20
|
+
slots: {
|
|
21
|
+
previous: {};
|
|
22
|
+
next: {};
|
|
23
|
+
};
|
|
25
24
|
};
|
|
26
25
|
export declare type CarouselProps = typeof __propDef.props;
|
|
27
26
|
export declare type CarouselEvents = typeof __propDef.events;
|
|
@@ -1,5 +1,4 @@
|
|
|
1
|
-
<script>import {
|
|
2
|
-
import { fade, blur, fly, slide } from 'svelte/transition';
|
|
1
|
+
<script>import { fade, blur, fly, slide } from 'svelte/transition';
|
|
3
2
|
import Slide from './Slide.svelte';
|
|
4
3
|
import Thumbnail from './Thumbnail.svelte';
|
|
5
4
|
import Caption from './Caption.svelte';
|
|
@@ -16,13 +15,6 @@ export let duration = 2000;
|
|
|
16
15
|
// Carousel
|
|
17
16
|
export let divClass = 'overflow-hidden relative h-56 rounded-lg sm:h-64 xl:h-80 2xl:h-96';
|
|
18
17
|
export let indicatorDivClass = 'flex absolute bottom-5 left-1/2 z-30 space-x-3 -translate-x-1/2';
|
|
19
|
-
// Slide controllers
|
|
20
|
-
export let icons = {
|
|
21
|
-
next: ChevronRight,
|
|
22
|
-
prev: ChevronLeft
|
|
23
|
-
};
|
|
24
|
-
export let iconSize = 24;
|
|
25
|
-
export let iconClass = 'text-white sm:w-6 sm:h-6 dark:text-gray-300';
|
|
26
18
|
// Caption
|
|
27
19
|
export let captionClass = 'h-10 bg-gray-300 dark:bg-gray-700 dark:text-white p-2 my-2 text-center';
|
|
28
20
|
// Indicator
|
|
@@ -88,8 +80,7 @@ if (loop) {
|
|
|
88
80
|
{name}
|
|
89
81
|
selected={imageShowingIndex === id}
|
|
90
82
|
on:click={() => goToSlide(id)}
|
|
91
|
-
{indicatorClass}
|
|
92
|
-
/>
|
|
83
|
+
{indicatorClass} />
|
|
93
84
|
{/each}
|
|
94
85
|
</div>
|
|
95
86
|
{/if}
|
|
@@ -99,12 +90,25 @@ if (loop) {
|
|
|
99
90
|
on:click={prevSlide}
|
|
100
91
|
type="button"
|
|
101
92
|
class="flex absolute top-0 left-0 z-30 justify-center items-center px-4 h-full cursor-pointer group focus:outline-none"
|
|
102
|
-
data-carousel-prev
|
|
103
|
-
>
|
|
93
|
+
data-carousel-prev>
|
|
104
94
|
<span
|
|
105
|
-
class="inline-flex justify-center items-center w-8 h-8 rounded-full sm:w-10 sm:h-10 bg-white/30 dark:bg-gray-800/30 group-hover:bg-white/50 dark:group-hover:bg-gray-800/60 group-focus:ring-4 group-focus:ring-white dark:group-focus:ring-gray-800/70 group-focus:outline-none"
|
|
106
|
-
|
|
107
|
-
|
|
95
|
+
class="inline-flex justify-center items-center w-8 h-8 rounded-full sm:w-10 sm:h-10 bg-white/30 dark:bg-gray-800/30 group-hover:bg-white/50 dark:group-hover:bg-gray-800/60 group-focus:ring-4 group-focus:ring-white dark:group-focus:ring-gray-800/70 group-focus:outline-none">
|
|
96
|
+
{#if $$slots.previous}
|
|
97
|
+
<slot name="previous" />
|
|
98
|
+
{:else}
|
|
99
|
+
<svg
|
|
100
|
+
aria-hidden="true"
|
|
101
|
+
class="w-5 h-5 text-white sm:w-6 sm:h-6 dark:text-gray-300"
|
|
102
|
+
fill="none"
|
|
103
|
+
stroke="currentColor"
|
|
104
|
+
viewBox="0 0 24 24"
|
|
105
|
+
xmlns="http://www.w3.org/2000/svg"
|
|
106
|
+
><path
|
|
107
|
+
stroke-linecap="round"
|
|
108
|
+
stroke-linejoin="round"
|
|
109
|
+
stroke-width="2"
|
|
110
|
+
d="M15 19l-7-7 7-7" /></svg>
|
|
111
|
+
{/if}
|
|
108
112
|
<span class="hidden">Previous</span>
|
|
109
113
|
</span>
|
|
110
114
|
</button>
|
|
@@ -112,12 +116,25 @@ if (loop) {
|
|
|
112
116
|
on:click={nextSlide}
|
|
113
117
|
type="button"
|
|
114
118
|
class="flex absolute top-0 right-0 z-30 justify-center items-center px-4 h-full cursor-pointer group focus:outline-none"
|
|
115
|
-
data-carousel-next
|
|
116
|
-
>
|
|
119
|
+
data-carousel-next>
|
|
117
120
|
<span
|
|
118
|
-
class="inline-flex justify-center items-center w-8 h-8 rounded-full sm:w-10 sm:h-10 bg-white/30 dark:bg-gray-800/30 group-hover:bg-white/50 dark:group-hover:bg-gray-800/60 group-focus:ring-4 group-focus:ring-white dark:group-focus:ring-gray-800/70 group-focus:outline-none"
|
|
119
|
-
|
|
120
|
-
|
|
121
|
+
class="inline-flex justify-center items-center w-8 h-8 rounded-full sm:w-10 sm:h-10 bg-white/30 dark:bg-gray-800/30 group-hover:bg-white/50 dark:group-hover:bg-gray-800/60 group-focus:ring-4 group-focus:ring-white dark:group-focus:ring-gray-800/70 group-focus:outline-none">
|
|
122
|
+
{#if $$slots.next}
|
|
123
|
+
<slot name="next" />
|
|
124
|
+
{:else}
|
|
125
|
+
<svg
|
|
126
|
+
aria-hidden="true"
|
|
127
|
+
class="w-5 h-5 text-white sm:w-6 sm:h-6 dark:text-gray-300"
|
|
128
|
+
fill="none"
|
|
129
|
+
stroke="currentColor"
|
|
130
|
+
viewBox="0 0 24 24"
|
|
131
|
+
xmlns="http://www.w3.org/2000/svg"
|
|
132
|
+
><path
|
|
133
|
+
stroke-linecap="round"
|
|
134
|
+
stroke-linejoin="round"
|
|
135
|
+
stroke-width="2"
|
|
136
|
+
d="M9 5l7 7-7 7" /></svg>
|
|
137
|
+
{/if}
|
|
121
138
|
<span class="hidden">Next</span>
|
|
122
139
|
</span>
|
|
123
140
|
</button>
|
|
@@ -138,8 +155,7 @@ if (loop) {
|
|
|
138
155
|
titleLink={attribution}
|
|
139
156
|
{id}
|
|
140
157
|
selected={imageShowingIndex === id}
|
|
141
|
-
on:click={() => goToSlide(id)}
|
|
142
|
-
/>
|
|
158
|
+
on:click={() => goToSlide(id)} />
|
|
143
159
|
{/each}
|
|
144
160
|
</div>
|
|
145
161
|
{/if}
|
|
@@ -1,5 +1,4 @@
|
|
|
1
1
|
import { SvelteComponentTyped } from "svelte";
|
|
2
|
-
import type { CarouselIconType } from '../types';
|
|
3
2
|
import type { TransitionTypes, TransitionParamTypes } from '../types';
|
|
4
3
|
declare const __propDef: {
|
|
5
4
|
props: {
|
|
@@ -14,16 +13,16 @@ declare const __propDef: {
|
|
|
14
13
|
duration?: number;
|
|
15
14
|
divClass?: string;
|
|
16
15
|
indicatorDivClass?: string;
|
|
17
|
-
icons?: CarouselIconType;
|
|
18
|
-
iconSize?: number;
|
|
19
|
-
iconClass?: string;
|
|
20
16
|
captionClass?: string;
|
|
21
17
|
indicatorClass?: string;
|
|
22
18
|
};
|
|
23
19
|
events: {
|
|
24
20
|
[evt: string]: CustomEvent<any>;
|
|
25
21
|
};
|
|
26
|
-
slots: {
|
|
22
|
+
slots: {
|
|
23
|
+
previous: {};
|
|
24
|
+
next: {};
|
|
25
|
+
};
|
|
27
26
|
};
|
|
28
27
|
export declare type CarouselTransitionProps = typeof __propDef.props;
|
|
29
28
|
export declare type CarouselTransitionEvents = typeof __propDef.events;
|
package/package.json
CHANGED
package/toasts/Toast.svelte
CHANGED
|
@@ -18,7 +18,8 @@ const colors = {
|
|
|
18
18
|
gray: 'text-gray-500 bg-gray-100 dark:bg-gray-800 dark:text-gray-200',
|
|
19
19
|
purple: 'text-purple-500 bg-purple-100 dark:bg-purple-800 dark:text-purple-200',
|
|
20
20
|
indigo: 'text-indigo-500 bg-indigo-100 dark:bg-indigo-800 dark:text-indigo-200',
|
|
21
|
-
yellow: 'text-yellow-500 bg-yellow-100 dark:bg-yellow-800 dark:text-yellow-200'
|
|
21
|
+
yellow: 'text-yellow-500 bg-yellow-100 dark:bg-yellow-800 dark:text-yellow-200',
|
|
22
|
+
pink: 'text-pink-500 bg-pink-100 dark:bg-pink-800 dark:text-pink-200'
|
|
22
23
|
};
|
|
23
24
|
// have a custom transition function that returns the desired transition
|
|
24
25
|
let transitionFunc;
|