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