flowbite-svelte 0.23.2 → 0.24.1

package/CHANGELOG.md

@@ -2,6 +2,42 @@
 
 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.
 
+### [0.24.1](https://github.com/themesberg/flowbite-svelte/compare/v0.24.0...v0.24.1) (2022-08-07)
+
+
+### Bug Fixes
+
+* change from import { CloseButton } from $lib to import CloseButton from "../utils/CloseButton.svelte" in lib dir ([4eb4346](https://github.com/themesberg/flowbite-svelte/commit/4eb4346a2c4679d58c00309e0cb1a28304888a72))
+* update Button color types ([974df12](https://github.com/themesberg/flowbite-svelte/commit/974df12eaf2d796676700df09f2ee83d24ffc328))
+
+## [0.24.0](https://github.com/themesberg/flowbite-svelte/compare/v0.23.3...v0.24.0) (2022-08-07)
+
+
+### ⚠ BREAKING CHANGES
+
+* change node version to 0.16.16 since new playwright and sveltekit require it, https://github.com/sveltejs/kit/issues/5842
+
+### Features
+
+* change node version to 0.16.16 since new playwright and sveltekit require it, https://github.com/sveltejs/kit/issues/5842 ([6175c2c](https://github.com/themesberg/flowbite-svelte/commit/6175c2cb54c60829eb329bce90772e59b888063f))
+
+
+### Bug Fixes
+
+* [#200](https://github.com/themesberg/flowbite-svelte/issues/200) undefined in tooltips ([4ed2ec0](https://github.com/themesberg/flowbite-svelte/commit/4ed2ec04945676cbc3e40011fb7790d1de18d8db))
+* A11y fix for all alt taking out picture for img tag ([a247c32](https://github.com/themesberg/flowbite-svelte/commit/a247c32171543450647877a0f7192e63ee64fbb5))
+* add CloseButton to index and change import from $lib ([cc8fe25](https://github.com/themesberg/flowbite-svelte/commit/cc8fe2504474f6a0fbefb5474ef5cf798f6a28a8))
+* alerts with list color removal ([f940441](https://github.com/themesberg/flowbite-svelte/commit/f940441098e4f033b6dd405d0cb774e6d8b5030e))
+* clean up import from utils for docs ([b50126d](https://github.com/themesberg/flowbite-svelte/commit/b50126d2f78e7613e48008b46c0bd77cdc7471fa))
+
+### [0.23.3](https://github.com/themesberg/flowbite-svelte/compare/v0.23.2...v0.23.3) (2022-08-05)
+
+
+### Bug Fixes
+
+* remove EcommerceCard and SignInCard ([7e6b2b6](https://github.com/themesberg/flowbite-svelte/commit/7e6b2b689a86cb47df080908ef3217345361667a))
+* SignInCard type update ([55c824a](https://github.com/themesberg/flowbite-svelte/commit/55c824aa08727eb3f07c12fc589158e7cc94fd5f))
+
 ### [0.23.2](https://github.com/themesberg/flowbite-svelte/compare/v0.23.1...v0.23.2) (2022-08-04)
 
 

package/README.md

@@ -5,6 +5,8 @@
 [![release](https://badgen.net/github/release/themesberg/flowbite-svelte)](https://github.com/themesberg/flowbite-svelte/releases)
 [![license](https://badgen.net/npm/license/flowbite-svelte)](https://github.com/themesberg/flowbite-svelte/blob/main/LICENSE)
 
+**⚠️ Flowbite-Svelte is currently in early development and APIs and packages are likely to change quite often.**
+
 <p>
     <a href="https://flowbite-svelte.com" >
       <img alt="Flowbite-Svelte CSS components" width="350" src="https://raw.githubusercontent.com/themesberg/flowbite-svelte/main/static/images/flowbite-svelte.png">

package/alerts/Alert.svelte

@@ -64,7 +64,19 @@ $: divClass = classNames('flex flex-col p-4 mb-4 gap-2 text-sm', bgClasses[color
 		</div>
 
 		{#if dismissable}
-			<CloseButton {color} on:click={handleHide} on:click={handleAlert} />
+			<CloseButton
+				{color}
+				on:click={handleHide}
+				on:click={handleAlert}
+				on:click
+				on:change
+				on:keydown
+				on:keyup
+				on:focus
+				on:blur
+				on:mouseenter
+				on:mouseleave
+			/>
 		{/if}
 	</div>
 	<slot name="extra" />

package/alerts/Alert.svelte.d.ts

@@ -11,6 +11,14 @@ declare const __propDef: {
         accent?: boolean;
     };
     events: {
+        click: MouseEvent;
+        change: CustomEvent<any>;
+        keydown: CustomEvent<any>;
+        keyup: CustomEvent<any>;
+        focus: CustomEvent<any>;
+        blur: CustomEvent<any>;
+        mouseenter: CustomEvent<any>;
+        mouseleave: CustomEvent<any>;
         handleAlert: CustomEvent<any>;
     } & {
         [evt: string]: CustomEvent<any>;

package/buttongroups/ButtonGroupItem.svelte

@@ -19,8 +19,7 @@ if (outline) {
 		on:keydown
 		on:keyup
 		on:mouseenter
-		on:mouseleave
-		on:mouseenter><slot /></a
+		on:mouseleave><slot /></a
 	>
 {:else}
 	<button
@@ -35,7 +34,6 @@ if (outline) {
 		on:blur
 		on:mouseenter
 		on:mouseleave
-		on:mouseenter
 	>
 		<slot />
 	</button>

package/buttons/Button.svelte

@@ -81,7 +81,6 @@ $: gradientOutlineClass = classNames('inline-flex items-center justify-center',
 	on:keyup
 	on:mouseenter
 	on:mouseleave
-	on:mouseenter
 >
 	{#if outline && gradient}
 		<!-- Trick to prentend outline without using border

package/buttons/Button.svelte.d.ts

@@ -7,7 +7,7 @@ declare const __propDef: {
         gradient?: boolean;
         size?: 'xs' | 'sm' | 'md' | 'lg' | 'xl';
         href?: string;
-        color?: 'blue' | 'alternative' | 'dark' | 'light' | 'green' | 'red' | 'yellow' | 'purple';
+        color?: 'alternative' | 'blue' | 'cyan' | 'dark' | 'light' | 'lime' | 'green' | 'pink' | 'red' | 'teal' | 'yellow' | 'purple' | 'purpleToBlue' | 'cyanToBlue' | 'greenToBlue' | 'purpleToPink' | 'pinkToOrange' | 'tealToLime' | 'redToYellow';
         shadow?: 'blue' | 'green' | 'cyan' | 'teal' | 'lime' | 'red' | 'pink' | 'purple' | null;
     };
     events: {

package/cards/Card.svelte

@@ -5,17 +5,26 @@ export let horizontal = false;
 export let reverse = false;
 export let img = undefined;
 export let padding = 'lg';
+export let size = 'sm';
 setContext('background', true);
 const paddings = {
+    none: 'p-0',
     sm: 'p-4',
     md: 'p-5',
     lg: 'p-6',
     xl: 'p-8'
 };
+const sizes = {
+    xs: 'max-w-xs',
+    sm: 'max-w-sm',
+    md: 'max-w-lg',
+    lg: 'max-w-2xl',
+    xl: 'max-w-screen-xl'
+};
 let innerPdding;
 $: innerPdding = paddings[padding];
 let cardClass;
-$: cardClass = classNames('block max-w-sm', 'flex', reverse ? 'flex-col-reverse' : 'flex-col', horizontal && (reverse ? 'md:flex-row-reverse md:max-w-xl' : 'md:flex-row md:max-w-xl'), 'bg-white dark:bg-gray-800 shadow-md', 'text-gray-500 dark:text-gray-400', 'rounded-lg border border-gray-200 dark:border-gray-700', href && 'hover:bg-gray-100 dark:hover:bg-gray-700', !img && innerPdding, $$props.class);
+$: cardClass = classNames('flex', sizes[size], reverse ? 'flex-col-reverse' : 'flex-col', horizontal && (reverse ? 'md:flex-row-reverse md:max-w-xl' : 'md:flex-row md:max-w-xl'), 'bg-white dark:bg-gray-800 shadow-md', 'text-gray-500 dark:text-gray-400', 'rounded-lg border border-gray-200 dark:border-gray-700', href && 'hover:bg-gray-100 dark:hover:bg-gray-700', !img && innerPdding, $$props.class);
 let imgClass;
 $: imgClass = classNames(reverse ? 'rounded-b-lg' : 'rounded-t-lg', horizontal && 'object-cover w-full h-96 md:h-auto md:w-48 md:rounded-none', horizontal && (reverse ? 'md:rounded-r-lg' : 'md:rounded-l-lg'));
 </script>
@@ -27,6 +36,6 @@ $: imgClass = classNames(reverse ? 'rounded-b-lg' : 'rounded-t-lg', horizontal &
 			<slot />
 		</div>
 	{:else}
-		<div><slot /></div>
+		<slot />
 	{/if}
 </svelte:element>

package/cards/Card.svelte.d.ts

@@ -6,7 +6,8 @@ declare const __propDef: {
         horizontal?: boolean;
         reverse?: boolean;
         img?: string;
-        padding?: 'sm' | 'md' | 'lg';
+        padding?: 'none' | 'sm' | 'md' | 'lg';
+        size?: 'xs' | 'sm' | 'md' | 'lg' | 'xl';
     };
     events: {
         [evt: string]: CustomEvent<any>;

package/dropdowns/DropdownItem.svelte

@@ -11,6 +11,7 @@ const colors = {
 	{...$$restProps}
 	class={classNames(liClass, colors[color] ?? colors.default, $$props.class)}
 	on:click|stopPropagation
+	on:click
 	on:change
 	on:keydown
 	on:keyup
@@ -18,7 +19,6 @@ const colors = {
 	on:blur
 	on:mouseenter
 	on:mouseleave
-	on:mouseenter
 >
 	<slot />
 </li>

package/forms/Dropzone.svelte

@@ -9,6 +9,18 @@ export let innerDivClass = 'flex flex-col justify-center items-center pt-5 pb-6'
 		<div class={innerDivClass}>
 			<slot />
 		</div>
-		<input {...$$restProps} bind:value type="file" class="hidden" />
+		<input
+			{...$$restProps}
+			bind:value
+			type="file"
+			class="hidden"
+			on:click
+			on:change
+			on:focus
+			on:blur
+			on:mouseenter
+			on:mouseleave
+			on:mouseover
+		/>
 	</label>
 </div>

package/forms/Dropzone.svelte.d.ts

@@ -8,6 +8,14 @@ declare const __propDef: {
         innerDivClass?: string;
     };
     events: {
+        click: MouseEvent;
+        change: Event;
+        focus: FocusEvent;
+        blur: FocusEvent;
+        mouseenter: MouseEvent;
+        mouseleave: MouseEvent;
+        mouseover: MouseEvent;
+    } & {
         [evt: string]: CustomEvent<any>;
     };
     slots: {

package/forms/FloatingLabelInput.svelte

@@ -72,16 +72,16 @@ function setType(node) {
 		{id}
 		{...$$restProps}
 		bind:value
-		on:change
 		on:blur
-		on:keyup
+		on:change
+		on:click
+		on:focus
 		on:keydown
 		on:keypress
-		on:focus
-		on:click
-		on:mouseover
+		on:keyup
 		on:mouseenter
 		on:mouseleave
+		on:mouseover
 		on:paste
 		bind:this={ref}
 		use:setType

package/forms/FloatingLabelInput.svelte.d.ts

@@ -13,16 +13,16 @@ declare const __propDef: {
         ref?: HTMLElement;
     };
     events: {
-        change: Event;
         blur: FocusEvent;
-        keyup: KeyboardEvent;
+        change: Event;
+        click: MouseEvent;
+        focus: FocusEvent;
         keydown: KeyboardEvent;
         keypress: KeyboardEvent;
-        focus: FocusEvent;
-        click: MouseEvent;
-        mouseover: MouseEvent;
+        keyup: KeyboardEvent;
         mouseenter: MouseEvent;
         mouseleave: MouseEvent;
+        mouseover: MouseEvent;
         paste: ClipboardEvent;
     } & {
         [evt: string]: CustomEvent<any>;

package/forms/Input.svelte

@@ -23,13 +23,13 @@ function setType(node) {
 	{...$$restProps}
 	bind:value
 	bind:this={ref}
+	on:blur
 	on:change
-	on:keyup
+	on:click
+	on:focus
 	on:keydown
 	on:keypress
-	on:focus
-	on:blur
-	on:click
+	on:keyup
 	on:mouseover
 	on:mouseenter
 	on:mouseleave

package/forms/Input.svelte.d.ts

@@ -11,13 +11,13 @@ declare const __propDef: {
         ref?: HTMLElement;
     };
     events: {
+        blur: FocusEvent;
         change: Event;
-        keyup: KeyboardEvent;
+        click: MouseEvent;
+        focus: FocusEvent;
         keydown: KeyboardEvent;
         keypress: KeyboardEvent;
-        focus: FocusEvent;
-        blur: FocusEvent;
-        click: MouseEvent;
+        keyup: KeyboardEvent;
         mouseover: MouseEvent;
         mouseenter: MouseEvent;
         mouseleave: MouseEvent;

package/forms/Radio.svelte

@@ -41,16 +41,16 @@ let background = getContext('background');
 	<input
 		type="radio"
 		bind:group
+		on:blur
 		on:change
-		on:keyup
+		on:click
+		on:focus
 		on:keydown
 		on:keypress
-		on:focus
-		on:blur
-		on:click
-		on:mouseover
+		on:keyup
 		on:mouseenter
 		on:mouseleave
+		on:mouseover
 		on:paste
 		{value}
 		{...$$restProps}

package/forms/Radio.svelte.d.ts

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

package/forms/Range.svelte

@@ -27,8 +27,8 @@ else {
 	{step}
 	class={inputClass}
 	on:change
-	on:keyup
+	on:click
 	on:keydown
 	on:keypress
-	on:click
+	on:keyup
 />

package/forms/Range.svelte.d.ts

@@ -11,10 +11,10 @@ declare const __propDef: {
     };
     events: {
         change: Event;
-        keyup: KeyboardEvent;
+        click: MouseEvent;
         keydown: KeyboardEvent;
         keypress: KeyboardEvent;
-        click: MouseEvent;
+        keyup: KeyboardEvent;
     } & {
         [evt: string]: CustomEvent<any>;
     };

package/forms/Search.svelte

@@ -25,16 +25,16 @@ export let placeholder = 'Search';
 		</div>
 		<input
 			{...$$restProps}
+			on:blur
 			on:change
-			on:keyup
+			on:click
+			on:focus
 			on:keydown
 			on:keypress
-			on:focus
-			on:blur
-			on:click
-			on:mouseover
+			on:keyup
 			on:mouseenter
 			on:mouseleave
+			on:mouseover
 			on:paste
 			type="search"
 			{id}

package/forms/Search.svelte.d.ts

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

package/forms/SimpleSearch.svelte

@@ -27,6 +27,17 @@ let background = getContext('background');
 			>
 		</div>
 		<input
+			on:blur
+			on:change
+			on:click
+			on:focus
+			on:keydown
+			on:keypress
+			on:keyup
+			on:mouseenter
+			on:mouseleave
+			on:mouseover
+			on:paste
 			{...$$restProps}
 			type="text"
 			{id}

package/forms/SimpleSearch.svelte.d.ts

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

package/forms/Textarea.svelte

@@ -16,16 +16,16 @@ export let helperClass = 'mt-2 text-sm text-gray-500 dark:text-gray-400';
 <textarea
 	bind:value
 	bind:this={ref}
+	on:blur
 	on:change
-	on:keyup
+	on:click
+	on:focus
 	on:keydown
 	on:keypress
-	on:focus
-	on:blur
-	on:click
-	on:mouseover
+	on:keyup
 	on:mouseenter
 	on:mouseleave
+	on:mouseover
 	on:paste
 	{id}
 	{name}

package/forms/Textarea.svelte.d.ts

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

package/index.d.ts

@@ -9,8 +9,6 @@ export { default as Button } from './buttons/Button.svelte';
 export { default as ButtonGroup } from './buttongroups/ButtonGroup.svelte';
 export { default as ButtonGroupItem } from './buttongroups/ButtonGroupItem.svelte';
 export { default as Card } from './cards/Card.svelte';
-export { default as EcommerceCard } from './cards/EcommerceCard.svelte';
-export { default as SignInCard } from './cards/SignInCard.svelte';
 export { default as Carousel } from './carousels/Carousel.svelte';
 export { default as CarouselTransition } from './carousels/CarouselTransition.svelte';
 export { default as DarkMode } from './darkmode/DarkMode.svelte';
@@ -110,3 +108,4 @@ export { default as TimelineItemHorizontal } from './timelines/TimelineItemHoriz
 export { default as TimelineItemVertical } from './timelines/TimelineItemVertical.svelte';
 export { default as Toast } from './toasts/Toast.svelte';
 export { default as Tooltip } from './tooltips/Tooltip.svelte';
+export { default as CloseButton } from './utils/CloseButton.svelte';

package/index.js

@@ -17,8 +17,6 @@ export { default as ButtonGroup } from './buttongroups/ButtonGroup.svelte';
 export { default as ButtonGroupItem } from './buttongroups/ButtonGroupItem.svelte';
 // Cards
 export { default as Card } from './cards/Card.svelte';
-export { default as EcommerceCard } from './cards/EcommerceCard.svelte';
-export { default as SignInCard } from './cards/SignInCard.svelte';
 // Carousels
 export { default as Carousel } from './carousels/Carousel.svelte';
 export { default as CarouselTransition } from './carousels/CarouselTransition.svelte';
@@ -141,3 +139,5 @@ export { default as TimelineItemVertical } from './timelines/TimelineItemVertica
 export { default as Toast } from './toasts/Toast.svelte';
 // Tooltips
 export { default as Tooltip } from './tooltips/Tooltip.svelte';
+// utils
+export { default as CloseButton } from './utils/CloseButton.svelte';

package/list-group/ListItem.svelte

@@ -29,6 +29,16 @@ $: itemClass = classNames('py-2 px-4 w-full text-sm font-medium', 'first:rounded
 		class="block {itemClass}"
 		on:click={() => dispatch('click', $$props)}
 		aria-current={current}
+		on:blur
+		on:change
+		on:click
+		on:focus
+		on:keydown
+		on:keypress
+		on:keyup
+		on:mouseenter
+		on:mouseleave
+		on:mouseover
 	>
 		<slot item={$$props} />
 	</a>
@@ -37,6 +47,16 @@ $: itemClass = classNames('py-2 px-4 w-full text-sm font-medium', 'first:rounded
 		class="inline-flex relative items-center text-left {itemClass}"
 		{disabled}
 		on:click={() => dispatch('click', $$props)}
+		on:blur
+		on:change
+		on:click
+		on:focus
+		on:keydown
+		on:keypress
+		on:keyup
+		on:mouseenter
+		on:mouseleave
+		on:mouseover
 		aria-current={current}
 	>
 		<slot item={$$props} />

package/list-group/ListItem.svelte.d.ts

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

package/modals/Modal.svelte

@@ -1,5 +1,4 @@
-<script>import { createEventDispatcher } from 'svelte';
-import { setContext } from 'svelte';
+<script>import { createEventDispatcher, setContext } from 'svelte';
 import CloseButton from '../utils/CloseButton.svelte';
 import focusTrap from '../utils/focusTrap';
 export let open = false;

package/navbar/NavDropdown.svelte

@@ -39,15 +39,16 @@ let liClass = 'flex justify-center py-2 pr-4 pl-3 text-gray-700 border-b border-
 						<a
 							href={item.href}
 							{rel}
-							on:click
+							on:blur
 							on:change
+							on:click
+							on:focus
 							on:keydown
+							on:keypress
 							on:keyup
-							on:focus
-							on:blur
 							on:mouseenter
 							on:mouseleave
-							on:mouseenter
+							on:mouseover
 							class={dropdownLinkClassWithChild}>{item.name}</a
 						>
 					</li>

package/navbar/NavDropdown.svelte.d.ts

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