-
Notifications
You must be signed in to change notification settings - Fork 6.9k
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
feat: add pagination component (#4522)
* feat: add pagination component * chore: update
- Loading branch information
Showing
33 changed files
with
364 additions
and
55 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
2 changes: 2 additions & 0 deletions
2
packages/@core/ui-kit/shadcn-ui/src/components/pagination/index.ts
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,2 @@ | ||
| export type { PaginationProps as VbenPaginationProps } from './pagination'; | ||
| export { default as VbenPagination } from './pagination.vue'; |
41 changes: 41 additions & 0 deletions
41
packages/@core/ui-kit/shadcn-ui/src/components/pagination/pagination.ts
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,41 @@ | ||
| export interface PaginationProps { | ||
| /** | ||
| * 是否禁用 | ||
| */ | ||
| disabled?: boolean; | ||
| /** | ||
| * 每页记录数选项 | ||
| */ | ||
| pageSizeOptions?: number[]; | ||
| /** | ||
| * 当 时true，始终显示第一页、最后一页和省略号 | ||
| */ | ||
| showEdges?: boolean; | ||
| /** | ||
| * 显示当前页选择下拉框 | ||
| */ | ||
| showRowsPerPage?: boolean; | ||
| /** | ||
| * 显示总条数文本 | ||
| */ | ||
| showTotalText?: boolean; | ||
| /** | ||
| * 当前页面周围应显示的兄弟页面数量 | ||
| */ | ||
| siblingCount?: number; | ||
| /** | ||
| * 组件尺寸 | ||
| */ | ||
| size?: 'default' | 'large' | 'small'; | ||
|
|
||
| /** | ||
| * 总条数 | ||
| */ | ||
| total?: number; | ||
| } | ||
|
|
||
| export const SIZE_CLASS_MAP = { | ||
| default: 'size-8', | ||
| large: 'size-9', | ||
| small: 'size-7', | ||
| }; |
111 changes: 111 additions & 0 deletions
111
packages/@core/ui-kit/shadcn-ui/src/components/pagination/pagination.vue
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,111 @@ | ||
| <script setup lang="ts"> | ||
| import { computed } from 'vue'; | ||
| import { cn } from '@vben-core/shared/utils'; | ||
| import { Button } from '../ui/button'; | ||
| import { | ||
| Pagination, | ||
| PaginationEllipsis, | ||
| PaginationFirst, | ||
| PaginationLast, | ||
| PaginationList, | ||
| PaginationListItem, | ||
| PaginationNext, | ||
| PaginationPrev, | ||
| } from '../ui/pagination'; | ||
| import { | ||
| Select, | ||
| SelectContent, | ||
| SelectItem, | ||
| SelectTrigger, | ||
| SelectValue, | ||
| } from '../ui/select'; | ||
| import { type PaginationProps, SIZE_CLASS_MAP } from './pagination'; | ||
| interface Props extends PaginationProps {} | ||
| const { | ||
| disabled = false, | ||
| pageSizeOptions = [10, 20, 30, 50, 100, 200], | ||
| showEdges = true, | ||
| showRowsPerPage = true, | ||
| showTotalText = true, | ||
| siblingCount = 1, | ||
| size = 'default', | ||
| total = 500, | ||
| } = defineProps<Props>(); | ||
| const currentPage = defineModel<number>('currentPage', { default: 1 }); | ||
| const itemPerPage = defineModel<number>('itemPerPage', { default: 20 }); | ||
| const itemSize = computed(() => { | ||
| return SIZE_CLASS_MAP[size]; | ||
| }); | ||
| const options = computed(() => { | ||
| return pageSizeOptions.map((item) => ({ | ||
| label: `${item} 条/页`, | ||
| value: `${item}`, | ||
| })); | ||
| }); | ||
| function handleUpdateModelValue(value: string) { | ||
| itemPerPage.value = Number(value); | ||
| } | ||
| </script> | ||
|
|
||
| <template> | ||
| <Pagination | ||
| v-model:page="currentPage" | ||
| :disabled="disabled" | ||
| :items-per-page="itemPerPage" | ||
| :show-edges="showEdges" | ||
| :sibling-count="siblingCount" | ||
| :total="total" | ||
| > | ||
| <PaginationList | ||
| v-slot="{ items }" | ||
| class="flex w-full items-center justify-end gap-1" | ||
| > | ||
| <span v-if="showTotalText" class="mr-2">共 {{ total }} 条</span> | ||
|
|
||
| <Select | ||
| v-if="showRowsPerPage" | ||
| :model-value="`${itemPerPage}`" | ||
| @update:model-value="handleUpdateModelValue" | ||
| > | ||
| <SelectTrigger class="w-30 mr-auto h-8"> | ||
| <SelectValue /> | ||
| </SelectTrigger> | ||
| <SelectContent> | ||
| <template v-for="item in options" :key="item.value"> | ||
| <SelectItem :value="item.value"> {{ item.label }} </SelectItem> | ||
| </template> | ||
| </SelectContent> | ||
| </Select> | ||
|
|
||
| <PaginationFirst :class="cn('size-8', itemSize)" /> | ||
| <PaginationPrev :class="cn('size-8', itemSize)" /> | ||
| <template v-for="(item, index) in items"> | ||
| <PaginationListItem | ||
| v-if="item.type === 'page'" | ||
| :key="index" | ||
| :value="item.value" | ||
| as-child | ||
| > | ||
| <Button | ||
| :class="cn('size-8 p-0 shadow-none', itemSize)" | ||
| :variant="item.value === currentPage ? 'default' : 'outline'" | ||
| > | ||
| {{ item.value }} | ||
| </Button> | ||
| </PaginationListItem> | ||
| <PaginationEllipsis v-else :key="item.type" :index="index" /> | ||
| </template> | ||
|
|
||
| <PaginationNext :class="cn('size-8', itemSize)" /> | ||
| <PaginationLast :class="cn('size-8', itemSize)" /> | ||
| </PaginationList> | ||
| </Pagination> | ||
| </template> |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Oops, something went wrong.