flowbite-svelte 0.15.34 → 0.15.37

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.37](https://github.com/themesberg/flowbite-svelte/compare/v0.15.36...v0.15.37) (2022-05-18)
+
+
+### Bug Fixes
+
+* add buttonClass to AccordionItem ([8387244](https://github.com/themesberg/flowbite-svelte/commit/83872440ebb872843a0f016f7fb576d156295b96))
+
+### [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)
 
 

package/accordions/AccordionItem.svelte

@@ -2,7 +2,6 @@
 import { onMount } from 'svelte';
 import { ChevronDownSolid, ChevronUpSolid } from 'svelte-heros';
 export let id = '';
-export let btnClass = 'flex items-center focus:ring-4 focus:ring-gray-200 dark:focus:ring-gray-800 justify-between p-5 w-full font-medium border border-gray-200 dark:border-gray-700 text-left text-gray-500 dark:text-gray-400 hover:bg-gray-100 dark:hover:bg-gray-800';
 export let slotClass = 'p-5 border border-t-0 border-gray-200 dark:border-gray-700';
 export let isOpen = false;
 export let color = false;
@@ -15,21 +14,25 @@ onMount(() => {
         isOpen = true;
     }
 });
+export let btnClass = 'flex items-center focus:ring-4 focus:ring-gray-200 dark:focus:ring-gray-800 justify-between p-5 w-full font-medium border border-gray-200 dark:border-gray-700 text-left text-gray-500 dark:text-gray-400 hover:bg-gray-100 dark:hover:bg-gray-800';
+$: btnClass;
+export let colorClass = 'focus:ring-blue-200 dark:focus:ring-blue-800  hover:bg-blue-100 text-blue-500 bg-blue-200 text-blue-700';
 const handleToggle = (id) => {
     isOpen = !isOpen;
-    if (color && isOpen) {
-        btnClass = 'flex items-center focus:ring-4 focus:ring-gray-200 dark:focus:ring-gray-800 justify-between p-5 w-full font-medium border border-gray-200 dark:border-gray-700 text-left text-gray-500 dark:text-gray-400 hover:bg-gray-100 dark:hover:bg-gray-800 focus:ring-blue-200 dark:focus:ring-blue-800  hover:bg-blue-100 text-blue-500 bg-blue-200 text-blue-700';
-    }
-    else {
-        btnClass = 'flex items-center focus:ring-4 focus:ring-gray-200 dark:focus:ring-gray-800 justify-between p-5 w-full font-medium border border-gray-200 dark:border-gray-700 text-left text-gray-500 dark:text-gray-400 hover:bg-gray-100 dark:hover:bg-gray-800';
-    }
 };
+let buttonClass;
+$: if (color && isOpen) {
+    buttonClass = btnClass + colorClass;
+}
+else {
+    buttonClass = btnClass;
+}
 export let iconSize = 24;
 export let iconClass = 'text-gray-500 sm:w-6 sm:h-6 dark:text-gray-300';
 </script>
 
 <h2 aria-expanded={isOpen}>
-	<button on:click={() => handleToggle(id)} type="button" class:rounded-t-xl={id === '1'} class:border-t-0={id !== '1'} class="{btnClass} {$$props.class ? $$props.class : ''}">
+	<button on:click={() => handleToggle(id)} type="button" class:rounded-t-xl={id === '1'} class:border-t-0={id !== '1'} class="{buttonClass} {$$props.class ? $$props.class : ''}">
 		<slot name="header" />
 		{#if isOpen}
 			<svelte:component this={icons.up} size={iconSize} class="mr-2 {iconClass}" />

package/accordions/AccordionItem.svelte.d.ts

@@ -4,11 +4,12 @@ declare const __propDef: {
     props: {
         [x: string]: any;
         id?: string;
-        btnClass?: string;
         slotClass?: string;
         isOpen?: boolean;
         color?: boolean;
         icons?: AccordionIconType;
+        btnClass?: string;
+        colorClass?: string;
         iconSize?: number;
         iconClass?: string;
     };

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

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;