fix: pagination overflowing (#614)

HubbeDev · huntabyte · web-flow · commit 11a188e4ac2b · 2024-01-07T11:46:56.000-05:00
Co-authored-by: Hunter Johnston &lt;johnstonhuntera@gmail.com&gt;
diff --git a/apps/www/package.json b/apps/www/package.json
@@ -74,7 +74,7 @@
 		"@internationalized/date": "^3.5.1",
 		"@unovis/svelte": "^1.3.1",
 		"@unovis/ts": "^1.3.1",
-		"bits-ui": "0.13.3",
+		"bits-ui": "0.13.4",
 		"clsx": "^2.1.0",
 		"cmdk-sv": "^0.0.12",
 		"d3-scale": "^4.0.2",
diff --git a/apps/www/pnpm-lock.yaml b/apps/www/pnpm-lock.yaml
diff --git a/apps/www/src/content/components/pagination.md b/apps/www/src/content/components/pagination.md
@@ -52,7 +52,7 @@ npm install bits-ui
           <Pagination.Ellipsis />
         </Pagination.Item>
       {:else}
-        <Pagination.Item>
+        <Pagination.Item isVisible={currentPage == page.value}>
           <Pagination.Link {page} isActive={currentPage == page.value}>
             {page.value}
           </Pagination.Link>
diff --git a/apps/www/src/lib/registry/default/example/pagination-demo.svelte b/apps/www/src/lib/registry/default/example/pagination-demo.svelte
@@ -1,14 +1,22 @@
 <script lang="ts">
 	import * as Pagination from "@/registry/default/ui/pagination";
+	import { ChevronLeft, ChevronRight } from "lucide-svelte";
+	import { mediaQuery } from "svelte-legos";
 
-	let count = 100;
-	let perPage = 10;
+	const isDesktop = mediaQuery("(min-width: 768px)");
+
+	let count = 20;
+	$: perPage = $isDesktop ? 3 : 8;
+	$: siblingCount = $isDesktop ? 1 : 0;
 </script>
 
-<Pagination.Root {count} {perPage} let:pages let:currentPage>
+<Pagination.Root {count} {perPage} {siblingCount} let:pages let:currentPage>
 	<Pagination.Content>
 		<Pagination.Item>
-			<Pagination.PrevButton />
+			<Pagination.PrevButton>
+				<ChevronLeft class="h-4 w-4" />
+				<span class="hidden sm:block">Previous</span>
+			</Pagination.PrevButton>
 		</Pagination.Item>
 		{#each pages as page (page.key)}
 			{#if page.type === "ellipsis"}
@@ -27,7 +35,10 @@
 			{/if}
 		{/each}
 		<Pagination.Item>
-			<Pagination.NextButton />
+			<Pagination.NextButton>
+				<span class="hidden sm:block">Next</span>
+				<ChevronRight class="h-4 w-4" />
+			</Pagination.NextButton>
 		</Pagination.Item>
 	</Pagination.Content>
 </Pagination.Root>
diff --git a/apps/www/src/lib/registry/default/ui/pagination/pagination-item.svelte b/apps/www/src/lib/registry/default/ui/pagination/pagination-item.svelte
@@ -3,8 +3,8 @@
 	import type { HTMLAttributes } from "svelte/elements";
 
 	type $$Props = HTMLAttributes<HTMLLIElement>;
-
 	let className: $$Props["class"] = undefined;
+
 	export { className as class };
 </script>
 
diff --git a/apps/www/src/lib/registry/default/ui/pagination/pagination-next-button.svelte b/apps/www/src/lib/registry/default/ui/pagination/pagination-next-button.svelte
@@ -14,12 +14,14 @@
 <PaginationPrimitive.NextButton asChild let:builder>
 	<Button
 		variant="ghost"
-		class={cn("gap-1 pl-2.5", className)}
+		class={cn("gap-1 pr-2.5", className)}
 		builders={[builder]}
 		on:click
 		{...$$restProps}
 	>
-		<span>Next</span>
-		<ChevronRight class="h-4 w-4" />
+		<slot>
+			<span>Next</span>
+			<ChevronRight class="h-4 w-4" />
+		</slot>
 	</Button>
 </PaginationPrimitive.NextButton>
diff --git a/apps/www/src/lib/registry/default/ui/pagination/pagination-prev-button.svelte b/apps/www/src/lib/registry/default/ui/pagination/pagination-prev-button.svelte
@@ -19,7 +19,9 @@
 		on:click
 		{...$$restProps}
 	>
-		<ChevronLeft class="h-4 w-4" />
-		<span>Previous</span>
+		<slot>
+			<ChevronLeft class="h-4 w-4" />
+			<span>Previous</span>
+		</slot>
 	</Button>
 </PaginationPrimitive.PrevButton>
diff --git a/apps/www/src/lib/registry/new-york/example/pagination-demo.svelte b/apps/www/src/lib/registry/new-york/example/pagination-demo.svelte
@@ -1,14 +1,22 @@
 <script lang="ts">
 	import * as Pagination from "@/registry/new-york/ui/pagination";
+	import { ChevronLeft, ChevronRight } from "radix-icons-svelte";
+	import { mediaQuery } from "svelte-legos";
+
+	const isDesktop = mediaQuery("(min-width: 768px)");
 
 	let count = 20;
-	let perPage = 3;
+	$: perPage = $isDesktop ? 3 : 8;
+	$: siblingCount = $isDesktop ? 1 : 0;
 </script>
 
-<Pagination.Root {count} {perPage} let:pages let:currentPage>
+<Pagination.Root {count} {perPage} {siblingCount} let:pages let:currentPage>
 	<Pagination.Content>
 		<Pagination.Item>
-			<Pagination.PrevButton />
+			<Pagination.PrevButton>
+				<ChevronLeft class="h-4 w-4" />
+				<span class="hidden sm:block">Previous</span>
+			</Pagination.PrevButton>
 		</Pagination.Item>
 		{#each pages as page (page.key)}
 			{#if page.type === "ellipsis"}
@@ -27,7 +35,10 @@
 			{/if}
 		{/each}
 		<Pagination.Item>
-			<Pagination.NextButton />
+			<Pagination.NextButton>
+				<span class="hidden sm:block">Next</span>
+				<ChevronRight class="h-4 w-4" />
+			</Pagination.NextButton>
 		</Pagination.Item>
 	</Pagination.Content>
 </Pagination.Root>
diff --git a/apps/www/src/lib/registry/new-york/ui/pagination/pagination-item.svelte b/apps/www/src/lib/registry/new-york/ui/pagination/pagination-item.svelte
@@ -3,8 +3,8 @@
 	import type { HTMLAttributes } from "svelte/elements";
 
 	type $$Props = HTMLAttributes<HTMLLIElement>;
-
 	let className: $$Props["class"] = undefined;
+
 	export { className as class };
 </script>
 
diff --git a/apps/www/src/lib/registry/new-york/ui/pagination/pagination-next-button.svelte b/apps/www/src/lib/registry/new-york/ui/pagination/pagination-next-button.svelte
@@ -14,12 +14,14 @@
 <PaginationPrimitive.NextButton asChild let:builder>
 	<Button
 		variant="ghost"
-		class={cn("gap-1 pl-2.5", className)}
+		class={cn("gap-1 pr-2.5", className)}
 		builders={[builder]}
 		on:click
 		{...$$restProps}
 	>
-		<span>Next</span>
-		<ChevronRight class="h-4 w-4" />
+		<slot>
+			<span>Next</span>
+			<ChevronRight class="h-4 w-4" />
+		</slot>
 	</Button>
 </PaginationPrimitive.NextButton>
diff --git a/apps/www/src/lib/registry/new-york/ui/pagination/pagination-prev-button.svelte b/apps/www/src/lib/registry/new-york/ui/pagination/pagination-prev-button.svelte
@@ -19,7 +19,9 @@
 		on:click
 		{...$$restProps}
 	>
-		<ChevronLeft class="h-4 w-4" />
-		<span>Previous</span>
+		<slot>
+			<ChevronLeft class="h-4 w-4" />
+			<span>Previous</span>
+		</slot>
 	</Button>
 </PaginationPrimitive.PrevButton>
diff --git a/apps/www/static/registry/styles/default/input.json b/apps/www/static/registry/styles/default/input.json
@@ -5,11 +5,11 @@
   "files": [
     {
       "name": "index.ts",
-      "content": "import Root from \"./input.svelte\";\n\ntype FormInputEvent<T extends Event = Event> = T & {\n\tcurrentTarget: EventTarget & HTMLInputElement;\n};\nexport type InputEvents = {\n\tblur: FormInputEvent<FocusEvent>;\n\tchange: FormInputEvent<Event>;\n\tclick: FormInputEvent<MouseEvent>;\n\tfocus: FormInputEvent<FocusEvent>;\n\tkeydown: FormInputEvent<KeyboardEvent>;\n\tkeypress: FormInputEvent<KeyboardEvent>;\n\tkeyup: FormInputEvent<KeyboardEvent>;\n\tmouseover: FormInputEvent<MouseEvent>;\n\tmouseenter: FormInputEvent<MouseEvent>;\n\tmouseleave: FormInputEvent<MouseEvent>;\n\tpaste: FormInputEvent<ClipboardEvent>;\n\tinput: FormInputEvent<InputEvent>;\n};\n\nexport {\n\tRoot,\n\t//\n\tRoot as Input\n};\n"
+      "content": "import Root from \"./input.svelte\";\n\ntype FormInputEvent<T extends Event = Event> = T & {\n\tcurrentTarget: EventTarget & HTMLInputElement;\n};\nexport type InputEvents = {\n\tblur: FormInputEvent<FocusEvent>;\n\tchange: FormInputEvent<Event>;\n\tclick: FormInputEvent<MouseEvent>;\n\tfocus: FormInputEvent<FocusEvent>;\n\tfocusin: FormInputEvent<FocusEvent>;\n\tfocusout: FormInputEvent<FocusEvent>;\n\tkeydown: FormInputEvent<KeyboardEvent>;\n\tkeypress: FormInputEvent<KeyboardEvent>;\n\tkeyup: FormInputEvent<KeyboardEvent>;\n\tmouseover: FormInputEvent<MouseEvent>;\n\tmouseenter: FormInputEvent<MouseEvent>;\n\tmouseleave: FormInputEvent<MouseEvent>;\n\tpaste: FormInputEvent<ClipboardEvent>;\n\tinput: FormInputEvent<InputEvent>;\n};\n\nexport {\n\tRoot,\n\t//\n\tRoot as Input\n};\n"
     },
     {
       "name": "input.svelte",
-      "content": "<script lang=\"ts\">\n\timport type { HTMLInputAttributes } from \"svelte/elements\";\n\timport { cn } from \"$lib/utils\";\n\timport type { InputEvents } from \".\";\n\n\ttype $$Props = HTMLInputAttributes;\n\ttype $$Events = InputEvents;\n\n\tlet className: $$Props[\"class\"] = undefined;\n\texport let value: $$Props[\"value\"] = undefined;\n\texport { className as class };\n</script>\n\n<input\n\tclass={cn(\n\t\t\"flex h-10 w-full rounded-md border border-input bg-transparent px-3 py-2 text-sm ring-offset-background file:border-0  file:bg-transparent file:text-foreground file:text-sm file:font-medium placeholder:text-muted-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50\",\n\t\tclassName\n\t)}\n\tbind:value\n\ton:blur\n\ton:change\n\ton:click\n\ton:focus\n\ton:keydown\n\ton:keypress\n\ton:keyup\n\ton:mouseover\n\ton:mouseenter\n\ton:mouseleave\n\ton:paste\n\ton:input\n\t{...$$restProps}\n/>\n"
+      "content": "<script lang=\"ts\">\n\timport type { HTMLInputAttributes } from \"svelte/elements\";\n\timport { cn } from \"$lib/utils\";\n\timport type { InputEvents } from \".\";\n\n\ttype $$Props = HTMLInputAttributes;\n\ttype $$Events = InputEvents;\n\n\tlet className: $$Props[\"class\"] = undefined;\n\texport let value: $$Props[\"value\"] = undefined;\n\texport { className as class };\n</script>\n\n<input\n\tclass={cn(\n\t\t\"flex h-10 w-full rounded-md border border-input bg-transparent px-3 py-2 text-sm ring-offset-background file:border-0  file:bg-transparent file:text-foreground file:text-sm file:font-medium placeholder:text-muted-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50\",\n\t\tclassName\n\t)}\n\tbind:value\n\ton:blur\n\ton:change\n\ton:click\n\ton:focus\n\ton:focusin\n\ton:focusout\n\ton:keydown\n\ton:keypress\n\ton:keyup\n\ton:mouseover\n\ton:mouseenter\n\ton:mouseleave\n\ton:paste\n\ton:input\n\t{...$$restProps}\n/>\n"
     }
   ],
   "type": "components:ui"
diff --git a/apps/www/static/registry/styles/default/pagination.json b/apps/www/static/registry/styles/default/pagination.json
@@ -21,19 +21,19 @@
     },
     {
       "name": "pagination-item.svelte",
-      "content": "<script lang=\"ts\">\n\timport { cn } from \"$lib/utils\";\n\timport type { HTMLAttributes } from \"svelte/elements\";\n\n\ttype $$Props = HTMLAttributes<HTMLLIElement>;\n\n\tlet className: $$Props[\"class\"] = undefined;\n\texport { className as class };\n</script>\n\n<li class={cn(\"\", className)} {...$$restProps}>\n\t<slot />\n</li>\n"
+      "content": "<script lang=\"ts\">\n\timport { cn } from \"$lib/utils\";\n\timport type { HTMLAttributes } from \"svelte/elements\";\n\n\ttype $$Props = HTMLAttributes<HTMLLIElement>;\n\tlet className: $$Props[\"class\"] = undefined;\n\n\texport { className as class };\n</script>\n\n<li class={cn(\"\", className)} {...$$restProps}>\n\t<slot />\n</li>\n"
     },
     {
       "name": "pagination-link.svelte",
       "content": "<script lang=\"ts\">\n\timport { Pagination as PaginationPrimitive } from \"bits-ui\";\n\timport { cn } from \"$lib/utils\";\n\timport { buttonVariants, type Props } from \"@/registry/default/ui/button\";\n\n\ttype $$Props = PaginationPrimitive.PageProps &\n\t\tProps & {\n\t\t\tisActive: boolean;\n\t\t};\n\n\ttype $$Events = PaginationPrimitive.PageEvents;\n\n\tlet className: $$Props[\"class\"] = undefined;\n\texport let page: $$Props[\"page\"];\n\texport let size: $$Props[\"size\"] = \"icon\";\n\texport let isActive: $$Props[\"isActive\"] = false;\n\n\texport { className as class };\n</script>\n\n<PaginationPrimitive.Page\n\tbind:page\n\tclass={cn(\n\t\tbuttonVariants({\n\t\t\tvariant: isActive ? \"outline\" : \"ghost\",\n\t\t\tsize\n\t\t}),\n\t\tclassName\n\t)}\n\t{...$$restProps}\n\ton:click\n>\n\t<slot>{page.value}</slot>\n</PaginationPrimitive.Page>\n"
     },
     {
       "name": "pagination-next-button.svelte",
-      "content": "<script lang=\"ts\">\n\timport { Pagination as PaginationPrimitive } from \"bits-ui\";\n\timport { Button } from \"@/registry/default/ui/button\";\n\timport { cn } from \"$lib/utils\";\n\timport { ChevronRight } from \"lucide-svelte\";\n\n\ttype $$Props = PaginationPrimitive.NextButtonProps;\n\ttype $$Events = PaginationPrimitive.NextButtonEvents;\n\n\tlet className: $$Props[\"class\"] = undefined;\n\texport { className as class };\n</script>\n\n<PaginationPrimitive.NextButton asChild let:builder>\n\t<Button\n\t\tvariant=\"ghost\"\n\t\tclass={cn(\"gap-1 pl-2.5\", className)}\n\t\tbuilders={[builder]}\n\t\ton:click\n\t\t{...$$restProps}\n\t>\n\t\t<span>Next</span>\n\t\t<ChevronRight class=\"h-4 w-4\" />\n\t</Button>\n</PaginationPrimitive.NextButton>\n"
+      "content": "<script lang=\"ts\">\n\timport { Pagination as PaginationPrimitive } from \"bits-ui\";\n\timport { Button } from \"@/registry/default/ui/button\";\n\timport { cn } from \"$lib/utils\";\n\timport { ChevronRight } from \"lucide-svelte\";\n\n\ttype $$Props = PaginationPrimitive.NextButtonProps;\n\ttype $$Events = PaginationPrimitive.NextButtonEvents;\n\n\tlet className: $$Props[\"class\"] = undefined;\n\texport { className as class };\n</script>\n\n<PaginationPrimitive.NextButton asChild let:builder>\n\t<Button\n\t\tvariant=\"ghost\"\n\t\tclass={cn(\"gap-1 pr-2.5\", className)}\n\t\tbuilders={[builder]}\n\t\ton:click\n\t\t{...$$restProps}\n\t>\n\t\t<slot>\n\t\t\t<span>Next</span>\n\t\t\t<ChevronRight class=\"h-4 w-4\" />\n\t\t</slot>\n\t</Button>\n</PaginationPrimitive.NextButton>\n"
     },
     {
       "name": "pagination-prev-button.svelte",
-      "content": "<script lang=\"ts\">\n\timport { Pagination as PaginationPrimitive } from \"bits-ui\";\n\timport { Button } from \"@/registry/default/ui/button\";\n\timport { cn } from \"$lib/utils\";\n\timport { ChevronLeft } from \"lucide-svelte\";\n\n\ttype $$Props = PaginationPrimitive.PrevButtonProps;\n\ttype $$Events = PaginationPrimitive.PrevButtonEvents;\n\n\tlet className: $$Props[\"class\"] = undefined;\n\texport { className as class };\n</script>\n\n<PaginationPrimitive.PrevButton asChild let:builder>\n\t<Button\n\t\tvariant=\"ghost\"\n\t\tclass={cn(\"gap-1 pl-2.5\", className)}\n\t\tbuilders={[builder]}\n\t\ton:click\n\t\t{...$$restProps}\n\t>\n\t\t<ChevronLeft class=\"h-4 w-4\" />\n\t\t<span>Previous</span>\n\t</Button>\n</PaginationPrimitive.PrevButton>\n"
+      "content": "<script lang=\"ts\">\n\timport { Pagination as PaginationPrimitive } from \"bits-ui\";\n\timport { Button } from \"@/registry/default/ui/button\";\n\timport { cn } from \"$lib/utils\";\n\timport { ChevronLeft } from \"lucide-svelte\";\n\n\ttype $$Props = PaginationPrimitive.PrevButtonProps;\n\ttype $$Events = PaginationPrimitive.PrevButtonEvents;\n\n\tlet className: $$Props[\"class\"] = undefined;\n\texport { className as class };\n</script>\n\n<PaginationPrimitive.PrevButton asChild let:builder>\n\t<Button\n\t\tvariant=\"ghost\"\n\t\tclass={cn(\"gap-1 pl-2.5\", className)}\n\t\tbuilders={[builder]}\n\t\ton:click\n\t\t{...$$restProps}\n\t>\n\t\t<slot>\n\t\t\t<ChevronLeft class=\"h-4 w-4\" />\n\t\t\t<span>Previous</span>\n\t\t</slot>\n\t</Button>\n</PaginationPrimitive.PrevButton>\n"
     },
     {
       "name": "pagination.svelte",
diff --git a/apps/www/static/registry/styles/new-york/input.json b/apps/www/static/registry/styles/new-york/input.json
@@ -5,11 +5,11 @@
   "files": [
     {
       "name": "index.ts",
-      "content": "import Root from \"./input.svelte\";\n\ntype FormInputEvent<T extends Event = Event> = T & {\n\tcurrentTarget: EventTarget & HTMLInputElement;\n};\nexport type InputEvents = {\n\tblur: FormInputEvent<FocusEvent>;\n\tchange: FormInputEvent<Event>;\n\tclick: FormInputEvent<MouseEvent>;\n\tfocus: FormInputEvent<FocusEvent>;\n\tkeydown: FormInputEvent<KeyboardEvent>;\n\tkeypress: FormInputEvent<KeyboardEvent>;\n\tkeyup: FormInputEvent<KeyboardEvent>;\n\tmouseover: FormInputEvent<MouseEvent>;\n\tmouseenter: FormInputEvent<MouseEvent>;\n\tmouseleave: FormInputEvent<MouseEvent>;\n\tpaste: FormInputEvent<ClipboardEvent>;\n\tinput: FormInputEvent<InputEvent>;\n};\n\nexport {\n\tRoot,\n\t//\n\tRoot as Input\n};\n"
+      "content": "import Root from \"./input.svelte\";\n\ntype FormInputEvent<T extends Event = Event> = T & {\n\tcurrentTarget: EventTarget & HTMLInputElement;\n};\nexport type InputEvents = {\n\tblur: FormInputEvent<FocusEvent>;\n\tchange: FormInputEvent<Event>;\n\tclick: FormInputEvent<MouseEvent>;\n\tfocus: FormInputEvent<FocusEvent>;\n\tfocusin: FormInputEvent<FocusEvent>;\n\tfocusout: FormInputEvent<FocusEvent>;\n\tkeydown: FormInputEvent<KeyboardEvent>;\n\tkeypress: FormInputEvent<KeyboardEvent>;\n\tkeyup: FormInputEvent<KeyboardEvent>;\n\tmouseover: FormInputEvent<MouseEvent>;\n\tmouseenter: FormInputEvent<MouseEvent>;\n\tmouseleave: FormInputEvent<MouseEvent>;\n\tpaste: FormInputEvent<ClipboardEvent>;\n\tinput: FormInputEvent<InputEvent>;\n};\n\nexport {\n\tRoot,\n\t//\n\tRoot as Input\n};\n"
     },
     {
       "name": "input.svelte",
-      "content": "<script lang=\"ts\">\n\timport type { HTMLInputAttributes } from \"svelte/elements\";\n\timport { cn } from \"$lib/utils\";\n\timport type { InputEvents } from \".\";\n\n\ttype $$Props = HTMLInputAttributes;\n\ttype $$Events = InputEvents;\n\n\tlet className: $$Props[\"class\"] = undefined;\n\texport let value: $$Props[\"value\"] = undefined;\n\texport { className as class };\n</script>\n\n<input\n\tclass={cn(\n\t\t\"flex h-9 w-full rounded-md border border-input bg-background px-3 py-1 text-sm shadow-sm transition-colors file:border-0 file:bg-transparent file:text-foreground file:text-sm file:font-medium placeholder:text-muted-foreground focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring disabled:cursor-not-allowed disabled:opacity-50\",\n\t\tclassName\n\t)}\n\tbind:value\n\ton:blur\n\ton:change\n\ton:click\n\ton:focus\n\ton:keydown\n\ton:keypress\n\ton:keyup\n\ton:mouseover\n\ton:mouseenter\n\ton:mouseleave\n\ton:paste\n\ton:input\n\t{...$$restProps}\n/>\n"
+      "content": "<script lang=\"ts\">\n\timport type { HTMLInputAttributes } from \"svelte/elements\";\n\timport { cn } from \"$lib/utils\";\n\timport type { InputEvents } from \".\";\n\n\ttype $$Props = HTMLInputAttributes;\n\ttype $$Events = InputEvents;\n\n\tlet className: $$Props[\"class\"] = undefined;\n\texport let value: $$Props[\"value\"] = undefined;\n\texport { className as class };\n</script>\n\n<input\n\tclass={cn(\n\t\t\"flex h-9 w-full rounded-md border border-input bg-background px-3 py-1 text-sm shadow-sm transition-colors file:border-0 file:bg-transparent file:text-foreground file:text-sm file:font-medium placeholder:text-muted-foreground focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring disabled:cursor-not-allowed disabled:opacity-50\",\n\t\tclassName\n\t)}\n\tbind:value\n\ton:blur\n\ton:change\n\ton:click\n\ton:focus\n\ton:focusin\n\ton:focusout\n\ton:keydown\n\ton:keypress\n\ton:keyup\n\ton:mouseover\n\ton:mouseenter\n\ton:mouseleave\n\ton:paste\n\ton:input\n\t{...$$restProps}\n/>\n"
     }
   ],
   "type": "components:ui"
diff --git a/apps/www/static/registry/styles/new-york/pagination.json b/apps/www/static/registry/styles/new-york/pagination.json
