flowbite-svelte 0.25.16 → 0.25.17

package/CHANGELOG.md

@@ -2,6 +2,18 @@
 
 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.25.17](https://github.com/themesberg/flowbite-svelte/compare/v0.25.16...v0.25.17) (2022-08-27)
+
+
+### Features
+
+* combine Accordionflush and AccordionItem ([e53fa64](https://github.com/themesberg/flowbite-svelte/commit/e53fa6421ca747ed46d6432b67715b3eedf4cbba))
+
+
+### Bug Fixes
+
+* textarea docs ([133b933](https://github.com/themesberg/flowbite-svelte/commit/133b9334841ac13d82c3a86bc24b3375de0972ff))
+
 ### [0.25.16](https://github.com/themesberg/flowbite-svelte/compare/v0.25.15...v0.25.16) (2022-08-25)
 
 

package/accordions/AccordionItem.svelte

@@ -1,34 +1,25 @@
 <script>import classNames from 'classnames';
 import { slide } from 'svelte/transition';
-import { onMount } from 'svelte';
-import { ChevronDown, ChevronUp } from 'svelte-heros';
+export let flush = false;
 export let id = '';
-export let slotClass = 'p-5 border border-t-0 border-gray-200 dark:border-gray-700';
+export let slotClass = 'border-gray-200 dark:border-gray-700';
+let classSlot = classNames(slotClass, flush ? 'py-5 border-b' : 'p-5 border border-t-0');
 export let isOpen = false;
 export let color = false;
-export let icons = {
-    up: ChevronUp,
-    down: ChevronDown
-};
-export let iconSize = 24;
-export let iconClass = 'text-gray-500 sm:w-6 sm:h-6 dark:text-gray-300';
-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 colorClass = 'focus:ring-blue-200 dark:focus:ring-blue-800  hover:bg-blue-100 text-blue-500 bg-blue-200 text-blue-700';
-$: btnClass;
-onMount(() => {
-    if (isOpen) {
-        isOpen = true;
-    }
-});
+export let btnClass = 'flex items-center justify-between w-full font-medium text-left text-gray-500 border-gray-200 dark:border-gray-700 dark:text-gray-400';
+let classBtn = classNames(btnClass, flush
+    ? 'py-5 border-b'
+    : 'focus:ring-4 focus:ring-gray-200 dark:focus:ring-gray-800 p-5 border hover:bg-gray-100 dark:hover:bg-gray-800');
+export let colorClass = 'focus:ring-blue-200 dark:focus:ring-blue-800 hover:bg-blue-100 text-blue-500 bg-blue-200 text-blue-700';
 const handleToggle = (id) => {
     isOpen = !isOpen;
 };
 let buttonClass;
 $: if (color && isOpen) {
-    buttonClass = btnClass + colorClass;
+    buttonClass = classBtn + colorClass;
 }
 else {
-    buttonClass = btnClass;
+    buttonClass = classBtn;
 }
 </script>
 
@@ -42,15 +33,43 @@ else {
 	>
 		<slot name="header" />
 		{#if isOpen}
-			<svelte:component this={icons.up} size={iconSize} class="mr-2 {iconClass}" />
+			{#if $$slots.arrowup}
+				<slot name="arrowup" />
+			{:else}
+				<svg
+					data-accordion-icon
+					class="w-6 h-6 rotate-180 shrink-0"
+					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
+				>
+			{/if}
+		{:else if $$slots.arrowdown}
+			<slot name="arrowdown" />
 		{:else}
-			<svelte:component this={icons.down} size={iconSize} class="mr-2 {iconClass}" />
+			<svg
+				data-accordion-icon
+				class="w-6 h-6 shrink-0"
+				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
+			>
 		{/if}
 	</button>
 </h2>
 {#if isOpen}
 	<div transition:slide={{ duration: 500 }}>
-		<div class={slotClass}>
+		<div class={classSlot}>
 			<slot name="body" />
 		</div>
 	</div>

package/accordions/AccordionItem.svelte.d.ts

@@ -1,15 +1,12 @@
 import { SvelteComponentTyped } from "svelte";
-import type { AccordionIconType } from '../types';
 declare const __propDef: {
     props: {
         [x: string]: any;
+        flush?: boolean;
         id?: string;
         slotClass?: string;
         isOpen?: boolean;
         color?: boolean;
-        icons?: AccordionIconType;
-        iconSize?: number;
-        iconClass?: string;
         btnClass?: string;
         colorClass?: string;
     };
@@ -18,6 +15,8 @@ declare const __propDef: {
     };
     slots: {
         header: {};
+        arrowup: {};
+        arrowdown: {};
         body: {};
     };
 };

package/index.d.ts

@@ -1,5 +1,4 @@
 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,6 +1,5 @@
 // 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.25.16",
+  "version": "0.25.17",
   "description": "Flowbite components for Svelte",
   "main": "index.js",
   "author": {
@@ -100,7 +100,6 @@
   "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/utils/Popper.svelte

@@ -77,6 +77,7 @@ $: divClass = classNames('z-10', animation && `transition-opacity ${animation}`,
 	on:focusout={activeContent ? hideHandler : undefined}
 	on:mouseenter={activeContent && !clickable ? showHandler : undefined}
 	on:mouseleave={activeContent && !clickable ? hideHandler : undefined}
+	style="position: absolute;"
 >
 	<slot />
 	{#if arrow}<div data-popper-arrow />{/if}

package/accordions/AccordionFlush.svelte

@@ -1,47 +0,0 @@
-<script>import classNames from 'classnames';
-import { slide } from 'svelte/transition';
-import { onMount } from 'svelte';
-import { ChevronDown, ChevronUp } 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 iconSize = 24;
-export let iconClass = 'text-gray-500 sm:w-6 sm:h-6 dark:text-gray-300';
-export let isOpen = false;
-export let icons = {
-    up: ChevronUp,
-    down: ChevronDown
-};
-onMount(() => {
-    if (isOpen) {
-        isOpen = true;
-    }
-});
-const handleToggle = (id) => {
-    isOpen = !isOpen;
-};
-</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={classNames(btnClass, $$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

@@ -1,27 +0,0 @@
-import { SvelteComponentTyped } from "svelte";
-import type { AccordionIconType } from '../types';
-declare const __propDef: {
-    props: {
-        [x: string]: any;
-        id?: string;
-        btnClass?: string;
-        slotClass?: string;
-        iconSize?: number;
-        iconClass?: string;
-        isOpen?: boolean;
-        icons?: AccordionIconType;
-    };
-    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 {};