flowbite-svelte 0.26.3 → 0.26.4

package/CHANGELOG.md

@@ -2,6 +2,13 @@
 
 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.4](https://github.com/themesberg/flowbite-svelte/compare/v0.26.3...v0.26.4) (2022-09-02)
+
+
+### Bug Fixes
+
+* programatic popper open merged ([86f9874](https://github.com/themesberg/flowbite-svelte/commit/86f9874e1c2390e3571b6df96acfa61af23fd865))
+
 ### [0.26.3](https://github.com/themesberg/flowbite-svelte/compare/v0.26.2...v0.26.3) (2022-09-01)
 
 

package/dropdowns/Dropdown.svelte

@@ -6,7 +6,6 @@ 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;
@@ -14,7 +13,6 @@ export let labelClass = 'flex items-center justify-between w-full py-2 pl-3 pr-4
 export let placement = 'bottom';
 export let open = false;
 export let triggeredBy = undefined;
-let id = generateId();
 const icons = {
     top: ChevronUp,
     right: ChevronRight,
@@ -30,7 +28,7 @@ $: popoverClass = classNames('outline-none', $$props.class);
 {#if label}
 	<slot name="trigger">
 		{#if inline}
-			<button {id} class={labelClass} class:flex-row-reverse={icon == ChevronLeft}>
+			<button class={labelClass} class:flex-row-reverse={icon == ChevronLeft}>
 				<slot name="label">{label}</slot>
 				{#if arrowIcon}
 					<svelte:component
@@ -39,7 +37,7 @@ $: popoverClass = classNames('outline-none', $$props.class);
 				{/if}
 			</button>
 		{:else}
-			<Button {id} {...$$restProps} class={icon == ChevronLeft && 'flex-row-reverse'}>
+			<Button {...$$restProps} class={icon == ChevronLeft && 'flex-row-reverse'}>
 				<slot name="label">{label}</slot>
 				{#if arrowIcon}
 					<svelte:component
@@ -51,14 +49,7 @@ $: popoverClass = classNames('outline-none', $$props.class);
 	</slot>
 {/if}
 
-<Popper
-	activeContent={true}
-	arrow={false}
-	{placement}
-	trigger="click"
-	on:show
-	bind:open
-	triggeredBy={triggeredBy ?? '#' + id}>
+<Popper activeContent={true} arrow={false} {placement} trigger="click" on:show bind:open {triggeredBy}>
 	<Frame class={popoverClass} rounded border shadow>
 		<slot name="content">
 			<ul class="py-1">

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "flowbite-svelte",
-  "version": "0.26.3",
+  "version": "0.26.4",
   "description": "Flowbite components for Svelte",
   "main": "index.js",
   "author": {

package/popover/Popover.svelte

@@ -1,21 +1,20 @@
 <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} {triggeredBy} {...$$restProps} class={popoverClass} on:show>
-	{#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">
-			<slot name="title">
-				<h3 class="font-semibold text-gray-900 dark:text-white">{title}</h3>
-			</slot>
-		</div>
-	{/if}
-	<div class="py-2 px-3">
-		<slot />
-	</div>
+<Popper activeContent={true} {...$$restProps} class={popoverClass} on:show>
+  {#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">
+      <slot name="title">
+        <h3 class="font-semibold text-gray-900 dark:text-white">{title}</h3>
+      </slot>
+    </div>
+  {/if}
+  <div class="py-2 px-3">
+    <slot />
+  </div>
 </Popper>

package/popover/Popover.svelte.d.ts

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

package/utils/Popper.svelte

@@ -9,21 +9,22 @@ export let arrow = true;
 export let offset = 8;
 export let placement = 'top';
 export let trigger = 'hover';
-export let triggeredBy;
+export let triggeredBy = undefined;
+export let open = false;
 const dispatch = createEventDispatcher();
-let open = false;
 let clickable;
 $: clickable = trigger === 'click';
 $: dispatch('show', triggerEl, open);
 let triggerEl;
+let contentEl;
 let triggerEls = [];
 let popper;
 let _blocked = false; // managment of the race condition between focusin and click events
 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) {
+        console.error('trigger undefined');
+    if (triggerEls.includes(ev.target) && triggerEl !== ev.target) {
         triggerEl = ev.target;
         block();
     }
@@ -32,7 +33,7 @@ const showHandler = (ev) => {
     open = clickable && ev.type === 'click' && !_blocked ? !open : true;
 };
 // reactivity
-$: popper && (popper.state.elements.reference = triggerEl) && popper.setOptions({ placement });
+$: popper && 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);
@@ -50,8 +51,8 @@ const hideHandler = (ev) => {
     else
         open = false;
 };
-function init(node, _open) {
-    popper = createPopper(triggerEl, node, {
+function init(node, _triggerEl) {
+    popper = createPopper(_triggerEl, node, {
         placement,
         modifiers: [
             { name: 'offset', options: { offset: [0, offset] } },
@@ -59,6 +60,10 @@ function init(node, _open) {
         ]
     });
     return {
+        update(_triggerEl) {
+            popper.state.elements.reference = _triggerEl;
+            popper.update();
+        },
         destroy() {
             popper.destroy();
         }
@@ -73,8 +78,12 @@ onMount(() => {
         ['mouseleave', hideHandler, !clickable]
     ];
     triggerEls = [...document.querySelectorAll(triggeredBy)];
-    if (!triggerEls.length)
-        console.error('no triggers given');
+    if (!triggerEls.length) {
+        if (contentEl.previousElementSibling)
+            triggerEls.push(contentEl.previousElementSibling);
+        else
+            console.error('No triggers found.');
+    }
     triggerEls.forEach((element) => {
         if (element.tabIndex < 0)
             element.tabIndex = 0; // trigger must be focusable
@@ -82,8 +91,8 @@ onMount(() => {
             if (cond)
                 element.addEventListener(name, handler);
     });
+    triggerEl = triggerEls[0];
     return () => {
-        triggerEl = undefined;
         triggerEls.forEach((element) => {
             if (element) {
                 for (const [name, handler] of events)
@@ -94,9 +103,13 @@ onMount(() => {
 });
 </script>
 
-{#if open}
+{#if !triggerEl}
+	<div id="empty" bind:this={contentEl} />
+{/if}
+
+{#if open && triggerEl}
 	<div
-		use:init={open}
+		use:init={triggerEl}
 		transition:fade={{ duration: animation ? animation : 0 }}
 		role="tooltip"
 		tabIndex={activeContent ? -1 : undefined}

package/utils/Popper.svelte.d.ts

@@ -9,7 +9,8 @@ declare const __propDef: {
         offset?: number;
         placement?: Placement;
         trigger?: 'hover' | 'click';
-        triggeredBy: string;
+        triggeredBy?: string;
+        open?: boolean;
     };
     events: {
         [evt: string]: CustomEvent<any>;