vue3-pivot-data-table
Version:
A non-aggregating Vue3 table component for presenting pivot-like data
797 lines (796 loc) • 26.8 kB
JavaScript
import { computed as V, watch as ue, ref as Z, defineComponent as Ne, provide as De, toRefs as Me, useSlots as Oe, onMounted as Be, openBlock as k, createElementBlock as T, Fragment as U, createElementVNode as z, normalizeClass as J, unref as e, renderSlot as $, normalizeProps as ve, mergeProps as _, renderList as Y, toDisplayString as M, withModifiers as je, createCommentVNode as te, createTextVNode as K } from "vue";
const _e = {
items: {
type: Array,
default: () => [],
required: !0,
description: "Array of data objects, should be a flat array."
},
measures: {
type: Array,
default: () => [],
required: !0,
description: "Array of Measure objects representing the metrics"
},
dimensions: {
type: Array,
default: () => [],
description: "Array of Dimension objects representing the row-dimensions"
},
pivot: {
type: Object,
default: null,
description: "Single Pivot object representing the column-dimension. Limited to 1 for reduced complexity."
},
locale: {
type: String,
default: "en-US",
description: "Locale setting for the table."
},
currentPage: {
type: Number,
default: 1,
description: "Current page number."
},
noRowsCustom: {
type: Boolean,
default: !1,
description: "Indicates whether to use custom rows when no data is available."
},
emptyMessage: {
type: String,
default: "No Available Data",
description: "Message to display when there is no available data."
},
filterOptions: {
type: Array,
default: null,
description: "Array of filter options for the table."
},
hideFooter: {
type: Boolean,
default: !1,
description: "Indicates whether to hide the table footer."
},
hideHeader: {
type: Boolean,
default: !1,
description: "Indicates whether to hide the table header."
},
loading: {
type: Boolean,
default: !1,
description: "Indicates whether the table is in a loading state."
},
rowsPerPage: {
type: Number,
default: 25,
description: "Number of rows per page."
},
searchField: {
type: [String, Array],
default: "",
description: "Field or fields to search within."
},
rowsItems: {
type: Array,
default: () => [25, 50, 100]
},
rowsOfPageSeparatorMessage: {
type: String,
default: "of"
},
searchValue: {
type: String,
default: "",
description: "Value to search for within the specified field(s)."
},
showIndex: {
type: Boolean,
default: !1,
description: "Indicates whether to display an index column."
},
showIndexSymbol: {
type: String,
default: "#",
description: "Symbol used for the index column."
},
showIndexClass: {
type: String,
default: "",
description: "Class used for the index column."
},
oddRowClass: {
type: String,
default: "odd-row",
description: "CSS class applied to odd-numbered rows."
},
evenRowClass: {
type: String,
default: "even-row",
description: "CSS class applied to even-numbered rows."
},
oddRowCellClass: {
type: String,
default: "odd-row-cell",
description: "CSS class applied to cells in odd-numbered rows."
},
customTableRowClass: {
type: Function,
default: () => null,
description: "Custom function to apply classes to tablerows <tr>."
},
customTableDataClass: {
type: Function,
default: () => null,
description: "Custom function to apply classes to tablerows <td>."
},
evenRowCellClass: {
type: String,
default: "even-row-cell",
description: "CSS class applied to cells in even-numbered rows."
},
sortBy: {
type: String,
default: "",
description: "Field or fields to sort by."
},
sortType: {
type: String,
default: "asc",
description: "Sort type or types (ascending or descending)."
},
sortPivotValue: {
type: String,
default: "",
description: "Sort pivotValue when pivot is active"
},
tableClassName: {
type: String,
default: "",
description: "CSS class applied to the table element."
},
innerTableClassName: {
type: String,
default: "",
description: "CSS class applied to the inner table element."
},
headerClassName: {
type: String,
default: "",
description: "CSS class applied to the table header element."
},
mustSort: {
type: Boolean,
default: !1,
description: "Indicates whether sorting is required."
},
tableNodeId: {
type: String,
default: "",
description: "ID attribute for the table element."
},
nullFillText: {
type: String,
default: "-",
description: "Text to be shown if cellvalue is null"
},
splitDimensionHeaders: {
type: Boolean,
default: !1,
description: "Forces spit of dimension headers into separate cells."
}
};
function G(r, l) {
if (r.includes(".")) {
const p = r.split("."), { length: i } = p;
let o, c = 0;
for (; c < i; ) {
if (c === 0)
o = l[p[0]];
else if (o && typeof o == "object")
o = o[p[c]];
else {
o = "";
break;
}
c += 1;
}
return o ?? "";
}
return l[r];
}
function Pe(r, l, p, i) {
return r == null ? i : Array.isArray(r) ? r.join(", ") : (l.formatFunc ? r = l.formatFunc(r) : l.numberFormat && (r = new Intl.NumberFormat(p, l.numberFormat).format(r)), l.prefix && (r = l.prefix + r), l.suffix && (r = r + l.suffix), r);
}
function he(r, l, p, i) {
const o = G(r.value, l);
return Pe(o, r, p, i);
}
function Ce(r, l, p, i, o) {
var F;
let c;
return r.pivotValue ? c = (F = l.items.find((I) => I[p.value] === r.pivotValue)) == null ? void 0 : F[r.value] : c = G(r.value, l.dimensions), Pe(c, r, i, o);
}
function Ee(r, l, p, i, o, c, F, I, y) {
const H = (P) => {
if (typeof F.value == "string" && F.value !== "")
return G(F.value, P);
if (Array.isArray(F.value)) {
let n = "";
return F.value.forEach((f) => {
n += G(f, P);
}), n;
}
return Object.values(P).join(" ");
}, O = V(() => {
if (o.value) {
const P = c.value.map((f) => f.value), n = i.value.reduce((f, m) => {
const w = P.map((b) => m[b]).join("|"), S = f.find((b) => b.key === w);
if (S)
S.items.push(m);
else {
const b = Object.fromEntries(Object.entries(m).filter(([d]) => P.includes(d)));
f.push({ key: w, dimensions: b, items: [m] });
}
return f;
}, []);
if (I.value !== "") {
const f = new RegExp(I.value, "i");
return n.filter((m) => f.test(m.key));
}
return n;
}
if (I.value !== "") {
const P = new RegExp(I.value, "i");
return i.value.filter((n) => P.test(H(n)));
}
return i.value;
}), N = V(() => {
let P = [...O.value];
return o.value ? P : p.value ? (p.value.forEach((n) => {
P = P.filter((f) => {
const { field: m, comparison: w, criteria: S } = n;
if (typeof w == "function")
return w(G(m, f), S);
const b = G(m, f);
if (b === null)
return !1;
switch (w) {
case "=":
return b === S;
case "!=":
return b !== S;
case ">":
return b > S;
case "<":
return b < S;
case "<=":
return b <= S;
case ">=":
return b >= S;
case "between":
return b >= Math.min(...S) && b <= Math.max(...S);
case "in":
return Array.isArray(S) ? S.includes(b) : !0;
default:
return b === S;
}
});
}), P) : O.value;
});
ue(
N,
(P) => {
p.value && y("updateFilter", P);
},
{ immediate: !0, deep: !0 }
);
const E = V(() => {
var b;
if (l.value === null)
return N.value;
const P = [...N.value], { sortBy: n, sortDesc: f, sortPivotValue: m } = l.value, w = (b = r.value.find((d) => d.value === n)) == null ? void 0 : b.sortFunc;
return P.sort((d, v) => {
var R, g, h, L;
let a, s;
return o.value ? m ? (a = w ? w((R = d.items.find((B) => B[o.value.value] === m)) == null ? void 0 : R[n]) : (g = d.items.find((B) => B[o.value.value] === m)) == null ? void 0 : g[n], s = w ? w((h = v.items.find((B) => B[o.value.value] === m)) == null ? void 0 : h[n]) : (L = v.items.find((B) => B[o.value.value] === m)) == null ? void 0 : L[n]) : (a = w ? w(d.dimensions[n]) : d.dimensions[n], s = w ? w(v.dimensions[n]) : v.dimensions[n]) : (a = w ? w(G(n, d)) : G(n, d), s = w ? w(G(n, v)) : G(n, v)), a == null && s != null ? 1 : a != null && s == null ? -1 : a == null && s == null ? 0 : a < s ? f ? 1 : -1 : a > s ? f ? -1 : 1 : 0;
});
}), Q = V(() => E.value.length);
return {
totalItems: E,
totalItemsLength: Q
};
}
function Le(r, l, p, i, o, c, F, I, y, H, O, N, E) {
const Q = V(() => o.value ? [...new Set(r.value.map((d) => d[o.value.value]))] : []), n = Z(
((d, v, a) => d && d !== "" ? {
sortBy: d,
sortDesc: v === "desc",
sortPivotValue: a
} : null)(y.value, H.value, O.value)
);
let f = [];
const m = V(() => {
if (o.value) {
const a = Q.value.flatMap((s, R) => {
const g = i.value.map((h) => ({
...h,
pivotValue: s
// newColumn: pivotDomain.value[pivotInd - 1] === pivotDomain.value[pivotInd],
}));
return [
{ ...g[0], colType: `firstEntry ${R % 2 === 0 ? "evenPivot" : "oddPivot"}` },
...g.slice(1).map((h) => ({ ...h, colType: `nonFirstEntry ${R % 2 === 0 ? "evenPivot" : "oddPivot"}` }))
];
});
f = [
...p.value.map((s) => ({ ...s, type: "tableRow" })),
...a.map((s) => ({ ...s, type: "tableValue" }))
];
} else
f = [
...p.value.map((a) => ({ ...a, type: "tableRow" })),
...i.value.map((a) => ({ ...a, type: "tableValue" }))
];
const d = f.map((a) => {
const s = Object.assign(a);
return s.sortable && (s.sortType = "none"), n.value && s.value === n.value.sortBy && n.value.sortPivotValue ? n.value.sortPivotValue === s.pivotValue ? s.sortType = n.value.sortDesc ? "desc" : "asc" : s.sortType = "none" : n.value && s.value === n.value.sortBy && (s.sortType = n.value.sortDesc ? "desc" : "asc"), s;
});
let v = [];
return F.value ? v = [
{
text: l.value,
value: "index",
cssClass: I.value
},
...d.map((s) => ({ ...s, cssClass: [s.cssClass ?? "", s.colType].join(" ") }))
] : v = d.map((a) => ({ ...a, cssClass: [a.cssClass ?? "", a.colType].join(" ") })), v;
}), w = V(() => {
const d = [];
if (o.value) {
const v = m.value.reduce(
(a, s) => {
var L, B;
const R = s.pivotValue;
let g;
s.pivotValue ? o.value.formatFunc ? g = o.value.formatFunc(s.pivotValue) : g = s.pivotValue : g = null;
const h = a[a.length - 1];
return h && (s.type === "tableValue" || !N.value) && (((L = h.parent) == null ? void 0 : L.text) !== null || ((B = s.parent) == null ? void 0 : B.text) !== null) && h.text === g && !h.isIndex && h.originalText === R ? h.count++ : a.push({
type: "pivot",
isIndex: s.value === "index",
text: g,
originalText: R,
count: 1,
cssClass: s.cssClass ?? "",
parent: s.parent
}), a;
},
[]
);
d.push(v);
}
if (m.value.findIndex((v) => v.parent) > -1) {
const v = m.value.reduce(
(a, s) => {
var L;
const R = ((L = s.parent) == null ? void 0 : L.text) || null, g = s.pivotValue, h = a[a.length - 1];
return h && (s.type === "tableValue" || !N.value) && (h.text !== null || R !== null) && h.text === R && !h.isIndex && h.pivotValue === g ? h.count++ : a.push({
type: "parent",
isIndex: s.value === "index",
pivotValue: g,
text: R,
count: 1,
cssClass: s.cssClass ?? ""
}), a;
},
[]
);
d.push(v);
}
return d;
}), S = V(() => m.value.map((d) => d.value));
return {
clientSortOptions: n,
headerColumns: S,
headersForRenderParents: w,
headersForRender: m,
updateSortField: (d, v, a = !1, s = void 0, R = !1) => {
let g = null;
a ? g = v === "none" ? null : v : v === "none" ? g = "asc" : v === "asc" ? g = "desc" : g = c.value ? "asc" : null, g === null ? n.value = null : n.value = {
sortBy: d,
sortDesc: g === "desc",
sortPivotValue: s
}, R || E("updateSort", {
sortPivotValue: s,
sortType: g,
sortBy: d
});
}
};
}
function ze(r, l) {
const p = V(() => r.value.findIndex((c) => c === l.value) === -1 ? [l.value, ...r.value] : r.value), i = Z(l.value);
return {
rowsItemsComputed: p,
rowsPerPageRef: i,
updateRowsPerPage: (c) => {
i.value = c;
}
};
}
function He(r, l, p, i) {
const o = Z(r.value), c = V(() => Math.ceil(p.value / i.value)), F = V(
() => c.value === 0 || o.value === c.value
), I = V(() => o.value === 1);
return {
currentPaginationNumber: o,
maxPaginationNumber: c,
isLastPage: F,
isFirstPage: I,
nextPage: () => {
p.value !== 0 && (F.value || l.value || (o.value += 1));
},
prevPage: () => {
p.value !== 0 && (I.value || l.value || (o.value -= 1));
},
updatePage: (E) => {
l.value || (o.value = E);
},
updateCurrentPaginationNumber: (E) => {
o.value = E;
}
};
}
function qe(r, l, p, i, o) {
const c = V(() => (r.value - 1) * l.value + 1), F = V(() => Math.min(i.value.length, r.value * l.value)), I = V(() => l.value === -1 ? i.value : i.value.slice(c.value - 1, F.value)), y = V(() => p.value ? o.value ? I.value.map((O, N) => (O.dimensions = { index: c.value + N, ...O.dimensions }, O)) : I.value.map((O, N) => ({ index: c.value + N, ...O })) : I.value), H = V(() => y.value);
return {
currentPageFirstIndex: c,
currentPageLastIndex: F,
pageItems: H
};
}
const Ge = [
{ name: "scroll", description: "Triggered when scrolling" },
{ name: "clickRow", description: "Triggered when a row is clicked" },
{ name: "clickCell", description: "Triggered when a cell is clicked" },
{ name: "updateSort", description: "Triggered when sorting is updated" },
{ name: "updateFilter", description: "Triggered when filtering is updated" },
{ name: "updatePageItems", description: "Triggered when page items are updated" },
{ name: "updateTotalItems", description: "Triggered when total items are updated" },
{ name: "mouseover", description: "Triggered when mouse is over" },
{ name: "mouseleave", description: "Triggered when mouse leaves" }
], We = Ge.map((r) => r.name), Ue = ["id"], Ke = ["colspan"], Je = { class: "header" }, Qe = {
key: 3,
class: "header-text"
}, Xe = ["onClick"], Ye = { class: "header" }, Ze = {
key: 3,
class: "header-text"
}, et = ["id"], tt = ["role", "onClick", "onMouseover", "onMouseleave"], st = { id: "errors" }, rt = { style: { color: "red" } }, ot = { key: 6 }, nt = /* @__PURE__ */ Ne({
__name: "PivotDataTable",
props: _e,
emits: We,
setup(r, { expose: l, emit: p }) {
const i = Z([]), o = Z();
De("dataTable", o);
const c = r, {
measures: F,
dimensions: I,
pivot: y,
locale: H,
tableNodeId: O,
currentPage: N,
filterOptions: E,
emptyMessage: Q,
noRowsCustom: P,
items: n,
loading: f,
mustSort: m,
rowsItems: w,
rowsPerPage: S,
searchField: b,
searchValue: d,
showIndex: v,
sortBy: a,
sortType: s,
sortPivotValue: R,
showIndexSymbol: g,
showIndexClass: h,
nullFillText: L,
hideFooter: B,
customTableRowClass: Se,
customTableDataClass: ke,
splitDimensionHeaders: Te
} = Me(c), j = Oe(), ee = p, { clientSortOptions: Ie, headersForRenderParents: xe, headersForRender: q, updateSortField: se } = Le(
n,
g,
I,
F,
y,
m,
v,
h,
a,
s,
R,
Te,
ee
), { totalItems: fe, totalItemsLength: re } = Ee(
q,
Ie,
E,
n,
y,
I,
b,
d,
ee
), { rowsItemsComputed: Fe, rowsPerPageRef: oe, updateRowsPerPage: $e } = ze(w, S), { currentPaginationNumber: ie, maxPaginationNumber: de, isLastPage: ye, isFirstPage: ge, nextPage: ne, prevPage: le, updatePage: ae } = He(N, f, re, oe), { currentPageFirstIndex: pe, currentPageLastIndex: ce, pageItems: me } = qe(
ie,
oe,
v,
fe,
y
), Ve = (u, A, t, C) => {
ee("clickCell", u, A, t, C);
};
ue(oe, () => {
ae(1);
}), ue([d, E], () => {
ae(1);
}), ue(
[n, y],
() => {
Re();
},
{ immediate: !0 }
);
const we = Z(!1);
function Re() {
i.value = [], y.value && Array.isArray(y.value) ? i.value.push({
type: "propError",
text: "pivot is of type Array"
}) : y.value && Ae() && i.value.push({
type: "dataShapeError",
text: "duplicate item Objects (by rows * columns) found in items"
});
}
Be(() => {
o.value.addEventListener("scroll", () => {
we.value = o.value.scrollLeft > 0;
});
}), l({
currentPageFirstIndex: pe,
currentPageLastIndex: ce,
clientItemsLength: re,
totalItems: fe,
maxPaginationNumber: de,
currentPaginationNumber: ie,
isLastPage: ye,
isFirstPage: ge,
nextPage: ne,
prevPage: le,
updatePage: ae,
updateSortField: se,
rowsPerPageOptions: Fe,
rowsPerPageActiveOption: oe,
updateRowsPerPageActiveOption: $e
});
function Ae() {
const u = [...I.value.map((t) => t.value), y.value.value], A = /* @__PURE__ */ new Set();
for (let t = 0; t < n.value.length; t++) {
const C = u.map((x) => n.value[t][x]).join("|");
if (A.has(C))
return !0;
A.add(C);
}
return !1;
}
return (u, A) => (k(), T(U, null, [
z("div", {
ref_key: "dataTable",
ref: o,
class: J(["vue3-pivot-data-table", [u.tableClassName]]),
onScroll: A[0] || (A[0] = (t) => u.$emit("scroll", t))
}, [
z("table", {
id: e(O),
class: J({
[u.innerTableClassName]: !0,
"show-shadow": we.value
})
}, [
e(j)["customize-headers"] ? $(u.$slots, "customize-headers", ve(_({ key: 0 }, { headersForRender: e(q), updateSortField: e(se) })), void 0, !0) : e(q).length && !u.hideHeader ? (k(), T("thead", {
key: 1,
class: J([u.headerClassName])
}, [
(k(!0), T(U, null, Y(e(xe), (t, C) => (k(), T("tr", {
key: "headerRowGroup" + C
}, [
(k(!0), T(U, null, Y(t, (x, D) => (k(), T("th", {
key: "pivotHeader" + D,
colspan: x.count,
class: J([
{
shadow: D === 0,
[x.cssClass ?? ""]: !0,
[x.type ?? ""]: !0
}
])
}, [
z("span", Je, [
e(j)[`header-${x.type}-${x.text}`] ? $(u.$slots, `header-${x.type}-${x.text}`, _({
key: 0,
ref_for: !0
}, x), void 0, !0) : e(j)[`header-${x.type}`] ? $(u.$slots, `header-${x.type}`, _({
key: 1,
ref_for: !0
}, x), void 0, !0) : e(j).header ? $(u.$slots, "header", _({
key: 2,
ref_for: !0
}, x), void 0, !0) : (k(), T("span", Qe, M(x.text), 1))
])
], 10, Ke))), 128))
]))), 128)),
z("tr", null, [
(k(!0), T(U, null, Y(e(q), (t, C) => (k(), T("th", {
key: C,
role: "button",
tabindex: 0,
class: J([
{
sortable: t.sortable,
none: t.sortable && t.sortType === "none",
desc: t.sortable && t.sortType === "desc",
asc: t.sortable && t.sortType === "asc",
shadow: C === 0,
[t.cssClass ?? ""]: !0,
[t.type ?? ""]: !0
}
]),
onClick: je((x) => t.sortable && t.sortType ? e(se)(t.value, t.sortType, !1, t.pivotValue) : null, ["stop"])
}, [
z("span", Ye, [
e(j)[`header-${t.value}`] ? $(u.$slots, `header-${t.value}`, _({
key: 0,
ref_for: !0
}, t), void 0, !0) : e(j)[`header-${t.value.toLowerCase()}`] ? $(u.$slots, `header-${t.value.toLowerCase()}`, _({
key: 1,
ref_for: !0
}, t), void 0, !0) : e(j).header ? $(u.$slots, "header", _({
key: 2,
ref_for: !0
}, t), void 0, !0) : (k(), T("span", Ze, M(t.text), 1)),
t.sortable && e(j)["sort-icon"] ? $(u.$slots, "sort-icon", _({
key: 4,
ref_for: !0
}, t), void 0, !0) : t.sortable ? (k(), T("i", {
key: t.sortType ? t.sortType : "none",
class: J(["sortType-icon", { desc: t.sortType === "desc" }])
}, null, 2)) : te("", !0)
])
], 10, Xe))), 128))
])
], 2)) : te("", !0),
z("tbody", null, [
(k(!0), T(U, null, Y(e(me), (t, C) => {
var x;
return k(), T("tr", {
id: `row-${C}`,
key: C,
class: J([
{ [u.oddRowClass]: (C + 1) % 2 === 0 },
{ [u.evenRowClass]: C % 2 === 0 },
...((x = e(Se)) == null ? void 0 : x({ index: C, item: t })) ?? []
]),
role: "button",
tabindex: 0
}, [
(k(!0), T(U, null, Y(e(q), (D, X) => {
var be;
return k(), T("td", {
key: X,
role: e(q)[X].clickable || e(q)[X].hoverable ? "button" : "",
tabindex: "0",
class: J([
{
[u.oddRowCellClass]: (C + 1) % 2 === 0,
[u.evenRowCellClass]: C % 2 === 0,
shadow: X === 0,
[D.cssClass ?? ""]: !0,
[D.type ?? ""]: !0
},
...((be = e(ke)) == null ? void 0 : be({
header: D,
item: e(y) && D.pivotValue ? t.items.find((W) => W[e(y).value] === D.pivotValue) : e(y) ? t.dimensions : t,
index: C
})) ?? []
]),
onClick: (W) => Ve(t, e(q)[X], C, W),
onMouseover: (W) => ee("mouseover", t, e(q)[X], W),
onMouseleave: (W) => ee("mouseleave", t, W)
}, [
e(j)[`item-${D.value}`] ? $(u.$slots, `item-${D.value}`, _(
{
key: 0,
ref_for: !0
},
e(y) && D.pivotValue ? t.items.find((W) => W[e(y).value] === D.pivotValue) : e(y) ? t.dimensions : t
), void 0, !0) : e(j).item ? $(u.$slots, "item", _({
key: 1,
ref_for: !0
}, { pivot: e(y), item: t }), void 0, !0) : e(y) ? (k(), T(U, { key: 2 }, [
K(M(e(Ce)(D, t, e(y), e(H), e(L))), 1)
], 64)) : (k(), T(U, { key: 3 }, [
K(M(e(he)(D, t, e(H), e(L))), 1)
], 64))
], 42, tt);
}), 128))
], 10, et);
}), 128))
]),
e(j)["customize-footers"] ? $(u.$slots, "customize-footers", ve(_({ key: 2 }, {
headersForRender: e(q),
updateSortField: e(se),
generateCellContentBasedOnPivot: e(Ce),
generateCellContent: e(he),
locale: e(H)
})), void 0, !0) : te("", !0)
], 10, Ue)
], 34),
i.value.length ? $(u.$slots, "errors", { key: 0 }, () => [
z("div", st, [
z("ul", null, [
(k(!0), T(U, null, Y(i.value, (t, C) => (k(), T("li", {
key: "error" + C
}, [
z("span", rt, M(t.type) + ":", 1),
K(" " + M(t.text), 1)
]))), 128))
])
])
], !0) : e(f) ? $(u.$slots, "loading", { key: 1 }, () => [
A[3] || (A[3] = K(" Slot: loading "))
], !0) : !e(n).length && !e(f) && e(P) ? $(u.$slots, "no-rows-custom", { key: 2 }, () => [
A[4] || (A[4] = K(" Slot: no-rows-custom "))
], !0) : !e(n).length && !e(f) ? $(u.$slots, "no-rows", { key: 3 }, () => [
K(M(e(Q)), 1)
], !0) : !e(me).length && !e(f) ? $(u.$slots, "empty-message", { key: 4 }, () => [
K(M(e(Q)), 1)
], !0) : te("", !0),
e(j).footer ? $(u.$slots, "footer", ve(_({ key: 5 }, {
currentPageFirstIndex: e(pe),
currentPageLastIndex: e(ce),
rowsOfPageSeparatorMessage: u.rowsOfPageSeparatorMessage,
totalItemsLength: e(re),
isFirstPage: e(ge),
isLastPage: e(ye),
currentPaginationNumber: e(ie),
maxPaginationNumber: e(de),
nextPage: e(ne),
prevPage: e(le),
updatePage: e(ae)
})), void 0, !0) : e(B) ? te("", !0) : (k(), T("div", ot, [
K(M(`${e(pe)}–${e(ce)}`) + " " + M(u.rowsOfPageSeparatorMessage) + " " + M(e(re)) + " ", 1),
z("button", {
onClick: A[1] || (A[1] = //@ts-ignore
(...t) => e(le) && e(le)(...t))
}, M("<")),
K(" " + M(e(N)) + " of " + M(e(de)) + " ", 1),
z("button", {
onClick: A[2] || (A[2] = //@ts-ignore
(...t) => e(ne) && e(ne)(...t))
}, ">")
]))
], 64));
}
});
const lt = (r, l) => {
const p = r.__vccOpts || r;
for (const [i, o] of l)
p[i] = o;
return p;
}, it = /* @__PURE__ */ lt(nt, [["__scopeId", "data-v-6c36e521"]]);
export {
it as default
};