flowbite-svelte 0.15.16 → 0.15.19

package/CHANGELOG.md

@@ -2,6 +2,23 @@
 
 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)
+
+
+### Bug Fixes
+
+* remove svelte-collapse from Accordion component ([7b8a642](https://github.com/themesberg/flowbite-svelte/commit/7b8a642284947c7b8c6bbabecad2ddb2cc1f3d04))
+* update svelte-sidebar-menu to 0.8.4 ([3b07355](https://github.com/themesberg/flowbite-svelte/commit/3b073553c392f4adb47254beb49769d4e150eaa4))
+
 ### [0.15.16](https://github.com/themesberg/flowbite-svelte/compare/v0.15.15...v0.15.16) (2022-05-09)
 
 

package/accordions/AccordionItem.svelte

@@ -1,37 +1,30 @@
-<script>import { getContext } from 'svelte';
-import collapse from 'svelte-collapse';
+<script>import { slide } from 'svelte/transition';
 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';
-const store = getContext('svelte-collapsible-accordion');
-$: params = {
-    open: $store.id === id,
-    duration: $store.duration,
-    easing: $store.easing
-};
-const handleToggle = () => {
-    if (params.open) {
-        store.update((s) => Object.assign(s, { id: null }));
-    }
-    else {
-        store.update((s) => Object.assign(s, { id }));
-    }
+let isOpen = false;
+let activeDropdown = undefined;
+const handleToggle = (id) => {
+    isOpen = !isOpen;
+    activeDropdown = id;
 };
 </script>
 
-<h2 aria-expanded={params.open}>
-	<button on:click={handleToggle} type="button" class:rounded-t-xl={id === '1'} class:border-t-0={id !== '1'} class={btnClass}>
+<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}>
 		<span><slot name="header" /></span>
-		{#if params.open}
+		{#if isOpen}
 			<ChevronUpSolid />
 		{:else}
 			<ChevronDownSolid />
 		{/if}
 	</button>
 </h2>
-<div use:collapse={params}>
-	<div class={slotClass}>
-		<slot name="body" />
+{#if isOpen}
+	<div transition:slide={{ duration: 500 }}>
+		<div class={slotClass}>
+			<slot name="body" />
+		</div>
 	</div>
-</div>
+{/if}

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.16",
+  "version": "0.15.19",
   "description": "Flowbite components for Svelte",
   "main": "./package/index.js",
   "author": {
@@ -12,7 +12,6 @@
   "homepage": "https://flowbite-svelte.com/",
   "license": "MIT",
   "devDependencies": {
-    "@codewithshin/svelte-utterances": "^0.2.2",
     "@playwright/test": "^1.21.0",
     "@sveltejs/adapter-auto": "next",
     "@sveltejs/kit": "next",
@@ -31,10 +30,8 @@
     "prism-themes": "^1.9.0",
     "svelte": "^3.47.0",
     "svelte-check": "^2.2.6",
-    "svelte-feathers": "^0.1.15",
     "svelte-preprocess": "^4.10.5",
-    "svelte-sidebar-menu": "^0.7.6",
-    "svelte-simples": "^0.3.1",
+    "svelte-sidebar-menu": "^0.8.4",
     "svelte2tsx": "^0.5.9",
     "tailwindcss": "^3.0.23",
     "tslib": "^2.3.1",
@@ -79,7 +76,6 @@
   },
   "dependencies": {
     "flowbite": "^1.4.2",
-    "svelte-collapse": "^0.0.4",
     "svelte-heros": "^2.0.0"
   },
   "exports": {
@@ -160,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 {};