flowbite-svelte 0.15.19 → 0.15.22

package/CHANGELOG.md

@@ -2,6 +2,22 @@
 
 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.22](https://github.com/themesberg/flowbite-svelte/compare/v0.15.21...v0.15.22) (2022-05-10)
+
+### [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)
 
 

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';

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';

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "flowbite-svelte",
-  "version": "0.15.19",
+  "version": "0.15.22",
   "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",

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 {};