flowbite-svelte 0.16.12 → 0.16.13

package/CHANGELOG.md

@@ -2,6 +2,8 @@
 
 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.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/package.json

@@ -1,6 +1,6 @@
 {
   "name": "flowbite-svelte",
-  "version": "0.16.12",
+  "version": "0.16.13",
   "description": "Flowbite components for Svelte",
   "main": "index.js",
   "author": {

package/sidebars/Sidebar.svelte

@@ -1,20 +1,26 @@
-<script>export let site;
+<script>export let divClass = 'overflow-y-auto py-4 px-3 bg-gray-50 rounded dark:bg-gray-800';
+export let site;
 export let cta;
 </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">
+	<div class={divClass}>
 		{#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>
+				<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>
+					<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}

package/sidebars/Sidebar.svelte.d.ts

@@ -2,6 +2,7 @@ import { SvelteComponentTyped } from "svelte";
 import type { SiteType, SidebarCtaType } from '../types';
 declare const __propDef: {
     props: {
+        divClass?: string;
         site: SiteType;
         cta: SidebarCtaType;
     };

package/sidebars/SidebarItem.svelte

@@ -1,5 +1,6 @@
 <script>import SidebarDropdown from './SidebarDropdown.svelte';
 export let links;
+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 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';
@@ -15,9 +16,14 @@ if (border) {
 			<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">
+				<a href={link.href} rel={link.rel} class={aClass}>
 					{#if link.icon}
-						<svelte:component this={link.icon} size={link.iconSize} color={link.iconColor} class="mr-2 {link.iconClass}" />
+						<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}

package/sidebars/SidebarItem.svelte.d.ts

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