flowbite-svelte 0.17.1 → 0.17.4

package/CHANGELOG.md

@@ -2,6 +2,27 @@
 
 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.4](https://github.com/themesberg/flowbite-svelte/compare/v0.17.3...v0.17.4) (2022-06-14)
+
+
+### 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)
+
+
+### Bug Fixes
+
+* update ButtonGroupItem border ([365b6d2](https://github.com/themesberg/flowbite-svelte/commit/365b6d2b21b903a8b15057a9bb009e0d3d65e884))
+
+### [0.17.2](https://github.com/themesberg/flowbite-svelte/compare/v0.17.1...v0.17.2) (2022-06-08)
+
+
+### Bug Fixes
+
+* change type string to typeof SvelteComponent ([277c3e2](https://github.com/themesberg/flowbite-svelte/commit/277c3e24201088aa051726ae16f2e12f66a8a69e))
+
 ### [0.17.1](https://github.com/themesberg/flowbite-svelte/compare/v0.17.0...v0.17.1) (2022-06-07)
 
 

package/buttongroups/ButtonGroupItem.svelte

@@ -1,6 +1,6 @@
 <script>export let type = 'button';
-export let btnClass = 'inline-flex items-center py-2 px-4 text-sm font-medium text-gray-900 bg-white first:rounded-l-lg border-t border-b first:border last:rounded-r-md last:border border-gray-200 hover:bg-gray-100 hover:text-blue-700 focus:z-10 focus:ring-2 focus:ring-blue-700 focus:text-blue-700 dark:bg-gray-700 dark:border-gray-600 dark:text-white dark:hover:text-white dark:hover:bg-gray-600 dark:focus:ring-blue-500 dark:focus:text-white';
-export let outlineClass = 'inline-flex items-center py-2 px-4 text-sm font-medium text-gray-900 bg-transparent  first:rounded-l-lg border-t border-b first:border last:rounded-r-md last:border border-gray-900 hover:bg-gray-900 hover:text-white focus:z-10 focus:ring-2 focus:ring-gray-500 focus:bg-gray-900 focus:text-white dark:border-white dark:text-white dark:hover:text-white dark:hover:bg-gray-700 dark:focus:bg-gray-700';
+export let btnClass = 'inline-flex items-center py-2 px-4 text-sm font-medium text-gray-900 bg-white first:rounded-l-lg border-t border-b last:rounded-r-md border-l last:border-r border-gray-200 hover:bg-gray-100 hover:text-blue-700 focus:z-10 focus:ring-2 focus:ring-blue-700 focus:text-blue-700 dark:bg-gray-700 dark:border-gray-600 dark:text-white dark:hover:text-white dark:hover:bg-gray-600 dark:focus:ring-blue-500 dark:focus:text-white';
+export let outlineClass = 'inline-flex items-center py-2 px-4 text-sm font-medium text-gray-900 bg-transparent first:rounded-l-lg border-t border-b  last:rounded-r-md border-l last:border-r border-gray-900 hover:bg-gray-900 hover:text-white focus:z-10 focus:ring-2 focus:ring-gray-500 focus:bg-gray-900 focus:text-white dark:border-white dark:text-white dark:hover:text-white dark:hover:bg-gray-700 dark:focus:bg-gray-700';
 export let outline = false;
 export let href = '';
 if (outline) {

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.1",
+  "version": "0.17.4",
   "description": "Flowbite components for Svelte",
   "main": "index.js",
   "author": {
@@ -22,7 +22,6 @@
     "eslint": "^7.32.0",
     "eslint-config-prettier": "^8.3.0",
     "eslint-plugin-svelte3": "^3.2.1",
-    "flowbite-svelte": "^0.13.8",
     "mdsvex": "^0.10.5",
     "postcss": "^8.4.12",
     "postcss-load-config": "^3.1.4",
@@ -76,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"
   },
@@ -194,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/tooltips/Tooltip.svelte

@@ -1,113 +1,132 @@
-<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 { browser } from '$app/env';
+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;
+$: browser && tooltipRef && open && updatePosition();
+$: {
+    if (browser && 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/types.d.ts

@@ -79,13 +79,13 @@ export interface GroupTimelineType {
     comment?: string | HTMLElement;
 }
 export interface IconType {
-    name: string;
+    name: typeof SvelteComponent;
     size?: number;
     color?: Colors;
     class?: string;
 }
 export interface IconTabType {
-    name: string;
+    name: typeof SvelteComponent;
     active: boolean;
     href: string;
     rel?: string;

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 {};