flowbite-svelte 0.23.2 → 0.23.3

package/paginations/Pagination.svelte

@@ -20,7 +20,20 @@ const next = () => {
 	<ul class={ulClass}>
 		<li>
 			{#if icon}
-				<a href="/" on:click|preventDefault={previous} class={iconPreviousClass}>
+				<a
+					href="/"
+					on:click|preventDefault={previous}
+					class={iconPreviousClass}
+					on:blur
+					on:click
+					on:focus
+					on:keydown
+					on:keypress
+					on:keyup
+					on:mouseenter
+					on:mouseleave
+					on:mouseover
+				>
 					<span class="sr-only">Previous</span>
 					<svg
 						class="w-5 h-5"
@@ -35,17 +48,55 @@ const next = () => {
 					>
 				</a>
 			{:else}
-				<a href="/" on:click|preventDefault={previous} class={previousClass}>Previous</a>
+				<a
+					href="/"
+					on:click|preventDefault={previous}
+					class={previousClass}
+					on:blur
+					on:click
+					on:focus
+					on:keydown
+					on:keypress
+					on:keyup
+					on:mouseenter
+					on:mouseleave
+					on:mouseover>Previous</a
+				>
 			{/if}
 		</li>
 		{#each pages as { pageNum, href }}
 			<li>
-				<a {href} class={pageClass}>{pageNum}</a>
+				<a
+					{href}
+					class={pageClass}
+					on:blur
+					on:click
+					on:focus
+					on:keydown
+					on:keypress
+					on:keyup
+					on:mouseenter
+					on:mouseleave
+					on:mouseover>{pageNum}</a
+				>
 			</li>
 		{/each}
 		<li>
 			{#if icon}
-				<a href="/" on:click|preventDefault={next} class={iconNextClass}>
+				<a
+					href="/"
+					on:click|preventDefault={next}
+					class={iconNextClass}
+					on:blur
+					on:click
+					on:focus
+					on:keydown
+					on:keypress
+					on:keyup
+					on:mouseenter
+					on:mouseleave
+					on:mouseover
+				>
 					<span class="sr-only">Next</span>
 					<svg
 						class="w-5 h-5"
@@ -60,7 +111,20 @@ const next = () => {
 					>
 				</a>
 			{:else}
-				<a href="/" on:click|preventDefault={next} class={nextClass}>Next</a>
+				<a
+					href="/"
+					on:click|preventDefault={next}
+					class={nextClass}
+					on:blur
+					on:click
+					on:focus
+					on:keydown
+					on:keypress
+					on:keyup
+					on:mouseenter
+					on:mouseleave
+					on:mouseover>Next</a
+				>
 			{/if}
 		</li>
 	</ul>

package/paginations/Pagination.svelte.d.ts

@@ -12,6 +12,15 @@ declare const __propDef: {
         iconNextClass?: string;
     };
     events: {
+        blur: FocusEvent;
+        click: MouseEvent;
+        focus: FocusEvent;
+        keydown: KeyboardEvent;
+        keypress: KeyboardEvent;
+        keyup: KeyboardEvent;
+        mouseenter: MouseEvent;
+        mouseleave: MouseEvent;
+        mouseover: MouseEvent;
         previous: CustomEvent<any>;
         next: CustomEvent<any>;
     } & {

package/paginations/Previous.svelte

@@ -10,7 +10,20 @@ if (icon) {
 }
 </script>
 
-<a href="/" on:click|preventDefault={previous} class={previousClass}>
+<a
+	href="/"
+	on:click|preventDefault={previous}
+	class={previousClass}
+	on:blur
+	on:click
+	on:focus
+	on:keydown
+	on:keypress
+	on:keyup
+	on:mouseenter
+	on:mouseleave
+	on:mouseover
+>
 	{#if icon}
 		<svg
 			class="mr-2 w-5 h-5"

package/paginations/Previous.svelte.d.ts

@@ -5,6 +5,15 @@ declare const __propDef: {
         previousClass?: string;
     };
     events: {
+        blur: FocusEvent;
+        click: MouseEvent;
+        focus: FocusEvent;
+        keydown: KeyboardEvent;
+        keypress: KeyboardEvent;
+        keyup: KeyboardEvent;
+        mouseenter: MouseEvent;
+        mouseleave: MouseEvent;
+        mouseover: MouseEvent;
         previous: CustomEvent<any>;
     } & {
         [evt: string]: CustomEvent<any>;

package/paginations/TableData.svelte

@@ -22,7 +22,35 @@ const next = () => {
 	{/if}
 	<!-- Buttons -->
 	<div class="inline-flex mt-2">
-		<button on:click={previous} class={btnPreClass}> Prev </button>
-		<button on:click={next} class={btnNextClass}> Next </button>
+		<button
+			on:click={previous}
+			class={btnPreClass}
+			on:blur
+			on:click
+			on:focus
+			on:keydown
+			on:keypress
+			on:keyup
+			on:mouseenter
+			on:mouseleave
+			on:mouseover
+		>
+			Prev
+		</button>
+		<button
+			on:click={next}
+			class={btnNextClass}
+			on:blur
+			on:click
+			on:focus
+			on:keydown
+			on:keypress
+			on:keyup
+			on:mouseenter
+			on:mouseleave
+			on:mouseover
+		>
+			Next
+		</button>
 	</div>
 </div>

package/paginations/TableData.svelte.d.ts

@@ -10,6 +10,15 @@ declare const __propDef: {
         btnNextClass?: string;
     };
     events: {
+        blur: FocusEvent;
+        click: MouseEvent;
+        focus: FocusEvent;
+        keydown: KeyboardEvent;
+        keypress: KeyboardEvent;
+        keyup: KeyboardEvent;
+        mouseenter: MouseEvent;
+        mouseleave: MouseEvent;
+        mouseover: MouseEvent;
         previous: CustomEvent<any>;
         next: CustomEvent<any>;
     } & {

package/sidebars/SidebarDropdownItem.svelte

@@ -8,15 +8,15 @@ export let label = '';
 	<a
 		{...$$restProps}
 		{href}
+		on:blur
 		on:click
-		on:change
+		on:focus
 		on:keydown
+		on:keypress
 		on:keyup
-		on:focus
-		on:blur
 		on:mouseenter
 		on:mouseleave
-		on:mouseenter
+		on:mouseover
 		class={classNames(aClass, $$props.class)}>{label}</a
 	>
 </li>

package/sidebars/SidebarDropdownItem.svelte.d.ts

@@ -7,14 +7,15 @@ declare const __propDef: {
         label?: string;
     };
     events: {
+        blur: FocusEvent;
         click: MouseEvent;
-        change: Event;
+        focus: FocusEvent;
         keydown: KeyboardEvent;
+        keypress: KeyboardEvent;
         keyup: KeyboardEvent;
-        focus: FocusEvent;
-        blur: FocusEvent;
         mouseenter: MouseEvent;
         mouseleave: MouseEvent;
+        mouseover: MouseEvent;
     } & {
         [evt: string]: CustomEvent<any>;
     };

package/sidebars/SidebarItem.svelte

@@ -10,15 +10,15 @@ export let icon;
 	<a
 		{...$$restProps}
 		{href}
+		on:blur
 		on:click
-		on:change
+		on:focus
 		on:keydown
+		on:keypress
 		on:keyup
-		on:focus
-		on:blur
 		on:mouseenter
 		on:mouseleave
-		on:mouseenter
+		on:mouseover
 		class={classNames(aClass, $$props.class)}
 	>
 		<svelte:component

package/sidebars/SidebarItem.svelte.d.ts

@@ -10,14 +10,15 @@ declare const __propDef: {
         icon: IconType;
     };
     events: {
+        blur: FocusEvent;
         click: MouseEvent;
-        change: Event;
+        focus: FocusEvent;
         keydown: KeyboardEvent;
+        keypress: KeyboardEvent;
         keyup: KeyboardEvent;
-        focus: FocusEvent;
-        blur: FocusEvent;
         mouseenter: MouseEvent;
         mouseleave: MouseEvent;
+        mouseover: MouseEvent;
     } & {
         [evt: string]: CustomEvent<any>;
     };

package/tabs/DefaultTabs.svelte

@@ -8,15 +8,15 @@
 				{href}
 				{rel}
 				aria-current="page"
+				on:blur
 				on:click
-				on:change
+				on:focus
 				on:keydown
+				on:keypress
 				on:keyup
-				on:focus
-				on:blur
 				on:mouseenter
 				on:mouseleave
-				on:mouseenter
+				on:mouseover
 				class={active
 					? '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'
 					: '  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

@@ -5,14 +5,15 @@ declare const __propDef: {
         tabs: TabType[];
     };
     events: {
+        blur: FocusEvent;
         click: MouseEvent;
-        change: Event;
+        focus: FocusEvent;
         keydown: KeyboardEvent;
+        keypress: KeyboardEvent;
         keyup: KeyboardEvent;
-        focus: FocusEvent;
-        blur: FocusEvent;
         mouseenter: MouseEvent;
         mouseleave: MouseEvent;
+        mouseover: MouseEvent;
     } & {
         [evt: string]: CustomEvent<any>;
     };

package/tabs/FullWidthTabs.svelte

@@ -27,15 +27,15 @@ export let tabLabel;
 					? '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"
+				on:blur
 				on:click
-				on:change
+				on:focus
 				on:keydown
+				on:keypress
 				on:keyup
-				on:focus
-				on:blur
 				on:mouseenter
 				on:mouseleave
-				on:mouseenter>{name}</a
+				on:mouseover>{name}</a
 			>
 		</li>
 	{/each}

package/tabs/FullWidthTabs.svelte.d.ts

@@ -6,14 +6,15 @@ declare const __propDef: {
         tabLabel: string;
     };
     events: {
+        blur: FocusEvent;
         click: MouseEvent;
-        change: Event;
+        focus: FocusEvent;
         keydown: KeyboardEvent;
+        keypress: KeyboardEvent;
         keyup: KeyboardEvent;
-        focus: FocusEvent;
-        blur: FocusEvent;
         mouseenter: MouseEvent;
         mouseleave: MouseEvent;
+        mouseover: MouseEvent;
     } & {
         [evt: string]: CustomEvent<any>;
     };

package/tabs/IconTabs.svelte

@@ -14,15 +14,15 @@ export let iconClass = 'mr-2 w-5 h-5 text-gray-400 group-hover:text-gray-500 dar
 					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 '}
+					on:blur
 					on:click
-					on:change
+					on:focus
 					on:keydown
+					on:keypress
 					on:keyup
-					on:focus
-					on:blur
 					on:mouseenter
 					on:mouseleave
-					on:mouseenter
+					on:mouseover
 				>
 					<svelte:component this={icon} size={iconSize} class={iconClass} />
 					{name}

package/tabs/IconTabs.svelte.d.ts

@@ -6,14 +6,15 @@ declare const __propDef: {
         iconClass?: string;
     };
     events: {
+        blur: FocusEvent;
         click: MouseEvent;
-        change: Event;
+        focus: FocusEvent;
         keydown: KeyboardEvent;
+        keypress: KeyboardEvent;
         keyup: KeyboardEvent;
-        focus: FocusEvent;
-        blur: FocusEvent;
         mouseenter: MouseEvent;
         mouseleave: MouseEvent;
+        mouseover: MouseEvent;
     } & {
         [evt: string]: CustomEvent<any>;
     };

package/tabs/InteractiveTabHead.svelte

@@ -44,15 +44,15 @@ Header part of Interactive tab component. Use with TabContent.
 					class:active={activeTabValue === id}
 					aria-controls={name}
 					aria-selected="false"
+					on:blur
 					on:click
-					on:change
+					on:focus
 					on:keydown
+					on:keypress
 					on:keyup
-					on:focus
-					on:blur
 					on:mouseenter
 					on:mouseleave
-					on:mouseenter>{name}</button
+					on:mouseover>{name}</button
 				>
 			</li>
 		{/each}

package/tabs/InteractiveTabHead.svelte.d.ts

@@ -7,14 +7,15 @@ declare const __propDef: {
         activeTabValue?: number;
     };
     events: {
+        blur: FocusEvent;
         click: MouseEvent;
-        change: Event;
+        focus: FocusEvent;
         keydown: KeyboardEvent;
+        keypress: KeyboardEvent;
         keyup: KeyboardEvent;
-        focus: FocusEvent;
-        blur: FocusEvent;
         mouseenter: MouseEvent;
         mouseleave: MouseEvent;
+        mouseover: MouseEvent;
     } & {
         [evt: string]: CustomEvent<any>;
     };

package/tabs/InteractiveTabs.svelte

@@ -10,15 +10,15 @@ const handleClick = (tabValue) => () => (activeTabValue = tabValue);
 			<li class="mr-2" role="presentation">
 				<button
 					on:click={handleClick(id)}
+					on:blur
 					on:click
-					on:change
+					on:focus
 					on:keydown
+					on:keypress
 					on:keyup
-					on:focus
-					on:blur
 					on:mouseenter
 					on:mouseleave
-					on:mouseenter
+					on:mouseover
 					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"
 					id="{name}-tab"
 					type="button"

package/tabs/InteractiveTabs.svelte.d.ts

@@ -7,14 +7,15 @@ declare const __propDef: {
         tabs: InteractiveTabType[];
     };
     events: {
+        blur: FocusEvent;
         click: MouseEvent;
-        change: Event;
+        focus: FocusEvent;
         keydown: KeyboardEvent;
+        keypress: KeyboardEvent;
         keyup: KeyboardEvent;
-        focus: FocusEvent;
-        blur: FocusEvent;
         mouseenter: MouseEvent;
         mouseleave: MouseEvent;
+        mouseover: MouseEvent;
     } & {
         [evt: string]: CustomEvent<any>;
     };

package/tabs/PillTabs.svelte

@@ -10,15 +10,15 @@
 					: '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'} "
 				{href}
 				rel="external"
+				on:blur
 				on:click
-				on:change
+				on:focus
 				on:keydown
+				on:keypress
 				on:keyup
-				on:focus
-				on:blur
 				on:mouseenter
 				on:mouseleave
-				on:mouseenter>{name}</a
+				on:mouseover>{name}</a
 			>
 		</li>
 	{/each}

package/tabs/PillTabs.svelte.d.ts

@@ -5,14 +5,15 @@ declare const __propDef: {
         tabs: PillTabType[];
     };
     events: {
+        blur: FocusEvent;
         click: MouseEvent;
-        change: Event;
+        focus: FocusEvent;
         keydown: KeyboardEvent;
+        keypress: KeyboardEvent;
         keyup: KeyboardEvent;
-        focus: FocusEvent;
-        blur: FocusEvent;
         mouseenter: MouseEvent;
         mouseleave: MouseEvent;
+        mouseover: MouseEvent;
     } & {
         [evt: string]: CustomEvent<any>;
     };

package/tabs/UnderlineTabs.svelte

@@ -17,7 +17,6 @@ export let tabs;
 					on:blur
 					on:mouseenter
 					on:mouseleave
-					on:mouseenter
 					class={active
 						? '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'
 						: '  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/cards/EcommerceCard.svelte

@@ -1,52 +0,0 @@
-<script>import Badge from '../badges/Badge.svelte';
-import Rating from '../ratings/Rating.svelte';
-import Card from './Card.svelte';
-export let img;
-export let href = '/';
-export let btnColor = 'blue';
-export let rel = '';
-export let title = 'Apple Watch Series 7 GPS, Aluminium Case, Starlight Sport';
-export let stars = 0;
-export let price = '';
-export let btnText = '';
-export let headerClass = 'text-xl font-semibold tracking-tight text-gray-900 dark:text-white';
-export let priceClass = 'text-3xl font-bold text-gray-900 dark:text-white';
-let spanClass = 'flex items-center text-xs font-semibold mr-2 py-0.5 rounded';
-let linkClass = 'text-white focus:ring-4 font-medium rounded-lg text-sm px-5 py-2.5 text-center ';
-const linkColors = {
-    gray: 'bg-gray-700 hover:bg-gray-800 focus:ring-gray-300 dark:bg-gray-600 dark:hover:bg-gray-700 dark:focus:ring-gray-800',
-    red: 'bg-red-700 hover:bg-red-800 focus:ring-red-300 dark:bg-red-600 dark:hover:bg-red-700 dark:focus:ring-red-800',
-    yellow: 'bg-yellow-700 hover:bg-yellow-800 focus:ring-yellow-300 dark:bg-yellow-600 dark:hover:bg-yellow-700 dark:focus:ring-yellow-800',
-    green: 'bg-green-700 hover:bg-green-800 focus:ring-green-300 dark:bg-green-600 dark:hover:bg-green-700 dark:focus:ring-green-800',
-    indigo: 'bg-indigo-700 hover:bg-indigo-800 focus:ring-indigo-300 dark:bg-indigo-600 dark:hover:bg-indigo-700 dark:focus:ring-indigo-800',
-    purple: 'bg-purple-700 hover:bg-purple-800 focus:ring-purple-300 dark:bg-purple-600 dark:hover:bg-purple-700 dark:focus:ring-purple-800',
-    pink: 'bg-pink-700 hover:bg-pink-800 focus:ring-pink-300 dark:bg-pink-600 dark:hover:bg-pink-700 dark:focus:ring-pink-800',
-    blue: 'bg-blue-700 hover:bg-blue-800 focus:ring-blue-300 dark:bg-blue-600 dark:hover:bg-blue-700 dark:focus:ring-blue-800'
-};
-</script>
-
-<Card padding="sm">
-	<a {href} {rel}>
-		<img class="p-3 rounded-t-lg" src={img.src} alt={img.alt} />
-	</a>
-
-	<a {href} {rel}>
-		<h3 class={headerClass}>
-			{title}
-		</h3>
-	</a>
-	{#if stars}
-		<Rating rating={stars} divClass={spanClass}>
-			<Badge slot="text" color={btnColor}>{stars}</Badge>
-		</Rating>
-	{/if}
-	<slot />
-	<div class="flex justify-between items-center">
-		{#if price}
-			<span class={priceClass}>{price}</span>
-		{/if}
-		{#if btnText}
-			<a {href} {rel} class="{linkClass} {linkColors[btnColor]}">{btnText}</a>
-		{/if}
-	</div>
-</Card>

package/cards/EcommerceCard.svelte.d.ts

@@ -1,28 +0,0 @@
-import { SvelteComponentTyped } from "svelte";
-import type { ImgType, Colors } from '../types';
-declare const __propDef: {
-    props: {
-        img: ImgType;
-        href?: string;
-        btnColor?: Colors;
-        rel?: string;
-        title?: string;
-        stars?: number;
-        price?: string;
-        btnText?: string;
-        headerClass?: string;
-        priceClass?: string;
-    };
-    events: {
-        [evt: string]: CustomEvent<any>;
-    };
-    slots: {
-        default: {};
-    };
-};
-export declare type EcommerceCardProps = typeof __propDef.props;
-export declare type EcommerceCardEvents = typeof __propDef.events;
-export declare type EcommerceCardSlots = typeof __propDef.slots;
-export default class EcommerceCard extends SvelteComponentTyped<EcommerceCardProps, EcommerceCardEvents, EcommerceCardSlots> {
-}
-export {};