lv3-datatable
Version:
Integrate the Laravel datatables with your Vue app without using JQuery. It can handle listing data locally and remote.
786 lines (785 loc) • 27.4 kB
JavaScript
import { openBlock as i, createElementBlock as d, normalizeClass as o, createElementVNode as u, withKeys as m, createCommentVNode as f, Fragment as g, renderList as L, renderSlot as P, createTextVNode as v, toDisplayString as h, resolveComponent as O, withDirectives as T, vModelSelect as M, vModelText as F, normalizeStyle as D, createVNode as N } from "vue";
const R = (l, t, s) => {
let r, n, e, a, c;
t == null && (t = 100);
function b() {
let y = Date.now() - a;
y < t && y >= 0 ? r = setTimeout(b, t - y) : (r = null, s || (c = l.apply(e, n), e = n = null));
}
let C = function() {
e = this, n = arguments, a = Date.now();
let y = s && !r;
return r || (r = setTimeout(b, t)), y && (c = l.apply(e, n), e = n = null), c;
};
return C.clear = function() {
r && (clearTimeout(r), r = null);
}, C.flush = function() {
r && (c = l.apply(e, n), e = n = null, clearTimeout(r), r = null);
}, C;
};
const x = (l, t) => {
const s = l.__vccOpts || l;
for (const [r, n] of t)
s[r] = n;
return s;
}, V = {
name: "Paginate",
props: {
value: {
type: Number
},
pageCount: {
type: Number,
required: !0
},
forcePage: {
type: Number
},
clickHandler: {
type: Function,
default: () => {
}
},
pageRange: {
type: Number,
default: 3
},
marginPages: {
type: Number,
default: 1
},
prevText: {
type: String,
default: "Prev"
},
nextText: {
type: String,
default: "Next"
},
breakViewText: {
type: String,
default: "\u2026"
},
containerClass: {
type: String
},
pageClass: {
type: String
},
pageLinkClass: {
type: String
},
prevClass: {
type: String
},
prevLinkClass: {
type: String
},
nextClass: {
type: String
},
nextLinkClass: {
type: String
},
breakViewClass: {
type: String
},
breakViewLinkClass: {
type: String
},
activeClass: {
type: String,
default: "active"
},
disabledClass: {
type: String,
default: "disabled"
},
noLiSurround: {
type: Boolean,
default: !1
},
firstLastButton: {
type: Boolean,
default: !1
},
firstButtonText: {
type: String,
default: "First"
},
lastButtonText: {
type: String,
default: "Last"
},
hidePrevNext: {
type: Boolean,
default: !1
}
},
beforeUpdate() {
this.forcePage !== void 0 && this.forcePage !== this.selected && (this.selected = this.forcePage);
},
computed: {
selected: {
get: function() {
return this.value || this.innerValue;
},
set: function(l) {
this.innerValue = l;
}
},
pages: function() {
let l = {};
if (this.pageCount <= this.pageRange)
for (let t = 0; t < this.pageCount; t++)
l[t] = {
index: t,
content: t + 1,
selected: t === this.selected - 1
};
else {
const t = Math.floor(this.pageRange / 2);
let s = (a) => {
l[a] = {
index: a,
content: a + 1,
selected: a === this.selected - 1
};
}, r = (a) => {
l[a] = {
disabled: !0,
breakView: !0
};
};
for (let a = 0; a < this.marginPages; a++)
s(a);
let n = 0;
this.selected - t > 0 && (n = this.selected - 1 - t);
let e = n + this.pageRange - 1;
e >= this.pageCount && (e = this.pageCount - 1, n = e - this.pageRange + 1);
for (let a = n; a <= e && a <= this.pageCount - 1; a++)
s(a);
n > this.marginPages && r(n - 1), e + 1 < this.pageCount - this.marginPages && r(e + 1);
for (let a = this.pageCount - 1; a >= this.pageCount - this.marginPages; a--)
s(a);
}
return l;
}
},
data() {
return {
innerValue: 1
};
},
methods: {
handlePageSelected(l) {
this.selected !== l && (this.innerValue = l, this.$emit("input", l), this.clickHandler(l));
},
prevPage() {
this.selected <= 1 || this.handlePageSelected(this.selected - 1);
},
nextPage() {
this.selected >= this.pageCount || this.handlePageSelected(this.selected + 1);
},
firstPageSelected() {
return this.selected === 1;
},
lastPageSelected() {
return this.selected === this.pageCount || this.pageCount === 0;
},
selectFirstPage() {
this.selected <= 1 || this.handlePageSelected(1);
},
selectLastPage() {
this.selected >= this.pageCount || this.handlePageSelected(this.pageCount);
}
}
}, A = ["tabindex", "innerHTML"], B = ["tabindex", "innerHTML"], E = ["onClick", "onKeyup"], H = ["tabindex", "innerHTML"], I = ["tabindex", "innerHTML"], K = ["innerHTML"], q = ["innerHTML"], U = ["onClick", "onKeyup"], z = ["innerHTML"], Z = ["innerHTML"];
function j(l, t, s, r, n, e) {
return s.noLiSurround ? (i(), d("div", {
key: 1,
class: o(s.containerClass)
}, [
s.firstLastButton ? (i(), d("a", {
key: 0,
onClick: t[8] || (t[8] = (a) => e.selectFirstPage()),
onKeyup: t[9] || (t[9] = m((a) => e.selectFirstPage(), ["enter"])),
class: o([s.pageLinkClass, e.firstPageSelected() ? s.disabledClass : ""]),
tabindex: "0",
innerHTML: s.firstButtonText
}, null, 42, K)) : f("", !0),
e.firstPageSelected() && s.hidePrevNext ? f("", !0) : (i(), d("a", {
key: 1,
onClick: t[10] || (t[10] = (a) => e.prevPage()),
onKeyup: t[11] || (t[11] = m((a) => e.prevPage(), ["enter"])),
class: o([s.prevLinkClass, e.firstPageSelected() ? s.disabledClass : ""]),
tabindex: "0",
innerHTML: s.prevText
}, null, 42, q)),
(i(!0), d(g, null, L(e.pages, (a) => (i(), d(g, null, [
a.breakView ? (i(), d("a", {
key: 0,
class: o([s.pageLinkClass, s.breakViewLinkClass, a.disabled ? s.disabledClass : ""]),
tabindex: "0"
}, [
P(l.$slots, "breakViewContent", {}, () => [
v(h(s.breakViewText), 1)
], !0)
], 2)) : a.disabled ? (i(), d("a", {
key: 1,
class: o([s.pageLinkClass, a.selected ? s.activeClass : "", s.disabledClass]),
tabindex: "0"
}, h(a.content), 3)) : (i(), d("a", {
key: 2,
onClick: (c) => e.handlePageSelected(a.index + 1),
onKeyup: m((c) => e.handlePageSelected(a.index + 1), ["enter"]),
class: o([s.pageLinkClass, a.selected ? s.activeClass : ""]),
tabindex: "0"
}, h(a.content), 43, U))
], 64))), 256)),
e.lastPageSelected() && s.hidePrevNext ? f("", !0) : (i(), d("a", {
key: 2,
onClick: t[12] || (t[12] = (a) => e.nextPage()),
onKeyup: t[13] || (t[13] = m((a) => e.nextPage(), ["enter"])),
class: o([s.nextLinkClass, e.lastPageSelected() ? s.disabledClass : ""]),
tabindex: "0",
innerHTML: s.nextText
}, null, 42, z)),
s.firstLastButton ? (i(), d("a", {
key: 3,
onClick: t[14] || (t[14] = (a) => e.selectLastPage()),
onKeyup: t[15] || (t[15] = m((a) => e.selectLastPage(), ["enter"])),
class: o([s.pageLinkClass, e.lastPageSelected() ? s.disabledClass : ""]),
tabindex: "0",
innerHTML: s.lastButtonText
}, null, 42, Z)) : f("", !0)
], 2)) : (i(), d("ul", {
key: 0,
class: o(s.containerClass)
}, [
s.firstLastButton ? (i(), d("li", {
key: 0,
class: o([s.pageClass, e.firstPageSelected() ? s.disabledClass : ""])
}, [
u("a", {
onClick: t[0] || (t[0] = (a) => e.selectFirstPage()),
onKeyup: t[1] || (t[1] = m((a) => e.selectFirstPage(), ["enter"])),
class: o(s.pageLinkClass),
tabindex: e.firstPageSelected() ? -1 : 0,
innerHTML: s.firstButtonText
}, null, 42, A)
], 2)) : f("", !0),
e.firstPageSelected() && s.hidePrevNext ? f("", !0) : (i(), d("li", {
key: 1,
class: o([s.prevClass, e.firstPageSelected() ? s.disabledClass : ""])
}, [
u("a", {
onClick: t[2] || (t[2] = (a) => e.prevPage()),
onKeyup: t[3] || (t[3] = m((a) => e.prevPage(), ["enter"])),
class: o(s.prevLinkClass),
tabindex: e.firstPageSelected() ? -1 : 0,
innerHTML: s.prevText
}, null, 42, B)
], 2)),
(i(!0), d(g, null, L(e.pages, (a) => (i(), d("li", {
class: o([s.pageClass, a.selected ? s.activeClass : "", a.disabled ? s.disabledClass : "", a.breakView ? s.breakViewClass : ""])
}, [
a.breakView ? (i(), d("a", {
key: 0,
class: o([s.pageLinkClass, s.breakViewLinkClass]),
tabindex: "0"
}, [
P(l.$slots, "breakViewContent", {}, () => [
v(h(s.breakViewText), 1)
], !0)
], 2)) : a.disabled ? (i(), d("a", {
key: 1,
class: o(s.pageLinkClass),
tabindex: "0"
}, h(a.content), 3)) : (i(), d("a", {
key: 2,
onClick: (c) => e.handlePageSelected(a.index + 1),
onKeyup: m((c) => e.handlePageSelected(a.index + 1), ["enter"]),
class: o(s.pageLinkClass),
tabindex: "0"
}, h(a.content), 43, E))
], 2))), 256)),
e.lastPageSelected() && s.hidePrevNext ? f("", !0) : (i(), d("li", {
key: 2,
class: o([s.nextClass, e.lastPageSelected() ? s.disabledClass : ""])
}, [
u("a", {
onClick: t[4] || (t[4] = (a) => e.nextPage()),
onKeyup: t[5] || (t[5] = m((a) => e.nextPage(), ["enter"])),
class: o(s.nextLinkClass),
tabindex: e.lastPageSelected() ? -1 : 0,
innerHTML: s.nextText
}, null, 42, H)
], 2)),
s.firstLastButton ? (i(), d("li", {
key: 3,
class: o([s.pageClass, e.lastPageSelected() ? s.disabledClass : ""])
}, [
u("a", {
onClick: t[6] || (t[6] = (a) => e.selectLastPage()),
onKeyup: t[7] || (t[7] = m((a) => e.selectLastPage(), ["enter"])),
class: o(s.pageLinkClass),
tabindex: e.lastPageSelected() ? -1 : 0,
innerHTML: s.lastButtonText
}, null, 42, I)
], 2)) : f("", !0)
], 2));
}
const J = /* @__PURE__ */ x(V, [["render", j], ["__scopeId", "data-v-73cbd070"]]), _ = ({ rowClasses: l, colClasses: t, table: s, paginate: r }) => ({
row: l,
col: t,
table: s,
paginate: r
}), X = (l = "bootstrap3") => {
switch (l) {
case "bootstrap5":
return _({
rowClasses: "row",
colClasses: "col-md-12",
table: {
colClasses: "col-md-12",
tableClasses: "table table-striped table-bordered table-sm",
tableContainer: "position-relative",
formClasses: "form-horizontal",
inputSearchClasses: "form-control",
inputLengthOptionClasses: "form-control"
},
paginate: {
colClasses: "col-md-12",
containerClass: "pagination",
pageClass: "page-item",
pageLinkClass: "page-link"
}
});
case "bootstrap4":
return _({
rowClasses: "row",
colClasses: "col-md-12",
table: {
colClasses: "col-md-12",
tableClasses: "table table-striped table-bordered table-sm",
tableContainer: "position-relative",
formClasses: "form-horizontal",
inputSearchClasses: "form-control",
inputLengthOptionClasses: "form-control"
},
paginate: {
colClasses: "col-md-12",
containerClass: "pagination",
pageClass: "page-item",
pageLinkClass: "page-link"
}
});
default:
return _({
rowClasses: "row",
colClasses: "col-md-12",
table: {
colClasses: "col-md-12",
tableClasses: "table table-striped table-bordered",
tableContainer: "position-relative",
formClasses: "form-horizontal",
inputSearchClasses: "form-control",
inputLengthOptionClasses: "form-control"
},
paginate: {
colClasses: "col-md-12",
containerClass: "pagination",
pageClass: "page-item",
pageLinkClass: null
}
});
}
}, k = (l, t) => {
t == null ? localStorage.removeItem(l) : localStorage.setItem(l, JSON.stringify(t));
}, S = (l) => JSON.parse(localStorage.getItem(l)), G = (l, { length: t, search: s, page: r, start: n, defaultOrder: e, recordsTotal: a, recordsFiltered: c }) => {
k(`${l}_length`, t), k(`${l}_search`, s), k(`${l}_page`, r), k(`${l}_start`, n), k(`${l}_defaultOrder`, e), k(`${l}_recordsTotal`, a), k(`${l}_recordsFiltered`, c);
}, Q = (l) => {
const t = S(`${l}_length`), s = S(`${l}_search`), r = S(`${l}_page`), n = S(`${l}_start`), e = S(`${l}_defaultOrder`), a = S(`${l}_recordsTotal`), c = S(`${l}_recordsFiltered`);
return { length: t, search: s, page: r, start: n, defaultOrder: e, recordsTotal: a, recordsFiltered: c };
}, W = { setDataTableState: G, getDataTableState: Q }, Y = "No data available in table", $ = "Showing _START_ to _END_ of _TOTAL_ entries", ee = "Showing 0 to 0 of 0 entries", te = "(filtered from _MAX_ total entries)", se = "", ae = ",", le = "Show _MENU_ entries", ne = "Loading...", re = "Processing...", ie = "Search:", de = "No matching records found", oe = {
sFirst: "First",
sLast: "Last",
sNext: "Next",
sPrevious: "Previous"
}, ce = {
sSortAscending: ": activate to sort column ascending",
sSortDescending: ": activate to sort column descending"
}, ue = {
sEmptyTable: Y,
sInfo: $,
sInfoEmpty: ee,
sInfoFiltered: te,
sInfoPostFix: se,
sInfoThousands: ae,
sLengthMenu: le,
sLoadingRecords: ne,
sProcessing: re,
sSearch: ie,
sZeroRecords: de,
oPaginate: oe,
oAria: ce
}, he = "\u1798\u17B7\u1793\u1798\u17B6\u1793\u1791\u17B7\u1793\u17D2\u1793\u1793\u17D0\u1799\u1780\u17D2\u1793\u17BB\u1784\u178F\u17B6\u179A\u17B6\u1784\u1793\u17C1\u17C7\u1791\u17C1", ge = "\u1794\u1784\u17D2\u17A0\u17B6\u1789\u1787\u17BD\u179A\u1791\u17B8 _START_ \u178A\u179B\u17CB\u1791\u17B8 _END_ \u1780\u17D2\u1793\u17BB\u1784\u1785\u17C6\u178E\u17C4\u1798 _TOTAL_ \u1787\u17BD\u179A", fe = "\u1794\u1784\u17D2\u17A0\u17B6\u1789\u1787\u17BD\u179A\u1791\u17B8 0 \u178A\u179B\u17CB\u1791\u17B8 0 \u1780\u17D2\u1793\u17BB\u1784\u1785\u17C6\u178E\u17C4\u1798 0 \u1787\u17BD\u179A", Ce = "(\u1794\u17B6\u1793\u1785\u1798\u17D2\u179A\u17B6\u1789\u17CB\u1785\u17C1\u1789\u1796\u17B8\u1791\u17B7\u1793\u17D2\u1793\u1793\u17D0\u1799\u179F\u179A\u17BB\u1794 _MAX_ \u1787\u17BD\u179A)", be = "", me = ",", ve = "\u1794\u1784\u17D2\u17A0\u17B6\u1789 _MENU_ \u1787\u17BD\u179A", ye = "\u1780\u17C6\u1796\u17BB\u1784\u1795\u17D2\u1791\u17BB\u1780...", ke = "\u1780\u17C6\u1796\u17BB\u1784\u178A\u17C6\u178E\u17BE\u179A\u1780\u17B6\u179A...", Se = "\u179F\u17D2\u179C\u17C2\u1784\u179A\u1780:", Le = "\u1798\u17B7\u1793\u1798\u17B6\u1793\u1791\u17B7\u1793\u17D2\u1793\u1793\u17D0\u1799\u178F\u17D2\u179A\u17BC\u179C\u178F\u17B6\u1798\u179B\u1780\u17D2\u1781\u1781\u178E\u17D2\u178C\u179F\u17D2\u179C\u17C2\u1784\u179A\u1780\u1791\u17C1", _e = {
sFirst: "\u178A\u17C6\u1794\u17BC\u1784\u1782\u17C1",
sLast: "\u1785\u17BB\u1784\u1780\u17D2\u179A\u17C4\u1799",
sNext: "\u1794\u1793\u17D2\u1791\u17B6\u1794\u17CB",
sPrevious: "\u1780\u17D2\u179A\u17C4\u1799"
}, Pe = {
sSortAscending: ": \u1785\u17BB\u1785\u178A\u17BE\u1798\u17D2\u1794\u17B8\u179A\u17C0\u1794\u1787\u17BD\u179A\u1788\u179A\u1793\u17C1\u17C7\u178F\u17B6\u1798\u179B\u17C6\u178A\u17B6\u1794\u17CB\u17A1\u17BE\u1784",
sSortDescending: ": \u1785\u17BB\u1785\u178A\u17BE\u1798\u17D2\u1794\u17B8\u179A\u17C0\u1794\u1787\u17BD\u179A\u1788\u179A\u1793\u17C1\u17C7\u178F\u17B6\u1798\u179B\u17C6\u178A\u17B6\u1794\u17CB\u1785\u17BB\u17C7"
}, Te = {
sEmptyTable: he,
sInfo: ge,
sInfoEmpty: fe,
sInfoFiltered: Ce,
sInfoPostFix: be,
sInfoThousands: me,
sLengthMenu: ve,
sLoadingRecords: ye,
sProcessing: ke,
sSearch: Se,
sZeroRecords: Le,
oPaginate: _e,
oAria: Pe
}, xe = () => ({
en: ue,
km: Te
});
const { setDataTableState: pe, getDataTableState: we } = W, Oe = {
name: "DataTable",
components: { Paginate: J },
props: {
axios: {
type: [Object, Function, null],
default: null
},
tableId: {
type: String,
required: !0
},
columns: {
type: Array,
required: !0
},
locale: {
type: String,
default: "en"
},
lengthOptions: {
type: Array,
default: () => [
{ label: 10, value: 10 },
{ label: 25, value: 25 },
{ label: 50, value: 50 },
{ label: 100, value: 100 }
]
},
order: {
type: [null, Array],
default: null
},
design: {
type: String,
default: "bootstrap3"
},
savedState: {
type: Boolean,
default: !1
},
serverSide: {
type: Boolean,
default: !1
},
url: {
type: String,
default: null
},
dataRows: {
type: Array,
default: () => []
}
},
data() {
return {
rows: [],
length: this.lengthOptions[0].value,
start: 0,
pages: 0,
page: 1,
recordsTotal: 0,
recordsFiltered: 0,
search: null,
draw: 0,
locales: xe(),
defaultOrder: [null, "asc"],
isLoading: !1
};
},
computed: {
sInfo() {
return this.selectedLocale.sInfo.replace("_START_", this.length * this.start + 1).replace("_END_", this.length * (this.start + 1)).replace("_TOTAL_", this.recordsTotal);
},
sLengthMenu() {
return this.selectedLocale.sLengthMenu.split(" _MENU_ ");
},
selectedLocale() {
return this.locales[this.locale];
},
theme() {
return X(this.design);
}
},
watch: {
length() {
this.fetchData(this.page);
}
},
methods: {
refresh() {
this.fetchData(this.page);
},
onClickOrderColumn(l = null) {
if (l !== null && l >= 0) {
if (l > this.columns.length - 1) {
console.error(`The order column index ${l} is out of range`);
return;
}
if (!this.columns[l].orderable)
return;
this.defaultOrder = [
l,
this.defaultOrder[1] === "asc" ? "desc" : "asc"
], this.fetchData(this.page);
}
},
onSearch: R(function(l) {
this.search = l.target.value, this.fetchData();
}, 500),
fetchData: function(l = 1) {
this.serverSide ? this.requestDataApi(l) : this.requestLocalData(l);
},
requestDataApi(l) {
var s;
this.page = l, this.start = l - 1, this.draw++;
const t = new FormData();
t.append("draw", this.draw), this.columns.forEach((r, n) => {
Object.keys(r).forEach((e) => {
var a;
["data", "name", "orderable", "searchable"].includes(e) && (t.append(`columns[${n}][${e}]`, (a = r[e]) != null ? a : null), e === "searchable" && r[e] && (t.append(`columns[${n}][search][value]`, ""), t.append(`columns[${n}][search][regex]`, "false")));
});
}), this.defaultOrder[0] !== null && this.defaultOrder[0] >= 0 && (t.append("order[0][column]", this.defaultOrder[0]), t.append("order[0][dir]", this.defaultOrder[1])), t.append("start", this.start), t.append("length", this.length), t.append("search[value]", (s = this.search) != null ? s : ""), t.append("search[regex]", "false"), this.saveStates(), this.isLoading = !0, this.axios.post(this.url, t).then(({ data: r }) => {
if (r.data) {
this.rows = r.data;
const { recordsTotal: n, recordsFiltered: e } = r;
this.recordsTotal = n, this.recordsFiltered = e, this.pages = Math.ceil(this.recordsFiltered / this.length);
}
}).finally(() => {
this.isLoading = !1;
});
},
requestLocalData(l) {
this.page = l, this.start = l - 1, this.saveStates();
let t = this.dataRows;
const s = this.columns.map((r) => {
if (r.searchable)
return r;
}).filter((r) => r !== void 0);
s.length && this.search !== "" && this.search !== null && (t = t.map((r) => {
for (const n in s) {
const e = s[n].data;
if (r[e].toString().includes(this.search))
return r;
}
}).filter((r) => r !== void 0)), t = t.sort(function(r, n) {
return r > n ? 1 : -1;
}), this.defaultOrder && (this.rows = t.slice(
this.start * this.length,
this.start * this.length + parseInt(this.length)
)), this.recordsTotal = this.dataRows.length, this.recordsFiltered = t.length, this.pages = Math.ceil(this.recordsFiltered / this.length);
},
initStates() {
if (this.savedState) {
const {
length: l,
search: t,
page: s,
start: r,
defaultOrder: n,
recordsTotal: e,
recordsFiltered: a
} = we(this.tableId);
this.length = l != null ? l : this.lengthOptions[0].value, this.search = t != null ? t : null, this.page = s != null ? s : 1, this.start = r != null ? r : 0, this.defaultOrder = n != null ? n : this.defaultOrder, this.recordsTotal = e != null ? e : 0, this.recordsFiltered = a != null ? a : 0;
}
},
saveStates() {
this.savedState && pe(this.tableId, {
length: this.length,
search: this.search,
page: this.page,
start: this.start,
defaultOrder: this.defaultOrder,
recordsTotal: this.recordsTotal,
recordsFiltered: this.recordsFiltered
});
}
},
mounted() {
this.order && (this.defaultOrder = this.order, this.onClickOrderColumn(this.defaultOrder[0])), this.initStates(), this.fetchData(this.page);
}
}, Me = { class: "table-header-container" }, Fe = { class: "table-header-length-options" }, De = ["value"], Ne = { class: "table-header-search" }, Re = {
key: 0,
class: "loading-container"
}, Ve = { class: "loading-content" }, Ae = { class: "m-0" }, Be = ["id"], Ee = ["onClick"], He = {
key: 0,
class: "fa-solid fa-arrow-down-short-wide"
}, Ie = {
key: 1,
class: "fa-solid fa-arrow-up-short-wide"
}, Ke = {
key: 1,
class: "fa fa-sort",
style: { color: "#dddddd" }
}, qe = { key: 1 }, Ue = ["colspan"], ze = { class: "text-muted text-center" }, Ze = { class: "table-paginate-container" };
function je(l, t, s, r, n, e) {
const a = O("paginate");
return i(), d("div", {
class: o(e.theme.row)
}, [
u("div", {
class: o(e.theme.col)
}, [
u("div", Me, [
u("div", Fe, [
v(h(e.sLengthMenu[0]) + " ", 1),
u("div", {
class: o(e.theme.table.formClasses)
}, [
T(u("select", {
"onUpdate:modelValue": t[0] || (t[0] = (c) => n.length = c),
class: o(e.theme.table.inputLengthOptionClasses)
}, [
(i(!0), d(g, null, L(s.lengthOptions, (c, b) => (i(), d("option", {
key: b,
value: c.value
}, h(c.label), 9, De))), 128))
], 2), [
[M, n.length]
])
], 2),
v(" " + h(e.sLengthMenu[1]), 1)
]),
u("div", Ne, [
v(h(e.selectedLocale.sSearch) + " ", 1),
u("div", {
class: o(e.theme.table.formClasses)
}, [
T(u("input", {
"onUpdate:modelValue": t[1] || (t[1] = (c) => n.search = c),
class: o(e.theme.table.inputSearchClasses),
type: "text",
onKeydown: t[2] || (t[2] = (...c) => e.onSearch && e.onSearch(...c))
}, null, 34), [
[F, n.search]
])
], 2)
])
])
], 2),
u("div", {
class: o(e.theme.table.colClasses)
}, [
u("div", {
class: o(e.theme.table.tableContainer)
}, [
n.isLoading ? (i(), d("div", Re, [
u("div", Ve, [
u("p", Ae, h(e.selectedLocale.sLoadingRecords), 1)
])
])) : f("", !0),
u("table", {
id: s.tableId,
class: o(e.theme.table.tableClasses)
}, [
u("thead", null, [
u("tr", null, [
(i(!0), d(g, null, L(s.columns, (c, b) => (i(), d("th", {
key: b,
style: D(`${c.width ? `width: ${c.width}!important;` : ""}`)
}, [
u("div", {
class: o([{ "cursor-pointer": c.orderable }, "table-header-th"]),
onClick: (C) => e.onClickOrderColumn(b)
}, [
u("span", null, h(c.title), 1),
c.orderable ? (i(), d(g, { key: 0 }, [
n.defaultOrder[0] !== null && n.defaultOrder[0] === b ? (i(), d(g, { key: 0 }, [
n.defaultOrder[1] === "asc" ? (i(), d("i", He)) : f("", !0),
n.defaultOrder[1] === "desc" ? (i(), d("i", Ie)) : f("", !0)
], 64)) : (i(), d("i", Ke))
], 64)) : f("", !0)
], 10, Ee)
], 4))), 128))
])
]),
u("tbody", null, [
n.rows.length ? (i(!0), d(g, { key: 0 }, L(n.rows, (c, b) => (i(), d("tr", { key: b }, [
(i(!0), d(g, null, L(s.columns, (C, y) => (i(), d("td", { key: y }, [
C.slot ? P(l.$slots, C.slot, {
key: 0,
column: C,
row: c
}) : (i(), d(g, { key: 1 }, [
C.data.split(".").length > 1 ? (i(), d(g, { key: 0 }, [
v(h(C.data.split(".").reduce((p, w) => p[w], c)), 1)
], 64)) : (i(), d(g, { key: 1 }, [
v(h(c[C.data]), 1)
], 64))
], 64))
]))), 128))
]))), 128)) : (i(), d("tr", qe, [
u("td", {
colspan: s.columns.length
}, [
u("p", ze, [
n.search ? (i(), d(g, { key: 0 }, [
v(h(e.selectedLocale.sZeroRecords), 1)
], 64)) : (i(), d(g, { key: 1 }, [
v(h(e.selectedLocale.sEmptyTable), 1)
], 64))
])
], 8, Ue)
]))
])
], 10, Be)
], 2)
], 2),
u("div", {
class: o(e.theme.paginate.colClasses)
}, [
u("div", Ze, [
u("p", null, h(e.sInfo), 1),
N(a, {
"click-handler": e.fetchData,
"container-class": e.theme.paginate.containerClass,
"force-page": n.page,
"next-link-class": e.theme.paginate.pageLinkClass,
"next-text": e.selectedLocale.oPaginate.sNext,
"page-class": e.theme.paginate.pageClass,
"page-count": n.pages,
"page-link-class": e.theme.paginate.pageLinkClass,
"prev-link-class": e.theme.paginate.pageLinkClass,
"prev-text": e.selectedLocale.oPaginate.sPrevious
}, null, 8, ["click-handler", "container-class", "force-page", "next-link-class", "next-text", "page-class", "page-count", "page-link-class", "prev-link-class", "prev-text"])
])
], 2)
], 2);
}
const Xe = /* @__PURE__ */ x(Oe, [["render", je]]);
export {
Xe as DataTable
};