feat: shallow routing

This commit is contained in:
trev 2025-03-19 03:25:58 -04:00
parent 8b494430a5
commit f05e745d05
2 changed files with 42 additions and 2 deletions

View File

@ -2,7 +2,8 @@
import { X } from '@lucide/svelte';
import { Dialog } from 'bits-ui';
import { fade } from 'svelte/transition';
import type { Snippet } from 'svelte';
import { type Snippet } from 'svelte';
import { pushState } from '$app/navigation';
let {
trigger,
@ -17,7 +18,24 @@
} = $props();
</script>
<Dialog.Root bind:open>
<svelte:window
onpopstate={() => {
if (open) {
open = false;
}
}}
/>
<Dialog.Root
bind:open
onOpenChange={(e) => {
if (e) {
pushState('', '#modal');
} else {
history.back();
}
}}
>
<Dialog.Trigger>
{#snippet child({ props })}
{@render trigger(props)}

View File

@ -2,6 +2,8 @@
import { cn } from '$lib/utils';
import { ChevronLeft, ChevronRight } from '@lucide/svelte';
import { Pagination } from 'bits-ui';
import { pushState, replaceState } from '$app/navigation';
import { onMount } from 'svelte';
let {
count = $bindable(),
@ -16,15 +18,35 @@
className?: string;
onchange?: (e: number) => void;
} = $props();
let page: number = $state(1);
onMount(() => {
replaceState('', `${page}`);
});
</script>
<svelte:window
onpopstate={(e) => {
const lastPage: number = Number(e.state['sveltekit:states']);
if (!isNaN(lastPage)) {
page = lastPage;
offset = (lastPage - 1) * limit;
window.scrollTo(0, 0);
onchange?.(lastPage);
}
}}
/>
{#key count && limit}
<Pagination.Root
{count}
bind:page
perPage={limit}
onPageChange={(e) => {
offset = (e - 1) * limit;
window.scrollTo(0, 0);
pushState('', `${e}`);
onchange?.(e);
}}
>