feat: better components
This commit is contained in:
47
client/src/lib/ui/pagination/pagination.svelte
Normal file
47
client/src/lib/ui/pagination/pagination.svelte
Normal file
@ -0,0 +1,47 @@
|
||||
<script lang="ts">
|
||||
import { Pagination as PaginationPrimitive } from 'bits-ui';
|
||||
|
||||
import { cn } from '$lib/utils.js';
|
||||
import { pushState } from '$app/navigation';
|
||||
|
||||
let {
|
||||
ref = $bindable(null),
|
||||
class: className,
|
||||
count = 0,
|
||||
perPage = 10,
|
||||
page = $bindable(1),
|
||||
siblingCount = 1,
|
||||
onPageChange,
|
||||
...restProps
|
||||
}: PaginationPrimitive.RootProps = $props();
|
||||
</script>
|
||||
|
||||
<svelte:window
|
||||
onpopstate={(state) => {
|
||||
const sks = state.state['sveltekit:states'] as {} | string;
|
||||
if (typeof sks === 'string' && sks.includes('#pagination-')) {
|
||||
page = Number(sks.split('#pagination-')[1]);
|
||||
onPageChange?.(page);
|
||||
} else {
|
||||
page = 1;
|
||||
onPageChange?.(page);
|
||||
}
|
||||
}}
|
||||
/>
|
||||
|
||||
<PaginationPrimitive.Root
|
||||
bind:ref
|
||||
bind:page
|
||||
onPageChange={(p) => {
|
||||
pushState('', `#pagination-${p}`);
|
||||
onPageChange?.(p);
|
||||
}}
|
||||
role="navigation"
|
||||
aria-label="pagination"
|
||||
data-slot="pagination"
|
||||
class={cn('mx-auto flex w-full justify-center', className)}
|
||||
{count}
|
||||
{perPage}
|
||||
{siblingCount}
|
||||
{...restProps}
|
||||
/>
|
Reference in New Issue
Block a user