layerchart 2.0.0-next.1 → 2.0.0-next.2

package/dist/components/tooltip/TooltipContext.svelte.d.ts

@@ -1,63 +1,94 @@
-import { SvelteComponentTyped } from "svelte";
-import type { Readable } from 'svelte/store';
-export declare const tooltipContextKey: unique symbol;
+import type { HTMLAttributes } from 'svelte/elements';
+import type { Without } from '../../utils/types.js';
 type TooltipMode = 'bisect-x' | 'bisect-y' | 'band' | 'bisect-band' | 'bounds' | 'voronoi' | 'quadtree' | 'manual';
-export type TooltipContextValue = {
+export type TooltipContextValue<T = any> = {
     x: number;
     y: number;
-    data: any;
-    show(e: PointerEvent, tooltipData?: any): void;
+    data: T | null;
+    payload: TooltipPayload[];
+    show(e: PointerEvent, tooltipData?: any, payload?: TooltipPayload): void;
     hide(e?: PointerEvent): void;
     mode: TooltipMode;
+    isHoveringTooltipArea: boolean;
+    isHoveringTooltipContent: boolean;
 };
-export type TooltipContext = Readable<TooltipContextValue>;
-export declare function tooltipContext(): TooltipContext;
-declare const __propDef: {
-    props: {
-        /**
-           * @type {'bisect-x' | 'bisect-y' | 'band' | 'bisect-band' | 'bounds' | 'voronoi' | 'quadtree' | 'manual'}
-           */ mode?: TooltipMode;
-        /**
-           * @type {'closest' | 'left' | 'right'}
-           */ findTooltipData?: "closest" | "left" | "right";
-        /** Similar to d3-selection's raise, re-insert the e.target as the last child of its parent, so to be the top-most element */ raiseTarget?: boolean;
-        /** Lock tooltip (keep open, do not update on mouse movement).  Allows for clicking on tooltip */ locked?: boolean;
-        /** quadtree search radius
-           * @type {number}
-           */ radius?: number;
-        /** Enable debug view (show hit targets, etc) */ debug?: boolean;
-        onclick?: (e: MouseEvent, { data }: {
-            data: any;
-        }) => any;
-        /** Exposed to allow binding in Chart */ tooltip?: import("svelte/store").Writable<{
-            x: number;
-            y: number;
-            data: any;
-            show: (e: PointerEvent, tooltipData?: any) => void;
-            hide: () => void;
-            mode: TooltipMode;
-        }>;
-        /** Delay in ms before hiding tooltip */ hideDelay?: number;
-    };
-    events: {
-        [evt: string]: CustomEvent<any>;
-    };
-    slots: {
-        default: {
-            tooltip: {
-                x: number;
-                y: number;
-                data: any;
-                show: (e: PointerEvent, tooltipData?: any) => void;
-                hide: () => void;
-                mode: TooltipMode;
-            };
-        };
-    };
+export declare function getTooltipContext<T = any>(): TooltipContextValue<T>;
+type TooltipContextPropsWithoutHTML<T = any> = {
+    /**
+     * The tooltip interaction mode
+     * @default 'manual'
+     */
+    mode?: TooltipMode;
+    /**
+     * Method to find tooltip data
+     * @default 'closest'
+     */
+    findTooltipData?: 'closest' | 'left' | 'right';
+    /**
+     * Similar to d3-selection's raise, re-insert the e.target as the last child of its parent, so
+     * to be the top-most element
+     * @default false
+     */
+    raiseTarget?: boolean;
+    /**
+     * Lock tooltip (keep open, do not update on mouse movement). Allows for clicking on tooltip
+     * @default false
+     */
+    locked?: boolean;
+    /**
+     * quadtree search radius
+     * @default Infinity
+     */
+    radius?: number;
+    /**
+     * Enable debug view (show hit targets, etc)
+     * @default false
+     */
+    debug?: boolean;
+    /**
+     * Click handler for the tooltip
+     * @default () => {}
+     */
+    onclick?: (e: MouseEvent, { data }: {
+        data: any;
+    }) => any;
+    /**
+     * Exposed to allow binding in Chart
+     * @default { x: 0, y: 0, data: null, show: showTooltip, hide: hideTooltip, mode }
+     */
+    tooltipContext?: TooltipContextValue<T>;
+    /**
+     * Delay in ms before hiding tooltip
+     * @default 0
+     */
+    hideDelay?: number;
+    /**
+     * A reference to the tooltip container element.
+     *
+     * @bindable
+     */
+    ref?: HTMLElement;
+    children?: Snippet<[{
+        tooltipContext: TooltipContextValue<T>;
+    }]>;
 };
-export type TooltipContextProps = typeof __propDef.props;
-export type TooltipContextEvents = typeof __propDef.events;
-export type TooltipContextSlots = typeof __propDef.slots;
-export default class TooltipContext extends SvelteComponentTyped<TooltipContextProps, TooltipContextEvents, TooltipContextSlots> {
+export type TooltipContextProps<T = any> = TooltipContextPropsWithoutHTML<T> & Without<HTMLAttributes<HTMLElement>, TooltipContextPropsWithoutHTML<T>>;
+import type { Snippet } from 'svelte';
+import { type TooltipPayload } from './tooltipMetaContext.js';
+declare class __sveltets_Render<TData = any> {
+    props(): TooltipContextProps<TData>;
+    events(): {};
+    slots(): {};
+    bindings(): "ref" | "tooltipContext";
+    exports(): {};
 }
-export {};
+interface $$IsomorphicComponent {
+    new <TData = any>(options: import('svelte').ComponentConstructorOptions<ReturnType<__sveltets_Render<TData>['props']>>): import('svelte').SvelteComponent<ReturnType<__sveltets_Render<TData>['props']>, ReturnType<__sveltets_Render<TData>['events']>, ReturnType<__sveltets_Render<TData>['slots']>> & {
+        $$bindings?: ReturnType<__sveltets_Render<TData>['bindings']>;
+    } & ReturnType<__sveltets_Render<TData>['exports']>;
+    <TData = any>(internal: unknown, props: ReturnType<__sveltets_Render<TData>['props']> & {}): ReturnType<__sveltets_Render<TData>['exports']>;
+    z_$$bindings?: ReturnType<__sveltets_Render<any>['bindings']>;
+}
+declare const TooltipContext: $$IsomorphicComponent;
+type TooltipContext<TData = any> = InstanceType<typeof TooltipContext<TData>>;
+export default TooltipContext;

package/dist/components/tooltip/TooltipHeader.svelte

@@ -1,30 +1,119 @@
+<script lang="ts" module>
+  import type { HTMLAttributes } from 'svelte/elements';
+  import type { Snippet } from 'svelte';
+  import type { Without } from '../../utils/types.js';
+
+  export type TooltipHeaderPropsWithoutHTML = {
+    /**
+     * The value to display in the tooltip header when the `children`
+     * snippet is not provided.
+     */
+    value?: any;
+
+    /**
+     * The format to use when displaying the value.
+     */
+    format?: FormatType;
+
+    /**
+     * The color to use for the color dot.
+     */
+    color?: string;
+
+    /**
+     * Classes to apply to the parts of the tooltip header.
+     */
+    classes?: {
+      root?: string;
+      color?: string;
+    };
+
+    /**
+     * Props to pass to the underlying elements rendered
+     */
+    props?: {
+      root?: HTMLAttributes<HTMLElement>;
+      color?: HTMLAttributes<HTMLElement>;
+    };
+
+    /**
+     * A reference to the tooltip header's outermost `<div>` tag.
+     */
+    ref?: HTMLElement;
+
+    /**
+     * A reference to the tooltip header's color `<div>` tag.
+     */
+    colorRef?: HTMLElement;
+
+    children?: Snippet;
+  };
+
+  export type TooltipHeaderProps = TooltipHeaderPropsWithoutHTML &
+    Without<HTMLAttributes<HTMLElement>, TooltipHeaderPropsWithoutHTML>;
+</script>
+
 <script lang="ts">
   import { format as formatUtil, type FormatType } from '@layerstack/utils';
   import { cls } from '@layerstack/tailwind';
+  import { layerClass } from '../../utils/attributes.js';
 
-  export let value: any = undefined;
-  export let format: FormatType | undefined = undefined;
-  export let color: string | undefined = undefined;
+  let {
+    ref: refProp = $bindable(),
+    colorRef: colorRefProp = $bindable(),
+    value,
+    format,
+    color,
+    classes = {
+      root: '',
+      color: '',
+    },
+    props = {
+      root: {},
+      color: {},
+    },
+    class: className,
+    children,
+    ...restProps
+  }: TooltipHeaderProps = $props();
 
-  export let classes: {
-    root?: string;
-    color?: string;
-  } = {};
+  let ref = $state<HTMLElement>();
+  let colorRef = $state<HTMLElement>();
+
+  $effect.pre(() => {
+    refProp = ref;
+  });
+  $effect.pre(() => {
+    colorRefProp = colorRef;
+  });
 </script>
 
 <div
   class={cls(
-    'TooltipHeader',
+    layerClass('tooltip-header'),
     'font-semibold whitespace-nowrap border-b mb-1 pb-1 flex items-center gap-2',
     classes.root,
-    $$props.class
+    props.root?.class,
+    className
   )}
+  {...restProps}
+  bind:this={ref}
 >
   {#if color}
     <div
-      class={cls('color', 'inline-block size-2 rounded-full bg-[var(--color)]', classes.color)}
+      bind:this={colorRef}
+      class={cls(
+        layerClass('tooltip-header-color'),
+        'color',
+        'inline-block size-2 rounded-full bg-[var(--color)]',
+        classes.color
+      )}
       style:--color={color}
     ></div>
   {/if}
-  <slot>{format ? formatUtil(value, format) : value}</slot>
+  {#if children}
+    {@render children?.()}
+  {:else}
+    {format ? formatUtil(value, format) : value}
+  {/if}
 </div>

package/dist/components/tooltip/TooltipHeader.svelte.d.ts

@@ -1,26 +1,46 @@
-import { SvelteComponentTyped } from "svelte";
-import { type FormatType } from '@layerstack/utils';
-declare const __propDef: {
-    props: {
-        [x: string]: any;
-        value?: any;
-        format?: FormatType | undefined;
-        color?: string | undefined | undefined;
-        classes?: {
-            root?: string;
-            color?: string;
-        } | undefined;
-    };
-    events: {
-        [evt: string]: CustomEvent<any>;
+import type { HTMLAttributes } from 'svelte/elements';
+import type { Snippet } from 'svelte';
+import type { Without } from '../../utils/types.js';
+export type TooltipHeaderPropsWithoutHTML = {
+    /**
+     * The value to display in the tooltip header when the `children`
+     * snippet is not provided.
+     */
+    value?: any;
+    /**
+     * The format to use when displaying the value.
+     */
+    format?: FormatType;
+    /**
+     * The color to use for the color dot.
+     */
+    color?: string;
+    /**
+     * Classes to apply to the parts of the tooltip header.
+     */
+    classes?: {
+        root?: string;
+        color?: string;
     };
-    slots: {
-        default: {};
+    /**
+     * Props to pass to the underlying elements rendered
+     */
+    props?: {
+        root?: HTMLAttributes<HTMLElement>;
+        color?: HTMLAttributes<HTMLElement>;
     };
+    /**
+     * A reference to the tooltip header's outermost `<div>` tag.
+     */
+    ref?: HTMLElement;
+    /**
+     * A reference to the tooltip header's color `<div>` tag.
+     */
+    colorRef?: HTMLElement;
+    children?: Snippet;
 };
-export type TooltipHeaderProps = typeof __propDef.props;
-export type TooltipHeaderEvents = typeof __propDef.events;
-export type TooltipHeaderSlots = typeof __propDef.slots;
-export default class TooltipHeader extends SvelteComponentTyped<TooltipHeaderProps, TooltipHeaderEvents, TooltipHeaderSlots> {
-}
-export {};
+export type TooltipHeaderProps = TooltipHeaderPropsWithoutHTML & Without<HTMLAttributes<HTMLElement>, TooltipHeaderPropsWithoutHTML>;
+import { type FormatType } from '@layerstack/utils';
+declare const TooltipHeader: import("svelte").Component<TooltipHeaderProps, {}, "ref" | "colorRef">;
+type TooltipHeader = ReturnType<typeof TooltipHeader>;
+export default TooltipHeader;

package/dist/components/tooltip/TooltipItem.svelte

@@ -1,45 +1,181 @@
+<script lang="ts" module>
+  import type { HTMLAttributes } from 'svelte/elements';
+  import type { Without } from '../../utils/types.js';
+
+  export type TooltipItemPropsWithoutHTML = {
+    /**
+     * The label to display in the tooltip item.
+     */
+    label?: string | number | null | undefined | Snippet;
+    /**
+     * Value to be formatted and displayed in absence of the
+     * default `children` snippet
+     */
+    value?: any;
+
+    /**
+     * Format to use when displaying the value.
+     */
+    format?: FormatType;
+
+    /**
+     * Alignment of the value.
+     *
+     * @default 'left'
+     */
+    valueAlign?: 'left' | 'right' | 'center';
+
+    /**
+     * Color to use for the color dot.
+     */
+    color?: string;
+
+    /**
+     * Classes to apply to the parts of the tooltip item.
+     *
+     * @default {}
+     */
+    classes?: {
+      root?: string;
+      label?: string;
+      value?: string;
+      color?: string;
+    };
+
+    props?: {
+      root?: HTMLAttributes<HTMLElement>;
+      label?: HTMLAttributes<HTMLElement>;
+      value?: HTMLAttributes<HTMLElement>;
+      color?: HTMLAttributes<HTMLElement>;
+    };
+
+    /**
+     * A reference to the tooltip item's outermost `<div>` tag.
+     */
+    ref?: HTMLElement;
+
+    /**
+     * A reference to the tooltip item's label `<div>` tag.
+     */
+    labelRef?: HTMLElement;
+
+    /**
+     * A reference to the tooltip item's value `<div>` tag.
+     */
+    valueRef?: HTMLElement;
+
+    /**
+     * A reference to the tooltip item's color `<div>` tag.
+     */
+    colorRef?: HTMLElement;
+  };
+
+  export type TooltipItemProps = TooltipItemPropsWithoutHTML &
+    Without<HTMLAttributes<HTMLElement>, TooltipItemPropsWithoutHTML>;
+</script>
+
 <script lang="ts">
   import { format as formatUtil, type FormatType } from '@layerstack/utils';
   import { cls } from '@layerstack/tailwind';
+  import type { Snippet } from 'svelte';
+  import { layerClass } from '../../utils/attributes.js';
 
-  export let label: any;
-  /** Value to be formatted and displayed.  Can also be passed as default slot */
-  export let value: any = undefined;
-  export let format: FormatType | undefined = undefined;
-  export let valueAlign: 'left' | 'right' | 'center' = 'left';
-  export let color: string | undefined = undefined;
-
-  export let onclick: ((e: MouseEvent) => void) | undefined = undefined;
-  export let onpointerenter: ((e: PointerEvent) => void) | undefined = undefined;
-  export let onpointerleave: ((e: PointerEvent) => void) | undefined = undefined;
-
-  export let classes: {
-    root?: string;
-    label?: string;
-    value?: string;
-    color?: string;
-  } = {};
+  let {
+    ref: refProp = $bindable(),
+    labelRef: labelRefProp = $bindable(),
+    valueRef: valueRefProp = $bindable(),
+    colorRef: colorRefProp = $bindable(),
+    label,
+    value,
+    format,
+    valueAlign = 'left',
+    color,
+    classes = {
+      root: '',
+      label: '',
+      value: '',
+      color: '',
+    },
+    props = {
+      root: {},
+      label: {},
+      value: {},
+      color: {},
+    },
+    class: className,
+    children,
+    ...restProps
+  }: TooltipItemProps = $props();
+
+  let ref = $state<HTMLElement>();
+  let labelRef = $state<HTMLElement>();
+  let valueRef = $state<HTMLElement>();
+  let colorRef = $state<HTMLElement>();
+
+  $effect.pre(() => {
+    refProp = ref;
+  });
+
+  $effect.pre(() => {
+    labelRefProp = labelRef;
+  });
+  $effect.pre(() => {
+    valueRefProp = valueRef;
+  });
+  $effect.pre(() => {
+    colorRefProp = colorRef;
+  });
 </script>
 
 <div
-  class={cls('contents', classes.root, $$props.class)}
-  on:click={onclick}
-  on:pointerenter={onpointerenter}
-  on:pointerleave={onpointerleave}
-  {...$$restProps}
+  {...props.root}
+  class={cls(
+    layerClass('tooltip-item-root'),
+    'contents',
+    classes.root,
+    className,
+    props.root?.class
+  )}
+  {...restProps}
+  bind:this={ref}
 >
-  <div class={cls('label', 'flex items-center gap-2 whitespace-nowrap', classes.label)}>
+  <div
+    {...props.label}
+    class={cls(
+      layerClass('tooltip-item-label'),
+      'label',
+      'flex items-center gap-2 whitespace-nowrap',
+      classes.label,
+      props.label?.class
+    )}
+    bind:this={labelRef}
+  >
     {#if color}
       <div
-        class={cls('color', 'inline-block size-2 rounded-full bg-[var(--color)]', classes.color)}
+        {...props.color}
+        class={cls(
+          layerClass('tooltip-item-color'),
+          'color',
+          'inline-block size-2 rounded-full bg-[var(--color)]',
+          classes.color,
+          props.color?.class
+        )}
         style:--color={color}
+        bind:this={colorRef}
       ></div>
     {/if}
-    <slot name="label">{label}</slot>
+    {#if typeof label === 'function'}
+      {@render label()}
+    {:else}
+      {label}
+    {/if}
   </div>
 
   <div
+    bind:this={valueRef}
+    {...props.value}
     class={cls(
+      layerClass('tooltip-item-value'),
       'value',
       'tabular-nums',
       {
@@ -47,9 +183,13 @@
         'text-center': valueAlign === 'center',
       },
       classes.value,
-      $$props.class
+      props.value?.class
     )}
   >
-    <slot>{format ? formatUtil(value, format) : value}</slot>
+    {#if children}
+      {@render children()}
+    {:else}
+      {format ? formatUtil(value, format) : value}
+    {/if}
   </div>
 </div>

package/dist/components/tooltip/TooltipItem.svelte.d.ts

@@ -1,34 +1,66 @@
-import { SvelteComponentTyped } from "svelte";
-import { type FormatType } from '@layerstack/utils';
-declare const __propDef: {
-    props: {
-        [x: string]: any;
-        label: any;
-        value?: any;
-        format?: FormatType | undefined;
-        valueAlign?: "left" | "right" | "center" | undefined;
-        color?: string | undefined | undefined;
-        onclick?: ((e: MouseEvent) => void) | undefined | undefined;
-        onpointerenter?: ((e: PointerEvent) => void) | undefined | undefined;
-        onpointerleave?: ((e: PointerEvent) => void) | undefined | undefined;
-        classes?: {
-            root?: string;
-            label?: string;
-            value?: string;
-            color?: string;
-        } | undefined;
-    };
-    events: {
-        [evt: string]: CustomEvent<any>;
+import type { HTMLAttributes } from 'svelte/elements';
+import type { Without } from '../../utils/types.js';
+export type TooltipItemPropsWithoutHTML = {
+    /**
+     * The label to display in the tooltip item.
+     */
+    label?: string | number | null | undefined | Snippet;
+    /**
+     * Value to be formatted and displayed in absence of the
+     * default `children` snippet
+     */
+    value?: any;
+    /**
+     * Format to use when displaying the value.
+     */
+    format?: FormatType;
+    /**
+     * Alignment of the value.
+     *
+     * @default 'left'
+     */
+    valueAlign?: 'left' | 'right' | 'center';
+    /**
+     * Color to use for the color dot.
+     */
+    color?: string;
+    /**
+     * Classes to apply to the parts of the tooltip item.
+     *
+     * @default {}
+     */
+    classes?: {
+        root?: string;
+        label?: string;
+        value?: string;
+        color?: string;
     };
-    slots: {
-        label: {};
-        default: {};
+    props?: {
+        root?: HTMLAttributes<HTMLElement>;
+        label?: HTMLAttributes<HTMLElement>;
+        value?: HTMLAttributes<HTMLElement>;
+        color?: HTMLAttributes<HTMLElement>;
     };
+    /**
+     * A reference to the tooltip item's outermost `<div>` tag.
+     */
+    ref?: HTMLElement;
+    /**
+     * A reference to the tooltip item's label `<div>` tag.
+     */
+    labelRef?: HTMLElement;
+    /**
+     * A reference to the tooltip item's value `<div>` tag.
+     */
+    valueRef?: HTMLElement;
+    /**
+     * A reference to the tooltip item's color `<div>` tag.
+     */
+    colorRef?: HTMLElement;
 };
-export type TooltipItemProps = typeof __propDef.props;
-export type TooltipItemEvents = typeof __propDef.events;
-export type TooltipItemSlots = typeof __propDef.slots;
-export default class TooltipItem extends SvelteComponentTyped<TooltipItemProps, TooltipItemEvents, TooltipItemSlots> {
-}
-export {};
+export type TooltipItemProps = TooltipItemPropsWithoutHTML & Without<HTMLAttributes<HTMLElement>, TooltipItemPropsWithoutHTML>;
+import { type FormatType } from '@layerstack/utils';
+import type { Snippet } from 'svelte';
+declare const TooltipItem: import("svelte").Component<TooltipItemProps, {}, "ref" | "colorRef" | "labelRef" | "valueRef">;
+type TooltipItem = ReturnType<typeof TooltipItem>;
+export default TooltipItem;