feat: add pagination (#109)

feat: update

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',

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>
+```

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>

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>

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>

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>

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>

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>

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'

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>

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>

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>

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>

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>

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>

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'