flowbite-svelte 0.22.1 → 0.22.4

package/CHANGELOG.md

@@ -2,6 +2,28 @@
 
 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.22.4](https://github.com/themesberg/flowbite-svelte/compare/v0.22.3...v0.22.4) (2022-07-21)
+
+
+### Bug Fixes
+
+* [#165](https://github.com/themesberg/flowbite-svelte/issues/165) toggle bind:group bind:checked ([3ca4010](https://github.com/themesberg/flowbite-svelte/commit/3ca40109f13e31afa76e02c96d387ff476880e52))
+* change from # to / for href ([b79fd81](https://github.com/themesberg/flowbite-svelte/commit/b79fd8112d2fb15657058dd0184b113228d8a6aa))
+
+### [0.22.3](https://github.com/themesberg/flowbite-svelte/compare/v0.22.2...v0.22.3) (2022-07-21)
+
+
+### Bug Fixes
+
+* for [#165](https://github.com/themesberg/flowbite-svelte/issues/165) and [#170](https://github.com/themesberg/flowbite-svelte/issues/170) and changed $$restProps.class to $$props.class ([99399b8](https://github.com/themesberg/flowbite-svelte/commit/99399b8aebdec68bc5c52641ed768dc601fe36a2))
+
+### [0.22.2](https://github.com/themesberg/flowbite-svelte/compare/v0.22.1...v0.22.2) (2022-07-21)
+
+
+### Bug Fixes
+
+* update for [#165](https://github.com/themesberg/flowbite-svelte/issues/165) and [#170](https://github.com/themesberg/flowbite-svelte/issues/170) ([ff43f26](https://github.com/themesberg/flowbite-svelte/commit/ff43f265b163d2c3ac7a145772e18a95326c0651))
+
 ### [0.22.1](https://github.com/themesberg/flowbite-svelte/compare/v0.22.0...v0.22.1) (2022-07-20)
 
 

package/dropdowns/Dropdown.svelte

@@ -35,14 +35,7 @@ $: icon = icons[placement.split('-')[0]];
 				{/if}
 			</button>
 		{:else}
-			<Button
-				pill={$$props.pill}
-				outline={$$props.outline}
-				color={$$props.color}
-				size={$$props.size}
-				icon={$$props.icon}
-				gradient={$$props.gradient}
-			>
+			<Button {...$$restProps}>
 				<slot name="label">{label}</slot>
 				{#if arrowIcon}
 					<svelte:component this={icon ?? ChevronDown} class="ml-2 h-4 w-4" />

package/forms/Checkbox.svelte

@@ -30,13 +30,13 @@ $: {
 }
 </script>
 
-<Label class={labelClass(inline, $$restProps.class)} show={!!$$slots.default}>
+<Label class={labelClass(inline, $$props.class)} show={!!$$slots.default}>
 	<input
 		type="checkbox"
 		bind:checked
 		on:click
 		{value}
 		{...$$restProps}
-		class={inputClass(custom, color, true, tinted, $$slots.default || $$restProps.class)}
+		class={inputClass(custom, color, true, tinted, $$slots.default || $$props.class)}
 	/><slot />
 </Label>

package/forms/FloatingLabelInput.svelte

@@ -72,6 +72,8 @@ function setType(node) {
 		{id}
 		{...$$restProps}
 		bind:value
+		on:change
+		on:blur
 		bind:this={ref}
 		use:setType
 		placeholder=" "

package/forms/FloatingLabelInput.svelte.d.ts

@@ -13,6 +13,9 @@ declare const __propDef: {
         ref?: HTMLElement;
     };
     events: {
+        change: Event;
+        blur: FocusEvent;
+    } & {
         [evt: string]: CustomEvent<any>;
     };
     slots: {};

package/forms/Radio.svelte

@@ -35,13 +35,13 @@ export let group = '';
 export let value = '';
 </script>
 
-<Label class={labelClass(inline, $$restProps.class)} show={!!$$slots.default}>
+<Label class={labelClass(inline, $$props.class)} show={!!$$slots.default}>
 	<input
 		type="radio"
 		bind:group
 		on:click
 		{value}
 		{...$$restProps}
-		class={inputClass(custom, color, false, tinted, $$slots.default || $$restProps.class)}
+		class={inputClass(custom, color, false, tinted, $$slots.default || $$props.class)}
 	/><slot />
 </Label>

package/forms/SimpleSearch.svelte

@@ -2,9 +2,10 @@
 export let labelClass = 'sr-only';
 export let iconClass = 'w-5 h-5 text-gray-500 dark:text-gray-400';
 export let iconDivClass = 'flex absolute inset-y-0 left-0 items-center pl-3 pointer-events-none';
-export let inputClass = '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';
+export let inputClass = '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:placeholder-gray-400 dark:text-white dark:focus:ring-blue-500 dark:focus:border-blue-500';
 export let btnClass = 'p-2.5 ml-2 text-sm font-medium text-white bg-blue-700 rounded-lg border border-blue-700 hover:bg-blue-800 focus:ring-4 focus:outline-none focus:ring-blue-300 dark:bg-blue-600 dark:hover:bg-blue-700 dark:focus:ring-blue-800';
 export let placeholder = 'Search';
+export let tinted = false;
 </script>
 
 <form class="flex items-center" on:submit>
@@ -23,7 +24,15 @@ export let placeholder = 'Search';
 				/></svg
 			>
 		</div>
-		<input {...$$restProps} type="text" {id} class={inputClass} {placeholder} />
+		<input
+			{...$$restProps}
+			type="text"
+			{id}
+			class="{tinted
+				? 'dark:bg-gray-600 dark:border-gray-500'
+				: ' dark:bg-gray-700 dark:border-gray-600'} {inputClass}"
+			{placeholder}
+		/>
 	</div>
 	<button type="submit" class={btnClass}
 		><svg

package/forms/SimpleSearch.svelte.d.ts

@@ -9,6 +9,7 @@ declare const __propDef: {
         inputClass?: string;
         btnClass?: string;
         placeholder?: string;
+        tinted?: boolean;
     };
     events: {
         submit: SubmitEvent;

package/forms/Toggle.svelte

@@ -1,6 +1,9 @@
 <script>import classNames from 'classnames';
 import Checkbox from './Checkbox.svelte';
 export let size = 'default';
+export let group = [];
+export let value = '';
+export let checked = undefined;
 const common = "mr-3 bg-gray-200 rounded-full peer-focus:ring-4 dark:bg-gray-700 peer-checked:after:translate-x-full peer-checked:after:border-white after:content-[''] after:absolute after:bg-white after:border-gray-300 after:border after:rounded-full after:transition-all dark:border-gray-600";
 const colors = {
     red: 'peer-focus:ring-red-300 dark:peer-focus:ring-red-800 peer-checked:bg-red-600',
@@ -18,7 +21,7 @@ const sizes = {
 };
 </script>
 
-<Checkbox custom class="relative {$$restProps.class}" {...$$restProps} on:click>
+<Checkbox custom class="relative {$$props.class}" {value} bind:checked bind:group {...$$restProps} on:click>
 	<div class={classNames(common, colors[$$restProps.color ?? 'blue'], sizes[size])} />
 	<slot />
 </Checkbox>

package/forms/Toggle.svelte.d.ts

@@ -3,6 +3,9 @@ declare const __propDef: {
     props: {
         [x: string]: any;
         size?: 'small' | 'default' | 'large';
+        group?: string[];
+        value?: string;
+        checked?: boolean;
     };
     events: {
         click: MouseEvent;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "flowbite-svelte",
-  "version": "0.22.1",
+  "version": "0.22.4",
   "description": "Flowbite components for Svelte",
   "main": "index.js",
   "author": {