flowbite-svelte 0.25.6 → 0.25.7

package/CHANGELOG.md

@@ -2,6 +2,13 @@
 
 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.7](https://github.com/themesberg/flowbite-svelte/compare/v0.25.6...v0.25.7) (2022-08-21)
+
+
+### Features
+
+* dropdown as Popper + fixes ([67fdf78](https://github.com/themesberg/flowbite-svelte/commit/67fdf7837f36d63b3683e0b6f6e78fbf91f6bf23))
+
 ### [0.25.6](https://github.com/themesberg/flowbite-svelte/compare/v0.25.5...v0.25.6) (2022-08-20)
 
 

package/avatar/Dot.svelte

@@ -23,7 +23,7 @@ $: dotClass = classNames('absolute rounded-full border-white dark:border-gray-80
 </script>
 
 {#if show}
-	<div class="relative flex-shrink-0 h-full">
+	<div class="relative flex-shrink-0">
 		<slot />
 		<span class={dotClass} />
 	</div>

package/dropdowns/Dropdown.svelte

@@ -1,11 +1,10 @@
 <script>import { setContext } from 'svelte';
-import Tooltip from '../tooltips/Tooltip.svelte';
 import Button from '../buttons/Button.svelte';
+import Popper from '../utils/Popper.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';
@@ -19,18 +18,21 @@ const icons = {
 };
 // @ts-ignore
 $: icon = icons[placement.split('-')[0]];
+let popoverClass;
+$: popoverClass = classNames('rounded-lg shadow-sm', 'bg-white dark:bg-gray-800', 'text-gray-500 dark:text-gray-400', 'border border-gray-200 dark:border-gray-700', 'outline-none', $$props.class);
 </script>
 
-<Tooltip
-	class={classNames('!rounded !p-0', $$props.class)}
-	style="auto"
-	animation="duration-100"
+<Popper
+	activeContent={true}
+	arrow={false}
 	{placement}
-	arrow={tooltipArrow}
+	{...$$restProps}
+	class={popoverClass}
 	trigger="click"
+	on:show
 	bind:open
 >
-	<slot name="trigger">
+	<slot name="trigger" slot="trigger">
 		{#if inline}
 			<button class={labelClass} class:flex-row-reverse={icon == ChevronLeft}>
 				<slot name="label">{label}</slot>
@@ -53,9 +55,9 @@ $: icon = icons[placement.split('-')[0]];
 			</Button>
 		{/if}
 	</slot>
-	<slot name="content" slot="content">
+	<slot name="content">
 		<ul class="py-1">
 			<slot />
 		</ul>
 	</slot>
-</Tooltip>
+</Popper>

package/dropdowns/Dropdown.svelte.d.ts

@@ -1,25 +1,26 @@
 import { SvelteComponentTyped } from "svelte";
-import type { Placement } from '@floating-ui/dom';
+import type { Placement } from '@popperjs/core';
 declare const __propDef: {
     props: {
         [x: string]: any;
         label?: string;
         inline?: boolean;
-        tooltipArrow?: boolean;
         arrowIcon?: boolean;
         labelClass?: string;
         placement?: 'auto' | Placement;
         open?: boolean;
     };
     events: {
+        show: CustomEvent<any>;
+    } & {
         [evt: string]: CustomEvent<any>;
     };
     slots: {
-        trigger: {};
-        label: {};
-        content: {
+        trigger: {
             slot: string;
         };
+        label: {};
+        content: {};
         default: {};
     };
 };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "flowbite-svelte",
-  "version": "0.25.6",
+  "version": "0.25.7",
   "description": "Flowbite components for Svelte",
   "main": "index.js",
   "author": {

package/popover/Popover.svelte

@@ -1,10 +1,22 @@
 <script>import Popper from '../utils/Popper.svelte';
 import classNames from 'classnames';
+export let title = '';
 let popoverClass;
-$: popoverClass = classNames('border border-gray-200 rounded-lg dark:border-gray-700 bg-white dark:bg-gray-800', $$props.class);
+$: popoverClass = classNames('rounded-lg shadow-sm', 'bg-white dark:bg-gray-800', 'text-gray-500 dark:text-gray-400', 'border border-gray-200 dark:border-gray-700', $$props.class);
 </script>
 
 <Popper activeContent={true} {...$$restProps} class={popoverClass} on:show>
 	<slot name="trigger" slot="trigger" />
-	<slot />
+	{#if $$slots.title || title}
+		<div
+			class="py-2 px-3 bg-gray-100 rounded-t-lg border-b border-gray-200 dark:border-gray-600 dark:bg-gray-700"
+		>
+			<slot name="title">
+				<h3 class="font-semibold text-gray-900 dark:text-white">{title}</h3>
+			</slot>
+		</div>
+	{/if}
+	<div class="py-2 px-3">
+		<slot />
+	</div>
 </Popper>

package/popover/Popover.svelte.d.ts

@@ -2,6 +2,7 @@ import { SvelteComponentTyped } from "svelte";
 declare const __propDef: {
     props: {
         [x: string]: any;
+        title?: string;
     };
     events: {
         show: CustomEvent<any>;
@@ -12,6 +13,7 @@ declare const __propDef: {
         trigger: {
             slot: string;
         };
+        title: {};
         default: {};
     };
 };

package/utils/Popper.svelte

@@ -21,7 +21,9 @@ const showHandler = (ev) => {
 };
 const hideHandler = (ev) => {
     if (activeContent)
-        setTimeout(() => triggerEl.matches(':hover') || contentEl.matches(':hover') || (open = false), 100);
+        setTimeout(() => (!clickable && (triggerEl.matches(':hover') || contentEl.matches(':hover'))) ||
+            contentEl.contains(document.activeElement) ||
+            (open = false), 100);
     else
         open = false;
 };
@@ -55,7 +57,7 @@ let divClass;
 $: divClass = classNames('z-10', animation && `transition-opacity ${animation}`, open ? 'visible opacity-100' : 'invisible opacity-0', $$props.class);
 </script>
 
-<span
+<div
 	bind:this={triggerEl}
 	on:focusin={showHandler}
 	on:focusout={hideHandler}
@@ -65,14 +67,14 @@ $: divClass = classNames('z-10', animation && `transition-opacity ${animation}`,
 	class="inline-block"
 >
 	<slot name="trigger" />
-</span>
+</div>
 <div
 	bind:this={contentEl}
 	role="tooltip"
 	tabindex={activeContent ? -1 : undefined}
 	class={divClass}
-	on:focus={activeContent ? showHandler : undefined}
-	on:blur={activeContent ? hideHandler : undefined}
+	on:focusin={activeContent ? showHandler : undefined}
+	on:focusout={activeContent ? hideHandler : undefined}
 	on:mouseenter={activeContent && !clickable ? showHandler : undefined}
 	on:mouseleave={activeContent && !clickable ? hideHandler : undefined}
 >