jaro/flowbite-vue
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Pagination component improvements (#198)

Browse Source 
* Adds page change event (#189)

Adds first and last pagination items

Co-authored-by: gassio <gassiogi@gmail.com>

* feat: Pagination component refactoring

---------

Co-authored-by: gassio <gassioglou@gmail.com>
Co-authored-by: gassio <gassiogi@gmail.com>
This commit is contained in:
Ilya Artamonov
2023-09-21 13:38:23 +03:00
committed by GitHub
parent 7652d98219
commit 1370f1c776
9 changed files with 314 additions and 122 deletions
Download Patch File Download Diff File Expand all files Collapse all files

126
docs/components/pagination.md
View File

@@ -5,10 +5,16 @@ import PaginationTableExample from './pagination/examples/PaginationTableExample
import PaginationWithIconsExample from './pagination/examples/PaginationWithIconsExample.vue';
import PaginationWithCustomTextExample from './pagination/examples/PaginationWithCustomTextExample.vue';
import PaginationWithCustomSlice from './pagination/examples/PaginationWithCustomSlice.vue';
import PaginationSlotsExample from './pagination/examples/PaginationSlotsExample.vue';
</script>
# Vue Pagination - Flowbite
#### Use the Tailwind CSS pagination element to indicate a series of content across various pages based on multiple styles and sizes
The pagination component can be used to navigate across a series of content and data sets for various pages such as blog posts, products, and more. You can use multiple variants of this component with or without icons and even for paginating table data entries.
## Default pagination
Use the following list of pagination items based on two sizes powered by Tailwind CSS utility classes to indicate a series of content for your website.
<PaginationExample />
```vue
<script setup>
@@ -18,10 +24,32 @@ import { ref } from 'vue'
const currentPage = ref(1)
</script>
<template>
<Pagination v-model="currentPage" :total-pages="100"></Pagination>
<Pagination v-model="currentPage" :total-items="100"></Pagination>
<Pagination v-model="currentPage" :total-items="100" large></Pagination>
</template>
```
<PaginationExample />
## Pagination with icons
The following pagination component example shows how you can use SVG icons instead of text to show the previous and next pages.
<PaginationWithIconsExample />
```vue
<script setup>
import { Pagination } from 'flowbite-vue'
import { ref } from 'vue'
const currentPage = ref(1)
</script>
<template>
<Pagination v-model="currentPage" :total-pages="100" show-icons></Pagination>
</template>
```
## Default with custom length
You can use your own pages count in the row by passing props: `slice-length`
@@ -41,7 +69,7 @@ const currentPage = ref(1)
<PaginationWithCustomSlice />
## Pagination with navigation layout
## Previous and next
```vue
<script setup>
@@ -52,7 +80,7 @@ const currentPage = ref(1)
</script>
<template>
<div class="flex items-center justify-center text-center">
<Pagination v-model="currentPage" :total-pages="100" :layout="'navigation'"></Pagination>
<Pagination v-model="currentPage" :total-pages="10" :layout="'navigation'"></Pagination>
</div>
</template>
```
@@ -75,34 +103,14 @@ const currentPage = ref(1)
</script>
<template>
<div class="flex items-center justify-center text-center">
<Pagination
v-model="currentPage"
:layout="'table'"
:per-page="10"
:total-items="998"
></Pagination>
<Pagination v-model="currentPage" :layout="'table'" :per-page="20" :total-items="998" class="mb-2" />
<Pagination v-model="currentPage" :layout="'table'" :per-page="20" :total-items="998" large />
</div>
</template>
```
<PaginationTableExample />
## Pagination with icons
```vue
<script setup>
import { Pagination } from 'flowbite-vue'
import { ref } from 'vue'
const currentPage = ref(1)
</script>
<template>
<Pagination v-model="currentPage" :total-pages="100" show-icons></Pagination>
</template>
```
<PaginationWithIconsExample />
## Pagination with custom labels
```vue
@@ -117,3 +125,69 @@ const currentPage = ref(1)
</template>
```
<PaginationWithCustomTextExample />
## Slots example
<PaginationSlotsExample />
```vue
<script setup>
import { Pagination } from 'flowbite-vue'
import { ref } from 'vue'
const currentPage = ref(1)
</script>
<template>
<Pagination v-model="currentPage" :total-items="100" :show-labels="false">
<template #prev-icon>⬅️</template>
<template #next-icon>➡️</template>
<template v-slot:page-button="{ page, setPage }">
<button
@click="setPage(page)"
class="flex items-center justify-center first:rounded-l-lg last:rounded-r-lg px-3 h-8 ml-0 leading-tight text-gray-500 bg-purple-200 border border-purple-300 hover:bg-purple-300 hover:text-gray-700 dark:bg-gray-800 dark:border-gray-700 dark:text-gray-400 dark:hover:bg-gray-700 dark:hover:text-white"
>
{{ page }}
</button>
</template>
</Pagination>
Current page: {{ currentPage }}
</template>
```
## API
### Props
| Name | Values | Default |
|---------------------------|-------------------------------------|--------------|
| modelValue | `number` | `1` |
| totalPages | `number` | `10` |
| perPage | `number` | `10` |
| totalItems | `number` | `10` |
| layout | `pagination`, `table`, `navigation` | `pagination` |
| showIcons | `boolean` | `false` |
| sliceLength | `number` | `2` |
| previousLabel | `string` | `Previous` |
| nextLabel | `string` | `Next` |
| enableFirstAndLastButtons | `boolean` | `false` |
| showLabels | `boolean` | `true` |
| large | `boolean` | `false` |
### Events
| Name | Description |
|----------------------|----------------------|
| `update:model-value` | Current page changed |
| `page-changed` | Current page changed |
### Slots
| Name | Description |
|--------------|-------------------------|
| start | content before buttons |
| end | content after buttons |
| first-button | first button content |
| last-button | last button content |
| prev-button | previous button content |
| next-button | next button content |
| prev-icon | previous icon slot |
| next-icon | next icon slot |
| page-button | page button slot |

5
docs/components/pagination/examples/PaginationExample.vue
View File

@@ -1,6 +1,7 @@
<template>
<div class="vp-raw">
<Pagination v-model="currentPage" :total-pages="100"></Pagination>
<div class="vp-raw flex flex-col items-center">
<Pagination v-model="currentPage" :total-items="100" class="mb-2"></Pagination>
<Pagination v-model="currentPage" :total-items="100" large></Pagination>
</div>
</template>
<script lang="ts" setup>

2
docs/components/pagination/examples/PaginationNavigationExample.vue
View File

@@ -1,6 +1,6 @@
<template>
<div class="vp-raw flex items-center justify-center text-center">
<Pagination v-model="currentPage" :total-pages="100" :layout="'navigation'"></Pagination>
<Pagination v-model="currentPage" :total-pages="10" :layout="'navigation'"></Pagination>
</div>
</template>
<script lang="ts" setup>

23
docs/components/pagination/examples/PaginationSlotsExample.vue Normal file
View File

@@ -0,0 +1,23 @@
<template>
<div class="vp-raw flex flex-col items-center">
<Pagination v-model="currentPage" :total-items="100" :show-labels="false">
<template #prev-icon>⬅️</template>
<template #next-icon>➡️</template>
<template v-slot:page-button="{ page, setPage }">
<button
@click="setPage(page)"
class="flex items-center justify-center first:rounded-l-lg last:rounded-r-lg px-3 h-8 ml-0 leading-tight text-gray-500 bg-purple-200 border border-purple-300 hover:bg-purple-300 hover:text-gray-700 dark:bg-gray-800 dark:border-gray-700 dark:text-gray-400 dark:hover:bg-gray-700 dark:hover:text-white"
>
{{ page }}
</button>
</template>
</Pagination>
Current page: {{ currentPage }}
</div>
</template>
<script lang="ts" setup>
import { Pagination } from '../../../../src/index'
import { ref } from 'vue'
const currentPage = ref<number>(1)
</script>

10
docs/components/pagination/examples/PaginationTableExample.vue
View File

@@ -1,11 +1,7 @@
<template>
<div class="vp-raw flex items-center justify-center text-center">
<Pagination
v-model="currentPage"
:layout="'table'"
:per-page="10"
:total-items="998"
></Pagination>
<div class="vp-raw flex flex-col items-center justify-center text-center">
<Pagination v-model="currentPage" :layout="'table'" :per-page="20" :total-items="998" class="mb-2" />
<Pagination v-model="currentPage" :layout="'table'" :per-page="20" :total-items="998" large />
</div>
</template>
<script lang="ts" setup>

2
docs/components/pagination/examples/PaginationWithCustomSlice.vue
View File

@@ -1,5 +1,5 @@
<template>
<div class="vp-raw">
<div class="vp-raw flex items-center justify-center">
<Pagination v-model="currentPage" :total-pages="100" :slice-length="4"></Pagination>
</div>
</template>

2
docs/components/pagination/examples/PaginationWithCustomTextExample.vue
View File

@@ -1,5 +1,5 @@
<template>
<div class="vp-raw flex flex-col">
<div class="vp-raw flex flex-col items-center">
<Pagination v-model="currentPage" :total-pages="100" previous-label="<<<" next-label=">>>"></Pagination>
</div>
</template>

31
docs/components/pagination/examples/PaginationWithIconsExample.vue
View File

@@ -1,6 +1,33 @@
<template>
<div class="vp-raw flex flex-col">
<Pagination v-model="currentPage" :total-pages="100" show-icons></Pagination>
<div class="vp-raw flex flex-col items-center">
<Pagination v-model="currentPage" :total-pages="100" :show-labels="false" class="mb-2">
<template #prev-icon>
<span class="sr-only">Previous</span>
<svg class="w-2.5 h-2.5" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 6 10">
<path stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 1 1 5l4 4" />
</svg>
</template>
<template #next-icon>
<span class="sr-only">Next</span>
<svg class="w-2.5 h-2.5" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 6 10">
<path stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="m1 9 4-4-4-4" />
</svg>
</template>
</Pagination>
<Pagination v-model="currentPage" :total-pages="100" :show-labels="false" large>
<template #prev-icon>
<span class="sr-only">Previous</span>
<svg class="w-2.5 h-2.5" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 6 10">
<path stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 1 1 5l4 4" />
</svg>
</template>
<template #next-icon>
<span class="sr-only">Next</span>
<svg class="w-2.5 h-2.5" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 6 10">
<path stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="m1 9 4-4-4-4" />
</svg>
</template>
</Pagination>
</div>
</template>
<script lang="ts" setup>