sci-pro
Version:
945 lines (944 loc) • 38.4 kB
JavaScript
import { defineComponent as sl, ref as d, useSlots as Xl, watch as Oe, nextTick as ge, computed as Z, onMounted as Yl, onUnmounted as Gl, openBlock as o, createElementBlock as i, normalizeStyle as p, createElementVNode as c, createCommentVNode as m, Fragment as k, renderList as w, normalizeClass as R, withDirectives as B, vModelCheckbox as ye, createTextVNode as jl, toDisplayString as be, withModifiers as U, renderSlot as ke, createBlock as al, createVNode as Ue, vShow as xe, Transition as ql, withCtx as Il, vModelText as Jl } from "vue";
import nl from "./icons/IconSearch.vue.mjs";
import Kl from "./icons/IconDateTime.vue.mjs";
import Ql from "./icons/IconDate.vue.mjs";
import "./style/index.css";
const Zl = {
key: 0,
width: "40"
}, et = ["rowspan"], lt = /* @__PURE__ */ c("span", { class: "sci-checkbox__inner" }, null, -1), tt = ["colspan", "rowspan"], at = ["onClick"], nt = /* @__PURE__ */ c("i", { class: "sort-caret up" }, null, -1), st = /* @__PURE__ */ c("i", { class: "sort-caret down" }, null, -1), ot = [
nt,
st
], rt = {
key: 1,
class: "filter-container"
}, ut = ["onClick"], it = {
key: 0,
width: "40"
}, ct = {
key: 0,
class: "sci-table-tbody-tr"
}, ft = { key: 0 }, dt = ["onChange"], vt = ["onClick"], ht = {
key: 2,
type: "submit"
}, pt = ["onContextmenu"], mt = ["rowspan"], gt = ["disabled", "onUpdate:modelValue", "onChange"], yt = /* @__PURE__ */ c("span", { class: "sci-checkbox__inner" }, null, -1), bt = ["rowspan", "onDblclick"], kt = ["onClick"], xt = { key: 0 }, _t = { key: 1 }, Ct = { key: 1 }, Nt = { key: 0 }, wt = { key: 1 }, Rt = {
key: 0,
class: "table-x-scrollbar-container"
}, Dt = {
key: 1,
class: "table-y-scrollbar-container"
}, Et = {
key: 2,
class: "no-data-box"
}, $t = { key: 0 }, Lt = { key: 1 }, St = { class: "filter-search-container" }, Ht = { class: "search-icon" }, Tt = { class: "sci-checkbox-input" }, At = /* @__PURE__ */ c("span", { class: "sci-checkbox__inner" }, null, -1), Bt = /* @__PURE__ */ c("span", { class: "filter-item-text" }, "Select All", -1), Mt = { class: "sci-checkbox-input" }, Ft = ["onUpdate:modelValue"], Vt = /* @__PURE__ */ c("span", { class: "sci-checkbox__inner" }, null, -1), Wt = { class: "filter-item-text" }, Ot = { class: "filter-loading-container" }, Ut = { class: "filter-loading-spinner" }, zt = /* @__PURE__ */ c("span", { class: "filter-loading-text" }, "加载中...", -1), Pt = { class: "filter-button-group" }, Xt = sl({ name: "sci-table" }), Kt = /* @__PURE__ */ sl({
...Xt,
props: {
columns: {},
tableData: { default: () => [] },
selection: { type: Boolean },
fixed: { type: Boolean, default: !0 },
tableWidth: {},
tableHeight: {},
search: { type: Boolean },
filterList: { default: () => [] },
filterListTotal: { default: 0 },
cellStyle: {}
},
emits: ["selectionHandler", "searchHandler", "filterConfirmHandler", "filterGetHandler", "cellDoubleClick", "contextmenuHandler", "sortHandler", "searchTypeHandler"],
setup(ol, { expose: rl, emit: ul }) {
let S;
((e) => {
e[e.asc = 0] = "asc", e[e.desc = 1] = "desc", e[e.default = 2] = "default";
})(S || (S = {}));
const u = ol, b = ul, re = d([]), _e = d([]), ze = d([]), M = d(!1), j = d(!1), h = d([]), Ce = d([]), Pe = d([]), il = Xl(), q = d(), Xe = d(), I = d(), D = d(), Ye = d(), Ne = d(0);
let z = 0, we = 0, P = 0, Re = null;
const ue = [], De = d(), ee = d(0), H = d(0);
let ie = 0, le = 0, ce = !1, fe = 0;
const F = d(0), Ee = d(), te = d(0), V = d(0);
let de = 0, ae = 0, ve = !1, $e = 0;
const X = d(0), s = d(""), v = d({}), J = d({}), ne = d({}), Le = d(0), Ge = d(0), T = d(!1), he = d("");
let Y = !1;
const y = d(!1), E = d(!1);
let Se = null, He = null;
const se = d(), je = d(), cl = d([
{
rotate: 30,
opacity: 1
},
{
rotate: 60,
opacity: 0.9375
},
{
rotate: 90,
opacity: 0.875
},
{
rotate: 120,
opacity: 0.8125
},
{
rotate: 150,
opacity: 0.75
},
{
rotate: 180,
opacity: 0.6875
},
{
rotate: 210,
opacity: 0.625
},
{
rotate: 240,
opacity: 0.5625
},
{
rotate: 270,
opacity: 0.5
},
{
rotate: 300,
opacity: 0.4375
},
{
rotate: 330,
opacity: 0.375
},
{
rotate: 0,
opacity: 0.3125
}
]);
let C = {}, W = {}, oe = {}, O = {}, x = {}, K = [];
const N = "-SCI-TABLE-", pe = d();
let Te = 0;
Oe(
() => [
u.selection,
u.columns,
u.tableWidth,
u.tableHeight,
u.tableData
],
() => {
ge(() => {
u.columns.length > 0 && (u.columns.some((t) => t.fixed) && We(), Q());
});
},
{ immediate: !0 }
), Oe(
() => u.tableData,
() => {
Te = u.tableData.filter((e) => e.disabled).length, j.value = !1, M.value = !1, s.value && (v.value[s.value].forEach(
(t, l) => {
O[s.value][l] = t.checked;
}
), v.value[s.value].some(
(t) => t.checked
) ? J.value[s.value] = !0 : delete J.value[s.value]);
}
);
const me = Z(() => u.columns.some((e) => e.children)), A = Z(() => {
let e = [];
const t = u.columns.filter((f) => f.fixed === "left"), l = u.columns.filter((f) => !f.fixed), n = u.columns.filter((f) => f.fixed === "right");
e = [...t, ...l, ...n];
const a = [], r = (f = [], g = 0) => {
f.forEach((L) => {
a[g] ? a[g].push(L) : a[g] = [L], me.value && (L.children ? (L.colspan = Ie(L.children), r(L.children, g + 1)) : L.colspan = 1);
});
};
return r(e), vl(), qe(e), me.value && Je(a), a;
}), fl = Z(() => u.columns.some((e) => e.fixed && e.fixed === "left")), dl = Z(() => u.columns.some((e) => e.fixed && e.fixed === "right")), Ae = Z(() => u.columns.some((e) => e.onRowspan)), vl = () => {
u.columns.some((t) => t.children) && (h.value = []);
}, qe = (e, t = "") => {
me.value ? e.forEach((l) => {
l.children ? (l.fixed = l.fixed || t, qe(l.children, l.fixed)) : (l.fixed = l.fixed || t, h.value.push(l));
}) : h.value = e;
}, Ie = (e, t = 0) => (e.forEach((l) => {
l.children ? t = Ie(l.children, t) : t++;
}), t), Je = (e, t = 0) => {
e[e.length - t - 1].forEach((l) => {
l.rowspan = l.children ? 1 : t + 1;
}), t++, e[e.length - t - 1] && Je(e, t);
}, _ = Z(() => (u.tableData.length > 0 && (G && h.value[G.columnIndex].onRowspan && hl(), u.selection && u.tableData.forEach((e) => {
e.isChecked = e.isChecked || !1;
}), u.tableData.forEach((e) => {
e.children && ("collapse" in e || (e.collapse = !0));
}), pl()), u.tableData)), hl = () => {
let e = h.value[G.columnIndex].columnName, t = u.tableData[G.rowIndex][e];
for (let l = G.rowIndex + 1; l < u.tableData.length && !x[`${u.tableData[l][e]}${N}${l}`]; l++)
_.value[l][e] = t;
}, pl = () => {
x = {}, K = h.value.filter((e) => e.onRowspan), K.length > 0 && (K.forEach((e, t) => {
let l = 0;
u.tableData.forEach((n, a) => {
let r = !1;
if (u.tableData[a - 1] && x[`${n[e.columnName]}${N}${l}`] && (x[`${n[e.columnName]}${N}${l}`][1] === -1 ? r = !0 : r = n[K[t - 1].columnName] === u.tableData[a - 1][K[t - 1].columnName] && !(t !== 0 && x[`${n[K[t - 1].columnName]}${N}${a}`])), u.tableData[a - 1] && n[e.columnName] === u.tableData[a - 1][e.columnName] && r) {
let f = x[`${n[e.columnName]}${N}${l}`];
f[0] = f[0] + 1;
} else
x[`${n[e.columnName]}${N}${a}`] = [1, t === 0 ? -1 : t - 1], l = a;
});
}), G = {});
}, ml = (e) => {
var t;
e.preventDefault(), ce = !0, ie = e.clientX, (t = De.value) == null || t.addEventListener("mousemove", Be);
}, Be = (e) => {
e.preventDefault(), e.clientX - ie + le < 0 ? H.value = 0 : e.clientX - ie + le + ee.value > P ? H.value = P - ee.value : H.value = e.clientX - ie + le, q.value.scrollLeft = H.value * fe, D.value.scrollLeft = H.value * fe;
}, Me = () => {
var e;
le = H.value, ce = !1, (e = De.value) == null || e.removeEventListener("mousemove", Be);
}, gl = (e) => {
var t;
e.preventDefault(), ve = !0, de = e.clientY, (t = Ee.value) == null || t.addEventListener("mousemove", Fe);
}, Fe = (e) => {
e.preventDefault(), e.clientY - de + ae < 0 ? V.value = 0 : e.clientY - de + ae + te.value > z ? V.value = z - te.value : V.value = e.clientY - de + ae, D.value.scrollTop = V.value * $e;
}, Ve = () => {
var e;
ae = V.value, ve = !1, (e = Ee.value) == null || e.removeEventListener("mousemove", Fe);
}, yl = () => {
T.value = !1, ve || (V.value = D.value.scrollTop / $e, ae = V.value), ce || (q.value.scrollLeft = D.value.scrollLeft, H.value = D.value.scrollLeft / fe, le = H.value);
}, Q = () => {
setTimeout(() => {
var e, t, l, n, a, r, f, g;
I.value && (z = ((e = I.value) == null ? void 0 : e.getBoundingClientRect().height) - 1, we = (t = Ye.value) == null ? void 0 : t.getBoundingClientRect().height, Ne.value = (l = Xe.value) == null ? void 0 : l.getBoundingClientRect().width, P = (n = q.value) == null ? void 0 : n.getBoundingClientRect().width, X.value = ((a = D.value) == null ? void 0 : a.clientWidth) - ((r = D.value) == null ? void 0 : r.getBoundingClientRect().width), F.value = ((f = D.value) == null ? void 0 : f.clientHeight) - ((g = D.value) == null ? void 0 : g.getBoundingClientRect().height), F.value = Math.abs(F.value) < 1 ? 0 : F.value, X.value = Math.abs(X.value) < 1 ? 0 : X.value, te.value = X.value === 0 ? 0 : z / we * z, ee.value = F.value === 0 ? 0 : P * P / Ne.value, fe = (Ne.value - P) / (P - ee.value), $e = (we - z) / (z - te.value));
});
}, Ke = () => {
T.value = !1;
};
Yl(() => {
pe.value = new ResizeObserver(() => {
Q();
}), pe.value.observe(I.value), u.columns.some((t) => t.fixed) && window.addEventListener("resize", We), ge(() => {
Q();
}), window.addEventListener("resize", Q), document.addEventListener("mouseup", Me, !1), document.addEventListener("mouseup", Ve, !1), document.addEventListener(
"mousemove",
(t) => {
ce && Be(t), ve && Fe(t);
},
!1
), document.addEventListener("click", Ke, !1);
}), Gl(() => {
pe.value && I.value && pe.value.unobserve(I.value), window.removeEventListener("resize", We), window.removeEventListener("resize", Q), document.removeEventListener("mouseup", Me), document.removeEventListener("mouseup", Ve), document.removeEventListener("click", Ke);
});
const We = () => {
typeof window < "u" && window.requestAnimationFrame ? window.requestAnimationFrame(Qe) : Qe();
}, Qe = () => {
fl.value && bl(), dl.value && kl();
}, bl = () => {
var t;
const e = u.selection ? (t = ze.value[0]) == null ? void 0 : t.getBoundingClientRect().width : 0;
me.value ? A.value.forEach((l, n) => {
l.forEach((a, r) => {
var f, g, L, tl;
if (a.fixed === "left")
if (n === 0) {
let Pl = u.selection ? r + 1 : r;
a.left = ((g = (f = re.value[n]) == null ? void 0 : f.children[Pl]) == null ? void 0 : g.offsetLeft) + "px";
} else
a.left = ((tl = (L = re.value[n]) == null ? void 0 : L.children[r]) == null ? void 0 : tl.offsetLeft) + "px";
});
}) : A.value[0].forEach((l, n) => {
var a, r;
l.fixed === "left" && (l.left = n === 0 ? e + "px" : ((a = _e.value[n - 1]) == null ? void 0 : a.offsetLeft) + ((r = _e.value[n - 1]) == null ? void 0 : r.getBoundingClientRect().width) + "px");
});
}, kl = () => {
const e = re.value[0];
for (let t = A.value[0].length - 1; t >= 0; t--)
A.value[0][t].fixed === "right" && (t === A.value[0].length - 1 ? A.value[0][t].right = "0px" : A.value[0][t].right = u.selection ? (e == null ? void 0 : e.children[t + 2]).offsetWidth + "px" : (e == null ? void 0 : e.children[t + 1]).offsetWidth + "px");
}, Ze = (e) => {
const t = u.columns.some((l) => l.fixed);
return e === "position" ? t ? "sticky" : "relative" : t ? "0px" : "";
}, xl = () => {
if (j.value = !1, M.value) {
const e = _.value.filter((t) => t.isChecked = !t.disabled);
b("selectionHandler", e);
} else
_.value.forEach((e) => {
e.isChecked = !1;
}), b("selectionHandler", []);
}, _l = (e, t) => {
let l = [];
if (Ae.value && h.value[0].onRowspan) {
let n = e[h.value[0].columnName] + N + t, a = x[n];
if (a[0] > 1)
for (let r = t; r < t + a[0] - 1; r++)
_.value[r + 1].isChecked = _.value[r].isChecked;
}
l = _.value.filter((n) => n.isChecked && !n.disabled), l.length === 0 && (M.value = !1, j.value = !1), l.length + Te === _.value.length && (M.value = !0, j.value = !1), l.length !== 0 && l.length + Te !== _.value.length && (M.value = !1, j.value = !0), b("selectionHandler", l);
}, Cl = (e) => {
e.collapse = !e.collapse, ge(() => {
Q();
});
}, Nl = (e) => u.cellStyle ? u.cellStyle(e) : {}, el = (e, t) => {
Re && clearTimeout(Re), Re = window.setTimeout(() => {
let l = Ce.value[t].value;
const n = ue.findIndex((a) => a.col.columnName === e.columnName);
if (n > -1 && ue.splice(n, 1), l) {
let a = il["search-select"] ? {
value: l,
col: e,
optionValue: Pe.value[t].value
} : {
value: l,
col: e
};
ue.push(a);
}
}, 100);
}, wl = () => {
window.setTimeout(() => {
b("searchHandler", ue);
}, 150);
};
Oe(
() => u.filterList,
() => {
var e, t, l;
if (s.value)
if ((e = u.filterList) == null || e.forEach((n) => {
n.checked = Y && v.value[s.value] ? y.value : !1;
}), ne.value[s.value] = u.filterListTotal, Y && v.value[s.value])
v.value[s.value] = v.value[s.value].concat(u.filterList), O[s.value] = O[s.value].concat(new Array(u.filterList.length).fill(!1)), Y = !1;
else if (v.value[s.value]) {
y.value = !1, E.value = !1, JSON.parse(JSON.stringify(v.value))[s.value].forEach((r) => {
var f;
r.checked && ((f = u.filterList) == null || f.forEach((g) => {
g.label === r.label && (g.checked = !0);
}));
}), O[s.value] = u.filterList.map(
(r) => r.checked
), v.value[s.value] = u.filterList;
let a = (t = v.value[s.value]) == null ? void 0 : t.every(
(r) => r.checked
);
y.value = a, E.value = a ? !1 : (l = v.value[s.value]) == null ? void 0 : l.some((r) => r.checked);
} else
v.value[s.value] = u.filterList, O[s.value] = new Array(
u.filterList.length
).fill(!1);
},
{ immediate: !0 }
);
const Rl = (e, t) => {
if (Y = !1, he.value = W[t.columnName] || "", T.value && s.value === t.columnName) {
T.value = !1;
return;
}
if (El(e, t.columnName), T.value = !0, s.value && s.value !== t.columnName && v.value[t.columnName] || s.value === t.columnName) {
s.value = t.columnName, ll();
return;
}
s.value = t.columnName, ll();
const l = Object.keys(J.value), n = Object.keys(O);
if (l.length === 1 && n.length > 1) {
oe[s.value] = 1, b("filterGetHandler", {
columnName: s.value,
pageNum: 1,
searchValue: W[s.value]
});
return;
}
l.length === 1 && l[0] === t.columnName && Dl(n) || (oe[s.value] = 1, b("filterGetHandler", {
columnName: s.value,
pageNum: 1,
searchValue: W[s.value]
}));
}, Dl = (e) => (e.length === 1 && e[0] === s.value || e.forEach((t) => {
if (t !== s.value && O[t].some((l) => l))
return !1;
}), !0), ll = () => {
var t, l;
y.value = !1, E.value = !1;
let e = (t = v.value[s.value]) == null ? void 0 : t.every(
(n) => n.checked
);
y.value = e, E.value = e ? !1 : (l = v.value[s.value]) == null ? void 0 : l.some((n) => n.checked);
}, El = (e, t) => {
var r;
let l = e.currentTarget.parentNode, n = q.value, a = (l == null ? void 0 : l.getBoundingClientRect().left) - (n == null ? void 0 : n.getBoundingClientRect().left) + 20 - 180;
Ge.value = a < 1 ? 0 : a, Le.value || (Le.value = (r = q.value) == null ? void 0 : r.getBoundingClientRect().height), s.value !== t && ge(() => {
se.value.scrollTop = 0;
});
}, $l = () => {
if (E.value) {
C[s.value] || (C[s.value] = []);
let e = [];
v.value[s.value].forEach((l) => {
e.push(l.label), l.checked && !C[s.value].includes(l.label) && C[s.value].push(l.label);
});
let t = [];
C[s.value].forEach((l) => {
if (!e.includes(l))
t.push(l);
else {
let n = e.findIndex((a) => a === l);
v.value[s.value][n].checked && t.push(l);
}
}), C[s.value] = [...new Set(t)];
} else
delete C[s.value], (y.value && W[s.value] || y.value && Object.keys(J.value).length > 1) && (C[s.value] = [], v.value[s.value].forEach((e) => {
e.checked && C[s.value].push(e.label);
}));
b("filterConfirmHandler", C), T.value = !1;
}, Ll = () => {
E.value = !1, y.value ? v.value[s.value].forEach((e) => {
e.checked = !0;
}) : v.value[s.value].forEach((e) => {
e.checked = !1;
});
}, Sl = () => {
let e = v.value[s.value].filter(
(t) => t.checked
);
if (e.length === ne.value[s.value]) {
y.value = !0, E.value = !1;
return;
}
y.value = !1, E.value = e.length !== 0;
}, Hl = () => {
Se && clearTimeout(Se), Se = window.setTimeout(() => {
Y = !1, E.value = !1, y.value = !1, W[s.value] = he.value, oe[s.value] = 1, b("filterGetHandler", {
columnName: s.value,
searchValue: W[s.value],
pageNum: 1
});
}, 800);
}, Tl = () => {
var e, t;
Y || (Y = !0), !(v.value[s.value].length === ne.value[s.value] || se.value.scrollTop === 0) && Math.abs(
((e = se.value) == null ? void 0 : e.getBoundingClientRect().height) + se.value.scrollTop - ((t = je.value) == null ? void 0 : t.getBoundingClientRect().height)
) <= 1 && (He && clearTimeout(He), He = window.setTimeout(() => {
b("filterGetHandler", {
columnName: s.value,
pageNum: ++oe[s.value],
searchValue: W[s.value]
});
}, 500));
}, Al = () => {
s.value = "", v.value = {}, J.value = {}, ne.value = {}, O = {}, C = {}, W = {}, oe = {};
}, Bl = (e) => {
const { row: t, col: l, rowIndex: n } = e;
return !(l.onRowspan && n > 0 && t[l.columnName] === _.value[n - 1][l.columnName] && !x[`${t[l.columnName]}${N}${n}`]);
}, Ml = (e) => {
const { row: t, col: l, rowIndex: n } = e;
return l.onRowspan ? x[`${t[l.columnName]}${N}${n}`][0] : 1;
}, Fl = (e, t) => {
if (Ae.value && h.value[0].onRowspan) {
let l = e[h.value[0].columnName] + N + t;
return x[l];
} else
return !0;
}, Vl = (e, t) => {
if (Ae.value && h.value[0].onRowspan) {
let l = e[h.value[0].columnName] + N + t;
return x[l][0];
} else
return 1;
};
let G = null;
const Wl = (e, t) => {
G = t, b("cellDoubleClick", {
event: e,
...t
});
}, Ol = (e, t) => {
b("contextmenuHandler", {
event: e,
row: t
});
}, $ = d({}), Ul = (e) => {
if (!$.value[e.columnName])
$.value = {}, $.value[e.columnName] = S[0];
else
switch ($.value[e.columnName]) {
case S[0]:
$.value[e.columnName] = S[1];
break;
case S[1]:
$.value[e.columnName] = S[2];
break;
case S[2]:
$.value[e.columnName] = S[0];
break;
}
b("sortHandler", {
columnName: e.columnName,
sortType: $.value[e.columnName]
});
}, zl = (e, t, l) => {
b("searchTypeHandler", {
event: e,
columnName: t.columnName,
searchType: t.searchType,
colIndex: l
});
};
return rl({
clearFilterData: Al,
rewriteSearchData: (e, t) => {
u.search && (Ce.value[t].value = e, el(h.value[t], t));
}
}), (e, t) => (o(), i("div", {
class: "sci-table",
style: p({ width: e.tableWidth, height: e.tableHeight })
}, [
c("div", {
ref_key: "headOuterRef",
ref: q,
class: "head-table"
}, [
c("table", {
ref_key: "headTableRef",
ref: Xe
}, [
c("colgroup", null, [
e.selection ? (o(), i("col", Zl)) : m("", !0),
(o(!0), i(k, null, w(h.value, (l, n) => (o(), i("col", {
key: n,
style: p({ minWidth: l.width || "120px", width: l.width })
}, null, 4))), 128))
]),
c("thead", null, [
(o(!0), i(k, null, w(A.value, (l, n) => (o(), i("tr", {
key: n,
ref_for: !0,
ref_key: "headRowRefs",
ref: re
}, [
e.selection && n === 0 ? (o(), i("th", {
key: 0,
class: "head-selection",
ref_for: !0,
ref_key: "selectionRef",
ref: ze,
rowspan: A.value.length
}, [
c("label", {
class: R(["sci-checkbox", {
"is-checked": M.value,
"is-indeterminate": j.value
}]),
style: p({
cursor: _.value.length > 0 ? "pointer" : "not-allowed"
})
}, [
B(c("input", {
type: "checkbox",
"onUpdate:modelValue": t[0] || (t[0] = (a) => M.value = a),
onChange: t[1] || (t[1] = (a) => xl())
}, null, 544), [
[ye, M.value]
]),
lt
], 6)
], 8, et)) : m("", !0),
(o(!0), i(k, null, w(l, (a, r) => (o(), i("th", {
key: r,
ref_for: !0,
ref_key: "colRefs",
ref: _e,
class: R({
fixed: a.fixed,
borderTop: n > 0,
"right-fixed-border": a.fixed === "right"
}),
style: p({
left: a.fixed === "left" ? a.left : "",
right: a.fixed === "right" ? a.right : "",
color: a.color,
background: a.bgColor,
paddingRight: a.filter ? "26px" : "12px",
textAlign: a.align === "center" ? "center" : a.align === "right" ? "right" : "left"
}),
colspan: a.colspan,
rowspan: a.rowspan
}, [
jl(be(a.showName) + " ", 1),
a.sortable ? (o(), i("div", {
key: 0,
class: "sort-container",
style: p({ right: a.filter ? "16px" : "0" })
}, [
c("span", {
onClick: (f) => Ul(a),
class: R({
[$.value[a.columnName]]: $.value[a.columnName]
})
}, ot, 10, at)
], 4)) : m("", !0),
a.filter ? (o(), i("div", rt, [
c("div", {
class: R(["filter-icon", {
active: J.value[a.columnName]
}]),
onClick: U((f) => Rl(f, a), ["stop"])
}, null, 10, ut)
])) : m("", !0)
], 14, tt))), 128))
]))), 128))
])
], 512)
], 512),
c("div", {
class: "body-table-outer",
ref_key: "bodyOuterRef",
ref: I
}, [
c("div", {
ref_key: "bodyTableRef",
ref: D,
class: "body-table",
onScroll: U(yl, ["stop"]),
style: p({
marginRight: X.value + "px",
marginBottom: F.value + "px",
height: e.tableData.length > 0 ? `calc(100% - ${F.value}px)` : 0
})
}, [
c("table", {
ref_key: "TableRef",
ref: Ye
}, [
c("colgroup", null, [
e.selection ? (o(), i("col", it)) : m("", !0),
(o(!0), i(k, null, w(h.value, (l, n) => (o(), i("col", {
key: n,
style: p({ minWidth: l.width || "120px", width: l.width })
}, null, 4))), 128))
]),
c("tbody", null, [
e.search ? (o(), i("tr", ct, [
e.selection ? (o(), i("td", ft)) : m("", !0),
(o(!0), i(k, null, w(h.value, (l, n) => (o(), i("td", {
key: n,
class: R({
fixed: l.fixed,
"right-fixed-border": l.fixed === "right"
}),
style: p({
left: l.fixed === "left" ? l.left : "",
right: l.fixed === "right" ? l.right : ""
})
}, [
c("form", {
onSubmit: U(wl, ["prevent"]),
class: "col-search-container"
}, [
e.search && e.$slots["search-select"] ? (o(), i("select", {
key: 0,
ref_for: !0,
ref_key: "selectRefs",
ref: Pe,
name: "",
id: ""
}, [
ke(e.$slots, "search-select")
], 512)) : m("", !0),
c("input", {
ref_for: !0,
ref_key: "searchRefs",
ref: Ce,
type: "text",
onChange: (a) => el(l, n),
class: R({
"search-option": e.search && e.$slots["search-select"]
})
}, null, 42, dt),
l.searchType ? (o(), i("i", {
key: 1,
class: "search-type-button",
onClick: (a) => zl(a, l, n)
}, [
l.searchType === "datetime" ? (o(), al(Kl, { key: 0 })) : l.searchType === "date" ? (o(), al(Ql, { key: 1 })) : m("", !0)
], 8, vt)) : (o(), i("button", ht, [
c("i", null, [
Ue(nl)
])
]))
], 32)
], 6))), 128))
])) : m("", !0),
(o(!0), i(k, null, w(_.value, (l, n) => (o(), i(k, { key: n }, [
c("tr", {
class: "sci-table-tbody-tr",
onContextmenu: U((a) => Ol(a, l), ["prevent"])
}, [
e.selection && Fl(l, n) ? (o(), i("td", {
key: 0,
class: "head-selection",
rowspan: Vl(l, n)
}, [
c("label", {
class: R(["sci-checkbox", {
"is-checked": l.isChecked,
"is-disabled": l.disabled
}])
}, [
B(c("input", {
type: "checkbox",
disabled: l.disabled,
"onUpdate:modelValue": (a) => l.isChecked = a,
onChange: (a) => _l(l, n)
}, null, 40, gt), [
[ye, l.isChecked]
]),
yt
], 2)
], 8, mt)) : m("", !0),
(o(!0), i(k, null, w(h.value, (a, r) => (o(), i(k, { key: r }, [
Bl({
row: l,
col: a,
rowIndex: n,
columnIndex: r
}) ? (o(), i("td", {
key: 0,
class: R({
fixed: a.fixed,
"right-fixed-border": a.fixed === "right"
}),
style: p({
left: a.fixed === "left" ? a.left : "",
right: a.fixed === "right" ? a.right : "",
...Nl({
row: l,
col: a,
rowIndex: n,
columnIndex: r
})
}),
rowspan: Ml({
row: l,
col: a,
rowIndex: n,
columnIndex: r
}),
onDblclick: (f) => Wl(f, {
row: l,
col: a,
rowIndex: n,
columnIndex: r
})
}, [
c("div", {
class: "td-text-container",
style: p({
textAlign: a.align === "center" ? "center" : a.align === "right" ? "right" : "left"
})
}, [
(l.collapse === !0 || l.collapse === !1) && r === 0 ? (o(), i("div", {
key: 0,
class: "td-text",
onClick: U((f) => Cl(l), ["stop"])
}, [
l.collapse === !0 ? (o(), i("span", xt, "+")) : m("", !0),
l.collapse === !1 ? (o(), i("span", _t, "-")) : m("", !0)
], 8, kt)) : m("", !0),
a.slotsName ? (o(), i("div", {
key: 2,
class: "td-text-slot-container",
style: p({
width: (l.collapse === !0 || l.collapse === !1) && r === 0 ? "calc(100% - 30px)" : "100%",
left: (l.collapse === !0 || l.collapse === !1) && r === 0 ? "26px" : "",
position: (l.collapse === !0 || l.collapse === !1) && r === 0 ? "absolute" : ""
})
}, [
ke(e.$slots, a.slotsName, {
row: l,
rowIndex: n,
col: a,
colIndex: r
})
], 4)) : (o(), i("div", Ct, be(l[a.columnName]), 1))
], 4)
], 46, bt)) : m("", !0)
], 64))), 128))
], 40, pt),
(o(!0), i(k, null, w(l.children, (a, r) => B((o(), i("tr", { key: r }, [
e.selection ? (o(), i("td", {
key: 0,
class: "head-selection",
style: p({
position: Ze("position"),
left: Ze("left")
})
}, null, 4)) : m("", !0),
(o(!0), i(k, null, w(h.value, (f, g) => (o(), i("td", {
class: R(["children-td", {
fixed: f.fixed,
"right-fixed-border": f.fixed === "right"
}]),
key: g,
style: p({
left: f.fixed === "left" ? f.left : "",
right: f.fixed === "right" ? f.right : ""
})
}, [
c("div", {
class: "td-text-container",
style: p({
textAlign: f.align === "center" ? "center" : f.align === "right" ? "right" : "left"
})
}, [
f.slotsName ? (o(), i("div", wt, [
ke(e.$slots, f.slotsName, {
parentRow: l,
parentIndex: n,
row: a,
rowIndex: r,
col: f,
colIndex: g
})
])) : (o(), i("div", Nt, be(a[f.columnName]), 1))
], 4)
], 6))), 128))
])), [
[xe, !l.collapse]
])), 128))
], 64))), 128))
])
], 512)
], 36),
F.value !== 0 ? (o(), i("div", Rt, [
c("div", {
ref_key: "xScrollbarRef",
ref: De,
onMousedown: t[2] || (t[2] = (l) => ml(l)),
onMouseup: Me,
class: "table-x-scrollbar",
style: p({
width: `${ee.value}px`,
transform: `translateX(${H.value}px)`
})
}, null, 36)
])) : m("", !0),
X.value !== 0 ? (o(), i("div", Dt, [
c("div", {
ref_key: "yScrollbarRef",
ref: Ee,
onMousedown: t[3] || (t[3] = (l) => gl(l)),
onMouseup: Ve,
class: "table-y-scrollbar",
style: p({
height: `${te.value}px`,
transform: `translateY(${V.value}px)`
})
}, null, 36)
])) : m("", !0),
_.value.length < 1 ? (o(), i("div", Et, [
e.$slots["no-data"] ? (o(), i("div", $t, [
ke(e.$slots, "no-data")
])) : (o(), i("span", Lt, "No Data"))
])) : m("", !0)
], 512),
Ue(ql, { name: "fade" }, {
default: Il(() => [
B(c("div", {
class: "filter-content-container",
onClick: t[11] || (t[11] = U((l) => T.value = !0, ["stop"])),
style: p({
top: Le.value + "px",
left: Ge.value + "px"
})
}, [
c("div", St, [
c("i", Ht, [
Ue(nl)
]),
B(c("input", {
type: "text",
"onUpdate:modelValue": t[4] || (t[4] = (l) => he.value = l),
onInput: t[5] || (t[5] = (l) => Hl())
}, null, 544), [
[Jl, he.value]
])
]),
c("div", {
class: "filter-list-container",
ref_key: "filterOuterRef",
ref: se,
onScroll: Tl
}, [
c("div", {
ref_key: "filterInnerRef",
ref: je
}, [
B(c("label", {
class: R(["filter-list-item", {
"is-checked": y.value,
"is-indeterminate": E.value
}])
}, [
c("span", Tt, [
B(c("input", {
type: "checkbox",
"onUpdate:modelValue": t[6] || (t[6] = (l) => y.value = l),
onChange: t[7] || (t[7] = (l) => Ll())
}, null, 544), [
[ye, y.value]
]),
At
]),
Bt
], 2), [
[xe, v.value[s.value] && v.value[s.value].length > 0]
]),
(o(!0), i(k, null, w(v.value[s.value], (l) => (o(), i("label", {
class: R(["filter-list-item", { "is-checked": l.checked }]),
key: l.label
}, [
c("span", Mt, [
B(c("input", {
type: "checkbox",
"onUpdate:modelValue": (n) => l.checked = n,
onChange: t[8] || (t[8] = (n) => Sl())
}, null, 40, Ft), [
[ye, l.checked]
]),
Vt
]),
c("span", Wt, be(l.label), 1)
], 2))), 128)),
B(c("div", Ot, [
c("span", Ut, [
(o(!0), i(k, null, w(cl.value, (l) => (o(), i("i", {
key: l.rotate,
style: p({
transform: `rotate(${l.rotate}deg)`,
opacity: l.opacity
})
}, null, 4))), 128))
]),
zt
], 512), [
[
xe,
v.value[s.value] && v.value[s.value].length !== ne.value[s.value]
]
])
], 512)
], 544),
c("div", Pt, [
c("div", {
class: "filter-button-cancel",
onClick: t[9] || (t[9] = U((l) => T.value = !1, ["stop"]))
}, " Cancel "),
c("div", {
class: "filter-button-ok",
onClick: t[10] || (t[10] = U((l) => $l(), ["stop"]))
}, " Confirm ")
])
], 4), [
[xe, T.value]
])
]),
_: 1
})
], 4));
}
});
export {
Kt as default
};