flowbite-svelte 0.18.6 → 0.19.0

package/CHANGELOG.md

@@ -2,6 +2,19 @@
 
 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.19.0](https://github.com/themesberg/flowbite-svelte/compare/v0.18.6...v0.19.0) (2022-06-24)
+
+
+### ⚠ BREAKING CHANGES
+
+* Dropdown has a new structure
+
+### Bug Fixes
+
+* Dropdown has a new structure ([2c5d7b0](https://github.com/themesberg/flowbite-svelte/commit/2c5d7b0a7ac6e93074d11c986835e1f24dd5e00e))
+* update Dropdown components ([4dd3254](https://github.com/themesberg/flowbite-svelte/commit/4dd3254b037be1db5718c4a03662e7cf455a4ee6))
+* update dropdown creating Dropdown, DropdownDivider, DropdownHeader, DropdownItem ([58db150](https://github.com/themesberg/flowbite-svelte/commit/58db150ee321f849ece954f43213e09a3634e191))
+
 ### [0.18.6](https://github.com/themesberg/flowbite-svelte/compare/v0.18.5...v0.18.6) (2022-06-24)
 
 ### [0.18.5](https://github.com/themesberg/flowbite-svelte/compare/v0.18.4...v0.18.5) (2022-06-24)

package/dropdowns/Dropdown.svelte

@@ -0,0 +1,57 @@
+<script>import Tooltip from '../tooltips/Tooltip.svelte';
+import Button from '../buttons/Button.svelte';
+import classNames from 'classnames';
+import { ChevronUp, ChevronRight, ChevronDown, ChevronLeft } from 'svelte-heros';
+export let label = '';
+export let inline = false;
+export let tooltipArrow = false;
+export let arrowIcon = true;
+export let labelClass = 'flex items-center justify-between w-full py-2 pl-3 pr-4 font-medium text-gray-700 border-b border-gray-100 hover:bg-gray-50 md:hover:bg-transparent md:border-0 md:hover:text-blue-700 md:p-0 md:w-auto dark:text-gray-400 dark:hover:text-white dark:focus:text-white dark:border-gray-700 dark:hover:bg-gray-700 md:dark:hover:bg-transparent';
+export let placement = 'bottom';
+const icons = {
+    top: ChevronUp,
+    right: ChevronRight,
+    bottom: ChevronDown,
+    left: ChevronLeft
+};
+// @ts-ignore
+$: icon = icons[placement.split('-')[0]];
+</script>
+
+<Tooltip
+	class={classNames('w-44 !rounded !p-0', $$props.class)}
+	style="auto"
+	animation="duration-100"
+	{placement}
+	arrow={tooltipArrow}
+	trigger="click"
+>
+	{#if inline}
+		<button class={labelClass}>
+			<slot name="label">{label}</slot>
+			{#if arrowIcon}
+				<svelte:component this={icon ?? ChevronDown} class="ml-2 h-4 w-4" />
+			{/if}
+		</button>
+	{:else}
+		<Button
+			pill={$$props.pill}
+			outline={$$props.outline}
+			color={$$props.color}
+			size={$$props.size}
+			icon={$$props.icon}
+			gradientDuoTone={$$props.gradientDuoTone}
+			gradientMonochrome={$$props.gradientMonochrome}
+		>
+			<slot name="label">{label}</slot>
+			{#if arrowIcon}
+				<svelte:component this={icon ?? ChevronDown} class="ml-2 h-4 w-4" />
+			{/if}
+		</Button>
+	{/if}
+	<div slot="content">
+		<ul class="py-1">
+			<slot />
+		</ul>
+	</div>
+</Tooltip>

package/dropdowns/Dropdown.svelte.d.ts

@@ -0,0 +1,26 @@
+import { SvelteComponentTyped } from "svelte";
+import type { Placement } from '@floating-ui/dom';
+declare const __propDef: {
+    props: {
+        [x: string]: any;
+        label?: string;
+        inline?: boolean;
+        tooltipArrow?: boolean;
+        arrowIcon?: boolean;
+        labelClass?: string;
+        placement?: 'auto' | Placement;
+    };
+    events: {
+        [evt: string]: CustomEvent<any>;
+    };
+    slots: {
+        label: {};
+        default: {};
+    };
+};
+export declare type DropdownProps = typeof __propDef.props;
+export declare type DropdownEvents = typeof __propDef.events;
+export declare type DropdownSlots = typeof __propDef.slots;
+export default class Dropdown extends SvelteComponentTyped<DropdownProps, DropdownEvents, DropdownSlots> {
+}
+export {};

package/dropdowns/DropdownDivider.svelte

@@ -0,0 +1,4 @@
+<script>export let divClass = 'my-1 h-px bg-gray-100 dark:bg-gray-600';
+</script>
+
+<div class="{divClass} {$$props.class || ''}" {...$$restProps} />

package/dropdowns/DropdownDivider.svelte.d.ts

@@ -0,0 +1,17 @@
+import { SvelteComponentTyped } from "svelte";
+declare const __propDef: {
+    props: {
+        [x: string]: any;
+        divClass?: string;
+    };
+    events: {
+        [evt: string]: CustomEvent<any>;
+    };
+    slots: {};
+};
+export declare type DropdownDividerProps = typeof __propDef.props;
+export declare type DropdownDividerEvents = typeof __propDef.events;
+export declare type DropdownDividerSlots = typeof __propDef.slots;
+export default class DropdownDivider extends SvelteComponentTyped<DropdownDividerProps, DropdownDividerEvents, DropdownDividerSlots> {
+}
+export {};

package/dropdowns/DropdownHeader.svelte

@@ -0,0 +1,8 @@
+<script>import DropdownDivider from './DropdownDivider.svelte';
+export let divClass = 'block py-2 px-4 text-sm text-gray-700 dark:text-gray-200';
+</script>
+
+<div class="{divClass} {$$props.class || ''}" {...$$restProps}>
+	<slot />
+</div>
+<DropdownDivider />

package/dropdowns/DropdownHeader.svelte.d.ts

@@ -0,0 +1,19 @@
+import { SvelteComponentTyped } from "svelte";
+declare const __propDef: {
+    props: {
+        [x: string]: any;
+        divClass?: string;
+    };
+    events: {
+        [evt: string]: CustomEvent<any>;
+    };
+    slots: {
+        default: {};
+    };
+};
+export declare type DropdownHeaderProps = typeof __propDef.props;
+export declare type DropdownHeaderEvents = typeof __propDef.events;
+export declare type DropdownHeaderSlots = typeof __propDef.slots;
+export default class DropdownHeader extends SvelteComponentTyped<DropdownHeaderProps, DropdownHeaderEvents, DropdownHeaderSlots> {
+}
+export {};

package/dropdowns/DropdownItem.svelte

@@ -0,0 +1,7 @@
+<script>import classNames from 'classnames';
+export let liClass = 'block cursor-pointer py-2 px-4 text-sm text-gray-700 hover:bg-gray-100 dark:text-gray-200 dark:hover:bg-gray-600 dark:hover:text-white';
+</script>
+
+<li {...$$restProps} class={classNames(liClass, $$props.class)} on:click>
+	<slot />
+</li>

package/dropdowns/DropdownItem.svelte.d.ts

@@ -0,0 +1,21 @@
+import { SvelteComponentTyped } from "svelte";
+declare const __propDef: {
+    props: {
+        [x: string]: any;
+        liClass?: string;
+    };
+    events: {
+        click: MouseEvent;
+    } & {
+        [evt: string]: CustomEvent<any>;
+    };
+    slots: {
+        default: {};
+    };
+};
+export declare type DropdownItemProps = typeof __propDef.props;
+export declare type DropdownItemEvents = typeof __propDef.events;
+export declare type DropdownItemSlots = typeof __propDef.slots;
+export default class DropdownItem extends SvelteComponentTyped<DropdownItemProps, DropdownItemEvents, DropdownItemSlots> {
+}
+export {};

package/index.d.ts

@@ -23,9 +23,10 @@ export { default as SignInCard } from './cards/SignInCard.svelte';
 export { default as Carousel } from './carousels/Carousel.svelte';
 export { default as CarouselTransition } from './carousels/CarouselTransition.svelte';
 export { default as DarkMode } from './darkmode/DarkMode.svelte';
-export { default as Dropdown } from './dropdowns/DropdownDefault.svelte';
-export { default as ImgDropdown } from './dropdowns/ImgDropdown.svelte';
-export { dropdownIdStore } from './dropdowns/dropdownStores.js';
+export { default as Dropdown } from './dropdowns/Dropdown.svelte';
+export { default as DropdownDivider } from './dropdowns/DropdownDivider.svelte';
+export { default as DropdownHeader } from './dropdowns/DropdownHeader.svelte';
+export { default as DropdownItem } from './dropdowns/DropdownItem.svelte';
 export { default as SimpleFooter } from './footer/SimpleFooter.svelte';
 export { default as LogoFooter } from './footer/LogoFooter.svelte';
 export { default as SocialMediaFooter } from './footer/SocialMediaFooter.svelte';

package/index.js

@@ -34,9 +34,10 @@ export { default as CarouselTransition } from './carousels/CarouselTransition.sv
 // Dark mode
 export { default as DarkMode } from './darkmode/DarkMode.svelte';
 // Dropdown
-export { default as Dropdown } from './dropdowns/DropdownDefault.svelte';
-export { default as ImgDropdown } from './dropdowns/ImgDropdown.svelte';
-export { dropdownIdStore } from './dropdowns/dropdownStores.js';
+export { default as Dropdown } from './dropdowns/Dropdown.svelte';
+export { default as DropdownDivider } from './dropdowns/DropdownDivider.svelte';
+export { default as DropdownHeader } from './dropdowns/DropdownHeader.svelte';
+export { default as DropdownItem } from './dropdowns/DropdownItem.svelte';
 // Footers
 export { default as SimpleFooter } from './footer/SimpleFooter.svelte';
 export { default as LogoFooter } from './footer/LogoFooter.svelte';

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "flowbite-svelte",
-  "version": "0.18.6",
+  "version": "0.19.0",
   "description": "Flowbite components for Svelte",
   "main": "index.js",
   "author": {
@@ -122,9 +122,10 @@
     "./carousels/Slide.svelte": "./carousels/Slide.svelte",
     "./carousels/Thumbnail.svelte": "./carousels/Thumbnail.svelte",
     "./darkmode/DarkMode.svelte": "./darkmode/DarkMode.svelte",
-    "./dropdowns/DropdownDefault.svelte": "./dropdowns/DropdownDefault.svelte",
-    "./dropdowns/ImgDropdown.svelte": "./dropdowns/ImgDropdown.svelte",
-    "./dropdowns/dropdownStores": "./dropdowns/dropdownStores.js",
+    "./dropdowns/Dropdown.svelte": "./dropdowns/Dropdown.svelte",
+    "./dropdowns/DropdownDivider.svelte": "./dropdowns/DropdownDivider.svelte",
+    "./dropdowns/DropdownHeader.svelte": "./dropdowns/DropdownHeader.svelte",
+    "./dropdowns/DropdownItem.svelte": "./dropdowns/DropdownItem.svelte",
     "./footer/LogoFooter.svelte": "./footer/LogoFooter.svelte",
     "./footer/SimpleFooter.svelte": "./footer/SimpleFooter.svelte",
     "./footer/SitemapFooter.svelte": "./footer/SitemapFooter.svelte",

package/dropdowns/DropdownDefault.svelte

@@ -1,109 +0,0 @@
-<script>import { dropdownIdStore } from './dropdownStores';
-import { get } from 'svelte/store';
-export let id = 'dropdown';
-export let label = 'Dropdown button';
-export let rounded = false;
-export let textSize = 'text-sm';
-export let color = 'blue';
-let showDropdownId;
-dropdownIdStore.subscribe((value) => {
-    showDropdownId = value;
-});
-let paddings;
-if (textSize === 'text-xs') {
-    paddings = 'py-2 px-3';
-}
-else if (textSize === 'text-sm') {
-    paddings = 'py-2.5 px-5';
-}
-else if (textSize === 'text-base') {
-    paddings = 'py-3 px-6';
-}
-else {
-    paddings = 'py-2.5 px-5';
-}
-let round = rounded ? 'rounded-full' : 'rounded-lg';
-let buttonClass = `inline-flex z-10 items-center font-medium ${round} ${textSize} ${paddings} text-center `;
-export const openFn = (id) => {
-    if (showDropdownId === id) {
-        dropdownIdStore.update((n) => (n = null));
-    }
-    else {
-        dropdownIdStore.update((n) => (n = id));
-    }
-};
-const closeDropdown = () => {
-    dropdownIdStore.update((n) => (n = null));
-};
-export let items;
-export let dropdownClass = 'absolute left-0 top-1 z-10 w-44 text-base list-none bg-white rounded divide-y divide-gray-100 shadow dark:bg-gray-700';
-export let headerClass = 'py-3 px-4 text-gray-900 dark:text-white';
-export let linkClass = 'block py-2 px-4 text-sm text-gray-700 hover:bg-gray-100 dark:hover:bg-gray-600 dark:text-gray-200 dark:hover:text-white';
-if (color === 'blue-outline') {
-    buttonClass += `text-blue-700 hover:text-white border border-blue-700 hover:bg-blue-800 focus:ring-4 focus:ring-blue-300 dark:border-blue-500 dark:text-blue-500 dark:hover:text-white dark:hover:bg-blue-600 dark:focus:ring-blue-800`;
-}
-else if (color === 'dark') {
-    buttonClass += `text-white bg-gray-800 hover:bg-gray-900 focus:ring-4 focus:ring-gray-300 dark:bg-gray-800 dark:hover:bg-gray-700 dark:focus:ring-gray-800 dark:border-gray-700`;
-}
-else if (color === 'dark-outline') {
-    buttonClass += `text-gray-900 hover:text-white border border-gray-800 hover:bg-gray-900 focus:ring-4 focus:ring-gray-300 dark:border-gray-600 dark:text-gray-400 dark:hover:text-white dark:hover:bg-gray-600 dark:focus:ring-gray-800`;
-}
-else if (color === 'light') {
-    buttonClass += `text-gray-900 bg-white border border-gray-300 hover:bg-gray-100 focus:ring-4 focus:ring-blue-300 dark:bg-gray-600 dark:text-white dark:border-gray-600 dark:hover:bg-gray-700 dark:hover:border-gray-700 dark:focus:ring-gray-800`;
-}
-else if (color === 'green') {
-    buttonClass += `text-white bg-green-700 hover:bg-green-800 focus:ring-4 focus:ring-green-300 dark:bg-green-600 dark:hover:bg-green-700 dark:focus:ring-green-800`;
-}
-else if (color === 'green-outline') {
-    buttonClass += `text-green-700 hover:text-white border border-green-700 hover:bg-green-800 focus:ring-4 focus:ring-green-300 dark:border-green-500 dark:text-green-500 dark:hover:text-white dark:hover:bg-green-600 dark:focus:ring-green-800`;
-}
-else if (color === 'red') {
-    buttonClass += `text-white bg-red-700 hover:bg-red-800 focus:ring-4 focus:ring-red-300 dark:bg-red-600 dark:hover:bg-red-700 dark:focus:ring-red-900`;
-}
-else if (color === 'red-outline') {
-    buttonClass += `text-red-700 hover:text-white border border-red-700 hover:bg-red-800 focus:ring-4 focus:ring-red-300 dark:border-red-500 dark:text-red-500 dark:hover:text-white dark:hover:bg-red-600 dark:focus:ring-red-900`;
-}
-else if (color === 'yellow') {
-    buttonClass += `text-white bg-yellow-400 hover:bg-yellow-500 focus:ring-4 focus:ring-yellow-300 dark:focus:ring-yellow-900`;
-}
-else if (color === 'yellow-outline') {
-    buttonClass += `text-yellow-400 hover:text-white border border-yellow-400 hover:bg-yellow-500 focus:ring-4 focus:ring-yellow-300 dark:border-yellow-300 dark:text-yellow-300 dark:hover:text-white dark:hover:bg-yellow-400 dark:focus:ring-yellow-900`;
-}
-else if (color === 'purple') {
-    buttonClass += `text-white bg-purple-700 hover:bg-purple-800 focus:ring-4 focus:ring-purple-300 mb-2 dark:bg-purple-600 dark:hover:bg-purple-700 dark:focus:ring-purple-900`;
-}
-else if (color === 'purple-outline') {
-    buttonClass += `text-purple-700 hover:text-white border border-purple-700 hover:bg-purple-800 focus:ring-4 focus:ring-purple-300 dark:border-purple-400 dark:text-purple-400 dark:hover:text-white dark:hover:bg-purple-500 dark:focus:ring-purple-900`;
-}
-else {
-    buttonClass += `text-white bg-blue-700 hover:bg-blue-800 focus:ring-4 focus:ring-blue-300 dark:bg-blue-600 dark:hover:bg-blue-700 dark:focus:ring-blue-800`;
-}
-</script>
-
-<button on:click={() => openFn(id)} class={buttonClass} type="button"
-	>{label}
-	<svg class="ml-2 w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 9l-7 7-7-7" /> </svg>
-</button>
-
-<div class="relative">
-	{#if showDropdownId === id}
-		<div class={dropdownClass}>
-			{#if $$slots.header}
-				<div class={headerClass}>
-					<slot name="header" />
-				</div>
-			{/if}
-			<ul class="py-1" aria-labelledby="dropdownButton">
-				{#each items as { href, name, divider }}
-					<li class:border-b={divider} class:border-gray-100={divider} class:dark:border-gray-500={divider}>
-						<a {href} class={linkClass}>{name}</a>
-					</li>
-				{/each}
-			</ul>
-		</div>
-	{/if}
-</div>
-
-{#if $dropdownIdStore}
-	<div on:click={closeDropdown} class="fixed w-full h-full z-0 inset-0" />
-{/if}

package/dropdowns/DropdownDefault.svelte.d.ts

@@ -1,29 +0,0 @@
-import { SvelteComponentTyped } from "svelte";
-import type { DropdownType, DropdownColorType } from '../types';
-declare const __propDef: {
-    props: {
-        id?: string;
-        label?: string;
-        rounded?: boolean;
-        textSize?: string;
-        color?: DropdownColorType;
-        openFn?: (id: string) => void;
-        items: DropdownType[];
-        dropdownClass?: string;
-        headerClass?: string;
-        linkClass?: string;
-    };
-    events: {
-        [evt: string]: CustomEvent<any>;
-    };
-    slots: {
-        header: {};
-    };
-};
-export declare type DropdownDefaultProps = typeof __propDef.props;
-export declare type DropdownDefaultEvents = typeof __propDef.events;
-export declare type DropdownDefaultSlots = typeof __propDef.slots;
-export default class DropdownDefault extends SvelteComponentTyped<DropdownDefaultProps, DropdownDefaultEvents, DropdownDefaultSlots> {
-    get openFn(): (id: string) => void;
-}
-export {};

package/dropdowns/ImgDropdown.svelte

@@ -1,34 +0,0 @@
-<script>let imgDropdownToggle = true;
-const handleToggle = () => {
-    imgDropdownToggle = !imgDropdownToggle;
-};
-export let items;
-export let divClass = 'relative';
-export let dropdownClass = 'hidden absolute -left-16 top-14 z-10 w-44 text-base list-none bg-white rounded divide-y divide-gray-100 shadow dark:bg-gray-700';
-export let headerClass = 'py-3 px-4 text-gray-900 dark:text-white';
-export let linkClass = 'block py-2 px-4 text-sm text-gray-700 hover:bg-gray-100 dark:hover:bg-gray-600 dark:text-gray-200 dark:hover:text-white';
-</script>
-
-<div class={divClass}>
-	<div on:click={handleToggle}>
-		<slot />
-	</div>
-	<div class:hidden={imgDropdownToggle} class={dropdownClass}>
-		{#if $$slots.header}
-			<div class={headerClass}>
-				<slot name="header" />
-			</div>
-		{/if}
-		<ul class="py-1" aria-labelledby="dropdownButton">
-			{#each items as { href, name, divider }}
-				<li
-					class:border-b={divider}
-					class:border-gray-100={divider}
-					class:dark:border-gray-500={divider}
-				>
-					<a {href} class={linkClass}>{name}</a>
-				</li>
-			{/each}
-		</ul>
-	</div>
-</div>

package/dropdowns/ImgDropdown.svelte.d.ts

@@ -1,24 +0,0 @@
-import { SvelteComponentTyped } from "svelte";
-import type { DropdownType } from '../types';
-declare const __propDef: {
-    props: {
-        items: DropdownType[];
-        divClass?: string;
-        dropdownClass?: string;
-        headerClass?: string;
-        linkClass?: string;
-    };
-    events: {
-        [evt: string]: CustomEvent<any>;
-    };
-    slots: {
-        default: {};
-        header: {};
-    };
-};
-export declare type ImgDropdownProps = typeof __propDef.props;
-export declare type ImgDropdownEvents = typeof __propDef.events;
-export declare type ImgDropdownSlots = typeof __propDef.slots;
-export default class ImgDropdown extends SvelteComponentTyped<ImgDropdownProps, ImgDropdownEvents, ImgDropdownSlots> {
-}
-export {};

package/dropdowns/dropdownStores.js

@@ -1,3 +0,0 @@
-import { writable } from 'svelte/store';
-
-export const dropdownIdStore = writable('');