flowbite-svelte 0.15.35 → 0.15.36

package/CHANGELOG.md

@@ -2,6 +2,16 @@
 
 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.15.36](https://github.com/themesberg/flowbite-svelte/compare/v0.15.35...v0.15.36) (2022-05-17)
+
+
+### Bug Fixes
+
+* add '' to string types ([387363a](https://github.com/themesberg/flowbite-svelte/commit/387363a3b3668dc66a7790331927e1c1641e4de6))
+* add bind:checked to Checkbox ([7cfcf67](https://github.com/themesberg/flowbite-svelte/commit/7cfcf67b52a1496f57f8ef31b4205464f9eb82a0))
+* add bind:checked to Toggle ([18a34ea](https://github.com/themesberg/flowbite-svelte/commit/18a34eaaf65539bf176da642b4a04f644265f647))
+* remove radio, search etc from InputType ([ed95418](https://github.com/themesberg/flowbite-svelte/commit/ed9541808da054b383c6addff55907d955dad32f))
+
 ### [0.15.35](https://github.com/themesberg/flowbite-svelte/compare/v0.15.34...v0.15.35) (2022-05-15)
 
 

package/forms/Checkbox.svelte

@@ -31,16 +31,17 @@ else if (color === 'orange') {
 else {
     inputClass += 'text-blue-600 focus:ring-blue-500 dark:focus:ring-blue-600';
 }
-export let helper;
-export let id;
-export let value;
-export let label;
+export let helper = '';
+export let id = '';
+export let value = '';
+export let label = '';
+export let checked = false;
 </script>
 
 {#if helper}
 	<div class="flex">
 		<div class={divHelperClass}>
-			<input {id} type="checkbox" {name} {value} class={inputClass} aria-labelledby={id} aria-describedby={id} {disabled} {...$$restProps} />
+			<input {id} type="checkbox" bind:checked {name} {value} class={inputClass} aria-labelledby={id} aria-describedby={id} {disabled} {...$$restProps} />
 		</div>
 		<div class="ml-2 text-sm">
 			<label for={id} class={labelHelperClass}>
@@ -51,7 +52,7 @@ export let label;
 	</div>
 {:else}
 	<div class={divClass}>
-		<input {id} type="checkbox" {name} {value} class={inputClass} aria-labelledby={id} aria-describedby={id} {disabled} {...$$restProps} />
+		<input {id} type="checkbox" bind:checked {name} {value} class={inputClass} aria-labelledby={id} aria-describedby={id} {disabled} {...$$restProps} />
 		<label for={id} class={labelClass}>
 			{@html label}
 		</label>

package/forms/Checkbox.svelte.d.ts

@@ -12,10 +12,11 @@ declare const __propDef: {
         labelHelperClass?: string;
         helperClass?: string;
         color?: FormColorType;
-        helper: string;
-        id: string;
-        value: string;
-        label: string;
+        helper?: string;
+        id?: string;
+        value?: string;
+        label?: string;
+        checked?: boolean;
     };
     events: {
         [evt: string]: CustomEvent<any>;

package/forms/Toggle.svelte

@@ -1,14 +1,14 @@
 <script>import generateId from '../utils/generateId.js';
 export let name = 'toggle-example';
-export let color;
+export let color = 'blue';
 export let size = 'default';
 export let id = generateId();
 export let label = 'Toggle me';
-export let value;
+export let value = '';
 export let checked = false;
 export let disabled = false;
 export let labelClass = 'relative inline-flex items-center cursor-pointer';
-export let divClass = 'w-11 h-6 bg-gray-200 rounded-full border border-gray-200 toggle-bg dark:bg-gray-700 dark:border-gray-600';
+export let divClass = "w-11 h-6 bg-gray-200 rounded-full peer peer-focus:ring-4 peer-focus:ring-blue-300 dark:peer-focus:ring-blue-800 dark:bg-gray-700 peer-checked:after:translate-x-full peer-checked:after:border-white after:content-[''] after:absolute after:top-0.5 after:left-[2px] after:bg-white after:border-gray-300 after:border after:rounded-full after:h-5 after:w-5 after:transition-all dark:border-gray-600 peer-checked:bg-blue-600";
 export let inputClass = 'sr-only';
 if (color || size) {
     inputClass += ' peer';
@@ -41,7 +41,7 @@ else if (size === 'large') {
 </script>
 
 <label for={id} class={labelClass}>
-	<input type="checkbox" {id} class={inputClass} {value} {checked} {name} {disabled} />
+	<input type="checkbox" {id} class={inputClass} {value} bind:checked {name} {disabled} />
 	<div class="{divClass} {$$props.class ? $$props.class : ''}" />
 	<span class={spanClass}>{label}</span>
 </label>

package/forms/Toggle.svelte.d.ts

@@ -4,11 +4,11 @@ declare const __propDef: {
     props: {
         [x: string]: any;
         name?: string;
-        color: ToggleColorType;
+        color?: ToggleColorType;
         size?: 'small' | 'default' | 'large';
         id?: string;
         label?: string;
-        value: string;
+        value?: string;
         checked?: boolean;
         disabled?: boolean;
         labelClass?: string;

package/package.json

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

package/types.d.ts

@@ -90,7 +90,7 @@ export declare type ImgType = {
     src: string;
     alt?: string;
 };
-export declare type InputType = 'button' | 'checkbox' | 'color' | 'date' | 'datetime-local' | 'email' | 'file' | 'hidden' | 'image' | 'month' | 'number' | 'password' | 'radio' | 'range' | 'reset' | 'search' | 'submit' | 'tel' | 'text' | 'time' | 'url' | 'week';
+export declare type InputType = 'color' | 'date' | 'datetime-local' | 'email' | 'file' | 'hidden' | 'image' | 'month' | 'number' | 'password' | 'reset' | 'submit' | 'tel' | 'text' | 'time' | 'url' | 'week';
 export interface InteractiveTabType {
     name: string;
     id: number;
@@ -194,7 +194,7 @@ export interface TimelineItemHorizontalType {
     iconClass?: string;
     text?: HTMLElement | string;
 }
-export declare type ToggleColorType = 'red' | 'green' | 'purple' | 'yellow' | 'teal' | 'orange';
+export declare type ToggleColorType = 'blue' | 'red' | 'green' | 'purple' | 'yellow' | 'teal' | 'orange';
 export interface TransitionParamTypes {
     delay?: number;
     duration?: number;