Niklas/shadcn-vue
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat: add pagination

Browse Source 
feat: update
This commit is contained in:
sadeghbarati 2023-10-08 15:31:38 +03:30
parent 137ecb8d01
commit 0c84b084e4
16 changed files with 377 additions and 0 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

6
apps/www/.vitepress/theme/config/docs.ts
View File

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

57
apps/www/src/content/docs/components/pagination.md Normal file
View File

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

37
apps/www/src/lib/registry/default/example/PaginationDemo.vue Normal file
View File

@ -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>

22
apps/www/src/lib/registry/default/ui/pagination/PaginationEllipsis.vue Normal file
View File

@ -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>

22
apps/www/src/lib/registry/default/ui/pagination/PaginationFirst.vue Normal file
View File

@ -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>

22
apps/www/src/lib/registry/default/ui/pagination/PaginationLast.vue Normal file
View File

@ -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>

22
apps/www/src/lib/registry/default/ui/pagination/PaginationNext.vue Normal file
View File

@ -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>

22
apps/www/src/lib/registry/default/ui/pagination/PaginationPrev.vue Normal file
View File

@ -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>

10
apps/www/src/lib/registry/default/ui/pagination/index.ts Normal file
View File

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

37
apps/www/src/lib/registry/new-york/example/PaginationDemo.vue Normal file
View File

@ -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>

22
apps/www/src/lib/registry/new-york/ui/pagination/PaginationEllipsis.vue Normal file
View File

@ -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>

22
apps/www/src/lib/registry/new-york/ui/pagination/PaginationFirst.vue Normal file
View File

@ -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>

22
apps/www/src/lib/registry/new-york/ui/pagination/PaginationLast.vue Normal file
View File

@ -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>

22
apps/www/src/lib/registry/new-york/ui/pagination/PaginationNext.vue Normal file
View File

@ -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>

22
apps/www/src/lib/registry/new-york/ui/pagination/PaginationPrev.vue Normal file
View File

@ -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>

10
apps/www/src/lib/registry/new-york/ui/pagination/index.ts Normal file
View File

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