flowbite-svelte 0.21.14 → 0.21.17

package/CHANGELOG.md

@@ -2,6 +2,32 @@
 
 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.21.17](https://github.com/themesberg/flowbite-svelte/compare/v0.21.16...v0.21.17) (2022-07-20)
+
+
+### Bug Fixes
+
+* Checkbox on:click position ([cfb1c65](https://github.com/themesberg/flowbite-svelte/commit/cfb1c658ae971bb689cd4e01f797ccc5c11db991))
+* on:click for Toggle, Checkbox and Radio ([48710b5](https://github.com/themesberg/flowbite-svelte/commit/48710b59c9a9096ec95dfa26d1764a312552b49e))
+
+### [0.21.16](https://github.com/themesberg/flowbite-svelte/compare/v0.21.14...v0.21.16) (2022-07-20)
+
+
+### Bug Fixes
+
+* dropdown search ([4416a31](https://github.com/themesberg/flowbite-svelte/commit/4416a312756331f6dd04b1d5fe5dd61b764fd38d))
+* padding issues with dropdown ([6a48d4d](https://github.com/themesberg/flowbite-svelte/commit/6a48d4dc6a262fc62aa2d9b4c6233bf1cee4b741))
+* padding issues with dropdown ([8e8c2d4](https://github.com/themesberg/flowbite-svelte/commit/8e8c2d4bed3e85e95c28e936c513489e6d975e8f))
+
+### [0.21.15](https://github.com/themesberg/flowbite-svelte/compare/v0.21.14...v0.21.15) (2022-07-20)
+
+
+### Bug Fixes
+
+* dropdown search ([4416a31](https://github.com/themesberg/flowbite-svelte/commit/4416a312756331f6dd04b1d5fe5dd61b764fd38d))
+* padding issues with dropdown ([6a48d4d](https://github.com/themesberg/flowbite-svelte/commit/6a48d4dc6a262fc62aa2d9b4c6233bf1cee4b741))
+* padding issues with dropdown ([8e8c2d4](https://github.com/themesberg/flowbite-svelte/commit/8e8c2d4bed3e85e95c28e936c513489e6d975e8f))
+
 ### [0.21.14](https://github.com/themesberg/flowbite-svelte/compare/v0.21.13...v0.21.14) (2022-07-19)
 
 

package/forms/Checkbox.svelte

@@ -27,10 +27,12 @@ let inputClass; // get the value from the underlying Radio
 export let custom = false;
 export let color = 'blue';
 export let inline = false;
+export let tinted = false;
 </script>
 
-<Radio class={$$restProps.class} bind:inputClass {color} {custom} {inline}>
+<Radio class={$$restProps.class} bind:inputClass {color} {custom} {inline} {tinted}>
 	<input
+		on:click
 		slot="input"
 		type="checkbox"
 		bind:checked

package/forms/Checkbox.svelte.d.ts

@@ -9,8 +9,11 @@ declare const __propDef: {
         custom?: boolean;
         color?: FormColorType;
         inline?: boolean;
+        tinted?: boolean;
     };
     events: {
+        click: MouseEvent;
+    } & {
         [evt: string]: CustomEvent<any>;
     };
     slots: {

package/forms/Radio.svelte

@@ -15,10 +15,11 @@ import classNames from 'classnames';
 export let color = 'blue';
 export let custom = false;
 export let inline = false;
+export let tinted = false;
 export let group = '';
 export let value = '';
 export let inputClass;
-$: inputClass = classNames('w-4 h-4 bg-gray-100 border-gray-300 dark:ring-offset-gray-800 focus:ring-2 dark:bg-gray-700 dark:border-gray-600 mr-2', custom && 'sr-only peer', colorClasses[color]);
+$: inputClass = classNames('w-4 h-4 bg-gray-100 border-gray-300 dark:ring-offset-gray-800 focus:ring-2 mr-2', tinted ? 'dark:bg-gray-600 dark:border-gray-500' : 'dark:bg-gray-700 dark:border-gray-600', custom && 'sr-only peer', colorClasses[color]);
 let colorLabel = 'gray';
 $: colorLabel = $$restProps.disabled ? 'disabled' : colorLabel;
 let labelClass;
@@ -43,7 +44,7 @@ const colorClasses = {
 <!-- svelte-ignore a11y-label-has-associated-control -->
 <label class={labelClass}>
 	<slot name="input">
-		<input type="radio" bind:group {value} {...$$restProps} class={inputClass} />
+		<input on:click type="radio" bind:group {value} {...$$restProps} class={inputClass} />
 	</slot>
 	<slot />
 </label>

package/forms/Radio.svelte.d.ts

@@ -6,11 +6,14 @@ declare const __propDef: {
         color?: FormColorType;
         custom?: boolean;
         inline?: boolean;
+        tinted?: boolean;
         group?: number | string;
         value?: string;
         inputClass: string;
     };
     events: {
+        click: MouseEvent;
+    } & {
         [evt: string]: CustomEvent<any>;
     };
     slots: {

package/forms/Toggle.svelte

@@ -18,7 +18,7 @@ const sizes = {
 };
 </script>
 
-<Checkbox custom class="relative {$$restProps.class}" {...$$restProps}>
+<Checkbox on:click custom class="relative {$$restProps.class}" {...$$restProps}>
 	<div class={classNames(common, colors[$$restProps.color ?? 'blue'], sizes[size])} />
 	<slot />
 </Checkbox>

package/forms/Toggle.svelte.d.ts

@@ -5,6 +5,8 @@ declare const __propDef: {
         size?: 'small' | 'default' | 'large';
     };
     events: {
+        click: MouseEvent;
+    } & {
         [evt: string]: CustomEvent<any>;
     };
     slots: {

package/package.json

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