aboutsummaryrefslogtreecommitdiff
path: root/src/lib/Lazy.svelte
diff options
context:
space:
mode:
authorFuwn <[email protected]>2024-10-28 15:32:46 -0700
committerFuwn <[email protected]>2024-10-28 15:32:46 -0700
commit39b677404558ae3b7eb34e818d7ca308f62f9cb0 (patch)
tree7f19fca39ecd4237e3c0d1aef2d8e9fa3cec7845 /src/lib/Lazy.svelte
parentfeat(graphql): paged badges query (diff)
downloaddue.moe-svelte-5.tar.xz
due.moe-svelte-5.zip
feat: update to svelte 5svelte-5
Diffstat (limited to 'src/lib/Lazy.svelte')
-rw-r--r--src/lib/Lazy.svelte38
1 files changed, 26 insertions, 12 deletions
diff --git a/src/lib/Lazy.svelte b/src/lib/Lazy.svelte
index da5b09a9..8167711d 100644
--- a/src/lib/Lazy.svelte
+++ b/src/lib/Lazy.svelte
@@ -1,17 +1,31 @@
<script lang="ts">
import { onMount, onDestroy } from 'svelte';
- export let top = 0;
- export let bottom = 0;
- export let left = 0;
- export let right = 0;
- export let steps = 100;
- export let threshold = 0.01;
- export let once = false;
-
- let element: Element;
- let percent: number = 0;
- let visible = false;
+ interface Props {
+ top?: number;
+ bottom?: number;
+ left?: number;
+ right?: number;
+ steps?: number;
+ threshold?: number;
+ once?: boolean;
+ children?: import('svelte').Snippet<[any]>;
+ }
+
+ let {
+ top = 0,
+ bottom = 0,
+ left = 0,
+ right = 0,
+ steps = 100,
+ threshold = 0.01,
+ once = false,
+ children
+ }: Props = $props();
+
+ let element: Element = $state();
+ let percent: number = $state(0);
+ let visible = $state(false);
let observer: IntersectionObserver;
const intersectPercent = (
@@ -45,5 +59,5 @@
</script>
<div bind:this={element}>
- <slot {visible} {percent} />
+ {@render children?.({ visible, percent, })}
</div>