flowbite-svelte 0.25.23 → 0.25.24

package/CHANGELOG.md

@@ -2,6 +2,19 @@
 
 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.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)
 
 

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.23",
+  "version": "0.25.24",
   "description": "Flowbite components for Svelte",
   "main": "index.js",
   "author": {

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/tooltips/Tooltip.svelte

@@ -1,9 +1,11 @@
 <script>import Popper from '../utils/Popper.svelte';
 import classNames from 'classnames';
+import generateId from '../utils/generateId';
 export let content = '';
 export let style = 'dark';
 export let tipColor = '';
 export let tipClass = 'py-2 px-3 text-sm font-medium rounded-lg shadow-sm tooltip';
+export let triggeredBy;
 const tipStyleClasses = {
     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',
@@ -12,9 +14,17 @@ const tipStyleClasses = {
 };
 let toolTipClass;
 $: toolTipClass = classNames(tipClass, tipStyleClasses[style], $$props.class);
+let id = generateId();
 </script>
 
-<Popper activeContent={false} {...$$restProps} class={toolTipClass} on:show>
-	<slot slot="trigger" />
+<div {id}>
+	<slot />
+</div>
+<Popper
+	activeContent={false}
+	triggeredBy={triggeredBy ?? '#' + id}
+	{...$$restProps}
+	class={toolTipClass}
+	on:show>
 	<slot name="content">{content}</slot>
 </Popper>

package/tooltips/Tooltip.svelte.d.ts

@@ -6,6 +6,7 @@ declare const __propDef: {
         style?: 'dark' | 'light' | 'auto' | 'custom';
         tipColor?: string;
         tipClass?: string;
+        triggeredBy: string;
     };
     events: {
         show: CustomEvent<any>;
@@ -13,9 +14,7 @@ declare const __propDef: {
         [evt: string]: CustomEvent<any>;
     };
     slots: {
-        default: {
-            slot: string;
-        };
+        default: {};
         content: {};
     };
 };

package/utils/Popper.svelte

@@ -1,84 +1,112 @@
-<script>import { createEventDispatcher } from 'svelte';
+<script>import { createEventDispatcher, 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';
+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', 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) {
+        popper.state.elements.reference = ev.target;
+        popper.setOptions({ placement });
+        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;
 };
+// 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) => {
+        // trigger must be focusable
+        if (element.tabIndex < 0)
+            element.tabIndex = 0;
+        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, cond] 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,13 +3,13 @@ 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>;
@@ -17,7 +17,6 @@ declare const __propDef: {
         [evt: string]: CustomEvent<any>;
     };
     slots: {
-        trigger: {};
         default: {};
     };
 };