112 lines
2.9 KiB
Vue
112 lines
2.9 KiB
Vue
<script setup lang="ts">
|
|
interface Props {
|
|
currentPage: number
|
|
perPage: number
|
|
totalItems: number
|
|
}
|
|
|
|
interface Emits {
|
|
(e: 'page-change', page: number): void
|
|
}
|
|
|
|
const props = withDefaults(defineProps<Props>(), {
|
|
currentPage: 1,
|
|
perPage: 10,
|
|
totalItems: 0
|
|
})
|
|
|
|
const emit = defineEmits<Emits>()
|
|
|
|
const totalPages = computed(() => Math.ceil(props.totalItems / props.perPage))
|
|
|
|
const goToPage = (page: number) => {
|
|
if (page >= 1 && page <= totalPages.value) {
|
|
emit('page-change', page)
|
|
window.scrollTo({ top: 0, behavior: 'smooth' })
|
|
}
|
|
}
|
|
|
|
const pageNumbers = computed(() => {
|
|
const pages: (number | string)[] = []
|
|
const maxVisible = 5
|
|
|
|
if (totalPages.value <= maxVisible) {
|
|
for (let i = 1; i <= totalPages.value; i++) pages.push(i)
|
|
} else {
|
|
if (props.currentPage <= 3) {
|
|
for (let i = 1; i <= maxVisible - 1; i++) pages.push(i)
|
|
pages.push('...')
|
|
pages.push(totalPages.value)
|
|
} else if (props.currentPage >= totalPages.value - 2) {
|
|
pages.push(1)
|
|
pages.push('...')
|
|
for (let i = totalPages.value - (maxVisible - 2); i <= totalPages.value; i++) pages.push(i)
|
|
} else {
|
|
pages.push(1)
|
|
pages.push('...')
|
|
for (let i = props.currentPage - 1; i <= props.currentPage + 1; i++) pages.push(i)
|
|
pages.push('...')
|
|
pages.push(totalPages.value)
|
|
}
|
|
}
|
|
|
|
return pages
|
|
})
|
|
</script>
|
|
|
|
<template>
|
|
<nav v-if="totalPages > 1" class="d-flex justify-content-center mt-5 mb-5">
|
|
<ul class="pagination mb-0">
|
|
<li class="page-item" :class="{ disabled: currentPage === 1 }">
|
|
<button
|
|
class="page-link"
|
|
@click="goToPage(currentPage - 1)"
|
|
:disabled="currentPage === 1"
|
|
aria-label="Pagina precedente"
|
|
>
|
|
<span aria-hidden="true">«</span>
|
|
</button>
|
|
</li>
|
|
|
|
<li v-for="page in pageNumbers" :key="`page-${page}`" class="page-item" :class="{ active: page === currentPage }">
|
|
<template v-if="page === '...'">
|
|
<span class="page-link">...</span>
|
|
</template>
|
|
<template v-else>
|
|
<button
|
|
class="page-link"
|
|
@click="goToPage(page as number)"
|
|
:aria-label="`Vai a pagina ${page}`"
|
|
:aria-current="page === currentPage ? 'page' : undefined"
|
|
>
|
|
{{ page }}
|
|
</button>
|
|
</template>
|
|
</li>
|
|
|
|
<li class="page-item" :class="{ disabled: currentPage === totalPages }">
|
|
<button
|
|
class="page-link"
|
|
@click="goToPage(currentPage + 1)"
|
|
:disabled="currentPage === totalPages"
|
|
aria-label="Pagina successiva"
|
|
>
|
|
<span aria-hidden="true">»</span>
|
|
</button>
|
|
</li>
|
|
</ul>
|
|
</nav>
|
|
|
|
<div v-if="totalPages > 1" class="text-center text-muted small mt-3">
|
|
Pagina {{ currentPage }} di {{ totalPages }} ({{ totalItems }} elementi totali)
|
|
</div>
|
|
</template>
|
|
|
|
<style scoped>
|
|
.pagination {
|
|
gap: 0.25rem;
|
|
}
|
|
</style>
|
|
|
|
|