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

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>