alice.pds.demo.boltless.dev
This repository has no description
1<script module lang="ts">
2 import { tv } from "tailwind-variants";
3
4 export const pagination = tv({
5 base: "flex items-center gap-1"
6 });
7
8 type Item = number | "start-ellipsis" | "end-ellipsis";
9
10 function range(start: number, end: number): number[] {
11 return Array.from({ length: Math.max(end - start + 1, 0) }, (_, i) => start + i);
12 }
13
14 // Windowing per MUI's usePagination: always show the boundary pages
15 // (first/last) plus a sibling window around the current page, collapsing
16 // any gap into a single ellipsis.
17 function getPageItems(current: number, count: number): Item[] {
18 const siblingCount = 1;
19 const boundaryCount = 1;
20
21 const startPages = range(1, Math.min(boundaryCount, count));
22 const endPages = range(Math.max(count - boundaryCount + 1, boundaryCount + 1), count);
23
24 const siblingsStart = Math.max(
25 Math.min(current - siblingCount, count - boundaryCount - siblingCount * 2 - 1),
26 boundaryCount + 2
27 );
28 const siblingsEnd = Math.min(
29 Math.max(current + siblingCount, boundaryCount + siblingCount * 2 + 2),
30 endPages.length > 0 ? endPages[0] - 2 : count - 1
31 );
32
33 return [
34 ...startPages,
35 ...(siblingsStart > boundaryCount + 2
36 ? (["start-ellipsis"] as const)
37 : boundaryCount + 1 < count - boundaryCount
38 ? [boundaryCount + 1]
39 : []),
40 ...range(siblingsStart, siblingsEnd),
41 ...(siblingsEnd < count - boundaryCount - 1
42 ? (["end-ellipsis"] as const)
43 : count - boundaryCount > boundaryCount
44 ? [count - boundaryCount]
45 : []),
46 ...endPages
47 ];
48 }
49</script>
50
51<script lang="ts">
52 import ChevronLeft from "$icon/chevron-left";
53 import ChevronRight from "$icon/chevron-right";
54 import Button from "./Button.svelte";
55
56 interface Props {
57 page: number;
58 total: number;
59 onchange?: (page: number) => void;
60 class?: string;
61 }
62
63 let { page = $bindable(1), total, onchange, class: className }: Props = $props();
64
65 const count = $derived(Math.max(total, 1));
66 const items = $derived(getPageItems(Math.min(Math.max(page, 1), count), count));
67
68 function goTo(target: number) {
69 const next = Math.min(Math.max(target, 1), count);
70 if (next === page) return;
71 page = next;
72 onchange?.(next);
73 }
74</script>
75
76<nav aria-label="Pagination" class={pagination({ class: className })}>
77 <Button
78 variant="ghost"
79 size="sm"
80 class="size-8 p-0"
81 icon={ChevronLeft}
82 disabled={page <= 1}
83 aria-label="Previous page"
84 onclick={() => goTo(page - 1)}
85 />
86
87 {#each items as item, i (typeof item === "number" ? item : `${item}-${i}`)}
88 {#if typeof item === "number"}
89 <Button
90 variant={item === page ? "default" : "ghost"}
91 size="sm"
92 class="size-8 p-0"
93 aria-current={item === page ? "page" : undefined}
94 aria-label={`Page ${item}`}
95 onclick={() => goTo(item)}
96 >
97 {item}
98 </Button>
99 {:else}
100 <span
101 class="flex size-8 items-center justify-center text-foreground-subtle pointer-events-none select-none"
102 aria-hidden="true"
103 >
104 …
105 </span>
106 {/if}
107 {/each}
108
109 <Button
110 variant="ghost"
111 size="sm"
112 class="size-8 p-0"
113 icon={ChevronRight}
114 disabled={page >= count}
115 aria-label="Next page"
116 onclick={() => goTo(page + 1)}
117 />
118</nav>