chore(web): migration svelte 5 syntax (#13883)

This commit is contained in:
Alex 2024-11-14 08:43:25 -06:00 committed by GitHub
parent 9203a61709
commit 0b3742cf13
No known key found for this signature in database
GPG key ID: B5690EEEBB952194
310 changed files with 6435 additions and 4176 deletions

View file

@ -1,10 +1,14 @@
<script lang="ts">
let className = '';
export { className as class };
export let itemCount = 1;
interface Props {
class?: string;
itemCount?: number;
children?: import('svelte').Snippet<[{ itemCount: number }]>;
}
let container: HTMLElement | undefined;
let contentRect: DOMRectReadOnly | undefined;
let { class: className = '', itemCount = $bindable(1), children }: Props = $props();
let container: HTMLElement | undefined = $state();
let contentRect: DOMRectReadOnly | undefined = $state();
const getGridGap = (element: Element) => {
const style = getComputedStyle(element);
@ -28,11 +32,13 @@
return Math.floor((containerWidth + columnGap) / (childWidth + columnGap)) || 1;
};
$: if (container && contentRect) {
itemCount = getItemCount(container, contentRect.width);
}
$effect(() => {
if (container && contentRect) {
itemCount = getItemCount(container, contentRect.width);
}
});
</script>
<div class={className} bind:this={container} bind:contentRect>
<slot {itemCount} />
{@render children?.({ itemCount })}
</div>