layerchart 0.18.2 → 0.19.0

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

@@ -1,5 +1,6 @@
 import { SvelteComponentTyped } from "svelte";
 import type { tweened as tweenedStore } from 'svelte/motion';
+import { type Area } from 'd3-shape';
 import type { CurveFactory } from 'd3-shape';
 declare const __propDef: {
     props: {
@@ -12,7 +13,7 @@ declare const __propDef: {
         clipPath?: string | undefined;
         tweened?: boolean | Parameters<typeof tweenedStore>[1];
         curve?: CurveFactory | undefined;
-        defined?: ((d: any, index: number, data: any[]) => boolean) | undefined;
+        defined?: Parameters<Area<any>['defined']>[0] | undefined;
         color?: string | undefined;
         opacity?: number | undefined;
         line?: boolean | any;

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

@@ -1,9 +1,12 @@
 import { SvelteComponentTyped } from "svelte";
+import { type ComponentProps } from 'svelte';
+import type { tweened as tweenedStore } from 'svelte/motion';
 import type { CurveFactory } from 'd3-shape';
+import Path from './Path.svelte';
 declare const __propDef: {
     props: {
         curve?: CurveFactory | undefined;
-        defined?: ((d: any, index: number, data: any[]) => boolean) | undefined;
+        defined?: ComponentProps<Path>['defined'] | undefined;
         opacity?: number | undefined;
         line?: boolean | any;
         tweened?: boolean | Parameters<typeof tweenedStore>[1];

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

@@ -4,7 +4,7 @@ declare const __propDef: {
         [x: string]: any;
     };
     events: {
-        click: MouseEvent;
+        click: CustomEvent<any>;
     } & {
         [evt: string]: CustomEvent<any>;
     };

package/dist/components/CircleClipPath.svelte

@@ -11,11 +11,6 @@ export let tweened = undefined;
 </script>
 
 <ClipPath {id}>
-  <Circle {cx} {cy} {r} {spring} {tweened} />
+  <Circle slot="clip" {cx} {cy} {r} {spring} {tweened} />
+  <slot {id} />
 </ClipPath>
-
-{#if $$slots.default}
-  <g style="clip-path: url(#{id})" on:click on:mousemove on:mouseleave>
-    <slot {id} />
-  </g>
-{/if}

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

@@ -10,10 +10,6 @@ declare const __propDef: {
         tweened?: boolean | Parameters<typeof tweenedStore>[1];
     };
     events: {
-        click: MouseEvent;
-        mousemove: MouseEvent;
-        mouseleave: MouseEvent;
-    } & {
         [evt: string]: CustomEvent<any>;
     };
     slots: {

package/dist/components/ClipPath.svelte

@@ -1,10 +1,22 @@
 <script>import { uniqueId } from 'svelte-ux';
 /** Unique id for clipPath */
 export let id = uniqueId('clipPath-');
+/** Use existing path or shape (by id) for clipPath */
+export let useId = undefined;
 </script>
 
 <defs>
   <clipPath {id} {...$$restProps}>
-    <slot {id} />
+    <slot name="clip" {id} />
+
+    {#if useId}
+      <use href="#{useId}" />
+    {/if}
   </clipPath>
 </defs>
+
+{#if $$slots.default}
+  <g style="clip-path: url(#{id})" on:click on:mousemove on:mouseleave on:keydown>
+    <slot {id} {useId} />
+  </g>
+{/if}

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

@@ -3,13 +3,23 @@ declare const __propDef: {
     props: {
         [x: string]: any;
         id?: string | undefined;
+        useId?: string | undefined;
     };
     events: {
+        click: MouseEvent;
+        mousemove: MouseEvent;
+        mouseleave: MouseEvent;
+        keydown: KeyboardEvent;
+    } & {
         [evt: string]: CustomEvent<any>;
     };
     slots: {
+        clip: {
+            id: string;
+        };
         default: {
             id: string;
+            useId: string | undefined;
         };
     };
 };

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

@@ -1,6 +1,6 @@
 import { SvelteComponentTyped } from "svelte";
 import type { tweened as tweenedStore } from 'svelte/motion';
-import type { CurveFactory, CurveFactoryLineOnly } from 'd3-shape';
+import type { CurveFactory, CurveFactoryLineOnly, Line } from 'd3-shape';
 declare const __propDef: {
     props: {
         [x: string]: any;
@@ -10,7 +10,7 @@ declare const __propDef: {
         pathData?: string | undefined;
         tweened?: boolean | Parameters<typeof tweenedStore>[1];
         curve?: CurveFactory | CurveFactoryLineOnly | undefined;
-        defined?: ((d: any, index: number, data: any[]) => boolean) | undefined;
+        defined?: Parameters<Line<any>['defined']>[0] | undefined;
         color?: string | undefined;
         width?: undefined;
     };

package/dist/components/Point.svelte

@@ -0,0 +1,10 @@
+<script>import { getContext } from 'svelte';
+const context = getContext('LayerCake');
+const { xGet, yGet } = context;
+/** Single data point to translate to x/y */
+export let d;
+$: x = $xGet(d);
+$: y = $yGet(d);
+</script>
+
+<slot {x} {y} />

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

@@ -0,0 +1,21 @@
+import { SvelteComponentTyped } from "svelte";
+declare const __propDef: {
+    props: {
+        /** Single data point to translate to x/y */ d: any;
+    };
+    events: {
+        [evt: string]: CustomEvent<any>;
+    };
+    slots: {
+        default: {
+            x: any;
+            y: any;
+        };
+    };
+};
+export type PointProps = typeof __propDef.props;
+export type PointEvents = typeof __propDef.events;
+export type PointSlots = typeof __propDef.slots;
+export default class Point extends SvelteComponentTyped<PointProps, PointEvents, PointSlots> {
+}
+export {};

package/dist/components/RectClipPath.svelte

@@ -12,12 +12,6 @@ export let tweened = undefined;
 </script>
 
 <ClipPath {id}>
-  <Rect {x} {y} {width} {height} {spring} {tweened} />
+  <Rect slot="clip" {x} {y} {width} {height} {spring} {tweened} />
+  <slot {id} />
 </ClipPath>
-
-{#if $$slots.default}
-  <!-- svelte-ignore a11y-click-events-have-key-events -->
-  <g style="clip-path: url(#{id})" on:click on:mousemove on:mouseleave>
-    <slot {id} />
-  </g>
-{/if}

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

@@ -11,10 +11,6 @@ declare const __propDef: {
         tweened?: boolean | Parameters<typeof tweenedStore>[1];
     };
     events: {
-        click: MouseEvent;
-        mousemove: MouseEvent;
-        mouseleave: MouseEvent;
-    } & {
         [evt: string]: CustomEvent<any>;
     };
     slots: {

package/dist/components/TooltipItem.svelte

@@ -1,6 +1,7 @@
 <script>import { cls, format as formatUtil } from 'svelte-ux';
 export let label;
-export let value = undefined; // Can be pass as slot
+/** Value to be formatted and displayed.  Can also be passed as default slot */
+export let value = undefined;
 export let format = undefined;
 export let valueAlign = 'left';
 export let classes = {};

package/dist/components/index.d.ts

@@ -10,7 +10,6 @@ export { default as ChartClipPath } from './ChartClipPath.svelte';
 export { default as Circle } from './Circle.svelte';
 export { default as CircleClipPath } from './CircleClipPath.svelte';
 export { default as ClipPath } from './ClipPath.svelte';
-export { default as ClipPathUse } from './ClipPathUse.svelte';
 export { default as ColorRamp } from './ColorRamp.svelte';
 export { default as ConnectedPoints } from './ConnectedPoints.svelte';
 export { default as Frame } from './Frame.svelte';
@@ -32,6 +31,7 @@ export { default as Partition } from './Partition.svelte';
 export { default as Path } from './Path.svelte';
 export { default as Pattern } from './Pattern.svelte';
 export { default as Pie } from './Pie.svelte';
+export { default as Point } from './Point.svelte';
 export { default as Points } from './Points.svelte';
 export { default as Rect } from './Rect.svelte';
 export { default as RectClipPath } from './RectClipPath.svelte';

package/dist/components/index.js

@@ -10,7 +10,6 @@ export { default as ChartClipPath } from './ChartClipPath.svelte';
 export { default as Circle } from './Circle.svelte';
 export { default as CircleClipPath } from './CircleClipPath.svelte';
 export { default as ClipPath } from './ClipPath.svelte';
-export { default as ClipPathUse } from './ClipPathUse.svelte';
 export { default as ColorRamp } from './ColorRamp.svelte';
 export { default as ConnectedPoints } from './ConnectedPoints.svelte';
 export { default as Frame } from './Frame.svelte';
@@ -32,6 +31,7 @@ export { default as Partition } from './Partition.svelte';
 export { default as Path } from './Path.svelte';
 export { default as Pattern } from './Pattern.svelte';
 export { default as Pie } from './Pie.svelte';
+export { default as Point } from './Point.svelte';
 export { default as Points } from './Points.svelte';
 export { default as Rect } from './Rect.svelte';
 export { default as RectClipPath } from './RectClipPath.svelte';

package/package.json

@@ -3,7 +3,7 @@
   "author": "Sean Lynch <techniq35@gmail.com>",
   "license": "MIT",
   "repository": "techniq/layerchart",
-  "version": "0.18.2",
+  "version": "0.19.0",
   "scripts": {
     "dev": "vite dev",
     "build": "vite build",

package/dist/components/ClipPathUse.svelte

@@ -1,17 +0,0 @@
-<script>import { uniqueId } from 'svelte-ux';
-import ClipPath from './ClipPath.svelte';
-/** Id of path or shape */
-export let refId;
-/** Unique id for clipPath */
-export let clipPathId = uniqueId('clipPath-');
-</script>
-
-<ClipPath id={clipPathId}>
-  <use href="#{refId}" />
-</ClipPath>
-
-{#if $$slots.default}
-  <g style="clip-path: url(#{clipPathId})" on:click on:mousemove on:mouseleave on:keydown>
-    <slot {refId} {clipPathId} />
-  </g>
-{/if}

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

@@ -1,27 +0,0 @@
-import { SvelteComponentTyped } from "svelte";
-declare const __propDef: {
-    props: {
-        /** Id of path or shape */ refId: string;
-        /** Unique id for clipPath */ clipPathId?: string | undefined;
-    };
-    events: {
-        click: MouseEvent;
-        mousemove: MouseEvent;
-        mouseleave: MouseEvent;
-        keydown: KeyboardEvent;
-    } & {
-        [evt: string]: CustomEvent<any>;
-    };
-    slots: {
-        default: {
-            refId: string;
-            clipPathId: string;
-        };
-    };
-};
-export type ClipPathUseProps = typeof __propDef.props;
-export type ClipPathUseEvents = typeof __propDef.events;
-export type ClipPathUseSlots = typeof __propDef.slots;
-export default class ClipPathUse extends SvelteComponentTyped<ClipPathUseProps, ClipPathUseEvents, ClipPathUseSlots> {
-}
-export {};