flowbite-svelte 0.25.24 → 0.26.0

package/CHANGELOG.md

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

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "flowbite-svelte",
-  "version": "0.25.24",
+  "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/tooltips/Tooltip.svelte

@@ -1,30 +1,19 @@
 <script>import Popper from '../utils/Popper.svelte';
 import classNames from 'classnames';
-import generateId from '../utils/generateId';
-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';
 export let triggeredBy;
-const tipStyleClasses = {
+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);
-let id = generateId();
+$: toolTipClass = classNames(tipClass, colors[style], $$props.class);
 </script>
 
-<div {id}>
+<Popper activeContent={false} {triggeredBy} {...$$restProps} class={toolTipClass} on:show>
 	<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

@@ -2,9 +2,8 @@ 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;
     };
@@ -15,7 +14,6 @@ declare const __propDef: {
     };
     slots: {
         default: {};
-        content: {};
     };
 };
 export declare type TooltipProps = typeof __propDef.props;

package/utils/Popper.svelte

@@ -1,7 +1,8 @@
-<script>import { createEventDispatcher, onMount } from 'svelte';
+<script>import { onMount } from 'svelte';
 import { fade } from 'svelte/transition';
 import { createPopper } from '@popperjs/core';
 import classNames from 'classnames';
+import createEventDispatcher from './createEventDispatcher';
 export let activeContent = false;
 export let animation = 100;
 export let arrow = true;
@@ -13,7 +14,7 @@ const dispatch = createEventDispatcher();
 let open = false;
 let clickable;
 $: clickable = trigger === 'click';
-$: dispatch('show', open);
+$: dispatch('show', triggerEl, open);
 let triggerEl;
 let triggerEls = [];
 let popper;
@@ -23,8 +24,6 @@ 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();
     }
@@ -32,6 +31,8 @@ const showHandler = (ev) => {
         block();
     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);
@@ -75,9 +76,8 @@ onMount(() => {
     if (!triggerEls.length)
         console.error('no triggers given');
     triggerEls.forEach((element) => {
-        // trigger must be focusable
         if (element.tabIndex < 0)
-            element.tabIndex = 0;
+            element.tabIndex = 0; // trigger must be focusable
         for (const [name, handler, cond] of events)
             if (cond)
                 element.addEventListener(name, handler);
@@ -86,7 +86,7 @@ onMount(() => {
         triggerEl = undefined;
         triggerEls.forEach((element) => {
             if (element) {
-                for (const [name, handler, cond] of events)
+                for (const [name, handler] of events)
                     element.removeEventListener(name, handler);
             }
         });

package/utils/Popper.svelte.d.ts

@@ -12,8 +12,6 @@ declare const __propDef: {
         triggeredBy: string;
     };
     events: {
-        show: CustomEvent<any>;
-    } & {
         [evt: string]: CustomEvent<any>;
     };
     slots: {

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);
+			});
+		}
+	};
+}