Verified Commit 2e71ddbf authored by Eliot Berriot's avatar Eliot Berriot
Browse files

Pagination now support a compact mode

parent 9b4d7165
<template>
<div class="ui pagination borderless menu">
<a
v-if="current - 1 >= 1"
<div class="ui pagination menu">
<div
:disabled="current - 1 < 1"
@click="selectPage(current - 1)"
:class="[{'disabled': current - 1 < 1}, 'item']"><i class="angle left icon"></i></a>
<template>
<a
:class="[{'disabled': current - 1 < 1}, 'item']"><i class="angle left icon"></i></div>
<template v-if="!compact">
<div
v-if="page !== 'skip'"
v-for="page in pages"
@click="selectPage(page)"
:class="[{'active': page === current}, 'item']">
{{ page }}
</a>
<a v-else class="disabled item">
</div>
<div v-else class="disabled item">
...
</a>
</div>
</template>
<a
v-if="current + 1 <= maxPage"
<div
:disabled="current + 1 > maxPage"
@click="selectPage(current + 1)"
:class="[{'disabled': current + 1 > maxPage}, 'item']"><i class="angle right icon"></i></a>
:class="[{'disabled': current + 1 > maxPage}, 'item']"><i class="angle right icon"></i></div>
</div>
</template>
......@@ -30,7 +30,8 @@ export default {
props: {
current: {type: Number, default: 1},
paginateBy: {type: Number, default: 25},
total: {type: Number}
total: {type: Number},
compact: {type: Boolean, default: false}
},
computed: {
pages: function () {
......@@ -72,6 +73,9 @@ export default {
},
methods: {
selectPage: function (page) {
if (page > this.maxPage || page < 1) {
return
}
if (this.current !== page) {
this.$emit('page-changed', page)
}
......
Markdown is supported
0% or .
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment