flowbite-svelte 0.17.3 → 0.17.6

package/CHANGELOG.md

@@ -2,6 +2,25 @@
 
 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.17.6](https://github.com/themesberg/flowbite-svelte/compare/v0.17.5...v0.17.6) (2022-06-17)
+
+
+### Bug Fixes
+
+* removed $app/env browser from Tooltip component ([604a1e0](https://github.com/themesberg/flowbite-svelte/commit/604a1e075c6333c5532e04916a20500a31fb4716))
+
+### [0.17.5](https://github.com/themesberg/flowbite-svelte/compare/v0.17.4...v0.17.5) (2022-06-16)
+
+### [0.17.4](https://github.com/themesberg/flowbite-svelte/compare/v0.17.3...v0.17.4) (2022-06-14)
+
+### Breaking Change
+
+* Tooltip component has different structures.
+
+### Bug Fixes
+
+* update Tooltip component ([d0cc06e](https://github.com/themesberg/flowbite-svelte/commit/d0cc06e991e5677463a5625b4abaee2a6edef3fc))
+
 ### [0.17.3](https://github.com/themesberg/flowbite-svelte/compare/v0.17.2...v0.17.3) (2022-06-14)
 
 

package/index.d.ts

@@ -97,4 +97,3 @@ export { default as TimelineItemHorizontal } from './timelines/TimelineItemHoriz
 export { default as TimelineItemVertical } from './timelines/TimelineItemVertical.svelte';
 export { default as Toast } from './toasts/Toast.svelte';
 export { default as Tooltip } from './tooltips/Tooltip.svelte';
-export { default as LightTooltip } from './tooltips/LightTooltip.svelte';

package/index.js

@@ -123,4 +123,3 @@ export { default as TimelineItemVertical } from './timelines/TimelineItemVertica
 export { default as Toast } from './toasts/Toast.svelte';
 // Tooltips
 export { default as Tooltip } from './tooltips/Tooltip.svelte';
-export { default as LightTooltip } from './tooltips/LightTooltip.svelte';

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "flowbite-svelte",
-  "version": "0.17.3",
+  "version": "0.17.6",
   "description": "Flowbite components for Svelte",
   "main": "index.js",
   "author": {
@@ -75,6 +75,8 @@
     "url": "https://github.com/themesberg/flowbite-svelte"
   },
   "dependencies": {
+    "@floating-ui/dom": "^0.5.3",
+    "classnames": "^2.3.1",
     "flowbite": "^1.4.2",
     "svelte-heros": "^2.2.2"
   },
@@ -193,9 +195,9 @@
     "./timelines/TimelineItemHorizontal.svelte": "./timelines/TimelineItemHorizontal.svelte",
     "./timelines/TimelineItemVertical.svelte": "./timelines/TimelineItemVertical.svelte",
     "./toasts/Toast.svelte": "./toasts/Toast.svelte",
-    "./tooltips/LightTooltip.svelte": "./tooltips/LightTooltip.svelte",
     "./tooltips/Tooltip.svelte": "./tooltips/Tooltip.svelte",
     "./types": "./types.js",
+    "./utils/clickOutside": "./utils/clickOutside.js",
     "./utils/generateId": "./utils/generateId.js"
   },
   "svelte": "./index.js"

package/tables/Table.svelte

@@ -2,21 +2,22 @@
 export let divClass = 'relative overflow-x-auto shadow-md sm:rounded-lg';
 export let tableClass = 'w-full text-sm text-left text-gray-500 dark:text-gray-400';
 export let theadClass = 'text-xs text-gray-700 uppercase bg-gray-50 dark:bg-gray-700 dark:text-gray-400';
+export let thClass = 'px-6 py-3';
 </script>
 
 <div class={divClass}>
-  <table class={tableClass}>
-    <thead class={theadClass}>
-      <tr>
-        {#each header as column}
-          <th scope="col" class="px-6 py-3">
-            {column}
-          </th>
-        {/each}
-      </tr>
-    </thead>
-    <tbody>
-      <slot />
-    </tbody>
-  </table>
+	<table class={tableClass}>
+		<thead class={theadClass}>
+			<tr>
+				{#each header as column}
+					<th scope="col" class={thClass}>
+						{column}
+					</th>
+				{/each}
+			</tr>
+		</thead>
+		<tbody>
+			<slot />
+		</tbody>
+	</table>
 </div>

package/tables/Table.svelte.d.ts

@@ -5,6 +5,7 @@ declare const __propDef: {
         divClass?: string;
         tableClass?: string;
         theadClass?: string;
+        thClass?: string;
     };
     events: {
         [evt: string]: CustomEvent<any>;

package/tooltips/Tooltip.svelte

@@ -1,113 +1,131 @@
-<script>export let tip;
-export let top = false;
-export let right = false;
-export let bottom = false;
-export let left = false;
-export let active = false;
+<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';
+export let content = '';
+export let animation = 'duration-300';
+export let arrow = true;
+let open = false;
+const floatingPlacement = ({ placement }) => {
+    return placement === 'auto' ? undefined : placement;
+};
+const floatingArrowPlacement = ({ placement }) => {
+    if (!placement) {
+        return 'top';
+    }
+    return {
+        top: 'bottom',
+        right: 'left',
+        bottom: 'top',
+        left: 'right'
+    }[placement.split('-')[0]];
+};
+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 (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);
+    }
+});
 </script>
 
-<div class="tooltip-wrapper">
-	<span class="tooltip-slot">
+<svelte:window on:resize={() => open && updatePosition()} />
+
+<div>
+	<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;
+			}
+		}}
+		use:clickOutside={() => {
+			if (open) {
+				open = false;
+			}
+		}}
+	>
 		<slot />
-	</span>
-	<div class="inline-block absolute invisible z-10 py-2 px-3 bg-gray-900 rounded-lg shadow-sm opacity-0 transition-opacity duration-300 tooltip dark:bg-gray-700" class:active class:left class:right class:bottom class:top>
-		{#if tip}
-			<div class="text-sm font-medium text-white ">{tip}</div>
-		{:else}
-			<slot name="custom-tip" />
+	</div>
+
+	<div
+		bind:this={tooltipRef}
+		data-testid="tooltip"
+		class={classNames(
+			'absolute inline-block rounded-lg py-2 px-3 text-sm font-medium shadow-sm',
+			animation !== false && `transition-opacity ${animation}`,
+			{
+				'invisible opacity-0': !open,
+				'bg-gray-900 text-white dark:bg-gray-700': style === 'dark',
+				'border border-gray-200 bg-white text-gray-900': style === 'light',
+				'border border-gray-200 bg-white text-gray-900 dark:border-none dark:bg-gray-700 dark:text-white':
+					style === 'auto'
+			},
+			$$props.class
+		)}
+		style={`left:${placementData?.x}px;top:${placementData?.y}px;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', {
+					'bg-gray-900 dark:bg-gray-700': style === 'dark',
+					'bg-white': style === 'light',
+					'bg-white dark:bg-gray-700': style === 'auto'
+				})}
+				data-testid="tooltip-arrow"
+				style={`left:${placementData?.middlewareData.arrow?.x}px;top:${
+					placementData?.middlewareData.arrow?.y
+				}px;${floatingArrowPlacement({ placement: placementData?.placement })}:-4px`}
+				bind:this={arrowRef}
+			>
+				&nbsp;
+			</div>
 		{/if}
 	</div>
 </div>
-
-<style>
-	.tooltip-wrapper {
-		position: relative;
-		display: inline-block;
-	}
-	.tooltip {
-		position: absolute;
-		font-family: inherit;
-		display: inline-block;
-		white-space: nowrap;
-		color: inherit;
-		opacity: 0;
-		visibility: hidden;
-		transition: opacity 150ms, visibility 150ms;
-	}
-
-	.tooltip.top:after {
-		content: '';
-		position: absolute;
-		top: 100%;
-		left: 50%;
-		margin-left: -10px;
-		border-width: 5px;
-		border-style: solid;
-		border-color: rgb(55 65 81) transparent transparent transparent;
-	}
-	.tooltip.bottom::after {
-		content: '';
-		position: absolute;
-		top: -30%;
-		left: 50%;
-		margin-left: -10px;
-		border-width: 5px;
-		border-style: solid;
-		border-color: transparent transparent rgb(55 65 81) transparent;
-	}
-	.tooltip.right::after {
-		content: '';
-		position: absolute;
-		/* vertically center */
-		top: 50%;
-		transform: translateY(-50%);
-		/* position tooltip correctly */
-		right: 100%;
-		margin-left: -5px;
-
-		border-width: 5px;
-		border-style: solid;
-		border-color: transparent rgb(55 65 81) transparent transparent;
-	}
-	.tooltip.left::after {
-		content: '';
-		position: absolute;
-		/* vertically center */
-		top: 50%;
-		transform: translateY(-50%);
-		/* position tooltip correctly */
-		left: 100%;
-		/* margin-left: -5px; */
-		border-width: 5px;
-		border-style: solid;
-		border-color: transparent transparent transparent rgb(55 65 81);
-	}
-	.tooltip.top {
-		left: 50%;
-		transform: translate(-50%, -100%);
-		margin-top: -8px;
-	}
-	.tooltip.bottom {
-		left: 50%;
-		bottom: 0px;
-		transform: translate(-50%, 100%);
-		/* margin-bottom: -px; */
-	}
-	.tooltip.left {
-		left: 0;
-		transform: translateX(-100%);
-		margin-left: -8px;
-	}
-	.tooltip.right {
-		right: 0;
-		transform: translateX(100%);
-		margin-right: 0px;
-	}
-	.tooltip.active {
-		opacity: 1;
-		visibility: initial;
-	}
-	.tooltip-slot:hover + .tooltip {
-		opacity: 1;
-		visibility: initial;
-	}</style>

package/tooltips/Tooltip.svelte.d.ts

@@ -1,19 +1,21 @@
 import { SvelteComponentTyped } from "svelte";
+import type { Placement } from '@floating-ui/dom';
 declare const __propDef: {
     props: {
-        tip: string;
-        top?: boolean;
-        right?: boolean;
-        bottom?: boolean;
-        left?: boolean;
-        active?: boolean;
+        [x: string]: any;
+        placement?: 'auto' | Placement;
+        trigger?: 'hover' | 'click';
+        style?: 'dark' | 'light' | 'auto';
+        content?: string;
+        animation?: false | `duration-${number}`;
+        arrow?: boolean;
     };
     events: {
         [evt: string]: CustomEvent<any>;
     };
     slots: {
         default: {};
-        'custom-tip': {};
+        content: {};
     };
 };
 export declare type TooltipProps = typeof __propDef.props;

package/utils/clickOutside.d.ts

@@ -0,0 +1,3 @@
+export declare function clickOutside(node: HTMLElement, callback: () => void): {
+    destroy(): void;
+};

package/utils/clickOutside.js

@@ -0,0 +1,15 @@
+export function clickOutside(node, callback) {
+    const handleClick = (event) => {
+        if (!event?.target)
+            return;
+        if (node && !node.contains(event.target) && !event.defaultPrevented) {
+            callback();
+        }
+    };
+    document.addEventListener('click', handleClick, true);
+    return {
+        destroy() {
+            document.removeEventListener('click', handleClick, true);
+        },
+    };
+}

package/tooltips/LightTooltip.svelte

@@ -1,120 +0,0 @@
-<script>export let tip;
-export let top = false;
-export let right = false;
-export let bottom = false;
-export let left = false;
-export let active = false;
-</script>
-
-<div class="tooltip-wrapper">
-	<span class="tooltip-slot">
-		<slot />
-	</span>
-	<div
-		class="inline-block absolute invisible z-10 py-2 px-3 bg-white rounded-lg border border-gray-200 shadow-sm opacity-0 tooltip"
-		class:active
-		class:left
-		class:right
-		class:bottom
-		class:top
-	>
-		{#if tip}
-			<div class="text-sm font-medium text-gray-900">{tip}</div>
-		{:else}
-			<slot name="custom-tip" />
-		{/if}
-	</div>
-</div>
-
-<style>
-	.tooltip-wrapper {
-		position: relative;
-		display: inline-block;
-	}
-	.tooltip {
-		position: absolute;
-		font-family: inherit;
-		display: inline-block;
-		white-space: nowrap;
-		color: inherit;
-		opacity: 0;
-		visibility: hidden;
-		transition: opacity 150ms, visibility 150ms;
-	}
-
-	.tooltip.top:after {
-		content: '';
-		position: absolute;
-		top: 100%;
-		left: 50%;
-		margin-left: -10px;
-		border-width: 5px;
-		border-style: solid;
-		border-color: #ddd transparent transparent transparent;
-	}
-	.tooltip.bottom::after {
-		content: '';
-		position: absolute;
-		top: -30%;
-		left: 50%;
-		margin-left: -10px;
-		border-width: 5px;
-		border-style: solid;
-		border-color: transparent transparent #ddd transparent;
-	}
-	.tooltip.right::after {
-		content: '';
-		position: absolute;
-		/* vertically center */
-		top: 50%;
-		transform: translateY(-50%);
-		/* position tooltip correctly */
-		right: 100%;
-		margin-left: -5px;
-
-		border-width: 5px;
-		border-style: solid;
-		border-color: transparent #ddd transparent transparent;
-	}
-	.tooltip.left::after {
-		content: '';
-		position: absolute;
-		/* vertically center */
-		top: 50%;
-		transform: translateY(-50%);
-		/* position tooltip correctly */
-		left: 100%;
-		/* margin-left: -5px; */
-		border-width: 5px;
-		border-style: solid;
-		border-color: transparent transparent transparent #ddd;
-	}
-	.tooltip.top {
-		left: 50%;
-		transform: translate(-50%, -100%);
-		margin-top: -8px;
-	}
-	.tooltip.bottom {
-		left: 50%;
-		bottom: 0px;
-		transform: translate(-50%, 100%);
-		/* margin-bottom: -px; */
-	}
-	.tooltip.left {
-		left: 0;
-		transform: translateX(-100%);
-		margin-left: -8px;
-	}
-	.tooltip.right {
-		right: 0;
-		transform: translateX(100%);
-		margin-right: 0px;
-	}
-	.tooltip.active {
-		opacity: 1;
-		visibility: initial;
-	}
-	.tooltip-slot:hover + .tooltip {
-		opacity: 1;
-		visibility: initial;
-	}</style>

package/tooltips/LightTooltip.svelte.d.ts

@@ -1,24 +0,0 @@
-import { SvelteComponentTyped } from "svelte";
-declare const __propDef: {
-    props: {
-        tip: string;
-        top?: boolean;
-        right?: boolean;
-        bottom?: boolean;
-        left?: boolean;
-        active?: boolean;
-    };
-    events: {
-        [evt: string]: CustomEvent<any>;
-    };
-    slots: {
-        default: {};
-        'custom-tip': {};
-    };
-};
-export declare type LightTooltipProps = typeof __propDef.props;
-export declare type LightTooltipEvents = typeof __propDef.events;
-export declare type LightTooltipSlots = typeof __propDef.slots;
-export default class LightTooltip extends SvelteComponentTyped<LightTooltipProps, LightTooltipEvents, LightTooltipSlots> {
-}
-export {};