@aotearoan/neon
Version:
Neon is a lightweight design library of Vue 3 components with minimal dependencies.
82 lines (81 loc) • 2.78 kB
JavaScript
import f from "../../user-input/button/NeonButton.vue.es.js";
import d from "../../presentation/icon/NeonIcon.vue.es.js";
import { defineComponent as v, computed as l } from "vue";
import { NeonFunctionalColor as P } from "../../../model/common/color/NeonFunctionalColor.es.js";
const A = v({
name: "NeonPagination",
components: {
NeonButton: f,
NeonIcon: d
},
props: {
/**
* The current page number.
*/
page: { type: Number, required: !0 },
/**
* The URL template for the pagination links. The template should contain a '{page}' placeholder that will be
* substituted in links with the correct page number.
*/
urlTemplate: { type: String },
/**
* The number of items per page.
*/
pageSize: { type: Number, default: 20 },
/**
* The total number of items.
*/
total: { type: Number, required: !0 },
/**
* Whether to display links to the first and last pages.
*/
displayFirstAndLast: { type: Boolean, default: !1 },
/**
* The accent color of the component.
*/
color: { type: String, default: () => P.Brand }
},
emits: [
/**
* Emitted when the user clicks on a page link (useful for paginated lists which are not the main focus of the page,
* i.e. should not be deep linked).
*
* @type {number} The new page number.
*/
"page-change"
],
setup(t, { emit: o }) {
const e = l(() => Math.ceil(t.total / t.pageSize)), s = l(() => e.value <= 1), r = l(() => Math.max(t.page - 1, 1)), u = l(() => t.page === 1), g = l(() => Math.min(t.page + 1, e.value)), m = l(() => t.page === e.value), p = l(
() => e.value > 5 && t.page >= 5
), y = l(
() => e.value > 5 && t.page <= e.value - 4
), c = l(() => {
if (e.value <= 5)
return Array.from(Array(e.value).keys()).map((a) => a + 1);
if (t.page <= e.value / 2) {
let a = Math.max(t.page - Math.floor(1.5), 1), n = 3;
return a === 2 ? (a = 1, n += 1) : a === 3 && (a = 1, n += 2), Array.from(Array(n).keys()).map((i) => a + i);
} else {
let a = Math.min(t.page + Math.floor(1.5), e.value), n = 3;
return a === e.value - 1 ? (a = e.value, n += 1) : a === e.value - 2 && (a = e.value, n += 2), Array.from(Array(n).keys()).map((i) => a - (n - 1) + i);
}
});
return {
pageCount: e,
hidePagination: s,
previousPage: r,
disabledPrevious: u,
nextPage: g,
disabledNext: m,
showFirstPageWithEllipsis: p,
showLastPageWithEllipsis: y,
pageRange: c,
url: (a) => t.urlTemplate ? t.urlTemplate.replace("{page}", a.toString()) : void 0,
emit: o
};
}
});
export {
A as default
};
//# sourceMappingURL=NeonPagination.es.js.map