flowbite-svelte 0.25.21 → 0.25.24

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