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

package/dist/components/MotionPath.svelte.d.ts

@@ -1,28 +1,47 @@
-import { SvelteComponentTyped } from "svelte";
-declare const __propDef: {
-    props: {
-        /** Id of path to move object along */ pathId?: string;
-        /** Id of object to move along path */ objectId?: string;
-        /** Duration of the animation */ duration: string;
-        /** Number of times the animation will occur */ repeatCount?: number | "indefinite" | undefined;
-        /** Final state of the animation.  Freeze (last frame) or remove (first frame)
-           * https://developer.mozilla.org/en-US/docs/Web/SVG/Attribute/fill#animate
-           * */ fill?: "freeze" | "remove";
-        /** Rotation applied to the element animated along a path, usually to make it pointing in the direction of the animation */ rotate?: number | "auto" | "auto-reverse" | undefined;
-    };
-    events: {
-        [evt: string]: CustomEvent<any>;
-    };
-    slots: {
-        default: {
-            pathId: string;
-            objectId: string;
-        };
-    };
+import type { Snippet } from 'svelte';
+export type MotionPathPropsWithoutHTML = {
+    /**
+     * Id of path to move object along
+     */
+    pathId?: string;
+    /**
+     * Id of object to move along path
+     */
+    objectId?: string;
+    /**
+     * Duration of the animation
+     */
+    duration: string;
+    /**
+     * Number of times the animation will occur
+     */
+    repeatCount?: number | 'indefinite';
+    /**
+     * Final state of the animation.  Freeze (last frame) or remove (first frame)
+     * https://developer.mozilla.org/en-US/docs/Web/SVG/Attribute/fill#animate
+     *
+     * @default 'freeze'
+     */
+    fill?: 'freeze' | 'remove';
+    /**
+     * Rotation applied to the element animated along a path, usually to make it pointing
+     * in the direction of the animation
+     */
+    rotate?: number | 'auto' | 'auto-reverse';
+    /**
+     * A bindable reference to the underlying `<animateMotion>` element.
+     *
+     * @bindable
+     */
+    ref?: SVGAnimateMotionElement;
+    children?: Snippet<[{
+        pathId: string;
+        objectId: string;
+    }]>;
 };
-export type MotionPathProps = typeof __propDef.props;
-export type MotionPathEvents = typeof __propDef.events;
-export type MotionPathSlots = typeof __propDef.slots;
-export default class MotionPath extends SvelteComponentTyped<MotionPathProps, MotionPathEvents, MotionPathSlots> {
-}
-export {};
+export type MotionPathProps = MotionPathPropsWithoutHTML & Without<Omit<SVGAttributes<SVGAnimateMotionElement>, 'dir' | 'href'>, MotionPathPropsWithoutHTML>;
+import type { Without } from '../utils/types.js';
+import type { SVGAttributes } from 'svelte/elements';
+declare const MotionPath: import("svelte").Component<MotionPathPropsWithoutHTML, {}, "ref">;
+type MotionPath = ReturnType<typeof MotionPath>;
+export default MotionPath;

package/dist/components/Pack.svelte

@@ -1,27 +1,63 @@
-<script lang="ts">
-  import { pack as d3Pack } from 'd3-hierarchy';
-  import { chartContext } from './ChartContext.svelte';
+<script lang="ts" module>
+  import { pack as d3Pack, type HierarchyCircularNode, type HierarchyNode } from 'd3-hierarchy';
+  import type { Snippet } from 'svelte';
 
-  const { data, width, height } = chartContext();
+  export type PackProps<T> = {
+    /**
+     * The size of the pack layout.
+     */
+    size?: [number, number];
 
-  export let size: [number, number] | undefined = undefined;
+    /**
+     * The padding between nodes in the pack layout.
+     *
+     * @see https://github.com/d3/d3-hierarchy#pack_padding
+     */
+    padding?: number;
 
-  /**
-   * see: https://github.com/d3/d3-hierarchy#pack_padding
-   */
-  export let padding: number | undefined = undefined;
+    /**
+     * The hierarchy data to be packed.
+     */
+    hierarchy: HierarchyNode<T>;
 
-  let pack: ReturnType<typeof d3Pack>;
-  $: {
-    pack = d3Pack().size(size ?? [$width, $height]);
+    /**
+     * A bindable reference to the computed packed nodes.
+     *
+     * @bindable
+     */
+    nodes?: HierarchyCircularNode<T>[];
 
+    children?: Snippet<[{ nodes: HierarchyCircularNode<T>[] }]>;
+  };
+</script>
+
+<script lang="ts" generics="T">
+  import { getChartContext } from './Chart.svelte';
+
+  const ctx = getChartContext();
+
+  let {
+    size,
+    padding,
+    children,
+    hierarchy: hierarchyProp,
+    nodes = $bindable(),
+  }: PackProps<T> = $props();
+
+  const packedData = $derived.by(() => {
+    const h = hierarchyProp.copy();
+    const _pack = d3Pack<T>().size(size ?? [ctx.width, ctx.height]);
     if (padding) {
-      pack.padding(padding);
+      _pack.padding(padding);
     }
-  }
+    return _pack(h).descendants();
+  });
 
-  // @ts-expect-error
-  $: packData = pack($data);
+  $effect.pre(() => {
+    nodes = packedData;
+  });
 </script>
 
-<slot nodes={packData.descendants()} />
+{@render children?.({
+  nodes: packedData,
+})}

package/dist/components/Pack.svelte.d.ts

@@ -1,23 +1,44 @@
-import { SvelteComponentTyped } from "svelte";
-declare const __propDef: {
-    props: {
-        size?: [number, number] | undefined;
-        /**
-           * see: https://github.com/d3/d3-hierarchy#pack_padding
-           */ padding?: number | undefined;
-    };
-    events: {
-        [evt: string]: CustomEvent<any>;
-    };
-    slots: {
-        default: {
-            nodes: import("d3-hierarchy").HierarchyCircularNode<unknown>[];
-        };
-    };
+import { type HierarchyCircularNode, type HierarchyNode } from 'd3-hierarchy';
+import type { Snippet } from 'svelte';
+export type PackProps<T> = {
+    /**
+     * The size of the pack layout.
+     */
+    size?: [number, number];
+    /**
+     * The padding between nodes in the pack layout.
+     *
+     * @see https://github.com/d3/d3-hierarchy#pack_padding
+     */
+    padding?: number;
+    /**
+     * The hierarchy data to be packed.
+     */
+    hierarchy: HierarchyNode<T>;
+    /**
+     * A bindable reference to the computed packed nodes.
+     *
+     * @bindable
+     */
+    nodes?: HierarchyCircularNode<T>[];
+    children?: Snippet<[{
+        nodes: HierarchyCircularNode<T>[];
+    }]>;
 };
-export type PackProps = typeof __propDef.props;
-export type PackEvents = typeof __propDef.events;
-export type PackSlots = typeof __propDef.slots;
-export default class Pack extends SvelteComponentTyped<PackProps, PackEvents, PackSlots> {
+declare class __sveltets_Render<T> {
+    props(): PackProps<T>;
+    events(): {};
+    slots(): {};
+    bindings(): "nodes";
+    exports(): {};
 }
-export {};
+interface $$IsomorphicComponent {
+    new <T>(options: import('svelte').ComponentConstructorOptions<ReturnType<__sveltets_Render<T>['props']>>): import('svelte').SvelteComponent<ReturnType<__sveltets_Render<T>['props']>, ReturnType<__sveltets_Render<T>['events']>, ReturnType<__sveltets_Render<T>['slots']>> & {
+        $$bindings?: ReturnType<__sveltets_Render<T>['bindings']>;
+    } & ReturnType<__sveltets_Render<T>['exports']>;
+    <T>(internal: unknown, props: ReturnType<__sveltets_Render<T>['props']> & {}): ReturnType<__sveltets_Render<T>['exports']>;
+    z_$$bindings?: ReturnType<__sveltets_Render<any>['bindings']>;
+}
+declare const Pack: $$IsomorphicComponent;
+type Pack<T> = InstanceType<typeof Pack<T>>;
+export default Pack;

package/dist/components/Partition.svelte

@@ -1,42 +1,84 @@
-<script lang="ts">
+<script lang="ts" module>
   import {
     partition as d3Partition,
     type HierarchyNode,
     type HierarchyRectangularNode,
   } from 'd3-hierarchy';
-  import { chartContext } from './ChartContext.svelte';
+  import type { Snippet } from 'svelte';
 
-  const { data, width, height } = chartContext();
+  export type PartitionProps<T> = {
+    /**
+     * The orientation of the partition layout.
+     *
+     * @default 'horizontal'
+     */
+    orientation?: 'vertical' | 'horizontal';
 
-  export let orientation: 'vertical' | 'horizontal' = 'horizontal';
+    /**
+     * The size of the partition layout.
+     */
+    size?: [number, number];
 
-  export let size: [number, number] | undefined = undefined;
+    /**
+     * The padding between nodes in the partition layout.
+     * see: https://github.com/d3/d3-hierarchy#tree_nodeSize
+     */
+    padding?: number;
 
-  /**
-   * see: https://github.com/d3/d3-hierarchy#tree_nodeSize
-   */
-  export let padding: number | undefined = undefined;
+    /**
+     * The round property of the partition layout.
+     * see: https://github.com/d3/d3-hierarchy#tree_nodeSize
+     */
+    round?: boolean;
 
-  /**
-   * see: https://github.com/d3/d3-hierarchy#tree_nodeSize
-   */
-  export let round: boolean | undefined = undefined;
+    hierarchy: HierarchyNode<T>;
 
-  let partition: ReturnType<typeof d3Partition>;
-  $: {
-    partition = d3Partition().size(
-      size ?? (orientation === 'horizontal' ? [$height, $width] : [$width, $height])
+    /**
+     * A bindable reference to the descendants of the partition layout.
+     *
+     * @bindable
+     */
+    nodes?: HierarchyRectangularNode<T>[];
+
+    children?: Snippet<[{ nodes: HierarchyRectangularNode<T>[] }]>;
+  };
+</script>
+
+<script lang="ts" generics="T">
+  import { getChartContext } from './Chart.svelte';
+
+  let {
+    size,
+    padding,
+    round,
+    orientation = 'horizontal',
+    hierarchy,
+    children,
+    nodes = $bindable(),
+  }: PartitionProps<T> = $props();
+
+  const ctx = getChartContext();
+
+  const partitionData = $derived.by(() => {
+    const h = hierarchy.copy();
+    const _partition = d3Partition<T>().size(
+      size ?? (orientation === 'horizontal' ? [ctx.height, ctx.width] : [ctx.width, ctx.height])
     );
 
     if (padding) {
-      partition.padding(padding);
+      _partition.padding(padding);
     }
+
     if (round) {
-      partition.round(round);
+      _partition.round(round);
     }
-  }
 
-  $: partitionData = partition($data as HierarchyNode<any>) as HierarchyRectangularNode<any>;
+    return _partition(h).descendants();
+  });
+
+  $effect.pre(() => {
+    nodes = partitionData;
+  });
 </script>
 
-<slot nodes={partitionData.descendants()} />
+{@render children?.({ nodes: partitionData })}

package/dist/components/Partition.svelte.d.ts

@@ -1,28 +1,51 @@
-import { SvelteComponentTyped } from "svelte";
-import { type HierarchyRectangularNode } from 'd3-hierarchy';
-declare const __propDef: {
-    props: {
-        orientation?: "vertical" | "horizontal";
-        size?: [number, number] | undefined;
-        /**
-           * see: https://github.com/d3/d3-hierarchy#tree_nodeSize
-           */ padding?: number | undefined;
-        /**
-           * see: https://github.com/d3/d3-hierarchy#tree_nodeSize
-           */ round?: boolean | undefined;
-    };
-    events: {
-        [evt: string]: CustomEvent<any>;
-    };
-    slots: {
-        default: {
-            nodes: HierarchyRectangularNode<any>[];
-        };
-    };
+import { type HierarchyNode, type HierarchyRectangularNode } from 'd3-hierarchy';
+import type { Snippet } from 'svelte';
+export type PartitionProps<T> = {
+    /**
+     * The orientation of the partition layout.
+     *
+     * @default 'horizontal'
+     */
+    orientation?: 'vertical' | 'horizontal';
+    /**
+     * The size of the partition layout.
+     */
+    size?: [number, number];
+    /**
+     * The padding between nodes in the partition layout.
+     * see: https://github.com/d3/d3-hierarchy#tree_nodeSize
+     */
+    padding?: number;
+    /**
+     * The round property of the partition layout.
+     * see: https://github.com/d3/d3-hierarchy#tree_nodeSize
+     */
+    round?: boolean;
+    hierarchy: HierarchyNode<T>;
+    /**
+     * A bindable reference to the descendants of the partition layout.
+     *
+     * @bindable
+     */
+    nodes?: HierarchyRectangularNode<T>[];
+    children?: Snippet<[{
+        nodes: HierarchyRectangularNode<T>[];
+    }]>;
 };
-export type PartitionProps = typeof __propDef.props;
-export type PartitionEvents = typeof __propDef.events;
-export type PartitionSlots = typeof __propDef.slots;
-export default class Partition extends SvelteComponentTyped<PartitionProps, PartitionEvents, PartitionSlots> {
+declare class __sveltets_Render<T> {
+    props(): PartitionProps<T>;
+    events(): {};
+    slots(): {};
+    bindings(): "nodes";
+    exports(): {};
 }
-export {};
+interface $$IsomorphicComponent {
+    new <T>(options: import('svelte').ComponentConstructorOptions<ReturnType<__sveltets_Render<T>['props']>>): import('svelte').SvelteComponent<ReturnType<__sveltets_Render<T>['props']>, ReturnType<__sveltets_Render<T>['events']>, ReturnType<__sveltets_Render<T>['slots']>> & {
+        $$bindings?: ReturnType<__sveltets_Render<T>['bindings']>;
+    } & ReturnType<__sveltets_Render<T>['exports']>;
+    <T>(internal: unknown, props: ReturnType<__sveltets_Render<T>['props']> & {}): ReturnType<__sveltets_Render<T>['exports']>;
+    z_$$bindings?: ReturnType<__sveltets_Render<any>['bindings']>;
+}
+declare const Partition: $$IsomorphicComponent;
+type Partition<T> = InstanceType<typeof Partition<T>>;
+export default Partition;