feat: shallow routing
This commit is contained in:
parent
8b494430a5
commit
f05e745d05
@ -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)}
|
||||
|
@ -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);
|
||||
}}
|
||||
>
|
||||
|
Loading…
x
Reference in New Issue
Block a user