feat(pagination): add option for custom prev/next children

stefan-karger · Sep 23, 2024 · 48b9b23 · 48b9b23
1 parent 9f688f6
commit 48b9b23
Show file tree

Hide file tree

Showing 3 changed files with 45 additions and 30 deletions.
diff --git a/.changeset/stupid-avocados-dream.md b/.changeset/stupid-avocados-dream.md
@@ -0,0 +1,5 @@
+---
+"solidui-cli": patch
+---
+
+add option for custom prev/next children
diff --git a/apps/docs/public/registry/ui/pagination.json b/apps/docs/public/registry/ui/pagination.json
@@ -6,7 +6,7 @@
   "files": [
     {
       "name": "pagination.tsx",
-      "content": "import type { ValidComponent } from \"solid-js\"\nimport { splitProps } from \"solid-js\"\n\nimport * as PaginationPrimitive from \"@kobalte/core/pagination\"\nimport type { PolymorphicProps } from \"@kobalte/core/polymorphic\"\n\nimport { cn } from \"~/lib/utils\"\nimport { buttonVariants } from \"~/registry/ui/button\"\n\nconst PaginationItems = PaginationPrimitive.Items\n\ntype PaginationRootProps<T extends ValidComponent = \"nav\"> =\n  PaginationPrimitive.PaginationRootProps<T> & { class?: string | undefined }\n\nconst Pagination = <T extends ValidComponent = \"nav\">(\n  props: PolymorphicProps<T, PaginationRootProps<T>>\n) => {\n  const [local, others] = splitProps(props as PaginationRootProps, [\"class\"])\n  return (\n    <PaginationPrimitive.Root\n      class={cn(\"[&>*]:flex [&>*]:flex-row [&>*]:items-center [&>*]:gap-1\", local.class)}\n      {...others}\n    />\n  )\n}\n\ntype PaginationItemProps<T extends ValidComponent = \"button\"> =\n  PaginationPrimitive.PaginationItemProps<T> & { class?: string | undefined }\n\nconst PaginationItem = <T extends ValidComponent = \"button\">(\n  props: PolymorphicProps<T, PaginationItemProps<T>>\n) => {\n  const [local, others] = splitProps(props as PaginationItemProps, [\"class\"])\n  return (\n    <PaginationPrimitive.Item\n      class={cn(\n        buttonVariants({\n          variant: \"ghost\"\n        }),\n        \"size-10 data-[current]:border\",\n        local.class\n      )}\n      {...others}\n    />\n  )\n}\n\ntype PaginationEllipsisProps<T extends ValidComponent = \"div\"> =\n  PaginationPrimitive.PaginationEllipsisProps<T> & {\n    class?: string | undefined\n  }\n\nconst PaginationEllipsis = <T extends ValidComponent = \"div\">(\n  props: PolymorphicProps<T, PaginationEllipsisProps<T>>\n) => {\n  const [local, others] = splitProps(props as PaginationEllipsisProps, [\"class\"])\n  return (\n    <PaginationPrimitive.Ellipsis\n      class={cn(\"flex size-10 items-center justify-center\", local.class)}\n      {...others}\n    >\n      <svg\n        xmlns=\"http://www.w3.org/2000/svg\"\n        viewBox=\"0 0 24 24\"\n        fill=\"none\"\n        stroke=\"currentColor\"\n        stroke-width=\"2\"\n        stroke-linecap=\"round\"\n        stroke-linejoin=\"round\"\n        class=\"size-4\"\n      >\n        <circle cx=\"12\" cy=\"12\" r=\"1\" />\n        <circle cx=\"19\" cy=\"12\" r=\"1\" />\n        <circle cx=\"5\" cy=\"12\" r=\"1\" />\n      </svg>\n      <span class=\"sr-only\">More pages</span>\n    </PaginationPrimitive.Ellipsis>\n  )\n}\n\ntype PaginationPreviousProps<T extends ValidComponent = \"button\"> =\n  PaginationPrimitive.PaginationPreviousProps<T> & {\n    class?: string | undefined\n  }\n\nconst PaginationPrevious = <T extends ValidComponent = \"button\">(\n  props: PolymorphicProps<T, PaginationPreviousProps<T>>\n) => {\n  const [local, others] = splitProps(props as PaginationPreviousProps, [\"class\"])\n  return (\n    <PaginationPrimitive.Previous\n      class={cn(\n        buttonVariants({\n          variant: \"ghost\"\n        }),\n        \"gap-1 pl-2.5\",\n        local.class\n      )}\n      {...others}\n    >\n      <svg\n        xmlns=\"http://www.w3.org/2000/svg\"\n        viewBox=\"0 0 24 24\"\n        fill=\"none\"\n        stroke=\"currentColor\"\n        stroke-width=\"2\"\n        stroke-linecap=\"round\"\n        stroke-linejoin=\"round\"\n        class=\"size-4\"\n      >\n        <path d=\"M15 6l-6 6l6 6\" />\n      </svg>\n      <span>Previous</span>\n    </PaginationPrimitive.Previous>\n  )\n}\n\ntype PaginationNextProps<T extends ValidComponent = \"button\"> =\n  PaginationPrimitive.PaginationNextProps<T> & {\n    class?: string | undefined\n  }\n\nconst PaginationNext = <T extends ValidComponent = \"button\">(\n  props: PolymorphicProps<T, PaginationNextProps<T>>\n) => {\n  const [local, others] = splitProps(props as PaginationNextProps, [\"class\"])\n  return (\n    <PaginationPrimitive.Next\n      class={cn(\n        buttonVariants({\n          variant: \"ghost\"\n        }),\n        \"gap-1 pl-2.5\",\n        local.class\n      )}\n      {...others}\n    >\n      <span>Next</span>\n      <svg\n        xmlns=\"http://www.w3.org/2000/svg\"\n        viewBox=\"0 0 24 24\"\n        fill=\"none\"\n        stroke=\"currentColor\"\n        stroke-width=\"2\"\n        stroke-linecap=\"round\"\n        stroke-linejoin=\"round\"\n        class=\"size-4\"\n      >\n        <path d=\"M9 6l6 6l-6 6\" />\n      </svg>\n    </PaginationPrimitive.Next>\n  )\n}\n\nexport {\n  Pagination,\n  PaginationItems,\n  PaginationItem,\n  PaginationEllipsis,\n  PaginationPrevious,\n  PaginationNext\n}\n"
+      "content": "import type { JSX, ValidComponent } from \"solid-js\"\nimport { splitProps } from \"solid-js\"\n\nimport * as PaginationPrimitive from \"@kobalte/core/pagination\"\nimport type { PolymorphicProps } from \"@kobalte/core/polymorphic\"\n\nimport { cn } from \"~/lib/utils\"\nimport { buttonVariants } from \"~/registry/ui/button\"\n\nconst PaginationItems = PaginationPrimitive.Items\n\ntype PaginationRootProps<T extends ValidComponent = \"nav\"> =\n  PaginationPrimitive.PaginationRootProps<T> & { class?: string | undefined }\n\nconst Pagination = <T extends ValidComponent = \"nav\">(\n  props: PolymorphicProps<T, PaginationRootProps<T>>\n) => {\n  const [local, others] = splitProps(props as PaginationRootProps, [\"class\"])\n  return (\n    <PaginationPrimitive.Root\n      class={cn(\"[&>*]:flex [&>*]:flex-row [&>*]:items-center [&>*]:gap-1\", local.class)}\n      {...others}\n    />\n  )\n}\n\ntype PaginationItemProps<T extends ValidComponent = \"button\"> =\n  PaginationPrimitive.PaginationItemProps<T> & { class?: string | undefined }\n\nconst PaginationItem = <T extends ValidComponent = \"button\">(\n  props: PolymorphicProps<T, PaginationItemProps<T>>\n) => {\n  const [local, others] = splitProps(props as PaginationItemProps, [\"class\"])\n  return (\n    <PaginationPrimitive.Item\n      class={cn(\n        buttonVariants({\n          variant: \"ghost\"\n        }),\n        \"size-10 data-[current]:border\",\n        local.class\n      )}\n      {...others}\n    />\n  )\n}\n\ntype PaginationEllipsisProps<T extends ValidComponent = \"div\"> =\n  PaginationPrimitive.PaginationEllipsisProps<T> & {\n    class?: string | undefined\n  }\n\nconst PaginationEllipsis = <T extends ValidComponent = \"div\">(\n  props: PolymorphicProps<T, PaginationEllipsisProps<T>>\n) => {\n  const [local, others] = splitProps(props as PaginationEllipsisProps, [\"class\"])\n  return (\n    <PaginationPrimitive.Ellipsis\n      class={cn(\"flex size-10 items-center justify-center\", local.class)}\n      {...others}\n    >\n      <svg\n        xmlns=\"http://www.w3.org/2000/svg\"\n        viewBox=\"0 0 24 24\"\n        fill=\"none\"\n        stroke=\"currentColor\"\n        stroke-width=\"2\"\n        stroke-linecap=\"round\"\n        stroke-linejoin=\"round\"\n        class=\"size-4\"\n      >\n        <circle cx=\"12\" cy=\"12\" r=\"1\" />\n        <circle cx=\"19\" cy=\"12\" r=\"1\" />\n        <circle cx=\"5\" cy=\"12\" r=\"1\" />\n      </svg>\n      <span class=\"sr-only\">More pages</span>\n    </PaginationPrimitive.Ellipsis>\n  )\n}\n\ntype PaginationPreviousProps<T extends ValidComponent = \"button\"> =\n  PaginationPrimitive.PaginationPreviousProps<T> & {\n    class?: string | undefined\n    children?: JSX.Element\n  }\n\nconst PaginationPrevious = <T extends ValidComponent = \"button\">(\n  props: PolymorphicProps<T, PaginationPreviousProps<T>>\n) => {\n  const [local, others] = splitProps(props as PaginationPreviousProps, [\"class\", \"children\"])\n  return (\n    <PaginationPrimitive.Previous\n      class={cn(\n        buttonVariants({\n          variant: \"ghost\"\n        }),\n        \"gap-1 pl-2.5\",\n        local.class\n      )}\n      {...others}\n    >\n      {local.children ?? (\n        <>\n          <svg\n            xmlns=\"http://www.w3.org/2000/svg\"\n            viewBox=\"0 0 24 24\"\n            fill=\"none\"\n            stroke=\"currentColor\"\n            stroke-width=\"2\"\n            stroke-linecap=\"round\"\n            stroke-linejoin=\"round\"\n            class=\"size-4\"\n          >\n            <path d=\"M15 6l-6 6l6 6\" />\n          </svg>\n          <span>Previous</span>\n        </>\n      )}\n    </PaginationPrimitive.Previous>\n  )\n}\n\ntype PaginationNextProps<T extends ValidComponent = \"button\"> =\n  PaginationPrimitive.PaginationNextProps<T> & {\n    class?: string | undefined\n    children?: JSX.Element\n  }\n\nconst PaginationNext = <T extends ValidComponent = \"button\">(\n  props: PolymorphicProps<T, PaginationNextProps<T>>\n) => {\n  const [local, others] = splitProps(props as PaginationNextProps, [\"class\", \"children\"])\n  return (\n    <PaginationPrimitive.Next\n      class={cn(\n        buttonVariants({\n          variant: \"ghost\"\n        }),\n        \"gap-1 pl-2.5\",\n        local.class\n      )}\n      {...others}\n    >\n      {local.children ?? (\n        <>\n          <span>Next</span>\n          <svg\n            xmlns=\"http://www.w3.org/2000/svg\"\n            viewBox=\"0 0 24 24\"\n            fill=\"none\"\n            stroke=\"currentColor\"\n            stroke-width=\"2\"\n            stroke-linecap=\"round\"\n            stroke-linejoin=\"round\"\n            class=\"size-4\"\n          >\n            <path d=\"M9 6l6 6l-6 6\" />\n          </svg>\n        </>\n      )}\n    </PaginationPrimitive.Next>\n  )\n}\n\nexport {\n  Pagination,\n  PaginationItems,\n  PaginationItem,\n  PaginationEllipsis,\n  PaginationPrevious,\n  PaginationNext\n}\n"
     }
   ],
   "type": "ui"

