Press n or j to go to the next uncovered block, b, p or k for the previous block.
| 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 116 | <template>
<nav aria-label="Page navigation example" class="d-flex justify-content-center">
<ul class="pagination">
<li class="page-item" :class="{'disabled': !paginationSpecs['previous']}">
<nuxt-link class="page-link" :tabindex="paginationSpecs['previous'] ? 1 : -1"
:aria-disabled="!paginationSpecs['previous']"
:to="`${paginationSpecs['baseUrl']}/${Number(paginationSpecs['page']) - 1}`" aria-label="Previous">
<span aria-hidden="true">«</span>
</nuxt-link>
</li>
<li v-for="(page, index) in pages" :key="index" class="pagination-desktop page-item d-none d-lg-block"
:class="{'active': page + 1 === Number(paginationSpecs['page']) && page !== '...', 'disabled': page === '...'}">
<nuxt-link v-if="page !== '...'" class="page-link"
:to="`${paginationSpecs['baseUrl']}/${page + 1}`">{{ page + 1 }}
</nuxt-link>
<span class="page-link" v-else>...</span>
</li>
<li class="pagination-mobile page-item d-lg-none active">
<span class="page-link">{{ `Pagina ${paginationSpecs['page']} din ${paginationSpecs['size']}` }}</span>
</li>
<li class="page-item" :class="{'disabled': !paginationSpecs['next']}">
<nuxt-link class="page-link" :tabindex="paginationSpecs['next'] ? 1 : -1" :aria-disabled="!paginationSpecs['next']"
:to="`${paginationSpecs['baseUrl']}/${Number(paginationSpecs['page']) + 1}`" aria-label="Next">
<span aria-hidden="true">»</span>
</nuxt-link>
</li>
</ul>
</nav>
</template>
<script>
export default {
props: ['paginationSpecs'],
watch: {
'paginationSpecs.pages': function(val) {
this.getPages(val);
}
},
data() {
return {
pages: []
}
},
methods: {
/**
* Gets the displayed pages when route changes
* @see getPages
* @params {object} pages
* @returns void
*/
getPages(pages) {
this.pages = [];
pages.forEach((elem, index, arr) => {
this.pages.push(elem);
if (arr[index] + 1 !== arr[index + 1] && index + 1 < arr.length) {
this.pages.push('...');
}
})
}
},
/**
* Sets the value of the pages property
* @see mounted
* @returns void
*/
mounted() {
this.getPages(this.paginationSpecs['pages']);
}
}
</script>
<style lang="scss" scoped>
.active {
background-color: #4e73df;
color: white;
}
.page-link:focus {
box-shadow: none;
}
.page-item:not(.active) .page-link:focus {
background-color: white;
color: #4e73df;
}
.page-item:not(.active) .page-link:hover {
background-color: #e9ecef;
}
.page-item.disabled .page-link {
color: #6c757d !important;
}
@media screen and #{$ipad-pro-portrait-breakpoint},
screen and #{$ipad-pro-landscape-breakpoint},
screen and #{$ipad-landscape-breakpoint} {
.pagination-desktop {
display: none !important;
}
.pagination-mobile {
display: block !important;
}
}
</style>
|