@luisgb2212/table-customizable
Version:
Vue3 Datatable - fully customizable & easy to use datatable library
973 lines (972 loc) • 45.4 kB
JavaScript
import { defineComponent as de, onBeforeUnmount as Xe, onMounted as fe, openBlock as u, createElementBlock as c, createElementVNode as s, withModifiers as se, normalizeClass as h, toDisplayString as k, Fragment as D, createCommentVNode as _, ref as B, watch as G, createVNode as I, renderList as K, normalizeStyle as Ye, createTextVNode as Ne, withDirectives as U, vModelText as ie, vModelSelect as ce, vShow as Qe, nextTick as Be, createStaticVNode as Ze, useSlots as je, computed as le, vModelCheckbox as et, unref as tt, renderSlot as lt } from "vue";
import De from "litepicker";
import X from "dayjs";
const nt = { 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" }, ot = /* @__PURE__ */ de({
__name: "column-filter",
props: ["column", "columnFilterLang"],
emits: ["close", "filterChange"],
setup(x, { emit: M }) {
const o = x;
Xe(() => {
document.removeEventListener("click", t);
}), fe(() => {
document.addEventListener("click", t);
});
const p = M, t = () => {
p("close");
}, g = (f) => {
o.column.condition = f, f === "" && (o.column.value = ""), p("filterChange", o.column);
};
return (f, d) => {
var $, v, a, w, m, L, z, J, T, V, ne, R, Q, O, oe, A, ae, q, N;
return u(), c("div", nt, [
s("div", {
class: "bh-text-[13px] bh-font-normal bh-rounded bh-overflow-hidden",
onClick: se(t, ["stop"])
}, [
s("button", {
type: "button",
class: h({ active: o.column.condition === "" }),
onClick: d[0] || (d[0] = (F) => g(""))
}, k(($ = o.columnFilterLang && o.columnFilterLang.no_filter) != null ? $ : "No filter"), 3),
o.column.type === "string" ? (u(), c(D, { key: 0 }, [
s("button", {
type: "button",
class: h({ active: o.column.condition === "contain" }),
onClick: d[1] || (d[1] = (F) => g("contain"))
}, k((v = o.columnFilterLang && o.columnFilterLang.contain) != null ? v : "Contain"), 3),
s("button", {
type: "button",
class: h({ active: o.column.condition === "not_contain" }),
onClick: d[2] || (d[2] = (F) => g("not_contain"))
}, k((a = o.columnFilterLang && o.columnFilterLang.not_contain) != null ? a : "Not contain"), 3),
s("button", {
type: "button",
class: h({ active: o.column.condition === "equal" }),
onClick: d[3] || (d[3] = (F) => g("equal"))
}, k((w = o.columnFilterLang && o.columnFilterLang.equal) != null ? w : "Equal"), 3),
s("button", {
type: "button",
class: h({ active: o.column.condition === "not_equal" }),
onClick: d[4] || (d[4] = (F) => g("not_equal"))
}, k((m = o.columnFilterLang && o.columnFilterLang.not_equal) != null ? m : "Not equal"), 3),
s("button", {
type: "button",
class: h({ active: o.column.condition === "start_with" }),
onClick: d[5] || (d[5] = (F) => g("start_with"))
}, k((L = o.columnFilterLang && o.columnFilterLang.start_with) != null ? L : "Starts with"), 3),
s("button", {
type: "button",
class: h({ active: o.column.condition === "end_with" }),
onClick: d[6] || (d[6] = (F) => g("end_with"))
}, k((z = o.columnFilterLang && o.columnFilterLang.end_with) != null ? z : "Ends with"), 3)
], 64)) : o.column.type === "number" ? (u(), c(D, { key: 1 }, [
s("button", {
type: "button",
class: h({ active: o.column.condition === "equal" }),
onClick: d[7] || (d[7] = (F) => g("equal"))
}, k((J = o.columnFilterLang && o.columnFilterLang.equal) != null ? J : "Equal"), 3),
s("button", {
type: "button",
class: h({ active: o.column.condition === "not_equal" }),
onClick: d[8] || (d[8] = (F) => g("not_equal"))
}, k((T = o.columnFilterLang && o.columnFilterLang.not_equal) != null ? T : "Not equal"), 3),
s("button", {
type: "button",
class: h({ active: o.column.condition === "greater_than" }),
onClick: d[9] || (d[9] = (F) => g("greater_than"))
}, k((V = o.columnFilterLang && o.columnFilterLang.greater_than) != null ? V : "Greater than"), 3),
s("button", {
type: "button",
class: h({ active: o.column.condition === "greater_than_equal" }),
onClick: d[10] || (d[10] = (F) => g("greater_than_equal"))
}, k((ne = o.columnFilterLang && o.columnFilterLang.greater_than_equal) != null ? ne : "Greater than or equal"), 3),
s("button", {
type: "button",
class: h({ active: o.column.condition === "less_than" }),
onClick: d[11] || (d[11] = (F) => g("less_than"))
}, k((R = o.columnFilterLang && o.columnFilterLang.less_than) != null ? R : "Less than"), 3),
s("button", {
type: "button",
class: h({ active: o.column.condition === "less_than_equal" }),
onClick: d[12] || (d[12] = (F) => g("less_than_equal"))
}, k((Q = o.columnFilterLang && o.columnFilterLang.less_than_equal) != null ? Q : "Less than or equal"), 3)
], 64)) : o.column.type === "date" ? (u(), c(D, { key: 2 }, [
s("button", {
type: "button",
class: h({ active: o.column.condition === "equal" }),
onClick: d[13] || (d[13] = (F) => g("equal"))
}, k((O = o.columnFilterLang && o.columnFilterLang.equal) != null ? O : "Equal"), 3),
s("button", {
type: "button",
class: h({ active: o.column.condition === "not_equal" }),
onClick: d[14] || (d[14] = (F) => g("not_equal"))
}, k((oe = o.columnFilterLang && o.columnFilterLang.not_equal) != null ? oe : "Not equal"), 3),
s("button", {
type: "button",
class: h({ active: o.column.condition === "greater_than" }),
onClick: d[15] || (d[15] = (F) => g("greater_than"))
}, k((A = o.columnFilterLang && o.columnFilterLang.greater_than) != null ? A : "Greater than"), 3),
s("button", {
type: "button",
class: h({ active: o.column.condition === "less_than" }),
onClick: d[16] || (d[16] = (F) => g("less_than"))
}, k((ae = o.columnFilterLang && o.columnFilterLang.less_than) != null ? ae : "Less than"), 3)
], 64)) : _("", !0),
s("button", {
type: "button",
class: h({ active: o.column.condition === "is_null" }),
onClick: d[17] || (d[17] = (F) => g("is_null"))
}, k((q = o.columnFilterLang && o.columnFilterLang.is_null) != null ? q : "Is null"), 3),
s("button", {
type: "button",
class: h({ active: o.column.condition === "is_not_null" }),
onClick: d[18] || (d[18] = (F) => g("is_not_null"))
}, k((N = o.columnFilterLang && o.columnFilterLang.is_not_null) != null ? N : "Not null"), 3)
])
]);
};
}
}), ue = (x, M) => {
const o = x.__vccOpts || x;
for (const [p, t] of M)
o[p] = t;
return o;
}, at = {}, rt = {
version: "1.1",
viewBox: "0 0 17 12",
xmlns: "http://www.w3.org/2000/svg"
};
function it(x, M) {
return u(), c("svg", rt, [...M[0] || (M[0] = [
s("g", {
fill: "none",
"fill-rule": "evenodd"
}, [
s("g", {
transform: "translate(-9 -11)",
fill: "currentColor",
"fill-rule": "nonzero"
}, [
s("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 Te = /* @__PURE__ */ ue(at, [["render", it]]), st = {}, ut = {
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 ct(x, M) {
return u(), c("svg", ut, [...M[0] || (M[0] = [
s("line", {
x1: "5",
y1: "12",
x2: "19",
y2: "12"
}, null, -1)
])]);
}
const dt = /* @__PURE__ */ ue(st, [["render", ct]]), ft = {}, vt = {
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 ht(x, M) {
return u(), c("svg", vt, [...M[0] || (M[0] = [
s("polygon", { points: "22 3 2 3 10 12.46 10 19 14 21 14 12.46 22 3" }, null, -1)
])]);
}
const mt = /* @__PURE__ */ ue(ft, [["render", ht]]);
var pt = typeof globalThis < "u" ? globalThis : typeof window < "u" ? window : typeof global < "u" ? global : typeof self < "u" ? self : {}, gt = { exports: {} };
(function(x, M) {
(function(o, p) {
x.exports = p(X);
})(pt, function(o) {
function p(f) {
return f && typeof f == "object" && "default" in f ? f : { default: f };
}
var t = p(o), g = { name: "es", monthsShort: "ene_feb_mar_abr_may_jun_jul_ago_sep_oct_nov_dic".split("_"), weekdays: "domingo_lunes_martes_mi\xE9rcoles_jueves_viernes_s\xE1bado".split("_"), weekdaysShort: "dom._lun._mar._mi\xE9._jue._vie._s\xE1b.".split("_"), weekdaysMin: "do_lu_ma_mi_ju_vi_s\xE1".split("_"), months: "enero_febrero_marzo_abril_mayo_junio_julio_agosto_septiembre_octubre_noviembre_diciembre".split("_"), weekStart: 1, formats: { LT: "H:mm", LTS: "H:mm:ss", L: "DD/MM/YYYY", LL: "D [de] MMMM [de] YYYY", LLL: "D [de] MMMM [de] YYYY H:mm", LLLL: "dddd, D [de] MMMM [de] YYYY H:mm" }, relativeTime: { future: "en %s", past: "hace %s", s: "unos segundos", m: "un minuto", mm: "%d minutos", h: "una hora", hh: "%d horas", d: "un d\xEDa", dd: "%d d\xEDas", M: "un mes", MM: "%d meses", y: "un a\xF1o", yy: "%d a\xF1os" }, ordinal: function(f) {
return f + "\xBA";
} };
return t.default.locale(g, null, !0), g;
});
})(gt);
const bt = { key: "hdrrow" }, yt = { class: "bh-checkbox" }, Ct = ["onClick"], kt = {
width: "16",
height: "16",
viewBox: "0 0 14 14",
fill: "none"
}, _t = {
key: 0,
class: "bh-filter bh-relative"
}, wt = ["onUpdate:modelValue"], Lt = ["onUpdate:modelValue"], Ft = ["id", "onUpdate:modelValue"], St = ["id", "onUpdate:modelValue"], xt = ["onUpdate:modelValue"], Mt = ["onUpdate:modelValue"], $t = ["value"], qt = ["onClick"], Ae = /* @__PURE__ */ de({
__name: "column-header",
props: ["all", "currentSortColumn", "currentSortDirection", "isOpenFilter", "isFooter", "checkAll", "columnFilterLang"],
emits: ["selectAll", "sortChange", "filterChange", "toggleFilterMenu"],
setup(x, { emit: M }) {
X.locale("es");
const o = B(null), p = x, t = M;
G(() => p.checkAll, () => {
o.value && (o.value.indeterminate = p.checkAll !== 0 ? !p.checkAll : !1, o.value.checked = p.checkAll);
});
const f = ($) => {
Be(() => {
const v = document.getElementById($.field);
v && new De({
element: v,
singleMode: !0,
lang: "es-MX",
tooltipNumber: (a) => a - 1,
setup: (a) => {
a.on("selected", (w, m) => {
let L = X(w.dateInstance).format("YYYY-MM-DD");
L += m != null ? " - " + X(m.dateInstance).format("YYYY-MM-DD") : "", $.value = L, t("filterChange");
}), a.on("clear:selection", () => {
$.value = null, t("filterChange");
});
},
resetButton: () => {
let a = document.createElement("button");
return a.innerText = "Limpiar", a.addEventListener("click", (w) => {
w.preventDefault();
}), a;
}
});
});
}, d = ($) => {
Be(() => {
const v = document.getElementById($.field);
v && new De({
element: v,
singleMode: !1,
lang: "es-MX",
tooltipNumber: (a) => a - 1,
setup: (a) => {
a.on("selected", (w, m) => {
let L = X(w.dateInstance).format("YYYY-MM-DD");
L += m != null ? " - " + X(m.dateInstance).format("YYYY-MM-DD") : "", $.value = L, t("filterChange");
}), a.on("clear:selection", () => {
$.value = null, t("filterChange");
});
},
resetButton: () => {
let a = document.createElement("button");
return a.innerText = "Limpiar", a.addEventListener("click", (w) => {
w.preventDefault();
}), a;
}
});
});
};
return fe(() => {
p.all.columns.forEach(($) => {
$.type === "date" && typeof $.range == "boolean" && $.range == !0 ? d($) : $.type === "date" && f($);
});
}), ($, v) => (u(), c("tr", bt, [
p.all.hasCheckbox ? (u(), c("th", {
key: "chkall",
class: h(["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
}])
}, [
s("div", yt, [
s("input", {
ref_key: "selectedAll",
ref: o,
type: "checkbox",
onClick: v[0] || (v[0] = se((a) => t("selectAll", a.target.checked), ["stop"]))
}, null, 512),
s("div", null, [
I(Te, { class: "check" }),
I(dt, { class: "intermediate" })
])
])
], 2)) : _("", !0),
(u(!0), c(D, null, K(p.all.columns, (a, w) => (u(), c(D, null, [
a.hide ? _("", !0) : (u(), c("th", {
key: a.field,
class: h(["bh-select-none bh-z-[1]", [
p.all.sortable && a.sort ? "bh-cursor-pointer" : "",
w === 0 && p.all.stickyFirstColumn ? "bh-sticky bh-left-0 bh-bg-blue-light" : "",
p.all.hasCheckbox && w === 0 && p.all.stickyFirstColumn ? "bh-left-[52px]" : ""
]]),
style: Ye({
width: a.width,
"min-width": a.minWidth,
"max-width": a.maxWidth
})
}, [
s("div", {
class: h(["bh-flex bh-items-center", [a.headerClass ? a.headerClass : ""]]),
onClick: (m) => p.all.sortable && a.sort && t("sortChange", a.field)
}, [
Ne(k(a.title) + " ", 1),
p.all.sortable && a.sort ? (u(), c("span", {
key: 0,
class: h(["bh-ml-3 bh-sort bh-flex bh-items-center", [p.currentSortColumn, p.currentSortDirection]])
}, [
(u(), c("svg", kt, [
s("polygon", {
points: "3.11,6.25 10.89,6.25 7,1.75 ",
fill: "currentColor",
class: h(["bh-text-black/20", [x.currentSortColumn === a.field && x.currentSortDirection === "asc" ? "!bh-text-primary" : ""]])
}, null, 2),
s("polygon", {
points: "7,12.25 10.89,7.75 3.11,7.75 ",
fill: "currentColor",
class: h(["bh-text-black/20", [x.currentSortColumn === a.field && x.currentSortDirection === "desc" ? "!bh-text-primary" : ""]])
}, null, 2)
]))
], 2)) : _("", !0)
], 10, Ct),
p.all.columnFilter && !p.isFooter ? (u(), c(D, { key: 0 }, [
a.filter ? (u(), c("div", _t, [
a.type === "string" && !a.options ? U((u(), c("input", {
key: 0,
"onUpdate:modelValue": (m) => a.value = m,
type: "text",
class: "bh-form-control",
autocomplete: "off",
onKeyup: v[1] || (v[1] = (m) => t("filterChange"))
}, null, 40, wt)), [
[
ie,
a.value,
void 0,
{ trim: !0 }
]
]) : _("", !0),
a.type === "number" ? U((u(), c("input", {
key: 1,
"onUpdate:modelValue": (m) => a.value = m,
type: "number",
class: "bh-form-control",
autocomplete: "off",
onKeyup: v[2] || (v[2] = (m) => t("filterChange"))
}, null, 40, Lt)), [
[
ie,
a.value,
void 0,
{
number: !0,
trim: !0
}
]
]) : _("", !0),
a.type === "date" && !a.range ? U((u(), c("input", {
key: 2,
ref_for: !0,
ref: a.field,
id: a.field,
"onUpdate:modelValue": (m) => a.value = m,
type: "text",
autocomplete: "off",
placeholder: "Fecha",
class: "bh-form-control"
}, null, 8, Ft)), [
[ie, a.value]
]) : _("", !0),
a.type === "date" && typeof a.range == "boolean" && a.range == !0 ? U((u(), c("input", {
key: 3,
ref_for: !0,
ref: a.field,
id: a.field,
"onUpdate:modelValue": (m) => a.value = m,
type: "text",
class: "bh-form-control",
placeholder: "Selecciona rango de fechas",
autocomplete: "off"
}, null, 8, St)), [
[ie, a.value]
]) : _("", !0),
a.type === "bool" ? U((u(), c("select", {
key: 4,
"onUpdate:modelValue": (m) => a.value = m,
class: "bh-form-control",
onChange: v[3] || (v[3] = (m) => t("filterChange"))
}, [...v[7] || (v[7] = [
s("option", { value: void 0 }, "All", -1),
s("option", { value: !0 }, "True", -1),
s("option", { value: !1 }, "False", -1)
])], 40, xt)), [
[ce, a.value]
]) : _("", !0),
a.type === "string" && a.options ? U((u(), c("select", {
key: 5,
class: "bh-form-control",
"onUpdate:modelValue": (m) => a.value = m,
onChange: v[4] || (v[4] = (m) => t("filterChange"))
}, [
v[8] || (v[8] = s("option", { value: void 0 }, "Todos", -1)),
(u(!0), c(D, null, K(a.options, (m) => (u(), c("option", {
key: "opt" + m,
value: m
}, k(m), 9, $t))), 128))
], 40, Mt)), [
[ce, a.value]
]) : _("", !0),
a.type != "date" && a.type != "bool" && !a.options ? (u(), c("button", {
key: 6,
type: "button",
onClick: se((m) => t("toggleFilterMenu", a), ["stop"])
}, [
I(mt, { class: "bh-w-4" })
], 8, qt)) : _("", !0),
U(I(ot, {
column: a,
type: a.type,
columnFilterLang: p.columnFilterLang,
onClose: v[5] || (v[5] = (m) => t("toggleFilterMenu", null)),
onFilterChange: v[6] || (v[6] = (m) => t("filterChange"))
}, null, 8, ["column", "type", "columnFilterLang"]), [
[Qe, p.isOpenFilter === a.field]
])
])) : _("", !0)
], 64)) : _("", !0)
], 6))
], 64))), 256))
]));
}
}), zt = {}, Bt = {
width: "84",
height: "84",
viewBox: "0 0 24 24",
class: "bh-loader bh-text-primary"
};
function Dt(x, M) {
return u(), c("svg", Bt, [...M[0] || (M[0] = [
Ze('<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 At = /* @__PURE__ */ ue(zt, [["render", Dt]]), Yt = { class: "bh-datatable bh-antialiased bh-relative bh-text-black bh-text-sm bh-font-normal" }, Nt = ["onClick"], Tt = { class: "bh-checkbox" }, Vt = ["value"], Rt = ["innerHTML"], Ht = { key: 1 }, Pt = ["colspan"], Ut = ["colspan"], Ot = {
key: 0,
class: "bh-absolute bh-inset-0 bh-bg-blue-light/50 bh-grid bh-place-content-center"
}, Et = { class: "bh-flex bh-items-center bh-flex-wrap bh-flex-col sm:bh-flex-row bh-gap-4" }, It = { class: "bh-pagination-info bh-flex bh-items-center" }, Gt = { class: "bh-mr-2" }, Kt = ["value"], Jt = { class: "bh-pagination-number sm:bh-ml-auto bh-inline-flex bh-items-center bh-space-x-1" }, Wt = ["innerHTML"], Xt = {
key: 1,
"aria-hidden": "true",
width: "14",
height: "14",
viewBox: "0 0 16 16"
}, Qt = ["innerHTML"], Zt = {
key: 1,
"aria-hidden": "true",
width: "14",
height: "14",
viewBox: "0 0 16 16"
}, jt = ["onClick"], el = ["innerHTML"], tl = {
key: 1,
"aria-hidden": "true",
width: "14",
height: "14",
viewBox: "0 0 16 16"
}, ll = ["innerHTML"], nl = {
key: 1,
"aria-hidden": "true",
width: "14",
height: "14",
viewBox: "0 0 16 16"
}, cl = /* @__PURE__ */ de({
__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: "desc" },
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 },
fieldVerify: {},
virifyClass: {}
},
emits: ["change", "sortChange", "searchChange", "pageChange", "pageSizeChange", "rowSelect", "filterChange", "rowClick", "rowDBClick"],
setup(x, { expose: M, emit: o }) {
var ke, _e, we, Le;
const p = je(), t = x;
for (const e of t.columns || []) {
const n = ((ke = e.type) == null ? void 0 : ke.toLowerCase()) || "string";
e.type = n, 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 = !n || n === "string" ? "contain" : "equal";
}
const g = B([]), f = B(t.page), d = B(t.pagination ? t.pageSize : (_e = t.rows) == null ? void 0 : _e.length), $ = t.pageSize, v = B(t.sortColumn), a = (we = t.sortColumn) != null ? we : "id", w = B(t.sortDirection), m = (Le = t.sortDirection) != null ? Le : "desc", L = B(t.totalRows), z = B([]), J = B(null), T = B(t.loading), V = B(t.search), ne = JSON.parse(JSON.stringify(t.columns)), R = B(null), Q = B(null);
let O = B(0);
const oe = B(230);
fe(() => {
E();
});
const A = o;
M({
reset() {
Ie();
},
getSelectedRows() {
return Ge();
},
getColumnFilters() {
return Ke();
},
clearSelectedRows() {
return Je();
},
selectRow(e) {
ye(e);
},
unselectRow(e) {
Ce(e);
},
isRowSelected(e) {
return re(e);
},
getFilteredRows() {
return he();
}
});
const ae = (e, ...n) => e.replace(/{(\d+)}/g, (i, y) => typeof n[y] < "u" ? n[y] : i), q = le(() => {
const e = t.columns.find((n) => n.isUnique);
return (e == null ? void 0 : e.field) || null;
}), N = le(() => {
const e = d.value < 1 ? 1 : Math.ceil(L.value / d.value);
return Math.max(e || 0, 1);
}), F = le(() => (f.value - 1) * d.value + 1), ve = le(() => {
const e = f.value * d.value;
return L.value >= e ? e : L.value;
}), Ve = le(() => {
let e, n;
return typeof t.showNumbersCount < "u" && t.showNumbersCount < N.value ? (e = Math.max(f.value - Math.floor(t.showNumbersCount / 2), 1), n = e + t.showNumbersCount - 1, n > N.value && (n = N.value, e = n - t.showNumbersCount + 1)) : (e = 1, n = N.value), Array.from(Array(n + 1 - e).keys()).map((S) => e + S);
}), he = () => {
var S, j, Fe, Se;
let e = t.rows || [];
if (!t.isServerMode) {
if ((S = t.columns) == null || S.forEach((l) => {
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.condition === "contain" ? e = e.filter((r) => {
var C;
return Y(l.filterColumns || [], r, l.value.toLowerCase()) || ((C = b(r, l.field)) == null ? void 0 : C.toString().toLowerCase().includes(l.value.toLowerCase()));
}) : l.condition === "not_contain" ? e = e.filter((r) => {
var C;
return !Y(l.filterColumns || [], r, l.value.toLowerCase()) && !((C = b(r, l.field)) != null && C.toString().toLowerCase().includes(l.value.toLowerCase()));
}) : l.condition === "equal" ? e = e.filter((r) => {
var C;
return Y(l.filterColumns || [], r, l.value.toLowerCase()) || ((C = b(r, l.field)) == null ? void 0 : C.toString().toLowerCase()) === l.value.toLowerCase();
}) : l.condition === "not_equal" ? e = e.filter((r) => {
var C;
return !Y(l.filterColumns || [], r, l.value.toLowerCase()) && ((C = b(r, l.field)) == null ? void 0 : C.toString().toLowerCase()) !== l.value.toLowerCase();
}) : l.condition == "start_with" ? e = e.filter((r) => {
var C;
return Y(l.filterColumns || [], r, l.value.toLowerCase()) || ((C = b(r, l.field)) == null ? void 0 : C.toString().toLowerCase().indexOf(l.value.toLowerCase())) === 0;
}) : l.condition == "end_with" && (e = e.filter((r) => {
var C;
return Y(l.filterColumns || [], r, l.value.toLowerCase()) || ((C = b(r, l.field)) == null ? void 0 : C.toString().toLowerCase().substr(l.value.length * -1)) === l.value.toLowerCase();
}))) : l.type === "number" ? (l.value && !l.condition && (l.condition = "equal"), l.condition === "equal" ? e = e.filter((r) => Y(l.filterColumns || [], r, l.value.toLowerCase()) || b(r, l.field) && parseFloat(b(r, l.field)) === parseFloat(l.value)) : l.condition === "not_equal" ? e = e.filter((r) => Y(l.filterColumns || [], r, l.value.toLowerCase()) || b(r, l.field) && parseFloat(b(r, l.field)) !== parseFloat(l.value)) : l.condition === "greater_than" ? e = e.filter((r) => Y(l.filterColumns || [], r, l.value.toLowerCase()) || b(r, l.field) && parseFloat(b(r, l.field)) > parseFloat(l.value)) : l.condition === "greater_than_equal" ? e = e.filter((r) => Y(l.filterColumns || [], r, l.value.toLowerCase()) || b(r, l.field) && parseFloat(b(r, l.field)) >= parseFloat(l.value)) : l.condition === "less_than" ? e = e.filter((r) => Y(l.filterColumns || [], r, l.value.toLowerCase()) || b(r, l.field) && parseFloat(b(r, l.field)) < parseFloat(l.value)) : l.condition === "less_than_equal" && (e = e.filter((r) => Y(l.filterColumns || [], r, l.value.toLowerCase()) || b(r, l.field) && parseFloat(b(r, l.field)) <= parseFloat(l.value)))) : l.type === "date" && !l.range ? e = e.filter((r) => b(r, l.field) && Z(b(r, l.field)) === l.value) : l.type === "date" && l.range ? e = e.filter((r) => {
const [C, ee] = l.value.split(" - ");
return b(r, "date_start") && b(r, "date_end") && Z(b(r, "date_start")) >= Z(C) && Z(b(r, "date_end")) <= Z(ee);
}) : l.type === "bool" && (e = e.filter((r) => b(r, l.field) === l.value)), l.condition === "is_null" ? (e = e.filter((r) => b(r, l.field) == null || b(r, l.field) == ""), l.value = "") : l.condition === "is_not_null" && (l.value = "", e = e.filter((r) => b(r, l.field))));
}), V.value && (e == null ? void 0 : e.length)) {
let l = [];
const r = (t.columns || []).filter((C) => C.search && !C.hide).map((C) => C.field);
for (var n = 0; n < (e == null ? void 0 : e.length); n++)
for (var i = 0; i < r.length; i++)
if ((j = b(e[n], r[i])) != null && j.toString().toLowerCase().includes(V.value.toLowerCase())) {
l.push(e[n]);
break;
}
e = l;
}
var y = new Intl.Collator("en", {
numeric: ((Fe = t.columns.find((l) => l.field == v.value)) == null ? void 0 : Fe.type) === void 0 || ((Se = t.columns.find((l) => l.field == v.value)) == null ? void 0 : Se.type) === "number",
sensitivity: "base"
});
const xe = w.value === "desc" ? -1 : 1;
e.sort((l, r) => {
var Me, $e, qe, ze;
const C = (Me = v.value) == null ? void 0 : Me.split(".").reduce((P, te) => P == null ? void 0 : P[te], l), ee = ($e = v.value) == null ? void 0 : $e.split(".").reduce((P, te) => P == null ? void 0 : P[te], r);
if (v.value === "code") {
const P = (qe = C.split("-")[1]) != null ? qe : C.split("-")[0], te = (ze = ee.split("-")[1]) != null ? ze : ee.split("-")[0];
return (parseInt(P) - parseInt(te)) * xe;
}
return y.compare(C, ee) * xe;
});
}
return e;
}, Y = (e, n, i) => e.some((y) => {
var S;
return (S = b(n, y)) == null ? void 0 : S.toString().toLowerCase().includes(i);
}), E = () => {
let e = [], n = he();
t.isServerMode ? (L.value = t.totalRows || 0, e = n) : (L.value = (n == null ? void 0 : n.length) || 0, e = n.slice(F.value - 1, ve.value)), g.value = e || [];
};
G(
() => t.loading,
() => {
T.value = t.loading;
}
);
const me = (e) => {
e ? R.value === e.field ? R.value = null : R.value = e.field : R.value = null;
}, Re = () => {
if (f.value == 1)
return !1;
f.value--;
}, He = (e) => {
f.value = e;
}, Pe = () => {
if (f.value >= N.value)
return !1;
f.value++;
};
G(() => f.value, () => {
H(!1), t.isServerMode ? W("page") : (E(), A("pageChange", f.value));
}), G(() => t.rows, () => {
t.isServerMode || (f.value = 1), H(!1), E();
}), G(() => d.value, () => {
H(!1), t.isServerMode ? f.value === 1 ? W("pagesize", !0) : f.value = 1 : (f.value = 1, E(), A("pageSizeChange", d.value));
});
const pe = (e) => {
let n = "asc";
e == v.value && w.value === "asc" && (n = "desc");
let i = (f.value - 1) * d.value, y = d.value;
v.value = e, w.value = n, H(!1), E(), t.isServerMode ? W("sort") : A("sortChange", { offset: i, limit: y, field: e, direction: n });
}, ge = (e) => {
J.value = e.length && g.value.length && e.length === g.value.length;
const n = g.value.filter((i, y) => z.value.includes(q.value ? i[q.value] : y));
A("rowSelect", n);
};
G(() => z.value, ge);
const H = (e) => {
e ? z.value = g.value.map((n, i) => q.value ? n[q.value] : i) : z.value = [];
}, be = () => {
H(!1), t.isServerMode ? f.value === 1 ? W("filter", !0) : f.value = 1 : (f.value = 1, E(), A("filterChange", t.columns));
}, Ue = () => {
H(!1), t.isServerMode ? f.value === 1 ? W("search", !0) : f.value = 1 : (f.value = 1, E(), A("searchChange", V.value));
};
G(
() => t.search,
() => {
V.value = t.search, Ue();
}
);
const b = (e, n) => n == null ? void 0 : n.split(".").reduce((i, y) => i == null ? void 0 : i[y], e), Z = (e) => {
try {
if (!e)
return "";
const n = new Date(e), i = n.getDate(), y = n.getMonth() + 1;
return n.getFullYear() + "-" + (y > 9 ? y : "0" + y) + "-" + (i > 9 ? i : "0" + i);
} catch {
}
return "";
}, Oe = (e, n) => {
O.value++, O.value === 1 ? Q.value = setTimeout(() => {
O.value = 0, t.selectRowOnClick && (re(n) ? Ce(n) : ye(n), ge(z.value)), A("rowClick", e);
}, oe.value) : O.value === 2 && (clearTimeout(Q.value), O.value = 0, A("rowDBClick", e));
}, W = (e, n = !1) => {
if (t.isServerMode) {
Ee();
const i = {
current_page: n ? 1 : f.value,
pagesize: d.value,
offset: (f.value - 1) * d.value,
sort_column: v.value,
sort_direction: w.value,
search: V.value,
column_filters: t.columns,
change_type: e
};
A("change", i);
}
}, Ee = () => {
for (let e = 0; e < t.columns.length; e++) {
let n = t.columns[e];
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.type === "number" && n.value && !n.condition && (n.condition = "equal"), n.type === "date" && n.value && !n.condition && (n.condition = "equal"));
}
}, Ie = () => {
H(!1);
for (let e = 0; e < t.columns.length; e++)
t.columns[e] = ne[e];
V.value = "", d.value = $, v.value = a, w.value = m, t.isServerMode ? f.value === 1 ? W("reset", !0) : f.value = 1 : (f.value = 1, E());
}, Ge = () => g.value.filter((n, i) => z.value.includes(q.value ? n[q.value] : i)), Ke = () => t.columns, Je = () => {
z.value = [];
}, ye = (e) => {
if (!re(e)) {
const n = g.value.find((i, y) => y === e);
z.value.push(q.value ? n[q.value] : e);
}
}, Ce = (e) => {
if (re(e)) {
const n = g.value.find((i, y) => y === e);
z.value = z.value.filter((i) => i !== (q.value ? n[q.value] : e));
}
}, re = (e) => {
const n = g.value.find((i, y) => y === e);
return n ? z.value.includes(q.value ? n[q.value] : e) : !1;
}, We = (e) => {
var n;
return t.fieldVerify && e[t.fieldVerify] ? (n = t.virifyClass) != null ? n : "text-danger" : "";
};
return (e, n) => (u(), c("div", Yt, [
s("div", {
class: h(["bh-table-responsive", { "bh-min-h-[300px]": T.value }]),
style: Ye({ height: t.stickyHeader && t.height })
}, [
s("table", {
class: h([t.skin])
}, [
s("thead", {
class: h({ "bh-sticky bh-top-0 bh-z-10": t.stickyHeader })
}, [
I(Ae, {
all: t,
currentSortColumn: v.value,
currentSortDirection: w.value,
isOpenFilter: R.value,
checkAll: J.value,
columnFilterLang: t.columnFilterLang,
onSelectAll: H,
onSortChange: pe,
onFilterChange: be,
onToggleFilterMenu: me
}, null, 8, ["currentSortColumn", "currentSortDirection", "isOpenFilter", "checkAll", "columnFilterLang"])
], 2),
s("tbody", null, [
L.value ? (u(!0), c(D, { key: 0 }, K(g.value, (i, y) => (u(), c("tr", {
key: i[q.value] ? i[q.value] : y,
class: h([
typeof t.rowClass == "function" ? x.rowClass(i) : t.rowClass,
t.selectRowOnClick ? "bh-cursor-pointer" : "",
We(i)
]),
onClick: (S) => Oe(i, y)
}, [
t.hasCheckbox ? (u(), c("td", {
key: 0,
class: h({
"bh-sticky bh-left-0 bh-bg-blue-light": t.stickyFirstColumn
})
}, [
s("div", Tt, [
U(s("input", {
"onUpdate:modelValue": n[0] || (n[0] = (S) => z.value = S),
type: "checkbox",
value: i[q.value] ? i[q.value] : y,
onClick: n[1] || (n[1] = se(() => {
}, ["stop"]))
}, null, 8, Vt), [
[et, z.value]
]),
s("div", null, [
I(Te, { class: "check" })
])
])
], 2)) : _("", !0),
(u(!0), c(D, null, K(t.columns, (S, j) => (u(), c(D, null, [
S.hide ? _("", !0) : (u(), c("td", {
key: S.field,
class: h([
typeof t.cellClass == "function" ? x.cellClass(i) : t.cellClass,
j === 0 && t.stickyFirstColumn ? "bh-sticky bh-left-0 bh-bg-blue-light" : "",
t.hasCheckbox && j === 0 && t.stickyFirstColumn ? "bh-left-[52px]" : "",
S.cellClass ? S.cellClass : ""
])
}, [
tt(p)[S.field] ? lt(e.$slots, S.field, {
key: 0,
value: i
}) : S.cellRenderer ? (u(), c("div", {
key: 1,
innerHTML: S.cellRenderer(i)
}, null, 8, Rt)) : (u(), c(D, { key: 2 }, [
Ne(k(b(i, S.field)), 1)
], 64))
], 2))
], 64))), 256))
], 10, Nt))), 128)) : _("", !0),
!L.value && !T.value ? (u(), c("tr", Ht, [
s("td", {
colspan: t.columns.length + 1
}, k(t.noDataContent), 9, Pt)
])) : _("", !0),
!L.value && T.value ? (u(!0), c(D, { key: 2 }, K(t.pageSize, (i) => (u(), c("tr", {
key: i,
class: "!bh-bg-white bh-h-11 !bh-border-transparent"
}, [
s("td", {
colspan: t.columns.length + 1,
class: "!bh-p-0 !bh-border-transparent"
}, [...n[5] || (n[5] = [
s("div", { class: "bh-skeleton-box bh-h-8" }, null, -1)
])], 8, Ut)
]))), 128)) : _("", !0)
]),
t.cloneHeaderInFooter ? (u(), c("tfoot", {
key: 0,
class: h({ "bh-sticky bh-bottom-0": t.stickyHeader })
}, [
I(Ae, {
all: t,
currentSortColumn: v.value,
currentSortDirection: w.value,
isOpenFilter: R.value,
isFooter: !0,
checkAll: J.value,
onSelectAll: H,
onSortChange: pe,
onFilterChange: be,
onToggleFilterMenu: me
}, null, 8, ["currentSortColumn", "currentSortDirection", "isOpenFilter", "checkAll"])
], 2)) : _("", !0)
], 2),
L.value && T.value ? (u(), c("div", Ot, [
I(At)
])) : _("", !0)
], 6),
t.pagination && L.value ? (u(), c("div", {
key: 0,
class: h(["bh-pagination bh-py-5", { "bh-pointer-events-none": T.value }])
}, [
s("div", Et, [
s("div", It, [
s("span", Gt, k(ae(t.paginationInfo, L.value ? F.value : 0, ve.value, L.value)), 1),
t.showPageSize ? U((u(), c("select", {
key: 0,
"onUpdate:modelValue": n[2] || (n[2] = (i) => d.value = i),
class: "bh-pagesize"
}, [
(u(!0), c(D, null, K(t.pageSizeOptions, (i) => (u(), c("option", {
value: i,
key: i
}, k(i), 9, Kt))), 128))
], 512)), [
[ce, d.value]
]) : _("", !0)
]),
s("div", Jt, [
t.showFirstPage ? (u(), c("button", {
key: 0,
type: "button",
class: h(["bh-page-item first-page", { disabled: f.value <= 1 }]),
onClick: n[3] || (n[3] = (i) => f.value = 1)
}, [
t.firstArrow ? (u(), c("span", {
key: 0,
innerHTML: t.firstArrow
}, null, 8, Wt)) : (u(), c("svg", Xt, [...n[6] || (n[6] = [
s("g", {
fill: "currentColor",
"fill-rule": "evenodd"
}, [
s("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" }),
s("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)) : _("", !0),
s("button", {
type: "button",
class: h(["bh-page-item previous-page", { disabled: f.value <= 1 }]),
onClick: Re
}, [
t.previousArrow ? (u(), c("span", {
key: 0,
innerHTML: t.previousArrow
}, null, 8, Qt)) : (u(), c("svg", Zt, [...n[7] || (n[7] = [
s("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(D, { key: 1 }, K(Ve.value, (i) => (u(), c("button", {
key: i,
type: "button",
class: h(["bh-page-item", {
disabled: f.value === i,
"bh-active": i === f.value
}]),
onClick: (y) => He(i)
}, k(i), 11, jt))), 128)) : _("", !0),
s("button", {
type: "button",
class: h(["bh-page-item next-page", { disabled: f.value >= N.value }]),
onClick: Pe
}, [
t.nextArrow ? (u(), c("span", {
key: 0,
innerHTML: t.nextArrow
}, null, 8, el)) : (u(), c("svg", tl, [...n[8] || (n[8] = [
s("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: h(["bh-page-item last-page", { disabled: f.value >= N.value }]),
onClick: n[4] || (n[4] = (i) => f.value = N.value)
}, [
t.lastArrow ? (u(), c("span", {
key: 0,
innerHTML: t.lastArrow
}, null, 8, ll)) : (u(), c("svg", nl, [...n[9] || (n[9] = [
s("g", {
fill: "currentColor",
"fill-rule": "evenodd"
}, [
s("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" }),
s("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)) : _("", !0)
])
])
], 2)) : _("", !0)
]));
}
});
export {
cl as default
};