flowbite-svelte 0.25.1 → 0.25.6

package/CHANGELOG.md

@@ -2,6 +2,57 @@
 
 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.6](https://github.com/themesberg/flowbite-svelte/compare/v0.25.5...v0.25.6) (2022-08-20)
+
+
+### Features
+
+* fixing standard-version ([cd316e4](https://github.com/themesberg/flowbite-svelte/commit/cd316e412171689e04ec435dfc31abd89b7cbe1d))
+
+### [0.25.5](https://github.com/themesberg/flowbite-svelte/compare/v0.25.4...v0.25.5) (2022-08-20)
+
+
+### Bug Fixes
+
+* Iconinput has unused export property value when I install it ([b19afc9](https://github.com/themesberg/flowbite-svelte/commit/b19afc9284aa2c92c5a15b89de9dc9111652f0f7))
+
+### [0.25.4](https://github.com/themesberg/flowbite-svelte/compare/v0.25.2...v0.25.4) (2022-08-20)
+
+
+### Bug Fixes
+
+* add Table color hover and example ([b49c139](https://github.com/themesberg/flowbite-svelte/commit/b49c139c6d09a4563d462b35a5c49da605006d79))
+
+### [0.25.2](https://github.com/themesberg/flowbite-svelte/compare/v0.25.1...v0.25.2) (2022-08-19)
+
+
+### Features
+
+* add popover related files ([8b5050b](https://github.com/themesberg/flowbite-svelte/commit/8b5050b0e9f6e45533b858c7aa392463cfb6cc91))
+* popover ([c41ddc4](https://github.com/themesberg/flowbite-svelte/commit/c41ddc408f3696e05ee66de4922b95ee5cee1a08))
+
+
+### Bug Fixes
+
+* change href=# to href=/ in popover page ([f885a92](https://github.com/themesberg/flowbite-svelte/commit/f885a924706e477349c975641fc6fba0b4df45e5))
+* missing Popper ([ff4b0e7](https://github.com/themesberg/flowbite-svelte/commit/ff4b0e772e228f03c1024e222fcc91e63adc23ba))
+
+### [0.25.1](https://github.com/themesberg/flowbite-svelte/compare/v0.25.0...v0.25.1) (2022-08-18)
+
+
+### Bug Fixes
+
+* move @floating-ui/dom from dependencies to devDependencies ([6668ec8](https://github.com/themesberg/flowbite-svelte/commit/6668ec8ca1559366ad0cbc223c9c91e3337ceb22))
+
+## [0.25.0](https://github.com/themesberg/flowbite-svelte/compare/v0.24.19...v0.25.0) (2022-08-18)
+
+
+### Bug Fixes
+
+* [#226](https://github.com/themesberg/flowbite-svelte/issues/226) for double on:click in DropdownItem ([c125d2d](https://github.com/themesberg/flowbite-svelte/commit/c125d2d02e3818cedb83994e930ca5cc7075571c))
+* migrate to sveltekit 1.0.0 ([434ec99](https://github.com/themesberg/flowbite-svelte/commit/434ec998e1f96ab5e35eda6c6c78f6db2279aa4e))
+* update pnpm-lock ([4926a47](https://github.com/themesberg/flowbite-svelte/commit/4926a47bd529601b1a0709533fee2b5291e59eb8))
+
 ### [0.24.19](https://github.com/themesberg/flowbite-svelte/compare/v0.24.18...v0.24.19) (2022-08-17)
 
 

package/README.md

@@ -2,8 +2,9 @@
 
 [![npm version](https://badgen.net/npm/v/flowbite-svelte)](https://www.npmjs.com/package/flowbite-svelte)
 [![npm downloads](https://badgen.net/npm/dw/flowbite-svelte)](https://www.npmjs.com/package/flowbite-svelte)
-[![release](https://badgen.net/github/release/themesberg/flowbite-svelte)](https://github.com/themesberg/flowbite-svelte/releases)
+[![npm downloads](https://badgen.net/npm/dt/flowbite-svelte)](https://www.npmjs.com/package/flowbite-svelte)
 [![license](https://badgen.net/npm/license/flowbite-svelte)](https://github.com/themesberg/flowbite-svelte/blob/main/LICENSE)
+[![Discord](https://img.shields.io/discord/902911619032576090?color=%237289da&label=Discord)](https://discord.com/invite/4eeurUVvTy)
 
 **⚠️ Flowbite-Svelte is currently in early development and APIs and packages are likely to change quite often.**
 

package/dropdowns/DropdownItem.svelte

@@ -11,7 +11,6 @@ const colors = {
 	{...$$restProps}
 	class={classNames(liClass, colors[color] ?? colors.default, $$props.class)}
 	on:click|stopPropagation
-	on:click
 	on:change
 	on:keydown
 	on:keyup

package/forms/Iconinput.svelte

@@ -1,6 +1,5 @@
 <script>import classNames from 'classnames';
 export let type = 'text';
-export let value = '';
 export let size = 'md';
 export let icon;
 export let noBorder = false;

package/forms/Iconinput.svelte.d.ts

@@ -1,11 +1,10 @@
 import { SvelteComponentTyped } from "svelte";
-import type { InputType } from '../types';
 import type { SvelteComponent } from 'svelte';
+import type { InputType } from '../types';
 declare const __propDef: {
     props: {
         [x: string]: any;
         type?: InputType;
-        value?: string;
         size?: 'sm' | 'md' | 'lg';
         icon: typeof SvelteComponent;
         noBorder?: boolean;

package/index.d.ts

@@ -59,6 +59,7 @@ export { default as Pagination } from './paginations/Pagination.svelte';
 export { default as Previous } from './paginations/Previous.svelte';
 export { default as Next } from './paginations/Next.svelte';
 export { default as TableData } from './paginations/TableData.svelte';
+export { default as Popover } from './popover/Popover.svelte';
 export { default as Progressbar } from './progressbars/Progressbar.svelte';
 export { default as Rating } from './ratings/Rating.svelte';
 export { default as AdvancedRating } from './ratings/AdvancedRating.svelte';

package/index.js

@@ -80,6 +80,8 @@ export { default as Pagination } from './paginations/Pagination.svelte';
 export { default as Previous } from './paginations/Previous.svelte';
 export { default as Next } from './paginations/Next.svelte';
 export { default as TableData } from './paginations/TableData.svelte';
+// Popover
+export { default as Popover } from './popover/Popover.svelte';
 // Progressbar
 export { default as Progressbar } from './progressbars/Progressbar.svelte';
 // Rating

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "flowbite-svelte",
-  "version": "0.25.1",
+  "version": "0.25.6",
   "description": "Flowbite components for Svelte",
   "main": "index.js",
   "author": {
@@ -14,11 +14,14 @@
   "devDependencies": {
     "@floating-ui/dom": "^1.0.1",
     "@playwright/test": "^1.25.0",
+    "@popperjs/core": "^2.11.6",
     "@sveltejs/adapter-auto": "next",
-    "@sveltejs/kit": "next",
+    "@sveltejs/kit": "1.0.0-next.420",
+    "@sveltejs/package": "1.0.0-next.1",
     "@typescript-eslint/eslint-plugin": "^5.33.0",
     "@typescript-eslint/parser": "^5.33.0",
     "autoprefixer": "^10.4.8",
+    "classnames": "^2.3.1",
     "createprops": "^0.4.9",
     "eslint": "^8.21.0",
     "eslint-config-prettier": "^8.5.0",
@@ -82,7 +85,6 @@
     "url": "https://github.com/themesberg/flowbite-svelte"
   },
   "dependencies": {
-    "classnames": "^2.3.1",
     "flowbite": "^1.5.2"
   },
   "engines": {
@@ -167,6 +169,7 @@
     "./paginations/Pagination.svelte": "./paginations/Pagination.svelte",
     "./paginations/Previous.svelte": "./paginations/Previous.svelte",
     "./paginations/TableData.svelte": "./paginations/TableData.svelte",
+    "./popover/Popover.svelte": "./popover/Popover.svelte",
     "./progressbars/Progressbar.svelte": "./progressbars/Progressbar.svelte",
     "./ratings/AdvancedRating.svelte": "./ratings/AdvancedRating.svelte",
     "./ratings/Rating.svelte": "./ratings/Rating.svelte",
@@ -220,9 +223,10 @@
     "./tooltips/Tooltip.svelte": "./tooltips/Tooltip.svelte",
     "./types": "./types.js",
     "./utils/CloseButton.svelte": "./utils/CloseButton.svelte",
+    "./utils/Popper.svelte": "./utils/Popper.svelte",
     "./utils/clickOutside": "./utils/clickOutside.js",
     "./utils/focusTrap": "./utils/focusTrap.js",
     "./utils/generateId": "./utils/generateId.js"
   },
   "svelte": "./index.js"
-}
+}

package/popover/Popover.svelte

@@ -0,0 +1,10 @@
+<script>import Popper from '../utils/Popper.svelte';
+import classNames from 'classnames';
+let popoverClass;
+$: popoverClass = classNames('border border-gray-200 rounded-lg dark:border-gray-700 bg-white dark:bg-gray-800', $$props.class);
+</script>
+
+<Popper activeContent={true} {...$$restProps} class={popoverClass} on:show>
+	<slot name="trigger" slot="trigger" />
+	<slot />
+</Popper>

package/popover/Popover.svelte.d.ts

@@ -0,0 +1,23 @@
+import { SvelteComponentTyped } from "svelte";
+declare const __propDef: {
+    props: {
+        [x: string]: any;
+    };
+    events: {
+        show: CustomEvent<any>;
+    } & {
+        [evt: string]: CustomEvent<any>;
+    };
+    slots: {
+        trigger: {
+            slot: string;
+        };
+        default: {};
+    };
+};
+export declare type PopoverProps = typeof __propDef.props;
+export declare type PopoverEvents = typeof __propDef.events;
+export declare type PopoverSlots = typeof __propDef.slots;
+export default class Popover extends SvelteComponentTyped<PopoverProps, PopoverEvents, PopoverSlots> {
+}
+export {};

package/tables/Table.svelte

@@ -1,16 +1,30 @@
 <script>import classNames from 'classnames';
 import { setContext } from 'svelte';
-export let divClass = 'relative overflow-x-auto shadow-md sm:rounded-lg';
+export let divClass = 'relative overflow-x-auto';
 export let striped = false;
 export let hoverable = false;
+export let noborder = false;
+export let shadow = false;
+export let color = 'default';
+const colors = {
+    default: 'text-gray-500 dark:text-gray-400',
+    blue: 'text-blue-100 dark:text-blue-100',
+    green: 'text-green-100 dark:text-green-100',
+    red: 'text-red-100 dark:text-red-100',
+    yellow: 'text-yellow-100 dark:text-yellow-100',
+    purple: 'text-purple-100 dark:text-purple-100',
+    custom: ''
+};
 $: setContext('striped', striped);
 $: setContext('hoverable', hoverable);
+$: setContext('noborder', noborder);
+$: setContext('color', color);
 </script>
 
-<div class={divClass}>
+<div class={classNames(divClass, shadow && 'shadow-md sm:rounded-lg')}>
 	<table
 		{...$$restProps}
-		class={classNames('w-full text-left text-sm text-gray-500 dark:text-gray-400', $$props.class)}
+		class={classNames('w-full text-left text-sm', colors[color], $$props.class)}
 	>
 		<slot />
 	</table>

package/tables/Table.svelte.d.ts

@@ -5,6 +5,9 @@ declare const __propDef: {
         divClass?: string;
         striped?: boolean;
         hoverable?: boolean;
+        noborder?: boolean;
+        shadow?: boolean;
+        color?: 'blue' | 'green' | 'red' | 'yellow' | 'purple' | 'default' | 'custom';
     };
     events: {
         [evt: string]: CustomEvent<any>;

package/tables/TableBodyCell.svelte

@@ -1,7 +1,14 @@
 <script>import classNames from 'classnames';
-export let tdClass = 'px-6 py-4 whitespace-nowrap font-medium text-gray-900 dark:text-white';
+import { getContext } from 'svelte';
+export let tdClass = 'px-6 py-4 whitespace-nowrap font-medium ';
+let color = 'default';
+color = getContext('color');
+let tdClassfinal;
+$: tdClassfinal = classNames(tdClass, color === 'default'
+    ? 'text-gray-900 dark:text-white'
+    : 'text-blue-50 whitespace-nowrap dark:text-blue-100', $$props.class);
 </script>
 
-<td {...$$restProps} class={classNames(tdClass, $$props.class)}>
+<td {...$$restProps} class={tdClassfinal}>
 	<slot />
 </td>

package/tables/TableBodyRow.svelte

@@ -1,19 +1,39 @@
 <script>import classNames from 'classnames';
 import { getContext } from 'svelte';
-export let trClass = 'bg-white dark:border-gray-700 dark:bg-gray-800';
+export let trClass = 'bg-white';
+const colors = {
+    default: 'dark:border-gray-700 dark:bg-gray-800',
+    blue: 'bg-blue-500 border-b border-blue-400',
+    green: 'bg-green-500 border-b border-green-400',
+    red: 'bg-red-500 border-b border-red-400',
+    yellow: 'bg-yellow-500 border-b border-yellow-400',
+    purple: 'bg-purple-500 border-b border-purple-400',
+    custom: ''
+};
+const hoverColors = {
+    default: 'hover:bg-gray-50 dark:hover:bg-gray-600',
+    blue: 'hover:bg-blue-400',
+    green: 'hover:bg-green-400',
+    red: 'hover:bg-red-400',
+    yellow: 'hover:bg-yellow-400',
+    purple: 'hover:bg-purple-400',
+    custom: ''
+};
+const stripColors = {
+    default: 'odd:bg-white even:bg-gray-50 odd:dark:bg-gray-800 even:dark:bg-gray-700',
+    blue: 'odd:bg-blue-800 even:bg-blue-700 odd:dark:bg-blue-800 even:dark:bg-blue-700',
+    green: 'odd:bg-green-800 even:bg-green-700 odd:dark:bg-green-800 even:dark:bg-green-700',
+    red: 'odd:bg-red-800 even:bg-red-700 odd:dark:bg-red-800 even:dark:bg-red-700',
+    yellow: 'odd:bg-yellow-800 even:bg-yellow-700 odd:dark:bg-yellow-800 even:dark:bg-yellow-700',
+    purple: 'odd:bg-purple-800 even:bg-purple-700 odd:dark:bg-purple-800 even:dark:bg-purple-700',
+    custom: ''
+};
+let color = 'default';
+color = getContext('color');
+let trClassfinal;
+$: trClassfinal = classNames(getContext('noborder') ? 'bg-white dark:bg-gray-800' : trClass, colors[color], getContext('hoverable') && hoverColors[color], getContext('striped') && stripColors[color], $$props.class);
 </script>
 
-<tr
-	{...$$restProps}
-	class={classNames(
-		trClass,
-		{
-			'odd:bg-white even:bg-gray-50 odd:dark:bg-gray-800 even:dark:bg-gray-700':
-				getContext('striped') === true,
-			'hover:bg-gray-50 dark:hover:bg-gray-600': getContext('hoverable') === true
-		},
-		$$props.class
-	)}
->
+<tr {...$$restProps} class={trClassfinal}>
 	<slot />
 </tr>

package/tables/TableHead.svelte

@@ -1,13 +1,36 @@
 <script>import classNames from 'classnames';
+import { getContext } from 'svelte';
+export let theadClass = 'text-xs uppercase';
+let color;
+color = getContext('color');
+let noborder = getContext('noborder');
+let striped = getContext('striped');
+let defatultBgColor = noborder || striped ? '' : 'bg-gray-50 dark:bg-gray-700';
+const bgColors = {
+    default: defatultBgColor,
+    blue: 'bg-blue-600',
+    green: 'bg-green-600',
+    red: 'bg-red-600',
+    yellow: 'bg-yellow-600',
+    purple: 'bg-purple-600',
+    custom: ''
+};
+let textColor = color === 'default'
+    ? 'text-gray-700 dark:text-gray-400'
+    : color === 'custom'
+        ? ''
+        : 'text-white  dark:text-white';
+let borderColors = striped
+    ? ''
+    : color === 'default'
+        ? 'border-gray-700'
+        : color === 'custom'
+            ? ''
+            : `border-${color}-400`;
+$: theadClassfinal = classNames(theadClass, textColor, striped && borderColors, bgColors[color], $$props.class);
 </script>
 
-<thead
-	{...$$restProps}
-	class={classNames(
-		'bg-gray-50 text-xs uppercase text-gray-700 dark:bg-gray-700 dark:text-gray-400',
-		$$props.class
-	)}
->
+<thead {...$$restProps} class={theadClassfinal}>
 	<tr>
 		<slot />
 	</tr>

package/tables/TableHead.svelte.d.ts

@@ -2,6 +2,7 @@ import { SvelteComponentTyped } from "svelte";
 declare const __propDef: {
     props: {
         [x: string]: any;
+        theadClass?: string;
     };
     events: {
         [evt: string]: CustomEvent<any>;

package/tables/TableSearch.svelte

@@ -5,8 +5,19 @@ export let inputValue = '';
 export let striped = false;
 export let hoverable = false;
 export let placeholder = 'Search';
+export let color = 'default';
+const colors = {
+    default: 'text-gray-500 dark:text-gray-400',
+    blue: 'text-blue-100 dark:text-blue-100',
+    green: 'text-green-100 dark:text-green-100',
+    red: 'text-red-100 dark:text-red-100',
+    yellow: 'text-yellow-100 dark:text-yellow-100',
+    purple: 'text-purple-100 dark:text-purple-100',
+    custom: ''
+};
 $: setContext('striped', striped);
 $: setContext('hoverable', hoverable);
+$: setContext('color', color);
 </script>
 
 <div class={divClass}>
@@ -37,7 +48,7 @@ $: setContext('hoverable', hoverable);
 	</div>
 	<table
 		{...$$restProps}
-		class={classNames('w-full text-left text-sm text-gray-500 dark:text-gray-400', $$props.class)}
+		class={classNames('w-full text-left text-sm', colors[color], $$props.class)}
 	>
 		<slot />
 	</table>

package/tables/TableSearch.svelte.d.ts

@@ -7,6 +7,7 @@ declare const __propDef: {
         striped?: boolean;
         hoverable?: boolean;
         placeholder?: string;
+        color?: 'blue' | 'green' | 'red' | 'yellow' | 'purple' | 'default' | 'custom';
     };
     events: {
         [evt: string]: CustomEvent<any>;

package/tooltips/Tooltip.svelte

@@ -1,142 +1,20 @@
-<script>import classNames from 'classnames';
-import { clickOutside } from '../utils/clickOutside';
-import { computePosition, flip, shift, offset, autoPlacement, arrow as arrowFloat } from '@floating-ui/dom';
-import { onDestroy } from 'svelte';
-export let placement = 'top';
-export let trigger = 'hover';
-export let style = 'dark';
+<script>import Popper from '../utils/Popper.svelte';
+import classNames from 'classnames';
 export let content = '';
-export let animation = 'duration-300';
-export let arrow = true;
-export let tipClass = 'absolute inline-block rounded-lg py-2 px-3 text-sm font-medium shadow-sm';
+export let style = 'dark';
 export let tipColor = '';
-export let open = false;
+export let tipClass = 'py-2 px-3 text-sm font-medium rounded-lg shadow-sm tooltip';
 const tipStyleClasses = {
-    dark: 'bg-gray-900 text-white dark:bg-gray-700',
+    dark: 'border border-gray-800 bg-gray-900 text-white dark:bg-gray-700 dark:border-gray-600',
     light: 'border border-gray-200 bg-white text-gray-900',
-    auto: 'border border-gray-200 bg-white text-gray-900 dark:border-none dark:bg-gray-700 dark:text-white',
-    custom: tipColor
-};
-const arrowStyleClasses = {
-    dark: 'bg-gray-900 dark:bg-gray-700',
-    light: 'bg-white',
-    auto: 'bg-white dark:bg-gray-700',
+    auto: 'border border-gray-200 bg-white text-gray-900 dark:bg-gray-700 dark:text-white dark:border-gray-600 ',
     custom: tipColor
 };
 let toolTipClass;
-$: toolTipClass = classNames(tipClass, animation !== false && `transition-opacity ${animation}`, !open && 'invisible opacity-0', tipStyleClasses[style], $$props.class);
-const floatingPlacement = (placement) => {
-    return placement === 'auto' ? undefined : placement;
-};
-const floatingMiddleware = (arrowRef, placement) => {
-    const middleware = [];
-    middleware.push(offset(8));
-    middleware.push(placement === 'auto' ? autoPlacement() : flip());
-    middleware.push(shift({ padding: 8 }));
-    if (arrowRef) {
-        middleware.push(arrowFloat({ element: arrowRef }));
-    }
-    return middleware;
-};
-let placementData;
-let tooltipRef, triggerRef, arrowRef;
-const updatePosition = () => computePosition(triggerRef, tooltipRef, {
-    middleware: floatingMiddleware(arrowRef, placement),
-    placement: floatingPlacement(placement)
-}).then((data) => (placementData = data));
-let attachedScroll = false;
-$: tooltipRef && open && updatePosition();
-$: {
-    if (tooltipRef && triggerRef) {
-        if (open && !attachedScroll) {
-            attachedScroll = true;
-            window.addEventListener('scroll', updatePosition, true);
-        }
-        else if (!open && attachedScroll) {
-            attachedScroll = false;
-            window.removeEventListener('scroll', updatePosition, true);
-        }
-    }
-}
-onDestroy(() => {
-    if (attachedScroll) {
-        attachedScroll = false;
-        window.removeEventListener('scroll', updatePosition, true);
-    }
-});
-const arrPos = {
-    top: 'bottom',
-    right: 'left',
-    bottom: 'top',
-    left: 'right'
-};
-let floatingArrowPlacement;
-$: {
-    if (placementData) {
-        const arrow = placementData.middlewareData.arrow;
-        const pos = arrPos[placementData?.placement?.split('-')[0]] ?? 'top';
-        if (pos === 'top' || pos === 'bottom')
-            floatingArrowPlacement = `${pos}: -4px; left: ${px(arrow?.x)}`;
-        else
-            floatingArrowPlacement = `${pos}: -4px; top: ${px(arrow?.y)}`;
-    }
-}
-const px = (x) => (x === undefined ? '' : x + 'px');
+$: toolTipClass = classNames(tipClass, tipStyleClasses[style], $$props.class);
 </script>
 
-<svelte:window on:resize={() => open && updatePosition()} />
-
-<div
-	use:clickOutside={() => {
-		if (open) {
-			open = false;
-		}
-	}}
->
-	<div
-		class="w-fit"
-		bind:this={triggerRef}
-		on:mouseenter={() => {
-			if (trigger === 'hover') {
-				open = true;
-			}
-		}}
-		on:mouseleave={() => {
-			if (open && trigger === 'hover') {
-				open = false;
-			}
-		}}
-		on:click={() => {
-			if (trigger === 'click') {
-				open = !open;
-			}
-		}}
-	>
-		<slot />
-	</div>
-
-	<div
-		bind:this={tooltipRef}
-		data-testid="tooltip"
-		class={toolTipClass}
-		style:left={px(placementData?.x)}
-		style:top={px(placementData?.y)}
-		style:position={placementData?.strategy ?? ''}
-	>
-		<div class="relative z-20">
-			<slot name="content">
-				{content}
-			</slot>
-		</div>
-		{#if arrow}
-			<div
-				class={classNames('absolute z-10 h-2 w-2 rotate-45', arrowStyleClasses[style])}
-				data-testid="tooltip-arrow"
-				style={floatingArrowPlacement}
-				bind:this={arrowRef}
-			>
-				&nbsp;
-			</div>
-		{/if}
-	</div>
-</div>
+<Popper activeContent={false} {...$$restProps} class={toolTipClass} on:show>
+	<slot slot="trigger" />
+	<slot name="content">{content}</slot>
+</Popper>

package/tooltips/Tooltip.svelte.d.ts

@@ -1,23 +1,21 @@
 import { SvelteComponentTyped } from "svelte";
-import type { Placement } from '@floating-ui/dom';
 declare const __propDef: {
     props: {
         [x: string]: any;
-        placement?: 'auto' | Placement;
-        trigger?: 'hover' | 'click';
-        style?: 'dark' | 'light' | 'auto' | 'custom';
         content?: string;
-        animation?: false | `duration-${number}`;
-        arrow?: boolean;
-        tipClass?: string;
+        style?: 'dark' | 'light' | 'auto' | 'custom';
         tipColor?: string;
-        open?: boolean;
+        tipClass?: string;
     };
     events: {
+        show: CustomEvent<any>;
+    } & {
         [evt: string]: CustomEvent<any>;
     };
     slots: {
-        default: {};
+        default: {
+            slot: string;
+        };
         content: {};
     };
 };

package/utils/Popper.svelte

@@ -0,0 +1,81 @@
+<script>import { createEventDispatcher } from 'svelte';
+import { createPopper } from '@popperjs/core';
+import classNames from 'classnames';
+const dispatch = createEventDispatcher();
+export let open = false;
+export let placement = 'top';
+export let offset = 8;
+export let trigger = 'hover';
+export let arrow = true;
+export let animation = 'duration-300';
+export let activeContent;
+let clickable;
+$: clickable = trigger === 'click';
+let triggerEl, contentEl, popper;
+let _blocked = false; // managment of the race condition between focusin and click events
+const block = () => ((_blocked = true), setTimeout(() => (_blocked = false), 500));
+const showHandler = (ev) => {
+    if (clickable && ev.type === 'focusin' && !open)
+        block();
+    open = ev.type === 'click' && !_blocked ? !open : true;
+};
+const hideHandler = (ev) => {
+    if (activeContent)
+        setTimeout(() => triggerEl.matches(':hover') || contentEl.matches(':hover') || (open = false), 100);
+    else
+        open = false;
+};
+$: {
+    if (triggerEl && contentEl) {
+        popper = createPopper(triggerEl, contentEl, {
+            placement,
+            modifiers: [{ name: 'offset', options: { offset: [0, offset] } }]
+        });
+    }
+}
+function enableListeners(modifiers) {
+    const modifier = modifiers.find((x) => x.name === 'eventListeners');
+    if (!modifier)
+        return [...modifiers, { name: 'eventListeners', enabled: open }];
+    modifier.enabled = open;
+    return modifiers;
+}
+$: {
+    if (popper) {
+        // Enable the event listeners
+        popper.setOptions(({ modifiers, ...options }) => ({
+            ...options,
+            modifiers: enableListeners(modifiers)
+        }));
+        open && popper.update(); // Update the position
+        dispatch('show', open);
+    }
+}
+let divClass;
+$: divClass = classNames('z-10', animation && `transition-opacity ${animation}`, open ? 'visible opacity-100' : 'invisible opacity-0', $$props.class);
+</script>
+
+<span
+	bind:this={triggerEl}
+	on:focusin={showHandler}
+	on:focusout={hideHandler}
+	on:click={clickable ? showHandler : undefined}
+	on:mouseenter={clickable ? undefined : showHandler}
+	on:mouseleave={clickable ? undefined : hideHandler}
+	class="inline-block"
+>
+	<slot name="trigger" />
+</span>
+<div
+	bind:this={contentEl}
+	role="tooltip"
+	tabindex={activeContent ? -1 : undefined}
+	class={divClass}
+	on:focus={activeContent ? showHandler : undefined}
+	on:blur={activeContent ? hideHandler : undefined}
+	on:mouseenter={activeContent && !clickable ? showHandler : undefined}
+	on:mouseleave={activeContent && !clickable ? hideHandler : undefined}
+>
+	<slot />
+	{#if arrow}<div data-popper-arrow />{/if}
+</div>

package/utils/Popper.svelte.d.ts

@@ -0,0 +1,29 @@
+import { SvelteComponentTyped } from "svelte";
+import type { Placement } from '@popperjs/core';
+declare const __propDef: {
+    props: {
+        [x: string]: any;
+        open?: boolean;
+        placement?: Placement;
+        offset?: number;
+        trigger?: 'hover' | 'click';
+        arrow?: boolean;
+        animation?: false | `duration-${number}`;
+        activeContent: boolean;
+    };
+    events: {
+        show: CustomEvent<any>;
+    } & {
+        [evt: string]: CustomEvent<any>;
+    };
+    slots: {
+        trigger: {};
+        default: {};
+    };
+};
+export declare type PopperProps = typeof __propDef.props;
+export declare type PopperEvents = typeof __propDef.events;
+export declare type PopperSlots = typeof __propDef.slots;
+export default class Popper extends SvelteComponentTyped<PopperProps, PopperEvents, PopperSlots> {
+}
+export {};