forked from DebaucheryLibrarian/traxxx
113 lines
2.0 KiB
Vue
113 lines
2.0 KiB
Vue
<template>
|
|
<div class="pagination">
|
|
<template v-if="pageNumber > 1">
|
|
<router-link
|
|
class="pagination-page"
|
|
:to="{ params: { pageNumber: 1 } }"
|
|
><<</router-link>
|
|
|
|
<router-link
|
|
class="pagination-page"
|
|
:to="{ params: { pageNumber: pageNumber - 1 } }"
|
|
><</router-link>
|
|
</template>
|
|
|
|
<template v-else>
|
|
<span class="pagination-page disabled"><<</span>
|
|
<span class="pagination-page disabled"><</span>
|
|
</template>
|
|
|
|
<router-link
|
|
v-for="pageX in pageCount"
|
|
:key="`page-${pageX}`"
|
|
:to="{ params: { pageNumber: pageX } }"
|
|
:class="{ active: pageX === pageNumber }"
|
|
class="pagination-page"
|
|
> {{ pageX }} </router-link>
|
|
|
|
<template v-if="pageNumber < pageCount">
|
|
<router-link
|
|
class="pagination-page"
|
|
:to="{ params: { pageNumber: pageNumber + 1 } }"
|
|
>></router-link>
|
|
|
|
<router-link
|
|
class="pagination-page"
|
|
:to="{ params: { pageNumber: pageCount } }"
|
|
>>></router-link>
|
|
</template>
|
|
|
|
<template v-else>
|
|
<span class="pagination-page disabled">></span>
|
|
<span class="pagination-page disabled">>></span>
|
|
</template>
|
|
</div>
|
|
</template>
|
|
|
|
<script>
|
|
function pageNumber() {
|
|
return Number(this.$route.params.pageNumber) || 1;
|
|
}
|
|
|
|
function pageCount() {
|
|
return Math.ceil(this.itemsTotal / this.itemsPerPage);
|
|
}
|
|
|
|
export default {
|
|
props: {
|
|
itemsTotal: {
|
|
type: Number,
|
|
default: 0,
|
|
},
|
|
itemsPerPage: {
|
|
type: Number,
|
|
default: 10,
|
|
},
|
|
},
|
|
computed: {
|
|
pageNumber,
|
|
pageCount,
|
|
},
|
|
};
|
|
</script>
|
|
|
|
<style lang="scss" scoped>
|
|
.pagination {
|
|
width: 100%;
|
|
display: flex;
|
|
justify-content: center;
|
|
}
|
|
|
|
.pagination-page {
|
|
width: 2rem;
|
|
height: 2rem;
|
|
display: inline-flex;
|
|
align-items: center;
|
|
margin: 0 .5rem 0 0;
|
|
justify-content: center;
|
|
color: var(--shadow);
|
|
font-weight: bold;
|
|
text-decoration: none;
|
|
|
|
&:hover:not(.active, .disabled) {
|
|
color: var(--text);
|
|
}
|
|
|
|
&.active {
|
|
color: var(--primary);
|
|
}
|
|
|
|
&.disabled {
|
|
color: var(--shadow-weak);
|
|
}
|
|
}
|
|
|
|
.pagination-top {
|
|
margin: 0 0 1rem 0;
|
|
}
|
|
|
|
.pagination-bottom{
|
|
margin: 1rem 0 0 0;
|
|
}
|
|
</style>
|