From 39b677404558ae3b7eb34e818d7ca308f62f9cb0 Mon Sep 17 00:00:00 2001 From: Fuwn Date: Mon, 28 Oct 2024 15:32:46 -0700 Subject: feat: update to svelte 5 --- src/lib/Tooltip/LinkedTooltip.svelte | 57 ++++++++++++++++++++++++------------ 1 file changed, 38 insertions(+), 19 deletions(-) (limited to 'src/lib/Tooltip') diff --git a/src/lib/Tooltip/LinkedTooltip.svelte b/src/lib/Tooltip/LinkedTooltip.svelte index 6e468cd6..f4546d4c 100644 --- a/src/lib/Tooltip/LinkedTooltip.svelte +++ b/src/lib/Tooltip/LinkedTooltip.svelte @@ -2,23 +2,42 @@ import tooltipPosition from '$stores/tooltipPosition'; import { fade } from 'svelte/transition'; - export let id: string | undefined = undefined; - export let pin: string | undefined = undefined; - export let content: string; - export let disable: boolean = false; - export let pinPosition: 'top' | 'bottom' | 'left' | 'right' = 'top'; - export let offset = 10; - export let tooltipTransitionTime = 200; - export let tooltipHideDelay = 10; - export let debounceDelay = 100; - export let tooltipOpacityTransitionTime = 200; - export let relative = false; - export let ignoreAnchorStyling = false; - - let tooltipDiv: HTMLDivElement | null = null; + interface Props { + id?: string | undefined; + pin?: string | undefined; + content: string; + disable?: boolean; + pinPosition?: 'top' | 'bottom' | 'left' | 'right'; + offset?: number; + tooltipTransitionTime?: number; + tooltipHideDelay?: number; + debounceDelay?: number; + tooltipOpacityTransitionTime?: number; + relative?: boolean; + ignoreAnchorStyling?: boolean; + children?: import('svelte').Snippet; + } + + let { + id = undefined, + pin = undefined, + content, + disable = false, + pinPosition = 'top', + offset = 10, + tooltipTransitionTime = 200, + tooltipHideDelay = 10, + debounceDelay = 100, + tooltipOpacityTransitionTime = 200, + relative = false, + ignoreAnchorStyling = false, + children + }: Props = $props(); + + let tooltipDiv: HTMLDivElement | null = $state(null); let hideTimeout: number | null = null; let debounceTimer: number | null = null; - let opacity = 0; + let opacity = $state(0); const createTooltip = () => { if (!tooltipDiv) { @@ -202,12 +221,12 @@ - + {@render children?.()} {#if tooltipDiv} -- cgit v1.2.3