flowbite-svelte 0.10.1 → 0.10.4

package/README.md

@@ -38,6 +38,10 @@
 
 [Dropdowns](https://flowbite-svelte.vercel.app/dropdowns)
 
+## Form components
+
+[Forms](https://flowbite-svelte.vercel.app/forms)
+
 ## Footer
 
 [Footer](https://flowbite-svelte.vercel.app/footer)

package/forms/Checkbox.svelte

@@ -17,7 +17,7 @@ export let options;
 						aria-describedby={option.id}
 						type="checkbox"
 						class={inputClass}
-						checked={option.checked}
+						bind:checked={option.checked}
 						disabled={option.disabled}
 					/>
 				</div>

package/forms/Fileupload.svelte

@@ -1,13 +1,14 @@
-<script >export let id = 'user_avatar';
+<script >export let value = '';
+export let id = 'user_avatar';
 export let label = 'Upload file';
 export let labelClass = 'block mb-2 text-sm font-medium text-gray-900 dark:text-gray-300" for="user_avatar';
 export let inputClass = 'block w-full text-sm text-gray-900 bg-gray-50 rounded-lg border border-gray-300 cursor-pointer dark:text-gray-400 focus:outline-none focus:border-transparent dark:bg-gray-700 dark:border-gray-600 dark:placeholder-gray-400';
 export let divClass = 'mt-1 text-sm text-gray-500 dark:text-gray-300';
-export let helper;
+export let helper = '';
 </script>
 
 <label class={labelClass} for={id}>{label}</label>
-<input class={inputClass} aria-describedby="{id}_help" {id} type="file" />
+<input bind:value class={inputClass} aria-describedby="{id}_help" {id} type="file" />
 {#if helper}
 	<div class={divClass} id="{id}_help">{helper}</div>
 {/if}

package/forms/Fileupload.svelte.d.ts

@@ -1,12 +1,13 @@
 import { SvelteComponentTyped } from "svelte";
 declare const __propDef: {
     props: {
+        value?: string;
         id?: string;
         label?: string;
         labelClass?: string;
         inputClass?: string;
         divClass?: string;
-        helper: any;
+        helper?: string;
     };
     events: {
         [evt: string]: CustomEvent<any>;

package/forms/FloatingLabelInput.svelte

@@ -1,14 +1,18 @@
 <script >export let id;
 export let type;
-export let name;
-export let label;
+export let value = '';
+export let name = '';
+export let label = '';
 export let required = false;
 export let divClass = 'relative z-0 mb-6 w-full group';
 export let inputClass = 'block py-2.5 px-0 w-full text-sm text-gray-900 bg-transparent border-0 border-b-2 border-gray-300 appearance-none dark:text-white dark:border-gray-600 dark:focus:border-blue-500 focus:outline-none focus:ring-0 focus:border-blue-600 peer';
 export let labelClass = 'absolute text-sm text-gray-500 dark:text-gray-400 duration-300 transform -translate-y-6 scale-75 top-3 -z-10 origin-[0] peer-focus:left-0 peer-focus:text-blue-600 peer-focus:dark:text-blue-500 peer-placeholder-shown:scale-100 peer-placeholder-shown:translate-y-0 peer-focus:scale-75 peer-focus:-translate-y-6';
+function setType(node) {
+    node.type = type;
+}
 </script>
 
 <div class={divClass}>
-	<input {type} {name} class={inputClass} placeholder=" " {required} />
+	<input bind:value use:setType {name} class={inputClass} placeholder=" " {required} />
 	<label for={id} class={labelClass}>{label}</label>
 </div>

package/forms/FloatingLabelInput.svelte.d.ts

@@ -2,9 +2,10 @@ import { SvelteComponentTyped } from "svelte";
 declare const __propDef: {
     props: {
         id: string;
-        type: string;
-        name: string;
-        label: string;
+        type: 'button' | 'checkbox' | 'color' | 'date' | 'datetime-local' | 'email' | 'file' | 'hidden' | 'image' | 'month' | 'number' | 'password' | 'radio' | 'range' | 'reset' | 'search' | 'submit' | 'tel' | 'text' | 'time' | 'url' | 'week';
+        value?: string;
+        name?: string;
+        label?: string;
         required?: boolean;
         divClass?: string;
         inputClass?: string;

package/forms/Iconinput.svelte

@@ -1,9 +1,10 @@
 <script >export let label;
 export let id;
 export let type;
+export let value = '';
 export let icon;
-export let helper;
-export let placeholder;
+export let helper = '';
+export let placeholder = '';
 export let noBorder = false;
 export let labelClass = 'block mb-2 text-sm font-medium text-gray-900 dark:text-gray-300';
 export let inputClass = 'rounded-none rounded-r-lg bg-gray-50 border border-gray-300 text-gray-900 focus:ring-blue-500 focus:border-blue-500 block flex-1 min-w-0 w-full text-sm border-gray-300 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';
@@ -12,24 +13,29 @@ export let helperClass = 'mt-2 text-sm text-gray-500 dark:text-gray-400';
 export let noBorderInputClass = '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 noBorderDivClass = 'flex absolute inset-y-0 left-0 items-center pl-3 pointer-events-none';
 export let iconClass = 'h-4 w-4 mr-2';
+function setType(node) {
+    node.type = type;
+}
 </script>
 
-<label for={id} class={labelClass}>{label}</label>
-{#if noBorder}
-	<div class="relative">
-		<div class={noBorderDivClass}>
-			<svelte:component this={icon} className={iconClass} />
+<div class={$$props.class}>
+	<label for={id} class={labelClass}>{label}</label>
+	{#if noBorder}
+		<div class="relative">
+			<div class={noBorderDivClass}>
+				<svelte:component this={icon} className={iconClass} />
+			</div>
+			<input bind:value use:setType {id} class={noBorderInputClass} {placeholder} />
 		</div>
-		<input {type} {id} class={noBorderInputClass} {placeholder} />
-	</div>
-{:else}
-	<div class="flex">
-		<span class={spanClass}>
-			<svelte:component this={icon} className={iconClass} />
-		</span>
-		<input {type} {id} class={inputClass} {placeholder} />
-	</div>
-{/if}
-{#if helper}
-	<p class={helperClass}>{@html helper}</p>
-{/if}
+	{:else}
+		<div class="flex">
+			<span class={spanClass}>
+				<svelte:component this={icon} className={iconClass} />
+			</span>
+			<input {type} {id} class={inputClass} {placeholder} />
+		</div>
+	{/if}
+	{#if helper}
+		<p class={helperClass}>{@html helper}</p>
+	{/if}
+</div>

package/forms/Iconinput.svelte.d.ts

@@ -2,12 +2,14 @@ import { SvelteComponentTyped } from "svelte";
 import type { SvelteComponent } from 'svelte';
 declare const __propDef: {
     props: {
+        [x: string]: any;
         label: string;
         id: string;
-        type: string;
+        type: 'button' | 'checkbox' | 'color' | 'date' | 'datetime-local' | 'email' | 'file' | 'hidden' | 'image' | 'month' | 'number' | 'password' | 'radio' | 'range' | 'reset' | 'search' | 'submit' | 'tel' | 'text' | 'time' | 'url' | 'week';
+        value?: string;
         icon: typeof SvelteComponent;
-        helper: string;
-        placeholder: string;
+        helper?: string;
+        placeholder?: string;
         noBorder?: boolean;
         labelClass?: string;
         inputClass?: string;

package/forms/Input.svelte

@@ -1,22 +1,36 @@
 <script >export let type;
-export let name;
-export let id;
-export let label;
-export let required;
-export let placeholder;
+export let value = '';
+export let name = '';
+export let id = '';
+export let label = '';
+export let required = false;
+export let placeholder = '';
 export let size = 'text-sm';
 export let inputClass = `bg-gray-50 border border-gray-300 text-gray-900 ${size} rounded-lg focus:ring-blue-500 focus:border-blue-500 block w-full 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 labelClass = 'block mb-2 text-sm font-medium text-gray-900 dark:text-gray-300';
-export let divClass = 'mb-6';
 export let disabled = false;
 export let readonly = false;
-export let helper;
+export let helper = '';
 export let helperClass = 'mt-2 text-sm text-gray-500 dark:text-gray-400';
+// you need to this to avoid 2-way binding
+function setType(node) {
+    node.type = type;
+}
 </script>
 
-<div class={divClass}>
+<div class={$$props.class}>
 	<label for={id} class={labelClass}>{label}</label>
-	<input {name} {type} {id} class={inputClass} {placeholder} {required} {disabled} {readonly} />
+	<input
+		bind:value
+		{name}
+		use:setType
+		{id}
+		class={inputClass}
+		{placeholder}
+		{required}
+		{disabled}
+		{readonly}
+	/>
 	{#if helper}
 		<p class={helperClass}>{@html helper}</p>
 	{/if}

package/forms/Input.svelte.d.ts

@@ -1,19 +1,20 @@
 import { SvelteComponentTyped } from "svelte";
 declare const __propDef: {
     props: {
-        type: string;
-        name: string;
-        id: string;
-        label: string;
-        required: boolean;
-        placeholder: string;
+        [x: string]: any;
+        type: 'button' | 'checkbox' | 'color' | 'date' | 'datetime-local' | 'email' | 'file' | 'hidden' | 'image' | 'month' | 'number' | 'password' | 'radio' | 'range' | 'reset' | 'search' | 'submit' | 'tel' | 'text' | 'time' | 'url' | 'week';
+        value?: string;
+        name?: string;
+        id?: string;
+        label?: string;
+        required?: boolean;
+        placeholder?: string;
         size?: 'sm:text-md' | 'text-sm' | 'sm:text-xs';
         inputClass?: string;
         labelClass?: string;
-        divClass?: string;
         disabled?: boolean;
         readonly?: boolean;
-        helper: string;
+        helper?: string;
         helperClass?: string;
     };
     events: {

package/forms/Radio.svelte

@@ -1,4 +1,5 @@
-<script >export let divClass = 'flex items-center mb-4';
+<script >export let legend = '';
+export let divClass = 'flex items-center mb-4';
 export let inputClass = 'w-4 h-4 border-gray-300 focus:ring-2 focus:ring-blue-300 dark:focus:ring-blue-600 dark:focus:bg-blue-600 dark:bg-gray-700 dark:border-gray-600';
 export let labelClass = 'block ml-2 text-sm font-medium text-gray-900 dark:text-gray-300';
 export let name = 'countries';
@@ -24,7 +25,7 @@ export let options = [
 </script>
 
 <fieldset>
-	<legend class="sr-only">Countries</legend>
+	<legend class="sr-only">{legend}</legend>
 	{#each options as option}
 		<div class={divClass}>
 			<input

package/forms/Radio.svelte.d.ts

@@ -1,6 +1,7 @@
 import { SvelteComponentTyped } from "svelte";
 declare const __propDef: {
     props: {
+        legend?: string;
         divClass?: string;
         inputClass?: string;
         labelClass?: string;

package/forms/Select.svelte

@@ -1,4 +1,5 @@
-<script >export let id = 'countries';
+<script >export let value;
+export let id = 'countries';
 export let name = 'country';
 export let label = 'Select your country';
 export let labelClass = 'block mb-2 text-sm font-medium text-gray-900 dark:text-gray-400';
@@ -6,6 +7,6 @@ export let selectClass = 'bg-gray-50 border border-gray-300 text-gray-900 text-s
 </script>
 
 <label for="countries" class={labelClass}>{label}</label>
-<select {id} {name} class={selectClass}>
+<select bind:value {id} {name} class={selectClass}>
 	<slot />
 </select>

package/forms/Select.svelte.d.ts

@@ -1,6 +1,7 @@
 import { SvelteComponentTyped } from "svelte";
 declare const __propDef: {
     props: {
+        value: string | number;
         id?: string;
         name?: string;
         label?: string;

package/forms/SingleCheckbox.svelte

@@ -1,14 +1,23 @@
-<script >export let id;
-export let required = true;
+<script >export let checked = false;
+export let id;
+export let required = false;
 export let label;
 export let name;
 export let inputClass = 'w-4 h-4 bg-gray-50 rounded border border-gray-300 focus:ring-3 focus:ring-blue-300 dark:bg-gray-700 dark:border-gray-600 dark:focus:ring-blue-600 dark:ring-offset-gray-800';
 export let labelClass = 'font-medium text-gray-900 dark:text-gray-300';
 </script>
 
-<div class="flex items-start mb-6">
+<div class="flex items-start">
 	<div class="flex items-center h-5">
-		<input {id} aria-describedby={id} {name} type="checkbox" class={inputClass} {required} />
+		<input
+			bind:checked
+			{id}
+			aria-describedby={id}
+			{name}
+			type="checkbox"
+			class={inputClass}
+			{required}
+		/>
 	</div>
 	<div class="ml-3 text-sm">
 		<label for={id} class={labelClass}>{label}</label>

package/forms/SingleCheckbox.svelte.d.ts

@@ -1,6 +1,7 @@
 import { SvelteComponentTyped } from "svelte";
 declare const __propDef: {
     props: {
+        checked?: boolean;
         id: string;
         required?: boolean;
         label: string;

package/forms/Textarea.svelte

@@ -1,4 +1,4 @@
-<script >// import type { TextareaType } from '../types';
+<script >export let value = '';
 export let id = 'message';
 export let name = 'message';
 export let label = 'Your message';
@@ -6,12 +6,12 @@ export let rows = 4;
 export let placeholder = 'Leave a comment...';
 export let labelClass = 'block mb-2 text-sm font-medium text-gray-900 dark:text-gray-400';
 export let textareaClass = 'block p-2.5 w-full text-sm text-gray-900 bg-gray-50 rounded-lg border border-gray-300 focus:ring-blue-500 focus:border-blue-500 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 helper;
+export let helper = '';
 export let helperClass = 'mt-2 text-sm text-gray-500 dark:text-gray-400';
 </script>
 
 <label for={id} class={labelClass}>{label}</label>
-<textarea {id} {name} {rows} class={textareaClass} {placeholder} />
+<textarea bind:value {id} {name} {rows} class={textareaClass} {placeholder} />
 {#if helper}
 	<p class={helperClass}>{@html helper}</p>
 {/if}

package/forms/Textarea.svelte.d.ts

@@ -1,6 +1,7 @@
 import { SvelteComponentTyped } from "svelte";
 declare const __propDef: {
     props: {
+        value?: string;
         id?: string;
         name?: string;
         label?: string;
@@ -8,7 +9,7 @@ declare const __propDef: {
         placeholder?: string;
         labelClass?: string;
         textareaClass?: string;
-        helper: string;
+        helper?: string;
         helperClass?: string;
     };
     events: {

package/forms/Toggle.svelte

@@ -1,6 +1,4 @@
-<script >// import type { ToggleType } from '../types';
-// export let props: ToggleType = {
-export let name = 'toggle-example';
+<script >export let name = 'toggle-example';
 export let id = 'toggle-example';
 export let label = 'Toggle me';
 export let checked = false;

package/modals/ExtraLargeModal.svelte.d.ts

@@ -1,9 +1,10 @@
 import { SvelteComponentTyped } from "svelte";
+import type { Colors } from '../types';
 declare const __propDef: {
     props: {
         id?: string;
-        btnColor?: string;
-        textColor?: string;
+        btnColor?: Colors;
+        textColor?: Colors;
         title?: string;
         btn1: string;
         btn2: string;

package/modals/LargeModal.svelte.d.ts

@@ -1,9 +1,10 @@
 import { SvelteComponentTyped } from "svelte";
+import type { Colors } from '../types';
 declare const __propDef: {
     props: {
         id?: string;
-        btnColor?: string;
-        textColor?: string;
+        btnColor?: Colors;
+        textColor?: Colors;
         title?: string;
         btn1: string;
         btn2: string;

package/modals/MediumModal.svelte.d.ts

@@ -1,9 +1,10 @@
 import { SvelteComponentTyped } from "svelte";
+import type { Colors } from '../types';
 declare const __propDef: {
     props: {
         id?: string;
-        btnColor?: string;
-        textColor?: string;
+        btnColor?: Colors;
+        textColor?: Colors;
         title?: string;
         btn1: string;
         btn2: string;

package/modals/ModalButton.svelte.d.ts

@@ -1,9 +1,10 @@
 import { SvelteComponentTyped } from "svelte";
+import type { Colors } from '../types';
 declare const __propDef: {
     props: {
         id?: string;
         btnName?: string;
-        btnColor?: string;
+        btnColor?: Colors;
         openFn?: (id: string) => void;
     };
     events: {

package/modals/SignInModal.svelte.d.ts

@@ -1,8 +1,9 @@
 import { SvelteComponentTyped } from "svelte";
+import type { Colors } from '../types';
 declare const __propDef: {
     props: {
         id?: string;
-        btnSignInColor?: string;
+        btnSignInColor?: Colors;
         titleSignIn?: string;
         lostPasswordLink: string;
         rememberMe?: boolean;

package/modals/SmallModal.svelte.d.ts

@@ -1,9 +1,10 @@
 import { SvelteComponentTyped } from "svelte";
+import type { Colors } from '../types';
 declare const __propDef: {
     props: {
         id?: string;
-        btnColor?: string;
-        textColor?: string;
+        btnColor?: Colors;
+        textColor?: Colors;
         title?: string;
         btn1: string;
         btn2: string;

package/navbar/DropdownNavbar.svelte

@@ -1,4 +1,4 @@
-<script >import { page } from '$app/stores';
+<script >import { page, session } from '$app/stores';
 let hidden = true;
 let block = false;
 let activeDropdown = undefined;
@@ -112,6 +112,9 @@ export let liButtonClass = `flex justify-between items-center py-2 pr-4 pl-3 w-f
 					{/if}
 				{/each}
 			</ul>
+			{#if $session['user']}
+				<slot name="user" />
+			{/if}
 		</div>
 	</div>
 </nav>

package/navbar/DropdownNavbar.svelte.d.ts

@@ -18,7 +18,9 @@ declare const __propDef: {
     events: {
         [evt: string]: CustomEvent<any>;
     };
-    slots: {};
+    slots: {
+        user: {};
+    };
 };
 export declare type DropdownNavbarProps = typeof __propDef.props;
 export declare type DropdownNavbarEvents = typeof __propDef.events;

package/navbar/Navbar.svelte

@@ -1,4 +1,4 @@
-<script >import { page } from '$app/stores';
+<script >import { page, session } from '$app/stores';
 export let sitename = 'Svelte Flow';
 export let logo = '/images/mkdir-logo.png';
 export let alt = 'Svelte Flow';
@@ -61,6 +61,9 @@ export let liLinkClass = `block py-2 pr-4 pl-3  text-gray-700 border-b border-gr
 					</li>
 				{/each}
 			</ul>
+			{#if $session['user']}
+				<slot name="user" />
+			{/if}
 		</div>
 	</div>
 </nav>

package/navbar/Navbar.svelte.d.ts

@@ -15,7 +15,9 @@ declare const __propDef: {
     events: {
         [evt: string]: CustomEvent<any>;
     };
-    slots: {};
+    slots: {
+        user: {};
+    };
 };
 export declare type NavbarProps = typeof __propDef.props;
 export declare type NavbarEvents = typeof __propDef.events;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "flowbite-svelte",
-  "version": "0.10.1",
+  "version": "0.10.4",
   "description": "Flowbite components for Svelte",
   "author": {
     "name": "Shinichi Okada",