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