flowbite-svelte 0.44.14 → 0.44.15
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/dist/breadcrumbs/Breadcrumb.svelte +3 -1
- package/dist/breadcrumbs/Breadcrumb.svelte.d.ts +2 -0
- package/dist/breadcrumbs/Breadcrumb.svelte.d.ts.map +1 -1
- package/dist/carousels/Carousel.svelte +7 -4
- package/dist/carousels/Carousel.svelte.d.ts +7 -0
- package/dist/carousels/Carousel.svelte.d.ts.map +1 -1
- package/dist/carousels/Slide.svelte +17 -0
- package/dist/carousels/Slide.svelte.d.ts +26 -0
- package/dist/carousels/Slide.svelte.d.ts.map +1 -0
- package/dist/carousels/Thumbnails.svelte +3 -1
- package/dist/carousels/Thumbnails.svelte.d.ts +2 -0
- package/dist/carousels/Thumbnails.svelte.d.ts.map +1 -1
- package/dist/darkmode/DarkMode.svelte +3 -1
- package/dist/darkmode/DarkMode.svelte.d.ts +2 -0
- package/dist/darkmode/DarkMode.svelte.d.ts.map +1 -1
- package/dist/paginations/Pagination.svelte +3 -1
- package/dist/paginations/Pagination.svelte.d.ts +2 -0
- package/dist/paginations/Pagination.svelte.d.ts.map +1 -1
- package/dist/sidebars/Sidebar.svelte +3 -1
- package/dist/sidebars/Sidebar.svelte.d.ts +2 -0
- package/dist/sidebars/Sidebar.svelte.d.ts.map +1 -1
- package/dist/tables/TableBodyRow.svelte +1 -1
- package/dist/tables/TableBodyRow.svelte.d.ts +1 -0
- package/dist/tables/TableBodyRow.svelte.d.ts.map +1 -1
- package/package.json +5 -1
|
@@ -3,10 +3,11 @@ export let solid = false;
|
|
|
3
3
|
export let navClass = 'flex';
|
|
4
4
|
export let solidClass = 'flex px-5 py-3 text-gray-700 border border-gray-200 rounded-lg bg-gray-50 dark:bg-gray-800 dark:border-gray-700';
|
|
5
5
|
export let olClass = 'inline-flex items-center space-x-1 md:space-x-3';
|
|
6
|
+
export let ariaLabel = 'Breadcrumb';
|
|
6
7
|
let classNav = solid ? solidClass : navClass;
|
|
7
8
|
</script>
|
|
8
9
|
|
|
9
|
-
<nav aria-label=
|
|
10
|
+
<nav aria-label={ariaLabel} {...$$restProps} class={twMerge(classNav, $$props.class)}>
|
|
10
11
|
<ol class={twMerge(olClass, $$props.classOl)}>
|
|
11
12
|
<slot />
|
|
12
13
|
</ol>
|
|
@@ -20,4 +21,5 @@ let classNav = solid ? solidClass : navClass;
|
|
|
20
21
|
@prop export let navClass: string = 'flex';
|
|
21
22
|
@prop export let solidClass: string = 'flex px-5 py-3 text-gray-700 border border-gray-200 rounded-lg bg-gray-50 dark:bg-gray-800 dark:border-gray-700';
|
|
22
23
|
@prop export let olClass: string = 'inline-flex items-center space-x-1 md:space-x-3';
|
|
24
|
+
@prop export let ariaLabel: string = 'Breadcrumb';
|
|
23
25
|
-->
|
|
@@ -6,6 +6,7 @@ declare const __propDef: {
|
|
|
6
6
|
navClass?: string | undefined;
|
|
7
7
|
solidClass?: string | undefined;
|
|
8
8
|
olClass?: string | undefined;
|
|
9
|
+
ariaLabel?: string | undefined;
|
|
9
10
|
};
|
|
10
11
|
events: {
|
|
11
12
|
[evt: string]: CustomEvent<any>;
|
|
@@ -24,6 +25,7 @@ export type BreadcrumbSlots = typeof __propDef.slots;
|
|
|
24
25
|
* @prop export let navClass: string = 'flex';
|
|
25
26
|
* @prop export let solidClass: string = 'flex px-5 py-3 text-gray-700 border border-gray-200 rounded-lg bg-gray-50 dark:bg-gray-800 dark:border-gray-700';
|
|
26
27
|
* @prop export let olClass: string = 'inline-flex items-center space-x-1 md:space-x-3';
|
|
28
|
+
* @prop export let ariaLabel: string = 'Breadcrumb';
|
|
27
29
|
*/
|
|
28
30
|
export default class Breadcrumb extends SvelteComponent<BreadcrumbProps, BreadcrumbEvents, BreadcrumbSlots> {
|
|
29
31
|
}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Breadcrumb.svelte.d.ts","sourceRoot":"","sources":["../../../../src/lib/breadcrumbs/Breadcrumb.svelte"],"names":[],"mappings":"AAAA,OAAO,EAAE,eAAe,EAAE,MAAM,QAAQ,CAEvC;
|
|
1
|
+
{"version":3,"file":"Breadcrumb.svelte.d.ts","sourceRoot":"","sources":["../../../../src/lib/breadcrumbs/Breadcrumb.svelte"],"names":[],"mappings":"AAAA,OAAO,EAAE,eAAe,EAAE,MAAM,QAAQ,CAEvC;AAwBD,QAAA,MAAM,SAAS;;;;;;;;;;;;;;;CAA+D,CAAC;AAC/E,MAAM,MAAM,eAAe,GAAG,OAAO,SAAS,CAAC,KAAK,CAAC;AACrD,MAAM,MAAM,gBAAgB,GAAG,OAAO,SAAS,CAAC,MAAM,CAAC;AACvD,MAAM,MAAM,eAAe,GAAG,OAAO,SAAS,CAAC,KAAK,CAAC;AAErD;;;;;;;;GAQG;AACH,MAAM,CAAC,OAAO,OAAO,UAAW,SAAQ,eAAe,CAAC,eAAe,EAAE,gBAAgB,EAAE,eAAe,CAAC;CAC1G"}
|
|
@@ -8,10 +8,12 @@ import { fade } from 'svelte/transition';
|
|
|
8
8
|
import { twMerge } from 'tailwind-merge';
|
|
9
9
|
import Controls from './Controls.svelte';
|
|
10
10
|
import Indicators from './Indicators.svelte';
|
|
11
|
+
import Slide from './Slide.svelte';
|
|
11
12
|
export let images;
|
|
12
13
|
export let index = 0;
|
|
13
14
|
export let transition = (x) => fade(x, { duration: 700, easing: quintOut });
|
|
14
15
|
export let duration = 0;
|
|
16
|
+
export let ariaLabel = 'Draggable Carousel';
|
|
15
17
|
// Carousel
|
|
16
18
|
let divClass = 'overflow-hidden relative rounded-lg h-56 sm:h-64 xl:h-80 2xl:h-96';
|
|
17
19
|
const dispatch = createEventDispatcher();
|
|
@@ -116,11 +118,11 @@ $: onDragStop =
|
|
|
116
118
|
|
|
117
119
|
<!-- The move listeners go here, so things keep working if the touch strays out of the element. -->
|
|
118
120
|
<svelte:document on:mousemove={onDragMove} on:mouseup={onDragStop} on:touchmove={onDragMove} on:touchend={onDragStop} />
|
|
119
|
-
<div bind:this={carouselDiv} class="relative" on:mousedown={onDragStart} on:touchstart|passive={onDragStart} role="button" aria-label=
|
|
121
|
+
<div bind:this={carouselDiv} class="relative" on:mousedown={onDragStart} on:touchstart|passive={onDragStart} role="button" aria-label={ariaLabel} tabindex="0">
|
|
120
122
|
<div style={`transform: translateX(${percentOffset}%)`} {...$$restProps} class={twMerge(divClass, activeDragGesture === undefined ? 'transition-transform' : '', $$props.class)} use:loop={duration}>
|
|
121
|
-
{
|
|
122
|
-
<
|
|
123
|
-
|
|
123
|
+
<slot name="slide" {Slide} {index}>
|
|
124
|
+
<Slide image={images[index]} {transition} />
|
|
125
|
+
</slot>
|
|
124
126
|
</div>
|
|
125
127
|
<slot {index} {Controls} {Indicators} />
|
|
126
128
|
</div>
|
|
@@ -133,4 +135,5 @@ $: onDragStop =
|
|
|
133
135
|
@prop export let index: number = 0;
|
|
134
136
|
@prop export let transition: TransitionFunc = (x) => fade(x, { duration: 700, easing: quintOut });
|
|
135
137
|
@prop export let duration: number = 0;
|
|
138
|
+
@prop export let ariaLabel: string = 'Draggable Carousel';
|
|
136
139
|
-->
|
|
@@ -7,6 +7,7 @@ import type { HTMLImgAttributes } from 'svelte/elements';
|
|
|
7
7
|
import { type TransitionConfig } from 'svelte/transition';
|
|
8
8
|
import Controls from './Controls.svelte';
|
|
9
9
|
import Indicators from './Indicators.svelte';
|
|
10
|
+
import Slide from './Slide.svelte';
|
|
10
11
|
declare const __propDef: {
|
|
11
12
|
props: {
|
|
12
13
|
[x: string]: any;
|
|
@@ -14,6 +15,7 @@ declare const __propDef: {
|
|
|
14
15
|
index?: number | undefined;
|
|
15
16
|
transition?: ((node: HTMLElement, params: any) => TransitionConfig) | undefined;
|
|
16
17
|
duration?: number | undefined;
|
|
18
|
+
ariaLabel?: string | undefined;
|
|
17
19
|
};
|
|
18
20
|
events: {
|
|
19
21
|
change: CustomEvent<any>;
|
|
@@ -21,6 +23,10 @@ declare const __propDef: {
|
|
|
21
23
|
[evt: string]: CustomEvent<any>;
|
|
22
24
|
};
|
|
23
25
|
slots: {
|
|
26
|
+
slide: {
|
|
27
|
+
Slide: typeof Slide;
|
|
28
|
+
index: number;
|
|
29
|
+
};
|
|
24
30
|
default: {
|
|
25
31
|
index: number;
|
|
26
32
|
Controls: typeof Controls;
|
|
@@ -38,6 +44,7 @@ export type CarouselSlots = typeof __propDef.slots;
|
|
|
38
44
|
* @prop export let index: number = 0;
|
|
39
45
|
* @prop export let transition: TransitionFunc = (x) => fade(x, { duration: 700, easing: quintOut });
|
|
40
46
|
* @prop export let duration: number = 0;
|
|
47
|
+
* @prop export let ariaLabel: string = 'Draggable Carousel';
|
|
41
48
|
*/
|
|
42
49
|
export default class Carousel extends SvelteComponent<CarouselProps, CarouselEvents, CarouselSlots> {
|
|
43
50
|
}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Carousel.svelte.d.ts","sourceRoot":"","sources":["../../../../src/lib/carousels/Carousel.svelte"],"names":[],"mappings":"AAAA,OAAO,EAAE,eAAe,EAAE,MAAM,QAAQ,CAEvC;AACC,MAAM,MAAM,KAAK,GAAG;IAClB,MAAM,EAAE,iBAAiB,EAAE,CAAC;IAC5B,KAAK,EAAE,MAAM,CAAC;CACf,CAAC;AAKJ,OAAO,KAAK,EAAE,iBAAiB,EAAE,MAAM,iBAAiB,CAAC;AAEzD,OAAO,EAAQ,KAAK,gBAAgB,EAAE,MAAM,mBAAmB,CAAC;AAEhE,OAAO,QAAQ,MAAM,mBAAmB,CAAC;AACzC,OAAO,UAAU,MAAM,qBAAqB,CAAC;
|
|
1
|
+
{"version":3,"file":"Carousel.svelte.d.ts","sourceRoot":"","sources":["../../../../src/lib/carousels/Carousel.svelte"],"names":[],"mappings":"AAAA,OAAO,EAAE,eAAe,EAAE,MAAM,QAAQ,CAEvC;AACC,MAAM,MAAM,KAAK,GAAG;IAClB,MAAM,EAAE,iBAAiB,EAAE,CAAC;IAC5B,KAAK,EAAE,MAAM,CAAC;CACf,CAAC;AAKJ,OAAO,KAAK,EAAE,iBAAiB,EAAE,MAAM,iBAAiB,CAAC;AAEzD,OAAO,EAAQ,KAAK,gBAAgB,EAAE,MAAM,mBAAmB,CAAC;AAEhE,OAAO,QAAQ,MAAM,mBAAmB,CAAC;AACzC,OAAO,UAAU,MAAM,qBAAqB,CAAC;AAC7C,OAAO,KAAK,MAAM,gBAAgB,CAAC;AAgKnC,QAAA,MAAM,SAAS;;;gBADkH,iBAAiB,EAAE;;6BAlJrH,WAAW,UAAU,GAAG,KAAK,gBAAgB;;;;;;;;;;;;;;;;;;;;CAmJE,CAAC;AAC/E,MAAM,MAAM,aAAa,GAAG,OAAO,SAAS,CAAC,KAAK,CAAC;AACnD,MAAM,MAAM,cAAc,GAAG,OAAO,SAAS,CAAC,MAAM,CAAC;AACrD,MAAM,MAAM,aAAa,GAAG,OAAO,SAAS,CAAC,KAAK,CAAC;AAEnD;;;;;;;;GAQG;AACH,MAAM,CAAC,OAAO,OAAO,QAAS,SAAQ,eAAe,CAAC,aAAa,EAAE,cAAc,EAAE,aAAa,CAAC;CAClG"}
|
|
@@ -0,0 +1,17 @@
|
|
|
1
|
+
<script>import { quintOut } from 'svelte/easing';
|
|
2
|
+
import { fade } from 'svelte/transition';
|
|
3
|
+
export let image;
|
|
4
|
+
export let transition = (x) => fade(x, { duration: 700, easing: quintOut });
|
|
5
|
+
</script>
|
|
6
|
+
|
|
7
|
+
{#key image}
|
|
8
|
+
<img alt="..." {...image} transition:transition={{}} class="absolute block w-full -translate-x-1/2 -translate-y-1/2 top-1/2 left-1/2 object-cover" />
|
|
9
|
+
{/key}
|
|
10
|
+
|
|
11
|
+
<!--
|
|
12
|
+
@component
|
|
13
|
+
[Go to docs](https://flowbite-svelte.com/)
|
|
14
|
+
## Props
|
|
15
|
+
@prop export let image: HTMLImgAttributes;
|
|
16
|
+
@prop export let transition: TransitionFunc = (x) => fade(x, { duration: 700, easing: quintOut });
|
|
17
|
+
-->
|
|
@@ -0,0 +1,26 @@
|
|
|
1
|
+
import { SvelteComponent } from "svelte";
|
|
2
|
+
import type { HTMLImgAttributes } from 'svelte/elements';
|
|
3
|
+
import { type TransitionConfig } from 'svelte/transition';
|
|
4
|
+
declare const __propDef: {
|
|
5
|
+
props: {
|
|
6
|
+
image: HTMLImgAttributes;
|
|
7
|
+
transition?: ((node: HTMLElement, params: any) => TransitionConfig) | undefined;
|
|
8
|
+
};
|
|
9
|
+
events: {
|
|
10
|
+
[evt: string]: CustomEvent<any>;
|
|
11
|
+
};
|
|
12
|
+
slots: {};
|
|
13
|
+
};
|
|
14
|
+
export type SlideProps = typeof __propDef.props;
|
|
15
|
+
export type SlideEvents = typeof __propDef.events;
|
|
16
|
+
export type SlideSlots = typeof __propDef.slots;
|
|
17
|
+
/**
|
|
18
|
+
* [Go to docs](https://flowbite-svelte.com/)
|
|
19
|
+
* ## Props
|
|
20
|
+
* @prop export let image: HTMLImgAttributes;
|
|
21
|
+
* @prop export let transition: TransitionFunc = (x) => fade(x, { duration: 700, easing: quintOut });
|
|
22
|
+
*/
|
|
23
|
+
export default class Slide extends SvelteComponent<SlideProps, SlideEvents, SlideSlots> {
|
|
24
|
+
}
|
|
25
|
+
export {};
|
|
26
|
+
//# sourceMappingURL=Slide.svelte.d.ts.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"Slide.svelte.d.ts","sourceRoot":"","sources":["../../../../src/lib/carousels/Slide.svelte"],"names":[],"mappings":"AAAA,OAAO,EAAE,eAAe,EAAE,MAAM,QAAQ,CAEvC;AAED,OAAO,KAAK,EAAE,iBAAiB,EAAE,MAAM,iBAAiB,CAAC;AACzD,OAAO,EAAQ,KAAK,gBAAgB,EAAE,MAAM,mBAAmB,CAAC;AAqBhE,QAAA,MAAM,SAAS;;eADoD,iBAAiB;6BAbrD,WAAW,UAAU,GAAG,KAAK,gBAAgB;;;;;;CAcrB,CAAC;AACxD,MAAM,MAAM,UAAU,GAAG,OAAO,SAAS,CAAC,KAAK,CAAC;AAChD,MAAM,MAAM,WAAW,GAAG,OAAO,SAAS,CAAC,MAAM,CAAC;AAClD,MAAM,MAAM,UAAU,GAAG,OAAO,SAAS,CAAC,KAAK,CAAC;AAEhD;;;;;GAKG;AACH,MAAM,CAAC,OAAO,OAAO,KAAM,SAAQ,eAAe,CAAC,UAAU,EAAE,WAAW,EAAE,UAAU,CAAC;CACtF"}
|
|
@@ -2,6 +2,7 @@
|
|
|
2
2
|
import Thumbnail from './Thumbnail.svelte';
|
|
3
3
|
export let images = [];
|
|
4
4
|
export let index = 0;
|
|
5
|
+
export let ariaLabel = 'Click to view image';
|
|
5
6
|
$: index = (index + images.length) % images.length;
|
|
6
7
|
</script>
|
|
7
8
|
|
|
@@ -9,7 +10,7 @@ $: index = (index + images.length) % images.length;
|
|
|
9
10
|
{#each images as image, idx}
|
|
10
11
|
{@const selected = index === idx}
|
|
11
12
|
<!-- svelte-ignore a11y-click-events-have-key-events -->
|
|
12
|
-
<button on:click={() => (index = idx)} aria-label=
|
|
13
|
+
<button on:click={() => (index = idx)} aria-label={ariaLabel}>
|
|
13
14
|
<slot {Thumbnail} {image} {selected}>
|
|
14
15
|
<Thumbnail {...image} {selected} />
|
|
15
16
|
</slot>
|
|
@@ -23,4 +24,5 @@ $: index = (index + images.length) % images.length;
|
|
|
23
24
|
## Props
|
|
24
25
|
@prop export let images: HTMLImgAttributes[] = [];
|
|
25
26
|
@prop export let index: number = 0;
|
|
27
|
+
@prop export let ariaLabel: string = 'Click to view image';
|
|
26
28
|
-->
|
|
@@ -6,6 +6,7 @@ declare const __propDef: {
|
|
|
6
6
|
[x: string]: any;
|
|
7
7
|
images?: HTMLImgAttributes[] | undefined;
|
|
8
8
|
index?: number | undefined;
|
|
9
|
+
ariaLabel?: string | undefined;
|
|
9
10
|
};
|
|
10
11
|
events: {
|
|
11
12
|
[evt: string]: CustomEvent<any>;
|
|
@@ -26,6 +27,7 @@ export type ThumbnailsSlots = typeof __propDef.slots;
|
|
|
26
27
|
* ## Props
|
|
27
28
|
* @prop export let images: HTMLImgAttributes[] = [];
|
|
28
29
|
* @prop export let index: number = 0;
|
|
30
|
+
* @prop export let ariaLabel: string = 'Click to view image';
|
|
29
31
|
*/
|
|
30
32
|
export default class Thumbnails extends SvelteComponent<ThumbnailsProps, ThumbnailsEvents, ThumbnailsSlots> {
|
|
31
33
|
}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Thumbnails.svelte.d.ts","sourceRoot":"","sources":["../../../../src/lib/carousels/Thumbnails.svelte"],"names":[],"mappings":"AAAA,OAAO,EAAE,eAAe,EAAE,MAAM,QAAQ,CAEvC;AACD,OAAO,KAAK,EAAE,iBAAiB,EAAE,MAAM,iBAAiB,CAAC;AAEzD,OAAO,SAAS,MAAM,oBAAoB,CAAC;
|
|
1
|
+
{"version":3,"file":"Thumbnails.svelte.d.ts","sourceRoot":"","sources":["../../../../src/lib/carousels/Thumbnails.svelte"],"names":[],"mappings":"AAAA,OAAO,EAAE,eAAe,EAAE,MAAM,QAAQ,CAEvC;AACD,OAAO,KAAK,EAAE,iBAAiB,EAAE,MAAM,iBAAiB,CAAC;AAEzD,OAAO,SAAS,MAAM,oBAAoB,CAAC;AA8B3C,QAAA,MAAM,SAAS;;;;;;;;;;;;;;;;;CAA+D,CAAC;AAC/E,MAAM,MAAM,eAAe,GAAG,OAAO,SAAS,CAAC,KAAK,CAAC;AACrD,MAAM,MAAM,gBAAgB,GAAG,OAAO,SAAS,CAAC,MAAM,CAAC;AACvD,MAAM,MAAM,eAAe,GAAG,OAAO,SAAS,CAAC,KAAK,CAAC;AAErD;;;;;;GAMG;AACH,MAAM,CAAC,OAAO,OAAO,UAAW,SAAQ,eAAe,CAAC,eAAe,EAAE,gBAAgB,EAAE,eAAe,CAAC;CAC1G"}
|
|
@@ -1,6 +1,7 @@
|
|
|
1
1
|
<script>import { twMerge } from 'tailwind-merge';
|
|
2
2
|
export let btnClass = 'text-gray-500 dark:text-gray-400 hover:bg-gray-100 dark:hover:bg-gray-700 focus:outline-none focus:ring-4 focus:ring-gray-200 dark:focus:ring-gray-700 rounded-lg text-sm p-2.5';
|
|
3
3
|
export let size = 'md';
|
|
4
|
+
export let ariaLabel = 'Dark mode';
|
|
4
5
|
const sizes = {
|
|
5
6
|
sm: 'w-4 h-4',
|
|
6
7
|
md: 'w-5 h-5',
|
|
@@ -24,7 +25,7 @@ const toggleTheme = () => {
|
|
|
24
25
|
</script>
|
|
25
26
|
</svelte:head>
|
|
26
27
|
|
|
27
|
-
<button on:click={toggleTheme} aria-label=
|
|
28
|
+
<button on:click={toggleTheme} aria-label={ariaLabel} type="button" {...$$restProps} class={twMerge(btnClass, $$props.class)}>
|
|
28
29
|
<span class="hidden dark:block">
|
|
29
30
|
<slot name="lightIcon">
|
|
30
31
|
<svg class={sizes[size]} fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg">
|
|
@@ -51,4 +52,5 @@ const toggleTheme = () => {
|
|
|
51
52
|
## Props
|
|
52
53
|
@prop export let btnClass: string = 'text-gray-500 dark:text-gray-400 hover:bg-gray-100 dark:hover:bg-gray-700 focus:outline-none focus:ring-4 focus:ring-gray-200 dark:focus:ring-gray-700 rounded-lg text-sm p-2.5';
|
|
53
54
|
@prop export let size: 'sm' | 'md' | 'lg' = 'md';
|
|
55
|
+
@prop export let ariaLabel: string = 'Dark mode';
|
|
54
56
|
-->
|
|
@@ -4,6 +4,7 @@ declare const __propDef: {
|
|
|
4
4
|
[x: string]: any;
|
|
5
5
|
btnClass?: string | undefined;
|
|
6
6
|
size?: "sm" | "lg" | "md" | undefined;
|
|
7
|
+
ariaLabel?: string | undefined;
|
|
7
8
|
};
|
|
8
9
|
events: {
|
|
9
10
|
[evt: string]: CustomEvent<any>;
|
|
@@ -21,6 +22,7 @@ export type DarkModeSlots = typeof __propDef.slots;
|
|
|
21
22
|
* ## Props
|
|
22
23
|
* @prop export let btnClass: string = 'text-gray-500 dark:text-gray-400 hover:bg-gray-100 dark:hover:bg-gray-700 focus:outline-none focus:ring-4 focus:ring-gray-200 dark:focus:ring-gray-700 rounded-lg text-sm p-2.5';
|
|
23
24
|
* @prop export let size: 'sm' | 'md' | 'lg' = 'md';
|
|
25
|
+
* @prop export let ariaLabel: string = 'Dark mode';
|
|
24
26
|
*/
|
|
25
27
|
export default class DarkMode extends SvelteComponent<DarkModeProps, DarkModeEvents, DarkModeSlots> {
|
|
26
28
|
}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"DarkMode.svelte.d.ts","sourceRoot":"","sources":["../../../../src/lib/darkmode/DarkMode.svelte"],"names":[],"mappings":"AAAA,OAAO,EAAE,eAAe,EAAE,MAAM,QAAQ,CAEvC;
|
|
1
|
+
{"version":3,"file":"DarkMode.svelte.d.ts","sourceRoot":"","sources":["../../../../src/lib/darkmode/DarkMode.svelte"],"names":[],"mappings":"AAAA,OAAO,EAAE,eAAe,EAAE,MAAM,QAAQ,CAEvC;AAgDD,QAAA,MAAM,SAAS;;;;;;;;;;;;;;CAA+D,CAAC;AAC/E,MAAM,MAAM,aAAa,GAAG,OAAO,SAAS,CAAC,KAAK,CAAC;AACnD,MAAM,MAAM,cAAc,GAAG,OAAO,SAAS,CAAC,MAAM,CAAC;AACrD,MAAM,MAAM,aAAa,GAAG,OAAO,SAAS,CAAC,KAAK,CAAC;AAEnD;;;;;;GAMG;AACH,MAAM,CAAC,OAAO,OAAO,QAAS,SAAQ,eAAe,CAAC,aAAa,EAAE,cAAc,EAAE,aAAa,CAAC;CAClG"}
|
|
@@ -7,6 +7,7 @@ export let normalClass = 'text-gray-500 bg-white hover:bg-gray-100 hover:text-gr
|
|
|
7
7
|
export let ulClass = 'inline-flex -space-x-px items-center';
|
|
8
8
|
export let table = false;
|
|
9
9
|
export let large = false;
|
|
10
|
+
export let ariaLabel = 'Page navigation';
|
|
10
11
|
const dispatch = createEventDispatcher();
|
|
11
12
|
setContext('group', true);
|
|
12
13
|
setContext('table', table);
|
|
@@ -18,7 +19,7 @@ const next = () => {
|
|
|
18
19
|
};
|
|
19
20
|
</script>
|
|
20
21
|
|
|
21
|
-
<nav aria-label=
|
|
22
|
+
<nav aria-label={ariaLabel}>
|
|
22
23
|
<ul class={twMerge(ulClass, table && 'divide-x dark divide-gray-700 dark:divide-gray-700', $$props.class)}>
|
|
23
24
|
<li>
|
|
24
25
|
<PaginationItem {large} on:click={previous} {normalClass} class={table ? 'rounded-l' : 'rounded-l-lg'}>
|
|
@@ -50,4 +51,5 @@ const next = () => {
|
|
|
50
51
|
@prop export let ulClass: string = 'inline-flex -space-x-px items-center';
|
|
51
52
|
@prop export let table: boolean = false;
|
|
52
53
|
@prop export let large: boolean = false;
|
|
54
|
+
@prop export let ariaLabel: string = 'Page navigation';
|
|
53
55
|
-->
|
|
@@ -9,6 +9,7 @@ declare const __propDef: {
|
|
|
9
9
|
ulClass?: string | undefined;
|
|
10
10
|
table?: boolean | undefined;
|
|
11
11
|
large?: boolean | undefined;
|
|
12
|
+
ariaLabel?: string | undefined;
|
|
12
13
|
};
|
|
13
14
|
events: {
|
|
14
15
|
blur: FocusEvent;
|
|
@@ -43,6 +44,7 @@ export type PaginationSlots = typeof __propDef.slots;
|
|
|
43
44
|
* @prop export let ulClass: string = 'inline-flex -space-x-px items-center';
|
|
44
45
|
* @prop export let table: boolean = false;
|
|
45
46
|
* @prop export let large: boolean = false;
|
|
47
|
+
* @prop export let ariaLabel: string = 'Page navigation';
|
|
46
48
|
*/
|
|
47
49
|
export default class Pagination extends SvelteComponent<PaginationProps, PaginationEvents, PaginationSlots> {
|
|
48
50
|
}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Pagination.svelte.d.ts","sourceRoot":"","sources":["../../../../src/lib/paginations/Pagination.svelte"],"names":[],"mappings":"AAAA,OAAO,EAAE,eAAe,EAAE,MAAM,QAAQ,CAEvC;AAGD,OAAO,KAAK,EAAE,QAAQ,EAAE,MAAM,UAAU,CAAC;
|
|
1
|
+
{"version":3,"file":"Pagination.svelte.d.ts","sourceRoot":"","sources":["../../../../src/lib/paginations/Pagination.svelte"],"names":[],"mappings":"AAAA,OAAO,EAAE,eAAe,EAAE,MAAM,QAAQ,CAEvC;AAGD,OAAO,KAAK,EAAE,QAAQ,EAAE,MAAM,UAAU,CAAC;AAwDzC,QAAA,MAAM,SAAS;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAA+D,CAAC;AAC/E,MAAM,MAAM,eAAe,GAAG,OAAO,SAAS,CAAC,KAAK,CAAC;AACrD,MAAM,MAAM,gBAAgB,GAAG,OAAO,SAAS,CAAC,MAAM,CAAC;AACvD,MAAM,MAAM,eAAe,GAAG,OAAO,SAAS,CAAC,KAAK,CAAC;AAErD;;;;;;;;;;GAUG;AACH,MAAM,CAAC,OAAO,OAAO,UAAW,SAAQ,eAAe,CAAC,eAAe,EAAE,gBAAgB,EAAE,eAAe,CAAC;CAC1G"}
|
|
@@ -9,6 +9,7 @@ export let activeUrl = '';
|
|
|
9
9
|
export let asideClass = 'w-64';
|
|
10
10
|
export let nonActiveClass = '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';
|
|
11
11
|
export let activeClass = 'flex items-center p-2 text-base font-normal text-gray-900 bg-gray-200 dark:bg-gray-700 rounded-lg dark:text-white hover:bg-gray-100 dark:hover:bg-gray-700';
|
|
12
|
+
export let ariaLabel = 'Sidebar';
|
|
12
13
|
setContext('sidebarContext', { activeClass, nonActiveClass });
|
|
13
14
|
$: {
|
|
14
15
|
activeUrlStore.set(activeUrl);
|
|
@@ -16,7 +17,7 @@ $: {
|
|
|
16
17
|
setContext('activeUrl', activeUrlStore);
|
|
17
18
|
</script>
|
|
18
19
|
|
|
19
|
-
<aside {...$$restProps} class={twMerge(asideClass, $$props.class)} aria-label=
|
|
20
|
+
<aside {...$$restProps} class={twMerge(asideClass, $$props.class)} aria-label={ariaLabel}>
|
|
20
21
|
<slot />
|
|
21
22
|
</aside>
|
|
22
23
|
|
|
@@ -28,4 +29,5 @@ setContext('activeUrl', activeUrlStore);
|
|
|
28
29
|
@prop export let asideClass: string = 'w-64';
|
|
29
30
|
@prop export let nonActiveClass: string = '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';
|
|
30
31
|
@prop export let activeClass: string = 'flex items-center p-2 text-base font-normal text-gray-900 bg-gray-200 dark:bg-gray-700 rounded-lg dark:text-white hover:bg-gray-100 dark:hover:bg-gray-700';
|
|
32
|
+
@prop export let ariaLabel: string = 'Sidebar';
|
|
31
33
|
-->
|
|
@@ -10,6 +10,7 @@ declare const __propDef: {
|
|
|
10
10
|
asideClass?: string | undefined;
|
|
11
11
|
nonActiveClass?: string | undefined;
|
|
12
12
|
activeClass?: string | undefined;
|
|
13
|
+
ariaLabel?: string | undefined;
|
|
13
14
|
};
|
|
14
15
|
events: {
|
|
15
16
|
[evt: string]: CustomEvent<any>;
|
|
@@ -28,6 +29,7 @@ export type SidebarSlots = typeof __propDef.slots;
|
|
|
28
29
|
* @prop export let asideClass: string = 'w-64';
|
|
29
30
|
* @prop export let nonActiveClass: string = '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';
|
|
30
31
|
* @prop export let activeClass: string = 'flex items-center p-2 text-base font-normal text-gray-900 bg-gray-200 dark:bg-gray-700 rounded-lg dark:text-white hover:bg-gray-100 dark:hover:bg-gray-700';
|
|
32
|
+
* @prop export let ariaLabel: string = 'Sidebar';
|
|
31
33
|
*/
|
|
32
34
|
export default class Sidebar extends SvelteComponent<SidebarProps, SidebarEvents, SidebarSlots> {
|
|
33
35
|
}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Sidebar.svelte.d.ts","sourceRoot":"","sources":["../../../../src/lib/sidebars/Sidebar.svelte"],"names":[],"mappings":"AAAA,OAAO,EAAE,eAAe,EAAE,MAAM,QAAQ,CAEvC;AACC,MAAM,MAAM,WAAW,GAAG;IACxB,WAAW,EAAE,MAAM,CAAC;IACpB,cAAc,EAAE,MAAM,CAAC;CACxB,CAAC;
|
|
1
|
+
{"version":3,"file":"Sidebar.svelte.d.ts","sourceRoot":"","sources":["../../../../src/lib/sidebars/Sidebar.svelte"],"names":[],"mappings":"AAAA,OAAO,EAAE,eAAe,EAAE,MAAM,QAAQ,CAEvC;AACC,MAAM,MAAM,WAAW,GAAG;IACxB,WAAW,EAAE,MAAM,CAAC;IACpB,cAAc,EAAE,MAAM,CAAC;CACxB,CAAC;AAsCJ,QAAA,MAAM,SAAS;;;;;;;;;;;;;;;CAA+D,CAAC;AAC/E,MAAM,MAAM,YAAY,GAAG,OAAO,SAAS,CAAC,KAAK,CAAC;AAClD,MAAM,MAAM,aAAa,GAAG,OAAO,SAAS,CAAC,MAAM,CAAC;AACpD,MAAM,MAAM,YAAY,GAAG,OAAO,SAAS,CAAC,KAAK,CAAC;AAElD;;;;;;;;GAQG;AACH,MAAM,CAAC,OAAO,OAAO,OAAQ,SAAQ,eAAe,CAAC,YAAY,EAAE,aAAa,EAAE,YAAY,CAAC;CAC9F"}
|
|
@@ -32,7 +32,7 @@ let trClass;
|
|
|
32
32
|
$: trClass = twMerge([!getContext('noborder') && 'border-b last:border-b-0', colors[color], getContext('hoverable') && hoverColors[color], getContext('striped') && stripColors[color], $$props.class]);
|
|
33
33
|
</script>
|
|
34
34
|
|
|
35
|
-
<tr {...$$restProps} class={trClass} on:click on:contextmenu>
|
|
35
|
+
<tr {...$$restProps} class={trClass} on:click on:contextmenu on:dblclick>
|
|
36
36
|
<slot />
|
|
37
37
|
</tr>
|
|
38
38
|
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"TableBodyRow.svelte.d.ts","sourceRoot":"","sources":["../../../../src/lib/tables/TableBodyRow.svelte"],"names":[],"mappings":"AAAA,OAAO,EAAE,eAAe,EAAE,MAAM,QAAQ,CAEvC;AAoDD,QAAA,MAAM,SAAS
|
|
1
|
+
{"version":3,"file":"TableBodyRow.svelte.d.ts","sourceRoot":"","sources":["../../../../src/lib/tables/TableBodyRow.svelte"],"names":[],"mappings":"AAAA,OAAO,EAAE,eAAe,EAAE,MAAM,QAAQ,CAEvC;AAoDD,QAAA,MAAM,SAAS;;;;;;;;;;;;;;;CAA+D,CAAC;AAC/E,MAAM,MAAM,iBAAiB,GAAG,OAAO,SAAS,CAAC,KAAK,CAAC;AACvD,MAAM,MAAM,kBAAkB,GAAG,OAAO,SAAS,CAAC,MAAM,CAAC;AACzD,MAAM,MAAM,iBAAiB,GAAG,OAAO,SAAS,CAAC,KAAK,CAAC;AAEvD;;;;GAIG;AACH,MAAM,CAAC,OAAO,OAAO,YAAa,SAAQ,eAAe,CAAC,iBAAiB,EAAE,kBAAkB,EAAE,iBAAiB,CAAC;CAClH"}
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "flowbite-svelte",
|
|
3
|
-
"version": "0.44.
|
|
3
|
+
"version": "0.44.15",
|
|
4
4
|
"description": "Flowbite components for Svelte",
|
|
5
5
|
"main": "dist/index.js",
|
|
6
6
|
"author": {
|
|
@@ -218,6 +218,10 @@
|
|
|
218
218
|
"types": "./dist/carousels/Indicators.svelte.d.ts",
|
|
219
219
|
"svelte": "./dist/carousels/Indicators.svelte"
|
|
220
220
|
},
|
|
221
|
+
"./Slide.svelte": {
|
|
222
|
+
"types": "./dist/carousels/Slide.svelte.d.ts",
|
|
223
|
+
"svelte": "./dist/carousels/Slide.svelte"
|
|
224
|
+
},
|
|
221
225
|
"./Thumbnail.svelte": {
|
|
222
226
|
"types": "./dist/carousels/Thumbnail.svelte.d.ts",
|
|
223
227
|
"svelte": "./dist/carousels/Thumbnail.svelte"
|