bootstrap-vue-wrapper
Version:
Bootstrap 5 components in Vue3 wrapper.
115 lines (114 loc) • 2.2 kB
JavaScript
import { defineComponent as i } from "vue";
const r = i({
name: "BsPaginator",
props: {
/**
* Total count of items.
*/
totalCount: {
type: Number,
required: !0
},
/**
* Page size
*/
pageSize: {
type: Number,
required: !0
},
/**
* Current page
*/
currentPage: {
type: Number,
required: !0
},
/**
* Max visible page
*/
maxVisiblePage: {
type: Number,
default: 5
},
/**
* First page label
*/
firstPageLabel: {
type: String,
default: "«"
},
/**
* Previous page label
*/
previousPageLabel: {
type: String,
default: "‹"
},
/**
* Next page label
*/
nextPageLabel: {
type: String,
default: "›"
},
/**
* Last page label
*/
lastPageLabel: {
type: String,
default: "»"
}
},
emits: ["pageChanged"],
methods: {
/**
* Count of pages
*
* @returns {number}
*/
getPageCount() {
return Math.ceil(this.totalCount / this.pageSize);
},
/**
* Visible page list
*
* @returns {*[]}
*/
getVisiblePages() {
const e = [], t = this.getPageRange();
for (let a = t.beginPage; a <= t.endPage; a += 1)
e.push(a + 1);
return e;
},
/**
* Is page active, or not
*
* @param page
* @returns {boolean}
*/
isPageActive(e) {
return e === this.currentPage;
},
/**
* On page click
*/
onPageClick(e) {
this.isPageActive(e) || this.$emit("pageChanged", e);
},
/**
* Page range, example: 3 available page, current page 3, range is: [1, 3] (zero-based)
*
* @returns {{beginPage: number, endPage: number}}
*/
getPageRange() {
let e = Math.max(0, this.currentPage - this.maxVisiblePage / 2), t = e + this.maxVisiblePage - 1;
return t >= this.getPageCount() && (t = this.getPageCount() - 1, e = Math.max(0, t - this.maxVisiblePage + 1)), {
beginPage: Math.floor(e),
endPage: Math.floor(t)
};
}
}
});
export {
r as default
};