arthur/ui
1
0
Fork 0
mirror of https://github.com/ArthurDanjou/ui.git synced 2026-01-23 08:20:39 +01:00
Code Issues Packages Projects Releases Wiki Activity

feat(Pagination): new component (#257)

Browse Source 
Co-authored-by: Benjamin Canac <canacb1@gmail.com>
Co-authored-by: Haytham A. Salama <haythamasalama@gmail.com>
This commit is contained in:
Sylvain Marroufin
2023-06-09 18:12:40 +02:00
committed by GitHub
parent f7a34c8fee
commit f0b24ba25d
11 changed files with 625 additions and 13 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
docs/components/content/ComponentCard.vue
View File

@@ -121,7 +121,7 @@ const meta = await fetchComponentMeta(name)
// eslint-disable-next-line vue/no-dupe-keys
const ui = computed(() => ({ ...appConfig.ui[camelName], ...props.ui }))
const fullProps = computed(() => ({ ...props.baseProps, ...componentProps }))
const fullProps = computed(() => ({ ...baseProps, ...componentProps }))
const vModel = computed({
get: () => baseProps.modelValue,
set: (value) => {

8
docs/components/content/examples/PaginationExampleBasic.vue Normal file
View File

@@ -0,0 +1,8 @@
<script setup>
const page = ref(1)
const items = ref(Array(55))
</script>
<template>
<UPagination v-model="page" :page-count="5" :total="items.length" />
</template>

20
docs/components/content/examples/PaginationExamplePrevNextSlots.vue Normal file
View File

@@ -0,0 +1,20 @@
<script setup>
const page = ref(1)
const items = ref(Array(55))
</script>
<template>
<UPagination v-model="page" :total="items.length" :ui="{ rounded: 'first-of-type:rounded-l-md last-of-type:rounded-r-md' }">
<template #prev="{ onClick }">
<UTooltip text="Previous page">
<UButton icon="i-heroicons-arrow-small-left-20-solid" color="primary" :ui="{ rounded: 'rounded-full' }" class="mr-2" @click="onClick" />
</UTooltip>
</template>
<template #next="{ onClick }">
<UTooltip text="Next page">
<UButton icon="i-heroicons-arrow-small-right-20-solid" color="primary" :ui="{ rounded: 'rounded-full' }" class="ml-2" @click="onClick" />
</UTooltip>
</template>
</UPagination>
</template>

98
docs/components/content/examples/TableExamplePaginable.vue Normal file
View File

@@ -0,0 +1,98 @@
<script setup>
const people = [{
id: 1,
name: 'Lindsay Walton',
title: 'Front-end Developer',
email: 'lindsay.walton@example.com',
role: 'Member'
}, {
id: 2,
name: 'Courtney Henry',
title: 'Designer',
email: 'courtney.henry@example.com',
role: 'Admin'
}, {
id: 3,
name: 'Tom Cook',
title: 'Director of Product',
email: 'tom.cook@example.com',
role: 'Member'
}, {
id: 4,
name: 'Whitney Francis',
title: 'Copywriter',
email: 'whitney.francis@example.com',
role: 'Admin'
}, {
id: 5,
name: 'Leonard Krasner',
title: 'Senior Designer',
email: 'leonard.krasner@example.com',
role: 'Owner'
}, {
id: 6,
name: 'Floyd Miles',
title: 'Principal Designer',
email: 'floyd.miles@example.com',
role: 'Member'
}, {
id: 7,
name: 'Emily Selman',
title: 'VP, User Experience',
email: '',
role: 'Admin'
}, {
id: 8,
name: 'Kristin Watson',
title: 'VP, Human Resources',
email: '',
role: 'Member'
}, {
id: 9,
name: 'Emma Watson',
title: 'Front-end Developer',
email: '',
role: 'Member'
}, {
id: 10,
name: 'John Doe',
title: 'Designer',
email: '',
role: 'Admin'
}, {
id: 11,
name: 'Jane Doe',
title: 'Director of Product',
email: '',
role: 'Member'
}, {
id: 12,
name: 'John Smith',
title: 'Copywriter',
email: '',
role: 'Admin'
}, {
id: 13,
name: 'Jane Smith',
title: 'Senior Designer',
email: '',
role: 'Owner'
}]
const page = ref(1)
const pageCount = 5
const rows = computed(() => {
return people.slice((page.value - 1) * pageCount, (page.value) * pageCount)
})
</script>
<template>
<div>
<UTable :rows="rows" />
<div class="flex justify-end px-3 py-3.5 border-t border-gray-200 dark:border-gray-700">
<UPagination v-model="page" :page-count="pageCount" :total="people.length" />
</div>
</div>
</template>

21
docs/components/content/themes/PaginationThemeRounded.vue Normal file
View File

@@ -0,0 +1,21 @@
<script setup>
const page = ref(1)
const items = ref(Array(55))
</script>
<template>
<UPagination
v-model="page"
:total="items.length"
:ui="{
wrapper: 'flex items-center gap-1',
rounded: 'rounded-full min-w-[32px] justify-center'
}"
:prev-button="null"
:next-button="{
icon: 'i-heroicons-arrow-small-right-20-solid',
color: 'primary',
variant: 'outline'
}"
/>
</template>

35
docs/content/4.data/1.table.md
View File

@@ -366,6 +366,41 @@ const filteredRows = computed(() => {
```
::
### Paginable
You can easily use the [Pagination](/navigation/pagination) component to paginate the rows.
::component-example
---
padding: false
---
#default
:table-example-paginable{class="w-full"}
#code
```vue
<script setup>
const people = [...]
const page = ref(1)
const pageCount = 5
const rows = computed(() => {
return people.slice((page.value - 1) * pageCount, (page.value) * pageCount)
})
</script>
<template>
<div>
<UTable :rows="rows" />
<UPagination v-model="page" :page-count="pageCount" :total="people.length" />
</div>
</template>
```
::
### Empty
Use the `empty-state` prop to display a message when there are no results.

6
docs/content/5.navigation/1.vertical-navigation.md
View File

@@ -39,11 +39,9 @@ const links = [{
```
::
## Themes
## Theme
Our theming system provides a lot of flexibility to customize the component. Here is some examples of what you can do.
### Tailwind
Our theming system provides a lot of flexibility to customize the component. Here is an example of what you can do.
::component-example
#default

186
docs/content/5.navigation/3.pagination.md Normal file
View File

@@ -0,0 +1,186 @@
---
github: true
description: Add a pagination to handle pages.
---
## Usage
Use a `v-model` to get a reactive page alongside a `total` which represents the total of items. You can also use the `page-count` prop to define the number of items per page which defaults to `10`.
::component-example
#default
:pagination-example-basic
#code
```vue
<script setup>
const page = ref(1)
const items = ref(Array(55))
</script>
<template>
<UPagination v-model="page" :page-count="5" :total="items.length" />
</template>
```
::
### Max
Use the `max` prop to set a maximum of displayed pages. Defaults to `7`, being the minimum.
::component-card
---
baseProps:
modelValue: 1
props:
max: 5
pageCount: 5
total: 100
excludedProps:
- pageCount
- total
---
::
### Size
Use the `size` prop to change the size of the buttons.
::component-card
---
baseProps:
modelValue: 1
total: 100
props:
size: 'sm'
ui:
size:
2xs: true
xs: true
sm: true
md: true
lg: true
xl: true
---
::
### Active / Inactive
Use the `active-button` and `inactive-button` props to customize the active and inactive buttons of the Pagination.
::component-card
---
baseProps:
modelValue: 1
total: 100
props:
activeButton:
variant: 'outline'
inactiveButton:
color: 'gray'
excludedProps:
- activeButton
- inactiveButton
---
::
### Prev / Next
Use the `prev-button` and `next-button` props to customize the prev and next buttons of the Pagination.
::component-card
---
baseProps:
modelValue: 1
total: 100
props:
prevButton:
icon: 'i-heroicons-arrow-small-left-20-solid'
label: Prev
color: 'gray'
nextButton:
icon: 'i-heroicons-arrow-small-right-20-solid'
trailing: true
label: Next
color: 'gray'
excludedProps:
- prevButton
- nextButton
---
::
## Theme
Our theming system provides a lot of flexibility to customize the component. Here is an example of what you can do.
::component-example
#default
:pagination-theme-rounded
#code
```vue
<script setup>
const page = ref(1)
const items = ref(Array(55))
</script>
<template>
<UPagination
v-model="page"
:total="items.length"
:ui="{
wrapper: 'flex items-center gap-1',
rounded: 'rounded-full min-w-[32px] justify-center'
}"
:prev-button="null"
:next-button="{
icon: 'i-heroicons-arrow-small-right-20-solid',
color: 'primary',
variant: 'outline'
}"
/>
</template>
```
::
## Slots
### `prev` / `next`
Use the `#prev` and `#next` slots to set the content of the previous and next buttons.
::component-example
#default
:pagination-example-prev-next-slots
#code
```vue
<script setup>
const page = ref(1);
const items = ref(Array(55));
</script>
<template>
<UPagination v-model="page" :total="items.length" :ui="{ rounded: 'first-of-type:rounded-l-md last-of-type:rounded-r-md' }">
<template #prev="{ onClick }">
<UTooltip text="Previous page">
<UButton icon="i-heroicons-arrow-small-left-20-solid" color="primary" :ui="{ rounded: 'rounded-full' }" class="mr-2" @click="onClick" />
</UTooltip>
</template>
<template #next="{ onClick }">
<UTooltip text="Next page">
<UButton icon="i-heroicons-arrow-small-right-20-solid" color="primary" :ui="{ rounded: 'rounded-full' }" class="ml-2" @click="onClick" />
</UTooltip>
</template>
</UPagination>
</template>
```
::
## Props
:component-props
## Preset
:component-preset