@bhplugin/vue3-datatable
Version:
Vue3 Datatable - fully customizable & easy to use datatable library
858 lines (857 loc) • 39.5 kB
JavaScript
import { defineComponent as re, onBeforeUnmount as Te, onMounted as we, openBlock as u, createElementBlock as c, createElementVNode as a, withModifiers as X, normalizeClass as f, toDisplayString as b, Fragment as z, createCommentVNode as w, ref as M, watch as T, createVNode as U, renderList as J, normalizeStyle as _e, createTextVNode as Fe, withDirectives as I, vModelText as ae, vModelSelect as Le, vShow as Ue, createStaticVNode as Ee, useSlots as Ie, computed as Q, vModelCheckbox as Ge, unref as Ke, renderSlot as Je } from "vue";
const We = { class: "bh-filter-menu bh-absolute bh-z-[1] bh-bg-white bh-shadow-md bh-rounded-md bh-top-full bh-right-0 bh-w-32 bh-mt-1" }, Ye = /* @__PURE__ */ re({
__name: "column-filter",
props: ["column", "columnFilterLang"],
emits: ["close", "filterChange"],
setup(S, { emit: _ }) {
const o = S;
Te(() => {
document.removeEventListener("click", t);
}), we(() => {
document.addEventListener("click", t);
});
const p = _, t = () => {
p("close");
}, g = (v) => {
o.column.condition = v, v === "" && (o.column.value = ""), p("filterChange", o.column);
};
return (v, i) => {
var d, $, C, R, Z, q, x, G, N, D, j, P, W, V, ee, A, te, F, B;
return u(), c("div", We, [
a("div", {
class: "bh-text-[13px] bh-font-normal bh-rounded bh-overflow-hidden",
onClick: X(t, ["stop"])
}, [
a("button", {
type: "button",
class: f({ active: o.column.condition === "" }),
onClick: i[0] || (i[0] = (k) => g(""))
}, b((d = o.columnFilterLang && o.columnFilterLang.no_filter) != null ? d : "No filter"), 3),
o.column.type === "string" ? (u(), c(z, { key: 0 }, [
a("button", {
type: "button",
class: f({ active: o.column.condition === "contain" }),
onClick: i[1] || (i[1] = (k) => g("contain"))
}, b(($ = o.columnFilterLang && o.columnFilterLang.contain) != null ? $ : "Contain"), 3),
a("button", {
type: "button",
class: f({ active: o.column.condition === "not_contain" }),
onClick: i[2] || (i[2] = (k) => g("not_contain"))
}, b((C = o.columnFilterLang && o.columnFilterLang.not_contain) != null ? C : "Not contain"), 3),
a("button", {
type: "button",
class: f({ active: o.column.condition === "equal" }),
onClick: i[3] || (i[3] = (k) => g("equal"))
}, b((R = o.columnFilterLang && o.columnFilterLang.equal) != null ? R : "Equal"), 3),
a("button", {
type: "button",
class: f({ active: o.column.condition === "not_equal" }),
onClick: i[4] || (i[4] = (k) => g("not_equal"))
}, b((Z = o.columnFilterLang && o.columnFilterLang.not_equal) != null ? Z : "Not equal"), 3),
a("button", {
type: "button",
class: f({ active: o.column.condition === "start_with" }),
onClick: i[5] || (i[5] = (k) => g("start_with"))
}, b((q = o.columnFilterLang && o.columnFilterLang.start_with) != null ? q : "Starts with"), 3),
a("button", {
type: "button",
class: f({ active: o.column.condition === "end_with" }),
onClick: i[6] || (i[6] = (k) => g("end_with"))
}, b((x = o.columnFilterLang && o.columnFilterLang.end_with) != null ? x : "Ends with"), 3)
], 64)) : o.column.type === "number" ? (u(), c(z, { key: 1 }, [
a("button", {
type: "button",
class: f({ active: o.column.condition === "equal" }),
onClick: i[7] || (i[7] = (k) => g("equal"))
}, b((G = o.columnFilterLang && o.columnFilterLang.equal) != null ? G : "Equal"), 3),
a("button", {
type: "button",
class: f({ active: o.column.condition === "not_equal" }),
onClick: i[8] || (i[8] = (k) => g("not_equal"))
}, b((N = o.columnFilterLang && o.columnFilterLang.not_equal) != null ? N : "Not equal"), 3),
a("button", {
type: "button",
class: f({ active: o.column.condition === "greater_than" }),
onClick: i[9] || (i[9] = (k) => g("greater_than"))
}, b((D = o.columnFilterLang && o.columnFilterLang.greater_than) != null ? D : "Greater than"), 3),
a("button", {
type: "button",
class: f({ active: o.column.condition === "greater_than_equal" }),
onClick: i[10] || (i[10] = (k) => g("greater_than_equal"))
}, b((j = o.columnFilterLang && o.columnFilterLang.greater_than_equal) != null ? j : "Greater than or equal"), 3),
a("button", {
type: "button",
class: f({ active: o.column.condition === "less_than" }),
onClick: i[11] || (i[11] = (k) => g("less_than"))
}, b((P = o.columnFilterLang && o.columnFilterLang.less_than) != null ? P : "Less than"), 3),
a("button", {
type: "button",
class: f({ active: o.column.condition === "less_than_equal" }),
onClick: i[12] || (i[12] = (k) => g("less_than_equal"))
}, b((W = o.columnFilterLang && o.columnFilterLang.less_than_equal) != null ? W : "Less than or equal"), 3)
], 64)) : o.column.type === "date" ? (u(), c(z, { key: 2 }, [
a("button", {
type: "button",
class: f({ active: o.column.condition === "equal" }),
onClick: i[13] || (i[13] = (k) => g("equal"))
}, b((V = o.columnFilterLang && o.columnFilterLang.equal) != null ? V : "Equal"), 3),
a("button", {
type: "button",
class: f({ active: o.column.condition === "not_equal" }),
onClick: i[14] || (i[14] = (k) => g("not_equal"))
}, b((ee = o.columnFilterLang && o.columnFilterLang.not_equal) != null ? ee : "Not equal"), 3),
a("button", {
type: "button",
class: f({ active: o.column.condition === "greater_than" }),
onClick: i[15] || (i[15] = (k) => g("greater_than"))
}, b((A = o.columnFilterLang && o.columnFilterLang.greater_than) != null ? A : "Greater than"), 3),
a("button", {
type: "button",
class: f({ active: o.column.condition === "less_than" }),
onClick: i[16] || (i[16] = (k) => g("less_than"))
}, b((te = o.columnFilterLang && o.columnFilterLang.less_than) != null ? te : "Less than"), 3)
], 64)) : w("", !0),
a("button", {
type: "button",
class: f({ active: o.column.condition === "is_null" }),
onClick: i[17] || (i[17] = (k) => g("is_null"))
}, b((F = o.columnFilterLang && o.columnFilterLang.is_null) != null ? F : "Is null"), 3),
a("button", {
type: "button",
class: f({ active: o.column.condition === "is_not_null" }),
onClick: i[18] || (i[18] = (k) => g("is_not_null"))
}, b((B = o.columnFilterLang && o.columnFilterLang.is_not_null) != null ? B : "Not null"), 3)
])
]);
};
}
}), oe = (S, _) => {
const o = S.__vccOpts || S;
for (const [p, t] of _)
o[p] = t;
return o;
}, Qe = {}, Xe = {
version: "1.1",
viewBox: "0 0 17 12",
xmlns: "http://www.w3.org/2000/svg"
};
function Ze(S, _) {
return u(), c("svg", Xe, _[0] || (_[0] = [
a("g", {
fill: "none",
"fill-rule": "evenodd"
}, [
a("g", {
transform: "translate(-9 -11)",
fill: "currentColor",
"fill-rule": "nonzero"
}, [
a("path", { d: "m25.576 11.414c0.56558 0.55188 0.56558 1.4439 0 1.9961l-9.404 9.176c-0.28213 0.27529-0.65247 0.41385-1.0228 0.41385-0.37034 0-0.74068-0.13855-1.0228-0.41385l-4.7019-4.588c-0.56584-0.55188-0.56584-1.4442 0-1.9961 0.56558-0.55214 1.4798-0.55214 2.0456 0l3.679 3.5899 8.3812-8.1779c0.56558-0.55214 1.4798-0.55214 2.0456 0z" })
])
], -1)
]));
}
const Se = /* @__PURE__ */ oe(Qe, [["render", Ze]]), je = {}, et = {
viewBox: "0 0 24 24",
width: "24",
height: "24",
stroke: "currentColor",
"stroke-width": "3",
fill: "none",
"stroke-linecap": "round",
"stroke-linejoin": "round",
class: "css-i6dzq1"
};
function tt(S, _) {
return u(), c("svg", et, _[0] || (_[0] = [
a("line", {
x1: "5",
y1: "12",
x2: "19",
y2: "12"
}, null, -1)
]));
}
const lt = /* @__PURE__ */ oe(je, [["render", tt]]), nt = {}, ot = {
viewBox: "0 0 24 24",
width: "24",
height: "24",
stroke: "currentColor",
"stroke-width": "1.5",
fill: "none",
"stroke-linecap": "round",
"stroke-linejoin": "round",
class: "css-i6dzq1"
};
function it(S, _) {
return u(), c("svg", ot, _[0] || (_[0] = [
a("polygon", { points: "22 3 2 3 10 12.46 10 19 14 21 14 12.46 22 3" }, null, -1)
]));
}
const at = /* @__PURE__ */ oe(nt, [["render", it]]), rt = { key: "hdrrow" }, st = { class: "bh-checkbox" }, ut = ["onClick"], ct = {
width: "16",
height: "16",
viewBox: "0 0 14 14",
fill: "none"
}, vt = {
key: 0,
class: "bh-filter bh-relative"
}, dt = ["onUpdate:modelValue"], ft = ["onUpdate:modelValue"], ht = ["onUpdate:modelValue"], gt = ["onUpdate:modelValue"], pt = ["onClick"], ke = /* @__PURE__ */ re({
__name: "column-header",
props: ["all", "currentSortColumn", "currentSortDirection", "isOpenFilter", "isFooter", "checkAll", "columnFilterLang"],
emits: ["selectAll", "sortChange", "filterChange", "toggleFilterMenu"],
setup(S, { emit: _ }) {
const o = M(null), p = S, t = _;
return T(() => p.checkAll, () => {
o.value && (o.value.indeterminate = p.checkAll !== 0 ? !p.checkAll : !1, o.value.checked = p.checkAll);
}), (v, i) => (u(), c("tr", rt, [
p.all.hasCheckbox ? (u(), c("th", {
key: "chkall",
class: f(["bh-w-px", {
"bh-sticky bh-bg-blue-light bh-z-[1]": p.all.stickyHeader || p.all.stickyFirstColumn,
"bh-top-0": p.all.stickyHeader,
"bh-left-0": p.all.stickyFirstColumn
}])
}, [
a("div", st, [
a("input", {
ref_key: "selectedAll",
ref: o,
type: "checkbox",
onClick: i[0] || (i[0] = X((d) => t("selectAll", d.target.checked), ["stop"]))
}, null, 512),
a("div", null, [
U(Se, { class: "check" }),
U(lt, { class: "intermediate" })
])
])
], 2)) : w("", !0),
(u(!0), c(z, null, J(p.all.columns, (d, $) => (u(), c(z, null, [
d.hide ? w("", !0) : (u(), c("th", {
key: d.field,
class: f(["bh-select-none bh-z-[1]", [
p.all.sortable && d.sort ? "bh-cursor-pointer" : "",
$ === 0 && p.all.stickyFirstColumn ? "bh-sticky bh-left-0 bh-bg-blue-light" : "",
p.all.hasCheckbox && $ === 0 && p.all.stickyFirstColumn ? "bh-left-[52px]" : ""
]]),
style: _e({
width: d.width,
"min-width": d.minWidth,
"max-width": d.maxWidth
})
}, [
a("div", {
class: f(["bh-flex bh-items-center", [d.headerClass ? d.headerClass : ""]]),
onClick: (C) => p.all.sortable && d.sort && t("sortChange", d.field)
}, [
Fe(b(d.title) + " ", 1),
p.all.sortable && d.sort ? (u(), c("span", {
key: 0,
class: f(["bh-ml-3 bh-sort bh-flex bh-items-center", [p.currentSortColumn, p.currentSortDirection]])
}, [
(u(), c("svg", ct, [
a("polygon", {
points: "3.11,6.25 10.89,6.25 7,1.75 ",
fill: "currentColor",
class: f(["bh-text-black/20", [S.currentSortColumn === d.field && S.currentSortDirection === "asc" ? "!bh-text-primary" : ""]])
}, null, 2),
a("polygon", {
points: "7,12.25 10.89,7.75 3.11,7.75 ",
fill: "currentColor",
class: f(["bh-text-black/20", [S.currentSortColumn === d.field && S.currentSortDirection === "desc" ? "!bh-text-primary" : ""]])
}, null, 2)
]))
], 2)) : w("", !0)
], 10, ut),
p.all.columnFilter && !p.isFooter ? (u(), c(z, { key: 0 }, [
d.filter ? (u(), c("div", vt, [
d.type === "string" ? I((u(), c("input", {
key: 0,
"onUpdate:modelValue": (C) => d.value = C,
type: "text",
class: "bh-form-control",
onKeyup: i[1] || (i[1] = (C) => t("filterChange"))
}, null, 40, dt)), [
[
ae,
d.value,
void 0,
{ trim: !0 }
]
]) : w("", !0),
d.type === "number" ? I((u(), c("input", {
key: 1,
"onUpdate:modelValue": (C) => d.value = C,
type: "number",
class: "bh-form-control",
onKeyup: i[2] || (i[2] = (C) => t("filterChange"))
}, null, 40, ft)), [
[
ae,
d.value,
void 0,
{
number: !0,
trim: !0
}
]
]) : d.type === "date" ? I((u(), c("input", {
key: 2,
"onUpdate:modelValue": (C) => d.value = C,
type: "date",
class: "bh-form-control",
onChange: i[3] || (i[3] = (C) => t("filterChange"))
}, null, 40, ht)), [
[ae, d.value]
]) : d.type === "bool" ? I((u(), c("select", {
key: 3,
"onUpdate:modelValue": (C) => d.value = C,
class: "bh-form-control",
onChange: i[4] || (i[4] = (C) => t("filterChange")),
onClick: i[5] || (i[5] = (C) => p.isOpenFilter = null)
}, i[8] || (i[8] = [
a("option", { value: void 0 }, "All", -1),
a("option", { value: !0 }, "True", -1),
a("option", { value: !1 }, "False", -1)
]), 40, gt)), [
[Le, d.value]
]) : w("", !0),
d.type !== "bool" ? (u(), c("button", {
key: 4,
type: "button",
onClick: X((C) => t("toggleFilterMenu", d), ["stop"])
}, [
U(at, { class: "bh-w-4" })
], 8, pt)) : w("", !0),
I(U(Ye, {
column: d,
type: d.type,
columnFilterLang: p.columnFilterLang,
onClose: i[6] || (i[6] = (C) => t("toggleFilterMenu", null)),
onFilterChange: i[7] || (i[7] = (C) => t("filterChange"))
}, null, 8, ["column", "type", "columnFilterLang"]), [
[Ue, p.isOpenFilter === d.field]
])
])) : w("", !0)
], 64)) : w("", !0)
], 6))
], 64))), 256))
]));
}
}), mt = {}, bt = {
width: "84",
height: "84",
viewBox: "0 0 24 24",
class: "bh-loader bh-text-primary"
};
function yt(S, _) {
return u(), c("svg", bt, _[0] || (_[0] = [
Ee('<circle cx="18" cy="12" r="0" fill="currentColor"><animate attributeName="r" begin=".67" calcMode="spline" dur="1.5s" keySplines="0.2 0.2 0.4 0.8;0.2 0.2 0.4 0.8;0.2 0.2 0.4 0.8" repeatCount="indefinite" values="0;2;0;0"></animate></circle><circle cx="12" cy="12" r="0" fill="currentColor"><animate attributeName="r" begin=".33" calcMode="spline" dur="1.5s" keySplines="0.2 0.2 0.4 0.8;0.2 0.2 0.4 0.8;0.2 0.2 0.4 0.8" repeatCount="indefinite" values="0;2;0;0"></animate></circle><circle cx="6" cy="12" r="0" fill="currentColor"><animate attributeName="r" begin="0" calcMode="spline" dur="1.5s" keySplines="0.2 0.2 0.4 0.8;0.2 0.2 0.4 0.8;0.2 0.2 0.4 0.8" repeatCount="indefinite" values="0;2;0;0"></animate></circle>', 3)
]));
}
const Ct = /* @__PURE__ */ oe(mt, [["render", yt]]), kt = { class: "bh-datatable bh-antialiased bh-relative bh-text-black bh-text-sm bh-font-normal" }, wt = ["onClick"], _t = { class: "bh-checkbox" }, Ft = ["value"], Lt = ["innerHTML"], St = { key: 1 }, xt = ["colspan"], $t = ["colspan"], qt = {
key: 0,
class: "bh-absolute bh-inset-0 bh-bg-blue-light/50 bh-grid bh-place-content-center"
}, Mt = { class: "bh-flex bh-items-center bh-flex-wrap bh-flex-col sm:bh-flex-row bh-gap-4" }, zt = { class: "bh-pagination-info bh-flex bh-items-center" }, At = { class: "bh-mr-2" }, Bt = ["value"], Rt = { class: "bh-pagination-number sm:bh-ml-auto bh-inline-flex bh-items-center bh-space-x-1" }, Nt = ["innerHTML"], Dt = {
key: 1,
"aria-hidden": "true",
width: "14",
height: "14",
viewBox: "0 0 16 16"
}, Pt = ["innerHTML"], Ht = {
key: 1,
"aria-hidden": "true",
width: "14",
height: "14",
viewBox: "0 0 16 16"
}, Ot = ["onClick"], Vt = ["innerHTML"], Tt = {
key: 1,
"aria-hidden": "true",
width: "14",
height: "14",
viewBox: "0 0 16 16"
}, Ut = ["innerHTML"], Et = {
key: 1,
"aria-hidden": "true",
width: "14",
height: "14",
viewBox: "0 0 16 16"
}, Wt = /* @__PURE__ */ re({
__name: "custom-table",
props: {
loading: { type: Boolean, default: !1 },
isServerMode: { type: Boolean, default: !1 },
skin: { default: "bh-table-striped bh-table-hover" },
totalRows: { default: 0 },
rows: { default: () => [] },
columns: { default: () => [] },
hasCheckbox: { type: Boolean, default: !1 },
search: { default: "" },
columnChooser: { type: Boolean, default: !1 },
page: { default: 1 },
pageSize: { default: 10 },
pageSizeOptions: { default: () => [10, 20, 30, 50, 100] },
showPageSize: { type: Boolean, default: !0 },
rowClass: { default: [] },
cellClass: { default: [] },
sortable: { type: Boolean, default: !1 },
sortColumn: { default: "id" },
sortDirection: { default: "asc" },
columnFilter: { type: Boolean, default: !1 },
columnFilterLang: { default: null },
pagination: { type: Boolean, default: !0 },
showNumbers: { type: Boolean, default: !0 },
showNumbersCount: { default: 5 },
showFirstPage: { type: Boolean, default: !0 },
showLastPage: { type: Boolean, default: !0 },
firstArrow: { default: "" },
lastArrow: { default: "" },
nextArrow: { default: "" },
previousArrow: { default: "" },
paginationInfo: { default: "Showing {0} to {1} of {2} entries" },
noDataContent: { default: "No data available" },
stickyHeader: { type: Boolean, default: !1 },
height: { default: "500px" },
stickyFirstColumn: { type: Boolean, default: !1 },
cloneHeaderInFooter: { type: Boolean, default: !1 },
selectRowOnClick: { type: Boolean, default: !1 }
},
emits: ["change", "sortChange", "searchChange", "pageChange", "pageSizeChange", "rowSelect", "filterChange", "rowClick", "rowDBClick"],
setup(S, { expose: _, emit: o }) {
var pe, me;
const p = Ie(), t = S;
for (const e of t.columns || []) {
const l = ((pe = e.type) == null ? void 0 : pe.toLowerCase()) || "string";
e.type = l, e.isUnique = e.isUnique !== void 0 ? e.isUnique : !1, e.hide = e.hide !== void 0 ? e.hide : !1, e.filter = e.filter !== void 0 ? e.filter : !0, e.search = e.search !== void 0 ? e.search : !0, e.sort = e.sort !== void 0 ? e.sort : !0, e.html = e.html !== void 0 ? e.html : !1, e.condition = !l || l === "string" ? "contain" : "equal";
}
const g = M([]), v = M(t.page), i = M(t.pagination ? t.pageSize : (me = t.rows) == null ? void 0 : me.length), d = t.pageSize, $ = M(t.sortColumn), C = t.sortColumn, R = M(t.sortDirection), Z = t.sortDirection, q = M(t.totalRows), x = M([]), G = M(null), N = M(t.loading), D = M(t.search), j = JSON.parse(JSON.stringify(t.columns)), P = M(null), W = M(null);
let V = M(0);
const ee = M(230);
we(() => {
H();
});
const A = o;
_({
reset() {
Re();
},
getSelectedRows() {
return Ne();
},
getColumnFilters() {
return De();
},
clearSelectedRows() {
return Pe();
},
selectRow(e) {
he(e);
},
unselectRow(e) {
ge(e);
},
isRowSelected(e) {
return ne(e);
},
getFilteredRows() {
return ue();
},
getVisibleRows() {
return He();
}
});
const te = (e, ...l) => e.replace(/{(\d+)}/g, (r, m) => typeof l[m] < "u" ? l[m] : r), F = Q(() => {
const e = t.columns.find((l) => l.isUnique);
return (e == null ? void 0 : e.field) || null;
}), B = Q(() => {
const e = i.value < 1 ? 1 : Math.ceil(q.value / i.value);
return Math.max(e || 0, 1);
}), k = Q(() => (v.value - 1) * i.value + 1), se = Q(() => {
const e = v.value * i.value;
return q.value >= e ? e : q.value;
}), xe = Q(() => {
let e, l;
return typeof t.showNumbersCount < "u" && t.showNumbersCount < B.value ? (e = Math.max(v.value - Math.floor(t.showNumbersCount / 2), 1), l = e + t.showNumbersCount - 1, l > B.value && (l = B.value, e = l - t.showNumbersCount + 1)) : (e = 1, l = B.value), Array.from(Array(l + 1 - e).keys()).map((L) => e + L);
}), ue = () => {
var L, Y, be;
let e = t.rows || [];
if (!t.isServerMode) {
if (t.columnFilter && ((L = t.columns) == null || L.forEach((n) => {
n.filter && (n.value !== void 0 && n.value !== null && n.value !== "" || n.condition === "is_null" || n.condition == "is_not_null") && (n.type === "string" ? (n.value && !n.condition && (n.condition = "contain"), n.condition === "contain" ? e = e.filter((s) => {
var y;
return (y = h(s, n.field)) == null ? void 0 : y.toString().toLowerCase().includes(n.value.toLowerCase());
}) : n.condition === "not_contain" ? e = e.filter((s) => {
var y;
return !((y = h(s, n.field)) != null && y.toString().toLowerCase().includes(n.value.toLowerCase()));
}) : n.condition === "equal" ? e = e.filter((s) => {
var y;
return ((y = h(s, n.field)) == null ? void 0 : y.toString().toLowerCase()) === n.value.toLowerCase();
}) : n.condition === "not_equal" ? e = e.filter((s) => {
var y;
return ((y = h(s, n.field)) == null ? void 0 : y.toString().toLowerCase()) !== n.value.toLowerCase();
}) : n.condition == "start_with" ? e = e.filter((s) => {
var y;
return ((y = h(s, n.field)) == null ? void 0 : y.toString().toLowerCase().indexOf(n.value.toLowerCase())) === 0;
}) : n.condition == "end_with" && (e = e.filter((s) => {
var y;
return ((y = h(s, n.field)) == null ? void 0 : y.toString().toLowerCase().substr(n.value.length * -1)) === n.value.toLowerCase();
}))) : n.type === "number" ? (n.value && !n.condition && (n.condition = "equal"), n.condition === "equal" ? e = e.filter((s) => h(s, n.field) && parseFloat(h(s, n.field)) === parseFloat(n.value)) : n.condition === "not_equal" ? e = e.filter((s) => h(s, n.field) && parseFloat(h(s, n.field)) !== parseFloat(n.value)) : n.condition === "greater_than" ? e = e.filter((s) => h(s, n.field) && parseFloat(h(s, n.field)) > parseFloat(n.value)) : n.condition === "greater_than_equal" ? e = e.filter((s) => h(s, n.field) && parseFloat(h(s, n.field)) >= parseFloat(n.value)) : n.condition === "less_than" ? e = e.filter((s) => h(s, n.field) && parseFloat(h(s, n.field)) < parseFloat(n.value)) : n.condition === "less_than_equal" && (e = e.filter((s) => h(s, n.field) && parseFloat(h(s, n.field)) <= parseFloat(n.value)))) : n.type === "date" ? (n.value && !n.condition && (n.condition = "equal"), n.condition === "equal" ? e = e.filter((s) => h(s, n.field) && le(h(s, n.field)) === n.value) : n.condition === "not_equal" ? e = e.filter((s) => h(s, n.field) && le(h(s, n.field)) !== n.value) : n.condition === "greater_than" ? e = e.filter((s) => h(s, n.field) && le(h(s, n.field)) > n.value) : n.condition === "less_than" && (e = e.filter((s) => h(s, n.field) && le(h(s, n.field)) < n.value))) : n.type === "bool" && (e = e.filter((s) => h(s, n.field) === n.value)), n.condition === "is_null" ? (e = e.filter((s) => h(s, n.field) == null || h(s, n.field) == ""), n.value = "") : n.condition === "is_not_null" && (n.value = "", e = e.filter((s) => h(s, n.field))));
})), D.value && (e == null ? void 0 : e.length)) {
let n = [];
const s = (t.columns || []).filter((y) => y.search && !y.hide).map((y) => y.field);
for (var l = 0; l < (e == null ? void 0 : e.length); l++)
for (var r = 0; r < s.length; r++)
if ((Y = h(e[l], s[r])) != null && Y.toString().toLowerCase().includes(D.value.toLowerCase())) {
n.push(e[l]);
break;
}
e = n;
}
if (t.sortable) {
var m = new Intl.Collator(void 0, {
numeric: ((be = t.columns.find((s) => s.field == $.value)) == null ? void 0 : be.type) === "number",
sensitivity: "base"
});
const n = R.value === "desc" ? -1 : 1;
e.sort((s, y) => {
var ye, Ce;
const Oe = (ye = $.value) == null ? void 0 : ye.split(".").reduce((E, ie) => E == null ? void 0 : E[ie], s), Ve = (Ce = $.value) == null ? void 0 : Ce.split(".").reduce((E, ie) => E == null ? void 0 : E[ie], y);
return m.compare(Oe, Ve) * n;
});
}
}
return e;
}, H = () => {
let e = [], l = ue();
return t.isServerMode ? (q.value = t.totalRows || 0, e = l) : (q.value = (l == null ? void 0 : l.length) || 0, e = l.slice(k.value - 1, se.value)), g.value = e || [], e;
};
T(
() => t.loading,
() => {
N.value = t.loading;
}
);
const ce = (e) => {
e ? P.value === e.field ? P.value = null : P.value = e.field : P.value = null;
}, $e = () => {
if (v.value == 1)
return !1;
v.value--;
}, qe = (e) => {
v.value = e;
}, Me = () => {
if (v.value >= B.value)
return !1;
v.value++;
};
T(() => v.value, () => {
O(!1), t.isServerMode ? K("page") : (H(), A("pageChange", v.value));
}), T(
() => t.page,
(e) => {
v.value = e;
}
), T(() => t.rows, () => {
O(!1), H();
}), T(() => i.value, () => {
O(!1), t.isServerMode ? v.value === 1 ? K("pagesize", !0) : v.value = 1 : (v.value = 1, H(), A("pageSizeChange", i.value));
});
const ve = (e) => {
let l = "asc";
e == $.value && R.value === "asc" && (l = "desc");
let r = (v.value - 1) * i.value, m = i.value;
$.value = e, R.value = l, O(!1), H(), t.isServerMode ? K("sort") : A("sortChange", { offset: r, limit: m, field: e, direction: l });
}, de = (e) => {
G.value = e.length && g.value.length && e.length === g.value.length;
const l = g.value.filter((r, m) => x.value.includes(F.value ? r[F.value] : m));
A("rowSelect", l);
};
T(() => x.value, de);
const O = (e) => {
e ? x.value = g.value.map((l, r) => F.value ? l[F.value] : r) : x.value = [];
}, fe = () => {
O(!1), t.isServerMode ? v.value === 1 ? K("filter", !0) : v.value = 1 : (v.value = 1, H(), A("filterChange", t.columns));
}, ze = () => {
O(!1), t.isServerMode ? v.value === 1 ? K("search", !0) : v.value = 1 : (v.value = 1, H(), A("searchChange", D.value));
};
T(
() => t.search,
() => {
D.value = t.search, ze();
}
);
const h = (e, l) => l == null ? void 0 : l.split(".").reduce((r, m) => r == null ? void 0 : r[m], e), le = (e) => {
try {
if (!e)
return "";
const l = new Date(e), r = l.getDate(), m = l.getMonth() + 1;
return l.getFullYear() + "-" + (m > 9 ? m : "0" + m) + "-" + (r > 9 ? r : "0" + r);
} catch {
}
return "";
}, Ae = (e, l) => {
V.value++, V.value === 1 ? W.value = setTimeout(() => {
V.value = 0, t.selectRowOnClick && (ne(l) ? ge(l) : he(l), de(x.value)), A("rowClick", e);
}, ee.value) : V.value === 2 && (clearTimeout(W.value), V.value = 0, A("rowDBClick", e));
}, K = (e, l = !1) => {
if (t.isServerMode) {
Be();
const r = {
current_page: l ? 1 : v.value,
pagesize: i.value,
offset: (v.value - 1) * i.value,
sort_column: $.value,
sort_direction: R.value,
search: D.value,
column_filters: t.columns,
change_type: e
};
A("change", r);
}
}, Be = () => {
for (let e = 0; e < t.columns.length; e++) {
let l = t.columns[e];
l.filter && (l.value !== void 0 && l.value !== null && l.value !== "" || l.condition === "is_null" || l.condition === "is_not_null") && (l.type === "string" && l.value && !l.condition && (l.condition = "contain"), l.type === "number" && l.value && !l.condition && (l.condition = "equal"), l.type === "date" && l.value && !l.condition && (l.condition = "equal"));
}
}, Re = () => {
O(!1);
for (let e = 0; e < t.columns.length; e++)
t.columns[e] = j[e];
D.value = "", i.value = d, $.value = C, R.value = Z, t.isServerMode ? v.value === 1 ? K("reset", !0) : v.value = 1 : (v.value = 1, H());
}, Ne = () => g.value.filter((l, r) => x.value.includes(F.value ? l[F.value] : r)), De = () => t.columns, Pe = () => {
x.value = [];
}, he = (e) => {
if (!ne(e)) {
const l = g.value.find((r, m) => m === e);
x.value.push(F.value ? l[F.value] : e);
}
}, ge = (e) => {
if (ne(e)) {
const l = g.value.find((r, m) => m === e);
x.value = x.value.filter((r) => r !== (F.value ? l[F.value] : e));
}
}, ne = (e) => {
const l = g.value.find((r, m) => m === e);
return l ? x.value.includes(F.value ? l[F.value] : e) : !1;
}, He = () => H();
return (e, l) => (u(), c("div", kt, [
a("div", {
class: f(["bh-table-responsive", { "bh-min-h-[300px]": N.value }]),
style: _e({ height: t.stickyHeader && t.height })
}, [
a("table", {
class: f([t.skin])
}, [
a("thead", {
class: f({ "bh-sticky bh-top-0 bh-z-10": t.stickyHeader })
}, [
U(ke, {
all: t,
currentSortColumn: $.value,
currentSortDirection: R.value,
isOpenFilter: P.value,
checkAll: G.value,
columnFilterLang: t.columnFilterLang,
onSelectAll: O,
onSortChange: ve,
onFilterChange: fe,
onToggleFilterMenu: ce
}, null, 8, ["currentSortColumn", "currentSortDirection", "isOpenFilter", "checkAll", "columnFilterLang"])
], 2),
a("tbody", null, [
q.value ? (u(!0), c(z, { key: 0 }, J(g.value, (r, m) => (u(), c("tr", {
key: r[F.value] ? r[F.value] : m,
class: f([typeof t.rowClass == "function" ? e.rowClass(r) : t.rowClass, t.selectRowOnClick ? "bh-cursor-pointer" : ""]),
onClick: X((L) => Ae(r, m), ["prevent"])
}, [
t.hasCheckbox ? (u(), c("td", {
key: 0,
class: f({
"bh-sticky bh-left-0 bh-bg-blue-light": t.stickyFirstColumn
})
}, [
a("div", _t, [
I(a("input", {
"onUpdate:modelValue": l[0] || (l[0] = (L) => x.value = L),
type: "checkbox",
value: r[F.value] ? r[F.value] : m,
onClick: l[1] || (l[1] = X(() => {
}, ["stop"]))
}, null, 8, Ft), [
[Ge, x.value]
]),
a("div", null, [
U(Se, { class: "check" })
])
])
], 2)) : w("", !0),
(u(!0), c(z, null, J(t.columns, (L, Y) => (u(), c(z, null, [
L.hide ? w("", !0) : (u(), c("td", {
key: L.field,
class: f([
typeof t.cellClass == "function" ? e.cellClass(r) : t.cellClass,
Y === 0 && t.stickyFirstColumn ? "bh-sticky bh-left-0 bh-bg-blue-light" : "",
t.hasCheckbox && Y === 0 && t.stickyFirstColumn ? "bh-left-[52px]" : "",
L.cellClass ? L.cellClass : ""
])
}, [
Ke(p)[L.field] ? Je(e.$slots, L.field, {
key: 0,
value: r
}) : L.cellRenderer ? (u(), c("div", {
key: 1,
innerHTML: L.cellRenderer(r)
}, null, 8, Lt)) : (u(), c(z, { key: 2 }, [
Fe(b(h(r, L.field)), 1)
], 64))
], 2))
], 64))), 256))
], 10, wt))), 128)) : w("", !0),
!q.value && !N.value ? (u(), c("tr", St, [
a("td", {
colspan: t.columns.length + 1
}, b(t.noDataContent), 9, xt)
])) : w("", !0),
!q.value && N.value ? (u(!0), c(z, { key: 2 }, J(t.pageSize, (r) => (u(), c("tr", {
key: r,
class: "!bh-bg-white bh-h-11 !bh-border-transparent"
}, [
a("td", {
colspan: t.columns.length + 1,
class: "!bh-p-0 !bh-border-transparent"
}, l[5] || (l[5] = [
a("div", { class: "bh-skeleton-box bh-h-8" }, null, -1)
]), 8, $t)
]))), 128)) : w("", !0)
]),
t.cloneHeaderInFooter ? (u(), c("tfoot", {
key: 0,
class: f({ "bh-sticky bh-bottom-0": t.stickyHeader })
}, [
U(ke, {
all: t,
currentSortColumn: $.value,
currentSortDirection: R.value,
isOpenFilter: P.value,
isFooter: !0,
checkAll: G.value,
onSelectAll: O,
onSortChange: ve,
onFilterChange: fe,
onToggleFilterMenu: ce
}, null, 8, ["currentSortColumn", "currentSortDirection", "isOpenFilter", "checkAll"])
], 2)) : w("", !0)
], 2),
q.value && N.value ? (u(), c("div", qt, [
U(Ct)
])) : w("", !0)
], 6),
t.pagination && q.value ? (u(), c("div", {
key: 0,
class: f(["bh-pagination bh-py-5", { "bh-pointer-events-none": N.value }])
}, [
a("div", Mt, [
a("div", zt, [
a("span", At, b(te(t.paginationInfo, q.value ? k.value : 0, se.value, q.value)), 1),
t.showPageSize ? I((u(), c("select", {
key: 0,
"onUpdate:modelValue": l[2] || (l[2] = (r) => i.value = r),
class: "bh-pagesize"
}, [
(u(!0), c(z, null, J(t.pageSizeOptions, (r) => (u(), c("option", {
value: r,
key: r
}, b(r), 9, Bt))), 128))
], 512)), [
[Le, i.value]
]) : w("", !0)
]),
a("div", Rt, [
t.showFirstPage ? (u(), c("button", {
key: 0,
type: "button",
class: f(["bh-page-item first-page", { disabled: v.value <= 1 }]),
onClick: l[3] || (l[3] = (r) => v.value = 1)
}, [
t.firstArrow ? (u(), c("span", {
key: 0,
innerHTML: t.firstArrow
}, null, 8, Nt)) : (u(), c("svg", Dt, l[6] || (l[6] = [
a("g", {
fill: "currentColor",
"fill-rule": "evenodd"
}, [
a("path", { d: "M8.354 1.646a.5.5 0 0 1 0 .708L2.707 8l5.647 5.646a.5.5 0 0 1-.708.708l-6-6a.5.5 0 0 1 0-.708l6-6a.5.5 0 0 1 .708 0z" }),
a("path", { d: "M12.354 1.646a.5.5 0 0 1 0 .708L6.707 8l5.647 5.646a.5.5 0 0 1-.708.708l-6-6a.5.5 0 0 1 0-.708l6-6a.5.5 0 0 1 .708 0z" })
], -1)
])))
], 2)) : w("", !0),
a("button", {
type: "button",
class: f(["bh-page-item previous-page", { disabled: v.value <= 1 }]),
onClick: $e
}, [
t.previousArrow ? (u(), c("span", {
key: 0,
innerHTML: t.previousArrow
}, null, 8, Pt)) : (u(), c("svg", Ht, l[7] || (l[7] = [
a("path", {
fill: "currentColor",
"fill-rule": "evenodd",
d: "M11.354 1.646a.5.5 0 0 1 0 .708L5.707 8l5.647 5.646a.5.5 0 0 1-.708.708l-6-6a.5.5 0 0 1 0-.708l6-6a.5.5 0 0 1 .708 0z"
}, null, -1)
])))
], 2),
t.showNumbers ? (u(!0), c(z, { key: 1 }, J(xe.value, (r) => (u(), c("button", {
key: r,
type: "button",
class: f(["bh-page-item", {
disabled: v.value === r,
"bh-active": r === v.value
}]),
onClick: (m) => qe(r)
}, b(r), 11, Ot))), 128)) : w("", !0),
a("button", {
type: "button",
class: f(["bh-page-item next-page", { disabled: v.value >= B.value }]),
onClick: Me
}, [
t.nextArrow ? (u(), c("span", {
key: 0,
innerHTML: t.nextArrow
}, null, 8, Vt)) : (u(), c("svg", Tt, l[8] || (l[8] = [
a("path", {
fill: "currentColor",
"fill-rule": "evenodd",
d: "M4.646 1.646a.5.5 0 0 1 .708 0l6 6a.5.5 0 0 1 0 .708l-6 6a.5.5 0 0 1-.708-.708L10.293 8L4.646 2.354a.5.5 0 0 1 0-.708z"
}, null, -1)
])))
], 2),
t.showLastPage ? (u(), c("button", {
key: 2,
type: "button",
class: f(["bh-page-item last-page", { disabled: v.value >= B.value }]),
onClick: l[4] || (l[4] = (r) => v.value = B.value)
}, [
t.lastArrow ? (u(), c("span", {
key: 0,
innerHTML: t.lastArrow
}, null, 8, Ut)) : (u(), c("svg", Et, l[9] || (l[9] = [
a("g", {
fill: "currentColor",
"fill-rule": "evenodd"
}, [
a("path", { d: "M3.646 1.646a.5.5 0 0 1 .708 0l6 6a.5.5 0 0 1 0 .708l-6 6a.5.5 0 0 1-.708-.708L9.293 8L3.646 2.354a.5.5 0 0 1 0-.708z" }),
a("path", { d: "M7.646 1.646a.5.5 0 0 1 .708 0l6 6a.5.5 0 0 1 0 .708l-6 6a.5.5 0 0 1-.708-.708L13.293 8L7.646 2.354a.5.5 0 0 1 0-.708z" })
], -1)
])))
], 2)) : w("", !0)
])
])
], 2)) : w("", !0)
]));
}
});
export {
Wt as default
};