flowbite-svelte 0.47.2 → 1.0.0-next.1

package/dist/tooltip/Tooltip.svelte

@@ -1,30 +1,178 @@
-<script>import Popper from "../utils/Popper.svelte";
-import { twMerge } from "tailwind-merge";
-export let type = "dark";
-export let defaultClass = "py-2 px-3 text-sm font-medium";
-const types = {
-  dark: "bg-gray-900 text-white dark:bg-gray-700",
-  light: "border-gray-200 bg-white text-gray-900",
-  auto: " bg-white text-gray-900 dark:bg-gray-700 dark:text-white border-gray-200 dark:border-gray-700",
-  custom: ""
-};
-let toolTipClass;
-$: {
-  if ($$restProps.color) type = "custom";
-  else $$restProps.color = "none";
-  if (["light", "auto"].includes(type)) $$restProps.border = true;
-  toolTipClass = twMerge("tooltip", defaultClass, types[type], $$props.class);
-}
+<script lang="ts">
+  import { computePosition, flip, shift, arrow, offset as floatingOffset, type Placement, type Strategy } from "@floating-ui/dom";
+  import { onDestroy } from "svelte";
+  import { tooltip } from "./theme";
+  import type { TooltipProps } from ".";
+
+  let { children, color = "default", showOn = "hover", arrow: showArrow = true, offset = 8, triggeredBy, reference, position = "top" as Placement, strategy = "absolute", class: className, visible = false, ...restProps }: TooltipProps = $props();
+
+  let isVisible = $state(visible);
+  let tooltipElement: HTMLElement | null = $state(null);
+  let triggerElement: HTMLElement | null = null;
+  let referenceElement: HTMLElement | null = null;
+  let arrowElement: HTMLElement | null = $state(null);
+
+  let { base, arrowBase } = $derived(tooltip({ color, arrow: showArrow, position }));
+
+  const staticSideMap = {
+    top: "bottom",
+    right: "left",
+    bottom: "top",
+    left: "right"
+  } as const;
+
+  type StaticSide = (typeof staticSideMap)[keyof typeof staticSideMap];
+
+  const getStaticSide = (placement: string): StaticSide => {
+    const basePlacement = placement.split("-")[0] as keyof typeof staticSideMap;
+    return staticSideMap[basePlacement];
+  };
+
+  const updatePosition = async () => {
+    // Get the reference element (either from reference prop or triggeredBy)
+    const targetElement = reference ? referenceElement : triggerElement;
+
+    if (!tooltipElement || !targetElement) return;
+
+    const middleware = [flip(), shift({ padding: 8 }), floatingOffset(offset)];
+
+    if (showArrow && arrowElement) {
+      middleware.push(arrow({ element: arrowElement }));
+    }
+
+    const { x, y, placement, middlewareData } = await computePosition(targetElement, tooltipElement, {
+      placement: position as Placement,
+      strategy: strategy as Strategy,
+      middleware
+    });
+
+    Object.assign(tooltipElement.style, {
+      left: `${x}px`,
+      top: `${y}px`,
+      position: strategy
+    });
+
+    if (showArrow && arrowElement && middlewareData.arrow) {
+      const { x: arrowX, y: arrowY } = middlewareData.arrow;
+      const staticSide = getStaticSide(placement);
+
+      const styles: Partial<CSSStyleDeclaration> = {
+        left: arrowX != null ? `${arrowX}px` : "",
+        top: arrowY != null ? `${arrowY}px` : "",
+        right: "",
+        bottom: ""
+      };
+
+      styles[staticSide] = "-4px";
+      Object.assign(arrowElement.style, styles);
+    }
+  };
+
+  const showTooltip = () => {
+    if (!triggeredBy) return;
+    isVisible = true;
+    setTimeout(updatePosition, 0);
+  };
+
+  const hideTooltip = () => {
+    if (!triggeredBy) return;
+    isVisible = false;
+  };
+
+  const toggleTooltip = () => {
+    if (!triggeredBy) return;
+    isVisible = !isVisible;
+    if (isVisible) {
+      setTimeout(updatePosition, 0);
+    }
+  };
+
+  const handleClickOutside = (event: MouseEvent) => {
+    if (showOn === "click" && isVisible && tooltipElement && triggerElement && !tooltipElement.contains(event.target as Node) && !triggerElement.contains(event.target as Node)) {
+      hideTooltip();
+    }
+  };
+
+  $effect(() => {
+    isVisible = visible;
+  });
+
+  $effect(() => {
+    // Set up reference element if provided
+    if (reference) {
+      referenceElement = document.querySelector(reference);
+    }
+
+    // Set up trigger element and events if provided
+    if (triggeredBy) {
+      triggerElement = document.querySelector(triggeredBy);
+
+      if (triggerElement) {
+        if (showOn === "hover") {
+          triggerElement.addEventListener("mouseenter", showTooltip);
+          triggerElement.addEventListener("mouseleave", hideTooltip);
+        } else if (showOn === "click") {
+          triggerElement.addEventListener("click", toggleTooltip);
+          document.addEventListener("click", handleClickOutside);
+        }
+      }
+    }
+
+    const cleanup = () => {
+      if (triggerElement) {
+        if (showOn === "hover") {
+          triggerElement.removeEventListener("mouseenter", showTooltip);
+          triggerElement.removeEventListener("mouseleave", hideTooltip);
+        } else if (showOn === "click") {
+          triggerElement.removeEventListener("click", toggleTooltip);
+          document.removeEventListener("click", handleClickOutside);
+        }
+      }
+    };
+
+    onDestroy(cleanup);
+    return cleanup;
+  });
+
+  $effect(() => {
+    if (isVisible) {
+      const handlePositionUpdate = () => {
+        if (isVisible) updatePosition();
+      };
+
+      window.addEventListener("resize", handlePositionUpdate);
+      window.addEventListener("scroll", handlePositionUpdate, true);
+
+      return () => {
+        window.removeEventListener("resize", handlePositionUpdate);
+        window.removeEventListener("scroll", handlePositionUpdate, true);
+      };
+    }
+  });
 </script>
 
