fix: pagination prev/next buttons (#910)

huntabyte · Nov 13, 2024 · 535c960 · 535c960
1 parent 795ebc4
commit 535c960
Show file tree

Hide file tree

Showing 2 changed files with 16 additions and 0 deletions.
diff --git a/.changeset/fresh-bees-hammer.md b/.changeset/fresh-bees-hammer.md
@@ -0,0 +1,5 @@
+---
+"bits-ui": patch
+---
+
+fix(Pagination): disable prev/next buttons when no prev/next page
diff --git a/packages/bits-ui/src/lib/bits/pagination/pagination.svelte.ts b/packages/bits-ui/src/lib/bits/pagination/pagination.svelte.ts
@@ -85,6 +85,9 @@ class PaginationRootState {
 		return node.querySelector<HTMLElement>(`[data-pagination-${type}]`);
 	};
 
+	hasPrevPage = $derived.by(() => this.page.current > 1);
+	hasNextPage = $derived.by(() => this.page.current < this.totalPages);
+
 	prevPage = () => {
 		this.page.current = Math.max(this.page.current - 1, 1);
 	};
@@ -215,6 +218,13 @@ class PaginationButtonState {
 		this.type === "prev" ? this.#root.prevPage() : this.#root.nextPage();
 	};
 
+	#isDisabled = $derived.by(() => {
+		if (this.#disabled.current) return true;
+		if (this.type === "prev") return !this.#root.hasPrevPage;
+		if (this.type === "next") return !this.#root.hasNextPage;
+		return false;
+	});
+
 	#onpointerdown = (e: PointerEvent) => {
 		if (this.#disabled.current) return;
 		if (e.pointerType === "touch") return e.preventDefault();
@@ -244,6 +254,7 @@ class PaginationButtonState {
 				id: this.id.current,
 				[PREV_ATTR]: this.type === "prev" ? "" : undefined,
 				[NEXT_ATTR]: this.type === "next" ? "" : undefined,
+				disabled: this.#isDisabled,
 				//
 				onpointerdown: this.#onpointerdown,
 				onpointerup: this.#onpointerup,