diff --git a/apps/docs/src/registry/ui/pagination.tsx b/apps/docs/src/registry/ui/pagination.tsx
@@ -1,4 +1,4 @@
-import type { ValidComponent } from "solid-js"
+import type { JSX, ValidComponent } from "solid-js"
 import { splitProps } from "solid-js"
 
 import * as PaginationPrimitive from "@kobalte/core/pagination"
@@ -81,12 +81,13 @@ const PaginationEllipsis = <T extends ValidComponent = "div">(
 type PaginationPreviousProps<T extends ValidComponent = "button"> =
   PaginationPrimitive.PaginationPreviousProps<T> & {
     class?: string | undefined
+    children?: JSX.Element
   }
 
 const PaginationPrevious = <T extends ValidComponent = "button">(
   props: PolymorphicProps<T, PaginationPreviousProps<T>>
 ) => {
-  const [local, others] = splitProps(props as PaginationPreviousProps, ["class"])
+  const [local, others] = splitProps(props as PaginationPreviousProps, ["class", "children"])
   return (
     <PaginationPrimitive.Previous
       class={cn(
@@ -98,32 +99,37 @@ const PaginationPrevious = <T extends ValidComponent = "button">(
       )}
       {...others}
     >
-      <svg
-        xmlns="http://www.w3.org/2000/svg"
-        viewBox="0 0 24 24"
-        fill="none"
-        stroke="currentColor"
-        stroke-width="2"
-        stroke-linecap="round"
-        stroke-linejoin="round"
-        class="size-4"
-      >
-        <path d="M15 6l-6 6l6 6" />
-      </svg>
-      <span>Previous</span>
+      {local.children ?? (
+        <>
+          <svg
+            xmlns="http://www.w3.org/2000/svg"
+            viewBox="0 0 24 24"
+            fill="none"
+            stroke="currentColor"
+            stroke-width="2"
+            stroke-linecap="round"
+            stroke-linejoin="round"
+            class="size-4"
+          >
+            <path d="M15 6l-6 6l6 6" />
+          </svg>
+          <span>Previous</span>
+        </>
+      )}
     </PaginationPrimitive.Previous>
   )
 }
 
 type PaginationNextProps<T extends ValidComponent = "button"> =
   PaginationPrimitive.PaginationNextProps<T> & {
     class?: string | undefined
+    children?: JSX.Element
   }
 
 const PaginationNext = <T extends ValidComponent = "button">(
   props: PolymorphicProps<T, PaginationNextProps<T>>
 ) => {
-  const [local, others] = splitProps(props as PaginationNextProps, ["class"])
+  const [local, others] = splitProps(props as PaginationNextProps, ["class", "children"])
   return (
     <PaginationPrimitive.Next
       class={cn(
@@ -135,19 +141,23 @@ const PaginationNext = <T extends ValidComponent = "button">(
       )}
       {...others}
     >
-      <span>Next</span>
-      <svg
-        xmlns="http://www.w3.org/2000/svg"
-        viewBox="0 0 24 24"
-        fill="none"
-        stroke="currentColor"
-        stroke-width="2"
-        stroke-linecap="round"
-        stroke-linejoin="round"
-        class="size-4"
-      >
-        <path d="M9 6l6 6l-6 6" />
-      </svg>
+      {local.children ?? (
+        <>
+          <span>Next</span>
+          <svg
+            xmlns="http://www.w3.org/2000/svg"
+            viewBox="0 0 24 24"
+            fill="none"
+            stroke="currentColor"
+            stroke-width="2"
+            stroke-linecap="round"
+            stroke-linejoin="round"
+            class="size-4"
+          >
+            <path d="M9 6l6 6l-6 6" />
+          </svg>
+        </>
+      )}
     </PaginationPrimitive.Next>
   )
 }