-<Popper rounded shadow {...$$restProps} class={toolTipClass} on:show>
-  <slot />
-</Popper>
+{#if isVisible}
+  <div role="tooltip" bind:this={tooltipElement} {...restProps} class={`${base({ className })} ${isVisible ? "visible opacity-100" : "invisible opacity-0"} transition-opacity duration-200`}>
+    {@render children()}
+    {#if showArrow}
+      <div bind:this={arrowElement} class={arrowBase({ arrow: showArrow, position })}></div>
+    {/if}
+  </div>
+{/if}
 
 <!--
 @component
-[Go to docs](https://flowbite-svelte.com/)
+[Go to docs](https://preview.flowbite-svelte.com/)
 ## Props
-@prop export let type: 'dark' | 'light' | 'auto' | 'custom' = 'dark';
-@prop export let defaultClass: string = 'py-2 px-3 text-sm font-medium';
+@props: children: any;
+@props:color: any = "default";
+@props:showOn: any = "hover";
+@props:arrow: any = true;
+@props:offset: any = 8;
+@props:triggeredBy: any;
+@props:reference: any;
+@props:position: any = "top" as Placement;
+@props:strategy: any = "absolute";
+@props:class: string;
+@props:visible: any = false;
 -->

package/dist/tooltip/Tooltip.svelte.d.ts

@@ -1,52 +1,19 @@
-import { SvelteComponentTyped } from "svelte";
-declare const __propDef: {
-    props: import("svelte/elements").HTMLAnchorAttributes & {
-        tag?: string;
-        color?: import("../utils/Frame.svelte").FrameColor;
-        rounded?: boolean;
-        border?: boolean;
-        shadow?: boolean;
-        node?: HTMLElement | undefined;
-        use?: import("svelte/action").Action<HTMLElement, any>;
-        options?: object;
-        class?: string;
-        role?: string;
-        open?: boolean;
-        transition?: (node: HTMLElement, params: any) => import("svelte/transition").TransitionConfig;
-        params?: any;
-    } & {
-        activeContent?: boolean;
-        arrow?: boolean;
-        offset?: number;
-        placement?: import("@floating-ui/dom").Placement;
-        trigger?: "hover" | "click" | "focus";
-        triggeredBy?: string;
-        reference?: string;
-        strategy?: "absolute" | "fixed";
-        open?: boolean;
-        yOnly?: boolean;
-    } & {
-        type?: "dark" | "light" | "auto" | "custom";
-        defaultClass?: string;
-    };
-    events: {
-        show: CustomEvent<any>;
-    } & {
-        [evt: string]: CustomEvent<any>;
-    };
-    slots: {
-        default: {};
-    };
-};
-export type TooltipProps = typeof __propDef.props;
-export type TooltipEvents = typeof __propDef.events;
-export type TooltipSlots = typeof __propDef.slots;
+import type { TooltipProps } from ".";
 /**
- * [Go to docs](https://flowbite-svelte.com/)
+ * [Go to docs](https://preview.flowbite-svelte.com/)
  * ## Props
- * @prop export let type: 'dark' | 'light' | 'auto' | 'custom' = 'dark';
- * @prop export let defaultClass: string = 'py-2 px-3 text-sm font-medium';
+ * @props: children: any;
+ * @props:color: any = "default";
+ * @props:showOn: any = "hover";
+ * @props:arrow: any = true;
+ * @props:offset: any = 8;
+ * @props:triggeredBy: any;
+ * @props:reference: any;
+ * @props:position: any = "top" as Placement;
+ * @props:strategy: any = "absolute";
+ * @props:class: string;
+ * @props:visible: any = false;
  */
-export default class Tooltip extends SvelteComponentTyped<TooltipProps, TooltipEvents, TooltipSlots> {
-}
-export {};
+declare const Tooltip: import("svelte").Component<TooltipProps, {}, "">;
+type Tooltip = ReturnType<typeof Tooltip>;
+export default Tooltip;

package/dist/tooltip/index.d.ts

@@ -0,0 +1,4 @@
+import type { TooltipProps } from "./type";
+import Tooltip from "./Tooltip.svelte";
+import { tooltip } from "./theme";
+export { Tooltip, tooltip, type TooltipProps };

package/dist/tooltip/index.js

@@ -0,0 +1,3 @@
+import Tooltip from "./Tooltip.svelte";
+import { tooltip } from "./theme";
+export { Tooltip, tooltip };