@bhplugin/vue3-datatable
Version:
Vue3 Datatable - fully customizable & easy to use datatable library
975 lines (974 loc) • 35.1 kB
JavaScript
import { Fragment as e, computed as t, createCommentVNode as n, createElementBlock as r, createElementVNode as i, createStaticVNode as a, createTextVNode as o, createVNode as s, defineComponent as c, isRef as l, nextTick as u, normalizeClass as d, normalizeStyle as ee, onBeforeUnmount as f, onMounted as p, openBlock as m, reactive as h, ref as g, renderList as _, renderSlot as v, toDisplayString as y, toRef as b, unref as x, useSlots as te, vModelSelect as ne, vShow as S, watch as C, withDirectives as w, withModifiers as T } from "vue";
//#region src/components/column-filter.vue?vue&type=script&setup=true&lang.ts
var E = { class: "bh-filter-menu bh-absolute bh-right-0 bh-top-full bh-z-[1] bh-mt-1 bh-w-[180px] bh-whitespace-normal bh-rounded-md bh-bg-white bh-shadow-md" }, D = /* @__PURE__ */ c({
__name: "column-filter",
props: {
column: {},
columnFilterLang: { default: null }
},
emits: ["close", "conditionChange"],
setup(t, { emit: a }) {
let o = t, s = a;
p(() => {
document.addEventListener("click", l);
}), f(() => {
document.removeEventListener("click", l);
});
let c = (e, t) => o.columnFilterLang?.[e] ?? t, l = () => {
s("close");
}, u = (e) => {
s("conditionChange", o.column.field, e);
};
return (t, a) => (m(), r("div", E, [i("div", {
class: "bh-overflow-hidden bh-rounded bh-text-[13px] bh-font-normal",
onClick: T(l, ["stop"])
}, [
i("button", {
type: "button",
class: d({ active: o.column.condition === "" }),
onClick: a[0] ||= (e) => u("")
}, y(c("no_filter", "No filter")), 3),
o.column.type === "string" ? (m(), r(e, { key: 0 }, [
i("button", {
type: "button",
class: d({ active: o.column.condition === "contain" }),
onClick: a[1] ||= (e) => u("contain")
}, y(c("contain", "Contain")), 3),
i("button", {
type: "button",
class: d({ active: o.column.condition === "not_contain" }),
onClick: a[2] ||= (e) => u("not_contain")
}, y(c("not_contain", "Not contain")), 3),
i("button", {
type: "button",
class: d({ active: o.column.condition === "equal" }),
onClick: a[3] ||= (e) => u("equal")
}, y(c("equal", "Equal")), 3),
i("button", {
type: "button",
class: d({ active: o.column.condition === "not_equal" }),
onClick: a[4] ||= (e) => u("not_equal")
}, y(c("not_equal", "Not equal")), 3),
i("button", {
type: "button",
class: d({ active: o.column.condition === "start_with" }),
onClick: a[5] ||= (e) => u("start_with")
}, y(c("start_with", "Starts with")), 3),
i("button", {
type: "button",
class: d({ active: o.column.condition === "end_with" }),
onClick: a[6] ||= (e) => u("end_with")
}, y(c("end_with", "Ends with")), 3)
], 64)) : o.column.type === "number" ? (m(), r(e, { key: 1 }, [
i("button", {
type: "button",
class: d({ active: o.column.condition === "equal" }),
onClick: a[7] ||= (e) => u("equal")
}, y(c("equal", "Equal")), 3),
i("button", {
type: "button",
class: d({ active: o.column.condition === "not_equal" }),
onClick: a[8] ||= (e) => u("not_equal")
}, y(c("not_equal", "Not equal")), 3),
i("button", {
type: "button",
class: d({ active: o.column.condition === "greater_than" }),
onClick: a[9] ||= (e) => u("greater_than")
}, y(c("greater_than", "Greater than")), 3),
i("button", {
type: "button",
class: d({ active: o.column.condition === "greater_than_equal" }),
onClick: a[10] ||= (e) => u("greater_than_equal")
}, y(c("greater_than_equal", "Greater than or equal")), 3),
i("button", {
type: "button",
class: d({ active: o.column.condition === "less_than" }),
onClick: a[11] ||= (e) => u("less_than")
}, y(c("less_than", "Less than")), 3),
i("button", {
type: "button",
class: d({ active: o.column.condition === "less_than_equal" }),
onClick: a[12] ||= (e) => u("less_than_equal")
}, y(c("less_than_equal", "Less than or equal")), 3)
], 64)) : o.column.type === "date" ? (m(), r(e, { key: 2 }, [
i("button", {
type: "button",
class: d({ active: o.column.condition === "equal" }),
onClick: a[13] ||= (e) => u("equal")
}, y(c("equal", "Equal")), 3),
i("button", {
type: "button",
class: d({ active: o.column.condition === "not_equal" }),
onClick: a[14] ||= (e) => u("not_equal")
}, y(c("not_equal", "Not equal")), 3),
i("button", {
type: "button",
class: d({ active: o.column.condition === "greater_than" }),
onClick: a[15] ||= (e) => u("greater_than")
}, y(c("greater_than", "Greater than")), 3),
i("button", {
type: "button",
class: d({ active: o.column.condition === "less_than" }),
onClick: a[16] ||= (e) => u("less_than")
}, y(c("less_than", "Less than")), 3)
], 64)) : n("", !0),
i("button", {
type: "button",
class: d({ active: o.column.condition === "is_null" }),
onClick: a[17] ||= (e) => u("is_null")
}, y(c("is_null", "Is null")), 3),
i("button", {
type: "button",
class: d({ active: o.column.condition === "is_not_null" }),
onClick: a[18] ||= (e) => u("is_not_null")
}, y(c("is_not_null", "Not null")), 3)
])]));
}
}), O = (e, t) => {
let n = e.__vccOpts || e;
for (let [e, r] of t) n[e] = r;
return n;
}, re = {}, k = {
version: "1.1",
viewBox: "0 0 17 12",
xmlns: "http://www.w3.org/2000/svg"
};
function A(e, t) {
return m(), r("svg", k, [...t[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)]]);
}
var ie = /* @__PURE__ */ O(re, [["render", A]]), j = {}, M = {
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 N(e, t) {
return m(), r("svg", M, [...t[0] ||= [i("line", {
x1: "5",
y1: "12",
x2: "19",
y2: "12"
}, null, -1)]]);
}
var ae = /* @__PURE__ */ O(j, [["render", N]]), oe = {}, se = {
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 P(e, t) {
return m(), r("svg", se, [...t[0] ||= [i("polygon", { points: "22 3 2 3 10 12.46 10 19 14 21 14 12.46 22 3" }, null, -1)]]);
}
var ce = /* @__PURE__ */ O(oe, [["render", P]]), F = { key: "hdrrow" }, I = { class: "bh-checkbox" }, le = ["onClick"], L = {
key: 0,
class: "bh-sort bh-ml-3 bh-flex bh-items-center"
}, R = {
width: "16",
height: "16",
viewBox: "0 0 14 14",
fill: "none"
}, z = {
key: 0,
class: "bh-relative bh-filter"
}, ue = ["value", "onInput"], de = ["value", "onInput"], B = ["value", "onChange"], V = ["value", "onChange"], H = { value: "" }, fe = { value: "true" }, U = { value: "false" }, pe = ["onClick"], me = /* @__PURE__ */ c({
__name: "column-header",
props: {
hasCheckbox: { type: Boolean },
stickyHeader: { type: Boolean },
stickyFirstColumn: { type: Boolean },
sortable: { type: Boolean },
columnFilter: { type: Boolean },
columns: {},
currentSortColumn: {},
currentSortDirection: {},
isOpenFilter: {},
isFooter: {
type: Boolean,
default: !1
},
checkAll: { type: [Boolean, null] },
columnFilterLang: { default: null }
},
emits: [
"selectAll",
"sortChange",
"filterValueChange",
"conditionChange",
"toggleFilterMenu"
],
setup(t, { emit: a }) {
let c = g(null), l = t, u = a, p = (e, t) => l.columnFilterLang?.[e] ?? t, h = (e) => {
let t = e.target;
u("selectAll", t.checked);
}, v = null, b = (e, t) => {
v && clearTimeout(v), v = setTimeout(() => {
u("filterValueChange", e, typeof t == "string" ? t.trim() : t);
}, 300);
}, x = (e, t) => {
(!t || /^\d{4}-\d{2}-\d{2}$/.test(t)) && (v && clearTimeout(v), v = setTimeout(() => {
u("filterValueChange", e, t || void 0);
}, 300));
}, te = (e, t) => {
let n;
n = t === "true" ? !0 : t === "false" ? !1 : void 0, u("filterValueChange", e, n), u("toggleFilterMenu", "");
};
return f(() => {
v && clearTimeout(v);
}), C(() => l.checkAll, () => {
c.value && (c.value.indeterminate = l.checkAll === null, c.value.checked = l.checkAll === !0);
}), (t, a) => (m(), r("tr", F, [l.hasCheckbox ? (m(), r("th", {
key: "chkall",
class: d(["bh-w-px", {
"bh-sticky bh-z-[1] bh-bg-blue-light": l.stickyHeader || l.stickyFirstColumn,
"bh-top-0": l.stickyHeader,
"bh-left-0": l.stickyFirstColumn
}])
}, [i("div", I, [i("input", {
ref_key: "checkboxRef",
ref: c,
type: "checkbox",
onClick: T(h, ["stop"])
}, null, 512), i("div", null, [s(ie, { class: "check" }), s(ae, { class: "intermediate" })])])], 2)) : n("", !0), (m(!0), r(e, null, _(l.columns, (t, c) => (m(), r(e, null, [t.hide ? n("", !0) : (m(), r("th", {
key: t.field,
class: d(["bh-z-[1] bh-select-none", [
l.sortable && t.sort ? "bh-cursor-pointer" : "",
c === 0 && l.stickyFirstColumn ? "bh-sticky bh-left-0 bh-bg-blue-light" : "",
l.hasCheckbox && c === 0 && l.stickyFirstColumn ? "bh-left-[52px]" : ""
]]),
style: ee({
width: t.width,
"min-width": t.minWidth,
"max-width": t.maxWidth
})
}, [i("div", {
class: d(["bh-flex bh-items-center", [t.headerClass ? t.headerClass : ""]]),
onClick: (e) => l.sortable && t.sort && u("sortChange", t.field)
}, [o(y(t.title) + " ", 1), l.sortable && t.sort ? (m(), r("span", L, [(m(), r("svg", R, [i("polygon", {
points: "3.11,6.25 10.89,6.25 7,1.75 ",
fill: "currentColor",
class: d(["bh-text-black/20", [l.currentSortColumn === t.field && l.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", [l.currentSortColumn === t.field && l.currentSortDirection === "desc" ? "!bh-text-primary" : ""]])
}, null, 2)]))])) : n("", !0)], 10, le), l.columnFilter && !l.isFooter ? (m(), r(e, { key: 0 }, [t.filter ? (m(), r("div", z, [
t.type === "string" ? (m(), r("input", {
key: 0,
value: t.value,
type: "text",
class: "bh-form-control",
onInput: (e) => b(t.field, e.target.value)
}, null, 40, ue)) : t.type === "number" ? (m(), r("input", {
key: 1,
value: t.value,
type: "number",
class: "bh-form-control",
onInput: (e) => b(t.field, e.target.value === "" ? void 0 : Number(e.target.value))
}, null, 40, de)) : t.type === "date" ? (m(), r("input", {
key: 2,
value: t.value,
type: "date",
class: "bh-form-control",
onChange: (e) => x(t.field, e.target.value)
}, null, 40, B)) : t.type === "bool" ? (m(), r("select", {
key: 3,
value: t.value ?? "",
class: "bh-form-control",
onChange: (e) => te(t.field, e.target.value)
}, [
i("option", H, y(p("all", "All")), 1),
i("option", fe, y(p("true", "True")), 1),
i("option", U, y(p("false", "False")), 1)
], 40, V)) : n("", !0),
t.type === "bool" ? n("", !0) : (m(), r("button", {
key: 4,
type: "button",
onClick: T((e) => u("toggleFilterMenu", t.field), ["stop"])
}, [s(ce, { class: "bh-w-4" })], 8, pe)),
w(s(D, {
column: t,
"column-filter-lang": l.columnFilterLang,
onClose: a[0] ||= (e) => u("toggleFilterMenu", ""),
onConditionChange: a[1] ||= (e, t) => u("conditionChange", e, t)
}, null, 8, ["column", "column-filter-lang"]), [[S, l.isOpenFilter === t.field]])
])) : n("", !0)], 64)) : n("", !0)], 6))], 64))), 256))]));
}
}), he = {}, W = {
width: "84",
height: "84",
viewBox: "0 0 24 24",
class: "bh-loader bh-text-primary"
};
function G(e, t) {
return m(), r("svg", W, [...t[0] ||= [a("<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)]]);
}
var ge = /* @__PURE__ */ O(he, [["render", G]]), K = (e, t) => t?.split(".").reduce((e, t) => e?.[t], e), q = (e) => {
try {
if (!e) return "";
let t = new Date(e);
if (isNaN(t.getTime())) return "";
let n = t.getDate(), r = t.getMonth() + 1;
return t.getFullYear() + "-" + (r > 9 ? r : "0" + r) + "-" + (n > 9 ? n : "0" + n);
} catch {
return "";
}
}, _e = (e, ...t) => e.replace(/{(\d+)}/g, (e, n) => {
let r = parseInt(n, 10);
return r < t.length ? String(t[r]) : e;
}), ve = (e) => e.replace(/<script[\s\S]*?<\/script\s*>/gi, "").replace(/<style[\s\S]*?<\/style\s*>/gi, "").replace(/<\/?(?:iframe|object|embed|form)\b[^>]*>/gi, "").replace(/\s+on\w+\s*=\s*(?:"[^"]*"|'[^']*'|[^\s>]*)/gi, "").replace(/(href|src|action)\s*=\s*["']?\s*javascript\s*:/gi, "$1=\"");
//#endregion
//#region src/components/composables/usePagination.ts
function ye(e) {
let n = g(e.page.value), r = g(e.pagination.value ? e.pageSize.value : e.totalRows.value), i = e.pageSize.value;
C(e.page, (e) => {
n.value = e;
});
let a = t(() => {
let t = r.value ?? 1, n = t < 1 ? 1 : Math.ceil(e.totalRows.value / t);
return Math.max(n || 0, 1);
});
return {
currentPage: n,
currentPageSize: r,
initialPageSize: i,
maxPage: a,
offset: t(() => (n.value - 1) * (r.value ?? 0) + 1),
limit: t(() => {
let t = n.value * (r.value ?? 0);
return e.totalRows.value >= t ? t : e.totalRows.value;
}),
paging: t(() => {
let t, r, i = e.showNumbersCount.value;
return i < a.value ? (t = Math.max(n.value - Math.floor(i / 2), 1), r = t + i - 1, r > a.value && (r = a.value, t = r - i + 1)) : (t = 1, r = a.value), Array.from({ length: r + 1 - t }, (e, n) => t + n);
})
};
}
//#endregion
//#region src/components/composables/useSorting.ts
function be(e) {
let t = g(e.sortColumn.value), n = g(e.sortDirection.value), r = e.sortColumn.value, i = e.sortDirection.value;
return {
currentSortColumn: t,
currentSortDirection: n,
initialSortColumn: r,
initialSortDirection: i,
toggleSort: (e) => {
let r = "asc";
return e === t.value && n.value === "asc" && (r = "desc"), t.value = e, n.value = r, {
field: e,
direction: r
};
},
resetSort: () => {
t.value = r, n.value = i;
}
};
}
//#endregion
//#region src/components/filter-strategies.ts
var xe = {
string: {
contain: (e, t) => String(e ?? "").toLowerCase().includes(String(t).toLowerCase()),
not_contain: (e, t) => !String(e ?? "").toLowerCase().includes(String(t).toLowerCase()),
equal: (e, t) => String(e ?? "").toLowerCase() === String(t).toLowerCase(),
not_equal: (e, t) => String(e ?? "").toLowerCase() !== String(t).toLowerCase(),
start_with: (e, t) => String(e ?? "").toLowerCase().startsWith(String(t).toLowerCase()),
end_with: (e, t) => String(e ?? "").toLowerCase().endsWith(String(t).toLowerCase())
},
number: {
equal: (e, t) => e != null && parseFloat(String(e)) === parseFloat(String(t)),
not_equal: (e, t) => e != null && parseFloat(String(e)) !== parseFloat(String(t)),
greater_than: (e, t) => e != null && parseFloat(String(e)) > parseFloat(String(t)),
greater_than_equal: (e, t) => e != null && parseFloat(String(e)) >= parseFloat(String(t)),
less_than: (e, t) => e != null && parseFloat(String(e)) < parseFloat(String(t)),
less_than_equal: (e, t) => e != null && parseFloat(String(e)) <= parseFloat(String(t))
},
date: {
equal: (e, t) => e != null && q(e) === String(t),
not_equal: (e, t) => e != null && q(e) !== String(t),
greater_than: (e, t) => e != null && q(e) > String(t),
less_than: (e, t) => e != null && q(e) < String(t)
},
bool: { equal: (e, t) => e === t }
}, J = {
is_null: (e) => e == null || e === "",
is_not_null: (e) => e != null && e !== ""
}, Y = (e, t) => {
let n = e;
for (let e of t) {
if (!e.filter) continue;
let t = e.value !== void 0 && e.value !== null && e.value !== "", r = e.condition === "is_null" || e.condition === "is_not_null";
if (!t && !r) continue;
let i = J[e.condition];
if (i) {
n = n.filter((t) => i(K(t, e.field), e.value));
continue;
}
if (e.type === "bool") {
n = n.filter((t) => K(t, e.field) === e.value);
continue;
}
let a = xe[e.type]?.[e.condition];
a && e.value !== void 0 && (n = n.filter((t) => a(K(t, e.field), e.value)));
}
return n;
}, Se = (e, t, n) => {
if (!n || !e.length) return e;
let r = n.toLowerCase(), i = t.filter((e) => e.search && !e.hide).map((e) => e.field);
return e.filter((e) => i.some((t) => String(K(e, t) ?? "").toLowerCase().includes(r)));
}, X = (e, t, n, r) => {
let i = new Intl.Collator(void 0, {
numeric: r,
sensitivity: "base"
}), a = n === "desc" ? -1 : 1;
return [...e].sort((e, n) => {
let r = K(e, t), o = K(n, t);
return i.compare(String(r ?? ""), String(o ?? "")) * a;
});
};
//#endregion
//#region src/components/composables/useFiltering.ts
function Ce(e) {
let n = g(e.search.value), r = g(null), i = h(/* @__PURE__ */ new Map()), a = t(() => e.columns.value.map((e) => {
let t = e.type?.toLowerCase() || "string", n = e.field ?? "", r = i.get(n);
return {
field: n,
type: t,
condition: r?.condition ?? e.condition ?? (t === "bool" ? "" : t === "string" ? "contain" : "equal"),
value: r?.value ?? e.value,
filter: e.filter ?? !0,
search: e.search ?? !0,
sort: e.sort ?? !0,
hide: e.hide ?? !1,
title: e.title,
width: e.width,
minWidth: e.minWidth,
maxWidth: e.maxWidth,
headerClass: e.headerClass,
cellClass: e.cellClass,
isUnique: e.isUnique ?? !1,
html: e.html ?? !1,
cellRenderer: e.cellRenderer
};
}));
i.clear(), e.columns.value.forEach((e) => {
let t = e.field ?? "", n = e.type?.toLowerCase() || "string";
i.set(t, {
value: e.value,
condition: e.condition ?? (n === "bool" ? "" : n === "string" ? "contain" : "equal")
});
});
let o = /* @__PURE__ */ new Map();
i.forEach((e, t) => {
o.set(t, { ...e });
});
let s = t(() => {
let t = e.rows.value || [];
if (!e.isServerMode.value && (e.columnFilter.value && (t = Y(t, a.value)), t = Se(t, a.value, n.value), e.sortable.value)) {
let n = a.value.find((t) => t.field === e.sortColumn.value)?.type === "number";
t = X(t, e.sortColumn.value, e.sortDirection.value, n);
}
return t;
}), c = t(() => e.isServerMode.value ? e.totalRows.value || 0 : s.value.length);
return C(e.search, (e) => {
n.value = e;
}), {
currentSearch: n,
isOpenFilter: r,
normalizedColumns: a,
filteredRows: s,
filterRowCount: c,
columnFilterState: i,
setFilterValue: (t, n) => {
let r = i.get(t);
r && (r.value = n, n !== void 0 && n !== "" && r.condition === "" && (r.condition = (e.columns.value.find((e) => e.field === t)?.type?.toLowerCase() || "string") === "string" ? "contain" : "equal"));
},
setFilterCondition: (e, t) => {
let n = i.get(e);
n && (n.condition = t, t === "" && (n.value = void 0));
},
toggleFilterMenu: (e) => {
e && r.value === e ? r.value = null : r.value = e;
},
getColumnsWithFilterState: () => e.columns.value.map((e) => {
let t = e.field ?? "", n = e.type?.toLowerCase() || "string", r = i.get(t);
return {
...e,
type: n,
value: r?.value,
condition: r?.condition
};
}),
resetFilters: () => {
o.forEach((e, t) => {
i.set(t, { ...e });
}), n.value = "";
}
};
}
//#endregion
//#region src/components/composables/useSelection.ts
function we(e) {
let n = g([]), r = (t, n) => e.uniqueKey.value ? K(t, e.uniqueKey.value) ?? n : n, i = t(() => {
let t = e.filterItems.value;
return n.value.length === 0 || t.length === 0 ? !1 : t.every((e, t) => n.value.includes(r(e, t))) ? !0 : t.some((e, t) => n.value.includes(r(e, t))) ? null : !1;
}), a = (t) => {
t ? n.value = e.filterItems.value.map((e, t) => r(e, t)) : n.value = [];
}, o = () => {
n.value = [];
}, s = (t) => {
if (!u(t)) {
let i = e.filterItems.value[t];
i && n.value.push(r(i, t));
}
}, c = (t) => {
if (u(t)) {
let i = e.filterItems.value[t];
if (i) {
let e = r(i, t);
n.value = n.value.filter((t) => t !== e);
}
}
}, l = (e) => {
u(e) ? c(e) : s(e);
}, u = (t) => {
let i = e.filterItems.value[t];
return i ? n.value.includes(r(i, t)) : !1;
};
return {
selected: n,
selectedAll: i,
getRowKey: r,
selectAll: a,
clearSelection: o,
selectRow: s,
unselectRow: c,
toggleRow: l,
isRowSelected: u,
getSelectedRows: () => e.filterItems.value.filter((e, t) => n.value.includes(r(e, t))),
clearSelectedRows: o
};
}
var Te = (e) => t(() => e.value.find((e) => e.isUnique)?.field || null);
//#endregion
//#region src/components/composables/useRowClick.ts
function Ee(e, t) {
return {
handleClick: (t, n) => {
e(t, n);
},
handleDblClick: (e) => {
t(e);
}
};
}
//#endregion
//#region src/components/custom-table.vue?vue&type=script&setup=true&lang.ts
var De = { class: "bh-datatable bh-relative bh-text-sm bh-font-normal bh-text-black bh-antialiased" }, Oe = ["onClick", "onDblclick"], ke = { class: "bh-checkbox" }, Ae = ["checked", "onChange"], je = ["innerHTML"], Me = { key: 1 }, Ne = ["colspan"], Pe = {
key: 0,
class: "bh-absolute bh-inset-0 bh-grid bh-place-content-center bh-bg-blue-light/50"
}, Fe = { class: "bh-flex bh-flex-col bh-flex-wrap bh-items-center bh-gap-4 sm:bh-flex-row" }, Ie = { class: "bh-pagination-info bh-flex bh-items-center" }, Le = { class: "bh-mr-2" }, Re = ["value"], ze = { class: "bh-pagination-number bh-inline-flex bh-items-center bh-space-x-1 sm:bh-ml-auto" }, Be = ["onClick"], Z = /* @__PURE__ */ c({
__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: "" },
page: { default: 1 },
pageSize: { default: 10 },
pageSizeOptions: { default: () => [
10,
20,
30,
50,
100
] },
showPageSize: {
type: Boolean,
default: !0
},
rowClass: {
type: [
String,
Array,
Function
],
default: ""
},
cellClass: {
type: [
String,
Array,
Function
],
default: ""
},
sortable: {
type: Boolean,
default: !1
},
sortColumn: { default: "" },
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
},
paginationInfo: { default: "Showing {0} to {1} of {2} entries" },
noDataContent: { default: "No data available" },
skeletonRowCount: { default: 10 },
stickyHeader: {
type: Boolean,
default: !1
},
height: { default: "500px" },
stickyFirstColumn: {
type: Boolean,
default: !1
},
cloneHeaderInFooter: {
type: Boolean,
default: !1
},
selectRowOnClick: {
type: Boolean,
default: !1
}
},
emits: [
"changeServer",
"sortChange",
"searchChange",
"pageChange",
"pageSizeChange",
"rowSelect",
"filterChange",
"rowClick",
"rowDBClick",
"reset"
],
setup(a, { expose: c, emit: f }) {
let p = te(), h = a, S = f, { currentSortColumn: E, currentSortDirection: D, toggleSort: O, resetSort: re } = be({
sortColumn: b(h, "sortColumn"),
sortDirection: b(h, "sortDirection")
}), { currentSearch: k, isOpenFilter: A, normalizedColumns: j, filteredRows: M, filterRowCount: N, setFilterValue: ae, setFilterCondition: oe, toggleFilterMenu: se, getColumnsWithFilterState: P, resetFilters: ce } = Ce({
rows: b(h, "rows"),
columns: b(h, "columns"),
isServerMode: b(h, "isServerMode"),
columnFilter: b(h, "columnFilter"),
sortable: b(h, "sortable"),
sortColumn: E,
sortDirection: D,
search: b(h, "search"),
totalRows: b(h, "totalRows")
}), { currentPage: F, currentPageSize: I, initialPageSize: le, maxPage: L, offset: R, limit: z, paging: ue } = ye({
page: b(h, "page"),
pageSize: b(h, "pageSize"),
showNumbersCount: b(h, "showNumbersCount"),
pagination: b(h, "pagination"),
totalRows: N
}), de = Te(b(h, "columns")), B = t(() => {
let e = M.value;
return h.isServerMode ? e : e.slice(R.value - 1, z.value);
}), { selectedAll: V, getRowKey: H, selectAll: fe, clearSelection: U, selectRow: pe, unselectRow: he, toggleRow: W, isRowSelected: G, getSelectedRows: q, clearSelectedRows: xe } = we({
filterItems: B,
uniqueKey: de
}), J = g(h.loading);
C(() => h.loading, (e) => {
J.value = e;
});
let { handleClick: Y, handleDblClick: Se } = Ee((e, t) => {
h.selectRowOnClick && (W(t), S("rowSelect", q())), S("rowClick", e);
}, (e) => {
S("rowDBClick", e);
}), X = !1, Z = (e) => {
W(e), S("rowSelect", q());
}, Q = (e) => {
let t = Math.max(1, Math.min(e, L.value));
t !== F.value && (F.value = t, U(), h.isServerMode && $("page"), S("pageChange", F.value));
};
C(() => h.rows, () => {
U();
}), C(I, () => {
X || (U(), h.isServerMode ? (F.value = 1, $("pagesize", !0)) : F.value = 1, S("pageSizeChange", I.value));
});
let Ve = (e) => {
fe(e);
}, He = (e) => {
if (!e) return;
let { field: t, direction: n } = O(e);
U();
let r = (F.value - 1) * (I.value ?? 0), i = I.value ?? 0;
h.isServerMode && $("sort"), S("sortChange", {
offset: r,
limit: i,
field: t,
direction: n
});
}, Ue = (e, t) => {
ae(e, t), Ge();
}, We = (e, t) => {
oe(e, t), Ge();
}, Ge = () => {
U(), h.isServerMode ? (F.value = 1, $("filter", !0)) : F.value = 1, S("filterChange", P());
}, Ke = (e) => {
se(e || null);
};
C(() => h.search, () => {
X || (k.value = h.search, U(), h.isServerMode ? (F.value = 1, $("search", !0)) : F.value = 1, S("searchChange", k.value));
});
let $ = (e, t = !1) => {
h.isServerMode && (J.value = !0, S("changeServer", {
current_page: t ? 1 : F.value,
pagesize: I.value,
offset: (F.value - 1) * (I.value ?? 0),
sort_column: E.value,
sort_direction: D.value,
search: k.value,
column_filters: P(),
change_type: e
}));
};
return c({
reset: () => {
X = !0, U(), ce(), re(), I.value = le, F.value = 1, h.isServerMode && $("reset", !0), S("reset"), u(() => {
X = !1;
});
},
getSelectedRows: q,
getColumnFilters: () => P(),
clearSelectedRows: xe,
selectRow: pe,
unselectRow: he,
isRowSelected: G,
getFilteredRows: () => M.value,
getVisibleRows: () => B.value
}), (t, a) => (m(), r("div", De, [i("div", {
class: d(["bh-table-responsive", { "bh-min-h-[300px]": J.value }]),
style: ee({ height: h.stickyHeader ? h.height : void 0 })
}, [i("table", { class: d([h.skin]) }, [
i("thead", { class: d({ "bh-sticky bh-top-0 bh-z-10": h.stickyHeader }) }, [s(me, {
"has-checkbox": h.hasCheckbox,
"sticky-header": h.stickyHeader,
"sticky-first-column": h.stickyFirstColumn,
sortable: h.sortable,
"column-filter": h.columnFilter,
columns: x(j),
"current-sort-column": x(E),
"current-sort-direction": x(D),
"is-open-filter": x(A),
"check-all": x(V),
"column-filter-lang": h.columnFilterLang,
onSelectAll: Ve,
onSortChange: He,
onFilterValueChange: Ue,
onConditionChange: We,
onToggleFilterMenu: Ke
}, null, 8, [
"has-checkbox",
"sticky-header",
"sticky-first-column",
"sortable",
"column-filter",
"columns",
"current-sort-column",
"current-sort-direction",
"is-open-filter",
"check-all",
"column-filter-lang"
])], 2),
i("tbody", null, [
x(N) ? (m(!0), r(e, { key: 0 }, _(B.value, (c, l) => (m(), r("tr", {
key: x(H)(c, l),
class: d([typeof h.rowClass == "function" ? h.rowClass(c) : h.rowClass, h.selectRowOnClick ? "bh-cursor-pointer" : ""]),
onClick: T((e) => x(Y)(c, l), ["prevent"]),
onDblclick: T((e) => x(Se)(c), ["prevent"])
}, [h.hasCheckbox ? (m(), r("td", {
key: 0,
class: d({ "bh-sticky bh-left-0 bh-bg-blue-light": h.stickyFirstColumn })
}, [i("div", ke, [i("input", {
type: "checkbox",
checked: x(G)(l),
onClick: a[0] ||= T(() => {}, ["stop"]),
onChange: (e) => Z(l)
}, null, 40, Ae), i("div", null, [s(ie, { class: "check" })])])], 2)) : n("", !0), (m(!0), r(e, null, _(x(j), (i, a) => (m(), r(e, null, [i.hide ? n("", !0) : (m(), r("td", {
key: i.field,
class: d([
typeof h.cellClass == "function" ? h.cellClass(c) : h.cellClass,
a === 0 && h.stickyFirstColumn ? "bh-sticky bh-left-0 bh-bg-blue-light" : "",
h.hasCheckbox && a === 0 && h.stickyFirstColumn ? "bh-left-[52px]" : "",
i.cellClass ? i.cellClass : ""
])
}, [i.field && x(p)[i.field] ? v(t.$slots, i.field, {
key: 0,
value: c
}) : i.cellRenderer && typeof i.cellRenderer == "function" ? (m(), r("div", {
key: 1,
innerHTML: x(ve)(i.cellRenderer(c))
}, null, 8, je)) : (m(), r(e, { key: 2 }, [o(y(x(K)(c, i.field)), 1)], 64))], 2))], 64))), 256))], 42, Oe))), 128)) : n("", !0),
!x(N) && !J.value ? (m(), r("tr", Me, [i("td", { colspan: x(j).length + 1 }, [v(t.$slots, "noData", {}, () => [o(y(h.noDataContent), 1)])], 8, Ne)])) : n("", !0),
!x(N) && J.value ? (m(!0), r(e, { key: 2 }, _(h.skeletonRowCount, (t) => (m(), r("tr", {
key: t,
class: "bh-h-11"
}, [(m(!0), r(e, null, _((h.hasCheckbox ? 1 : 0) + x(j).filter((e) => !e.hide).length, (e) => (m(), r("td", { key: e }, [...a[6] ||= [i("div", { class: "bh-skeleton-box" }, null, -1)]]))), 128))]))), 128)) : n("", !0)
]),
h.cloneHeaderInFooter ? (m(), r("tfoot", {
key: 0,
class: d({ "bh-sticky bh-bottom-0": h.stickyHeader })
}, [s(me, {
"has-checkbox": h.hasCheckbox,
"sticky-header": h.stickyHeader,
"sticky-first-column": h.stickyFirstColumn,
sortable: h.sortable,
"column-filter": h.columnFilter,
columns: x(j),
"current-sort-column": x(E),
"current-sort-direction": x(D),
"is-open-filter": x(A),
"is-footer": !0,
"check-all": x(V),
onSelectAll: Ve,
onSortChange: He,
onFilterValueChange: Ue,
onConditionChange: We,
onToggleFilterMenu: Ke
}, null, 8, [
"has-checkbox",
"sticky-header",
"sticky-first-column",
"sortable",
"column-filter",
"columns",
"current-sort-column",
"current-sort-direction",
"is-open-filter",
"check-all"
])], 2)) : n("", !0)
], 2), x(N) && J.value ? (m(), r("div", Pe, [s(ge)])) : n("", !0)], 6), h.pagination && x(N) ? (m(), r("div", {
key: 0,
class: d(["bh-pagination bh-py-5", { "bh-pointer-events-none bh-opacity-50": J.value }])
}, [i("div", Fe, [i("div", Ie, [i("span", Le, y(x(_e)(h.paginationInfo, x(N) ? x(R) : 0, x(z), x(N))), 1), h.showPageSize ? w((m(), r("select", {
key: 0,
"onUpdate:modelValue": a[1] ||= (e) => l(I) ? I.value = e : null,
class: "bh-pagesize"
}, [(m(!0), r(e, null, _(h.pageSizeOptions, (e) => (m(), r("option", {
key: e,
value: e
}, y(e), 9, Re))), 128))], 512)), [[ne, x(I)]]) : n("", !0)]), i("div", ze, [
h.showFirstPage ? (m(), r("button", {
key: 0,
type: "button",
class: d(["bh-page-item first-page", { disabled: x(F) <= 1 }]),
onClick: a[2] ||= (e) => Q(1)
}, [v(t.$slots, "firstArrow", {}, () => [a[7] ||= 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)) : n("", !0),
i("button", {
type: "button",
class: d(["bh-page-item previous-page", { disabled: x(F) <= 1 }]),
onClick: a[3] ||= (e) => Q(x(F) - 1)
}, [v(t.$slots, "previousArrow", {}, () => [a[8] ||= 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),
h.showNumbers ? (m(!0), r(e, { key: 1 }, _(x(ue), (e) => (m(), r("button", {
key: e,
type: "button",
class: d(["bh-page-item", {
disabled: x(F) === e,
"bh-active": e === x(F)
}]),
onClick: (t) => Q(e)
}, y(e), 11, Be))), 128)) : n("", !0),
i("button", {
type: "button",
class: d(["bh-page-item next-page", { disabled: x(F) >= x(L) }]),
onClick: a[4] ||= (e) => Q(x(F) + 1)
}, [v(t.$slots, "nextArrow", {}, () => [a[9] ||= 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),
h.showLastPage ? (m(), r("button", {
key: 2,
type: "button",
class: d(["bh-page-item last-page", { disabled: x(F) >= x(L) }]),
onClick: a[5] ||= (e) => Q(x(L))
}, [v(t.$slots, "lastArrow", {}, () => [a[10] ||= 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)) : n("", !0)
])])], 2)) : n("", !0)]));
}
}), Q = Z;
//#endregion
export { Z as Vue3Datatable, Q as default };