From e5b33f652fb939b847ef8f11b73c2d8ec6d8eb8a Mon Sep 17 00:00:00 2001
From: Sadegh Barati <sadeghbaratiwork@gmail.com>
Date: Tue, 10 Oct 2023 10:39:16 +0330
Subject: [PATCH] feat: add `pagination` (#109)

feat: update
---
 apps/www/.vitepress/theme/config/docs.ts      |  6 ++
 .../src/content/docs/components/pagination.md | 57 +++++++++++++++++++
 .../default/example/PaginationDemo.vue        | 37 ++++++++++++
 .../ui/pagination/PaginationEllipsis.vue      | 22 +++++++
 .../default/ui/pagination/PaginationFirst.vue | 22 +++++++
 .../default/ui/pagination/PaginationLast.vue  | 22 +++++++
 .../default/ui/pagination/PaginationNext.vue  | 22 +++++++
 .../default/ui/pagination/PaginationPrev.vue  | 22 +++++++
 .../registry/default/ui/pagination/index.ts   | 10 ++++
 .../new-york/example/PaginationDemo.vue       | 37 ++++++++++++
 .../ui/pagination/PaginationEllipsis.vue      | 22 +++++++
 .../ui/pagination/PaginationFirst.vue         | 22 +++++++
 .../new-york/ui/pagination/PaginationLast.vue | 22 +++++++
 .../new-york/ui/pagination/PaginationNext.vue | 22 +++++++
 .../new-york/ui/pagination/PaginationPrev.vue | 22 +++++++
 .../registry/new-york/ui/pagination/index.ts  | 10 ++++
 16 files changed, 377 insertions(+)
 create mode 100644 apps/www/src/content/docs/components/pagination.md
 create mode 100644 apps/www/src/lib/registry/default/example/PaginationDemo.vue
 create mode 100644 apps/www/src/lib/registry/default/ui/pagination/PaginationEllipsis.vue
 create mode 100644 apps/www/src/lib/registry/default/ui/pagination/PaginationFirst.vue
 create mode 100644 apps/www/src/lib/registry/default/ui/pagination/PaginationLast.vue
 create mode 100644 apps/www/src/lib/registry/default/ui/pagination/PaginationNext.vue
 create mode 100644 apps/www/src/lib/registry/default/ui/pagination/PaginationPrev.vue
 create mode 100644 apps/www/src/lib/registry/default/ui/pagination/index.ts
 create mode 100644 apps/www/src/lib/registry/new-york/example/PaginationDemo.vue
 create mode 100644 apps/www/src/lib/registry/new-york/ui/pagination/PaginationEllipsis.vue
 create mode 100644 apps/www/src/lib/registry/new-york/ui/pagination/PaginationFirst.vue
 create mode 100644 apps/www/src/lib/registry/new-york/ui/pagination/PaginationLast.vue
 create mode 100644 apps/www/src/lib/registry/new-york/ui/pagination/PaginationNext.vue
 create mode 100644 apps/www/src/lib/registry/new-york/ui/pagination/PaginationPrev.vue
 create mode 100644 apps/www/src/lib/registry/new-york/ui/pagination/index.ts

diff --git a/apps/www/.vitepress/theme/config/docs.ts b/apps/www/.vitepress/theme/config/docs.ts
index 5aba6230..727c003b 100644
--- a/apps/www/.vitepress/theme/config/docs.ts
+++ b/apps/www/.vitepress/theme/config/docs.ts
@@ -244,6 +244,12 @@ export const docsConfig: DocsConfig = {
           href: '/docs/components/navigation-menu',
           items: [],
         },
+        {
+          title: 'Pagination',
+          href: '/docs/components/pagination',
+          label: 'New',
+          items: [],
+        },
         {
           title: 'Popover',
           href: '/docs/components/popover',
diff --git a/apps/www/src/content/docs/components/pagination.md b/apps/www/src/content/docs/components/pagination.md
new file mode 100644
index 00000000..16d1429f
--- /dev/null
+++ b/apps/www/src/content/docs/components/pagination.md
@@ -0,0 +1,57 @@
+---
+title: Pagination
+description: Displays data in paged format and provides navigation between pages.
+source: apps/www/src/lib/registry/default/ui/pagination
+primitive: https://www.radix-vue.com/components/pagination.html
+---
+
+<ComponentPreview name="PaginationDemo" /> 
+
+## Installation
+
+ 
+```bash
+npx shadcn-vue@latest add pagination
+```
+  
+## Usage
+
+```vue
+<script setup lang="ts">
+import {
+  Pagination,
+  PaginationEllipsis,
+  PaginationFirst,
+  PaginationLast,
+  PaginationList,
+  PaginationListItem,
+  PaginationNext,
+  PaginationPrev,
+} from '@/components/ui/pagination'
+
+import {
+  Button,
+} from '@/components/ui/button'
+</script>
+
+<template>
+  <Pagination v-slot="{ page }" :total="100" :sibling-count="1" show-edges :default-page="2">
+    <PaginationList v-slot="{ items }" class="flex items-center gap-1">
+      <PaginationFirst />
+      <PaginationPrev />
+
+      <template v-for="(item, index) in items">
+        <PaginationListItem v-if="item.type === 'page'" :key="index" :value="item.value" as-child>
+          <Button class="w-10 h-10 p-0" :variant="item.value === page ? 'default' : 'outline'">
+            {{ item.value }}
+          </Button>
+        </PaginationListItem>
+        <PaginationEllipsis v-else :key="item.type" :index="index" />
+      </template>
+
+      <PaginationNext />
+      <PaginationLast />
+    </PaginationList>
+  </Pagination>
+</template>
+```
diff --git a/apps/www/src/lib/registry/default/example/PaginationDemo.vue b/apps/www/src/lib/registry/default/example/PaginationDemo.vue
new file mode 100644
index 00000000..be12cb91
--- /dev/null
+++ b/apps/www/src/lib/registry/default/example/PaginationDemo.vue
@@ -0,0 +1,37 @@
+<script setup lang="ts">
+import {
+  Pagination,
+  PaginationEllipsis,
+  PaginationFirst,
+  PaginationLast,
+  PaginationList,
+  PaginationListItem,
+  PaginationNext,
+  PaginationPrev,
+} from '@/lib/registry/default/ui/pagination'
+
+import {
+  Button,
+} from '@/lib/registry/default/ui/button'
+</script>
+
+<template>
+  <Pagination v-slot="{ page }" :total="100" :sibling-count="1" show-edges :default-page="2">
+    <PaginationList v-slot="{ items }" class="flex items-center gap-1">
+      <PaginationFirst />
+      <PaginationPrev />
+
+      <template v-for="(item, index) in items">
+        <PaginationListItem v-if="item.type === 'page'" :key="index" :value="item.value" as-child>
+          <Button class="w-10 h-10 p-0" :variant="item.value === page ? 'default' : 'outline'">
+            {{ item.value }}
+          </Button>
+        </PaginationListItem>
+        <PaginationEllipsis v-else :key="item.type" :index="index" />
+      </template>
+
+      <PaginationNext />
+      <PaginationLast />
+    </PaginationList>
+  </Pagination>
+</template>
diff --git a/apps/www/src/lib/registry/default/ui/pagination/PaginationEllipsis.vue b/apps/www/src/lib/registry/default/ui/pagination/PaginationEllipsis.vue
new file mode 100644
index 00000000..6d0174a7
--- /dev/null
+++ b/apps/www/src/lib/registry/default/ui/pagination/PaginationEllipsis.vue
@@ -0,0 +1,22 @@
+<script setup lang="ts">
+import { useAttrs } from 'vue'
+import { PaginationEllipsis, type PaginationEllipsisProps, useForwardProps } from 'radix-vue'
+import { MoreHorizontal } from 'lucide-vue-next'
+import { cn } from '@/lib/utils'
+
+defineOptions({
+  inheritAttrs: false,
+})
+
+const props = defineProps<PaginationEllipsisProps>()
+const forwarded = useForwardProps(props)
+const { class: className, ...rest } = useAttrs()
+</script>
+
+<template>
+  <PaginationEllipsis :class="cn('w-9 h-9 flex items-center justify-center', className ?? '')" v-bind="{ ...forwarded, ...rest }">
+    <slot>
+      <MoreHorizontal />
+    </slot>
+  </PaginationEllipsis>
+</template>
diff --git a/apps/www/src/lib/registry/default/ui/pagination/PaginationFirst.vue b/apps/www/src/lib/registry/default/ui/pagination/PaginationFirst.vue
new file mode 100644
index 00000000..8820a747
--- /dev/null
+++ b/apps/www/src/lib/registry/default/ui/pagination/PaginationFirst.vue
@@ -0,0 +1,22 @@
+<script setup lang="ts">
+import { PaginationFirst, type PaginationFirstProps, useForwardProps } from 'radix-vue'
+import { ChevronsLeft } from 'lucide-vue-next'
+import {
+  Button,
+} from '@/lib/registry/default/ui/button'
+
+const props = withDefaults(defineProps<PaginationFirstProps>(), {
+  asChild: true,
+})
+const forwarded = useForwardProps(props)
+</script>
+
+<template>
+  <PaginationFirst v-bind="forwarded">
+    <Button class="w-10 h-10 p-0" variant="outline">
+      <slot>
+        <ChevronsLeft class="h-4 w-4" />
+      </slot>
+    </Button>
+  </PaginationFirst>
+</template>
diff --git a/apps/www/src/lib/registry/default/ui/pagination/PaginationLast.vue b/apps/www/src/lib/registry/default/ui/pagination/PaginationLast.vue
new file mode 100644
index 00000000..c92ad34b
--- /dev/null
+++ b/apps/www/src/lib/registry/default/ui/pagination/PaginationLast.vue
@@ -0,0 +1,22 @@
+<script setup lang="ts">
+import { PaginationLast, type PaginationLastProps, useForwardProps } from 'radix-vue'
+import { ChevronsRight } from 'lucide-vue-next'
+import {
+  Button,
+} from '@/lib/registry/default/ui/button'
+
+const props = withDefaults(defineProps<PaginationLastProps>(), {
+  asChild: true,
+})
+const forwarded = useForwardProps(props)
+</script>
+
+<template>
+  <PaginationLast v-bind="forwarded">
+    <Button class="w-10 h-10 p-0" variant="outline">
+      <slot>
+        <ChevronsRight class="h-4 w-4" />
+      </slot>
+    </Button>
+  </PaginationLast>
+</template>
diff --git a/apps/www/src/lib/registry/default/ui/pagination/PaginationNext.vue b/apps/www/src/lib/registry/default/ui/pagination/PaginationNext.vue
new file mode 100644
index 00000000..c58986d9
--- /dev/null
+++ b/apps/www/src/lib/registry/default/ui/pagination/PaginationNext.vue
@@ -0,0 +1,22 @@
+<script setup lang="ts">
+import { PaginationNext, type PaginationNextProps, useForwardProps } from 'radix-vue'
+import { ChevronRight } from 'lucide-vue-next'
+import {
+  Button,
+} from '@/lib/registry/default/ui/button'
+
+const props = withDefaults(defineProps<PaginationNextProps>(), {
+  asChild: true,
+})
+const forwarded = useForwardProps(props)
+</script>
+
+<template>
+  <PaginationNext v-bind="forwarded">
+    <Button class="w-10 h-10 p-0" variant="outline">
+      <slot>
+        <ChevronRight class="h-4 w-4" />
+      </slot>
+    </Button>
+  </PaginationNext>
+</template>
diff --git a/apps/www/src/lib/registry/default/ui/pagination/PaginationPrev.vue b/apps/www/src/lib/registry/default/ui/pagination/PaginationPrev.vue
new file mode 100644
index 00000000..018a17f8
--- /dev/null
+++ b/apps/www/src/lib/registry/default/ui/pagination/PaginationPrev.vue
@@ -0,0 +1,22 @@
+<script setup lang="ts">
+import { PaginationPrev, type PaginationPrevProps, useForwardProps } from 'radix-vue'
+import { ChevronLeft } from 'lucide-vue-next'
+import {
+  Button,
+} from '@/lib/registry/default/ui/button'
+
+const props = withDefaults(defineProps<PaginationPrevProps>(), {
+  asChild: true,
+})
+const forwarded = useForwardProps(props)
+</script>
+
+<template>
+  <PaginationPrev v-bind="forwarded">
+    <Button class="w-10 h-10 p-0" variant="outline">
+      <slot>
+        <ChevronLeft class="h-4 w-4" />
+      </slot>
+    </Button>
+  </PaginationPrev>
+</template>
diff --git a/apps/www/src/lib/registry/default/ui/pagination/index.ts b/apps/www/src/lib/registry/default/ui/pagination/index.ts
new file mode 100644
index 00000000..183ecbe9
--- /dev/null
+++ b/apps/www/src/lib/registry/default/ui/pagination/index.ts
@@ -0,0 +1,10 @@
+export {
+  PaginationRoot as Pagination,
+  PaginationList,
+  PaginationListItem,
+} from 'radix-vue'
+export { default as PaginationEllipsis } from './PaginationEllipsis.vue'
+export { default as PaginationFirst } from './PaginationFirst.vue'
+export { default as PaginationLast } from './PaginationLast.vue'
+export { default as PaginationNext } from './PaginationNext.vue'
+export { default as PaginationPrev } from './PaginationPrev.vue'
diff --git a/apps/www/src/lib/registry/new-york/example/PaginationDemo.vue b/apps/www/src/lib/registry/new-york/example/PaginationDemo.vue
new file mode 100644
index 00000000..a87c1a0e
--- /dev/null
+++ b/apps/www/src/lib/registry/new-york/example/PaginationDemo.vue
@@ -0,0 +1,37 @@
+<script setup lang="ts">
+import {
+  Pagination,
+  PaginationEllipsis,
+  PaginationFirst,
+  PaginationLast,
+  PaginationList,
+  PaginationListItem,
+  PaginationNext,
+  PaginationPrev,
+} from '@/lib/registry/new-york/ui/pagination'
+
+import {
+  Button,
+} from '@/lib/registry/new-york/ui/button'
+</script>
+
+<template>
+  <Pagination v-slot="{ page }" :total="100" :sibling-count="1" show-edges :default-page="2">
+    <PaginationList v-slot="{ items }" class="flex items-center gap-1">
+      <PaginationFirst />
+      <PaginationPrev />
+
+      <template v-for="(item, index) in items">
+        <PaginationListItem v-if="item.type === 'page'" :key="index" :value="item.value" as-child>
+          <Button class="w-9 h-9 p-0" :variant="item.value === page ? 'default' : 'outline'">
+            {{ item.value }}
+          </Button>
+        </PaginationListItem>
+        <PaginationEllipsis v-else :key="item.type" :index="index" />
+      </template>
+
+      <PaginationNext />
+      <PaginationLast />
+    </PaginationList>
+  </Pagination>
+</template>
diff --git a/apps/www/src/lib/registry/new-york/ui/pagination/PaginationEllipsis.vue b/apps/www/src/lib/registry/new-york/ui/pagination/PaginationEllipsis.vue
new file mode 100644
index 00000000..cc5a6eed
--- /dev/null
+++ b/apps/www/src/lib/registry/new-york/ui/pagination/PaginationEllipsis.vue
@@ -0,0 +1,22 @@
+<script setup lang="ts">
+import { useAttrs } from 'vue'
+import { PaginationEllipsis, type PaginationEllipsisProps, useForwardProps } from 'radix-vue'
+import { DotsHorizontalIcon } from '@radix-icons/vue'
+import { cn } from '@/lib/utils'
+
+defineOptions({
+  inheritAttrs: false,
+})
+
+const props = defineProps<PaginationEllipsisProps>()
+const forwarded = useForwardProps(props)
+const { class: className, ...rest } = useAttrs()
+</script>
+
+<template>
+  <PaginationEllipsis :class="cn('w-9 h-9 flex items-center justify-center', className ?? '')" v-bind="{ ...forwarded, ...rest }">
+    <slot>
+      <DotsHorizontalIcon />
+    </slot>
+  </PaginationEllipsis>
+</template>
diff --git a/apps/www/src/lib/registry/new-york/ui/pagination/PaginationFirst.vue b/apps/www/src/lib/registry/new-york/ui/pagination/PaginationFirst.vue
new file mode 100644
index 00000000..03e489c7
--- /dev/null
+++ b/apps/www/src/lib/registry/new-york/ui/pagination/PaginationFirst.vue
@@ -0,0 +1,22 @@
+<script setup lang="ts">
+import { PaginationFirst, type PaginationFirstProps, useForwardProps } from 'radix-vue'
+import { DoubleArrowLeftIcon } from '@radix-icons/vue'
+import {
+  Button,
+} from '@/lib/registry/new-york/ui/button'
+
+const props = withDefaults(defineProps<PaginationFirstProps>(), {
+  asChild: true,
+})
+const forwarded = useForwardProps(props)
+</script>
+
+<template>
+  <PaginationFirst v-bind="forwarded">
+    <Button class="w-9 h-9 p-0" variant="outline">
+      <slot>
+        <DoubleArrowLeftIcon />
+      </slot>
+    </Button>
+  </PaginationFirst>
+</template>
diff --git a/apps/www/src/lib/registry/new-york/ui/pagination/PaginationLast.vue b/apps/www/src/lib/registry/new-york/ui/pagination/PaginationLast.vue
new file mode 100644
index 00000000..de2aff1d
--- /dev/null
+++ b/apps/www/src/lib/registry/new-york/ui/pagination/PaginationLast.vue
@@ -0,0 +1,22 @@
+<script setup lang="ts">
+import { PaginationLast, type PaginationLastProps, useForwardProps } from 'radix-vue'
+import { DoubleArrowRightIcon } from '@radix-icons/vue'
+import {
+  Button,
+} from '@/lib/registry/new-york/ui/button'
+
+const props = withDefaults(defineProps<PaginationLastProps>(), {
+  asChild: true,
+})
+const forwarded = useForwardProps(props)
+</script>
+
+<template>
+  <PaginationLast v-bind="forwarded">
+    <Button class="w-9 h-9 p-0" variant="outline">
+      <slot>
+        <DoubleArrowRightIcon />
+      </slot>
+    </Button>
+  </PaginationLast>
+</template>
diff --git a/apps/www/src/lib/registry/new-york/ui/pagination/PaginationNext.vue b/apps/www/src/lib/registry/new-york/ui/pagination/PaginationNext.vue
new file mode 100644
index 00000000..897e47b5
--- /dev/null
+++ b/apps/www/src/lib/registry/new-york/ui/pagination/PaginationNext.vue
@@ -0,0 +1,22 @@
+<script setup lang="ts">
+import { PaginationNext, type PaginationNextProps, useForwardProps } from 'radix-vue'
+import { ChevronRightIcon } from '@radix-icons/vue'
+import {
+  Button,
+} from '@/lib/registry/new-york/ui/button'
+
+const props = withDefaults(defineProps<PaginationNextProps>(), {
+  asChild: true,
+})
+const forwarded = useForwardProps(props)
+</script>
+
+<template>
+  <PaginationNext v-bind="forwarded">
+    <Button class="w-9 h-9 p-0" variant="outline">
+      <slot>
+        <ChevronRightIcon />
+      </slot>
+    </Button>
+  </PaginationNext>
+</template>
diff --git a/apps/www/src/lib/registry/new-york/ui/pagination/PaginationPrev.vue b/apps/www/src/lib/registry/new-york/ui/pagination/PaginationPrev.vue
new file mode 100644
index 00000000..12eb8be0
--- /dev/null
+++ b/apps/www/src/lib/registry/new-york/ui/pagination/PaginationPrev.vue
@@ -0,0 +1,22 @@
+<script setup lang="ts">
+import { PaginationPrev, type PaginationPrevProps, useForwardProps } from 'radix-vue'
+import { ChevronLeftIcon } from '@radix-icons/vue'
+import {
+  Button,
+} from '@/lib/registry/new-york/ui/button'
+
+const props = withDefaults(defineProps<PaginationPrevProps>(), {
+  asChild: true,
+})
+const forwarded = useForwardProps(props)
+</script>
+
+<template>
+  <PaginationPrev v-bind="forwarded">
+    <Button class="w-9 h-9 p-0" variant="outline">
+      <slot>
+        <ChevronLeftIcon />
+      </slot>
+    </Button>
+  </PaginationPrev>
+</template>
diff --git a/apps/www/src/lib/registry/new-york/ui/pagination/index.ts b/apps/www/src/lib/registry/new-york/ui/pagination/index.ts
new file mode 100644
index 00000000..183ecbe9
--- /dev/null
+++ b/apps/www/src/lib/registry/new-york/ui/pagination/index.ts
@@ -0,0 +1,10 @@
+export {
+  PaginationRoot as Pagination,
+  PaginationList,
+  PaginationListItem,
+} from 'radix-vue'
+export { default as PaginationEllipsis } from './PaginationEllipsis.vue'
+export { default as PaginationFirst } from './PaginationFirst.vue'
+export { default as PaginationLast } from './PaginationLast.vue'
+export { default as PaginationNext } from './PaginationNext.vue'
+export { default as PaginationPrev } from './PaginationPrev.vue'