@progress/kendo-vue-data-tools
Version:
291 lines (290 loc) • 9.49 kB
JavaScript
/**
* @license
*-------------------------------------------------------------------------------------------
* Copyright © 2025 Progress Software Corporation. All rights reserved.
* Licensed under commercial license. See LICENSE.md in the package root for more information
*-------------------------------------------------------------------------------------------
*/
import { defineComponent as D, createVNode as a, h as _, inject as N } from "vue";
import { PagerNumericButtons as U } from "./PagerNumericButtons.mjs";
import { PagerInput as H } from "./PagerInput.mjs";
import { PagerPageSizes as Z } from "./PagerPageSizes.mjs";
import { PagerInfo as q } from "./PagerInfo.mjs";
import { PagerNavigationButton as c } from "./PagerNavigationButton.mjs";
import { pagerFirstPage as P, pagerPreviousPage as z, pagerNextPage as S, pagerLastPage as v, messages as p } from "../messages/main.mjs";
import { provideLocalizationService as G } from "@progress/kendo-vue-intl";
import { templateRendering as J, getListeners as Q, getTemplate as V, hasListener as X, kendoThemeMaps as Y, canUseDOM as ee, isRtl as te } from "@progress/kendo-vue-common";
import { caretAltToRightIcon as F, caretAltToLeftIcon as x, caretAltRightIcon as W, caretAltLeftIcon as A } from "@progress/kendo-svg-icons";
const se = "k-pager-numbers-wrap", ie = "k-pager-sizes", ae = "k-pager-info", me = /* @__PURE__ */ D({
name: "KendoPager",
props: {
pageSizeValue: [String, Number],
total: Number,
skip: Number,
take: Number,
pageSize: Number,
settings: [Object, Boolean],
buttonCount: {
type: Number,
default: 10
},
info: {
type: Boolean,
default: !0
},
type: {
type: String,
default: "numeric",
validator: function(e) {
return ["numeric", "input"].includes(e);
}
},
pageSizes: {
type: Array
},
previousNext: Boolean,
messagesMap: Function,
responsive: {
type: Boolean,
default: !0
},
size: {
type: String,
default: "medium",
validator: function(e) {
return [null, "small", "medium", "large"].includes(e);
}
},
pagerRender: [String, Function, Object],
width: [Number, String],
ariaControls: {
type: String,
default: void 0
},
onPagesizechange: Function,
onPagechange: Function
},
data() {
return {
currentRtl: !1,
itemsToFit: void 0,
itemsWidths: void 0
};
},
mounted() {
ee && window.ResizeObserver && (this.observerResize = new window.ResizeObserver(this.onWindowResize), this.observerResize.observe(this.$el)), this.currentRtl = te(this.$el);
const e = this.collectPagerChildrenWidths();
this.itemsWidths = e, this.onWindowResize();
},
unmounted() {
var e;
(e = this.document) != null && e.body && this.observerResize && this.observerResize.disconnect();
},
inject: {
kendoLocalizationService: {
default: null
},
kendoIntlService: {
default: null
}
},
computed: {
wrapperClass() {
const {
size: e
} = this.$props;
return {
"k-pager": !0,
[`k-pager-${Y.sizeMap[e] || e}`]: e
};
},
totalPages() {
return Math.ceil((this.$props.total || 0) / this.currentTake);
},
currentPage() {
return Math.floor((this.$props.skip || 0) / this.currentTake) + 1;
},
currentTake() {
return this.$props.take || this.$props.pageSize;
},
showPageSizes() {
return this.itemsToFit.includes(this.pagerSizesIndex);
},
showInfo() {
return this.itemsToFit.includes(this.pagerInfoIndex);
}
},
methods: {
changePage(e, t) {
e > 0 && e <= this.totalPages && this.$emit("pagechange", {
skip: (e - 1) * this.currentTake,
take: this.currentTake
}, t);
},
triggerPageChange(e, t) {
X.call(this, "pagesizechange") ? this.$emit("pagesizechange", e, t) : this.$emit("pagechange", e, t);
},
onWindowResize() {
const e = this.$el;
!e || !this.$props.responsive || this.$props.settings.responsive === !1 || (this.itemsToFit = this.fitChildrenInParent(e, this.itemsWidths || []));
},
transformDimension(e) {
return typeof e == "string" && e.endsWith("px") ? e : e + "px";
},
collectPagerChildrenWidths() {
var o;
return Array.from(((o = this.$el) == null ? void 0 : o.children) || []).map((n) => n instanceof HTMLElement ? {
class: n.className,
width: n.offsetWidth
} : 0);
},
fitChildrenInParent(e, t) {
let o = [], n = 0, l = t;
const s = e.offsetWidth, u = 20;
for (let i = 0; i < t.length; i++) {
const d = i === 0 ? 8 : 0, g = e.children[i], r = i === 0 ? t[i].width : (g == null ? void 0 : g.offsetWidth) || t[i].width;
n += r, n < s - u - d ? o.push(t[i].class) : l[i].width = r;
}
return this.itemsWidths = l, o;
}
},
setup() {
const e = N("kendoIntlService", {}), t = N("kendoLocalizationService", {});
return {
kendoIntlService: e,
kendoLocalizationService: t
};
},
render() {
var I, L;
const {
skip: e,
take: t,
total: o,
pageSizes: n,
buttonCount: l,
messagesMap: s,
info: u,
type: i,
previousNext: d,
pageSizeValue: g
} = this.$props, r = {
pageSizes: n,
buttonCount: l,
info: u,
previousNext: d,
type: i,
pageSizeValue: g,
...this.$props.settings
}, m = this.$props.pagerRender || this.$props.settings.pagerRender, K = m ? J.call(this, m, Q.call(this)) : null, h = G(this), k = s ? s(P) : {
messageKey: P,
defaultMessage: p[P]
}, R = s ? s(z) : {
messageKey: z,
defaultMessage: p[z]
}, b = s ? s(S) : {
messageKey: S,
defaultMessage: p[S]
}, w = s ? s(v) : {
messageKey: v,
defaultMessage: p[v]
}, O = r.type === "numeric" ? a(U, {
responsiveSize: this.responsive && this.itemsToFit && this.itemsToFit.length < 2 ? "small" : "large",
size: this.size,
buttonCount: r.buttonCount || 0,
totalPages: this.totalPages,
currentPage: this.currentPage,
onPagechange: this.changePage
}, null) : a(H, {
currentPage: this.currentPage,
totalPages: this.totalPages,
onPagechange: this.changePage,
messagesMap: s,
size: this.size
}, null);
let y, M, $, T;
r.previousNext && (y = a(c, {
class: "k-pager-first",
size: this.size,
disabled: this.currentPage === 1,
page: 1,
title: h.toLanguageString(k.messageKey, k.defaultMessage),
icon: this.currentRtl ? "caret-alt-to-right" : "caret-alt-to-left",
svgIcon: this.currentRtl ? F : x,
onPagechange: this.changePage
}, null), M = a(c, {
disabled: this.currentPage === 1,
size: this.size,
page: this.currentPage - 1,
title: h.toLanguageString(R.messageKey, R.defaultMessage),
icon: this.currentRtl ? "caret-alt-right" : "caret-alt-left",
svgIcon: this.currentRtl ? W : A,
onPagechange: this.changePage
}, null), $ = a(c, {
disabled: this.currentPage === this.totalPages,
size: this.size,
page: this.currentPage + 1,
title: h.toLanguageString(b.messageKey, b.defaultMessage),
icon: this.currentRtl ? "caret-alt-left" : "caret-alt-right",
svgIcon: this.currentRtl ? A : W,
onPagechange: this.changePage
}, null), T = a(c, {
class: "k-pager-last",
disabled: this.currentPage === this.totalPages,
size: this.size,
page: this.totalPages,
title: h.toLanguageString(w.messageKey, w.defaultMessage),
icon: this.currentRtl ? "caret-alt-to-left" : "caret-alt-to-right",
svgIcon: this.currentRtl ? x : F,
onPagechange: this.changePage
}, null));
const B = r.pageSizes && a(Z, {
onPagechange: this.triggerPageChange,
pageSize: this.currentTake,
pageSizes: r.pageSizes,
value: r.pageSizeValue,
messagesMap: s,
size: this.size
}, null), E = r.info && a(q, {
totalPages: this.$props.total,
skip: this.$props.skip,
currentPage: this.currentTake,
messagesMap: s
}, null);
let j = V.call(this, {
h: _,
template: K,
additionalProps: {
...this.$props,
current: this.currentPage
},
additionalListeners: {
pagechange: this.triggerPageChange
}
});
const C = this.transformDimension(this.$props.width);
return m ? a("div", {
class: this.wrapperClass,
style: {
width: C
},
role: "application",
"aria-roledescription": "pager"
}, [j]) : a("div", {
class: this.wrapperClass,
style: {
width: C
},
role: "application",
"aria-roledescription": "pager",
"aria-keyshortcuts": "Enter ArrowRight ArrowLeft",
"aria-label": "Page navigation, page " + this.currentPage + " of " + this.totalPages,
"aria-controls": this.$props.ariaControls
}, [a("div", {
class: se
}, [y, M, O, $, T]), !(this.responsive && this.itemsToFit && !((I = this.itemsToFit) != null && I.find((f) => f.indexOf(ie) !== -1))) && B, !(this.responsive && this.itemsToFit && !((L = this.itemsToFit) != null && L.find((f) => f.indexOf(ae) !== -1))) && E]);
}
});
export {
me as Pager
};