+
diff --git a/src/svelte/types.ts b/src/svelte/types.ts
new file mode 100644
index 000000000..17d0596ab
--- /dev/null
+++ b/src/svelte/types.ts
@@ -0,0 +1,7 @@
+import type { HTMLAttributes, AriaAttributes } from "svelte/elements";
+
+export type ViewportComponentAttributes = Pick<
+ HTMLAttributes
,
+ "class" | "style" | "id" | "role" | "tabindex"
+> &
+ AriaAttributes;
diff --git a/src/svelte/utils.ts b/src/svelte/utils.ts
index b5b42595c..f93a51d03 100644
--- a/src/svelte/utils.ts
+++ b/src/svelte/utils.ts
@@ -1,11 +1,3 @@
-import { afterUpdate, beforeUpdate } from "svelte";
-
-export const onUpdate = (cb: () => void, before?: boolean) => {
- (before ? beforeUpdate : afterUpdate)(() => {
- cb();
- });
-};
-
export const styleToString = (
obj: Record
): string => {
@@ -19,10 +11,3 @@ export const styleToString = (
};
export const defaultGetKey = (_data: unknown, i: number) => "_" + i;
-
-/**
- * https://github.com/kitschpatrol/svelte-tweakpane-ui/blob/248fd7c24926af1e485a0676b6a8c053177e92db/src/lib/utils.ts#L57-L59
- */
-export type UnwrapCustomEvents = {
- [P in keyof T]: T[P] extends CustomEvent ? detail : never;
-};
diff --git a/stories/svelte/Controls.svelte b/stories/svelte/Controls.svelte
index a1b1bc518..b2b88eec0 100644
--- a/stories/svelte/Controls.svelte
+++ b/stories/svelte/Controls.svelte
@@ -4,11 +4,11 @@
const sizes = [20, 40, 180, 77];
const createItem = (i: number) => ({ id: i, size: sizes[i % 4] + "px" });
- let ref: VList<{ id: number; size: string }>;
- let data = Array.from({ length: 1000 }).map((_, i) => createItem(i));
- let scrollOffset = 0;
- let scrolling = false;
- let scrollTarget = 567;
+ let ref: VList<{ id: number; size: string }> = $state();
+ let data = $state(Array.from({ length: 1000 }).map((_, i) => createItem(i)));
+ let scrollOffset = $state(0);
+ let scrolling = $state(false);
+ let scrollTarget = $state(567);
@@ -18,19 +18,19 @@
{
- scrollTarget = Number(e.target.value);
+ oninput={(e) => {
+ scrollTarget = Number(e.currentTarget.value);
}}
/>
diff --git a/stories/svelte/Default.svelte b/stories/svelte/Default.svelte
index c59d8c09a..2301f398e 100644
--- a/stories/svelte/Default.svelte
+++ b/stories/svelte/Default.svelte
@@ -6,14 +6,16 @@
const data = Array.from({ length: 1000 }).map((_, i) => sizes[i % 4]!);
- i}>
-
- {index}
-
+ i}>
+ {#snippet children({ item, index })}
+
+ {index}
+
+ {/snippet}
diff --git a/stories/svelte/Horizontal.svelte b/stories/svelte/Horizontal.svelte
index af7d0656e..865b5310e 100644
--- a/stories/svelte/Horizontal.svelte
+++ b/stories/svelte/Horizontal.svelte
@@ -10,19 +10,20 @@
d.id}
horizontal
>
-
- {item.id}
-
+ {#snippet children({ item })}
+
+ {item.id}
+
+ {/snippet}