flowbite-svelte 0.15.18 → 0.15.19

package/CHANGELOG.md

@@ -2,6 +2,13 @@
 
 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.19](https://github.com/themesberg/flowbite-svelte/compare/v0.15.18...v0.15.19) (2022-05-10)
+
+
+### Bug Fixes
+
+* add SidebarItem to Sidebar component ([a3a9654](https://github.com/themesberg/flowbite-svelte/commit/a3a965498817449cc90bdb20d9babe4f000e4466))
+
 ### [0.15.18](https://github.com/themesberg/flowbite-svelte/compare/v0.15.17...v0.15.18) (2022-05-10)
 
 ### [0.15.17](https://github.com/themesberg/flowbite-svelte/compare/v0.15.16...v0.15.17) (2022-05-09)

package/index.d.ts

@@ -64,6 +64,7 @@ export { default as Rating } from './ratings/Rating.svelte';
 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 Spinner } from './spinners/Spinner.svelte';
 export { default as Table } from './tables/Table.svelte';
 export { default as TableDefaultRow } from './tables/TableDefaultRow.svelte';

package/index.js

@@ -84,6 +84,7 @@ export { default as AdvancedRating } from './ratings/AdvancedRating.svelte';
 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';
 // Spin
 export { default as Spinner } from './spinners/Spinner.svelte';
 // Tables

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "flowbite-svelte",
-  "version": "0.15.18",
+  "version": "0.15.19",
   "description": "Flowbite components for Svelte",
   "main": "./package/index.js",
   "author": {
@@ -156,6 +156,7 @@
     "./ratings/ScoreRating.svelte": "./ratings/ScoreRating.svelte",
     "./sidebars/Sidebar.svelte": "./sidebars/Sidebar.svelte",
     "./sidebars/SidebarDropdown.svelte": "./sidebars/SidebarDropdown.svelte",
+    "./sidebars/SidebarItem.svelte": "./sidebars/SidebarItem.svelte",
     "./spinners/Spinner.svelte": "./spinners/Spinner.svelte",
     "./tables/Table.svelte": "./tables/Table.svelte",
     "./tables/TableCheckbox.svelte": "./tables/TableCheckbox.svelte",

package/sidebars/Sidebar.svelte

@@ -1,6 +1,4 @@
-<script>import SidebarDropdown from './SidebarDropdown.svelte';
-export let site;
-export let links;
+<script>export let site;
 export let cta;
 </script>
 
@@ -12,25 +10,7 @@ export let cta;
 				<span class="self-center text-xl font-semibold whitespace-nowrap dark:text-white">{site.name}</span>
 			</a>
 		{/if}
-		<ul class="space-y-2">
-			{#each links as link (link.id)}
-				{#if link.children}
-					<SidebarDropdown {link} />
-				{: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>
-				{/if}
-			{/each}
-		</ul>
+		<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">

package/sidebars/Sidebar.svelte.d.ts

@@ -1,15 +1,16 @@
 import { SvelteComponentTyped } from "svelte";
-import type { SiteType, SidebarType, SidebarCtaType } from '../types';
+import type { SiteType, SidebarCtaType } from '../types';
 declare const __propDef: {
     props: {
         site: SiteType;
-        links: SidebarType[];
         cta: SidebarCtaType;
     };
     events: {
         [evt: string]: CustomEvent<any>;
     };
-    slots: {};
+    slots: {
+        default: {};
+    };
 };
 export declare type SidebarProps = typeof __propDef.props;
 export declare type SidebarEvents = typeof __propDef.events;

package/sidebars/SidebarItem.svelte

@@ -0,0 +1,28 @@
+<script>import SidebarDropdown from './SidebarDropdown.svelte';
+export let links;
+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>
+
+<ul class={ulClass}>
+	{#each links as link (link.id)}
+		{#if link.children}
+			<SidebarDropdown {link} />
+		{: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>
+		{/if}
+	{/each}
+</ul>

package/sidebars/SidebarItem.svelte.d.ts

@@ -0,0 +1,18 @@
+import { SvelteComponentTyped } from "svelte";
+import type { SidebarType } from '../types';
+declare const __propDef: {
+    props: {
+        links: SidebarType[];
+        border?: boolean;
+    };
+    events: {
+        [evt: string]: CustomEvent<any>;
+    };
+    slots: {};
+};
+export declare type SidebarItemProps = typeof __propDef.props;
+export declare type SidebarItemEvents = typeof __propDef.events;
+export declare type SidebarItemSlots = typeof __propDef.slots;
+export default class SidebarItem extends SvelteComponentTyped<SidebarItemProps, SidebarItemEvents, SidebarItemSlots> {
+}
+export {};