flowbite-svelte 0.16.12 → 0.17.0

package/CHANGELOG.md

@@ -2,6 +2,28 @@
 
 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.17.0](https://github.com/themesberg/flowbite-svelte/compare/v0.16.14...v0.17.0) (2022-06-07)
+
+
+### ⚠ BREAKING CHANGES
+
+* read the doc how to use them
+
+### Features
+
+* add {...39090restProps} to ButtonGroup ([9744917](https://github.com/themesberg/flowbite-svelte/commit/9744917f9a036771e1ec285f43de56502e776a3d))
+* new sidebar structure ([bf35b3e](https://github.com/themesberg/flowbite-svelte/commit/bf35b3e230b9d2f9b27d2e9576c70a3db47bc48c))
+* update Sidebar components ([4f15325](https://github.com/themesberg/flowbite-svelte/commit/4f153257b519d4cbbb405a357e4c6ee7ebe30249))
+
+### [0.16.14](https://github.com/themesberg/flowbite-svelte/compare/v0.16.13...v0.16.14) (2022-06-07)
+
+
+### Features
+
+* add {...39090restProps} to ButtonGroupItem ([6af6066](https://github.com/themesberg/flowbite-svelte/commit/6af6066928200750036b5f19e2711383f02ccfa3))
+
+### [0.16.13](https://github.com/themesberg/flowbite-svelte/compare/v0.16.12...v0.16.13) (2022-06-07)
+
 ### [0.16.12](https://github.com/themesberg/flowbite-svelte/compare/v0.16.11...v0.16.12) (2022-06-07)
 
 

package/buttongroups/ButtonGroup.svelte

@@ -1,6 +1,6 @@
 <script>export let divClass = 'inline-flex rounded-md shadow-sm';
 </script>
 
-<div class="{divClass} {$$props.class}" role="group">
+<div class="{divClass} {$$props.class}" {...$$restProps} role="group">
 	<slot />
 </div>

package/buttongroups/ButtonGroupItem.svelte

@@ -9,9 +9,9 @@ if (outline) {
 </script>
 
 {#if href}
-	<a {href} class="{btnClass} {$$props.class}" on:click><slot /></a>
+	<a {href} class="{btnClass} {$$props.class}" {...$$restProps} on:click><slot /></a>
 {:else}
-	<button {type} class="{btnClass} {$$props.class}" on:click>
+	<button {type} class="{btnClass} {$$props.class}" {...$$restProps} on:click>
 		<slot />
 	</button>
 {/if}

package/index.d.ts

@@ -67,6 +67,12 @@ export { default as AdvancedRating } from './ratings/AdvancedRating.svelte';
 export { default as ScoreRating } from './ratings/ScoreRating.svelte';
 export { default as Sidebar } from './sidebars/Sidebar.svelte';
 export { default as SidebarItem } from './sidebars/SidebarItem.svelte';
+export { default as SidebarBrand } from './sidebars/SidebarBrand.svelte';
+export { default as SidebarCta } from './sidebars/SidebarCta.svelte';
+export { default as SidebarDropdownItem } from './sidebars/SidebarDropdownItem.svelte';
+export { default as SidebarDropdownWrapper } from './sidebars/SidebarDropdownWrapper.svelte';
+export { default as SidebarGroup } from './sidebars/SidebarGroup.svelte';
+export { default as SidebarWrapper } from './sidebars/SidebarWrapper.svelte';
 export { default as Spinner } from './spinners/Spinner.svelte';
 export { default as Table } from './tables/Table.svelte';
 export { default as TableDefaultRow } from './tables/TableDefaultRow.svelte';

package/index.js

@@ -87,6 +87,12 @@ export { default as ScoreRating } from './ratings/ScoreRating.svelte';
 // Sidebar
 export { default as Sidebar } from './sidebars/Sidebar.svelte';
 export { default as SidebarItem } from './sidebars/SidebarItem.svelte';
+export { default as SidebarBrand } from './sidebars/SidebarBrand.svelte';
+export { default as SidebarCta } from './sidebars/SidebarCta.svelte';
+export { default as SidebarDropdownItem } from './sidebars/SidebarDropdownItem.svelte';
+export { default as SidebarDropdownWrapper } from './sidebars/SidebarDropdownWrapper.svelte';
+export { default as SidebarGroup } from './sidebars/SidebarGroup.svelte';
+export { default as SidebarWrapper } from './sidebars/SidebarWrapper.svelte';
 // Spin
 export { default as Spinner } from './spinners/Spinner.svelte';
 // Tables

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "flowbite-svelte",
-  "version": "0.16.12",
+  "version": "0.17.0",
   "description": "Flowbite components for Svelte",
   "main": "index.js",
   "author": {
@@ -162,8 +162,13 @@
     "./ratings/RatingComment.svelte": "./ratings/RatingComment.svelte",
     "./ratings/ScoreRating.svelte": "./ratings/ScoreRating.svelte",
     "./sidebars/Sidebar.svelte": "./sidebars/Sidebar.svelte",
-    "./sidebars/SidebarDropdown.svelte": "./sidebars/SidebarDropdown.svelte",
+    "./sidebars/SidebarBrand.svelte": "./sidebars/SidebarBrand.svelte",
+    "./sidebars/SidebarCta.svelte": "./sidebars/SidebarCta.svelte",
+    "./sidebars/SidebarDropdownItem.svelte": "./sidebars/SidebarDropdownItem.svelte",
+    "./sidebars/SidebarDropdownWrapper.svelte": "./sidebars/SidebarDropdownWrapper.svelte",
+    "./sidebars/SidebarGroup.svelte": "./sidebars/SidebarGroup.svelte",
     "./sidebars/SidebarItem.svelte": "./sidebars/SidebarItem.svelte",
+    "./sidebars/SidebarWrapper.svelte": "./sidebars/SidebarWrapper.svelte",
     "./spinners/Spinner.svelte": "./spinners/Spinner.svelte",
     "./tables/Table.svelte": "./tables/Table.svelte",
     "./tables/TableCheckbox.svelte": "./tables/TableCheckbox.svelte",

package/sidebars/Sidebar.svelte

@@ -1,25 +1,6 @@
-<script>export let site;
-export let cta;
+<script>export let asideClass = 'w-64';
 </script>
 
-<aside class="w-64" aria-label="Sidebar">
-	<div class="overflow-y-auto py-4 px-3 bg-gray-50 rounded dark:bg-gray-800">
-		{#if site}
-			<a href={site.href} class="flex items-center pl-2.5 mb-5">
-				<img src={site.img} class="h-6 mr-3 sm:h-7" alt={site.name} />
-				<span class="self-center text-xl font-semibold whitespace-nowrap dark:text-white">{site.name}</span>
-			</a>
-		{/if}
-		<slot />
-		{#if cta}
-			<div id="dropdown-cta" class="p-4 mt-6 bg-blue-50 rounded-lg dark:bg-blue-900" role="alert">
-				<div class="flex items-center mb-3">
-					<span class="bg-orange-100 text-orange-800 text-sm font-semibold mr-2 px-2.5 py-0.5 rounded dark:bg-orange-200 dark:text-orange-900">{cta.label}</span>
-				</div>
-				<p class="mb-3 text-sm text-blue-900 dark:text-blue-400">
-					{cta.text}
-				</p>
-			</div>
-		{/if}
-	</div>
+<aside class="{asideClass} {$$props.class || ''}" {...$$restProps} aria-label="Sidebar">
+	<slot />
 </aside>

package/sidebars/Sidebar.svelte.d.ts

@@ -1,9 +1,8 @@
 import { SvelteComponentTyped } from "svelte";
-import type { SiteType, SidebarCtaType } from '../types';
 declare const __propDef: {
     props: {
-        site: SiteType;
-        cta: SidebarCtaType;
+        [x: string]: any;
+        asideClass?: string;
     };
     events: {
         [evt: string]: CustomEvent<any>;

package/sidebars/SidebarBrand.svelte

@@ -0,0 +1,10 @@
+<script>export let site;
+export let aClass = 'flex items-center pl-2.5 mb-5';
+export let imgClass = 'h-6 mr-3 sm:h-7';
+export let spanClass = 'self-center text-xl font-semibold whitespace-nowrap dark:text-white';
+</script>
+
+<a href={site.href} class="{aClass} {$$props.class || ''}" {...$$restProps}>
+	<img src={site.img} class={imgClass} alt={site.name} />
+	<span class={spanClass}>{site.name}</span>
+</a>

package/sidebars/SidebarBrand.svelte.d.ts

@@ -0,0 +1,21 @@
+import { SvelteComponentTyped } from "svelte";
+import type { SiteType } from '../types';
+declare const __propDef: {
+    props: {
+        [x: string]: any;
+        site: SiteType;
+        aClass?: string;
+        imgClass?: string;
+        spanClass?: string;
+    };
+    events: {
+        [evt: string]: CustomEvent<any>;
+    };
+    slots: {};
+};
+export declare type SidebarBrandProps = typeof __propDef.props;
+export declare type SidebarBrandEvents = typeof __propDef.events;
+export declare type SidebarBrandSlots = typeof __propDef.slots;
+export default class SidebarBrand extends SvelteComponentTyped<SidebarBrandProps, SidebarBrandEvents, SidebarBrandSlots> {
+}
+export {};

package/sidebars/SidebarCta.svelte

@@ -0,0 +1,15 @@
+<script>export let divWrapperClass = 'p-4 mt-6 bg-blue-50 rounded-lg dark:bg-blue-900';
+export let divClass = 'flex items-center mb-3';
+export let spanClass = 'bg-orange-100 text-orange-800 text-sm font-semibold mr-2 px-2.5 py-0.5 rounded dark:bg-orange-200 dark:text-orange-900';
+export let label = '';
+</script>
+
+<div id="dropdown-cta" class={divWrapperClass} role="alert">
+	<div class={divClass}>
+		<span class={spanClass}>{label}</span>
+		{#if $$slots.icon}
+			<slot name="icon" />
+		{/if}
+	</div>
+	<slot />
+</div>

package/sidebars/SidebarCta.svelte.d.ts

@@ -0,0 +1,22 @@
+import { SvelteComponentTyped } from "svelte";
+declare const __propDef: {
+    props: {
+        divWrapperClass?: string;
+        divClass?: string;
+        spanClass?: string;
+        label?: string;
+    };
+    events: {
+        [evt: string]: CustomEvent<any>;
+    };
+    slots: {
+        icon: {};
+        default: {};
+    };
+};
+export declare type SidebarCtaProps = typeof __propDef.props;
+export declare type SidebarCtaEvents = typeof __propDef.events;
+export declare type SidebarCtaSlots = typeof __propDef.slots;
+export default class SidebarCta extends SvelteComponentTyped<SidebarCtaProps, SidebarCtaEvents, SidebarCtaSlots> {
+}
+export {};

package/sidebars/SidebarDropdownItem.svelte

@@ -0,0 +1,8 @@
+<script>export let aClass = '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 href = '';
+export let label = '';
+</script>
+
+<li>
+	<a {href} class={aClass}>{label}</a>
+</li>

package/sidebars/SidebarDropdownItem.svelte.d.ts

@@ -0,0 +1,18 @@
+import { SvelteComponentTyped } from "svelte";
+declare const __propDef: {
+    props: {
+        aClass?: string;
+        href?: string;
+        label?: string;
+    };
+    events: {
+        [evt: string]: CustomEvent<any>;
+    };
+    slots: {};
+};
+export declare type SidebarDropdownItemProps = typeof __propDef.props;
+export declare type SidebarDropdownItemEvents = typeof __propDef.events;
+export declare type SidebarDropdownItemSlots = typeof __propDef.slots;
+export default class SidebarDropdownItem extends SvelteComponentTyped<SidebarDropdownItemProps, SidebarDropdownItemEvents, SidebarDropdownItemSlots> {
+}
+export {};

package/sidebars/SidebarDropdownWrapper.svelte

@@ -0,0 +1,41 @@
+<script>import { slide } from 'svelte/transition';
+import { quintOut } from 'svelte/easing';
+import { ChevronDown } from 'svelte-heros';
+export let btnClass = 'flex items-center p-2 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 label = '';
+export let spanClass = 'flex-1 ml-3 text-left whitespace-nowrap';
+export let ulClass = 'py-2 space-y-2';
+export let icon;
+let isOpen = false;
+const handleDropdown = () => {
+    isOpen = !isOpen;
+};
+</script>
+
+<li>
+	<button
+		on:click={() => handleDropdown()}
+		type="button"
+		class="{btnClass} {$$props.class || ''}"
+		{...$$restProps}
+		aria-controls="sidebar-dropdown"
+	>
+		<svelte:component
+			this={icon.name}
+			size={icon.size}
+			color={icon.color}
+			class="mr-2 {icon.class}"
+		/>
+		<span class={spanClass} sidebar-toggle-item>{label}</span>
+		<ChevronDown />
+	</button>
+	{#if isOpen}
+		<ul
+			id="dropdown"
+			class={ulClass}
+			transition:slide={{ delay: 250, duration: 300, easing: quintOut }}
+		>
+			<slot />
+		</ul>
+	{/if}
+</li>

package/sidebars/SidebarDropdownWrapper.svelte.d.ts

@@ -0,0 +1,24 @@
+import { SvelteComponentTyped } from "svelte";
+import type { IconType } from '../types';
+declare const __propDef: {
+    props: {
+        [x: string]: any;
+        btnClass?: string;
+        label?: string;
+        spanClass?: string;
+        ulClass?: string;
+        icon: IconType;
+    };
+    events: {
+        [evt: string]: CustomEvent<any>;
+    };
+    slots: {
+        default: {};
+    };
+};
+export declare type SidebarDropdownWrapperProps = typeof __propDef.props;
+export declare type SidebarDropdownWrapperEvents = typeof __propDef.events;
+export declare type SidebarDropdownWrapperSlots = typeof __propDef.slots;
+export default class SidebarDropdownWrapper extends SvelteComponentTyped<SidebarDropdownWrapperProps, SidebarDropdownWrapperEvents, SidebarDropdownWrapperSlots> {
+}
+export {};

package/sidebars/SidebarGroup.svelte

@@ -0,0 +1,11 @@
+<script>export let ulClass = 'space-y-2';
+export let borderClass = 'pt-4 mt-4 border-t border-gray-200 dark:border-gray-700';
+export let border = false;
+if (border) {
+    ulClass += ' ' + borderClass;
+}
+</script>
+
+<ul class="{ulClass} {$$props.class || ''}" {...$$restProps}>
+	<slot />
+</ul>

package/sidebars/SidebarGroup.svelte.d.ts

@@ -0,0 +1,21 @@
+import { SvelteComponentTyped } from "svelte";
+declare const __propDef: {
+    props: {
+        [x: string]: any;
+        ulClass?: string;
+        borderClass?: string;
+        border?: boolean;
+    };
+    events: {
+        [evt: string]: CustomEvent<any>;
+    };
+    slots: {
+        default: {};
+    };
+};
+export declare type SidebarGroupProps = typeof __propDef.props;
+export declare type SidebarGroupEvents = typeof __propDef.events;
+export declare type SidebarGroupSlots = typeof __propDef.slots;
+export default class SidebarGroup extends SvelteComponentTyped<SidebarGroupProps, SidebarGroupEvents, SidebarGroupSlots> {
+}
+export {};

package/sidebars/SidebarItem.svelte

@@ -1,30 +1,22 @@
-<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) {
-    ulClass = 'pt-4 mt-4 space-y-2 border-t border-gray-200 dark:border-gray-700';
-}
+<script>export let aClass = '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';
+export let href = '';
+export let rel = '';
+export let label = '';
+export let spanClass = 'ml-3';
+export let icon;
 </script>
 
-<ul class={ulClass}>
-	{#each links as link (link.id)}
-		{#if link.children}
-			<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">
-					{#if link.icon}
-						<svelte:component this={link.icon} size={link.iconSize} color={link.iconColor} class="mr-2 {link.iconClass}" />
-					{/if}
-					<span class="ml-3">{link.name}</span>
-					{#if link.subtext}
-						{@html link.subtext}
-					{/if}
-				</a>
-			</li>
+<li>
+	<a {href} {rel} class="{aClass} {$$props.class || ''}" {...$$restProps}>
+		<svelte:component
+			this={icon.name}
+			size={icon.size}
+			color={icon.color}
+			class="mr-2 {icon.class}"
+		/>
+		<span class={spanClass}>{label}</span>
+		{#if $$slots.subtext}
+			<slot name="subtext" />
 		{/if}
-	{/each}
-</ul>
+	</a>
+</li>

package/sidebars/SidebarItem.svelte.d.ts

@@ -1,16 +1,21 @@
 import { SvelteComponentTyped } from "svelte";
-import type { SidebarType } from '../types';
+import type { IconType } from '../types';
 declare const __propDef: {
     props: {
-        links: SidebarType[];
-        childClass?: string;
-        dropDownulClass?: string;
-        border?: boolean;
+        [x: string]: any;
+        aClass?: string;
+        href?: string;
+        rel?: string;
+        label?: string;
+        spanClass?: string;
+        icon: IconType;
     };
     events: {
         [evt: string]: CustomEvent<any>;
     };
-    slots: {};
+    slots: {
+        subtext: {};
+    };
 };
 export declare type SidebarItemProps = typeof __propDef.props;
 export declare type SidebarItemEvents = typeof __propDef.events;

package/sidebars/SidebarWrapper.svelte

@@ -0,0 +1,6 @@
+<script>export let divClass = 'overflow-y-auto py-4 px-3 bg-gray-50 rounded dark:bg-gray-800';
+</script>
+
+<div class="{divClass} {$$props.class || ''}" {...$$restProps}>
+	<slot />
+</div>

package/sidebars/SidebarWrapper.svelte.d.ts

@@ -0,0 +1,19 @@
+import { SvelteComponentTyped } from "svelte";
+declare const __propDef: {
+    props: {
+        [x: string]: any;
+        divClass?: string;
+    };
+    events: {
+        [evt: string]: CustomEvent<any>;
+    };
+    slots: {
+        default: {};
+    };
+};
+export declare type SidebarWrapperProps = typeof __propDef.props;
+export declare type SidebarWrapperEvents = typeof __propDef.events;
+export declare type SidebarWrapperSlots = typeof __propDef.slots;
+export default class SidebarWrapper extends SvelteComponentTyped<SidebarWrapperProps, SidebarWrapperEvents, SidebarWrapperSlots> {
+}
+export {};

package/types.d.ts

@@ -78,6 +78,12 @@ export interface GroupTimelineType {
     isPrivate?: boolean;
     comment?: string | HTMLElement;
 }
+export interface IconType {
+    name: string;
+    size?: number;
+    color?: Colors;
+    class?: string;
+}
 export interface IconTabType {
     name: string;
     active: boolean;

package/sidebars/SidebarDropdown.svelte

@@ -1,30 +0,0 @@
-<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) => {
-    isOpen = !isOpen;
-    activeDropdown = id;
-};
-</script>
-
-<li>
-	<button type="button" on:click={() => handleDropdown(link.id)} class="flex items-center p-2 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" aria-controls="dropdown">
-		{#if link.icon}
-			<svelte:component this={link.icon} class="mr-2 {link.iconClass}" size={link.iconSize} color={link.iconColor} />
-		{/if}
-		<span class="flex-1 ml-3 text-left whitespace-nowrap" sidebar-toggle-item="">{link.name}</span>
-		<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={ulClass} transition:slide={{ duration: 500 }}>
-			{#each link.children as child}
-				<li>
-					<a href={child.href} rel={child.rel} class={childClass}>{child.name}</a>
-				</li>
-			{/each}
-		</ul>
-	{/if}
-</li>

package/sidebars/SidebarDropdown.svelte.d.ts

@@ -1,19 +0,0 @@
-import { SvelteComponentTyped } from "svelte";
-import type { SidebarType } from '../types';
-declare const __propDef: {
-    props: {
-        link: SidebarType;
-        childClass?: string;
-        ulClass?: string;
-    };
-    events: {
-        [evt: string]: CustomEvent<any>;
-    };
-    slots: {};
-};
-export declare type SidebarDropdownProps = typeof __propDef.props;
-export declare type SidebarDropdownEvents = typeof __propDef.events;
-export declare type SidebarDropdownSlots = typeof __propDef.slots;
-export default class SidebarDropdown extends SvelteComponentTyped<SidebarDropdownProps, SidebarDropdownEvents, SidebarDropdownSlots> {
-}
-export {};