flowbite-svelte 0.15.33 → 0.15.36

package/CHANGELOG.md

@@ -2,6 +2,30 @@
 
 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)
+
+
+### Bug Fixes
+
+* add ulClass and childClass in SidebarItem's SidebarDropdown ([2e0f46b](https://github.com/themesberg/flowbite-svelte/commit/2e0f46b6c65037e4a40bba688936af99839bd863))
+
+### [0.15.34](https://github.com/themesberg/flowbite-svelte/compare/v0.15.33...v0.15.34) (2022-05-15)
+
+
+### Bug Fixes
+
+* add childClass and ulClass to SidebarDropdown ([8754489](https://github.com/themesberg/flowbite-svelte/commit/875448911cbf0e427f51a08b51d5f160974b159b))
+
 ### [0.15.33](https://github.com/themesberg/flowbite-svelte/compare/v0.15.32...v0.15.33) (2022-05-15)
 
 

package/accordions/AccordionItem.svelte

@@ -6,16 +6,10 @@ export let btnClass = 'flex items-center focus:ring-4 focus:ring-gray-200 dark:f
 export let slotClass = 'p-5 border border-t-0 border-gray-200 dark:border-gray-700';
 export let isOpen = false;
 export let color = false;
-// export let flush: boolean = false;
 export let icons = {
     up: ChevronUpSolid,
     down: ChevronDownSolid
 };
-// if (flush) {
-// 	btnClass = 'flex justify-between items-center py-5 w-full font-medium text-left text-gray-500 border-b border-gray-200 dark:border-gray-700 dark:text-gray-400';
-// 	slotClass = 'py-5 border-b border-gray-200 dark:border-gray-700';
-// }
-// $: console.log('isOpen', isOpen);
 onMount(() => {
     if (isOpen) {
         isOpen = true;

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.33",
+  "version": "0.15.36",
   "description": "Flowbite components for Svelte",
   "main": "index.js",
   "author": {

package/sidebars/SidebarDropdown.svelte

@@ -1,5 +1,7 @@
 <script>import { slide } from 'svelte/transition';
 export let link;
+export let childClass = 'flex items-center p-2 pl-11 w-full text-base font-normal text-gray-900 rounded-lg transition duration-75 group hover:bg-gray-100 dark:text-white dark:hover:bg-gray-700';
+export let ulClass = 'py-2 space-y-2';
 let isOpen = false;
 let activeDropdown = undefined;
 const handleDropdown = (id) => {
@@ -17,10 +19,10 @@ const handleDropdown = (id) => {
 		<svg sidebar-toggle-item="" class="w-6 h-6" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><path fill-rule="evenodd" d="M5.293 7.293a1 1 0 011.414 0L10 10.586l3.293-3.293a1 1 0 111.414 1.414l-4 4a1 1 0 01-1.414 0l-4-4a1 1 0 010-1.414z" clip-rule="evenodd" /></svg>
 	</button>
 	{#if isOpen && link.id == activeDropdown}
-		<ul id="dropdown" class="py-2 space-y-2" transition:slide={{ duration: 500 }}>
+		<ul id="dropdown" class={ulClass} transition:slide={{ duration: 500 }}>
 			{#each link.children as child}
 				<li>
-					<a href={child.href} rel={child.rel} class="flex items-center p-2 pl-11 w-full text-base font-normal text-gray-900 rounded-lg transition duration-75 group hover:bg-gray-100 dark:text-white dark:hover:bg-gray-700">{child.name}</a>
+					<a href={child.href} rel={child.rel} class={childClass}>{child.name}</a>
 				</li>
 			{/each}
 		</ul>

package/sidebars/SidebarDropdown.svelte.d.ts

@@ -3,6 +3,8 @@ import type { SidebarType } from '../types';
 declare const __propDef: {
     props: {
         link: SidebarType;
+        childClass?: string;
+        ulClass?: string;
     };
     events: {
         [evt: string]: CustomEvent<any>;

package/sidebars/SidebarItem.svelte

@@ -1,5 +1,7 @@
 <script>import SidebarDropdown from './SidebarDropdown.svelte';
 export let links;
+export let childClass = 'flex items-center p-2 pl-11 w-full text-base font-normal text-gray-900 rounded-lg transition duration-75 group hover:bg-gray-100 dark:text-white dark:hover:bg-gray-700';
+export let dropDownulClass = 'py-2 space-y-2';
 let ulClass = 'space-y-2';
 export let border = false;
 if (border) {
@@ -10,7 +12,7 @@ if (border) {
 <ul class={ulClass}>
 	{#each links as link (link.id)}
 		{#if link.children}
-			<SidebarDropdown {link} />
+			<SidebarDropdown {link} ulClass={dropDownulClass} {childClass} />
 		{:else}
 			<li>
 				<a href={link.href} rel={link.rel} class="flex items-center p-2 text-base font-normal text-gray-900 rounded-lg dark:text-white hover:bg-gray-100 dark:hover:bg-gray-700">

package/sidebars/SidebarItem.svelte.d.ts

@@ -3,6 +3,8 @@ import type { SidebarType } from '../types';
 declare const __propDef: {
     props: {
         links: SidebarType[];
+        childClass?: string;
+        dropDownulClass?: string;
         border?: boolean;
     };
     events: {

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;