flowbite-svelte 0.25.22 → 0.26.0

package/CHANGELOG.md

@@ -2,6 +2,50 @@
 
 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.26.0](https://github.com/themesberg/flowbite-svelte/compare/v0.25.24...v0.26.0) (2022-08-29)
+
+
+### ⚠ BREAKING CHANGES
+
+* Tooltip changed in accordance to new Popper implementation.
+
+- Tooltip examples corrected
+- Avatar example corrected
+
+### Features
+
+* tooltips new API ([d9dacf9](https://github.com/themesberg/flowbite-svelte/commit/d9dacf9f65e85be93a3458dd5359d614a0dd12a0))
+
+
+### Bug Fixes
+
+* Avatar tooltip example ([ff7c1af](https://github.com/themesberg/flowbite-svelte/commit/ff7c1af20306609f77831ff1d2632700a9f596da))
+* docs corrections ([f208323](https://github.com/themesberg/flowbite-svelte/commit/f208323ac1457b88572aaae37531e6b3da1055de))
+* docs corrections 2 ([5adb4d8](https://github.com/themesberg/flowbite-svelte/commit/5adb4d816591d7bc9aff2e549fc364c80e650b4b))
+
+
+* Merge branch 'jjagielka-tooltip' ([1c37601](https://github.com/themesberg/flowbite-svelte/commit/1c3760139e24569287891c1ca3f67f2e0e3b9168))
+
+### [0.25.24](https://github.com/themesberg/flowbite-svelte/compare/v0.25.23...v0.25.24) (2022-08-28)
+
+
+### Features
+
+* popper reloaded ([a4b851e](https://github.com/themesberg/flowbite-svelte/commit/a4b851e2409356a90fd6aaae62db327b505bdcb2))
+* popper reloaded part 2 ([2482870](https://github.com/themesberg/flowbite-svelte/commit/2482870842386c8c1e5824869ce7822b8682e8a0))
+
+
+### Bug Fixes
+
+* tab page timeline ([ab598a5](https://github.com/themesberg/flowbite-svelte/commit/ab598a59a3d373f14740a42bbaec3cb276eed34b))
+
+### [0.25.23](https://github.com/themesberg/flowbite-svelte/compare/v0.25.22...v0.25.23) (2022-08-28)
+
+
+### Bug Fixes
+
+* BREAKING CHANGE for timeline components ([8b30105](https://github.com/themesberg/flowbite-svelte/commit/8b30105060d150d632ea6fbfac8e1f5639f82546))
+
 ### [0.25.22](https://github.com/themesberg/flowbite-svelte/compare/v0.25.21...v0.25.22) (2022-08-28)
 
 

package/avatar/Avatar.svelte

@@ -22,17 +22,17 @@ $: avatarClass = classNames(rounded ? 'rounded' : 'rounded-full', border && 'p-1
 
 <Dot show={$$props.dot} {rounded} {...dot} {size} class={sizes[size]}>
 	{#if src}
-		<img class={avatarClass} {alt} {src} />
+		<img {alt} {src} {...$$restProps} class={avatarClass} />
 	{:else if $$slots.default}
 		<svelte:element
 			this={href ? 'a' : 'div'}
-			class="flex justify-center items-center text-xs font-medium {avatarClass}"
 			{href}
-		>
+			{...$$restProps}
+			class="flex justify-center items-center text-xs font-medium {avatarClass}">
 			<slot />
 		</svelte:element>
 	{:else}
-		<svelte:element this={href ? 'a' : 'div'} class={avatarClass}>
+		<svelte:element this={href ? 'a' : 'div'} {...$$restProps} class={avatarClass}>
 			<AvatarPlaceholder {rounded} />
 		</svelte:element>
 	{/if}

package/dropdowns/Dropdown.svelte

@@ -6,12 +6,15 @@ import ChevronUp from '../utils/ChevronUp.svelte';
 import ChevronRight from '../utils/ChevronRight.svelte';
 import ChevronDown from '../utils/ChevronDown.svelte';
 import ChevronLeft from '../utils/ChevronLeft.svelte';
+import generateId from '../utils/generateId';
 export let label = '';
 export let inline = 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';
 export let open = false;
+export let triggeredBy = undefined;
+let id = generateId();
 setContext('background', true);
 const icons = {
     top: ChevronUp,
@@ -25,18 +28,10 @@ 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>
 
-<Popper
-	activeContent={true}
-	arrow={false}
-	{placement}
-	{...$$restProps}
-	class={popoverClass}
-	trigger="click"
-	on:show
-	bind:open>
-	<slot name="trigger" slot="trigger">
+{#if label}
+	<slot name="trigger">
 		{#if inline}
-			<button class={labelClass} class:flex-row-reverse={icon == ChevronLeft}>
+			<button {id} class={labelClass} class:flex-row-reverse={icon == ChevronLeft}>
 				<slot name="label">{label}</slot>
 				{#if arrowIcon}
 					<svelte:component
@@ -45,7 +40,7 @@ $: popoverClass = classNames('rounded-lg shadow-sm', 'bg-white dark:bg-gray-800'
 				{/if}
 			</button>
 		{:else}
-			<Button {...$$restProps} class={icon == ChevronLeft && 'flex-row-reverse'}>
+			<Button {id} {...$$restProps} class={icon == ChevronLeft && 'flex-row-reverse'}>
 				<slot name="label">{label}</slot>
 				{#if arrowIcon}
 					<svelte:component
@@ -55,6 +50,18 @@ $: popoverClass = classNames('rounded-lg shadow-sm', 'bg-white dark:bg-gray-800'
 			</Button>
 		{/if}
 	</slot>
+{/if}
+
+<Popper
+	activeContent={true}
+	arrow={false}
+	{placement}
+	{...$$restProps}
+	class={popoverClass}
+	trigger="click"
+	on:show
+	bind:open
+	triggeredBy={triggeredBy ?? '#' + id}>
 	<slot name="content">
 		<ul class="py-1">
 			<slot />

package/dropdowns/Dropdown.svelte.d.ts

@@ -9,6 +9,7 @@ declare const __propDef: {
         labelClass?: string;
         placement?: 'auto' | Placement;
         open?: boolean;
+        triggeredBy?: string;
     };
     events: {
         show: CustomEvent<any>;
@@ -16,9 +17,7 @@ declare const __propDef: {
         [evt: string]: CustomEvent<any>;
     };
     slots: {
-        trigger: {
-            slot: string;
-        };
+        trigger: {};
         label: {};
         content: {};
         default: {};

package/dropdowns/DropdownItem.svelte

@@ -18,6 +18,7 @@ const colors = {
 	on:blur
 	on:mouseenter
 	on:mouseleave
+	tabindex="0"
 >
 	<slot />
 </li>

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "flowbite-svelte",
-  "version": "0.25.22",
+  "version": "0.26.0",
   "description": "Flowbite components for Svelte",
   "main": "index.js",
   "author": {
@@ -244,6 +244,7 @@
     "./utils/Popper.svelte": "./utils/Popper.svelte",
     "./utils/Wrapper.svelte": "./utils/Wrapper.svelte",
     "./utils/clickOutside": "./utils/clickOutside.js",
+    "./utils/createEventDispatcher": "./utils/createEventDispatcher.js",
     "./utils/focusTrap": "./utils/focusTrap.js",
     "./utils/generateId": "./utils/generateId.js"
   },

package/popover/Popover.svelte

@@ -1,16 +1,16 @@
 <script>import Popper from '../utils/Popper.svelte';
 import classNames from 'classnames';
 export let title = '';
+export let triggeredBy;
 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', $$props.class);
 </script>
 
-<Popper activeContent={true} {...$$restProps} class={popoverClass} on:show>
+<Popper activeContent={true} {triggeredBy} {...$$restProps} class={popoverClass} on:show>
 	<slot name="trigger" slot="trigger" />
 	{#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"
-		>
+			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>

package/popover/Popover.svelte.d.ts

@@ -3,6 +3,7 @@ declare const __propDef: {
     props: {
         [x: string]: any;
         title?: string;
+        triggeredBy: string;
     };
     events: {
         show: CustomEvent<any>;

package/timelines/TimelineItem.svelte

@@ -1,6 +1,5 @@
 <script>import classNames from 'classnames';
 import { getContext } from 'svelte';
-export let icon;
 export let title = '';
 export let date = '';
 export let customDiv = '';
@@ -49,8 +48,8 @@ const h3Class = classNames(order === 'vertical'
 		<slot />
 	{:else if order === 'vertical'}
 		<div class={divClasses[order]} />
-		{#if icon}
-			{@html icon}
+		{#if $$slots.icon}
+			<slot name="icon" />
 		{:else}
 			<svg
 				aria-hidden="true"
@@ -74,8 +73,8 @@ const h3Class = classNames(order === 'vertical'
 		<slot />
 	{:else if order === 'horizontal'}
 		<div class={divClasses[order]} />
-		{#if icon}
-			{@html icon}
+		{#if $$slots.icon}
+			<slot name="icon" />
 		{:else}
 			<svg
 				aria-hidden="true"
@@ -99,8 +98,8 @@ const h3Class = classNames(order === 'vertical'
 		<slot />
 	{:else}
 		<div class={divClasses[order]} />
-		{#if icon}
-			{@html icon}
+		{#if $$slots.icon}
+			<slot name="icon" />
 		{:else}
 			<svg
 				aria-hidden="true"

package/timelines/TimelineItem.svelte.d.ts

@@ -1,8 +1,6 @@
 import { SvelteComponentTyped } from "svelte";
-import type { SvelteComponent } from 'svelte';
 declare const __propDef: {
     props: {
-        icon: string | SvelteComponent;
         title?: string;
         date?: string;
         customDiv?: string;
@@ -13,6 +11,7 @@ declare const __propDef: {
     };
     slots: {
         default: {};
+        icon: {};
     };
 };
 export declare type TimelineItemProps = typeof __propDef.props;

package/timelines/TimelineItemVertical.svelte

@@ -2,17 +2,13 @@
 // export let timelineItems: TimelineItemVerticalType[];
 export let title;
 export let date;
-export let href;
-export let text;
-export let linkname;
-export let icon;
 </script>
 
 <li class="mb-10 ml-6">
 	<span
 		class="flex absolute -left-3 justify-center items-center w-6 h-6 bg-blue-200 rounded-full ring-8 ring-white dark:ring-gray-900 dark:bg-blue-900">
-		{#if icon}
-			{@html icon}
+		{#if $$slots.icon}
+			<slot name="icon" />
 		{:else}
 			<svg
 				width="20"
@@ -33,23 +29,5 @@ export let icon;
 	</h3>
 	<time class="block mb-2 text-sm font-normal leading-none text-gray-400 dark:text-gray-500"
 		>{date}</time>
-	<p class="mb-4 text-base font-normal text-gray-500 dark:text-gray-400">
-		{text}
-	</p>
-	{#if href}
-		<a
-			{href}
-			class="inline-flex items-center py-2 px-4 text-sm font-medium text-gray-900 bg-white rounded-lg border border-gray-200 hover:bg-gray-100 hover:text-blue-700 focus:z-10 focus:ring-4 focus:outline-none focus:ring-gray-200 focus:text-blue-700 dark:bg-gray-800 dark:text-gray-400 dark:border-gray-600 dark:hover:text-white dark:hover:bg-gray-700 dark:focus:ring-gray-700"
-			>{linkname}
-			<svg
-				class="ml-2 w-3 h-3"
-				fill="currentColor"
-				viewBox="0 0 20 20"
-				xmlns="http://www.w3.org/2000/svg"
-				><path
-					fill-rule="evenodd"
-					d="M12.293 5.293a1 1 0 011.414 0l4 4a1 1 0 010 1.414l-4 4a1 1 0 01-1.414-1.414L14.586 11H3a1 1 0 110-2h11.586l-2.293-2.293a1 1 0 010-1.414z"
-					clip-rule="evenodd" /></svg
-			></a>
-	{/if}
+	<slot />
 </li>

package/timelines/TimelineItemVertical.svelte.d.ts

@@ -3,15 +3,14 @@ declare const __propDef: {
     props: {
         title: string;
         date: string;
-        href: string;
-        text: string;
-        linkname: string;
-        icon: string;
     };
     events: {
         [evt: string]: CustomEvent<any>;
     };
-    slots: {};
+    slots: {
+        icon: {};
+        default: {};
+    };
 };
 export declare type TimelineItemVerticalProps = typeof __propDef.props;
 export declare type TimelineItemVerticalEvents = typeof __propDef.events;

package/tooltips/Tooltip.svelte

@@ -1,20 +1,19 @@
 <script>import Popper from '../utils/Popper.svelte';
 import classNames from 'classnames';
-export let content = '';
+export let color = '';
 export let style = 'dark';
-export let tipColor = '';
 export let tipClass = 'py-2 px-3 text-sm font-medium rounded-lg shadow-sm tooltip';
-const tipStyleClasses = {
+export let triggeredBy;
+const colors = {
     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:bg-gray-700 dark:text-white dark:border-gray-600 ',
-    custom: tipColor
+    custom: color
 };
 let toolTipClass;
-$: toolTipClass = classNames(tipClass, tipStyleClasses[style], $$props.class);
+$: toolTipClass = classNames(tipClass, colors[style], $$props.class);
 </script>
 
-<Popper activeContent={false} {...$$restProps} class={toolTipClass} on:show>
-	<slot slot="trigger" />
-	<slot name="content">{content}</slot>
+<Popper activeContent={false} {triggeredBy} {...$$restProps} class={toolTipClass} on:show>
+	<slot />
 </Popper>

package/tooltips/Tooltip.svelte.d.ts

@@ -2,10 +2,10 @@ import { SvelteComponentTyped } from "svelte";
 declare const __propDef: {
     props: {
         [x: string]: any;
-        content?: string;
+        color?: string;
         style?: 'dark' | 'light' | 'auto' | 'custom';
-        tipColor?: string;
         tipClass?: string;
+        triggeredBy: string;
     };
     events: {
         show: CustomEvent<any>;
@@ -13,10 +13,7 @@ declare const __propDef: {
         [evt: string]: CustomEvent<any>;
     };
     slots: {
-        default: {
-            slot: string;
-        };
-        content: {};
+        default: {};
     };
 };
 export declare type TooltipProps = typeof __propDef.props;

package/utils/Popper.svelte

@@ -1,84 +1,112 @@
-<script>import { createEventDispatcher } from 'svelte';
+<script>import { onMount } from 'svelte';
+import { fade } from 'svelte/transition';
 import { createPopper } from '@popperjs/core';
 import classNames from 'classnames';
-const dispatch = createEventDispatcher();
-export let open = false;
-export let placement = 'top';
+import createEventDispatcher from './createEventDispatcher';
+export let activeContent = false;
+export let animation = 100;
+export let arrow = true;
 export let offset = 8;
+export let placement = 'top';
 export let trigger = 'hover';
-export let arrow = true;
-export let animation = 'duration-300';
-export let activeContent;
+export let triggeredBy;
+const dispatch = createEventDispatcher();
+let open = false;
 let clickable;
 $: clickable = trigger === 'click';
-let triggerEl, contentEl, popper;
+$: dispatch('show', triggerEl, open);
+let triggerEl;
+let triggerEls = [];
+let popper;
 let _blocked = false; // managment of the race condition between focusin and click events
-const block = () => ((_blocked = true), setTimeout(() => (_blocked = false), 500));
+const block = () => ((_blocked = true), setTimeout(() => (_blocked = false), 250));
 const showHandler = (ev) => {
+    if (triggerEl === undefined)
+        triggerEl = ev.target;
+    else if (triggerEls.includes(ev.target) && triggerEl !== ev.target) {
+        triggerEl = ev.target;
+        block();
+    }
     if (clickable && ev.type === 'focusin' && !open)
         block();
-    open = ev.type === 'click' && !_blocked ? !open : true;
+    open = clickable && ev.type === 'click' && !_blocked ? !open : true;
 };
+// reactivity
+$: popper && (popper.state.elements.reference = triggerEl) && popper.setOptions({ placement });
+// typescript typeguards - poper.state.element.reference: Element|HTMLElement|VirtualElement
+const hasHover = (el) => el.matches && el.matches(':hover');
+const hasFocus = (el) => el.contains && el.contains(document.activeElement);
 const hideHandler = (ev) => {
-    if (activeContent)
-        setTimeout(() => (!clickable && (triggerEl.matches(':hover') || contentEl.matches(':hover'))) ||
-            contentEl.contains(document.activeElement) ||
-            (open = false), 100);
+    if (activeContent) {
+        setTimeout(() => {
+            const elements = Object.values(popper?.state.elements ?? {});
+            if (ev.type === 'mouseleave' && elements.some(hasHover))
+                return;
+            if (ev.type === 'focusout' && elements.some(hasFocus))
+                return;
+            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;
+function init(node, _open) {
+    popper = createPopper(triggerEl, node, {
+        placement,
+        modifiers: [
+            { name: 'offset', options: { offset: [0, offset] } },
+            { name: 'eventListeners', enabled: open }
+        ]
+    });
+    return {
+        destroy() {
+            popper.destroy();
+        }
+    };
 }
-$: {
-    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);
+onMount(() => {
+    const events = [
+        ['focusin', showHandler, true],
+        ['focusout', hideHandler, true],
+        ['click', showHandler, clickable],
+        ['mouseenter', showHandler, !clickable],
+        ['mouseleave', hideHandler, !clickable]
+    ];
+    triggerEls = [...document.querySelectorAll(triggeredBy)];
+    if (!triggerEls.length)
+        console.error('no triggers given');
+    triggerEls.forEach((element) => {
+        if (element.tabIndex < 0)
+            element.tabIndex = 0; // trigger must be focusable
+        for (const [name, handler, cond] of events)
+            if (cond)
+                element.addEventListener(name, handler);
+    });
+    return () => {
+        triggerEl = undefined;
+        triggerEls.forEach((element) => {
+            if (element) {
+                for (const [name, handler] of events)
+                    element.removeEventListener(name, handler);
+            }
+        });
+    };
+});
 </script>
 
-<div
-	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" />
-</div>
-<div
-	bind:this={contentEl}
-	role="tooltip"
-	tabindex={activeContent ? -1 : undefined}
-	class={divClass}
-	on:focusin={activeContent ? showHandler : undefined}
-	on:focusout={activeContent ? hideHandler : undefined}
-	on:mouseenter={activeContent && !clickable ? showHandler : undefined}
-	on:mouseleave={activeContent && !clickable ? hideHandler : undefined}
-	style="position: absolute;"
->
-	<slot />
-	{#if arrow}<div data-popper-arrow />{/if}
-</div>
+{#if open}
+	<div
+		use:init={open}
+		transition:fade={{ duration: animation ? animation : 0 }}
+		role="tooltip"
+		tabIndex={activeContent ? -1 : undefined}
+		class={classNames('z-10', $$props.class)}
+		on:focusin={activeContent ? showHandler : undefined}
+		on:focusout={activeContent ? hideHandler : undefined}
+		on:mouseenter={activeContent && !clickable ? showHandler : undefined}
+		on:mouseleave={activeContent && !clickable ? hideHandler : undefined}
+		style="position: absolute;">
+		<slot />
+		{#if arrow}<div data-popper-arrow />{/if}
+	</div>
+{/if}

package/utils/Popper.svelte.d.ts

@@ -3,21 +3,18 @@ import type { Placement } from '@popperjs/core';
 declare const __propDef: {
     props: {
         [x: string]: any;
-        open?: boolean;
-        placement?: Placement;
+        activeContent?: boolean;
+        animation?: false | number;
+        arrow?: boolean;
         offset?: number;
+        placement?: Placement;
         trigger?: 'hover' | 'click';
-        arrow?: boolean;
-        animation?: false | `duration-${number}`;
-        activeContent: boolean;
+        triggeredBy: string;
     };
     events: {
-        show: CustomEvent<any>;
-    } & {
         [evt: string]: CustomEvent<any>;
     };
     slots: {
-        trigger: {};
         default: {};
     };
 };

package/utils/createEventDispatcher.js

@@ -0,0 +1,24 @@
+/*
+ Custom Event Dispatcher
+ 
+ Sets `target` in event data.
+
+ https://svelte.dev/repl/c93cbf99a8ca4f44912e662a8e3cbef7?version=3.37.0
+
+*/
+
+import { get_current_component } from 'svelte/internal';
+
+export default function createEventDispatcher() {
+	const component = get_current_component();
+	return (type, target, detail) => {
+		const callbacks = component.$$.callbacks[type];
+		if (callbacks) {
+			const event = new CustomEvent(type, { detail });
+			target.dispatchEvent(event);
+			callbacks.slice().forEach((fn) => {
+				fn.call(component, event);
+			});
+		}
+	};
+}