154 lines
2.7 KiB
Vue
154 lines
2.7 KiB
Vue
<template>
|
|
<div class="pagination">
|
|
<span
|
|
v-show="pageNumber > 1"
|
|
class="cursors"
|
|
>
|
|
<router-link
|
|
class="pagination-button cursor"
|
|
:to="{ params: { pageNumber: 1 } }"
|
|
><Icon icon="first2" /></router-link>
|
|
|
|
<router-link
|
|
class="pagination-button cursor"
|
|
:to="{ params: { pageNumber: pageNumber - 1 } }"
|
|
><Icon icon="arrow-left" /></router-link>
|
|
</span>
|
|
|
|
<span
|
|
v-show="pageNumber === 1"
|
|
class="cursors"
|
|
>
|
|
<span class="pagination-button cursor disabled"><Icon icon="first2" /></span>
|
|
<span class="pagination-button cursor disabled"><Icon icon="arrow-left" /></span>
|
|
</span>
|
|
|
|
<span class="pages">
|
|
<router-link
|
|
v-for="pageX in pageCount"
|
|
:key="`page-${pageX}`"
|
|
:to="{ params: { pageNumber: pageX } }"
|
|
:class="{ active: pageX === pageNumber }"
|
|
class="pagination-button page"
|
|
> {{ pageX }} </router-link>
|
|
</span>
|
|
|
|
<span
|
|
v-show="pageNumber < pageCount"
|
|
class="cursors"
|
|
>
|
|
<router-link
|
|
class="pagination-button cursor"
|
|
:to="{ params: { pageNumber: pageNumber + 1 } }"
|
|
><Icon icon="arrow-right" /></router-link>
|
|
|
|
<router-link
|
|
class="pagination-button cursor"
|
|
:to="{ params: { pageNumber: pageCount } }"
|
|
><Icon icon="last2" /></router-link>
|
|
</span>
|
|
|
|
<span
|
|
v-show="pageNumber === pageCount"
|
|
class="cursors"
|
|
>
|
|
<span class="pagination-button cursor disabled"><Icon icon="arrow-right" /></span>
|
|
<span class="pagination-button cursor disabled"><Icon icon="last2" /></span>
|
|
</span>
|
|
</div>
|
|
</template>
|
|
|
|
<script>
|
|
function pageNumber() {
|
|
return Number(this.$route.params.pageNumber) || 1;
|
|
}
|
|
|
|
function pageCount() {
|
|
const count = Math.max(Math.ceil(this.itemsTotal / this.itemsPerPage), 1);
|
|
|
|
return count;
|
|
}
|
|
|
|
export default {
|
|
props: {
|
|
itemsTotal: {
|
|
type: Number,
|
|
default: 0,
|
|
},
|
|
itemsPerPage: {
|
|
type: Number,
|
|
default: 10,
|
|
},
|
|
},
|
|
computed: {
|
|
pageNumber,
|
|
pageCount,
|
|
},
|
|
};
|
|
</script>
|
|
|
|
<style lang="scss" scoped>
|
|
.pagination {
|
|
display: flex;
|
|
justify-content: center;
|
|
}
|
|
|
|
.pagination-top {
|
|
margin: 0 0 1rem 0;
|
|
}
|
|
|
|
.pagination-bottom {
|
|
margin: .5rem 0 1rem 0;
|
|
}
|
|
|
|
.pagination-button {
|
|
width: 2.5rem;
|
|
height: 2rem;
|
|
display: inline-flex;
|
|
flex-shrink: 0;
|
|
align-items: center;
|
|
justify-content: center;
|
|
color: var(--shadow);
|
|
font-size: 1rem;
|
|
font-weight: bold;
|
|
text-decoration: none;
|
|
|
|
.icon {
|
|
width: .8rem;
|
|
height: .8rem;
|
|
margin: 0 0 .125rem 0;
|
|
fill: var(--shadow);
|
|
}
|
|
|
|
&:hover:not(.active):not(.disabled) {
|
|
color: var(--text);
|
|
|
|
.icon {
|
|
fill: var(--text);
|
|
}
|
|
}
|
|
|
|
&.active {
|
|
color: var(--primary);
|
|
}
|
|
|
|
&.disabled {
|
|
color: var(--shadow-weak);
|
|
|
|
.icon {
|
|
fill: var(--shadow-weak);
|
|
}
|
|
}
|
|
}
|
|
|
|
.pages,
|
|
.cursors {
|
|
flex-shrink: 0;
|
|
}
|
|
|
|
.cursors {
|
|
margin: 0 .5rem;
|
|
font-size: 0;
|
|
}
|
|
</style>
|