flowbite-svelte 0.15.18 → 0.15.21

package/CHANGELOG.md

@@ -2,6 +2,27 @@
 
 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.21](https://github.com/themesberg/flowbite-svelte/compare/v0.15.20...v0.15.21) (2022-05-10)
+
+
+### Bug Fixes
+
+* add right round corner to FullWidthTabs ([adaf72f](https://github.com/themesberg/flowbite-svelte/commit/adaf72fd01499ec8e73cdac1cf1b50054a2d8ead))
+
+### [0.15.20](https://github.com/themesberg/flowbite-svelte/compare/v0.15.19...v0.15.20) (2022-05-10)
+
+
+### Features
+
+* add always open, color, flush, and arrow style to Accordion component ([e435bb6](https://github.com/themesberg/flowbite-svelte/commit/e435bb6cb29cbc778409379484a996a9d8fad76b))
+
+### [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/accordions/AccordionItem.svelte

@@ -1,23 +1,50 @@
 <script>import { slide } from 'svelte/transition';
+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';
-let isOpen = false;
-let activeDropdown = undefined;
+export let isOpen = false;
+export let color = false;
+export let flush = false;
+export let icons = {
+    up: ChevronUpSolid,
+    down: ChevronDownSolid
+};
+if (flush) {
+    btnClass = 'flex justify-between items-center py-5 w-full font-medium text-left text-gray-500 border-b border-gray-200 dark:border-gray-700 dark:text-gray-400';
+    slotClass = 'py-5 border-b border-gray-200 dark:border-gray-700';
+}
+// $: console.log('isOpen', isOpen);
+onMount(() => {
+    if (isOpen) {
+        isOpen = true;
+    }
+});
 const handleToggle = (id) => {
     isOpen = !isOpen;
-    activeDropdown = id;
+    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 if (flush) {
+        btnClass = 'flex justify-between items-center py-5 w-full font-medium text-left text-gray-500 border-b border-gray-200 dark:border-gray-700 dark:text-gray-400';
+        slotClass = 'py-5 border-b border-gray-200 dark:border-gray-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';
+    }
 };
+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}>
-		<span><slot name="header" /></span>
+	<button on:click={() => handleToggle(id)} type="button" class:rounded-t-xl={id === '1' && !flush} class:border-t-0={id !== '1'} class={btnClass}>
+		<slot name="header" />
 		{#if isOpen}
-			<ChevronUpSolid />
+			<svelte:component this={icons.up} size={iconSize} class="mr-2 {iconClass}" />
 		{:else}
-			<ChevronDownSolid />
+			<svelte:component this={icons.down} size={iconSize} class="mr-2 {iconClass}" />
 		{/if}
 	</button>
 </h2>

package/accordions/AccordionItem.svelte.d.ts

@@ -1,9 +1,16 @@
 import { SvelteComponentTyped } from "svelte";
+import type { AccordionIconType } from '../types';
 declare const __propDef: {
     props: {
         id?: string;
         btnClass?: string;
         slotClass?: string;
+        isOpen?: boolean;
+        color?: boolean;
+        flush?: boolean;
+        icons?: AccordionIconType;
+        iconSize?: number;
+        iconClass?: string;
     };
     events: {
         [evt: string]: CustomEvent<any>;

package/index.d.ts

@@ -1,4 +1,3 @@
-export { default as Accordion } from './accordions/AccordionDefault.svelte';
 export { default as AccordionItem } from './accordions/AccordionItem.svelte';
 export { default as Alert } from './alerts/Alert.svelte';
 export { default as BorderAlert } from './alerts/BorderAlert.svelte';
@@ -64,6 +63,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

@@ -1,5 +1,4 @@
 // Accordion
-export { default as Accordion } from './accordions/AccordionDefault.svelte';
 export { default as AccordionItem } from './accordions/AccordionItem.svelte';
 // Alerts
 export { default as Alert } from './alerts/Alert.svelte';
@@ -84,6 +83,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.21",
   "description": "Flowbite components for Svelte",
   "main": "./package/index.js",
   "author": {
@@ -81,7 +81,6 @@
   "exports": {
     "./package.json": "./package.json",
     "./.DS_Store": "./.DS_Store",
-    "./accordions/AccordionDefault.svelte": "./accordions/AccordionDefault.svelte",
     "./accordions/AccordionItem.svelte": "./accordions/AccordionItem.svelte",
     "./alerts/Alert.svelte": "./alerts/Alert.svelte",
     "./alerts/BorderAlert.svelte": "./alerts/BorderAlert.svelte",
@@ -156,6 +155,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 {};

package/tabs/FullWidthTabs.svelte

@@ -4,28 +4,16 @@ export let tabLabel;
 
 <div class="sm:hidden">
 	<label for="tabs" class="sr-only">{tabLabel}</label>
-	<select
-		id="tabs"
-		class="bg-gray-50 border border-gray-300 text-gray-900 sm:text-sm rounded-lg focus:ring-blue-500 focus:border-blue-500 block w-full p-2.5 dark:bg-gray-700 dark:border-gray-600 dark:placeholder-gray-400 dark:text-white dark:focus:ring-blue-500 dark:focus:border-blue-500"
-	>
+	<select id="tabs" class="bg-gray-50 border border-gray-300 text-gray-900 sm:text-sm rounded-lg focus:ring-blue-500 focus:border-blue-500 block w-full p-2.5 dark:bg-gray-700 dark:border-gray-600 dark:placeholder-gray-400 dark:text-white dark:focus:ring-blue-500 dark:focus:border-blue-500">
 		{#each tabs as { name }}
 			<option>{name}</option>
 		{/each}
 	</select>
 </div>
-<ul
-	class="hidden text-sm font-medium text-center text-gray-500 rounded-lg divide-x divide-gray-200 shadow sm:flex dark:divide-gray-700 dark:text-gray-400"
->
-	{#each tabs as { name, href, rel, active }}
-		<li class="w-full">
-			<a
-				{href}
-				{rel}
-				class={active
-					? 'inline-block p-4 w-full text-gray-900 bg-gray-100 rounded-l-lg focus:ring-4 focus:ring-blue-300 active focus:outline-none dark:bg-gray-700 dark:text-white'
-					: 'inline-block p-4 w-full bg-white hover:text-gray-700 hover:bg-gray-50 focus:ring-4 focus:ring-blue-300 focus:outline-none dark:hover:text-white dark:bg-gray-800 dark:hover:bg-gray-700'}
-				aria-current="page">{name}</a
-			>
+<ul class="hidden text-sm font-medium text-center text-gray-500 rounded-lg divide-x divide-gray-200 shadow sm:flex dark:divide-gray-700 dark:text-gray-400">
+	{#each tabs as { name, href, rel, active }, i}
+		<li class="w-full" data-id={i}>
+			<a {href} {rel} class:rounded-l-lg={i === 0} class:rounded-r-lg={i === tabs.length - 1} class={active ? 'inline-block p-4 w-full text-gray-900 bg-gray-100 focus:ring-4 focus:ring-blue-300 active focus:outline-none dark:bg-gray-700 dark:text-white' : 'inline-block p-4 w-full bg-white hover:text-gray-700 hover:bg-gray-50 focus:ring-4 focus:ring-blue-300 focus:outline-none dark:hover:text-white dark:bg-gray-800 dark:hover:bg-gray-700'} aria-current="page">{name}</a>
 		</li>
 	{/each}
 </ul>

package/types.d.ts

@@ -1,4 +1,8 @@
 import type { SvelteComponent } from 'svelte';
+export declare type AccordionIconType = {
+    up: typeof SvelteComponent;
+    down: typeof SvelteComponent;
+};
 export interface ActivityType {
     title: HTMLElement | string;
     date: Date | string;

package/accordions/AccordionDefault.svelte

@@ -1,25 +0,0 @@
-<script>import { onDestroy } from 'svelte';
-import { setContext } from 'svelte';
-import { createEventDispatcher } from 'svelte';
-import { writable } from 'svelte/store';
-export let duration = 0.2;
-export let easing = 'ease';
-export let id = undefined;
-const dispatch = createEventDispatcher();
-// create a store for the children to access
-const store = writable({ id, duration, easing });
-// when the store changes, update the id prop
-const unsubscribe = store.subscribe((s) => {
-    id = s.id;
-    dispatch('change', { id });
-});
-// when the id prop changes, update the store
-$: store.update((s) => Object.assign(s, { id }));
-// make the store available to children
-setContext('svelte-collapsible-accordion', store);
-onDestroy(unsubscribe);
-</script>
-
-<div>
-	<slot />
-</div>

package/accordions/AccordionDefault.svelte.d.ts

@@ -1,22 +0,0 @@
-import { SvelteComponentTyped } from "svelte";
-declare const __propDef: {
-    props: {
-        duration?: number;
-        easing?: string;
-        id?: number;
-    };
-    events: {
-        change: CustomEvent<any>;
-    } & {
-        [evt: string]: CustomEvent<any>;
-    };
-    slots: {
-        default: {};
-    };
-};
-export declare type AccordionDefaultProps = typeof __propDef.props;
-export declare type AccordionDefaultEvents = typeof __propDef.events;
-export declare type AccordionDefaultSlots = typeof __propDef.slots;
-export default class AccordionDefault extends SvelteComponentTyped<AccordionDefaultProps, AccordionDefaultEvents, AccordionDefaultSlots> {
-}
-export {};