flowbite-svelte 0.15.32 → 0.15.35

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.35](https://github.com/themesberg/flowbite-svelte/compare/v0.15.34...v0.15.35) (2022-05-15)
+
+
+### Bug Fixes
+
+* add ulClass and childClass in SidebarItem's SidebarDropdown ([2e0f46b](https://github.com/themesberg/flowbite-svelte/commit/2e0f46b6c65037e4a40bba688936af99839bd863))
+
+### [0.15.34](https://github.com/themesberg/flowbite-svelte/compare/v0.15.33...v0.15.34) (2022-05-15)
+
+
+### Bug Fixes
+
+* add childClass and ulClass to SidebarDropdown ([8754489](https://github.com/themesberg/flowbite-svelte/commit/875448911cbf0e427f51a08b51d5f160974b159b))
+
+### [0.15.33](https://github.com/themesberg/flowbite-svelte/compare/v0.15.32...v0.15.33) (2022-05-15)
+
+
+### Features
+
+* add AccordionFlush component ([e2d297d](https://github.com/themesberg/flowbite-svelte/commit/e2d297def8272347a68fe39e3296d07d1bd2b436))
+
 ### [0.15.32](https://github.com/themesberg/flowbite-svelte/compare/v0.15.31...v0.15.32) (2022-05-15)
 
 

package/accordions/AccordionFlush.svelte

@@ -0,0 +1,40 @@
+<script>import { slide } from 'svelte/transition';
+import { onMount } from 'svelte';
+import { ChevronDownSolid, ChevronUpSolid } from 'svelte-heros';
+export let id = '';
+export let 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';
+export let slotClass = 'py-5 border-b border-gray-200 dark:border-gray-700';
+export let isOpen = false;
+export let icons = {
+    up: ChevronUpSolid,
+    down: ChevronDownSolid
+};
+onMount(() => {
+    if (isOpen) {
+        isOpen = true;
+    }
+});
+const handleToggle = (id) => {
+    isOpen = !isOpen;
+};
+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} {$$props.class ? $$props.class : ''}">
+		<slot name="header" />
+		{#if isOpen}
+			<svelte:component this={icons.up} size={iconSize} class="mr-2 {iconClass}" />
+		{:else}
+			<svelte:component this={icons.down} size={iconSize} class="mr-2 {iconClass}" />
+		{/if}
+	</button>
+</h2>
+{#if isOpen}
+	<div transition:slide={{ duration: 500 }}>
+		<div class={slotClass}>
+			<slot name="body" />
+		</div>
+	</div>
+{/if}

package/accordions/AccordionFlush.svelte.d.ts

@@ -0,0 +1,27 @@
+import { SvelteComponentTyped } from "svelte";
+import type { AccordionIconType } from '../types';
+declare const __propDef: {
+    props: {
+        [x: string]: any;
+        id?: string;
+        btnClass?: string;
+        slotClass?: string;
+        isOpen?: boolean;
+        icons?: AccordionIconType;
+        iconSize?: number;
+        iconClass?: string;
+    };
+    events: {
+        [evt: string]: CustomEvent<any>;
+    };
+    slots: {
+        header: {};
+        body: {};
+    };
+};
+export declare type AccordionFlushProps = typeof __propDef.props;
+export declare type AccordionFlushEvents = typeof __propDef.events;
+export declare type AccordionFlushSlots = typeof __propDef.slots;
+export default class AccordionFlush extends SvelteComponentTyped<AccordionFlushProps, AccordionFlushEvents, AccordionFlushSlots> {
+}
+export {};

package/accordions/AccordionItem.svelte

@@ -6,16 +6,10 @@ export let btnClass = 'flex items-center focus:ring-4 focus:ring-gray-200 dark:f
 export let slotClass = 'p-5 border border-t-0 border-gray-200 dark:border-gray-700';
 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;
@@ -26,10 +20,6 @@ const handleToggle = (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';
     }
@@ -39,7 +29,7 @@ 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' && !flush} class:border-t-0={id !== '1'} class="{btnClass} {$$props.class ? $$props.class : ''}">
+	<button on:click={() => handleToggle(id)} type="button" class:rounded-t-xl={id === '1'} class:border-t-0={id !== '1'} class="{btnClass} {$$props.class ? $$props.class : ''}">
 		<slot name="header" />
 		{#if isOpen}
 			<svelte:component this={icons.up} size={iconSize} class="mr-2 {iconClass}" />

package/accordions/AccordionItem.svelte.d.ts

@@ -8,7 +8,6 @@ declare const __propDef: {
         slotClass?: string;
         isOpen?: boolean;
         color?: boolean;
-        flush?: boolean;
         icons?: AccordionIconType;
         iconSize?: number;
         iconClass?: string;

package/index.d.ts

@@ -1,4 +1,5 @@
 export { default as AccordionItem } from './accordions/AccordionItem.svelte';
+export { default as AccordionFlush } from './accordions/AccordionFlush.svelte';
 export { default as Alert } from './alerts/Alert.svelte';
 export { default as Avatar } from './avatar/Avatar.svelte';
 export { default as Badge } from './badges/Badge.svelte';

package/index.js

@@ -1,5 +1,6 @@
 // Accordion
 export { default as AccordionItem } from './accordions/AccordionItem.svelte';
+export { default as AccordionFlush } from './accordions/AccordionFlush.svelte';
 // Alerts
 export { default as Alert } from './alerts/Alert.svelte';
 // Avatar

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "flowbite-svelte",
-  "version": "0.15.32",
+  "version": "0.15.35",
   "description": "Flowbite components for Svelte",
   "main": "index.js",
   "author": {
@@ -82,6 +82,7 @@
   "exports": {
     "./package.json": "./package.json",
     "./.DS_Store": "./.DS_Store",
+    "./accordions/AccordionFlush.svelte": "./accordions/AccordionFlush.svelte",
     "./accordions/AccordionItem.svelte": "./accordions/AccordionItem.svelte",
     "./alerts/Alert.svelte": "./alerts/Alert.svelte",
     "./avatar/Avatar.svelte": "./avatar/Avatar.svelte",

package/sidebars/SidebarDropdown.svelte

@@ -1,5 +1,7 @@
 <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) => {
@@ -17,10 +19,10 @@ const handleDropdown = (id) => {
 		<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="py-2 space-y-2" transition:slide={{ duration: 500 }}>
+		<ul id="dropdown" class={ulClass} transition:slide={{ duration: 500 }}>
 			{#each link.children as child}
 				<li>
-					<a href={child.href} rel={child.rel} class="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">{child.name}</a>
+					<a href={child.href} rel={child.rel} class={childClass}>{child.name}</a>
 				</li>
 			{/each}
 		</ul>

package/sidebars/SidebarDropdown.svelte.d.ts

@@ -3,6 +3,8 @@ import type { SidebarType } from '../types';
 declare const __propDef: {
     props: {
         link: SidebarType;
+        childClass?: string;
+        ulClass?: string;
     };
     events: {
         [evt: string]: CustomEvent<any>;

package/sidebars/SidebarItem.svelte

@@ -1,5 +1,7 @@
 <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) {
@@ -10,7 +12,7 @@ if (border) {
 <ul class={ulClass}>
 	{#each links as link (link.id)}
 		{#if link.children}
-			<SidebarDropdown {link} />
+			<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">

package/sidebars/SidebarItem.svelte.d.ts

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