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